@charset "utf-8";


/*head.sub.php로 셋팅하는 값 = full-h, full-w*/
:root {
    --primary: #ed6d1f;
    --seconday: #666;
    --ca-color: #333;
    --header-dark: #0a0a0a;
    --dark:#080a12;
    --full-h: calc(var(--vh, 1vh) * 100);
    --full-w: calc(var(--vw, 1vw) * 100);
    --header-h: 80px;
    --lnb-h: 48px;
    /* section */
    --pad-section: clamp(2.625rem, 0.924rem + 7.56vw, 10rem); /* 42 → 160 */
    --pad-section-sm: clamp(4rem, 3.192rem + 3.59vw, 7.5rem); /* 64 → 120 */
    --pad-section-xs: clamp(3rem, 2.538rem + 2.05vw, 5rem); /* 48 → 80 */
    /* space */
    --space-1: clamp(0.0625rem, 0.04rem + 0.1vw, 0.125rem); /* 1 → 2 */
    --space-2: clamp(0.125rem, 0.08rem + 0.2vw, 0.25rem); /* 2 → 4 */
    --space-3: clamp(0.1875rem, 0.119rem + 0.3vw, 0.375rem); /* 3 → 6 */
    --space-4: clamp(0.25rem, 0.159rem + 0.4vw, 0.5rem); /* 4 → 8 */
    --space-5: clamp(0.3125rem, 0.199rem + 0.5vw, 0.625rem); /* 5 → 10 */
    --space-6: clamp(0.375rem, 0.239rem + 0.6vw, 0.75rem); /* 6 → 12 */
    --space-7: clamp(0.4375rem, 0.278rem + 0.71vw, 0.875rem); /* 7 → 14 */
    --space-8: clamp(0.5rem, 0.318rem + 0.81vw, 1rem); /* 8 → 16 */
    --space-9: clamp(0.5625rem, 0.358rem + 0.91vw, 1.125rem); /* 9 → 18 */
    --space-10: clamp(0.4375rem, 0.383rem + 0.24vw, 0.625rem); /* 7 → 10 */
    --space-12: clamp(0.5rem, 0.409rem + 0.4vw, 0.75rem); /* 8 → 12 */
    --space-14: clamp(0.5625rem, 0.449rem + 0.51vw, 0.875rem); /* 9 → 14 */
    --space-16: clamp(0.75rem, 0.568rem + 0.81vw, 1rem); /* 12 → 16 */
    --space-18: clamp(0.875rem, 0.693rem + 0.81vw, 1.125rem); /* 14 → 18 */
    --space-20: clamp(1rem, 0.818rem + 0.81vw, 1.25rem); /* 16 → 20 */
    --space-24: clamp(1.25rem, 1.068rem + 0.81vw, 1.5rem); /* 20 → 24 */
    --space-28: clamp(1.125rem, 0.67rem + 2.03vw, 1.75rem); /* 18 → 28 */
    --space-32: clamp(1.25rem, 0.705rem + 2.42vw, 2rem); /* 20 → 32 */
    --space-36: clamp(1.5rem, 0.955rem + 2.42vw, 2.25rem); /* 24 → 36 */
    --space-40: clamp(1.625rem, 0.897rem + 3.24vw, 2.5rem); /* 26 → 40 */
    --space-48: clamp(2rem, 1.273rem + 3.24vw, 3rem); /* 32 → 48 */
    --space-56: clamp(2.25rem, 1.341rem + 4.05vw, 3.5rem); /* 36 → 56 */
    --space-64: clamp(2.5rem, 1.409rem + 4.86vw, 4rem); /* 40 → 64 */
}

.en {
    font-family: "Montserrat", sans-serif !important;
}

.inter{
   font-family: "Inter", sans-serif !important;

}

/* container 커스텀 */
.container {
    max-width: 1920px !important;
    width: 100%;
    margin: 0 auto;
    padding-left: clamp(1rem, calc(63 / 1920 * 100vw), 63px);
    padding-right: clamp(1rem, calc(63 / 1920 * 100vw), 63px);
}



/* 스크롤바 커스텀 */
::-webkit-scrollbar {
    display: block;
    width: 5px;
    background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #0a0a0a;
}
::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .2);
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 0% 33%, rgba(0, 0, 0, 0) 33% 66%, rgba(0, 0, 0, 0) 66% 100%);
}

