@charset "utf-8";

#inc04 .sc_banner{height:500vh}
#inc04 .sticky-container{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
#inc04 .group-tit{align-items:center;padding-bottom:70px;text-align:center}
#inc04 .scroll-target{display:flex;width:max-content;padding:0 max(20px, calc((100vw - var(--mainsize)) / 2))}

#inc04 .group-cont{display:flex;gap:22px;width:max-content}
#inc04 .group-cont > * {flex-shrink:0;position:relative;width:835px;height:464px;padding:80px 70px;border-radius:10px;overflow:hidden;background-color:#f7f7f7}
#inc04 .group-cont .text-box{position:relative;z-index:1}
#inc04 .group-cont .text-box h4{padding-bottom:35px;font-family:var(--maru-font);font-size:26px;font-weight:700;color:#111;transition:color 0.2s}
#inc04 .group-cont .text-box p.desc{font-size:16px;line-height:1.6;color:rgba(17,17,17,0.8);white-space:pre-line;word-break:keep-all;transition:color 0.2s}
#inc04 .group-cont .text-box p.desc:first-of-type{padding-bottom:24px}
#inc04 .group-cont .thumb-box{position:absolute;bottom:0;right:0;width:294px;transform:scale(0.8, 0.7);border-radius:10px;overflow:hidden;background-color:#000;transition:all 0.3s}
#inc04 .group-cont .thumb-box img{width:100%;height:100%;object-fit:cover;transition:opacity 0.2s}
#inc04 .group-cont .add_img{position:absolute;bottom:0;right:70px;z-index:2;width:307px;transform:translateY(110%);transition:all ease-out 0.3s}

@media (hover:hover){
#inc04 .group-cont > *:hover .thumb-box{width:100%;height:100%;transform:scale(1)}
#inc04 .group-cont > *:hover .thumb-box img{opacity:0.5}
#inc04 .group-cont > *:hover .text-box h4{color:#fff}
#inc04 .group-cont > *:hover .text-box p.desc{color:rgba(255,255,255,0.8)}
#inc04 .group-cont .cbrc-box:hover .add_img{transform:translateY(20%);box-shadow:0 -17px 13px rgba(0,0,0,0.26)}
#inc04 .group-cont .o-zip-box:hover .add_img{transform:translateY(8%)}
}

/* 반응형 [s] */
@media (max-width:1600px){
#inc04 .group-tit{padding-bottom:60px}
#inc04 .group-cont > *{width:790px;height:430px;padding:70px 60px}
#inc04 .group-cont .text-box h4{padding-bottom:30px;font-size:24px}
}
@media (max-width:1400px){
#inc04 .group-tit{padding-bottom:50px}
#inc04 .group-cont > *{width:640px;height:410px;padding:60px 50px}
#inc04 .group-cont .add_img{right:20px;width:230px}
#inc04 .group-cont .text-box h4{padding-bottom:22px;font-size:22px}
#inc04 .group-cont .text-box p.desc:first-of-type{padding-bottom:18px}
}
@media (max-width:1200px){
#inc04 .group-tit{padding-bottom:45px}
#inc04 .group-cont{gap:16px}
#inc04 .group-cont > *{height:370px}
#inc04 .group-cont .text-box h4{padding-bottom:18px;font-size:20px}
#inc04 .group-cont .text-box p.desc{font-size:15px}
#inc04 .group-cont .text-box p.desc:first-of-type{padding-bottom:12px}
}
@media (max-width:1024px){
#inc04 .group-cont > *{width:570px;height:300px;padding:40px}
#inc04 .group-cont .thumb-box{width:210px}
#inc04 .group-cont .add_img{width:195px}
}
@media (max-width:768px){
#inc04{padding:60px 15px 0}
#inc04 .sc_banner{height:auto}
#inc04 .group-tit{padding-bottom:25px}
#inc04 .sticky-container{position:static;height:auto}
#inc04 .scroll-target{width:100%;padding:0}
#inc04 .group-cont{flex-direction:column;width:100%}
#inc04 .group-cont > *{display:flex;align-items:center;width:100%}

#inc04 .group-cont .thumb-box{width:100%;height:100%;transform:scale(1)}
#inc04 .group-cont .cbrc-box .add_img{transform:translateY(20%);box-shadow:0 -17px 13px rgba(0,0,0,0.26)}
#inc04 .group-cont > * .thumb-box img{opacity:0.5}
#inc04 .group-cont > * .text-box h4{color:#fff}
#inc04 .group-cont > * .text-box p.desc{color:rgba(255,255,255,0.8)}
#inc04 .group-cont .add_img{width:235px}
#inc04 .group-cont .o-zip-box .add_img{transform:translateY(8%)}
}
@media (max-width:660px){
#inc04 .group-cont > *{height:250px;padding:0 40px}
#inc04 .group-cont .add_img{position:static;width:200px}
#inc04 .group-cont .cbrc-box .add_img, #inc04 .group-cont .cbrc-box:hover .add_img{transform:translateY(16%)}
#inc04 .group-cont .o-zip-box .add_img, #inc04 .group-cont .o-zip-box:hover .add_img{transform:translateY(20%) translateX(15px)}
#inc04 .group-cont .text-box{max-width:340px;width:100%}
#inc04 .group-cont .text-box p.desc{font-size:14px}
#inc04 .group-cont .text-box h4{padding-bottom:14px;font-size:18px}
#inc04 .group-cont .text-box p.desc:first-of-type{padding-bottom:10px}
}
@media (max-width:560px){
#inc04 .group-cont .add_img{width:135px}
#inc04 .group-cont .cbrc-box .add_img, #inc04 .group-cont .cbrc-box:hover .add_img{transform:translateY(43%) translateX(20px)}
#inc04 .group-cont .o-zip-box .add_img, #inc04 .group-cont .o-zip-box:hover .add_img{transform:translateY(50%) translateX(28px)}
#inc04 .group-cont > *{min-height:260px;height:auto}
#inc04 .group-cont .cbrc-box .add_img, #inc04 .group-cont .cbrc-box:hover .add_img{display:none}
#inc04 .group-cont .o-zip-box .add_img, #inc04 .group-cont .o-zip-box:hover .add_img{display:none}
#inc04 .group-cont .text-box{max-width:none}
}
@media (max-width:480px){
#inc04 .group-cont{gap:12px}
#inc04 .group-cont > *{min-height:0;padding:45px 30px}
#inc04 .group-cont .text-box h4{padding-bottom:10px;font-size:16px}
#inc04 .group-cont .text-box p.desc{white-space:normal}
}
/* 반응형 [e] */