@charset "utf-8";

#atc02{display:flex;align-items:center;height:100vh;margin:0 auto;background:url(./img/bg.jpg) no-repeat center;background-size:cover}
#atc02 *{word-break:keep-all}
#atc02 .pl{white-space:pre-line}
#atc02 .w1400{display:flex;align-items:center;justify-content:space-between;width:100%;height:50vh}
#atc02 .tit{display:flex;flex-direction:column;justify-content:space-between;height:100%}
#atc02 .tit .pl{font-size:17px;color:rgba(255,255,255,.7);white-space:pre-line}

#atc02 .r_cont{display:flex;height:100%;flex-direction:column;justify-content:space-between}
#atc02 .box+.box{margin-top:10px}
#atc02 .box .stit{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-size:20px;font-weight:700}

#atc02 .top a{display:block;width:510px;border-radius:10px;padding:35px 40px;color:#fff;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background:rgba(255,255,255,.3);transition:all .3s}
#atc02 .top .lt_box{display:flex;align-items:center;justify-content:space-between}
#atc02 .top li{display:flex;justify-content:space-between;align-items:center;gap:20px}
#atc02 .top .img{width:200px;height:140px;border-radius:10px;background-position:center;}
#atc02 .top .cont{width:46%}
#atc02 .top .cont p{font-size:17px;font-weight:700}
#atc02 .top .cont div{margin:3px 0 10px;font-size:15px;opacity:.5}
#atc02 .top .cont span{font-size:13px;font-weight:700;opacity:.5}

#atc02 .btm a{display:block;width:510px;border-radius:10px;padding:35px 40px;color:#fff;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background:rgba(62,200,145,.3);transition:all .3s}
#atc02 .btm a div{line-height:1.5}
#atc02 .btm a div span{font-size:15px;font-weight:700;opacity:.5}
#atc02 .btm a div p{font-size:22px;font-weight:200}
#atc02 .btm a div p b{font-weight:700}
#atc02 .btm .stit{margin-bottom:30px}

/* 반응형 [s] */
@media (hover:hover){
#atc02 .box a:hover{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
#atc02 .top a:hover{color:#111;background:#fff}
#atc02 .btm a:hover{background:var(--primary)}
#atc02 .btm.top a:hover .cont div{opacity:1}
#atc02 .btm.top a:hover .cont span{opacity:1}
}
@media (max-width:1380px){
#atc02 .w1400{width:95%}
#atc02 .tit .pl{font-size:16px}
}
@media (max-width:1024px){
#atc02 .w1400{flex-direction:column;gap:60px;height:auto}
#atc02 .tit{width:100%}
#atc02 .tit p{margin-top:20px}
#atc02 .tit .pl{margin-top:35px;font-size:15px;white-space:normal}
#atc02 .r_cont{flex-direction:row;gap:20px;width:100%}
#atc02 .box{width:calc(100% / 2 - 10px)}
#atc02 .top a{padding:30px 25px;width:100%}
#atc02 .btm a{width:100%;height:100%}
#atc02 .box+.box{margin:0px}
#atc02 .box .stit{font-size:17px}
#atc02 .box .stit svg{width:20px;height:20px}
#atc02 .top .img{width:45%;height:125px;background-size:cover;background-position:center}
#atc02 .top .cont p{font-size:15px}
#atc02 .top .cont div{font-size:14px}
#atc02 .btm .stit{margin-bottom:20px}
#atc02 .btm a{display:flex;flex-direction:column;justify-content:space-between;padding:30px 25px}
#atc02 .btm a div span{display:block;margin-bottom:8px;font-size:14px}
#atc02 .btm a div p{font-size:20px}
}
@media (max-width:768px){
#atc02{padding:110px 0;height:auto}
#atc02 .w1400{gap:55px}
#atc02 .tit{align-items:center;text-align:center;width:85%}
#atc02 .tit p{margin-top:15px}
#atc02 .box{width:100%}
#atc02 .top a{padding:25px 20px}
#atc02 .top .lt_box{justify-content:flex-start;flex-direction:column;gap:20px}
#atc02 .top .img{width:100%;height:145px}
#atc02 .top .cont{width:100%}
#atc02 .btm a div p{display:flex;flex-direction:column;font-size:22px}
}
@media (max-width:480px){
#atc02{padding:100px 0}
#atc02 .tit{width:90%}
#atc02 .tit p{margin-top:12px}
#atc02 .tit .pl{margin-top:30px;font-size:14px}
#atc02 .r_cont{flex-direction:column}
#atc02 .box .stit{font-size:16px}
#atc02 .top .lt_box{flex-direction:row}
#atc02 .top .cont p{font-size:14px}
#atc02 .top .cont div{font-size:13px}
#atc02 .btm a div p{flex-direction:row;font-size:20px}
}
@media (max-width:380px){
#atc02{padding:90px 0}
#atc02 .tit{width:95%}
#atc02 .tit p{margin-top:8px}
#atc02 .tit .pl{font-size:13px}
#atc02 .box .stit{font-size:15px}
#atc02 .top .lt_box{flex-direction:column;gap:15px}
#atc02 .top .img{height:135px}
#atc02 .top .cont div{margin:2px 0 5px}
#atc02 .r_cont{gap:15px}
#atc02 .btm a div span{margin-bottom:25px;font-size:13px}
#atc02 .btm a div p{font-size:18px}
}
/* 반응형 [e] */