/*css nav*/
/*banner css*/
.banner{
    width: 100%;
    height: auto;
}
.banner img{
    width: 100%;
    height: auto;
}

.banner .swiper-pagination-bullet{
    width: 14px;
    height: 14px;
    border:1px solid #fff;

}
.banner .swiper-pagination-bullet-active{
    background: #dbdbda;
}

.introduce{
    width: 100%;
    height: auto;
}
.introduce .introduce-title{
    margin: 80px auto 42px;
    width: 200px;
    height: auto;
    text-align: center;
}
.introduce .introduce-title h3{
    width: 162px;
    height: auto;
    font-size: 40px;
    color: #333;
    margin: 0 auto 16px;    
}
.introduce .introduce-title p{
    width: 200px;
    height: auto;
    font-size: 20px;
    color: #666;    
}
.introduce ul{
    width: 1200px;
    height: auto;
    margin: 40px auto;   
}
.introduce ul li{
    width: 560px;
    height: auto;
   
}
.introduce ul li p{
    width: 560px;
    line-height: 36px;
    height: auto;
    font-size: 18px;
    color: #666;   
}
.introduce ul li{
    width: 568px;
    height: auto;
   
}
.introduce ul li img{
    width: 568px;
    height: 302px;
}
.introduce .con{
    width: 150px;
    height: 42px; 
    margin: 400px auto 80px;
    
}
.product .con1{
    width: 150px;
    height: 42px; 
    margin: 60px auto;
    padding-bottom: 80px;
    
}

.product .con2{
    width: 150px;
    height: 42px; 
    margin: 16px auto 80px;
   
}
.news-box .con3{
    width: 150px;
    height: 42px; 
    margin: 0 auto;
    padding-bottom: 100px;
    
}
.introduce .con a,.product .con1 a,.use-box .con2 a,.news-box .con3 a{
    width: 150px;
    height: 42px; 
    border-radius:21px; 
    border:1px #666 solid;
    margin: 0 auto;
    display: block;
   
    font-size: 16px;
    color: #666;
    text-align: center;
    line-height: 40px;
  
    text-decoration: none;
    transition:all 0.5s ease;
}
.introduce .con a:hover,.product .con1 a:hover,.use-box .con2 a:hover,.news-box .con3 a:hover{
    background: #19bc64;
    color: #fff;
    font-size: 16px;
    border:1px solid #19bc64;
}
.product{
    width: 100%;
    height: auto;
    background-color: #e1f8fe;
    padding-top: 60px;

}
.product .product-title{
    width: 918px;
    height: 196px;
    margin: 0 auto 26px; 
    text-align: center;
}
.product .product-title h3{
    width: 170px;
    height: auto;
    margin: 0 auto 16px; 
    font-size: 40px;
    color: #333;

}
.product .product-title p{
    width: 192px;
    height: auto;
    margin: 0 auto 16px; 
    font-size: 20px;
    color: #666;

}
.product .product-title span{
    width: 908px;
    height: auto;
    line-height: 36px;
    margin: 0 auto; 
    font-size: 18px;
    color: #666;

}
.product img{
    display: block;
    width: 1200px;
    height: 156px;
    margin: 10px auto;  

}
.use-box{
    width: 100%;
    height: auto;
}
.use-box .use-box-title{
    width: 242px;
    height: auto;
    margin: 80px auto 42px;
}
.use-box .use-box-title h3{
    width: 170px;
    height: auto;
    font-size: 40px;
    color: #333;
    margin: 0 auto 16px;
}
.use-box .use-box-title p{
    width: 242px;
    height: auto;
    margin: 0 auto;
    font-size: 20px;
    color: #666;
}
.use-box ul{
    width: 1200px;
    height: auto;
    margin: 0 auto;
}
.use-box ul li{
    display: inline-block;
    width: 362px;
    height: 346px;
    margin: 0 52px 42px 0;
    transition:all .5s ease;
}

.use-box ul li img{
    width: 362px;
    height: 210px;
    margin-bottom: 30px;
}
.use-box ul li h4{
    width: 76px;
    height: auto;
    font-size: 18px;
    color: #333;
    margin: 0 auto 10px;
}
.use-box ul li p{
    width: 328px;
    height: 43px;
    line-height: 26px;
    font-size: 14px;
    color: #666;
    text-align: center;
    margin: 0 auto;
}
.use-box ul li:hover{
    box-shadow: 0 5px 10px #333;
}
.news-box{
    width: 100%;
    height: auto;
    background-color: #d9ffff; 
    padding-top: 60px;
    margin-top: 80px;
}
.news-box .news-box-title{
    width: 210px;
    height: auto;
    margin: 0 auto 42px; 
    text-align: center;
}
.news-box .news-box-title h3{
    width: 170px;
    height: auto;
    margin: 0 auto 16px; 
    font-size: 40px;
    color: #333;

}
.news-box .news-box-title p{
    width: 210px;
    height: auto;
    margin: 0 auto; 
    font-size: 20px;
    color: #333;

}
.news-box ul{
    width: 1200px;
    height: 332px;
    margin: 0 auto 50px;
    /*text-align: center;*/
}
.news-box ul li{
    display: inline-block;
    width: 270px;
    height: 332px;
    margin:0 13px;
    text-align: center;
    background: #fff;
    vertical-align:top;
}



.news-box ul li .imgx{
    width: 270px;
    height: 206px;
    margin-bottom: 26px;
    overflow: hidden;
    

}
.news-box ul li img{
    width: 270px;
    height: 206px;
    transition: all 0.5s ease;
}

.news-box ul li h4{
    
    width: 230px;
    height: auto;
    font-size: 18px;
    line-height: 30px;
    margin: 8px auto;
    color: #333;
    transition: all 0.5s ease;

}

.news-box ul li:hover img{
   
   transform: scale(1.1); 
} 
.news-box ul li:hover h4{
   
   color: #19bc64;
}