@charset "utf-8";
*{  padding:0;margin:0;border:none;text-decoration:none;  list-style-type:none;  font-family:'Microsoft YaHei',sans-serif;  color:#000;  }
body,div,h1,h2,h3,h4,h5,h6,dl,dd,dt,p,a,form,select,input,ul,ol,li{margin:0; padding:0; text-indent:0; font-weight:normal;font-size:14px; color:#333333;}
ul,ol{list-style:none; text-indent:0; list-style-position:outside;}  img{border:0;}
.clear{  clear:both; }
img{display:block;}
.browserupgrade{  margin:0;  z-index:9999;  width:100%;  height:42px;  color:#e50b71;  text-indent:20px;  line-height:42px;  overflow:hidden;  background:#222222;  border-bottom:4px solid #000000;  }
.browserupgrade a{  font-size:16px;  color:#fdc12d;  cursor:pointer; }
.browserupgrade a.brow-close{  font-size:14px;  margin-right:20px;  float:right; }
.clear{clear:both;}
a{cursor:pointer;}
.main{
    width:1200px;
    margin:0 auto;
    overflow: hidden;
}

.banner_rel{
    position:relative;
    height: 500px;
    top:0;
    cursor:pointer;
}
#canvas_div {
    position: absolute;
    z-index: 16;
    width: 1920px;
    height: 640px;
    overflow: hidden;
}

#canvas_div canvas {
    width: 1920px;
    height: 640px;
    position: absolute;
    top: 0;
    left: 0;
}

.banner{
    width:100%;
    height:500px;
    overflow: hidden;
    z-index:15;
}
.banner img{
    position:absolute;
    left:50%;
    margin-left:-960px;
}
.relat{
    position:relative;
    top:84px;
    z-index:20;
    background-color: #ffffff;
}
.ztn{
    overflow: hidden;
}
.ztn1{
    width:100%;
}
.ztn .title{
    font-size:35px;
    color:#333333;
    text-align: center;
    width:100%;
    font-weight:bold;
    margin-top:50px;
}
.ztn1 .title span{
    color:#6364a1;
}
.ztn1 .continer{
    margin-top:40px;
    margin-bottom:75px;
}
.ztn1 .continer .top{

}
.ztn1 .continer .box{
    width:275px;
    height:180px;
    margin:20px 0 0 20px;
    background-color: #f0f0f0;
    position:relative;
    bottom:0;
    transition: 0.5s;
    overflow: hidden;
    float:left;
}
.ztn1 .continer .box:hover{
    bottom:10px;
    transition: 0.5s;
    background-color: #6364a1;
}
.ztn1 .continer .box img{
    margin:30px auto 5px auto;
}
.ztn1 .continer .box p{
    font-size:24px;
    color:#333333;
    text-align: center;
}
.ztn1 .continer .box:hover p{
    color:#ffffff;
}
.ztn1 .continer .box span{
    display:block;
    text-align: center;
    font-size:16px;
    color:#a6a5a5;
    margin-top:10px;
}
.ztn1 .continer .box:hover span{
    color:#ffffff;
}
.ztn2{
    background: url(../images/ztn2_bj.jpg) no-repeat center;
    height:692px;
    width:100%;
}
.ztn2 .title{
    color:#ffffff;
    margin-top:70px;
}
.ztn2 .continer{
    width:1200px;
    margin:0 auto;
    position:relative;
    margin-top:80px;
}
.ztn2 .continer .box{
    width:230px;
    height:53px;
    box-sizing: border-box;
    border-radius: 26px;
    border:dashed 1px #ffffff;
    position:absolute;
}
.ztn2 .continer .box1{
    left:50%;
    margin-left:-397px;
}
.ztn2 .continer .box2{
    left:50%;
    margin-left:160px;
}
.ztn2 .continer .box3{
    top:100px;
    left:50%;
    margin-left:-484px;
}
.ztn2 .continer .box4{
    top:100px;
    left:50%;
    margin-left:256px;
}
.ztn2 .continer .box5{
    top:205px;
    left:50%;
    margin-left:-462px;
}
.ztn2 .continer .box6{
    top:205px;
    left:50%;
    margin-left:233px;
}
.ztn2 .continer .box7{
    top:293px;
    left:50%;
    margin-left:-382px;
}
.ztn2 .continer .box8{
    top:293px;
    left:50%;
    margin-left:150px;
}
.ztn2 .continer .box9{
    top:359px;
    left:50%;
    margin-left:-115px;
}




.ztn2 .continer .box:hover{
    background-color: #ffffff;
    animation-name: scaleDraw!important; /*关键帧名称*/
    animation-timing-function: ease-in-out; /*动画的速度曲线*/
    animation-iteration-count: infinite;  /*动画播放的次数*/
    animation-duration: 1s; /*动画所花费的时间*/
}
@keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
    0%{
        transform: scale(1);  /*开始为原始大小*/
    }
    25%{
        transform: scale(1.05); /*放大1.1倍*/
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.05);
    }
}
.ztn2 .continer .box a{
    font-size: 18px;
    line-height:53px;
    text-align: center;
    display:block;
    color:#ffffff;
    font-weight:bold;
}
.ztn2 .continer .box:hover a{
    color:#282828;
}
.ztn3 .title{
    margin-top:70px;
}
.ztn3 .continer{
    width:990px;
    margin:55px auto 90px auto;
    overflow: hidden;
}
.ztn3 .continer .box{
    width:330px;
    height:240px;
    float:left;
    border-right:solid 1px #d4d4d4;
    box-sizing: border-box;
}
.ztn3 .continer .box:last-child{
    border-right:none;
}
.ztn3 .continer .box img{
    margin:19px auto 25px auto;
}
.ztn3 .continer .box h4{
    font-weight:bold;
    font-size:24px;
    color:#333333;
    text-align: center;
}
.ztn3 .continer .box p{
    font-size:14px;
    color:#a6a6a6;
    width:240px;
    margin:15px auto 0 auto;
    text-align: center;
}
.ztn4{
    height:668px;
    background: url(../images/ztn4_bj.jpg) no-repeat center;
}
.ztn4 .title{
    margin-top:70px;
    color:#ffffff;
}
.ztn4 .continer{
    width:1200px;
    margin:55px auto 0 auto;
    overflow: hidden;
}
.ztn4 .continer .ty{
    float:left;
    width:327px;

}
.ztn4 .continer .ty h3{
    width:222px;
    height:54px;
    margin:0 auto;
    line-height:54px;
    font-size:24px;
    font-weight:bold;
    text-align: center;
    border-radius: 15px;
}
.ztn4 .continer .ty ul{
    width:100%;
    margin:31px auto 0 auto;
}
.ztn4 .continer .ty ul li{
    width:100%;
    height:40px;
    border-radius: 5px;
    margin-bottom:20px;
    line-height:40px;
    text-align: center;
    transition:0.5s;
}
.ztn4 .continer ul li:hover{
    transform:scale(1.05);
    transition:0.5s;
}
.ztn4 .continer .ty ul li a{
    display:block;
    font-size:16px;
}
.ztn4 .continer .left{
    margin-left:200px;
}
.ztn4 .continer .left h3{
    color:#ffffff;
    border:solid 2px #6364a1;
}
.ztn4 .continer .left ul li{
    background-color: #6364a1;
    transition:0.5s;
}

