@charset "utf-8";

#inc01{position:relative;padding-top:185px;transition:color 0.2s}

#inc01 .group-cont{position:relative}
#inc01 .group-cont .bar{z-index:-1;position:sticky;top:185px;left:0;width:100%;height:1px;background-color:#111;transition:background-color 0.2s}
#inc01 .group-cont >.col-2{display:grid;grid-template-columns:repeat(2,1fr);padding-top:80px}

/* 텍스트 고정 영역 */
#inc01 .area-sticky{position:sticky;top:calc(185px + 80px);height:100vh}
#inc01 .area-sticky h2{padding-bottom:225px;font-family:var(--e-font);font-size:20px;font-weight:normal}
#inc01 .area-sticky h3{padding-bottom:45px;font-family:var(--k-font);font-size:36px;font-weight:normal}
#inc01 .area-sticky p.desc{white-space:pre-line;font-size:16px;color:rgba(17,17,17,0.8);transition:color 0.2s}

/* 공통 */
#inc01 .area-scroll > *{max-width:870px}
#inc01 .area-scroll .col-2{display:grid;grid-template-columns:repeat(2,1fr)}
#inc01 .area-scroll figure.main-thumb{display:flex;flex-direction:column;align-items:flex-end;gap:20px}
#inc01 .area-scroll figure.main-thumb figcaption{font-family:var(--e-font);font-size:18px}

/* Pure Nature, Pure Skin */
#inc01 .pure-skin figure.main-thumb{padding-bottom:180px}
#inc01 .pure-skin figure.main-thumb img{width:100%;height:485px;object-fit:cover}
#inc01 .pure-skin .text-box{position:relative;padding:255px 0 235px}
#inc01 .pure-skin .text-box img{position:absolute;opacity:0.2;top:19%;left:90px}
#inc01 .pure-skin .text-box p.desc{font-family:var(--k-font);font-size:16px;white-space:pre-line;text-align:center;color:rgba(17, 17, 17, 0.8)}

/* Nature's Touch, Honest Care */
#inc01 .honest-care figure.main-thumb{align-items:flex-start}
#inc01 .honest-care figure.main-thumb img{width:100%;height:546px;object-fit:cover}
#inc01 .honest-care figure.thumb-l{display:flex;justify-content:center;padding:240px 0 220px}
#inc01 .honest-care figure.thumb-l img{width:321px;height:413px;object-fit:cover}
#inc01 .honest-care p.desc{font-size:40px;text-align:center}
#inc01 .honest-care .col-2{padding:220px 0 135px}
#inc01 .honest-care .flex-box{display:flex;justify-content:flex-end}
#inc01 .honest-care figure.thumb-s{display:flex;flex-direction:column;gap:20px;max-width:193px}

/* text mask */
#inc01 .mask-text{padding:135px 0 185px}
#inc01 .mask-text span{font-family:var(--e-font);font-size:48px;line-height:1.2;white-space:pre-line;color:rgba(255,254,230,0.1);word-break:keep-all;background-image:linear-gradient(var(--brand-color),var(--brand-color));background-clip:text;background-repeat:no-repeat;background-size:0% 100%;transition:background-size 0.1s linear}

/* dark theme */
body.dark #inc01 .bar{background-color:var(--brand-color)}
body.dark #inc01 .area-sticky p.desc{color:rgba(255,254,230,0.8)}