@charset "UTF-8";

/* banner */
.main-banner {
    /* background-color: #f6f483; */
    background-color: transparent;
    /*padding: 90px 0;*/
    position: relative;
}

.banner-point-info-wrap {
    padding: 19px;
    text-align: center;
    background-color: #F1F0E7;
}

.banner-point-info-wrap .banner-point-info {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-banner .swiper-slide {
    background-color: #f5f379;
}

.main-banner .swiper-slide.bg-red {
    background-color: var(--color-red);
}

.main-banner .swiper-slide.bg-purple {
    background-color: #6a37d1;
}

.main-banner .slide-album-banner-wrap {}

.main-banner .slide-album-banner {
    position: absolute;
    top: 50%;
    right: 11.163vw;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.5s;
    width: 23.256vw;
    text-align: center;
}

.main-banner .slide-album-banner:nth-child(1) {
    /* width: 63.953vw; */
}

.main-banner .slide-album-banner:nth-child(6) {
    /* width: 43.256vw; */

}

.main-banner .slide-album-banner.active {
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #ffffff;
    /* 선택된 도트 색상 */
}

.main-banner-bottom {
    padding: 6px 0;
}

.main-banner-bottom>p>a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.main-banner .swiper-slide.bg-img {
    background-size: cover;
    background-position: center;
    background-image: url(/assets/img/main_banner_20250123_1_bg.png);
    height: 478px;
    justify-content: center;
    align-items: center;
    background-color: var(--color-black);
    width: 100%;
}

.main-banner .swiper-slide.bg-img2 {
    background-size: cover;
    background-position: center;
    background-image: url(/assets/img/main_banner_2025207_1_bg.png);
    height: 478px;
    justify-content: center;
    align-items: center;
    background-color: var(--color-black);
    width: 100%;
}

.main-banner .swiper-slide.bg-img3 {
    background-size: cover;
    background-position: center;
    background-image: url(/assets/img/main_banner_20250213_2_bg.png);
    height: 478px;
    justify-content: center;
    align-items: center;
    background-color: var(--color-black);
    width: 100%;
}

.main-banner .swiper-slide.bg-img.bg-img4 {
    background-image: url(/assets/img/main_banner_20250226_1_bg.png);
}

.main-banner .swiper-slide.bg-img.bg-img5 {
    background-image: url(/assets/img/main_banner_20250304_1_bg.png);
}

.main-banner .swiper-slide.bg-img.bg-img6 {
    background-image: url(/assets/img/main_banner_20250314_1_bg.png);
}

.main-banner .swiper-slide.bg-img.bg-img7 {
    background-image: url(/assets/img/main_banner_20250321_1_bg.png);
}

.main-banner .swiper-slide.bg-img.bg-img8 {
    background-image: url(/assets/img/main_banner_20250327_1_bg.png);
}

.main-banner .swiper-slide.bg-img.bg-img9 {
    background-image: url(/assets/img/main_banner_20250328_bg.png);
}

.main-banner .swiper-slide.bg-img .bg-img-inner,
.main-banner .swiper-slide.bg-img3 .bg-img-inner {
    width: 100%;
}

.main-banner .swiper-slide.bg-img .text-img {
    padding-left: 84px;
}

.main_icon {width: 76px;}
.live_title_sub {border-radius: 4px;background-color: #3c3c3c;padding: 2px 4px;}
.align-items-center {align-items: center !important;}

.btn-random {
    position: sticky;
    bottom: 70px;
    /*right: 20px;*/
    left: 80%;
    /*transform: translateX(604px - 150px); !* 또는 calc()로 계산 가능 *!*/
    z-index: 999;

    width: 150px;
    height: 50px;
    /*border-radius: 40px;*/
    overflow: hidden;
    display: inline-block;
    transition: all 0.8s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.btn-random-image {
    width: 150px;
    height: 45px;
    -o-object-fit: cover;
       object-fit: cover;
    transition: opacity 0.5s ease;
}
.btn-random-image.shrink {
    width:45px;
    height: 45px;
}

.btn-random.shrink {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

@media screen and (max-width: 768px) {
    .main-banner {
        padding: 0;
    }

    .banner-point-info-wrap {
        padding: 10px;
    }

    .main-banner .inner-mo-100 {
        overflow: hidden;
        position: relative;
    }

    .infinite {
        position: relative;
    }

    .infinite-wrap {
        display: flex;
        gap: 20px;
        animation: scroll 30s linear infinite;
        position: absolute;
        bottom: 5vw;
    }

    .infinite-wrap-last {
        animation: scroll2 30s linear infinite;
        margin-left: 10px;
    }

    .infinite-wrap .infinite-item {
        width: 127.907vw;
        padding: 20px 0;
    }

    .main-banner .swiper-slide.bg-img {
        background-size: cover;
        background-position: center;
        background-image: url(/assets/img/main_banner_20250123_1_bg_mo.png);
        height: 33.953vw;
        justify-content: center;
        align-items: center;
        background-color: var(--color-black);
        width: 100%;
    }

    .main-banner .swiper-slide.bg-img2 {
        background-size: cover;
        background-position: center;
        background-image: url(/assets/img/main_banner_2025207_1_bg_mo.png);
        height: 33.953vw;
        justify-content: center;
        align-items: center;
        background-color: var(--color-black);
        width: 100%;
    }

    .main-banner .swiper-slide.bg-img3 {
        background-size: cover;
        background-position: center;
        background-image: url(/assets/img/main_banner_20250213_1_bg_mo.png);
        height: 33.953vw;
        justify-content: center;
        align-items: center;
        background-color: var(--color-black);
        width: 100%;
    }

    .main-banner .swiper-slide.bg-img.bg-img4 {
        background-image: url(/assets/img/main_banner_20250226_1_bg_mo.png);
    }

    .main-banner .swiper-slide.bg-img.bg-img5 {
        background-image: url(/assets/img/main_banner_20250304_1_bg_mo.png);
    }

    .main-banner .swiper-slide.bg-img.bg-img6 {
        background-image: url(/assets/img/main_banner_20250314_1_bg_mo.png);
    }

    .main-banner .swiper-slide.bg-img.bg-img7 {
        background-image: url(/assets/img/main_banner_20250321_1_bg_mo.png);
    }

    .main-banner .swiper-slide.bg-img.bg-img8 {
        background-image: url(/assets/img/main_banner_20250327_1_bg_mo.png);
    }

    .main-banner .swiper-slide.bg-img.bg-img9 {
        background-image: url(/assets/img/main_banner_20250328_bg_mo.png);
    }

    .main-banner .swiper-slide.bg-img .bg-img-inner {
        width: 100%;
    }

    .main-banner .swiper-slide.bg-img .text-img {
        padding-left: 6px;
    }

    .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: 0;
    }
}


@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes scroll2 {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0%);
    }
}