/* 公共样式 */
/* 所有页面去掉内边距 */
body{
  margin: 0;
  font-size: 40px;
}

/* 白色字体 */
.whiteWorld {
  color: white;
}

/* 首页部分,6个模块的图片与文字公共布局 */
/* 所有框中的左侧图标 */
.leftImg {
  margin-left: 30px;
  width: 90px;
  height: 90px;
}
/* 所有框中的右侧文本 */
.rightText {
  margin-right: 30px;
  flex: 1;
  text-align: right;
}

/* 底部菜单 */
.footerMenu {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 160px; /* 底部菜单的高度 */
      background-color: #f5f5f5;
      text-align: center;
	  display: flex;
	  margin-bottom: -1px;/* 解决在收集浏览器访问菜单栏与底部有空隙问题（1像素就行） */
}
/* 按钮项 */
.menuItem{
	width: 20%;
	display: flex; /* 启用 Flexbox 布局 */
	flex-direction: column; /* 垂直排列 */
	align-items: center; /* 在交叉轴居中对齐 */
	text-align: center; /* 文字居中对齐 */
	padding-top: 15px;
	cursor: pointer;/*将鼠标指针的外观更改为手型图标，以表示某个元素可以被点击。*/
}
.menuItem img{
	width: 60px;
	height: 60px;
}
.menuItem a{
	margin-top: 6px;
	font-size: 36px;
}

/* 弹出框消息盒子 */
.message-box{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 9999;
	width: 400px;
	height: 200px;
	/* 下面三行一起实现内容水平居中与垂直居中 */
	display: flex;
	justify-content: center;/* 水平居中 */
	align-items: center;/* 垂直居中 */
	text-align: center; /* 文本水平居中对齐 */
	line-height:200px;/* 设置个行高，就垂直居中 */
	/* line-height: normal; */
}