.page-member-recharge {
	display: block;
	.recharge-bg {
		display: block;
		width: 100%;
		height: 28vh;
		.head-tit {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40rpx 0;
			.left-line {
				position: relative;
				margin-right: 16rpx;
				padding-right: 6rpx;
				.line {
					width: 60rpx;
					height: 4rpx;
					background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
					opacity: 1;
				}
				.square {
					right: 0;
				}
			}
			.right-line {
				position: relative;
				margin-left: 16rpx;
				padding-left: 6rpx;
				.line {
					width: 60rpx;
					height: 4rpx;
					background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
					opacity: 1;
				}
				.square {
					left: 0;
				}
			}
			.square {
				position: absolute;
				top: -50%;
				display: block;
				width: 4rpx;
				height: 4rpx;
				transform: rotate(45deg);
				overflow: hidden;
				border: 1px solid;
				border-color: #fff;
			}
			.txt {
				font-size: 30rpx;
				font-weight: bold;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
	.recharge-selector {
		margin: 0 40rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 50rpx 30rpx;
		box-sizing: border-box;
		.item {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 160rpx;
			border: 2rpx solid;
			margin-bottom: 50rpx;
			border-radius: 10rpx;
			padding: 0 36rpx;
			box-sizing: border-box;
			.left {
				font-size: 30rpx;
				font-weight: normal;
				.big {
					font-size: 50rpx;
					font-weight: bold;
					padding-right: 4rpx;
				}
			}
			.right {
				margin-right: 36rpx;
				text-align: right;
				.tag {
					color: #fff;
					font-size: 24rpx;
					line-height: 1em;
					padding: 8rpx 16rpx;
					border-radius: 0 20rpx 0 20rpx;
					margin-bottom: 8rpx;
				}
				.scribing-price {
					font-size: 24rpx;
					text-decoration: line-through;
				}
			}
		}
		.item.active {
			.selected-btn {
				position: absolute;
				right: 0;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 46rpx;
				height: 40rpx;
				border-radius: 0 8rpx 0 10rpx;
				&:deep(image) {
					display: block;
					width: 80%;
					height: 80%;
				}
			}
		}
	}
	.confirm {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		.btn {
			display: block;
			width: 90%;
			padding: 26rpx 0;
			line-height: 1em;
			font-size: 32rpx;
			color: #000;
			box-sizing: border-box;
			text-align: center;
			border-radius: 50rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
		}
	}
}
.page-member-recharge.vip1 {
	.recharge-bg {
		background-image: linear-gradient(#D19668, #ffffff);
		background-image: linear-gradient(#D19668, #ffffff);
		.head-tit {
			.txt {
				text-shadow: 0px 1px 0px #AC7042;
			}
		}
	}
	.recharge-selector {
		.item {
			border-color: #E9CF71;
			.right {
				.tag {
					background: #E1B136;
				}
				.scribing-price {
					color: #D1AD6C;
				}
			}
			.selected-btn {
				background: #E1B136;
			}
		}
		.item.active {
			background: #fbf6e2;
		}
	}
	.confirm {
		.btn {
			background: linear-gradient(267deg, #E4BB9C 0%, #C68A5C 100%);
		}
	}
}
.page-member-recharge.vip2 {
	.recharge-bg {
		background-image: linear-gradient(#6F6380, #ffffff);
		.head-tit {
			.txt {
				text-shadow: 0px 1px 0px #66597A;
			}
		}
	}
	.recharge-selector {
		.item {
			border-color: #998DAA;
			.right {
				.tag {
					background: #998DAA;
				}
				.scribing-price {
					color: #6F6380;
				}
			}
			.selected-btn {
				background: #6F6380;
			}
		}
		.item.active {
			background: rgba(156, 144, 173, 0.08);
		}
	}
	.confirm {
		.btn {
			background: linear-gradient(267deg, #9C90AD 0%, #665A78 100%);
		}
	}
}
.page-member-recharge.vip3 {
	.recharge-bg {
		background-image: linear-gradient(#345799, #ffffff);
		.head-tit {
			.txt {
				font-weight: bold;
				color: #FFFFFF;
				text-shadow: 0px 1px 0px #345799;
			}
		}
	}
	.recharge-selector {
		.item {
			border-color: #9AABCC;
			.right {
				.tag {
					background: #345799;
				}
				.scribing-price {
					color: #345799;
				}
			}
			.selected-btn {
				background: #345799;
			}
		}
		.item.active {
			background: rgba(52, 87, 153, 0.06);
		}
	}
	.confirm {
		.btn {
			background: linear-gradient(267deg, #6C8EC5 0%, #36599A 100%);
		}
	}
}
.page-member-recharge.vip4 {
	.recharge-bg {
		background-image: linear-gradient(#1D264D, #ffffff);
		.head-tit {
			.txt {
				text-shadow: 0px 1px 0px #1D264D;
			}
		}
	}
	.recharge-selector {
		.item {
			border-color: #0B133A;
			.right {
				.tag {
					background: #1D264D;
				}
				.scribing-price {
					color: #141A31;
				}
			}
			.selected-btn {
				background: #1D264D;
			}
		}
		.item.active {
			background: rgba(21, 26, 50, 0.05);
		}
	}
	.confirm {
		.btn {
			background: linear-gradient(266deg, #141A32 0%, #080C1C 100%);
		}
	}
}
