/*全局*/
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); }


.title-ZBtese {background: url(../Image/Title-1.png) no-repeat center top / contain;}
/* 板块标题容器：放置玩法特色标题图片的盒子，使用图片做标题而非文字 */
.WF-Title {background: url(../Image/Title-2.png) no-repeat center top / contain;}
.JT-Title {background: url(../Image/Title-3.png) no-repeat center top / contain;}


/* ===================== 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: 33%;            /* 横向偏移居中位置 */
  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: 40%;             /* 距离顶部40%高度 */
  left: 25%;            /* 横向偏移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; /* 等比例缩小适配容器，不拉伸变形 */
}

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

/* 特色卡片横向列表外层容器 */
.teselist {
  margin-top: 20px; /* 距离上方大容器顶部间距40px */
  width: 100%; /* 宽度100%自适应父容器 */
  display: flex; /* 开启弹性布局 */
  flex-direction: row; /* 子元素水平横向排列 */
  justify-content: space-between; /* 子项两端对齐，中间自动分配空隙 */
}

/* 列表内单个装备/特色卡片li标签 */
.teselist li {
  width: 35%; /* 单张卡片宽度占父容器35% */
  height: fit-content; /* 高度自适应内部内容高度 */
  padding: 2% 0; /* 上下百分比内边距，左右无内边距 */
  display: flex; /* 卡片内部开启弹性布局 */
  flex-direction: column; /* 内部元素垂直从上到下排列 */
  justify-content: center; /* 垂直方向居中对齐 */
  align-items: center; /* 水平方向居中对齐 */
  /* 卡片背景底图，居中顶部，完整容纳不裁切 */
  background: url(../Image/ItemBg.png) no-repeat center top / contain;
  transition: filter 0.2s ease; /* 滤镜变化0.2秒平滑过渡动画 */
}

/* 鼠标悬浮卡片提亮高亮效果 */
.teselist li:hover {
  filter: brightness(110%); /* 亮度提升10% */
}

/* 卡片内圆形图片外层比例容器 */
.teselist li .teseimg {
  width: 60%; /* 宽度占卡片60% */
  height: 0; /* 高度归零，依靠内边距撑开固定比例 */
  position: relative; /* 给内部图片做绝对定位父容器 */
  overflow: hidden; /* 超出容器部分隐藏裁切 */
}

/* 比例标记为1:1时，用顶部内边距撑开固定高度比例 */
.teselist li .teseimg[data-ratio="1:1"] {
  padding-top: calc(100% * 1 / 1.68);
}

/* 圆形展示图片样式 */
.teselist li .teseimg img {
  width: 100%;
  height: 100%;
  border-radius: 50%; /* 圆角50%变成正圆形 */
  position: absolute; /* 绝对定位填满父容器 */
  top: 0;
  left: 0;
  object-fit: cover; /* 图片不变形，裁切多余部分填满圆形区域 */
}

/* 卡片底部标题文字 */
.teselist li p {
  width: 90%; /* 文字宽度占卡片90% */
  padding: 5px 2%; /* 上下5px、左右2%内边距 */
  color: #bb985c; /* 复古鎏金字体颜色 */
  font-size: 3.2rem; /* 字体大小 */
  font-weight: bold; /* 加粗字体 */
  text-align: center; /* 文字居中 */
  white-space: nowrap; /* 文字禁止自动换行 */
  overflow: hidden; /* 文字超出宽度隐藏 */
  text-overflow: ellipsis; /* 超长文字末尾显示省略号... */
  margin-top: 8px; /* 和上方图片间隔8px */
}

/*--------- 玩法特色 通用整体板块样式 ---------*/
/*--------- 玩法特色 通用整体板块样式 ---------*/
/* 轮播外围磨砂深色边框容器 */
.LunBo-Box {
  width: 100%;
  height:auto;
  padding: 35px 0 40px;
  display: block;
  position: relative;
  z-index: 9;
  margin: 0 auto;
  background: url(../Image/Bg-tese.png) no-repeat center top ;
  background-size: cover;
}

