@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.7) 100%);z-index: 1;height: 23vh;}
.banner .a{ display: block; position: relative; z-index: 1; overflow: hidden; }
.banner .imgBox{ overflow: hidden; width: 100%; }
.banner .imgBox .img{ padding-bottom: 100vh; 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: .6rem;z-index: 2;}
.banner .bottom .wp{align-items: center;justify-content: center;}
.banner .dots{ justify-content: flex-end; align-items: center; margin: 0 .2rem;}
.banner .dots span{width: .45rem;height: .45rem;background: none;font-size: .18rem;color: #fff;opacity: 1;margin: 0 .06rem !important;position: relative;z-index: 1;display: flex;align-items: center;justify-content: center;font-family: 'Abhaya Libre'; position: relative; z-index: 1;}

.banner .dots .progress{position: absolute;width: 100%;height: 100%;transform: rotate(-90deg);top: 0;right: 0;bottom: 0;left: 0;}
.banner .dots .progress circle{fill: none;stroke: #fff;stroke-width: 1px;stroke-dasharray: 88; stroke-dashoffset: 88; transition: none;}
.banner.on .dots span.active .progress circle{stroke-dashoffset: 0;transition: stroke-dashoffset 6s linear;}


.ar1{ font-size: .24rem; color: #fff; font-family: 'lib'; cursor: pointer;}

.pad1{ padding: .7rem 0; overflow: hidden;}
.more1{ font-size: .2rem; color: #999999; transition: .5s}

.tit1{align-items: flex-end;margin-bottom: .6rem;position: relative;}
.tit1 .ll{text-align: center;}
.tit1 .ll h4{font-size: .9rem;color: rgba(51,51,51,.1);text-transform: uppercase;line-height: 1;font-family: 'sys';white-space: nowrap;}
.tit1 .ll h3{margin: -.3rem 0 0;align-items: flex-end;/* justify-content: center; */}
.tit1 .ll h3 span{font-size: .48rem;color: #333;line-height: 1;margin: 0 .1rem;font-weight: normal;font-family: 'sys';}
.tit1 .ll h3 img{height: .08rem;}

.tit1c{ justify-content: center;}
.tit1c .ll h3{ justify-content: center}
.tit1c .more1{ position: absolute; right: 0}

.tit1w .ll h4{ color: rgba(255,255,255,.1);}
.tit1w .ll h3 span{ color: #fff}

.index1{ background: url(../images/in1_b.jpg) center no-repeat; background-size: cover; }
.index1 .left{ width: 7.85rem;}
.index1 .right{ width: calc(100% - 7.85rem - .6rem)}

.ls2W{position: relative;padding: 0;z-index: 1;}
.ls2W::before{content: "";position: absolute;top: 1.36rem;right: .5rem;bottom: 0;left: calc((100vw - 16rem)/2*-1);background: url(../images/ls2_b.jpg) center bottom no-repeat;background-size: cover; border-radius: 0 0 .4rem;}
.ls2Box{padding-bottom: 1.1rem;}
.ls2 .a{ display: block; position: relative;}
.ls2 .imgBox .img{ padding-bottom: 62.03%;}
.ls2 .imgBox::after{ content: ""; position: absolute; right: 0; bottom: 0; left: 0;}
.ls2 .txt{position: absolute;right: 0;bottom: 0;left: 0;padding: 0 .32rem .25rem;z-index: 1;}
.ls2 h6{color: #fff !important;}
.ls2 h4{color: #fff !important;margin: .15rem 0 0;}
.ls2 .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, 1) 100%);z-index: 1;height: 1.5rem;}

.dots1{justify-content: flex-end;align-items: center;padding: 0 1rem 0 0;position: absolute;right: 0;width: auto !important;left: auto !important;bottom: .44rem !important;z-index: 1;}
.dots1:before{content: "";position: absolute;right: 0;top: 50%;height: 1px;background: rgba(255,255,255,.4);left: .2rem;margin: -.5px 0 0;z-index: -1;}
.dots1 span{width: .12rem;height: .12rem;background: #7c7fb5;opacity: 1;margin: 0 .2rem !important;position: relative}
.dots1 span:after{content: "";position: absolute;top: -.06rem;right: -.06rem;bottom: -.06rem;left: -.06rem;border: #fff 1px solid;border-radius: 50%;opacity: 0;transition: .5s; background: #303284; z-index: -1}
.dots1 span.active{margin: 0 .25rem 0 .25rem !important;background: #fff;}
.dots1 span.active:nth-child(1){ margin-left: 0 !important}
.dots1 span.active:after{ opacity: 1}

.ls3{ padding: .2rem .3rem; background: #f7f7f7;}
.ls3 p{ margin: .15rem 0;}
.ls3 h6{ align-items: center}
.ls3 h6::before{content: "";flex: 1;height: 1px;background: #d0d0d0;margin: 0 .5rem 0 0;}

.ls4 li{ border-bottom: #d0d0d0 1px solid;}
.ls4 .a{ height: .76rem; align-items: center;}
.ls4 h4{ flex: 1;}
.ls4 h6{ width: auto; margin: 0 0 0 .15rem;}

.index2{ padding-top: 0 !important; background: url(../images/in2_b.jpg) center no-repeat; background-size: 100% auto;}
.index2 .left{ width: 47.5%;}
.index2 .right{ width: 47.5%;}

.ls5 li{ margin-bottom: .25rem;}
.ls5 .a{ position: relative; z-index: 1;/* height: 1.44rem;*/ height: 1.24rem; align-items: center; padding: 0 .4rem;}
.ls5 .a::before{ content: ""; position: absolute; top: .15rem; right: 0; bottom: 0; left: 0; border: rgba(51,51,51,.2) 2px solid; z-index: -1; transition: .5s; border-radius: .4rem 0 .4rem 0;}
.ls5 .a::after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/ls5_b.jpg) center no-repeat; background-size: cover; z-index: -1; transition: .5s; border-radius: .4rem 0 .4rem 0; opacity: 0;}
.ls5 h4{flex: 1;transform: translateY(.07rem);}
.ls5 h6{width: auto;margin: 0 0 0 .4rem;align-items: center;position: absolute;left: 0;top: 0;padding: 0 .1rem;background: transparent;backdrop-filter: blur(10px);transition: 0s;color: #303284;background: #fbfbfb\0;}
.ls5 h6 i{ font-size: .24rem; color: #303284; font-family: 'lib'; margin: 0 .1rem 0 0; font-weight: bold;}

.ls5 li:last-child{ margin-bottom: 0;}

.ls6W{ overflow: hidden;}
.ls6{overflow: hidden;margin: -.24rem 0;}
.ls6 .time{margin: 0 .16rem 0 0;text-align: center;position: relative;padding: .2rem 0 0;}
.ls6 .time:before{ content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: #d6d6d6; right: -.16rem}
.ls6 .time::after{content: "";position: absolute;top: .48rem;width: .1rem;height: .1rem;background: #303284;right: -.2rem;border-radius: 50vw;}
.ls6 .time h3{ font-size: .36rem; color: #9b7d3a; font-family: 'sys'; line-height: 1;}
.ls6 .time h6{ font-size: .16rem; color: #999; font-family: 'sys'; line-height: 1; margin: .1rem 0 0;}
.ls6 .rr{ flex: 1; overflow: hidden; padding: .34rem 0 .34rem .2rem; border-bottom: #d6d6d6 1px solid; align-items: center;}
.ls6 .imgBox{ width: 2.44rem; margin: 0 .4rem 0 0; box-shadow: .05rem .05rem 0 #d6d6e6; transition: .5s;}
.ls6 .imgBox .img{ padding-bottom: 75%;}
.ls6 .txt{ flex: 1; overflow: hidden;}
.ls6 h4{ margin-bottom: .2rem;}
.ls6 p{ margin: .12rem 0 0;}

.ls6 li:last-child .rr{ border-bottom: 0}

.index3{ background: rgba(48,50,132,.1);}
.index3 .left{ width: calc(100% - 6.82rem - .45rem);}
.index3 .right{ width: 6.82rem; position: relative; z-index: 1; padding: 0 0 0 .52rem;}
.index3 .right::before{ content: ""; position: absolute; top: -.8rem; right: calc((100vw - 16rem)/2*-1); bottom: -.8rem; left: 0; background: url(../images/in3_b.jpg) center no-repeat; background-size: cover; z-index: -1; transition: .5s;}

.ls7 .a{ align-items: center;}
.ls7 .time{margin: 0 .16rem 0 0;text-align: center;position: relative; margin: 0 .3rem 0 0;}
.ls7 .time h3{ font-size: .36rem; color: #9b7d3a; font-family: 'sys'; line-height: 1;}
.ls7 .time h6{ font-size: .16rem; color: #303284; font-family: 'sys'; line-height: 1; margin: .1rem 0 0;}
.ls7 .con{ flex: 1; overflow: hidden;}
.ls7 .imgBox{ width: 3.55rem; margin: 0 0 0 .36rem; }
.ls7 .imgBox .img{ padding-bottom: 64.50%;}
.ls7 .txt{ flex: 1; overflow: hidden;}
.ls7 p{ margin: .15rem 0 0;}

.ls8{ margin: .4rem -.2rem -.32rem;}
.ls8 li{ width: 50%; padding: 0 .2rem; margin-bottom: .32rem;}
.ls8 .a{height: 2.18rem;background: #fff;padding: 0 .32rem;flex-direction: column;justify-content: center; transition: .5s; position: relative; z-index: 1; }
.ls8 .a::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/ls8_b.jpg) center no-repeat; background-size: cover; opacity: 0; transition: .5s; z-index: -1; }
.ls8 .a::after{ content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: .06rem; background: #303284; transition: .5s;}
.ls8 h6{align-items: center;color: #999;margin: .46rem 0 0; }
.ls8 svg{ width: .3rem; height: .3rem; fill: #9b7d3a; transition: .5s;}

.ls9{ margin: -.3rem 0 0;}
.ls9 .a{ align-items: center; }
.ls9 .time{margin: 0 .16rem 0 0;text-align: center;position: relative; margin: 0 .3rem 0 0; }
.ls9 .time h3{ font-size: .36rem; color: #fff; font-family: 'sys'; line-height: 1;}
.ls9 .time h6{ font-size: .16rem; color: #fff; font-family: 'sys'; line-height: 1; margin: .1rem 0 0;}
.ls9 .txt{ flex: 1; overflow: hidden; padding: .28rem 0; border-bottom: rgba(255,255,255,.2) 1px solid; min-height: 1.24rem; display: flex; align-items: center;}
.ls9 h4{ color: #fff !important;}

.more1w{ color: #fff !important;}

.index4{ position: relative; z-index: 2}
.index4 .left, .index4 .right{ width: calc(50% - .29rem);}

.ls10{ margin: -.3rem 0 0;}
.ls10 .a{height: 1.32rem;align-items: center;position: relative;z-index: 1;}
.ls10 .a:before{content: "";position: absolute;background: url(../images/ls10_b.jpg) center no-repeat;background-size: cover;top: -1px;right: -.12rem;bottom: 1px;left: -.12rem;opacity: 0;transition: .5s;z-index: -1;border-radius: .3rem 0 .3rem 0;}
.ls10 .time{align-items: center;font-size: .24rem;color: #303284;font-family: 'sys'; margin: 0 .3rem 0 0; padding: 0 0 .36rem}
.ls10 .time h3{ transition: .5s}
.ls10 .time i{background: rgba(48, 50, 132, .1);display: flex;align-items: center;justify-content: center;border-radius: 50vw;font-size: .22rem;color: #303284;width: .36rem;height: .36rem;font-family: 'lib';margin: 0 .12rem 0 0;transition: .5s;}
.ls10 .txt{ flex: 1; overflow: hidden; border-bottom: #eaeaea 1px solid; height: 100%; display: flex; align-items: center;}

.ls11 .a{ background: #f5f4fb; align-items: center;}
.ls11 .imgBox{ width: 3.11rem; margin: 0;}
.ls11 .imgBox .img{ padding-bottom: 75.56%;}
.ls11 .txt{ padding: 0 .4rem; flex: 1; overflow: hidden;}
.ls11 p{ margin: .12rem 0 .32rem;}
.ls11 h6{ color: #9b7d3a;}

.ls12 .a{ align-items: center; }
.ls12 .time{margin: 0 .16rem 0 0;text-align: center;position: relative; margin: 0 .62rem 0 0; }
.ls12 .time h3{ font-size: .36rem; color: #9b7d3a; font-family: 'sys'; line-height: 1;}
.ls12 .time h6{ font-size: .16rem; color: #303284; font-family: 'sys'; line-height: 1; margin: .1rem 0 0;}
.ls12 .txt{flex: 1;overflow: hidden;padding: .28rem 0;border-bottom: #eaeaea 1px solid;min-height: 1.3rem;display: flex;align-items: center;}

.index5{background: url(../images/in5_b.png) center top no-repeat;background-size: 100% auto;padding-top: 12.8125vw;margin: -4.5vw 0 0;}
.index5 .left{ width: calc(100% - 7.78rem - .42rem);}
.index5 .right{width: 7.78rem;/*padding: .65rem 0 0;*/}

.ls13{ background: #fff; box-shadow: 0px 7px .2rem 10.24px rgba(87, 87, 87, 0.07); padding: 0 .54rem;}
.ls13 .a{ align-items: center;}
.ls13 .imgBox{ width: 1.05rem; margin: 0 .4rem 0 0;}
.ls13 .imgBox .img{ padding-bottom: 100%;}
.ls13 .txt{flex: 1;overflow: hidden;/*padding: .48rem 0;*/padding: .22rem 0;border-bottom: #eaeaea 1px solid;min-height: 1.05rem;display: flex;align-items: center;flex-direction: column;}
.ls13 h6{font-size: .16rem;color: #303284;font-family: 'sys';line-height: 1;margin: .2rem 0 0;}
.ls13 h4 font{ color: #9b7d3a;}

.ls13 li:last-child .txt{ border: none}

.ls14{ margin: 0 -.12rem;}
.ls14 li{ width: 50%; /*padding: 0 .12rem;*/padding: 0 .12rem .22rem .12rem;}
.ls14 .imgBox .img{ padding-bottom: 67.46%;background: #000;}
.ls14 .imgBox .img img{ opacity: .5}
.ls14 .ico{ width: .8rem; height: .8rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
.ls14 h4{font-size: .24rem;color: #fff !important;font-weight: 600;}
.ls14 .a{ display: block; position: relative;}
.ls14 .txt{position: absolute;right: 0;bottom: 0;left: 0;padding: 0 .3rem .25rem;}

.ls15{ margin: .24rem 0 0;}
.ls15 .a{ display: block; position: relative;}
.ls15 .txt{position: absolute;right: 0;bottom: 0;left: 0;padding: 0 .3rem .25rem;}
/*.ls15 .imgBox:after{content: "";background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);position: absolute;right: 0;bottom: 0;left: 0;height: 1.5rem;}*/
.ls15 .imgBox .img{padding-bottom: 56.25%;background: #000;}
.ls15 .imgBox .img img{ opacity: .5}
.ls15 .ico{ width: .8rem; height: .8rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
.ls15 h4{font-size: .24rem;color: #fff !important;font-weight: 600;}

.index6{ padding: .3rem 0 1.6rem;}

.index5-6{ background: url(../images/in6_b.png) center bottom no-repeat; background-size: 100% auto;}

.ls16 .imgBox .img{ padding-bottom: 50%;}

.ar2{ align-items: center; justify-content: center; margin: .32rem 0 0;}
.ar2 .arrow{ display: flex; align-items: center; cursor: pointer;}
.ar2 .cls-1{fill: none;stroke: #c5c5c5;stroke-linecap: round;stroke-linejoin: round;stroke-width: 2px;fill-rule: evenodd; transition: .5s;}
.ar2 .dots{ margin: 0 .6rem;}
.ar2 .dots span{ display: block; width: .12rem; height: .12rem; background: #9b7d3a; border-radius: 50%; margin: 0 .15rem; opacity: .1; transition: .5s;}
.ar2 .dots span.active{ opacity: 1;}

@media(min-width: 769px){
    .ls3 .a:hover h4{ font-weight: 600;}

    .ls5 .a:hover::before{ opacity: 0;}
    .ls5 .a:hover::after{ opacity: 1;}
    .ls5 .a:hover *{ color: #fff;}
    .ls5 .a:hover h6{ position: relative; margin: 0 0 0 .8rem;}
    .ls5 .a:hover h4{flex: 1;transform: translateY(0);}

    .ls6 .a:hover .imgBox{ box-shadow: .05rem .05rem 0 #303284;}

    .ls8 .a:hover::before{ opacity: 1;}
    .ls8 .a:hover::after{ background: #9b7d3a;}
    .ls8 .a:hover *{ color: #fff;}
    .ls8 .a:hover h6{ color: rgba(255,255,255,.7);}
    .ls8 .a:hover h6 svg{ fill: #fff;}

    .ls10 .a:hover:before{ opacity: 1}
    .ls10 .a:hover *{ color: #fff}
    .ls10 .a:hover .time i{ background: rgba(255,255,255,.1)}

    .ar2 .arrow:hover .cls-1{ stroke: #303284;}
}
@media(max-width: 769px){
    .banner .imgBox .img{ padding-bottom: 50%;}
    .banner .bottom{ bottom: .1rem;}
    .banner .dots span{width: .32rem;height: .32rem;margin: 0 !important; font-size: .14rem;}
    .banner:after{ height: .8rem}

    .pad1{ padding: .4rem 0;}

    .tit1{ margin-bottom: .25rem}
    .tit1 .ll h4{ font-size: .45rem;}
    .tit1 .ll h3 span{ font-size: .24rem;}
    .tit1 .ll h3{ margin: -.15rem 0 0;}
    .tit1 .ll h3 img{ height: .04rem}
    
    .more1{ font-size: .14rem}

    .index1 .left{ width: 100%;}
    .index1 .right{width: 100%;padding: .3rem 0 0;}
    .ls2W::before{left: -15px;border-radius: 0 0 .2rem;right: .3rem;top: .6rem;}
    .ls2Box{ padding-bottom: .4rem;}
    .dots1{bottom: .15rem !important;padding: 0 .5rem 0 0;}
    .dots1 span{margin: 0 .1rem !important;}
    .dots1 span.active{margin: 0 .15rem !important;}

    .ls4 .a{ height: .56rem}

    .ls3{ padding: .25rem 15px;}

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

    .ls5 li{ margin-bottom: .2rem;}
    .ls5 h6 i{ font-size: .2rem;}
    .ls5 h6{ background: #fff;}
    .ls5 .a::before{top: .1rem;border-radius: .2rem 0 .2rem 0;}
    .ls5 .a{ height: 1.2rem;}

    .ls6 .time h3{ font-size: .26rem;}
    .ls6 .time h6{font-size: .14rem;margin: .06rem 0 0;}
    .ls6{ margin: -.1rem 0;}

    .ls6 .imgBox{width: 100%;margin: 0 .05rem .2rem 0;}
    .ls6 .txt{ flex: auto; width: 100%;}
    .ls6 p{ margin: .02rem 0 0;}
    .ls6 h4{ margin-bottom: .1rem;}

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

    .ls7 .imgBox{width: 100%;margin: 0 0 .2rem 0;}
    .ls7 .txt{ flex: auto; width: 100%; order: 1;}
    .ls7 .time{ margin: 0 .2rem 0 0}
    .ls7 .time h3{ font-size: .26rem;}
    .ls7 .time h6{font-size: .14rem;margin: .06rem 0 0;}

    .ls8{ margin: .25rem -7px -.2rem;}
    .ls8 li{ width: 50%; padding: 0 7px; margin-bottom: .2rem;}
    .ls8 .a{padding: 0 15px;height: 1.5rem;}
    .ls8 h6{ margin: .1rem 0 0}
    .ls8 svg{ width: .2rem; height: .2rem}
    .ls8 .a::after{ height: .04rem}

    .index3 .right::before{right: -15px;top: 0;left: -15px;}
    .ls9{ margin: -.1rem 0 0;}
    .ls9 .txt{padding: .15rem 0;min-height: inherit;}
    .ls9 .time{ margin: 0 .2rem 0 0}
    .ls9 .time h3{ font-size: .26rem;}
    .ls9 .time h6{font-size: .14rem;margin: .06rem 0 0;}

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


    .ls10{ margin: -.1rem 0 0;}
    .ls10 .time i{width: .26rem;height: .26rem;font-size: .14rem;}
    .ls10 .time{font-size: .18rem;margin: .1rem .2rem 0 0;}
    .ls10 .a{ height: auto}
    .ls10 .txt{ padding: .15rem 0}

    .ls11 .imgBox{ width: 100%}
    .ls11 .txt{flex: auto;width: 100%;padding: .25rem 15px;}
    .ls11 p{ margin: .1rem 0 .2rem;}

    .ls12 .time{ margin: 0 .2rem 0 0}
    .ls12 .time h3{ font-size: .26rem;}
    .ls12 .time h6{font-size: .14rem;margin: .06rem 0 0;}
    .ls12 .txt{padding: .15rem 0;min-height: auto;}

    .ls6 .time{ margin-top: .12rem}
    .ls6 .time::after{ top: .36rem}
    .index2{ background: url(../images/in2_b.jpg) center bottom no-repeat; background-size: 100% auto;}

    .index5 .left{ width: 100%;}
    .index5 .right{width: 100%;padding: .4rem 0 0;}
.index5 .right .tit1w .ll h3 span{color:#333;}
.index5 .right .tit1 .ll h4{color: rgba(51, 51, 51, .1);}
.index5 .right .more1w{color:#999999 !important;}

    .ls13{ padding: 15px 15px;}
    .ls13 .imgBox{width: .7rem;margin: 0 .2rem 0 0;}
    .ls13 .txt{ padding: .2rem 0; min-height: auto;}
    .ls13 h6{ margin: .1rem 0 0; font-size: .14rem}

    .ls14{ margin: 0 -7px;}
    .ls14 li{ width: 50%; padding: 0 7px;}

    .ls15 .ico{ width: .5rem; height: .5rem}
    .ls15 .txt{ padding: 0 .2rem .15rem;}
    .index6{ padding: 0 0 .4rem}
    .ar2 .dots{ margin: 0 .2rem;}
    .ar2 .dots span{ margin: 0 .06rem;}
    .ar2 .arrow svg{ transform: scale(.6);}
    .ar2{ margin: .15rem 0 0;}
}