/* -------------
   * commom *
* ------------- */
@charset "UTF-8";
body{
	font-size:12px;

	line-height:25px;
}
.top{transition:0.5s all cubic-bezier(0.68, 0, 0.38, 1.03);-webkit-transition:0.5s all cubic-bezier(0.68, 0, 0.38, 1.03);}


/* -------------
   切换
* ------------- */
#menu{ overflow:hidden;}
#menu #nav {display:block;width:1020px;padding:0;margin:0 auto;list-style:none;}
#menu #nav dl {float:left;width:164px; margin:0 20px;}
#menu #nav dl a {display:block;line-height:37px;width:164px; height:37px; font-size:16px; border-radius:8px;text-decoration:none; text-align:center;background:#f1f1f1; color:#1d1d1d;}
#menu_con{  height:505px; border-top:none; margin:0 auto; width:1200px;}
.tag{ padding:10px 0; overflow:hidden;}
#menu #nav dl .selected{background:#e62129; color:#fff;}

#menu_con ul { padding:0;}


/* ^^^^^^^^^ top ^^^^^^^^^ */
.topWrap{
	width: 100%;
	height:60px;
	background:#fff;
	transition:0.5s all cubic-bezier(0.68, 0, 0.38, 1.03);
	-webkit-transition:0.5s all cubic-bezier(0.68, 0, 0.38, 1.03);
	position:fixed; 
	z-index:9999;
	top:101px;
	border-bottom:1px solid #f2f2f2;
	}
.topWrap.fixed{ 
	top:0;
	border-bottom:1px solid #f3f3f3;
}
.caseType2{
	width:1200px;
	clear:both;
	margin:0 auto;
	}
.caseType2 span{
	line-height:60px;
	display:block;
	float:left;
	display:inline;
	font-size:14px;
	font-family:"microsoft yahei";
	}
.caseType2 p{
	display:block;
	float:left;
	}
.caseType2 p a{
	display:block;
	line-height:60px;
	float:left;
	padding:0 10px;
	font-size:14px;
	}
.caseType2 p a.hover{
	color:#fff;
	background:#ff9900;
	}
	
.caseSearch2{
	width:280px;
	float:right;
	display:inline;
	overflow:hidden;
	padding:10px 0 0 0;
	}
.caseSearch2 .inputtxt{
	width:225px;
	line-height:25px;
	padding:3px 5px;
	height:25px;
	border:none;
	background:#f3f3f3;
	float:left;
	}
.caseSearch2 .search_case{
	display:block;
	width:42px;
	cursor:pointer;
	color:#bbb;
	line-height:31px;
	background:#e7e7e7;
	float:left;
	border:none;
	font-size:14px;
	font-family:"microsoft yahei";
	}


/* ^^^^^^^^^ 案例列表页 ^^^^^^^^^ */
.caseList2{
	margin:0 auto;
	overflow:hidden;
	}
.caseList2 li{
	width:283px;
	height:220px;
	float:left;
	display:inline;
	margin:10px 0 10px 20px;
	overflow:hidden;
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-ms-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all;
	}
	
.caseList2 li:nth-child(1){ margin-left:0;}	
.caseList2 li:nth-child(5){ margin-left:0;}	
.caseList2 li:nth-child(9){ margin-left:0;}	
.caseList2 li:nth-child(13){ margin-left:0;}	
.caseList2 li:nth-child(17){ margin-left:0;}	
.caseList2 li:nth-child(21){ margin-left:0;}	
.caseList2 li:nth-child(25){ margin-left:0;}		
	
.caseList2 li a{
	width:283px;
	height:220px;
	display:block;
	background:#fff;	
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-ms-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all;
	position:relative;
	z-index:1;
    }
.caseList2 li p{
	width:269px;
	height:165px;
	display:block;
	overflow:hidden;
	padding:7px;
	}
.caseList2 li p img{
	width:100%;
	height:100%;
    }
