:root {
    --black00100C: #00100c;
    --black0F0F0F: #0f0f0f;
    --black222222: #222222;
    --black444444: #444444;
    --black666666: #666666;
    --black797979: #797979;
    --black373737: #373737;
    --black383838: #383838;
    --black646464: #646464;
    --black424242: #424242;
    --blackC1C1C1: #c1c1c1;
    --black5B5B5B: #5b5b5b;

    --green005740: #005740;
    --green30403D: #30403d;
    --green4A5855: #4a5855;
    --green318775: #318775;
    --green4F9786: #4f9786;
    --greenA5C9BF: #a5c9bf;
    --greenCEE2DD: #cee2dd;
    --green5C8B7E: #5c8b7e;
    --greenC7D8D4: #c7d8d4;
    --greenABB9A9: #abb9a9;

    --whiteFFFFFF: #ffffff;
    --whiteF4F8F6: #f4f8f6;
    --whiteCACFCE: #cacfce;

    --gray999999: #999999;
    --grayDBDBDB: #dbdbdb;
    --gray888888: #888888;
    --grayAAAAAA: #aaaaaa;
    --gray757575: #757575;
    --grayAEAEAE: #aeaeae;
    --gray5B5B5B: #5b5b5b;
    --grayDBDBDB: #dbdbdb;
    --grayADB2B1: #adb2b1;
    --whiteF3F3F3: #f3f3f3;
    --whiteF3F7F5: #f3f7f5;
    --whiteF2F6F5: #f2f6f5;
    --green00231A: #00231a;

    --blueEEF5FA: #eef5fa;
    --blue3B8BC5: #3b8bc5;
    --blue1B4B6E: #1b4b6e;

    --error: #ba1a1a;
    --layout-max: 192rem;
    --layout-pad: 4rem;
    --header-height: 10.9rem;
}

.fade-in {
    opacity: 0;
    transform: translateY(3rem);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: var(--header-height);
    transition: transform 0.35s ease;
    will-change: transform;
}
.header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--whiteFFFFFF);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

/* 스크롤이 맨 위에서 벗어나면 배경 표시 */
.header.header--scrolled::before {
    opacity: 1;
}

/* 모바일 메뉴가 열려 있을 때는 흰 배경을 숨김 (초록 배경 유지) */
.header.is-menu-open::before {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .header::before {
        transition: none;
    }
}

.header.header--hidden {
    transform: translateY(-100%);
}

.header .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--layout-pad);
    z-index: 1;
}

.header .gnb,
.header .gnb .menu_group {
    display: flex;
    align-items: center;
    gap: 4.8rem;
}

.header .gnb .menu a {
    display: block;
    font-family: "Poppins";
    font-size: 1.6rem;
    line-height: 1.6rem;
    font-weight: 400;
    color: var(--gray999999);
}

.header .gnb .menu a:hover {
    font-weight: 500;
    color: var(--green005740);
}

.header .gnb .strong {
    font-weight: 500 !important;
    color: var(--green005740) !important;
}

.header .logo {
    flex-shrink: 0;
}
.header .logo a {
    display: block;
    width: 12.5rem;
    height: 4.5rem;
}
.header .logo a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer {
    width: 100%;
    background-color: var(--black00100C);
    color: var(--whiteFFFFFF);
}

.footer .inner {
    max-width: 137rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8rem 4rem 8.3rem;
    gap: 8vw;
}
.footer .footer_company {
    display: flex;
    flex-direction: column;
    gap: 4.1rem;
}

.footer .footer_logo {
    flex-shrink: 0;
    width: 13.6rem;
    height: 5rem;
}

.footer .sns {
    display: flex;
    align-items: center;
    gap: 2.1rem;
    padding-top: 6.5rem;
}
.footer .sns a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.5rem;
    height: 6.5rem;
}

.footer .sns a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer .footer_info {
    color: var(--whiteCACFCE);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 100%;
}

.footer .footer_info .company {
    display: flex;
    gap: 1.3rem;
}

.footer .footer_info .company:nth-child(1) {
    margin-bottom: 2.2rem;
}
.footer .footer_info .company .name {
    font-size: 1.6rem;
    font-weight: 700;
    margin-right: 1.3rem;
}

.footer .footer_info .address {
    margin-top: 4.4rem;
}
.footer .footer_info .address dl {
    display: flex;
    gap: 1.3rem;
    margin-bottom: 1.3rem;
}
.footer .footer_info .address dl:last-child {
    margin-bottom: 0;
}
.footer .footer_info .address dt {
    flex-shrink: 0;
    width: 18.4rem;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.4;
}
.footer .footer_info .address dd {
    line-height: 1.4;
}

