/* banner */
#banner {width: 95%;z-index: 3;padding-left: 5%;}
#banner:before{content:'';position: absolute;bottom: 0;left: 0;width: 5vw;height: 150px;background: var(--primary);}
#banner .item { height: 100vh; }
#banner .main-slider {}
#banner .item .clip >* { min-width: 100%; width: 100%; }
#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 auto 11% auto;width: calc(80% - 25px);}
#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 .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 .t-rotate{display:inline-block;}
#banner .text-rotater .animated{animation-duration:1s;color: var(--primary);}
#banner .t600{font-weight:600}
#banner .ls3, #banner .ls3 span{letter-spacing: 4px;font-size: 50px;vertical-align: baseline;}
#banner .lead{font-size:22px;margin-top: 10px;letter-spacing: 2px;}

/* scrolldown */
#scrolldown {position: absolute;font-weight: 300;font-size: 13px;color: #1b1b1b;white-space: nowrap;-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;bottom: 10%;left: 30px;display: flex;flex-direction: row;align-items: center;gap: 20px;font-family: "Arimo", sans-serif;}
#scrolldown span{width:1px;height: 120px;background: #e7e7e7;position: relative;overflow: hidden;}
#scrolldown span:after{content:'';width: 1px;height: 50px;background: var(--primary);position: absolute;top: 0; animation: scrollLine 2s linear infinite;}
#scrolldown svg{width:20px;height: 20px;fill: white;margin-top: 40px;}

@keyframes scrollLine{0%{top:-50px;}100%{top:100px;}}

@media screen and (max-width: 1440px){
    #banner .ls3, #banner .ls3 span{font-size:40px;}
	#banner .item .info >div{width: calc(85% - 25px);}
	#banner .item { height: 90vh; }
}
@media screen and (max-width: 1400px){
    #banner .ls3, #banner .ls3 span{font-size:40px;}
	#banner .item .info >div{margin-bottom: 5%;}
}
@media screen and (max-width: 1280px){
	#scrolldown, #banner:before{display: none;}
	#banner {width: 100%;padding-left: 0;}
}
@media screen and (max-width: 1024px){
	#banner .item .info >div{margin-top: 2.5%;}
	#banner .item { height: auto; }
    #banner .item .info, #banner .item  .clip{position:relative;top: unset;left: unset;width: 100vw;height: 100%;}
    #banner .item .info:after{content:'';width: calc(52% + 8px);height: 100%;position: absolute;top: -5px;right: 0;background-image: url(/images/44/aboutBg.jpg);background-repeat: no-repeat;background-position: top right;background-size: cover;z-index: -1;}
    #banner .item  .clip{height: 70vh;}
}
@media screen and (max-width: 980px){
    #banner .item .info:after{width: calc(64% + 4px);}
    #banner .item .clip video{height:100%;width: auto;left: 40%;}
}
@media screen and (max-width: 640px){
	#banner .item .info >div{width: calc(90% - 25px);}
    #banner .lead{font-size:15px;letter-spacing: 1px;}
    #banner .ls3, #banner .ls3 span{font-size:25px;}
    #banner .item  .clip{height: 50vh;}
    #banner .item .info:after{display: none;}
}