/* ===== 响应式断点 ===== */


/* 手机竖屏 */
@media screen and (max-width: 768px) {
    .header{
        background: rgba(255, 255, 255);
        position: relative;
    }
    .header-inner{
        display: none;
    }
    .header-mobile{
        display: block;
        
    }
    
    .mobile-img{
        width: 100vw;
        height: 14.6667vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2.6667vw;
    }
    .mobile-img1{
        width: 35.3333vw;
        height: 9.3333vw;
    }
    .mobile-img2{
        width: 7.3333vw;
        height: 6.6667vw;
    }



/* 默认状态：显示菜单图标，隐藏关闭图标 */
.menu-icon {
    display: block;
    cursor: pointer; /* 加上小手图标，提示可点击 */
}
.close-icon {
    display: none;
    cursor: pointer;
    font-size: 4vw;
    font-weight: bold;
    color: #084c99;
    border: 0.1333vw solid;
    width: 7.3333vw;
    height: 6.6667vw;
    text-align: center;
}

/* 当菜单展开时（父级添加了 is-open 类）：隐藏菜单图标，显示关闭图标 */
.header-mobile.is-open .menu-icon {
    display: none;
}

.header-mobile.is-open .close-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-mobile-submenu a:hover{
    color: #084c99;
}

    .nav-mobile-ul{
        position: absolute;
        width: 100%;
        z-index: 99;
        display: none;
    }
    .nav-mobile-li{
        border-bottom: #505050 0.1333vw solid;
        height: auto;
        background-color: #084c99;
        padding-left:5.3333vw;
        
    }
    .nav-mobile-li a{
        color: #ffffff;
        font-size: 3.3333vw;
        align-items: center;
        display: flex;
        height: 10.6667vw;
        width: 100%;
    }
    /* 可展开的一级栏目右侧箭头。写在这里是因为它在 <a> 里面，
       点它和点整行是同一件事（都走 .mobile-submenu-toggle 的展开逻辑） */
    .nav-mobile-li-has-sub .nav-arrow{
        flex: 0 0 auto;
        width: 1.3333vw;                            /* 10px */
        height: 1.3333vw;
        border-right: 0.2667vw solid #ffffff;       /* 2px */
        border-bottom: 0.2667vw solid #ffffff;
        transform: rotate(45deg);
        margin-left: auto;                          /* 顶到最右 */
        margin-right: 5.3333vw;                     /* 距右边 40px，与左边距对称 */
        margin-top: -0.4667vw;                      /* 旋转后视觉重心偏下，往上挪 3.5px */
        /* 展开/收起时翻转用（margin-top 也要一起动，否则位置是瞬移） */
        transition: transform 0.25s ease, margin-top 0.25s ease;
    }
    /* 子菜单展开：.is-open 由 header.html 里那段手风琴 JS 挂在 .mobile-submenu-toggle 上。
       箭头从向下(45deg)再转 180° → -135deg。
       两边 margin-top 不一样，是因为 transform 绕盒中心转、而墨迹（那两条边框）的重心不在盒中心：
       向下时偏下 2.5px，向上时偏上 2.5px；再加上 flex 的 align-items:center 是按「外边距盒」居中，
       margin-top 每 1px 只让盒子走 0.5px。基础态 -0.4667vw(-3.5px) 把向下箭头的墨迹压到行中心偏下 0.8px，
       这里给 0.88vw(6.6px) 让向上的墨迹落在同一位置，两种状态切换时箭头不会上下跳 */
    .mobile-submenu-toggle.is-open .nav-arrow{
        transform: rotate(-135deg);
        margin-top: 0.88vw;
    }
    /* --- 移动端二级菜单样式 --- */
.nav-mobile-submenu {
    display: none; /* 默认隐藏 */
    list-style: none;
    /* 原 #f9f9f9（灰白），按用户要求改纯白 */
    background-color: #ffffff;
    /* 父级 .nav-mobile-li 有 padding-left:5.3333vw(40px)，把子菜单整块往里顶了 40px。
       块级元素给个 -40px 的 margin-left，宽度 auto 会自动补回来 → 子菜单左边拉通到屏幕边缘 */
    margin-left: -5.3333vw;
}

.nav-mobile-submenu li {
    border-bottom: 0.1333vw solid #eee;
}

.nav-mobile-submenu li a {
    /* display: block; */
    /* 原 4vw(30px)：那时 ul 被父级 padding 推了 40px，文字的绝对位置是 40+30=70px。
       ul 拉通后少了那 40px，这里补进来，文字位置保持不变。
       必须用 padding 而不是 margin：上面的 .nav-mobile-li a 给所有 <a>（含子菜单）设了
       width:100%，子菜单拉通后 = 750px，再加 70px 外边距右边缘就到 820px，会顶出横向滚动条。
       box-sizing:border-box（common.css 的 * 重置）下 padding 算在这 100% 里面，不撑宽 */
    margin-left: 0;
    padding-left: 9.3333vw;
    font-size: 3.1333vw;
    color: #555;
    text-decoration: none;
}

.nav-mobile-submenu li:last-child {
    border-bottom: none;
}
}

/* ==========底部============ */
@media screen and (max-width: 768px) {
    .base{
        display: none;
    }
    .base_mobile{
        padding-top: 8vw;
        padding-left: 2.6667vw;
        display: block;
        font-size: 3.2vw;
        line-height: 6.9333vw;
        /* 原 #ffffff，按用户要求调淡一档 */
        color: rgba(255, 255, 255, 0.75);
        background-color: #0c5da9;
        width: 100%;
        height: 48vw;
    }
    .base_mobile img{
        margin-left: 2.6667vw;
        margin-right: 0.6667vw;
        width: 4vw;
        height: 4vw;
    }
    .base_mobile p{
        display: flex;
        align-items: center;
    }
}