/* banner */
#banner {padding: 90px 0 0;width: 100%;z-index: 3;}
#banner .item { height: 90vh; }
#banner .item .clip >* { min-width: 100%; width: 100%; }
#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: auto;top: 0;left: 0;}
#banner .item .info{background:rgb(0 0 0 / 25%);}
#banner .item .info >div {margin: auto;width: calc(40% - 60px);margin-left: 10%;margin-bottom: 10%;}
#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: 0;max-width: calc(100% - 30px);font-size: 18px;background: none;color: var(--white);text-shadow: 0 0 10px rgb(0 0 0 / 20%);}
#banner .item .info >div .txt h3 {margin-bottom: 15px;line-height: 150%;font-size: 45px;margin-bottom: 50px;word-break: keep-all;letter-spacing: 10px;}

@media screen and (max-width: 1440px){
	#banner .item .info >div{width: calc(50% - 60px);}
}
@media screen and (max-width: 1280px){
	#banner { padding-top: 70px; }
}
@media screen and (max-width: 1024px){
	#banner .item .info >div{width: calc(70% - 60px);}
	#banner .item .clip video{height:100%;width: auto;}
}
@media screen and (max-width: 768px){
	#banner .item .info >div{width: calc(85% - 60px);}
	#banner .item .clip video{left: -30%;}
	#banner .item .info >div .txt >*{font-size:16px;}
}
@media screen and (max-width: 640px){
	#banner .item {height: 60vh;}
	#banner .item .info >div .txt >*{font-size:14px;}
	#banner .item .info >div .txt h3{font-size: 24px;letter-spacing: 5px;margin-bottom: 30px;}
	#banner .item .info >div{width: calc(100% - 60px);}
}