@charset "utf-8";

.banner_box{ padding: 0px; position: relative; z-index: 3; }
.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: .9;}
.banner .txt{position: absolute;top: 0;right: 0;bottom: 0;left: 0;justify-content: center;align-items: center;display: flex;}
.banner h3{font-size: .72rem;color: #fff !important;opacity: 0;font-weight: 600;line-height: 1.1;margin: .25rem 0 .6rem;position: relative;z-index: 1;}
.banner h3 span{background-image: linear-gradient(90deg, rgb(0, 128, 212) 0%, rgb(33, 196, 102) 100%);-webkit-background-clip: text;background-clip: text;color: transparent;font-weight: bold;}
.banner h4{font-size: .3rem;color: #fff !important;opacity: 0;position: relative;z-index: 1;}
.banner h5{font-size: .18rem;color: #fff !important;margin: 0 0 .8rem;opacity: 0;line-height: 1.5; position: relative; z-index: 1}
.banner .left{flex: 1;/* overflow: hidden; */padding: .5rem 0;display: flex;flex-direction: column;align-items: flex-start;}
.banner .right{align-items: center;margin: 0 0 0 .2rem;}

.banner.on ul li.swiper-slide-active .a .imgBox1, .banner.on ul li.swiper-slide-duplicate-active .a .imgBox1, .banner.on ul li.swiper-slide-prev .a .imgBox1{ animation: sca 6s linear 0s normal both;}
@keyframes sca {
    0% {
        transform: scale(1.06);
    }
    100% {
        transform: scale(1);
    }
}

.banner .swiper-slide.swiper-slide-active h4{ animation: enter 1.2s forwards .2s;}
.banner .swiper-slide.swiper-slide-active h3{ animation: enter 1.2s forwards .3s;}
.banner .swiper-slide.swiper-slide-active h5{ animation: enter 1.2s forwards .4s;}
.banner .swiper-slide.swiper-slide-active .more1{ animation: enter 1.2s forwards .5s;}

@-webkit-keyframes enter {
    0% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    20% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    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(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    20% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); }
}

.banner .dots{ position: absolute; z-index: 1; bottom: .7rem;left: 0;right: 0;justify-content: center;align-items: center;}
.banner .dots span{width: .1rem;height: .1rem;border-radius: 50vw;background: rgba(255,255,255,.5);opacity: 1;margin: 0 .1rem;cursor: pointer;position: relative;transition: .5s;overflow: hidden;padding: 0 .05rem !important;}
.banner .dots span:after{content: "";display: block;width: 0;height: 100%;left: 0;margin-left: 0;position: absolute;top: 0;background-image: linear-gradient(90deg, rgb(0, 128, 212) 0%, rgb(33, 196, 102) 100%);}
.banner .dots span.active{ width: .4rem}
.banner .dots span.active:after {animation: anim-h 6s linear forwards;-webkit-animation: anim-h 6s linear forwards;}
@-webkit-keyframes anim-h {
    0% {
        width: 0;
    }
    100% {
       width: 100%;
    }
}
@keyframes anim-h {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

.nums{align-items: flex-end;font-size: .22rem;color: #fff;line-height: 1;}
.nums i{ margin: 0 .04rem 0 0}
.nums span{opacity: 1 !important;margin: 0;transition: .5s;font-family: 'Roboto Bold';line-height: 1;display: block;}
.nums span.active{font-size: .48rem;line-height: .8;}

.more1{width: 1.6rem;height: .6rem;border-radius: 50vw;align-items: center;position: relative;z-index: 1;cursor: pointer;opacity: 0;background-image: linear-gradient(90deg, rgb(0, 128, 212) 0%, rgb(33, 196, 102) 100%);justify-content: center;}
.more1 i{width: .3rem;height: .3rem;border-radius: 50vw;font-size: .16rem;color: #115eb3;font-family: 'lib';justify-content: center;align-items: center;display: flex;position: relative;background: #fff;}
.more1 i::before{transition: .5s}
.more1 span{font-size: .16rem;color: #fff;margin: 0 .2rem 0 .15rem;}

.arrow1{flex-direction: column;margin: 0 0 0 .44rem;}
.arrow1 .arrow{width: .5rem;padding: .09rem 0;cursor: pointer;opacity: .5;transition: .5s;}
.arrow1 .arrow img{ width: 100%;}

.arrow1 .arrow:hover{ opacity: 1}


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

.index1{ background: url(../images/i1_b.jpg) center top no-repeat; background-size: cover;}
.index1 .fl1{ justify-content: flex-end;}
.tit1{ width: 9.64rem;}
.tit1 .ll{font-size: .48rem;color: #313131;font-weight: bold;line-height: 1.15;position: relative;margin-bottom: .36rem;}
.tit1 .ll span{ color: #13bc82;}

.more2{position: absolute;right: 0;bottom: .04rem;width: .66rem;height: .66rem;justify-content: center;align-items: center;font-size: .18rem;color: #333;font-family: 'lib';font-weight: bold; transition: .5s;}
.more2::after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50vw;border: #e2e2e2 2px solid; transition: .5s;}

.index1 .fl2{ position: relative; padding: .54rem 0 0 1.6rem; z-index: 1;}
.index1 .fl2 .b1{ position: absolute; width: 3.25rem; top: 0; left: 0; z-index: -1; border-radius: .2rem; overflow: hidden;}
.index1 .fl2 .img{ border-radius: .2rem;}

.index2{ background: url(../images/i2_b.jpg) center top no-repeat; background-size: cover;}
.index2 .wp{ align-items: center;}
.index2 .left{ width: 5rem;}
.index2 .right{ width: calc(100% - 5rem); padding: 0 0 0 1.2rem;}

.tit2{ margin-bottom: 1.5rem;}
.tit2 h3{ font-size: .48rem; color: #fff; font-weight: bold;}
.tit2 p{ font-size: .18rem; color: rgba(255,255,255,.7); line-height: 1.75; margin: .3rem 0 .7rem;}

.more3{width: 1.75rem;height: .6rem;border-radius: 50vw;align-items: center;position: relative;z-index: 1;cursor: pointer; background-image: linear-gradient(90deg, rgb(0, 128, 212) 0%, rgb(33, 196, 102) 100%);justify-content: center; font-size: .18rem; color: #fff !important; transition: .5s;}

.slides1 .hd ul li{ margin: 0 .8rem 0 0; position: relative;}
.slides1 .hd ul li:nth-child(1)::before{content: "";position: absolute;top: 50%;right: -.4rem;width: 1px;height: .6rem;background: rgba(255,255,255,.15);transform: translateY(-50%);}
.slides1 .hd ul li:last-child{ margin: 0 !important; }
.slides1 .hd ul li .a{ align-items: center;}
.slides1 .hd ul li .ico{ display: block; background: url(../images/slides1.png) center no-repeat; background-size: 100% 100%; position: relative; width: .3rem; height: .3rem; margin: 0 .18rem 0 0;}
.slides1 .hd ul li .ico::after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50vw; background: url(../images/slides1s.png) center no-repeat; background-size: 100% 100%; transition: .5s; opacity: 0; animation: roted 10s infinite linear;}
.slides1 .hd ul li h4{ font-size: .24rem; color: rgba(255,255,255,.4); transition: .5s;}
.slides1 .hd ul li p{ font-size: .16rem; color: rgba(255,255,255,.4); transition: .5s; margin: .08rem 0 0;}

.slides1 .hd ul li.on .ico::after{ opacity: 1;}
.slides1 .hd ul li.on h4{ color: #fff;}

.slides1 .bd{ width: calc((100vw - 16rem)/2 + 100%);}

.ls2 .a{ display: block; background: #fff; border-radius: .15rem; padding: .46rem .46rem 0; height: 5.9rem;}
.ls2 .imgBox{ width: 2.65rem; border-radius: 50vw; margin: 0 auto;}
.ls2 .imgBox .img{ padding-bottom: 100%;}
.ls2 .txt{ padding: .45rem 0 0;}
.ls2 h4{ font-size: .26rem;}
.ls2 .line{ width: 100%; height: 1px; background: #ebebeb; margin: .15rem 0 .2rem;}
.ls2 p{ margin: 0 0 .26rem;}

.more4{ width: .32rem; height: .32rem; border-radius: 50vw; background: #dde6ec; justify-content: center; align-items: center; position: relative; z-index: 1;}
.more4::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50vw; background-image: linear-gradient(90deg, rgb(0, 128, 212) 0%, rgb(33, 196, 102) 100%); transition: .5s; z-index: -1; opacity: 0; transition: .5s;}
.more4 i{ font-size: .18rem; color: #fff; font-family: 'lib';}

.tit3{ margin-bottom: .6rem; align-items: flex-end;}
.tit3 .ll h3{ font-size: .48rem; color: #000000; font-weight: bold;}
.tit3 .ll p{font-size: .18rem;color: #8b8f93;line-height: 1.75;margin: .25rem 0 0;}
.tit3 .more3{ margin: 0 0 .1rem;}

.ls3{ margin: 0 -.1rem}
.ls3 li{flex: 1;padding: 0 .1rem; transition: .5s;}
.ls3 .a{ display: block; position: relative; border-radius: .2rem; overflow: hidden}
.ls3 .imgBox .img{ padding-bottom: 6.75rem;}
.ls3 .txt{position: absolute;right: 0;top: .58rem;left: 0;padding: 0 .5rem;transition: .5s;}
.ls3 h6{ font-size: .2rem; color: rgba(255,255,255,.7)}
.ls3 h3{ font-size: .34rem; color: #fff; margin: .15rem 0 .45rem}

.more5{ display: flex; width: 1.5rem; height: .55rem; border-radius: 50vw; border: rgba(255,255,255,.4) 2px solid; justify-content: center; align-items: center; font-size: .16rem; color: #fff; transition: .5s;}

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

.ls4W{ width: calc((100vw - 16rem)/2 + 100%); position: relative;}
.ls4W .swiper-scrollbar{position: relative;height: .04rem;background: none; z-index: 1; margin: .68rem 0 0}
.ls4W .swiper-scrollbar:before{ content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(0,0,0,.1)}
.ls4W .swiper-scrollbar div{ background: #13bc82}
.ls4 .a{ background: #fff; display: block; height: 5.76rem; position: relative; z-index: 1;}
.ls4 .imgBox .img{ padding-bottom: 65.77%;}
.ls4 .txt{ padding: .45rem .45rem 0;}
.ls4 h6{position: absolute;right: .45rem;bottom: .52rem;left: .45rem;width: auto;}
.ls4 p{ margin: .6rem 0 0;}

.index5{padding-bottom: 5.3rem !important;background: url(../images/i_i5.jpg) center no-repeat;background-size: cover;}

.tit4{ text-align: center; margin: 0 0 .7rem;}
.tit4 h3{font-size: .48rem;color: #fff;font-weight: bold;line-height: 1.5;}

@media(min-width: 769px){
    .more2:hover{ color: #115eb3; }  
    .more2:hover::after{ border: #115eb3 2px dotted; animation: roted 10s infinite linear;} 

    .more3:hover{ letter-spacing: .02rem;}

    .a:hover .more4::before{ opacity: 1;}

    .ls3 li.on{ flex: 3;}

    .a:hover .more5{ border: #115eb3 2px solid; background: #115eb3;}
}
@media(max-width: 769px){
    .index5{padding-bottom: 6.3rem !important;background: url(../images/i_i5.jpg) center no-repeat;background-size: cover;}
    .banner .imgBox .img{padding-bottom: 70%;}
    .banner .left{width: 100%;flex: auto;}
    .banner .right{/* width: 100%; */position: absolute;bottom: .1rem;right: 15px;}
    .banner h4{font-size: .15rem;}
    .banner h3{font-size: .24rem;margin: .1rem 0 .15rem;}
    .banner h5{margin: 0;}
    .banner h5{font-size: .14rem;line-height: 1.5;}

    .more1{ display: none;}

    .nums{ font-size: .18rem}
    .nums span.active{ font-size: .3rem}
    .banner .dots{bottom: .25rem;right: 0;justify-content: flex-start;padding: 0 15px;}
    .banner .dots span.swiper-pagination-current{ font-size: .2rem;}
    .arrow1 .arrow{width: .24rem;padding: .05rem 0;}
    .arrow1{ margin: 0 0 0 .25rem;}
    .banner h4::before{width: .6rem;height: .06rem;bottom: .04rem;}
    .banner h3::before{width: .6rem;height: .06rem;bottom: .04rem;left: 70%;}


    .pad1{ padding: .5rem 0;}
    .tit1 .ll{font-size: .24rem;line-height: 1.3;width: 100%;padding: 0 calc(100% - 2rem) 0 0;margin-bottom: .2rem;}
    .more2{ width: .5rem; height: .5rem}

    .index1 .fl2{ padding: .2rem 0 0 10%; margin: .3rem 0 0;}
    .index1 .fl2 .b1{ width: 25%; border-radius: .1rem;}

    .index1 .fl2 .img{ border-radius: .1rem;}

    .tit2{ margin-bottom: .4rem;}
    .tit2 h3{ font-size: .26rem;}
    .tit2 p{ margin: .12rem 0 .3rem;}
    .more3{ width: 1.2rem; height: .42rem; font-size: .14rem;}

    .slides1 .hd ul li{margin: 0 .4rem 0 0;}
    .slides1 .hd ul li:nth-child(1)::before{right: -.2rem;height: .4rem;}
    .slides1 .hd ul li .ico{ width: .2rem; height: .2rem; margin: 0 .15rem 0 0;}
    .slides1 .hd ul li p{ font-size: .14rem;}
    .slides1 .hd ul li h4{ font-size: .2rem;}

    .index2 .left{ width: 100%;}
    .index2 .right{width: 100%;padding: .4rem 0 0;}
    .slides1 .bd{width: calc(100% + 15px);}

    .ls2 .imgBox{width: 1.75rem;}
    .ls2 .a{height: 4.2rem;padding: .3rem .25rem 0;}
    .ls2 .txt{ padding: .25rem 0 0}
    .ls2 .line{ margin: .08rem 0 .12rem}

    .tit3{ margin-bottom: .25rem;}
    .tit3 .ll{ width: 100%;}
    .tit3 .ll h3{ font-size: .26rem;}
    .tit3 .ll p{ margin: .12rem 0 .2rem;}

    .ls3 li{ flex: auto; width: 100%; margin-bottom: .2rem;}
    .ls3 .imgBox .img{padding-bottom: 66%;}
    .ls3 .txt{ padding: 0 .25rem 0; top: .25rem;}
    .ls3 h3{ font-size: .24rem; margin: .07rem 0 .25rem;}

    .more5{ width: 1.2rem; height: .42rem; font-size: .14rem;}

    .ls3 .a{ border-radius: 0.1rem;}

    .ls4W{width: calc(100% + 15px);}

    .ls4 p{ margin: .25rem 0 0;}
    .ls4 .txt{ padding: .25rem .25rem 0;}
    .ls4 .a{height: 86vw;}
    .ls4 h6{ left: .25rem; right: .25rem; bottom: .25rem;}

    .ls4W .swiper-scrollbar{ margin: .3rem 0 0;}

    .tit4{ margin-bottom: .25rem;}
    .tit4 h3{ font-size: .26rem;}
    .ls3 h6{ font-size: .18rem;}
    .ls3 h4{ font-size: .22rem;}
    
}