.pagenation-container{
    margin-top: 7.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagenation-list{
    display: flex;
    list-style: none;
    padding-left: 0;
}
.pagenation-list li{
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 0.125rem;
    margin-right: 1.0625rem;
    border: 0.0625rem dashed  #999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagenation-list li.page-pre,.pagenation-list li.page-next{
    width: 10.5rem;
}
.pagenation-list li>a{
    text-decoration: none;
    display: inline-block;
    font-size: 1.625rem;
    color: #333333;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagenation-list li>a:hover{
    background-color: #f9f9f9;
}
.pagenation-list .active{
    background-color: #DF0000;
}
.pagenation-list .active>a{
    cursor: default;
    color: #ffffff;
    background-color: #DF0000;
    pointer-events: none;
}
.pagenation-list .disabled>a{
    pointer-events: none;
    color: #777;
}
@media only screen and (max-width: 800px){
    .pagenation-container{
        margin-top: 3.9375rem;
        
    }
    
    .pagenation-list li{
    width: 2rem;
    height: 2rem;
    border-radius: 0.125rem;
    margin-right: 0.3125rem;
    border: 0.0625rem dashed  #999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagenation-list li.page-pre,.pagenation-list li.page-next{
    width: 3.25rem;
}
.pagenation-list li>a{
    text-decoration: none;
    display: inline-block;
    font-size: 0.875rem;
    color: #333333;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

}