.footer .copyright {
    border-top: 0.1rem solid var(--green30403D);
    padding: 2.6rem 0 3.2rem;
    text-align: center;
    font-size: 1.4rem;
    color: var(--green4A5855);
    line-height: 2rem;
    font-family: "Poppins";
}

@media (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.menu_toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0.9rem;
    width: 4rem;
    height: 4rem;
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

.menu_toggle .bar {
    display: block;
    width: 1.9rem;
    height: 0.2rem;
    background-color: var(--black222222);
    border-radius: 0.1rem;
    transition: background-color 0.3s ease;
}

.mobile_nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;

    z-index: -1;
    background-color: var(--green005740);

    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.mobile_menu {
    display: flex;
    flex-direction: column;
    gap: 3.4rem;
    padding: 11.7rem 2.6rem 0;
}

.mobile_menu a {
    display: block;
    font-family: "Poppins";
    font-size: 2rem;
    font-weight: 500;
    color: var(--whiteFFFFFF);

    opacity: 0;
    transform: translateY(1.6rem);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.header.is-menu-open .mobile_nav {
    opacity: 1;
    visibility: visible;
}

.header.is-menu-open .mobile_menu a {
    opacity: 1;
    transform: translateY(0);
}
.header.is-menu-open .mobile_menu li:nth-child(1) a {
    transition-delay: 0.05s;
}
.header.is-menu-open .mobile_menu li:nth-child(2) a {
    transition-delay: 0.1s;
}
.header.is-menu-open .mobile_menu li:nth-child(3) a {
    transition-delay: 0.15s;
}
.header.is-menu-open .mobile_menu li:nth-child(4) a {
    transition-delay: 0.2s;
}
.header.is-menu-open .mobile_menu li:nth-child(5) a {
    transition-delay: 0.25s;
}

.header.is-menu-open .logo img {
    filter: brightness(0) invert(1);
}

.header.is-menu-open .menu_toggle .bar {
    background-color: var(--whiteFFFFFF);
}

.header.is-menu-open.header--hidden {
    transform: none;
}

body.scroll-lock {
    overflow: hidden;
}

@media (max-width: 1200px) {
    .footer .inner {
        gap: 0vw;
        flex-direction: column;
    }
}
@media (max-width: 768px) {
    .page-eco .header .logo img {
        filter: brightness(0) invert(1);
    }
    .page-eco .header .menu_toggle .bar {
        background-color: var(--whiteFFFFFF);
    }
    .page-eco .header.header--scrolled:not(.is-menu-open) .logo img {
        filter: none;
    }
    .page-eco .header.header--scrolled:not(.is-menu-open) .menu_toggle .bar {
        background-color: var(--black222222);
    }
    :root {
        --header-height: 5.6rem;
        --layout-pad: 2rem;
    }

    .header .gnb .menu_group {
        display: none;
    }

    .header .gnb {
        justify-content: space-between;
        width: 100%;
    }

    .header .logo a {
        width: 8rem;
        height: 2.8rem;
    }

    .menu_toggle {
        display: flex;
    }

    .footer .inner {
        flex-direction: column;
        align-items: stretch;
        padding: 5.5rem 2.4rem 1.6rem;
    }

    .footer .footer_company {
        gap: 3.2rem;
    }

    .footer .footer_logo {
        width: 9rem;
        height: 3.3rem;
    }
    .footer .footer_logo img {
        width: 100%;
        height: auto;
    }

    .footer .footer_info {
        font-size: 1.3rem;
        line-height: 1.7;
    }

    .footer .footer_info .company {
        flex-direction: column;
        gap: 0.8rem;
    }
    .footer .footer_info .company .name {
        display: block;
        font-size: 1.4rem;
    }
    .footer .footer_info .company .name strong {
        font-weight: 600;
    }

    .footer .footer_info .address {
        margin-top: 4.2rem;
    }
    .footer .footer_info .address dl {
        flex-direction: column;
        gap: 0.8rem;
        margin-bottom: 2.4rem;
    }
    .footer .footer_info .address dt {
        width: auto;
    }

    .footer .sns {
        padding-top: 5.6rem;
        justify-content: space-between;
        gap: 0;
        max-width: 32rem;
    }
    .footer .sns a {
        width: 6rem;
        height: 6rem;
    }

    .footer .copyright {
        padding: 1.6rem 2.4rem 2.8rem;
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .footer .sns a {
        width: 5rem;
        height: 5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile_nav,
    .mobile_menu a {
        transition: none;
    }
}