@import url('../css/public/styles.css');
body {
  overflow: hidden;
  margin: 0;
}
.container{
  width: 100%;
  height: 63.75rem;
  overflow: hidden;
  background-image: url('../image/bj1.webp');
  background-repeat: no-repeat;     
  background-position: center top;   
  background-size: cover;            
}
.topHeader{
  width:100%;
  margin-top: 16px;
  backdrop-filter: blur(2.5px);
  z-index: 10;
  position: relative;
  display: flex;
  justify-content: center;
}
.topHeaderSeat{
  width: 37.5rem;
  height: 52px;
  margin:0px auto;
  margin-top: 16px;
  border: 1px solid transparent;
  display: none;
}
/* 小于1440的导航栏样式 */
.smallNav{
  display: none;
  position: fixed; 
  top: 0px;
  width: 100%;
  z-index: 9999999;
}
.open_qr,.open_wxqr{
  position: relative;
  cursor: pointer;
}
.qr_popup{
  width: 13.75rem;
  height: 15.5rem;
  border-radius: 1.25rem;
  border-width: 1px;
  border: 1px solid rgba(225, 224, 239, 0.05);
  backdrop-filter: blur(100px);
  background: rgba(24, 23, 28, 1);
  position: absolute;
  left: -4rem;
  top: 44.5px;
  padding: 1.125rem;
  display: none;
  z-index: 9999;
}

.wxqr_popup{
  width: 13.75rem;
  height: 15.5rem;
  border-radius: 1.25rem;
  border-width: 1px;
  border: 1px solid rgba(225, 224, 239, 0.05);
  backdrop-filter: blur(100px);
  background: rgba(24, 23, 28, 1);
  position: absolute;
  left: -5rem;
  top: -16.5rem;
  padding: 1.125rem;
  display: none;
  z-index: 9999;
}
.smallNav.active{
  z-index: 9999;
  background-color: rgba(24, 23, 28, 0.8);
  backdrop-filter: blur(100px);
  border-bottom: 1px solid rgba(225, 224, 239, 0.05);
  transition: background-color 300ms, backdrop-filter 300ms, border-bottom 300ms;
  direction: ltr;
}
.smallNavTop{
  width: 100%;
  height: 90px;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  max-width: 1800px;
  margin: 0px auto;
  -webkit-box-pack: justify;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  direction: ltr;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 20px;
}
.smallNavLeft{
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 22px;
}

