/* ========== Design Tokens — momenturing ========== */

:root {
    /* 컬러 */
    --tt: #232020;
    /* 타이틀 (블랙 아님) */
    --green: #48855e;
    /* 초록 */
    --blue: #2b7ccb;
    /* 파랑 */
    --ngreen: #d1ff6d;
    /* 형광초록 */
    --nyellow: #f7f435;
    /* 형광노랑 */

    /* 호환용 별칭 (기존 스킨 호환) */
    --mc: #48855e;
    /* 메인 — 초록 */
    --sc: #2b7ccb;
    /* 보조 — 파랑 */
    --tc: #232020;
    /* 타이틀 */
    --fc: #d1ff6d;
    /* 포인트 — 형광초록 */

    /* 폰트 */
    --mf: "SUIT";
    /* 본문 */
    --sf: "YPairing";
    /* 디자인 1 — Y페어링체 */
    --tf: "IMCrisujin";
    /* 디자인 2 — 아임크리수진체 */
    --ff: "Moneygraphy-Rounded";
    /* 영문/숫자 — 머니그라피라운디드 */
    --fiff: "YPairing";

    --table-header: #fff8e6;
    --table-footer: #ffd04a;
    --table-border: #d1d1d1;
    --font-black: #232020;
}

/* ===== Y페어링체 (디자인 1) ===== */
@font-face {
    font-family: "YPairing";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2601-4@1.1/YPairingFont.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "YPairing";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2601-4@1.1/YPairingFont-Bd.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* ===== 아임크리수진체 (디자인 2) ===== */
@font-face {
    font-family: "IMCrisujin";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.3/ImcreSoojin.woff") format("woff");
    font-weight: normal;
    font-display: swap;
}

/* ===== 머니그라피라운디드 (영문/숫자) ===== */
@font-face {
    font-family: "Moneygraphy-Rounded";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2411-2@1.0/Moneygraphy-Rounded.woff2") format("woff2");
    font-weight: normal;
    font-display: swap;
}

.fwrap {
    flex-wrap: wrap;
}

/* 사이트 로딩 초기화 스타일 */
/* 사이트 전체를 일단 숨김 (투명도 0 + 클릭 방지) */
/*body {*/
/*    visibility: hidden;*/
/*    opacity: 0;*/
/*}
*/

@font-face {
    font-family: "Suit";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2") format("woff2");
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: "Suit";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: "Suit";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Suit";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2") format("woff2");
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "Suit";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Suit";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Suit";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Suit";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Suit";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2") format("woff2");
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: "aHeadlineM";
    /* 앞으로 이 폰트를 부를 이름 */
    /* 주의: 경로 설정을 잘 해야 합니다. */
    src: url("/font/a헤드라인M.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    /* 폰트 로딩될 때까지 기본 폰트로 글자 보여주기 (깜빡임 방지) */
}

@font-face {
    font-family: "SF_HambakSnow";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_HambakSnow.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "NanumSquareNeo";
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2);
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "HsJandari";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2510-2@1.0/HSJandari.woff2") format("woff2");
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "Saenggeojincheon";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/SaenggeoJincheon.woff2") format("woff2");
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "YeogiOttaeJalnan";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff") format("woff");
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "MungyeongGamhongApple";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2410-2@1.0/Mungyeong-Gamhong-Apple.woff2") format("woff2");
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "SuSeongHyeJeong";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205-2@1.0/SuseongHyejeong.woff2") format("woff2");
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "SolmoeKimDaegeon";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/kdg_Light.woff") format("woff");
    font-weight: 300;
    font-display: swap;
}

/* ========== Resets & Base ========== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    letter-spacing: -0.04em;
}

p {
    word-break: keep-all;
}

section p {
    letter-spacing: -0.05em;
}

/* Prefer visible focus; override where necessary with a custom ring */

:focus-visible {
    outline: 2px solid var(--mc);
    outline-offset: 2px;
}

/* ========== Typography Utilities ========== */

.sst {
    font-family: var(--sf);
    font-weight: 400;
    font-size: 1vw;
    line-height: 1.5;
}

.tst {
    font-family: var(--tf);
    font-weight: 400;
    font-size: 1vw;
    line-height: 1.5;
}

.mst {
    font-family: var(--mf);
    font-weight: 400;
    font-size: 1vw;
    line-height: 1.5;
}

