@charset "UTF-8";

/* ============================================
   基础重置 & 全局
   ============================================ */
*{margin:0;padding:0}
html{background-attachment:fixed}
h1,h2,h3,h4,h5,h6{font-size:100%}
li{list-style:none}
img{border:0;vertical-align:top}
body{
  font:.14rem/1.6 "Microsoft YaHei",Arial,Helvetica,sans-serif;
  -webkit-text-size-adjust:none;
  background:#fffdf8;
  color:#000;
  min-width:1200px;
}
body.nav-open{overflow:hidden}
a{outline:0;text-decoration:none;color:inherit}
input,textarea{border:0;outline:0;background:0 0;font-family:inherit}

/* rem 基准：屏幕宽/19.2 */
html{font-size:calc(100vw / 19.2)}

#container{width:100%;margin:0 auto;overflow:hidden}
#container,#content,#footer,#header,.section{position:relative}

.wrap{width:12rem;margin:0 auto;position:relative}

/* ============================================
   标题图片（纯CSS文字替代）
   ============================================ */
.title{font-size:0;margin:0 auto;text-align:center;padding-top:.65rem}

.title.tt_news::before,
.title.tt_tese::before,
.title.tt_download::before,
.title.tt_service::before{
  display:block;
  font-size:.48rem;
  font-weight:bold;
  font-family:'SimSun','FangSong',serif;
  color:#3a2010;
  letter-spacing:.12rem;
}
.title.tt_news::before{content:"游戏资讯"}
.title.tt_tese::before{content:"游戏特色"}
.title.tt_download::before{content:"下载中心"}
.title.tt_service::before{content:"客服中心"}

.title::after{
  content:"";
  display:block;
  width:.8rem;
  height:.04rem;
  background:#bc4d2a;
  margin:.15rem auto 0;
  border-radius:.02rem;
}

/* ============================================
   顶部导航栏
   ============================================ */
.top-nav{
  top:0;
  left:50%;
  margin-left:-9.6rem;
  padding-left:6.1rem;
  box-sizing:border-box;
  background-color:rgba(42,37,37,0.72);
  font-size:0;
  position:absolute;
  width:19.2rem;
  height:.6rem;
  z-index:10;
}
.top-nav li{
  position:relative;
  display:inline-block;
  text-align:center;
  vertical-align:top;
  line-height:.6rem;
  width:1.6rem;
  font-size:.2rem;
  color:#a08d6b;
  cursor:pointer;
}
.top-nav li a{
  color:#a08d6b;
  display:block;
  height:100%;
  letter-spacing:.018rem;
}
.top-nav li:not(:first-child):hover a{
  color:#f5d58d;
  background:linear-gradient(180deg, rgba(188,77,42,0.2), transparent);
}
/* 网站 Logo - 导航栏左侧独立显示 */
.site-logo{
  position:absolute;
  top:.05rem;
  left:3.7rem;
  z-index:100;
  display:block;
}
.site-logo img{
  height:.9rem;
  width:auto;
  display:block;
}

/* ============================================
   Hero 主视觉区
   ============================================ */
.main-ban{
  position:relative;
  width:100%;
  height:9.2rem;
  overflow:hidden;
}
.main-ban .main-bg{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  z-index:1;
  overflow:hidden;
  height:100%;
}
.main-bg-wrap{
  position:relative;
  left:50%;
  width:19.2rem;
  margin-left:-9.6rem;
  height:100%;
}

/* Hero 背景 - 用户提供的游戏壁纸图片 */
.index-header-image{
  width:19.2rem;
  height:10.9rem;
  background-image:url("../images/hero-bg.jpg");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  position:relative;
}
/* 图片底部渐变遮罩，轻轻过渡 */
.index-header-image::before{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:20%;
  background:linear-gradient(180deg, transparent 0%, rgba(255,253,248,0.15) 50%, rgba(255,253,248,0.7) 100%);
}