.caseList2 li span{
	display:block;
	clear:both;
	background:#ffffff;
	overflow:hidden;
	text-align:center;
	line-height:40px;
	}
.caseList2 li a div{
	position:absolute;
	background:#f2f2f2;
	width:269px;
	height:165px;
	display:block;
	overflow:hidden;
	padding:6px;
	margin:1px;
	}

.caseList2 li a div img{
	display:block;
	width:269px;
	height:165px;
	}
#caseList45 li a div{
	position:absolute;
	background:#f2f2f2;
	width:269px;
	height:250px;
	display:block;
	overflow:hidden;
	padding:6px;
	margin:1px;
	}	
#caseList45 li a div img{
	display:block;
	width:269px;
	height:250px;
	}	
#caseList45 li{
	width:283px;
	height:305px;}	
#caseList45 li p {
    width: 269px;
    height:250px;}	
#caseList45 li a {
    width: 283px;
    height: 305px;}
.caseList2 li a:hover span{
	color:#fff;
	background:#e62129;
	}
	
.caseList2 li a:hover{
	background:#fff;
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-ms-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08), 0px 2px 10px 0px rgba(0, 0, 0, 0.08); 
	}





.caseList3{
	margin:0 auto;
	overflow:hidden;
	}
.caseList3 li{
	width:283px;
	height:302px !important;
	float:left;
	display:inline;
	margin:10px 0 10px 20px;
	overflow:hidden;
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-ms-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all;
	}
	
.caseList3 li:nth-child(1){ margin-left:0;}	
.caseList3 li:nth-child(5){ margin-left:0;}	
.caseList3 li:nth-child(9){ margin-left:0;}	
.caseList3 li:nth-child(13){ margin-left:0;}	
.caseList3 li:nth-child(17){ margin-left:0;}	
.caseList3 li:nth-child(21){ margin-left:0;}	
.caseList3 li:nth-child(25){ margin-left:0;}		
	
.caseList3 li a{
	width:283px;
	height:302px !important;
	display:block;
	background:#fff;	
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-ms-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all;
	position:relative;
	z-index:1;
    }
.caseList3 li p{
	width:269px;
	height:250px !important;
	display:block;
	overflow:hidden;
	padding:7px;
	}
.caseList3 li p img{
	width:100%;
	height:100%;
    }
.caseList3 li span{
	display:block;
	clear:both;
	background:#ffffff;
	overflow:hidden;
	text-align:center;
	line-height:40px;
	}
.caseList3 li a div{
	position:absolute;
	background:#f2f2f2;
	width:269px;
	height:250px !important;
	display:block;
	overflow:hidden;
	padding:6px;
	margin:1px;
	}
.caseList3 li a div img{
	display:block;
	width:269px;
	height:250px !important;
	}

.caseList3 li a:hover span{
	color:#fff;
	background:#e62129;
	}
	
.caseList3 li a:hover{
	background:#fff;
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-ms-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08), 0px 2px 10px 0px rgba(0, 0, 0, 0.08); 
	}












	
/* ^^^^^^^^^ 分页 ^^^^^^^^^ */	
#page{ height:36px; padding:30px 0 40px 0; margin:0 auto;}
#page li{ display:block; margin-right:5px; width:36px; height:36px; float:left; background:#fff;
	-webkit-transition: background .3s cubic-bezier(0.39, 0.575, 0.565, 1);
	-o-transition: background .3s cubic-bezier(0.39, 0.575, 0.565, 1);
	-moz-transition: background .3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:background .3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#page li a{ height:36px; line-height:36px; text-align:center; display:block;
	-webkit-transition: background .3s cubic-bezier(0.39, 0.575, 0.565, 1);
	-o-transition: background .3s cubic-bezier(0.39, 0.575, 0.565, 1);
	-moz-transition: background .3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:background .3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

