body{
	background: #f3f3f3;
}

.list-info{
	margin: 0 auto;
}
.list-info-con{
	display: flex;
	justify-content: space-between;
	background: #ffffff;
	padding: 20px;
	box-sizing: border-box;
	border-radius: 4px;
}

.list-info-images{width: 400px;height:auto;position: relative;}
.show{width: 400px;height: 400px;margin-bottom: 15px;position: relative;border:1px solid #E8E8E8;cursor:move;box-sizing: border-box;}
.show img{width: 100%;height: 100%;}
.mask{width: 215px;height: 215px;background: #000;filter: Alpha(opacity=50);opacity:0.5;position: absolute;top: 0;left: 0;display: none;}
.bigshow{width: 400px;height: 400px;overflow: hidden;border:1px solid #E8E8E8;position: absolute;left: 100%;top: 0;display: none;z-index: 998;}
.bigshow img{width: 100%;height: 100%;margin-right: 10px;}
.smallshow{width: 100%;height: 68px;position: relative;}
.smallshow img{width:100%;border:1px solid #e8e8e8;box-sizing: border-box;}
.smallshow>.middle_box{width:400px;overflow: hidden;height: 68px;}
.smallshow .middle{overflow: hidden;height: 68px;display: flex;justify-content: space-between;width: 400px !important;}
.smallshow .middle>li{width: 68px;height: 68px;cursor:pointer;}
.smallshow>p{position: absolute;top:50%;width: 22px;height: 32px;margin-top: -16px;}
.smallshow>.prev{left: 0;background: url(img/hover-prev.png) no-repeat;transition: all 0.5s}
.smallshow>.next{right: 0;background: url(img/hover-next.png) no-repeat;transition: all 0.5s}
.smallshow>.prev.prevnone{left: 0;background: url(img/prev.png) no-repeat;cursor: not-allowed}
.smallshow>.next.nextnone{right: 0;background: url(img/next.png) no-repeat;cursor: not-allowed}

.list-info-details{
	width: 100%;
	box-sizing: border-box;
	padding-left: 20px;
}

.list-info-details .title{
	font-size: 20px;
	font-weight: bold;
	line-height: 30px;
}
.list-info-details .price{
	font-size: 18px;
	font-weight: 500;
	color: #E83F00;
	margin-top: 15px;
}
.list-info-details .price .unit{
	font-size: 14px;
}
.list-info-details .items{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	font-size: 16px;
	line-height: 32px;
}
.list-info-details .items .label{
	color: #666666;
	padding-right: 20px;
	margin-top: 15px;
}
.list-info-details .items .item{
	margin-right: 10px;
	margin-top: 15px;
}
.list-info-details .items .item:last-child{
	margin-right: 0;
}
.list-info-details .sku .item{
	background: #F6F6F6;
	border: 1px solid #F6F6F6;
	padding: 0 20px;
	border-radius: 4px;
	line-height: 28px;
	font-size: 14px;
	cursor: pointer;
}
.list-info-details .sku .item.on{
	border: 1px solid #10B2E3;
	cursor: unset;
}
.list-info-details .items.nums{
	margin-top: 24px;
}
.list-info-details .items.submit{
	margin-top: 18px;
}
.list-info-details .items.submit .item.cart{
	width: 240px;
	height:52px;
	font-size: 18px;
	font-weight: 600;
	max-width: 40%;
}
.list-info-details .items.submit .item.but{
	width: 240px;
	height:52px;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	max-width: 40%;
}

.list-content{
	margin: 0 auto;
	background: #fff;
	border-radius: 4px;
	margin-top: 20px;
	padding: 0 20px 20px 20px;
	box-sizing: border-box;
}
.list-content-con{
	padding: 20px 0;
}
.list-content img{
	width: auto !important;
	max-width: 100%;
	display: flex;
	margin: 0 auto;
}
.list-content p{
	margin: 0 0;
}
.list-content .el-tabs__header{
	margin-bottom: 0;
}


.list-content .review-container {
    margin: 0 auto;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.list-content .review-container .item{
	border-bottom: 1px solid #f3f3f3;
	padding: 10px 0;
}
.list-content .review-container .user-info {
    display: flex;
    align-items: center;
}

.list-content .review-container .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
}

.list-content .review-container .details h3 {
    margin: 0;
	line-height: 30px;
    font-size: 16px;
}

.list-content .review-container .rating-date {
    color: #999999;
    font-size: 14px;
	line-height: 30px;
}

.list-content .review-container .stars {
    color: gold;
}
.list-content .review-container .review-text{
	padding-left: 46px;
}
.list-content .review-container .review-text p {
    line-height: 1.6;
    padding: 10px 0;
	margin: 0;
}

.list-content .review-container .br{
	display: none;
}

.list-content .review-container .images {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
	padding-left: 46px;
}

.list-content .review-container .images img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    margin-right: 10px;
    border-radius: 4px;
	display: flex;
}

/* 中等屏幕设备（例如平板） */
@media (max-width: 991px) {
	.list-info-con{
		flex-wrap: wrap;
		padding: 20px 10px;
	}
    .list-info-images{
	   width: 100%;
	   max-width: 400px;
	   margin: 0 auto;
	   margin-bottom: 20px;
    }
	.list-content {
	  margin: 0 auto;
	    margin-top: 0px;
	  background: #fff;
	  border-radius: 4px;
	  margin-top: 20px;
	  padding: 0 10px 20px 10px;
	  box-sizing: border-box;
	}
	.list-content-con{
		padding: 10px 0;
	}
	.show{width: 400px;height: unset;margin-bottom: 15px;position: relative;border:1px solid #E8E8E8;cursor:move;box-sizing: border-box;max-width: 100%;}
	.show img{width: 100%;height: unset;display: flex;}
	.mask{width: 215px;height: 215px;background: #000;filter: Alpha(opacity=50);opacity:0.5;position: absolute;top: 0;left: 0;display: none !important;}
	.bigshow{width: 400px;height: 400px;max-width: 100%;overflow: hidden;border:1px solid #E8E8E8;position: absolute;left: 100%;top: 0;display: none;z-index: 998;}
	.bigshow img{width: 100%;height: 100%;margin-right: 10px;}
	.smallshow{width: 100%;height: 48px;position: relative;}
	.smallshow img{width:100%;border:1px solid #e8e8e8;box-sizing: border-box;}
	.smallshow>.middle_box{width:100%;overflow: hidden;height: 48px;}
	.smallshow .middle{overflow: hidden;height: 48px;display: flex;justify-content: space-between;width: 100% !important;max-width: 100%;}
	.smallshow .middle>li{width: 48px;height: 48px;cursor:pointer;}
	.smallshow>p{position: absolute;top:50%;width: 22px;height: 32px;margin-top: -16px;}
	.smallshow>.prev{left: 0;background: url(img/hover-prev.png) no-repeat;transition: all 0.5s}
	.smallshow>.next{right: 0;background: url(img/hover-next.png) no-repeat;transition: all 0.5s}
	.smallshow>.prev.prevnone{left: 0;background: url(img/prev.png) no-repeat;cursor: not-allowed}
	.smallshow>.next.nextnone{right: 0;background: url(img/next.png) no-repeat;cursor: not-allowed}
}

@media (max-width: 768px) {
	.list-info-details{
		padding-left: 0;
	}
	.list-info-details .title{
		font-size: 18px;
		font-weight: bold;
		line-height: 30px;
	}
	.list-info-details .items.submit .item.cart{
		width: 200px;
		height:40px;
		font-size: 16px;
		font-weight: 600;
	}
	.list-info-details .items.submit .item.but{
		width: 200px;
		height:40px;
		color: #fff;
		font-size: 16px;
		font-weight: 600;
	}

	.list-content .review-container .images img {
		width: 100px;
		height: 100px;
	}
	.list-content .review-container .review-text p{
		font-size: 14px;
	}
	
	.list-content .review-container .br{
		display: block;
	}
	
}