/* 默认样式 */
.tooltip-container {
  position: fixed;
  display: none; /* 默认隐藏 */
  background: rgba(255, 255, 255, 0.1); /* 半透明背景 */
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.3s ease;
  max-width: 300px; /* 加宽 */
  text-align: center; /* 文本居中对齐 */
}

/* 左侧悬浮窗 */
.tooltip-container.left-tooltip {
  left: 30px; /* 距离左边的距离 */
  top: 120px; /* 距离顶部的距离 */
}

/* 右侧悬浮窗 */
.tooltip-container.right-tooltip {
  right: 100px; /* 距离右边的距离 */
  top: 250px; /* 距离顶部的距离 */
}

/* 关闭按钮的样式 */
.tooltip-close-button {
  position: absolute;
  top: 5px; /* 距离顶部的距离 */
  right: 3px; /* 距离右边的距离 */
  background: none;
  border: none;
  font-size: 15px; /* 关闭按钮的字体大小 */
  color: #fff;
  cursor: pointer;
}

/* 文本样式 */
h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px; /* 标题的字体大小 */
  line-height: 1.4;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left; /* 列表文本左对齐 */
}

li {
  margin-bottom: 10px;
}

p {
  margin-top: 15px;
}

/* 联系方式的样式 */
.contact-link {
  margin-top: 20px; /* 增加顶部间距 */
  font-size: 14px; /* 调整字体大小 */
  color: red; /* 设置字体颜色为红色 */
}

/* 媒体查询：屏幕宽度小于 768px */
@media (max-width: 768px) {
  .tooltip-container {
    max-width: 80%; /* 增加最大宽度的相对比例 */
    padding: 15px; /* 减少内边距 */
  }

  .tooltip-container.left-tooltip,
  .tooltip-container.right-tooltip {
    top: 10px; /* 调整距离顶部的距离 */
  }

  .tooltip-close-button {
    font-size: 18px; /* 减少关闭按钮的字体大小 */
  }

  h3 {
    font-size: 16px; /* 调整标题的字体大小 */
  }

  ul, li, p {
    font-size: 14px; /* 调整列表和段落的字体大小 */
  }

  .contact-link {
    font-size: 12px; /* 调整联系方式的字体大小 */
  }
}

/* 媒体查询：屏幕宽度小于 480px */
@media (max-width: 480px) {
  .tooltip-container {
    max-width: 90%; /* 增加最大宽度的相对比例 */
    padding: 10px; /* 减少内边距 */
  }

  .tooltip-container.left-tooltip,
  .tooltip-container.right-tooltip {
    top: 5px; /* 调整距离顶部的距离 */
  }

  .tooltip-close-button {
    font-size: 16px; /* 减少关闭按钮的字体大小 */
  }

  h3 {
    font-size: 14px; /* 调整标题的字体大小 */
  }

  ul, li, p {
    font-size: 12px; /* 调整列表和段落的字体大小 */
  }

  .contact-link {
    font-size: 10px; /* 调整联系方式的字体大小 */
  }
}