body {
	font-size:16px;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,textarea,input {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
	box-sizing:border-box;
	font-family:proxima nova
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block
}
body {
	line-height:1
}
ol,ul {
	list-style:none
}
blockquote,q {
	quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
	content:'';
	content:none
}
input {
	font-family:proxima nova
}
table {
	border-collapse:collapse;
	border-spacing:0
}
a {
	text-decoration:none;
	font-size:16px;
	color:#333;
	-webkit-tap-highlight-color:transparent;
	-webkit-user-select:none;
	-moz-user-focus:none;
	-moz-user-select:none
}
div:active,section:active {
	-webkit-tap-highlight-color:transparent;
	-o-tap-highlight-color:transparent;
	-moz-tap-highlight-color:transparent
}
.clearfix {
	zoom:1
}
.clearfix:after {
	display:block;
	clear:both;
	content:"";
	visibility:hidden;
	height:0
}
h1 {
	color:#000;
	text-align:center;
	margin:30px auto
}
h3 {
	text-align:center;
	color:#666
}
.procontainer {
	width:1200px;
	margin:0px auto 50px auto;
	display:flex;
	flex-flow:row wrap;
	align-items:center;
	justify-content:space-around
}
.procontainer .boxItem {
	width:285px;
	height:285px;
	position:relative;
	margin:0 15px 15px 0
}
.procontainer .boxItem>a {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	z-index:10
}
.procontainer .boxItem>a:first-of-type:hover,.procontainer .boxItem>a:nth-child(2):hover,.procontainer .boxItem>a:nth-child(3):hover,.procontainer .boxItem>a:last-of-type:hover {
	z-index:11;
	-moz-clip-path:none;
	-webkit-clip-path:none;
	clip-path:none;
	clip:auto
}
.procontainer .boxItem>a:first-of-type {
	-moz-clip-path:polygon(0 0,100% 0,50% 50%);
	-webkit-clip-path:polygon(0 0,100% 0,50% 50%);
	clip-path:polygon(0 0,100% 0,50% 50%);
	clip:rect(0px,285px,120px,0px)
}
.procontainer .boxItem>a:first-of-type:hover~.itemContentBox>img {
	-moz-transform:rotateX(-90deg);
	-webkit-transform:rotateX(-90deg);
	transform:rotateX(-90deg)
}
.procontainer .boxItem>a:first-of-type:hover~.itemContentBox .itemContent:first-of-type {
	-moz-transform:rotateX(0);
	-webkit-transform:rotateX(0);
	transform:rotateX(0);
	opacity:1
}
.procontainer .boxItem>a:nth-child(2) {
	-moz-clip-path:polygon(100% 0,50% 50%,100% 100%);
	-webkit-clip-path:polygon(100% 0,50% 50%,100% 100%);
	clip-path:polygon(100% 0,50% 50%,100% 100%);
	clip:rect(0px,285px,285px,120px)
}
.procontainer .boxItem>a:nth-child(2):hover~.itemContentBox>img {
	-moz-transform:rotateY(-90deg);
	-webkit-transform:rotateY(-90deg);
	transform:rotateY(-90deg)
}
.procontainer .boxItem>a:nth-child(2):hover~.itemContentBox .itemContent:nth-of-type(2) {
	-moz-transform:rotateY(0);
	-webkit-transform:rotateY(0);
	transform:rotateY(0);
	opacity:1
}
.procontainer .boxItem>a:nth-child(3) {
	-moz-clip-path:polygon(0 100%,50% 50%,100% 100%);
	-webkit-clip-path:polygon(0 100%,50% 50%,100% 100%);
	clip-path:polygon(0 100%,50% 50%,100% 100%);
	clip:rect(120px,285px,285px,0px)
}
.procontainer .boxItem>a:nth-child(3):hover~.itemContentBox>img {
	-moz-transform:rotateX(90deg);
	-webkit-transform:rotateX(90deg);
	transform:rotateX(90deg)
}
.procontainer .boxItem>a:nth-child(3):hover~.itemContentBox .itemContent:nth-of-type(3) {
	-moz-transform:rotateX(0);
	-webkit-transform:rotateX(0);
	transform:rotateX(0);
	opacity:1
}
.procontainer .boxItem>a:last-of-type {
	-moz-clip-path:polygon(0 0,50% 50%,0 100%);
	-webkit-clip-path:polygon(0 0,50% 50%,0 100%);
	clip-path:polygon(0 0,50% 50%,0 100%);
	clip:rect(0px,30px,285px,0px)
}
.procontainer .boxItem>a:last-of-type:hover~.itemContentBox>img {
	-moz-transform:rotateY(90deg);
	-webkit-transform:rotateY(90deg);
	transform:rotateY(90deg)
}
.procontainer .boxItem>a:last-of-type:hover~.itemContentBox .itemContent:last-of-type {
	-moz-transform:rotateY(0);
	-webkit-transform:rotateY(0);
	transform:rotateY(0);
	opacity:1
}
.procontainer .boxItem .itemContentBox {
	width:100%;
	height:100%;
	position:absolute
}
.procontainer .boxItem .itemContentBox>img {
	width:100%;
	height:100%;
	position:absolute;
	z-index:2;
	transition:all .3s linear;
	transform-origin:center center -75px
}
.procontainer .boxItem .itemContentBox .itemContent {
	position:absolute;
	width:100%;
	height:100%;
	background-color:#928f8f;
	text-align:center;
	transform-style:preserve-3d;
	transform-origin:center center -75px;
	color:#fff;
	transition:all .3s linear;
	display:flex;
	flex-flow:column;
	align-items:center;
	opacity:.2
}
.procontainer .boxItem .itemContentBox .itemContent>span {
	transform:translateY(60px)
}
.procontainer .boxItem .itemContentBox .itemContent:first-of-type {
	transform:rotateX(90deg)
}
.procontainer .boxItem .itemContentBox .itemContent:nth-of-type(2) {
	transform:rotateY(90deg)
}
.procontainer .boxItem .itemContentBox .itemContent:nth-of-type(3) {
	transform:rotateX(-90deg)
}
.procontainer .boxItem .itemContentBox .itemContent:last-of-type {
	transform:rotateY(-90deg)
}





.procontainer .boxItem>a:first-of-type:hover~.jinghua>img {
	-moz-transform:rotateX(-90deg);
	-webkit-transform:rotateX(-90deg);
	transform:rotateX(-90deg)
}
.procontainer .boxItem>a:first-of-type:hover~.jinghua .itemContent:first-of-type {
	-moz-transform:rotateX(0);
	-webkit-transform:rotateX(0);
	transform:rotateX(0);
	opacity:1
}
.procontainer .boxItem>a:nth-child(2) {
	-moz-clip-path:polygon(100% 0,50% 50%,100% 100%);
	-webkit-clip-path:polygon(100% 0,50% 50%,100% 100%);
	clip-path:polygon(100% 0,50% 50%,100% 100%);
	clip:rect(0px,586px,586px,120px)
}
.procontainer .boxItem>a:nth-child(2):hover~.jinghua>img {
	-moz-transform:rotateY(-90deg);
	-webkit-transform:rotateY(-90deg);
	transform:rotateY(-90deg)
}
.procontainer .boxItem>a:nth-child(2):hover~.jinghua .itemContent:nth-of-type(2) {
	-moz-transform:rotateY(0);
	-webkit-transform:rotateY(0);
	transform:rotateY(0);
	opacity:1
}
.procontainer .boxItem>a:nth-child(3) {
	-moz-clip-path:polygon(0 100%,50% 50%,100% 100%);
	-webkit-clip-path:polygon(0 100%,50% 50%,100% 100%);
	clip-path:polygon(0 100%,50% 50%,100% 100%);
	clip:rect(120px,586px,586px,0px)
}
.procontainer .boxItem>a:nth-child(3):hover~.jinghua>img {
	-moz-transform:rotateX(90deg);
	-webkit-transform:rotateX(90deg);
	transform:rotateX(90deg)
}
.procontainer .boxItem>a:nth-child(3):hover~.jinghua .itemContent:nth-of-type(3) {
	-moz-transform:rotateX(0);
	-webkit-transform:rotateX(0);
	transform:rotateX(0);
	opacity:1
}
.procontainer .boxItem>a:last-of-type {
	-moz-clip-path:polygon(0 0,50% 50%,0 100%);
	-webkit-clip-path:polygon(0 0,50% 50%,0 100%);
	clip-path:polygon(0 0,50% 50%,0 100%);
	clip:rect(0px,30px,586px,0px)
}
.procontainer .boxItem>a:last-of-type:hover~.jinghua>img {
	-moz-transform:rotateY(90deg);
	-webkit-transform:rotateY(90deg);
	transform:rotateY(90deg)
}
.procontainer .boxItem>a:last-of-type:hover~.jinghua .itemContent:last-of-type {
	-moz-transform:rotateY(0);
	-webkit-transform:rotateY(0);
	transform:rotateY(0);
	opacity:1
}
.procontainer .boxItem .jinghua {
	width:100%;
	height:100%;
	position:absolute
}
.procontainer .boxItem .jinghua>img {
	width:100%;
	height:100%;
	position:absolute;
	z-index:2;
	transition:all .3s linear;
	transform-origin:center center -75px
}
.procontainer .boxItem .jinghua .itemContent {
	position:absolute;
	width:100%;
	height:100%;
	background-color:#928f8f;
	text-align:center;
	transform-style:preserve-3d;
	transform-origin:center center -75px;
	color:#fff;
	transition:all .3s linear;
	display:flex;
	flex-flow:column;
	align-items:center;
	opacity:.2
}
.procontainer .boxItem .jinghua .itemContent>span {
	transform:translateY(60px)
}
.procontainer .boxItem .jinghua .itemContent:first-of-type {
	transform:rotateX(90deg)
}
.procontainer .boxItem .jinghua .itemContent:nth-of-type(2) {
	transform:rotateY(90deg)
}
.procontainer .boxItem .jinghua .itemContent:nth-of-type(3) {
	transform:rotateX(-90deg)
}
.procontainer .boxItem .jinghua .itemContent:last-of-type {
	transform:rotateY(-90deg)
}



/*hufu*/
.procontainer .hufu {
	width:285px;
	height:586px;
	position:relative;
	margin:0 15px 15px 0
}
.procontainer .hufu>a {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	z-index:10
}
.procontainer .hufu>a:first-of-type:hover,.procontainer .hufu>a:nth-child(2):hover,.procontainer .hufu>a:nth-child(3):hover,.procontainer .hufu>a:last-of-type:hover {
	z-index:11;
	-moz-clip-path:none;
	-webkit-clip-path:none;
	clip-path:none;
	clip:auto
}
.procontainer .hufu>a:first-of-type {
	-moz-clip-path:polygon(0 0,100% 0,50% 50%);
	-webkit-clip-path:polygon(0 0,100% 0,50% 50%);
	clip-path:polygon(0 0,100% 0,50% 50%);
	clip:rect(0px,586px,120px,0px)
}
.procontainer .hufu>a:first-of-type:hover~.itemContentBox>img {
	-moz-transform:rotateX(-90deg);
	-webkit-transform:rotateX(-90deg);
	transform:rotateX(-90deg)
}
.procontainer .hufu>a:first-of-type:hover~.itemContentBox .itemContent:first-of-type {
	-moz-transform:rotateX(0);
	-webkit-transform:rotateX(0);
	transform:rotateX(0);
	opacity:1
}
.procontainer .hufu>a:nth-child(2) {
	-moz-clip-path:polygon(100% 0,50% 50%,100% 100%);
	-webkit-clip-path:polygon(100% 0,50% 50%,100% 100%);
	clip-path:polygon(100% 0,50% 50%,100% 100%);
	clip:rect(0px,586px,285px,120px)
}
.procontainer .hufu>a:nth-child(2):hover~.itemContentBox>img {
	-moz-transform:rotateY(-90deg);
	-webkit-transform:rotateY(-90deg);
	transform:rotateY(-90deg)
}
.procontainer .hufu>a:nth-child(2):hover~.itemContentBox .itemContent:nth-of-type(2) {
	-moz-transform:rotateY(0);
	-webkit-transform:rotateY(0);
	transform:rotateY(0);
	opacity:1
}
.procontainer .hufu>a:nth-child(3) {
	-moz-clip-path:polygon(0 100%,50% 50%,100% 100%);
	-webkit-clip-path:polygon(0 100%,50% 50%,100% 100%);
	clip-path:polygon(0 100%,50% 50%,100% 100%);
	clip:rect(120px,586px,285px,0px)
}
.procontainer .hufu>a:nth-child(3):hover~.itemContentBox>img {
	-moz-transform:rotateX(90deg);
	-webkit-transform:rotateX(90deg);
	transform:rotateX(90deg)
}
.procontainer .hufu>a:nth-child(3):hover~.itemContentBox .itemContent:nth-of-type(3) {
	-moz-transform:rotateX(0);
	-webkit-transform:rotateX(0);
	transform:rotateX(0);
	opacity:1
}
.procontainer .hufu>a:last-of-type {
	-moz-clip-path:polygon(0 0,50% 50%,0 100%);
	-webkit-clip-path:polygon(0 0,50% 50%,0 100%);
	clip-path:polygon(0 0,50% 50%,0 100%);
	clip:rect(0px,30px,586px,0px)
}
.procontainer .hufu>a:last-of-type:hover~.itemContentBox>img {
	-moz-transform:rotateY(90deg);
	-webkit-transform:rotateY(90deg);
	transform:rotateY(90deg)
}
.procontainer .hufu>a:last-of-type:hover~.itemContentBox .itemContent:last-of-type {
	-moz-transform:rotateY(0);
	-webkit-transform:rotateY(0);
	transform:rotateY(0);
	opacity:1
}
.procontainer .hufu .itemContentBox {
	width:100%;
	height:100%;
	position:absolute
}
.procontainer .hufu .itemContentBox>img {
	width:100%;
	height:100%;
	position:absolute;
	z-index:2;
	transition:all .3s linear;
	transform-origin:center center -75px
}
.procontainer .hufu .itemContentBox .itemContent {
	position:absolute;
	width:100%;
	height:100%;
	background-color:#928f8f;
	text-align:center;
	transform-style:preserve-3d;
	transform-origin:center center -75px;
	color:#fff;
	transition:all .3s linear;
	display:flex;
	flex-flow:column;
	align-items:center;
	opacity:.2
}
.procontainer .hufu .itemContentBox .itemContent>span {
	transform:translateY(60px)
}
.procontainer .hufu .itemContentBox .itemContent:first-of-type {
	transform:rotateX(90deg)
}
.procontainer .hufu .itemContentBox .itemContent:nth-of-type(2) {
	transform:rotateY(90deg)
}
.procontainer .hufu .itemContentBox .itemContent:nth-of-type(3) {
	transform:rotateX(-90deg)
}
.procontainer .hufu .itemContentBox .itemContent:last-of-type {
	transform:rotateY(-90deg)
}





.procontainer .hufu>a:first-of-type:hover~.jinghua>img {
	-moz-transform:rotateX(-90deg);
	-webkit-transform:rotateX(-90deg);
	transform:rotateX(-90deg)
}
.procontainer .hufu>a:first-of-type:hover~.jinghua .itemContent:first-of-type {
	-moz-transform:rotateX(0);
	-webkit-transform:rotateX(0);
	transform:rotateX(0);
	opacity:1
}
.procontainer .hufu>a:nth-child(2) {
	-moz-clip-path:polygon(100% 0,50% 50%,100% 100%);
	-webkit-clip-path:polygon(100% 0,50% 50%,100% 100%);
	clip-path:polygon(100% 0,50% 50%,100% 100%);
	clip:rect(0px,586px,586px,120px)
}
.procontainer .hufu>a:nth-child(2):hover~.jinghua>img {
	-moz-transform:rotateY(-90deg);
	-webkit-transform:rotateY(-90deg);
	transform:rotateY(-90deg)
}
.procontainer .hufu>a:nth-child(2):hover~.jinghua .itemContent:nth-of-type(2) {
	-moz-transform:rotateY(0);
	-webkit-transform:rotateY(0);
	transform:rotateY(0);
	opacity:1
}
.procontainer .hufu>a:nth-child(3) {
	-moz-clip-path:polygon(0 100%,50% 50%,100% 100%);
	-webkit-clip-path:polygon(0 100%,50% 50%,100% 100%);
	clip-path:polygon(0 100%,50% 50%,100% 100%);
	clip:rect(120px,586px,586px,0px)
}
.procontainer .hufu>a:nth-child(3):hover~.jinghua>img {
	-moz-transform:rotateX(90deg);
	-webkit-transform:rotateX(90deg);
	transform:rotateX(90deg)
}
.procontainer .hufu>a:nth-child(3):hover~.jinghua .itemContent:nth-of-type(3) {
	-moz-transform:rotateX(0);
	-webkit-transform:rotateX(0);
	transform:rotateX(0);
	opacity:1
}
.procontainer .hufu>a:last-of-type {
	-moz-clip-path:polygon(0 0,50% 50%,0 100%);
	-webkit-clip-path:polygon(0 0,50% 50%,0 100%);
	clip-path:polygon(0 0,50% 50%,0 100%);
	clip:rect(0px,30px,586px,0px)
}
.procontainer .hufu>a:last-of-type:hover~.jinghua>img {
	-moz-transform:rotateY(90deg);
	-webkit-transform:rotateY(90deg);
	transform:rotateY(90deg)
}
.procontainer .hufu>a:last-of-type:hover~.jinghua .itemContent:last-of-type {
	-moz-transform:rotateY(0);
	-webkit-transform:rotateY(0);
	transform:rotateY(0);
	opacity:1
}
.procontainer .hufu .jinghua {
	width:100%;
	height:100%;
	position:absolute
}
.procontainer .hufu .jinghua>img {
	width:100%;
	height:100%;
	position:absolute;
	z-index:2;
	transition:all .3s linear;
	transform-origin:center center -75px
}
.procontainer .hufu .jinghua .itemContent {
	position:absolute;
	width:100%;
	height:100%;
	background-color:#928f8f;
	text-align:center;
	transform-style:preserve-3d;
	transform-origin:center center -75px;
	color:#fff;
	transition:all .3s linear;
	display:flex;
	flex-flow:column;
	align-items:center;
	opacity:.2
}
.procontainer .hufu .jinghua .itemContent>span {
	transform:translateY(60px)
}
.procontainer .hufu .jinghua .itemContent:first-of-type {
	transform:rotateX(90deg)
}
.procontainer .hufu .jinghua .itemContent:nth-of-type(2) {
	transform:rotateY(90deg)
}
.procontainer .hufu .jinghua .itemContent:nth-of-type(3) {
	transform:rotateX(-90deg)
}
.procontainer .hufu .jinghua .itemContent:last-of-type {
	transform:rotateY(-90deg)
}





/*logoimg*/
.procontainer .logoimg {
	width:585px;
	height:285px;
	position:relative;
	margin:0 15px 15px 0
}
.procontainer .logoimg>a {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	z-index:10
}
.procontainer .logoimg>a:first-of-type:hover,.procontainer .logoimg>a:nth-child(2):hover,.procontainer .logoimg>a:nth-child(3):hover,.procontainer .logoimg>a:last-of-type:hover {
	z-index:11;
	-moz-clip-path:none;
	-webkit-clip-path:none;
	clip-path:none;
	clip:auto
}
.procontainer .logoimg>a:first-of-type {
	-moz-clip-path:polygon(0 0,100% 0,50% 50%);
	-webkit-clip-path:polygon(0 0,100% 0,50% 50%);
	clip-path:polygon(0 0,100% 0,50% 50%);
	clip:rect(0px,585px,120px,0px)
}
.procontainer .logoimg>a:first-of-type:hover~.itemContentBox>img {
	-moz-transform:rotateX(-90deg);
	-webkit-transform:rotateX(-90deg);
	transform:rotateX(-90deg)
}
.procontainer .logoimg>a:first-of-type:hover~.itemContentBox .itemContent:first-of-type {
	-moz-transform:rotateX(0);
	-webkit-transform:rotateX(0);
	transform:rotateX(0);
	opacity:1
}
.procontainer .logoimg>a:nth-child(2) {
	-moz-clip-path:polygon(100% 0,50% 50%,100% 100%);
	-webkit-clip-path:polygon(100% 0,50% 50%,100% 100%);
	clip-path:polygon(100% 0,50% 50%,100% 100%);
	clip:rect(0px,585px,285px,120px)
}
.procontainer .logoimg>a:nth-child(2):hover~.itemContentBox>img {
	-moz-transform:rotateY(-90deg);
	-webkit-transform:rotateY(-90deg);
	transform:rotateY(-90deg)
}
.procontainer .logoimg>a:nth-child(2):hover~.itemContentBox .itemContent:nth-of-type(2) {
	-moz-transform:rotateY(0);
	-webkit-transform:rotateY(0);
	transform:rotateY(0);
	opacity:1
}
.procontainer .logoimg>a:nth-child(3) {
	-moz-clip-path:polygon(0 100%,50% 50%,100% 100%);
	-webkit-clip-path:polygon(0 100%,50% 50%,100% 100%);
	clip-path:polygon(0 100%,50% 50%,100% 100%);
	clip:rect(120px,585px,285px,0px)
}
.procontainer .logoimg>a:nth-child(3):hover~.itemContentBox>img {
	-moz-transform:rotateX(90deg);
	-webkit-transform:rotateX(90deg);
	transform:rotateX(90deg)
}
.procontainer .logoimg>a:nth-child(3):hover~.itemContentBox .itemContent:nth-of-type(3) {
	-moz-transform:rotateX(0);
	-webkit-transform:rotateX(0);
	transform:rotateX(0);
	opacity:1
}
.procontainer .logoimg>a:last-of-type {
	-moz-clip-path:polygon(0 0,50% 50%,0 100%);
	-webkit-clip-path:polygon(0 0,50% 50%,0 100%);
	clip-path:polygon(0 0,50% 50%,0 100%);
	clip:rect(0px,30px,585px,0px)
}
.procontainer .logoimg>a:last-of-type:hover~.itemContentBox>img {
	-moz-transform:rotateY(90deg);
	-webkit-transform:rotateY(90deg);
	transform:rotateY(90deg)
}
.procontainer .logoimg>a:last-of-type:hover~.itemContentBox .itemContent:last-of-type {
	-moz-transform:rotateY(0);
	-webkit-transform:rotateY(0);
	transform:rotateY(0);
	opacity:1
}
.procontainer .logoimg .itemContentBox {
	width:100%;
	height:100%;
	position:absolute
}
.procontainer .logoimg .itemContentBox>img {
	width:100%;
	height:100%;
	position:absolute;
	z-index:2;
	transition:all .3s linear;
	transform-origin:center center -75px
}
.procontainer .logoimg .itemContentBox .itemContent {
	position:absolute;
	width:100%;
	height:100%;
	background-color:#928f8f;
	text-align:center;
	transform-style:preserve-3d;
	transform-origin:center center -75px;
	color:#fff;
	transition:all .3s linear;
	display:flex;
	flex-flow:column;
	align-items:center;
	opacity:.2
}
.procontainer .logoimg .itemContentBox .itemContent>span {
	transform:translateY(60px)
}
.procontainer .logoimg .itemContentBox .itemContent:first-of-type {
	transform:rotateX(90deg)
}
.procontainer .logoimg .itemContentBox .itemContent:nth-of-type(2) {
	transform:rotateY(90deg)
}
.procontainer .logoimg .itemContentBox .itemContent:nth-of-type(3) {
	transform:rotateX(-90deg)
}
.procontainer .logoimg .itemContentBox .itemContent:last-of-type {
	transform:rotateY(-90deg)
}