/* 全局样式 */
        :root {
          --junanda: #1a5276;
          /* 深蓝 */
          --zhongan: #6a1b9a;
          /* 紫罗兰 */
          --hainan: #00796b;
          /* 青绿 */
          --highlight: #f39c12;
          /* 强调色 */
        }

        body {
          font-family: 'Microsoft YaHei', sans-serif;
          color: #333;
          line-height: 1.6;
          margin: 0;
          padding: 0;
        }

        .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 15px;
        }

        h1,
        h2,
        h3 {
          color: var(--junanda);
        }

        .btn {
          display: inline-block;
          padding: 10px 20px;
          border-radius: 4px;
          text-decoration: none;
          font-weight: bold;
          transition: all 0.3s;
        }

        .btn-primary {
          background: var(--secondary);
          color: white;
        }

        .btn-primary:hover {
          background: var(--secondary);
          color: white;
        }

        .price-tag {
          background: #f8f9fa;
          border-left: 3px solid var(--highlight);
          padding: 8px 15px;
          margin: 10px 0;
          font-size: 0.9em;
        }

        .free-consult {
          color: var(--highlight);
          font-weight: bold;
        }

        /* 三栏布局样式 */
        .company-tabs {
          display: flex;
          justify-content: center;
          margin: 30px 0;
          flex-wrap: wrap;
        }

        .company-tab {
          padding: 12px 25px;
          cursor: pointer;
          font-weight: bold;
          border-bottom: 3px solid transparent;
          margin: 0 5px;
          text-align: center;
          min-width: 120px;
        }

        .company-tab.active {
          border-bottom-color: var(--junanda);
        }

        .company-tab.junanda.active {
          border-bottom-color: var(--junanda);
        }

        .company-tab.zhongan.active {
          border-bottom-color: var(--zhongan);
        }

        .company-tab.hainan.active {
          border-bottom-color: var(--hainan);
        }

        .company-cards {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 25px;
          margin: 30px 0;
        }

        .company-card {
          border-radius: 8px;
          padding: 25px;
          box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
          transition: transform 0.3s;
          position: relative;
          overflow: hidden;
        }

        .company-card:hover {
          transform: translateY(-5px);
        }

        .company-card.junanda {
          border-top: 4px solid var(--junanda);
        }

        .company-card.zhongan {
          border-top: 4px solid var(--zhongan);
        }

        .company-card.hainan {
          border-top: 4px solid var(--hainan);
        }

        .company-logo {
          height: 40px;
          margin-right: 10px;
        }

        .company-title {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
        }

        /* 企业卡片专属badge（全新优化） */
        .company-badge {
          /* 定位 */
          position: absolute;
          top: 15px;
          right: 15px;
          z-index: 10;

          /* 视觉样式 */
          padding: 4px 12px;
          border-radius: 20px;
          font-size: 0.75em;
          font-weight: bold;
          text-transform: uppercase;
          letter-spacing: 0.5px;

          /* 色彩方案 */
          background: white;
          color: var(--primary-text);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .service-list {
          padding-left: 20px;
        }

        .service-list li {
          margin-bottom: 8px;
          position: relative;
        }

        .service-list li:before {
          content: "•";
          color: var(--highlight);
          font-weight: bold;
          display: inline-block;
          width: 1em;
          margin-left: -1em;
        }

        /* 场景化设计模块 */
        .scenarios {
          background: #f8f9fa;
          padding: 40px 0;
          margin: 50px 0;
        }

        .scenario-tabs {
          display: flex;
          justify-content: center;
          margin-bottom: 30px;
          flex-wrap: wrap;
        }

        .scenario-tab {
          padding: 10px 20px;
          margin: 0 10px;
          cursor: pointer;
          border-radius: 4px;
          background: white;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .scenario-tab.active {
          background: var(--junanda);
          color: white;
        }

        .scenario-content {
          display: none;
        }

        .scenario-content.active {
          display: block;
        }

        .solution-card {
          background: white;
          border-radius: 8px;
          padding: 20px;
          margin-bottom: 20px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .solution-title {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
        }

        /* 解决方案卡片badge */
        .solution-badge {
          display: inline-block;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 0.8em;
          margin-right: 10px;
        }

        /* 不同企业的badge颜色 */
        .company-card.junanda .company-badge {
          background: var(--junanda);
          color: white;
        }

        .company-card.zhongan .company-badge {
          background: var(--zhongan);
          color: white;
        }

        .company-card.hainan .company-badge {
          background: var(--hainan);
          color: white;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
          .company-cards {
            grid-template-columns: 1fr;
          }

          .company-tab,
          .scenario-tab {
            margin: 5px;
            padding: 8px 15px;
            font-size: 0.9em;
          }
        }

        :root {
          --junanda: #1a5276;
          --zhongan: #6a1b9a;
          --hainan: #00796b;
          --highlight: #f39c12;
          --light-bg: #f8f9fa;
        }

        body {
          font-family: 'Microsoft YaHei', sans-serif;
          color: #333;
          line-height: 1.6;
          margin: 0;
          padding: 0;
        }

        .container {
          max-width: 1200px;
          padding: 0 20px;
          width: 90%;
          /* 添加相对宽度 */
        }

        /* 企业切换标签样式 */
        .company-tabs {
          display: flex;
          justify-content: center;
          margin: 30px 0;
          flex-wrap: wrap;
          gap: 5px;
        }

        .company-tab {
          padding: 12px 25px;
          cursor: pointer;
          font-weight: bold;
          border-radius: 30px;
          transition: all 0.3s;
        }

        .company-tab.active {
          background: var(--junanda);
          color: white;
        }

        .company-tab.zhongan.active {
          background: var(--zhongan);
        }

        .company-tab.hainan.active {
          background: var(--hainan);
        }

        /* 企业详情卡片样式 */
        .company-detail {
          display: none;
          background: white;
          border-radius: 8px;
          padding: 30px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
          margin-bottom: 40px;
        }

        .company-detail.active {
          display: block;
          animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(10px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .company-header {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          flex-wrap: wrap;
        }


        .service-list {
          columns: 2;
          column-gap: 30px;
          margin: 20px 0;
        }

        .service-list li {
          margin-bottom: 10px;
          break-inside: avoid;
        }

        .highlight-box {
          background: var(--light-bg);
          padding: 20px;
          border-radius: 8px;
          margin: 25px 0;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
          .company-tab {
            padding: 10px 20px;
            font-size: 0.9em;
          }

          .service-list {
            columns: 1;
          }

          .company-detail {
            padding: 20px;
          }

          .company-badge {
            padding: 3px 8px;
            font-size: 0.7em;
            top: 10px;
            right: 10px;
          }

          .badge {
            font-size: 11px;
            padding: 2px 6px;
          }


          .company-badge {
            padding: 3px 8px;
            font-size: 0.7em;
            top: 10px;
            right: 10px;
          }

          .badge {
            font-size: 11px;
            padding: 2px 6px;
          }
        }

        /* 二维码联系按钮样式 */
        .contact-qrcode {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          padding: 5px 10px;
          background-color: #f5f7fa;
          border-radius: 15px;
          color: #1a56a8;
          text-decoration: none;
          font-size: 14px;
          transition: all 0.3s;
          cursor: pointer;
        }

        .contact-qrcode:hover {
          background-color: #e1e8f5;
        }

        /* 二维码弹窗样式 */
        .qrcode-modal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.7);
          z-index: 1000;
          justify-content: center;
          align-items: center;
        }

        .qrcode-modal-content {
          background: white;
          padding: 30px;
          border-radius: 10px;
          text-align: center;
          max-width: 300px;
          width: 90%;
        }

        .qrcode-title {
          font-size: 18px;
          margin-bottom: 15px;
          color: #333;
        }

        .qrcode-image {
          width: 200px;
          height: 200px;
          margin: 0 auto 15px;
          border: 1px solid #eee;
        }

        .qrcode-image img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        .close-qrcode {
          position: absolute;
          top: 15px;
          right: 15px;
          font-size: 24px;
          color: #999;
          cursor: pointer;
        }

        .close-qrcode:hover {
          color: #333;
        }

        .qrcode-tip {
          font-size: 14px;
          color: #666;
          margin-top: 10px;
        }

        @media (max-width: 768px) {
          .qrcode-modal-content {
            padding: 20px;
          }

          .qrcode-image {
            width: 180px;
            height: 180px;
          }

          .qrcode-title {
            font-size: 16px;
          }
        }

        /* 联系人信息容器 */
        .contact-person {
          margin-top: 20px;
          padding-top: 15px;
          border-top: 1px dashed #e0e0e0;
        }

        /* 二维码展示区域 */
        .qrcode-display {
          margin-top: 10px;
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .qrcode-label {
          font-size: 13px;
          color: #666;
        }

        /* 移动端调整 */
        @media (max-width: 768px) {
          .qrcode-display {
            flex-direction: column;
            align-items: flex-start;
          }

          .qrcode-img {
            width: 70px;
            height: 70px;
          }

          .qrcode-label {
            font-size: 12px;
          }
        }

        /* 添加二维码悬停放大效果 */
        .qrcode-img {
          transition: transform 0.3s ease;
        }

        .qrcode-img:hover {
          transform: scale(1.5);
          z-index: 10;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        /* 联系人信息容器 */
        .contact-person {
          margin-top: 20px;
          padding-top: 15px;
          border-top: 1px dashed #e0e0e0;
        }

        .contact-title {
          font-size: 14px;
          color: #666;
          margin-bottom: 8px;
          font-weight: normal;
        }

        /* 联系信息主容器 - 改为垂直布局 */
        .contact-info {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        /* 联系人姓名 */
        .contact-name {
          font-weight: bold;
          color: #333;
          font-size: 15px;
        }

        /* 电话链接样式 - 添加震动动画 */
        .contact-phone {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 6px 14px;
          background-color: #f5f7fa;
          border-radius: 15px;
          color: #1a56a8;
          text-decoration: none;
          font-size: 14px;
          transition: all 0.2s ease;
          width: fit-content;
          animation: phoneShake 3s infinite;
        }

        @keyframes phoneShake {

          0%,
          100% {
            transform: translateX(0);
          }

          10%,
          30%,
          50%,
          70%,
          90% {
            transform: translateX(-1px);
          }

          20%,
          40%,
          60%,
          80% {
            transform: translateX(1px);
          }
        }

        .contact-phone:hover {
          background-color: #e1e8f5;
          animation: none;
          /* 悬停时停止震动 */
          transform: scale(1.03);
        }

        .contact-phone i {
          font-size: 12px;
        }

        /* 二维码展示区域 */
        .qrcode-display {
          margin-top: 10px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }

        .qrcode-img {
          width: 80px;
          height: 80px;
          border: 1px solid #eee;
          border-radius: 4px;
          transition: all 0.3s ease;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .qrcode-img:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .qrcode-label {
          font-size: 12px;
          color: #888;
          margin-top: 3px;
          white-space: nowrap;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
          .qrcode-display {
            align-items: center;
            margin-top: 15px;
          }

          .qrcode-img {
            width: 70px;
            height: 70px;
          }

          .contact-phone {
            padding: 6px 12px;
            font-size: 13px;
          }
        }

        /* 针对1074×1455二维码的适配 */
        .qrcode-img {
          width: 200px;
          /* 按比例缩小 */
          height: auto;
          /* 保持原图比例 */
          border: 1px solid #eee;
          border-radius: 4px;
        }

        /* 移动端微调 */
        @media (max-width: 768px) {
          .qrcode-img {
            width: 100px;
          }
        }