<meta charset="UTF-8">
/* CSS Document */

/* ===============================
装备页面独立样式文件 equip-style.css
=============================== */

/* 全局背景（只保留一个背景层，推荐body::after） */
body {
  background: url("pc/images/bg-jietu.jpg") no-repeat center top !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-color: transparent !important;
}

/* 布局容器 - 全部透明，不遮挡 */
.container{
  width:1200px;
  margin:0 auto;
  background: transparent !important;
}
.wrap { 
  min-width:1200px; 
  overflow: hidden; 
  background: transparent !important; 
}
.wrap1{
  min-width:1200px;
  overflow: hidden;
  min-height: 1000px;
  padding-bottom: 100px;
  margin-top: -30px;
  background: transparent !important; /* 关键：透明 */
}


/* 装备展示盒子 */
.equip-box {
  width: 1200px;
  margin: 0 auto;
  padding: 50px 0;
}

.equip-title {
  text-align: center;
  font-size: 28px;
  color: #fff;
  margin-bottom: 30px;
  font-weight: bold;
}

/* 装备导航 */
.equip-nav {
  text-align: center;
  margin-bottom: 25px;
}

.equip-nav a {
  display: inline-block;
  padding: 8px 18px;
  background: #1f2118;
  color: #fff;
  border: 1px solid #3c402c;
  margin: 0 6px;
  border-radius: 4px;
  cursor: pointer;
}

.equip-nav a.active {
  background: #be8e4b;
  color: #fff;
  font-weight: bold;
}

/* 装备表格 */
.equip-table {
  width: 100%;
  background: rgba(37, 39, 26, 0.5);
  border: 1px solid #3c402c;
  color: #d7b591;
  border-collapse: collapse;
}
.equip-table td:nth-child(2),
.equip-table td:nth-child(4),
.equip-table td:nth-child(5) {
  max-width: 110px; /* 控制4个汉字宽度 */
}

.equip-table th,
.equip-table td {
  padding: 12px;
  text-align: center;
  border: 1px solid #3c402c;
  word-break: break-all;
  vertical-align: middle;
}

.equip-table img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* 装备面板切换 */
.equip-panel {
  display: none;
}

.equip-panel.show {
  display: block;
}

/* 下载注册区域 */
.down-reg-box {
  width: 500px;
  margin: 0 auto -100px;
  display: flex;
  gap: 20px;
  position: relative;
  top: -80px;
  z-index: 99;
}

.down-reg-item {
  flex: 1;
  text-align: center;
}

.down-reg-item img {
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.down-reg-item img:hover {
  transform: scale(1.02);
}

/* ===============================
适龄提示小图�?
=============================== */
#cadpa {
  width: 80px;
  height: 140px;
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  display: block;
  z-index: 9999999 !important;
  cursor: pointer;
}

#cadpa img {
  width: 100%;
  height: auto;
}

.cadpa-img {
  text-align: center;
  height: 102px;
  margin-bottom: 5px;
}

.cadpa-img img {
  width: auto;
  height: 100px;
  display: inline-block;
  margin: 0 15px;
}

.cadpa-img img.gamelogo {
  height: 96px;
  padding: 0 30px;
  border: 2px solid #222;
  border-radius: 8px;
}

/* ===============================
弹窗样式（适龄提示�?
=============================== */
.md-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: 90% !important;
  max-width: 1000px !important;
  min-width: 600px !important;
  height: 70% !important;
  z-index: 999999999 !important;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9) !important;
  transition: all 0.3s;
}

.md-show {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.md-overlay {
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 99999999 !important;
  visibility: hidden;
  opacity: 0;
  background: rgba(1, 1, 1, 0.6) !important;
  transition: all 0.3s;
}

.md-show~.md-overlay {
  opacity: 1 !important;
  visibility: visible !important;
}

.md-content {
  height: 100% !important;
  color: #5b5b5b;
  background: #fff !important;
  position: relative;
  border-radius: 8px;
  margin: 0 auto;
  text-align: center;
  z-index: 999999999 !important;
}

.md-content h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  padding: 2% 20px 0;
  text-align: center;
  background: #fff;
  border-radius: 8px;
  color: #333;
  overflow: hidden;
}

