/* banner */
.banner{margin-top: 100px;overflow-x: hidden;}
.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 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: #fff;border-radius: 4px;}

/* num-change */
.num-change{width: 100%;font-size: 16px;position: relative;}
.num-change ul li{padding: 0;cursor: pointer;transition: all 0.3s;}
.num-change ul li:nth-child(2n-1){background-image: linear-gradient(to top, rgba(0,133,212,1), rgba(0,133,212,0));}
.num-change .shuzi{padding: 0 5% 0;}
.num-change .shuzi p:first-child{display: inline-block;width: 100%;padding: 10% 0 5%;}
.num-change .shuzi p:last-child{display: inline-block;width: 100%;padding: 5% 0 15%;}
.num-change .counter,.num-change b{font-size: 50px;color: #fff;font-weight: bold;transition: all 0.5s;}
.num-change .counter{display: inline-block;}
.num-change ul li:hover .counter{transform: rotateY(360deg);}

/* about */
.about{background-color: #f5f5f5;position: relative;background-size: auto;background-position: 0 bottom;background-repeat: no-repeat;color: #fff;overflow: hidden;}
.about::after{position: absolute;content: '';display: inline-block;width: 100%;height: 50%;left: 0;bottom: 0;
    /* background-image: linear-gradient(to top, rgba(0,133,212,1), rgba(0,133,212,0)); */
    z-index: 1;}
.about h2{text-align: center;padding: 5% 0 4%;margin: 0;}
.about .n-area{text-align: center;position: relative;z-index: 2;}
.about .n-area h2 span{color: #fff;}
.about .a-con h3{font-weight: bold;font-size: 22px;margin: 0;text-align: center;margin-bottom: 2%;}
.about .a-con{font-size: 16px;line-height: 38px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}
.about .n-area a{height: 40px;line-height: 40px;padding: 0 4%;background-color: #0085d4;border-radius: 5px;display: inline-block;color: #fff;margin: 3% 0;}



/* Pro */
/* .product{margin-bottom: 4%;}
.product h2{position: relative;margin: 5.5% 0 3%;text-align: center;}
.product h2 a{float: right;display: block;font-size: 16px;color: #999;right: 1%;position: absolute;top: 50%;transform: translateY(-50%);}
.product 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;}
.product ul li{margin-bottom: 18px;}
.product ul li .li-d{float: left;position: relative;z-index: 1;transition: all 0.3s;width: 100%;background-size: cover;border-radius: 5px;overflow: hidden;}
.product ul li a{display: block;float: left;color: #fff;padding: 0 10%;position: relative;width: 100%;height: 266px;z-index: 3;width: 100%;background-image: linear-gradient(to right, rgba(0,133,212,1), rgba(0,133,212,0));}
.product ul li a h4{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 24px;margin: 20% 0 2%;transition: all 0.3s;font-weight: bold;}
.product 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;margin-bottom: 5%;height: 50px;transition: all 0.3s;}
.product ul li a b{display: inline-block;width: 100%;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;height: 0px;line-height: 24px;font-size: 12px;font-weight: normal;transition: all 0.3s;}

.product ul li a span{font-size: 12px;display: inline-block;z-index: 1;border-radius: 5px;border: 1px solid #fff;color: #fff;text-align: center;margin-top: 1%;transition: all 0.3s;width: 38px;text-align: center;height: 38px;line-height: 38px;}
.product ul li a span i:last-child{opacity: 0;font-size: 12px;white-space:nowrap;}

.product ul li div::after{position: absolute;z-index: 2;content: '';width: 0;height: 0;background-color: #0085d4;left: 0;top: 0;transition: all 0.3s;}
.product ul li div::before{position: absolute;z-index: 2;content: '';width: 0;height: 0;background-color: #0085d4;right: 0;bottom: 0;transition: all 0.3s;}


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

.product ul li:hover a span{background-color: #fff;border: 0;width: 90px;color: #0085d4;}
.product ul li:hover a span i:first-child{display: none;}
.product ul li:hover a span i:last-child{opacity: 1;}
.product ul li:hover a p{height: 0;}
.product ul li:hover a b{height: 50px;} */

.product{margin: 5% 0;}
.product .c-tit{margin-bottom: 10%;}
.product .p-nav a{display: block;width: 100%;height: 42px;line-height: 42px;border-top-left-radius: 21px;border-bottom-left-radius: 21px;background-color: #e7ebf2;margin-bottom: 5.7%;font-size: 16px;color: #0a0b29;text-indent: 30px;transition: all 0.3s;}
.product .p-nav a:last-child{margin-bottom: 0;}
.product .p-nav a:hover{background-color: #008ddb;color: #fff;}


.product .pro-li{width: 100%;position: relative;padding-right: 33.333333%;}
.product .pro-li .img{position: relative;width: calc(100% - 2px);overflow: hidden;padding-top: 71%;border: 1px solid #eee;border-radius: 10px;}
.product .pro-li .img img{position: absolute;width: 100%;height: 100%;object-fit: contain;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius: 8px;}
.product .pro-li .info{position: absolute;width: 40%;right: 0;top: 50%;transform: translateY(-50%);background-color: #008ddb;border-radius: 8px;color: #fff;padding: 3%;}
.product .pro-li .info h3{font-size: 22px;font-weight: bold;margin-bottom: 4%;}
.product .pro-li .info p{font-size: 14px;line-height: 34px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.product .pro-li .info a{display: inline-block;padding: 0 10%;line-height: 36px;height: 36px;font-size: 14px;text-align: center;border-radius: 18px;background-color: #fff;margin-top: 10%;}
.product #proSwiper{overflow: hidden;}

.product #proSwiper2{overflow: hidden;margin-top: 3%;}
.product #proSwiper2 .swiper-slide{position: relative;border-radius: 8px;overflow: hidden;position: relative;border: 1px solid #eee;}
.product #proSwiper2 .swiper-slide .img2{position: relative;padding-top: 70%;}
.product #proSwiper2 .swiper-slide .img2 img{position: absolute;width: 100%;height: 100%;object-fit: contain;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius: 8px;}
.product #proSwiper2 .swiper-slide .info2{position: absolute;height: 70%;background-color: #008ddb;left: 0;bottom: 0;width: 100%;transform: translateY(calc(100% - 65px));transition: all 0.5s;}
.product #proSwiper2 .swiper-slide .info2 .por{width: 100%;height: 100%;}
.product #proSwiper2 .swiper-slide .info2 .por::before{content: '';display: inline-block;width: 100%;height: 25px;background-image: url();background-size: cover;background-position: center bottom;background-repeat: no-repeat;position: absolute;top: -24px;}
.product #proSwiper2 .swiper-slide .info2 .poa{width: 100%;text-align: center;transition: all 0.5s;}
.product #proSwiper2 .swiper-slide .info2 .poa p{font-size: 20px;font-weight: bold;color: #fff;line-height: 65px;height: 65px;text-align: center;margin-bottom: 5%;}
.product #proSwiper2 .swiper-slide .info2 .poa a{display: inline-block;height: 36px;line-height: 36px;width: 80%;max-width: 180px;background-color: #fff;border-radius: 18px;color: #2c67eb;text-align: center;}
.product #proSwiper2 .swiper-slide:hover .info2{transform: translateY(0);}
.product #proSwiper2 .swiper-slide:hover .info2 .poa{transform: translateY(20%);}

.product .swiper-switch{position: absolute;right: 0;bottom: 0;width: 40%;z-index: 5;padding-right: 15px;}
.product .swiper-switch .swiper-button-next,.product .swiper-switch .swiper-button-prev{position: relative;width: 50px;height: 34px;border: 1px solid #0a0b29;float: right;left: auto;right: auto;margin-left: 5%;transition: all 0.3s;}
.product .swiper-switch .swiper-button-next::after,.product .swiper-switch .swiper-button-prev::after{display: inline-block;width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #0a0b29;font-size: 30px;text-align: center;font-family: fangsong;transition: all 0.3s;}
.product .swiper-switch .swiper-button-next::after{content: '→';}
.product .swiper-switch .swiper-button-prev::after{content: '←';}
.product .swiper-switch div:hover{background-color: #008ddb;color: #fff;border: 1px solid #008ddb;}
.product .swiper-switch div:hover::after{color: #fff;}

/* app */
.app {padding-top: 4%!important;background-size: 1920px auto;background-position: 0 top;}
.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: #0085d4;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: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);}



/* inter */
.inter{background-size: 100%;background-position: center bottom;background-repeat: no-repeat;}
.inter h2{text-align: center;margin: 4% 0 3%;}
.inter ul li{padding-top: 30%;position: relative;background-size: cover;cursor: pointer;z-index: 1;overflow: hidden;background-position: center;}
.inter 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,133,212,1), rgba(0,133,212,0));}
.inter ul li .inter-info{position: absolute;left: 50%;transform: translateX(-50%);text-align: left;width: 100%;padding: 0 10%;bottom: 0px;z-index: 3;}
.inter ul li .inter-info p:first-child{font-size: 24px;color: #fff;padding: 0 5%;position: absolute;top: -10px;left: 0;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.inter ul li .inter-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;}
.inter .n-area{padding-bottom: 5%;}

.inter ul li:hover::after{bottom: 0;}
.inter ul li:hover .inter-info p:first-child{-webkit-line-clamp: 10;}
.inter ul li:hover .inter-info p:last-child{height: 90px;}

.int-m{width: 100%;margin-top: 8%;position: relative;}
.int-m a{display: inline-block;position: absolute;top: 50%;transform: translateY(-50%);left: 5%;width: 50%;}
.int-m a img{width: 100%;}
.int-m>img:first-child{width: 100%;}
.int-m>img:last-child{position: absolute;top: 50%;transform: translateY(-50%);right: 5%;width: 28.5%;animation: float2 3s ease-out infinite normal;}

.int-m{width: 100%;margin-top: 8%;position: relative;}
.int-m a{display: inline-block;position: absolute;top: 50%;transform: translateY(-50%);left: 5%;width: 60%;}
.int-m a img{width: 100%;max-width: 700px;max-height: 90%;}
.int-m>img:first-child{width: 100%;}
.int-m>img:last-child{position: absolute;top: 50%;transform: translateY(-50%);right: 5%;width: 33.333333%;animation: float2 3s ease-out infinite normal;}

/* news */
.news{background-color: #f4f5f8;}
.news h2{position: relative;margin: 5.5% 0 3%;text-align: center;}
.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: 20px;}
.news ul li .li-d{float: left;position: relative;z-index: 1;width: 100%;}
.news ul li .li-d a .time{width: 60px;float: left;height: 100%;padding-top: 35px;}
.news ul li .li-d a .time b{font-size: 45px;float: left;border-bottom: 1px solid #000;transition: all 0.2s;}
.news ul li .li-d a .info{float: left;width: calc(100% - 60px);padding-top: 50px;padding-left: 4%;}

.news ul li a{display: block;float: left;color: #222;background-color: #fff;padding: 0 6%;position: relative;width: 100%;height: 172px;z-index: 3;overflow: hidden;z-index: 1;}
.news ul li a h4{font-size: 22px;transition: all 0.3s;display: inline-block;margin: 0;width: 100%;margin-bottom: 10px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;transition: all 0.4s;}
.news ul li a p{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-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;float: left;transition: all 0.2s;}
.news ul li a div{position: relative;z-index: 2;transition: all 0.2s;}

.news ul li:first-child a{height: 555px;padding: 0 10%;}
.news ul li:first-child a img{height: 290px;width: 100%;object-fit: cover;margin: 40px 0;}

.news ul li a::before{content: '';width: 0;height: 0;transition: all 0.6s;position: absolute;top: -50%;left: -50%;border-radius: 50%;z-index: 2;background-color: #0085d4;}


.news ul li:hover a{color: #fff;border-radius: 5px;}
.news ul li:hover .li-d a .time b{border-bottom: 1px solid #fff;}
.news ul li:hover a::before{width: 200%;height: 200%;}


@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%;}
    .product ul li a h4{margin-top: 15%;}
    .inter ul li .inter-info p:first-child{font-size: 22px;}
}
@media screen and (min-width: 0px) and (max-width:1042px){
    .num-change{position: relative;bottom: 0;float: left;}
}

@media screen and (min-width: 0px) and (max-width:992px){
    .product .pro-li .img{padding-top: 90%;}
    .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 .a-l{margin-top: 5%;}
    .about .a-l .fr .a-con{margin-top: 0;font-size: 14px;}
    .product{margin-top: 3%;}
    .product .tit{text-align: center;}
    .product .pro-cate{position: relative;top: 0;transform: none;}
    .product .pro-cate li{float: left;margin: 0 2% 1%;}
    .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%;}
    .app ul li .app-info p:first-child{font-size: 16px;}
    .app ul li .app-info p:last-child{font-size: 14px;}
    .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;}

    .inter ul li{padding-top: 40%;}
}
@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:768px){
    .banner{margin-top: 65px;}
    .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:first-child a div::after,.news ul li:first-child a div::before{background-color:rgba(0,0,0,0);background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));z-index: -1;}
    /* .product ul li a{height: 185px;}
    .product ul li a h4{margin-top: 10%;font-size: 19px;}
    .product ul li a span{margin-bottom: 8%;} */
    .int-m>img:last-child{display: none;}
    .int-m a{width: 80%;}
    .about .a-con{font-size: 14px;}
    .num-change ul li:nth-child(2n-1){background-image:none;}
    .num-change ul li:first-child,.num-change ul li:last-child{background-image: linear-gradient(to top, rgb(0, 133, 212), rgba(0, 133, 212, 0));}
    .area h2{margin-top: 5%;}
    /* .product ul li:nth-child(2n-1){padding-right: 7.5px;}
    .product ul li:nth-child(2n){padding-left: 7.5px;} */
    .int-m a img{max-width: 350px;max-height: 90%;}
    
    .product .c-tit{margin: 5% 0;text-align: center;}
    .product .pro-li .info h3{font-size: 18px;}
    .product .pro-li .info p{line-height: 30px;}
    .product .pro-li .info{width: 60%;}
    .product .pro-li .info a{margin-top: 5%;}
    .product #proSwiper2 .swiper-slide .info2 .poa p{font-size: 18px;height: 50px;line-height: 50px;}
    .product #proSwiper2 .swiper-slide .info2{transform: translateY(calc(100% - 50px));}
}
@media screen and (min-width: 0px) and (max-width:550px){
    /* .inter ul li{padding-top: 80%;} */
    .about .a-l .fr a,.product .more span,.news h2 a span{width: 39px;height: 39px;line-height: 39px;}
    .int-m{display: none;}
    .news ul li a h4{font-size: 18px;font-weight: bold;}
    .inter ul li .inter-info p:first-child{top: 5px;}
    .inter ul li{padding-top: 65%;}
}
@media screen and (min-width: 0px) and (max-width:440px){
    .about .a-con h3{font-size: 18px;}
    .num-change .counter, .num-change b{font-size: 24px;}
}
@media screen and (min-width: 0px) and (max-width:440px){
    .product ul li a{height: 150px;}
    .product ul li a span{width: 28px;height: 28px;line-height: 28px;}
    .product .swiper-switch{display: none;}
    .product #proSwiper{display: none;}
}
@media screen and (min-width: 0px) and (max-width:375px){
    .app ul li{padding-top: 120%;}
    .num-change .shuzi p:last-child{font-size: 12px;}
    .about .a-con{font-size: 12px;}
    .news ul li:first-child a{height: 390px;}
    .news ul li:first-child a img{height: 200px;margin: 30px 0;}
    .news ul li .li-d a .time b{font-size: 30px;}
    .news ul li a p{font-size: 12px;}
    .news ul li a span{font-size: 12px;}
    .news ul li a{height: 115px;}
    .news ul li .li-d a .info{padding-top: 40px;width: calc(100% - 50px);padding-top: 20px;}
    .news ul li .li-d a .time{width: 50px;padding-top: 15px;}
    .inter ul li .inter-info p:first-child{top: 0;}
    
    .product ul li a{height: 130px;}
    .product .pro-li{padding-right: 20%;}
}


@keyframes float2 {
    0%{
        transform: translate(0%,-50%);
    }
	50%{
		transform: translate(0%,-60%);
	}
    100%{
        transform: translate(0%,-50%);
    }
}
@keyframes float3 {
    0%{
        transform: translate(0%,0%);
    }
	50%{
		transform: translate(0%,20%);
	}
    100%{
        transform: translate(0%,0%);
    }
}