@charset "utf-8";

#inc01{background-color:#000}
#inc01 .sticky-wrapper{position:sticky;top:0;height:100vh}


/* 슬로건 */
#inc01 .group-slogan{position:relative;height:350vh}
#inc01 .slogan-txt{position:absolute;display:flex;flex-direction:column;align-items:center}
#inc01 .slogan-txt .line{position:relative;display:inline-block;overflow:hidden}
#inc01 .slogan p{font-size:60px;font-weight:600;white-space:nowrap;text-align:center;color:#fff}
#inc01 .slogan p strong{font-weight:600}
#inc01 .slogan p.keyword{position:absolute;top:0;left:0}

#inc01 > .sticky-wrapper{z-index:30;max-width:var(--mainsize);width:100%;margin:-350vh auto 0;pointer-events:none}
#inc01 .slogan-sticky{position:absolute;top:50%;left:14px;transform:translateY(-50%);display:inline-flex;flex-direction:column;justify-content:center}
#inc01 .slogan-sticky p{text-align:left}
#inc01 .slogan-sticky strong{position:relative;color:rgba(255,255,255,0.3);transition:color 0.2s}
#inc01 .slogan-sticky strong .underline{position:absolute;left:0;bottom:0;width:0;height:2px;background-color:#fff;transition:width 0.2s}

#inc01 .slogan-sticky p.on strong{color:#fff}
#inc01 .slogan-sticky p.on strong .underline{width:100%}

#inc01 .group-figure .figure-box{height:150vh}
#inc01 .group-figure figure{position:relative;width:100%;height:100%;margin:0;overflow:hidden;will-change:transform, border-radius}
#inc01 .group-figure figure::before{position:absolute;content:'';inset:0%;width:100%;height:100%;background:linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 28%);pointer-events:none}
#inc01 .group-figure figure > img{z-index:-1;position:absolute;inset:0%;width:100%;height:100%;object-fit:cover}
#inc01 .group-figure figure figcaption{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;max-width:var(--mainsize);width:100%;height:100%;margin:0 auto;padding-bottom:140px}
#inc01 .group-figure figcaption .inline-box{position:relative;overflow:hidden}
#inc01 .group-figure figcaption .inline-box > *{display:inline-block}
#inc01 .group-figure figcaption b{padding-bottom:5px;line-height:1.4;font-size:28px;font-weight:600;color:#fff;text-align:right}
#inc01 .group-figure figcaption p.desc{line-height:1.3;font-size:20px;font-weight:500;color:#fff;text-align:right}
#inc01 .group-figure .lotte figure > img{object-position:top center}
#inc01 .group-figure .lotte figcaption img{width:240px}
#inc01 .group-figure .blue-house figcaption img{width:217px;margin-bottom:30px}
#inc01 .group-figure .ddp figcaption img{width:215px;margin-bottom:30px}

#inc01 .main-slogan{background-color:#ccc;margin-top:-100vh}

/* 반응형 [s] */
@media(max-width:1800px){
#inc01 .group-figure figure figcaption{padding:0 20px 140px}
}
@media (max-width:1400px){
#inc01 .slogan p{font-size:50px}
#inc01 .group-figure .lotte figcaption img{width:220px}
#inc01 .group-figure .blue-house figcaption img{width:190px;margin-bottom:14px}
#inc01 .group-figure .ddp figcaption img{width:170px;margin-bottom:22px}
#inc01 .group-figure figcaption b{font-size:26px}
#inc01 .group-figure figcaption p.desc{font-size:18px}
}
@media (max-width:1200px){
#inc01 .slogan p{font-size:42px}
#inc01 .group-figure figcaption b{font-size:22px}
#inc01 .group-figure figcaption p.desc{font-size:17px}
#inc01 .group-figure .lotte figcaption img{width:200px}
#inc01 .group-figure .blue-house figcaption img{width:160px}
#inc01 .group-figure .ddp figcaption img{width:145px;margin-bottom:10px}
}
@media (max-width:768px){
#inc01 .slogan p{font-size:34px}
#inc01 .group-figure .lotte figcaption img{width:170px}
#inc01 .group-figure figcaption b{font-size:18px}
#inc01 .group-figure figcaption p.desc{font-size:15px}
#inc01 .group-figure .blue-house figcaption img{width:140px;margin-bottom:10px}
#inc01 .group-figure .ddp figcaption img{width:115px}
}
@media (max-width:480px){
#inc01 .slogan p{font-size:24px}
#inc01 .group-figure figcaption b{font-size:15px}
#inc01 .group-figure figcaption p.desc{font-size:14px}
#inc01 .group-figure .lotte figcaption img{width:145px}
#inc01 .group-figure .blue-house figcaption img{width:115px}
#inc01 .group-figure .ddp figcaption img{width:100px}
}
/* 반응형 [e] */