common.less 33KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308
  1. /* -----------------------------共公部分:包括有元素的共公样式以及页头、页脚 ------------------- */
  2. /* 说明:
  3. pc端:
  4. 设计稿1440*900 所有尺寸基本按px来即可;
  5. 正文 16px;
  6. 移动端:
  7. 设计稿宽800px,按逻辑尺寸的两倍制作。因此真实尺寸需要除2;
  8. 如设计稿字体大小28px,则实真字体大小为28px/2=14px;
  9. 或使用vw 字体大小:28/800*10 = 3.5vw
  10. 正文 14px 或 3.5vw
  11. */
  12. @import "/dev/static/font/cavan.css";
  13. @import "/dev/static/font/iconfont.css";
  14. html,
  15. body,
  16. h1,
  17. h2,
  18. h3,
  19. div,
  20. span,
  21. header,
  22. footer,
  23. nav,
  24. section,
  25. input {
  26. margin: 0;
  27. padding: 0;
  28. }
  29. input:focus {
  30. outline: none;
  31. }
  32. html,
  33. body {
  34. width: 100%;
  35. height: 100%;
  36. font-size: 16px;
  37. color: #231f20;
  38. font-family: 'MyFont2';
  39. }
  40. a{
  41. text-decoration: none;
  42. color: #231f20;
  43. }
  44. img{
  45. width: 100%;
  46. }
  47. /* 没图片是不显示 */
  48. img[src=""],
  49. img:not([src]) {
  50. opacity: 0;
  51. }
  52. .btn{
  53. position: relative;
  54. min-width: 200px;
  55. height: 50px;
  56. margin: 0px auto;
  57. background: #B81C25;
  58. box-sizing: border-box;
  59. color: #ffffff;
  60. display: inline-block;
  61. text-align: center;
  62. line-height: 50px;
  63. font-size: 14px;
  64. transition: all .3s ease-in-out;
  65. cursor: pointer;
  66. border-radius: 8px;
  67. &>span{
  68. position: relative;
  69. top: 0px;
  70. transition: all .3s ease-in-out;
  71. }
  72. &:hover{
  73. // background: #48A038;
  74. // border-color: #48A038;
  75. &>span{
  76. top: -1px;
  77. }
  78. }
  79. }
  80. .btnBlack{
  81. color: #000;
  82. border: 1px solid #000;
  83. &:hover{
  84. color: #ffffff;
  85. }
  86. }
  87. .btn2{
  88. position: relative;
  89. z-index: 2;
  90. box-sizing: border-box;
  91. color: #000;
  92. display: inline-block;
  93. text-align: center;
  94. font-size: 14px;
  95. transition: all .3s ease-in-out;
  96. cursor: pointer;
  97. &:hover{
  98. color: #48A038;
  99. }
  100. }
  101. .btn3{
  102. position: relative;
  103. width: 240px;
  104. height: 60px;
  105. box-sizing: border-box;
  106. color: #000;
  107. display: flex;
  108. text-align: center;
  109. line-height: 60px;
  110. font-size: 18px;
  111. transition: all .3s ease-in-out;
  112. cursor: pointer;
  113. border-radius: 50px;
  114. box-sizing: border-box;
  115. border: 1px solid #000;
  116. justify-content: center;
  117. align-items: center;
  118. overflow: hidden;
  119. &::before{
  120. content: '';
  121. width: 10px;
  122. height: 10px;
  123. position: absolute;
  124. bottom: -10px;
  125. left: 50%;
  126. transform: translateX(-50%);
  127. background: #B81C25;
  128. border-radius: 50%;
  129. transition: all .3s ease-in-out;
  130. z-index: -1;
  131. }
  132. &>span{
  133. // transition: all .3s ease-in-out;
  134. transform: rotate(90deg);
  135. font-size: 30px;
  136. margin-left: 8px;
  137. }
  138. &:hover{
  139. color: #fff;
  140. border: 1px solid #B81C25;
  141. &::before{
  142. transform: translateX(-50%) scale(30);
  143. }
  144. }
  145. }
  146. .btnW{
  147. color: #fff;
  148. &:hover{
  149. color: #48A038;
  150. }
  151. }
  152. //公共文本样式,默认是加粗,后面加R表示不加粗,正文文本样式用text
  153. .title{
  154. font-size: 56px;
  155. font-family: 'MyFont1',sans-serif;
  156. font-weight: bold;
  157. }
  158. // 正文文本样式
  159. .text{
  160. font-size: 20px;
  161. line-height: 44px;
  162. }
  163. .goTop{
  164. position: absolute;
  165. bottom: 360px;
  166. right:140px;
  167. transform: rotate(-90deg);
  168. display: none;
  169. .goTopBtn{
  170. width: 84px;
  171. height: 84px;
  172. background: #B2B5B7;
  173. border-radius: 42px;
  174. position: relative;
  175. transition: all .3s ease-in-out;
  176. a{
  177. padding: 0px;
  178. width: 100%;
  179. height: 100%;
  180. }
  181. .btnShow{
  182. .btnIcon{
  183. background-color: #fff;
  184. }
  185. }
  186. &:hover{
  187. background:#48A038;
  188. }
  189. }
  190. }
  191. .aniTxtUp{
  192. &>div{
  193. display: inline-block;
  194. }
  195. }
  196. header{
  197. width: 100%;
  198. position: fixed;
  199. z-index: 9;
  200. transition: all .3s ease-in-out;
  201. .headCon{
  202. width: 100%;
  203. margin: 0 auto;
  204. max-width: 1920px;
  205. // box-shadow: 0px 0px 34px 9px rgba(0,0,0,0.1);
  206. background: #ffffff;
  207. // border-bottom: 1px solid rgba(0,0,0,0.1);
  208. box-shadow: 6px 8px 10px 0px rgba(159,176,191,0.13);
  209. }
  210. .menuType{
  211. background: #ffffff12;
  212. border-bottom: 0px solid rgba(0,0,0,0);
  213. box-shadow: none;
  214. .logo{
  215. }
  216. .headerPC{
  217. .menu{
  218. &>div{
  219. &>a{
  220. color: #ffffff;
  221. }
  222. }
  223. .menuClicked{
  224. &::before{
  225. background: #fff;
  226. }
  227. }
  228. }
  229. .logo{
  230. background: url("../images/logoW.png") no-repeat;
  231. background-size: 142px 32px;
  232. }
  233. .language{
  234. a{
  235. color: #ffffff;
  236. &:hover{
  237. color: #B81C25;
  238. &.aborder{
  239. border: 1px solid #B81C25;
  240. background: #B81C25;
  241. color: #ffffff;
  242. }
  243. }
  244. }
  245. .aborder{
  246. border: 1px solid #ffffff;
  247. }
  248. .line{
  249. background: #ffffff;
  250. }
  251. }
  252. }
  253. .headerMobile{
  254. .logo{
  255. background: url("../images/logoW.png") no-repeat;
  256. background-size: contain;
  257. }
  258. }
  259. }
  260. }
  261. .hideHeader{
  262. transform: translateY(-100%);
  263. }
  264. .headerPC{
  265. width: 100%;
  266. box-sizing: border-box;
  267. padding: 0px 100px;
  268. height: 70px;
  269. display: flex;
  270. color: #000;
  271. justify-content: space-between;
  272. align-items: center;
  273. font-size: 14px;
  274. font-weight: 400;
  275. position: relative;
  276. .logo{
  277. width: 142px;
  278. height: 32px;
  279. background: url("../images/logoB.png") no-repeat;
  280. background-size: 142px 32px;
  281. cursor: pointer;
  282. position: absolute;
  283. left: 100px;
  284. }
  285. .menu{
  286. display: flex;
  287. position: relative;
  288. height: 70px;
  289. align-items: center;
  290. margin: 0 auto;
  291. &>div{
  292. display: inline-block;
  293. padding: 0 30px;
  294. position: relative;
  295. height: 70px;
  296. cursor: pointer;
  297. &>a{
  298. line-height: 70px;
  299. z-index: 11;
  300. transition: all .3s ease;
  301. font-size: 16px;
  302. }
  303. &:hover{
  304. &>a{color: #B81C25;}
  305. }
  306. }
  307. .menuClicked{
  308. &::before{
  309. content: '';
  310. width: calc(100% - 40px);
  311. height: 2px;
  312. position: absolute;
  313. bottom: 0px;
  314. left: 20px;
  315. background: #B81C25;
  316. }
  317. &>a{
  318. color: #B81C25;
  319. }
  320. }
  321. }
  322. .menuSon{
  323. position: absolute;
  324. top: 70px;
  325. padding: 15px 0px 15px;
  326. background: #fff;
  327. box-shadow: 0px 2px 6px 0px rgba(183,183,183,0.43);
  328. // border-radius: 8px;
  329. z-index: 10;
  330. width: auto;
  331. width: 260px;
  332. white-space: nowrap;
  333. left: 50%;
  334. transform: translateX(-50%) translateY(0%);
  335. // transition: all 0.3s cubic-bezier(0.04, 1.21, 0, 1.13);
  336. box-sizing: border-box;
  337. // opacity: 1;
  338. display: none;
  339. text-align: center;
  340. font-size: 18px;
  341. .menuUp{
  342. width: 100%;
  343. height: 2px;
  344. background: #00000000;
  345. position: absolute;
  346. left:0;
  347. top: -2px;
  348. &::before{
  349. content: '';
  350. width: 0;
  351. height: 0;
  352. position: absolute;
  353. display: block;
  354. bottom: -2px;
  355. left: 50%;
  356. transform: translateX(-50%);
  357. border-top:15px solid transparent;
  358. border-left:15px solid transparent;
  359. border-right:15px solid transparent;
  360. border-bottom:15px solid #fff ;
  361. }
  362. }
  363. a{
  364. display: block;
  365. padding: 9px 0;
  366. transition: all .3s ease;
  367. span{
  368. transition: all .3s ease;
  369. display: inline-block;
  370. }
  371. &:hover{
  372. background: #B81C25;
  373. span{
  374. color: #fff;
  375. transform: translateY(-3px);
  376. }
  377. }
  378. &:last-child {
  379. margin-bottom: 0;
  380. }
  381. }
  382. }
  383. .open{
  384. display: block;
  385. }
  386. .language{
  387. height: 70px;
  388. display: flex;
  389. align-items: center;
  390. width: auto;
  391. white-space: nowrap;
  392. cursor: pointer;
  393. position: absolute;
  394. right: 100px;
  395. a{
  396. display: inline-block;
  397. color: #000000;
  398. transition: all .3s ease;
  399. &:hover{
  400. color: #B81C25;
  401. &.aborder{
  402. border: 1px solid #B81C25;
  403. background: #B81C25;
  404. color: #fff;
  405. }
  406. }
  407. }
  408. .aborder{
  409. border: 1px solid #000000;
  410. text-align: center;
  411. width: 100px;
  412. height: 30px;
  413. font-size: 12px;
  414. box-sizing: border-box;
  415. border-radius: 6px;
  416. display: flex;
  417. align-items: center;
  418. justify-content: center;
  419. }
  420. .line{
  421. display: inline-block;
  422. width: 1px;
  423. height: 13px;
  424. background: #000000;
  425. opacity: 0.5;
  426. margin: 0px 20px;
  427. }
  428. }
  429. }
  430. .headerMobile{
  431. display: none;
  432. width: 100%;
  433. height: 60px;
  434. padding: 14px 15px 0px;
  435. box-sizing: border-box;
  436. position: relative;
  437. .logo{
  438. width: 88px;
  439. height: 21px;
  440. position: relative;
  441. z-index: 6;
  442. background: url("../images/logoB.png") no-repeat;
  443. background-size: contain;
  444. cursor: pointer;
  445. top: 7px;
  446. }
  447. .navFlagBtn {
  448. position: absolute;
  449. top: 12px;
  450. right: 6px;
  451. width: 40px;
  452. height: 40px;
  453. z-index: 8;
  454. .lineCenter {
  455. top: 50%;
  456. margin-top: -1px;
  457. }
  458. .nav_btn_small {
  459. width: 20px;
  460. height: 16px;
  461. position: absolute;
  462. left: 10px;
  463. top: 12px;
  464. }
  465. .lineTop {
  466. top: 0;
  467. }
  468. .lineBottom {
  469. bottom: 0;
  470. }
  471. .nav_btn_small > div {
  472. border-radius: 1px;
  473. width: 100%;
  474. height: 2px;
  475. background-color: #ffffff;
  476. position: absolute;
  477. }
  478. .arrowDirBase {
  479. transition: all 0.3s ease;
  480. -webkit-transition: all 0.3s ease;
  481. -webkit-transform-origin: 50% 50%;
  482. transform-origin: 50% 50%;
  483. }
  484. .arrowDirectionDown {
  485. transform: rotate(45deg) translate(5px, 5px);
  486. -webkit-transform: rotate(45deg) translate(5px, 5px);
  487. }
  488. .arrowDirectionUp {
  489. transform: rotate(-45deg) translate(5px, -5px);
  490. -webkit-transform: rotate(-45deg) translate(5px, -5px);
  491. }
  492. .arrowDirectionCenter {
  493. opacity: 0;
  494. }
  495. }
  496. .navFlag{
  497. width: 100%;
  498. height: calc(100vh - 60px);
  499. position: absolute;
  500. top: 60px;
  501. left: 0;
  502. background-color: #ffffff;
  503. display: none;
  504. z-index: 6;
  505. .navBg{
  506. width: 100%;
  507. height: 60px;
  508. position: absolute;
  509. top: -60px;
  510. left: 0px;
  511. background-color: #ffffff;
  512. background-image: url("../images/logoB.png");
  513. background-size: 89px 22px;
  514. background-repeat: no-repeat;
  515. // border-bottom: 1px solid #0000001b;
  516. background-position: 15px center;
  517. }
  518. .navMenu{
  519. width: 100%;
  520. height: 100%;
  521. box-sizing: border-box;
  522. overflow-y: auto;
  523. &>div{
  524. width: 100%;
  525. padding: 25px 15px;
  526. box-sizing: border-box;
  527. border-bottom: 1px solid #ACACAC80;
  528. .title{
  529. font-size: 18px;
  530. line-height: 18px;
  531. color: #231F20;
  532. padding-left: 13px;
  533. padding-right: 6px;
  534. font-weight: 100;
  535. font-family: 'MyFont2';
  536. span{
  537. float: right;
  538. font-size: 14px;
  539. transform: rotate(-90deg);
  540. transition: all .3s ease;
  541. }
  542. }
  543. .menuSon{
  544. width: 100%;
  545. overflow: hidden;
  546. height: 0px;
  547. clip-path: inset(0 0 100% 0);
  548. transition: all 0.3s ease;
  549. a{
  550. font-size: 16px;
  551. display: block;
  552. color: #666666;
  553. padding: 20px 14px;
  554. border-bottom: 1px solid #ACACAC80;
  555. &:first-child{
  556. margin-top: 10px;
  557. }
  558. &:last-child{
  559. border-bottom: none;
  560. padding-bottom: 0px;
  561. }
  562. }
  563. }
  564. }
  565. .menuShow{
  566. .title{
  567. .iconfont{
  568. transform: rotate(0deg);
  569. }
  570. }
  571. .menuSon{
  572. height: 100%;
  573. clip-path: inset(0 0 0% 0);
  574. }
  575. }
  576. }
  577. .language{
  578. display: flex;
  579. justify-content: center;
  580. align-items: center;
  581. padding: 20px 0px;
  582. a{
  583. font-size: 16px;
  584. display: inline-block;
  585. }
  586. .light{
  587. color: #48A038;
  588. }
  589. div{
  590. width: 1px;
  591. height: 14px;
  592. background: #000000;
  593. display: inline-block;
  594. margin: 0 20px;
  595. }
  596. }
  597. }
  598. .FlagOpen{
  599. display: block;
  600. }
  601. }
  602. footer{
  603. width: 100%;
  604. max-width: 1920px;
  605. margin: 0 auto;
  606. background-color: #f8f8f8;
  607. padding-top: 80px;
  608. position: relative;
  609. .footer{
  610. width: 100%;
  611. max-width: 1300px;
  612. margin: 0px auto;
  613. font-size: 16px;
  614. display: flex;
  615. justify-content: space-between;
  616. .footerLeft{
  617. width: 340px;
  618. text-align: left;
  619. color: #333333;
  620. .footerLogo{
  621. width: 291px;
  622. height: 64px;
  623. background: url('../images/logoB2.png') no-repeat;
  624. background-size: 100% 100%;
  625. margin-bottom: 50px;
  626. }
  627. .footerLCon1{
  628. width: 100%;
  629. display: flex;
  630. margin-top: 50px;
  631. justify-content: space-between;
  632. &>div{
  633. display: inline-block;
  634. font-size: 16px;
  635. font-weight: bold;
  636. span{
  637. opacity: 0.7;
  638. font-size: 16px;
  639. font-weight: 100;
  640. }
  641. }
  642. }
  643. .footerLCon2{
  644. width: 100%;
  645. font-size: 16px;
  646. // font-weight: bold;
  647. margin-top: 20px;
  648. span{
  649. // opacity: 0.7;
  650. font-weight: 100;
  651. }
  652. .txt16{
  653. font-size: 16px;
  654. }
  655. }
  656. }
  657. .footerRight{
  658. width: 176px;
  659. .btnDown{
  660. width: 100%;
  661. height: 40px;
  662. border-radius: 8px;
  663. border: 1px solid #FFFFFF;
  664. position: relative;
  665. .btnDownTitle{
  666. width: 100%;
  667. height: 40px;
  668. line-height: 40px;
  669. box-sizing: border-box;
  670. padding: 0px 20px;
  671. color: #fff;
  672. cursor: pointer;
  673. .tit{
  674. opacity: 0.5;
  675. }
  676. .iconfont{
  677. font-size: 14px;
  678. float: right;
  679. transition: all .3s ease;
  680. }
  681. }
  682. .btnDownMenu{
  683. position: absolute;
  684. top: 42px;
  685. left: 0px;
  686. width: 100%;
  687. min-height: 120px;
  688. max-height: 280px;
  689. overflow-y: auto;
  690. background: #fff;
  691. color: #000;
  692. border-radius: 8px;
  693. clip-path: inset(0% 0% 100% 0%);
  694. transition: all 0.3s ease-in-out;
  695. a{
  696. width: 100%;
  697. line-height: 20px;
  698. padding: 10px 20px;
  699. display: block;
  700. box-sizing: border-box;
  701. transition: all .3s ease-in-out;
  702. &:hover{
  703. color: #B81C25;
  704. }
  705. }
  706. }
  707. }
  708. .imgWx{
  709. text-align: center;
  710. span{
  711. margin-top: 10px;
  712. display: block;
  713. }
  714. }
  715. .btnShow{
  716. .btnDownTitle{
  717. .iconfont{
  718. transform: rotate(-180deg);
  719. }
  720. }
  721. .btnDownMenu{
  722. clip-path: inset(0% 0% 0% 0%);
  723. }
  724. }
  725. .btnUp,.footerLConM{
  726. display: none;
  727. }
  728. }
  729. .footerCenter{
  730. box-sizing: border-box;
  731. margin-bottom: 10px;
  732. display: flex;
  733. color: #333333;
  734. justify-content: flex-start;
  735. font-size: 16px;
  736. .h4{
  737. margin-bottom: 20px;
  738. }
  739. .h5R{
  740. margin-top: 15px;
  741. }
  742. &>div{
  743. margin-right: 58px;
  744. a{
  745. color: #333;
  746. display: block;
  747. span{
  748. display: inline-block;
  749. position: relative;
  750. &::before{
  751. content: '';
  752. position: absolute;
  753. bottom: -5px;
  754. left: 0px;
  755. width: 0%;
  756. height: 1px;
  757. background: #333;
  758. transition: all .3s ease-in-out;
  759. }
  760. }
  761. &:hover{
  762. span{
  763. &::before{
  764. width: 100%;
  765. }
  766. }
  767. }
  768. }
  769. &>.h7{
  770. font-size: 18px;
  771. }
  772. .h7{
  773. margin-bottom: 20px;
  774. font-weight: bold;
  775. font-family: 'MyFont1';
  776. }
  777. .h7R{
  778. margin-bottom: 20px;
  779. opacity: 0.7;
  780. }
  781. &>span{
  782. display: none;
  783. }
  784. .footerShow{
  785. display: flex;
  786. flex-direction: column;
  787. a{
  788. &:hover{
  789. color: #000;
  790. }
  791. }
  792. }
  793. }
  794. }
  795. .footerCenterM{
  796. display: none;
  797. }
  798. }
  799. .footerIcon{
  800. width: 100%;
  801. max-width: 1300px;
  802. margin: 0px auto;
  803. display: flex;
  804. flex-direction: row;
  805. justify-content: flex-end;
  806. padding-bottom: 20px;
  807. border-bottom: 1px solid #ffffff21;
  808. color: #fff;
  809. &>div{
  810. margin-left: 40px;
  811. cursor: pointer;
  812. position: relative;
  813. &>div{
  814. width: 187px;
  815. height: 186px;
  816. position: absolute;
  817. bottom:40px;
  818. right: -82px;
  819. // background: url('../images/weixin.png') no-repeat;
  820. // background-size: 100%;
  821. opacity: 0;
  822. clip-path: inset(0 0 100% 0);
  823. transition: opacity 0.3s ease-in-out;
  824. img{
  825. width: 100%;
  826. display: block;
  827. }
  828. }
  829. &:hover{
  830. &>div{
  831. opacity: 1;
  832. clip-path: inset(0 0 0 0);
  833. }
  834. }
  835. }
  836. .wxShow{
  837. div{
  838. opacity: 1;
  839. clip-path: inset(0 0 0 0);
  840. }
  841. }
  842. .iconfont{
  843. font-size: 24px;
  844. transition: all 0.3s ease;
  845. }
  846. }
  847. .footerText{
  848. width: 100%;
  849. max-width: 1300px;
  850. margin: 30px auto 0px;
  851. border-top: 1px solid #dfdfdf;
  852. text-align: center;
  853. color: #999999;
  854. font-size: 12px;
  855. box-sizing: border-box;
  856. padding:20px 15px;
  857. opacity: 0.7;
  858. a{
  859. color: #999999;
  860. }
  861. br,&>span{
  862. display: none;
  863. }
  864. }
  865. }
  866. .chooseM{
  867. display: none;
  868. }
  869. @media screen and (min-width: 1080px) and (max-width: 1480px) {
  870. footer {
  871. .footerIcon{
  872. .weixin{
  873. div{
  874. right: 0px;
  875. }
  876. }
  877. }
  878. }
  879. }
  880. @media screen and (min-width: 1080px) and (max-width: 1390px) {
  881. .headerPC{
  882. padding: 0px 50px;
  883. .logo{
  884. position: relative;
  885. left: 0px;
  886. }
  887. .language{
  888. position: relative;
  889. right: 0px;
  890. }
  891. }
  892. footer {
  893. .footer{
  894. justify-content: space-between;
  895. &>div{
  896. margin-right: 10px;
  897. }
  898. }
  899. .footerIcon{
  900. &>div{
  901. &>div{
  902. right: 0px;
  903. }
  904. }
  905. }
  906. }
  907. }
  908. /* 移动端样式 */
  909. @media screen and (max-width: 1080px) {
  910. // html,
  911. // body {
  912. // font-size: 14px;
  913. // }
  914. .title{
  915. font-size: 32px;
  916. line-height: 48px;
  917. }
  918. // 正文文本样式
  919. .text{
  920. font-size: 16px;
  921. line-height: 32px;
  922. }
  923. .btn{
  924. width: 175px;
  925. height: 35px;
  926. line-height: 35px;
  927. border-radius: 4px;
  928. min-width: 175px;
  929. }
  930. .btn2 {
  931. transform: scale(1);
  932. .btnCon{
  933. font-size: 12px;
  934. line-height: 42px;
  935. }
  936. .btnBg{
  937. // width: 42px;
  938. // height: 42px;
  939. // right: 10px;
  940. // top: 6px;
  941. -webkit-clip-path: inset(10px 10px 10px calc( 100% - 46px) round 18px);
  942. clip-path: inset(10px 10px 10px calc( 100% - 46px) round 18px);
  943. }
  944. .btnShow{
  945. width: 20px;
  946. height: 42px;
  947. right: 17px;
  948. top: 6px;
  949. .btnMove{
  950. width: 40px;
  951. height: 42px;
  952. transform: translateX(-20px);
  953. }
  954. .btnIcon{
  955. width: 20px;
  956. height: 42px;
  957. &>span{
  958. margin-right: 2px;
  959. }
  960. .dot{
  961. width: 2px;
  962. height: 2px;
  963. border-radius: 2px;
  964. }
  965. .arrow{
  966. width: 8px;
  967. height:8px;
  968. &>span{
  969. width: 8px;
  970. height: 2px;
  971. border-radius: 2px;
  972. }
  973. .arrowR{
  974. width: 2px;
  975. height: 8px;
  976. top: 0px;
  977. right: 0px;
  978. }
  979. .arrowL{
  980. width: 10px;
  981. top: 4px;
  982. left: -2px;
  983. }
  984. }
  985. }
  986. }
  987. &>a{
  988. border-radius: 27px;
  989. padding: 6px 80px 6px 25px;
  990. box-sizing: border-box;
  991. &:hover{
  992. .btnCon{
  993. .btnBg{
  994. // width: 100%;
  995. // height: 100%;
  996. // right: 0px;
  997. // top: 0px;
  998. // border-radius: 27px;
  999. }
  1000. &>div{
  1001. color: #ffffff;
  1002. }
  1003. }
  1004. .btnMove{
  1005. transform: translateX(0px);
  1006. }
  1007. }
  1008. }
  1009. }
  1010. .btn3{
  1011. width: 190px;
  1012. height: 40px;
  1013. line-height: 40px;
  1014. font-size: 14px;
  1015. border-radius: 50px;
  1016. &>span{
  1017. font-size: 20px;
  1018. }
  1019. }
  1020. .headerPC{
  1021. display: none;
  1022. }
  1023. .headerMobile{
  1024. width: 100%;
  1025. display: block;
  1026. .navFlagBtn{
  1027. .nav_btn_small{
  1028. &>div{
  1029. background-color: #000000;
  1030. }
  1031. }
  1032. }
  1033. }
  1034. .menuType{
  1035. .headerMobile{
  1036. .navFlagBtn{
  1037. .nav_btn_small{
  1038. &>div{
  1039. background-color: #ffffff;
  1040. }
  1041. }
  1042. }
  1043. .btnOpen{
  1044. .nav_btn_small{
  1045. &>div{
  1046. background-color: #000000;
  1047. }
  1048. }
  1049. }
  1050. }
  1051. }
  1052. footer{
  1053. width: 100%;
  1054. box-sizing: border-box;
  1055. padding: 45px 15px 0px 15px;
  1056. position: relative;
  1057. .footer{
  1058. margin-bottom: 0px;
  1059. justify-content: space-between;
  1060. flex-wrap: wrap;
  1061. padding: 0px;
  1062. .footerLeft{
  1063. width: 100%;
  1064. margin-right: 0px;
  1065. text-align: center;
  1066. .footerLogo{
  1067. width: 190px;
  1068. height: 40px;
  1069. margin: 0px auto;
  1070. background-size: auto 100%;
  1071. }
  1072. .footerLCon1,.footerLCon2{
  1073. display: none;
  1074. }
  1075. }
  1076. .footerCenter{
  1077. width: 100%;
  1078. margin-top: 55px;
  1079. margin-bottom: 30px;
  1080. margin-right: 0px;
  1081. justify-content: flex-start;
  1082. flex-wrap: wrap;
  1083. display: none;
  1084. &>div{
  1085. margin-right: 0px;
  1086. display: flex;
  1087. flex-wrap: wrap;
  1088. justify-content: space-between;
  1089. width: 55px;
  1090. margin-bottom: 0px;
  1091. padding: 15px 0px;
  1092. .h7{
  1093. margin-bottom: 0px;
  1094. line-height: 17px;
  1095. font-weight: normal;
  1096. }
  1097. .h7R{
  1098. margin-bottom: 0px;
  1099. }
  1100. &>a{
  1101. width: 50%;
  1102. span{
  1103. &::before{
  1104. display: none;
  1105. }
  1106. }
  1107. }
  1108. &>span{
  1109. font-size: 17px;
  1110. width: 17px;
  1111. height: 17px;
  1112. line-height: 17px;
  1113. display: inline-block;
  1114. &::before{
  1115. transform: rotate(90deg);
  1116. display: inline-block;
  1117. transition: all 0.5s ease-in-out;
  1118. }
  1119. }
  1120. .footerShow{
  1121. width: 100%;
  1122. display: flex;
  1123. flex-wrap: wrap;
  1124. height: 0px;
  1125. overflow: hidden;
  1126. transition: all 0.5s ease-in-out;
  1127. padding-top: 0px;
  1128. box-sizing: border-box;
  1129. flex-direction: row;
  1130. align-items: center;
  1131. a{
  1132. width: 100%;
  1133. box-sizing: border-box;
  1134. display: inline-block;
  1135. }
  1136. }
  1137. }
  1138. }
  1139. .footerCenterM{
  1140. display: block;
  1141. width: 100%;
  1142. margin-top: 40px;
  1143. margin-bottom: 30px;
  1144. padding-bottom: 15px;
  1145. border-bottom: 1px solid #dfdfdf;
  1146. a{
  1147. width: 60px;
  1148. color: #333333;
  1149. font-size: 14px;
  1150. display: inline-block;
  1151. padding: 15px 0px;
  1152. }
  1153. div{
  1154. width: 1px;
  1155. height: 8px;
  1156. background: #fff;
  1157. opacity: 0.2;
  1158. display: inline-block;
  1159. margin: 0px 13px;
  1160. }
  1161. }
  1162. .footerRight{
  1163. width: 100%;
  1164. color: #333333;
  1165. .btnUp{
  1166. display: block;
  1167. width: 100%;
  1168. font-size: 14px;
  1169. margin-bottom: 20px;
  1170. }
  1171. .footerLConM{
  1172. display: block;
  1173. font-size: 14px;
  1174. margin-bottom: 60px;
  1175. a{
  1176. color: #333333;
  1177. margin-top: 30px;
  1178. display: block;
  1179. width: 100%;
  1180. }
  1181. div{
  1182. color: #333333;
  1183. }
  1184. }
  1185. .imgWx{
  1186. padding-bottom: 30px;
  1187. img{
  1188. width: 90px;
  1189. display: inline-block;
  1190. }
  1191. span{
  1192. margin-top: 5px;
  1193. }
  1194. }
  1195. }
  1196. .ckShow{
  1197. &>span{
  1198. &::before{
  1199. transform: rotate(-90deg);
  1200. }
  1201. }
  1202. .footerShow{
  1203. padding-top: 10px;
  1204. }
  1205. .show1{
  1206. height: 172px;
  1207. }
  1208. .show2{
  1209. height: 172px;
  1210. }
  1211. .show3{
  1212. height: 210px;
  1213. }
  1214. .show4{
  1215. height: 90px;
  1216. }
  1217. .show5{
  1218. height: 172px;
  1219. }
  1220. }
  1221. }
  1222. .footerIcon{
  1223. width: 100%;
  1224. justify-content: space-evenly;
  1225. padding-bottom: 45px;
  1226. padding-top: 60px;
  1227. &>div{
  1228. margin-left: 0px;
  1229. }
  1230. }
  1231. .footerText{
  1232. font-size: 12px;
  1233. padding:18px 0px 25px 0px;
  1234. line-height: 22px;
  1235. margin: 10px auto 0px;
  1236. &>span{
  1237. width: 30px;
  1238. display: inline-block;
  1239. }
  1240. br{
  1241. display: block;
  1242. }
  1243. }
  1244. }
  1245. .chooseM{
  1246. display: flex;
  1247. font-size: 14px;
  1248. width: 100%;
  1249. height: 55px;
  1250. line-height: 55px;
  1251. position: fixed;
  1252. bottom: 0;
  1253. left: 0;
  1254. background: #ffffffe0;
  1255. z-index: 2;
  1256. align-items: center;
  1257. justify-content: space-evenly;
  1258. a{
  1259. display: inline-block;
  1260. text-align: center;
  1261. color: #000000;
  1262. width: 30%;
  1263. text-align: center;
  1264. }
  1265. span{
  1266. display: inline-block;
  1267. width: 1px;
  1268. height: 15px;
  1269. background: #000;
  1270. }
  1271. }
  1272. }