@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:after{content: "";background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);position: absolute;right: 0;bottom: 0;left: 0;height: 2rem;}
.banner .imgBox .img{padding-bottom: calc(100vh - 1.8rem);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: .6rem;color: #fff !important;opacity: 0;font-weight: 600;line-height: 1.1;margin: .15rem 0 .25rem;position: relative;z-index: 1;}
.banner h3::before{content: "";position: absolute;width: 1rem;height: .12rem;background: #CA9844;bottom: .06rem;left: 80%;z-index: -1;}
.banner h4{font-size: .45rem;color: #fff !important;opacity: 0;font-weight: 600;position: relative;z-index: 1;}
.banner h4::before{content: "";position: absolute;width: 1rem;height: .12rem;background: #CA9844;bottom: .14rem;left: 59%;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: .4rem;left: 0;right: 0;justify-content: center;align-items: center;}
.banner .dots span{ padding: 0 .15rem !important;width: auto;height: auto;font-size: .2rem;color: #fff;background: none;opacity: .5 !important; transition: .5s; position: relative}
.banner .dots span:before{ content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: #fff; opacity: 0; transition: .5s}
.banner .dots span:after{ content: ""; position: absolute; right: 0; top: 50%; width: 0; height: 1px; background: #fff; opacity: 0; transition: .5s}

.banner .dots span.active{ opacity: 1 !important; padding: 0 .5rem !important; transform: scale(1.1);}
.banner .dots span.active:before, .banner .dots span.active:after{ width: .44rem; opacity: 1}

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

.home1 .left{ width: 50%;}
.home1 .right{ width: calc(50% - .6rem);}

.list1 .a{display: block;border-radius: 0 0 .2rem 0;overflow: hidden;}
.list1 .imgBox .img{ padding-bottom: 57.5%;}
.list1 .txt{height: 1.08rem;background: #43967C;flex-direction: column;justify-content: center;padding: 0 .8rem 0 .3rem;}
.list1 h6{ color: #fff;}
.list1 h4{ color: #fff !important; margin: .1rem 0 0;}

.arrow1{position: absolute;right: 0;bottom: 0;z-index: 1;width: .64rem;height: 1.08rem;flex-direction: column; background: #E5F0EC; border-radius: 0 0 .2rem 0; }
.arrow1 .arrow{height: 50%;display: flex;justify-content: center;align-items: center;font-size: .3rem;color: #fff;font-family: 'lib';background: #4FB88F; transition: .5s; cursor: pointer;}

.arrow1 .arrow.prev{ transform: translateX(-100%)}
.arrow1 .arrow.next{ border-radius: 0 0 .2rem 0}

.tit1{ align-items: center; margin-bottom: .5rem;}
.tit1 .ll{ width: 2.71rem;}
.tit1 .ll img{ width: 100%;}

.tit1w .more1{ color: #fff;}

.more1{ align-items: center; font-size: .18rem; color: #666666; align-items: center; transition: .5s;}
.more1 i{ width: .25rem; margin: 0 0 0 .05rem;}
.more1 i img{ width: 100%; animation: roted 5s infinite linear;}

.list2{margin: 0 -.3rem -.6rem;padding-top: .2rem;}
.list2 li{width: 50%;padding: 0 .3rem;margin-bottom: .6rem;}
.list2 p{ margin: .2rem 0 .25rem;}
.list2 h6{ align-items: center;}
.list2 h6 .line{ flex: 1; height: 1px; background: #43967C; margin: 0 .1rem 0 0;}

.home2{ background: url(../images/home2_b.jpg) center no-repeat; background-size: cover; background-size: cover; background-attachment: fixed; padding-bottom: 1.4rem;}

.list3{ margin: 0 -.25rem;}
.list3 li{ width: 33.33%; padding: 0 .25rem; margin-bottom: .52rem;}
.list3 .a{ background: rgba(67,150,124,.2); height: 1.62rem; padding: 0 .06rem .06rem 0; position: relative; z-index: 1; align-items: center; transition: .5s;}
.list3 .a::before{ content: ""; position: absolute; top: 0; right: .06rem; bottom: .06rem; left: 0; background: #fff; border-radius: 0 0 .2rem 0; z-index: -1; transition: .5s;} 
.list3 .txt{ width: 100%; padding: 0 .24rem;}
.list3 h6{align-items: baseline;border-bottom: 1px dashed rgba(67,150,124,.3);padding-bottom: .15rem;margin-bottom: .1rem;color: #9D9D9D;}
.list3 h6 big{font-size: .28rem;margin: 0 .1rem 0 0;color: #43967C; transition: .5s;}

.list3Box .dots{ justify-content: center; align-items: center;}
.list3Box .dots span{ width: .12rem; height: .12rem; background: rgba(67,150,124,.4); border-radius: 50vw; transition: .5s; opacity: 1; margin: 0 .07rem !important;}
.list3Box .dots span.active{ width: .2rem; background: rgba(67,150,124,1);}

.home3{background: url(../images/home3.png) center no-repeat;background-size: 100% 100%;margin: -1.2rem 0 0; padding: 1.4rem 0 1.6rem;}

.list4Box{ padding: .5rem 0; margin: -.3rem 0;}
.list4 li{ transition: .5s;}
.list4 .txt{ height: 1.62rem; background: #fff; padding: 0 .38rem; flex-direction: column; justify-content: center;}
.list4 p{ margin: .1rem 0 0}
.list4 h6{border-top: 1px solid rgba(67,150,124,.2);padding: .15rem 0 0;margin: .2rem 0 0;}
.list4 h6 .ll{ display: flex; align-items: center;}
.list4 h6 .ll img{ width: .18rem;}
.list4 h6 .rr{ opacity: 0; transition: .5s;}

.list4 li.swiper-slide-active{ transform: scale(1.09);}
.list4 li.swiper-slide-active h6 .rr{ opacity: 1;}

.list4Box .dots{ justify-content: center; align-items: center; margin: .7rem 0 0;}
.list4Box .dots span{ width: .12rem; height: .12rem; background: rgba(255,255,255,.4); border-radius: 50vw; transition: .5s; opacity: 1; margin: 0 .07rem !important;}
.list4Box .dots span::before{content: "";position: absolute;background: url(../images/more1s.png) center no-repeat;width: .16rem;height: .16rem;background-size: cover;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.list4Box .dots span.active{width: .2rem;background: rgba(67,150,124,1);position: relative;}

.home4 .left{ width: 9.5rem;}
.home4 .right{width: calc(100% - 9.5rem - .7rem);}
.list5{ margin: 0 -.2rem;}
.list5 li{ width: 50%; padding: 0 .2rem; margin-bottom: .4rem;}
.list5 .a{ display: block; position: relative; z-index: 1;}
.list5 .imgBox .img{ padding-bottom: 69.23%;}
.list5 .imgBox::after{content: "";position: absolute;right: 0;bottom: 0;left: 0;background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(82, 121, 243, 0) 100%);height: 28%;}
.list5 .txt{ position: absolute; right: 0; bottom: 0; left: 0; padding: 0 .25rem .15rem;}
.list5 h4{ color: #fff;}

.list5 li:nth-child(2), .list5 li:nth-child(4){ transform: translateY(-.36rem);}

.list6 li{ margin-bottom: .38rem}
.list6 .a{border-radius: 0 .2rem 0 .2rem;border: 1px dashed rgba(67,150,124,.6);height: 1.04rem; align-items: center; padding: 0 .32rem; transition: .5s;}
.list6 .time{ margin: 0 .2rem 0 0; text-align: center;}
.list6 .time h3{ font-size: .26rem; color: #43967C; transition: .5s;}
.list6 .time h6{ font-size: .14rem; color: #43967C; transition: .5s;}
.list6 .txt{ flex: 1; overflow: hidden; padding: 0 0 0 .2rem; position: relative;}
.list6 .txt::before{ content: ""; position: absolute; top: .05rem; left: 0; bottom: .05rem; width: 1px; background: #979797; opacity: .2; transition: .5s;}

@media(min-width: 1024px){
    .arrow1 .arrow:hover{ background: #DAB96B;}

    .more1:hover{ color: #DAB96B;}

    .list3 .a:hover{ background: #DAB96B;}
    .list3 .a:hover::before{ background: #43967C;}
    .list3 .a:hover *{ color: #fff;}
    .list3 .a:hover h6{ border-bottom: 1px dashed rgba(255,255,255,.3)}

    .list6 .a:hover{ border-radius: 0 .2rem 0 .2rem;background: #43967C;border: 1px dashed #43967C;box-shadow: 0px 2px 11px 0px rgba(67, 150, 124, 0.6746);}
    .list6 .a:hover *{ color: #fff;}
    .list6 .a:hover .txt::before{ background: #fff;}
}
@media(max-width: 1024px){
}
@media(max-width:769px){
    .banner .imgBox .img{ padding-bottom: 50%;}
    .banner .dots{ bottom: .2rem;}
    .banner .dots span{ font-size: .16rem;}
    .banner .dots span.active{ padding: 0 .25rem !important;}
    .banner .dots span.active:before, .banner .dots span.active:after{ width: .2rem;}

    .pad1{ padding: .4rem 0}

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

    .list3 li{ width: 100%; margin-bottom: .2rem;}

    .home4 .left{ width: 100%;}
    .home4 .right{width: 100%;padding: .2rem 0 0;}

    .arrow1{ width: .5rem;}
    .arrow1 .arrow{ font-size: .18rem;}

    .tit1{ margin-bottom: .25rem;}
    .tit1 .ll{width: 1.85rem;}
    .list2{margin: 0 -7px -.2rem;padding-top: 0;}
    .list2 li{width: 100%;padding: 0 7px;margin-bottom: .2rem;}
    .list2 p{ margin: .1rem 0 .15rem;}
    .list3 h6{ padding-bottom: .1rem;}

    .more1 i{ width: .2rem; font-size: .16rem;}

    .home2{/* padding-bottom: 1rem; */}
    .home3{margin: 0;/* padding-bottom: .8rem; */background: url(../images/home3.jpg) center no-repeat;background-size: cover;}

    .list4Box .dots{ margin: .25rem 0 0;}
    .list4 li.swiper-slide-active{ transform: scale(1)}

    .list4 .txt{ padding: 0 .25rem}
    .list4Box{ margin: -.5rem 0;}

    .list5{ margin: 0 -7px;}
    .list5 li{ width: 50%; padding: 0 7px; margin-bottom: .2rem;}
    .list5 .txt{ padding: 0 .15rem .1rem;}

    .list6 li{ margin-bottom: .2rem}
    .list6 .a{ padding: 0 .2rem;}

    .list5 li:nth-child(2), .list5 li:nth-child(4){ transform: translateY(0);}
    
} 
@media(max-width: 560px){
}