@charset "utf-8";
/* CSS Document */
#index-head {
  width: 100%;
  height: 730px;
  /* background:#0A00FF; */
  
  overflow: hidden;
	background-image: url("../image/backgound.png");
	background-repeat: no-repeat;
	background-size: 2000px 800px;
}

#index-head #Navigational{
	height:300px;
	width: 1200px;
	/* background: #C000FF; */
	margin: 0 auto; /* 居中对齐 */
}



#index-head #head-part{
	height:400px;
	width: 1200px;
	/* background: #C000FF; */
	background-image: url("../image/创建卡通风格图片.png");
	background-size: 980px 400px; /* 完整显示图片，不裁剪 */
    background-position: center; /* 图片居中显示 */
    background-repeat: no-repeat; /* 图片不重复 */
	margin: 0 auto; /* 居中对齐 */
	
	/* 使用flex布局，确保内容在背景图内部 */
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	padding: 0 1px; /* 左右内边距，减小让内容更紧凑 */
}

#index-head #head-part #part1{
	height:300px;
	width: 300px; /* 加宽，让按钮区域更宽 */
	/* background: #000000; */
	background-image: url("../image/part1.png");
    /* 通常还需要设置背景图片的显示方式 */
    background-size: 350px 310px; /* 完整显示part1图片 */
    background-position: center; /* 图片居中显示 */
    background-repeat: no-repeat; /* 图片不重复 */
	
	/* 在flex容器中，靠左显示 */
	flex-shrink: 0; /* 防止被压缩 */
	margin-right: 1px; /* 与右边内容的间距（减小间隙） */
	
	display: flex;
    align-items: center;
    justify-content: center;
	
}

#index-head #head-part #part1 ul{
	float: left;
	padding: 0;  /* 减少padding避免溢出 */
	padding-left: 55px;
	margin: 0;
    list-style-type: none;
}


#index-head #head-part #part1 li {
    min-width: 130px;
  height: 40px;
  color: #4433ff;
  padding: 0px 15px;
	margin-top: 10px;
	margin-left: 32px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-flex; /* 使文字垂直居中 */
  align-items: center;
  justify-content: center;
  outline: none;
  border-radius: 8px;
  z-index: 0;
  background: #fff;
  overflow: hidden;
  border: 2px solid #4433ff;
}

#index-head #head-part #part1 li:hover {
  color: #fff;
}

#index-head #head-part #part1 li:hover:after {
  width: 100%;
}

#index-head #head-part #part1 li:after {
  content: "";
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #4433ff;
}

#index-head #head-part #part2{
	height:250px;
	width: 510px;
	/* background:#1B02F7; */
	
	/* 在flex容器中，作为右侧内容 */
	flex-shrink: 0; /* 防止被压缩 */
}

#index-head #head-part #part2 ul {
  list-style: none;
  padding: 0; /* 可选：移除默认内边距，让列表更紧凑 */
  margin: 0px; /* 可选：移除默认外边距 */
}

#index-head #head-part #part2 ul li h5,
#index-head #head-part #part2 ul li a,
#index-head #head-part #part2 ul li h4 {
    /* 清除默认内外边距，避免基线偏移 */
    margin: 0;
    padding: 0;
    /* 统一行高，确保垂直对齐 */
    line-height: 20px;
    /* 确保元素基线一致 */
    vertical-align: baseline;
}

#index-head #head-part #part2 ul li a {
    /* 增加顶部对齐修正（根据实际偏移量微调） */
    padding-top: 1px; /* 可根据需要增减 */
}


#index-head #head-part #part2 ul li{
	font-size:12px;
	width:480px;
	float:left;
	padding:9px 0px;
	overflow: hidden;
	
}
#index-head #head-part #part2 ul li h5{
	float:left;
	width:80px; /* 增加宽度到80px，给足够空间显示【小型游戏】 */
	min-width:80px;
	max-width:80px;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	line-height: 1.5;
	white-space: nowrap !important; /* 强制不换行 */
	overflow: visible !important; /* 改为可见 */
	word-break: keep-all !important; /* 防止方括号被拆分 */
}

