@charset "utf-8";

#atc01{overflow:hidden;width:100%;height:100%;color:#111;font-family:'Poppins',sans-serif}
#atc01 .inner{width:1200px;margin:0 auto}

/* 타이틀 */
#atc01 .tit_area{padding:230px 0 0 96px}
#atc01 .tit_area .stxt{font-size:14px}
#atc01 .tit_area .btxt{margin-top:15px;font-size:40px;font-weight:700;line-height:50px}
#atc01 .tit_area .btxt span{overflow:hidden;display:block}
#atc01 .tit_area .btxt em{display:inline-block;font-style:normal;opacity:0;filter:alpha(opacity=0)}
#atc01 .tit_area .btxt em:nth-child(1){-webkit-transform:translateY(99px);-ms-transform:translateY(99px);transform:translateY(99px);-webkit-transition:all  0.79s 0.09s;transition:all  0.79s 0.09s}
#atc01 .tit_area .btxt em:nth-child(2){-webkit-transform:translateY(98px);-ms-transform:translateY(98px);transform:translateY(98px);-webkit-transition:all  0.78s 0.18s;transition:all  0.78s 0.18s}
#atc01 .tit_area .btxt em:nth-child(3){-webkit-transform:translateY(97px);-ms-transform:translateY(97px);transform:translateY(97px);-webkit-transition:all  0.77s 0.27s;transition:all  0.77s 0.27s}
#atc01 .tit_area .btxt em:nth-child(4){-webkit-transform:translateY(96px);-ms-transform:translateY(96px);transform:translateY(96px);-webkit-transition:all  0.76s 0.36s;transition:all  0.76s 0.36s}
.fp-viewing-secondPage #atc01 .tit_area .btxt em{opacity:1;filter:alpha(opacity=100);-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}

/* 이미지 */
#atc01 ul{position:absolute;bottom:0;width:100%;max-width:1200px;margin:0 auto}
#atc01 ul li{position:absolute;bottom:-50px /*0*/;width:273px;cursor:pointer}
#atc01 ul li.i-01{left:96px}
#atc01 ul li.i-02{left:464px}
#atc01 ul li.i-03{left:832px}
#atc01 ul li .img{overflow:hidden;width:0;-webkit-transition:all  .1s .6s;transition:all  .1s .6s}
#atc01 ul li .img img{-webkit-transition:all .6s ;transition:all .6s}
#atc01 ul li .img:before{display:block;content:"";position:absolute;bottom:0;left:0;z-index:-1;width:0;height:100%;background-color:#111}
#atc01 ul li .txt{position:absolute;right:-52px;top:-27px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg); font-size:14px;line-height:50px}
#atc01 ul li .txt span{display:block;font-size:13px;font-weight:700}
#atc01 ul li.i-02 .txt{right:-68px;top:-10px}
#atc01 ul li.i-03 .txt{right:-64px;top:-14px}
.fp-viewing-secondPage #atc01 ul li .img{width:273px;-webkit-transition:all .7s .3s;transition:all  .7s .3s}
.fp-viewing-secondPage #atc01 ul li .img:before{width:100%;-webkit-transition:all .6s;transition:all  0.6s}
#atc01 ul li .mask{display:table;position:absolute;bottom:0;left:0;z-index:1;-webkit-transform:translateY(100px);-ms-transform:translateY(100px);transform:translateY(100px);width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,.7);-webkit-transition:all .4s;transition:all .4s; opacity:0}
#atc01 ul li .mask p{display:table-cell;vertical-align:middle;font-size:13px;font-weight:500;color:#fff;letter-spacing:2px}
#atc01 ul li .mask p:after{display:block;content:url(/sh_img/inc/inc01/link.png);margin-top:10px}
#atc01 ul li:hover .img img{transform:scale(1.2);-webkit-filter:grayscale(100%);filter:gray}
#atc01 ul li:hover .mask{transform:translateY(0); opacity:1}

/* 그리드 */
#atc01 .grid{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;width:100%;max-width:1200px;margin:0 auto}
#atc01 .grid span{display:block;position:absolute;top:0;width:1px;height:0;background-color:#eaeaea;-webkit-transition:all .4s;transition:all .4s}
#atc01 .grid .l-01{left:0}
#atc01 .grid .l-02{left:96px}
#atc01 .grid .l-03{left:368px}
#atc01 .grid .l-04{left:464px}
#atc01 .grid .l-05{left:736px}
#atc01 .grid .l-06{left:832px}
#atc01 .grid .l-07{left:1104px}
#atc01 .grid .l-08{left:100%}
.fp-viewing-secondPage #atc01 .grid span{height:100%;-webkit-transition:all 1.5s .2s;transition:all 1.5s .2s}