@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css');
@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css');

/* Gong Gothic */
@font-face {
    font-family: 'Gong Gothic';
    src: url('/assets/front/font/Gong Gothic OTF Light.otf') format('opentype'),
    url('/assets/front/font/Gong Gothic Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gong Gothic';
    src: url('/assets/front/font/Gong Gothic OTF Medium.otf') format('opentype'),
    url('/assets/front/font/Gong Gothic Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gong Gothic';
    src: url('/assets/front/font/Gong Gothic OTF Bold.otf') format('opentype'),
    url('/assets/front/font/Gong Gothic Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

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

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

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

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

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

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

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

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

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'SebangGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SebangGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

*{
    box-sizing: border-box;
}

body{
    position: relative;
    font-family: "Pretendard", sans-serif;
}

:root {
    /* =========================================
       1. Primitive Color Tokens
       ========================================= */
    --Blue-0: #E1E7F0;
    --Blue-100: #B2CAED;
    --Blue-200: #84ADE8;
    --Blue-300: #5C93DF;
    --Blue-400: #3D7CD4;
    --Blue-500: #2668C3;
    --Blue-600: #1655AE;
    --Blue-700: #004097;
    --Blue-800: #053475;
    --Blue-900: #032554;

    --Black-0: #E8E8E8;
    --Black-50: #F4F7F9;
    --Black-100: #DEE0E4;
    --Black-200: #D1D6DD;
    --Black-300: #C1C8D2;
    --Black-400: #AFB7C3;
    --Black-500: #99A2AD;
    --Black-600: #7F8691;
    --Black-700: #5F656E;
    --Black-800: #3B3F44;
    --Black-900: #16171A;
    --White: #FFFFFF;

    --Blue-B-0: #E6FBFF;
    --Blue-B-50: #DAF1F6;
    --Blue-B-100: #BBF2FC;
    --Blue-B-200: #92E7F6;
    --Blue-B-300: #6FDAED;
    --Blue-B-400: #52CBE1;
    --Blue-B-500: #3BB9CF;
    --Blue-B-600: #2AA3B8;
    --Blue-B-700: #1D889B;
    --Blue-B-800: #146A7A;
    --Blue-B-900: #0D4C57;

    /* =========================================
       2. Semantic Color Tokens
       ========================================= */
    --color-primary: var(--Blue-B-600);
    --color-primary-hover: var(--Blue-B-700);
    --color-primary-light: var(--Blue-B-0);
    --color-text-main: var(--Black-900);
    --color-text-sub: var(--Black-700);
    --color-text-disabled: var(--Black-400);
    --color-bg-sub: var(--Black-0);
    --color-border: var(--Black-200);
    --color-surface-soft: var(--Blue-B-0);
    --color-overlay: rgba(3, 37, 84, 0.62);
    --color-shadow: rgba(22, 23, 26, 0.1);
    --color-control-bg: #F5F5F5;
    --color-control-overlay: rgba(0, 0, 0, 0.1);
    --color-footer-bg: #F2F2F2;

    /* =========================================
       3. Responsive Typography Tokens
       PC 기준: clamp()의 마지막 값
       ========================================= */
    --font-display-1: clamp(30px, 4.17vw, 80px);
    --font-display-2: clamp(48px, 5vw, 64px);
    --font-heading-1: clamp(36px, 3.75vw, 48px);
    --font-heading-2: clamp(32px, 2.19vw, 42px);
    --font-heading-3: clamp(28px, 2.81vw, 36px);
    --font-heading-4: clamp(20px, 1.6vw, 24px);
    --font-heading-5: clamp(18px, 1.56vw, 20px);
    --font-lead: clamp(18px, 1.25vw, 24px);
    --font-body-lg: clamp(16px, 1.05vw, 20px);
    --font-body: clamp(16px, 1.2vw, 18px);
    --font-label: clamp(15px, 1vw, 16px);
    --font-eyebrow: clamp(16px, 1.4vw, 18px);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.blind {
    width: 0;
    height: 0;
    text-indent: -9999px;
    padding: 0;
    margin: 0;
    visibility: hidden;
}

.mb {
    display: none;
}

@media all and (max-width: 1024px) {
    .pc {
        display: none;
    }
    .mb {
        display: block;
    }
}


:root {
	/* --primary-color: #063f8f;
	--secondary-color: #ed6d00; */
	--height: 50px;
	--font-size-48: 3em;
	--font-size-36: 2.25em;
	--font-size-32: 2em;
	--font-size-30: 1.85em;
	--font-size-28: 1.75em;
	--font-size-26: 1.65em;
	--font-size-24: 1.5em;
	--font-size-22: 1.4em;
	--font-size-20: 1.25em;
	--font-size-18: 1.125em;
	--font-size-16: 1em;
	--font-size-15: .95em;
	--font-size-14: .88em;
	--font-size-13: .82em;
	--space-xs: 10px;
	--space-sm: 20px;
	--space-md: 40px;
	--space-lg: 60px;
    --border-radius: 10px;
    --border-radius-15: 15px;
	--transition: 0.2s ease-in-out;
    --fn-sans: 'Noto Sans KR', sans-serif;
    --fn-gong: 'Gong Gothic', sans-serif;
    --fn-escore: 'Escoredream', sans-serif;
    --fn-pretendard: 'Pretendard';
    --fn-suit: 'SUIT Variable';
    --fn-sebang: 'SebangGothic';
    --title-blue: #063f8f;
    --title-text-color: #041632;
}
@media all and (max-width: 1023px) {
	:root {--height: 45px;}
}
@media all and (max-width: 767px) {
	:root {--height: 40px;}
}

html, input, select, textarea, button {font-family: "Noto Sans KR", sans-serif;}
html, input, select, textarea, button { letter-spacing: -0.5px; }
.font-bold { font-weight: 600; }
.font-underline { text-decoration: underline; }
.font-italic { font-style: italic; }
.color-primary { color: var(--color-primary); }
.color-secondary { color: var(--color-secondary); }
.color-gray { color: #878d91; }
.color-warning { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-gray { background-color: #eee; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.block { display: block; }
.t-block, .m-block, .hide { display: none; }
.flex { display: flex; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.vt-top { vertical-align: top; }
.vt-bottom { vertical-align: bottom; }
.vt-center { vertical-align: center; }
.ellipsis-1 { overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.ellipsis-2 { overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ellipsis-3 { overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

input:focus,
textarea:focus,
select:focus {border: 2px dashed var(--color-primary);}

@media all and (max-width:1023px) {
	.t-block { display: block; }
}
@media all and (max-width:767px) {
	.m-hide { display: block; }
}

.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-35 { margin-top: 35px; }
.mt-40 { margin-top: 40px; }
.mt-45 { margin-top: 45px; }
.mt-50 { margin-top: 50px; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-35 { margin-bottom: 35px; }
.mb-40 { margin-bottom: 40px; }
.mb-45 { margin-bottom: 45px; }
.mb-50 { margin-bottom: 50px; }
.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.ml-25 { margin-left: 25px; }
.ml-30 { margin-left: 30px; }
.ml-35 { margin-left: 35px; }
.ml-40 { margin-left: 40px; }
.ml-45 { margin-left: 45px; }
.ml-50 { margin-left: 50px; }
.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.mr-25 { margin-right: 25px; }
.mr-30 { margin-right: 30px; }
.mr-35 { margin-right: 35px; }
.mr-40 { margin-right: 40px; }
.mr-45 { margin-right: 45px; }
.mr-50 { margin-right: 50px; }
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-25 { padding-top: 25px; }
.pt-30 { padding-top: 30px; }
.pt-35 { padding-top: 35px; }
.pt-40 { padding-top: 40px; }
.pt-45 { padding-top: 45px; }
.pt-50 { padding-top: 50px; }
.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }
.pb-25 { padding-bottom: 25px; }
.pb-30 { padding-bottom: 30px; }
.pb-35 { padding-bottom: 35px; }
.pb-40 { padding-bottom: 40px; }
.pb-45 { padding-bottom: 45px; }
.pb-50 { padding-bottom: 50px; }
.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.pl-20 { padding-left: 20px; }
.pl-25 { padding-left: 25px; }
.pl-30 { padding-left: 30px; }
.pl-35 { padding-left: 35px; }
.pl-40 { padding-left: 40px; }
.pl-45 { padding-left: 45px; }
.pl-50 { padding-left: 50px; }
.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }
.pr-20 { padding-right: 20px; }
.pr-25 { padding-right: 25px; }
.pr-30 { padding-right: 30px; }
.pr-35 { padding-right: 35px; }
.pr-40 { padding-right: 40px; }
.pr-45 { padding-right: 45px; }
.pr-50 { padding-right: 50px; }