/* 섹션 공통 */
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
*/
.sanctuary .album-detail {
    padding-bottom: 0;
    background: #000 url(../../../images/txt/discography/sanctuary/kv-bg.png) no-repeat top center;
    background-size: cover;
}

.sanctuary .album-detail.final .txt-section-release {
    padding-top: 154px;
}

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

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

/* .txt-section *,
.txt-section .regular * {
  font-family: "Camber-R";
  letter-spacing: -0.01em;
} */

.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%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 5.09vw;
}

/* Back button */
.album-detail .btn-list {
    background: none;
}
.album-detail .btn-list span {
    background: #fff;
}

.album-detail .btn-list span::after {
    border: 2px solid #fff;
    border-width: 0px 0px 2px 2px;
}

@media screen and (max-width: 768px) {
    .sanctuary .album-detail {
        padding: 26vw 0 0;
    }
    .album-detail .btn-list {
        top: 20.11vw;
    }
    .album-detail .btn-list span {
        display: block;
        margin-left: 2.73vw;
    }
}

/* Cover */
.txt-section-cover {
    background-size: 100%;
    padding: 20px 0 80px;
    z-index: 2;
}

.txt-section-cover > .con {
    width: 100%;
}

.txt-section-cover > .con > .control {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 25px;
}

.txt-section-cover > .con > .intro {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 164px;
}
.txt-section-cover > .con > .intro > .info > .type {
    font-size: 3.7vw;
    font-weight: bold;
    margin-bottom: 15px;
}
.txt-section-cover > .con > .intro > .info > .name {
    font-size: 9.5vw;
    font-weight: bold;
    margin-bottom: 25px;
    line-height: 1;
    text-transform: uppercase;
}
.txt-section-cover > .con > .intro > .cover {
    display: block;
    position: relative;
    width: 100%;
}

.txt-section-cover > .con > .intro > .cover > .cover-img {
    display: inline-block;
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 7.5vw;
}

.txt-section-cover > .con > .intro > .cover > .cover-img > img {
    width: 100%;
}
@media screen and (min-width: 768px) {
    .txt-section-cover {
        padding: 0 0 8vw;
    }
    .txt-section-cover > .con > .intro > .cover {
        /* display: flex;
        align-items: center; */
    }
    .txt-section-cover > .con > .intro > .cover > .cover-img {
        margin: 0;
        text-align: right;
    }
}
.txt-section-cover > .con > .intro > .info {
    color: #fff;
}
.txt-section-cover > .con > .intro > .info img {
    width: 100%;
}

.txt-section-cover > .con > .video > .con {
    position: relative;
}
.txt-section-cover > .con > .intro > .info > .desc {
    font-size: 4vw;
    font-weight: normal;
}

.txt-section-cover > .con > .video > .con > .title {
    position: relative;
    text-align: center;
    z-index: 1;
}

.txt-section-cover > .con > .video > .con > .title .title-img {
    position: absolute;
    max-width: 110px;
    height: 53px;
    top: -49px;
    right: 0;
    left: 0;
    margin: auto;
}

.txt-section-cover > .con > .video > .con > .album-video > .slide-wrap {
    margin-top: -22px;
}
.txt-section-cover > .con > .video > .con > .album-video > .slide-wrap ul {
    /* width: unset; */
}

.txt-section-cover
> .con
> .video
> .con
> .album-video
> .slide-wrap
ul
.contents-obj {
    min-height: 360px;
    /* height: auto; */
}

@media screen and (max-width: 768px) {
    .txt-section-cover
    > .con
    > .video
    > .con
    > .album-video
    > .slide-wrap
    ul
    .contents-obj {
        min-height: 48.5vw;
    }
}

/* 크래딧 */
.txt-section-credit {
    background-color: #000;
}
.txt-section-credit .con {
    padding: 0;
}
.txt-section-credit .con .credit-wrap img {
    width: 100%;
    margin: auto;
}

.mb {
    display: none;
}
@media screen and (max-width: 768px) {
    .pc {
        display: none;
    }
    .mb {
        display: block;
    }
}

.sanctuary .album-detail .bottom.rows ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.sanctuary .album-detail .album-video {
    padding: 0;
    margin-top: 10vw;
    z-index: 3;
}

.sanctuary .album-detail .bottom.rows ul {
    padding: 4.8vw 0 0;
}

.sanctuary .album-detail .bottom.rows ul::after {
    display: none;
}

.sanctuary .album-detail .bottom.rows ul li.taller {
    position: relative;
    display: inline-block;
    padding: 10px 0;
    width: 49%;
}

.sanctuary .album-detail .bottom.rows ul li.taller::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    bottom: 0;
    background-color: #fff;
}
.sanctuary .album-detail .bottom.rows ul li.taller.no-line::after,
.sanctuary .album-detail .bottom.rows ul li.taller:last-child::after {
    content: none;
}

.sanctuary .album-detail .slide-wrap > ul > li .contents-sub {
    padding-bottom: 0;
    color: #fff;
    text-transform: none;
}

.sanctuary .album-detail .bottom.rows ul li > button {
    display: inline-block;
    padding: 5px 0;
}

.sanctuary .album-detail .bottom.rows ul li.active button h3,
.sanctuary .album-detail .bottom.rows ul li button:hover h3 {
    font-family: "Camber-SB";
}

.sanctuary .album-detail .bottom.rows ul li button h3 {
    font-family: "Camber-R";
}

.sanctuary .album-detail .bottom.rows ul li.first {
    flex: 1 1 auto;
    width: 100%;
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
}

.sanctuary .album-detail .bottom.rows ul li.first::after {
}

.sanctuary .album-detail .bottom.rows ul li.first > button {
    display: inline-block;
}

.sanctuary .album-detail .bottom.rows ul li.start {
    flex: 0 0 auto;
    width: 50%;
    padding-left: 0;
    text-align: right;
}

.sanctuary .album-detail .bottom.rows ul li.end {
    flex: 0 0 auto;
    width: 50%;
    padding-right: 0;
    text-align: left;
}

.sanctuary .album-detail .bottom.rows ul li.end::after {
    /* content: ''; */
    position: absolute;
    width: 100%;
    left: 0;
    /* border-bottom: 1px solid #D4CFBE; */
}

.sanctuary .album-detail .bottom.rows ul li.col-3 {
    flex: 0 0 auto;
    width: 33.33333%;
    padding-left: 0;
    text-align: center;
}

.sanctuary .album-detail .bottom.rows ul li.col-3.tr {
    text-align: right;
}

.sanctuary .album-detail .bottom.rows ul li.col-3.tl {
    text-align: left;
}

.sanctuary .album-detail .bottom.rows ul li.block {
    flex: 0 0 auto;
    width: 100%;
    opacity: 0.5;
}

.sanctuary .album-detail .bottom.rows ul li.block:nth-child(2),
.sanctuary .album-detail .bottom.rows ul li.block:nth-child(3) {
    flex: 0 0 auto;
    width: 50%;
}

.sanctuary .album-detail .bottom.rows ul li.block:last-child {
    border-bottom: 0;
}

.sanctuary .album-detail .bottom.rows ul li.block.active {
    opacity: 1;
}

.sanctuary .album-detail .bottom ul li .contents-sub {
    /* font-size: 1.11vw;
    font-weight: bold;
    color: #e12141;
    padding: 0 2.08vw; */
    line-height: 1.3;
    text-transform: none;
}

.sanctuary .album-detail .album-video .slide-wrap > ul {
    overflow: visible;
}

.sanctuary .album-detail .bottom ul li.active .contents-sub {
    color: #fff;
}

.sanctuary .album-detail .album-video .slide-wrap > ul > li {
    margin-bottom: 5.28vw;
}

.sanctuary .album-detail .album-video .slide-wrap > ul > li:last-child {
    margin-bottom: 0;
}
@media screen and (min-width: 768px) {
    .sanctuary .album-detail .album-video .slide-wrap > ul > li {
        margin-bottom: 24vw;
    }
}

/* Deprecated Start  */

.txt-section-cover > .con > .video > .con > .pc-info > .txt-video-player-wrap {
    display: block;
    position: relative;
}

.txt-section-cover
> .con
> .video
> .con
> .pc-info
> .txt-video-player-wrap::before {
    display: none;
    content: "";
}

.txt-section-cover
> .con
> .video
> .con
> .pc-info
> .txt-video-player-wrap
> button {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
}

.txt-section-cover
> .con
> .video
> .con
> .pc-info
> .txt-video-player-wrap
> button
> img {
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.txt-section-cover
> .con
> .video
> .con
> .pc-info
> .txt-video-player-wrap
> button:hover
> img {
    opacity: 1;
}

.txt-section-cover
> .con
> .video
> .con
> .pc-info
> .txt-video-player-wrap
> button::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 98px;
    height: 98px;
    margin-left: -49px;
    margin-top: -49px;
    border-radius: 50vh;
    border: 3px solid rgba(255, 255, 255, 0.33);
    background: url(./../../../images/btn-play.png) no-repeat center;
    background-size: 100% auto;
}

.txt-section-cover > .con > .video > .con > .mb-list {
    display: block;
}

.txt-section-cover > .con > .video > .con > .mb-list > ul {
}

.txt-section-cover > .con > .video > .con > .mb-list > ul > li {
    margin-bottom: 19vw;
}

.txt-section-cover > .con > .video > .con > .mb-list > ul > li > .item {
    display: block;
    position: relative;
    width: 100%;
}

.txt-section-cover > .con > .video > .con > .mb-list > ul > li > .item > .wrap {
    display: block;
    position: relative;
    width: 100%;
    height: 50vw;
    margin-bottom: 5.5vw;
    background-color: #000;
    overflow: hidden;
}

.txt-section-cover
> .con
> .video
> .con
> .mb-list
> ul
> li
> .item
> .wrap::before {
    display: block;
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    z-index: -1;
}

.txt-section-cover
> .con
> .video
> .con
> .mb-list
> ul
> li
> .item
> .wrap
> button {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.txt-section-cover
> .con
> .video
> .con
> .mb-list
> ul
> li
> .item
> .wrap
> button
> img {
    width: 100%;
    height: 100%;
}

.txt-section-cover
> .con
> .video
> .con
> .mb-list
> ul
> li
> .item
> .wrap
> button::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 98px;
    height: 98px;
    margin-left: -49px;
    margin-top: -49px;
    border-radius: 50vh;
    border: 3px solid rgba(255, 255, 255, 0.33);
    background: url(./../../../images/btn-play.png) no-repeat center;
    background-size: 100% auto;
}