.ztn4 .continer .left ul li a{
    color:#ffffff;
}
.ztn4 .continer .right h3{
    color:#b4b4b4;
    border:solid 2px #b4b4b4;
}
.ztn4 .continer .right ul li{
    background-color: #d2d5d7;
}
.ztn4 .continer .right ul li a{
    color:#282828;
}
.ztn4 .continer .center{
    float:left;
    width:142px;
}
.ztn4 .continer .center ul{
    width:100%;
    overflow: hidden;
    margin-top:78px;
}
.ztn4 .continer .center ul li{
    width:52px;
    height:52px;
    margin:0 auto 9px auto;
    border:solid 1px #0a0405;
    background-color: #ffffff;
    color:#333333;
    font-size:16px;
    border-radius: 50%;
    line-height:53px;
    text-align: center;
    box-sizing: border-box;
}
.ztn5{
    height:566px;
    background: url(../images/ztn5_bj.jpg) no-repeat center;
}
.ztn5 .title{
    margin-top:70px;
}
.ztn5 p.des{
    font-size:18px;
    color:#333333;
    text-align: center;
    margin-top:5px;
}
.ztn5 .continer{
    width:1200px;
    margin:65px auto ;
    overflow: hidden;
}
.ztn5 .continer .con{
    overflow: hidden;
}
.ztn5 .continer ul{
    width:445px;
    float:left;
    margin-right:28px;
}
.ztn5 .continer ul li{
    width:100%;
    height:42px;
    margin-bottom:22px;
}
.ztn5 .continer ul li a{
    display:block;
    width:408px;
    height:34px;
    background-color: #ffffff;
    font-size:16px;
    color:#8f8f8f;
    text-align: left;
    line-height:34px;
    padding-left:60px;
    box-sizing: border-box;
    float:left;

}
.ztn5 .continer ul li:hover a{
    color:#6364a1;
}
.ztn5 .continer ul li span{
    float:left;
    width:34px;
    height:42px;

    font-size:18px;
    color:#fefefe;
    text-align: center;
    font-weight:bold;
    line-height:34px;
}
.ztn5 .continer ul.left{
    margin-left:140px;
}
.ztn5 .continer ul.left li span{
    background: url(../images/ztn5_11.png) no-repeat center;
    margin-left:3px;
}
.ztn5 .continer ul.left li:hover span{
    background: url(../images/ztn5_12.png) no-repeat center;
}
.ztn5 .continer ul.right li span{
    background: url(../images/ztn5_21.png) no-repeat center;
    margin-right:3px;
}
.ztn5 .continer ul.right li:hover span{
    background: url(../images/ztn5_22.png) no-repeat center;
}
.ztn5 .continer p.zx{
    width:170px;
    height:40px;
    background-color: #ff6b01;
    border-radius: 5px;
    line-height:40px;
    margin:20px auto 0 auto;
}
.ztn5 .continer p.zx a{
    display:block;
    text-align: center;
    font-size:16px;
    color:#ffffff;

}