@charset "utf-8";
body{ background: url(../images/bg.jpg) center top no-repeat; background-size: cover; }

.banner_box{padding: 0px;position: relative;z-index: 3;overflow: hidden;}
.banner{overflow: hidden;background: none;-webkit-mask: url(../images/ba_t.svg);mask: url(../images/ba_t.svg);-webkit-mask-size: cover;mask-size: cover;mask: none \0;mask-position: center bottom;}
.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: 1.5rem;}
.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;}
.banner .imgBox .img img{ transition: 0s;}

.banner .bottom{position: absolute;bottom: 7vw;right: 0;left: 0;z-index: 2;}

.banner .dots{justify-content: flex-start;}
.banner .dots span{width: .45rem;height: .45rem;background: transparent;margin: 0 .3rem 0 0 !important;opacity: 1;position: relative;}
.banner .dots span svg{ position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.banner .dots span svg path{fill: none;stroke-width: .03rem;stroke: #fff;stroke-linejoin: round; transition: .5s}
.banner .dots span svg.svg1 path{ stroke: rgba(255, 255, 255, 0);}
.banner .dots span.active svg.svg1 path{ stroke: rgba(255, 255, 255, 0.12);}
.banner .dots span svg.svg2 path{ stroke-dasharray: 300; stroke-dashoffset: 300;}
.banner .dots span.active svg.svg2 path{ animation: progress-fill 6.5s linear forwards; }
@keyframes progress-fill {
    from {
        stroke-dashoffset: 300;
    }
    to {
        stroke-dashoffset: 0;
    }
}
.banner .dots span:after{content: "";position: absolute;width: .07rem;height: .07rem;background: #fff;top: 50%;left: 50%;margin: -.035rem 0 0 -.035rem;}

.pad1{padding: .64rem 0;overflow: hidden;position: relative;z-index: 2;}

.home1{ padding-top: .52rem;}

.tit1{ align-items: center; margin: 0 0 .7rem;}
.tit1 .ll{ align-items: center;}
.tit1 .ll img{width: .78rem;margin: 0 .2rem 0 0;}
.tit1 .ll h3{font-size: .46rem;color: #6510AD;font-weight: 500;line-height: 1;}
.tit1 .ll h6{font-size: .24rem;color: #6A6E8F;line-height: 1;font-weight: 300;margin: .06rem 0 0;}

.more1{font-size: .18rem;color: #0D1448;transition: .5s;position: relative;align-items: center;padding: 0 0 0 .14rem;}
.more1::before{content: "";width: .04rem;height: .04rem;background: linear-gradient(270deg, #B059F1 0%, #6E68EC 100%);border-radius: 50vw;left: 0;position: absolute; transition: .5s;}

.home1 .left{ width: 8.8rem;}
.home1 .right{ width: calc(100% - 8.8rem - .56rem);}

.lt1 .a{ display: block; border-radius: .2rem; position: relative; overflow: hidden;}
.lt1 .imgBox .img{ padding-bottom: 61.36%;}
.lt1 .imgBox:after{ content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2.65rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(4, 0, 99, 0.8) 100%);}
.lt1 .txt{position: absolute;right: 0;bottom: 0;left: 0;z-index: 2;padding: .26rem .33rem;}
.lt1 h6{ color: #fff;}
.lt1 h4{ font-size: .24rem; color: #fff !important; margin: .1rem 0 0}

.lt2{height: 5.7rem;flex-direction: column;flex-wrap: nowrap;margin: -.3rem 0 0;}
.lt2 li{width: 100%;flex: 1;display: flex;align-items: center;transition: .5s;border-bottom: rgba(195, 197, 210, 0.4) 1px solid;}
.lt2 .a{display: block;width: 100%;transition: .5s;transform: translateY(.35rem);}
.lt2 h6{position: relative;z-index: 1;padding: 0 .1rem;}
.lt2 h6:before{content:"";position: absolute;width: .32rem;height: .32rem;border-radius: 50vw;z-index: -1;bottom: 0;left: 0;background: #DFDAFF;transition: .5s;transform: translateY(.03rem);}
.lt2 h4{margin: .15rem 0 .18rem;line-height: 1;}
.lt2 p{ opacity: 0; }

.home2{ position: relative; z-index: 1; overflow: visible;}
.svgBg{ pointer-events: none}
.home2 .svg1{position: absolute;top: -15%;left: 50%;z-index: -1;width: 77.29vw;height: 76.5625vw;transform: scale(1.75);pointer-events: none;}
.home2 .svg2{position: absolute;top: 37%;left: 81%;z-index: -1;width: 25.52vw;height: 28.33vw;transform: translate(-50%, -50%);}
.home2 .svg2 g{transform: scale(1);animation: circleScale 6s linear infinite;-webkit-transition: all 0.5s;transition: all 0.5s;transform-origin: center;}

.home2 .svg2 g:nth-of-type(2) {
    animation-delay: .6s;
    transform: scale(1.03);
}
.home2 .svg2 g:nth-of-type(3) {
    animation-delay: 1.2s;
}
.home2 .svg2 g:nth-of-type(4) {
    animation-delay: 1.8s;
}
.home2 .svg2 g:nth-of-type(5) {
    animation-delay: 2.4s;
}
.home2 .svg2 g:nth-of-type(6) {
    animation-delay: 3s;
}
.home2 .svg2 g:nth-of-type(7) {
    animation-delay: 3.6s;
}
.home2 .svg2 g:nth-of-type(8) {
    animation-delay: 4.2s;
}
.home2 .svg2 g:nth-of-type(9) {
    animation-delay: 4.8s;
}
.home2 .svg2 g:nth-of-type(10) {
    animation-delay: 5.4s;
}

@keyframes circleScale {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    10% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}

.home2 .tit1{ width: 8.4rem; max-width: 52.5%;}
.lt3{ width: 12.8rem; max-width: 80%; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: .54rem .36rem; }
.lt3 li{ min-width: 0;}
.lt3 li:nth-child(3){ grid-column: 1;}
.lt3 .a{display: block;height: 2.6rem;background: linear-gradient(237deg, #EBE2FF 0%, #FFFFFF 60%);border-radius: .2rem;position: relative;z-index: 1;padding: .42rem;/* transition: .5s; */overflow: hidden;}
.lt3 .a .bg1{position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: linear-gradient(237deg, #6510AD 0%, #EEBAFA 28%, #FFFFFF 71%, #6510AD 97%);z-index: -1;border-radius: .2rem;opacity: 0;transition: .5s;}
.lt3 .a::before{content: "";position: absolute;top: 1px;right: 1px;bottom: 1px;left: 1px;background: #fff;border-radius: .2rem;}
.lt3 .a .after{content: "";position: absolute;width: 8.8rem;height: 8.8rem;top: 50%;left: 50%;background: url(../images/lt3_b.png) center no-repeat;opacity: 0;transition: .15s;background-size: 100% 100%;pointer-events: none;margin: -4.4rem 0 0 -4.4rem;}
.lt3 .time{ position: relative; z-index: 1;}
.lt3 .time:before{content: "";position: absolute;width: .18rem;height: 1px;background: #6510AD;transform: rotate(-35deg);left: .3rem;bottom: .1rem;}
.lt3 .time .ll{ margin: 0 .22rem 0 0;}
.lt3 .time .ll h6{font-size: .12rem;color: #0D1448;font-family: 'Chakra Petch';line-height: 1; transition: .5s;}
.lt3 .time .ll h3{font-size: .24rem;color: #6510AD;font-family: 'Chakra Petch';font-weight: normal;line-height: 1;}
.lt3 .time .ll.rr h6{ text-transform: uppercase; letter-spacing: .02rem; transform: scale(.8)}
.lt3 h4{ margin: .28rem 0 0; position: relative; z-index: 1;}

.more2{position: relative;width: .6rem;height: .6rem;background: #fff;border-radius: 50vw;cursor: pointer; overflow: hidden}
.more2::before{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: url(../images/more2.svg) center no-repeat;transition: .5s cubic-bezier(0.4, 0.2, 0.2, 1);background-size: .41rem .4rem;}
.more2::after{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: url(../images/more2.svg) center no-repeat;transform: translate(-40%, 40%);opacity: 0;transition: .5s cubic-bezier(0.4, 0.2, 0.2, 1); background-size: .41rem .4rem;}

.home3 .wp{ align-items: flex-start;}
.home3 .left{width: 10.16rem;position: relative;z-index: 2;}
.home3 .right{width: calc(100% - 10.16rem);position: relative;z-index: 1;padding: .74rem .56rem .58rem;min-height: 6.14rem;}
.home3 .right::before{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: -.96rem;background: linear-gradient(313deg, #6510AD 1%, #456FF9 107%), linear-gradient(313deg, #6510AD 1%, #456FF9 107%), #FFFFFF;box-shadow: 0px 6px 37px 0px rgba(0, 0, 0, 0.03);border-radius: .2rem; background: url(../images/lt5_b.jpg) right bottom no-repeat; background-size: cover;}

.lt4Box{padding: 0; z-index: 1;}
.lt4 li{padding: .36rem 0;width: 4.36rem;}
.lt4 .a{display: block;transition: .5s;position: relative;z-index: 1;}
.lt4 .a:before{content: "";position: absolute;top: 0;right: 0;bottom: .45rem;left: 0;border: 1px solid #915DCA;transform: translate(-.36rem, -.36rem);border-radius: .2rem;opacity: 0;transition: .5s;}
.lt4 .a::after{content: "";position: absolute;width: 8.42rem;height: .765rem;background: url(../images/lt4Box.svg) center bottom no-repeat;background-size: 100% auto;bottom: -.1rem;left: 50%;transform: translateX(-50%); z-index: -1; transition: .5s; opacity: 0}
.lt4 .imgBox{ border-radius: .2rem;}
.lt4 .imgBox:after{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: linear-gradient(-90deg, #000000 0%, rgba(0, 0, 0, 0) 50%);}
.lt4 .imgBox .img{ padding-bottom: 132.33%;}
.lt4Box .dots{justify-content: center;width: 1.2rem;height: .04rem;background: #ffff;margin: .3rem auto 0;border-radius: 50vw;}
.lt4Box .dots span{height: 100%;background: linear-gradient(265deg, #490BAA 22%, #456FF9 87%), #0066FF;margin: 0 !important;border-radius: 0;opacity: 0;transition: .5s;border-radius: 50vw;width: auto;flex: 1;}
.lt4Box .dots span.active{opacity: 1;}

/* .lt4 li.swiper-slide-active{ z-index: 2}
.lt4 li.swiper-slide-active{ transform: scale(1.24);}*/
.lt4 li.swiper-slide-active .a:before{ opacity: 1} 
.lt4 li.swiper-slide-next .imgBox:after{ background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 50%);}
.lt4 li.swiper-slide-active .imgBox:after{ opacity: 0}
.lt4 li.swiper-slide-active .a::after{ opacity:1}

.ar1w .ar1{position: absolute;width: .4rem;height: .4rem;background: #ffff;border-radius: 50vw;z-index: 2;top: 50%;transform: translateY(-50%);font-size: .2rem;color: #353535;font-family: 'lib';font-weight: bold;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: .5s;}
.ar1w .ar1.prev1{ left: 2.7rem}
.ar1w .ar1.next1{ right: 2.7rem}

.lt5 .ico img{ width: .9rem}
.lt5 h6{font-size: .18rem;color: #fff;margin: .4rem 0 .16rem;}
.lt5 h4{ font-size: .32rem; color: #fff !important;}
.lt5 p{color: rgba(255, 255, 255, 0.7);margin: .3rem 0 .6rem;}
.lt5 .more2{ float: right;}

.lt6Box{ border-radius: .2rem;}
.lt6 .imgBox .img{ padding-bottom: 25.55%;}
.lt6 .imgBox:after{content: "";position: absolute;right: 0;bottom: 0;left: 0;background: linear-gradient(180deg, transparent 0%, rgba(73,11,170,.7) 100%);height: 3rem;}

.lt7{margin: -1.8rem 0 0;position: relative;z-index: 1; border-radius: .2rem; overflow: hidden}
.lt7 li{flex: 1;position: relative;}
.lt7 li:before{ content: ""; position: absolute; right: 0; bottom: 0; width: 1px; height: 2.6rem; background: #EBE2FF}
.lt7 li:last-child{ border: none}
.lt7 .a{height: 3.5rem;align-items: flex-end;position: relative;z-index: 1;overflow: hidden;}
.lt7 .a:before{content: '';position: absolute;height: 2.6rem;right: 1px;bottom: 0;left: 0;background: #fff;z-index: -1;}
.lt7 .a:after{content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: url(../images/lt7_b.jpg) center no-repeat;background-size: cover;z-index: -1;border-radius: .2rem .2rem 0 0;transform: translateY(50%); transition: .5s; opacity: 0;}
.lt7 .txt{height: 2.6rem;padding: .35rem .35rem 0; transition: .5s}
.lt7 p{margin: .16rem 0 .28rem;-webkit-line-clamp: 2;transition: .5s}

.lt7 li:first-child .a:before{ border-radius: .2rem 0 0 .2rem;}
.lt7 li:last-child .a:before{ border-radius: 0 .2rem .2rem 0;}
.lt7 li:last-child:before{ display: none}

.more3{font-size: .14rem;color: #fff;justify-content: flex-end;align-items: center;}
.more3 img{ width: .28rem; margin: 0 0 0 .08rem}


.home4 .wp1{ max-width: 18rem;}


@media(min-width: 769px){
    .more1:hover::before{ transform: scale(1.5)}

    .lt2 li.on{flex: 1.5;/* padding-bottom: .3rem; */}
    .lt2 li.on .a{transform: translateY(0);}
    .lt2 li.on p{ opacity: 1}
    .lt2 li.on h6:before{background: linear-gradient(322deg, #FFFFFF 0%, #8A73FF 102%);transform: translateY(0);}

    .lt3 .a:hover .time .ll h6{ color: #6510AD;}
    .lt3 .a:hover .after{ opacity: 1;}
    .lt3 .a:hover .bg1{ opacity: 1;}

    .more2:hover::before{ transform: translate(40%, -40%); opacity: 0;}
    .more2:hover::after{ transform: translate(0, 0); opacity: 1;}

    .ar1w .ar1:hover{ background: #6510AD; color: #fff}

    .lt7 li.on .a:after{ transform: translateY(0); opacity: 1;}
    .lt7 li.on p{ -webkit-line-clamp: 4; color: rgba(255, 255, 255, 0.7);}
    .lt7 li.on .txt{ transform: translateY(-.8rem)}
    .lt7 li.on h4{ color: #fff}
}
@media(max-width: 1025px){
    .banner .imgBox .img{padding-bottom: 54%;}

    .banner .dots{ bottom: .2rem;}
}
@media(max-width: 769px){
    .pad1{ padding: .4rem 0;}

    .banner:after{ height: 1rem}
    .banner .dots span{width: .26rem;height: .26rem;margin: 0 .1rem 0 0 !important;}
    .banner .dots span:after{width: .05rem;height: .05rem;margin: -.025rem 0 0 -.025rem;}

    .tit1{ margin: 0 0 .25rem}
    .tit1 .ll img{width: .44rem;margin: 0 .1rem 0 0;}
    .tit1 .ll h3{font-size: .26rem;}
    .tit1 .ll h6{font-size: .14rem;}
    .more1{ font-size: .16rem}

    .home1 .left{ width: 100%}
    .home1 .right{width: 100%;padding: .2rem 0 0;}
    .lt1 .txt{ padding: .15rem 15px;}
    .lt2{height: auto;margin: 0; padding: 0 0}
    .lt2 li:nth-child(n+4){ display: none; }
    .lt2 p{ display: none}
    .lt2 .a{ transform: none; padding: .25rem 0 .15rem}
    .lt2 h4{ margin: .1rem 0 0}
    .lt2 li h6:before{background: linear-gradient(322deg, #FFFFFF 0%, #8A73FF 102%);transform: translateY(0);}

    .home2{padding-top: .2rem;}
    .home2 .tit1{ width: 100%; max-width: 100%}
    .lt3{width: 100%;max-width: 100%;grid-template-columns: repeat(1, 1fr);grid-gap: .2rem 14px;}
    .lt3 li:nth-child(n+4){ display: none; }
    .lt3 .a::after{ opacity: 1}
    .lt3 .a{height: auto;padding: .25rem 15px;}
    .lt3 h4{ margin: .15rem 0 0;}
    .lt3 .time .ll h3{ font-size: .2rem}

    .svgBg{position: relative;margin: -18vw 0;display: none;}
    .home2 .svg1{left: 114%;transform: scale(2.5) translateX(-50%);top: 0;position: relative;}
    .home2 .svg2{left: 50%;top: 40%;transform: translate(-50%, -50%) scale(2);}

    .home2{padding-top: .2rem;}
    .home3 .left{width: 100%;padding: 0;order: 1;}
    .lt4Box{width: 100%;}
    .lt4{ display: none;}
    .home3 .right{width: 100%;padding: .25rem 15px;min-height: 4rem; margin: .2rem 0 0}
    .home3 .right::before{ left: 0}

    .lt4 li{width: 50vw;padding: .24rem 0;}
    .lt4 .a:before{ transform: translate(-.15rem, -.15rem);}
    .lt4 .a::after{width: 94vw;height: 12vw;bottom: -.06rem;}
    .ar1w{display: flex;justify-content: center;align-items: center;margin: .25rem 0 0;}
    .ar1w .ar1{position: relative;left: auto !important;right: auto !important;margin: 0 .15rem;box-shadow: 0 0 .15rem rgba(0,0,0,.1);top: auto;transform: translateY(0);}

    .lt5 .ico img{ width: .6rem}
    .lt5 h4{font-size: .24rem !important;}

    .more2{ width: .44rem; height: .44rem}
    .more2:before{ background-size: .28rem .27rem;}
    .lt5 h6{font-size: .16rem; margin: .25rem 0 .12rem;}
    .lt5 p{ margin: .2rem 0 .3rem;}

    .lt4Box .dots{ display: none}

    .lt7{margin: .2rem 0 0;}
    .lt7 li{ width: 100%; flex: auto; margin: 0 0 .2rem}
    .home4 .wp1{ padding: 0}

    .lt7 .a{height: 100%;border-radius: .2rem;}
    .lt7 li.on .txt{ transform: translateY(0)}
    .lt7 li p{-webkit-line-clamp: 2 !important;margin-bottom: 0;}
    .lt6Box{ display: none}
    .lt7 li:before{ display: none}
    .lt7 .txt{height: 1.8rem;padding: .25rem 15px;}
    .lt7 .txt .more3{ display: none}

    .lt7 li:nth-child(n+4){ display: none; }

    
    .home4{padding-bottom: 0;padding-top: .2rem;}
}