/* 서브 헤더 (Figma 8350:2914) */
.header {
    --header-design-w: 1920;
    --header-design-h: 80;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    height: var(--header-h);
    background-color: transparent;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.header__scale {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--header-h);
}

.header__logo,
.header-nav__link {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #000000;
    white-space: nowrap;
}

.header__logo {
    flex-shrink: 0;
    font-weight: 700;
    font-size: clamp(20px, calc(32 / 1920 * 100vw), 32px);
    line-height: 1.193359375;
    letter-spacing: 0;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.header-nav__link {
    font-weight: 700;
    font-size: clamp(14px, calc(20 / 1920 * 100vw), 20px);
    line-height: 1.193359375;
    letter-spacing: -0.02em;
    border-radius: 9999px;
    padding: 0.35em 0.85em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header-nav__link:hover {
    background-color: #ffffff;
}

.menu-toggle {
    display: none;
}

.mobile-menu {
    visibility: hidden;
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow-y: auto;
    padding: var(--header-h) clamp(1rem, calc(63 / 1920 * 100vw), 63px) 40px;
    background: var(--header-dark);
    color: #ffffff;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.45s ease;
}

.mobile-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-menu__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.mobile-menu__link {
    display: block;
    padding: 18px 0;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
}

body.menu-open {
    overflow: hidden;
}

body.menu-open .mobile-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

body.menu-open .menu-toggle span {
    background: #ffffff;
}

body.menu-open .menu-toggle span:nth-child(1) {
    top: 8px;
    transform: translateX(-50%) rotate(45deg);
}

body.menu-open .menu-toggle span:nth-child(2) {
    top: 8px;
    transform: translateX(-50%) rotate(-45deg);
}

@media screen and (max-width: 1023px) {
    .header-nav {
        display: none;
    }

    .header__logo {
        position: absolute;
        left: clamp(1rem, calc(63 / 1920 * 100vw), 63px);
        top: 50%;
        transform: translateY(-50%);
    }

    .menu-toggle {
        display: block;
        position: absolute;
        top: 50%;
        right: clamp(1rem, calc(63 / 1920 * 100vw), 63px);
        z-index: 201;
        width: 32px;
        height: 32px;
        border: 0;
        background: transparent;
        cursor: pointer;
        transform: translateY(-50%);
    }

    .menu-toggle span {
        position: absolute;
        left: 50%;
        width: 24px;
        height: 2px;
        background: #000000;
        transform: translateX(-50%);
        transition: all 0.35s ease;
    }

    .menu-toggle span:nth-child(1) {
        top: 8px;
    }

    .menu-toggle span:nth-child(2) {
        top: 16px;
    }
}

/* 메인페이지 */
body:has(.home-desktop) #footer {
    display: none;
}

.home-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 200;
    height: var(--header-h);
    background: transparent;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.home-header__inner {
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
}

.home-header__instagram {
    display: block;
    width: 35.52px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

.home-header__instagram img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
}

@media screen and (min-width: 1920px) {
    .home-header__instagram {
        margin-top: 13.37890625px;
        width: 35.52px;
    }
}

@media screen and (max-width: 1919px) {
    .home-header__instagram {
        margin-top: calc(13.37890625 / 1920 * 100vw);
        width: clamp(24px, calc(35.52 / 1920 * 100vw), 35.52px);
    }
}

/* 홈 데스크톱: 1920×1200 고정 스테이지 + 단일 scale (992px+) */
html:has(.home-desktop),
body:has(.home-desktop) {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-width: 100vw;
}

body:has(.home-desktop) .site-wrap {
    overflow: hidden;
    max-width: 100vw;
}

.home-desktop {
    --home-design-w: 1920;
    --home-design-h: 1200;
    --home-fit-scale: min(
        calc(100vw / 1920),
        calc(var(--full-h, 100dvh) / 1200)
    );
    --home-scale: clamp(0.7, var(--home-fit-scale), 1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    height: var(--full-h, 100dvh);
    min-height: var(--full-h, 100dvh);
    overflow: hidden;
    font-family: "Pretendard", sans-serif;
    background: url("../img/contact_bg.png") center center / cover no-repeat;
}

.home-desktop__stage {
    position: relative;
    width: 1920px;
    height: 1200px;
    flex: 0 0 1920px;
}

@media screen and (min-width: 992px) and (max-width: 1919px) {
    .home-desktop__stage {
        transform: scale(var(--home-scale));
        transform-origin: center center;
    }
}

.home-desktop__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
   
}

.home-desktop__item,
.home-desktop__folder,
.home-desktop__text,
.home-desktop__title,
.home-desktop__subtitle {
    position: absolute;
    margin: 0;
    padding: 0;
}

.home-desktop__item {
    display: block;
    color: inherit;
    text-decoration: none;
    outline: none;
}

.home-desktop__item:focus-visible {
    outline: 2px solid #000;
    outline-offset: 4px;
}

.home-desktop__folder {
    display: block;
    left: 0;
    top: 0;
}

.home-desktop__folder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.home-desktop__text {
    font-weight: 400;
    font-size: 21px;
    line-height: 25.060546875px;
    letter-spacing: 0;
    color: #000000;
    white-space: nowrap;
}

/* ABOUT — 원본 좌표 유지 (폴더 기준 오프셋) */
.home-desktop__item--about {
    left: 413.33392333984375px;
    top: 340.01318359375px;
    width: 134.4666748046875px;
    height: 133.04736328125px;
}

.home-desktop__item--about .home-desktop__folder {
    width: 134.4666748046875px;
    height: 104.9466781616211px;
}

.home-desktop__item--about .home-desktop__text {
    left: -0.33392333984375px;
    top: 107.98681640625px;
}

/* WORK */
.home-desktop__item--work {
    left: 1372.2008056640625px;
    top: 506.5731201171875px;
    width: 134.4666290283203px;
    height: 132.48760986328125px;
}

.home-desktop__item--work .home-desktop__folder {
    width: 134.4666290283203px;
    height: 104.94669342041016px;
}

.home-desktop__item--work .home-desktop__text {
    left: -0.2008056640625px;
    top: 107.4268798828125px;
}

/* CONTACT */
.home-desktop__item--contact {
    left: 733px;
    top: 826.003321px;
    width: 134.4666748046875px;
    height: 133.057225875px;
}

.home-desktop__item--contact .home-desktop__folder {
    width: 134.4666748046875px;
    height: 104.9466781616211px;
}

.home-desktop__item--contact .home-desktop__text {
    left: 0;
    top: 107.996679px;
    color: #0d0d0d;
}

.home-desktop__title {
    left: 816px;
    top: 591px;
    width: 288px;
    font-weight: 700;
    font-size: 36px;
    line-height: 42.9609375px;
    letter-spacing: 0;
    color: #000000;
    white-space: nowrap;
}

.home-desktop__subtitle {
    left: 843px;
    top: 647px;
    width: 234px;
    font-weight: 400;
    font-size: 21px;
    line-height: 25.060546875px;
    letter-spacing: 0;
    color: #000000;
    white-space: nowrap;
}

/* ===== 모바일 ≤991px: scale 없이 viewport 좌표계 =====
   원본 비율 (1920×1200):
   ABOUT   L 21.5278% T 28.3344%
   WORK    L 71.4688% T 42.2144%
   CONTACT L 38.1771% T 68.8336%
   TITLE   L 42.5%    T 49.25%
   SUB     L 43.9063% T 53.9167%
*/
@media screen and (max-width: 991px) {
        :root {
       --header-h: 60px;
    }
    .header{
        --header-design-h: 60;
    }
    .home-desktop {
        --home-scale: 1;
        --home-folder-w: clamp(67.23px, calc(134.4667 / 1920 * 100vw), 94.13px);
        --home-folder-gap: clamp(0.25rem, 1.2vw, 0.5rem);
        --home-text-size: clamp(12px, calc(100vw * 21 / 390), 16px);
        align-items: stretch;
        justify-content: stretch;
    }

    .home-desktop__stage {
        width: 100%;
        height: 100%;
        flex: none;
        transform: none;
        overflow: hidden;
    }

    .home-desktop__item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: auto;
        height: auto;
        z-index: 2;
    }

    .home-desktop__item .home-desktop__folder,
    .home-desktop__item .home-desktop__text {
        position: static;
        left: auto;
        top: auto;
        transform: none;
    }

    .home-desktop__item .home-desktop__folder {
        width: var(--home-folder-w);
        height: auto;
        aspect-ratio: 134.4667 / 104.9467;
        flex-shrink: 0;
    }

    /* 기본 .home-desktop__text { font-size: 21px } 보다 높은 specificity로 덮어씀 */
    .home-desktop .home-desktop__text,
    .home-desktop__item--about .home-desktop__text,
    .home-desktop__item--work .home-desktop__text,
    .home-desktop__item--contact .home-desktop__text {
        margin-top: var(--home-folder-gap);
        font-size: clamp(12px, calc(100vw * 21 / 390), 14px);
        line-height: 1.2;
        text-align: center;
    }

    /* ABOUT: 21.5278% / 28.3344% */
    .home-desktop__item--about {
        left: clamp(3vw, 21.5278%, calc(100% - var(--home-folder-w) - 3vw));
        top: clamp(calc(var(--header-h, 60px) + 1.5%), 22.3344%, 34%);
        width: auto;
        height: auto;
    }

    .home-desktop__item--about .home-desktop__folder {
        width: var(--home-folder-w);
        height: auto;
        aspect-ratio: 134.4667 / 104.9467;
    }

    .home-desktop__item--about .home-desktop__text {
        left: auto;
        top: auto;
        position: static;
    }

    /* WORK: 71.4688% / 42.2144% — 우측, 화면 밖 방지 */
    .home-desktop__item--work {
        left: clamp(52%, 71.4688%, calc(100% - var(--home-folder-w) - 3vw));
        top: clamp(30%, 32.2144%, 48%);
        width: auto;
        height: auto;
    }

    .home-desktop__item--work .home-desktop__folder {
        width: var(--home-folder-w);
        height: auto;
        aspect-ratio: 134.4667 / 104.9467;
    }

    .home-desktop__item--work .home-desktop__text {
        left: auto;
        top: auto;
        position: static;
    }

    /* CONTACT: 38.1771% / 68.8336% — 하단 잘림 방지 */
    .home-desktop__item--contact {
        left: clamp(3vw, 38.1771%, calc(100% - var(--home-folder-w) - 3vw));
        top: min(68.8336%, calc(100% - var(--home-folder-w) * 104.9467 / 134.4667 - 3.25rem));
        width: auto;
        height: auto;
    }

    .home-desktop__item--contact .home-desktop__folder {
        width: var(--home-folder-w);
        height: auto;
        aspect-ratio: 134.4667 / 104.9467;
    }

    .home-desktop__item--contact .home-desktop__text {
        left: auto;
        top: auto;
        position: static;
        color: #0d0d0d;
    }

    /* 중앙 타이틀 — 폴더와 겹치지 않도록 중앙 고정 */
    .home-desktop__title {
        left: 50%;
        top: clamp(44%, 49.25%, 52%);
        width: auto;
        max-width: min(90vw, 18rem);
        font-size: clamp(18px, calc(36 / 390 * 100vw), 28px);
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    .home-desktop__subtitle {
        left: 50%;
        top: calc(clamp(44%, 49.25%, 52%) + clamp(1.35rem, 4.5vw, 1.9rem));
        width: auto;
        max-width: min(92vw, 16rem);
        font-size: clamp(12px, calc(21 / 390 * 100vw), 15px);
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        transform: translateX(-50%);
        z-index: 1;
    }
}

/* 짧은 세로(가로모드 등): CONTACT·타이틀 간격 추가 보정 */
@media screen and (max-width: 991px) and (max-height: 500px) {
    
    .home-desktop__item--about {
        top: clamp(calc(var(--header-h, 80px) * 0.35), 10%, 18%);
    }

    .home-desktop__item--work {
        top: clamp(18%, 28%, 36%);
    }

    .home-desktop__item--contact {
        top: min(58%, calc(100% - 5.5rem));
    }

    .home-desktop__title {
        top: 46%;
        font-size: clamp(16px, 4.5vw, 22px);
    }

    .home-desktop__subtitle {
        top: calc(46% + 1.25rem);
        font-size: clamp(11px, 3vw, 13px);
    }
}

/* About 페이지 (Figma 8355:2930)
   ≥992: 1920×4795 고정 스테이지 + scale (min 0.5)
   ≤991: scale 없음, % 좌표계로 동일 비율 + 폰트/원 clamp(min 0.5) */
.about-page {
    --about-design-w: 1920;
    --about-design-h: 4795;
    --about-fit-scale: calc(100vw / 1920);
    --about-scale: clamp(0.5, var(--about-fit-scale), 1);
    width: 100%;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: visible;
    background-color: #e6e6e6;
}

.about-page__stage {
    position: relative;
    width: 1920px;
    height: 4795px;
    flex: 0 0 1920px;
    overflow: visible;
    transform: scale(var(--about-scale));
    transform-origin: top center;
    margin-bottom: calc(4795px * (var(--about-scale) - 1));
    font-family: "Pretendard", sans-serif;
}

.about-page__bg {
    position: absolute;
    inset: 0;
    background: url("../img/about/about_bg.png") center / cover no-repeat;
    pointer-events: none;
}

.about-page__img,
.about-page__clip,
.about-page__block {
    position: absolute;
    margin: 0;
    padding: 0;
}

.about-page__img {
    display: block;
    max-width: none;
}

.about-page__img--sphere {
    left: -605.99px;
    top: -599.01px;
    width: 1956px;
    height: 1852px;
}

.about-page__img--1 {
    left: 1144.67px;
    top: 941px;
    width: 824px;
    height: 824px;
}

.about-page__img--2 {
    left: 446px;
    top: 3705px;
    width: 1029.33px;
    height: 1028px;
}

.about-page__clip {
    overflow: hidden;
}

.about-page__clip--left {
    left: 0.47px;
    top: 1688.69px;
    width: 716.2px;
    height: 1432.39px;
}

.about-page__clip--right {
    left: 1211.41px;
    top: 2316.8px;
    width: 709.05px;
    height: 1432.39px;
}

.about-page__clip-img {
    position: absolute;
    display: block;
    max-width: none;
}

.about-page__clip--left .about-page__clip-img {
    left: -765.13px;
    top: -49.03px;
    width: 1529.33px;
    height: 1530.67px;
}

.about-page__clip--right .about-page__clip-img {
    left: -65.41px;
    top: -49.13px;
    width: 1529.33px;
    height: 1530.67px;
}

/* 텍스트 덩어리: 그룹만 absolute, 내부 줄은 flow */
.about-page__block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about-page__block--intro {
    left: 80.2px;
    top: 576.75px;
}

.about-page__block--right {
    left: 1130.47px;
    top: 1360.56px;
    width: 717px;
    align-items: flex-end;
    text-align: right;
}

.about-page__block--mid {
    left: 80.47px;
    top: 2169.04px;
}

.about-page__block--bottom {
    left: 1223.47px;
    top: 3002.89px;
    width: 624px;
    align-items: flex-end;
    text-align: right;
}

.about-page__block--brand {
    left: 810.47px;
    top: 4170.52px;
    width: 299px;
    align-items: center;
    text-align: center;
}

.about-page__text {
    margin: 0;
    padding: 0;
    font-size: 28px;
    line-height: 42.67px;
    letter-spacing: 0;
    color: #232323;
    white-space: nowrap;
    font-weight: 400;
}

.about-page__text--title {
    font-weight: 700;
    line-height: 33.414px;
    margin-bottom: 26.156px;
}

.about-page__text--strong {
    font-weight: 700;
}

.about-page__brand {
    margin: 0;
    padding: 0;
    font-weight: 700;
    font-size: 37.333335876464844px;
    line-height: 44.552085876464844px;
    letter-spacing: 0;
    color: #f2f2f2;
    white-space: nowrap;
}

.about-page__brand-sub {
    margin: 11.4px 0 0;
    padding: 0;
    font-weight: 400;
    font-size: 21.33333396911621px;
    line-height: 25.45833396911621px;
    letter-spacing: 0;
    color: #f2f2f2;
    white-space: nowrap;
}

/* ===== About ≤991: scale 해제, 1920×4795 비율 % 좌표계 ===== */
@media screen and (max-width: 991px) {
    .about-page {
        --about-scale: 1;
        --about-text: clamp(15.4px, calc(28 / 1920 * 100vw), 28px);
        --about-brand: clamp(20.67px, calc(37.333 / 1920 * 100vw), 37.333px);
        --about-brand-sub: clamp(12px, calc(21.333 / 1920 * 100vw), 21.333px);
    }

    .about-page__stage {
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / calc(4795 * 2);
        flex: none;
        transform: none;
        margin-bottom: 0;
    }

    .about-page__img--sphere {
        left: calc(-605.99 / 1920 * 100%);
        top: calc(-599.01 / calc(4795 * 2) * 100%);
        width: calc(1956 / 1920 * 100%);
        height: auto;
        aspect-ratio: 1956 / 1852;
    }

    .about-page__img--1 {
        left: calc(1144.67 / 1920 * 100%);
        top: calc(941 / 4795 * 100%);
        width: calc(824 / 1920 * 100%);
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .about-page__img--2 {
        left: calc(446 / 1920 * 100%);
        top: calc(3705 / 4795 * 100%);
        width: calc(1029.33 / 1920 * 100%);
        height: auto;
        aspect-ratio: 1029.33 / 1028;
    }

    .about-page__clip--left {
        left: calc(0.47 / 1920 * 100%);
        top: calc(1688.69 / 4795 * 100%);
        width: calc(716.2 / 1920 * 100%);
        height: calc(1432.39 / 4795 * 100%);
    }

    .about-page__clip--right {
        left: calc(1211.41 / 1920 * 100%);
        top: calc(2316.8 / 4795 * 100%);
        width: calc(709.05 / 1920 * 100%);
        height: calc(1432.39 / 4795 * 100%);
    }

    .about-page__clip--left .about-page__clip-img {
        left: calc(-765.13 / 716.2 * 100%);
        top: calc(-49.03 / 1432.39 * 100%);
        width: calc(1529.33 / 716.2 * 100%);
        height: calc(1530.67 / 1432.39 * 100%);
    }

    .about-page__clip--right .about-page__clip-img {
        left: calc(-65.41 / 709.05 * 100%);
        top: calc(-49.13 / 1432.39 * 100%);
        width: calc(1529.33 / 709.05 * 100%);
        height: calc(1530.67 / 1432.39 * 100%);
    }

    .about-page__block--intro {
        left: calc(80.2 / 1920 * 100%);
        top: calc(576.75 / calc(4795 * 2) * 100%);
        width: calc(100% - (80.2 / 1920 * 100%) - 4%);
        max-width: 92%;
    }

    .about-page__block--right {
        left: auto;
        right: calc((1920 - 1130.47 - 717) / 1920 * 100%);
        top: calc(1360.56 / 5680 * 100%);
        width: auto;
    }

    .about-page__block--mid {
        left: calc(80.47 / 1920 * 100%);
        top: calc(2169.04 / 4795 * 100%);
        width: calc(100% - (80.47 / 1920 * 100%) - 4%);
        max-width: 92%;
    }

    .about-page__block--bottom {
        left: auto;
        right: calc((1920 - 1223.47 - 624) / 1920 * 100%);
        top: calc(3002.89 / 4795 * 100%);
        width: auto;
    }

    .about-page__block--brand {
        left: 50%;
        top: calc(4170.52 / 5100 * 100%);
        width: auto;
        max-width: 90%;
        transform: translateX(-50%);
    }

    .about-page__text {
        font-size: var(--about-text);
        line-height: 1.524;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .about-page__text--title {
        line-height: 1.193;
        margin-bottom: 0.55em;
    }

    .about-page__brand {
        font-size: var(--about-brand);
        line-height: 1.193;
    }

    .about-page__brand-sub {
        margin-top: 0.35em;
        font-size: var(--about-brand-sub);
        line-height: 1.193;
    }
}


#contact {
        --line-color:#040000;
--pl: clamp(32px, 3.28125vw, 63px);
    --border-px:0.67px;
    --border-color:#999999;
    padding-top: var(--header-h);
    
    background-color: transparent;
    background-image: var(--contact-bg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    color: #000;
    box-sizing: border-box;
}
@media screen and (max-width: 991px) {
    #contact {
       --pl: 16px;
    }
}
#contact .contact-title-wrap,
#contact .contact-toggle-wrap{
       border-bottom: var(--border-px) solid var(--line-color);

}
#contact .contact-title {
     
    border-left: var(--border-px) solid var(--line-color);
     margin-left: clamp(1rem, calc(63 / 1920 * 100vw), 63px);
      padding: clamp(1.25rem, calc(24 / 1920 * 100vw), 24px) 0 clamp(2rem, calc(67 / 1920 * 100vw), 67px);    
    font-size: clamp(1.75rem, calc(80 / 1920 * 100vw), 80px);
    font-weight: 700;
    line-height: 1.193;
    color: #252525;
    word-break: keep-all;
   
}
#contact .contact-title>p{
    margin-left: var(--pl);
}
.contact-inquiry {
    width: 100%;
}

