/* banner */
#banner {width: 100vw;z-index: 3;}
#banner .slick-slide { min-width: 100vw; }
#banner:after{content:url(/images/44/img-banner-bottom.png);position: absolute;z-index: 2;bottom: -8px;}
@keyframes people{0%{transform-origin: bottom;transform: translate(0px, 20px);}100%{transform-origin: bottom;transform: translate(0px, 0px);}}
#banner .item {height: 95vh; }
#banner .item .clip:before{content:'';position: absolute;background-color: rgb(0 0 0 / 10%);height: 100%;width: 100%;top: 0;left: 0;z-index: 1;opacity: 1;background-image: url(/images/44/underbanner.png);}
#banner .item .clip >* { min-width: 100vw; width: 100vw; }
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip video {overflow: hidden;position: absolute;width: 100%;height: 100%;top: 0;left: 0;object-fit: cover;object-position: 50% 50%;}
#banner .item .info >div {margin: auto auto 6% auto;width: calc(60% - 50px);z-index: 2;}
#banner .item .info >div .txt { -webkit-transition-delay: .2s; transition-delay: .2s; }
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* {padding: 10px 15px;width: min(500px , 100%);font-size: 18px;}
#banner .item .info >div .txt h3 { margin-bottom: 15px; line-height: 120%; font-size: 35px; }


@media screen and (max-width: 1024px){
	#banner:after{zoom: 50%;bottom: -23px;}
	#banner .item .info >div{margin-left: 8%;}
	#banner .item .clip video{width: 105%;}
	#banner .item { height: 65vh; }
}
@media screen and (max-width: 980px){
	#banner .item .clip video{width: 100%;height: 100%;object-position: 44% 50%;}
}
@media screen and (max-width: 640px){
	#banner .item .info >div{width: 90%;margin-bottom: 15%;margin-left: 5%;}
	#banner .item .info >div .txt >*{padding:0;}
	#banner:after{zoom: 20%;bottom: -65px;}
	#banner .item .clip:before{background-position: 25% 50%;}
}