@media screen and (min-width: 641px) {
    html, body {
        font-size: 30px;
    }
}

@media screen and (min-width: 521px) and (max-width: 640px) {
    html, body {
        font-size: 22px;
    }
}
@media screen and (min-width: 411px) and (max-width: 520px) {
    html, body {
        font-size: 16px;
    }
}

@media screen and (min-width: 375px) and (max-width: 410px) {
    html, body {
        font-size: 15px;
    }

}

@media screen and (max-width: 374px) {
    html, body {
        font-size: 14px;
    }
}




/*以下处理兼容*/
@media screen and (max-width: 768px) and (min-width: 641px) {
    .activelistes .pic-s{
        width: 100%;
        background-size: 13%;
        background-position: 0px -198px;
    }
    .activelistes .pic-n {
        background-size: 26%;
        background-position: 0px -135px;
    }
    .activelistes .pic-t {
        background-size: 26%;
        background-position: 1px -65px;
    }
    .matchtext {
        width: 63%;
    }
    .awardset .awardsetThree-c {
        right: 1.2rem;
    }
    .awardset .awardsetThree-b {
        margin: 0px 36%;
    }
    .matchYQ-time span{
        width: 80px;
        height: 80px;
    }

    .matchYQ-time p {
        top: .4rem;
        text-indent: 60px;
    }
    .matchYQ-time {
        bottom: .6rem;
    }
    .awardsetNum {
        padding-top: 34px;
    }
    .footer span{
        background: url(../../images/app/tiao.png) no-repeat center 70px;
    }
    .footertiao{
        background: url(../../images/app/tiao-a.png) no-repeat center 66px;
    }
}

@media screen and (max-width: 600px) and (min-width: 522px) {
    .activelistes .pic-s{
        width: 100%;
        background-size: 13%;
        background-position: 0px -144px;
    }
    .activelistes .pic-n {
        background-size: 26%;
        background-position: 0px -98px;
    }
    .activelistes .pic-t {
        background-size: 26%;
        background-position: 6px -46px;
    }

}

@media screen and (max-width: 414px) and (min-width: 376px){
    .activelistes .pic-s{
        width: 100%;
        background-size: 13%;
        background-position: 0px -103px;
    }
}
@media screen and (max-width: 375px) and (min-width: 361px) {
    .activelistes .pic-s{
        width: 100%;
        background-size: 13%;
        background-position: 0px -96px;
    }
    .activelistes .pic-n {
        background-size: 26%;
        background-position: 0px -67px;
    }
    .activelistes .pic-t {
        background-size: 26%;
        background-position: 0px -32px;
    }

}
@media screen and (max-width: 360px) and (min-width: 321px) {
    .activelistes .pic-s{
        width: 100%;
        background-size: 13%;
        background-position: 0px -90px;
    }
    .activelistes .pic-n {
        background-size: 26%;
        background-position: 0px -63px;
    }
    .activelistes .pic-t {
        background-size: 26%;
        background-position: 0px -30px;
    }

}

@media screen and (max-width: 320px){
    .matchtext {
        width: 63%;
    }
    .awardset .awardsetThree-c {
        right: 1.2rem;
    }
    .awardset .awardsetThree-b {
        margin: 0px 36%;
    }
    .matchYQ-time {
        left: 1.2rem;
    }
    .listwh{
        width: 9rem;
    }
    .titleTabul{
        height: 2.7rem;
    }
    .activelistes .pic-s{
        width: 100%;
        background-size: 13%;
        background-position: 0px -77px;
    }
    .activelistes .pic-t {
        background-size: 26%;
        background-position: 0px -25px;
    }
    .activelistes .pic-n {
        background-size: 26%;
        background-position: 0px -52px;
    }
    .button-wrap {
        padding: 0rem 2rem;
    }
}