.txt-section-cover
> .con
> .video
> .con
> .mb-list
> ul
> li
> .item.txt-video-mb-1
> .wrap::before {
    background-image: url(../../../images/txt/discography/minisode-2/mb/section-1-video-fire.png);
    width: 45%;
    height: 69%;
    top: -43%;
    right: -21%;
}

.txt-section-cover
> .con
> .video
> .con
> .mb-list
> ul
> li
> .item.txt-video-mb-2
> .wrap::before {
    background-image: url(../../../images/txt/discography/minisode-2/mb/section-1-video-hate.png);
    width: 30.5%;
    height: 45%;
    top: -33%;
    left: -10.5%;
}

.txt-section-cover
> .con
> .video
> .con
> .mb-list
> ul
> li
> .item.txt-video-mb-3
> .wrap::before {
    background-image: url(../../../images/txt/discography/minisode-2/mb/section-1-video-end.png);
    width: 28%;
    height: 41%;
    top: -54%;
    right: -14%;
}

.txt-section-cover
> .con
> .video
> .con
> .mb-list
> ul
> li
> .item.txt-video-mb-4
> .wrap::before {
    background-image: url(../../../images/txt/discography/minisode-2/mb/section-1-video-mess.png);
    width: 69.5%;
    height: 98%;
    top: -62%;
    left: -23.5%;
}

.txt-section-cover
> .con
> .video
> .con
> .mb-list
> ul
> li
> .item.txt-video-mb-5
> .wrap::before {
}

