style.scss 38 KB

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