/* banner */
#banner {z-index: 2001;overflow: hidden;margin-left: 190px;}
#banner .slick-slide { min-width: 100%; }
#banner .item {height: 100vh;}
#banner .main-slider {}
#banner .item .clip >* { min-width: 100%; width: 100%; }
#banner .item .clip:before{content:'';position: absolute;width: 100%;height: 100%;top: 0;background: #000;z-index: 1;opacity: .25;}
#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;bottom: 0;left: 0;}
#banner .item .info >div {margin: auto auto 7%;width: calc(85% - 80px);z-index: 2;}
#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 >* {font-size: 20px;font-weight: 300;letter-spacing: 3px;width: 45%;line-height: 2;}
#banner .item .info >div .txt .h3 {width: 40%;margin-bottom: 45px;line-height: 150%;font-size: 45px;font-weight: 400;letter-spacing: 5px;word-break: keep-all;}
#banner .item .info >div .txt em {line-height: 120%;font-size: max(6.5 * (1% + 1vh) / 2, 12px);font-style: unset;padding-bottom: 20px;letter-spacing: 0;width: 100%;font-weight: 400;font-family: "DM Sans", sans-serif;}

#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:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction: column;-webkit-box-align:center;align-items:center;position:absolute;bottom: 6%;right: 4%;z-index:2}
#banner .upDown{width:100%;height: 100%;bottom: 0;left: 0;z-index: 2;position: absolute;}
#banner span{writing-mode: vertical-lr;font-family: "Lato", serif;color: #fff;line-height: 1;}
#banner svg{fill:#fff;width: 18px;height: 18px;margin-bottom: 20px;animation-name: mouse;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
@keyframes mouse{0%{margin-bottom:20px}100%{margin-bottom:50px}}

@media screen and (max-width: 1280px){
    #banner{margin:0;z-index: 3;}
}
@media screen and (max-width: 1024px){
    #banner .item .info >div .txt .h3{width:50%}
	#banner .item .info >div .txt >*{width: 70%;font-size: 20px;letter-spacing: 1px;}
	#banner:before{width: 40%;height: 100%;top: 60px;}
	#banner .item { height: 85vh; }
    #banner #scrollDown{display:none;}
}
@media screen and (max-width: 980px){
    #banner .item .info >div .txt .h3{width: 90%;}
    #banner .item .clip video{width:auto;height: 100%;left: -25%;}
	#banner .item .info >div .txt >*{width: 80%;}
	#banner #scrollDown{display:none}
	#banner .item .info >div{width: calc(90% - 30px);}
}
@media screen and (max-width: 640px){
	#banner .item { height: 65vh; }
	#banner .item .info >div{margin-bottom: 13%;}
	#banner .item .info >div .txt >*{width: 100%;font-size: 16px;}
	#banner:before{display:none;}
	#banner .item .info >div .txt .h3{font-size:22px;margin-bottom: 20px;}
}