#banner{position:relative;overflow: hidden;margin-top: 135px;}
#banner:before{content:url(/images/01/img-banner-left.png);position: absolute;top: 0;left: 0;z-index: 2;}
#banner:after{content:url(/images/01/img-banner-left.png);position: absolute;top: 0;right: 0;z-index: 2;transform: scaleX(-1);}

#banner_box , #banner_box .item , #banner_box .img_box { position: relative; }
#banner_box .img_box img { min-width: 100vw; width: 100vw; aspect-ratio: 5/2; }
#banner_box .img_box iframe , #banner_box .img_box video {position: absolute;width: 100%;height: auto;top: -25%;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: 55%;display: flex;align-items: center;bottom: 0;left: 0;}
#banner_box .info_box *{color:#fff;}
#banner_box .info_box h3{font-family: "Poppins", sans-serif;word-spacing: 100vw;font-size: max(6 * (1vw + 1vh) / 2, 50px);font-weight: 300;line-height: 1.2;}
#banner_box .info_box p{font-size:30px;letter-spacing: 4px;}

p.baScro{position:absolute;bottom: 70px;right: 12vw;overflow: hidden;z-index: 10;}
p.baScro a{position: relative;cursor: pointer;display: flex;align-items: center;justify-content: center;flex-direction: row;writing-mode: vertical-lr;}
p.baScro a svg{width: 17px;height: 17px;fill: var(--white);margin-top: 10px;}
p.baScro a b{font-size: 14px;font-weight: 400;color: var(--white);margin-bottom: 10px;letter-spacing: 1px;-webkit-animation-name: mouse;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration: 1s;}
p.baScro a span{width: 26px;height: 40px;background-color: rgb(255 255 255 / 18%);border-radius: 50px;display: flex;align-items: center;justify-content: center;position: relative;}
p.baScro a span:after{content:'';width: 6px;height: 6px;background: #fff;border-radius: 50px;top: 10px;position: absolute;}
p.baScro a:hover b:after{transition: transform 0.2s cubic-bezier(0.25,1,0.5,1);top: 72px;width: 100px;}
p.baScro a:hover span:after{width: 10px;height: 10px;top: 20px;}
@keyframes mouse{0%{margin-bottom:40px}50%{margin-bottom:50px;}100%{margin-bottom:40px;}}

#banner .allwrap{position:absolute;right:0;bottom:0;width:100%}
#banner .allwrap #canvas-container{position:absolute;bottom: 550px;}

@media screen and (max-width: 1160px){
    p.baScro{display:none;}
	#banner_box .img_box img { aspect-ratio: 5/3; }
    #banner_box .img_box iframe, #banner_box .img_box video{width: auto;height: 100%;top: 0;}
}
@media screen and (max-width: 640px){
    #banner_box .info_box p{font-size: 20px;}
	#banner_box .img_box img { aspect-ratio: 3/4; }
    #banner{margin-top:110px;}
    #banner:before, #banner:after{display:none;}
}