.txt-section-cover
> .con
> .video
> .con
> .mb-list
> ul
> li
> .item
> .wrap
> iframe {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.txt-section-cover > .con > .video > .con > .mb-list > ul > li > .item > .info {
    text-align: center;
}

.txt-section-cover
> .con
> .video
> .con
> .mb-list
> ul
> li
> .item
> .info
> .name {
    font-size: 4vw;
    font-weight: bold;
    color: #f0f0ef;
}

.txt-section-cover
> .con
> .video
> .con
> .mb-list
> ul
> li
> .item
> .info
> .type {
    font-size: 4vw;
    font-weight: bold;
    color: #f0f0ef;
}

/* 발매 영역 */
.txt-section-release {
    padding: 120px 0 80px;
    background: url(../../../images/txt/discography/minisode-3/pc/pc-bg2.jpg);
    background-size: cover;
}
.txt-section-release > .con > .info > .title {
    position: relative;
    z-index: 5;
}
.txt-section-release > .con > .info > .title img {
    position: absolute;
    max-width: 250px;
    height: 56px;
    top: -49px;
    right: 0;
    left: 0;
    margin: auto;
}
.txt-section-release > .con > .info > .con .img {
    display: flex;
    width: 100%;
    margin: auto;
}
.txt-section-release > .con > .info > .con > .video {
    position: relative;
    text-align: center;
}
/* .txt-section-release > .con > .info > .con > .video > .video-thumbnail {
  display: block;
  position: relative;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

.txt-section-release > .con > .info > .con > .video > .video-thumbnail > img {
  width: 100%;
}

.txt-section-release > .con > .info > .con > .video > video {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
} */

.txt-section-release > .con > .info > .con > .video,
.txt-section-promotion > .con > .info > .con > .video,
.txt-section-track > .con > .info > .con > .video {
    text-align: center;
}
.txt-section-release > .con > .info > .con > .video > video,
.txt-section-promotion > .con > .info > .con > .video > video,
.txt-section-track > .con > .info > .con > .video > video {
    width: 100%;
    margin: auto;
}

@media screen and (min-width: 768px) {
    .txt-section-release {
        padding: 8vw 0 8vw;
    }
    .txt-section-release > .con > .info > .title img {
        max-width: 100%;
        height: 4vw;
        top: -3.5vw;
    }
    .txt-section-release > .con > .info > .con > .video > .video-thumbnail,
    .txt-section-teaser > .con > .info > .con > .video > .video-thumbnail,
    .txt-section-track > .con > .info > .con > .video > .video-thumbnail {
        width: 37vw;
        max-width: 534px;
        margin: auto;
    }
    .txt-section-release > .con > .info > .con > .video > video,
    .txt-section-promotion > .con > .info > .con > .video > video,
    .txt-section-teaser > .con > .info > .con > .video > video,
    .txt-section-track > .con > .info > .con > .video > video {
        width: 37vw;
        max-width: 534px;
        right: 0;
        margin: auto;
    }
}

/* 포토 영역 */
.txt-section-photo {
    margin-top: -2px;
    padding: 80px 0;
    background: url(../../../images/txt/discography/minisode-3/pc/pc-bg2.jpg);
    background-size: cover;
}
.txt-section-photo > .con {
    padding: 0;
}
.txt-section-photo > .con > .info > .title {
    position: relative;
}
.txt-section-photo > .con > .info > .title img {
    position: absolute;
    max-width: 97px;
    height: 38px;
    top: -49px;
    right: 0;
    left: 0;
    margin: auto;
}
.txt-section-photo > .con > .info > .con .txt-photo-wrap {
    position: relative;
}
.txt-section-photo > .con > .info > .con .txt-photo-wrap .video {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    background-color: #2c283b;
}
.txt-section-photo > .con > .info > .con .txt-photo-wrap .video video {
    width: 100%;
    margin: auto;
}
.txt-photo-wrap > .video-wrap-1 {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    width: 90vw;
    height: 100%;
    margin: auto;
    z-index: 5;
}
.txt-photo-wrap > .video-wrap-1 .video > .pendant-btn-wrap {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Test color */
    /* background-color: rgba(155, 155, 0, 0.5); */
    z-index: 1;
}
.txt-photo-wrap > .video-wrap-1 .video > .pendant-btn-wrap > .btn {
    position: absolute;
    width: 56vw;
    height: 60vw;
    top: 50vw;
    left: 18vw;
    /* Test color */
    /* background-color: rgba(0, 155, 155, 0.5); */
    cursor: pointer;
    z-index: 2;
}

.txt-photo-wrap > .video-wrap-1 .video > .pendant-btn-wrap > .btn.disable {
    pointer-events: none;
}

.txt-photo-wrap > .video-wrap-1 .video > .button-wrap {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15%;
    /* Test color */
    /* background-color: rgba(155, 155, 0, 0.5); */
    z-index: 1;
}
.txt-photo-wrap > .video-wrap-1 .video > .button-wrap > .btn {
    position: absolute;
    bottom: 5vw;
    height: 6vw;
    /* Test color */
    /* background-color: rgba(0, 155, 155, 0.5); */
    cursor: pointer;
    z-index: 2;
}

.txt-photo-wrap > .video-wrap-1 .video > .button-wrap > .btn.disable {
    pointer-events: none;
}
.txt-photo-wrap > .video-wrap-1 .video > .button-wrap > .btn-ethereal {
    left: 9vw;
    width: 15vw;
}
.txt-photo-wrap > .video-wrap-1 .video > .button-wrap > .btn-romantic {
    left: 29vw;
    width: 16vw;
}
.txt-photo-wrap > .video-wrap-1 .video > .button-wrap > .btn-promise {
    left: 50vw;
    width: 16vw;
}
.txt-photo-wrap > .video-wrap-1 .video > .button-wrap > .btn-light {
    left: 70vw;
    width: 11vw;
}
.txt-section-photo .video-wrap-2 {
    display: block;
    visibility: hidden;
    position: relative;
    width: 90vw;
    height: 150vw;
    margin-left: auto;
    margin-right: auto;
    /* Test color */
    /* background-color: #000; */
    line-height: 0;
}

.txt-section-photo .video-wrap-2 > .btn-close {
    display: block;
    position: absolute;
    width: 9vw;
    height: 8vw;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 1;
    /* Test color */
    /* background: rgba(255, 255, 255, 0.3); */
}

.txt-section-photo .video-wrap-2 .video {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.txt-section-photo .video-wrap-2 .video > video {
    width: 100%;
}

.txt-section-photo .video-wrap-2 .video > .button-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.txt-section-photo .video-wrap-2 .video > .button-wrap > .btn {
    position: absolute;
    /* Test color */
    /* background-color: rgba(0, 155, 155, 0.5); */
    top: 33%;
    width: 20%;
    height: 22%;
    cursor: pointer;
}

.txt-section-photo .video-wrap-2 .video > .button-wrap > .btn-soobin {
    left: 14%;
}

.txt-section-photo .video-wrap-2 .video > .button-wrap > .btn-yeonjun {
    left: 40%;
}

.txt-section-photo .video-wrap-2 .video > .button-wrap > .btn-beomgyu {
    left: 66%;
}
.txt-section-photo .video-wrap-2 .video > .button-wrap > .btn-taehyun {
    top: 57%;
    left: 14%;
}

.txt-section-photo .video-wrap-2 .video > .button-wrap > .btn-hueningkai {
    top: 57%;
    left: 40%;
}

.txt-section-photo
.video-wrap-2
.video
> .button-wrap.hide-group
> .btn-taehyun {
    left: 27%;
}

.txt-section-photo
.video-wrap-2
.video
> .button-wrap.hide-group
> .btn-hueningkai {
    left: 53%;
}

.txt-section-photo .video-wrap-2 .video > .button-wrap > .btn-group {
    top: 57%;
    left: 66%;
}

/* Concept photo popup */
.txt-section-photo .popup-photo {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: 730px;
    z-index: 110;
    display: none;
    opacity: 0;
}

.txt-section-photo .popup-photo ul {
    position: relative;
    width: 100%;
    max-width: 994px;
    height: 663px;
    margin: 0 auto;
}

.txt-section-photo .popup-photo > ul > li {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: none;
}

.txt-section-photo .popup-photo > ul > li.active {
    display: block;
    opacity: 1;
}

.txt-section-photo .popup-photo > ul > li ul {
    position: absolute;
    top: 55px;
    left: 0;
    overflow: hidden;
    opacity: 0;
    display: none;
}

.txt-section-photo .popup-photo > ul > li ul.active {
    opacity: 1;
    display: block;
}

.txt-section-photo .popup-photo > ul > li li {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin-left: 100%;
}

.txt-section-photo .popup-photo > ul > li li:first-child {
    margin-left: 0;
    position: relative;
}

.txt-section-photo .popup-photo > ul > li div {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.txt-section-photo .popup-photo > ul > li img {
    display: block;
    width: auto;
    max-width: 994px;
    margin: auto;
}

.txt-section-photo .popup-photo > ul > li video {
    display: block;
    width: 100%;
    max-width: 994px;
}

.txt-section-photo .popup-photo > ul > li video.video_vertical {
    width: auto;
    margin: auto;
    height: 100%;
    top: 0;
    position: absolute;
}

.txt-section-photo .popup-photo > ul > li .v_cover {
    position: absolute;
    top: 0;
    left: 0;
}

.txt-section-photo .popup-photo > ul > li .w442 {
    padding: 0 275px;
}

.txt-section-photo .popup-photo .popup-btn {
    display: block;
    width: 100%;
    height: auto;
    text-align: right;
}

.txt-section-photo .popup-photo .btn-down {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url("./../../../images/btn_down_pop.png");
    background-size: cover;
}

.txt-section-photo .popup-photo .btn-down:hover {
    background-image: url("./../../../images/btn_down_pop_hover.png");
}

.txt-section-photo .popup-photo .btn-close {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url("./../../../images/btn_close_pop.png");
    background-size: cover;
    margin-left: 5px;
}

.txt-section-photo .popup-photo .btn-close:hover {
    background-image: url("./../../../images/btn_close_pop_hover.png");
}

.txt-section-photo .popup-photo .pop-btn-prev {
    position: absolute;
    left: -109px;
    top: 50%;
    width: 80px;
    height: 90px;
    background-image: url("./../../../images/btn-prev-photo.png");
    background-size: cover;
}

.txt-section-photo .popup-photo .pop-btn-prev:hover {
    background-image: url("./../../../images/btn-prev-photo_hover_blue.png");
}

.txt-section-photo .popup-photo .pop-btn-next {
    position: absolute;
    right: -109px;
    top: 50%;
    width: 80px;
    height: 90px;
    background-image: url("./../../../images/btn-next-photo.png");
    background-size: cover;
}

.txt-section-photo .popup-photo .pop-btn-next:hover {
    background-image: url("./../../../images/btn-next-photo_hover_blue.png");
}

.device .txt-section-photo .popup-photo .btn-down:hover {
    background-image: url("./../../../images/btn_down_pop.png");
}

.device .txt-section-photo .popup-photo .btn-close:hover {
    background-image: url("./../../../images/btn_close_pop.png");
}

.device .txt-section-photo .popup-photo .pop-btn-prev:hover {
    background-image: url("./../../../images/btn-prev-photo.png");
}

.device .txt-section-photo .popup-photo .pop-btn-next:hover {
    background-image: url("./../../../images/btn-next-photo.png");
}

@media screen and (min-width: 768px) {
    .txt-section-photo {
        padding: 8vw 0;
    }
    .txt-section-photo > .con > .info > .title img {
        max-width: 100%;
        height: 3vw;
        top: -4vw;
        z-index: 15;
    }
    .txt-section-photo > .con > .info > .con .txt-photo-wrap .video-wrap-1,
    .txt-section-photo > .con > .info > .con .txt-photo-wrap .video-wrap-2 {
        width: 37vw;
        height: 62vw;
        max-height: 890px;
        max-width: 534px;
        margin: auto;
    }
    .txt-photo-wrap > .video-wrap-1 .video > .pendant-btn-wrap > .btn {
        width: 62%;
        height: 39%;
        top: 33%;
        left: 21%;
    }
    .txt-photo-wrap > .video-wrap-1 .video > .button-wrap > .btn {
        bottom: 20%;
        height: 35%;
    }
    .txt-photo-wrap > .video-wrap-1 .video > .button-wrap > .btn-ethereal {
        left: 9%;
        width: 18%;
    }
    .txt-photo-wrap > .video-wrap-1 .video > .button-wrap > .btn-romantic {
        left: 33%;
        width: 17%;
    }
    .txt-photo-wrap > .video-wrap-1 .video > .button-wrap > .btn-promise {
        left: 56%;
        width: 17%;
    }
    .txt-photo-wrap > .video-wrap-1 .video > .button-wrap > .btn-light {
        left: 79%;
        width: 11%;
    }

    .txt-section-photo .video-wrap-2 > .btn-close {
        width: 11%;
        height: 6%;
    }

    .txt-section-photo .video-wrap-2 .video > .button-wrap > .btn {
        width: 20%;
        height: 22%;
        top: 33%;
        /* Test color */
        /* background-color: rgba(0, 155, 155, 0.5); */
    }
    .txt-section-photo .video-wrap-2 .video > .button-wrap > .btn-soobin {
        left: 14%;
    }
    .txt-section-photo .video-wrap-2 .video > .button-wrap > .btn-yeonjun {
        left: 40%;
    }
    .txt-section-photo .video-wrap-2 .video > .button-wrap > .btn-beomgyu {
        left: 66%;
    }
    .txt-section-photo .video-wrap-2 .video > .button-wrap > .btn-taehyun {
        top: 57%;
        left: 14%;
    }
    .txt-section-photo .video-wrap-2 .video > .button-wrap > .btn-hueningkai {
        top: 57%;
        left: 40%;
    }
    .txt-section-photo .video-wrap-2 .video > .button-wrap > .btn-group {
        top: 57%;
        left: 66%;
    }
    .txt-section-photo
    .video-wrap-2
    .video
    > .button-wrap.hide-group
    > .btn-taehyun {
        top: 57%;
        left: 27%;
    }
    .txt-section-photo
    .video-wrap-2
    .video
    > .button-wrap.hide-group
    > .btn-hueningkai {
        top: 57%;
        left: 53%;
    }
}

@media screen and (max-width: 1440px) {
    /* Popup Photo */
    .txt-section-photo .popup-photo {
        top: 4.17vw;
        left: 0;
        width: 100%;
        height: 50.69vw;
    }

    .txt-section-photo .popup-photo ul {
        width: 69vw;
        height: 46.04vw;
        margin: 0 auto;
    }

    .txt-section-photo .popup-photo > ul > li ul {
        top: 3.82vw;
    }

    .txt-section-photo .popup-photo > ul > li img {
        width: 100%;
        margin: auto;
    }

    .txt-section-photo .popup-photo > ul > li .w442 {
        padding: 0 19.13vw;
    }

    .txt-section-photo .popup-photo > ul > li video {
        max-width: 69.0278vw;
    }

    .txt-section-photo .popup-photo .btn-down {
        width: 3.47vw;
        height: 3.47vw;
    }

    .txt-section-photo .popup-photo .btn-close {
        width: 3.47vw;
        height: 3.47vw;
        margin-left: 0.35vw;
    }

    .txt-section-photo .popup-photo .btn-prev {
        left: -7.57vw;
        top: 50%;
        width: 5.56vw;
        height: 6.25vw;
    }

    .txt-section-photo .popup-photo .btn-next {
        right: -7.57vw;
        top: 50%;
        width: 5.56vw;
        height: 6.25vw;
    }
    .txt-section-photo .popup-photo > ul > li .w442 {
        padding: 0 19.13vw;
    }
}
@media screen and (max-width: 768px) {
    .txt-section-photo .popup-photo ul {
        width: 100%;
        height: auto;
    }
    .txt-section-photo .popup-photo .popup-btn {
        margin-bottom: 2.604vw;
    }
    .txt-section-photo .popup-photo .btn-down {
        width: 10.9375vw;
        height: 10.9375vw;
    }
    .txt-section-photo .popup-photo .btn-close {
        width: 10.9375vw;
        height: 10.9375vw;
        margin: 0 2.864vw 0 1.953vw;
    }
    .txt-section-photo .popup-photo > ul > li ul {
        position: relative;
        top: 0;
        height: 66.7969vw;
    }
    .txt-section-photo .popup-photo > ul > li > div:not(.popup-btn) {
        position: absolute;
        top: auto;
        left: 0px;
        bottom: 0px;
        height: 66.7969vw;
    }
    .txt-section-photo .popup-photo > ul > li .w442 {
        padding: 0 27.734vw;
    }
    .txt-section-photo .popup-photo .pop-btn-prev {
        left: 1.1719vw;
        width: 10.4167vw;
        height: 11.718vw;
        margin-top: -5.859vw;
    }
    .txt-section-photo .popup-photo .pop-btn-next {
        right: 1.1719vw;
        width: 10.4167vw;
        height: 11.718vw;
        margin-top: -5.859vw;
    }
}

/* 컨셉티저 */
.txt-section-teaser {
    margin-top: -2px;
    padding: 80px 0;
    background: url(../../../images/txt/discography/minisode-3/pc/pc-bg2.jpg);
    background-size: cover;
}
.txt-section-teaser > .con > .info > .title {
    position: relative;
}
.txt-section-teaser > .con > .info > .title img {
    position: absolute;
    max-width: 248px;
    height: 53px;
    top: -45px;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 5;
}
.txt-section-teaser > .con > .info > .con .img {
    display: flex;
    width: 100%;
    margin: auto;
}
.txt-section-teaser > .con > .info > .con .img img {
    width: 100%;
}
.txt-section-teaser > .con > .info > .con > .video {
    position: relative;
}
.txt-section-teaser > .con > .info > .con > .video > .video-thumbnail {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

.txt-section-teaser > .con > .info > .con > .video > .video-thumbnail > img {
    width: 100%;
}

.txt-section-teaser > .con > .info > .con > .video > video {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
@media screen and (min-width: 768px) {
    .txt-section-teaser {
        margin-top: -2px;
        padding: 7vw 0;
    }
    .txt-section-teaser > .con > .info > .title img {
        max-width: 100%;
        height: 4vw;
        top: -3.4vw;
    }
    .txt-section-teaser > .con > .info > .con .img {
        width: 37vw;
        max-width: 534px;
    }
}

/* 프로모션 스케쥴 */
.txt-section-promotion {
    padding: 80px 0;
    margin-top: -2px;
    background: url(../../../images/txt/discography/minisode-3/pc/pc-bg2.jpg);
    background-size: cover;
}
.txt-section-promotion > .con > .info > .title {
    position: relative;
}
.txt-section-promotion > .con > .info > .title img {
    position: absolute;
    max-width: 321px;
    height: 56px;
    top: -48px;
    right: 0;
    left: 0;
    margin: auto;
}
.txt-section-promotion > .con > .info > .con .img {
    display: flex;
    width: 100%;
    margin: auto;
}
.txt-section-promotion > .con > .info > .con .img img {
    width: 100%;
}
@media screen and (min-width: 768px) {
    .txt-section-promotion {
        padding: 7vw 0;
    }
    .txt-section-promotion > .con > .info > .title img {
        max-width: 100%;
        height: 4vw;
        top: -3.5vw;
    }
    .txt-section-promotion > .con > .info > .con .img {
        width: 37vw;
        max-width: 534px;
    }
}

/* 트랙리스트 */
.txt-section-track {
    margin-top: -2px;
    padding: 80px 0;
    background: url(../../../images/txt/discography/minisode-3/pc/pc-bg2.jpg);
    background-size: cover;
}
.txt-section-track > .con > .info > .title {
    position: relative;
}
.txt-section-track > .con > .info > .title img {
    position: absolute;
    max-width: 139px;
    height: 54px;
    top: -48px;
    right: 0;
    left: 0;
    margin: auto;
}
.txt-section-track > .con > .info > .con .img {
    display: flex;
    width: 100%;
    margin: auto;
}
.txt-section-track > .con > .info > .con .img img {
    width: 100%;
}
@media screen and (min-width: 768px) {
    .txt-section-track {
        margin-top: -2px;
        padding: 7vw 0;
    }
    .txt-section-track > .con > .info > .title img {
        max-width: 100%;
        height: 4vw;
        top: -3.5vw;
    }
    .txt-section-track > .con > .info > .con .img {
        width: 37vw;
        max-width: 534px;
    }
}

/* 사진 팝업 */
.txt-popup-photo {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 10;
    top: 0;
}

.txt-popup-photo > .bg {
    display: block;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.95);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.txt-popup-photo > .con {
    display: block;
    position: absolute;
    width: 100%;
    top: 35vw;
    height: 0;
}

.txt-popup-photo > .con > .swiper-wrap {
    position: relative;
    width: 100%;
    max-width: 994px;
    height: 0;
    margin: 0 auto;
}

.txt-popup-photo .popup-btn {
    display: block;
    width: 100%;
    height: auto;
    text-align: right;
}

.txt-popup-photo .popup-btn .btn-down {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url(./../../../images/txt/discography/minisode-2/btn_down.png);
    background-size: cover;
}

.txt-popup-photo .popup-btn .btn-close {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url(./../../../images/txt/discography/minisode-2/btn_close.png);
    background-size: cover;
    margin-left: 5px;
}

.txt-popup-photo > .con > .swiper-wrap > .swiper {
    display: block;
    position: relative;
    width: 100%;
    height: 68vw;
    margin-left: auto;
    margin-right: auto;
}

.txt-popup-photo > .con > .swiper-wrap > .swiper > ul {
}

.txt-popup-photo > .con > .swiper-wrap > .swiper > ul > li {
}

.txt-popup-photo > .con > .swiper-wrap > .swiper > ul > li > .wrap {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.txt-popup-photo
> .con
> .swiper-wrap
> .swiper
> ul
> li
> .wrap
> .contents-obj {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.txt-popup-photo > .con > .swiper-wrap .txt-pop-btn-prev {
    position: absolute;
    left: 0;
    top: 50vw;
    width: 15vw;
    height: 15vw;
    background-image: url(./../../../images/txt/discography/minisode-2/btn-prev-photo.png);
    background-size: cover;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    z-index: 10;
}

.txt-popup-photo > .con > .swiper-wrap .txt-pop-btn-next {
    position: absolute;
    right: 0;
    top: 50vw;
    width: 15vw;
    height: 15vw;
    background-image: url(./../../../images/txt/discography/minisode-2/btn-next-photo.png);
    background-size: cover;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    z-index: 10;
}

@media screen and (min-width: 768px) {
    .sanctuary .album-detail {
        /* padding-top: 4vw; */
    }

    .txt-section-control > .con {
        padding: 0 12.5vw;
    }

    .txt-section-control > .con > .btn-back {
        display: inline-block;
        position: relative;
        width: 3vw;
        height: 3vw;
    }

    .txt-section .title {
        font-size: 5.56vw !important;
    }

    /* 커버 */
    .txt-section-cover > .con {
        padding: 0 12.5vw 0;
    }

    .txt-section-cover > .con > .intro {
        display: flex;
        max-width: 1080px;
        margin: 0 auto 12vw;
    }

    .txt-section-cover > .con > .intro > .cover {
        /* display: block; */
        position: relative;
        flex: 1 1 auto;
        width: 50%;
    }

    .txt-section-cover > .con > .intro > .info {
        display: block;
        position: relative;
        flex: 1 1 auto;
        width: 50%;
        padding-top: 0;
        /* padding-left: 4.51vw; */
        padding-left: 4vw;
    }

    .txt-section-cover > .con > .intro > .info > .type {
        margin-bottom: 15px;
        font-size: 1.25vw;
        font-weight: bold;
    }

    .txt-section-cover > .con > .intro > .info > .name {
        font-size: 3.5vw;
        font-weight: bold;
        margin-bottom: 25px;
        line-height: 1;
        text-transform: uppercase;
    }

    .txt-section-cover > .con > .intro > .info > .desc {
        font-size: 15px;
        line-height: 25px;
    }

    .txt-section-cover > .con > .video > .con > .title {
        font-size: 5.56vw;
        line-height: 4.86vw;
        margin-bottom: -2vw;
    }

    .txt-section-cover > .con > .video > .con > .title .title-img {
        max-width: 100%;
        height: 4vw;
        top: -3.5vw;
    }

    .txt-section-cover > .con > .video > .con > .pc-info {
        display: block;
    }

    .sanctuary .album-detail .album-video {
        margin-top: 0;
        padding-bottom: 0;
    }

    .sanctuary .album-detail .album-video .slide-wrap > ul > li::before {
        display: none;
    }

    .sanctuary .album-detail .bottom.rows ul li.taller {
        padding: 12px 0;
    }

    .sanctuary .album-detail .album-video .slide-wrap > ul > li {
        margin-bottom: 0;
    }

    .sanctuary .album-detail .bottom.rows ul li.taller > button {
        /* font-size: 1.11vw;
        font-weight: bold;
        color: #e12141;
        padding: 0 2.08vw; */
    }

    .sanctuary .album-detail .bottom.rows ul li.taller.col-3 > button {
        padding: 0;
    }

    .txt-section-cover
    > .con
    > .video
    > .con
    > .pc-info
    > .txt-video-player-wrap {
        width: 100%;
        height: 43vw;
        background-color: #000;
    }

    .txt-section-cover
    > .con
    > .video
    > .con
    > .pc-info
    > .txt-video-player-wrap
    > iframe {
        width: 100%;
        height: 100%;
    }

    .txt-section-cover > .con > .video > .con > .pc-info > ul {
    }

    .txt-section-cover > .con > .video > .con > .pc-info > ul > li {
        border-bottom: 1px solid #d4cfbe;
        text-align: center;
        padding: 25px 0;
    }

    .txt-section-cover > .con > .video > .con > .pc-info > ul > li:last-child {
        border-bottom: 0;
    }

    .txt-section-cover > .con > .video > .con > .pc-info > ul > li > .item {
        display: inline-block;
    }

    .txt-section-cover
    > .con
    > .video
    > .con
    > .pc-info
    > ul
    > li
    > .item
    > .text {
        /* font-size: 1.11vw;
        font-weight: bold;
        color: #e12141;
        padding: 0 2.08vw; */
    }

    .txt-section-cover
    > .con
    > .video
    > .con
    > .pc-info
    > ul
    > li
    > .item.on
    > .text,
    .txt-section-cover
    > .con
    > .video
    > .con
    > .pc-info
    > ul
    > li
    > .item
    > .text:hover {
        color: #fff;
    }

    .txt-section-cover > .con > .video > .con > .mb-list {
        display: none;
    }
    .txt-section-photo {
    }

    .txt-section-photo > .con > .info > .title {
        margin-bottom: -2vw;
        line-height: 1;
    }

    .txt-section-photo > .con > .info > .con {
    }

    .txt-section-teaser > .con > .info > .con > .video {
        max-width: 36.8vw;
        margin-left: auto;
        margin-right: auto;
    }

    .txt-section-promotion > .con > .info > .title {
        z-index: 1;
    }

    .txt-section-promotion > .con > .info > .title > span {
        display: inline-block;
    }

    /* .txt-section-promotion>.con::before {
          height: 30vw;
          margin-top: -30vw;
      }

      .txt-section-promotion>.con::after {
          height: 30vw;
          bottom: -29vw;
      }

      .txt-section-promotion>.con>.info>.calendar {
          width: 75vw;
          margin-left: auto;
          margin-right: auto;
          max-width: 947px;
      } */

    /* 트랙 리스트 */
    .txt-section-track {
        max-width: none;
    }

    .txt-section-track > .con > .info > .con {
        /* max-width: 600px; */
        margin-left: auto;
        margin-right: auto;
    }

    .txt-section-track > .con > .info > .con > ul > li {
        padding: 10px 0;
    }

    .txt-section-track > .con > .info > .con > ul > li > .item {
        line-height: 1;
    }

    .txt-section-track > .con > .info > .con > ul > li > .item > .num {
        font-size: 100%;
        width: 20px;
    }

    .txt-section-track > .con > .info > .con > ul > li > .item > .name {
        font-size: 100%;
        padding-left: 30px;
    }

    .txt-section-track > .con > .info > .con > ul > li > .item > .name > .time {
        font-size: 100%;
        padding-left: 5px;
    }

    /* 팝업 */
    .txt-popup-photo > .con {
        top: 6vw;
    }

    .txt-popup-photo > .con > .swiper-wrap {
        width: 69vw;
        max-width: none;
        height: auto;
    }

    .txt-popup-photo > .con > .swiper-wrap > .swiper {
        width: 100%;
        height: 60vw;
    }

    .txt-popup-photo > .con > .swiper-wrap .txt-pop-btn-prev {
        left: -10vw;
        top: 50%;
        width: 80px;
        height: 90px;
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
    }

    .txt-popup-photo > .con > .swiper-wrap .txt-pop-btn-next {
        right: -10vw;
        top: 50%;
        width: 80px;
        height: 90px;
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
    }
}

@media screen and (min-width: 1440px) {
    .txt-section-control > .con {
        padding: 0;
        max-width: 1080px;
        margin-bottom: 15px;
    }

    .txt-section-control > .con > .btn-back {
        display: inline-block;
        position: relative;
        width: 20px;
        height: auto;
    }

    .txt-section .title {
        font-size: 80px !important;
    }

    /* 커버 */
    .txt-section-cover {
        /* padding: 0; */
    }

    .txt-section-cover > .con {
        /* padding: 0 0 100px; */
        /* max-width: 1080px; */
    }

    .txt-section-cover > .con > .intro > .info {
        padding-left: 80px;
    }

    .txt-section-cover > .con > .intro > .info > .name {
        font-size: 46px;
    }

    .txt-section-cover > .con > .intro > .info > .type {
        font-size: 18px;
    }

    /* .txt-section-cover>.con>.intro>.info>.desc {
          font-size: 17px;
          line-height: 29px;
          letter-spacing: -0.06em;
      }

      .txt-section-cover>.con>.intro>.info>.desc b {
          font-size: 23px;
      } */

    .txt-section-cover
    > .con
    > .video
    > .con
    > .pc-info
    > .txt-video-player-wrap {
        display: block;
        position: relative;
        width: 100%;
        height: 607px;
    }

    .sanctuary .album-detail .bottom ul li .contents-sub {
        font-size: 20px;
    }

    .sanctuary .album-detail .album-video::before {
        width: 1524px;
        height: 931px;
        position: absolute;
        top: -160px;
        left: -195px;
    }

    /* 컨셉포토 */
    .txt-section-photo {
        max-width: none;
    }

    .txt-section-photo > .con {
        max-width: none;
    }

    .txt-section-photo > .con > .info > .title {
        margin-bottom: -35px;
    }

    /* .txt-section-photo > .con > .info > .con {
      max-width: 530px;
      min-height: 1085px;
      padding: 0;
      margin-left: auto;
      margin-right: auto;
    } */

    .txt-section-promotion {
        max-width: none;
    }

    .txt-section-promotion > .con > .info > .calendar {
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 트랙리스트 */
    .txt-section-track {
        max-width: none;
    }

    .txt-section-track > .con > .info > .con > ul > li > .item > .name {
        padding-left: 40px;
    }

    .txt-section-track > .con > .info > .con > ul > li > .item > .name > .time {
        font-size: 17px;
    }

    /* 팝업 */
    .txt-popup-photo .btn-close {
        width: 3.47vw;
        height: 3.47vw;
        margin-left: 0.35vw;
    }

    .txt-popup-photo .btn-down {
        width: 3.47vw;
        height: 3.47vw;
    }

    .txt-popup-photo > .con > .swiper-wrap > .swiper {
        width: 994px;
        height: 663px;
    }

    .txt-popup-photo > .con > .swiper-wrap .txt-pop-btn-prev {
        left: -109px;
    }

    .txt-popup-photo > .con > .swiper-wrap .txt-pop-btn-next {
        right: -109px;
    }
}

.sanctuary .album-detail .album-video .bottom.rows ul::after {
    background: none;
}

.sanctuary .album-detail .bottom.rows {
    width: 76%;
    margin: auto;
}
.sanctuary .album-detail .bottom.rows ul li.block {
    width: 100%;
}
.sanctuary .album-detail .bottom.rows ul li.start {
    width: 50%;
    text-align: center;
}

.sanctuary .album-detail .bottom.rows ul li.end {
    width: 50%;
    text-align: center;
}

.sanctuary .album-detail .bottom.rows ul li button {
    margin: auto;
}

.sanctuary .album-detail .bottom.rows ul li button .contents-sub {
    /* font-family: "Camber-SR"; */
    color: #fff;
    text-shadow: none;
    text-transform: none;
}

.txt-section-credit {
    background-color: #000;
}

.txt-section-credit img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.txt-section-credit img.mo {
    display: none;
}


/* mockup */
.kv-mockup {
    overflow-y: auto;
    background: none;
    background-size: cover;
}

.mockup-container {
    /*position: absolute;*/
    /*top: 10.5vw;*/
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
    width: 100%;
    max-width: 300px;
    margin: 0 auto 8vw;
    background: url(./../../../images/txt/discography/sanctuary/mockup.png) top center/100% no-repeat;
    padding: 11px;
    font-family: 'Ciutadella', sans-serif;
}

.mockup-container img {
    display: block;
    max-width: 100%;
}

.mockup-container .mockup {
    position: relative;
    width: 100%;
}

.mockup-container .mockup::after {
    content: '';
    display: block;
    padding-bottom: 216.5217391304348%;
}

.mockup-container .mockup-header {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 84.3796711509716%;
    height: 12px;
    z-index: 2;
    color: #575756;
    background: url(./../../../images/txt/discography/sanctuary/header-g.png) center center/100% no-repeat;
}

.mockup-container .mockup-header .time {
    display: flex;
    align-items: center;
    font-size: 10px;
}

.mockup-container .mockup-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 28px;
    padding-top: 34px;
    overflow: hidden;
    background-color: #fff;
}

.mockup-container [class*="icon-"] {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
}

.mockup-container .icon-repeat {
    width: 14px;
    height: 12px;
    background-image: url(./../../../images/txt/discography/sanctuary/icon-repeat.svg);
}

.mockup-container .icon-more {
    width: 3px;
    height: 11px;
    background-image: url(../../images/txt/discography/sanctuary/icon-more.svg);
    background-size: auto 100%;
}

.mockup-container .icon-heart {
    width: 18px;
    height: 16px;
    background-image: url(./../../../images/txt/discography/sanctuary/icon-heart.svg);
}

.mockup-container .icon-music {
    width: 10px;
    height: 10px;
    background-image: url(./../../../images/txt/discography/sanctuary/icon-music.svg);
}

.mockup-container .icon-call {
    width: 62px;
    height: 62px;
    background-image: url(./../../../images/txt/discography/sanctuary/icon-call.svg);
}

.mockup-container .icon-instagram {
    width: 62px;
    height: 62px;
    background-image: url(./../../../images/txt/discography/sanctuary/icon-instagram.svg);
}

.mockup-container .icon-message {
    width: 62px;
    height: 62px;
    background-image: url(./../../../images/txt/discography/sanctuary/icon-message.svg);
}

.mockup-container .icon-teaser {
    width: 62px;
    height: 62px;
    background-image: url(./../../../images/txt/discography/sanctuary/icon-teaser.svg);
}

.mockup-container .icon-photo {
    width: 62px;
    height: 62px;
    background-image: url(./../../../images/txt/discography/sanctuary/icon-photo.svg);
}

.mockup-container .icon-video {
    width: 62px;
    height: 62px;
    background-image: url(./../../../images/txt/discography/sanctuary/icon-video.svg);
}

.mockup-container .btn-like {
    display: block;
    width: 100px;
    background: url(./../../../images/txt/discography/sanctuary/like-off.png) no-repeat center;
    background-size: 100% 100%;
}

.mockup-container .btn-like::after {
    content: "";
    display: block;
    padding-bottom: 95%;
}

.mockup-container .btn-like.on {
    background: url(./../../../images/txt/discography/sanctuary/like-on.png) no-repeat center;
    background-size: 100% 100%;
}

.mockup-container .btn-like.title {
    display: block;
    width: 100px;
    background: url(./../../../images/txt/discography/sanctuary/like-title-on.png) no-repeat center !important;
    background-size: 100% 100% !important;
}

.mockup-container .component {
    display: none;
}

.mockup-container .component.active {
    display: block;
}

.mockup-container .main-component .mockup-header {
    color: #ffffff;
    background: url(./../../../images/txt/discography/sanctuary/header-w.png) center center/100% no-repeat;
}

.mockup-container .main-component .mockup-body {
    padding-bottom: 24px;
    background: url(./../../../images/txt/discography/sanctuary/bg2.jpg) center/cover no-repeat;
}

.mockup-container .main-component .content {
    width: 84.3796711509716%;
    margin: 0 auto;
    padding-top: 2px;
}

.mockup-container .main-component .widget-grid-row {
    display: flex;
    gap: 0 8px;
}

.mockup-container .main-component .widget-grid-row + .widget-grid-row {
    margin-top: 10px;
}

.mockup-container .main-component .widget-grid-col {
    flex: 1 1 50%;
}

.mockup-container .main-component .widget-date {
    position: relative;
}

.mockup-container .main-component .widget-date::after {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.mockup-container .main-component .widget-date-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px 11px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.3);
}

.mockup-container .main-component .widget-date-header {
    display: flex;
    font-size: 8px;
    font-weight: 500;
    color: #ffffff;
    gap: 0 5px;
}

.mockup-container .main-component .widget-date-content {
    position: absolute;
    bottom: 10px;
    right: 11px;
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
    line-height: 1;
}

.mockup-container .main-component .widget-album {
    position: relative;
    padding: 9px 10px;
    display: flex;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    gap: 0 10px;
    cursor: pointer;
}

.mockup-container .main-component .widget-album .btn-like {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 16px;
}

.mockup-container .main-component .widget-album-thumb {
    flex: 0 0 56px;
    width: 56px;
}

.mockup-container .main-component .widget-album-content {
    flex: 1 1 1%;
    width: 1%;
}

.mockup-container .main-component .widget-album-header {
    display: flex;
    align-items: center;
    font-size: 7px;
    font-weight: 600;
    gap: 0 3px;
}

.mockup-container .main-component .widget-album-info {
    margin-top: 4px;
}

.mockup-container .main-component .widget-album-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.mockup-container .main-component .widget-album-artist {
    font-size: 8px;
    margin-top: 2px;
}

.mockup-container .main-component .widget-album-control {
    display: flex;
    align-items: center;
    gap: 0 4px;
    margin-top: 4px;
}

.mockup-container .main-component .widget-album-control [class*="btn"] {
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
}

.mockup-container .main-component .widget-album-control .btn-music-prev {
    background-image: url(../../../images/txt/discography/sanctuary/music-prev.svg);
    cursor: default;
}

.mockup-container .main-component .widget-album-control .btn-music-play {
    background-image: url(../../../images/txt/discography/sanctuary/music-play.svg);
}

.mockup-container .main-component .widget-album-control .btn-music-play.playing {
    background-image: url(../../../images/txt/discography/sanctuary/music-pause.svg);
}

.mockup-container .main-component .widget-album-control .btn-music-next {
    background-image: url(../../../images/txt/discography/sanctuary/music-next.svg);
    cursor: default;
}

.mockup-container .main-component .widget-schedule {
    display: block;
    width: 130px;
    /*padding: 9px 10px;*/
    /*background-color: rgba(255, 255, 255, 0.3);*/
    /*border-radius: 16px;*/
    cursor: pointer;
}

.mockup-container .main-component .widget-schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 8px;
}

.mockup-container .main-component .widget-schedule-more {
    position: relative;
    width: 15px;
    height: 15px;
}

.mockup-container .main-component .widget-schedule-more::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 100%;
    background: #1d1d1b;
}

.mockup-container .main-component .widget-schedule-more::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 1px;
    background: #1d1d1b;
}

.mockup-container .main-component .widget-schedule-list {
    color: #1d1d1b;
    font-size: 7px;
    line-height: 1;
    margin-top: 8px;
    overflow-y: auto;
    /*height: 152px;*/
    /*max-height: 152px;*/
    /*background-color: #fff;*/
    /*padding: 12px 10px;*/
    /*border-radius: 10px;*/
}

.mockup-container .main-component .widget-schedule-list > li {
    padding: 4px 0;
}

.mockup-container .main-component .widget-schedule-list > li + li {
    border-top: 1px solid #cdcdcd;
}

.mockup-container .main-component .widget-schedule-name {
    display: flex;
    align-items: stretch;
    gap: 0 4px;
    margin-top: 4px;
}

.mockup-container .main-component .widget-schedule-name::before {
    content: '';
    display: block;
    flex: 0 0 3px;
    width: 3px;
    background: rgb(33,88,153);
    background: linear-gradient(180deg, rgba(33,88,153,1) 0%, rgba(201,166,190,1) 100%);
    border-radius: 2px;
}

.mockup-container .main-component .widget-schedule-name > span {
    padding: 3px 0;
}

.mockup-container .main-component .widget-today {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #2a3962;
    padding: 0 8px 0 4px;
    margin-top: 10px;
}

.mockup-container .main-component .widget-today-date {
    font-weight: 300;
    font-size: 9px;
    line-height: 1.2;
}

.mockup-container .main-component .widget-today-time {
    display: flex;
    align-items: center;
    font-size: 18px;
    letter-spacing: -0.05em;
    line-height: 1.2;
}

.mockup-container .main-component .widget-today-time .hour,
.mockup-container .main-component .widget-today-time .min {
    display: block;
}

.mockup-container .main-component .tab-bar {
    /*position: absolute;*/
    /*bottom: 100px;*/
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
    width: 17.8%;
    margin: 10px auto 0;
}

.mockup-container .main-component .dock-bar {
    /*position: absolute;*/
    /*bottom: 20px;*/
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.mockup-container .main-component .dock-bar i {
    display: block;
}

.mockup-container .main-component .btn-app {
    display: block;
    width: 62px;
    margin-left: 7px;
    border-radius: 62px;
}

.mockup-container .main-component .btn-app + .btn-app {
    margin-top: 8px;
}

.mockup-container .main-component .btn-app .app-name {
    display: block;
    font-size: 8px;
    font-weight: 300;
    color: #2a3962;
    text-align: center;
}

.mockup-container .pip-component {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 250px;
    height: auto;
    z-index: 2;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, .75);
    overflow: hidden;
}

.mockup-container .pip-component .pip-layout {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 4;
}

.mockup-container .pip-component .pip-layout .pip-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 17px;
    height: 17px;
    background: url(../../../images/txt/discography/sanctuary/pip-close.svg) no-repeat center;
    background-size: 100% 100%;
}

.mockup-container .pip-component .pip-layout .pip-open {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 18px;
    background: url(../../../images/txt/discography/sanctuary/pip-open.svg) no-repeat center;
    background-size: 100% 100%;
}

.mockup-container .pip-component .pip-iframe {
    position: relative;
    width: 100%;
}

.mockup-container .pip-component .pip-iframe::after {
    content: "";
    display: block;
    padding-bottom: 56.25%;
}

.mockup-container .pip-component .pip-iframe .pip-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mockup-container .pip-component .pip-iframe .pip-iframe-play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../../images/txt/discography/sanctuary/video/TO_cn_ZesVQ.jpg) no-repeat center/cover;
    z-index: 3;
}

