

/* =================== 产品列表 product ====================== */
.product {
	background: #f6f6f6;
}

.product-content {
	padding: 20px 0 73px;
}

.product-one {}

.pro1-con {
	position: relative;
}

.pro1-main {
	line-height: 2em;
	margin: 3% 0;
}

.pro1-ul {
	margin: -20px -10px 0;
}

.pro1-ul li {
	float: left;
	width: 50%;
	padding: 0 10px;
	margin-top: 20px;
}

.pro1-a {
	display: block;
	position: relative;
	height: 300px;
	line-height: 300px;
	font-size: 0;
	background-color: #FFFFFF;
}

.pro1-a>span {
	display: block;
	position: absolute;
	padding: 5px 14px;
	font-size: 16px;
	line-height: 30px;
	left: 0;
	top: 0;
	color: #fff;
}

.pro1-a>span.pro-hot {
	background: #d7272c;
}

.pro1-a>span.pro-new {
	background: #3755ed;
}

.pro1-pic {
	font-size: 0;
	padding: 0 46px 0 0;
	text-align: center;
	float: right;
	width: 50%;
	height: 300px;
	line-height: 300px;
	position: relative;
}

.pro1-pic img {
	display: inline-block;
	vertical-align: middle;
	transition: ease .8s;
	max-height: 70%;
}

.pro1-font {
	width: 50%;
	margin-right: 0;
	padding-left: 65px;
	display: inline-block;
	vertical-align: middle;
}

.pro1-p {
	max-height: 90px;
	margin-top: 24px;
}

