@charset "utf-8";

#atc02{position:relative;width:100%;/*background-color:#edf8f3*/}
/*#atc02:before{display: block;content:"";position:absolute;left:50%;top:-40px;z-index:1;width:1px;height:100px;background-color:#33e2a7}*/
#atc02_wrap{overflow:hidden;position:relative;width:100%;margin:0 auto;padding:120px 0 100px}
#atc02_wrap:before{display:block;content:"";position:absolute;right:8%;top:-39%;z-index:0;width:630px;height:630px;border:140px solid #eefbf5;border-radius:100%}
#atc02_wrap:after{display:block;content:"";position:absolute;left:3%;bottom:-67%;z-index:0;width:830px;height:830px;border:160px solid #eefbf5;border-radius:100%}

/* 타이틀 */
#atc02 .tit_area{position:relative;margin-bottom:40px;padding:0 20px;text-align:center}
#atc02 .tit_area .etxt{font-size:15px;font-weight:600;letter-spacing:.3px;color:#33e2a7;font-family:'Montserrat', sans-serif}
#atc02 .tit_area p{margin-top:15px;font-size:36px;letter-spacing:-.7px;line-height:1.3;font-family:'notokr-light'}

/* 이미지 */
#atc02 ul{position:relative;z-index:1;max-width:1200px;width:100%;margin:0 auto 60px}
#atc02 ul:after{display:block;content:"";visibility:hidden;clear:both}
#atc02 ul li{overflow:hidden;float:left;position:relative;width:31.25%;cursor:pointer;-ms-transform:translateY(600px);-webkit-transform:translateY(600px);transform:translateY(600px);-webkit-transition:all .2s;transition:all .2s; opacity:0}
#atc02 ul li:nth-child(2){margin:0 3%}
#atc02 ul li{opacity:1;-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:all 1.7s 0s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all 1.7s 0s cubic-bezier(0.165, 0.84, 0.44, 1)}

/*#atc02 ul.active li:nth-child(1){opacity:1;-ms-transform:translateY(60px);-webkit-transform:translateY(60px);transform:translateY(60px);-webkit-transition:all 1.7s .15s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all 1.7s .15s ecubic-bezier(0.165, 0.84, 0.44, 1)}
#atc02 ul.active li:nth-child(2){opacity:1;-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:all 1.7s 0s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all 1.7s 0s cubic-bezier(0.165, 0.84, 0.44, 1)}
#atc02 ul.active li:nth-child(3){opacity:1;-ms-transform:translateY(40px);-webkit-transform:translateY(40px);transform:translateY(40px);-webkit-transition:all 1.7s .3s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all 1.7s .3s cubic-bezier(0.165, 0.84, 0.44, 1)}*/
#atc02 ul li img{-webkit-transition:transform .8s linear;transition:transform .8s linear}
#atc02 ul li .txt{position:absolute;left:0;bottom:0;padding:50px;font-size:17px;line-height:1.5;color:#fff;font-family:'notokr-regular'}
#atc02 ul li .txt h3{padding-bottom:10px;font-size:22px;font-weight:normal;letter-spacing:-.5px;font-family:'notokr-bold'}
#atc02 ul li .txt span{display:block}
#atc02 ul li:hover{-webkit-box-shadow: 18px 18px 30px -19px rgba(0,0,0,0.25);-moz-box-shadow: 18px 18px 30px -19px rgba(0,0,0,0.25);box-shadow: 18px 18px 30px -19px rgba(0,0,0,0.25)}
#atc02 ul li:hover img{-webkit-transform:scale(1.07);transform:scale(1.07)}

