:root {
    --primary: #894310;
    --secondary: #fffbe8;
    --tertiary: #cca071;
    --primary-dim: #19120a;
    --bg-color: #fbf4ec;
    --footer-bg-color: #19120a;

    /* 스켈레톤 색상 */
    --skeleton-color: #eee;

    /* 체크 전 bg색상 */
    --input-bg-color: transparent;
    /* 체크시 bg */
    --checked-bg: #fff;
    /* 보더색상 */
    --input-border: #fff;
    /* 보더 안쪽 구분선 색상 */
    --input-stroke: var(--primary);

    --footerH: 7.6rem;
    --headerH: 10rem;

    --max-grid: 144rem;

    --font-family: "Pretendard Variable", sans-serif;

    /* primitive number - 1rem = 10px 기준 */
    --size-1: 0.1rem;
    --size-2: 0.2rem;
    --size-3: 0.3rem;
    --size-4: 0.4rem;
    --size-5: 0.5rem;
    --size-6: 0.6rem;
    --size-7: 0.7rem;
    --size-8: 0.8rem;
    --size-9: 0.9rem;
    --size-10: 1rem;
    --size-11: 1.1rem;
    --size-12: 1.2rem;
    --size-13: 1.3rem;
    --size-14: 1.4rem;
    --size-15: 1.5rem;
    --size-16: 1.6rem;
    --size-17: 1.7rem;
    --size-18: 1.8rem;
    --size-19: 1.9rem;
    --size-20: 2rem;
    --size-21: 2.1rem;
    --size-22: 2.2rem;
    --size-23: 2.3rem;
    --size-24: 2.4rem;
    --size-25: 2.5rem;
    --size-26: 2.6rem;
    --size-27: 2.7rem;
    --size-28: 2.8rem;
    --size-29: 2.9rem;
    --size-30: 3rem;
    --size-31: 3.1rem;
    --size-32: 3.2rem;
    --size-33: 3.3rem;
    --size-34: 3.4rem;
    --size-35: 3.5rem;
    --size-36: 3.6rem;
    --size-37: 3.7rem;
    --size-38: 3.8rem;
    --size-39: 3.9rem;
    --size-40: 4rem;
    --size-41: 4.1rem;
    --size-42: 4.2rem;
    --size-43: 4.3rem;
    --size-44: 4.4rem;
    --size-45: 4.5rem;
    --size-46: 4.6rem;
    --size-47: 4.7rem;
    --size-48: 4.8rem;
    --size-49: 4.9rem;
    --size-50: 5rem;
    --size-51: 5.1rem;
    --size-52: 5.2rem;
    --size-53: 5.3rem;
    --size-54: 5.4rem;
    --size-55: 5.5rem;
    --size-56: 5.6rem;
    --size-57: 5.7rem;
    --size-58: 5.8rem;
    --size-59: 5.9rem;
    --size-60: 6rem;
    --size-61: 6.1rem;
    --size-62: 6.2rem;
    --size-63: 6.3rem;
    --size-64: 6.4rem;
    --size-65: 6.5rem;
    --size-66: 6.6rem;
    --size-67: 6.7rem;
    --size-68: 6.8rem;
    --size-69: 6.9rem;
    --size-70: 7rem;
    --size-71: 7.1rem;
    --size-72: 7.2rem;
    --size-73: 7.3rem;
    --size-74: 7.4rem;
    --size-75: 7.5rem;
    --size-76: 7.6rem;
    --size-77: 7.7rem;
    --size-78: 7.8rem;
    --size-79: 7.9rem;
    --size-80: 8rem;
    --size-81: 8.1rem;
    --size-82: 8.2rem;
    --size-83: 8.3rem;
    --size-84: 8.4rem;
    --size-85: 8.5rem;
    --size-86: 8.6rem;
    --size-87: 8.7rem;
    --size-88: 8.8rem;
    --size-89: 8.9rem;
    --size-90: 9rem;
    --size-91: 9.1rem;
    --size-92: 9.2rem;
    --size-93: 9.3rem;
    --size-94: 9.4rem;
    --size-95: 9.5rem;
    --size-96: 9.6rem;
    --size-97: 9.7rem;
    --size-98: 9.8rem;
    --size-99: 9.9rem;
    --size-100: 10rem;
    --size-128: 12.8rem;
    --size-160: 16rem;
    --size-200: 20rem;

    /* pc fontsize */
    --titleL: var(--size-65);
    --titleM: var(--size-60);
    --titleS: var(--size-50);

    --headL: var(--size-40);
    --headM: var(--size-30);
    --headS: var(--size-28);

    --subhead: var(--size-25);

    --bodyXL: var(--size-23);
    --bodyL: var(--size-21);
    --bodyM: var(--size-20);
    --bodyS: var(--size-18);
    --bodyXS: var(--size-16);

    /* padding */
    --paddingTop: var(--size-72);
}