.contact-toggle {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.75rem, calc(28 / 1920 * 100vw), 28px);
    border: 0;
    background: transparent;
    color: #000;
    cursor: pointer;
    text-align: left;
    border-left: var(--border-px) solid var(--line-color);
    margin-left: clamp(1rem, calc(63 / 1920 * 100vw), 63px);
    font: inherit;
    padding: clamp(1.25rem, calc(24 / 1920 * 100vw), 24px) 0;
    padding-left: var(--pl);
}

.contact-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    font-size: clamp(1.25rem, calc(28 / 1920 * 100vw), 28px);
    line-height: 1;
    transform: rotate(0deg);
    transform-origin: center center;
    transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

.contact-toggle[aria-expanded="true"] .contact-toggle__icon {
    transform: rotate(45deg);
}

.contact-toggle span {
    font-size: clamp(1.25rem, calc(38 / 1920 * 100vw), 38px);
    font-weight: 700;
    line-height: 1.193;
}

.contact-process {
    display: none;
    border-bottom: var(--border-px) solid var(--line-color);
  
}

.contact-process__heading {
    border-left: var(--border-px) solid var(--line-color);
    padding-left: calc(var(--pl) *2);
    padding-bottom:0;
    font-size: clamp(1.125rem, calc(28 / 1920 * 100vw), 28px);
    font-weight: 700;
    line-height: 1.193;
    color: #000;

}
@media screen and (min-width: 991px) {
    .contact-process__heading {
        padding-bottom: clamp(1.25rem, calc(24 / 1920 * 100vw), 24px);
    }
}
.contact-process__list {
    border-left: var(--border-px) solid var(--line-color);
    padding-left: calc(var(--pl) *2);
    list-style: none;
   
}

