*{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;outline: none;}
body{width: 100%;overflow-x: hidden;background: url(../images/bg-red.jpg) top center no-repeat #f5f5f5;background-size: 100%;}
img{vertical-align: middle;max-width: 100%;}
a:hover,a:active,a:visited,a:link,a:focus{-webkit-tap-highlight-color: transparent;outline:none;text-decoration: none;
}
.red{color: #ff2d23;}
.container{width: 100%;padding: .4rem .2rem;}
/*顶部*/
.top-bar{display: flex;justify-content: space-between;align-items: center;color: #FFFFFF;}
.top-bar i{}
.top-bar span{font-size: .36rem;}
.top-bar a{font-size: .26rem;}
/*积分面板*/
.jf-panel{width: 100%;padding-top: .85rem;padding-right: .35rem;}
.jf-panel .dj{float: right;display: flex;justify-content: flex-end;align-items: center;font-size: .25rem;background: #fed4b7;border-radius: .42rem;}
.jf-panel .dj img{width: .42rem;height: .42rem;}
.jf-panel .dj span{padding: 0 .25rem 0 .14rem;}
.jf-panel .jf{padding-top: .3rem;display: flex;justify-content: center;align-items: flex-end;width: 100%;padding-bottom: .48rem;}
.jf-panel .jf label{font-size: .26rem;}
.jf-panel .jf span{font-size: .88rem;line-height: .70rem;padding-right: .3rem;padding-left: .05rem;}
.jf-panel .jf a{font-size: .24rem;padding: .05rem .42rem .06rem .18rem;background: url(../images/icon-right.png) right .14rem center no-repeat #ff2d23;background-size: auto .23rem;color: #FFFFFF;border-radius: .34rem;}
.jf-panel .sigin-btn{width: 4.32rem;height: .94rem;margin: 0 auto;display: flex;justify-content: center;align-items: center;font-size: .32rem;background: url(../images/btn-bg.png) center center no-repeat;background-size: 100% 100%;letter-spacing: .03rem;}
/*签到面板*/
.qd-panel{width: 100%;border-radius: .20rem;background: #FFFFFF;margin-top: .25rem;padding: .3rem;}
.qd-panel h3{font-size: .32rem;color: #333333;font-weight: bold;padding: .1rem 0 .28rem 0;}
.qd-panel h3 span{font-weight: bold;padding: 0 .02rem;}
.qd-panel ul{display: flex;justify-content: space-between;}
.qd-panel ul li{width: .82rem;height: 1.12rem;display: flex;flex-direction: column;align-items: center;background: #f5f5f5;border-radius: .1rem;}
.qd-panel ul li i{font-size: .2rem;display: inline-block;width: .5rem;height: .5rem;line-height: .5rem;background: #e6e6e6;border-radius: 50%;text-align: center;margin-top: .12rem;margin-bottom: .08rem;color: #333;}
.qd-panel ul li span{font-size: .22rem;color: #888888;}
.qd-panel ul li.active{width: .87rem;height: 1.26rem;background: url(../images/sigin-active-bg.png) center center no-repeat;background-size: .87rem 1.26rem;}
.qd-panel ul li.active i{color: #ff8900;background: none;padding-right: .05rem;}
.qd-panel ul li.active span{color: #FFFFFF;}
.qd-panel .rule{padding-top: .26rem;padding-bottom: .1rem;width: 100%;display: flex;justify-content: space-between;color: #333333;font-size: .28rem;}
.qd-panel .rule a{height: .34rem;display: inline-block;padding-left: .45rem;background: url(../images/icon-info.png) left center no-repeat;background-size: .34rem;}
.qd-panel .rule p{display: flex;}
.qd-panel .rule p span{display: inline-block;width: .8rem;height: .36rem;background: #ff2d23;margin-left: .1rem;border-radius: .36rem;position: relative;}
.qd-panel .rule p span:after{content: "";display: block;width: .32rem;height: .32rem;border-radius: 50%;background: #FFFFFF;position: absolute;right: .02rem;top: .02rem;box-shadow: 0 0 .02rem rgba(0,0,0,.8);}
.qd-panel .rule p span.close{background: #e6e6e6;}
.qd-panel .rule p span.close:after{right: auto;left: .02rem;box-shadow: 0 0 .02rem rgba(0,0,0,.2);}
/*快捷导航*/
.quick-nav{padding: .4rem .65rem;width: 100%;border-radius: .20rem;background: #FFFFFF;margin-top: .2rem;}
.quick-nav ul{display: flex;justify-content: space-between;}
.quick-nav ul li a{display: flex;align-items: center;justify-content: center;flex-direction: column;}
.quick-nav ul li img{width: 1rem;height: 1rem;}
.quick-nav ul li p{font-size: .28rem;color: #333333;padding-top: .25rem;}
/*任务列表*/
.task{padding: .3rem .2rem 0 .2rem;width: 100%;border-radius: .20rem;background: #FFFFFF;margin-top: .2rem;}
.task .title{width: 100%;display: flex;justify-content: center;align-items: center;font-size: .32rem;color: #333333;padding-bottom: .3rem;border-bottom: .01rem solid #f6f6f6;}
.task .title i{display: inline-block;width: .38rem;height: .26rem;margin: 0 .45rem;background: url(../images/title-bg.png) center center no-repeat;background-size: .38rem .26rem;}
.task ul li{display: flex;width: 100%;justify-content: space-between;align-items: center;padding: .46rem 0;border-bottom: .01rem solid #f6f6f6;}
.task ul li:last-child{border-bottom: none;}
.task ul li img{flex-shrink: 0;display: inline-block;width: .8rem;height: .8rem;border-radius: 50%;margin-right: .2rem;}
.task ul li a{flex-shrink: 0;display: inline-block;width: 1.4rem;height: .46rem;line-height: .46rem;text-align: center;background: #fff4ca;color: #c8882f;font-size: .28rem;border-radius: .46rem;}
.task ul li .info{display: flex;flex-direction: column;width: 100%;text-align: left;}
.task ul li .info .t{padding-bottom: .20rem;display: flex;}
.task ul li .info .t span{color: #333333;font-size: .32rem;letter-spacing: .02rem;}
.task ul li .info .t img{display: inline-block;margin: 0 .05rem 0 .08rem;width: .32rem;height: .32rem;}
.task ul li .info .t span.red{color: #ff2d23;font-size: .34rem;font-weight: bold;letter-spacing: 0;}
.task ul li .info .desc{font-size: .24rem;color: #999999;}
/* 遮罩层 */
.custom-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* 弹窗 */
.custom-popup {
    position: relative;
    background: white;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    text-align: center;
}

/* 蓝色填充层（海浪效果，文字在上面） */
.custom-popup::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #8FF85569;
    transform: scaleX(0) scaleY(0);
    transform-origin: left bottom;
    animation: waveFill 0.8s ease-out forwards;
    z-index: 0;
}

/* 让文字显示在最上层 */
.custom-popup span {
    position: relative;
    z-index: 1;
}

/* 蓝色区域填充动画（完全填满） */
@keyframes waveFill {
    0% {
        transform: scaleX(0) scaleY(0);
        border-radius: 50% 0 0 0;
    }
    50% {
        transform: scaleX(1.2) scaleY(0.8);
        border-radius: 40% 10% 0 0;
    }
    100% {
        transform: scaleX(1.5) scaleY(1.5);
        border-radius: 0;
    }
}