.spage-total{display: inline-block;margin-right: 20px;line-height: 35px;color: #666;font-size:14px;}
.spage-number{display: inline-block;color: #666;font-size:14px;}
.spage-number span{position: relative; user-select: none;box-sizing: border-box;display: inline-block;margin-left:-1px;padding: 0px 14px;line-height: 33px;border:1px solid #ddd;text-align: center;transition: all .2s;cursor: pointer;}
.spage-number span.active{background: #2d98e6;color: #fff;border-color:#2d98e6;border-color:#2d98e6;z-index: 3;}
.spage-number span.active:hover{background: #2d98e6;color: #fff;border-color:#2d98e6;border-color:#2d98e6;z-index: 3;}
.spage-number span:hover{background-color: #eee;}
.spage-number span.span-disabled{cursor: not-allowed;color: #ccc;}
.spage-skip{display: inline-block;margin-left: 20px;line-height: 35px;color: #666;font-size:14px;}
.spage-skip input{box-sizing: border-box;display: inline-block;width: 45px;height: 35px;line-height: 35px;text-align: center;vertical-align: top;border:1px solid #ddd;outline: none;transition: all .2s;}
.spage-skip input:focus{border-color: #2d98e6;}
.spage-skip span{display: inline-block;padding: 0px 14px;line-height: 33px;vertical-align: top;color: #666;outline: none;border:1px solid #ddd;cursor: pointer;transition: all .2s;}
.spage-skip span:hover{background: #2d98e6;color: #fff;border:1px solid #2d98e6;}
@media only screen and (max-width:500px){
    .spage-total{
        width: 100%;
        margin: 0 auto;
        border:none;
        display: inline-block;
        margin-right: 20px;
        line-height: 35px;
        color: #fff;
        font-size:10px;
    }
    .spage-number{
        border:none;
        display: inline-block;
        color: #fff;
        font-size:10px;
    }
    .spage-number span{
        border:none;
        background-color:transparent;
        position: relative;
        user-select: none;
        box-sizing: border-box;
        display: inline-block;
        margin-left:-1px;
        padding: 0px 8px;
        line-height: 33px;
        text-align: center;
        transition: all .2s;
        cursor: pointer;
    }
    .spage-number span.active{
        background: #e72a54;
        color: #fff;
        /* border-color:#2d98e6; */
        /* border-color:#2d98e6; */
        z-index: 3;
    }
    .spage-number span.active:hover{
        background: #e72a54;
        /* color: #fff; */
        /* border-color:#2d98e6; */
        /* border-color:#2d98e6; */
        z-index: 3;
    }
    .spage-number span:hover{
        background-color:transparent;
    }
    .spage-number span.span-disabled{
        background-color:transparent;
        cursor: not-allowed;
        color: #fff;
    }
    .spage-skip{
        display: inline-block;
        margin-left: 20px;
        line-height: 35px;
        color: #fff;
        font-size:14px;
    }
    .spage-skip input{
        box-sizing: border-box;
        display: inline-block;
        width: 45px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        vertical-align: top;
        /* border:1px solid #ddd; */
        outline: none;
        transition: all .2s;
    }
    .spage-skip input:focus{
        /* border-color: #2d98e6; */
    }
    .spage-skip span{
        display: inline-block;
        padding: 0px 14px;
        line-height: 33px;
        vertical-align: top;
        color: #fff;
        outline: none;
        /* border:1px solid #ddd; */
        cursor: pointer;
        transition: all .2s;
    }
    .spage-skip span:hover{
        /* background: #2d98e6; */
        background-color:transparent;
        color: #fff;
        /* border:1px solid #2d98e6; */
    }  
}