@charset "utf-8";

#atc02{height:100vh;margin:0 auto;background:url(./img/bg.jpg) no-repeat fixed;background-size:cover;transition:all .2s}
#atc02 ul{display:flex;height:100%}
#atc02 ul li{position:relative;width:calc(100% / 4)}
#atc02 ul li+li{border-left:1px solid rgba(255,255,255,.1)}
#atc02 ul li a{display:flex;flex-flow:column;height:100%}
#atc02 ul li a:before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(0deg, #004f98a8, #000000a8);transition:all .5s;opacity:0}
#atc02 ul li .info{position:relative;z-index:1;display:flex;flex-flow:column;margin:auto 0;padding:0 60px;font-size:15px;color:#fff}
#atc02 ul li .info p{font-size:32px;font-weight:600;word-break:keep-all}
#atc02 ul li .info .s_txt{margin-top:42px;font-size:18px;font-weight:400;white-space:pre-line;word-break:keep-all}
#atc02 ul li .info span{margin-top:8px;font-size:18px;font-weight:600;font-family:'Play'}
#atc02 ul li .info .on{position:relative;display:none;margin-top:auto;font-size:18px;word-break:keep-all;transition:all .5s}
#atc02 ul li .info .on::before{position:absolute;width:30px;height:2px;background-color:#fff;content:"";left:0;top:-60px}
#atc02 ul li .info .on p{padding-left:20px;position:relative;font-size:18px;font-weight:400}
#atc02 ul li .info .on p:before{position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:100%;background-color:#fff;content:""}
#atc02 ul li .info .txt{transition:all .5s}
#atc02 ul li .info .icon{margin-bottom:60px;transition:all .3s}

/* 반응형 [s] */
@media(hover:hover){
#atc02 ul li:hover a:before{opacity:1}
#atc02 ul li:hover .info .on{display:block}
#atc02 ul li:hover .txt {transform:translateY(-55%)}
#atc02 ul li:hover .icon{transform:translateY(-55%);opacity:0}
}
@media (max-width:1024px){
#atc02 ul li .info{padding:0px 30px}
#atc02 ul li .info .icon{margin-bottom:30px}
#atc02 ul li .info .icon img{width:30%}
#atc02 ul li .info p{font-size:20px}
#atc02 ul li .info span{font-size:15px}
#atc02 ul li .info .s_txt{font-size:14px}
#atc02 ul li .info .on p{font-size:15px}
}
@media (max-width:768px){
#atc02{height:auto;background-attachment:local}
#atc02 ul{flex-direction:column;justify-content:center}
#atc02 ul li{width:100%;border-bottom:1px solid rgb(119, 119, 119, 0.5)}
#atc02 ul li a{padding:60px 0px}
#atc02 ul li:last-child{border-bottom:none}
#atc02 ul li a:before{display:none}
#atc02 ul li .info{flex-direction:row;align-items:center;padding:0px 30px;gap:5px}
#atc02 ul li .info .icon{display:flex;justify-content:center;flex-shrink:0;margin-bottom:0px;width:80px}
#atc02 ul li .info .icon img{width:60%}
#atc02 ul li .info p{font-size:18px}
#atc02 ul li .info .txt{width:35%;flex-shrink:0;text-align:center}
#atc02 ul li .info span{font-size:14px}
#atc02 ul li .info .s_txt{display:none}
#atc02 ul li .info .on{display:flex;flex-wrap:wrap;opacity:1 !important;margin-top:0px;gap:12px}
#atc02 ul li .info .on::before{display:none}
#atc02 ul li .info .on p{padding-left:10px;font-size:14px;line-height:1.5;text-align:center}
#atc02 ul li:hover .txt {transform:none;line-height:1.5}
#atc02 ul li:hover .icon{transform:none;opacity:1}
}
@media (max-width:480px){
#atc02 ul li a{padding:30px 0px}
#atc02 ul li .info{flex-direction:column}
#atc02 ul li .info .icon img{width:50%}
#atc02 ul li .info p{font-size:16px}
#atc02 ul li .info .on{justify-content:center}
#atc02 ul li .info .on p{font-size:13px}
#atc02 ul li .info .txt{width:100%;margin:10px 0;line-height:26px}
}
/* 반응형 [e] */