/* 기존 changskin-video-banner.css 전체를 교체하세요. */

/* 조절값: bottom이 커질수록 영상이 위로 이동합니다. */
#main_intro.csvb-intro {
    --header-height: 84px;
    --banner-height: calc(920px - var(--header-height));
    --video-left: 11%;
    --video-bottom: 10%;
    --video-width: 36.8%;
    --image-position: center center;

    position: relative;
    width: 100%;
    height: var(--banner-height);
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #111;
}


/* 부모→슬라이더→슬라이드의 높이를 연결 */
#main_intro.csvb-intro .csvb-slider,
#main_intro.csvb-intro .csvb-slider > .swiper-wrapper,
#main_intro.csvb-intro .csvb-slide {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    aspect-ratio: auto;
    box-sizing: border-box;
}
#main_intro.csvb-intro .csvb-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}
#main_intro.csvb-intro .csvb-slide {
    position: relative;
    overflow: hidden;
    background: #111;
}

/* 배경 이미지가 슬라이드 높이를 늘리지 않게 분리 */
#main_intro.csvb-intro .csvb-picture {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
#main_intro.csvb-intro .csvb-background {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--image-position);
}

/* 배경 링크 */
#main_intro.csvb-intro .csvb-link {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#main_intro.csvb-intro .csvb-link-mobile { display: none; }

/* 영상: 위치는 파일 맨 위 변수에서만 조절 */
/* 기존 1380px 컨테이너 안에서 영상이 있던 위치 그대로 */
#main_intro.csvb-intro .csvb-video {
    position: absolute;
    top: auto;
    right: auto;
    left: calc(50% - 690px);
    bottom: var(--video-bottom);
    width: 640px;
    height: 360px;
    margin: 0;
    padding: 0;
    transform: none;
    z-index: 2;
}

#main_intro.csvb-intro .csvb-video iframe,
#main_intro.csvb-intro .csvb-player {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
}
#main_intro.csvb-intro .csvb-fallback {
    display: flex;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #111;
    text-decoration: underline;
    font-size: 16px;
}
#main_intro.csvb-intro .csvb-ready .csvb-fallback { display: none; }

/* 페이지 표시 */
#main_intro.csvb-intro .csvb-dots {
    position: absolute;
    top: auto;
    bottom: 12px;
    left: 0;
    width: 100%;
    z-index: 3;
    text-align: center;
}
#main_intro.csvb-intro .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border: 1px solid #555;
    background: #fff;
    opacity: .6;
}
#main_intro.csvb-intro .swiper-pagination-bullet-active {
    background: #222;
    opacity: 1;
}

/* 모바일 조절값. 헤더 높이가 다르면 --header-height도 여기에 지정. */
@media (max-width: 767px) {
    #main_intro.csvb-intro {
        --video-left: 5%;
        --video-bottom: 8%;
        --video-width: 90%;
    }
    #main_intro.csvb-intro .csvb-link-pc { display: none; }
    #main_intro.csvb-intro .csvb-link-mobile { display: block; }
}