body {

	background: #fff;

}



.box {

	box-shadow: none;

}



.prodSeach {

	height: 98px;

	background: #F1F4F6;

	box-sizing: border-box;

	padding: 0 15px;

	display: flex;

	align-items: center;

	justify-content: flex-end;

}



.prodSeach form {

	display: flex;

	align-items: center;

	width: 50%;

	height: 38px;

	box-sizing: border-box;

	border: 1px solid #c9c9c9;

}



.prodSeach form img {

	display: block;

	padding: 0 10px;

	width: 22px;

}



.prodSeach form input,

.prodSeach form button {

	height: 100%;

	display: block;

}



.prodSeach form button {

	width: 85px;

	background: none;

	color: #003b68;

	border: 2px solid #003b68;

	box-sizing: border-box;

	font-size: 16px;

	font-weight: 600;

}



.prodSeach form input {

	width: calc(100% - 127px);

	border: none;

	background: none;

}



.prodList {

	display: flex;

	justify-content: space-between;

	align-items: flex-start;

	margin: 15px 0 30px;

}



.sortNav {

	width: 194px;

	border-right: 1px solid #c9c9c9;

	box-sizing: border-box;

	padding: 0 10px;

}



.sortNav h4 a {

	display: flex;

	align-items: center;

	/* margin: 0 0 15px; */

	justify-content: center;

	width: 100%;

	height: 65px;

	background: url('../imgs/products07.jpg') center no-repeat;

	background-size: cover;

	color: #fff;

	font-size: 20px;

	letter-spacing: 2px;

}



.sortNav h4::before {

	/* content: ''; */

	display: block;

	background: #00369f;

	width: 6px;

	height: 20px;

	border-radius: 3px;

	margin-right: 5px;

}



/* .sortNav h4 a {

	font-size: 20px;

	color: #00369F;

	font-weight: 300;

	border-bottom: 1px solid #c9c9c9;

} */



.sortOne a {

	display: block;

	padding: 12px 5px;

	color: #7c7c7c;

	font-size: 14px;

	border-bottom: 1px solid #c9c9c9;

	/* margin: 5px 0; */

}



/* .sortOne a:hover {

	color: #001c52;

	text-decoration: underline;

} */



.sortOne a:hover,

.sortOne .sortActive:hover,

.sortOne .sortActive {

	background: url('../imgs/products08.jpg') center no-repeat;

	background-size: cover;

	color: #fff;

}



/* .sortOne .sortActive:hover {

	text-decoration: underline;

} */



.sortTwo,

.sortTree {

	padding-left: 10px;

}


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

	.toShowTwo {
		position: relative;
	}

	.sortTwo {
		position: absolute;
		top: 0;
		left: 99%;
		padding: 0;
		width: 100%;
		background: #fff;
		text-indent: 1em;
		display: none;
		box-sizing: border-box;
		border: 1px solid #c9c9c9;
	}

	.toShowTwo:hover .sortTwo{
		display: block;
	}

}



.prodOpen {

	width: calc(100% - 225px);

}



.prodOpen h3 {

	padding: 8px 20px;

	display: flex;

	align-items: center;

	background: #E7EAEF;

	font-size: 22px;

	color: #222;

}



.prodOpen h3::before {

	content: '';

	display: inline-block;

	background: #C42A38;

	width: 6px;

	height: 42px;

	border-radius: 3px;

	margin-right: 15px;

}



.outlineNav {

	display: flex;

	width: 100%;

	box-sizing: border-box;

	padding: 0 5px;

	border-bottom: solid 3px #C42A38;

	margin: 20px 0;

}



.outlineNav li {

	margin-right: 10px;

	margin-bottom: -3px;

	background: #F0F0F0;

	border-bottom: solid 3px #C42A38;

	border-top: solid 1px #ddd;

	border-radius: 3px 3px 0px 0px;

	overflow: hidden;

}



.outlineNav li:hover {

	background: #fff;

}



