@media screen and (max-width:800px) {
    button {
        -webkit-tap-highlight-color: transparent;
        outline: none;

        &:active,
        &:focus {
            -webkit-tap-highlight-color: transparent;
            outline: none;
        }
    }

    #gnb-wrap {
        display: none;

        .top-wrap,
        .bottom-wrap,
        .music-wrap {
            z-index: 101;
        }

        &.on {
            display: flex;
            position: fixed;
            left: 0;
            top: 0;

            .on-show {
                display: block;
            }

            .on-hide {
                display: none;
            }

            .mobile-background {
                background: var(--background-loading-color);
                position: fixed;
                left: 0;
                top: 0;
                width: 100dvw;
                height: 100dvh;
                display: block;
                z-index: 100;
            }
        }

    }

    #mobile-gnb-wrap {
        display: block;

        .svg-wrap {
            display: flex;
            align-items: center;

            svg {
                width: calc(var(--spacing) * 6);
                height: calc(var(--spacing) * 6);
            }
        }
    }

}