@charset "utf-8";

#atc02{overflow:hidden;height:100vh;text-align:center;background:#1c1714}
#atc02 ul{position:relative;display:grid;grid-template-columns:repeat(4,1fr);z-index:1}
#atc02 ul li a{display:flex;justify-content:center;align-items:center;height:100vh;color:#fff;transition:all .4s}
#atc02 ul li+li{border-left:1px solid rgba(255,255,255,10%)}
#atc02 ul li span{font-size:20px;opacity:.6;font-family:'Marcellus'}
#atc02 ul li p{margin-top:30px;font-size:28px;font-weight:700;line-height:1.3;white-space:pre-line}
#atc02 ul li .icon{display:flex;align-items:center;justify-content:center;width:85px;height:85px;margin:60px auto;border:1px solid rgba(255,255,255,20%);border-radius:10px;transition:all .4s}
#atc02 ul li .txt{opacity:.7;white-space:pre-line}
#atc02 .hov_bg{position:absolute;width:100%;height:100%;top:0;z-index:0}
#atc02 .hov_bg img{width:100%;height:100vh}

@media(hover:hover){
#atc02 ul li:hover a{color:#111;background:rgba(255,255,255,.9)}
#atc02 ul li:hover span{color:var(--primary);opacity:1}
#atc02 ul li:hover .icon{background:var(--primary)}
}

/* 반응형 [s] */
@media (max-width:1400px){
#atc02 ul li span{font-size:17px}
#atc02 ul li p{font-size:20px}
}
@media (max-width:1024px){
#atc02 ul{grid-template-columns:repeat(2,1fr)}
#atc02 ul li:nth-child(3), #atc02 ul li:nth-child(4){border-top:1px solid rgba(255,255,255,10%)}
#atc02 ul li a{height:50vh}
#atc02 ul li span{font-size:15px}
#atc02 ul li p{margin-top:5px;font-size:17px;white-space:normal}
#atc02 ul li .icon{margin:20px auto}
#atc02 ul li .txt{padding:0 40px;white-space:normal}
}
@media (max-width:768px){
#atc02{text-align:left}
#atc02 ul li+li{border-top:1px solid rgba(255,255,255,10%)}
#atc02 ul li a{height:22vh;padding:0 30px}
#atc02 ul{grid-template-columns:repeat(1,1fr)}
#atc02 ul .inner{display:flex;align-items:center}
#atc02 ul li span{width:90px;margin-right:20px}
#atc02 ul li p{width:150px;word-break:keep-all}
#atc02 ul li .txt{width:40%;padding:0;word-break:keep-all}
}
@media (max-width:560px){
#atc02 ul li p{width:100%}
#atc02 ul li .icon{width:60px;height:60px;padding:0 25px}
#atc02 ul li .icon img{width:100px}
#atc02 ul li .txt{display:none}
}
@media (max-width:480px){
#atc02 ul li span{width:50px;font-size:13px}
#atc02 ul li p{font-size:15px}
#atc02 ul li .icon img{width:30px}
}
/* 반응형 [e] */