.multi_menu {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
}

.multi_menu.active {
    opacity: 1;
    pointer-events: initial;
}

.multi_menu ul {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 10;
    top: 0;
    padding: 2.6vw;
    width: 15.625vw;
    list-style: none;
    background-color: #7d5141;
    /* justify-content: center; */
}

.multi_menu>ul::before {
    content: '';
    position: absolute;
    left: 6.17vw;
    top: -7px;
    width: 0;
    height: 0;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
    border-bottom: solid 10px #7d5141;
}

.multi_menu>ul>li {
    padding: 0.9375vw 0;
    border-bottom: 1px solid #8b6b5f;
    position: relative;
    transition: 0.5s ease;
    cursor: pointer;
}

.multi_menu>ul>a {
    padding-top: 10px;
}

.multi_menu>ul>a span {
    color: #fff;
}

.multi_menu>ul>li>svg {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
}

.multi_menu>ul>li:hover {
    border-bottom: 1px solid #fff;
    transition: 0.5s ease;
}

.multi_menu>ul>li:hover>svg {
    opacity: 1;
    transition: 0.5s ease;
}

.multi_menu>ul>li:last-child {
    border: none;
}

.multi_menu>ul>li>a {
    color: #fff;
}

.multi_menu .second {
    position: absolute;
    background-color: #fff;
    left: 13.02vw;
    width: 15.625vw;
    /* height: 25.52vw; */
    display: flex;
    /* justify-content: center; */
    padding: 1.6vw 2.6vw;
    border: 1px solid #f1f1f1;
    transition: 0.5s ease;
    opacity: 0;
    pointer-events: none;
}

.multi_menu .second.active {
    opacity: 1;
    pointer-events: initial;
    transition: 0.5s ease;
}

.multi_menu .second li {
    padding: 0.58vw 0;
    border-bottom: 1px solid #dfdfdf;
    position: relative;
    transition: 0.5s ease;
}

.multi_menu .second li:last-of-type {
    margin-bottom: 0.52vw;
}

.multi_menu .second li text {
    fill: #000;
}

.multi_menu .second li svg {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
}

.multi_menu .second li:hover svg {
    opacity: 1;
}

.multi_menu .second li:hover {
    border-color: #7d5141;
    transition: 0.5s ease;
}

.multi_menu .third {
    position: absolute;
    background-color: #fff;
    left: 12.96vw;
    width: 15.625vw;
    /* height: 25.52vw; */
    display: flex;
    /* justify-content: center; */
    padding: 1.6vw 2.6vw;
    border: 1px solid #f1f1f1;
    transition: 0.5s ease;
    opacity: 0;
    pointer-events: none;
    top: 0;
}

.multi_menu .third.active {
    opacity: 1;
    pointer-events: initial;
    transition: 0.5s ease;
}

.multi_menu .third li {
    padding: 0.58vw 0;
    border-bottom: 1px solid #dfdfdf;
    position: relative;
    transition: 0.5s ease;
}

.multi_menu .third li:last-of-type {
    margin-bottom: 0.52vw;
}

.multi_menu .third li:hover {
    border-color: #7d5141;
    transition: 0.5s ease;
}

@media (max-width: 1600px) {
    .multi_menu .second>li {
        padding: 0.58vw 0;
    }
    .multi_menu .third>li {
        padding: 0.58vw 0;
    }
    .multi_menu .second p {
        color: #7d5141;
    }
    .multi_menu .third p {
        color: #7d5141;
    }
}

@media (max-width: 1200px) {
    .multi_menu.active {
        opacity: 0;
        pointer-events: none;
    }
}

@media (max-width: 1152px) and (min-width:1152px) {
    .multi_menu .second {
        height: 27.52vw;
    }
    .multi_menu .third {
        height: 27.52vw;
    }
}


/* mobile */

.multi_mobile_menu {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 101;
    transition: all .3s ease;
    display: flex;
    opacity: 0;
    pointer-events: none;
}

.multi_mobile_menu.active {
    opacity: 1;
    pointer-events: initial;
}

.multi_mobile_menu .main_nav {
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    z-index: 98;
    padding: 18.417vw 5.2083vw;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255, 1);
    right: -100%;
    position: absolute;
    transition: 0.5s ease;
}

.multi_mobile_menu .main_nav.active {
    right: 0;
    opacity: 1;
    pointer-events: initial;
    transition: 0.5s ease;
}

.multi_mobile_menu .main_nav a {
    color: #000;
    font-weight: 900;
    font-size: 16px;
    padding: 1.757vw 0;
    border-bottom: 1px solid #d4d4d4;
    position: relative;
}

