/* project-detail-07 页面样式 */
.page-07 {
    background: #000000;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.page-07 .video-section {
    padding: 0 30px 0;
}

.page-07 .image-fullscreen {
    padding: 0 30px 30px;
    width: 100%;
    box-sizing: border-box;
    background: #D4D4D4;
    position: relative;
    z-index: 2;
}

.page-07 .content-title {
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.page-07 .nav-link {
    color: #ffffff !important;
}

.page-07 .nav-link:hover,
.page-07 .nav-link.active,
.page-07 .nav-link:focus,
.page-07 .nav-link:focus-visible {
    color: #0066ff !important;
}

.page-07 .brand-text {
    color: #ffffff;
}

.video-overlay-right {
    position: absolute;
    z-index: 10;
}

.video-overlay-right .overlay-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay-center {
    position: absolute;
    overflow: visible;
    pointer-events: none;
    z-index: 10;
}

.video-overlay-center .overlay-video {
    pointer-events: auto;
}

.overlay-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 视频位置样式 - 仅用于 project-detail-07 */
.page-07 .video-pos-1 {
    padding: 61px 71px 61px 0;
    right: -0.45%;
    /* right: 30%; */
    top: 50%;
    transform: translateY(-50%);
    max-width: 538px;
}

.page-07 .video-pos-2 {
    padding: 61px 71px 61px 0;
    left: 50.3% !important;
    /* left: 20% !important; */
    right: auto !important;
    top: 49.9% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 537px !important;
    z-index: 10;
}

.page-07 .video-pos-3 {
    padding: 52px 143px 52px 0;
    right: -0.9%;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: 618px !important;
}

.page-07 .video-pos-4 {
    padding: 52px 143px 52px 0;
    right: -0.9%;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: 618px !important;
}

.page-07 .video-pos-16 {
    padding: 121px 119px 125px 0;
    left: 69.45% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 522px !important;
    /* max-height: calc(100% - 40px) !important; */
}

.page-07 .video-pos-17 {
    padding: 36px 60px 54px 0;
    left: 64% !important;
    top: 54.5% !important;
    transform: translateY(-55%) !important;
    width: 628px !important;
    aspect-ratio: 603 / 956 !important;
}

.page-07 .video-pos-18 {
    padding-top: 101px;
    padding-bottom: 64px;
    left: 52.6% !important;
    /* left: 20% !important; */
    top: 49.8% !important;
    transform: translate(-50%, -50%);
    width: 444px !important;
}

.page-07 .video-pos-19 {
    padding-top: 78px;
    padding-bottom: 37px;
    left: 51.1% !important;
    /* left: 20% !important; */
    top: 49.75% !important;
    transform: translate(-50%, -50%);
    width: 469px !important;
}

@media (max-width: 1200px) {
    .page-07 .video-pos-1 {
        width: 28vw;
        right: 4%;
    }

    .page-07 .video-pos-2 {
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 30vw !important;
        max-width: 300px !important;
        max-height: calc(100% - 40px) !important;
        aspect-ratio: 490 / 865 !important;
    }

    .page-07 .video-pos-3 {
        right: 0 !important;
        top: 50% !important;
        transform: translate(-50%, -50%) translateX(65px) !important;
        width: 29vw !important;
        max-width: 290px !important;
        max-height: calc(100% - 40px) !important;
        aspect-ratio: 490 / 865 !important;
    }

    .page-07 .video-pos-4 {
        right: 0 !important;
        top: 50% !important;
        transform: translate(-50%, -50%) translateX(65px) !important;
        width: 29vw !important;
        max-width: 290px !important;
        max-height: calc(100% - 40px) !important;
        aspect-ratio: 490 / 865 !important;
    }

    .page-07 .video-pos-16 {
        right: 0 !important;
        top: 50% !important;
        transform: translate(-50%, -50%) translateX(60px) !important;
        width: 24.5vw !important;
        max-width: 249px !important;
        max-height: calc(100% - 40px) !important;
        aspect-ratio: 490 / 865 !important;
    }

    .page-07 .video-pos-17 {
        right: 0 !important;
        top: 50% !important;
        transform: translate(-50%, -50%) translateX(80px) !important;
        width: 28vw !important;
        max-width: 350px !important;
        max-height: calc(100% - 40px) !important;
        aspect-ratio: 490 / 865 !important;
    }

    .page-07 .video-pos-18 {
        right: 21.2% !important;
        top: 51% !important;
        transform: translate(-50%, -50%);
        width: 26.5vw !important;
        max-width: 270px !important;
        max-height: calc(100% - 40px) !important;
    }

    .page-07 .video-pos-19 {
        right: 23.3% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
        width: 26.5vw !important;
        max-width: 270px !important;
        max-height: calc(100% - 40px) !important;
    }
}

.image-fullscreen .overlay-video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

.image-fullscreen .overlay-video::-webkit-media-controls-playback-rate-button {
    display: none !important;
}

.image-fullscreen .overlay-video::-webkit-media-controls-picture-in-picture-button {
    display: none !important;
}

.image-fullscreen .overlay-video::-webkit-media-controls-overlay-enclosure {
    display: none !important;
}

.image-fullscreen .overlay-video::-webkit-media-controls-overflow-button {
    display: none !important;
}

.image-fullscreen .overlay-video::-webkit-media-controls-overflow-button-list {
    display: none !important;
}

.image-fullscreen .overlay-video::-webkit-media-controls-overflow-button-menu {
    display: none !important;
}

.image-fullscreen .overlay-video::-webkit-media-controls-end-hints {
    display: none !important;
}

@media (max-width: 768px) {
    .page-07 .video-pos-1 {
        width: 26vw;
    }

    .page-07 .video-pos-2 {
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 28vw !important;
        max-width: 280px !important;
        max-height: calc(100% - 40px) !important;
        aspect-ratio: 490 / 865 !important;
    }

    .page-07 .video-pos-3 {
        right: 0 !important;
        top: 50% !important;
        transform: translate(-50%, -50%) translateX(28px) !important;
        width: 28.5vw !important;
        max-width: 285px !important;
        max-height: calc(100% - 40px) !important;
        aspect-ratio: 490 / 865 !important;
    }

    .page-07 .video-pos-4 {
        right: 0 !important;
        top: 50% !important;
        transform: translate(-50%, -50%) translateX(28px) !important;
        width: 28.5vw !important;
        max-width: 285px !important;
        max-height: calc(100% - 40px) !important;
        aspect-ratio: 490 / 865 !important;
    }

    .page-07 .video-pos-16 {
        right: 0 !important;
        top: 50% !important;
        transform: translate(-50%, -50%) translateX(25px) !important;
        width: 24.5vw !important;
        max-width: 249px !important;
        max-height: calc(100% - 40px) !important;
        aspect-ratio: 490 / 865 !important;
    }

    .page-07 .video-pos-17 {
        right: 0 !important;
        top: 50% !important;
        transform: translate(-50%, -50%) translateX(30px) !important;
        width: 28vw !important;
        max-width: 350px !important;
        max-height: calc(100% - 40px) !important;
        aspect-ratio: 490 / 865 !important;
    }

    .page-07 .video-pos-18 {
        right: 21.2% !important;
        top: 50.5% !important;
        transform: translate(-50%, -50%);
        width: 26.5vw !important;
        max-width: 270px !important;
        max-height: calc(100% - 40px) !important;
    }

    .page-07 .video-pos-19 {
        right: 23.3% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
        width: 26.5vw !important;
        max-width: 270px !important;
        max-height: calc(100% - 40px) !important;
    }
}