/**
 * section
 * -
 * artist
 */

#artist {
  position: inherit;
}

#artist .section-body {
  padding-top: 11rem;
}

/* 961px - 1500px */
@media (max-width: 1500px) {
  #artist .section-body {
  }
}

/* 681px - 960px */
@media (max-width: 960px) {
  #artist .section-body {
    padding-top: 11.4vw;
  }
}

/* - 680px */
@media (max-width: 680px) {
  #artist .section-body {
    padding-top: 23vw;
  }
}

/**
 * category
 */
.artist-category {
  max-width: 1220px;
  margin: 9rem auto 0;
  padding: 0 4rem;
}
.artist-category span {
  position: relative;
  display: inline-block;
  padding-bottom: 1rem;
  font-size: 1.6rem;
}
.artist-category span:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 5rem;
  height: 1px;
  background-color: #000;
}

/* 961px - 1220px */
@media (max-width: 1220px) {
  .artist-category {
    margin: 7.37vw auto 0;
  }
  .artist-category span {
    padding-bottom: 0.81vw;
    font-size: 1.31vw;
  }
  .artist-category span:before {
    width: 4.09vw;
  }
}

/* 681px - 960px */
@media (max-width: 960px) {
  .artist-category {
    margin: 9.37vw auto 0;
    padding: 0 4.16vw;
  }
  .artist-category span {
    padding-bottom: 1.04vw;
    font-size: 1.66vw;
  }
  .artist-category span:before {
    width: 5.2vw;
  }
}

/* - 680px */
@media (max-width: 680px) {
  .artist-category {
    margin-top: 3vw;
    padding: 0 5.12vw 1.47vw 12.82vw;
  }
  .artist-category span {
    font-size: 2.56vw;
  }
}

/**
 * header
 */
.artist-header {
  max-width: 1220px;
  margin: 3rem auto 0;
  padding: 0 4rem;
}
.artist-title {
  margin-top: -0.5rem;
  font-size: 4.2rem;
  line-height: 1.55;
}
.artist-tag {
  margin-top: -0.5rem;
  font-size: 1.8rem;
  line-height: 1.55;
}

/* 961px - 1220px */
@media (max-width: 1220px) {
  .artist-header {
    margin: 2.45vw auto 0;
    /* padding: 0 3.27vw; */
  }
  .artist-title {
    margin-top: -0.4vw;
    font-size: 3.44vw;
  }
  .artist-tag {
    margin-top: -0.4vw;
    font-size: 1.47vw;
  }
}

/* 681px - 960px */
@media (max-width: 960px) {
  .artist-header {
    margin: 3.12vw auto 0;
    padding: 0 4.16vw;
  }
  .artist-title {
    margin-top: -0.52vw;
    font-size: 4.37vw;
  }
  .artist-tag {
    margin-top: -0.52vw;
    font-size: 1.87vw;
  }
}

/* - 680px */
@media (max-width: 680px) {
  .artist-header {
    margin: 2vw auto 0;
    padding: 0 5.12vw 0 12.82vw;
  }
  .artist-title {
    margin-top: -0.6vw;
    font-size: 6.15vw;
  }
  .artist-tag {
    margin-top: -0.6vw;
    font-size: 3.07vw;
  }
}

/**
 * content
 */
.artist-content {
  margin-top: 8.5rem;
}

/* 961px - 1500px */
@media (max-width: 1500px) {
  .artist-content {
    margin-top: 5.66vw;
  }
}

/* 681px - 960px */
@media (max-width: 960px) {
  .artist-content {
    margin-top: 8.85vw;
  }
}

/* - 680px */
@media (max-width: 680px) {
  .artist-content {
    margin-top: 10vw;
  }
}

/**
 * overview
 */
.artist-overview {
  display: flex;
  gap: 10rem;
  justify-content: space-between;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  margin-top: 12rem;
  padding: 0 4rem;
}
.artist-profile {
  width: 74rem;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.04em;
}

/* 961px - 1220px */
@media (max-width: 1220px) {
  .artist-overview {
    gap: 0.81vw;
    margin-top: 9.83vw;
    padding: 0 3.27vw;
  }
  .artist-profile {
    width: 60.65vw;
    font-size: 1.31vw;
  }
}

/* 681px - 960px */
@media (max-width: 960px) {
  .artist-overview {
    gap: 1.04vw;
    margin-top: 12.5vw;
  }
  .artist-profile {
    width: 65.08vw;
    font-size: 1.66vw;
  }
}