#index-head #head-part #part2 ul li a{
	display:block;
	width:310px;
	max-width: calc(100% - 160px); /* 手机端自适应：总宽度 - 分类(80px) - 日期(60px) - 间距(20px) */
	float:left;
	color: #00F;
    margin-left: 10px;
	border-bottom:1px #000000 dashed;
	text-decoration: none; /* 去掉下划线 */
	line-height: 1.5;
	overflow: hidden; /* 超长文本隐藏 */
	text-overflow: ellipsis; /* 显示省略号 */
	white-space: nowrap !important; /* 强制不换行 */
	word-break: keep-all !important; /* 防止标点符号被拆分 */
	overflow-wrap: normal; /* 不允许长单词换行 */
	word-wrap: normal; /* 不允许长单词换行 */
}


#index-head #head-part #part2 ul li h4{
	float:right;
	color:#F00;
	font-size:12px;
	font-weight:200;
	line-height: 1.7;
	margin-left: 10px;
	margin-top: 2px;
}


#head #part1 #context #news ul li a:hover{
	text-decoration:none; /* 悬停时不显示下划线 */
	color:#000; /* 悬停时保持黑色 */
}






#index-head #head-part #part3{
	height:280px;
	width: 22%;
	/* background:#1B02F7; */
	
	/* 不显示part3，或者如果需要显示，请调整 */
	display: none;
}

/* ========================================
   移动端响应式布局
   ======================================== */
@media screen and (max-width: 768px) {
	/* 头部内容区适配 */
	#index-head #head-part {
		width: 100%;
		flex-direction: column; /* 垂直排列 */
		padding: 10px;
		background-size: cover; /* 背景图片覆盖 */
	}
	
	/* Part1 按钮区域 */
	#index-head #head-part #part1 {
		width: 100%;
		height: auto;
		margin-right: 0;
		margin-bottom: 20px;
		background-size: 100% auto;
	}
	
	#index-head #head-part #part1 ul {
		padding-left: 10px;
		width: 100%;
	}
	
	#index-head #head-part #part1 li {
		margin-left: 5px;
		margin-right: 5px;
		min-width: 100px;
		font-size: 11px;
	}
	
	/* Part2 文章列表区域 */
	#index-head #head-part #part2 {
		width: 100%;
		height: auto;
	}
	
	#index-head #head-part #part2 ul li {
		width: 100%;
		padding: 5px 0;
		display: flex; /* 使用 flex 布局 */
		align-items: center; /* 垂直居中 */
		flex-wrap: nowrap; /* 不换行 */
	}
	
	#index-head #head-part #part2 ul li h5 {
		width: 80px; /* 增加到80px，给足够空间 */
		min-width: 80px;
		max-width: 80px;
		font-size: 10px;
		flex-shrink: 0; /* 不允许压缩 */
		white-space: nowrap !important; /* 强制不换行 */
		overflow: visible !important; /* 改为可见，观察实际宽度 */
		word-break: keep-all !important; /* 防止方括号被拆分 */
		line-height: 1.5;
	}
	
	#index-head #head-part #part2 ul li a {
		width: auto;
		max-width: calc(100% - 160px); /* 调整为 80px(分类) + 60px(日期) + 20px(间距) */
		font-size: 11px;
		margin-left: 5px;
		word-break: keep-all !important; /* 防止标点符号被拆分 */
		flex-grow: 1; /* 自动占据剩余空间 */
		flex-shrink: 1; /* 允许标题被压缩 */
		min-width: 0; /* 允许缩小到0 */
		white-space: nowrap !important; /* 确保不换行 */
		overflow: hidden; /* 确保超长文本隐藏 */
		text-overflow: ellipsis; /* 显示省略号 */
	}
	
	#index-head #head-part #part2 ul li h4 {
		width: 60px; /* 固定宽度 */
		min-width: 60px;
		font-size: 10px;
		margin-left: 5px;
		flex-shrink: 0; /* 不允许压缩 */
	}
}