.bg-cover{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  z-index:3;
  width:100%;
  height:1.2rem;
  background:linear-gradient(to top, #fffdf8 0%, rgba(255,253,248,0.6) 60%, transparent 100%);
}

.banner-link{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  font-size:0;
  z-index:6;
}
.banner-link a{height:100%;display:block}

/* ============================================
   下载面板
   ============================================ */
#header{}
#header .wrap{height:9.2rem}

.header-down{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:6.15rem;
  z-index:3;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='844' height='196'%3E%3Crect fill='rgba(20,14,28,0.85)' width='844' height='196' rx='12'/%3E%3Crect fill='none' stroke='rgba(188,77,42,0.4)' stroke-width='2' x='1' y='1' width='842' height='194' rx='12'/%3E%3C/svg%3E") no-repeat 0 0/8.44rem 1.96rem;
  width:8.44rem;
  height:1.96rem;
}
.header-down .code{
  width:1.5rem;
  height:1.5rem;
  margin-left:.15rem;
  margin-top:.15rem;
  float:left;
}
.header-down .code img{
  width:1.5rem;
  height:1.5rem;
  display:block;
}
.header-down .code p{
  font-size:.18rem;
  color:#e4c19e;
  text-align:center;
  margin-top:.02rem;
}
.header-down .down{
  float:left;
  margin-left:.09rem;
  margin-top:.15rem;
  width:1.65rem;
}
.header-down .down .btn-pc-down{
  display:block;
  width:1.65rem;
  height:1.68rem;
  margin:0;
  background:linear-gradient(135deg, #bc4d2a, #8b2e1e);
  border-radius:.12rem;
  color:#fff9f0;
  font-size:.22rem;
  font-weight:bold;
  text-align:center;
  line-height:1.68rem;
  letter-spacing:.04rem;
  transition:all .2s;
}
.header-down .down .btn-pc-down:hover{
  box-shadow:0 0 .3rem rgba(188,77,42,0.6);
}
.header-down .other{
  float:left;
  margin-left:.09rem;
  margin-top:.15rem;
}
.header-down .other .btn-czhi{
  display:block;
  width:2.68rem;
  height:.8rem;
  font-size:0;
  background:linear-gradient(135deg, #d4a849, #a07830);
  border-radius:.08rem;
  color:#fff9f0;
  font-size:.22rem;
  font-weight:bold;
  text-align:center;
  line-height:.8rem;
  letter-spacing:.04rem;
  transition:all .2s;
}
.header-down .other .btn-czhi:hover{opacity:.9}
.header-down .other .add-official-group{
  display:block;
  width:2.68rem;
  height:.8rem;
  margin-top:.08rem;
  font-size:0;
  background:linear-gradient(135deg, #5a3e6e, #3a1e4e);
  border-radius:.08rem;
  color:#fff9f0;
  font-size:.22rem;
  font-weight:bold;
  text-align:center;
  line-height:.8rem;
  letter-spacing:.04rem;
  transition:all .2s;
}
.header-down .other .add-official-group:hover{opacity:.9}
.header-down .header_xf{
  float:left;
  margin-left:.09rem;
  margin-top:.15rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='206' height='168'%3E%3Crect fill='rgba(30,20,40,0.8)' width='206' height='168' rx='8'/%3E%3C/svg%3E") no-repeat 0 0/2.06rem 1.68rem;
  width:2.06rem;
  height:1.68rem;
  text-align:center;
}
.header-down .header_xf .hxf_tt{
  height:.48rem;
  line-height:.48rem;
  color:#fff;
  font-weight:700;
  font-size:.24rem;
  letter-spacing:.02rem;
}
.header-down .header_xf strong{
  color:#d3693e;
  font-size:.21rem;
  font-weight:700;
  display:block;
  line-height:.4rem;
  margin-top:.15rem;
  letter-spacing:.02rem;
}
.header-down .header_xf .hxf_more{
  display:block;
  font-size:.16rem;
  color:#fff;
  line-height:.35rem;
  text-align:center;
  font-weight:700;
  background:linear-gradient(135deg, rgba(188,77,42,0.6), rgba(139,46,30,0.6));
  width:1.31rem;
  height:.35rem;
  margin:.1rem auto 0;
  border-radius:.04rem;
}
.header-down .header_xf .hxf_more:hover{opacity:.9}

/* ============================================
   新闻资讯区块
   ============================================ */
.news{
  height:8.1rem;
  background:linear-gradient(180deg, #fffdf8 0%, #faf6ee 30%, #f5efe0 100%);
  position:relative;
}
.news::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:radial-gradient(ellipse at 20% 80%, rgba(188,77,42,0.06) 0%, transparent 60%);
  pointer-events:none;
}

.news-box{
  width:13.2rem;
  height:5.11rem;
  position:relative;
  margin-top:.16rem;
  margin-left:-.6rem;
  box-sizing:border-box;
  background:linear-gradient(180deg, rgba(255,253,248,0.95), rgba(250,246,238,0.95));
  border-radius:.12rem;
  box-shadow:0 .08rem .4rem rgba(0,0,0,0.08);
}

/* 左侧轮播 */
.hot-main{
  position:absolute;
  top:.6rem;
  left:.57rem;
  z-index:20;
  width:5rem;
  height:3.56rem;
}
.hot-main .swiper{
  width:5rem;
  height:3.56rem;
  padding-bottom:.3rem;
}
.hot-main .swiper-slide{
  width:5rem;
  height:3.56rem;
  float:left;
}
.hot-slide-img{
  width:5rem;
  height:3.4rem;
  margin:.12rem 0;
  border-radius:.08rem;
  display:block;
  object-fit:cover;
}

.hot-main .hot-pagination{
  position:absolute;
  right:1.8rem;
  bottom:0;
  z-index:30;
  width:100%;
  text-align:center;
}
.hot-main .hot-pagination span{
  transform:rotate(45deg);
  position:relative;
  width:.08rem;
  height:.08rem;
  margin:0 .08rem!important;
  border-radius:.015rem;
  background-color:#3d3c3b;
  cursor:pointer;
  z-index:30;
  display:inline-block;
}
.hot-main .hot-pagination span.swiper-pagination-bullet-active{
  background:#bc4d2a;
  opacity:1;
}

.img-cover{
  position:absolute;
  top:.6rem;
  left:.57rem;
  width:5rem;
  height:3.56rem;
  border-radius:.08rem;
  pointer-events:none;
  z-index:25;
}

/* 右侧新闻列表 */
.news-content-box{
  width:6.65rem;
  top:.75rem;
  left:5.8rem;
  padding:0 .33rem 0 .62rem;
  z-index:10;
  height:3.77rem;
  position:absolute;
  box-sizing:border-box;
}
.news-content-box .hd{
  margin-top:0;
  position:relative;
}
.news-content-box .hd ul{font-size:0}
.news-content-box .hd li{
  display:inline-block;
  cursor:pointer;
  position:relative;
  height:.6rem;
  margin-right:.45rem;
  line-height:.7rem;
  font-size:.24rem;
  letter-spacing:.02rem;
  text-align:center;
  color:#313735;
}
.news-content-box .hd li.on,
.news-content-box .hd li:hover{
  color:#bc4d2a;
  border-bottom:.03rem solid #bc4d2a;
  font-weight:700;
}
.news-line{
  height:.02rem;
  width:6.27rem;
  position:relative;
  top:-.02rem;
  z-index:-1;
  background:#e8e4dc;
}
.news-content-box .hot-news-wrap{
  display:flex;
  align-items:center;
  margin-top:.4rem;
  padding:0 .2rem;
}
.news-content-box .recommend-news{
  font-size:.24rem;
  color:#bc4d2a;
  font-weight:bold;
  margin-right:.12rem;
  flex-shrink:0;
}
.news-content-box .more{
  position:absolute;
  right:-.54rem;
  top:.18rem;
  font-size:.24rem;
  color:#313735;
  text-align:center;
  letter-spacing:.005rem;
  cursor:pointer;
  transition:all .4s ease;
}
.news-content-box .more:hover{color:#bc4d2a}
.news-content-box .more i{
  display:inline-block;
  width:.27rem;
  height:.27rem;
  vertical-align:middle;
  margin-left:.05rem;
  background:#bc4d2a;
  border-radius:50%;
  position:relative;
}
.news-content-box .more i::after{
  content:">";
  color:#fff;
  font-size:.18rem;
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}

.news-content-box .hot-news-title{
  display:block;
  font-size:.24rem;
  font-weight:700;
  color:#bc4d2a;
  line-height:.46rem;
  overflow:hidden;
  word-break:keep-all;
  white-space:nowrap;
  text-overflow:ellipsis;
  padding:0;
  margin-left:.1rem;
}
.news-content-box .hot-news-title:hover{filter:brightness(1.1)}

.news-content-box .news-list{
  display:none;
  margin-top:.1rem;
}
.news-content-box .news-list.on{display:block}
.news-content-box .news-list a{
  position:relative;
  display:block;
  height:.4rem;
  line-height:.4rem;
  font-size:.16rem;
  color:#313735;
  transition:color .2s;
}
.news-content-box .news-list a:hover{color:#bc4d2a}
.news-content-box .news-list span{
  display:inline-block;
  width:75%;
  height:.5rem;
  line-height:.5rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.003rem;
  vertical-align:middle;
  word-break:keep-all;
}
.news-content-box .news-list span.time{
  position:absolute;
  right:-.6rem;
  top:0;
  width:.6rem;
  color:#999;
}
.news-content-box .news-list em{
  display:inline-block;
  margin-right:.04rem;
  font-style:normal;
  color:#bc4d2a;
  font-weight:bold;
}
.news-content-box .news-list i.icon{
  display:none;
}

/* ============================================
   游戏特色区块
   ============================================ */
.tese{
  height:10.6rem;
  background:linear-gradient(180deg, #f5efe0 0%, #1a1038 40%, #0d0a1e 100%);
  position:relative;
}
.tese .title::before{color:#f5d58d}
.tese .title::after{background:#f5d58d}

.tese-main{
  width:12rem;
  height:6.82rem;
  background:rgba(20,14,36,0.6);
  border-radius:.12rem;
  margin-top:.3rem;
  position:relative;
  border:1px solid rgba(245,213,141,0.2);
}
.tese-main .swiper{
  width:11.35rem;
  height:6.37rem;
  padding-top:.22rem;
}
.tese-main .swiper-slide{
  float:left;
  width:100%;
  height:100%;
}
.tese-slide-img{
  width:11.35rem;
  height:6.37rem;
  margin:0 auto;
  border-radius:.08rem;
  display:block;
  object-fit:cover;
}

.tese-main .tese-pagination{
  position:absolute;
  right:0;
  bottom:-.52rem;
  width:100%;
  text-align:center;
}
.tese-main .tese-pagination span{
  display:inline-block;
  margin:0 .27rem!important;
  opacity:1;
  font-size:0;
  width:.12rem;
  height:.12rem;
  border-radius:50%;
  background:rgba(245,213,141,0.3);
  cursor:pointer;
  transition:all .3s;
}
.tese-main .tese-pagination span.swiper-pagination-bullet-active{
  background:#f5d58d;
  box-shadow:0 0 .15rem rgba(245,213,141,0.6);
}

/* ============================================
   下载中心区块
   ============================================ */
.download-section{
  padding-bottom:1.2rem;
  background:#fffdf8;
}
.download-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.3rem;
  margin-top:.5rem;
}

.download-card{
  background:#fff;
  border-radius:.12rem;
  padding:.5rem .4rem;
  text-align:center;
  box-shadow:0 .04rem .2rem rgba(0,0,0,0.06);
  transition:all .3s;
  position:relative;
  border:1px solid #eee;
}
.download-card:hover{
  transform:translateY(-.06rem);
  box-shadow:0 .12rem .4rem rgba(0,0,0,0.12);
  border-color:#d4a849;
}
.download-card.recommend{
  border-color:#d4a849;
  border-width:.02rem;
}

.recommend-badge{
  position:absolute;
  top:.16rem;
  right:.16rem;
  padding:.03rem .12rem;
  background:linear-gradient(135deg, #bc4d2a, #d3693e);
  color:#fff;
  font-size:.14rem;
  font-weight:700;
  border-radius:.5rem;
  letter-spacing:.02rem;
}

.download-card-icon{
  width:.8rem;
  height:.8rem;
  margin:0 auto .2rem;
  border-radius:.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ios-icon{background:linear-gradient(135deg, #2a4060, #1a3050)}
.android-icon{background:linear-gradient(135deg, #2a6040, #1a5030)}
.pc-icon{background:linear-gradient(135deg, #4a3060, #3a2050)}

.download-card h3{
  font-size:.28rem;
  color:#1a1038;
  margin-bottom:.08rem;
  letter-spacing:.04rem;
}
.download-version{
  color:#bc4d2a;
  font-size:.18rem;
  font-weight:600;
  margin-bottom:.08rem;
}
.download-desc{
  color:#888;
  font-size:.15rem;
  margin-bottom:.3rem;
  line-height:1.8;
}
.qr-box{margin-bottom:.24rem}
.qr-code-img{
  width:1.2rem;
  height:1.2rem;
  margin:0 auto .1rem;
  border-radius:.08rem;
  box-shadow:0 .02rem .1rem rgba(0,0,0,0.1);
  display:block;
}
.qr-box p{color:#999;font-size:.14rem}

.btn-gold{
  display:inline-block;
  padding:.12rem .5rem;
  background:linear-gradient(135deg, #d4a849, #b8862e);
  color:#fff;
  border-radius:.06rem;
  font-size:.18rem;
  font-weight:700;
  letter-spacing:.04rem;
  cursor:pointer;
  transition:all .2s;
  border:none;
}
.btn-gold:hover{
  box-shadow:0 .04rem .2rem rgba(212,168,73,0.4);
  transform:translateY(-.02rem);
}

/* ============================================
   客服中心
   ============================================ */
.service-section{
  padding-bottom:1.2rem;
  background:linear-gradient(180deg, #fffdf8 0%, #faf6ee 100%);
}
.service-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:.4rem;
  margin-top:.5rem;
}
.service-faq h3,
.service-contact h3{
  font-size:.28rem;
  color:#1a1038;
  margin-bottom:.3rem;
  letter-spacing:.04rem;
  font-weight:bold;
  padding-bottom:.15rem;
  border-bottom:.02rem solid #bc4d2a;
}

/* FAQ */
.faq-list{}
.faq-item{
  border-bottom:1px solid #eee;
}
.faq-question{
  padding:.2rem 0;
  font-size:.18rem;
  color:#313735;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:color .2s;
  user-select:none;
}
.faq-question:hover{color:#bc4d2a}
.faq-arrow{
  display:inline-block;
  width:.2rem;
  height:.2rem;
  position:relative;
  transition:transform .3s;
}
.faq-arrow::before,
.faq-arrow::after{
  content:"";
  position:absolute;
  background:#999;
  transition:all .3s;
}
.faq-arrow::before{
  width:.14rem;
  height:.02rem;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.faq-arrow::after{
  width:.02rem;
  height:.14rem;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.faq-item.open .faq-arrow{transform:rotate(45deg)}
.faq-item.open .faq-arrow::before,
.faq-item.open .faq-arrow::after{background:#bc4d2a}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease, padding .4s ease;
  font-size:.16rem;
  color:#666;
  line-height:1.8;
  padding:0 0 0 .1rem;
}
.faq-item.open .faq-answer{
  max-height:3rem;
  padding:.1rem .1rem .25rem .1rem;
}

/* 联系方式 */
.contact-list{
  background:#fff;
  border-radius:.08rem;
  padding:.25rem .3rem;
  box-shadow:0 .02rem .1rem rgba(0,0,0,0.05);
  margin-bottom:.3rem;
}
.contact-item{
  display:flex;
  justify-content:space-between;
  padding:.15rem 0;
  border-bottom:1px solid #f5f5f5;
}
.contact-item:last-child{border-bottom:none}
.contact-label{color:#888;font-size:.16rem}
.contact-value{color:#1a1038;font-size:.16rem;font-weight:600}

/* 反馈表单 */
.feedback-form h4{
  font-size:.2rem;
  color:#1a1038;
  margin-bottom:.15rem;
}
.form-input,
.form-textarea{
  width:100%;
  box-sizing:border-box;
  padding:.12rem .16rem;
  border:1px solid #e0e0e0;
  border-radius:.06rem;
  font-size:.16rem;
  margin-bottom:.12rem;
  background:#fff;
  transition:border-color .2s;
}
.form-input:focus,
.form-textarea:focus{
  border-color:#bc4d2a;
  outline:none;
}
.form-textarea{
  height:1rem;
  resize:vertical;
}
.form-submit{
  width:100%;
  padding:.14rem 0;
  font-size:.18rem;
}

/* ============================================
   页脚
   ============================================ */
.foot{
  background-color:#01040b;
  font-size:.12rem;
  color:#999;
  margin-top:-.01rem;
  clear:both;
}
.foot .bottom-content{
  padding:.38rem 0;
  width:100%;
}
.foot .site-link,
.foot p{
  text-align:center;
  line-height:.3rem;
}
.foot .site-link a{color:#fff;text-decoration:none}
.foot .site-link i{text-decoration:none;margin:0 .05rem}
.foot p{line-height:.25rem;padding-top:.1rem}

/* ============================================
   二维码弹窗
   ============================================ */
.qr-modal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7);
  z-index:9999;
  align-items:center;
  justify-content:center;
}
.qr-modal.active{
  display:flex;
}
.qr-modal-content{
  background:#fff;
  border-radius:.12rem;
  padding:.4rem .5rem;
  text-align:center;
  position:relative;
  max-width:3.6rem;
  box-shadow:0 .2rem .6rem rgba(0,0,0,0.3);
  animation:qrModalIn .3s ease;
}
@keyframes qrModalIn{
  from{transform:scale(0.8);opacity:0}
  to{transform:scale(1);opacity:1}
}
.qr-modal-content h3{
  font-size:.28rem;
  color:#1a1038;
  margin-bottom:.2rem;
  letter-spacing:.04rem;
}
.qr-modal-content img{
  width:2.4rem;
  height:2.4rem;
  border-radius:.06rem;
  margin-bottom:.15rem;
}
.qr-modal-content p{
  font-size:.16rem;
  color:#666;
}
.qr-modal-close{
  position:absolute;
  top:.1rem;
  right:.15rem;
  font-size:.32rem;
  color:#999;
  cursor:pointer;
  line-height:1;
  transition:color .2s;
}
.qr-modal-close:hover{color:#bc4d2a}
.foot p span{padding:0 .05rem;display:inline-block}
.foot .foot_enter{font-size:0}
.foot .foot_enter li{
  display:inline-block;
  font-size:.14rem;
}
.foot .foot_enter li:last-child i{display:none}

/* ============================================
   左侧悬浮栏
   ============================================ */
.left-bar{
  background:linear-gradient(180deg, rgba(20,14,36,0.95), rgba(10,5,20,0.95));
  border:1px solid rgba(212,168,73,0.3);
  border-radius:.12rem;
  width:2.1rem;
  height:5.1rem;
  position:fixed;
  left:.2rem;
  top:50%;
  transform:translateY(-50%);
  z-index:500;
  display:none;
  box-shadow:0 0 .3rem rgba(0,0,0,0.3);
}
.left-bar-cont{
  position:relative;
  margin-top:.3rem;
  padding:0 .4rem;
  width:auto;
}
.left-bar .fold,
.left-bar .unfold{
  position:absolute;
  z-index:2;
  top:2.12rem;
  display:none;
  cursor:pointer;
  width:.25rem;
  height:.66rem;
  padding-top:.13rem;
  padding-left:.03rem;
  font-size:.16rem;
  color:#a08d6b;
  line-height:.18rem;
  left:-.25rem;
  background:rgba(20,14,36,0.8);
  border-radius:.04rem 0 0 .04rem;
  text-align:center;
}
.left-bar .down-code{position:relative;margin-top:.2rem}
.left-bar .down-code .code{
  width:1.24rem;
  height:1.24rem;
  background:#fff;
  border:.02rem solid #636b65;
  box-sizing:border-box;
  margin:0 auto;
  border-radius:.06rem;
}
.left-bar .down-code img{
  width:100%;
  display:block;
}
.left-bar .down-code p{
  font-size:.15rem;
  line-height:.18rem;
  color:#a08d6b;
  text-align:center;
  margin-top:.06rem;
}
.left-bar .left-bar-btn{margin-top:.15rem}
.left-bar .left-bar-btn a{
  display:block;
  margin-bottom:.06rem;
  line-height:.38rem;
  text-align:center;
  color:#fff9f0;
  font-size:.16rem;
  border-radius:.04rem;
  cursor:pointer;
  transition:all .2s;
  letter-spacing:.02rem;
}
.left-bar .left-bar-btn a:hover{opacity:.9}
.left-bar .left-bar-btn a.btn-zm-down{
  background:linear-gradient(135deg, #bc4d2a, #8b2e1e);
}
.left-bar .left-bar-btn a.btn-czhi{
  background:linear-gradient(135deg, #d4a849, #a07830);
}
.left-bar .left-bar-btn a.add-official-group{
  background:linear-gradient(135deg, #5a3e6e, #3a1e4e);
}
.left-bar .back{
  width:.6rem;
  height:.6rem;
  margin:.1rem auto 0;
  font-size:.12rem;
  cursor:pointer;
  background:rgba(188,77,42,0.8);
  color:#fff;
  border-radius:50%;
  text-align:center;
  line-height:.6rem;
  transition:all .2s;
  white-space:nowrap;
  overflow:hidden;
  letter-spacing:0;
}
.left-bar .back:hover{background:#bc4d2a}

/* ============================================
   移动端响应式
   ============================================ */

/* 移动端汉堡菜单按钮 */
.mobile-header{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:48px;
  background:rgba(20,14,36,0.95);
  z-index:1000;
  align-items:center;
  justify-content:space-between;
  padding:0 15px;
  box-sizing:border-box;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.mobile-logo img{height:36px;width:auto;display:block}
.hamburger-btn{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px;
  height:40px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  z-index:1001;
}
.hamburger-btn span{
  display:block;
  width:24px;
  height:2px;
  background:#a08d6b;
  border-radius:2px;
  transition:all .3s;
}
.hamburger-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger-btn.active span:nth-child(2){opacity:0}
.hamburger-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 移动端导航遮罩 */
.mobile-nav-overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  z-index:2000;
  opacity:0;
  transition:opacity .3s;
}
.mobile-nav-overlay.active{
  display:block;
  opacity:1;
}
.mobile-nav-panel{
  position:absolute;
  top:0;
  right:0;
  width:70%;
  max-width:280px;
  height:100%;
  background:linear-gradient(180deg, #1a1038, #0d0a1e);
  padding:60px 30px 30px;
  box-sizing:border-box;
  transform:translateX(100%);
  transition:transform .3s;
}
.mobile-nav-overlay.active .mobile-nav-panel{transform:translateX(0)}
.mobile-nav-close{
  position:absolute;
  top:12px;
  right:16px;
  font-size:32px;
  color:#a08d6b;
  cursor:pointer;
  line-height:1;
}
.mobile-nav-list{margin-top:10px}
.mobile-nav-list li{
  border-bottom:1px solid rgba(160,141,107,0.15);
}
.mobile-nav-list li a{
  display:block;
  padding:16px 0;
  font-size:16px;
  color:#a08d6b;
  letter-spacing:2px;
  transition:color .2s;
}
.mobile-nav-list li a:hover{color:#f5d58d}

/* 移动端底部操作栏 */
.mobile-bottom-bar{
  display:none;
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:56px;
  background:rgba(20,14,36,0.96);
  z-index:999;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(160,141,107,0.2);
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.mobile-bottom-bar .mbb-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#a08d6b;
  font-size:10px;
  gap:3px;
  text-decoration:none;
  transition:color .2s;
}
.mobile-bottom-bar .mbb-item:hover{color:#f5d58d}
.mobile-bottom-bar .mbb-item svg{width:22px;height:22px}
.mobile-bottom-bar .mbb-download{
  background:linear-gradient(135deg, #d4a849, #b8862e);
  color:#fff !important;
  border-radius:24px;
  margin:6px 8px;
  height:44px;
  flex:1.3;
  flex-direction:row;
  gap:6px;
  font-size:14px;
  font-weight:bold;
}

/* ============================================
   平板适配 (769px - 1024px)
   ============================================ */
@media (max-width:1024px) and (min-width:769px){
  html{font-size:calc(100vw / 15)}
  body{min-width:auto}
  .wrap{width:90%}
  .top-nav{
    width:100%;
    left:0;
    margin-left:0;
    padding-left:0;
    display:flex;
    justify-content:center;
    background:rgba(42,37,37,0.85);
  }
  .top-nav li{width:auto;padding:0 20px}
  .site-logo{left:10px;top:2px}
  .site-logo img{height:.7rem}
  .header-down{top:5.5rem;width:90%;transform:translateX(-50%) scale(0.9);background-size:100% 100%}
  .news-box{width:100%;margin-left:0;height:auto;display:flex;flex-direction:column;align-items:center;padding:20px}
  .hot-main{position:relative;top:auto;left:auto;width:90%;margin:0 auto}
  .hot-main .swiper{width:100%;height:auto}
  .hot-slide-img{width:100%;height:auto;aspect-ratio:16/10}
  .news-content-box{position:relative;top:auto;left:auto;width:90%;margin:20px auto 0;padding:0;height:auto}
  .news-content-box .more{right:0}
  .news-content-box .news-list span{width:65%}
  .tese-main{width:100%}
  .tese-main .swiper{width:90%}
  .tese-slide-img{width:100%;height:auto}
  .download-grid{grid-template-columns:repeat(3, 1fr);gap:15px}
  .service-grid{grid-template-columns:1fr 1fr;gap:20px}
  .left-bar{display:none !important}
}

/* ============================================
   手机端适配 (≤768px)
   ============================================ */
@media (max-width:768px){
  /* 重置rem基准 */
  html{font-size:calc(100vw / 3.75)}

  body{
    min-width:auto;
    font-size:14px;
    padding-top:48px;
    padding-bottom:56px;
  }

  /* 显示移动端组件 */
  .mobile-header{display:flex}
  .mobile-bottom-bar{display:flex}

  /* 隐藏PC端组件 */
  .top-nav{display:none !important}
  .left-bar{display:none !important}
  .site-logo{display:none !important}

  /* 通用容器 */
  .wrap{width:92%;max-width:3.45rem}
  .section{overflow:hidden}

  /* 标题 */
  .title{padding-top:.3rem}
  .title::before{font-size:.22rem;letter-spacing:.06rem}
  .title::after{width:.5rem;height:.02rem;margin:.08rem auto 0}

  /* ===== Hero ===== */
  .main-ban{
    height:auto;
    min-height:2.8rem;
    padding-bottom:.1rem;
  }
  .main-ban .main-bg{position:relative;height:auto;min-height:2.3rem}
  .main-bg-wrap{
    width:100%;
    left:0;
    margin-left:0;
  }
  .index-header-image{
    width:100%;
    height:0;
    padding-top:56.25%;
    background-size:cover;
    background-position:center top;
  }
  .index-header-image::before{
    height:40%;
    background:linear-gradient(180deg, transparent 0%, rgba(255,253,248,0.3) 50%, rgba(255,253,248,0.85) 100%);
  }
  .bg-cover{height:.5rem}
  .banner-link{position:relative;height:0}

  /* 下载面板 - 移动端重排 */
  #header{position:relative}
  #header .wrap{height:auto}
  .header-down{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:100%;
    height:auto;
    background:none;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:10px 0 0;
    justify-content:center;
    z-index:3;
  }
  .header-down .code{
    display:none;
  }
  .header-down .down{
    width:44%;
    margin:0;
    float:none;
  }
  .header-down .down .btn-pc-down{
    width:100%;
    height:.48rem;
    line-height:.48rem;
    font-size:.18rem;
    border-radius:.06rem;
  }
  .header-down .other{
    width:44%;
    margin:0;
    float:none;
  }
  .header-down .other .btn-czhi{
    width:100%;
    height:.48rem;
    line-height:.48rem;
    font-size:.18rem;
    border-radius:.06rem;
  }
  .header-down .other .add-official-group{
    display:none;
  }
  .header-down .header_xf{
    width:90%;
    margin:.05rem auto 0;
    float:none;
    height:auto;
    padding:.12rem 0;
    background:rgba(20,14,36,0.85);
    border-radius:.08rem;
    border:1px solid rgba(212,168,73,0.3);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
  }
  .header-down .header_xf .hxf_tt{
    height:auto;
    line-height:1;
    font-size:.16rem;
    color:#f5d58d;
  }
  .header-down .header_xf strong{
    margin:0;
    line-height:1;
    font-size:.16rem;
  }
  .header-down .header_xf .hxf_more{
    margin:0;
    width:auto;
    padding:0 .15rem;
    height:.28rem;
    line-height:.28rem;
    font-size:.14rem;
    background:linear-gradient(135deg, #d4a849, #b8862e);
    border-radius:.14rem;
  }

  /* ===== 新闻资讯 ===== */
  .news{
    height:auto;
    padding-bottom:.4rem;
  }
  .news-box{
    width:100%;
    height:auto;
    margin-left:0;
    margin-top:.1rem;
    padding:.15rem;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
  }
  /* 左侧轮播 */
  .hot-main{
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    height:auto;
  }
  .hot-main .swiper{
    width:100%;
    height:auto;
    padding-bottom:.2rem;
  }
  .hot-main .swiper-slide{width:100%;height:auto}
  .hot-slide-img{
    width:100%;
    height:auto;
    aspect-ratio:16/10;
    object-fit:cover;
    margin:.05rem 0;
    border-radius:.06rem;
  }
  .img-cover{display:none}
  .hot-main .hot-pagination{
    position:relative;
    right:auto;
    bottom:auto;
    margin-top:.05rem;
    text-align:center;
  }
  .hot-main .hot-pagination span{
    width:.06rem;
    height:.06rem;
    margin:0 .06rem !important;
  }

  /* 右侧新闻列表 */
  .news-content-box{
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    height:auto;
    padding:0 .1rem;
    margin-top:.15rem;
    box-sizing:border-box;
  }
  .news-content-box .hd{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
  }
  .news-content-box .hd li{
    font-size:.16rem;
    height:.4rem;
    line-height:.4rem;
    margin-right:.25rem;
  }
  .news-content-box .hd li.on{border-bottom-width:.02rem}
  .news-line{width:100%;display:none}
  .news-content-box .more{
    position:static;
    margin-left:auto;
    font-size:.14rem;
    display:flex;
    align-items:center;
    gap:4px;
  }
  .news-content-box .more i{width:.2rem;height:.2rem}
  .news-content-box .more i::after{font-size:.14rem}
  .news-content-box .hot-news-wrap{
    margin-top:.15rem;
    padding:0;
  }
  .news-content-box .recommend-news{font-size:.16rem}
  .news-content-box .hot-news-title{
    font-size:.16rem;
    line-height:1.4;
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  .news-content-box .news-list{margin-top:.05rem}
  .news-content-box .news-list a{height:auto;line-height:1.5;padding:.06rem 0}
  .news-content-box .news-list span{
    width:72%;
    height:auto;
    line-height:1.4;
    font-size:.13rem;
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  .news-content-box .news-list span.time{
    right:0;
    width:auto;
    font-size:.11rem;
    color:#aaa;
    position:absolute;
  }
  .news-content-box .news-list em{font-size:.11rem}

  /* ===== 游戏特色 ===== */
  .tese{
    height:auto;
    padding-bottom:.5rem;
  }
  .tese-main{
    width:100%;
    height:auto;
    margin-top:.15rem;
    padding:.1rem;
    box-sizing:border-box;
  }
  .tese-main .swiper{
    width:100%;
    height:auto;
    padding-top:0;
  }
  .tese-slide-img{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:.06rem;
  }
  .tese-main .tese-pagination{
    position:relative;
    bottom:auto;
    margin-top:.12rem;
  }
  .tese-main .tese-pagination span{
    width:.08rem;
    height:.08rem;
    margin:0 .1rem !important;
  }

  /* ===== 下载中心 ===== */
  .download-section{padding-bottom:.4rem}
  .download-grid{
    grid-template-columns:1fr;
    gap:.15rem;
    margin-top:.25rem;
  }
  .download-card{
    padding:.3rem .25rem;
    border-radius:.08rem;
  }
  .download-card-icon{width:.5rem;height:.5rem;border-radius:.12rem;margin-bottom:.12rem}
  .download-card-icon svg{width:28px;height:28px}
  .download-card h3{font-size:.2rem}
  .download-version{font-size:.14rem}
  .download-desc{font-size:.13rem;margin-bottom:.2rem}
  .btn-gold{padding:.1rem .4rem;font-size:.15rem;border-radius:.04rem}
  .recommend-badge{font-size:.12rem;top:.1rem;right:.1rem;padding:.02rem .1rem}

  /* ===== 客服中心 ===== */
  .service-section{padding-bottom:.4rem}
  .service-grid{
    grid-template-columns:1fr;
    gap:.2rem;
    margin-top:.25rem;
  }
  .service-faq h3,
  .service-contact h3{
    font-size:.2rem;
    margin-bottom:.15rem;
    padding-bottom:.1rem;
  }
  .faq-question{font-size:.15rem;padding:.15rem 0}
  .faq-answer{font-size:.13rem}
  .contact-list{padding:.15rem .2rem}
  .contact-item{padding:.1rem 0}
  .contact-label,.contact-value{font-size:.14rem}
  .feedback-form h4{font-size:.16rem;margin-bottom:.1rem}
  .form-input,.form-textarea{
    font-size:.14rem;
    padding:.08rem .12rem;
    margin-bottom:.08rem;
    border-radius:.04rem;
  }
  .form-textarea{height:.7rem}
  .form-submit{padding:.1rem 0;font-size:.15rem}

  /* ===== 页脚 ===== */
  .foot .bottom-content{padding:.25rem 15px}
  .foot .site-link,
  .foot p{line-height:.22rem}
  .foot .foot_enter li{font-size:.12rem}
  .foot p span{font-size:.11rem;display:block;text-align:center}

  /* ===== 二维码弹窗 ===== */
  .qr-modal-content{
    width:80%;
    max-width:2.8rem;
    padding:.3rem .25rem;
  }
  .qr-modal-content h3{font-size:.2rem}
  .qr-modal-content img{width:1.8rem;height:1.8rem}
  .qr-modal-content p{font-size:.14rem}
  .qr-modal-close{font-size:.28rem}
}