@charset "utf-8";

#atc01{position:relative;width:1300px;height:800px;margin:0 auto}
#atc01 .tit_area{padding:105px 0 57px}
#atc01 .atc01_tit{padding:5px 0 5px 37px;border-left:3px solid #4a9e5c;font-family: 'Montserrat',sans-serif}
#atc01 .atc01_tit .num{font-weight:700;font-size:17px;color:#4a9e5c}
#atc01 .atc01_tit h2{font-weight:700;font-size:31px;letter-spacing:-2px;color:#454545;font-family: 'Montserrat',sans-serif}
#atc01 .atc01_tit h2 span{font-weight:200}

#atc01 .more_btn{display:block;transition:all ease .3s}
#atc01 .atc01_cont{overflow:hidden}
#atc01 .atc01_cont > div{float:left;width:33.3%}
#atc01 .atc01_cont .img_box{overflow:hidden;width:100%;height:244px;background:#f7f7f7}
#atc01 .atc01_cont h3{margin:46px 0 20px;padding-left:19px;border-left:2px solid #4a9e5c;font-size:20px;line-height:26px;color:#454545;font-family:'notokr-bold'}
#atc01 .atc01_cont .cont_txt{overflow:hidden;height:88px;margin-bottom:10px;padding:0 19px;font-size:15px;line-height:26px;color:#666;box-sizing:border-box;font-family:'notokr-regular'}

/* 제품더보기 버튼 */
#atc01 .more{position:relative;display:inline-block;margin-left:19px;padding:10px 0;font-size:13px;color:#4a9e5c;transition:padding ease .3s;font-family:'notokr-bold'}
#atc01 .more .arr_wrap{position:absolute;top:4px;right:-17px;bottom:0;width:30px;height:30px;border-radius:100px;transition:all .4s}
#atc01 .more .arr{display:inline-block;position:absolute;top:50%;left:5px;width:0;height:1px;margin-top:-1px;background:#fff;transition:width ease .3s}
#atc01 .more .arr:after, #atc01 .more .arr:before{content:'';position:absolute;top:1px;width:1px;height:0;background:#fff;transition:height ease .3s}	
#atc01 .more .arr:before{right:-1px;transform:rotate(135deg);transform-origin:top left;top:0}
#atc01 .more .arr:after{right:0;transform:rotate(45deg);transform-origin:top right;top:1px}

/*마우스오버*/
#atc01 .more_btn:hover .more{padding-right:25px}
#atc01 .more_btn:hover .arr_wrap{background:#4a9e5c}
#atc01 .more_btn:hover .arr{width:18px;transition-delay:0}
#atc01 .more_btn:hover .arr:after,#atc01 .more_btn:hover .arr:before{height:6px;transition-delay:.3s}

/*회색*/
.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}
#atc01 .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}
#atc01 .more_btn:hover .grayscale-replaced.grayscale-fade svg {opacity: 0}