@charset "utf-8";

#inc05{position:relative;padding:100px 0 130px;overflow:hidden;background-image:url(./img/inc05_bg.png);background-position:center;background-color:#111;background-size:cover;background-repeat:no-repeat}
#inc05::before{position:absolute;content:'';inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.2);pointer-events:none}

/* 카운트 */
#inc05 .col-4 .data-count{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
#inc05 .col-4 .data-count li{display:flex;flex-direction:column;justify-content:center;height:167px;padding:20px 40px;border-radius:20px;background-color:rgba(255, 255, 255, 0.1)}
#inc05 .col-4 .data-count li h3{font-size:18px;line-height:1.4;font-weight:700;color:#fff}
#inc05 .col-4 .data-count li .col-2{display:flex;align-items:center;justify-content:space-between;gap:20px}
#inc05 .col-4 .data-count li .numbox{display:flex;align-items:flex-end;gap:6px;font-size:28px;font-weight:700;color:#fff}
#inc05 .col-4 .data-count li .numbox .num{font-family:var(--o-font);font-size:50px;font-weight:700;transform:translateY(10px)}
#inc05 .col-4 .data-count li .numbox span{font-size:50px;font-weight:700;color:var(--primary);transform:translateY(5px)}
#inc05 .col-4 .data-count li .arrow-box{display:flex;flex-direction:column;gap:7px}
#inc05 .col-4 .data-count li .arrow-box .bar{position:relative;width:35px;height:10px;animation:arrow_down 1.5s infinite}
#inc05 .col-4 .data-count li .arrow-box .bar:first-child span, #inc05 .col-4 .data-count li .arrow-box .bar:first-child img{color:#0196ff;animation-delay:0.3s}
#inc05 .col-4 .data-count li .arrow-box .bar:nth-child(2) span, #inc05 .col-4 .data-count li .arrow-box .bar:first-child img{color:rgba(1,150,255,0.5);animation-delay:0.2s}
#inc05 .col-4 .data-count li .arrow-box .bar:last-child span, #inc05 .col-4 .data-count li .arrow-box .bar:first-child img{color:rgba(1,150,255,0.2);animation-delay:0.1s}
#inc05 .col-4 .data-count li .arrow-box .bar span, #inc05 .col-4 .data-count li .arrow-box .bar img{animation:arrow-wave 0.8s infinite;animation-direction:alternate}
@keyframes arrow-wave {0% {opacity:0}50% {opacity:.5}100% {opacity:1}}
@keyframes arrow_down{0%{top:0}50%{top:-3px}100%{top:0}}

/* 차트 */
#inc05 .area-chart{position:relative;padding-bottom:120px}
#inc05 .area-chart .chart{pointer-events:none}
#inc05 .area-chart .group-tit{position:absolute;top:100px;left:max(20px, calc((100% - var(--mainsize)) / 2));padding-bottom:0}
#inc05 .area-chart .curve{position:absolute;width:100%;aspect-ratio:1693 / 929;z-index:1}
#inc05 .area-chart .curve .curve-line{stroke-dasharray:8px 8px !important}
#inc05 .area-chart .chart.pc{position:relative;width:90%;aspect-ratio:1693 / 929}
#inc05 .area-chart .chart.mo, #inc05 .area-chart .chart.sm{display:none}

#inc05 .chart .t-date{font-size:14px;font-weight:600;fill:#fff}
#inc05 .chart .t-sub{font-size:18px;font-weight:500;fill:rgba(255,255,255,0.6)}
#inc05 .chart .t-main{font-size:20px;font-weight:700;fill:#0196ff}
#inc05 .chart .t-large{font-size:30px;font-weight:700;fill:#0196ff}
#inc05 .chart .t-count{font-size:30px;font-weight:700;fill:#fff}
#inc05 .chart .t-desc{font-size:13px;fill:rgba(255,255,255,0.6)}

