/* program-banner-section */
.program-banner-section {
    margin-top: clamp(30px, 10vw, 81px);
    transition: margin-top 0.3 ease;
}



/* 여백 초기화 */
.custom-pg-wrap {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 767.98px) {
    .custom-pg-wrap {
        margin-top: 20px;
    }
}


/*

    메뉴 /program/의 처음 6개 배너 처리 부분
    첫줄 3개의 배너 좌,우 양측 여백을 없애주는 부분
    부트스트랩으로만 할 경우 좌,우 여백 처리가 잘 안되서
    css flex로 처리함

    flex: <flex-grow> <flex-shrink> <flex-basis>;

    첫 번째 값 (flex-grow)
    남는 공간이 있을 때 이 요소가 얼마나 비율로 늘어날지.

    0이면 절대 안 늘어남.
    1이면 남는 공간을 균등하게 나눠 차지.

    두 번째 값 (flex-shrink)
    공간이 부족할 때 이 요소가 얼마나 줄어들 수 있는지.
    0이면 절대 안 줄어듦.
    1 이상이면 줄어들 수 있음.

    세 번째 값 (flex-basis)
    기본 크기(기준 크기).
    auto, px, %, calc() 등으로 설정 가능.
    width 대신 flexbox에서의 기본 폭이라고 보면 됨.    

*/
:root { --pg-gap: 16px; }

.custom-pg-wrap {
    gap: var(--pg-gap);
    display: flex;
    flex-wrap: wrap;
}

.custom-pg-wrap > div {
    flex: 0 0 calc(100%); /* 모바일 1칸 */
}

@media (min-width: 768px) {
    .custom-pg-wrap > div { 
        flex: 0 0 calc((100% - 2*var(--pg-gap)) / 3); 
    }
}

.program-banner img {
    transition: transform 0.3s ease;
}

@media (min-width: 768px) {
    .program-banner img:hover {
        _transform: scale(1.03);
    }
}

/* 각 배너 속성 (글자 크기,색깔 등) */
.program-banner p {
    font-size: 19px;
    color: #333;
    margin: 0 0 4px 0;    
}

.program-banner-section .row1 {
    padding-bottom: 68px;
}

@media (max-width: 767.98px) {
    .program-banner-section .row1 {
        padding-bottom: 0;
        margin-bottom: -3px;
    }
}






/* slide banner */
.latest-vod-section {
    margin-top: clamp(55px, 10vw, 114px);
    transition: margin-top 0.3 ease;        
}

.swiper {
    padding: 10px 0;
}

.swiper-slide {
    width: auto; /* 슬라이드 수동 지정 */
}

.slide-card {
    max-width: 350px;          /* 슬라이드 가로 크기 */
    height: auto;         /* 슬라이드 세로 크기 */
    position: relative;
    _overflow: hidden;
}

.slide-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slide-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease; /* 부드러운 전환 */
}


@media (min-width: 768px) {
    .swiper-slide:hover .slide-image {
        _transform: scale(1.05); /* 살짝 확대 (5%) */
    }
}


.banner-title {
    color: #333;
    font-weight: 700;
    padding: 6px 5px 6px 0;
    font-size: 18px;
}

@media (max-width: 767.98px) {
    .banner-title {
        color: #333;
        font-weight: 700;
        padding: 6px 5px 6px 0;
        font-size: 15px;
        line-height: 18px;
    }
}




/* slide photo */
.photo-section {
    margin-top: clamp(55px, 10vw, 114px);
    transition: margin-top 0.3 ease;        
}

.slide-photo-card {
    max-width: 450px;          /* 슬라이드 가로 크기 */
    height: auto;         /* 슬라이드 세로 크기 */
    position: relative;
    _overflow: hidden;
}








/*
    Bottom 여백
*/
.m-bottom {
    display: block;
     margin-bottom: 264px;
 }

@media (max-width: 767.98px) {
    .m-bottom {
        display: block;
        margin-bottom: 100px;
    }
}