#location{
        background-color: #FFF;
        position: relative;
        width: 100%;
        height: 100%;
        max-width: 100vw;
    }
    #location p{
        font-family: var(--font-sans);
    }
    #location .location-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .location-wrap .location-header{
        position: relative;
        width: 100%;
        /* height: 34.125rem; */
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
        padding-bottom: 9.275rem;
    }
    .location-wrap .location-header::after{
        content: '';
        display: block;
        width: 100%;
        height: .6875rem;
        position: absolute;
        bottom: 0;
        left: 0;
        background: linear-gradient(90deg, #000 0%, #671AEB 41.83%, #F1E5FF 97.6%);
    }
    .location-wrap .location-header img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        z-index: 0;
    }
    .location-wrap .location-header .header-info {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: calc(12.15rem + var(--header-height));
        gap: .8125rem;
    }
    
    .location-wrap .location-header p{
        color: var(--white-color);
        text-align: center;
        line-height: 100%;
        letter-spacing: -0.03125rem;
        z-index: 1;
    }
    .location-wrap .location-header p.eng {
        font-size : var(--font-size-24);
        font-weight: 500;
    }
    .location-wrap .location-header p.kor {
        font-size : var(--font-size-36);
        font-weight: 700;
    }
    .location-wrap .location-point{
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 5rem 25rem;
        margin: 0 auto;
        max-width: 1920px;
        gap : 4rem;
        white-space: nowrap;
    }
    .location-point .road{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.625rem;
    }
    .location-point .road p{
        font-family: var(--Static, "Noto Sans KR");
        font-size: var(--font-size-32);
        font-weight: 400;
        line-height: 100%; /* 2rem */
        letter-spacing: -0.03125rem;
    }
    .location-point ul{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 1.875rem;
        margin-top: 1rem;
    }
    .location-point ul>li{
        display: flex;
        width: 16.375rem;
        flex-direction: column;
        gap: 0.85rem;
    }
    .location-point ul>li>span{
        display: block;
        width: 100%;
        height: 4px;
        background-color: #DEDEDE;
    }
    .location-point ul>li.active>span{
        background-color:var(--primary-color);
    }
    .location-point ul>li>a{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 0.25rem;
        align-items: center;
    }
    .location-point ul>li>a>p{
        text-align: center;
        color:#AFAFAF;
        font-size: var(--font-size-24);
        font-weight: 400;
        line-height: 100%;
        letter-spacing: -0.0125rem;
    }
    .location-point ul>li>a>span{
        text-align: center;
        color:#AFAFAF;
        font-size: var(--font-size-18);
        font-weight: 400;
        line-height: 100%;
        letter-spacing: -0.0125rem;
    }
    .location-point ul>li.active>a>p{
        color:#000;
    }
    .location-point ul>li.active>a>span{
        color:#000;
    }
    .location-map{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        gap:3.4375rem;
    }
    .location-map>.map-img{
        max-width: 40rem;
        max-height: 25rem;
    }
    .location-map>.map-img>img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .location-map>.map-info {
        display: flex;
        flex-direction: column;
        gap: 2.8125rem;
        width: calc(100% - 40rem);
    }
    .location-map>.map-info>.addr{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .location-map>.map-info>.addr>.title {
        display: flex;
        gap: 0.625rem;
        align-items: center;
    }

    .location-map>.map-info>.addr>.title>p {
        font-size: var(--font-size-32);
        font-weight: 400;
        line-height: 100%; /* 2rem */
        letter-spacing: -0.03125rem;
    }

    .location-map>.map-info>.addr>.title>span {
        font-size: var(--font-size-24);
        font-style: normal;
        font-weight: 400;
        line-height: 100%; /* 1.5rem */
        letter-spacing: -0.03125rem;
    }

    .location-map>.map-info>.addr>span.under-line {
        display: block;
        width: 100%;
        height: 1px;
        background-color: var(--primary-color);
    }

    .location-map>.map-info>.addr>.address>p {
        font-size: var(--font-size-24);
        font-weight: 400;
        line-height: 100%; /* 2.4rem */
        letter-spacing: -0.03125rem; 
    }
    .location-map>.map-info>.addr>.address>p.main {
        font-size: var(--font-size-24);
        font-weight: 400;
        line-height: 160%; /* 2.4rem */
        letter-spacing: -0.03125rem; 
    }

    .location-map>.map-info>.addr>.after-addr {
        display: flex;
        flex-direction: column;
    }

    .location-map>.map-info>.addr>.after-addr>p {
        font-size: var(--font-size-20);
        color: var(--primary-color);
        font-weight: 400;
        line-height: 170%;
        letter-spacing: -0.03125rem;}

    .location-map>.map-info>.addr>.after-addr>span {
        font-size: var(--font-size-24);
        font-weight: 400;
        line-height: 100%; /* 1.5rem */
        letter-spacing: -0.03125rem;
    }
    .location-map>.map-info>.contact {
        display: flex;
        flex-direction: column;
        gap: .75rem;
    }

    .location-map>.map-info>.contact p {
        font-size: var(--font-size-20);
        color: var(--primary-color);
        font-style: normal;
        font-weight: 500;
        line-height: 100%; /* 1.25rem */
        letter-spacing: -0.03125rem;
    }

    .location-map>.map-info>.contact span {
        font-size: var(--font-size-20);
        font-style: normal;
        font-weight: 400;
        line-height: 170%; /* 2.125rem */
        letter-spacing: -0.03125rem;
    }

    .location-map>.map-info>.contact div {
        display: flex;
        flex-direction: column;
        gap: .25rem;
    }
    .location-map>.map-info>.time {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .location-map>.map-info>.time>.box {
        display: flex;
        gap: .75rem;
    }
    .location-map>.map-info>.time>.box>p {
        font-size: var(--font-size-20);
        font-style: normal;
        font-weight: 400;
        line-height: 170%; /* 2.125rem */
        letter-spacing: -0.03125rem;
        padding: 0.1875rem 0.75rem;
        border: 1px solid #000;
        border-radius: 2px;
    }

    .location-map>.map-info>.time>.box>p.pf {
        color: var(--primary-color);
        border: 1px solid var(--primary-color);
    }

    .location-map>.map-info>.time>.hours {
        display: flex;
        flex-direction: column;
    }

    .location-map>.map-info>.time>.hours>p {
        font-size: var(--font-size-20);
        font-style: normal;
        font-weight: 400;
        line-height: 170%; /* 2.125rem */
        letter-spacing: -0.03125rem;
    }

    .location-map>.map-info>.time>.lunch>p {
        font-size: var(--font-size-20);
        font-style: normal;
        font-weight: 400;
        line-height: 170%; /* 2.125rem */
        letter-spacing: -0.03125rem;
    }
    @media screen and (max-width: 767.9px) {
    .location-wrap .location-header{
            padding-bottom: 2.5rem;
        }
        .location-wrap .location-header .header-info{
            padding-top: calc(2.8125rem + var(--header-height));
            gap: 0;
        }
        .location-wrap .location-header p.eng{
            font-size : var(--font-size-16);
            line-height: 150%;
        }
        .location-wrap .location-header p.kor{
            font-size : var(--font-size-25);
            line-height: 140%;
        }
        .location-wrap .location-point{
            padding: 2.5rem 1rem;
            gap:1.5rem;
        }
        .location-point>.road>svg{
            width: 1.5rem;
            height: 2.125rem;
        }
        .location-point .road p{
            font-size: var(--font-size-16);
        }
        .location-point ul{
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 1rem;
            margin-top: 0;
        }
        .location-point ul>li{
            width: calc(50% - .5rem);
        }
        .location-point ul>li>span{
            display: none;
        }
        .location-point ul>li>a{
            border-radius: 4px;
            border : .5px solid #AFAFAF;
            padding: .875rem 1rem;
            width: 100%;
        }
        .location-map>.map-img{
            max-width: 100%;
            max-height: 100%;
        }
        .location-point ul>li>a>p{
            font-size: var(--font-size-16);
        }
        .location-point ul>li>a>span{
            font-size: var(--font-size-12);
        }
        .location-point ul>li.active>a{
            border: .5px solid var(--primary-color);
        }
        .location-point ul>li.active>a>p{
            color: var(--primary-color);
        }
        .location-point ul>li.active>a>span{
            color: var(--primary-color);
        }
        .location-map{
            flex-direction: column;
            gap: 1.5rem;
        }
        .location-map>.map-info{
            width: unset;
            gap: 1rem;
        }
        .location-map>.map-info>.addr{
            gap: .625rem;
        }
        .location-map>.map-info>.addr>.title>p{
            font-size: var(--font-size-18);
            font-weight: 500;
        }
        .location-map>.map-info>.addr>.title>span{
            font-size: var(--font-size-14);
            font-weight: 500;
            line-height: 120%;
        }
        .location-map>.map-info>.addr>span.under-line{
            height: 2.5px;
            width: 70%;
        }
        .location-map>.map-info>.addr>.address>p.main{
            font-size: .8125rem;
            line-height: 150%;
        }
        .location-map>.map-info>.addr>.after-addr{
            margin-top: .375rem;
            gap:.25rem;
        }
        .location-map>.map-info>.addr>.after-addr>p{
            font-size: var(--font-size-14);
        }
        .location-map>.map-info>.addr>.after-addr>span{
            font-size: .8125rem;
            line-height: 150%;
        }
        .location-map>.map-info>.contact>div:first-child{
            margin-top:1rem;
            gap: .25rem;
        }
        .location-map>.map-info>.contact>div:last-child{
            margin-top: .25rem;
        }
        .location-map>.map-info>.contact p{
            font-size: var(--font-size-14);
        }
        .location-map>.map-info>.contact span{
            font-size: .8125rem;
            line-height: 150%;
        }
        .location-map>.map-info>.time {
            margin-top: 1rem;
            gap: .625rem;
        }

        .location-map>.map-info>.time>.box{
            gap: .5rem;
        }
        .location-map>.map-info>.time>.box>p{
            font-size: var(--font-size-14);
            line-height: 100%;
            padding: .4375rem .5rem;
        }
        .location-map>.map-info>.time>.hours>p{
            font-size: .8125rem;
            line-height: 150%;
        }
        .location-map>.map-info>.time>.lunch>p{
            font-size: .8125rem;
            line-height: 150%;
        }
    }