.mockup-container .pip-component .pip-iframe .pip-iframe-play::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: url(../../../images/btn-play.png) no-repeat center/cover;
    border: 3px solid rgba(255, 255, 255, 0.33);
    border-radius: 100%;
}

.mockup-container .pip-component .pip-iframe .pip-iframe-close {
    position: absolute;
    top: 0;
    right: 10px;
    transform: translateY(-120%);
    width: 32px;
    height: 32px;
    background: url(../../../images/btn_close_pop.png) no-repeat center/cover;
}

.mockup-container .pip-component.played .pip-layout {
    height: 100%;
}

.mockup-container .pip-component.played .pip-iframe .pip-iframe-play {
    display: none;
}

.mockup-container .pip-component.expand {
    display: flex;
    align-items: center;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .75);
}

.mockup-container .pip-component.expand .pip-layout {
    display: none;
}

.mockup-container .video-component .mockup-body {
    background: #fff;
}

.mockup-container .video-component .content {
    padding-top: 40px;
    padding-bottom: 204px;
}

.mockup-container .video-component .video-close {
    position: absolute;
    top: 38px;
    right: 18px;
    display: block;
    width: 16px;
    height: 16px;
}

.mockup-container .video-component .video-close::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #dfdfdf;
    width: 2px;
    height: 100%;
}

