@charset "utf-8";

#atc03{position:relative;max-width:1400px;margin:0 auto;padding:100px 0;border-top:1px solid #e1e1e1;font-size:15px;font-family:'GongGothicLight'}
#atc03 .tit{margin-bottom:75px;text-align:center}
#atc03 .tit p{font-size:40px;color:#111;font-family:'GongGothicMedium'}
#atc03 .tit span{font-size:17px;color:#777}
#atc03 .gall_area ul{display:flex;padding-bottom:75px;justify-content:space-between;flex-wrap:wrap}
#atc03 .gall_area ul li{overflow:hidden;width:24%;border-radius:25px;box-shadow:0 0 5px rgba(0,0,0,10%);transition:all .3s}
#atc03 .gall_area ul li:nth-child(n+5){margin-top:20px}
#atc03 .gall_area ul li a{display:block;border:1px solid #e1e1e1;border-radius:25px;transition:all .3s}
#atc03 .gall_area .img{overflow:hidden;width:100%;height:247px;border-radius:3px 3px 0 0;background-size:cover;background-position:center}
#atc03 .gall_area .txt{border-radius:0 0 3px 3px;padding:25px}
#atc03 .gall_area .txt div{display:flex;margin-bottom:7px;align-items:center}
#atc03 .gall_area .txt div span{display:inline-block;width:55px;height:25px;border-radius:50px;font-size:14px;color:#fff;line-height:27px;text-align:center;background:#111;transition:all .3s;font-family:'GongGothicLight'}
#atc03 .gall_area .txt div p{margin-left:10px;font-size:18px;color:#111;transition:all .3s;font-family:'GongGothicMedium'}
#atc03 .gall_area .txt .date{display:block;font-size:13px;color:#777;text-align:right;font-family:'GongGothicMedium'}
#atc03 .gall_area .more{display:block;width:285px;height:75px;margin:0 auto;border-radius:40px;font-size:20px;text-align:center;line-height:75px;background:#f2f2f2;transition:0.2s}
#atc03 .gall_area .more p{display:flex;align-items:center;justify-content:center;transition:0.2s}
#atc03 .gall_area .more span{margin-right:5px;font-family:'GongGothicMedium'}
#atc03 .gall_area .more svg{margin-left:20px;transition:all .3s}
#atc03 .gall_area .empty{width:100%;padding:50px 0;text-align:center;box-shadow:none}

@media(hover:hover){
#atc03 .gall_area ul li a:hover .txt div p{color:var(--primary)}
#atc03 .gall_area ul li a:hover .txt div span{background:var(--primary)}
#atc03 .gall_area ul li:hover{transform:translate(-5px,-5px);box-shadow:6px 6px 26px rgba(0,0,0,.15)}
#atc03 .gall_area .more:hover{background:var(--primary)}
#atc03 .gall_area .more:hover p{color:#fff}
}

/* 반응형 [s] */
@media (max-width:1300px){
#atc03{padding:50px 15px}
#atc03 .tit{margin-bottom:45px}
/* 
#atc03 .tit p{font-size:25px} */
#atc03 .gall_area .img{height:200px}
#atc03 .gall_area ul li{width:49.5%}
#atc03 .gall_area ul li:nth-child(n+3){margin-top:10px}
}
@media (max-width:768px){
#atc03 .gall_area ul li{width:100%}
#atc03 .gall_area ul li+li{margin-top:10px !important}
#atc03 .gall_area .txt{display:flex;justify-content:space-between;align-items:center;padding:20px}
#atc03 .gall_area .txt div{margin-bottom:0}
#atc03 .gall_area ul{padding-bottom:40px}
#atc03 .gall_area .more{width:250px;height:65px;font-size:18px;line-height:65px}
#atc03 .tit p{font-size:33px}
#atc03 .tit span{font-size:16px}
#atc03 .gall_area .txt div{flex-direction:column;align-items:flex-start}
#atc03 .gall_area .txt div p{margin-left:0}
}
@media (max-width:480px){
#atc03 .tit{margin-bottom:30px}
#atc03 .tit p{font-size:28px}
#atc03 .tit span{font-size:15px}
#atc03 .gall_area .txt{align-items:flex-end}
#atc03 .gall_area .txt div{gap:10px}
#atc03 .gall_area .txt div p{font-size:16px}
#atc03 .gall_area .txt div span{font-size:12px}
#atc03 .gall_area .txt .date{font-size:12px}
#atc03 .gall_area .more{font-size:16px}
}

