@charset "utf-8";

#atc03{padding-top:50px}
#atc03 .dk{padding:100px 0;background:var(--dark)}
#atc03 .dk .b_tit{margin-bottom:70px;text-align:center}
#atc03 .dk .b_tit h2{color:#fff}
#atc03 .dk .count{display:grid;grid-template-columns:repeat(4,1fr);padding:50px;border-radius:13px;background:#fff}
#atc03 .dk .count dl{margin-bottom:10px;color:#111}
#atc03 .dk .count dt{font-size:22px;font-weight:700}
#atc03 .dk .count dd{font-size:42px;font-weight:700}
#atc03 .dk .count .view div{display:flex;align-items:center;gap:5px}
#atc03 .dk .count span{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:3px;background:#f2f2f2}

#atc03 .lt_area{padding:100px 0 130px}
#atc03 .lt_area .inner{display:grid;grid-template-columns:repeat(2,1fr);gap:50px}
#atc03 .lt_area .s_tit{display:flex;justify-content:space-between;padding-bottom:15px;border-bottom:2px solid #111}
#atc03 .lt_area .s_tit h3{font-size:24px;font-weight:700;color:#111}
#atc03 .lt_area .s_tit a{display:flex;justify-content:center;align-items:center;width:85px;border:1px solid #e1e1e1;border-radius:50px;font-size:14px;font-weight:600;color:#777;transition:all .3s}
#atc03 .lt_area span{display:inline-block;width:75px;padding:5px 0;border-radius:50px;font-size:13px;font-weight:700;color:#fff;text-align:center;background:#aaa}
#atc03 .lt_area span.done{background:var(--primary)}
#atc03 .lt_area p{display:flex;align-items:center;font-size:16px;font-weight:700;color:#111}
#atc03 .lt_area .list li{display:flex;align-items:center;gap:20px;padding:15px;border-bottom:1px solid #e1e1e1;transition:all .3s}
#atc03 .lt_area .as li{justify-content:space-between}
#atc03 .lt_area .as div{display:flex;align-items:center;gap:20px}
#atc03 .lt_area .new{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;width:13px;height:13px;margin-left:5px;border-radius:2px;font-size:7px;font-weight:700;color:#fff;text-align:center;line-height:13px;background:var(--primary)}

#atc03 .lt_area .prj .wrap{display:flex;gap:20px}
@media(hover:hover){
#atc03 .lt_area .s_tit a:hover{border:1px solid #111;color:#111}
#atc03 .lt_area .list li:hover{background:#f5f5f5}
}
/* 반응형 [s] */
@media (max-width:1440px){
#atc03 .inner{padding:0 15px}
}
@media (max-width:1024px){
#atc03{padding-top:0}
#atc03 .dk{padding:70px 0}
#atc03 .dk .b_tit{margin-bottom:30px}
#atc03 .dk .count{padding:30px}
#atc03 .dk .count dt{font-size:15px}
#atc03 .dk .count dd{font-size:30px}
#atc03 .dk .count .view div{font-size:13px}

#atc03 .lt_area{padding:50px 0 70px}
#atc03 .lt_area .inner{gap:20px}
#atc03 .lt_area .s_tit a{width:70px;font-size:13px}
#atc03 .lt_area .s_tit h3{font-size:20px}
#atc03 .lt_area .list li{gap:15px;padding:10px}
#atc03 .lt_area p{font-size:13px}
#atc03 .lt_area span{width:65px;padding:3px 0;font-size:12px}
#atc03 .lt_area div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}

}
@media (max-width:768px){
#atc03 .lt_area{padding:30px 0 50px}
#atc03 .lt_area .inner{display:block}
#atc03 .lt_area .inner .box+.box{margin-top:30px}
#atc03 .lt_area .s_tit{padding-bottom:10px}
#atc03 .lt_area .s_tit h3{font-size:17px}
#atc03 .dk{padding:70px 0 50px}
#atc03 .dk .count{padding:0;border-radius:0;grid-template-columns:repeat(2,1fr);gap:12px;background:none}
#atc03 .dk .count dl{margin-bottom:0;text-align:center}
#atc03 .dk .count dd{font-size:25px}
#atc03 .dk .count .view{overflow:hidden;padding:20px;border-radius:13px;background:#fff}
#atc03 .dk .count .view div{justify-content:center}


}
@media (max-width:480px){
#atc03 .dk .count span{display:none}
#atc03 .dk .count .view{padding:15px}
#atc03 .dk .count dd{font-size:22px}
#atc03 .lt_area .s_tit h3{font-size:16px}
#atc03 .lt_area span{width:60px;font-size:11px}
#atc03 .lt_area .s_tit a{font-size:12px}
#atc03 .lt_area .prj li{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
#atc03 .lt_area .prj .wrap{gap:10px}
#atc03 .lt_area .as div{gap:10px}
}
@media (max-width:390px){
#atc03 .dk .count dt{font-size:13px;line-height:1}
#atc03 .dk .count dd{font-size:20px}
#atc03 .dk .count .view{padding:9px}
#atc03 .dk .count .view div{font-size:12px;text-align:center}
#atc03 .lt_area .list li:nth-child(n+3){display:none}
}
/* 반응형 [e] */