main.css 21 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169
  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. .morelink {
  455. text-decoration: none;
  456. color: #EE7800;
  457. }
  458. .morelink:hover {
  459. color: #EE7800;
  460. }
  461. .fixed_menu {
  462. height: 82px;
  463. position: fixed;
  464. z-index: 4;
  465. bottom: 0;
  466. left: 0;
  467. width: 100%;
  468. background-color: #fff;
  469. box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  470. -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  471. -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  472. }
  473. .sec-menu {
  474. display: none;
  475. z-index: 105;
  476. position: absolute;
  477. top: 0;
  478. left: 0;
  479. right: 0;
  480. font-size: 14px;
  481. }
  482. .sec-menu-block {
  483. padding-top: 61px;
  484. margin: 0;
  485. -webkit-transition: -webkit-transform .5s;
  486. transition: -webkit-transform .5s;
  487. transition: transform .5s;
  488. transition: transform .5s, -webkit-transform .5s;
  489. position: fixed;
  490. top: 0;
  491. left: -100%;
  492. right: 0;
  493. height: 100%;
  494. overflow-y: scroll;
  495. max-width: 100%;
  496. background-color: white;
  497. }
  498. .sec-menu-block.slidein {
  499. -webkit-animation: slidein 0.3s forwards;
  500. animation: slidein 0.3s forwards;
  501. }
  502. .sec-menu-block.slideout {
  503. -webkit-animation: slideout 0.3s forwards;
  504. animation: slideout 0.3s forwards;
  505. }
  506. .sec-menu-list {
  507. background: white;
  508. margin-bottom: 0;
  509. }
  510. .sec-menu-list .navbar-nav {
  511. padding: 0 2rem;
  512. width: 100%;
  513. }
  514. .sec-menu-list .navbar-nav .dropdown-menu {
  515. border: none;
  516. padding: 0;
  517. height: 0;
  518. opacity: 0;
  519. -webkit-transition: all 1s;
  520. transition: all 1s;
  521. }
  522. .sec-menu-list .navbar-nav .dropdown-menu.show {
  523. height: -webkit-fit-content;
  524. height: -moz-fit-content;
  525. height: fit-content;
  526. opacity: 1;
  527. }
  528. .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item {
  529. padding-left: 3rem;
  530. }
  531. .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 {
  532. background-color: white;
  533. }
  534. .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:hover {
  535. background-color: white;
  536. }
  537. .sec-menu-list .navbar-nav .dropdown-menu .sub-menu .dropdown-item {
  538. padding-left: 6rem;
  539. }
  540. .sec-menu-list .nav-item {
  541. font-size: 17px;
  542. display: block;
  543. width: 100%;
  544. }
  545. .sec-menu-list .nav-link {
  546. padding-top: 11px;
  547. padding-bottom: 8px;
  548. color: #707070;
  549. position: relative;
  550. }
  551. .sec-menu-list .nav-link .link_div {
  552. width: 25px;
  553. }
  554. .sec-menu-list .nav-link a {
  555. color: #707070;
  556. text-decoration: none;
  557. }
  558. .sec-menu-list .nav-link.show i {
  559. -webkit-transform: rotate(-180deg);
  560. transform: rotate(-180deg);
  561. }
  562. .sec-menu-list .nav-link .expand {
  563. position: absolute;
  564. right: 10px;
  565. }
  566. .sec-menu-list .nav-link .expand i {
  567. font-size: 11px;
  568. color: #D3D3D3;
  569. -webkit-transition: all .5s;
  570. transition: all .5s;
  571. }
  572. .sec-menu-list .nav-link.text-main {
  573. color: #EE7800;
  574. }
  575. .sec-menu-list .sub-link .expand {
  576. position: absolute;
  577. right: 20px;
  578. top: 8px;
  579. width: 1.5rem;
  580. text-align: center;
  581. }
  582. .sec-menu-list .sub-menu {
  583. display: none;
  584. }
  585. .sec-menu-list .sub-menu.show {
  586. display: block;
  587. }
  588. .sec-menu-list hr {
  589. margin: 3px 0;
  590. background-color: #bbbbbb;
  591. }
  592. .sec-menu-follows {
  593. padding: 2rem 2.5rem;
  594. background-color: #e6e6e6ef;
  595. margin-top: -9px;
  596. }
  597. .sec-menu-follows-title {
  598. color: #797979;
  599. font-size: 14px;
  600. }
  601. .sec-menu-links {
  602. margin-bottom: 2.5rem;
  603. }
  604. .sec-menu-links a {
  605. color: #797979;
  606. text-decoration: none;
  607. display: inline-block;
  608. padding: 1px 0;
  609. border-bottom: 1px solid #acacac;
  610. margin: 0 .6rem;
  611. -ms-flex-wrap: nowrap;
  612. flex-wrap: nowrap;
  613. }
  614. @media screen and (max-width: 385px) {
  615. .sec-menu-links a {
  616. margin: 0 .4rem;
  617. }
  618. }
  619. .sec-menu .follows-fp {
  620. color: #797979;
  621. text-decoration: none;
  622. font-weight: 400;
  623. display: block;
  624. padding-left: .5rem;
  625. }
  626. .sec-menu .follows-fp:nth-of-type(1) {
  627. margin-bottom: .6rem;
  628. }
  629. .sec-menu .copyright {
  630. color: #797979;
  631. font-size: 13px;
  632. }
  633. @-webkit-keyframes slidein {
  634. 100% {
  635. left: 0;
  636. }
  637. }
  638. @keyframes slidein {
  639. 100% {
  640. left: 0;
  641. }
  642. }
  643. @-webkit-keyframes slideout {
  644. 100% {
  645. left: -100%;
  646. }
  647. }
  648. @keyframes slideout {
  649. 100% {
  650. left: -100%;
  651. }
  652. }
  653. .sec-search {
  654. display: none;
  655. z-index: 107;
  656. position: absolute;
  657. top: 0;
  658. left: 0;
  659. right: 0;
  660. font-size: 14px;
  661. }
  662. .sec-search-block {
  663. padding-top: 61px;
  664. margin: 0;
  665. position: fixed;
  666. top: 0;
  667. left: 0;
  668. right: 0;
  669. width: 100;
  670. height: 100%;
  671. overflow-y: scroll;
  672. background-color: rgba(0, 0, 0, 0.774);
  673. }
  674. .sec-search-list {
  675. background-color: #F3F3F3;
  676. padding: 1rem;
  677. padding-bottom: 1.4rem;
  678. }
  679. .sec-search-list hr {
  680. background-color: #aaaaaa;
  681. }
  682. .sec-search-form {
  683. width: 100%;
  684. }
  685. .sec-search .searchBar {
  686. font-size: 17px;
  687. padding: .5rem .3rem;
  688. display: inline-block;
  689. width: 88%;
  690. outline: none;
  691. border: 2px solid #EE7800;
  692. border-radius: 5px;
  693. }
  694. .sec-search .searchBtn {
  695. outline: none;
  696. border: none;
  697. background-color: transparent;
  698. display: inline-block;
  699. width: 10%;
  700. }
  701. .sec-search-hots {
  702. padding: 1rem;
  703. background-color: white;
  704. -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  705. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  706. }
  707. .sec-search-hots__title {
  708. color: #AAAAAA;
  709. font-size: 18px;
  710. font-weight: 400;
  711. padding-top: .5rem;
  712. }
  713. .sec-search-hots__link {
  714. display: inline-block;
  715. text-decoration: none;
  716. color: #797979;
  717. border: 1px solid #797979;
  718. border-radius: 3rem;
  719. padding: .3rem .5rem;
  720. margin-right: .8rem;
  721. margin-bottom: .8rem;
  722. }
  723. .sec-search-hots__link:hover {
  724. color: #797979;
  725. }
  726. .sec-login {
  727. display: none;
  728. z-index: 109;
  729. position: absolute;
  730. top: 0;
  731. left: 0;
  732. right: 0;
  733. font-size: 14px;
  734. }
  735. .sec-login-block {
  736. padding-top: 61px;
  737. margin: 0;
  738. position: fixed;
  739. top: 0;
  740. left: 0;
  741. right: 0;
  742. width: 100;
  743. height: 100%;
  744. overflow-y: hidden;
  745. background-color: #F3F3F3;
  746. }
  747. .sec-login-list {
  748. background-color: #F3F3F3;
  749. padding: 1rem;
  750. padding-bottom: 1.4rem;
  751. }
  752. .sec-login-list hr {
  753. background-color: #aaaaaa;
  754. }
  755. .sec-login-btns {
  756. padding: 1rem;
  757. background-color: white;
  758. -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  759. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  760. }
  761. .sec-favor {
  762. display: block;
  763. z-index: 111;
  764. position: absolute;
  765. top: 0;
  766. left: 0;
  767. right: 0;
  768. font-size: 14px;
  769. }
  770. .sec-favor-title {
  771. color: #4C4C4C;
  772. font-size: 18px;
  773. }
  774. .sec-favor-block {
  775. padding-top: 61px;
  776. margin: 0;
  777. position: fixed;
  778. top: 0;
  779. left: 0;
  780. right: 0;
  781. width: 100;
  782. height: 100%;
  783. overflow-y: auto;
  784. background-color: #F3F3F3;
  785. }
  786. .sec-favor-list {
  787. background-color: #F3F3F3;
  788. padding: 1rem;
  789. padding-bottom: 1.4rem;
  790. }
  791. .sec-favor-list hr {
  792. background-color: #aaaaaa;
  793. }
  794. .sec-favor-form .form-user, .sec-favor-checklist .form-user {
  795. width: 50%;
  796. color: #707070;
  797. font-size: 16px;
  798. }
  799. .sec-favor-form .form-progressbar, .sec-favor-checklist .form-progressbar {
  800. width: 50%;
  801. display: -webkit-box;
  802. display: -ms-flexbox;
  803. display: flex;
  804. -webkit-box-pack: justify;
  805. -ms-flex-pack: justify;
  806. justify-content: space-between;
  807. }
  808. .sec-favor-form .form-progressbar li, .sec-favor-checklist .form-progressbar li {
  809. width: 1.6rem;
  810. height: 1.6rem;
  811. border-radius: 50%;
  812. border: 2px solid #D3D3D3;
  813. line-height: 1.4rem;
  814. display: -webkit-box;
  815. display: -ms-flexbox;
  816. display: flex;
  817. -webkit-box-pack: center;
  818. -ms-flex-pack: center;
  819. justify-content: center;
  820. position: relative;
  821. color: #D3D3D3;
  822. background-color: #F3F3F3;
  823. z-index: 2;
  824. }
  825. .sec-favor-form .form-progressbar li.active, .sec-favor-checklist .form-progressbar li.active {
  826. border: 2px solid #EE7800;
  827. color: #EE7800;
  828. }
  829. .sec-favor-form .form-progressbar li.active::before, .sec-favor-checklist .form-progressbar li.active::before {
  830. border-top: 2px solid #EE7800;
  831. }
  832. .sec-favor-form .form-progressbar li::before, .sec-favor-checklist .form-progressbar li::before {
  833. position: absolute;
  834. content: " ";
  835. width: 4rem;
  836. height: 0;
  837. border-top: 2px dashed #D3D3D3;
  838. right: 100%;
  839. top: 50%;
  840. z-index: 1;
  841. }
  842. .sec-favor-form .form-progressbar li:nth-of-type(1)::before, .sec-favor-checklist .form-progressbar li:nth-of-type(1)::before {
  843. display: none;
  844. }
  845. .sec-favor-form .form-step, .sec-favor-checklist .form-step {
  846. background-color: white;
  847. border-radius: 3px;
  848. padding: 1.5rem 1rem;
  849. padding-bottom: 1.5rem;
  850. -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  851. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  852. overflow: visible;
  853. }
  854. .sec-favor-form .form-step .next, .sec-favor-checklist .form-step .next {
  855. padding: .6rem 5rem;
  856. background-color: #EE7800;
  857. border-radius: 3px;
  858. color: white;
  859. border: none;
  860. outline: none;
  861. }
  862. .sec-favor-form .form-step1, .sec-favor-checklist .form-step1 {
  863. display: block;
  864. }
  865. .sec-favor-form .form-step2, .sec-favor-checklist .form-step2 {
  866. display: none;
  867. }
  868. .sec-favor-form .form-step3, .sec-favor-checklist .form-step3 {
  869. display: none;
  870. position: relative;
  871. padding-bottom: 1.5rem;
  872. }
  873. .sec-favor-form input[type="checkbox"], .sec-favor-form input[type="radio"], .sec-favor-checklist input[type="checkbox"], .sec-favor-checklist input[type="radio"] {
  874. display: none;
  875. }
  876. .sec-favor-form .imgfr, .sec-favor-checklist .imgfr {
  877. background-image: url("../images/2_2.webp");
  878. background-position: center center;
  879. background-size: cover;
  880. background-repeat: no-repeat;
  881. width: 100%;
  882. height: 4.5rem;
  883. border-radius: 8px;
  884. border: 2px solid transparent;
  885. }
  886. .sec-favor-form h4, .sec-favor-checklist h4 {
  887. color: #AAAAAA;
  888. font-size: 15px;
  889. font-weight: 400;
  890. }
  891. .sec-favor-form input[type="checkbox"]:checked + .fs-label-info .imgfr, .sec-favor-checklist input[type="checkbox"]:checked + .fs-label-info .imgfr {
  892. border: 2px solid #EE7800;
  893. }
  894. .sec-favor-form input[type="checkbox"]:checked + .fs-label-chbox, .sec-favor-checklist input[type="checkbox"]:checked + .fs-label-chbox {
  895. border: 1px solid #EE7800;
  896. color: #EE7800;
  897. }
  898. .sec-favor-form input[type="radio"]:checked + .fs-label-chbox, .sec-favor-checklist input[type="radio"]:checked + .fs-label-chbox {
  899. border: 1px solid #EE7800;
  900. color: #EE7800;
  901. }
  902. .sec-favor-form .step3-block, .sec-favor-checklist .step3-block {
  903. margin-bottom: 1rem;
  904. }
  905. .sec-favor-form .step3-block:nth-of-type(3), .sec-favor-checklist .step3-block:nth-of-type(3) {
  906. margin-bottom: 0;
  907. }
  908. .sec-favor-form .step3-block-title, .sec-favor-checklist .step3-block-title {
  909. color: #AAAAAA;
  910. display: block;
  911. margin-bottom: .5rem;
  912. font-size: 1rem;
  913. }
  914. .sec-favor-form .step3-block .radio, .sec-favor-checklist .step3-block .radio {
  915. display: inline-block;
  916. padding: .25rem .7rem;
  917. margin-right: .4rem;
  918. border: 1px solid #707070;
  919. border-radius: 2rem;
  920. color: #797979;
  921. margin-bottom: .5rem;
  922. }
  923. .sec-favor-form .skip, .sec-favor-checklist .skip {
  924. padding: .3rem 1rem;
  925. color: #AAAAAA;
  926. border: none;
  927. outline: none;
  928. background-color: transparent;
  929. }
  930. .sec-favor-form .btngrp, .sec-favor-checklist .btngrp {
  931. /* position: absolute;
  932. left: 50%;
  933. transform: translateX(-50%);
  934. bottom: -6rem; */
  935. display: -webkit-box;
  936. display: -ms-flexbox;
  937. display: flex;
  938. -webkit-box-orient: vertical;
  939. -webkit-box-direction: normal;
  940. -ms-flex-direction: column;
  941. flex-direction: column;
  942. -webkit-box-align: center;
  943. -ms-flex-align: center;
  944. align-items: center;
  945. }
  946. .sec-favor-form .btngrp .next, .sec-favor-checklist .btngrp .next {
  947. -webkit-transform: translateY(0rem);
  948. transform: translateY(0rem);
  949. }
  950. .sec-favor-checklist .form-user {
  951. margin: 0 auto;
  952. text-align: center;
  953. margin-bottom: 1rem;
  954. }
  955. .sec-favor-btns {
  956. padding: 1rem;
  957. background-color: white;
  958. -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  959. box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
  960. }
  961. .text-main {
  962. color: #EE7800;
  963. }
  964. .text-phone {
  965. color: #EA068C;
  966. text-decoration: none;
  967. }
  968. #videoModal .modal-content {
  969. background-color: transparent;
  970. border: none;
  971. }
  972. .fixed-btn {
  973. position: fixed;
  974. right: 15px;
  975. bottom: 8rem;
  976. }
  977. .fixed-btn .btn-gotop {
  978. padding: 1.2rem .8rem;
  979. background-color: rgba(255, 255, 255, 0.897);
  980. display: -webkit-box;
  981. display: -ms-flexbox;
  982. display: flex;
  983. -webkit-box-align: center;
  984. -ms-flex-align: center;
  985. align-items: center;
  986. 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);
  987. -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);
  988. -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);
  989. }
  990. /*# sourceMappingURL=main.css.map */