/* 头部海报 + 导航栏 start */
.top-area {
	position: relative;
	margin-bottom: 4.5%;
	width: 100%;
	height: auto;
}

.top-area .top-bg {
	width: 100%;
}

.top-area .title {
	position: absolute;
	top: 10%;
	left: 0;
	margin: 0 4%;
	width: 92%;
	height: 6%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 2;
}

.more-icon,
.search-icon {
	width: 4.8%;
}

.top-area .title ul {
	margin: 0 2.7%;
	width: 94.6%;
	height: 100%;
	border-right: 1px solid rgba(255, 255, 255, .4);
	display: flex;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
}

.top-area .title ul li {
	margin-right: 8%;
	height: auto;
	font-size: clamp(12px, 3.5vw, 30px);
	line-height: 0.4;
	white-space: nowrap;
}

.top-area .title ul li a {
	color: #FFFFFF;
}

.top-area .title ul li:last-child {
	margin-right: 0;
}

/* 头部海报 + 导航栏 end */

/* 内容区 */
.container>.content {
	margin: 0 4%;
}

/* 酒厂厂志 start */
.logo-area {
	margin-bottom: 5%;
}

.logo-area .title {
	margin-bottom: 2.8%;
	width: 20%;
}

.logo-area ul {
	background-color: #fcfcfd;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.logo-area ul li {
	padding: 3.3%;
	margin-bottom: 2%;
	width: 18%;
	height: auto;
	border-radius: 10px;
	border: 1px solid #f2f2f2;
	box-shadow: 0 0 20px 0 rgba(0, 15, 57, 0.05);
	background-color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo-area ul li a img {
	width: 100%;
}

/* 酒厂厂志 end */

/* 酒界动态/名酒价格//酒类百科 start */
.info-area {
	margin-bottom: 8.2%;
}
.info-area .title {
	margin-bottom: 2.8%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.info-area .title .left-title {
	width: 20%;
}

.info-area .title .right {
	font-size: clamp(12px, 3.2vw, 24px);
	display: flex;
	align-items: center;
}

.info-area .title .right span>a {
	color: #8a9199;
}

.info-area .list {
	margin-bottom: 8%;
	padding: 2% 3.3%;
	background-color: #FFFFFF;
}

.info-area .list li {
	margin-bottom: 3%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.info-area .list li .left {
	flex: 1;
	flex-shrink: 0;
}

.info-area .list li .left .title-left {
	margin-bottom: 2%;
	width: 100%;
	font-size: clamp(16px, 3.7vw, 28px);
	font-weight: 500;
	line-height: 1.5;
	overflow: hidden;
	/* 隐藏超出内容 */
	display: -webkit-box;
	/* 使用Webkit的box模型 */
	-webkit-line-clamp: 2;
	/* 限制显示两行 */
	-webkit-box-orient: vertical;
	/* 设置内容方向为垂直 */
}

.info-area .list li .left .time-left {
	font-size: clamp(12px, 3.5vw, 26px);
	color: #8a9199;
}

.info-area .list li .right-img {
	margin-left: 6.9%;
	width: 38.9%;
}

.info-area .list li .right-img img {
	width: 100%;
}
.info-area.last-ele,
.info-area.last-ele .list {
	margin-bottom: 0;
}
/* 酒界动态/名酒价格/酒类百科 end */

/* 酒品大全 start */
.info-area .wine-list {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.info-area .wine-list ul {
	flex-shrink: 0;
	width: 49%;
}

.info-area .wine-list ul li {
	margin-bottom: 5%;
	width: 100%;
	border-radius: 10px;
	background-color: #FFFFFF;
}

.info-area .wine-list ul li .wine-img {
	width: 100%;
}

.info-area .wine-list ul li .info {
	padding: 5.9%;
}

.info-area .wine-list ul li .info .name {
	margin-bottom: 2%;
	width: 100%;
	font-size: clamp(16px, 3.7vw, 28px);
	color: #171819;
	font-weight: 500;
	overflow: hidden;
	/* 隐藏超出内容 */
	display: -webkit-box;
	/* 使用Webkit的box模型 */
	-webkit-line-clamp: 2;
	/* 限制显示两行 */
	-webkit-box-orient: vertical;
	/* 设置内容方向为垂直 */
}

.info-area .wine-list ul li .info .specs {
	margin-bottom: 2%;
	width: 100%;
	font-size: clamp(14px, 3.2vw, 24px);
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.info-area .wine-list ul li .info .introduce {
	width: 100%;
	font-size: clamp(12px, 2.9vw, 22px);
	overflow: hidden;
	/* 隐藏超出内容 */
	display: -webkit-box;
	/* 使用Webkit的box模型 */
	-webkit-line-clamp: 2;
	/* 限制显示两行 */
	-webkit-box-orient: vertical;
	/* 设置内容方向为垂直 */
}
/* 酒品大全 end */

@media (max-width: 359px) {
	.info-area .title .right img {
		margin-left: 2px;
		width: 5px;
	}
	.info-area .list {
		border-radius: 6px;
	}
}

@media (min-width: 360px) and (max-width: 429px) {
	.info-area .title .right img {
		margin-left: 6px;
		width: 6px;
	}
	.info-area .list {
		border-radius: 8px;
	}
}

@media (min-width: 430px) and (max-width: 749px) {
	.info-area .title .right img {
		margin-left: 8px;
		width: 8px;
	}
	.info-area .list {
		border-radius: 10px;
	}
}

@media (min-width: 750px) {
	.info-area .title .right img {
		margin-left: 10px;
		width: 10px;
	}
	.info-area .list {
		border-radius: 12px;
	}
}