@charset "utf-8";

#atc04{overflow:hidden;position:relative;z-index:10;width:100%;background-color:#2d3231}
#atc04:before{display:block;content:"";position:absolute;left:0;top:0;width:50%;height:100%;background:url(/sh_img/include/inc04/img/bg.png) left center no-repeat #33e2a7}
#atc04_wrap{position:relative;max-width:1200px;width:100%;margin:0 auto}
#atc04_wrap:after{display:block;content:"";visibility:hidden;clear:both}

/* 타이틀 */
#atc04 .tit_area{position:relative;float:left;width:25%;margin-top:300px;font-size:52px;font-weight:100;color:#fff;line-height:1.2;letter-spacing:-2px; font-family:'AritaBuri'}
#atc04 .tit_area:before{display:block;content:"";position:absolute;left:-60px;top:-10px;width:40px;height:34px;background-image:url(/sh_img/include/inc04/img/deco.png);background-size:100%}
#atc04 .tit_area span{display:block}

/* 내용 */
#atc04 .cont_area{position:relative;float:left;width:75%;margin-top:175px;border-right:1px solid rgba(255,255,255,.07);background-color:#2d3231}
#atc04 .cont_area:after{display:block;content:"";visibility:hidden;clear:both}
#atc04 .cont_area li{float:left;width:33.33%;-ms-transform:translateX(-20px);-webkit-transform:translateX(-20px);transform:translateX(-20px);padding:125px 0 130px;font-size:16px;color:rgba(255,255,255,.5);text-align:center;opacity:0}
#atc04 .cont_area li.link{cursor:pointer}
#atc04 .cont_area li .icon{display:inline-block;width:160px;height:160px;border-radius:100%;text-align:center;line-height:158px;background-color:rgba(255,255,255,.05);-webkit-transition:all .2s;transition:all .2s}
#atc04 .cont_area li .tit{margin:35px 0 20px;font-size:22px;color:#fff;letter-spacing:-.5px;font-family:'notokr-medium'}
#atc04 .cont_area li .txt span{display:block}
#atc04 .cont_area li:nth-child(2){width:33.34%;border-left:1px solid rgba(255,255,255,.07);border-right:1px solid rgba(255,255,255,.07)}
#atc04 .cont_area li:hover .icon{margin-top:-10px;background-color:rgba(255,255,255,.1)}

#atc04 ul.active li:nth-child(1){opacity:1;-ms-transform:translateX(0);-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:all 1.7s .2s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all 1.7s .2s ecubic-bezier(0.165, 0.84, 0.44, 1)}
#atc04 ul.active li:nth-child(2){opacity:1;-ms-transform:translateX(0);-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:all 1.7s .4s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all 1.7s .4s ecubic-bezier(0.165, 0.84, 0.44, 1)}
#atc04 ul.active li:nth-child(3){opacity:1;-ms-transform:translateX(0);-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:all 1.7s .6s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all 1.7s .6s ecubic-bezier(0.165, 0.84, 0.44, 1)}

@media (max-width:1024px){
#atc04{top:0}
#atc04:before{background:none}
#atc04 .tit_area{float:none;width:100%;margin-top:0;padding:100px 0 40px;font-size:45px;text-align:center;background:url(/sh_img/include/inc04/img/bg.png) bottom no-repeat #33e2a7;background-size:cover}	
#atc04 .tit_area span{display:inline}
#atc04 .cont_area{float:none;width:100%;margin-top:0}
#atc04 .cont_area li{padding:100px 0;font-size:15px}
#atc04 .cont_area li .icon{width:140px;height:140px;line-height:138px}
}

@media (max-width:768px){
#atc04 .cont_area li .txt{padding:0 20px}
#atc04 .cont_area li .txt span{display:inline}	
#atc04 .cont_area li:hover .icon{margin-top:0;background-color:rgba(255,255,255,.05)}
}

@media (max-width:600px){
#atc04 .tit_area{padding:70px 20px 30px;font-size:33px}	
#atc04 .cont_area li{float:none;position:relative;width:100%;padding:35px 20px 35px 140px;text-align:left}
#atc04 .cont_area li:nth-child(2){width:100%;border:none;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
#atc04 .cont_area li .icon{position:absolute;left:20px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:100px;height:100px;line-height:98px}
#atc04 .cont_area li .icon img{width:50px}
#atc04 .cont_area li .tit{margin:0 0 10px;font-size:20px;font-family:'notokr-medium'}
#atc04 .cont_area li .txt{padding:0}
}
@media (max-width:480px){
#atc04 .block{display:block!important}	
}
@media (max-width:380px){
#atc04 .cont_area li .tit{font-size:19px}	
}