html,
body {
  margin: 0;
  padding: 0;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  font-style: Regular;
  line-height: 24px;
  letter-spacing: 0%;
  text-align: right;
  scroll-behavior: smooth;
}
body{
  background:url('../images/bottom-bg.png') no-repeat center bottom 90px/100% 500px;
}

/* 锚点跳转时避免被固定 header 遮挡 */
section[id] {
  scroll-margin-top: 100px;
}
footer {
  background: #000000;
  height: 90px;
  padding:20px 0;
   box-sizing: border-box;
}
.footer{
  margin:0 auto;
  width:1200px;
  height:100%;
  text-align: center;
  color:#fff;
  font-size:16px;
 
}
footer a{
  color:#fff;
}
.footer-top{
  display: flex;
  align-items: center;
  justify-content: center;
  gap:40px;
  opacity: .7;;
}
.footer-bottom{
  opacity: .5;
  font-size:14px;
}
header {
  background: #fff;
  color: #333;
  position: fixed;
  left:0;
  right:0;
  top:0;
  z-index: 100;
}
.header-blank{
  height:80px;
}
.header-inner {
  margin: 0 auto;
  width: 1200px;
  height: 80px;
  line-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-cont {
  display: flex;
  align-items: center;
  padding: 0 20px;
  /* width:1200px; */
  height: 40px;
  margin: 0 auto;
  transition: all 0.2s ease-in-out;
  opacity: 1；;
}

.logo-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 20px;
  height:80px;
}
.logo-wrapper img {
  width: 40px;
  height: 40px;
}
.head-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}
.head-nav a {
  color: #333;
  text-decoration: none;
  cursor: pointer;
  font-size: 20px;
  opacity: .8;
  color:rgba(3, 22, 48, 1);

}
.round-animation {
	position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(255, 255, 255, 0.20);
    width: 280px;
    height: 280px;
    border-radius: 50%;
    margin-left: -140px;
    margin-top: -140px;
    animation: spread 1.5s infinite both;
}
.head-nav a:hover{
  color:rgba(1, 81, 255, 1);
}
section.top {
  height: 720px;
  box-sizing:border-box;
  background:linear-gradient(180deg, rgba(42, 109, 255, 0.3) -7.69%, rgba(255, 255, 255, 0) 94.69%), url("../images/bg.png") no-repeat center top/cover;
}
section.top .top-inner {
  width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  position: relative;
  justify-content:flex-end;
}
section.top .top-left {
  width: 660px;
  height:410px;
  position: relative;
  margin-top:125px;
}

section.top .top-left img.bg{
  width: 110%;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}

section.top .top-left img.icon_1{
  position: absolute;
  width:222px;
  top:-40px;
  left:50%;
}

section.top .top-left img.icon_2{
  position: absolute;
  width:250px;
  left:40px;
  bottom:-60px;
}

.top-right .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 18px;
  background: #FFFFFF99;
  margin-left:60px;
  margin-bottom: 10px;
  border-radius: 60px;
  width: fit-content;
}
.top-right .title2{
  color: rgba(1, 81, 255, 1);
  font-size:50px;
  line-height:50px;
  font-weight: bold;
  margin:10px 0 10px;

}
.top-right .badge img {
  width: 24px;
  height: 24px;
}
.top-right .badge span {
  font-family: Microsoft YaHei;
  font-size: 16px;
  line-height: 24px;
  color: #1d2129;
}

.top-right .title-section {
  text-align: left;
  font-weight: 700;
  font-size: 50px;
  line-height: 50px;
}

.top-right .main-title {
  font-family: Microsoft YaHei;
  font-weight: 700;
  font-size: 54px;
  line-height: 56px;
  background: #000000E5;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  padding: 0;
  width:fit-content;
}

.top-right .description {
  font-family: Microsoft YaHei UI;
  font-size: 16px;
  line-height: 24px;
  color: rgba(3, 22, 48, 1);
  opacity: .8;
  margin:20px 0 0;
}

.top-right .btn-group{
  display:flex;
  align-items:center;
  gap:20px;
}

