@charset "utf-8";

#atc02{position:relative;height:100vh;border:50px solid #fff;background:#f2f2f2}
#atc02 *{word-break:keep-all}
#atc02:after{position:absolute;content:'';top:60px;right:100px;width:55%;height:500px;background:url('./img/bg_txt.png') no-repeat}
#atc02 .b_tit{padding:150px 0 0 300px}
#atc02 .b_tit p{margin-bottom:20px;font-weight:700;color:var(--primary)}
#atc02 .side_bar{display:flex;align-items:center;position:absolute;z-index:10;left:-50px;bottom:10%;width:850px;height:310px;padding-left:350px;border-radius:0 50px 50px 0;color:#fff;background:var(--primary)}
#atc02 .side_bar p{font-size:22px;font-weight:700}
#atc02 .side_bar .wrap div{margin:10px 0 20px;font-size:17px;font-weight:600;color:rgba(255,255,255,.7);white-space:pre-line}
#atc02 .side_bar a{display:inline-block;padding:10px 30px;border:2px solid #fff;border-radius:50px;font-weight:700;color:var(--primary);background:#fff;transition:all .3s}
#atc02 .roll{position:absolute;z-index:20;top:0;right:45px;width:45%;padding-top:250px}
#atc02 .roll ul{display:flex;align-items:flex-start;flex-wrap:wrap;gap:50px;padding-bottom:250px}
#atc02 li{width:calc(50% - 50px);padding:35px;border-radius:13px;background:#fff;transition:all .3s}
#atc02 li:nth-child(odd){margin-top:-200px}
#atc02 li .num{display:flex;justify-content:space-between;margin-bottom:30px;padding-bottom:10px;border-bottom:1px solid #e1e1e1;transition:all .3s}
#atc02 li .num span{font-size:16px;font-weight:700;color:#777}
#atc02 li .num em{display:flex;align-items:center;padding:0 10px;border-radius:50px;font-size:14px;font-weight:700;font-style:normal;color:#fff;background:var(--primary)}
#atc02 li h3{margin:15px 0 5px;font-size:22px;font-weight:700;color:#111}
#atc02 li .icon{display:flex;align-items:center;justify-content:center;width:85px;height:85px;border-radius:10px;background:#f5f5f5}
#atc02 li .icon img{width:40px}
#atc02 li div span{display:block;font-size:13px;font-weight:700;color:var(--primary)}

@media(hover:hover){
#atc02 li:hover{color:rgba(255,255,255,.5);background:var(--dark)}
#atc02 li:hover .num{border-bottom:1px solid rgba(255,255,255,.2)}
#atc02 li:hover h3{color:#fff}
#atc02 li:hover .num span{color:#aaa}
#atc02 .side_bar a:hover{color:#fff;background:none}
}

/* 반응형 [s] */
@media (max-width:1440px){
    #atc02{border:30px solid #fff}
    #atc02 .b_tit{padding:100px 0 0 100px}
    #atc02 .side_bar{width:auto;padding:0 80px 0 150px}
    #atc02 .roll{right:20px;width:55%}
}
@media (max-width:1024px){
    #atc02{overflow:hidden;border:none}
    #atc02:after{right:-20px;width:100%}
    #atc02 .b_tit{padding:100px 0 0 50px}
    #atc02 .b_tit p{margin-bottom:10px}
    #atc02 .side_bar{height:260px;padding:0 80px 0 100px}
    #atc02 .side_bar p{font-size:18px}
    #atc02 .side_bar .wrap div{padding:0 15px;font-size:15px}
    #atc02 .roll ul{gap:20px;padding-bottom:100px}
    #atc02 .side_bar a{padding:5px 20px;font-size:14px}
    #atc02 li{width:calc(50% - 10px);padding:25px}
    #atc02 li h3{font-size:18px}
    #atc02 li .num span{font-size:13px}
    #atc02 li .num em{padding:3px 10px;font-size:12px}
    #atc02 li .icon{width:65px;height:65px}
    #atc02 li .icon img{width:30px}
    #atc02 li .txt{height:96px}
}
@media (max-width:768px){
    #atc02{overflow:hidden}
    #atc02:after{display:none}

    #atc02 .b_tit{margin-bottom:50px !important;padding:100px 0 0 0;text-align:center}
    #atc02 .roll{position:unset;width:100%;padding:0 50px}
    #atc02 .roll ul{flex-wrap:unset;padding-bottom:0;padding-right:50px}
    #atc02 li:nth-child(odd){margin-top:0}
    #atc02 li{width:300px;flex-shrink:0}
    #atc02 li h3{font-size:16px}
    #atc02 li .num{margin-bottom:20px}
    #atc02 li .txt{height:70px;font-size:14px}
    #atc02 .side_bar{display:block;left:0;bottom:0;width:100%;height:auto;padding:30px 0;border-radius:0;text-align:center}
    #atc02 .side_bar .wrap div{margin:0 0 10px;white-space:normal}
}
@media (max-width:480px){
    #atc02 .side_bar a{padding:4px 14px;font-size:13px}
    #atc02 .roll ul{display:grid;grid-template-columns:repeat(8, 1fr);grid-template-rows:repeat(2, auto);gap:10px}
    #atc02 li{padding:20px;gap:18px}
    #atc02 li .num{align-items:center;margin-bottom:10px}
    #atc02 li .txt{display:none}
    #atc02 li .wrap{display:flex;align-items:center;gap:10px}
    #atc02 li h3{margin:0}
    #atc02 .side_bar a{font-size:12px}
}
@media (max-width:390px){
}
/* 반응형 [e] */