
body,
a {
  font-family: "Noto Sans SC","Microsoft YaHei", "SimHei", Arial, sans-serif !important;
  text-decoration: none;

}



/* 默认透明主题样式 */
.navbar[data-theme-transparent] {
  background-color: transparent !important;
  transition: background-color 0.3s ease;
}

/* 透明主题下的链接样式 */
.navbar[data-theme-transparent] .navbar-nav .nav-link {
  color: white !important;
  transition: color 0.3s ease;
}


/* 透明主题下的悬停样式 */
.navbar[data-theme-transparent] .navbar-nav .nav-link:hover {
  color: black !important;
}

.navbar[data-theme-transparent] .dropdown-toggle {
  color: white !important;
  transition: color 0.3s ease;
}

/* 滚动后的白色主题 */
.navbar.scrolled {
  background-color: white !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 滚动后的链接样式 */
.navbar.scrolled .navbar-nav .nav-link {
  color: black !important;
}
@media (min-width: 992px) {
.navbar[data-theme-transparent]:hover {
  background-color: white !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar[data-theme-transparent]:hover .navbar-brand img {
  content: url('/images/logo-black.svg');
}

}

.navbar[data-theme-transparent]:hover .nav-link {
  color: black !important;
}




.dropdown-toggle::after{display: none;}


/* 导航项悬停效果 */
.navbar-nav .nav-item {
  position: relative;
  transition: all 0.3s ease;
}

/* 透明主题下的悬停效果 */
.navbar[data-theme-transparent] .nav-link:hover {
  color: rgba(255, 255, 255, 0.9) !important;

}

/* 白色主题下的悬停效果 */
.navbar.scrolled .nav-link:hover {
  color: #000000 !important;

}


.navbar[data-theme-transparent]:hover .dropdown-toggle {
  color: #000000 !important;
}


.navbar.scrolled .dropdown-toggle {
  color: #000000 !important;
}

/* 下划线动画效果 */
.nav-link::after {
  opacity: 1;
  content: '';
  position: absolute;
  width: 0;
  top: 55px;
  height: 2px;
  left: 50%;
  background-color: #000;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 65%;
}


@media (min-width: 992px) {
  /* 下划线动画效果 */
.nav-link1::after {
  opacity: 1;
  content: '';
  position: absolute;
  width: 0;
  top: 35px;
  height: 2px;
  left: 59%;
  background-color: #000;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link1:hover::after {
  width: 55%;
}
}



/* Banner 幻灯样式 */
.owl-carousel .item {
  height: auto;
  position: relative;
  /* 让.item成为定位的参考元素 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.owl-carousel .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 让图片覆盖整个容器 */
}

.owl-carousel .item .container {
  position: absolute;
  /* 让.container相对于.item定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 垂直和水平居中 */

  z-index: 1;
  /* 确保.container在图片之上 */
}

/* 让切换幻灯片的按钮浮动在图片上面 */
.owl-nav,
.owl-dots {
  position: absolute;
  bottom: 0;
  transform: translateY(-50%);
  width: 100%;
  z-index: 2;
  /* 确保按钮在.container和图片之上 */
}



/* 产品卡片样式 */
.product-card {
  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.product-card:hover {
  transform: none;
  /* 取消默认的阴影 box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);*/
}

/* 设置图片最大宽度为 100% 并居中 */
.product-card .card-img-top {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
  width: auto;
  padding-top: 70px;
  padding-bottom: 70px;
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

/* 图片 hover 放大效果 */
.product-card:hover .card-img-top {
  transform: scale(1.05); /* 放大 5% */
}


/* 视频封面图片样式 */
.videodiv{ overflow: hidden;}
.video-cover-img {
  border-radius: 15px;
  transition: all 0.3s ease;
}

.video-cover-img:hover {
  transform: scale(1.05);
}

/* 底部图标区域 */
.icon-box {
  text-align: center;
  padding: 50px;
  border-radius: 8px;
  transition: all 0.3s ease;
  border-radius: 15px;
  background-color: #fff;
}

.icon-box:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);

}

.icon-box i {
  color: #1b1b1b !important;
}

.icon-box i:hover {
  color: #434343 !important;
}

.mb-2 a {
  font-size: 18px;
  color: #000;
  text-decoration: none;
}

.mb-2 a:hover {
  font-size: 18px;
  color: #434343 !important;
  text-decoration: dotted;
}



/* 调整模态框高度和位置 */
.modal-dialog {
  margin: 15vh auto;
  /* 上下间距各 15% 视口高度，左右居中 */
  max-height: 70vh;
  /* 最大高度为视口高度的 70% */
  display: flex;
  align-items: center;
}

.modal-content {
  height: 100%;
  /* 模态框内容高度占满模态框 */
}

.modal-body {
  overflow-y: auto;
  /* 当内容超出高度时显示垂直滚动条 */
}


/* 自定义播放按钮样式 */
.btn-play {
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
  width: 65px;
  /* 按钮的宽度 */
  height: 65px;
  /* 按钮的高度 */
  border-radius: 50%;
  /* 将按钮设置为圆形 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-play {
  padding-left: 5px;
  background-color: rgba(255, 255, 255, 0.8);
  /* 鼠标悬停时的背景颜色 */
}


.btn-play:hover {
  background-color: rgba(255, 255, 255, 0.3);
  /* 鼠标悬停时的背景颜色 */
}

.play-icon {
  filter: brightness(0);
}
.play-icon {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg);
}

.btn-play:hover .play-icon {  filter: none;}


.btn-play .fa-play {
  color: rgb(44, 43, 43);
  /* 图标的颜色 */
}

.ml-5 {
  margin-left: 100px !important;
}


/* 新增手机端导航样式 */
@media (max-width: 992px) {
  .ml-5 {
    margin-left: 0px !important;
    
  }
  .navbar-nav{height: 100vh;}

  .navbar-nav .nav-item {
    border-bottom: 1px solid #e0e0e0;
    /* 灰色下横杠 */
    margin-bottom: 12px;
    /* 增大垂直间距 */
    padding-bottom: 8px;
  }

  .nav-link::after {
    opacity: 0;

  }

  .navbar-brand{ padding: 0;}
   .navbar-brand img{ height: 35px !important;}

}

/* 移除语言切换按钮点击时的边框 */
#languageDropdown,
#languageDropdownDesktop {
  border: none;
  box-shadow: none !important;
  /* 移除聚焦时的阴影 */
}

