@charset "utf-8";

#atc03{position:relative;width:100%}
#atc03_wrap{position:relative;width:1058px;margin:0 auto}

#atc03 ul{overflow:hidden;padding:130px 0}
#atc03 ul li{float:left;position:relative;width:33.33%;padding:20px 45px;font-size:16px;color:#888;cursor:pointer}
#atc03 ul li .icon{-webkit-transition:transform .3s;transition:transform .3s}
#atc03 ul li h4{padding:12px 0 8px;font-size:22px;font-weight:800;color:#222;letter-spacing:.2px;font-family:'Raleway', sans-serif}
#atc03 ul li .arr{position:absolute;right:70px;top:25px;-webkit-transition:right .2s;transition:right .2s}
#atc03 ul li .arr:before{display:block;content:"";position:absolute;top:-7px;right:-30px;z-index:-1;width:44px;height:44px;border-radius:44px;background-color:#f5f5f5;-webkit-transition:right .2s;transition:right .2s}
#atc03 ul li:hover .icon{transform:translateY(-10px)}
#atc03 ul li:hover .arr{right:40px}
#atc03 ul li:hover .arr:before{right:12px}
#atc03 ul li p{position:relative;margin-top:12px;font-size:13px;font-weight:600;letter-spacing:.5px;color:#222;-webkit-transition:color .2s;transition:color .2s;font-family:'Raleway', sans-serif}
#atc03 ul li p span{position:absolute;left:0;top:0;-webkit-transition:all .4s;transition:all .4s}
#atc03 ul li p span.second{-webkit-transform:translateY(7px);transform:translateY(7px);position:absolute;left:0;top:0;opacity:0}
#atc03 ul li:hover .second{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
#atc03 ul li:hover .first{-webkit-transform:translateY(-7px);transform:translateY(-7px);opacity:0}
#atc03 ul li:hover p{color:#a201ff}

/* 스크롤효과 */
#atc03 ul li{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px);-webkit-transition:all .2s ;transition:all .2s }
#atc03 ul li{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px);-webkit-transition:all .2s ;transition:all .2s }
#atc03 ul li{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px);-webkit-transition:all .2s ;transition:all .2s }
#atc03 ul.active li:nth-child(1){opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:all .5s 0s ;transition:all .5s 0s }
#atc03 ul.active li:nth-child(2){opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:all .5s .2s ;transition:all .5s .2s }
#atc03 ul.active li:nth-child(3){opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:all .5s .4s ;transition:all .5s .4s }

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