body{
    background-image: url("../../../images/mobile/corpTask/red_bg.png");
    background-size:100%;
    background-repeat:no-repeat;
    padding-bottom:0 !important;
    background-color:rgb(246,154,145);
}
.reward{
    width:100vw;
    min-height:100vh;
    box-sizing: border-box;
    /* background:#FD7A4C; */
    overflow:hidden;
    padding:5vw 5vw;
    
}
.user-info{
    height:8vw;
    display:inline-block;
    line-height:8vw;
    /* display:flex; */
    /* width:70vw; */
    /* align-items:center; */
    color:#fff;
    font-size:4.26666vw;
    background:rgba(255,255,255,.3);
    border-radius:8vw;
    padding-right:2vw;
}
.user-info p{
    /* display:flex; */
    /* flex:1; */
    display:inline-block;
    overflow:hidden;
    font-size:3.7333vw;
    height:8vw;
    line-height:8vw;
    white-space: nowrap;
}
.user-info>p span:first-of-type{
    
    max-width:30vw;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis; 
}
.user-info span{
    color:#fff;
    display:inline-block;
    vertical-align:middle;
    /* max-width:30vw; */
    /* white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis; */
} 
.user-info>p span:last-of-type{
    max-width:50%;
    margin-right:1vw;
}
.flex-shrink-0{
    flex-shrink:0;
}

.user-head{
    flex-shrink:0;
    vertical-align:top;
}


.invite-ad{
    width:80vw;
    margin-top:7vw;
    margin-left:50%;
    transform: translateX(-50%);
}


.rule-btn{
    width:22vw;
    height:8vw;
    line-height:8vw;
    font-size:3.73333vw;
    position:fixed;
    right:0;
    top:7vw;
    background:rgba(0,0,0,.3);
    display:flex;
    align-items:center;
    box-sizing:border-box;
    padding:0 0vw 0 3vw ;
    border-radius:8vw 0 0 8vw;
    color:#fff;
    z-index:10;
}
.rule-btn span{
    margin-left:1vw;
}

.reward-box{
    width:100%;
    width:85.333vw;
    height:73.333vw;
    margin:24vw auto 0;
    border-radius:2vw;
    box-sizing:border-box;
    padding:3vw;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    background-image:url("../../../images/mobile/corpTask/red_award_bg.png");
    background-size:100% 100%;
    position:relative;
}
.reward-box .reward-info{
    position:absolute;
    left:8vw;
    top:-15vw;
    width:68vw;
    height:50vw;
    background-image:url("../../../images/mobile/corpTask/card-bg.png");
    background-size:100% 100%;
    display:flex;
    flex-direction:column;
    align-items:center;

    box-sizing:border-box;
    padding:5vw;
    /* justify-content:center; */
    color:#777;
}
.reward-info .total strong{
    font-size:10vw;
    margin-right:1vw;
    color:rgb(242,47,57);
}

.reward-info .tongji{
    display:flex;
    width:100%;
}
.reward-info .tongji p{
    flex:1;
    display:flex;
    flex-direction:column;
    text-align:center;
}
.reward-info .tongji p strong{
    font-size:4.2666vw;
    color:rgb(242,47,57);
}

.reward-info .tongji p span{
    font-size:3.2666vw;
}


.invite-box{
    position:absolute;
    width:100%;
    left:0;
    bottom:0;
    height:55vw;
    background-image:url("../../../images/mobile/corpTask/packet-bottom-bg.png");
    background-size:100%;
    display:flex;
    flex-direction:column;
    justify-content: flex-end;
    align-items:center;
    box-sizing:border-box;
    padding:8vw;
}
.invite-box .invite-btn{
    height:12vw;
    width:60vw;
    /* background:rgb(255,221,139); */
    background-image:url("../../../images/mobile/corpTask/invite-btn.png");
    background-size:100% 100%;
    font-size:4.266666vw;
    color:rgb(168,52,19);
    text-align:center;
    display:flex;
    line-height:10vw;
    /* align-items:center; */
    justify-content:center;
    border-radius:8vw;
    /* box-shadow:0 2vw 2vw  0 rgb(230,122,86); */
}
.invite-box .invite-btn i{
    font-size:4.2666vw;
    margin-right:2vw;
}

.invite-box .award-rule{
    color:#fff;
    display:flex;
    flex-direction: column;
    margin-bottom:5vw;
    text-align:center;
    font-size:3.75vw;
}

