@charset "utf-8";
body{background: #fafafa;}

#banner{
	overflow: hidden;
	width: 100%;
	position: relative;
	z-index: 0;
	
	background: rgba(104,104,104,1);
}
#banner .banner{
	height: 260px;
	position: relative;
	background-position: center;
	background-size: cover;
	width: 100%;
	opacity: 0.7;
}
.pagesTitle{
	overflow: hidden;
}
.pagesTitle h4, .pagesTitle h4 a{
	color: #bbb; 
	text-transform: uppercase;
}
.pagesTitle .line{
	margin:20px 0;
	background:url(../img/icon_01.png) no-repeat 32px top;
	height: 22px;
}
.pagesTitle .line span{
	height: 0;
	line-height: 0;
	border-top: 1px solid #a1a1a1;
	position: relative;
	left: 35px;
	top: 10px;
	display: block;
}

.main{
	overflow: hidden;
	margin-top: 30px;
}
.side{
	float: left;
	width: 320px;
}
.side h2{
	background: #a1a1a1;
	color: #fff;
	font-size: 24px;
	line-height: 45px;
	padding-left: 30px;
}
.side ul{
	padding: 30px 0;
}
.side ul li{
	display: block;
	margin-bottom: 1px;
}
.side ul li a{
	line-height: 20px;
	padding: 10px 0 8px 10px;
	padding-left: 30px;
	font-size: 15px;
	display: block;
	color: #5c9cf2;
}
.side ul li.on a,
.side ul li a:hover{
	color: #b98493;
	background: #e2e2e2 url(../img/icon_02.png) no-repeat 295px center;
}
.side ul li a span{
	color: #999;
}

.main .blockCon{
	width: 740px;
	float: right;
	word-wrap: break-word;
}
.main .blockCon ul{
	padding: 0 0px;
	overflow: hidden;
}
.main .blockCon ul li{
	display: block;
	float: left;
	width: 22%;
	margin:0 0 0 3%;
    height: 250px;
    overflow: hidden;
    padding-bottom: 35px;
    margin-bottom: 20px;
}
.main .blockCon ul li img{
	width: auto;
    max-height: 100%;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;	
}
.main .blockCon ul li a:hover img{
	-moz-box-shadow:0px 0px 10px rgba(0,0,0,0.3);       
	-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.3);       
	box-shadow:0px 0px 10px rgba(0,0,0,0.3); 	

}
.main .blockCon ul li h3 {
    font-size: 16px;
    line-height: 30px;
    text-align: center;
}
.main .blockCon ul li p{
	color: #666;
}

.detail {
	width: 860px;
	background: #fff;
	overflow: hidden;
	margin:0 auto;
}
.detail .pic{
	float: left;
	line-height: 0;
	width: 400px;
}

.detail .productInfo{
	padding: 25px;
	float: left;
	width: 460px;
}
.detail .productInfo h2{
	margin-bottom: 20px;
}
.detail .productInfo .con{
	font-size: 14px;
}
.productExplain{
	width: 860px;
	overflow: hidden;
	margin:0 auto;
	padding: 40px 25px 40px 25px;
}
.productExplain h2{
	margin-bottom: 20px;
	text-align: center;
}
.productExplain .con{
	font-size: 14px;
	margin-bottom: 30px;
}

	.cutpage{
	   text-align: center;
	   overflow: hidden;
	   padding-bottom: 30px;
	   width: 100%;
	}
	.cutpage a{
	   position: relative;
	   top: 23px;
	   overflow: hidden;
	   font-size: 12px;
	   display: inline-block;
	   width: 26px;
	   height: 26px;
	   line-height: 22px;
	   margin: 1px;
	   border-radius: 50px;
	   background: #fff;
	   border: 1px solid #dfdfdf;
	}
	.cutpage a.current{
	   background: #b98493;
	   color: #fff;
	   border: 0;
	}
	.cutpage a.start, .cutpage a.top, .cutpage a.end{
	   line-height: 22px;
	   width: 60px;
	}


@media screen and (max-width: 768px) {

	#banner{
		height: 260px;

	}
	#banner .banner{
		height: 160px;
	}

	.main{
		overflow: hidden;
		margin-top: 0px;
	}
	.side{
		float: none;
		width: 100%;
	}
	.side h2{
		display: none;
		background: #a1a1a1;
		color: #fff;
		font-size: 24px;
		line-height: 45px;
		padding-left: 30px;
	}
	.side ul{
		padding: 0px 0;
		width: 100%;
		overflow-x: auto;
		display: flex;
		margin-bottom: 15px;
		border-bottom: 1px solid #f1f1f1;
	}
	.side ul li{
		margin-bottom: 1px;
		white-space :  nowrap
	}
	.side ul li a{
		display: block;
		line-height: 20px;
		padding: 10px 15px;
		font-size: 15px;
		color: #5c9cf2;
	}
	.side ul li.on a,
	.side ul li a:hover{
		color: #b98493;
		background: #e2e2e2 url(../img/icon_02.png) no-repeat 295px center;
	}
	.side ul li a span{
		color: #999;
	}

	.main .blockCon{
		width: 100%;
		float: none;
	}
	.main .blockCon ul{
		padding: 0 0px;
	}
	.main .blockCon ul li{
		display: block;
		float: left;
		width: 44%;
		margin:0 3% 0 3%;
	}
	.main .blockCon ul li img{
		width: 100%;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;	
	}
	.main .blockCon ul li a:hover img{
		-moz-box-shadow:0px 0px 10px rgba(0,0,0,0.3);       
		-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.3);       
		box-shadow:0px 0px 10px rgba(0,0,0,0.3); 	

	}
	.main .blockCon ul li h2{
		font-size: 16px;
		line-height: 30px;
		margin-bottom:10px;
	}
	.main .blockCon ul li p{
		color: #666;
	}

	.detail {
		width: 100%;
		background: #fff;
		overflow: hidden;
		margin:0 auto;
	}
	.detail .pic{
		float: none;
		line-height: 0;
		width: 100%;
	}
	.detail .pic img{
		width: 100%;
	}
	.detail .productInfo{
		padding: 25px;
		float: none;
		width: 100%;
	}
	.detail .productInfo h2{
		margin-bottom: 20px;
	}
	.detail .productInfo .con{
		font-size: 14px;
	}
	.productExplain{
		width: 100%;
		overflow: hidden;
		margin:0 auto;
		padding: 40px 25px;
	}
	.productExplain h2{
		margin-bottom: 20px;
	}
	.productExplain .con{
		font-size: 14px;
		margin-bottom: 30px;
	}

}