/* --- 公共修复与自定义样式 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header01 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1040;
    background-color: rgba(0, 0, 0, 0.2);
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0s 0.5s;
}

.backtotop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

/* --- 【我们自己控制的】移动端菜单样式 --- */
@media (max-width: 991px) {
    .header01 .navArea {
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .mainMenu {
        display: none;
    }

    /* PC菜单默认隐藏 */
    .mobileMenu {
        display: block;
    }

    /* 我们的汉堡按钮容器必须显示 */
    .mobileMenu .menu-trigger {
        display: block !important;
        width: 40px !important;
        height: 40px !important;
        position: relative;
        cursor: pointer;
    }

    .mobileMenu .menu-trigger span {
        display: block !important;
        position: absolute !important;
        width: 25px !important;
        height: 3px !important;
        background-color: #ffffff !important;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2px;
        transition: all 0.3s;
    }

    .mobileMenu .menu-trigger span:nth-child(1) {
        top: 10px !important;
    }

    .mobileMenu .menu-trigger span:nth-child(2) {
        top: 19px !important;
    }

    .mobileMenu .menu-trigger span:nth-child(3) {
        top: 28px !important;
    }

    header.header01 .mainMenu.menu-is-open {
        display: block !important;
        position: absolute !important;
        top: 65px !important;
        right: 15px !important;
        left: auto !important;
        width: 200px !important;
        background-color: rgba(40, 40, 40, 0.9) !important;
        border-radius: 8px !important;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2) !important;
        padding: 8px 0 !important;
        z-index: 999 !important;
        backdrop-filter: blur(5px) !important;
    }

    .mainMenu.menu-is-open ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mainMenu.menu-is-open ul li a {
        display: block;
        padding: 12px 20px;
        color: #fff;
        text-decoration: none;
        text-align: left;
        border-bottom: 1px solid #555;
    }

    /* 模态框优化 */
    #researchDetailModal .modal-dialog {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 15px auto !important;
    }
}

@media (min-width: 992px) {
    .mobileMenu {
        display: none;
    }

    /* PC端隐藏汉堡按钮 */
    .mainMenu {
        display: block;
    }

    /* PC端显示常规菜单 */
    #researchDetailModal .modal-lg {
        max-width: 800px !important;
    }
}
/* ======================================================= */
/* ====== 【【【  ↓↓↓ 最终补充：主页视频弹窗尺寸修复 ↓↓↓  】】】 ====== */
/* ======================================================= */

/* --- 主页视频播放器窗口 --- */
#myModal .modal-content {
    /* 我们不再使用 aspect-ratio，而是直接控制尺寸 */
    width: 90vw; /* 宽度为屏幕宽度的90% */
    height: 50.625vw; /* 高度根据16:9计算得出 (9 / 16 * 90 = 50.625) */

    /* 【关键】添加最大尺寸限制，确保它不会比屏幕还大 */
    max-width: calc(90vh * (16/9)); /* 最大宽度 = 屏幕高度的90% * 1.777 (16/9) */
    max-height: 90vh; /* 最大高度 = 屏幕高度的90% */
    
    /* 确保背景和圆角 */
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    
    /* 覆盖掉其他可能影响定位的属性 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 确保内部的video标签能完全填充 */
#myModal .modal-content video {
    width: 100%;
    height: 100%;
}