#headBan{position:relative;overflow:hidden;background-color: #fff;background-image: url(/images/39/img-bn-bg-1.jpg);background-position: 0 0;background-repeat: no-repeat;}

#banner{position:relative;z-index: 2;overflow: hidden;}
#banner *{transition:unset;-webkit-transition:unset}
#banner .img{overflow:hidden;display:inline-block;top:0;left:0;width:100%}
#banner .img img{position:relative;width: 100%;height: auto;object-fit:cover;}
#banner .img video,#banner .img iframe{position:absolute;width:100%;height:100%;left:0;top:0}
#banner .item video{overflow:hidden;z-index:-1;height:auto;position:absolute;top:0;left:0;width:100%;mix-blend-mode:saturation;opacity:0.5}
#banner .pos_abs{width:100%;height:100%;top:0;left:0;z-index:10}
#banner .info{min-width:100%;height:100%;display:flex;align-items:center;z-index:20}
#banner .info .txt{display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content: center;padding:0;z-index:2;width: 86%;height:100%;margin:auto;position:absolute;top:0%;left:0;right:0;bottom: 7%;align-items: flex-start;}
#banner .info:before{position:absolute;width:100%;height:100vh;background:url(/images/39/img-bn-T.png) no-repeat 0% 64%;background-size:auto;top:0;left:0;z-index:11;content:""}
#banner .info .txt h2{font-size: 2.8rem;font-weight: 500;position:relative;letter-spacing: 5px;padding-bottom: 1px;word-spacing:100vw;line-height: 140%;margin-bottom: 8px;}
#banner .info .txt p{display:flex;flex-direction:column;font-size: 1.3rem;letter-spacing: 2px;}
#banner .item .banneritembg{position:relative;width:100%;height:100%}

.bannerBox{position:absolute;top:0;width:100%;height:100vh;overflow:hidden}
.bannerBox figure{position:absolute;pointer-events:none}
.bird,.bird_2,.cloud,.butterfly_4,.butterfly_2,.butterfly_1,.butterfly_5,.people_2,.people,.cloud_2,.butterfly_3{-webkit-animation:loadingAni3 2s ease-in-out forwards;animation:loadingAni3 2s ease-in-out forwards}
figure img{max-width:100%;max-height:100%;object-fit:contain;}
.bird{top: 22%;left:22%;width: 9%;display: none;}
.bird img{-webkit-animation:loadingAni 2s ease-in-out forwards,updown 3s ease-in-out infinite alternate;animation:loadingAni 2s ease-in-out forwards,updown 3s ease-in-out infinite alternate;-webkit-animation-delay:0.4s;animation-delay:0.4s}
.bird_2 img{-webkit-animation:loadingAni 3s ease-in-out forwards,updown 4s ease-in-out infinite alternate;animation:loadingAni 3s ease-in-out forwards,updown 4s ease-in-out infinite alternate;-webkit-animation-delay:0.5s;animation-delay:0.5s}
@-webkit-keyframes updown{0%{-webkit-transform:translateY(0);transform:translateY(0)}
100%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}
}@keyframes updown{0%{-webkit-transform:translateY(0);transform:translateY(0)}
100%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}
}@-webkit-keyframes fly{0%,32%,64%,100%{-webkit-transform:translateY(0);transform:translateY(0)}
16%,48%,80%{-webkit-transform:translate(5px,-5px) scaleX(0.88) rotateY(20deg);transform:translate(5px,-5px) scaleX(0.88) rotateY(20deg)}
}@keyframes fly{0%,32%,64%,100%{-webkit-transform:translateY(0);transform:translateY(0)}
16%,48%,80%{-webkit-transform:translate(5px,-5px) scaleX(0.88) rotateY(20deg);transform:translate(5px,-5px) scaleX(0.88) rotateY(20deg)}
}
.bird_2{top: 31%;left: 31%;transform:translate(-50%,-50%);display: none;}
.cloud{top:34%;right:26%;}
.cloud_2{top:50%;right:13%;transform:translate(-50%,-50%)}
.people{bottom: 2%;left:20%;width:16%;display: none;}
.people_2{bottom: 5%;left:39%;width: 11%;display: none;}
.butterfly_1{bottom:18%;right:11%}
.butterfly_1 img,.butterfly_2 img,.butterfly_3 img,.butterfly_4 img,.butterfly_5 img{-webkit-animation:loadingAni 2s ease-in-out forwards,fly 6s forwards 
cubic-bezier(0.45,0.05,0.55,0.95) infinite;animation:loadingAni 2s ease-in-out forwards,fly 6s forwards 
cubic-bezier(0.45,0.05,0.55,0.95) infinite}
.butterfly_2{bottom:26%;right:10%}
.butterfly_3{bottom:33%;right:12%}
.butterfly_4{bottom:17%;left:47%}
.butterfly_3 img{-webkit-animation-delay:0.2s;animation-delay:0.2s}
.butterfly_2 img,.butterfly_4 img{-webkit-animation-delay:0.8s;animation-delay:0.8s}
.butterfly_5{bottom:23%;left:51%}
.butterfly_5 img{-webkit-animation-delay:1.2s;animation-delay:1.2s}
@-webkit-keyframes loadingAni{0%{opacity:0;-webkit-transform:translateY(-15%);transform:translateY(-15%)}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
}@keyframes loadingAni{0%{opacity:0;-webkit-transform:translateY(-15%);transform:translateY(-15%)}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
}@-webkit-keyframes loadingAni2{0%{opacity:0;-webkit-transform:translateY(15%);transform:translateY(15%)}
100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}@keyframes loadingAni2{0%{opacity:0;-webkit-transform:translateY(15%);transform:translateY(15%)}
100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}@-webkit-keyframes loadingAni3{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
}@keyframes loadingAni3{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
}

