@charset "utf-8";

#product{
	width: 100%;
	background: #eceff5;
	padding: 20px 0 130px 0;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
	#product .content {
	    width: 100%;
	    max-width: 1200px;
	    min-width: 1000px;
	    margin: 0 auto;
	    overflow: hidden;
	}
		/*productList*/
		#product .content .classTwo{
			width: 100%;
			overflow: hidden;
			margin-bottom: 30px;
		}
			#product .content .classTwo ul{
				display: block;
				width: 100%;
				padding: 20px;
				overflow: hidden;
				text-align: center;
			}
				#product .content .classTwo ul li{
					display: inline-block;
					padding: 8px 15px;
					background: #fff;
					border-radius: 50px;
					margin: 10px 5px;
				}
					#product .content .classTwo ul li a{
						color: #333;
						font-size: 16px;
						line-height: 25px;
						display: block;
					}
				#product .content .classTwo ul li.active,#product .content .classTwo ul li:hover{
					cursor: pointer;
					background: #386aed;	
					box-shadow: 0 5px 20px 0 rgba(0,0,0,0.5);				
				}
				#product .content .classTwo ul li.active a,#product .content .classTwo ul li:hover a{
					color: #fff;
				}
		
		/*productList*/
		#product .content .productList{
			width: 100%;
			overflow: hidden;
		}
			#product .content .productList ul{
				display: block;
				width: 100%;
				overflow: hidden;
			}
				#product .content .productList ul li{
					width: 25%;				
					margin:0 0 35px 0;
					float:left;	
					padding: 15px;			
				}
					#product .content .productList ul li .con{
						width: 100%;
						overflow: hidden;
						margin: 0 auto;
						background: #fff;
						text-align:center;
						position:relative;
						transition:all 400ms ease 0s;
					}
					#product .content .productList ul li .con .icon-product{
						display:block;
						width:100%;
						overflow: hidden;
					}
						#product .content .productList ul li .con .icon-product img{
							display: block;
							width: 100%;
							-webkit-transition: all 0.2s ease-in;
							transition: all 0.2s ease-in;
						}
					#product .content .productList ul li .con h3{
						font-size:16px;
						font-weight:400;
						color:#333;
						padding: 10px;
					}
					
					#product .content .productList ul li .con .text{
						display:none;
						width: 100%;
						height: 100%;
						background:#386aed;
						position: absolute;
						left: 0;
						top:0;
						z-index: 2;
						padding: 25px 35px;
					}
						#product .content .productList ul li .con .text h4{
							font-size:18px;
							font-weight:400;
							color:#fff;
							padding: 10px;
							margin-bottom: 10px;
						}
						#product .content .productList ul li .con .text p{
							color: #fff;
							font-size: 14px;
							text-align: left;
						}
						#product .content .productList ul li .con p a{
							position:absolute;
							bottom: 35px;
							left: 50%;
							margin-left: -61px;
							display:block;
							box-sizing:border-box;
							border:1px solid #fff;
							width:122px;
							height: 34px;
							line-height: 34px;
							padding: 0 30px;
							color:#fff;
							-moz-box-shadow:1px 1px 5px #ccc;
							-webkit-box-shadow:1px 1px 5px #ccc;
							box-shadow:1px 1px 5px #ccc;
							overflow:hidden;
						}
							#product .content .productList ul li .con p a .txt{
								position:absolute;
								font-style:normal;
								display:block;
								z-index:2; top: 5px;
							}
							#product .content .productList ul li .con p a .after{
								position: absolute;
								z-index:1;
							    width: 260%;
							    height: 0;
							    top: 50%;
							    left: 50%;
							    background: #fff;
							    opacity: 0;
							    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
							    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
							    transform: translateX(-50%) translateY(-50%) rotate(45deg);
							    -webkit-transition: all 300ms;
							    transition: all 300ms;
							}
							#product .content .productList ul li .con p a:hover .txt{
								color:#386aed;
							}
							#product .content .productList ul li .con p a:hover .after{
								height: 360%;
								opacity: 1;
							}
					#product .content .productList ul li:hover .con{
						cursor: pointer;
						box-shadow: 0 5px 20px 0 rgba(0,0,0,0.5);
					}								
					#product .content .productList ul li:hover .con .text{
						display:block;
					}
					


#productDetail{
	width: 100%;
	background: #eceff5;
	padding: 50px 0 130px 0;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
	#productDetail .content {
	    width: 100%;
	    max-width: 1200px;
	    min-width: 1000px;
	    margin: 0 auto 30px;
	    overflow: hidden;
	    padding: 30px;
	    background: #fff;	    
	}
		/*change*/
		#productDetail .change h1{
			color: #333;
			font-size: 26px;
			font-weight: bolder;
			line-height: 45px;
		}
		#productDetail .change .text{
			margin-top: 15px;
			width: 100%;
			overflow: hidden;
			background: #f6f6f6;
			padding: 25px;
			color: #333;
		}
			#productDetail .change .text b{
				font-weight: bolder;
				font-size: 18px;
				line-height: 35px;
			}
			#productDetail .change .text p{
				font-size: 16px;
				line-height: 25px;
			}
		/*block*/
		#productDetail .block .title{
			width: 100%;
			overflow: hidden;
			padding-bottom: 45px;
			background: url(../img/productDetailBlockBG.png) no-repeat bottom center;
		}
			#productDetail .block .title h1{
				text-align: center;
				color: #f6f6f6;
				font-size: 80px;
				line-height: 80px;
				font-weight: bolder;
			}
			#productDetail .block .title h2{
				text-align: center;
				color: #333;
				font-size: 40px;
				line-height: 30px;	
				margin-top: -53px;			
			}
				#productDetail .block .title h2 span{
					font-weight: bolder;
					color: #023894;
					font-size: 40px;
				}
		#productDetail .block .blockCon{
			width: 100%;
			overflow: hidden;
			padding: 50px 0;
		}
			#productDetail .block .blockCon .name{
				float: left;
				width: 30%;
				padding: 5px 0 0 50px;
			}
				#productDetail .block .blockCon .name h1{
					font-family: codel, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
					text-transform: uppercase;
					color: #023894;
					font-weight: bolder;
				}
			#productDetail .block .blockCon .con{
				float: right;
				width: 68%;
				padding:0 50px 0 0;
			}
				#productDetail .block .blockCon .con p{
					color: #333;
					text-align:justify;
					text-justify:inter-ideograph;
					padding-left: 15px;
					background: url(../img/productBlockBG.png) no-repeat left center;
				}
		#productDetail .block .line{
			width: 100%;
			height: 1px;
			border-bottom: 1px dotted #ccc;
		}
		#productDetail .block .blockCon table{
			width: 800px;
			overflow: hidden;
			margin: 0 auto;
		}
			#productDetail .block .blockCon table tr td{
				background: #f6f6f6;
				padding: 15px;
				font-size: 16px;
				line-height: 25px;
			}