@charset "UTF-8";
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
.flex {
  display: flex;
}

.gap4 {
  gap: 4px !important;
}

.w-full {
  width: 100% !important;
}
:root {
  /* Navy */
  --navy-100: #f0f3f8;
  --navy-200: #dfe5ec;
  --navy-300: #bec9d8;
  --navy-400: #5a7fb0;
  --navy-500: #2c5282;
  --navy-600: #23466f;
  --navy-700: #1c3a5c;
  --navy-800: #152e49;
  --navy-900: #0f2237;

  /* Blue */
  --blue-50: #f5f9ff;
  --blue-100: #eaf2ff;
  --blue-200: #d6e5ff;
  --blue-300: #aecbff;
  --blue-400: #6fa6ff;
  --blue-500: #368fff;
  --blue-600: #2f7de0;
  --blue-700: #276ac0;
  --blue-800: #1f5799;

  /* Gray */
  --gray-100: #f8fafc;
  --gray-200: #f3f4f6;
  --gray-300: #e5e7eb;
  --gray-400: #d1d5db;
  --gray-500: #9ca3af;
  --gray-600: #7c8594;
  --gray-700: #6b7280;
  --gray-800: #4b5563;
  --gray-900: #1f2430;

  /* Red */
  --red-100: #ffd5ce;
  --red-500: #ff4931;

  /* green */
  --green-50: #f2fbfa;
  --green-100: #e6f7f5;
  --green-200: #cff1ec;
  --green-500: #2ec4b6;
  --green-600: #27aea2;
  --green-700: #209187;
  --green-800: #18726b;
  --green-900: #10534e;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strong,
sub,
sup,
var,
b,
u,
i,
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,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section,
picture,
source {
  display: block;
}

body {
  font-family: "Pretendard", sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
  /* background: var(--gray-300); */

  /* box-sizng 꼭 체크할 것 */
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
}

p {
  font-size: 1rem;
  line-height: 1.6;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
  font-weight: normal;
}

a {
  text-decoration: none;
  color: inherit;
}

img,
video,
audio {
  max-width: 100%;
  height: auto;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#skip {
  position: relative;
  z-index: 99;
}

#skip > a {
  position: absolute;
  display: block;
  width: 100%;
  height: 35px;
  background: #333;
  color: #fff;
  line-height: 35px;
  text-align: center;
  left: 0;
  top: -35px;
}

#skip > a:focus,
#skip > a:active {
  top: 0;
}

html {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  /* text크기를 자동으로 조절하지 말아라 */
}

input,
button {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  border-radius: 0;
  border: none;
  background: none;
}

select {
  /* 1. 기본 화살표 제거 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 2. 커스텀 화살표 설정 (SVG 또는 이미지) */
  background-image: url("../images/select-arrow.svg");
  background-repeat: no-repeat;
  /* 3. 위치 조절: 오른쪽에서 20px, 세로 중앙 */
  background-position: right 10px center;
  /* 화살표 크기 */
  background-size: 10px;
}

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button,
input[type="button"],
input[type="submit"] {
  cursor: pointer;
  flex-shrink: 0;
}

input:invalid,
textarea:invalid,
select:invalid {
  border-color: #ff4931;
}

/* font-weight */
.fw100 {
  font-weight: 100 !important;
}

.fw200 {
  font-weight: 200 !important;
}

.fw300 {
  font-weight: 300 !important;
}

.fw400 {
  font-weight: 400 !important;
}

.fw500 {
  font-weight: 500 !important;
}

.fw600 {
  font-weight: 600 !important;
}

.fw700 {
  font-weight: 700 !important;
}

.fw800 {
  font-weight: 800 !important;
}

.fw900 {
  font-weight: 900 !important;
}

/* margin-top */

.mgt0 {
  margin-top: 0px !important;
}

.mgt4 {
  margin-top: 4px !important;
}

.mgt8 {
  margin-top: 8px !important;
}

.mgt12 {
  margin-top: 12px !important;
}

.mgt16 {
  margin-top: 16px !important;
}

.mgt20 {
  margin-top: 20px !important;
}

.mgt24 {
  margin-top: 24px !important;
}

.mgt28 {
  margin-top: 28px !important;
}

.mgt32 {
  margin-top: 32px !important;
}

.mgt36 {
  margin-top: 36px !important;
}

.mgt40 {
  margin-top: 40px !important;
}

.mgt44 {
  margin-top: 44px !important;
}

.mgt48 {
  margin-top: 48px !important;
}