.reward-box .gold2{
    width:10vw;
    position:absolute;
    top:-10vw;
    left:10vw;
}
.reward-box .gold1{
    width:15vw;
    position:absolute;
    top:50vw;
    left:0vw;
}
.reward-box .gold3{
    width:15vw;
    position:absolute;
    right:9vw;
    top:0vw
}

.support{
    position:fixed;
    bottom:1vw;
    margin-bottom:0 !important;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    padding:5px 0 !important;
}



.record-box{
    width:100%;
    /* min-height:50vw; */
    margin-top:5vw;
    /* height:calc(100vh - 92vw); */
    display:flex;
    flex-direction:column;
    border-radius:0 0 2vw 2vw;
    overflow:hidden;
}
.record-box .record-type{
    height:12vw;
    flex-shrink:0;
    display:flex;
    align-items:flex-end;
}

.record-box .record-type li{
    flex:1;
    height:9vw;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgb(229,19,63);
    border-radius:2vw 2vw 0 0;
    color:#fff
}
.record-box .record-type li i{
    font-size: 4.2666vw;
    margin-right:2vw;

}
.record-box .record-type li img{
    width:4.2666vw;
    margin-right:2vw;
}

.record-box .record-type li.active{
    height:12vw;
    background:#fff;
    color:rgb(237,0,20);
}

.record-box .friend-list,.record-box .record-list{
    background:#fff;
    min-height:30vw;
    flex:1;
    box-sizing:border-box;
    padding:2vw 4vw;
}
.record-box .friend-list p,.record-box .record-list p{
    display:flex;
    justify-content: space-between;
    color:rgb(100,30,15);
    height:8vw;
    line-height:8vw;
}
.record-box .friend-list ul,.record-box .record-list ul{
    overflow-y:scroll;
    flex:1;
    height:calc(100% - 8vw);
}
.record-box .friend-list ul::-webkit-scrollbar,.record-box .record-list ul::-webkit-scrollbar{
    display:none;
}
.record-box .friend-list ul li,.record-box .record-list ul li{
    display:flex;
    font-size:3.2vw;
    height:14vw;
    align-items:center;
    position:relative;
}
.record-box .record-list ul li{
    font-size:3.7333vw;
}

.record-box .record-list ul li .new{
    position:absolute;
    right:0;
    color:rgb(237,0,20);
    bottom:0;
    font-size:3.2666vw;
}

.record-box .friend-list ul li .user{
    display:flex;
    width:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
}

.record-box .friend-list ul li .user span{
    flex:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-left:1vw;
}

.load-msg{
    color:#aaa;
    text-align:center ;
    justify-content:center;
    font-size:3.2vw !important;
}


.van-popup{
    background:none;
    overflow-y:unset;
}


.rule-wrap{
    width:80vw;
    background:rgb(220,85,55);
    border-radius:2vw;
    padding:2vw;
    max-height:100vw;
    position:relative;
}



.rule-wrap .rule-box{
    width:100%;
    height:100%;
    box-sizing:border-box;
    padding:4vw;
    background:#fff;
    border-radius:2vw;
    min-height:50vw;
    display:flex;
    flex-direction:column;
}

.rule-box .rule-head{
    text-align:center;
    font-size:4.8vw;
    color:rgb(218,83,55);
    margin-bottom:4vw;
    line-height:8vw;
    flex-shrink:0;
}

.rule-box .rule-content{
    box-sizing:border-box;
    width:100%;
    flex:1;
    overflow-y:scroll;
    max-height:80vw;
}
.rule-box .rule-content::-webkit-scrollbar{
    display:none;
}
.rule-close{
    position:absolute;
    bottom:-12vw;
    left:50%;
    color:#fff;
    transform:translateX(-50%);
}



.poster-wrap{
    width:100vw;
    height:100vh;
    box-sizing:border-box;
    color:#fff;
    display:flex;
    flex-direction:column;
}
.poster-wrap .poster-box{
    flex:1;
    display:flex;
    align-items:center;
    flex-direction:column;
    justify-content: center;
    position:relative;
}

.poster-box img{
    width:65vw;
}

.poster-wrap .share-box{
    height:25vw;
    background:#fff;
    color:#777;
    box-sizing:border-box;
    padding:2vw 5vw;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    align-items:center;
}
.share-box .share-text{
    height:12vw;
    overflow:hidden;
}
.share-box span.copy{
    height:5vw;
    line-height:5vw;
    color:#409eff;
}
.my-4{
    margin:4vw 0;
}




.redpacket .not-open{
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    /* // display:none; */
    transform:scale(1);
    transition:all 0.4s ease-in-out;
}


