html,
body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden; /* 页面不滚：滚轮用于切图 */
}

html {
  font-family: PingFang SC, PingFang SC;
  background: #000000;
  color: #333;
}

body {
  font-family: PingFang SC, PingFang SC;
  /* body 背景作为兜底（真正显示由 bg-stack 控制） */
  background-image: url(../image/homeBg1.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #333;
  position: relative;
}

/* ✅ 背景双层容器 */
.bg-stack {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ✅ 单层背景：默认透明 */
.bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 520ms ease, transform 520ms ease;
  will-change: opacity, transform;
}

/* 语言选择器样式 */
.language-selector {
  position: relative;
  display: inline-block;
}

.language-select-container {
  position: relative;
  display: inline-block;
}

.language-select {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  min-width: 100px;
}

/* .language-select:hover {
  background-color: rgba(255, 255, 255, 0.2);
} */

.language-icon {
  width: 26px;
  height: 26px;
  line-height: 24px;
  margin-right: 8px;
}

.current-language {
  color: white;
  font-size: 24px;
  font-weight: 500;
  line-height: 24px;
  margin-right: 8px;
}

.dropdown-icon {
  width: 24px;
  height: 24px;
  line-height: 24px;
  transition: transform 0.3s ease;
}

.dropdown-icon.rotated {
  transform: rotate(180deg);
}

.language-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  min-width: 120px;
  z-index: 1000;
}

.language-dropdown.open {
  opacity: 1;
  visibility: visible;
}

.language-popup-content {
  /* padding: 4px 0; */
}

.language-item {
  /* padding: 8px 16px; */
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 28px);
    height: 0.5px;
    background-color: #e7e7e7;
  }

  &:last-child:before {
    display: none;
  }
}

/* .language-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
} */

.language-name {
  color: rgba(17, 17, 17, 0.5);
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  padding: 8px 34px;
}

/* .language-item.selected-language {
  background-color: rgba(255, 255, 255, 0.2);
} */

.language-item.selected-language .language-name {
  color: #111111;
}

/* ✅ 激活层：淡入 + 回到正常大小 */
.bg.is-active {
  opacity: 1;
  transform: scale(1);
}

/* ✅ 内容在背景之上 */
.box {
  position: relative;
  z-index: 1;

  width: 70vw;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: 6.25vw; /* 使用6.25vw代替120px，适配1440px屏幕 */
}

/* ===== Header ===== */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.389vw 0; /* 使用1.389vw代替20px，适配1440px屏幕 */
}

.header-img {
  width: 9.25rem;
  height: 3.5rem;
}

.nav {
  display: flex;
  align-items: center;
}

.nav a {
  position: relative;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  display: inline-block;
  padding-bottom: 2px;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 25%;
  bottom: -3px;
  width: 50%;
  height: 4px;
  border-radius: 22px;
  background: #333;
}

/* 语言选择器 */
.language-selector {
  margin-right: 20px;
}

.language-dropdown {
  background: #fff;
  /* border: 1px solid #ddd; */
  border-radius: 8px;
  padding: 4px 0px;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
  font-family: PingFang SC, PingFang SC;
}

/* ===== Main ===== */
.main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  min-height: calc(100vh - 100px);
  position: relative;
}

.span1 {
  color: #fcf9f9;
  font-size: 5vw; /* 默认使用5vw，适配1440px屏幕 */
  font-weight: 600;
  line-height: 5.556vw; /* 默认使用5.556vw，适配1440px屏幕 */
}

/* .span2 {
  font-weight: 400;
  font-size: 36px;
  color: #111111;
  line-height: 80px;
  text-align: left;
} */

.p1 {
  font-weight: 500;
  font-size: 1.667vw; /* 默认使用1.667vw，适配1440px屏幕 */
  color: #fcf9f9;
  line-height: 2.778vw; /* 默认使用2.778vw，适配1440px屏幕 */
  text-align: left;
  margin: 3.958vw 0 0; /* 默认使用3.958vw，适配1440px屏幕 */
}

.intro {
  /* max-width: 607px; */
  text-align: left;
  width: 62.5vw; /* 默认使用62.5vw，适配1440px屏幕 */
  max-width: 100%;
}

.buttons {
  padding-top: 4.167vw; /* 默认使用4.167vw，适配1440px屏幕 */
  display: flex;
  gap: 1.389vw; /* 默认使用1.389vw，适配1440px屏幕 */
}

