@charset "gbk";
/* CSS Document */
.banner{ width:100%; height:580px; background:url(../img/how/banner.png) no-repeat; background-size:100%;}
.sec-z-12To{ width:100%; height:445px; background:url(../img/how/sec-z-12.png) no-repeat; background-size:100% ; position:absolute; top:2250px;}

.howWrap{ height:5525px; position:relative; }
.howWrap .how-con{ width:1000px; height:5525px;}
.h-con-1{ background:url(../img/how/sec-z-t01.png) no-repeat center;}
.howWrap .h-con-t{ font-size:36px; color:#454545;}
.pingxing{ width:92px; height:54px; background:#ea5151; display:inline-block; transform:skew(-20deg); -webkit-transform:skew(-20deg); -moz-transform:skew(-20deg); -o-transform:skew(-20deg); -ms-transform:skew(-20deg); font-size:38px; color:#fff; line-height:54px; text-align:center; font-weight:bold;}

.h-nf{ width:1000px; height:300px; position:relative;}
.h-nf-con{ width:914px; height:184px; background:url(../img/how/sec-z-7.png) no-repeat center; margin:200px auto; position:relative;}
.h-nf-con li{ width:65px; height:72px; position:absolute; top:0; cursor:pointer;}
.h-nf-con li span{ position:absolute;}
.h-nf-con li:nth-child(1),.h-nf-con li:nth-child(3),.h-nf-con li:nth-child(5),.h-nf-con li:nth-child(7){ background:url(../img/how/sec-z-3.png) no-repeat center;}
.h-nf-con li:nth-child(2),.h-nf-con li:nth-child(4),.h-nf-con li:nth-child(6),.h-nf-con li:nth-child(8){ background:url(../img/how/sec-z-4.png) no-repeat center;}
.h-nf-con li:nth-child(9),.h-nf-con li:nth-child(11),.h-nf-con li:nth-child(13),.h-nf-con li:nth-child(15){ background:url(../img/how/sec-z-5.png) no-repeat center;}
.h-nf-con li:nth-child(10),.h-nf-con li:nth-child(12),.h-nf-con li:nth-child(14),.h-nf-con li:nth-child(16){ background:url(../img/how/sec-z-6.png) no-repeat center;}
.h-nf-con li:nth-child(1){ left:33px;}
.h-nf-con li:nth-child(2){ left:125px;}
.h-nf-con li:nth-child(3){ left:233px;}
.h-nf-con li:nth-child(4){ left:331px;}
.h-nf-con li:nth-child(5){ left:440px;}
.h-nf-con li:nth-child(6){ left:536px;}
.h-nf-con li:nth-child(7){ left:640px;}
.h-nf-con li:nth-child(8){ left:736px;}
.h-nf-con li:nth-child(9){ left:128px; top:100px;}
.h-nf-con li:nth-child(10){ left:230px; top:100px;}
.h-nf-con li:nth-child(11){ left:336px; top:100px;}
.h-nf-con li:nth-child(12){ left:435px; top:100px;}
.h-nf-con li:nth-child(13){ left:542px; top:100px;}
.h-nf-con li:nth-child(14){ left:639px; top:100px;}
.h-nf-con li:nth-child(15){ left:741px; top:100px;}
.h-nf-con li:nth-child(16){ left:842px; top:100px;}
.h-nf-con li:nth-child(1) span,.h-nf-con li:nth-child(3) span,.h-nf-con li:nth-child(5) span,.h-nf-con li:nth-child(7) span{ top:22px; left:14px;}
.h-nf-con li:nth-child(2) span,.h-nf-con li:nth-child(4) span,.h-nf-con li:nth-child(6) span,.h-nf-con li:nth-child(8) span{ top:22px; left:19px;}
.h-nf-con li:nth-child(9) span,.h-nf-con li:nth-child(11) span,.h-nf-con li:nth-child(13) span,.h-nf-con li:nth-child(15) span{ top:34px; left:14px;}
.h-nf-con li:nth-child(10) span,.h-nf-con li:nth-child(12) span,.h-nf-con li:nth-child(14) span,.h-nf-con li:nth-child(16) span{ top:34px; left:19px;}
.h-nf-con li dl{ width:222px; height:145px; position:absolute; padding:12px 0 0 28px; background:url(../img/how/sec-z-1.png) no-repeat; top:-150px; left:-64px; display:none;}
.h-nf-con li dl dt{ font-size:22px;}
.h-nf-con li dl dt i{ width:12px; height:20px; background:url(../img/how/sec-z-8.png) no-repeat; display:inline-block; margin-right:5px;}
.h-nf-con li dl dd{ width:190px; height:55px;}
.h-nf-con li .h-nf-xq{ width:208px; height:104px; background:url(../img/how/sec-z-2.png) no-repeat; top:64px; left:-126px; padding:53px 0 0 42px;}
.h-nf-con li:hover dl{ display:block;}

.green{ background:#b8da1b;}
.h-con-x{ font-size:36px; color:#1995ff; text-align:center; font-weight:normal;}
.sec-z-10{ width:985px; height:502px; background:url(../img/how/sec-z-10.png); position:relative;}
.sec-z-10 .top{ width:263px; height:192px; background:url(../img/how/sec-z-9.png) no-repeat; position:absolute; top:10px; left:20px;}
.sec-z-10 .bottom{ width:338px; height:176px; background:url(../img/how/sec-z-11.png) no-repeat; position:absolute; bottom:20px; right:30px;}
.sec-z-12{ width:1000px; height:445px; margin-top:80px;}

.h-con-2{ background:url(../img/how/sec-z-t02.png) no-repeat center;}
.h-ry-con{ width:1000px; height:350px; margin-top:80px; position:relative;}
.h-ry-con ul{ width:956px; height:350px; position:absolute; top:0; left:30px; overflow:hidden;}
.h-ry-con li{ width:5000px; height:350px; position:absolute; top:0px; left:2px;}
.h-ry-con dl{ width:314px; height:300px; float:left; box-shadow:0 0 10px rgba(0,0,0,.3); margin-bottom:100px;}
.h-ry-con dt{ width:235px; height:65px; background:#cacaca; color:#fff; font-size:22px; padding:25px 40px 0;}
.h-ry-con dd{ width:315px; height:210px; vertical-align:middle; display:table-cell;}
.h-ry-con dd img{ margin:0 auto;}
.h-ry-con li .current{ width:328px; height:318px;}
.h-ry-con li .current dt{ width:264px; height:82px; background:#ff5656; padding:20px 44px 0 20px;}
.h-ry-con li .current dd{ width:328px; height:215px;}
.btnLeft{ width:26px; height:64px; background:url(../img/how/btnL.png) no-repeat; display:block; position:absolute; top:125px; left:-14px;}
.btnRight{ width:26px; height:64px; background:url(../img/how/btnR.png) no-repeat; display:block; position:absolute; top:125px; right:-30px;}

.h-mt-con{ width:930px; height:220px;}
.h-mt-con li dl dt{ width:223px; height:167px;}
.h-mt-con .sec-m-01{ background:url(../img/how/sec-m-01.png) no-repeat;}
.h-mt-con .sec-m-02{ background:url(../img/how/sec-m-02.png) no-repeat;}
.h-mt-con .sec-m-03{ background:url(../img/how/sec-m-03.png) no-repeat;}
.h-mt-con .sec-m-04{ background:url(../img/how/sec-m-04.png) no-repeat;}
.h-mt-con li dl dd{ font-size:20px; color:#009aea; text-align:center; margin-top:20px;}

.h-con-3{ background:url(../img/how/sec-z-t03.png) no-repeat center;}
.xiaoPx{ background:#009aea;}
.h-pj-con{ width:1000px; height:752px;}
.h-pj-con li{ width:440px; height:152px; float:left; margin-top:52px; font-size:24px; color:#fff; border-radius:10px; padding:30px; position:relative;}
.h-pj-con li span{ position:absolute; right:30px; bottom:20px;}
.h-pj-con li:nth-child(1){ background:url(../img/how/sec-z-13.png) no-repeat center;}
.h-pj-con li:nth-child(4){ background:url(../img/how/sec-z-14.png) no-repeat center;}
.h-pj-con li:nth-child(5){ background:url(../img/how/sec-z-15.png) no-repeat center;}
.h-pj-con li:nth-child(2){ background:#f65555;}
.h-pj-con li:nth-child(3){ background:#b8da1b;}
.h-pj-con li:nth-child(6){ background:#009aea;}
.h-hz-con{ width:1000px; height:233px; background:url(../img/how/sec-z-16.png) no-repeat center;}
.h-qn-con{ width:1000px; height:572px;}
.h-qn-con li{ width:250px; height:286px; float:left; overflow:hidden; cursor:pointer;}
.h-qn-con li:nth-child(1){ background:url(../img/how/sec-q-01.png) no-repeat;}
.h-qn-con li:nth-child(2){ background:url(../img/how/sec-q-02.png) no-repeat;}
.h-qn-con li:nth-child(3){ background:url(../img/how/sec-q-03.png) no-repeat;}
.h-qn-con li:nth-child(4){ background:url(../img/how/sec-q-04.png) no-repeat;}
.h-qn-con li:nth-child(5){ background:url(../img/how/sec-q-05.png) no-repeat;}
.h-qn-con li:nth-child(6){ background:url(../img/how/sec-q-06.png) no-repeat;}
.h-qn-con li:nth-child(7){ background:url(../img/how/sec-q-07.png) no-repeat;}
.h-qn-con li:nth-child(8){ background:url(../img/how/sec-q-08.png) no-repeat;}
.h-qn-con li p{ width:130px; height:180px; background:rgba(0,0,0,.5); font-size:18px; color:#fff; text-align:center; padding:106px 60px 0;}
.h-qn-con li p span{ font-size:26px; line-height:40px;}
.h-qn-con li:hover p{ transform:translate(0,-286px); -webkit-transform:translate(0,-286px); -o-transform:translate(0,-286px); -moz-transform:translate(0,-286px); transition:transform 1s ease;}