.mgt52 {
  margin-top: 52px !important;
}

.mgt56 {
  margin-top: 56px !important;
}

.mgt60 {
  margin-top: 60px !important;
}

.mgt64 {
  margin-top: 64px !important;
}

.mgt68 {
  margin-top: 68px !important;
}

.mgt72 {
  margin-top: 72px !important;
}

.mgt76 {
  margin-top: 76px !important;
}

.mgt80 {
  margin-top: 80px !important;
}

.mgt84 {
  margin-top: 84px !important;
}

.mgt88 {
  margin-top: 88px !important;
}

.mgt92 {
  margin-top: 92px !important;
}

.mgt96 {
  margin-top: 96px !important;
}

.mgt100 {
  margin-top: 100px !important;
}

/* margin-bottom */
.mgb0 {
  margin-bottom: 0px !important;
}

.mgb4 {
  margin-bottom: 4px !important;
}

.mgb8 {
  margin-bottom: 8px !important;
}

.mgb10 {
  margin-bottom: 10px !important;
}

.mgb12 {
  margin-bottom: 12px !important;
}

.mgb16 {
  margin-bottom: 16px !important;
}

.mgb20 {
  margin-bottom: 20px !important;
}

.mgb24 {
  margin-bottom: 24px !important;
}

.mgb28 {
  margin-bottom: 28px !important;
}

.mgb32 {
  margin-bottom: 32px !important;
}

.mgb36 {
  margin-bottom: 36px !important;
}

.mgb40 {
  margin-bottom: 40px !important;
}

.mgb44 {
  margin-bottom: 44px !important;
}

.mgb48 {
  margin-bottom: 48px !important;
}

.mgb52 {
  margin-bottom: 52px !important;
}

.mgb56 {
  margin-bottom: 56px !important;
}

.mgb60 {
  margin-bottom: 60px !important;
}

.mgb64 {
  margin-bottom: 64px !important;
}

.mgb68 {
  margin-bottom: 68px !important;
}

.mgb72 {
  margin-bottom: 72px !important;
}

.mgb76 {
  margin-bottom: 76px !important;
}

.mgb80 {
  margin-bottom: 80px !important;
}

.mgb84 {
  margin-bottom: 84px !important;
}

.mgb88 {
  margin-bottom: 88px !important;
}

.mgb92 {
  margin-bottom: 92px !important;
}

.mgb96 {
  margin-bottom: 96px !important;
}

.mgb100 {
  margin-bottom: 100px !important;
}

/* margin-right */
.mgr4 {
  margin-right: 4px !important;
}

.mgr8 {
  margin-right: 8px !important;
}

.mgr12 {
  margin-right: 12px !important;
}

.mgr16 {
  margin-right: 16px !important;
}

.mgr20 {
  margin-right: 20px !important;
}

.mgr24 {
  margin-right: 24px !important;
}

.mgr28 {
  margin-right: 28px !important;
}

.mgr32 {
  margin-right: 32px !important;
}

.mgr36 {
  margin-right: 36px !important;
}

.mgr40 {
  margin-right: 40px !important;
}

.mgr44 {
  margin-right: 44px !important;
}

.mgr48 {
  margin-right: 48px !important;
}

.mgr52 {
  margin-right: 52px !important;
}

.mgr56 {
  margin-right: 56px !important;
}

.mgr60 {
  margin-right: 60px !important;
}

.mgr64 {
  margin-right: 64px !important;
}

.mgr68 {
  margin-right: 68px !important;
}

.mgr72 {
  margin-right: 72px !important;
}

.mgr76 {
  margin-right: 76px !important;
}

.mgr80 {
  margin-right: 80px !important;
}

.mgr84 {
  margin-right: 84px !important;
}

.mgr88 {
  margin-right: 88px !important;
}

.mgr92 {
  margin-right: 92px !important;
}

.mgr96 {
  margin-right: 96px !important;
}

.mgr100 {
  margin-right: 100px !important;
}

/* margin-left */
.mgl4 {
  margin-left: 4px !important;
}

.mgl8 {
  margin-left: 8px !important;
}

.mgl12 {
  margin-left: 12px !important;
}

.mgl16 {
  margin-left: 16px !important;
}

.mgl20 {
  margin-left: 20px !important;
}

.mgl24 {
  margin-left: 24px !important;
}

.mgl28 {
  margin-left: 28px !important;
}

.mgl32 {
  margin-left: 32px !important;
}

.mgl36 {
  margin-left: 36px !important;
}

.mgl40 {
  margin-left: 40px !important;
}

