renshou/library/pageDetail/index.css

page {
	background: #fff;
}

.home{width: 160rpx;height: 72rpx;background: rgba(0,0,0,.7);border-radius: 36rpx;justify-content: center;position: fixed;left: 20rpx;z-index: 10;font-size: 29rpx;color: #fff;}
.home image{width: 29rpx;height: 28rpx;margin-right: 10rpx;}

.top {
	background: #fff;
	padding: 20rpx 30rpx;
}

.logos {
	font-size: 22rpx;
	color: #666;
}

.logo-img {
	width: 185rpx;
	height: 39rpx;
	margin-right: 15rpx;
}

.logo-r {
	position: relative;
	padding-left: 10rpx;
}

.logo-r:before {
	content: '';
	display: block;
	width: 1rpx;
	height: 39rpx;
	background-color: #D1D1D1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.logo-r .ddflex {
	font-size: 20rpx;
	color: #999;
	margin-bottom: 5rpx;
}

.logo-r .ddflex image {
	width: 17rpx;
	height: 24rpx;
	margin-right: 5rpx;
}

.tel {
	width: 210rpx;
	height: 70rpx;
	border: 1rpx solid #FA9350;
	border-radius: 8rpx;
}

.tel-t {
	height: 32rpx;
	background-color: #FA9350;
	font-size: 20rpx;
	color: #fff;
	justify-content: center;
}

.tel-t image {
	width: 20rpx;
	height: 20rpx;
	margin-right: 7rpx;
}

.call {
	font-size: 26rpx;
	color: #FA9350;
	font-weight: bold;
	text-align: center;
	line-height: 38rpx;
}

/* 轮播图 */
.ban {
	height: 400rpx;
	position: relative;
	background: #fff;
}

.swiper {
	width: 100%;
	height: 400rpx;
}

.swiper image {
	width: 100%;
	height: 100%;
}

.swiper-img {
	width: 750rpx;
	height: 400rpx;
}

.dots {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 30rpx;
	z-index: 3;
	justify-content: center;
}

.dot {
	width: 12rpx;
	height: 12rpx;
	background: rgba(255, 255, 255, .4);
	margin: 0 3rpx;
	border-radius: 6rpx;
}

.dot.active {
	background: #fff;
	width: 28rpx;
}

/* 表单 */
.form {
	padding: 40rpx 30rpx;
	background: #fff;
}

.form-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	text-align: center;
}

.form-list {
	margin-top: 40rpx;
}

.form-list .li {
	background: #f9f9f9;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
}

.label {
	font-size: 160rpx;
	font-size: 28rpx;
	color: #666;
	padding-left: 30rpx;
}

.ipt {
	font-size: 30rpx;
	color: #333;
	padding: 25rpx 30rpx;
}

.textarea {
	font-size: 30rpx;
	color: #333;
	padding: 25rpx 30rpx;
	height: 180rpx;
}

.phone-ipt {
	font-size: 30rpx;
	color: #333;
	text-align: left;
	padding: 25rpx 30rpx;
}

.pickers {
	font-size: 30rpx;
	color: #333;
	text-align: left;
	padding: 25rpx 30rpx;
}

.placeholder {
	color: #999;
}

.form-btn {
	margin-top: 60rpx;
	background: var(--mina);
	font-size: 30rpx;
	color: #fff;
	text-align: center;
	line-height: 90rpx;
	border-radius: 10rpx;
}

/* 文本 */
.richText {
	background: #fff;
	padding: 40rpx 30rpx;
	font-size: 34rpx;
	color: #333;
	line-height: 1.7;
	margin: 20rpx 0;
}

/* 商品 */
.product {
	margin: 20rpx 0;
	padding: 0 30rpx;
	background: #fff;
}

.product .li {
	border-bottom: 1rpx solid #e9e9e9;
	padding: 30rpx 0;
	align-items: flex-start;
}

.product .li:last-child {
	border-bottom: none;
}

