/* 基础样式设置 */
body, html {
    height: 100%;          /* 确保页面占满整个视口高度 */
    margin: 0;             /* 清除默认边距 */
    /* 定义渐变背景色 */
    background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
    background-size: 400% 400%;  /* 背景大小，用于动画效果 */
    /* 添加渐变动画，兼容不同浏览器 */
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite;
    /* 禁止用户选择文本 */
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* 渐变动画关键帧定义 - 兼容WebKit内核浏览器 */
@-webkit-keyframes Gradient {
    0% {
        background-position: 0 50%;  /* 起始位置 */
    }
    50% {
        background-position: 100% 50%;  /* 中间位置 */
    }
    to {
        background-position: 0 50%;  /* 结束位置，回到起始 */
    }
}

/* 渐变动画关键帧定义 - 兼容Firefox浏览器 */
@-moz-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    to {
        background-position: 0 50%;
    }
}

/* 渐变动画关键帧定义 - 标准语法 */
@keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    to {
        background-position: 0 50%;
    }
}

/* 主内容区域样式 */
.logo {
    position: absolute;    /* 绝对定位 */
    left: 50%;             /* 水平居中 */
    top: 50%;              /* 垂直居中 */
    width: 100%;           /* 宽度占满 */
    /* 平移自身一半实现居中 */
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* Logo样式 */
.logo #logo {
    width: 150px;
    height: 150px;
   border-radius: 20%;   /* 圆形显示 */
    display: block;        /* 块级元素 */
    margin: 0 auto;        /* 水平居中 */
}

/* Logo、标题和段落的文本对齐 */
.logo #logo, h2, p {
    text-align: center;    /* 文本居中 */
}

/* 标题和段落样式 */
h2, p {
    font-weight: 400;      /* 正常字重 */
    color: #fff;           /* 白色文本 */
    margin: 20px 0 0;      /* 顶部外边距20px，其他0 */
}

h2 {
    font-size: 30px;       /* 标题字体大小 */
}

p {
    font-size: 16px;       /* 段落字体大小 */
}

/* 文本容器样式 */
.texts {
    margin-left: 5%;       /* 左右外边距5% */
    margin-right: 5%;
}

/* 中间按钮样式 */
.middlebtn {
    text-align: center;    /* 按钮居中 */
    margin-left: auto;
    margin-right: auto;
    opacity: 0.8;          /* 轻微透明 */
}

/* 详情文本样式 */
.details {
    font-size: 20px;       /* 详情字体大小 */
}

/* 二维码样式 */
.qrcode {
    width: 50%;            /* 宽度50% */
    height: 50%;           /* 高度50% */
}

/* 模态框内容样式 */
.modal-body .content {
    text-align: center;    /* 内容居中 */
}

/* 响应式样式 - 屏幕宽度小于800px时 */
@media (max-width: 800px) {
    .desktop {
        display: none;     /* 隐藏桌面端元素 */
    }
    .h5 {
        font-size: 18px;   /* 调整h5字体大小 */
    }
}

/* 响应式样式 - 屏幕宽度大于等于800px时 */
@media (min-width: 800px) {
    .smaller {
        width: 50%;        /* 宽度50% */
        height: auto;      /* 高度自适应 */
        margin-left: auto; /* 水平居中 */
        margin-right: auto;
    }
}

/* 图标样式 */
.icon {
    width: 1em;            /* 宽度1em */
    height: 1em;           /* 高度1em */
    vertical-align: -.15em; /* 垂直对齐调整 */
    fill: currentColor;    /* 填充当前文本颜色 */
    overflow: hidden;      /* 超出隐藏 */
    font-size: 16;         /* 字体大小 */
    opacity: 1;            /* 不透明 */
}

/* 按钮样式 */
.btn {
    margin: 5px;           /* 按钮外边距5px */
}



/* 图片样式 */
img {
    max-width: 75%;        /* 最大宽度75% */
    height: auto;          /* 高度自适应 */
    width: auto\9;         /* IE8及以下兼容 */
}

/* 模态框容器最大宽度 */
.modal-container {
    max-width: 750px;
}

/* 页脚样式 */
#footer {
    padding-bottom: 12px;  /* 底部内边距12px */
    position: absolute;    /* 绝对定位 */
    width: 100%;           /* 宽度100% */
    bottom: 0;             /* 位于底部 */
    text-align: center;    /* 文本居中 */
    backdrop-filter: blur(20px); /* 背景模糊效果 */
    color: #fff;           /* 白色文本 */
}

/* 页脚链接样式 */
#footer a {
    color: #fff;           /* 白色链接 */
    text-decoration: underline; /* 下划线 */
}

/* 提示框样式 */
#tip {
    position: fixed;       /* 固定定位 */
    left: 0;               /* 左对齐 */
    top: 0;                /* 顶部对齐 */
    background: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
    filter: alpha(opacity=80); /* IE透明度兼容 */
    width: 100%;           /* 宽度100% */
    height: 100%;          /* 高度100% */
    z-index: 1050;         /* 层级较高，确保显示在最上层 */
    display: none;         /* 默认隐藏 */
}

/* 提示框图片样式 */
#tip-img {
    max-width: 100%;       /* 最大宽度100% */
    width: 100%;           /* 宽度100% */
    height: auto;          /* 高度自适应 */
}