.portfolio_wrap {
  position:relative;
  width:100%;
  background:url(/main/img/portfolio_bg.jpg) repeat;
  transition:all 1s ease;

}
.port_mg {margin:90px 0 50px; position:relative; z-index:1;}
/*.port_mg:before {content:''; width:551px; height:415px; background:url(../images/pre_images/work_bg01.png) no-repeat; position:absolute; top:-50px; right:-50px; z-index:-1;}*/

#filters {
  overflow:hidden;
  text-align:center;
  padding:0;
  list-style:none;
  margin:0 0 100px 0;

}

#filters li {
font-family: 'NanumSquare', sans-serif;
display:inline-block;
  font-size:20px;	
  padding:0 40px;
  height:50px;
  line-height:50px; 
  cursor:pointer;
  color:#fff;
  text-decoration:none;
  transition:color 300ms ease-in-out;
}


#filters li:hover {
  color:#2cc1ea;
}

#filters li.active {
 
 color:#2cc1ea;
  
}

#portfoliolist .portfolio {
  width:33.33%;
  display:none;
  float:left;
  overflow:hidden;
}

.portfolio-wrapper {
  overflow:hidden;
  position:relative !important;
  cursor:pointer;
}

.portfolio > img {
  
  position:relative;
  top:0;
  -webkit-transition:all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

.portfolio .label {
  position:absolute;
  width:100%;
  height:40px;
  bottom:-40px;
  -webkit-transition:all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}



.portfolio .label-bg {
  background:#eb5f64;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}

.portfolio .label-text {
  color:#fff;
  position:relative;
  z-index:500;
  height:40px; line-height:40px;
  font-size:14px;
  text-align:center;
}



.portfolio:hover .label {
  bottom:0;
  color:#fff;
}



.portfolio:hover img {
  top:-40px;
  opacity:0.8;
  
}
.contents > a > img {width:100%;}
.contents_hover {position:absolute; top:0; left:0; width:100%; height:100%; display:none;}
.contents_hover .hover_inner {width:100%; height:100%; display:table;}
.hover_inner dl{display:table-cell; vertical-align:middle; text-align:center; background:#2fc1e9; opacity:0.9;}
.hover_inner dl:after{content:'';display:block;width:45px;height:12px;background:url("/images/portfolio_ic.png") no-repeat;margin:10px auto 0}
.hover_inner dt {font-size:18px; font-weight:bold; color:#fff;}
.hover_inner dd {font-size:25px; font-weight:bold; color:#fff;}

.portfolio_wrap:after {
  content:"\0020";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}

#filters li span{position:relative;display:inline-block}
#filters li span:after {content:"";width:0;height:1px;background:#2cc1ea;position:absolute;top:50%;left:-5px;-webkit-transition:width .3s ease;transition:width .3s ease}
#filters li:hover span:after {width:120%}


/* #Tablet (Portrait) */
@media screen and (max-width:1200px) {

	#filters {
  margin:0 0 50px 0;
}
	#filters li {

  padding:0 20px;

}

#portfoliolist .portfolio {
  width:50%;
}
.port_mg {margin:80px 0 50px;}
}


@media screen and (max-width:768px) {

#filters li {
  display:block;
  width:100%;
  color:#fff;

}
/*  #Mobile (Portrait) - Note:Design for a width of 320px */
@media screen and (max-width:680px) {
#portfoliolist .portfolio {
  width:100%;
}
.port_mg:before {top:150px; right:-150px; }

}