@charset "utf-8";
/* Dev.M Theme Design Tokens */
:root{

		/* Color */
		--c-primary: #071C35;

		--c-deep: #0E2A4D;

		--c-accent: #1E88E5;

		--c-accent-light: #18B7C8;

		--c-fg: #111827;

		--devm01-gray-900: #1F2937;

		--devm01-gray-800: #2A3341;

		--devm01-gray-700: #374151;

		--devm01-gray-600: #6B7280;

		--devm01-gray-500: #7B8794;

		--devm01-gray-400: #9CA3AF;

		--devm01-gray-300: #CBD5E1;

		--devm01-gray-200: #E5EAF0;

		--devm01-gray-100: #F4F7FA;

		--c-bg: #FFFFFF;

		--devm01-red: #E5484D;

		/* Layout */
		--devm01-inner-lg: 1440px;

		--devm01-inner: var(--devm01-main-width, 1280px);

		--devm01-inner-sm: 1080px;

		--devm01-content: 920px;

		/* Spacing scale */
		--devm01-space-1: 4px;

		--devm01-space-2: 8px;

		--devm01-space-3: 12px;

		--devm01-space-4: 16px;

		--devm01-space-5: 20px;

		--devm01-space-6: 24px;

		--devm01-space-8: 32px;

		--devm01-space-10: 40px;

		--devm01-space-12: 48px;

		--devm01-space-14: 56px;

		--devm01-space-16: 64px;

		--devm01-space-20: 80px;

		--devm01-space-25: 100px;

		--devm01-space-30: 120px;

		--devm01-space-40: 160px;

		/* Radius */
		--devm01-radius-xs: 4px;

		--devm01-radius-sm: 6px;

		--devm01-radius-btn: 8px;

		--devm01-radius-md: 12px;

		--devm01-radius-card: 18px;

		--devm01-radius-lg: 24px;

		--devm01-radius-xl: 28px;

		/* Shadow */
		--devm01-shadow-card: 0 16px 40px rgba(7,
28,
53,
.08);

		--devm01-shadow-floating: 0 24px 60px rgba(7,
28,
53,
.12);

		--devm01-shadow-header: 0 10px 30px rgba(7,
28,
53,
.08);

		/* Typography */
		--devm01-font-kr: Lexend,
Pretendard,
"Noto Sans KR",
"Apple SD Gothic Neo",
"Malgun Gothic",
sans-serif;

		--devm01-font-en: Lexend,
Inter,
Montserrat,
Arial,
sans-serif;

		--devm01-body-size: 16px;

		--devm01-body-line: 1.75;

		/* 주메뉴 상하 여백이 머리말 높이에 위아래로 더해집니다. */
		--devm01-header-height: calc(80px + var(--devm-header-pad-y, 0px) * 2);

		--devm01-mobile-header-height: 64px;

		/* Motion */
		--devm01-ease: cubic-bezier(.22,
1,
.36,
1);

		--devm01-duration: 260ms;

		/* 메인 캐러셀과 팝업이 사용하는 값입니다. 지정하지 않으면 해당 요소의
		   움직임 선언 전체가 무효가 되어 첫 화면 덮개가 걷히지 않습니다. */
		--ez:      cubic-bezier(.22,.61,.36,1);
		--ez-out:  cubic-bezier(.16,1,.3,1);
		--ez-soft: cubic-bezier(.34,.8,.28,1);

		--fs-hero: clamp(2rem, 5.2vw, 3.5rem);
		--fs-xs:   1rem;

		/* 다른 Dev.M 테마의 스킨을 옮겨 사용하실 때 필요한 공통 값입니다. */
		--fs-body: 1rem;
		--fs-md:   1.125rem;
		--fs-sm:   1rem;
		--fs-h2:   2rem;
		--fs-h3:   1.35rem;

		--r-card:  0;
		--r-input: 0;
		--r-pill:  999px;

		--sp-1: .5rem;   --sp-2: .75rem; --sp-3: 1rem;   --sp-4: 1.5rem;
		--sp-5: 2.5rem;  --sp-6: 3rem;   --sp-7: 4.5rem; --sp-8: 5rem;

}

/* DevM setting-driven theme variants */
/* 글꼴은 설정 화면에서 선택한 값이 --ff 로 전달됩니다. */
:root{
	--devm01-font-kr:var(--ff, Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif);
	--devm01-font-en:var(--ff, Pretendard, Inter, Arial, sans-serif);
}

/* 머리말 높이는 화면 폭에 따라 달라집니다. 정의는 이 파일에만 둡니다. */
@media (max-width:1180px){
	:root{
		--devm01-header-height:64px;
	}
}
@media (max-width:1024px){
	:root{
		--devm01-header-height:72px;
	}
}