html, body {
  overflow: hidden;  /* 已存在 */
  width: 100vw;      /* 改为视口宽度 */
  height: 100vh;     /* 改为视口高度 */
  max-width: 875px;  /* 保留最大尺寸 */
  max-height: 373px; /* 保留最大尺寸 */
  position: relative; /* 新增定位上下文 */
}

    body {
      background-color: #222222;
      color: #FFFFFF;
      margin: 0 auto;
      font-family: "Microsoft YaHei", "Helvetica Neue", Arial, "Hiragino Sans GB", "Source Han Sans CN", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
	  font-size: 14px;
      line-height: 1.6;
      font-weight: 400;
      letter-spacing: 1px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    iframe {
      border: none;
      overflow: hidden;
      scrolling: no;
	  margin: 10px auto;
    }
	
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
	
    h1, h2, h3, h4, h5, h6 {
	  font-size: 16px;
      font-weight: blod;
      line-height: 1.2;
      letter-spacing: 1px;
      margin-bottom: 5px;
      color: #EEEEEE;
    }

    p {
      margin-bottom: 5px;
    }
	
    hr {
	  border: 1px solid #999999;
      margin: 0px;
	  padding: 0px;
    }
	
.container {
  width: 100%;      /* 改为百分比宽度 */
  height: calc(100% - 40px); /* 动态计算高度 */
  max-width: 850px; /* 增加最大宽度限制 */
  margin: 5px auto;
  overflow: hidden;  /* 新增 */
}
	
    .version-box {
        float: left;
        width: 500px;
        margin: 10px 20px;
    }
	
.download-btn {
    display: inline-block;
    padding: 2px 10px;
    margin-left: 10px;
    background-color: #CC0000;
    color: white;
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
    font-weight: normal;
}

.download-btn:hover {
    background-color: #FF0000;
}	

.lishi-btn {
    display: inline-block;
    padding: 2px 10px;
    margin-left: 10px;
    background-color: #555555;
    color: white;
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
    font-weight: normal;
}

.lishi-btn:hover {
    background-color: #CC0000;
}	

/* 新增二维码表格样式 */
.qrcode-table {
    border-collapse: collapse;
    margin: 0;
    border: none;
}
.qrcode-table td {
    vertical-align: top;
    padding: 0 30px;
    text-align: center;
    border: none;
}

    .qrcode-container {
        float: right;
        margin: 10px 20px 0 0;
        text-align: center;
    }

    .qrcode-group {
        display: flex;
        gap: 25px;
    }

    .qrcode-item img {
        width: 50px;
        height: 50px;
    border-radius: 50%;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    padding: 3px; /* 防止图片内容溢出边框 */
}

.qrcode-item img:hover {
    border-color: #CC0000;
    box-shadow: 0 0 10px rgba(204,0,0,0.3); /* 可选悬停阴影效果 */
}

.qrcode-item img:active {
    border-color: #FF0000;
    box-shadow: 0 0 15px rgba(255,0,0,0.5); /* 可选点击扩散效果 */
}
    .feature-table {
    	font-size: 14px;
        width: 800px;		
        border-collapse: collapse;
        margin: 0px 20px;
        clear: both;
    }

    .feature-table td, .feature-table th {
        border: 1px solid #FF0000;
        padding: 5px 15px;
        text-align: left;
    }

    .contact-button {
        background: #CC0000;
        color: white;
        padding: 5px 20px;
        border: none;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
    }

    .contact-button:active {
        background: #FF0000;
    }

    .contact-info {
        clear: both;
        padding: 10px;     
        margin: 10px;
        position: relative;
        flex-grow: 1; /* 让底部信息区域占据剩余空间 */
    }

    .contact-info .qrcode-container {
        position: absolute;
        right: 10px;
        top: 0px;
        transform: translateY(-50%);
        margin: 0px;
    }
	
	/* 版权信息样式 */
.copyright-footer {
  position: absolute;  /* 改为绝对定位 */
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 0;      /* 移除原有margin */
  padding: 5px 0;     /* 调整内边距 */
}

.footer-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    font-size: 12px;
    color: #CCCCCC;
}

.footer-content a {
    color: #CC0000; /* 与按钮红色系保持一致 */
    text-decoration: none;
    margin: 0 5px;
}

.footer-content a:hover {
    text-decoration: underline;
}

/* 强制隐藏滚动条 */
::-webkit-scrollbar {
    display: none;
}

/* 联系信息容器定位 */
.contact-info {
    position: relative; /* 为绝对定位子元素提供参照 */
    padding-bottom: 10px; /* 为浮动元素预留空间 */
}

/* 推广区块浮动定位 */
.promo-float {
    position: absolute;
    left: 280px;    /* 距离右侧10px */
    top: 5px;      /* 距离顶部10px */
    width: 250px;
    z-index: 10;    /* 确保在最上层 */
}

/* 推广内容样式 */
.promotion-box {
    width: 100%;
    padding: 5px;
    background-color:#333333; /* 半透明背景 */
    border-radius: 3px;
    text-align: center;
    border: 0px solid #111111;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 联系内容样式 */
.contact-content {
    clear: both; /* 清除浮动影响 */
    padding-top: 10px; /* 与上方内容保持间距 */
}

/* 响应式调整 */
@media (max-width: 300px) {
    .promo-float {
        position: static; /* 小屏幕取消浮动 */
        width: 100%;
        margin: 10px 0;
    }
}