@font-face {
  font-family: 'pretendard_black';
  font-weight: 900;
  src: url('/fonts/Pretendard-Black.ttf') format('truetype');
}

@font-face {
  font-family: 'pretendard_eb';
  font-weight: 800;
  src: url('/fonts/Pretendard-ExtraBold.ttf') format('truetype');
}

@font-face {
  font-family: 'pretendard_bold';
  font-weight: 700;
  src: url('/fonts/Pretendard-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'pretendard_sb';
  font-weight: 600;
  src: url('/fonts/Pretendard-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'pretendard_medium';
  font-weight: 500;
  src: url('/fonts/Pretendard-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'pretendard_regular';
  font-weight: 400;
  src: url('/fonts/Pretendard-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'pretendard_light';
  font-weight: 300;
  src: url('/fonts/Pretendard-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'pretendard_el';
  font-weight: 200;
  src: url('/fonts/Pretendard-ExtraLight.ttf') format('truetype');
}

@font-face {
  font-family: 'pretendard_thin';
  font-weight: 100;
  src: url('/fonts/Pretendard-Thin.ttf') format('truetype');
}

@font-face {
  font-family: 'gmarket_bold';
  font-weight: 700;
  src: url('/fonts/GmarketSansBold.otf') format('opentype');
}

@font-face {
  font-family: 'gmarket_medium';
  font-weight: 500;
  src: url('/fonts/GmarketSansMedium.otf') format('opentype');
}

@font-face {
  font-family: 'gmarket_light';
  font-weight: 300;
  src: url('/fonts/GmarketSansLight.otf') format('opentype');
}

.f68w700 { font-family: 'pretendard_bold'; font-size: 68px; color: #1D1D1D; }
.f64w700White { font-family: 'pretendard_bold'; font-size: 64px; color: white; }
.f64w400 { font-family: 'pretendard_regular'; font-size: 64px; color: #1D1D1D; }
.f48w700 { font-family: 'pretendard_bold'; font-size: 48px; color: #1D1D1D; }
.f48w700White { font-family: 'pretendard_bold'; font-size: 48px; color: white; }
.f40w700 { font-family: 'pretendard_bold'; font-size: 40px; color: #1D1D1D; }
.f36w700 { font-family: 'pretendard_bold'; font-size: 36px; color: #1D1D1D; }
.f32w700 { font-family: 'pretendard_bold'; font-size: 32px; color: #1D1D1D; }
.f28w700Blue { font-family: 'pretendard_bold'; font-size: 28px; color: #293989; }
.f24w700 { font-family: 'pretendard_bold'; font-size: 24px; line-height: 1.5; color: #1D1D1D; }
.f24w400 { font-family: 'pretendard_regular'; font-size: 24px; color: #1D1D1D; }
.f24w400White { font-family: 'pretendard_regular'; font-size: 24px; color: white; }
.f22w700 { font-family: 'pretendard_bold'; font-size: 22px; color: #1D1D1D; }
.f20w700 { font-family: 'pretendard_bold'; font-size: 20px; color: #1D1D1D; }
.f20w600 { font-family: 'pretendard_sb'; font-size: 20px; color: #1D1D1D; }
.f16w700 { font-family: 'pretendard_bold'; font-size: 16px; line-height: 1.5; color: #1D1D1D; }
.f15w700 { font-family: 'pretendard_bold'; font-size: 15px; color: #1D1D1D; }
.f14w700 { font-family: 'pretendard_bold'; font-size: 14px; color: #1D1D1D; }
.f12w700 { font-family: 'pretendard_bold'; font-size: 12px; color: #1D1D1D; }
.f20w400 { font-family: 'pretendard_regular'; font-size: 20px; color: #1D1D1D; }
.f16w400 { font-family: 'pretendard_regular'; font-size: 16px; color: #1D1D1D; line-height: 1.5; }
.f14w700Grey { font-family: 'pretendard_bold'; font-size: 14px; color: #A2A4B0; }
.f14w500 { font-family: 'pretendard_medium'; font-size: 14px; }
.f14w400 { font-family: 'pretendard_regular'; font-size: 14px; color: #1D1D1D; }
.f12w400 { font-family: 'pretendard_regular'; font-size: 12px; color: #1D1D1D; }

.fg40w700White { font-family: 'gmarket_bold'; font-size: 40px; color: white; line-height: 1.4; }
.fg40w500White { font-family: 'gmarket_medium'; font-size: 40px; color: white; line-height: 1.4; }
.fg32w700White { font-family: 'gmarket_bold'; font-size: 32px; color: white; line-height: 1.4; }
.fg32w500White { font-family: 'gmarket_medium'; font-size: 32px; color: white; line-height: 1.4; }

input:focus {
  border-color: #293989;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

dialog {
  border: none !important;
  padding: 20px;
  box-sizing: border-box;
}

dialog:focus-visible {
  outline: none;
}

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

dialog hr {
  color: grey;
  margin: 0;
}

dialog p {
  margin: 8px 0;
}

dialog table {
  margin-left: 16px;
}

dialog table th {
  background-color: #f2f2f2;
}

dialog table,
dialog table th,
dialog table td {
  border: 1px solid black;
  border-collapse: collapse;
}

dialog table td {
  text-align: center;
  padding: 4px;
  box-sizing: border-box;
}

.jang {
  text-align: center;
  font-size: 15px;
  font-family: 'pretendard_bold';
  margin-top: 24px;
}

.jo {
  font-size: 15px;
  font-family: 'pretendard_bold';
}

.step1 {
  margin-left: 16px;
}

.step2 {
  margin-left: 32px;
}

.step3 {
  margin-left: 48px;
}

#dlg_use_term, #dlg_private_term,
#dlg_private_service, #dlg_private_join {
  width: 1000px;
}

.use_term, .private_term {
  cursor: pointer;
}

.close_join {
  width: 24px;
  height: 24px;
  background-image: url('/images/x_icon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  margin-left: auto;
}

#loading {
  width: 100vw;
  height: 100vh;
  background-color: black;
  opacity: 0.4;
  position: relative;
}

#loading > img {
  position: absolute;
  left: calc(50% - 32px);
  top: calc(50% - 32px);
}