@charset "utf-8";

#mainVisual{position:relative}
#mainVisual .bg{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;overflow:hidden}
#mainVisual .bg::before{position:absolute;content:'';top:-5%;left:-5%;width:110%;height:110%;background-image:url(../../texture.jpg);animation:grain .8s steps(1) 0s infinite;pointer-events:none}

/* circle */
#mainVisual .sticky-wrap{position:relative;z-index:1;height:600vh}
#mainVisual .sticky-container{position:sticky;top:0;left:0;height:100vh;overflow:hidden}
#mainVisual .circle{width:100%;height:100vh}
#mainVisual .cont{display:flex;flex-direction:column}
#mainVisual .cont .cont-item{position:relative;width:100%;height:100vh}
#mainVisual .cont-item video, #mainVisual .cont-item img{width:100%;height:100%;object-fit:cover}

#mainVisual .cont-item .text-box{position:absolute;bottom:165px;left:100px;z-index:1;display:flex;flex-direction:column;gap:40px}
#mainVisual .cont-item .text-box h2{font-family:var(--e-font);font-size:40px;color:#fff;font-weight:normal}
#mainVisual .cont-item .text-box h2 .char{display:inline-block}
#mainVisual .cont-item .text-box p.desc{font-family:var(--k-font);font-size:18px;line-height:1.6;white-space:pre-line;color:#fff}

#mainVisual .marquee{position:absolute;top:50%;left:0;transform:translateY(-50%);z-index:-1;width:100%;overflow:hidden}
#mainVisual .marquee-scroll{width:max-content;animation:mainVisMarquee 30s linear infinite;}
#mainVisual .marquee-scroll ul{display:flex;flex-wrap:nowrap;gap:115px;width:max-content}
#mainVisual .marquee-scroll ul li{flex:none;font-family:var(--e-font);font-size:226px;color:var(--brand-color);white-space:nowrap}

@keyframes mainVisMarquee{
0%{transform:translateX(0)}
100%{transform:translateX(calc(-1 * var(--marquee-distance)))}
}

/* 반응형 [s] */
@media (max-width:1400px){
#mainVisual .marquee-scroll{animation-duration:30s}
#mainVisual .marquee-scroll ul li{font-size:170px}
#mainVisual .cont-item .text-box{left:40px;gap:34px}
#mainVisual .cont-item .text-box h2{font-size:38px}
}
@media (max-width:1024px){
#mainVisual .marquee-scroll{animation-duration:26s}
#mainVisual .marquee-scroll ul li{font-size:130px}
#mainVisual .cont-item .text-box{gap:24px;bottom:100px}
#mainVisual .cont-item .text-box h2{font-size:34px}
#mainVisual .cont-item .text-box p.desc{font-size:16px}
}
@media (max-width:768px){
#mainVisual .marquee-scroll{animation-duration:22s}
#mainVisual .marquee-scroll ul{gap:80px}
#mainVisual .marquee-scroll ul li{font-size:110px}
#mainVisual .cont-item .text-box{left:30px}
#mainVisual .cont-item .text-box h2{font-size:30px}
#mainVisual .cont-item .text-box p.desc{font-size:15px}
#mainVisual .cont-item video{object-position:calc(100% - 35%) center}
#mainVisual .cont-item img{object-position:calc(100% - 43%) center}
}
@media (max-width:480px){
#mainVisual .marquee-scroll{animation-duration:18s}
#mainVisual .marquee-scroll ul{gap:40px}
#mainVisual .marquee-scroll ul li{font-size:75px}
#mainVisual .cont-item::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.3);pointer-events:none}
#mainVisual .cont-item .text-box{left:50%;bottom:unset;top:50%;transform:translate(-50%, -50%);width:100%;padding:0 15px;text-align:center}
#mainVisual .cont-item .text-box h2{font-size:26px}
#mainVisual .cont-item .text-box p.desc{font-size:14px;word-break:keep-all}
}
/* 반응형 [e] */