@charset "utf-8";

#atc02 .step{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:50px}
#atc02 .step li{padding:30px;border-radius:5px}
#atc02 .step li+li{position:relative}
#atc02 .step li+li:after{position:absolute;content:'';top:50%;left:-33px;width:42px;height:42px;border-radius:50px;box-shadow:0px 0px 10px rgba(0,0,0,.1);transform:translateY(-50%);background:url('./img/arrow.png') no-repeat center #fff}
#atc02 .step li .step-num{display:inline-block;border-radius:3px;padding:3px 10px;font-size:12px;font-weight:600;color:#111;background:#fff;font-family:var(--e-font)}
#atc02 .step li .step-num:before{display:inline-block;content:'';width:4px;height:4px;margin-right:8px;border-radius:5px;vertical-align:3px}
#atc02 .step li dl{font-family:var(--p-font)}
#atc02 .step li dl dt{margin:15px 0;font-size:20px;color:#111;font-family:var(--B-font)}
#atc02 .step li dl dd{font-size:14px;font-family:var(--M-font);word-break:keep-all}
#atc02 .step li dl dd:before{display:inline-block;content:'';width:3px;height:3px;margin-right:8px;border-radius:5px;vertical-align:3px;background:#777}
#atc02 .step .box01{background:#d6e8f6}
#atc02 .step .box01 .step-num:before{background:#89c0e6}
#atc02 .step .box02{background:#d0d4ec}
#atc02 .step .box02 .step-num:before{background:#6478ed}
#atc02 .step .box03{background:#c0e2dc}
#atc02 .step .box03 .step-num:before{background:#65e1cb}
#atc02 .step .box04{background:#4c5c81}
#atc02 .step .box04 .step-num:before{background:#25407f}
#atc02 .step .box04 dl{color:#fff}
#atc02 .step .box04 dl dt{color:#fff;word-break:keep-all}
#atc02 .step .box04 dl dd:before{background:#fff}

#atc02 .banner-link{display:flex;align-items:center;height:280px;padding:0 60px;border-radius:5px;background-image:url('./img/bg.jpg');background-size:cover}
#atc02 .banner-link p{font-size:23px;font-weight:700;color:#fff;font-family:var(--B-font);word-break:keep-all}
#atc02 .banner-link span{font-size:15px;font-weight:500;color:#fff;opacity:.5;word-break:keep-all}
#atc02 .banner-link a{margin-top:0;border:1px solid transparent;color:rgba(255,255,255,.5);background:rgba(255,255,255,.2);transition:all .3s}
#atc02 .banner-link ul{width:100%}
#atc02 .banner-link li{display:flex;align-items:center;justify-content:space-between;padding:0 50px}
#atc02 .banner-link li+li{margin-top:30px;padding-top:30px;border-top:1px solid rgba(255,255,255,.1)}

#atc02 .banner-link a:hover{color:#fff;background:rgba(255,255,255,.5)}

/* 반응형 [s] */
@media (max-width:1800px){
#atc02 .step{margin-bottom:20px}
}
@media (max-width:1600px){
#atc02 .step{grid-template-columns:repeat(2,1fr)}
#atc02 .step .box03::after{display:none}
#atc02 .banner-link{padding:0 20px}
#atc02 .banner-link li{padding:0 30px}
}
@media (max-width:1300px){
#atc02 .group-tit{flex-direction:column;align-items:center !important;text-align:center}
#atc02 .common-btn{margin-top:20px}
#atc02 .step{gap:14px}
#atc02 .step li+li:after{left:-28px}
#atc02 .step li dl dt{margin:14px 0 10px;font-size:18px}
#atc02 .banner-link{height:auto;padding:54px 20px}
#atc02 .banner-link p{font-size:20px}
#atc02 .banner-link li+li{margin-top:24px;padding-top:24px}
}
@media (max-width:1024px){
#atc02 .common-btn{margin-top:12px}
#atc02 .step{gap:12px}
#atc02 .step li+li:after{left:-27px}
#atc02 .banner-link li{padding:0 20px}
#atc02 .banner-link p{font-size:18px}
}
@media (max-width:768ox){
#atc02 .step li .step-num{padding:3px 8px;font-size:11px}
#atc02 .step li .step-num:before{margin-right:6px}
#atc02 .step li dl dt{margin:10px 0 8px;font-size:16px}
}
@media (max-width:600px){
#atc02 .step{grid-template-columns:repeat(1,1fr)}
#atc02 .step li{display:flex;flex-direction:column;align-items:center;padding:25px 20px;text-align:center}
#atc02 .step li dl dt{margin:10px 0 6px;font-size:16px}
#atc02 .step li+li:after{top:-26px;left:50%;width:40px;height:40px;transform:translateX(-50%) rotate(90deg)}
#atc02 .step .box03::after{display:block}
#atc02 .banner-link{padding:50px 20px}
#atc02 .banner-link .banner-tit{text-align:center}
#atc02 .banner-link li{flex-direction:column;align-items:center;gap:8px;padding:0}
#atc02 .banner-link p{font-size:17px}
}
@media (max-width:480px){
#atc02 .step li dl dt{font-size:15px}
#atc02 .step li dl dd{font-size:13px}
#atc02 .banner-link p{font-size:16px}
#atc02 .banner-link span{font-size:14px}
}
/* 반응형 [e] */