#contents {
    margin-top: 90px;
}
svg {
	fill: #fff;
}

/* 공통 섹션 */


/* swiper 공통 */
.slide-overlay h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}
.slide-overlay p {
    font-size: 1.2rem;
    max-width: 80%;
    line-height: 1.5;
}

.swiper-button-wrapper{
    opacity: 1;
    display: flex;
    margin-bottom: 3rem;
    flex-direction: row-reverse;
}
.swiper-button{
    height: 40px;
    margin-left: 16px;
    margin-right: 16px;
    cursor: pointer;
    color:#fff;
    transition: transform 0.3s ease-in-out, border 0.3s ease-in-out;
    background-color: #000;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 5px;
}
.swiper-button:hover, .swiper-button.active {
    background-color: #555;
    transform: scale(1.1);
}
.swiper-button-header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    overflow: hidden;
    overflow-x: auto;
}
.swiper-pagination {
    position: relative !important; /* Swiper 기본 absolute를 relative로 변경 */
    bottom: 0 !important; /* 위치 강제 적용 */
    margin-top: 30px; /* 가장 큰 슬라이드보다 아래로 이동 */
    text-align: center;
    z-index: 10;
}
.swiper-pagination-bullet {
    background: #cccccc !important; /* 기본 dot 색상 (흰색) */
    opacity: 0.6; /* 기본 상태일 때 투명도 */
    width: 10px; /* 크기 조정 */
    height: 10px;
    margin: 5px;
    transition: all 0.3s ease-in-out;
}

.swiper-pagination-bullet-active {
    background: #006ECD !important; /* 활성화된 dot 색상 (주황색) */
    opacity: 1;
    width: 12px; /* 크기 조정 (더 크게) */
    height: 12px;
}

.swiper-slide-prev,
.swiper-slide-next {
    opacity: 0.3; /* 이전/다음 슬라이드는 살짝 투명 */
}

.swiper-arrow-next, .swiper-arrow-prev{
    width: 40px;
    height: 40px;
    margin-left: 16px;
    margin-right: 16px;
    cursor: pointer;
    filter: invert(1);
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.swiper-arrow-next:hover, .swiper-arrow-prev:hover{
    filter: invert(52%) sepia(86%) saturate(285%) hue-rotate(180deg); 
}
.swiper-container {
    width: 100%;
    max-width: 1200px;
    position: relative;
}
.swiper-navigation {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
    z-index: 10;
}
.swiper-button-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

.slide-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.5); /* 배경 반투명 */
    padding: 10px 20px;
    border-radius: 8px;
    opacity: 0; /* 기본적으로 숨김 */
    transition: opacity 0.3s ease-in-out;
}

.swiper-slide {
    transform: scale(0.7);
    opacity: 0.5;
    padding: 0.5rem 1rem;
    border-radius: 1.2rem;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    will-change: transform, opacity;
    transform-origin: center center; /* 확대 시 부드러운 효과 */
}
.swiper-slide-next,
.swiper-slide-prev {
    transform: scale(0.8);
    opacity: 0.7;
    transition: all 0.5s ease-in-out;
}
.swiper-slide img {
    display: block;
    width: 100%;
}
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 왼쪽 정렬 */
    justify-content: flex-end; /* 아래 정렬 */
    text-align: left; /* 텍스트 왼쪽 정렬 */
    padding: 20px; /* 여백 추가 */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.slide-overlay p {
    margin-bottom: 5px; /* <p> 아래 간격 줄이기 */
}
.slide-overlay h2 {
    margin-top: 0; /* <h2> 위 간격 없애기 */
}
.slide-overlay .gate1{
    position: absolute;
    top: 3rem;
    right: 3rem;
}
.slide-overlay .gate2{
    position: absolute;
    bottom: 4rem;
    left: 40%;
}
.slide-overlay .gate3{
    position: absolute;
    top: 3rem;
    right: 3rem;
}
.slide-overlay .gate4{
    position: absolute;
    top: 3rem;
    right: 3rem;
}
.slide-text {
    opacity: 1;
}
/* 활성화된 슬라이드 스타일 */
.swiper-slide-active {
    transform: scale(1); /* 크기 조정 */
    opacity: 1;
    z-index: 5;
}

.swiper-slide-active{
    transform: scale(1.1);
    width: 100%;
}

.swiper-slide-active .slide-overlay {
    opacity: 1;
    z-index: inherit;
}


.swiper-slide:hover {
    transform: scale(1.05);
    opacity: 0.9;
    z-index: 10;
    transition: all 0.5s ease-in-out;
}

