.gnb-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: fixed;
  height: fit-content;
  z-index: 3;
  transition: all 0.4s;
  top: 0;
  left: 0;
  background-color: transparent;
}
.gnb-close {
  height: 38px;
  cursor: pointer;
}

.navigator {
  display: flex;
  gap: 58px;
  position: relative;
}

.anchor {
  font-family: Pretendard;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
  color: #7e8794;
  text-decoration: none;
  cursor: pointer;
}

.subanchor {
  font-family: Pretendard;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: #7e8794;
  text-decoration: none;
}

.anchor:hover {
  color: #ffffff;
}

.subanchor:hover {
  color: #ffffff;
}

.--active {
  font-weight: 700;
  color: #ffffff;
}

.--highlighted {
  color: #ffffff;
}

.hamburger-button {
  cursor: pointer;
}

/*desktop only*/
@media (min-width: 1024px) {
  .gnb-container {
    width: calc(100vw - 60px - 59px);
    /* padding: 40px 55px 30px 70px; */
    padding: 33px 59px 33px 60px;
  }

  .gnb-logo {
    height: 50px;
  }

  #projects-menu {
    position: relative;
  }

  .dropdown {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    padding-top: 30px;
    left: -22px;
    white-space: nowrap;
    z-index: 1;
  }

  .project-subAnchor-container {
    display: flex;
    align-items: baseline;
  }

  .pointer {
    width: auto;
    height: 16px;
    object-fit: contain;
  }
}

.slideIn {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  box-shadow: rgb(238 243 246) -1px 0 0 0;
  background: white;
  z-index: 1;
}

.slideIn-contents {
  display: flex;
  flex-direction: column;
}

.anchor {
  display: flex;
  flex-direction: column;
  align-items: end;
  z-index: 1;
}

/*tablet only*/
@media (min-width: 461px) and (max-width: 1023px) {
  .gnb-container {
    width: calc(100vw - 50px - 50px);
    padding: 40px 50px 30px;
  }

  .gnb-logo {
    height: 40px;
  }

  .gnb-close {
    height: 24px;
  }

  .slideIn {
    padding: 40px 50px 0 150px;
    height: calc(100vh - 100px);
  }

  .slideIn-contents {
    padding-top: 50px;
    gap: 50px;
  }

  .anchor {
    font-size: 20px;
  }

  .subanchor {
    margin-top: 17px;
    font-size: 16px;
  }

  .--folded {
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
  }
}

/*mobile only*/
@media (max-width: 460px) {
  .gnb-container {
    width: calc(100vw - 30px - 30px);
    padding: 40px 30px 30px;
  }

  .gnb-logo {
    height: 30px;
  }

  .gnb-close {
    height: 24px;
  }

  .slideIn {
    padding: 40px 20px 0 120px;
    height: calc(100vh - 100px);
  }

  .slideIn-contents {
    padding-top: 50px;
    gap: 50px;
  }

  .anchor {
    font-size: 20px;
  }

  .subanchor {
    font-size: 16px;
    margin-top: 17px;
  }

  .--folded {
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
  }
}