/* 마우스오버 테두리효과 */
#atc02 ul li em{display:block;position:absolute;z-index:10;background-color:#33e2a7}
#atc02 ul li .emL{left:-1px;bottom:-1px;width:10px;height:0}
#atc02 ul li .emT{left:-1px;top:-1px;width:0;height:10px}
#atc02 ul li .emR{right:-1px;top:-1px;width:10px;height:0}
#atc02 ul li .emB{right:-1px;bottom:-1px;width:0;height:10px}
#atc02 ul li:hover .emL{-webkit-animation:lineAniL 1.4s 0.1s forwards;animation:lineAniL 1.4s 0.1s forwards}
#atc02 ul li:hover .emT{-webkit-animation:lineAniT 1.4s 0.3s forwards;animation:lineAniT 1.4s 0.3s forwards}
#atc02 ul li:hover .emR{-webkit-animation:lineAniR 1.4s 0.5s forwards;animation:lineAniR 1.4s 0.5s forwards}
#atc02 ul li:hover .emB{-webkit-animation:lineAniB .7s 0s forwards;animation:lineAniB .7s 0s forwards}
@-webkit-keyframes lineAniL{0%{height:0;opacity:0}25%{height:100%;opacity:1}48%{height:100%}49%{height:100%}100%{height:100%}}
@-webkit-keyframes lineAniT{0%{width:0;opacity:0}25%{width:100%;opacity:1}48%{width:100%}49%{width:100%}100%{width:100%}}
@-webkit-keyframes lineAniR{0%{height:0;opacity:0}25%{height:100%;opacity:1}50%{height:100%}51%{height:100%}100%{height:100%}}
@-webkit-keyframes lineAniB{0%{width:0;opacity:0}25%{width:100%;opacity:1}50%{width:100%}51%{width:100%}100%{width:100%}}
@keyframes lineAniL{0%{height:0;opacity:0}25%{height:100%;opacity:1}48%{height:100%}49%{height:100%}100%{height:100%}}
@keyframes lineAniT{0%{width:0;opacity:0}25%{width:100%;opacity:1}48%{width:100%}49%{width:100%}100%{width:100%}}
@keyframes lineAniR{0%{height:0;opacity:0}25%{height:100%;opacity:1}50%{height:100%}51%{height:100%}100%{height:100%}}
@keyframes lineAniB{0%{width:0;opacity:0}25%{width:100%;opacity:1}50%{width:100%}51%{width:100%}100%{width:100%}}

@media (max-width:1024px){
#atc02_wrap:before{right:-12%;top:-40%}
#atc02_wrap:after{left:-15%}
#atc02 ul li .txt{padding:30px;font-size:16px}	
#atc02 ul li .txt span{display:inline}
}
@media (max-width:768px){
#atc02_wrap{padding:80px 0}
/*#atc02:before{display: block;content:"";position:absolute;left:50%;top:-30px;width:1px;height:80px;background-color:#33e2a7}*/
#atc02_wrap:before{display:block;content:"";position:absolute;right:-35%;top:-16%;z-index:0;width:420px;height:420px;border:110px solid #e4f5ed;border-radius:100%}
#atc02_wrap:after{display:block;content:"";position:absolute;left:-35%;bottom:-30%;z-index:0;width:620px;height:620px;border:135px solid #e4f5ed;border-radius:100%}
#atc02 .tit_area{margin-bottom:20px}
#atc02 .tit_area .etxt{font-size:13px}
#atc02 .tit_area p{font-size:31px}
#atc02 ul{padding:0 25px;margin:0 auto;text-align:center}
#atc02 ul li{display:inline-block;float:none;width:auto}
#atc02 ul li:nth-child(2){margin:20px 0}
#atc02 ul.active li:nth-child(1){-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:all .7s .15s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all .7s .15s ecubic-bezier(0.165, 0.84, 0.44, 1)}
#atc02 ul.active li:nth-child(3){-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:all .7s .3s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all .7s .3s cubic-bezier(0.165, 0.84, 0.44, 1)}
#atc02 ul li:nth-child(3) .img img{-webkit-transform:translateY(-25%);-ms-transform:translateY(-25%);transform:translateY(-25%)}
#atc02 ul li:hover{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
#atc02 ul li .img{overflow:hidden; height:350px}
#atc02 ul li .txt{position:relative;padding:30px 30px;font-size:15px;color:#888;background-color:#fff}
#atc02 ul li .txt h3{padding-bottom:5px;font-size:19px;color:#222}
#atc02 ul li .txt h3:after{display:block;content:"";width:30px;height:2px;margin:10px auto;background-color:#33e2a7}
#atc02 ul li em{display:none}
#atc02 ul li img{width:100%}
}
@media (max-width:480px){
#atc02_wrap{padding:40px 0}
#atc02 .block{display:block}	
#atc02 .tit_area p{font-size:28px}
#atc02 ul li .img{height:250px}	
#atc02 ul li .txt{padding:20px 30px}
#atc02 ul li:nth-child(1) .img img{-webkit-transform:translateY(-15%);-ms-transform:translateY(-15%);transform:translateY(-15%)}
}