#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 , #banner *{transition: all 0s ease-in-out;-webkit-transition: all 0s ease-in-out;}
#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;margin-left: 9vw;width: 565px;}
#banner .info .txt * { font-weight: 400; color: var(--white); opacity: 0; -webkit-transform: translateY(15px); transform: translateY(15px); }
#banner .info .txt * , #banner .aos-init{transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
#banner .info .txt .main-title p{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: 21.7px;font-weight:400;-webkit-transition-delay:0.2s;transition-delay:0.2s;letter-spacing:1px;color:#fff;text-align: justify;}
#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; }
#banner .info .txt .main-title{margin-bottom: 40px;padding-bottom: 30px;}
#banner .info .txt .main-title p.top01{line-height: 1;margin: 0;padding: 0;letter-spacing: 0.06em;font-size: 49px;}
#banner .info .txt .main-title p.top02{line-height: 1;margin: 0;padding: 0;font-size: 47.3px;letter-spacing: 0.07em;}
/* 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: 2px;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 screen and (max-width: 1470px){
	#banner .info .txt{width: 370px;}
	#banner .info .txt .main-title p.top01{font-size: 32px;}
	#banner .info .txt .main-title p.top02{font-size: 30.8px;}
	#banner .info .txt .main-title{margin-bottom: 15px;}
	#banner .info .txt p.subtitle{font-size: 0.86rem;letter-spacing: 2px;}
}
@media (max-width:1280px){
    #banner .pos_abs{width: 100%;height: 100%;}
    #banner video{width: auto;height: 100%;object-fit: cover;}

}
@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: 9980px){
	#banner video{
    height: 140%;
    top: -17%;
}
}
@media screen and (max-width: 640px){
    #banner .info .txt *{text-align:center}
	#banner,#banner .ImgBox{height:64vh;}
	#banner .info .txt{margin: auto auto 100px;padding: 10px;width: 100%;padding: 0px 20px;}
	#banner .info .txt .decoText, #banner .info .txt .main-title p.top01, #banner .info .txt .main-title p.top02 ,#banner .slick-current .info .txt p{}
	#banner .info{position: absolute;bottom: 0;}
	#banner .info .txt .main-title p.top02, #banner .slick-current .info .txt .top01{font-weight: 800;}
	#banner .info .txt .main-title p.top01{font-size: 1.6rem;}
	#banner .info .txt .main-title p.top02{font-size: 1.72rem;}
	#banner .ImgBox img{aspect-ratio: 3 / 5;}
	#banner video{top:50%;left:50%;transform: translate(-50%,-50%);width: 100%;height: 100%;}
    #banner .slick-current .info .txt p{font-size: 0.8rem;width: 100%;}
    #banner .info .txt .main-title::before{bottom: 0;left: 50%;transform: translate(-50%, 0);}
	#banner .info:after{bottom:0;}
	#banner .slick-current .info .txt p.subtitle{text-align: justify;text-align-last: justify;}
}