#banner{position:relative;overflow: hidden}
#banner .workframe { margin: 0 auto 0 8%; width: 20vw;}
#banner_box .slick-slider{margin:0}
#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: -20%;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: 100%;display: flex;align-items: center;top: 0;left: 0;}
#banner_box .info_box p{margin-top: 20px;font-size: 22px;color: var(--g_100);letter-spacing: 3px;}

#banner #scrollDown{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;bottom: 20%;left: 8%;z-index:2}
#banner .upDown{width:100%;height: 100%;bottom: 0;left: 0;z-index: 2;position: absolute;}
#banner #scrollDown span.text{display:block;color: #2b2b2b;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;letter-spacing:0.5px;margin-bottom:40px;font-family: "Kanit", sans-serif;font-size: 15px;display: none;}
#banner #scrollDown span.scrollBtn{width:25px;height:44px;border-radius:12.5px;background-color: rgb(234 234 234 / 35%);position:relative;overflow:hidden;margin-bottom:12px}
#banner #scrollDown:hover span.scrollBtn:after{top:65%;width:7px;height: 7px;}
#banner #scrollDown span.scrollBtn:after{content:"";width:5px;height:5px;background-color: #ffffff;border-radius:50%;position:absolute;top:20%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
#banner #scrollDown span.scrollArrow{width:10px;height:10px;border-right: 2px solid #ffffff;border-bottom: 2px solid #ffffff;-webkit-transform:rotate(45deg);transform:rotate(45deg);display:block}

#banner #canvas-container{position: absolute;bottom: -30%;}
.text-js{opacity:0;font-size: max(4.2 * (1vw + 1vh) / 2, 30px);color: var(--secondary);font-weight: 500;text-transform: uppercase;line-height: 1.3;letter-spacing: 2px;}
.cursor{display:block;position:absolute;height: 110%;top:0;right:-5px;width: 1px;background-color:#fff;z-index:1;animation:flash 0.5s none infinite alternate;display: none;}

@keyframes flash{0%{opacity:1}100%{opacity:0}}

@media screen and (max-width: 1680px){
	#banner .workframe{width: 25vw;}
}
@media screen and (max-width: 1440px){
	#banner #scrollDown{bottom: 10%;}
	#banner .workframe{width: 30vw;}
}
@media screen and (max-width: 1160px){
	#banner .workframe{width: 40vw;}
	#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: 980px){
	#banner #canvas-container{bottom: 15%;}
	#banner #scrollDown{display:none;}
	#banner .workframe{width: 70vw;margin-top: 25%;}
}
@media screen and (max-width: 640px){
	#banner #canvas-container{bottom: 5%;}
	#banner_box .info_box p{font-size:18px}
	#banner_box .info_box{align-items: flex-end;}
	#banner .workframe{width: 90vw;margin-bottom: 30px;}
	#banner_box .img_box iframe, #banner_box .img_box video{left: -30%;}
	#banner_box .img_box img { aspect-ratio: 3/3.5; }
}