:root {
    --primary: #e35314;
    --secondary: #ffaf20;
    --tertiary: #180a05;
    --primary-dim: #999;
    --bg-color: #fbf4ec;

    --input-bg: #222;
    --input-border: #000;
    --input-stroke: #fff;

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

    --font-family: "SUIT 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-100);
    --titleM: var(--size-80);

    --headL: var(--size-60);
    --headM: var(--size-36);
    --headS: var(--size-30);

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

    --bodyL: var(--size-24);
    --bodyM: var(--size-22);
    --bodyS: var(--size-20);
    --bodyXS: var(--size-18);

    /* 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-42);
        --titleM: var(--size-38);

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

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

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

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

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

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: round(up, 1.6vw, 1px); */
        font-size: 1.6vw;
    }
}

/* 이미지 로딩 */
.resize img {
    opacity: 0;
    transition: opacity 0.3s;
    display: block;
}
.resize img[data-resized="true"] {
    opacity: 1;
}

#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;
}
.sebold {
    font-weight: 600;
}
.medium {
    font-weight: 500;
}
.regular {
    font-weight: 400;
}
.flight {
    font-weight: 200;
}
.thin {
    font-weight: 100;
}
.animate-blk {
    animation: blk 1s infinite ease-in-out;
}
.scaleOpa {
    animation: scaleOpa infinite 2.5s;
}
.scaleOpa2 {
    animation: scaleOpa infinite 1.5s;
}
.light {
    animation: light infinite 5s;
}
.rotate_img {
    animation: rotate_image 10s infinite linear;
}
.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="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;
}

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

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

.eventNone {
    pointer-events: none;
}

/* element defalut lib */
iframe {
    width: 100%;
    height: 100%;
    pointer-events: none;
}
img {
    object-fit: cover;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-button-lock {
    display: none !important;
}

b {
    font-weight: 700;
}
/* 마커디자인 */
.map_marker {
    position: relative;
    display: inline-block;
}

/* 말풍선 텍스트 박스 */
.map_marker_text {
    background: #be0211;
    border: 0.1rem solid #fff;
    padding: 9px 19px;
    border-radius: 100px;
    font-size: 13px;
    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 #be0211;
}

/* ----------------- 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;
}

.justify-c {
    justify-content: center;
}
.justify-sb {
    justify-content: space-between;
}
.justify-end {
    justify-content: end;
}
.align-c {
    align-items: center;
}

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: var(--size-4);
}
.gap-8 {
    gap: var(--size-8);
}
.gap-10 {
    gap: var(--size-10);
}
.gap-12 {
    gap: var(--size-12);
}
.gap-16 {
    gap: var(--size-16);
}
.gap-20 {
    gap: var(--size-20);
}
.gap-24 {
    gap: var(--size-24);
}
.gap-28 {
    gap: var(--size-28);
}
.gap-32 {
    gap: var(--size-32);
}
.gap-36 {
    gap: var(--size-32);
}
.gap-42 {
    gap: var(--size-42);
}
.gap-52 {
    gap: var(--size-52);
}
.gap-60 {
    gap: var(--size-60);
}
.gap-64 {
    gap: var(--size-64);
}
.gap-72 {
    gap: var(--size-72);
}
.gap-84 {
    gap: var(--size-84);
}
.gap-96 {
    gap: var(--size-96);
}
.gap-128 {
    gap: var(--size-128);
}
.gap-160 {
    gap: var(--size-160);
}
/* -------------------- width ---------------------- */
.w-100 {
    width: 100%;
}
.h-100 {
    height: 100%;
}

.resize {
    width: fit-content;
}

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

/* input general text */
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(--input-bg);
    }
}
/* checkbox */
input[type="checkbox"] {
    --border-width: 1px;
    --stroke-width: 2px;
    appearance: none;
    border-radius: 9rem;
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    border: var(--border-width) solid var(--input-border);
    cursor: pointer;
    background-color: #fff;

    &[type="checkbox"]:checked {
        appearance: none;
        background-color: var(--input-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: 99px;
    }
}
@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-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;
}
.exbold {
    font-weight: 800;
}
.bold {
    font-weight: 700;
}
.sebold {
    font-weight: 600;
}
.medium {
    font-weight: 500;
}
.regular {
    font-weight: 400;
}
.flight {
    font-weight: 200;
}
.thin {
    font-weight: 100;
}
.animate-blk {
    animation: blk 1s infinite ease-in-out;
}
.scaleOpa {
    animation: scaleOpa infinite 2s;
}
.scaleOpa2 {
    animation: scaleOpa2 infinite 2s;
}
.light {
    animation: light infinite 5s;
}
.rotate_img {
    animation: rotate_image 10s infinite linear;
}
.white {
    color: white;
}
.txct {
    text-align: center;
}
.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;
}
/* --------------------------- 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 {
    animation: marqueeX 20s infinite linear;
}
.image_sd .absol {
    left: 100%;
}
.image_sd_r {
    animation: marqueeX_r 20s infinite linear;
}
.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 {
    animation: marqueeY 20s infinite linear;
}
.slide_y img.absol {
    top: 100%;
}
.slide_y_r {
    animation: marqueeY_r 20s infinite linear;
}
.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;
}
.swiper {
    margin: 0;
    z-index: 0;
}