.page-detail {
	background: #f2f3f7;
	padding-bottom: 130rpx;
	padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
  min-height: calc(100vh - 130rpx + env(safe-area-inset-bottom));
	.det-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
		background: #fefefe;
		box-shadow: 0 0 5px rgba(0,0,0,.1);
		.item {
			padding: 0 30rpx;
			position: relative;
			&::after {
				position: absolute;
				bottom: -10rpx;
				left: 28%;
				right: 28%;
				display: block;
				width: auto;
				height: 4rpx;
				border-radius: 4rpx;
				content: " ";
				font-size: 0;
				background: #fff;
			}
		}
		.item.active {
			font-weight: 600;
			&::after {
				background: linear-gradient(to right, #fc1b35, #fff);
			}
		}
	}
	/* 直播按钮 */
  .live {
    position: fixed;
    top: 200rpx;
    right: 30rpx;
    padding: 16rpx 10rpx;
    background: rgba(255, 2550, 255, .8);
    border: 1rpx solid #eee;
    border-radius: 20rpx;
		z-index: 100;
		.live-txt {
			font-size: 26rpx;
			color: #fc1640;
			margin-top: 16rpx;
			line-height: 1em;
		}
  }
	.pic-box {
		width: 750rpx;
		height: 750rpx;
		font-size: 0;
		background: #fff;
	}
	.activity-bar {
		background: #ffeff1;
		display: flex;
		align-items: center;
		position: relative;
		.bar-left {
			flex: 1;
			display: flex;
			align-items: center;
			background: linear-gradient(to right, #ff1a49, #f1091d);
			border-radius: 20rpx;
			padding: 8rpx 40rpx 16rpx 20rpx;
			position: relative;
			.price-box {
				flex: 1;
				margin-right: 10rpx;
				line-height: 1;
				.dis-price {
					display: flex;
					align-items: flex-end;
					.price {
						font-size: 26rpx;
						color: #fff;
						font-weight: 600;
						.big {
							font-size: 40rpx;
						}
					}
					.dis-number {
						padding: 0 8rpx;
						background: rgba(0, 0, 0, .12);
						border-radius: 30rpx;
						color: #fff;
						font-size: 18rpx;
						height: 24rpx;
						line-height: 24rpx;
						margin-left: 10rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.old-price {
					margin-top: 2rpx;
					font-family: PingFangSC-Medium, tahoma;
					color: #fff;
					font-size: 20rpx;
					display: flex;
					margin-left: 6rpx;
					opacity: .7;
					.price {
						text-decoration: line-through;
						color: #fff;
						margin-left: -4rpx;
					}
				}
			}
			.sold {
				color: #fff;
				font-size: 20rpx;
				text-align: center;
				font-family: PingFangSC-Medium, tahoma;
				.progress-bar {
					background: #fff;
					border-radius: 30rpx;
					height: 6rpx;
					padding: 4rpx 6rpx;
					width: 100rpx;
					margin: 6rpx auto 0;
					.bar {
						background: #fc1b35;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}
		}
		.time-box {
			padding: 0 30rpx;
			color: #fc1b35;
			text-align: center;
			font-size: 20rpx;
			font-weight: 600;
			font-family: PingFangSC-Medium, tahoma;
			.time {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 4rpx;
				.num {
					min-width: 24rpx;
					padding: 0 4rpx;
					height: 32rpx;
					line-height: 32rpx;
					text-align: center;
					background: #fc1b35;
					color: #fff;
					border-radius: 8rpx;
				}
				.colon {
					height: 32rpx;
					line-height: 32rpx;
					margin: 0 6rpx;
				}
			}
		}
	}
	.name-box {
		background: #fff;
		padding: 20rpx 30rpx;
		.name {
			font-size: 28rpx;
			font-weight: 600;
			word-break: break-word;
		}
		.discount-info {
			color: #999;
			margin-top: 10rpx;
			word-break: break-word;
			.text-arrow {
				display: inline-block;
				color: #fc1b35;
				padding-right: 16rpx;
				&::after {
					border-top: 2rpx solid #fc1b35;
					border-right: 2rpx solid #fc1b35;
				}
			}
		}
		.action-box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 20rpx;
			margin-bottom: 10rpx;
			.price-box {
				flex: 1;
				display: flex;
				align-items: center;
				.marketPriceFee {
					text-decoration: line-through;
					font-size: 24rpx;
					color: #999;
					margin-left: 20rpx;
					font-weight: normal;
				}
				.price {
					font-size: 28rpx;
					font-weight: 600;
					margin-right: 20rpx;
				}
				.big {
					font-size: 44rpx;
				}
				.activity-icon {
					color: #fc1b35;
					margin-right: 20rpx;
					border: 2rpx solid #fc1b35;
					padding: 0rpx 16rpx;
					border-radius: 40rpx;
				}
				.presale-icon {
					color: #fc1b35;
					margin-right: 20rpx;
					border: 2rpx solid #fc1b35;
					padding: 0rpx 16rpx;
					border-radius: 40rpx;
					border-radius: 0;
				}
				.only-left {
					margin-left: 0;
				}
				.stock {
					color: #999;
					margin-top: 10rpx;
				}
			}
			.price-box.activitys {
				.stock {
					margin-top: 0;
				}
			}
			.actions {
				display: flex;
				align-items: center;
				margin-right: 10rpx;
				margin-bottom: -4rpx;
				.item {
					margin-left: 30rpx;
					text-align: center;
					.img {
						width: 32rpx;
						height: 32rpx;
						font-size: 0;
						margin: auto;
					}
					.text {
						font-size: 20rpx;
						margin-top: 6rpx;
					}
				}
			}
			.price-box.presale {
				.presale-icon {
					margin-top: 10rpx;
					border-radius: 40rpx;
				}
			}
		}
		.presale-steps {
			.tip {
				margin-left: 40rpx;
				color: #999;
			}
		}
		.presale-price {
			display: flex;
			font-size: 28rpx;
			font-weight: 600;
			color: #fc1b35;
			align-items: center;
		}
	}
	.det-con {
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		.item {
			display: flex;
			align-items: flex-start;
			margin-top: 24rpx;
			line-height: 32rpx;
			&:first-child {
				margin-top: 0;
			}
			.tit {
				font-weight: 600;
				margin-right: 30rpx;
				white-space: nowrap;
			}
			.con {
				flex: 1;
				padding-right: 50rpx;
				position: relative;
				&::after {
					position: absolute;
					top: -6rpx;
					right: 0;
					display: block;
					content: "…";
					font-size: 28rpx;
					line-height: 1;
					color: #999;
					font-family: PingFangSC-Medium, tahoma;
				}
			}
			.con.distribution-con {
				&::after {
					display: none;
				}
			}
			.delivery-con {
				flex: 1;
				display: flex;
				padding-right: 54rpx;
				flex-direction: column;
				.delivery-tip {
					margin-bottom: 8rpx;
				}
				.addr-tip {
					width: 100%;
					color: #666666;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
				}
			}
		}
		.coupons-con {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: -10rpx;
			.c-item {
				font-size: 20rpx;
				color: #fc1b35;
				background: #ffebed;
				height: 24rpx;
				line-height: 24rpx;
				padding: 4rpx 14rpx;
				border-radius: 10rpx;
				margin: 0 10rpx 10rpx 0;
				position: relative;
				&::before {
					position: absolute;
					top: 50%;
					display: block;
					width: 12rpx;
					height: 12rpx;
					content: " ";
					font-size: 0;
					background: #fff;
					border-radius: 12rpx;
					transform: translateY(-50%);
					left: -6rpx;
				}
				&::after {
					position: absolute;
					top: 50%;
					display: block;
					width: 12rpx;
					height: 12rpx;
					content: " ";
					font-size: 0;
					background: #fff;
					border-radius: 12rpx;
					transform: translateY(-50%);
					right: -6rpx;
				}
			}
		}
		.discount-con {
			margin-bottom: -16rpx;
			.d-item {
				margin-bottom: 10rpx;
				line-height: 32rpx;
				font-size: 22rpx;
				display: flex;
				.d-tag {
					font-size: 20rpx;
					color: #fc1b35;
					background: #ffebed;
					border-radius: 4rpx;
					padding: 0 8rpx;
					margin-right: 10rpx;
					display: inline-block;
					vertical-align: top;
					height: 28rpx;
					line-height: 28rpx;
					margin-top: 4rpx;
					word-break: keep-all;
				}
				.d-name {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-word;
				}
			}
		}
		.distribution-con {
			display: flex;
			align-items: center;
			.dis-item {
				margin-right: 20rpx;
				position: relative;
				.dis-item-icon {
					display: inline-block;
					position: relative;
					width: 14rpx;
					height: 14rpx;
					border: 2rpx solid #fc1b35;
					border-radius: 50%;
					margin-right: 10rpx;
					&::before {
						display: block;
						content: '';
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						width: 6rpx;
						height: 6rpx;
						background: #fc1b35;
						border-radius: 50%;
						position: absolute;
					}
				}
			}
		}
	}
	.group-box {
		.g-tit {
			font-weight: 600;
		}
		.g-con {
			padding: 30rpx 0;
			box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, .01);
			.item {
				align-items: center;
				.img {
					width: 80rpx;
					height: 80rpx;
					font-size: 0;
					border-radius: 50%;
					overflow: hidden;
				}
				.text {
					margin-left: 20rpx;
					flex: 1;
					.num-time {
						display: flex;
						align-items: center;
						margin-top: 6rpx;
						font-size: 20rpx;
						.num {
							color: #fc1b35;
						}
						.time {
							color: #999;
						}
					}
				}
				.btn {
					padding: 8rpx 20rpx;
					background: linear-gradient(135deg, #ff1a49, #f1091d 69%, #fc1b35);
					color: #fff;
					border-radius: 50rpx;
				}
			}
		}
		.rule {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 30rpx;
			.tit {
				font-weight: 600;
			}
			.text-arrow {
				padding-right: 30rpx;
			}
		}
	}
	.btn-box {
		.btn-disable {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 8rpx 20rpx;
			background-color: #eeeeee;
			color: #999;
			border-radius: 50rpx;
			font-size: 26rpx;
		}
	}
	.comment-box {
		padding: 30rpx;
		background: #fff;
		margin-top: 30rpx;
		border-radius: 10rpx;
		.c-tit {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.text {
				display: flex;
				align-items: baseline;
				font-weight: 600;
				.small {
					margin-left: 10rpx;
					font-size: 20rpx;
				}
			}
			.more {
				font-size: 20rpx;
				color: #999;
			}
		}
		.c-tags {
			white-space: nowrap;
			.item {
				display: inline-block;
				padding: 6rpx 16rpx;
				border-radius: 40rpx;
				font-size: 20rpx;
				background: #ffebed;
				margin: 20rpx 0 0 20rpx;
				&:first-child {
					margin-left: 0;
				}
			}
			.item.active {
				color: #fc1b35;
			}
		}
		.c-con {
			.item {
				padding: 30rpx 0;
				box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, .01);
				&:last-child {
					box-shadow: none;
				}
				.user-box {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.info {
						display: flex;
						align-items: center;
						margin-right: 30rpx;
						.img {
							width: 50rpx;
							height: 50rpx;
						}
						.text {
							margin-left: 10rpx;
							.name {
								font-weight: 600;
							}
							.sku-name {
								color: #999999;
								margin-top: 10rpx;
							}
						}
					}
					.time {
						color: #999;
						font-size: 20rpx;
					}
					.sku {
						padding-left: 20rpx;
						margin-left: 20rpx;
						position: relative;
						color: #999;
						font-size: 20rpx;
					}
				}
				.stars {
					display: flex;
					align-items: center;
					margin-right: 60rpx;
					padding: 20rpx 0;
					.star {
						width: 20rpx;
						height: 20rpx;
						font-size: 0;
						margin-right: 6rpx;
						&:last-child {
							margin-right: 0;
						}
					}
				}
				.star-box {
					.sku {
						&::before {
							position: absolute;
							left: 0;
							top: 20%;
							bottom: 20%;
							display: block;
							width: 2rpx;
							height: auto;
							content: " ";
							font-size: 0;
							background: #eee;
						}
					}
				}
				.comment-text {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-word;
				}
				.comment-page-detail {
					word-break: break-word;
				}
				.comment-img {
					margin-top: 20rpx;
					padding: 0 10rpx;
					.img-box {
						white-space: nowrap;
						.img {
							display: inline-block;
							width: 80px;
							height: 80px;
							font-size: 0;
							margin-left: 5px;
							&:first-child {
								margin-left: 0;
							}
						}
					}
				}
			}
		}
		.c-btn {
			display: flex;
			justify-content: center;
			.view-all {
				padding: 12rpx 40rpx 12rpx 26rpx;
				border: 2rpx solid #ddd;
				border-radius: 60rpx;
			}
			.view-all.text-arrow {
				&::after {
					right: 26rpx;
				}
			}
		}
	}
	.shop-box {
		padding: 30rpx;
		background: #fff;
		margin-top: 30rpx;
		border-radius: 10rpx;
		.shop-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.info {
				display: flex;
				align-items: center;
				flex: 1;
				.img {
					width: 80rpx;
					height: 80rpx;
					font-size: 0;
					border-radius: 50%;
					overflow: hidden;
				}
				.text {
					margin-left: 20rpx;
					flex: 1;
					.name {
						font-weight: 600;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-right: 10rpx;
					}
					.focus-box {
						display: flex;
						align-items: center;
						margin-top: 10rpx;
						font-size: 20rpx;
						.self {
							padding: 2rpx 6rpx;
							line-height: 20rpx;
							color: #fff;
							background: #fc1b35;
							border-radius: 4rpx;
							margin-right: 10rpx;
							font-size: 18rpx;
						}
						.focus {
							color: #999;
						}
					}
				}
			}
			.go-shop {
				color: #fc1b35;
				border: 2rpx solid #fc1b35;
				padding: 6rpx 16rpx;
				border-radius: 40rpx;
				font-size: 20rpx;
				margin-top: 6rpx;
			}
		}
		.shop-recommend {
			.prods {
				padding: 0;
			}
			.prods-box {
				white-space: nowrap;
				.item {
					display: inline-block;
					margin-left: 10rpx;
					margin-top: -9rpx;
					width: 220rpx;
					&:first-child {
						margin-left: 0;
					}
					.img {
						width: 220rpx;
						height: 220rpx;
					}
					.text-box {
						padding: 0;
					}
					.price-box {
						.price {
							justify-content: center;
							.big {
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
	}
	.det-det {
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		word-break: break-word;
		.tit {
			font-weight: 600;
		}
		.con {
			margin-top: 20rpx;
			.img {
				max-width: 690rpx;
				font-size: 0;
			}
		}
	}
	.det-foot {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		max-width: 750rpx;
		margin: auto;
		height: calc(100rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		padding: 0 30rpx env(safe-area-inset-bottom);
		display: flex;
		align-items: center;
		background: #fff;
		box-shadow: -4rpx 0 4rpx rgba(0,0,0,.05);
		border-radius: 10rpx 10rpx 0 0;
		z-index: 200;
		.actions {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-left: -10rpx;
			.item {
				text-align: center;
				padding: 0 20rpx;
				.img {
					width: 36rpx;
					height: 36rpx;
					font-size: 0;
					margin: auto;
					position: relative;
					.mark {
						position: absolute;
						top: -8rpx;
						left: 50%;
						min-width: 22rpx;
						padding: 0 2rpx;
						height: 26rpx;
						line-height: 26rpx;
						border-radius: 26rpx;
						background: #fc1b35;
						color: #fff;
						font-size: 18rpx;
						margin-left: 6rpx;
					}
				}
				.text {
					font-size: 18rpx;
					text-align: center;
					margin-top: 6rpx;
				}
			}
		}
		.btns {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			text-align: center;
			.btn {
				flex: 1;
				margin-left: 20rpx;
				height: 70rpx;
				line-height: 70rpx;
				color: #fff;
				background: linear-gradient(135deg, #ffc30d, #ffba0d 69%, #ffc30d);
				border-radius: 70rpx;
				font-weight: 600;
				font-size: 26rpx;
				.price {
					color: #fff;
					font-size: 20rpx;
					font-weight: 400;
					justify-content: center;
					line-height: 28rpx;
					margin-top: 10rpx;
					.big {
						font-size: 28rpx;
					}
				}
				.text {
					font-size: 22rpx;
					font-weight: 400;
					line-height: 22rpx;
				}
			}
			.btn.btn-r {
				background: linear-gradient(135deg, #ff1a49, #f1091d 69%, #fc1b35);
			}
			.btn.btn-r.gary {
				background: #aaa;
			}
			.pay-deposit {
				display: flex;
				flex-direction: column;
				justify-content: center;
				line-height: normal;
				.price {
					display: flex;
					justify-items: center;
					margin-top: 0;
				}
			}
			.btn.btn-r.pay-deposit-disabled {
				background: #666;
			}
		}
	}
	.presale-steps {
		.title {
			margin-left: 10rpx;
			font-size: 20rpx;
			color: black;
		}
		&::v-deep {
			.uni-steps__row {
				margin: 10rpx -50rpx;
				flex-direction: column-reverse;
			}
		}
	}
	.presale-price {
		.price-tab {
			border: 2rpx solid #fc1b35;
			padding: 2rpx 4rpx;
			font-size: 16rpx;
			font-weight: 400;
			border-radius: 8rpx;
			margin-left: 10rpx;
		}
	}
	.me-presale-icon {
		color: #fc1b35;
		margin-right: 20rpx;
		border: 2rpx solid #fc1b35;
		padding: 5rpx 16rpx;
		display: inline-block;
	}
	.popup {
		.popup-con-bottom {
			.btn-box {
				.pay-deposit-disabled {
					background: #666;
				}
				.pay-deposit {
					line-height: normal;
					.price {
						color: #fff;
						justify-content: center;
					}
				}
        .img {
          width: 100%;
        }
			}
		}
		.check-sku {
			.check-sku-con {
				.prod-number {
					margin-top: 20rpx;
				}
				.item-tit {
					margin-top: 0;
				}
			}

			.check-sku-con {
				height: calc(100% - 330rpx);
				box-sizing: border-box;
				padding: 0 30rpx;

				:deep(.uni-scroll-view-content){
					height: auto;
				}

				.prod-number {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.number-box {
						display: flex;
						align-items: center;
						font-family: PingFangSC-Medium, tahoma;
						font-weight: 600;
						text-align: center;
					}
				}

				.item-tit {
					font-weight: 600;
				}

				.number-box {
					.minus {
						background: #f2f2f2;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 50%;
						position: relative;
						&::after {
							position: absolute;
							left: 50%;
							top: 45%;
							display: block;
							transform: translate(-50%,-50%);
							font-size: 26rpx;
							content: "-";
						}
					}
					.plus {
						background: #f2f2f2;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 50%;
						position: relative;
						&::after {
							position: absolute;
							left: 50%;
							top: 45%;
							display: block;
							transform: translate(-50%,-50%);
							font-size: 28rpx;
							content: "+";
						}
					}
					.limit {
						opacity: 0.7;
						&::after {
							color: #ccc;
						}
					}
					.number {
						width: 70rpx;
						padding: 0 10rpx;
					}
				}

        .delivery {
          margin-top: 30rpx;

          .item-box {
            display: flex;
            padding: 20rpx 0;

            .tag {
              width: 140rpx;
              height: 55rpx;
              line-height: 55rpx;
              text-align: center;
              border-radius: 30rpx;
              background-color: #f5f5f5;
              margin-right: 30rpx;
            }

            .tag.active {
              background-color: #FFF;
              color: #f81a1a;
              border: 1px solid #F81A1A;
            }

            .tag.disabled {
              background-color: #f5f5f5 !important;
              border: 1px solid #f5f5f5 !important;
              color: #999;
            }
          }
        }
			}
		}
	}
  .video-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 750rpx;
    justify-content: center;
    align-items: center;
    background: #000;
    z-index: 10;
  }
  video {
    display: block;
    width: 100%;
  }
  .play-btn {
    position: absolute;
    left: 50%;
    bottom: 12%;
    padding: 2rpx;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 50rpx;
    color: #000;
    font-size: 24rpx;
    text-align: center;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 15;
  }
  .play-icon {
    width: 50rpx;
    height: 50rpx;
  }
  .play-text {
    padding-right: 10rpx;
    margin: 0 10rpx;
  }
  .video-stop {
    padding: 2rpx 8rpx;
  }
  .cmt-more {
    width: 10rpx;
    height: 10rpx;
    border-top: 2rpx solid #999;
    border-right: 2rpx solid #999;
    transform: rotate(45deg);
    margin-left: 10rpx;
    display: inline-block;
  }
  .prod-brief {
    position: relative;
    font-size: 24rpx;
    width: 550rpx;
    margin-top: 16rpx;
    color: #999999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .right {
      background: linear-gradient(270deg, rgba(255,255,255,1)0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
      top: -6rpx;
      right: 0;
      padding: 4rpx 4rpx 4rpx 8rpx;
      position: absolute;
      .cmt-more {
        border-top: none;
        border-bottom: 2rpx solid #999;
        border-right: 2rpx solid #999;
        transform: rotate(45deg);
      }
    }
  }
  .integral {
    width: 690rpx;
  }
  .prod-brief.weixin-prod-brief {
    word-break: break-all;
    line-break: anywhere;
    text-overflow: clip;
  }
  .prod-brief.brief-unfold {
    white-space: break-spaces;
  }
  .share-collect {
    font-size: 28rpx;
    display: flex;
    box-sizing: border-box;
    border-top: 1px solid #F1F1F1;
    overflow: hidden;
    height: 72rpx;
    background: #fff;
    width: 100%;
    margin: 0 auto 24rpx;
    border-radius: 0 0 12rpx 12rpx;
    .icon {
      margin-right: 10rpx;
      width: 32rpx;
      height: 32rpx;
    }
    .left {
      color: #999999;
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff !important;
      border-right: 1rpx solid #F1F1F1;
    }
    .right {
      color: #999999;
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .delivery-box {
    max-width: 750rpx;
    position: fixed;
    bottom: calc(100rpx + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333333;
    opacity: 0.8;
    color: #fff;
    padding: 10rpx 24rpx;
    .btn {
      padding: 12rpx;
      border: 1px solid #fff;
      border-radius: 8rpx;
    }
  }
  .comment-popup {
    position: fixed;
    top: 100%;
    bottom: calc(100rpx + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    max-width: 750rpx;
    margin: auto;
    background: #f2f3f7;
    z-index: 190;
    .comment-con {
      transform: translateX(100%);
      transition: all .3s;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      -webkit-overflow-scrolling: touch;
      &::after {
        min-height: calc(100% + 2rpx);
      }
    }
    .comment-box.comment-con {
      margin-top: 0;
      padding: 0;
      background: #f2f3f7;
      .c-tit {
        margin-top: 88rpx;
        padding: 30rpx 30rpx 0rpx;
        background: #fff;
        margin-top: 0;
      }
      .c-tags {
        padding: 0 30rpx 30rpx;
        box-sizing: border-box;
        background: #fff;
        border-radius: 0 0 10rpx 10rpx;
      }
      .c-con {
        padding: 0 20rpx;
        border-radius: 10rpx 10rpx 0 0;
        margin-top: 30rpx;
        background: #fff;
        height: 100%;
        box-sizing: border-box;
        .c-btn {
          padding: 40rpx 0;
        }
      }
    }
    .top-bar {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      background: #fff;
      height: 88rpx;
      box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, .01);
      z-index: 199;
      .arrow {
        position: absolute;
        top: 50%;
        left: 30rpx;
        width: 16rpx;
        height: 16rpx;
        border: 2rpx solid #333;
        border-width: 2rpx 0 0 2rpx;
        transform: rotate(-45deg);
      }
      .text {
        text-align: center;
        line-height: 88rpx;
        font-size: 32rpx;
        margin: 0 70rpx;
        font-weight: 600;
      }
    }
  }
  .comment-popup.show {
    top: 0;
    .comment-con {
      transform: translateX(0);
    }
  }
  .stock {
    color: #999;
    margin-left: 10rpx;
  }
  .sku-not-found {
    color: #999;
    margin-left: 10rpx;
    margin-top: 20rpx;
  }
  .virtual-goods-tips {
    display: block;
    background: #F9F9F9;
    padding: 10px;
    color: #999999;
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.5em;
  }
  .promo-con {
    position: fixed;
    bottom: 200rpx;
    right: 40rpx;
    .earn {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #FC1B35;
      box-shadow: 1px 2px 6px rgba(78, 78, 78, 0.4);
      color: #fff;
      border-radius: 50%;
      width: 80rpx;
      height: 80rpx;
      line-height: 1em;
      font-size: 32rpx;
      text-align: center;
      border: 1rpx solid transparent;
    }
  }
  .share {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 1px 2px 6px rgba(78, 78, 78, 0.4);
    border-radius: 50%;
    width: 80rpx;
    height: 80rpx;
    padding: 0;
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .promo-share {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    z-index: 998;
    .share-img {
      margin: 80rpx auto 0;
      border-radius: 24rpx;
      display: block;
    }

		.picture-img{
			position: fixed;
			left: 75rpx;
			top: 75rpx;
			width: 600rpx;
			height: 850rpx;
		}
  }
  .promo-tit {
    text-align: center;
    margin-top: 25rpx;
    title {
      font-size: 32rpx;
      color: #333333;
      line-height: 37.5rpx;
      display: inline-block;
    }
  }
  #myCanvas {
    position: fixed;
    top: 1000000px;
  }
  .promo-main {
    background: #f0f0f0;
    position: absolute;
    bottom: 0rpx;
    width: 100%;
    max-height: 400rpx;
    z-index: 9999;
    border-radius: 30rpx 30rpx 0 0;
  }
  .promo-icons-close {
    image {
      width: 45rpx;
      height: 45rpx;
      float: right;
      padding-right: 20rpx;
      padding-top: 20rpx;
    }
  }
  .promo-close {
    font-size: 32rpx;
    width: 100%;
    color: #333333;
    line-height: 37.5rpx;
    text-align: center;
    padding: 32rpx 0;
    border-top: 1rpx solid #D8D8D8;
  }
  .promo-desc {
    margin-left: 73rpx;
    width: 600rpx;
    text-align: center;
    text {
      padding: 20rpx;
      font-size: 20rpx;
      color: #999;
      line-height: 34rpx;
      display: inline-block;
    }
  }
  .promo-icons {
    font-size: 20rpx;
    color: #666;
    display: flex;
    justify-content: space-around;
    margin-top: 10rpx;
    padding: 0 150rpx;
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .promo-img1-icon {
    background-color: #fff;
    border-radius: 8rpx;
    padding: 20rpx;
    display: flex;
  }
  .promo-img1 {
    display: flex;
    flex-flow: column;
    align-items: center;
    line-height: 60rpx;
    font-size: 22rpx;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    &::after {
      border: 0;
    }
  }
  .promo-tit1 {
    font-size: 36rpx;
    padding: 30rpx 0;
    font-weight: bold;
  }
  .promo-btn {
    font-size: 28rpx;
    width: 90%;
    height: 80rpx;
    border: 1px #e5e5e5 solid;
    text-align: center;
    line-height: 80rpx;
    margin-left: 40rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
  }
  .code-popup {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
  .code-main {
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    width: 500rpx;
    height: 700rpx;
  }
  .close-png {
    width: 50rpx;
    height: 50rpx;
    margin-top: -10rpx;
  }
  .code-v {
    padding: 20rpx;
    border-radius: 6rpx;
    background: #fff;
  }
  .wx-code {
    width: 460rpx;
    height: 460rpx;
  }
  .close-v {
    text-align: right;
    height: 60rpx;
  }
  .code-txt {
    margin-top: 20rpx;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
    background: #3a86b9;
    border-radius: 6rpx;
    height: 80rpx;
    line-height: 80rpx;
  }
  .guide-share-mask {
    position: fixed;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 11111;
    .mask {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
    }
    .guide-share-close {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      top: 40rpx;
      left: 40rpx;
      z-index: 99;
      >image {
        width: 100%;
        height: 100%;
      }
    }
    .guide-content {
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      width: 100%;
      height: auto;
      .share-img {
        display: block;
        width: 400rpx;
        height: 400rpx;
        margin-top: 60rpx;
        margin-bottom: 30rpx;
        margin-left: 35%;
      }
    }
  }
  .guide-content {
    .share-img {
      image {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
    .share-word {
      display: block;
      color: #fff;
      text-align: center;
      .big-word {
        font-size: 32rpx;
      }
      .small-word {
        font-size: 26rpx;
        line-height: 2em;
      }
    }
  }
  .presale-steps {
    background: #fff;
    padding: 30rpx 10px;
  }
  .discount-package {
    background: #fff;
    margin-top: 20rpx;
    padding: 30rpx 20rpx 0 20rpx;
    .discount-package-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      opacity: 1;
    }
    .discount-package-title-fu {
      font-size: 24rpx;
      font-weight: bold;
      color: #333333;
      opacity: 1;
    }
  }
  .discount-package-scroll {
    display: flex;
  }
  .discount-package-concent {
    .discount-package-item {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      margin-bottom: 30rpx;
      padding-right: 32rpx;
      padding-left: 30rpx;
      border-right: 2px solid #eeeeee;
      &:first-child {
        padding-left: 0;
      }
      &:last-child {
        border: 0;
        padding-right: 0;
      }
    }
  }
  .discount-package-item {
    .main-image {
      width: 120rpx;
      height: 120rpx;
    }
    .addFu {
      display: flex;
      align-items: center;
      margin: 0 20rpx;
    }
    .fu-prod {
      width: 120rpx;
      height: 120rpx;
      box-sizing: border-box;
      border: 1px solid #f4f4f4;
      opacity: 1;
      border-radius: 6px;
      margin-right: 20rpx;
      .image {
        width: 56rpx;
        height: 100rpx;
        border-radius: 6px;
        margin-right: 20rpx;
      }
    }
    .discountPackageProd-page-detail {
      min-width: 120rpx;
      font-size: 24rpx;
      font-weight: 400;
    }
  }
  .discountPackageProd-page-detail {
    .yuan-number {
      display: inline-block;
      text-align: center;
      width: 22rpx;
      height: 24rpx;
      border: 1px solid #999999;
      border-radius: 50%;
    }
    .price {
      font-size: 20rpx;
      font-weight: bold;
      color: #d2423a;
      opacity: 1;
    }
  }
  .share-popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.3);
    .share-popup-box {
      padding-top: 32rpx;
      border-radius: 24rpx 24rpx 0 0;
      position: absolute;
      bottom: 0;
      width: 100%;
      min-height: 560rpx;
      max-height: 1200rpx;
      overflow: hidden;
      background-color: #fff;
    }
    .share-box {
      min-height: 280rpx;
    }
  }
  .share-box {
    .share-popup-tit {
      position: relative;
      padding: 0 32rpx;
      .text {
        text-align: center;
        font-size: 36rpx;
        font-weight: bold;
        font-weight: 200;
        font-size: 32rpx;
      }
      .img {
        position: absolute;
        top: 2rpx;
        right: 32rpx;
        width: 44rpx;
        height: 44rpx;
      }
    }
    .share-cnt {
      margin-top: 40rpx;
      display: flex;
      justify-content: space-evenly;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
  .share-cnt {
    .item {
      .img {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 8rpx;
      }
			.text{
				font-size: 24rpx;
			}
    }

		// #ifdef MP-WEIXIN
		.right{
			margin: 0;
			background-color: #fff !important;

			.text{
				font-size: 24rpx;
				height: 32rpx;
				line-height: 32rpx;
			}
		}
		// #endif
  }
  .font-text{
		font-size: 28rpx;
	}
}