.LunBo-Cont {padding-top: 15px;   /* 顶部留出15px距离标题，左右底部无内边距 */}
/* 主体内容盒子：包裹轮播完整结构，高度自适应，底部额外留白40px */
.LunBo-Main {padding-bottom: 10px; }
/* 底部圆点指示器外层容器 */
.LunBo-DianP {
  position:absolute;               /* 绝对定位悬浮在轮播图底部 */
  bottom:12px;                     /* 距离轮播容器底部12px间距 */
  width:100%;                       /* 宽度铺满，方便内部圆点居中对齐 */
  text-align:center;                /* 内部行内块圆点水平居中 */
  z-index:99;                       /* 高堆叠层级，保证圆点压在图片上方可见 */
}
/* 单个小圆点样式 */
.LunBo-DianP div {
  width:10px;
  height:10px;
  border-radius:50%;               /* 宽高相等+50%圆角，做成正圆形 */
  background:rgba(255,255,255,0.4); /* 半透明白色，非当前轮播页的圆点样式 */
  display:inline-block;             /* 行内块，横向并排排列，支持宽高设置 */
  margin:0 4px;                     /* 圆点左右间距4px，上下无间距 */
  cursor:pointer;                   /* 鼠标放上去变成手型，提示可点击切换轮播 */
}
/* 当前激活页面对应的圆点高亮类，JS自动添加移除 */
.LunBo-DianP div.Pag {
  background:#fff;                  /* 纯白色实心圆点，标识正在展示的幻灯片 */
}
/* 箭头基础默认样式（后面会被下方精准样式覆盖） */
.LunBo-ButtonP, .LunBo-ButtonN {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(0,0,0,0.4);
  z-index:99;
  cursor:pointer;
  display:none;                     /* 初始默认隐藏箭头，hover后JS控制显示 */
}
/* 轮播容器内的前后切换箭头，权重更高，覆盖上面基础箭头样式 */
.LunBo-ButtonP,.LunBo-ButtonN, 
{
  cursor:pointer;        /* 鼠标悬浮显示点击手型 */
  width:40px; height:40px; /* 替换之前40*40尺寸，使用长条箭头贴图尺寸 */
  top:50%;               /* 垂直定位在轮播高度38%位置，不居中偏上一点，视觉更协调 */
  position:absolute;
  z-index:99;            /* 高层级，始终压在轮播图片、圆点之上，不会被遮挡 */
}
/* 左切换箭头（上一张） */
.LunBo-ButtonP {
  left: 0;                                  /* 距离轮播视窗左侧15px摆放 */
  background: url(../Image/Btn-P.png) no-repeat center top; /* 引入左箭头图片，居中靠上摆放、不重复 */
  background-size: cover;                       /* 箭头图铺满自身盒子尺寸 */
}
/* 右切换箭头（下一张） */
.LunBo-ButtonN {
  right: 0;                                 /* 距离轮播视窗右侧15px摆放 */
  background: url(../Image/Btn-N.png) no-repeat center top; /* 引入右箭头图片 */
  background-size: cover;                       /* 箭头图自适应填满盒子 */
}

/*==================== 特色轮播外层盒子  ====================*/
.WF-list {
  /* 宽度计算公式：整体100%宽度 减去左右两侧(内边距8px + 边框1px) 两边所以*2 */
  width: calc(100% - (10px + 10px) * 2);
  aspect-ratio: 1 / 1; /* 宽:高 = 1:1 正方形 */
  margin: 0 auto;             /* 水平居中 */
  padding: 10px;                    /* 盒子内部留白8px，把轮播主体和边框底色隔开 */
  border-radius: 50%;                 /* 四个圆角弧度4px，柔和直角棱角 */
  background: rgba(166, 90, 30, 0.75);  /* RGBA半透明深棕色底色，适配传奇古风暗黑游戏页面风格，0.75为透明度 */
  border: 1px solid #bb985c;          /* 实体描边边框，衬托古风质感 */
  box-shadow: 0 2px 8px #FFEEAA;      /* 向下黑色投影，水平偏移0、垂直偏移2px、模糊半径8px，提升盒子立体浮雕效果 */
}
/* 轮播核心视窗容器：固定16:9比例图片展示区域 */
.WF-Swiper {
  width: 100%;                     /* 宽度填满父级WF-list */
  aspect-ratio: 1 / 1; /* 宽:高 = 1:1 正方形 */
  border-radius: 50%; /* 圆角50%变成正圆形 */
  position: relative;              /* 相对定位，给轮播图片、箭头、圆点做定位参照 */
  overflow: hidden;                /* 超出容器范围的内容全部裁剪隐藏，轮播滑动时多余图片看不见 */
  background: #000;                /* 加载图片前、图片加载失败时显示黑色打底 */
}

