#banner{z-index:3}
#banner .item{height:98vh}
#banner .item a.atag_item{z-index: 99;}
#banner .item .clip >*{min-width:100%;width:100%}
#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{width:calc(100% - 0px);z-index:20}
#banner .item .info >div .txt{-webkit-transition-delay:.2s;transition-delay:.2s;transform:scaleY(0);-webkit-transform:scaleY(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;letter-spacing:2px;font-weight:300;color:#fff}
#banner .item .info >div .txt h3{line-height:140%;font-size:40px;font-weight:300;letter-spacing:3px}
#banner .info{position:absolute;width:56%;top:58vh;left:16%;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;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}

p.baScro{position:absolute;bottom:70px;left:110px;overflow:hidden}
p.baScro a{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:row;writing-mode:vertical-lr}
p.baScro a svg{width:17px;height:17px;fill:var(--white);margin-top:10px}
p.baScro a b{font-size:14px;font-weight:400;color:var(--white);margin-bottom:10px;letter-spacing:1px;-webkit-animation-name:mouse;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-duration:1s}
p.baScro a span{width:26px;height:40px;background-color:rgb(255 255 255 / 18%);border-radius:50px;display:flex;align-items:center;justify-content:center;position:relative}
p.baScro a span:after{content:'';width:6px;height:6px;background:#fff;border-radius:50px;top:10px;position:absolute}
p.baScro a:hover b:after{transition:transform 0.2s cubic-bezier(0.25,1,0.5,1);top:72px;width:100px}
p.baScro a:hover span:after{width:10px;height:10px;top:20px}
@keyframes mouse{0%{margin-bottom:40px}
50%{margin-bottom:50px}
100%{margin-bottom:40px}
}
#banner .item.slick-current .info >div .txt{transform:scaleY(1);-webkit-transform:scaleY(1)}
#banner .allwrap{position:absolute;right:0;bottom:0;letter-spacing:12px;width:100%}
#banner .allwrap #canvas-container{position:absolute;bottom:610px}
#banner .fixTxt{position:absolute;right:-12%;bottom:-31px;letter-spacing:.5vw;color:#fff;font-size:5.6vw;font-family:"Tenor Sans",serif;width:100%}
.cnt{margin:auto;position:absolute;bottom:0;left:0;right:0;top:-190px;text-align:center}
@media screen and (max-width:1440px){
    p.baScro{bottom:40px;left:40px}
    #banner .info{width:100%;left:6%;top:33vh}
}
@media screen and (max-width:1140px){
    #banner .item{height:68vh}
    p.baScro{bottom:40px;left:40px}
    #banner .info{width:100%;left:6%;top:16vh}
    #banner .item{height:47vh}
}
@media screen and (max-width:1024px){
    p.baScro{display:none}
    #banner .item .info >div{}
    #banner .item .info >div .txt h3{font-size:28px}
    #banner .item .info >div .txt >*{font-size:19px}
    #banner .item .info >div .txt img{width:70%;margin:0 auto}
    #banner{margin-top:80px}
    #banner .fixTxt{bottom:0}
}
@media screen and (max-width:680px){
    #banner .clip .bgBox{position: absolute;height: 440px;top: -80px;background-position: 15% 50%;}
    #banner .info{top:10vh}
    p.baScro{display:none}
    #banner .item{height: 300px;}
    #banner .item .info >div .txt h3{font-size:22px}
    #banner .item .info >div .txt >*{font-size:14px;padding:4px 15px}
    #banner .item .clip video{width:120%}
    #banner .allwrap #canvas-container{bottom:430px}
}