/*全局*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,header,footer,section,aside,article{padding:0;margin:0}
body { background: #121116; font-size:12px; font-family:"Microsoft YaHei",Tahoma,SimSun,Verdana;  }
address,caption,cite,code,dfn,em,th,var{font-weight:normal;font-style:normal}
abbr,acronym,img,input{border:0}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
ul,ol,li{list-style:none;}
table{border-collapse:collapse;border-spacing:0}
.fr{float:right;}
.fl{float:left;}
.disb{display:block;}
.hid{display:none;}
.disib{display:inline-block;*display:inline;*zoom:1;}
a{color:#d7b591; text-decoration:none} 
a:hover{color:#fff; text-decoration: none; }
a:focus,input:focus{outline:0}
img{border:0;vertical-align:top; }
.clr { clear: both; }

/*------ 公用部分 ------*/
/*弹性布局*/
.flexbox { display: flex; }
/*一行多列*/
.main-column { display: flex; justify-content: space-between; box-sizing: border-box; padding-bottom: 50px; }

/*小屏幕【更多】到二级页面 */
.btn-more { /*display: none;*/ display: block; margin: 15px auto 0; width: 120px; font-size: 1.6rem; letter-spacing: 1px; color: #a27d47; text-shadow: 0 0 3px #000; padding: 8px 25px; justify-content: center; align-items: center; border-radius: 4px; background: rgba(0, 0, 0, .6); background: linear-gradient(180deg, rgba(107, 69, 36, .8) 0%, #311e13 100%); border: 1px solid rgba(92, 67, 44, .5); border-top: 1px solid rgba(137, 90, 48, 1); box-shadow: 0 2px 5px rgba(0, 0, 0, .4); }
.btn-more:hover { color: #c0a281; -webkit-filter: brightness(110%); filter: brightness(110%); box-shadow: 0 2px 5px rgba(0, 0, 0, .6); } 
.title-words { display: flex; justify-content: flex-start; }
/*公用模块内容 */
.content { width: 100%; height: auto; margin: 0 auto; text-align: center; }
.mainbox { margin: 0 auto; width: 1200px; height: 100%; position: relative; }
.title { width: 100%; padding-top: 65px; text-align: center; }
.title h3 { font-size: 2.2rem; font-weight: normal; display: none; }
.title p { color: #895a30; font-size: 1.8rem; line-height: 3rem; letter-spacing: 5px; padding: 0 10px 0 15px; text-align: center; /*font-family:Georgia, 'Times New Roman', Times, serif;*/ text-transform:uppercase; border: 1px solid rgba(137, 90, 48, .3); border-radius: 24px; display: inline-block; background: rgba(0, 0, 0, .4); }



/* ===================== 4. 头部导航模块 ===================== */
/* ===================== 4. 头部导航模块 ===================== */
/* ===================== 4. 头部导航模块 ===================== */

/* 头部外层容器整体盒子 */
.headerbox {
    width: 100%;                /* 宽度铺满屏幕全屏 */
    height: 80px;               /* 固定高度80像素 */
    background: rgba(19, 23, 34, .9);  /* 背景色使用CSS全局变量导航背景色，方便统一换肤 */
    position: absolute;         /* 绝对定位，脱离文档流 */
    top: 0;                     /* 吸附页面最顶部 */
    z-index: 9999;              /* 层级拉到极高，保证头部压在所有页面内容上方不会被遮挡 */
    border-bottom: 1px solid #a1743e; /* 底部金色中调分割细线 */
    box-shadow: 0 2px 0 #bb985c;        /* 底部深色金色细微投影，增强立体感 */
    display: none; /* 默认状态隐藏，由JS脚本动态控制显示/隐藏（比如滚动后出现导航栏） */
}

/* 头部内部内容居中承载盒子，和外层同高 */
.Header-Main {
    height: 80px;                          /* 和外层容器高度保持一致 */
    display: flex;                         /* 弹性布局，方便左右排布元素 */
    justify-content: space-between;        /* 左右两端元素自动拉开距离，左logo、右按钮 */
    align-items: center;                   /* 内部所有子元素垂直方向居中center对齐底部flex-end对齐 */
}

/* 左上角Logo容器 */
.Top-Logo {
  width: 100%;                  /* Logo容器固定宽度 */
  height: 100%; 
  display: flex;                /* 弹性布局方便内部图片居中 */
  overflow: hidden;             /* 超出容器宽高的内容直接裁剪隐藏 */
  padding: 0 5px;              /* 左右内边距5px，防止图片贴紧边框 */
}

/* Logo包裹的超链接标签，点击跳转首页 */
.Top-Logo a {
  width: 100%;                  /* 链接占满父容器全部宽度 */
  height: 100%;                 /* 链接占满父容器全部高度 */
  display: flex;                /* 弹性布局居中图片 */
  align-items: center;          /* 图片垂直居中 */
  overflow: hidden;             /* 溢出内容裁剪 */
  white-space: nowrap;          /* 文字禁止自动换行（备用，防止logo附带文字折行） */
  text-overflow: ellipsis;      /* 文字溢出显示省略号...，适配超长文字容错 */
}

/* Logo内部图片样式 */
.Top-Logo a img {
  width: 75%;       /* 图片宽度为链接容器的75%，预留边距不撑满 */
  height: 75%;      /* 图片高度同步75%，等比例缩小，避免撑破容器 */
}

/* Logo旁文字标题组容器 */
.Game-Tran {
  display: flex;               /* 弹性布局 */
  flex-direction: column;      /* 内部元素垂直上下排列 */
}

/* 游戏大标题文字标签（HT为自定义标签/类简写） */
.Game-Tran HT {
    margin-left: 8px;             /* 距离左侧Logo向右偏移8px top-bottom-left-right */
    margin-top: 7%;               /* top-bottom-left-right */
    align-items: flex-end;        /* 横向排列时，所有子元素底边对齐 */
    
    font-weight: normal;          /* 字体不加粗，常规字重 */
    font-size: 2.5rem;            /* 字号2倍根字体大小，自适应基础字号缩放 */
    max-width: 95px;              /* 文字最大宽度限制，防止超长文字挤变形布局 */
    color: #bb985c;      /* 主金色字体颜色，调用全局主题色变量 */
    white-space: nowrap;         /* 文字禁止自动换行 */
    text-overflow: ellipsis;     /* 文字超长显示省略号... */
}

/* 移动端下载按钮外层ID容器，PC端默认隐藏 */
#Mobile-Down {
    margin-right: 8px;
    width: 300px;    /* 链接填满父容器宽度 */
    height: 90%;     /* 高度占父容器85%，预留上下空隙 */
}

/* 下载按钮内部跳转链接 */
#Mobile-Down a {
  width: 100%;    /* 链接填满父容器宽度 */
  height: 90%;     /* 高度占父容器85%，预留上下空隙 */
}

/* 下载按钮配图 */
#Mobile-Down a img {
    margin-top: 5px;        /* 图片向上距离顶部5px间距 */
    width: 100%;            /* 图片填满链接宽度 */
    height: 90%;            /* 图片高度为链接高度85% */
}

