﻿/* 全局样式：重置默认边距、统一字体 */ 
    /* ===== 基础重置与全局样式 ===== */
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: "微软雅黑", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: #fff;
      color: #333;
      min-height: 100vh;
      position: relative;
    }
    
    /* ===== 顶部导航栏样式 ===== */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      background: #ffffff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: all 0.3s ease;
    }
    
    .header-left {
      display: flex;
      align-items: center;
      flex: 1;
    }
    
    /* Logo样式 */
    .logo {
      max-width: 150px;
      height: auto;
    }
    
    /* 导航控制按钮 */
    .nav-controls {
      display: flex;
      align-items: center;
      gap: 15px;
      position: relative;
      z-index: 1002;
    }
    
    .icon {
      font-size: 24px;
      color: #333;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .icon:hover {
      color: #002FA7;
    }
    
    /* 搜索框样式 */
    .search-container {
      display: flex;
      align-items: center;
      padding: 6px;
      width: 40px;
      height: 40px;
      transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
      will-change: transform, opacity;
      position: relative;
      z-index: 1001;
      border-radius: 20px;
      background: transparent;
    }
    
    .search-container.expanded {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: white;
      border-radius: 30px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
      padding: 6px 15px;
      width: calc(100% - 40px);
      height: 50px;
      z-index: 1003;
    }
    
    .search-icon {
      width: 24px;
      height: 24px;
      margin: 0 4px;
      cursor: pointer;
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }
    
    .search-container.expanded .search-icon {
      transform: scale(0.9);
    }
    
    .search-container input {
      flex: 0;
      border: none;
      outline: none;
      padding: 0;
      font-size: 16px;
      color: #333;
      opacity: 0;
      transition: all 0.3s ease 0.1s;
      width: 0;
      background: transparent;
      height: 100%;
    }
    
    .search-container.expanded input {
      flex: 1;
      padding: 8px 12px;
      opacity: 1;
      margin: 0 10px;
      width: auto;
    }
    
    .close-btn {
      border: none;
      background: transparent;
      font-size: 22px;
      color: #888;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      flex-shrink: 0;
      width: 0;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .search-container.expanded .close-btn {
      opacity: 1;
      visibility: visible;
      width: 24px;
    }
    
    .close-btn:hover {
      color: #ff4d4d;
      transform: scale(1.1);
    }
    
    /* 导航菜单样式 - 已修复 */
    .nav-list {
      background-color: #002FA7;
      list-style: none;
      position: fixed;
      top: 70px;
      left: 0;
      right: 0;
      z-index: 999;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      max-height: 0;
      opacity: 0;
      overflow-y: auto;
      transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
      will-change: transform, opacity;
    }
    
    .nav-list.active {
      max-height: calc(100vh - 70px);
      opacity: 1;
    }
    
    .nav-list li {
      display: flex;
      align-items: center;
      padding: 18px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      transition: background 0.3s ease;
      cursor: pointer;
    }
    
    .nav-list li:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    
    .nav-list li i {
      font-size: 22px;
      margin-right: 15px;
      width: 30px;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
    }
    
    .nav-list li span {
      font-size: 16px;
      color: white;
      font-weight: 500;
    }
    
    /* 主体文字区域 */ 
    .content { color:#1f2ea1;
      padding: 15px; 
    } 
    
    .content h1 { 
      font-size: 18px; 
      font-weight: bold; 
      margin-bottom: 10px; 
    } 
    
    .content p { 
      font-size: 14px; 
      margin-bottom: 10px; 
      line-height: 1.8; 
    } 
    
    /* 蓝色信息区块 */ 
    .contact-section { 
      background-color: #0066cc;
      color: #fff; 
      padding: 15px; 
    } 
    
    /* 联系信息和二维码容器 */
    .contact-qr-container {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 15px;
    }
    
    /* 联系方式列表 */ 
    .contact-info { 
      flex: 1;
      margin-right: 20px;
      font-size: 14px; 
      line-height: 1.8; 
    } 
    
    .contact-info div { 
      margin: 2px 0; 
    } 
    
    /* 二维码（右对齐） */ 
    .qr-code { 
      flex-shrink: 0;
      text-align: center;
    } 
    
    .qr-code img { 
      width: 100px; 
      height: 100px; 
      border: 3px solid #fff;
      border-radius: 8px;
    }
    
    .qr-code p {
      margin-top: 8px;
      font-size: 12px;
    }
    
    /* 地图 + 放大镜区域（相对定位实现放大镜覆盖） */ 
    .map-container { 
      position: relative; 
      width: 100%; 
      overflow: hidden; 
      margin-top: 15px;
    } 
    
    .map-image { 
      width: 100%; 
      display: block;
      border-radius: 8px;
    } 
    
    .magnifier { 
      position: absolute; 
      bottom: 10px;
      right: 10px; 
      width: 40px; 
      height: 40px; 
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      padding: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    } 
    
    /* 左下角聊天图标（固定定位） */ 
    .chat-icon { 
      position: fixed; 
      bottom: 20px; 
      left: 20px; 
      width: 40px; 
      height: 40px; 
    } 
    
    /* ===== 底部固定图标样式 ===== */
    .footer-icons {
      position: fixed;
      bottom: 8px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      z-index: 1005;
    }
    
    .fixed-icon {
      padding: 10px;
      border-radius: 50%;
      font-size: 24px;
      color: #333;
      cursor: pointer;
    }
    
    /* 回到顶部按钮添加白色背景 */
    .top-icon {
      background-color: white;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    .bottom-icons {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px 16px;
    }
    
    .action-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-top: 1px solid #eee;
      position: absolute;
      bottom: 0;
      width: 100%;
      background: #fff;
      z-index: 10;
    }
    
    .action-bar img {
      height: 22px;
    }
    
    /* 响应式设计 */
    @media (max-width: 480px) {
      .contact-qr-container {
        flex-direction: column;
      }
      
      .contact-info {
        margin-right: 0;
        margin-bottom: 15px;
      }
      
      .qr-code {
        align-self: center;
      }
      
      .qr-code img {
        width: 80px;
        height: 80px;
      }
    }