.pro-img {
	width: 200rpx;
	height: 200rpx;
	border-radius: 15rpx;
	margin-right: 20rpx;
}

.pro-info {
	height: 200rpx;
	position: relative;
}

.pro-name {
	font-size: 30rpx;
	color: #333;
	line-height: 40rpx;
	height: 85rpx;
	overflow: hidden;
}

.pro-bri {
	font-size: 24rpx;
	color: #999;
}

.pro-opt {
	justify-content: space-between;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

.money {
	font-size: 26rpx;
	color: #C5020B;
	font-weight: bold;
}

.money text {
	font-size: 22rpx;
	color: #252A3B;
	margin-left: 5rpx;
	font-weight: normal;
}

.pro-btn {
	background: var(--mina);
	height: 50rpx;
	border-radius: 25rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #fff;
	text-align: center;
	line-height: 50rpx;
}

.product2 {
	margin: 20rpx 0;
	padding: 30rpx;
}

.product2 .li {
	width: 330rpx;
	margin-right: 30rpx;
	background: #fff;
	border-radius: 15rpx;
}

.product2 .li:nth-child(2n) {
	margin-right: 0;
}

.product2 .pro-img {
	width: 330rpx;
	height: 330rpx;
	border-radius: 15rpx 15rpx 0 0;
}

.product2 .li .pro-info {
	padding: 20rpx;
	height: auto;
}

.product2 .li .pro-opt {
	position: inherit;
	margin-top: 10rpx;
}

.pro-cart image {
	width: 42rpx;
	height: 42rpx;
}

.product3 {
	margin: 20rpx 0;
	padding: 20rpx 0;
	background: none;
	height: 260rpx;
	overflow: hidden;
}

.product3 scroll-view {
	white-space: nowrap;
	padding-bottom: 20rpx;
}

.product3 .li {
	width: 600rpx;
	margin-right: 30rpx;
	border: none;
	display: inline-block;
	padding: 30rpx;
	background: #fff;
	border-radius: 20rpx;
}

.product3 .li:first-child {
	margin-left: 30rpx;
}

/* 图片 */
.images image {
	width: 100%;
}

/* 客服 */
.contact {
	position: fixed;
	bottom: 20%;
	right: 30rpx;
	z-index: 50;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
	justify-content: center;
	font-size: 24rpx;
	color: #333;
	flex-direction: column;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}

.contact image {
	width: 40rpx;
	height: 34rpx;
	margin: 0 auto 5rpx;
}

/* 分享 */
.share {
	position: fixed;
	bottom: 30%;
	right: 30rpx;
	z-index: 50;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
	justify-content: center;
	font-size: 24rpx;
	color: #333;
	flex-direction: column;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}

.share image {
	width: 34rpx;
	height: 34rpx;
	margin: 0 auto 5rpx;
}

/* 优惠券 */
.coupon {
	padding: 60rpx 30rpx 30rpx;
}

.tag {
	width: 156rpx;
	height: 40rpx;
	background: #FC3C31;
	border-radius: 20rpx 20rpx 20rpx 0;
	font-size: 28rpx;
	color: #fff;
	text-align: center;
	line-height: 40rpx;
	margin: 0 auto 15rpx;
}

.form-title view {
	position: relative;
	display: inline-block;
}

.form-title view text {
	position: relative;
	z-index: 5;
}

.form-title view::after {
	content: '';
	display: block;
	height: 6rpx;
	background: #FFC72C;
	position: absolute;
	bottom: 2rpx;
	left: 30rpx;
	right: 30rpx;
	z-index: 2;
}

.coupon-list {
	padding: 10rpx 0 0;
}

.coupon-list .li {
	background: #fff;
	box-shadow: 0 0 32rpx rgba(0, 0, 0, 0.04);
	border-radius: 15rpx;
	padding: 0 22rpx;
	color: #999;
	margin-bottom: 24rpx;
	position: relative;
	margin-top: 30rpx;
}

.info {
	border-bottom: 1rpx dashed #E9E9E9;
	padding: 20rpx 22rpx 29rpx 9rpx;
	position: relative;
}

.info::before,
.info::after {
	content: '';
	display: block;
	width: 20rpx;
	height: 20rpx;
	background: #f6f6f6;
	border-radius: 50%;
	position: absolute;
	bottom: -10rpx;
}

.info::before {
	left: -34rpx;
}

.info::after {
	right: -34rpx;
}

.info .left-pic {
	width: 80rpx;
	height: 80rpx;
	margin-right: 15rpx;
}

.info .left-pic image {
	width: 100%;
	height: 100%;
}

.title {
	font-size: 32rpx;
	color: #222;
	font-weight: bold;
}

.time {
	font-size: 22rpx;
	margin-top: 15rpx;
}

.info-r {
	text-align: right;
	margin-left: 20rpx;
	width: 160rpx;
}

.money {
	font-size: 60rpx;
	color: #EB0000;
}


.money text {
	color: #EB0000;
	font-size: 30rpx;
}

.man {
	font-size: 22rpx;
}

.li-bot {
	padding: 15rpx 15rpx 15rpx 7rpx;
	height: 50rpx;
}

.check {
	font-size: 24rpx;
	color: #666;
}

.check image {
	width: 17rpx;
	height: 11rpx;
	margin-left: 8rpx;
}

.infos {
	font-size: 20rpx;
	padding: 15rpx 0 30rpx;
}

.infos view {
	padding: 5rpx 0;
}

.yong {
	width: 130rpx;
	height: 50rpx;
	background: linear-gradient(90deg, #009AFF 0%, #3FBDFB 100%);
	border-radius: 28rpx;
	font-size: 24rpx;
	color: #fff;
	justify-content: center;
}

.yong-ma{width: 38rpx;height: 38rpx;margin-right: 40rpx;}

/* 充值金额 */
.recharge {
	padding: 45rpx 0 0 0;
}

.rechargeMoney {
	font-size: 32rpx;
	/* font-weight: bold; */
	color: #666;
}

.rechargeul {
	padding: 40rpx 0 0 0;
	flex-wrap: wrap;
	/* border-bottom: 1rpx solid #DBDBDB; */
}

.rechargeId {
	padding: 25rpx 0;
	font-size: 40rpx;
	color: #333;
	font-weight: bold;
	border-bottom: 1rpx solid #DBDBDB;
	align-items: center;
	margin-bottom: 70rpx;
}

.rechargeId text {
	font-weight: bold;
	margin-right: 22rpx;
}

.rechargeId input {
	font-size: 48rpx;
	color: #333;
	height: 60rpx;
	font-weight: normal;
}

.rechargeId.on {
	border-color: #F32A27;
}

.placeholder {
	color: #BABABA;
}

.rechargeli {
	padding: 60rpx 0;
	width: 210rpx;
	border-radius: 20rpx;
	margin-right: 30rpx;
	background: #F7F4F8;
	margin-bottom: 50rpx;
	border: 1rpx solid #F7F4F8;
	box-sizing: border-box;
	text-align: center;
}

.rechargeli:nth-child(3n) {
	margin-right: 0;
}

.rechargeli.active {
	border-color: #F32A27;
	background: #fef3f3;
}

.awealth {
	color: #F32A27 !important;
}

.wealth {
	font-size: 30rpx;
	font-weight: bold;
	text-align: center;
}

.chongzhi {
	padding: 25rpx 20rpx;
	text-align: center;
	background: #FD3A31;
	border-radius: 10rpx;
	font-size: 32rpx;
	color: #FFFFFF;
}

.subchongzhi {
	padding: 23rpx 18rpx;
	text-align: center;
	color: #FD3A31;
	border-radius: 10rpx;
	font-size: 32rpx;
	border: 1px solid #FD3A31;
	margin-top: 30rpx;
}


/* 手机号弹窗 */
.mask {
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .5);
}

.regi {
	position: fixed;
	width: 550rpx;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	border-radius: 15rpx;
	padding: 0 30rpx 30rpx;
	background: #fff;
	z-index: 100;
}

.regi-tit {
	border-bottom: 2rpx solid #D8D8D8;
	font-size: 30rpx;
	color: #333;
	padding: 35rpx 0 35rpx;
	text-align: center;
}

.regi-close {
	width: 37rpx;
	height: 37rpx;
	position: absolute;
	top: 20rpx;
	right: 22rpx;
}

.phone {
	align-items: center;
	margin: 100rpx 0 100rpx;
}

.phone input {
	font-size: 30rpx;
	color: #333;
}
.regi-btn {
	background: var(--mina);
	width: 245rpx;
	height: 75rpx;
	line-height: 75rpx;
	font-size: 30rpx;
	color: #fff;
	margin-bottom: 20rpx;
	text-align: center;
	border-radius: 45rpx;
}
.regi-btn1{background: #e9e9e9;color: #666;}

/* 导引 */
.guide{width: 420rpx;height: 523rpx;background-color: #FFFFFF;border-radius: 40rpx;position: fixed;top: 0;right: 45rpx;z-index: 100;padding: 45rpx 0 0 60rpx;box-sizing: border-box;}
.guide::before{content: '';display: block;width: 0;height: 0;border: 20rpx solid transparent;border-top: none;border-bottom-color: #fff;position: absolute;right: 85rpx;top: -15rpx;}
.guide-tit{font-size: 40rpx;color: #333;font-weight: bold;padding-left: 10rpx;}
.guide-tip{font-size: 24rpx;color: #999;padding-left: 10rpx;margin-top: 5rpx;}
.guide-s{font-size: 36rpx;color: #333;font-weight: bold;margin-top: 38rpx;}
.guide-s image{width: 56rpx;height: 56rpx;margin-right: 18rpx;}
.guide-btn{width: 300rpx;height: 86rpx;background: linear-gradient(90deg, #009AFF 0%, #3FBDFB 100%);border-radius: 50rpx;font-size: 32rpx;color: #fff;font-weight: bold;text-align: center;line-height: 86rpx;margin-top: 50rpx;}

.popup{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);background: #fff;border-radius: 40rpx;width: 634rpx;box-sizing: border-box;padding: 54rpx 47rpx 60rpx;text-align: center;z-index: 100;}
.popup-img{width: 318rpx;height: 206rpx;margin: 0 auto;}
.popup-tip{font-size: 52rpx;color: #333;font-weight: bold;margin-top: 30rpx;}
.popup-tips{font-size: 32rpx;color: #999;margin: 25rpx auto 0;max-width: 430rpx;}
.popup-btns{margin-top: 75rpx;justify-content: space-between;}
.back-home{font-size: 32rpx;color: #2B8CFF;width: 260rpx;height: 86rpx;border-radius: 50rpx;border: 2rpx solid #2B8CFF;justify-content: center;box-sizing: border-box;}
.check-btn{font-size: 32rpx;color: #fff;width: 260rpx;height: 86rpx;border-radius: 50rpx;background: linear-gradient(90deg, #009AFF 0%, #3FBDFB 100%);justify-content: center;}
.popup-close{width: 89rpx;height: 89rpx;position: absolute;left: 50%;transform: translateX(-50%);bottom: -154rpx;}

.popup-ipt{margin-top: 55rpx;border: 1rpx solid #707070;border-radius: 15rpx;padding: 20rpx 30rpx;font-size: 32rpx;color: #333;text-align: left;box-sizing: border-box;height: 90rpx;line-height: 50rpx;}
.placeholder{color: #999;}

.yzm-box{margin-top: 20rpx;border: 1rpx solid #707070;border-radius: 15rpx;height: 90rpx;}
.yzm-ipt{padding: 20rpx 30rpx;font-size: 32rpx;color: #333;line-height: 50rpx;text-align: left;}
.yzm{width: 190rpx; white-space: nowrap;font-size: 28rpx;color: var(--mina);height: 90rpx;line-height: 90rpx;background-color: #f5f5f5;border-radius: 0 15rpx 15rpx 0;}
.yzm.active{color: #999;}


.ceng{position: fixed;left: 0;top: 0;right: 0;bottom: 0;background: rgba(0,0,0,.5);z-index: 99;}
.qrcode{position: fixed;background: #fff;width: 560rpx;border-radius: 15rpx;padding: 30rpx;box-sizing: border-box;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 100;text-align: center;}
.code{font-size: 30rpx;color: #333;font-weight: bold;padding: 30rpx 0 50rpx;justify-content: center;border-top: 1rpx dashed #e9e9e9;}
.code text{color: var(--mina);}
.copy{font-size: 24rpx;color: #999;border: 1rpx solid #e9e9e9;border-radius: 20rpx;height: 40rpx;line-height: 40rpx;width: 100rpx;margin-left: 15rpx;font-weight: normal;}
.qr-code{justify-content: center;padding: 50rpx 0;}
.close{position: absolute;left: 50%;transform: translateX(-50%);bottom: -90rpx;width: 60rpx;height: 60rpx;}
.code-image{
	width: 400rpx;
	height: 400rpx;
}


.ruzhu{padding: 30rpx 0;justify-content: center;}
.ruzhu text{font-size: 24rpx;color: #a5a5a5;}
.ruzhu .rz-text{color: #2B8CFF;margin: 0 10rpx;}
/* 按钮悬浮 */
.bot-fixed{position: fixed;left: 0;right: 0;bottom: 0;padding: 30rpx;z-index: 50;background-color: #fff;}
.btn{height: 80rpx;background-color: var(--mina);font-size: 30rpx;color: #fff;border-radius: 10rpx;text-align: center;line-height: 80rpx;}
.btn-red{background-color: #fe0419;}
/* 商品悬浮 */
.product-fixed{position: fixed;left: 0;right: 0;bottom: 0;padding: 30rpx;background-color: #fff;z-index: 50;box-shadow: 0 0 10rpx rgba(0,0,0,.05);}
.product-fixed image{width: 100rpx;height: 100rpx;border-radius: 10rpx;margin-right: 20rpx;}
.product-tit{font-size: 28rpx;color: #333;font-weight: bold;}
.product-opt{margin-top: 10rpx;justify-content: space-between;}
.product-price{font-size: 28rpx;color: #C5020B;font-weight: bold;}
.product-price text{font-weight: normal;font-size: 24rpx;margin-left: 10rpx;color: #252A3B;}
.product-btn{background: var(--mina);height: 50rpx;border-radius: 25rpx;padding: 0 20rpx;font-size: 28rpx;color: #fff;text-align: center;line-height: 50rpx;}
/* 优惠券悬浮 */
.coupon-fixed{position: fixed;left: 0;right: 0;bottom: 0;padding: 30rpx;background-color: #fff;z-index: 50;box-shadow: 0 0 10rpx rgba(0,0,0,.05);}
.coupon-fixed image{width: 80rpx;height: 80rpx;margin-right: 15rpx;}
.coupon-fixed .title{font-size: 32rpx;}
.coupon-fixed .money{font-size: 30rpx;}
.coupon-fixed .money text{font-size: 24rpx;}


.right-share{position: fixed;right: 30rpx;bottom: 155rpx;width: 110rpx !important;height: 110rpx !important;border-radius: 50% !important;background: #fff;box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);font-size: 20rpx;color: #333;justify-content: center;flex-direction: column;}
.right-share image{width: 36rpx;height: 36rpx;margin: 0 auto 6rpx;}
.show {animation: showLayer 0.2s linear both;}
.hide {animation: hideLayer 0.2s linear both;}
@keyframes showLayer {0% {transform: translateX(0%);}
	100% {transform: translateX(140rpx);}
}
@keyframes hideLayer {0% {transform: translateX(140rpx);}
	100% {transform: translateX(0);}
}