#banner { width: 100%; z-index: 3; }

#banner img {width: 100%;height: auto;}
#banner .pos_abs {width: 100%;height: 100vh;top: 0;left: 0;}
#banner_box .img_box{ min-width: 100vw; width: 100vw; aspect-ratio: 5/2; }

#banner iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner video {position: relative;width: 100%;height: auto;top: 0;left: 0;right: 0;bottom: 0;}


#banner .info {z-index: 10;}
#banner .info:after{position:absolute;width:100%;height: 100vh;background: url(/images/39/img-bn-gradient.png) no-repeat 50% 100%;background-size: contain;bottom: -150px;left:0;z-index: 0;content:"";opacity:1}
#banner .info .txt {margin: auto;z-index: 10;}
#banner .info .txt * { font-weight: 400; color: var(--white); opacity: 0; -webkit-transform: translateY(15px); transform: translateY(15px); }
#banner .info .txt .main-title{font-size: 3rem;font-weight:bold;margin:0 0 30px 0;padding-top:20px;padding-bottom:30px;line-height:1;-webkit-transition-delay:0.3s;transition-delay:0.3s;color:#fff;position:relative;font-family: "Outfit", sans-serif;letter-spacing:2px}
#banner .info .txt .main-title::before{content:"";position:absolute;bottom:0;left:0;display:block;width: 110px;height: 1px;background:#fff}
#banner .info .txt .decoText{font-style:normal;color:var(--white);font-size: 2rem;font-weight:500;letter-spacing: 4.3px;}
#banner .info .txt .subtitle{font-size:20px;font-weight:400;-webkit-transition-delay:0.2s;transition-delay:0.2s;letter-spacing:1px;color:#fff;}
#banner .info .txt h3 { letter-spacing: 5px; font-size: 50px;  }
#banner .info .txt p { font-weight: 300; font-size: 18px; }
#banner a.pos_abs { z-index: 2; }

/* slick-current */
#banner .slick-current .info .txt * { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); transition-delay: .3s; -webkit-transition-delay: .3s; }
#banner .slick-current .info .txt p {letter-spacing: 3px;transition-delay: .6s;-webkit-transition-delay: .6s;}


/* baScro */
p.baScro{position:absolute;bottom: 130px;right: 8vw;overflow: hidden;z-index: 10;}
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;font-family: "Outfit", sans-serif;text-transform: uppercase;}
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;}}

@media (max-width:1280px){
    #banner .pos_abs{width: 100%;height: 100%;}
    #banner video{width: auto;height: 100%;}

}
@media screen and (min-width: 1281px){
	header #webmenu .top_btn { height: 90vh; }
}
@media screen and (max-width: 1160px){
    p.baScro{display:none;}
	#banner_box .img_box img { aspect-ratio: 5/3; }
    #banner_box .img_box iframe, #banner_box .img_box video{width: auto;height: 100%;top: 0;}
	#banner .info .txt .decoText{font-size:1rem}
	#banner .info .txt .main-title{font-size:1.8rem;margin:0 0 20px 0;padding-top:10px;padding-bottom:20px}
}

@media screen and (max-width: 640px){
    #banner .info .txt *{text-align:center}
	#banner,#banner .ImgBox{height:64vh}
	#banner .info .txt{margin:auto auto 60px}
	#banner .ImgBox img{aspect-ratio:3 / 4}
	#banner video{top:50%;left:50%;transform:translate(-49%,-50%)}
    #banner .slick-current .info .txt p{font-size: 1rem;}
    #banner .info .txt .main-title::before{bottom: 0;left: 50%;transform: translate(-50%, 0);}
}