/* ===================== 5. Banner首屏大图模块 ===================== */
/* ===================== 5. Banner首屏大图模块 ===================== */
/* ===================== 5. Banner首屏大图模块 ===================== */
/* ===================== 5. Banner首屏大图模块 ===================== */
/* Banner整体外层包裹容器 */
#bannerbox {
  width: 100%;          /* 宽度铺满页面整宽 */
  text-align: center;   /* 内部行内元素居中对齐 */
  overflow: hidden;     /* 超出容器范围内容隐藏裁剪 */
}

/* Banner主体容器，所有层级元素父级 */
#banner {
  width: 100%;          /* 宽度100%自适应父容器 */
  position: relative;   /* 作为内部绝对定位元素的参照父级 */
  z-index: 9;           /* 堆叠层级 */
  overflow: hidden;     /* 溢出内容隐藏 */
}

/* 大图、自适应高度占位图片公共样式 */
#banner img.heightself-big,
#banner img.heightself-small {
  width: 100%;          /* 图片宽度铺满banner */
  opacity: 0;           /* 完全透明，仅用作撑开高度占位，不展示 */
  z-index: -1;          /* 层级置于最底层后方 */
}

/* Banner视频播放层级容器 */
.bannervideo {
  width: 100%;          /* 宽度满屏 */
  position: absolute;   /* 绝对定位悬浮覆盖 */
  top: 0;               /* 紧贴顶部 */
  z-index: 2;           /* 堆叠层级高于背景底图，低于logo文字 */
  overflow: hidden;     /* 视频溢出部分裁剪 */
}
/* 视频标签样式 */
.bannervideo video {
  width: 100%;          /* 宽度铺满容器 */
  height: auto;         /* 高度随宽度等比例自适应 */
  object-fit: fill;     /* 拉伸填满容器，不保持原始比例 */
}

