/* Photo */
.bts-section-photo {}

.bts-section-photo>.con {
    background-color: #fff;
    padding-top: 200px;
    padding-bottom: 151px;
}

.bts-section-photo>.con>.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgb(198, 197, 197);
    background: linear-gradient(90deg, rgba(198, 197, 197, 1) 0%, rgba(148, 147, 147, 1) 15%, rgba(96, 95, 95, 1) 30%, rgba(54, 54, 54, 1) 45%, rgba(25, 24, 24, 1) 56%, rgba(6, 6, 6, 1) 66%, rgba(0, 0, 0, 1) 71%, rgba(0, 0, 0, 1) 100%);
}

.bts-section-photo>.con>.header>.img {
    display: block;
    position: relative;
    width: 100%;
    height: 72px;
    background-image: url('./../../../images/bts/discography/proof/ui/pc-section-2-proof-2.png');
    background-position: 0;
    background-size: 145px 48px;
    background-repeat: repeat-x;
    animation: photo-header-marquee 5s infinite linear;
    -webkit-animation: photo-header-marquee 5s infinite linear;
}

@keyframes photo-header-marquee {
    0% {
        background-position: 0;
    }

    100% {
        background-position: -145px;
    }
}

.bts-section-photo>.con>.title-img {
    margin-bottom: 76px;
}

.bts-section-photo>.con>.title-img>img {
    width: 222px;
}

.bts-section-photo>.con>.pc {
    display: block;
}

.bts-section-photo>.con>.mb {
    display: none;
}

.bts-section-photo>.con>.pc>.top-control {
    display: inline-block;
    width: 400px;
    margin-bottom: 97px;
}

.bts-section-photo>.con>.pc>.top-control>ul {
    display: flex;
}

.bts-section-photo>.con>.pc>.top-control>ul>li {
    flex: 1 1 auto;
    width: 50%;
    text-align: center;
}

.bts-section-photo>.con>.pc>.top-control>ul>li>button {
    display: inline-block;
    font-family: 'Monte Stella';
    color: #828282;
    font-weight: 400;
    font-size: 40px;
}

.bts-section-photo>.con>.pc>.top-control>ul>li.on>button {
    border-bottom: 3px solid #828282;
}

.bts-section-photo>.con>.pc>.photo-swiper-wrap {
    display: block;
    position: relative;
    text-align: center;
    margin-bottom: 105px;
}

.bts-section-photo>.con>.pc>.photo-swiper-wrap>ul {
    display: inline-block;
    width: 1090px;
    height: 720px;
    background-image: url('./../../../images/bts/discography/proof/ui/pc-section-3-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.bts-section-photo>.con>.pc>.photo-swiper-wrap>ul>li {
    display: block;
    position: absolute;
    width: 1100px;
    height: 720px;
    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%);
    /* opacity: 0; */
    text-align: center;
}

.bts-section-photo>.con>.pc>.photo-swiper-wrap>ul>li.on {
    opacity: 1;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
}

.bts-section-photo>.con>.pc>.photo-swiper-wrap>.swipe-prev {
    display: block;
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    cursor: pointer;
}

.bts-section-photo>.con>.pc>.photo-swiper-wrap>.swipe-next {
    display: block;
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    cursor: pointer;
}

.bts-section-photo>.con>.pc>.photo-swiper-wrap>.swipe-prev>img,
.bts-section-photo>.con>.pc>.photo-swiper-wrap>.swipe-next>img {
    width: 50%;
}

.bts-section-photo>.con>.pc>.control-list {
    display: inline-block;
    position: relative;
    width: 840px;
    text-align: center;
}

.bts-section-photo>.con>.pc>.control-list>ul {
    display: flex;
    position: relative;
    width: 100%;
}

.bts-section-photo>.con>.pc>.control-list>ul>li {
    flex: 1 1 auto;
    width: 10.25%;
    text-align: center;
}

.bts-section-photo>.con>.pc>.control-list>ul>li>button {
    display: inline-block;
    font-family: 'Monte Stella';
    font-size: 34px;
}

.bts-section-photo>.con>.pc>.control-list>ul>li.on>button {
    border-bottom: 3px solid #000;
}

.pc .swiper {
    position: relative;
    width: 100%;
    height: 100%;
}

.pc .swiper>.swiper-wrapper {}

.pc .swiper>.swiper-wrapper>.swiper-slide {
    text-align: center;
}

