/* 섹션 공통 */
html {
  scroll-behavior: smooth;
}

/* base.css 에서 선언된 overflow-x 때문에 스크롤중 stuck 걸림 */
/* 모든 요소가 표시될땐 문제 안되는데 현재 몇몇 섹션만 오픈시 문제되어 아래와 같이 오버라이드 */
.wrapper {
  overflow-x: hidden;
}
.popup-bg {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(22, 22, 22, 0.95);
  z-index: 20;
  opacity: 0;
}

.jpn .txt-section .desc *,
.chn .txt-section .desc * {
  white-space: normal !important;
}
/* 
    Mobile First
*/
.yj-ggum .album-detail {
  background: #000;
  overflow: hidden;
}

.album-detail > * {
  max-width: unset;
}

.txt-section {
  display: block;
  position: relative;
  width: 100%;
}

.txt-section i,
.txt-section i * {
  font-style: italic;
}

.txt-section .bold,
.txt-section .bold * {
  font-family: "Camber-SB";
  letter-spacing: -0.01em;
}

.txt-section .desc,
.txt-section .desc * {
  font-family: "NotoSansCJKkr-R";
}

.txt-section .desc b,
.txt-section .desc b * {
  font-family: "NotoSansCJKkr-M";
}

.txt-section .title,
.txt-section .title * {
  font-family: "MVB-SolanoGothicMVB-B", "NotoSansCJKkr";
}

.jpn .txt-section .desc *,
.chn .txt-section .desc * {
  white-space: normal !important;
}

.txt-section > .con {
  width: 100%;
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 5.09vw;
}
.album-detail {
  padding-bottom: 0;
}

/* Cover */
.txt-section-cover {
}
.txt-section-cover .con {
  background: url(../../../../images/txt/discography/yeonjun/yeonjuns_mixtape_ggum/ui/GGUM.png)
    no-repeat;
  background-size: contain;
}
.txt-section-cover > .con > .intro > .cover > .cover-img {
  display: block;
  width: 50%;
  margin: auto;
  padding-top: 27vw;
}
.txt-section-cover > .con > .intro > .cover > .cover-img > img {
  width: 100%;
}
.txt-section-cover > .con .album-description-text {
  max-width: 70%;
  margin: 1vw auto 0;
}
.txt-section-cover > .con .album-description-text p {
  color: #fff;
  text-align: center;
  font-family: "NotoSansCJKKr-R", sans-serif;
}

/* video style */
.txt-section-video {
  position: relative;
  margin-top: 5%;
}
.txt-section-video .con {
  position: relative;
  padding-bottom: 5vw;
}
.txt-section-video::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 275%;
  top: 30%;
  left: 0;
  background: url(../../../../images/txt/discography/yeonjun/yeonjuns_mixtape_ggum/ui/Foil_2_1.png)
    no-repeat;
  background-size: cover;
  background-position: bottom;
}

.txt-section-video .title,
.txt-section-photo .title {
  position: relative;
  top: 35px;
  width: 260px;
  margin: auto;
  z-index: 5;
}
.txt-section-video .title {
  top: 10px;
}
.txt-section-video .title img,
.txt-section-photo .title img {
  width: 100%;
}

.yj-ggum .album-detail .bottom.rows ul::after {
  content: none;
}
.yj-ggum .album-detail .bottom ul li .contents-sub {
  font-family: "NotoSansCJKKr-R";
  font-size: 20px;
  color: #fff;
  text-transform: unset;
}

.yj-ggum .album-detail .bottom ul li .contents-sub:hover {
  color: #f7bbd4;
}

.yj-ggum .album-detail .bottom ul li.active .contents-sub {
  color: #f7bbd4;
}

.txt-section-photo {
  padding-bottom: 18vw;
}

/* S : concept photo swiper */
.yj-ggum .album-detail .concept-photo .swiper-wrap {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.yj-ggum .album-detail .concept-photo .swiper-wrap.on {
  height: auto;
  overflow: visible;
  visibility: visible;
}

.yj-ggum .album-detail .concept-photo .photo-swiper {
  position: relative;
  box-sizing: content-box;
  /* width: 75vw; */
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 6.25vw;
}

.yj-ggum .album-detail .concept-photo .photo-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50.333vw;
}

.yj-ggum .album-detail .concept-photo .photo-swiper .swiper-slide.vertical img {
  object-fit: contain;
}

.yj-ggum .album-detail .concept-photo .photo-swiper-text-box .pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0 0.78125vw;
}

.yj-ggum .album-detail .concept-photo .photo-swiper-text-box .pagination .item {
  width: 1.8229167vw;
  flex: 0 0 1.8229167vw;
  cursor: pointer;
  opacity: 0.5;
}

