/*------------------页面样式集合----------*/
/*编码人：陶姣龙 */
/*编码时间：2020.8.7*/
@charset "utf-8";

/*权益超市*/
body{
    background: #ffffff;
}
.login-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: .76rem;
    line-height: .76rem;
    font-size: .26rem;
    padding: 0 .22rem 0 .26rem;
    background-color: #fff9ed;
}
.login-info span {
    flex: 1;
}
.login-info em {
    font-style: normal;
}
.login-info a {
    width: .94rem;
    height: .54rem;
    line-height: .54rem;
    color: #fff;
    background-color: #fca90e;
    text-align: center;
    border-radius: .05rem;
}
.mode1{
    position: relative;
}
.mode1 a {
    position: absolute;
    display: block;
    width: .44rem;
    top: .33rem;
}
.mode1 .rule {
    left: .1rem;
}
.mode1 .myTq {
    right: .1rem;
}
.mode2{
    position: relative;
    min-height: 1.9rem;
    margin: -1.15rem .48rem 0;
    background: #fff;
    border-radius: 5px;
    padding: .24rem .25rem .22rem;
    font-size:.26rem;
    box-sizing: border-box;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.10);
}
.mode2 .p1{
    color: #999;
    padding-bottom: .2rem;
}
.mode2 .p2{
    color: #999999;
    letter-spacing: 0;
    line-height: 1.6;
}
.mode2 .p2 a {
    color: #fc950b;
    margin-left: 1rem;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
}
/*.mode2 .p2 b{*/
/*color: #151515;*/
/*}*/
.mtCom{
    margin-top: .5rem;
}
.topCom{
    margin: 0 0.17rem 0.24rem 0.3rem;
}
.topCom .p1{
    font-weight: bold;
    font-size:.3rem;
    line-height: 0.3rem;
    padding-bottom:0.16rem;
    color: #333333;
}
.topCom .p2:after{
    display: block;
    clear: both;
    content: "";
}
.topCom .p2 .left{
    font-size: .26rem;
    line-height: 0.26rem;
    color: #999990;
    float: left;
}
.topCom .p2 .explain{
    float: right;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}
