.wrapper.happy {
    overflow: visible;
}

.wrapper.happy .pc_only {
    display: block !important;
}

.wrapper.happy .m_only {
    display: none !important;
}

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

.happy .album-detail {
    background-color: #000;
    padding-top: 63px;
    padding-bottom: 0;
}

.happy .album-detail > * {
    max-width: 100%;
}

.happy .visual {
    position: relative;
    width: 100%;
    height: calc(100vh - 63px);
    background-color: #000;
}

.happy .visual .visual-logo {
    display: block;
    position: absolute;
    top: 25.3%;
    left: 50%;
    transform: translateX(-50%);
    width: 43.9%;
    z-index: 2;
}

.happy .visual .text-box {
    position: absolute;
    bottom: 16%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 100%;
}

.happy .visual .text-box.ko {
    max-width: 50.729167vw;
}

.happy .visual .text-box.en {
    max-width: 62.109375vw;
}

.happy .visual .text-box.jp {
    max-width: 56.015625vw;
}

.happy .visual .text-box.zh {
    max-width: 39.739583vw;
}

.happy .visual .text-box img {
    width: 100%;
}

.happy .visual .particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.happy .visual .particles .particle {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: #000;
}

.happy .section {
    height: 61.9vw;
    padding-top: 13.6979167vw;
}

/* S : happy */
.happy .happy-section {
    background: url(../../../../images/bts/discography/jin/happy/ui/promotion-bg.png) top center no-repeat;
    background-size: 100% auto;
}

.happy .happy-section .happy-section-logo {
    position: absolute;
    top: 3.59375vw;
    left: 50%;
    transform: translateX(-50%);
    width: 21.927083%;
}

.happy .happy-section .happy-section-content {
    position: relative;
    max-width: calc(2/3 * 100%);
    margin: 0 auto;
    padding: 0 8.333vw;
}

.happy .happy-section .btn-swiper-prev,
.happy .happy-section .btn-swiper-next {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3.385vw;
    height: 3.385vw;
    background: url(../../../../images/bts/discography/jin/happy/ui/happy-swiper-button.png) center no-repeat;
    background-size: 100% auto;
}

.happy .happy-section .btn-swiper-prev {
    left: 0;
}

.happy .happy-section .btn-swiper-next {
    right: 0;
}

.happy .happy-section .btn-goto {
    position: absolute;
    top: 0;
    right: 0;
    width: 6.771vw;
}

.happy .happy-section .btn-goto::after {
    content: "";
    display: block;
    padding-bottom: calc(116/407 * 100%);
}

.happy .happy-section .btn-goto-1 {
    top: 2.031vw;
    background: url(../../../../images/bts/discography/jin/happy/ui/tracklist-normal.png) center no-repeat;
    background-size: 100% 100%;
    transform-origin: right bottom;
    transform: rotate(-8deg);
}

.happy .happy-section .btn-goto-1:hover {
    background: url(../../../../images/bts/discography/jin/happy/ui/tracklist-mouseover.png) center no-repeat;
    background-size: 100% 100%;
}

.happy .happy-section .btn-goto-2 {
    top: 6.615vw;
    background: url(../../../../images/bts/discography/jin/happy/ui/promotion-schedule-normal.png) center no-repeat;
    background-size: 100% 100%;
    transform-origin: top left;
    transform: rotate(7deg);
}

.happy .happy-section .btn-goto-2:hover {
    background: url(../../../../images/bts/discography/jin/happy/ui/promotion-schedule-mouseover.png) center no-repeat;
    background-size: 100% 100%;
}
/* E : happy */

/* S : journey */
.happy .journey-section {
    background: url(../../../../images/bts/discography/jin/happy/ui/journey-bg.png) top center no-repeat;
    background-size: 100% auto;
    margin-top: -6.7vw;
    padding-top: 12.943vw;
}

