#banner{width:100%;z-index: 2;position:relative;overflow:hidden}
#banner .img{overflow:hidden;display:inline-block}
#banner img{position:relative;width: 100%;min-width: 100%;background:no-repeat 50% / cover;}
#banner .img video , #banner .img iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
#banner .item video {overflow: hidden;position: absolute;min-width: 100%;min-height: 100%;width: 100vw;height: auto;z-index: 0;top: 0;left: 50%;transform: translate(-50%, 0%);}
#banner .pos_abs{width:100%;min-width:100%;top:0;left:0}
#banner .info{min-width: 100%;height: 100%;display: flex;align-items: center;z-index: 20;}
#banner .info .txt *{color:var(--white);opacity:0;-webkit-transform:translateY(15px);transform:translateY(25px)}
#banner .info .txt{transition:all 0.7s ease;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content: flex-start;padding:0;z-index:2;width: 65%;height:50%;margin:auto;position:absolute;top: 0;left:0;right:0;bottom:0;align-items: flex-start;}
#banner .info .txt .text{display: contents;font-size: 60px;}
#banner .info .txt .title{font-size: 27px;font-weight: 500;}
#banner .info .txt .text,#banner .info .txt p{color: var(--white);opacity:0;-webkit-transform:translateY(15px);transform:translateY(25px)}
#banner .info .txt p:before{content:"";width: 100px;height:1px;background: #ffffff;display:block;position:absolute;top: -20px;left:0}
#banner .info .txt p{font-weight: 300;font-size: 18px;margin-top: 50px;margin-bottom:50px;letter-spacing:1px;line-height: 170%;}
#banner a.pos_abs{z-index:2}
#banner .slick-current .info .txt p{transition-delay:.6s;-webkit-transition-delay:.6s;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;animation:fadeIn 1s both;-webkit-animation:fadeIn 1s both}
#banner .slick-current .info .txt *{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:.3s;-webkit-transition-delay:.3s;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;-webkit-transform:translateX(0) scale(1);transform:translateX(0) scale(1);opacity:1;-webkit-transition:-webkit-transform 0.8s linear 0.5s,opacity 0.8s linear 0.5s;transition:transform 0.8s linear 0.5s,opacity 0.8s linear 0.5s}


/* arrow_bg */
#banner .arrow_bg{width:450px;height:140px;left:auto;bottom:-140px;transform-origin:100% 100% 0;display:none}
#banner .arrow{width:50px;display:flex;justify-content:space-between;padding:0 30px;position:absolute;z-index:10;flex-direction:column;left:0%;top:65%;-webkit-transform:translateY(-50%);transform:translateY(-50%);display: none;}
#banner .arrow a{width:45px;height:45px;line-height:55px;border:1px solid #fff;border-radius:50%;display:flex;opacity:.65;flex-direction:column;justify-content:center;align-items:center;margin:5px}
#banner .arrow a.prev{-webkit-transform:rotate(180deg)}
#banner .arrow a svg{fill:#ffffff;width:13px}
#banner .arrow a:hover{opacity:1;background-color:var(--primary);border:1px solid var(--primary)}
#banner .arrow a i{color:#fff}

