:root {
    interpolate-size: allow-keywords;

    --primary: #003260;
    --secondary: #c7000c;
    --tertiary:#FFE3BB;
    --bg-color: #fef5e8;

    --adminH-text: #fff;
    --adminH-text--hover: rgba(50, 53, 205, 1);
    --adminH-bgColor: rgba(50, 53, 205, 0.8);
    --adminH-bgColor--hover: rgba(255, 255, 255, 0.8);
    --adminH-outline: rgba(50, 53, 205, 0.3);

    --vWebColor: #3235cd;

    --footerH: 7.6rem;
    --headerH: 9rem;

    --max-grid: 172rem;

    /* 기본폰트 */
    --font-family: "Pretendard Variable", sans-serif;

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

    /* 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-112: 11.2rem; --size-120: 12rem; --size-128: 12.8rem; --size-160: 16rem; --size-200: 20rem;
    /* pc fontsize */
    --titleXL: var(--size-60);
    --titleL: var(--size-55);
    --titleM: var(--size-45);
    --titleS: var(--size-40);
    --titleXS: var(--size-35);

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

    --subheadL: var(--size-28);
    --subheadM: var(--size-24);
    --subheadS: var(--size-15);

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

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

@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-112: 29.8667vw; --size-120: 32vw; --size-128: 34.1333vw; --size-160: 42.6667vw; --size-200: 53.3333vw;

        /* mobile fontsize */
        --titleXL: var(--size-30);
        --titleL: var(--size-28);
        --titleM: var(--size-26);
        --titleS: var(--size-25);
        --titleXS: var(--size-24);

        --headL: var(--size-18);
        --headM: var(--size-18);
        --headS: var(--size-16);

        --subheadL: var(--size-16);
        --subheadM: var(--size-15);
        --subheadS: var(--size-14);

        --bodyXL: var(--size-16);
        --bodyL: var(--size-14);
        --bodyM: var(--size-14);
        --bodyS: var(--size-13);
        /* --bodyXS: 12px; */

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

/* 스타일 초기화 */
blockquote, body, button, dd, dl, dt, fieldset, figure, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, ul { margin: 0; padding: 0; border: none; }
button { background-color: inherit; font-size: inherit; font-family: inherit; font-weight: inherit; cursor: pointer; color: inherit; background: 0 0; }
textarea { border: none; outline: 0; }
li, ol, ul { list-style: none; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
#ctt { display: none; }
/* ------------------------- 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; }
}
body {
    font-family: var(--font-family); font-size: var(--bodyM); letter-spacing: -0.04em; line-height: 1.5; word-break: keep-all;
    @media (max-width:599px) { font-size: 3.8647vw; }
}
/* section */
section {
    font-family: var(--font-family); position: relative; overflow: hidden;
    @media (width < 599px) { scroll-margin-top: calc(var(--headerH) + 1rem); }
}
@media (width < 599px) {
    body:has(.sticky__nav) section { scroll-margin-top: calc(var(--headerH) + 8rem); }
}
.c-primary { color: var(--primary); }
.c-secondary { color: var(--secondary); }
.c-tertiary { color: var(--tertiary); }
.c-white { color: #fff; }
.c-black { color: #000; }
.c-red {color: #C7000C;}
.bg-white { background-color: #fff; }
.bg-black { background-color: #000; }
.bg-color { background-color: var(--bg-color); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-red {background-color: #C7000C;}
/* -------------------- font ----------------------- */
[data-font="pretendard"] { font-family: "Pretendard Variable", sans-serif; letter-spacing: -0.05em; }
[data-font="paperlogy"] { font-family: 'Paperlogy', sans-serif; letter-spacing: -0.05em; }
[data-font="miwon"] { font-family: 'Miwon', serif; }
/* --- Typography Classes --- */

/* Titles */
.titleXL { font-size: var(--titleXL); }
.titleL { font-size: var(--titleL); }
.titleM { font-size: var(--titleM); }
.titleS { font-size: var(--titleS); }
.titleXS { font-size: var(--titleXS); }
/* Headings */
.headL { font-size: var(--headL); }
.headM { font-size: var(--headM); }
.headS { font-size: var(--headS); }
/* Subheadings */
.subheadL { font-size: var(--subheadL); }
.subheadM { font-size: var(--subheadM); }
.subheadS { font-size: var(--subheadS); }
/* Body Text */
.bodyXL { font-size: var(--bodyXL); }
.bodyL { font-size: var(--bodyL); }
.bodyM { font-size: var(--bodyM); }
.bodyS { font-size: var(--bodyS); }
.bodyXS { font-size: var(--bodyXS); }

.fs-70 { font-size: var(--size-70);}
@media (width < 600px) {
    .fs-70 { font-size: var(--size-36);}
}
#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; }
.italic { font-style: italic; }
.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: 200; }
.thin { font-weight: 100; }
.upperCase { text-transform: uppercase; }
.ta-c { text-align: center; }
.textLine-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.textLine-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.textLine-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ta-end { text-align: end; }
.ta-start { text-align: start; }
p { word-break: keep-all !important; }
strong { font-weight: 800; }
/* swiper */
.swiper { display: block; z-index: 0; }
.swiper-wrapper { will-change: transform; }
.swiper-wrapper.flow { pointer-events: none; transition-timing-function: linear; }
.swiper-button-disabled { opacity: 0.3; }
/* .swiper-slide-active {
    z-index: 1;
} */

/* cursor lib */
.pointer { cursor: pointer; }
.eventNone { pointer-events: none; }
/* element defalut lib */
iframe { width: 100%; height: 100%; }
.vst-form-group iframe { pointer-events: auto; }
img { object-fit: cover; height: auto; }
video { width: 100%; height: 100%; object-fit: cover; }
.swiper-button-lock { display: none !important; }
/* 로딩 */
.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 var(--primary); /* 브랜드 메인색상 */
    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; }
/* ---------flex---------- */
.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; }
.mob-col {
    @media (max-width:599px) { flex-direction: column; }
}
.mob-col-reverse {
    @media (max-width:599px) { flex-direction: column-reverse; }
}
.mob-row {
    @media (max-width:599px) { flex-direction: row; }
}
.flexShrink-0 { flex-shrink: 0}
.flex-110 { flex: 1 1 0}
.flexGrow-1 { flex-grow: 1}
.justify-c { justify-content: center}
.justify-sb { justify-content: space-between}
.justify-sa { justify-content: space-around}
.justify-end { justify-content: end}
.align-c { align-items: center}
.align-start { align-items: start}
.align-end { align-items: end}
span[data-splited=true] { display: inline-block}
.block { display: block}
.grid { display: grid}
.mobile-grid { display: none}
.pc-flex { display: flex !important}
.mobile-flex { display: none !important}
.mobile-inline { display: none !important}
.pc { display: block !important}
.mobile { display: none !important}
.pc-inline { display: inline !important}
.pc-grid { display: grid !important}
.inline { display: inline-block !important}
span { display: inline-block}
@media (max-width:599px) {
    .pc-flex { display: none !important }
    .pc { display: none !important }
    .pc-inline { display: none !important }
    .pc-grid { display: none !important }
    .mobile-flex { display: flex !important }
    .mobile { display: block !important }
    .mobile-grid { display: grid !important }
    .mobile-inline { display: grid !important }
}
/* ---- position ---- */

.absol { position: absolute}
.rltv { position: relative}
.fixed { position: fixed}
.inset-0 { inset: 0}
/* ----------------- flex gap ----------------- */
.gap-4 { gap: .4rem}
.gap-8 { gap: .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.6rem}
.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-120 { gap: 12rem}
.gap-128 { gap: 12.8rem}
.gap-160 { gap: 16rem}
/* -------------------- width ---------------------- */
.w-100 { width: 100%}
.h-100 { height: 100%}
.resize { width: fit-content}
/* ----- margin ------ */
/* margin top */
.mt-1 { margin-top: 1rem}
.mt-2 { margin-top: 2rem}
.mt-3 { margin-top: 3rem}
.mt-4 { margin-top: 4rem}
.mt-5 { margin-top: 5rem}
.mt-6 { margin-top: 6rem}
.mt-7 { margin-top: 7rem}
.mt-10 { margin-top: 10rem}
.mt-14 {margin-top: 14rem;}
.mt-15 {margin-top: 15rem;}
/* Margin Left */
.ml-1 { margin-left: 1rem}
.ml-2 { margin-left: 2rem}
.ml-3 { margin-left: 3rem}
.ml-4 { margin-left: 4rem}
.ml-5 { margin-left: 5rem}
.ml-6 { margin-left: 6rem}
.ml-7 { margin-left: 7rem}
.ml-10 { margin-left: 10rem}
.ml-auto { margin-left: auto}
/* Margin Right */
.mr-1 { margin-right: 1rem}
.mr-2 { margin-right: 2rem}
.mr-3 { margin-right: 3rem}
.mr-4 { margin-right: 4rem}
.mr-5 { margin-right: 5rem}
.mr-6 { margin-right: 6rem}
.mr-7 { margin-right: 7rem}
/* Margin Bottom */
.mb-1 { margin-bottom: 1rem}
.mb-2 { margin-bottom: 2rem}
.mb-3 { margin-bottom: 3rem}
.mb-4 { margin-bottom: 4rem}
.mb-5 { margin-bottom: 5rem}
.mb-6 { margin-bottom: 6rem}
.mb-7 { margin-bottom: 7rem}
/* margin */
.m-1 { margin: 1rem}
.m-2 { margin: 2rem}
.m-3 { margin: 3rem}
.m-4 { margin: 4rem}
.m-5 { margin: 5rem}
.m-6 { margin: 6rem}
.m-7 { margin: 7rem}
.m-8 { margin: 8rem}
.m-9 { margin: 9rem}
.m-10 { margin: 10rem}

/* margin x */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-1 { margin-left: 1rem; margin-right: 1rem; }
.mx-2 { margin-left: 2rem; margin-right: 2rem; }
.mx-3 { margin-left: 3rem; margin-right: 3rem; }
.mx-4 { margin-left: 4rem; margin-right: 4rem; }
.mx-5 { margin-left: 5rem; margin-right: 5rem; }
.mx-6 { margin-left: 6rem; margin-right: 6rem; }
.mx-7 { margin-left: 7rem; margin-right: 7rem; }
.mx-8 { margin-left: 8rem; margin-right: 8rem; }
.mx-9 { margin-left: 9rem; margin-right: 9rem; }
.mx-10 { margin-left: 10rem; margin-right: 10rem; }

/* margin y */
.my-1 { margin-top: 1rem; margin-bottom: 1rem; }
.my-2 { margin-top: 2rem; margin-bottom: 2rem; }
.my-3 { margin-top: 3rem; margin-bottom: 3rem; }
.my-4 { margin-top: 4rem; margin-bottom: 4rem; }
.my-5 { margin-top: 5rem; margin-bottom: 5rem; }
.my-6 { margin-top: 6rem; margin-bottom: 6rem; }
.my-7 { margin-top: 7rem; margin-bottom: 7rem; }
.my-8 { margin-top: 8rem; margin-bottom: 8rem; }
.my-9 { margin-top: 9rem; margin-bottom: 9rem; }
.my-10 { margin-top: 10rem; margin-bottom: 10rem; }


/* ----- padding ------ */
/* padding top */
.pt-1 { padding-top: 1rem}
.pt-2 { padding-top: 2rem}
.pt-3 { padding-top: 3rem}
.pt-4 { padding-top: 4rem}
.pt-5 { padding-top: 5rem}
.pt-6 { padding-top: 6rem}
.pt-7 { padding-top: 7rem}
/* padding Left */
.pl-1 { padding-left: 1rem}
.pl-2 { padding-left: 2rem}
.pl-3 { padding-left: 3rem}
.pl-4 { padding-left: 4rem}
.pl-5 { padding-left: 5rem}
.pl-6 { padding-left: 6rem}
.pl-7 { padding-left: 7rem}
.pl-10 { padding-left: 10rem}
/* padding Right */
.pr-1 { padding-right: 1rem}
.pr-2 { padding-right: 2rem}
.pr-3 { padding-right: 3rem}
.pr-4 { padding-right: 4rem}
.pr-5 { padding-right: 5rem}
.pr-6 { padding-right: 6rem}
.pr-7 { padding-right: 7rem}
/* padding Bottom */
.pb-1 { padding-bottom: 1rem}
.pb-2 { padding-bottom: 2rem}
.pb-3 { padding-bottom: 3rem}
.pb-4 { padding-bottom: 4rem}
.pb-5 { padding-bottom: 5rem}
.pb-6 { padding-bottom: 6rem}
.pb-7 { padding-bottom: 7rem}
/* padding */
.p-1 { padding: 1rem}
.p-2 { padding: 2rem}
.p-3 { padding: 3rem}
.p-4 { padding: 4rem}
.p-5 { padding: 5rem}
.p-6 { padding: 6rem}
.p-7 { padding: 7rem}
.p-8 { padding: 8rem}
.p-9 { padding: 9rem}
.p-10 { padding: 10rem}

/* padding x */
.px-1 { padding-left: 1rem; padding-right: 1rem}
.px-2 { padding-left: 2rem; padding-right: 2rem}
.px-3 { padding-left: 3rem; padding-right: 3rem; }
.px-4 { padding-left: 4rem; padding-right: 4rem; }
.px-5 { padding-left: 5rem; padding-right: 5rem; }
.px-6 { padding-left: 6rem; padding-right: 6rem; }
.px-7 { padding-left: 7rem; padding-right: 7rem; }
.px-8 { padding-left: 8rem; padding-right: 8rem; }
.px-9 { padding-left: 9rem; padding-right: 9rem; }
.px-10 { padding-left: 10rem; padding-right: 10rem; }

/* padding y */
.py-1 { padding-top: 1rem; padding-bottom: 1rem}
.py-2 { padding-top: 2rem; padding-bottom: 2rem; }
.py-3 { padding-top: 3rem; padding-bottom: 3rem; }
.py-4 { padding-top: 4rem; padding-bottom: 4rem; }
.py-5 { padding-top: 5rem; padding-bottom: 5rem; }
.py-6 { padding-top: 6rem; padding-bottom: 6rem; }
.py-7 { padding-top: 7rem; padding-bottom: 7rem; }
.py-8 { padding-top: 8rem; padding-bottom: 8rem; }
.py-9 { padding-top: 9rem; padding-bottom: 9rem; }

/* ---- width ---- */
.w-fit{width:fit-content;}


/* ---- img ---- */
section img { width: 100%; }
#bo_v_img img, #bo_v_con img { width: auto; max-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: #fff}

.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 -------------------------- */
/* 왼쪽부터 나타나기 */
.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 */

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; }
.open_policy_modal { cursor: pointer; }
.borderR-max { border-radius: 999px; }
.border-0 { border: none; }
.border-1 { border: 1px solid currentColor; }
.bl-1 { border-left: 1px solid currentColor; }
.bt-1 { border-top: 1px solid currentColor; }
.br-1 { border-right: 1px solid currentColor; }
.bb-1 { border-bottom: 1px solid currentColor; }
.w-1 { width: 1px; }
.h-1 { height: 1px; }
.opa-25 { opacity: 0.25; }
.opa-50 { opacity: 0.5; }
.opa-75 { opacity: 0.75; }
.opa-100 { opacity: 1; }
.bx { box-sizing: border-box; }

/* =============component================ */
/* hover effect */
@media (hover:hover) and (width>599px) {
    [data-hover] {
        backface-visibility: hidden;

        img, svg { will-change: transform; backface-visibility: hidden; }
    }
    [data-hover="scale"] {
        transform: scale(1); transition: transform 0.25s, filter 0.25s; will-change: transform;

        &:hover { transform: scale(1.02); filter: brightness(1.02) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1)); }
    }
    [data-hover="up"] {
        transform: translateY(0); transition: transform 0.25s, filter 0.25s; will-change: transform;

        &:hover { transform: translateY(-0.4rem); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1)); }
        &:active { transform: translateY(-0.2rem); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1) brightness(0.97)); }
    }
    [data-hover="dim"] {
        transition: filter 0.25s;

        &:hover { filter: brightness(0.85); }
    }
    [data-hover="bright"] {
        transition: filter 0.25s;

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

/* first section */
/* section:first-of-type {
    padding-top: var(--headerH);
} */
/* section:last-of-type {
    padding-bottom: 10rem;
} */

/* toast */
#toast {
    position: fixed; bottom: 10rem; left: 50%; transform: translate(-50%); background-color: var(--primary); color: #000; padding: 1.2rem 2.4rem; border-radius: 999px; z-index: 10; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));

    @media (width < 600px) { bottom: 20rem; text-align: center; }
}
/* button */
@keyframes button__toRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

