@charset "utf-8";

#atc02{position:relative;width:1112px;margin:0 auto;padding:80px 0 0}

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

/* 탭 */
#atc02 .tab_area2{overflow:hidden;margin-bottom:15px}
#atc02 .tab_area2 .tit{padding-right:30px;font-size:22px;line-height:22px;color:#fe924d;font-family:'notokr-bold'}
#atc02 .tab_area2 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;}
#atc02 .tab_area2 li.on{border-top:3px solid #fe924d}

/* 포트폴리오 */
#atc02 .tab_cont2{overflow:hidden;position:relative;width:100%;min-height:200px}
#atc02 .tab_cont2 li{float:left;width:268px;height:201px;margin:0 0 10px 10px}
#atc02 .tab_cont2 li:nth-child(4n+1) {margin-left:0}
#atc02 .tab_cont2 li a{display:block;position:relative}
#atc02 .tab_cont2 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}
#atc02 .tab_cont2 li a:after{position:absolute;top:50px;left:106px;content:url(/sh_img/make24/include_02/img/more_btn.png);opacity:0;transition:all .3s}
#atc02 .tab_cont2 li img{width:100%;height:auto}
#atc02 .tab_cont2 li .subj{position:absolute;left:25px;bottom:15px;font-size:14px;color:#fff;opacity:0;transition:all .4s;font-family:notokr-light}
#atc02 .tab_cont2 li .subj h4{font-size:17px;transform:translateX(15px);transition:all .4s}
#atc02 .tab_cont2 li .subj h4:after{display:block;content:"";margin:6px 0 11px;width:22px;height:1px;background-color:#fe924d}
#atc02 .tab_cont2 li a:hover:before{opacity:1}
#atc02 .tab_cont2 li a:hover:after{opacity:1}
#atc02 .tab_cont2 li a:hover .subj{opacity:1}
#atc02 .tab_cont2 li a:hover h4{transform:translateX(0)}




/* 제품더보기 버튼 */
#atc02 .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}
#atc02 .more_btn p{display:inline-block; position:relative;transition:padding ease .3s}
#atc02 .more_btn:hover p{padding-right:25px}
#atc02 .more_btn .arr_wrap{position:absolute;top:1px;right:0;bottom:0;width:15px}
#atc02 .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}
#atc02 .more_btn .arr:after, #atc02 .more_btn .arr:before{content:'';position:absolute;top:1px;width:1px;height:0;background:#fff;transition:height ease .3s}	
#atc02 .more_btn .arr:before{right:-1px;transform:rotate(135deg);transform-origin:top left;top:0}
#atc02 .more_btn .arr:after{right:0;transform:rotate(45deg);transform-origin:top right;top:1px}
#atc02 .more_btn:hover{background-color:#ff7d2a}
#atc02 .more_btn:hover .arr{width:18px;transition-delay:0}
#atc02 .more_btn:hover .arr:after,#atc02 .more_btn:hover .arr:before{height:6px;transition-delay:.3s}