/* banner */
#banner {z-index: 3;}
#banner .item:before {content: "";width: 100%;height: 80%;position: absolute;bottom: 0;background: linear-gradient(180deg, rgb(0 0 0 / 0%), var(--secondary) 100%);z-index: 1;opacity: .75;pointer-events: none;}
#banner .item:after {content: "";width: 100%;height: 80%;position: absolute;top: 0;background: linear-gradient(0deg, rgb(0 0 0 / 0%), var(--secondary) 100%);z-index: 1;opacity: .75;pointer-events: none;}
#banner .item { height: 98vh; }
#banner .item >a{background: rgb(17 19 21 / 10%);z-index: 12;}
#banner .main-slider {}
#banner .item .clip >* { min-width: 100%; width: 100%; }
#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: 110%;height: auto;top: 50%;left: 55%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);}
#banner .item .info{position:relative;z-index: 11;}
#banner .item .info >div {margin: auto;width: calc(85% - 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 >* {max-width: calc(100% - 30px);font-size: 25px;display: block;}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 120%;font-family: "Oswald", sans-serif;font-size: max(5 * (1vw + 1vh) / 2, 35px);}
#banner .top-fv__borders {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 0;}
#banner .top-fv__borders span { position: absolute; background-color: rgba(255,255,255,0.08); }
#banner .top-fv__borders span:nth-child(1) { left: 13.5vw; top: 0; height: 100%; width: 1px; }
#banner .top-fv__borders span:nth-child(2) { left: 31.5vw; top: 0; height: 100%; width: 1px; }
#banner .top-fv__borders span:nth-child(3) { left: 50vw; top: 0; height: 100%; width: 1px; }
#banner .top-fv__borders span:nth-child(4) { left: 68.5vw; top: 0; height: 100%; width: 1px; }
#banner .top-fv__borders span:nth-child(5) { left: 86.5vw; top: 0; height: 100%; width: 1px; }
#banner .top-fv__borders span:nth-child(6) { top: 20%; left: 0; width: 100%; height: 1px; }
#banner .top-fv__borders span:nth-child(7) { top: 50%; left: 0; width: 100%; height: 1px; }
#banner .top-fv__borders span:nth-child(8) { top: 80%; left: 0; width: 100%; height: 1px; }
#banner .top-fv__borders span::after { content: ''; position: absolute; top: 0; left: 0; background-color: var(--primary); opacity: 0.8; box-shadow: 0 0 10px #4c90ce; }
#banner .top-fv__borders span:nth-child(-n+5)::after { width: 100%; height: 30px; animation: borderDrop 4s linear infinite; }
#banner .top-fv__borders span:nth-child(2)::after { animation-delay: 1s; }
#banner .top-fv__borders span:nth-child(4)::after { animation-delay: 2.5s; }
#banner .top-fv__borders span:nth-child(n+6)::after { height: 100%; width: 100px; animation: borderSlide 6s linear infinite; }
@keyframes borderDrop {  0% { top: -100px; opacity: 0; }  50% { opacity: 1; }  100% { top: 100%; opacity: 0; }}
@keyframes borderSlide {  0% { left: -100px; opacity: 0; }  50% { opacity: 1; }  100% { left: 100%; opacity: 0; }}

#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); }

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

@media screen and (max-width: 1280px){
    #banner .item .info >div{margin-bottom: 15%;}
}
@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 .top-fv__borders span:nth-child(4), #banner .top-fv__borders span:nth-child(5){display:none;}
    #banner .top-fv__borders span:nth-child(2){left:50vw}
    #banner .top-fv__borders span:nth-child(3){left: 83.5vw;}
    #banner .item .info >div{    width: calc(95% - 60px);    }
	#banner .item { height: 65vh; }
    #banner .item .info >div .txt >*{font-size:20px;}
}
@media screen and (max-width: 680px){
    #banner .item .info >div .txt >*{font-size: 15px;}
}