/* 
  全局样式设置，清除所有元素的默认外边距和内边距，避免浏览器默认样式影响布局。
*/
* {
  margin: 0; /* 清除外边距 */
  padding: 0; /* 清除内边距 */
}

/* 
  设置 body 的宽度和高度为视口的 100%，确保页面占满整个屏幕。
*/
body {
  width: 100vw; /* 视口宽度的 100% */
  height: 100vh; /* 视口高度的 100% */
}

/* 
  设置 canvas 样式，使其覆盖整个视口，并固定在页面顶部左角。
*/
canvas {
  display: block; /* 将 canvas 显示为块级元素 */
  position: fixed; /* 固定定位 */
  left: 0; /* 距离左侧边缘 0px */
  top: 0; /* 距离顶部边缘 0px */
  width: 100vw; /* 宽度为视口宽度的 100% */
  height: 100vh; /* 高度为视口高度的 100% */
}

/* 
  进度条容器样式，固定在页面顶部，背景色为浅灰色。
*/
#progress-container {
  width: 100%; /* 宽度为父容器的 100% */
  background-color: #ddd; /* 浅灰色背景 */
  position: fixed; /* 固定定位 */
  top: 0; /* 距离顶部边缘 0px */
  left: 0; /* 距离左侧边缘 0px */
  z-index: 1000; /* 确保进度条容器在其他内容之上 */
}

/* 
  进度条样式，初始宽度为 0%，绿色背景，居中显示文字。
*/
#progress-bar {
  width: 0%; /* 初始宽度为 0% */
  height: 20px; /* 高度为 20px */
  background-color: #4caf50; /* 绿色背景 */
  text-align: center; /* 文本居中对齐 */
  line-height: 20px; /* 行高与高度一致，确保文字垂直居中 */
  color: white; /* 文字颜色为白色 */
}

/* 
  设置 #app 容器的相对定位，确保 Three.js 画布位于最底层。
*/
#app {
  position: relative; /* 相对定位 */
  z-index: 1; /* 设置较低的层级 */
}

/* 
  下载容器样式，确保下载链接在 Three.js 画布之上。
*/
#download-container {
  position: relative; /* 相对定位 */
  z-index: 2; /* 层级高于 #app */
}

/* 
  冗余定义，已存在相同的 ID 样式。
*/
#progress-container {
  position: relative; /* 相对定位 */
  z-index: 1; /* 设置层级 */
}

/* 
  冗余定义，已存在相同的 ID 样式。
*/
#progress-bar {
  position: relative; /* 相对定位 */
  z-index: 1; /* 设置层级 */
}

/* 
  导航栏样式，确保导航栏在其他内容之上。
*/
.navbar {
  position: relative; /* 相对定位 */
  z-index: 1; /* 设置层级 */
}

/* 
  汉堡菜单样式，使用 flexbox 布局实现三条横线的汉堡图标。
*/
.hamburger-menu {
  display: flex; /* 使用 flexbox 布局 */
  flex-direction: column; /* 子元素垂直排列 */
  justify-content: space-between; /* 子元素之间均匀分布 */
  width: 30px; /* 图标宽度 */
  height: 21px; /* 图标高度 */
  cursor: pointer; /* 鼠标悬停时显示为手型 */
}

/* 
  汉堡菜单中的每一条横线样式。
*/
.hamburger-menu span {
  display: block; /* 显示为块级元素 */
  width: 100%; /* 占据父容器的 100% 宽度 */
  height: 3px; /* 高度为 3px */
  background-color: rgb(102, 102, 102); /* 深灰色背景 */
  transition: all 0.5s ease; /* 添加平滑过渡效果 */
}

/* 
  当汉堡菜单处于 "moving" 状态时，调整顶部和底部横线的位置。
*/
.hamburger-menu.moving .top {
  transform: translateY(9px); /* 向下移动 9px */
}

.hamburger-menu.moving .bottom {
  transform: translateY(-9px); /* 向上移动 9px */
}

/* 
  当汉堡菜单处于 "active" 状态时，调整横线的状态以形成叉号。
*/
.hamburger-menu.active .top {
  transform: translateY(9px) rotate(45deg); /* 向下移动并旋转 45 度 */
}

.hamburger-menu.active .middle {
  opacity: 0; /* 中间横线透明度降为 0 */
}