.redpacket .not-open .red-box1{
    width:80vw;
    height:90vw;
    background-image: url(../../../images/mobile/corpTask/packet_bg.png);
    background-size:100% 100%;
    display:flex;
    align-items: center;
    flex-direction: column;
}


.redpacket .not-open .red-box1 .gold{
    width:22vw;
    height:22vw;
    display:flex;
    justify-content: center;
    align-items: center;
}
.redpacket .not-open .red-box1 .gold img{
    width:20vw;
    height:20vw;
    animation:jump 1.2s ease-in-out infinite
}


.redpacket .not-open .red-box1 strong{
    margin: 10vw auto 10vw;
    font-size:6vw;
    color:#FFD7B4;
}


.redpacket .not-open .red-box1 p{
    font-size:4vw;
    color:#FFD7B4;
    margin-bottom:10vw;
}

.redpacket  .opened{
    width:80vw;
    height:50vw;
    position:fixed;
    left:0vw;
    top:50%;
    display:none;
    transition:all 1s ease-in-out;
}
.redpacket  .opened .card{
    width:67vw;
    height:45vw;
    background-image: url(../../../images/mobile/red_card_bg.png);
    background-size: 100% 100%;
    position:absolute;

    transform:translateX(-50%);
    left:50%;
    display:flex;
    flex-direction: column;
    box-sizing: border-box;
    padding:5vw 0;
    align-items: center;

    bottom:20vw;
    transition:all 0.5s linear;
    transition-delay: 0.8s;
    border:none;
    box-shadow: 0 2px 12px 0 rgba(175, 0, 0,.1);
}
.redpacket  .opened .card .title {
    font-size:7vw;
    color:rgb(223,146,53);
    margin:5vw auto;
    font-weight:500;
}
/* .redpacket  .opened .card  p{
    color:#333333;
    margin-bottom:10vw;
    font-size:4.5vw;
} */

.redpacket  .opened .card strong{
    font-size:10vw;
    color:#FF4F64;
    line-height:13vw;
}

.redpacket  .opened .packet-shell{
    position:absolute;
    font-size:4vw;
    bottom:0;
    width:100%;
    height:70vw;
    background-image:url(../../../images/mobile/red_open_bg.png);
    background-size:100% 100%;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.redpacket  .opened .packet-shell span{
    line-height:7vw;
    color:#FFD7B4;
}

@keyframes rotate {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }

  .packet-num::after{
    content:'元';
    font-size:5vw;
    vertical-align: middle;
}



.disable-invite-btn{
    /* background:#909399 !important; */
    /* box-shadow:0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !important; */
    color:#fff !important;
    background-image:url("../../../images/mobile/corpTask/disable-invite-btn.png") !important;
}



.support{
    position:static;
    transform:unset;

}
.support *{
    color:#cccccc !important;
}


.draw-box{
    width:75vw;
    height:100vw;
    background-image:url("../../../images/mobile/corpTask/draw_bg.png");
    background-size:100% 100%;
    border-radius:1vw;
    position:relative;
    display:flex;
    flex-direction:column;
}
.draw-box .close-draw{
    position:absolute;
    right:3vw;
    top:3vw;
    font-size:5.2666vw;
    color:rgb(207,207,207);
}
.draw-box .draw-box-top{
    height:50%;
    display:flex;
    flex-direction: column;
    align-items: center;
}

.draw-box .draw-box-top .draw-title{
    margin:7vw 0 6vw;
    font-size:3.7333vw;
    color:rgb(140,140,140);
    font-weight:500;
}
.draw-box .draw-box-top p{
    color:rgb(150,110,50);
}
.draw-box .draw-box-top p strong{
    font-size:10vw;
}
.draw-box .draw-box-bottom{
    height:50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    box-sizing:border-box;
    padding:7vw;
    color:#fff;
}
.draw-box .draw-box-bottom p{
    margin-bottom:5vw;
    color:rgb(255,195,130);
}
.draw-box .draw-box-bottom p span{
    color:#fff;
}
.draw-box .draw-box-bottom .disable-draw-btn{
    width:100%;
    height:15vw;
    background-image:url("../../../images/mobile/corpTask/disable-draw-btn.png");
    background-size:100% 100%;
    line-height:10vw;
    text-align:center;
    color:#fff;
}
.draw-box .draw-box-bottom .disable-draw-btn.draw-btn{
    color:rgb(134,105,47);
    background-image:url("../../../images/mobile/corpTask/draw-btn.png");
}