/* Banner最底层背景图容器 */
#bannerbg {
  width: 100%;          /* 满宽 */
  position: absolute;   /* 绝对定位垫底 */
  top: 0;               /* 顶部对齐 */
  z-index: 1;           /* 最低可视层级 */
  overflow: hidden;     /* 溢出隐藏 */
  /* 背景底图，居中顶部放置，不重复平铺 */
  background: url(../Image/Ban-Bg.jpg) no-repeat center top;
}
/* 背景内填充图片 */
#bannerbg img {
  width: 100%;
  height: auto;         /* 高度自适应等比缩放 */
}

/* 移动端小尺寸图片默认隐藏，大屏只显示大图 */
#bannerbg .banner-small,
#banner img.heightself-small {
  display: none;
}

/* Banner顶部悬浮Logo容器 */
#banner #logo {
  width: 34%;           /* 宽度占banner34% */
  height: 32%;          /* 高度占banner32% */
  position: absolute;   /* 悬浮定位 */
  left: 13%;            /* 横向偏移居中位置 */
  top: 3%;              /* 距离顶部3%高度 */
  z-index: 99;          /* 最高堆叠层级，盖在所有内容之上 */
  display: flex;        /* 弹性布局居中内部图片 */
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}
/* Logo内部图片适配 */
#banner #logo img {
  max-width: 100%;      /* 最大宽度不超出容器 */
  max-height: 100%;     /* 最大高度不超出容器 */
  object-fit: scale-down; /* 缩小适配容器，不放大、不变形 */
}

/* Banner中间宣传标语图片容器 */
#banner .bannertxt {
  width: 50%;           /* 宽占父级50% */
  height: 50%;          /* 高占父级50% */
  position: absolute;   /* 悬浮定位 */
  top: 35%;             /* 距离顶部40%高度 */
  left: 5%;            /* 横向偏移25%实现居中效果 */
  z-index: 9;           /* 层级低于logo、高于视频背景 */
  display: flex;        /* 弹性居中内部文字图 */
  justify-content: center;
  align-items: center;
}
/* 宣传文字图片自适应 */
#banner .bannertxt img {
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down; /* 等比例缩小适配容器，不拉伸变形 */
}

#gamedown-pc { width: 550px; height: 110px; position: absolute; left: calc(50% - 275px); top:85%; z-index: 9999; display: flex; justify-content: space-between; }
/*--------- PC电脑端 下载 ---------*/
#gamedown-pc .pc,#gamedown-pc .mobile { width: 250px; height: 110px; }
#gamedown-pc a { width: 100%; height: 100%; display: block; }
#gamedown-pc .pc img,#gamedown-pc .mobile img { width: 100%; }


/* ===================== 板块标题 ===================== */
/* ===================== 板块标题 ===================== */
.Title-Box  { width: 100%; padding: 8px;text-align: center;}/* 标题容器，宽100%，下边距8，居中*/
.TableA-Title img {width: min(100%, 1024px);}/* 图片宽度，最大1024*/
.WF-Title img {width: min(100%, 1024px);}/* 图片宽度，最大1024*/
.JT-Title img {width: min(100%, 1024px);}/* 图片宽度，最大1024*/