.mockup-container .video-component .video-close::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: #dfdfdf;
    width: 2px;
    height: 100%;
}

.mockup-container .video-component .yt-iframe {
    position: relative;
    overflow: hidden;
}

.mockup-container .video-component .yt-title-box {
    position: relative;
    padding: 12px 22px;
}

.mockup-container .video-component .yt-title-box .yt-name {
    font-size: 11px;
    font-weight: 500;
}

.mockup-container .video-component .yt-title-box .yt-artist {
    font-size: 8px;
    margin-top: 4px;
}

.mockup-container .video-component .yt-title-box .yt-date {
    font-size: 8px;
}

.mockup-container .video-component .yt-title-box .btn-like {
    position: absolute;
    top: 12px;
    right: 22px;
    width: 15px;
}

.mockup-container .video-component .yt-iframe::after {
    content: "";
    display: block;
    padding-bottom: 56.25%;
}

.mockup-container .video-component .yt-iframe .yt-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mockup-container .video-component .yt-iframe-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 2;
}

.mockup-container .video-component .yt-iframe-cover::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .35);
    z-index: 2;
}

.mockup-container .video-component .yt-iframe-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.mockup-container .video-component .yt-iframe-cover .btn-yt-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: url(../../../images/btn-play.png) no-repeat center/cover;
    z-index: 3;
    border: 3px solid rgba(255, 255, 255, 0.33);
    border-radius: 100%;
}

