@charset "utf-8";

#atc07{padding:200px 0}
#atc07 .b_tit{text-align:center}
#atc07 .wrap{display:flex;gap:50px;justify-content:space-between}
#atc07 .step{width:70%}
#atc07 .step ul{position:relative}
#atc07 .step ul:before{position:absolute;content:'';z-index:-1;top:0;left:18px;width:1px;height:100%;background:#f2f2f2}
#atc07 .step ul:after{position:absolute;content:'';z-index:-1;top:0;left:18px;width:1px;height:0;background:var(--dark);animation:line 5s ease infinite}
@keyframes line {0%{top:0}100%{height:100%}}
#atc07 .step li{position:relative;display:flex;align-items:center;gap:50px}
#atc07 .step li.on .cir{background:var(--dark)}
#atc07 .step li.on div{color:rgba(255,255,255,.5);background:var(--dark)}
#atc07 .step li.on dt{color:#fff}
#atc07 .step li span{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:50px;font-weight:700;color:#fff;background:#aaa;transition:all .3s}
#atc07 .step li div{display:flex;align-items:center;width:calc(100% - 85px);gap:50px;padding:40px 60px;border-radius:13px;background:#f5f5f5;transition:all .3s}
#atc07 .step li+li{margin-top:30px}
#atc07 .step li img{width:62px}
#atc07 .step li dt{margin-bottom:10px;font-size:18px;font-weight:700;color:var(--dark);transition:all .3s}
#atc07 .step li dd{white-space:pre-line}
#atc07 .cost{position:sticky;top:90px;height:100%;width:25%}
#atc07 .cost .s_tit{margin-bottom:20px;text-align:center}
#atc07 .cost h3{margin-bottom:10px;font-size:20px;font-weight:700;color:#111}
#atc07 .cost .s_tit p{font-size:15px;color:#777;white-space:pre-line}
#atc07 .cost .type>div{padding:25px;border:1px solid #e1e1e1;border-bottom:1px dashed #e1e1e1;border-radius:13px}
#atc07 .cost .type>div+div{border-top:none}
#atc07 .cost .type>div:last-child{border-bottom:1px solid #e1e1e1}
#atc07 .cost .type ul{display:flex;gap:3px;font-size:10px;font-weight:700;color:#fff}
#atc07 .cost .type ul li{padding:3px 7px;border-radius:3px}
#atc07 .cost .type .num{margin-top:12px;padding-top:12px;border-top:1px solid #e1e1e1}
#atc07 .cost h4{margin-top:5px;font-size:20px;font-weight:700;color:#111}
#atc07 .cost dl{display:flex;justify-content:space-between;align-items:center}
#atc07 .cost dt{font-weight:700;color:#aaa}
#atc07 .cost dt span{margin-left:3px;font-size:11px;font-weight:400}
#atc07 .cost dd{font-size:18px;font-weight:700;color:#111}
#atc07 .cost dd span{margin-right:5px;font-size:13px;color:#aaa}
#atc07 .cost a{display:block;margin-top:10px;padding:20px 0;border-radius:13px;font-size:16px;font-weight:700;color:#fff;text-align:center;background:var(--primary);transition:all .3s}


@media(hover:hover){
#atc07 .cost a:hover{background:var(--primary-h)}
}
/* 반응형 [s] */
@media (max-width:1440px){
    #atc07 .inner{padding:0 15px}
}
@media (max-width:1024px){
    #atc07{overflow:hidden;padding:100px 0}
    #atc07 .step{width:100%}
    #atc07 .step ul:before{display:none}
    #atc07 .step ul:after{display:none}
    #atc07 .step ul{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
    #atc07 .step li{gap:10px;flex-direction:column}
    #atc07 .step li+li{margin-top:0}
    #atc07 .step li dt{margin-bottom:5px;font-size:16px}
    #atc07 .step li dd{white-space:normal}
    #atc07 .step li div{gap:30px;width:100%;padding:20px 30px}
    #atc07 .wrap{display:block}
    #atc07 .type{display:grid;grid-template-columns:repeat(3,1fr);}
    #atc07 .cost{width:100%;margin-top:50px}
    #atc07 .cost .type ul{flex-wrap:wrap}
    #atc07 .cost .type>div{padding:30px 15px;border:1px solid #e1e1e1 !important;border-right:none !important}
    #atc07 .cost .type>div+div{border-left:1px dashed #e1e1e1 !important}
    #atc07 .cost .type>div:last-child{border-right:1px solid #e1e1e1 !important}
    #atc07 .cost h4{font-size:17px}
    #atc07 .cost dd{font-size:16px}
}
@media (max-width:768px){
    #atc07{padding:70px 0 50px}
    #atc07 .cost .type ul li{padding:2px 5px}
    #atc07 .cost a{width:140px;margin:15px auto 0;padding:10px 0;border-radius:50px;font-size:15px}
    #atc07 .type{grid-template-columns:repeat(2,1fr);gap:10px}
    #atc07 .type .n3{grid-column:span 2}
    #atc07 .cost .type>div{border:1px solid #e1e1e1 !important}
    #atc07 .cost .type>div+div{border-left:1px solid #e1e1e1 !important}
    #atc07 .cost .type ul{justify-content:center}
    #atc07 .cost h4{text-align:center}
    #atc07 .step ul{gap:20px}
    #atc07 .step li{gap:5px}
    #atc07 .step li span{width:30px;height:30px;font-size:13px}
    #atc07 .step li div{flex-direction:column;gap:10px;text-align:center}
}
@media (max-width:480px){
    #atc07 .type{grid-template-columns:repeat(1,1fr)}
    #atc07 .type .tit{display:flex;flex-direction:column-reverse}
    #atc07 .cost h4{margin-top:0;margin-bottom:5px}
    #atc07 .cost .type .num{margin-top:15px;padding:15px 20px;border-top:none;border-radius:13px;background:#f5f5f5}
    #atc07 .type .n3{grid-column:unset}
    #atc07 .cost a{width:115px;font-size:12px}
    #atc07 .cost .type>div{padding:15px}
    #atc07 .step ul{grid-template-columns:repeat(1,1fr)}
}
@media (max-width:390px){
    #atc07{padding:50px 0}
    #atc07 .step li dt{font-size:15px}
    #atc07 .cost h3{font-size:18px}
    #atc07 .cost h4{font-size:16px}
    #atc07 .cost dd{font-size:15px}
}
/* 반응형 [e] */