* {
	margin: 0px;
	padding: 0px;
	font-family: "微软雅黑";
}

.page {
	width: 100vw;
	height: 100vh;
}

.wraper {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	align-items: center;
}

.header {
	background: rgb(8, 117, 94);
	color: #fff; 
	flex: 0 0 100rpx;
	width: 80%;
	display: flex;
	justify-items: center;
	
	/* 不放大不缩小固定100rpx */
}
.header-item{
	width: fit-content;
	margin: 20rpx;
	border: 2rpx solid #e5e5e5;
	text-align: center; 
	font-size: 36rpx;
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
	background-color: #a8fcfc;
}
.main {

	height: calc(100vh - 200rpx);
	width: 80%;
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: row;
}

.main-left {
	width: 20%;
	background-color: aqua;
}

.main-right {
	width: 80%;
}

.footer {
	position: fixed;
	bottom: 0px;
	width: 80%;
	background: rgb(8, 117, 94);
	color: #fff;
	line-height: 100rpx;
	flex: 0 0 100rpx;

}


.main-scroll {
	right: 0;
	top: 0;
	bottom: 0;
	height: calc(100% - 200rpx);
}


.list-box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.list-item {
	width: calc(50% - 10rpx);
	margin: 10rpx 2rpx;
	border: 2rpx solid #ececec;
	display: flex;
	flex-wrap: none;
	justify-items: center;
}

.list-item-left {
	width: 320rpx;
	height: 320rpx;
}

.list-item-img {
	width: 300rpx;
	height: 300rpx;
	margin: 10rpx;
}

.list-item-right {
	flex: 1;
	background-color: aliceblue;
	padding: 10rpx;
	min-width: 0;
}



.list-item-title {
	font-size: 1.5em;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	word-break: break-all;
}



@media only screen and (max-width: 1200px) {}

@media only screen and (max-width: 980px) {}

@media only screen and (max-width: 640px) {
	.header {
		background: rgb(8, 117, 94);
		color: #fff; 
		flex: 0 0 100rpx;
		width: 100%;
		display: flex;
		justify-items: center;
		
		/* 不放大不缩小固定100rpx */
	}
	.header-item{
		width: fit-content;
		margin: 20rpx;
		border: 2rpx solid #e5e5e5;
		text-align: center; 
		font-size: 36rpx;
		max-height: 80%;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		background-color: #a8fcfc;
	}
	.main {
		width: 100%;
		margin: 0rpx 20rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.main-left,
	.main-right {
		width: 100%;
	}

	.main-scroll {
		position: absolute;
	}

	.footer {
		width: 100%;

	}

	.list-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.list-item {
		width: calc(100% - 5rpx);
		margin-top: 10rpx;
		margin-bottom: 10rpx;

		display: flex;
		flex-wrap: none;
		justify-content: space-around;
	}

	.list-item-left {

		width: 180rpx;
		height: 180rpx;
	}

	.list-item-img {
		width: 160rpx;
		height: 160rpx;
		margin: 10rpx;
	}

	.list-item-right {
		width: calc(100% - 180rpx);
		min-width: 0; 
	}

	.list-item-title {
		font-size: 36rpx;
		font-weight: 600; 
	}
 
}