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

.img-swiper .swiper-slide img{animation: fade22 15s ease infinite;}
@keyframes fade22 {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.05);
    }
    100%{
        transform: scale(1);
    }
}

/* num-change */
.num-change{width: 70%;max-width: 1250px;font-size: 16px;position: absolute;top: 100%;left: 0;z-index: 1;background-color: #fff;box-shadow:  0px 22px 44px 0px #0F000000;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);transform: translateY(-50%);}
/* .num-change ul li{padding: 0;}
.num-change .shuzi{padding: 0 5% 0 10%;font-size: 24px;}
.num-change .shuzi p:first-child{display: inline-block;width: 100%;padding: 5% 0 2%;font-size: 16px;}
.num-change .shuzi p:last-child{display: inline-block;width: 100%;padding: 0 0 9%;font-size: 16px;}
.num-change .counter{font-size: 46px;color: #009de3;font-family: fantasy;}
.num-change b{font-size: 28px;color: #009de3;}
.num-change .counter img{width: 50%;max-width: 80px;} */
.num-change{background-color: #fff;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}
.num-change .ul{display: flex;flex-wrap: wrap;width: 100%;max-width: 1040px;margin-left: auto;}
.num-change .ul .li{width: 33.333333%;display: flex;flex-wrap: wrap;padding: 25px 0px 20px 15px;}
.num-change img{height: 40px;margin-bottom: 15px;}
.num-change p{width: 100%;font-size: 18px;color: rgba(0, 0, 0, 0.8);font-weight: 600;}





/* about */
.about{position: relative;background-size: auto;background-position: left bottom;background-repeat: no-repeat;padding-top: 30px;background-image: url(../images/about-bg.png);}
.about .row{display: flex;flex-wrap: wrap;align-items: stretch;}
.about .a-l{position: relative;display: flex;flex-wrap: wrap;}
.about .a-l .info{width: 100%;;max-width:700px;padding: 40px 0px;padding-right: 20%;margin-left: auto;}
.about .a-l .a-con{margin-top: 30px;line-height: 2;font-size: 16px;color: rgba(0, 0, 0, 0.8);overflow: hidden;display: -webkit-box;-webkit-line-clamp: 10;-webkit-box-orient: vertical;}
.about .a-l a{margin-top: 35px;display: block;width: 59px;height: 59px;text-align: center;line-height: 59px;border: 2px solid #009de3;border-radius: 50%;font-size: 18px;color: #009de3;font-family: cursive;font-weight: bold;position: relative;transition: all 0.3s;z-index: 1;}
.about .a-r{padding: 0;}
.about .a-r img{width: 100%;height: 100%;object-fit: cover;}
.about .a-l a::after{content: '';width: 0;height: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #009de3;transition: all 0.3s;z-index: -1;border-radius: 50%;}
.about .a-l a:hover{color: #fff;border-color:#009de3;}
.about .a-l a:hover::after{width: calc(100% + 2px);height: calc(100% + 2px);}

/* Pro */
.product{margin: 0 auto;position: relative;background-size: 1920px auto;background-position: 0 bottom;background-image: url(../images/area-bg.jpg);background-size: cover;}
.product .n-area{overflow: unset;padding: 50px 0 0;}
.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%);display: flex;flex-wrap: wrap;justify-content: right;}
.product .pro-cate li{margin: 2px 15px 2px 0;position: relative;z-index: 1;transition: all 0.3s;height: 56px;border: 1px solid rgba(0, 0, 0, 0.1);display: flex;align-items: center;max-width: 160px;width: calc(33.333333% - 15px);}
.product .pro-cate li a{font-size: 16px;position: relative;z-index: 3;transition: all 0.3s;width: 100%;text-align: center;padding: 0 5px;}
.product .pro-cate li::after{position: absolute;z-index: 2;content: '';right: 0;top: 0;background-color: #009de3;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: #009de3;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: rgba(0, 0, 0, 0.1);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: #009de3;width: 0;height: 0;transition: all 0.3s;}
.product .proli a::before{position: absolute;z-index: 2;content: '';left: 0;bottom: 0;background-color: #009de3;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: contain;}
.product .proli a .pro-tit{position: relative;z-index: 3;}
.product .proli a .pro-tit p{color: rgba(0, 0, 0, 0.8);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;display: flex;justify-content: center;align-items: center;color: rgba(0, 0, 0, 0.1);border: 1px solid rgba(0, 0, 0, 0.1);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: rgba(0, 0, 0, 0.4);font-weight: 400;}
.product .more span{display: inline-block;width: 59px;height: 59px;text-align: center;line-height: 59px;border: 1px solid rgba(0, 0, 0, 0.2);border-radius: 50%;font-size: 18px;color: rgba(0, 0, 0, 0.2);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: #009de3;transition: all 0.3s;z-index: -1;border-radius: 50%;}

.product .more:hover span{color: #fff;border-color: #009de3;}
.product .more:hover span::after{width: calc(100% + 2px);height: calc(100% + 2px);}
.product .proli a:hover{box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}
.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: 50px;background-size: 1920px auto;background-position: 0 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: 3;content: '';right: 0;top: 0;background-color: #009de3;width: 0;height: 100%;transition: all 0.3s;}
.app ul li::before{position: absolute;z-index: 2;content: '';right: 0;top: 0;background-color: rgba(0, 0, 0, 0.3);width: 100%;height: 100%;transition: all 0.3s;}
.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: 4;}
.app ul li .app-info p:first-child{font-size: 24px;color: #fff;margin-bottom: 30px;transition: all 0.3s;font-weight: 600;}
.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: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);}

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

.adv ul li:hover{transform: translateY(-3px);}
.adv ul li:hover::after{bottom: 0;}
.adv ul li:hover .adv-info p:last-child{height: 90px;}


/* search */
.search{margin-top: 4%;display: flex;flex-wrap: wrap;width: 100%;background-color: rgba(0, 0, 0, 0.02);padding: 30px 50px;}
.search .tit{width: 100%;display: flex;line-height: 1.5;align-items: end;margin-bottom: 25px;}
.search .tit h3{font-size: 32px;font-weight: 600;margin-right: 20px;white-space: nowrap;}
.search .tit p{font-size: 16px;color: rgba(0, 0, 0, 0.3);}
.search form{width: 100%;display: flex;background-color: #fff;height: 60px;align-items: center;padding-left: 25px;}
.search form svg{width: 30px;height: 30px;color: rgba(0, 0, 0, 0.3);}
.search form input{height: 100%;width: calc(80% - 30px);text-indent: 20px;}
.search form input::placeholder{color: rgba(0, 0, 0, 0.3);}
.search form button{width: 20%;max-width: 180px;background-color: #009de3;color: #fff;height: 100%;margin-left: auto;display: flex;align-items: center;justify-content: center;font-size: 16px;}





/* news */
.news{background-image: url(../images/area-bg.jpg);background-size: cover;}
.news h2{position: relative;margin: 2% 0 3%;}
.news h2 a{float: right;display: block;font-size: 16px;color: rgba(0, 0, 0, 0.4);right: 0;position: absolute;top: 50%;transform: translateY(-50%);font-weight: 400;}
.news h2 a span{display: inline-block;width: 59px;height: 59px;text-align: center;line-height: 59px;border: 1px solid rgba(0, 0, 0, 0.2);border-radius: 50%;font-size: 18px;color: rgba(0, 0, 0, 0.2);font-family: cursive;font-weight: bold;position: relative;}
.news ul li{margin-bottom: 36px;}
.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: rgba(0, 0, 0, 0.8);background-color: #fff;padding: 0 5%;position: relative;width: 100%;height: 230px;z-index: 3;}
.news ul li a h4{font-size: 17px;margin: 7% 0;transition: all 0.3s;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.news ul li a p{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 16px;opacity: 0.85;transition: all 0.3s;line-height: 2;}
.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: 0;height: 0;background-color: #009de3;left: 0;top: 0;transition: all 0.3s;}
.news ul li div::before{position: absolute;z-index: 2;content: '';width: 0;height: 0;background-color: #009de3;right: 0;bottom: 0;transition: all 0.3s;}

.news ul li:first-child a{background-size: cover;background-repeat: no-repeat;padding-top: 496px;}
.news ul li:first-child a div{position: absolute;bottom: 0;color: #fff;left: 0;padding: 100px 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: #009de3;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: #009de3;}
.news h2 a:hover span{color: #fff;border: 1px solid #009de3;}
.news h2 a:hover span::after{width: calc(100% + 1px);height: calc(100% + 1px);}

.news ul li .li-d:hover::after{right: 0;left: auto;width: 100%;height: 100%;}
.news ul li .li-d:hover::before{right: auto;left: 0;width: 100%;height: 100%;}
.news ul li:first-child a div::after,.news ul li:first-child a div::before{background-color:rgba(0,99,177,0);background-image: linear-gradient(to top, rgba(0,161,233,1), rgba(0,161,233,0));z-index: -1;width: 100%;}
/* .news ul li:first-child:hover a div::after{right: 0;left: auto;width: 100%;height: 100%;} */
.news ul li:first-child:hover a div::before{height: 100%;}

@media screen and (min-width: 0px) and (max-width:1400px){
    .h-banner2{height: 600px;}
    .product .more{margin-right: 15px;}
    .product .pro-cate li{max-width: 150px;}
    .about .a-l .info{padding-right: 15px;}

    .adv ul li .adv-info p:first-child{font-size: 22px;}
    .adv ul li .adv-info p:last-child{font-size: 15px;}
}
@media screen and (min-width: 0px) and (max-width:1250px){
    .num-change{width: 100%;transform: translateY(0);}
    .adv{padding-top: 120px;}
}
@media screen and (min-width: 0px) and (max-width:1200px){
    .about .a-l .info{padding-top: 40px;}
    .adv ul li{padding-top: 30%;}
    .adv ul li .adv-info{padding: 25px 30px;}
    .adv ul li .adv-info p:last-child{margin-top: 15px;}
    .app ul li{padding-top: 45%;}
    .search .tit h3{font-size: 28px;}
    .product .tit{margin-bottom: 1%;}
    .product .pro-cate li{max-width: 120px;}
    .num-change .shuzi p:last-child{font-size: 15px;}
}
@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 .counter, .num-change b{font-size: 32px;}
    .num-change .ul .li{padding-left: 15px;}
    .about{padding-top: 0;}
    .about .a-l{margin-top: 0;z-index: 2;}
    .about .a-r{padding: 0;position: absolute;height: 100%;}
    .about .a-l .info{max-width: none;width: 90%;background-color: rgba(255,255,255,.75);padding: 6%;margin: 50px auto;}
    .about .a-l .a-con{margin-top: 0;margin-top: 6%;}
    .product .tit{text-align: center;}
    .product .pro-cate{position: relative;top: 0;transform: none;width: 100%;}
    .product .pro-cate li{float: left;}
    .product .pro-cate li a{font-size: 15px;}
    .product .proli li:nth-child(7),.product .proli li:nth-child(8){display: none;}
    .app ul li{padding-top: 55%;}
    .adv ul li{padding-top: 32%;}
    .app ul li .app-info p:last-child{font-size: 14px;}
    .adv ul li .adv-info p:first-child{font-size: 20px;}
    .adv ul li .adv-info p:last-child{font-size: 14px;}
    .about .a-l a,.product .more span,.news h2 a span{width: 49px;height: 49px;line-height: 49px;}
    .product .pro-cate{padding: 15px;justify-content: left;}
}
@media screen and (min-width: 0px) and (max-width:900px){
    .h-banner2{height: 400px;}
}
@media screen and (min-width: 0px) and (max-width:768px){
    .h-banner2{display: none;}
    .m-banner2{display: block;}
    .num-change img{margin-bottom: 10px;}
    .num-change p{font-size: 16px;font-weight: normal;}
    .num-change .shuzi p:last-child{height: 42px;}
    .product .proli li:nth-child(2n-1){padding-right: 5px;}
    .product .proli li:nth-child(2n){padding-left: 5px;}
    .adv{padding-top: 100px;}
    .adv ul li{padding-top: 35%;}
    .search{margin-top: 50px;padding: 30px;}
    .search form{height: 50px;}
    .search .tit h3{font-size: 24px;}
    .news ul li:first-child a{padding-top: 350px;}
    .app{padding-top: 30px;}
    .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%;}
}
@media screen and (min-width: 0px) and (max-width:767px){
    .search .tit{flex-wrap: wrap;margin-bottom: 20px;}
    .search .tit h3{width: 100%;margin-bottom: 15px;}
    .search .tit p{width: 100%;line-height: 1.5;font-size: 15px;}
    .search form{padding-left: 15px;}
}
@media screen and (min-width: 0px) and (max-width:550px){
    .adv ul li{padding-top: 65%;}
    .adv ul li .adv-info p:first-child{font-size: 18px;font-weight: 600;}
    .about .a-l a, .product .more span, .news h2 a span{width: 39px;height: 39px;line-height: 39px;}
}
@media screen and (min-width: 0px) and (max-width:440px){
    .num-change img{height: 25px;}
    .num-change p{font-size: 14px;}
    .about .a-l .a-con{font-size: 14px;}
    .product .n-area{padding: 25px 0 0px;}
    .product .pro-cate li{height: 45px;}
    .app ul li{padding-top: 120%;}
    .app ul li .app-info p:first-child{font-size: 20px;}
    .adv h2{margin-top: 30px;}
    .adv .n-area{padding-bottom: 50px;}
    .search{padding: 20px;}
    .search form button{font-size: 15px;}
    .banner{height: 667px;}
    .product .more,.news h2 a{font-size: 14px;}
    .num-change .shuzi p:last-child{font-size: 14px;}
    .product .proli a .pro-tit p{font-size: 14px;}
    .about .a-l .info{margin: 30px auto;}
    .about .a-l .a-con{-webkit-line-clamp: 5;}
    .news h2{margin-top: 10px;}
    .news ul li a p{font-size: 14px;}
}


.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);
    }
}