.btn,
.dynamic-link {
  width: auto;
  /* height: 74px; */
  /* border-radius: 12px; */
  /* background: #111111;
  color: #ffffff; */
  text-decoration: none;
  /* font-size: 24px; */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5.139vw; /* 默认使用5.139vw，适配1440px屏幕 */
  z-index: 12;
  /* padding: 0 15px; */
  /* border: 1px solid #b4b4b4; */
}

.btn img,
.dynamic-link img {
  margin-right: 8px;
}

.logo {
  height: 74px;
}

.btn-text-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dynamic-text {
  font-size: 12px;
  color: #ffffff;
}

/* ✅ 外壳：允许 phoneTis 超出显示，不被裁剪 */
.phones-wrap {
  position: relative;
  width: 34.722vw; /* 默认使用34.722vw，适配1440px屏幕 */
  height: 85vh;
  margin: 0 auto;
  overflow: visible;
  z-index: 2;
}

/* ✅ 轮播 viewport：只裁剪轮播内容 */
.phones {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ✅ phoneTis：覆盖在手机之上，可大于 phones */
.phone-tips {
  position: absolute;
  bottom: -6%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40.5208vw;
  height: 12.4479vw;
  object-fit: contain;
  z-index: 5;
  pointer-events: none;
}
.phone-tipsAll {
  width: 11.25vw !important; /* 默认使用11.25vw，适配1440px屏幕 */
  height: 11.25vw !important; /* 默认使用11.25vw，适配1440px屏幕 */
  width: 100%;
  height: auto;
  position: absolute;
  transform: translateX(-50%);
  animation: float 3s ease-in-out infinite;
  z-index: 5;
}
.phone-tips1 {
  left: -4.167vw; /* 默认使用-4.167vw，适配1440px屏幕 */
  top: 10.417vw; /* 默认使用10.417vw，适配1440px屏幕 */
}
.phone-tips2 {
  right: -17.361vw; /* 默认使用-17.361vw，适配1440px屏幕 */
  top: 12.5vw; /* 默认使用12.5vw，适配1440px屏幕 */
}
.phone-tips3 {
  right: -12.5vw; /* 默认使用-12.5vw，适配1440px屏幕 */
  bottom: 17.361vw; /* 默认使用17.361vw，适配1440px屏幕 */
}
/* ✅ 轮播 track */
.phones-track {
  width: 100%;
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 320ms ease;
}

.phone-box {
  width: 100%;
  /* height 由 JS 动态设置 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.phone {
  max-height: 90%;
  width: auto;
  z-index: 2;
}

/* 指示器 */
.phone-indicators {
  position: absolute;
  top: 50%;
  right: 2.083vw; /* 使用2.083vw代替30px，适配1440px屏幕 */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.694vw; /* 使用0.694vw代替10px，适配1440px屏幕 */
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 10;
}
/* PC端指示器默认显示，手机端隐藏 */
.phone-indicators-pc {
  display: flex;
}
/* 手机端指示器默认隐藏 */
.phone-indicators-mobile {
  display: none;
}

.indicator {
  width: 0.833vw; /* 使用0.833vw代替12px，适配1440px屏幕 */
  height: 0.833vw; /* 使用0.833vw代替12px，适配1440px屏幕 */
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.indicator.active {
  background-color: rgba(255, 255, 255, 1);
  transform: scale(1.2);
}

/* ===== Footer ===== */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  padding: 0.833vw; /* 使用0.833vw代替12px，适配1440px屏幕 */
  font-size: 0.972vw; /* 使用0.972vw代替14px，适配1440px屏幕 */
  height: 4.861vw; /* 使用4.861vw代替70px，适配1440px屏幕 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.footer-bottom {
  color: #365eff;
  text-decoration: none;
}

.footer p {
  font-weight: 400;
  font-size: 1.111vw; /* 使用1.111vw代替16px，适配1440px屏幕 */
  color: #ffffff;
  line-height: 1.528vw; /* 使用1.528vw代替22px，适配1440px屏幕 */
  margin: 0;
  word-break: break-all;
}

/* ===== 响应式 - PC端适配各种分辨率 ===== */
/* 1920px及以上超高清屏幕 */
@media (min-width: 1920px) {
  .span1 {
    font-size: 3.75vw; /* 72px @ 1920px */
    line-height: 4.167vw; /* 80px @ 1920px */
  }
  
  .p1 {
    font-size: 1.25vw; /* 24px @ 1920px */
    line-height: 2.083vw; /* 40px @ 1920px */
    margin: 3.0vw 0 0; /* 57px @ 1920px */
  }
  
  .buttons {
    padding-top: 3.125vw; /* 60px @ 1920px */
    gap: 1.042vw; /* 20px @ 1920px */
  }
  
  .btn, .dynamic-link {
    height: 3.854vw; /* 74px @ 1920px */
  }
  
  .phones-wrap {
    width: 26.042vw; /* 500px @ 1920px */
  }
  
  .intro {
    width: 46.875vw; /* 900px @ 1920px */
  }
  
  /* 手机提示元素适配 */
  .phone-tipsAll {
    width: 8.438vw !important; /* 162px @ 1920px */
    height: 8.438vw !important; /* 162px @ 1920px */
  }
  
  .phone-tips1 {
    left: -3.125vw; /* -60px @ 1920px */
    top: 7.813vw; /* 150px @ 1920px */
  }
  
  .phone-tips2 {
    right: -13.021vw; /* -250px @ 1920px */
    top: 9.375vw; /* 180px @ 1920px */
  }
  
  .phone-tips3 {
    right: -9.375vw; /* -180px @ 1920px */
    bottom: 13.021vw; /* 250px @ 1920px */
  }
}

/* 1680px屏幕 */
@media (max-width: 1919px) and (min-width: 1680px) {
  .span1 {
    font-size: 4.286vw; /* 72px @ 1680px */
    line-height: 4.762vw; /* 80px @ 1680px */
  }
  
  .p1 {
    font-size: 1.429vw; /* 24px @ 1680px */
    line-height: 2.381vw; /* 40px @ 1680px */
    margin: 3.405vw 0 0; /* 57px @ 1680px */
  }
  
  .buttons {
    padding-top: 3.571vw; /* 60px @ 1680px */
    gap: 1.190vw; /* 20px @ 1680px */
  }
  
  .btn, .dynamic-link {
    height: 4.405vw; /* 74px @ 1680px */
  }
  
  .phones-wrap {
    width: 29.762vw; /* 500px @ 1680px */
  }
  
  .intro {
    width: 53.571vw; /* 900px @ 1680px */
  }
  
  /* 手机提示元素适配 */
  .phone-tipsAll {
    width: 9.643vw !important; /* 162px @ 1680px */
    height: 9.643vw !important; /* 162px @ 1680px */
  }
  
  .phone-tips1 {
    left: -3.571vw; /* -60px @ 1680px */
    top: 8.929vw; /* 150px @ 1680px */
  }
  
  .phone-tips2 {
    right: -14.881vw; /* -250px @ 1680px */
    top: 10.714vw; /* 180px @ 1680px */
  }
  
  .phone-tips3 {
    right: -10.714vw; /* -180px @ 1680px */
    bottom: 14.881vw; /* 250px @ 1680px */
  }
}

/* 1440px屏幕 */
@media (max-width: 1679px) and (min-width: 1440px) {
  .span1 {
    font-size: 5vw; /* 72px @ 1440px */
    line-height: 5.556vw; /* 80px @ 1440px */
  }
  
  .p1 {
    font-size: 1.667vw; /* 24px @ 1440px */
    line-height: 2.778vw; /* 40px @ 1440px */
    margin: 3.958vw 0 0; /* 57px @ 1440px */
  }
  
  .buttons {
    padding-top: 4.167vw; /* 60px @ 1440px */
    gap: 1.389vw; /* 20px @ 1440px */
  }
  
  .btn, .dynamic-link {
    height: 5.139vw; /* 74px @ 1440px */
  }
  
  .phones-wrap {
    width: 34.722vw; /* 500px @ 1440px */
  }
  
  .intro {
    width: 62.5vw; /* 900px @ 1440px */
    max-width: 100%;
  }
}

/* 1366px屏幕 */
@media (max-width: 1439px) and (min-width: 1380px) {
  .span1 {
    font-size: 5.271vw; /* 72px @ 1366px */
    line-height: 5.857vw; /* 80px @ 1366px */
  }
  
  .p1 {
    font-size: 1.757vw; /* 24px @ 1366px */
    line-height: 2.930vw; /* 40px @ 1366px */
    margin: 4.173vw 0 0; /* 57px @ 1366px */
  }
  
  .buttons {
    padding-top: 4.392vw; /* 60px @ 1366px */
    gap: 1.464vw; /* 20px @ 1366px */
  }
  
  .btn, .dynamic-link {
    height: 5.420vw; /* 74px @ 1366px */
  }
  
  .phones-wrap {
    width: 36.603vw; /* 500px @ 1366px */
  }
  
  .intro {
    width: 65.886vw; /* 900px @ 1366px */
    max-width: 100%;
  }
  
  /* 手机提示元素适配 */
  .phone-tipsAll {
    width: 11.859vw !important; /* 162px @ 1366px */
    height: 11.859vw !important; /* 162px @ 1366px */
  }
  
  .phone-tips1 {
    left: -4.392vw; /* -60px @ 1366px */
    top: 11.000vw; /* 150px @ 1366px */
  }
  
  .phone-tips2 {
    right: -18.302vw; /* -250px @ 1366px */
    top: 13.170vw; /* 180px @ 1366px */
  }
  
  .phone-tips3 {
    right: -13.170vw; /* -180px @ 1366px */
    bottom: 18.302vw; /* 250px @ 1366px */
  }
}

/* ===== 响应式 ===== */
@media (max-width: 1380px) {
  html,
  body {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .main {
    flex-direction: column;
    text-align: center;
    height: calc(100% - 100px);
    /* padding: 0 22px; */
  }

  .header {
    padding: 38px 22px;
  }

  .span1 {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
  }

  .p1 {
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
    margin: 24px 0 0;
  }

  .box {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .language-selector {
    margin: 0;
  }
  .language-select {
    .language-icon {
      width: 16px;
      height: 16px;
    }
    .current-language {
      font-size: 16px;
      font-weight: normal;
      line-height: 24px;
    }
    .dropdown-icon {
      width: 16px;
      height: 16px;
    }
  }
  .language-dropdown {
    min-width: 71px;
  }
  .language-name {
    font-size: 12px;
    font-weight: normal;
    line-height: 24px;
    padding: 4.5px 20px;
  }
  .logo {
    height: 38px !important;
  }

  .dynamic-text {
    font-size: 7px !important;
  }

  .buttons {
    padding-top: 28px !important;
    gap: 9px !important;
  }

  .phones-wrap {
    width: 100%;
    height: auto;
    margin: 18px 0;
    overflow-x: hidden;
    position: relative;
  }
  .phone-tips {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
  }
  .phone-tipsAll {
    width: 100%;
    height: auto;
    position: absolute;
    transform: translateX(-50%);
    animation: float 3s ease-in-out infinite;
  }
  .phone-tips1 {
    width: 68px !important;
    height: 68px !important;
    left: 40px;
    top: 80px;
  }
  .phone-tips2 {
    width: 102px !important;
    height: 102px !important;
    right: -40px;
    top: 150px;
  }
  .phone-tips3 {
    width: 68px !important;
    height: 68px !important;
    right: 20px;
    bottom: 120px;
  }
  .btn,
  .dynamic-link {
    height: 44px !important;
    /* font-size: 16px !important;
    padding: 0 8px !important; */
  }

  /* 手机端水平轮播样式 */
  .phones-track {
    height: 100% !important;
    flex-direction: row !important;
    width: auto !important;
  }

  .phone-box {
    /* width: 100% !important;
    height: 100% !important; */
    flex-shrink: 0 !important;

    width: 300px;
    height: 498px;
  }
  .phones {
    width: 100%;
    height: 498px;
  }
  /* 手机端指示器改为底部水平排列 */
  .phone-indicators {
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    top: auto !important;
    right: auto !important;
  }
  /* PC端指示器在手机端隐藏 */
  .phone-indicators-pc {
    display: none !important;
  }
  /* 手机端指示器在手机端显示 */
  .phone-indicators-mobile {
    display: flex !important;
  }
  .intro {
    width: auto;
    max-width: 100%;
    padding: 0 22px;
  }
  footer {
    position: relative !important;
  }
  /* .bg.is-active {
    background-size: cover !important;
    background-attachment: scroll !important;
  } */
}

/* 禁止选择和拖动 */
* {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
/* 禁止图片拖动 */
img:not(.btn img) {
  -webkit-user-drag: none;
}
/* 按钮内部图片不阻止点击事件 */
.btn img {
  pointer-events: auto;
  -webkit-user-drag: none;
}
/* 禁止手机点击高亮 */
* {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/* 上下浮动动画 */
@keyframes float {
  0% {
    transform: translateX(-50%) translateY(0px);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
  100% {
    transform: translateX(-50%) translateY(0px);
  }
}