#banner {position: relative;width: 100%;height: 100vh;background: #111;overflow: hidden;}
#banner .main-slider,#banner .slick-list,#banner .slick-track { height: 100%; }
#banner .slick-list { position: relative; }
#banner .banneritembg { position: absolute; inset: 0; background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); z-index: 2; }
#banner .item { position: relative; height: 100%; }
#banner .img {position: relative;z-index: 1;width: 100vw;height: 95vh;}
#banner .item::before { content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 2s ease-out 1s; background-image: url('/images/39/logo_mask.png'); background-position: 0 0; background-size: auto 100%; background-repeat: repeat-x; animation: slideMaskAnim 60s linear infinite; }
#banner.is-ready .item::before { opacity: .4; }
#banner .banneritembg { z-index: 5; }
#banner .info { position: absolute; z-index: 60; }

@keyframes slideMaskAnim{
  from { background-position: 0 0; }
  to   { background-position: -2000px 0; }
}
#banner .info,#banner .arrow,#banner .page-scroll { opacity: 0; transition: opacity 1.5s cubic-bezier(0.2,0.6,0.2,1),transform 1.5s cubic-bezier(0.2,0.6,0.2,1); }
#banner .info { transform: translateY(-40%); }
#banner.is-ready .info { opacity: 1; transform: translateY(-50%); transition-delay: 1.2s; }
#banner.is-ready .arrow { opacity: 1; transform: translateY(0); transition-delay: 1.8s; }
#banner.is-ready .page-scroll { opacity: 1; transform: translate(-50%,0); transition-delay: 2.2s; }
#banner .pos_abs { width: 100%; height: 100%; top: 0; left: 0; z-index: 4; }
#banner .info {width: auto;height: auto;position: absolute;z-index: 5;color: #fff;pointer-events: none;z-index: 60;top: 22%;left: 6%;right: auto;bottom: auto;}
#banner .info p font {display: block;font-size: clamp(12px,2.5vw,14px);letter-spacing: 0.15em;text-transform: uppercase;color: rgba(255,255,255,0.8);margin-bottom: 5px;border-left: 1px solid var(--triadic2);padding-left: 12px;line-height: 1.4;}
#banner .info h2 {font-size: clamp(28px,8vw,70px);font-weight: 700;margin: 20px 0 70px 0;line-height: 1.15;opacity: 0;transform: translateY(60px) skewY(3deg);transition: transform 0.5s cubic-bezier(0.2,0.6,0.2,1),opacity 0.5s cubic-bezier(0.2,0.6,0.2,1);font-family: 'Sora', sans-serif;color: var(--triadic2);}
#banner .info h2:after { content: ""; pointer-events: none; position: absolute; width: 0; height: 1px; background-color: #fff; opacity: 0; bottom: -30px; left: 0; z-index: 1; }
#banner .slick-active .info h2:after { width: 80px; opacity: 1; }
#banner .slick-active .info h2 {opacity: 1;transform: translateY(0) skewY(0);transition-delay: 0.5s;}
#banner .falling-text-container {display: flex;flex-wrap: wrap;margin-bottom: 15px;min-height: 1.2em;transition: all 1.1s ease-in-out;-webkit-transition: all 1.1s ease-in-out;}
#banner .falling-text {display: inline-block;opacity: 0;transform: translateY(-15px);font-size: clamp(14px,3.5vw,24px);font-weight: 300;letter-spacing: 1px;white-space: pre;color: var(--white);font-family: 'Sora', sans-serif;transition: all 1.1s ease-in-out;-webkit-transition: all 1.1s ease-in-out;}
#banner .slick-active .falling-text { animation: fallIn 0.8s forwards ease-out; }
@keyframes fallIn {
  to { opacity: 1; transform: translateY(0); }
}
#banner .txt p { opacity: 0; transform: translateY(30px) skewY(0); }
#banner .slick-active .txt p { opacity: 1; transform: translateY(0) skewY(0); transition-delay: 2.5s; }
#banner .arrow { position: absolute; bottom: 30px; right: 5%; z-index: 10; display: flex; gap: 12px; }
#banner .arrow a {width: 44px;height: 44px;border: 1px solid rgba(255,255,255,0.4);border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: all 0.3s;backdrop-filter: blur(4px);}
#banner .arrow a:hover { background: #fff; border-color: #fff; }
#banner .arrow a svg { width: 18px; height: 18px; fill: #fff; }
#banner .arrow a.prev svg { transform: rotate(180deg); }
#banner .arrow a:hover svg { fill: #000; }
#banner .page-scroll {position: absolute;bottom: 0px;left: 50%;transform: translate(-50%,0);z-index: 15;display: block;}
#banner .scrolllink {text-decoration: none;color: #fff;font-size: 10px;letter-spacing: 0.3em;display: flex;flex-direction: column;align-items: center;gap: 10px;}
#banner .scrolllink b { color: var(--white); font-weight: 300; font-family: 'Sora',sans-serif; font-size: 12px; }
#banner .scrolllink span { width: 1px; height: 30px; background: rgba(255,255,255,0.3); margin-top: 10px; position: relative; overflow: hidden; }
#banner .scrolllink span::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--accent-color); animation: scrollLine 2s infinite ease-in-out; }
@keyframes scrollLine {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(100%); }
}
#banner .img video , #banner .img iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } 
#banner .item video {overflow: hidden;z-index: 0;height: auto;position: absolute;top: 0;left: -15%;width: 134%;} 

@media screen and (max-width: 1280px) {
   #banner .info h2{
    font-size: clamp(28px, 8vw, 50px);
}
}

@media (min-width:1140px) {
	#banner .banneritembg {background: linear-gradient(to right, rgb(12 22 38) 10%, rgba(0, 0, 0, 0.1) 60%);}
	#banner .info {top: 45%;left: 12%;right: auto;bottom: auto;}
	#banner .arrow {bottom: 60px;right: 8%;gap: 20px;}
	#banner .scrolllink span { height: 50px; }
}
@media screen and (max-width: 1140px) {
	#banner .info {top: 30%;left: 12%;right: auto;bottom: auto;}
	#banner.is-ready .info {transform: translateY(0);}
    #banner{
    height: 80vh;
}
    #banner .img img{
    width: 100%;
    height: 80vh;
}
}
@media screen and (max-width: 960px) {
	#banner, #banner .item video, #banner .info {/* transform: translateX(0) skewX(0deg); *//* top: 0; *//* left: 0; *//* width: auto; */} 
	#banner .item video {top: 5%;height: 100%;width: auto;} 
}
@media screen and (max-width: 560px){
	#banner .info .txt h3:before { bottom:-31px; width:1px; height:25px } 
	#banner .item video { left: -50%; top: 0%; } 
}