@media screen and (max-height: 908px) {
    .list-about li a img{
        height: 3.6rem;
    }

    .list-about{
        margin-top: 38%;
    }

    .hero-sidebar .list-menu li{
        margin-bottom: 16px;
    }

    .hero-sidebar .list-menu li a{
        font-size: 19px;
    }

    .hero-sidebar .list-menu .active-menu:before{
        height: 6px;
    }

    .contact-numb li,
    .hero-mail,
    .hero-address-footer p,
    .showmap{
        font-size: 12px;
    }

    .copyright-side{
        font-size: 11px;
    }

    /* ------content font */
    .hero-detail-detail p,
    .hero-tobrands p,
    .more-products,
    .hero-nest-roblock p,
    .hero-nest-roblock h6,
    .discnews,
    .loc-expl p,
    .confax li,
    .mailto,
    .btnjoin span,
    .form-hero textarea{
        font-size: 15px;
    }

    .hero-footer-paggin{
        font-size: 14px;
    }

    .hero-paginasi a img{
        height: 15px;
    }

    .hero-character-tickgi ul li{
        font-size: 13px;
    }

    .hero-character-tickgi{
        bottom: 25px;
    }

    .hero-view-collection {
        margin-top: 2.4rem;
        font-size: 13px;
    }

    .hero-heading-tickgi{
        margin-bottom: 3rem;
    }

    .hero-roblock a img{
        height: 208px;
    }

    .hero-wrap-mfactur p{
        font-size: 17px;
    }

    .hero-wrap-mfactur h4,
    .hero-heading-tickgi{
        font-size: 21px;
    }
}

@media screen and (max-height: 786px) {
    .hero-sidebar .list-menu li a{
        font-size: 17px;
    }

    .hero-sidebar .list-menu li{
        margin-bottom: 15px;
    }

    .contact-numb li,
    .hero-mail,
    .hero-address-footer p,
    .showmap{
        font-size: 11px;
    }

    .copyright-side{
        font-size: 11px;
    }
}

@media screen and (max-height: 746px) {
    .list-about li a img{
        height: 3.2rem;
    }

    .list-about{
        margin-top: 28%;
    }
}

/* width responsive */

@media screen and (max-width: 1488px){
    .activeMine {
        width: 127% !important;
    }
}

@media screen and (max-width: 1337px){
    .activeMine {
        width: 142% !important;
    }
}


/* --------mobile------------ */

@media screen and (max-width: 660px) {
    .hero-sidebar{
        display: none;
    }
}