/* 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}

.bannerWave{position: absolute;bottom: 0;left: 0;width:100%;height:100vh;overflow:hidden;}
.bannerWave .air{position:absolute;bottom:0;left:0;width:100%;height:100px;background:url(/images/39/wave.png);background-size:1000px 100px}
.bannerWave .air.air1{animation: wave 30s linear infinite;z-index:1000;opacity:1;animation-delay:0s;bottom:0}
.bannerWave .air.air2{animation: wave2 20s linear infinite;z-index:999;opacity: 0.4;animation-delay:-5s;bottom: 0px;}
.bannerWave .air.air3{animation: wave 25s linear infinite;z-index:998;opacity:0.2;animation-delay:-2s;bottom: -5px;}
.bannerWave .air.air4{animation: wave2 10s linear infinite;z-index:997;opacity:0.7;animation-delay:-5s;bottom: 18px;}
@keyframes wave{0%{background-position-x:0px}
100%{background-position-x:1000px}
}@keyframes wave2{0%{background-position-x:0px}
100%{background-position-x:-1000px}
}


@media screen and (max-width:1640px){
	#banner .info .txt{width:90%}
    .bannerBox{top: 0px;height: 100vh;}
    .people{bottom: 13%;}
.people_2{bottom: 15%;}
}
@media screen and (max-width:1366px){
     .bannerBox{height: 98vh;}
   .butterfly_1{bottom: 27%;right:11%}
.butterfly_2{bottom: 36%;right:10%}
.butterfly_3{bottom: 41%;right:12%}
.butterfly_4{bottom: 25%;left:47%}
.butterfly_5{bottom: 28%;left:51%}
    .bannerWave .air{
    height: 70px;
}
    .bannerWave .air.air4{
    bottom: 0;
}
}
@media screen and (max-width:1280px){
	#banner .img img{width:100vw;height:55vh;padding:190px 0 70px 0}
	#banner .info .txt{display:flex;align-items:center;justify-content:flex-start;top:15%;height:auto}
	#banner .info .txt h2{font-size:2rem;margin-bottom:0}
	#banner .info .txt p{font-size:1.1rem}
	#headBan{background-position:20% 40%}
	#banner .item video{width:auto;height:100%}
    .bird{top: 39%;left: 6%;width: 15%;}
    .bird_2{top:41%;left:22%;width:6%}
    .bird_2{top: 41%;left: 25%;transform:translate(-50%,-50%)}
	.cloud{top: 44%;right: 32%;width: 10%;}
	.cloud_2{top: 56%;right: 15%;width: 10%;}
	.people{bottom: 10%;left:20%;width: 17%;}
	.people_2{bottom: 11%;left:39%;width: 13%;}
	.butterfly_1{bottom:18%;right:11%;width: 4%;}
	.butterfly_2{bottom:26%;right:10%;width: 4%;}
	.butterfly_3{bottom:33%;right: 4%;width: 5%;}
	.butterfly_4{bottom:17%;left:47%;width: 6%;}
	.butterfly_5{bottom:23%;left:51%;width: 4%;}
    .bannerBox{top: 0;height: 73vh;}
}
@media screen and (max-width:960px){
	#banner .img img{height:49vh;padding:150px 0 70px 0}
    .bannerBox{top: 0;height: 66vh;}
	.bannerWave .air{height:50px;background-size:350px 100%}
	.bannerWave .air.air4,.bannerWave .air.air3{bottom:0}
}
@media screen and (max-width:560px){
	#banner .img img{width:100vw;height:34vh;padding:130px 0 30px 0}
	#banner .info .txt{top:21%}
	#banner .info .txt h2{font-size:1.6rem}
	#banner .info .txt p{font-size:1rem}
    .bannerBox{top: 0px;height: 55vh;}
    .people{bottom: 15%;left: 16%;width: 17%;}
	.people_2{bottom: 15%;left: 37%;width: 13%;}
}
@media screen and (max-width:400px){
    .bannerBox{top: 0px;height: 60vh;}
}