@charset "utf-8";

.banner_box{padding: 0px;position: relative;z-index: 1;overflow: hidden;}
.banner{ overflow: hidden; }
.banner .a .imgBox:after{content: "";position: absolute;right: 0;bottom: 0;left: 0;z-index: 2;height: 23vh;}
.banner .a{ display: block; position: relative; z-index: 1; overflow: hidden; }
.banner .imgBox{ overflow: hidden; width: 100%; }
.banner .imgBox .img{padding-bottom: 100vh;transition: 0s;}
.banner.on ul li.swiper-slide-active .a .imgBox img, .banner.on ul li.swiper-slide-duplicate-active .a .imgBox img, .banner.on ul li.swiper-slide-prev .a .imgBox img{ animation: sca 6s linear 0s normal both;}
@keyframes sca {
    0% {
        transform: scale(1.06);
    }
    100% {
        transform: scale(1);
    }
}
.banner .top{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;align-items: center;}
.banner .top .wp{text-align: center;}
.banner .top .wp h3{font-size: 1rem;color: #fff;line-height: 1;text-transform: uppercase;font-family: 'Heebo Medium';font-weight: normal;}
.banner .top .wp h4{font-size: .8rem;color: #fff;font-weight: bolder;line-height: 1; margin: .2rem 0 .3rem; }
.banner .top .wp h6{font-size: .28rem;color: #fff;margin-bottom: 5vw;}

.banner .li1 .a .imgBox:after{ background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);}
.banner .li2 .a .imgBox:after{ background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(43,173,161,.85) 100%);}
.banner .li3 .a .imgBox:after{ background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(43,173,161,.85) 100%);}
.banner .li4 .a .imgBox:after{ background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(43,173,161,.85) 100%);}

.banner.on ul li.swiper-slide-active .top .wp h3{ animation: enter 1.2s forwards .1s;}
.banner.on ul li.swiper-slide-active .top .wp h4{ animation: enter 1.2s forwards .2s;}
.banner.on ul li.swiper-slide-active .top .wp h6{ animation: enter 1.2s forwards .3s;}

@-webkit-keyframes enter {
    0% {
        opacity: 0;
        transform: translateY(1rem);
        -webkit-transform: translateY(1rem);
        -moz-transform: translateY(1rem);
        -ms-transform: translateY(1rem);
        -o-transform: translateY(1rem)
    }

    20% {
        opacity: 0;
        transform: translateY(1rem);
        -webkit-transform: translateY(1rem);
        -moz-transform: translateY(1rem);
        -ms-transform: translateY(1rem);
        -o-transform: translateY(1rem)
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px)
    }
}

@keyframes enter {
    0% {
        opacity: 0;
        transform: translateY(1rem);
        -webkit-transform: translateY(1rem);
        -moz-transform: translateY(1rem);
        -ms-transform: translateY(1rem);
        -o-transform: translateY(1rem)
    }

    20% {
        opacity: 0;
        transform: translateY(1rem);
        -webkit-transform: translateY(1rem);
        -moz-transform: translateY(1rem);
        -ms-transform: translateY(1rem);
        -o-transform: translateY(1rem)
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px)
    }
}

