@charset "utf-8";

.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.5) 100%);z-index: 1;height: 8vw;}
.banner .a{ display: block; position: relative; z-index: 1; overflow: hidden; }
.banner .imgBox{ overflow: hidden; width: 100%; }
.banner .imgBox .img{ padding-bottom: 35.41%; transition: 0s; }
.banner.on ul li.swiper-slide-active .a .imgBox img, .banner.on ul li.swiper-slide-duplicate-active .a .imgBox img, .banner.on ul li.swiper-slide-prev .a .imgBox img{ animation: sca 6s linear 0s normal both;}
@keyframes sca {
    0% {
        transform: scale(1.06);
    }
    100% {
        transform: scale(1);
    }
}

.banner .bottom{position: absolute;right: 0;left: 0;bottom: .35rem;z-index: 2;}
.banner .dots{ justify-content: flex-end; align-items: center;}
.banner .dots span{width: auto;height: auto;background: none;font-size: .2rem;color: rgba(255,255,255,.6);opacity: 1;margin: 0 0 0 .48rem !important;position: relative;z-index: 1}
.banner .dots span:before{content: "";position: absolute;top: 50%;right: -.38rem;width: .3rem;height: 1px;background: rgba(255,255,255,.6);background-size: cover;transition: .5s;}
.banner .dots span:after{content: "";position: absolute;top: 50%;right: -.12rem;width: .05rem;height: .05rem;background: #fff;background-size: cover;opacity: 0;transition: .5s;margin: -.02rem 0 0;border-radius: 50vw;}
.banner .dots span:last-child::before, .banner .dots span:last-child::after{ display: none;}

.banner .dots span.active{ color: #fff}
.banner .dots span.active:after{ opacity: 1}

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

.b_body{position: relative;z-index: 1;}
.b_body::before{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url(../images/b_body1.png) center top no-repeat;background-size: 100% auto;z-index: -1;}
.b_body::after{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url(../images/b_body2.png) center bottom no-repeat;background-size: 100% auto;z-index: -1;}

.tit1{ align-items: flex-end; margin-bottom: .5rem;}
.tit1 .ll{ text-align: center}
.tit1 .ll h4{font-size: .8rem;color: #fff;text-transform: uppercase;line-height: 1;}
.tit1 .ll h3{margin: -.5rem 0 0;align-items: flex-end;justify-content: center;}
.tit1 .ll h3 span{ font-size: .4rem; color: #333; line-height: 1; margin: 0 .2rem; font-weight: normal;}
.tit1 .ll h3 img{ height: .21rem;}

.tit1c{ justify-content: center;}
.more1W{ justify-content: center;}
.more1{ width: 1.2rem; height: .44rem; border: 1px solid rgba(10,87,169,.4); align-items: center; justify-content: center; border-radius: 50vw; font-size: .18rem; color: #0A57A9; transition: .5s;}

.index1 .left{ width: 8.36rem;}
.index1 .right{ width: calc(100% - 8.36rem - .46rem);}

.ls1Box{ background: #fff; box-shadow: 0px 2px 16px 0px #DEDEDE;}
.ls1 .a{ display: block; position: relative;}
.ls1 .imgBox .img{ padding-bottom: 56.33%;}
.ls1 .imgBox:after{ content: ""; position: absolute; right: 0; bottom: 0; left: 0; background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, transparent 100%); height: .85rem}
.ls1 .txt{ height: 1.56rem; background: #fff; padding: 0 .3rem; align-items: center}
.ls1 .time{background: url(../images/time_b.svg) center no-repeat;background-size: cover;width: .78rem;height: .95rem;flex-direction: column;justify-content: center;align-items: center;padding: 0 0 .15rem;color: #fff;margin: .1rem .36rem 0 0;}
.ls1 .time h3{ font-size: .3rem; }
.ls1 .time h6{ font-size: .14rem; margin: .02rem 0 0}
.ls1 .con{ flex: 1; overflow: hidden; padding: 0 1.5rem 0 0;}
.ls1 p{ margin: .1rem 0 0}

.ls1Box .dots{ position: absolute; right: .3rem; bottom: .3rem; justify-content: flex-end; z-index: 2;}
.ls1Box .dots span{ width: .4rem; height: .04rem; background: rgba(255,255,255,.8); border-radius: 50vw; opacity: 1; margin: 0 0 0 .1rem !important; transition: .5s;}
.ls1Box .dots span.active{ background: #FCB647}

.ar1{width: .94rem;position: absolute;right: .3rem;bottom: .6rem;z-index: 2; }
.ar1 .arrow{width: 36px;height: 36px;border: #0A57A9 1px solid;border-radius: 50vw;justify-content: center;align-items: center; transition: .5s; cursor: pointer}
.ar1 .arrow svg{width: 21px;height: 5px;fill: #0A57A9; transition: .5s}

.ar1 .arrow.next svg{ transform: rotateY(180deg)}

.ls2{ height: 6.26rem; background: #fff; box-shadow: 0px 2px 16px 0px #DEDEDE; flex-direction: column;}
.ls2 li{ flex: 1; width: 100%; position: relative; z-index: 1; transition: .5s;}
.ls2 li::before{ content: ""; position: absolute; background: #979797; left: .38rem; right: .38rem; bottom: 0; height: 1px; opacity: .2; }
.ls2 .a{ padding: 0 .38rem; align-items: center; height: 100%; position: relative; z-index: 1;}
.ls2 .a::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(../images/ls2_b.jpg) center no-repeat; background-size: cover; z-index: -1; opacity: 0; transition: .5s;}
.ls2 .time{border: 1px solid #0A57A9; border-radius: .04rem;width: .7rem;height: .7rem;flex-direction: column;justify-content: center;align-items: center;padding: 0;color: #0A57A9;margin: 0 .25rem 0 0;}
.ls2 .time h3{ font-size: .3rem; }
.ls2 .time h6{ font-size: .14rem; margin: .02rem 0 0}
.ls2 .con{ flex: 1; overflow: hidden; padding: 0;}
.ls2 p{ margin: 0 0 0; height: 0;}

.ls2 li:last-child::before{ display: none;}

.ls3 .a{ align-items: center;}
.ls3 .imgBox{ width: 2.74rem;}
.ls3 .imgBox .img{ padding-bottom: 62.40%;}
.ls3 .txt{ width: calc(100% - 2.74rem - .25rem);}
.ls3 h6{ align-items: center; margin: .14rem 0 .3rem;}
.ls3 h6 i{ font-size: .18rem; color: #0A57A9; font-family: 'lib'; margin: 0 .1rem 0 0;}

.ls3Box .dots{ justify-content: flex-start; z-index: 2;}
.ls3Box .dots span{ width: .07rem; height: .07rem; background: #CDCDCD; border-radius: 50vw; opacity: 1; margin: 0 .1rem 0 0 !important; transition: .5s;}
.ls3Box .dots span.active{ background: #0A57A9}

.index2{ padding-top: 1.45rem;}
.index2 .left, .index2 .right{ padding: .4rem; background: #fff; background: linear-gradient(180deg, #E9F6FF 0%, #FFFFFF 50%); box-shadow: 0px 14px 22px 0px rgba(210, 210, 210, 0.1844); width: calc(50% - .2rem);}
.ls4{ margin: .05rem 0 .25rem;}
.ls4 li{ border-bottom: 1px solid rgba(151,151,151,.2);}
.ls4 .a{height: .78rem;align-items: center;position: relative;}
.ls4 .a:after{content: "";position: absolute;bottom: -1px;left: 0;width: 0;height: 1px;background: #0A57A9;transition: .5s}
.ls4 h4{ flex: 1; }
.ls4 h6{ width: auto; margin: 0 0 0 .15rem;}

.index2 .right .ls4{margin: -.25rem 0 0;}
.index2 .right .ls3{ margin: .25rem 0 .25rem;}

.index2s .left .ls3{ margin: -.25rem 0 .25rem;}

.index2s .right .ls3{ margin: -.25rem 0 .25rem;}
.index2s .right .ls4{margin: 0 0 .25rem;}

.index3{ padding-top: 0 !important;}
.index3 .left, .index3 .right{ width: calc(50% - .2rem);}

.ls6 .a{ display: block; position: relative;}
.ls6 .imgBox .img{ padding-bottom: 68.71%;}
.ls6 .imgBox:after{ content: ""; position: absolute; right: 0; bottom: 0; left: 0; background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, transparent 100%); height: .85rem}
.ls6 .txt{ position: absolute; right: .4rem; bottom: .3rem; left: .4rem; z-index: 2; align-items: center;}
.ls6 h4{ flex: 1; color: #fff !important;}

.ls6Box .dots{ width: auto; margin: 0 0 0 .1rem;}
.ls6Box .dots span{ width: .4rem; height: .04rem; background: rgba(255,255,255,.8); border-radius: 50vw; opacity: 1; margin: 0 0 0 .1rem !important; transition: .5s;}
.ls6Box .dots span.active{ background: #FCB647}

.ls7{ background: #FFFFFF; box-shadow: 0px 2px 17px 0px rgba(10, 87, 169, 0.1317); padding: .3rem .4rem; height: 5.36rem;}
.ls7 li:last-child{ border-bottom: none;}

.index4{ padding-top: 0 !important; padding-bottom: 1.4rem;}
.ls8W{ position: relative; padding: 0 5%;}
.ls8 li{ text-align: center;}
.ls8 .ico{ position: relative; width: 1.43rem; margin: 0 auto; max-width: 100%;}
.ls8 .imgBox .img{ background: transparent; padding-bottom: 100%;}
.ls8 .ico>img{ width: .42rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.ls8 h4{ margin: .2rem 0 0;}

.ar2{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;}
.ar2.arrow{ font-size: .64rem; color: #575B66; font-family: 'lib'; opacity: .5; transition: .5s; cursor: pointer;}
.ar2.prev{ left: 0;}
.ar2.next{ right: 0;}

@media(min-width: 769px){
    .more1:hover{ background: #0A57A9; color: #fff;}
    .ar1 .arrow:hover{ background: #0A57A9}
    .ar1 .arrow:hover svg{ fill: #fff}

    .ls2 li:hover{ flex: 1.35; box-shadow: 0px 5px .22rem 0px rgba(10, 87, 169, 0.5669);}
    .ls2 .a:hover::before{ opacity: 1}
    .ls2 .a:hover .time{ border: #fff 1px solid; }
    .ls2 .a:hover *{ color: #fff;}
    .ls2 .a:hover p{ height: .46rem; margin: .1rem 0 0;}

    .ar2.arrow:hover{ color: #0A57A9; opacity: 1; }
    .ls4 .a:hover:after{ width: 100%}
}
@media(max-width: 769px){
    .banner .imgBox .img{ padding-bottom: 50%;}

    .pad1{ padding: .4rem 0;}

    .tit1{align-items: flex-end;margin-bottom: .25rem;}
    .tit1 .ll h4{font-size: .3rem;}
    .tit1 .ll h3{margin: -.2rem 0 0;}
    .tit1 .ll h3 span{font-size: .22rem;margin: 0 .08rem;}
    .tit1 .ll h3 img{ height: .15rem;}

    .index1 .left{ width: 100%}
    .index1 .right{width: 100%;padding: .4rem 0 0;}

    .ar1{position: relative;right: auto;left: 50%;transform: translateX(-50%);bottom: .15rem;}
    .ar1 .arrow{ transform: scale(.8)}
    .ls1 .con{ padding: 0;}
    .ls1 .time{ margin: 0 .2rem 0 0;}
    .ls1 .txt{ padding: 0 15px;}
    .more1{font-size: .14rem;width: .9rem;height: .32rem;}

    .ls2{height: 5.2rem;}
    .ls2 .a{ padding: 0 15px;}
    .ls2 .time{ margin: 0 .2rem 0 0;}
    .ls2 li::before{ left: 15px; right: 15px;}
    .index2{ padding-top: 0 !important;}

    .index2 .left, .index2 .right{width: 100%;padding: .4rem 15px;}
    .ls3 .imgBox{ width: 100%;}
    .ls3 .txt{width: 100%;padding: .2rem 0 0;}
    .ls4 .a{ height: .5rem}

    .index3 .left, .index3 .right{ width: 100%;}
    .index3 .right{ padding: .2rem 0 0;}
    .ls7{height: auto;padding: .15rem 15px;}
    .ls8 .ico{ width: .9rem;}
    .ls8 .ico>img{ width: .3rem;}
    .ls8 h4{ margin: .1rem 0 0;}
    .ar2.arrow{ font-size: .36rem;}

    .ls1Box .dots span, .ls6Box .dots span{ width: .15rem;}
    .ls6 .txt{ right: 15px; bottom: .15rem; left: 15px;}

    
}