#filter {
	background: #f4f4f4;
	display: block;
	height: 45px;
	margin-bottom: 50px;
	position: relative;
	width: 100%;
	text-align:center;
	color:#333;
}




#filter a{	
	display: inline-block;
	font-size:12px;
	height: 45px;
	line-height: 45px;
	width:12.5%;
	color: #9f9f9f;
	font-family: "Microsoft YaHei","微软雅黑",Arial, Helvetica, sans-serif;
}

#filter a:hover{
	text-decoration:none;
	background:#181818;
	color:#ffffff;
	font-family: "Microsoft YaHei","微软雅黑",Arial, Helvetica, sans-serif;
}

#filter a.active{
	background:#ffffff;
	width:12.5%;
	color:#181818;
}


.slider {margin-right:20px}



#projects li{

	list-style: none outside none;
	margin-right:0;
	position: relative;
	width: 20%;
	margin-bottom:0%;	
}
.listbg{ background:#f7f8fa; width:100%;height:4929px;}
#projects{
	margin:0 auto 104px;
	display:block;
	width:1480px;
	height:4825px;
	/*width:100%;
	max-width: 1200px;*/
}
#projects .topz{height:4975px;top:-150px;z-index:2; position:relative;}
#projects .imgshow{ position:absolute;}
#projects .img1{top:0; left:0;}
#projects .img2{top:0; left:592px;}
#projects .img3{top:0; right:0;}
#projects .img4{top:199px; left:592px;}
#projects .img5{top:199px; right:0;}
#projects .img6{top:398px; left:0;}
#projects .img7{top:398px; left:296px;}
#projects .img8{top:597px; right:0;}
#projects .img9{top:597px; left:0;}
#projects .img10{top:796px; left:296px;}
#projects .img11{top:796px; left:592px;}
#projects .img12{top:796px; right:296px;}
#projects .img13{top:796px; right:0;}
#projects .img14{top:995px; left:0;}
#projects .img15{top:995px; left:592px;}
#projects .img16{top:995px; right:0;}
#projects .img17{top:1393px; left:0;}
#projects .img18{top:1194px; left:592px;}
#projects .img19{top:1393px; right:0;}
#projects .img20{top:1592px; left:0;}
#projects .img21{top:1592px; left:296px}
#projects .img22{top:1592px; left:592px}
#projects .img23{top:1592px; right:0;}
#projects .img24{top:1791px; left:0;}
#projects .img25{top:1791px; left:296px;}
#projects .img26{top:1791px; right:0;}
#projects .img27{top:1990px; left:0;}
#projects .img28{top:1990px; right:296px;}
#projects .img29{top:1990px; right:0;}
#projects .img30{top:2189px; left:296px;}
#projects .img31{top:2189px; left:592px;}
#projects .img32{top:2189px; right:0;}
#projects .img33{top:2388px; left:0;}
#projects .img34{top:2388px; left:296px;}
#projects .img35{top:2587px; left:0;}
#projects .img36{top:2587px; left:592px;}
#projects .img37{top:2587px; right:296px;}
#projects .img38{top:2587px; right:0;}
#projects .img39{top:2786px; left:0;}
#projects .img40{top:2786px; right:0;}
#projects .img41{top:2985px; left:592px;}
#projects .img42{top:2985px; right:0;}
#projects .img43{top:3184px; left:0;}
#projects .img44{top:3184px; left:592px;}
#projects .img45{top:3184px; left:296px;}
#projects .img46{top:3383px; left:0;}
#projects .img47{top:3383px; left:592px;}
#projects .img48{top:3383px; right:0;}
#projects .img49{top:3582px; left:296px;}
#projects .img50{top:3582px; left:592px;}
#projects .img51{top:3582px; right:0;}
#projects .img52{top:3781px; left:0;}
#projects .img53{top:3980px; left:592px;}
#projects .img54{top:3980px; right:296px;}
#projects .img55{top:3781px; right:0;}
#projects .img56{top:4179px; left:0;}
#projects .img57{top:4179px; left:296px;}
#projects .img58{top:4179px; right:0;}
#projects .img59{top:4378px; left:0;}
#projects .img60{top:4378px; right:296px;}
#projects .img61{top:4378px; right:0;}
#projects .img62{top:4577px; left:0;}
#projects .img63{top:4577px; left:592px;}
#projects .img64{top:4577px; right:296px;}
#projects .img65{top:4776px; right:0;}







