/* ================= 全局 ================= */

body{
  margin:0;
  background:#f4f5f8;
  font-family:"Microsoft YaHei", Arial;
  color:#000;
}

a{
  text-decoration:none;
  color:#000;
}

a:hover{
  color:#333;
}

.wrap{
  width:1000px;        /* IE8/桌面固定宽 */
  max-width:1000px;    /* 现代浏览器限制最大宽 */
  width:auto;          /* 现代浏览器可缩放 */
  margin:0 auto;
  padding:0 16px;      /* 移动端留白 */
}

.clearfix{ zoom:1; }
.clearfix:after{
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}

/* ================= 头部 ================= */

.topbar{
  background:#ffffff;
  height:80px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.logo{
  float:left;
  height:80px;
  line-height:80px;
}

.logo img{
  height:45px;
  margin-top:17px;
  border:0;
  display:block;
}

/* 导航（不加粗） */
.nav{
  float:right;
  list-style:none;
  margin:0;
  padding:0;
}

.nav li{
  float:left;
}

.nav a{
  display:block;
  line-height:80px;
  padding:0 22px;
  color:#000;
  font-size:14px;
}

.nav a:hover{
  color:#333;
}

/* ================= 标题区 ================= */

.banner{
  text-align:center;
  padding:60px 0 40px 0;
}

.banner h1{
  margin:0;
  font-size:32px;
  color:#000;
  font-weight:bold;   /* 仅此处加粗 */
}

.banner p{
  margin-top:10px;
  color:#666;
  font-size:14px;
}

/* ================= 游戏区 ================= */

.main{
  padding-bottom:70px;
}

.game-box{
  float:left;
  width:480px;
  background:#ffffff;
  margin-right:40px;
  box-shadow:0 8px 30px rgba(0,0,0,0.06);
  border-radius:12px;          /* 圆角 */
  overflow:hidden;            /* 让图片跟随圆角裁切 */
}

.game-box.last{
  margin-right:0;
}

.cover{
  width: 480px;
  height: 215px;
  display: block;
  border: 0;
  background: #e5e5e5;
}

.content{
  padding:30px;
}

.content h2{
  margin:0;
  font-size:20px;
  color:#000;
  font-weight:bold;   /* 仅卡片标题加粗 */
}

.content p{
  margin:12px 0 25px 0;
  color:#555;
}

.btn-group{
  /* 容器占位 */
}

/* ================= 按钮（唯一使用 #474b5f 的地方） ================= */

.btn{
  float:left;
  padding:10px 18px;
  margin-right:12px;
  font-size:16px;
  color:#474b5f;
  border:1px solid #474b5f;
  
  border-radius:6px;
}

.btn:hover{
  background:#474b5f;
  color:#fff;
}

.primary{
  background:#474b5f;
  color:#fff;
}

/* ================= 底部 ================= */

.footer{
  background:#ffffff;
  text-align:center;
  padding:35px 0;
  color:#666;
  font-size:12px;
  box-shadow:0 -2px 10px rgba(0,0,0,0.03);
}

/* ================= 响应式：移动端增强（IE8 会忽略，不影响） ================= */

@media screen and (max-width: 1040px){
  .game-box{ margin-right:30px; }
}

@media screen and (max-width: 768px){

  /* 顶部高度恢复 */
  .topbar{
    height:60px;
  }

  /* Logo 左对齐 */
  .logo{
    float:left;
    height:60px;
    line-height:60px;
    padding:0;
    text-align:left;
  }

  .logo img{
    height:34px;
    margin-top:13px;
  }

  /* 导航只保留两个 */
  .nav{
    float:right;
    text-align:right;
    padding:0;
  }

  .nav li{
    float:left;
  }

  /* 默认隐藏全部 */
  .nav li{
    display:none;
  }

  /* 只显示第2个（用户协议）和第4个（客服中心） */
  .nav li:nth-child(1),
  .nav li:nth-child(2){
    display:block;
  }

  .nav a{
    line-height:60px;
    padding:0 12px;
    font-size:14px;
  }

  /* ===== 下面是内容区响应式 ===== */

  .banner{
    padding:36px 0 26px;
  }

  .banner h1{
    font-size:24px;
  }

  .banner p{
    font-size:13px;
  }

  .game-box{
    float:none;
    width:auto;
    margin:0 0 18px 0;
  }

  .cover{
    width:100%;
    height:auto;
  }

  .content{
    padding:18px;
  }

  .content h2{
    font-size:18px;
  }

  .btn{
    margin:0 10px 10px 0;
    padding:10px 14px;
  }
}

@media screen and (max-width: 420px){
  /* 超小屏按钮竖排全宽 */
  .btn{
    float:none;
    display:block;
    width:auto;
    margin:0 0 10px 0;
    text-align:center;
  }
}