@charset "utf-8";

#atc03{position:relative;z-index:0;width:100%;background-color:#f7f7f7}
#atc03_wrap{position:relative;width:1200px;margin:0 auto}

#atc03 ul{overflow:hidden;padding:120px 0 105px}
#atc03 ul li{float:left;position:relative;width:33.33%;padding:20px 50px;font-size:15px;color:#888;cursor:pointer}
#atc03 ul li .icon{position:absolute;right:45px;bottom:-5px;-webkit-transition:transform .3s;transition:transform .3s}
#atc03 ul li h4{padding-bottom:12px;font-size:26px;font-weight:700;color:#222;letter-spacing:.2px;font-family:'Playfair Display', serif}
#atc03 ul li:hover .icon{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}
#atc03 ul li p{position:relative;margin-top:40px;font-size:13px;font-weight:400;letter-spacing:.5px;color:#222;-webkit-transition:color .2s;transition:color .2s;font-family:'Playfair Display', serif}
#atc03 ul li p:after{content:"";position:absolute;left:76px;top:8px;width:20px;height:5px;background-image:url(/sh_img/include/include_03/img/arr.png);-webkit-transition:left .2s;transition:left .2s}
#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:#dbb313}
#atc03 ul li:hover p:after{left:82px}

/* 효과 */
#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:1200px}
#atc03 .grid span{display:block;position:absolute;top:0;z-index:1;width:1px;height:100%;background:#e1e1e1}
#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%}