#projects ul.hidden{
	display:none;
}


#projects li.bigthumb {
	height: 398px;
	width: 40%;
	
}
#projects li.bigthumb img {
	height: 398px;
	width: 592px;
	
}
#projects li.bigthumb-h {
	height: 199px;
	width: 40%;
	
}
#projects li.bigthumb-h img {
	height: 199px;
	width: 592px;
	
}
#projects li.bigthumb-v {
	height: 398px;
	width: 20%;
	
}
#projects li.bigthumb-v img {
	height: 398px;
	width: 296px;
	
}
#projects li.bigthumb-s {
	height: 199px;
	width: 20%;
	
}
#projects li.bigthumb-s img {
	height: 199px;
	width: 296px;
	
}

    


    /*  Project Item Overlay  --------------------------------*/
	
		
   .view {
	   width: 100%;
	   height: 100%;   
	   float: left;   
	   overflow: hidden;
	   position: relative;
	   text-align: center;   
	   cursor: pointer;
	   /*margin-right:20px;
	   margin-top:20px;*/
	}
	
	#projects3 .view {
		width: 100%;
	   height: 100%;
		margin:0;
		}
		
	#projects2 .view {
		width: 100%;
	   height: 100%;
		margin:0;
		}			
	
	.view.last {
	   margin-right:0px;
	}
	
	.view .mask, .view .content {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	}

	.view .mask h1, .mask h3   {	
 		height:30px;
 		font-size: 18px;
		top:20px;
		left:20px;
		color:#fff;
		position:absolute;
		font-family: "dinpro-regularregular","Microsoft YaHei","微软雅黑",Arial, Helvetica, sans-serif;
		background:url(../images/line1.png) left bottom no-repeat;
		padding-bottom:16px;
	}
	
	.view h3 {
		height:20px;
 		font-size: 12px;
		top:20px;
		left:20px;
		color:#fff;
		text-transform: uppercase;
		position:absolute;
		font-family: "dinpro-bold","Microsoft YaHei","微软雅黑",Arial, Helvetica, sans-serif;
		background:url(../images/line1.png) left bottom no-repeat;
		padding-bottom:18px;

	}
	
	
	.view h4 {
		height:20px;
		width: 100%;
 		font-size: 12px;
		top:20px;
		color:#fff;
		text-transform: uppercase;
		position:absolute;
		font-family: "dinpro-regularregular","Microsoft YaHei","微软雅黑",Arial, Helvetica, sans-serif;
		padding-top:185px;
		text-align: center;
	}
	
	.view p {
		height:170px;
		top:66px;
		left:20px;
		color:#fff;
		position:absolute;
		text-align:left;
		font-family: "dinpro-regularregular","Microsoft YaHei","微软雅黑",Arial, Helvetica, sans-serif;

	}

	
	
	.view .mask p  {	
		height:170px;
		top:61px;
		left:20px;
		color:#fff;
		position:absolute;
		text-align:left;
		font-family: "dinpro-regularregular","Microsoft YaHei","微软雅黑",Arial, Helvetica, sans-serif;
	}

	.view img {
	   display: block;
	   position: relative;
	   margin:0 auto;
	   height: 200px;
	   width: 300px;	   
	}
	
	.info {
	   display: inline-block;
	   text-decoration: none;
	   text-indent:-9999px;
	   width:20px;
	   height:20px;
	   position:absolute;
	   bottom:20px;
	   left:20px;
	   float:left;
	}
	
	
	.overlay .mask {
	   opacity: 0;
	   overflow:visible;
	   background: #181818;	 
	   -webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	   -o-transition: all 0.4s ease-in-out;
	   -ms-transition: all 0.4s ease-in-out;
	   transition: all 0.4s ease-in-out;
	   
	}
	
	.overlay:hover .mask {
	   opacity: 0.95;
	   background: #181818;
	}
	.overlay:hover a.info {
		opacity:5;
		-moz-transition-delay: 0.3s;
		-webkit-transition-delay: 0.3s;
		-o-transition-delay: 0.3s;
		-ms-transition-delay: 0.3s;
		transition-delay: 0.3s;
	}


 

    /*  Project Details  --------------------------------*/

    .project-image{
		display: block;
    	position: relative;
	}
	
	.project-image .image {
		width:100%;
		opacity:0.9;
	}
	
	.image:hover {
		width:100%;
		opacity:1;
	}