style.css 41 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303
  1. @charset "UTF-8";
  2. body {
  3. font-family: 'Helvetica Neue';
  4. }
  5. .sec-00 {
  6. background-color: #cacaca;
  7. -webkit-transition-property: height;
  8. transition-property: height;
  9. -webkit-transition-duration: 300ms;
  10. transition-duration: 300ms;
  11. }
  12. .sec-00__close {
  13. position: absolute;
  14. top: 0;
  15. right: 20px;
  16. width: 50px;
  17. height: 30px;
  18. background-color: rgba(255, 255, 255, 0.66);
  19. border-radius: 0 0 50px 50px;
  20. color: #888;
  21. border: none;
  22. outline: none;
  23. font-size: 11px;
  24. -webkit-box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
  25. box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
  26. line-height: 12px;
  27. z-index: 3;
  28. }
  29. .sec-00.bannerClose {
  30. height: 0;
  31. overflow: hidden;
  32. -webkit-transition-property: height;
  33. transition-property: height;
  34. -webkit-transition-duration: 300ms;
  35. transition-duration: 300ms;
  36. }
  37. .sec-00 .container-fluid {
  38. background-color: #cacaca;
  39. }
  40. .sec-00__slider {
  41. margin: 0 auto;
  42. width: 100%;
  43. height: 100%;
  44. max-width: 1310px;
  45. padding-top: 20px;
  46. padding-bottom: 24px;
  47. }
  48. @media (max-width: 1850px) {
  49. .sec-00__slider {
  50. max-width: 1310px;
  51. }
  52. }
  53. @media (max-width: 1550px) {
  54. .sec-00__slider {
  55. max-width: 1310px;
  56. }
  57. }
  58. .sec-00__slider .slide-item {
  59. width: 100%;
  60. height: 100%;
  61. max-width: 1310px;
  62. max-height: 300px;
  63. -o-object-fit: contain;
  64. object-fit: contain;
  65. height: 300px;
  66. cursor: pointer;
  67. }
  68. .sec-00 .slick-prev:before, .sec-00 .slick-next:before {
  69. display: none;
  70. }
  71. .sec-00__bulletList {
  72. position: absolute;
  73. bottom: 21px;
  74. left: calc(50% - 655px);
  75. width: 1310px;
  76. -webkit-box-sizing: border-box;
  77. box-sizing: border-box;
  78. display: -webkit-box;
  79. display: -ms-flexbox;
  80. display: flex;
  81. z-index: 10;
  82. background-color: rgba(0, 0, 0, 0.1);
  83. }
  84. .sec-00__bullet {
  85. position: relative;
  86. width: 100%;
  87. height: 3px;
  88. background-color: rgba(0, 0, 0, 0.1);
  89. -webkit-box-flex: 1;
  90. -ms-flex: 1 1 auto;
  91. flex: 1 1 auto;
  92. opacity: 1;
  93. }
  94. .sec-00__bullet::after {
  95. content: "";
  96. background: #ee7800;
  97. position: absolute;
  98. width: 0;
  99. height: 100%;
  100. left: 0;
  101. top: 0;
  102. border-radius: 2px;
  103. }
  104. .sec-00 .bullet-active::after {
  105. width: 0;
  106. -webkit-animation-name: progress;
  107. animation-name: progress;
  108. -webkit-animation-duration: 4s;
  109. animation-duration: 4s;
  110. -webkit-animation-timing-function: linear;
  111. animation-timing-function: linear;
  112. }
  113. @keyframes progress {
  114. 0% {
  115. width: 0%;
  116. }
  117. 25% {
  118. width: 25%;
  119. }
  120. 50% {
  121. width: 50%;
  122. }
  123. 75% {
  124. width: 75%;
  125. }
  126. 100% {
  127. width: 100%;
  128. }
  129. }
  130. @-webkit-keyframes progress {
  131. 0% {
  132. width: 0%;
  133. }
  134. 25% {
  135. width: 25%;
  136. }
  137. 50% {
  138. width: 50%;
  139. }
  140. 75% {
  141. width: 75%;
  142. }
  143. 100% {
  144. width: 100%;
  145. }
  146. }
  147. @-webkit-keyframes slidein {
  148. 100% {
  149. height: 0px;
  150. }
  151. }
  152. @keyframes slidein {
  153. 100% {
  154. height: 0px;
  155. }
  156. }
  157. .navbar {
  158. 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);
  159. -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);
  160. -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);
  161. padding-top: 5px;
  162. padding-bottom: 5px;
  163. background-color: white !important;
  164. z-index: 99;
  165. }
  166. .navbar .container-fluid {
  167. padding: 0 2.5rem;
  168. }
  169. @media (max-width: 1100px) {
  170. .navbar .container-fluid {
  171. padding: 0 .6rem;
  172. }
  173. }
  174. .navbar-toggler {
  175. padding-left: 0;
  176. border-color: transparent !important;
  177. }
  178. .navbar-toggler:focus {
  179. -webkit-box-shadow: none;
  180. box-shadow: none;
  181. }
  182. .navbar-toggler-icon {
  183. display: -webkit-box;
  184. display: -ms-flexbox;
  185. display: flex;
  186. justify-items: center;
  187. }
  188. .navbar-toggler-icon i {
  189. font-size: 25px;
  190. line-height: 30px;
  191. display: inline-block;
  192. }
  193. .navbar-search, .navbar-login {
  194. padding-right: 2px;
  195. }
  196. .navbar-login {
  197. cursor: pointer;
  198. }
  199. .navbar-search-magnify {
  200. cursor: pointer;
  201. }
  202. .navbar-brand {
  203. font-size: 1.5rem;
  204. }
  205. .navbar-brand.navbar-logo {
  206. display: -webkit-box;
  207. display: -ms-flexbox;
  208. display: flex;
  209. -webkit-box-align: center;
  210. -ms-flex-align: center;
  211. align-items: center;
  212. }
  213. .navbar-brand .navbar-login {
  214. font-size: 1rem;
  215. color: #EE7800;
  216. text-decoration: none;
  217. }
  218. .navbar .nav-link {
  219. cursor: pointer;
  220. }
  221. @media (max-width: 1100px) {
  222. .navbar .nav-link {
  223. padding: .5rem .5rem;
  224. font-size: .9rem;
  225. }
  226. }
  227. .navbar .navbar-nav .nav-item {
  228. margin: 0 .5rem;
  229. }
  230. @media (max-width: 1100px) {
  231. .navbar .navbar-nav .nav-item {
  232. margin: 0 0rem;
  233. }
  234. }
  235. .navbar .navbar-nav .nav-item .dropbox {
  236. visibility: hidden;
  237. opacity: 0;
  238. -webkit-transition: all .4s;
  239. transition: all .4s;
  240. position: absolute;
  241. width: 100vw;
  242. top: 100%;
  243. left: 0;
  244. background-color: rgba(255, 255, 255, 0.932);
  245. padding-top: 1.5rem;
  246. padding-bottom: 3rem;
  247. }
  248. .navbar .navbar-nav .nav-item .dropbox ul {
  249. padding-left: 0;
  250. }
  251. .navbar .navbar-nav .nav-item .dropbox-item {
  252. margin-bottom: .5rem;
  253. }
  254. .navbar .navbar-nav .nav-item .dropbox-item.first {
  255. font-size: 1.1rem;
  256. font-weight: 600;
  257. }
  258. .navbar .navbar-nav .nav-item .dropbox-item.first .dropbox-link {
  259. color: black;
  260. }
  261. .navbar .navbar-nav .nav-item .dropbox-link {
  262. text-decoration: none;
  263. color: #929292;
  264. font-size: .85rem;
  265. }
  266. .navbar .navbar-nav .nav-item .dropbox-link:hover {
  267. color: #EE7800;
  268. }
  269. .navbar .navbar-nav .nav-item .dropbox-link.dropbox-btn {
  270. border: 1px solid #929292;
  271. padding: .5rem 2rem;
  272. border-radius: 5px;
  273. width: 85%;
  274. min-width: 7rem;
  275. max-width: 11rem;
  276. }
  277. .navbar .navbar-nav .nav-item .dropbox-btn {
  278. display: -webkit-box;
  279. display: -ms-flexbox;
  280. display: flex;
  281. -webkit-box-align: center;
  282. -ms-flex-align: center;
  283. align-items: center;
  284. -webkit-box-pack: center;
  285. -ms-flex-pack: center;
  286. justify-content: center;
  287. }
  288. .navbar .navbar-nav .nav-item .dropbox .container {
  289. max-width: 900px;
  290. width: 70%;
  291. }
  292. .navbar .navbar-nav .nav-item .dropbox .container.stylebox {
  293. -webkit-transform: translateX(-30%);
  294. transform: translateX(-30%);
  295. }
  296. .navbar .navbar-nav .nav-item .dropbox .container.designerbox {
  297. -webkit-transform: translateX(-5%);
  298. transform: translateX(-5%);
  299. }
  300. .navbar .navbar-nav .nav-item .dropbox .container.newbox {
  301. -webkit-transform: translateX(15%);
  302. transform: translateX(15%);
  303. }
  304. .navbar .navbar-nav .nav-item .dropbox .container.forumbox {
  305. -webkit-transform: translateX(50%);
  306. transform: translateX(50%);
  307. }
  308. .navbar .navbar-nav .nav-item .nav-link {
  309. position: relative;
  310. }
  311. .navbar .navbar-nav .nav-item .nav-link:after {
  312. position: absolute;
  313. content: " ";
  314. width: 100%;
  315. height: 90%;
  316. top: 0;
  317. right: 0;
  318. border-bottom: 2px solid #EE7800;
  319. opacity: 0;
  320. -webkit-transform: opacity 1s;
  321. transform: opacity 1s;
  322. }
  323. .navbar .navbar-nav .nav-item:hover .nav-link:after {
  324. opacity: 1;
  325. }
  326. .navbar .navbar-nav .nav-item:hover > .dropbox {
  327. visibility: visible;
  328. opacity: 1;
  329. }
  330. .navbar .navbar-nav .nav-item.lg .container {
  331. max-width: 1200px;
  332. width: 90%;
  333. }
  334. .navbar .navbar-nav .nav-item.lg .dropbox-link {
  335. text-decoration: none;
  336. color: #929292;
  337. font-size: .7rem;
  338. }
  339. .navbar .navbar-nav .nav-item.lg .dropbox-link:hover {
  340. color: #EE7800;
  341. }
  342. .navbar .navbar-nav .nav-item.lg .dropbox-item {
  343. margin-bottom: .1rem;
  344. }
  345. .navbar .navbar-nav .nav-item.lg .dropbox-item.first .dropbox-link {
  346. font-size: .85rem;
  347. }
  348. .navbar-search .container {
  349. max-width: 900px;
  350. width: 70%;
  351. }
  352. @media (max-width: 1100px) {
  353. .navbar-search .container {
  354. width: 90%;
  355. }
  356. }
  357. .navbar-search .dropbox {
  358. visibility: hidden;
  359. opacity: 0;
  360. -webkit-transition: all .2s;
  361. transition: all .2s;
  362. position: absolute;
  363. width: 100vw;
  364. top: 100%;
  365. left: 0;
  366. background-color: rgba(255, 255, 255, 0.932);
  367. padding-top: 1.5rem;
  368. padding-bottom: 3rem;
  369. }
  370. .navbar-search .dropbox.open {
  371. visibility: visible;
  372. opacity: 1;
  373. }
  374. .navbar-search .dropbox__searchtab {
  375. width: 100%;
  376. background-color: gray;
  377. border-radius: 3px;
  378. padding: .2rem 1rem;
  379. padding-bottom: 1rem;
  380. }
  381. .navbar-search .dropbox__hots__title {
  382. font-size: 1rem;
  383. color: #6b6b6b;
  384. }
  385. .navbar-search .dropbox__hots__link {
  386. font-size: .9rem;
  387. color: #929292;
  388. text-decoration: none;
  389. cursor: pointer;
  390. margin: 0 .2rem;
  391. }
  392. .navbar-search .dropbox__searchBar__input {
  393. width: 100%;
  394. outline: none;
  395. border: 2px solid #EE7800;
  396. border-radius: 5rem;
  397. padding: .3rem 1.2rem;
  398. font-size: .9rem;
  399. }
  400. .navbar-search .dropbox__searchBar__submit {
  401. outline: none;
  402. border: none;
  403. font-size: .9rem;
  404. background-color: transparent;
  405. color: #EE7800;
  406. margin-left: -1rem;
  407. -webkit-transform: translateX(-100%);
  408. transform: translateX(-100%);
  409. padding: 0 .6rem;
  410. }
  411. .navbar-search .dropbox__tab .nav-item {
  412. margin: 0 .6rem;
  413. }
  414. .navbar-search .dropbox .nav-item-link {
  415. border: none;
  416. outline: none;
  417. font-size: 1rem;
  418. color: white;
  419. padding: 3px;
  420. position: relative;
  421. }
  422. .navbar-search .dropbox .nav-item-link::after {
  423. position: absolute;
  424. content: "";
  425. top: 0;
  426. left: 0;
  427. width: 100%;
  428. height: 100%;
  429. border-bottom: 3px solid #EE7800;
  430. opacity: 0;
  431. }
  432. .navbar-search .dropbox .nav-item-link.active::after {
  433. opacity: 1;
  434. }
  435. .navbar-search .dropbox-tab-content .tabpar {
  436. display: -webkit-box;
  437. display: -ms-flexbox;
  438. display: flex;
  439. padding-top: .5rem;
  440. }
  441. .navbar-search .dropbox-tab-content .tabpar .col {
  442. margin: 0 .6rem;
  443. }
  444. .navbar-search .dropbox-tab-content .tabpar .select {
  445. font-size: 1rem;
  446. padding: .6rem;
  447. border-radius: 3px;
  448. color: #747474;
  449. }
  450. .navbar-search .dropbox-tab-content .tabpar button {
  451. border: none;
  452. outline: none;
  453. background-color: #EE7800;
  454. border-radius: 3px;
  455. color: white;
  456. font-size: 1rem;
  457. padding: .6rem;
  458. }
  459. .navbar-search .dropbox-tab-content .tabpar .image-search {
  460. border: none;
  461. outline: none;
  462. background-color: #EE7800;
  463. border-radius: 3px;
  464. color: white;
  465. font-size: 1rem;
  466. }
  467. .navbar-search .dropbox-tab-content .tabpar .article-btn {
  468. border: none;
  469. outline: none;
  470. background-color: #EE7800;
  471. border-radius: 3px;
  472. color: white;
  473. font-size: 1rem;
  474. padding: .6rem;
  475. }
  476. .navbar-search .dropbox-tab-content .tabpar .home-btn {
  477. border: none;
  478. outline: none;
  479. background-color: #EE7800;
  480. border-radius: 3px;
  481. color: white;
  482. font-size: 1rem;
  483. padding: .6rem;
  484. }
  485. .navbar-search .dropbox__tab .nav-item-link.active .nav-item-link::after {
  486. opacity: 1;
  487. }
  488. .navbar-main.sticky {
  489. position: fixed;
  490. top: 0;
  491. width: 100%;
  492. }
  493. .navbar-main.sticky + .sec-02 {
  494. padding-top: 53.5px;
  495. }
  496. .sec-02__slider {
  497. width: 100%;
  498. height: 100%;
  499. }
  500. .sec-02__slider .slide-item {
  501. width: 100%;
  502. height: 500px;
  503. background-position: center center;
  504. background-size: cover;
  505. background-repeat: no-repeat;
  506. cursor: pointer;
  507. }
  508. .sec-02 .slick-prev:before, .sec-02 .slick-next:before {
  509. display: none;
  510. }
  511. .sec-02 .slick-prev {
  512. left: 15px;
  513. z-index: 3;
  514. }
  515. .sec-02 .slick-next {
  516. right: 15px;
  517. }
  518. .sec-04 {
  519. background-color: #F4F4F4;
  520. padding: 4rem 1rem;
  521. }
  522. .sec-04 .container {
  523. max-width: 950px;
  524. width: 70%;
  525. }
  526. @media (max-width: 1100px) {
  527. .sec-04 .container {
  528. width: 90%;
  529. }
  530. }
  531. .sec-04 .card {
  532. -webkit-box-shadow: 1px 2px 8px 1px #d6d6d6;
  533. box-shadow: 1px 2px 8px 1px #d6d6d6;
  534. text-decoration: none;
  535. cursor: pointer;
  536. -webkit-transition: all .6s;
  537. transition: all .6s;
  538. }
  539. .sec-04 .card-title {
  540. font-size: 1.4rem;
  541. line-height: 1.8rem;
  542. color: #4C4C4C;
  543. font-weight: 500;
  544. -webkit-transition: all 2s;
  545. transition: all 2s;
  546. }
  547. .sec-04 .card__imgfr {
  548. width: 100%;
  549. }
  550. .sec-04 .card__imgfr img {
  551. width: 100%;
  552. height: 100%;
  553. }
  554. .sec-04 .card:hover {
  555. -webkit-transform: scale(1.05);
  556. transform: scale(1.05);
  557. }
  558. .sec-guessLike .container {
  559. margin: 0 auto;
  560. padding: 2rem 2rem;
  561. max-width: 1050px;
  562. width: 70%;
  563. }
  564. @media (max-width: 1100px) {
  565. .sec-guessLike .container {
  566. width: 90%;
  567. padding: 0 1rem;
  568. }
  569. }
  570. .sec-guessLike__titlebox-h2 {
  571. margin: 0 auto;
  572. font-size: 1.8rem;
  573. font-weight: 600;
  574. color: #535353;
  575. padding: .8rem 0;
  576. border-bottom: 6px solid #EE7800;
  577. display: inline-block;
  578. }
  579. .sec-guessLike__title {
  580. display: block;
  581. text-align: center;
  582. position: relative;
  583. font-size: 1.2rem;
  584. margin-bottom: .8rem;
  585. }
  586. .sec-guessLike__title::before, .sec-guessLike__title::after {
  587. position: absolute;
  588. content: " ";
  589. width: 40%;
  590. height: 0rem;
  591. border-top: 1px solid black;
  592. top: 50%;
  593. }
  594. .sec-guessLike__title::before {
  595. left: 0;
  596. }
  597. .sec-guessLike__title::after {
  598. left: 60%;
  599. }
  600. .sec-guessLike__article h5 {
  601. font-size: 1.1rem;
  602. }
  603. .sec-guessLike__article p {
  604. font-size: 14px;
  605. }
  606. .sec-guessLike__case p {
  607. font-size: 1.1rem;
  608. font-weight: 500;
  609. }
  610. .sec-guessLike__card {
  611. width: 100%;
  612. overflow: hidden;
  613. height: 26vh;
  614. position: relative;
  615. background-position: center center;
  616. background-size: cover;
  617. background-repeat: no-repeat;
  618. }
  619. .sec-guessLike__card.special {
  620. height: 45vh;
  621. }
  622. .sec-guessLike__card__img {
  623. width: 100%;
  624. -webkit-transition: all .8s;
  625. transition: all .8s;
  626. }
  627. .sec-guessLike__card__txt {
  628. position: absolute;
  629. bottom: 1rem;
  630. left: 3rem;
  631. color: white;
  632. z-index: 2;
  633. font-size: 600;
  634. text-shadow: 1px 1px 2px gray;
  635. }
  636. .sec-guessLike__video__play {
  637. position: absolute;
  638. width: 2.5rem;
  639. left: 50%;
  640. top: 50%;
  641. -webkit-transform: translate(-50%, -50%);
  642. transform: translate(-50%, -50%);
  643. }
  644. .sec-05 {
  645. border-top: 1px solid #bbbbbb;
  646. padding-bottom: 2rem;
  647. }
  648. .sec-05 .container {
  649. margin: 0 auto;
  650. padding: 0 2rem;
  651. max-width: 1050px;
  652. width: 70%;
  653. }
  654. @media (max-width: 1100px) {
  655. .sec-05 .container {
  656. width: 90%;
  657. padding: 0 1rem;
  658. }
  659. }
  660. .sec-05__tabdiv {
  661. -webkit-box-sizing: content-box;
  662. box-sizing: content-box;
  663. -webkit-box-align: center;
  664. -ms-flex-align: center;
  665. align-items: center;
  666. -webkit-box-pack: justify;
  667. -ms-flex-pack: justify;
  668. justify-content: space-between;
  669. }
  670. .sec-05__tabdiv .more {
  671. padding-bottom: .4rem;
  672. }
  673. .sec-05__tabdiv .nav-item {
  674. position: relative;
  675. padding-right: 18px;
  676. padding-left: 18px;
  677. }
  678. .sec-05__tabdiv .nav-item::after {
  679. position: absolute;
  680. content: " ";
  681. width: 100%;
  682. height: 30%;
  683. left: 0;
  684. top: 35%;
  685. background-color: transparent;
  686. border-right: 1px solid #b3b3b3;
  687. z-index: -1;
  688. }
  689. .sec-05__tabdiv .nav-item:nth-of-type(3)::after {
  690. display: none;
  691. }
  692. .sec-05__tabdiv .nav-item-link {
  693. color: black;
  694. font-weight: 500;
  695. font-size: 1.6rem;
  696. border: none;
  697. position: relative;
  698. padding: 1.5rem 0;
  699. outline: none;
  700. }
  701. @media screen and (max-width: 385px) {
  702. .sec-05__tabdiv .nav-item-link {
  703. font-size: 1.1rem;
  704. }
  705. }
  706. .sec-05__tabdiv .nav-item-link:focus {
  707. outline: none !important;
  708. }
  709. .sec-05__tabdiv .nav-item-link.active {
  710. color: #EE7800;
  711. }
  712. .sec-05__tabdiv .nav-item-link::before {
  713. position: absolute;
  714. content: " ";
  715. width: 101%;
  716. height: 100%;
  717. left: -2px;
  718. top: 0px;
  719. background-color: transparent;
  720. border-top: 3px solid #EE7800;
  721. opacity: 0;
  722. }
  723. .sec-05__tabdiv .nav-item-link.active::before {
  724. opacity: 1;
  725. }
  726. .sec-05 .tab-pane {
  727. height: 100%;
  728. }
  729. .sec-05tab-content {
  730. height: 35vh;
  731. }
  732. .sec-05 .tabpar__card {
  733. margin: 3px;
  734. position: relative;
  735. font-size: 14px;
  736. cursor: pointer;
  737. }
  738. .sec-05 .tabpar__card__imgfr {
  739. width: 100%;
  740. height: 25vh;
  741. position: relative;
  742. background-position: center center;
  743. background-size: cover;
  744. background-repeat: no-repeat;
  745. }
  746. @media (max-width: 1100px) {
  747. .sec-05 .tabpar__card__imgfr {
  748. height: 20vh;
  749. }
  750. }
  751. .sec-05 .tabpar__card h5 {
  752. font-size: 1rem;
  753. }
  754. .sec-05 .tabpar__card p {
  755. font-size: .95rem;
  756. font-weight: 300;
  757. color: gray;
  758. }
  759. .sec-05 .tabpar__card__play {
  760. position: absolute;
  761. left: 50%;
  762. top: 50%;
  763. -webkit-transform: translate(-50%, -50%);
  764. transform: translate(-50%, -50%);
  765. width: 2.5rem;
  766. }
  767. .sec-05 .slick-prev {
  768. top: 40%;
  769. left: -2rem;
  770. z-index: 2;
  771. }
  772. .sec-05 .slick-next {
  773. top: 40%;
  774. right: -2rem;
  775. z-index: 2;
  776. }
  777. .sec-05 .slick-prev:before, .sec-05 .slick-next:before {
  778. display: none;
  779. }
  780. .sec-06 {
  781. padding: 2rem 0;
  782. }
  783. .sec-06 .container {
  784. margin: 0 auto;
  785. padding: 1rem 2rem;
  786. max-width: 1050px;
  787. width: 70%;
  788. }
  789. @media (max-width: 1100px) {
  790. .sec-06 .container {
  791. width: 90%;
  792. padding: 0 1rem;
  793. }
  794. }
  795. .sec-06__title h3 {
  796. display: inline-block;
  797. font-size: 1.6rem;
  798. padding-bottom: .5rem;
  799. border-bottom: 6px solid #EE7800;
  800. color: #535353;
  801. margin-bottom: 0;
  802. }
  803. .sec-06__video {
  804. width: 100%;
  805. position: relative;
  806. }
  807. .sec-06__video__imgfr {
  808. width: 100%;
  809. height: 34vh;
  810. background-position: center center;
  811. background-size: cover;
  812. background-repeat: no-repeat;
  813. }
  814. @media (max-width: 1100px) {
  815. .sec-06__video__imgfr {
  816. height: 25vh;
  817. }
  818. }
  819. .sec-06__video__play {
  820. position: absolute;
  821. left: 50%;
  822. top: 50%;
  823. width: 2.5rem;
  824. height: 2.5rem;
  825. z-index: 2;
  826. -webkit-transform: translate(-50%, -50%);
  827. transform: translate(-50%, -50%);
  828. }
  829. .sec-06__videotxt {
  830. width: 90%;
  831. margin: 0 auto;
  832. background-color: rgba(255, 255, 255, 0.842);
  833. -webkit-box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
  834. box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
  835. padding: .4rem .8rem;
  836. -webkit-transform: translateY(-20%);
  837. transform: translateY(-20%);
  838. font-weight: 600;
  839. font-size: 1.1rem;
  840. }
  841. .sec-06__btns {
  842. display: block;
  843. outline: none;
  844. border: none;
  845. padding: .4rem 1.2rem;
  846. width: 88%;
  847. margin: 0 auto;
  848. background-color: #ea068c;
  849. color: white;
  850. border-radius: 3px;
  851. -webkit-box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
  852. box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
  853. -webkit-transition: all .4s;
  854. transition: all .4s;
  855. text-decoration: none;
  856. }
  857. .sec-06__btns:hover {
  858. -webkit-transform: translate(2px, 2px);
  859. transform: translate(2px, 2px);
  860. color: white;
  861. }
  862. .sec-06__btns__txt {
  863. font-weight: 600;
  864. }
  865. .sec-06__btns:nth-of-type(2), .sec-06__btns:nth-of-type(3) {
  866. padding: 1rem 1.2rem;
  867. }
  868. .sec-06__card {
  869. width: 100%;
  870. }
  871. .sec-06__card:hover .sec-06__card__imgfr {
  872. -webkit-transform: scale(1.1);
  873. transform: scale(1.1);
  874. }
  875. .sec-06__card h5 {
  876. font-size: 1.1rem;
  877. margin-bottom: .3rem;
  878. }
  879. .sec-06__card p {
  880. font-size: .9rem;
  881. }
  882. .sec-06__card__outer {
  883. width: 100%;
  884. height: 48vh;
  885. overflow: hidden;
  886. }
  887. .sec-06__card__play {
  888. position: absolute;
  889. left: 50%;
  890. top: 50%;
  891. -webkit-transform: translate(-50%, -50%);
  892. transform: translate(-50%, -50%);
  893. width: 2.5rem;
  894. }
  895. .sec-06__card__imgfr {
  896. width: 100%;
  897. height: 48vh;
  898. background-position: center center;
  899. background-size: cover;
  900. background-repeat: no-repeat;
  901. -webkit-transition: all .5s;
  902. transition: all .5s;
  903. position: relative;
  904. }
  905. .sec-06 .slick-prev {
  906. top: 40%;
  907. left: .5rem;
  908. z-index: 2;
  909. }
  910. .sec-06 .slick-next {
  911. top: 40%;
  912. right: .5rem;
  913. z-index: 2;
  914. }
  915. .sec-06 .slick-prev:before, .sec-06 .slick-next:before {
  916. display: none;
  917. }
  918. .sec-07 {
  919. padding: 2rem 0;
  920. }
  921. .sec-07 .container {
  922. margin: 0 auto;
  923. padding: .8rem 1.2rem;
  924. max-width: 1050px;
  925. width: 70%;
  926. background-color: #F4F4F4;
  927. }
  928. @media (max-width: 1100px) {
  929. .sec-07 .container {
  930. width: 90%;
  931. padding: 0 1rem;
  932. }
  933. }
  934. .sec-07__slider {
  935. height: 100%;
  936. }
  937. .sec-07__slider .slide-item {
  938. height: 23vh;
  939. background-position: center center;
  940. background-size: contain;
  941. background-repeat: no-repeat;
  942. width: 100%;
  943. margin: 0 5px;
  944. cursor: pointer;
  945. }
  946. @media (max-width: 1100px) {
  947. .sec-07__slider .slide-item {
  948. height: 18vh;
  949. }
  950. }
  951. .sec-08 {
  952. padding-bottom: 2.5rem;
  953. }
  954. .sec-08 .container {
  955. margin: 0 auto;
  956. padding: 1rem 0rem;
  957. max-width: 1050px;
  958. width: 70%;
  959. }
  960. @media (max-width: 1100px) {
  961. .sec-08 .container {
  962. width: 90%;
  963. padding: 0 1rem;
  964. }
  965. }
  966. .sec-08__title {
  967. border-bottom: 6px solid #EE7800;
  968. color: #535353;
  969. }
  970. .sec-08__title h3 {
  971. font-size: 1.6rem;
  972. }
  973. .sec-08__slider {
  974. width: 100%;
  975. cursor: pointer;
  976. }
  977. .sec-08__imgfr {
  978. width: 100%;
  979. height: 28vh;
  980. background-position: center center;
  981. background-size: cover;
  982. background-repeat: no-repeat;
  983. position: relative;
  984. }
  985. @media (max-width: 1100px) {
  986. .sec-08__imgfr {
  987. height: 20vh;
  988. }
  989. }
  990. .sec-08__card h5 {
  991. font-size: 1rem;
  992. }
  993. .sec-08__card p {
  994. font-size: .9rem;
  995. }
  996. .sec-08__card__play {
  997. position: absolute;
  998. left: 50%;
  999. top: 50%;
  1000. -webkit-transform: translate(-50%, -50%);
  1001. transform: translate(-50%, -50%);
  1002. width: 2.5rem;
  1003. }
  1004. .sec-08__cardtxt {
  1005. font-size: 14px;
  1006. padding-right: .6rem;
  1007. }
  1008. .sec-08 .slick-prev {
  1009. top: 40%;
  1010. left: -2rem;
  1011. z-index: 2;
  1012. }
  1013. .sec-08 .slick-next {
  1014. top: 40%;
  1015. right: -2rem;
  1016. z-index: 2;
  1017. }
  1018. .sec-08 .slick-prev:before, .sec-08 .slick-next:before {
  1019. display: none;
  1020. }
  1021. .sec-09 {
  1022. background-color: #F4F4F4;
  1023. }
  1024. .sec-09 .container {
  1025. margin: 0 auto;
  1026. padding: 2rem 0rem;
  1027. max-width: 1050px;
  1028. width: 70%;
  1029. }
  1030. @media (max-width: 1100px) {
  1031. .sec-09 .container {
  1032. width: 90%;
  1033. padding: 0 1rem;
  1034. }
  1035. }
  1036. .sec-09__imgfr {
  1037. width: 100%;
  1038. height: 25vh;
  1039. background-position: center center;
  1040. background-size: cover;
  1041. background-repeat: no-repeat;
  1042. position: relative;
  1043. }
  1044. @media (max-width: 1100px) {
  1045. .sec-09__imgfr {
  1046. height: 20vh;
  1047. }
  1048. }
  1049. .sec-09__card {
  1050. margin: 5px;
  1051. text-align: center;
  1052. cursor: pointer;
  1053. }
  1054. .sec-09__card p {
  1055. font-size: 14px;
  1056. margin-top: .5rem;
  1057. }
  1058. .sec-09__card__play {
  1059. position: absolute;
  1060. right: .6rem;
  1061. bottom: .6rem;
  1062. width: 2.5rem;
  1063. }
  1064. .sec-09__title {
  1065. border-bottom: 6px solid #EE7800;
  1066. color: #535353;
  1067. }
  1068. .sec-09__title h3 {
  1069. font-size: 1.6rem;
  1070. }
  1071. .sec-09 .slick-prev {
  1072. top: 40%;
  1073. left: -2rem;
  1074. z-index: 2;
  1075. }
  1076. .sec-09 .slick-next {
  1077. top: 40%;
  1078. right: -2rem;
  1079. z-index: 2;
  1080. }
  1081. .sec-09 .slick-prev:before, .sec-09 .slick-next:before {
  1082. display: none;
  1083. }
  1084. .sec-10 {
  1085. padding: 2.5rem 0;
  1086. }
  1087. .sec-10 .container {
  1088. max-width: 1000px;
  1089. width: 70%;
  1090. }
  1091. @media (max-width: 1100px) {
  1092. .sec-10 .container {
  1093. width: 90%;
  1094. padding: 0 1rem;
  1095. }
  1096. }
  1097. .sec-10__titlebox {
  1098. border-bottom: 1px solid #4b4b4b;
  1099. display: -webkit-box;
  1100. display: -ms-flexbox;
  1101. display: flex;
  1102. -webkit-box-pack: center;
  1103. -ms-flex-pack: center;
  1104. justify-content: center;
  1105. }
  1106. .sec-10__titlebox-h2 {
  1107. margin: 0 auto;
  1108. font-size: 1.8rem;
  1109. font-weight: 600;
  1110. color: #535353;
  1111. padding: .8rem 0;
  1112. border-bottom: 6px solid #EE7800;
  1113. display: inline-block;
  1114. }
  1115. .sec-10__card {
  1116. cursor: pointer;
  1117. }
  1118. .sec-10__card h5 {
  1119. font-size: 1rem;
  1120. margin-bottom: .3rem;
  1121. }
  1122. .sec-10__card p {
  1123. font-size: .95rem;
  1124. font-weight: 300;
  1125. color: gray;
  1126. }
  1127. .sec-10__card-img {
  1128. width: 100%;
  1129. height: 25vh;
  1130. background-position: center center;
  1131. background-size: cover;
  1132. background-repeat: no-repeat;
  1133. position: relative;
  1134. }
  1135. @media (max-width: 1100px) {
  1136. .sec-10__card-img {
  1137. height: 20vh;
  1138. }
  1139. }
  1140. .sec-10__card__play {
  1141. position: absolute;
  1142. right: 1rem;
  1143. bottom: 1rem;
  1144. width: 2.5rem;
  1145. height: 2.5rem;
  1146. }
  1147. .sec-11 {
  1148. padding: 2.5rem 0;
  1149. padding-top: 1rem;
  1150. }
  1151. .sec-11 .container {
  1152. max-width: 1000px;
  1153. width: 70%;
  1154. }
  1155. @media (max-width: 1100px) {
  1156. .sec-11 .container {
  1157. width: 90%;
  1158. padding: 0 1rem;
  1159. }
  1160. }
  1161. .sec-11__titlebox {
  1162. border-bottom: 1px solid #4b4b4b;
  1163. display: -webkit-box;
  1164. display: -ms-flexbox;
  1165. display: flex;
  1166. -webkit-box-pack: center;
  1167. -ms-flex-pack: center;
  1168. justify-content: center;
  1169. }
  1170. .sec-11__titlebox-h2 {
  1171. margin: 0 auto;
  1172. font-size: 1.8rem;
  1173. font-weight: 600;
  1174. color: #535353;
  1175. padding: .8rem 0;
  1176. border-bottom: 6px solid #EE7800;
  1177. display: inline-block;
  1178. }
  1179. .sec-11__card {
  1180. cursor: pointer;
  1181. }
  1182. .sec-11__card h5 {
  1183. font-size: 1rem;
  1184. margin-bottom: .3rem;
  1185. }
  1186. .sec-11__card p {
  1187. font-size: .95rem;
  1188. font-weight: 300;
  1189. color: gray;
  1190. }
  1191. .sec-11__card-img {
  1192. width: 100%;
  1193. height: 25vh;
  1194. background-position: center center;
  1195. background-size: cover;
  1196. background-repeat: no-repeat;
  1197. position: relative;
  1198. }
  1199. @media (max-width: 1100px) {
  1200. .sec-11__card-img {
  1201. height: 20vh;
  1202. }
  1203. }
  1204. .sec-11__card__play {
  1205. position: absolute;
  1206. right: 1rem;
  1207. bottom: 1rem;
  1208. width: 2.5rem;
  1209. height: 2.5rem;
  1210. }
  1211. .footer {
  1212. background: #e9e9e9;
  1213. padding: 2.5rem 0;
  1214. }
  1215. @media (max-width: 1100px) {
  1216. .footer .container {
  1217. width: 98%;
  1218. max-width: 950px;
  1219. }
  1220. }
  1221. .footer__block {
  1222. padding: 1rem 3rem;
  1223. border-left: 1px solid #8f8f8f;
  1224. }
  1225. @media (max-width: 1100px) {
  1226. .footer__block {
  1227. padding: 1rem 1rem;
  1228. }
  1229. }
  1230. .footer__block-title {
  1231. font-size: 1.3rem;
  1232. margin-bottom: 1.5rem;
  1233. }
  1234. .footer__block-list {
  1235. padding-left: 0;
  1236. }
  1237. .footer__block:nth-of-type(1) {
  1238. border-left: none;
  1239. }
  1240. .footer__block:nth-of-type(2) {
  1241. padding: 1rem 4rem;
  1242. }
  1243. @media (max-width: 1100px) {
  1244. .footer__block:nth-of-type(2) {
  1245. padding: 1rem 1rem;
  1246. }
  1247. }
  1248. .footer__block-socials {
  1249. padding-left: 0;
  1250. display: -webkit-box;
  1251. display: -ms-flexbox;
  1252. display: flex;
  1253. -webkit-box-align: center;
  1254. -ms-flex-align: center;
  1255. align-items: center;
  1256. -webkit-box-pack: justify;
  1257. -ms-flex-pack: justify;
  1258. justify-content: space-between;
  1259. }
  1260. @media (max-width: 1100px) {
  1261. .footer__block-socials img {
  1262. width: 30px;
  1263. }
  1264. }
  1265. .footer__block .follows-fp {
  1266. text-decoration: none;
  1267. color: #696969;
  1268. font-size: .9rem;
  1269. display: -webkit-box;
  1270. display: -ms-flexbox;
  1271. display: flex;
  1272. -webkit-box-align: center;
  1273. -ms-flex-align: center;
  1274. align-items: center;
  1275. }
  1276. @media (max-width: 1100px) {
  1277. .footer__block .follows-fp {
  1278. font-size: .8rem;
  1279. }
  1280. }
  1281. .footer__block-phone p {
  1282. display: inline;
  1283. }
  1284. @media (max-width: 900px) {
  1285. .footer__block-phone p {
  1286. display: block;
  1287. }
  1288. }
  1289. .footer__block-phone p, .footer__block-phone span {
  1290. font-size: .9rem;
  1291. }
  1292. .footer__block-phone .text-phone {
  1293. color: #EE7800;
  1294. text-decoration: none;
  1295. }
  1296. .footer__block-links {
  1297. display: -webkit-box;
  1298. display: -ms-flexbox;
  1299. display: flex;
  1300. -webkit-box-align: center;
  1301. -ms-flex-align: center;
  1302. align-items: center;
  1303. margin-top: 1rem;
  1304. -webkit-box-pack: center;
  1305. -ms-flex-pack: center;
  1306. justify-content: center;
  1307. }
  1308. .footer__block-links-grp {
  1309. padding: .3rem;
  1310. border-left: 1px solid #b9b9b9;
  1311. }
  1312. .footer__block-links-grp:nth-of-type(1) {
  1313. border-left: none;
  1314. }
  1315. .footer__block-links-grp a {
  1316. display: block;
  1317. text-decoration: none;
  1318. color: #696969;
  1319. font-size: .9rem;
  1320. margin-bottom: .4rem;
  1321. }
  1322. @media (max-width: 1100px) {
  1323. .footer__block-links-grp a {
  1324. font-size: .8rem;
  1325. }
  1326. }
  1327. .footer__block-subscribe {
  1328. width: 100%;
  1329. margin-top: 1rem;
  1330. }
  1331. .footer__block-subscribe .subscribeBar {
  1332. font-size: .8rem;
  1333. width: 70%;
  1334. margin-left: 7%;
  1335. }
  1336. @media (max-width: 900px) {
  1337. .footer__block-subscribe .subscribeBar {
  1338. width: 75%;
  1339. margin-left: 3%;
  1340. font-size: .7rem;
  1341. }
  1342. }
  1343. .footer__block-subscribe .subscribeBtn {
  1344. width: 20%;
  1345. padding: .4rem .6rem;
  1346. padding-bottom: 9px;
  1347. border: none;
  1348. outline: none;
  1349. background-color: #292929;
  1350. color: white;
  1351. border-radius: 0 3px 3px 0;
  1352. margin-left: -.4rem;
  1353. }
  1354. @media (max-width: 900px) {
  1355. .footer__block-subscribe .subscribeBtn {
  1356. margin-left: -.3rem;
  1357. font-size: .8rem;
  1358. padding-top: 9px;
  1359. padding-bottom: 10px;
  1360. }
  1361. }
  1362. .footer__list-item {
  1363. display: -webkit-box;
  1364. display: -ms-flexbox;
  1365. display: flex;
  1366. -webkit-box-align: center;
  1367. -ms-flex-align: center;
  1368. align-items: center;
  1369. text-decoration: none;
  1370. margin-bottom: .5rem;
  1371. }
  1372. .footer__list-item p {
  1373. color: #696969;
  1374. font-size: .9rem;
  1375. font-weight: 300;
  1376. }
  1377. .footer__list-icon {
  1378. width: 30px;
  1379. display: -webkit-box;
  1380. display: -ms-flexbox;
  1381. display: flex;
  1382. -webkit-box-pack: center;
  1383. -ms-flex-pack: center;
  1384. justify-content: center;
  1385. margin-right: .3rem;
  1386. }
  1387. .footer .bottom-box {
  1388. padding: 1rem 0;
  1389. border-top: 1px solid #b9b9b9;
  1390. margin-top: 2.5rem;
  1391. }
  1392. #videoModal .modal-content {
  1393. background-color: transparent;
  1394. border: none;
  1395. width: -webkit-fit-content;
  1396. width: -moz-fit-content;
  1397. width: fit-content;
  1398. }
  1399. #videoModal .modal-dialog {
  1400. max-width: 700px;
  1401. }
  1402. .morelink {
  1403. text-decoration: none;
  1404. color: #EE7800;
  1405. font-weight: 700;
  1406. }
  1407. .morelink:hover {
  1408. color: #EE7800;
  1409. }
  1410. .fixed-btn {
  1411. position: fixed;
  1412. right: 15px;
  1413. bottom: 2rem;
  1414. }
  1415. @media screen and (max-width: 576px) {
  1416. .fixed-btn {
  1417. bottom: 8rem;
  1418. }
  1419. }
  1420. .fixed-btn .btn-gotop, .fixed-btn .btn-login, .fixed-btn .btn-favor,
  1421. .fixed-btn .btn-match {
  1422. cursor: pointer;
  1423. padding: 1.2rem .8rem;
  1424. background-color: rgba(255, 255, 255, 0.897);
  1425. display: -webkit-box;
  1426. display: -ms-flexbox;
  1427. display: flex;
  1428. -webkit-box-align: center;
  1429. -ms-flex-align: center;
  1430. align-items: center;
  1431. -webkit-box-pack: center;
  1432. -ms-flex-pack: center;
  1433. justify-content: center;
  1434. 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);
  1435. -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);
  1436. -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);
  1437. }
  1438. .fixed-btn .btn-match {
  1439. height: 57px;
  1440. padding: .2rem;
  1441. background-color: white;
  1442. font-size: 1em;
  1443. word-spacing: 5px;
  1444. width: 57px;
  1445. text-align: center;
  1446. position: relative;
  1447. }
  1448. .fixed-btn .btn-match::after {
  1449. content: "快速媒合設計師";
  1450. background-color: #EE7800;
  1451. color: white;
  1452. width: 180%;
  1453. right: -5px;
  1454. top: -15px;
  1455. position: absolute;
  1456. font-size: .8rem;
  1457. padding: 1.5px 3px;
  1458. opacity: 0;
  1459. -webkit-transition: all .4s;
  1460. transition: all .4s;
  1461. }
  1462. .fixed-btn .btn-match__back {
  1463. width: 35px;
  1464. height: 35px;
  1465. background-image: url("../images/match_icon_uncover.png");
  1466. background-position: center;
  1467. background-size: contain;
  1468. -webkit-transition: all .4s;
  1469. transition: all .4s;
  1470. }
  1471. .fixed-btn .btn-match:hover .btn-match__back {
  1472. background-image: url("../images/match_icon.png");
  1473. }
  1474. .fixed-btn .btn-match:hover::after {
  1475. opacity: 1;
  1476. top: -25px;
  1477. }
  1478. #matchModal .modal-content {
  1479. position: relative;
  1480. }
  1481. #matchModal .modal-content .btn-close {
  1482. position: absolute;
  1483. right: 1rem;
  1484. top: 1rem;
  1485. }
  1486. .match__next {
  1487. outline: none;
  1488. border: none;
  1489. background-color: #EE7800;
  1490. border-radius: .3rem;
  1491. padding-top: .5rem;
  1492. padding-bottom: .5rem;
  1493. color: white;
  1494. }
  1495. .match__next2 {
  1496. outline: none;
  1497. border: none;
  1498. background-color: #EE7800;
  1499. border-radius: .3rem;
  1500. padding-top: .5rem;
  1501. padding-bottom: .5rem;
  1502. color: white;
  1503. }
  1504. .sec-match {
  1505. position: relative;
  1506. }
  1507. @media screen and (min-width: 576px) {
  1508. .sec-match .container__match {
  1509. max-width: 700px;
  1510. }
  1511. }
  1512. @media screen and (min-width: 768px) {
  1513. .sec-match .container__match {
  1514. max-width: 880px;
  1515. }
  1516. }
  1517. @media screen and (min-width: 992px) {
  1518. .sec-match .container__match {
  1519. max-width: 1100px;
  1520. }
  1521. }
  1522. @media screen and (min-width: 1100px) {
  1523. .sec-match .container__match {
  1524. max-width: 1300px;
  1525. }
  1526. }
  1527. .sec-match p {
  1528. color: #707070;
  1529. }
  1530. .sec-match__imgfr {
  1531. width: 100%;
  1532. height: 14rem;
  1533. background-position: center;
  1534. background-size: cover;
  1535. cursor: pointer;
  1536. -webkit-transition: all .4s;
  1537. transition: all .4s;
  1538. }
  1539. @media screen and (max-width: 1025px) {
  1540. .sec-match__imgfr {
  1541. height: 10rem;
  1542. }
  1543. }
  1544. .sec-match__imgfr:hover {
  1545. -webkit-transform: scale(1.1);
  1546. transform: scale(1.1);
  1547. }
  1548. .sec-match__designer {
  1549. width: 12rem;
  1550. height: 12rem;
  1551. background-position: center;
  1552. background-size: cover;
  1553. border-radius: 50%;
  1554. }
  1555. @media screen and (max-width: 1025px) {
  1556. .sec-match__designer {
  1557. width: 10rem;
  1558. height: 10rem;
  1559. }
  1560. }
  1561. @media screen and (max-width: 1025px) {
  1562. .sec-match__like {
  1563. max-width: 9rem;
  1564. }
  1565. }
  1566. @media screen and (max-width: 1025px) {
  1567. .sec-match__consult {
  1568. max-width: 9rem;
  1569. }
  1570. }
  1571. .sec-match .btn-match {
  1572. outline: none;
  1573. border: none;
  1574. color: #EE7800;
  1575. border: 1px solid #EE7800;
  1576. background-color: transparent;
  1577. border-radius: 10px;
  1578. padding: .3rem .6rem;
  1579. -webkit-transition: all .3s;
  1580. transition: all .3s;
  1581. }
  1582. .sec-match .btn-match:hover {
  1583. background-color: #EE7800;
  1584. color: white;
  1585. }
  1586. .sec-match .container__row {
  1587. border-bottom: 1px solid #B2B2B2;
  1588. }
  1589. .sec-match .container__row:last-of-type {
  1590. border-bottom: none;
  1591. }
  1592. .sec-match .close {
  1593. position: absolute;
  1594. right: 3%;
  1595. top: 0%;
  1596. cursor: pointer;
  1597. }
  1598. .sec-result {
  1599. padding: .5rem;
  1600. }
  1601. .sec-result p {
  1602. color: #707070;
  1603. }
  1604. .sec-result__imgfr {
  1605. width: 90%;
  1606. height: 18rem;
  1607. background-image: url(https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg);
  1608. background-position: center;
  1609. background-size: cover;
  1610. }
  1611. .sec-result__designer {
  1612. background-image: url(https://cloud.hhh.com.tw/upload/_hdesigner/img_path_611_20190318172644.jpg);
  1613. width: 6rem;
  1614. height: 6rem;
  1615. background-position: center;
  1616. background-size: cover;
  1617. border-radius: 50%;
  1618. }
  1619. .sec-result .btn-match {
  1620. outline: none;
  1621. border: none;
  1622. color: #EE7800;
  1623. border: 1px solid #EE7800;
  1624. background-color: transparent;
  1625. padding: .4rem .8rem;
  1626. -webkit-transition: all .3s;
  1627. transition: all .3s;
  1628. }
  1629. .sec-result .btn-match:hover {
  1630. background-color: #EE7800;
  1631. color: white;
  1632. }
  1633. .sec-result .container__row {
  1634. border: 1px solid #B2B2B2;
  1635. margin-bottom: 1rem;
  1636. }
  1637. .sec-result__consulting {
  1638. color: #707070;
  1639. }
  1640. .sec-result__num {
  1641. color: #EE7800;
  1642. }
  1643. .fixed_menu {
  1644. height: 78px;
  1645. position: fixed;
  1646. z-index: 4;
  1647. bottom: 0;
  1648. left: 0;
  1649. width: 100%;
  1650. background-color: #fff;
  1651. box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  1652. -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  1653. -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  1654. }
  1655. @media (min-width: 480px) {
  1656. .fixed_menu {
  1657. height: 50px;
  1658. }
  1659. }
  1660. @media (min-width: 480px) {
  1661. .fixed_menu .row {
  1662. height: 50px;
  1663. }
  1664. }
  1665. @media (min-width: 480px) {
  1666. .fixed_menu__box {
  1667. width: 100%;
  1668. height: 100%;
  1669. }
  1670. }
  1671. .fixed_menu__box img:focus-visible {
  1672. outline: none;
  1673. }
  1674. @media (min-width: 480px) {
  1675. .fixed_menu__box img {
  1676. width: 100%;
  1677. height: 100%;
  1678. }
  1679. }
  1680. .sec-login-list {
  1681. background-color: #F3F3F3;
  1682. padding: 1rem;
  1683. padding-bottom: 1.4rem;
  1684. }
  1685. .sec-login-list hr {
  1686. background-color: #aaaaaa;
  1687. }
  1688. .sec-login-btns {
  1689. padding: 1rem;
  1690. background-color: white;
  1691. -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  1692. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  1693. }
  1694. #loginModal .btn-close {
  1695. position: absolute;
  1696. right: -2rem;
  1697. top: -2rem;
  1698. }
  1699. #favorModal .btn-close {
  1700. position: absolute;
  1701. right: -2rem;
  1702. top: -2rem;
  1703. }
  1704. #favorModal .sec-favor-title {
  1705. color: #4C4C4C;
  1706. font-size: 18px;
  1707. }
  1708. #favorModal .sec-favor-list {
  1709. background-color: #F3F3F3;
  1710. padding: 1rem;
  1711. padding-bottom: 1.4rem;
  1712. }
  1713. #favorModal .sec-favor-list hr {
  1714. background-color: #aaaaaa;
  1715. }
  1716. #favorModal .sec-favor-form .form-user, #favorModal .sec-favor-checklist .form-user {
  1717. width: 50%;
  1718. color: #707070;
  1719. font-size: 16px;
  1720. }
  1721. #favorModal .sec-favor-form .form-progressbar, #favorModal .sec-favor-checklist .form-progressbar {
  1722. width: 50%;
  1723. display: -webkit-box;
  1724. display: -ms-flexbox;
  1725. display: flex;
  1726. -webkit-box-pack: justify;
  1727. -ms-flex-pack: justify;
  1728. justify-content: space-between;
  1729. }
  1730. #favorModal .sec-favor-form .form-progressbar li, #favorModal .sec-favor-checklist .form-progressbar li {
  1731. width: 1.6rem;
  1732. height: 1.6rem;
  1733. border-radius: 50%;
  1734. border: 2px solid #D3D3D3;
  1735. line-height: 1.4rem;
  1736. display: -webkit-box;
  1737. display: -ms-flexbox;
  1738. display: flex;
  1739. -webkit-box-pack: center;
  1740. -ms-flex-pack: center;
  1741. justify-content: center;
  1742. position: relative;
  1743. color: #D3D3D3;
  1744. background-color: #F3F3F3;
  1745. z-index: 2;
  1746. }
  1747. #favorModal .sec-favor-form .form-progressbar li.active, #favorModal .sec-favor-checklist .form-progressbar li.active {
  1748. border: 2px solid #EE7800;
  1749. color: #EE7800;
  1750. }
  1751. #favorModal .sec-favor-form .form-progressbar li.active::before, #favorModal .sec-favor-checklist .form-progressbar li.active::before {
  1752. border-top: 2px solid #EE7800;
  1753. }
  1754. #favorModal .sec-favor-form .form-progressbar li::before, #favorModal .sec-favor-checklist .form-progressbar li::before {
  1755. position: absolute;
  1756. content: " ";
  1757. width: 4rem;
  1758. height: 0;
  1759. border-top: 2px dashed #D3D3D3;
  1760. right: 100%;
  1761. top: 50%;
  1762. z-index: 1;
  1763. }
  1764. #favorModal .sec-favor-form .form-progressbar li:nth-of-type(1)::before, #favorModal .sec-favor-checklist .form-progressbar li:nth-of-type(1)::before {
  1765. display: none;
  1766. }
  1767. #favorModal .sec-favor-form .form-step, #favorModal .sec-favor-checklist .form-step {
  1768. background-color: white;
  1769. border-radius: 3px;
  1770. padding: 1.5rem 1rem;
  1771. padding-bottom: 1.5rem;
  1772. -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  1773. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  1774. overflow: visible;
  1775. }
  1776. #favorModal .sec-favor-form .form-step .next, #favorModal .sec-favor-checklist .form-step .next {
  1777. padding: .6rem 5rem;
  1778. background-color: #EE7800;
  1779. border-radius: 3px;
  1780. color: white;
  1781. border: none;
  1782. outline: none;
  1783. }
  1784. #favorModal .sec-favor-form .form-step1, #favorModal .sec-favor-checklist .form-step1 {
  1785. display: block;
  1786. }
  1787. #favorModal .sec-favor-form .form-step2, #favorModal .sec-favor-checklist .form-step2 {
  1788. display: none;
  1789. }
  1790. #favorModal .sec-favor-form .form-step3, #favorModal .sec-favor-checklist .form-step3 {
  1791. display: none;
  1792. position: relative;
  1793. padding-bottom: 1.5rem;
  1794. }
  1795. #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"] {
  1796. display: none;
  1797. }
  1798. #favorModal .sec-favor-form .imgfr, #favorModal .sec-favor-checklist .imgfr {
  1799. background-position: center center;
  1800. background-size: cover;
  1801. background-repeat: no-repeat;
  1802. width: 100%;
  1803. height: 4.5rem;
  1804. border-radius: 8px;
  1805. border: 2px solid transparent;
  1806. }
  1807. #favorModal .sec-favor-form h4, #favorModal .sec-favor-checklist h4 {
  1808. color: #AAAAAA;
  1809. font-size: 15px;
  1810. font-weight: 400;
  1811. }
  1812. #favorModal .sec-favor-form input[type="checkbox"]:checked + .fs-label-info .imgfr, #favorModal .sec-favor-checklist input[type="checkbox"]:checked + .fs-label-info .imgfr {
  1813. border: 2px solid #EE7800;
  1814. }
  1815. #favorModal .sec-favor-form input[type="checkbox"]:checked + .fs-label-chbox, #favorModal .sec-favor-checklist input[type="checkbox"]:checked + .fs-label-chbox {
  1816. border: 1px solid #EE7800;
  1817. color: #EE7800;
  1818. }
  1819. #favorModal .sec-favor-form input[type="radio"]:checked + .fs-label-chbox, #favorModal .sec-favor-checklist input[type="radio"]:checked + .fs-label-chbox {
  1820. border: 1px solid #EE7800;
  1821. color: #EE7800;
  1822. }
  1823. #favorModal .sec-favor-form .step3-block, #favorModal .sec-favor-checklist .step3-block {
  1824. margin-bottom: 1rem;
  1825. }
  1826. #favorModal .sec-favor-form .step3-block:nth-of-type(3), #favorModal .sec-favor-checklist .step3-block:nth-of-type(3) {
  1827. margin-bottom: 0;
  1828. }
  1829. #favorModal .sec-favor-form .step3-block-title, #favorModal .sec-favor-checklist .step3-block-title {
  1830. color: #AAAAAA;
  1831. display: block;
  1832. margin-bottom: .5rem;
  1833. font-size: 1rem;
  1834. }
  1835. #favorModal .sec-favor-form .step3-block .radio, #favorModal .sec-favor-checklist .step3-block .radio {
  1836. display: inline-block;
  1837. padding: .25rem .7rem;
  1838. margin-right: .4rem;
  1839. border: 1px solid #707070;
  1840. border-radius: 2rem;
  1841. color: #797979;
  1842. margin-bottom: .5rem;
  1843. }
  1844. #favorModal .sec-favor-form .skip, #favorModal .sec-favor-checklist .skip {
  1845. padding: .3rem 1rem;
  1846. color: #AAAAAA;
  1847. border: none;
  1848. outline: none;
  1849. background-color: transparent;
  1850. }
  1851. #favorModal .sec-favor-form .btngrp, #favorModal .sec-favor-checklist .btngrp {
  1852. /* position: absolute;
  1853. left: 50%;
  1854. transform: translateX(-50%);
  1855. bottom: -6rem; */
  1856. display: -webkit-box;
  1857. display: -ms-flexbox;
  1858. display: flex;
  1859. -webkit-box-orient: vertical;
  1860. -webkit-box-direction: normal;
  1861. -ms-flex-direction: column;
  1862. flex-direction: column;
  1863. -webkit-box-align: center;
  1864. -ms-flex-align: center;
  1865. align-items: center;
  1866. }
  1867. #favorModal .sec-favor-form .btngrp .next, #favorModal .sec-favor-checklist .btngrp .next {
  1868. -webkit-transform: translateY(0rem);
  1869. transform: translateY(0rem);
  1870. }
  1871. #favorModal .sec-favor-checklist .form-user {
  1872. margin: 0 auto;
  1873. text-align: center;
  1874. margin-bottom: 1rem;
  1875. }
  1876. #favorModal .sec-favor-btns {
  1877. padding: 1rem;
  1878. background-color: white;
  1879. -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  1880. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  1881. }
  1882. .test {
  1883. position: relative;
  1884. }
  1885. .test .cover {
  1886. width: 100%;
  1887. position: absolute;
  1888. left: 0;
  1889. bottom: 0;
  1890. display: block;
  1891. background-color: white;
  1892. height: 100%;
  1893. }
  1894. .test .cover.slidein {
  1895. -webkit-animation: slidein 2s forwards;
  1896. animation: slidein 2s forwards;
  1897. }
  1898. .title_back {
  1899. display: block;
  1900. position: relative;
  1901. width: 10em;
  1902. height: 1.75em;
  1903. overflow: hidden;
  1904. }
  1905. .title_back .title {
  1906. position: absolute;
  1907. left: 0;
  1908. bottom: -1.75em;
  1909. display: block;
  1910. -webkit-transition: all 1s;
  1911. transition: all 1s;
  1912. }
  1913. .test_content {
  1914. opacity: 0;
  1915. }
  1916. .test_content.fadein {
  1917. -webkit-animation: fadein 2s forwards;
  1918. animation: fadein 2s forwards;
  1919. }
  1920. @-webkit-keyframes slidein {
  1921. 100% {
  1922. height: 0px;
  1923. }
  1924. }
  1925. @keyframes slidein {
  1926. 100% {
  1927. height: 0px;
  1928. }
  1929. }
  1930. @-webkit-keyframes fadein {
  1931. 100% {
  1932. opacity: 1;
  1933. }
  1934. }
  1935. @keyframes fadein {
  1936. 100% {
  1937. opacity: 1;
  1938. }
  1939. }
  1940. .last-step {
  1941. cursor: pointer;
  1942. }
  1943. .btn-call {
  1944. color: #EA068C;
  1945. padding: .6rem 1.5rem;
  1946. border: 1px solid #EA068C;
  1947. border-radius: 2rem;
  1948. background-color: transparent;
  1949. text-decoration: none;
  1950. }
  1951. .btn-call:hover {
  1952. color: #EA068C;
  1953. }
  1954. .small {
  1955. font-size: .7rem;
  1956. }
  1957. .container_match label, .container_match2 label {
  1958. margin-top: .4rem;
  1959. }
  1960. /*# sourceMappingURL=style.css.map */