@charset "UTF-8";

/*会员卡升级*/
.vipupdate_container {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background: url("../../img/bg.jpg") no-repeat;
    background-size: cover;
    background-position: top left;
}
.vipupdate_name{
	width:90%;
	height: 1.2rem;
	line-height: 1.2rem;
	margin:0 auto;
	font-size: 0.3rem;
	color:#fff;
	letter-spacing: 0.04rem;
}
.vipupdate_name>em{
	color:#dca704;
}
.vipuodate_content{
	width:86%;
	margin:0 auto;
	background-color: #fff;
}
.vipuodate_content>div{
	width:90%;
	margin:0 auto;
}
.vipupdate_obj>h2{
	width:100%;
	height: 1rem;
	line-height: 1rem;
	color:#666;
	font-size: 0.3rem;
}
.vipupdate_obj .vipupdate_tree{
	padding-bottom:0.32rem;
	width:84%;
	margin:0 auto;
}
.vipupdate_tree .vipupdate_init,
.vipupdate_tree .vipupdate_target{
	width:1.7rem;
}
.vipupdate_init>span,
.vipupdate_target>span{
	display: block;
	color:#999;
	font-size: 0.26rem;
	text-align: center;
	margin-bottom: 0.1rem;
}
.vipupdate_init>div{
	position: relative;
	width:1.7rem;
	height:0.88rem;
	border-radius: 0.1rem;
	-webkit-border-radius: 0.1rem;
	background: -webkit-linear-gradient(right top, #666 , #999); 
    background: linear-gradient(to bottom left, #666 , #999);  
}
.vipupdate_init>div>div,
.vipupdate_target>div>div{
	position: absolute;
	width:1.4rem;
	text-align: center;
	color:#fff;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}
.vipupdate_turn{
	width:0.95rem;
	height: 0.71rem;
	background:url("../../img/arrow.png") no-repeat;
	background-size: 0.95rem 0.71rem;
	margin:0.52rem 0.16rem 0 0.32rem;
}
.vipupdate_target>div{
	position: relative;
	width:1.7rem;
	height:0.88rem;
	border-radius: 0.1rem;
	-webkit-border-radius: 0.1rem;
	background: -webkit-linear-gradient(right top, #dca704 , #f7c736); 
    background: linear-gradient(to bottom left, #dca704 , #f7c736); 
}
.vipupdate_enjoy>h2{
	font-size: 0.26rem;
	color:#999;
}
.vipupdate_items{
	width:100%;
	border-bottom: 1px solid #eee;
}
.vipupdate_items.vipupdate_one{
	padding:0.22rem 0 0.34rem 0;
}
.vipupdate_items.vipupdate_two{
	padding:0.26rem 0 0.38rem 0;
}
.vipupdate_items.vipupdate_three{
	padding:0.46rem 0 0.4rem 0;
}
.vipupdate_items .vipupdate_fl{
	width:1.63rem;
}
    .vipupdate_items .vipupdate_fl > i {
        display: inline-block;
        width: 1.3rem;
        height: 1.3rem;        
        background: url("../../img/markicon.png");
        background-size: 2.19rem 0.72rem;
        /*margin: 0 0.68rem 0 0.22rem;*/
    }
.vipupdate_items.vipupdate_one .vipupdate_fl>i{
	background-position: 0 0;
	margin-top:0.08rem;
}
.vipupdate_items.vipupdate_two .vipupdate_fl>i{
	background-position: -0.73rem 0;
	margin-top: 0.1rem;
}
.vipupdate_items.vipupdate_three .vipupdate_fl>i{
	background-position: -1.46rem 0;
	margin-top: 0.08rem;
}
.vipupdate_items .vipupdate_fr{
	width:68%;
}
.vipupdate_items .vipupdate_fr>h3{
	font-size: 0.3rem;
	color:#333;
}
.vipupdate_items .vipupdate_fr>div{
	font-size: 0.24rem;
	color:#999;
	margin-top: 0.14rem;
}
.vipupdate_detail{
	padding:0.14rem 0 0.2rem 0;
}
.vipupdate_column ul li{
	font-size: 0.24rem; 
	color:#666;
	line-height: 0.4rem;
}
.vipupdate_column>span{
	font-size: 0.22rem;
	color:#b8b8b8;
}
.vipupdate_detail .vipupdate_btn{
	margin-top: 0.24rem;
}
.vipupdate_btn>button{
	width:100%;
	height: 0.88rem;
	text-align: center;
	color:#fff;
	font-size: 0.3rem;
	border-radius: 0.5rem;
	-webkit-border-radius: 0.5rem;

}
/*支付状态*/
.pay_content{
	padding-top: 2.5rem;
	text-align: center;
}
.pay_content>i{
	display: block;
	width:1.04rem;
	height: 1.04rem;
	background:url("../../img/paymark.png") no-repeat;
	background-size: 2.08rem 1.04rem;
	background-position: 0 0;
	margin:0 auto;
}
.pay_content>i.payfailmark{
	background-position: -1.04rem 0;
}
.pay_content>p{
	color:333;
	font-size: 0.36rem;
	margin-top: 0.32rem;
}
.pay_content>div{
	color:333;
	font-size: 0.36rem;
}
.pay_btn{
	margin-top: 1rem;
}
.pay_btn>a{
	display: block;
	width:2.4rem;
	height: 0.68rem;
	line-height: 0.68rem;
	font-size: 0.28rem;
	text-align: center;
	margin: 0 auto;
}
.pay_btn>a:first-child{
	border:1px solid #e84747;
	border-radius: 0.4rem;
	-webkit-border-radius: 0.4rem;
	color:#e84747;
}
.pay_btn>a:last-child{
	color:#999;
	margin-top: 0.2rem;
}

/*会员升级遮罩层*/
.vipupdate_cover{
	width:100%;
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	background-color: rgba(0,0,0,0.2);
	z-index:10;
}
/*会员升级积分扣减弹出层*/
.vipupdate_pointsconfirm{
	width:64%;
	position: fixed;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	z-index:20;
	background-color: #fff;
	border-radius: 0.16rem;
	-webkit-border-radius: 0.16rem;
}
.vipupdate_pointsconfirm .vipupdate_tip{
	width:100%;
	padding:0.58rem 0 0.34rem 0;
	border-bottom: 1px solid #eee;
}
.vipupdate_tip>span,.vipupdate_tip>em{
	display: block;
	text-align: center;
	font-size: 0.26rem;
	color:#333;
}
.vipupdate_pointsconfirm .vipupdate_opera{
	width:100%;
	height: 0.9rem;
	font-size: 0;
}
.vipupdate_opera>button{
	display: inline-block;
	width:50%;
	height: 0.9rem;
	line-height: 0.9rem;
	color:#999;
	font-size: 0.3rem;
	border-right: 1px solid #eee;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	text-align: center;
}
.vipupdate_opera>button:last-child{
	color:#258ad1;
	border-right: 0;
}
/*微信支付弹出层*/
.vipupdate_wxpay{
	width:100%;
	min-height: 4rem;
	position: fixed;
	bottom:0;
	z-index:20;
	background-color: #fff;
}
.vipupdate_wxpay .vipupdate_wxclose{
	margin-top: 0.2rem;
}
.vipupdate_wxclose > i {
    display: block;
    margin-right: 0.2rem;
    width: 0.48rem;
    height: 0.48rem;
    background: url("../../img/close.png") no-repeat;
    background-size: 0.48rem 0.48rem;
}
.vipupdate_wxpay .vipupdate_wxcontent{
	width:90%;
	margin: 0 auto;
	text-align: center;
}
.vipupdate_wxcontent>p{
	font-size: 0.26rem;
	color:#666;
}
.vipupdate_wxcontent>p>em{
	color:#e84747;
	font-weight: bold;
}
.vipupdate_wxcontent>span{
	display: block;
	font-size: 0.26rem;
	color:#999;
	margin:0.3rem 0 0.24rem 0;
}
.vipupdate_wxcontent>div{
	font-size: 0.36rem;
	color:#666;
}
.vipupdate_wxcontent>div>i{
	color:#e84747;
}
.vipupdate_wxcontent>button{
	width:100%;
	height: 0.9rem;
	line-height: 0.9rem;
	background-color: #3cbd27;
	text-align: center;
	color:#fff;
	font-size: 0.3rem;
	margin-top: 0.36rem;
	border-radius: 0.16rem;
	-webkit-border-radius: 0.16rem;
}
/*提示浮层*/
.vipupdate_tipcover{
	width:38%;
	position: fixed;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	z-index:20;
	background-color: rgba(0,0,0,0.6);
	border-radius: 0.16rem;
	-webkit-border-radius: 0.16rem; 
	text-align: center;
	padding:0.22rem 0;
}
.vipupdate_tipcover.tipchave{
	-webkit-transition:opacity 1s;
	 opacity:1;
}
.vipupdate_tipcover.tipnohave{
	-webkit-transition:opacity 1s;
	opacity:0;
	 z-index:-1;
}
.vipupdate_tipcover>i,
.vipupdate_tipcover>b{
	display: block;
	font-size: 0.24rem;
	color:#fff;
}
/*积分扣减弹出层动画*/
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
/*微信支付弹出层*/
.huBox-leave-active,
.huBox-enter-active{
    transition:  all 0.45s ease; 
}
.huBox-leave-active,
.huBox-enter{
    height:0px !important;
}
.huBox-leave,
.huBox-enter-active{
    height: 4rem;
}