body {
  transition: all 1s ease;
}

.water-mark {
  bottom: 16.5vw;
}

.title-cn {
  font-size: 4.5vw;
}

/* 滑动到一定高度背景变色 */
.active-body {
  background-color: #ec622a;
  transition: all 1s ease;
}

.active-blue-body {
  background-color: #0033FF;
  transition: all 1s ease;
}

.about-text-cn {
  font-size: 50px;
  line-height: 100px;
}

.about-text-cn span {
  font-size: 100px;
  font-weight: bold;
}

.more-cn {
  font-size: 20px;
}

.more-en {
  font-size: 10px;
}

/* 分割线动效 */
.section__divider {
  border-top: 2px solid #ccc;
  margin-bottom: 30px;
  transition: transform 1s ease-in;
  transform-origin: 0% 50%;
  transform: scaleX(0);
}

.section__divider.active {
  transform: scaleX(1);
}

.about-text .font-effects:hover {
  color: #ec622a;
}

.computer-box,
.phone-box,
.ip-content {
  position: relative;
}

.computer-box img {
  width: 100%;
  height: 40vw;
}

.computer-box video {
  position: absolute;
  left: 34%;
  top: 8.5%;
  width: 27.7vw;
  height: 19vw;
}

.phone-box {
  width: 34vw;
  height: 16vw;
  transform: rotate(-20deg);
  margin-top: -18vw;
  margin-left: -2vw;
}

.phone-box img {
  width: 100%;
  height: 100%;
}

.phone-box video {
  position: absolute;
  left: 2%;
  top: 5%;
  width: 96%;
  height: 91%;
  border-radius: 2vw;
}


.video-popup {
  width: 60%;
  height: 60%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 10;
  display: none;
}

.video-popup .video-js {
  width: 100%;
  height: 100%;
}


.image-mask:hover {
  background-color: rgba(0, 0, 0, 0);
}

.SE-mask:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.project2-a1::after {
  background: rgba(255, 255, 255, 0.20) !important;
}

.project-area .mask-text {
  font-style: italic;
  font-family: "AlibabaPuHuiTi-Bold";
  font-weight: bold;
}

.mask-text {
  left: 30px;
  bottom: 4vw;
  font-size: 5vw;
}

.mask-logo {
  width: 15vw !important;
}

/* 定义 vm 为 vw 的某个比例 */
:root {
  --vm: 1vw;
  /* vm 设置为视口宽度的1% */
  --animate-duration: 800ms;
  --animate-delay: 0s;
}

/* 使用 vm 替代原来的 vw 和 vh */
h2 {
  font-size: calc(6 * var(--vm));
  /* 使用 6 倍的 vm 来调整字体大小 */
  font-weight: bold;
  color: white;
  text-align: left;
  line-height: 1.5;
}

/* 图片大小的调整 */
.about img {
  width: calc(8 * var(--vm));
  /* 使用 vm 来计算图片宽度 */
  height: calc(8 * var(--vm));
  /* 使用 vm 来计算图片高度 */
  margin: 0 10px;
  vertical-align: text-top;
}

.btn {
  width: calc(20 * var(--vm));
  /* 按钮宽度使用 vm */
  font-size: calc(2 * var(--vm));
  /* 按钮字体大小使用 vm */
}

/* 默认状态下的文字大小 */
.slider-title {
  font-size: 8vw;
  /* 根据屏幕宽度调整字体大小 */
  white-space: nowrap;
  /* 阻止换行 */
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  /* 确保文字居中对齐 */
}

.btn-outline-light {
  align-self: flex-end;
  font-family: 'AlibabaPuHuiTi-Medium';
  padding: 8px 20px;
  font-size: 20px;
  background-color: transparent;
  border: 2px solid white;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase
}

/* 按钮样式 */
.watch-video-btn {
  font-family: "AlibabaPuHuiTi-Medium";
  padding: 5px 20px;
  font-size: 12px;
  background-color: transparent;
  border: 2px solid white;
  color: white;
  cursor: pointer;
  margin: 0 auto;
}

/* 鼠标悬停时，按钮效果 */
.btn-outline-light:hover {
  background-color: white;
  color: black !important;
  transform: scale(1.1);
  /* 放大按钮 */
}