@media (max-width: 599px) {
    :root {
        /* primitive number mobile */
        --size-1: 0.2667vw;
        --size-2: 0.5333vw;
        --size-3: 0.8vw;
        --size-4: 1.0667vw;
        --size-5: 1.3333vw;
        --size-6: 1.6vw;
        --size-7: 1.8667vw;
        --size-8: 2.1333vw;
        --size-9: 2.4vw;
        --size-10: 2.6667vw;
        --size-11: 2.9333vw;
        --size-12: 3.2vw;
        --size-13: 3.4667vw;
        --size-14: 3.7333vw;
        --size-15: 4vw;
        --size-16: 4.2667vw;
        --size-17: 4.5333vw;
        --size-18: 4.8vw;
        --size-19: 5.0667vw;
        --size-20: 5.3333vw;
        --size-21: 5.6vw;
        --size-22: 5.8667vw;
        --size-23: 6.1333vw;
        --size-24: 6.4vw;
        --size-25: 6.6667vw;
        --size-26: 6.9333vw;
        --size-27: 7.2vw;
        --size-28: 7.4667vw;
        --size-29: 7.7333vw;
        --size-30: 8vw;
        --size-31: 8.2667vw;
        --size-32: 8.5333vw;
        --size-33: 8.8vw;
        --size-34: 9.0667vw;
        --size-35: 9.3333vw;
        --size-36: 9.6vw;
        --size-37: 9.8667vw;
        --size-38: 10.1333vw;
        --size-39: 10.4vw;
        --size-40: 10.6667vw;
        --size-41: 10.9333vw;
        --size-42: 11.2vw;
        --size-43: 11.4667vw;
        --size-44: 11.7333vw;
        --size-45: 12vw;
        --size-46: 12.2667vw;
        --size-47: 12.5333vw;
        --size-48: 12.8vw;
        --size-49: 13.0667vw;
        --size-50: 13.3333vw;
        --size-51: 13.6vw;
        --size-52: 13.8667vw;
        --size-53: 14.1333vw;
        --size-54: 14.4vw;
        --size-55: 14.6667vw;
        --size-56: 14.9333vw;
        --size-57: 15.2vw;
        --size-58: 15.4667vw;
        --size-59: 15.7333vw;
        --size-60: 16vw;
        --size-61: 16.2667vw;
        --size-62: 16.5333vw;
        --size-63: 16.8vw;
        --size-64: 17.0667vw;
        --size-65: 17.3333vw;
        --size-66: 17.6vw;
        --size-67: 17.8667vw;
        --size-68: 18.1333vw;
        --size-69: 18.4vw;
        --size-70: 18.6667vw;
        --size-71: 18.9333vw;
        --size-72: 19.2vw;
        --size-73: 19.4667vw;
        --size-74: 19.7333vw;
        --size-75: 20vw;
        --size-76: 20.2667vw;
        --size-77: 20.5333vw;
        --size-78: 20.8vw;
        --size-79: 21.0667vw;
        --size-80: 21.3333vw;
        --size-81: 21.6vw;
        --size-82: 21.8667vw;
        --size-83: 22.1333vw;
        --size-84: 22.4vw;
        --size-85: 22.6667vw;
        --size-86: 22.9333vw;
        --size-87: 23.2vw;
        --size-88: 23.4667vw;
        --size-89: 23.7333vw;
        --size-90: 24vw;
        --size-91: 24.2667vw;
        --size-92: 24.5333vw;
        --size-93: 24.8vw;
        --size-94: 25.0667vw;
        --size-95: 25.3333vw;
        --size-96: 25.6vw;
        --size-97: 25.8667vw;
        --size-98: 26.1333vw;
        --size-99: 26.4vw;
        --size-100: 26.6667vw;
        --size-128: 34.1333vw;
        --size-160: 42.6667vw;
        --size-200: 53.3333vw;

        /* mobile fontsize */
        --titleL: var(--size-34);
        --titleM: var(--size-30);
        --titleS: var(--size-28);

        --headL: var(--size-26);
        --headM: var(--size-24);
        --headS: var(--size-22);

        --subhead: var(--size-20);

        --bodyXL: var(--size-18);
        --bodyL: var(--size-16);
        --bodyM: var(--size-15);
        --bodyS: var(--size-14);
        --bodyXS: var(--size-13);

        /* padding */
        --paddingTop: var(--size-50);
    }
}

