/*
 * product page
 * */

/* 产品页面头部背景图片样式 */
.product-banner {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-top: 0;
	margin-bottom: 0;
	background: #f5f5f5;
	overflow: hidden;
	/* 根据视口宽度计算高度，保持适当的宽高比 */
	height: 25vw;
	min-height: 200px;
	max-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.banner-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* 响应式高度调整 */
@media (max-width: 480px) {
	.product-banner {
		height: 35vw;
		min-height: 150px;
		max-height: 250px;
	}
}

@media (min-width: 481px) and (max-width: 768px) {
	.product-banner {
		height: 30vw;
		min-height: 180px;
		max-height: 300px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.product-banner {
		height: 28vw;
		min-height: 220px;
		max-height: 350px;
	}
}

@media (min-width: 1025px) and (max-width: 1400px) {
	.product-banner {
		height: 25vw;
		min-height: 250px;
		max-height: 400px;
	}
}

@media (min-width: 1401px) and (max-width: 1920px) {
	.product-banner {
		height: 22vw;
		min-height: 280px;
		max-height: 450px;
	}
}

@media (min-width: 1921px) {
	.product-banner {
		height: 20vw;
		min-height: 350px;
		max-height: 500px;
	}
}

.product{
	padding: 5rem 0 6.25rem;
}
@media only screen and (min-width: 1400px) {
	.product .content {
		width: 1400px;
		margin: 0 auto;
	}
}
.product-left{
	float: left;
	width: 20.833%;
	min-height: 43.75rem;
	background: #fff;
	padding: 0 1rem 2rem 1rem;
	margin-right: 2rem;
	box-sizing: border-box;
}
.product-left>div.text-center{
	padding: 3rem 0;
	border-bottom: 1px solid #dbdbdb;
}
.product-left>div>h2{
	display: inline-block;
	padding-left: 2.5rem;
	font-size: 1.125rem;
	line-height: 30px;
	background: url(../images/product-icon.png) no-repeat;
}

.categories>li{margin: 2.25rem 0 1rem;}
.categories>li *{font-size: 1.125rem;}
.categories>li a{
	width: 100%;
	height: 3rem;
	padding-left: 7.5%;
	line-height: 3rem;
	background: transparent;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.categories>li>a{padding-left: 2rem;}
.categories .active>a,.categories>li>a{padding-right: 4rem;}
.categories .active>i::before, .categories .active>i::after{
	background: #fff;
}
.categories>li{position: relative;}
.categories>li ul{
	display: none;
	position: relative;
	padding-left: 3rem;
}
.categories>li ul a{
	font-size: .875rem;
	color: #096c38;
}
.categories>li::after{
	content: "";
	position: absolute;
	right: 0;
	bottom: -1rem;
	width: 60%;
	border-bottom: solid 1px #dedede;
}
.categories>li.active>a,.categories ul>li.active>a{
	color: #fff;
	background: url(../images/categoryBg.png) no-repeat;
	background-size: 100% 100%;
}


.categories>li .plus{right: 1rem;z-index: 20;}
.categories>li.active .plus::after{height: 0;}

.product-right{
	padding: 0 2rem;
	width: calc(79.167% - 3rem);
	float: right;
	box-sizing: border-box;
}
.product-form{
	margin-bottom: 2rem;
}
.product-form>form{
	position: relative;
	width: 18.75rem;
	height: 2.375rem;
	margin-left: auto;
}
.product-form>form>input{
	width: 100%;
	height: 100%;
	border-radius: 30px;
	padding: 0 3.125rem 0 1.25rem ;
	color: #096c38;
	font-size: .875rem;
}
.product-form>form>button{
	left: inherit;
	right: .875rem;
	width: 1.75rem;
	height: 1.75rem;
}
.product-form>form>button>img{max-width: 100%;}
.product-list{margin: 1.5rem 0 3rem 0;}
.product-list>div{
	position: relative;
	width: 23%;
	height: 18.75rem;
	margin-right: 2.667%;
	margin-bottom: 2rem;
	text-align: center;
	background-color: #ffffff;
	border: solid 1px #e2e2e2;
	box-sizing: border-box;
}
.product-list>div .text-hidden {padding: 0 3.125%;}
.product-list>div:nth-child(4n){margin-right: 0;}
.product-list>div .img{width: 100%;}
.product-list>div .img>p{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 15rem;
}
.product-list>div .img img{
	max-width: 100%;
	max-height: 100%;
}
.product-list>div .text-hidden{
	margin-top: 1.5rem;
	font-size: 1rem;
}
.product-list .set-ctn>*{height: 30px;}
.linkTo-detail::after{
	content: "";
	display: block;
	clear: both;
}
.linkTo-detail{
	display: none;
	zoom: 1;
}
.linkTo-detail>a{
	float: left;
	width: 50%;
	height: 9.375rem;
	padding: 2.6rem 1rem;
	background: rgba(165,238,237,.5);
}
.linkTo-detail .set-ctn{
	max-width: 30px;
	max-height: 30px;
}
.linkTo-detail>a>h4{
	margin-top: 1rem;
	color: #096c38;
}
.linkTo-detail>a:nth-child(1){
	background: url(../images/productIcon-bg1.png);
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
.linkTo-detail>a:nth-child(2){
	background: url(../images/productIcon-bg2.png);
	border-bottom: 1px solid #fff;
}
.linkTo-detail>a:nth-child(3){
	background: url(../images/productIcon-bg3.png);
	border-right: 1px solid #fff;
}
.linkTo-detail>a:nth-child(4){
	background: url(../images/productIcon-bg4.png);
}

/* 分页样式 */
.page {
	margin-top: 2rem;
}
.page li {
	display: inline-block;
	margin: 0 0.25rem;
}
.page li a, .page li span {
	display: block;
	padding: 0.5rem 0.75rem;
	color: #096c38;
	text-decoration: none;
	border: 1px solid #ddd;
	border-radius: 3px;
	min-width: 2rem;
	text-align: center;
}
.page li.active span {
	background-color: #096c38;
	color: white;
	border-color: #096c38;
}
.page li a:hover {
	background-color: #f5f5f5;
	border-color: #096c38;
}

@media only screen and (min-width: 767px) {
	.categories li:hover>a{
		color: #fff;
		background: url(../images/categoryBg.png) no-repeat;
		background-size: 100% 100%;
	}
	.categories>li:hover i.plus::before, .categories>li:hover i.plus::after{
		background: #fff;
	}
	.product-list>div:hover .linkTo-detail{display: block;}
	.linkTo-detail>a:hover{
		background: url(../images/productIcon-active.png);
	}
	.linkTo-detail>a:hover .set-ctn>*{top: -30px;}
	.linkTo-detail>a:hover>h4{color: #fff;}
}
@media only screen and (max-width: 1800px) {
	.product-left{
		width: 22%;
	}
	.product-right{
		width: calc(78% - 3rem);
	}
}
@media only screen and (max-width: 1660px) {
	.product-left{
		width: 24%;
	}
	.product-right{
		width: calc(76% - 3rem);
	}
	.categories>li .plus{right: 0;}
	.categories .active>a, .categories>li>a {
		padding-right: 2rem;
	}
}
@media only screen and (max-width: 1400px) {
	.product-left{
		width: 26%;
	}
	.product-right{
		width: calc(74% - 3rem);
	}
}

@media only screen and (max-width: 767px) {
	.product-left{width: 100%; margin-bottom: 2rem;}
	.product-right{
		padding-left: 0;
		width: 100%;
		float: none;
	}
	.categories>li a{padding-left: 0;}
	.categories>li>a,.categories>li ul{padding-left: .5rem;}
	.categories>li .plus{right: 0;}
	i.plus, i.minus{width: 2rem;}
	.categories .active>a,.categories>li>a{padding-right: 2rem;}
	.categories>li::after{width: 100%;}
	.product-list>div{
		padding: 0;
		height: 12rem;
		width: 48%;
		margin-right: 4%;
	}
	.product-list>div .img>p{
		height: 9rem;
	}
	.product-list>div .img>h3 {
		margin-top: 1rem;
	}

	/* 移动端分页居中 */
	.page {
		text-align: center;
	}
}