@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.4) 100%);z-index: 1;height: 23vh;}
.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.on ul li.swiper-slide-active .a .imgBox, .banner.on ul li.swiper-slide-duplicate-active .a .imgBox, .banner.on ul li.swiper-slide-prev .a .imgBox{ animation: sca 6s linear 0s normal both;}
@keyframes sca {
    0% {
        transform: scale(1.06);
    }
    100% {
        transform: scale(1);
    }
}

.banner .dots{z-index: 10;display: flex;justify-content: center;align-items: center;margin: -.15rem .2rem 0;position: absolute;flex-direction: column;left: auto;right: 4%;top: 1rem;width: auto;bottom: 0;}
.banner .dots span{width: .28rem;height: .28rem;background: none;font-size: .16rem;color: #fff;opacity: 1;margin: .175rem 0 !important;position: relative;z-index: 1}
.banner .dots span:before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:background-size: cover; transition: .5s;}
.banner .dots span:after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;opacity: 0;transition: .5s;}

.banner .dots span:nth-child(1):before{ transform: rotate(-90deg)}
.banner .dots span:nth-child(3):before{ transform: rotate(90deg)}
.banner .dots span:nth-child(1):after{ transform: rotate(-90deg)}
.banner .dots span:nth-child(3):after{ transform: rotate(90deg)}

.banner .dots span.active:before{ opacity: 0}
.banner .dots span.active:after{ opacity: 1}

.pad1{padding: .6rem 0;overflow: hidden;position: relative;z-index: 1;}

.banner .bg1s{position: absolute;top: 30vh;left: 0;width: 100%;max-width: 100%;background;animation: bgfubuki 100s linear infinite forwards;z-index: 10;background-size: auto 100%;transform: translateY(-50%);}
.banner .bg1s img.i1{ opacity: 0;}
.banner .bg1s img.i2{margin: -3% 0 0;}
@keyframes bgfubuki {
    0% {
      background-position: 0 0;
    }
    10% {
      background-position: -1000px 0;
    }
    20% {
      background-position: -2000px 0;
    }
    30% {
      background-position: -3000px 0;
    }
    40% {
      background-position: -4000px 0;
    }
    50% {
      background-position: -5000px 0;
    }
    60% {
      background-position: -6000px 0;
    }
    70% {
      background-position: -7000px 0;
    }
    80% {
      background-position: -8000px 0;
    }
    90% {
      background-position: -9000px 0;
    }
    100% {
      background-position: -10000px 0;
    }
}

