/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  /* 确保容器高度铺满视口 */
  height: 100%;
  min-height: 100vh; /* 兼容不同设备，确保至少铺满屏幕高度 */
  
  /* 背景图核心属性 */
  background-image: url("../img/GRO-bg.jpg"); /* 替换为你的图片路径 */
  background-size: cover; /* 等比例缩放，覆盖整个容器 */
  background-position: center center; /* 水平+垂直居中 */
  background-attachment: fixed; /* 固定背景，滚动不移动 */
  background-repeat: no-repeat; /* 禁止背景图重复 */
  
  /* 可选：防止背景图加载前的白屏，设置背景色 */
  background-color: #f5f5f5;
}

/* 页面容器：居中+限制宽度 */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 0;
  position: relative;
}

/* 头部Logo：顶部中央 */
.header {
  text-align: center;
  margin-bottom: 20px;
}
.logo-img {
  height: 286px;
}

/* 核心内容容器：相对定位 + 提高层级，覆盖角色图层 */
.main-content {
  position: relative;
  z-index: 2; /* 核心内容层级 > 角色图层（z-index:1） */
}

/* 主体网格布局：3列（公告+攻略+功能入口）+ 底部横幅 */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 公告/攻略/功能入口宽度比例 */
  grid-template-rows: auto 1fr; /* 模块行 + 横幅行 */
  gap: 25px;
}
.new-notice {
	background: url(../img/gro-notice.png) no-repeat;
    width: 902px;
    height: 711px;
}
/* 模块通用样式（公告/攻略） */
.module {
	padding: 103px 43px 0px 43px;
    display: inline-block;
	vertical-align: top;
    width: 445px;
    height: 430px;
}

/* 模块列表 */
.module-list {
  list-style: none;
  line-height: 2;
  font-size: 18px;
  color: #444;
  margin-bottom: 15px;
}

.news-item {
	display: flex;
	justify-content: space-between; /* 水平两端对齐 */
	align-items: center; /* 垂直居中（可选，根据需求调整） */
	padding: 8px 0; /* 可选，增加内边距优化视觉 */
	list-style: none; /* 可选，去除默认列表圆点 */
}
/* 可选：优化链接和日期的样式 */
.news-item a {
	color: #333;
	text-decoration: none;
}
.news-item a:hover {
	color: #0066cc;
	text-decoration: underline;
}
.news-item .date {
	color: #999;
	font-size: 14px;
}

/* 查看更多链接 */
.view-more {
  font-size: 18px;
  color: #666;
  text-decoration: none;
    text-align: right;
    display: block;
}

/* 右侧功能入口面板 */
.function-panel {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.function-item {
    width: 344px;
    height: 216px;
}

/* 底部横幅：跨前两列 */
.banner {
	padding-top: 53px;
}
.banner img {
  width: 100%;
  border-radius: 4px;
}

/* 左右角色：绝对定位悬浮在页面两侧 */
.characters-bg {
position: absolute;
    top: 34%;
    left: -235px;
    width: 150%;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.left-char {
  left: -240px; /* 超出容器左侧 */
}
.right-char {
  right: -345px; /* 超出容器右侧 */
}
.character img {
  height: 600px; /* 角色高度 */
  display: block;
}