/* banner */
.banner{height: 800px;position: relative;}
.h-banner2{height: 800px;position: relative;}
.m-banner2{position: relative;display: none;overflow: hidden;}

/* num-change */
.num-change{width: 100%;max-width: 1250px;font-size: 16px;position: absolute;bottom: -50px;left: 0;z-index: 1;background-color: #fff;box-shadow: 0px 5px 10px 0px #ddd;}
.num-change ul li{padding: 0;}
.num-change .shuzi{padding: 0 5% 0 10%;font-size: 16px;}
.num-change .shuzi p:first-child{display: inline-block;width: 100%;padding: 5% 0 2%;}
.num-change .shuzi p:last-child{display: inline-block;width: 100%;padding: 0 0 9%;}
.num-change .counter{font-size: 16px;}
.num-change b{font-size: 36px;color: #0069C2;}
.num-change .counter img{width: 50%;max-width: 80px;}


/* adv */
.area.adv{padding: 0;}
.adv{background-size: 100%;background-position: center bottom;background-repeat: no-repeat;}
.adv .info{width: 50%;height: 650px;position: relative;background-size: 100% auto;background-position: center bottom;background-repeat: no-repeat;}
.adv .info:first-child{height: 680px;}
.adv .info div{width: 90%;margin: 0 auto;max-width: 670px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);padding-left: 50px;color: #000;}
.adv .info div li:first-child{margin-bottom: 8%;}
.adv .info div h2{font-size: 28px;color: #FF963F;position: relative;margin-bottom: 10px;}
.adv .info div h2 span{display: inline-block;width: 50px;position: absolute;right: 100%;top: 50%;transform: translateY(-50%);font-size: 32px;color: #FF963F;}
.adv .info div h3{font-size: 22px;color: #333;margin-bottom: 15px;}
.adv .info div p{font-size: 15px;line-height: 30px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.adv .img{width: 50%;height: 650px;}
.adv .img:nth-child(2){height: 680px;}
.adv .img img{width: 100%;height: 100%;object-fit: cover;}


/* honor */
.honor{background-size: 100%;background-position: center bottom;background-repeat: no-repeat;}
.honor h2{text-align: center;margin: 4% 0 3%;}
.honor ul li{padding-top: 22%;position: relative;background-size: cover;cursor: pointer;z-index: 1;overflow: hidden;background-position: center;}
.honor ul li::after{position: absolute;z-index: 2;content: '';left: 0;bottom: -100%;width: 100%;height: 100%;transition: all 0.3s;z-index: 2;background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));}
.honor ul li .honor-info{position: absolute;left: 50%;transform: translateX(-50%);text-align: left;width: 100%;padding: 0 10%;bottom: 0px;overflow: hidden;z-index: 3;}
.honor ul li .honor-info p:first-child{font-size: 24px;color: #fff;}
.honor ul li .honor-info p:last-child{font-size: 16px;color: #fff;margin-top: 10%;height: 0;line-height: 30px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;transition: all 0.3s;}
.honor .n-area{padding-bottom: 5%;}

.honor ul li:hover::after{bottom: 0;}
.honor ul li:hover .honor-info p:last-child{height: 90px;}


/* Pro */
.product{margin: 0 auto;position: relative;padding-top: 7%!important;background-size: 1920px auto;background-position: center bottom;}
.product .n-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: #0069C2;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: #0069C2;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: #0069C2;width: 0;height: 0;transition: all 0.3s;}
.product .proli a::before{position: absolute;z-index: 2;content: '';left: 0;bottom: 0;background-color: #0069C2;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: bold;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: #0069C2;transition: all 0.3s;z-index: -1;border-radius: 50%;}

.product .more:hover span{color: #fff;border: 1px solid #0069C2;}
.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-top: 4%!important;background-size: 1920px auto;background-position: center top;}
.app #appSwiper{overflow: hidden;}
.app h2{text-align: center;margin: 0% 0 3%;transition: all 0.3s;}
.app ul li{padding-top: 35%;position: relative;background-size: cover;transition: all 0.3s;z-index: 1;cursor: pointer;overflow: hidden;}
.app ul li::after{position: absolute;z-index: 2;content: '';right: 0;top: 0;background-color: rgba(0, 0, 0, 0.5);width: 0;height: 100%;transition: all 0.3s;z-index: 2;}
.app ul li .app-info{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-40%);text-align: center;width: 80%;transition: all 0.3s;z-index: 3;}
.app ul li .app-info p:first-child{font-size: 20px;color: #fff;margin-bottom: 20%;transition: all 0.3s;}
.app ul li .app-info img{max-width: 50%;transition: all 0.3s;}
.app ul li .app-info p:last-child{font-size: 17px;color: #fff;margin-top: 20%;transition: all 0.3s;opacity: 0;cursor: pointer;transform: translateY(100px);overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}

.app ul li.swiper-slide-next::after{left: 0;width: 100%;right: auto;}
.app ul li.swiper-slide-next .app-info{transform: translate(-50%,calc(-50%));}
.app ul li.swiper-slide-next .app-info p:last-child{opacity: 1;transform: translateY(0);}

.app ul li:hover::after{left: 0;width: 100%;right: auto;}
.app ul li:hover .app-info{transform: translate(-50%,calc(-50%));}
.app ul li:hover .app-info p:last-child{opacity: 1;transform: translateY(0);}


/* about */
.area.about{background-color: #f7f7f7;position: relative;padding: 7% 15px 3%;color: #333;}
.about .n-area{overflow: visible;}
.about h2{font-size: 30px;text-align: center;position: relative;z-index: 1;}
.area.about h2 span{position: absolute;font-size: 170px;font-weight: bold;top: 50%;left: 50%;color: rgba(153, 153, 153, 0.2);z-index: -1;transform: translate(-50%,-50%);}
.about .info{margin-top: 4%;}
.about .info h3{font-size: 28px;text-align: center;}
.about .info h4{font-size: 16px;color: #999999;text-align: center;margin: 10px 0 15px;}
.about .info li{width: 33.333333%;float: left;text-align: center;}
.about .info li span{display: inline-block;background-color: #0069C2;border-radius: 50%;}
.about .info li span img{width: 80px;height: 80px;object-fit: contain;margin: 20px;}
.about .info li p{font-size: 20px;margin: 2%;}
.about .info .cont{font-size: 15px;line-height: 28px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;margin-top: 4%;}
.about .info a{display: block;width: 50%;max-width: 150px;text-align: center;padding: 10px 0;border: 1px solid #999999;color: #333;margin: 2% auto;}


/* news */
.news{background-color: #f2f2f2;}
.news h2{position: relative;margin: 5.5% 0 3%;}
.news h2 a{float: right;display: block;font-size: 16px;color: #999;right: 1%;position: absolute;top: 50%;transform: translateY(-50%);}
.news h2 a 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: bold;position: relative;}
.news ul li{margin-bottom: 40px;}
.news ul li .li-d{float: left;position: relative;z-index: 1;transition: all 0.3s;width: 100%;}
.news ul li a{display: block;float: left;color: #222;background-color: #fff;padding: 0 5%;position: relative;width: 100%;height: 230px;z-index: 3;}
.news ul li a h4{font-size: 16px;margin: 7% 0;transition: all 0.3s;}
.news ul li a p{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;font-size: 14px;opacity: 0.6;transition: all 0.3s;}
.news ul li a span{font-size: 14px;opacity: 0.6;margin: 7% 0;display: block;z-index: 1;}

.news ul li div::after{position: absolute;z-index: 2;content: '';width: 100%;height: 0;background-color: #0069C2;left: 0;bottom: 0;transition: all 0.3s;}

.news ul li:first-child a{background-size: cover;background-repeat: no-repeat;padding-top: 496px;background-position: center center;}
.news ul li:first-child a div{position: absolute;bottom: 0;color: #fff;left: 0;padding: 5% 5% 0;width: 100%;}
.news ul li:first-child a p,.news ul li:first-child a span{opacity: 1;}

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

.news ul li:first-child:hover a h4{color: #fff;}
.news ul li:hover a h4{color: #0069C2;}
.news h2 a:hover span{color: #fff;border: 1px solid #0069C2;}
.news h2 a:hover span::after{width: calc(100% + 1px);height: calc(100% + 1px);}

.news ul li .li-d:hover a{height: 226px;margin: 2px;width: calc(100% - 4px);}
.news ul li .li-d:hover::after{height: 100%;}
.news ul li:first-child a div::after{background-color:rgba(0,138,201,0);background-image: linear-gradient(to top, rgba(0,105,194,1), rgba(0,105,194,0));z-index: -1;}
.news ul li:first-child:hover a div::after{right: 0;left: auto;width: 100%;height: 100%;}

@media screen and (min-width: 0px) and (max-width:1400px){
    .h-banner2{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){
    .app ul li{padding-top: 45%;}
    .news ul li a p{-webkit-line-clamp:3}
    .product .tit{margin-bottom: 1%;}
}
@media screen and (min-width: 0px) and (max-width:1100px){
    .h-banner2{height: 500px;}
}
@media screen and (min-width: 0px) and (max-width:992px){
    .num-change b{font-size: 30px;}
    .num-change .shuzi{font-size: 15px;}

    .adv .info{width: 100%;height: 440px!important;}
    .adv .info div p{-webkit-line-clamp: 3;}
    .adv .img{width: 100%;height: 260px!important;}

    .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;}
    .app ul li{padding-top: 55%;}
    .honor ul li{padding-top: 32%;}
    .app ul li .app-info p:first-child{font-size: 16px;}
    .app ul li .app-info p:last-child{font-size: 14px;}
    .honor ul li .honor-info p:first-child{font-size: 20px;}
    .honor ul li .honor-info p:last-child{font-size: 14px;}
    .product .pro-cate li a{line-height: 48px;}
    .product .more,.news h2 a{font-size: 14px;}
    .product .pro-cate{padding: 0 15px;}

    .area.about h2 span{font-size: 150px;}
    .about .info h3{font-size: 22px;}
    .about .info h4{font-size: 14px;}
    .about .info li p{font-size: 17px;}
}
@media screen and (min-width: 0px) and (max-width:900px){
    .h-banner2{height: 400px;}
}
@media screen and (min-width: 0px) and (max-width:768px){
    .num-change .shuzi{font-size: 15px;}

    .adv .info div h2{font-size: 24px;}
    .adv .info div h2 span{font-size: 28px;}
    .adv .info div h3{font-size: 16px;}
    .adv .info div p{font-size: 14px;color: #444;}

    .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;}
    .app ul li{padding-top: 80%;}
    .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%;}

    .about .info li span img{width: 60px;height: 60px;}
    .area.about h2 span{font-size: 120px;}

}
@media screen and (min-width: 0px) and (max-width:750px){
    .h-banner2{display: none;}
    .m-banner2{display: block;}
    .num-change{margin-bottom: 15px;}
}
@media screen and (min-width: 0px) and (max-width:550px){
    .honor ul li{padding-top: 66%;}
    .num-change b{font-size: 22px;}
    .num-change .shuzi{font-size: 14px;}
    .num-change .shuzi p:last-child{height: 45px;}
}
@media screen and (min-width: 0px) and (max-width:440px){
    .adv .info div h2 span{font-size: 22px;width: 35px;}
    .adv .info div{padding-left: 35px;margin-top: -10px;}
    .adv .info div h2{font-size: 22px;}
    .adv .info div h3{font-size: 15px;}
    .adv .info:first-child{height: 425px!important;}
    .area.about h2 span{font-size: 100px;}
    .about .info h3{margin-top: 40px;}
    .about .info li span img{width: 40px;height: 40px;}
    .about .info li p{font-size: 15px;}
    .about .info .cont{font-size: 14px;margin-bottom: 10px;}

    .honor ul li .honor-info p:first-child{font-size: 16px;}
    .product .more span,.news h2 a span{line-height: 39px;width: 39px;height: 39px;font-size: 16px;}
}
@media screen and (min-width: 0px) and (max-width:375px){
    .app ul li{padding-top: 120%;}
    .banner{height: 667px;}
    .product .more,.news h2 a{font-size: 12px;}
    .product .proli a .pro-tit p{font-size: 12px;}
}
@media screen and (min-width: 0px) and (max-width:320px){
    .banner{height: 568px;}
    .num-change .shuzi{font-size: 12px;}
    .adv .info div p{font-size: 12px;}
    .adv .info div h2{margin-bottom: 20px;}
    .adv .info div h3{margin-top: 5px;margin-bottom: 5px;}
    .adv .info div h2 span{font-size: 18px;}
    .adv .img{height: 210px!important;}
    .area.about h2{display: none;}
    .about .info h3{margin-top: 20px;}
    .footer .co{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);
    }
}