@charset "utf-8";

.container1{
	display: flex;
	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;	}
	.clearfix1 li ul li{
		width:90%
	}
/* filters */
#filters{
	display: flex;
	flex-direction: column;
	margin:1%;
	padding:0;
	list-style:none;}
#filters li{float:right;}
#filters li span{display:block;padding:0px 0px;text-decoration:none;color:white;cursor:pointer;}
/* #filters li span.active{background:#e95a44;color:#fff;} */
#portfoliolist .portfolio{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;width:auto;*width:22%;margin:1%;display:block;float:left;overflow:hidden;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);}
.portfolio-wrapper{
	width: 200px;
	height: 200px;
	overflow:hidden;
	position:relative!important;
	background:#666;
	cursor:pointer;}
.portfolio img{
	width:100%;
	height: 100%;
	object-fit: cover;
	position:relative;}
.portfolio .label{position:absolute;width:100%;height:50px;bottom:-25px;left:0;}
.portfolio .label-bg{background:#009483;width:100%;height:100%;position:absolute;top:0;left:0;}
.portfolio .label-text{color:#fff;position:relative;z-index:500;padding:5px 8px;font-size: 16px;}
.portfolio .text-category{display:block;font-size:16px;}





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


/*  #Mobile (Portrait) - Note:Design for a width of 320px */
@media only screen and (max-width:767px){
	.container1{
		width:95%;
	}
	
	#portfoliolist .portfolio{
		width:100%;
		margin:1%;
	}
}


/* #Mobile (Landscape) - Note:Design for a width of 480px */
@media only screen and (min-width:480px) and (max-width:767px){
	.container1{
		width:70%;
	}
}

/* #Clearing */

/* Self Clearing Goodness */
.container1:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;}
.clearfix1:before,.clearfix1:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.row:after,.clearfix:after{clear:both;}
.row,.clearfix1{zoom:1;}

.menu{
	width: 20%;
}
.chanpinjj{
	width: 80%;
}
.menu ul li {display:block;width:100%;padding-top:2px;margin-bottom:5px;background: #009483;list-style:none;overflow:visible;}
.menu ul li a {display:block;height:34px; width:85%;margin-top:0px;padding-top:20px;padding-left:35px;font-size:14px;color:#ffffff;outline:none;text-decoration: none;}
.menu ul li .active { background:url(images/on.png) top right no-repeat;}
/* .all{
background:none !important;
} */

.menu ul li .inactive {background:url(images/off.png) center right no-repeat;}
.menu ul li ul {display:none; margin-top:-4px;margin-bottom:20px;   }
.menu ul li ul li ul {margin-bottom:5px;}
.menu ul li ul li {
display:block;
background:#00c1ab;
font-size:12px;
list-style:circle;
color:#8f9d4c;
margin-bottom:0px;
margin-top:5px;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
margin-left:0px;
}
.menu ul li ul li a {background:none;font-size:12px;height:35px;color:#8f9d4c;padding-left:35px; }

/* html, body, ul, li { margin: 0; padding: 0px; line-height: 1.2em;} */
/* CONTENT */ 
#content {
	width:80%;
	padding:10px;
	/* border:solid 1px #dfdfdf; */
	background:#ffffff;
	font-size:11px;
	margin:0 auto;
	overflow:hidden;
	padding-bottom: 100px;
}
#content h1 {font-family:Arial, Helvetica, sans-serif;font-size:12px; color:#535353;}
#content img {padding:5px;background:#f7f7f7;border:solid 1px #464646;margin:2px;}


@media only screen and (max-width:1200px){
	.container1{
		flex-direction: column;
	}
	.menu {
		width: 100%;
	}
	.chanpinjj {
		width: 100%;
	}
	#content {
		width: 100%;
/* 		padding: 0; */
	}
	.portfolio-wrapper {
		width: 150px;
		height: 150px;
	}
	#portfoliolist .portfolio {
        width: auto;
    }
}