.carousel-control-prev,
.carousel-control-next {
  background-color: rgba(128, 128, 128, 0.5);
  /* 半透明灰色背景 */
  width: 3vw;
  /* 按钮宽度 */
  height: 3vw;
  /* 按钮高度 */
}

.carousel-control-prev {
  left: 70%;
  top: 90%;
}

.carousel-control-next {
  left: 80%;
  top: 90%;
}

.suit-description {
  font-size: 0.8vw;
  margin-top: 32%;
  margin-left: 9.5%;
}

/* 默认桌面及平板样式 */
#project .row {
  display: flex;
  justify-content: space-between;
}

#project .col-auto,
#project .col {
  flex: 1;
  margin: 0;
}

/* 禁止视频弹出全屏 */
video::-webkit-media-controls-fullscreen-button {
  display: none;
}

body {
  background-color: #000;
  color: white;
  font-family: "AlibabaPuHuiTi-Regular";
  font-weight: normal;
}

p {
  font-size: 1.1vw;
  margin-top: .4vw;
  color: white;
  font-weight: normal;
  font-family: "AlibabaPuHuiTi-Regular";
}

.slider-content {
  width: 100%;
}

h1 {
  font-family: "AlibabaPuHuiTi-Heavy";
  color: white;
  font-weight: 1000;
  font-size: 10vw;
  font-style: italic;
  /* margin-bottom: 50px; */
  letter-spacing: -.5vw;
}

h2 {
  font-family: "AlibabaPuHuiTi-Medium";
  font-weight: 500;
  font-size: 8.1vw;
  line-height: 5vw;
}

h3 {
  font-family: "AlibabaPuHuiTi-Regular";
  font-weight: 500;
  font-size: 1.25vw;
  color: white;
}

span {
  font-family: "AlibabaPuHuiTi-Light";
  color: white;
  font-weight: normal;
}

p1 {
  font-family: "AlibabaPuHuiTi-Regular";
  font-size: 0.8vw;
  margin-top: 1vw;
  color: white;
  font-weight: normal;
}

a {
  font-family: "AlibabaPuHuiTi-Regular";
  color: white;
  font-weight: normal;
  font-size: 1.39vw;
}

h6 {
  color: #8996a0;
}

.clients {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 6vw;
  box-sizing: border-box;
}

.row1 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  /* margin-bottom: 20px; */
}

.project1,
.project2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.project1 {
  width: 45%;
  padding-right: 2%;
}

.project2 {
  width: 48%;
  padding-left: 0%;
}

.adress {
  opacity: 0.7;
}

.Image2 {
  margin-top: 2vw;
}

.project1 img,
.project2 img,
.image-gallery img,
.project-news-li-image img {
  width: 100%;
  max-width: 100%;
  object-fit: cover;
}

.project1 .store-text,
.project2 .store-text {
  margin-top: .5vw;
}

.project1 img:nth-of-type(2),
.project2 img {
  margin-top: 100px;
}

.tag {
  margin-top: .5vw;
}

.project1 {
  position: relative;
}

.store-text {
  width: 100%;
  height: 120px;
  position: relative;
}

.text-box1,
.text-box2,
.text-box3,
.project1-a1,
.project1-a2,
.project2-a1 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateX(-200px);
}

.text-box3,
.project2-a1 {
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  opacity: 0;
  transform: translateX(800px);
}

/* 从左至右 */
.storeLeftHover {
  opacity: 1;
  transform: translateX(0);
  transition: all 1s;
}

.image-gallery,
.project-news-li-image {
  opacity: 0;
  transform: translateY(200px);
}

/* 从下至上 */
.storeTopHover {
  opacity: 1;
  transform: translateY(0);
  transition: all 1s;
}

.span1,
.span2 {
  background-color: transparent;
  color: white;
  font-size: 0.8vw;
  margin-right: 1vw;
  display: inline-block;
  border: 1px solid white;
  border-radius: 15px;
  opacity: 0.7;
  padding: 2px 1vw;
}

.span1 {
  border-radius: 0;
}

.image-gallery,
.project-news-li-image {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
}