.outlineNav .outActive {

	background: #fff;

	border-bottom: solid 3px #fff;

}



.outlineNav a {

	display: block;

	border-top: solid 3px transparent;

	border-left: solid 1px #ddd;

	border-right: solid 1px #ddd;

	padding: 7px 15px;

	font-size: 13px;

	color: #7c7c7c;

}



.outlineNav li:hover a,

.outlineNav .outActive a {

	border-top: solid 3px #C42A38;

}



.prodOut {

	display: flex;

	align-items: flex-start;

	justify-content: space-between;

	margin: 0 0 15px;

}



.prodOutMg {

	width: 280px;

	box-sizing: border-box;

	border: 1px solid #6e6e6e;

	position: relative;

	overflow: hidden;

}



.prodOutMg img {

	display: block;

	width: 100%;

}



.enlarge {

	width: 58px;

	position: absolute;

	bottom: -3px;

	right: 0;

}



.enlarge img {

	display: block;

	width: 100%;

}



.prodOutxt {

	width: calc(100% - 300px);

	box-sizing: border-box;

	padding-right: 10px;

}



.prodOutxt p {

	display: flex;

	align-items: baseline;

	font-size: 13px;

	color: #222;

	margin: 5px 0 0;

	padding: 0 0 10px;

	border-bottom: 1px solid #d9d9d9;

}



.prodOutxt p::before {

	content: '';

	border-left: 6px solid #222;

	border-top: 6px solid transparent;

	border-bottom: 6px solid transparent;

	margin-right: 5px;

}



.proEnl {

	position: fixed;

	top: 0;

	left: 0;

	z-index: 3;

	width: 100%;

	height: 100%;

	background: rgba(0, 0, 0, .7);

	display: none;

}



.proEnlMg {

	width: 100%;

	height: 100%;

	box-sizing: border-box;

	padding: 10%;

	display: flex;

	align-items: center;

	justify-content: center;

}



.proEnlMg img {

	display: block;

	max-width: 100%;

	box-shadow: 0 5px 15px rgb(0 0 0 / 50%);

	background: #fff;

	padding: 20px;

	border-radius: 10px;

}



.prodPoint {

	display: flex;

	padding: 10px 0;

	position: sticky;

	top: 0;

	background: #fff;

	z-index: 1;

}



.prodPoint a {

	display: flex;

	align-items: center;

	font-size: 14px;

	color: #00369F;

	margin-left: 40px;

}



.itemize {

	margin: 40px 0 60px;

}



.itemize h4 {

	font-size: 15px;

	color: #222;

	font-weight: 300;

	border-left: 5px solid #00369f;

	padding-left: 5px;

}



.itemList {

	display: grid;

	grid-template-columns: repeat(2, 48%);

	justify-content: space-between;

	box-sizing: border-box;

	padding: 0 30px;

	margin: 15px 0;

}



.itemList li {

	padding: 0 0 25px;

	margin: 0 0 25px;

	border-bottom: 1px dashed #666;

}



.itemList a {

	display: block;

	position: relative;

}



.itemList img {

	display: block;

	max-width: 100%;

}



.itemList p {

	white-space: nowrap;

	text-overflow: ellipsis;

	overflow: hidden;

	box-sizing: border-box;

	padding: 0 0 10px 30px;

	width: 100%;

	position: absolute;

	bottom: 10px;

	left: 0;

	font-size: 12px;

	color: #666;

}



.tailorism {
	display: grid;
	grid-template-columns: repeat(2, 48%);
	justify-content: space-between;
}

.tailorism a {
	display: flex;
	align-items: center;
	margin: 0 0 25px;
}

.tailMg {
	width: 170px;
}

.tailMg img {
	display: block;
	width: 100%;
}

.tailInfo {
	margin-left: 5px;
	max-width: calc(100% - 175px);
}


.tailInfo th {
	vertical-align: top;
	color: #7C7C7C;
	font-size: 15px;
	font-weight: 300;
	text-align: left;
	margin: 0 0 3px;
}

