.n-banner{width: 100%;height: 470px;position: relative;}
.n-banner .banner-bg{width: 100%;height: 100%;position: absolute; left: 0 ;top: 0;}
.n-banner .ban-nr{position: absolute;top: 50%;transform: translateY(-50%); left: 260px;overflow: hidden;}
.n-banner .ban-nr .left-div{width: 120px;
    height: 120px;
    background: #125DF1;
    border: 1px solid #125DF1;
    box-sizing: border-box;
    float: left;padding: 0 10px;
}
.n-banner .ban-nr .left-div h1{font-size: 20px;
    line-height: 20px;
    font-weight: bold;
    color: #FFFFFF;text-transform: uppercase;
    font-family: Microsoft YaHei;height: 20px;margin-top: 20px;}
.n-banner .ban-nr .left-div h2{
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 24px;
    height: 24px;
    margin-top: 9px;
}   
.n-banner .ban-nr .left-div h3{overflow: hidden;margin-top: 15px;}
.n-banner .ban-nr .left-div h3 span{width: 5px;
    height: 5px;
    background: #FFFFFF;display: inline-block;margin-right: 5px;}
.n-banner .ban-nr .right-div{width: 120px;
    height: 120px;background: #fff;float:left;text-align: center;line-height: 120px;}
.classify-list{width: 100%;background: url(/statics/img/vi01.png),url(/statics/img/vi01.png);background-repeat: no-repeat;background-position: center left,center right;  height: 200px;margin-top: 40px;}
.classify-box{overflow: hidden;}
.classify-box .classify-li{width: calc(50% - 10px);float: left;border-radius: 8px; box-sizing: border-box;overflow: hidden;background: #F2F6FF;border: 1px solid #296DF2;height: 200px;position: relative;}
.classify-box .classify-li.active{background: #296DF2;border: 1px solid #296DF2;}
.classify-box .classify-li .tu-div{width: 80px;height: 80px;float: left;margin-top: 60px;margin-left: 60px;}
.classify-box .classify-li .tu-div img{width: 100%;height: auto;}
.classify-box .classify-li .tu-div img:nth-child(2){
    display: none;
}
.classify-box .classify-li.active .tu-div img:nth-child(2){
    display: inline-block;
}
.classify-box .classify-li.active .tu-div img:nth-child(1){
    display: none;
}

.classify-box .classify-li .zi-div{
    width: 360px;
    float: left;
    margin-left: 40px;
    margin-top: 52px;
}
.classify-box .classify-li .zi-div h1{
    font-size: 28px;
    font-weight: bold;
    color: #333333;
    height: 28px;
    line-height: 28px;
}
.classify-box .classify-li .zi-div h2{
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    line-height: 28px;
    margin-top: 13px;
}
.classify-box .classify-li .bj-div{
    width: 160px;
    height: 80px;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.classify-box .classify-li .bj-div img{
    width: 100%;
    height: auto;
}
.classify-box .classify-li .bj-div img:nth-child(2){
    display: none;
}
.classify-box .classify-li.active .zi-div h1{color: #FFFFFF;}
.classify-box .classify-li.active .zi-div h2{color: #FFFFFF;}
.classify-box .classify-li.active .bj-div img:nth-child(2){
    display: inline-block;
}
.classify-box .classify-li.active .bj-div img:nth-child(1){
    display: none;
}
.classify-box .classify-li:nth-child(2){
    margin-left: 10px;
}
.cla-cpmz{overflow: hidden;margin-top: 60px;padding-bottom: 50px;border-bottom: 1px solid #e6e6e6;}
.cla-cpmz .bt{
    font-size: 42px;
    line-height: 42px;
    color: #333333;
    height: 42px;
    float: left;
    margin-top: 29px;
}
.cla-cpmz .clamz-tabnav{float: right;overflow: hidden;}
.cla-cpmz .clamz-tabnav .cla-navname{float: left;width: 110px;
    height: 100px;
    background: rgba(18, 93, 241, 0);
    border: 1px solid #E6E6E6;text-align: center;overflow: hidden;cursor: pointer;}
.cla-cpmz .clamz-tabnav .cla-navname h1{font-size: 18px;font-weight: bold;line-height: 32px;margin-top: 18px;}
.cla-cpmz .clamz-tabnav .cla-navname p{font-size: 18px;line-height: 32px;}
.cla-cpmz .clamz-tabnav .cla-navname.active{
    background: #125DF1;
    border: 1px solid #125DF1;
}
.cla-cpmz .clamz-tabnav .cla-navname.active h1{
    color: #ffffff;
}
.cla-cpmz .clamz-tabnav .cla-navname.active p{
    color: #ffffff;
}
.cp-list .cp-li .cp-div{text-align: center;width: 440px;float: left;margin-right: 40px;position: relative;margin-top: 50px;transition: 0.5s;
    -webkit-transition: 0.5s;
    -ms-transition: 0.5s;}
.cp-list .cp-li .cp-div:nth-child(3n+3){margin-right: 0;}
.cp-list .cp-li .cp-div .top-div{width: 100%;height: 440px;box-sizing: border-box;overflow: hidden;position: relative;border: 1px solid #E6E6E6;
transition: 0.5s;
-webkit-transition: 0.5s;
-ms-transition: 0.5s;}
.cp-list .cp-li .cp-div .top-div .cotubiao{
    width: 70px;height: 50px;position: absolute;top: 0;left: 10px;transition: 0.5s;
    -webkit-transition: 0.5s;
    -ms-transition: 0.5s;
}
.cp-list .cp-li .cp-div .top-div h1{
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    margin-top: 59px;
}
.cp-list .cp-li .cp-div .top-div img{
    width: 360px;
    height: 300px;
    margin-top: 9px;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -ms-transition: 0.5s;
}
.cp-list .cp-li .cp-div .bott-div{
    border: 1px solid #E6E6E6;
    border-top: none;
    overflow: hidden;
}

.cp-list .cp-li .cp-div .bott-div h1{font-size: 18px;font-weight: 400;color: #333333;line-height: 18px;margin-top: 30px;}
.cp-list .cp-li .cp-div .bott-div p{
font-size: 14px;margin:0 auto;line-height: 14px;margin-top: 19px;margin-bottom: 26px;width: 95%;overflow: hidden;height: 14px;text-overflow: ellipsis;white-space: nowrap;
}

.cp-list .cp-li .cp-div:hover .top-div{background: #F2F6FF;}
.cp-list .cp-li .cp-div:hover .top-div .cotubiao{opacity: 0;filter: Alpha(opacity=0);}
.cp-list .cp-li .cp-div:hover .top-div img{
    transform: scale(1.06);webkit-transform: scale(1.06) ;-ms-transform: scale(1.06) ;
}
.cp-list .cp-li .cp-div:hover .bott-div h1{font-weight: bold;color: #125DF1;}

.cp-list .cp-li .cp-div .top-div .hover-div{
    position: absolute;
    top: 0;width: 0;overflow: hidden;height: 4px;transition: 0.5s;
    -webkit-transition: 0.5s;
    -ms-transition: 0.5s;
    background: #125DF1;
}

.cp-list .cp-li .cp-div a{display: block;width: 100%;height: 100%;}
.cp-list .cp-li .cp-div:hover .top-div{
    border-top: none;
}
.cp-list .cp-li .cp-div:hover .top-div .hover-div {width: 100%;}
.cp-list{padding-bottom: 80px;overflow: hidden;}
.cp-list .cp-li:nth-child(2){display: none;}

@media only screen and (max-width: 1465px){
    
    .common-width{width:1200px;}
    
    .n-banner{height:390px;}
    
    .classify-box .classify-li .tu-div{width:66px;height:auto;margin-top:50px;margin-left:50px;}
    .classify-box .classify-li .zi-div{margin-top:40px;}
    .classify-box .classify-li .zi-div h1{font-size:22px;}
    .classify-box .classify-li .zi-div h2{font-size:14px;}
    .classify-box .classify-li{height:180px;}
    
    .cla-cpmz{margin-top:38px;padding-bottom:35px;}
    .cla-cpmz .bt{font-size:32px;}
    .cla-cpmz .clamz-tabnav .cla-navname h1{font-size:17px;margin-top:12px;}
    .cla-cpmz .clamz-tabnav .cla-navname p{font-size:16px;}
    .cla-cpmz .clamz-tabnav .cla-navname{width:100px;height:88px;}
    
    .cp-list .cp-li .cp-div{width:32%;margin-left:2%;margin-right:0;}
    .cp-list .cp-li .cp-div:nth-child(3n-2){margin-left:0;}
    .cp-list .cp-li .cp-div .top-div{padding:0 20px;height:390px;}
    .cp-list .cp-li .cp-div .top-div h1{font-size:18px;margin-top:65px;}
    
    .cp-list .cp-li .cp-div .top-div img{width:100%;height:285px;}
    .cp-list .cp-li .cp-div .bott-div{padding:0 20px;}
    .cp-list .cp-li .cp-div .bott-div h1{font-size:17px;margin-top:23px;}
    .cp-list .cp-li .cp-div .bott-div p{margin-top:14px;}
}

@media only screen and (max-width: 1230px){
    .common-width{width:1000px;}
    
    .classify-box .classify-li .zi-div{width:290px;}
    .cp-list .cp-li .cp-div .top-div{height:340px;}
    .cp-list .cp-li .cp-div .top-div img{width:100%;height:232px;}
}

@media only screen and (max-width: 768px){
    
    .common-width{width:100%;padding:0 15px;box-sizing: border-box;-webkit-box-sizing: border-box;-ms-box-sizing: border-box;}
    .classify-box .classify-li .bj-div {
        width: 160px;
        height: 80px;
        position: absolute;
        right: 50%;
        transform: translateX(50%);
        bottom: 10px;
    }
    .n-banner{height:160px;}
    .n-banner .ban-nr{left:20px;}
    .n-banner .ban-nr .left-div{height:82px;}
    .n-banner .ban-nr .right-div{display:none;}
    .n-banner .ban-nr .left-div h1{font-size:13px;margin-top:8px;}
    .n-banner .ban-nr .left-div h2{font-size:17px;margin-top:2px;}
    .n-banner .ban-nr .left-div h3{margin-top:0px;}
    .n-banner .ban-nr .left-div h3 span{width:3px;height:3px;}
    
    .classify-list{height:auto;margin-top:20px;}
    .classify-box .classify-li,.classify-box .classify-li.active{height:auto;}
    .classify-box .classify-li:nth-child(2){margin-left:20px;}
    .classify-box .classify-li .zi-div h2{display:none;}
    .classify-box .classify-li .tu-div{width:100%;height:auto; text-align:center;margin-top:15px;margin-left:0;}
    .classify-box .classify-li .tu-div img{width:30%;max-width:88px;}
    .classify-box .classify-li .zi-div{width:100%;margin-left:0;margin:8px 0 15px;text-align:center;}
    .classify-box .classify-li .zi-div h1{font-size:14px;}
    
    .cla-cpmz{margin-top:20px;}
    .cla-cpmz .bt{width:100%; font-size:17px;height:auto;margin-top:0;text-align:center;}
    .cla-cpmz .clamz-tabnav{width:100%;margin-top:10px;}
    .cla-cpmz .clamz-tabnav .cla-navname{padding:4px 0;height:auto;width:50%;box-sizing: border-box;-webkit-box-sizing: border-box;-ms-box-sizing: border-box;}
    .cla-cpmz .clamz-tabnav .cla-navname h1{font-size:14px;line-height:20px;margin-top:0;}
    .cla-cpmz .clamz-tabnav .cla-navname p{font-size:12px;line-height:18px;}
    
    .cp-list{padding:20px 0;}
    .cp-list .cp-li .cp-div{width:48%;margin-left:4%;margin-top:0;margin-bottom:15px;}
    .cp-list .cp-li .cp-div .top-div{height:40vw;}
    .cp-list .cp-li .cp-div .top-div .cotubiao{width:40px;height:auto;}
    .cp-list .cp-li .cp-div .top-div img{height:100%;}
    .cp-list .cp-li .cp-div:nth-child(3n+3){margin-left:4%;}
    .cp-list .cp-li .cp-div:nth-child(2n-1){margin-left:0;}
    .cp-list .cp-li .cp-div .top-div h1{display:none;}
    .cp-list .cp-li .cp-div .bott-div h1{font-size:14px;margin: 0;padding:12px 8px;}
    .cp-list .cp-li .cp-div .bott-div p{display:none; font-size:12px;margin:8px 8px 12px;}
}