@charset "utf-8";

.bannerw .wp{ display: flex;align-items: flex-end;}
.bannerw{ position: relative; z-index: 1;height: 100vh; overflow: hidden;}
.bannerw:before{ content: ""; position: absolute; top: 0; right: 0; bottom: -1.84rem; left: 0;background: url(../images/bannerw.jpg) center no-repeat;background-size: auto;background-size: cover;}
#banner{position:relative;z-index:1;width: 93%;margin: 0 0 0 0.5rem;}
#banner:before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: -100vw; background: #187159}
#banner .swiper, .bannerw .wp{height:100%;}
#banner .swiper-slide .wp{align-items:flex-start;padding-top:10rem;justify-content:flex-start}#banner .swiper-slide{overflow:hidden}
#banner .slide-inner{position:absolute;width:100%;height:100%;left:0;top:0;background-size:cover;background-position:center;background-repeat:no-repeat!important}#banner .animate01{opacity:0}
#banner .swiper-slide.swiper-slide-active .animate01{animation:enter4 1s ease forwards .3s}
#banner .a{ padding-bottom: 53%;position: relative;}
#banner .swiper-slide .bg{position:absolute;transition:1s;left:0;top:0;width:100%;height:100%;background-size: cover !important;}#banner .swiper-slide.swiper-slide-active .bg0{animation:bganim0 1.5s forwards ease}
#banner .swiper-slide.swiper-slide-active .bg1{animation:bganim1 1.5s forwards ease}
#banner .swiper-slide.swiper-slide-active .bg2{animation:bganim2 1.5s forwards ease}
#banner .swiper-slide.swiper-slide-active .bg3{animation:bganim3 1.5s forwards ease}
.bn_bot .arrbox{display:flex;justify-content:center;align-items:center;position: absolute;right: -236px;bottom: 0;width: 236px;height: 88px;}
.bn_bot .arrbox .arr{cursor:pointer;width: 88.5px;height: 88.5px;display: flex;align-items: center;justify-content: center;position: relative;z-index: 1;}
.bn_bot .arrbox .arr img{ width: .35rem; pointer-events: none;}
.bn_bot .arrbox .arr.prev img{ /*! transform: rotateY(180deg) */}
.bn_bot .arrbox .arr .mouse-hover-path{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;}
.circle-timer{height: 88px;width: 88px;stroke-width: 1px;stroke-dasharray: 0;stroke-dashoffset: 0;stroke: #4b575c;transform: translate(-50%,-50%) rotate(-125deg);position: absolute;top: 50%;left: 50%;opacity: 0;}
.circle-timer:hover{ opacity: 1}
 
.circle-timer:hover .progress{
    animation: rotate1 1000ms linear both;
}
@keyframes rotate1{
    from {
        stroke-dashoffset: 276.32px;
    }
    to {
        stroke-dashoffset: 0px;
    }
}

.bn_bot .dots{ position: absolute;  bottom: .1rem;left: -.7rem;width: .64rem;display: flex;flex-direction: column;text-align: center;font-size: 0;color: rgba(255,255,255,.8);font-family: "PingFang SC","PingFang SC-Regular",苹方;height: 1.3rem;justify-content: space-between;}
.bn_bot .dots:before{ content: ""; position: absolute; width: .36rem; height: 1px; background: #fff;transform: translate(-50%, -50%) rotate(-40deg);top: 50%;left: 50%;}
.bn_bot .dots span{ font-size: .48rem; color: rgba(255,255,255,.5);font-weight: bold;font-family: "PingFang SC";line-height: 1;}
.bn_bot .dots span.swiper-pagination-current{ color: rgba(255,255,255,1);}

@keyframes bganim0{from{transform:scale(1.05)}to{transform:scale(1)}}
@keyframes bganim1{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 66.666% 0 0)}}@keyframes bganim2{from{clip-path:inset(0 66.666% 0 33.333%)}to{clip-path:inset(0 33.333% 0 33.333%)}}
@keyframes bganim3{from{clip-path:inset(0 33.333% 0 66.666%)}to{clip-path:inset(0 0 0 66.6666%)}}

