.w-njobcrew-page {
  overflow-x: hidden;
}

.wn-intro {
  border-top: 0;
  border-bottom: 0;
}

.wn-hero {
  position: relative;
  height: 810px;
  overflow: hidden;
  background: var(--semantic-black, #000000);
}

.wn-hero__title,
.wn-hero__description {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: 1280px;
  margin: 0;
  text-align: center;
  transform: translateX(-50%);
}

.wn-hero__title {
  top: 90px;
  color: var(--neutral-tx5-white, #ffffff);
  font-size: 84px;
  font-weight: 700;
  line-height: 88px;
}

.wn-hero__description {
  top: 552px;
  color: var(--neutral-tx3-sub, #949494);
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.wn-hero__collage {
  --collage-scale: 1;
  position: absolute;
  z-index: 1;
  top: 243px;
  left: 50%;
  width: 1280px;
  height: 1280px;
  transform: translateX(-50%) scale(var(--collage-scale));
  transform-origin: top center;
}

.wn-hero__circle {
  position: absolute;
  top: 162px;
  left: 162px;
  width: 956px;
  height: 956px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  box-sizing: border-box;
}

.wn-hero__photo {
  --angle: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 244px;
  height: 392px;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-444px);
}

.wn-hero__photo--1 {
  --angle: 0deg;
}
.wn-hero__photo--2 {
  --angle: 30deg;
}
.wn-hero__photo--3 {
  --angle: 60deg;
}
.wn-hero__photo--4 {
  --angle: 90deg;
}
.wn-hero__photo--5 {
  --angle: 120deg;
}
.wn-hero__photo--6 {
  --angle: 150deg;
}
.wn-hero__photo--7 {
  --angle: 180deg;
}
.wn-hero__photo--8 {
  --angle: 210deg;
}
.wn-hero__photo--9 {
  --angle: 240deg;
}
.wn-hero__photo--10 {
  --angle: 270deg;
}
.wn-hero__photo--11 {
  --angle: 300deg;
}
.wn-hero__photo--12 {
  --angle: 330deg;
}

.wn-hero__scroll {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  left: 50%;
  display: flex;
  width: 67px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--neutral-tx5-white, #ffffff);
  text-decoration: none;
  transform: translateX(-50%);
}

.wn-hero__scroll-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}

.wn-hero__scroll-text--touch {
  display: none;
}

.wn-hero__scroll-icon {
  display: flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
}

.wn-hero__scroll-icon img {
  width: 10px;
}

@media (max-width: 1279px) {
  .wn-hero {
    height: 56.25vw;
  }

  .wn-hero__title,
  .wn-hero__description {
    width: 91.5594vw;
  }

  .wn-hero__title {
    top: 5.266vw;
  }

  .wn-hero__description {
    top: 39.485vw;
    font-size: 1.2876vw;
    line-height: 1.7167vw;
  }

  .wn-hero__collage {
    --collage-scale: 0.732475;
    top: 17.382vw;
  }
}

@media (max-width: 1023px) {
  .wn-hero {
    height: 444.979px;
  }

  .wn-hero__title,
  .wn-hero__description {
    width: 703.176px;
  }

  .wn-hero__title {
    top: 46.192px;
    font-size: 40px;
    line-height: 54px;
  }

  .wn-hero__description {
    top: 303.246px;
    font-size: 9.888px;
    line-height: 13.185px;
  }

  .wn-hero__collage {
    --collage-scale: 0.549356;
    top: 133.495px;
  }

  .wn-hero__scroll {
    bottom: 9.79px;
    width: 40px;
    gap: 5.97px;
  }

  .wn-hero__scroll-text {
    font-size: 7.164px;
    line-height: 9.552px;
  }

  .wn-hero__scroll-text--pc {
    display: none;
  }

  .wn-hero__scroll-text--touch {
    display: block;
  }

  .wn-hero__scroll-icon {
    width: 23.881px;
    height: 23.881px;
    border-width: 0.689px;
  }

  .wn-hero__scroll-icon img {
    width: 4.592px;
  }
}