/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
a {
  text-decoration: none;
}
button {
  cursor: pointer;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  /* Color Variables */
  --color-primary: #114886;
  --color-primary-alpha-75: #114886bf;
  --color-primary-alpha-50: #11488680;
  --color-primary-alpha-25: #11488640;
  --color-primary-alpha-10: #1148861a;
  --color-primary-alpha-5: #1148860d;
  --color-secondary: #3272E1;
  --color-tertiary: #3272E1;
  --color-point-red: #db2931;
  --color-light-gray-0: #ffffff;
  --color-light-gray-5: #f5f5f5;
  --color-light-gray-10: #e8e8e8;
  --color-light-gray-20: #d1d1d1;
  --color-light-gray-30: #b8b8b8;
  --color-light-gray-40: #949494;
  --color-light-gray-50: #787878;
  --color-light-gray-60: #616161;
  --color-light-gray-70: #4c4c4c;
  --color-light-gray-80: #383838;
  --color-light-gray-90: #212121;
  --color-light-gray-95: #141414;
  --color-light-gray-100: #000000;
  --color-light-alpha-black75: #000000bf;
  --color-light-alpha-black50: #00000080;
  --color-light-alpha-black25: #00000040;
  --color-light-alpha-black10: #0000001a;
  --color-light-alpha-white75: #ffffffbf;
  --color-light-alpha-white50: #ffffff80;
  --color-light-alpha-white25: #ffffff40;
  --color-light-alpha-white10: #ffffff1a;
  /* border radius */
  --radius-full: 9999px;
  --radius-80: 32px;
  --radius-70: 28px;
  --radius-60: 24px;
  --radius-50: 20px;
  --radius-40: 16px;
  --radius-30: 12px;
  --radius-20: 8px;
  --radius-10: 4px;
  --radius-5: 2px;
  /* Gap */
  --gap-100: 100px;
  --gap-90: 80px;
  --gap-80: 60px;
  --gap-70: 40px;
  --gap-60: 30px;
  --gap-50: 25px;
  --gap-40: 20px;
  --gap-30: 15px;
  --gap-20: 10px;
  --gap-10: 8px;
  --gap-5: 5px;
  /* Icon Size */
  --icon-size-100: 44px;
  --icon-size-90: 40px;
  --icon-size-80: 36px;
  --icon-size-70: 32px;
  --icon-size-60: 28px;
  --icon-size-50: 24px;
  --icon-size-40: 20px;
  --icon-size-30: 18px;
  --icon-size-25: 16px;
  --icon-size-20: 14px;
  --icon-size-15: 12px;
  --icon-size-10: 10px;
  /* Font Size - Primitive */
  --font-size-180: 72px;
  --font-size-170: 64px;
  --font-size-160: 56px;
  --font-size-150: 48px;
  --font-size-140: 40px;
  --font-size-130: 36px;
  --font-size-120: 32px;
  --font-size-110: 28px;
  --font-size-100: 24px;
  --font-size-90: 22px;
  --font-size-80: 20px;
  --font-size-70: 19px;
  --font-size-60: 18px;
  --font-size-50: 17px;
  --font-size-40: 16px;
  --font-size-30: 15px;
  --font-size-20: 14px;
  --font-size-10: 13px;
  /* Font Size */
  --heading-text-size-90: var(--font-size-180);
  --heading-text-size-80: var(--font-size-170);
  --heading-text-size-70: var(--font-size-150);
  --heading-text-size-60: var(--font-size-140);
  --heading-text-size-50: var(--font-size-130);
  --heading-text-size-40: var(--font-size-120);
  --heading-text-size-30: var(--font-size-110);
  --heading-text-size-20: var(--font-size-100);
  --heading-text-size-15: var(--font-size-90);
  --heading-text-size-10: var(--font-size-80);
  --heading-text-size-5: var(--font-size-60);
  --heading-text-size-mobile: var(--font-size-50);
  --body-text-size-80: var(--font-size-110);
  --body-text-size-70: var(--font-size-100);
  --body-text-size-60: var(--font-size-80);
  --body-text-size-50: var(--font-size-70);
  --body-text-size-40: var(--font-size-60);
  --body-text-size-30: var(--font-size-50);
  --body-text-size-20: var(--font-size-40);
  --body-text-size-10: var(--font-size-30);
  --label-text-size-90: var(--font-size-110);
  --label-text-size-80: var(--font-size-100);
  --label-text-size-70: var(--font-size-90);
  --label-text-size-60: var(--font-size-80);
  --label-text-size-50: var(--font-size-60);
  --label-text-size-40: var(--font-size-40);
  --label-text-size-30: var(--font-size-30);
  --label-text-size-20: var(--font-size-20);
  --label-text-size-10: var(--font-size-10);
}

html {
  scroll-behavior: smooth !important;
}

body,
button,
input,
textarea {
  font-family: "Pretendard", "Noto Sans", "Arial", san-serif;
}

/* screen reader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 3px dotted magenta;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #ffffff;
}

/* object fit */
.object-fit--contain > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.object-fit--cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}