#g-header .sp-menu {
    display: none;
}
#g-header .login-nav {
    display: none;
}
@media (max-width: 768px) {
    #g-header-top .sp-cont-nav {
        margin-right: 14px;
        margin-left: 0;
        background: no-repeat center -1px;
        background-size: 100%;
    }
    #g-header .sp-menu {
        display: inline-block;
        float: right;
        position: relative;
    }
    #g-header .sp-menu.login-nav {
        display: none;
    }
    #g-header .sp-menu .drop-nav-button {
        background: none;
    }
    #g-header .drop-nav.active .drop-nav-menu {
        position: absolute;
        top: 45px;
        right: 0;
    }
    #g-header .sp-menu .drop-nav-menu-inner {
        text-align: left;
        background: #fff;
    }
    #g-header .sp-menu .drop-nav {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
   #g-header .sp-menu .menu-items {
        display: inline-block;
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin-right: 14px;
        position: relative;
        background-image: url(../img/common/icon_menu.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 32px;
        -webkit-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease;
    }
    #g-header .sp-menu .menu-items .drop-nav-menu {
        width: 210px;
        right: -66px;
        left: unset;
        height: auto;
        max-height: calc(var(--vh) - 45px - 20px);
        overflow-y: auto;
    }
    #g-header .sp-menu .drop-nav-menu-inner{
        border-bottom: 1px solid #ccc;
    }
    #g-header .sp-menu .drop-nav-menu-inner::before {
        content: "";
        position: absolute;
        top: -14px;
        right: 65px;
        margin-left: -7px;
        border: 7px solid transparent;
        border-bottom: 7px solid #e9e9e9;
    }
    #g-header .sp-menu .drop-nav-menu-inner::after {
        content: "";
        position: absolute;
        top: -13px;
        right: 65px;
        margin-left: -7px;
        border: 7px solid transparent;
        border-bottom: 7px solid #fff;
    }
    #g-header .sp-menu .no-border {
        border-bottom: 0;
        margin-bottom: 20px;
    }
    #g-header .sp-menu .menu-items .drop-nav-menu p {
        font-size: 16px;
        font-weight: bold;
        line-height: 16px;
        padding: 20px 30px 0;
    }
    #g-header .sp-menu .menu-items .drop-nav-menu ul {
        padding: 5px 30px 10px;
    }
    #g-header .sp-menu .menu-items .drop-nav-menu li {
        padding: 4px;
        font-size: 14px;
    }
    #g-header .sp-menu .menu-items .drop-nav-menu li a,
    #g-header .sp-menu .mypage-items .drop-nav-menu li a {
        padding: 0;
        line-height: unset;
    }
    #g-header .sp-menu .mypage-items {
        display: inline-block;
        width: 32px;
        height: 32px;
        line-height: 32px;
        position: relative;
        background-image: url(../img/common/sp_user.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 32px;
        -webkit-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease;
    }
    #g-header .sp-menu .mypage-items .drop-nav-menu {
        width: 170px;
        right: -10px;
        left: unset;
    }
    #g-header .sp-menu .mypage-items .drop-nav-menu-inner::before {
        right: 15px;
    }
    #g-header .sp-menu .mypage-items .drop-nav-menu-inner::after {
        right: 15px;
    }
    #g-header .sp-menu .drop-nav-button {
        background: none;
        padding: 0;
    }
    #g-header .sp-menu .mypage-items .drop-nav-menu ul {
        padding: 0 10px 2px 10px;
    }
    #g-header .sp-menu .mypage-items .drop-nav-menu ul li {
        line-height: 16px;
        padding: 8px 0 14px 0;
    }
}