.md-content .md-close {
  width: auto;
  line-height: 32px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 15px;
  font-size: 14px;
  color: #fff;
  padding: 0 20px;
  background: #be8e4b;
  border: none;
  cursor: pointer;
  border-radius: 2px;
  z-index: 9999999999 !important;
}

.md-content .md-close:hover {
  background: #d8ae72;
}

.md-content .md-main {
  padding: 0 3%;
  width: 94%;
  height: 79%;
  margin: 10px 0 0;
  font-size: 14px;
  overflow-y: scroll;
}

.md-content .md-main span {
  display: block;
}

.md-content .md-main-img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.md-content .md-main-img img {
  width: auto;
  height: auto;
  margin: 0 0 20px;
  min-width: 320px;
  max-width: 85%;
}

.md-content>div p {
  line-height: 28px;
  text-indent: 28px;
  margin-bottom: 12px;
  text-align: left;
  font-size: 16px;
}


/* 通用工具�?*/
.c:before,.c:after {content:"";display:table}
.c:after {clear:both}
.c {zoom:1}
a {text-decoration:none;overflow:hidden;}
a:hover,a:focus,a:visited {text-decoration:none;}
input,:focus{outline: none;}
.hide {display:block;width:0;height:0;overflow:hidden;}
.pr {position:relative;}
.pa {position:absolute;}
.fl {float:left;}
.fr {float:right;}
.db {display:block;text-indent:-999em;}
.sp { background: url("pc/images/sp.png") no-repeat; }
.spft { background: url("pc/images/spbt.png") no-repeat; }
.center{text-align: center;}
.mt10{margin-top: 10px;}
.ml10{margin-left: 10px;}

/* 布局容器 */
.container{width:1200px;margin:0 auto;}
.wrap { min-width:1200px; overflow: hidden; background: none; }
.wrap1{
  min-width:1200px;
  overflow: hidden;
  min-height: 1000px;
  padding-bottom: 100px;
  background-attachment: fixed; /* 若需要固定效果，保留；否则删掉 */
  margin-top: -30px;
}
.wrap, .container, .equip-box {
  background: transparent !important; /* 透明背景，显示底层背景图 */
}

.box{
  margin-top: 50px;
  display: flex;       /* 新增 */
  align-items: flex-start; /* 新增 → 让左右顶部完全对齐 */
}

/* 左侧 */
.left {float: left;width: 252px;}
.right {float: right;width: 937px;margin-top: -1050px; /* 你可以从-10开始试，不满意再改数字 */}

/* 安全�?- 游戏下载按钮 */
.btn-xz {
    display: block;
    width: 252px;
    height: 250px;
    background-position: 0 -120px;  /* 👈 只改这里的数字！ */
    overflow: hidden;
    text-align: center;
    color: #fff;
}

.btn-xz:hover {
    background-position: 0 -120px;  /* 👈 这里和上面一样！ */
}

.btn-xz__cn {
    display: block;
    font-size: 30px;
    font-weight: bold;
    margin-top: 22px;
	text-indent: 0px;
}

