@charset "utf-8";
.intro-bg{z-index:1;position:fixed;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100vh;background-color:#000}
#mainVisual .intro-bg.hide{display:none!important}

#mainVisual{position:relative;width:100%;padding-bottom:80px;background-color:#f9f6ed}
#mainVisual .sticky-wrapper{min-height:400vh}
#mainVisual .sticky-container{position:sticky;top:0;left:0;height:100vh;overflow:hidden}
#mainVisual .intro-logo{position:fixed;z-index:10;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
#mainVisual .cont{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;background-color:#f9f6ed}
#mainVisual .group-frame{position:absolute;top:60%;left:50%;transform:translate(-50%, -60%)}
#mainVisual .group-frame .img-sequence{position:relative;overflow:hidden;width:100%;height:100%}
#mainVisual .group-frame .img-sequence img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;visibility:hidden;will-change:opacity;backface-visibility:hidden;transform:translateZ(0);/* GPU 유도 */}
#mainVisual .group-frame .img-sequence img.active{opacity:1;visibility:visible}
#mainVisual .group-marquee{position:absolute;top:64%;left:0;display:flex;mix-blend-mode:difference}
#mainVisual .group-marquee .marquee-list{display:flex;animation:marquee 10s linear infinite}
#mainVisual .group-marquee .marquee-item{padding-right:100px;font-family:var(--e-font-gothic);font-size:205px;color:#fff;white-space:nowrap}
#mainVisual .txt-wrap{max-width:var(--main-width);margin:0 auto;padding:0 80px;font-family:var(--e-font);font-weight:300}
#mainVisual .txt-wrap h3{font-size:42px;font-weight:300;padding-bottom:50px}
#mainVisual .txt-wrap .desc{font-size:20px;line-height:1.35;white-space:pre-line;word-break:keep-all}

@media (max-width:1024px){
#mainVisual .intro-logo img{width:280px}
#mainVisual .group-frame{top:50%;transform:translate(-50%, -50%)}
#mainVisual .group-marquee{top:58%}
#mainVisual .group-marquee .marquee-list{animation:marqueeLand 10s linear infinite}
#mainVisual .group-marquee .marquee-item{padding-right:60px;font-size:105px}
#mainVisual .txt-wrap{padding:0 30px}
#mainVisual .txt-wrap h3{padding-bottom:25px;font-size:32px}
#mainVisual .txt-wrap .desc{font-size:17px}
}
@media (max-width:768px){
#mainVisual .intro-logo img{width:240px}
#mainVisual .group-marquee{top:57%}
#mainVisual .group-marquee .marquee-item{padding-right:40px;font-size:60px}
#mainVisual .group-marquee .marquee-list{animation:marqueePort 11s linear infinite}
#mainVisual .txt-wrap h3{padding-bottom:20px;font-size:28px}
#mainVisual .txt-wrap .desc{font-size:16px}
}
@media (max-width:480px){
#mainVisual{padding-bottom:60px}
#mainVisual .sticky-wrapper{min-height:auto}
#mainVisual .sticky-container{position: relative;height: 65vh}
#mainVisual .intro-logo img{width:clamp(180px,50vw,240px)}
#mainVisual .intro-logo.hide{display: none !important}
#mainVisual .group-frame{width:clamp(120px, 83.33vw, 400px);aspect-ratio: 400 / 218;height: auto}
#mainVisual .group-marquee{top:50%;transform:translateY(-50%)}
#mainVisual .group-marquee .marquee-list{animation:marqueeMo 11s linear infinite}
#mainVisual .group-marquee .marquee-item{padding-right:25px;font-size:40px}
#mainVisual .txt-wrap{padding:0 20px}
#mainVisual .txt-wrap h3{padding-bottom:18px;font-size:26px}
#mainVisual .txt-wrap .desc{font-size:15px}
}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-2370.5px)}}
@keyframes marqueeLand{0%{transform:translateX(0)}100%{transform:translateX(-1223px)}}
@keyframes marqueePort{0%{transform:translateX(0)}100%{transform:translateX(-1409px)}}
@keyframes marqueeMo{0%{transform:translateX(0)}100%{transform:translateX(-936px)}}