.tailInfo td {
	font-size: 13px;
	color: #C52B3A;
	margin: 0 0 3px;
}



.detaMg,
.drawing {

	margin: 30px 0 0;

}



.detaMg img {

	display: block;

	max-width: 100%;

}



.drawing img {
	display: block;
	width: 100%;
	margin: 0 0 10px;
}



.detitle {

	color: #222;

	padding: 10px;

	font-size: 14px;

	font-weight: 300;

	font-family: 'SimHei';

}



.detitle b {

	display: block;

	font-size: 21px;

	padding: 0 0 10px;

	color: #003366;

}



.merit {

	background: #F0F0F0;

}



.merit h5,

.specifics h5 {

	padding: 5px 10px;

	font-size: 14px;

	color: #fff;

	background: #2DD5E4;

}



.mertMg img {

	display: block;

	max-width: 100%;

}



.specifics table {

	width: 100%;

	border: 1px solid #DBE2E9;

	border-top: none;

	border-left: none;

	margin: 0 0 20px;

}



.norms th:first-child,

.deploy th {

	text-align: left;

}



.specifics table th,

.specifics table td {

	border-top: 1px solid #DBE2E9;

	border-left: 1px solid #DBE2E9;

	padding: 5px;

	line-height: 20px;

}



.norms th {

	font-size: 17px;

	color: #003366;

}



.specifics table td,

.deploy th {

	color: #222;

	font-size: 13px;

}



.deploy th {

	background: #D5F6FF;

}



.proTips {

	padding: 15px 10px 20px;

	font-size: 12px;

	color: #222;

}



.npm h5 {

	font-size: 16px;

	color: #222;

	padding: 0 0 0 4px;

	border-left: 5px solid #00369f;

	font-weight: 300;

	line-height: 18px;

	font-family: 'SimHei';

}



.npmList {

	display: grid;

	grid-template-columns: repeat(3, 285px);

	justify-content: space-around;

	margin: 20px 0;

}



.npmList a {

	display: block;

	background: url('../imgs/npmBack.png') center no-repeat;

	background-size: cover;

	font-size: 12px;

	color: #333;

	line-height: 40px;

	border-radius: 6px;

	margin: 10px 0;

	text-align: center;

}



.npmList a:hover {

	color: #6f6f6f;

}



/* down */

.downBox {

	box-sizing: border-box;

	border: 1px solid #DBDBDB;

	padding: 35px;

	background: #F7F7F7;

}



.down {

	width: 100%;

	/* border: 1px solid #CD3141; */

	border: 1px solid #DBDBDB;

}



.down th {

	/* background: #CD3141; */

	background: -webkit-linear-gradient(top, #656565, #484848);

	height: 45px;

	font-size: 16px;

	color: #fff;

	font-weight: 300;

	vertical-align: middle;

	text-align: left;

	padding: 0 20px;

}



.down td {

	border-top: 1px solid #DBDBDB;

	background: #F7F7F7;

	padding: 0 20px;

	height: 45px;

	font-size: 13px;

	color: #5e5e5e;

}



.down td a {

	font-size: 13px;

	color: #5e5e5e;

	cursor: pointer;

}



.down td a:hover {

	text-decoration: underline;

	color: #CD3141;

}



.down th:first-child,

.down td:first-child {

	width: 50%;

	box-sizing: border-box;

}



.down th img,

.down td img {

	vertical-align: middle;

}



.down td p {

	display: flex;

	align-items: center;

}



.down td p::before {

	content: '';

	display: block;

	width: 6px;

	height: 6px;

	border-radius: 50%;

	background: #CD3141;

	margin-right: 10px;

}



.dowPage {

	margin-top: 35px;

}



.dowPage,

.dowPage li,

.dowPage a {

	display: flex;

	align-items: center;

	justify-content: center;

}



.dowPage a {

	width: 30px;

	height: 30px;

	margin: 0 5px;

	background: #fff;

	font-size: 13px;

	color: #2f2f2f;

}



.dowPage a:hover,

.dowPage .downActive {

	background: #CD3141;

	color: #fff;

}



.dowPage a:hover img {

	filter: grayscale(100%) brightness(800%);

}



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



	.sortNav {

		width: 160px;

	}



	.prodOpen {

		width: calc(100% - 180px);

	}



	.prodSeach {

		height: 60px;

	}



	.prodSeach form {

		height: 35px;

	}



	.prodOutMg {

		width: 200px;

	}



	.prodOutxt {

		width: calc(100% - 220px);

	}



	.prodPoint a {

		font-size: 13px;

		margin-left: 16px;

	}



	.itemList {

		padding: 0 10px;

	}



	.itemList li {

		padding: 0 0 10px;

		margin: 0 0 10px;

	}



	.itemList p {

		padding-bottom: 5px;

		bottom: 0;

	}



	.itemize {

		margin: 40px 0;

	}

	.tailMg {
		width: 90px;
	}

	.tailInfo {

		max-width: calc(100% - 95px);

	}

	.tailInfo th,
	.tailInfo td {
		font-size: 12px;
	}



}



