@charset "utf-8";

.atc02{position:relative;width:1200px;height:570px;margin:0 auto;font-family:'notokr-regular'}
.atc02 .line{position:absolute;top:0;left:0;z-index:-1;width:1200px;height:100%}
.atc02 .line > div{float:left;width:25%;height:100%;border-right:1px solid #efefef}
.atc02 .line > div:last-child{border:none}

/*타이틀*/
.atc02 .tit_area{text-align:center;margin-bottom:30px}
.atc02 .tit_area h4{position:relative;display:inline-block;margin-top:75px;font-size:30px;line-height:45px;color:#222}
.atc02 .tit_area h4 span{font-family:'notokr-bold'}
.atc02 .tit_area h4:before{position:absolute;top:-4px;left:10px;content:'';width:4px;height:4px;border-radius:100px;background:#f88132}
.atc02 .tit_area h4:after{position:absolute;top:-4px;left:38px;content:'';width:4px;height:4px;border-radius:100px;background:#f88132}
.atc02 .tit_area .s_tit{font-size:15px;color:#666}

/*이미지*/
.atc02 .cont_box{clear:both}
.atc02 .cont_box > div{position:relative;float:left;width:25%;text-align:center}
.atc02 .cont_box .img_tit{margin:20px 0 12px;font-size:18px;line-height:18px;color:#222;transition: all .3s;font-family:'notokr-bold'}
.atc02 .cont_box .img_txt{font-size:15px;line-height:26px;color:#666}

.atc02 .cont_box .more_btn{position:relative;display:block}
.atc02 .cont_box .more_btn:before{position:absolute;top:23px;left:-14px;z-index:10;width:100px;height:49px;content:'';font-size:13px;line-height:31px;color:#fff;background:url(/sh_img/make24/include/include_02/img/flag.png);transition: all .8s;font-family:'notokr-medium'}

.atc02 .cont_box .btn_01:before{content:'STEP 01'}
.atc02 .cont_box .btn_02:before{content:'STEP 02'}
.atc02 .cont_box .btn_03:before{content:'STEP 03'}
.atc02 .cont_box .btn_04:before{content:'STEP 04'}

/*마우스오버 효과*/
.atc02 .cont_box .more_btn:hover .img_tit{color:#ff9000}
.atc02 .cont_box .more_btn:hover:before{background:url(/sh_img/make24/include/include_02/img/flag_on.png)}


/*회색*/
.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* IE 6-9 */filter: gray;
  /*Chrome 19+,Safari 6+,Safari 6+ iOS,Opera 15+*/
  -webkit-filter: grayscale(100%)}
.grayscale.grayscale-fade {-webkit-transition: -webkit-filter .5s}
.atc02 .more_btn:hover .grayscale.grayscale-fade{-webkit-filter: grayscale(0%);filter: none}
.grayscale-replaced.grayscale-fade svg {opacity: 1;-webkit-transition: opacity .5s ease;transition: opacity .5s ease}
.atc02 .more_btn:hover .grayscale-replaced.grayscale-fade svg {opacity: 0}