main.css 21 KB

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