@charset "utf-8";

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

.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: 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;background: none;}
.banner .imgBox .img img{ transition: 0s;}

.progress-circle{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: .22rem;height: .22rem;}
.progress-circle .cls-1{fill:none;stroke:#fff;stroke-width: .05rem;/* stroke-linecap: round; */transition: stroke-dashoffset .3s ease;}
.banner .dots{position: absolute;bottom: .45rem;display: flex;left: auto;z-index: 2;justify-content: center;}
.banner .dots span{width: .2rem;height: .2rem;background: none;margin: 0 .1rem !important;opacity: 1;transition: .5s;border: #fff 2px solid;border-radius: 50vw;position: relative;display: block;transform: rotate(90deg);}

.banner .dots span.active{ border: rgba(255,255,255,.6) 2px solid}
.banner .dots span.active .progress-fill{animation: progress-fill 6s ease-in-out forwards;}

@keyframes progress-fill {
    from {
        stroke-dashoffset: 75.4;
    }
    to {
        stroke-dashoffset: 0;
    }
}

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

.tit1{ align-items: center; margin: 0 0 .6rem;}
.tit1 .h3{font-size: .6rem;color: #000000;font-family: "Roboto Bold";text-transform: uppercase; line-height: 1;}

.more1{width: 1.83rem;height: .5rem;border: rgba(107,40,209,.6) 1px solid;border-radius: 50vw;align-items: center;justify-content: center;font-size: .18rem;color: #6b28d1;font-family: "Roboto Bold";font-style: italic; transition: .5s}
.more1 span{ width: .14rem; height: .14rem; border: #6b28d1 .04rem solid; border-radius: 50vw; position: relative; margin: 0 .25rem 0 0; transition: .5s}
.more1 span:after{content: "";position: absolute;width: .18rem;height: .02rem;background: #6b28d1;left: 100%;top: 50%;margin: -.01rem 0 0; transition: .5s}

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

.lt1 .a{ display: block; border-radius: .15rem; overflow: hidden; position: relative;}
.lt1 .imgBox .img{padding-bottom: 57.14%;}
.lt1 .imgBox::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.7) 100%);height: 1.5rem;}
.lt1 .txt{position: absolute;right: 0;bottom: 0;left: 0;z-index: 1;padding: 0 .4rem .35rem;}
.lt1 h4{ font-size: .32rem; color: #fff !important; line-height: .42rem;}
.lt1 h6{ color: #fff; margin: .1rem 0 0}


.lt2{ margin: -.32rem 0}
.lt2 li{ border-bottom: #e5e5e5 1px solid}
.lt2 li:last-child{ border: none}
.lt2 .a{height: 1.64rem;display: flex;flex-direction: column;justify-content: center;position: relative}
.lt2 .a:after{content: "";position: absolute;width: .11rem;height: .11rem;border: #a5ddf4 .03rem solid;border-radius: 50vw;left: 0;bottom: -.06rem;box-sizing: border-box;background: #fff;transition: .5s;}
.lt2 h4{ margin: .1rem 0 0}

.lt2 li:last-child .a:after{ display: none;}

.home2{padding-top: .1rem !important;}
.home2 .left{width: calc(100% - 8rem - 1rem);}
.home2 .right{ width: 8rem;}

.lt3 li{ height: 3.8rem;}
.lt3 .tit span{font-size: .24rem;color: #fff;padding: .1rem .2rem;background: #6b28d1;border-radius: .05rem;font-family: "Roboto Bold";}
.lt3 h4{ margin: .36rem 0}
.lt3 h6{ color: #666666;}

.ar1W{align-items: flex-end;width: 3.3rem;position: relative; padding: 0 0 .14rem}
.ar1W .progress-bar{ position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #e4e5e6}
.ar1W .progress-bar .line{width: 0;height: 2px;background: #a5ddf4;}
.ar1W .progress-bar .line.on{-webkit-animation-name: anil;animation-name: anil;-webkit-animation-duration: 5s;animation-duration: 5s;-webkit-animation-timing-function: linear;animation-timing-function: linear;}
@-webkit-keyframes anil{
    0%{ width: 0;}
    100%{ width: 100%;}
}
@keyframes anil{
    0%{ width: 0;}
    100%{ width: 100%;}
}

.lt2s1 h4{ font-weight: normal}
.lt2s1 li.on h6{ color: #6b28d1 !important; opacity: .6;}
.lt2s1 li.on h4{ color: #6b28d1 !important; font-weight: bold}
.lt2s1 li.on .a:after{border: #6b28d1 .03rem solid;left: calc(100% - .11rem);}

.ar1W .num{ align-items: baseline;} 
.ar1W .num *{font-size: .18rem;color: #151515;font-family: "Roboto Bold";}
.ar1W .num span{font-size: .16rem;margin: -.02rem .02rem 0 .04rem;}
.ar1W .now{ font-size: .25rem; color: #a5ddf4;}
.ar1Box{ align-items: center}
.ar1Box .ar1{font-size: .22rem;color: #d6d6d7;font-family: 'lib';cursor: pointer;transition: .5s;}
.ar1Box .contorl{ position: relative; margin: 0 .16rem}
.ar1Box .contorl .btn0{display: flex;justify-content: center;align-items: center;opacity: 0;visibility: hidden;cursor: pointer;}
.ar1Box .contorl .btn2{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ar1Box .contorl .btn0.active{ opacity: 1; visibility: visible}

.lt4 .a{ display: block; position: relative;}
.lt4 .imgBox .img{padding-bottom: 56.375%;-webkit-mask: url(../images/lt4.png);mask: url(../images/lt4.png);-webkit-mask-size: cover;mask-size: cover;mask: none \0;}

.more2{position: absolute;right: 0;bottom: 0;width: .5rem;height: .5rem;background: #6b28d1;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: .18rem .18rem;}
.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);}

.btn0 svg{width: .14rem;height: .14rem;fill: #151515;}

.lt4Box{position: relative;z-index: 1;overflow: visible;}
.lt4Box::before{content: "";position: absolute;top: .8rem;right: 50%;bottom: .8rem;left: -.4rem;background: #6b28d1;border-radius: .18rem;z-index: -1; opacity: .1;}
.lt4Box::after{content: "";position: absolute;top: .4rem;right: 50%;bottom: .4rem;left: -.2rem;background: #6b28d1;border-radius: .18rem;z-index: -1; opacity: .2;}

.home3{padding-top: 0 !important;}
.home3 .left{width: 43.5%;}
.home3 .right{width: 56.5%;padding: 0 0 0 .4rem;}

.lt6{background-image: linear-gradient(54deg, #6b28d1 0%, #867de1 90%);border-radius: .1rem;position: relative;}
.lt6 .a{ display: block; padding: .45rem .55rem .75rem .45rem;}
.lt6 .top{align-items: flex-start;margin: 0 0 .32rem;min-height: 2rem;}
.lt6 h4{font-size: .32rem;line-height: .4rem;color: #fff !important;flex: 1;}
.lt6 .imgBox{width: 1.2rem;border-radius: 50vw;margin: 0 0 0 .3rem; border: #fff .05rem solid;}
.lt6 .imgBox .img{ padding-bottom: 100%;}
.lt6 .p .p0{font-size: .24rem;color: #fff;padding: 0 0 0 .32rem;line-height: 1.5;background-size: .2rem auto !important;margin: 0 0 .1rem;}
.lt6 .p .p1{background: url(../images/lt6_p1.png) left .08rem no-repeat;}
.lt6 .p .p2{background: url(../images/lt6_p2.png) left .08rem no-repeat;}
.lt6 .p .p3{background: url(../images/lt6_p3.png) left .08rem no-repeat;max-width: calc(100% - .6rem);}
.lt6 .p .p0 .ll{width: auto;}
.lt6 .p .p0 .rr{}

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

.home3 .tit1{ margin: 0 0 .5rem;}

.lt7Box{ width: calc((100vw - 16rem)/2 + 100%)}
.lt7 .a{display: flex;flex-direction: column;justify-content: center;min-height: 4.2rem;padding: 0 .4rem 0 .48rem;position: relative;background: rgba(255,255,255,.5);border: rgba(220,220,220,.6) 1px solid;height: 100%;border-radius: .1rem;}
.lt7 .top{min-height: 1.2rem;margin: 0 0 .28rem;}
.lt7 .bottom .ll{ width: 100%; transform: translateX(-.08rem)}
.lt7 .bottom .ll{font-size: .18rem;align-items: center;color: #74eaf9;font-weight: 600;margin: 0 0 .06rem;}
.lt7 .bottom .ll img{width: .36rem;margin: 0 -.2rem 0 0;}
.lt7 h5{font-size: .16rem;color: #333;margin: 0 0 .15rem;}
.lt7 h4{font-size: .3rem;line-height: .38rem;}
.lt7 .line{width: 100%;height: 1px;background: #e3ebeb;margin: .25rem 0;}
.lt7 .p .p0{font-size: .22rem;color: #666666;padding: 0 0 0 .32rem;line-height: 1.5;background-size: .2rem auto !important;margin: 0 0 .1rem;}
.lt7 .p .p1{background: url(../images/lt7_p1.png) left .08rem no-repeat;}
.lt7 .p .p2{background: url(../images/lt7_p2.png) left .08rem no-repeat;}
.lt7 .p .p3{background: url(../images/lt7_p3.png) left .08rem no-repeat;}

.ar2Box{width: 5.5rem;margin: .4rem auto 0;align-items: center;max-width: 100%;justify-content: flex-end;}
.ar2{font-size: .36rem;color: #d6d2da;font-family: "lib";cursor: pointer;transition: .5s;}
.lt2 li.on .a:after{border: #6b28d1 .03rem solid;left: calc(100% - .11rem);}
.lt2 li.on h4{ color: #6b28d1}

@media(min-width: 769px){
    .more1:hover{background: #6b28d1;color: #fff;}
    .more1:hover span{ border: #fff .04rem solid;}
    .more1:hover span:after{ background: #fff;}

    

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

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

    .ar1Box .ar1:hover{ color: #6b28d1}
    .ar2:hover{ color: #6b28d1}
}
@media(max-width: 1025px){
    .banner .imgBox .img{ padding-bottom: 50%;}

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

    .banner:after{ height: .8rem}
    .banner .imgBox .img{ padding-bottom: 60%;}
    .banner .dots span{transform: scale(.7);margin: 0 .04rem !important;}

    .tit1{ margin: 0 0 .25rem !important;}
    .tit1 .h3{font-size: .26rem;}
    .more1{width: 1.2rem;height: .4rem;font-size: .14rem;}
    .more1 span{width: .1rem;height: .1rem;border: #6b28d1 .03rem solid;margin: 0 .15rem 0 0;}
    .more1 span:after{ width: .12rem}
    .lt1 .txt{ padding: 0 15px 15px;}
    .lt1 h4{font-size: .24rem;-webkit-line-clamp: 2;}
    .lt1 .imgBox::after{ height: 1rem}

    .home1 .left{ width: 100%}
    .home1 .right{width: 100%;padding: .3rem 0 0;}

    .lt2{gap: .2rem;margin: -.1rem 0;}
    .lt2 .a{height: 1.24rem;}

    .home2 .left{width: 100%;}
    .home2 .right{width: 100%;padding: .3rem 0 0;}
    .lt3 .tit span{ font-size: .2rem;}
    .lt3 h4{ margin: .2rem 0}
    .lt3 li{ height: 2.2rem;}

    .lt4Box::before{ top: .4rem; bottom: .4rem;left: -15px; border-radius: .1rem}
    .lt4Box::after{ top: .2rem; bottom: .2rem;left: -7.5px; border-radius: .1rem}
    .more2{ transform-origin: right bottom;  transform: scale(.56)}

    .home3 .left{ width: 100%;}
    .home3 .right{width: 100%;padding: .3rem 0 0;}
    .lt7Box{ width: 100%;}

    .lt6 .a{ padding: .25rem 15px .25rem;}
    .lt6 .imgBox{width: 1rem;margin: 0 0 0 .15rem;}
    .lt6 .top{min-height: 1.5rem;margin: 0 0 .2rem;}
    .lt6 .p .p0{font-size: .16rem;background-size: .16rem auto !important;background-position-y: .02rem;padding: 0 0 0 .28rem;}
    .more3{width: .44rem;height: .44rem;right: .2rem;bottom: .3rem;}
    .more3:before, .more3:after{ background-size: .14rem !important}

    .lt7 .top{min-height: 1rem;}
    .lt7 .p .p0{font-size: .16rem;background-size: .16rem auto !important;background-position-y: .02rem;padding: 0 0 0 .28rem;}
    .lt7 .a{ padding: .25rem 15px; min-height: 3rem}

    .ar2Box{width: 100%;margin: .3rem 0 0;justify-content: center;}
    .ar1W{ margin: 0 auto;}
}