@charset "utf-8";
@import url('/css/remixicon.css');
@import url('/css/xeicon.css');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&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');
}

/********************************************************
■ 변수 프리셋
********************************************************/
:root {
  --ff-body:"Pretendard", sans-serif;
  --ff-heading: "Oswald","Pretendard", sans-serif;
  --ff-outfit:"Outfit", "Pretendard", sans-serif;
  --ff-notoSans: "Noto Sans","Pretendard", sans-serif;
  --ff-gSans: "Google Sans","Pretendard", sans-serif;
	
  --content-width:min(100%, 109.5rem); /* 모바일 100%, 웹 1700px*/
  --content-width-sm:min(100%, 98.625rem); /* 모바일 100%, 웹 1530px*/
  --side-padding: clamp(1rem, 0.9rem + 0.5vw, 1.5rem); /* 모바일 16px, 웹 24px*/

  --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-sm: .25rem;   /*4px*/
  --radius-md: .375rem;  /*6px*/
  --radius-lg: .5rem;    /*8px*/
  --radius-xl: .75rem;   /*12px*/
  --radius-2xl: 1rem;    /*12px*/
  --radius-3xl: 1.5rem;  /*24px*/
  --radius-4xl: 2rem;    /*32px*/
  --radius-max: 100rem;  /*50%*/

  --radius: clamp(3rem, 1.571rem + 3.81vw, 5rem) clamp(0.4rem, 0.239rem + 0.429vw, 0.625rem);
  --radiusR: clamp(0.4rem, 0.239rem + 0.429vw, 0.625rem) clamp(3rem, 1.571rem + 3.81vw, 5rem) ;
  --radius10: clamp(0.4rem, 0.239rem + 0.429vw, 0.625rem);
  --radius30: clamp(0.75rem, 0.525rem + 1.125vw, 1.875rem);
  --radius80: clamp(3rem, 1.571rem + 3.81vw, 5rem);

  --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.889rem, 0.867rem + 0.111vw, 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(1rem, 0.95rem + 0.25vw, 1.25rem);
  --font-size-21: clamp(1.125rem, 1.075rem + 0.25vw, 1.375rem);
  --font-size-22: clamp(1rem, 0.925rem + 0.375vw, 1.375rem);
  --font-size-24: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
  --font-size-28: clamp(1.424rem, 1.359rem + 0.326vw, 1.75rem);
  --font-size-30: clamp(1.602rem, 1.547rem + 0.273vw, 1.875rem);
  --font-size-32: clamp(1.563rem, 1.25rem + 0.833vw, 2rem);
  --font-size-37: clamp(1.728rem, 1.611rem + 0.58vw, 2.313rem);
  --font-size-40: clamp(1.602rem, 1.422rem + 0.898vw, 2.5rem);
  --font-size-50: clamp(2.074rem, 1.863rem + 1.05vw, 3.125rem);

  --Brand-Color-main: #EA221C;
  --Brand-Color-main-rgb:234,34,28;
  --Brand-Color-sub: #E10600;  
  --Brand-Color-susub: #1F5BDD; 
  --Brand-Color-point: #0174E5;
  --BG-Color-KDS-Blue:#256EF4;

  --Text-Color-Black: #000000;
  --Text-Color-Basic-1: #262626;
  --Text-Color-Basic-2: #1C3425;
  --Text-Color-White: #ffffff;
  --Text-Color-Prosperity-Green: #008233;
  --Text-Color-Discovery-Blue: #003087;
  --Text-Color-Red: #ff0000;
  --BTN-BG-Color-default:#EA221C;
  --BTN-BG-Color-Black: #232323;
  --BTN-BG-Color-White: #ffffff;
  --BTN-BG-Color-Inactive: #f4f4f4;
  --BTN-BG-Color-Light: #f9f9f9;
  --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-6: clamp(0.25rem, 0.161rem + 0.238vw, 0.375rem);
  --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-30: clamp(1.35rem, 0.975rem + 1vw, 1.875rem);
  --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-2: 0.125rem;
  --gap-3: 0.188rem;
  --gap-4: clamp(0.25rem, 0.45rem + 0.25vw, 0.75rem);
  --gap-6: clamp(0.25rem, 0.161rem + 0.238vw, 0.375rem);
  --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);
  --gap-32:clamp(1rem, 0.286rem + 1.905vw, 2rem);
  --gap-40:clamp(1rem, -0.071rem + 2.857vw, 2.5rem);
  --gap-48:clamp(1rem, -0.429rem + 3.81vw, 3rem);
  --gap-64:clamp(1rem, -1.143rem + 5.714vw, 4rem);
  --gap-80:clamp(1rem, -1.857rem + 7.619vw, 5rem);
}

/********************************************************
■ 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, .sr_only, .hide, 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;
}
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
}
input[type="password"],
input[type="text"] {-webkit-appearance:none; width:100%; background:#fff;  border:1px solid var(--border-Color); -webkit-appearance: none; box-shadow: none; padding:0 var(--side-padding);  box-sizing:border-box;  height: clamp(2.5rem, 2.357rem + 0.381vw, 2.7rem); text-align:left; }
select {height:clamp(2.5rem, 2.357rem + 0.381vw, 2.7rem); align-content:center; padding:0 var(--num-40) 0 var(--num-16);   font-family: inherit; background:#fff url("/images/default/content/sel_icon.svg") no-repeat right+16px center; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid var(--border-Color); vertical-align:middle;}
select::-ms-expand { /* for IE 11 */   display: none;}
textarea{padding:var(--num-20); width:100%; box-sizing:border-box; vertical-align:middle; line-height:1.5; background:#fff; border:1px solid var(--border-Color);  color:var(--Text-Color-Basic-1); -webkit-appearance: none; box-shadow: none; border-radius:0; resize: vertical; }


table{ 
	width:100%; border-spacing: 0; border-collapse: separate;
}


.fl{float:left;}
.fr{float:right;}





