body{background-color: #fff;}
.header{ height:0.8rem; padding: 0 0.25rem;line-height: 0.8rem;  background-color: #f9f9f9}
.header a{ color: #1b1b1b; font-size: 0.4rem; font-weight: bolder; }
.header .webTitle{ color: #1b1b1b; font-size:0.4rem; position: absolute;  width: 3rem; top: 0; left: 50%; margin-left: -1.5rem; text-align: center;}
.header a.icon-turnRight{transform:rotate(180deg);-ms-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);}
.selType { text-align:center; padding-top: 0.3rem; padding-bottom: 0.5rem}
.selType p{  width: 3.12rem; height: 0.55rem; line-height: 0.55rem; border-radius: 0.05rem; border: #f2f2f2 0.01rem solid; display: inline-block; margin:0.1rem 0 0.1rem 0.4rem}
.selType p a{ display: block;width: 3.12rem; height: 0.55rem; }
.selType p.span{ color: #434343; font-size: 0.26rem; vertical-align: 0.52rem}
.selType p i{ font-size: 0.32rem; color: #696969}
.selType p i{ width: 0.4rem ; text-align:center; margin-left: 0.2rem; margin-right: 0.05rem}
.selType p span{width:2.2rem ; text-align: center;}
.selType p.on{border-color: #d30b0c;}
.selType p.on i,.selType p.on span{ color: #d30b0c}

.selPrice{ margin-left: 0.24rem; display:none;}
.selPrice:first-child{ display: block;}
.priceList{ height: 2.5rem;width:2.12rem;border: #f2f2f2 0.02rem solid; border-radius: 0.1rem; margin-right: 0.3rem; position:  relative;margin-bottom: 0.3rem;}
.priceList p{  text-align: center; font-size: 0.22rem}
.colorBlack{color: #1b1b1b; height: 0.22rem ; margin-top: 0.5rem; margin-bottom: 0.3rem}
.colorGray{ color: #707070;}
.price{ color: #d30b0c; padding-bottom: 0.1rem}
.price span{ font-size: 0.6rem; color: #d30b0c;}
.priceList.current{  background-color: #fff4f3; border-color: #d50d0d; box-shadow:0 1px 18px rgba(99,20,20,0.2)}
.priceList p.fixedLabel{  width:1rem ; height: 0.32rem; position:  absolute; top: -0.16rem; right: 0; background: url(//static.ooopic.com/2017/vip/mobile/recharge/images/iconLabel.png);  background-size: cover; color: #fff ; font-size: 0.18rem}
.payMoney{ margin-left: 0.24rem; color: #707070; font-size: 0.22rem}

.payWayTitle{ color: #434343; font-size: 0.26rem; margin-left: 0.24rem; padding-top: 0.45rem;  padding-bottom: 0.15rem}
.pay-way{  background-color: #fff; margin-bottom: 0.9rem; width: 7rem; margin: 0 auto}
.pay-way-list{height: 0.9rem; line-height: 0.9rem;border-bottom: #f7f7f7 0.01rem solid; font-size: 0.3rem}
.pay-way-list .icon-alipay{ font-size: 0.34rem;color: #13a9ef; display: inline-block; margin-right: 0.2rem}
.pay-way-list .icon-wChat{ font-size: 0.34rem;color: #50b674; display: inline-block; margin-right: 0.2rem}
.pay-way-list .icon-sure{ font-size: 0.36rem ; color:#fff}
.pay-way-list .on{ color: #d30b0c}

.explainWord{width: 7rem; margin: 0 auto;line-height: 0.3rem; color: #707070;}
.payNow a{  /*position:fixed; bottom:0.3rem; left: 50%;  margin-left: -2.25rem;*/width: 4.5rem ; margin: 0.5rem auto; height:1rem ;display: block;color: #fff; line-height: 1rem; text-align: center; font-size: 0.38rem; border-radius: 1rem;
  background: -webkit-linear-gradient(left, #ff6e69, #d20a0a); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #ff6e69, #d20a0a); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #ff6e69, #d20a0a); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #ff6e69, #d20a0a); /* ±ê×?????·¨ */}
  @media screen and (max-width:320px) {
      .selType p{border: #f2f2f2 0.02rem solid;}
      .selType p span{ width: 2.45rem;}
      .selType p i{ margin-right: 0; margin-left: 0.1rem}
      .priceList p.fixedLabel{ width: 1.2rem}
}

.piyIngMask{ width: 100%; height: 100%; top: 0; left: 0;background-color: rgba(0,0,0,0.4); position: fixed;  z-index: 10; display: none;}
.piyIng{ width: 5.12rem; height: 2.76rem;  background-color: #fff; position: absolute;  left: 50%; margin-left: -2.56rem;top: 50%; margin-top: -1.38rem; border: #eee 0.01rem solid; border-radius: 0.2rem; box-shadow: 0 0.12rem 0.2rem rgba(0,0,0,0.2)}
.piyIng .payWaiting{ height: 1.9rem; line-height:1.9rem; text-align: center;  color: #1b1b1b; font-size: 0.3rem; border-bottom:#eee 0.01rem solid}
.piyIng .payState a{ display: inline-block; text-align: center; width: 49.5%; line-height: 0.84rem; color: #707070; font-size: 0.26rem}
.piyIng .payState .payQuestion{ border-right:#eee 0.01rem solid; height: 0.84rem}

.banner{ width:7.02rem; height: 2.09rem;  background: url(//static.ooopic.com/2017/vip/mobile/recharge/images/banner.jpg);  background-size: cover; margin:.2rem auto}
.mayActiveLabel{ width: 1.21rem; height: 0.3rem; background: url(//static.ooopic.com/2017/vip/mobile/recharge/images/mayActiveLabel.png); background-size: cover; position: absolute;top: -.15rem; left: 0;}

/*支付成功*/
.successBox{ text-align:center;margin-top: 1.1rem}
.successBox i{ color: #d30b0c; font-size: 1.46rem; font-weight: bolder;}
.successBox p{ text-align: center; color: #1b1b1b; font-size: 0.26rem; padding-top: 0.25rem; padding-bottom: 0.6rem}
.MuchMoney{ width:100%; text-align: center; height: 0.8rem; margin: 0 auto; border-top: #eee 0.01rem solid; border-bottom: #eee 0.01rem solid; line-height:0.8rem; font-size: 0.3rem; padding: 0 0.25rem; color: #1b1b1b}
.MuchMoney .MuchMoneytitle{color: #707070}
.successBtn{width: 3.7rem ;  height:0.8rem ;display: block;color: #fff; line-height:0.8rem; text-align: center; font-size: 0.38rem; border-radius:0.8rem; margin: 1rem  auto;
  background: -webkit-linear-gradient(left, #ff6e69, #d20a0a); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #ff6e69, #d20a0a); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #ff6e69, #d20a0a); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #ff6e69, #d20a0a); /* ±ê×?????·¨ */}
/*支付成功*/

.couponCondition{background-color: #fff;  margin: 0.14rem 0; padding:0 0.3rem; width: 100%; height: 0.92rem; line-height:0.92rem; font-size: 0.28rem;}
.couponCondition i.icon-more{ font-size:0.28rem; font-weight: bolder; color: #3b3b3b; margin-left: 0.1rem}
/*优惠券弹窗*/
.couponMask{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); position:  fixed;  top: 0; left: 0; display: none;}
.couponMaskCon{ position: absolute; width: 100%; background-color: #fff; border-top-left-radius: 0.05rem; border-top-right-radius: 0.05rem;  position:absolute; bottom: 0; left: 0; height: 7.6rem;}
.maskTop{padding:0.35rem 0.28rem; height: 1rem; line-height: 0.4rem; font-size: 0.28rem; border-bottom:#dcdcdc 0.01rem solid}
.maskTop .leftTitle{ font-size: 0.36rem; color: #000; color: #000;}
.maskTop .rightInfor { margin-top: -0.1rem}
.maskTop .rightInfor span{ width: 0.36rem; height: 0.36rem; background-color: #ececec; text-align: center; line-height: 0.26rem; display: inline-block; border-radius: 0.36rem; margin-left: 0.15rem;}
.maskTop .rightInfor span i{ color: #999; font-size:0.16rem;}
.couponMaskCon .couponList{ background: url(//static.ooopic.com/framework/mobile/mycenter/images/coupon-3.png) top right; background-size: cover;}

.selCoupon{ height: 1rem; line-height: .8rem; border-bottom: #dcdcdc 0.01rem solid; text-align:center; font-size: 0.3rem; width: 100%; margin-top: 0.2rem;}
.selCoupon span{ display: inline-block; position:relative; margin: 0 0.4rem}
.selCoupon span.on::after{ content: ''; position: absolute; bottom: 0 ; left: 50%; width:0.5rem; height: 0.05rem; background-color: #5ac2a3; margin-left: -0.25rem;}
.selCoupon span:last-child{ color:#999}
.couponMask .changeTab{ display: none; height: 5.45rem ; overflow-y: scroll;width:7.4rem;overflow-x: hidden; margin: 0 auto}
.changeTab:first-child{ display:block}
.couponMask .changeTab .overflowY{height:auto;  width:6.9rem;margin-left: -0.15rem; margin: 0 auto}

.couponMask .changeTab::-webkit-scrollbar{width:0;height:0}
.couponMask .icon-sel{ color: #5ac2a3; font-size:0.3rem; position: absolute;  top: 50%; right: 0.3rem; margin-top: -0.12rem; display:none;}
.empty{ text-align: center; color: #999; font-size: 0.26rem; padding:1rem 0}

/*我的优惠券*/
.changeTabCon{ height: 0.88rem ; border-bottom: #e6e6e6 0.01rem solid; background-color: #fff; text-align:center;  width: 100%;}
.changeTabCon a{ margin: 0 0.6rem; height: 0.84rem; border-bottom: #fff 0.02rem solid; display: inline-block; line-height: 0.84rem; font-size: 0.26rem}
.changeTabCon a.on{ border-color: #0ec5a1}
.couponList{ width: 6.9rem; height: 2rem; background-color: #fff; position: relative; margin:0.35rem auto}
.couponState{ width: 2rem; height: 2rem;  background: url(//static.ooopic.com/framework/mobile/mycenter/images/coupon-1.png); background-size:cover; color: #fff; text-align: center; line-height: 2rem; font-size: 0.5rem}
.couponStateBg2{ width: 2rem; height: 2rem;  background: url(//static.ooopic.com/framework/mobile/mycenter/images/coupon-2.png); background-size:cover; color: #fff; text-align: center; line-height: 2rem; font-size: 0.66rem}
.couponState span,.couponStateBg2 span{ color:#fff; font-size: 0.3rem;}
.explainBox{ margin-left: 0.38rem}
.explain{ color: #333; font-size: 0.28rem; line-height: 0.44rem;}
.marginTop{ padding-top: 0.3rem}
.timeLimit{ color: #bdbdbd; font-size: 0.22rem; padding-top: 0.20rem;}
.rightNow{ width: 0.94rem ; height: 100%; border-left: #e6e6e6 0.02rem dashed ; color: #ffb141; padding: 0.35rem 0.3rem; text-align:center; font-size: 0.24rem;  position: relative;}
.circleBg{ position: absolute; right: -0.15rem; top: 50%; margin-top: -0.15rem; border-radius: 0.3rem;width: 0.3rem; height: 0.3rem; background-color: #f5f5f5;}
.finishUse .rightNow{ color: #bdbdbd; padding-top: 0.5rem}
.finishUse  .f40{ font-size: 0.32rem; padding-top: 0.5rem; color: #bdbdbd}
.pastBg { position:relative;}
.pastBg .imgBox{  width:1.6rem; height: 1.34rem; background: url(//static.ooopic.com/framework/mobile/mycenter/images/pastBg.png); background-size: cover; margin:0.33rem 0.2rem; position: relative; }
@font-face {font-family: "iconfont";
    src: url('//static.ooopic.com/framework/mobile/mycenter/css/font/iconfont.eot?t=1563780784552'); /* IE9 */
    src: url('//static.ooopic.com/framework/mobile/mycenter/css/font/iconfont.eot?t=1563780784552#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPAAAsAAAAACCAAAANxAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDFAqDaIMpATYCJAMQCwoABCAFhG0HQRsMBxHVm9nIfhbYMXma2ThXftt8NTZjm5yD4Hmqs97vqmR7ugfyCkpmBSVL+SbixMU5T6pGRaiRnD159IWUBtmz9BAAAfzHvdMmeDifZbnMMflTF1AXBxTQ2Ask4LIAtWHsgpa4HgJYxJMHqVKtjgsTjdlNAOnZrUs7zIwa3ZArmAjOirEamY0D05hiXGTDrOD78oFOTDBwKMy+DTpX7UiFZyGvRXn+e1p6KDjTGQE2CRSQB9AgbSvNzVFROA8KS22uyQc40QjGVM7//wMMbE3q3Ogfz0CBODGzfQEoAkXqqjgODQKvYUILrwVmoQA+htSE0eXACSyPnabQQPmFS3ZhH/NNR9y86bp1y33nTpPbt3OadZy/MDxnoTei/KJpYe4mixaElV2wIFRGHN3p3VV607Jo8Z4s5r//eCzzl6RtOBG3/HiqtX5xGCtOFA04dErEu7T9ggWe+aEW7oCpC0WshQu9iyJssaYGRtvO8dhjJk1b4Al12fDH8y2LEfuveq5Nu+G93j6sl/Cj4kn95486oU5C4UnKgAR9Up/od0J/rZsvX+HTrmXLqvhXreIUuLp3//27yNUqycN8q0CJisWT9hXfn1xmsUxNfhS4J/CSTA3Ynu08GOKs5FZ5d/lM41LFPI+SpoXciiqz+3P4592dO9ufIz7bvnB1ZsHVncv3sv9F/LMbuFxdwj6Hde7atUvXwaF7SGNX3dJGvcpTTJ563I3cDR3rZPpGqkkUWdZl9AXgvzqlKgKodcYXNqBOy9Of2o5eZ1afaxNQ5pdpP1j5vZavAvd/zbCIiQGdOb+Q07FIazxTo7XCd9i6VdPqZbQxAAsL+HX5AME8nkIa1jkbBJOwBAxyEQcKk1S0xucBBzZFwIlJebDITfXJNiH0RyHaB8hmAgAhkF1g4M8pUARyCa3xj8BBOJ/ASaAosMiRkDlt0nlJ6sioBR2YPyRLs7d1osLcG4Yyak7zAuILeU0+aKsmH7vijDzFgPUTOhEPnmmCC9gMx5FgYcpopYoiS1/XvupFlaVpozgyakEHmD+QLM3eqyyq8PkbhjJqbkBU6V/Ia6odaKloOqCv4rkT4lYuWT+hQ8QDnmkCLsCIoxUmYKluldFKRRwQXHpqVMp3FVfLS6c3XAVYmEdrMUSJFgf7ATiqP5VY0rvo+TAR42YDAAAA') format('woff2'),
    url('//static.ooopic.com/framework/mobile/mycenter/css/font/iconfont.woff?t=1563780784552') format('woff'),
    url('//static.ooopic.com/framework/mobile/mycenter/css/font/iconfont.ttf?t=1563780784552') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('//static.ooopic.com/framework/mobile/mycenter/css/font/iconfont.svg?t=1563780784552#iconfont') format('svg'); /* iOS 4.1- */
}






.icon-sel:before {content: "\e113";}
.icon-youhuiquan:before {content: "\e600";}
.icon-more:before {content: "\e601";}

/*618 2020/6/1*/
.banner618{width:7.02rem;height:2.09rem;background:url(//static.ooopic.com/2017/vip/mobile/recharge/images/banner199.png)no-repeat ;background-size:cover;margin:.2rem auto}
.label618{width:2.27rem;height:0.47rem;background:url(//static.ooopic.com/2017/vip/mobile/recharge/images/label199.png)no-repeat;background-size:cover;position:absolute;top:-0.4rem;left:-4px;}
/*周年庆*/
/*.banner618{width:7.02rem;height:2.09rem;background:url(//static.ooopic.com/2017/vip/mobile/recharge/images/VIPbanner.png)no-repeat ;background-size:cover;margin:.2rem auto}
.label618{width:2.15rem;height:0.5rem;background:url(//static.ooopic.com/2017/vip/mobile/recharge/images/vipshare.png) no-repeat center;background-size:2.15rem .5rem;position:absolute;top:-0.466667rem;left:0}*/

/* vip10月活动需求  2020/10/9 */
.label618{width:2.7rem;height:0.4rem;background:url(//static.ooopic.com/2017/vip/mobile/recharge/images/m-charge.png)no-repeat;background-size:contain;position:absolute;top:-0.4rem;left:-0.1rem}
.banner618{width:7.02rem;height:2.09rem;background:url(//static.ooopic.com/2017/vip/mobile/recharge/images/m-nav.png)no-repeat;background-size:cover;margin:.2rem auto}
		
		
/* 摄影图 */
.selType p .icon-photo{width:0.28rem;height:0.22rem;text-align:center;margin-left:0.2rem;margin-right:0.05rem;background-image:url(//static.ooopic.com/framework/web/vip/mobile/recharge/images/pay_2.png)}
.selType p.on .icon-photo{width:0.28rem;height:0.22rem;text-align:center;margin-left:0.2rem;margin-right:0.05rem;background-image:url(//static.ooopic.com/framework/web/vip/mobile/recharge/images/pay_1.png)}


/* 双十一活动需求 */
.label618{display: block; width:2.7rem;height:0.4rem;background:url(//static.ooopic.com/framework/web/vip/mobile/recharge/images/moblie_1.png) no-repeat;background-size:contain;position:absolute;top: -0.2rem;left: -0.02rem;}
.banner618{width:7.02rem;height:2.09rem;background:url(//static.ooopic.com/framework/web/vip/mobile/recharge/images/moblie_2.png)no-repeat;background-size:cover;margin:.2rem auto}
		
	/* 双十二 */	
.dbtwo{position:absolute;right:0rem;top:-0.67rem;width:1.52rem;height:1.06rem;background:url(//static.ooopic.com/framework/web/vip/mobile/recharge/images/tips_m.png) no-repeat}

/* 跨年2021 */
.icon-goYear{display: inline-block;width: 1.8rem;height: 0.48rem;position: absolute;top: -0.24rem;left: 0;z-index: 0;background: url(//static.ooopic.com/framework/web/www/active/go-year/images/icon_year_m2.png?v=1) no-repeat;}

/* 2020年跨年大促活动下线及数据调取-vip、办公 */
.office-worker{position:absolute;left:0;top:-0.32rem;width:2.12rem;height:0.45rem;background:url(//static.ooopic.com/framework/web/vip/mobile/recharge/images/vip-worker-m1.png) no-repeat}
.office-worker span{line-height:0.38rem;color:#FFFFFF;font-size:0.24rem}
.time{position:absolute;top:-5px;width:1rem;height:0.66rem;color:#FFFFFF;font-size:0.24rem;line-height:0.45rem;padding-left:0.05rem;background:url(//static.ooopic.com/framework/web/vip/mobile/recharge/images/vip-worker-m.png)no-repeat}
.time .limit{line-height:1;letter-spacing:2px;transform:scale(0.8)}
.office-worker .work{transform:scale(0.8)}
.work{padding-right:0.3rem}