@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}
#mainVisual .marquee-scroll{animation:mainVisMarquee 15s linear infinite}
#mainVisual .marquee-scroll ul{display:flex;flex-wrap:nowrap;gap:115px;margin-left:115px}
#mainVisual .marquee-scroll ul li{font-family:var(--e-font);font-size:226px;color:var(--brand-color);white-space:nowrap}
@keyframes mainVisMarquee {0%{transform:translateX(0)} 100% {transform:translateX(-2717px)}}
@keyframes mainVisMarqueePC {0%{transform:translateX(0)} 100% {transform:translateX(-2072px)}}
@keyframes mainVisMarqueeTBLand {0%{transform:translateX(0)} 100% {transform:translateX(-1611.5px)}}
@keyframes mainVisMarqueeTBPort {0%{transform:translateX(0)} 100% {transform:translateX(-1346.3px)}}
@keyframes mainVisMarqueeMO {0%{transform:translateX(0)} 100% {transform:translateX(-903.5px)}}

/* 반응형 [s] */
@media (max-width:1400px){
#mainVisual .marquee-scroll{animation:mainVisMarqueePC 15s linear infinite}
#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:mainVisMarqueeTBLand 15s linear infinite}
#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:mainVisMarqueeTBPort 15s linear infinite}
#mainVisual .marquee-scroll ul{gap:80px;margin-left: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:mainVisMarqueeMO 10s linear infinite}
#mainVisual .marquee-scroll ul{margin-left:0;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] */