/* - 680px */
@media (max-width: 680px) {
  .artist-overview {
    flex-direction: column;
    gap: 12.8vw;
    justify-content: flex-start;
    margin-top: 12.8vw;
    padding: 0 7.69vw;
  }
  .artist-profile {
    width: 100%;
    font-size: 3.07vw;
  }
}

/**
 * sns
 */
.artist-sns {
}
.artist-sns__label {
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.04em;
}
.artist-sns__list {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.3rem;
  margin-left: -0.4rem;
}
.artist-sns__item {
}
.artist-sns__item a {
  display: block;
  width: 4rem;
  height: 4rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.sns_instagram {
  background-image: url(../../images/general/icon_instagram.svg);
}
.sns_tiktok {
  margin-left: 0.1rem;
  background-image: url(../../images/general/icon_tiktok.svg);
}
.sns_twitter {
  margin-left: 0.4rem;
  background-image: url(../../images/general/icon_twitter.svg);
}
.sns_facebook {
  background-image: url(../../images/general/icon_facebook.svg);
}

/* 961px - 1220px */
@media (max-width: 1220px) {
  .artist-sns__label {
    font-size: 1.47vw;
  }
  .artist-sns__list {
    gap: 0.16vw;
    margin-top: 0.26vw;
    margin-left: -0.32vw;
  }
  .artist-sns__item a {
    width: 3.33vw;
    height: 3.33vw;
  }
  .sns_tiktok {
    margin-left: 0.08vw;
  }
  .sns_twitter {
    margin-left: 0.32vw;
  }
}

/* 681px - 960px */
@media (max-width: 960px) {
  .artist-sns__label {
    font-size: 1.87vw;
  }
  .artist-sns__list {
    gap: 0.21vw;
    margin-top: 0.31vw;
    margin-left: -0.42vw;
  }
  .artist-sns__item a {
    width: 4.16vw;
    height: 4.16vw;
  }
  .sns_tiktok {
    margin-left: 0.1vw;
  }
  .sns_twitter {
    margin-left: 0.42vw;
  }
}

/* - 680px */
@media (max-width: 680px) {
  .artist-sns__label {
    font-size: 2.56vw;
    font-weight: bold;
    letter-spacing: 0.04em;
  }
  .artist-sns__list {
    display: flex;
    gap: 0.4vw;
    margin-top: 0.3vw;
    margin-left: -0.4vw;
  }
  .artist-sns__item {
  }
  .artist-sns__item a {
    display: block;
    width: 5.12vw;
    height: 5.12vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

/**
 * member
 */
.artist-member {
  display: flex;
  gap: 2rem;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  margin-top: 12rem;
  padding: 0 4rem;
}
.artist-member__item {
  width: 25%;
}
.artist-member__image {
  width: 100%;
  aspect-ratio: 270 / 338;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.artist-seoi .artist-member__image {
  background-image: url(../../images/artist/h1-key/member_seoi.jpg);
}
.artist-riina .artist-member__image {
  background-image: url(../../images/artist/h1-key/member_riina.jpg);
}
.artist-hwiseo .artist-member__image {
  background-image: url(../../images/artist/h1-key/member_hwiseo.jpg);
}
.artist-yel .artist-member__image {
  background-image: url(../../images/artist/h1-key/member_yel.jpg);
}
.artist-member__context {
  margin-top: 1.5rem;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.04em;
}
.artist-member__context dt {
  font-weight: bold;
}
.artist-member__context dd {
}

/* 961px - 1220px */
@media (max-width: 1220px) {
  .artist-member__context {
    margin-top: 1.22vw;
    font-size: 1.31vw;
  }
}

/* 681px - 960px */
@media (max-width: 960px) {
  .artist-member__context {
    margin-top: 1.56vw;
    font-size: 1.66vw;
  }
}

/* - 680px */
@media (max-width: 680px) {
  .artist-member {
    flex-direction: column;
    gap: 10vw;
    margin-top: 10vw;
    padding: 0 17.69vw;
  }
  .artist-member__item {
    width: 100%;
  }
  .artist-member__context {
    margin-top: 4vw;
    font-size: 3.46vw;
    line-height: 1.35;
    letter-spacing: 0.04em;
  }
}

/**
 * subimage
 */
.artist-subimage {
  display: flex;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  margin-top: 12rem;
  padding: 0 4rem;
}
.artist-subimage__image {
  width: 100%;
  aspect-ratio: 1140 / 770;
  background-image: url(../../images/artist/h1-key/sub.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* 961px - 1500px */
@media (max-width: 1500px) {
}

/* 681px - 960px */
@media (max-width: 960px) {
}

/* - 680px */
@media (max-width: 680px) {
  .artist-subimage {
    margin-top: 12.8vw;
    padding: 0;
  }
}