.pro1-a h3 {
	font-size: 26px;
	line-height: 40px;
	color: #333;
	transition: ease .5s;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.pro1-a p {
	font-size: 16px;
	line-height: 30px;
	color: #666;
	word-break: break-all;
}

.pro1-a p img {
	margin-left: 2%;
}

.pro1-a:hover .pro1-pic img {
	transform: scale(1.1);
}

.pro1-a:hover h3 {
	color: #003a81;
}

.proinfo-top {
	padding-bottom: 70px;
}

.proinfotop-left {
	width: 29%;
	float: left;
	overflow: hidden;
	background-color: #FFFFFF;
}

.proinfo-top:hover img {
	transform: scale(1.1);
}

.proinfotop-left img {
	transition: ease .8s;
}

.proinfotop-right {
	width: 70%;
	float: left;
	padding: 4.5% 0 0 3.6%;
}

.proinfotop-right h3 {
	line-height: 1.5em;
	font-weight: bold;
}

.proinfo-top:hover h3 {
	color: #003a81;
}

.proinfotop-right .right-p {
	line-height: 1.5em;
	width: 75%;
	margin-top: 10px;
}

.proinfotop-right .pro1-p {
	margin-top: 5.8%;
}

.product-two {
	padding: 70px 0;
}

.proinfo .swiper-container {
	padding-bottom: 3.7%;
}

.proinfo .swiper-container .pro2-font {
	padding: 12px 0;
}

.pro2-nav {}

.pro2-navul {
	font-size: 0;
	margin: 0;
	margin-left: -2.4%;
	display: flex;
}

.pro2-navul li {
	display: inline-block;
	overflow: hidden;
	position: relative;
	padding-left: 5px;
	width: 18%;
	text-align: center;
}

.pro2-navul li:last-child {
	width: auto;
	/* text-align: right; */
}

.pro2-navul li:nth-last-child(2) {
	/* width: 22%; */
}

.pro2-navul li a::before {
	content: " ";
	position: absolute;
	left: 15%;
	width: 3px;
	height: 80%;
	background: #003A81;
	top: 10%;
	opacity: 0;
}

.pro2-navul li:last-child a::before {
	left: 0%;
}

.pro2-navul li:nth-last-child(2) a::before {
	left: 12%;
}

.pro2-navul li:nth-last-child(4) a::before {
	left: 10%;
}

.pro2-navul li a {
	padding-bottom: 0;
	display: block;
	font-size: 20px;
	line-height: 30px;
	color: #999;
	border-bottom: 1px solid transparent;
	transition: all .3s;
	text-align: center;
}

.pro2-navul li.on a {
	color: #003a81;
	border-color: #003a81;
}

/* .pro2-navul li:last-child:hover{text-align: center;} */
.proinfo .pro2-navul li.active a {
	color: #003a81;
	font-size: 22px;
}

.pro2-navul li:hover,
.pro2-navul li.active {
	padding: 0 0 0 15px;
	font-weight: bold;
}

.pro2-navul li.active a {
	color: #003a81;
}

.pro2-navul li:hover a::before,
.pro2-navul li.active a::before {
	opacity: 1;
}

.pro2-con {
	margin-top: 60px;
}

.pro2-ul {
	margin: -26px -15px 0;
	font-size: 0;
}

.pro2-ul li {
	margin-top: 26px;
	display: inline-block;
	vertical-align: top;
	width: 33.333%;
	padding: 0 15px;
}

.pro2-a {
	display: block;
}

.pro2-pic {
	overflow: hidden;
	background: #f6f6f6;
	text-align: center;
}

.pro2-pic img {
	display: inline-block;
	transition: ease .8s;
}

.pro2-a:hover .pro2-pic img {
	transform: scale(1.1);
}

.pro2-a:hover .pro2-font i {
	color: #FFFFFF;
	margin-right: 20px;
	transition: all 1s;
	border: 1px solid #FFFFFF;
}

.pro2-a:hover .pro2-font {
	padding-left: 20px;
	transition: all 1s;
}

.pro2-a:hover .pro2-font {
	color: #FFFFFF;
	background-color: #DF0024;
}

.pro2-font {
	padding: 20px 0;
	font-size: 18px;
	line-height: 30px;
	color: #666;
	border-bottom: 1px solid #dbdbdb;
	transition: all 1s;
}

.pro2-font h4 {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	height: 40px;
	line-height: 40px;
	padding: 0 5px;
}

.pro2-font h4 i {
	color: #000000;
	display: inline-block;
	border: 1px solid #999999;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	float: right;
	font-style:normal;
	transition: all 1s;
}

.pro-page {
	margin-top: 39px;
	font-size: 0;
	text-align: center;
}

.pro-page a {
	display: inline-block;
	font-size: 16px;
	line-height: 30px;
	color: #b9b9b9;
}

.pro-page em {
	margin-left: 10px;
}

@media (max-width: 1679px) {
	.pro2-navul li a {
		padding-bottom: 0;
		padding-left: 50px;
	}

}

@media (max-width: 1459px) {
	.product-content {
		padding: 60px 0;
	}

	.pro1-font {
		padding-left: 40px;
	}

	.proinfo-top {
		padding-bottom: 60px;
	}

	.pro1-a h3 {
		font-size: 26px;
	}

	.pro1-a,
	.pro1-pic {
		height: 260px;
		line-height: 260px;
	}

	/* .pro2-navul{margin: 0 -30px;}
	.pro2-navul li{margin: 0 30px;}
	.pro2-navul li a{padding-bottom: 0;font-size: 18px;} */
	.product-two {
		padding: 60px 0 0;
	}

	.pro2-font {
		font-size: 20px;
	}

	.pro-page {
		margin-top: 30px;
	}

	.pro2-navul li:hover a {
		font-size: 22px;
	}
}

@media (max-width: 1259px) {
	.pro2-font {
		font-size: 18px;
	}

	.pro1-a h3 {
		font-size: 24px;
		line-height: 30px;
	}

	.pro1-ul li {
		width: 100%;
	}

	.pro1-a,
	.pro1-pic {
		height: 300px;
		line-height: 300px;
	}

	.pro1-pic img {
		max-height: 75%;
	}

	.pro2-navul li a {
		padding-bottom: 0;
		font-size: 16px;
	}

	.pro1-p {
		margin-top: 15px;
	}

	.pro1-a>span {
		font-size: 14px;
		padding: 5px 10px;
	}

	.pro2-navul li:hover a {
		font-size: 18px;
		font-weight: bold;
	}

	.pro2-font h4 em {
		width: 25px;
		height: 25px;
		font-size: 12px;
		line-height: 25px;
		margin-top: 7.5px;
		margin-left: 10px;
	}
}

@media (max-width: 991px) {
	.pro2-ul li {
		width: 50%;
	}

	.breadcon a {
		font-size: 14px;
		margin-left: 0;
	}

	.pro2-con {
		margin: 30px 0 0;
	}
}

@media (max-width: 768px) {
	.pro2-navul li {
		width: 15.1%;
	}
	.pro2-font h4{ font-size:25px;}

	.pro2-navul li a::before {
		left: 5% !important;
		display: none;
	}

	.pro2-navul li:nth-last-child(4) {
		/* width:19.5%; */
	}

	.pro2-navul li:hover a {
		font-size: 16px;
		font-weight: bold;
	}
}

@media (max-width: 767px) {
	.pro2-font {
		font-size: 16px;
		padding: 5px 0;
	}

	.pro2-font h4 i {
		margin-top: 5px;
		width: 30px;
		height: 30px;
		line-height: 30px;
	}

	.pro2-navul li {
		margin: 0 20px;
		width: 200px;
	}

	.pro2-navul {
		margin: 0 -20px;
		display: none;
	}

	.product-two .pro2-nav .pro2-navul {
		display: block;
		margin-bottom: 18px;
	}

	.pro2-con {
		margin-top: 0;
	}

	.product-content {
		padding: 40px 0;
		min-height: 40vh;
	}

	.pro1-a h3 {
		font-size: 20px;
		line-height: 30px;
	}

	.pro1-a p {
		font-size: 14px;
		line-height: 26px;
	}

	.product-two {
		padding: 40px 0 0;
	}

	.pro1-a,
	.pro1-pic {
		height: 240px;
		line-height: 240px;
	}

	.pro2-con {
		margin: 0 0;
	}

	.bot-link a img {
		position: absolute;
		right: 2px;
		top: 27%;
	}

}

@media (max-width: 640px) {
	.pro1-a h3 {
		font-size: 18px;
		line-height: 30px;
	}

	.pro2-ul li {
		width: 100%;
	}

	.pro1-pic {
		padding: 0 10%;
		float: none;
		width: 100%;
		height: 200px;
		line-height: normal;
	}

	.pro1-pic img {
		max-height: 100%;
	}

	.pro1-a {
		padding: 40px 0 25px;
		height: auto;
		line-height: normal;
	}

	.pro1-font {
		padding: 20px 20px 0;
		display: block;
		width: 100%;
	}

	.pro1-a>span {
		padding: 3px 10px;
	}

	.pro1-p {
		max-height: none;
		height: auto;
	}

	/* .pro2-font{margin: 12px 0 0;} */
	.pro-page {
		margin-top: 25px;
	}

}

@media (max-width: 320px) {}
