@charset "utf-8";
@media(min-width: 1024px){
.fp-viewing-1 .header, .fp-viewing-2 .header,.fp-viewing-3 .header,.fp-viewing-4 .header,.fp-viewing-5 .header,.fp-viewing-6 .header,.fp-viewing-7 .header,.fp-viewing-8 .header{ background: rgba(0,101,85,.9);transform: translateY(-.44rem);}
.fp-viewing-1 .header .toplink,.fp-viewing-2 .header .toplink,.fp-viewing-3 .header .toplink,.fp-viewing-4 .header .toplink,.fp-viewing-5 .header .toplink,.fp-viewing-6 .header .toplink,.fp-viewing-7 .header .toplink,.fp-viewing-8 .header .toplink{ opacity: 0; visibility: hidden; transform: translateY(-1rem);}
.fp-viewing-1 .header::before, .fp-viewing-2 .header::before, .fp-viewing-3 .header::before, .fp-viewing-4 .header::before, .fp-viewing-5 .header::before, .fp-viewing-6 .header::before, .fp-viewing-7 .header::before, .fp-viewing-8 .header::before{ height: 0}
.fp-viewing-1 .header .topnav ul, .fp-viewing-2 .header .topnav ul, .fp-viewing-3 .header .topnav ul, .fp-viewing-4 .header .topnav ul, .fp-viewing-5 .header .topnav ul, .fp-viewing-6 .header .topnav ul, .fp-viewing-7 .header .topnav ul, .fp-viewing-8 .header .topnav ul{ height: .65rem;}
.fp-viewing-1 .header .logo,.fp-viewing-2 .header .logo,.fp-viewing-3 .header .logo,.fp-viewing-4 .header .logo,.fp-viewing-5 .header .logo,.fp-viewing-6 .header .logo,.fp-viewing-7 .header .logo,.fp-viewing-8 .header .logo{ max-width: .64rem;}
}
.banner_box{ padding: 0px; position: relative; z-index: 3; }
.banner{ overflow: hidden; }
.banner::after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(/images/ba_y.png) center 101% no-repeat; background-size: 100% auto;z-index: 1;pointer-events: none;}
.banner .a{ display: block; position: relative; z-index: 1; overflow: hidden; }
.banner .a{ padding-bottom: 100vh;position: relative;}
.banner .imgBox{ overflow: hidden; width: 100%;}
.banner .imgBox .img{ padding-bottom: 100vh; transition: 0s; transform: scale(1) !important; }
.banner .imgBox .img video{ opacity: .9;}
.banner .swiper-slide img, .banner .swiper-slide video{position:absolute;left:0;top:0;width:100%;height:100%;background-size: cover !important;background-position: 50% 50% !important; object-fit: cover}

.banner .swiper-slide-active .bg{ animation: sca 7s linear 0s 1 both; transform-style: preserve-3d;}

@-webkit-keyframes sca {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

@keyframes sca {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

.banner .dotsw{ position: absolute; bottom: .4rem; left: 0; right: 0;text-align: center;z-index: 2;}
.banner .dots span{ position: relative; z-index: 1; width: .34rem; height: .28rem;opacity: 1;background: none;margin: 0 -.08rem !important; transition: .5s}
.banner .dots span::before{ content: ""; position: absolute; top: 50%;   left: 50%; background: #fff; border-radius: 50%; width: .06rem; height: .06rem; transition: .5s;transform: translate(-50%, -50%);}
.banner .dots span::after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(/images/ba_d.png) center no-repeat; background-size: 100% 100%; transition: .5s; opacity: 0}
.banner .dots span.active{ margin: 0 .1rem !important;}
.banner .dots span.active::before{ opacity: 0}
.banner .dots span.active::after{ opacity: 1}

.banner .dotsw .wp{ justify-content: center}

.banner .box{ cursor: pointer;display: flex;width: .3rem;height: .3rem;flex-direction: column;align-items: center;justify-content: center;}
.banner .box span {
  display: block;
  width: .18rem;
  height: .18rem;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;

  transform: rotate(45deg);
  margin: -.05rem 0;
  animation: animate 2s infinite;
}
.banner .box span:nth-child(1) {
  animation-delay: -0.2s;
}
.banner .box span:nth-child(2) {
  animation-delay: -0.4s;
}
.banner .box span:nth-child(3) {
  animation-delay: -0.6s;
}

@keyframes animate {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-.09rem, -.09rem) ;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(.09rem, .09rem);
  }
}

.banner .dots{ right: calc((100vw - 77%)/2);position: absolute;}

@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%)}}

.pad1{overflow: hidden;padding: .8rem 0;}
.kBox{ height: .8rem;}
#home1{ position: relative; top: -.8rem;}