.yj-ggum
  .album-detail
  .concept-photo
  .photo-swiper-text-box
  .pagination
  .item.on {
  opacity: 1;
}

.yj-ggum .album-detail .concept-photo .photo-swiper img {
  cursor: pointer;
  max-width: 100%;
  max-height: 100%;
}

.yj-ggum .album-detail .concept-photo .photo-swiper .btn-photo-prev,
.yj-ggum .album-detail .concept-photo .photo-swiper .btn-photo-next {
  display: block;
  width: max(1.563vw, 1.1875vw);
  height: max(2.563vw, 2.1875vw);
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.yj-ggum .album-detail .concept-photo .photo-swiper .btn-photo-prev {
  background: url(../../../../images/txt/discography/yeonjun/yeonjuns_mixtape_ggum/ui/arrow-prev.png)
    no-repeat center/100%;
  left: 0;
}

.yj-ggum .album-detail .concept-photo .photo-swiper .btn-photo-next {
  background: url(../../../../images/txt/discography/yeonjun/yeonjuns_mixtape_ggum/ui/arrow-next.png)
    no-repeat center/100%;
  right: 0;
}

/* E : concept photo swiper */

/* S : concept photo popup */
.yj-ggum .album-detail .concept-photo {
  /* max-width: 62.5vw; */
  margin: 0 auto;
}

.yj-ggum .album-detail .concept-photo .photo-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(22, 22, 22, 0.95);
  z-index: 1001;
  align-items: center;
  justify-content: center;
}

.yj-ggum .album-detail .concept-photo .photo-popup.on {
  display: flex;
}

.yj-ggum .album-detail .concept-photo .photo-popup .picture {
  display: none;
  width: 900px;
  max-width: 90%;
  margin: auto;
}

.yj-ggum .album-detail .concept-photo .photo-popup .picture img {
  /* max-height: 75vh; */
  width: 100%;
}

.yj-ggum .album-detail .concept-photo .photo-popup .vertical .picture {
  max-width: 420px;
}

.yj-ggum .album-detail .concept-photo .photo-popup .picture.on {
  display: block;
}

.yj-ggum .album-detail .concept-photo .photo-popup .btn-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0 10px;
  width: 900px;
  max-width: 90%;
  margin: 0 auto 16px;
}

.yj-ggum .album-detail .concept-photo .photo-popup .btn-download,
.yj-ggum .album-detail .concept-photo .photo-popup .btn-close-popup {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
}

.yj-ggum .album-detail .concept-photo .photo-popup .btn-download {
  background: url(./../../../../images/btn_down_pop.png) center/100% no-repeat;
}

.yj-ggum .album-detail .concept-photo .photo-popup .btn-close-popup {
  background: url(./../../../../images/btn_close_pop.png) center/100% no-repeat;
}

.yj-ggum .album-detail .concept-photo .photo-popup .photo-popup-swiper {
  width: 100%;
  max-width: 1080px;
}

.yj-ggum .album-detail .concept-photo .photo-popup-swiper .swiper-wrap {
  position: relative;
}

.yj-ggum
  .album-detail
  .concept-photo
  .photo-popup
  .photo-popup-swiper
  .picture {
  display: block;
}

.yj-ggum .album-detail .concept-photo .photo-popup-swiper .btn-photo-popup-prev,
.yj-ggum
  .album-detail
  .concept-photo
  .photo-popup-swiper
  .btn-photo-popup-next {
  display: block;
  width: max(1.563vw, 1.1875vw);
  height: max(2.563vw, 2.1875vw);
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 99;
}

.yj-ggum
  .album-detail
  .concept-photo
  .photo-popup-swiper
  .btn-photo-popup-prev {
  background: url(../../../../images/txt/discography/yeonjun/yeonjuns_mixtape_ggum/ui/arrow-prev.png)
    no-repeat center/100%;
  left: 0;
}

.yj-ggum
  .album-detail
  .concept-photo
  .photo-popup-swiper
  .btn-photo-popup-next {
  background: url(../../../../images/txt/discography/yeonjun/yeonjuns_mixtape_ggum/ui/arrow-next.png)
    no-repeat center/100%;
  right: 0;
}

/* E : concept photo popup */

.bottom-symbol {
  padding-bottom: 200px;
  
  .con {
    .figure {
      max-width: 15.625vw;
      margin: auto;

      img {
        width: 100%;
      }
    }
    .text {
      max-width: 12.5vw;
      margin: auto;

      img {
        width: 100%;
      }
    }
  }
}

.yj-ggum .album-detail .credit img {
  max-width: 100%;
}

