/* banner */
#banner {  width: 100%; z-index: 3; }
#banner .item { height: 100vh; }
#banner .main-slider { }
#banner .item .clip >* { min-width: 100%; width: 100%; }
#banner .item .clip:before{content:'';position:absolute;background-image: linear-gradient(to bottom,rgb(0 0 0 / 50%),transparent 70%),linear-gradient(to right,rgb(0 0 0 / 40%),transparent 100%);width:100%;height:100%;z-index:3}
#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: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
#banner .item .info >div {margin: auto auto 15%;width: calc(75% - 60px);z-index: 5;}
#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 >* {width: 50%;font-size: 20px;letter-spacing: 2px;line-height: 2;}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 150%;font-size: 45px;word-break: keep-all;}

#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;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: 14%;z-index:2}
#banner .upDown{width:100%;height:100%;bottom:0;left:0;z-index:2;position:absolute}
#banner #scrollDown span.text{display: none;color: var(--white);-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;letter-spacing:0.5px;margin-bottom:40px;font-family: "Karla",sans-serif;font-size:15px}
#banner #scrollDown span.scrollBtn{width:25px;height:44px;border-radius:12.5px;background-color: rgb(255 255 255 / 15%);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: 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 var(--white);border-bottom: 2px solid var(--white);-webkit-transform:rotate(45deg);transform:rotate(45deg)}
@-webkit-keyframes scale_banner{to{-webkit-transform:scale(1)}}
@keyframes scale_banner{to{transform:scale(1)}}

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

@media screen and (max-width: 1680px){
	#banner #scrollDown{bottom: 16%;left: 14.5%;}
}
@media screen and (max-width: 1440px){
	#banner .item .info >div .txt >*{width: 60%;}
}
@media screen and (max-width: 1024px){
    #banner .item .clip video{width:auto;height:100%}
	#banner .item .info >div .txt >*{width: 80%;}
    #banner #scrollDown{display:none;}
    #banner .item .info >div *{text-align:center;}
    #banner .item .info >div{margin-bottom:10%;width: calc(90% - 60px);}
}
@media screen and (max-width: 980px){
    #banner .item .info >div .txt .h3{font-size:35px;word-break: break-word;}
    #banner .item{height: 80vh;}
}
@media screen and (max-width: 680px){
    #banner .item .info >div{margin-bottom:25%}
	#banner .item .info >div .txt >*{width: 90%;}
    #banner .item .info >div .txt .h3{font-size: 28px;}
    #banner .item .info >div .txt >*{font-size: 16px;}
}