.multi_mobile_menu .main_nav a svg {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.multi_mobile_menu .main_nav a svg text {
    fill: #979797;
    font-size: 30px;
}

.sub_nav {
    position:absolute;
    background-color: rgb(255, 255, 255, 1);
    width: 100%;
    height: 100%;
    z-index: 98;
    padding: 20.417vw 5.2083vw;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: 0.5s ease;
}

.sub_nav.active {
    opacity: 1;
    pointer-events: initial;
    transition: 0.5s ease;
}

.sub_nav .one {
    border-bottom: 1px solid #d4d4d4;
    position: relative;
    height: 40px;
    padding-bottom: 20px;
}

.sub_nav .one svg {
    width: 20px;
    position: relative;
    fill: #d4d4d4;
    height: 25px;
}

.sub_nav .one span {
    right: 5.2083vw;
    position: absolute;
}

.sub_nav a {
    color: #000;
    font-weight: 900;
    font-size: 16px;
    padding: 1.757vw 0;
    border-bottom: 1px solid #d4d4d4;
    position: relative;
}

.sub_nav a:last-of-type {
    border: none;
}

.sub_nav a svg {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.sub_nav a svg text {
    fill: #979797;
    font-size: 30px;
}

.second_sub_nav {
    position: absolute;
    background-color: rgb(255, 255, 255, 1);
    width: 100%;
    height: 100%;
    z-index: 99;
    padding: 20.417vw 5.2083vw;
    transition: all .3s ease;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: 0.5s ease;
}

.second_sub_nav.active {
    opacity: 1;
    pointer-events: initial;
    transition: 0.5s ease;
}

.second_sub_nav .one {
    border-bottom: 1px solid #d4d4d4;
    position: relative;
    height: 40px;
    padding-bottom: 20px;
}

.second_sub_nav .one svg {
    width: 20px;
    position: absolute;
    fill: #d4d4d4;
    height: 25px;
}

.second_sub_nav .one span {
    right: 5.2083vw;
    position: absolute;
}

.second_sub_nav a {
    color: #000;
    font-weight: 900;
    font-size: 16px;
    padding: 1.757vw 0;
    border-bottom: 1px solid #d4d4d4;
    position: relative;
}

.second_sub_nav a:last-of-type {
    border: none;
}

.second_sub_nav a svg {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.second_sub_nav a svg text {
    fill: #979797;
    font-size: 30px;
}

.third_sub_nav {
    position: absolute;
    background-color: rgb(255, 255, 255, 1);
    width: 100%;
    height: 100%;
    z-index: 100;
    padding: 20.417vw 5.2083vw;
    transition: all .3s ease;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: 0.5s ease;
}

.third_sub_nav.active {
    opacity: 1;
    pointer-events: initial;
    transition: 0.5s ease;
}

.third_sub_nav .one {
    border-bottom: 1px solid #d4d4d4;
    position: relative;
    height: 40px;
    padding-bottom: 20px;
}

.third_sub_nav .one svg {
    width: 20px;
    position: absolute;
    fill: #d4d4d4;
    height: 25px;
}

.third_sub_nav .one span {
    right: 5.2083vw;
    position: absolute;
}

.third_sub_nav a {
    color: #000;
    font-weight: 900;
    font-size: 16px;
    padding: 1.757vw 0;
    border-bottom: 1px solid #d4d4d4;
    position: relative;
}

.third_sub_nav a:last-of-type {
    border: none;
}

.third_sub_nav a svg {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.third_sub_nav a svg text {
    fill: #979797;
    font-size: 30px;
}

@media( max-width: 700px) {
    .multi_mobile_menu .main_nav {
        padding: 35.417vw 5.2083vw;
    }
    .multi_mobile_menu .main_nav a {
        padding: 10px 0;
    }
    .sub_nav .one {
        height: 30px;
        padding-bottom: 10px;
    }
    .sub_nav {
        padding: 26.417vw 5.2083vw;
        top: 50px;
    }
    .sub_nav a {
        padding: 10px 0;
    }
    .second_sub_nav {
        padding: 26.417vw 5.2083vw;
        top: 50px;
    }
    .second_sub_nav .one {
        height: 30px;
        padding-bottom: 10px;
    }
    .second_sub_nav a {
        padding: 10px 0;
    }
    .third_sub_nav {
        padding: 26.417vw 5.2083vw;
    }
    .third_sub_nav a {
        padding: 10px 0;
    }
    .third_sub_nav .one {
        height: 30px;
        padding-bottom: 10px;
    }
}