main.css 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224
  1. body {
  2. font-family: 'Helvetica Neue';
  3. }
  4. .sec-00__slider {
  5. width: 100%;
  6. height: 100%;
  7. }
  8. .sec-00 .slide-item {
  9. height: 110px;
  10. background-position: center center;
  11. background-size: cover;
  12. background-repeat: no-repeat;
  13. }
  14. .navbar {
  15. 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);
  16. -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);
  17. -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);
  18. padding-top: 5px;
  19. padding-bottom: 5px;
  20. background-color: white !important;
  21. z-index: 99;
  22. }
  23. .navbar-toggler {
  24. padding-left: 0;
  25. border-color: transparent !important;
  26. }
  27. .navbar-toggler:focus {
  28. -webkit-box-shadow: none;
  29. box-shadow: none;
  30. }
  31. .navbar-toggler-icon {
  32. display: -webkit-box;
  33. display: -ms-flexbox;
  34. display: flex;
  35. justify-items: center;
  36. }
  37. .navbar-toggler-icon i {
  38. font-size: 25px;
  39. line-height: 30px;
  40. display: inline-block;
  41. }
  42. .navbar-search {
  43. padding-right: 2px;
  44. }
  45. .navbar-brand {
  46. font-size: 1.5rem;
  47. }
  48. .navbar-main.sticky {
  49. position: fixed;
  50. top: 0;
  51. width: 100%;
  52. }
  53. .navbar-main.sticky + .sec-01 {
  54. padding-top: 58px;
  55. }
  56. .sec-01 {
  57. padding: 0 1.5rem;
  58. margin-top: 1.5rem;
  59. }
  60. @media screen and (max-width: 385px) {
  61. .sec-01 {
  62. padding: 0 1rem;
  63. }
  64. }
  65. .sec-01 .col {
  66. text-align: center;
  67. vertical-align: bottom;
  68. display: -webkit-box;
  69. display: -ms-flexbox;
  70. display: flex;
  71. -webkit-box-align: end;
  72. -ms-flex-align: end;
  73. align-items: flex-end;
  74. -webkit-box-pack: center;
  75. -ms-flex-pack: center;
  76. justify-content: center;
  77. }
  78. @media screen and (max-width: 363px) {
  79. .sec-01 .col {
  80. padding: 0 .3rem;
  81. }
  82. .sec-01 .col.special {
  83. padding-left: 0;
  84. padding-right: .4rem;
  85. }
  86. }
  87. .sec-01 .col img {
  88. margin: 0 auto;
  89. margin-bottom: 0;
  90. vertical-align: baseline;
  91. }
  92. .sec-01 .slick-dots {
  93. width: 16%;
  94. margin: 0 auto;
  95. margin-top: 1.5rem;
  96. height: 5px;
  97. background-color: #d6d6d6;
  98. border-radius: 2rem;
  99. display: -webkit-box;
  100. display: -ms-flexbox;
  101. display: flex;
  102. position: static;
  103. }
  104. .sec-01 .slick-dots li {
  105. margin: 0px;
  106. width: 50%;
  107. }
  108. .sec-01 .slick-dots li.slick-active button {
  109. background-color: #EE7800;
  110. }
  111. .sec-01 .slick-dots li button {
  112. padding: 0;
  113. width: 100%;
  114. height: 5px;
  115. border-radius: 2rem;
  116. }
  117. .sec-01 .slick-dots li button::before {
  118. opacity: 0;
  119. }
  120. .sec-01 .slick-dotted.slick-slider {
  121. margin-bottom: 0;
  122. }
  123. .sec-02 {
  124. margin: 1.5rem 0;
  125. margin-bottom: 2rem;
  126. }
  127. .sec-02__slider {
  128. width: 100%;
  129. height: 100%;
  130. }
  131. .sec-02__slider .slide-item {
  132. height: 32vh;
  133. background-position: center center;
  134. background-size: cover;
  135. background-repeat: no-repeat;
  136. }
  137. .sec-03 {
  138. margin-bottom: .8rem;
  139. }
  140. .sec-03__tabdiv {
  141. -webkit-box-sizing: content-box;
  142. box-sizing: content-box;
  143. border-bottom: 3px solid rgba(221, 221, 221, 0.863);
  144. padding-left: .9rem;
  145. padding-right: .9rem;
  146. -webkit-box-align: center;
  147. -ms-flex-align: center;
  148. align-items: center;
  149. -webkit-box-pack: justify;
  150. -ms-flex-pack: justify;
  151. justify-content: space-between;
  152. }
  153. .sec-03__tabdiv .more {
  154. padding-bottom: .4rem;
  155. }
  156. .sec-03__tabdiv .nav-item {
  157. position: relative;
  158. padding-right: 6px;
  159. padding-left: 6px;
  160. }
  161. .sec-03__tabdiv .nav-item::after {
  162. position: absolute;
  163. content: " ";
  164. width: 100%;
  165. height: 60%;
  166. left: 0;
  167. top: 5px;
  168. background-color: transparent;
  169. border-right: 1px solid #b3b3b3;
  170. z-index: -1;
  171. }
  172. .sec-03__tabdiv .nav-item:nth-of-type(3)::after {
  173. display: none;
  174. }
  175. .sec-03__tabdiv .nav-item-link {
  176. color: black;
  177. font-weight: 400;
  178. font-size: 1.2rem;
  179. padding-bottom: .35rem;
  180. border: none;
  181. position: relative;
  182. }
  183. @media screen and (max-width: 385px) {
  184. .sec-03__tabdiv .nav-item-link {
  185. font-size: 1.1rem;
  186. }
  187. }
  188. .sec-03__tabdiv .nav-item-link.active {
  189. color: #EE7800;
  190. }
  191. .sec-03__tabdiv .nav-item-link::before {
  192. position: absolute;
  193. content: " ";
  194. width: 101%;
  195. height: 100%;
  196. left: -2px;
  197. top: 3px;
  198. border: none;
  199. background-color: transparent;
  200. border-bottom: 3px solid #EE7800;
  201. opacity: 0;
  202. }
  203. .sec-03__tabdiv .nav-item-link.active::before {
  204. opacity: 1;
  205. }
  206. .sec-03 .tab-content {
  207. padding: .8rem 0;
  208. }
  209. .sec-03 .tab-pane {
  210. height: 100%;
  211. }
  212. .sec-03 .tabpar {
  213. min-width: 100%;
  214. height: 100%;
  215. overflow-x: auto;
  216. display: -webkit-box;
  217. display: -ms-flexbox;
  218. display: flex;
  219. padding: 0 12px;
  220. -ms-overflow-style: none;
  221. /* IE and Edge */
  222. scrollbar-width: none;
  223. }
  224. .sec-03 .tabpar::-webkit-scrollbar {
  225. display: none;
  226. }
  227. .sec-03 .tabpar__card {
  228. margin: 3px;
  229. display: inline-block;
  230. min-width: 350px;
  231. font-size: 14px;
  232. }
  233. .sec-03 .tabpar__card__imgfr {
  234. width: 100%;
  235. height: 29vh;
  236. overflow: hidden;
  237. position: relative;
  238. background-position: center center;
  239. background-size: cover;
  240. background-repeat: no-repeat;
  241. }
  242. .sec-03 .tabpar__card__play {
  243. position: absolute;
  244. right: 1.2rem;
  245. bottom: 1rem;
  246. width: 2.5rem;
  247. }
  248. .sec-04 {
  249. background-color: #F4F4F4;
  250. padding: 1.5rem 1rem;
  251. }
  252. .sec-04 .card {
  253. -webkit-box-shadow: 1px 2px 8px 1px #d6d6d6;
  254. box-shadow: 1px 2px 8px 1px #d6d6d6;
  255. text-decoration: none;
  256. }
  257. .sec-04 .card-title {
  258. font-size: 1.1rem;
  259. line-height: 1.6rem;
  260. color: #4C4C4C;
  261. font-weight: 500;
  262. }
  263. .sec-04 .card__imgfr {
  264. width: 100%;
  265. }
  266. .sec-04 .card__imgfr img {
  267. width: 100%;
  268. height: 100%;
  269. }
  270. .sec-05__video {
  271. width: 100%;
  272. height: 30vh;
  273. position: relative;
  274. }
  275. .sec-05__video__play {
  276. position: absolute;
  277. left: 50%;
  278. top: 50%;
  279. -webkit-transform: translate(-50%, -50%);
  280. transform: translate(-50%, -50%);
  281. width: 3.5rem;
  282. height: 3.5rem;
  283. }
  284. .sec-05__video__imgfr {
  285. width: 100%;
  286. height: 30vh;
  287. background-position: center center;
  288. background-size: cover;
  289. background-repeat: no-repeat;
  290. }
  291. .sec-05 p {
  292. font-size: 14px;
  293. text-align: center;
  294. }
  295. .sec-06 .carousel {
  296. height: 32vh;
  297. }
  298. .sec-06 .carousel-inner {
  299. height: 100%;
  300. overflow: hidden;
  301. }
  302. .sec-06 .carousel-item {
  303. height: 100%;
  304. width: 100%;
  305. background-size: cover;
  306. background-repeat: no-repeat;
  307. background-position: center;
  308. }
  309. .sec-06 .carousel-control-next-icon, .sec-06 .carousel-control-prev-icon {
  310. width: 2.5rem;
  311. height: 2.5rem;
  312. }
  313. .sec-07__slider {
  314. width: 100%;
  315. }
  316. .sec-07__imgfr {
  317. width: 100%;
  318. height: 28vh;
  319. overflow: hidden;
  320. }
  321. .sec-07__imgfr img {
  322. width: 100%;
  323. }
  324. .sec-07__cardtxt {
  325. font-size: 14px;
  326. padding-right: .6rem;
  327. }
  328. .sec-07 .slick-dots {
  329. width: 15%;
  330. margin: 0 auto;
  331. margin-top: 1rem;
  332. height: 5px;
  333. background-color: #d6d6d6;
  334. border-radius: 1rem;
  335. display: -webkit-box;
  336. display: -ms-flexbox;
  337. display: flex;
  338. position: static;
  339. }
  340. .sec-07 .slick-dots li {
  341. margin: 0px;
  342. width: 33.33%;
  343. }
  344. .sec-07 .slick-dots li.slick-active button {
  345. background-color: #EE7800;
  346. }
  347. .sec-07 .slick-dots li button {
  348. padding: 0;
  349. width: 100%;
  350. height: 5px;
  351. border-radius: 1rem;
  352. }
  353. .sec-07 .slick-dots li button::before {
  354. opacity: 0;
  355. }
  356. .sec-07 .slick-dotted.slick-slider {
  357. margin-bottom: 0;
  358. }
  359. .sec-08 {
  360. padding: 1.5rem 0;
  361. }
  362. .sec-08__slider {
  363. height: 100%;
  364. }
  365. .sec-08__slider .slide-item {
  366. height: 24vh;
  367. background-position: center center;
  368. background-size: contain;
  369. background-repeat: no-repeat;
  370. }
  371. .sec-09 {
  372. margin-bottom: 1rem;
  373. }
  374. .sec-09__cardgrp {
  375. width: 100%;
  376. height: 28vh;
  377. box-shadow: 0 4px 2px -2px #d8d8d8;
  378. -webkit-box-shadow: 0 4px 2px -2px #d8d8d8;
  379. -moz-box-shadow: 0 4px 2px -2px #d8d8d8;
  380. }
  381. .sec-09__cardgrp::-webkit-scrollbar {
  382. display: none;
  383. }
  384. .sec-09__card {
  385. margin: 5px;
  386. text-align: center;
  387. }
  388. .sec-09__card__imgfr {
  389. width: 100%;
  390. position: relative;
  391. height: 20vh;
  392. background-position: center center;
  393. background-size: cover;
  394. background-repeat: no-repeat;
  395. }
  396. .sec-09__card__play {
  397. position: absolute;
  398. right: .8rem;
  399. bottom: .8rem;
  400. width: 2rem;
  401. }
  402. .sec-09__card p {
  403. font-size: 12.5px;
  404. margin-top: .5rem;
  405. }
  406. .sec-10 {
  407. margin-bottom: 1.5rem;
  408. /* &__imgfr {
  409. width: 100%;
  410. height: 100%;
  411. img{
  412. width: 100%;
  413. }
  414. } */
  415. }
  416. .sec-10__slider {
  417. width: 100%;
  418. }
  419. .sec-10__slider .slide-item {
  420. height: 28vh;
  421. background-position: center center;
  422. background-size: cover;
  423. background-repeat: no-repeat;
  424. position: relative;
  425. }
  426. .sec-10__card__play {
  427. position: absolute;
  428. right: 1rem;
  429. bottom: 1rem;
  430. width: 2.5rem;
  431. height: 2.5rem;
  432. }
  433. .sec-10__cardtxt {
  434. font-size: 14px;
  435. }
  436. .sec-11__slider {
  437. width: 100%;
  438. }
  439. .sec-11__slider .slide-item {
  440. height: 28vh;
  441. background-position: center center;
  442. background-size: cover;
  443. background-repeat: no-repeat;
  444. position: relative;
  445. }
  446. .sec-11__imgfr {
  447. width: 100%;
  448. height: 100%;
  449. }
  450. .sec-11__imgfr img {
  451. width: 100%;
  452. }
  453. .sec-11__card__play {
  454. position: absolute;
  455. right: 1rem;
  456. bottom: 1rem;
  457. width: 2.5rem;
  458. height: 2.5rem;
  459. }
  460. .sec-11__cardtxt {
  461. font-size: 14px;
  462. }
  463. .sec-guessLike__title {
  464. display: block;
  465. text-align: center;
  466. position: relative;
  467. }
  468. .sec-guessLike__title::before, .sec-guessLike__title::after {
  469. position: absolute;
  470. content: " ";
  471. width: 40%;
  472. height: 0rem;
  473. border-top: 1px solid black;
  474. top: 50%;
  475. }
  476. .sec-guessLike__title::before {
  477. left: 0;
  478. }
  479. .sec-guessLike__title::after {
  480. left: 60%;
  481. }
  482. .sec-guessLike__img {
  483. height: 14vh;
  484. background-position: center center;
  485. background-size: cover;
  486. background-repeat: no-repeat;
  487. background-image: url("https://images.hhh.com.tw/uploads/_hcase_orig/designer355_14_02.jpg");
  488. }
  489. .sec-guessLike__txt {
  490. font-size: 14px;
  491. }
  492. .morelink {
  493. text-decoration: none;
  494. color: #EE7800;
  495. }
  496. .morelink:hover {
  497. color: #EE7800;
  498. }
  499. .fixed_menu {
  500. height: 78px;
  501. position: fixed;
  502. z-index: 4;
  503. bottom: 0;
  504. left: 0;
  505. width: 100%;
  506. background-color: #fff;
  507. box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  508. -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  509. -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  510. }
  511. .sec-menu {
  512. display: none;
  513. z-index: 105;
  514. position: absolute;
  515. top: 0;
  516. left: 0;
  517. right: 0;
  518. font-size: 14px;
  519. }
  520. .sec-menu-block {
  521. padding-top: 61px;
  522. margin: 0;
  523. -webkit-transition: -webkit-transform .5s;
  524. transition: -webkit-transform .5s;
  525. transition: transform .5s;
  526. transition: transform .5s, -webkit-transform .5s;
  527. position: fixed;
  528. top: 0;
  529. left: -100%;
  530. right: 0;
  531. height: 100%;
  532. overflow-y: scroll;
  533. max-width: 100%;
  534. background-color: white;
  535. }
  536. .sec-menu-block.slidein {
  537. -webkit-animation: slidein 0.3s forwards;
  538. animation: slidein 0.3s forwards;
  539. }
  540. .sec-menu-block.slideout {
  541. -webkit-animation: slideout 0.3s forwards;
  542. animation: slideout 0.3s forwards;
  543. }
  544. .sec-menu-list {
  545. background: white;
  546. margin-bottom: 0;
  547. }
  548. .sec-menu-list .navbar-nav {
  549. padding: 0 2rem;
  550. width: 100%;
  551. }
  552. .sec-menu-list .navbar-nav .dropdown-menu {
  553. border: none;
  554. padding: 0;
  555. height: 0;
  556. opacity: 0;
  557. -webkit-transition: all 1s;
  558. transition: all 1s;
  559. }
  560. .sec-menu-list .navbar-nav .dropdown-menu.show {
  561. height: -webkit-fit-content;
  562. height: -moz-fit-content;
  563. height: fit-content;
  564. opacity: 1;
  565. }
  566. .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item {
  567. padding-left: 3rem;
  568. }
  569. .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:active, .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item.active, .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:focus {
  570. background-color: white;
  571. }
  572. .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:hover {
  573. background-color: white;
  574. }
  575. .sec-menu-list .navbar-nav .dropdown-menu .sub-menu .dropdown-item {
  576. padding-left: 6rem;
  577. }
  578. .sec-menu-list .nav-item {
  579. font-size: 17px;
  580. display: block;
  581. width: 100%;
  582. }
  583. .sec-menu-list .nav-link {
  584. padding-top: 11px;
  585. padding-bottom: 8px;
  586. color: #707070;
  587. position: relative;
  588. }
  589. .sec-menu-list .nav-link .link_div {
  590. width: 25px;
  591. }
  592. .sec-menu-list .nav-link a {
  593. color: #707070;
  594. text-decoration: none;
  595. }
  596. .sec-menu-list .nav-link.show i {
  597. -webkit-transform: rotate(-180deg);
  598. transform: rotate(-180deg);
  599. }
  600. .sec-menu-list .nav-link .expand {
  601. position: absolute;
  602. right: 10px;
  603. }
  604. .sec-menu-list .nav-link .expand i {
  605. font-size: 11px;
  606. color: #D3D3D3;
  607. -webkit-transition: all .5s;
  608. transition: all .5s;
  609. }
  610. .sec-menu-list .nav-link.text-main {
  611. color: #EE7800;
  612. }
  613. .sec-menu-list .sub-link .expand {
  614. position: absolute;
  615. right: 20px;
  616. top: 8px;
  617. width: 1.5rem;
  618. text-align: center;
  619. }
  620. .sec-menu-list .sub-menu {
  621. display: none;
  622. }
  623. .sec-menu-list .sub-menu.show {
  624. display: block;
  625. }
  626. .sec-menu-list hr {
  627. margin: 3px 0;
  628. background-color: #bbbbbb;
  629. }
  630. .sec-menu-follows {
  631. padding: 2rem 2.5rem;
  632. background-color: #e6e6e6ef;
  633. margin-top: -9px;
  634. }
  635. .sec-menu-follows-title {
  636. color: #797979;
  637. font-size: 14px;
  638. }
  639. .sec-menu-links {
  640. margin-bottom: 2.5rem;
  641. }
  642. .sec-menu-links a {
  643. color: #797979;
  644. text-decoration: none;
  645. display: inline-block;
  646. padding: 1px 0;
  647. border-bottom: 1px solid #acacac;
  648. margin: 0 .6rem;
  649. -ms-flex-wrap: nowrap;
  650. flex-wrap: nowrap;
  651. }
  652. @media screen and (max-width: 385px) {
  653. .sec-menu-links a {
  654. margin: 0 .4rem;
  655. }
  656. }
  657. .sec-menu .follows-fp {
  658. color: #797979;
  659. text-decoration: none;
  660. font-weight: 400;
  661. display: block;
  662. padding-left: .5rem;
  663. }
  664. .sec-menu .follows-fp:nth-of-type(1) {
  665. margin-bottom: .6rem;
  666. }
  667. .sec-menu .copyright {
  668. color: #797979;
  669. font-size: 13px;
  670. }
  671. @-webkit-keyframes slidein {
  672. 100% {
  673. left: 0;
  674. }
  675. }
  676. @keyframes slidein {
  677. 100% {
  678. left: 0;
  679. }
  680. }
  681. @-webkit-keyframes slideout {
  682. 100% {
  683. left: -100%;
  684. }
  685. }
  686. @keyframes slideout {
  687. 100% {
  688. left: -100%;
  689. }
  690. }
  691. .sec-search {
  692. display: none;
  693. z-index: 107;
  694. position: absolute;
  695. top: 0;
  696. left: 0;
  697. right: 0;
  698. font-size: 14px;
  699. }
  700. .sec-search-block {
  701. padding-top: 61px;
  702. margin: 0;
  703. position: fixed;
  704. top: 0;
  705. left: 0;
  706. right: 0;
  707. width: 100;
  708. height: 100%;
  709. overflow-y: scroll;
  710. background-color: rgba(0, 0, 0, 0.774);
  711. }
  712. .sec-search-list {
  713. background-color: #F3F3F3;
  714. padding: 1rem;
  715. padding-bottom: 1.4rem;
  716. }
  717. .sec-search-list hr {
  718. background-color: #aaaaaa;
  719. }
  720. .sec-search-form {
  721. width: 100%;
  722. }
  723. .sec-search .searchBar {
  724. font-size: 17px;
  725. padding: .5rem .3rem;
  726. display: inline-block;
  727. width: 88%;
  728. outline: none;
  729. border: 2px solid #EE7800;
  730. border-radius: 5px;
  731. }
  732. .sec-search .searchBtn {
  733. outline: none;
  734. border: none;
  735. background-color: transparent;
  736. display: inline-block;
  737. width: 10%;
  738. }
  739. .sec-search-hots {
  740. padding: 1rem;
  741. background-color: white;
  742. -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  743. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  744. }
  745. .sec-search-hots__title {
  746. color: #AAAAAA;
  747. font-size: 18px;
  748. font-weight: 400;
  749. padding-top: .5rem;
  750. }
  751. .sec-search-hots__link {
  752. display: inline-block;
  753. text-decoration: none;
  754. color: #797979;
  755. border: 1px solid #797979;
  756. border-radius: 3rem;
  757. padding: .3rem .5rem;
  758. margin-right: .8rem;
  759. margin-bottom: .8rem;
  760. }
  761. .sec-search-hots__link:hover {
  762. color: #797979;
  763. }
  764. .sec-login {
  765. display: none;
  766. z-index: 109;
  767. position: absolute;
  768. top: 0;
  769. left: 0;
  770. right: 0;
  771. font-size: 14px;
  772. }
  773. .sec-login-block {
  774. padding-top: 61px;
  775. margin: 0;
  776. position: fixed;
  777. top: 0;
  778. left: 0;
  779. right: 0;
  780. width: 100;
  781. height: 100%;
  782. overflow-y: hidden;
  783. background-color: #F3F3F3;
  784. }
  785. .sec-login-list {
  786. background-color: #F3F3F3;
  787. padding: 1rem;
  788. padding-bottom: 1.4rem;
  789. }
  790. .sec-login-list hr {
  791. background-color: #aaaaaa;
  792. }
  793. .sec-login-btns {
  794. padding: 1rem;
  795. background-color: white;
  796. -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  797. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  798. }
  799. .sec-favor {
  800. display: block;
  801. z-index: 111;
  802. position: absolute;
  803. top: 0;
  804. left: 0;
  805. right: 0;
  806. font-size: 14px;
  807. }
  808. .sec-favor-title {
  809. color: #4C4C4C;
  810. font-size: 18px;
  811. }
  812. .sec-favor-block {
  813. padding-top: 61px;
  814. margin: 0;
  815. position: fixed;
  816. top: 0;
  817. left: 0;
  818. right: 0;
  819. width: 100;
  820. height: 100%;
  821. overflow-y: auto;
  822. background-color: #F3F3F3;
  823. }
  824. .sec-favor-list {
  825. background-color: #F3F3F3;
  826. padding: 1rem;
  827. padding-bottom: 1.4rem;
  828. }
  829. .sec-favor-list hr {
  830. background-color: #aaaaaa;
  831. }
  832. .sec-favor-form .form-user, .sec-favor-checklist .form-user {
  833. width: 50%;
  834. color: #707070;
  835. font-size: 16px;
  836. }
  837. .sec-favor-form .form-progressbar, .sec-favor-checklist .form-progressbar {
  838. width: 50%;
  839. display: -webkit-box;
  840. display: -ms-flexbox;
  841. display: flex;
  842. -webkit-box-pack: justify;
  843. -ms-flex-pack: justify;
  844. justify-content: space-between;
  845. }
  846. .sec-favor-form .form-progressbar li, .sec-favor-checklist .form-progressbar li {
  847. width: 1.6rem;
  848. height: 1.6rem;
  849. border-radius: 50%;
  850. border: 2px solid #D3D3D3;
  851. line-height: 1.4rem;
  852. display: -webkit-box;
  853. display: -ms-flexbox;
  854. display: flex;
  855. -webkit-box-pack: center;
  856. -ms-flex-pack: center;
  857. justify-content: center;
  858. position: relative;
  859. color: #D3D3D3;
  860. background-color: #F3F3F3;
  861. z-index: 2;
  862. }
  863. .sec-favor-form .form-progressbar li.active, .sec-favor-checklist .form-progressbar li.active {
  864. border: 2px solid #EE7800;
  865. color: #EE7800;
  866. }
  867. .sec-favor-form .form-progressbar li.active::before, .sec-favor-checklist .form-progressbar li.active::before {
  868. border-top: 2px solid #EE7800;
  869. }
  870. .sec-favor-form .form-progressbar li::before, .sec-favor-checklist .form-progressbar li::before {
  871. position: absolute;
  872. content: " ";
  873. width: 4rem;
  874. height: 0;
  875. border-top: 2px dashed #D3D3D3;
  876. right: 100%;
  877. top: 50%;
  878. z-index: 1;
  879. }
  880. .sec-favor-form .form-progressbar li:nth-of-type(1)::before, .sec-favor-checklist .form-progressbar li:nth-of-type(1)::before {
  881. display: none;
  882. }
  883. .sec-favor-form .form-step, .sec-favor-checklist .form-step {
  884. background-color: white;
  885. border-radius: 3px;
  886. padding: 1.5rem 1rem;
  887. padding-bottom: 1.5rem;
  888. -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  889. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  890. overflow: visible;
  891. }
  892. .sec-favor-form .form-step .next, .sec-favor-checklist .form-step .next {
  893. padding: .6rem 5rem;
  894. background-color: #EE7800;
  895. border-radius: 3px;
  896. color: white;
  897. border: none;
  898. outline: none;
  899. }
  900. .sec-favor-form .form-step1, .sec-favor-checklist .form-step1 {
  901. display: block;
  902. }
  903. .sec-favor-form .form-step2, .sec-favor-checklist .form-step2 {
  904. display: none;
  905. }
  906. .sec-favor-form .form-step3, .sec-favor-checklist .form-step3 {
  907. display: none;
  908. position: relative;
  909. padding-bottom: 1.5rem;
  910. }
  911. .sec-favor-form input[type="checkbox"], .sec-favor-form input[type="radio"], .sec-favor-checklist input[type="checkbox"], .sec-favor-checklist input[type="radio"] {
  912. display: none;
  913. }
  914. .sec-favor-form .imgfr, .sec-favor-checklist .imgfr {
  915. background-image: url("../images/2_2.webp");
  916. background-position: center center;
  917. background-size: cover;
  918. background-repeat: no-repeat;
  919. width: 100%;
  920. height: 4.5rem;
  921. border-radius: 8px;
  922. border: 2px solid transparent;
  923. }
  924. .sec-favor-form h4, .sec-favor-checklist h4 {
  925. color: #AAAAAA;
  926. font-size: 15px;
  927. font-weight: 400;
  928. }
  929. .sec-favor-form input[type="checkbox"]:checked + .fs-label-info .imgfr, .sec-favor-checklist input[type="checkbox"]:checked + .fs-label-info .imgfr {
  930. border: 2px solid #EE7800;
  931. }
  932. .sec-favor-form input[type="checkbox"]:checked + .fs-label-chbox, .sec-favor-checklist input[type="checkbox"]:checked + .fs-label-chbox {
  933. border: 1px solid #EE7800;
  934. color: #EE7800;
  935. }
  936. .sec-favor-form input[type="radio"]:checked + .fs-label-chbox, .sec-favor-checklist input[type="radio"]:checked + .fs-label-chbox {
  937. border: 1px solid #EE7800;
  938. color: #EE7800;
  939. }
  940. .sec-favor-form .step3-block, .sec-favor-checklist .step3-block {
  941. margin-bottom: 1rem;
  942. }
  943. .sec-favor-form .step3-block:nth-of-type(3), .sec-favor-checklist .step3-block:nth-of-type(3) {
  944. margin-bottom: 0;
  945. }
  946. .sec-favor-form .step3-block-title, .sec-favor-checklist .step3-block-title {
  947. color: #AAAAAA;
  948. display: block;
  949. margin-bottom: .5rem;
  950. font-size: 1rem;
  951. }
  952. .sec-favor-form .step3-block .radio, .sec-favor-checklist .step3-block .radio {
  953. display: inline-block;
  954. padding: .25rem .7rem;
  955. margin-right: .4rem;
  956. border: 1px solid #707070;
  957. border-radius: 2rem;
  958. color: #797979;
  959. margin-bottom: .5rem;
  960. }
  961. .sec-favor-form .skip, .sec-favor-checklist .skip {
  962. padding: .3rem 1rem;
  963. color: #AAAAAA;
  964. border: none;
  965. outline: none;
  966. background-color: transparent;
  967. }
  968. .sec-favor-form .btngrp, .sec-favor-checklist .btngrp {
  969. /* position: absolute;
  970. left: 50%;
  971. transform: translateX(-50%);
  972. bottom: -6rem; */
  973. display: -webkit-box;
  974. display: -ms-flexbox;
  975. display: flex;
  976. -webkit-box-orient: vertical;
  977. -webkit-box-direction: normal;
  978. -ms-flex-direction: column;
  979. flex-direction: column;
  980. -webkit-box-align: center;
  981. -ms-flex-align: center;
  982. align-items: center;
  983. }
  984. .sec-favor-form .btngrp .next, .sec-favor-checklist .btngrp .next {
  985. -webkit-transform: translateY(0rem);
  986. transform: translateY(0rem);
  987. }
  988. .sec-favor-checklist .form-user {
  989. margin: 0 auto;
  990. text-align: center;
  991. margin-bottom: 1rem;
  992. }
  993. .sec-favor-btns {
  994. padding: 1rem;
  995. background-color: white;
  996. -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  997. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  998. }
  999. .text-main {
  1000. color: #EE7800;
  1001. }
  1002. .text-phone {
  1003. color: #EA068C;
  1004. text-decoration: none;
  1005. }
  1006. #videoModal .modal-content {
  1007. background-color: transparent;
  1008. border: none;
  1009. height: 30vh;
  1010. }
  1011. #videoModal .modal-content .modal-body {
  1012. width: 100%;
  1013. height: 100%;
  1014. }
  1015. #videoModal .modal-content iframe {
  1016. width: 100%;
  1017. height: 100%;
  1018. }
  1019. .fixed-btn {
  1020. position: fixed;
  1021. right: 15px;
  1022. bottom: 8rem;
  1023. }
  1024. .fixed-btn .btn-gotop {
  1025. padding: 1.2rem .8rem;
  1026. background-color: rgba(255, 255, 255, 0.897);
  1027. display: -webkit-box;
  1028. display: -ms-flexbox;
  1029. display: flex;
  1030. -webkit-box-align: center;
  1031. -ms-flex-align: center;
  1032. align-items: center;
  1033. 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);
  1034. -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);
  1035. -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);
  1036. }
  1037. /*# sourceMappingURL=main.css.map */