style.css 53 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934
  1. body {
  2. font-family: 'Helvetica Neue';
  3. }
  4. .sec-00 {
  5. background-color: #cacaca;
  6. -webkit-transition-property: height;
  7. transition-property: height;
  8. -webkit-transition-duration: 300ms;
  9. transition-duration: 300ms;
  10. }
  11. @media screen and (max-width: 576px) {
  12. .sec-00 {
  13. display: none;
  14. }
  15. }
  16. .sec-00__close {
  17. position: absolute;
  18. top: 0;
  19. right: 20px;
  20. width: 50px;
  21. height: 30px;
  22. background-color: rgba(255, 255, 255, 0.66);
  23. border-radius: 0 0 50px 50px;
  24. color: #888;
  25. border: none;
  26. outline: none;
  27. font-size: 11px;
  28. -webkit-box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
  29. box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
  30. line-height: 12px;
  31. z-index: 3;
  32. }
  33. .sec-00.bannerClose {
  34. height: 0;
  35. overflow: hidden;
  36. -webkit-transition-property: height;
  37. transition-property: height;
  38. -webkit-transition-duration: 300ms;
  39. transition-duration: 300ms;
  40. }
  41. .sec-00 .container-fluid {
  42. background-color: #cacaca;
  43. }
  44. .sec-00__slider {
  45. margin: 0 auto;
  46. width: 100%;
  47. height: 100%;
  48. max-width: 1310px;
  49. padding-top: 20px;
  50. padding-bottom: 24px;
  51. }
  52. @media (max-width: 1850px) {
  53. .sec-00__slider {
  54. max-width: 1310px;
  55. }
  56. }
  57. @media (max-width: 1550px) {
  58. .sec-00__slider {
  59. max-width: 1310px;
  60. }
  61. }
  62. .sec-00__slider .slide-item {
  63. width: 100%;
  64. height: 100%;
  65. max-width: 1310px;
  66. max-height: 300px;
  67. -o-object-fit: contain;
  68. object-fit: contain;
  69. height: 300px;
  70. cursor: pointer;
  71. }
  72. .sec-00 .slick-prev:before, .sec-00 .slick-next:before {
  73. display: none;
  74. }
  75. .sec-00__bulletList {
  76. position: absolute;
  77. bottom: 21px;
  78. left: calc(50% - 655px);
  79. width: 1310px;
  80. -webkit-box-sizing: border-box;
  81. box-sizing: border-box;
  82. display: -webkit-box;
  83. display: -ms-flexbox;
  84. display: flex;
  85. z-index: 10;
  86. background-color: rgba(0, 0, 0, 0.1);
  87. }
  88. .sec-00__bullet {
  89. position: relative;
  90. width: 100%;
  91. height: 3px;
  92. background-color: rgba(0, 0, 0, 0.1);
  93. -webkit-box-flex: 1;
  94. -ms-flex: 1 1 auto;
  95. flex: 1 1 auto;
  96. opacity: 1;
  97. }
  98. .sec-00__bullet::after {
  99. content: "";
  100. background: #ee7800;
  101. position: absolute;
  102. width: 0;
  103. height: 100%;
  104. left: 0;
  105. top: 0;
  106. border-radius: 2px;
  107. }
  108. .sec-00 .bullet-active::after {
  109. width: 0;
  110. -webkit-animation-name: progress;
  111. animation-name: progress;
  112. -webkit-animation-duration: 4s;
  113. animation-duration: 4s;
  114. -webkit-animation-timing-function: linear;
  115. animation-timing-function: linear;
  116. }
  117. @keyframes progress {
  118. 0% {
  119. width: 0%;
  120. }
  121. 25% {
  122. width: 25%;
  123. }
  124. 50% {
  125. width: 50%;
  126. }
  127. 75% {
  128. width: 75%;
  129. }
  130. 100% {
  131. width: 100%;
  132. }
  133. }
  134. @-webkit-keyframes progress {
  135. 0% {
  136. width: 0%;
  137. }
  138. 25% {
  139. width: 25%;
  140. }
  141. 50% {
  142. width: 50%;
  143. }
  144. 75% {
  145. width: 75%;
  146. }
  147. 100% {
  148. width: 100%;
  149. }
  150. }
  151. @-webkit-keyframes slidein {
  152. 100% {
  153. height: 0px;
  154. }
  155. }
  156. @keyframes slidein {
  157. 100% {
  158. height: 0px;
  159. }
  160. }
  161. .navbar {
  162. box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  163. -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  164. -moz-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  165. padding-top: 5px;
  166. padding-bottom: 5px;
  167. background-color: white !important;
  168. z-index: 99;
  169. }
  170. .navbar .container-fluid {
  171. padding: 0 2.5rem;
  172. }
  173. @media (max-width: 1100px) {
  174. .navbar .container-fluid {
  175. padding: 0 .6rem;
  176. }
  177. }
  178. .navbar-toggler {
  179. padding-left: 0;
  180. border-color: transparent !important;
  181. }
  182. .navbar-toggler:focus {
  183. -webkit-box-shadow: none;
  184. box-shadow: none;
  185. }
  186. .navbar-toggler-icon {
  187. display: -webkit-box;
  188. display: -ms-flexbox;
  189. display: flex;
  190. justify-items: center;
  191. }
  192. .navbar-toggler-icon i {
  193. font-size: 25px;
  194. line-height: 30px;
  195. display: inline-block;
  196. }
  197. .navbar-search, .navbar-login {
  198. padding-right: 2px;
  199. }
  200. .navbar-login {
  201. cursor: pointer;
  202. }
  203. .navbar-search-magnify {
  204. cursor: pointer;
  205. }
  206. .navbar-brand {
  207. font-size: 1.5rem;
  208. }
  209. .navbar-brand.navbar-logo {
  210. display: -webkit-box;
  211. display: -ms-flexbox;
  212. display: flex;
  213. -webkit-box-align: center;
  214. -ms-flex-align: center;
  215. align-items: center;
  216. }
  217. .navbar-brand .navbar-login {
  218. font-size: 1rem;
  219. color: #EE7800;
  220. text-decoration: none;
  221. }
  222. .navbar .nav-link {
  223. cursor: pointer;
  224. }
  225. @media (max-width: 1100px) {
  226. .navbar .nav-link {
  227. padding: .5rem .5rem;
  228. font-size: .9rem;
  229. }
  230. }
  231. .navbar .navbar-nav .nav-item {
  232. margin: 0 .5rem;
  233. }
  234. @media (max-width: 1100px) {
  235. .navbar .navbar-nav .nav-item {
  236. margin: 0 0rem;
  237. }
  238. }
  239. .navbar .navbar-nav .nav-item .dropbox {
  240. visibility: hidden;
  241. opacity: 0;
  242. -webkit-transition: all .4s;
  243. transition: all .4s;
  244. position: absolute;
  245. width: 100vw;
  246. top: 100%;
  247. left: 0;
  248. background-color: rgba(255, 255, 255, 0.932);
  249. padding-top: 1.5rem;
  250. padding-bottom: 3rem;
  251. }
  252. .navbar .navbar-nav .nav-item .dropbox ul {
  253. padding-left: 0;
  254. }
  255. .navbar .navbar-nav .nav-item .dropbox-item {
  256. margin-bottom: .5rem;
  257. }
  258. .navbar .navbar-nav .nav-item .dropbox-item.first {
  259. font-size: 1.1rem;
  260. font-weight: 600;
  261. }
  262. .navbar .navbar-nav .nav-item .dropbox-item.first .dropbox-link {
  263. color: black;
  264. }
  265. .navbar .navbar-nav .nav-item .dropbox-link {
  266. text-decoration: none;
  267. color: #929292;
  268. font-size: .85rem;
  269. }
  270. .navbar .navbar-nav .nav-item .dropbox-link:hover {
  271. color: #EE7800;
  272. }
  273. .navbar .navbar-nav .nav-item .dropbox-link.dropbox-btn {
  274. border: 1px solid #929292;
  275. padding: .5rem 2rem;
  276. border-radius: 5px;
  277. width: 85%;
  278. min-width: 7rem;
  279. max-width: 11rem;
  280. }
  281. .navbar .navbar-nav .nav-item .dropbox-btn {
  282. display: -webkit-box;
  283. display: -ms-flexbox;
  284. display: flex;
  285. -webkit-box-align: center;
  286. -ms-flex-align: center;
  287. align-items: center;
  288. -webkit-box-pack: center;
  289. -ms-flex-pack: center;
  290. justify-content: center;
  291. }
  292. .navbar .navbar-nav .nav-item .dropbox .container {
  293. max-width: 900px;
  294. width: 70%;
  295. }
  296. .navbar .navbar-nav .nav-item .dropbox .container.stylebox {
  297. -webkit-transform: translateX(-30%);
  298. transform: translateX(-30%);
  299. }
  300. .navbar .navbar-nav .nav-item .dropbox .container.designerbox {
  301. -webkit-transform: translateX(-5%);
  302. transform: translateX(-5%);
  303. }
  304. .navbar .navbar-nav .nav-item .dropbox .container.newbox {
  305. -webkit-transform: translateX(15%);
  306. transform: translateX(15%);
  307. }
  308. .navbar .navbar-nav .nav-item .dropbox .container.forumbox {
  309. -webkit-transform: translateX(50%);
  310. transform: translateX(50%);
  311. }
  312. .navbar .navbar-nav .nav-item .nav-link {
  313. position: relative;
  314. }
  315. .navbar .navbar-nav .nav-item .nav-link:after {
  316. position: absolute;
  317. content: " ";
  318. width: 100%;
  319. height: 90%;
  320. top: 0;
  321. right: 0;
  322. border-bottom: 2px solid #EE7800;
  323. opacity: 0;
  324. -webkit-transform: opacity 1s;
  325. transform: opacity 1s;
  326. }
  327. .navbar .navbar-nav .nav-item:hover .nav-link:after {
  328. opacity: 1;
  329. }
  330. .navbar .navbar-nav .nav-item:hover > .dropbox {
  331. visibility: visible;
  332. opacity: 1;
  333. }
  334. .navbar .navbar-nav .nav-item.lg .container {
  335. max-width: 1200px;
  336. width: 90%;
  337. }
  338. .navbar .navbar-nav .nav-item.lg .dropbox-link {
  339. text-decoration: none;
  340. color: #929292;
  341. font-size: .7rem;
  342. }
  343. .navbar .navbar-nav .nav-item.lg .dropbox-link:hover {
  344. color: #EE7800;
  345. }
  346. .navbar .navbar-nav .nav-item.lg .dropbox-item {
  347. margin-bottom: .1rem;
  348. }
  349. .navbar .navbar-nav .nav-item.lg .dropbox-item.first .dropbox-link {
  350. font-size: .85rem;
  351. }
  352. .navbar-search .container {
  353. max-width: 900px;
  354. width: 70%;
  355. }
  356. @media (max-width: 1100px) {
  357. .navbar-search .container {
  358. width: 90%;
  359. }
  360. }
  361. .navbar-search .dropbox {
  362. visibility: hidden;
  363. opacity: 0;
  364. -webkit-transition: all .2s;
  365. transition: all .2s;
  366. position: absolute;
  367. width: 100vw;
  368. top: 100%;
  369. left: 0;
  370. background-color: rgba(255, 255, 255, 0.932);
  371. padding-top: 1.5rem;
  372. padding-bottom: 3rem;
  373. }
  374. .navbar-search .dropbox.open {
  375. visibility: visible;
  376. opacity: 1;
  377. }
  378. .navbar-search .dropbox__searchtab {
  379. width: 100%;
  380. background-color: gray;
  381. border-radius: 3px;
  382. padding: .2rem 1rem;
  383. padding-bottom: 1rem;
  384. }
  385. .navbar-search .dropbox__hots__title {
  386. font-size: 1rem;
  387. color: #6b6b6b;
  388. }
  389. .navbar-search .dropbox__hots__link {
  390. font-size: .9rem;
  391. color: #929292;
  392. text-decoration: none;
  393. cursor: pointer;
  394. margin: 0 .2rem;
  395. }
  396. .navbar-search .dropbox__searchBar__input {
  397. width: 100%;
  398. outline: none;
  399. border: 2px solid #EE7800;
  400. border-radius: 5rem;
  401. padding: .3rem 1.2rem;
  402. font-size: .9rem;
  403. }
  404. .navbar-search .dropbox__searchBar__submit {
  405. outline: none;
  406. border: none;
  407. font-size: .9rem;
  408. background-color: transparent;
  409. color: #EE7800;
  410. margin-left: -1rem;
  411. -webkit-transform: translateX(-100%);
  412. transform: translateX(-100%);
  413. padding: 0 .6rem;
  414. }
  415. .navbar-search .dropbox__tab .nav-item {
  416. margin: 0 .6rem;
  417. }
  418. .navbar-search .dropbox .nav-item-link {
  419. border: none;
  420. outline: none;
  421. font-size: 1rem;
  422. color: white;
  423. padding: 3px;
  424. position: relative;
  425. }
  426. .navbar-search .dropbox .nav-item-link::after {
  427. position: absolute;
  428. content: "";
  429. top: 0;
  430. left: 0;
  431. width: 100%;
  432. height: 100%;
  433. border-bottom: 3px solid #EE7800;
  434. opacity: 0;
  435. }
  436. .navbar-search .dropbox .nav-item-link.active::after {
  437. opacity: 1;
  438. }
  439. .navbar-search .dropbox-tab-content .tabpar {
  440. display: -webkit-box;
  441. display: -ms-flexbox;
  442. display: flex;
  443. padding-top: .5rem;
  444. }
  445. .navbar-search .dropbox-tab-content .tabpar .col {
  446. margin: 0 .6rem;
  447. }
  448. .navbar-search .dropbox-tab-content .tabpar .select {
  449. font-size: 1rem;
  450. padding: .6rem;
  451. border-radius: 3px;
  452. color: #747474;
  453. }
  454. .navbar-search .dropbox-tab-content .tabpar button {
  455. border: none;
  456. outline: none;
  457. background-color: #EE7800;
  458. border-radius: 3px;
  459. color: white;
  460. font-size: 1rem;
  461. padding: .6rem;
  462. }
  463. .navbar-search .dropbox-tab-content .tabpar .image-search {
  464. border: none;
  465. outline: none;
  466. background-color: #EE7800;
  467. border-radius: 3px;
  468. color: white;
  469. font-size: 1rem;
  470. }
  471. .navbar-search .dropbox-tab-content .tabpar .article-btn {
  472. border: none;
  473. outline: none;
  474. background-color: #EE7800;
  475. border-radius: 3px;
  476. color: white;
  477. font-size: 1rem;
  478. padding: .6rem;
  479. }
  480. .navbar-search .dropbox-tab-content .tabpar .home-btn {
  481. border: none;
  482. outline: none;
  483. background-color: #EE7800;
  484. border-radius: 3px;
  485. color: white;
  486. font-size: 1rem;
  487. padding: .6rem;
  488. }
  489. .navbar-search .dropbox__tab .nav-item-link.active .nav-item-link::after {
  490. opacity: 1;
  491. }
  492. .navbar-main.sticky {
  493. position: fixed;
  494. top: 0;
  495. width: 100%;
  496. }
  497. .navbar-main.sticky + .sec-02 {
  498. padding-top: 53.5px;
  499. }
  500. .sec-02__slider {
  501. width: 100%;
  502. height: 100%;
  503. }
  504. .sec-02__slider .slide-item {
  505. width: 100%;
  506. height: 74vh;
  507. background-position: center center;
  508. background-size: cover;
  509. background-repeat: no-repeat;
  510. cursor: pointer;
  511. }
  512. .sec-02 .slick-prev:before, .sec-02 .slick-next:before {
  513. display: none;
  514. }
  515. .sec-02 .slick-prev {
  516. left: 15px;
  517. z-index: 3;
  518. }
  519. .sec-02 .slick-next {
  520. right: 15px;
  521. }
  522. .sec-04 {
  523. background-color: #F4F4F4;
  524. padding: 4rem 1rem;
  525. }
  526. .sec-04 .container {
  527. max-width: 950px;
  528. width: 70%;
  529. }
  530. @media (max-width: 1100px) {
  531. .sec-04 .container {
  532. width: 90%;
  533. }
  534. }
  535. .sec-04 .card {
  536. -webkit-box-shadow: 1px 2px 8px 1px #d6d6d6;
  537. box-shadow: 1px 2px 8px 1px #d6d6d6;
  538. text-decoration: none;
  539. cursor: pointer;
  540. -webkit-transition: all .6s;
  541. transition: all .6s;
  542. }
  543. .sec-04 .card-title {
  544. font-size: 1.4rem;
  545. line-height: 1.8rem;
  546. color: #4C4C4C;
  547. font-weight: 500;
  548. -webkit-transition: all 2s;
  549. transition: all 2s;
  550. }
  551. .sec-04 .card__imgfr {
  552. width: 100%;
  553. }
  554. .sec-04 .card__imgfr img {
  555. width: 100%;
  556. height: 100%;
  557. }
  558. .sec-04 .card:hover {
  559. -webkit-transform: scale(1.05);
  560. transform: scale(1.05);
  561. }
  562. .sec-guessLike .container {
  563. margin: 0 auto;
  564. padding: 2rem 2rem;
  565. max-width: 1050px;
  566. width: 70%;
  567. }
  568. @media (max-width: 1100px) {
  569. .sec-guessLike .container {
  570. width: 90%;
  571. padding: 0 1rem;
  572. }
  573. }
  574. .sec-guessLike__titlebox-h2 {
  575. margin: 0 auto;
  576. font-size: 1.8rem;
  577. font-weight: 600;
  578. color: #535353;
  579. padding: .8rem 0;
  580. border-bottom: 6px solid #EE7800;
  581. display: inline-block;
  582. }
  583. .sec-guessLike__title {
  584. display: block;
  585. text-align: center;
  586. position: relative;
  587. font-size: 1.2rem;
  588. margin-bottom: .8rem;
  589. }
  590. .sec-guessLike__title::before, .sec-guessLike__title::after {
  591. position: absolute;
  592. content: " ";
  593. width: 40%;
  594. height: 0rem;
  595. border-top: 1px solid black;
  596. top: 50%;
  597. }
  598. .sec-guessLike__title::before {
  599. left: 0;
  600. }
  601. .sec-guessLike__title::after {
  602. left: 60%;
  603. }
  604. .sec-guessLike__article h5 {
  605. font-size: 1.1rem;
  606. }
  607. .sec-guessLike__article p {
  608. font-size: 14px;
  609. }
  610. .sec-guessLike__case p {
  611. font-size: 1.1rem;
  612. font-weight: 500;
  613. }
  614. .sec-guessLike__card {
  615. width: 100%;
  616. overflow: hidden;
  617. height: 26vh;
  618. position: relative;
  619. background-position: center center;
  620. background-size: cover;
  621. background-repeat: no-repeat;
  622. }
  623. .sec-guessLike__card.special {
  624. height: 45vh;
  625. }
  626. .sec-guessLike__card__img {
  627. width: 100%;
  628. -webkit-transition: all .8s;
  629. transition: all .8s;
  630. }
  631. .sec-guessLike__card__txt {
  632. position: absolute;
  633. bottom: 1rem;
  634. left: 3rem;
  635. color: white;
  636. z-index: 2;
  637. font-size: 600;
  638. text-shadow: 1px 1px 2px gray;
  639. }
  640. .sec-guessLike__video__play {
  641. position: absolute;
  642. width: 2.5rem;
  643. left: 50%;
  644. top: 50%;
  645. -webkit-transform: translate(-50%, -50%);
  646. transform: translate(-50%, -50%);
  647. }
  648. .sec-05 {
  649. border-top: 1px solid #bbbbbb;
  650. padding-bottom: 2rem;
  651. }
  652. .sec-05 .container {
  653. margin: 0 auto;
  654. padding: 0 2rem;
  655. max-width: 1050px;
  656. width: 70%;
  657. }
  658. @media (max-width: 1100px) {
  659. .sec-05 .container {
  660. width: 90%;
  661. padding: 0 1rem;
  662. }
  663. }
  664. .sec-05__tabdiv {
  665. -webkit-box-sizing: content-box;
  666. box-sizing: content-box;
  667. -webkit-box-align: center;
  668. -ms-flex-align: center;
  669. align-items: center;
  670. -webkit-box-pack: justify;
  671. -ms-flex-pack: justify;
  672. justify-content: space-between;
  673. }
  674. .sec-05__tabdiv .more {
  675. padding-bottom: .4rem;
  676. }
  677. .sec-05__tabdiv .nav-item {
  678. position: relative;
  679. padding-right: 18px;
  680. padding-left: 18px;
  681. }
  682. .sec-05__tabdiv .nav-item::after {
  683. position: absolute;
  684. content: " ";
  685. width: 100%;
  686. height: 30%;
  687. left: 0;
  688. top: 35%;
  689. background-color: transparent;
  690. border-right: 1px solid #b3b3b3;
  691. z-index: -1;
  692. }
  693. .sec-05__tabdiv .nav-item:nth-of-type(3)::after {
  694. display: none;
  695. }
  696. .sec-05__tabdiv .nav-item-link {
  697. color: black;
  698. font-weight: 500;
  699. font-size: 1.6rem;
  700. border: none;
  701. position: relative;
  702. padding: 1.5rem 0;
  703. outline: none;
  704. }
  705. @media screen and (max-width: 385px) {
  706. .sec-05__tabdiv .nav-item-link {
  707. font-size: 1.1rem;
  708. }
  709. }
  710. .sec-05__tabdiv .nav-item-link:focus {
  711. outline: none !important;
  712. }
  713. .sec-05__tabdiv .nav-item-link.active {
  714. color: #EE7800;
  715. }
  716. .sec-05__tabdiv .nav-item-link::before {
  717. position: absolute;
  718. content: " ";
  719. width: 101%;
  720. height: 100%;
  721. left: -2px;
  722. top: 0px;
  723. background-color: transparent;
  724. border-top: 3px solid #EE7800;
  725. opacity: 0;
  726. }
  727. .sec-05__tabdiv .nav-item-link.active::before {
  728. opacity: 1;
  729. }
  730. .sec-05 .tab-pane {
  731. height: 100%;
  732. }
  733. .sec-05tab-content {
  734. height: 35vh;
  735. }
  736. .sec-05 .tabpar__card {
  737. margin: 3px;
  738. position: relative;
  739. font-size: 14px;
  740. cursor: pointer;
  741. }
  742. .sec-05 .tabpar__card__imgfr {
  743. width: 100%;
  744. height: 25vh;
  745. position: relative;
  746. background-position: center center;
  747. background-size: cover;
  748. background-repeat: no-repeat;
  749. }
  750. @media (max-width: 1100px) {
  751. .sec-05 .tabpar__card__imgfr {
  752. height: 20vh;
  753. }
  754. }
  755. .sec-05 .tabpar__card h5 {
  756. font-size: 1rem;
  757. }
  758. .sec-05 .tabpar__card p {
  759. font-size: .95rem;
  760. font-weight: 300;
  761. color: gray;
  762. }
  763. .sec-05 .tabpar__card__play {
  764. position: absolute;
  765. left: 50%;
  766. top: 50%;
  767. -webkit-transform: translate(-50%, -50%);
  768. transform: translate(-50%, -50%);
  769. width: 2.5rem;
  770. }
  771. .sec-05 .slick-prev {
  772. top: 40%;
  773. left: -2rem;
  774. z-index: 2;
  775. }
  776. .sec-05 .slick-next {
  777. top: 40%;
  778. right: -2rem;
  779. z-index: 2;
  780. }
  781. .sec-05 .slick-prev:before, .sec-05 .slick-next:before {
  782. display: none;
  783. }
  784. .sec-06 {
  785. padding: 2rem 0;
  786. }
  787. .sec-06 .container {
  788. margin: 0 auto;
  789. padding: 1rem 2rem;
  790. max-width: 1050px;
  791. width: 70%;
  792. }
  793. @media (max-width: 1100px) {
  794. .sec-06 .container {
  795. width: 90%;
  796. padding: 0 1rem;
  797. }
  798. }
  799. .sec-06__title h3 {
  800. display: inline-block;
  801. font-size: 1.6rem;
  802. padding-bottom: .5rem;
  803. border-bottom: 6px solid #EE7800;
  804. color: #535353;
  805. margin-bottom: 0;
  806. }
  807. .sec-06__video {
  808. width: 100%;
  809. position: relative;
  810. }
  811. .sec-06__video__imgfr {
  812. width: 100%;
  813. height: 34vh;
  814. background-position: center center;
  815. background-size: cover;
  816. background-repeat: no-repeat;
  817. }
  818. @media (max-width: 1100px) {
  819. .sec-06__video__imgfr {
  820. height: 25vh;
  821. }
  822. }
  823. .sec-06__video__play {
  824. position: absolute;
  825. left: 50%;
  826. top: 50%;
  827. width: 2.5rem;
  828. height: 2.5rem;
  829. z-index: 2;
  830. -webkit-transform: translate(-50%, -50%);
  831. transform: translate(-50%, -50%);
  832. }
  833. .sec-06__videotxt {
  834. width: 90%;
  835. margin: 0 auto;
  836. background-color: rgba(255, 255, 255, 0.842);
  837. -webkit-box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
  838. box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
  839. padding: .4rem .8rem;
  840. -webkit-transform: translateY(-20%);
  841. transform: translateY(-20%);
  842. font-weight: 600;
  843. font-size: 1.1rem;
  844. }
  845. .sec-06__btns {
  846. display: block;
  847. outline: none;
  848. border: none;
  849. padding: .4rem 1.2rem;
  850. width: 88%;
  851. margin: 0 auto;
  852. background-color: #ea068c;
  853. color: white;
  854. border-radius: 3px;
  855. -webkit-box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
  856. box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
  857. -webkit-transition: all .4s;
  858. transition: all .4s;
  859. text-decoration: none;
  860. }
  861. .sec-06__btns:hover {
  862. -webkit-transform: translate(2px, 2px);
  863. transform: translate(2px, 2px);
  864. color: white;
  865. }
  866. .sec-06__btns__txt {
  867. font-weight: 600;
  868. }
  869. .sec-06__btns:nth-of-type(2), .sec-06__btns:nth-of-type(3) {
  870. padding: 1rem 1.2rem;
  871. }
  872. .sec-06__card {
  873. width: 100%;
  874. }
  875. .sec-06__card:hover .sec-06__card__imgfr {
  876. -webkit-transform: scale(1.1);
  877. transform: scale(1.1);
  878. }
  879. .sec-06__card h5 {
  880. font-size: 1.1rem;
  881. margin-bottom: .3rem;
  882. }
  883. .sec-06__card p {
  884. font-size: .9rem;
  885. }
  886. .sec-06__card__outer {
  887. width: 100%;
  888. height: 48vh;
  889. overflow: hidden;
  890. }
  891. .sec-06__card__play {
  892. position: absolute;
  893. left: 50%;
  894. top: 50%;
  895. -webkit-transform: translate(-50%, -50%);
  896. transform: translate(-50%, -50%);
  897. width: 2.5rem;
  898. }
  899. .sec-06__card__imgfr {
  900. width: 100%;
  901. height: 48vh;
  902. background-position: center center;
  903. background-size: cover;
  904. background-repeat: no-repeat;
  905. -webkit-transition: all .5s;
  906. transition: all .5s;
  907. position: relative;
  908. }
  909. .sec-06 .slick-prev {
  910. top: 40%;
  911. left: .5rem;
  912. z-index: 2;
  913. }
  914. .sec-06 .slick-next {
  915. top: 40%;
  916. right: .5rem;
  917. z-index: 2;
  918. }
  919. .sec-06 .slick-prev:before, .sec-06 .slick-next:before {
  920. display: none;
  921. }
  922. .sec-07 {
  923. padding: 2rem 0;
  924. }
  925. .sec-07 .container {
  926. margin: 0 auto;
  927. padding: .8rem 1.2rem;
  928. max-width: 1050px;
  929. width: 70%;
  930. background-color: #F4F4F4;
  931. }
  932. @media (max-width: 1100px) {
  933. .sec-07 .container {
  934. width: 90%;
  935. padding: 0 1rem;
  936. }
  937. }
  938. .sec-07__slider {
  939. height: 100%;
  940. }
  941. .sec-07__slider .slide-item {
  942. height: 23vh;
  943. background-position: center center;
  944. background-size: contain;
  945. background-repeat: no-repeat;
  946. width: 100%;
  947. margin: 0 5px;
  948. cursor: pointer;
  949. }
  950. @media (max-width: 1100px) {
  951. .sec-07__slider .slide-item {
  952. height: 18vh;
  953. }
  954. }
  955. .sec-08 {
  956. padding-bottom: 2.5rem;
  957. }
  958. .sec-08 .container {
  959. margin: 0 auto;
  960. padding: 1rem 0rem;
  961. max-width: 1050px;
  962. width: 70%;
  963. }
  964. @media (max-width: 1100px) {
  965. .sec-08 .container {
  966. width: 90%;
  967. padding: 0 1rem;
  968. }
  969. }
  970. .sec-08__title {
  971. border-bottom: 6px solid #EE7800;
  972. color: #535353;
  973. }
  974. .sec-08__title h3 {
  975. font-size: 1.6rem;
  976. }
  977. .sec-08__slider {
  978. width: 100%;
  979. cursor: pointer;
  980. }
  981. .sec-08__imgfr {
  982. width: 100%;
  983. height: 28vh;
  984. background-position: center center;
  985. background-size: cover;
  986. background-repeat: no-repeat;
  987. position: relative;
  988. }
  989. @media (max-width: 1100px) {
  990. .sec-08__imgfr {
  991. height: 20vh;
  992. }
  993. }
  994. .sec-08__card h5 {
  995. font-size: 1rem;
  996. }
  997. .sec-08__card p {
  998. font-size: .9rem;
  999. }
  1000. .sec-08__card__play {
  1001. position: absolute;
  1002. left: 50%;
  1003. top: 50%;
  1004. -webkit-transform: translate(-50%, -50%);
  1005. transform: translate(-50%, -50%);
  1006. width: 2.5rem;
  1007. }
  1008. .sec-08__cardtxt {
  1009. font-size: 14px;
  1010. padding-right: .6rem;
  1011. }
  1012. .sec-08 .slick-prev {
  1013. top: 40%;
  1014. left: -2rem;
  1015. z-index: 2;
  1016. }
  1017. .sec-08 .slick-next {
  1018. top: 40%;
  1019. right: -2rem;
  1020. z-index: 2;
  1021. }
  1022. .sec-08 .slick-prev:before, .sec-08 .slick-next:before {
  1023. display: none;
  1024. }
  1025. .sec-09 {
  1026. background-color: #F4F4F4;
  1027. }
  1028. .sec-09 .container {
  1029. margin: 0 auto;
  1030. padding: 2rem 0rem;
  1031. max-width: 1050px;
  1032. width: 70%;
  1033. }
  1034. @media (max-width: 1100px) {
  1035. .sec-09 .container {
  1036. width: 90%;
  1037. padding: 0 1rem;
  1038. }
  1039. }
  1040. .sec-09__imgfr {
  1041. width: 100%;
  1042. height: 25vh;
  1043. background-position: center center;
  1044. background-size: cover;
  1045. background-repeat: no-repeat;
  1046. position: relative;
  1047. }
  1048. @media (max-width: 1100px) {
  1049. .sec-09__imgfr {
  1050. height: 20vh;
  1051. }
  1052. }
  1053. .sec-09__card {
  1054. margin: 5px;
  1055. text-align: center;
  1056. cursor: pointer;
  1057. }
  1058. .sec-09__card p {
  1059. font-size: 14px;
  1060. margin-top: .5rem;
  1061. }
  1062. .sec-09__card__play {
  1063. position: absolute;
  1064. right: .6rem;
  1065. bottom: .6rem;
  1066. width: 2.5rem;
  1067. }
  1068. .sec-09__title {
  1069. border-bottom: 6px solid #EE7800;
  1070. color: #535353;
  1071. }
  1072. .sec-09__title h3 {
  1073. font-size: 1.6rem;
  1074. }
  1075. .sec-09 .slick-prev {
  1076. top: 40%;
  1077. left: -2rem;
  1078. z-index: 2;
  1079. }
  1080. .sec-09 .slick-next {
  1081. top: 40%;
  1082. right: -2rem;
  1083. z-index: 2;
  1084. }
  1085. .sec-09 .slick-prev:before, .sec-09 .slick-next:before {
  1086. display: none;
  1087. }
  1088. .sec-10 {
  1089. padding: 2.5rem 0;
  1090. }
  1091. .sec-10 .container {
  1092. max-width: 1000px;
  1093. width: 70%;
  1094. }
  1095. @media (max-width: 1100px) {
  1096. .sec-10 .container {
  1097. width: 90%;
  1098. padding: 0 1rem;
  1099. }
  1100. }
  1101. .sec-10__titlebox {
  1102. border-bottom: 1px solid #4b4b4b;
  1103. display: -webkit-box;
  1104. display: -ms-flexbox;
  1105. display: flex;
  1106. -webkit-box-pack: center;
  1107. -ms-flex-pack: center;
  1108. justify-content: center;
  1109. }
  1110. .sec-10__titlebox-h2 {
  1111. margin: 0 auto;
  1112. font-size: 1.8rem;
  1113. font-weight: 600;
  1114. color: #535353;
  1115. padding: .8rem 0;
  1116. border-bottom: 6px solid #EE7800;
  1117. display: inline-block;
  1118. }
  1119. .sec-10__card {
  1120. cursor: pointer;
  1121. }
  1122. .sec-10__card h5 {
  1123. font-size: 1rem;
  1124. margin-bottom: .3rem;
  1125. }
  1126. .sec-10__card p {
  1127. font-size: .95rem;
  1128. font-weight: 300;
  1129. color: gray;
  1130. }
  1131. .sec-10__card-img {
  1132. width: 100%;
  1133. height: 25vh;
  1134. background-position: center center;
  1135. background-size: cover;
  1136. background-repeat: no-repeat;
  1137. position: relative;
  1138. }
  1139. @media (max-width: 1100px) {
  1140. .sec-10__card-img {
  1141. height: 20vh;
  1142. }
  1143. }
  1144. .sec-10__card__play {
  1145. position: absolute;
  1146. right: 1rem;
  1147. bottom: 1rem;
  1148. width: 2.5rem;
  1149. height: 2.5rem;
  1150. }
  1151. .sec-11 {
  1152. padding: 2.5rem 0;
  1153. padding-top: 1rem;
  1154. }
  1155. .sec-11 .container {
  1156. max-width: 1000px;
  1157. width: 70%;
  1158. }
  1159. @media (max-width: 1100px) {
  1160. .sec-11 .container {
  1161. width: 90%;
  1162. padding: 0 1rem;
  1163. }
  1164. }
  1165. .sec-11__titlebox {
  1166. border-bottom: 1px solid #4b4b4b;
  1167. display: -webkit-box;
  1168. display: -ms-flexbox;
  1169. display: flex;
  1170. -webkit-box-pack: center;
  1171. -ms-flex-pack: center;
  1172. justify-content: center;
  1173. }
  1174. .sec-11__titlebox-h2 {
  1175. margin: 0 auto;
  1176. font-size: 1.8rem;
  1177. font-weight: 600;
  1178. color: #535353;
  1179. padding: .8rem 0;
  1180. border-bottom: 6px solid #EE7800;
  1181. display: inline-block;
  1182. }
  1183. .sec-11__card {
  1184. cursor: pointer;
  1185. }
  1186. .sec-11__card h5 {
  1187. font-size: 1rem;
  1188. margin-bottom: .3rem;
  1189. }
  1190. .sec-11__card p {
  1191. font-size: .95rem;
  1192. font-weight: 300;
  1193. color: gray;
  1194. }
  1195. .sec-11__card-img {
  1196. width: 100%;
  1197. height: 25vh;
  1198. background-position: center center;
  1199. background-size: cover;
  1200. background-repeat: no-repeat;
  1201. position: relative;
  1202. }
  1203. @media (max-width: 1100px) {
  1204. .sec-11__card-img {
  1205. height: 20vh;
  1206. }
  1207. }
  1208. .sec-11__card__play {
  1209. position: absolute;
  1210. right: 1rem;
  1211. bottom: 1rem;
  1212. width: 2.5rem;
  1213. height: 2.5rem;
  1214. }
  1215. .footer {
  1216. background: #e9e9e9;
  1217. padding: 2.5rem 0;
  1218. }
  1219. @media (max-width: 1100px) {
  1220. .footer .container {
  1221. width: 98%;
  1222. max-width: 950px;
  1223. }
  1224. }
  1225. .footer__block {
  1226. padding: 1rem 3rem;
  1227. border-left: 1px solid #8f8f8f;
  1228. }
  1229. @media (max-width: 1100px) {
  1230. .footer__block {
  1231. padding: 1rem 1rem;
  1232. }
  1233. }
  1234. .footer__block-title {
  1235. font-size: 1.3rem;
  1236. margin-bottom: 1.5rem;
  1237. }
  1238. .footer__block-list {
  1239. padding-left: 0;
  1240. }
  1241. .footer__block:nth-of-type(1) {
  1242. border-left: none;
  1243. }
  1244. .footer__block:nth-of-type(2) {
  1245. padding: 1rem 4rem;
  1246. }
  1247. @media (max-width: 1100px) {
  1248. .footer__block:nth-of-type(2) {
  1249. padding: 1rem 1rem;
  1250. }
  1251. }
  1252. .footer__block-socials {
  1253. padding-left: 0;
  1254. display: -webkit-box;
  1255. display: -ms-flexbox;
  1256. display: flex;
  1257. -webkit-box-align: center;
  1258. -ms-flex-align: center;
  1259. align-items: center;
  1260. -webkit-box-pack: justify;
  1261. -ms-flex-pack: justify;
  1262. justify-content: space-between;
  1263. }
  1264. @media (max-width: 1100px) {
  1265. .footer__block-socials img {
  1266. width: 30px;
  1267. }
  1268. }
  1269. .footer__block .follows-fp {
  1270. text-decoration: none;
  1271. color: #696969;
  1272. font-size: .9rem;
  1273. display: -webkit-box;
  1274. display: -ms-flexbox;
  1275. display: flex;
  1276. -webkit-box-align: center;
  1277. -ms-flex-align: center;
  1278. align-items: center;
  1279. }
  1280. @media (max-width: 1100px) {
  1281. .footer__block .follows-fp {
  1282. font-size: .8rem;
  1283. }
  1284. }
  1285. .footer__block-phone p {
  1286. display: inline;
  1287. }
  1288. @media (max-width: 900px) {
  1289. .footer__block-phone p {
  1290. display: block;
  1291. }
  1292. }
  1293. .footer__block-phone p, .footer__block-phone span {
  1294. font-size: .9rem;
  1295. }
  1296. .footer__block-phone .text-phone {
  1297. color: #EE7800;
  1298. text-decoration: none;
  1299. }
  1300. .footer__block-links {
  1301. display: -webkit-box;
  1302. display: -ms-flexbox;
  1303. display: flex;
  1304. -webkit-box-align: center;
  1305. -ms-flex-align: center;
  1306. align-items: center;
  1307. margin-top: 1rem;
  1308. -webkit-box-pack: center;
  1309. -ms-flex-pack: center;
  1310. justify-content: center;
  1311. }
  1312. .footer__block-links-grp {
  1313. padding: .3rem;
  1314. border-left: 1px solid #b9b9b9;
  1315. }
  1316. .footer__block-links-grp:nth-of-type(1) {
  1317. border-left: none;
  1318. }
  1319. .footer__block-links-grp a {
  1320. display: block;
  1321. text-decoration: none;
  1322. color: #696969;
  1323. font-size: .9rem;
  1324. margin-bottom: .4rem;
  1325. }
  1326. @media (max-width: 1100px) {
  1327. .footer__block-links-grp a {
  1328. font-size: .8rem;
  1329. }
  1330. }
  1331. .footer__block-subscribe {
  1332. width: 100%;
  1333. margin-top: 1rem;
  1334. }
  1335. .footer__block-subscribe .subscribeBar {
  1336. font-size: .8rem;
  1337. width: 70%;
  1338. margin-left: 7%;
  1339. }
  1340. @media (max-width: 900px) {
  1341. .footer__block-subscribe .subscribeBar {
  1342. width: 75%;
  1343. margin-left: 3%;
  1344. font-size: .7rem;
  1345. }
  1346. }
  1347. .footer__block-subscribe .subscribeBtn {
  1348. width: 20%;
  1349. padding: .4rem .6rem;
  1350. padding-bottom: 9px;
  1351. border: none;
  1352. outline: none;
  1353. background-color: #292929;
  1354. color: white;
  1355. border-radius: 0 3px 3px 0;
  1356. margin-left: -.4rem;
  1357. }
  1358. @media (max-width: 900px) {
  1359. .footer__block-subscribe .subscribeBtn {
  1360. margin-left: -.3rem;
  1361. font-size: .8rem;
  1362. padding-top: 9px;
  1363. padding-bottom: 10px;
  1364. }
  1365. }
  1366. .footer__list-item {
  1367. display: -webkit-box;
  1368. display: -ms-flexbox;
  1369. display: flex;
  1370. -webkit-box-align: center;
  1371. -ms-flex-align: center;
  1372. align-items: center;
  1373. text-decoration: none;
  1374. margin-bottom: .5rem;
  1375. }
  1376. .footer__list-item p {
  1377. color: #696969;
  1378. font-size: .9rem;
  1379. font-weight: 300;
  1380. }
  1381. .footer__list-icon {
  1382. width: 30px;
  1383. display: -webkit-box;
  1384. display: -ms-flexbox;
  1385. display: flex;
  1386. -webkit-box-pack: center;
  1387. -ms-flex-pack: center;
  1388. justify-content: center;
  1389. margin-right: .3rem;
  1390. }
  1391. .footer .bottom-box {
  1392. padding: 1rem 0;
  1393. border-top: 1px solid #b9b9b9;
  1394. margin-top: 2.5rem;
  1395. }
  1396. #videoModal .modal-content {
  1397. background-color: transparent;
  1398. border: none;
  1399. width: -webkit-fit-content;
  1400. width: -moz-fit-content;
  1401. width: fit-content;
  1402. }
  1403. #videoModal .modal-dialog {
  1404. max-width: 700px;
  1405. }
  1406. .morelink {
  1407. text-decoration: none;
  1408. color: #EE7800;
  1409. font-weight: 700;
  1410. }
  1411. .morelink:hover {
  1412. color: #EE7800;
  1413. }
  1414. .fixed-btn {
  1415. position: fixed;
  1416. right: 15px;
  1417. bottom: 2rem;
  1418. }
  1419. .fixed-btn .btn-gotop, .fixed-btn .btn-login, .fixed-btn .btn-favor {
  1420. cursor: pointer;
  1421. padding: 1.2rem .8rem;
  1422. background-color: rgba(255, 255, 255, 0.897);
  1423. display: -webkit-box;
  1424. display: -ms-flexbox;
  1425. display: flex;
  1426. -webkit-box-align: center;
  1427. -ms-flex-align: center;
  1428. align-items: center;
  1429. box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  1430. -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  1431. -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  1432. }
  1433. .sec-login-list {
  1434. background-color: #F3F3F3;
  1435. padding: 1rem;
  1436. padding-bottom: 1.4rem;
  1437. }
  1438. .sec-login-list hr {
  1439. background-color: #aaaaaa;
  1440. }
  1441. .sec-login-btns {
  1442. padding: 1rem;
  1443. background-color: white;
  1444. -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  1445. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  1446. }
  1447. #loginModal .btn-close {
  1448. position: absolute;
  1449. right: -2rem;
  1450. top: -2rem;
  1451. }
  1452. #favorModal .btn-close {
  1453. position: absolute;
  1454. right: -2rem;
  1455. top: -2rem;
  1456. }
  1457. #favorModal .sec-favor-title {
  1458. color: #4C4C4C;
  1459. font-size: 18px;
  1460. }
  1461. #favorModal .sec-favor-list {
  1462. background-color: #F3F3F3;
  1463. padding: 1rem;
  1464. padding-bottom: 1.4rem;
  1465. }
  1466. #favorModal .sec-favor-list hr {
  1467. background-color: #aaaaaa;
  1468. }
  1469. #favorModal .sec-favor-form .form-user, #favorModal .sec-favor-checklist .form-user {
  1470. width: 50%;
  1471. color: #707070;
  1472. font-size: 16px;
  1473. }
  1474. #favorModal .sec-favor-form .form-progressbar, #favorModal .sec-favor-checklist .form-progressbar {
  1475. width: 50%;
  1476. display: -webkit-box;
  1477. display: -ms-flexbox;
  1478. display: flex;
  1479. -webkit-box-pack: justify;
  1480. -ms-flex-pack: justify;
  1481. justify-content: space-between;
  1482. }
  1483. #favorModal .sec-favor-form .form-progressbar li, #favorModal .sec-favor-checklist .form-progressbar li {
  1484. width: 1.6rem;
  1485. height: 1.6rem;
  1486. border-radius: 50%;
  1487. border: 2px solid #D3D3D3;
  1488. line-height: 1.4rem;
  1489. display: -webkit-box;
  1490. display: -ms-flexbox;
  1491. display: flex;
  1492. -webkit-box-pack: center;
  1493. -ms-flex-pack: center;
  1494. justify-content: center;
  1495. position: relative;
  1496. color: #D3D3D3;
  1497. background-color: #F3F3F3;
  1498. z-index: 2;
  1499. }
  1500. #favorModal .sec-favor-form .form-progressbar li.active, #favorModal .sec-favor-checklist .form-progressbar li.active {
  1501. border: 2px solid #EE7800;
  1502. color: #EE7800;
  1503. }
  1504. #favorModal .sec-favor-form .form-progressbar li.active::before, #favorModal .sec-favor-checklist .form-progressbar li.active::before {
  1505. border-top: 2px solid #EE7800;
  1506. }
  1507. #favorModal .sec-favor-form .form-progressbar li::before, #favorModal .sec-favor-checklist .form-progressbar li::before {
  1508. position: absolute;
  1509. content: " ";
  1510. width: 4rem;
  1511. height: 0;
  1512. border-top: 2px dashed #D3D3D3;
  1513. right: 100%;
  1514. top: 50%;
  1515. z-index: 1;
  1516. }
  1517. #favorModal .sec-favor-form .form-progressbar li:nth-of-type(1)::before, #favorModal .sec-favor-checklist .form-progressbar li:nth-of-type(1)::before {
  1518. display: none;
  1519. }
  1520. #favorModal .sec-favor-form .form-step, #favorModal .sec-favor-checklist .form-step {
  1521. background-color: white;
  1522. border-radius: 3px;
  1523. padding: 1.5rem 1rem;
  1524. padding-bottom: 1.5rem;
  1525. -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  1526. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  1527. overflow: visible;
  1528. }
  1529. #favorModal .sec-favor-form .form-step .next, #favorModal .sec-favor-checklist .form-step .next {
  1530. padding: .6rem 5rem;
  1531. background-color: #EE7800;
  1532. border-radius: 3px;
  1533. color: white;
  1534. border: none;
  1535. outline: none;
  1536. }
  1537. #favorModal .sec-favor-form .form-step1, #favorModal .sec-favor-checklist .form-step1 {
  1538. display: block;
  1539. }
  1540. #favorModal .sec-favor-form .form-step2, #favorModal .sec-favor-checklist .form-step2 {
  1541. display: none;
  1542. }
  1543. #favorModal .sec-favor-form .form-step3, #favorModal .sec-favor-checklist .form-step3 {
  1544. display: none;
  1545. position: relative;
  1546. padding-bottom: 1.5rem;
  1547. }
  1548. #favorModal .sec-favor-form input[type="checkbox"], #favorModal .sec-favor-form input[type="radio"], #favorModal .sec-favor-checklist input[type="checkbox"], #favorModal .sec-favor-checklist input[type="radio"] {
  1549. display: none;
  1550. }
  1551. #favorModal .sec-favor-form .imgfr, #favorModal .sec-favor-checklist .imgfr {
  1552. background-position: center center;
  1553. background-size: cover;
  1554. background-repeat: no-repeat;
  1555. width: 100%;
  1556. height: 4.5rem;
  1557. border-radius: 8px;
  1558. border: 2px solid transparent;
  1559. }
  1560. #favorModal .sec-favor-form h4, #favorModal .sec-favor-checklist h4 {
  1561. color: #AAAAAA;
  1562. font-size: 15px;
  1563. font-weight: 400;
  1564. }
  1565. #favorModal .sec-favor-form input[type="checkbox"]:checked + .fs-label-info .imgfr, #favorModal .sec-favor-checklist input[type="checkbox"]:checked + .fs-label-info .imgfr {
  1566. border: 2px solid #EE7800;
  1567. }
  1568. #favorModal .sec-favor-form input[type="checkbox"]:checked + .fs-label-chbox, #favorModal .sec-favor-checklist input[type="checkbox"]:checked + .fs-label-chbox {
  1569. border: 1px solid #EE7800;
  1570. color: #EE7800;
  1571. }
  1572. #favorModal .sec-favor-form input[type="radio"]:checked + .fs-label-chbox, #favorModal .sec-favor-checklist input[type="radio"]:checked + .fs-label-chbox {
  1573. border: 1px solid #EE7800;
  1574. color: #EE7800;
  1575. }
  1576. #favorModal .sec-favor-form .step3-block, #favorModal .sec-favor-checklist .step3-block {
  1577. margin-bottom: 1rem;
  1578. }
  1579. #favorModal .sec-favor-form .step3-block:nth-of-type(3), #favorModal .sec-favor-checklist .step3-block:nth-of-type(3) {
  1580. margin-bottom: 0;
  1581. }
  1582. #favorModal .sec-favor-form .step3-block-title, #favorModal .sec-favor-checklist .step3-block-title {
  1583. color: #AAAAAA;
  1584. display: block;
  1585. margin-bottom: .5rem;
  1586. font-size: 1rem;
  1587. }
  1588. #favorModal .sec-favor-form .step3-block .radio, #favorModal .sec-favor-checklist .step3-block .radio {
  1589. display: inline-block;
  1590. padding: .25rem .7rem;
  1591. margin-right: .4rem;
  1592. border: 1px solid #707070;
  1593. border-radius: 2rem;
  1594. color: #797979;
  1595. margin-bottom: .5rem;
  1596. }
  1597. #favorModal .sec-favor-form .skip, #favorModal .sec-favor-checklist .skip {
  1598. padding: .3rem 1rem;
  1599. color: #AAAAAA;
  1600. border: none;
  1601. outline: none;
  1602. background-color: transparent;
  1603. }
  1604. #favorModal .sec-favor-form .btngrp, #favorModal .sec-favor-checklist .btngrp {
  1605. /* position: absolute;
  1606. left: 50%;
  1607. transform: translateX(-50%);
  1608. bottom: -6rem; */
  1609. display: -webkit-box;
  1610. display: -ms-flexbox;
  1611. display: flex;
  1612. -webkit-box-orient: vertical;
  1613. -webkit-box-direction: normal;
  1614. -ms-flex-direction: column;
  1615. flex-direction: column;
  1616. -webkit-box-align: center;
  1617. -ms-flex-align: center;
  1618. align-items: center;
  1619. }
  1620. #favorModal .sec-favor-form .btngrp .next, #favorModal .sec-favor-checklist .btngrp .next {
  1621. -webkit-transform: translateY(0rem);
  1622. transform: translateY(0rem);
  1623. }
  1624. #favorModal .sec-favor-checklist .form-user {
  1625. margin: 0 auto;
  1626. text-align: center;
  1627. margin-bottom: 1rem;
  1628. }
  1629. #favorModal .sec-favor-btns {
  1630. padding: 1rem;
  1631. background-color: white;
  1632. -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  1633. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  1634. }
  1635. .test {
  1636. position: relative;
  1637. }
  1638. .test .cover {
  1639. width: 100%;
  1640. position: absolute;
  1641. left: 0;
  1642. bottom: 0;
  1643. display: block;
  1644. background-color: white;
  1645. height: 100%;
  1646. }
  1647. .test .cover.slidein {
  1648. -webkit-animation: slidein 2s forwards;
  1649. animation: slidein 2s forwards;
  1650. }
  1651. .title_back {
  1652. display: block;
  1653. position: relative;
  1654. width: 10em;
  1655. height: 1.75em;
  1656. overflow: hidden;
  1657. }
  1658. .title_back .title {
  1659. position: absolute;
  1660. left: 0;
  1661. bottom: -1.75em;
  1662. display: block;
  1663. -webkit-transition: all 1s;
  1664. transition: all 1s;
  1665. }
  1666. .test_content {
  1667. opacity: 0;
  1668. }
  1669. .test_content.fadein {
  1670. -webkit-animation: fadein 2s forwards;
  1671. animation: fadein 2s forwards;
  1672. }
  1673. @-webkit-keyframes slidein {
  1674. 100% {
  1675. height: 0px;
  1676. }
  1677. }
  1678. @keyframes slidein {
  1679. 100% {
  1680. height: 0px;
  1681. }
  1682. }
  1683. @-webkit-keyframes fadein {
  1684. 100% {
  1685. opacity: 1;
  1686. }
  1687. }
  1688. @keyframes fadein {
  1689. 100% {
  1690. opacity: 1;
  1691. }
  1692. }
  1693. #hhh-cases .article__readMore::before {
  1694. content: '';
  1695. display: inline-block;
  1696. background: -webkit-gradient(linear, left bottom, left top, from(#FCFCFC), to(rgba(255, 255, 255, 0.454219)));
  1697. background: linear-gradient(0deg, #FCFCFC 0%, rgba(255, 255, 255, 0.454219) 100%);
  1698. width: 100%;
  1699. height: 25px;
  1700. -webkit-transition: all 300ms ease-in-out;
  1701. transition: all 300ms ease-in-out;
  1702. }
  1703. #hhh-cases .article__contexts {
  1704. font-size: 1.1rem;
  1705. line-height: 1.8;
  1706. height: 50px;
  1707. overflow: hidden;
  1708. -webkit-transition: all 300ms ease-in-out;
  1709. transition: all 300ms ease-in-out;
  1710. color: #727679;
  1711. }
  1712. #hhh-cases .article__readMore {
  1713. cursor: pointer;
  1714. margin-left: auto;
  1715. margin-right: auto;
  1716. color: #FFAC73;
  1717. text-align: center;
  1718. font-size: 90%;
  1719. padding: 0 0 1rem;
  1720. -webkit-transform: translateY(-20px);
  1721. transform: translateY(-20px);
  1722. -webkit-transition: all 300ms ease-in-out;
  1723. transition: all 300ms ease-in-out;
  1724. }
  1725. #hhh-cases .article__readMore a {
  1726. text-decoration: none;
  1727. color: #FFAC73;
  1728. }
  1729. #hhh-cases .img-wrapper-desktop {
  1730. background-color: #6D6D6D;
  1731. display: -webkit-box;
  1732. display: -ms-flexbox;
  1733. display: flex;
  1734. width: 100%;
  1735. height: 100%;
  1736. -webkit-box-pack: center;
  1737. -ms-flex-pack: center;
  1738. justify-content: center;
  1739. -webkit-box-align: center;
  1740. -ms-flex-align: center;
  1741. align-items: center;
  1742. margin: 0 auto;
  1743. }
  1744. #hhh-cases .swiper-zoom-container-desktop {
  1745. width: 100%;
  1746. height: 100%;
  1747. display: -webkit-box;
  1748. display: -ms-flexbox;
  1749. display: flex;
  1750. -webkit-box-pack: center;
  1751. -ms-flex-pack: center;
  1752. justify-content: center;
  1753. -webkit-box-align: center;
  1754. -ms-flex-align: center;
  1755. align-items: center;
  1756. text-align: center;
  1757. }
  1758. #hhh-cases .swiper-zoom-container-desktop img {
  1759. width: 100%;
  1760. height: 100%;
  1761. max-width: 100%;
  1762. max-height: 100%;
  1763. -o-object-fit: contain;
  1764. object-fit: contain;
  1765. }
  1766. #hhh-cases .swiper-zoom-container-sm-desktop {
  1767. width: 50%;
  1768. height: 70%;
  1769. }
  1770. #hhh-cases .swiper-zoom-container-sm-desktop {
  1771. width: 50%;
  1772. height: 70%;
  1773. }
  1774. #hhh-cases .slick-prev:before, #hhh-cases .slick-next:before {
  1775. display: none;
  1776. }
  1777. #hhh-cases .modal-body {
  1778. padding: 0 !important;
  1779. }
  1780. #hhh-cases .case-slick-box {
  1781. height: 100vh;
  1782. position: -webkit-sticky;
  1783. position: sticky;
  1784. top: 15px;
  1785. }
  1786. @media screen and (max-width: 576px) {
  1787. #hhh-cases .case-slick-box {
  1788. height: 60vh;
  1789. position: static;
  1790. }
  1791. }
  1792. #hhh-cases .img-wrapper-desktopp {
  1793. width: 95%;
  1794. margin: 0 auto;
  1795. height: 100%;
  1796. }
  1797. #hhh-cases .CaseDetail-slick {
  1798. height: 100vh;
  1799. width: 95%;
  1800. margin: 0 auto;
  1801. }
  1802. @media screen and (max-width: 576px) {
  1803. #hhh-cases .CaseDetail-slick {
  1804. height: 60vh;
  1805. }
  1806. }
  1807. #hhh-cases .CaseDetail-slick .slick-slide {
  1808. height: 100vh;
  1809. }
  1810. @media screen and (max-width: 576px) {
  1811. #hhh-cases .CaseDetail-slick .slick-slide {
  1812. height: 60vh;
  1813. }
  1814. }
  1815. #hhh-cases .CaseDetail-slick img {
  1816. width: 100%;
  1817. height: auto;
  1818. max-width: 100%;
  1819. max-height: 100%;
  1820. -o-object-fit: contain;
  1821. object-fit: contain;
  1822. }
  1823. #hhh-cases .breadcrumb {
  1824. padding: 0.75rem 1rem;
  1825. }
  1826. #hhh-cases .breadcrumb a {
  1827. font-size: 0.75rem;
  1828. color: #727679;
  1829. text-decoration: none;
  1830. }
  1831. #hhh-cases .breadcrumb .active a {
  1832. color: #AAAAAA;
  1833. }
  1834. #hhh-cases .h4 {
  1835. font-weight: bold;
  1836. color: #34404B;
  1837. }
  1838. #hhh-cases .article {
  1839. color: #727679;
  1840. }
  1841. #hhh-cases .article .small {
  1842. padding: 0.5rem 0;
  1843. font-size: 80%;
  1844. }
  1845. #hhh-cases .shadow-sm {
  1846. -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08) !important;
  1847. box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08) !important;
  1848. }
  1849. #hhh-cases .container-width-column {
  1850. max-width: 1120px;
  1851. margin: 0 auto;
  1852. }
  1853. #hhh-cases .article__wrapper {
  1854. padding: 0.75rem 1rem;
  1855. }
  1856. #hhh-cases .shadow {
  1857. -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  1858. box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  1859. }
  1860. #hhh-cases .cases-content {
  1861. background: #FCFCFC;
  1862. }
  1863. #hhh-cases .cases-content .caseSlider {
  1864. background: #fff;
  1865. max-width: 1310px;
  1866. margin: 0 auto;
  1867. padding: 100px;
  1868. position: relative;
  1869. }
  1870. @media screen and (max-width: 576px) {
  1871. #hhh-cases .cases-content .caseSlider {
  1872. padding: 0;
  1873. }
  1874. }
  1875. #hhh-cases .cases-content .caseSlider .morePhotoTip {
  1876. cursor: pointer;
  1877. position: absolute;
  1878. color: #FFF;
  1879. right: 120px;
  1880. bottom: 120px;
  1881. padding: 0.2rem 0.8rem;
  1882. background-color: rgba(0, 0, 0, 0.45);
  1883. -webkit-transition: all 300ms ease-in-out;
  1884. transition: all 300ms ease-in-out;
  1885. }
  1886. @media screen and (max-width: 576px) {
  1887. #hhh-cases .cases-content .caseSlider .morePhotoTip {
  1888. bottom: 10px;
  1889. right: 10px;
  1890. }
  1891. }
  1892. #hhh-cases .container--padding {
  1893. padding: 1.2rem 0;
  1894. }
  1895. #hhh-cases .info__items {
  1896. font-size: 1.2rem;
  1897. text-align: center;
  1898. color: #34404B;
  1899. font-weight: 800;
  1900. min-height: 4.5rem;
  1901. display: -webkit-box;
  1902. display: -ms-flexbox;
  1903. display: flex;
  1904. -webkit-box-pack: center;
  1905. -ms-flex-pack: center;
  1906. justify-content: center;
  1907. -webkit-box-align: center;
  1908. -ms-flex-align: center;
  1909. align-items: center;
  1910. }
  1911. @media screen and (max-width: 576px) {
  1912. #hhh-cases .info__items {
  1913. font-size: 1rem;
  1914. }
  1915. }
  1916. #hhh-cases .info__items__title {
  1917. color: #727679;
  1918. font-weight: 400;
  1919. font-size: 1rem;
  1920. }
  1921. #hhh-cases .case-scMedia__block {
  1922. width: 35%;
  1923. margin: 0 auto;
  1924. }
  1925. @media screen and (max-width: 576px) {
  1926. #hhh-cases .case-scMedia__block {
  1927. width: 100%;
  1928. }
  1929. }
  1930. #hhh-cases .case-scMedia__block .case-scMedia__list {
  1931. background-color: #FFF;
  1932. -webkit-box-shadow: 0 1px 10px #cecece;
  1933. box-shadow: 0 1px 10px #cecece;
  1934. border-radius: 45px;
  1935. padding: 1rem 2.8rem;
  1936. display: -webkit-box;
  1937. display: -ms-flexbox;
  1938. display: flex;
  1939. -ms-flex-pack: distribute;
  1940. justify-content: space-around;
  1941. }
  1942. @media screen and (max-width: 576px) {
  1943. #hhh-cases .case-scMedia__block .case-scMedia__list {
  1944. border-radius: 0px;
  1945. -webkit-box-shadow: none;
  1946. box-shadow: none;
  1947. padding: 0;
  1948. }
  1949. }
  1950. #hhh-cases .relTag {
  1951. padding: 1rem;
  1952. }
  1953. #hhh-cases .relTag a {
  1954. margin: 0 0 0.6rem 0.6rem;
  1955. -webkit-transition: all 300ms ease-in-out;
  1956. transition: all 300ms ease-in-out;
  1957. }
  1958. #hhh-cases .relTag a:hover {
  1959. color: #FFAC73;
  1960. border-color: #FFAC73;
  1961. }
  1962. #hhh-cases .relTag__items__title {
  1963. width: 7%;
  1964. }
  1965. #hhh-cases .relTag__items {
  1966. width: 100%;
  1967. display: -webkit-box;
  1968. display: -ms-flexbox;
  1969. display: flex;
  1970. }
  1971. #hhh-cases .relTag__items__tags {
  1972. width: 93%;
  1973. }
  1974. #hhh-cases .btn-outline-custom {
  1975. border-color: #707070;
  1976. }
  1977. #hhh-cases .caseData {
  1978. color: #727679;
  1979. padding: 0.5rem 0 0;
  1980. margin-bottom: 3rem;
  1981. }
  1982. #hhh-cases .caseData h4 {
  1983. font-weight: bold;
  1984. color: #34404B;
  1985. padding: 0.5rem;
  1986. }
  1987. @media screen and (max-width: 576px) {
  1988. #hhh-cases .caseData h4 {
  1989. padding: 1rem 0.5rem 0.5rem;
  1990. }
  1991. }
  1992. #hhh-cases .caseData .caseData__infoBlock {
  1993. position: relative;
  1994. -webkit-box-shadow: 0 1px 10px #cecece;
  1995. box-shadow: 0 1px 10px #cecece;
  1996. padding: 1rem;
  1997. }
  1998. #hhh-cases .caseData .caseData__infoItems {
  1999. padding: 0.5rem;
  2000. }
  2001. #hhh-cases .caseData .caseData__infoItems__list {
  2002. display: -webkit-box;
  2003. display: -ms-flexbox;
  2004. display: flex;
  2005. }
  2006. #hhh-cases .caseData .caseData__infoItems__list--lf {
  2007. -webkit-box-pack: start;
  2008. -ms-flex-pack: start;
  2009. justify-content: start;
  2010. -webkit-box-align: start;
  2011. display: -webkit-box;
  2012. display: -ms-flexbox;
  2013. display: flex;
  2014. -ms-flex-positive: 0;
  2015. flex-grow: 0;
  2016. max-width: 15%;
  2017. -ms-flex-preferred-size: 15%;
  2018. flex-basis: 15%;
  2019. -webkit-box-flex: 0;
  2020. }
  2021. @media screen and (max-width: 576px) {
  2022. #hhh-cases .caseData .caseData__infoItems__list--lf {
  2023. max-width: 25%;
  2024. -ms-flex-preferred-size: 25%;
  2025. flex-basis: 25%;
  2026. }
  2027. }
  2028. #hhh-cases .caseData .caseData__infoItems__list--rt {
  2029. -ms-flex-preferred-size: 80%;
  2030. flex-basis: 80%;
  2031. -webkit-box-flex: 0;
  2032. -ms-flex-positive: 0;
  2033. flex-grow: 0;
  2034. max-width: 80%;
  2035. -webkit-box-pack: start;
  2036. -ms-flex-pack: start;
  2037. justify-content: start;
  2038. word-break: break-all;
  2039. }
  2040. @media screen and (max-width: 576px) {
  2041. #hhh-cases .caseData .caseData__infoItems__list--rt {
  2042. -ms-flex-preferred-size: 70%;
  2043. flex-basis: 70%;
  2044. max-width: 70%;
  2045. }
  2046. }
  2047. #hhh-cases .caseData a {
  2048. text-decoration: none;
  2049. background-color: transparent;
  2050. color: #727679;
  2051. }
  2052. #hhh-cases .caseData__designerBlock {
  2053. display: -webkit-box;
  2054. display: -ms-flexbox;
  2055. display: flex;
  2056. -webkit-box-shadow: 0 1px 10px #cecece;
  2057. box-shadow: 0 1px 10px #cecece;
  2058. }
  2059. #hhh-cases .caseData__designerBlock ul {
  2060. list-style-type: none;
  2061. padding: 0.6rem;
  2062. }
  2063. #hhh-cases .caseData__designerBlock__designer--pc {
  2064. padding: 1rem 0.9rem;
  2065. width: 50%;
  2066. height: 370px;
  2067. }
  2068. @media screen and (max-width: 576px) {
  2069. #hhh-cases .caseData__designerBlock__designer {
  2070. width: 60%;
  2071. }
  2072. }
  2073. #hhh-cases .caseData__designerBlock__designer--above {
  2074. height: 70%;
  2075. }
  2076. #hhh-cases .caseData__designerBlock__designer--below {
  2077. height: 25%;
  2078. border-top: 1px solid #727679;
  2079. }
  2080. #hhh-cases .caseData__designerBlock__avatar--img {
  2081. height: 100%;
  2082. background-size: contain;
  2083. background-repeat: no-repeat;
  2084. background-position: center;
  2085. }
  2086. @media screen and (max-width: 576px) {
  2087. #hhh-cases .caseData__designerBlock__avatar--img {
  2088. height: 190px;
  2089. background-size: contain;
  2090. }
  2091. }
  2092. #hhh-cases .caseData__designerBlock__avatar {
  2093. width: 50%;
  2094. }
  2095. @media screen and (max-width: 576px) {
  2096. #hhh-cases .caseData__designerBlock__avatar {
  2097. width: 40%;
  2098. }
  2099. }
  2100. #hhh-cases .tel {
  2101. color: #EE751B !important;
  2102. font-size: 1.5rem;
  2103. font-weight: bold;
  2104. }
  2105. @media screen and (max-width: 576px) {
  2106. #hhh-cases .tel {
  2107. font-size: 1rem;
  2108. }
  2109. }
  2110. #hhh-cases .likeSee__state {
  2111. display: -webkit-box;
  2112. display: -ms-flexbox;
  2113. display: flex;
  2114. -webkit-box-pack: justify;
  2115. -ms-flex-pack: justify;
  2116. justify-content: space-between;
  2117. -webkit-box-align: center;
  2118. -ms-flex-align: center;
  2119. align-items: center;
  2120. }
  2121. #hhh-cases .likeSee__state h4 {
  2122. font-weight: bold;
  2123. color: #34404B;
  2124. }
  2125. #hhh-cases .likeSee__state .likeSee__state__filter--divider {
  2126. height: 12px;
  2127. display: inline-block;
  2128. border: 0.5px solid #9d9d9d;
  2129. }
  2130. #hhh-cases .likeSee__state a {
  2131. color: #727679;
  2132. text-decoration: none;
  2133. -webkit-transition: 0.3s;
  2134. transition: 0.3s;
  2135. }
  2136. #hhh-cases .likeSee__state a:hover {
  2137. color: #EE7800;
  2138. }
  2139. #hhh-cases .likeSee__state .active {
  2140. color: #EE751B;
  2141. }
  2142. #hhh-cases .card {
  2143. border: none;
  2144. font-size: 0.75rem;
  2145. }
  2146. #hhh-cases .vue-waterfall {
  2147. position: relative;
  2148. }
  2149. #hhh-cases .vue-waterfall a {
  2150. color: #727679;
  2151. text-decoration: none;
  2152. background-color: transparent;
  2153. font-size: 0.75rem;
  2154. -webkit-transition: all 300ms ease-in-out;
  2155. transition: all 300ms ease-in-out;
  2156. }
  2157. #hhh-cases .vue-waterfall a:hover {
  2158. color: #FFAC73;
  2159. }
  2160. #hhh-cases .vue-waterfall .card-body {
  2161. padding: 0.5rem 0.5rem 0.5rem 0;
  2162. }
  2163. #hhh-cases .vue-waterfall .likeSee__tag--item {
  2164. margin: 0 0.2rem 0 0;
  2165. text-decoration: none !important;
  2166. color: #727679;
  2167. -webkit-transition: all 300ms ease-in-out;
  2168. transition: all 300ms ease-in-out;
  2169. }
  2170. #hhh-cases .vue-waterfall .likeSee__tag--item:hover {
  2171. color: #FFAC73;
  2172. }
  2173. #hhh-cases .likeSee__tag {
  2174. padding: 0.5rem 0;
  2175. }
  2176. #hhh-cases .likeSee__tag--item {
  2177. margin: 0 0.2rem 0 0;
  2178. text-decoration: none !important;
  2179. color: #727679;
  2180. -webkit-transition: all 300ms ease-in-out;
  2181. transition: all 300ms ease-in-out;
  2182. }
  2183. #hhh-cases .likeSee__tag--item:hover {
  2184. color: #FFAC73;
  2185. }
  2186. #hhh-cases .likeSee__state__filter--item {
  2187. cursor: pointer;
  2188. }
  2189. #hhh-cases .formBtn .btn {
  2190. padding: 1.2rem 0.75rem;
  2191. }
  2192. #hhh-cases .btn-primary {
  2193. color: #fff;
  2194. background-color: #EE7800;
  2195. border-color: #EE7800;
  2196. }
  2197. #hhh-cases .btn-block {
  2198. display: block;
  2199. width: 100%;
  2200. }
  2201. #hhh-cases .container-width-ad {
  2202. max-width: 768px;
  2203. }
  2204. #hhh-cases .formBtn {
  2205. width: 47%;
  2206. }
  2207. @media screen and (max-width: 576px) {
  2208. #hhh-cases .formBtn {
  2209. margin-top: 15px;
  2210. width: 100%;
  2211. }
  2212. }
  2213. #hhh-cases .ad__bgImg {
  2214. height: 80px;
  2215. background-repeat: no-repeat;
  2216. background-size: cover;
  2217. background-position: center;
  2218. }
  2219. #hhh-cases .container-width-ad {
  2220. max-width: 768px;
  2221. margin-bottom: 30px;
  2222. }
  2223. @media screen and (max-width: 576px) {
  2224. #hhh-cases .container-width-ad {
  2225. margin-bottom: 100px;
  2226. }
  2227. }
  2228. #hhh-cases .contact-section-avatar {
  2229. width: 75px;
  2230. height: 100px;
  2231. }
  2232. #hhh-cases .contact-section-company {
  2233. font-weight: bold;
  2234. font-size: 18px;
  2235. color: #6D6D6D;
  2236. text-decoration: none;
  2237. height: calc(18px * 2 *1.39);
  2238. }
  2239. #hhh-cases .contact-section-detail-box {
  2240. color: #6D6D6D;
  2241. display: -webkit-box !important;
  2242. display: -ms-flexbox !important;
  2243. display: flex !important;
  2244. }
  2245. #hhh-cases .contact-section-detail-box .contact-section-detail-lf {
  2246. -ms-flex-preferred-size: 7%;
  2247. flex-basis: 7%;
  2248. -ms-flex-positive: 0;
  2249. flex-grow: 0;
  2250. max-width: 7%;
  2251. display: -webkit-box !important;
  2252. display: -ms-flexbox !important;
  2253. display: flex !important;
  2254. -webkit-box-align: start;
  2255. -webkit-box-flex: 0;
  2256. }
  2257. #hhh-cases .contact-section-detail-box a {
  2258. color: #6D6D6D;
  2259. text-decoration: none;
  2260. }
  2261. #hhh-cases .info-area-title-desktop {
  2262. font-size: 18px;
  2263. font-weight: bold;
  2264. padding: 0.6rem 0 0.6rem 0.6rem;
  2265. margin: 1.6rem 0 1rem 0;
  2266. background-color: #EFEFEF;
  2267. }
  2268. #hhh-cases .info-area-title-desktop a {
  2269. color: #6D6D6D;
  2270. text-decoration: none;
  2271. }
  2272. #hhh-cases .info-area-data-desktop, #hhh-cases .info-area-other-case-desktop, #hhh-cases .info-area-same-case-desktop, #hhh-cases .info-area-contact-desktop {
  2273. font-size: 16px;
  2274. font-weight: bold;
  2275. color: #6D6D6D;
  2276. }
  2277. #hhh-cases .info-area-data-desktop a, #hhh-cases .info-area-other-case-desktop a, #hhh-cases .info-area-same-case-desktop a, #hhh-cases .info-area-contact-desktop a {
  2278. color: #6D6D6D;
  2279. text-decoration: none;
  2280. }
  2281. #hhh-cases .divider {
  2282. width: 100%;
  2283. height: 1px;
  2284. border-left: none;
  2285. border-bottom: 1px solid #9c9c9c;
  2286. margin: 10px 0;
  2287. }
  2288. #hhh-cases .data-table-desktop {
  2289. width: 100%;
  2290. font-size: 14px;
  2291. padding: 0.55rem 0;
  2292. }
  2293. #hhh-cases .data-table-lf {
  2294. -ms-flex-preferred-size: 18%;
  2295. flex-basis: 18%;
  2296. -webkit-box-flex: 0;
  2297. -ms-flex-positive: 0;
  2298. flex-grow: 0;
  2299. max-width: 25%;
  2300. display: -webkit-box;
  2301. display: -ms-flexbox;
  2302. display: flex;
  2303. -webkit-box-pack: start;
  2304. -ms-flex-pack: start;
  2305. justify-content: start;
  2306. -webkit-box-align: start;
  2307. -ms-flex-align: start;
  2308. align-items: start;
  2309. }
  2310. #hhh-cases .contact-section-detail-desktop {
  2311. font-size: 14px;
  2312. }
  2313. #hhh-cases .contact-section-detail-lf {
  2314. -ms-flex-preferred-size: 7%;
  2315. flex-basis: 7%;
  2316. -webkit-box-flex: 0;
  2317. -ms-flex-positive: 0;
  2318. flex-grow: 0;
  2319. display: -webkit-box;
  2320. display: -ms-flexbox;
  2321. display: flex;
  2322. -webkit-box-align: start;
  2323. -ms-flex-align: start;
  2324. align-items: start;
  2325. max-width: 7%;
  2326. }
  2327. #hhh-cases .info {
  2328. margin: 0 0 1.8rem;
  2329. -webkit-transition: all 300ms ease-in-out;
  2330. transition: all 300ms ease-in-out;
  2331. }
  2332. #hhh-cases .info .info__option {
  2333. display: -webkit-box;
  2334. display: -ms-flexbox;
  2335. display: flex;
  2336. -webkit-box-pack: center;
  2337. -ms-flex-pack: center;
  2338. justify-content: center;
  2339. -webkit-box-align: center;
  2340. -ms-flex-align: center;
  2341. align-items: center;
  2342. min-height: 100%;
  2343. }
  2344. #hhh-cases .info .info__items--ellipse {
  2345. -webkit-box-orient: vertical;
  2346. box-orient: vertical;
  2347. -webkit-line-clamp: 1;
  2348. height: calc(19.2px * 1 * 1.5);
  2349. overflow: hidden;
  2350. text-overflow: ellipsis;
  2351. display: -webkit-box;
  2352. -webkit-transition: all 300ms ease-in-out;
  2353. transition: all 300ms ease-in-out;
  2354. }
  2355. @media screen and (max-width: 576px) {
  2356. #hhh-cases .info .info__items--ellipse {
  2357. height: calc(16px * 1 * 1.5);
  2358. min-height: 0;
  2359. padding: 0;
  2360. }
  2361. }
  2362. #hhh-cases .info .border-sidebar {
  2363. position: relative;
  2364. }
  2365. #hhh-cases .info .border-sidebar::after {
  2366. content: '';
  2367. display: inline-block;
  2368. width: 1px;
  2369. height: calc(150px * 0.8);
  2370. background-color: #cecece;
  2371. -webkit-transform: translate3d(0, 0, 0);
  2372. transform: translate3d(0, 0, 0);
  2373. position: absolute;
  2374. left: 100%;
  2375. top: 12px;
  2376. }
  2377. #hhh-cases .info .mh {
  2378. min-height: 75px;
  2379. }
  2380. #hhh-cases .info .border-below {
  2381. border-bottom: 1px solid #cecece;
  2382. }
  2383. @media screen and (max-width: 576px) {
  2384. #hhh-cases .info .container--padding {
  2385. padding: 0 1.875rem;
  2386. }
  2387. }
  2388. @media screen and (max-width: 576px) {
  2389. #hhh-cases .display-pc {
  2390. display: none;
  2391. }
  2392. }
  2393. @media screen and (max-width: 576px) {
  2394. #hhh-cases .CaseInfo-pc {
  2395. display: none;
  2396. }
  2397. }
  2398. #hhh-cases .info--shadow {
  2399. -webkit-box-shadow: 0 1px 10px #cecece;
  2400. box-shadow: 0 1px 10px #cecece;
  2401. }
  2402. .fixed_menu {
  2403. height: 78px;
  2404. position: fixed;
  2405. z-index: 4;
  2406. bottom: 0;
  2407. left: 0;
  2408. width: 100%;
  2409. background-color: #fff;
  2410. box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  2411. -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  2412. -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  2413. }
  2414. @media (min-width: 480px) {
  2415. .fixed_menu {
  2416. height: 50px;
  2417. }
  2418. }
  2419. @media (min-width: 480px) {
  2420. .fixed_menu .row {
  2421. height: 50px;
  2422. }
  2423. }
  2424. @media (min-width: 480px) {
  2425. .fixed_menu__box {
  2426. width: 100%;
  2427. height: 100%;
  2428. }
  2429. }
  2430. .fixed_menu__box img:focus-visible {
  2431. outline: none;
  2432. }
  2433. @media (min-width: 480px) {
  2434. .fixed_menu__box img {
  2435. width: 100%;
  2436. height: 100%;
  2437. }
  2438. }
  2439. .article--style {
  2440. background: #fff;
  2441. -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  2442. box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  2443. }
  2444. .article__title {
  2445. color: #34404B;
  2446. font-size: 1.5rem;
  2447. font-weight: bold;
  2448. margin-bottom: 0.5rem;
  2449. }
  2450. .article__contexts {
  2451. font-size: 1.1rem;
  2452. line-height: 1.8;
  2453. }
  2454. .article__contexts img {
  2455. max-width: 80%;
  2456. margin: 0.5rem 0;
  2457. }
  2458. .article__contexts p {
  2459. margin-bottom: 1rem !important;
  2460. }
  2461. .article__contexts a {
  2462. text-decoration: none;
  2463. }
  2464. .article__contexts strong {
  2465. font-weight: bolder;
  2466. }
  2467. .cardList__items {
  2468. -webkit-box-shadow: 0 1px 10px #eee;
  2469. box-shadow: 0 1px 10px #eee;
  2470. margin: 0 0 1.5rem;
  2471. }
  2472. .cardList__items img {
  2473. width: 100%;
  2474. height: 293px;
  2475. }
  2476. .cardList__items .cardList__items__content {
  2477. padding: 0.5rem 1rem;
  2478. }
  2479. .cardList__items .cardList__items--title {
  2480. font-size: 1.125rem;
  2481. font-weight: bold;
  2482. margin: 0.5rem 0;
  2483. color: #727679;
  2484. }
  2485. .cardList__items .likeSee__tag--item {
  2486. margin: 0 0.2rem 0 0;
  2487. }
  2488. .cardList__items a {
  2489. font-size: 16px !important;
  2490. }
  2491. .cardList__items p {
  2492. margin-bottom: 1rem !important;
  2493. }
  2494. /*# sourceMappingURL=style.css.map */