/* 让下拉菜单宽度和按钮一致 */
#languageDropdown+.dropdown-menu,
#languageDropdownDesktop+.dropdown-menu {
  width: max-content;
  /* 菜单宽度由内容决定 */
  min-width: 100%;
  /* 最小宽度和按钮一致 */
}


/* 让小屏幕下的下拉菜单不浮动，点击撑开父元素 */
.d-lg-none .dropdown-menu {
  position: static;
  /* 静态定位，不脱离文档流 */
  float: none;
  /* 取消浮动 */
  display: none;
  /* 默认隐藏 */
  margin-top: 0;
  /* 移除顶部外边距 */
}

.d-lg-none .dropdown-menu.show {
  display: block;
  /* 显示下拉菜单 */
}

.d-lg-none .dropdown-menu {
  width: 100px;
}


@media (min-width: 992px) {
  .navbar-nav .nav-link {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }
}

/* 设置 nav-link 默认字体颜色为黑色 */
.navbar-nav .nav-link {
  color: #000;
}

/* 设置 nav-link 鼠标悬停时字体颜色为灰色 */
.navbar-nav .nav-link:hover {
  color: #000000;
}

/* 确保激活状态的链接颜色也符合需求，可按需调整 */
.navbar-nav .nav-link.active {
  color: #000000;
}

.lang{ margin-right: 6px; margin-bottom: 3px;}



.lang {
  filter: brightness(0);
}
.lang {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg);
}

.navbar.scrolled .dropdown-toggle .lang ,.navbar[data-theme-transparent]:hover .dropdown-toggle .lang{  filter: none;}


/* 自定义按钮样式 */
.custom-btn {
  background-color: #fff;
  /* 背景白色 */
  color: #000;
  /* 字体黑色 */
  border-radius: 25px;
  /* 增加圆角，可按需调整 */
  width: 120px;
}

.custom-btn:hover {
  background-color: #fff;
  /* 鼠标悬停时背景变灰 */
  color: #000;
  /* 鼠标悬停时字体仍为黑色 */
}

/* 自定义按钮样式1 */
.custom-btn1 {
  background-color: #333333;
  /* 背景白色 */
  color: #fff;
  /* 字体黑色 */
  border-radius: 25px;
  /* 增加圆角，可按需调整 */
  width: 120px;
}