/* 轮播滑动包裹层：承载所有单张幻灯片的总容器，JS控制左右位移实现滑动切换 */
.WF-Wrap {
  position: absolute;               /* 绝对定位铺满整个Swiper视窗 */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* 单张幻灯片容器：每一张轮播图单独盒子 */
.WF-slide {
  position: absolute;               /* 所有幻灯片重叠堆叠在同一位置，JS控制显示隐藏/位移 */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* 轮播图片样式 */
.WF-slide img {
  width: 100%;
  height: 100%;
  border-radius: 50%; /* 圆角50%变成正圆形 */
  position: absolute; /* 绝对定位填满父容器 */
  top: 0;
  left: 0;
  object-fit: cover; /* 图片不变形，裁切多余部分填满圆形区域 */
}

/*==================== 截图容器 ====================*/
.JT-list {
  /* 宽度计算公式：整体100%宽度 减去左右两侧(内边距8px + 边框1px) 两边所以*2 */
  width: calc(100% - (10px + 10px) * 2);
  margin: 0 auto;             /* 水平居中 */
  padding: 10px;                    /* 盒子内部留白8px，把轮播主体和边框底色隔开 */
  border-radius: 4px;                 /* 四个圆角弧度4px，柔和直角棱角 */
  background: rgba(166, 90, 30, 0.75);  /* RGBA半透明深棕色底色，适配传奇古风暗黑游戏页面风格，0.75为透明度 */
  border: 1px solid #bb985c;          /* 实体描边边框，衬托古风质感 */
  box-shadow: 0 2px 8px #FFEEAA;      /* 向下黑色投影，水平偏移0、垂直偏移2px、模糊半径8px，提升盒子立体浮雕效果 */
}
/* 轮播核心视窗容器：固定16:9比例图片展示区域 */
.JT-Swiper {
  width: 100%;                     /* 宽度填满父级WF-list */
  height: auto;                     /* 高度不固定，靠padding-bottom实现等比例 */
  position: relative;              /* 相对定位，给轮播图片、箭头、圆点做定位参照 */
  overflow: hidden;                /* 超出容器范围的内容全部裁剪隐藏，轮播滑动时多余图片看不见 */
  /* 16:9比例计算公式：9÷16=0.5625 → 56.25%，用底部内边距撑起固定宽高比，适配所有屏幕缩放不变形 */
  padding-bottom: 56.25%;
  background: #000;                /* 加载图片前、图片加载失败时显示黑色打底 */
}
/* 轮播滑动包裹层：承载所有单张幻灯片的总容器，JS控制左右位移实现滑动切换 */
.JT-Wrap {
  position: absolute;               /* 绝对定位铺满整个Swiper视窗 */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/* 单张幻灯片容器：每一张轮播图单独盒子 */
.JT-slide {
  position: absolute;               /* 所有幻灯片重叠堆叠在同一位置，JS控制显示隐藏/位移 */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* 轮播图片样式 */
.JT-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;                /* 图片等比例缩放，完全填满盒子，图片长短边超出部分裁剪，不变形拉伸 */
  display: block;                   /* 消除图片默认下方留白缝隙 */
}

/* ===================== 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;
  }
  
}

/* 超小手机屏480px */
@media (max-width: 480px) {
  .teselist li {
    width: 48%;
    margin-bottom: 25px;
  }
  .teselist li p {
    font-size: 2.0rem;
  }

}