.top-right .feature-tags {
  display: flex;
  align-items: center;
  width:fit-content;
  border-radius: 10px;
  border: 1px solid #fff;
  overflow: hidden;
}

.top-right .feature-tags .tag {
  padding: 15px 30px 12px;
  font-family: Microsoft YaHei UI;
  font-size: 16px;
  line-height: 22px;
  color: rgba(3, 22, 48, 1);
  background: rgba(255, 255, 255, 0.6);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-right:1px solid #fff;
}
.top-right .feature-tags .tag:last-child{
  border-right: none;
}

.top-right .feature-tags .tag .tag-name{
  color:rgba(255, 148, 65, 1);
  font-size:28px;
  line-height: 28px;
  font-weight:bold;
}

.top-right .download-section {
  display: flex;
  gap: 24px;
  align-items: center;
  margin:30px 0;
}

.top-right .tip{
  color:rgba(3, 22, 48, 1);
  font-size:20px;
  text-align: center;
  text-decoration: underline;
  cursor:pointer;
}

.top-right .download-section .download-btn{
  width:240px;
  color:#fff;
  font-size:24px;
  font-weight:bold;
  height:72px;
}

.top-right .download-section .download-btn .svg-icon{
  width:38px;
  height:38px;
}

.top-list4 .download-btn{
  width:232px;
  height:72px;
  font-size:24px;
  margin:60px auto 0;
}
.top-list4 .download-btn .svg-icon{
  width:30px;
  height:30px;
}

.download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background:rgba(1, 81, 255, 1);
  border-radius: 6px;
  border: none;
  cursor: pointer;
  width: 110px;
  height: 40px;
  box-sizing: border-box;
  position: relative;
  font-family: Microsoft YaHei;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  text-decoration:none;
  overflow: hidden;
  gap:10px;
}

.download-btn:hover{
  opacity: .8;
}
  

.download-btn .svg-icon{
  width: 20px;
  height:20px;
}
.head-nav .download-btn{
  width:128px;
  height:40px;
  color:#1D2129;
}
.top-right .download-note {
  font-family: Microsoft YaHei;
  font-size: 16px;
  line-height: 24px;
  color: #29ff72;
}

.bottom-section .download-btn{
  width: 280px;
  height: 72px;
  border-radius: 16px;
  font-size:24px;
  margin:60px auto 118px;
}
.bottom-section .download-btn.blank{
  color:rgba(1, 81, 255, 1);
  background:#fff;
}
.bottom-section .download-btn .svg-icon{
  width:30px;
  height:30px;
}

.top-right {
  position: absolute;
  left:0;
  top:136px;
  width: 700px;
  height: 410px;
  text-align: left;
}

.top-right .issue-tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 7.971px;
  font-family: Microsoft YaHei;
  font-weight: 700;
  font-size: 19.926px;
  color: white;
  text-shadow: 0px 1.993px 17.934px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  width:232px;
  height:68px;
  box-sizing: border-box;
  justify-content: center;
  text-decoration: none;
  transition:transform .3s ease-in-out;
}

.top-right .issue-tag:hover{
  transform:scale(1.1)
}

.top-right .issue-tag img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.top-right .tag-top-left {
  top: 30px;
  left: 0;
  background: linear-gradient(
    158.1deg,
    #33aafb 27.26%,
    #165de5 60.695%,
    #0e48df 69.666%
  );
  text-shadow: 0px 1.993px 17.934px #0a38b1;
}

.top-right .tag-top-right {
  top: 30px;
  right: 0;
  background: linear-gradient(
    180deg,
    #ff9e45 0%,
    rgba(242, 203, 66, 0.41) 92.754%
  );
  text-shadow: 0px 1.993px 17.934px #dd7210;
}

.top-right .tag-bottom-left {
  bottom: 80px;
  left: 0;
  background: linear-gradient(
    180deg,
    #7737ff 0%,
    rgba(147, 97, 255, 0.4) 92.754%
  );
  text-shadow: 0px 1.993px 17.934px #3b0168;
}