.mgl44 {
  margin-left: 44px !important;
}

.mgl48 {
  margin-left: 48px !important;
}

.mgl52 {
  margin-left: 52px !important;
}

.mgl56 {
  margin-left: 56px !important;
}

.mgl60 {
  margin-left: 60px !important;
}

.mgl64 {
  margin-left: 64px !important;
}

.mgl68 {
  margin-left: 68px !important;
}

.mgl72 {
  margin-left: 72px !important;
}

.mgl76 {
  margin-left: 76px !important;
}

.mgl80 {
  margin-left: 80px !important;
}

.mgl84 {
  margin-left: 84px !important;
}

.mgl88 {
  margin-left: 88px !important;
}

.mgl92 {
  margin-left: 92px !important;
}

.mgl96 {
  margin-left: 96px !important;
}

.mgl100 {
  margin-left: 100px !important;
}

.pd12 {
  padding: 12px !important;
}

/* padding-top */
.pdt0 {
  padding-top: 0 !important;
}

.pdt4 {
  padding-top: 4px !important;
}

.pdt8 {
  padding-top: 8px !important;
}

.pdt12 {
  padding-top: 12px !important;
}

.pdt16 {
  padding-top: 16px !important;
}

.pdt20 {
  padding-top: 20px !important;
}

.pdt24 {
  padding-top: 24px !important;
}

.pdt28 {
  padding-top: 28px !important;
}

.pdt32 {
  padding-top: 32px !important;
}

.pdt36 {
  padding-top: 36px !important;
}

.pdt40 {
  padding-top: 40px !important;
}

.pdt44 {
  padding-top: 44px !important;
}

.pdt48 {
  padding-top: 48px !important;
}

.pdt52 {
  padding-top: 52px !important;
}

.pdt56 {
  padding-top: 56px !important;
}

.pdt60 {
  padding-top: 60px !important;
}

.pdt64 {
  padding-top: 64px !important;
}

.pdt68 {
  padding-top: 68px !important;
}

.pdt72 {
  padding-top: 72px !important;
}

.pdt76 {
  padding-top: 76px !important;
}

.pdt80 {
  padding-top: 80px !important;
}

.pdt84 {
  padding-top: 84px !important;
}

.pdt88 {
  padding-top: 88px !important;
}

.pdt92 {
  padding-top: 92px !important;
}

.pdt96 {
  padding-top: 96px !important;
}

.pdt100 {
  padding-top: 100px !important;
}

/* padding-bottom */

.pdb0 {
  padding-bottom: 0px !important;
}

.pdb4 {
  padding-bottom: 4px !important;
}

.pdb8 {
  padding-bottom: 8px !important;
}

.pdb12 {
  padding-bottom: 12px !important;
}

.pdb16 {
  padding-bottom: 16px !important;
}

.pdb20 {
  padding-bottom: 20px !important;
}

.pdb24 {
  padding-bottom: 24px !important;
}

.pdb28 {
  padding-bottom: 28px !important;
}

.pdb32 {
  padding-bottom: 32px !important;
}

.pdb36 {
  padding-bottom: 36px !important;
}

.pdb40 {
  padding-bottom: 40px !important;
}

.pdb44 {
  padding-bottom: 44px !important;
}

.pdb48 {
  padding-bottom: 48px !important;
}

.pdb52 {
  padding-bottom: 52px !important;
}

.pdb56 {
  padding-bottom: 56px !important;
}

.pdb60 {
  padding-bottom: 60px !important;
}

.pdb64 {
  padding-bottom: 64px !important;
}

.pdb68 {
  padding-bottom: 68px !important;
}

.pdb72 {
  padding-bottom: 72px !important;
}

.pdb76 {
  padding-bottom: 76px !important;
}

.pdb80 {
  padding-bottom: 80px !important;
}

.pdb84 {
  padding-bottom: 84px !important;
}

.pdb88 {
  padding-bottom: 88px !important;
}

.pdb92 {
  padding-bottom: 92px !important;
}

.pdb96 {
  padding-bottom: 96px !important;
}

.pdb100 {
  padding-bottom: 100px !important;
}

/* padding-left */
.pdl4 {
  padding-left: 4px !important;
}

.pdl8 {
  padding-left: 8px !important;
}

.pdl12 {
  padding-left: 12px !important;
}

.pdl16 {
  padding-left: 16px !important;
}

.pdl20 {
  padding-left: 20px !important;
}

.pdl24 {
  padding-left: 24px !important;
}