.mf {
    font-family: var(--mf);
    font-weight: 400;
    line-height: 1.5;
}

.sf {
    font-family: var(--sf);
    font-weight: 300;
    line-height: 1.25;
}

.tf {
    font-family: var(--tf);
    font-weight: 300;
}

/* fixed: was var(--tc) */

.ff {
    font-family: var(--ff);
    font-weight: 300;
}

/* fixed: was var(--tc) */

.fiff {
    font-family: var(--fiff);
    font-weight: 300;
}

/* fixed: was var(--tc) */

/* Optional semantic weight */

.black {
    font-weight: 900;
}

.extrabold {
    font-weight: 800;
}

.bold {
    font-weight: 700;
}

.semibold {
    font-weight: 600;
}

.medium {
    font-weight: 500;
}

.regular {
    font-weight: 400;
}

.light {
    font-weight: 300;
}

.extralight {
    font-weight: 200;
}

.thin {
    font-weight: 100;
}

.underline {
    line-height: 1.15;
    border-bottom: 0.1vw solid black;
}

.mc.underline {
    border-bottom: 0.1vw solid var(--mc);
    line-height: 1.15;
}

section img {
    width: 100%;
}

.exsm {
    font-size: 0.85vw;
}

.sm {
    font-size: 0.95vw;
}

.sm-md {
    font-size: 1.3vw;
}

.semimd {
    font-size: 1.7vw;
}

.md {
    font-size: 2vw;
}

.exmd {
    font-size: 2.5vw;
}

.md-lg {
    font-size: 3.4vw;
}

.semilg {
    font-size: 3.9vw;
}

.lg {
    font-size: 4.3vw;
}

.exlg {
    font-size: 5vw;
}

/* ========== Color Utilities ========== */

.mcbg {
    background: var(--mc);
}

.scbg {
    background: var(--sc);
}

.tcbg {
    background: var(--tc);
}

.fcbg {
    background: var(--fc);
}

.fifcbg {
    background: var(--fifc);
}

.mc {
    color: var(--mc);
}

.sc {
    color: var(--sc);
}

.tc {
    color: var(--tc);
}

.fc {
    color: var(--fc);
}

.fifc {
    color: var(--fifc);
}

/* ========== Layout Utilities ========== */

.vcline {
    height: 100%;
    width: 0.01vw;
}

.hzline {
    width: 100%;
    height: 0.01vw;
}

.rltv {
    position: relative;
}

.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;
}

.pc-mobile {
    display: flex;
}

.mobile-pc {
    display: none;
}

html {
    scroll-behavior: smooth !important;
}

/* ========== Scroller (Marquee) ========== */

.scrX {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scrX .scrX_item {
    animation: marqueeX 20s linear infinite;
    width: 100%;
}

.scrX .scrX_item_absol {
    right: -100%;
    width: 100%;
}

.scrX.reverse .scrX_item {
    animation-direction: reverse;
}

.scrY.reverse .scrY_item {
    animation-direction: reverse;
}

.scrX.slow .scrX_item {
    animation-duration: 40s;
}

/* ========== Components ========== */
/* keep only once */

/* Buttons (new) */

.k_new_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 2% 0 6%;
}

.k_btn_inner {
    font-size: 1.5vw;
    background: #000;
    color: #fff;
    padding: 1% 3%;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    white-space: nowrap;
}

.k_btn_inner>a {
    color: #fff;
    text-decoration: none;
}

.k_new_btn>.k_btn_inner:nth-child(2) {
    background: #0000008f;
    margin-left: 2%;
    padding: 0.7% 2% !important;
}

.k_btn_inner>input {
    outline: none;
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.1em;
}

.zin {
    z-index: 2;
    position: relative;
}

.absol {
    position: absolute;
}

/* Board */
#bo_v>header {
    display: block;
    position: relative;
    background: transparent;
    padding: 0;
    border-bottom: 1px solid #000;
    font-family: var(--mf);
    /* de-duped */
}

#bo_v_title .bo_v_tit,
.board_title {
    font-family: var(--mf);
    font-weight: 700;
    letter-spacing: -1px;
}

#bo_v_title .bo_v_tit {
    font-size: 17px;
    margin: 5px 0 0;
    word-break: break-all;
}

#bo_v_con {
    margin: 30px 0;
    width: 100%;
    min-height: 200px;
    overflow: hidden;
    line-height: 1.7;
    font-size: 1.3em;
    font-family: var(--mf);
    word-break: break-all;
}

