@charset "utf-8";

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

/* 타이틀 */
#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 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;font-family:nanumgothic}
#atc01 .tab_area li.on{border-top:3px solid #fe924d}

/* 포트폴리오 */
#atc01 .tab_cont{position:relative; width:100%;min-height:200px}
#atc01 .tab_cont li{position:absolute;width:268px;margin-bottom:0}
#atc01 .tab_cont li:nth-child(even){animation-delay:0}
#atc01 .tab_cont li:nth-child(odd){animation-delay:0}
#atc01 .tab_cont li:nth-child(4n+1){left:0!important}
#atc01 .tab_cont li:nth-child(4n+2){left:25%!important}
#atc01 .tab_cont li:nth-child(4n+3){left:50%!important}
#atc01 .tab_cont li:nth-child(4n+4){left:75%!important}
#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 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:hover:before{opacity:1}
#atc01 .tab_cont li a:hover .subj{opacity:1}
#atc01 .tab_cont li a:hover h4{transform:translateX(0)}

/* 제품더보기 버튼 */
#atc01 .more_btn{display:block;width:170px;margin:50px auto 0;padding:13px 0;font-size:15px;text-align:center;color:#fff;background-color:#fe924d;transition:all ease .3s;font-family:notokr-medium}
#atc01 .more_btn p{display:inline-block; position:relative;transition:padding ease .3s}
#atc01 .more_btn:hover p{padding-right:25px}
#atc01 .more_btn .arr_wrap{position:absolute;top:1px;right:0;bottom:0;width:15px}
#atc01 .more_btn .arr{display:inline-block;position:absolute;top:50%;left:0;width:0;height:1px;margin-top:-1px;background:#fff;transition:width ease .3s}
#atc01 .more_btn .arr:after, #atc01 .more_btn .arr:before{content:'';position:absolute;top:1px;width:1px;height:0;background:#fff;transition:height ease .3s}	
#atc01 .more_btn .arr:before{right:-1px;transform:rotate(135deg);transform-origin:top left;top:0}
#atc01 .more_btn .arr:after{right:0;transform:rotate(45deg);transform-origin:top right;top:1px}
#atc01 .more_btn:hover{background-color:#ff7d2a}
#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}
	
/* fadeIn  */
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;animation-delay:.2s}
@-webkit-keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

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