/* 公用弹窗样式 */
.modal-overlay-1,
.modal-overlay-2 {
    position: fixed; /* 固定位置，使弹窗覆盖整个页面 */
    top: 0; /* 顶部距离设为0 */
    left: 0; /* 左侧距离设为0 */
    width: 100%; /* 覆盖整个页面宽度 */
    height: 100%; /* 覆盖整个页面高度 */
    display: none; /* 默认隐藏 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    z-index: 9999; /* 设置一个足够高的值确保在最前面 */
}
.modal-1 {
    background-color: rgba(255, 255, 255, 0); /* 背景颜色设置为透明 */
    padding: 10px; /* 内边距为20像素 */
    border-radius: 8px; /* 边角圆滑程度为8像素 */
    text-align: center; /* 文本居中对齐 */
    width: 380px; /* 弹窗宽度为450像素 */
}

.modal-1 img {
    max-width: 100%; /* 图片最大宽度为弹窗宽度 */
    border-radius: 2px; /* 图片边角圆滑程度为2像素 */
}

.close-btn-1 {
    background-color: #ff5c5c; /* 按钮背景颜色为红色 */
    color: white; /* 按钮文字颜色为白色 */
    border: none; /* 无边框 */
    padding: 10px; /* 内边距为10像素 */
    cursor: pointer; /* 鼠标移上显示为手型 */
    border-radius: 5px; /* 按钮边角圆滑程度为5像素 */
    margin-top: 5px; /* 按钮顶部外边距为5像素 */
}

.close-btn-1:hover {
    background-color: #e04a4a; /* 鼠标悬停时按钮背景颜色变深 */
}



/* 弹窗2样式 */
.modal-overlay-2 {
    position: fixed; /* 固定位置，使弹窗覆盖整个页面 */
    top: 0; /* 顶部距离设为0 */
    left: 0; /* 左侧距离设为0 */
    width: 100%; /* 覆盖整个页面宽度 */
    height: 100%; /* 覆盖整个页面高度 */
    display: none; /* 默认隐藏 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.modal-2 {
    background-color: rgba(255, 255, 255, 0); /* 背景颜色设置为透明 */
    padding: 1px; /* 内边距为1像素 */
    border-radius: 1px; /* 边角圆滑程度为1像素 */
    text-align: center; /* 文本居中对齐 */
    width: 380px; /* 弹窗宽度为320像素 */
}

.modal-2 img {
    max-width: 100%; /* 图片最大宽度为弹窗宽度 */
    border-radius: 2px; /* 图片边角圆滑程度为2像素 */
}

/* 按钮容器样式 */
.button-container-2 {
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 按钮之间的间距 */
    margin-top: 10px; /* 与上方内容的间距 */
}

/* 弹窗1关闭按钮容器样式 */
.close-btn-container-1 {
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin-top: -25px; /* 按钮与图片的垂直间距 */
    padding: 10px; /* 按钮与弹窗容器之间的内边距 */
}

/* 弹窗2按钮容器样式 */
.button-container-2 {
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 按钮之间的间距 */
    margin-top: -25px; /* 按钮与图片的间距 */
    padding: 15px; /* 按钮与弹窗容器之间的内边距 */
}

/* 弹窗1关闭按钮样式 */
.ui-btn-close {
    width: 180px; /* PC版本按钮更大 */
    height: 70px; /* PC版本按钮更高 */
    cursor: pointer; /* 鼠标样式为手型 */
    animation: blink 3s infinite; /* 添加闪烁动画 */
}

/* 弹窗2跳转按钮样式 */
.ui-btn-link {
    width: 180px; /* PC版本按钮更大 */
    height: 70px; /* PC版本按钮更高 */
    cursor: pointer; /* 鼠标样式为手型 */
    animation: blink 3s infinite; /* 添加闪烁动画 */
}

/* 📱 移动端按钮适配 */
@media screen and (max-width: 768px) {
    .ui-btn-close, .ui-btn-link {
        width: 140px; /* 移动端按钮适中大小 */
        height: 55px; /* 移动端按钮适中高度 */
    }
}

/* 闪烁动画 */
@keyframes blink {
    0% { opacity: 3; } /* 动画开始时透明度为1（完全不透明） */
    50% { opacity: 0.5; } /* 动画中间时透明度为0.5（半透明） */
    100% { opacity: 3; } /* 动画结束时透明度恢复为1（完全不透明） */
}