@charset "utf-8";

:root {

    /* =========================================================
        POINT COLOR
    ========================================================= */
    --static-1: #203D31;
    --static-1-hover: #162C23;
    --static-1-rgb: 32,61,49;
    --static-2: #345C43;
    --static-3: #52715C;
    --static-4: #DCE6BF;
    --static-4-light: #E9EFDC;
    --static-5: #F4F0D7;

    /* =========================================================
        BACKGROUND
    ========================================================= */
    --bg-body: #FFFFFF;
    --bg-1: #F7F8F1;
    --bg-2: #F8FAF6;
    --bg-3: #203D31;
    --bg-4: #F1F2E8;
    --bg-dim: rgba(0,0,0,.45);

    /* =========================================================
        TEXT
    ========================================================= */
    --text-1: #252A27;
    --text-2: #4C544E;
    --text-3: #737D74;
    --text-4: #8B948B;
    --text-on-dark-1: #FFFFFF;
    --text-on-dark-2: #B8C8BD;
    --text-on-dark-3: #BBCEA8;

    --color-white: #FFFFFF;
    --color-white-rgb: 255,255,255;
    --color-black: #000000;
    --color-black-rgb: 0,0,0;

    /* =========================================================
        BORDER
    ========================================================= */
    --border-1: #EEF1EA;
    --border-2: #E2E8DF;
    --border-3: #CDD5CE;
    --border-dark: rgba(255,255,255,.14);

    /* =========================================================
        SHADOW
    ========================================================= */
    --shadow-1: 0 2px 10px rgba(0,0,0,.05);
    --shadow-2: 0 8px 24px rgba(32,61,49,.08);
    --shadow-3: 0 16px 40px rgba(32,61,49,.12);

    /* =========================================================
        RADIUS
    ========================================================= */
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-20: 20px;
    --radius-24: 24px;
    --radius-64: clamp(32px, 4.44vw, 64px);
    --radius-full: 9999px;

    /* =========================================================
        TRANSITION
    ========================================================= */
    --transition: .3s ease;

    /* =========================================================
        FONT SIZE
    ========================================================= */
    --fs-12: clamp(11px, 0.83vw, 12px);
    --fs-13: clamp(12px, 0.90vw, 13px);
    --fs-14: clamp(12px, 0.97vw, 14px);
    --fs-15: clamp(13px, 1.04vw, 15px);
    --fs-16: clamp(14px, 1.11vw, 16px);
    --fs-17: clamp(15px, 1.18vw, 17px);
    --fs-18: clamp(16px, 1.25vw, 18px);
    --fs-20: clamp(17px, 1.39vw, 20px);
    --fs-22: clamp(18px, 1.53vw, 22px);
    --fs-24: clamp(19px, 1.67vw, 24px);
    --fs-26: clamp(20px, 1.81vw, 26px);
    --fs-28: clamp(21px, 1.94vw, 28px);
    --fs-32: clamp(23px, 2.22vw, 32px);
    --fs-36: clamp(24px, 2.5vw, 36px);
    --fs-40: clamp(26px, 2.78vw, 40px);
    --fs-48: clamp(30px, 3.33vw, 48px);
    --fs-52: clamp(30px, 3.61vw, 52px);
    --fs-56: clamp(32px, 3.89vw, 56px);
    --fs-62: clamp(34px, 4.31vw, 62px);
    --fs-120: clamp(72px, 8.33vw, 120px);
    --fs-144: clamp(76px, 10vw, 144px);

    /* =========================================================
        SPACE
    ========================================================= */
    --space-4: clamp(3px, 0.28vw, 4px);
    --space-6: clamp(4px, 0.42vw, 6px);
    --space-8: clamp(6px, 0.56vw, 8px);
    --space-10: clamp(8px, 0.69vw, 10px);
    --space-12: clamp(10px, 0.83vw, 12px);
    --space-14: clamp(11px, 0.97vw, 14px);
    --space-16: clamp(12px, 1.11vw, 16px);
    --space-20: clamp(16px, 1.39vw, 20px);
    --space-24: clamp(18px, 1.67vw, 24px);
    --space-28: clamp(20px, 1.94vw, 28px);
    --space-32: clamp(24px, 2.22vw, 32px);
    --space-36: clamp(26px, 2.5vw, 36px);
    --space-40: clamp(28px, 2.78vw, 40px);
    --space-48: clamp(32px, 3.33vw, 48px);
    --space-56: clamp(36px, 3.89vw, 56px);
    --space-64: clamp(40px, 4.44vw, 64px);
    --space-72: clamp(44px, 5vw, 72px);
    --space-80: clamp(48px, 5.56vw, 80px);
    --space-100: clamp(60px, 6.94vw, 100px);
    --space-120: clamp(72px, 8.33vw, 120px);

    /* =========================================================
        LAYOUT
    ========================================================= */
    --inner-width: 1440px;
    --header-h: 0px;
}

/* =========================================================
    LAYOUT
========================================================= */
.inner{width:calc(100% - var(--space-40));max-width:var(--inner-width);margin:0 auto;}
.pd-120{padding:var(--space-120) 0;}
.pd-100{padding:var(--space-100) 0;}
.pd-80{padding:var(--space-80) 0;}
.img-wrap{overflow:hidden;background:var(--bg-2);}
.img-wrap img{width:100%;height:100%;object-fit:cover;}
.common-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-24);row-gap:var(--space-24);}