.contact-process__item {
    display: flex;
    align-items: flex-start;
    gap: clamp(1.5rem, calc(76 / 1920 * 100vw), 76px);
    padding: clamp(1.25rem, calc(28 / 1920 * 100vw), 28px) 0;
    border-bottom: 1px solid var(--border-color);
}

.contact-process__head {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.75rem, calc(19 / 1920 * 100vw), 19px);
    flex: 0 0 clamp(200px, calc(416 / 1920 * 100vw), 416px);
    width: clamp(200px, calc(416 / 1920 * 100vw), 416px);
    box-sizing: border-box;
}

.contact-process__num {
    flex-shrink: 0;
    font-size: clamp(1.5rem, calc(42 / 1920 * 100vw), 42px);
    font-weight: 700;
    line-height: 1;
    color: #000;
}

.contact-process__name {
    margin: 0;
    font-size: clamp(1.125rem, calc(28 / 1920 * 100vw), 28px);
    font-weight: 400;
    line-height: 1.3;
    color: #000;
    word-break: keep-all;
}

.contact-process__body {
    flex: 1;
    min-width: 0;
    font-size: clamp(0.875rem, calc(18 / 1920 * 100vw), 18px);
    font-weight: 400;
    line-height: 1.4;
    color: #000;
    word-break: keep-all;
}