.project-image-container {
  width: 45%;
  padding-right: 5%;
  text-align: left;
  margin-top: 2vw;
}

video {
  width: 100%;
  display: block;
  height: auto;
  object-fit: cover;
}

.index-video-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 70%);
}

.row1 {
  margin-top: 5vw;
}

.project-text,
.project1-a2 {
  margin-top: .5vw;
}

/* 保证父元素有定位，以使遮罩层相对定位 */
.project1-a1,
.project1-a2,
.project2-a1,
.project2-a2,
.project2-a3 {
  position: relative;
  overflow: hidden;
  /* 防止遮罩层溢出 */
}

/* 为图片创建平滑的过渡效果 */
.project1-a1 img,
.project1-a2 img,
.project2-a1 img,
.project2-a2 img,
.project2-a3 img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease;
  /* 图片过渡效果 */
}

/* 创建独立的遮罩层，仅限于每个图片 */
.project1-a1::after,
.project1-a2::after,
.project2-a1::after,
.project2-a2::after,
.project2-a3::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  /* 黑色半透明遮罩 */
  opacity: 0;
  /* 默认透明 */
  transition: opacity 0.3s ease, transform 0.3s ease;
  /* 遮罩的渐变与放大效果 */
  z-index: 1;
  /* 确保遮罩层位于图片上方，但文字在更高层级 */
  cursor: pointer;
  /* cursor: url("https://pdsite.partydaysport.com/official_website/logo-3.png") 12 12, pointer; */
}

/* 鼠标悬停时让对应的遮罩层可见并且放大 */
.project1-a1:hover::after {
  opacity: 1;
  /* 遮罩层完全可见 */
  transform: scale(1.1);
  /* 放大遮罩层 */
}

/* 鼠标悬停时让对应的遮罩层可见并且放大 */
.project1-a2:hover::after {
  opacity: 1;
  /* 遮罩层完全可见 */
  transform: scale(1.1);
  /* 放大遮罩层 */
}

.project2-a1:hover::after {
  opacity: 1;
  transform: scale(1.1);
}

.project2-a2:hover::after {
  opacity: 1;
  transform: scale(1.1);
}

.project-news-li-image:hover::after {
  opacity: 1;
  transform: scale(1.1);
}

.project1-a1 .img-bg,
.project1-a2 .img-bg,
.project2-a2 .img-bg {
  transition: 0.5s ease;
}

/* 鼠标悬停时图片轻微放大 */
.project1-a1:hover .img-bg,
.project1-a2:hover .img-bg,
.project2-a1:hover img,
.project2-a2:hover .img-bg,
.project2-a3:hover img {
  transition: 0.5s ease;
  transform: scale(1.05);
  /* 放大图片 */
}

/* 确保文字总是在遮罩层之上 */
.project1-a1 p,
.project1-a2 p,
.project1-a2 p,
.project1-a2 p,
.project2-a3 p {
  position: relative;
  z-index: 2;
  /* 使文字位于遮罩层之上 */
}

.project1-a1 .tag,
.project1-a2 .tag,
.project2-a1 .tag,
.project2-a2 .tag,
.project2-a3 .tag {
  position: relative;
  z-index: 2;
  /* 确保标签位于遮罩层之上 */
}

/* 默认样式 */
.ql-size-huge {
  font-size: 2vw;
  /* 使用视口宽度单位，使字体大小随着屏幕宽度变化 */
  color: white;
  margin-left: 20px;
  /* 改小了左边距，避免过大的偏移 */
  margin-top: 30px;
  margin-bottom: 30px;
  line-height: 1.6;
  text-align: left;
}

.carousel-control-prev,
.carousel-control-next {
  background-color: rgba(255, 255, 255, 0) !important;
  /* 半透明白色背景 */
  width: 4vw;
  /* 按钮宽度 */
  height: 4vw;
  /* 按钮高度 */
}

.carousel-control-prev {
  left: 71%;
  top: 85%;
}

.carousel-control-next {
  left: 75%;
  top: 85%;
}

/* 创建容器，确保它有相对定位 */
.news-li-image {
  position: relative;
  /* 确保父元素有定位，遮罩层在此元素内 */
  overflow: hidden;
  /* 防止文字超出容器范围 */
}

