﻿    :root {
      --primary: #1a8a45;       /* 主绿色 */
      --primary-light: #2ca86e;
      --orange: #ff7a3d;
      --orange-dark: #ff5c28;
      --light-bg: #f9f9f9;
      --gray: #666;
      --light-gray: #ddd;
      --white: #fff;
      --border-radius: 8px;
      --shadow: 0 4px 12px rgba(0,0,0,0.05);
      --transition: all 0.3s ease;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    body {
      background-color: #f5f5f5;
      color: var(--gray);
      line-height: 1.6;
    }

    /* ========== 顶部导航 ========== */
    .top-nav {
      background: var(--primary);
      color: white;
      display: flex;
      overflow-x: auto;
    }

    .nav-item {
      flex: 0 0 auto;
      padding: 14px 20px;
      font-size: 15px;
      font-weight: 500;
      white-space: nowrap;
      cursor: pointer;
      transition: var(--transition);
    }

    .nav-item.active {
      background: var(--orange);
      color: white;
    }

    .nav-item:hover:not(.active) {
      background: rgba(255,255,255,0.15);
    }

    /* ========== 面包屑 ========== */
    .breadcrumb {
      padding: 16px 20px;
      background: var(--white);
      font-size: 14px;
      color: #999;
    }

    .breadcrumb a {
      color: #333;
      text-decoration: none;
    }

    .breadcrumb a:hover {
      text-decoration: underline;
    }

    /* ========== 主容器 ========== */


    /* ========== 布局：PC 两栏 / Mobile 单列 ========== */
    .layout {
      display: flex;
      gap: 15px;
      margin-top: 10px;
      
    }

    .main-content {
      flex: 1;
      background: var(--white);
      border-radius: var(--border-radius);
      padding: 10px;
      box-shadow: var(--shadow);
    }

    .sidebar {
      flex: 0 0 320px;
      background: var(--white);
      border-radius: var(--border-radius);
      padding: 20px;
      box-shadow: var(--shadow);
      position: sticky;
      top: 20px;
    }

    /* ========== 文章标题 ========== */
    .article-title 
    {
        padding:30px 0px 0px 0px;
      font-size: 24px;
      color: var(--primary);
      font-weight: 700;
      text-align: center;
      margin-bottom: 24px;
      line-height: 1.4;
    }

    .article-meta {
      text-align: center;
      font-size: 13px;
      color: #999;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--light-gray);
    }

    /* ========== 导语框 ========== */
    .intro-box {
      background: #fff9e6;
      border-left: 4px solid var(--orange);
      padding: 16px 20px;
      margin: 24px 0;
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
      font-size: 14px;
      line-height: 1.6;
    }

    .intro-box p {
      margin: 0;
    }

    /* ========== 图片 ========== */
    .article-img {
      width: 100%;
      border-radius: var(--border-radius);
      margin: 24px 0;
      box-shadow: var(--shadow);
    }

    /* ========== 导语摘要 ========== */
    .summary-box {
      display: flex;
      background: var(--white);
      border: 1px solid var(--light-gray);
      border-radius: var(--border-radius);
      overflow: hidden;
      margin: 24px 0;
    }

    .summary-label {
      background: var(--primary);
      color: white;
      padding: 20px 16px;
      font-weight: 700;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      min-width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .summary-content {
      padding: 20px;
      flex: 1;
    }

    /* ========== 正文 ========== */
    .article-body {
      font-size: 15px;
      color: #444444;
    }

    .article-body p {
      margin-bottom: 16px;
    }
    
    .article-body div {
       text-indent:0px;
    }
    



    
      .article-body h2{font-size:24px; line-height:60px; font-weight:400; color:#000000; }
      .article-body h3{font-size:22px; line-height:60px; font-weight:400; color:#111111;}
      .article-body h4{font-size:16px; line-height:60px; font-weight:600; color:#222222;}
      
      .article-body ol,.article-body ul{list-style: none;counter-reset: num;z-index:0px; padding-left:0; margin:0; }
      .article-body ol li,.article-body ul li{position: relative; margin: 8px 0; counter-increment: num; text-indent:0px; padding-left:15px; }
      .article-body ol li p,.article-body ul li p{ padding:0px; text-indent:0px}
      .article-body ol li::before,.article-body ul li::before { content: counter(num) "."; position: absolute;left: 0;top: 0; color:#000000; font-weight: bold;}
      
      


    /* ========== 标签 ========== */
    .tags {
      margin-top: 32px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tag {
      background: #f0f9f0;
      color: var(--primary);
      border: 1px solid #d0e6d0;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 14px;
    }

    /* ========== 上下篇 ========== */
    .prev-next {
      margin-top: 40px;
      padding: 20px 0;
      border-top: 1px dashed var(--light-gray);
      font-size: 14px;
    }

    .prev-next a {
      color: var(--primary);
      text-decoration: none;
    }

    .prev-next a:hover {
      text-decoration: underline;
    }

    /* ========== 侧边栏：预约报名 ========== */
    .sidebar-section {
      margin-bottom: 28px;
    }

    .sidebar-title {
      background: linear-gradient(135deg, var(--orange), var(--orange-dark));
      color: white;
      padding: 12px 20px;
      border-radius: var(--border-radius) var(--border-radius) 0 0;
      font-weight: 700;
      font-size: 16px;
      text-align: center;
      position: relative;
    }

    .sidebar-title::before {
      content: "";
      position: absolute;
      top: -12px;
      left: 20px;
      width: 0;
      height: 0;
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
      border-bottom: 12px solid var(--orange);
    }

    .sidebar-content {
      padding: 20px;
      background: #fff9f5;
      border: 1px solid #ffe0d0;
      border-radius: 0 0 var(--border-radius) var(--border-radius);
    }

    .form-group {
      margin-bottom: 16px;
    }

    .form-label {
      display: block;
      font-weight: 600;
      color: var(--orange-dark);
      margin-bottom: 6px;
      font-size: 14px;
    }

    .form-input,
    textarea {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
    }

    .checkbox-group 
    {
        font-size:14px;
      margin-top: 5px;
    }

    .checkbox-group span
    {
        padding:5px;
    }

    .checkbox-item input {
      margin-right: 5px;
      accent-color: var(--orange);
    }

    textarea {
      min-height: 100px;
      resize: vertical;
      padding: 12px;
    }

    .submit-btn {
      width: 100%;
      background: linear-gradient(135deg, var(--orange), var(--orange-dark));
      color: white;
      border: none;
      border-radius: 6px;
      padding: 12px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 12px;
      font-size: 15px;
    }

    .commitment {
      margin-top: 16px;
      font-size: 12px;
      color: #666;
      line-height: 1.5;
    }

    /* ========== 二维码区块 ========== */
    .qr-section {
      text-align: center;
    }

    .qr-img {
      width: 180px;
      height: 180px;
      margin: 0 auto 12px;
      background: #f5f5f5;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #999;
    }
.qr-img img{ width:100%;}
    .qr-caption {
      font-size: 14px;
      color: #555;
    }

    /* ========== 相关资讯 ========== */
    .related-title {
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 2px dotted var(--light-gray);
    }

    .related-list {
      list-style: none;
    }

    .related-list li 
    {
        margin:0px;
      position: relative;
      padding-left: 16px;
    }

    .related-list li::before {
      content: "•";
      color: var(--orange);
      position: absolute;
      left: 0;
      font-weight: bold;
    }

    .related-list a {
      color: #333;
      text-decoration: none;
      font-size: 14px;
    }

    .related-list a:hover {
      color: var(--primary);
      text-decoration: underline;
    }
    
    

    /* ========== 底部版权 ========== */
    .footer {
      background: var(--white);
      padding: 24px 20px;
      margin-top: 40px;
      font-size: 12px;
      color: #999;
      text-align: center;
      border-top: 1px solid var(--light-gray);
    }

    .footer p {
      margin: 6px 0;
    }

    /* ========== 响应式断点 ========== */
    @media (max-width: 768px) {
      .layout {
        flex-direction: column;
      }

      .sidebar {
        flex: none;
        position: static;
        margin-top: 24px;
      }

      .top-nav {
        flex-wrap: nowrap;
      }

      .nav-item {
        padding: 12px 16px;
        font-size: 14px;
      }

      .main-content,
      .sidebar {
        padding: 20px;
      }

      .article-title {
        font-size: 20px;
      }

      .summary-label {
        min-width: 36px;
        padding: 16px 12px;
      }

      .checkbox-group {
        grid-template-columns: 1fr;
      }
      
      .article-body img{ width:100%}
      .article-body h2{font-size:19px; line-height:30px; font-weight:600; color:#000000; text-indent:0px;}
      .article-body h3{font-size:17px; line-height:30px; font-weight:500; color:#111111; text-indent:0px;}
      .article-body h4{font-size:15px; line-height:30px; font-weight:600;color:#222222; text-indent:0px;}
      
    }

    @media (max-width: 480px) {
      .container {
        padding: 12px;
      }

      .main-content,
      .sidebar {
        padding: 16px;
      }

      .article-title {
        font-size: 18px;
      }

      .breadcrumb {
        padding: 12px 12px;
        font-size: 13px;
      }

      .tags {
        gap: 6px;
      }

      .tag {
        padding: 3px 10px;
        font-size: 13px;
      }

      .footer {
        padding: 16px 12px;
        font-size: 11px;
      }
       .article-body img{ width:100%}
    }