.btn-xz__en {
    display: block;
    font-size: 13px;
    margin-top: -30px;
	text-indent: -0px;
}
/* 鼠标悬浮 游戏下载 按钮 �?高亮变亮 */
.btn-xz:hover {
	width: 260px;    /* 👈 这个就是 提亮区域的宽度！ */
  background-position: 0 -120px; /* 图片不动 */
  filter: brightness(1.2); /* 只提亮背�?*/
  opacity: 1;
}
/* 左侧导航 */
.left-nav{width: 252px; height: 150px;background-color: #43403b;}
.left-nav-zh a{float: left;width: 126px;padding: 20px 0 5px;}
.left-nav-zh a span{float: left;font-size: 16px;color: #d0c7b7;margin-left: 10px;}
.left-nav-zh a .zh-icon1{background-position: -259px -8px;width: 15px;height: 15px;float: left;margin-left: 20px;margin-top: 2px;}
.left-nav-zh a .zh-icon2{background-position: -281px -8px;width: 14px;height: 16px;float: left;margin-left: 15px;margin-top: 2px;}
.left-nav-zh a .zh-icon3{background-position: -302px -10px;width: 14px;height: 14px;float: left;margin-left: 20px;margin-top: 3px;}
.left-nav-zh a .zh-icon4{background-position: -323px -8px;width: 13px;height: 16px;float: left;margin-left: 15px;margin-top: 2px;}
.left-nav-zh a span:hover,.left-nav-rz a:hover span{color: #ffc268;}
.left-nav-rz{padding-top: 15px;}
.left-nav-rz a{width: 126px;float: left;}
.left-nav-rz a .rz-icon1{background-position: -259px -47px;width: 51px;height: 52px;display: block;margin: 0 auto;}
.left-nav-rz a .rz-icon2{background-position: -317px -47px;width: 52px;height: 52px;display: block;margin: 0 auto;}
.left-nav-rz a span{display: block;text-align: center;font-size: 16px;color: #d0c7b7;padding-top: 10px;}

/* 右侧内容 */
.rt-tit-box{background-color: #3c402c;padding:25px;}
.sun-tit{border-bottom: 1px solid #c9a875;}
.sun-tit em{float: left;font-size: 22px;font-weight: bold;color: #fcfcfc;padding-bottom: 5px;}
.sun-tit span{float: right;font-size: 14px;color: #ffefd6;}
.sun-tit span a { color: #ffefd6; }
.sun-box{background-color: rgba(60, 64, 44, 0.8); padding: 25px;min-height: 700px;}

/* 文章样式 */
.content-article {color: #c9a875;line-height: 26px;font-size: 15px;}
.content-article h1#guide-title{font-size: 26px;color: #fcfcfc;font-weight:bold;text-align:center;margin-bottom:20px;}
.content-article p{margin: 10px 0;}
.content-article strong{color: #fff;font-weight: bold;font-size: 18px;}

/* 导航 */
.nav-wrap{background:rgba(0,0,0,0.5);height:66px;position:absolute;top:0;width:100%;z-index:1000;}
.nav-container{width:1200px;margin:0 auto;position:relative;}
.nav-logo{width:252px;float:left;padding-top:13px;}
.nav-logo img{display:block;margin:0 auto;}
.base-nav-list li{float:left;padding:13px 40px 0;}
.base-nav-list li a{display:block;}
.base-nav-list li a span{display:block;font-size:16px;color:#fff;text-align:center;}
.base-nav-list li a:hover span{color:#ebac47;}
.base-nav-list li a em{color:#c29e64;font-size:10px;text-align:center;display:block;padding-top:7px;}

/* 页脚 */
.m2-footer {
    background:#11151c;
    background:linear-gradient(180deg, rgba(17,21,28,1) 0%, rgba(10,12,16,1) 100%);
    border-top:1px solid rgba(127,152,199,0.22);
}
.m2-footer__inner {width:1194px;margin:0 auto;padding:22px 0 18px;color:rgba(255,255,255,0.82);line-height:22px;}
.m2-footer__brand {float:left;width:360px;padding-left:30px;box-sizing:border-box;}
.m2-footer__logos {padding-top:8px;white-space:nowrap;}
.m2-footer__logoUgo,
.m2-footer__logoWebzen {float:left;display:block;text-indent:-999em;overflow:hidden;}
.m2-footer__logoUgo {background-position:0 0;width:206px;height:60px;}
.m2-footer__logoWebzen {background-position:-244px 0;width:79px;height:66px;margin-left:16px;}
.m2-footer__meta {float:right;width:804px;padding-right:10px;box-sizing:border-box;}
.m2-footer__links {margin-bottom:8px;font-size:13px;}
.m2-footer__links a,
.m2-footer__block a {color:rgba(235,242,255,0.9);}
.m2-footer__links a:hover,
.m2-footer__block a:hover {color:#fff;text-decoration:underline;}
.m2-footer__sep {color:rgba(255,255,255,0.35);margin:0 6px;}
.m2-footer__block {color:rgba(255,255,255,0.72);font-size:12px;line-height:20px;}
.m2-footer__block + .m2-footer__block {margin-top:8px;}
.m2-footer__muted {color:rgba(255,255,255,0.62);}

/* 雪碧图基础类：绑定sp.png并设置不重复 */
.sp {
  background-image: url("../images/sp.png"); /* 路径需和HTML中其他图片（如logo.png）的相对路径匹配 */
  background-repeat: no-repeat;
  display: inline-block; /* 行内块才能显示背景图，适配em/span等标�?*/
}

/* 各小图的定位规则（需根据sp.png的实际排版调整x/y值） */
.zh-icon1 {
  width: 24px; /* 小图宽度 */
  height: 24px; /* 小图高度 */
  background-position: 0 0; /* 对应sp.png中该图的坐标（左负上负） */
}
.zh-icon2 {
  width: 24px;
  height: 24px;
  background-position: -24px 0;
}
.zh-icon3 {
  width: 24px;
  height: 24px;
  background-position: -48px 0;
}
.zh-icon4 {
  width: 24px;
  height: 24px;
  background-position: -72px 0;
}
.rz-icon1 {
  width: 24px;
  height: 24px;
  background-position: 0 -24px;
}
.rz-icon2 {
  width: 24px;
  height: 24px;
  background-position: -24px -24px;
}



/* 下载按钮的sp类（btn-xz�?*/
.btn-xz {
  display: block;
  width:252px;
  height: 120px;
  background-image: url("../images/sp.png");
  background-repeat: no-repeat;
  background-position: -10 0px; /* 下载按钮在sp.png中的坐标 */
  text-align: center;
  line-height: 60px;
  color: #fff;
  text-decoration: none;
}

/* 微信模块样式（完全匹配图1�?*/
.sun-gf-box {
    width: 252px;
    background: #fff;
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.sun-gf-box img {
    width: 106px;
    height: 108px;
    display: block;
}
.gf-wx-box {
    margin-left: 15px;
}
.gf-wx {
    font-size: 20px;
    color: #333;
    font-weight: bold;
}
.gf-wx span {
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    display: block;
    margin-top: 3px;
}
.tj-gzh {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
}

/* 武器展示整体容器 —— 缩小上下内边距，消除顶部缝隙 */
.weapon-show {
  padding: 0; /* 👈 把原来的40px改成0，直接消除上下多余空白 */
  color: #d7b591;
}

/* 顶部标题区 —— 缩小底部间距，和下面无缝衔接 */
.section-header {
  text-align: center;
  margin-bottom: 20px; /* 👈 从30px改成20px */
  padding-top: 20px; /* 👈 给标题区加一点顶部内边距，避免贴边 */
}
.section-header h2 {
  color: #fff;
  font-size: 28px;
  margin-bottom: 15px;
}
.section-header .intro {
  max-width: 1000px;
  margin: 0 auto;
  line-height: 1.7;
  text-indent: 2em;
}

/* 开光规则卡片 —— 缩小底部间距，和武器卡片无缝衔接 */
.rule-card {
  background: rgba(37, 39, 26, 0.7);
  border: 1px solid #3c402c;
  border-radius: 8px;
  padding: 25px;
  margin: 0 auto 20px; /* 👈 从40px改成20px */
  max-width: 1000px;
}
.rule-card h3 {
  color: #be8e4b;
  font-size: 20px;
  margin-bottom: 15px;
  text-align: center;
}
.rule-content p {
  line-height: 1.7;
  margin: 8px 0;
}

/* 核心！2排×6列布局（桌面端） */
.weapon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 6列 × 2排 = 12把武器 */
  gap: 20px;
  max-width: 1400px; /* 加宽容器，让卡片更宽 */
  margin: 0 auto;
  padding: 0 20px;
}

/* 武器卡片 */
.weapon-card {
  background: rgba(37, 39, 26, 0.5);
  border: 1px solid #3c402c;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.weapon-card:hover {
  transform: translateY(-5px);
  border-color: #be8e4b;
}

/* 武器图片区（控制大小的关键） */
.weapon-img {
  width: 100%;
  height: 260px; /* 固定高度，既能完整展示特效，又不会过小 */
  overflow: hidden;
}
.weapon-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填满容器，只裁切边缘，核心特效完整保留 */
  display: block;
}

/* 武器信息区 */
.weapon-info {
  padding: 15px;
  text-align: center;
}
.weapon-info h4 {
  color: #be8e4b;
  font-size: 18px;
  margin-bottom: 8px;
}
.weapon-info p {
  line-height: 1.6;
  font-size: 14px;
}

/* 响应式适配：平板端变3列 */
@media (max-width: 1200px) {
  .weapon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 响应式适配：手机端变2列 */
@media (max-width: 768px) {
  .weapon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* 响应式适配：小屏幕变1列 */
@media (max-width: 480px) {
  .weapon-grid {
    grid-template-columns: 1fr;
  }
}
/* 页面基础样式（复用武器页风格） */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(37, 39, 26, 0.7);
  padding: 15px 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #be8e4b;
}
.game-data-title {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
.breadcrumb {
  color: #ccc;
  font-size: 14px;
}

/* 页面标题区 */
.skill-page-title {
  text-align: center;
  margin-bottom: 30px;
  color: #fff;
}
.skill-page-title h2 {
  font-size: 28px;
  margin-bottom: 15px;
}
.skill-page-title p {
  max-width: 1000px;
  margin: 0 auto;
  line-height: 1.7;
  color: #ccc;
}

/* 职业切换标签（和装备页标签风格统一） */
.skill-tab-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}
.skill-tab-btn {
  padding: 10px 25px;
  background: rgba(37, 39, 26, 0.7);
  border: 1px solid #3c402c;
  border-radius: 4px;
  color: #ccc;
  text-decoration: none;
  transition: all 0.3s ease;
}
.skill-tab-btn.active {
  background: #be8e4b;
  color: #fff;
  border-color: #be8e4b;
}
.skill-tab-btn:hover {
  border-color: #be8e4b;
  color: #fff;
}

/* 技能卡片布局（3列×5行，刚好15个技能） */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 技能卡片样式（和武器卡片完全呼应） */
.skill-card {
  background: rgba(37, 39, 26, 0.7);
  border: 1px solid #3c402c;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.skill-card:hover {
  transform: translateY(-5px);
  border-color: #be8e4b;
}

/* 技能图片区（内层半透明底色，和武器卡片保持一致） */
.skill-img {
  width: 100%;
  height: 200px; /* 可根据你的技能截图大小调整 */
  background: rgba(37, 39, 26, 0.6);
  overflow: hidden;
}
.skill-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 技能信息区 */
.skill-info {
  padding: 15px;
  text-align: center;
}
.skill-info h4 {
  color: #be8e4b;
  font-size: 18px;
  margin-bottom: 8px;
}
.skill-info p {
  line-height: 1.6;
  font-size: 14px;
  color: #ccc;
}

/* 响应式适配 */
@media (max-width: 992px) {
  .skill-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .skill-grid {
    grid-template-columns: 1fr;
  }
}