@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:var(--text-color);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(37,36,31,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(37,36,31,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(238,233,215,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(238,233,215,0.8)}

/* 반응형 [s] */
@media (max-width:1600px){
#inc01 .group-cont >.col-2{padding:80px 30px}
}

@media (max-width:1400px){
#inc01{padding-top:100px}
#inc01 .group-cont .bar{top:100px}
#inc01 .group-cont >.col-2{gap:50px;padding:70px 30px}
#inc01 .area-sticky{top:170px}
#inc01 .area-sticky h2{padding-bottom:120px;font-size:18px}
#inc01 .area-sticky h3{padding-bottom:32px;font-size:30px}
#inc01 .area-sticky p.desc{font-size:15px}
#inc01 .area-scroll figure.main-thumb{gap:10px}
#inc01 .area-scroll figure.main-thumb figcaption{font-size:16px}
#inc01 .pure-skin figure.main-thumb{padding-bottom:100px}
#inc01 .pure-skin figure.main-thumb img{height:390px}
#inc01 .pure-skin .text-box{padding:210px 0 150px}
#inc01 .pure-skin .text-box img{top:23%;left:50px;max-width:260px}
#inc01 .honest-care figure.main-thumb img{height:420px}
#inc01 .honest-care figure.thumb-l{padding:120px 0 140px}
#inc01 .honest-care figure.thumb-l img{max-width:280px;height:auto}
#inc01 .honest-care .col-2{padding:140px 0 0}
#inc01 .honest-care p.desc{font-size:34px}
#inc01 .honest-care figure.thumb-s{gap:10px}
#inc01 .mask-text{padding:80px 30px 140px}
#inc01 .mask-text span{font-size:38px;line-height:1.35}
}

@media (max-width:1200px){
#inc01{padding-top:80px}
#inc01 .group-cont .bar{position:static}
#inc01 .group-cont >.col-2{grid-template-columns:1fr;gap:50px;padding:50px 30px 0}
#inc01 .area-sticky{position:relative;top:auto;height:auto;text-align:center}
#inc01 .area-sticky h2{padding-bottom:18px;font-size:17px}
#inc01 .area-sticky h3{padding-bottom:15px;font-size:28px}
#inc01 .area-sticky p.desc{font-size:15px;line-height:1.7}
#inc01 .area-scroll > *{max-width:none}
#inc01 .area-scroll figure.main-thumb figcaption{font-size:16px}
#inc01 .pure-skin figure.main-thumb{padding-bottom:60px}
#inc01 .pure-skin figure.main-thumb img{height:auto;aspect-ratio:16/8}
#inc01 .area-scroll .col-2{display:flex;justify-content:center;gap:20px}
#inc01 .pure-skin .text-box{padding:150px 0 130px}
#inc01 .pure-skin .text-box img{top:18%;left:12%;max-width:230px}
#inc01 .honest-care figure.main-thumb img{height:auto;aspect-ratio:16/8}
#inc01 .honest-care figure.thumb-l{padding:60px 0 90px}
#inc01 .honest-care figure.thumb-l img{max-width:300px}
#inc01 .honest-care .col-2{padding:90px 0 0}
#inc01 .honest-care p.desc{font-size:30px}
#inc01 .mask-text{padding:90px 30px 110px;text-align:center}
#inc01 .mask-text span{font-size:30px;line-height:1.4}
}

@media (max-width:1024px){
#inc01{padding-top:70px}
#inc01 .group-cont >.col-2{gap:40px;padding:45px 25px 0}
#inc01 .area-sticky h2{font-size:16px}
#inc01 .area-sticky h3{font-size:26px}
#inc01 .pure-skin figure.main-thumb{padding-bottom:45px}
#inc01 .pure-skin .text-box{padding:130px 0 110px}
#inc01 .honest-care figure.thumb-l{padding:50px 0 80px}
#inc01 .honest-care .col-2{padding:80px 0 0}
#inc01 .honest-care p.desc{font-size:28px}
#inc01 .mask-text{padding:80px 25px 100px}
#inc01 .mask-text span{font-size:28px}
}

@media (max-width:768px){
#inc01{padding:60px 0}
#inc01 .group-cont >.col-2{gap:30px;padding:35px 20px 0}
#inc01 .area-sticky h2{padding-bottom:14px}
#inc01 .area-sticky h3{padding-bottom:10px;font-size:24px}
#inc01 .area-sticky p.desc{font-size:14px}
#inc01 .area-scroll .col-2{gap:14px}
#inc01 .area-scroll figure.main-thumb{gap:6px}
#inc01 .area-scroll figure.main-thumb figcaption{font-size:15px}
#inc01 .pure-skin figure.main-thumb{padding-bottom:25px}
#inc01 .pure-skin figure.main-thumb img{aspect-ratio:4/3}
#inc01 .pure-skin .text-box{padding:100px 0 80px}
#inc01 .pure-skin .text-box img{top:22%;left:30px;max-width:180px}
#inc01 .pure-skin .text-box p.desc{font-size:14px}
#inc01 .honest-care figure.main-thumb img{aspect-ratio:4/3}
#inc01 .honest-care figure.thumb-l{padding:30px 0 70px}
#inc01 .honest-care figure.thumb-l img{max-width:280px}
#inc01 .honest-care .col-2{padding:70px 0 0}
#inc01 .honest-care p.desc{font-size:25px}
#inc01 .mask-text{padding:70px 20px}
#inc01 .mask-text span{font-size:24px}
}

@media (max-width:480px){
#inc01{padding:45px 0}
#inc01 .group-cont >.col-2{gap:24px;padding:30px 15px 0}
#inc01 .area-sticky h2{padding-bottom:10px;font-size:15px}
#inc01 .area-sticky h3{padding-bottom:5px;font-size:22px}
#inc01 .area-scroll .col-2{gap:10px}
#inc01 .area-scroll figure.main-thumb{gap:5px}
#inc01 .area-scroll figure figcaption{font-size:14px !important}
#inc01 .pure-skin figure.main-thumb{padding-bottom:15px}
#inc01 .pure-skin figure.main-thumb img{aspect-ratio:1/1}
#inc01 .pure-skin .text-box{padding:75px 0 60px}
#inc01 .pure-skin .text-box img{top:22%;left:15px;max-width:140px}
#inc01 .pure-skin .text-box p.desc{font-size:13px}
#inc01 .honest-care figure.main-thumb img{aspect-ratio:1/1}
#inc01 .honest-care figure.thumb-l{padding:20px 0 55px}
#inc01 .honest-care figure.thumb-l img{max-width:230px}
#inc01 .honest-care p.desc{font-size:21px}
#inc01 .honest-care .col-2{padding:55px 0 0}
#inc01 .mask-text{padding:55px 15px}
#inc01 .mask-text span{font-size:21px;line-height:1.45}
}

@media (max-width:320px){
#inc01 .area-scroll .col-2{flex-wrap:wrap}
#inc01 .pure-skin .text-box img{display:none}
}
/* 반응형 [e] */