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.

2235 lines
47 KiB

  1. html,body{
  2. position:relative;
  3. width:100%;
  4. height:100%;
  5. min-width: 1264px;
  6. }
  7. .header{
  8. width:100%;
  9. min-width: 1264px;
  10. height:72px;
  11. background: rgba(114,119,121,0.68);
  12. position:fixed;
  13. top:0;
  14. left:0;
  15. z-index: 111;
  16. }
  17. .wrap{
  18. width:90%;
  19. padding:0;
  20. margin:0 auto;
  21. }
  22. .logo{
  23. width: 13%;
  24. height: 72px;
  25. line-height: 72px;
  26. }
  27. .logo img{
  28. width:100%;
  29. }
  30. .nav-header{
  31. width: 71%;
  32. height: 72px;
  33. line-height: 72px;
  34. text-align:center;
  35. }
  36. .nav-header ul>li{
  37. float:left;
  38. width: 10%;
  39. height: 70px;
  40. font-size:18px;
  41. margin-left:2%;
  42. }
  43. /*icp 备案 start*/
  44. .icpRecord{
  45. position: absolute;
  46. bottom:1%;
  47. left:25%;
  48. font-size: 14px;
  49. color:#787d7f;
  50. }
  51. /*icp 备案 end*/
  52. /*动画实现下划线开始*/
  53. .nav-header ul>li a{
  54. position: relative;
  55. color:#fff;
  56. text-decoration:none;
  57. }
  58. .nav-header ul>li a:before{
  59. content: "";
  60. position: absolute;
  61. left: 50%;
  62. bottom: -22px;
  63. width: 0;
  64. height: 4px;
  65. background: #00ffff;
  66. transition: all 0.6s;
  67. -webkit-transition: all 0.6s;
  68. -o-transition: all 0.6s;
  69. -ms-transition: all 0.6s;
  70. -moz-transition: all 0.6s;
  71. }
  72. .nav-header ul>li a:hover:before{
  73. width: 100%;
  74. left: 0;
  75. right: 0;
  76. }
  77. /*动画实现下划线结束*/
  78. /*.nav-header ul li:hover{
  79. border-bottom:4px solid #00ffff;
  80. }*/
  81. .nav-header ul li:hover a{
  82. color:#00ffff;
  83. }
  84. .nav-header ul li.active{
  85. border-bottom:4px solid #00ffff;
  86. }
  87. .nav-header ul li.active a{
  88. color:#00ffff;
  89. }
  90. .nav-phone{
  91. width:16%;
  92. height:100%;
  93. margin-top:24px;
  94. }
  95. #menu{
  96. margin-left:10%;
  97. }
  98. .nav-phone img{
  99. width:25px;
  100. height:26px;
  101. vertical-align: -6px;
  102. }
  103. .nav-phone span{
  104. color:#ffe641;
  105. font-size:20px;
  106. }
  107. /*第一屏开始*/
  108. .swiper-img1{background-image:url(../images/shouye/shouye-1.1.jpg);background-size:100%;}
  109. .swiper-img2{background-image:url(../images/shouye/shouye-2.jpg);background-size:100%; }
  110. .swiper-img3{background-image:url(../images/shouye/shouye-3.jpg);background-size:100%; }
  111. .swiper-img4{background-image:url(../images/shouye/shouye-4.jpg);background-size:100%; }
  112. .swiper-img5{background-image:url(../images/shouye/shouye-5.jpg);background-size:100%; }
  113. .banner-pager{
  114. position: absolute;
  115. height: 4px;
  116. line-height: 0;
  117. top: 88%;
  118. bottom: auto !important;
  119. left: 0;
  120. right: 0;
  121. text-align: center;
  122. }
  123. .banner-pager .swiper-pagination-bullet{
  124. width: 40px;
  125. height: 4px;
  126. position: relative;
  127. line-height: 4px;
  128. border-radius: 0;
  129. background: #fff;
  130. opacity: 1;
  131. filter:alpha(opacity=100);
  132. }
  133. .banner-pager .swiper-pagination-bullet-active{
  134. background: #00ffff;
  135. opacity:1;
  136. filter:alpha(opacity=100);
  137. }
  138. .banner-next{
  139. right:150px;
  140. }
  141. .banner-pre{
  142. left:150px;
  143. }
  144. /*轮播第一页*/
  145. .slide1-con{
  146. width: 100%;
  147. height: 73%;
  148. text-align: center;
  149. overflow: hidden;
  150. }
  151. .slide1-con p{
  152. color: #fff;
  153. font-weight: bold;
  154. }
  155. .slide1-con p:first-child{
  156. margin-top:10%;
  157. font-size: 62px;
  158. }
  159. .slide1-con p:last-child{
  160. font-size: 50px;
  161. }
  162. .slide1-con .slide1-con-p1{
  163. transform:translateY(-150px);
  164. -webkit-transform:translateY(-150px);
  165. -moz-transform:translateY(-150px);
  166. -ms-transform:translateY(-150px);
  167. -o-transform:translateY(-150px);
  168. transition:all 0.6s;
  169. -webkit-transition:all 0.6s;
  170. -o-transition:all 0.6s;
  171. -moz-transition:all 0.6s;
  172. -ms-transition:all 0.6s;
  173. }
  174. .slide1-con .slide1-con-p2{
  175. transform:translateY(150px);
  176. -webkit-transform:translateY(150px);
  177. -moz-transform:translateY(150px);
  178. -ms-transform:translateY(150px);
  179. -o-transform:translateY(150px);
  180. transition:all 0.6s;
  181. -webkit-transition:all 0.6s;
  182. -o-transition:all 0.6s;
  183. -moz-transition:all 0.6s;
  184. -ms-transition:all 0.6s;
  185. }
  186. .swiper-img1.swiper-slide-active .slide1-con .slide1-con-p1,
  187. .swiper-img1.swiper-slide-active .slide1-con .slide1-con-p2{
  188. transform:translateY(0);
  189. -webkit-transform:translateY(0);
  190. -moz-transform:translateY(0);
  191. -ms-transform:translateY(0);
  192. -o-transform:translateY(0);
  193. }
  194. /*轮播第二页*/
  195. .slide2-con{
  196. width: 100%;
  197. height: 55%;
  198. color:#fff;
  199. overflow: hidden;
  200. position: relative;
  201. top:0;
  202. left:0;
  203. }
  204. .slide2-con-p1{
  205. font-size: 38px;
  206. font-weight: bold;
  207. color: #00ffff;
  208. position: absolute;
  209. top: 0;
  210. left: 260px;
  211. }
  212. .slide2-con-p2{
  213. font-size: 30px;
  214. color: #fff;
  215. position: absolute;
  216. top: 50px;
  217. left: 260px;
  218. }
  219. .slide2-con-p3{
  220. font-size: 16px;
  221. color: #fff;
  222. position: absolute;
  223. top: 92px;
  224. left: 260px;
  225. }
  226. .slide2-con .slide2-con-p1{
  227. transform:translateX(-260px);
  228. -webkit-transform:translateX(-260px);
  229. -moz-transform:translateX(-260px);
  230. -ms-transform:translateX(-260px);
  231. -o-transform:translateX(-260px);
  232. transition:all 0.6s;
  233. -webkit-transition:all 0.6s;
  234. -o-transition:all 0.6s;
  235. -moz-transition:all 0.6s;
  236. -ms-transition:all 0.6s;
  237. }
  238. .slide2-con .slide2-con-p2,.slide2-con .slide2-con-p3{
  239. transform:translateX(400px);
  240. -webkit-transform:translateX(400px);
  241. -moz-transform:translateX(400px);
  242. -ms-transform:translateX(400px);
  243. -o-transform:translateX(400px);
  244. transition:all 0.6s;
  245. -webkit-transition:all 0.6s;
  246. -o-transition:all 0.6s;
  247. -moz-transition:all 0.6s;
  248. -ms-transition:all 0.6s;
  249. }
  250. .swiper-img2.swiper-slide-active .slide2-con .slide2-con-p1,
  251. .swiper-img2.swiper-slide-active .slide2-con .slide2-con-p2,
  252. .swiper-img2.swiper-slide-active .slide2-con .slide2-con-p3{
  253. transform:translateX(0);
  254. -webkit-transform:translateX(0);
  255. -moz-transform:translateX(0);
  256. -ms-transform:translateX(0);
  257. -o-transform:translateX(0);
  258. }
  259. /*轮播第三页*/
  260. .slide5-con{
  261. width: 280px;
  262. height: 230px;
  263. background-color: #0a4059;
  264. border: 3px solid #818d95;
  265. position: absolute;
  266. left: 20%;
  267. top: 30%;
  268. }
  269. .slide5-con .slide5_p{
  270. margin: 58px 30px;
  271. }
  272. .slide5-con p{
  273. font-size: 30px;
  274. color: #fff;
  275. }
  276. .slide5-con p>span{
  277. color: #0ae1ff;
  278. font-size: 36px;
  279. }
  280. .slide5-con .slide5_p p:first-child{
  281. transform:translateY(-150px);
  282. -webkit-transform:translateY(-150px);
  283. -moz-transform:translateY(-150px);
  284. -ms-transform:translateY(-150px);
  285. -o-transform:translateY(-150px);
  286. transition:all 0.6s;
  287. -webkit-transition:all 0.6s;
  288. -o-transition:all 0.6s;
  289. -moz-transition:all 0.6s;
  290. -ms-transition:all 0.6s;
  291. }
  292. .slide5-con .slide5_p p:last-child{
  293. transform:translateY(150px);
  294. -webkit-transform:translateY(150px);
  295. -moz-transform:translateY(150px);
  296. -ms-transform:translateY(150px);
  297. -o-transform:translateY(150px);
  298. transition:all 0.6s;
  299. -webkit-transition:all 0.6s;
  300. -o-transition:all 0.6s;
  301. -moz-transition:all 0.6s;
  302. -ms-transition:all 0.6s;
  303. }
  304. .swiper-img5.swiper-slide-active .slide5-con .slide5_p p:first-child,
  305. .swiper-img5.swiper-slide-active .slide5-con .slide5_p p:last-child{
  306. transform:translateY(0);
  307. -webkit-transform:translateY(0);
  308. -moz-transform:translateY(0);
  309. -ms-transform:translateY(0);
  310. -o-transform:translateY(0);
  311. }
  312. /*轮播第四页*/
  313. .slide3-con{
  314. width: 860px;
  315. height: 410px;
  316. overflow:hidden;
  317. }
  318. .slide3-con-gyl{
  319. width: 49%;
  320. height: 100%;
  321. text-align: right;
  322. position: relative;
  323. top:0;
  324. left:0;
  325. }
  326. .slide3-con-gyl img{
  327. width: 350px;
  328. margin-top:40px;
  329. }
  330. .slide3-con-gyl .slide3-znwl-s1{
  331. font-size: 72px;
  332. color: #7a849a;
  333. font-style: italic;
  334. position: absolute;
  335. top: 5px;
  336. left: 110px;
  337. }
  338. .slide3-con-gyl .slide3-znwl-s2{
  339. background-color: #cc2a1e;
  340. font-size: 14px;
  341. color: #fff;
  342. padding: 0 24px;
  343. position: absolute;
  344. top: 70px;
  345. right: 15px;
  346. }
  347. .slide3-con-gyl .slide3-znwl-s3{
  348. font-size: 34px;
  349. color: #f7f8f9;
  350. font-style: italic;
  351. position: absolute;
  352. top: 82px;
  353. right: 110px;
  354. }
  355. .slide3-con-gy2{
  356. position: relative;
  357. top: 0;
  358. left: 0;
  359. width: 49%;
  360. height: 100%;
  361. }
  362. .slide3-con-dzcg{
  363. width:153px;
  364. height: 155px;
  365. margin: 15px 0 0 50px;
  366. }
  367. .slide3-con-dzzb{
  368. width:127px;
  369. height: 127px;
  370. margin-left: 220px;
  371. }
  372. .slide3-con-qtcp{
  373. width:105px;
  374. height: 105px;
  375. margin-left:116px;
  376. }
  377. .slide3-con-s1{
  378. position: absolute;
  379. top: 133px;
  380. left: 208px;
  381. height: 71px;
  382. border: 1px solid #98a8c2;
  383. transform: rotate(-40deg);
  384. -webkit-transform: rotate(-40deg);
  385. -o-transform: rotate(-40deg);
  386. -ms-transform: rotate(-40deg);
  387. -moz-transform: rotate(-40deg);
  388. }
  389. .slide3-con-s2{
  390. position: absolute;
  391. bottom: 92px;
  392. right: 200px;
  393. height: 48px;
  394. border: 1px solid #98a8c2;
  395. transform: rotate(42deg);
  396. -webkit-transform: rotate(42deg);
  397. -o-transform: rotate(42deg);
  398. -moz-transform: rotate(42deg);
  399. -ms-transform: rotate(42deg);
  400. }
  401. .slide3-con .slide3-con-gyl{
  402. transform:scale(1.2) translateX(-460px);
  403. -webkit-transform:scale(1.2) translateX(-460px);
  404. -moz-transform:scale(1.2) translateX(-460px);
  405. -ms-transform:scale(1.2) translateX(-460px);
  406. -o-transform:scale(1.2) translateX(-460px);
  407. transition:all 0.6s;
  408. -webkit-transition:all 0.6s;
  409. -o-transition:all 0.6s;
  410. -moz-transition:all 0.6s;
  411. -ms-transition:all 0.6s;
  412. }
  413. .slide3-con .slide3-con-gyl img:hover,
  414. .slide3-con .slide3-con-gy2 img:hover,
  415. .slide3-con .slide3-con-gy3 img:hover{
  416. transform: scale(1.2);
  417. -ms-transform: scale(1.2);
  418. -moz-transform: scale(1.2);
  419. -webkit-transform: scale(1.2);
  420. -o-transform: scale(1.2);
  421. }
  422. .slide3-con .slide3-con-gyl img,
  423. .slide3-con .slide3-con-gy2 img,
  424. .slide3-con .slide3-con-gy3 img{
  425. transition:all 0.6s;
  426. -webkit-transition:all 0.6s;
  427. -o-transition:all 0.6s;
  428. -moz-transition:all 0.6s;
  429. -ms-transition:all 0.6s;
  430. }
  431. .slide3-con .slide3-con-gy2{
  432. transform:scale(1) translateX(460px);
  433. -webkit-transform:scale(1) translateX(460px);
  434. -moz-transform:scale(1) translateX(460px);
  435. -ms-transform:scale(1) translateX(460px);
  436. -o-transform:scale(1) translateX(460px);
  437. transition:all 0.6s;
  438. -webkit-transition:all 0.6s;
  439. -o-transition:all 0.6s;
  440. -moz-transition:all 0.6s;
  441. -ms-transition:all 0.6s;
  442. }
  443. .swiper-img3.swiper-slide-active .slide3-con .slide3-con-gyl,
  444. .swiper-img3.swiper-slide-active .slide3-con .slide3-con-gy2{
  445. transform:translateX(0);
  446. -webkit-transform:translateX(0);
  447. -moz-transform:translateX(0);
  448. -ms-transform:translateX(0);
  449. -o-transform:translateX(0);
  450. }
  451. /*轮播第五页*/
  452. .slide4-con{
  453. position: relative;
  454. top: 0;
  455. left: 0;
  456. width: 860px;
  457. height: 400px;
  458. overflow: hidden;
  459. text-align: center;
  460. }
  461. .slide4-con-d{
  462. position: absolute;
  463. bottom: 0;
  464. left: 15%;
  465. }
  466. .slide4-con-d p{
  467. color: #fff;
  468. font-size: 23.25px;
  469. position: absolute;
  470. right: 0;
  471. }
  472. .slide4-con .slide4-con-d .slide4-con-p{
  473. transform:scale(1.5) translateX(-600px);
  474. -webkit-transform:scale(1.5) translateX(-600px);
  475. -moz-transform:scale(1.5) translateX(-600px);
  476. -o-transform:scale(1.5) translateX(-600px);
  477. -ms-transform:scale(1.5) translateX(-600px);
  478. transition:all 0.6s;
  479. -webkit-transition:all 0.6s;
  480. -o-transition:all 0.6s;
  481. -moz-transition:all 0.6s;
  482. -ms-transition:all 0.6s;
  483. }
  484. .slide4-con .slide4-con-d .slide4-con-img{
  485. transform:scale(1.5) translateX(600px);
  486. -webkit-transform:scale(1.5) translateX(600px);
  487. -moz-transform:scale(1.5) translateX(600px);
  488. -o-transform:scale(1.5) translateX(600px);
  489. -ms-transform:scale(1.5) translateX(600px);
  490. transition:all 0.6s;
  491. -webkit-transition:all 0.6s;
  492. -o-transition:all 0.6s;
  493. -moz-transition:all 0.6s;
  494. -ms-transition:all 0.6s;
  495. }
  496. .swiper-img4.swiper-slide-active .slide4-con .slide4-con-d .slide4-con-p,
  497. .swiper-img4.swiper-slide-active .slide4-con .slide4-con-d .slide4-con-img{
  498. transform:scale(1) translate(0);
  499. -webkit-transform:scale(1) translate(0);
  500. -moz-transform:scale(1) translate(0);
  501. -ms-transform:scale(1) translate(0);
  502. -o-transform:scale(1) translate(0);
  503. }
  504. /*第一屏结束*/
  505. /*第二屏开始*/
  506. .slide2-word{
  507. position: absolute;
  508. top:100px;
  509. right:70px;
  510. }
  511. .slide2-intro-con{
  512. position: absolute;
  513. left: 50%;
  514. top: 15%;
  515. margin-left: -400px;
  516. width: 800px;
  517. height: 500px;
  518. }
  519. .introTabs{
  520. width: 180px;
  521. height: 100%;
  522. border:0;
  523. margin-top:30px;
  524. }
  525. .slide2-intro-con .tab-content{
  526. width: 600px;
  527. margin-left: 190px;
  528. }
  529. .slide2-intro-con #myTab>li{
  530. float:none;
  531. }
  532. .slide2-intro-con .introTabs>li{
  533. width: 152px;
  534. height: 40px;
  535. line-height: 50px;
  536. margin:3px auto;
  537. }
  538. .slide2-intro-con .introTabs>li a{
  539. text-align: center;
  540. border-radius: 100px;
  541. font-size: 16px;
  542. color: #898a8a;
  543. background-color: #f5fcff;
  544. padding: 4px;
  545. box-shadow: 3px 3px 3px #979b9d
  546. }
  547. .slide2-intro-con .introTabs li:hover a{
  548. color:#e2221b;
  549. }
  550. .slide2-intro-con .introTabs li.active a{
  551. color:#019dec;
  552. background-color: #f5fcff;
  553. }
  554. .slide2-intro-con .tab-content .hdjj-con{
  555. width: 600px;
  556. height: 445px;
  557. margin:40px auto;
  558. /*border:1px solid red;*/
  559. }
  560. .Intro-toubu{
  561. height: 80px;
  562. width: 100%;
  563. position: relative;
  564. top: 0;
  565. left: 30px;
  566. }
  567. .Intro-toubu .Intro-s1{
  568. position: absolute;
  569. top: 18px;
  570. left: 82px;
  571. color: #108999;
  572. font-size: 16px;
  573. font-weight: bold;
  574. }
  575. .Intro-toubu .Intro-tou1{
  576. width: 57px;
  577. height: 57px;
  578. margin-right: 20px;
  579. }
  580. .Intro-toubu .Intro-touline{
  581. position: relative;
  582. left: 0px;
  583. top: 20px;
  584. width: 137px;
  585. height: 4px;
  586. }
  587. /*简介 图*/
  588. .slide2-intro-con .tab-content .hdjj-con .hdjj-con-img{
  589. width: 400px;
  590. height: 220px;
  591. margin: auto;
  592. text-align:center;
  593. position: relative;
  594. top: 0;
  595. left: 0;
  596. }
  597. .hdjj-con-img .hdjj-con-d1{
  598. width: 290px;
  599. height: 75px;
  600. position: relative;
  601. top: 0;
  602. left: 60px;
  603. }
  604. .hdjj-con-img .hdjj-con-d2{
  605. width: 200px;
  606. height: 114px;
  607. position: relative;
  608. top: 0;
  609. left: 256px;
  610. }
  611. .hdjj-con-img .hdjj-con-d3{
  612. width: 255px;
  613. height: 108px;
  614. position: relative;
  615. top: -78px;
  616. left: 0;
  617. }
  618. .hdjj-con-img .hdjj-tuoyuan{
  619. width: 298px;
  620. height: 127px;
  621. position: absolute;
  622. left: 12%;
  623. top: 20%;
  624. }
  625. .hdjj-con-img .ellipse{
  626. width: 89px;
  627. height: 68px;
  628. border-radius: 50px;
  629. z-index: 111;
  630. transition: all 0.6s;
  631. -webkit-transition: all 0.6s;
  632. -ms-transition: all 0.6s;
  633. -moz-transition: all 0.6s;
  634. -o-transition: all 0.6s;
  635. }
  636. .hdjj-con-img .smallTuoyuan1{
  637. position: absolute;
  638. top: 2px;
  639. left: 0;
  640. }
  641. .hdjj-con-img span{
  642. color: #019dec;
  643. font-size: 14px;
  644. font-weight: bold;
  645. z-index: 111;
  646. transition: all 0.6s;
  647. -webkit-transition: all 0.6s;
  648. -ms-transition: all 0.6s;
  649. -moz-transition: all 0.6s;
  650. -o-transition: all 0.6s;
  651. }
  652. .hdjj-con-img .hdjj-s1{
  653. position: absolute;
  654. top: 4px;
  655. left: 92px;
  656. }
  657. .hdjj-con-img .hdjj-s2{
  658. position: absolute;
  659. top: 52px;
  660. right: 5px;
  661. }
  662. .hdjj-con-img .hdjj-s3{
  663. position: absolute;
  664. bottom: 20px;
  665. left: 98px;
  666. }
  667. .hdjj-con-img p{
  668. font-size: 12px;
  669. color: #7e7e7e;
  670. font-weight: bold;
  671. z-index: 111;
  672. transition: all 0.6s;
  673. -webkit-transition: all 0.6s;
  674. -ms-transition: all 0.6s;
  675. -moz-transition: all 0.6s;
  676. -o-transition: all 0.6s;
  677. }
  678. .hdjj-con-img .hdjj-p1{
  679. position: absolute;
  680. top: 23px;
  681. left: 102px;
  682. }
  683. .hdjj-con-img .hdjj-p2{
  684. position: absolute;
  685. top: 39px;
  686. right: 14px
  687. }
  688. .hdjj-con-img .hdjj-p3{
  689. position: absolute;
  690. top: 55px;
  691. right: 10px;
  692. }
  693. .hdjj-con-img .hdjj-p4{
  694. position: absolute;
  695. bottom: 27px;
  696. left: 35px;
  697. }
  698. .hdjj-con-img .hdjj-p5{
  699. position: absolute;
  700. bottom: 12px;
  701. left: 2px;
  702. }
  703. .hdjj-con-img .hdjj-p6{
  704. position: absolute;
  705. bottom: 66px;
  706. left: 96px;
  707. }
  708. .hdjj-con-img .hdjj-p7{
  709. position: absolute;
  710. bottom: 82px;
  711. left: 66px;
  712. }
  713. .hdjj-con-img .smallTuoyuan2{
  714. position: absolute;
  715. top: 0;
  716. left: 44px;
  717. }
  718. .hdjj-con-img .smallTuoyuan3{
  719. position: absolute;
  720. bottom: 0;
  721. left: 162px;
  722. }
  723. .slide2-intro-con .tab-content .hdjj-con .hdjj-con-font{
  724. width: 550px;
  725. height: 155px;
  726. margin:8px auto;
  727. }
  728. .hdjj-con-img .jj{
  729. z-index: 111;
  730. transition: all 0.6s;
  731. -webkit-transition: all 0.6s;
  732. -ms-transition: all 0.6s;
  733. -moz-transition: all 0.6s;
  734. -o-transition: all 0.6s;
  735. }
  736. .hdjj-con-img .jj:hover{
  737. z-index: 111;
  738. transform: scale(1.2);
  739. -ms-transform: scale(1.2);
  740. -moz-transform: scale(1.2);
  741. -webkit-transform: scale(1.2);
  742. -o-transform: scale(1.2);
  743. }
  744. /*hdwh start*/
  745. .hdwh-content{
  746. width: 510px;
  747. height: 300px;
  748. margin: 26px auto;
  749. position: relative;
  750. top: 0;
  751. left: 0;
  752. }
  753. .hdwh-content p{
  754. text-align: justify;
  755. font-size: 12px;
  756. color: #777;
  757. width: 118px;
  758. }
  759. .hdwh-content img{
  760. width: 112px;
  761. height: 99px;
  762. transition: all 0.3s;
  763. -webkit-transition: all 0.3s;
  764. -ms-transition: all 0.3s;
  765. -moz-transition: all 0.3s;
  766. -o-transition: all 0.3s;
  767. }
  768. .hdwh-content img:hover{
  769. transform: scale(1.3);
  770. -ms-transform: scale(1.3);
  771. -moz-transform: scale(1.3);
  772. -webkit-transform: scale(1.3);
  773. -o-transform: scale(1.3);
  774. }
  775. .hdwh-content .hdwh-p1{
  776. position: absolute;
  777. top: 12px;
  778. left: 76px;
  779. }
  780. .hdwh-content .hdwh-p2{
  781. position: absolute;
  782. top: -22px;
  783. right: 94px;
  784. }
  785. .hdwh-content .hdwh-p3{
  786. position: absolute;
  787. top: 132px;
  788. right: -18px;
  789. }
  790. .hdwh-content .hdwh-p4{
  791. position: absolute;
  792. left: -18px;
  793. bottom: 6px;
  794. }
  795. .hdwh-content .hdwh-p5{
  796. position: absolute;
  797. bottom: -20px;
  798. left: 196px;
  799. }
  800. .hdwh-content .hdwh-img1{
  801. position: absolute;
  802. top: 16px;
  803. left: 196px;
  804. }
  805. .hdwh-content .hdwh-img2{
  806. position: absolute;
  807. top: 16px;
  808. right: 0;
  809. }
  810. .hdwh-content .hdwh-img3{
  811. position: absolute;
  812. bottom: 68px;
  813. left: 8px;
  814. }
  815. .hdwh-content .hdwh-img4{
  816. position: absolute;
  817. left: 101px;
  818. top: 74px;
  819. }
  820. .hdwh-content .hdwh-img5{
  821. position: absolute;
  822. left: 198px;
  823. top: 130px;
  824. }
  825. .hdwh-content .hdwh-img6{
  826. position: absolute;
  827. top: 74px;
  828. right: 97px;
  829. }
  830. .hdwh-content .hdwh-img7{
  831. position: absolute;
  832. bottom: 12px;
  833. left: 102px;
  834. }
  835. .hdwh-content .hdwh-img8{
  836. position: absolute;
  837. right: 98px;
  838. bottom: 12px;
  839. }
  840. /*hdwh end*/
  841. .slide2-intro-con .tab-content .hdjj-con .hdjj-con-font .hdjj-con-font-jjcon{
  842. width: 550px;
  843. height: 112px;
  844. margin-top: 5px;
  845. }
  846. .slide2-intro-con .tab-content .hdjj-con .hdjj-con-font .hdjj-con-font-jjcon p{
  847. font-size: 16px;
  848. color: #1e1d1d;
  849. text-align: justify;
  850. text-indent: 30px;
  851. }
  852. /*hdtd start*/
  853. .Intro-toubu .Intro-tou2{
  854. width: 57px;
  855. height: 79px;
  856. margin-right: 20px;
  857. }
  858. .Intro-toubu .Intro-s2{
  859. position: absolute;
  860. top: 28px;
  861. left: 82px;
  862. color: #108999;
  863. font-size: 16px;
  864. font-weight: bold;
  865. }
  866. .hdtd-content{
  867. width: 100%;
  868. height: 120px;
  869. position: relative;
  870. top: 0;
  871. left: 40px;
  872. }
  873. .hdtd-content>div{
  874. font-size: 16px;
  875. color:#9f9f9f;
  876. }
  877. .hdtd-content div p{
  878. font-size: 20px;
  879. color: #3db5f1;
  880. display: inline-block;
  881. padding: 0 8px;
  882. transition: all 0.4s;
  883. -webkit-transition: all 0.4s;
  884. -ms-transition: all 0.4s;
  885. -moz-transition: all 0.4s;
  886. -o-transition: all 0.4s;
  887. }
  888. .hdtd-content div p:hover{
  889. transform: scale(1.4);
  890. -ms-transform: scale(1.4);
  891. -moz-transform: scale(1.4);
  892. -webkit-transform: scale(1.4);
  893. -o-transform: scale(1.4);
  894. }
  895. .hdtd-img{
  896. width: 100%;
  897. height: 240px;
  898. position: relative;
  899. top: 0;
  900. left: 0;
  901. }
  902. .hdtd-img img{
  903. width: 356px;
  904. height: 215px;
  905. position: absolute;
  906. top: 20px;
  907. left: 20%
  908. }
  909. .hdtd-img div{
  910. font-size: 12px;
  911. color:#979797;
  912. z-index: 111;
  913. }
  914. .hdtd-img div p{
  915. font-size: 16px;
  916. color:#58bbf0;
  917. display: inline-block;
  918. padding: 0 8px;
  919. transition: all 0.6s;
  920. -webkit-transition: all 0.6s;
  921. -ms-transition: all 0.6s;
  922. -moz-transition: all 0.6s;
  923. -o-transition: all 0.6s;
  924. }
  925. .hdtd-img .hdtd-d1{
  926. position: absolute;
  927. top: 0;
  928. left: 45%;
  929. }
  930. .hdtd-img .hdtd-d2{
  931. position: absolute;
  932. top: 18%;
  933. right: 18%
  934. }
  935. .hdtd-img .hdtd-d3{
  936. position: absolute;
  937. top: 26%;
  938. left: 10%;
  939. }
  940. .hdtd-img div p:hover{
  941. transform: scale(1.4);
  942. -ms-transform: scale(1.4);
  943. -moz-transform: scale(1.4);
  944. -webkit-transform: scale(1.4);
  945. -o-transform: scale(1.4);
  946. }
  947. /*partners start*/
  948. .Intro-toubu .Intro-tou3{
  949. width: 63px;
  950. height: 60px;
  951. margin-right: 21px;
  952. }
  953. .Intro-toubu .Intro-s3{
  954. position: absolute;
  955. top: 20px;
  956. left: 90px;
  957. color: #108999;
  958. font-size: 16px;
  959. font-weight: bold;
  960. }
  961. .hdhb-content{
  962. width: 498px;
  963. height: 196px;
  964. margin: 25px auto;
  965. overflow: hidden;
  966. }
  967. .hdhb-content .swiper-container{
  968. width: 496px;
  969. height: 196px;
  970. margin-left: auto;
  971. margin-right: auto;
  972. }
  973. .bannerTwo .swiper-wrapper>.swiper-slide{
  974. text-align: center;
  975. background: #fff;
  976. height: 98px;
  977. display: -webkit-box;
  978. display: -ms-flexbox;
  979. display: -webkit-flex;
  980. display: flex;
  981. -webkit-box-pack: center;
  982. -ms-flex-pack: center;
  983. -webkit-justify-content: center;
  984. justify-content: center;
  985. -webkit-box-align: center;
  986. -ms-flex-align: center;
  987. -webkit-align-items: center;
  988. align-items: center;
  989. }
  990. .bannerTwo .swiper-wrapper .swiper-slide a{
  991. display: table-cell;
  992. vertical-align: middle;
  993. background: rgba(255,255,255,.35);
  994. text-align: center;
  995. width: 100%;
  996. height: 100%;
  997. line-height: 98px;
  998. border-color: #ddd;
  999. border-style: dotted;
  1000. border-width: 0 1px 0 0;
  1001. }
  1002. .partners a img{
  1003. line-height: 0;
  1004. max-width: 145px;
  1005. max-height: 36px;
  1006. }
  1007. .partners a:hover img{
  1008. animation: partner 1s 0.2s ease both;
  1009. -webkit-animation: partner 1s 0.2s ease both;
  1010. -o-animation: partner 1s 0.2s ease both;
  1011. -ms-animation: partner 1s 0.2s ease both;
  1012. -moz-animation: partner 1s 0.2s ease both;
  1013. }
  1014. @keyframes partner{
  1015. 0% {
  1016. transform: scale(1);
  1017. -webkit-transform: scale(1);
  1018. -o-transform: scale(1);
  1019. -ms-transform: scale(1);
  1020. -moz-transform: scale(1);
  1021. }
  1022. 10%, 20% {
  1023. transform: scale(0.9) rotate(-3deg);
  1024. -o-transform: scale(0.9) rotate(-3deg);
  1025. -ms-transform: scale(0.9) rotate(-3deg);
  1026. -moz-transform: scale(0.9) rotate(-3deg);
  1027. -webkit-transform: scale(0.9) rotate(-3deg);
  1028. }
  1029. 30%, 50%, 70%, 90% {
  1030. transform: scale(1.1) rotate(3deg);
  1031. -o-transform: scale(1.1) rotate(3deg);
  1032. -ms-transform: scale(1.1) rotate(3deg);
  1033. -moz-transform: scale(1.1) rotate(3deg);
  1034. -webkit-transform: scale(1.1) rotate(3deg);
  1035. }
  1036. 40%, 60%, 80% {
  1037. transform: scale(1.1) rotate(-3deg);
  1038. -o-transform: scale(1.1) rotate(-3deg);
  1039. -ms-transform: scale(1.1) rotate(-3deg);
  1040. -moz-transform: scale(1.1) rotate(-3deg);
  1041. -webkit-transform: scale(1.1) rotate(-3deg);
  1042. }
  1043. 100% {
  1044. transform: scale(1) rotate(0);
  1045. -o-transform: scale(1) rotate(0);
  1046. -ms-transform: scale(1) rotate(0);
  1047. -moz-transform: scale(1) rotate(0);
  1048. -webkit-transform: scale(1) rotate(0);
  1049. }
  1050. }
  1051. @-moz-keyframes partner{ /* Firefox */
  1052. 0% {
  1053. transform: scale(1);
  1054. -webkit-transform: scale(1);
  1055. -o-transform: scale(1);
  1056. -ms-transform: scale(1);
  1057. -moz-transform: scale(1);
  1058. }
  1059. 10%, 20% {
  1060. transform: scale(0.9) rotate(-3deg);
  1061. -o-transform: scale(0.9) rotate(-3deg);
  1062. -ms-transform: scale(0.9) rotate(-3deg);
  1063. -moz-transform: scale(0.9) rotate(-3deg);
  1064. -webkit-transform: scale(0.9) rotate(-3deg);
  1065. }
  1066. 30%, 50%, 70%, 90% {
  1067. transform: scale(1.1) rotate(3deg);
  1068. -o-transform: scale(1.1) rotate(3deg);
  1069. -ms-transform: scale(1.1) rotate(3deg);
  1070. -moz-transform: scale(1.1) rotate(3deg);
  1071. -webkit-transform: scale(1.1) rotate(3deg);
  1072. }
  1073. 40%, 60%, 80% {
  1074. transform: scale(1.1) rotate(-3deg);
  1075. -o-transform: scale(1.1) rotate(-3deg);
  1076. -ms-transform: scale(1.1) rotate(-3deg);
  1077. -moz-transform: scale(1.1) rotate(-3deg);
  1078. -webkit-transform: scale(1.1) rotate(-3deg);
  1079. }
  1080. 100% {
  1081. transform: scale(1) rotate(0);
  1082. -o-transform: scale(1) rotate(0);
  1083. -ms-transform: scale(1) rotate(0);
  1084. -moz-transform: scale(1) rotate(0);
  1085. -webkit-transform: scale(1) rotate(0);
  1086. }
  1087. }
  1088. @-webkit-keyframes partner{ /* Safari 和 Chrome */
  1089. 0% {
  1090. transform: scale(1);
  1091. -webkit-transform: scale(1);
  1092. -o-transform: scale(1);
  1093. -ms-transform: scale(1);
  1094. -moz-transform: scale(1);
  1095. }
  1096. 10%, 20% {
  1097. transform: scale(0.9) rotate(-3deg);
  1098. -o-transform: scale(0.9) rotate(-3deg);
  1099. -ms-transform: scale(0.9) rotate(-3deg);
  1100. -moz-transform: scale(0.9) rotate(-3deg);
  1101. -webkit-transform: scale(0.9) rotate(-3deg);
  1102. }
  1103. 30%, 50%, 70%, 90% {
  1104. transform: scale(1.1) rotate(3deg);
  1105. -o-transform: scale(1.1) rotate(3deg);
  1106. -ms-transform: scale(1.1) rotate(3deg);
  1107. -moz-transform: scale(1.1) rotate(3deg);
  1108. -webkit-transform: scale(1.1) rotate(3deg);
  1109. }
  1110. 40%, 60%, 80% {
  1111. transform: scale(1.1) rotate(-3deg);
  1112. -o-transform: scale(1.1) rotate(-3deg);
  1113. -ms-transform: scale(1.1) rotate(-3deg);
  1114. -moz-transform: scale(1.1) rotate(-3deg);
  1115. -webkit-transform: scale(1.1) rotate(-3deg);
  1116. }
  1117. 100% {
  1118. transform: scale(1) rotate(0);
  1119. -o-transform: scale(1) rotate(0);
  1120. -ms-transform: scale(1) rotate(0);
  1121. -moz-transform: scale(1) rotate(0);
  1122. -webkit-transform: scale(1) rotate(0);
  1123. }
  1124. }
  1125. @-o-keyframes partner{ /* Opera */
  1126. 0% {
  1127. transform: scale(1);
  1128. -webkit-transform: scale(1);
  1129. -o-transform: scale(1);
  1130. -ms-transform: scale(1);
  1131. -moz-transform: scale(1);
  1132. }
  1133. 10%, 20% {
  1134. transform: scale(0.9) rotate(-3deg);
  1135. -o-transform: scale(0.9) rotate(-3deg);
  1136. -ms-transform: scale(0.9) rotate(-3deg);
  1137. -moz-transform: scale(0.9) rotate(-3deg);
  1138. -webkit-transform: scale(0.9) rotate(-3deg);
  1139. }
  1140. 30%, 50%, 70%, 90% {
  1141. transform: scale(1.1) rotate(3deg);
  1142. -o-transform: scale(1.1) rotate(3deg);
  1143. -ms-transform: scale(1.1) rotate(3deg);
  1144. -moz-transform: scale(1.1) rotate(3deg);
  1145. -webkit-transform: scale(1.1) rotate(3deg);
  1146. }
  1147. 40%, 60%, 80% {
  1148. transform: scale(1.1) rotate(-3deg);
  1149. -o-transform: scale(1.1) rotate(-3deg);
  1150. -ms-transform: scale(1.1) rotate(-3deg);
  1151. -moz-transform: scale(1.1) rotate(-3deg);
  1152. -webkit-transform: scale(1.1) rotate(-3deg);
  1153. }
  1154. 100% {
  1155. transform: scale(1) rotate(0);
  1156. -o-transform: scale(1) rotate(0);
  1157. -ms-transform: scale(1) rotate(0);
  1158. -moz-transform: scale(1) rotate(0);
  1159. -webkit-transform: scale(1) rotate(0);
  1160. }
  1161. }
  1162. /*partners end*/
  1163. /*hdzz start*/
  1164. .hdzz-content{
  1165. width: 560px;
  1166. height: 330px;
  1167. background-color: #fff;
  1168. overflow: hidden;
  1169. }
  1170. .hdzz-content .swiper-container{
  1171. width: 560px;
  1172. height: 330px;
  1173. }
  1174. .hdzz-content .bannerThree .swiper-slide{
  1175. text-align: center;
  1176. background: #fff;
  1177. /* Center slide text vertically */
  1178. display: -webkit-box;
  1179. display: -ms-flexbox;
  1180. display: -webkit-flex;
  1181. display: flex;
  1182. -webkit-box-pack: center;
  1183. -ms-flex-pack: center;
  1184. -webkit-justify-content: center;
  1185. justify-content: center;
  1186. -webkit-box-align: center;
  1187. -ms-flex-align: center;
  1188. -webkit-align-items: center;
  1189. align-items: center;
  1190. }
  1191. .hdzz-slide-hengImg>div{
  1192. height: 150px;
  1193. width: 126px;
  1194. margin: 5px;
  1195. line-height: 150px;
  1196. }
  1197. .hengImg{
  1198. width:126px;
  1199. height:105px;
  1200. }
  1201. .hdzz-slide-shuImg>div{
  1202. height: 150px;
  1203. width: 126px;
  1204. margin: 5px;
  1205. line-height: 150px;
  1206. }
  1207. .hdzz-content .swiper-slide>div>img{
  1208. cursor:pointer;
  1209. }
  1210. .hdzz-content .swiper-button-next{
  1211. top: 62%;
  1212. left: 96%;
  1213. }
  1214. .hdzz-content .swiper-button-prev{
  1215. top: 46%;
  1216. left: 96%;
  1217. }
  1218. .hdzz-content .swiper-button-next,.hdzz-content .swiper-button-prev{
  1219. transform: rotate(90deg);
  1220. -webkit-transform: rotate(90deg);
  1221. -o-transform: rotate(90deg);
  1222. -ms-transform: rotate(90deg);
  1223. -moz-transform: rotate(90deg);
  1224. }
  1225. .hdzz-content ul li{
  1226. float:left;
  1227. }
  1228. .hdzz-content .crossImg{
  1229. width: 100%;
  1230. height: 115px;
  1231. }
  1232. .hdzz-content .verticalImg{
  1233. width: 100%;
  1234. height: 164px;
  1235. }
  1236. .shuImg{
  1237. width:110px;
  1238. height:147px;
  1239. }
  1240. .maskHide{
  1241. position: fixed;
  1242. top:0;
  1243. left:0;
  1244. bottom:0;
  1245. right:0;
  1246. display: none;
  1247. z-index: 222;
  1248. background-color:rgba(0,0,0,0.3);
  1249. }
  1250. .imgmax {
  1251. position: absolute;
  1252. top: 15%;
  1253. left: 0;
  1254. right: 0;
  1255. z-index: 20000;
  1256. height: 70%;
  1257. margin: auto;
  1258. text-align: center;
  1259. }
  1260. .imgmax>img {
  1261. height: 100%;
  1262. width: 40%;
  1263. }
  1264. /*hdzz end*/
  1265. /*第二屏结束*/
  1266. /*第三屏开始*/
  1267. .slide3-intro-con{
  1268. position: absolute;
  1269. left: 48%;
  1270. top: 28%;
  1271. margin-left: -380px;
  1272. width: 786px;
  1273. height: 232px;
  1274. /*border: 1px solid red;*/
  1275. }
  1276. .slide3-intro-con .product-con{
  1277. height: 230px;
  1278. width: 230px;
  1279. border:12px solid #9d9d9d;
  1280. border-radius: 100%;
  1281. margin:0 15px;
  1282. text-align: center;
  1283. background-color: rgba(106,106,106,0.4);
  1284. }
  1285. .product-wms img{
  1286. width: 84px;
  1287. height: 91px;
  1288. margin-top:24px;
  1289. }
  1290. .product-ep img{
  1291. width: 64px;
  1292. height: 84px;
  1293. margin-top:27px;
  1294. }
  1295. .product-bid img{
  1296. width: 118px;
  1297. height: 69px;
  1298. margin-top:42px;
  1299. }
  1300. /*滑动显示 start*/
  1301. .prohide-con{
  1302. position: absolute;
  1303. top: 0;
  1304. left: 0;
  1305. border-radius: 100%;
  1306. text-align: center;
  1307. width: 100%;
  1308. height: 100%;
  1309. background: rgba(0,0,0,0.6);
  1310. color: #fff;
  1311. font-size:12px;
  1312. -webkit-transition: all 0.5s ease-in-out 0s;
  1313. -moz-transition: all 0.5s ease-in-out 0s;
  1314. -ms-transition: all 0.5s ease-in-out 0s;
  1315. -o-transition: all 0.5s ease-in-out 0s;
  1316. transition: all 0.5s ease-in-out 0s;
  1317. opacity: 0;
  1318. }
  1319. .prohide-p{
  1320. width: 76%;
  1321. height: 74%;
  1322. margin:34px auto;
  1323. text-align: justify;
  1324. opacity: 0;
  1325. filter:alpha(opacity=0);
  1326. overflow: hidden;
  1327. text-overflow: ellipsis;
  1328. }
  1329. .prohide-con:hover p{
  1330. -webkit-animation: productCon 0.8s ease 0.1s 1 forwards;
  1331. -moz-animation: productCon 0.8s ease 0.1s 1 forwards;
  1332. -ms-animation: productCon 0.8s ease 0.1s 1 forwards;
  1333. -o-animation: productCon 0.8s ease 0.1s 1 forwards;
  1334. animation: productCon 0.8s ease 0.1s 1 forwards;
  1335. opacity: 1;
  1336. filter:alpha(opacity=100);
  1337. }
  1338. @keyframes productCon{
  1339. 0% {
  1340. margin-top: 50%;
  1341. }
  1342. 100% {
  1343. margin-top: 34px;
  1344. }
  1345. }
  1346. .prohide-con span{
  1347. color:#fcc711;
  1348. font-size: 12px;
  1349. }
  1350. .prohide-con a{
  1351. color:#337ab7;
  1352. }
  1353. /*滑动显示 end*/
  1354. .slide3-intro-con div a p{
  1355. font-size: 20px;
  1356. color:#fd9704;
  1357. }
  1358. .slide3-intro-con div a p:first-child{
  1359. margin-top:16px;
  1360. }
  1361. .slide3-intro-con .product-wms:hover .prohide-con,
  1362. .slide3-intro-con .product-ep:hover .prohide-con,
  1363. .slide3-intro-con .product-bid:hover .prohide-con{
  1364. opacity:1;
  1365. filter:alpha(opacity=100);
  1366. }
  1367. .slide3-intro-con .product-wms{
  1368. transform:translateX(-500px);
  1369. -webkit-transform:translateX(-500px);
  1370. -moz-transform:translateX(-500px);
  1371. -ms-transform:translateX(-500px);
  1372. -o-transform:translateX(-500px);
  1373. transition:all 0.6s;
  1374. -webkit-transition:all 0.6s;
  1375. -o-transition:all 0.6;
  1376. -moz-transition:all 0.6s;
  1377. -ms-transition:all 0.6s;
  1378. }
  1379. .slide3-intro-con .product-ep{
  1380. transform:translateY(-150px);
  1381. -webkit-transform:translateY(-150px);
  1382. -moz-transform:translateY(-150px);
  1383. -ms-transform:translateY(-150px);
  1384. -o-transform:translateY(-150px);
  1385. transition:all 0.6s;
  1386. -webkit-transition:all 0.6s;
  1387. -o-transition:all 0.6;
  1388. -moz-transition:all 0.6s;
  1389. -ms-transition:all 0.6s;
  1390. }
  1391. .slide3-intro-con .product-bid{
  1392. transform:translateX(500px);
  1393. -webkit-transform:translateX(500px);
  1394. -moz-transform:translateX(500px);
  1395. -ms-transform:translateX(500px);
  1396. -o-transform:translateX(500px);
  1397. transition:all 0.6s;
  1398. -webkit-transition:all 0.6s;
  1399. -o-transition:all 0.6;
  1400. -moz-transition:all 0.6s;
  1401. -ms-transition:all 0.6s;
  1402. }
  1403. .slide3.active .slide3-intro-con .product-wms,
  1404. .slide3.active .slide3-intro-con .product-ep,
  1405. .slide3.active .slide3-intro-con .product-bid{
  1406. transform:translate(0);
  1407. -webkit-transform:translate(0);
  1408. -moz-transform:translate(0);
  1409. -ms-transform:translate(0);
  1410. -o-transform:translate(0);
  1411. }
  1412. .slide3.active .slide3-intro-con .product:hover{
  1413. border:12px solid #42b8f5;
  1414. transform: scale(1.15);
  1415. -ms-transform: scale(1.15);
  1416. -moz-transform: scale(1.15);
  1417. -webkit-transform: scale(1.15);
  1418. -o-transform: scale(1.15);
  1419. }
  1420. .slide3.active .slide3-intro-con .product:hover img,
  1421. .slide3.active .slide3-intro-con .product:hover a p{
  1422. opacity: 0.5;
  1423. filter:alpha(opacity=50);
  1424. }
  1425. /*第三屏结束*/
  1426. /*第四屏开始*/
  1427. .jjfa_con div{
  1428. /*border: 1px solid red;*/
  1429. position: relative;
  1430. width: 310px;
  1431. height: 340px;
  1432. }
  1433. .jjfa_con div a{
  1434. width: 100%;
  1435. height: 100%;
  1436. display: inline-block;
  1437. border-radius: 50%;
  1438. -webkit-transition: all 0.5s ease-in-out 0s;
  1439. -moz-transition: all 0.5s ease-in-out 0s;
  1440. -ms-transition: all 0.5s ease-in-out 0s;
  1441. -o-transition: all 0.5s ease-in-out 0s;
  1442. transition: all 0.5s ease-in-out 0s;
  1443. }
  1444. .jjfa_znwl{
  1445. top: 25%;
  1446. left: 12%;
  1447. }
  1448. .jjfa_con div img{
  1449. width: 310px;
  1450. height: 339px;
  1451. }
  1452. .jjfa_con div p{
  1453. position: absolute;
  1454. font-size: 40px;
  1455. font-weight: bold;
  1456. }
  1457. .jjfa_znwl p{
  1458. top: 20%;
  1459. left: 45%;
  1460. color:#60bbad;
  1461. }
  1462. .jjfa_wlw{
  1463. top: 6%;
  1464. left: -12%;
  1465. }
  1466. .jjfa_wlw p{
  1467. color:#f89c0f;
  1468. top: 30%;
  1469. left: 39%;
  1470. }
  1471. .jjfa_con .jjfa_znwl{
  1472. transform:translateX(-500px);
  1473. -webkit-transform:translateX(-500px);
  1474. -moz-transform:translateX(-500px);
  1475. -ms-transform:translateX(-500px);
  1476. -o-transform:translateX(-500px);
  1477. transition:all 0.6s;
  1478. -webkit-transition:all 0.6s;
  1479. -o-transition:all 0.6;
  1480. -moz-transition:all 0.6s;
  1481. -ms-transition:all 0.6s;
  1482. }
  1483. .jjfa_con .jjfa_wlw{
  1484. transform:translateX(500px);
  1485. -webkit-transform:translateX(500px);
  1486. -moz-transform:translateX(500px);
  1487. -ms-transform:translateX(500px);
  1488. -o-transform:translateX(500px);
  1489. transition:all 0.6s;
  1490. -webkit-transition:all 0.6s;
  1491. -o-transition:all 0.6;
  1492. -moz-transition:all 0.6s;
  1493. -ms-transition:all 0.6s;
  1494. }
  1495. .slide4.active .jjfa_con .jjfa_znwl,
  1496. .slide4.active .jjfa_con .jjfa_wlw{
  1497. transform:translate(0);
  1498. -webkit-transform:translate(0);
  1499. -moz-transform:translate(0);
  1500. -ms-transform:translate(0);
  1501. -o-transform:translate(0);
  1502. }
  1503. .jjfa_con .jjfa_znwl:hover a,
  1504. .jjfa_con .jjfa_wlw:hover a{
  1505. transform: scale(1.1);
  1506. -ms-transform: scale(1.1);
  1507. -moz-transform: scale(1.1);
  1508. -webkit-transform: scale(1.1);
  1509. -o-transform: scale(1.1);
  1510. }
  1511. /*第四屏结束*/
  1512. /*第五屏开始*/
  1513. .znwlCon,.gylCon{
  1514. width: 586px;
  1515. height: 400px;
  1516. /*border: 1px solid blue;*/
  1517. margin: auto;
  1518. }
  1519. .SfCases>ul{
  1520. float: left;
  1521. }
  1522. .SfCases ul{
  1523. height: 396px;
  1524. background-color:#fff;
  1525. }
  1526. .SfCases ul li{
  1527. text-align: center;
  1528. border-bottom: 2px dotted #ccc;
  1529. border-right: 2px dotted #ccc;
  1530. }
  1531. .SfCases ul li:hover .znwl-hide{
  1532. display: block;
  1533. }
  1534. .znwlCon ul{
  1535. width: 146px;
  1536. height:396px;
  1537. }
  1538. .znwlCon ul li{
  1539. width: 100%;
  1540. height: 98px;
  1541. position: relative;
  1542. top:0;
  1543. left:0;
  1544. }
  1545. .znwlCon ul li a{
  1546. width: 100%;
  1547. height: 100%;
  1548. line-height: 90px;
  1549. display: inline-block;
  1550. }
  1551. .znwl-hide{
  1552. width: 220px;
  1553. height: 150px;
  1554. border: 1px solid #ccc;
  1555. padding: 4px;
  1556. background-color: #fff;
  1557. position: absolute;
  1558. top:70px;
  1559. left:0;
  1560. z-index: 1111;
  1561. display: none;
  1562. -webkit-transition: all 0.5s ease-in-out 0s;
  1563. -moz-transition: all 0.5s ease-in-out 0s;
  1564. -ms-transition: all 0.5s ease-in-out 0s;
  1565. -o-transition: all 0.5s ease-in-out 0s;
  1566. transition: all 0.5s ease-in-out 0s;
  1567. }
  1568. .znwl-hide p{
  1569. font-size: 14px;
  1570. color: #8d8d8d;
  1571. text-align: justify;
  1572. text-indent: 26px;
  1573. }
  1574. .SfCases ul:last-child li{
  1575. border-right:none;
  1576. }
  1577. .SfCases ul li:last-child{
  1578. border-bottom: none;
  1579. }
  1580. .znwlCon .znwl-ur1 li:first-child a img{
  1581. width: 92px;
  1582. height: 47px;
  1583. }
  1584. .znwlCon .znwl-ur1 li:nth-child(2) a img{
  1585. width: 92px;
  1586. height: 42px;
  1587. }
  1588. .znwlCon .znwl-ur1 li:nth-child(3) a img{
  1589. width: 92px;
  1590. height: 47px;
  1591. }
  1592. .znwlCon .znwl-ur1 li:last-child a img{
  1593. width: 92px;
  1594. height: 40px;
  1595. }
  1596. .znwlCon .znwl-ur2 li:first-child a img{
  1597. width: 92px;
  1598. height: 50px;
  1599. }
  1600. .znwlCon .znwl-ur2 li:nth-child(2) a img{
  1601. width: 112px;
  1602. height: 86px;
  1603. }
  1604. .znwlCon .znwl-ur2 li:nth-child(3) a img{
  1605. width: 92px;
  1606. height: 47px;
  1607. }
  1608. .znwlCon .znwl-ur2 li:last-child a img{
  1609. width: 102px;
  1610. height: 45px;
  1611. }
  1612. .znwlCon .znwl-ur3 li:first-child a img{
  1613. width: 92px;
  1614. height: 47px;
  1615. }
  1616. .znwlCon .znwl-ur3 li:nth-child(2) a img{
  1617. width: 60px;
  1618. height: 60px;
  1619. }
  1620. .znwlCon .znwl-ur3 li:nth-child(3) a img{
  1621. width: 92px;
  1622. height: 40px;
  1623. }
  1624. .znwlCon .znwl-ur3 li:last-child a img{
  1625. width: 92px;
  1626. height: 47px;
  1627. }
  1628. .znwlCon .znwl-ur4 li:first-child a img{
  1629. width: 90px;
  1630. height: 32px;
  1631. }
  1632. .znwlCon .znwl-ur4 li:nth-child(2) a img{
  1633. width: 90px;
  1634. height: 46px;
  1635. }
  1636. .znwlCon .znwl-ur4 li:nth-child(3) a img{
  1637. width: 90px;
  1638. height: 66px;
  1639. }
  1640. .znwlCon .znwl-ur4 li:last-child a img{
  1641. width: 92px;
  1642. height: 55px;
  1643. vertical-align: -40px;
  1644. }
  1645. .gylCon ul{
  1646. width: 192px;
  1647. height: 233px;
  1648. }
  1649. .gylCon ul li{
  1650. width: 100%;
  1651. height: 115px;
  1652. position: relative;
  1653. top:0;
  1654. left:0;
  1655. }
  1656. .gylCon ul li a{
  1657. width: 100%;
  1658. height: 100%;
  1659. line-height: 115px;
  1660. }
  1661. .gylCon .gyl-ur1 li:first-child a img{
  1662. width: 144px;
  1663. height: 40px;
  1664. }
  1665. .gylCon .gyl-ur1 li:last-child a img{
  1666. width: 140px;
  1667. height: 32px;
  1668. }
  1669. .gylCon .gyl-ur2 li:first-child a img{
  1670. width: 120px;
  1671. height: 32px;
  1672. }
  1673. .gylCon .gyl-ur2 li:last-child a img{
  1674. width: 140px;
  1675. height: 40px;
  1676. }
  1677. .gylCon .gyl-ur3 li:first-child a img{
  1678. width: 134px;
  1679. height: 38px;
  1680. }
  1681. .gylCon .gyl-ur3 li:last-child a img{
  1682. width: 134px;
  1683. height: 40px;
  1684. }
  1685. .fwwbCon ul{
  1686. width: 192px;
  1687. height:350px;
  1688. }
  1689. .fwwb-ur1 li:first-child a img{
  1690. width: 134px;
  1691. height: 40px;
  1692. }
  1693. .fwwb-ur1 li:last-child a img{
  1694. width: 90px;
  1695. height: 60px;
  1696. }
  1697. .fwwb-ur1 li:nth-child(2) a img{
  1698. width: 90px;
  1699. height: 40px;
  1700. }
  1701. .fwwb-ur2 li:first-child a img{
  1702. width: 134px;
  1703. height: 88px;
  1704. vertical-align: 0;
  1705. }
  1706. .fwwb-ur2 li:nth-child(2) a img{
  1707. width: 134px;
  1708. height: 40px;
  1709. }
  1710. .fwwb-ur2 li:last-child a img{
  1711. width: 90px;
  1712. height: 110px;
  1713. }
  1714. .fwwb-ur3 li:first-child a img{
  1715. width: 130px;
  1716. height: 38px;
  1717. }
  1718. .fwwb-ur3 li:nth-child(2) a img{
  1719. width: 95px;
  1720. height: 50px;
  1721. }
  1722. .fwwb-ur3 li:last-child a img{
  1723. width: 134px;
  1724. height: 40px;
  1725. }
  1726. .cgalTranform{
  1727. transform:scale(0);
  1728. -webkit-transform:scale(0);
  1729. -moz-transform:scale(0);
  1730. -ms-transform:scale(0);
  1731. -o-transform:scale(0);
  1732. transition: all 0.8s ease-in-out 0s;
  1733. -webkit-transition:all 0.8s ease-in-out 0s;
  1734. -o-transition:all 0.8s ease-in-out 0s;
  1735. -moz-transition:all 0.8s ease-in-out 0s;
  1736. -ms-transition:all 0.8s ease-in-out 0s;
  1737. }
  1738. .slide5.active .cgalTranform{
  1739. transform:scale(1);
  1740. -webkit-transform:scale(1);
  1741. -moz-transform:scale(1);
  1742. -ms-transform:scale(1);
  1743. -o-transform:scale(1);
  1744. }
  1745. /*第五屏结束*/
  1746. /*第六屏开始*/
  1747. .recruit-con{
  1748. position: absolute;
  1749. right: 19%;
  1750. top: 15%;
  1751. margin-left: -325px;
  1752. width: 650px;
  1753. height: 488px;
  1754. /*border: 1px solid red;*/
  1755. }
  1756. .f24{
  1757. font-size: 24px;
  1758. color:#e2c664;
  1759. }
  1760. .f26{
  1761. font-size:26px;
  1762. color:#e2c664;
  1763. }
  1764. .recruit-con-left{
  1765. width: 284px;
  1766. height: 160px;
  1767. }
  1768. .recruit-con-left div{
  1769. float:left;
  1770. }
  1771. .recruit-con-left div:last-child{
  1772. margin-top:82px;
  1773. }
  1774. .recruit-con-left .recruit-con-left-d1{
  1775. text-align:right;
  1776. transform:translateX(-500px);
  1777. -webkit-transform:translateX(-500px);
  1778. -moz-transform:translateX(-500px);
  1779. -ms-transform:translateX(-500px);
  1780. -o-transform:translateX(-500px);
  1781. transition:all 0.8s;
  1782. -webkit-transition:all 0.8s;
  1783. -o-transition:all 0.8s;
  1784. -moz-transition:all 0.8s;
  1785. -ms-transition:all 0.8s;
  1786. }
  1787. .recruit-con-left .recruit-con-left-d2{
  1788. transform:translateX(500px);
  1789. -webkit-transform:translateX(500px);
  1790. -moz-transform:translateX(500px);
  1791. -ms-transform:translateX(500px);
  1792. -o-transform:translateX(500px);
  1793. transition:all 0.8s;
  1794. -webkit-transition:all 0.8s;
  1795. -o-transition:all 0.8s;
  1796. -moz-transition:all 0.8s;
  1797. -ms-transition:all 0.8s;
  1798. }
  1799. .slide6.active .recruit-con .recruit-con-left .recruit-con-left-d1,
  1800. .slide6.active .recruit-con .recruit-con-left .recruit-con-left-d2{
  1801. transform:translateX(0);
  1802. -webkit-transform:translateX(0);
  1803. -moz-transform:translateX(0);
  1804. -ms-transform:translateX(0);
  1805. -o-transform:translateX(0);
  1806. }
  1807. .recruit-look{
  1808. color: #f5f4ef;
  1809. font-size: 36px;
  1810. font-weight: bold;
  1811. }
  1812. .recruit-line{
  1813. height: 154px;
  1814. width: 2px;
  1815. margin: 0 17px;
  1816. background-color: #aaaeb4;
  1817. }
  1818. .recruit-con-right{
  1819. position: absolute;
  1820. right: 50px;
  1821. bottom: 10px;
  1822. text-align: right;
  1823. }
  1824. .recruit-con-right>p{
  1825. font-size: 36px;
  1826. color:#edce66;
  1827. font-weight: bold;
  1828. margin-bottom: 14px
  1829. }
  1830. .recruit-con-right .recruit-con-p1{
  1831. font-size:24px;
  1832. color:#ffffff;
  1833. margin: 16px 0;
  1834. }
  1835. .recruit-con-right a:link{
  1836. text-decoration: none;
  1837. border: none;
  1838. }
  1839. .recruit-con-right a:hover{
  1840. color: #00ffff;
  1841. border: none;
  1842. }
  1843. .recruit-con-right .recruit-con-p2{
  1844. font-size:16px;
  1845. color:#b2b5bb;
  1846. }
  1847. .recruit-con-right .line-p{
  1848. height: 2px;
  1849. background-color: #f7b000;
  1850. width: 326px;
  1851. margin-top:15px;
  1852. }
  1853. /*第六屏结束
  1854. /*第七屏开始*/
  1855. .slide7-intro-con{
  1856. position: absolute;
  1857. left: 48%;
  1858. top: 28%;
  1859. margin-left: -380px;
  1860. width: 786px;
  1861. height: 348px;
  1862. background-image: url(../images/AfterSalesService/baiBan.png);
  1863. background-size:100%;
  1864. border-radius: 3%;
  1865. }
  1866. .slide7-intro-con .service-left{
  1867. width: 298px;
  1868. height: 254px;
  1869. text-align: center;
  1870. margin:48px 0 0 48px;
  1871. }
  1872. .slide7-intro-con .service-left p{
  1873. font-size: 38px;
  1874. color: #fe9704;
  1875. font-weight: bold;
  1876. margin-bottom: 21px;
  1877. }
  1878. .slide7-intro-con .service-left img{
  1879. width: 295px;
  1880. height: 159px;
  1881. }
  1882. .slide7-intro-con .service-right{
  1883. width: 307px;
  1884. height: 254px;
  1885. margin:40px 80px 0 0;
  1886. border:1px solid #aca9a8;
  1887. }
  1888. .service-right .service-right-d1{
  1889. width: 100%;
  1890. height: 30px;
  1891. line-height: 30px;
  1892. background-color: #fba803;
  1893. text-align: center;
  1894. margin-top: 19px;
  1895. font-size: 20px;
  1896. color: #fff;
  1897. position: relative;
  1898. top: 0;
  1899. left: 0;
  1900. }
  1901. .service-right .service-right-d1 i{
  1902. width: 25px;
  1903. height: 33px;
  1904. display: inline-block;
  1905. background-image: url(../images/AfterSalesService/lock.png);
  1906. background-size: 100%;
  1907. position: absolute;
  1908. top: 0;
  1909. left: 48px;
  1910. }
  1911. .service-right .service-right-d2{
  1912. width: 100%;
  1913. height: 40px;
  1914. line-height: 40px;
  1915. }
  1916. .service-right .service-right-d2 span{
  1917. font-size: 16px;
  1918. color: #434343;
  1919. display: inline-block;
  1920. width: 80px;
  1921. text-align: right;
  1922. }
  1923. .service-right .service-right-d2 input{
  1924. width: 176px;
  1925. height: 24px;
  1926. padding-left:2px;
  1927. }
  1928. .service-right .service-right-d2 .validation{
  1929. width: 113px;
  1930. height: 24px;
  1931. }
  1932. .service-right .service-right-d2 .code{
  1933. font-family: Arial;
  1934. font-style: italic;
  1935. color: blue;
  1936. font-size: 22px;
  1937. border: 0;
  1938. padding: 2px 3px;
  1939. letter-spacing: 3px;
  1940. font-weight: bolder;
  1941. cursor: pointer;
  1942. width: 80px;
  1943. height: 25px;
  1944. line-height: 25px;
  1945. text-align: center;
  1946. vertical-align: -5px;
  1947. }
  1948. /*.service-right .service-right-d2 .validation1{
  1949. width: 50px;
  1950. height: 20px;
  1951. margin-left:9px;
  1952. }*/
  1953. .service-right .service-right-d3{
  1954. width: 100%;
  1955. height: 25px;
  1956. line-height: 25px;
  1957. text-align: center;
  1958. }
  1959. .service-right .service-right-d3 span{
  1960. font-size:12px;
  1961. color:#4a86c2;
  1962. cursor:pointer;
  1963. }
  1964. .service-right .service-right-d3 span:last-child{
  1965. margin-left:20px;
  1966. }
  1967. .service-btn{
  1968. width: 100px;
  1969. height: 30px;
  1970. line-height: 30px;
  1971. text-align: center;
  1972. background-color: #4b87c4;
  1973. border-radius: 5%;
  1974. margin: 10px auto;
  1975. cursor: pointer;
  1976. color:#fff;
  1977. font-size:16px;
  1978. }
  1979. .applyaccount>p{
  1980. font-size: 18px;
  1981. margin:10px;
  1982. }
  1983. .applyaccount>p a{
  1984. color:#4a86c2;
  1985. }
  1986. .changepw{
  1987. width: 400px;
  1988. height: 130px;
  1989. margin: auto;
  1990. font-size: 18px;
  1991. }
  1992. .changepw>div{
  1993. margin: 10px 0;
  1994. width: 100%;
  1995. height: 30px;
  1996. line-height: 30px;
  1997. }
  1998. .changepw>div span:first-child{
  1999. color:red;
  2000. margin-right:3px;
  2001. }
  2002. .changepw>div p{
  2003. display: inline-block;
  2004. width: 110px;
  2005. text-align: right;
  2006. }
  2007. .changepw>div input{
  2008. width: 200px;
  2009. height: 26px;
  2010. }
  2011. /*登录之后*/
  2012. .loginAfter{
  2013. width: 49%;
  2014. height: 100%;
  2015. }
  2016. .loginAfter>div{
  2017. width: 115px;
  2018. height: 160px;
  2019. margin:30px auto;
  2020. text-align: center;
  2021. }
  2022. .loginAfterdiv>div>a{
  2023. width: 100%;
  2024. height: 100%;
  2025. display: inline-block;
  2026. }
  2027. .loginAfter>div>a>img{
  2028. width: 100%;
  2029. height: 105px;
  2030. }
  2031. .loginAfter>div>a>p{
  2032. font-size: 20px;
  2033. color: #947363;
  2034. margin-top: 25px;
  2035. }
  2036. .company{
  2037. width: 100%;
  2038. height: 35px;
  2039. margin:30px auto;
  2040. font-size:30px ;
  2041. text-align: center;
  2042. }
  2043. /*第七屏结束*/
  2044. /*第八屏开始*/
  2045. .slide8-contact{
  2046. position: absolute;
  2047. left: 48%;
  2048. top: 20%;
  2049. margin-left: -450px;
  2050. width: 1000px;
  2051. height: 430px;
  2052. }
  2053. .slide8-contact .contact-figure{
  2054. width: 200px;
  2055. height: 100%;
  2056. }
  2057. .contact-figure div:first-child{
  2058. height: 206px;
  2059. width: 100%;
  2060. text-align: center;
  2061. }
  2062. .contact-figure div:first-child img{
  2063. height: 100%;
  2064. width: 142px;
  2065. }
  2066. .contact-figure div:last-child{
  2067. width: 100%;
  2068. height: 224px;
  2069. text-align:center;
  2070. }
  2071. .contact-figure div:last-child img{
  2072. width: 121px;
  2073. height: 121px;
  2074. margin-top:22px;
  2075. -webkit-transition:all 0.5s;
  2076. -ms-transition:all 0.5s;
  2077. -moz-transition:all 0.5s;
  2078. -o-transition:all 0.5s;
  2079. transition:all 0.5s;
  2080. }
  2081. .contact-figure div:last-child img:hover{
  2082. transform: scale(1.3);
  2083. -ms-transform: scale(1.3);
  2084. -moz-transform: scale(1.3);
  2085. -webkit-transform: scale(1.3);
  2086. -o-transform: scale(1.3);
  2087. }
  2088. .contact-figure div:last-child p{
  2089. font-size: 14px;
  2090. color:#787d7f;
  2091. margin-bottom: 10px;
  2092. }
  2093. .slide8-contact .contact-address{
  2094. width: 358px;
  2095. height: 100%;
  2096. }
  2097. .address-phone{
  2098. margin:5px auto;
  2099. }
  2100. .contact-address-suzhou,
  2101. .contact-address-other{
  2102. margin-left:40px;
  2103. }
  2104. .contact-address-other{
  2105. margin-top:24px;
  2106. }
  2107. .addressName{
  2108. font-size: 16px;
  2109. color: #fe9704;
  2110. }
  2111. .phone-i{
  2112. background: url(../images/ContactUs/phone-icon.png) no-repeat;
  2113. display: inline-block;
  2114. width: 23px;
  2115. height: 23px;
  2116. vertical-align: -6px;
  2117. }
  2118. .fax-i{
  2119. background: url(../images/ContactUs/fax-icon.png) no-repeat;
  2120. display: inline-block;
  2121. width: 21px;
  2122. height: 13px;
  2123. }
  2124. .mail-i{
  2125. background: url(../images/ContactUs/email-icon.png) no-repeat;
  2126. display: inline-block;
  2127. width: 17px;
  2128. height: 17px;
  2129. vertical-align: -2px;
  2130. }
  2131. .address-i{
  2132. background: url(../images/ContactUs/address-icon.png) no-repeat;
  2133. display: inline-block;
  2134. width: 16px;
  2135. height: 21px;
  2136. vertical-align: -4px;
  2137. }
  2138. .address-phone span{
  2139. font-size: 14px;
  2140. color: #787d7f;
  2141. }
  2142. .slide8-contact .contact-map{
  2143. width: 440px;
  2144. height: 100%;
  2145. text-align: center;
  2146. position: relative;
  2147. top:0;
  2148. left:25px;
  2149. }
  2150. .companylocation{
  2151. width:350px;
  2152. height:250px;
  2153. position:relative;
  2154. overflow: hidden;
  2155. z-index:0;
  2156. margin:auto;
  2157. border-radius:5px;
  2158. -webkit-user-select: none;
  2159. padding:6px;
  2160. }
  2161. .allmap{
  2162. width:350px;
  2163. height:250px;
  2164. position:relative;
  2165. overflow: hidden;
  2166. z-index:0;
  2167. margin:auto;
  2168. border-radius:5px;
  2169. -webkit-user-select: none;
  2170. padding:6px;
  2171. }
  2172. .slide8-contact .contact-figure,
  2173. .slide8-contact .contact-address,
  2174. .slide8-contact .contact-map .allmap{
  2175. transform:scale(0);
  2176. -webkit-transform:scale(0);
  2177. -moz-transform:scale(0);
  2178. -ms-transform:scale(0);
  2179. -o-transform:scale(0);
  2180. transition: all 1s ease-in-out 0s;
  2181. -webkit-transition:all 1s ease-in-out 0s;
  2182. -o-transition:all 1s ease-in-out 0s;
  2183. -moz-transition:all 1s ease-in-out 0s;
  2184. -ms-transition:all 1s ease-in-out 0s;
  2185. }
  2186. .slide8.active .slide8-contact .contact-figure,
  2187. .slide8.active .slide8-contact .contact-address,
  2188. .slide8.active .slide8-contact .contact-map .allmap{
  2189. transform:scale(1);
  2190. -webkit-transform:scale(1);
  2191. -moz-transform:scale(1);
  2192. -ms-transform:scale(1);
  2193. -o-transform:scale(1);
  2194. }
  2195. .contact-map .contactZi{
  2196. width: 234px;
  2197. height: 63px;
  2198. position: absolute;
  2199. left:40%;
  2200. bottom:0;
  2201. }
  2202. .busStation{
  2203. font-size: 12px;
  2204. color: #666;
  2205. margin-top: 5px;
  2206. }
  2207. .contact-footer{
  2208. width: 100%;
  2209. height: 70px;
  2210. position: absolute;
  2211. bottom:0;
  2212. left:0;
  2213. color:#787d7f;
  2214. text-align: center;
  2215. }
  2216. .contact-footer p:first a:hover{
  2217. text-decoration: none;
  2218. }
  2219. /*第八屏结束*/