.custom-btn1:hover {
  background-color: #fff;
  /* 鼠标悬停时背景变灰 */
  color: #000;
  /* 鼠标悬停时字体仍为黑色 */
}

/* 设置 nav-link 默认背景颜色和字体颜色 */
.nav-pills .nav-link {
  background-color: #eef2fe;
      width: 120px;
  color: #000;
  margin-right: 15px;
  /* 为每个标签添加右外边距 */
  margin-bottom: 10px;
  border-radius: 20px;
  /* 增加圆角 */
}
.nav-pills .nav-link:hover{ background-color: #275df1; color: #fff;}

/* 设置 nav-link 选中时的背景颜色和字体颜色 */
.nav-pills .nav-link.active {
  background-color: #275df1;
  color: #fff;
}

.border-radius20 {
  border-radius: 20px;
  /* 增加圆角 */
}

/* 为产品卡片添加间距和背景颜色 */
.product-card {
  border-radius: 1rem;
  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0);
  transition: all 0.3s ease;
  padding: 30px;
  /* 添加上下左右间距 */
  background-color: #f8f9fc;
  /* 设置背景颜色 */
}

.product-card .card-title {
  font-weight: 600;
}

.product-card .card-body {
  padding: 0;
}

/* 控制按钮宽度 */
.btn.btn-sm.btn-dark {
  width: 120px;
  /* 可按需调整按钮宽度 */
  margin: 0 auto;
  /* 按钮居中 */
  display: block;
  /* 使按钮以块级元素显示，方便设置宽度和居中 */
}

/* 设置图片最大宽度为 100% 并居中 */
.product-card .card-img-top {
  max-width: 65%;
  height: auto;
  /* 保持图片比例 */
  display: block;
  /* 使图片以块级元素显示 */
  margin: auto;
  /* 上下左右居中 */
  width: auto;
  padding-top: 70px;
  padding-bottom: 70px;
}




/* 视频封面容器样式 */

/* 小屏幕设备（iPad 和手机）样式 */
@media (max-width: 768px) {

  .nav-pills .nav-link {

      width: 100px;
      }
  .video-cover-text {
    right: 20px;
    /* 距离右侧 20px */
    bottom: 30px;
    /* 距离底部 30px */
  }

  .modal-content {
    width: 95%;
    margin: 0 auto;
  }
}

/* 视频封面文字样式 */
.video-cover-text {
  position: absolute;
  right: 60px;
  /* 距离右侧 10px */
  bottom: 40px;
  /* 距离底部 10px */
  background-color: rgba(255, 255, 255, 0.8);
  /* 透明白色背景 */
  color: #000;
  /* 文字黑色 */
  padding: 8px 20px;
  /* 内边距 */
  border-radius: 20px;
  /* 圆角 */
  margin: 0;
  /* 移除默认外边距 */
}




/* 应用图片容器样式 */
.scene-img-container {
  position: relative;  overflow: hidden;
}

.scene-img {
  border-radius: 15px; transition: all 0.3s ease;
  /* 圆角 */
}

/* 应用场景图片样式 */
.scene-img {
  border-radius: 15px;

}

.scene-img:hover {
  transform: scale(1.06);
}


/* 应用图片标题样式 */
.scene-img-title {
  position: absolute;
  top: 40px;
  /* 距离顶部 10px */
  left: 0;
  /* 靠右对齐 */
  background-color: #275df1;
  /* 背景颜色 */
  color: white;
  /* 字体颜色 */
  border-top-right-radius: 20px;
  /* 左上角圆角 */
  border-bottom-right-radius: 20px;
  /* 左下角圆角 */
  padding: 5px 15px;
  /* 内边距 */
  margin: 0;
  /* 移除默认外边距 */
}

.font-size-18 {
  font-size: 16px;
}

.font-size-14 {
  font-size: 12px;
}


.help-link {

  border-bottom: 2px solid transparent;
  transition: border .3s;
  line-height: 24px;
  padding-bottom: 4px;
}

.help-link:hover {

  border-color: #262629;
}

/*自定义手机端菜单按钮*/
.navbar-toggler {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
   
}


/* 添加导航按钮图标样式 */

.scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.navbar-toggler.active .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M6 6l18 18M6 24L24 6'/%3E%3C/svg%3E") !important;
}

/* 移动端及iPad Air导航按钮默认白色图标 */
@media (max-width: 820px) {
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  }
}

@media (max-width: 992px) {
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  }
}
