<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 关键 viewport 设置，确保移动端正确缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>协会网络培训平台停服升级通知</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* 优化盒模型，便于尺寸计算 */
        }

        body {
            background: #f4f4f4;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 系统字体，提升可读性 */
            color: #333;
            line-height: 1.5;
        }

        .news {
            margin: 20px 15px; /* 移动端优先，默认使用较小的边距 */
            padding: 10px 0;
        }

        .news .news-contain {
            max-width: 1000px;
            min-height: 400px;
            margin: 0 auto; /* 水平居中 */
            border: 1px solid #e5e5e5;
            border-radius: 4px; /* 稍大的圆角更现代 */
            background: #fff;
            overflow: hidden; /* 防止内容溢出圆角 */
        }

        .news .news-header {
            text-align: center;
            border-bottom: 1px solid #e5e5e5;
            position: relative;
            margin: 0 30px; /* 默认边距 */
        }

        .news .news-header p {
            font-size: 24px; /* 移动端默认标题大小 */
            font-weight: bold;
            line-height: 1.4;
            padding: 40px 0 25px;
        }

        .news .news-bodyer {
            padding: 25px 30px; /* 默认内边距 */
        }

        .news .news-bodyer p {
            font-size: 16px; /* 移动端默认正文字号 */
            line-height: 1.6;
            margin-bottom: .6em; /* 使用em单位，让段落间距随字体大小变化 */
        }

        .news .news-bodyer p[style*="text-indent"] {
            text-indent: 2em;
        }

        /* 针对大屏幕的优化 (PC) */
        @media screen and (min-width: 769px) {
            .news {
                margin: 40px 30px 0;
            }

            .news .news-header {
                margin: 0 50px;
            }

            .news .news-header p {
                font-size: 30px; /* PC端大标题 */
                padding: 60px 0 40px;
            }

            .news .news-bodyer {
                padding: 30px 50px;
            }

            .news .news-bodyer p {
                font-size: 18px; /* PC端正文字号 */
                line-height: 30px;
            }
        }

        /* 针对小屏幕的优化 (手机) */
        @media screen and (max-width: 768px) {
            .news {
                margin: 15px 10px; /* 手机端极简边距 */
            }

            .news .news-contain {
                min-height: 300px; /* 减少最小高度 */
                border-radius: 3px;
            }

            .news .news-header {
                margin: 0 20px; /* 手机端标题区边距 */
            }

            .news .news-header p {
                font-size: 22px; /* 手机端标题 */
                padding: 30px 0 20px;
            }

            .news .news-bodyer {
                padding: 20px; /* 手机端内容区内边距 */
            }

            .news .news-bodyer p {
                font-size: 16px;
                line-height: 1.7; /* 手机端稍大的行高便于阅读 */
            }
            /* 手机端调整特别大的上下边距 */
            .news .news-bodyer p[style*="margin-top: 55px"] {
                margin-top: 35px !important; /* 使用 !important 覆盖内联样式 */
            }
        }

        /* 针对超小屏幕的额外优化 (小手机) */
        @media screen and (max-width: 480px) {
            .news .news-header p {
                font-size: 20px;
                padding: 25px 0 18px;
            }

            .news .news-bodyer {
                padding: 15px;
            }

            .news .news-bodyer p {
                font-size: 15px;
            }
        }
    </style>
</head>

<body>
    <div class="news">
        <div class="news-contain">
            <div class="news-header">
                <p>协会网络培训平台停服升级通知</p>
            </div>
            <div class="news-bodyer">
                <p style="padding-bottom: 20px;">平台用户：</p>
                <p style="text-indent: 2em;">为进一步优化协会网络培训平台功能体验、提升培训服务质效，平台将进行系统升级改造，期间需暂停服务。现将具体事宜通知如下：</p>
                <p style="text-indent: 2em;"><strong>一、停服时间</strong></p>
                <p style="text-indent: 2em;">自2025年12月26日17:00起至2026年1月4日9:00止。</p>
                <p style="text-indent: 2em;"><strong>二、上线时间</strong></p>
                <p style="text-indent: 2em;">自2026年1月4日9:00起，协会培训平台新系统正式上线运行，恢复全部服务功能。</p>
                <p style="text-indent: 2em;"><strong>三、相关说明</strong></p>
                <p style="text-indent: 2em;">停服期间，平台所有操作功能（包括课程学习、测试作答、信息查询等）将暂停使用，请于停服前完成正在“学习中”的课程，否则学时将无法记录。给您带来的不便，敬请谅解。</p>
                <p style="text-indent: 2em;">系统升级后，原有账号信息及学习记录等数据将全部保留，无需重新注册或录入。</p>
                <p style="text-indent: 2em;">新系统操作指南将同步在平台首页发布，供查阅。</p>
                <p style="text-indent: 2em;"><strong>四、咨询方式</strong></p>
                <p style="text-indent: 2em;">若有疑问，可通过以下渠道联系咨询：</p>
                <p style="text-indent: 2em;">客服热线：4008899650（周一至周日8:30-20:30）</p>
                <p style="text-indent: 2em;">咨询邮箱：train@cfachina.org</p>
                <p style="text-indent: 2em;">感谢您对协会平台建设的支持与配合！</p>
                <!-- 注意：媒体查询中的CSS会覆盖此处的上边距 -->
                <p style="text-align: right; margin-top: 55px;">中国期货业协会</p>
                <p style="text-align: right;">2025年12月23日</p>
            </div>
        </div>
    </div>
</body>

</html>