.yj-ggum .album-detail .credit .pc {
  display: block;
}

.yj-ggum .album-detail .credit .mo {
  display: none;
}

/* mobile */
@media screen and (max-width: 768px) {
  .txt-section-cover > .con > .intro > .cover > .cover-img {
    width: 90%;
  }
  .txt-section-video .title,
  .txt-section-photo .title {
    top: 7vw;
    max-width: 150px;
    min-width: 85px;
    width: 20vw;
  }
  .album-detail .album-video {
    margin-top: 7vw;
    padding: 0;
  }
  .txt-section-video::before {
    height: 195%;
    top: 30%;
  }
  .yj-ggum .album-detail .slide-wrap > ul > li .contents-sub {
    font-family: "NotoSansCJKKr-R";
    color: #f7bbd4;
    font-weight: 400;
    text-shadow: none;
    text-transform: unset;
  }

  /* S : concept photo swiper */
  .yj-ggum .album-detail .concept-photo {
    max-width: 100%;
  }

  .yj-ggum .album-detail .concept-photo .photo-swiper {
    padding: 0;
  }

  .yj-ggum .album-detail .concept-photo .photo-swiper .swiper-slide {
    height: 66.667vw;
  }

  .yj-ggum .album-detail .concept-photo .photo-swiper .btn-photo-prev,
  .yj-ggum .album-detail .concept-photo .photo-swiper .btn-photo-next {
    width: 4.314vw;
    height: 8.314vw;
    z-index: 10;
  }

  .yj-ggum .album-detail .concept-photo .photo-swiper .btn-photo-prev {
    background: url(../../../../images/txt/discography/yeonjun/yeonjuns_mixtape_ggum/ui/arrow-prev.png)
      no-repeat center/100%;
    left: 4.314vw;
  }

  .yj-ggum .album-detail .concept-photo .photo-swiper .btn-photo-prev.black {
    background: url(../../../../images/txt/discography/yeonjun/yeonjuns_mixtape_ggum/ui/arrow-prev.png)
      no-repeat center/100%;
  }

  .yj-ggum .album-detail .concept-photo .photo-swiper .btn-photo-next {
    background: url(../../../../images/txt/discography/yeonjun/yeonjuns_mixtape_ggum/ui/arrow-next.png)
      no-repeat center/100%;
    right: 4.314vw;
  }

  .yj-ggum .album-detail .concept-photo .photo-swiper .btn-photo-next.black {
    background: url(../../../../images/txt/discography/yeonjun/yeonjuns_mixtape_ggum/ui/arrow-next.png)
      no-repeat center/100%;
  }
  .yj-ggum .album-detail .concept-photo .photo-popup-swiper .swiper-wrapper {
    align-items: center;
  }
  .yj-ggum
    .album-detail
    .concept-photo
    .photo-popup-swiper
    .btn-photo-popup-prev,
  .yj-ggum
    .album-detail
    .concept-photo
    .photo-popup-swiper
    .btn-photo-popup-next {
    top: 55%;
    width: 4.314vw;
    height: 8.314vw;
    z-index: 10;
  }

  .yj-ggum
    .album-detail
    .concept-photo
    .photo-popup-swiper
    .btn-photo-popup-prev {
    background: url(../../../../images/txt/discography/yeonjun/yeonjuns_mixtape_ggum/ui/arrow-prev.png)
      no-repeat center/100%;
    left: 7.314vw;
  }

  .yj-ggum
    .album-detail
    .concept-photo
    .photo-popup-swiper
    .btn-photo-popup-next {
    background: url(../../../../images/txt/discography/yeonjun/yeonjuns_mixtape_ggum/ui/arrow-next.png)
      no-repeat center/100%;
    right: 7.314vw;
  }

  .yj-ggum .album-detail .concept-photo .photo-swiper-text-box {
    margin-top: 4.831vw;
  }

  .yj-ggum .album-detail .concept-photo .photo-popup .btn-download,
  .yj-ggum .album-detail .concept-photo .photo-popup .btn-close-popup {
    width: 10.9375vw;
    height: 10.9375vw;
    flex: 0 0 10.9375vw;
    background-size: contain;
  }

  .yj-ggum .album-detail .concept-photo .photo-popup .vertical .picture {
    max-width: 500px;
    width: 90%;
  }

  /* E : concept photo swiper */

  .bottom-symbol .con .figure {
    max-width: 33.3333%;
  }

  .bottom-symbol .con .text {
    max-width: 25%;
  }

  .yj-ggum .album-detail .credit .pc {
    display: none;
  }

  .yj-ggum .album-detail .credit .mo {
    display: block;
  }
}