/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

nav ul a,
nav .brand-logo {
  color: #444;
}

p {
  line-height: 2rem;
}

.sidenav-trigger {
  color: #26a69a;
}

.parallax-container {
  min-height: 380px;
  line-height: 0;
  height: auto;
  color: rgba(255, 255, 255, .9);
}

.parallax-container .section {
  width: 100%;
}

@media only screen and (max-width : 992px) {
  .parallax-container .section {
    position: absolute;
    top: 40%;
  }

  #index-banner .section {
    top: 10%;
  }
}

@media only screen and (max-width : 600px) {
  #index-banner .section {
    top: 0;
  }
}

.icon-block {
  padding: 0 15px;
}

.icon-block .material-icons {
  font-size: inherit;
}

footer.page-footer {
  margin: 0;
}

/* 自定义关闭按钮样式 */
.custom-close-btn {
  background-color: #189588;
  /* 设置背景色 */
  color: white;
  /* 设置文本颜色 */
  padding: 0;
  /* 去除内边距，防止影响宽高 */
  font-size: 18px;
  /* 增大字体大小 */
  border-radius: 4px;
  /* 设置圆角 */
  width: 300px;
  /* 设置按钮宽度为300px */
  height: 40px;
  /* 设置按钮高度为40px */
  box-sizing: border-box;
  /* 使得宽度计算包含边框和内边距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* 添加阴影效果 */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  /* 添加过渡效果 */

  display: flex;
  /* 使用flex布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  text-align: center;
  /* 确保文本居中对齐 */
}

/* 鼠标悬停时按钮颜色变化 */
.custom-close-btn:hover {
  background-color: #1ad29a;
  /* 悬停时背景色变化 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* 增强阴影效果 */
}

/* 自定义关闭按钮样式 */
.custom-close-btn {
  background-color: #189588;
  /* 设置背景色 */
  color: white;
  /* 设置文本颜色 */
  padding: 0;
  /* 去除内边距，防止影响宽高 */
  font-size: 18px;
  /* 增大字体大小 */
  border-radius: 4px;
  /* 设置圆角 */
  width: 300px;
  /* 设置按钮宽度为300px */
  height: 40px;
  /* 设置按钮高度为40px */
  box-sizing: border-box;
  /* 使得宽度计算包含边框和内边距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* 添加阴影效果 */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  /* 添加过渡效果 */

  display: flex;
  /* 使用flex布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  text-align: center;
  /* 确保文本居中对齐 */
}

/* 鼠标悬停时按钮颜色变化 */
.custom-close-btn:hover {
  background-color: #1ad29a;
  /* 悬停时背景色变化 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* 增强阴影效果 */
}

/* 自定义关闭按钮样式 */
.custom-close-btn {
  background-color: #189588;
  /* 设置背景色 */
  color: white;
  /* 设置文本颜色 */
  padding: 0;
  /* 去除内边距，防止影响宽高 */
  font-size: 18px;
  /* 增大字体大小 */
  border-radius: 4px;
  /* 设置圆角 */
  width: 300px;
  /* 设置按钮宽度为300px */
  height: 40px;
  /* 设置按钮高度为40px */
  box-sizing: border-box;
  /* 使得宽度计算包含边框和内边距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* 添加阴影效果 */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  /* 添加过渡效果 */
  display: flex;
  /* 使用flex布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  text-align: center;
  /* 确保文本居中对齐 */
}

/* 鼠标悬停时按钮颜色变化 */
.custom-close-btn:hover {
  background-color: #1ad29a;
  /* 悬停时背景色变化 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* 增强阴影效果 */
}

