/* banner */
#banner {width: 100%;z-index: 3;}
#banner .item { height: 100vh; }
#banner .main-slider {  }
#banner .item .clip >* { min-width: 96%; width: 96%; }
#banner .item .clip .bgBox {  }
#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%);filter: saturate(150%);filter: hue-rotate(
10deg) saturate(120%) contrast(1);}
#banner .item .info{background: linear-gradient(180deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 20%));}
#banner .item .info >div {margin: auto auto 12%;width: calc(100% - 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;text-align: center;}
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* {padding: 10px 15px;max-width: calc(100% - 30px);font-size: 22px;color: white;text-align: center;}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 150%;font-size: 45px;word-spacing: 100vw;font-weight: 500;letter-spacing: 3px;}

#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 .scrollDown {cursor: pointer;position: absolute;z-index: 10;left: 50%;bottom: 0;transform: translate(-50%, -10px);color: #fff;font-size: 14px;letter-spacing: 1px;display: flex;flex-direction: column;align-items: center;padding-bottom: 10px;width: 360px;}
#banner .scrollDown span {text-shadow: 0px 1px 20px rgba(0, 0, 0, 0.3);font-family: 'Kanit', sans-serif;color: var(--white);font-size: 12px;}
#banner .scrollDown img.scrrollmouse {padding-bottom: 40px;animation: scrolldownrun 0.8s linear infinite;}
#banner .scrollDown img.scrollbg {position: absolute;z-index: 1;left: 50%;bottom: 0;transform: translate(-50%, 0);width: 100%;}
@keyframes scrolldownrun {0% {transform: translate(0, -5px);}50% {transform: translate(0, 10px);}100% {transform: translate(0, -5px);}}

@media screen and (max-width: 1680px){
	#banner .item .clip video{width:auto;height:100%}
}
@media screen and (max-width: 1024px){
	#banner .item { height: 90vh; }
}
@media screen and (max-width: 980px){
	#banner .scrollDown{display: none;}
}
@media screen and (max-width: 640px){
    #banner .item .info >div .txt .h3{font-size: 30px;}
    #banner .item .info >div .txt >*{font-size: 15px;}
}