/* 반응형 [s] */
@media (max-width:1600px){
#inc05 .area-chart{padding-bottom:100px}
#inc05 .chart .t-date{font-size:18px}
#inc05 .chart .t-main{font-size:22px}
#inc05 .chart .t-sub{font-size:22px}
#inc05 .chart .t-count{font-size:36px}
#inc05 .chart .t-desc{font-size:15px}
#inc05 .chart .t-large{font-size:36px}
/* 카운트 */
#inc05 .col-4 .data-count li .numbox .num{font-size:46px}
#inc05 .col-4 .data-count li .numbox{font-size:24px}
}
@media (max-width:1400px){
#inc05 .area-chart{padding-bottom:80px}
#inc05 .area-chart .group-tit{top:70px}
/* 카운트 */
#inc05 .col-4 .data-count{gap:14px;margin:0 20px}
#inc05 .col-4 .data-count li{height:160px;padding:20px 32px}
#inc05 .col-4 .data-count li h3{font-size:16px}
#inc05 .col-4 .data-count li .numbox{font-size:22px}
#inc05 .col-4 .data-count li .numbox .num{font-size:44px}
}
@media (max-width:1200px){
#inc05 .area-chart .group-tit{top:0}
#inc05 .area-chart .chart.pc{width:100%}
#inc05 .chart .t-date{font-size:24px}
#inc05 .chart .t-main{font-size:26px}
#inc05 .chart .t-sub{font-size:24px}
#inc05 .chart .t-desc{font-size:20px}
#inc05 .chart .t-count{font-size:40px}
#inc05 .chart .t-large{font-size:40px}
/* 카운트 */
#inc05 .col-4 .data-count li{height:150px;padding:20px 20px 20px 25px}
#inc05 .col-4 .data-count li .numbox .num{font-size:36px}
#inc05 .col-4 .data-count li .numbox{font-size:18px}
#inc05 .col-4 .data-count li .arrow-box .bar img{width:34px}
}
@media (max-width:1024px){
#inc05{padding:80px 0}
#inc05 .area-chart{padding-bottom:50px}
#inc05 .area-chart .group-tit{align-items:flex-start;top:0;padding:0 20px !important;text-align:left}
#inc05 .area-chart .chart.pc{display:none}
#inc05 .area-chart .chart.mo{display:block}
#inc05 .chart .t-date{font-size:7px}
#inc05 .chart .t-main{font-size:9px}
#inc05 .chart .t-count{font-size:14px}
#inc05 .chart .t-sub{font-size:8px}
#inc05 .chart .t-desc{font-size:7px}
#inc05 .chart .t-large{font-size:14px}
/* 카운트 */
#inc05 .col-4 .data-count{grid-template-columns:repeat(2,1fr)}
#inc05 .col-4 .data-count li{height:130px;border-radius:10px}
#inc05 .col-4 .data-count li h3{font-size:15px}
#inc05 .col-4 .data-count li .numbox{font-size:15px}
#inc05 .col-4 .data-count li .numbox .num{font-size:30px;transform:translateY(6px)}
}
@media (max-width:840px){
#inc05{background-position:right center}
#inc05 .area-chart .group-tit{position:static;align-items:center;text-align:center}
#inc05 .area-chart .chart.mo{display:none}
#inc05 .area-chart .chart.sm{display:block}
}
@media(max-width:768px){
#inc05{padding:60px 0;background-position:right -50px center}
#inc05::before{background-color:rgba(0,0,0,0.3)}
#inc05 .area-chart{padding-bottom:20px}
#inc05 .chart .t-date{font-size:10px}
#inc05 .chart .t-main{font-size:12px}
#inc05 .chart .t-count{font-size:16px}
#inc05 .chart .t-sub{font-size:10px}
#inc05 .chart .t-desc{font-size:9px}
#inc05 .chart .t-large{font-size:16px}
/* 카운트 */
#inc05 .col-4 .data-count li{height:120px}
#inc05 .col-4 .data-count li .arrow-box{gap:4px}
}
@media (max-width:560px){
#inc05 .chart .t-date{font-size:12px}
#inc05 .chart .t-main{font-size:13px}
#inc05 .chart .t-count{font-size:19px}
#inc05 .chart .t-sub{font-size:13px}
#inc05 .chart .t-desc{font-size:10px}
#inc05 .chart .t-large{font-size:19px}
/* 카운트 */
#inc05 .col-4 .data-count{grid-template-columns:repeat(1,1fr)}
#inc05 .col-4 .data-count li{height:100px}
#inc05 .col-4 .data-count li .arrow-box .bar img{width:28px}
}
@media (max-width:480px){
#inc05{background-position:right -65px center}
#inc05::before{background-color:rgba(0,0,0,0.4)}
#inc05 .chart .t-date{font-size:13px}
#inc05 .chart .t-main{font-size:14px}
#inc05 .chart .t-sub{font-size:14px}
#inc05 .chart .t-desc{font-size:12px}
/* 카운트 */
#inc05 .col-4 .data-count li h3{font-size:14px}
#inc05 .col-4 .data-count li .numbox{font-size:14px}
#inc05 .col-4 .data-count li .numbox .num{font-size:26px}
#inc05 .col-4 .data-count li .arrow-box{gap:2px}
}
@media (max-width:390px){
#inc05{background-position:right -90px center}
}
/* 반응형 [e] */