.contact-process__cta {
    display: flex;
   
    align-items: center;
    gap: clamp(1rem, calc(24 / 1920 * 100vw), 24px);
    border-left: var(--border-px) solid var(--line-color);
    padding: clamp(1.5rem, calc(40 / 1920 * 100vw), 40px) 0 clamp(1.5rem, calc(40 / 1920 * 100vw), 40px)  calc(var(--pl) * 2);
   
}

.contact-process__cta-text {
    margin: 0;
    flex: 0 1 auto;
    max-width: clamp(18rem, calc(883 / 1920 * 100vw), 883px);
    font-size: clamp(0.9375rem, calc(24 / 1920 * 100vw), 24px);
    font-weight: 700;
    line-height: 1.193;
    color: #252525;
    word-break: keep-all;
}

/* Figma 8380:165 — CTA 텍스트와 버튼 사이 점선 */
.contact-process__cta-line {
    flex: 1 1 clamp(4rem, calc(441 / 1920 * 100vw), 441px);
    min-width: 2.5rem;
    height: 1px;
    align-self: center;
    background-image: linear-gradient(to right, #000 0 4px, transparent 4px 8px);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    background-position: center;
}

.contact-process__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.875rem, calc(20 / 1920 * 100vw), 20px) clamp(1.5rem, calc(40 / 1920 * 100vw), 40px);
    background: #000;
    color: #f2f2f2;
    font-size: clamp(0.9375rem, calc(24 / 1920 * 100vw), 24px);
    font-weight: 700;
    line-height: 1.193;
    text-decoration: none;
    border-radius: 9999px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.contact-process__btn:hover {
    background: #252525;
    color: #fff;
}