#bo_w .bo_w_tit .frm_input {
    padding-right: 0;
}

/* Header */

.legacy-global-header.drop {
    position: fixed;
    animation: dropHeader 0.3s;
}

.legacy-global-header.insert {
    position: fixed;
    animation: insertHeader 0.3s;
    top: -7rem;
}

.header_logo_1 {
    width: 100%;
}

.header_logo_2 {
    width: 72%;
    margin-top: -3%;
}

.header_menu_1:hover {
    font-weight: 700;
    color: var(--mc);
    border-top: 0.35vw solid transparent;
    border-bottom: 0.35vw solid var(--mc);
}

.header_menu_1.header_menu_form {
    background: #c21312;
    padding: 0.2vw 0.5vw;
    border-radius: 0.5vw;
}

.header_menu_1.header_menu_form:hover {
    font-weight: 400;
}

/* Quick */

.header_quick {
    position: fixed;
    top: 30%;
    right: 2%;
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
    z-index: 33333;
}

.header_quick_item {
    width: 4vw;
    height: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 1vw;
    color: #fff;
    font-family: var(--mf);
    cursor: pointer;
    transition: 0.3s;
}

.header_quick_item img {
    width: 100%;
}

.header_quick_item02 {
    width: 5vw;
    height: 5vw;
    font-size: 1.4vw;
}

/* Content wrap */

#content_wrap {
    padding-bottom: 0 !important;
}


/* ========== Fonts ========== */
@font-face {
    font-family: "SfHambakneun";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_HambakSnow.woff") format("woff");
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2") format("woff2");
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2") format("woff2");
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: "proxima-nova", sans-serif;
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: "proxima-nova", sans-serif;
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "proxima-nova", sans-serif;
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "proxima-nova", sans-serif;
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "proxima-nova", sans-serif;
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "proxima-nova", sans-serif;
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "proxima-nova", sans-serif;
    font-weight: 900;
    font-style: normal;
}

