@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

:root {
  --primary-mono-50-50: rgba(243, 244, 244, 0.5);
  --primary-mono-100: rgba(232, 232, 233, 1);
  --primary-mono-500: rgba(138, 141, 143, 1);
  --primary-mono-800: rgba(55, 56, 57, 1);
  --primary-mono-900: rgba(28, 28, 29, 1);

  --primary-mint-50-50: rgba(229, 247, 247, 0.5);
  --primary-mint-500: rgba(0, 175, 173, 1);
}

html {
  padding: 0;
}

body {
  font-family: 'Pretendard';
  font-size: 16px;
  margin: 0;
  padding: 0;
}

h1,
h3,
h4,
ul,
ol,
p {
  margin: 0;
}

.wrap {
  width: 100%;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  gap: 80px 0;
}

h1 {
  font-family: 'Paperlogy';
  font-size: 3.25rem;
  font-weight: 600;
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 64px 0;
}

.desc {
  background: var(--primary-mono-50-50);
  padding: 48px;
  color: var(--primary-mono-800);
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
}

.item {
  display: flex;
  flex-direction: column;
  gap: 12px 0;
}

.item > h3 {
  color: var(--primary-mono-900);
  font-size: 1.25rem;
  font-weight: 600;
}

.item p,
.item ul li,
.item ol li span {
  color: var(--primary-mono-800);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.item p.bold {
  font-weight: 600;
}

.item ul,
.item ol {
  padding-inline-start: 1.2rem;
}

.item ol {
  list-style-type: decimal;
}

.item ul li {
  padding-left: 0.4rem;
}

.item ul li::marker {
  content: "\00B7 ";
  font-size: 1.2em;
}

.item ol li {
  color: var(--primary-mono-900);
  font-weight: 400;
  line-height: 1.5;
}

.item ol li.bold {
  font-weight: 600;
  margin-bottom: 1rem;
}

.item ol.attached li.bold {
  font-weight: 600;
  margin-bottom: 0;
}

.item ul span.bold {
  font-weight: 600;
  margin-right: 0.25rem;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 8px 0;
  margin-bottom: 12px;
}

.section > h4 {
  color: var(--primary-mono-900);
  font-size: 1rem;
  font-weight: 600;
}

.table {
  display: grid;
  grid-template-columns: auto minmax(auto, 2fr) minmax(auto, 1fr);
  grid-auto-rows: minmax(68px, auto);
}

.table.column_4 {
  grid-template-columns: minmax(auto, 1fr) repeat(2, 2fr) minmax(auto, 1fr);
}

.table > .head,
.table > .row {
  display: contents;
}

.table > .head > .cell {
  padding: 10px;
  border-style: solid;
  border-width: 3px 1px 1px 0;
  border-top-color: var(--primary-mint-500);
  border-bottom-color: var(--primary-mono-100);
  border-right-color: var(--primary-mono-100);
  background: var(--primary-mint-50-50);
  color: var(--primary-mint-500);
  font-size: 1.125rem;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.table > .row > .cell {
  padding: 32px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: solid;
  border-width: 0 1px 1px 0;
  border-bottom-color: var(--primary-mono-100);
  border-right-color: var(--primary-mono-100);
  color: var(--primary-mono-800);
  font-size: 1rem;
  font-weight: 400;
}

.table > .head > .cell:last-child,
.table > .row > .cell:last-child {
  border-right-width: 0;
}

ul > li > .bold {
  color: var(--primary-mono-900);
  font-weight: 600;
}

.sub {
  color: var(--primary-mono-800);
  font-size: 1rem;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

p.caption {
  color: var(--primary-mono-500);
}

.desc > .campus {
  display: flex;
  gap: 0 24px;
  height: 56px;
  align-items: stretch;
}

.campus > label {
  color: black;
  font-size: 1.125rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.campus select {
  padding: 0 20px;
  display: inline-flex;
  width: 260px;
  appearance: none;
  -webkit-appearance: none;
  font-size: 1rem;
  font-weight: 400;
  color: var(--primary-mono-900);
  background: white;
  border: 1px solid var(--primary-mono-100);
}

.campus > .select {
  position: relative;
  display: flex;
}

.campus > .select::after {
  content: "";
  position: absolute;
  background-image: url(https://kr.object.ncloudstorage.com/dlab-storage/web/policy/assets/caret_down.svg);
  top: 35%;
  right: 20px;
  z-index: 2;
  width: 14px;
  height: 14px;
}

.divider {
  width: 100%;
  height: 1px;
  border-style: solid;
  border-width: 0 0 1px 0;
  border-bottom-color: var(--primary-mono-100);
  margin: 24px 0;
}

.count {
  display: none;
}

.note {
  display: none;
  flex-direction: column;
}

.display {
  display: flex;
}

.note > .date {
  color: var(--primary-mono-500);
  line-height: 1.5;
}

/* below tablet */
@media (max-width: 1023px) {
  .wrap {
    gap: 40px 0;
  }

  h1 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.75rem;
  }

  .desc {
    padding: 24px;
    font-size: 0.875rem;
  }

  .item {
    gap: 8px 0;
  }

  .item > h3 {
    font-size: 1.125rem;
  }

  .item p,
  .item ul li,
  .item ol li,
  .item ol li span {
    font-size: 0.875rem;
  }

  .table {
    gap: 4px 0;
  }

  .table > h4 {
    font-size: 0.875rem;
  }

  .table > .head {
    display: contents;
  }

  .table > .head > .cell {
    font-size: 1rem;
  }

  .table > .row > .cell {
    font-size: 0.875rem;
    padding: 16px;
  }

  .sub {
    font-size: 0.875rem;
  }

  .note {
    font-size: 0.875rem;
  }

  .desc > .campus {
    height: inherit;
    flex-direction: column;
  }

  .campus > label {
    font-size: 1rem;
  }

  .campus select {
    width: 100%;
    height: 48px;
    font-size: 0.875rem;
  }
}