@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;clip-path:circle(14% at 50% 50%)}
#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)}}