.sortDown {

	display: none;

}



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



	.prodSeach {

		height: 40px;

	}



	.prodSeach form {

		height: 30px;

		width: 100%;

	}



	.prodSeach form img {

		width: 18px;

	}



	.prodSeach form input {

		width: calc(100% - 122px);

	}



	.prodSeach form button {

		font-size: 14px;

	}



	.prodList,

	.prodOut {

		flex-wrap: wrap;

	}



	.prodOut,

	.itemize {

		box-sizing: border-box;

		padding: 0 5%;

	}



	.prodOpen,

	.prodOutMg,

	.prodOutxt {

		width: 100%;

	}



	.prodPoint {

		padding: 0;

		flex-wrap: wrap;

		justify-content: space-around;

	}



	.prodPoint a {

		font-size: 12px;

		margin-left: 15px;

		padding: 5px 0 0;

	}



	.itemList {

		display: grid;

		grid-template-columns: repeat(1, 100%);

	}



	.sortNav {

		width: 100%;

		border: none;

		padding: 0 20px;

		position: relative;

	}



	.sortNav::after {

		content: '';

		display: block;

		border-top: 8px solid #fff;

		border-left: 8px solid transparent;

		border-right: 8px solid transparent;

		position: absolute;

		right: 40px;

		top: 30px;

	}



	.sortOne,

	.sortTwo,

	.sortTree {

		display: none;

	}




	.toShowTwo {
		border-bottom: 1px solid #c9c9c9;
	}


	.sortOne a {
		border: none;
	}


	.sortOne a:hover {
		background: none;
	}



	.toShowTwo,

	.sortTwo>div {

		display: flex;

		align-items: center;

		justify-content: space-between;

		flex-wrap: wrap;

		position: relative;

	}



	.sortDown {

		display: block;

		border-top: 6px solid #00369F;

		border-left: 6px solid transparent;

		border-right: 6px solid transparent;

	}





	.sortTwo,

	.sortTree {

		width: 100%;

		box-sizing: border-box;

	}



	.npmList {

		display: flex;

		justify-content: space-around;

		flex-wrap: wrap;

		margin: 10px 0;

	}



	.npmList a {

		width: 150px;

		margin: 10px;

	}



	.prodOpen h3 {

		font-size: 20px;

	}



	.prodOpen h3::before {

		height: 30px;

	}



	.detalis {

		box-sizing: border-box;

		padding: 0 10px;

	}



	.detitle b {

		font-size: 16px;

	}



	.specifics table td,
	.deploy th {

		font-size: 12px;

	}


	.tailorism {

		grid-template-columns: repeat(1, 100%);

	}

	.tailMg {
		width: 110px;
	}

	.tailInfo {
		margin-left: 10px;
		max-width: calc(100% - 120px);
	}



}