@charset "utf-8";

#atc01{overflow:hidden;position:relative;text-align:center;z-index:1}
#atc01:before{content:"";position:absolute;left:0;bottom:0;z-index:0;height:285px;width:100%;background:url(./img/texture.png) repeat}
#atc01 .inner{position:relative;max-width:1380px;width:100%;margin:0 auto;padding:160px 0 0}
#atc01 .inner:before{content:url(./img/atc_bg.png);position:absolute;right:-150px;bottom:260px;z-index:-1}

/* 그리드 */
#atc01 .grid{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}
#atc01 .grid span{position:absolute;top:0;left:calc(100% / 3);width:1px;height:100%;background-color:rgba(0,0,0,.05)}
#atc01 .grid span.line2{left:calc((100% / 3) * 2)}

/* 타이틀 */
#atc01 .tit_area span{display:block;margin-bottom:10px;color:#f75b1b;font-size:17px;font-weight:700;font-family:'Josefin Sans', sans-serif}
#atc01 .tit_area .tit{font-size:38px;color:#1d252c;font-family:'S-CoreDream-3Light'}
#atc01 .tit_area .tit b{font-family:'S-CoreDream-6Bold'}

/* 메뉴 */
#atc01 ul{overflow:hidden}
#atc01 ul:after{display:block;content:'';clear:both}
#atc01 ul li{position:relative;float:left;width:calc(100% / 3);height:545px;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}
#atc01 ul li:nth-child(1){-webkit-animation-delay:.2s;-ms-animation-delay:.2s;animation-delay:.2s}
#atc01 ul li:nth-child(2){-webkit-animation-delay:.4s;-ms-animation-delay:.4s;animation-delay:.4s}
#atc01 ul li:nth-child(3){-webkit-animation-delay:.6s;-ms-animation-delay:.6s;animation-delay:.6s}
#atc01 ul li img{max-width:95%}
#atc01 ul li a{display:block;position:relative;height:100%;z-index:1}
#atc01 ul li a:before{content:'';position:absolute;bottom:-50%;left:0;z-index:-1;width:100%;height:365px;background-color:#f75b1b;opacity:0;-webkit-transition:all .4s;transition:all .4s}
#atc01 ul li a dl dt{margin-bottom:15px;font-size:22px;color:#fff;font-family:'S-CoreDream-6Bold'}
#atc01 ul li a dl dd{line-height:26px;font-size:15px;letter-spacing:-.2px;color:rgba(255,255,255,.6);white-space:pre-line;font-family:'S-CoreDream-4Regular'}
#atc01 ul li a dl .go{margin-top:22px;color:rgba(255,255,255,1);opacity:0;-webkit-transition:all .3s;transition:all .3s}
#atc01 ul li a dl .go i{margin-left:-15px;-webkit-transition:all .3s;transition:all .3s}

@media(hover:hover){
#atc01 ul li a:hover:before{bottom:0;opacity:1}
#atc01 ul li a:hover dl .go{opacity:1}
#atc01 ul li a:hover dl .go i{margin-left:15px}
}
@media(max-width:1380px){
#atc01 .inner:before{right:0;top:20%;bottom:auto}
}
@media(max-width:1024px){
#atc01:before{height:45%}	
#atc01 .inner:before{right:0;top:15%;bottom:auto}
#atc01 .tit_area{margin-bottom:15px}
#atc01 .tit_area .tit{font-size:32px}
#atc01 ul li{height:auto}
#atc01 ul li a dl{padding-bottom:60px}
#atc01 ul li a dl dt{font-size:18px}
#atc01 ul li a dl dd{font-size:14px}
#atc01 ul li a dl .go{display:none}
}
@media(max-width:768px){
#atc01 .inner{padding-top:60px}
#atc01 .inner:before{right:0;top:-4%;bottom:auto}
#atc01 .tit_area{margin-bottom:5px}
#atc01 .tit_area span{font-size:14px}
#atc01 .tit_area .tit{font-size:28px}
#atc01 ul li a dl{padding-bottom:40px}
#atc01 ul li a dl dt{font-size:16px}
#atc01 ul li a dl dd{padding:0 5px;font-size:13px;line-height:1.6;white-space:normal;word-break:keep-all}
}
@media(max-width:380px){
#atc01:before{display:none}
#atc01 ul li{float:none;width:100%}
#atc01 ul li img{max-width:80%}
#atc01 ul li a dl{padding:20px;background: url(./img/texture.png) repeat}
#atc01 ul li a dl dt{margin-bottom:10px}
}

