@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);width:100%;padding-top:80px}

/* 텍스트 고정 영역 */
#inc01 .area-sticky{position:sticky;top:calc(185px + 80px);width:100%;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 h3 .char{display:inline-block}
#inc01 .area-sticky p.desc{white-space:pre-line;word-break:keep-all;font-size:16px;color:rgba(17,17,17,0.8);transition:color 0.2s}

/* 공통 */
#inc01 .col-2 > *{min-width:0}
#inc01 .area-scroll{width:100%}
#inc01 .area-scroll > *{max-width:870px;width:100%}
#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 .col-2 figure.thumb-s img{max-width:193px;width:100%}
#inc01 .col-2 figure.thumb-m img{max-width:435px;width:100%}
#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{word-break:keep-all;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)}

/* 반응형 [s] */
@media (max-width:1600px){
#inc01 .group-cont >.col-2{padding:80px 15px}
}
@media (max-width:1400px){
#inc01{padding-top:100px}
#inc01 .area-sticky{top:calc(100px + 80px)}
#inc01 .group-cont .bar{top:100px}
#inc01 .area-sticky h2{padding-bottom:140px;font-size:18px}
#inc01 .area-sticky h3{padding-bottom:38px;font-size:32px}
#inc01 .area-scroll figure.main-thumb{gap:8px}
#inc01 .area-scroll figure.main-thumb figcaption{font-size:17px}
#inc01 .pure-skin figure.main-thumb{gap:8px;padding-bottom:120px}
#inc01 .pure-skin figure.main-thumb img{height:435px}
#inc01 .pure-skin .text-box{padding:255px 0 170px}
#inc01 .honest-care figure.main-thumb img{height:455px}
#inc01 .honest-care figure.thumb-l{padding:140px 0 170px}
#inc01 .honest-care figure.thumb-l img{max-width:321px;width:100%}
#inc01 .honest-care .col-2{padding:180px 0 0}
#inc01 .honest-care p.desc{font-size:38px}
#inc01 .honest-care figure.thumb-s{gap:8px}
#inc01 .mask-text{padding:80px 15px 160px}
#inc01 .mask-text span{font-size:42px}
}
@media (max-width:1200px){
#inc01 .group-cont >.col-2{gap:40px}
#inc01 .area-sticky h3{font-size:28px}
#inc01 .pure-skin figure.main-thumb img{height:335px}
#inc01 .pure-skin .text-box img{top:27%;left:40px;max-width:260px}
#inc01 .honest-care figure.main-thumb img{height:360px}
#inc01 .honest-care figure.thumb-l img{max-width:270px}
#inc01 .honest-care p.desc{font-size:34px}
#inc01 .honest-care figure.thumb-l{padding:140px 0 120px}
#inc01 .honest-care .col-2{padding:140px 0 0}
#inc01 .mask-text span{font-size:38px;line-height:1.4}
}
@media (max-width:1024px){
#inc01 .group-cont >.col-2{grid-template-columns:repeat(1,1fr)}
#inc01 .area-sticky{position:relative;top:unset;height:auto;text-align:center}
#inc01 .area-scroll > *{max-width:none}
#inc01 .group-cont .bar{position:static}
#inc01 .area-sticky h2{padding-bottom:18px}
#inc01 .group-cont >.col-2{padding:40px 15px 0}
#inc01 .area-sticky h2{font-size:17px}
#inc01 .area-sticky h3{padding-bottom:15px;font-size:26px}
#inc01 .area-sticky p.desc{font-size:15px;line-height:1.7}
#inc01 .pure-skin figure.main-thumb img{height:415px}
#inc01 .area-scroll figure.main-thumb figcaption{font-size:16px}
#inc01 .pure-skin figure.main-thumb{padding-bottom:60px}
#inc01 .area-scroll .col-2{display:flex;justify-content:center;gap:20px}
#inc01 .pure-skin .text-box{padding:180px 0 150px}
#inc01 .pure-skin .text-box img{top:16%;left:150px}
#inc01 .honest-care figure.main-thumb img{height:415px}
#inc01 .honest-care figure.thumb-l{padding:60px 0 100px}
#inc01 .honest-care figure.thumb-l img{max-width:325px;height:490px}
#inc01 .honest-care .col-2{padding:100px 0 0}
#inc01 .honest-care p.desc{font-size:30px}
#inc01 .mask-text{padding:100px 15px 120px;text-align:center}
#inc01 .mask-text span{font-size:32px}
}
@media (max-width:768px){
#inc01{padding:60px 0}
#inc01 .group-cont >.col-2{gap:26px}
#inc01 .area-scroll .col-2{gap:14px}
#inc01 .area-scroll figure.main-thumb figcaption{font-size:15px}
#inc01 .col-2 figure.thumb-m img{max-width:350px}
#inc01 .area-sticky h2{font-size:16px}
#inc01 .area-sticky h3{font-size:24px}
#inc01 .pure-skin figure.main-thumb{padding-bottom:20px}
#inc01 .pure-skin figure.main-thumb img{height:350px}
#inc01 .pure-skin .text-box{padding:130px 0 100px}
#inc01 .pure-skin .text-box img{top:26%;left:40px;max-width:185px}
#inc01 .pure-skin .text-box p.desc{font-size:15px}
#inc01 .honest-care figure.main-thumb img{height:350px}
#inc01 .honest-care figure.thumb-l{padding:20px 0 80px}
#inc01 .honest-care figure.thumb-l img{max-width:310px;height:440px}
#inc01 .honest-care .col-2{padding:80px 0 0}
#inc01 .honest-care p.desc{font-size:28px}
#inc01 .mask-text{padding:80px 15px}
#inc01 .mask-text span{font-size:24px}
}
@media (max-width:480px){
#inc01 .group-cont >.col-2{gap:20px;padding:30px 15px 0}
#inc01 .area-sticky h2{padding-bottom:12px;font-size:15px}
#inc01 .area-sticky h3{padding-bottom:5px;font-size:22px}
#inc01 .area-sticky p.desc{font-size:14px}
#inc01 .area-scroll .col-2{gap:12px}
#inc01 .area-scroll figure.main-thumb{gap:5px}
#inc01 .area-scroll figure figcaption{font-size:14px !important}
#inc01 .pure-skin figure.main-thumb img{height:240px}
#inc01 .pure-skin figure.main-thumb{padding-bottom:12px}
#inc01 .pure-skin .text-box{padding:80px 0 60px}
#inc01 .pure-skin .text-box p.desc{font-size:14px}
#inc01 .pure-skin .text-box img{top:24%;left:15px}
#inc01 .honest-care figure.main-thumb img{height:240px}
#inc01 .honest-care figure.thumb-l{padding:20px 0 60px}
#inc01 .honest-care figure.thumb-l img{max-width:240px;height:340px}
#inc01 .honest-care p.desc{font-size:22px}
#inc01 .honest-care .col-2{padding:60px 0 0}
#inc01 .mask-text{padding:60px 15px}
#inc01 .mask-text span{font-size:22px}
}
@media (max-width:320px){
#inc01 .area-scroll .col-2{flex-wrap:wrap}
#inc01 .pure-skin .text-box img{display:none}
}
/* 반응형 [e] */