#msg {
  width: 266px;
  position: fixed;
  z-index: 999;
  top: 49%;
  margin-top: -80px;
  left: 50%;
  margin-left: -133px;
  background: #fff;
  box-shadow: 5px 5px 8px #999;
  font-size: 17px;
  color: #666;
  border: 1px solid #f8f8f8;
  text-align: center;
  line-height: 2rem;
  display: inline-block;
  padding-bottom: 20px;
  border-radius: 2px;
}

#msg_top {
  background: #f8f8f8;
  padding: 5px 15px 5px 20px;
  text-align: left;
}

#msg_top span {
  font-size: 22px;
  float: right;
  cursor: pointer;
}

#msg_cont {
  padding: 15px 20px 20px;
  text-align: left;
}

#msg_clear {
  display: inline-block;
  color: #fff;
  padding: 1px 15px;
  background: #3396fb;
  border-radius: 2px;
  float: right;
  margin-right: 15px;
  cursor: pointer;
}

/* ↓↓↓ 全局基础隐藏样式 ↓↓↓ */
/* 移动端（>768px）时，隐藏底部栏、弹窗、遮罩 */
.mobile-footer,
.wechat-popup,
.popup-overlay {
  display: none;
}

.active a {
  color: #3396fb;
}

/* ↓↓↓ 移动端响应式（≤768px）专属样式 ↓↓↓ */
@media screen and (max-width: 768px) {
  /* 页面底部留白，避免被固定底部栏遮挡 */
  /*body {*/
  /*    padding-bottom: 56px;*/
  /*}*/
  /* -------- 模块1：移动端底部导航栏 -------- */
  .mobile-footer {
    display: block !important; /* 强制显示 */
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #000;
    height: 56px;
    z-index: 9999; /* 层级最高，覆盖其他内容 */
  }

  .mobile-footer ul {
    margin: 0;
    padding: 0;
    display: flex; /* 横向弹性布局，均分菜单项 */
  }

  .mobile-footer li {
    flex: 1; /* 每个菜单项占1/4宽度（因4个菜单项） */
    text-align: center;
    list-style: none; /* 清除默认列表样式 */
  }

  .mobile-footer li a {
    display: block;
    color: #fff;
    font-size: 12px;
    text-decoration: none; /* 清除a标签默认下划线 */
  }

  .mobile-footer li img {
    margin-top: 10px;
    vertical-align: middle; /* 图标垂直居中 */
  }

  /* -------- 模块2：弹窗遮罩层 -------- */
  .popup-overlay {
    /*display: block !important; !* 强制显示 *!*/
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 9998; /* 遮罩层级低于弹窗，高于页面内容 */
    background-color: rgba(0, 0, 0, 0.6); /* 半透黑色遮罩 */
  }

  /* -------- 模块3：微信咨询弹窗主体 -------- */
  .wechat-popup {
    /*display: block !important; !* 强制显示 *!*/
    position: fixed;
    width: 80%; /* 弹窗宽度占屏幕80% */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 垂直水平居中 */
    background-color: #fff; /* 白色弹窗背景 */
    border-radius: 10px; /* 圆角柔化边缘 */
    text-align: center; /* 内容居中对齐 */
    padding: 30px 0; /* 上下内边距 */
    z-index: 9999; /* 弹窗层级最高，覆盖遮罩 */
  }

  /* 弹窗关闭按钮 */
  .popup-close {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #fff;
    background-color: #333;
    border-radius: 50%; /* 圆形按钮 */
    width: 28px;
    height: 28px;
    line-height: 28px; /* 文字垂直居中 */
    text-align: center;
    cursor: pointer; /* 鼠标悬浮为手型 */
    font-style: normal; /* 清除默认斜体样式 */
  }

  /* 弹窗文本：二维码说明 */
  .popup-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px; /* 与下方二维码间距 */
  }

  /* 二维码图片容器 */
  .qr-code {
    padding: 10px;
    max-width: 100%; /* 图片自适应容器宽度 */
    height: auto; /* 保持宽高比 */
  }

  /* 联系信息区域：电话/微信 + 拨打按钮 */
  .contact-info {
    font-size: 14px;
    margin-bottom: 16px; /* 与下方按钮组间距 */
  }

  .call-btn {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    background-color: #3396fb;
    color: #fff;
    border-radius: 10px;
    text-decoration: none; /* 清除a标签默认下划线 */
  }

  /* -------- 模块4：按钮组（复制微信号 + 打开微信） -------- */
  .btn-group {
    display: flex; /* 弹性布局，按钮横向排列 */
    justify-content: center; /* 按钮组水平居中 */
    gap: 10px; /* 按钮之间的间距 */
  }

  /* 复制微信号按钮 */
  .copy-btn {
    padding: 8px 16px;
    background-color: #ff6600; /* 橙色主色 */
    color: #fff;
    border: none; /* 清除默认边框 */
    border-radius: 4px; /* 圆角 */
    cursor: pointer; /* 鼠标悬浮为手型 */
    font-size: 14px;
    transition: background-color 0.3s ease; /*  hover渐变过渡 */
  }

  .copy-btn:hover {
    background-color: #e65c00; /* hover时加深颜色 */
  }

  /* 打开微信按钮（a标签） */
  .open-wx-btn {
    padding: 8px 16px;
    background-color: #00b464; /* 微信绿主色 */
    color: #fff;
    border: none;
    border-radius: 4px;
    text-decoration: none; /* 清除a标签默认下划线 */
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease; /*  hover渐变过渡 */
  }

  .open-wx-btn:hover {
    background-color: #009e54; /* hover时加深颜色 */
  }

  /* 在线客服按钮 */
  .service-btn {
    padding: 8px 16px;
    background-color: #3396fb; /* 蓝色主色 */
    color: #fff;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    display: inline-flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 5px; /* 图标和文字之间的间距 */
  }

  /* 在线客服按钮中的图标 */
  .service-btn svg {
    vertical-align: middle; /* 图标垂直对齐 */
    margin-top: -2px; /* 微调图标位置 */
  }

  .service-btn:hover {
    background-color: #2980e5;
  }

  /* 不再需要微信环境下的CSS控制，直接用jQuery控制显示/隐藏 */
  /* ========== 显示弹窗：添加 .ywx 类 ========== */
  .wechat-popup.ywx {
    display: block !important;
  }

  /* ========== 显示遮罩：添加 .ybg 类 ========== */
  .popup-overlay.ybg {
    display: block !important;
  }

  /* footer 容器 flex 布局 */
  .footer .container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .footer-info,
  .ca {
    flex: 1;
    margin: 0 10px;
    margin-bottom: 20px;
  }

  .ca {
    display: block !important;
  }

  .ca dt {
    font-weight: bold;
    margin-bottom: 10px;
  }

  .ca dd p {
    margin: 5px 0;
  }
}