:root {
--headH: 5.5em;
--siteC: #001420;
--siteC2: #26B5B1;
--color-point: #001420;
--color-point2 : #26B5B1;
--color-text-gray: #7f7f7f;
--color-back-1: #f2f7fb;
--color-black: #1e292d;
--color-black-1: #000000;
--color-black-2: #111111;
--color-black-3: #171717;
--color-black-4: #222222;
--color-black-5: #333333;
--color-black-6: #444444;
--color-black-7: #555555;
--color-black-8: #666666;
--color-black-9: #777777;
--color-black-10: #888888;
--color-black-11: #999999;
--crGrad2: linear-gradient(to bottom, var(--siteC), var(--siteC2));
--crWhitefil: brightness(0) invert(1);
--gray-line: #d1d1d1;
--gray-line-1: #eaeaea;
/* ====== html Font-Size 100% 기준 (1rem = 16px) ====== */
 --html-font-size-1 : 100%; --html-font-size-2 : 87.5%; --html-font-size-3 : 75%; --html-font-size-4 : 62.5%; /* 1rem = 16px 기준 */
 --font-size-xxxs: clamp(0.5rem, 0.5vw, 0.625rem); /* 8px ~ 10px */
 --font-size-xxs: clamp(0.625rem, 0.6vw, 0.75rem); /* 10px ~ 12px */
 --font-size-xs: clamp(0.75rem, 0.8vw, 0.875rem); /* 12px ~ 14px */
 --font-size-sm-1: clamp(0.8125rem, 0.9vw, 0.9375rem); /* 13px ~ 15px */
 --font-size-sm: clamp(0.875rem, 1vw, 1rem); /* 14px ~ 16px */
 --font-size-base: clamp(1rem, 1.2vw, 1.125rem); /* 16px ~ 18px */
 --font-size-md-1: clamp(1.0625rem, 1.3vw, 1.25rem); /* 17px ~ 20px */
 --font-size-md: clamp(1.125rem, 1.4vw, 1.375rem); /* 18px ~ 22px */
 --font-size-lg-1: clamp(1.375rem, 1.7vw, 1.625rem); /* 22px ~ 26px */
 --font-size-lg: clamp(1.5rem, 2vw, 1.75rem); /* 24px ~ 28px */
 --font-size-lg-2: clamp(1.75rem, 2.5vw, 2rem); /* 28px ~ 32px */
 --font-size-xl-1: clamp(1.875rem, 2.7vw, 2.25rem); /* 30px ~ 36px */
 --font-size-xl: clamp(2rem, 3vw, 2.5rem); /* 32px ~ 40px */
 --font-size-xxl: clamp(2.5rem, 3.5vw, 2.85rem); /* 40px ~ 45.6px */
 --font-size-xxl-2: clamp(2.9rem, 3.9vw, 3.25rem); /* 46.4px ~ 52px */
 --font-size-xxxl: clamp(3rem, 4vw, 3.65rem); /* 48px ~ 64px */
 --font-size-xxxxl: clamp(4rem, 6vw, 6rem); /* 64px ~ 96px */

 /* ====== Border Radius ====== */
 --radius-none: 0;
 --radius-sm: 0.4rem; /* 4px */
 --radius-md: 0.8rem; /* 8px */
 --radius-lg: 1.6rem; /* 16px */
 --radius-xl: 2.4rem; /* 24px */
 --radius-pill: 9999px;
 
 /* ====== Gaps (Grid / Flexbox) ====== */
 --gap-xs: var(--space-1);
 --gap-sm: var(--space-2);
 --gap-md: var(--space-3);
 --gap-lg: var(--space-4);
 --gap-xl: var(--space-5);
 
/* ====== Spacing (margin, padding, gap) - 8px 기반 ====== */
 --space-0: 0; /* 0px */
 --space-1: 0.4rem; /* 4px */
 --space-2: 0.8rem; /* 8px */
 --space-3: 1.2rem; /* 12px */
 --space-4: 1.6rem; /* 16px */
 --space-5: 2.4rem; /* 24px */
 --space-6: 3.2rem; /* 32px */
 --space-7: 4.8rem; /* 48px */
 --space-8: 6.4rem; /* 64px */

/* ====== Line Heights ====== */
 --line-height-tight: 1.2;
 --line-height-normal: 1.5;
 --line-height-loose: 1.75;
 
/* ====== Border Radius ====== */
 --radius-none: 0; --radius-sm: 0.4rem; /* 4px */
 --radius-md: 0.8rem; /* 8px */
 --radius-lg: 1.6rem; /* 16px */
 --radius-xl: 2.4rem; /* 24px */
 --radius-pill: 9999px; 

} 