.mockup-container .video-component .yt-iframe.playing .yt-iframe-cover {
    display: none;
}

.mockup-container .video-component .yt-playlist-control {
    padding: 6px 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mockup-container .video-component .yt-playlist-item {
    display: flex;
    align-items: center;
    padding: 6px 5px;
    cursor: pointer;
}

.mockup-container .video-component .yt-playlist-item.on {
    background-color: #f5f5f5;
}

.mockup-container .video-component .yt-playlist-item .btn-move {
    position: relative;
    flex: 0 0 10px;
    width: 10px;
    height: 6px;
    margin-right: 4px;
    cursor: default;
}

.mockup-container .video-component .yt-playlist-item .btn-move::before,
.mockup-container .video-component .yt-playlist-item .btn-move::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: #727272;
    position: absolute;
    left: 0;
}

.mockup-container .video-component .yt-playlist-item .btn-move::before {
    top: 0;
}

.mockup-container .video-component .yt-playlist-item .btn-move::after {
    bottom: 0;
}

.mockup-container .video-component .yt-playlist-item .yt-playlist-thumb {
    position: relative;
    flex: 0 0 104px;
    width: 104px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 10px;
}

.mockup-container .video-component .yt-playlist-item .yt-playlist-thumb::after {
    content: "";
    display: block;
    padding-bottom: 56.25%;
}

.mockup-container .video-component .yt-playlist-item .yt-playlist-thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mockup-container .video-component .yt-playlist-item .yt-playlist-desc {
    position: relative;
    flex: 1 1;
}

.mockup-container .video-component .yt-playlist-item .yt-playlist-title {
    font-size: 8px;
}

.mockup-container .video-component .yt-playlist-item .yt-playlist-artist {
    font-size: 7px;
    margin-top: 3px;
}

.mockup-container .video-component .yt-playlist-item .yt-playlist-date {
    font-size: 7px;
}

.mockup-container .video-component .yt-playlist-item .btn-like {
    width: 14px;
    margin-top: 4px;
}

.mockup-container .video-component .bottom-symbol {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
}

.mockup-container .track-component .mockup-body {
    background: url(./../../../images/txt/discography/sanctuary/tracklist-bg.png) top center no-repeat;
    background-size: 100% auto;
    padding: 220px 20px 0;
}

.mockup-container .track-component .mockup-body .track-list li {
    position: relative;
    padding-top: 5px;
    border-radius: 8px;
    cursor: pointer;
}

.mockup-container .track-component .mockup-body .track-list li.active {
    background-color: #bfc8e6;
}

.mockup-container .track-component .mockup-body .track-list .btn-like {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 20px;
}

.mockup-container .track-component .track-close {
    position: absolute;
    top: 38px;
    right: 18px;
    display: block;
    width: 16px;
    height: 16px;
}

.mockup-container .track-component .track-close::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #dfdfdf;
    width: 2px;
    height: 100%;
}

.mockup-container .track-component .track-close::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: #dfdfdf;
    width: 2px;
    height: 100%;
}

.mockup-container .teaser-component .mockup-header {
    color: #fff;
    background: url(./../../../images/txt/discography/sanctuary/header-w.png) center center/100% no-repeat;
}

.mockup-container .teaser-component .mockup-body {
    background-color: #000;
}

.mockup-container .teaser-component .content {
    height: 100%;
}

.mockup-container .teaser-component .video-wrap {
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-container .teaser-component .video-box {
    position: absolute;
    display: block;
    width: 100%;
}

.mockup-container .teaser-component .video-box::after {
    content: "";
    display: block;
    padding-bottom: 177.77778%;
}

.mockup-container .teaser-component .video-box video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mockup-container .teaser-component .teaser-close {
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 40px;
    cursor: pointer;
    z-index: 1;
}

.mockup-container .call-component .mockup-header {
    color: #fff;
    background: url(./../../../images/txt/discography/sanctuary/header-w.png) center center/100% no-repeat;
}

.mockup-container .call-component .mockup-body {
    padding-top: 0;
    background: url(./../../../images/txt/discography/sanctuary/call-bg.png) center center/cover no-repeat;
}

.mockup-container .call-component .call-virtual-close {
    position: absolute;
    top: 466px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
}

.mockup-container .msg-component .content {
    position: relative;
}

.mockup-container .msg-component .msg-close {
    position: absolute;
    top: 8px;
    right: 18px;
    display: block;
    width: 16px;
    height: 16px;
}

.mockup-container .msg-component .msg-close::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #dfdfdf;
    width: 2px;
    height: 100%;
}