.hamburger-menu.active .bottom {
  transform: translateY(-9px) rotate(-45deg); /* 向上移动并旋转 -45 度 */
}

/* 
  导航栏切换按钮样式。
*/
.navbar-toggler {
  display: inline-block; /* 显示为行内块级元素 */
  padding: 0.25rem 0.75rem; /* 内边距 */
  font-size: 1.25rem; /* 字体大小 */
  line-height: 1; /* 行高 */
  background-color: transparent; /* 背景透明 */
  border: 0; /* 无边框 */
  border-radius: 0.25rem; /* 圆角 */
  transition: box-shadow 0.15s ease-in-out; /* 添加阴影过渡效果 */
  box-shadow: inset 0 0 0 transparent; /* 默认无阴影 */
  color: inherit; /* 继承父元素的颜色 */
  cursor: pointer; /* 鼠标悬停时显示为手型 */
  outline: 0; /* 移除焦点时的轮廓 */
}

/* 
  当导航栏切换按钮获得焦点时，添加轻微的阴影效果。
*/
.navbar-toggler:focus,
.navbar-toggler:focus-visible {
  box-shadow: 0 0 0 0rem rgba(255, 255, 255, 0.25); /* 添加白色半透明阴影 */
}

/* 导航栏链接的默认样式 */
.nav-link {
  color: inherit; /* 继承父元素的颜色 */
  text-decoration: none; /* 去掉默认的下划线 */
  transition: color 0s ease, box-shadow 0s ease; /* 添加过渡效果 */
  position: relative; /* 相对定位，用于 box-shadow */
}

/* 鼠标经过时的样式 */
.nav-link:hover {
  color: rgb(255, 255, 255) !important; /* 文字变为白色 */
  box-shadow: inset 0 -2px 0 rgb(255, 255, 255) ; /* 添加白色下划线 */
}

/* 直接显示鼠标经过时的样式 */
.nav-linking {
  color: rgb(255, 255, 255) !important; /* 文字变为白色 */
  box-shadow: inset 0 -2px 0 rgb(255, 255, 255) ; /* 添加白色下划线 */
}

/* 禁止鼠标事件 */
.pointer-none {
  pointer-events: none ;/* 禁止鼠标事件 */
}

 /* 固定导航栏 */
 .navbar-fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000; /* 确保导航栏在其他内容之上 */
  opacity: 1; /* 设置透明度为1 */
}

/* 备案样式 */
.beiAn {
  width: 100%;
  height: 70px;
  background-color: #03864f;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  margin-top: auto;
}

.beiAn div{
  margin-right: 10px;
}


/* 思创精密机械有限公司，标题文字响应式调整 */
@media (max-width: 4000px) {
  .Title-font1 {
    font-size: 1.25rem !important; /* 缩小字体大小 */
  }
  .Title-font2 {
    font-size: 0.61rem !important; /* 缩小字体大小 */
  }
  /* 由于标题栏是fixed，所以需要调整页面内容的上边间距 */
  .content {
    padding-top: 81px; /* 根据导航栏的高度调整 */
}
}

@media (max-width: 450px) {
  .Title-font1 {
    font-size: 1.0rem !important; /* 缩小字体大小 */
  }
  .Title-font2 {
    font-size: 0.50rem !important; /* 缩小字体大小 */
  }
  .content {
    padding-top: 75px; /* 根据导航栏的高度调整 */
  }
}

/* 隐藏类 */
.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none; /* 禁止点击 */
}

/* 主按钮样式 */
.floating-contact {
  position: fixed;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  /* background-color: #03864f; */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  /* transition: background-color 0.3s ease; */
}

.contact-icon {
  width: 30px;
  height: 30px;
  transition: transform 0.2s ease;
}

.caret-left {
  width: 30px;
  height: 30px;
  transition: transform 0.2s ease;
}

.contact-icon:hover {
  transform: scale(1.1);
}

/* 抽屉面板样式 */
.drawer-panel {
  position: fixed;
  right: -200px; /* 初始隐藏在屏幕外 */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* background-color: rgba(255, 255, 255, 0.95); */
  padding: 15px;
  border-radius: 10px;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
  z-index: 999;
  transition: right 0.4s ease;
}

.drawer-panel.open {
  right: 10px; /* 滑入位置，留出主按钮空间 */
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.pulse-animation {
  animation: pulse 2s infinite; /* 每1.5秒循环一次 */
}