/* banner */
#banner {width: 100vw;z-index: 3;}
#banner:before{content:'';position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: linear-gradient(360deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 80%));}
#banner .item { height: 100vh; }
#banner .main-slider {}
#banner .item .clip >* { min-width: 100vw; width: 100vw; }
#banner .item .clip:after {content:'';width: 100%;background: #555;height: 100%;position: absolute;top: 0;left: 0;opacity: .15;z-index: 2;}
#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%);opacity: .9;z-index: 1;}
#banner .item .info{z-index:5}
#banner .item .info >div {margin: auto;width: calc(70% - 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;width: 45%;}
#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: 25px;letter-spacing: 8px;}
#banner .item .info >div .txt h3 {line-height: 120%;font-family: "Raleway", sans-serif;font-size: max(5 * (1vw + 1vh) / 2, 35px);letter-spacing: 0;font-weight: 500;}
#banner .item .clip .bgBox{z-index: 3;position: absolute;}

#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: 17.5%;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;position: absolute;top: -60px;animation-name: circle;animation-iteration-count: infinite;animation-timing-function: linear;animation-duration: 35s;-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
@keyframes circle{0%{transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);}}#banner #scrollDown span.scrollBtn{width:25px;height:44px;border-radius:12.5px;background-color: rgb(255 255 255 / 30%);position:relative;overflow:hidden;margin-bottom:12px}
#banner #scrollDown:hover span.scrollBtn:after{top:65%;}
#banner #scrollDown span.scrollBtn:after{content:"";width:5px;height:5px;background-color: var(--white);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);display:block}

#banner .slick-dots{bottom: 27%;width: auto;display: flex !important;flex-direction: column;align-items: center;left: calc(20% - 47px);justify-content: flex-start;}
#banner .slick-dots li{margin: 5px 0;}
#banner .slick-dots li button{border: 1px solid rgb(255 255 255 / 0%);border-radius: 50px;}
#banner .slick-dots li.slick-active button{border: 1px solid rgb(255 255 255 / 35%);}
#banner .slick-dots li button:before{opacity:1;color:#ffffff}

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

@media screen and (max-width: 1400px){
	#banner #scrollDown{left: 8%;}
}
@media screen and (max-width: 1024px){
    #banner .item .info >div{width: calc(90% - 60px);}
    #banner .item .clip video{width:auto;height: 100%;}
    #banner #scrollDown{display:none;}
	#banner .item { height: 80vh; }
}
@media screen and (max-width: 980px){
    #banner .item .info >div .txt h3{margin-bottom: 15px;}
    #banner .item .info >div{width: calc(90% - 30px);}
    #banner .item .info >div .txt{width:50%}
	#banner .item { height: 60vh; }
    #banner .item .info >div .txt >*{padding:0}
}
@media screen and (max-width: 640px){
    #banner .item .info >div{margin-bottom: 10%;}
    #banner .item .clip .bgBox{background-position: 65% 50%;}
    #banner .item .info >div .txt >*{font-size:20px;}
    #banner .item .info >div .txt{width: 90%;}
}