/*20241104*/
.bottomContentWrap {
    width: 100%;
    padding: 136px 0;
}

.bottomContentWrap > * {
    box-sizing: border-box;
}

.bottomContent {
    max-width: 1172px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 66px;
    align-items: center;
    justify-content: center;
}

.bottomContent > .box {
    width: 370px;
    height: 306px;
    position: relative;
}

.bottomContent > .box::after {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 200px;
    background: #ddd;
    right: -33px;
    top: 53px;
}

.bottomContent > .box:last-of-type {
    width: 370px;
}

.bottomContent > .box:last-of-type:after {
    display: none;
}

.bottomContent > .box > header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    height: 28px;
}

.bottomContent > .box > header h1 {
    font-size: 28px;
    height: 28px;
    color: #000;
    font-weight: 700;
}

.bottomContent >  .box > header button {
    height: 28px;
    padding: 0 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e4ac6c;
    border-radius: 14px;
    font-size: 14px;
    line-height: 14px;
    font-weight: 700;
    color: #fff;
    border: 0;
}

.bottomContent >  .box > header button.more,
.bottomContent >  .box > header button.shortcut {
    cursor: pointer;
}

.introduceWrap,
.eventWrap  {
    display: flex;
    flex-direction: row;
    width: 300px;
    height: 249px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    position: relative;
}

.eventWrap  {
    width: 100%;
}

.eventWrap .swiper-slide > div {
    overflow: hidden;
    width: 350px;
    height: 208px;
    border-radius: 10px;
    cursor: pointer;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.introduceWrap  {
    width: 350px;
}

.introduce.swiper-slide {
    display: flex;
    gap: 2%;
    height: auto;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
}

.introduceWrap .swiper-slide a {
    width: 45%;
    height: 89px;
    border: #dddddd 1px solid;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 45%;
    padding: 1%;
}

.eventWrap .swiper-slide img,
.introduceWrap .swiper-slide img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
}

.introduceWrap > .introduce {
    display: flex;
    /*flex-wrap: wrap;*/
    flex-direction: row;
    gap: 4px 4px;
}

.introduceNext,
.eventNext {
    width: 7px;
    height: 12px;
    background: url(/weven_data/rapa/file_manager/arrowRightBlack.png) center center no-repeat;
}

.introducePrev,
.eventPrev {
    width: 7px;
    height: 12px;
    background: url(/weven_data/rapa/file_manager/arrowLeftBlack.png) center center no-repeat;
    margin-right: 16px;
}

.introduceStop,
.eventStop {
    width: 6px;
    height: 12px;
    background: url(/weven_data/rapa/file_manager/pauseBlack.png) center center no-repeat;
    margin-right: 16px;
}

.introduceStart,
.eventStrat {
    width: 6px;
    height: 12px;
    background: url(/weven_data/rapa/file_manager/restartBlack.png) center center no-repeat;
    background-size: 6px 6px;
    margin-right: 16px;
    display: none;
}

.introduce.ctrl,
.event.ctrl {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.introduce.ctrl > div,
.event.ctrl > div {
    cursor: pointer;
}

.introducePagination,
.eventPagination {
    width: auto;
    font-size: 14px;
    line-height: 14px;
    font-weight: 700;
    color: #000;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-right: 20px;
}
.swiper-pagination-total {
    color: #999;
}

.snsWrap {
    width: 350px;
    display: flex;
    /* gap: 8px; */
    margin: 0 auto;
    flex-direction: column-reverse;
}
.youtube iframe {
    width: 100%;
    border-radius: 10px;
    background: #000;
}

.snsWrap hgroup {
    /* width: 48px; */
    /* height: 240px; */
    display: flex;
    /* flex-direction: column; */
    gap: 0;
    justify-content: space-evenly;
}

.snsWrap hgroup h2 {
    width: 46px;
    height: 46px;
    opacity: .4;
    transition: opacity .3s;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.snsWrap hgroup h2.current {
    opacity: 1;
}

.snsWrap .snsCon {
    /* width: 314px; */
    height: 208px;
    text-align:center;
    background: #000;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.snsWrap .snsCon img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
}

.youtube-thumbnail {
    background: #fff;
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    width: 100%;
    overflow: hidden;
}

.youtube-thumbnail img {
    max-height: none;
}

.youtube-thumbnail button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
}

.youtube-thumbnail button img {
    max-width: none;
    max-height: none;
    width: 50px;
}

.bottomContentWrap {
    padding: 10rem 0 !important;
}

.bottomContentWrap .title-area {
    padding-bottom: 4rem;
}

.bottomContent > .box > header h1 {
    font-size: 2rem;
    color: #353535;
    font-weight: 700;
}

.bottomContent > .box > header button {
    background: #eee;
    border-radius: 0.7rem;
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
    color: #5d5d5d;
}

@media screen and (max-width: 1173px) {
    .bottomContentWrap {
        padding: 66px 0;
    }

    .bottomContent {
        width: 100%;
        padding: 0;
        flex-direction: column;
        gap: 66px 0;
    }

    .bottomContent .box,
    .bottomContent > .box:last-of-type {
        width: 100%;
    }

    .eventWrap,
    .introduceWrap {
        width: 100%;
    }

    .eventWrap .swiper-slide,
    .introduceWrap .swiper-slide  {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .introduceWrap .swiper-slide {
        /*gap: 4px 4px;*/
    }
    .introduceWrap .swiper-slide img{
        /*flex-direction: row;*/
        /*flex-wrap: wrap;*/
        /*width: 199px;*/
        /*height: 102px;*/
        /*border: #dddddd 1px solid;*/
        /*border-radius: 10px;*/
    }
    .youtube iframe {
        width: 100%;
        border-radius: 10px;
    }
    .snsWrap .snsCon {
        width: 350px;
        position: relative;
        /* top: 50%; */
        /* left: 50%; */
        /* transform: translate(-50%, -50%); */
        margin: 0 auto;
    }

    .snsWrap .snsCon img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 12px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .snsWrap .snsCon .youtube-thumbnail button img {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
    }
}

@media screen and (max-width: 604px) {
    .introduceWrap .swiper-slide {
        /*flex-direction: row;*/
        /*flex-wrap: wrap;*/
        /*height: 208px;*/
    }
    .introduceWrap .swiper-slide img{
        /*flex-direction: row;*/
        /*flex-wrap: wrap;*/
        /*width: 199px;*/
        /*height: 102px;*/
        /*border: #dddddd 1px solid;*/
        /*border-radius: 10px;*/
    }
    .youtube iframe {
        width: 100%;
        border-radius: 10px;
    }

}