/* banner */
#banner{margin: 0 0 0 auto;width: 95%;height:100%;z-index:3}
#banner:before{content:'';position:absolute;height: 40%;width:10%;bottom:0px;left:-8%;background:var(--primary)}
#banner .item{height: 100vh;}
#banner .main-slider{-webkit-clip-path:url(#clip_banner);clip-path:url(#clip_banner)}
#banner .item .clip >*{min-width:96vw;width:96vw}
#banner .item .clip .bgBox{transform:scale(1.3);-webkit-transform:scale(1.3)}
#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: 0;left: 0;right: 0;bottom: 0;}
#banner .item .info >div{margin:auto auto 5% 8%;width:calc(100% - 13%)}
#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}
#banner .item .info >div .txt:nth-child(2){-webkit-transition-delay:.4s;transition-delay:.4s}
#banner .item .info >div .txt >*{padding: 10px 15px 10px 0;max-width:calc(100% - 30px);font-size:25px}
#banner .item .info >div .txt{line-height:140%;letter-spacing: 4px;font-size:64px;font-weight: 500;text-transform:uppercase;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}
#banner .item .info >div .txt p{letter-spacing: 10px;font-weight: 400;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}
#banner .item.slick-current .info >div .txt{transform:scaleX(1);-webkit-transform:scaleX(1)}
#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:10%;left:-3.2%;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:#fff;-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}
#banner #scrollDown span.scrollBtn{width:25px;height:44px;border-radius:12.5px;background-color:rgb(255 255 255 / 10%);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:#fff;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 #fff;border-bottom:2px solid #fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
@-webkit-keyframes scale_banner{to{-webkit-transform:scale(1)}}
@keyframes scale_banner{to{transform:scale(1)}}
#banner .sideflyJJ.sebox01{position: absolute;top: 10%;left:-3vw;width:13vw;z-index:2;}
#banner .sideflyJJ.sebox02{position: absolute;right: -2vw;bottom: 29%;width:9vw;z-index:2;}
@media screen and (max-width:1470px){
    #banner .item .clip video{width:auto;height: auto;}
}
@media screen and (max-width:1280px){
    #banner{width:100vw;margin-top:90px}
    #banner:before,#banner #scrollDown{display:none}
    #banner .item .info >div .txt{font-size:48px}
}
@media screen and (max-width:1024px){
    #banner .item{height: 70vh;}
    #banner .item .info >div .txt{font-size:30px;padding:0}
    #banner .item .info >div .txt p{font-size:19px;padding:0}
}
@media screen and (max-width:768px){
    #banner{margin-top: 70px;}
    #banner .item{height: 60vh;}
    #banner .item .info >div .txt{font-size:32px;width:70%}
    #banner .item .info >div .txt p{padding:0;letter-spacing:5px}
    #banner .item .clip video{}
}
@media screen and (max-width:400px){
    #banner .item .info >div .txt{font-size:24px;width:100%}
   #banner .item{height: 50vh;}
}