style.css 34 KB

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