/* 🌍 页面整体布局限制 */
/* 🌍 页面整体布局，修改为自适应高度 */
body {
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;  /* 删除原来的最小高度设置，允许页面根据内容高度自动扩展 */
    background: url('../logo/bg.png') no-repeat center center fixed;
    background-size: 1080px 2340px;
    overflow: auto; /* 允许页面滚动 */
}

/* 🌟 容器样式，修改为宽度自适应并允许内容溢出 */
.container {
    width: 100%; /* 宽度自适应 */
    max-width: 1080px; /* 最大宽度设为1080px */
    margin: 0 auto; /* 水平居中 */
    position: relative; /* 相对定位 */
    overflow: visible; /* 允许内容溢出 */
}


/* 🌟 容器限制 */
.container {
    width: 1080px; /* 固定宽度 */
    height: 2340px; /* 固定高度 */
    margin: 0 auto; /* 居中 */
    position: relative; /* 相对定位，确保按钮可受限 */
    overflow: hidden; /* 防止内容溢出 */
}

/* 📲 下载按钮容器 */
.container #download-container {
    position: absolute; /* 相对于 .container 定位 */
    top: 2px; /* 顶部距离 */
    right: 8px; /* 右侧距离 - 调整为紧贴右边 */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列按钮 */
    gap: 8px; /* 按钮之间的间距 */
   
}

/* 📲 单个按钮样式 */
.container #download-container .download-btn {
    width: 50px; /* 按钮宽度 - PC版本更大 */
    height: 50px; /* 按钮高度 - PC版本更大 */
    border-radius: 20%; /* 圆形按钮 */
    overflow: hidden; /* 防止图片溢出 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fef5a4; /* 按钮背景色 */
    border: 1px solid #fdd835; /* 按钮边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

/* 📲 按钮悬停效果 */
.container #download-container .download-btn:hover {
    transform: scale(1.1); /* 悬停时放大 */
}

/* 📲 按钮内图片 */
.container #download-container .download-btn img {
    width: 100%; /* 图片填满按钮 */
    height: 100%; /* 图片填满按钮 */
    object-fit: cover; /* 保持比例填满按钮 */
    border-radius: 30%; /* 确保图片也为圆形 */
    margin: 0; /* 移除边距 */
}

/* 📱 小屏幕适配 */
@media (max-width: 768px) {
    .container #download-container {
        top: 5px; /* 减小顶部间距 */
        right: 5px; /* 减小右侧间距，确保紧贴右边 */
        gap: 5px; /* 减小按钮间距 */
    }

    .container #download-container .download-btn {
        width: 40px; /* 缩小按钮大小 */
        height: 40px; /* 缩小按钮大小 */
    }

    .container #download-container .download-btn img {
        width: 100%; /* 图片填满按钮 */
        height: 100%; /* 图片填满按钮 */
    }
}