@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(86,183,226,.25) 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: calc(100vh - 192px);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 .dots{ position: absolute; right: 0; bottom: .4rem; left: 0; z-index: 2; text-align: center;justify-content: center; }
.banner .dots span{background: url(../images/dots1.png) no-repeat center center;width: .44rem;height: .44rem;margin: 0 .08rem !important;cursor: pointer;opacity: .5;background-size: 100% 100%;}
.banner .dots span.active{ opacity: 1;}

.banner .banner-pro.ani{-webkit-animation-name: anil;animation-name: anil;-webkit-animation-duration: 6s;animation-duration: 6s;-webkit-animation-timing-function: linear;animation-timing-function: linear;width: 100%;}
.banner .banner-pro {position: absolute;left: 0;bottom: 0;height: auto;width: 0;border-top: .05rem solid #3fc7ff;z-index: 9;}

@-webkit-keyframes anil{0%{width:0}100%{width:100%}}
@keyframes anil{0%{width:0}100%{width:100%}}

.ar1{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer;}
.ar1.prev{ left: 3%; }
.ar1.next{ right: 3%; }
.ar1 svg{ width: .44rem; height: .44rem; opacity: .24; transition: .5s;}

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

.index1 .left, .index1 .right{ width: calc((100% - 6.44rem)/2 - .6rem)}

.tit1{ margin-bottom: .36rem; align-items: center;}
.tit1 .ll{ align-items: center;}
.tit1 .ll span{font-size: .36rem;color: #333;margin: 0 0 0 .1rem;font-family: 'sys';}    
.tit1 .ll i{font-size: .4rem;color: #1079cd;font-family: "iconfont";}
.index1 .center{ width: 6.44rem;}

.more1{ align-items: center; font-size: .14rem; color: #b3b3b3; transition: .5s;}
.more1 i{ font-size: .18rem; font-family: "iconfont"; margin: 0 0 0 .06rem;}

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

.ls1{ margin: -.1rem 0 0;}
.ls1 .a{ align-items: center; padding: .125rem 0; }
.ls1 li{border-bottom: #dadada 1px solid;margin-bottom: .15rem;}
.ls1 .time{ margin: 0 .32rem 0 0; align-items: baseline;}
.ls1 .time big{ font-size: .24rem; color: #1079cd; font-weight: bold;}
.ls1 .time small{ font-size: .12rem; color: #8c8c8c;}
.ls1 .txt{ flex: 1; overflow: hidden;}

.ls2Box{ overflow: visible; box-shadow: -0.551px -1.923px .22rem 3.51px rgba(0, 0, 0, 0.11);}
.ls2 .txt{ background: #fff; height: 1.2rem; padding: 0 .34rem; flex-direction: column; justify-content: center; }
.ls2 .time{width: .6rem;position: relative;z-index: 1;flex-direction: column;align-items: center;font-size: .7rem;color: #fff;font-family: 'iconfont';padding: .36rem 0 0;margin: -.7rem .2rem 0 0;}
.ls2 .time::before{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1}
.ls2 .time h3{font-size: .3rem;color: #1079cd;font-weight: bold;line-height: 1.1;}
.ls2 .time h6{ font-size: .12rem; color: #8c8c8c;}
.ls2 .txt .top{align-items: flex-end;width: 100%;margin: -.1rem 0 0;}
.ls2 .txt .con{ flex: 1; overflow: hidden;}
.ls2 h4{ font-size: .18rem; color: #000; font-weight: bold}
.ls2 p{ margin: .04rem 0}

.ls2Box .dots{position: absolute;right: 0;bottom: .15rem;z-index: 2;padding: 0 .15rem;justify-content: flex-end;}
.ls2Box .dots span{ background: url(../images/dots1_b.png) center center no-repeat; background-size: 100% 100% !important; width: .15rem; height: .17rem; margin: 0 .05rem !important; cursor: pointer; opacity: 1; transform: scale(.8);}
.ls2Box .dots span.active{ transform: scale(1); background: url(../images/dots1_bs.png) center center no-repeat;}

.ls3{margin: 0;}
.ls3 li{width: 25%;padding: 0;}
.ls3 .a{ display: block; position: relative; padding: 0 0 0 .14rem;}
.ls3 .txt{ position: absolute; left: 0; top: .12rem; background: #e8332d; line-height: .46rem; padding: 0 .38rem;}
.ls3 .txt::before{content: "";position: absolute;bottom: 100%;left: 0;border-bottom: #a10e08 .07rem solid;border-left: transparent .14rem solid;}
.ls3 h4{ font-size: .22rem; color: #fff !important; font-weight: bold; }
.ls3 .imgBox .img{ padding-bottom: 61%;}

.ls3 li:nth-child(4n-2) .txt{ background: #b68126;}
.ls3 li:nth-child(4n-2) .txt:before{ border-bottom: #9d6b16 .07rem solid;}
.ls3 li:nth-child(4n-1) .txt{ background: #19b8b2;}
.ls3 li:nth-child(4n-1) .txt:before{ border-bottom: #12a19c .07rem solid;}
.ls3 li:nth-child(4n) .txt{ background: #1079cd;}
.ls3 li:nth-child(4n) .txt:before{ border-bottom: #0b5590 .07rem solid;}

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

.ls4 li{border-bottom: #e9e9e9 1px solid;margin-bottom: .08rem;padding: .15rem 0;}
.ls4 i{ font-size: .2rem; color: #dedede; font-family: 'iconfont'; margin: 0 .1rem 0 0; transition: .5s;}
.ls4 .a{ align-items: center}
.ls4 .ll, .ls4 h4{flex: 1;overflow: hidden;align-items: center;}
.ls4 h6{ width: auto; margin: 0 0 0 .15rem}

.index4{ padding-top: 0 !important;}

.ls5 .imgBox .img{ padding-bottom: 81.96%;}

.index3-4{ background: url(../images/wawa.png) center 36% no-repeat; background-size: 100% auto; }

@media(min-width: 769px){
    .ar1:hover svg{ fill: #1079cd; opacity: 1;}

    .more1:hover{ color: #1079cd;}

    .ls4 .a:hover i{ color: #1079cd;}
}
@media(max-width: 769px){
    .banner .imgBox .img{ padding-bottom: 50%;}
    .banner .dots span{ width: .24rem; height: .24rem}

    .index1 .left, .index1 .right{ width: 100%;}
    .index1 .center{width: 100%;padding: 0;order: -1;}

    .pad1{ padding: .4rem 0}
    .index1 .left{ padding: .25rem 0}
    .ls2 .txt{height: 1.4rem;padding: 0 15px .2rem;}

    .tit1{ margin-bottom: .2rem}
    .tit1 .ll i{ font-size: .28rem}
    .tit1 .ll span{ font-size: .24rem}
    .ls1 li{ margin-bottom: 0}
    .ls1 .time{ margin-right: .2rem}

    .ls3{}
    .ls3 li{width: 50%;margin-bottom: .2rem}

    .index2{ padding: 0 0 .15rem}

    .index3 .left{ width: 100%}
    .index3 .left:first-child{ margin-bottom: .25rem}
    .ls4 li{ margin-bottom: 0}
    .ls4 i{ color: #1079cd;}
    
} 

@media(max-width: 456px){
    .ls3 li{ width: 100%;}
}