/* ===================== 特色板块A ===================== */
/* ===================== 特色板块A ===================== */
.TableA {
  width: 100%; /* 宽度铺满整行 */
  padding: 15px 0; /* 上下内边距，左右内边距 */
  position: relative; /* 作为内部绝对定位元素的父级参照物 */
  /* 引入背景图，居中顶部平铺，等比例铺满容器 */
  background: url(../Image/Bg-tese.jpg) no-repeat center top / cover;
}

/* 列表外层大容器，控制所有卡片整体流式排版 */
.TableA-Box {
    display: flex;/* 开启弹性布局，方便子元素自适应排布 */
    flex-wrap: wrap;/* 宽度不够时卡片自动换行，不会挤压在一行 */
    justify-content: center;/* 每行卡片整体水平居中，一行1/2/3张都居中对齐 */
    gap: 16px 18px;/* 间距：上下行间距16px，卡片左右横向间距18px */
    width: 100%;/* 宽度填满父级容器，保证居中逻辑正常生效 */
}

/* 单张卡片容器，对应原先的按钮主体，限制尺寸+纵向分区 */
.TableA-List {
    
    display: flex;/* 弹性纵向布局：图片区域在上，文字区域在下 */
    flex-direction: column;
    flex: 1 1 calc(33.333% - 14px);/* 弹性占比：桌面三等分，减去间距；可收缩可放大 */
    min-width: 120px;/* 最小宽度，避免手机屏幕过窄导致卡片严重压缩 */
    max-width: 400px;/* 卡片最大宽高限制，封顶300px×300px */
    max-height: 430px;

    border: 2px solid #ff7800;        /* 橙色边框 */
    border-radius: 8px;               /* 圆角美化 */
    transition: all 0.3s ease;        /* 所有样式变化0.3秒平滑过渡 */
    background-color: rgba(0, 0, 0, 0.35); /* 半透黑底色增强可读性 */
    text-decoration: none;            /* 清除超链接下划线 */
    overflow: hidden;                 /* 超出卡片尺寸的内容隐藏裁切 */
}

/* 卡片上分区：固定高度200px，专门放置展示图片 */
/* 图片外层容器 */
.btn-img-area {
    height: 100%;
    width: 100%;
    display: flex;          /* 修改为flex，让居中属性生效 */
    align-items: center;    /* 子图片垂直居中 */
    justify-content: center;/* 子图片水平居中 */
    padding: 8px;           /* 图片四周留白，防止贴边框 */
    box-sizing: border-box; /* padding不会撑大容器宽高 */
}

/* 图片：跟随容器自适应，忽略原图比例，拉伸填满容器 */
.btn-img-area img {
    width: 100%;            /* 宽度填满父容器 */
    height: 100%;           /* 高度填满父容器 */
    display: block;          /* 消除图片底部默认留白间隙 */
    object-fit: fill;       /* 不维持原图比例，直接拉伸填满容器，允许变形 */
}


/* 卡片下分区：占用卡片剩余全部高度，承载文字 */
.btn-text-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

/* 按钮标题样式，独占一行 */
/* 按钮标题样式，独占一行 */
.item-title{
    font-size:28px;          /* 设置标题文字大小28像素 */
    color:#ffffff;           /* 文字颜色：纯白色 */
    text-align:center;       /* 文字水平居中对齐 */
    margin-bottom:12px;      /* 标题下方外边距12px，和下方按钮容器留出间距 */
    display:block;           /* 转为块级元素，强制独占一整行，实现换行效果 */
}
/* 按钮独立小容器：包裹【查看、详细】两个按钮 */
.item-btn-wrap {
    display: flex;           /* 使用弹性布局，让内部按钮横向排列 */
    gap:70px;                /* 子元素之间的间距，两个按钮相隔12px */
    justify-content: center; /* 弹性子元素水平居中，按钮整体居中 */
    padding:8px;             /* 容器内边距，按钮和容器边框之间留白8px */
    background:rgba(0,0,0,0.3); /* 背景：黑色半透明，0.3代表透明度 */
    border-radius:8px;       /* 容器圆角，边角柔和 */
}
/* 按钮基础样式（查看、详细共用） */
.item-btn {
    padding:5px 28px;       /* 按钮内边距：上下10px，左右28px，控制按钮大小 */
    background-color:#883bb4;/* 按钮背景色：深红色 */
    color:#fff;              /* 按钮文字颜色：白色 */
    text-decoration:none;    /* 去掉a标签默认的下划线 */
    font-size:18px;          /* 按钮文字字号18像素 */
    border-radius:6px;       /* 按钮自身圆角 */
}
/* 鼠标悬浮按钮时的 hover 交互效果 */
.item-btn:hover {
    background-color:#ee3333;/* 鼠标移上去，按钮变为亮红色 */
}





