body, html {
    background-color: #f7f9ff;
}
:root {
    font-size: 16px;
    --header-base-height: 6px;
    --header-info-height: calc(var(--header-base-height) * 1.5);
    --header-center-height: calc(var(--header-base-height) * 3.8);
    --header-nav-height: calc(var(--header-base-height) * 1.7);
    --header-full-height: calc(var(--header-info-height) + var(--header-center-height) + var(--header-nav-height));
    --footer-base-height: 50px;
    --footer-advantage-height: calc(var(--footer-base-height) * 2);
    --footer-info-height: calc(var(--footer-base-height) * 4);
    --footer-full-height: calc(var(--footer-advantage-height) + var(--footer-info-height));
    --color-main-red: #df4b56;
    --mobile-navbar-height: 40px;
    --mobile-footer-nav-height: 62px;
}
button, input {
    border: none;
    outline: none;
}

.pager_main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 3px;
}
.pager_main .pagers {
    padding: 0;
    border-top: 0;
    font-size: 12px
}





/* pagers */
.mobile .pagination {display: flex;}
.mobile .pagination  li {padding:10px}
.mobile  .pager_main {
    padding: 0 12px;
}



.close-img-shade{position:absolute;  right: 0px; top: 0px;width:40px;height:40px;cursor:pointer;z-index: 1;}
.close-img-shade::before,
.close-img-shade::after {content: '';position: absolute;height: 2px;width: 20px;    top: 21px; left: 9px;background-color: #000; }
.close-img-shade::before { transform: rotate(45deg);}
.close-img-shade::after { transform: rotate(-45deg);}
.close-img-shade:hover::before,
.close-img-shade:hover::after{background-color:#f60}