/* 전체 영역을 꽉 채우는 배너 */
    .main-banner {
        position: relative;
        width: 100%;
        height: 100vh; /* 화면 전체 높이 */
        overflow: hidden;
    }

    /* 비디오 설정 */
    .main-banner video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: 1;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }

    /* 영상 위에 올릴 내용 */
    .main-banner .content {
        position: relative;
        z-index: 2;
        color: white;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
    }

    .main-banner .content h1 {
        font-size: 3rem;
        margin-bottom: 20px;
    }

    .main-banner .content button {
        padding: 10px 20px;
        font-size: 1rem;
        border: none;
        background: rgba(255, 255, 255, 0.8);
        color: black;
        cursor: pointer;
    }

    /* 영상 어둡게 처리 (글씨 가독성 높임) */
    .main-banner::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1;
    }

    /* 모바일 전용 */
    @media screen and (max-width: 768px) {
        .main-banner {
            height: 93vh;
        }
        .main-banner video {
            top: 0;               /* 위치를 위쪽으로 */
            left: 50%;
            min-width: auto;      /* 가로 최소 너비 제한 해제 */
            min-height: unset;    /* min-height 초기화 */
            width: 100vw;         /* 화면 가로 전체 채우기 */
            height: 93vh;         /* 모바일 배너 높이에 맞춰 지정 */
            transform: translateX(-50%); /* 수평 중앙 정렬만 */
            object-fit: cover;
        }
    }