@charset "utf-8";

#atc01{overflow:hidden;position:relative;height:100vh;background-color:#222e59}
#atc01 ul{overflow:hidden}
#atc01 ul li{overflow:hidden;opacity:0;float:left;position:relative;-webkit-transform:translateX(-50px);-ms-transform:translateX(-50px);transform:translateX(-50px);width:calc(100% / 3);height:calc(100vh + 40px);background:url(/sh_img/include/inc01/img01.jpg) center top no-repeat;background-size:cover;color:#fff;text-align:center;-webkit-transition:all .6s .3s, height .3s 0s;transition:all .6s .3s, height .3s 0s;font-family:'LotteMartDreamMedium'}
#atc01 ul li:nth-child(2){background-image:url(/sh_img/include/inc01/img03.jpg)}
#atc01 ul li:nth-child(3){background-image:url(/sh_img/include/inc01/img02.jpg)}
#atc01 ul li:before{opacity:.5;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);-webkit-transition:all .3s;transition:all .3s}
#atc01 ul li:hover{height:100vh}
#atc01 ul li:hover:before{opacity:1;background-color:rgba(29,94,198,.75)}

/* 컨텐츠 */
#atc01 ul li div{position:relative;top:calc(50% + 30px);-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
#atc01 ul li p{margin-bottom:10px;font-size:38px;font-family:'LotteMartDreamBold'}
#atc01 ul li a{opacity:0;display:block;position:relative;-webkit-transform:translateY(-40px);-ms-transform:translateY(-40px);transform:translateY(-40px);width:205px;height:65px;margin:50px auto 0;padding-right:40px;border-radius:100px;border:1px solid rgba(255,255,255,.4);font-size:15px;color:#fff;line-height:63px;-webkit-transition:all .3s;transition:all .3s;font-family:'LotteMartDreamMedium'} 
#atc01 ul li:hover a{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
#atc01 ul li a svg{position:absolute;top:20px;right:37px;-webkit-transition:all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);transition:all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
#atc01 ul li a svg.on{opacity:0;top:30px;right:47px}
#atc01 ul li a:hover{border-color:#fff;color:#1d5ec6;background-color:#fff}
#atc01 ul li a:hover svg.on{opacity:1;top:20px;right:37px}
#atc01 ul li a:hover svg.off{opacity:0;top:10px;right:27px}

/* active */
.inc01.active #atc01 ul li{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
.inc01.active #atc01 ul li:nth-child(1){z-index:3;-webkit-transition:all .6s .2s, height .3s 0s;transition:all .6s .2s, height .3s 0s}
.inc01.active #atc01 ul li:nth-child(2){z-index:2;-webkit-transition:all .6s .3s, height .3s 0s;transition:all .6s .3s, height .3s 0s}
.inc01.active #atc01 ul li:nth-child(3){z-index:1;-webkit-transition:all .6s .4s, height .3s 0s;transition:all .6s .4s, height .3s 0s}