.button {
    --button-bg: var(--primary);
    --button-fc: #fff;
    --button-px:2rem;
    --button-py:2rem;
   background-color: var(--button-bg); color: var(--button-fc); padding: var(--button-py) var(--button-px); border-radius: 1.2rem; align-items: center; cursor: pointer;

@media (hover:hover) {
    &:hover svg { animation: button__toRight 1s infinite; }
}
}
/* banner */
section.banner { height: 49rem; position: relative; background-color: #fff; box-sizing: border-box; }
.banner__title { font-size: 8rem; font-style: italic; line-height: 1; padding-bottom: 1rem; border-bottom: 0.3rem solid #000; }
@media (width < 600px) {
    .banner { height: 35vh; min-height: 25rem; }
    .banner__title { font-size: 40px; padding-bottom: 4px; border-bottom-width: 2px; }
}

/* sticky nav */
.sticky__nav {
    position: sticky; top: 0; left: 0; height: 7rem; z-index: 2000; background-color: var(--bg-color); transition: top 0.2s; will-change: transform; transform: translateZ(0); backface-visibility: hidden;

    &.drop { top: var(--headerH); }
    &.insert { top: 0; }
}
.sticky__nav--inner { max-width: var(--max-grid); margin: 0 auto; }

.nav__item {
    padding: 0 4rem; color: #fff; transition: color 0.3s; line-height: 1.2;

    &.active { color: var(--primary); font-weight: 600; }
}
@media (hover:hover) {
    .nav__item:hover { color: var(--primary); }
}

@media (width < 600px) {
    .sticky__nav { top: var(--headerH); height: 8rem; z-index: 1999; }
    .nav__item { padding: 0 2rem; font-size: var(--size-12); }
}

/* 스와이퍼 버튼 */
.swiper_next, .swiper_prev {
    border: 1px solid rgba(255, 255, 255, 0.5); width: 6rem; height: 2.6rem; border-radius: 0.6rem; cursor: pointer; flex-shrink: 0;

    @media (width < 600px) { width: auto; height: 42px; aspect-ratio: 92/52; }
}

/* tab menu */
@media (width < 600px) {
    .tab--wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; }
}

.tab {
    color: #fff; background-color: #000; padding: 2rem 3rem; border-radius: 1rem; transition: color 0.2s, background-color 0.2s, filter 0.2s;

    @media (hover:hover) {
        &:hover { filter: brightness(1.05); }
    }
    &:active { filter: brightness(0.95); }
    &.active { color: #000; background-color: var(--primary); }
}
@media (width < 600px) {
	.mob-ml-0 { margin-left: 0; }
	.mob-ml-1 { margin-left: 1rem; }
    .mob-mt-2 {margin-top: 2rem;}
    .mob-px-0 {padding-left: 0;padding-right: 0;}
    .mob-gap-4 {gap: var(--size-4);}
    .mob-gap-8 {gap: var(--size-8);}
    .mob-justify-c {justify-content: center;}
    .mob-ta-c {text-align: center;}
    .mob-ml-0 {margin-left: 0;}
}