.returnBtn{
  cursor: pointer;
  padding: 2px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  background: none;
  border: none;
  display: none;
}
.returnBtn svg{
  transform: rotate(180deg);
}
.hamburger {
  position: relative;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.line {
  position: absolute;
  width: 18px;
  height: 2px;
  background-color: rgb(255, 255, 255);
  left: 0;
  transition: all 0.3s ease; 
}
.top {  }
.middle { margin-top: 14px; transform: translateY(-50%); }
.bottom {margin-top: 24px;}
.hamburger.active .top {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.hamburger.active .bottom {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}
.hamburger.active .middle {
  opacity: 0; 
}

.smallCon{
  display: none;
  color: #fff;
  z-index: 100;
  background-color: transparent;
  backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: background-color 300ms, backdrop-filter 300ms, border-bottom 300ms;
  direction: ltr;
}
.smallConTop{
  background: rgb(12, 12, 14);
  height: auto;
}
.smallConTop1{
  border-top: 1px solid rgba(24, 23, 28, 0.15);
  padding-top: 40px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-left: 32px;
  padding-right: 26px;
  transform: translateX(0); 
  transition: transform 0.3s ease;
}
.smallConTop1 a{
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  padding-bottom: 32px;
}
.smallConTwo{
  height: 100%;
}
.smallConTwo{
  max-width: 1800px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  border-top: 1px solid rgba(24, 23, 28, 0.15);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 50px;
  display: none;
  transition: transform 0.3s ease;
  transform: translateX(100%);
}
.smallConTwo-jjfa{
  max-width: 1800px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(24, 23, 28, 0.15);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 50px;
  display: none;
  transition: transform 0.3s ease;
  transform: translateX(100%);
}
.smallConTwo-gywm{
  max-width: 1800px;
  width: 100%;
  height: 100%;
  border-top: 1px solid rgba(24, 23, 28, 0.15);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 50px;
  position: fixed;
  top: 0;
  right: 0; 
  display: none;
  transition: transform 0.3s ease;
  transform: translateX(100%); 
}
.smallConTwo-zy{
  max-width: 1800px;
  width: 100%;
  height: 100%;
  border-top: 1px solid rgba(24, 23, 28, 0.15);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 50px;
  position: fixed;
  top: 0;
  right: 0; 
  display: none;
  transition: transform 0.3s ease;
  transform: translateX(100%);
}
.Two-cp-a{
  font-weight: 500;
  font-size: 28px;
  line-height: 33px;
  padding-bottom: 32px;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
  align-items: center;
}
.Two-cp-a .imgNavbar{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  padding: 9px;
  border-width: 1px;
}
.smallConbottomBox{
  height: auto;
}
.smallConbottomBox::after{
  content: "";
  display: block;
  clear: both;
  
}
.smallConbottom{
  padding-left: 32px;
  padding-right: 32px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  background: rgb(24, 23, 28) !important;
}
.smallConbottom1{
  width: 100%;
  padding: 20px 32px;
  display: flex;       
  flex-direction: row;
  -webkit-box-pack: justify;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 14px;
}
.smallConbottom1 a{
  color: rgba(255, 255, 255, 0.5);
}
.smallConbottom2 a{
  color: rgba(255, 255, 255, 0.5);
}
.smallConbottom2{
  width: 100%;
  padding: 20px 32px;
  display: flex;         
  flex-direction: row;
  -webkit-box-pack: justify;
  justify-content: space-between;
  font-size: 14px;
}
@media (max-width: 1280px) {
  .container{
    min-height: 810px;
  }
}
@media (max-width: 767px) {
  .container{
    min-height: 800px;
    background-color: #0c0c0c;
    background-image: url(https://cdn.xsolla.net/strapi-bucket-prod/home_v3_360_2d66b99604/home_v3_360_2d66b99604.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center top;
  }
  .smallConbottom1 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  .smallConbottom1 a{
    flex: 0 0 calc(50% - 10px);
  }

  .smallNavTop {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    height: auto;
  }
  .smallConTop1{
    flex-direction: column;
    display: flex;
  }
}

@media (max-width: 1438px) {
  .topHeader{
    display: none;
  }
  .topHeaderSeat {
     display: block;
  }
  .smallNavLogo{
    width: 80px;
    height: 80px;
  }
  .smallNavText{
    margin-top: 40px;
    width: 62px;
    height: 16px;
  }
  .smallNav{
    display: block;
    display: grid;
  }
}
@media (max-width: 1023px) {
  .smallNavLogo {
    width: 64px;
    height: 64px;
  }
  .smallNavText {
    margin-top: 33px;
    width: 62px;
    height: 16px;
  }

}

.topHeaderList{
  height: 3.25rem;
  min-height: 40px !important;
  padding: 14px 39px 14px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(225,224,239,0.5);
  font-size: 0.9375rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(225, 224, 239, 0.05);
  background: rgba(225, 224, 239, 0.05);
  gap: 2.5rem;
}
.topHeaderList li{
  cursor: pointer;
}
.topHeaderList li:not(:last-child):hover{
  color: rgb(225, 224, 239);
}
.navA{
  color: rgba(225,224,239,0.5);
}
.navA:hover{
  cursor: pointer;
  color: rgb(225, 224, 239);
}
.topHeaderList .logon{
  color: rgba(158, 172, 250, 0.7);
}
.topHeaderList .logon:hover{
  color: rgb(158, 172, 250);
}
.langLi{
  position: relative;
}
.langListBox{
  width: 115px;
  border-radius: 12px;
  border: 1px solid rgba(225, 224, 239, 0.05);
  background: rgba(24, 18, 28, 1);
  position: absolute;
  top: 44.5px;
  left: -15px;
  z-index: 2;
  display: none;
  backdrop-filter: blur(15px);
  text-align: center;
}
.langList{
  padding: 10px 0px;
}
.langList li{
  width: 100%;
  height: 35px;
  line-height: 35px;
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0%;
  color: rgba(225, 224, 239, 1);
}
.langList li:hover{
  background: rgba(225, 224, 239, 0.05);
  border-radius: 10px;
}
.langBox{
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}
.langLi.active .imgNavbar {
  transform: scaleY(-1);
}
.langImg1{
  width: 1.125rem;
  height: 1.125rem;
  aspect-ratio: 1/1;
}
.langImg2{
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2px;
}

.logoNavbar{
  width: 100%;
  height: 90px;
  position: relative;
}
.logoNavbarSeat{
  width: 100%;
  height: 90px;
  display: none;
}
@media (max-width: 1438px) {
  .logoNavbar{
    display: none;
  }
  .logoNavbarSeat {
      display: block;
  }
}
#logoBox{
  width: 12.4rem;
  position: absolute;
  left: 0px;
  position: relative; 
  transition: opacity 0.5s ease;
  display: inline-flex;
  gap: 1.5rem;

}
.rqCodeLi{
  position: relative;
}
.navRqCodeBox{
  width: 13.75rem;
  height: 15.5rem;
  border-radius: 1.25rem;
  border-width: 1px;
  border: 1px solid rgba(225, 224, 239, 0.05);
  backdrop-filter: blur(100px);
  background: rgba(24, 23, 28, 1);
  position: absolute;
  left: -4rem;
  top: 44.5px;
  padding: 1.125rem;
  display: none;
}
.popUpImgBox{
  width: 100%;
  height: auto;
}
.navRqCodeBoxText{
  font-weight: 400;
  font-size: 1rem;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  margin-top: 0.75rem;
}

.contactUsBox{
  width: 13.75rem;
  height: 15.5rem;
  border-radius: 1.25rem;
  border-width: 1px;
  border: 1px solid rgba(225, 224, 239, 0.05);
  backdrop-filter: blur(100px);
  background: rgba(24, 23, 28, 1);
  position: absolute;
  left: -4rem;
  top: 50px;
  padding: 1.125rem;
  display: none;
}
.contactUsBoxText{
  font-weight: 400;
  font-size: 1rem;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  margin-top: 0.75rem;
}

@keyframes staggerFade {
  0% {
      opacity: 1;
  }
  30% {
      opacity: 0.7;
  }
  60% {
      opacity: 0.9;
  }
  100% {
      opacity: 0;
  }
}
.logoShow{
  transition: opacity 200ms linear;
  opacity: 1;
}
.logoHide{ 
  transition: opacity 200ms linear;
  opacity: 0;
}
.Vector-img{
  width: 84.767px;
  height: 21.98px;
  margin-top: calc((90px - 21.98px) / 2 )
}
.navbarBox{
  width: 100%;
  height: 4rem;
  position: absolute;
  right: 0px;
  bottom: 0px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbarBox::before {
  width: 48.5rem;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(15px);
  z-index: -1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: border 0.3s, background-color 0.3s, backdrop-filter 0.1s;
  background-color: rgba(24, 23, 28, 0.8);
  border-radius: 1rem;
  opacity: 0;
}
.navbarBox.loaded::before {
  opacity: 1;
}
.navbarBox.fixed {
  width: 48.5rem;
  position: fixed;
  top: 1rem;
  left: calc((100% - 48.5rem) / 2);
  z-index: 1000;
  border-radius: 1rem;
}
.navbarBoxUl{
  font-size: 18px;
  font-weight: 700;
  
}

.navbarBoxUl li{
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #FFF;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  float: left;
}
.navbarBoxUl li{
  position: relative;
}
.navbarBoxUl li:not(:last-child){
  margin-right: 4rem;
}
.imgNavbar{
  transition: transform 0.5s ease;
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  aspect-ratio: 1 / 1;
}
.navbarBoxUl li.active .imgNavbar {
  transform: scaleY(-1); 
}
/* 关于我们下拉框 */
.aboutUsSelectBox{
  width: 36.875rem;
  height: 19.125rem;
  flex-shrink: 0;
  border-radius: 1.25rem;
  border-width: 1px;
  border: 1px solid rgba(225, 224, 239, 0.05);
  background: rgba(24, 23, 28, 0.9);
  backdrop-filter: blur(15px);
  position: absolute;
  top: 50px;
  left: -1.25rem;
  padding: 2.5rem;
  display: none;
  /* 确保子元素有自己的渲染上下文 */
  isolation: isolate;
}
.aboutUsSelectBoxText{
  width: 15rem;
  height: 4.375rem;
  line-height: 4.375rem;
  border-radius: 1.25rem;
  margin-bottom: 0.5rem;
  padding-left: 0.75rem;
  float: left;
  font-size: 1rem;
}
.aboutUsSelectBoxText:nth-of-type(odd){
  margin-right: 1.65rem;
}
.productSelectBox{
  width: 53.125rem;
  height: 19.125rem;
  border-radius: 1.25rem;
  border-width: 1px;
  background-color: rgba(24, 23, 28, 0.9);
  border: 1px solid rgba(225, 224, 239, 0.05);
  backdrop-filter: blur(15px);
  position: absolute;
  top: 50px;
  left: -1.25rem;
  padding: 2.5rem;
  display: none;
}
.productSelectBoxText{
  width: 23.125rem;
  height: 4.375rem;
  flex-shrink: 0;
  line-height: 4.375rem;
  border-radius: 1.25rem;
  margin-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  float: left;
  display: flex;
  align-items: center;
}
.productSelectBoxText:nth-of-type(odd){
  margin-right: 1.65rem;
}
.productImg{
  display: inline-block;
  width: 2.87856rem;
  height: 2.875rem;
  line-height: 3.4375rem;
  text-align: center;
  border-radius: 12.5px;
  border-width: 1px;
  background: transparent;
  border: 1px solid rgba(225, 224, 239, 0.05);
  margin-right: 6px;
}
.productImg img{
  width: 1.5rem;
  height: 1.5rem;
}
/* 资源下拉框 */
.resourcesSelectBox{
  width: 36.875rem;
  height: 24rem;
  flex-shrink: 0;
  border-radius: 1.25rem;
  background: rgba(24, 23, 28, 0.9);
  border: 1px solid rgba(225, 224, 239, 0.05);
  backdrop-filter: blur(15px);
  position: absolute;
  top: 50px;
  left: -1.25rem;
  padding: 2.5rem;
  display: none;
}
.resourcesSelectBoxText{
  width: 15rem;
  height: 4.375rem;
  line-height: 4.375rem;
  border-radius: 1.25rem;
  margin-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  float: left;
}
.resourcesSelectBoxText:nth-of-type(odd){
  margin-right: 1.65rem;
}
/* 解决方案 */
.schemeSelectBox{
  width: 78.125rem;
  height: 37rem;
  flex-shrink: 0;
  border-radius: 1.25rem;
  border-width: 1px;
  background: rgba(24, 23, 28, 0.9);
  border: 1px solid rgba(225, 224, 239, 0.05);
  backdrop-filter: blur(15px);
  position: absolute;
  top: 50px;
  left: -20.625rem;
  padding: 2.5rem;
  z-index: 5;
  display: none;
}
.schemeTop{
  width: 100%;
  height: 27.875rem;
  border-bottom:1px solid rgba(225, 224, 239, 0.05);
}
.schemeTopTextBox{
  border-width: 1px;
  float: left;
  margin-right: 1.25rem;
}
.schemeTopTextBox1 h2,.schemeTopTextBox1 .schemeSelectBoxText{
  width: 22.5rem;
}
.schemeTopTextBox2 h2,.schemeTopTextBox2 .schemeSelectBoxText{
  width: 15rem;
}
.schemeTopTextBox3 h2,.schemeTopTextBox3 .schemeSelectBoxText{
  width: 18.125rem;
}
.schemeTopTextBox4 h2,.schemeTopTextBox4 .schemeSelectBoxText{
  width: 11.875rem;
}
.schemeTopTextBox h2{
  height: 4.375rem;
  line-height: 4.375rem;
  border-width: 1px;
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0%;
  display: flex;
  align-items: center;
  padding-left: 0.75rem;
  margin-bottom: 0.25rem;
  cursor: default;
}
.schemeSelectBoxText{
  height: 3.5rem;
  line-height: 3.5rem;
  border-radius: 0.875rem;
  margin-bottom: 0.25rem;
  padding-left: 0.75rem;
  font-size: 1rem;
}

.schemeBottom{
  padding-left: 0.75rem;
}

.schemeBottomText{
  height: 5.3125rem;
  line-height: 5.3125rem;
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0%;
  color: rgba(255, 255, 255, 1);
}
.schemeBottomText img{
  margin-left: 0.5rem;
}

.SelectText:hover{
  background: rgba(225, 224, 239, 0.05);
}
.SelectText:hover .arrow{
  opacity: 1;
}
.SelectText .arrow{
  margin-left:  0.5rem;
  opacity: 0;
}
.introduceBox{
  width: 90rem;
  height: 3.75rem;
  flex-shrink: 0;
  margin: 0 auto;
}
.introduceBoxSeat1{
  width: 100%;
  height: 7.5rem;
}
.introduceBoxSeat2{
  width: 100%;
  height: 2.5rem;
}
.introduceBoxSeat3{
  width: 100%;
  height: 3.75rem;
}
.introduceBoxText1 .text1{
  color: rgba(225,224,239,0.5);
  font-size: 5.37rem;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; 
  letter-spacing: -1.72px;
}
.introduceBoxText1 .text2{
  color: #E1E0EF;
  font-size: 5.37rem;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -1.72px;
}
.introduceBoxText2{
  width: 32.9375rem;
}
.introduceBoxText2 .text1{
  color: rgba(225, 224, 239, 0.50);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.introduceBoxBtn{
  width: 36rem;
  height: 4rem;
  display: flex;
  position: relative;
}
.introduceBoxBtn .btn{
  width: 17.5rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: 10px;
  border: none;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 150%;
  letter-spacing: 0%;
  color: #FFFFFF;
  cursor: pointer;
  flex-shrink: 0;
}
.introduceBoxBtn .btn1{
  background-color: #FF005B;
  transition: background-color 0.3s ease - in - out 0.5s;
  margin-right: 16px;
}
.introduceBoxBtn .btn2{
  background-color: transparent;
  border: 1px solid rgba(225, 224, 239, 0.2);
}
/* 预约会议二维码 */
.rqCodeBox{
  width: 13.75rem;
  height: 15.5rem;
  border-radius: 1.25rem;
  border-width: 1px;
  border: 1px solid rgba(225, 224, 239, 0.05);
  backdrop-filter: blur(100px);
  background: rgba(24, 23, 28, 1);
  position: absolute;
  top: -16.25rem;
  right: 1.875rem;
  padding: 1.125rem;
  opacity: 0;  
  transition: none;
}
.rqCodeBoxText{
  font-weight: 400;
  font-size: 1rem;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  margin-top: 0.75rem;
}

.tab-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%; 
}


/* 滑动动画效果 */
.slide-out-left {
  animation: slideOutLeft 0.3s forwards;
}
.slide-out-right {
  animation: slideOutRight 0.3s forwards;
}
.slide-in-left {
  animation: slideInLeft 0.3s forwards;
}
.slide-in-right {
  animation: slideInRight 0.3s forwards;
}

@keyframes slideOutLeft {
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}
@keyframes slideOutRight {
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}



@media (max-width: 776px) {
  .introduceBox{
    width: 100% ; 
  }
  .introduceBoxText1 .text1,.introduceBoxText1 .text2,.introduceBoxText1 .text3{
    font-size: 40px ;
    text-align: center;
  }
  .introduceBoxText2{
    width: 80% ; 
    margin: 0 auto;
  }
  .introduceBoxText2 .text1{
    font-size: 16px ;
  }
  .introduceBoxBtn{
    width: 100%;
    display: flex;
    flex-direction: column; 
    gap: 10px;
  }
  .introduceBoxBtn .btn{
    width: 100%;
    height: 52px;
    font-size: 16px;
    /* flex: 1; */
  }
  .rqCodeBox{ 
    top: -11.25rem;
    left: calc((100% - 13.75rem) / 2);
  }
  .introduceBoxSeat3{
    height: 12.5rem;
  }
}
/* 商业成长 */
.business{
  width: 100%;
  min-height: 77.3125rem;
  background-color: #0C0C0C;
  overflow: hidden;
}
.businessBox{
  margin: 0 auto;
}
.businessBoxContent{
 max-width: 90rem;
 flex-shrink: 0;
  margin: 0 auto;
}
.businessTitle{
  width: 100%;
  height: 4.8125rem;
  margin-top: 6.25rem;
  margin-bottom: 3.125rem;
}
.businessTitleH1{
  font-size: 4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -1.28px;
}
.businessTitleText1{
  color: #E1E0EF;
}
.businessTitleText2{
  color: rgba(225,224,239,0.5)
}
.businessContent{
  width: 100%;
  height: 38.125rem;
}
.businessContentLeft{
  width: 51.25rem;
  height: 100%;
  float: left;
}
.businessContentLeftCustomer{
  position: relative;
  width: 51.25rem;
  height: 38.125rem;
  flex-shrink: 0;
  border-radius: 1.25rem;
}
.businessContentLeftCustomerBj{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  border-radius: 1.25rem;
}
.businessContentLeftCustomerBjTop{
  width: 51.25rem;
  height: 19.375rem;
  flex-shrink: 0;
  border-radius: 1.25rem 1.25rem 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 100%);
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
}
.businessContentLeftCustomerBjbottom{
  width: 51.25rem;
  height: 18.75rem;
  flex-shrink: 0;
  border-radius: 0px 0px 1.25rem 1.25rem;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 100%);
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 2;
}
.businessContentLeftCustomerNum{
  color: #FFF;
  font-size: 9.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  position: absolute;
  top: 0.5625rem;
  left: 3.5rem;
  z-index: 3;
  font-family: "SharpGrotesk-M";
}
.businessContentLeftCustomerText{
  color: #BEC0D9;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  position: absolute;
  top: 12.5rem;
  left: 4.1875rem;
  z-index: 3;
}
.businessContentLeftCustomerIcon{
  color: #FFF;
  font-size: 4.6875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  position: absolute;
  top: 1.875rem;
  left: 28.1875rem;
  z-index: 3;
  font-family: "SharpGrotesk-M";
}
.businessContentRight{
  width: 36.875rem;
  height: 100%;
  float: right;
}
.businessContentRightTop{
  width: 36.875rem;
  height: 18.125rem;
  flex-shrink: 0;
  border-radius: 1.25rem;
  /*background-image: url('../image/goldcoin.png');*/
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover; 
  display: flex;
  flex-direction: column;
  gap: 0px;
  justify-content: center;
  padding-left: 3.625rem;
}
.businessContentRightTop .text1{
  color: #FFF;
  font-size: 5.625rem;
  font-style: normal;
  font-weight: 500;
  font-family: "SharpGrotesk-M";
}
.businessContentRightTop .text2{
  color: #FFF;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
}
.businessContentRightTop .text3{
  color: #BEC0D9;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
}

.businessContentRightBottm{
  width: 36.875rem;
  height: 18.125rem;
  flex-shrink: 0;
  border-radius: 1.25rem;
  /*background-image: url('../image/growthrate.png');*/
  background-repeat: no-repeat;  
  background-position: center top;    
  background-size: cover;      
  margin-top: 1.875rem;
  font-family: "SharpGrotesk-M";
  display: flex;
  flex-direction: column;
  gap: 0px;
  justify-content: center;
  padding-left: 3.625rem;
}
.businessContentRightBottm .text1{
  color: #FFF;
  font-size: 5.625rem;
  font-style: normal;
  font-weight: 500;
  font-family: "SharpGrotesk-M";
}
.businessContentRightBottm .text1 .number{
  color: #FFF;
  font-size: 5.625rem;
  font-style: normal;
  font-weight: 500;
  font-family: "SharpGrotesk-M";
}

.businessContentRightBottm .text2{
  color: #BEC0D9;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
}
.businessFooter{
  width: 100%;
  min-height: 16.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.875rem;
}
.businessFooterBox{
  width: 28.75rem;
  height: 16.875rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;   
  align-items: center;     
  justify-content: center;
  border-radius: 1.25rem;
  position: relative;
}
.businessFooterBox1{
  /*background-image: url('../image/year.png');*/
  background-repeat: no-repeat;      
  background-size: cover;            
}
.businessFooterBox2{
  /*background-image: url('../image/transaction.png');*/
  background-repeat: no-repeat;     
  background-position: center top;     
  background-size: cover;            
}
.businessFooterBox3{
  /*background-image: url('../image/Rectangle.png');*/
  background-repeat: no-repeat;      
  background-position: center top;      
  background-size: cover;            
}
.businessFooterBox1 .businessFooterBoxText1{
  font-family: "SharpGrotesk-M";
}
.businessFooterBox2 .businessFooterBoxText1{
  font-family: "SharpGrotesk-M";
}
.businessFooterBox3 .businessFooterBoxText1{
  font-family: "SharpGrotesk-M";
}
.businessFooterBoxText1{
  color: #FFF;
  font-size: 5.625rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.businessFooterBoxText2{
  color: #FFF;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.businessFooterBoxText3{
  color: #BEC0D9;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
@media (max-width: 776px) {
  .businessContentLeft,.businessContentLeftCustomer,
  .businessContentLeftCustomerBjTop,
  .businessContentLeftCustomerBjbottom{
    width: 100%;
  }
  
  .businessContent{
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;	
  }
  .businessContentLeft{
    height: 38.125rem
  }
  .businessContentLeftCustomerBj{
    width: 100%;
    height: 100%;
  }
  .businessContentLeftCustomerBjTop,.businessContentLeftCustomerBjbottom{
    height: 19.0625rem;
  }
  .business{
    padding-inline: 20px;
  }
  .businessTitleH1{
    font-size: 40px;
  }
  .businessContentLeftCustomerNum,.businessContentRightTop .text1,
  .businessContentRightBottm .text1,.businessFooterBoxText1,
  .businessFooterBoxText1,.businessFooterBoxText1{
    font-size: 62px;
  }
  .businessContentLeftCustomer,.businessContentLeft{
    height: 270px;
  }
  .businessContentLeftCustomerIcon{
    left: 205px;
    top: 0px;
  }
  .businessContentLeftCustomerBjTop,.businessContentLeftCustomerBjbottom{
    height: calc(270px / 2);
  }
  .businessContentLeftCustomerText{
    top: 95px;
    left: 40px;
  }
  .businessContentRight{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .businessFooter{
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    align-items: center;
  }
  .businessFooter{
    margin-bottom: 50px;
  }
  .businessContentRightTop,.businessContentRightBottm,.businessFooterBox{
    width: 100%;
    height: 220px;
  }
}




/* 解决方案 */
.solution{ 
  width: 100%;
  min-height: 71.4375rem;
  padding-top: 6.25rem;
  padding-bottom:6.25rem;
}
.solutionBigBox{
  max-width: 120rem;
  margin: 0 auto;
  position: relative;
}
.solution1{
  width: 24.77881rem;
  height: 26.3125rem;
  flex-shrink: 0;
  aspect-ratio: 396.46/421.00;
  position: absolute;
  top: -10.8125rem;
  left: -10.75rem;
  z-index: 3;
}
.solution2{
  width: 16.6165rem;
  height: 17.3125rem;
  flex-shrink: 0;
  aspect-ratio: 265.86/277.00;
  position: absolute;
  bottom: -3.5rem;
  right: -4.5rem;
  z-index: 0;
}
.solutionTitle{
  max-width: 90rem;
  min-height: 10rem;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.solutionTitleLeftP{
  font-size: 4.1875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}
.solutionTitleLeftP1{
  color: #1F1E27;
}
.solutionTitleLeftP2{
  color: rgba(65, 57, 96, 0.70);
}
.solutionTitleRight{
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 100%;
  letter-spacing: 0%;
  display: flex;
  align-items: baseline;
  flex-direction: column-reverse;
}
.solutionTitleRightP{
  width: 36.8125rem;
  color: rgba(65, 57, 96, 0.50);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.businessTab{
  max-width: 96.25rem;
  margin:0 auto ;
  margin-top:3.13rem;
  border-radius: 1.5rem;
  background-color: #F7F7F8;
  position: relative;
  padding: 3.125rem;
}
.businessTabBtnBox{
  width: calc(15rem * 4);
  /*min-width: 43.75rem;*/
  min-height: 3.37rem;
  border-radius: 1rem;
  background-color: #F1F2F3;
  margin: 3.125rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.businessTabBtn{
  border-radius: 0.625rem;
  background-color: transparent;
  border: none;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 100%;
  letter-spacing: 0%;
  transition: background-color 0.3s ease;
  transition: color 0.3s;
  color: #1F1E27;
}
.highlight {
  position: absolute;
  top: 0px;
  left: 4px;
  width: 11.25rem;
  height: 3.5rem;
  background-color: #FF005B;
  border-radius: 0.625rem;
  z-index: 0;
  transition: width 0.3s ease, left 0.3s ease;
}

.businessTabBtn1,.businessTabBtn2{
  width: 15rem;
  height: 3.5rem;
}
.businessTabBtn:not(.addBusinessTabBtn):hover{
  cursor: pointer;
  color: #FF005B;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}
.addBusinessTabBtn{
  background-color: transparent;
  font-weight: 700;
  color: #FFFFFF;
  position: relative;
  cursor: pointer;
  width: 15rem;
}
.businessNavBox{
  height: 2.875rem;
  margin: 0 auto;
}
.businessNavBoxUl {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.highlight_border {
  position: absolute;
  top: 0;
  height: 2.8125rem;
  border-bottom: 3px solid #FF005B;
  z-index: 0;
  transition: none; 
}
.highlight_border.active {
  transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
}
.businessNavBoxUlLi{
  width: 19.375rem;
  height: 2.8125rem;
  color: #1F1E27;
  text-align: center;
  font-size: 1.25rem;
  font-style: normal;
  line-height: normal;
}
.businessNavBoxUlLi:hover{
  cursor: pointer;
  color: #FF005B;
  text-align: center;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.addBusinessNavBoxUlLi{
  color: #FF005B;
  text-align: center;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.addBusinessNavBoxUlLi span{
  font-weight: 700;
}
.zfbxBoxCarousel .businessContentBox{
  max-width: 90rem;
  margin: 0px auto;
  margin-top: 2.25rem;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  overflow: hidden;
  gap: 1.88rem;
  flex-wrap: wrap;
}
.businessContentBox{
  margin-top: 3.85rem;
}
.pcGamesBox{
  display: none;
}
.allGamesBox{
  display: none;
}
.businessContentBoxLeft,.businessContentBoxRight{
  width: 44.0625rem;
  /*height: 25.125rem;*/
  background-color: rgba(255, 255, 255, 1);
  border-radius: 1rem;
  padding: 1.875rem 4rem 2.5rem 1.875rem;
  flex: 1;
}
.businessContentBoxLeft{
  float: left;
}
.businessContentBoxRight{
  float: right;
}
.businessContentBoxTitle{
  color: #1F1E27;
  text-align: left;
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 106%;
  letter-spacing: -0.6px;
}
.businessContentBoxText{
  min-width: 38rem;
  color: rgba(65, 57, 96, 0.50);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 0.625rem;
}

.checkBigbox{
  margin-top: 3.0625rem;
}
.checkbox{
  color: #1F1E27;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 106%;
  letter-spacing: -0.4px;
  margin-top: 1.3125rem;
  display: flex;
  justify-content: left;
  align-items: center;
}
.checkboxTwo{
  align-items: flex-start;
}
.checkbox p{
  color: #1F1E27;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 106%;
  letter-spacing: -0.4px;
  margin-left: 0.625rem;
}
.businessContentBoxFooter{
  width: 36.125rem;
  margin-top: 2.5rem;
  display: flex;
  justify-content: space-between;
}
.realizationBtn,.moreBtn{
  width: 17.5rem;
  height: 3.5rem;
  background-color: transparent;
  border-radius: 0.625rem;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 150%;
  letter-spacing: 0%;
  cursor: pointer;
}
.realizationBtn{
  background-color: rgba(255, 0, 91, 1);
  border: none;
  color: rgba(255, 255, 255, 1);
}
.realizationBtn a{
  color: rgba(255, 255, 255, 1);
}
.moreBtn{
  border: 1px solid rgBa(65, 57, 96, 0.2);
  color: #1F1E27;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.moreBtn a{
  color: rgba(31, 30, 39, 1);
  color: #1F1E27;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.checkbox img{
  width: 1.375rem;
  height: 1.375rem;;
}
.moveZfbxBox,.moveZfbxBoxTitle{
  display: none;
}
.moveYxrzBox,.moveYxrzBoxTitle,.moveLlyxBoxTitle,.moveQtgdBoxTitle{
  display: none;
}
@media (max-width: 776px){
  .pcZfbxBox,.innerTitle{
    display: none !important;
  }
  .moveZfbxBox,.moveZfbxBoxTitle{
    display: block;
  }
  .moveYxrzBox,.moveYxrzBoxTitle,.moveLlyxBoxTitle,.moveQtgdBoxTitle{
    display: block;
  }
  .highlight{
    display: none;
  }
  .addBusinessTabBtn{
    background-color: #FF005B;
    border: 1px solid #FF005B !important;
  }
  .solutionBigBox{
    padding-inline: 20px;
  }
  .solutionTitleLeftP{
    font-size: 40px;
  }
  .solutionTitle,.businessContentBox{
    display: flex;
    flex-direction: column;
    gap: 10px;	
  }
  .solution1,.solution2{
    display: none;
  }
  .businessNavBox,.solutionTitleRightP {
    width: 100%;
  }
  .businessNavBoxUl{
    justify-content: flex-start;
    overflow-x: scroll;
  }
  .businessNavBoxUlLi{
    min-width: 175px;
  }
  .businessTabBtnBox{
    width: 100%;
  }
  
  .businessContentBoxText,
  .businessContentBoxText,
  .allGamesBox .businessContentBoxText{
    width: 100%;
  }
  .businessContentBoxLeft,
  .businessContentBoxRight,.allGamesBox .businessContentBoxLeft{
    width: 100%;
    padding: 20px;
    height: auto;
  }
  .businessTab{
    padding: 0px;
    background-color: transparent;
  }
  .businessTabBtnBox{
    background-color: transparent;
  }
  .moveZfbxBox,.moveYxrzBox,.moveLlyxBox,.moveQtgdBox,.yxrzBoxInner,.BoxInner{
    max-width: 90rem;
    min-height: 31.875rem;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 1.5rem;
    background: #F7F7F8;
    padding: 20px;
  }
  .moveZfbxBoxTitle,.moveYxrzBoxTitle,.moveLlyxBoxTitle,.moveQtgdBoxTitle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 27px;
    margin-bottom: 12px;
  }
  .moveZfbxBoxTitleText{
    color: #1F1E27;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 0 1.5rem;
  }
  .moveZfbxBoxTitleBorder {
    width: calc(50% - 32px);
    display: block;
    border: 1px solid rgba(65, 57, 96, 0.20);
    flex: 1;
  }
  .businessContentBoxLeft:not(:last-child),.businessContentBoxRight:not(:last-child){
    margin-bottom: 20px;
  }
  .businessTab .bg_purple,.businessTab .bg_grey{
    height: 42px;
    border-radius: 10px;
  }
  .checkbox img{
    width: 16px !important;
    height: 16px !important;
  }
  .checkbox p{
    font-size: 16px !important;
  }
  .businessContentBoxTitle{
    font-size: 18px
  }
  .businessContentBoxText{
    font-size: 14px;
    min-width: 100%;
  }

  .businessContentBoxFooter button{
    width: 100%;
    height: 46px;
    font-size: 16px;
  }
}
@media (max-width: 540px){
  .businessContentBoxFooter{
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }
  .businessContentBoxFooter button{
    width: 100%;
  }
  .businessTabBtn{
    min-width: 110px;
    border-radius: 0.5rem;
    border: 1px solid rgba(65, 57, 96, 0.20);
    margin-right: 8px;
  }
  .businessTabBtn:not(.addBusinessTabBtn):hover{
    color: #1F1E27;
  }
  .businessTabBtnBoxs{
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 5px 0px;
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .businessTabBtnBoxs::-webkit-scrollbar {
    display: none;
  }
}

/* 游戏投融资 */
.yxrzBox{
  max-width: 90rem;
  min-height: 31.875rem;
  margin: 0 auto;
  display: none;
}
.innerTitle{
  width: 19.375rem;
  height: 2.8125rem;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 3.85rem;
  position: relative;
  display: flex;
  justify-content: center;
}
.div.pcYxrzBox_one ~ div {
  display: none;
}
.yxrzBox .innerTitle1,.yxrzBox .innerTitle3{
  display: inline-block;
  width: 28.75rem;
  border-top: 1px solid rgba(65, 57, 96, 0.20);;
}
.innerTitle2{
  color: #FF005B;
  text-align: center;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.innerText{
  margin-top: 3.85rem;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 1rem;
  position: relative;
  z-index: 2;
  min-height: 25.8125rem
}
.innerTextTitle{
  color: #1F1E27;
  text-align: left;
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 106%;
  letter-spacing: -0.0375rem;
}
.innerTextSubtitle{
  color: rgba(65, 57, 96, 0.50);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; 
  margin-top: 0.5rem;
}
/* 流量与营销 */
.llyxBox{
  max-width: 90rem;
  margin: 0 auto;
  display: none;
}
.div.pcLlyxBox_one ~ div {
  display: none;
}
.llyxBox .innerTitle1,.llyxBox .innerTitle3{
  display: inline-block;
  width: 36.5625rem;
  border-top: 1px solid rgba(65, 57, 96, 0.20);;
}
/* 其他更多 */
.qtgdBox{
  max-width: 90rem;
  min-height: 31.875rem;
  margin: 0 auto;
  display: none;
}
.qtgdBox .innerTitle1,.qtgdBox .innerTitle3{
  display: inline-block;
  width: 36.5625rem;
  border-top: 1px solid rgba(65, 57, 96, 0.20);;
}
.qtgdBox .businessContentBoxLeft,.qtgdBox  .businessContentBoxRight{
  height: 16.95rem;
}


@media (max-width: 776px){
  .qtgdBox .businessContentBoxLeft, .qtgdBox .businessContentBoxRight{
    min-height: 21.95rem;
    height: auto;
  }
  .innerText,.businessContentBox{
    margin-top: 0px;
  }
  .businessContentBox{
    gap: 0px;
  }
}


/* 合作模式 */
.mode{
  width: 100%;
  min-height: 60.875rem;
  background-color: rgba(241, 242, 243, 1);
  padding-top: 6.25rem;
}
.modeBox{
  max-width: 90rem;
  min-height: 40.375rem;
  padding-top: 1.875rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}
.modeBoxLeft{
  width: 36.125rem;
  flex-shrink: 0;
  min-height: 26.875rem;
  overflow: hidden;
  position: relative;
}
.modeBoxLeftText1{
  color: #000;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.modeBoxLeftText2{
  color: #000;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.modeBoxLeftText3{
  color: rgba(65, 57, 96, 0.50);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.leftwidth{
  min-height: 26.875rem;
}
.w100{
  width: 100%;
}

.btmNav_a:hover {
  color: rgb(255, 0, 85) !important;
  cursor: pointer;
}

.modeBoxRight{
  width: 40rem;
  height: 30rem;
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
} 
.rightwidth{
  height: 30rem;
}
.modeBoxRightImgBox{
  width: 40rem;
  height: 30rem;
  flex-shrink: 0;
  border-radius: 1.5rem
}
.modeBoxRightImgBox img{
  width: 40rem;
  height: 30rem;
  border-radius: 1.5rem
}
/* 自定义滚动条样式 */
.scroll-slide {
  position: absolute;
  transform: translateY(100%);
  transition: transform 0.5s ease;
}
.scroll-slide.active {
  transform: translateY(0);
}
.scroll-slide::-webkit-scrollbar {
  width: 0.375rem;
}
.scroll-slide::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 0.1875rem;
}
.scroll-slide::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 0.1875rem;
}
.scroll-slide::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* 时间轴样式保持不变 */
.timeline {
  width: 2px;
  height: 41.5rem;
  background: rgba(223, 224, 229, 1);
  margin: 0 2.5rem;
  position: relative;
}

.timeline-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26%;
  background-color: rgba(255, 0, 91, 1);
  transition: height 0.5s ease;
}

.timeline-dot {
  position: absolute;
  left: 50%;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 1rem;
  background-color: #ccc;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeline .timeline-dot.active {
  background-color: rgba(255, 0, 91, 1);
}
.timeline-dot:nth-of-type(2) { top: 7.375rem; }
.timeline-dot:nth-of-type(3) { top: 13.875rem; }
.timeline-dot:nth-of-type(4) { top: 20.125rem; }
.timeline-dot:nth-of-type(5) { top: 26.375rem; }
.timeline-dot:nth-of-type(6) { top: 32.625rem; }

/* 5大合作模式-横向滚动 */
.moveModeBox{
  display: none;
}
.carousel-box {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto; 
  overflow: hidden;
  touch-action: pan-y; 
}

.carousel-box-track {
  display: flex;
  transition: transform 0.3s ease;
  width: 100%;
}

.carousel-item {
  flex: 0 0 100%;
  width: 100%;
  /* 确保在700px以下屏幕只显示一张 */
  min-width: 100%;
}

.carousel-indicate {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  position: relative;
}
.carousel-indicate-border{
  width: 100%;
  height: 2px;
  background: #D9D9D9;
  position: absolute;
  z-index: 1;
  transition: transform 0.3s ease;
}
.carousel-indicate-border::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc((var(--current-index) + 1) / var(--item-count) * 100%);
  background-color: #FF005B;
  transition: width 0.3s ease;
}


.indicator {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  background: #DFE0E5;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.indicator.active {
  background-color: #FF005B;
}


@media (max-width: 776px){
  .modeBox{
    display: none;
  }
  .moveModeBox{
    display: block;
  }
  .mode{
    padding-inline: 20px;
  }
  .modeBoxRightImgBox{
    max-width: 40rem;
    width: 100%;
    height: 22rem;
    flex-shrink: 0;
    border-radius: 1.5rem
  }
  .modeBoxRightImgBox img{
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
  }
  .leftwidth{
    display: flex;
    flex-direction: column;
    gap: 24px;	
  }
  .moveModeBox .checkbox{
    align-items: start;
  }
}



/* 团队 */
.team{ 
  width: 100%;
  height: 55.25rem;
  overflow: hidden;
  background-color: rgba(241, 242, 243, 1);
}
.teamBox{
  max-width: 120rem;
  height: 52.75rem;
  margin: 0 auto;
}
.teamBoxText{
  max-width: 90rem;
  min-height: 7.875rem;
  margin: 4.375rem auto;
  display: flex;
  justify-content: space-between;
}
.TextLeft1{
  color: #1F1E27;
  font-size: 4.1875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -1.34px;
}
.TextLeft2{
  color: rgba(65, 57, 96, 0.50);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-top: 0.625rem;
}
.TextRight{
  display: flex;
  align-items: end;
}
.TextRightP{
  width: 4.6875rem;
  height: 3.125rem;
  border-radius:1.5625rem;
  border: 1px solid rgba(65, 57, 96, 0.2);
  text-align: center;
  line-height: 3.125rem;
  cursor: pointer;
}
.TextRightP:not(:last-child){
  margin-right: 1.5625rem;
}
.TextPImg{
  transform: rotate(180deg);
  margin-left: 1.25rem;
}
.teamBoxContent{
  width: 90rem;
  margin: 0 auto;
  display: flex;
  white-space: nowrap;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.teamBoxCart{
  /*width: 28.75rem;*/
  /*height: 31.75rem;*/
  min-width: 28.75rem;
  height: 28.25rem;
  border-width: 1px;
  background-color: #FFFFFF;
  border-radius: 1.5rem;
  float: left;
  margin-right: 1.875rem;
  display: inline-block;
  padding: 2.5rem;
  
}
.teamBoxCartP{
  color: #000;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 106%;
  margin-bottom: 1.25rem;
}
.teamBoxCartImg{
  margin-bottom: 1.25rem;
}
.squareImg{
  /*width: 15.8125rem;*/
  /*height: 15.8125rem;*/
  /*flex-shrink: 0;*/
  /*aspect-ratio: 1/1;*/

  min-width: 15.8125rem;
  height: 15.8125rem;
  flex-shrink: 0;
  /* aspect-ratio: 379.45 / 253.00; */
  max-width: 23.71588rem;
}
.rectangleImg{
  width: 23.71588rem;
  height: 15.8125rem;
  flex-shrink: 0;
  aspect-ratio: 379.45/253.00;
}
.teamBoxCartImg img{
  /*width: 100%;*/
  height: 100%;
}
.teamBoxCartP2{
  color: rgba(65, 57, 96, 0.50);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-bottom: 1.875rem;
}

.teamFooterBtn{
  width: 23.75rem;
  height: 3.5rem;
  border-radius: 0.625rem;
  background-color: transparent;
  border: 1px solid rgba(65, 57, 96, 0.2);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 150%;
  letter-spacing: 0%;
  cursor: pointer;
  color: #1F1E27;
}
@media (max-width: 776px){
  .team{
    padding-inline: 20px;
  }
  .TextRight{
    display: none;
  }
  .TextLeft1{
    font-size: 40px;
  }
  .teamBoxContent{
  }
}



/* Xsolla 热门解决方案 */
.popularSolutions{ 
  width: 100%;
  height: 55.25rem;
  overflow: hidden;
  background-color: rgba(12, 12, 12, 1);
}
.popularSolutionsBox{
  max-width: 120rem;
  height: 55.25rem;
  margin: 0 auto;
}
.popularSolutionsBoxText{
 max-width: 90rem;
  min-height: 7.875rem;
  margin: 4.375rem auto;
  display: flex;
  justify-content: space-between;
}
.popularSolutionsBoxText .TextLeft1{
  color: rgba(255, 255, 255, 1);
}
.popularSolutionsBoxText .TextLeft2{
  color: rgba(225, 224, 239, 0.7);
}
.popularSolutionsBoxText .TextRightP{
  border: 1px solid rgba(225, 224, 239, 0.7)
}
.popularSolutionsBoxContent{
 max-width: 90rem;
  margin: 3.125rem auto;
  white-space: nowrap;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  justify-items: center;
}
.popularSolutionsBoxCart{
  min-width: 28.75rem;
  min-height: 31.75rem;
  border-radius: 1.5rem;
  background-color: rgba(36, 35, 40, 1);
  padding: 2.5rem;
  display: inline-block;
  position: relative;
}
.popularSolutionsBoxCart:not(:last-child){
  margin-right: 1.875rem;
}
.popularSolutionsBoxCartText{
  color: #E1E0EF;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 106%;
  letter-spacing: -0.48px;
}
.popularSolutionsBoxCartImg{
  text-align: center;
  position: relative;
  z-index: 5;
}
.popularSolutionsBoxCartImg .svgImg{
  height: 17rem;
  position: absolute;
  top: 3rem;
  right: 3.125rem;
  z-index: 2;
  transform: scale(1.3);
}
.popularSolutionsBoxCartImg .svgImg2{
  width: 30rem;
  height: 24rem;
  position: absolute;
  top: 0px;
  left: -1.5625rem;
  z-index: 2;
}
.popularSolutionsBoxCartImg .svgImg3{
  width: 30rem;
  height: 24rem;
  position: absolute;
  top: 0px;
  left: -1.5625rem;
  z-index: 2;
}
.popularSolutionsBoxCartFotter{
  position: absolute;
  bottom: 2.5rem;
}
.popularSolutionsBoxCartFotterBtn{
  width: 23.75rem;
  height: 3.5rem;
  border-width: 1px;
  border-radius: 0.625rem;
  background-color: transparent;
  border: 1px solid rgba(65, 57, 96, 0.7);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 150%;
  letter-spacing: 0%;
  color: rgba(225, 224, 239, 1);
  cursor: pointer;
}
@media (max-width: 776px){
  .popularSolutionsBox{
    padding-inline: 20px;
  }
}

/* Xsolla Connect 游戏论坛 */
.gameForum{ 
  width: 100%;
  height: 50.1875rem;
  overflow: hidden;
  background: rgba(12, 12, 12, 1);

}
.gameForumBox{
  max-width: 120rem;
  height: 50.1875rem;
  margin: 0 auto;
}
.gameForumBoxText{
  max-width: 90rem;
  min-height: 7.875rem;
  margin: 0px auto;
  margin-top: 6.25rem;
  display: flex;
  justify-content: space-between;
}
.gameForumBoxText .TextLeft1{
  color: rgba(255, 255, 255, 1);
}
.gameForumBoxText .TextLeft2{
  color: rgba(225, 224, 239, 0.7);
}
.gameForumBoxText .TextRightP{
  border: 1px solid rgba(225, 224, 239, 0.7)
}
.gameForumBoxContent{
  width: 91.25rem;
  margin: 3.125rem auto;
  white-space: nowrap;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gameForumBoxContentCart{
  width: 27.5rem;
  min-height: 26.6875rem;
  display: inline-block;
  position: relative;
}
.gameForumBoxContentCart:not(:last-child){
  margin-right: 3.75rem;
}
.gameForumBoxContentCartTitle{
  display: flex;
  position: absolute;
  top: 1.25rem;
  /* left: 1.25rem;; */
  right: 1.25rem;
}
.gameForumBoxContentCartTitleP{
  min-height: 2.1875rem;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: normal;
  letter-spacing: 0%;
  color: rgba(255, 255, 255, 1);
  padding: 0.375rem 1.25rem;
  background-color: rgba(30, 31, 39, 0.6);
  border-radius: 17.5px;
  /* margin-right: 1.6667rem; */
  /* margin-left: 2ch; */
  backdrop-filter: blur(7.5px);
}
.gameForumBoxContentCartText{
  width: 64rem;
  height: 4.5rem;
  font-weight: 400;
  font-size: 1.5rem;
  color: rgba(225, 224, 239, 1);
  line-height: 2rem;
  white-space: normal;
  position: absolute;
  top: 17.1875rem;
}
.gameForumBoxContentCartText2{
  position: absolute;
  top: 19.0625rem;
  margin-top: 0.375rem;
}
.gameForumBoxContentCartBtn{
  width: 15.625rem;
  height: 3.5rem;
  border-radius: 0.625rem;
  border: 1px solid rgba(225, 224, 239, 0.2);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 150%;
  letter-spacing: 0%;
  color: rgba(225, 224, 239, 1);
  background-color: transparent;
  position: absolute !important;
  bottom: 0px; 
  cursor: pointer;
}
.gameForumBoxContentCartImg{
  width: 27.5rem;
  height: 15rem;
  margin-bottom: 2.125rem;
  flex-shrink: 0;
  border-radius: 1.5rem;
}
.gameForumBoxContentCartImg img{
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
}
@media (max-width: 776px){
  .gameForumBox{
    padding-inline: 20px;
  }
}

/* 成功案例 */
.success{ 
  width: 100%;
  height: 67.5rem;
  overflow: hidden;
  background: rgba(12, 12, 12, 1);
}
.successBox{
  max-width: 120rem;
  height: 67.5rem;
  margin: 0 auto;
}
.successBoxText{
  max-width: 90rem;
  min-height: 7.875rem;
  margin: 0px auto;
  margin-top: 6.25rem;
  display: flex;
  justify-content: space-between;
}
.successBoxText .TextLeft1{
  color: rgba(255, 255, 255, 1);
}
.successBoxText .TextLeft2{
  color: rgba(225, 224, 239, 0.7);
}
.successBoxText .TextRightP{
  border: 1px solid rgba(225, 224, 239, 0.7)
}
.successBoxContent{
  margin: 3.125rem auto;
  width: 90rem;
  white-space: nowrap;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.successBoxContentCart{
  width: 28.75rem;
  height: 40.625rem;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 0.3s ease-out;
  border-radius: 1.25rem;

}
/* 鼠标悬停时：向上移动20px */
.successBoxContentCart:hover {
  transform: translateY(-20px);
}
.successBoxContentCart:not(:last-child){
  margin-right: 1.875rem;
}
.successBoxContentCart .bgImg{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 1;
  border-radius: 1.25rem;
}
.brandLogo{
  position: absolute;
  z-index: 2;
  top: 2.75rem;
  left: 3rem;
}
.smallLogo{
  position: absolute;
  z-index: 2;
  top: 22.75rem;
  left: 3rem;
}
.smallLogo .smallLogoImgBox{
  float: left;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 1rem;
  background: rgba(225, 224, 239, 0.05);
  backdrop-filter: blur(2.5px);
  margin-right: 0.625rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.smallLogoImgBox img{
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}
.successBoxContentCartText{
  position: absolute;
  top: 27.25rem;
  left: 3rem;
  z-index: 2;
  color: #E1E0EF;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}
.successBoxContentCartFooter{
  position: absolute;
  top: 34.125rem;
  left: 3rem;
  z-index: 2;
}
.successBoxContentCartFooterBtn{
  width: 22.75rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius:0.625rem ;
  border: 1px solid rgba(225, 224, 239, 0.2);
  background-color: transparent;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 150%;
  letter-spacing: 0%;
  color: rgba(225, 224, 239, 1);
  cursor: pointer;
  backdrop-filter: blur(2.5px);
}
.wyImg{
  width: 11.10106rem;
  height: 3.75rem;
  flex-shrink: 0;
}
.yottaImg{
  width: 11.70275rem;
  height: 3.625rem;
  flex-shrink: 0;
  aspect-ratio: 187.24/58.00;
}
.cgImg{
  width: 4.97844rem;
  height: 5.625rem;
  flex-shrink: 0;
  aspect-ratio: 79.66/90.00;
}
.ggIMg{
  width: 10.69256rem;
  height: 5.625rem;
  flex-shrink: 0;
  aspect-ratio: 171.08/90.00;
}
@media (max-width: 776px){
  .successBox{
    padding-inline: 20px;
  }
  .indicators-container{
    display: none !important;
  }
}
/* 文章博客 */
.blog{ 
  width: 100%;
  overflow: hidden;
  background: rgba(241, 242, 243, 1);
}
.blogBox{
  max-width: 120rem;
  height: 55.875rem;
  margin: 0 auto;
}
.blogBoxText{
  max-width: 90rem;
  min-height: 7.875rem;
  margin: 0px auto;
  margin-top: 6.25rem;
  display: flex;
  justify-content: space-between;
}
.blogBoxContent{
  width: 90rem;
  display: flex;
  white-space: nowrap;
  margin: 3.125rem auto;
}
.blogBoxContentCart{
  width: 27.5rem;
  height: 32.375rem;
  position: relative;
}
.blogBoxContentCart:not(:last-child){
  margin-right: 3.75rem;
}
.blogBoxContentCartImg{
  width: 27.5rem;
  height: 15rem;
  margin-bottom: 2.125rem;
  flex-shrink: 0;
  border-radius: 1.5rem;
}
.blogBoxContentCartImg img{
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
}
.blogBoxContentCartTextBox{
  margin-bottom: 0.875rem;
}
.blogBoxContentCartText{
  width: 27.5rem;
  font-weight: 500;
  letter-spacing: 0%;
  padding-left: 0.83rem;
  padding-right: 1.6875rem;
  white-space: normal;
  color: #1F1E27;
  font-size: 1.5rem;
  font-style: normal;
  line-height: normal;
}
.blogBoxContentCartText2{
  width: 27.5rem;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.25rem;
  letter-spacing: 0%;
  color: rgba(65, 57, 96, 0.5);
  padding-left: 0.3125rem;
  padding-right: 1.6875rem;
  white-space: normal;
  color: rgba(65, 57, 96, 0.50);
  font-style: normal;
  line-height: normal;
}
.blogBoxContentCartBtn{
  width: 15.625rem;
  height: 3.5rem;
  border-width: 1px;
  border-radius: 0.625rem;
  margin-top: 3rem;
  border: 1px solid rgba(65, 57, 96, 0.2);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 150%;
  letter-spacing: 0%;
  color: rgba(31, 30, 39, 1);
  cursor: pointer;
  position: absolute !important;
  bottom: 0;
}
.blogBoxContentCartTitle{
  display: flex;
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}
.blogBoxContentCartTitleP{
  min-height:  2.1875rem;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 100%;
  letter-spacing: 0%;
  color: rgba(255, 255, 255, 1);
  padding: 0.625rem 1.25rem;
  border-radius: 17.5px;
  background: rgba(30, 31, 39, 0.60);
  backdrop-filter: blur(7.5px);
  /* margin-right: 0.625rem; */
}
@media (max-width: 776px){
  .blogBox{
    padding-inline: 20px;
    height: auto;
  }
}
/* Release Notes  */
.notes{ 
  width: 100%;
  height: 64.125rem;
  overflow: hidden;
  background: rgba(241, 242, 243, 1);
}
.notesBox{
  max-width: 120rem;
  height: 64.125rem;
  margin: 0 auto;
}
.notesBoxText{
  max-width: 90rem;
  min-height: 7.875rem;
  margin: 0px auto;
  margin-top: 6.25rem;
  display: flex;
  justify-content: space-between;
}
.notesBoxContent{
  max-width: 90rem;
  height: 40.625rem;
  margin: 0 auto;
  margin-top: 3.125rem;
  white-space: nowrap;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.notesBoxContentCard{
  min-width: 28.75rem;
  height: 40.625rem;
  border-radius: 1.25rem;
  display: inline-block;
  position: relative;
  background: linear-gradient(25.9deg, #313348 0.72%, #0C0C0E 48.08%, #232234 99.28%);
}
.notesBoxContentCard .bjImg{
  border-radius: 1.25rem;
}
.notesBoxContentCard:not(:last-child){
  margin-right: 1.5625rem;
}
.bjImg{
  position: absolute;
  top: 0;
  z-index:1;
}
.notesBoxContentCardText{
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 130%;
  letter-spacing: 0%;
  position: absolute;
  top: 3.625rem;
  left: 3.25rem;
  z-index: 2;
  color: #E1E0EF;
}
.notesBoxContentCardTime{
  font-weight: 500;
  font-size: 3rem;
  line-height: 130%;
  letter-spacing: 0%;
  color: rgba(225, 224, 239, 1);
  position: absolute;
  top: 5.8125rem;
  left: 3rem;
  z-index: 2;
}
.notesBoxContentCardBtnBox{
  position: absolute;
  bottom: 3rem;
  left:  3rem;
  z-index: 2;
}
.notesBoxContentCardBtn{
  width: 22.75rem;
  height: 3.5rem;
  border-width: 1px;
  border-radius: 0.625rem;
  background-color: transparent;
  border: 1px solid rgba(225, 224, 239, 0.6);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 150%;
  letter-spacing: 0%;
  color: rgba(225, 224, 239, 1);
  backdrop-filter: blur(2.5px);
}
.disabled{
  color: rgba(225, 224, 239, 0.5) !important;
}
@media (max-width: 776px){
  .notesBox{
    padding-inline: 20px;
  }
}
/* 集成指南 */
.guide{ 
  width: 100%;
  min-height: 46.875rem;
  overflow: hidden;
  background: rgba(241, 242, 243, 1);
}
.guideBox{
  max-width: 120rem;
  margin: 0 auto;
}
.guideBoxText{
  max-width: 90rem;
  height: 7.875rem;
  margin: 0px auto;
  margin-top: 6.25rem;
  display: flex;
  justify-content: space-between;
}
.guideBoxContent{
  max-width: 96.25rem;
  min-height: 23.3125rem;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 1.5rem;
  margin: 0 auto;
  margin-top: 3.125rem;
  padding: 3.75rem 3.125rem;
  display: flex;
  justify-content: space-between;
}
.guideBoxContentCart{
  width: 26.5rem;
  height: 15.8125rem;
  position: relative;
  display: flex;
}
.borderBox{
  height: 15.8125rem;
  border-right: 1px solid rgba(65, 57, 96, 0.1);
}
.guideBoxContentCartText1{
  font-weight: 500;
  font-size: 1.875rem;
  color: #1F1E27;
  line-height: 106%;
  letter-spacing: -0.6px;
}
.guideBoxContentCartText2{
  margin-top: 0.625rem;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: normal;
  letter-spacing: 0%;
  color: rgba(65, 57, 96, 0.5);
}
.upperRightBox{
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 1px solid rgba(65, 57, 96, 0.2);
  text-align: center;
  line-height: 5rem;
  position: absolute;
  bottom: 0px;
  left: 0px;
  cursor: pointer;
  color: rgb(215,214,222);
  display: flex;
  align-items: center;
  justify-content: center;
}
.upperRightBox .fa-solid {
  transform: rotate(-45deg);
}
@media (max-width: 776px){
  .guideBox{
    padding-inline: 20px;
    padding-bottom: 40px;
  }
  .guideBoxContent{
    flex-direction: column;
    gap: 10px;
    padding: 0px 32px;
    padding-block: 8px;
  }
  .borderBox{
    height: 1px;
    border-bottom: 1px solid rgba(65, 57, 96, 0.1);
    border-right: none;
    margin-bottom: 20px;
    display: none;
  }
  .guideBoxContentCart{
    width: 100%;
    height: auto;
    align-items: center;
    padding-block: 24px;
  }
  .guideBoxContentCart:not(:last-child){
    border-bottom: 1px solid rgba(65, 57, 96, 0.1);
  }
  .upperRightBox{
    position: relative;
    width: 48px;
    height: 48px;
    line-height: 48px;
  }
  .guideBoxContentCartText{
    width: calc(100% - 48px);
    padding-right: 24px;
  }
}
/* 价值观 */
.values{ 
  width: 100%;
  overflow: hidden;
  background: rgba(12, 12, 12, 1);
}
.valuesBox{
  max-width: 120rem;
  min-height: 64.375rem;
  margin: 0 auto;
  border-bottom: 1px solid rgba(225, 224, 239, 0.1);
}
.valuesBoxContent{
  max-width: 96.25rem;
  min-height: 46.25rem;
  margin: 0 auto;
  margin-top: 6.25rem;
  position: relative;
}
.leftIcon{
  width: 19.1875rem;
  height: 20.375rem;
  flex-shrink: 0;
  aspect-ratio: 307/326;
  position: absolute;
  left: -9.625rem;
  top: -4.3125rem;
}
.rightIcon{
  width: 26.9375rem;
  height: 28.0625rem;
  flex-shrink: 0;
  aspect-ratio: 431/449;
  position: absolute;
  right: -11.875rem;
  bottom: -10.4375rem;
}
.valuesBoxContentLeft,.valuesBoxContentRight{
  width: 47.1875rem;
  height: 46.25rem;
  border-radius: 1.5rem;
  float: left;
  position: relative;
  padding: 3.125rem;
  border: 1px solid rgba(225, 224, 239, 0.05);
  backdrop-filter: blur(100px);

} 
.valuesBoxContentLeft{
  margin-right: 1.875rem;
}
.valuesBoxContentLeft .bjImg,.valuesBoxContentRight .bjImg{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  border-radius: 1.25rem;
}
.valuesBoxContentTopImg{
  position: relative;
  z-index: 2;
}
.valuesBoxContentTopImg img{
  width: 40.9375rem;
  height: 20.5rem;
  flex-shrink: 0;
}
.valuesBoxContentText1{
  color: #E1E0EF;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  position: relative;
  z-index: 2;
  margin-top: 3.12rem;
}
.valuesBoxContentText2{
  color: rgba(225, 224, 239, 0.70);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  position: relative;
  margin-top: 0.5rem;
  z-index: 2;
}
.valuesBoxContentBtnBox{
  position: relative;
  margin-top: 7.3rem;
  z-index: 2;
}
.valuesBoxContentBtn{
  width: 15.625rem;
  height: 3.5rem;
  border-width: 1px;
  border-radius: 10px;
  border: 1px solid rgba(225, 224, 239, 0.2);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 150%;
  letter-spacing: 0%;
  background-color: transparent;
  color: rgba(225, 224, 239, 1);
  cursor: pointer;
}
@media (max-width: 776px){
  .valuesBox{
    padding-inline: 20px;
    border-bottom:none;
  }
  .valuesBoxContentLeft, .valuesBoxContentRight{
    width: 100%;
    height: auto;
    padding: 30px 20px;
  }
  .valuesBoxContentLeft{
    margin-bottom: 20px;
  }
  .leftIcon,.rightIcon{
    display: none;
  }
  .bjImg{
    width: 100%;
    height: 100%;
  }
  .valuesBoxContentTopImg{
    font-size: calc(16px / 1.2);
    margin: 0 auto ;
    width: 28rem;
    height:16.15rem;
  }
  .valuesBoxContentTopImg img{
    transform: scale(0.9);
    width: 100%;
    height: 100%;
  }
  .valuesBoxContentText1,.valuesBoxContentText2,.valuesBoxContentBtnBox{
    width: calc(100% - 20px);
    left: 0px;
    padding-left: 20px;
    
  }
  .valuesBoxContentBtnBox{
    margin-top: 50px;
  }
  .valuesBoxContentText1{
    font-size: 24px;
  }
  .valuesBoxContentText2{
    font-size: 14px;
  }
}



/* 底部 */
.footer{
  width: 100%;
  /* overflow: hidden; */
  background: rgba(12, 12, 12, 1);
  position: relative;
  padding-top: 7.5rem;
}
.footerXsolla{
  width: 5.625rem;
  height: 5.625rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  position: absolute;
  top: 5.625rem;
  left: 0px;
  cursor: pointer;
}
.footerBox{
  max-width: 120rem;
  min-height: 79.8125rem;
  margin: 0 auto;
}
.footerBoxContent{
  max-width: 90rem;
  min-height:  79.8125rem;
  margin: 0 auto;
  margin-top: 7.5rem;
}
.footerBoxTop{
  width: 100%;
  min-height: 60.75rem;
  border-bottom: 1px solid rgba(225, 224, 239, 0.1);
  display: flex;
}
.footerBoxTopLeft{
  width: calc(100% - 27.5rem);
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding-right: 6.25rem;
}
.footerBoxTopLeftLeftBottomP,.footerBoxTopLeftRightBottom{
  margin-top: 3.75rem;
}
.footerBoxTopLeftLeftTopP,.footerBoxTopLeftLeftBottomP,.footerBoxTopLeftCenterP,.footerBoxTopLeftRightTopP,.footerBoxTopLeftRightBottomP{
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 100%;
  letter-spacing: 0%;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 2.5rem;
}
.footerBoxTopLeftLeftTopUl,.footerBoxTopLeftLeftBottomUl,.footerBoxTopLeftCenterUl,.footerBoxTopLeftRightTopUl,.footerBoxTopLeftRightBottomUl{
  font-weight: 400;
  font-size: 1rem;
  line-height: 100%;
  letter-spacing: 0%;
  color: rgba(225, 224, 239, 0.8); 

}
.footerBoxTopLeftLeftTopUl li,.footerBoxTopLeftLeftBottomUl li,.footerBoxTopLeftCenterUl li,.footerBoxTopLeftRightTopUl li,.footerBoxTopLeftRightBottomUl li{
   cursor: pointer;
   margin-bottom: 1.75rem;
}
.footerBoxTopLeftLeftTopUl li a,.footerBoxTopLeftLeftBottomUl li a,.footerBoxTopLeftCenterUl li a,.footerBoxTopLeftRightTopUl li a,.footerBoxTopLeftRightBottomUl li a{
  color: rgba(225, 224, 239, 0.8) !important; 
}
.btmNav_a_top:hover{
  color: rgb(255, 0, 85) !important;
}
.footerBoxBottomShare{
  display: flex;
}
.footerBoxBottomShareIcon{
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 1rem;
  border: 1px solid rgba(225, 224, 239, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.625rem;
}
.wxImg{
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}
.dyImg{
  width: 1.625rem;
  height: 1.625rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}
.wbImg{
  width: 1.59756rem;
  height: 1.4375rem;
  flex-shrink: 0;
  aspect-ratio: 25.56/23.00;
}
.footerBoxBottomText{
  margin-top: 3.75rem;
}
.footerBoxBottomText1{
  color: #FFF;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
.footerBoxBottomText2{
  width: 26.0625rem;
  color: rgba(225, 224, 239, 0.50);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-top: 0.625rem;
}
.footerBoxBottomRegister{
  width: 27.5rem;
  height: 22.5rem;
  margin-top: 2.25rem;
}
.footerBoxBottomRegisterInput{
  width: 27.5rem;
  height: 4rem;
  border-radius: 0.625rem;
  border: 1px solid rgba(225, 224, 239, 0.2);
  background-color: transparent;
  text-indent: 1em;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 150%;
  letter-spacing: 0%;
  color: rgba(225, 224, 239, 0.3);
  margin-bottom: 1rem;
  font-style: normal;
}
.footerBoxBottomRegisterBtn{
  width: 17.5rem;
  height: 4rem;
  border-radius: 0.625rem;
  background: rgba(255, 0, 91, 1);
  border: none;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 100%;
  letter-spacing: 0%;
  color: rgba(225, 224, 239, 1);
  cursor: pointer;
  margin-bottom: 0.875rem;
}
.footerBoxBottomRegisterText{
  width: 26.5rem;
  color: rgba(225, 224, 239, 0.50);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.footerBoxBottomRegisterA{
  color: #FF005B;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.footerBoxBottomRegisterInput::-webkit-input-placeholder{
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 150%;
  letter-spacing: 0%;
  color: rgba(225, 224, 239, 0.3);
}
.footerBoxBottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 3.125rem;
  min-height: calc(100% - 68.25rem);
}
.footerBoxBottomLeft{
  min-height: 4.875rem;
  display: flex;
  flex-direction: column;
  line-height: 2.4375rem;
}
.footerBoxBottomLeft p{
  font-weight: 400;
  font-size: 1rem;
  line-height: 150%;
  letter-spacing: 0%;
  color: rgba(225, 224, 239, 0.5);
  display: flex;
  display: inline-block;
  margin-top: 1.875rem;
}
.btmNav_a_btm{
  font-weight: 400;
  font-size: 1rem;
  line-height: 150%;
  letter-spacing: 0%;
  color: rgba(225, 224, 239, 0.5);
}
.btmNav_a_btm:hover{
  color: rgb(255, 0, 85);
  cursor: pointer;
}
.footerBoxBottomLeft p:not(:last-child){
  margin-right: 1.125rem;
}
.footerBoxBottomRight{ 
  padding-top: 4.375rem;
}
.footerBoxBottomRightText{
  font-weight: 400;
  font-size: 1rem;
  line-height: 150%;
  letter-spacing: 0%;
  color: rgba(225, 224, 239, 0.5);
  margin-bottom: 1.25rem;
}
.missing1{
  margin-right: 1.875rem;
  width: 7.6875rem;
  height: 2.8125rem;
  flex-shrink: 0;
}
.missing2{
  width: 4.5rem;
  height: 2.8125rem;
  flex-shrink: 0;
}

.circle{
  transition: transform 0.3s ease;
}
.circle:hover{
  transform: scale(1.2);
  border: 1px solid rgb(65, 57, 96);
  color: rgb(65, 57, 96);
}
.circle svg{
  transform: rotate(-45deg);
}
.circle:hover svg path{ 
  fill: rgb(65, 57, 96);
}
.arrowText{
  font-size: 1.25rem;
  font-weight: bold;
}

.arrowDisabled{
  color: rgba(65, 57, 96, 0.3);
  border: var(--borderWidth, 1px) solid rgba(65, 57, 96, 0.2) !important;
  background: rgba(225, 224, 239, 0);
  cursor: default;
}
.arrowActive{
  background: rgb(255, 255, 255);
  color: rgb(65, 57, 96);
  cursor: pointer;
}
.arrowActive:hover{
  background-color: rgb(31, 30, 39);
  color: rgb(241, 242, 243);
}
.darkArrowDisabled{
  border: 1px solid rgba(65, 57, 96, 0.2) !important;
  background: rgba(225, 224, 239, 0);
  cursor: default;
  color: rgba(225, 224, 239, 0.3);
}
.TextRightP{
  display: flex;
  align-items: center;
  justify-content: center;
}
.TextRightP svg{
  width: 14px;
  height: 12px;
}
.darkArrowDisabled svg path{
  fill: rgba(225, 224, 239, 0.3)
}
.darkArrowActive svg path{
  fill: rgb(225, 224, 239);
}
.darkArrowActive{
  background: rgb(24, 23, 28);
  color: rgb(225, 224, 239);
  border: none !important;
}
.darkArrowActive:hover {
  background-color: #FFFFFF;
}
.darkArrowActive:hover svg path{ 
  fill: #000; 
}
.arrowLeft svg{
  transform: rotate(180deg);
}

.carousel-btn-clicked {
  opacity: 0.4; 
  transition: all 100ms ease-out; 
}

.shallowArrowDisabled{
  color: rgba(65, 57, 96, 0.3);
  border: var(--borderWidth, 1px) solid rgba(65, 57, 96, 0.2) !important;
  background: rgba(225, 224, 239, 0);
  cursor: default;
}
.shallowArrowActive{
  background: rgb(255, 255, 255);
  color: rgb(65, 57, 96);
  cursor: pointer;
  border: none !important;
}
.shallowArrowDisabled svg path{
  fill: rgba(65, 57, 96, 0.3)
}
.shallowArrowActive svg path{
  fill: rgb(65, 57, 96);
}
.shallowArrowActive:hover{
  background-color: rgb(31, 30, 39);
}
.shallowArrowActive:hover svg path{ 
  fill: rgb(241, 242, 243);
}

/* 轮播图容器样式 */
.carousel-container {
  width: 100%;
  max-width: 62.5rem;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  touch-action: pan-y; 
}

.carousel-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  flex: 0 0 33.33%; 
  padding: 0.625rem;
}

.carousel-item-inner {
  background-color: #f0f0f0;
  border-radius: 0.5rem;
  padding: 1.25rem;
  height: 12.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.1);
}

/* 导航按钮样式 */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-btn:hover {
  background-color: rgba(0,0,0,0.7);
}

.carousel-btn.prev {
  left: 0.625rem;
}

.carousel-btn.next {
  right: 0.625rem;
}

.carousel-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 指示器样式 */
.indicators-container {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 50%;
}

.indicator-item {
  width: 3rem;
  height: 0.375rem;
  border-radius: 0.1875rem;
  background: rgba(61, 61, 62, 1);
  margin: 0 0.25rem;
  cursor: pointer;
  transition: background-color 0.3s;
}
.indicator-item:hover {
  background-color: rgba(255, 0, 91, 1);
}

.indicator-item.active {
  background-color: rgba(255, 0, 91, 1);
}
.btn a{
  color: #FFFFFF;
}

@media (max-width: 1000px){
  .footerBoxBottom{
    margin-top: 20px;
  }
  .footerBoxBottomLeft .footerBoxBottomLeftTop{
    display: flex;
    flex-direction: column;
    gap: 10px;	
  }
  .footerBoxBottomLeftTop p{
    margin-top: 0;
  }
  .footerBoxBottomLeftTop .separate,.br{
    display: none;
  }
}


@media (max-width: 1439px){
  .footer{
    padding: 0 20px;
  }
  .footerXsolla{
    position: relative;
  }
  .footerBox{
    margin-top: 7.5rem;
  }
}

@media (max-width: 776px){
  .wxqr_popup{
    left: 0;
  }
  .footerBoxTop{
    flex-direction: column;	
  }
  .footerBoxTopRight {
    margin-bottom: 80px;
    order: -1;
  }
  .footerBoxTopLeft {
    order: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-right:0px;
  }
  .footerBoxBottomRegister{
    width: calc(100% - 64px);
  }
  .footerBoxBottomText2,.footerBoxBottomRegisterInput,
  .footerBoxBottomRegisterInput,.footerBoxBottomRegisterInput,
  .footerBoxBottomRegisterBtn,.footerBoxBottomRegisterText,
  .footerBoxBottomRegister,.footerBoxBottom{
    width: 100%;
  }
  .footerBoxBottomRegisterInput{
    height: 46px;
    margin-bottom: 12px;
  }
  .footerBoxBottomRegisterBtn{
    height: 52px;
    font-size: 16px;
  }
  .footerBoxBottom{
    padding-right: 0px;
  }
  .footerBoxBottom{
    flex-direction: column;
    gap: 30px;	
    align-items:start;
    padding-bottom: 60px;
  }
  .footerBoxBottomLeft{
    order: 0;
  }
  .footerBoxBottomRight{
    order: -1;
  }
  .footerBoxBottomLeftTop{
    padding-left: 0;
  }
  .footerBoxBottomRegisterText a{
    font-size: 12px;
  }
}

.button {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}

.button::before {
  content: '';
  position: absolute;
  left: var(--mouse-x, 0);
  top: var(--mouse-y, 0);
  width: var(--radius, 0);
  height: var(--radius, 0);
  background: #6939f9;
  border: 1px solid #6939f9;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease-out, height 0.3s ease-out;
  z-index: -1;
}

.button:hover::before {
  /* width: 600px;
  height: calc(400px + var(--offset-y, 0px)); */
  width: var(--radius, 0);
  height: var(--radius, 0);
}

.button2 {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}
.button2::before {
  content: '';
  position: absolute;
  left: var(--mouse-x, 0);
  top: var(--mouse-y, 0);
  width: var(--radius, 0);
  height: var(--radius, 0);
  background:rgba(225, 224, 239, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease-out, height 0.3s ease-out;
  z-index: -1;
}
.button2:hover::before {
  width: var(--radius, 0);
  height: var(--radius, 0);
}

.button3 {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}
.button3::before {
  content: '';
  position: absolute;
  left: var(--mouse-x, 0);
  top: var(--mouse-y, 0);
  width: var(--radius, 0);
  height: var(--radius, 0);
  background-color: rgb(223, 223, 228);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease-out, height 0.3s ease-out;
  z-index: -1;
}
.button3:hover::before {
  width: var(--radius, 0);
  height: var(--radius, 0);
}

.carousel-dragging {
  user-select: none;
  -webkit-user-select: none;
}
[class*="BoxContent"] {
  touch-action: pan-y; 
}

.popularSolutionsBoxCartImg object {
  pointer-events: none; 
}

.bg_purple a,.bg_grey a{
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}