main.css 21 KB

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