/* ========== Animations ========== */
@keyframes marqueeX {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes marquee3 {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes blk {

    0%,
    30% {
        opacity: 0;
    }

    31%,
    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes blk2 {

    0%,
    49% {
        opacity: 0;
    }

    50%,
    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes ddm_m {
    0% {
        transform: scale(1);
    }

    50% {
        transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -15);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ddm_m_reverse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: matrix(0.8, 0.01, 0.01, 0.8, 0, -5);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes line-top {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(13px);
    }
}

@keyframes line-top-reverse {
    from {
        transform: translateY(13px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes line-top-rotate {
    from {
        transform: translateY(13px) rotateZ(0);
    }

    to {
        transform: translateY(13px) rotateZ(45deg);
    }
}

@keyframes line-top-rotate-reverse {
    from {
        transform: translateY(13px) rotateZ(45deg);
    }

    to {
        transform: translateY(13px) rotateZ(0);
    }
}

@keyframes line-mid {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0);
    }
}

@keyframes line-mid-reverse {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@keyframes line-mid-invisible {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(0);
    }
}

@keyframes line-bot {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-13px);
    }
}

@keyframes line-bot-reverse {
    from {
        transform: translateY(-13px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes line-bot-rotate {
    from {
        transform: translateY(-13px) rotateZ(0);
    }

    to {
        transform: translateY(-13px) rotateZ(135deg);
    }
}

@keyframes line-bot-rotate-reverse {
    from {
        transform: translateY(-13px) rotateZ(135deg);
    }

    to {
        transform: translateY(-13px) rotateZ(0);
    }
}

@keyframes dropHeader {
    from {
        top: -7rem;
    }

    to {
        top: 0;
    }
}

@keyframes insertHeader {
    from {
        top: 0;
    }

    to {
        top: -7rem;
    }
}

.bgimg {
    width: 106% !important;
    height: 100% !important;
    position: absolute;
    object-fit: cover;
    display: block;
    pointer-events: none;
    z-index: 0;
}

.white {
    color: white;
}

.whitebg {
    background: white;
}

.header_menu_1ab1 img {
    width: 100%;
}

.header_menu_1ab2 img {
    width: 100%;
}

.header_menu_1ab2 {
    top: 0%;
    width: 65%;
    display: flex;
    justify-content: center;
    transition: 0.3s top;
    pointer-events: none;
    opacity: 0;
    align-items: center;
}

/*.header_menu_1:hover .header_menu_1ab1{*/
/*    bottom: 145%;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    opacity: 1;*/
/*}
*/
/*.header_menu_1:hover .header_menu_1ab2{*/
/*    top: 206%;*/
/*    width: 65%;*/
/*    display: flex;*/
/*    opacity: 1;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}
*/

.face .face_top_2nd {
    margin-left: 0%;
    width: 75.5%;
    overflow: hidden;
    margin-top: 1.3% !important;
    font-size: 0.9vw;
}

.face .face_top_3rd {
    margin-left: 0%;
    width: 76%;
    margin-top: 0.2%;
    overflow: hidden;
}

.face .face_top_4th {
    margin-left: 0%;
    overflow: hidden;
    width: 75.6%;
    margin-top: 0.3%;
}

.face .face_top {
    height: 14.4vw;
    margin-top: 5.7%;
    margin-left: -75.3%;
    background: white;
    width: 0.01vw;
}

.semilg .line {
    overflow: hidden;
}

.md-lg .line {
    overflow: hidden;
}

.bold .line {
    overflow: hidden;
}

.sf .line {
    overflow: hidden;
}

.tf .line {
    overflow: hidden;
}

.menu_2nd .con7_mid_top_cate {
    display: flex;
    justify-content: center;
    align-items: center;
    width: unset;
    white-space: nowrap;
    height: 100%;
    transition: 0.3s all;
    cursor: pointer;
}

.clip_left {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    transition: all 0.8s;
}

.clip_right {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transition: all 0.8s;
}

/* 가운데에서 나타나기 */

.clip_mid {
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    transition: all 0.8s;
}

.clip_circle {
    clip-path: circle(0% at 50% 50%);
    transition: all 2s !important;
}

.clip_bottom {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
    transition: all 0.8s;
}

.clip_top {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: all 0.8s;
}

/* gsap에서 넣을 class */

.clip_on {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}

.clip_on2 {
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0) !important;
}

.clip_on3 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}

.clip_on4 {
    clip-path: circle(100% at 50% 50%) !important;
}

.clip_right_on {
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}

.header_tel img {
    width: 100%;
}

.header_menu_1ab1 {
    bottom: 0%;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s bottom;
    pointer-events: none;
    background: var(--mc);
    width: 0.2vw;
    height: 0.2vw;
    overflow: hidden;
    border-radius: 50%;
}

.scaleX {
    transform: scaleX(-1);
}

.scaleY {
    transform: scaleY(-1);
}

.scaleanti {
    transform: scale(-1);
}

.header_telab {
    left: 115%;
}

.header_menu_1 {
    white-space: nowrap;
    font-weight: 400;
    font-family: var(--mf) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8%;
    height: 100%;
    box-sizing: border-box;
    transition: 0.2s border;
    border-top: 0vw solid transparent;
    border-bottom: 0vw solid var(--mc);
    color: white;
    position: relative;
}

.header_logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: unset;
    margin-left: 5%;
    padding: 1.1% 0;
    max-width: 13.455%;
}

.header_menu {
    box-sizing: border-box;
    position: relative;
    left: unset;
    transform: unset;
    font-family: var(--mf);
    font-size: 0.9vw;
    width: 53%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: black;
    margin-left: 14%;
}

.legacy-global-header {
    position: absolute;
    top: 0;
    z-index: 9999;
    font-size: 0.9vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: white;
    transition: top 0.3s;
    padding: 0.5% 0;
    background: transparent;
    border-radius: unset;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 1.4px solid white;
}

.header_tel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 11% !important;
    background: transparent;
    padding: 2% 1.3%;
    right: 4%;
    height: 100%;
    box-sizing: border-box;
    max-width: unset;
}

/* #hd_pop 안에 div가 없을 때만 pointer-events: none 적용 */

#hd_pop:not(:has(div)) {
    pointer-events: none;
}

/* ========== Responsive ========== */
@media (max-width: 600px) {
    .hd_pops_con {
        width: 100% !important;
        height: auto !important;
    }

    .hd_pops_footer {
        font-size: 2.6vw !important;
    }

    .pc-mobile {
        display: none;
    }

    .mobile-pc {
        display: flex;
    }

    .header_tel {
        display: none;
    }

    .header_menu_drop {
        right: 0;
        pointer-events: auto;
        opacity: 1;
    }

    .header_quick {
        top: 48%;
        right: 0%;
        gap: 1.5vw;
    }

    .header_quick_item {
        width: 13vw;
        height: 13vw;
    }

    .header_quick_item02 {
        width: 16vw;
        height: 16vw;
    }


    .main_small_title {
        font-size: 3.3vw;
        line-height: 1.5;
    }

    .menu-hide {
        display: none !important;
    }

    .menu-show {
        display: flex !important;
    }

    .hamburger-top {
        top: 13% !important;
    }

    .hamburger {
        position: absolute;
        top: 33%;
        right: 5%;
    }

    .hamburger-menu {
        width: 8vw;
        height: 4.5vw;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .top-reverse {
        top: 0%;
    }

    .bot-reverse {
        bottom: 0%;
    }

    .line_change.top-reverse {
        top: 50%;
        transform: translate(0, -50%) rotate(45deg);
    }

    .line_change.mid-reverse {
        opacity: 0;
    }

    .line_change.bot-reverse {
        bottom: 50%;
        transform: translate(0, 50%) rotate(-45deg);
    }

    div.line {
        width: 100%;
        height: 2px;
        border-radius: 0px;
        transition: all 0.3s;
        transform-origin: center;
        position: absolute;
        margin: 0 !important;
        background: var(--mc);
    }

    .mst {
        font-family: var(--mf);
        font-weight: 400;
        font-size: 3.3vw;
        line-height: 1.5;
    }

    .sm {
        font-size: 3.45vw;
    }

    .con2_menu_tab_item {
        text-align: center;
        line-height: 1.5vw;
        padding: 0 8%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.3s all;
    }

    .con2_menu_tab {
        width: 80% !important;
        top: unset;
        right: unset;
        position: relative;
        margin-top: 8%;
    }

    .con2_menu_tab_itemab {
        width: 5vw;
    }

    .con2_menu_tab_item:hover .con2_menu_tab_itemab {
        opacity: 1;
        bottom: 204%;
    }

    .semimd {
        font-size: 4.2vw;
    }

    .face.main {
        height: 84.5vw !important;
        background-attachment: unset !important;
        justify-content: flex-start;
    }

    .face .face_top_4th {
        margin-left: 0%;
        width: 75.6%;
        text-align: center;
        margin-top: 2.3%;
        margin-top: 2%;
    }

    .face .face_top {
        height: 0.5vw;
        margin-top: 48.7%;
        margin-left: 0;
        background: white;
        width: 8vw;
    }

    .face .face_top_2nd {
        margin-left: 0%;
        width: 75.5%;
        font-size: 3.2vw;
        text-align: center;
        margin-top: 2% !important;
    }

    .menu_2nd.con1 {
        background: var(--sc);
        height: 14.5vw;
    }

    .con7_mid_top_cate {
        margin: 0 6% !important;
    }

    .con7_mid_top_cate:hover {
        border-top: 0.9vw solid transparent;
        border-bottom: 0.9vw solid var(--mc);
    }

    .con7_mid_top_cate_on {
        border-top: 0.9vw solid transparent;
        border-bottom: 0.9vw solid var(--mc);
    }

    .menu_2nd .con7_mid_top {
        background: var(--sc);
        padding: unset;
        height: 14.5vw;
    }

    .exsm {
        font-size: 3.1vw;
    }

    .sm-md {
        font-size: 3.8vw;
    }

    .md {
        font-size: 5.8vw;
    }

    .exmd {
        font-size: 6.5vw;
    }

    .md-lg {
        font-size: 8.5vw;
    }

    .semilg {
        font-size: 9.7vw;
    }

    .face .face_top_3rd {
        margin-top: -2% !important;
        white-space: nowrap;
        text-align: center;
        width: 100%;
    }

    .lg {
        font-size: 12.3vw;
    }

    .exlg {
        font-size: 14vw;
    }

    .header_sns {
        left: 56%;
        width: 25.5%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header_sns_item {
        width: 26.5%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .legacy-global-header.drop {
        position: fixed;
        animation: none;
        background-color: white;
        transition: none;
    }

    .legacy-global-header {
        position: fixed;
        z-index: 9999;
        width: 100%;
        font-size: clamp(14px, 3.5vw, 18px);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 15vw;
        top: 0;
        padding: 1.5% 0 !important;
        background: var(--tc) !important;
    }

    #line-mid {
        background-color: var(--fc) !important;
    }

    .header_menu {
        font-size: 4.5vw;
        display: flex;
        left: auto;
        transform: unset;
        position: fixed !important;
        right: -100%;
        pointer-events: none;
        padding: 20% 4%;
        padding-left: 10%;
        width: 60%;
        box-sizing: border-box;
        transition: all 0.3s;
        clear: both;
        background: #fff;
        color: #000;
        height: 100vh;
        flex-wrap: wrap;
        gap: 3vh;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        top: 0%;
        margin-right: 0;
        border-left: 1px solid #e2c496;
    }

    .header_menu.header_menu_drop {
        top: 0%;
        pointer-events: initial !important;
        opacity: 1;
        right: 0;
        background: var(--tc);
        border: unset;
    }

    .header_menu_1 {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0;
        font-weight: 600;
        text-align: start;
        transition: color 0.3s;
        color: #fff;
        height: unset;
    }

    .header_menu_1:hover {
        color: var(--mc);
        font-weight: 700;
        border-top: unset;
        border-bottom: unset;
    }

    .header_logo {
        padding-top: 0%;
        margin-bottom: 0%;
        width: 20% !important;
        max-width: unset;
        margin-left: -50%;
        margin-top: 2%;
    }
}

/* ========== Header Layout ========== */
:root {
    --header-offset: 3.28125vw;
}

.site-header {
    height: 5.2083vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.25s, background .25s, border .25s;
}

.site-header.is-scrolled {
    box-shadow: 0 0.625vw 1.458333vw rgba(35, 32, 32, 0.08);
    background: #f7f2e8;
    border-bottom: 1px solid rgba(35, 32, 32, 0.14);
}

.site-header.is-subpage .site-header__inner,
.site-header.is-scrolled .site-header__inner {
    background: transparent;
    box-shadow: unset;
}

.site-header__inner {
    height: 100%;
    width: 93.75vw;
    margin: 0 auto;
    padding: 0;
    min-height: 3.28125vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.site-header__brand {
    padding: 0 1vw;
    color: var(--tt);
}

.site-header__brand--wrap {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: start;
}

.site-header__brand:hover {
    color: var(--tt);
}

.site-header__brand-image {
    display: block;
    height: auto;
}

.site-header__nav {
    height: 100%;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-header__link {
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.7708vw;
    border-radius: 0;
    background: transparent;
    color: rgba(35, 32, 32, 0.68);
    font-family: var(--mf);
    font-size: 0.9375vw;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.site-header__link::after {
    display: none;
}

.site-header__link:hover,
.site-header__link.is-active {
    color: var(--tt);
    background: transparent;
}

.site-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    flex: 1 1 0;
}

.site-header__phone,
.site-header__panel-call {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-header__phone img,
.site-header__panel-call img {
    display: block;
    width: auto;
    height: 1.302083vw;
}

.site-header__cta,
.site-header__panel-cta,
.site-header__panel-sub {
    display: none;
}

.site-header__toggle,
.site-header__close,
.site-header__backdrop {
    border: 0;
    padding: 0;
    appearance: none;
    cursor: pointer;
}

.site-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.604167vw;
    height: 2.604167vw;
    border-radius: 0;
    background: transparent;
}

.site-header__toggle-box {
    display: inline-flex;
    flex-direction: column;
    gap: 0.3125vw;
}

.site-header__toggle-line {
    width: 1.25vw;
    height: 1px;
    border-radius: 999px;
    background: var(--tt);
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.site-header__panel,
.site-header__backdrop {
    display: none;
}

.site-header-spacer {
    height: var(--header-offset);
}

#move_01,
#move_02,
#move_03,
#move_04,
#move_05,
#move_06,
#move_07,
#move_08,
#move_09,
#move_24,
#contact_service {
    scroll-margin-top: calc(var(--header-offset) + 1.041667vw);
}

body.is-mobile-nav-open {
    overflow: hidden;
}

@media (max-width: 600px) {

    html:has(header.is-open) {
        overflow: hidden;
    }

    :root {
        --header-offset: 18.461538vw;
    }

    .site-header {
        background: transparent;
        backdrop-filter: blur(8px);
        height: 19.487179vw;

        &.is-scrolled {
            background: rgba(247, 242, 232, 0.6);
            backdrop-filter: blur(4px);
        }
    }


    .site-header__inner {
        width: calc(100% - 8.205128vw);
        min-height: 18.461538vw;
    }

    .site-header__brand {
        margin-right: 0;
    }

    .site-header__brand-image {
        width: 8.205128vw;
    }

    .site-header__nav,
    .site-header__phone {
        display: none;
    }

    .site-header__actions {
        margin-left: auto;
    }

    .site-header__toggle {
        display: inline-flex;
        width: 10.25641vw;
        height: 10.25641vw;
    }

    .site-header__toggle-box {
        gap: 1.025641vw;
    }

    .site-header__toggle-line {
        width: 5.128205vw;
        height: 2px;
    }

    .site-header__backdrop[hidden] {
        display: none !important;
    }

    .site-header__backdrop {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: block;
        background: rgba(35, 32, 32, 0.28);
        backdrop-filter: blur(4px);
        transition: backdrop-filter 0.3s;
    }

    .site-header__panel {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10001;
        width: 72.820513vw;
        height: 100vh;
        padding: 8.051282vw 6.153846vw 8.205128vw;
        display: flex;
        flex-direction: column;
        gap: 5.128205vw;
        background: #f7f2e8;
        box-shadow: -1.041667vw 0 3.125vw rgba(35, 32, 32, 0.14);
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        border-radius: 5vw 0 0 5vw;
        transition:
            transform 0.4s,
            visibility 0s linear 0s;
    }

    /* 닫힌 상태 — 오른쪽 바깥으로 숨김, 열릴 때 왼쪽으로 슬라이드 */
    .site-header__panel[hidden] {
        display: flex !important;
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        transition:
            transform 0.4s,
            visibility 0s linear 0.4s;
    }

    .site-header__panel-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 3.076923vw;
    }

    .site-header__panel-kicker {
        margin: 0 0 1.282051vw;
        color: rgba(35, 32, 32, 0.5);
        font-family: var(--ff);
        font-size: 2.307692vw;
        font-weight: 400;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .site-header__panel-title {
        display: block;
        color: var(--tt);
        font-family: var(--mf);
        font-size: 5.128205vw;
        font-weight: 700;
        letter-spacing: -0.05em;
        line-height: 1;
    }

    .site-header__close {
        width: 8.205128vw;
        height: 8.205128vw;
        border-radius: 50%;
        background: transparent;
        color: var(--tt);
        font-size: 7.179487vw;
        line-height: 1;
    }

    .site-header__panel-nav {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .site-header__panel-link {
        padding: 0 0 3.333333vw;
        color: rgba(35, 32, 32, 0.72);
        font-family: var(--mf);
        font-size: 4.102564vw;
        font-weight: 500;
        letter-spacing: -0.05em;
        line-height: 1;
        border-bottom: 1px solid rgba(35, 32, 32, 0.1);
        margin-bottom: 3.333333vw;
    }

    .site-header__panel-link:hover,
    .site-header__panel-link.is-active {
        color: var(--tt);
        background: transparent;
    }

    .site-header__panel-foot {
        margin-top: auto;
        display: flex;
        justify-content: flex-start;
    }

    .site-header__panel-call img {
        height: 4.615385vw;
    }

    .site-header.is-open .site-header__toggle-line:nth-child(1) {
        transform: translateY(1.538462vw) rotate(45deg);
    }

    .site-header.is-open .site-header__toggle-line:nth-child(2) {
        opacity: 0;
    }

    .site-header.is-open .site-header__toggle-line:nth-child(3) {
        transform: translateY(-1.538462vw) rotate(-45deg);
    }
}

@media (max-width: 600px) {
    .site-header__inner {
        width: calc(100% - 8.205128vw);
        min-height: 19.487179vw;
    }

    .site-header__brand-image {
        width: 38vw;
    }

    .site-header__panel {
        width: 78.461538vw;
        box-sizing: border-box;
    }

    .site-header__panel-link {
        font-size: 4.615385vw;
    }
}

.banner {
    position: fixed;
    z-index: 1899;
    right: 6rem;
    top: 50%;
    transform: translateY(-50%);

    .menu__item {
        filter: drop-shadow(0 0 4px rgba(0, 0, 0, .15));
    }
}

@media (width < 600px) {
    .banner {
        right: 1rem;
        top: auto;
        bottom: 19%;
        transform: translateY(0%);
    }
}