.contact-info {
    display: flex;
    justify-content: flex-end;
    border-bottom: var(--border-px) solid var(--line-color);

}

.contact-info__card {
    --contact-row-h: clamp(48px, calc(60 / 1920 * 100vw), 60px);
    --contact-row-pad-x: clamp(1rem, calc(45 / 1920 * 100vw), 45px);
    --contact-line: #252525;
    border-left: var(--border-px) solid var(--line-color);
    margin: 0;
    width: 100%;
    max-width: clamp(280px, calc(621 / 1920 * 100vw), 621px);
    font-style: normal;
  border: 1px solid var(--line-color);
    box-sizing: border-box;
    overflow: hidden;
}
.contact-info-wrap {
    display: flex;
    justify-content: flex-end;
    border-left: var(--border-px) solid var(--line-color);
    padding:clamp(2.5rem, calc(80 / 1920 * 100vw), 80px) 0 clamp(2.5rem, calc(80 / 1920 * 100vw), 80px) calc(var(--pl) *2);
}
.contact-info__title {
    margin: 0;
   
       color: #f2f2f2;
    display: flex;
    align-items: center;
    min-height: var(--contact-row-h);
    padding: 0 var(--contact-row-pad-x);
    font-size: clamp(1.25rem, calc(32 / 1920 * 100vw), 32px);
    font-weight: 700;
    line-height: 1.193;
  
       background: #252525;
    border-bottom: 1px solid var(--contact-line);
}

