/* banner */
#banner {width: 100vw;z-index: 3;}
#banner .item {height: 98vh;}
#banner .slick-slide { min-width: 100vw; }
#banner .item .clip >* {min-width: 100vw;width: 100vw;}
#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 13%;width: calc(100% - 60px);display: flex;flex-direction: column;align-items: center;}
#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: 22px;color: var(--white);letter-spacing: 4px;text-align: center;}
#banner .item .info >div .txt h3 { margin-bottom: 15px; line-height: 120%; font-size: 35px; }
#banner .item .info >div .txt em {font-weight: 400;font-style: unset;font-size: 18px;font-family: "Anybody", serif;letter-spacing: 2px;}

#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: 4%;left: 49%;z-index:2}
#banner .upDown{width:100%;height: 100%;bottom: 0;left: 0;z-index: 2;position: absolute;}
#banner #scrollDown span.text{display:block;color: #fff;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;letter-spacing:0.5px;margin-bottom: 30px;font-size: 14px;font-family: "Lato", serif;text-transform: uppercase;}
#banner #scrollDown span.scrollBtn{width: 16px;height: 29px;border-radius:12.5px;position:relative;overflow:hidden;margin-bottom:12px;border: 1px solid var(--white);}
#banner #scrollDown:hover span.scrollBtn:after{top:65%;}
#banner #scrollDown span.scrollBtn:after{content:"";width: 2px;height: 5px;background-color: var(--white);position:absolute;top:20%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-animation: scrollDown_mouse 1.5s linear infinite;animation: scrollDown_mouse 1.5s linear infinite;}
#banner #scrollDown span.scrollArrow{width: 6px;height: 6px;border-right: 1px solid var(--white);border-bottom: 1px solid var(--white);-webkit-transform:rotate(45deg);transform:rotate(45deg);display:block}

.text-js{opacity:0;font-size: max(3.6 * (1vw + 1vh) / 2, 30px);color: var(--white);font-weight: 400;text-transform: uppercase;line-height: 1.5;letter-spacing: 2px;word-spacing: 100vw;max-width: 100%;text-align: center;}
.cursor{display:block;position:absolute;height: 110%;top:0;right:-5px;width: 1px;background-color:transparent;z-index:1;animation:flash 0.5s none infinite alternate}

@keyframes flash{0%{opacity:1}100%{opacity:0}}
@keyframes scrollDown_mouse {0%{top:5px}33%{top:15px}100%{top:5px}}

@media screen and (max-width: 1024px){
    #banner #scrollDown{display:none;}
    #banner .item .clip video{height:100%;width: auto;}
	#banner .item { height: 90vh; }
}
@media screen and (max-width: 640px){
	#banner .item { height: 70vh; }
    #banner .item .info >div .txt >*{font-size:18px;letter-spacing: 2px;}
}