@import url('../../../../fonts/GothicA1/GothicA1');

/* 공통 */
.face {
    background-color: #fff;
}

.face .album-detail {
    padding: 0;
    width: 100%;
    height: auto;
    overflow-y: hidden;
}

.face .album-detail>* {
    z-index: 5;

}

.face .album-detail>.bg {
    position: absolute;
    max-width: 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.face .album-detail .btn-list {
    top: 175px;
    z-index: 20;
}

.face .album-detail .contents {
    position: relative;
    padding-left: 44px;
}

.face .album-detail .contents>img {
    width: 100%;
    margin-bottom: 10px;
}

.face .album-detail .contents>.contents-desc {
    color: #fff;
}

.face .contents-sub {
    color: #fff;
    /* text-transform: none; */
}

.face .bottom ul li button>h3 {
    border-bottom: 2px solid transparent;
    box-sizing: content-box;
}

.face .bottom ul li.active button>h3,
.face .bottom ul li button:hover>h3 {
    color: #D25F4C !important;
    border-bottom: 2px solid #D25F4C;
}

.face .album-detail section:last-child {
    padding-bottom: 200px;
}

.face .album-detail .pc {
    display: inline-block;
}

.face .album-detail .mb {
    display: none;
}

/* 
    앨범 소개 상세 
*/
/* 0222버전 */
.face.face-0222 .album-info {
    padding: 0;
}

.face.face-0222 .album-info .contents-title {
    height: calc(100vh - 59px);
    margin: 0;
}

.face.face-0222 .album-detail section:last-child {
    padding: 0;
}

/* 0223버전 */
.face.face-0223 .album-info {
    padding: 0
}

.face.face-0223 .album-info .contents-title {
    margin-bottom: 0;
}

/* 0315 버전 */
.face.face-0315 .album-info,
.face.face-0317 .album-info {
    padding: 0
}

.face.face-0315 .album-info .contents-title,
.face.face-0317 .album-info .contents-title {
    margin-bottom: 0;
}



.face .album-info {
    display: block;
    background-color: #fff;
    padding: 0 0 65px;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 100%;
}

.face .album-info .contents-title {
    text-align: center;
    margin-bottom: 65px;
    background-image: url(../../../../images/bts/discography/jimin/face/ui/pc-section-1-bg.png);
    background-position: center;
    background-size: cover;
    height: 1090px;
    overflow: hidden;
}

.face .album-info .contents-title img {
    width: 1440px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.face.face-0324 .album-info .contents-title {
    background-image: none;
    height: auto;
}

.face.face-0324 .album-info .contents-title img {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}


.face .album-info .contents-obj {
    text-align: center;
}

.face .album-info .contents-obj img {
    width: 739px;
    margin-left: auto;
    margin-right: auto;
}

.face .album-info .contents-obj .text {
    display: block;
    position: relative;
    width: 755px;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
    font-family: 'NotoSansCJKkr';
    color: #D25F4C;
    line-height: 1.75;
}

.face .album-info .contents-obj .text.jpn>span,
.face .album-info .contents-obj .text.chn>span {
    word-break: break-all !important;
    word-wrap: break-word !important;
    white-space: break-spaces !important;
}

.face .album-info .contents-desc {
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
}

/* Promotion map */
.face.face-0223 .promotion-map {
    padding: 120px 0 60px;
}

/* Promotion map */
.face.face-0315 .promotion-map,
.face.face-0317 .promotion-map {
    padding: 120px 0 60px;
}

.face .promotion-map {
    max-width: 100%;
    padding: 45px 0 60px;
    background-color: #EFC0B0;
}

.face .promotion-map .contents-title {
    display: block;
    position: relative;
    text-align: center;
    margin-bottom: 31px;
}

.face .promotion-map .contents-title img {
    width: 408px;
}

.face .promotion-map .etc_inner {
    display: block;
    position: relative;
    width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

/* 1115 version */
.face.face-1115 .album-info {
    height: 100%;
}

.face.face-full-cover .album-info {
    height: 100vh;
    max-height: 1024px;
}

.face.face-1115 .album-info .contents-title,
.face.face-full-cover .album-info .contents-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.face.face-full-cover .album-detail>.bg {
    display: none;
}

/* Concept Photo  */
.face .album-photo {
    display: block;
    z-index: 1;
    padding: 45px 0 60px;
    margin-top: 0;
}

.face .album-photo .contents-title {
    display: block;
    position: relative;
    text-align: center;
    margin-bottom: 60px;
}

.face .album-photo .contents-title img {
    width: 115px;
}

.face .album-photo>.contents-img-title {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 155px;
}

.face .album-photo .bottom>ul>li {}

.face .album-photo .bottom>ul>li>button {}

.face .album-photo .bottom>ul>li>button>h3 {
    color: #fff;
}

.face .album-photo .slide-wrap {
    /* margin-top: 47px; */
}

.face .album-photo .slide-wrap>ul>li {
    display: none;
}

.face .album-photo .slide-wrap>ul>li>img {
    display: none;
}

.face .album-photo .slide-wrap>ul>li:first-child ul {
    height: 716px;
}

.face .album-photo .slide-wrap .btn-prev {
    background-image: url('./../../../../images/bts/discography/btn-prev-photo-ec869d.png');
}

.face .album-photo .slide-wrap .btn-prev.active {
    background-image: url('./../../../../images/bts/discography/btn-prev-photo-ec869d-shadow.png');
}

.face .album-photo .slide-wrap .btn-next {
    background-image: url('./../../../../images/bts/discography/btn-next-photo-ec869d.png');
}

.face .album-photo .slide-wrap .btn-next.active {
    background-image: url('./../../../../images/bts/discography/btn-next-photo-ec869d-shadow.png');
}

.face .album-photo .bottom ul {
    padding: 40px 0;
}

.face .album-photo .bottom .btn-1 img {
    width: 109px;
}

.face .album-photo .bottom .btn-2 img {
    width: 116px;
}

/* Album Video */
.face .album-video {
    max-width: 100%;
    padding: 45px 0 60px;
    background-color: #EFC0B0;
}

.face .album-video .contents-title {
    display: block;
    position: relative;
    text-align: center;
    margin-bottom: 56px;
}

.face .album-video .contents-title img {
    width: 116px;
}

.face .album-video>.contents-img-title {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 136px;
}

.face .album-video>.slide-wrap {
    /* margin-top: 47px; */
}

.face .album-video>.slide-wrap>ul>li:first-child>img {
    display: none;
    width: 89px;
}

.face .album-video>.slide-wrap>ul>li:last-child>img {
    display: none;
    width: 76px;
}

.face .album-video>.slide-wrap>ul>li.disabled {
    display: none !important;
}

.face .album-video .bottom .btn-1 img {
    width: 304px;
}

.face .album-video .bottom ul li.active button>h3,
.face .album-video .bottom ul li button:hover>h3 {
    color: #D25F4C !important;
    border-bottom: 2px solid #D25F4C;
}

.face .album-video .bottom.flex ul {
    display: flex;
    flex-wrap: wrap;
    max-width: 1280px;
}

.face .album-video .bottom.flex ul li {
    flex: 1 1 auto;
    width: 50%;
    padding: 10px 40px;
}

.face .album-video .bottom.flex ul li:nth-child(1) {
    text-align: right;

}

.face .album-video .bottom.flex ul li:nth-child(1) img {
    width: 304px;
}

.face .album-video .bottom.flex ul li:nth-child(2) {
    text-align: left;
}

.face .album-video .bottom.flex ul li:nth-child(2) img {
    width: 262px;
}

.face .album-video .bottom.flex ul li:nth-child(3) {
    text-align: right;
}

.face .album-video .bottom.flex ul li:nth-child(3) img {
    width: 230px;
}

.face .album-video .bottom.flex ul li:nth-child(4) {
    text-align: left;
}

.face .album-video .bottom.flex ul li:nth-child(4) img {
    width: 188px;
}


.face .album-video .bottom.flex ul li.single {
    width: 100%;
    text-align: center;
}

.face .album-video .bottom.flex ul li button {
    display: inline-block;
}

/* Track List */
.face .song-list {
    max-width: 100%;
    padding: 45px 0 60px;
    background-color: #EFC0B0;
}

.face .song-list>.contents-title {
    color: #d25f4c;
    text-shadow: none;
}

.face .song-list>.content-title>img {}

.face .song-list>.list-wrap {}

.face .song-list>.list-wrap>.list-inner {
    font-size: 17px;
}

.face .song-list>.list-wrap>.list-inner>ol {}

.face .song-list>.list-wrap>.list-inner>ol>li {
    font-family: 'NotoSansCJKkr-R';
    color: #d25f4c;
}

.face .song-list>.list-wrap>.list-inner>ol>li>.num {
    font-family: 'NotoSansCJKkr-R';
}

@media screen and (max-width: 1440px) {
    .face .album-detail>* {
        max-width: 100%;
    }

    .face .album-detail .contents {
        padding-left: 3vw;
    }

    .face .album-detail .btn-list {
        top: 12.15vw;
    }

    .face .album-detail section:last-child {
        padding-bottom: 35.34vw;
    }

    /* Album Info */
    .face .album-info {
        padding: 0 0 4.51vw;
    }

    .face .album-info .contents-title {
        margin-bottom: 4.51vw;
        height: 75.69vw;
    }

    .face .album-info .contents-title img {
        width: 100%;
    }

    .face .album-info .contents-obj img {
        width: 51.31vw;
        margin-left: auto;
        margin-right: auto;
    }

    .face .album-info .contents-obj .text {
        width: 55.8vw;
        font-size: 1.3vw;
    }

    .face .album-info .contents-desc {
        line-height: 1.5;
    }

    .face .album-info .contents-desc>span {
        white-space: break-spaces !important;
    }

    .chn .face .album-info .contents-desc {
        font-size: 1.18vw;
    }

    .jpn .face .album-info .contents-desc {
        font-size: 1.1vw;
    }

    /* Promotion Map */
    .face.face-0223 .promotion-map {
        padding: 8.33vw 0 4.16vw;
    }

    .face.face-0314 .promotion-map {
        padding: 8.33vw 0 4.16vw;
    }


    .face .promotion-map {
        padding: 3.12vw 0 4.16vw;
    }

    .face .promotion-map .contents-title {
        margin-bottom: 2.15vw;
    }

    .face .promotion-map .contents-title img {
        width: 28.33vw;
    }

    .face .promotion-map .etc_inner {
        width: 75vw;
    }

    /* Concept Photo */

    .face .album-photo {
        padding: 3.12vw 0 4.16vw;
    }

    .face .album-photo .contents-title {
        margin-bottom: 4.16vw;
    }

    .face .album-photo .contents-title img {
        width: 7.98vw;
    }

    .face .album-photo .slide-wrap>ul {
        width: 75vw;
    }

    .face .album-photo .slide-wrap>ul>li:first-child ul {
        height: 49.31vw;
    }


    .face .album-photo .thumbs>.thumb-list-wrap>ul>li {
        width: 5.76vw;
    }

    .face .album-photo .thumbs>.thumb-list-wrap>ul>li.portrait {
        width: 3.5vw;
    }

    .face .album-photo .thumbs>.thumb-list-wrap>ul>li.blue-print {
        width: 6.52vw;
    }


    .popup-slider>.slider-con .thumbs>.thumb-list-wrap>ul>li {
        width: 7.8vw;
    }

    .popup-slider>.slider-con .thumbs>.thumb-list-wrap>ul>li.portrait {
        width: 4.65vw;
    }

    .face .album-photo .bottom .btn-1 img {
        width: 7.5694444444vw;
    }

    .face .album-photo .bottom .btn-2 img {
        width: 8.0555555556vw;
    }

    /* Album Video */
    .face .album-video {
        padding: 3.12vw 0 4.16vw;
    }


    .face .album-video .contents-title {
        margin-bottom: 3.88vw;
    }

    .face .album-video .contents-title img {
        width: 9.375vw;
    }

    .face .album-video>.contents-img-title {
        width: 80.5vw;
    }

    .face .album-video .bottom {
        width: 100vw;
    }

    .face .album-video .bottom ul {
        max-width: 100%;
    }

    .face .album-video .bottom ul li {
        padding: 0.69vw 2.7vw;
    }

    .face .album-video .bottom.flex ul li {
        padding: 0.6944444444vw 2.7777777778vw
    }

    .face .album-video .bottom.flex ul li:nth-child(1) img {
        width: 21.1111vw;
    }

    .face .album-video .bottom.flex ul li:nth-child(2) img {
        width: 18.19vw;
    }

    .face .album-video .bottom.flex ul li:nth-child(3) img {
        width: 15.97vw;
    }

    .face .album-video .bottom.flex ul li:nth-child(4) img {
        width: 13vw;
    }


    /* Track List */
    .face .song-list {
        padding: 3.125vw 0 4.16vw;
    }

    .face .song-list>.list-wrap>.list-inner {
        font-size: 1.18vw;
    }
}

@media screen and (max-width:768px) {
    .face .album-detail section:last-child {
        padding-bottom: 40vw;
        margin-top: -1px;
    }

    .face .album-detail .pc {
        display: none;
    }

    .face .album-detail .mb {
        display: inline-block;
    }

    .face .album-desc .contents-obj {
        margin-bottom: 14vw;
    }

    .face .album-detail .contents {
        position: relative;
        padding-left: 0;
    }

    /* Album Info */
    .face .album-info {
        padding: 0 0 6.9010416667vw;
    }

    .face .album-info .contents-title {
        margin-bottom: 6.9010416667vw;
    }

    .face .album-info .contents-title img {
        top: 58%;
    }

    .face .album-info .contents-obj img {
        width: 85.31vw
    }

    .face .album-info .contents-obj .text {
        width: 80vw;
        font-size: 14px;
    }

    .face .album-info .contents-desc {
        padding: 0 3.2vw;
    }

    .chn .face .album-info .contents-desc {
        font-size: 3.10vw;
    }

    .jpn .face .album-info .contents-desc {
        font-size: 3vw;
    }

    /* Promotion Map */
    .face.face-0223 .promotion-map {
        padding: 10vw 0;
    }

    .face.face-0314 .promotion-map {
        padding: 10vw 0;
    }

    .face .promotion-map {
        padding: 5.7942708333vw 0;
    }

    .face .promotion-map .contents-title {
        margin-bottom: 4vw;
        line-height: 0;
        font-size: 0;
    }

    .face .promotion-map .contents-title img {
        width: 40vw;
    }

    .face .promotion-map .etc_inner {
        width: 90vw;
    }

    /* Concept Photo */
    .face .album-photo {
        padding: 5.7942708333vw 0;
    }

    .face .album-photo .contents-title {
        margin-bottom: 3.88vw;
    }

    .face .album-photo .contents-title img {
        width: 15.0390625vw;
    }

    .face .album-detail .album-photo .slide-wrap>ul>li .contents-sub img {
        width: 17.7734375vw;
    }

    .face .album-photo .etc_inner {
        width: 100vw;
    }

    .face .album-photo .slide-wrap>ul {
        width: 100%;
    }

    .face .album-photo .slide-wrap .btn-prev {
        display: block;
        margin-top: 0;
        transform: translateY(-125%);
        -webkit-transform: translateY(-125%);
        -moz-transform: translateY(-125%);
        -ms-transform: translateY(-125%);
        -o-transform: translateY(-125%);
    }

    .face .album-photo .slide-wrap .btn-next {
        display: block;
        margin-top: 0;
        transform: translateY(-125%);
        -webkit-transform: translateY(-125%);
        -moz-transform: translateY(-125%);
        -ms-transform: translateY(-125%);
        -o-transform: translateY(-125%);
    }

    .face .popup-slider,
    .face .album-photo .thumbs {
        display: none !important;
    }

    /* Album Video */
    .face .album-video {
        padding: 5.7942708333vw 0;
        margin-top: 0;
    }

    .face .album-video .contents-title {
        margin-bottom: 3.88vw;
    }

    .face .album-video .contents-title img {
        width: 15.1692708333vw;
    }

    .face .album-video>.slide-wrap {
        margin-top: 2.56vw;
    }

    .face .album-video>.contents-img-title {
        width: 9.44vw;
    }

    .face .album-video>.slide-wrap>ul>li {
        height: auto;
    }

    .face .album-video .slide-wrap>ul>li .contents-obj {
        height: 56vw !important;
    }

    .face .album-video .slide-wrap>ul>li .contents-sub-1 img {
        width: 39.5833333333vw;
    }

    .face .album-video .slide-wrap>ul>li .contents-sub-2 img {
        width: 33vw;
    }

    .face .album-video .slide-wrap>ul>li .contents-sub-3 img {
        width: 30vw;
    }

    .face .album-video .slide-wrap>ul>li .contents-sub-4 img {
        width: 28vw;
    }

    /* Track List */
    .face .song-list {
        padding: 17.5vw 0 25.97vw 10.69vw
    }

    .face .song-list>.list-wrap>.list-inner {
        font-size: 3.75vw;
    }
}