/* 全局设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}

/* 主容器 */
.container {
    width: 90%;  /* 增加容器宽度以适应手机端 */
    max-width: 1200px; /* 最大宽度为1200px，适应PC端 */
    margin: 30px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
header h1 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 20px;
    color: #2c3e50;
}

/* 主体内容部分 */
main {
    padding: 20px;
}

/* 一级标题样式 */
h2 {
    font-size: 22px;
    margin-top: 20px;
    color: #2980b9;
}

/* 列表样式 */
ul {
    list-style-type: none;
    padding-left: 20px;
}

ul li {
    margin: 10px 0;
}

strong {
    color: #333;
}

/* 底部文本 */
footer p.indent {
    padding-left: 2em;  /* 左侧缩进两个字 */
    display: block;     /* 确保这个段落单独换行 */
    margin-bottom: 10px; /* 如果需要在“特此公告。”和后面的内容之间增加一些间隔 */
    white-space: pre-line;  /* 保证换行符生效 */
}

footer p.right-align {
    text-align: right;  /* 右对齐 */
    margin-top: 0;
    font-size: 14px;
    color: #7f8c8d;
}

/* 二维码样式 */
ul li.qr-code {
    text-align: center; /* 使二维码居中 */
    margin: 15px 0;      /* 为二维码和其他内容之间添加间距 */
}

.qr-image {
    width: 150px; /* 设置二维码图片的宽度 */
    height: 150px; /* 设置二维码图片的高度 */
    object-fit: contain; /* 保持二维码图片比例 */
}

/* 手机端优化 */
@media screen and (max-width: 768px) {
    .container {
        width: 95%; /* 增加容器宽度，使内容更贴合屏幕 */
    }

    header h1 {
        font-size: 24px;  /* 调整标题字体大小 */
    }

    main {
        padding: 15px; /* 为手机端增加更紧凑的内边距 */
    }

    h2 {
        font-size: 20px; /* 调整h2标题字体大小 */
    }

    footer p.indent {
        padding-left: 1.5em; /* 在手机端略微减少缩进 */
    }

    footer p.right-align {
        font-size: 12px; /* 调整底部文本大小 */
    }

    /* 优化底部文本的间距 */
    footer p {
        margin-bottom: 8px;
    }

    /* 调整二维码大小以适应手机端 */
    .qr-image {
        width: 120px; /* 更小的二维码 */
        height: 120px; /* 更小的二维码 */
    }
}

/* 平板端和PC端优化 */
@media screen and (min-width: 769px) {
    .container {
        width: 80%;  /* 保持原有宽度，适合平板和PC端 */
    }

    header h1 {
        font-size: 28px;  /* 在大屏幕上保持较大的标题字体 */
    }

    footer p.indent {
        padding-left: 2em;  /* 在PC端保留较大的缩进 */
    }

    footer p.right-align {
        font-size: 14px;  /* 保持PC端上的适中字体大小 */
    }

    /* 调整二维码大小以适应PC端 */
    .qr-image {
        width: 150px; /* 保持二维码在PC端的大小 */
        height: 150px; /* 保持二维码在PC端的大小 */
    }
}