@charset "utf-8";

#atc01{display:flex;position:relative;margin:-75px auto 0;z-index:10;width:1300px;text-align:center;background:#fff}
#atc01:before{display:block;content:"";position:absolute;left:-50%;width:50%;height:300px;background-color:#fff}
#atc01 .cs{position:relative;top:-53px;width:330px;padding:45px 42px 50px;color:rgba(255,255,255,.5);font-size:15px;background:var(--primary);font-family:'notokr-regular'}
#atc01 .cs .tit{font-size:18px;color:#fff;font-family:'notokr-bold'}
#atc01 .cs .num{padding:5px 0 9px;font-size:36px;line-height:46px;font-weight:700;color:#fff;font-family:'Philosopher',sans-serif}
#atc01 .cs a{display:block;padding:11px 0;margin-top:16px;font-size:15px;border:1px solid rgba(255,255,255,.3);color:#fff;transition:all .2s;font-family:'notokr-medium'}
#atc01 .cs a .fa{margin-left:6px}
#atc01 .cs a:hover{color:var(--primary);background:#fff}
#atc01 .icon_area{width:calc(100% - 330px)}
#atc01 .icon_area ul{display:flex;padding-top:45px}
#atc01 .icon_area ul li{width:calc(100% / 4)}
#atc01 .icon_area ul li+li{border-left:1px solid #e1e1e1}
#atc01 .icon_area ul li a{display:block}
#atc01 .icon_area ul li .icon{position:relative;width:59px;height:54px;margin:0 auto}
#atc01 .icon_area ul li .icon img{position:absolute;left:0;transition:all .3s}
#atc01 .icon_area ul li .icon .img_on{opacity:0}
#atc01 .icon_area ul li p{padding:20px 0 5px;font-size:19px;color:#222;transition:all .3s;font-family:'notokr-bold'}
#atc01 .icon_area ul li span{font-size:16px;color:#666;font-family:'Philosopher',sans-serif}
#atc01 .icon_area ul li:hover p{color:var(--primary)}
#atc01 .icon_area ul li:hover .icon img:not(.img_on){opacity:0}
#atc01 .icon_area ul li:hover .icon .img_on{opacity:1}