style.css 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746
  1. body {
  2. font-family: 'Helvetica Neue'; }
  3. .sec-00__slider {
  4. width: 100%;
  5. height: 100%; }
  6. .sec-00__slider-1, .sec-00__slider-2, .sec-00__slider-3, .sec-00__slider-4, .sec-00__slider-5 {
  7. height: 110px;
  8. background-position: center center;
  9. background-size: cover;
  10. background-repeat: no-repeat; }
  11. .navbar {
  12. 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);
  13. -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);
  14. -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);
  15. padding-top: 5px;
  16. padding-bottom: 5px;
  17. background-color: white !important;
  18. z-index: 99; }
  19. .navbar-toggler {
  20. padding-left: 0;
  21. border-color: transparent !important; }
  22. .navbar-toggler:focus {
  23. box-shadow: none; }
  24. .navbar-toggler-icon {
  25. display: flex;
  26. justify-items: center; }
  27. .navbar-toggler-icon i {
  28. font-size: 25px;
  29. line-height: 30px;
  30. display: inline-block; }
  31. .navbar-search {
  32. padding-right: 2px; }
  33. .navbar-brand {
  34. font-size: 1.5rem; }
  35. .navbar-main.sticky {
  36. position: fixed;
  37. top: 0;
  38. width: 100%; }
  39. .navbar-main.sticky + .sec-01 {
  40. padding-top: 68px; }
  41. .sec-01 {
  42. padding: 0 1.5rem;
  43. margin-top: 1.5rem; }
  44. @media screen and (max-width: 385px) {
  45. .sec-01 {
  46. padding: 0 1rem; } }
  47. .sec-01 .col {
  48. text-align: center;
  49. vertical-align: bottom;
  50. display: flex;
  51. align-items: flex-end;
  52. justify-content: center; }
  53. @media screen and (max-width: 385px) {
  54. .sec-01 .col {
  55. /* padding: 0 .3rem;
  56. &.special {
  57. padding-left: 0;
  58. } */ } }
  59. .sec-01 .col img {
  60. margin: 0 auto;
  61. margin-bottom: 0;
  62. vertical-align: baseline; }
  63. .sec-01 .slick-dots {
  64. width: 16%;
  65. margin: 0 auto;
  66. margin-top: 1.5rem;
  67. height: 5px;
  68. background-color: #d6d6d6;
  69. border-radius: 2rem;
  70. display: flex;
  71. position: static; }
  72. .sec-01 .slick-dots li {
  73. margin: 0px;
  74. width: 50%; }
  75. .sec-01 .slick-dots li.slick-active button {
  76. background-color: #EE7800; }
  77. .sec-01 .slick-dots li button {
  78. padding: 0;
  79. width: 100%;
  80. height: 5px;
  81. border-radius: 2rem; }
  82. .sec-01 .slick-dots li button::before {
  83. opacity: 0; }
  84. .sec-01 .slick-dotted.slick-slider {
  85. margin-bottom: 0; }
  86. .sec-02 {
  87. margin: 1.5rem 0;
  88. margin-bottom: 2rem; }
  89. .sec-02__slider {
  90. width: 100%;
  91. height: 100%; }
  92. .sec-02__slider-1, .sec-02__slider-2, .sec-02__slider-3, .sec-02__slider-4, .sec-02__slider-5, .sec-02__slider-6 {
  93. height: 32vh;
  94. background-position: center center;
  95. background-size: cover;
  96. background-repeat: no-repeat; }
  97. .sec-03 {
  98. margin-bottom: .8rem; }
  99. .sec-03__tabdiv {
  100. box-sizing: content-box;
  101. border-bottom: 3px solid rgba(221, 221, 221, 0.863);
  102. padding-left: .9rem;
  103. padding-right: .9rem;
  104. align-items: center;
  105. justify-content: space-between; }
  106. .sec-03__tabdiv .more {
  107. padding-bottom: .4rem; }
  108. .sec-03__tabdiv .nav-item {
  109. position: relative;
  110. padding-right: 6px;
  111. padding-left: 6px; }
  112. .sec-03__tabdiv .nav-item::after {
  113. position: absolute;
  114. content: " ";
  115. width: 100%;
  116. height: 60%;
  117. left: 0;
  118. top: 5px;
  119. background-color: transparent;
  120. border-right: 1px solid #b3b3b3;
  121. z-index: -1; }
  122. .sec-03__tabdiv .nav-item:nth-of-type(3)::after {
  123. display: none; }
  124. .sec-03__tabdiv .nav-item-link {
  125. color: black;
  126. font-weight: 400;
  127. font-size: 1.2rem;
  128. padding-bottom: .35rem;
  129. border: none;
  130. position: relative; }
  131. @media screen and (max-width: 385px) {
  132. .sec-03__tabdiv .nav-item-link {
  133. font-size: 1.1rem; } }
  134. .sec-03__tabdiv .nav-item-link.active {
  135. color: #EE7800; }
  136. .sec-03__tabdiv .nav-item-link::before {
  137. position: absolute;
  138. content: " ";
  139. width: 101%;
  140. height: 100%;
  141. left: -2px;
  142. top: 3px;
  143. background-color: transparent;
  144. border-bottom: 3px solid #EE7800;
  145. opacity: 0; }
  146. .sec-03__tabdiv .nav-item-link.active::before {
  147. opacity: 1; }
  148. .sec-03 .tab-content {
  149. padding: .8rem 0; }
  150. .sec-03 .tab-pane {
  151. height: 100%; }
  152. .sec-03 .tabpar {
  153. min-width: 100%;
  154. height: 100%;
  155. overflow-x: auto;
  156. display: flex;
  157. padding: 0 12px;
  158. -ms-overflow-style: none;
  159. /* IE and Edge */
  160. scrollbar-width: none; }
  161. .sec-03 .tabpar::-webkit-scrollbar {
  162. display: none; }
  163. .sec-03 .tabpar__card {
  164. margin: 3px;
  165. display: inline-block;
  166. min-width: 340px;
  167. position: relative;
  168. font-size: 14px; }
  169. .sec-03 .tabpar__card__imgfr {
  170. width: 100%;
  171. height: 28vh;
  172. overflow: hidden; }
  173. .sec-03 .tabpar__card__img {
  174. width: 100%;
  175. height: 100%; }
  176. .sec-03 .tabpar__card__play {
  177. position: absolute;
  178. right: 1rem;
  179. bottom: 5rem;
  180. width: 2.5rem; }
  181. .sec-04 {
  182. background-color: #F4F4F4;
  183. padding: 1.5rem 1rem; }
  184. .sec-04 .card {
  185. box-shadow: 1px 2px 8px 1px #d6d6d6;
  186. text-decoration: none; }
  187. .sec-04 .card-title {
  188. font-size: 1.1rem;
  189. line-height: 1.6rem;
  190. color: #4C4C4C;
  191. font-weight: 500; }
  192. .sec-04 .card__imgfr {
  193. width: 100%; }
  194. .sec-04 .card__imgfr img {
  195. width: 100%;
  196. height: 100%; }
  197. .sec-05__video {
  198. width: 100%;
  199. height: 32vh;
  200. position: relative; }
  201. .sec-05__video__play {
  202. position: absolute;
  203. left: 50%;
  204. top: 50%;
  205. transform: translate(-50%, -50%);
  206. width: 3.5rem;
  207. height: 3.5rem; }
  208. .sec-05__video__img {
  209. width: 100%;
  210. height: 100%; }
  211. .sec-05 p {
  212. font-size: 14px;
  213. text-align: center; }
  214. .sec-06 .carousel {
  215. height: 32vh; }
  216. .sec-06 .carousel-inner {
  217. height: 100%;
  218. overflow: hidden; }
  219. .sec-06 .carousel-item {
  220. height: 100%;
  221. width: 100%;
  222. background-size: cover;
  223. background-repeat: no-repeat;
  224. background-position: center; }
  225. .sec-06 .carousel-control-next-icon, .sec-06 .carousel-control-prev-icon {
  226. width: 2.5rem;
  227. height: 2.5rem; }
  228. .sec-07__slider {
  229. width: 100%; }
  230. .sec-07__imgfr {
  231. width: 100%;
  232. height: 28vh;
  233. overflow: hidden; }
  234. .sec-07__imgfr img {
  235. width: 100%; }
  236. .sec-07__cardtxt {
  237. font-size: 14px;
  238. padding-right: .6rem; }
  239. .sec-07 .slick-dots {
  240. width: 15%;
  241. margin: 0 auto;
  242. margin-top: 1.5rem;
  243. height: 5px;
  244. background-color: #d6d6d6;
  245. border-radius: 1rem;
  246. display: flex;
  247. position: static; }
  248. .sec-07 .slick-dots li {
  249. margin: 0px;
  250. width: 33.33%; }
  251. .sec-07 .slick-dots li.slick-active button {
  252. background-color: #EE7800; }
  253. .sec-07 .slick-dots li button {
  254. padding: 0;
  255. width: 100%;
  256. height: 5px;
  257. border-radius: 1rem; }
  258. .sec-07 .slick-dots li button::before {
  259. opacity: 0; }
  260. .sec-07 .slick-dotted.slick-slider {
  261. margin-bottom: 0; }
  262. .sec-08__slider {
  263. height: 100%; }
  264. .sec-08__slider-1, .sec-08__slider-2, .sec-08__slider-3 {
  265. height: 28vh;
  266. background-position: center center;
  267. background-size: contain;
  268. background-repeat: no-repeat; }
  269. .sec-09 {
  270. margin-bottom: 1rem; }
  271. .sec-09__cardgrp {
  272. min-width: 100%;
  273. height: 20vh;
  274. overflow-x: auto;
  275. display: flex;
  276. box-shadow: 0 4px 2px -2px #d8d8d8;
  277. -webkit-box-shadow: 0 4px 2px -2px #d8d8d8;
  278. -moz-box-shadow: 0 4px 2px -2px #d8d8d8;
  279. -ms-overflow-style: none;
  280. /* IE and Edge */
  281. scrollbar-width: none; }
  282. .sec-09__cardgrp::-webkit-scrollbar {
  283. display: none; }
  284. .sec-09__card {
  285. margin: 5px;
  286. display: inline-block;
  287. min-width: 35vw; }
  288. .sec-09__card__imgfr {
  289. width: 100%; }
  290. .sec-09__card__imgfr img {
  291. width: 100%;
  292. height: 100%; }
  293. .sec-09__card p {
  294. font-size: 12.5px;
  295. margin-top: .5rem; }
  296. .sec-10 {
  297. margin-bottom: 1.5rem;
  298. /* &__imgfr {
  299. width: 100%;
  300. height: 100%;
  301. img{
  302. width: 100%;
  303. }
  304. } */ }
  305. .sec-10__slider {
  306. width: 100%; }
  307. .sec-10__slider-1, .sec-10__slider-2, .sec-10__slider-3, .sec-10__slider-4, .sec-10__slider-5, .sec-10__slider-6 {
  308. height: 28vh;
  309. background-position: center center;
  310. background-size: cover;
  311. background-repeat: no-repeat; }
  312. .sec-10__cardtxt {
  313. font-size: 14px; }
  314. .sec-11__slider {
  315. width: 100%; }
  316. .sec-11__slider-1, .sec-11__slider-2, .sec-11__slider-3, .sec-11__slider-4, .sec-11__slider-5, .sec-11__slider-6 {
  317. height: 28vh;
  318. background-position: center center;
  319. background-size: cover;
  320. background-repeat: no-repeat; }
  321. .sec-11__imgfr {
  322. width: 100%;
  323. height: 100%; }
  324. .sec-11__imgfr img {
  325. width: 100%; }
  326. .sec-11__cardtxt {
  327. font-size: 14px; }
  328. .morelink {
  329. text-decoration: none;
  330. color: #EE7800; }
  331. .morelink:hover {
  332. color: #EE7800; }
  333. .fixed_menu {
  334. height: 82px;
  335. position: fixed;
  336. z-index: 4;
  337. bottom: 0;
  338. left: 0;
  339. width: 100%;
  340. background-color: #fff;
  341. box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  342. -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  343. -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12); }
  344. .sec-menu {
  345. display: none;
  346. z-index: 105;
  347. position: absolute;
  348. top: 0;
  349. left: 0;
  350. right: 0;
  351. font-size: 14px; }
  352. .sec-menu-block {
  353. padding-top: 61px;
  354. margin: 0;
  355. position: fixed;
  356. top: 0;
  357. left: 0;
  358. right: 0;
  359. height: 100%;
  360. overflow-y: scroll;
  361. max-width: 100%;
  362. background-color: white; }
  363. .sec-menu-list {
  364. background: white;
  365. margin-bottom: 0; }
  366. .sec-menu-list .navbar-nav {
  367. padding: 0 2rem;
  368. width: 100%; }
  369. .sec-menu-list .navbar-nav .dropdown-menu {
  370. border: none;
  371. padding: 0;
  372. height: 0;
  373. opacity: 0;
  374. transition: all 1s; }
  375. .sec-menu-list .navbar-nav .dropdown-menu.show {
  376. height: fit-content;
  377. opacity: 1; }
  378. .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item {
  379. padding-left: 3rem; }
  380. .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 {
  381. background-color: white; }
  382. .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:hover {
  383. background-color: white; }
  384. .sec-menu-list .navbar-nav .dropdown-menu .sub-menu .dropdown-item {
  385. padding-left: 6rem; }
  386. .sec-menu-list .nav-item {
  387. font-size: 17px;
  388. display: block;
  389. width: 100%; }
  390. .sec-menu-list .nav-link {
  391. padding-top: 11px;
  392. padding-bottom: 8px;
  393. color: #707070;
  394. position: relative; }
  395. .sec-menu-list .nav-link .link_div {
  396. width: 25px; }
  397. .sec-menu-list .nav-link a {
  398. color: #707070;
  399. text-decoration: none; }
  400. .sec-menu-list .nav-link.show i {
  401. transform: rotate(-180deg); }
  402. .sec-menu-list .nav-link .expand {
  403. position: absolute;
  404. right: 10px; }
  405. .sec-menu-list .nav-link .expand i {
  406. font-size: 11px;
  407. color: #D3D3D3;
  408. transition: all .5s; }
  409. .sec-menu-list .nav-link.text-main {
  410. color: #EE7800; }
  411. .sec-menu-list .sub-link .expand {
  412. position: absolute;
  413. right: 20px;
  414. top: 8px;
  415. width: 1.5rem;
  416. text-align: center; }
  417. .sec-menu-list .sub-menu {
  418. display: none; }
  419. .sec-menu-list .sub-menu.show {
  420. display: block; }
  421. .sec-menu-list hr {
  422. margin: 3px 0;
  423. background-color: #bbbbbb; }
  424. .sec-menu-follows {
  425. padding: 2rem 2.5rem;
  426. background-color: #e6e6e6ef;
  427. margin-top: -9px; }
  428. .sec-menu-follows-title {
  429. color: #797979;
  430. font-size: 14px; }
  431. .sec-menu-links {
  432. margin-bottom: 2.5rem; }
  433. .sec-menu-links a {
  434. color: #797979;
  435. text-decoration: none;
  436. display: inline-block;
  437. padding: 1px 0;
  438. border-bottom: 1px solid #acacac;
  439. margin: 0 .6rem;
  440. flex-wrap: nowrap; }
  441. @media screen and (max-width: 385px) {
  442. .sec-menu-links a {
  443. margin: 0 .4rem; } }
  444. .sec-menu .follows-fp {
  445. color: #797979;
  446. text-decoration: none;
  447. font-weight: 400;
  448. display: block;
  449. padding-left: .5rem; }
  450. .sec-menu .follows-fp:nth-of-type(1) {
  451. margin-bottom: .6rem; }
  452. .sec-menu .copyright {
  453. color: #797979;
  454. font-size: 13px; }
  455. .sec-search {
  456. display: none;
  457. z-index: 107;
  458. position: absolute;
  459. top: 0;
  460. left: 0;
  461. right: 0;
  462. font-size: 14px; }
  463. .sec-search-block {
  464. padding-top: 61px;
  465. margin: 0;
  466. position: fixed;
  467. top: 0;
  468. left: 0;
  469. right: 0;
  470. width: 100;
  471. height: 100%;
  472. overflow-y: scroll;
  473. background-color: rgba(0, 0, 0, 0.774); }
  474. .sec-search-list {
  475. background-color: #F3F3F3;
  476. padding: 1rem;
  477. padding-bottom: 1.4rem; }
  478. .sec-search-list hr {
  479. background-color: #aaaaaa; }
  480. .sec-search-form {
  481. width: 100%; }
  482. .sec-search .searchBar {
  483. font-size: 17px;
  484. padding: .5rem .3rem;
  485. display: inline-block;
  486. width: 88%;
  487. outline: none;
  488. border: 2px solid #EE7800;
  489. border-radius: 5px; }
  490. .sec-search .searchBtn {
  491. outline: none;
  492. border: none;
  493. background-color: transparent;
  494. display: inline-block;
  495. width: 10%; }
  496. .sec-search-hots {
  497. padding: 1rem;
  498. background-color: white;
  499. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61); }
  500. .sec-search-hots__title {
  501. color: #AAAAAA;
  502. font-size: 18px;
  503. font-weight: 400;
  504. padding-top: .5rem; }
  505. .sec-search-hots__link {
  506. display: inline-block;
  507. text-decoration: none;
  508. color: #797979;
  509. border: 1px solid #797979;
  510. border-radius: 3rem;
  511. padding: .3rem .5rem;
  512. margin-right: .8rem;
  513. margin-bottom: .8rem; }
  514. .sec-search-hots__link:hover {
  515. color: #797979; }
  516. .sec-login {
  517. display: none;
  518. z-index: 109;
  519. position: absolute;
  520. top: 0;
  521. left: 0;
  522. right: 0;
  523. font-size: 14px; }
  524. .sec-login-block {
  525. padding-top: 61px;
  526. margin: 0;
  527. position: fixed;
  528. top: 0;
  529. left: 0;
  530. right: 0;
  531. width: 100;
  532. height: 100%;
  533. overflow-y: hidden;
  534. background-color: #F3F3F3; }
  535. .sec-login-list {
  536. background-color: #F3F3F3;
  537. padding: 1rem;
  538. padding-bottom: 1.4rem; }
  539. .sec-login-list hr {
  540. background-color: #aaaaaa; }
  541. .sec-login-btns {
  542. padding: 1rem;
  543. background-color: white;
  544. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61); }
  545. .sec-favor {
  546. display: block;
  547. z-index: 111;
  548. position: absolute;
  549. top: 0;
  550. left: 0;
  551. right: 0;
  552. font-size: 14px; }
  553. .sec-favor-title {
  554. color: #4C4C4C;
  555. font-size: 18px; }
  556. .sec-favor-block {
  557. padding-top: 61px;
  558. margin: 0;
  559. position: fixed;
  560. top: 0;
  561. left: 0;
  562. right: 0;
  563. width: 100;
  564. height: 100%;
  565. overflow-y: auto;
  566. background-color: #F3F3F3; }
  567. .sec-favor-list {
  568. background-color: #F3F3F3;
  569. padding: 1rem;
  570. padding-bottom: 1.4rem; }
  571. .sec-favor-list hr {
  572. background-color: #aaaaaa; }
  573. .sec-favor-form .form-user, .sec-favor-checklist .form-user {
  574. width: 50%;
  575. color: #707070;
  576. font-size: 16px; }
  577. .sec-favor-form .form-progressbar, .sec-favor-checklist .form-progressbar {
  578. width: 50%;
  579. display: flex;
  580. justify-content: space-between; }
  581. .sec-favor-form .form-progressbar li, .sec-favor-checklist .form-progressbar li {
  582. width: 1.6rem;
  583. height: 1.6rem;
  584. border-radius: 50%;
  585. border: 2px solid #D3D3D3;
  586. line-height: 1.4rem;
  587. display: flex;
  588. justify-content: center;
  589. position: relative;
  590. color: #D3D3D3;
  591. background-color: #F3F3F3;
  592. z-index: 2; }
  593. .sec-favor-form .form-progressbar li.active, .sec-favor-checklist .form-progressbar li.active {
  594. border: 2px solid #EE7800;
  595. color: #EE7800; }
  596. .sec-favor-form .form-progressbar li.active::before, .sec-favor-checklist .form-progressbar li.active::before {
  597. border-top: 2px solid #EE7800; }
  598. .sec-favor-form .form-progressbar li::before, .sec-favor-checklist .form-progressbar li::before {
  599. position: absolute;
  600. content: " ";
  601. width: 4rem;
  602. height: 0;
  603. border-top: 2px dashed #D3D3D3;
  604. right: 100%;
  605. top: 50%;
  606. z-index: 1; }
  607. .sec-favor-form .form-progressbar li:nth-of-type(1)::before, .sec-favor-checklist .form-progressbar li:nth-of-type(1)::before {
  608. display: none; }
  609. .sec-favor-form .form-step, .sec-favor-checklist .form-step {
  610. background-color: white;
  611. border-radius: 3px;
  612. padding: 1.5rem 1rem;
  613. padding-bottom: 1.5rem;
  614. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  615. overflow: visible; }
  616. .sec-favor-form .form-step .next, .sec-favor-checklist .form-step .next {
  617. padding: .6rem 5rem;
  618. background-color: #EE7800;
  619. border-radius: 3px;
  620. color: white;
  621. border: none;
  622. outline: none; }
  623. .sec-favor-form .form-step1, .sec-favor-checklist .form-step1 {
  624. display: block; }
  625. .sec-favor-form .form-step2, .sec-favor-checklist .form-step2 {
  626. display: none; }
  627. .sec-favor-form .form-step3, .sec-favor-checklist .form-step3 {
  628. display: none;
  629. position: relative;
  630. padding-bottom: 1.5rem; }
  631. .sec-favor-form input[type="checkbox"], .sec-favor-form input[type="radio"], .sec-favor-checklist input[type="checkbox"], .sec-favor-checklist input[type="radio"] {
  632. display: none; }
  633. .sec-favor-form .imgfr, .sec-favor-checklist .imgfr {
  634. background-image: url("../images/2_2.webp");
  635. background-position: center center;
  636. background-size: cover;
  637. background-repeat: no-repeat;
  638. width: 100%;
  639. height: 4.5rem;
  640. border-radius: 8px;
  641. border: 2px solid transparent; }
  642. .sec-favor-form h4, .sec-favor-checklist h4 {
  643. color: #AAAAAA;
  644. font-size: 15px;
  645. font-weight: 400; }
  646. .sec-favor-form input[type="checkbox"]:checked + .fs-label-info .imgfr, .sec-favor-checklist input[type="checkbox"]:checked + .fs-label-info .imgfr {
  647. border: 2px solid #EE7800; }
  648. .sec-favor-form input[type="checkbox"]:checked + .fs-label-chbox, .sec-favor-checklist input[type="checkbox"]:checked + .fs-label-chbox {
  649. border: 1px solid #EE7800;
  650. color: #EE7800; }
  651. .sec-favor-form input[type="radio"]:checked + .fs-label-chbox, .sec-favor-checklist input[type="radio"]:checked + .fs-label-chbox {
  652. border: 1px solid #EE7800;
  653. color: #EE7800; }
  654. .sec-favor-form .step3-block, .sec-favor-checklist .step3-block {
  655. margin-bottom: 1rem; }
  656. .sec-favor-form .step3-block:nth-of-type(3), .sec-favor-checklist .step3-block:nth-of-type(3) {
  657. margin-bottom: 0; }
  658. .sec-favor-form .step3-block-title, .sec-favor-checklist .step3-block-title {
  659. color: #AAAAAA;
  660. display: block;
  661. margin-bottom: .5rem;
  662. font-size: 1rem; }
  663. .sec-favor-form .step3-block .radio, .sec-favor-checklist .step3-block .radio {
  664. display: inline-block;
  665. padding: .25rem .7rem;
  666. margin-right: .4rem;
  667. border: 1px solid #707070;
  668. border-radius: 2rem;
  669. color: #797979;
  670. margin-bottom: .5rem; }
  671. .sec-favor-form .skip, .sec-favor-checklist .skip {
  672. padding: .3rem 1rem;
  673. color: #AAAAAA;
  674. border: none;
  675. outline: none;
  676. background-color: transparent; }
  677. .sec-favor-form .btngrp, .sec-favor-checklist .btngrp {
  678. /* position: absolute;
  679. left: 50%;
  680. transform: translateX(-50%);
  681. bottom: -6rem; */
  682. display: flex;
  683. flex-direction: column;
  684. align-items: center; }
  685. .sec-favor-form .btngrp .next, .sec-favor-checklist .btngrp .next {
  686. transform: translateY(0rem); }
  687. .sec-favor-checklist .form-user {
  688. margin: 0 auto;
  689. text-align: center;
  690. margin-bottom: 1rem; }
  691. .sec-favor-btns {
  692. padding: 1rem;
  693. background-color: white;
  694. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61); }
  695. .text-main {
  696. color: #EE7800; }
  697. .text-phone {
  698. color: #EA068C;
  699. text-decoration: none; }
  700. #videoModal .modal-content {
  701. background-color: transparent;
  702. border: none; }
  703. .fixed-btn {
  704. position: fixed;
  705. right: 15px;
  706. bottom: 8rem; }
  707. .fixed-btn .btn-gotop {
  708. padding: 1.2rem .8rem;
  709. background-color: rgba(255, 255, 255, 0.897);
  710. display: flex;
  711. align-items: center;
  712. 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);
  713. -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);
  714. -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); }