@charset "utf-8";

#inc03{position:relative;padding-bottom:103px;max-width:var(--main-size);margin:0 auto}
#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 50px;margin-bottom:150px}
/* 이미지 네비게이션 */
#inc03 .cont__nav{position:absolute;top:50%;left:15px;transform:translateY(-50%);z-index:2;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;max-width:1100px;min-width:110px;width:100%;aspect-ratio:3/2;clip-path:url(#frameMask);-webkit-clip-path:url(#frameMask);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:clamp(100px, 8.67vw, 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}

@media (max-width:1024px){
#inc03 .sticky-wrap{margin-bottom:0}
#inc03 .cont__nav{gap:12px}
#inc03 .cont__nav .nav-bar{width:26px}
#inc03 .cont__nav .nav-bar.active{width:35px}
#inc03 .cont__img .frame-box .tit_area .tit{font-size:clamp(85px,9.77vw, 100px)}
#inc03 .marquee__wrap .marquee__inner{animation:marqueeLandscape 12s linear infinite}
#inc03 .marquee__wrap .marquee-list .marquee-item{font-size:44px}
#inc03 .marquee__wrap .marquee-list{gap:70px;padding-right:70px}
}
@media (max-width:768px){
#inc03 .cont__img .frame-box .tit_area .tit{font-size:clamp(50px,11.07vw, 85px )}
#inc03 .cont__img .frame-box .tit_area .desc{display:none}
#inc03 .cont__nav .nav-bar{width:20px}
#inc03 .cont__nav .nav-bar.active{width:29px}
#inc03 .marquee__wrap .marquee-list{gap:50px;padding-right:50px}
#inc03 .marquee__wrap .marquee__inner{animation:marqueeMobile 12s linear infinite}
#inc03 .marquee__wrap .marquee-list .marquee-item{font-size:38px}
}
@media (max-width:480px){
#inc03{padding-bottom:60px}
#inc03 .sticky-wrap{padding:0 15px;margin-bottom:50px}
#inc03 .cont__img .frame-wrap{display:block;height:calc(100vh - 30px);aspect-ratio:unset;transform:rotate(0deg);clip-path:none}
#inc03 .cont__img .frame-box{height:100%}
#inc03 .cont__img .frame-box img{height:100%}
#inc03 .cont__img .frame-box .tit_area{transform:translate(-50%, -50%) rotate(0deg)}
#inc03 .cont__img .frame-box .tit_area .tit{font-size:clamp(1px,10.42vw, 50px )}
#inc03 .cont__nav{display:none}
}

/* marquee 미디어쿼리 */
@keyframes marquee{
0%{transform:translateX(0)}
100%{transform:translateX(-1022.5px)}
}

@keyframes marqueeLandscape{
0%{transform:translateX(0)}
100%{transform:translateX(-1128px)}
}

@keyframes marqueeMobile{
0%{transform:translateX(0)}
100%{transform:translateX(-1165px)}
}