@charset "utf-8";

#inc04{margin:60px 0}
#inc04 .sticky-container{height:350vh}
#inc04 .sticky-wrapper{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
#inc04 .group-tit{padding-bottom:40px}
#inc04 .group-tit .ac__tit{padding-bottom:40px}
#inc04 .group-cont .area-img{position:relative;display:flex;gap:75px;padding-bottom:50px}
#inc04 .group-cont .area-img::before{position:absolute;content:'Forever begins here';top:50%;left:50%;transform:translate(-50%, -50%);font-family:var(--sub-font);font-weight:400;font-size:220px;color:#111;opacity:0.1;white-space:nowrap;z-index:-1;pointer-events:none}

#inc04 .group-cont .area-img .figure-box{max-width:350px;width:100%;aspect-ratio:350 / 520;overflow:hidden}
#inc04 .group-cont .area-img .figure-box figure{width:100%;height:100%}
#inc04 .group-cont .area-img .figure-box img{width:100%;height:100%;object-fit:cover}
#inc04 .group-cont .area-text{display:grid}
#inc04 .group-cont .area-text figcaption{grid-area:1 / 1;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}
#inc04 .group-cont .area-text figcaption h4{padding-bottom:30px;font-family:var(--main-font);font-size:22px;font-weight:400}
#inc04 .group-cont .area-text figcaption p.desc{font-family:var(--main-font);font-size:18px;line-height:1.6;white-space:pre-line}
#inc04 .group-cont .area-text figcaption.active{opacity:1;visibility:visible;transition:opacity 0.3s ease}

#inc04 .group-cont .area-img .figure-box.to-down{display:flex;flex-direction:column;justify-content:flex-end}

/* 반응형 [s] */
@media (max-width:1600px){
    #inc04 .group-tit .ac__tit{padding-bottom: 18px;}
    #inc04 .group-cont .area-img{gap: 65px;}
    #inc04 .group-cont .area-img .figure-box{max-width:285px}
    #inc04 .group-cont .area-text figcaption h4{padding-bottom: 16px;}
    #inc04 .group-cont .area-text figcaption p.desc{font-size: 17px;}
    #inc04 .group-cont .area-img::before{font-size: 190px;}
}
@media (max-width:1400px){
    #inc04 .group-cont .area-text figcaption h4{font-size: 21px;}
}
@media (max-width:1200px){
    #inc04 .group-cont .area-img{gap: 50px;padding-bottom: 40px;}
    #inc04 .group-cont .area-text figcaption h4{padding-bottom: 10px;font-size: 20px;}
    /* #inc04 .group-cont .area-text figcaption p.desc{font-size: 16px;} */
}
@media (max-width:1024px){
    #inc04 .group-tit .ac__tit{padding-bottom: 14px;}
    #inc04 .group-cont .area-img{gap: 34px;}
    #inc04 .group-cont .area-img::before{font-size: clamp(140px,16.6vw,170px);}
    #inc04 .group-cont .area-img .figure-box{max-width:260px}
    #inc04 .group-cont .area-text figcaption h4{padding-bottom: 8px;font-size: 18px;}
    #inc04 .group-cont .area-text figcaption p.desc{font-size: 16px;}
}
@media (max-width:768px){
    #inc04 .group-tit{padding-bottom: 30px;}
    #inc04 .group-tit .ac__tit{padding-bottom: 12px;}
    #inc04 .sticky-wrapper{padding: 0 20px;}
    #inc04 .group-cont .area-img{gap: 20px;padding-bottom: 35px;}
    #inc04 .group-cont .area-img .figure-box{max-width:225px}
    #inc04 .group-cont .area-img::before{font-size: clamp(90px,18.23vw,140px);}
    #inc04 .group-cont .area-text figcaption p.desc{font-size: 15px;}
    #inc04 .group-cont .area-text figcaption h4{padding-bottom: 6px;font-size: 17px;}
}
@media (max-width:580px){
    #inc04 .group-cont .area-img::before{display: none;}
}
@media (max-width:480px){
    #inc04 .group-tit .ac__tit{padding-bottom: 8px;}
    #inc04 .group-cont .area-img{gap: 12px;}
    #inc04 .group-cont .area-text figcaption p.desc{font-size: 14px;}
    #inc04 .group-cont .area-text figcaption h4{padding-bottom: 4px;font-size: 16px;}
}
/* 반응형 [e] */