/* banner */
#banner {z-index: 3;}
#banner .item { height: 95vh; }
#banner .item .clip >* { min-width: 100vw; width: 100vw; }
#banner .item .clip .bgBox { transform: scale(1.2); -webkit-transform: scale(1.2); }
#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;object-fit: cover;}
#banner .item .info >div {margin: auto auto 7%;width: 30%;margin-left: 17%;}
#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;margin: 40px 0;}
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* {font-size: 22px;line-height: 2;font-weight: 300;}
#banner .item .info >div .txt .h3 { margin-bottom: 15px; line-height: 120%; font-size: 35px; }
#banner .item .h3tt .h3{font-family: "Anybody", serif;font-size: max(4.5 * (1vw + 1vh) / 2, 35px);font-weight: 500;line-height: 1.3;}
#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); }

#banner .btn {position:absolute;display: flex;align-items: center;justify-content: center;bottom: 28%;left: 4%;flex-direction: column;padding: 0;}
#banner .btn a{display: flex !important;!i;!;align-items: center;justify-content: center;border: 1px solid rgb(221 221 221 / 25%););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 svg{width: 13px;height: 13px;fill: var(--white);}
#banner .btn a#banner_next svg{transform:scaleX(-1);}

#banner .slick-dots{bottom: 52%;width: auto;display: flex !important;flex-direction: column;align-items: center;left: 5.5%;justify-content: flex-end;}
#banner .slick-dots li{margin: 5px 0;}
#banner .slick-dots li button{border: 1px solid #75757500;border-radius: 50px;}
#banner .slick-dots li.slick-active button{border: 1px solid rgb(255 255 255 / 25%);}
#banner .slick-dots li button:before{opacity:1;color:#ffffff}
#banner .text-js{opacity:0;font-size: max(2.6 * (1vw + 1vh) / 2, 20px);color: #ffffff;font-weight: 400;text-transform: uppercase;line-height: 1.5;letter-spacing: 2px;min-height: 111px;}
#banner .cursor{display:block;position:absolute;height: 110%;top:0;right:-5px;width: 1px;background-color:transparent;z-index:1;animation:flash 0.5s none infinite alternate}

@keyframes flash{0%{opacity:1}100%{opacity:0}}
@-webkit-keyframes scale_banner { to { -webkit-transform: scale(1); } }
@keyframes scale_banner { to { transform: scale(1); } }

@media screen and (max-width: 1470px){
	#banner .btn{left: 3.5%;bottom: 21%;}
	#banner .item .info >div .txt >*{font-size:18px;}
	#banner .item .info >div{width: 31%;margin-bottom: 5%;}
	#banner .item .info >div .txt{margin: 20px 0;}
	#banner .text-js{min-height:100px;}
}
@media screen and (max-width: 1024px){
	#banner .item { height: 85vh; }
}
@media screen and (max-width: 640px){
	#banner .item .info >div .txt >*{font-size:14px;}
	#banner .item .info >div{width:80%;margin: auto auto 55px;}
	#banner .slick-dots, #banner .btn{display: none !important;}
	#banner .more_btn{display:none;}
	#banner .item { height: 65vh; }
	#banner .text-js{min-height: 80px;}
}