#banner .item {  position: relative; }
#banner .item a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;}
#banner .info { position: absolute; width: 25vw; left: 66vw; top: 8vw; z-index: 2; }
#banner .info .text-box { position: relative; display: flex; }
#banner .info .text-box h3 { display: block; line-height: 110%; letter-spacing: 1px; font-size: 80px; font-weight: 900; color: #102942; }
#banner .info .text-box h3:nth-child(2) { position: absolute; background-color: #102942; color: #fff; -webkit-clip-path: inset(0 0 0 9vw); clip-path: inset(0 0 0 9vw); }
#banner .info p { margin-top: 25px; font-weight: 100; color: #fff; }
#banner .img { position: relative; width: 100%; height: 800px; background: no-repeat 50% / cover; }
#banner .img video , #banner .img iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
#banner *{transition: unset;}
#banner{position: relative;margin-top: 100px;}

@media screen and (max-width:1680px){
	#banner .img{
    height: 630px;
}
}
@media screen and (max-width:1460px) {
	#banner .info { width: 450px; }
	#banner .img{height: 600px;}
}
@media screen and (max-width:1280px) {
	#banner .img {width: 100%;height: 470px;}
	#banner .info { left: 61vw; }
}
@media screen and (max-width:1024px) {
	#banner .info { position: relative; margin: 10vw auto; width: 90vw; top: auto; left: auto; }
	#banner .info .text-box h3 { font-size: 8vw; color: #fff; }
	#banner .info .text-box h3:last-child { display: none; }
	#banner .img {width: 100%;height: 368px;}
}
@media screen and (max-width:640px) {
	#banner .img { width: 100vw; height: 345px;background-position: 15% 50%;}
}
@media screen and (max-width:550px) {
	#banner{margin-top: 70px;}
}
@media screen and (max-width:480px) {
	#banner .img{height: 279px;background-position: 4% 50%;}
}