@import url('./../../../../fonts/Pretendard/pretendard.css');

/* header */
.echo .header-bts.jin {background-color: #640528;}
.echo .header-bts.jin .gnb .btn-gnb {
    background: url(./../../../../images/bts/discography/jin/echo/ui/btn-gnb.png) no-repeat center;
}
.echo .header-bts.jin .gnb.active .btn-gnb {
    background: url(./../../../../images/bts/discography/jin/echo/ui/btn-gnb_active.png) no-repeat center;
}

.echo .header-bts.jin .lang_opt button {color: #50c8e1;}

/* common */
.echo .album-detail .display-mo {display: none;}
.echo .album-detail .display-pc {display: block;}
.echo .album-detail {padding-top: 0;padding-bottom: 0;font-family: 'Pretendard', sans-serif;}
.echo .album-detail img {max-width: 100%;}
.echo .album-detail > * {max-width: 100%;}

/* visual */
.echo .album-detail .visual {position: relative;padding-top: 63px;}
.echo .album-detail .visual-text {width: 100%;
    max-width: 680px;position: absolute;bottom: calc(188/1920 * 100vw);left: 50%;transform: translateX(-50%);text-align: center;font-size: calc(15/1920 * 100vw);color: #ffffff;line-height: 1.5;font-family: 'Pretendard', 'NotoSansCJKjp-M', 'NotoSansCjkcn-M', sans-serif;text-shadow: 1px 1px rgba(0,0,0,0.2);}

/* promotion map */
.echo .album-detail .promotion-map {background-color: #cecaca;text-align: center;padding: calc(100/1920 * 100vw) 0 calc(50/1920 * 100vw);display: flex;justify-content: center;}
.echo .album-detail .promotion-map img {max-width: calc(1297/3840 * 100%);}

/* track-list */
.echo .album-detail .track-list {background-color: #cecaca;text-align: center;padding: calc(50/1920 * 100vw) 0 calc(200/1920 * 100vw);display: flex;justify-content: center;}
.echo .album-detail .track-list img {max-width: calc(1297/3840 * 100%);}

/* polaroid diary */
.echo .album-detail .polaroid img {}

/* concept photo */
.echo .album-detail .concept-photo {padding: calc(135/1920 * 100vw) 0 calc(110/1920 * 100vw);max-width: 100%;}
.echo .album-detail .concept-photo-title {max-width: 50%;margin: 0 auto calc(69/1920 * 100vw);}
.echo .album-detail .concept-photo .swiper-box {position: relative;max-width: calc(1291/1920 * 100%); margin: 0 auto; padding: 0 calc(163/1920 * 100vw);}
.echo .album-detail .concept-photo .swiper-slide::after {content: "";display: block;padding-bottom: calc(1080 / 1920 * 100%);}
.echo .album-detail .concept-photo .swiper-slide img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;object-fit: contain;}
.echo .album-detail .concept-photo .btn-swiper-prev,
.echo .album-detail .concept-photo .btn-swiper-next {position: absolute;top: 50%;transform: translateY(-50%);background-repeat: no-repeat;background-size: contain;background-position: center;width: calc(82/1920 * 100vw);height: calc(82/1920 * 100vw);z-index: 2;}
.echo .album-detail .concept-photo .btn-swiper-prev {left: 0;}
.echo .album-detail .concept-photo .btn-swiper-next {right: 0;}
.echo .album-detail .concept-photo .concept-photo-text {max-width: calc(1291 / 1920 * 100%); margin: 0 auto; padding: calc(66/1920 * 100vw) calc(163 / 1920 * 100vw) 0;text-align: right;font-size: calc(25/1920 * 100vw);font-weight: 800;}

.echo .album-detail .concept-photo--1 {background: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-bg-01.jpg) no-repeat center;}
.echo .album-detail .concept-photo--1 .btn-swiper-prev {background-image: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-arrow-prev-01.png);}
.echo .album-detail .concept-photo--1 .btn-swiper-next {background-image: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-arrow-next-01.png);}
.echo .album-detail .concept-photo--2 {background: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-bg-02.jpg) no-repeat center/cover;}
.echo .album-detail .concept-photo--2 .btn-swiper-prev {background-image: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-arrow-prev-02.png);}
.echo .album-detail .concept-photo--2 .btn-swiper-next {background-image: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-arrow-next-02.png);}
.echo .album-detail .concept-photo--3 {background: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-bg-03.jpg) no-repeat center/cover;}
.echo .album-detail .concept-photo--3 .btn-swiper-prev {background-image: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-arrow-prev-03.png);}
.echo .album-detail .concept-photo--3 .btn-swiper-next {background-image: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-arrow-next-03.png);}