/* ====== Margin ====== */
.mt-0 { margin-top: var(--space-0) !important } 
.mt-1 { margin-top: var(--space-1) !important } 
.mt-2 { margin-top: var(--space-2) !important } 
.mt-3 { margin-top: var(--space-3) !important } 
.mt-4 { margin-top: var(--space-4) !important } 
.mt-5 { margin-top: var(--space-5) !important } 
.mt-6 { margin-top: var(--space-6) !important } 

.mb-0 { margin-bottom: var(--space-0) !important } 
.mb-1 { margin-bottom: var(--space-1) !important } 
.mb-2 { margin-bottom: var(--space-2) !important } 
.mb-3 { margin-bottom: var(--space-3) !important } 
.mb-4 { margin-bottom: var(--space-4) !important } 
.mb-5 { margin-bottom: var(--space-5) !important } 
.mb-6 { margin-bottom: var(--space-6) !important } 

.mr-0 { margin-right: var(--space-0) !important } 
.mr-1 { margin-right: var(--space-1) !important } 
.mr-2 { margin-right: var(--space-2) !important } 
.mr-3 { margin-right: var(--space-3) !important } 
.mr-4 { margin-right: var(--space-4) !important } 
.mr-5 { margin-right: var(--space-5) !important } 
.mr-6 { margin-right: var(--space-6) !important } 

.ml-0 { margin-left: var(--space-0) !important } 
.ml-1 { margin-left: var(--space-1) !important } 
.ml-2 { margin-left: var(--space-2) !important } 
.ml-3 { margin-left: var(--space-3) !important } 
.ml-4 { margin-left: var(--space-4) !important } 
.ml-5 { margin-left: var(--space-5) !important } 
.ml-6 { margin-left: var(--space-6) !important } 


/* ====== Padding ====== */
.pt-0 { padding-top: var(--space-0) !important } 
.pt-1 { padding-top: var(--space-1) !important } 
.pt-2 { padding-top: var(--space-2) !important } 
.pt-3 { padding-top: var(--space-3) !important } 
.pt-4 { padding-top: var(--space-4) !important } 
.pt-5 { padding-top: var(--space-5) !important } 
.pt-6 { padding-top: var(--space-6) !important } 

.pb-0 { padding-bottom: var(--space-0) !important } 
.pb-1 { padding-bottom: var(--space-1) !important } 
.pb-2 { padding-bottom: var(--space-2) !important } 
.pb-3 { padding-bottom: var(--space-3) !important } 
.pb-4 { padding-bottom: var(--space-4) !important } 
.pb-5 { padding-bottom: var(--space-5) !important } 
.pb-6 { padding-bottom: var(--space-6) !important } 

.pr-0 { padding-right: var(--space-0) !important } 
.pr-1 { padding-right: var(--space-1) !important } 
.pr-2 { padding-right: var(--space-2) !important } 
.pr-3 { padding-right: var(--space-3) !important } 
.pr-4 { padding-right: var(--space-4) !important } 
.pr-5 { padding-right: var(--space-5) !important } 
.pr-6 { padding-right: var(--space-6) !important } 

.pl-0 { padding-left: var(--space-0) !important } 
.pl-1 { padding-left: var(--space-1) !important } 
.pl-2 { padding-left: var(--space-2) !important } 
.pl-3 { padding-left: var(--space-3) !important } 
.pl-4 { padding-left: var(--space-4) !important } 
.pl-5 { padding-left: var(--space-5) !important } 
.pl-6 { padding-left: var(--space-6) !important } 


/* ====== Padding ====== */
.gap-0 { gap: var(--space-0) !important } 
.gap-1 { gap: var(--space-1) !important } 
.gap-2 { gap: var(--space-2) !important } 
.gap-3 { gap: var(--space-3) !important } 
.gap-4 { gap: var(--space-4) !important } 
.gap-5 { gap: var(--space-5) !important } 
.gap-6 { gap: var(--space-6) !important } 

/*flex box*/
.flex_box { } 
.flex_box.s1 { margin: 0 0 -1rem -1rem; } 
.flex_box.s1 li > .in { margin: 0 0 1rem 1rem; } 
.flex_box.s2 { margin: 0 0 -2rem -2rem; } 
.flex_box.s3 { } 
.flex_box.s4 { } 
.flex_box.s5 { } 

.flex_box .fst1 > li { flex: 1 1 100%; max-width: 100%; } 
.flex_box .fst2 > li { flex: 1 1 50%; max-width: 50%; } 
.flex_box .fst3 > li { flex: 1 1 33.33%; max-width: 33.33%; } 
.flex_box .fst4 > li { flex: 1 1 25%; max-width: 25%; } 
.flex_box .fst5 > li { flex: 1 1 20%; max-width: 20%; } 
.flex_box .fst8 > li { flex: 1 1 12.5%; max-width: 12.5%; } 

.flex_box li > a { display: block; } 
.flex_box li > .in.st1 { margin: 0; }