@charset "utf-8";

.banner_box{padding: 0px;position: relative;z-index: 3;overflow: hidden;}
.banner{ overflow: hidden; }
.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 .bottom{position: absolute;right: 0;bottom: 4vw;left: 0;z-index: 2;}
.banner .dots{ display: flex;justify-content: flex-end;align-items: center;}
.banner .dots span{width: .49rem;height: .49rem;background: none;font-size: .16rem;color: #fff;opacity: 1;margin: 0 .04rem !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; animation: roted 10s infinite linear;}

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

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

.home1-2{background: url(../images/ho1-2.jpg) center no-repeat;background-size: cover;}

.tit1{ position: relative; z-index: 1; align-items: center; justify-content: center; margin: 0 0 .8rem;}
.tit1 .ll{ text-align: center;}
.tit1 .ll h4{font-size: .5rem;color: rgba(146,46,142,.3);font-family:"Azonix";line-height: 1;-webkit-mask: linear-gradient(0deg, transparent 0%, #fff 100%);mask: linear-gradient(0deg, transparent 0%, #fff 100%);}
.tit1 .ll h3{font-size: .52rem;color: #000000;line-height: 1;margin: -.2rem 0 0;}
.tit1 .ll h3 span{ color: #922e8e}

.more1{position: absolute;top: 60%;right: 0;width: .7rem;height: .7rem;flex-direction: column;justify-content: center;align-items: center;font-size: .16rem;color: #8a3b53;line-height: 1.15;transform: translateY(-50%);}
.more1::before{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: url(../images/more1_b.png) center no-repeat;background-size: cover;z-index: -1;animation: roted 10s infinite linear;}
.more1::after{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: url(../images/more1_bs.png) center no-repeat;background-size: cover;z-index: -1;/* animation: roted 10s infinite linear; */}
.more1 span{display: block;font-family: "Roboto-Regular";text-transform: uppercase; font-size: 12px;}

.home1{ padding-bottom: .4rem !important; }
.home1 .left{width: 10.8rem;}
.home1 .right{width: calc(100% - 10.8rem - .5rem);}

.lt1{ position: relative}
.lt1 .imgBox .img{padding-bottom: 59%;-webkit-mask: url(../images/lt1_b.svg);mask: url(../images/lt1_b.svg);-webkit-mask-size: cover;mask-size: cover;mask: none \0;}
.lt1 .txt{width: 91.6%;position: absolute;top: 88%;align-items: center;border-top: #922e8e 2px solid;}
.lt1 .txt .con{width: calc(100% - .5rem);padding: .2rem 8% 0 0;}
.lt1 .txt .rr{width: .5rem;height: 1.4rem;background: #ec6616;align-items: center;justify-content: center;transition: .5s; display: none}
.lt1 .txt .rr img{ width: .14rem}
.lt1 h4{ font-size: .24rem}
.lt1 p{margin: .15rem 0 .25rem;font-size: .18rem;display: none;}
.lt1 h6{color: #922e8e;margin: .1rem 0 0;}

.lt2{background: url(../images/lt2_b.jpg) center no-repeat;background-size: cover;padding: .15rem 0;}
.lt2 li{ width: 100%;}
.lt2 .a{padding: .12rem .32rem;position: relative;z-index: 1;align-items: center;}
.lt2 .a::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../images/lt2_b1.png) right center no-repeat;background-size: cover;z-index: -1;transition: .5s;opacity: 0;}
.lt2 .imgBox{ width: 1.52rem;}
.lt2 .imgBox .img{ padding-bottom: 64.47%}
.lt2 .txt{ flex: 1; overflow: hidden; padding: 0 .15rem;}
.lt2 h6{ font-size: .14rem; color: #922e8e}
.lt2 h4{ margin: .1rem 0 0}

.home2{position: relative;z-index: 1;background: url(../images/hoho2_b.png) center 114% no-repeat\0; background-size: 100% auto}
#waveContainer{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;pointer-events: none;}
#waveContainer::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../images/ho2_b.png) center no-repeat;background-size: contain;pointer-events: none;}
#waveContainer canvas{opacity: .5;filter: blur(.8px);}

.lt3Box{ padding: .45rem 0 0; margin: -.15rem 0 0;}
.lt3 li{ position: relative; transition: .5s;}
.lt3 li::before{content: "";position: absolute;right: 0;bottom: 0;border-top: transparent .4rem solid;border-right: #8a3b53 .4rem solid;transform: translate(2px, 2px); transition: .5s;}
.lt3 .a{height: 3.65rem;padding: 0 .4rem;background: rgba(255,255,255,.8);clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 100% calc(100% - .4rem), calc(100% - .4rem) 100%, 0 100%, 0 100%);flex-direction: column;justify-content: center; position: relative; z-index: 1;}
.lt3 .a::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: linear-gradient( -45deg, rgb(146,46,142) 0%, rgb(9,79,195) 100%);z-index: -1;opacity: 0;transition: .5s;pointer-events: none;}
.lt3 .time{align-items: baseline;line-height: 1;}
.lt3 .time big{font-size: .42rem;color: #922e8e;transition: .5s;}
.lt3 .time small{font-size: .2rem;color: #922e8e;margin: 0 0 0 .1rem;transition: .5s;}
.lt3 h4{ margin: .3rem 0 .2rem}
.lt3 p{ margin: 0 0 .5rem;}

.more2{ font-size: .14rem; color: #fff; background: url(../images/more2_b.png) center no-repeat; background-size: cover; height: .35rem; width: 1.44rem; padding: 0 0 0 .16rem; align-items: center; transition: .5s}
.more2 i{font-size: .23rem;color: inherit; font-family: 'lib';margin: 0 0 0 .08rem;}

.ar1Box{ justify-content: center; align-items: center; position: relative; margin: .6rem 0 0;}
.ar1Box::before{ content: ""; flex: 1; height: 1px; background: #6c216d; margin: 0 .1rem 0 0;}
.ar1Box::after{ content: ""; flex: 1; height: 1px; background: #6c216d; margin: 0 0 0 .1rem;}
.ar1Box .ar1{display: flex;align-items: center;justify-content: center;width: .49rem;height: .49rem;border: #6c216d 1px solid;border-radius: 50vw;margin: 0 .07rem;font-size: .24rem;color: #6c216d;font-family: 'lib';cursor: pointer;position: relative;z-index: 1;transition: .5s;}
.ar1Box .ar1::after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50vw; background-image: linear-gradient( -45deg, rgb(146,46,142) 0%, rgb(9,79,195) 100%); opacity: 0; transition: .5s; z-index: -1;}

.home3{background: url(../images/ho3_b.jpg) center no-repeat;background-size: cover;background-attachment: fixed;padding: 0 !important;}
.home3 .left{ width: 54.32%; background: url(../images/ho3_b1.png) left center no-repeat; padding: 1.06rem; display: flex; justify-content: center; align-items: center;}
.home3 .left .imgW{width: 7.09rem;position: relative;z-index: 1;max-width: 86%;}
.home3 .left .imgW::before{content: "";position: absolute;top: -.2rem;right: -.2rem;bottom: -.2rem;left: -.2rem;background: url(../images/ho3_s.svg) center no-repeat;background-size: cover;z-index: -1;animation: roted 30s linear infinite;}
.home3 .left .imgBox{ border-radius: 50vw;}
.home3 .left .imgBox .img{ padding-bottom: 100%;}
.home3 .right{ width: calc(100% - 54.32%); position: relative; z-index: 1;}
.home3 .right .sicoh{ pointer-events: none;}
.home3 .right svg{ position: absolute; top: 0; bottom: 0; left: 0; height: 100%; }
.home3 .right svg .cls-1{fill:#922e8e;fill-opacity:0;stroke:#922e8e;stroke-width:2px;stroke-dasharray:6 4;fill-rule:evenodd;opacity:0.2;isolation:isolate;}
.home3 .right svg .cls-2{fill:#6c216d;}

.home3 .right svg.svg1 .cls-1{ fill:#eff5fd; stroke:#eff5fd; opacity: 1; stroke-dasharray:4 6;}
.home3 .right svg.svg1 cls-2{ fill:#eff5fd;}

.home3 .right .box{width: 7.16rem;max-width: calc(100% - 15px);height: 100%;position: relative;display: flex;align-items: center;}

.lt4 li{ transform-origin: left center; margin-bottom: -.4rem;}
.lt4 .a{align-items: center;transform: scale(.7);transition: .5s;}
.lt4 .ico{width: 1.9rem;position: relative;margin: 0;background: #fff;border-radius: 50vw;}
.lt4 .ico::after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50vw; border: #e6ebf6 1px solid; transition: .5s;}
.lt4 h4{flex: 1;overflow: hidden;font-size: .42rem;color: #000000;font-weight: bold;position: absolute;left: calc(1.9rem + .25rem);white-space: nowrap;}
.lt4 li:nth-child(1){transform: translateX(4%);}
.lt4 li:nth-child(2){transform: translateX(101%);}
.lt4 li:nth-child(3){transform: translateX(20%);}
.lt4 li:nth-child(4){transform: translateX(152%);}

.home4{ background: url(../images/ho4_b.jpg) center no-repeat; background-size: cover; }
.home4 .left{ width: calc(100% - 43.75% - .6rem);}
.home4 .right{ width: 43.75%;}
.home4 .right .imgBox{ width: calc((100vw - 16rem)/2 + 100%);}
.home4 .right .imgBox .img{ padding-bottom: 89.30%;}

.home4 .tit1{ justify-content: flex-start;}
.home4 .tit1 .ll h3{text-align: left;display: flex;align-items: center;}
.home4 .tit1 .ll h3 img{margin: 0 .06rem;height: .58rem;animation: roted 10s linear infinite;}

.lt5W{position: relative;z-index: 1;}
.lt5W .next1{width: .72rem;height: .72rem;background: rgba(255,255,255,.9);border-radius: 50vw;display: flex;justify-content: center;align-items: center;position: absolute;right: -4.6rem;top: 50%;transform: translateY(-50%);cursor: pointer;transition: .5s;}
.lt5W .next1 svg path{ transition: .5s}
.lt5W .next1:hover{ background: #922e8e; }
.lt5W .next1:hover svg path{ fill: #fff}
.lt5Box{margin: 0 -3.6rem;padding: .5rem 0 .5rem 3.6rem;}
.lt5 .ico{width: 1.25rem;margin: 0 auto;}
.lt5 .a{background: #bed525;height: 4.35rem;flex-direction: column;justify-content: center;padding: 0 .5rem;text-align: center; transition: .5s; position: relative; z-index: 1}
.lt5 .a:before{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: url(../images/lt5_b.png) center no-repeat;z-index: -1;pointer-events: none;}
.lt5 h4{ margin: .25rem 0; padding-bottom: .18rem; position: relative; font-size: .26rem; color: #fff !important}
.lt5 h4:before{ content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: .76rem; height: 2px; background: #ffffff}
.lt5 p{ color: #fff}

.lt5 li:nth-child(4n-3) .a{background: #5cc2ce;}
.lt5 li:nth-child(4n-2) .a{background: #8a3b53;}
.lt5 li:nth-child(4n-1) .a{background: #922e8e;}

@media(min-width: 769px){
    .lt1 .a:hover .txt .rr{ background: #922e8e; }

    .lt2 .a:hover::before{ opacity: 1;}
    .lt2 .a:hover *{ color: #fff;}

    .lt3 li:hover{ transform: translateY(-.45rem);}
    .lt3 .a:hover::before{ opacity: 1}
    .lt3 .a:hover *{ color: #fff}
    .lt3 .a:hover p{ opacity: .7}
    .lt3 .a:hover .more2{ background: url(../images/more2_bs.png) center no-repeat; background-size: cover; color: #6c216d}
    .lt3 .a:hover .more2 i{ color: #6c216d}

    .ar1Box .ar1:hover{ color: #fff}
    .ar1Box .ar1:hover::after{ opacity: 1}

    .lt3 li:hover::before{ border-right: #084fc3 .4rem solid;}

    .home3 .tit1{position: absolute;right: 0;top: .9rem;flex-direction: column;}
    .home3 .tit1 .ll{display: flex;margin: 0 0 6vw;}
    .home3 .tit1 .ll h4{writing-mode: tb-rl;order: 1;-webkit-mask: linear-gradient(90deg, transparent 50%, #fff 100%);mask: linear-gradient(90deg, transparent 50%, #fff 100%);}
    .home3 .tit1 .ll h3{writing-mode: tb-rl;margin: 0 -.3rem 0 0;}
    .home3 .tit1 .more1{ position: relative}

    .lt4 li:hover .a{ transform: scale(1)}
    .lt4 li:nth-child(1):hover .a .ico::after{ border: #8a3b53 1px dashed; box-shadow: 0px 7px 18px 0px rgba(138,59,83,.16);}
    .lt4 li:nth-child(2):hover .a .ico::after{ border: #ffb000 1px dashed; box-shadow: 0px 7px 18px 0px rgba(255, 150, 0, 0.16);}
    .lt4 li:nth-child(3):hover .a .ico::after{ border: #276fb7 1px dashed; box-shadow: 0px 7px 18px 0px rgba(39,111,183,.16);}
    .lt4 li:nth-child(4):hover .a .ico::after{ border: #62b630 1px dashed; box-shadow: 0px 7px 18px 0px rgba(98,182,48,.16);}
}
@media(max-width: 1025px){
    .banner .imgBox .img{ padding-bottom: 50%; }
    
}
@media(max-width: 769px){
    .pad1{ padding: .4rem 0;}

    .banner .dots span{ width: .3rem; height: .3rem;}

    .home1{ padding-bottom: 0 !important}
    .home1 .left{ width: 100%;}
    
    .home1{ padding-bottom: 0!important}.home1 .right{width: 100%;padding: .4rem 0 0;}

    .tit1{ margin-bottom: .25rem}
    .tit1 .ll h4{font-size: .25rem;}
    .tit1 .ll h3{font-size: .26rem;margin: -.1rem 0 0;}

    .more1{transform: scale(.7) translateY(-50%);top: 20%;}

    .lt1 .txt{width: 94%;position: relative;top: auto;margin: -.3rem 0 0;background: #fff;}
    .lt1 .imgBox .img{ -webkit-mask: none; mask: none; }
    .lt1 h4{ font-size: .2rem}
    .lt1 p{margin: .03rem 0 .15rem;}
    .lt1 h6{ font-size: .16rem}
    .lt1 .txt .rr{height: 1.4rem;width: .36rem;}
    .lt1 .txt .rr img{ width: .1rem}

    .lt2{ min-height: auto}
    .lt2 .a{ padding: .1rem 15px}
    
    .lt3Box{ padding: .25rem 0 0; margin: -.15rem 0 0;}

    .lt3 .a{ padding: 0 15px; height: 2.8rem}
    .lt3 .time big{ font-size: .3rem}
    .lt3 .time small{ font-size: .16rem}
    .lt3 h4{ margin: .1rem 0 .1rem}
    .lt3 p{ margin: 0 0 .3rem;}
    .ar1Box{ margin: .3rem 0 0}
    .ar1Box .ar1{ width: .4rem; height: .4rem}

    .home3 .left{width: 100%;padding: .5rem 25%;}
    .home3 .right{ width: 100%;}
    .home3 .right .box{flex-direction: column;max-width: 100%;width: 100%;padding: .4rem 0;}
    .home3 .tit1{width: calc(100% - 30px);margin: 0 15px .25rem;position: relative;}
    .lt4{width: 100%;padding: 0 .15rem;display: flex;flex-wrap: wrap;margin-bottom: -.25rem;}
    .lt4 li{width: 50%;transform: translateX(0) !important;margin-bottom: .25rem;}
    .lt4 .a{ transform: scale(1)}
    .lt4 .ico{width: .7rem;}
    .lt4 h4{left: calc(.7rem + .2rem);font-size: .2rem;}

    .home4 .left{ width: 100%}
    .home4 .right{width: 100%;margin-top: .2rem;}
    .home4 .right .imgBox{width:100%;}

    .lt5Box{margin: 0 0;padding: 0 0 0 0;}
    .lt5 .ico{ width: .7rem;}
    .lt5 .a{ padding: 0 15px; height: 3rem}
    .lt5 h4{margin: .15rem 0;padding-bottom: .12rem;font-size: .22rem;}
    .lt5 h4:before{ width: .5rem}
    .home4 .tit1 .ll h3 img{ height: .36rem }
}