.btn-text-area span {color: #ff7800;font-size: clamp(16px, 3vw, 22px);text-align: center;}/* 底部文字基础样式：橙色、自适应字号、居中 */
.TableA-List:hover {background-color: rgba(255, 120, 0, 0.5);}/* 鼠标悬浮：卡片底色改为半透明橙色 */
.TableA-List:hover .btn-text-area span {color: #ffffff;}/* 悬浮时底部文字变白 */



/* ===================== 9. 底部版权footer ===================== */
/* ===================== 9. 底部版权footer ===================== */
/* ===================== 9. 底部版权footer ===================== */
#footer {
  width: 100%;                /* 宽度铺满页面整行 */
  height: auto;               /* 高度随内部内容自适应撑开 */
  padding: 10px 0 20px;       /* 内边距：上10px、左右0、下20px */
  background: rgba(25, 19, 21, .9);/* 读取全局页脚背景色变量 */
  border-top: 1px solid #9b7849; /* 顶部金色分割细线 */
}

/* 页脚内部主体弹性容器，支持自动换行 */
.main-footer {
  display: flex;              /* 开启弹性布局 */
  flex-flow: row wrap;        /* 横向排列，空间不足自动换行 */
}

/* 底部客服按钮外层盒子 */
.footerbtn {
  display: none;              /* 默认隐藏，移动端/JS可改为block显示 */
  width: 300px;               /* 固定容器宽度300px */
  margin: 15px auto;          /* 上下外边距15px，左右自动居中 */
}

/* 客服按钮链接样式 */
.footerbtn FA {
  width: 300px;                   /* 按钮固定宽度300px */
  height: 40px;                    /* 按钮固定高度60px */
  line-height: 3.8rem;             /* 行高控制文字垂直居中 */
  font-size: 3.0rem;               /* 按钮内文字字号大小 */
  border-radius: 10px;              /* 按钮圆角4像素 */
  color: #39f548;         /* 文字使用全局主金色变量 */
  text-align: center;              /* 文字水平居中 */
  margin: 0 auto;                  /* 链接自身左右居中 */
  display: inline-block;           /* 转为行内块，支持设置宽高尺寸 */
  background: #222;                /* 按钮深灰黑色背景 */
  border: 4px solid #FFEEAA; /* 粗金色边框描边 */
}

/* 页脚LOGO容器 */
.footerlogo {
  width: 220px;                /* LOGO盒子宽度220px */
  height: 110px;               /* LOGO盒子高度110px */
  margin: 25px 15px 0 0;       /* 外边距：上25px、右15px、下0、左0 */
  display: flex;               /* 弹性布局 */
  align-items: center;         /* 内部图片垂直居中 */
  text-align: center;          /* 内部内容水平居中 */
  overflow: hidden;            /* 图片超出容器部分裁剪隐藏 */
}

/* 页脚LOGO图片 */
.footerlogo img {
  width: 100%;                 /* 图片宽度填满父容器 */
  object-fit: scale-down;      /* 图片缩小适配容器，不拉伸变形，原图比例不变 */
}

/* 版权信息外层容器 */
.copyright {
  width: 940px;                /* 固定宽度940px */
  padding: 25px 0;             /* 上下内边距25px，左右0 */
  display: flex;               /* 弹性布局 */
  flex-wrap: wrap;             /* 内容自动换行 */
  align-items: center;         /* 内部元素垂直居中对齐 */
}

/* 版权内部子div容器 */
.copyright div {
  width: 100%;                 /* 宽度占满父容器 */
  display: flex;               /* 弹性布局 */
  flex-wrap: wrap;             /* 内容自动换行 */
}

/* 版权段落文字 */
.copyright p {
  font-weight: normal;         /* 取消文字默认加粗 */
  font-size: 1.2rem;           /* 文字字号 */
  color: #FFEEAA;      /* 灰色辅助文字颜色 */
  line-height: 2.6rem;         /* 行高，拉开文字上下间距 */
}

/* 版权内超链接文字 */
.copyright a {
  color: #ddd;                 /* 浅白色链接字体颜色 */
}
/* ===================== 10. 悬浮固定弹窗组件 ===================== */
/* 适龄提示悬浮标 */
#cadpa {
  width: 5.9%;
  height: 140px;
  position: absolute;
  top: 10%;
  left: 1%;
  z-index: 99;
}
#cadpa img {
  width: 100%;
  height: auto;
}

