/* 全局样式重置与基础设置 */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     margin: 0;
     padding: 0;
     background: #f8f9fa;
     font-family: "Segoe UI", "Microsoft YaHei", Arial, Helvetica, sans-serif;
     background: url(./images/bg2.gif) repeat;
     background-size: auto;
     background-attachment: fixed;
     line-height: 1.6;
     color: #2d3748;
 }

 /* 通用section样式 */
 section {
     background: #ffffff;
     width: calc(100% - 220px);
     margin: 50px 50px 50px 200px;
     padding: 40px 60px;
     border-radius: 12px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     scroll-margin-top: 20px;
     /* 锚点定位偏移，避免被菜单遮挡 */
 }

 section:hover {
     box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
 }


 /* 标题样式优化 */
 h1 {
     color: #2d3748;
     font-size: 2.2rem;
     font-weight: 700;
     margin-top: 0;
     margin-bottom: 1.5rem;
     padding-bottom: 0.8rem;
     border-bottom: 2px solid #cacaca;
 }

 h2 {
     color: #4a5568;
     font-size: 1.8rem;
     font-weight: 600;
     margin-top: 2rem;
     margin-bottom: 1rem;
     position: relative;
     padding-left: 12px;
 }

 h2::before {
     content: "";
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 4px;
     height: 1.2em;
     background: #868686;
     border-radius: 2px;
 }

 h3 {
     color: #718096;
     font-size: 1.4rem;
     font-weight: 600;
     margin-top: 1.8rem;
     margin-bottom: 0.8rem;
 }

 h4,
 h5,
 h6 {
     margin-top: 1.5rem;
     margin-bottom: 1rem;
     color: #4a5568;
 }

 /* 文本与段落样式 */
 p {
     margin-bottom: 1rem;
     font-size: 1rem;
     color: #4a5568;
     line-height: 1.8;
 }

 strong {
     color: #2d3748;
     font-weight: 600;
 }

 /* 代码块与行内代码样式优化 */
 pre {
     background: #f7fafc;
     padding: 1.5rem;
     border-radius: 8px;
     overflow-x: auto;
     border: 1px solid #e2e8f0;
     margin: 1.5rem 0;
 }

 code {
     background: #f7fafc;
     padding: 0.3rem 0.6rem;
     border-radius: 4px;
     font-family: "Consolas", "Monaco", monospace;
     font-size: 0.9rem;
     color: #e53e3e;
 }

 /* 引用样式 */
 blockquote {
     border-left: 4px solid #4299e1;
     padding: 1rem 1.5rem;
     margin: 1.5rem 0;
     background: #f0f8fb;
     border-radius: 0 6px 6px 0;
     color: #4a5568;
 }

 /* 表格样式美化 */
 table {
     border-collapse: collapse;
     width: 100%;
     margin: 1.5rem 0;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }

 th {
     background: #4299e1;
     color: #ffffff;
     font-weight: 600;
     padding: 1rem;
     text-align: left;
 }

 td {
     border: 1px solid #e2e8f0;
     padding: 1rem;
     text-align: left;
     background: #ffffff;
 }

 tr:nth-child(even) td {
     background: #f7fafc;
 }

 /* 链接样式 */
 a {
     color: #4299e1;
     text-decoration: none;
     transition: color 0.2s ease;
 }

 a:hover {
     color: #2b6cb0;
     text-decoration: underline;
 }

 /* 列表样式 */
 ul,
 ol {
     margin: 1rem 0 1.5rem 2rem;
     color: #4a5568;
 }

 ul li,
 ol li {
     margin-bottom: 0.6rem;
     line-height: 1.8;
 }

 ul li ul,
 ol li ol {
     margin: 0.4rem 0 0.4rem 2rem;
 }

 /* 图片样式 */
 img {
     max-width: 100%;
     height: auto;
     border-radius: 8px;
     margin: 1rem 0;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
 }

 img.qrcode-img {
     max-width: 250px;
     /* 二维码宽度，可自行调整 */
     height: auto;
 }

 /* 左侧悬浮菜单 - 保留原有样式 */
 #fl_menu {
     position: absolute;
     top: 50px;
     left: 0px;
     z-index: 9999;
     width: 150px;
     height: 50px;
 }

 #fl_menu .label {
     padding-left: 20px;
     line-height: 50px;
     font-size: 14px;
     font-weight: bold;
     background: #000;
     color: #fff;
     letter-spacing: 7px;
 }

 #fl_menu .menu {
     display: none;
 }

 #fl_menu .menu .menu_item {
     display: block;
     background: #000;
     color: #bbb;
     border-top: 1px solid #333;
     padding: 10px 20px;
     font-size: 12px;
     text-decoration: none;
 }

 #fl_menu .menu a.menu_item:hover {
     background: #333;
     color: #fff;
 }


 #fl_menu .label i {
     animation: pulse 2s infinite;
     color: #ff6f61;
 }

 /* 动画效果 */
 @keyframes pulse {
     0% {
         opacity: 1;
     }

     50% {
         opacity: 0.6;
     }

     100% {
         opacity: 1;
     }
 }

 /* 响应式适配优化 */
 @media (max-width: 1200px) {
     .content {
         width: calc(100% - 180px);
         margin: 40px 30px 40px 150px;
         padding: 30px 40px;
     }
 }

 @media (max-width: 768px) {
     .content {
         width: calc(100% - 40px);
         margin: 30px 20px;
         padding: 20px 25px;
     }

     h1 {
         font-size: 1.8rem;
     }

     h2 {
         font-size: 1.5rem;
     }

     h3 {
         font-size: 1.2rem;
     }
 }

 /* 新增：项目信息容器样式 */
 .project-info-container {
     display: flex;
     /* 核心：Flex水平布局 */
     align-items: stretch;
     /* 子元素拉伸至等高 */
     justify-content: flex-start;
     /* 整体靠左对齐 */
     margin: 0px auto;
     /* 上下间距，左右居中 */
     max-width: 1200px;
     /* 限制最大宽度 */
     width: 100%;
     /* 宽度自适应 */
     gap: 20px;
     /* 文字和图片间距 */
     flex-wrap: wrap;
     /* 小屏幕自动换行 */
     padding: 0 10px;
     overflow: hidden;
     /* 兜底防溢出 */
 }

 /* 新增：项目文字容器样式 */
 .project-text-wrapper {
     flex: 1 1 40%;
     /* 弹性宽度占比40% */
     min-width: 240px;
     /* 最小宽度，避免过窄 */
     max-width: 500px;
     /* 最大宽度，避免过宽 */
     padding: 15px 20px;
     /* 保留内边距，避免文字贴边 */
     background-color: transparent;
     /* 透明背景（替代原有浅灰色） */
     border-radius: 0;
     /* 去掉圆角 */
     box-shadow: none;
     /* 去掉阴影 */
     border: none;
     /* 兜底去掉边框 */
     display: flex;
     /* 内部Flex，文字垂直居中 */
     align-items: center;
     /* 文字垂直居中 */
 }

 /* 新增：项目文字样式 */
 .project-text-wrapper p {
     font-size: 16px;
     line-height: 3;
     margin: 0;
     color: #333;
     width: 100%;
     /* 文字占满容器宽度 */
 }

 /* 新增：项目图片容器样式 */
 .project-img-wrapper {
     flex: 1 1 30%;
     /* 图片层占比30% */
     min-width: 200px;
     /* 最小宽度 */
     max-width: 300px;
     /* 限制图片最大宽度 */
     padding: 10px;
     /* 内边距，避免内容贴边 */
     display: flex;
     /* 内部Flex，内容垂直居中 */
     flex-direction: column;
     /* 垂直排列图片和说明文字 */
     align-items: center;
     /* 水平居中 */
     justify-content: center;
     /* 垂直居中 */
 }

 /* 新增：项目图片样式 */
 .project-img-wrapper img {
     max-width: 100%;
     /* 适配图片层宽度 */
     width: 100%;
     /* 铺满图片层 */
     height: auto;
     /* 保持宽高比 */
 }