.topCom .p2 .explain div{
    font-size:.26rem;
    color: #333333;
}
.topCom .p2 .explain .icon{
    width: .13rem;
    height: .22rem;
    margin: .08rem 0 0 .13rem;
}
.listCom ul{
    margin-left: .3rem;
    display: -webkit-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.listCom li{
    padding-right:.15rem;
    width: 41%;
}
.listCom li .pic {
    position: relative;
}
.listCom li .pic .yuan {
    position: absolute;
    width: 0.6rem;
    top: .12rem;
    right: .34rem;
}
.listCom li .btn{
    height: .58rem;
    line-height: .58rem;
    font-size: .3rem;
    border-radius: 4px;
    margin-top: .1rem;
    border: 1px solid #FD7B00;
    background: #FD7B00;
    color: #fff;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}


/*.listCom li .OutBtn{*/
/*background: #FFD3A9;*/
/*border: 1px solid #FFD3A9;*/
/*color: #fff;*/
/*text-align: center;*/
/*overflow: hidden;*/
/*display: flex;*/
/*flex-wrap: wrap;*/
/*align-items: center;*/
/*justify-content: center;*/
/*}*/


.listCom li .drawBtn{
    background: #fff;
    border: 1px solid #FFD3A9;
    color: #fd7b00;
}
.listCom li .icon {
    display: none;
    width: .28rem;
    height: .28rem;
    margin-right: .08rem;
}
.listCom li .drawBtn .icon{
    display: block;
}
.fgx{
    height: .15rem;
    background: #f5f5f5;
}
.mode7{
    padding-bottom: .5rem;
}
.mode7 .wrap{
    position: relative;
    margin: 0 .17rem .22rem .3rem;
    padding-bottom: .22rem;
    border-bottom: 1px solid #eeeeee;
}
.mode7 .wrap .left{
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    height: 1.5rem;
}
.mode7 .wrap .left .pic{
    width: 1.68rem;
    height: 1.5rem;
}
.mode7 .wrap .left .textH{
    /*background: #90d4d1;*/

    display: table;
    height: 1.5rem;
    margin: 0 0.1rem 0 .15rem;
}
.mode7 .wrap .left .text{
    display: table-cell;
    vertical-align:middle;
}
.mode7 .wrap .left .text .p1{
    font-size:.3rem;
    line-height: 0.3rem;
    color: #333333;
    margin-bottom: 0.16rem;
    font-weight: bold;
}
.mode7 .wrap .left .text .p2{
    font-size:.26rem;
    line-height: 0.26rem;
    color: #999999;
    margin-bottom: 0.22rem;
}
.mode7 .wrap .left .text .p3{
    line-height: 0.36rem;
    font-size:.36rem;
    color: #FF3B30;
    font-weight: bold;
}
.mode7 .wrap .btn{
    position: absolute;
    right: 0;
    top: .4rem;
    width: 1.7rem;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    background: #fd7b00;
    color: #fff;
    font-size: .3rem;
    border-radius: 20px;
}

.drawCom{
    width: 1.68rem;
    height: .58rem;
    line-height: .58rem;
    font-size: .3rem;
    border-radius: 20px;
    border: 1px solid #FD7B00;
    background: #FD7B00;
    color: #fff;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -0.35rem;
}
.drawStar{
    background: #fd7b00;
    border: 1px solid #fd7b00;
    color: #fff;
}
.drawOver{
    background: #fff;
    border: 1px solid #FFD3A9;
    color: #fd7b00;
}
.drawCom .icon{
    width: .28rem;
    height: .28rem;
    margin-right: .08rem;
}


.mode7 .wrap .received {
    display: table;
    line-height: .5rem;
    background: #fff;
    border: 1px solid #FFD3A9;
    color: #fd7b00;
}
.mode7 .wrap .received span {
    display: inline-block;
    vertical-align: middle;
}
.mode7 .wrap .received .iconDraw {
    width: .28rem;
    margin-right: .08rem;
}

/*弹层汇总&&&&如下：*/
.popBox{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 200;
}
.popBox .mode{
    width: 80%;
    background: #fff;
    position: absolute;
    top: 40%;
    left: 10%;
    right: 0;
    transform: translateY(-50%);
    border-radius: 10px;
    overflow: hidden;
}
.popBox .mode .cont .name{
    font-weight: bold;
    font-size:.36rem;
    color: #333333;
    text-align: center;
    padding: .45rem .45rem .2rem .45rem;
}
.popBox .mode .cont .text{
    font-size:.3rem;
    color: #333333;
    padding: 0 .45rem .5rem .45rem;
}
.popOut .mode .cont .text li{
    line-height: 1.6;
    margin-bottom: .1rem;
}
.popBox1 .mode .cont .twoBtn,.popBox2 .mode .cont .oneBtn,.popBox3 .mode .cont .goBtn,.popBox4 .mode .cont .twoBtn,.popBox9 .mode .cont .twoBtn{
    border-top: 0.01rem solid #e5e5e5;
    text-align: center;
    font-size:.36rem;
    color: #0085D0;
    height: .98rem;
    line-height: .98rem;
}
.popBox1 .mode .cont .twoBtn:after,.popBox4 .mode .cont .twoBtn:after,.popBox9 .mode .cont .twoBtn:after{
    display: block;
    clear: both;
    content: "";
}
.popBox1 .mode .cont .twoBtn .cancel,.popBox4 .mode .cont .twoBtn .cancel,.popBox9 .mode .cont .twoBtn .cancel{
    margin-left: -1px;
    border-right: 1px solid #e5e5e5;
}
.popBox1 .mode .cont .twoBtn div,.popBox4 .mode .cont .twoBtn div,.popBox9 .mode .cont .twoBtn div{
    width: 50%;
    float: left;
}
.popBox4 .mode .cont .twoBtn div.sure{
    font-weight: bold;
}
.popBox2 .mode .cont .oneBtn .cancel{
    width: 50%;
    margin: 0 auto;
}
.popBox3 .mode .cont .goBtn a{
    font-size: .36rem;
    color: #0085D0;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.popBox3 .mode .cont .goBtn a .goIcon{
    width: .34rem;
    margin-left:.15rem;
}
/*登录弹层*/
.popBox4 .mode .cont .name{
    border-bottom: 1px solid #EEEEEE;;
    padding: .45rem 0 .2rem 0;
    margin: 0 .3rem;
}
.popBox4 .mode .cont .sbNo{
    padding: 0.2rem 0 0.15rem;
    font-size: 0.3rem;
    color: #999999;
    text-align: center;
    font-weight: normal;
    line-height: 0.3rem;
}
.yzm_box{
    margin: .13rem .3rem .45rem .3rem;
}
.yzm_box ul:after{
    display: block;
    clear: both;
    content: "";
}
.yzm_box li {
    border-bottom: 0.01rem solid #EEEEEE;;
    position: relative;
    padding: .2rem 0 .22rem;
}
.yzm_box li .name{
    position: absolute;
    left: 0;
    top: 0;
    font-size: .3rem;
    color: #000000;
    width: 1.58rem;
}

.yzm_box li .tip{
    padding-top: .05rem;
    font-size: .24rem;
    color: #da340a;
}
.yzm_box .line {
    height: .44rem;
    line-height: .44rem;
}
.yzm_box .bd_le{
    float: left;
    width: 3rem;
}
.yzm_box .pic{
    border: 1px solid #0a0204;
    float: right;
    width: 1.7rem;
    height: 100%;
    border-radius: 3px;
}
.yzm_box .pic img{
    height: 100%;
}

.yzm_box .line_out .dd_out{
    height: 100%;
    float: left;
    width: 2.7rem;
}
.yzm_box .line p {
    height: .44rem;
    line-height: .44rem;
}
.yzm_box .line input {
    margin-left: .2rem;
    width: 4.5rem;
    height: .44rem;
    line-height: .44rem;
    display: block;
    color: #ccc;
    font-size: .28rem;
    background: none;
    border: none;
    outline: none;
}
.yzm_box .wx_yz input{
    width: 2.5rem;
}
.yzm_box .wx_yz .yzm {
    float: right;
    width: 1.8rem;
    font-size: .8rem;
    line-height: 0;
    color: #0085D0;
    text-align: center;
    border-left: 0.02rem solid #eeeeee;
}
.yzm_box .wx_yz .yzm > div > span {
    text-align: center;
    border-radius: 3px;
    font-size: .28rem;
    height: .44rem;
    line-height: .44rem;
}
.yzm_box .wx_yz .yzm .yellow {
    color: #0085D0;
}
.yzm_box .wx_yz .yzm .gray {
    color: #999;
    font-size: .28rem;
}
/*我的特权*/
.privilegeMode .cont1{
    margin: .48rem .75rem;
    position: relative;
}
.privilegeMode .cont1 .text{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}
.privilegeMode .cont1 .text .name{
    padding: .3rem 0 0 .3rem;
    font-size: .3rem;
    color: #FFFFFF;
}
.privilegeMode .cont1 .text .name span{
    padding: 0 .05rem;
}
.privilegeMode .cont1 .text .cent{
    padding: .35rem .2rem 0 .2rem;
    text-align: center;
    color: #FFFFFF;
}
.privilegeMode .cont1 .text .cent .p1{
    opacity: .8;
    font-size:.26rem;
}
.privilegeMode .cont1 .text .cent .p2{
    font-size: .38rem;
    font-weight: bold;
}
.privilegeMode .cont1 .text .cent .p2 span{
    padding-right: .1rem;
}
.privilegeMode .cont2 ul{
    padding-top: .25rem;
    margin: 0 .24rem;
}
.privilegeMode .cont2 ul li{
    height: .73rem;
    line-height: .73rem;
    border-bottom: 0.01rem solid #eeeeee;
}
.privilegeMode .cont2 ul li a{
    display: block;
    font-size: .26rem;
    color: #333333;
}
.privilegeMode .cont2 ul li a:after{
    display: block;
    clear: both;
    content: "";
}
.privilegeMode .cont2 ul li .left{
    width: 50%;
    float: left;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-weight: bold;
}
.privilegeMode .cont2 ul li .right{
    text-align: right;
    width: 50%;
    float: right;
}
.privilegeMode .cont3{
    margin: 40% .5rem 0 .5rem;
    text-align: center;
    font-size:.26rem;
    color: #999999;
}
/*使用说明*/
.explainMode .tab{
    margin: .48rem .12rem .26rem .12rem;
}
.explainMode .tab ul:after{
    display: block;
    content: "";
    clear: both;
}
.explainMode .tab li{
    width: 33.3%;
    float: left;
    color: #333333;
    margin-bottom: .22rem;
}
.explainMode .tab li.active p{
    background:url(../images/liActive.png) no-repeat right bottom;
    background-size: .39rem .33rem;
}
.explainMode .tab li p{
    margin: 0 .12rem;
    text-align: center;
    font-size:.3rem;
    background: #f5f5f5;
    height: .72rem;
    line-height: .72rem;
    border-radius: 5px;
}

.explainMode .tab li.active{
    color: #FD7B00;
}
.explainMode .tab li.active p{
    background:#fdf2db url(../images/liActive.png) no-repeat right bottom;
    background-size: .39rem .33rem;
}
.explainMode .contBox {

}
.explainMode .contBox .box{
    margin: .25rem .23rem 0 .23rem;
}
.explainMode .contBox .box li{
    padding-bottom: .25rem;
    border-bottom: 0.01rem solid #eeeeee;
}
.explainMode .contBox .box li:last-child{
    border-bottom: none;
}
.explainMode .contBox .box li .line1{
    padding-top: .22rem;
    font-size:.26rem;
    color: #333333;
    font-weight: bold;
    padding-bottom: .13rem;
}
.explainMode .contBox .box li .line2{
    font-size:.24rem;
    color: #999999;
}
.explainMode .contBox .box li .line2 b{
    color: #333333;
    padding: 0 .05rem;
}

/*左右偏移*/
.move3{
    animation: myfirst3 1s infinite;
    -moz-animation: myfirst3 1s infinite;	/* Firefox */
    -webkit-animation: myfirst3 1s infinite;	/* Safari 和 Chrome */
    -o-animation: myfirst3 1s infinite;	/* Opera */
}

@keyframes myfirst3
{
    0% {transform:translateX(3px)}
    50% {transform:translateX(0)}
    100% {transform:translateX(3px)}
}

@-moz-keyframes myfirst3 /* Firefox */
{
    0% {transform:translateX(3px)}
    50% {transform:translateX(0)}
    100% {transform:translateX(3px)}
}

@-webkit-keyframes myfirst3 /* Safari 和 Chrome */
{
    0% {transform:translateX(3px)}
    50% {transform:translateX(0)}
    100% {transform:translateX(3px)}
}

@-o-keyframes myfirst3 /* Opera */
{
    0% {transform:translateX(3px)}
    50% {transform:translateX(0)}
    100% {transform:translateX(3px)}
}

/* 领取规则 */
.popBox5 .mode {
    max-height: 8.06rem;
    overflow: hidden;
}

.popBox5 .text {
    height: 5.85rem;
    overflow: auto;
}

.popBox5 .text p {
    margin-bottom: .5rem;
    line-height: .48rem;
}

.popBox5 .btn, .popBox6 .btn, .popBox7 .btn {
    height: .98rem;
    line-height: .98rem;
    font-size: .36rem;
    text-align: center;
    border-top: 1px solid #e5e5e5;
}

.popBox5 .btn a, .popBox6 .btn a, .popBox7 .btn a {
    display: block;
    height: 100%;
    color: #0085d0;
    font-weight: 700;
}

/* 领取成功/领取失败 */
.popBox6 .cont, .popBox7 .cont, .popBox8 .cont {
    text-align: center;
    padding-top: .65rem;
}

.popBox6 .icon, .popBox7 .icon, .popBox8 .icon {
    text-align: center;
}

.popBox6 .icon img, .popBox7 .icon img, .popBox8 .icon img {
    display: inline-block;
    width: 1.28rem;
}

.popBox6 .text h3, .popBox7 .text h3, .popBox8 .text h3 {
    font-size: 0.32rem;
}

.popBox6 .text p, .popBox7 .text p {
    color: #999;
    margin-top: 0.1rem;
}
.popBox8 .text{
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.popBox8 .text h3{
    padding-bottom: 0.25rem;
    margin-right: 0.2rem;
}
/*加载中*/

.stage {
    width: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25rem 0;
    margin: 0 -5%;
    overflow: hidden;
    position: relative;
}
.dot-pulse {
    margin-top: -0.18rem;
    position: relative;
    left: -9999px;
    width: 4px;
    height:4px;
    border-radius: 20px;
    background-color: #333;
    color: #333;
    box-shadow: 9984px 0 0 0 #333,333px 0 0 0 #333,10014px 0 0 0 #333;
    animation: dotPulse 1.5s infinite linear
}

@keyframes dotPulse {
    0% {
        box-shadow: 9984px 0 0 -5px #333,9999px 0 0 0 #333,10014px 0 0 2px #333
    }

    25% {
        box-shadow: 9984px 0 0 0 #333,9999px 0 0 2px #333,10014px 0 0 0 #333
    }

    50% {
        box-shadow: 9984px 0 0 2px #333,9999px 0 0 0 #333,10014px 0 0 -5px #333
    }

    75% {
        box-shadow: 9984px 0 0 0 #333,9999px 0 0 -5px #333,10014px 0 0 0 #333
    }

    100% {
        box-shadow: 9984px 0 0 -5px #333,9999px 0 0 0 #333,10014px 0 0 2px #333
    }
}

.confirm{
    font-weight: bold;
}
.none{
    display: none;
}

/*2020.8.31tao*/
.mode7 {
    padding-bottom:0;
}
.campusMode .mode8{
    padding-bottom: 0.5rem;
}

/*2020.9.27tao*/
.mode2{
    margin: -1.15rem .3rem 0;
}
.mode2 .btn {
    display: -webkit-flex;
    justify-content: space-between;
    margin-top: 0.55rem;
}
.mode2 .btn div {
    padding: 0.18rem 0;
    text-align: center;
    color: #fd7b00;
    background: #ffebd9;
    font-size: 0.28rem;
    border-radius: 5px;
    width: 2.98rem;
}
/*.mode7 {
    padding-bottom: .5rem;
}*/
.listCom ul::-webkit-scrollbar {
    display: none;
}