#banner , #banner .item { position: relative; background: #fff; z-index: 100; }
#banner:before{content:'';width: 1px;height: 100%;background: var(--white);position: absolute;left: 18vw;top: 0;z-index: 2;opacity: .3;}
#banner:after{content:'';width: 100%;height: 1px;background: var(--white);position: absolute;left: 0;bottom: 11.5vw;z-index: 2;opacity: .3;}
#banner .item a { position: absolute; width: 100%; height: 100%; background: rgb(31 31 31 / .3); top: 0; left: 0; z-index: 2; }
#banner .info {position: absolute;width: 56%;top: 25vh;left: 22%;z-index: 3;}
#banner .info h3 {display: block;line-height: 140%;color: #fff;font-size: max(3.5*(1vw + 1vh) / 2, 20px);margin-top: 15px;font-weight: 400;width: 50%;letter-spacing: 3px;}
#banner .info em {margin-top: 10px;text-align: center;font-weight: 400;color: #fff;font-family: "Oswald", sans-serif;font-style: unset;font-size: max(6 * (1vw + 1vh) / 2, 35px);text-transform: uppercase;line-height: 1.3;}
#banner .img {position: relative;width: 100vw;height: 95vh;background: no-repeat 50% / cover;}
#banner .img img , #banner .img video , #banner .img iframe {position: absolute;width: 100vw;height: auto;left: 0;top: 0;-webkit-filter: grayscale(1);}

/* scrolldown */
#scrolldown { position: absolute; padding: 0 0 25px 10px; border-left: 1px #fff solid; letter-spacing: .3em; font-weight: 300; font-size: 12px; color: #fff; white-space: nowrap; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; bottom: 0; left: 30px; animation: godown 1s infinite linear; -webkit-animation: godown 1s infinite linear; }

/* baScro */
#banner .baScro{position:absolute;right: 140px;top: calc(50% - (215px / 2));}
#banner .baScro a{display:flex;flex-direction: column;align-items: center;cursor: pointer;}
#banner .baScro a b{font-size:16px;writing-mode: vertical-rl;font-weight: 400;color: var(--white);}
#banner .baScro a span{height: 120px;width: 1px;background: var(--white);margin: 20px 0;position: relative;}
#banner .baScro a span:before{content:'';position: absolute;top: 0;left: 0;height: 40px;width: 1px;background: var(--primary);animation-name: fish;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
#banner .baScro a svg{width:23px;height: 23px;fill: var(--white);}
@keyframes fish{0%{top:0;}100%{top:60px;}}

@media screen and (max-width: 1024px){
    #banner .baScro{right: 50px;}
    #banner .info h3{width: 75%;}
    #banner .info{top: 35vh;left: 10%;}
    #banner:before, #banner:after{display:none;}
    #banner .img img, #banner .img video, #banner .img iframe{width:auto;height: 100%;}
}
@media screen and (max-width: 980px){
    #banner .baScro{display:none;}
    #banner .info h3{width: 100%;}
    #banner .img{height:80vh}
    #banner .img video{left: -40%;}
}
@media screen and (max-width: 640px){
    #banner .img video{left: -80%;}
    #banner .img{height:70vh}
    #banner .info{width: 70%;}
}