/* =========================================================
    TYPOGRAPHY
========================================================= */
.section-tit{word-break:keep-all;font-size:var(--fs-52);font-weight:700;line-height:1.35;letter-spacing:-.03em;color:var(--text-1);}
.section-tit em{display:block;color:var(--static-2);}
.card-tit{word-break:keep-all;font-size:var(--fs-26);font-weight:700;line-height:1.4;letter-spacing:-.02em;color:var(--text-1);}
.body-lg{word-break:keep-all;font-size:var(--fs-20);font-weight:400;line-height:1.75;letter-spacing:-.01em;}
.body-md{word-break:keep-all;font-size:var(--fs-18);font-weight:400;line-height:1.65;letter-spacing:-.01em;}
.body-sm{word-break:keep-all;font-size:var(--fs-15);font-weight:400;line-height:1.6;letter-spacing:-.01em;}
.eyebrow{display:block;font-size:var(--fs-14);font-weight:600;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;}
.text-note{word-break:keep-all;font-size:var(--fs-14);font-weight:400;line-height:1.6;color:var(--text-4);}

/* =========================================================
    COMMON TITLE
========================================================= */
.common-tit{display:flex;flex-direction:column;row-gap:var(--space-20);margin-bottom:var(--space-64);}
.common-tit .eyebrow{color:var(--static-3);}
.common-tit .body-lg{color:var(--text-3);}
.common-tit.center{align-items:center;text-align:center;}

/* =========================================================
    BUTTON
========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;column-gap:var(--space-8);width:fit-content;height:var(--space-48);padding:0 var(--space-20);border:1px solid var(--border-2);border-radius:var(--radius-8);background:var(--color-white);font-size:var(--fs-16);font-weight:600;line-height:1.5;color:var(--text-1);white-space:nowrap;transition:var(--transition);cursor:pointer;}
.btn:hover{border-color:var(--static-2);}
.btn svg{flex-shrink:0;width:1.1em;height:1.1em;}
.btn.w-100{width:100%;}
.btn.xl{height:var(--space-64);padding:0 var(--space-32);font-size:var(--fs-18);font-weight:700;}
.btn.sm{height:40px;padding:0 var(--space-16);font-size:var(--fs-14);}
.btn.round{border-radius:var(--radius-full);}
.btn.line{border-color:var(--border-3);}
.btn.line:hover{border-color:var(--static-2);color:var(--static-2);}
.btn.point{background:var(--static-1);border-color:var(--static-1);color:var(--color-white);}
.btn.point:hover{background:var(--static-1-hover);border-color:var(--static-1-hover);}
.btn.light{background:var(--bg-4);border-color:var(--bg-4);color:var(--static-1);}
.btn.light:hover{background:var(--static-4);border-color:var(--static-4);}
.btn.light svg,
.btn.line svg{transition:transform var(--transition);}
.btn.light:hover svg,
.btn.line:hover svg{transform:translate(2px,-2px);}

/* =========================================================
    BUTTON ICON
========================================================= */
.btn-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border-radius:var(--radius-full);color:var(--text-1);transition:var(--transition);}
.btn-icon.circle{width:var(--space-56);height:var(--space-56);}
.btn-icon.circle svg{width:var(--space-24);height:var(--space-24);}

/* =========================================================
    SKIP LINK
========================================================= */
.skip-link{position:fixed;top:-100px;left:var(--space-20);z-index:1000;padding:var(--space-12) var(--space-20);border-radius:var(--radius-8);background:var(--static-1);font-size:var(--fs-15);font-weight:600;color:var(--color-white);transition:top var(--transition);}
.skip-link:focus{top:var(--space-20);}

/* =========================================================
    TOP BUTTON
========================================================= */
.btn-top{position:fixed;right:var(--space-24);bottom:var(--space-24);z-index:800;background:var(--static-1);color:var(--color-white);box-shadow:var(--shadow-3);opacity:0;visibility:hidden;transform:translateY(10px);}
.btn-top:hover{background:var(--static-1-hover);}
.btn-top.show{opacity:1;visibility:visible;transform:translateY(0);}

/* =========================================================
    AOS
========================================================= */
[data-aos]{opacity:0;transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1);transition-delay:var(--aos-delay,0ms);}
[data-aos="fade-up"]{transform:translateY(40px);}
[data-aos="fade-down"]{transform:translateY(-40px);}
[data-aos="fade-left"]{transform:translateX(60px);}
[data-aos="fade-right"]{transform:translateX(-60px);}
[data-aos="zoom-in"]{transform:scale(.92);}
[data-aos].aos-animate{opacity:1;transform:none;}

/* =========================================================
    REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
[data-aos]{opacity:1;transform:none;transition:none;}
}

@media screen and (max-width: 1024px) {
.common-grid3{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media screen and (max-width: 500px) {
.inner{width:calc(100% - 32px);}
.common-grid3{grid-template-columns:repeat(1,minmax(0,1fr));}
.common-tit{margin-bottom:32px;}
.btn{padding:0 16px;}
.btn.xl{height:52px;padding:0 24px;}
.btn-top{right:16px;bottom:16px;}
}