@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');
}

.f40w700 { font-family: 'pretendard_bold'; font-size: 40px; line-height: 1.5; }
.f36w700White { font-family: 'pretendard_bold'; font-size: 36px; color: white; line-height: 1.5; }
.f32w700White { font-family: 'pretendard_bold'; font-size: 32px; color: white; line-height: 1.5; }
.f24w700 { font-family: 'pretendard_bold'; font-size: 24px; line-height: 1.5; }
.f24w700White { font-family: 'pretendard_bold'; font-size: 24px; color: white; line-height: 1.5; }
.f24w600White { font-family: 'pretendard_sb'; font-size: 24px; color: white; line-height: 1.5; }
.f24w400White { font-family: 'pretendard_regular'; font-size: 24px; color: white; line-height: 1.5; }
.f22w500 { font-family: 'pretendard_medium'; font-size: 22px; line-height: 1.5; }
.f20w600 { font-family: 'pretendard_sb'; font-size: 20px; line-height: 1.5; }
.f20w700White { font-family: 'pretendard_bold'; font-size: 20px; color: white; line-height: 1.5; }
.f20w600White { font-family: 'pretendard_sb'; font-size: 20px; color: white; line-height: 1.5; }
.f20w400White { font-family: 'pretendard_regular'; font-size: 20px; color: white; line-height: 1.5; }
.f20w400Green { font-family: 'pretendard_regular'; font-size: 20px; color: #55ABA6; line-height: 1.5; }
.f20w400DG { font-family: 'pretendard_regular'; font-size: 20px; line-height: 1.5; color: #676767; }
.f18w700White { font-family: 'pretendard_bold'; font-size: 18px; color: white; line-height: 1.5; }
.f18w400White { font-family: 'pretendard_regular'; font-size: 18px; color: white; line-height: 1.5; }
.f18w400Green { font-family: 'pretendard_regular'; font-size: 18px; color: #55ABA6; line-height: 1.5; }
.f16w600 { font-family: 'pretendard_sb'; font-size: 16px; line-height: 1.5; }
.f16w700White { font-family: 'pretendard_bold'; font-size: 16px; color: white; line-height: 1.5; }
.f16w400 { font-family: 'pretendard_regular'; font-size: 16px; line-height: 1.5; }
.f16w400White { font-family: 'pretendard_regular'; font-size: 16px; color: white; line-height: 1.5; }
.f16w400WhiteO { font-family: 'pretendard_regular'; font-size: 16px; color: rgba(255, 255, 255, 0.5); line-height: 1.5; }
.f16w400DG { font-family: 'pretendard_regular'; font-size: 16px; line-height: 1.5; color: #676767; }
.f14w700 { font-family: 'pretendard_bold'; font-size: 14px; line-height: 1.5; }
.f14w600 { font-family: 'pretendard_sb'; font-size: 14px; line-height: 1.5; }
.f14w400 { font-family: 'pretendard_regular'; font-size: 14px; line-height: 1.5; }
.f14w700White { font-family: 'pretendard_bold'; font-size: 14px; color: white; line-height: 1.5; }
.f14w400White { font-family: 'pretendard_regular'; font-size: 14px; color: white; line-height: 1.5; }
.f14w400Red { font-family: 'pretendard_regular'; font-size: 14px; color: #FF5F5F; line-height: 1.5; }
.f12w400 { font-family: 'pretendard_regular'; font-size: 12px; line-height: 1.5; }
.f12w400White { font-family: 'pretendard_regular'; font-size: 12px; color: white; line-height: 1.5; }

html {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}

body {
  padding: 0;
  margin: 0;
  font-family: 'pretendard_regular';
  font-size: 14px;
  color: #36393E;
  background-image: url('/images/background/tmd_bg_main.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

ul {
  vertical-align: middle;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  vertical-align: middle;
  list-style: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

dialog {
  border: none;
  border-radius: 8px;
  background-color: #2A2A2A;
  padding: 0;
  box-sizing: border-box;
}

dialog::backdrop {
  background-color: rgba(135, 135, 135, 0.3);
}

dialog:focus-visible {
  outline: none;
}

/* 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;
}

input::placeholder,
textarea::placeholder {
    color: #B3B3B3;
}

input:focus,
textarea:focus {
    outline: none;
}

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

.back_join {
  width: 32px;
  height: 32px;
  float: left;
  background-image: url('/images/icon/back_icon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  margin-left: auto;
}

main {
  height: calc(100vh - 143px);
}

@media screen and (max-width: 1023px) {
  body {
    padding: 0;
    min-width: 768px;
  }
}