.banner {position: relative;overflow: hidden;height: 100vh;}
.banner-slide {overflow: hidden;}
.banner-slide figure {display: block;line-height: 1;overflow: hidden;transform: scale(1.15, 1.15);transition: 1s linear 2s;}
.banner-slide figure img {display: block;position: relative;}
.banner-slide.swiper-slide-active figure {transition: 6s linear;transform: scale(1);}
.banner-slide.swiper-slide-active .bhide {visibility: visible;animation: letterL 2s;animation-fill-mode: forwards;animation-timing-function: ease-in-out;
}
@keyframes letterL {
  0% {
    opacity: 0;
    text-shadow: #ffffff 0px 0px 40px;
  }
  60% {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    text-shadow: #ffffff 0px 0px 0px;
  }
  100% {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    text-shadow: #ffffff 0px 0px 0px;
  }
}
.bhide {visibility: hidden;transform: translateY(-100px);}
.btext {position: absolute;left: 12.5%;right: 12.5%;top: 35%;z-index: 5;}
.btext p {color: #ffffff;font-size: 30px;letter-spacing: 3px;}
.btitle {display: inline-block;position: relative;padding-bottom: 35px;margin-bottom: 30px;}
.btitle i {display: block;position: absolute;left: 0;right: 16px;bottom: 0;height: 1px;background: rgba(255, 255, 255, 0.3);}
.btitle i:before {position: absolute;left: 0;bottom: 0px;content: "";width: 113px;height: 2px;background: #fff;}
.btitle strong {display: block;line-height: 1.2;color: #fff;font-size: 48px;letter-spacing: 16px;}
.banner-prev {position: absolute;left: 12.5%;bottom: 65px;z-index: 10;overflow: hidden;}
.banner-prev span {display: block;float: left;position: relative;z-index: 3;margin-right: 30px;width: 48px;height: 48px;border: 1px solid #fff;text-align: center;line-height: 48px;
  color: #fff;font-size: 26px;cursor: pointer;transition: 0.4s;overflow: hidden;}
.banner-prev span:hover {color: #000;}
.banner-prev span:hover:before {transform: scale(1);}
.banner-prev span:before {content: "";position: absolute;left: -150%;top: -150%;background: #fff;width: 300%;height: 300%;border-radius: 50%;z-index: -1;transition: 0.5s;transform: scale(0);}
.banner .more { display:block; width:135px; height:45px; line-height:45px; text-align:center; color:#fff; margin-top:45px; border:1px solid #fff;}




.section1{width: 100%;height: 100vh;position: relative;z-index: 1;}
.section1 .fp-tableCell{display: flex;align-items: center;justify-content: center;}
.section1 .background{position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;pointer-events: none;}
.section1 .warp .title{text-align: center;margin: 0 0 26px 0;}
.section1 .warp .title span{font-size: 36px;font-family: Source Han Sans CN;font-weight: bold;color: #333333;margin: 0 0 14px 0;display: block;}
.section1 .warp .title p{font-size: 14px;font-family: Helvetica;font-weight: 400;color: #999999;}
.section1 .warp .content{width: 1720px;position: relative;}
.section1 .warp .content .swiper{width: 1515px;margin: auto;}
.section1 .warp .content .swiper .text{margin: 20px auto 0;text-align: center;}
.section1 .warp .content .swiper .text span{font-size: 26px;font-family: Helvetica;font-weight: 400;color: #000000;}
.section1 .warp .content .swiper .text .more{margin: 31px 0 0 0;display: flex;align-items: center;justify-content: center;opacity: 0;transition: 1s;}
.section1 .warp .content .swiper .swiper-slide-active .text .more{opacity: 1;}
.section1 .warp .content .swiper .images{width: 400px;height: 400px;display: flex;align-items: center;justify-content: center;box-shadow: -2px 2px 20px #cacaca; position:relative;}
.section1 .warp .content .swiper .images .img {width: 100%;padding-bottom: 100%;}
.section1 .warp .content .swiper .text .more .circle{width: 36px;height: 36px;background: #283A79;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.section1 .warp .content .swiper .text .more .circle .iconfont{color: rgba(255, 255, 255, 1);font-size: 14px;}
.section1 .warp .content .swiper .text .more p{font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: #666666;margin: 0 0 0 8px;}
.section1 .warp .content .button{position: absolute;width: 100%;height: 60px;top: 35%;transform: translateY(-50%);left: 0;pointer-events: none;display: flex;justify-content: space-between;}
.section1 .warp .content .button .circle{
    pointer-events: auto;width: 60px;height: 60px;background: rgba(0, 0, 0, 0);border: 1px solid #999999;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: 0.3s;}
.section1 .warp .content .button .circle .iconfont{color: #000;font-size: 16px;transition: 0.3s;}
.section1 .warp .content .button .circle:first-child{transform: rotate(180deg);}
.section1 .warp .content .button .circle:hover{background: #283A79;border: 1px solid transparent;transform: scale(1.1);}
.section1 .warp .content .button .circle:first-child:hover{transform: rotate(180deg) scale(1.1);}
.section1 .warp .content .button .circle:hover .iconfont{color: #fff;}

.section2{width: 100%;height: 100vh;overflow: hidden;position: relative;z-index: 1;}
.section2 .fp-tableCell{display: flex;align-items: center;justify-content: center;}
.section2 canvas{object-fit: cover;}
.section2:after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(transparent,rgba(0,0,0,.5));pointer-events: none;}
.section2 .background{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
.section2 .background .swiper{width: 100%;height: 100%;}
.section2 .background .swiper .swiper-slide{opacity: 0!important;transition: 1s;}
.section2 .background .swiper .swiper-slide-active{opacity: 1!important;}
.section2 .background .swiper .background_{width: 100%;height: 100%;}
.section2 .warp{text-align: center;position: relative;z-index: 1;top: 40px;}
.section2 .warp .text span{font-size: 35px;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;margin: 0 0 10px 0;display: block;font-weight: bold;}
.section2 .warp .text h5{font-size: 14px;font-family: Helvetica;font-weight: 400;color: #fff;margin: 0 0 27px 0;}
.section2 .warp .text div > p{width: 804px;margin: auto;font-size: 16px;font-family: Source Han Sans CN;color: #FFFFFF;line-height: 36px;}
.section2 .warp .text .more{width: fit-content;margin: 60px auto 0;display: flex;align-items: center;justify-content: center;}
.section2 .warp .text .more .circle{width: 36px;height: 36px;background: #283A79;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 8px 0 0;}
.section2 .warp .text .more .circle .iconfont{color: rgba(255, 255, 255, 1);font-size: 13px;}
.section2 .warp .text .more > p{font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;}
.section2 .warp .water{margin: 97px 0 0 0;display: flex;justify-content: center;}
.section2 .warp .water .item{margin: 0 70px 0 0;cursor: pointer;transition: 0.6s;}
.section2 .warp .water .item:hover{transform: translateY(-40px);}
.section2 .warp .water .item:last-child{margin: 0;}
.section2 .warp .water .item .border{width: 69px;height: 87px;margin: auto;position: relative;display: flex;align-items: center;justify-content: center;}
.section2 .warp .water .item .border img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);transition: 0.6s;}
.section2 .warp .water .item .border img:nth-child(2){opacity: 0;}
.section2 .warp .water .item:hover .border img:nth-child(2){opacity: 1;}
.section2 .warp .water .active .border img:nth-child(2){opacity: 1;}
.section2 .warp .water .item .border .iconfont{color: rgba(255, 255, 255, 1);font-size: 30px;position: relative;top: 3px;z-index: 1;transition: 0.6s;}
.section2 .warp .water .item:hover .border .iconfont{color: rgba(0, 47, 167, 1);}
.section2 .warp .water .active .border .iconfont{color: rgba(0, 47, 167, 1);}
.section2 .warp .water .item p{font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;margin: 17px 0 0 0;}



.section3{width: 100%;height: 100vh;overflow: hidden;position: relative;z-index: 1;}
.section3 .fp-tableCell{display: flex;align-items: center;justify-content: center;}
.section3:after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(transparent,rgba(0,0,0,.2));}
.section3 .background{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: -1;}
.section3 .warp{position: relative;z-index: 1;}
.section3 .warp .service{display: flex;margin: 0 0 141px 0;}
.section3 .warp .service .item{margin: 0 200px 0 0;min-height: 416px;cursor: pointer;}
.section3 .warp .service .item:last-child{margin-right: 0;}
.section3 .warp .service .item .circle{width: 204px;height: 204px;transition: 0.6s;border-radius: 50%;display: flex;align-items: center;justify-content: center;text-align: center;background: #283A79;}
.section3 .warp .service .item .circle .iconfont{color: rgba(255, 255, 255, 1);font-size: 55px;margin: 0 0 5px 0;min-height: 55px;display: flex;align-items: center;justify-content: center;opacity: 1;transition: 0.6s;}
.section3 .warp .service .item:first-child .circle .iconfont{font-size: 40px;}
.section3 .warp .service .item:nth-child(3) .circle .iconfont{font-size: 40px;}
.section3 .warp .service .item:nth-child(4) .circle .iconfont{font-size: 40px;}
.section3 .warp .service .item .circle p{font-size: 20px;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;}
.section3 .warp .service .item .hidden{text-align: center;margin: 20px 0 0 0;display: block; width:200px;}
.section3 .warp .service .item .hidden p{font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;line-height: 32px;}
.section3 .warp .demand{width: 180px;height: 50px;margin: auto;background: #283A79;display: flex;align-items: center;justify-content: center;}
.section3 .warp .demand p{font-size: 16px;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;margin: 0 20px 0 0;}
.section3 .warp .demand .circle{width: 36px;height: 36px;background: rgba(0, 0, 0, 0);border: 1px solid #FFFFFF;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.section3 .warp .demand .circle .iconfont{color: rgba(255, 255, 255, 1);font-size: 14px;}


.section4{width: 100%;height: 100vh;overflow: hidden;background: rgba(240, 243, 248, 1);}
.section4 .fp-tableCell{display: flex;align-items: center;justify-content: center;}
.section4 .warp .title{text-align: center;margin: 0 0 42px 0;}
.section4 .warp .title span{font-size: 36px;font-family: Source Han Sans CN;font-weight: bold;color: #333333;margin: 0 0 14px 0;display: block;}
.section4 .warp .title p{font-size: 14px;font-family: Helvetica;font-weight: 400;color: #999999;}
.section4 .warp .content{display: flex; max-width:1540px;}
.section4 .warp .content .small{display: flex; margin: 0;}
.section4 .warp .content .small .item{display: block;width: 31%; margin-right:3%;}
.section4 .warp .content .small .item:nth-child(3n){ margin-right:0;}
.section4 .warp .content .small .item .picture{width: 100%;overflow: hidden;display: block;}
.section4 .warp .content .small .item .picture img{width: 100%;transition: 5s;}
.section4 .warp .content .small .item .picture .img {width: 100%;padding-bottom: 60%;}
.section4 .warp .content .small .item .picture img:hover{transform: scale(1.1);}
.section4 .warp .content .small .item .background{width: 100%;background: #fff;padding: 25px 46px;transition: 0.6s; margin-top:-4px;}
.section4 .warp .content .small .item .background .headline{
    font-size: 20px;font-family: Source Han Sans CN;font-weight: bold;color: #333333;margin: 0 0 22px 0;display: block;transition: 0.6s;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.section4 .warp .content .small .item .background p{
    font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: #666666;line-height: 26px;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;transition: 0.6s;
}
.section4 .warp .content .small .item .background .time{font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: #666666;margin: 20px 0 0 0;transition: 0.6s;}
.section4 .warp .content .small .item .background:hover{background: #283A79;}
.section4 .warp .content .small .item .background:hover .headline,.section4 .warp .content .small .item .background:hover p,.section4 .warp .content .small .item .background:hover .time{color: #fff;}

.ban_active{
    pointer-events: none!important;
}

.section .warp{
    padding-top: 89px;
}
 

.events_active{
    pointer-events: none!important;
    opacity: 0!important;
}

body .events_active_{
    opacity: 1!important;
    pointer-events: auto!important;
}

.fixed_background{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.fixed_background .background{
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 1856px) {


}
@media screen and (max-width: 1792px) {
    .section .warp{
        width: 85%;
    }
    .section1 .warp .content .swiper{
        width: 85%;
    }
    .section1 .warp .content .swiper .text span{
        font-size: 23px;
    }
    .section1 .warp .content .swiper .images{
        width: 100%;
        height: 380px;
    }
    .section1 .warp .content{
        width: 100%;
    }
	
    .section2 .warp {
         padding-top: 0;
    }
    .section2 .warp .water{
        margin: 8vh 0 0 0;
    }  
	
    img {
        vertical-align: bottom;
    }
}
@media screen and (max-width: 1680px) {

    .section4 .warp .content .small{
        margin: 0;
        width: 100%;
    }
    .section4 .warp .content .small .item .background {
        width: 100%;
        padding: 25px 15px;
    }
    .section4 .warp .content .small .item .picture{
        width: 100%;
    }
    .section4 .warp .content .small .item .background .headline{
        margin: 0 0 20px 0;
    }
    .section4 .warp .content .small .item .background p{
        font-size: 12px;
        line-height: 23px;
    }
    .section4 .warp .content .small .item .background .time{
        font-size: 12px;
    }
}
@media screen and (max-width: 1600px) {
 
    .section1 .warp .content .swiper .text span {
        font-size: 18px;
        width: 170px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
    .section2 .warp{
        top: 50px;
    }
	.section3 .warp .service .item{margin: 0 50px 0 0;min-height: 390px;cursor: pointer;}
  
 
    .section3 .warp .service .item{
        margin: 0;
    }
    .section3 .warp .service{
        width: 100%;
        justify-content: space-between;
    } 
    .section4 .warp .content .small .item .background{
        padding: 15px;
    }
}
@media screen and (max-width: 1440px) {

}
@media screen and (max-width: 1400px) {
}

@media screen and (max-width: 1366px) {
    .section1 .warp .title span{
        font-size: 28px;
    }
    .section1 .warp .title p{
        font-size: 12px;
    }
    .section1 .warp .content .swiper .images {
        height: 264px;
    }
    .section2 .warp .text span{
        font-size: 28px;
    }
    .section2 .warp .text h5{
        font-size: 12px;
    }
    .section2 .warp .text div > p{
        font-size: 16px;
        line-height: 34px;

    }
    .section2 .warp .water .item p{
        font-size: 12px;
    }
 
    .section3 .warp .service .item .circle p{
        font-size: 14px;
    }
    .section3 .warp .service{
        margin: 0 0 28px 0;
    }
    .section4 .warp .title span{
        font-size: 22px;
        margin: 0 0 10px 0;
    }
    .section4 .warp .title p{
        font-size: 12px;
    }
    .section4 .warp .content .big {
        width: 40%;
    }
    .section4 .warp .content {
        height: 65vh;
    }
    .section4 .warp .content .big .introduce .text .headline{
        font-size: 14px;
    }
    .section4 .warp .content .big .introduce{
        padding: 15px;
    }
    .section4 .warp .content .big .introduce .text .headline{
        margin: 0 0 15px 0;
    }
    .section4 .warp .title {
        margin: 0 0 20px 0;
    }
    .section4 .warp {
        padding-top: 60px;
    }
    .section4 .warp .content .big .introduce .text p {
        font-size: 12px;
        line-height: 22px;
    }
    .section4 .warp .content .small .item .background .headline{
        font-size: 14px;
    }
    .section4 .warp .content .small .item .background{
        padding: 10px;
    }
    .section4 .warp .content .small .item .background .headline {
        margin: 0 0 10px 0;
    }
    .section4 .warp .content .small .item .background p {
        font-size: 12px;
        line-height: 19px;
    }
    .section4 .warp .content .big .introduce .more {
        margin: 16px 0 0 0;
    }
    .section4 .warp .content .big .introduce{
        height: 37%;
    }
    .section4 .warp .content .big .picture {
        height: 63%;
    }
}
@media screen and (max-width: 1025px) {
 
    .section:not(.banner,.section2), .section:not(.banner,.section2) .fp-tableCell{
        height: auto!important;
    }
    .section .warp {
        padding-top: 50px;
        padding-bottom: 50px;
        width: 90%;
    }
    .section1 .warp .content .button .circle{
        width: 35px;
        height: 35px;
    }
    .section1 .warp .content .swiper {
        width: 67%;
    }
    .section1 .warp .content .swiper .text{
        margin: 0;
    }
    .section1 .warp .content .swiper .text span{
        margin: auto;
    }
    .section1 .warp .content .swiper .text span{
        font-size: 18px;
        width: fit-content;
    }
    .section1 .warp .content .swiper .text .more p{
        font-size: 12px;
    }
    .section2 .warp{
        top: 0;
    }
    .application_swiper{
        width: 100% !important;
    }
    .section2 .warp .text h5{
        margin: 0 0 26px 0;
    }
    .section2 .warp .text div > p{
        width: 100%;
    }
    .section2 .warp .text div > p {
        font-size: 12px;
        line-height: 27px;
    }
    .section2 .warp .text .more{
        margin: 50px auto 0;
    }
    .section2 .warp .text .more > p{
        font-size: 12px;
    }
    .section2 .warp .water{
        justify-content: space-between;
    }
    .section2 .warp .water .item{
        margin: 0;
    }
    .section2 .warp .water .item .border{
        width: 48px;
        height: 63px;
    }
    .section2 .warp .water .item .border img{
        width: 100%;
    }
    .section2 .warp .water .item:hover {
        transform: translateY(0);
    }
    .section2 .warp .water .item .border .iconfont{
        font-size: 25px;
    }
    .section3 .warp .service{
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .section3 .warp .service .item .circle {
        background: #283A79;
    }
    .section3 .warp .service .item .circle .iconfont {
        opacity: 1;
    }
    .section3 .warp .service .item .hidden{
        display: block!important;
    }
    .section3 .warp .service .item .circle{
        width: 140px;
        height: 140px;
    }
    .section3 .warp .service .item .hidden p{
        font-size: 13px;
    }
    .section3 .warp .service .item{
        min-height: auto;
        margin: 0 0 40px 0;
    }
    .section3 .warp .demand p{
        font-size: 12px;
    }
    .section3 .warp .demand .circle{
        width: 30px;
        height: 30px;
    }
    .section4 .warp .title {
        margin: 0 0 35px 0;
    }
    .section4 .warp .content{
        height: auto;
        width: 100%;
        flex-direction: column;
    }
    .section4 .warp .content .big{
        width: 100%;
    }
    .section4 .warp .content .big .picture {
        height: auto;
    }
    .section4 .warp .content .big .introduce{
        height: auto;
        flex-direction: column;
    }
    .section4 .warp .content .big .introduce .time{
        text-align: left;
        margin: 0 0 20px 0;
    }
    .section4 .warp .content .big .introduce .time .line{
        margin: 13px 0 10px 0;
    }
    .section4 .warp .content .big .introduce .text .headline{
        font-size: 16px;
    }
    .section4 .warp .content .big .introduce .text p {
        font-size: 12px;
        line-height: 20px;
    }
    .section4 .warp .content .big .introduce .more {
        margin: 30px 0 20px 0;
    }
    .section4 .warp .content .big .introduce .time p{
        font-size: 12px;
    }
    .section4 .warp .content .small{
        width: 100%;
        margin: 20px 0 0 0;
    }
    .section4 .warp .content .small .item{
        height: auto;
        flex-direction: column;
        margin: 0 0 20px 0;
    }
    .section4 .warp .content .small .item .picture{
        width: 100%;
        height: auto;
    }
    .section4 .warp .content .small .item .background{
        width: 100%;
        padding: 20px 10px;
        height: auto;
    }
    .section4 .warp .content .small .item .background .headline{
        font-size: 16px;
    }
    .section1 .warp .content .button{
        top: 43%;
    }
}