@charset "utf-8";

#inc03{position:relative;padding:165px 0 150px;background-image:url(./img/inc03_bg.jpg);background-position:top;background-repeat:no-repeat;background-size:cover}
#inc03::before{position:absolute;content:'';inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.7);pointer-events:none}
#inc03 .data-item{display:flex;flex-direction:column;gap:15px;padding:35px 30px;border-radius:13px;border:1px solid #fff;background-color:rgba(255,255,255,0.17);color:#fff}
#inc03 .data-item .unit{padding-left:5px;font-size:20px;font-weight:700}
#inc03 .data-item .caption{font-size:16px;white-space:pre-line;line-height:1.4}

#inc03 .col-2{position:relative;z-index:1;display:flex;justify-content:space-between}
#inc03 .col-2 .fl-l .group-tit .tit--ko{padding-bottom:32px;color:#fff}

#inc03 .col-2 .fl-r{max-width:872px;width:100%}
#inc03 .col-2 .fl-r .data-container{display:flex;gap:14px}
#inc03 .col-2 .fl-r .data--project{max-width:430px;width:100%;aspect-ratio:1}
#inc03 .col-2 .fl-r .data--project .count-box{display:flex;align-items:flex-end}
#inc03 .col-2 .fl-r .data--project .count-box .digit-box{display:flex;flex-direction:column;text-align:center;font-family:var(--e-font);font-size:85px;line-height:1;font-weight:700;height:85px;overflow:hidden;letter-spacing:-4px}
#inc03 .col-2 .fl-r .data--project .count-box .comma{font-family:var(--e-font);font-size:85px;line-height:1;letter-spacing:-3px;font-weight:700}
#inc03 .col-2 .fl-r .row-2{display:flex;flex-direction:column;gap:14px;max-width:428px;width:100%}
#inc03 .col-2 .fl-r .row-2 .top{display:flex;gap:14px}
#inc03 .col-2 .fl-r .row-2 .top .data--grade{width:100%;aspect-ratio:1}
#inc03 .col-2 .fl-r .row-2 .top .data--grade strong{font-family:var(--e-font);font-size:55px;font-weight:700;line-height:1}
#inc03 .col-2 .fl-r .row-2 .bottom{width:100%;aspect-ratio:428 / 208;border-radius:13px;overflow:hidden}
#inc03 .col-2 .fl-r .row-2 .bottom img{width:100%;height:100%;object-fit:cover}

/* 반응형 [s] */
@media (max-width:1600px){
#inc03 .col-2 .fl-r .data--project .count-box .digit-box{font-size:75px;height:75px}
#inc03 .col-2 .fl-r .data--project .count-box .comma{font-size:75px}
}
@media (max-width:1400px){
#inc03{padding:120px 20px 130px}
}
@media (max-width:1200px){
#inc03 [data-aos=fade-left],#inc03 [data-aos=fade-right]{transform:translate3d(0, 50px, 0)}
#inc03 [data-aos=fade-left].aos-animate,#inc03 [data-aos=fade-right].aos-animate{transform:translate3d(0,0,0)}
#inc03{padding:90px 20px 110px}
#inc03 .col-2{flex-direction:column;align-items:center}
#inc03 .col-2 .fl-l{display:flex;flex-direction:column;align-items:center;width:100%;padding-bottom:40px;text-align:center}
#inc03 .col-2 .fl-l .group-tit .tit--ko{padding-bottom:22px;white-space:normal}
#inc03 .col-2 .fl-r .data--project .count-box .digit-box{font-size:65px;height:65px}
#inc03 .col-2 .fl-r .data--project .count-box .comma{font-size:65px}
#inc03 .col-2 .fl-r .row-2 .top .data--grade strong{font-size:48px}
#inc03 .data-item .unit{font-size:18px}
}
@media (max-width:1024px){
#inc03{padding:70px 20px 90px}
#inc03 .col-2 .fl-r{max-width:none}
#inc03 .col-2 .fl-r .data-container{display:grid;grid-template-columns:repeat(2,1fr)}
#inc03 .col-2 .fl-r .data--project, #inc03 .col-2 .fl-r .row-2{max-width:none}
#inc03 .col-2 .fl-r .row-2 .top .data--grade strong{font-size:42px}
#inc03 .data-item{gap:8px}
#inc03 .data-item .unit{font-size:16px}
#inc03 .col-2 .fl-r .data--project .count-box .digit-box{font-size:60px;height:60px}
#inc03 .col-2 .fl-r .data--project .count-box .comma{font-size:60px}
}
@media (max-width:850px){
#inc03 .col-2 .fl-r .data-container{grid-template-columns:repeat(1,1fr)}
#inc03 .col-2 .fl-r .data--project, #inc03 .col-2 .fl-r .row-2 .top .data--grade{aspect-ratio:unset}
#inc03 .data-item .caption{white-space:normal}
}
@media (max-width:768px){
#inc03 .data-item{padding:30px}
#inc03 .data-item .caption{font-size:15px}
#inc03 .col-2 .fl-r .data--project .count-box .digit-box{font-size:50px;height:50px;letter-spacing:-2px}
#inc03 .col-2 .fl-r .data--project .count-box .comma{font-size:50px}
#inc03 .col-2 .fl-r .row-2 .top .data--grade strong{font-size:36px}
#inc03 .data-item .unit{padding-left:3px;font-size:15px}
}
@media (max-width:480px){
#inc03 .col-2 .fl-r .row-2 .top{flex-direction:column}
#inc03 .col-2 .fl-r .data--project .count-box .digit-box{font-size:40px;height:40px}
#inc03 .col-2 .fl-r .data--project .count-box .comma{font-size:40px}
#inc03 .data-item{padding:25px}
#inc03 .data-item .caption{font-size:14px}
#inc03 .col-2 .fl-r .row-2 .top .data--grade strong{font-size:30px}
#inc03 .data-item .unit{font-size:14px}
#inc03 .col-2 .fl-l{padding-bottom:25px}
#inc03 .col-2 .fl-l .group-tit .tit--ko{padding-bottom:16px}
}
/* 반응형 [e] */