.pdl28 {
  padding-left: 28px !important;
}

.pdl32 {
  padding-left: 32px !important;
}

.pdl36 {
  padding-left: 36px !important;
}

.pdl40 {
  padding-left: 40px !important;
}

.pdl44 {
  padding-left: 44px !important;
}

.pdl48 {
  padding-left: 48px !important;
}

.pdl52 {
  padding-left: 52px !important;
}

.pdl56 {
  padding-left: 56px !important;
}

.pdl60 {
  padding-left: 60px !important;
}

.pdl64 {
  padding-left: 64px !important;
}

.pdl68 {
  padding-left: 68px !important;
}

.pdl72 {
  padding-left: 72px !important;
}

.pdl76 {
  padding-left: 76px !important;
}

.pdl80 {
  padding-left: 80px !important;
}

.pdl84 {
  padding-left: 84px !important;
}

.pdl88 {
  padding-left: 88px !important;
}

.pdl92 {
  padding-left: 92px !important;
}

.pdl96 {
  padding-left: 96px !important;
}

.pdl100 {
  padding-left: 100px !important;
}

/* padding-right */
.pdr4 {
  padding-right: 4px !important;
}

.pdr8 {
  padding-right: 8px !important;
}

.pdr12 {
  padding-right: 12px !important;
}

.pdr16 {
  padding-right: 16px !important;
}

.pdr20 {
  padding-right: 20px !important;
}

.pdr24 {
  padding-right: 24px !important;
}

.pdr28 {
  padding-right: 28px !important;
}

.pdr32 {
  padding-right: 32px !important;
}

.pdr36 {
  padding-right: 36px !important;
}

.pdr40 {
  padding-right: 40px !important;
}

.pdr44 {
  padding-right: 44px !important;
}

.pdr48 {
  padding-right: 48px !important;
}

.pdr52 {
  padding-right: 52px !important;
}

.pdr56 {
  padding-right: 56px !important;
}

.pdr60 {
  padding-right: 60px !important;
}

.pdr64 {
  padding-right: 64px !important;
}

.pdr68 {
  padding-right: 68px !important;
}

.pdr72 {
  padding-right: 72px !important;
}

.pdr76 {
  padding-right: 76px !important;
}

.pdr80 {
  padding-right: 80px !important;
}

.pdr84 {
  padding-right: 84px !important;
}

.pdr88 {
  padding-right: 88px !important;
}

.pdr92 {
  padding-right: 92px !important;
}

.pdr96 {
  padding-right: 96px !important;
}

.pdr100 {
  padding-right: 100px !important;
}

.pd0 {
  padding: 0 !important;
}

.pd16 {
  padding: 16px !important;
}

/* font-size */
.fs14 {
  font-size: 14px !important;
}

.fs15 {
  font-size: 15px !important;
}

.fs16 {
  font-size: 16px !important;
}

.fs17 {
  font-size: 17px !important;
}

.fs18 {
  font-size: 18px !important;
}

.fs19 {
  font-size: 19px !important;
}

.fs20 {
  font-size: 20px !important;
}

.fs21 {
  font-size: 21px !important;
}

.fs22 {
  font-size: 22px !important;
}

.fs23 {
  font-size: 23px !important;
}

.fs24 {
  font-size: 24px !important;
}

.fs25 {
  font-size: 25px !important;
}

.fs26 {
  font-size: 26px !important;
}

.fs27 {
  font-size: 27px !important;
}

.fs28 {
  font-size: 28px !important;
}

.fs29 {
  font-size: 29px !important;
}

.fs30 {
  font-size: 30px !important;
}

.fs31 {
  font-size: 31px !important;
}

.fs32 {
  font-size: 32px !important;
}

.fs33 {
  background: var(--gray-300);
  font-size: 33px !important;
}

.fs34 {
  font-size: 34px !important;
}

.fs35 {
  font-size: 35px !important;
}

.fs36 {
  font-size: 36px !important;
}

/* width */
.width16 {
  width: 16px !important;
}

.width20 {
  width: 20px !important;
}

.width36 {
  width: 36px !important;
}

.width48 {
  min-width: 48px !important;
  width: 48px !important;
}

.width58 {
  min-width: 58px !important;
  width: 58px !important;
}

.width80 {
  min-width: 80px !important;
  width: 80px !important;
}

/* flex */
.flex-start {
  align-items: flex-start !important;
}

/* align */
.tal {
  text-align: left !important;
}

.tar {
  text-align: right !important;
}

.tac {
  text-align: center !important;
}