/* 设置全局样式 */
body {
  margin: 0 auto;  /* 将内容水平居中 */
  width: 100%;  /* 设置body的宽度为100% */
  height: 100%;  /* 设置body的高度为100% */
  min-height: 100vh;  /* 确保最小高度为视口的高度 */
  max-width: 580px;  /* 设置最大宽度为580px */
}

/* 禁用图片的鼠标事件 */
img { 
  pointer-events: none; 
}

/* 头部区域 */
.header {
  position: fixed;  /* 固定头部在视口顶部 */
  z-index: 99;  /* 设置头部的堆叠顺序 */
  top: 0;  /* 将头部定位到顶部 */
  width: 100%;  /* 头部宽度为100% */
  max-width: 580px;  /* 限制头部的最大宽度 */
}

.header > img {
  width: 100%;  /* 设置头部图片宽度为100% */
  display: block;  /* 移除图片下方的空隙 */
}

/* 底部区域 */
.footer {
  position: fixed;  /* 固定底部到视口底部 */
  bottom: 0;  /* 底部定位到视口底部 */
  width: 100%;  /* 底部宽度为100% */
  z-index: 100;  /* 设置底部的堆叠顺序 */
  max-width: 580px;  /* 限制底部的最大宽度 */
}

.footer > img {
  width: 100%;  /* 设置底部图片宽度为100% */

}

/* 内容中的图片 */
.content img {
  width: 100%;  /* 设置内容中的图片宽度为100% */

}

/* 播放项容器 */
.play-item {
  position: relative;  /* 使播放项相对定位 */
}

.play-item img {
  width: 100%;  /* 设置播放项图片宽度为100% */
}

/* 播放按钮样式 */
.play-item .play-btn {
  display: inline-block;
  width: 50px;  /* 设置按钮宽度 */
  position: absolute;  /* 绝对定位按钮 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;  /* 垂直和水平居中按钮 */
}

/* 隐藏下载链接 */
#a-download {
  display: none;
}

/* zw类的样式（具体功能不明确） */
.zw {
  height: 1.2rem;
}

/* 按钮的占位符类 */
.mbtn {
}

/* 提示信息样式 */
.tips {
  display: none;  /* 默认隐藏提示信息 */
  width: 100%;
  text-align: center;
  color: #039;  /* 设置提示信息的文本颜色 */
  font-size: 18px;  /* 设置字体大小 */
  padding: 20px 0px;  /* 添加内边距 */
}

/* jc类，居中显示的覆盖层 */
.jc {
  display: none;  /* 默认隐藏覆盖层 */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99;  /* 设置层级 */
  color: white;  /* 设置文本颜色 */
  background-color: rgb(39, 39, 39);  /* 设置背景颜色 */
  text-align: center;
  padding: 75px 0;  /* 内容上下居中 */
}

.jc img {
  width: 95%;  /* 图片宽度为95% */
}

/* 关闭按钮样式 */
.close {
  position: absolute;
  top: 0px;
  right: 20px;
  font-size: 50px;  /* 设置关闭按钮字体大小 */
  transform: rotate(45deg);  /* 将关闭按钮旋转45度 */
}

/* 二维码的样式 */
#qrcode {
  text-align: center;
  background-color: #fff;  /* 设置白色背景 */
  border-radius: 10px;  /* 圆角 */
  width: 116px;  /* 设置二维码宽度 */
  height: 116px;
  margin: auto;  /* 居中二维码 */
  position: absolute;
  top: 230px;  /* 定位二维码距离顶部230px */
  left: 50%;  /* 居中二维码 */
  transform: translate(-50%, -50%);  /* 精确居中 */
}

/* 遮罩层的样式 */
.out-mask {
  display: none;  /* 默认隐藏 */
  position: fixed;  /* 固定遮罩层 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);  /* 设置半透明黑色背景 */
  z-index: 50;
}

/* 弹出面板样式 */
.out-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 25%;  /* 定位面板到顶部25% */
  width: 80%;  /* 面板宽度为80% */
  margin: 0 auto;  /* 居中面板 */
  max-width: 660px;  /* 设置最大宽度 */
  padding: 15px 15px 0;
}

.out-panel .out-close {
  position: absolute;
  right: 20px;
  top: -40px;
  width: 40px;
}

/* 游戏按钮样式 */
.out-panel .game-btn {
  position: absolute;
  display: block;
  width: 50%;  /* 按钮宽度为50% */
  height: 20%;  /* 按钮高度为20% */
  bottom: -60px;  /* 将按钮放置在面板底部下方 */
  left: 25%;  /* 居中按钮 */
  background-size: 100% 100%;  /* 背景图大小适应按钮 */
  background-repeat: no-repeat;  /* 不重复背景图 */
}

/* 弹出框样式 */
.pop-box {
  width: 100%;  /* 宽度为100% */
  height: 0;  /* 初始高度为0 */
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);  /* 半透明背景 */
  z-index: 9999;
  max-width: 580px;  /* 设置最大宽度 */
  left: 50%;  /* 居中弹出框 */
  transform: translate(-50%, 0%);  /* 精确居中 */
  overflow: hidden;  /* 隐藏溢出的内容 */
}

/* 弹出框内容 */
.pop-content {
  width: 300px;
  font-size: 16px;
  position: absolute;
  top: 50%;  /* 垂直居中 */
  left: 50%;  /* 水平居中 */
  transform: translate(-50%, -50%);  /* 精确居中 */
}

/* 弹出框文本样式 */
.pop-text {
  background: #fff;
  padding: 15px;
  line-height: 26px;
  text-indent: 2em;  /* 首行缩进 */
}

.pop-text i {
  color: rgb(255, 107, 5);  /* 设置<i>标签文本颜色 */
}

.pop-text span {
  display: inline-block;
  color: rgb(255, 107, 5);
}

/* 弹出框底部样式 */
.pop-foot {
  background: #fef8ec;
  width: 100%;  /* 宽度为100% */
  border-radius: 0 0 10px 0;  /* 设置底部圆角 */
}

/* 弹出框左侧按钮 */
.btn-left {
  background: #fef8ec;
  float: left;
  width: 50%;  /* 按钮宽度为50% */
  height: 100%;
  padding: 16px 0;
  color: rgb(255, 107, 5);  /* 设置按钮文本颜色 */
  font-size: 16px;
  text-align: center;
  border-radius: 0 0 0 10px;  /* 圆角左下角 */
}

/* 弹出框右侧按钮 */
.btn-right {
  background: #fef8ec;
  float: left;
  width: 50%;  /* 按钮宽度为50% */
  height: 100%;
  padding: 16px 0;
  color: rgb(255, 107, 5);  /* 设置按钮文本颜色 */
  font-size: 16px;
  text-align: center;
  border-radius: 0 0 10px 0;  /* 圆角右下角 */
}