@charset "utf-8";

#atc01{position:relative;width:1112px;margin:0 auto;padding:120px 0 0}

/* 타이틀 */
#atc01 .tit_area{margin-bottom:30px;text-align:center;font-size:17px;color:#777;font-family:notokr-medium}
#atc01 .tit_area h3{font-size:38px;font-weight:800;color:#222;font-family:'Raleway', sans-serif}

/* 탭 */
#atc01 .tab_area{overflow:hidden;margin-bottom:15px}
#atc01 .tab_area .tit{padding-right:30px;font-size:22px;line-height:22px;color:#fe924d;font-family:'notokr-bold'}
#atc01 .tab_area li{display:inline-block;vertical-align:bottom;margin-right:35px;padding-top:5px;font-size:16.5px;font-weight:600;box-sizing:content-box;cursor:pointer}
#atc01 .tab_area li.on{border-top:3px solid #fe924d}

/* 포트폴리오 */
#atc01 .tab_cont{overflow:hidden;position:relative;width:100%;min-height:200px}
#atc01 .tab_cont li{float:left;width:268px;height:201px;margin:0 0 10px 10px}
#atc01 .tab_cont li:nth-child(4n+1) {margin-left:0}
#atc01 .tab_cont li a{display:block;position:relative}
#atc01 .tab_cont li a:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:rgba(0,0,0,.5);background:-moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(26,26,26,0.8) 100%);
background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(26,26,26,0.8) 100%);background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(26,26,26,0.8) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc1a1a1a',GradientType=0 );
opacity:0;transition:all .3s}
#atc01 .tab_cont li a:after{position:absolute;top:50px;left:106px;content:url(/sh_img/make24/include_01/img/more_btn.png);opacity:0;transition:all .5s}

#atc01 .tab_cont li img{width:100%;height:auto}
#atc01 .tab_cont li .subj{position:absolute;left:25px;bottom:15px;font-size:14px;color:#fff;opacity:0;transition:all .4s;font-family:notokr-light}
#atc01 .tab_cont li .subj h4{font-size:17px;transform:translateX(15px);transition:all .4s}
#atc01 .tab_cont li .subj h4:after{display:block;content:"";margin:6px 0 11px;width:22px;height:1px;background-color:#fe924d}
#atc01 .tab_cont li a{position:relative}
#atc01 .tab_cont li a:hover:before{opacity:1}
#atc01 .tab_cont li a:hover:after{opacity:1}
#atc01 .tab_cont li a:hover .subj{opacity:1}
#atc01 .tab_cont li a:hover h4{transform:translateX(0)}
#atc01 .tab_cont li a:hover:before{opacity:1}


/* fadeIn  */
.animated{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;animation-delay:0}
@-webkit-keyframes fadeIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}

/* 익스 8 */
@media \0screen{
.animated{filter:alpha(opacity=100}
}