#page li:hover,#page li.current{ background-color:#686868; }
#page li:hover a,#page li.current a{ color:#fff; }
.page-prev a{ background:url('../case/arrow.png') no-repeat 0px -36px; }
#page li.page-prev a:hover{ background-position:-36px -36px; }
.page-next a{ background:url('../case/arrow.png') no-repeat -36px 0px; }
#page li.page-next a:hover{ background-position:0px 0px; }

/* ^^^^^^^^^ 底部 ^^^^^^^^^ */
.footer{
	clear:both;
	background:#fff;
	line-height:60px;
	}
	




	
#back-top{ width:37px; height:37px; background:rgba(0,0,0,0.6) url('../case/top.png') no-repeat 50% 50%; background:#3c3c3c url('../case/top.png') no-repeat 50% 50%\9; position:fixed; bottom:20px; right:20px; cursor:pointer; opacity:0; visibility:hidden;
	-webkit-transition: all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
	-o-transition: all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
	-moz-transition: all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#back-top:hover{ background:#2056c5 url('../case/top.png') no-repeat 50% 50%; background:#2056c5 url('top.png') no-repeat 50% 50%\9; }
#back-top.show{ opacity:1; visibility:visible; }



.squareCase{
	margin:0 auto;
	overflow:hidden;
	}
.squareCase li{
	width:295px;
	height:295px;
	float:left;
	display:inline;
	padding:10px;
	overflow:hidden;
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-ms-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all;
	}
.squareCase li a{
	width:295px;
	height:295px;
	display:block;
	background:#fff;	
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-ms-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all;
	position:relative;
	z-index:1;
    }
.squareCase li p{
	width:295px;
	height:295px;
	display:block;
	overflow:hidden;
	position:absolute;
	left:0px; top:0px;
	padding:0;
	}
.squareCase li p img{
	width:295px;
	height:295px;
	
    }
.squareCase li span{
	display:block;
	clear:both;
	background:rgba(0,0,0,.2);;
	overflow:hidden;
	text-align:center;
	line-height:38px;
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	color:#FFF;
	}
.squareCase li a div{
	position:absolute;
	background:#f2f2f2;
	width:275px;
	height:165px;
	display:block;
	overflow:hidden;
	padding:9px;
	margin:1px;
	display:none !important;
	}
.squareCase li a div img{
	display:block;
	width:275px;
	height:165px;
	}
.squareCase li a:hover span{
	color:#fff;
	background:rgba(0,0,0,.2);
	}
	
.squareCase li a:hover{
	background:#fff;
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-ms-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08), 0px 2px 10px 0px rgba(0, 0, 0, 0.08); 
	}





















.squareCase li.firstCase{
	width:610px;
	height:610px;
	float:left;
	display:inline;
	padding:10px;
	overflow:hidden;
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-ms-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all;
	}
.squareCase li.firstCase a{
	width:610px;
	height:610px;
	display:block;
	background:#fff;	
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-ms-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all;
	position:relative;
	z-index:1;
    }
.squareCase li.firstCase p{
	width:610px;
	height:610px;
	display:block;
	overflow:hidden;
	padding:0;
	}
.squareCase li.firstCase p img{
	width:610px;
	height:610px;
    }
.squareCase li.firstCase span{
	display:block;
	clear:both;
	color:#fff;
	background:rgba(0,0,0,.2);
	overflow:hidden;
	text-align:center;
	line-height:38px;
	}
.squareCase li.firstCase a div{
	position:absolute;
	background:#f2f2f2;
	width:590px;
	height:405px;
	display:block;
	overflow:hidden;
	padding:9px;
	margin:1px;
	}
.squareCase li.firstCase a div img{
	display:block;
	padding-top:115px;
	margin:0 auto;
	width: 275px;
    height: 165px;
	}
.squareCase li.firstCase a:hover span{
	color:#fff;
	background:rgba(0,0,0,.2);
	}
	
.squareCase li.firstCase a:hover{
	background:#fff;
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-ms-transition: .5s all;
	-o-transition: .5s all;
	transition: .5s all;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08), 0px 2px 10px 0px rgba(0, 0, 0, 0.08); 
	}