/* 右侧悬浮客服/充值栏 */
.fixedbox {
  position: fixed;
  right: 10px;
  bottom: 20px;
  z-index: 9999;
  width: 200px;
  height: 570px;
}
.fixedbox div {
  text-align: center;
  color: #a27d47;
}
.fixedbox div img {
  margin: 5px auto;
}
.h5bar {
  width: 200px;
  height: 570px;
  position: absolute;
  right: 0;
  background: rgba(25, 19, 21, .9);
  border: 2px solid #987340;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(255, 140, 0, 0.75);
}
.fixedbox-topbg {
  width: 100%;
  height: 40px;
  background: url(../Image/Fixed-top.png) no-repeat center top;
  margin-top: -25px;
  margin-bottom: -5px;
}
.code p {
  font-size: 27px;
  font-weight: bold;
  color: #FFEEAA;
}
.code img {
  width: 180px;
  height: 120px;
  padding: 7px;
  background: rgba(152, 115, 64, .2);
  border: 1px solid #FFEEAA;
  border-radius: 5px;
}
.chongzhi {
  width: 190px;
  height: 80px;
  margin: 0 auto;
  box-shadow: 0 2px 5px #000;
}
.chongzhi img {
  width: 190px;
  height: 80px;
}
.chongzhi:hover img {
  filter: brightness(125%);
  -webkit-filter: brightness(125%);
  transition: filter 0.2s ease;
}

/* 微信弹窗遮罩 */
#pMask {
  position: fixed;
  z-index: 9999999;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.wx {
  display: none;
  position: fixed;
  width: 90%;
  left: 5%;
  top: 100px;
  z-index: 99999999999;
  background: rgba(0, 0, 0, .8);
  border-radius: 8px;
  padding-bottom: 20px;
}
.wx img {
  width: 100%;
  height: auto;
  margin-top: -8%;
}
/* ===================== 11. 全局媒体查询（移动端适配统一放置底部） ===================== */
/* 平板及以下768px */
@media (max-width: 768px) {
  /* 右侧悬浮框移动端隐藏 */
  .fixedbox {
    display: none;
  }
  /* 装备卡片自动换行两列 */
  .teselist {
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .teselist li {
    width: 48%;
    padding: 5% 0;
    margin-bottom: 30px;
  }
  .teselist li p {
    font-size: 2.5rem;
  }
  .TableA-List {
  flex: 1 1 calc(50% - 10px);
  max-width: 400px;
  max-height: 400px;
  } 
}

/* 超小手机屏480px */
@media (max-width: 480px) {
  .teselist li {
    width: 4S8%;
    margin-bottom: 25px;
  }
  .teselist li p {
    font-size: 2.0rem;
  }
  .TableA-List {
  flex: 1 1 100%;
  max-width: 300px;
  max-height: 300px;
  }
}