#info {-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#fcf8e3; border:1px solid  #fbeed5; width:95%; max-width:900px; margin:0 auto 40px auto; font-family:arial; font-size:12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box;}

#info .info-wrapper {padding:10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box;}
#info a {color:#c09853; text-decoration:none;}
#info p {margin:5px 0 0 0;}


.container {position: relative; width: 960px; margin: 0 auto; -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}
 
#filters {margin:60px 0 ; padding:0; list-style:none; font-size:0; text-align:center;}
#filters li {display:inline-block; margin:0 2px;}
#filters li span {display: block; padding:10px 30px; text-decoration:none; color:#ccc; font-size:20px; border-bottom:3px solid #ccc; cursor: pointer;}
#filters li span.active {border-bottom:3px solid #e50000; color:#e50000;}
 

 
#portfoliolist .portfolio {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden;}

.portfolio-wrapper {overflow:hidden; position: relative !important; background: #e8e8e8; line-height:0; cursor:pointer;}
.portfolio img {max-width:100%; 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:100%; bottom:-100%;  -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:#000; opacity:0.4; width: 100%; height:100%; position: absolute; top:0; left:0; text-align:center;}
.portfolio .label-text {position: relative; z-index:500; padding-top:4vw; text-align:center;}
.portfolio .text-title{color:#fff; font-size:26px; font-weight:600; line-height:130%; padding:0 3%;}
.portfolio .text-category {display:block; text-align:center; color:#fff; font-size:14px; line-height:130%; padding:15px 25px 0;}
.portfolio:hover .label {bottom:0;}

/*.portfolio:hover img {top:-30px; hover였을때 이미지 효과}  */

	



/* #Tablet (Portrait) */
@media only screen and (min-width: 851px) and (max-width: 1250px) {
	.container {width: 768px;}

	#portfoliolist .portfolio {width:31%; margin:1%;}
	.portfolio .label-text {padding-top:5.5vw;}
	.portfolio .text-title{font-size:2.3vw; font-weight:600; padding:0 3%;}
}


/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media (max-width: 850px){
	.container {width: 95%;}
	
	#portfoliolist .portfolio {width:48%; margin:1%;}
	
	.portfolio .label-text {padding-top:9vw;}
	.portfolio .text-title{font-size:4.2vw; font-weight:600;}

	#ads {display:none;}
}


/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media (max-width: 580px){
	.container {width: 70%;}

	.portfolio .label-text {padding-top:8vw;}
	.portfolio .text-title{font-size:4.4vw; font-weight:600;}
	.portfolio .text-category {font-size:12px;padding:10px 20px 0;}	

	#ads {display:none;}
}


/* #Clearing */


/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.row:after,
.clearfix:after {clear: both;}
.row,
.clearfix {zoom: 1; }
.clear {clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}



@media (max-width: 1100px){
	#filters {margin:40px 0; padding:0; list-style:none;}	
	#filters li span {padding:8px 18px; font-size:18px;}
}



@media (max-width: 850px){
	#filters {margin:30px 0; padding:0; list-style:none;}
	#filters li span	 {padding:8px 12px; font-size:16px; border-bottom:2px solid #ccc;}	
	#filters li span.active {border-bottom:2px solid #e50000;}
}