.home1{ padding: 1.4rem 0 .7rem; overflow: hidden;}
.home1 .left{ padding: 0 .5rem .3rem; width: 63%; position: relative; z-index: 1;}
.home1 .line{ background: #cccccc; position: absolute; transition: 1s}
.home1 .line.line1{ width: 1px; height: 0; top: 0; left: 0;}
.home1 .line.line2{ width: 0; height: 1px; bottom: 0; left: .26rem; transition-delay: 1.3s;}
.home1 .line.line3{ width: 1px; height: 0; bottom: .26rem; right: 0; transition-delay: 2.6s;}

[data-aos="miso_line"].aos-animate .line.line1{ height: calc(100% - .26rem)}
[data-aos="miso_line"].aos-animate .line.line2{ width: calc(100% - .26rem*2)}
[data-aos="miso_line"].aos-animate .line.line3{ height: calc(100% - .26rem)}

.home1 .jia{ width: .15rem; height: .15rem;  position: absolute; transform: rotate(-360deg); opacity: 0; position: absolute;}
.home1 .jia1{ bottom: -.065rem; left: -.075rem; transition: .3s 1.3s; }
.home1 .jia2{ bottom: -.065rem; right: -.075rem; transition: .3s 2.3s; }
.home1 [data-aos="miso_line"].aos-animate .jia{ transform: rotate(0deg); opacity: 1;}

.list3 h4{ font-size: .24rem;margin: .2rem 0 .4rem;}

.home1 .right{ padding: 0 .5rem .3rem; width: calc(100% - 63% - .64rem); position: relative; z-index: 1;}

.list4 li{ margin-bottom: .35rem}
.list4 li:last-child{ margin-bottom: 0}
.list4 .img{ margin-bottom: .2rem}
.list4 h6{ position: relative; z-index: 1;}
.list4 h6::before{ content: ""; position: absolute; left: 1.1rem; bottom: .05rem; right: 0; background: #cccccc; height: 1px;}
.list4 h4{ margin: .06rem 0 0}

.list5{ margin: 0 -1.7vw;}
.list5 li{ width: 33.33%; padding: 0 1.7vw; margin-bottom: .45rem;}
.list5 .a{ border-top: #cccccc 1px solid; padding: .38rem 0;  position: relative; z-index: 1;}
.list5 .a:after{ content: ""; position: absolute; top: 0; left: 0; width: 0; transition: .5s;height: 4px; top: -2px; background: #236349}
.list5 .time{ width: .8rem;}
.list5 .time h6{ font-size: .18rem; color: #1b1b1b; font-family: "PingFang SC"; margin: .04rem 0;}
.list5 .time h3{ font-size: .48rem; color: #1b1b1b; font-family: "PingFang SC";}
.list5 .txt{ width: calc(100% - .8rem);}
.list5 h6{ display: flex; align-items: center; font-size: .2rem; color: #333333; font-family: Constantia;text-transform: uppercase; margin-top: .25rem;font-weight: normal;}
.list5 h6 img{ height: .18rem; margin: 0 .15rem 0 0}

.home2{ padding: 0 0 .5rem; overflow: hidden;}

.home3{ background: #f2f3f9; overflow: hidden; position: relative; z-index: 2;}
.home3 .bg1{ position: absolute; top: 0; right: 0; bottom: 0; width: 55.625%;z-index: 1;}
.home3 .bg1:before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #1a5a49; z-index: -1; transform: skewX(-25deg); transform-origin: left bottom}
.home3 .bg1:after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/home3_b.png) right bottom no-repeat; background-size: 14.27vw auto; z-index: -1;}
.home3 .wp{ align-items: center;}
.home3 .tit1{ margin: .4rem 0 -.46rem;}
.home3 .tit1:before{ top: 2.56rem; right: .08rem}
.home3 .tit1 h6{ position: relative;margin: -.7rem 0 0 -.72rem;}

.home3 .left{ padding: 0 0 .32rem .78rem; width: 9.1rem; position: relative; z-index: 1;}
.list6Box{ margin: .5rem 0 0;}
.list6{ background: #fff;}
.list6 .img .imgLi{ padding-bottom: 57%;}
.list6Box .bn_bot{ position: relative;width: 236px;height: 88px;margin: .24rem 0 0;}
.list6Box .bn_bot .arrbox{ left: 0;width: 100%;justify-content: flex-start;}

.home3 .right{ padding: .7rem 0 0; width: calc(100% - 9.1rem - .64rem); position: relative; z-index: 1;}

.list7{  flex-direction: column; height: 5.34rem\0;}
.list7 li{ padding: 0 .5rem 0 .65rem; position: relative; z-index: 1;width: 100%;}
.list7 li::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; background: url(../images/list7_bg.png) center no-repeat; background-size: cover; z-index: 1; pointer-events: none; opacity: 0; width: 0; transition: .5s;}
.list7 .a{ display: flex; align-items: center;height: 100%;padding: .2rem 0;position: relative;z-index: 1;flex-direction: column;height: 1.2rem\0;}
.list7 .a:before{ content: ""; position: absolute; bottom: 0; right: 0; left: 0; height: 2px; background: rgba(255,255,255,.2)}
.list7 li:last-child .a:before{ display: none}
.list7 h4{ color: #fff !important; margin: .06rem 0}
.list7 p{ color: #fff; margin: .1rem 0 0}

.list7 li p{ height: .27rem; opacity: .5}
.list7 li:hover::before{ width: 100%; opacity: 1;}

.home4{ padding: 1rem 0; overflow: hidden;}
.list8Box{ width: calc((100vw - 15rem)/2 + 100%); padding: .5rem 0 .12rem;height: 5rem; cursor: url(../images/qh11.png), auto;}
.list8 li{ width: 5.46rem; transition: .5s;}
.list8 .a{ display: block; cursor: url(../images/qh11.png), auto;}
.list8 .img{ transition: .5s}
.list8 .img .imgLi{ padding-bottom: 50.91%}
.list8 .txt{ margin: .24rem 0 0; height: 1.36rem; border-left: #333333 1px solid; padding: .04rem 0 .08rem .4rem;display: flex;flex-direction: column;justify-content: space-between; transition: .5s;}
.list8 h4{ font-size: .24rem;}

@media(min-width: 1024px){
    .list5 .a:hover:after{ width: 100%; }
    .list8 li:hover{ width: 5.9rem; transform: translateY(-.5rem);}
    .list8 li:hover .img .imgLi{ padding-bottom: 55.55%}
    .list8 li:hover .txt{ transform: translateY(.12rem);}

    .list8 .a:hover .img{ box-shadow: 0 .2rem .3rem rgba(0,0,0,.1)}
}
@media(max-width:769px){
    .bannerw{ height: auto; padding: 1.5rem 0 0;overflow: visible;margin-bottom: .3rem;}
    .bannerw::before{ bottom: -0.8rem;}
    #banner{ width: 100%;margin: 0;}
    .bn_bot .arrbox{ bottom: -1rem;right: auto;left: 50%;transform: translateX(-50%) scale(.6);}
    #banner .swiper{ overflow: visible}

    .bn_bot .dots{ display: none;}
    
    .home1{ padding: .6rem 0 .5rem;}

    .home3 .left{ padding: 0;width: 60%;}
    .home3 .right{ width: 40%}
    .home3 .more1 .a1{ color: #fff}
    .home3 .bg1{ width: 70%}
    
    .list7 .a{ padding: .1rem 0}
    .home3{ padding: .3rem 0; background: #1a5a49;}
    
    .list7 li.active p{ height: 0; opacity: 0}
    .list8Box{ width: 100%;padding: 0;}
    
    .home1 .line.line1{ height: calc(100% - .26rem)}
    .home1 .line.line2{ width: calc(100% - .26rem*2)}
    .home1 .line.line3{ height: calc(100% - .26rem)}
    
    .home1 .jia{ transform: rotate(0deg); opacity: 1;}
    
    .list8Box{ height: auto}
}
@media(max-width: 769px){
    .home1 .left{ width: 100%;padding: 0 .2rem .2rem;}
    .home1 .right{ width: 100%;margin: .2rem 0 0;padding: 0 .2rem .2rem;}

    .list5 li{ width: 50%;}
    
    .home3 .left{ width: 100%}
    .home3 .right{ width: 100%;margin: .2rem 0 0;padding: 0;}
    .list6Box .bn_bot{ display: none}
    
    .list7 li{ padding: 0 .2rem}

    .home3 .tit2 h3{ color: #fff;}
    .list6Box{ margin: 0;}

    .list8 li{ width: 3rem;}
    .list8 .txt{ padding: 0 0 0 .25rem; height: 1rem}
    
    .home4{ padding: .5rem 0}
    .list5 .a{ padding: .25rem 0}
    .list5 h6{ margin: .15rem 0 0; font-size: .16rem}
    .list5 h6 img{ height: .14rem}

    .home2{ padding: 0 0 .4rem;}
}
@media(max-width: 560px){
    .list5 li{ width: 100%;margin-bottom: 0;}
    .list5 .time h3{ font-size: .36rem}
    
}