@media only screen and (min-width: 996px) {
	.t_pro {
		width: 100%;
	}

	.t_pro_left {
		width: 250px;
		background-color: #fff;
		box-shadow: var(--main-shadow);
	}

	.t_pro_leftout {
		position: sticky;
		top: 20px;
		width: 250px;
		float: left;
	}

	.t_pro_left ul li {
		margin-top: 3px;
		display: flex;
		padding: 10px;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid#efefef;
	}

		.t_pro_left ul li a {
			display: block;
			width: 80%;
			/* width: 100%; */
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			color: var(--main-color-p_color);
		}

		.t_pro_left ul li i {
			transition: var(--main-transition);
			font-size: 22px;
			text-align: center;
		}

	.t_pro_left i {
		font-size: 22px !important;
	}

	.prodrop {
		display: none;
	}

		.prodrop a {
			display: block;
			padding-left: 20px;
			height: 40px;
			width: 80%;
			line-height: 40px;
			font-size: 14px;
			color: var(--main-color-p_color);
		}

	.pro_change {
		transform: rotate(90deg);
	}

	.t_pro_right {
		width: 930px;
		float: right;
	}

		.t_pro_right ul {
			display: flex;
			flex-wrap: wrap;
		}

			.t_pro_right ul li {
				margin-bottom: 25px;
				padding: 10px;
				background-color: #fff;
				width: calc(100% / 4);
			}

				.t_pro_right ul li img {
					width: 100%;
					height: 200px;
					object-fit: contain;
				}

				.t_pro_right ul li p {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					color: var(--main-color-fontColor);
					font-size: 14px;
					margin: 10px 0;
					text-align: center;
				}

	.clear {
		clear: both;
	}
	/* 选中class */
	.active_pro {
		background-color: var(--main-color) !important;
		color: var(--main-color-white) !important;
	}

		.active_pro a {
			color: var(--main-color-white) !important;
		}
	/* 二级默认展开class */
	.active_open {
		display: block;
	}

	.zk_mb {
		display: none;
	}

	.sec_drop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 10px;
		border-bottom: 1px solid#efefef;
	}

	.proarr1 {
		cursor: pointer;
		transition: var(--main-transition);
	}

	.third_drop {
		display: none;
	}

		.third_drop a {
			display: block;
			padding-left: 35px !important;
		}

		.third_drop a {
			border-bottom: 1px solid#efefef;
			width: 100%;
		}
}

@media only screen and (max-width: 996px) {
	.pronav_ul {
		display: none;
	}

	.third_drop a {
		border-bottom: 1px solid#efefef;
	}

	.sec_drop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 10px;
		border-bottom: 1px solid#efefef;
	}

	.proarr1 {
		cursor: pointer;
		transition: var(--main-transition);
	}

	.third_drop {
		display: none;
	}

		.third_drop a {
			display: block;
			padding-left: 35px !important;
		}

	.zk_mb {
		padding: 10px;
		background-color: var(--main-color);
	}

		.zk_mb span {
			color: var(--main-color-white);
			display: flex;
			align-items: center;
		}

			.zk_mb span i {
				margin-right: 15px;
				margin-top: 3px;
			}

	.t_pro {
		width: 100%;
	}

	.t_pro_left {
		width: 100%;
		background-color: #fff;
	}

	.t_pro_leftout {
		/* position: sticky; */
		/* top: 60px; */
		z-index: 20;
		width: 100%;
		box-shadow: var(--main-shadow);
	}

	.t_pro_left ul li {
		display: flex;
		padding: 5px 15px;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid#efefef;
	}

		.t_pro_left ul li a {
			display: block;
			width: 100%;
			height: 40px;
			line-height: 40px;
			font-size: 14px;
			color: var(--main-color-p_color);
		}

		.t_pro_left ul li i {
			transition: var(--main-transition);
			font-size: 22px;
			flex: 1;
			text-align: center;
		}

	.t_pro_left i {
		font-size: 22px !important;
	}

	.prodrop {
		display: none;
	}

		.prodrop a {
			display: block;
			padding-left: 20px;
			height: 40px;
			line-height: 40px;
			font-size: 14px;
			width: 80%;
			color: var(--main-color-p_color);
		}

	.pro_change {
		transform: rotate(90deg);
	}

	.t_pro_right {
		width: 100%;
		margin-top: 25px;
	}

		.t_pro_right ul {
			display: flex;
			flex-wrap: wrap;
		}

			.t_pro_right ul li {
				margin-bottom: 25px;
				padding: 10px;
				background-color: #fff;
				width: 50%;
			}

				.t_pro_right ul li img {
					width: 100%;
					height: 200px;
					object-fit: contain;
				}

				.t_pro_right ul li p {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					color: var(--main-color-fontColor);
					font-size: 14px;
					margin: 10px 0;
					text-align: center;
				}

	.clear {
		clear: both;
	}
	/* 选中class */
	.active_pro {
		background-color: var(--main-color) !important;
		color: var(--main-color-white) !important;
	}

		.active_pro a {
			color: var(--main-color-white) !important;
		}
	/* 二级默认展开class */
	.active_open {
		display: block;
	}
}