﻿			/* 全局样式：重置默认边距、统一字体 */
			/* ===== 基础重置与全局样式 ===== */

			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			   .container { 
      width: 375px; /* 适配移动端宽度，可调整 */ 
      padding: 20px; 
      position: relative; 
    } 
 
    /* 顶部标题区 */ 
    .header { 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      margin-bottom: 15px; 
    } 
    .header h1 { 
      font-size: 28px; 
      color: #ffd700; /* 金色标题 */ 
    } 
    .refresh-icon { 
      width: 30px; 
      height: 30px; 
      /* 替换为实际刷新图标 */ 
      background: url('images/refresh.png')  no-repeat center / contain; 
      cursor: pointer; 
    } 

			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 {
				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;
				}
			}


			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				-webkit-tap-highlight-color: transparent;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				user-select: none;
			}

			body {
				background: url("../img/bg.jpg") no-repeat center center;
				background-size: cover;
				background-attachment: fixed;
				min-height: 100vh;
				position: relative;
				overflow-x: hidden;
				touch-action: manipulation;
			}

			body::before {
				content: "";
				position: absolute;
				top: 30%;
				left: 0;
				width: 100%;
				height: 60%;
				background: linear-gradient(to right, transparent 0%, #ff990022 50%, transparent 100%);
				z-index: 0;
				display: none;
			}

		/* 修改顶部标题区样式 */
  .header1 {
    display: flex;
    justify-content: center; /* 标题居中 */
    align-items: center;
    margin-bottom: 20px;
    padding-top: 10px;
    position: relative; /* 为刷新图标定位 */
  }
 
  .header1 h1 {
    font-size: 24px;
    color: #ffcc33;
    text-align: center; /* 确保文字居中 */
  }
 
  /* 刷新图标定位到右侧 */
  .refresh-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    margin-top: 0; /* 移除原有上边距 */
    background: url("refresh.svg")  no-repeat center;
    background-size: cover;
  }
 
  /* 公司信息左对齐 */
 
  .company1 {
    color: #ff6600;
    font-size: 18px;
  }
 
 
  .spec {
    color: #ffcc33;
    font-size: 16px;
  }

			/* 返回按钮样式 */
			.back-button {
				position: fixed;
				top: 15px;
				right: 15px;
				width: 40px;
				height: 40px;
				background: rgba(255, 102, 0, 0.8);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-size: 24px;
				font-weight: bold;
				z-index: 1000;
				text-decoration: none;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
			}

			.back-button:active {
				background: rgba(255, 102, 0, 1);
				transform: scale(0.95);
			}

			.company1-info {
				margin-bottom: 20px;
				line-height: 1.6;
			}

			.company1-info .title,
			.company1-info .category {
				color: #ff6600;
				font-size: 18px;
			}

			.company1-info .spec {
				color: #ffcc33;
				font-size: 16px;
			}

			/* 核心优化：固定按钮区域容器（已调整top值实现整体下移） */
			.buttons-container {
				/* position: fixed;
				top: 57%;
				 
				left: 50%;
				transform: translate(-50%, -50%);
				width: 90%;
				max-width: 550px;
				z-index: 2; */
				margin-top: 3px;
			}

			.buttons-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 8px;
				/* 原10px → 8px，缩小间距 */
				margin-bottom: 20px;
			}

			.btn {
				height: 55px;
				/* 原65px → 55px，缩小按钮高度 */
				background: url("../img/an_03.png") no-repeat center;
				background-size: contain;
				border-radius: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 10px;
				color: white !important;
				font-size: 11px;
				/* 原12px → 11px，缩小字体 */
				text-decoration: none;
				position: relative;
			}

			.btn::before {
				content: "";
				position: absolute;
				left: 15%;
				width: 18px;
				height: 18px;
				background: url("icon.png") no-repeat center;
				background-size: contain;
			}

			.btn span {
				margin-left: 25px;
			}

			/* 查看全部按钮位置保持不变 */
			.view-all-container {
				display: flex;
				justify-content: center;
				/* position: absolute;
				bottom: -60px; */
				/* 保持原定位 */
				left: 0;
				right: 0;
			}

			.view-all {
				height: 64px;
				width: 280px;
				background: url("../img/an_07.png") no-repeat center;
				background-size: contain;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white !important;
				font-size: 16px;
				text-decoration: none;
				position: relative;
			}

			.view-all::before {
				content: "";
				position: absolute;
				left: 20%;
				width: 25px;
				height: 25px;
				background-size: 60%;
				border-radius: 50%;
			}

			.view-all span {
				margin-left: 35px;
			}

			.product-modal {
				position: fixed;
				top: 20px;
				right: 20px;
				z-index: 9999;
				display: none;
			}

			.close-btn {
				position: absolute;
				top: -15px;
				right: -15px;
				color: white;
				font-size: 24px;
				cursor: pointer;
				background: #ff6600;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2px solid white;
			}

			.modal-img {
				width: 280px;
				height: auto;
				border-radius: 10px;
				box-shadow: 0px 0 20px rgba(0, 0, 0, 0.5);
				border: 1px solid #ffcc33;
			}

			/* 响应式调整 */
			@media (max-width: 480px) {
				.buttons-grid {
					gap: 6px;
					/* 进一步缩小移动端间距 */
				}

				.btn {
					height: 50px;
					/* 移动端进一步缩小按钮 */
					font-size: 10px;
				}

				.view-all {
					width: 240px;
					font-size: 14px;
				}

				.view-all span {
					margin-left: 25px;
				}

				.back-button {
					top: 10px;
					right: 10px;
					width: 35px;
					height: 35px;
					font-size: 20px;
				}
			}
			.info {padding: 10px;
    text-align: left;
    margin-bottom: 8px;
    line-height: 1.6; /* 统一设置行高 */
}

.company1, .category, .spec {
    line-height: 1.6; /* 确保所有元素使用相同的行高 */
    margin-bottom: 5px; /* 添加一些间距使文本更清晰 */
}

.company1 {
    color: #ff6600;
    font-size: 18px;
}

.category {
    color: #ff6600;
    font-size: 16px;
}

.spec {
    color: #ffcc33;
    font-size: 16px;
}