/* banner */
#banner {margin-top: 88px;width: 100vw;z-index: 3;position: relative;}
#banner .item { height: 87vh; }
#banner .btn {position:absolute;height: 100%;display: flex;align-items: center;justify-content: center;top: 0;left: 5%;flex-direction: column;}
#banner .btn a{display: flex !important;!i;!;align-items: center;justify-content: center;background: rgb(255 255 255 / 20%););width: 70px;aspect-ratio: 1/1;border*-r: 5;margin: 10px 0;border-radius: 50px;}
#banner .btn a:hover{background:var(--primary)}
#banner .btn a#banner_next img{transform:scaleX(-1);}
#banner .item .clip >* { min-width: 100vw; width: 100vw; }
#banner .item .clip:before{content:'';position: absolute;width: 100%;height: 100%;background: var(--info);z-index: 2;opacity: .35;}
#banner .item .clip .bgBox { transform: scale(1); -webkit-transform: scale(1); }
#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: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
#banner .item .info{z-index:2}
#banner .item .info >div {margin: auto;width: calc(70% - 60px);}
#banner .item .info >div .txt { -webkit-transition-delay: .2s; transition-delay: .2s; transform: scaleX(0); -webkit-transform: scaleX(0); transform-origin: 0 0; -webkit-transform-origin: 0 0; }
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt p {max-width: calc(100% - 30px);word-spacing: 100vw;font-size: max(3*(1vw + 1vh) / 2, 22px);font-weight: 600;line-height: 1.6;letter-spacing: 2px;}
#banner .item .info >div .txt h3 {margin-bottom: 15px;line-height: 120%;font-family: "Poppins", serif;text-transform: uppercase;font-size: max(4 * (1vw + 1vh) / 2, 30px);margin-bottom: 40px;}

#banner .item.slick-current .clip .bgBox { -webkit-animation: scale_banner 6s linear infinite; animation: scale_banner 6s linear infinite; }
#banner .item.slick-current .info >div .txt { transform: scaleX(1); -webkit-transform: scaleX(1); }

@-webkit-keyframes scale_banner { to { -webkit-transform: scale(1); } }
@keyframes scale_banner { to { transform: scale(1.2); } }

@media screen and (max-width: 1280px){
	#banner {margin-top: 77px;}
}
@media screen and (max-width: 1024px){
	#banner .item { height: 65vh; }
	#banner .btn a{width:50px}
}
@media screen and (max-width: 640px){
	#banner .item { height: 60vh; }
	#banner .item .info >div .txt h3{margin-bottom:10px;}
	#banner .item .info >div{width: calc(100% - 60px);margin-bottom: 15%;}
	#banner .btn{display:none;}
}