
page {
    background: #f2f3f7;
  }
/* 所有权益栏 */
/* 内容盒子 */
/* 购物积分 */
/* 等级特权 */
/* 特权说明 */
/* 会员商品 */
/* 升级好礼 */
/* 商品包邮 */
/* 会员折扣 */
/* 专属好券 */
/* 生日礼包 */
/* 专属客服 */
.page-member-benefits {
	padding-bottom: env(safe-area-inset-bottom);
	.benefits-icons {
		position: relative;
		padding: 92rpx 0 44rpx;
		color: #fff;
		background: linear-gradient(180deg, #443E3C 0%, #151515 100%);
		width: 2000rpx;
		overflow: hidden;
		.item.active {
			opacity: 1;
		}
		.img {
			width: 80rpx;
			height: 80rpx;
			font-size: 0;
			background: linear-gradient(to bottom, #ebc8a7, #c98e5c);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: auto;
			image {
				width: 44rpx;
				height: 44rpx;
			}
		}
		.text {
			margin-top: 12rpx;
			text-align: center;
			font-size: 26rpx;
		}
	}
	.all-benefits {
		display: flex;
		position: absolute;
		top: 24rpx;
		left: 30rpx;
		height: 32rpx;
		background: rgba(255,255,255,0.13);
		border-radius: 16rpx;
		position: absolute;
		left: 10rpx;
		z-index: 1000;
		.all-benefits-icon {
			display: inline-block;
			width: 32rpx;
			height: 32rpx;
			background-image: url('../../../static/images/v-icon.png');
			border-radius: 50%;
			opacity: 1;
		}
		text {
			font-size: 18rpx;
			transform: scale(0.8);
			font-family: Microsoft YaHei;
			font-weight: 400;
			line-height: 32rpx;
			margin-left: -8rpx;
			color: #FFFFFF;
			opacity: 1;
		}
	}
	.benefits-content {
		position: relative;
		z-index: 2;
		border-radius: 20rpx 20rpx 0 0;
		background: #f2f3f7;
		padding: 30rpx;
		&::before {
			position: absolute;
			top: -8px;
			left: 50%;
			display: block;
			content: " ";
			font-size: 0;
			border: 9px solid transparent;
			border-left: 9px solid #f2f3f7;
			border-top: 9px solid #f2f3f7;
			border-radius: 2px;
			-webkit-transform: translateX(-50%) rotate( 45deg );
			transform: translateX(-50%) rotate( 45deg );
		}
		.tit {
			font-size: 32rpx;
			font-weight: 600;
			padding: 40rpx 0 20rpx;
		}
	}
	.benefits-img {
		padding: 30rpx;
		border-radius: 10rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		height: 106rpx;
		.bg {
			position: absolute;
			top: 0;
			right: 0;
			width: 198rpx;
			height: 166rpx;
		}
		.text-box {
			.text {
				font-size: 36rpx;
				font-weight: 600;
			}
			.des {
				font-size: 28rpx;
				margin-top: 12rpx;
			}
		}
		.img {
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			font-size: 0;
			position: relative;
		}
	}
	.benefits-integral {
		.benefits-img {
			background: linear-gradient(to right, #fe7e00, #e33e15);
			border-radius: 10rpx 10rpx 0 0;
			.text {
				font-size: 28rpx;
			}
			.number {
				margin-top: 12rpx;
				font-size: 30rpx;
				font-weight: 600;
				.num {
					font-size: 44rpx;
					margin-right: 4rpx;
				}
			}
		}
		.integral-des {
			padding: 26rpx 30rpx;
			background: #fff;
			border-radius: 0 0 10rpx 10rpx;
			font-size: 28rpx;
			line-height: 46rpx;
		}
	}
	.level-benefits {
		background: #fff;
		border-radius: 10rpx;
		.item {
			&:nth-child(even) {
				background: rgba(253, 248, 242, 0.15);
			}
			&:nth-child(odd) {
				background: rgba(226, 195, 155, 0.15);
			}
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #f9f9f9;
			&:last-child {
				border: 0;
			}
			.level-name {
				width: 50%;
				padding: 20rpx 0;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				color: #755A36;
				opacity: 1;
				position: relative;
				&::after {
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					display: block;
					width: 2rpx;
					content: " ";
					font-size: 0;
					background: #FFFFFF;
					opacity: 0.5;
				}
			}
			.text {
				width: 50%;
				padding: 20rpx 0;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				color: #755A36;
				opacity: 1;
				position: relative;
			}
			.tittle {
				font-size: 28rpx;
				font-family: PingFang SC;
				background-color: #D5B59A;
				font-weight: bold;
				text-align: center;
				color: #755A36;
				opacity: 1;
				position: relative;
			}
		}
	}
	.benefits-explain {
		font-size: 22rpx;
		padding: 10rpx 24rpx 28rpx 30rpx;
		background: #FDF8F2;
		opacity: 1;
		border-radius: 10rpx;
		color: #666;
		text-align: justify;
		.item {
			line-height: 32rpx;
			padding: 14rpx 0;
			color: #755A36;
		}
	}
	.member-goods {
		.goods-box {
			background: #FDF8F2;
			opacity: 1;
			padding: 24rpx 24rpx 28rpx 24rpx;
			border-radius: 10rpx 10rpx 0 0;
			.goods-box-title {
				font-size: 28rpx;
				font-family: PingFang SC;
				padding-bottom: 12rpx;
				font-weight: bold;
				line-height: 40rpx;
				color: #755A36;
				opacity: 1;
			}
			.goods-box-fuTitle {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #755A36;
				opacity: 0.8;
			}
			.item {
				.img {
					width: 190rpx;
					height: 190rpx;
					font-size: 0;
					border-radius: 10rpx;
					overflow: hidden;
				}
				.price {
					justify-content: center;
					font-weight: 600;
					margin-top: 16rpx;
				}
			}
		}
		.btn-box {
			background: #fff;
			border-radius: 0 0 10rpx 10rpx;
			padding-bottom: 36rpx;
			.btn {
				width: 400rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 70rpx;
				color: #fff;
				margin: auto;
				background: #fc1b35;
				font-size: 26rpx;
				font-weight: 600;
				text-align: center;
			}
		}
	}
	.upgrade-gifts {
		.benefits-img {
			background: linear-gradient(to right, #2164fb, #2732c0);
		}
	}
	.free-shipping {
		.benefits-img {
			background: linear-gradient(to right, #542183, #421c78);
		}
	}
	.member-discount {
		.benefits-img {
			background: linear-gradient(to right, #4c2a1f, #200f09);
		}
	}
	.exclusive-coupon {
		.coupons-box {
			.item {
				display: flex;
				background: #fff;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				position: relative;
				overflow: hidden;
				&::before {
					position: absolute;
					left: 130rpx;
					display: block;
					width: 20rpx;
					height: 20rpx;
					content: " ";
					background: #f2f3f7;
					border-radius: 50%;
					top: -10rpx;
				}
				&::after {
					position: absolute;
					left: 130rpx;
					display: block;
					width: 20rpx;
					height: 20rpx;
					content: " ";
					background: #f2f3f7;
					border-radius: 50%;
					bottom: -10rpx;
				}
				&:last-child {
					margin-bottom: 0;
				}
				.price {
					padding: 10rpx;
					background: linear-gradient(to right, #fc1b35, #f45c43);
					font-weight: 600;
					color: #fff;
					width: 120rpx;
					height: 100rpx;
					line-height: 100rpx;
					justify-content: center;
					.big {
						font-size: 40rpx;
					}
				}
				.text-box {
					flex: 1;
					padding: 20rpx 20rpx 20rpx 30rpx;
					align-self: center;
					.name {
						font-size: 28rpx;
						font-weight: 600;
					}
					.des {
						margin-top: 12rpx;
						color: #999;
					}
				}
				.btn {
					margin-right: 24rpx;
					padding: 10rpx 30rpx;
					border: 2rpx solid #fc1b35;
					color: #fc1b35;
					border-radius: 60rpx;
					align-self: center;
				}
			}
		}
	}
	.birthday-gift {
		.benefits-img {
			background: linear-gradient(to right, #fe1947, #f80105);
		}
		.get-btn {
			margin: 30rpx auto 0;
			width: 560rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 88rpx;
			color: #fff;
			text-align: center;
			font-size: 28rpx;
			font-weight: 600;
			background: #fc1b35;
		}
	}
	.exclusive-service {
		.benefits-img {
			background: linear-gradient(to right, #212740, #111628);
		}
	}
  .benefits-icons {
    .item {
      display: inline-block;
      width: 160rpx;
      margin-right: 22rpx;
      margin-left: 22rpx;
      opacity: .6;
    }
  }
}