.tit1{ margin: 0 0 .54rem;align-items: center;}
.tit1 .ll{ align-items: baseline}
.tit1 .ll big{ font-size: .36rem; color: #006151;/*! font-weight: 600; */}
.tit1 .ll small{ font-size: .28rem; color: #d0a669; font-family: 'Canela Web'; margin: 0 0 0 .1rem}

.more1{ align-items: center;}
.more1 span{ display: inline-block; position: relative; z-index: 1; font-size: .16rem; color: #006151; padding: 0 .24rem;transition: .5s;text-transform: uppercase;font-weight: 600;font-family: "PingFang SC";}
.more1 span:before{ content: ""; position: absolute; width: .16rem; height: 1px; background: #d2ab71;left: 0;top: 50%; transition: .5s;}
.more1 span:after{ content: ""; position: absolute; width: .16rem; height: 1px; background: #d2ab71;right: 0;top: 50%; transition: .5s;}

.more1 .line0{ width: .08rem; height: .28rem; position: relative; z-index: 1;}
.more1 .line0:before{ content: ""; position: absolute; top: 0; left: 0; width: .02rem; height: 0; background: #d2ab71; }
.more1 .line0:after{ content: ""; position: absolute; top: 0; left: 0; width: 0; height: .02rem; background: #d2ab71; }

.more1 .line0:before{ transition: .3s .5s;}
.more1 .line0:after{ transition: .3s .2s;}

.more1 .line1:after{ left: auto; right: 0}
.more1 .line2:before{ left: auto; right: 0}

.more1:hover span{ color: #d0a669;}
.more1:hover span:before{ transform: translateX(-.5rem); opacity: 0;}
.more1:hover span:after{ transform: translateX(.5rem); opacity: 0;}

.aos-animate .more1 .line1::before{ height: 100%;}
.aos-animate .more1 .line2::before{ height: 100%;}
.aos-animate .more1 .line1::after{ width: 100%;}
.aos-animate .more1 .line2::after{ width: 100%;}

.home1 .box2{ background: #f2f6f6;}
.home1 .box1{ width: 26%;}
.home1 .box2{ width: 43.58%;position: relative;z-index: 1;}
.home1 .box2:before{ content: ""; position: absolute; background: url(/images/logo2.png) center no-repeat;width: 3.58rem;height: 3.58rem;top: 62%;left: 50%;margin: -1.79rem 0 0 -1.79rem;background-size: 100% 100%;/*! animation: roted 30s infinite; */}

.tit2{ margin: 0 0 .28rem}
.tit2 big{ font-size: .21rem; color: #006151; font-weight: 600}
.tit2 small{ font-size: .17rem; color: #d0a669; margin: 0 0 0 .04rem}

.list3 .a{ display: block; position: relative; z-index: 1;}
.list3 .txt{ position: absolute; top: 0; right: 0; bottom: 0; left: 0;padding: 0 .26rem .1rem;justify-content: flex-end; background: url(/images/list3_y.png) center 101% no-repeat; background-size: 100% auto;}
.list3 h6, .list3 h4{ color: #fff;}
.list3 h4{ margin: .04rem 0 0;}

.list4{ padding: 0 .26rem;background: #f2f6f6;}
.list4 li{ border-bottom: #d9e7e6 1px solid;position: relative;}
.list4 li:after{ content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px;transition: .5s;}
.list4 .a{ height: .72rem; display: flex; align-items: center;}
.list4 li:last-child:after{ display: none}
.list4 li:last-child{ border: none}

.list5 .txt{ padding: .3rem .65rem; text-align: center}
.list5 .txt .tit2{ display: flex; justify-content: center}
.list5 .txt .tit2 .ll{ position: relative; z-index: 1}
.list5 .txt .tit2 .ll:before{ content: ""; position: absolute; width: .82rem; height: 1px; background: #d0a669; right: 105%; top: 50%}
.list5 .txt .tit2 .ll:after{ content: ""; position: absolute; width: .82rem; height: 1px; background: #d0a669; left: 105%; top: 50%}
.list5 h4{ font-size: .22rem; color: #333333; margin: 0 0 .2rem;/*! font-weight: 600; */}

.list5Box .dots{ bottom: 0; text-align: center;}
.list5Box .dots span{ width: .05rem; height: .05rem; background: #d7e6e4;opacity: 1;margin: 0 .02rem !important; border-radius: 50vw; transition: .5s}
.list5Box .dots span.active{ width: .18rem; background: #006151}

.home3{ background: #f2f6f6;}
.home3 .tit1{ margin-bottom: .3rem;}

.list6{ margin: 0 .4rem 0 0}
.list6 li{ position: relative; z-index: 1; padding: 0 .24rem;}
.list6 li:before{ content: ""; position: absolute; top: 50%; width: 1px; height: .15rem; background: #d7b47f; transform: translateY(-50%); right: 0}
.list6 li:last-child:before{ display: none}
.list6 li .a{ font-size: .2rem; color: #006555; transition: .5s;/*! font-weight: 600; */}

.home3 .content{ align-items: center;}
.home3 .content .left{ width: calc(100% - 6.2rem); position: relative; z-index: 2;padding: 0 1rem 0 0;}
.home3 .content .right{ width: 6.2rem; position: relative; z-index: 1;background: #f2f6f6;}

.list7{ height: 4.2rem;flex-wrap: nowrap;flex-direction: column;}
.list7 li{ flex: 1; transition: .5s;width: 100%;}
.list7 .a{ display: flex; width: 100%; height: 100%; position: relative; z-index: 1;}
.list7 .a::after{ content: ""; position: absolute; top: 0; right: calc(-.15rem - 0.85rem); bottom: 0; left: -.34rem; background: #fff; border-left: #e3b67d .05rem solid; transform: perspective(300px) rotateX(5deg); opacity: 0;transition: .5s;transform-origin: top;z-index: -1; box-shadow: 0px 12px .38rem 0px rgba(68, 0, 4, 0.14);}
.list7 .a::before{ content: ""; position: absolute; bottom: 0; width: 100%; background: #c2d9d6; height: 1px; transition: .5s}
.list7 h4{font-size: .2rem; /*! font-weight: 600; */margin: .2rem 0;transform-origin: left;}
.list7 p{ height: 0; opacity: 0; transition: .5s; margin-bottom: 0;}

.bd_li{ transition: .5s;}

.home2{ padding-top: 0 !important;}
.home2 .content{ position: relative; z-index: 1; }
.home2 .content::before{content: "";position: absolute;top: 0;bottom: 0;left: 0;width: calc(100% - .32rem);background: #006555;z-index: -1;} 
.home2 .content::after{ content: ""; position: absolute; bottom: 0; right: 0; width: .32rem; height: .86rem; background: #fff; z-index: -1;} 
.home2 .left{ width: calc(100% - 7.55rem);justify-content: flex-end;position: relative;z-index: 1;}
.home2 .left .ll{ position: absolute; top: 50%; transform: translate(0, -50%);left: .6rem;width: 2.48rem;z-index: 10;}
.list17 li{ position: relative; z-index: 1}
.list17 .a{ display: flex; height: .8rem; align-items: center;padding: 0 .08rem;}
.list17 h4{ font-size: .2rem; color: #fff;transition: .5s;}
.list17 li .line{position: absolute;left: 0;top: 0;background: rgba(0, 0, 0, 0);width: 100%;height: 100%;pointer-events: none}
.list17 li .line:after{top: .56rem;right: 0}

.list17 li:nth-child(1) .line:after{content: '';position: absolute;width: 0;height:1.3rem;background: url(/images/gline1.png) right 100% no-repeat;background-size: 2.48rem 1.3rem;top: .64rem;} 
.list17 li:nth-child(2) .line:after{content: '';position: absolute;width: 0;height:.5rem;background: url(/images/gline2.png) no-repeat right center;right: 0;background-size: 2.48rem .5rem;top: .64rem;} 
.list17 li:nth-child(3) .line:after{content: '';position: absolute;width: 0;height:.4rem;background: url(/images/gline3.png) no-repeat right center;right: 0;background-size: 2.48rem .4rem;top: .32rem;} 
.list17 li:nth-child(4) .line:after{content: '';position: absolute;width: 0;height:1.2rem;background: url(/images/gline4.png) no-repeat right center;right: 0;background-size: 2.48rem 1.2rem;top: auto;bottom: .1rem;} 
.list17 li:nth-child(5) .line:after{content: '';position: absolute;width: 0;height:2rem;background: url(/images/gline5.png) no-repeat right center;right: 0;background-size: 2.48rem 2rem;top: auto;bottom: .08rem;} 

.home2 .left .rr{ width: 5.38rem; height: 5.38rem;display: flex;align-items: center;justify-content: center;margin: 0 -.34rem 0 0;position: relative;z-index: 1;}
.home2 .left .rr img.i4{ position: absolute; top: 0;  bottom: 0; left: 0; z-index: 1;}
.home2 .left .rr .box{ position: relative; z-index: 1;}
.home2 .left .rr .box img.i1{ position: absolute; top: 0; right: 0; bottom: 0; left: 0;  z-index: -1; transition: .5s; transform: rotate(54deg) scale(1); opacity: 0; animation: 20s roted1 linear infinite;}
.home2 .left .rr .box img.i3{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; transform: translateX(-.1rem) translateY(-.2rem);/*! mix-blend-mode: darken; */}
.home2 .left .rr:hover .box img.i1{  opacity: 1;}


@keyframes roted1{
    0%{transform: rotate(54deg) scale(1); }
    8.33%{transform: rotate(54deg) scale(1.2); }
    16.66%{transform: rotate(54deg) scale(1); }
    24.99%{transform: rotate(54deg) scale(1.2);}
    32.32%{transform: rotate(54deg) scale(1); }
    41.65%{transform: rotate(54deg) scale(1.2); }
    49.98%{transform: rotate(54deg) scale(1); }
    58.31%{transform: rotate(54deg) scale(1.2); }
    66.64%{transform: rotate(54deg) scale(1);}
    74.97%{transform: rotate(54deg) scale(1.2); }
    83.3%{transform: rotate(54deg) scale(1); }
    91.63%{transform: rotate(54deg) scale(1.2); }
    100%{transform: rotate(54deg) scale(1); }
}


.home2 .circle1{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1}
.circle1 span{width: 100%;height: 100%;position: absolute;top: 0;left: 0; background: url(/images/circle1.png) center no-repeat; background-size: cover;animation: circleScale1 3s linear infinite;border-radius: 50vw; transform: scale(0); visibility: hidden}
.circle1 span:nth-of-type(2) {animation-delay: 2s; display: none}
.circle1 span:nth-of-type(3) {animation-delay: 4s; display: none}
@keyframes circleScale1 {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

.arrow1 svg path{ stroke: #d7b47f;}
.list18 .a{ display: block; position: relative; z-index: 1;}
.list18 .imgBox .img{ padding-bottom: 58%;padding-bottom: 4.52rem;}
.list18 .time{ transition: .5s; position: absolute; z-index: 1; top: .36rem; left: .5rem;padding: 0 0 .12rem;opacity: 0;}
.list18 .time::before{ content: ""; position: absolute; background: #fff; width: 100%; height: .03rem; background-size: cover; bottom: 0; left: 0; transition: .5s; }
.list18 .time big{ font-size: .4rem; color: #fff; font-family: 'Canela Web';} 
.list18 .time small{ font-size: .2rem; color: #fff; font-family: 'Canela Web'; transition: .5s;}
.list18 .txt{background: #fff;margin: -.4rem .32rem 0;box-shadow: 0px 11px .3rem 0px rgba(48, 65, 62, 0.14);position: relative;z-index: 1;height: calc(.63rem * 2);padding: .24rem 1.34rem 0 .32rem;}
.list18 h4{ font-size: .19rem; /*! font-weight: 600 */}
.list18 .line1{ height: 1px; width: 100%; position: relative; margin: .15rem 0 .12rem}
.list18 .line1:before{ content: ""; position: absolute; left: -.32rem; right: .1rem; background: #fbd499; height: 1px;}
.list18 .line1:after{ content: ""; position: absolute; right: 0; background: #fbd499; height: .06rem; width: .06rem; border-radius: 50vw; top: -.03rem}
.list18Box{ /*! background: #fff; */overflow: visible;}
.list18Box .arrow1{position: absolute;bottom: 0;right: .32rem;width: .63rem;height: calc(.63rem * 2);z-index: 1;}
.arrow1 .arrow{width: .63rem;height: .63rem;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.arrow1 .arrow.next{ background: #d7b47f; }
.arrow1 .arrow.next svg path{ stroke: #fff}

.home2 .right{ width: 7.55rem;}

.xiank{ width: 3.38rem; height: 3.38rem;}
.xiank img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0}

.home3 .right.bd .a{ display: block; position: relative; z-index: 1}
.home3 .right.bd .a::before{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: #006555;z-index: -1;transform: translate(.3rem, .3rem);}

.home3 .imgBox{ background: #006555;}
.home3 .imgBox .img{ padding-bottom: 68.17%; /*filter: blur(15px);*/ background: #006555; transition: .5s; }
.home3 .imgBox .imgs{ display: none}
.home3 .imgBox .img:after{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;backdrop-filter: blur(10px);display: none;}
.home3 .imgBox:after{content: "";position: absolute;width: 80%;top: 50%;left: 50%;transform: translate(-50%, -50%) !important;height: 76%;border-radius: .25rem;background: rgba(255,255,255,.6);transition: .5s;display: none;}
.home3 .imgBox img{width: 73%;top: 50%;left: 50%;transform: translate(-50%, -50%) !important;height: 68%;border-radius: .1rem;z-index: 10;display: none;}

.home4 .left{ width: 43.51%;}
.home4 .right{ width: 52%;}

.list8{ height: 5.44rem;flex-wrap: wrap;flex-direction: column; border-top: #d0a669 .04rem solid;}
.list8 li{ flex: 1; transition: .5s; position: relative; z-index: 1;width: 100%;}
.list8 li::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: -.3rem; background: #f2f6f6; opacity: 0; z-index: -1;transition: .5s;}
.list8 li:after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: -.3rem; background: url(/images/list8_b.png) right bottom no-repeat; background-size: auto 1.47rem; opacity: 0; z-index: -1;transition: .5s;}
.list8 .a{ align-items: center; height: 100%; position: relative; z-index: 1;}
.list8 .a:before{ content: ""; position: absolute; right: 0; bottom: -1px; width: 100%; height: 1px; background: #f4cf8f; transition: .5s}
.list8 .line0{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;}
.list8 .line1::before{ content: ""; position: absolute; top: 0; left: -.3rem; width: 0; height: 1px; background: #d0a669; transition: .5s;}
.list8 .line1::after{ content: ""; position: absolute; top: 0; left: -.3rem; width: 1px; height: 0; background: #d0a669; transition: .5s;}
.list8 .line2::before{ content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 1px; background: #d0a669; transition: .5s;}
.list8 .line2::after{ content: ""; position: absolute; bottom: 0; right: 0; width: 1px; height: 0; background: #d0a669; transition: .5s;}

.list8 .con{ width: 100%;align-items: flex-start;}
.list8 .time{ width: 1.06rem;transition: .5s; position: relative; z-index: 1; }
.list8 .time::before{ content: ""; position: absolute; background: url(/images/list8_t.png) center no-repeat; width: .08rem; height: .29rem; background-size: cover; top: -.1rem; left: -.15rem; transition: .5s; opacity: 0;}
.list8 .time big{ font-size: .4rem; color: #d0a669; font-family: 'Canela Web';} 
.list8 .time small{ font-size: .2rem; color: #d0a669; font-family: 'Canela Web'; transition: .5s;}
.list8 .time h6{ font-size: .16rem; color: #d0a669; font-family: 'Canela Web'; transition: .5s; opacity: 0; margin: .04rem 0 0;height: 0;}
.list8 .txt{ flex: 1; overflow: hidden}
.list8 h4{ /*! font-weight: 600; */ margin: .1rem 0 0}
.list8 p{ width: 70%; height: 0; margin-top: 0;}

.list9{ height: 5.44rem;flex-wrap: wrap;flex-direction: column; border-top: #f4cf8f 1px solid;}
.list9 li{ flex: 1; transition: .5s; position: relative; z-index: 1;width: 100%;}
.list9 li::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #f2f6f6; opacity: 0; z-index: -1;transition: .5s;}
.list9 .a{ align-items: center; height: 100%; position: relative; z-index: 1;padding: 0;}
.list9 .a:before{ content: ""; position: absolute; right: 0; bottom: -1px; width: 100%; height: 1px; background: #f4cf8f; transition: .5s}
.list9 .con{ width: 100%;align-items: flex-start;}
.list9 .time{ width: 1.28rem;transition: .5s; position: relative; z-index: 1; }
.list9 .time::before{ content: ""; position: absolute; background: url(/images/list8_t.png) center no-repeat; width: .08rem; height: .29rem; background-size: cover; top: -.1rem; left: -.15rem; transition: .5s; opacity: 0;}
.list9 .time big{ font-size: .4rem; color: #d0a669; font-family: 'Canela Web';} 
.list9 .time small{ font-size: .2rem; color: #d0a669; font-family: 'Canela Web'; transition: .5s;}
.list9 .time h6{ font-size: .16rem; color: #d0a669; font-family: 'Canela Web'; transition: .5s; opacity: 0; margin: .04rem 0 0;height: 0;}
.list9 .txt{flex: 1;overflow: hidden;padding: 0 .8rem 0 0;}
.list9 h4{ /*! font-weight: 600; */ margin: .1rem 0 0}
.list9 .p{ height: 0; position: relative; z-index: 1; transition: .5s;}
.list9 .p:before{ content: ""; position: absolute; width: 1px; border-left: #dbbf94 1px dotted; left: .12rem; top: -.15rem; bottom: 0; z-index: -1}
.list9 p{ width: 70%;  margin-top: 0; line-height: .46rem;display: flex;align-items: center; opacity: 0; transform: translateY(-.1rem);}
.list9 p img{ width: .26rem; margin: 0 .06rem 0 0}
.list9 p:nth-child(1){ transition: .5s .2s;}
.list9 p:nth-child(2){ transition: .5s .4s;}
.list9 p:nth-child(3){ transition: .5s .6s;}
.list9 .an{ position: absolute; width: .34rem; height: .34rem; background: #006555; top: .3rem; right: .24rem}
.list9 .an:before{ content: ""; position: absolute; top: 0; width: .16rem; height: .02rem; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .5s}
.list9 .an:after{ content: ""; position: absolute; top: 0; width: .16rem; height: .02rem; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); transition: .5s}

.home5{ padding-top: 0 !important;}
.home5 .tit1{ margin-bottom: .3rem;}
.home5 .content{ position: relative}
.home5 .left{ width: 30.8%; background: url(/images/home5_b.jpg) center no-repeat; background-size: cover; border-top: #d0a669 .04rem solid;padding: 0 .38rem;}
.home5 .right{ width: 68.66%; position: relative; z-index: 1;}

.list10 .a{ display: flex; height: 1.4rem;border-bottom: rgba(250,205,137,.2) 1px solid;}
.list10 h6 span{ display: inline-block; min-width: 1.12rem; padding: 0 .1rem; position: relative; font-size: .17rem; color: #eec07d; text-align: center}
.list10 h6 span::before{ content: ""; position: absolute; background: url(/images/list10_i1.png) center no-repeat; background-size: cover; width: .05rem; height: .17rem;top: 0;left: 0;}
.list10 h6 span::after{ content: ""; position: absolute; background: url(/images/list10_i2.png) center no-repeat; background-size: cover; width: .05rem; height: .17rem;top: 0;right: 0;}
.list10 h4{ color: #fff; margin-top: .16rem}

.list11{ margin-bottom: -.8%}
.list11 li{ margin-bottom: .8%}
.list11 .a{ display: block; position: relative; z-index: 1;}
.list11 .txt{ position: absolute; top: 0; right: 0; bottom: 0; left: 0;padding: 0 .26rem .2rem;justify-content: flex-end; background: url(/images/list11_y.png) center 101% repeat-x; background-size: .02rem 1.32rem;}
.list11 h6 img{ width: .32rem; height: .32rem; position: relative}
.list11 h4{ color: #fff; margin: .06rem 0 0}
.list11 li:nth-child(1){ width: 63.9%;}
.list11 li:nth-child(2){ width: 35.4%;}
.list11 li:nth-child(3){ width: 43.01%;}
.list11 li:nth-child(4){ width: 56.10%;}
.list11 li:nth-child(1) .imgBox .img{ padding-bottom: 51.15%}
.list11 li:nth-child(2) .imgBox .img{ padding-bottom: 92.33%}
.list11 li:nth-child(3) .imgBox .img{ padding-bottom: 60.86%}
.list11 li:nth-child(4) .imgBox .img{ padding-bottom: 46.66%}

.home5 .right1{ position: absolute; top: 0; right: -.86rem;width: .51rem;z-index: 10;}
.list12 {justify-content: center;position: relative;z-index: 10;width: 100%;}
.list12 li {margin: 0 0 .28rem;position: relative;z-index: 1;cursor: pointer;}
.list12 li:nth-child(1) {z-index: 5 }
.list12 li:nth-child(2) {z-index: 4 }
.list12 li:nth-child(3) {z-index: 3 }
.list12 li:nth-child(4) {z-index: 2 }
.list12 li:nth-child(5) {z-index: 1 }
.list12 li:nth-child(5) .a{ background: #0f7f6d}
.list12 li .a {display: flex;font-size: 13px;color: #fff;align-items: center;text-transform: uppercase;background: rgba(255,255,255,.8);border-radius: 50%;width: .52rem;height: .52rem;transition: .5s;}
.list12 li .a img {width: 100%;height: 100%;position: relative;z-index: 1;transition: .5s;}
.list12 li .a:before {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;border-radius: 50vw;transform: scale(0);background: #fff;z-index: -1;opacity: .1;transition: .5s;}
.list12 li .ewm {width: 1.4rem;background: #fff;border-radius: .06rem;position: absolute;padding: .05rem;top: 140%;left: 50%;/*! margin-left: -.7rem; */z-index: 1;opacity: 0;visibility: hidden;transition: .5s;transform: translateY(.1rem) translateX(-50%);box-shadow: 0 0 0.3rem rgba(0,0,0,.2);}

.list12 li .ewm:before {content: "";position: absolute;width: .12rem;height: .12rem;background: #fff;transform: rotate(45deg);top: -.06rem;left: 50%;margin-left: -.06rem;}.list12 li .ewm img {width: 100% }
.list12 li:nth-child(5):hover .a {background: #006555;}
.list12 li:hover .a:before {transform: scale(1.35);}.list12 li:hover {z-index: 100 }
.list12 li:hover .ewm {opacity: 1;visibility: visible;transform: translateY(.1rem) translateX(-50%);}

.list12 li .ewm1{ width: .6rem}
@media(min-width: 800px) {
    .list12 li .ewm {width: 1.4rem;background: #fff;border-radius: .1rem;position: absolute;padding: .15rem;right: 140%;top: 50%;transform: translateX(-.3rem) translateY(-50%);z-index: 1;opacity: 0;visibility: hidden;transition: .5s;box-shadow: 0 0 0.3rem rgba(0,0,0,.2);left: auto;}
    .list12 li .ewm:before {content: "";position: absolute;width: .12rem;height: .12rem;background: #fff;transform: rotate(45deg);right: -.06rem;top: 50%;margin-top: -.06rem;left: auto;}
    .list12 li .ewm img {width: 100% }
    .list12 li .ewm1{ width: .5rem;border-radius: 50vw; background: #006555}
    .list12 li .ewm1::before{ background: #006555;}
    .list12 li:hover .a {background: rgba(255,255,255,.5);}
    .list12 li:hover .a:before {transform: scale(1.35);}
    .list12 li:hover {z-index: 100 }
    .list12 li:hover .ewm {opacity: 1;visibility: visible;transform: translateX(-.1rem) translateY(-50%); background: #fff;color: #fff;text-align: center;line-height: 1.15;}
    .list12 li:hover .ewm1{ background: #006555}
}
.more2 {display: flex;flex-direction: column;justify-content: center;align-items: center;margin: .7rem 0 0;}
.more2 img {width: .2rem;animation-delay: 0ms;animation-duration: 1500ms;animation-iteration-count: infinite;animation-name: arrow;animation-play-state: running;animation-timing-function: linear;}
@-webkit-keyframes arrow {0% {opacity: 0;-webkit-transform: translate3d(0px,0px,0px) }33% {opacity: 1 }66% {opacity: 1 }100% {opacity: 0;-webkit-transform: translate3d(0px,5px,0px) }}@keyframes arrow {0% {opacity: 0;transform: translate3d(0px,0px,0px) }33% {opacity: 1 }66% {opacity: 1 }100% {opacity: 0;transform: translate3d(0px,5px,0px) }}
.more2 span {display: inline-block;width: .16rem;font-size: .16rem;color: #006151;margin: 0 0 .1rem;line-height: 1.125;transition: .5s; text-transform: uppercase; font-weight: 600;font-family: "PingFang SC";writing-mode: tb-rl;}

.home6{ background: url(/images/home6_b.jpg) center no-repeat; background-size: cover;}
.home6 .content{ align-items: flex-start;}
.home6 .box1{ width: 24%;}
.home6 .box2{ width: 51%;}

.list13 li{ margin-bottom: .4vw;}
.list13 .imgBox .img{ padding-bottom: 53.6%;}
.list13 .a{ display: block; position: relative; z-index: 1;}
.list13 .txt{ content: ""; position: absolute;  top: 0; right: 0; bottom: 0; justify-content: flex-end;left: 0;text-align: center;padding: .16rem;background: url(/images/list11_y.png) center 101% repeat-x;background-size: .02rem 1.32rem;}
.list13 h4{ font-size: .26rem; color: #fff; font-weight: 600;position: relative;padding: 0 0 .16rem;}
.list13 h4:before{ content: ""; position: absolute; width: .22rem; height: .04rem; background: #efc184; bottom: 0; left: 50%; transform: translateX(-50%)}

.list14{ margin-bottom: .4vw;}
.list14 .a{ display: block; position: relative; z-index: 1;}
.list14 .imgBox .img{ padding-bottom: 51.4%;}
.list14 .txt{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center;}
.list14 .txt img{ width: .64rem}

.list15 li{ width: 49.5%;}
.list15 .imgBox .img{ padding-bottom: 51%;}

.home7{background: url(/images/home7_b.jpg) center bottom no-repeat;background-size: cover;padding-bottom: 1.36rem;}

.list16{ align-items: flex-start;overflow: hidden;}
.list16 li{width: 1.36rem;overflow: hidden;}
.list16 .a{ height: 100%;flex-wrap: nowrap; position: relative; z-index: 1;}
.list16 .a::before{ content: ""; position: absolute; top: .12rem; left: .12rem; background: url(/images/list16_j.png) center no-repeat; background-size: 100% 100%;width: .08rem;height: .29rem;}
.list16 .tit{width: 1.36rem;background: #9c0f0e;/*! height: 100%; */display: flex;justify-content: center;padding: .64rem .1rem;height: 3.15rem;align-items: center;}
.list16 .tit h4{ writing-mode: tb-rl;  font-size: .24rem; color: #fff; font-family: 'sys'; line-height: .36rem; display: block;}
.list16 .imgBox{width: 0;height: 100%;}
.list16 .imgBox .img{padding-bottom: 62%;padding-bottom: 3.15rem;}

.list16 li.on{width: calc(100% - 1.36rem*4);}
.list16 li.on .tit{display: none;}
.list16 li.on .imgBox{width: 100%;}

.list16 li:nth-child(2) .tit{ background: #f2914d}
.list16 li:nth-child(3) .tit{ background: #ef8132}
.list16 li:nth-child(4) .tit{ background: #8a0502}

.list16 li:nth-child(5) .tit{ background: #0f7f6d}

.miso-delay1{ transition-delay: .2s;}
.miso-delay2{ transition-delay: .4s;}
.miso-delay3{ transition-delay: .6s;}

@media(min-width: 1024px){
    .banner .dots{ right: calc((100vw - 86%)/2);}
}
@media(min-width: 1024px){
    .list4 li:hover::after{ width: 100%;background: #d0a669;}
    .list6 li .a:hover{ color: #d0a669}
    .more2:hover span{ color: #d0a669}

    .home3 .a:hover .imgBox:after, .home3 .a:hover .imgBox img{ transform: translate(-50%, -50%) scale(1.05) !important;}

    .list8 li.on{ flex-grow: 1.75; box-shadow: 0px 11px 11px 0px rgba(213, 213, 213, 0.69);}
    .list8 li.on .a:before{ opacity: 0}
    .list8 li.on .time::before{ opacity: 1;}
    .list8 li.on .time small{ opacity: 0;}
    .list8 li.on .time h6{ opacity: 1;}
    .list8 li.on h4{ font-size: .2rem; margin: 0;}
    .list8 li.on p{ height: .6rem; opacity: 1; margin-top: .15rem;}
    .list8 li.on::before, .list8 li.on::after{ opacity: 1;}

    .list8 li.on .line1::before{ width: calc(100% + .3rem);}
    .list8 li.on .line1::after{ height: 100%;}
    .list8 li.on .line2::before{ width: calc(100% + .3rem);}
    .list8 li.on .line2::after{ height: 100%;}
    
    .list7 li.on{ flex-grow: 2;}
    .list7 li.on .a::before{ opacity: 0; width: 0}
    .list7 li.on .a::after{ transform: perspective(300px) rotateX(0deg); opacity: 1;}
    .list7 li.on h4{ font-size: .2rem}
    .list7 li.on p{height: .6rem;opacity: 1;margin-bottom: .2rem;}
    .list17 li.on h4{ color: #facd89}
    .list17 li.on .line:after{ width: 2.48rem; transition: .5s .3s linear}
    
    .list9 li.on{ flex-grow: 2.75; }
    .list9 li.on .time{ transform: translateX(.4rem)}
    .list9 li.on h4{ font-size: .2rem; margin: 0;}
    .list9 li.on .p{ height: calc(.46rem * 3); margin: .25rem 0 0;}
    .list9 li.on .time::before{ opacity: 1;}
    .list9 li.on::before{ opacity: 1;}
    .list9 li.on .time small{ opacity: 0;}
    .list9 li.on .time h6{ opacity: 1;}
    .list9 li.on p{ opacity: 1; transform: translateY(0);}
    .list9 li.on .an{ background: #d0a669 }
    .list9 li.on .an:after{ transform: translate(-50%, -50%) rotate(0)}
    
    /* .list8 li.on{ flex-grow: 1.75; box-shadow: 0px 11px 11px 0px rgba(213, 213, 213, 0.69);}
    .list8 li.on .a:before{ opacity: 0}
    .list8 li.on .time::before{ opacity: 1;}
    .list8 li.on .time small{ opacity: 0;}
    .list8 li.on .time h6{ opacity: 1;}
    .list8 li.on h4{ font-size: .2rem; margin: 0;}
    .list8 li.on p{ height: .6rem; opacity: 1; margin-top: .15rem;}
    .list8 li.on::before, .list8 li.on::after{ opacity: 1;}

    .list8 li.on .line1::before{ width: .9rem;}
    .list8 li.on .line1::after{ height: .9rem;}
    .list8 li.on .line2::before{ width: .9rem;}
    .list8 li.on .line2::after{ height: .9rem;}

    .list9 li.on{ flex-grow: 2.75; }
    .list9 li.on .time{ transform: translateX(.4rem)}
    .list9 li.on h4{ font-size: .2rem; margin: 0;}
    .list9 li.on .p{ height: calc(.46rem * 3); margin: .25rem 0 0;}
    .list9 li.on .time::before{ opacity: 1;}
    .list9 li.on::before{ opacity: 1;}
    .list9 li.on .time small{ opacity: 0;}
    .list9 li.on .time h6{ opacity: 1;}
    .list9 li.on p{ opacity: 1; transform: translateY(0);} */
    .home2 .left:hover .circle1 span{ visibility: visible}
    
}
@media(max-width: 1600px){
.home2 .left{ width: calc(100% - 6.55rem);}
    .home2 .right{ width: 6.55rem;}
}
@media(max-width: 1024px){
    .banner_box{ margin: .7rem 0 0}
    .banner .a{ padding-bottom: 50%;}
    .banner .dots{ bottom: 0;}
    
    .banner .dots{ right: calc((100vw - 94%)/2);position: absolute;}

    .kBox{ display: none;}
    .pad1{ padding: .5rem 0;}

    .section .more1 .line1::before{ height: 100%;}
    .section .more1 .line2::before{ height: 100%;}
    .section .more1 .line1::after{ width: 100%;}
    .section .more1 .line2::after{ width: 100%;}

    .home1{ padding-bottom: 0}
    .home1 .box2{ order: -1;}
    
    .list4{ padding: .06rem .2rem .2rem;}

    .home2 .left{ width: 100%;overflow: hidden;}
    .home2 .right{ width: 100%;}
    .home2 .content::before{ width: 100%;bottom: .86rem;/*! background: none; */}
    .list17 li .line{ display: none}
    
    .list12 li .ewm1{ width: auto; padding: .1rem}
    .list12 li .ewm1 p{ white-space: nowrap}

    .list6{ display: none;}
    .list7{ height: auto}
    .home3 .content .left{ width: 100%;order: 1;padding: 0;}
    .home3 .content .right{ width: 100%;margin-bottom: .3rem;}
    
    .home4 .left{ width: 100%;margin-bottom: .5rem;}
    .home4 .right{ width: 100%}

    .home5 .left{ width: 100%;margin-bottom: .4rem;padding: 0 .2rem;}
    .home5 .right{ width: 100%}

    .home5 .right1 {width: 100%; position: relative;right: 0;order: -1; margin: 0 0 .2rem;}
    .home5 .right1 .more2{ display: none}
    .list12 li{ margin: 0 .1rem}
    
    .list16 li{ width: 100% !important; margin-bottom: .25rem;}
    .list16 .imgBox .img{ padding-bottom: 60%;}
    .list16 .tit{height: 100%;width: 100%;padding: .15rem 15px;display: block !important;}
    .list16 .imgBox{width: 100%;display: none;}
    .list16 .tit h4{ writing-mode: inherit;font-size: .2rem;padding: 0 .2rem;text-align: center;}
    .list16 .a{ flex-wrap: wrap}
    .list13 h4{ font-size: .2rem;}
    .list13 .imgBox .img{ padding-bottom: 90%;}

    .list8{ height: auto;}
    .list8 .a{ padding: .15rem 0;}
    .list8 h4{ margin: 0;}
    .list8 .time h6{ display: none;}

    .list9{ height: auto;}
    .list9 .a{ padding: .15rem 0;}
    .list9 .an{ display: none;}
    .list9 .time h6{ display: none;}
    .list9 h4{ margin: 0;}

    .home4{ padding-bottom: 0;}

    .list18 .imgBox .img{ padding-bottom: 58%;}
    .list18 .txt{ margin: 0;padding: .2rem .2rem;height: auto;}
    .list18Box .arrow1{ right: 0;width: .5rem;height: 1rem;top: 0;background: #fff;}
    .arrow1 .arrow{ width: .5rem; height: .5rem}

    .footer .line{ display: none;}
    .footer .fl2 .f_logo{ margin: 0 auto;}
    .footer .fl2 .center{ width: 100%;}
    .footer .fl2 .right{ width: 100%;}
    .list9 .txt{ padding: 0}
    
    #home1{ top: -.7rem;}
}
@media(max-width: 800px){
    .tit1 .ll big{ font-size: .26rem;}
    .tit1 .ll small{ font-size: .2rem;}

    .home1 .box{ width: 100%;margin-bottom: .4rem;}
    .home1 .box:last-child{ margin-bottom: 0;}
    
    .tit2{ margin-bottom: .2rem !important;}

    .list13 h4{ font-size: .2rem;padding: 0 0 .1rem;}

    .home6 .box{ width: 100%;}
    .home6 .box1{ order: 2;}
    .home6 .box2{ margin-top: .3rem;order: 3;}
    .list13{ display: flex; justify-content: space-between;}
    .list13 li{ flex: 1;margin: 0;}
    
    .home6{ padding-bottom: 0}
    .list16 li{ margin-bottom: .05rem;}
    .list11 .txt{ padding: 0 .2rem .1rem}
    .list11 h6 img{ width: .22rem; height: .22rem}
    .list11 h4{ font-size: .16rem !important;margin: .02rem 0 0;}
    
    .list7 h4{ margin: .16rem 0;}
    
    .home3 .right.bd .a::before{ transform: translate(.1rem, .1rem);}

    .list8 .time big{ font-size: .3rem;}
    .list8 .time small{ font-size: .16rem;}
    .list8 .time{ width: .9rem;}

    .tit1{ margin: 0 0 .25rem;}

    .list9 .time big{ font-size: .3rem;}
    .list9 .time small{ font-size: .16rem;}
    .list9 .time{ width: .9rem;}

    .list12 li .a{ width: .36rem; height: .36rem;}

    .list10{ padding: .2rem 0}
    .list10 h4{ margin: .1rem 0 0;}
    .list10 .a{ padding: .12rem 0;height: auto;}
    .list10 li:last-child .a{ border: none }

    .list16 .tit h4{ font-size: .18rem}
    
    .list4 .a{ height: auto; padding: .1rem 0}
    .list5 .txt{ padding: .3rem .3rem .5rem}
    
    .list5Box .dots{ position: absolute; bottom: .2rem}
    .home1 .box2:before{ width: 2rem;height: 2rem;top: 53%;left: 50%;margin: -1rem 0 0 -1rem;background-size: 100% 100%;/*! animation: roted 30s infinite; */}


    .banner .dotsw{ bottom: .25rem}
} 
@media(max-width: 560px){
    .home2 .left .ll{ position: relative;top: auto;transform: translate(0, 0);left: 0;width: 100%;padding: 0 15px;}
    .home2 .left .rr{ left: 50%; transform: translateX(-50%) scale(.6); margin: -36% 0;}
    .home2 .left{ display: block;padding: .2rem 0 0;background: #006555;margin-bottom: .3rem;}
    .list17{ display: flex; justify-content: center}

    .list17 h4{ font-size: .16rem;}
    
    .pad1{ padding: .4rem 0;}
} 

::-webkit-scrollbar{display: none}
::-webkit-scrollbar-track{display: none}
::-webkit-scrollbar-thumb{display: none}