@font-face {
  font-family: 'Pretendard GOV Variable';
  font-weight: 100 900; 
  font-style: normal;
  font-display: swap;
  
  src: local('Pretendard GOV Variable'),
       url('../font/PretendardGOVVariable.woff2') format('woff2-variations');
}

* {margin:0; padding:0; border: 0; box-sizing: border-box; font-style: normal;}
*, *::before, *::after { box-sizing: border-box; letter-spacing: -0.02em;}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: var(--font-type01); line-height: 1.5; word-break: keep-all; text-wrap: pretty; overflow-wrap: anywhere; letter-spacing: -0.03em;}
dt, dd{font-weight: inherit;}
img, picture, video, canvas, svg {max-width: 100%; max-height: 100%;vertical-align: middle;}
dl,ul,ol,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {font-size: inherit; font-weight: inherit; color: inherit; font-family: inherit;}
button {background-color:transparent;}
select, button{cursor: pointer;}
a {color:inherit;text-decoration:none}
a:active, a:hover {text-decoration:none;}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
em{font-style:normal;}
table{width:100%;border-collapse:unset;table-layout:fixed; border-spacing: 0;}
table caption{display: none;}
form legend{display: none;}
:where(input, select, button, textarea):focus-visible{outline: 2px solid var(--primary-60); outline-offset: 2px;}
.blind {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}