/* 遮罩层 */

.news-li-image::before {
  width: 20vw;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: yellow;
  /* 设置遮罩层颜色 */
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  pointer-events: none;
  /* 确保遮罩层不阻止鼠标指针 */
  z-index: 1;
  /* 遮罩层在图片上方 */
  border-radius: 50%;
}

/* 鼠标悬停时显示遮罩层 */
.news-li-image:hover::before {
  opacity: 1;
  /* 显示遮罩层 */
}

/* 滚动的文字 */
.news-li-image::after {
  content: "READ MORE";
  /* 在 CSS 中直接写文字 */
  position: absolute;
  top: 50%;
  /* 使文字垂直居中 */
  left: 100%;
  /* 让文字从右侧开始 */
  transform: translateY(-50%);
  /* 使文字垂直居中 */
  color: #000;
  font-size: 4vw;
  /* 设置字体大小 */
  z-index: 2;
  /* 确保文字位于遮罩层之上 */
  white-space: nowrap;
  /* 防止文字换行 */
  transition: left 0.3s ease;
  /* 控制文字从右到左的过渡效果 */
}

/* 鼠标悬停时启动滚动效果 */
.news-li-image:hover::after {
  animation: scrollText 5s linear infinite;
  /* 启动滚动动画 */
}

/* 动画：让文字从右到左滚动 */
@keyframes scrollText {
  0% {
    left: 10%;
    /* 从右侧开始 */
  }

  100% {
    left: -100%;
    /* 滚动到左侧，直到完全离开视野 */
  }
}

.news-add .news-add-imag::before {
  width: 100%;
}

.news-add-imag::after {
  font-size: 10vw;
}

.news-add-imag:hover::after {
  animation: scrollText1 7s linear infinite;
}

@keyframes scrollText1 {
  0% {
    left: 50%;
    /* 从右侧开始 */
  }

  100% {
    left: -70%;
    /* 滚动到左侧，直到完全离开视野 */
  }
}

.news-ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 10vw !important;
}