.tit1{ margin-bottom: .35rem; align-items: center;}
.tit1 .ll{ font-size: .34rem; color: #008B8A; font-family: "思源宋体 Bold";font-weight: 700;}

.more1{ align-items: center;}
.more1 span{ font-size: .18rem; color: #008B8A; text-transform: uppercase; position: relative; display: inline-block; line-height: 1.75}
.more1 span:before{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(0, 191, 190, 0) -1%, #008B8A 100%); }
.more1 i{background: url(../images/more1.svg) center no-repeat;background-size: 100% 100%;width: .31rem;height: .31rem;display: flex;justify-content: center;align-items: center;font-size: .12rem;color: #008B8A;font-family: 'lib';font-weight: 600;transition: .5s;margin: 0 0 0 .1rem;position: relative;z-index: 1;}
.more1 i:after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #008B8A; z-index: -1; border-radius: 50vw; transition: .5s; opacity: 0}

.index0 .left{ width: calc(50% - .3rem);}
.index0 .right{ width: calc(50% - .3rem);}

.list1{ margin: 0 -.15rem;}
.list1 li{ width: 50%; padding: 0 .15rem; margin-bottom: .3rem;}
.list1 .imgBox .img{ padding-bottom: 56.21%;}

.list2 li{ border-bottom: 1px solid rgba(160,160,160,.2);}
.list2 .a{display: block;padding: .175rem 0;position: relative;z-index: 1; transition: .5s;}
.list2 .a::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/list2.jpg) center no-repeat; background-size: cover; z-index: -1; opacity: 0; transition: .5s;}
.list2 p{ height: 0; margin: .06rem 0;}

.list2 li.on .a{ padding: .175rem .22rem; box-shadow: 0px .07rem .18rem 0px rgba(0, 139, 138, 0.3717);}
.list2 li.on .a:before{ opacity: 1}
.list2 li.on p{ height: .56rem;}
.list2 li.on .a *{ color: #fff}

.tit2{ margin-bottom: .38rem;}
.tit2 .ll{ font-size: .24rem; color: #008B8A; font-family: "思源宋体 Bold";font-weight: 700;}

.indexb{ padding-top: 0 !important;}
.indexb .left{ width: 7.7rem;}
.indexb .right{ width: calc(100% - 7.7rem); padding: 0 0 0 .6rem;}

.list3Box{ overflow: visible;}
.list3 .a{ position: relative; justify-content: flex-end;}
.list3 .imgBox{ width: 5.66rem; position: absolute; top: 0; left: 0;}
.list3 .imgBox .img{ background: 62.72%;}
.list3 .txt{ width: 3.3rem; height: 3.72rem; background: #fff; box-shadow: 0px 8px .17rem 0px rgba(197, 197, 197, 0.5); margin: .7rem 0 0; padding: 0 .35rem; position: relative; z-index: 2; flex-direction: column; justify-content: center;}
.list3 h4{ color: #008B8A;}
.list3 .p{ width: 100%; margin: .3rem 0 .5rem;}
.list3 .p p{font-size: .16rem;color: #666;line-height: .34rem;position: relative;padding: 0 0 0 .3rem;}
.list3 .p p.p1::before{content: "";position: absolute;background: url(../images/list3_i1.png) center no-repeat;width: .18rem;height: .18rem;background-size: cover;left: 0;top: 50%;margin: -.09rem 0 0;}
.list3 .p p.p2::before{content: "";position: absolute;background: url(../images/list3_i2.png) center no-repeat;width: .18rem;height: .18rem;background-size: cover;left: 0;top: 50%;/* margin: -.09rem 0 0;*/}

.arrow1W{width: 100%;align-items: center;}
.arrow1W .dots{width: auto;font-size: .14rem;color: #666666;align-items: baseline;position: relative;bottom: auto;transform: translateX(-1.75rem);}
.arrow1W .dots::before{ content: ""; position: absolute; width: .92rem; height: 1px; background: #008B8A; top: 54%; left: calc(100% + .2rem);}
.arrow1W .dots span{font-size: .2rem;margin: 0 0 0 .04rem;}
.arrow1W .dots .swiper-pagination-current{ font-size: .3rem; color: #008B8A;}
.arrow1 .arrow{width: .29rem;height: .29rem;border: #C6C6C6 1px solid;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: .12rem;color: #C6C6C6;font-family: 'lib';margin: 0 0 0 .08rem; cursor: pointer; transition: .5s;}

.list4 li{ position: relative; border-bottom: 2px solid rgba(160,160,160,.2);}
.list4 li::after{content: "";position: absolute;right: 0;bottom: -2px;width: .4rem;height: 2px;background: #008B8A;}
.list4 .a{ flex-direction: column; height: 1.1rem; justify-content: center; transition: .5s;}
.list4 .a::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/list4_b.jpg) center no-repeat; background-size: cover; z-index: -1; opacity: 0; transition: .5s;}
.list4 h4{ margin: .15rem 0 0;}

.list5{ margin: 0 -.29rem 0; padding-top: .1rem;}
.list5 li{ width: 50%; padding: 0 .29rem; margin-bottom: .45rem;}
.list5 .a{ flex-direction: column; justify-content: center; height: 1.76rem; background: #FFFFFF; box-shadow: 0px 7px 15px 0px rgba(215, 215, 215, 0.4002); padding: 0 .25rem; position: relative; z-index: 1;}
.list5 .a::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;  z-index: -1; background: url(../images/list5_b.jpg) center no-repeat; background-size: cover; transition: .5s; opacity: 0;}
.list5 .a::after{ content: ""; position: absolute; top: .08rem; right: .08rem; bottom: .08rem; left: .08rem; border: 1px solid #008B8A; z-index: -1; opacity: .347;}
.list5 p{ margin: .1rem 0 .15rem;}

@media(min-width: 1024px){
    .more1:hover i{ color: #fff}
    .more1:hover i:after{ opacity: 1}

    .arrow1 .arrow:hover{ border: #008B8A 1px solid; color: #008B8A;}

    .list4 .a:hover{ padding: 0 .22rem; box-shadow: 0px .07rem .18rem 0px rgba(0, 139, 138, 0.3717);}
    .list4 .a:hover:before{ opacity: 1}
    .list4 .a:hover *{ color: #fff}

    .list5 .a:hover::before{ opacity: 1;}
    .list5 .a:hover::after{ border: #fff 1px solid;}
    .list5 .a:hover *{ color: #fff;}
}
@media(max-width: 1024px){
}
@media(max-width: 800px){
}
@media(max-width: 640px){
    .pad1{ padding: .4rem 0;}

    .index0 .left{ width: 100%;}
    .index0 .right{width: 100%;padding: .4rem 0 0;}
    .tit1 .ll{font-size: .24rem;max-width: calc(100% - 1.3rem);}
    .more1 span{ font-size: .15rem}
    .tit1{ margin-bottom: .25rem}

    .list3 .a{box-shadow: 0px 8px .17rem 0px rgba(197, 197, 197, 0.5);}
    .list3 .imgBox{ width: 100%; position: relative;}
    .list3 .txt{width: 100%;margin: 0;height: 2.8rem; box-shadow: none}

    .tit2{ margin-bottom: .2rem}
    .tit2 .ll{ font-size: .2rem}
    .arrow1W .dots{ transform: translateX(0);}
    .list4 h4{margin: .06rem 0 0;}
    .list4 .a{ height: .9rem;}
    .list3 .p{ margin: .15rem 0 .3rem}

    .list2 p{ margin: .02rem 0}

    .list5{ margin: 0 -7px 0; padding-top: .1rem;}
    .list5 li{ width: 100%; padding: 0 7px; margin-bottom: .15rem;}

    
} 
@media(max-width: 560px){
} 
.n_container{min-height:15.5rem}