.contact-info__line {
    margin: 0;
    display: flex;
    align-items: center;
    min-height: var(--contact-row-h);
    padding: 0 var(--contact-row-pad-x);
    font-size: clamp(0.875rem, calc(24 / 1920 * 100vw), 24px);
    font-weight: 400;
    line-height: 1.193;

    border-bottom: 1px solid var(--contact-line);
    word-break: break-all;
}

.contact-info__line--last {
    border-bottom: 0;
}

.contact-info__line a {
    color: inherit;
    text-decoration: none;
}

.contact-info__line a:hover {
    text-decoration: underline;
}

.contact-invisible {
    border-left: var(--border-px) solid var(--line-color);
  padding: clamp(20px, calc(40 / 1920 * 100vw), 40px) 0;
}

@media screen and (max-width: 990px) {
    .contact-process__item {
        flex-direction: column;
        gap: 0;
        padding: clamp(1rem, 3vw, 1.5rem) 0;
    }

    .contact-process__head {
        flex: none;
        width: 100%;
        padding-bottom: clamp(0.75rem, 2vw, 1rem);
    }

    .contact-process__body {
        width: 100%;
        padding-top: clamp(0.75rem, 2vw, 1rem);
        border-top: 1px solid #000;
    }

    .contact-process__cta {
        flex-wrap: wrap;
    }

    .contact-process__cta-text {
        max-width: none;
        flex: 1 1 100%;
    }

    .contact-process__cta-line {
        flex: 1 1 auto;
        min-width: 3rem;
    }

    .contact-info {
        justify-content: stretch;
    }

    .contact-info__card {
        max-width: none;
    }
}

#footer .header__logo{
   color: #f2f2f2;
}
@media screen and (max-width: 1023px) {
    #footer .header__logo {
       position:relative;
       left: auto;
       top: auto;
       transform: none;
    }
}