.wrapper{
    height: 100vh;
    box-sizing: border-box;
}
.btn-record{
    width: 2.72rem;
    height: .6rem;
    background-image: url("https://static.tebakgame.com/images/community/button/btn_record.png");
}

.item-hot{
    padding: .15rem .25rem;
    margin: .2rem auto 0;
    width: 7.02rem;
    height: 5.19rem;
    background-image: url("https://static.tebakgame.com/images/community/bg_hot_act.png");
    box-sizing: border-box;
    display: none;
}
.item-hot .hot-title{
    margin:0 auto .15rem;
    font-family: 'NewEras';
    font-size: .32rem;
    text-align: center;
}
.ico-hot{
    top: -.15rem;
    left: .15rem;
    width: 1.01rem;
    height: 1.26rem;
    background-image: url("https://static.tebakgame.com/images/community/icon/ico_hot.png");
}

.act-card{
    margin: 0 auto;
    width: 6.55rem;
    cursor: pointer;
}
.act-card .act-img{
    width: 100%;
    height: 3.3rem;
    object-fit: cover;
}
.item-hot .act-card .act-img{
    height: 3.65rem;
}
.act-card .act-info{
    padding: .1rem;
    font-size: .23rem;
}
.act-card .act-info .act-title{
    width: 50%;
    font-family: 'NewEras';
    color: #08A288;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.act-card .act-info .act-date{
    white-space: nowrap;
}
.act-title i{
    display: inline-block;
    position: relative;
    top: .02rem;
    margin-right: .05rem;
    width: .29rem;
    height: .23rem;
    background-image: url("https://static.tebakgame.com/images/community/icon/ico_title.png");
}
.act-card .act-info .act-date i{
    display: inline-block;
    position: relative;
    top: -.03rem;
    margin-right: .05rem;
    width: .25rem;
    height: .25rem;
    background-image: url("https://static.tebakgame.com/images/community/icon/ico_date.png");
    flex-shrink: 0;
}
.tab-act li{
    margin-top: .25rem;
    width: 3.17rem;
    height: .67rem;
    font-family: 'NewEras';
    font-size: .32rem;
    color: #85ffd5;
    background: #39B08F;
    border: .02rem #39B08F solid;
    -webkit-border-radius: .2rem .2rem 0 0;
    border-radius: .2rem .2rem 0 0;
    cursor: pointer;
}
.tab-act li.active{
    position: relative;
    top: .03rem;
    background: #EAFFEF;
    border: .02rem #6BF4C3 solid;
    border-bottom-color: #EAFFEF;
    color: #008a73;
}
.act-content{
    padding: .2rem 0;
    margin: 0 auto;
    width: 6.75rem;
    min-height: 2rem;
    background:-webkit-linear-gradient(#EAFFEF,#C3FCE3) ;
    background:linear-gradient(#EAFFEF,#C3FCE3) ;
    border: .03rem #6BF4C3 solid;
    -webkit-border-radius: .2rem;
    border-radius: .2rem;
    box-shadow: 0 0 .05rem rgba(0,95,83,.4);
    flex: 1;
    box-sizing: border-box;
}
.act-content-list{
    display: none;
}
.act-content-list.active{
    display: block;
}
.act-content-list .empty{
    width: 100%;
    height: 100%;
    opacity: .5;
}
.act-ongoing-list,
.act-failure-list{
    margin: 0 auto;
    padding: .1rem 0;
    width: 6.39rem;
    background: #D3F8E3;
    -webkit-border-radius: .1rem;
    border-radius: .1rem;
    flex: 1;
    overflow-y: auto;
}

.act-ongoing-list .act-card{
    margin:.1rem auto .2rem;
    width: 6.05rem;
}
.act-ongoing-list .act-info{
    background: #E8FFEE;
    box-shadow: 0 .05rem .02rem #8ADFBC;
}
.act-failure-list li{
    margin: 0 auto;
    padding: .1rem 0;
    width: 96%;
    font-size: .23rem;
    border-bottom: .02rem #AEEED4 solid;
    gap: .2rem;
    cursor: pointer;
}
.act-failure-list li:last-of-type{
    border-bottom: none;
}
.act-failure-list li .act-title {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.act-failure-list li .act-title i{
    margin-right: .15rem;
    opacity: .9;
}
.act-failure-list li .act-date{
    font-size: .17rem;
    color: #53bda4;
}