.modal {
  display: flex;
  /* 使用flex布局 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
}

/* 自定义关闭按钮样式 */
.custom-close-btn {
  background-color: #189588;
  /* 设置背景色为 #18f988 */
  color: white;
  /* 设置文本颜色 */
  padding: 8px 16px;
  /* 设置内边距 */
  font-size: 16px;
  /* 设置字体大小 */
  border-radius: 4px;
  /* 设置圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* 添加阴影效果 */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  /* 添加过渡效果 */
}

/* 鼠标悬停时按钮颜色变化 */
.custom-close-btn:hover {
  background-color: #1ad29a;
  /* 悬停时背景色变化，略微深一点 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* 增强阴影效果 */
}



/* 调整模态框底部按钮的布局 */
.modal-footer {
  display: flex;
  /* 使用flex布局 */
  justify-content: center;
  /* 按钮水平居中 */
  align-items: center;
  /* 按钮垂直居中 */
  padding: 10px 20px;
  /* 调整底部内边距，避免贴底 */
  width: 100%;
  /* 确保底部区域与模态框宽度一致 */
}

/* 调整图片的显示方式 */
.modal-content img {
  width: 100%;
  /* 图片宽度占据100%，适配容器 */
  max-width: 480px;
  /* 限制最大宽度 */
  height: auto;
  /* 保持图片的纵横比 */
  margin: 20px 0;
  /* 增加上下间距，确保图片不紧贴其他内容 */
}

/* 使标题居中 */
.modal-content h6 {
  margin: 0 0 20px 0;
  /* 设置标题上下间距 */
  font-size: 18px;
  /* 可调整字体大小 */
  text-align: center;
  /* 确保文本居中对齐 */
}

/* 图片与按钮的居中对齐 */
.modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  /* 设置图片和按钮之间的间距 */
}

/* 更新日志样式 */
.update-log {
  list-style-type: none;
  /* 去掉默认的列表样式 */
  padding: 0;
}

.update-log li {
  background-color: #f9f9f9;
  /* 背景色 */
  border: 1px solid #ddd;
  /* 边框 */
  border-radius: 5px;
  /* 圆角 */
  margin: 10px 0;
  /* 上下间距 */
  padding: 10px;
  /* 内边距 */
  transition: background-color 0.3s;
  /* 背景色过渡效果 */
}

.update-log li:hover {
  background-color: #e0f7fa;
  /* 悬停时的背景色 */
}


#gif-preview-modal {
  min-width: 80vw;
  /* 保持最小宽度 */
  min-height: 60vh;
  /* 保持最小高度 */
  max-width: 100vw;
  /* 最大宽度 */
  max-height: 100vh;
  /* 最大高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* 防止超出部分显示 */
}

#gif-preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* 保证图像在容器内自适应 */
}

/* 如果没有GIF时，也设置一个默认的占位符 */
#gif-preview-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  /* 使用灰色背景来表示没有GIF */
  color: #888;
  /* 文字颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

@font-face {
  font-family: 'DingTalk Sans';
  src: url('../fonts/DingTalkSans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'DingTalk Sans', sans-serif;
}


.sideContact {
  width: 210px;
  background-color: #f9fcff;
  border: 1px solid #d3e5f6;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  position: fixed;
  right: 20px;
  bottom: 320px;
  z-index: 999;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}



@media (max-width: 768px) {
  .sideContact {
    display: none;
  }
}


/* 每一项布局 */
.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/* 图标 */
.contact-item .icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

/* 文本部分 */
.contact-item .text {
  display: flex;
  flex-direction: column;
}

/* 电话文字 */
.contact-item .label {
  font-size: 14px;
  color: #333;
  margin-bottom: 2px;
}

.contact-item .number {
  font-size: 16px;
  font-weight: bold;
  color: #003366;
  text-decoration: none;
}

/* 分隔线 */
.divider {
  height: 1px;
  background-color: #d0e0f0;
  margin: 10px 0;
}

/* 二维码样式 */
.contact-item.wechat .qrcode {
  width: 80px;
  height: 80px;
  margin-top: 5px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.step {
  margin-bottom: 20px;
}

.step img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 10px;
}