/* 스타일 초기화 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
input,
button {
    margin: 0;
    padding: 0;
    border: none;
}

button {
    background-color: inherit;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
}

ul,
ol,
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: inherit;
}

/* ------------------------- vw rem 연동 ------------------------- */
html {
    scroll-behavior: smooth;
    font-size: round(nearest, 0.5208333333vw, 1px);

    /* iphone SE 375px 기준 vw로 변환 */
    @media (max-width: 599px) {
        font-size: 1.6vw;
    }
}

#header {
    height: 0px;
}
.flowhid {
    overflow: hidden;
}

.hideopa {
    opacity: 0 !important;
}
.show {
    opacity: 1 !important;
}

/* font lib */
strong {
    font-weight: bolder;
}
.noto {
    font-family: "Noto Serif", serif;
}
.notokr {
    font-family: "Noto Serif KR", serif;
}
.fblack {
    font-weight: 900;
}
.exbold {
    font-weight: 800;
}
.bold {
    font-weight: 700;
}
.smbold {
    font-weight: 600;
}
.medium {
    font-weight: 500;
}
.regular {
    font-weight: 400;
}
.flight {
    font-weight: 300;
}
.thin {
    font-weight: 100;
}

.white {
    color: white;
}
.txct {
    text-align: center;
}
.ta-c {
    text-align: center;
}

p {
    word-break: keep-all !important;
}
strong {
    font-weight: 800;
}
/* -------------------- font ----------------------- */
[font-family="pretendard"] {
    font-family: "Pretendard Variable", sans-serif;
}
[font-family="proxima"] {
    font-family: "proxima-nova", sans-serif;
}
[font-family="proxima-kr"] {
    font-family: "proxima-nova-hangeul", sans-serif;
}
[font-family="suit"] {
    font-family: "SUIT variable", sans-serif;
}
[font-family="permanent-marker"] {
    font-family: "Permanent Marker", sans-serif;
}
[font-family="impact"] {
    font-family: "Impact", sans-serif;
    letter-spacing: -0.02em;
}
[font-family="orbital"] {
    font-family: "orbital";
    letter-spacing: -0.02em;
}
[font-family="paperlogy"] {
    font-family: "Paperlogy", sans-serif;
    letter-spacing: -0.05em;
}
[font-family="snow"] {
    font-family: "SfHambakneun", serif;
    letter-spacing: -0.05em;
}

/* swiper */
.swiper {
    display: block;
    margin: 0;
    z-index: 0;
}
.swiper-wrapper {
    will-change: transform;
}
.swiper-wrapper.flow {
    pointer-events: none;
    transition-timing-function: linear;
}
.swiper-button-disabled {
    opacity: 0.3;
}

/* cursor lib */
.pointer {
    cursor: pointer;
}

.eventNone {
    pointer-events: none;
}

