/*Common Nav Css*/

.nav .nav-item .nav-link {
    padding          : 16px;
    font-size        : inherit;
    line-height      : inherit;
    font-weight      : inherit;
    color            : var(--basic-black);
    background-color : var(--basic-white);
}

.nav .nav-item .nav-link.nav-xl {
    padding     : 12px 24px;
    font-size   : var(--font-24);
    line-height : var(--line-28);
}

.nav .nav-item .nav-link.nav-lg {
    padding     : 8px 20px;
    font-size   : var(--font-20);
    line-height : var(--line-24);
}

.nav .nav-item .nav-link.nav-md {
    padding     : 4px 12px;
    font-size   : var(--font-16);
    line-height : var(--line-20);
}

.nav .nav-item .nav-link.nav-sm {
    padding     : 4px 8px;
    font-size   : var(--font-14);
    line-height : var(--line-16);
}

/*반응형 CSS*/
@media (min-width : 576px) {
    .nav .nav-item .nav-link.nav-sm {
        padding     : 4px 8px;
        font-size   : var(--font-14);
        line-height : var(--line-16);
    }
}

@media (min-width : 768px) {
    .nav .nav-item .nav-link.nav-md {
        padding     : 4px 12px;
        font-size   : var(--font-16);
        line-height : var(--line-20);
    }
}

@media (min-width : 992px) {
    .nav .nav-item .nav-link.nav-lg {
        padding     : 8px 20px;
        font-size   : var(--font-20);
        line-height : var(--line-24);
    }
}

@media (min-width : 1200px) {
    .nav .nav-item .nav-link.nav-xl {
        padding     : 12px 24px;
        font-size   : var(--font-24);
        line-height : var(--line-28);
    }
}