.pc .swiper>.swiper-wrapper>.swiper-slide>.img {
    /* display: inline-block; */
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Between PC And Mobile */
@media screen and (max-width: 1440px) {

    /* Photo */
    .bts-section-photo>.con {
        padding-top: 16vw;
        padding-bottom: 11vw;
    }

    .bts-section-photo>.con>.title-img>img {
        width: 18vw;
    }

    .bts-section-photo>.con>.title-img {
        margin-bottom: 6vw;
    }

    .bts-section-photo>.con>.header>.img {
        background-size: 11vw;
        width: 100vw;
        height: 5.5vw;
        animation: photo-header-marquee-pm 5s infinite linear;
        -webkit-animation: photo-header-marquee-pm 5s infinite linear;
    }

    @keyframes photo-header-marquee-pm {
        0% {
            background-position: 0;
        }

        100% {
            background-position: -11vw;
        }
    }

    .bts-section-photo>.con>.pc>.top-control {
        margin-bottom: 8vw;
    }

    .bts-section-photo>.con>.pc>.top-control>ul>li>button {
        font-size: 3vw;
    }

    .bts-section-photo>.con>.pc>.photo-swiper-wrap {
        margin-bottom: 8vw;
    }

    .bts-section-photo>.con>.pc>.photo-swiper-wrap>ul {
        width: 74vw;
        height: 51vw;
    }

    .bts-section-photo>.con>.pc>.photo-swiper-wrap>ul>li {
        width: 100%;
        height: 100%;
    }

    .bts-section-photo>.con>.pc>.photo-swiper-wrap>.swipe-prev {
        left: 2vw;
    }

    .bts-section-photo>.con>.pc>.photo-swiper-wrap>.swipe-next {
        right: 2vw;
    }

    .bts-section-photo>.con>.pc>.photo-swiper-wrap>.swipe-prev>img,
    .bts-section-photo>.con>.pc>.photo-swiper-wrap>.swipe-next>img {
        width: 4vw;
    }

    .bts-section-photo>.con>.pc>.control-list {
        width: 90vw;
        max-width: 840px;
    }

    .bts-section-photo>.con>.pc>.control-list>ul>li>button {
        font-size: 2.5vw;
    }
}

/* For Mobile */
@media screen and (max-width: 768px) {

    /* Photo */
    .bts-section-photo>.con {
        padding-top: 35vw;
        padding-bottom: 20vw;
    }

    .bts-section-photo>.con>.pc {
        display: none;
    }

    .bts-section-photo>.con>.mb {
        display: block;
    }

    .bts-section-photo>.con>.header>.img {
        height: 10.5vw;
        background-size: 17vw;
        animation: photo-header-marquee-m 5s infinite linear;
        -webkit-animation: photo-header-marquee-m 5s infinite linear;
    }

    @keyframes photo-header-marquee-m {
        0% {
            background-position: 0;
        }

        100% {
            background-position: -17vw;
        }
    }

    .bts-section-photo>.con>.title-img {
        margin-bottom: 15vw;
    }

    .bts-section-photo>.con>.title-img>img {
        width: 27.5vw;
    }

    .bts-section-photo .bts-photo-swiper-wrap-mb {}

    .bts-section-photo .bts-photo-swiper-wrap-mb>ul {}

    .bts-section-photo .bts-photo-swiper-wrap-mb>ul>li {}

    .bts-section-photo .bts-photo-swiper-wrap-mb>ul>li.proof-list {
        margin-bottom: 32vw;
    }

    .bts-section-photo .bts-photo-swiper-wrap-mb>ul>li>.title {
        display: inline-block;
        font-family: 'Monte Stella';
        font-weight: 400;
        font-size: 8vw;
        color: #828282;
        border-bottom: 3px solid #828282;
        line-height: 0.9;
        margin-bottom: 9vw;
    }

    .bts-section-photo .bts-photo-swiper-wrap-mb>ul>li>ul {}

    .bts-section-photo .bts-photo-swiper-wrap-mb>ul>li>ul>li {
        margin-bottom: 14.5vw;
    }

    .bts-section-photo .bts-photo-swiper-wrap-mb>ul>li>ul>li:last-child {
        margin-bottom: 0;
    }

    .bts-section-photo .bts-photo-swiper-wrap-mb>ul>li>ul>li>.title {
        font-size: 6vw;
        font-family: 'Monte Stella';
        font-weight: 400;
    }

    .bts-section-photo .bts-photo-swiper-mb {
        display: block;
        position: relative;
        width: 100%;
        margin-bottom: 3.5vw;
    }

    .bts-section-photo .bts-photo-swiper-mb>ul {}

    .bts-section-photo .bts-photo-swiper-mb>ul>li {
        width: 100vw;
        /* height: 157vw; */
        height: 150vw;
    }

    .bts-section-photo .bts-photo-swiper-mb-0>ul>li {
        height: 66.2vw
    }

    .bts-section-photo .bts-photo-swiper-mb>ul>li>.img {
        width: 100%;
        height: 100%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #000;
    }

    .bts-section-photo .bts-photo-swiper-mb>.swipe-prev {
        position: absolute;
        left: 2vw;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }

    .bts-section-photo .bts-photo-swiper-mb>.swipe-prev>img {
        width: 5vw;
    }

    .bts-section-photo .bts-photo-swiper-mb>.swipe-next {
        position: absolute;
        right: 2vw;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
    }

    .bts-section-photo .bts-photo-swiper-mb>.swipe-next>img {
        width: 5vw;
    }
}