@import 'swiper/swiper-bundle.min.css';
.header-title {
  font-family: "FangSong", serif; /* 使用仿宋体 */
  font-weight: bold; /* 加粗 */
  text-align: center; /* 居中 */
}
/* 搜索框容器 */
ion-searchbar {
  --background: #ffffff !important; /* 设置背景色 */
  --border-radius: 10px !important; /* 设置圆角 */
  --height: 60px !important;  /* 设置搜索框的高度 */
  --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* 添加阴影效果 */
  --border: 1px solid #ccc !important; /* 设置边框颜色 */
  --placeholder-color: #000000 !important; /* 设置占位符颜色 */
  font-family: "FangSong", serif !important; /* 使用仿宋体 */
}
/* 容器内的搜索框和按钮布局 */
.search-container {
  --background-color: transparent !important;
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 容器宽度为 100% */
  padding: 0; /* 移除内边距 */
}
.searchbar {
  flex-grow: 1; /* 使搜索框扩展占据剩余空间 */
}
ion-button {
  --background: #ee1717 !important; /* 设置背景色 */
  --border-radius: 10px !important; /* 设置圆角 */
}
/* 水平盒子容器样式 */
.horizontal-container {
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 内容两端对齐 */
  height: 35px; /* 按钮高度 */
}

/* 友情链接按钮默认样式 */
.link-button {
  position: fixed; /* 固定位置 */
  display: flex; /* 使用 flex 布局 */
  right: 0;/* 紧贴页面右侧 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 35px; /* 按钮高度 */
  width: 60px; /* 默认宽度 */
  --background-color: transparent !important;
  background: url('/assets/images/linkbutton-background.png') repeat-x center; /* 设置图片作为分割线 */
  border-radius: 20px 0 0 20px; /* 左侧圆角 20px，右侧无圆角 */
  cursor: pointer; /* 鼠标为点击手型 */
  overflow: hidden; /* 隐藏溢出内容 */
  transition: all 0.3s ease; /* 动画效果 */
  box-shadow: 0px 16px 35px rgba(0, 0, 0, 0.2);/* 增加阴影效果 */
}

/* 鼠标悬浮时 */
.link-button:hover {
  width: 120px; /* 宽度变为 80px */
}

/* 按钮图标和文字样式 */
.link-button .button-content {
  color: #ffffff;
  display: flex; /* 使用 flex 布局 */
  font-family: "FangSong", serif; /* 使用仿宋体 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  transition: all 0.3s ease; /* 动画过渡效果 */
}

/* 图标样式 */
.link-button ion-icon {
  font-size: 24px; /* 图标大小 */
  margin-right: 0; /* 初始状态没有文字时无需间距 */
}

/* 文本样式 */
.link-button .link-text {
  display: none; /* 默认隐藏 */
  font-family: "FangSong", serif; /* 使用仿宋体 */
  margin-left: 10px; /* 悬浮时与图标间距 */
  font-size: 16px; /* 按钮字体大小 */
}

/* 鼠标悬浮时显示文字 */
.link-button:hover .link-text {
  display: inline-block; /* 显示文字 */
}

/* 透明盒子容器样式 */
.transparent-box {
  position: relative;
  width: 100%;
  height: 225px; /* 轮播图的高度，根据需要调整 */
  background-color: rgba(0, 0, 0, 0); /* 设置透明背景 */
  overflow: hidden; /* 防止图片溢出 */
  box-sizing: border-box;
  padding: 0;
  /* 圆角效果 */
  border-radius: 10px; /* 根据需要调整圆角半径 */
  /* 浮动效果 */
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); /* 轻微的浮动效果，模拟阴影 */
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* 平滑过渡效果 */
  /* 鼠标悬停时的效果：稍微浮动起来 */
  &:hover {
    transform: translateY(5px); /* 上浮效果 */
    box-shadow: 0px 16px 35px rgba(0, 0, 0, 0.4);/* 增加阴影效果 */
  }
  margin-top: 10px;
}
/* 轮播图容器样式 */
swiper {
  width: 100%;
  height: 100%;
}
/* 轮播图的每一页样式 */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000; /* 背景色可以设置为黑色或其他颜色 */
}
/* 轮播图中的图片样式 */
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片自适应容器 */
}
/* 分页器样式：小圆点 */
.swiper-pagination {
  position: absolute;
  bottom: 10px;  /* 距离底部10px */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.divider {
  border: none; /* 去掉默认边框 */
  height: 40px; /* 分割线高度 */
  width: calc 100%; /* 总宽度减去左右空出20px */
  margin: 16px auto; /* 自动居中 */
  background: url('/assets/images/divider.png') repeat-x center; /* 设置图片作为分割线 */
  background-size: contain; /* 确保图片在水平方向完整显示 */
  }
.background-box {
  width: 100%; /* 容器宽度为100% */
  height: 430px; /* 可以根据需要调整容器的高度 */
  background-image: url('/assets/images/KG-background.png'); /* 设置背景图片 */
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px; /* 给容器添加内边距 */
  color: white; /* 设置文本颜色为白色 */
}
.square-box {
  position: absolute;
  top: 49%;
  left: 2%;
  width: 410px;
  height: 410px;
  background-image: url('/assets/images/KG-item-background.jpg');/* 设置背景图片 */
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  border-radius: 20%;
}
.square-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2); /* 半透明白色 */
  border-radius: 20%;
}
.node-details {
  position: absolute;
  width: 200px;
  height: 300px;
  background-image: url('/assets/images/details-background.png'); /* 设置背景图片 */
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  color:black;
  z-index: 1000;
  flex-grow: 1; /* 让 p 标签占据剩余空间 */
  text-align: left; /* 确保文本左对齐 */
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 10px;
  font-family: "FangSong", serif; /* 使用仿宋体 */
  line-height: 1.8; /* 设置行间距 */
  overflow-y: auto; /* 启用竖向滚动条 */
  /* 初始状态：隐藏 */
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.3s ease-out forwards; /* 应用动画 */
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px); /* 从下方轻微移动 */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* 回到原位置 */
  }
}
.close-icon {
  font-size: 24px;
  color: gray;
  cursor: pointer;
  position: absolute; /* 使图标绝对定位 */
  top: 5px; /* 距离顶部5px */
  right: 10px; /* 距离右边10px */
}
.close-icon:hover {
  color: #ff6f61; /* 鼠标悬停时改变颜色 */
}