/* 대문 이미지 */
#top_swiper .swiper-wrapper {
    padding-top: 50px;
}
#top_swiper .swiper-slide-active {
    transition: all 0.5s ease-in-out !important;
}

#top_swiper .swiper-slide-active:hover {
    transform: scale(1.1) !important;
    z-index: 10;
}
#top_swiper .swiper-button-wrapper{ opacity:0; visibility:hidden; display: none;}
/* 대문이미지 End */

/* Top News */
#top_news_swiper .card-content {min-height: 5.5rem; align-content: center; padding: 0.8rem 0.8rem;}
#top_news_swiper .card-content span {vertical-align: bottom;}
#top_news_swiper .card-img {
    width: 100%;
    height: 180px;
    object-fit: contain;
}
#top_news_swiper .card-text p {
    font-size: 0.9rem;
    color: #555;
}

.live_wrap {
    display: flex;
    justify-content: space-around;
    gap: 10%;
}
/* Live Stream */
#live_stream_swiper .swiper-slide {
    transition: transform 0.3s ease-in-out, border 0.3s ease-in-out;
    border: none; /* 기본 테두리 투명 */
    border-radius: 10px; /* 카드 모양 둥글게 */
}

#live_stream_swiper .swiper-slide:hover {
    transform: scale(1); /* 확대 */
    border: none;
    z-index: 10;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 560px; /* 최대 너비 */
    aspect-ratio: 16 / 9; /* 16:9 비율 유지 */
    margin: 0 auto;
    cursor: pointer;
}

.video-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* 유튜브 iframe 스타일 */
.video-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
}
/* Live Stream End */

/* Stream Event */
#stream_event_swiper .card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
#stream_event_swiper .card-content {
    padding: 16px;
}
#stream_event_swiper .card-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
}
#stream_event_swiper .card-text {
    font-size: 0.9rem;
    color: #555;
}
/* Stream Event End */


/* Stream Event owl */
.owl-carousel .card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.owl-carousel .card img {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: auto;
    display: block;
    object-fit: cover;
}
.owl-carousel .card h3 {
    margin: 10px 0;
    font-size: 18px;
}
.owl-carousel .card p {
    font-size: 14px;
    color: gray;
}

#vodContainer{
    display: flex;
    flex-direction: row;
    font-family: none;
    justify-content: space-evenly;
    width: 100%;
}
.vod-preview .video-container {
    position: relative;
    width: 100%;
    cursor: pointer;
}

.vod-preview .video-thumbnail {
    width: 100%;
    display: block;
    cursor: pointer;
    object-fit: contain;
    background-color: #fff;
    transition: all 0.3 ease-in-out;
}
.hidden-video {
    display: none;
    width: 100%;
}
.video-player {
    width: 100%;
    height: 100%;
}
.modals {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-contents {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}

.partnersContainer{
    display: flex;
    flex-direction: row;
    font-family: none;
    width: 100%;
    margin-bottom: 3rem;
}
.partnersContainer .card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;

}

.partnersContainer .card-title {
    -webkit-line-clamp: 2; /* 최대 2줄까지 표시 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}


.vod-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%; /* 높이 일정하게 유지 */
    padding: 10px;
    text-align: center;
    border-radius: 20px;
    color: #000;
    transition: transform 0.5s ease-in-out;
}
.vod-card:hover{
    transform: scale(1.1);
}
/* 이미지 크기를 균등하게 유지하면서 비율 유지 */
.fixed-image-box {
    width: 95%; /* 가로 크기 맞추기 */
    min-height: 150px;
    max-height: 150px; /* 최대 높이 제한 */
    height: auto; /* 비율 유지 */
    object-fit: contain; /* 이미지가 찌그러지지 않도록 설정 */
    padding: 1rem;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* 텍스트를 항상 하단에 고정 */
.card-body {
    flex-grow: 1; /* 남은 공간을 차지하여 하단 정렬 유지 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 95%;
    background-color: #fff;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-bottom: 15px;
}

/* 제목을 중앙 정렬 */
.card-title {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: bold;
    transition: none;
}
.stream_event_section .owl-nav {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 10px;
}
.stream_event_section .owl-prev,
.stream_event_section .owl-next {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.1) !important;
    color: black !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}
.stream_event_section .owl-prev:hover,
.stream_event_section .owl-next:hover {
    background: rgba(0, 0, 0, 0.3) !important;
}
.section-header .owl-nav {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
    z-index: 10; /* 다른 요소 위로 배치 */
}
.section-header .owl-prev,
.section-header .owl-next {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.1) !important;
    color: black !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}
.section-header .owl-prev:hover,
.section-header .owl-next:hover {
    background: rgba(0, 0, 0, 0.3) !important;
}
/* #Stream Event owl End */