.happy .journey-section .journey-section-logo {
    position: absolute;
    top: 1.823vw;
    left: 50%;
    transform: translateX(-50%);
    width: 21.927083%;
}

.happy .journey-section .journey-section-title {
    margin: 0 auto;
    width: 20.26%;
}
/* E : journey */

/* S : imagine */
.happy .imagine-section {
    background: url(../../../../images/bts/discography/jin/happy/ui/imagine-bg.png) top center no-repeat;
    background-size: 100% auto;
    margin-top: -6.7vw;
    padding-top: 12.943vw;
}

.happy .imagine-section .imagine-section-logo {
    position: absolute;
    top: 1.823vw;
    left: 50%;
    transform: translateX(-50%);
    width: 21.927083%;
}

.happy .imagine-section .imagine-section-title {
    margin: 0 auto;
    width: 18.489583%;
}

.happy .imagine-section .concept-photo .photo-swiper .btn-photo-prev,
.happy .imagine-section .concept-photo .photo-swiper .btn-photo-next {
    flex: 0 0 4.589vw;
    width: max(1.563vw, 2.865vw);
    height: max(1.563vw, 2.865vw);
    background: url(../../../../images/bts/discography/jin/happy/ui/imagine-swiper-button.png) center no-repeat;
    background-size: 100% auto;
}
/* E : imagine */

/* S : Navigate */
.happy .navigate-section {
    background: url(../../../../images/bts/discography/jin/happy/ui/navigate-bg.png) top center no-repeat;
    background-size: 100% auto;
    margin-top: -6.7vw;
    padding-top: 12.943vw;
}

.happy .navigate-section .navigate-section-logo {
    position: absolute;
    top: 1.823vw;
    left: 50%;
    transform: translateX(-50%);
    width: 21.927083%;
}

.happy .navigate-section .navigate-section-title {
    margin: 0 auto;
    width: 21%;
}

.happy .navigate-section .concept-photo .photo-swiper .btn-photo-prev,
.happy .navigate-section .concept-photo .photo-swiper .btn-photo-next {
    flex: 0 0 4.589vw;
    width: max(1.563vw, 2.865vw);
    height: max(1.563vw, 2.865vw);
    background: url(../../../../images/bts/discography/jin/happy/ui/navigate-swiper-button.png) center no-repeat;
    background-size: 100% auto;
}
/* E : Navigate */

/* S : MV 1 */
.happy .mv1-section {
    background: url(../../../../images/bts/discography/jin/happy/ui/mv1-bg.png) top center no-repeat;
    background-size: 100% auto;
    margin-top: -6.7vw;
    padding-top: 20.234vw;
}

.happy .mv1-section .mv1-section-logo {
    position: absolute;
    top: 3.125vw;
    left: 50%;
    transform: translateX(-50%);
    width: 20.052%;
}

.happy .mv1-section .album-video .slide-wrap > ul {
    max-width: 50%;
}

.happy .mv1-section .album-video .slide-wrap > ul > li .contents-obj {
    position: relative;
    height: auto;
    overflow: hidden;
}

.happy .mv1-section .album-video .slide-wrap > ul > li .contents-obj::after {
    content: "";
    display: block;
    padding-bottom: 56.25%;
}

.happy .mv1-section .album-video .slide-wrap > ul > li .contents-obj iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.happy .mv1-section .album-video .slide-wrap > ul > li .btn-play {
    position: absolute;
    top: 0;
    left: 0;
}

