.ml-126-5 {
  margin-left: 7.91rem;
}
.mt-5-5 {
  margin-top: 0.34rem;
}
.mt-11-5 {
  margin-top: 1.5rem;
}
.ml-251-5 {
  margin-left: 15.72rem;
}
.ml-9-5 {
  margin-left: 0.59rem;
}
.mt-9-5 {
  margin-top: 1.59rem;
}
.mt-22-5 {
  margin-top: 1.41rem;
}
.ml-9 {
  margin-left: 0.56rem;
}
.page {
  padding-bottom: 2.63rem;
  background-color: #eeeeeb;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section_2 {
  overflow: hidden;
  background-color: #050505;
  /* height: 22.5rem; */
}
.section {
  margin-top: -2.34rem;
  padding: 2.34rem 0 0;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/banner.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  position: relative;
  /* min-height: 100vh; */
}
.section_3 {
  padding: 1.25rem 8.75rem;
  background-color: #161613;
  width: 100%;
  justify-content: space-between;
}
.image {
  /* width: 1.25rem;
  height: 1.25rem; */

  /* width: 2.5rem; */
  height: 2.5rem;
}
.image_3 {
  margin-left: 0.42rem;
  width: 2.69rem;
  height: 1.75rem;
}
.section_4 {
  margin-left: 1.5rem;
  background-color: #ffffff66;
  width: 0.061rem;
  height: 1.5rem;
}
.font_2 {
  font-size: 1rem;
  font-family: Poppins;
  /* line-height: 0.58rem; */
  font-weight: 700;
  color: #ffffff;
}
.text_2 {
  margin-left: 2.25rem;
  line-height: 0.31rem;
}
.font_3 {
  font-size: 1rem;
  font-family: Poppins;
  line-height: 1rem;
  font-weight: 700;
  color: #ffffff;
}
.text_3 {
  margin-left: 2.25rem;
  line-height: 0.33rem;
}
.text_4 {
  margin-left: 2.25rem;
  line-height: 0.35rem;
}
.text_5 {
  margin-left: 2.25rem;
  color: #ffcc32;
  line-height: 0.35rem;
}
.text_6 {
  margin-left: 2.25rem;
  line-height: 0.44rem;
}
.text_7 {
  margin-left: 2.25rem;
  line-height: 0.31rem;
}
.group {
  margin-right: 0.13rem;
}
.image_2 {
  border-radius: 1.25rem;
  width: 2.62rem;
  height: 2.62rem;
}
.font {
  font-size: 0.75rem;
  font-family: Poppins;
  line-height: 0.69rem;
  color: #ffffffcc;
}
.text {
  line-height: 0.29rem;
}
.font_4 {
  font-size: 1rem;
  font-family: Poppins;
  /* line-height: 0.75rem; */
  font-weight: 700;
  color: #ffffff;
}
.text_8 {
  line-height: 0.51rem;
}
.group_2 {
  /* margin-top: 2.81rem; */
  padding: 0 4.38rem;
  width: 75rem;
  margin: 2.81rem auto 0;
}
.font_5 {
  font-size: 2rem;
  font-family: Poppins;
  line-height: 2.75rem;
  font-weight: 700;
  color: #eeeeeb;
}
.image_4 {
  width: 1.5rem;
  height: 1.5rem;
}
.group_3 {
  width: 45.58rem;
}
.text_12 {
  color: #ffffffcc;
  font-size: 1rem;
  font-family: Poppins;
  line-height: 1.5rem;
}
/* .text-wrapper {
  padding: 0.69rem 0;
  background-color: #ffcc32;
  border-radius: 3.13rem;
  overflow: hidden;
  width: 5.34rem;
} */

.text-wrapper {
  margin-top: 1.88rem;
  padding: 1.38rem 0;
  background-color: #ffcc32;
  border-radius: 6.25rem;
  overflow: hidden;
  width: 10.81rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}


