/* banner */
.banner{overflow: hidden;position: relative;}
.banner img{width: 100%;}
.banner .swiper-slide{overflow: hidden;}
.banner .slide-inner{position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-size: cover;background-position: center;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;color:#fff;}
/* .banner .hb{height: 840px;} */
.banner .hb img,.banner .mb img{opacity: 0;}
.banner .mb{display: none;}
.banner .swiper-pagination-bullet{transition: all 0.3s;}
.banner .swiper-pagination-bullet-active{width: 24px;background-color: rgba(0, 0, 0, 0.4);border-radius: 4px;}
.banner #bannerSwiper{min-height: 380px;}
.banner .swiper-button-prev,.banner .swiper-button-next{width: 50px;height: 50px;border-radius: 50%;background-color: rgba(0, 0, 0, 0.5);color: #fff;}
.banner .swiper-button-next:after, .banner .swiper-button-prev:after{font-size: 16px;}
.banner .bb{position: absolute;bottom: -2px;left: 0;z-index: 5;width: 100%;filter: grayscale(0) brightness(100);}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 2%;}


/* about */
.about{position: relative;background-size: cover;background-position: center;background-repeat: no-repeat;height: 800px;background-image: url(../images/about-bg.png);transform: translateY(25px);}
.about h2{font-weight: 600;color: #fff;}
.about .area{height: 100%;}
.about .area>.row{height: 100%;}
.about .a-l{height: 100%;position: relative;}
.about .a-l .fr{width: 100%;max-width: 560px;float: left;position: absolute;left: 0;top: 50%;transform: translateY(-50%);padding: 0 15px;}
.about .a-l .fr .a-con{margin-top: 10%;line-height: 2.5;font-size: 16px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 8;-webkit-box-orient: vertical;color: #fff;}
.about .a-l .fr a{margin-top: 10%;display: flex;align-items: center;justify-content: center;width: 59px;height: 59px;border-radius: 50%;font-size: 18px;font-family: cursive;font-weight: 600;position: relative;transition: all 0.3s;overflow: hidden;z-index: 1;color: #fff;border: 1px solid #fff;}
.about .a-r{padding: 0 0;height: 100%;position: relative;display: flex;align-items: center;}
.about .a-r img{max-width: 90%;width: auto;margin-left: auto;}
.about .a-l .fr a::after{content: '';width: 0;height: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #ef2b2d;transition: all 0.3s;z-index: -1;border-radius: 50%;}
.about .a-l .fr a:hover{color: #fff;border: 1px solid #ef2b2d;}
.about .a-l .fr a:hover::after{width: 110%;height: 110%;}

/* Pro */
.product{margin: 0 auto;position: relative;padding-top: 7%!important;background-size: 1920px auto;background-position: 0 bottom;}
.product .area{overflow: unset;}
.product .tit{position: relative;margin-bottom: 1%;}
.product h2{display: inline-block;padding: 0 15px;}
.product .pro-cate{position: absolute;right: 0;top: 50%;width: calc(100% - 155px);transform: translateY(-50%);}
.product .pro-cate li{float: right;margin: 2px 15px 2px 0;position: relative;z-index: 1;transition: all 0.3s;overflow: hidden;width: calc(16.666666% - 15px);max-width: 130px;}
.product .pro-cate li a{display: block;border: 1px solid #ccc;color: #222;font-size: 16px;line-height: 58px;position: relative;z-index: 3;transition: all 0.3s;width: 100%;text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding: 0 5%;float: left;}
.product .pro-cate li::after{position: absolute;z-index: 2;content: '';right: 0;top: 0;background-color: #ef2b2d;width: 0;height: 0;transition: all 0.3s;}
.product .pro-cate li::before{position: absolute;z-index: 2;content: '';left: 0;bottom: 0;background-color: #ef2b2d;width: 0;height: 0;transition: all 0.3s;}
.product .proli{display: inline-block;width: 100%;}
.product .proli a{display: inline-block;width: 100%;margin-bottom: 10%;padding: 1px;background-color: #dbdbdb;position: relative;z-index: 1;transition: all 0.3s;}
.product .proli a::after{position: absolute;z-index: 2;content: '';right: 0;top: 0;background-color: #ef2b2d;width: 0;height: 0;transition: all 0.3s;}
.product .proli a::before{position: absolute;z-index: 2;content: '';left: 0;bottom: 0;background-color: #ef2b2d;width: 0;height: 0;transition: all 0.3s;}
.product .proli a .pro-img{overflow: hidden;position: relative;padding-top: 100%;z-index: 3;background-color: #fff;}
.product .proli a .pro-img img{width: 100%;height: 100%;position: absolute;top: 0;left: 0;object-fit: cover;}
.product .proli a .pro-tit{position: relative;z-index: 3;}
.product .proli a .pro-tit p{color: #222;font-size: 16px;padding: 6% 5%;background-color: #fff;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding-right: calc(35px);}
.product .proli a .pro-tit span{width: 32px;height: 32px;text-align: center;line-height: 32px;color: #ccc;border: 1px solid #ccc;position: absolute;right: 5%;top: 50%;transform: translateY(-50%);font-size: 30px;background-color: #fff;}
.product .more{float: right;display: block;font-size: 16px;color: #999;margin-right: 15px;}
.product .more span{display: inline-block;width: 59px;height: 59px;text-align: center;line-height: 59px;border: 1px solid #999;border-radius: 50%;font-size: 18px;color: #999;font-family: cursive;font-weight: 600;position: relative;z-index: 1;}

.product .more span::after{content: '';width: 0;height: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #ef2b2d;transition: all 0.3s;z-index: -1;border-radius: 50%;}

.product .more:hover span{color: #fff;border: 1px solid #ef2b2d;}
.product .more:hover span::after{width: calc(100% + 1px);height: calc(100% + 1px);}
.product .proli a:hover{box-shadow: 0 0 5px;}
.product .proli a:hover .pro-tit p{background-color:rgba(0, 0, 0, 0);color: #fff;}
.product .proli a:hover::after,.product .proli a:hover::before{width: 100%;height: 100%;}
.product .pro-cate li:hover::after,.product .pro-cate li:hover::before{width: 100%;height: 100%;}
.product .pro-cate li:hover a{color: #fff;}

/* app */
.app {padding: 3% 0px 5%!important;background-size: 1920px auto;background-position: 0 top;}
.app .ul{display: flex;flex-wrap: wrap;width: 100%;justify-content: center;margin-bottom: 2%;}
.app .ul .li{line-height: 1;padding: 3px 25px;margin: 10px 0;position: relative;}
.app .ul .li::before{content: '●';display: inline-block;position: absolute;left: 0;top: 50%;transform: translate(-50%,-50%);font-size: 10px;}
.app .ul .li:first-child::before{display: none;}
.app #appSwiper{overflow: hidden;}
.app h2{text-align: center;margin: 0% 0 3%;transition: all 0.3s;}

.app ul{margin-top: 15px;}
.app ul li{position: relative;background-size: cover;transition: all 0.3s;z-index: 1;cursor: pointer;overflow: hidden;border-radius: 50px;}
.app ul li .app-info{}
.app ul li .app-info h3{font-size: 22px;font-weight: 600;color: rgba(58,47,134, 1);padding: 10px 0;line-height: 1.5;text-align: center;}
.app ul li .app-info p{line-height: 2;width: 100%;text-align: center;font-size: 16px;color: rgba(58,47,134, 1);padding: 0 5%;}

.app ul li .app-img{width: 100%;padding-top: 35%;position: relative;overflow: hidden;background-color: #fff;margin-bottom: 45px;}
.app ul li .app-img img{width: auto;height: auto;max-width: 100%;max-height: 100%;object-fit: contain;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);transition: all 0.3s;}


.app ul li:hover .app-info{}
.app ul li:hover .app-img img{transform: translate(-50%,-50%) scale(1.05);}
/* case */
.case{width: 100%;padding: 0!important;}
.case #caseSwiper{overflow: hidden;width: 100%;}
.case .info{position: relative;padding-top: 75%;overflow: hidden;}
.case .info .more{width: 100%;max-width: none;height: 100%;left: 0;background-color: rgba(58,47,134, 0.65);position: absolute;z-index: 2;bottom: 100%;transition: all 0.3s;}
.case .info .more span{display: inline-block;border: 1px solid #fff;color: #fff;padding: 10px 8%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius: 25px;border-bottom-right-radius: 0;font-size: 14px;}
.case .info img{position: absolute;width: 100%;height: 100%;object-fit: cover;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.case .info p{position: absolute;bottom: 0;left: 0;width: 100%;color: #fff;padding: 4% 0;background-color: rgba(0, 0, 0, 0.4);text-align: center;font-size: 18px;transition: all 0.3s;}

.case .info:hover .more{bottom: 0;}
.case .info:hover p{transform: translateY(100%);}


/* adv */
.adv{background-size: cover;background-position: center;background-repeat: no-repeat;padding: 5% 0 3%;background-image: url(../images/adv-bg.jpg);}
.adv h2{text-align: center;margin: 4% 0 3%;}
.adv ul li{position: relative;cursor: pointer;z-index: 1;margin:15px 0px;height: 280px;}
.adv ul li .adv-info{text-align: left;width: 100%;height: 100%;overflow: hidden;background-size: cover;border-radius: 70px;position: relative;box-shadow:  0px 0px 10px 10px rgba(0, 0, 0, 0.03);background-color: #fff;}
.adv ul li .adv-info::before{content: '';display: inline-block;position: absolute;width: 590px;height: 590px;background-size: cover;border-radius: 50%;z-index: 2;background-size: auto 50%;background-repeat: no-repeat;transition: all 0.3s;}
.adv ul li .adv-info::after{content: '';width: 0%;height: 100%;position: absolute;z-index: 3;}
.adv ul li:nth-child(1) .adv-info::after,.adv ul li:nth-child(3) .adv-info::after{background-image: linear-gradient(to left, rgba(58,47,134,0), rgba(58,47,134,1));left: 0;}
.adv ul li:nth-child(2) .adv-info::after,.adv ul li:nth-child(4) .adv-info::after{background-image: linear-gradient(to right, rgba(58,47,134,0), rgba(58,47,134,1));right: 0;}
.adv ul li:hover .adv-info::after{width: 100%;transition: all 0.3s;}
.adv ul li:nth-child(1) .adv-info::before{right: -295px;top: -15px;background-position: left top;}
.adv ul li:nth-child(2) .adv-info::before{left: -295px;top: -15px;background-position: right top;}
.adv ul li:nth-child(3) .adv-info::before{right: -295px;bottom: -15px;background-position: left bottom;}
.adv ul li:nth-child(4) .adv-info::before{left: -295px;bottom: -15px;background-position: right bottom;}
.adv ul li .adv-info .info{width: calc(100% - 295px);height: 100%;padding: 10% 0;position: relative;z-index: 4;color: rgba(0, 0, 0, 0.8);}
.adv ul li:nth-child(1) .adv-info .info,.adv ul li:nth-child(3) .adv-info .info{float: left;text-align: left;padding-left: 5%;}
.adv ul li:nth-child(2) .adv-info .info,.adv ul li:nth-child(4) .adv-info .info{float: right;text-align: right;padding-right: 5%;}
.adv ul li .adv-info .info p:first-child{font-size: 24px;font-weight: 600;margin: 10px 0;}
.adv ul li .adv-info .info p:last-child{line-height: 2;}
.adv ul li:hover .adv-info .info p{color: #fff;}

.adv ul li:hover .adv-info::before{background-position: center;background-size: 100%;width: 100%;height: 100%;border-radius: 0;transition: all 0.3s;}
.adv ul li:nth-child(1):hover .adv-info::before,.adv ul li:nth-child(3):hover .adv-info::before{right: 0;}
.adv ul li:nth-child(1):hover .adv-info::before,.adv ul li:nth-child(2):hover .adv-info::before{top: 0;}
.adv ul li:nth-child(2):hover .adv-info::before,.adv ul li:nth-child(4):hover .adv-info::before{left: 0;}
.adv ul li:nth-child(3):hover .adv-info::before,.adv ul li:nth-child(4):hover .adv-info::before{bottom: 0;}

.adv ul li.active .adv-info::after{width: 100%;transition: all 0.3s;}
.adv ul li.active .adv-info .info p{color: #fff;}
.adv ul li.active .adv-info::before{background-position: center;background-size: cover;width: 100%;height: 100%;border-radius: 0;}
.adv ul li.active:nth-child(1) .adv-info::before,.adv ul li.active:nth-child(3) .adv-info::before{right: 0;}
.adv ul li.active:nth-child(1) .adv-info::before,.adv ul li.active:nth-child(2) .adv-info::before{top: 0;}
.adv ul li.active:nth-child(2) .adv-info::before,.adv ul li.active:nth-child(4) .adv-info::before{left: 0;}
.adv ul li.active:nth-child(3) .adv-info::before,.adv ul li.active:nth-child(4) .adv-info::before{bottom: 0;}


/* news */
.news{margin: 5% 0;}
.news .li-d{width: 100%;}
.news .li-d a{display: inline-block;width: 100%;color: #333;}
.news .li-d a .img{position: relative;width: 100%;padding-top: 80%;overflow: hidden;border-radius: 70px;}
.news li:nth-child(2n-1) .li-d a .img{border-bottom-right-radius: 0;}
.news li:nth-child(2n) .li-d a .img{border-top-left-radius: 0;}
.news .li-d a .img img{position: absolute;width: 100%;height: 100%;top: 50%;left: 50%;transform: translate(-50%,-50%);object-fit: cover;transition: all 0.3s;}

.news .li-d a .info h4{font-size: 22px;line-height: 1.5;overflow: hidden;margin: 10% 0;transition: all 0.3s;}
.news .li-d a .info p{font-size: 16px;color: #8a8a8a;margin-bottom: 10%;line-height: 2;overflow: hidden;transition: all 0.3s;overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;}

.news li:nth-child(2n) .li-d a .info{padding-top: 20%;}

.news .li-d:hover a .img img{width: 110%;height: 110%;}
.news .li-d:hover a .info h4{color: #ef2b2d;}
.news .li-d:hover a .info p{color: #ef2b2d;opacity: 0.6;}

@media screen and (min-width: 0px) and (max-width:1400px){
    .banner .hb{height: 600px;}
}
@media screen and (min-width: 0px) and (max-width:1250px){
    .num-change{position: relative;bottom: 0;float: left;}
}
@media screen and (min-width: 0px) and (max-width:1200px){
    .news ul li a p{-webkit-line-clamp:3}
    .product .tit{margin-bottom: 1%;}

    .adv ul li .adv-info .info p{font-size: 15px;}
    .adv ul li .adv-info .info p:first-child{font-size: 22px;}
}
@media screen and (min-width: 0px) and (max-width:1100px){
    .banner .hb{height: 500px;}
}
@media screen and (min-width: 0px) and (max-width:992px){
    .num-change .counter, .num-change b{font-size: 32px;}
    .num-change .shuzi p:last-child{font-size: 14px;}
    .num-change{position: relative;bottom: 0;float: left;}
    .about{height: 500px;}
    .about .a-l{margin-top: 3%;}
    .about .a-l .fr{max-width: none;}
    .about .a-l .fr .a-con{margin-top: 5%;font-size: 14px;}
    .product{margin-top: 3%;}
    .product .tit{text-align: center;}
    .product .pro-cate{position: relative;top: 0;transform: none;width: 100%;}
    .product .pro-cate li{float: left;margin: 0 2% 1%;width: 29%;}
    .product .pro-cate li a{font-size: 14px;}
    .product .proli li:nth-child(7),.product .proli li:nth-child(8){display: none;}
    .product .pro-cate li a{line-height: 48px;}
    .product .more,.news h2 a{font-size: 14px;}
    .about .a-l .fr a,.product .more span,.news h2 a span{width: 49px;height: 49px;line-height: 49px;}
    .product .pro-cate{padding: 0 15px;}
    
    .adv ul li .adv-info p:first-child{font-size: 20px;}
    .adv ul li .adv-info p:last-child{font-size: 14px;}
    .adv ul li .adv-info .info{width: calc(90%);}

    .adv ul li .adv-info::after{width: 100%;}
    .adv ul li .adv-info .info{color: #fff;}
    .adv ul li .adv-info::before{background-position: center;background-size: cover;width: 100%;height: 100%;border-radius: 0;}
    .adv ul li:nth-child(1) .adv-info::before,.adv ul li:nth-child(3) .adv-info::before{right: 0;}
    .adv ul li:nth-child(1) .adv-info::before,.adv ul li:nth-child(2) .adv-info::before{top: 0;}
    .adv ul li:nth-child(2) .adv-info::before,.adv ul li:nth-child(4) .adv-info::before{left: 0;}
    .adv ul li:nth-child(3) .adv-info::before,.adv ul li:nth-child(4) .adv-info::before{bottom: 0;}
}
@media screen and (min-width: 0px) and (max-width:900px){
    .banner .hb{height: 400px;}
}
@media screen and (min-width: 0px) and (max-width:768px){
    .app ul li .app-info h3{font-size: 18px;}
    .app ul li .app-info p{font-size: 15px;}
    .case .info p{font-size: 18px;}
    .product .proli li:nth-child(2n-1){padding-right: 5px;}
    .product .proli li:nth-child(2n){padding-left: 5px;}
    .news ul li:first-child a{padding-top: 350px;}
    .news ul li a{height: auto;transition: all 0.3s;}
    .news ul li{margin-bottom: 20px;}
    .news ul li .li-d:hover::after,.news ul li .li-d:hover::before{display: none;}
    .news ul li .li-d:hover a{height: auto!important;width: calc(100%)!important;margin: 0;}
    .news ul li:first-child a div:hover::after{right: 0;left: auto;width: 100%;height: 100%;}
    .news ul li:first-child a div:hover::before{right: auto;left: 0;width: 100%;height: 100%;}

    .adv ul li{height: 240px;}
}
@media screen and (min-width: 0px) and (max-width:750px){
    .banner .hb{display: none;}
    .banner .mb{display: block;}
}
@media screen and (min-width: 0px) and (max-width:550px){
    .about .a-l .fr a,.product .more span,.news h2 a span{width: 39px;height: 39px;line-height: 39px;}

    .banner .swiper-button-prev, .banner .swiper-button-next{width: 30px;height: 30px;}
    .banner .swiper-button-next:after, .banner .swiper-button-prev:after{font-size: 12px;}
}
@media screen and (min-width: 0px) and (max-width:440px){
    .app{padding-bottom: 0!important;}
    .app ul li .app-img{margin-bottom: 10px;}
    .app ul li .app-info p{font-size: 14px;}
    
    .adv ul{margin-top: 15px;}
    .adv ul li{height: 200px;margin: 15px 0 0;}
    .adv ul li .adv-info{border-radius: 20px;}
    .adv ul li .adv-info .info p:first-child{font-size: 20px;}
    .about{height: 450px;}

    .case .info p{font-size: 16px;}

    .news .li-d a .info p{-webkit-line-clamp:2;}
}
@media screen and (min-width: 0px) and (max-width:375px){
    .product .more,.news h2 a{font-size: 12px;}
    .num-change .shuzi p:last-child{font-size: 12px;}
    .product .proli a .pro-tit p{font-size: 12px;}
}

.txt-swiper .swiper-slide p img{opacity: 0;transform: translateY(-30%);}
.txt-swiper .swiper-slide p img:first-child{animation: fade 2s ease 1 forwards;}
.txt-swiper .swiper-slide p img:last-child{animation: fade 2s ease 1.5s 1 forwards;}
@keyframes fade {
    0%{
        opacity: 0;
        transform: translateY(-30%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}