.happy .mv1-section .album-video .bottom ul {
    padding: 1.667vw 0;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.happy .mv1-section .album-video .bottom ul li {
    flex: 1 0 50%;
    max-width: 50%;
    text-align: center;
    opacity: 0.75;
    padding: 0;
}

.happy .mv1-section .album-video .bottom ul li.active {
    opacity: 1;
}

.happy .mv1-section .album-video .bottom ul li button {
    padding: 0;
}

.happy .mv1-section .album-video .bottom ul li:first-child button {
    max-width: 16.406vw;
}

.happy .mv1-section .album-video .bottom ul li:last-child button {
    max-width: 11.615vw;
}
/* E : MV 1 */

/* S : MV 2 */
.happy .mv2-section {
    background: url(../../../../images/bts/discography/jin/happy/ui/mv2-bg.png) top center no-repeat;
    background-size: 100% auto;
    margin-top: -6.7vw;
    padding-top: 20.234vw;
}

.happy .mv2-section .mv2-section-logo {
    position: absolute;
    top: 3.125vw;
    left: 50%;
    transform: translateX(-50%);
    width: 32.473958333%;
}

.happy .mv2-section .album-video .slide-wrap > ul {
    max-width: 50%;
}

.happy .mv2-section .album-video .slide-wrap > ul > li .contents-obj {
    position: relative;
    height: auto;
    overflow: hidden;
}

.happy .mv2-section .album-video .slide-wrap > ul > li .contents-obj::after {
    content: "";
    display: block;
    padding-bottom: 56.25%;
}

.happy .mv2-section .album-video .slide-wrap > ul > li .contents-obj iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.happy .mv2-section .album-video .slide-wrap > ul > li .btn-play {
    position: absolute;
    top: 0;
    left: 0;
}

.happy .mv2-section .album-video .bottom ul {
    padding: 1.667vw 0;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.happy .mv2-section .album-video .bottom ul li {
    flex: 1 0 50%;
    max-width: 50%;
    text-align: center;
    opacity: 0.75;
    padding: 0;
}

.happy .mv2-section .album-video .bottom ul li.active {
    opacity: 1;
}

.happy .mv2-section .album-video .bottom ul li button {
    padding: 0;
}

.happy .mv2-section .album-video .bottom ul li:first-child button {
    max-width: 16.406vw;
}

.happy .mv2-section .album-video .bottom ul li:last-child button {
    max-width: 12.29167vw;
}
/* E : MV 2 */

/* S : concept photo swiper */
.happy .concept-photo {
    margin: 6.563vw auto 0;
}

.happy .concept-photo .photo-swiper {
    position: relative;
    box-sizing: content-box;
    max-width: 62.5%;
    margin: 0 auto;
}

.happy .concept-photo .photo-swiper .swiper-wrap {
    max-width: 80%;
    margin: 0 auto;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.happy .concept-photo .photo-swiper .swiper-wrap.on {
    height: auto;
    overflow: visible;
    visibility: visible;
}

.happy .concept-photo .photo-swiper .swiper-slide::after {
    content: "";
    display: block;
    padding-bottom: 56.25%;
}

.happy .concept-photo .photo-swiper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.happy .concept-photo .photo-swiper .btn-photo-prev,
.happy .concept-photo .photo-swiper .btn-photo-next {
    display: block;
    width: max(1.563vw, 3.255vw);
    height: max(1.563vw, 3.255vw);
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    background: url(../../../../images/bts/discography/jin/happy/ui/journey-swiper-button.png) no-repeat center/100%;
}

.happy .concept-photo .photo-swiper .btn-photo-prev {
    left: 0;
}

.happy .concept-photo .photo-swiper .btn-photo-next {
    right: 0;
}

.happy .concept-photo .photo-swiper-text-box {
    max-width: 16.432%;
    margin: 1.641vw auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

.happy .concept-photo .photo-swiper-text-box .pagination .item.on {
    opacity: 1;
}

/* E : concept photo swiper */

/* S : concept photo popup */
.happy .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;
}

.happy .concept-photo .photo-popup.on {
    display: flex;
}

.happy .concept-photo .photo-popup .picture {
    display: none;
    max-width: 50%;
}

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

.happy .concept-photo .photo-popup .picture img {
    max-height: 70vh;
    margin: 0 auto;
}

.happy .concept-photo .photo-popup .btn-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0 0.521vw;
    margin-bottom: 0.833vw;
}

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

.happy .concept-photo .photo-popup .btn-download {
    background: url(./../../../../images/bts/discography/v/friends/ui/btn-download.png) center/100% no-repeat;
}

.happy .concept-photo .photo-popup .btn-close-popup {
    background: url(./../../../../images/bts/discography/v/friends/ui/btn-close-popup.png) center/100% no-repeat;
}

/* E : concept photo popup */

@media screen and (max-width: 1440px) {
    .happy .visual .particles .particle {
        width: 20px;
        height: 20px;
    }
}

@media screen and (max-width: 768px) {
    .wrapper.happy .pc_only {
        display: none !important;
    }

    .wrapper.happy .m_only {
        display: block !important;
    }

    .happy .album-detail {
        padding-top: 56px;
    }

    .happy .visual {
        padding: 6.52173vw 20px 30vw;
        height: auto;
    }

    .happy .visual .visual-logo {
        top: 18.3%;
    }

    .happy .visual .particles {
        position: relative;
        height: auto;
    }

    .happy .visual .particles::after {
        content: "";
        display: block;
        padding-bottom: 70.0265%;
    }

    .happy .visual .particles .particle {
        width: 2.4154vw;
        height: 2.4154vw;
    }

    .happy .visual .text-box {
        bottom: 7%;
    }

    .happy .visual .text-box.ko {
        max-width: 84.22459893048128%;
    }

    .happy .visual .text-box.en {
        max-width: 93.31550802139037%;
    }

    .happy .visual .text-box.jp {
        max-width: 88.50267379679144%;
    }

    .happy .visual .text-box.zh {
        max-width: 84.22459893048128%;
    }

    .happy .section {
        height: 102.9vw;
        padding: 25.121vw 10px 0;
    }

    .happy .happy-section {
        background: url(../../../../images/bts/discography/jin/happy/ui/promotion-bg-m.png) top center no-repeat;
        background-size: 100% auto;
    }

    .happy .happy-section .happy-section-content {
        max-width: 100%;
        padding: 0 9.333vw;
    }

    .happy .happy-section .btn-goto {
        width: 7.771vw;
    }

    .happy .happy-section .btn-goto-1 {
        top: 2.899vw;
    }

    .happy .happy-section .btn-goto-2 {
        top: 9.662vw;
    }

    /* S : journey */
    .happy .journey-section {
        background: url(../../../../images/bts/discography/jin/happy/ui/journey-bg-m.png) top center no-repeat;
        background-size: 100% auto;
        padding: 17.15vw 0 0;
    }

    .happy .journey-section .journey-section-logo {
        top: 4.106vw;
        width: 23.671%;
    }

    .happy .journey-section .journey-section-title {
        display: none;
    }
    /* E : journey */

    /* S : imagine */
    .happy .imagine-section {
        background: url(../../../../images/bts/discography/jin/happy/ui/imagine-bg-m.png) top center no-repeat;
        background-size: 100% auto;
        padding: 17.15vw 0 0;
    }

    .happy .imagine-section .imagine-section-logo {
        top: 4.106vw;
        width: 23.671%;
    }

    .happy .imagine-section .imagine-section-title {
        display: none;
    }

    .happy .imagine-section .concept-photo .photo-swiper-text-box .btn-photo-prev,
    .happy .imagine-section .concept-photo .photo-swiper-text-box .btn-photo-next {
        flex: 0 0 4.106vw;
        width: 4.106vw;
        height: 4.106vw;
        background: url(../../../../images/bts/discography/jin/happy/ui/imagine-swiper-button.png) center no-repeat;
        background-size: 100% auto;
    }
    /* E : imagine */

    /* S : navigate */
    .happy .navigate-section {
        background: url(../../../../images/bts/discography/jin/happy/ui/navigate-bg-m.png) top center no-repeat;
        background-size: 100% auto;
        padding: 17.15vw 0 0;
    }

    .happy .navigate-section .navigate-section-logo {
        top: 4.106vw;
        width: 23.671%;
    }

    .happy .navigate-section .navigate-section-title {
        display: none;
    }

    .happy .navigate-section .concept-photo .photo-swiper-text-box .btn-photo-prev,
    .happy .navigate-section .concept-photo .photo-swiper-text-box .btn-photo-next {
        flex: 0 0 4.106vw;
        width: 4.106vw;
        height: 4.106vw;
        background: url(../../../../images/bts/discography/jin/happy/ui/navigate-swiper-button.png) center no-repeat;
        background-size: 100% auto;
    }
    /* E : navigate */

    /* S : MV 1 */
    .happy .mv1-section {
        background: url(../../../../images/bts/discography/jin/happy/ui/mv1-bg-m.png) top center no-repeat;
        background-size: 100% auto;
        margin-top: -6.7vw;
        padding: 24.155vw 0 7.6vw;
        height: auto;
    }

    .happy .mv1-section .album-video {
        margin-top: 0;
    }

    .happy .mv1-section .album-video .slide-wrap > ul {
        max-width: 100%;
    }

    .happy .mv1-section .album-video .slide-wrap > ul > li:first-child .contents-sub {
        max-width: 37.923vw;
        margin: 0 auto;
    }

    .happy .mv1-section .album-video .slide-wrap > ul > li:last-child .contents-sub {
        max-width: 27.053vw;
        margin: 0 auto;
    }
    /* E : MV 1 */

    /* S : MV 2 */
    .happy .mv2-section {
        background: url(../../../../images/bts/discography/jin/happy/ui/mv2-bg-m.png) top center no-repeat;
        background-size: 100% auto;
        margin-top: -6.7vw;
        padding: 24.155vw 0 7.6vw;
        height: auto;
    }

    .happy .mv2-section .mv2-section-logo {
        width: 32.36714975845411%;
    }

    .happy .mv2-section .album-video {
        margin-top: 0;
    }

    .happy .mv2-section .album-video .slide-wrap > ul {
        max-width: 100%;
    }

    .happy .mv2-section .album-video .slide-wrap > ul > li:first-child .contents-sub {
        max-width: 39.61352657004831%;
        margin: 0 auto;
    }

    .happy .mv2-section .album-video .slide-wrap > ul > li:last-child .contents-sub {
        max-width: 28.5024154589372%;
        margin: 0 auto;
    }
    /* E : MV 1 */

    /* S : concept photo */
    .happy .concept-photo {
        margin: 0;
    }

    .happy .concept-photo .photo-swiper {
        max-width: 100%;
        padding: 0 5.314vw;
    }

    .happy .concept-photo .photo-swiper .swiper-wrap {
        max-width: 100%;
    }

    .happy .concept-photo .photo-swiper .swiper-slide::after {
        padding-bottom: 67.25%;
    }

    .happy .concept-photo .photo-swiper .btn-photo-prev,
    .happy .concept-photo .photo-swiper .btn-photo-next {
        display: none;
    }

    .happy .concept-photo .photo-swiper-text-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 100%;
        margin: 6.28vw auto 0;
        padding: 0 7.729vw;
    }

    .happy .concept-photo .photo-swiper-text-box img {
        max-width: 46.37681%;
        margin: 0 auto;
    }

    .happy .concept-photo .photo-swiper-text-box .btn-photo-prev,
    .happy .concept-photo .photo-swiper-text-box .btn-photo-next {
        flex: 0 0 4.589vw;
        width: 4.589vw;
        height: 4.589vw;
        background: url(../../../../images/bts/discography/jin/happy/ui/journey-swiper-button.png) center no-repeat;
        background-size: 100% auto;
    }
    /* E : concept photo */

    /* S : concept photo popup */
    .happy .concept-photo .photo-popup .picture {
        max-width: 90%;
    }

    .happy .concept-photo .photo-popup .btn-group {
        margin-bottom: 1.5vw;
    }
    /* E : concept photo popup */
}