@charset "utf-8";
@import url('/css/default/remixicon.css');
@import url('/css/default/xeicon.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/*----- 폰트 설정 -----*/
/* 프리텐다드 */
@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url('/images/fonts/Pretendard-Black.woff2') format('woff2'), url('/images/fonts/Pretendard-Black.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url('/images/fonts/Pretendard-ExtraBold.woff2') format('woff2'), url('/images/fonts/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url('/images/fonts/Pretendard-Bold.woff2') format('woff2'), url('/images/fonts/Pretendard-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url('/images/fonts/Pretendard-SemiBold.woff2') format('woff2'), url('/images/fonts/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url('/images/fonts/Pretendard-Medium.woff2') format('woff2'), url('/images/fonts/Pretendard-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url('/images/fonts/Pretendard-Regular.woff2') format('woff2'), url('/images/fonts/Pretendard-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url('/images/fonts/Pretendard-Light.woff2') format('woff2'), url('/images/fonts/Pretendard-Light.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url('/images/fonts/Pretendard-ExtraLight.woff2') format('woff2'), url('/images/fonts/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url('/images/fonts/Pretendard-Thin.woff2') format('woff2'), url('/images/fonts/Pretendard-Thin.woff') format('woff');
}


/* 구름 sans */
@font-face {
    font-family: 'CloudSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408@1.0/goorm-sans-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'CloudSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408@1.0/goorm-sans-medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'CloudSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408@1.0/goorm-sans-bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}


/*----- Reset -----*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
img, fieldset {border:0 none;}
img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  vertical-align: top;
}
em {
  font-style: normal;
}
a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:focus {
  outline: none;
}
a:focus-visible {
  outline: revert;
}
.blind, hr, .sr-only, legend, caption {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
hr {display:none;}
button {
  border: 0;
  background: rgba(0, 0, 0, 0);
  color: var(--Text-Color-Black);
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
button:focus {
  outline: none;
}
button:focus-visible {
  outline: revert;
}
ul,
ol {
  list-style: none;
}


/*----- 기본 설정 -----*/
:root {
  --ff-body:"CloudSans", sans-serif;
  --ff-heading: "CloudSans", sans-serif;

  /* 양옆 패딩을 더한 값 + 가로폭 = 컨텐츠 가로폭이 시안과 같아짐*/
  --content-width:min(100%, calc(78.75rem + (var(--side-padding) * 2))); /* 모바일 100%, 웹 1260px*/
  --content-width-mx:min(100%, calc(110rem + (var(--side-padding) * 2))); /* 모바일 100%, 웹 1760px*/
  --content-width-sm:min(100%, 80rem);
  --side-padding: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --radius-md: .25rem;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;

  --font-size-13: clamp(0.75rem, 0.738rem + 0.06vw, 0.813rem);
  --font-size-14: clamp(0.75rem, 0.725rem + 0.13vw, 0.875rem);
  --font-size-15: clamp(0.813rem, 0.787rem + 0.13vw, 0.938rem);
  --font-size-16: clamp(0.938rem, 0.925rem + 0.06vw, 1rem);
  --font-size-17: clamp(0.969rem, 0.95rem + 0.09vw, 1.063rem);
  --font-size-18: clamp(1rem, 0.975rem + 0.13vw, 1.125rem);
  --font-size-19: clamp(1.031rem, 1rem + 0.16vw, 1.188rem);
  --font-size-20: clamp(1.063rem, 1.025rem + 0.19vw, 1.25rem);
  --font-size-21: clamp(1.125rem, 1.075rem + 0.25vw, 1.375rem);
  --font-size-28: clamp(1.438rem, 1.375rem + 0.31vw, 1.75rem);
  --font-size-37: clamp(1.728rem, 1.611rem + 0.58vw, 2.313rem);
  --font-size-50: clamp(2.074rem, 1.863rem + 1.05vw, 3.125rem);

  --Brand-Color-main: #0561FC;
  --Brand-Color-sub: #00ad1d;  
  --Brand-Color-susub: #003087;
  --Brand-Color-point: #1B8400;
  --BG-Color-KDS-Blue:#256EF4;

  --Text-Color-Black: #1E2124;
  --Text-Color-Basic-1: #5D6670;
  --Text-Color-Basic-2: #999999;
  --Text-Color-45: #454A50;
  --Text-Color-White: #ffffff;
  --Text-Color-Prosperity-Green: #008233;
  --Text-Color-Discovery-Blue: #003087;
  --Text-Color-Red: #ff0000;
  --BTN-BG-Color-default:#0063C6;
  --BTN-BG-Color-Black: #232323;
  --BTN-BG-Color-White: #ffffff;
  --BTN-BG-Color-Inactive: #f4f4f4;
  --BTN-BG-Color-Light: #ECF2FD;
  --border-Color: #dadada;
  --Gray-Bg-Color: #F4F5F6;
  --Gray-Color-900: #000000;
  --Gray-Color-800: #262626;
  --Gray-Color-700: #434343;
  --Gray-Color-600: #58616A;
  --Gray-Color-500: #7b7b7b;
  --Gray-Color-400: #9d9d9d;
  --Gray-Color-300: #c4c4c4;
  --Gray-Color-200: #d9d9d9;
  --Gray-Color-100: #e5e5e5;
  --Gray-Color-50: #f5f5f5;
  --Gray-Color-0: #ffffff;

  --num-2: clamp(0.125rem, 0.05rem + 0.06vw, 0.125rem);
  --num-4: clamp(0.125rem, 0.1rem + 0.13vw, 0.25rem);
  --num-8: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --num-10: clamp(0.5rem, 0.475rem + 0.13vw, 0.625rem);
  --num-12: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --num-14: clamp(0.75rem, 0.725rem + 0.13vw, 0.875rem);
  --num-16: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
  --num-17: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
  --num-18: clamp(1rem, 0.975rem + 0.13vw, 1.125rem);
  --num-20: clamp(1rem, 0.975rem + 0.13vw, 1.125rem);
  --num-21: clamp(1.125rem, 1.087rem + 0.19vw, 1.313rem);
  --num-24: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
  --num-32: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
  --num-40: clamp(2rem, 1.9rem + 0.5vw, 2.5rem);
  --num-48: clamp(2.5rem, 2.4rem + 0.5vw, 3rem);
  --num-50: clamp(2.75rem, 2.675rem + 0.38vw, 3.125rem);
  --num-60: clamp(3rem, 2.85rem + 0.75vw, 3.75rem);
  --num-64: clamp(3rem, 2.8rem + 1vw, 4rem);
  --num-70: clamp(4rem, 3.925rem + 0.38vw, 4.375rem);
  --num-72: clamp(4rem, 3.9rem + 0.5vw, 4.5rem);
  --num-80: clamp(4rem, 3.8rem + 1vw, 5rem);
  --num-100: clamp(5rem, 4.75rem + 1.25vw, 6.25rem);

  --gap-4: clamp(0.25rem, 0.45rem + 0.25vw, 0.75rem);
  --gap-8: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --gap-10: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --gap-12: clamp(0.625rem, 0.45rem + 0.25vw, 0.75rem);
  --gap-16: clamp(0.625rem, 0.7rem + 0.25vw, 1rem);
  --gap-20: clamp(0.625rem, 0.975rem + 0.13vw, 1.125rem);
  --gap-24:clamp(0.625rem, 0.45rem + 0.88vw, 1.5rem);
}
html {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,figure,figcaption{margin:0;padding:0}
body {
  height: 100%;
  color: var(--Text-Color-Black);
  font-weight: 400;
  font-size:var(--font-size-18);
  font-family: var(--ff-body);
  word-break: keep-all;
  -webkit-text-size-adjust: 100%;
    word-break: keep-all;
    word-wrap: break-word;
	letter-spacing: -0.01em;
}
:lang(en) body {
  font-family: 'Inter Tight', sans-serif;
}
button,
input,
textarea,
select {
  font-family: inherit; font-size:inherit;
}
:lang(en) button,
:lang(en) input,
:lang(en) textarea,
:lang(en) select {
  font-family: 'Inter Tight', sans-serif;
}
.skip {
  position: fixed;
  top: 20rem;
  left: 50%;
  z-index: 400;
  width: 130rem;
  padding: 15rem 0;
  border-radius: 30rem;
  background-color: var(--BG-Color-White);
  box-shadow: 0 0 20rem 0rem rgba(0, 0, 0, 0.2);
  opacity: 0;
  color: var(--Text-Color-Black);
  font-weight: 700;
  font-size: 18rem;
  line-height: 1.6;
  text-align: center;
  transform: translate(-50%, -100%);
  transition: opacity 0.3s, width 0.3s, transform 0s 0.3s;
}
.skip:focus {
  width: 180rem;
  outline: 0;
  opacity: 1;
  color: var(--Text-Color-Black);
  transform: translate(-50%, 0);
  transition: opacity 0.3s, width 0.3s 0.2s, transform 0.3s;
}

.blind {
    display: none;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden
}


input[type=text],input[type=password],input[type=number],input[type=tel],input[type=email],input[type=button],input[type=submit] {
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none
}

textarea {
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none
}

input::-moz-placeholder,textarea::-moz-placeholder {
    color: #8A949E
}

input::-moz-placeholder, textarea::-moz-placeholder {
    color: #8A949E
}

input::placeholder,textarea::placeholder {
    color: #8A949E
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset
}