.font_6 {
  font-size: 1rem;
  font-family: Poppins;
  line-height: 0.34rem;
  font-weight: 700;
  color: #040415;
}
.mt_99{
  margin-top: 2rem;
}
.group_4 {
  /* margin-top: 3.22rem; */
  padding: 0 4.13rem;
  max-width: 75rem;
  margin: 5.5rem auto 0;
  justify-content: space-between;
}
.image-wrapper {
  width: 1.75rem;
}
.image_5 {
  border-radius: 3.13rem;
  width: 2.5rem;
  height: 2.5rem;
}
.image_6 {
  width: 1.75rem;
  height: 0.25rem;
}
.section_5 {
  padding: 1.75rem 0 1.75rem;
  background-color: #050505;
}
.group_5 {
  padding: 0.81rem 0 0.13rem;
  width: 75rem;
  max-width: 100%;
}
.text_14 {
  color: #ffffff;
  font-size: 2rem;
  font-family: Poppins;
  font-weight: 700;
  line-height: 2rem;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
  max-width: 100%;
  text-transform: uppercase;
}
.text-wrapper_2,
.text-wrapper_3,
.text-wrapper_4,
.text-wrapper_5,
.text-wrapper_6 {
  padding: 0.5rem 1.5rem;
  border: 1px solid #ffffff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.text-wrapper_2:hover,
.text-wrapper_3:hover,
.text-wrapper_4:hover,
.text-wrapper_5:hover,
.text-wrapper_6:hover {
  border-color: #ffcc32;
}

.text-wrapper_2:hover span,
.text-wrapper_3:hover span,
.text-wrapper_4:hover span,
.text-wrapper_5:hover span,
.text-wrapper_6:hover span {
  color: #ffcc32;
}

.text-wrapper_2.active,
.text-wrapper_3.active,
.text-wrapper_4.active,
.text-wrapper_5.active,
.text-wrapper_6.active {
  background-color: #ffcc32;
  border: 1px solid #ffcc32;
}

.text-wrapper_2.active span,
.text-wrapper_3.active span,
.text-wrapper_4.active span,
.text-wrapper_5.active span,
.text-wrapper_6.active span {
  color: #000000;
}

.text-wrapper_2 {
  padding: 0.5rem 0;
  background-color: #ffcc32;
  border-radius: 9.38rem;
  width: 2.75rem;
  height: 1.38rem;
}
.text-wrapper_3 {
  padding: 1rem 0;
  background-color: #ffcc32;
  border-radius: 18.75rem;
  width: 9.88rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.text-wrapper_3:hover {
  background-color: #D6AB2A;
}
.text_16 {
  font-weight: 600;
  /* line-height: 0.35rem; */
}
.text-wrapper_4 {
  padding: 0.5rem 0;
  border-radius: 9.38rem;
  width: 2.94rem;
  height: 1.38rem;
  border-left: solid 0.031rem #ffffff;
  border-right: solid 0.031rem #ffffff;
  border-top: solid 0.031rem #ffffff;
  border-bottom: solid 0.031rem #ffffff;
}
.text_17 {
  font-weight: 600;
  line-height: 0.31rem;
  color: #000;
}
.text-wrapper_5 {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  padding: 0.718rem 2rem;
  border-radius: 9.38rem;
  border: 1px solid #ffffff;
  background-color: transparent;
}
.font_7 {
  font-size: 0.44rem;
  font-family: Poppins;
  line-height: 0.45rem;
  font-weight: 600;
  color: #ffffff;
}
.text_18 {
  line-height: 0.46rem;
}
.text-wrapper_6 {
  padding: 0.5rem 0 0.38rem;
  border-radius: 9.38rem;
  width: 3.91rem;
  height: 1.38rem;
  border-left: solid 0.031rem #ffffff;
  border-right: solid 0.031rem #ffffff;
  border-top: solid 0.031rem #ffffff;
  border-bottom: solid 0.031rem #ffffff;
}
.text_19 {
  line-height: 0.44rem;
}
.grid {
  /* height: 40.88rem; */
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  row-gap: 0;
  column-gap: 0.67rem;
}
.grid-item {
  padding: 0.66rem 0;
  height: 18rem;
  /* width: 6.75rem; */
}
.group_6 {
  position: relative;
  overflow: hidden;
}

.group_6 .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.group_6:hover .overlay {
  opacity: 1;
}

.text-wrapper_3,
.text-wrapper_4 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.text-wrapper_3 {
  top: 40%;
}

.text-wrapper_4 {
  top: 55%;
}

.group_6:hover .text-wrapper_3,
.group_6:hover .text-wrapper_4 {
  opacity: 1;
}

.text-wrapper_3 {
  padding: 0.5rem 1.5rem;
  background-color: #ffcc32;
  border-radius: 4px;
}

.text-wrapper_4 {
  padding: 0.5rem 1.5rem;
  background-color: transparent;
  border: 1px solid #ffffff;
  border-radius: 4px;
}

.section_6 {
  padding: 0.5rem 0.25rem 8.13rem;
  border-radius: 0.63rem;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/1.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 13.5rem;
  height: 18rem;
}
.image_7 {
  border-radius: 9.38rem;
  width: 1.625rem;
  height: 1.625rem;
}
.section_11 {
  padding: 0.16rem 0.31rem;
  /* background-color: #0000004d; */
  border-radius: 9.38rem;
  height: 1.625rem;
  width: 3.825rem;
}
.image_8 {
  width: 1rem;
  height: 1rem;
}
.font_8 {
  font-size: 0.75rem;
  font-family: Poppins;
  line-height: 1.25rem;
  color: #ffcc32;
}
.font_11 {
  /* font-size: 0.38rem; */
  font-family: Poppins;
  font-weight: 700;
  /* line-height: 0.39rem; */
  /* color: #ffffffcc; */
}
.text_26 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.group_7 {
  margin-top: 0.38rem;
}
.grid-item_2 {
  padding: 0.66rem 0;
  width: 100%;
}
.view {
  margin-right: 0.31rem;
}
.section_8 {
  padding: 0.5rem 0.25rem 8.44rem;
  border-radius: 0.63rem;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/3.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 13.5rem;
  height: 18rem;
}
.text-wrapper_7 {
  padding: 0.25rem 0;
  /* background-color: #0000004d; */
  border-radius: 9.38rem;
  width: 2.875rem;
  height: 1.625rem;
}
.font_9 {
  font-size: 0.75rem;
  font-family: Poppins;
  line-height: 1.25rem;
  color: #ffcc32;
}
.text_20 {
  line-height: 0.26rem;
}
.text_27 {
  margin-top: 0.81rem;
  /* line-height: 0.29rem; */
}
.group_8 {
  margin-top: 0.5rem;
}
.section_7 {
  padding: 0.5rem 0.25rem 8.13rem;
  border-radius: 0.63rem;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/2.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 13.5rem;
  height: 18rem;
}
.text_21 {
  line-height: 0.26rem;
}
.font_10 {
  /* font-size: 0.5rem; */
  font-family: Poppins;
  /* line-height: 0.4rem; */
  font-weight: 700;
  /* color: #ffffff; */
}
.text_9 {
  text-transform: uppercase;
}
.text_24 {
  margin-top: 0.81rem;
  /* line-height: 0.36rem; */
}
.text_22 {
  margin-top: 0.81rem;
}
.text_23 {
  line-height: 0.36rem;
}
.text_15 {
  color: #040415;
  line-height: 0.31rem;
}
.text_13 {
  line-height: 1rem;
}
.text_11 {
  margin-left: 0.063rem;
}
.text_10 {
  color: #ffcc32;
  font-size: 1.25rem;
  font-family: Poppins;
  font-weight: 600;
  line-height: 1rem;
}
.text_28 {
  margin-top: 0.88rem;
  line-height: 0.26rem;
}
.group_9 {
  margin-top: 0.5rem;
}
.section_9 {
  padding: 0.5rem 0.25rem 8.44rem;
  border-radius: 0.63rem;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/4.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 13.5rem;
  height: 18rem;
}
.font_12 {
  font-size: 0.38rem;
  font-family: Poppins;
  line-height: 0.38rem;
  color: #ffffffcc;
}
.text_29 {
  margin-top: 0.88rem;
}
.group_10 {
  margin-top: 0.38rem;
}
.section_10 {
  padding: 0.5rem 0.25rem 8.44rem;
  border-radius: 0.63rem;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/5.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 13.5rem;
  height: 18rem;
}
.text_25 {
  line-height: 0.36rem;
}
.text_30 {
  /* margin-top: 0.81rem; */
  line-height: 0.29rem;
}
.group_11 {
  margin-top: 0.5rem;
}
.text_31 {
  line-height: 0.36rem;
}
.text_33 {
  /* margin-top: 0.81rem; */
}
.group_12 {
  margin-top: 0.38rem;
}
.text_34 {
  margin-top: 0.88rem;
  line-height: 0.26rem;
}
.group_13 {
  margin-top: 0.5rem;
}
.text_35 {
  margin-top: 0.84rem;
}
.group_14 {
  margin-top: 0.38rem;
}
.text_32 {
  line-height: 0.36rem;
}
.text_36 {
  margin-top: 0.81rem;
  line-height: 0.29rem;
}
.group_15 {
  margin-top: 0.5rem;
}
.text_37 {
  line-height: 0.36rem;
}
.text_39 {
  margin-top: 0.81rem;
}
.group_16 {
  margin-top: 0.38rem;
}
.text_40 {
  margin-top: 0.88rem;
  line-height: 0.26rem;
}
.group_17 {
  margin-top: 0.5rem;
}
.text_41 {
  margin-top: 0.88rem;
}
.group_18 {
  margin-top: 0.38rem;
}
.text_38 {
  line-height: 0.36rem;
}
.text_42 {
  margin-top: 0.81rem;
  line-height: 0.29rem;
}
.group_19 {
  margin-top: 0.5rem;
}
.text_43 {
  line-height: 0.35rem;
}
.font_13 {
  font-size: 0.5rem;
  font-family: Poppins;
  line-height: 0.5rem;
  font-weight: 700;
  color: #040415;
}
.text_44 {
  line-height: 0.37rem;
}
.text_45 {
  line-height: 0.4rem;
}
.text_46 {
  line-height: 0.51rem;
}
.text_47 {
  line-height: 0.36rem;
}
.divider {
  background-color: #040415;
  height: 0.031rem;
  margin-bottom: 1.25rem;
}
.text_48 {
  color: #040415;
  line-height: 0.39rem;
}

.text-wrapper:hover {
  background-color: #D6AB2A;
}
.secound_title{
  white-space: nowrap;         /* 禁止文本换行 */
  overflow: hidden;            /* 隐藏超出容器的部分 */
  text-overflow: ellipsis;     /* 显示省略号 */
  width: 200px;                /* 设置容器的宽度 */
  display: block;  
  line-height: 1rem;
  cursor: pointer;
}
.text-wrapper_3_2{
  top: 40%;
  padding: 1rem 0;
  background-color: #ffcc32;
  border-radius: 18.75rem;
  width: 9.88rem;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #000 !important;
  border: 1px solid #ffcc32;
}
.text-wrapper_3_2 span{
  color: #000 !important;
  line-height: 0.58rem !important; 
}
.text-wrapper_4_2 {
  top: 60%;
  padding: 1rem 0;
  border-radius: 18.75rem;
  width: 9.88rem;
  height: 2.75rem;
  border: solid 0.063rem #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
}
.font_444{
  color: #000 !important;
}
.footer-link:hover{
  color: #ffcc32 !important;
}
.show_pc{
  display: none;
}
/* .section_3{
  display: block;
} */
/* 添加媒体查询来控制导航显示 */
@media screen and (max-width: 768px) {
  .mt_99 {
    overflow-x: auto;  /* 允许横向滚动 */
    -webkit-overflow-scrolling: touch;  /* 使iOS滚动更流畅 */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    padding-bottom: 10px;  /* 为滚动条预留空间 */
  }

  /* 隐藏 Webkit 浏览器的滚动条 */
  .mt_99::-webkit-scrollbar {
    display: none;
  }

  /* 调整内部元素的间距，使其在移动端更紧凑 */
  .text-wrapper_5 {
    flex-shrink: 0;  /* 防止元素被压缩 */
    margin-left: 1rem !important;  /* 覆盖原有的 ml-9-5 */
  }

  .text-wrapper_5:first-child {
    margin-left: 0 !important;
  }
  .show_pc{
    display: none;
  }
  .section_5 {
  padding: 0 0 1.75rem;
}
  .group_23 {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
  }
  .desktop-nav {
    display: none;
  }
  
  .mobile-nav-container {
    display: block;
  }

  .section_3 {
    display: none;
  }

  .group_4 {
    display: none;
  }

  .secound_title {
    width: 160px;
  }

  .grid-item_2 {
    display: none;
  }

  .mt-20 {
    margin-top: 2rem;
    overflow-x: auto;
  }

  .section {
    padding: 2.34rem 0 3rem;
    background-size: cover;
    background-position: center;
  }

  .section_6,
  .section_7,
  .section_8,
  .section_9,
  .section_10, .section_11, .section_12, .section_13, .section_14, .section_15, .section_16, .section_17, .section_18, .section_19, .section_20{
    width: 11rem !important;
    height: 14.4375rem !important;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
  }

  .grid-item {
    height: auto;
  }

  .mt-9-5 {
    padding-left: 1.3rem;
  }

  .text-wrapper_5 {
    padding: 0.5rem 1.5rem;
  }

  .text_14 {
    font-size: 1.25rem;
    margin-left: 1rem;
  }

  .text-wrapper {
    padding: 1rem 0;
  }

  .group_2 {
    width: 24rem;
    padding: 1.625rem 0.75rem;
  }

  .text_10 {
    font-size: 0.625rem;
  }

  .font_5 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .group_3 {
    width: 23rem;
  }

  .mt-11-5 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .ml-251-5 {
    margin-left: 0;
  }
}

@media screen and (min-width: 769px) {
  .mobile-nav-container {
    display: none;
  }
  
  .desktop-nav {
    display: flex;
  }
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
  .section {
    padding: 2.34rem 0 5rem;
    background-size: cover;
    background-position: center;
  }
}

@media screen and (max-width: 480px) {
  .section {
    padding: 0;
    background-size: cover;
    background-position: center;
  }
}
/* 添加过渡动画相关的样式 */
.text-wrapper_5 {
}

.text-wrapper_5.active {
  background-color: #ffcc32;
  border-color: #ffcc32;
  color: #000;
  animation: backgroundFade 0.6s ease-in-out;
}

@keyframes backgroundFade {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: #ffcc32;
  }
}

.text-wrapper_5:hover span {
  color: #ffcc32;
}

.text-wrapper_5.active span {
  color: #000;
}

/* 添加点击时的动画效果 */
.text-wrapper_5:active {
  transform: scale(0.95);
}

/* 添加新的 section 类 */
.section_12 {
  padding: 0.5rem 0.25rem 8.13rem;
  border-radius: 0.63rem;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/6.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 13.5rem;
  height: 18rem;
}

.section_13 {
  padding: 0.5rem 0.25rem 8.44rem;
  border-radius: 0.63rem;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/7.webp');
  background-size: 100%;
  background-repeat: no-repeat;
  width: 13.5rem;
  height: 18rem;
}

.section_14 {
  padding: 0.5rem 0.25rem 8.13rem;
  border-radius: 0.63rem;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/8.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 13.5rem;
  height: 18rem;
}

.section_15 {
  padding: 0.5rem 0.25rem 8.44rem;
  border-radius: 0.63rem;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/9.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  width: 13.5rem;
  height: 18rem;
}

.section_16 {
  padding: 0.5rem 0.25rem 8.44rem;
  border-radius: 0.63rem;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/10.webp');
  background-size: 100%;
  background-repeat: no-repeat;
  width: 13.5rem;
  height: 18rem;
}

.section_17 {
  padding: 0.5rem 0.25rem 8.13rem;
  border-radius: 0.63rem;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/11.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 13.5rem;
  height: 18rem;
}

.section_18 {
  padding: 0.5rem 0.25rem 8.44rem;
  border-radius: 0.63rem;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/12.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 13.5rem;
  height: 18rem;
}

.section_19 {
  padding: 0.5rem 0.25rem 8.13rem;
  border-radius: 0.63rem;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/13.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 13.5rem;
  height: 18rem;
}

.section_20 {
  padding: 0.5rem 0.25rem 8.44rem;
  border-radius: 0.63rem;
  background-image: url('../../assets/images/optimized/pages/Portfolio/images/14.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 13.5rem;
  height: 18rem;
}