/* ========== 基础样式 ========== */
/* 顶部容器样式 */
.zweb-top-container {
    margin: 0 auto;
    width: 75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 两个顶部div之间的间距 */
    margin-bottom: 1rem; /* 顶部容器和zweb之间的间距 */
    box-sizing: border-box;
}

/* 单个顶部div样式 */
.zweb-top-item {
    width: 100%;
    height: 7.1875rem;
}

/* PC端主容器样式 */
.zweb {
    margin: 0 auto;
    width: 75rem;
    height: 33rem;
    display: flex;
    gap: 1rem; /* 左右区块间距 */
    box-sizing: border-box;
}

/* 左侧容器样式 */
.zweb-left {
    width: 75rem;
    height: 33rem;
    display: flex;
    flex-direction: unset; /* 保持横向排列 */
    gap: 1rem; /* 左侧两个div的间距 */
}

/* 左侧单个子div样式 */
.zweb-left-item {
    width: 100%;
}

/* 右侧容器样式 */
.zweb-right {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* 右侧两个区块的间距 */
    height: 33rem;
}

/* 右侧单个区块样式 */
.zweb-right-item {
    width: 37rem;
    height: 16rem;
}

/* 移动端四宫格容器（默认隐藏） */
.zwebwap {
    width: 100%;
    max-width: 75rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 1rem;
    box-sizing: border-box;
    display: none; /* 默认隐藏，仅小屏显示 */
}

/* 四宫格单个子项 */
.zwebwap-item {
    width: 100%;
    overflow: hidden;
}

/* 统一控制所有img/a标签样式 */
.zweb-top-item a,
.zweb a,
.zwebwap-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.zweb-top-item img,
.zweb img,
.zwebwap-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片铺满容器，保持比例 */
}

/* 四宫格图片hover动效（可选） */
.zwebwap-item img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* ========== 响应式适配 ========== */
/* 大屏（≥75rem）：仅显示zweb，隐藏zwebwap */
@media (min-width: 75rem) {
    .zweb-top-container,
    .zweb {
        width: 75rem;
        margin-bottom: 1rem;
    }
    .zwebwap {
        display: none !important; /* 强制隐藏 */
    }
}

/* 中屏（≤75rem）：zweb自适应，zwebwap仍隐藏 */
@media (max-width: 75rem) {
    /* 顶部容器自适应 */
    .zweb-top-container {
        width: 100%;
        padding: 0 1rem;
    }
    .zweb-top-item {
        height: calc((100vw - 2rem) * (7.1875 / 75)); /* 按比例自适应高度 */
    }

    /* zweb容器自适应 */
    .zweb {
        width: 100%;
        height: auto;
        flex-wrap: wrap;
        padding: 0 1rem;
    }
    .zweb-left {
        width: 100%;
        height: calc((100vw - 2rem) * (33 / 75));
        margin-bottom: 1rem;
    }
    .zweb-right {
        width: 100%;
        height: auto;
        justify-content: center;
    }
    .zweb-right-item {
        width: calc(50% - 0.5rem);
        height: calc((100vw - 2rem) * (16 / 75));
    }

    /* 中屏仍隐藏四宫格 */
    .zwebwap {
        display: none !important;
    }
}

/* 中等屏幕（≤50.75rem）：优化zweb布局，仍隐藏zwebwap */
@media (max-width: 50.75rem) {
    .zweb-left {
        flex-direction: column;
        height: auto;
    }
    .zweb-left-item {
        height: 20rem;
    }
    .zweb-right-item {
        width: 100%;
        height: 20rem;
    }
    .zwebwap {
        display: none !important;
    }
}

/* 移动端（≤40rem）：隐藏zweb，显示zwebwap */
@media (max-width: 40rem) {
    /* 顶部容器小屏优化 */
    .zweb-top-container {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 0 0.5rem;
    }
    .zweb-top-item {
        height: 10rem;
    }

    /* 隐藏PC端主容器 */
    .zweb {
        display: none !important; /* 强制隐藏 */
    }

    /* 显示移动端四宫格 */
    .zwebwap {
        display: grid !important; /* 强制显示 */
        gap: 0.3rem;
        padding: 0.3rem;
    }

    /* 可选：小屏四宫格改为1列布局 */
    /* .zwebwap {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    } */
}