/* banner */
#banner , #banner *{transition: all 0.3sease-in-out;-webkit-transition: all 0.3sease-in-out;}
#banner {width: 100vw;z-index: 3;}
#banner .slick-slide { min-width: 100vw; }
#banner .item {height: 97vh;}
#banner .main-slider { -webkit-clip-path: url(#clip_banner); clip-path: url(#clip_banner); }
#banner .item .clip >* {min-width: 100vw;width: 100vw;}
#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%); }
#banner .item .info >div { margin: auto; 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; }
#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: 18px; }
#banner .item .info >div .txt h3 { margin-bottom: 15px; line-height: 120%; font-size: 35px; }

#banner #scrollDown{cursor:pointer;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:center;align-items:center;position:absolute;bottom: 10%;left: calc(10% - 45px);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: var(--white);writing-mode:vertical-lr;letter-spacing:0.5px;margin-bottom:40px;font-size: 15px;font-family: "Nunito Sans", sans-serif;font-weight: 500;}
#banner #scrollDown span.scrollBtn{width:25px;height:44px;border-radius:12.5px;background-color: rgb(229 229 229 / 20%);position:relative;overflow:hidden;margin-bottom: 12px;}
#banner #scrollDown:hover span.scrollBtn:after{background-color: #fff;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 var(--white);border-bottom: 2px solid var(--white);-webkit-transform:rotate(45deg);transform:rotate(45deg);display:block}

#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 .slick-dots{bottom: 35%;width: auto;display: flex !important;flex-direction: row;bottom: 5%;left: 50%;transform: translate(-50%, -50%);}
#banner .slick-dots li{margin: 2px 0;}
#banner .slick-dots li button{border: 1px solid #75757500;border-radius: 50px;}
#banner .slick-dots li.slick-active button{border: 1px solid rgb(255 255 255 / 50%);}
#banner .slick-dots li button:before{opacity:1;color:#fff}

@media screen and (max-width: 1400px){
	#banner #scrollDown{bottom: 100px;}
}
@media screen and (max-width: 1280px){
}
@media screen and (max-width: 1024px){
	#banner .slick-dots{bottom: 0%;}
	#banner #scrollDown{display: none;}
	#banner .item { height: 65vh; }
}
@media screen and (max-width: 980px){
	#banner .slick-dots{display: none !important;}
	#banner .item {height: 55vh;}
}
@media screen and (max-width: 640px){
	#banner { padding-top: 65px; }
	#banner .item {height: 29vh;}
}