.mockup-container .msg-component .msg-close::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: #dfdfdf;
    width: 2px;
    height: 100%;
}

.mockup-container .schedule-component .mockup-body {
    background-color: #fff;
}

.mockup-container .schedule-component .content {
    position: relative;
    padding: 8px 8px 0;
}

.mockup-container .schedule-component .schedule-close {
    position: absolute;
    top: 8px;
    right: 18px;
    display: block;
    width: 16px;
    height: 16px;
}

.mockup-container .schedule-component .schedule-close::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #dfdfdf;
    width: 2px;
    height: 100%;
}

.mockup-container .schedule-component .schedule-close::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: #dfdfdf;
    width: 2px;
    height: 100%;
}

.mockup-container .schedule-component .schedule-detail-top {
    padding-top: 28px;
}

.mockup-container .schedule-component .schedule-detail-top img {
    width: 54%;
    margin: 0 auto;
}

.mockup-container .schedule-component .schedule-detail-list {
    color: #1d1d1b;
    margin-top: 20px;
    border-radius: 20px;
    background-color: #f5f5f5;
    padding: 20px;
    box-shadow: 0 0 3px rgba(0,0,0,0.07);
}

.mockup-container .schedule-component .schedule-detail-list li {
    padding: 10px 4px;
    display: flex;
    align-items: center;
}

.mockup-container .schedule-component .schedule-detail-list li + li {
    border-top: 1px solid #d1d1d1;
}

.mockup-container .schedule-component .schedule-detail-title {
    flex: 1 0;
    font-size: 13px;
    display: flex;
    align-items: stretch;
    gap: 0 6px;
    font-weight: 500;
}

.mockup-container .schedule-component .schedule-detail-title::before {
    content: '';
    display: block;
    width: 3px;
    background-color: #1d1d1b;
    border-radius: 2px;
}

.mockup-container .schedule-component .schedule-detail-text {
    flex: 0 1;
    font-size: 8px;
    line-height: 1;
    white-space: nowrap;
}

.mockup-container .photo-concept-component .mockup-body {
    background-color: #fff;
}

.mockup-container .photo-concept-component .content {
    position: relative;
}

.mockup-container .photo-concept-component .photo-concept-close {
    position: absolute;
    top: 8px;
    right: 18px;
    display: block;
    width: 16px;
    height: 16px;
}

.mockup-container .photo-concept-component .photo-concept-close::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #dfdfdf;
    width: 2px;
    height: 100%;
}

.mockup-container .photo-concept-component .photo-concept-close::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: #dfdfdf;
    width: 2px;
    height: 100%;
}

.mockup-container .photo-concept-component .photo-list-wrap {
    padding: 30px 20px 24px;
    height: 100%;
}

.mockup-container .photo-concept-component .photo-list-title {
    width: 50.42%;
    margin: 0 auto 20px;
}

.mockup-container .photo-concept-component .photo-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
}

.mockup-container .photo-concept-component .btn-photo-list.no-data {
    cursor: default;
}

.mockup-container .photo-concept-component .btn-photo-list {
    text-align: left;
}

.mockup-container .photo-concept-component .btn-photo-text {
    display: block;
    margin-top: 10px;
    padding-left: 12px;
    font-size: 10px;
}

.mockup-container .photo-concept-component .photo-list-symbol {
    width: 33.6%;
    margin: 272px auto 0;
}

.mockup-container .photo-component .mockup-body {
    background-color: #fff;
}

.mockup-container .photo-component .content {
    position: relative;
}

.mockup-container .photo-component .photo-close {
    position: absolute;
    top: 8px;
    right: 18px;
    display: block;
    width: 16px;
    height: 16px;
}

.mockup-container .photo-component .photo-close::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #dfdfdf;
    width: 2px;
    height: 100%;
}

.mockup-container .photo-component .photo-close::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: #dfdfdf;
    width: 2px;
    height: 100%;
}

.mockup-container .photo-component .photo-list-wrap {
    padding: 30px 20px 24px;
}

.mockup-container .photo-component .photo-list-title {
    width: 33.6%;
    margin: 0 auto 20px;
}

.mockup-container .photo-component .photo-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
}

.mockup-container .photo-component .btn-photo-list {
    text-align: left;
}

.mockup-container .photo-component .btn-photo-text {
    display: block;
    margin-top: 10px;
    padding-left: 12px;
    font-size: 10px;
}

.mockup-container .photo-component .photo-list-symbol {
    width: 33.6%;
    margin: 16px auto 0;
}

/* S : concept photo popup */
.concept-photo .photo-popup-wrap.home {
    /* max-width: 62.5vw; */
    margin: 0 auto;
}

.concept-photo .photo-popup-wrap.home .photo-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    background-color: rgba(22, 22, 22, 0.95);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.concept-photo .photo-popup-wrap.home .photo-popup.on {
    height: 100dvh;
    overflow: auto;
}

.concept-photo .photo-popup-wrap.home .photo-popup .picture {
    display: none;
    width: 900px;
    max-width: 90%;
    margin: auto;
}

.concept-photo .photo-popup-wrap.home .photo-popup .picture img {
    /* max-height: 75vh; */
    width: 100%;
}

.concept-photo .photo-popup-wrap.home .photo-popup .vertical .picture {
    max-width: 460px;
}

.concept-photo .photo-popup-wrap.home .photo-popup .picture.on {
    display: block;
}

.concept-photo .photo-popup-wrap.home .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;
}

.concept-photo .photo-popup-wrap.home .photo-popup .btn-download,
.concept-photo .photo-popup-wrap.home .photo-popup .btn-close-popup {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
}

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

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

.concept-photo .photo-popup-wrap.home .photo-popup .photo-popup-swiper {
    width: 100%;
    max-width: 1080px;
}

.concept-photo .photo-popup-wrap.home .photo-popup .photo-popup-swiper .picture {
    display: block;
    text-align: center;
}

.concept-photo .photo-popup-wrap.home .photo-popup .photo-popup-swiper .swiper-wrap {
    position: relative;
}

.concept-photo .photo-popup-wrap.home .photo-popup .photo-popup-swiper .btn-photo-popup-prev,
.concept-photo .photo-popup-wrap.home .photo-popup .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;
}

.concept-photo .photo-popup-wrap.home .photo-popup .photo-popup-swiper .btn-photo-popup-prev {
    background: url(../../../images/txt/discography/sanctuary/arrow-prev.png)
    no-repeat center/100%;
    left: 0;
}

.concept-photo .photo-popup-wrap.home .photo-popup .photo-popup-swiper .btn-photo-popup-next {
    background: url(../../../images/txt/discography/sanctuary/arrow-next.png)
    no-repeat center/100%;
    right: 0;
}

.concept-photo .photo-popup-wrap.home .photo-popup.photo-popup--17 .vertical .picture {
    max-width: 100%;
}

.concept-photo .photo-popup-wrap.home .photo-popup.photo-popup--17 .vertical .picture img {
    max-height: 65vh;
    width: auto;
}

