#banner , #banner .item { position: relative; background: #fff; z-index: 100; }
#banner .item a {position: absolute;width: 100%;height: 100%;background: rgb(106 106 106 / 30%);top: 0;left: 0;z-index: 2;}
#banner .info {position: absolute;width: 50%;bottom: 8vh;z-index: 3;left: 500px;}
#banner .info h2{font-size: 50px;text-transform: uppercase;color: #fff;line-height: 150%;word-spacing: 100vw;font-weight: 400;letter-spacing: 8px;text-align: center;}
#banner .info h3 {display: block;line-height: 110%;font-size: 16px;font-weight: 400;color: #fff;margin: 20px 0;font-family: 'Archivo','Noto Sans SC';text-align: center;}
#banner .info p {margin-top: 10px;font-weight: 300;color: #fff;font-size: 20px;text-align: center;}
#banner .img {position: relative;width: 100vw;height: 97vh;background: no-repeat 50% / cover;overflow: hidden;}
#banner .img img , #banner .img video , #banner .img iframe {position: absolute;width: 100vw;height: auto;left: 0;top: 0;}

/* baScro */
#banner .baScro{position:absolute;right: 50px;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: #fff;}
#banner .baScro a span{height: 120px;width: 1px;background: #fff;margin: 20px 0;position: relative;}
#banner .baScro a span:before{content:'';position: absolute;top: 0;left: 0;height: 60px;width: 1px;background: #087883;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: #fff;}
@keyframes fish{0%{top:0;}100%{top:60px;}}

@media screen and (max-width: 1500px){
    #banner .info{
    left: 25%;
}
}
@media screen and (max-width: 1400px){
    #banner:after{bottom: 110px;}
}
@media screen and (max-width: 1280px){
    #banner:before{right: 100px;}
    #banner:after{right: 35px;}
}
@media screen and (max-width: 1024px){
    p.baScro a{display:none;}
    #banner .img video{height:100%;width: auto;}
    #banner .info{bottom: -10%;width: 70%;left: 50%;transform: translate(-50%, -50%);}
    #banner .baScro{
    display: none;
}
}
@media screen and (max-width: 768px){
   #banner:after, #banner:before{display:none;}
}
@media screen and (max-width: 640px){
    #banner .info{
    bottom: -45px;
}
    #banner .info h2{font-size: 27px;letter-spacing: 2px;}
    #banner .img{height: 70vh;}
    #banner .info h3{font-size: 13px;}
    #banner .info p{font-size: 17px;}
}