#banner{padding-top: 96px;position: relative;overflow: hidden;-webkit-mask-image: url(/images/01/smoke_sprites.webp);mask-image: url(/images/01/smoke_sprites.webp);-webkit-mask-size: 100% 4800%;mask-size: 100% 4800%;-webkit-mask-position: 0 0;mask-position: 0 0;}
#banner.is-play{animation: mask-play 2s steps(47) forwards, mmfadeIn-noScale 1s cubic-bezier(0, 0, 0.2, 1) 0s both;}
@keyframes mmfadeIn-noScale{from{opacity:0}to{opacity:1}}
#banner_box , #banner_box .item , #banner_box .img_box {position: relative;overflow: hidden;}
#banner_box .img_box img {min-width: 100vw;width: 100vw;aspect-ratio: 5/2;-webkit-transform: scale(1);-webkit-animation: scale_banner 6s linear infinite;animation: scale_banner 10s linear infinite;}
#banner_box .img_box iframe , #banner_box .img_box video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner_box .slick-dotted .slick-track { min-width: 100vw; }
#banner_box .info_box , #banner_box .atag_item { position: absolute; }
#banner_box .info_box { width: 100%; height: 80%; display: flex; align-items: center; top: 0; left: 0; }

#banner .bottom{display: grid;position:absolute;bottom: 0;left: 7.5%;width: 85%;border-top: 1px solid rgb(255 255 255 / 50%);grid-template-columns: repeat(2, 1fr);z-index: 2;align-items: center;padding: 12px 0;}
#banner #scrollDown a{color:#fff;font-family:"Arimo",serif;font-size:15px;margin-left:15px}
#banner #scrollDown a svg{fill:#fff;margin-right: 15px;}
#banner .btn{display: flex;align-items: center;padding: 0;z-index: 5;justify-content: flex-end;}
#banner .btn a{margin-right:15px;width: 35px;aspect-ratio: 1/1;text-align: center;line-height: 47px;border-radius: 50px;}
#banner .btn a#banner_prev svg{transform:scaleX(-1);}
#banner .btn a svg{fill: white;}
#banner .slick-dots{bottom: 2.5%;width: auto;display: flex !important;align-items: center;right: 14%;justify-content: flex-end;z-index: 9;}
#banner .slick-dots li{margin: 5px 2.5px;}
#banner .slick-dots li button{border: 1px solid #75757500;border-radius: 50px;}
#banner .slick-dots li.slick-active button{border: 1px solid #fff;}
#banner .slick-dots li button:before{opacity:1;color: #fff;}

#banner_box .track{position:absolute;width:100vw;max-width:100%;z-index: 0;bottom: 7rem;white-space:nowrap;display: none;}
#banner_box .track p{font-weight: 400;font-size: max(13.5 * (1vw + 1vh) / 2, 45px);margin:0;letter-spacing: 9px;line-height:1;will-change:transform;animation: marquee 35s linear infinite;color: white;font-family: "Cormorant", serif;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

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

@media screen and (max-width: 1680px){
    #banner .slick-dots{bottom: 3%;}
}
@media screen and (max-width: 1440px){
    #banner .slick-dots{bottom: 3.5%;right: 15%;}
}
@media screen and (max-width: 1280px){
    #banner .slick-dots{bottom: 4%;right: 17%;}
}
@media screen and (max-width: 1024px){
    #banner .slick-dots{bottom: 3.5%;right: 20%;}
}
@media screen and (max-width: 1160px){
	#banner_box .img_box img { aspect-ratio: 5/3; }
}
@media screen and (max-width: 640px){
	#banner_box .img_box img { aspect-ratio: 3/3; }
    #banner{padding-top:80px;}
}