@media only screen and (max-width: 767px) {
    .container {
        max-width: 100%;
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    header {
        /* background: #0000004d; */
        background: rgba(0, 0, 0, 0.2);
    }

    .gnb {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 20;
    }

    .btn-gnb {
        position: relative;
        width: 60px;
        height: 100%;
        background-size: 100% auto;
        z-index: 1;
    }

    .gnb.active .btn-gnb {
        position: fixed;
        top: 0;
        left: -15px;
        width: 60px;
        height: 100%;
        background: url("/assets/images/btn-gnb_active.png") no-repeat;
    }

    nav ul {
        width: 100%;
        padding-top: 80px;
    }

    /* close nav icon  */
    .close-nav {
        position: absolute;
        top: 28px !important;
        left: 1rem !important;
    }

    /* user icon for dashboard  */
    .active-dashboard {
        position: absolute;
        top: 0;
        right: 1.3rem;
        height: 100%;
        z-index: 100000 !important;
    }

    .slide-item img {
        width: 90%;
        object-fit: cover;
    }

    .bh .slide-obj .btn-prev {
        left: 15px;
    }

    .bh .slide-obj .btn-next {
        right: 15px;
    }

    .bh .slide-obj .btn-prev,
    .bh .slide-obj .btn-next {
        width: 10px;
        height: 10px;
        margin-top: -20px;
    }

    .pagination-dot {
        width: 8px;
        height: 8px;
    }
}