@charset "utf-8";
/* ===================首页样式========================== */
.banner-bg img{width: 100%;height: 100vh;}
.banner-con{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.banner-con .contain{height: 100%;justify-content: flex-end; flex-direction: column;}
.banner-pagination{z-index: 2;position: absolute;left: 0;bottom: 10%;width: 100%;}
.banner-pagination .swiper-pagination-bullet{width: 0.4rem;height: 6px;border-radius: 137px;margin: 0 0.06rem; opacity: 1;background: rgba(255, 255, 255, .5);position: relative;transition: all .4s ease;}
.banner-pagination .swiper-pagination-bullet::after{content: "";position: absolute;left: 0;top: 0;width: 0;height: 100%;background: #43c800;}
.banner-pagination .swiper-pagination-bullet.active{background: #fff;}
/* .banner-pagination .swiper-pagination-bullet.active::after{width: 100%;transition: all 4.5s linear;} */

.banner-con .title{opacity: 0;transform: translateY(100px);transition: all 1s .8s ease;}
.banner-con .text{opacity: 0;transform: translateY(100px);transition: all 1s .9s ease;}
.banner-con .comMore-box{opacity: 0;transform: translateY(100px);transition: all 1s 1s ease;}

.swiper-slide-active.first .banner-con .title{transition-delay: 0s;}
.swiper-slide-active.first .banner-con .text{transition-delay: 0.1s;}
.swiper-slide-active.first .banner-con .comMore-box{transition-delay: 0.2s;}
.swiper-slide-active .banner-con .title,.swiper-slide-active .banner-con .text,.swiper-slide-active .banner-con .comMore-box{opacity: 1;transform: translateY(0);}


.pro-cate{background-color: #F6F8FA;}
.pro-cate .pro-cate-list{justify-content: space-around;}
.pro-cate .pro-cate-list .title{text-align: center;font-size: 20px;font-weight: 400;color:#222222;}
.pro-cate .pro-cate-list .pro-cate-item:hover .title{color:#0B6DC4}

.index-section .index-title{display:flex;justify-content: space-between;align-items: center;}
.index-section .index-title .more{width:155px;height:48px;line-height:48px;border-radius: 111px;border:1px solid #D8D8D8;display:block;text-align: center;position:relative}

.index-section .index-title .more i{transform: rotate(180deg);font-size: 12px;color:#666;display:block;position:absolute;top:1px;right:35px;}
.index-section .index-title .more:hover{background-color: #0B6DC4;color:white;}
.index-section .index-title .more:hover i{color:white;}

.products-list{margin-left:-25px;width:100%;}
.products-list .products-item{width:calc( 25% - 25px);margin-left:25px;margin-bottom:50px;}
.products-list .products-item .img{padding:20px;border:1px solid #ebebeb;text-align: center;}
.products-list .products-item .img:hover{border:1px solid #005BAC;}
.products-list .products-item:hover .title{color:#0B6DC4}
.about .about-con{background-color: #0B6DC4;width:50%;padding:60px 150px;}
.about .image{width:50%}

.news .news-list{margin-left:-20px;}
.news .news-list .news-item{width:calc( 100% / 3 - 30px);margin-left:30px;display:block;}

.news .news-list .news-item:hover .title{color:#0B6DC4}

.pro-cate-item{width:calc( 20% - 10px);text-align:center;}


/* -------------------------PC端--------------------------- */
@media all and (max-width:1700px){
    /* 1600 × (900) */
}

@media all and (max-width:1590px){
    /* 1440 × (700)  */
}

@media all and (max-width:1430px){
    /* 1360 */
}

@media all and (max-width:1350px){
    /* 1280 */
}

@media all and (max-width:1270px){
    /* 1152 × (700) */
    .about .about-con{padding:40px 35px;}
    .about .about-con .desc{margin-top:20px;}
    .about .about-con .content{margin-top:20px;}
}

/* ------------------------平板端-------------------------- */
@media all and (max-width:1100px){
    /* 1024 横屏 */
    .banner-bg img{height: 300px;}
    .banner-pagination{bottom: 15px;}
    .banner-pagination .swiper-pagination-bullet{margin: 0 5px;width:1rem;}
    .pro-cate-item{width:50%;margin-bottom:20px}
    
    .products-list .products-item{width:calc( 50% - 25px)}
    .about .image{width:100%;}
    .about .about-con{width:100%;}
    .news .news-list .news-item{width:100%;margin-left:20px;margin-bottom:20px}
    
}

/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px){
    /* 移动终端 360 适配 */
}