:root{
    --trans-color:transparent;
    --point-white:#fff;
		/* Primary Colors */
		--primary-90: #001D43;
		--primary-80: #012E83;
		--primary-70: #063EA7;
		--primary-60: #0A51DE;
		--primary-50: #246BEB;
		--primary-40: #458FFF;
		--primary-30: #77BDFF;
		--primary-20: #99CEFF;
		--primary-15: #B5DBFF;
		--primary-10: #CEEAFE;
		--primary-5: #E9F4FF;

		/* Secondary Colors */
		--secondary-90: #101743;
		--secondary-80: #051B73;
		--secondary-70: #102C89;
		--secondary-60: #223CA3;
		--secondary-50: #3559CE;
		--secondary-40: #4571E3;
		--secondary-30: #7CA7F6;
		--secondary-20: #95B7F8;
		--secondary-15: #B3CEFF;
		--secondary-10: #D7E5FF;
		--secondary-5: #EAF1FF;

		/* Gray Scales */
		--gray-100: #000000;
		--gray-90: #191D21;
		--gray-80: #22272D;
		--gray-70: #4E5660;
		--gray-60: #6C7683;
		--gray-50: #8B949F;
		--gray-40: #AFB7C2;
		--gray-30: #C3CAD4;
		--gray-20: #D6DBE2;
		--gray-10: #EEF2F9;
		--gray-5: #F5F8FF;
		--gray-0: #FFFFFF;

		/* Alpha Colors */
		--alpha-g90: rgba(7, 21, 47, 0.9);
		--alpha-g80: rgba(7, 21, 47, 0.8);
		--alpha-g70: rgba(7, 21, 47, 0.7);
		--alpha-g60: rgba(7, 21, 47, 0.6);
		--alpha-g50: rgba(7, 21, 47, 0.5);
		--alpha-g40: rgba(7, 21, 47, 0.4);
		--alpha-g30: rgba(7, 21, 47, 0.3);
		--alpha-g20: rgba(7, 21, 47, 0.2);
		--alpha-g15: rgba(7, 21, 47, 0.15);
		--alpha-g10: rgba(7, 21, 47, 0.10);
		--alpha-g5:  rgba(7, 21, 47, 0.05);

		--alpha-w90: rgba(255, 255, 255, 0.9);
		--alpha-w80: rgba(255, 255, 255, 0.8);
		--alpha-w70: rgba(255, 255, 255, 0.7);
		--alpha-w60: rgba(255, 255, 255, 0.6);
		--alpha-w50: rgba(255, 255, 255, 0.5);
		--alpha-w40: rgba(255, 255, 255, 0.4);
		--alpha-w30: rgba(255, 255, 255, 0.3);
		--alpha-w20: rgba(255, 255, 255, 0.2);
		--alpha-w15: rgba(255, 255, 255, 0.15);
		--alpha-w10: rgba(255, 255, 255, 0.10);
		--alpha-w5:  rgba(255, 255, 255, 0.05);

		/* System Colors (Danger, Success, Information, Warning) */
		--danger-60: #D50136;
		--danger-50: #EB003B;
		--danger-10: #FCD4DE;
		--danger-5: #FEECF0;

		--success-60: #006E18;
		--success-50: #008A1E;
		--success-10: #CEE9D4;
		--success-5: #EEF7F0;

		/* 이미지상 라이트/다크가 동일하게 표기되어 있습니다 */
		--information-60: #1F53CC;
		--information-50: #2768FF;
		--information-10: #D4E1FF;
		--information-5: #E9F0FF;

		--warning-60: #98690A;
		--warning-50: #FFB724;
		--warning-10: #FFEAC1;
		--warning-5: #FFF8E9;

		/* Background Custom Colors */
		--bg-p10-50: rgba(206, 234, 254, 0.5);   /* #CEEAFE 50% */
		--bg-p50-50: rgba(36, 107, 235, 0.5);    /* #246BEB 50% */
		--bg-p50-20: rgba(36, 107, 235, 0.2);    /* #246BEB 20% */
		--bg-p50-10: rgba(36, 107, 235, 0.1);    /* #246BEB 10% */

		--bn-red: rgba(255, 210, 204, 0.25);     /* #FFD2CC 25% */
		--bn-yellow: rgba(255, 231, 180, 0.25);  /* #FFE7B4 25% */
		--bn-pink: rgba(249, 199, 255, 0.25);    /* #F9CFFF 25% */
		--bn-blue: rgba(179, 218, 255, 0.25);    /* #B3DAFF 25% */
		--bn-mint: rgba(173, 246, 234, 0.25);    /* #ADF6EA 25% */
		--bn-green: rgba(194, 255, 194, 0.25);   /* #C2FFC2 25% */
		  
		--contents: #EEF5FB;
		  
		/* Accent Colors */
		--accent-90: #2E0507;
		--accent-80: #5C0A0F;
		--accent-70: #8B0E16;
		--accent-60: #B9131E;
		--accent-50: #B9131E;
		--accent-40: #EC4651;
		--accent-30: #F1747C;
		--accent-20: #F5A3A8;
		--accent-10: #FBD6D8;
		--accent-5:  #FDF2F3;
		
		--border-color01:#D3D3D3;
		  
    --font-type01:'Pretendard GOV Variable', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;
    --filter-white:brightness(0) invert(1);
    --filter-black:brightness(0);
    --filter-point02:brightness(0) saturate(100%) invert(28%) sepia(81%) saturate(874%) hue-rotate(188deg) brightness(96%) contrast(90%);
    --clip-poly01:polygon(50% 100%, 0 0, 100% 0);
    --clip-poly02:polygon(100% 0, 0 100%, 100% 100%);
    --clip-poly03:polygon(calc(50% - 1px) 0, calc(50% - 1px) calc(50% - 1px), 0 calc(50% - 1px), 0 calc(50% + 1px), calc(50% - 1px) calc(50% + 1px), calc(50% - 1px) 100%, calc(50% + 1px) 100%, calc(50% + 1px) calc(50% + 1px), 100% calc(50% + 1px), 100% calc(50% - 1px), calc(50% + 1px) calc(50% - 1px), calc(50% + 1px) 0);
    --clip-poly04:polygon(2% 0, 100% 0%, 100% 100%, 0% 100%);
    --clip-poly05:polygon(100% 0%, 0% 50%, 0% 100%, 100% 50%);
    --shadow-01:0 clamp(4px, 0.6vw, 8px) clamp(5px, 1vw, 12px) 0 rgba(0, 0, 0, 0.10), 0 clamp(12px, 2.3vw, 28px) clamp(10px, 2vw, 24px) 0 rgba(0, 0, 0, 0.16);
    --shadow-02:0 0 clamp(10px, 2vw, 20px) 0 rgba(0, 0, 0, 0.15);
	--shadow-03:0 clamp(2px, 0.2vw, 4px) clamp(8px, 1vw, 12px) 0 rgba(64, 108, 166, 0.25);
	--shadow-04:0 clamp(6px, 1.2vw, 12px) clamp(8px, 1.6vw, 16px) 0 rgba(0, 0, 0, 0.15);
	--shadow-05:0 clamp(6px, 1.2vw, 12px) clamp(10px, 2vw, 20px) 0 rgba(0, 15, 101, 0.04);
    --shadow-06:0 clamp(4px, 0.6vw, 8px) clamp(8px, 1.6vw, 16px) 0 rgba(0, 0, 0, 0.25);
    --radius-40:clamp(20px, 4vw, 40px);
    --radius-30:clamp(15px, 3vw, 30px);
	--radius-24:clamp(12px, 2.2vw, 24px);
    --radius-20:clamp(10px, 2vw, 20px);
    --radius-16:clamp(8px, 1.6vw, 16px);
    --radius-15:clamp(7.5px, 1.5vw, 15px);
    --radius-14:clamp(7px, 1.4vw, 14px);
    --radius-10:clamp(5px, 1vw, 10px);
	--radius-08:clamp(5px, 0.8vw, 8px);
    --radius-06:clamp(4px, 0.8vw, 6px);
    --radius-04:clamp(3px, 0.6vw, 4px);
    --text-40: clamp(1.875rem, calc(2.4vw + 1.125rem), 2.5rem);      /* 최소 30px ~ 최대 40px */
    --text-39: clamp(1.8125rem, calc(2.4vw + 1.0625rem), 2.4375rem); /* 최소 29px ~ 최대 39px */
    --text-38: clamp(1.75rem, calc(2.4vw + 1rem), 2.375rem);         /* 최소 28px ~ 최대 38px */
    --text-37: clamp(1.75rem, calc(2.16vw + 1.0625rem), 2.3125rem);  /* 최소 28px ~ 최대 37px */
    --text-36: clamp(1.6875rem, calc(2.16vw + 1rem), 2.25rem);       /* 최소 27px ~ 최대 36px */
    --text-35: clamp(1.6875rem, calc(1.92vw + 1.0625rem), 2.1875rem); /* 최소 27px ~ 최대 35px */
    --text-34: clamp(1.625rem, calc(1.92vw + 1rem), 2.125rem);       /* 최소 26px ~ 최대 34px */
    --text-33: clamp(1.625rem, calc(1.68vw + 1.0625rem), 2.0625rem); /* 최소 26px ~ 최대 33px */
    --text-32: clamp(1.5625rem, calc(1.68vw + 1rem), 2rem);          /* 최소 25px ~ 최대 32px */
    --text-31: clamp(1.5625rem, calc(1.44vw + 1.0625rem), 1.9375rem); /* 최소 25px ~ 최대 31px */
    --text-30: clamp(1.375rem, calc(1.92vw + 0.75rem), 1.875rem);    /* 최소 22px ~ 최대 30px */
    --text-29: clamp(1.3125rem, calc(1.92vw + 0.6875rem), 1.8125rem); /* 최소 21px ~ 최대 29px */
    --text-28: clamp(1.25rem, calc(1.92vw + 0.625rem), 1.75rem);     /* 최소 20px ~ 최대 28px */
    --text-27: clamp(1.25rem, calc(1.68vw + 0.6875rem), 1.6875rem);  /* 최소 20px ~ 최대 27px */
    --text-26: clamp(1.25rem, calc(1.68vw + 0.625rem), 1.625rem);    /* 최소 20px ~ 최대 26px */
    --text-25: clamp(1.25rem, calc(1.44vw + 0.6875rem), 1.5625rem);  /* 최소 20px ~ 최대 25px */
    --text-24: clamp(1.25rem, calc(1.44vw + 0.625rem), 1.5rem);      /* 최소 20px ~ 최대 24px */
    --text-23: clamp(1.25rem, calc(1.2vw + 0.6875rem), 1.4375rem);   /* 최소 20px ~ 최대 23px */
    --text-22: clamp(1.25rem, calc(1.2vw + 0.625rem), 1.375rem);     /* 최소 20px ~ 최대 22px */
	--text-21: clamp(1.25rem, calc(0.48vw + 1.125rem), 1.3125rem);   /* 최소 20px ~ 최대 21px */
    --text-20: calc(20rem / 16); /* 1.25rem */
    --text-19: calc(19rem / 16); /* 1.1875rem */
    --text-18: calc(18rem / 16); /* 1.125rem */
    --text-17: calc(17rem / 16); /* 1.0625rem */
    --text-16: calc(16rem / 16); /* 1rem */
    --text-15: calc(15rem / 16); /* 0.9375rem */
    --text-14: calc(14rem / 16); /* 0.875rem */
    --text-13: calc(13rem / 16); /* 0.8125rem */
    --text-12: calc(12rem / 16); /* 0.75rem */

    --row-gap-max: clamp(4.375rem, calc(15vw + 0rem), 10rem);         /* 최소 70px ~ 최대 160px */
    --row-gap-xl: clamp(4.375rem, calc(12vw + 0rem), 7.5rem);          /* 최소 70px ~ 최대 120px */
    --row-gap-lg: clamp(2.5rem, calc(8vw + 0rem), 5rem);               /* 최소 40px ~ 최대 80px */
    --row-gap-md: clamp(1.875rem, calc(5vw + 0rem), 3.125rem);         /* 최소 30px ~ 최대 50px */
    --row-gap-sl: clamp(1.5rem, calc(3.8vw + 0rem), 2.5rem);          /* 최소 24px ~ 최대 40px */
    --row-gap-sm: clamp(1.25rem, calc(3.5vw + 0rem), 2.1875rem);       /* 최소 20px ~ 최대 35px */
    --row-gap-ms: clamp(1rem, calc(3vw + 0rem), 2rem);              /* 최소 16px ~ 최대 32px */   
    --row-gap-xs: clamp(0.75rem, calc(2vw + 0rem), 1.25rem);           /* 최소 12px ~ 최대 20px */
    --row-gap-tiny: clamp(0.4375rem, calc(1vw + 0rem), 0.625rem);      /* 최소 7px ~ 최대 10px */
    --col-gap-lg: clamp(1.5rem, calc(3vw + 0rem), 3.75rem);            /* 최소 24px ~ 최대 60px */
    --col-gap-md: clamp(1.25rem, calc(2.5vw + 0rem), 2.8125rem);       /* 최소 20px ~ 최대 45px */
    --col-gap-sm: clamp(1rem, calc(1.7vw + 0rem), 1.875rem);           /* 최소 16px ~ 최대 30px */
    --col-gap-xs: clamp(0.75rem, calc(1.1vw + 0rem), 1.25rem);         /* 최소 12px ~ 최대 20px */
    --grid-array01:repeat(1, 1fr);
    --grid-array02:repeat(2, 1fr);
    --grid-array03:repeat(3, 1fr);
    --grid-array04:repeat(4, 1fr);
    --grid-array05:repeat(5, 1fr);
    --grid-array06:repeat(6, 1fr);
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Primary Colors (Dark) */
		--primary-90: #72B2FB;
		--primary-80: #5DA8FD;
		--primary-70: #4C9FFF;
		--primary-60: #4095F6;
		--primary-50: #3788F2;
		--primary-40: #3A7EE4;
		--primary-30: #2652A2;
		--primary-20: #144688;
		--primary-15: #11325D;
		--primary-10: #001C40;
		--primary-5: #001125;

		/* Secondary Colors (Dark) */
		--secondary-90: #83A0DF;
		--secondary-80: #7B98E0;
		--secondary-70: #718FD9;
		--secondary-60: #6685D3;
		--secondary-50: #5C73BE;
		--secondary-40: #415083;
		--secondary-30: #39446E;
		--secondary-20: #2F395D;
		--secondary-15: #2A3150;
		--secondary-10: #20253F;
		--secondary-5: #13172C;

		/* Gray Scales (Dark - 반전 레이아웃) */
		--gray-100: #FFFFFF;
		--gray-90: #F5F8FF;
		--gray-80: #EEF2F9;
		--gray-70: #D6DBE2;
		--gray-60: #C3CAD4;
		--gray-50: #AFB7C2;
		--gray-40: #8B949F;
		--gray-30: #6C7683;
		--gray-20: #4E5660;
		--gray-10: #22272D;
		--gray-5: #191D21;
		--gray-0: #000000;

		/* Alpha Colors (Dark) */
		--alpha-g90: rgba(255, 255, 255, 0.9);
		--alpha-g80: rgba(255, 255, 255, 0.8);
		--alpha-g70: rgba(255, 255, 255, 0.7);
		--alpha-g60: rgba(255, 255, 255, 0.6);
		--alpha-g50: rgba(255, 255, 255, 0.5);
		--alpha-g40: rgba(255, 255, 255, 0.4);
		--alpha-g30: rgba(255, 255, 255, 0.3);
		--alpha-g20: rgba(255, 255, 255, 0.2);
		--alpha-g15: rgba(255, 255, 255, 0.15);
		--alpha-g10: rgba(255, 255, 255, 0.10);
		--alpha-g5:  rgba(255, 255, 255, 0.05);

		--alpha-w90: rgba(0, 0, 0, 0.9);
		--alpha-w80: rgba(0, 0, 0, 0.8);
		--alpha-w70: rgba(0, 0, 0, 0.7);
		--alpha-w60: rgba(0, 0, 0, 0.6);
		--alpha-w50: rgba(0, 0, 0, 0.5);
		--alpha-w40: rgba(0, 0, 0, 0.4);
		--alpha-w30: rgba(0, 0, 0, 0.3);
		--alpha-w20: rgba(0, 0, 0, 0.2);
		--alpha-w15: rgba(0, 0, 0, 0.15);
		--alpha-w10: rgba(0, 0, 0, 0.10);
		--alpha-w5:  rgba(0, 0, 0, 0.05);

		/* Background Custom Colors (Dark) */
		--bg-p10-50: rgba(9, 61, 130, 0.5);     /* #093D82 50% */
		--bg-p50-50: rgba(9, 61, 130, 0.5);     /* #093D82 50% */
		--bg-p50-20: rgba(9, 61, 130, 0.2);     /* #093D82 20% */
		--bg-p50-10: rgba(9, 61, 130, 0.2);     /* #093D82 20% */

		--bn-red: rgba(109, 62, 56, 0.35);      /* #6D3E38 35% */
		--bn-yellow: rgba(94, 88, 52, 0.35);    /* #5E5834 35% */
		--bn-pink: rgba(124, 63, 105, 0.35);    /* #7C3F69 35% */
		--bn-blue: rgba(58, 80, 135, 0.35);     /* #3A5087 35% */
		--bn-mint: rgba(40, 96, 116, 0.35);     /* #286074 35% */
		--bn-green: rgba(78, 96, 85, 0.35);     /* #4E6055 35% */
		
		--contents: #EEF5FB;
		
		/* Accent Colors (Dark) */
		--accent-90: #FDF2F3;
		--accent-80: #FBD6D8;
		--accent-70: #F5A3A8;
		--accent-60: #EC4651;
		--accent-50: #EC4651;
		--accent-40: #B9131E;
		--accent-30: #B9131E;
		--accent-20: #8B0E16;
		--accent-10: #5C0A0F;
		--accent-5:  #2E0507;
	}
}
@media (max-width:860px){
    :root{
        --grid-array04:repeat(3, 1fr);
        --grid-array05:repeat(3, 1fr);
        --grid-array06:repeat(3, 1fr);
    }
}
@media (max-width:640px){
    :root{
        --grid-array03:repeat(2, 1fr);
        --grid-array04:repeat(2, 1fr);
        --grid-array05:repeat(2, 1fr);
        --grid-array06:repeat(2, 1fr);
    }
}
@media (max-width:479px){
    :root{
        --grid-array02:repeat(1, 1fr);
        --grid-array03:repeat(1, 1fr);
        --grid-array04:repeat(1, 1fr);
        --grid-array05:repeat(1, 1fr);
        --grid-array06:repeat(1, 1fr);
    }
}