/* banner */
#banner {width: 100%;z-index: 3;}
#banner .slick-slide { min-width: 100%; }
#banner:before{content:'';width: 40px;height: 100%;position: absolute;right: 0;top: 0;background: linear-gradient(180deg, var(--secondary), var(--complement) 110%);z-index: 2;}
#banner .item { height: 95vh; }
#banner .item a{z-index:5}
#banner .item .clip:before{content:'';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(0deg, #222c5f -10%, rgb(0 0 0 / 5%));z-index: 1;opacity: .5;}
#banner .item .clip:after{content:'';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(180deg, #222c5f -10%, rgb(0 0 0 / 5%));z-index: 1;opacity: .5;}
#banner .item:after{content:'';position:absolute;bottom:-10px;right:0;width:1250px;height: 640px;background:url(/images/44/img-bannerlogo.png) no-repeat right bottom;background-size:contain;mix-blend-mode:soft-light;opacity: 0.6;pointer-events:none;z-index: 1;}
#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{z-index:3}
#banner .item .info >div {margin: auto auto 10.5%;width: calc(100% - 60px);display: flex;flex-direction: column;align-items: center;}
#banner .item .info >div .txt:last-child{width: auto;background: linear-gradient(90deg, var(--secondary), var(--complement), var(--secondary));background-size: 300% 100%;animation: gradientMove 20s ease infinite;transform: skewX(-40deg);padding: 15px 70px;margin-top: 30px;}
@keyframes gradientMove{0%{background-position:0% 0%;}50%{background-position:100% 50%;}100%{background-position:0% 30%;}}
#banner .item .info >div .txt p{transform: skewX(40deg);}
#banner .item .info >div .txt >* {font-size: 24px;color: white;letter-spacing: 6px;font-weight: 300;}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 1.5;font-size: 55px;word-spacing: 100vw;text-align: center;letter-spacing: 0;font-weight: 400;overflow: hidden;}
#banner .item .info >div .txt em {margin-bottom: 10px;line-height: 120%;font-size: 20px;font-family: "Syne", sans-serif;text-transform: uppercase;font-style: unset;letter-spacing: 4px;font-weight: bold;overflow: hidden;white-space: nowrap;animation: typing 3s steps(30, end), blink .75s step-end infinite;}
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink{from,to{border-color:transparent}50%{border-color:rgba(255,255,255,0.4);}}
#banner .item.slick-current .clip .bgBox { -webkit-animation: scale_banner 6s linear infinite; animation: scale_banner 6s linear infinite; }

#banner .baScro{position:absolute;left: 49%;bottom: 20px;z-index: 10;cursor: pointer;}
#banner .baScro a{display:flex;flex-direction: column;align-items: center;gap: 25px;}
#banner .baScro a span{width:1px;height: 90px;background: white;position: relative;}
#banner .baScro a span:before{content:'';width: 1px;position: absolute;top: 0;height: 45%;background: var(--secondary);animation: scrollLine 2.5s infinite ease-in-out;}
@keyframes scrollLine{0%{top:0%;height:55%}100%{top:100%;height:0%}}
#banner .baScro svg{width:20px;height: 20px;fill: white;}

@media screen and (max-width: 1440px){
    #banner .item:after{width: min(55%, 1000px);}
    #banner .item .info >div .txt .h3{font-size:45px;}
}
@media screen and (max-width: 1280px){
    #banner:before{width:25px;}
	#banner .baScro{display: none;}
}
@media screen and (max-width: 1024px){
	#banner .item { height: 85vh; }
    #banner .item .clip video{width:auto;height: 100%;}
}
@media screen and (max-width: 980px){
    #banner:before{display:none;}
}
@media screen and (max-width: 640px){
    #banner .item:after{width: 140%;right: -60%;}
	#banner .item { height: 65vh; }
    #banner .item .info >div{margin-bottom:20%}
    #banner .item .info >div .txt:last-child{padding: 15px 26px;}
    #banner .item .info >div .txt >*{font-size: 17px;letter-spacing: 3px;}
    #banner .item .info >div .txt em{font-size:14px}
    #banner .item .info >div .txt .h3{font-size:30px;}
}