@charset "utf-8";

#loading{ background: #e5c6a9;}

.banner_box{padding: 0px;position: relative;z-index: 3;overflow: hidden;}
.banner{ overflow: hidden; }
.banner:after{content: "";position: absolute;right: 0;bottom: 0;left: 0;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);z-index: 1;height: 23vh;}
.banner .a{ display: block; position: relative; z-index: 1; overflow: hidden; }
.banner .imgBox{ overflow: hidden; width: 100%; transform: scale(1);}
.banner .imgBox .img{ padding-bottom: 100vh; transition: 0s; transform: scale(1) !important; }
.banner .imgBox .img video{ opacity: 1;}
.banner.on ul li.swiper-slide-active .a .imgBox, .banner.on ul li.swiper-slide-duplicate-active .a .imgBox, .banner.on ul li.swiper-slide-prev .a .imgBox{ animation: sca 6s linear 0s normal both;}
@keyframes sca {
    0% {
        transform: scale(1.06);
    }
    100% {
        transform: scale(1);
    }
}

.banner .dots{z-index: 10;display: flex;justify-content: center;align-items: center;margin: -.15rem .2rem 0;position: absolute;flex-direction: column;left: auto;right: 4%;top: 1rem;width: auto;bottom: 0;}
.banner .dots span{width: .28rem;height: .28rem;background: none;font-size: .16rem;color: #fff;opacity: 1;margin: .175rem 0 !important;position: relative;z-index: 1}
.banner .dots span:before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../images/dots1.png) center no-repeat;background-size: cover; transition: .5s;}
.banner .dots span:after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../images/dots1s.png) center no-repeat;background-size: cover;opacity: 0;transition: .5s;}

.banner .dots span:nth-child(1):before{ transform: rotate(-90deg)}
.banner .dots span:nth-child(3):before{ transform: rotate(90deg)}
.banner .dots span:nth-child(1):after{ transform: rotate(-90deg)}
.banner .dots span:nth-child(3):after{ transform: rotate(90deg)}

.banner .dots span.active:before{ opacity: 0}
.banner .dots span.active:after{ opacity: 1}

.pad1{ padding: .8rem 0; overflow: hidden;}

.home1{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.home1 .bg0{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.home1 .bg0 .fl10{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.home1 .bg0 .fl10 .wp{align-items: center;height: 100%;max-width: 16.2rem;}
.home1 .bg0 .fl10 .wenzi0{width: 5.6rem;max-width: 34.57%;margin: 3vw 0 0;}

.home1 .bg1{ background: url(../images/ho1_b1.webp) center no-repeat; background-size: cover; }
.home1 .bg2{ background: url(../images/ho1_b2.webp) center no-repeat; background-size: cover; }
.home1 .bg3{ background: url(../images/ho1_b3.webp) center no-repeat; background-size: cover; }
.home1 .bg4{ background: url(../images/ho1_b4.webp) center no-repeat; background-size: cover; }

.lights{position: absolute;left: 0;top: 0;transform: translate(-30vw, -35vw);width: 90vw;mix-blend-mode: screen;}
.lights img{ width: 100%; animation: roted1 10s linear infinite; }
@keyframes roted1{
    0%{transform: rotate(0deg);}
    25%{transform: rotate(3deg) scale(1.1);}
    50%{transform: rotate(0deg);}
    75%{transform: rotate(-3deg) scale(1.1);}
    100%{transform: rotate(0deg);}
}

.home1 .content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5;}
.home1 .content .wp{height: 100%;align-items: center;justify-content: flex-end;max-width: 16.2rem;}
.home1 .content .box{width: 43.75vw;height: 43.75vw; position: relative;z-index: 1;display: flex;justify-content: center;align-items: center;padding: 0;}

.lt1{position: absolute;width: 59.64vw;height: 40.875vw;margin: 0 0 0 4vw;}
.lt1 li{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
.lt1 .a{ display: block; overflow: hidden; border-radius: .2rem}
.lt1 .txt{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; flex-direction: column; align-items: center; justify-content: center;}

.lt1 li:nth-child(1){ width: 48.44%; z-index: 2;}
.lt1 li:nth-child(1) .imgBox{ opacity: .47;}
.lt1 li:nth-child(1) .imgBox .img{ padding-bottom: 52.70%;}
.lt1 li:nth-child(2){width: 25.04%;top: 27%;left: 28%;z-index: 1;}
.lt1 li:nth-child(2) .imgBox{opacity: .36;}
.lt1 li:nth-child(2) .imgBox .img{padding-bottom: 59.15%;}
.lt1 li:nth-child(3){width: 39.68%;top: 78%;left: 25%;z-index: 3;}
.lt1 li:nth-child(3) .imgBox .img{ padding-bottom: 57.31%}
.lt1 li:nth-child(4){width: 21.03%;top: 27%;left: 76.5%;z-index: 3;}
.lt1 li:nth-child(4) .imgBox .img{ padding-bottom: 136.18%}
.lt1 li:nth-child(5){width: 34.45%;top: 87%;left: 83%;z-index: 3;}
.lt1 li:nth-child(5) .imgBox .img{ padding-bottom: 64.13%}
.lt1 li:nth-child(6){width: 21.03%;top: 44%;left: 87%;z-index: 1;}
.lt1 li:nth-child(6) .imgBox{opacity: .72;}
.lt1 li:nth-child(6) .imgBox .img{ padding-bottom: 80.54%}

.lil-gui{ display: none !important;}

#lizis{width: 100%;height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/40s.png) center no-repeat; background-size: contain; transform: scale(.8);}
#lizi{width: 100%;height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; }
canvas{ background: transparent !important;}
#wave1{ width: 100%; height: 100%;}

.particles{width: .4rem;height: .4rem;position: absolute;z-index: 1000; pointer-events: none; border-radius: 50vw;}
.particles .particle{content: '';width: 100%;height: 100%;position: absolute;background: url(../images/particles.png); background-size: contain; border-radius: 50%;animation: move1 5s linear infinite;}
.particles:nth-child(2n) .particle{background: url(../images/particles1.png); background-size: contain;}
@keyframes move1{
    100%{transform: translate(350px);}
}

@media(min-width: 769px){

}
@media(max-width: 1025px){
    .banner .imgBox .img{ padding-bottom: 50%;}
}
@media(max-width: 769px){
    .home1 .bg0 .fl10 .wenzi0{margin: -58vw auto 0;max-width: 74%;}
    .home1 .content .box{margin: 64vw auto 0;width: 70vw;height: 70vw;}
    .lt1{ width: 70vw;height: 50vw;margin: 0 auto;}

    .particles{ display: none !important;}
}