/*메인배너 이미지 스타일*/
#main_img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* 팝업(모달) 스타일 */
  #popup1{left:4%;}
  #popup2{left:576px;}
  #popup3{left:576px;}
        .modal {
            display: none; /* JS로 'show' 클래스를 추가하여 제어 */
            position: fixed;
            z-index: 1000;
            width: auto;
            height: auto;
            overflow: auto;
            top:100px;
         /*   background-color: rgba(0, 0, 0, 0.6);  반투명 배경 */
        }

        .modal.show {
            display: block; /* 보일 때 flex로 중앙 정렬 */
        }

        .modal-content {
            background-color: #fefefe;
            margin: auto;
            border: 1px solid #888;
            width: 100%;
            max-width: 500px;
            position: relative;
            border-radius: 8px;
            min-width: 500px;
        }

        /* 팝업 닫기 (X 아이콘) */
        .close-btn {
            color: #aaa;
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            display:none;
        }
        .close-btn:hover,
        .close-btn:focus {
            color: black;
        }

        /* 팝업 하단 버튼 스타일 */
        .modal-buttons {
            margin-top: 0px;
            text-align: right;
            border-top: 1px solid #eee;
            padding: 15px;
        }
        .modal-buttons button {
            font-size: 14px;
            padding: 8px 12px;
            cursor: pointer;
            margin-left: 10px;
            border: 1px solid #ccc;
            background-color: #f0f0f0;
            border-radius: 4px;
        }
        .modal-buttons button.close-today-btn {
            background-color: #32a47d;
            color: white;
            border-color: #32a47d;
        }


        /* Swiper 스타일 */
        .modal .swiper {
            width: 100%;
            height: 600px;
        }

        .modal .swiper-slide {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            color: white;
        }
        
        .modal .swiper-slide a{height:100%;}
        
        /* 데모용 슬라이드 배경색 */
        /*.modal .swiper-slide.slide-1 { background-color: #007aff; }*/
        /*.modal .swiper-slide.slide-2 { background-color: #ff3b30; }*/
        /*.modal .swiper-slide.slide-3 { background-color: #34c759; }*/
        /*.modal .swiper-slide.slide-4 { background-color: #ff9500; }*/
        
        /* 슬라이드가 1개일 때 컨트롤 숨기기 */
        .modal .swiper.single-slide .swiper-pagination,
       .modal .swiper.single-slide .swiper-button-next,
       .modal .swiper.single-slide .swiper-button-prev {
            display: none;
        }
        
       .modal .swiper-button-next,.modal .swiper-button-prev{color:#32a47d;}
       .modal .swiper-pagination-bullet-active {
    background: #32a47d;}
    .swiper-slide img.MO{display:none;}
    
   
  
    
    @media (max-width:1000px){
    .modal-content{min-width:400px;max-width: 400px;}
    .modal .swiper{height:400px;}
     #popup2,#popup3 {
        left: 436px;
    }
    }
    @media (max-width:800px){
    .modal .swiper-slide a{height:auto;}
    .swiper-slide img.MO{display:block;}
    .swiper-slide img.PC{display:none;}
        #popup1 {
        left: 50%;
        z-index: 1001;
        width: 100%;
        height:100%;
        transform: translateX(-50%);
        top: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.8);
    }
    #popup2.show,#popup3.show {
        left: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }
        .modal-content {
        min-width: 100%;
        max-width: 100%;
        /* bottom: 0; */
        margin: 0;
                padding: 0;
        padding-bottom: 1rem;
    }
        .modal .swiper {
        height: 30dvh;
        margin-top: 0;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    .close-btn{display:none;}
    .modal-buttons{    padding: 8px 15px 0;margin-top: 0;        text-align: center;}
     #popup2 .modal-content{border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
     .modal-buttons button{width:47%;}
     .modal-buttons button.close-today-btn{margin-left:0;}
     #popup1 .modal-content{top: 50%;
    width: 95%;
    min-width: 95%;
    left: 50%;
    transform: translate(-50%, -50%);}
    #popup1.modal .swiper{height:65dvh;}
    }
     .modal .swiper
 {
    height: auto;
}
 .modal .swiper-slide a{height: auto;width:100%;}
 .modal .swiper-slide a img{border-top-left-radius: 8px;border-top-right-radius: 8px;}
 .modal .swiper-button-next, .modal .swiper-button-prev{display:none;}
    
    
    /*메인스폰서*/
    
     #mainSponsorContainer{background: #fff;height: 44dvh;display: flex;align-items: center;padding: 5%;border-radius: 10px;}
  @media (max-width: 960px) {
  #mainSponsorContainer{height:25dvh;}
  }
      
   /*시즌종료 css추갚 : 모바일배너 추가 */
   .MO{display:none;}
  @media (max-width: 500px) {
    .MO{display:block;}
    .PC{display:none;}
    .end_season {
      height: auto;}
      .end_season img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
        image-rendering: pixelated;
    }
  } 
  
  /*아이폰 모바일 14pro 하이라이트 짤림 현상 수정 */
   .video-card{height:100%;    overflow: visible;}
   
 /* 비디오 팝업 */
.vp-modal {
    display: none; /* JS로 'show' 클래스를 추가하여 제어 */
    position: fixed;
    z-index: 1002;
    width: auto;
    height: auto;
    overflow: auto;
    top:100px;
    left: 16%;
}
.vp-modal.show {
    display: block; /* 보일 때 flex로 중앙 정렬 */
}
.vp-modal-content {
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
    width: 100%;
    max-width: 382px;
    position: relative;
    border-radius: 8px;
    min-width: 382px;
}
.vp-video-wrap video {
	width: 380px;
	border-radius: 8px 8px 0 0;
}
.vp-modal-buttons {
    margin-top: 0px;
    text-align: right;
    border-top: 1px solid #eee;
    padding: 15px;
}
.vp-modal-buttons button {
    font-size: 14px;
    padding: 8px 12px;
    cursor: pointer;
    margin-left: 10px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    border-radius: 4px;
}
.vp-modal-buttons button.vp-close-today-btn {
    background-color: #32a47d;
    color: white;
    border-color: #32a47d;
}
@media (max-width: 800px) {
    .vp-modal {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
	    background: rgba(0, 0, 0, 0.8);
	}
    .vp-modal-content {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
	    margin: 0;
	    padding: 0;
	    width: 60%;
	    max-width: unset;
	    min-width: unset;
    }
    .vp-video-wrap video {
        width: 100%;
    }
    .vp-modal-buttons {
        margin-top: 0;
        padding: 8px;
        text-align: center;
    }
    .vp-modal-buttons button{
	    width: 47%;
	}
	.vp-modal-buttons button.vp-close-today-btn{
	    margin-left: 0;
	}
}
@media (max-width: 500px) {
    .vp-modal-content {
        width: 80%;
    }
}