@media screen and (max-width: 768px) {
    .kv-mockup {
        background: none;
        height: auto;
    }

    .mockup-container {
        position: static;
        transform: none;
        max-width: 100%;
        background: none;
        padding: 0;
        margin: 0;
    }

    .mockup-container .mockup::after {
        display: none;
    }

    .mockup-container .mockup-header {
        display: none;
        top: 4.32vw;
        width: 83.64445vw;
        height: 4.32vw;
    }

    .mockup-container .mockup-body {
        position: static;
        padding-top: 12.23vw;
        border-radius: 0;
        overflow: visible;
        background: #000;
    }

    .mockup-container .icon-heart {
        width: 6.47vw;
        height: 5.76vw;
    }

    .mockup-container .icon-music {
        width: 3.6vw;
        height: 3.6vw;
    }

    .mockup-container .icon-call,
    .mockup-container .icon-instagram,
    .mockup-container .icon-message,
    .mockup-container .icon-teaser,
    .mockup-container .icon-photo,
    .mockup-container .icon-video {
        width: 22.3vw;
        height: 22.3vw;
    }

    .mockup-container .main-component .mockup-body {
        padding-bottom: 8.63vw;
    }

    .mockup-container .main-component .content {
        width: 84.38vw;
        padding-top: 4.32vw;
    }

    .mockup-container .main-component .widget-grid-row + .widget-grid-row {
        margin-top: 3.6vw;
    }

    .mockup-container .main-component .widget-date-inner {
        padding: 5.4vw 3.96vw;
        border-radius: 5.76vw;
    }

    .mockup-container .main-component .widget-date-header {
        gap: 0 1.8vw;
    }

    .mockup-container .main-component .widget-date-content {
        bottom: 3.6vw;
        right: 3.96vw;
        font-size: 6.47vw;
    }

    .mockup-container .main-component .widget-album .btn-like {
        width: 6vw;
        right: 2.5vw;
    }

    .mockup-container .main-component .widget-album-thumb {
        flex: 0 0 20.14vw;
        width: 20.14vw;
    }

    .mockup-container .main-component .widget-album-info {
        margin-top: 1.44vw;
    }

    .mockup-container .main-component .widget-album-title {
        font-size: 4.32vw;
    }

    .mockup-container .main-component .widget-album-artist {
        font-size: 2.88vw;
        margin-top: 0.72vw;
    }

    .mockup-container .main-component .widget-schedule {
        width: 46.76vw;
        /*padding: 3.24vw 3.6vw;*/
        /*border-radius: 5.76vw;*/
    }

    .mockup-container .main-component .widget-album-header {
        font-size: 2.4vw;
        gap: 0 1vw;
    }

    .mockup-container .main-component .widget-schedule-header {
        font-size: 3vw;
    }

    .mockup-container .main-component .widget-schedule-more {
        width: 5.4vw;
        height: 5.4vw;
    }

    .mockup-container .main-component .widget-schedule-list {
        /*padding: 4.32vw 3.6vw;*/
        /*border-radius: 3.6vw;*/
        /*margin-top: 2.88vw;*/
        /*height: 54.68vw;*/
        /*max-height: 54.68vw;*/
    }

    .mockup-container .main-component .widget-schedule-list > li {
        padding: 1.44vw 0;
    }

    .mockup-container .main-component .widget-schedule-name {
        gap: 0 1.44vw;
        margin-top: 1.44vw;
    }

    .mockup-container .main-component .widget-today {
        padding: 0 2.66667vw 0 1.33333vw;
        margin-top: 3.33333vw;
    }

    .mockup-container .main-component .widget-today-date {
        font-size: 3.5vw;
    }

    .mockup-container .main-component .widget-today-time {
        font-size: 10vw;
        font-weight: 300;
    }

    .mockup-container .main-component .tab-bar {
        width: 17.8vw;
        margin: 3.6vw auto 0;
    }

    .mockup-container .main-component .dock-bar {
        margin-top: 7.19vw;
    }

    .mockup-container .main-component .btn-app {
        width: 22.3vw;
    }

    .mockup-container .main-component .btn-app .app-name {
        font-size: 2.4vw;
    }

    .mockup-container .pip-component {
        position: absolute;
        top: calc(104/768 * 100vw);
        width: calc(692/768 * 100vw);
    }

    .mockup-container .pip-component.expand {
        border-radius: 0;
    }

    .mockup-container .video-component .content {
        padding-top: calc(107/768 * 100vw);
        padding-bottom: calc(590/768 * 100vw);
    }

    .mockup-container .video-component .video-close {
        top: 14.88vw;
        right: 6.47vw;
        width: 5.76vw;
        height: 5.76vw;
    }

    .mockup-container .video-component .yt-iframe-cover .btn-yt-play {
        width: calc(100/768 * 100vw);
        height: calc(100/768 * 100vw);
    }

    .mockup-container .video-component .yt-title-box {
        padding: calc(35/768 * 100vw) calc(60/768 * 100vw);
    }

    .mockup-container .video-component .yt-title-box .yt-name {
        font-size: calc(29/768 * 100vw);
    }

    .mockup-container .video-component .yt-title-box .yt-artist {
        font-size: calc(23/768 * 100vw);
        margin-top: calc(4/768 * 100vw);
    }

    .mockup-container .video-component .yt-title-box .yt-date {
        font-size: calc(23/768 * 100vw);
    }

    .mockup-container .video-component .yt-title-box .btn-like {
        width: calc(44/768 * 100vw);
        top: calc(35/768 * 100vw);
        right: calc(60/768 * 100vw);
    }

    .mockup-container .video-component .yt-playlist-control {
        padding: 0 calc(60/768 * 100vw) calc(16/768 * 100vw);
    }

    .mockup-container .video-component .yt-playlist-item {
        padding: calc(16/768 * 100vw) calc(12/768 * 100vw);
    }

    .mockup-container .video-component .yt-playlist-item .btn-move {
        flex: 0 0 calc(30/768 * 100vw);
        width: calc(30/768 * 100vw);
        height: calc(18/768 * 100vw);
        margin-right: calc(9/768 * 100vw);
    }

    .mockup-container .video-component .yt-playlist-item .yt-playlist-thumb {
        flex: 0 0 calc(289/768 * 100vw);
        width: calc(289/768 * 100vw);
    }

    .mockup-container .video-component .yt-playlist-item .yt-playlist-title {
        font-size: calc(22/768 * 100vw);
    }

    .mockup-container .video-component .yt-playlist-item .yt-playlist-artist {
        font-size: calc(18/768 * 100vw);
        margin-top: calc(4/768 * 100vw);
    }

    .mockup-container .video-component .yt-playlist-item .yt-playlist-date {
        font-size: calc(18/768 * 100vw);
    }

    .mockup-container .video-component .yt-playlist-item .btn-like {
        width: calc(40/768 * 100vw);
    }

    .mockup-container .video-component .bottom-symbol {
        width: calc(200/768 * 100vw);
        bottom: calc(60/768 * 100vw);
    }

    .mockup-container .track-component .mockup-body {
        padding: 74vw 6vw 30vw;
    }

    .mockup-container .track-component .mockup-body .track-list li {
        padding-top: 2vw;
    }

    .mockup-container .track-component .track-close {
        top: 14.88vw;
        right: 6.47vw;
        width: 5.76vw;
        height: 5.76vw;
    }

    .mockup-container .track-component .mockup-body .track-list .btn-like {
        width: 7vw;
    }

    .mockup-container .photo-concept-component .photo-concept-close {
        top: 2.88vw;
        right: 6.47vw;
        width: 5.76vw;
        height: 5.76vw;
    }

    .mockup-container .photo-concept-component .photo-list-wrap {
        padding: 9.375vw 6.25vw 7.5vw;
    }

    .mockup-container .photo-concept-component .photo-list-title {
        width: 50.42%;
        margin: 0 auto 6.25vw;
    }

    .mockup-container .photo-concept-component .photo-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5vw 3.75vw;
    }

    .mockup-container .photo-concept-component .btn-photo-list {
        text-align: left;
    }

    .mockup-container .photo-concept-component .btn-photo-text {
        margin-top: 3.125vw;
        padding-left: 3.75vw;
        font-size: 3.125vw;
    }

    .mockup-container .photo-concept-component .photo-list-symbol {
        margin-top: 99.2vw;
    }

    .mockup-container .photo-component .photo-close {
        top: 2.88vw;
        right: 6.47vw;
        width: 5.76vw;
        height: 5.76vw;
    }

    .mockup-container .photo-component .photo-list-wrap {
        padding: 9.375vw 6.25vw 7.5vw;
    }

    .mockup-container .photo-component .photo-list-title {
        width: 33.6%;
        margin: 0 auto 6.25vw;
    }

    .mockup-container .photo-component .photo-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5vw 3.75vw;
    }

    .mockup-container .photo-component .btn-photo-list {
        text-align: left;
    }

    .mockup-container .photo-component .btn-photo-text {
        margin-top: 3.125vw;
        padding-left: 3.75vw;
        font-size: 3.125vw;
    }

    .mockup-container .photo-component .photo-list-symbol {
        margin-top: 3.9vw;
    }

    .mockup-container .teaser-component .mockup-body {
        height: 100vh;
        padding-top: 0;
    }

    .mockup-container .teaser-component .content {
        height: 100%;
    }

    .mockup-container .teaser-component .video-wrap {
        height: 100%;
    }

    .mockup-container .teaser-component .teaser-close {
        width: 12vw;
        height: 14vw;
    }

    .mockup-container .call-component .mockup-body {
        background: url(./../../../images/txt/discography/sanctuary/call-bg-mo.png) center center/cover no-repeat;
    }

    .mockup-container .call-component .call-virtual-close {
        position: absolute;
        top: 167vw;
        left: 50%;
        transform: translateX(-50%);
        width: 18vw;
        height: 18vw;
    }

    .mockup-container .msg-component .msg-close {
        top: 2.88vw;
        right: 6.47vw;
        width: 5.76vw;
        height: 5.76vw;
    }

    .mockup-container .schedule-component {
        min-height: 100vh;
    }

    .mockup-container .schedule-component .content {
        padding: 2.88vw 2.88vw 5vw;
    }

    .mockup-container .schedule-component .schedule-close {
        top: 2.88vw;
        right: 6.47vw;
        width: 5.76vw;
        height: 5.76vw;
    }

    .mockup-container .schedule-component .schedule-detail-top {
        padding-top: 10.07vw;
    }

    .mockup-container .schedule-component .schedule-detail-top img {
        width: 54vw;
    }

    .mockup-container .schedule-component .schedule-detail-list {
        margin-top: 7.19vw;
        border-radius: 7.19vw;
        padding: 7.19vw;
    }

    .mockup-container .schedule-component .schedule-detail-list li {
        padding: 3.6vw 1.44vw;
    }

    .mockup-container .schedule-component .schedule-detail-title {
        gap: 0 2.16vw;
    }

    .mockup-container .schedule-component .schedule-detail-title::before {
        width: 1.08vw;
    }

    .mockup-container .schedule-component .schedule-detail-text {
        font-size: 2.88vw;
    }

    /* S : concept photo swiper */
    .concept-photo .photo-popup-wrap.home {
        max-width: 100%;
    }

    .concept-photo .photo-popup-wrap.home .photo-swiper {
        padding: 0;
    }

    .concept-photo .photo-popup-wrap.home .photo-swiper .swiper-slide {
        height: 66.667vw;
    }

    .concept-photo .photo-popup-wrap.home .photo-swiper .btn-photo-prev,
    .concept-photo .photo-popup-wrap.home .photo-swiper .btn-photo-next {
        width: 4.314vw;
        height: 8.314vw;
        z-index: 10;
    }

    .concept-photo .photo-popup-wrap.home .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;
    }

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

    .concept-photo .photo-popup-wrap.home .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;
    }

    .concept-photo .photo-popup-wrap.home .photo-swiper .btn-photo-next.black {
        background: url(../../../../images/txt/discography/yeonjun/yeonjuns_mixtape_ggum/ui/arrow-next.png) no-repeat center/100%;
    }

    .concept-photo .photo-popup-wrap.home .photo-popup-swiper .swiper-wrapper {
        align-items: center;
    }

    .concept-photo .photo-popup-wrap.home .photo-popup-swiper .btn-photo-popup-prev,
    .concept-photo .photo-popup-wrap.home .photo-popup-swiper .btn-photo-popup-next {
        top: 55%;
        width: 4.314vw;
        height: 8.314vw;
        z-index: 10;
    }

    .concept-photo .photo-popup-wrap.home .photo-popup-swiper .btn-photo-popup-prev {
        background: url(../../../images/txt/discography/sanctuary/arrow-prev.png) no-repeat center/100%;
        left: 7.314vw;
    }

    .concept-photo .photo-popup-wrap.home .photo-popup-swiper .btn-photo-popup-next {
        background: url(../../../images/txt/discography/sanctuary/arrow-next.png) no-repeat center/100%;
        right: 7.314vw;
    }

    .concept-photo .photo-popup-wrap.home .photo-swiper-text-box {
        margin-top: 4.831vw;
    }

    .concept-photo .photo-popup-wrap.home .photo-popup .btn-download,
    .concept-photo .photo-popup-wrap.home .photo-popup .btn-close-popup {
        width: 10.9375vw;
        height: 10.9375vw;
        flex: 0 0 10.9375vw;
        background-size: contain;
    }

    .concept-photo .photo-popup-wrap.home .photo-popup .vertical .picture {
        max-width: 500px;
        width: 90%;
    }

    /* E : concept photo swiper */

    .txt-section-credit img.pc {
        display: none;
    }

    .txt-section-credit img.mo {
        display: block;
    }
}