You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1491 lines
22 KiB

1 year ago
  1. @charset "utf-8";
  2. img {
  3. image-rendering: -webkit-optimize-contrast;
  4. }
  5. .head {
  6. height: 90px;
  7. position: fixed;
  8. left: 0;
  9. top: 40px;
  10. z-index: 99;
  11. width: 100%;
  12. box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  13. }
  14. .head-box {
  15. transition: 0.25s;
  16. }
  17. .head_active .head-box,
  18. .head_list .head-box {
  19. background: #fff;
  20. box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  21. }
  22. .logo {
  23. display: inline-block;
  24. height: 56px;
  25. margin-right: 75px;
  26. }
  27. .nav > span {
  28. position: relative;
  29. display: flex;
  30. align-items: center;
  31. height: 90px;
  32. margin-right: 50px;
  33. box-sizing: border-box;
  34. }
  35. .nav span:last-child {
  36. margin-right: 0;
  37. }
  38. .nava {
  39. display: block;
  40. line-height: 48px;
  41. border-bottom: 2px solid rgba(0, 0, 0, 0);
  42. font-size: 18px;
  43. }
  44. .nava.prod::after {
  45. content: '';
  46. position: relative;
  47. top: -2px;
  48. display: inline-block;
  49. width: 0;
  50. height: 0;
  51. margin-left: 10px;
  52. border-left: 5px solid transparent;
  53. border-right: 5px solid transparent;
  54. border-top: 5px solid #333;
  55. transition: all 0.25s;
  56. }
  57. .nav span.active .nava {
  58. color: #20a53a;
  59. border-bottom: 2px solid #20a53a;
  60. font-weight: 600;
  61. }
  62. .nav span.active .nava.prod::after,
  63. .nava.prod:hover::after {
  64. border-top-color: #20a53a;
  65. }
  66. .nav span:hover .nava {
  67. color: #20a53a;
  68. }
  69. .navhide {
  70. z-index: 9;
  71. position: absolute;
  72. left: 50%;
  73. top: 100%;
  74. margin-top: 20px;
  75. background: #fff;
  76. padding: 0;
  77. overflow: hidden;
  78. width: 170px;
  79. margin-left: -85px;
  80. opacity: 0;
  81. visibility: hidden;
  82. transition: 0.25s;
  83. box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  84. /* padding: 5px; */
  85. }
  86. .nav span:hover .navhide {
  87. opacity: 1;
  88. visibility: inherit;
  89. margin-top: 0;
  90. padding: 8px 0;
  91. }
  92. .navhide a {
  93. display: flex;
  94. display: -webkit-box;
  95. -webkit-box-orient: vertical;
  96. -webkit-line-clamp: 1;
  97. overflow: hidden;
  98. line-height: 38px;
  99. text-align: center;
  100. padding: 0 10px;
  101. color: #666;
  102. font-size: 14px;
  103. }
  104. .navhide a.active {
  105. background-color: #efefef;
  106. color: #20a53a;
  107. }
  108. .navhide a:hover {
  109. color: #20a53a;
  110. }
  111. .hdr a {
  112. line-height: 38px;
  113. width: 120px;
  114. font-size: 18px;
  115. font-weight: bold;
  116. color: #20a53a;
  117. display: inline-block;
  118. border: 1px solid #20a53a;
  119. border-radius: 4px;
  120. margin-left: 12px;
  121. text-align: center;
  122. }
  123. .hdr a.active,
  124. .hdr a:hover {
  125. background: #20a53a;
  126. color: #fff;
  127. }
  128. .hdr a.user {
  129. width: 140px;
  130. }
  131. .hdr a.user .icon {
  132. display: inline-block;
  133. width: 14px;
  134. height: 14px;
  135. margin-right: 4px;
  136. background: url(../images/account.png) no-repeat;
  137. background-position: 0 0;
  138. vertical-align: middle;
  139. }
  140. .i1 {
  141. background: url(../images/11bg_01.jpg) no-repeat top center #fff;
  142. background-size: 100%;
  143. padding: 80px 0 125px;
  144. }
  145. .i1,
  146. .i2 {
  147. position: relative;
  148. z-index: 10;
  149. }
  150. .i1.i1-wave {
  151. background: none;
  152. }
  153. .i1t h1 {
  154. font-weight: bold;
  155. font-size: 56px;
  156. color: #162016;
  157. }
  158. .i1ta a {
  159. line-height: 65px;
  160. /* background: url(../images/i1abg_03.png) repeat; */
  161. background: linear-gradient(#36bd89, #20a53a);
  162. color: #fff;
  163. display: inline-block;
  164. border-radius: 20px;
  165. width: 240px;
  166. box-shadow: 0 6px 10px rgba(0, 110, 21, 0.3);
  167. font-size: 22px;
  168. }
  169. .i1ta a:hover {
  170. -webkit-filter: brightness(130%);
  171. }
  172. .i1ta a + a {
  173. margin-left: 50px;
  174. }
  175. .i1timg img {
  176. max-width: 90%;
  177. image-rendering: -webkit-optimize-contrast;
  178. }
  179. .i1ba {
  180. height: 120px;
  181. border-radius: 8px;
  182. background: #f7f7f7;
  183. }
  184. .i1ba img {
  185. max-width: 90%;
  186. max-height: 70%;
  187. }
  188. .swiper-pagination-i1 {
  189. position: relative;
  190. margin-top: 22px;
  191. text-align: center;
  192. }
  193. .swiper-pagination-i1 .swiper-pagination-bullet {
  194. width: 3px;
  195. height: 3px;
  196. background: #cacaca;
  197. margin: 0 5px;
  198. opacity: 1;
  199. border: 3px solid #fff;
  200. padding: 3px;
  201. transition: 0.25s;
  202. }
  203. .swiper-pagination-i1 .swiper-pagination-bullet-active {
  204. border: 3px solid #20a53a;
  205. background: #fff;
  206. }
  207. .i2a {
  208. margin-top: 0;
  209. padding-top: 100px;
  210. }
  211. .i2a:first-child {
  212. margin-top: -100px;
  213. padding-top: 100px;
  214. }
  215. .i2a:nth-child(even) {
  216. flex-flow: row-reverse;
  217. }
  218. .i2atxt {
  219. width: 30%;
  220. padding-bottom: 50px;
  221. }
  222. .i2aimg {
  223. width: 67%;
  224. }
  225. .i2atxt img {
  226. width: 36%;
  227. }
  228. .i2atxt h1 {
  229. line-height: 45px;
  230. margin-top: -50px;
  231. }
  232. .ititle {
  233. font-size: 38px;
  234. }
  235. .i2aline {
  236. background: #20a53a;
  237. height: 3px;
  238. width: 45px;
  239. display: block;
  240. margin: 25px 0;
  241. }
  242. .i3ocean {
  243. height: 200px;
  244. width: 100%;
  245. position: relative;
  246. bottom: -50px;
  247. z-index: 0;
  248. overflow: hidden;
  249. }
  250. .i3wave {
  251. background: url(../images/wave.svg) repeat-x;
  252. position: absolute;
  253. top: 0px;
  254. width: 6400px;
  255. height: 198px;
  256. -webkit-animation: i3wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  257. animation: i3wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  258. transform: translate3d(0, 0, 0);
  259. opacity: 0.7;
  260. }
  261. .i3wave:nth-of-type(2) {
  262. top: 20px;
  263. -webkit-animation: i3wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
  264. animation: i3wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
  265. opacity: 0.7;
  266. }
  267. @-webkit-keyframes i3wave {
  268. 0% {
  269. margin-left: 0;
  270. }
  271. 100% {
  272. margin-left: -1600px;
  273. }
  274. }
  275. @keyframes i3wave {
  276. 0% {
  277. margin-left: 0;
  278. }
  279. 100% {
  280. margin-left: -1600px;
  281. }
  282. }
  283. @-webkit-keyframes swell {
  284. 0%,
  285. 100% {
  286. transform: translate3d(0, -25px, 0);
  287. }
  288. 50% {
  289. transform: translate3d(0, 5px, 0);
  290. }
  291. }
  292. @keyframes swell {
  293. 0%,
  294. 100% {
  295. transform: translate3d(0, -25px, 0);
  296. }
  297. 50% {
  298. transform: translate3d(0, 5px, 0);
  299. }
  300. }
  301. .i3 {
  302. background: #edf6ef;
  303. padding: 0 0 140px 0;
  304. position: relative;
  305. }
  306. .i31a {
  307. width: 23%;
  308. }
  309. .textcolor {
  310. color: #20a53a;
  311. }
  312. .md {
  313. padding: 80px 0;
  314. }
  315. .i4t {
  316. padding: 15px;
  317. background: #fff;
  318. color: #fff;
  319. position: relative;
  320. margin-top: -90px;
  321. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.07);
  322. }
  323. .i4tw {
  324. background: #20a53a;
  325. padding: 30px 5%;
  326. border-radius: 7px;
  327. }
  328. .i4tatop h1 {
  329. font-size: 60px;
  330. padding-right: 20px;
  331. margin-right: 15px;
  332. line-height: 60px;
  333. }
  334. .i4tatop h1 span {
  335. font-size: 16px;
  336. line-height: 30px;
  337. position: absolute;
  338. right: 0;
  339. top: 0;
  340. }
  341. .i4tatop h1 span.unit {
  342. right: -5px;
  343. font-size: 18px;
  344. }
  345. .i4taline {
  346. width: 1px;
  347. height: 55px;
  348. background: rgba(0, 0, 0, 0.3);
  349. }
  350. .i4ba {
  351. height: 130px;
  352. margin: 10px;
  353. border-radius: 8px;
  354. /* filter: grayscale(100%); */
  355. filter: gray;
  356. }
  357. .i4ba.honor {
  358. height: 220px;
  359. }
  360. .i4ba:hover {
  361. background: #fff;
  362. box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  363. filter: inherit;
  364. }
  365. .i4ba img {
  366. max-width: 85%;
  367. max-height: 85%;
  368. }
  369. .swiper-button-next-i4,
  370. .swiper-button-prev-i4,
  371. .swiper-button-next-i5,
  372. .swiper-button-prev-i5 {
  373. width: 42px;
  374. height: 42px;
  375. display: flex;
  376. justify-content: center;
  377. align-items: center;
  378. margin-top: -21px;
  379. font-size: 42px;
  380. color: #999;
  381. cursor: pointer;
  382. background: none;
  383. }
  384. .swiper-button-next-i4:hover,
  385. .swiper-button-prev-i4:hover,
  386. .swiper-button-next-i5:hover,
  387. .swiper-button-prev-i5:hover {
  388. color: #20a53a;
  389. }
  390. .swiper-button-next-i4,
  391. .swiper-button-next-i5 {
  392. right: -50px;
  393. }
  394. .swiper-button-prev-i4,
  395. .swiper-button-prev-i5 {
  396. left: -50px;
  397. }
  398. .flex {
  399. display: flex;
  400. }
  401. .justify-center {
  402. justify-content: center;
  403. }
  404. .overview-iframe {
  405. background-image: url(../images/pc_bg.png);
  406. background-repeat: no-repeat;
  407. height: 850px;
  408. position: relative;
  409. background-repeat: no-repeat;
  410. height: 850px;
  411. width: 1210px;
  412. margin: 0 auto;
  413. }
  414. .overview-button-group .button {
  415. height: 60px;
  416. line-height: 58px;
  417. font-size: 22px;
  418. text-align: center;
  419. font-weight: 700;
  420. border-radius: 10px;
  421. margin: 0 20px;
  422. width: 240px;
  423. }
  424. .overview-iframe iframe {
  425. position: absolute;
  426. left: 15px;
  427. top: 61px;
  428. width: 1170px;
  429. height: 766px;
  430. margin-top: -12px;
  431. margin-left: 4px;
  432. border: 1px solid #bbb;
  433. }
  434. .button {
  435. border: #20a53a 1px solid;
  436. border-radius: 4px;
  437. cursor: pointer;
  438. background-color: #20a53a;
  439. color: #fff;
  440. text-decoration: none;
  441. }
  442. .foot {
  443. background: url(../images/footbg_02.jpg) no-repeat bottom center #e7f0e9;
  444. padding: 80px 0 30px 0;
  445. }
  446. .foot a:hover {
  447. color: #20a53a;
  448. }
  449. .fta p,
  450. .fta p a {
  451. color: #666;
  452. }
  453. .fb2,
  454. .fb2 a {
  455. color: #777;
  456. }
  457. .fb {
  458. line-height: 24px;
  459. }
  460. /*产品*/
  461. .zindex {
  462. z-index: 9;
  463. position: relative;
  464. }
  465. .prdbnr {
  466. width: 53%;
  467. margin-left: 5%;
  468. }
  469. .prdbnl {
  470. margin-top: -50px;
  471. }
  472. .i1ta_1 a {
  473. border-radius: 8px;
  474. width: 240px;
  475. }
  476. .pd1 {
  477. position: relative;
  478. z-index: 9;
  479. margin-top: -75px;
  480. }
  481. .pd1 .swiper-container {
  482. z-index: 9;
  483. width: 100%;
  484. }
  485. .pd1a {
  486. background: #fff;
  487. box-shadow: 0 0 10px rgba(0, 68, 12, 0.1);
  488. margin: 10px;
  489. border-radius: 8px;
  490. padding: 35px 20px;
  491. z-index: 9;
  492. cursor: pointer;
  493. }
  494. .swiper-slide-thumb-active .pd1a {
  495. background: url(../images/pd1bg_03.jpg) no-repeat center;
  496. background-size: cover;
  497. }
  498. .swiper-slide-thumb-active .pd1a * {
  499. color: #fff;
  500. }
  501. .pdbimg {
  502. cursor: pointer;
  503. }
  504. .pdbimg img {
  505. width: 100%;
  506. }
  507. .pdbimg img.img1 {
  508. display: block;
  509. }
  510. .pdbimg img.img2 {
  511. display: none;
  512. }
  513. .swiper-slide-thumb-active .pdbimg img.img1 {
  514. display: none;
  515. }
  516. .swiper-slide-thumb-active .pdbimg img.img2 {
  517. display: block;
  518. }
  519. .pd1ai {
  520. width: 100%;
  521. height: 100%;
  522. position: absolute;
  523. left: 0;
  524. top: 0;
  525. }
  526. .swiper-slide-thumb-active .pd1a .pd1ai {
  527. filter: grayscale(100%) brightness(300%);
  528. }
  529. .swiper-slide-thumb-active .pd1a {
  530. box-shadow: 0 0 10px rgba(0, 68, 12, 0.5);
  531. }
  532. .pd2 {
  533. background: url(../images/pd2bg_02.png) no-repeat bottom center;
  534. background-size: auto 60.5%;
  535. }
  536. .pdbox .i2aimg {
  537. width: 55%;
  538. }
  539. .pdbox .i2atxt {
  540. width: 40%;
  541. background-size: 100% !important;
  542. }
  543. .pdbox .i2atxt h1 {
  544. margin-top: 0;
  545. }
  546. .i2atxt1 p {
  547. margin-top: 5px;
  548. }
  549. .i2atxt1 p i {
  550. width: 6px;
  551. height: 6px;
  552. background: #20a53a;
  553. border-radius: 100%;
  554. }
  555. .prd_more {
  556. width: 160px;
  557. border-radius: 50px;
  558. display: inline-block;
  559. /* background: url(../images/i1abg_03.png) repeat; */
  560. background: linear-gradient(#36bd89, #20a53a);
  561. background-size: 100% 100%;
  562. color: #fff;
  563. text-align: center;
  564. line-height: 50px;
  565. box-shadow: 0 4px 15px rgba(0, 68, 12, 0.2);
  566. }
  567. .prd_more:hover {
  568. -webkit-filter: brightness(110%);
  569. }
  570. .pi1 {
  571. margin-top: -30px;
  572. }
  573. .pi1top {
  574. width: 100%;
  575. padding-bottom: 0;
  576. }
  577. .pi1top .i2aline {
  578. margin: 15px auto;
  579. }
  580. .pi1top h1 {
  581. margin: 0;
  582. }
  583. .pil {
  584. width: 15%;
  585. margin-right: 3%;
  586. border-left: 1px solid #def2e2;
  587. }
  588. .pil li {
  589. padding-left: 23px;
  590. border-left: 4px solid rgba(0, 0, 0, 0);
  591. line-height: 42px;
  592. cursor: pointer;
  593. transition: 0.25s;
  594. }
  595. .pil li.active {
  596. border-left: 4px solid #20a53a;
  597. color: #20a53a;
  598. font-size: 26px;
  599. margin: 5px 0;
  600. }
  601. .pia {
  602. background-size: 100% !important;
  603. }
  604. .pia:first-child {
  605. margin-top: 0;
  606. }
  607. .pia:nth-of-type(even) .piw {
  608. flex-flow: row-reverse;
  609. }
  610. .pia:nth-of-type(even) .pil {
  611. margin-left: 5%;
  612. margin-right: 0;
  613. }
  614. .pibox {
  615. /* background: url(../images/pd2bg_02.png) no-repeat bottom center; */
  616. /* background-size: auto 56%; */
  617. }
  618. /*活动*/
  619. .hdbn {
  620. height: 350px;
  621. }
  622. .hdnav {
  623. box-shadow: 0 8px 25px rgba(0, 68, 12, 0.1);
  624. margin-top: -35px;
  625. }
  626. .hdnav a,
  627. .hdnav li {
  628. position: relative;
  629. display: block;
  630. line-height: 70px;
  631. width: 25%;
  632. text-align: center;
  633. cursor: pointer;
  634. transition: 0.25s;
  635. }
  636. .hdnav a.active,
  637. .hdnav li.active {
  638. background-image: linear-gradient(#e7f5e6, #fff);
  639. }
  640. .hdnav li::before {
  641. content: '';
  642. position: absolute;
  643. display: block;
  644. left: 0;
  645. top: 0;
  646. width: 100%;
  647. }
  648. .hdnav li.active::before {
  649. border-top: 4px solid #20a53a;
  650. }
  651. .hdnav a:hover,
  652. .hdnav li:hover {
  653. color: #20a53a;
  654. }
  655. .hdw {
  656. width: 102%;
  657. }
  658. .hda {
  659. width: 31.33%;
  660. margin: 17px 0;
  661. margin-right: 2%;
  662. border-radius: 8px;
  663. box-shadow: 0 5px 15px rgba(0, 68, 12, 0.1);
  664. }
  665. .hdat {
  666. padding-left: 20px;
  667. color: #fff;
  668. border-radius: 8px 8px 0 0;
  669. }
  670. .hdab {
  671. background: #fff;
  672. transition: 0.25s;
  673. border-radius: 0 0 8px 8px;
  674. }
  675. .hdab p {
  676. line-height: 30px;
  677. height: 60px;
  678. }
  679. .hdab span {
  680. display: inline-block;
  681. line-height: 45px;
  682. width: 140px;
  683. border-radius: 48px;
  684. text-align: center;
  685. transition: 0.25s;
  686. }
  687. .hda:hover {
  688. transform: translateY(-10px);
  689. }
  690. .hdab_green span {
  691. border: 1px solid #20a53a;
  692. color: #20a53a;
  693. }
  694. .hda:hover .hdab_green {
  695. box-shadow: 0 0 65px rgba(25, 172, 54, 0.3) inset;
  696. }
  697. .hda:hover .hdab_green span {
  698. background-image: linear-gradient(#55b991, #22a63d);
  699. color: #fff;
  700. }
  701. .hdab_yellow span {
  702. border: 1px solid #ff8134;
  703. color: #ff8134;
  704. }
  705. .hda:hover .hdab_yellow {
  706. box-shadow: 0 0 65px rgba(255, 129, 52, 0.3) inset;
  707. }
  708. .hda:hover .hdab_yellow span {
  709. background-image: linear-gradient(#ff8134, #ef7428);
  710. color: #fff;
  711. }
  712. .hdab_blue span {
  713. border: 1px solid #4b78ff;
  714. color: #4b78ff;
  715. }
  716. .hda:hover .hdab_blue {
  717. box-shadow: 0 0 65px rgba(72, 120, 255, 0.3) inset;
  718. }
  719. .hda:hover .hdab_blue span {
  720. background-image: linear-gradient(#4b78ff, #3d6af0);
  721. color: #fff;
  722. }
  723. .hda {
  724. position: relative;
  725. }
  726. .hot {
  727. width: 100px;
  728. height: 100px;
  729. background: url(../images/hot_03.png) no-repeat center;
  730. background-size: 100% 100%;
  731. position: absolute;
  732. right: -5px;
  733. top: -5px;
  734. z-index: 9;
  735. }
  736. /* 友情链接 */
  737. .flink {
  738. color: #666;
  739. font-size: 12px;
  740. }
  741. .flink a {
  742. color: #666;
  743. }
  744. .flink a:hover {
  745. color: #20a53a;
  746. }
  747. /* 波浪效果背景 */
  748. .bg-wave {
  749. position: absolute;
  750. top: 130px;
  751. left: 0;
  752. width: 100%;
  753. height: 800px;
  754. background: linear-gradient(0deg, #d8efdb, #edf7ef);
  755. z-index: 8;
  756. }
  757. .bg-wave.top {
  758. top: 90px;
  759. }
  760. .bg-wave.transparent {
  761. opacity: 0;
  762. z-index: 9;
  763. }
  764. .bg-wave canvas {
  765. width: 100%;
  766. height: 100%;
  767. }
  768. .swiper-pagination {
  769. position: static;
  770. }
  771. .swiper-pagination-i1 .swiper-pagination-bullet {
  772. width: 18px;
  773. height: 18px;
  774. }
  775. .swiper-slide .title {
  776. min-height: 24px;
  777. line-height: 1;
  778. margin-bottom: 15px;
  779. font-size: 22px;
  780. text-align: center;
  781. }
  782. /* end */
  783. @media only screen and (max-width: 1399px) {
  784. .pil li.active {
  785. font-size: 24px;
  786. }
  787. .hdat img {
  788. height: 80px;
  789. }
  790. .hot {
  791. width: 80px;
  792. height: 80px;
  793. }
  794. .hdab span {
  795. line-height: 40px;
  796. width: 130px;
  797. font-size: 15px;
  798. }
  799. .dja {
  800. width: 380px;
  801. }
  802. .djbox_active .djat .prod-head {
  803. width: 378px;
  804. }
  805. .djat .prod-head,
  806. .djab {
  807. padding: 20px;
  808. }
  809. .djat .mt_20 {
  810. margin-top: 12px;
  811. }
  812. .djab {
  813. height: 170px;
  814. }
  815. .xzat,
  816. .xzahidea,
  817. .djabb a {
  818. line-height: 40px;
  819. font-size: 16px;
  820. }
  821. .djtopa a {
  822. font-size: 15px;
  823. width: 150px;
  824. line-height: 46px;
  825. }
  826. .pd1a {
  827. padding: 25px 15px;
  828. }
  829. .pd1ar h3 {
  830. font-size: 16px;
  831. }
  832. .pd1ar p {
  833. margin-top: 8px;
  834. font-size: 12px;
  835. }
  836. .pay-price .pay-price-item {
  837. height: 70px;
  838. }
  839. .pay-price .pay-price-num {
  840. font-size: 16px;
  841. }
  842. .pay-price .pay-price-name {
  843. font-size: 12px;
  844. }
  845. .enterprise_qualification .box {
  846. justify-content: space-between;
  847. }
  848. .enterprise_qualification .box .item {
  849. margin-right: 0;
  850. margin-bottom: 40px;
  851. }
  852. }
  853. @media only screen and (min-width: 768px) and (max-width: 1299px) {
  854. .videohidebox {
  855. width: 80%;
  856. }
  857. .i1t h1 {
  858. font-size: 40px;
  859. }
  860. .hdl .logo {
  861. margin-right: 60px;
  862. }
  863. .hdr a {
  864. line-height: 32px;
  865. width: 80px;
  866. font-size: 14px;
  867. }
  868. .hdr a.user {
  869. width: 110px;
  870. }
  871. .nava {
  872. font-size: 16px;
  873. }
  874. .i1ta a {
  875. line-height: 50px;
  876. width: 220px;
  877. font-size: 18px;
  878. }
  879. .i1ta a img {
  880. height: 20px;
  881. }
  882. .i1 {
  883. background-size: 100% 60%;
  884. }
  885. .i1ba {
  886. height: 100px;
  887. }
  888. .ititle {
  889. font-size: 26px;
  890. }
  891. .i2atxt h1 {
  892. line-height: 33px;
  893. }
  894. .i3 {
  895. padding: 0 0 130px 0;
  896. }
  897. .i31a img {
  898. width: 70px;
  899. }
  900. .i31a .txt {
  901. font-size: 13px;
  902. }
  903. .i4tatop h1 {
  904. font-size: 40px;
  905. line-height: 40px;
  906. }
  907. .i4tatop h1 span {
  908. font-size: 14px;
  909. }
  910. .i4tw {
  911. padding: 20px 3%;
  912. }
  913. .i4t {
  914. margin-top: -75px;
  915. }
  916. .swiper-button-next-i4 {
  917. right: 0;
  918. }
  919. .swiper-button-prev-i4 {
  920. left: 0;
  921. }
  922. .i4ba {
  923. height: 100px;
  924. }
  925. .foot {
  926. padding: 40px 0 20px 0;
  927. }
  928. .ftlogo img {
  929. width: 100px;
  930. }
  931. .fta .text16 {
  932. line-height: 28px;
  933. font-size: 13px;
  934. }
  935. .fta h3 {
  936. font-size: 16px;
  937. }
  938. .ftr img {
  939. width: 100px;
  940. }
  941. .fb {
  942. line-height: 24px;
  943. margin-top: 35px;
  944. font-size: 13px;
  945. }
  946. .pd1 {
  947. margin-top: -54px;
  948. }
  949. .pd1a {
  950. padding: 15px;
  951. }
  952. .pd1ai {
  953. background-size: 80% !important;
  954. }
  955. .prd_more {
  956. line-height: 40px;
  957. width: 130px;
  958. }
  959. .pil li {
  960. line-height: 36px;
  961. padding: 0 15px;
  962. }
  963. .pil li.active {
  964. font-size: 20px;
  965. }
  966. .hda {
  967. margin: 10px 0;
  968. margin-right: 2%;
  969. }
  970. .hdat img {
  971. height: 70px;
  972. }
  973. .hot {
  974. width: 70px;
  975. height: 70px;
  976. }
  977. .hdab span {
  978. line-height: 35px;
  979. width: 100px;
  980. font-size: 14px;
  981. }
  982. .hdbn {
  983. height: 300px;
  984. }
  985. .dja {
  986. width: 32%;
  987. }
  988. .djbox_active .djat .prod-head {
  989. width: 30.8%;
  990. }
  991. .djab_null {
  992. width: 100%;
  993. }
  994. .djat .prod-head,
  995. .djab {
  996. padding: 15px;
  997. }
  998. .djat .mt_20 {
  999. margin-top: 8px;
  1000. }
  1001. .djab {
  1002. height: 154px;
  1003. }
  1004. .xzat,
  1005. .xzahidea,
  1006. .djabb a {
  1007. line-height: 35px;
  1008. font-size: 14px;
  1009. }
  1010. .djtopa a {
  1011. font-size: 14px;
  1012. width: 130px;
  1013. line-height: 38px;
  1014. }
  1015. .djtop h1 {
  1016. font-size: 36px;
  1017. }
  1018. .enterprise_qualification .box {
  1019. justify-content: flex-start;
  1020. }
  1021. .enterprise_qualification .box .item {
  1022. width: 33.33%;
  1023. }
  1024. }
  1025. @media only screen and (max-width: 1120px) {
  1026. .hdl .logo {
  1027. margin-right: 40px;
  1028. }
  1029. .nav span {
  1030. margin-right: 30px;
  1031. }
  1032. .install-box .title {
  1033. margin-bottom: 6px;
  1034. font-size: 16px;
  1035. }
  1036. }
  1037. @media only screen and (max-width: 950px) {
  1038. .mt_100 {
  1039. margin-top: 35px;
  1040. }
  1041. .mt_35,
  1042. .mt_40,
  1043. .mt_45,
  1044. .mt_50,
  1045. .mt_60,
  1046. .mt_70,
  1047. .mt_80 {
  1048. margin-top: 45px;
  1049. }
  1050. /*视频*/
  1051. .videohidebox {
  1052. width: 90%;
  1053. margin-left: 0;
  1054. padding-bottom: 0;
  1055. }
  1056. .videohidebox_1 p {
  1057. height: 30px;
  1058. line-height: 30px;
  1059. font-size: 14px;
  1060. display: -webkit-box;
  1061. -webkit-box-orient: vertical;
  1062. -webkit-line-clamp: 1;
  1063. overflow: hidden;
  1064. }
  1065. .i1 {
  1066. padding-top: 50px;
  1067. padding-bottom: 50px;
  1068. }
  1069. .prdbn {
  1070. padding: 70px 0 50px 0;
  1071. height: auto !important;
  1072. }
  1073. .hdbn {
  1074. margin-top: 0;
  1075. height: 260px;
  1076. }
  1077. .hda {
  1078. width: 48%;
  1079. }
  1080. .bg-wave,
  1081. .bg-wave.top {
  1082. top: 60px;
  1083. }
  1084. .bg-wave {
  1085. height: 600px;
  1086. }
  1087. }
  1088. @media only screen and (max-width: 768px) {
  1089. /* 邀请大使 */
  1090. .bt_invite_tips {
  1091. height: auto;
  1092. padding: 15px 0;
  1093. flex-direction: column;
  1094. }
  1095. .tips_username,
  1096. .tips_package,
  1097. .tips_btn {
  1098. margin-bottom: 10px;
  1099. font-size: 14px !important;
  1100. margin-right: 0 !important;
  1101. }
  1102. .tips_btn {
  1103. margin-bottom: 0;
  1104. }
  1105. .tips_btn span {
  1106. width: 110px !important;
  1107. font-size: 13px !important;
  1108. padding: 7px !important;
  1109. }
  1110. /* end */
  1111. .flex_lmr_wap {
  1112. justify-content: space-between;
  1113. width: 100%;
  1114. }
  1115. .wap_disblock {
  1116. display: block;
  1117. }
  1118. .swiper-button-next-i4,
  1119. .swiper-button-prev-i4 {
  1120. display: none;
  1121. }
  1122. .i1 {
  1123. background-size: 100% 60%;
  1124. }
  1125. .i1,
  1126. .md {
  1127. padding: 25px 0;
  1128. }
  1129. .i1t h1 {
  1130. font-size: 24px;
  1131. }
  1132. .i1t h1 img {
  1133. height: 20px;
  1134. }
  1135. .i1ta a {
  1136. line-height: 40px;
  1137. width: 150px;
  1138. font-size: 15px;
  1139. margin: 0 5px;
  1140. }
  1141. .i1ta a:nth-child(1) {
  1142. margin-right: 0 !important;
  1143. margin-bottom: 10px;
  1144. }
  1145. .i1ta a img {
  1146. height: 18px;
  1147. }
  1148. .i1ba {
  1149. height: 80px;
  1150. }
  1151. .i2a {
  1152. padding-top: 45px;
  1153. margin-top: 0;
  1154. }
  1155. .i2a:first-child {
  1156. margin-top: -45px;
  1157. padding-top: 45px;
  1158. }
  1159. .i2atxt {
  1160. padding-bottom: 10px;
  1161. }
  1162. .i2atxt img {
  1163. width: 70px;
  1164. display: block;
  1165. margin: 0 auto;
  1166. }
  1167. .i2atxt h1 {
  1168. line-height: 30px;
  1169. margin-top: -30px;
  1170. text-align: center;
  1171. }
  1172. .ititle {
  1173. font-size: 22px;
  1174. }
  1175. .i2aline {
  1176. width: 30px;
  1177. margin: 15px 0;
  1178. margin: 15px auto;
  1179. }
  1180. .i3 {
  1181. padding: 0 0 25px 0;
  1182. margin-top: 15px;
  1183. }
  1184. .i31 {
  1185. margin-top: 0;
  1186. margin-top: 12px;
  1187. }
  1188. .i31a {
  1189. width: 100%;
  1190. padding: 18px 0;
  1191. }
  1192. .i31a img {
  1193. width: 60px;
  1194. }
  1195. .i4taline {
  1196. width: 100%;
  1197. height: 1px;
  1198. margin: 15px 0;
  1199. }
  1200. .i4tatop h1 {
  1201. font-size: 30px;
  1202. line-height: 30px;
  1203. }
  1204. .i4tatop h1 span {
  1205. font-size: 13px;
  1206. line-height: 20px;
  1207. }
  1208. .i4t {
  1209. margin-top: 15px;
  1210. }
  1211. .i4ba {
  1212. height: 80px;
  1213. }
  1214. .foot {
  1215. padding: 25px 0 15px 0;
  1216. }
  1217. .ftlogo {
  1218. width: 100%;
  1219. }
  1220. .ftlogo img {
  1221. display: block;
  1222. width: 100px;
  1223. margin: 0 auto;
  1224. }
  1225. .fta1 {
  1226. max-width: 33.33%;
  1227. text-align: center;
  1228. margin-top: 15px;
  1229. }
  1230. .fta .text16 {
  1231. font-size: 12px;
  1232. line-height: 22px;
  1233. margin-top: 5px;
  1234. }
  1235. .fta2 {
  1236. margin-top: 15px;
  1237. }
  1238. .ftr {
  1239. margin-top: 15px;
  1240. text-align: center;
  1241. width: 100%;
  1242. }
  1243. .fb {
  1244. font-size: 12px;
  1245. line-height: 22px;
  1246. }
  1247. .prdbn {
  1248. padding-bottom: 0px;
  1249. }
  1250. .pd1 {
  1251. margin-top: -18px;
  1252. }
  1253. .pd1al {
  1254. width: 100%;
  1255. }
  1256. .pd1ar {
  1257. margin-top: 10px;
  1258. width: 100%;
  1259. }
  1260. .pd1ar h3 {
  1261. font-size: 14px;
  1262. line-height: 22px;
  1263. }
  1264. .pd1ar p {
  1265. margin-top: 5px;
  1266. }
  1267. .pd1a {
  1268. padding: 10px 8px;
  1269. width: 100%;
  1270. margin-top: 15px;
  1271. width: 100%;
  1272. margin: 0;
  1273. display: block;
  1274. text-align: center;
  1275. }
  1276. /*.gallery-thumbs .swiper-slide{
  1277. padding: 10px;
  1278. }*/
  1279. .pd1ai {
  1280. background-size: 60% !important;
  1281. }
  1282. .prd_more {
  1283. font-size: 12px;
  1284. line-height: 36px;
  1285. width: 110px;
  1286. }
  1287. .pd2 {
  1288. background-size: 200% 60.5%;
  1289. }
  1290. .piw {
  1291. display: flex !important;
  1292. }
  1293. .pil {
  1294. width: auto !important;
  1295. max-height: 300px;
  1296. overflow: hidden;
  1297. overflow-y: auto;
  1298. -webkit-overflow-scrolling: touch;
  1299. }
  1300. /*.pil{
  1301. border: 0;
  1302. margin-bottom: 15px;
  1303. }*/
  1304. /*.pil ul{
  1305. display: flex;
  1306. flex-wrap: wrap;
  1307. }*/
  1308. .pia:first-child {
  1309. margin-top: 25px;
  1310. }
  1311. .pia:nth-child(even) .pil {
  1312. margin-left: 8px !important;
  1313. }
  1314. .pil li {
  1315. line-height: 26px;
  1316. padding: 0 8px;
  1317. font-size: 12px;
  1318. }
  1319. .pil li.active {
  1320. line-height: 26px;
  1321. font-size: 14px;
  1322. border-left: 2px solid #20a53a;
  1323. margin: 0;
  1324. }
  1325. .piw {
  1326. margin-top: 20px;
  1327. }
  1328. .hdbn {
  1329. margin-top: 0;
  1330. height: 150px;
  1331. }
  1332. .hdnav {
  1333. margin-top: 15px;
  1334. }
  1335. .hdnav a,
  1336. .hdnav li {
  1337. line-height: 40px;
  1338. border-top-width: 1px !important;
  1339. }
  1340. .hdbn .prdbnl {
  1341. flex: inherit;
  1342. flex-grow: inherit;
  1343. margin-top: 0 !important;
  1344. width: 70% !important;
  1345. }
  1346. .hda {
  1347. margin: 0;
  1348. margin-top: 15px;
  1349. width: 100%;
  1350. }
  1351. .hdat img {
  1352. height: 70px;
  1353. }
  1354. .hot {
  1355. width: 70px;
  1356. height: 70px;
  1357. }
  1358. .hdab span {
  1359. line-height: 35px;
  1360. width: 100px;
  1361. font-size: 14px;
  1362. }
  1363. .hdmd {
  1364. padding-top: 0;
  1365. }
  1366. .djtop {
  1367. padding: 25px 0;
  1368. }
  1369. .djbox {
  1370. padding-bottom: 25px;
  1371. }
  1372. .dja {
  1373. width: 100%;
  1374. margin: 10px 0;
  1375. }
  1376. .djab_null {
  1377. width: 100%;
  1378. }
  1379. .djat .prod-head,
  1380. .djab {
  1381. padding: 15px;
  1382. position: static;
  1383. width: 100% !important;
  1384. }
  1385. .djat .mt_20 {
  1386. margin-top: 8px;
  1387. }
  1388. .djab {
  1389. height: 160px;
  1390. }
  1391. .xzat,
  1392. .xzahidea,
  1393. .djabb a {
  1394. line-height: 35px;
  1395. }
  1396. .djtopa a {
  1397. font-size: 14px;
  1398. width: 120px;
  1399. line-height: 30px;
  1400. margin: 0 5px;
  1401. }
  1402. .djtop h1 {
  1403. font-size: 24px;
  1404. }
  1405. .dja_a {
  1406. height: 28px;
  1407. font-size: 12px;
  1408. }
  1409. .dja_a img {
  1410. height: 10px;
  1411. }
  1412. .djam {
  1413. padding: 15px;
  1414. }
  1415. .bg-wave {
  1416. height: 460px;
  1417. }
  1418. .swiper-slide .title {
  1419. min-height: 16px;
  1420. margin-bottom: 10px;
  1421. font-size: 16px;
  1422. }
  1423. .enterprise_qualification .box .item {
  1424. width: 50%;
  1425. margin-bottom: 20px;
  1426. }
  1427. .enterprise_qualification .item-title .text {
  1428. font-size: 13px;
  1429. }
  1430. .enterprise_qualification .box .img {
  1431. width: 160px;
  1432. }
  1433. .i1ta a + a {
  1434. margin-left: 12px;
  1435. }
  1436. }
  1437. @media only screen and (max-width: 400px) {
  1438. .tcw {
  1439. display: block;
  1440. padding: 10px 15px;
  1441. }
  1442. .tca {
  1443. width: 100%;
  1444. margin: 10px 0;
  1445. }
  1446. }