.top-right .tag-bottom-right {
  bottom: 80px;
  right: 0;
  background: linear-gradient(180deg, #0EB8C3 0%, rgba(40, 255, 113, 0.4) 92.754%);
  text-shadow: 0px 1.993px 17.934px #016825;
}

.top-list {
  padding:80px 0;
}

.top-list-inner {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

.top-list-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-bottom: 60px;
}

.top-list-title {
  font-family: Microsoft YaHei;
  font-size: 40px;
  font-weight:bold;
  line-height: 44px;
  color: #1F1933;
  margin: 0;
  text-align: center;
}

.top-list-subtitle {
  font-family: Microsoft YaHei UI;
  font-size: 20px;
  line-height: 28px;
  color: #1F1933;
  opacity:.7;
  margin: 0;
  text-align: center;
}

.top-list-cards,.top-list-cards2,.top-list-cards3,.top-list-cards4 {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  position: relative;
}
.top-list-cards4{
  gap:104px;
  padding:80px 46px 50px;
  border-radius:30px;
  background: url(../images/arrow.png) no-repeat 32% 50%/80px 32px,url(../images/arrow.png) no-repeat 68% 50%/80px 32px,linear-gradient(180deg, #C2DBFF 0%, #F5F9FF 100%);
}
.top-list-cards2{
  flex-direction: column;
  gap:50px;
  width:500px;
}
.top-list-swiper2{
  width:630px;
  height:435px;
  position: absolute;
  right:0;
  bottom:0;
}
.top-list-swiper2 .swiper-list{
  width:600px;
  height:370px;
  overflow: hidden;
  margin:15px;
  box-shadow: 0px 0px 50px 0px rgba(9, 9, 70, 0.1);
}
.top-list-cards3{
  gap:0;
}
.top-list-swiper3{
}
.top-list-swiper3 .swiper-list{
  width:100%;
  height:100%;
  overflow: hidden;
}
.swiper-dot-list{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left:0;
  right:0;
  margin:auto;
  gap:10px;
}
.swiper-dot-list div{
  width:16px;
  height:5px;
  border-radius: 2px;
  background:rgba(0, 0, 0, 0.15);
  cursor:pointer;
}
.swiper-dot-list div.active{
  background:rgba(1, 81, 255, 1);
  width:30px;
}
.issue-card {
  width: 380px;
  height: 410px;
  /* background: linear-gradient(180deg, #FFE6E6 0%, #FFFFFF 40%); */
  background:url('../images/second-bg.png') no-repeat center/contain;
  border-radius: 20px;
  padding: 30px 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  text-align: left;
  box-shadow: 0px 5px 40px 0px rgba(81, 58, 58, 0.1);

}
.top-list-cards2 .issue-card{
  width:500px;
  height:80px;
  padding:0;
  background:transparent;
  display: flex;
  flex-direction: row;
  gap:20px;
  box-shadow: none;
}
.top-list-card3-wrapper{
  box-shadow: 0px 0px 80px 0px rgba(0, 46, 110, 0.2);
  border-radius: 20px;
  overflow: hidden;
}
.top-list-cards3 .issue-card{
  width:400px;
  height:70px;
  padding:20px 0;
  background: rgba(1, 81, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  border-radius: 0;
  box-shadow: none;
  gap:16px;
  border-right:1px solid rgba(0, 0, 0, 0.1);
  border-bottom:1px solid rgba(0, 0, 0, 0.1);
}
.top-list-cards3 .issue-card:last-child{
  border-right: none;
}
.top-list-cards4 .issue-card{
  width:300px;
  height:220px;
  padding:60px 20px;
  background:#fff;
  position: relative;
  box-sizing:border-box;
}
.card-step-header{
  color:rgba(1, 81, 255, 1);
  font-size:20px;
  text-align:center;
}
.card-step-descr{
  color:rgba(3, 22, 48, 1);
  font-size:18px;
  opacity:.5;
}
.card-step-number{
  box-shadow: 0px 10px 30px 0px rgba(0, 46, 152, 0.2);
  width:60px;
  height:60px;
  border-radius:50%;
  color:#fff;
  font-size:34px;
  font-weight:bold;
  position:absolute;
  background: linear-gradient(180deg, #0151FF 0%, #88AEFF 100%);
  text-align: center;
  line-height:60px;
  top:0px;
  left:50%;
  transform:translate(-50% ,-50%);
      font-style: italic;
      text-indent:-.2em;
}
.card-tip-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.card-tip-list-item{
  color: rgba(241, 75, 75, 1);
  font-size:16px;
  border: 1px solid rgba(241, 75, 75, 1);
  padding:8px 12px;
  background: rgba(241, 75, 75, 0.05);
  border-radius: 8px;
}
.card-img{
  width:60px;
  height:60px;
}
.top-list-cards3 .card-img{
  width:28px;
  height:28px;
}
.issue-card .card-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(90deg, rgba(0, 255, 209, 0.1) 0%, rgba(1, 255, 147, 0.1) 100%);
  border-radius: 7.429px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.issue-card .card-icon img{
  width:52px;
  height:52px;
}

.issue-card .card-icon .dx-text {
  font-family: Microsoft YaHei;
  font-weight: 700;
  font-size: 20px;
  color: #47C966;
}

.issue-card .card-title {
  flex: 1;
  font-family: Microsoft YaHei;
  font-size: 22px;
  font-weight: bold;
  line-height: 24px;
  color: rgba(3, 22, 48, 1);
  margin: 0;
}
.top-list-cards2 .issue-card .card-title{
  color:rgba(3, 22, 48, 1);
  font-size:20px;
  margin-bottom: 10px;
}
.top-list-cards3 .issue-card .card-title{
  font-size:20px;
  color:rgba(3, 22, 48, 1);
}
.top-list-cards3 .issue-card.active{
   background:rgba(1, 81, 255, 1);
}
.top-list-cards3 .issue-card.active .card-title{
  color:#fff;
}
.top-list-cards2 .issue-card .card-description{
  color:rgba(3, 22, 48, 1);
  font-size:16px;
  opacity: .7;
  line-height:22px;
}
.card-step-item .card-title{
  margin-bottom: 10px;
}
/* .top-list-cards3 .issue-card .card-step-header {
  margin-bottom:40px;
  font-family: Microsoft YaHei;
font-weight: 700;
font-style: Bold;
font-size: 26px;
line-height: 100%;
letter-spacing: 0%;

  text-align:center;
}
.top-list-cards3 .issue-card.first .card-step-header{
  color:#7752FE;
}
.top-list-cards3 .issue-card.second .card-step-header{
  color:#283EFF;
} */

.issue-card .card-description {
  font-family: Microsoft YaHei UI;
  font-size: 16px;
  line-height: 24px;
  color: rgba(3, 22, 48, 1);
  margin: 0;
}
.issue-card .card-tip{
  padding:4px 10px;
  background: #7752FE1A;
  color: #7752FE;
  border-radius: 12px;
  font-size:14px;
  width: fit-content;
  margin:10px 0 0;
}

.card-step-item{
  padding-left:56px;
  position:relative;
}

.card-num{
  position: absolute;
  left: 0;
  top: 0;
  width:36px;
  height:36px;
  background:#7752FE;
  color:#fff;
  box-shadow: 0px 2px 20px 0px #4111ED33;
  border-radius:50%;
  text-align:center;
  line-height:36px;
  font-size:20px;
  font-style:italic;
  font-weight:bold;
  text-indent:-.15em;

}
.second .card-num{
  background:#283EFF;
}
.card-step-list{
  display: flex;
  flex-direction: column;
  gap:60px;
}
.middle-nav-list{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    width:fit-content;
    margin:0 auto;
}
.middle-nav-item{
    width:174px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:22px;
    border-radius:50px;
    box-sizing: border-box;
    border:2px solid transparent;
    background-origin: border-box;
    background-clip: content-box,border-box;
    background-image:linear-gradient(#fff,#fff),linear-gradient(180deg, #30FF90 0%, #1B9CE3 100%);
}
.middle-nav-item.active{
    background-image:linear-gradient(122.64deg, #359EFF 20.04%, #0239FF 72.36%),linear-gradient(180deg, #30FF90 0%, #1B9CE3 100%);
    color:#fff;
}
.middle-nav-item.active .svg-icon{
    color:#fff;
}
.swiper-item{
  width:600px;
  height:370px;
}
.swiper-item img {
  width:100%;
  height:100%;
  display: block;
  margin:0;
}
.top-line-group{
  display:flex;
  align-items:center;
  gap:10px;
  background: rgba(1, 81, 255, 0.05);
  justify-content: center;
  border-radius:10px;
  padding:17px 24px;
  width:fit-content;
  margin:0 auto 60px;
}
.top-line-group .download-target{
  color:rgba(1, 81, 255, 1);
}
.top-line-group img {
  width:30px;
  height:30px;
}
.list-unit{
  display:flex;
  align-items:center;
  height:80px;
  background:#fff;
}
.list-unit .list-item{
  flex:1 0 25%;
  text-align:left;
  padding-left:30px;
  font-size:18px;
  color:rgba(3, 22, 48, 1);
}
.list-unit .list-item:nth-child(1){
  flex:1 0 30%;
}
.list-unit .list-item:nth-child(2){
  flex:1 0 20%;
}
.list-unit .list-item:nth-child(3){
  flex:1 0 20%;
}
.list-unit .list-item:nth-child(4){
  flex:1 0 30%;
}
.list-item-tag{
  font-size:13px;
  padding:4px 10px;
  border-radius: 4px;
  width:46px;
  text-align: center;
  height:24px;
  text-indent: 0;
  box-sizing: border-box;
  line-height:17px;
}
.list-item-tag.green{
  color:rgba(0, 106, 53, 1);
  background:rgba(12, 157, 85, 0.1);
}
.list-item-tag.blue{
  color:rgba(1, 81, 255, 1);
  background:rgba(1, 81, 255, 0.1);
}
.list-item-tag.yellow{
  color:rgba(215, 111, 0, 1);
  background:rgba(255, 134, 4, 0.1);
}
.list-item-header-title{
  display:flex;
  align-items: center;
  box-sizing: border-box;
  gap:10px;
}
.list-unit.header{
  height:60px;
  background:rgba(1, 81, 255, 0.08);
}
.list-item-header{
}
.list-item-header-descr{
  color:rgba(3, 22, 48, 1);
  opacity: .5;
  margin-top:4px;
  font-size:14px;
}
/* .top-list-swiper3 .swiper-item img{
  transform:scale(1.0)
} */
.middle-content-item{
    display: flex;
    align-items: center;
    
    height:380px;
    gap:30px;
}
.middle-content-list{
    margin:40px auto 0;
    width:1200px;
    overflow:hidden;
}
.middle-content-left{
    width:600px;
}
.middle-content-left img{
    width:600px;
    object-fit: cover;
}
.middle-content-right{
      color:#000;
      text-align: left;
}
.middle-content-right-title{
    font-size:26px;
    font-weight: bold;
    margin-bottom:20px;
    display:flex;
    align-items:center;
    gap:10px;
}
.middle-content-right-title img {
  width:50px;
  height:50px;
}
.middle-content-right-descr{
    color: #4E5969;
    font-size:16px;
    display: flex;
    flex-direction: column;
    gap:10px;
}
.middle-content-right-descr .text{
  position: relative;
  text-indent:20px;
}
.middle-content-right-descr .text:before{
  content:'';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: #4E5969;
  border-radius: 50%;

}
.middle-content-right-download{
    background:url('../images/btn-bg.svg') no-repeat center/100% auto, linear-gradient(90deg, #00FFD1 0%, #01FF93 100%);
    color:#1D2129;
    width:254px;
    height:70px;
    display: flex;
    justify-content: center;
    padding-top:12px;
    box-sizing: border-box;
    font-size:20px;
    gap:3px;
    border-radius: 50px;
    margin-top:60px;
    margin-left:120px;
    position:relative;
    cursor:pointer;
    text-decoration: none;
}

.middle-content-right-download .bottom{
  position: absolute;
  bottom:8px;
  color:#0B6229;
  font-size:14px;
}

.middle-content-right-download .top{
  position: absolute;
  width:225px;
  top:-20px;
  right:-80px;
}
.middle-content-right-download .top img{
  width:100%;
}

.middle-content-right-download:hover{
    background:url('../images/btn-bg.svg') no-repeat center/100% auto, linear-gradient(90deg, #00BBFF 0%, #01FF93 100%);

}
.middle-content-right-download .svg-icon{
    width:24px;
    height:24px;
}

.round-animation {
position: absolute;
top: 50%;
left: 50%;
background: rgba(255, 255, 255, 0.20);
width: 280px;
height: 280px;
border-radius: 50%;
margin-left: -140px;
margin-top: -140px;
animation: spread 1.5s infinite both;
}
.round-animation-wrapper{
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
overflow: hidden;
border-radius:50px;
}

@keyframes spread {
0% {
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
opacity: 1;
}

100% {
transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}

.game-section{
  overflow: hidden;
  text-align: center;
  /* margin-top:60px; */
  background:url('../images/game-bg.png') no-repeat center /100% 780px;
}

.game-section-btn{
  width:88px;
  height:28px;
  margin:27px auto 0;
}

.game-section-btn img{
  width:100%;
  height:100%;
}
.game-section-safe-list{
  width:680px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:40px;
  margin:34px auto;
}
.game-section-safe-item{
  width:320px;
  height:92px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:16px;
  box-shadow: 0px 4px 14px 0px #D0F2E3;
  background:#fff;
  border-radius: 10px;

}
.game-section-safe-item img{
  width:48px;
  height:48px;
}
.game-section-safe-item-content{
  width:160px;
  text-align: left;
}
.game-section-safe-item-content-title{
  color:#1D2129;
  font-size:20px;
}
.game-section-safe-item-content-descr{
  color:#86909C;
  font-size:16px;
  margin-top:6px;
}
.game-section-title{
  color:#fff;
  font-size:40px;
  font-weight:bold;
  line-height:40px;
  margin-top:80px;
}
.game-section-descr{
  font-size:20px;
  margin-top:12px;
  color:#fff;
}
.game-section-number-list{
  display: flex;
  align-items: center;
  width:1200px;
  height:200px;
  margin:40px auto;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #879FFF 0%, #DDE7FC 100%);

  border-radius: 40px;
}
.game-section-number-item{
  display: flex;
  flex-direction: column;
  gap:6px;
  width:300px;
  height:100px;
  border-right:1px solid  #1F193333;
  font-size:16px;
  color:#1F1933;
}
.game-section-number-item:last-child{
  border-right:none;
}
.game-section-number-item-value{
  font-size: 56px;
  font-weight: bold;
  color:rgba(23, 22, 26, 1);
  line-height:60px;
 
}
.game-section-number-item-value .small{
  font-size:30px;
  display: inline-block;
  margin-left:5px;
}
.game-section-number-item-value img {
  width:124px;
  margin:-4px 0;
}
.game-section-list{
  display: flex;
  width:1200px;
  height:214px;
  align-items: center;
  justify-content: space-around;
  margin:80px auto 80px;
  gap:20px;
}
.game-section-item{
  position: relative;
  width:380px;
  height:208px;
  text-align: center;
  padding:20px;
  box-sizing: border-box;
  border-radius: 12px;
  background: radial-gradient(62.79% 95.25% at 52.85% 100%, rgba(73, 91, 207, 0.8) 0%, rgba(4, 30, 69, 0.8) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}
.game-section-item-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.game-section-item-top .star{
  width:124px;
  height:20px;
}

.game-section-item-content{
  color:#fff;
  font-size:14px;
  margin:20px 0;
  text-align: left;
  height:60px;
  line-height:22px;
}
.game-section-item-bottom{
  display: flex;
  align-items: center;
  gap:10px;
}

.game-section-item-bottom .head{
  width:40px;
  height:40px;
  margin-right:6px;
}

.game-section-item-bottom  .content{
  text-align:left;
}

.game-section-item-bottom .name{
  font-size:16px;
  color:#fff;
}


.game-section-item-bottom .descr{
  font-size:14px;
  opacity: .7;;
  color:#fff;
}

.bottom-section{
  width:690px;
  margin:0 auto;
  width:690px;
  text-align: center;
}
.bottom-section-title{
  font-family: Microsoft YaHei;
  font-weight: 700;
  font-style: Bold;
  font-size: 60px;
  margin-top:118px;
  line-height: 80px;
  letter-spacing: 0%;
  text-align: center;
  color:#000;
}
.bottom-section-tip{
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0%;
  text-align: center;
  color:rgba(3, 22, 48, 1);
  margin-top:20px;
}
.bottom-group-list{
  display:flex;
  gap:20px;
}
.bottom-sectino-list{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
}
.bottom-sectino-item{
  padding:8px 12px;
  height:37px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:16px;
  background:#fff;
  border-radius:20px;
  box-sizing:border-box;
}
.bottom-sectino-item .svg-icon{
  width:16px;
  height:16px;
  color:#5D31FF;
}
.back-top{
  box-shadow: 0px 4px 12px 0px #D3E6FB;
  background:#fff;
    width:110px;
    height:110px;
    cursor:pointer;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom:100px;
    left:calc(50% + 635px);
    z-index:100;
}
.back-top img{
  width:48px;
  height:48px;
}
.hide{
  display:none;
}
.fix-dialog{
  width:272px;
  height:320px;
  top:100px;
  left:calc(50% + 635px);
  z-index:100;
  position:fixed;
  background:url('../images/dialog-bg.svg') no-repeat center/contain;
  text-align:left;
  color:#fff;
  padding:20px;
  box-sizing:border-box;
}
.fix-dialog-title{
  font-size:34px;
  font-weight:bold;
  margin-top:10px;
}
.fix-dialog-descr{
  font-size:16px;
  margin-top:8px;
}

.fix-dialog-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px 20px;
  margin-top:23px;
}

.fix-dialog-list div{
  width:92px;
  width: 93px;
  height: 30px;
  padding:6px 10px;
  line-height:18px;
  border-radius: 17.07px;
  background:#fff;
  font-size:12px;
  color:#49455C;
  text-align:center;
  font-size:12px;
  box-sizing:border-box;
}


.faq-list{
  width: 1080px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin:60px auto;
  gap:30px;
} 
.faq-list-item{
  width:100%;
  text-align: left;
  padding:0;
  background:#fff;
  border-radius:10px;
}
.faq-list-item-top{
  display: flex;
  align-items: center;
  gap:5px;
  height:67px;
  padding:0 30px;
  cursor:pointer;
  border-bottom:1px solid rgba(0, 0, 0, 0.1);
}
.close .faq-list-item-top{
  border-bottom:none;
}
.faq-list-item-top img{
  width:30px;
  height:30px;
}
.faq-list-item-top span{
  margin-right:auto;
  font-size:20px;
  color:rgba(3, 22, 48, 1);
}
.faq-list-item-text{
  font-size:20px;
  color:rgba(3, 22, 48, 1);
  padding:20px 30px;
  line-height:30px;
  opacity:.7;
}
.faq-list-item.close .faq-list-item-text{
  display: none;
}
.faq-list-item.close .collapse{
  transform:rotate(180deg);
}
.faq{
  overflow: hidden;
  background:rgba(245, 249, 255, 1);
}
.faq-list-item-top img.collapse{
  cursor:pointer;
}
.faq-title{
  color:rgba(3, 22, 48, 1);
  font-size:40px;
  margin-top:80px;
  text-align: center;
  font-weight: bold;
}
.faq-descr{
  color:#4E5969;
  text-align: center;;
  margin-top:12px;
}