.slide-bbBox{ position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; }
.slide-bb ul li{width: 25%;padding: 0 .4rem;position: relative;z-index: 1;height: 0.906rem;display: flex;align-items: flex-end;}
.slide-bb ul li::before{content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 0;background: rgba(255,255,255,.4);z-index: -1;transition: .5s;opacity: 0;visibility: hidden;pointer-events: none;backdrop-filter: blur(.1rem);}
.slide-bb ul li .a{display: block;transition: .5s;transform: translateY(1.7rem);width: 100%;}
.slide-bb ul li .txt{padding: .16rem 0;height: 2.56rem;}
.slide-bb ul li .line{ width: 100%; height: 1px; position: relative; background: rgba(255,255,255,.5); transition: .5s;}
.slide-bb ul li .txt h4{font-size: .2rem;color: #fff;transition: .5s}
.slide-bb ul li .txt h6{font-size: .14rem;color: #fff;text-transform: uppercase;margin: .04rem 0 0;transition: .5s}
.slide-bb ul li p{font-size: .14rem;color: #2a2a2a;line-height: .24rem;max-height: .72rem\0;margin: .2rem 0 0;opacity: .7;}
.slide-bb ul li .txt .ll{ flex: 1; overflow: hidden;}
.slide-bb ul li .txt .a1{display: flex;justify-content: center;align-items: center;width: .32rem;height: .32rem;background: #f8f3f0;border-radius: 50vw;margin: .1rem 0 0 .2rem;font-size: .16rem;color: #2bada1;font-family: 'lib';font-weight: 600;transition: .5s;opacity: 0;visibility: hidden;}

.lines .line0{position: absolute;width: 1px;height: 0;top: 0;background: rgba(255,255,255,.15);z-index: 1;}
.lines .line1{ left: 25%;  }
.lines .line2{ left: 50%; }
.lines .line3{ left: 75%; }

.lines.on .line1{ height: 100%;  transition: 2s 0s;}
.lines.on .line2{ height: 100%;  transition: 2s 2s;}
.lines.on .line3{ height: 100%; transition: 2s 4s;}

@keyframes lines1{
    0% {
        height: 0;
    }
    25% {
        height: 100vh;
    }
    50% {
        height: 100vh;
    }
    75% {
        height: 100vh;
    }
    100% {
        height: 100vh;
    }
}
@keyframes lines2{
    0% {
        height: 0;
    }
    25% {
        height: 0;
    }
    50% {
        height: 100vh;
    }
    75% {
        height: 100vh;
    }
    100% {
        height: 100vh;
    }
}
@keyframes lines3{
    0% {
        height: 0;
    }
    25% {
        height: 0;
    }
    50% {
        height: 0;
    }
    75% {
        height: 100vh;
    }
    100% {
        height: 100vh;
    }
}

@media(min-width: 769px){
    .slide-bb ul li .a:hover{transform: translateY(0);}
    .slide-bb ul li:hover::before{ height: 100vh; opacity: 1; visibility: visible}
    .slide-bb ul li .a:hover .txt h4, .slide-bb ul li .a:hover .txt h6{ color: #444444}
    .slide-bb ul li .a:hover .line{ background: #2bada1;}
    .slide-bb ul li .txt .a1:hover{ background: #2bada1; color: #fff}

    .slide-bb ul li .a:hover .txt .a1{ opacity: 1; visibility: visible}
    .slide-bb ul li:nth-child(1) .a:hover .txt .a1{ transform: rotate(90deg)}
}
@media(max-width: 769px){
}
@media(max-width: 800px){
} 
@media(max-width: 769px){
    .banner .imgBox .img{ padding-bottom: 65%}
    .banner .top .wp h3{font-size: 8vw;}
    .banner .top .wp h4{font-size: 7vw;margin: .1rem 0 .15rem;}
    .banner .top .wp h6{font-size: 4vw;}
    .slide-bb ul li{padding: 0 4px;}

    .slide-bb ul li .txt .a1{ display: none;}
    .slide-bb ul li .a{text-align: center;transform: translateY(2.1rem);}
    .slide-bb ul li .txt h4{font-size: .18rem;}
    .slide-bb ul li .txt h6{font-size: .1rem;display: none;}
    .slide-bb ul li p{ display: none}
    .slide-bb ul li .txt{ padding: .1rem 0}
    .banner .a .imgBox:after{ height: 20vw}
} 
@media(max-width: 560px){
} 

.piaofu{ opacity: 0; visibility: hidden; transition: .5s;}
.piaofu.on{ opacity: 1; visibility: visible;}
.pat{ margin: 0 !important;}