@charset "utf-8";
/* CSS Document */
.masonryn{width:1264px; margin:0 auto;}
.masonry .projectitem {
	width: 385px
}
.masonry {
	background-color:#f0f0f0;

	width:100%;
	margin:0 auto;
}

#projectlist .projectitem {
	width: 100%;
	height: auto;
	margin-right: 1%;
	margin-bottom: 1%;
	float: left;
	position: relative;
	background: #fff
}
#indexPage #projectlist .projectitem {
	margin: 0
}
#indexPage #mproject .bx-wrapper .bx-pager {
	bottom: -40px
}
#indexPage #mproject .bx-wrapper .bx-controls-direction {
	display: none
}
#indexPage #mproject a.more {
	margin-top: 80px
}
#projectlist .projectitem a {
	display: block;
	overflow: hidden
}
#projectlist .projectitem a img {
	float: none;
	width: 100%;
	height: auto;
	transition: all 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;

	
    filter: gray;
}
#projectlist .projectitem a:hover img {
		 -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    
    filter: grayscale(0%);
	
    filter: gray;
	transform: scale(1.2, 1.2)
}
#projectlist .projectitem a .project_info {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	position: absolute;
	left: 0;
	top: 0;
	transition: all ease-out .3s;
}
#projectlist .projectitem a:hover .project_info {
	background: rgba(0,0,0,.7)
}
#projectlist .projectitem a .project_info p {
	text-align: center;
	color: #fff;
	padding: 0 20px
}
#projectlist .projectitem a .project_info div {
	position: relative;
	top: 50%;
	margin-top: -15px
}
#projectlist .projectitem a .project_info p.title {
	margin-top: 10px;
	color: rgba(0,0,0,0);
	font-size: 16px;
	transition: all ease-out .3s;
}
#projectlist .projectitem a:hover .project_info p.title {
	margin-top: 0px;
	color: #fff;
	font-size: 16px
}
#projectlist .projectitem a .project_info p.subtitle {
	margin-top: 16px;
	color: rgba(0,0,0,0);
	font-size: 12px;
	transition: all ease-out .3s;
}
#projectlist .projectitem a:hover .project_info p.subtitle {
	margin-top: 0px;
	color: #b7b7b7;
}


.article {
	display: block;
	margin: 0 0 30px 0;
	background: white;
	border-radius: 3px;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
	transition: all 220ms;
}
.article:hover {
	box-shadow: 0 80px 25px 0 rgba(0,0,0,.15);
	transform: translateY(-5px);
	transition: all 320ms;
}
.article > img {
	display: block;
	width: 100%;
	margin: 0 0 24px 0;
}
.article h2 {
	text-align: center;
	font-size: 14px;
	text-transform: uppercase;
	margin: 0 0 12px 0;
}
.wall {
	display: block;
	position: relative;
}
.wall-column {
	display: block;
	position: relative;
	/*width: 33.333333%;*/
	width: 25%;
	float: left;
	padding: 0 12px;
	box-sizing: border-box;
}

#projectlist .projectitem {
	animation-name: slideInUp;
}

.content .header{
padding-top:30px}
.content .header p {
	text-align: center;
}
.content .header p.title {
	color: #444;
	font-size: 26px
}
.content .header p.subtitle {
	color: #c1c1c1;
	font-size: 16px
}

#projectib .projectitem a .project_info p.title { color: #A5A5A5; }

#projectib .projectitem a .project_info p.subtitle { color: #505050; }
#projectlist .projectitem .project_info p.title { color: #4E4E4E; padding: 10px 0px; }

#projectmore { color: #FDD947; height: 100px; line-height: 100px; background: #262626; font-family: "HELVETICANEUELTPRO-THEX", "微软雅黑"; font-size: 18px; }

#projectmore:hover { color: #FDD947; height: 100px; line-height: 100px; background: #262626; font-size: 18px; }


#projectlist .projectitem a .project_info::after { width: 0%; height: 80px; position: absolute; content: ""; top: 100%; left: 0; transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; background-color: #FDD947; z-index: -1; 

}

#projectlist .projectitem a:hover .project_info::after { width: 100%; }

#projectlist .projectitem a .project_info p.title { margin: 0 40px; color: #999; padding: 18px 0px 5px; }

#projectlist .projectitem a .project_info div { background-color:#FFFFFF; position: absolute; height: 80px; width: 100%; bottom: -80px; margin-top: 0; top: auto;  }

#projectlist .projectitem a:hover .project_info div { background-color: transparent; background-color:#FFFFFF}

#projectlist .projectitem a:hover .project_info p.title { color: #545454; }

#projectlist .projectitem a .project_info p.subtitle { margin-top: 0; color:#ADADAD; }

#projectlist .projectitem a:hover .project_info p.subtitle { color: #7B7B7B; }

#projectlist .projectitem { margin-bottom: 100px; }

#projectlist .projectitem a:hover .project_info { background: transparent; }


#category { text-align:center; margin:50px 0px}
#category a { padding: 8px 30px; margin-right: 10px; transition: all 0.3s ease-out 0s; color: #666; border: 1px solid #999; margin-top:50px; height:32px; }

#category a.active, #category a:hover { background: #ba292e; color: #fff; border: 1px solid #ba292e; }