@charset "utf-8";

#inc03{position:relative;padding-bottom:103px}
#inc03 .cont{height:400vh}
#inc03 .sticky-wrap{position:sticky;top:0;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100vh;padding:0 95px;margin-bottom:150px}
/* 이미지 네비게이션 */
#inc03 .cont__nav{display:flex;flex-direction:column;gap:15px}
#inc03 .cont__nav .nav-list{line-height:0;font-size:0}
#inc03 .cont__nav .nav-bar{display:inline-block;width:38px;height:2px;background-color:rgba(0,0,0,0.2);transition:width .3s ease, background-color .3s ease;will-change:transform}
#inc03 .cont__nav .nav-bar.active{width:47px;background-color:#000}
/* 이미지 프레임 */
#inc03 .cont__img{position:relative;display:flex;justify-content:center;width:100%}
#inc03 .cont__img .img-item picture{position:relative;display:block;overflow:hidden}
#inc03 .cont__img .frame-wrap{position:relative;overflow:hidden;display:flex;flex-direction:column;width:1100px;aspect-ratio:3/2;clip-path:path("M 0 0 Q 70 366.66 0 733.33 L 1100 733.33 Q 1030 366.66 1100 0 Z");transform:rotate(-5deg)}
#inc03 .cont__img .frame-wrap .overlay{position:absolute;inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.3);pointer-events:none}
#inc03 .cont__img .frame-box{position:relative}
#inc03 .cont__img .frame-box img{width:100%;object-fit:cover}
#inc03 .cont__img .frame-box .tit_area{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;align-items:center;width:100%;transform:translate(-50%, -50%) rotate(5deg)}
#inc03 .cont__img .frame-box .tit_area .tit{font-family:var(--e-font);font-size:150px;font-weight:400;line-height:100%;color:var(--point);text-align:center;text-transform:uppercase}
#inc03 .cont__img .frame-box .tit_area .desc{font-family:var(--k-font);font-size:15px;font-weight:700;line-height:100%;text-transform:uppercase;color:var(--point)}
/* 텍스트 슬라이드 */
#inc03 .marquee__wrap{overflow:hidden}
#inc03 .marquee__wrap .marquee__inner{display:flex;transform:translateX(0);animation:marquee 12s linear infinite}
#inc03 .marquee__wrap .marquee-list{display:flex;gap:100px;padding-right:100px}
#inc03 .marquee__wrap .marquee-list .marquee-item{font-weight:400;font-size:50px;line-height:100%;white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--point);background:linear-gradient(to top, var(--point) 50%, transparent 50%);background-size:100% 200%;background-position:top;background-clip:text;transition:background-position 0.3s ease}
#inc03 .marquee__wrap .marquee-list .marquee-item:hover{background-position:bottom}
@keyframes marquee{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-1022.5px);
    }
}