/* element defalut lib */
iframe {
    width: 100%;
    height: 100%;
    pointer-events: none;
}
img {
    object-fit: cover;
    height: auto;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

b {
    font-weight: 700;
}


/* 로딩 */
.loading-overlay {
    position: fixed; /* 화면 전체를 덮도록 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 검은색 배경 */
    z-index: 9999; /* 다른 요소들보다 위에 표시 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3; /* 회색 테두리 */
    border-top: 5px solid #ec471a; /* 브랜드 메인색상 */
    border-radius: 50%;
    animation: spin 1s linear infinite; /* 회전 애니메이션 */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ----------------- display lib ----------------- */
.blind {
    position: absolute;
    clip-path: inset(50% 50% 50% 50%);
    width: 1px;
    height: 1px;
}
.hide {
    display: none !important;
}
.flexrow {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.flexcol {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.flex {
    display: flex;
}
.flex-col {
    display: flex;
    flex-direction: column;
}
.flex-cc {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* flex options */
.justify-c {
    justify-content: center;
}
.justify-sb {
    justify-content: space-between;
}
.justify-end {
    justify-content: end;
}
.align-c {
    align-items: center;
}
.align-start {
    align-items: start;
}
.align-end {
    align-items: end;
}
.col-reverse {
    flex-direction: column-reverse;
}
.row-reverse {
    flex-direction: row-reverse;
}

span[data-splited="true"] {
    display: inline-block;
}
.pc-flex {
    display: flex !important;
}
.mobile-flex {
    display: none !important;
}
.pc {
    display: block !important;
}
.mobile {
    display: none !important;
}
.pc-inline {
    display: inline !important;
}
.inline {
    display: inline-block !important;
}
span {
    display: inline-block;
}

.absol {
    position: absolute;
}

.rltv {
    position: relative;
}

@media (max-width: 599px) {
    .pc-flex {
        display: none !important;
    }
    .mobile-flex {
        display: flex !important;
    }
    .pc {
        display: none !important;
    }
    .mobile {
        display: block !important;
    }
    .pc-inline {
        display: none !important;
    }
}

/* ----------------- flex gap ----------------- */
.gap-4 {
    gap: 0.4rem;
}
.gap-8 {
    gap: 0.8rem;
}
.gap-10 {
    gap: 1rem;
}
.gap-12 {
    gap: 1.2rem;
}
.gap-16 {
    gap: 1.6rem;
}
.gap-20 {
    gap: 2rem;
}
.gap-24 {
    gap: 2.4rem;
}
.gap-28 {
    gap: 2.8rem;
}
.gap-32 {
    gap: 3.2rem;
}
.gap-36 {
    gap: 3.2rem;
}
.gap-42 {
    gap: 4.2rem;
}
.gap-48 {
    gap: 4.8rem;
}
.gap-52 {
    gap: 5.2rem;
}
.gap-60 {
    gap: 6rem;
}
.gap-64 {
    gap: 6.4rem;
}
.gap-72 {
    gap: 7.2rem;
}
.gap-80 {
    gap: 8rem;
}
.gap-84 {
    gap: 8.4rem;
}
.gap-96 {
    gap: 9.6rem;
}
.gap-128 {
    gap: 12.8rem;
}
.gap-160 {
    gap: 16rem;
}
/* -------------------- width ---------------------- */
.w-100 {
    width: 100%;
}
.h-100 {
    height: 100%;
}

.resize {
    width: fit-content;
}

/* ----------------- input custom ----------------- */

/* input general text */
section,
.contact_service {
    input {
        font-family: inherit;
        font-size: inherit;
        letter-spacing: inherit;
        margin: 0;
        padding: 0;
        border: none;

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: transparent;
        }
        &[type="text"] {
            padding: 0.8rem;
            box-sizing: border-box;
        }

        &[type="tel"] {
            padding: 0.8rem;
            box-sizing: border-box;
        }
        &[type="email"] {
            padding: 0.8rem;
            box-sizing: border-box;
        }

        &[type="text"]:focus {
            outline: none;
        }

        &[type="tel"]:focus {
            outline: none;
        }
    }

    /* radio */
    input[type="radio"] {
        appearance: none;
        border-radius: 9rem;
        box-sizing: border-box;
        width: 2rem;
        height: 2rem;
        border: 0.2rem solid var(--input-border);
        cursor: pointer;

        &:checked {
            border: 1px solid var(--input-border);
            outline: 1px solid var(--input-stroke);
            outline-offset: -4px;
            background-color: var(--checked-bg);
        }
    }
    /* checkbox */
    input[type="checkbox"] {
        --border-width: 1px;
        --stroke-width: 2px;
        --border-radious: 2rem;

        appearance: none;
        border-radius: var(--border-radious);
        box-sizing: border-box;
        width: 2rem;
        height: 2rem;
        border: var(--border-width) solid var(--input-border);
        cursor: pointer;
        background-color: var(--input-bg-color);

        &[type="checkbox"]:checked {
            appearance: none;
            background-color: var(--checked-bg);
            border: var(--border-width) solid var(--input-border);
            outline: var(--stroke-width) solid var(--input-stroke);
            outline-offset: calc(calc(var(--border-width) + var(--stroke-width)) * -1);
            cursor: pointer;
            box-sizing: border-box;
            border-radius: var(--border-radious);
        }
    }
    @media (max-width: 599px) {
        input {
            font-size: 4.8309vw;
        }
        input[type="text"] {
            width: 35rem;
            height: 8rem;
            padding: 0.8rem;
            box-sizing: border-box;
        }

        input[type="checkbox"] {
            width: 4.8309vw;
            height: 4.8309vw;
        }

        input[type="radio"] {
            appearance: none;
            border-radius: 9rem;
            width: 4.8309vw;
            height: 4.8309vw;
            border: 1px solid var(--input-border);
        }
        input[type="radio"]:checked {
            border: 1px solid var(--input-border);
            outline: 2px solid var(--input-stroke);
            outline-offset: -3px;
        }
        input[type="checkbox"]:checked {
            border: 1px solid var(--input-border);
            outline: 2px solid var(--input-stroke);
            outline-offset: -3px;
        }
    }
}

/* #footer {
    position: relative;
    z-index: 1000;
}
#header {
    z-index: 2000;
    position: fixed;
} */
/* div.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
} */
.swiper-slide-active {
    z-index: 1;
}
.swiper-wrapper.flow {
    pointer-events: none;
    transition-timing-function: linear;
}
section {
    font-family: var(--font-family);
    position: relative;
    overflow: hidden;
}
section img {
    width: 100%;
}
section:not(.map_section) img {
    pointer-events: none;
}
.swiper-button-disabled {
    opacity: 0.3;
}
.noto {
    font-family: "Noto Serif", serif;
}
.notokr {
    font-family: "Noto Serif KR", serif;
}

.white {
    color: white;
}
.txct {
    text-align: center;
}
.lh-18 {
    line-height: 1.8;
}
.lh-17 {
    line-height: 1.7;
}
.lh-16 {
    line-height: 1.6;
}
.lh-15 {
    line-height: 1.5;
}
.lh-14 {
    line-height: 1.4;
}
.lh-13 {
    line-height: 1.3;
}
.lh-12 {
    line-height: 1.2;
}
.lh-11 {
    line-height: 1.1;
}
.lh-10 {
    line-height: 1;
}

.underline {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 0.2rem;
}

/* --------------------------- font-size -------------------------- */
.fontsize-18 {
    font-size: var(--size-18);
}
.fontsize-20 {
    font-size: var(--size-20);
}
.fontsize-22 {
    font-size: var(--size-22);
}
.fontsize-24 {
    font-size: var(--size-24);
}
.fontsize-26 {
    font-size: var(--size-26);
}
.fontsize-28 {
    font-size: var(--size-28);
}
.fontsize-30 {
    font-size: var(--size-30);
}
.fontsize-32 {
    font-size: var(--size-32);
}
.fontsize-34 {
    font-size: var(--size-34);
}
.fontsize-36 {
    font-size: var(--size-36);
}
.fontsize-38 {
    font-size: var(--size-38);
}
.fontsize-40 {
    font-size: var(--size-40);
}
.fontsize-42 {
    font-size: var(--size-42);
}
.fontsize-44 {
    font-size: var(--size-44);
}
.fontsize-45 {
    font-size: var(--size-45);
}
.fontsize-46 {
    font-size: var(--size-46);
}
.fontsize-60 {
    font-size: var(--size-60);
}
.fontsize-70 {
    font-size: var(--size-70);
}
.fontsize-80 {
    font-size: var(--size-80);
}
.fontsize-100 {
    font-size: var(--size-100);
}

.fontsize-200 {
    font-size: var(--size-200);
}

/* reveal 대신 사용 start */
/* 왼쪽부터 나타나기 */
.clip_off02 {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    transition: all 0.8s;
}
/* 가운데에서 나타나기 */
.clip_off {
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    transition: all 0.8s;
}
/* gsap에서 넣을 class */
.clip_on {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}
/* reveal 대신 사용 end */
.absol_cover {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    position: absolute;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}
.max_width {
    width: unset !important;
    max-width: 101%;
}
.back_img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}
/* image_sd */
.image_sd_wrap {
    overflow: hidden;
}

.image_sd .absol {
    left: 100%;
}

.image_sd_r .absol {
    right: 100%;
}
/* image_sd end */
/* y_slide start */
.slide_y_wrap {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0%;
    overflow: hidden;
}

.slide_y img.absol {
    top: 100%;
}

.slide_y_r img.absol {
    bottom: 100%;
}
/* y_slide end */
/* swiper-arr */
.btn_arr {
    z-index: 2;
    cursor: pointer;
}
.arr_next {
    transform: rotateY(180deg);
}
/* swiper-arr */
iframe {
    width: 100%;
    height: 100%;
    pointer-events: none;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-button-lock {
    display: none !important;
}

/* z-index */
.zIndex-1 {
    z-index: 1;
}
.zIndex-2 {
    z-index: 2;
}
.zIndex-3 {
    z-index: 3;
}
.zIndex-4 {
    z-index: 4;
}
.zIndex-5 {
    z-index: 5;
}

.per_Infor_policy {
    cursor: pointer;
}




/* ---------------------------map------------------------- */
/* 마커디자인 */
.map_marker {
    position: relative;
    display: inline-block;
}

/* 말풍선 텍스트 박스 */
.map_marker_text {
    background: var(--primary);
    border: 0.1rem solid #fff;
    padding: 9px 19px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* 말풍선 꼬리 (삼각형 테두리) */
.map_marker_tail {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
}

/* 말풍선 꼬리 내부 (흰색 채우기) */
.map_marker_tail::after {
    content: "";
    position: absolute;
    top: -9px;
    left: -7px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--primary);
}

/* 맵시작 */

.map_mid {
    /* width: fit-content; */
    width: 100%;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.map {
    position: relative;
    background-color: #fff;
    width: 73.021vw;
    height: 30.42vw;
    z-index: 1;
    overflow: hidden;
    border-radius: 2vw;
    border: 0.1vw solid #222;
}

.mid_map_search {
    background: white;
    overflow: hidden;
    z-index: 2;
    width: 18.54vw;
    height: 28.91vw;
    left: 0.87vw;
    top: 0.67vw;
    border-radius: 1.6vw;
    border: 0.1vw solid #222;
    box-sizing: border-box;
}

.mid_map_search_mid {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;

    padding: 1.3vw 1.56vw 0;
}

.map_search_icon {
    width: 1.04vw;

    right: 2.5vw;

    img {
        width: 100% !important;
    }
}

.mid_map_search_mid input {
    appearance: none;
    border: none;
    outline: none;
    width: 100%;
    height: 3.13vw;
    padding-left: 1.3vw;
    font-size: 0.8vw;
    border-radius: 50vw;
    color: #444;

    border: 0.1vw solid #000;
}

.mid_map_search_mid input::placeholder {
    color: #666;
}

.mid_map_search_bottom {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 23vw;
    width: 99.5%;
}

.mid_map_search_bottom::-webkit-scrollbar {
    width: 0vw;
    height: 0vw;
}

.mid_map_search_item {
    margin: 0% 7%;
    border-bottom: 1px solid #9b9b9b;
    padding: 7% 0;
    font-size: 1vw;
    cursor: pointer;
    pointer-events: all;
}

.infor_div {
    opacity: 0;
    pointer-events: none;
    display: none !important;
}

.mid_map_search_item_title {
    font-size: var(--bodyXL);
    font-weight: 500;
    line-height: 1;
}

.mid_map_search_item_addres {
    margin-top: 4%;
    margin-bottom: 1%;
    font-size: var(--bodyS);
}

.mid_map_search_item_tel {
    font-size: var(--bodyS);
    line-height: 1;
}

.map_icon {
    width: 1.4583vw;
    right: 8%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.map_plus {
    /* width: 1.7vw; */
    top: 1.3vw;
    right: 0vw;
    transition: 0.4s;
}

.map_plus img {
    width: 100% !important;
}

.map_plus:hover {
    transform: rotate(180deg);
}

/*popup*/
.fixed_popup {
    position: fixed;

    width: 100vw;
    height: 100vh;

    top: 0;

    background: #00000099;
    z-index: 999999999999;

    display: flex;
    justify-content: center;
    align-items: center;
}

div.popup {
    width: 47%;
    height: 19vw;
    /* border: 1px solid black; */
    background-color: #fff;
    box-sizing: border-box;
    gap: 3vw;
    justify-content: space-between;
    border-radius: 0.3vw;
    overflow: hidden;

    display: flex;
}

.popup_top {
    font-size: 1.5vw;
    width: 88%;
    padding-bottom: 3%;
    text-align: center;
    border-bottom: 1px solid #0000002e;
}

.popup > p:nth-child(2) {
    font-size: 1.3vw;
    width: 88%;
    margin-top: 5%;
    padding-bottom: 2%;
    text-align: left;
}

.popup > p:nth-child(4) {
    font-size: 0.9vw;
    width: 88%;
    margin-top: 1%;
}

.popup > p:nth-child(5) {
    left: 42%;
    width: 58%;
    padding-right: 8%;
    height: 12vw;
    top: 43%;
    box-sizing: border-box;
    font-size: 0.9vw;
    overflow-y: scroll;
}

.popup_right_1st {
    color: #e3c179;
    width: 78%;
    margin-bottom: 1%;
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 1.2vw;
    margin-top: -6%;
}

.popup_right > div > div:nth-child(2) {
    width: 65%;
    font-weight: 400;
    font-size: 0.85vw;
    color: #333;
}

.popup_right > div {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    color: #000;
}

.popup_right_left_txt {
    width: 18%;
    font-weight: 600 !important;
    font-size: 0.85vw !important;
    color: #000;
    position: relative;
    margin-right: 3.7%;
}

.popup_right_left_txt::after {
    content: "";
    position: absolute;
    right: 0;
    top: 31%;

    width: 1px;
    height: 50%;
    background: #c3c3c3;
}

.popup_right {
    width: 46%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    color: #000;
    margin-top: -4%;
}

.popup_img img {
    width: 100%;
}

.fixed_popup_con {
    width: 62%;
    height: 49%;
    background-color: #000;
    top: 31%;
    left: 20%;
    border-radius: 1vw;
}

.popup_img {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    height: 100%;
    overflow: hidden;
}

.popup_img img {
    width: 108%;
}

.popup_top_absol {
    width: 12.4369%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 12%;
    left: 10%;
}

.popup_top_absol_2nd {
    width: 96.6687%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 21%;
    left: 1.5%;
}

.popup_img_con {
    position: static !important;
    overflow: hidden;
}

.popup_right_6th_left {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    right: 3%;
    bottom: 6%;
}

.popup_right_6th_left::after {
    content: "";
    width: 0%;
    height: 0.02vw;

    position: absolute;
    bottom: -0.2vw;
    left: 0;

    background: #000;
    transition: width 0.3s;
}

.popup_img_con {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup_img_con img {
    height: 100%;
    object-fit: cover;
}

.popup_top_absol {
    width: 12.4369%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 18%;
    left: 52.5%;
}

.popup_right_2nd {
    font-weight: 500;
    width: 100%;
    font-size: 1.36vw;
    box-sizing: border-box;
    font-family: "pretendard variable";
}

.popup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup_close {
    width: 2vw;
    height: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 5%;
    right: 2%;
    cursor: pointer;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out;
}

.popup_close .absol {
    width: 60%;
    height: 2px;
    background-color: #000;
}

.popup_close .absol:nth-child(1) {
    transform: rotate(45deg);
}

.popup_close .absol:nth-child(2) {
    transform: rotate(-45deg);
}

div.popup_logo {
    width: 17.156%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1vw;
}

@media screen and (min-width: 600px) {
    .popup_close:hover {
        transform: rotate(180deg);
    }

    /* .popup_right_6th_left:hover::after {
        width: 100%;
    } */
}

@media (max-width: 599px) {
    /* 맵 */

    .map {
        background-color: #fff;
        width: 93%;
        height: 55vw;
        border: solid 1.5px #000;
    }

    .map_mid {
        width: 100%;
        flex-direction: column;
    }

    .map_plus {
        top: 6vw;
        width: 8.4vw;
    }

    div.mid_map_search {
        margin-top: 3vw;

        background: white;
        overflow: hidden;
        z-index: 2;

        width: 93%;
        height: 67vw;

        border: solid 1px #000;
        border-bottom: solid 1px #000;

        position: static;
    }

    .mid_map_search_mid {
        padding: 3vw 3vw 3vw;
        border-bottom: 0.1vw solid #000;
    }

    .mid_map_search_mid input {
        width: 100% !important;
        height: 10vw;
        padding-left: 5%;
        font-size: var(--bodyM);
    }

    .map_search_icon {
        width: 4vw;
        right: 8vw;
    }

    .mid_map_search_item {
        font-size: 3vw;
        margin: 0 3vw;
        padding: 6vw 0;
    }

    .mid_map_search_item_title {
        font-size: 4vw;
        width: 74vw;
    }

    .mid_map_search_item_addres {
        font-size: 3.3vw;
        width: 74vw;
    }

    .mid_map_search_item_tel {
        font-size: 3.3vw;
        width: 74vw;
    }

    .mid_map_search_bottom {
        height: 49vw;
    }

    /*popup*/
    div.popup {
        width: 90%;
        height: 72%;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 0%;
        top: 0%;
        gap: 4vw;
        border-radius: 1vw;
    }

    .popup_img_con {
        overflow: hidden;
        width: 100%;
        scale: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .popup_img {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 0;
        height: 42%;
        overflow: hidden;
    }

    .popup_right_6th_left {
        display: flex;
        justify-content: center;
        align-items: center;
        right: auto;
        bottom: 4%;
        font-size: 4vw;
    }

    .popup_right_6th_left::after {
        width: 100%;
    }

    .popup_right_2nd {
        font-weight: 600;
        width: 100%;
        font-size: 4.56vw;
        text-align: center;
        padding-bottom: 0;

        margin-bottom: 5vw;
    }

    .popup_right {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        margin-top: 0;
        overflow-y: visible;
    }

    .popup_right > div {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
    }

    .popup_right_left_txt {
        width: 30%;
        font-size: 3.5vw !important;
        width: 21%;
    }

    .popup_right_left_txt::after {
        top: 28%;
    }

    .popup_right > div > div:nth-child(2) {
        font-weight: 400;
        font-size: 3.5vw;
        width: 60%;
    }

    .popup_close {
        top: 2%;
        right: 3%;
        height: 7.5vw;
        width: 7.5vw;
        z-index: 10;
        border-radius: 50%;
        background: #fff;
    }
}


/* =============component================ */
[data-hover="scale"] {
    transition:
        transform 0.25s,
        filter 0.25s;
    will-change: transform;

    &:hover {
        transform: scale(1.03);
        filter: brightness(1.05) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
    }
}
[data-hover="dim"] {
    transition: filter 0.25s;

    &:hover {
        filter: brightness(0.85);
    }
}