body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 20px;
        text-align: center; /* 使内容居中 */
    }
    .container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        max-width: 1440px;
        margin: 0 auto; /* 容器居中 */
        justify-content: center; /* 卡片居中 */
    }
    .card {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        width: calc(25% - 40px); /* 每行显示4个卡片 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        text-align: left; /* 卡片内容左对齐 */
    }
    .card h3 {
        margin-top: 0;
        color: #333;
    }
    .card p {
        margin: 5px 0;
        color: #666;
    }
    .card a {
        color: #007bff;
        text-decoration: none;
    }
    .card a:hover {
        text-decoration: underline;
    }
    @media (max-width: 1200px) {
        .card {
            width: calc(33.333% - 40px); /* 每行显示3个卡片 */
        }
    }
    @media (max-width: 768px) {
        .card {
            width: calc(50% - 40px); /* 每行显示2个卡片 */
        }
    }
    @media (max-width: 480px) {
        .card {
            width: 100%; /* 每行显示1个卡片 */
        }
    }
    /* 图片样式 */
    h1 img {
        max-width: 100%; /* 图片宽度自适应 */
        height: auto; /* 高度自适应 */
        display: block; /* 防止图片下方有空白 */
        margin: 0 auto; /* 图片居中 */
    }
    /* 地图样式 */
    iframe {
        max-width: 100%; /* 地图宽度自适应 */
        height: 500px; /* 固定高度 */
        display: block; /* 防止地图下方有空白 */
        margin: 20px auto; /* 地图居中 */
    }