@charset "utf-8";

#atc03{overflow:hidden;position:relative;height:100vh}
#atc03:before{content:"";position:absolute;top:0;left:0;z-index:-1;width:100%;height:50%;background-color:#f0f1f2}
#atc03 .inner{position:relative;top:52%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);text-align:center}

/* 그리드 */
#atc03 .grid{position:relative}
#atc03 .grid:before, #atc03 .grid:after{content:"";position:absolute;top:0;left:calc(100% / 3);width:1px;height:0;background-color:#e1e1e1;-webkit-transition:all .2s 0s;transition:all .2s 0s}
#atc03 .grid:after{left:calc((100% / 3) * 2)}

/* 컨텐츠 */
#atc03 .tit{overflow:hidden;margin-bottom:55px;font-size:38px;color:#222}
#atc03 .tit p{-webkit-transform:translateY(100px);-ms-transform:translateY(100px);transform:translateY(100px);-webkit-transition:all .2s 0s;transition:all .2s 0s}
#atc03 .tit p b{font-family:'LotteMartDreamBold'}
#atc03 ul{display:flex;align-items:center}
#atc03 ul li{opacity:0;flex-grow:1;-webkit-transform:translateY(100px);-ms-transform:translateY(100px);transform:translateY(100px);width:calc(100% / 3);-webkit-transition:all .6s .3s;transition:all .6s .3s}
#atc03 ul li a{display:inline-block;color:#777}
#atc03 ul li .img{overflow:hidden;display:inline-block;width:420px;height:300px;background:#aaa;-webkit-transition:all .3s;transition:all .3s}
#atc03 ul li .img img{-webkit-transition:all .3s;transition:all .3s}
#atc03 ul li p{margin:30px 0 15px;font-size:22px;color:#222;font-family:'LotteMartDreamBold'}

/* 바로가기 버튼 */
#atc03 ul li span{opacity:0;display:block;width:140px;margin:0 auto;padding-bottom:8px;border-bottom:2px solid #222e59;font-size:15px;color:#222e59;-webkit-transition:all .3s;transition:all .3s;font-family:'LotteMartDreamMedium'}
#atc03 ul li span svg{vertical-align:-5px;width:22px;height:22px;margin-left:52px}
#atc03 ul li a:hover .img{width:400px}
#atc03 ul li a:hover .img img{-webkit-transform:scale(1.12);-ms-transform:scale(1.12);transform:scale(1.12)}
#atc03 ul li a:hover span{opacity:1;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px)}

/* active */
.inc03.active #atc03 .grid:before, #atc03 .grid:after{height:100vh;-webkit-transition:all .9s .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);transition:all .9s .3s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.inc03.active #atc03 .tit p{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:all .6s .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);transition:all .6s .3s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.inc03.active #atc03 ul li{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
.inc03.active #atc03 ul li:nth-child(1){z-index:3;-webkit-transition:all .6s .3s;transition:all .6s .3s}
.inc03.active #atc03 ul li:nth-child(2){z-index:2;-webkit-transition:all .6s .4s;transition:all .6s .4s}
.inc03.active #atc03 ul li:nth-child(3){z-index:1;-webkit-transition:all .6s .5s;transition:all .6s .5s}