/* 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;}
.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(56,131,234,1), rgba(56,131,234,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;}
.about h2{text-align: center;padding: 5% 0 4%;margin: 0;}
.about .n-area{text-align: center;}
.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: #2276f8;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(17,65,142,1), rgba(17,65,142,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: #1260DB;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: #1260DB;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: #1260DB;transition: all 0.3s;z-index: -1;border-radius: 50%;}

.product ul li:hover a span{background-color: #2276f8;border: 0;width: 90px;}
.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;}

/* 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: #1260DB;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 .n-area ul{display: inline-block;}
.inter ul li{float: left;padding-top: 10%;position: relative;background-size: contain;cursor: pointer;z-index: 1;overflow: hidden;background-repeat: no-repeat;background-position: center;background-color: #fff;border: 1px solid #dcdcdc;}
.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(56,131,234,1), rgba(56,131,234,0.7));}
.inter ul li a{display: block;width: 100%;}
.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;height: 100%;}
.inter ul li .inter-info p{width: 100%;text-align: center;opacity: 0;transition: all 0.3s;}
.inter ul li .inter-info p:first-child{font-size: 24px;color: #fff;padding: 0 5%;position: absolute;bottom: 50%;left: 50%;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;transform: translate(-50%,50%);}
/* .inter ul li .inter-info p:last-child{font-size: 16px;color: #fff;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;opacity: 1;}

.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%;max-width: 500px;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: 28.5%;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: #2276f8;}


.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){
    .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;}
}
@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, rgba(56,131,234,1), rgba(56,131,234,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%;}
}
@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;}
}
@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;}
    .product ul li a{height: 150px;}
    .product ul li a span{width: 28px;height: 28px;line-height: 28px;}
}
@media screen and (min-width: 0px) and (max-width:440px){
    .product ul li a{height: 140px;}
}
@media screen and (min-width: 0px) and (max-width:375px){
    .app ul li{padding-top: 120%;}
    .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;}
    .product ul li a h4{font-size: 17px;}
    .product ul li a p{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 h4{font-size: 16px;font-weight: normal;}
}

@media screen and (min-width: 0px) and (max-width:375px){
    .product ul li a{height: 130px;}
}

@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%);
    }
}