/* photo popup */
.echo .album-detail .photo-popup {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100dvh;background-color: rgba(22, 22, 22, 0.95);z-index: 1101;align-items: center;justify-content: center;}
.echo .album-detail .photo-popup.on {display: flex;}
.echo .album-detail .photo-popup .picture {display: none;width: 600px;max-width: 90%;text-align: center;}
.echo .album-detail .photo-popup .picture.on {display: block;}
.echo .album-detail .photo-popup .picture img {max-height: 70vh;}
.echo .album-detail .photo-popup .btn-group {display: flex;align-items: center;justify-content: flex-end;gap: 0 10px;margin-bottom: 16px;}
.echo .album-detail .photo-popup .btn-download,
.echo .album-detail .photo-popup .btn-close-popup {width: 50px;height: 50px;flex: 0 0 50px;}
.echo .album-detail .photo-popup .btn-download {background: url(./../../../../images/bts/discography/rm/rpwp/ui/btn-download.png) center/100% no-repeat;}
.echo .album-detail .photo-popup .btn-close-popup {background: url(./../../../../images/bts/discography/rm/rpwp/ui/btn-close-popup.png) center/100% no-repeat;}

/* video */
.echo .album-detail .album-video {padding: calc(51/1920 * 100vw) 0 calc(105/1920 * 100vw);background: url(../../../../images/bts/discography/jin/echo/ui/video-bg.jpg) no-repeat center/cover;}
.echo .album-detail .album-video .album-video-title {max-width: calc(872/1920 * 100%); margin: 0 auto calc(10/1920 * 100vw);}
.echo .album-detail .album-video .slide-wrap {margin: 0;}
.echo .album-detail .album-video .slide-wrap > ul {max-width: 50%;}
.echo .album-detail .album-video .slide-wrap > ul > li {position: absolute !important; opacity: 0;display: none !important;}
.echo .album-detail .album-video .slide-wrap > ul > li.active {position: relative !important; opacity: 1;display: block !important;}
.echo .album-detail .album-video .slide-wrap > ul > li .contents-obj {position: relative;height: auto;}
.echo .album-detail .album-video .slide-wrap > ul > li .contents-obj::after {content: '';display: block;padding-bottom: 56.25%;}
.echo .album-detail .album-video .slide-wrap > ul > li .btn-play {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.echo .album-detail .album-video .bottom ul {padding: calc(60/1920 * 100vw) 0 0;max-width: 50%;}
.echo .album-detail .album-video .bottom ul li {opacity: 0.5;padding: 0 calc(30/1920 * 100vw);}
.echo .album-detail .album-video .bottom ul li.active {opacity: 1;}
.echo .album-detail .album-video .bottom button .contents-sub {font-size: calc(25/1920 * 100vw);font-weight: 400;font-family: 'Pretendard', sans-serif;}
.echo .album-detail .album-video .bottom button .contents-sub strong {font-weight: 700;}
.echo .album-detail .album-video .bottom button:hover .contents-sub {color: #333;}

@media screen and (max-width: 1440px) {
    .echo .album-detail .album-video .bottom {width: 100%;}
}

@media screen and (max-width: 768px) {
    /* header */
    .echo .header-bts.jin .gnb .btn-gnb {
        background: url(./../../../../images/bts/discography/jin/echo/ui/btn-gnb-m.png) no-repeat center/100%;
    }
    .echo .header-bts.jin .gnb.active .btn-gnb {
        background: url(./../../../../images/bts/discography/jin/echo/ui/btn-gnb-m_active.png) no-repeat center/100%;
    }
    .echo .header-bts.jin {background-color: #640528;}
    .echo .header-bts .logo.jin img {width: auto;}

    /* common */
    .echo .album-detail .display-mo {display: block;}
    .echo .album-detail .display-pc {display: none;}
    .echo .album-detail {padding-top: 12.5vw;}

    /* visual */
    .echo .album-detail .visual {padding-top: 0;}
    .echo .album-detail .visual-text {bottom: calc(125/1242 * 100vw);font-size: calc(32/1242 * 100vw);padding: 0 calc(110/1242 * 100vw);}
    .echo .album-detail .visual-text br {display: none;}

    /* promotion map */
    .echo .album-detail .promotion-map {padding: 0;}
    .echo .album-detail .promotion-map img {max-width: 100%;}

    /* track list */
    .echo .album-detail .track-list {padding: 0;}
    .echo .album-detail .track-list img {max-width: 100%;}

    /* concept photo */
    .echo .album-detail .concept-photo {padding: 0;}
    .echo .album-detail .concept-photo-title {max-width: 100%;padding: calc(72/1242 * 100vw) calc(60/1242 * 100vw);margin: 0;}
    .echo .album-detail .concept-photo .swiper-box {max-width: 100%;padding: 0;}
    .echo .album-detail .concept-photo .btn-swiper-prev,
    .echo .album-detail .concept-photo .btn-swiper-next {width: calc(96/1242 * 100vw);}
    .echo .album-detail .concept-photo .btn-swiper-prev {left: calc(52/1242 * 100vw);}
    .echo .album-detail .concept-photo .btn-swiper-next {right: calc(52/1242 * 100vw);}
    .echo .album-detail .concept-photo .concept-photo-text {text-align: center; padding: calc(174/1242 * 100vw) 0 calc(154/1242 * 100vw); font-size: calc(80/1242 * 100vw);}

    .echo .album-detail .concept-photo--1 {background: #50c8e1;}
    .echo .album-detail .concept-photo--1 .btn-swiper-prev {background-image: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-arrow-prev-01-mo.png);}
    .echo .album-detail .concept-photo--1 .btn-swiper-next {background-image: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-arrow-next-01-mo.png);}
    .echo .album-detail .concept-photo--2 {background: #f05aa0;}
    .echo .album-detail .concept-photo--2 .btn-swiper-prev {background-image: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-arrow-prev-02-mo.png);}
    .echo .album-detail .concept-photo--2 .btn-swiper-next {background-image: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-arrow-next-02-mo.png);}
    .echo .album-detail .concept-photo--3 {background: #ffed55;}
    .echo .album-detail .concept-photo--3 .btn-swiper-prev {background-image: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-arrow-prev-03-mo.png);}
    .echo .album-detail .concept-photo--3 .btn-swiper-next {background-image: url(../../../../images/bts/discography/jin/echo/ui/concept-photo-arrow-next-03-mo.png);}

    /* video */
    .echo .album-detail .album-video {margin: 0;padding: 0;background: url(../../../../images/bts/discography/jin/echo/ui/video-bg-mo.jpg) no-repeat center/cover;}
    .echo .album-detail .album-video .album-video-title {max-width: 100%;padding: calc(42/1242 * 100vw) calc(50/1242 * 100vw) calc(20/1242 * 100vw);}
    .echo .album-detail .album-video .slide-wrap > ul {max-width: 100%;}
    .echo .album-detail .album-video .slide-wrap > ul > li {margin: 0;}
    .echo .album-detail .album-video .slide-wrap > ul > li .contents-sub {display: none;}
    .echo .album-detail .album-video .bottom {display: block;width: 100%;}
    .echo .album-detail .album-video .bottom ul {display: block;max-width: 100%;padding: calc(119/1242 * 100vw) 0 calc(110/1242 * 100vw);text-align: center;}
    .echo .album-detail .album-video .bottom ul li {display: flex;justify-content: center;}
    .echo .album-detail .album-video .bottom ul li + li {margin-top: calc(72/1242 * 100vw);}
    .echo .album-detail .album-video .bottom button .contents-sub {font-size: calc(57/1242 * 100vw);}
}