﻿  /* 全局样式 */ 
    * { 
      margin: 0; 
      padding: 0; 
      box-sizing: border-box; 
    } 
    
    html, body { 
      width: 100%; 
      height: 100%; 
     
      font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", sans-serif; 
    } 
    
    /* 容器样式：垂直排列，标题在按钮上方 */ 
    .container { 
      width: 100vw; 
      height: 100vh; 
      min-height: 100%; 
      background: url("../img/fl.jpg")    no-repeat center center; 
      background-size: cover; 
      position: relative; 
      color: #fff; 
      display: flex; 
      flex-direction: column; 
      align-items: center; 
    } 
 
    /* 新增：关闭按钮样式 */ 
    .close-btn { 
      position: absolute; 
      top: 3vh; 
      right: 5vw; 
      width: 8vw; 
      max-width: 40px; 
      height: 8vw; 
      max-height: 40px; 
      cursor: pointer; 
      display: flex; 
      justify-content: center; 
      align-items: center; 
      z-index: 999; /* 确保在最上层 */ 
    } 
    .close-btn::before, .close-btn::after { 
      content: ''; 
      position: absolute; 
      width: 70%; 
      height: 3px; 
      background-color: #fff; 
      border-radius: 2px; 
      box-shadow: 0 1px 3px rgba(0,0,0,0.5); 
    } 
    .close-btn::before { transform: rotate(45deg); } 
    .close-btn::after { transform: rotate(-45deg); } 
    .close-btn:hover { transform: scale(1.1); transition: transform 0.3s ease; } 
    
    /* Logo样式 */ 
    .logo { 
      width: 25vw; 
      max-width: 180px; 
      min-width: 100px; 
      margin: 5vh 0 0 5vw; 
      align-self: flex-start; 
    } 
    
    /* 文字区域（如需保留其他说明文字，可调整此处） */ 
    .text-area { 
      margin-top: 10vh; 
      text-align: center; 
      padding: 0 8vw; 
    } 
    
    .text-area p { 
      font-size: calc(14px + 1.2vw); 
      line-height: 1.8; 
      margin: 1.5vh 0; 
      text-shadow: 0 2px 4px rgba(0,0,0,0.6); 
    } 
    
    /* 标题样式：移至按钮上方，居中对齐 */ 
    .title { 
      display: flex; 
      justify-content: center; 
      margin-top: 8vh; /* 与顶部保持间距 */ 
      margin-bottom: 3vh; /* 与按钮保持间距 */ 
      width: 100%; 
      padding: 0 3vw; 
      gap: 2vw; 
    } 
    
    .title h1 { 
      font-size: calc(18px + 3vw); 
      font-weight: 700; 
      text-shadow: 0 3px 10px rgba(0,0,0,0.8); 
      letter-spacing: 1.5px; 
    } 
    
    /* 按钮样式 - 增大按钮尺寸 */ 
    .btn { 
      width: 20vw;  /* 增大宽度 */ 
      height: 20vw; /* 增大高度 */ 
      max-width: 100px; /* 增大最大宽度 */ 
      max-height: 100px; /* 增大最大高度 */ 
      min-width: 70px; /* 增大最小宽度 */ 
      min-height: 70px; /* 增大最小高度 */ 
      border-radius: 50%; 
      display: flex; 
      justify-content: center; 
      align-items: center; 
      color: #c32115; 
      font-size: calc(12px + 0.8vw); /* 增大字体 */ 
      cursor: pointer; 
      text-align: center; 
      background-size: cover; 
      background-position: center; 
      background-image: url("../img/lb_05.png");        
      transition: all 0.4s ease; 
      font-weight: 600; 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
      white-space: nowrap; 
      padding: 0 5%; 
      line-height: 1.2; 
    } 
    
    .btn.active     { 
      background-image: url("../img/lb_03.png");        
      transform: scale(1.1); 
      box-shadow: 0 0 25px rgba(195, 33, 21, 0.8); 
      font-weight: 700; 
      z-index: 10; 
    } 
    
    /* 按钮容器：位于标题下方，居中排列 */ 
    .buttons { 
      display: flex; 
      justify-content: center; 
      margin-top: 0; /* 标题已在上方，此处无需额外间距 */ 
      margin-bottom: auto; /* 下方自动留白 */ 
      width: 100%; 
      padding: 0 3vw; 
      gap: 3vw; /* 增加按钮间距 */ 
      flex-wrap: nowrap; 
    } 
    
    /* 响应式适配 */ 
    @media (max-height: 700px) { 
      .title { margin-top: 5vh; margin-bottom: 2vh; } 
      .buttons { margin-bottom: 1vh; } 
    } 
    
    @media (max-width: 480px) { 
      .buttons { gap: 4vw; } 
      .title { margin-top: 65vh; } 
    } 
    
    @media (orientation: landscape) { 
      .container { 
        flex-direction: row; 
        flex-wrap: wrap; 
        justify-content: space-between; 
        padding: 0 5vw; 
      } 
      .logo { width: 15vw; margin: 3vh 0 0 0; } 
      .title { 
        order: 1; 
        width: 100%; 
        margin-top: 65vh; 
        margin-bottom: 2vh; 
      } 
      .buttons { 
        order: 2; 
        width: 100%; 
        margin-bottom: 1vh; 
      } 
      .text-area { 
        order: 3; 
        width: 100%; 
        margin-top: 3vh; 
      } 
    } 
    
    .btn a { 
      display: flex; 
      flex-direction: column; 
      justify-content: center; 
      align-items: center; 
      height: 100%; 
      width: 100%; 
      text-decoration: none; 
      color: inherit; 
    } 
    
    /* 标题样式：增加顶部间距实现下移 */ 
    .title { 
      display: flex; 
      justify-content: center; 
      margin-top: 69vh; 
      margin-bottom: 3vh; 
      width: 100%; 
      padding: 0 3vw; 
      gap: 2vw; 
    } 
    
    /* 按钮区域：可选调整底部间距 */ 
    .buttons { 
      margin-bottom: 10vh; 
    } 
    
    @media (max-height: 700px) { 
      .title { margin-top: 65vh; } 
    } 