html,
body {
  background: #f5f5f5;
  overflow-x: hidden;
}

body {
  font-size: 12px;
}

@font-face {
  font-family: 'alibabafont';
  src: url('../font/alibababold.woff') format('woff');
}
@font-face {
  font-family: 'newFont';
  src: url('../font/SourceHanSansSC-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'lightFont';
  src: url('../font/Alibaba-PuHuiTi-Light.ttf') format('truetype');
}
.top-banner {
  width: 100%;
  height: 7.6rem;
  background: url(../join_images/kv.jpg) no-repeat center;
  background-size: cover;
  position: relative;
  margin: 0 auto 0;
  overflow: hidden;
}

.topNav {
  width: 12.5rem;
  overflow: hidden;
  margin: 0.31rem auto 0;
  display: flex;
  justify-content: space-between;
  position:relative;
  z-index:1;
}

.logo {
  display: block;
  width: 1.12rem;
}

.nav-list {
  font-size: 0.18rem;
  color: #fff;
  display: flex;
  font-family: 'newFont';
}

.nav-list a {
  color: #fff;
  margin-right: 0.22rem;
  position: relative;
  display: inline-block;
  padding-bottom: 0.04rem;
  text-decoration: none;
  border-bottom: none;
}

.nav-list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.02rem;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.nav-list a:hover::after {
  transform: scaleX(1);
}

.center-txt {
  width: 100%;
  position: absolute;
  top: 3.6rem;
  text-align: center;
  letter-spacing: 0.04rem;
  font-family: 'newFont';
  z-index:1;
}

.center-txt div:nth-child(1) {
  font-size: 0.58rem;
  color: #fff;
  font-weight: bold;
}

.center-txt div:nth-child(2) {
  font-size: 0.2rem;
  color: #fff;
  margin-top: 0.45rem;
}
#video {
  width:100%;
  height:100%;
  object-fit: cover;
  position:absolute;
  left:0;
  top:0;
}
.join-type {
  width: 9rem;
  /* overflow: hidden; */
  position: relative;
  margin: 0.93rem auto 0;
}
.join-type-di{
  width:100%;
  height:12.07rem;
  background:url(../join_images/type_di.png) no-repeat center;
  background-size:cover;
  position:absolute;
  left:0;
  top:8.21rem;
}
.join-title {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.join-title-clip {
  overflow: hidden;
  position: relative;
}

.join-title-clip .join-pic,
.join-title-clip .join-title-txt,
.join-title-clip .join-jian {
  will-change: transform;
  transform: translate3d(0, 120%, 0);
}

.join-title.is-show .join-title-clip-txt .join-title-txt {
  animation: joinTitleTextMove 1s cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}

.join-title.is-show .join-title-clip-pic .join-pic {
  animation: joinTitleTextMove 1s cubic-bezier(0.05, 0.7, 0.1, 1) 0.1s forwards;
}

.join-title.is-show .join-title-clip-jian .join-jian {
  animation: joinTitleTextMove 1.1s cubic-bezier(0.05, 0.7, 0.1, 1) 0.2s forwards;
}

@keyframes joinTitleTextMove {
  0% {
    transform: translate3d(0, 120%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.join-pic {
  display: block;
  width: 8.13rem;
  margin-left: 0.0375rem;
}

.join-title-txt {
  font-size: 0.495rem;
  color: #be3a34;
  font-family: 'alibabafont';
  margin-top: -0.2625rem;
  line-height: 0.495rem;
}

.join-jian {
  display: block;
  width: 0.705rem;
  margin-top: 0.135rem;
}

.join-type-list {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 0.9825rem auto 0;
  display: flex;
  justify-content: space-between;
}

.join-card {
  display: block;
  width: 2.8125rem;
  height: 5.0175rem;
  border-radius: 0.2925rem;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  border: 0.0075rem solid #f1d7d6;
}

.join-card-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4.3275rem;
  overflow: hidden;
  z-index: 5;
}

.join-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transition: transform 0.45s ease;
}

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

.join-card-mask {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.11rem;
  border-radius: 0.2925rem;
  z-index: 2;
  overflow: hidden;
  transition: height 0.45s ease, background-color 0.45s ease, z-index 0s linear 0.45s;
}
.join-card-mask i{
  display: block;
  width:100%;
  height:1.0125rem;
  background:url(../join_images/new_di.png) no-repeat center;
  background-size:cover;
  position:absolute;
  left:0;
  bottom:0;
}
.join-card-mask::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../join_images/hover.png) no-repeat center;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.join-card:hover .join-card-mask {
  height: 100%;
  background-color: transparent;
  border-radius: 0.2925rem;
  z-index: 6;
  transition: height 0.45s ease, background-color 0.45s ease, z-index 0s;
}

.join-card:hover .join-card-mask::after {
  opacity: 1;
}

.join-card-en {
  position: absolute;
  left: 0.195rem;
  top: 0.21rem;
  font-size: 0.255rem;
  font-weight: bold;
  line-height: 1.15;
  letter-spacing: 0.0075rem;
  color: #be3a34;
  z-index: 6;
  transition: color 0.45s ease;
  font-family: 'newFont';
}

.join-card:hover .join-card-en {
  color: #fff;
}

.join-card-cn {
  position: absolute;
  left: 0.255rem;
  top: 4.5rem;
  z-index: 3;
  transition: top 0.45s ease, z-index 0s linear 0.45s;
}

.join-card:hover .join-card-cn {
  bottom: auto;
  top: 0.93rem;
  z-index: 6;
  transition: top 0.45s ease, z-index 0s;
}

.join-card-cn-text {
  display: block;
  font-size: 0.225rem;
  font-weight: bold;
  color: #fff;
  font-family: 'alibabafont', sans-serif;
  line-height: 1;
}

.join-card-cn-line {
  display: block;
  width: 0.465rem;
  height: 0.0225rem;
  background: #fff;
  margin-top: 0.045rem;
  transition: margin-top 0.45s ease;
}

.join-card:hover .join-card-cn-line {
  margin-top: 0.09rem;
}

.join-card-btn {
  position: absolute;
  right: 0.2325rem;
  bottom: 0.165rem;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 0.18rem;
  background: #fff;
  z-index: 3;
  overflow: hidden;
  transition: width 0.45s ease, z-index 0s linear 0.45s;
}

.join-card:hover .join-card-btn {
  width: 0.9675rem;
  z-index: 6;
  transition: width 0.45s ease, z-index 0s;
}

.join-card-btn-label {
  position: absolute;
  right: 0.315rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.1125rem;
  font-weight: bold;
  color: #be3a34;
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-width 0.4s ease;
  font-family: 'lightFont';
}

.join-card:hover .join-card-btn-label {
  opacity: 1;
  max-width: 0.6rem;
  transition: opacity 0.35s ease 0.08s, max-width 0.45s ease;
}

.join-card-btn-icon {
  position: absolute;
  right: 0.105rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.15rem;
  height: 0.15rem;
  background: url(../join_images/icon.png) no-repeat center;
  background-size: cover;
  flex-shrink: 0;
  box-sizing: border-box;
}

.join-card-img[src=""] {
  opacity: 0;
}

.join-about {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 1.53rem auto 0;
}

.join-wrap {
  width: 9rem;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  z-index:1;
}

.join-wrap .join-pic {
  display: block;
  width: 3.49rem;
  margin-left: 0;
}

.join-wrap .join-title-txt {
  font-size: 0.495rem;
  color: #be3a34;
  font-family: 'alibabafont';
  margin-top: -0.27rem;
  line-height: 0.495rem;
}

.join-culture {
  display: block;
  width: 7.815rem;
  margin: 0.705rem auto 0;
  opacity: 0;
  transform: translateY(0.45rem);
}

.join-culture.is-show {
  animation: joinCultureRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes joinCultureRise {
  0% {
    opacity: 0;
    transform: translateY(0.45rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.culture-main {
  width: 100%;
  height: 5.25rem;
  overflow: hidden;
  position: relative;
  margin: 0.705rem auto 0;
}

.culture-bg {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(0.6rem);
}

.culture-desc {
  width: 10.5rem;
  font-size: 0.18rem;
  color: #fff;
  margin: 0.45rem auto 0;
  position: relative;
  z-index: 1;
  font-family: 'lightFont';
  opacity: 0;
  transform: translateY(0.375rem);
}

.culture-desc p {
  line-height: 0.3rem;
  text-indent: 0.33rem;
}

.culture-main.is-show .culture-bg {
  animation: cultureBgRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.culture-main.is-show .culture-desc {
  animation: cultureDescRise 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s forwards;
}

@keyframes cultureBgRise {
  0% {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cultureDescRise {
  0% {
    opacity: 0;
    transform: translateY(0.375rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.game-matrix{
  margin-top:1.185rem;
  position:relative;
  z-index:1;
}
.game-matrix:after{
  display:block;
  content:'';
  width:100%;
  height:10.58rem;
  background:url(../join_images/game_di.png) no-repeat center;
  background-size:100% 100%;
  position:absolute;
  left:0;
  top:-0.59rem;
}
.game-matrix-list {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.825rem auto 0;
  overflow: hidden;
  position:relative;
  z-index:2;
}

.game-matrix-item {
  display: block;
  width: 1.0425rem;
  height: 3.75rem;
  transform: skewX(-14deg);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: width 0.45s ease;
  flex-shrink: 0;
  margin: 0 0.0375rem;
}

.game-matrix-item:nth-child(even) {
  margin-top: 0.495rem;
  margin-right: 0.1125rem;
}

.game-matrix-item.active {
  width: 1.8675rem;
}
/* 反向倾斜，抵消外层 skew，使图片/文字保持直立 */
.game-matrix-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.525rem;
  right: -0.525rem;
  height: 100%;
  transform: skewX(14deg);
}

.game-matrix-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}


.game-matrix-img {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: auto;
  /* 按展开后 inner 宽度固定，避免随边框变宽而放大/位移 */
  min-width: 2.9175rem;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center center;
}
.game-matrix-mask {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(to top, rgba(190, 58, 52, 0.96) 0%, rgba(190, 58, 52, 0.8) 40%, rgba(190, 58, 52, 0.4) 70%, transparent 100%);
  z-index: 2;
  transition: height 0.45s ease;
  pointer-events: none;
}

.game-matrix-item.active .game-matrix-mask {
  height: 100%;
}
.game-matrix-en {
  display: block;
  position: absolute;
  left: 50%;
  top: 0.12rem;
  width: 1.53rem;
  height: 1.0125rem;
  margin-left: -0.3525rem;
  z-index: 3;
  opacity: 0;
  transform: translateY(-0.15rem);
  transition: opacity 0.4s ease, transform 0.45s ease;
  pointer-events: none;
}

.game-matrix-item.active .game-matrix-en {
  opacity: 1;
  transform: translateY(0);
}
.game-matrix-info {
  position: absolute;
  left: 36%;
  bottom: 0.1875rem;
  transform: translate(-50%, 0.18rem);
  width: 1.53rem;
  z-index: 3;
  color: #fff;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.45s ease;
  pointer-events: none;
}

.game-matrix-item.active .game-matrix-info {
  opacity: 1;
  transform: translate(-50%, 0);
}
.game-matrix-cn {
  font-size: 0.21rem;
  font-weight: bold;
  font-family: 'alibabafont', sans-serif;
  line-height: 1.2;
  margin: 0;
}

.game-matrix-lines {
  margin: 0.0375rem 0 0.06rem;
}

.game-matrix-lines span {
  display: block;
  width: 0.4725rem;
  height: 0.03rem;
  background: #fff;
}

.game-matrix-desc {
  font-size: 0.105rem;
  line-height: 1.4;
  opacity: 0.92;
  font-family: 'lightFont';
}

.game-matrix-arrow {
  position: absolute;
  right: 1.0875rem;
  bottom: 0.21rem;
  width: 0.1575rem;
  height: 0.1725rem;
  z-index: 3;
  opacity: 0;
  transform: translateY(0.12rem);
  transition: opacity 0.4s ease, transform 0.45s ease;
  pointer-events: none;
  background: url(../join_images/newja.png) no-repeat center;
  background-size: 0.1575rem 0.1725rem;
}

.game-matrix-item.active .game-matrix-arrow {
  opacity: 1;
  transform: translateY(0);
}
.join-us {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 1.95rem;
}
.join-us:after{
  display:block;
  content:'';
  width:100%;
  height:13.91rem;
  background:url(../join_images/join_di.png) no-repeat center;
  background-size:cover;
  position: absolute;
  left:0;
  top:-1.76rem;
}
.join-us .join-pic {
  width: 5.46rem;
  margin-left: 0;
}

.join-us .join-title-txt {
  margin-top: -0.315rem;
}

.join-us-main {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 0 auto 0;
  display: flex;
  justify-content: space-between;
}

.join-us-tab {
  width: 1.965rem;
  overflow: hidden;
  position: relative;
}

.join-us-tab>div {
  width: 100%;
  height: 0.795rem;
  background: #fff;
  position: relative;
  transition: height 0.45s ease, background-color 0.45s ease;
  overflow: hidden;
  cursor: pointer;
  margin-top: 0.195rem;
  opacity: 0;
  transform: translateX(-0.18rem);
}

.join-us-tab>div:nth-child(1) {
  margin-top: 0.63rem;
}

/* 滚动入场：左侧 tab 依次淡入，首项再展开为 active */
.join-us-main.is-show .join-us-tab>div {
  animation: joinTabIn 0.55s ease forwards;
}
.join-us-main.is-show .join-us-tab>div:nth-child(1) { animation-delay: 0s; }
.join-us-main.is-show .join-us-tab>div:nth-child(2) { animation-delay: 0.08s; }
.join-us-main.is-show .join-us-tab>div:nth-child(3) { animation-delay: 0.16s; }
.join-us-main.is-show .join-us-tab>div:nth-child(4) { animation-delay: 0.24s; }

.join-us-main.is-show .join-us-tab>div.active {
  height: 2.055rem;
  background: #be3a34;
}

.join-us-tab .join-us-title {
  position: absolute;
  left: 0.105rem;
  top: 0.135rem;
  margin: 0;
  font-size: 0.2175rem;
  color: #be3a34;
  line-height: 0.2175rem;
  font-family: 'alibabafont';
  transition: top 0.45s ease, color 0.45s ease;
  z-index: 2;
}

.join-us-main.is-show .join-us-tab>div.active .join-us-title {
  top: 0.15rem;
  color: #fff;
}

.join-us-tab .join-us-title i {
  display: block;
  width: 0.465rem;
  height: 0.03rem;
  background: #be3a34;
  margin: 0.0375rem 0 0 0;
  transition: background-color 0.45s ease;
}

.join-us-main.is-show .join-us-tab>div.active .join-us-title i {
  background: #fff;
}

.join-us-tab .join-us-jian {
  width: 0.2025rem;
  height: 0.195rem;
  position: absolute;
  overflow: visible;
  right: 0.105rem;
  top: 0.285rem;
  z-index: 2;
  transform: rotate(0deg);
  transform-origin: center center;
  transition: top 0.45s ease, transform 0.35s ease 0.2s, filter 0.45s ease;
}

.join-us-tab .join-us-jian img {
  display: block;
  width: 100%;
  height: 100%;
}

.join-us-tab .join-us-jian img:nth-child(2) {
  display: none;
}

.join-us-main.is-show .join-us-tab>div.active .join-us-jian {
  top: 0.165rem;
  transform: rotate(45deg);
  filter: brightness(0) invert(1);
}

.join-us-tab .join-us-sma {
  font-size: 0.12rem;
  color: #be3a34;
  position: absolute;
  bottom: 0.12rem;
  left: 0.0975rem;
  font-family: 'newFont';
  z-index: 2;
  transition: bottom 0.45s ease;
}

.join-us-main.is-show .join-us-tab>div.active .join-us-sma {
  bottom: 0.21rem;
  color: #fff;
}

.join-us-tab .join-us-num {
  font-size: 0.99rem;
  font-family: 'alibabafont';
  color: #c94f44;
  line-height: 0.99rem;
  position: absolute;
  right: 0.1125rem;
  bottom: 0.0225rem;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.join-us-main.is-show .join-us-tab>div.active .join-us-num {
  opacity: 1;
}
.join-us-content {
  width: 6.6525rem;
  height: 6.27rem;
  position: relative;
  margin-top: -0.5775rem;
  overflow: hidden;
}
.join-us-content>div {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.join-us-main.is-show .join-us-content>div.active {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
.join-us-content>div .join-en-title {
  font-size: 0.3375rem;
  line-height: 0.45rem;
  position: absolute;
  left: 0.27rem;
  bottom: 2.16rem;
  color: #be3a34;
  z-index: 2;
  font-family: 'newFont';
  opacity: 0;
  transform: translateX(-0.45rem);
}
.join-us-content>div .join-cht-title {
  position: absolute;
  left: 0.255rem;
  bottom: 0.12rem;
  z-index: 1;
  opacity: 0;
  transform: translateX(-0.45rem);
}
.join-us-content>div .join-cht-title p:nth-child(1) {
  font-size: 0.24rem;
  color: #fff;
  font-weight: bold;
}
.join-us-content>div .join-cht-title i {
  display: block;
  width: 0.4875rem;
  height: 0.03rem;
  background: #fff;
  margin: 0.0375rem 0 0.105rem;
}
.join-us-content>div .join-cht-title .join-cht-last {
  font-size: 0.12rem;
  color: #fff;
  line-height: 0.15rem;
  font-family: 'lightFont';
}
.join-us-content>div .join-cht-bot {
  display: block;
  width: 6.5025rem;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(100%);
  z-index: 0;
}
.join-en-pic {
  width: 3.615rem;
  height: 5.7075rem;
  position: absolute;
  right: 0.7125rem;
  top: 0.39rem;
  z-index: 1;
}
.join-en-pic img {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.join-en-pic img:nth-child(1) {
  z-index: 2;
  transform: translateX(0.6rem);
}
.join-en-pic img:nth-child(2) {
  z-index: 1;
  transform: translateX(0.75rem);
}
.join-us-content>div:nth-child(2) .join-en-pic {
  width: 5.9325rem;
  height: 5.685rem;
  right: 0.0375rem;
  top: 0.405rem;
}
.join-us-content>div:nth-child(3) .join-en-pic {
  width: 3.8175rem;
  height: 6.0225rem;
  right: 0.465rem;
  top: 0;
}
.join-us-content>div:nth-child(4) .join-en-pic {
  width: 5.2275rem;
  height: 5.4225rem;
  right: 0;
  top: 0.645rem;
}

/* 右侧内容切换动效：入场后由 is-show 触发；切换 tab 时同样复用 */
.join-us-main.is-show .join-us-content>div.active .join-cht-bot {
  animation: joinChtBotRise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.join-us-main.is-show .join-us-content>div.active .join-en-pic img:nth-child(1) {
  /* 参考莉莉丝 to_left：长时长 ease，前段快速接近，后段缓慢轻移停稳 */
  animation: joinCharIn 3.2s ease 0.4s forwards;
}
.join-us-main.is-show .join-us-content>div.active .join-en-pic img:nth-child(2) {
  animation: joinShadowIn 2.4s ease 0.4s forwards;
}
.join-us-main.is-show .join-us-content>div.active .join-en-title {
  animation: joinTitleIn 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards;
}
.join-us-main.is-show .join-us-content>div.active .join-cht-title {
  animation: joinTitleIn 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.48s forwards;
}

@keyframes joinTabIn {
  0% {
    opacity: 0;
    transform: translateX(-0.18rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes joinChtBotRise {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes joinCharIn {
  0% {
    opacity: 0;
    transform: translateX(0.6rem);
  }
  12% {
    opacity: 1;
    transform: translateX(0.09rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes joinShadowIn {
  0% {
    opacity: 0;
    transform: translateX(0.75rem);
  }
  14% {
    opacity: 1;
    transform: translateX(0.315rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0.24rem);
  }
}
@keyframes joinTitleIn {
  0% {
    opacity: 0;
    transform: translateX(-0.45rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.join-us-banner{
  width:19.2rem;
  height:4.96rem;
  margin:2.06rem auto 0;
  position:relative;
  overflow:hidden;
  z-index:1;
}
.join-us-banner .swiper-slide{
  width:19.2rem;
  height:4.96rem;
}
.join-us-banner .swiper-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.join-us-banner-pagination{
  position:absolute;
  left:0;
  bottom:0.24rem;
  width:100%;
  text-align:center;
  z-index:10;
}
.join-us-banner-pagination .swiper-pagination-bullet{
  width:0.1rem;
  height:0.1rem;
  margin:0 0.06rem;
  background:#fff;
  opacity:0.4;
}
.join-us-banner-pagination .swiper-pagination-bullet-active{
  opacity:1;
}
.hero-benefit {
  margin-top:1.095rem;
  position:relative;
}
.hero-benefit:before{
  display:block;
  content:'';
  width:100%;
  height:11.92rem;
  background:url(../join_images/fuli_di.png) no-repeat center;
  background-size:cover;
  position:absolute;
  left:0;
  top:0;
}
.hero-benefit .join-title .join-pic{
  width:6.84rem;
}
.benefit-list{
  width:100%;
  margin-top:0.5025rem;
}
.benefit-row{
  width:100%;
  display:flex;
  justify-content:space-between;
  margin-bottom:0.165rem;
}
.benefit-row:last-child{
  margin-bottom:0;
}
.benefit-item{
  width:2.835rem;
  height:1.98rem;
  position:relative;
  overflow:hidden;
}
.benefit-mask{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:#be3a34;
  z-index:2;
  transform:scaleY(0);
  transform-origin:top center;
  pointer-events:none;
}
.benefit-card{
  width:100%;
  height:100%;
  box-sizing:border-box;
  padding:0.1875rem 0.2025rem 0.165rem;
  background:#fff;
  position:relative;
  opacity:0;
}
.benefit-title{
  font-size:0.24rem;
  line-height:0.24rem;
  color:#be3a34;
  font-weight:bold;
}
.benefit-line{
  display:block;
  width:0.45rem;
  height:0.03rem;
  background:#be3a34;
  margin:0.06rem 0 0.0975rem;
}
.benefit-icon{
  display:block;
  width:0.4125rem;
  height:0.39rem;
}
.benefit-desc{
  font-size:0.13rem;
  line-height:0.2rem;
  color:#676766;
  position:absolute;
  left:0.195rem;
  bottom:0.1875rem;
  font-family: 'lightFont';
}
.benefit-arrow{
  display:block;
  width:0.1425rem;
  height:0.1425rem;
  position:absolute;
  right:0.2025rem;
  bottom:0.1875rem;
}
/* 按排进入视口后：红遮罩自上而下出现，再自上而下消失露出白底内容 */
.benefit-row.is-show .benefit-mask{
  animation:benefitMaskInOut 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.benefit-row.is-show .benefit-card{
  animation:benefitCardShow 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.benefit-row.is-show .benefit-item:nth-child(1) .benefit-mask,
.benefit-row.is-show .benefit-item:nth-child(1) .benefit-card{ animation-delay:0s; }
.benefit-row.is-show .benefit-item:nth-child(2) .benefit-mask,
.benefit-row.is-show .benefit-item:nth-child(2) .benefit-card{ animation-delay:0.1s; }
.benefit-row.is-show .benefit-item:nth-child(3) .benefit-mask,
.benefit-row.is-show .benefit-item:nth-child(3) .benefit-card{ animation-delay:0.2s; }

@keyframes benefitMaskInOut{
  0%{
    transform:scaleY(0);
    transform-origin:top center;
  }
  40%{
    transform:scaleY(1);
    transform-origin:top center;
  }
  50%{
    transform:scaleY(1);
    transform-origin:bottom center;
  }
  100%{
    transform:scaleY(0);
    transform-origin:bottom center;
  }
}
@keyframes benefitCardShow{
  0%,
  40%{
    opacity:0;
  }
  50%,
  100%{
    opacity:1;
  }
}
.hero-growth {
  margin-top:1.455rem;
}
.hero-growth .join-title .join-pic{
  width:6.615rem;
}
.growth-list{
  width:100%;
  margin-top:0.525rem;
}
.growth-row{
  width:100%;
  height:2.94rem;
  display:flex;
  align-items:stretch;
  justify-content:start;
  margin-bottom:0.6rem;
  background:#fff;
  border-radius:0.3rem;
  box-sizing:border-box;
  position:relative;
}
.growth-row:last-child{
  margin-bottom:0;
}
.growth-row-reverse{
  flex-direction:row-reverse;
  justify-content: end;
}
.growth-pic{
  width:5.43rem;
  height:2.94rem;
  flex-shrink:0;
  overflow:hidden;
  position:relative;
  z-index:3;
  background:#f5f5f5;
  border-radius: .22rem;
}
.growth-swiper{
  width:100%;
  height:100%;
}
.growth-swiper .swiper-slide{
  width:100%;
  height:100%;
}
.growth-swiper .swiper-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.growth-row-reverse .growth-info {
  margin-right:0.375rem;
  margin-top:0.285rem;
}
.growth-info{
  width:2.85rem;
  position:relative;
  overflow:hidden;
  border-radius:0.21rem;
  align-self:stretch;
  z-index:1;
  isolation:isolate;
  margin-left:.36rem;
}
.growth-mask{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:#be3a34;
  border-radius:0.21rem;
  z-index:2;
  clip-path:inset(0 0 0 100%);
  pointer-events:none;
}
.growth-row-reverse .growth-mask{
  clip-path:inset(0 100% 0 0);
}
.growth-row-reverse .growth-en{
  font-size:0.24rem;
}
.growth-text{
  width:100%;
  height:100%;
  /* padding:0.255rem 0.36rem; */
  background:#fff;
  border-radius:0.21rem;
  opacity:0;
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:1;
}
.growth-row-reverse .growth-text{
  text-align:right;
  align-items:flex-end;
  padding:0;
}
.growth-en{
  font-size:0.27rem;
  line-height:0.375rem;
  color:#be3a34;
  font-weight:bold;
  font-family: 'newFont';
  margin-top:0.255rem;
}
.growth-cn{
  font-size:0.21rem;
  line-height:0.27rem;
  color:#be3a34;
  margin-top:0.3rem;
  font-family: 'alibabafont';
}
.growth-line{
  display:block;
  width:0.45rem;
  height:0.03rem;
  background:#be3a34;
  margin:0.045rem 0 0.105rem;
}
.growth-row-reverse .growth-desc{
  text-align:left;
}
.growth-desc{
  font-size:0.14rem;
  line-height:0.2rem;
  color:#676766;
  font-family: 'lightFont';
}
/* 文字在右：红遮罩由右至左出现再由右至左消失（clip-path 不越界） */
.growth-row.is-show .growth-mask{
  animation:growthMaskRtl 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.growth-row.is-show .growth-text{
  animation:growthTextShow 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
/* 文字在左：镜像为由左至右 */
.growth-row-reverse.is-show .growth-mask{
  animation:growthMaskLtr 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes growthMaskRtl{
  0%{
    clip-path:inset(0 0 0 100%);
    opacity:1;
  }
  40%,
  50%{
    clip-path:inset(0 0 0 0);
    opacity:1;
  }
  100%{
    clip-path:inset(0 100% 0 0);
    opacity:0;
  }
}
@keyframes growthMaskLtr{
  0%{
    clip-path:inset(0 100% 0 0);
    opacity:1;
  }
  40%,
  50%{
    clip-path:inset(0 0 0 0);
    opacity:1;
  }
  100%{
    clip-path:inset(0 0 0 100%);
    opacity:0;
  }
}
@keyframes growthTextShow{
  0%,
  40%{
    opacity:0;
  }
  50%,
  100%{
    opacity:1;
  }
}
.hero-life{
  margin-top:1.2525rem;
  position:relative;
}
.hero-life:before{
  display:block;
  content:'';
  width:100%;
  height:18.34rem;
  background:url(../join_images/life_di.png) no-repeat center;
  background-size:100% 100%;
  position:absolute;
  left:0;
  top:2.17rem;
}
.hero-life .join-title .join-pic{
  width:5.22rem;
}
.life-list{
  width:100%;
  margin-top:0.825rem;
}
.life-row{
  width:100%;
  display:flex;
  align-items:flex-end;
  margin-bottom:0.15rem;
}
.life-row2{
  align-items:flex-start;
  margin-bottom:0;
}
.life-item{
  position:relative;
  overflow:hidden;
  margin-right:0.1275rem;
}
.life-item1{ width:4.08rem; height:2.175rem; }
.life-item2{ width:2.0175rem; height:3.1725rem; }
.life-item3{ width:1.7025rem; height:2.175rem; }
.life-item4{ width:1.3125rem; height:1.8rem; margin-left:0.66rem; }
.life-item5{ width:4.125rem; height:2.88rem; }
.life-item6{ width:2.6625rem; height:1.8rem; }
.life-mask{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:#be3a34;
  z-index:3;
  transform:scaleY(0);
  transform-origin:top center;
  pointer-events:none;
}
.life-card{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  opacity:0;
  cursor:pointer;
}
.life-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.45s ease;
}
.life-hover{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  padding:0 0.135rem 0.135rem;
  box-sizing:border-box;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  background:linear-gradient(to bottom, rgba(190,58,52,0) 0%, #be3a34 100%);
  transform:translateY(100%);
  transition:transform 0.45s ease;
  z-index:2;
}
.life-name{
  font-size:0.24rem;
  line-height:0.24rem;
  color:#fff;
  font-family: 'alibabafont';
}
.life-name i{
  display:block;
  width:0.525rem;
  height:0.03rem;
  background:#fff;
  margin-top:0.06rem;
}
.life-arrow{
  display:block;
  width:0.165rem;
  height:0.165rem;
  margin-bottom:0.03rem;
  filter:brightness(0) invert(1);
}
.life-card:hover .life-img{
  transform:scale(1.08);
}
.life-card:hover .life-hover{
  transform:translateY(0);
}
/* 按排入场：红遮罩自上而下出现，再自上而下消失露出照片 */
.life-row.is-show .life-mask{
  animation:lifeMaskInOut 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.life-row.is-show .life-card{
  animation:lifeCardShow 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.life-row.is-show .life-item:nth-child(1) .life-mask,
.life-row.is-show .life-item:nth-child(1) .life-card{ animation-delay:0s; }
.life-row.is-show .life-item:nth-child(2) .life-mask,
.life-row.is-show .life-item:nth-child(2) .life-card{ animation-delay:0.1s; }
.life-row.is-show .life-item:nth-child(3) .life-mask,
.life-row.is-show .life-item:nth-child(3) .life-card{ animation-delay:0.2s; }

@keyframes lifeMaskInOut{
  0%{
    transform:scaleY(0);
    transform-origin:top center;
  }
  40%{
    transform:scaleY(1);
    transform-origin:top center;
  }
  50%{
    transform:scaleY(1);
    transform-origin:bottom center;
  }
  100%{
    transform:scaleY(0);
    transform-origin:bottom center;
  }
}
@keyframes lifeCardShow{
  0%,
  40%{
    opacity:0;
  }
  50%,
  100%{
    opacity:1;
  }
}
.hero-game-club{
  width:100%;
  overflow:hidden;
  margin-top:0.57rem;
}
.hgc-stage{
  width:100%;
  height:5.2875rem;
  margin:0 auto;
  position:relative;
}
.hgc-bg{
  position:absolute;
  left:0;
  top:1.41rem;
  width:100%;
  height:2.8275rem;
  background:url(../join_images/group_bg.png) no-repeat center;
  background-size:cover;
  z-index:1;
}
.hgc-left,
.hgc-right{
  position:absolute;
  z-index:2;
  pointer-events:none;
  will-change:transform, opacity;
}
.hgc-left{
  width:4.2825rem;
  height:5.0175rem;
  left:calc(50% - 7.05rem);
  top:0;
  opacity:0.25;
  transform:translateX(1.5rem);
}
.hgc-right{
  width:3.5325rem;
  height:3.1275rem;
  right:calc(50% - 6.375rem);
  top:1.695rem;
  opacity:0.25;
  transform:translateX(-1.5rem);
}
.hgc-main{
  position:absolute;
  left:50%;
  top:0.75rem;
  width:7.08rem;
  height:3.9675rem;
  margin-left:-3.54rem;
  z-index:3;
}
.hgc-video-box{
  position:relative;
  width:100%;
  height:100%;
  z-index:5;
  background:#000;
  overflow:hidden;
}
.hgc-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  position:relative;
  z-index:5;
}
.hgc-en{
  position:absolute;
  right:0;
  top:-0.39rem;
  font-size:0.285rem;
  line-height:0.285rem;
  color:#be3a34;
  font-family: 'newFont';
  letter-spacing:0.0075rem;
  white-space:nowrap;
  z-index:2;
  transform:translateY(0.525rem);
}
.hgc-cn{
  position:absolute;
  left:0;
  bottom:-0.57rem;
  font-size:0.27rem;
  line-height:0.27rem;
  color:#be3a34;
  font-family:'alibabafont', sans-serif;
  font-weight:bold;
  z-index:2;
  transform:translateY(-0.525rem);
}
.hgc-cn i{
  display:block;
  width:0.5775rem;
  height:0.03rem;
  background:#be3a34;
  margin-top:0.075rem;
}
.hgc-arrow{
  display:block;
  width:0.225rem;
  height:0.225rem;
  position:absolute;
  right:0;
  bottom:-0.4275rem;
  z-index:2;
  transform:translateY(-0.525rem);
}
/* 入场动效：仅 is-show 触发一次 */
.hero-game-club.is-show .hgc-en{
  animation:hgcEnRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-game-club.is-show .hgc-cn,
.hero-game-club.is-show .hgc-arrow{
  animation:hgcCnDrop 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-game-club.is-show .hgc-left{
  animation:hgcLeftOut 2s cubic-bezier(0.05, 0.65, 0.1, 1) forwards;
}
.hero-game-club.is-show .hgc-right{
  animation:hgcRightOut 2s cubic-bezier(0.05, 0.65, 0.1, 1) forwards;
}
@keyframes hgcEnRise{
  0%{
    transform:translateY(0.525rem);
  }
  100%{
    transform:translateY(0);
  }
}
@keyframes hgcCnDrop{
  0%{
    transform:translateY(-0.525rem);
  }
  100%{
    transform:translateY(0);
  }
}
/* 同向惯性：显现后继续沿原方向缓移至停点（无回弹晃动） */
@keyframes hgcLeftOut{
  0%{
    transform:translateX(2.25rem);
    opacity:0.2;
  }
  10%{
    transform:translateX(0.36rem);
    opacity:1;
  }
  100%{
    transform:translateX(0);
    opacity:1;
  }
}
@keyframes hgcRightOut{
  0%{
    transform:translateX(-2.25rem);
    opacity:0.2;
  }
  10%{
    transform:translateX(-0.36rem);
    opacity:1;
  }
  100%{
    transform:translateX(0);
    opacity:1;
  }
}
.hero-social{
  width:100%;
  height:6.735rem;
  background:url(../join_images/social_bg.jpg) no-repeat center;
  background-size:cover;
  margin-top:1.215rem;
  position:relative;
  overflow: hidden;
}
.hero-social .join-title{
  margin-top:1.125rem;
}
.hero-social .join-title .join-title-txt{
  color:#fff;
}
.hero-social .join-title .join-pic{
  width:4.1775rem;
}
.hero-social .social-list{
  width:100%;
  overflow:hidden;
  position:relative;
  margin-top:0.6rem;
  display:flex;
  justify-content: space-between;
}
.hero-social .social-list .social-list-item{
  width:1.485rem;
  overflow:hidden;
  position:relative;
  font-family: 'lightFont';
}
.hero-social .social-list .social-list-item .social-img{
  display:block;
  width:1.485rem;
  height:1.485rem;
}
.hero-social .social-list .social-list-item .social-name{
  font-size:0.18rem;
  color:#fff;
  text-align:center;
  margin-top:0.18rem;
}
.hero-social .social-list .social-list-item .social-desc{
  font-size:0.18rem;
  color:#fff;
  text-align:center;
  margin-top:0.18rem;
}
.hero-address{
  width:100%;
  height:4.77rem;
  overflow:hidden;
  position:relative;
  background:#212121;
}
.address-inner{
  width:9rem;
  height:100%;
  margin:0.7125rem auto 0;
  display:flex;
  justify-content:space-between;
}
.address-main{
  flex:1;
  min-width:0;
}
.address-title{
  font-size:0.15rem;
  line-height:0.15rem;
  color:#fff;
  font-weight:normal;
  margin:0 0 0.2625rem;
  font-family: 'lightFont';
}
.address-cols{
  display:flex;
  align-items:flex-start;
  font-family: 'lightFont';
}
.address-col{
  width:2.625rem;
}
.address-col + .address-col{
  margin-left:0.45rem;
}
.address-city{
  margin-bottom:0.135rem;
}
.address-city:last-child{
  margin-bottom:0;
}
.address-city h4{
  font-size:0.12rem;
  line-height:0.165rem;
  color:#fff;
  font-weight:normal;
  margin:0 0 0.105rem;
}
.address-line{
  display:flex;
  align-items:flex-start;
  margin:0 0 0.0375rem;
  font-size:0.105rem;
  line-height:0.165rem;
  color:#fff;
}
.address-line:last-child{
  margin-bottom:0;
}
.address-line img{
  display:block;
  width:0.135rem;
  height:auto;
  margin:0.0225rem 0.075rem 0 0;
  flex-shrink:0;
}
.address-line span{
  flex:1;
  min-width:0;
}
.address-logo{
  display:block;
  width:2.13rem;
  height:0.6rem;
  flex-shrink:0;
  margin-top:1.35rem;
}