/* #Playground */
.playground_wrap {
    position: relative;
    display: flex;
    justify-content: center;
}
.playground_wrap img{
    object-fit: cover;
    padding-left: 1rem;
    padding-right: 1rem;
}
#playground_wrap .map-region {
    position: relative;
    transition: transform 0.3s ease-in-out;
}
#playground_wrap .tooltip {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
}
#playground_wrap .map-region:hover .tooltip {
    display: block;
}
/* #Playground End */

/* play modal */

#vodModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: relative;
    background-color: #ccc;
    padding: 3.3rem 1rem 1rem 1rem;
    border-radius: 10px;
    width: 100%;
    max-width: 600px;
    text-align: center;
    overflow: hidden;
    margin: 20px;
}

.modal-content video {
    width: 100%;
    height: auto;
}

/* 닫기 버튼 스타일 */
.modal-content .close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: black; /* 검은색 배경 */
    color: white; /* 흰색 아이콘 */
    border: none;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0.2rem 0.8rem;
    border-radius: 5px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.modal-content .close:hover {
    opacity: 1;
}
.tab-button-header{
    width: 100%;
    overflow-x: auto;
}
.tab-container {
    margin: 50px auto;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* 탭 버튼 스타일 */
.tab-buttons {
    opacity: 1;
    display: flex;
    margin-bottom: 1rem;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    cursor: pointer;
    filter: invert(1);
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.tab-btn {
    display: flex;
}

/* 탭 내용 스타일 */
.tab-content {
    display: none;
    margin-top: 1.5rem;
    padding: 20px;
    border-top: 2px solid #fff;
}

.tab-content.active {
    display: block;
}

.tab-button-header{
    width: 100%;
    overflow-x: auto;
}
.tab-container {
    margin: 50px auto;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}


/*
#busan {
    left: 750px; 
    top: 900px; 
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 0, 0.5);
    border: 2px solid yellow;
    border-radius: 50%;
    cursor: pointer;
}

#seoul {
    left: 620px;
    top: 500px;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 0, 0.5);
    border: 2px solid yellow;
    border-radius: 50%;
    cursor: pointer;
}
*/

/* Media Query */
@media all and (max-width: 1200px){
    .slide-overlay h2 {
        font-size: 1rem;
        margin-bottom: 5px;
    }
    .slide-overlay p {
        font-size: 0.8rem;
        max-width: 90%;
        line-height: 1.5;
    }
    .swiper-button-wrapper{
        margin-bottom: 3rem;
    }
}

@media all and (max-width: 1024px) {
    #top_swiper {
        padding-top: 20px;
    }
    
    #top_swiper .swiper-overlay {
        width: 100% !important;
        overflow: hidden;
    }

    /* 텍스트 스타일 */
    .slide-overlay h2 {
        font-size: 1rem;
    }
    .slide-overlay p {
        font-size: 0.8rem;
        max-width: 90%;
        line-height: 1.5;
    }
    
    .swiper {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .swiper-button-wrapper{
        margin-bottom: 1.5rem;
    }
}

@media all and (max-width: 768px) {
    #contents {margin-top:60px;}
    .download_apps {width: 45%;}
	.download_app.root {opacity:0; display:none;}
    .inner_container{padding: 0; margin: 0;}
    .swiper-wrapper {
        padding: 0;

    }
    #top_swiper_section {
        padding-top: 0;
    }
    #top_swiper .swiper-wrapper {
        padding-top: 0;
    }
    #top_swiper .swiper-slide-prev,
    #top_swiper .swiper-slide-next {
        opacity: 0;
    }
    #top_swiper .swiper-slide {
        width: 100% !important; /* 슬라이드 크기를 부모에 맞게 조정 */
        max-width: 100%;
    }
    #top_swiper .swiper-slide img {
        width: 100%; /* 가로 비율 유지 */
        height: auto;
        object-fit: cover; /* 이미지 비율을 유지하면서 채우기 */
    }
    #top_news_swiper .card-content{
        padding: 0.3rem 0.2rem;
        min-height: 5.8rem;
    }
    .swiper-button-wrapper{
        opacity: 0;
        display: none;
        margin-bottom: 0;
    }
    #top_swiper .slide-overlay {
        padding: 2px;
        width: 100% !important;
        overflow: hidden;
    }
    #top_swiper .slide-overlay h2{
        font-size: 1rem;
    }
    
    #top_swiper.slide-overlay p {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }
    #top_news_swiper .card-img{
        max-height: 150px;
        object-fit: contain;
    }
}

@media all and (max-width: 480px) {
    #contents {margin-top:60px;}
    .download_apps {width: 75%;}
}