.news-li-dev {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.radius-image {
  width: 20vw;
  height: 20vw;
  object-fit: cover;
  border-radius: 50%;
}

.rectangle-image {
  width: 20vw;
  height: 20vw;
  object-fit: cover;
}

.news-li {
  width: 23%;
  margin-bottom: 30px;
  height: 35vw;
}

.news-li .news-p-3 {
  margin-top: 0;
}

.news-li:nth-child(2n) .news-li-image::before {
  border-radius: 0;
}

.news-li:nth-child(5) .news-text-img,
.news-li:nth-child(7) .news-text-img {
  width: 14vw;
}

.news-li:nth-child(5) .news-p-1-1,
.news-li:nth-child(7) .news-p-1-1 {
  left: 34%;
}

.news-li:nth-child(4) .news-p-1-0,
.news-li:nth-child(6) .news-p-1-0 {
  left: 28%;
  top: 31%;
}

/* 字体居中 */
.news-p-1-0,
.news-p-1-1,
.news-p-1-2,
.news-p-1-3 {
  font-size: 0.9vw;
  font-weight: normal;
  position: absolute;
  top: 35%;
  left: 37%;
  transform: translate(-50%, -50%);
  color: white;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-p-2,
.news-p-3,
.news-p-4 {
  font-size: 1.1vw;
  font-weight: 400;
  color: #fff;
  margin-top: 1vw;
}

.news-text-img {
  width: 15vw;
  height: auto;
  display: block;
}

.text-lines {
  margin-top: 30px;
  text-align: left;
  position: relative;
}

#carousel1 {
  width: 100%;
  overflow: hidden;
  /* 隐藏超出的部分 */
  position: relative;
}

.carousel-container1 {
  width: 100%;
  overflow: hidden;
  background-color: white;
}

.carousel-track1 {
  display: flex;
  animation: scroll 40s linear infinite;
  /* 滚动效果 */
}

/* 定义滚动动画 */
@keyframes scroll {
  0% {
    transform: translateX(0);
    /* 从最初的位置开始 */
  }

  100% {
    transform: translateX(-100%);
    /* 向左移动100%，即每次滚动一整屏 */
  }
}

.carousel-item1 {
  width: 10%;
  /* 每个图片占据的宽度，10张图片在屏幕上显示 */
  flex-shrink: 0;
  /* 防止缩小 */
}

.carousel-item1 img {
  width: 100%;
  height: auto;
}

.ball {
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 480px) {
  /* h1 {
    margin-bottom: 0;
  } */

  .ql-size-huge {
    font-size: 10vw;
    /* 适应超小屏幕，进一步放大字体 */
    margin-left: 5px;
    /* 更小的左边距 */
  }

  .slider-title {
    font-size: 8vw;
    /* 在小屏幕上字体变更小 */
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 12vw;
    /* 更大按钮，适应超小屏幕 */
    height: 12vw;
    /* 更大按钮 */
  }

  .carousel-control-prev {
    left: 68% !important;
    top: 87% !important;
  }

  .carousel-control-next {
    left: 75% !important;
    top: 87% !important;
  }

  .suit-description {
    font-size: 4vw;
    /* 更大字体，适应小屏幕 */
    margin-top: 45%;
    margin-left: 3%;
  }

  .suit-text {
    font-size: 5vw;
    /* 更大的文字 */
    margin-bottom: 4vh;
    top: 8%;
  }

  .suit-image {
    max-width: 50vw;
    /* 更小的图片 */
  }

  .main-suit-image {
    width: 70vw;
    /* 更小的主套装图片 */
  }

  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .king-icon {
    margin-top: 0 !important;
  }

  .btn-outline-light {
    width: 80px !important;
    font-size: 10px !important;
  }

  .btn-outline-light .more-cn {
    line-height: 15px;
    font-size: 15px;
  }

  .store-text {
    /* height: 150px; */
  }

  .project2 .store-text {
    height: 20px;
  }

  .row1-xian,
  .project-news-li-image {
    margin-top: 0 !important;
  }

  .project-news-li-image .img-fluid {
    margin-bottom: 0 !important;
  }

  .water-mark {
    width: 120px !important;
    bottom: 16.3vw;
    right: 11vw;
  }

  .featured-new {
    line-height: 40px;
  }

}

/* 小于 576px 时（手机屏幕）调整样式 */
@media (max-width: 576px) {
  h2 {
    font-size: 20px;
    /* 小屏幕字体大小 */
    text-align: center;
  }

  h2 img {
    width: 80px;
    /* 小屏幕下图片大小 */
    height: 80px;
    margin: 0 5px;
  }

  .btn {
    width: 100px;
    font-size: 18px;
    /* 调整按钮字体大小 */
    /* padding: 3px 20px; */
    /* 调整按钮内边距 */
  }
}

/* 小于 768px 时（平板屏幕）调整样式 */
@media (min-width: 768px) {
  h2 {
    font-size: 5.3vw;
    /* 默认桌面端字体大小 */
  }

  h2 img {
    width: 120px;
    /* 默认桌面端图片大小 */
    height: 120px;
  }

  .btn {
    width: 210px;
    font-size: 18px;
    /* 默认按钮字体大小 */
  }

  /* Tablets and above, you can keep existing styles here */
  .carousel-item {
    height: 100vh;
    /* Keep the full height on tablets and above */
  }
}

/* 大于 768px 时（桌面端） */
@media (max-width: 768px) {
  .row {
    flex-direction: row;
    /* 保证小屏幕上元素依然在一排 */
  }

  #messageText {
    font-size: 3vw;
    /* 小屏幕下文字稍微缩小 */
  }

  .ql-size-huge {
    font-size: 4vw;
    /* 更大的字体适应小屏幕 */
    margin-left: 10px;
    /* 更小的左边距 */
  }

  p1 {
    font-family: "AlibabaPuHuiTi-Regular";
    font-size: 2vw;
    margin-top: 1vw;
    color: white;
    font-weight: normal;
  }

  .navbar .navbar-brand img {
    width: 36vw;

    transition: all 2s ease;
  }

  .carousel-item {
    height: 50vw;
    /* 根据屏幕尺寸调整视频高度 */
    overflow: hidden;
    /* 隐藏多余的内容 */
  }

  h2 {
    font-size: 30px;
    /* 平板屏幕字体大小 */
  }

  h2 img {
    width: 100px;
    /* 平板屏幕下图片大小 */
    height: 100px;
  }

  .btn {
    width: 220px;
    font-size: 20px;
    /* 调整按钮字体大小 */
  }

  .slider-title {
    font-size: 10vw;
    /* 在中等屏幕上增大字体 */
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 8vw;
    /* 增加按钮的宽度 */
    height: 8vw;
    /* 增加按钮的高度 */
  }

  .carousel-control-prev {
    left: 75%;
    top: 85%;
  }

  .carousel-control-next {
    left: 85%;
    top: 85%;
  }

  .suit-description {
    font-size: 3vw;
    /* 更大的字体，适应手机屏幕 */
    margin-top: 40%;
    margin-left: 5%;
    width: 90%;
    /* 限制描述区域宽度 */
  }

  .carousel-item {
    height: auto;
    /* 调整轮播图的高度 */
  }

  .suit-text {
    font-size: 4vw;
    /* 更大的字体 */
    margin-bottom: 2vh;
    top: 5%;
    /* 调整套装名称的位置 */
  }

  .suit-image {
    max-width: 40vw;
    /* 缩小图片尺寸 */
  }

  .main-suit-image {
    width: 60vw;
    /* 缩小主套装图片 */
    max-width: none;
    height: auto;
  }

  /* 针对小屏幕（手机）设置样式 */
  #project .row {
    flex-direction: column;
    /* 切换为垂直布局 */
    align-items: center;
    /* 居中对齐 */
    text-align: center;
    /* 文本居中 */
  }

  #project .col-auto,
  #project .col {
    width: 100%;
    /* 每列占满 100% 宽度 */
    margin: 0 0 20px 0;
    /* 为每列添加底部间距 */
    padding: 0;
    /* 清除内边距 */
  }

  /* 可选：调整图片和文本的大小和间距 */
  #project img {
    width: 100%;
    /* 图片宽度为100% */
    height: auto;
    /* 自适应高度 */
    /* margin-bottom: 20px; */
    /* 为图片添加底部间距 */
  }

  #project p,
  #project h3 {
    font-size: 2vw;
    /* 调整字体大小 */
  }

  /* 调整标签按钮的样式 */
  #project span {
    font-size: 0.9rem;
    /* 减小标签字体 */
    padding: 0 15px;
    /* 标签内部间距 */
  }

  .clients {
    /*margin-top: 30px;*/
  }

  .row1 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .project1,
  .project2 {
    width: 100%;
    text-align: left;
  }

  .project1 {
    /* margin-bottom: 30px; */
  }

  .Image2 {
    margin-top: 2vw;
  }

  .project1 img,
  .project2 img,
  .image-gallery img,
  .project-news-li-image img {
    width: 100%;
    max-width: 100%;
    /* 确保图片不会超出容器 */
    object-fit: cover;
  }

  .project1 img:nth-of-type(2),
  .project2 img {
    margin-top: 0;
  }

  .tag {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    /* 允许标签换行 */
    gap: 10px 15px;
    /* 增加垂直间距 15px 和水平间距 10px */
    margin-top: 8px;
    /* 增加标签上方间距 */
  }

  .span1,
  .span2 {
    padding: 0px 1vw;
    background-color: transparent;
    color: white;
    font-size: 4vw;
    /* 增大标签字体以适应小屏幕 */
    display: inline-block;
    border: 2px solid white;
  }

  .project-image-container {
    width: 100%;
    padding-right: 0;
    /* 确保没有额外的右边距 */
    margin-top: 2vw;
    /* 增加容器的顶部间距 */
  }

  .image-gallery,
  .project-news-li-image {
    margin-top: 20px;
  }

  /* 保证图片和标签的合适间距 */
  .image-gallery,
  .project-news-li-image,
  .project-image-container {
    margin-bottom: 30px;
    /* 图片与标签之间的垂直间距 */
  }

  #project p,
  #project h3 {
    font-size: 4vw;
  }
}