/* scrollBtn */
@keyframes web_menu002{0%{transform:translate(0px,0px)}
50%{transform:translate(0px,15px)}
100%{transform:translate(0px,0px)}
}.page-scroll{bottom: 50%;margin-left:0;z-index:888;text-align:center;position:absolute;left: 65px;transform: translate(-50%,25%);}
.page-scroll a{color:#fff;letter-spacing:.1em;text-decoration:none;-webkit-transition:opacity .3s;transition:opacity .3s;text-transform:uppercase;display:flex;flex-direction:column;}
.page-scroll.style01 a b{color: var(--white);font-weight: 400;font-size: 14px;letter-spacing: 2.5px;writing-mode: vertical-rl;}
.page-scroll.style01 a span::after{content:"";position:absolute;top:-10px;right:0;z-index:1;width:1px;height: 70px;background: #ffffff;background-size:cover;background-repeat:no-repeat;animation:scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite;-webkit-animation:scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite}
@keyframes scrollarrow1{0%{transform:translateY(-150%)}
50%{transform:translateY(0%)}
to{transform:translateY(500%)}
}
@-webkit-keyframes scrollarrow1{0%{-webkit-transform:translateY(-150%)}
50%{-webkit-transform:translateY(0%)}
to{-webkit-transform:translateY(500%)}
}
.page-scroll.style01 a span{position:absolute;right:0;background: rgb(255 255 255 / 70%);background-size:cover;background-repeat:no-repeat;width:1px;height: 200px;top: 180%;left:50%;transform:translate(-50%,0%);overflow:hidden}
#banner .item:before{content:'';position:absolute;height: 340px;width: 100%;bottom: 0;left: 0;background: url(/images/39/img_banner.png) no-repeat 50% 0;background-size:cover;z-index: 2;}
#banner .bannerImgBox{width:100%;height:100%;margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
#banner .bannerImgBox .img{position:absolute;width: auto;bottom: 0;left: 0;z-index: 4;}
#banner .bannerImgBox .bannerBg-white{z-index:10;width:100%}
#banner .bannerImgBox .bannerBg-white2{left: 0px;width:110%;bottom: -80px;}
#banner .bannerImgBox .img img{min-width:auto;height:auto;width:100%;background:none}
#banner .bannerImgBox .bannerBg-cloud1{-webkit-animation:cloudRightAni 18s infinite linear;animation:cloudRightAni 18s infinite linear;opacity: .8;bottom: -100px;}
#banner .bannerImgBox .bannerBg-cloud2{bottom: -340px;z-index:0;-webkit-animation:cloudRightAni 20s infinite linear;animation:cloudRightAni 20s infinite linear;opacity: .2;}
@keyframes cloudRightAni{0%{-webkit-transform:translateX(0);transform:translateX(0)}
50%{-webkit-transform:translateX(10%);transform:translateX(10%)}
}@-webkit-keyframes circleRotate{0%{-webkit-transform:translate(-50%,-50%) rotate(0);transform:translate(-50%,-50%) rotate(0)}
100%{-webkit-transform:translate(-50%,-50%) rotate(360deg);transform:translate(-50%,-50%) rotate(360deg)}
}
#headBan{position: relative;}

@media screen and (max-width: 1640px) {
    .page-scroll{left: 40px;}
    #banner:before{left: 5vw;}
}

@media screen and (max-width: 1470px) {
	.page-scroll{left: 40px;}
	#banner:before{left: 5.5vw;}
	#banner img{height:100vh;background:no-repeat 50% / cover}
}

@media screen and (max-width: 1280px) {
    #banner img{height: 90vh;}
    #scrollBtn,#banner:before{display:none}
	#banner{padding-top: 70px;}
	#banner .info .txt p{font-size:16px}
	#banner .info .txt{top: 0;display: flex;justify-content: center;width: 90%;}
	#banner .info .txt .text{display: flex;flex-direction: column;align-items: flex-start;font-size: 2.8rem;}
	#banner .item video{height: 100%;width: 280vw;}
}


@media screen and (max-width: 960px) {
    #banner .info .txt .text{font-size:30px}
    #banner .info .txt p{font-size:15px}
    #scrollBtn{display:none}
	#banner .slick-current .info .txt p{font-size: 15px;margin-bottom:30px}
    #banner img{height: 80vh;}
    #banner .item:before{height:250px}
	#banner .bannerImgBox .bannerBg-white{bottom: -4px;}
	#banner .bannerImgBox .bannerBg-cloud1 img{height:120px}
	#banner .bannerImgBox .bannerBg-white2{left:0}
	#banner .info .txt .title{font-size:19px}
}

@media screen and (max-width: 560px) {
    #banner .info .txt{top: -50px;}
    #banner .info .txt{top: -20px;width: 90%;}
    #banner .slick-current .info .txt p{letter-spacing: 0.2px;margin-bottom: 12px;margin-top: 30px;}
    #banner .info .txt .text:before{bottom:-31px;width:1px;height:25px}
    #banner img{height: 50vh;}
}