@charset "utf-8";

#atc01{position:relative;width:100%}
#atc01_wrap{position:relative;width:1060px;height:660px;margin:0 auto}

#atc01 ul{}
#atc01 ul:after{display:block;content:"";visibility:hidden;clear:both}
#atc01 ul li{overflow:hidden;float:left;position:relative;width:33.33%;cursor:pointer;-ms-transform:translateY(600px);-webkit-transform:translateY(600px);transform:translateY(600px);-webkit-transition:all .2s;transition:all .2s}
#atc01 ul.active li:nth-child(1){-ms-transform:translateY(-80px);-webkit-transform:translateY(-80px);transform:translateY(-80px);-webkit-transition:all .7s .15s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all .7s .15s ecubic-bezier(0.165, 0.84, 0.44, 1)}
#atc01 ul.active li:nth-child(2){width:33.34%;-ms-transform:translateY(-150px);-webkit-transform:translateY(-150px);transform:translateY(-150px);-webkit-transition:all .7s 0s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all .7s 0s cubic-bezier(0.165, 0.84, 0.44, 1)}
#atc01 ul.active li:nth-child(3){-ms-transform:translateY(-40px);-webkit-transform:translateY(-40px);transform:translateY(-40px);-webkit-transition:all .7s .3s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all .7s .3s cubic-bezier(0.165, 0.84, 0.44, 1)}
#atc01 ul li img{-webkit-transition:transform .8s linear;transition:transform .8s linear}
#atc01 ul li:hover img{-webkit-transform:scale(1.07);transform:scale(1.07)}
#atc01 ul li .txt{position:absolute;left:50px;bottom:50px;font-size:15px;color:#fff;font-family:'notokr-medium'}
#atc01 ul li .txt h3{padding-top:13px;font-size:36px;font-weight:800;line-height:1.1;letter-spacing:.5px;font-family:'Raleway', sans-serif}

#atc01 .grid{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;width:100%;max-width:1058px}
#atc01 .grid span{display:block;position:absolute;top:0;z-index:1;width:1px;height:100%;background:#e5e5e5}
#atc01 .grid span.line01{left:0}
#atc01 .grid span.line02{left:33.33%}
#atc01 .grid span.line03{left:66.67%}
#atc01 .grid span.line04{left:100%}