@media (max-width: 960px) {
  .carousel-caption {
    bottom: 0vw;
    padding-top: 1vw;
  }
}

@media only screen and (max-width: 1500px) {

  .news-p-1-0,
  .news-p-1-1,
  .news-p-1-2,
  .news-p-1-3 {
    top: 30%;
  }
}

@media only screen and (min-width: 800px) {
  .image-gallery.multmedia-mobiel {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .text-box3 {
    margin-top: 5px;
  }

  .project2 .store-text {
    height: 90px;
  }

  .project1-a1,
  .project1-a2,
  /* .project2-a1, */
  .project2-a2,
  .project2-a3 {
    margin-bottom: 5px;
  }


  .water-mark {
    bottom: 19vw;
  }

  .carousel-item1 {
    width: 20%;
  }

  .news-li-image::after {
    font-size: 13vw;
  }

  .news-ul {
    display: block;
    margin-top: 2vw !important;
  }

  .news-li {
    width: 100%;
    height: auto;
  }

  .news-li-image {
    width: 100%;
    height: auto;
  }

  .news-text-img {
    display: block;
    width: 100% !important;
    height: auto;
    margin: 0 auto;
  }

  .news-p-1-0,
  .news-p-1-1,
  .news-p-1-2,
  .news-p-1-3 {
    font-size: 2.8vw;
    top: 40%;
    left: 50% !important;
    transform: translate(-50%, -50%);
  }

  .news-p-1-4 {
    left: 40% !important;
  }

  .news-p-2,
  .news-p-3,
  .news-p-4 {
    font-size: 2.4vw;
    line-height: 4vw;
  }

  .radius-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
  }

  .rectangle-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .slider-content {
    width: 100%;
    margin-top: -50px;
  }

  .index-title {
    width: 100%;
    font-size: 12vw;
    margin-bottom: 10px;
  }

  .box-mobiel .font-effects {
    font-size: 4vw;
    font-weight: bold;
  }

  .about-text-cn {
    display: flex;
    line-height: 40px;
  }

  .client-about-mobiel {
    margin-top: -130px;
    height: 60vh;
  }

  .client-about-mobiel .btn-outline-light {
    margin-top: 10vh;
  }

  .about-word-single {
    font-size: 30px !important;
    font-weight: 700;
  }

  .ip-content {
    height: calc(50vh - 30px);
  }

  .computer-box,
  .computer-box img {
    height: 100%;
  }

  .computer-box {
    background-color: #000;
  }

  .computer-box img {
    object-fit: contain;
  }

  .computer-box video {
    top: 25%;
    left: 32%;
    width: 37vw;
    height: 13vh;
  }

  .pd-line {
    height: 25px !important;
    object-fit: fill !important;
    margin-top: 0 !important;
  }

  .phone-box {
    top: -10vh;
  }

  .project-logo-mobiel {
    display: flex;
    justify-content: start;
  }

  .project-logo-mobiel img {
    margin-left: 0 !important;
  }

  .news-li-image::before {
    width: 100%;
  }

  .news-ul {
    display: flex;
  }

  .news-ul .news-li {
    width: 48%;
  }


  .news-li:nth-child(4) .news-p-1-0,
  .news-li:nth-child(6) .news-p-1-0 {
    left: 41%;
    top: 35%;
  }

  .news-li:nth-child(5) .news-p-1-1,
  .news-li:nth-child(7) .news-p-1-1 {
    left: 50%;
  }

  .text-lines {
    margin-top: 0;
  }

  .project1-a1 .img-bg,
  .project1-a2 .img-bg {
    height: 50vw !important;
  }

  .computer-video-line {
    margin-top: 0 !important;
  }

  .video-popup {
    width: 90%;
    height: 25%;
  }

  .mask-text {
    left: 15px;
    bottom: 10px;
    font-size: 25px !important;
    font-weight: bold;
  }

  .news-add .mask-text {
    width: 100%;
  }

  .news-add .mask-text p {
    font-size: 3.5vw;
    line-height: 15px;
  }

  .news-add .mask-text .tag {
    margin-top: 1vw !important;
  }

  .news-add .mask-text .tag span {
    font-size: 3vw !important;
  }

  .ip-mask-text {
    width: 70%;
    line-height: 10px;
    font-size: 8px !important;
  }

  .project-word .col,
  .project-word .col-auto {
    width: 100% !important;
    padding-left: 15px !important;
  }
}