/* 全局样式重置 */
* {
    /* 盒模型设置为border-box，使元素的宽度包含边框和内边距 */
    box-sizing: border-box;
    /* 移除默认外边距 */
    margin: 0;
    /* 移除默认内边距 */
    padding: 0;
}

/* 头部区域样式 */
header {
    /* 背景颜色-白色 */
    background-color: rgb(255, 255, 255);
    /* 文本对齐方式-居中 */
    text-align: center;
    /* 宽度-100%，占满整个屏幕宽度 */
    width: 100%;
    /* 盒模型设置为border-box */
    box-sizing: border-box;
    /* 内边距-10px */
    padding: 10px;
    /* 边框阴影 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 头部图片样式 */
header img {
    /* 最大宽度100%，确保图片不超出容器 */
    max-width: 100%;
    /* 高度按照宽度自动缩放，保持图片比例 */
    height: auto;
    /* 显示方式为块级元素 */
    display: block;
    /* 水平居中 */
    margin: 0 auto;
}

/* 头部按钮样式 */
header button {
    /* 设置按钮宽度为5% */
    width: 5%; 
    /* 添加上下边距，使按钮之间有间隔 */
    margin: 5px 0;
    /* 添加内边距，使按钮看起来更舒适 */
    padding: 10px 0;
    /* 按钮背景色 */
    background-color: rgb(227, 244, 255);
    /* 未点击按钮的文字颜色为黑色 */
    color: rgb(22, 21, 21);
    /* 移除边框 */
    border: none;
    /* 添加圆角 */
    border-radius: 20px;
    /* 鼠标悬停时显示手型 */
    cursor: pointer;
    /* 字体加粗 */
    font-weight: bold;
}

/* 头部按钮悬停样式 */
header button:hover {
    /* 鼠标悬停时的背景色 */
    background-color: rgb(224, 240, 255);
}

/* 头部按钮激活样式 */
header button.active {
    /* 被点击按钮的深色背景 */
    background-color: rgb(58, 60, 61);
    /* 被点击按钮的文字颜色为白色 */
    color: rgb(255, 255, 255);
}

/* 响应式设计，针对小屏幕设备 */
@media (max-width: 768px) {
    /* 调整header按钮的宽度，适应小屏幕 */
    header button {
        /* 在手机上按钮宽度增大 */
        width: 20%;
        /* 外边距 */
        margin: 3px 1px;
        /* 内边距 */
        padding: 8px 5px;
        /* 字体大小 */
        font-size: 12px;
    }
    
    /* 确保所有图片都响应式 */
    img {
        /* 最大宽度100%，确保图片不超出容器 */
        max-width: 100%;
        /* 高度按照宽度自动缩放，保持图片比例 */
        height: auto;
        /* 显示方式为块级元素 */
        display: block;
        /* 边框圆角 */
        border-radius: 4px;
    }
}

/* 针对更小的屏幕设备 */
@media (max-width: 480px) {
    header button {
        /* 在更小屏幕上按钮宽度进一步增大 */
        width: 28%;
        /* 外边距 */
        margin: 2px 1px;
        /* 内边距 */
        padding: 6px 3px;
        /* 字体大小 */
        font-size: 10px;
    }
}

/* 图片展示主区域样式 */
main {
    /* 最大宽度1200px，限制内容区域宽度 */
    max-width: 1200px;
    /* 水平居中 */
    margin: 0 auto;
    /* 内边距20px */
    padding: 20px;
    /* 背景颜色 */
    background-color: #fff;
    /* 最小高度 */
    min-height: 600px;
}

/* 图片画廊容器样式 */
.image-gallery {
    /* 显示方式-网格布局 */
    display: grid;
    /* 网格列-自动填充，最小宽度200px */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* 网格间距15px */
    gap: 15px;
    /* 内容水平居中 */
    justify-items: center;
    /* 对齐方式-起始 */
    align-content: start;
    /* 内边距-10px */
    padding: 10px;
}

/* 图片画廊提示文本样式 */
.image-gallery p {
    /* 网格列-跨越所有列 */
    grid-column: 1 / -1;
    /* 文本居中 */
    text-align: center;
    /* 文本颜色 */
    color: #666;
    /* 字体大小 */
    font-size: 18px;
    /* 内边距 */
    padding: 40px 0;
}

/* 图库项目样式 */
.gallery-item {
    /* 宽度100% */
    width: 100%;
    /* 圆角 */
    border-radius: 8px;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 阴影效果 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 过渡动画 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 图库项目悬停样式 */
.gallery-item:hover {
    /* 向上移动5px */
    transform: translateY(-5px);
    /* 加深阴影 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 图库项目图片样式 */
.gallery-item img {
    /* 宽度100% */
    width: 100%;
    /* 高度自动 */
    height: auto;
    /* 显示方式-块级 */
    display: block;
}

/* 加载动画样式 */
.loading {
    /* 默认隐藏 */
    display: none;
    /* 网格列-跨越所有列 */
    grid-column: 1 / -1;
    /* 文本居中 */
    text-align: center;
    /* 内边距20px */
    padding: 20px;
    /* 字体大小16px */
    font-size: 16px;
    /* 文本颜色-灰色 */
    color: #666;
    /* 背景颜色 */
    background-color: #f9f9f9;
    /* 圆角 */
    border-radius: 8px;
    /* 边框 */
    border: 1px solid #eee;
}



/* 图片名称样式 */
.image-name {
    /* 显示方式-块级 */
    display: block;
    /* 内边距 */
    padding: 8px 12px;
    /* 字体大小 */
    font-size: 14px;
    /* 文本颜色 */
    color: #333;
    /* 文本居中 */
    text-align: center;
    /* 不换行 */
    white-space: nowrap;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 文本溢出显示省略号 */
    text-overflow: ellipsis;
    /* 背景颜色 */
    background-color: #f8f9fa;
}

/* 页面尾部样式 */
footer {
  /* 设置尾部的背景颜色 */
  background-color: #cad6e2;
  /* 设置内边距 */
  padding: 30px 20px;
  /* 设置文本居中 */
  text-align: center;
  /* 设置字体大小 */
  font-size: 14px;
  /* 设置字体颜色 */
  color: #8d8d8d;
  /* 设置上下边框 */
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  /* 设置最小宽度 */
  min-width: 320px;
}

/* 底部支付区域样式 */
.footer-payment {
  /* 设置顶部间距 */
  margin-top: 20px;
  /* 设置内边距 */
  padding: 20px;
  /* 设置背景颜色 */
  background-color: white;
  /* 设置圆角 */
  border-radius: 8px;
  /* 设置阴影效果 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* 设置最大宽度 */
  max-width: 600px;
  /* 水平居中 */
  margin-left: auto;
  margin-right: auto;
}

/* 底部支付标题样式 */
.footer-payment h4 {
  /* 设置颜色 */
  color: #333;
  /* 设置字体大小 */
  font-size: 18px;
  /* 设置底部间距 */
  margin-bottom: 15px;
  /* 设置字体粗细 */
  font-weight: bold;
}

/* 底部支付图片容器样式 */
.footer-payment-images {
  /* 设置弹性布局 */
  display: flex;
  /* 设置间距 */
  gap: 20px;
  /* 设置对齐方式 */
  align-items: center;
  justify-content: center;
  /* 设置底部间距 */
  margin-bottom: 15px;
}

/* 底部支付图片样式 */
.footer-payment-img {
  /* 设置宽度 */
  width: 120px;
  /* 设置高度 */
  height: 120px;
  /* 确保图片保持比例 */
  object-fit: contain;
  /* 设置边框 */
  border: 1px solid #e0e0e0;
  /* 设置圆角 */
  border-radius: 6px;
  /* 设置背景颜色 */
  background-color: white;
}

/* 底部支持文字样式 */
.footer-payment p {
  /* 设置颜色 */
  color: #666;
  /* 设置字体大小 */
  font-size: 16px;
  /* 设置行高 */
  line-height: 1.6;
  /* 设置内边距 */
  padding: 0 10px;
}





/* 图片查看器样式 */
.image-viewer {
    /* 默认隐藏 */
    display: none;
    /* 定位方式-固定定位 */
    position: fixed;
    /* 位置-顶部 */
    top: 0;
    /* 位置-左侧 */
    left: 0;
    /* 宽度100% */
    width: 100%;
    /* 高度100% */
    height: 100%;
    /* 背景颜色-半透明黑色 */
    background-color: rgba(0, 0, 0, 0.9);
    /* 层级 */
    z-index: 1000;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 溢出处理 */
    overflow: auto;
    padding: 20px 0;
}

/* 查看器内容样式 */
.viewer-content {
    /* 定位方式-相对定位 */
    position: relative;
    /* 最大宽度1200px */
    max-width: 1200px;
    /* 最大高度90vh */
    max-height: 90vh;
    /* 背景颜色-白色 */
    background-color: white;
    /* 圆角 */
    border-radius: 12px;
    /* 阴影效果 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    /* 内边距 */
    padding: 20px;
    /* 文本颜色-黑色 */
    color: #333;
    /* 最小高度 */
    min-height: 400px;
    /* 溢出处理 */
    overflow-y: auto;
}

/* 关闭按钮样式 */
.close-btn {
    /* 定位方式-绝对定位 */
    position: absolute;
    /* 位置-顶部-30px */
    top: 0;
    /* 位置-右侧0 */
    right: 0;
    /* 背景-无 */
    background:none;
    /* 边框-无 */
    border: none;
    /* 文本颜色-白色 */
    color: rgb(0, 0, 0);
    /* 字体大小 */
    font-size: 32px;
    /* 鼠标指针 */
    cursor: pointer;
    /* 内边距-无 */
    padding: 0;
    /* 宽度 */
    width: 32px;
    /* 高度 */
    height: 32px;
    /* 行高 */
    line-height: 1;
    /* 颜色过渡动画 */
    transition: color 0.3s ease;
}

/* 关闭按钮悬停样式 */
.close-btn:hover {
    /* 悬停时颜色变化 */
    color: #f95f67;
}

/* 人物标题区域样式 */
.person-header {
    /* 文本居中 */
    text-align: center;
    /* 底部间距 */
    margin-bottom: 20px;
    /* 边框底部 */
    border-bottom: 2px solid #000000;
    /* 内边距底部 */
    padding-bottom: 15px;
}

/* 人物标题样式 */
.person-title {
    /* 字体大小 */
    font-size: 24px;
    /* 字体颜色 */
    color: #333;
    /* 字体粗细 */
    font-weight: bold;
    /* 外边距 */
    margin: 0;
}

/* 人物内容布局样式 */
.person-content {
    /* 显示方式-弹性盒子 */
    display: flex;
    /* 间距 */
    gap: 30px;
    /* 响应式换行 */
    flex-wrap: wrap;
    /* 对齐内容 */
    justify-content: space-between;
}

/* 左侧图片容器样式 */
.task-image-container {
    /* 弹性子项不收缩 */
    flex-shrink: 0;
    /* 最大宽度 */
    max-width: 45%;
    /* 最小宽度 */
    min-width: 300px;
}

/* 图片容器样式 */
.image-container {
    /* 显示方式-弹性盒子 */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 最大高度500px */
    max-height: 500px;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 背景颜色 */
    background-color: #f5f5f5;
    /* 圆角 */
    border-radius: 8px;
    /* 内边距 */
    padding: 10px;
}

/* 图片容器中的图片样式 */
.image-container img {
    /* 最大宽度100% */
    max-width: 100%;
    /* 最大高度480px */
    max-height: 480px;
    /* 图片适应方式-包含 */
    object-fit: contain;
    /* 圆角 */
    border-radius: 4px;
}

/* 查看器控制区域样式 */
.viewer-controls {
    /* 上边距20px */
    margin-top: 20px;
    /* 显示方式-弹性盒子 */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 间距-10px */
    gap: 10px;
    /* 背景颜色-浅灰色 */
    background-color: #f0f0f0;
    /* 内边距-10px */
    padding: 10px;
    /* 圆角 */
    border-radius: 8px;
}

/* 控制按钮基础样式 */
.control-btn {
    /* 内边距-上下10px，左右20px */
    padding: 10px 20px;
    /* 边框-无 */
    border: none;
    /* 圆角-5px */
    border-radius: 5px;
    /* 字体大小-16px */
    font-size: 16px;
    /* 鼠标指针-手型 */
    cursor: pointer;
    /* 字体粗细-粗体 */
    font-weight: bold;
    /* 过渡动画-所有属性0.3秒 */
    transition: all 0.3s ease;
}

/* 下载原图按钮样式 */
#download-original {
    /* 背景颜色 */
    background-color: #2196F3;
    /* 文本颜色 */
    color: white;
}

/* 下载原图按钮悬停样式 */
#download-original:hover {
    /* 悬停时背景颜色变化 */
    background-color: #1976D2;
}

/* 右侧任务详情区域样式 */
.task-details {
    /* 弹性增长 */
    flex-grow: 1;
    /* 最小宽度 */
    min-width: 300px;
    /* 最大宽度 */
    max-width: 50%;
}

/* 任务介绍部分样式 */
.task-description {
    /* 背景颜色 */
    background-color: #f9f9f9;
    /* 圆角 */
    border-radius: 8px;
    /* 内边距 */
    padding: 20px;
    /* 底部间距 */
    margin-bottom: 25px;
    /* 边框 */
    border: 1px solid #e0e0e0;
}

/* 任务介绍标题样式 */
.task-description h3 {
    /* 字体大小 */
    font-size: 18px;
    /* 字体颜色 */
    color: #333;
    /* 底部间距 */
    margin-bottom: 15px;
    /* 字体粗细 */
    font-weight: bold;
    /* 边框底部 */
    border-bottom: 2px solid #e0e0e0;
    /* 内边距底部 */
    padding-bottom: 8px;
}

/* 任务介绍文本样式 */
.task-description p {
    /* 字体大小 */
    font-size: 16px;
    /* 行高 */
    line-height: 1.6;
    /* 字体颜色 */
    color: #555;
    /* 文本对齐 */
    text-align: justify;
    /* 段落间距 */
    margin-bottom: 10px;
}

/* GIF展示区域样式 */
.task-gifs {
    /* 背景颜色 */
    background-color: #f9f9f9;
    /* 圆角 */
    border-radius: 8px;
    /* 内边距 */
    padding: 20px;
    /* 底部间距 */
    margin-bottom: 25px;
    /* 边框 */
    border: 1px solid #e0e0e0;
}

/* GIF区域标题样式 */
.task-gifs h3 {
    /* 字体大小 */
    font-size: 18px;
    /* 字体颜色 */
    color: #333;
    /* 底部间距 */
    margin-bottom: 15px;
    /* 字体粗细 */
    font-weight: bold;
    /* 边框底部 */
    border-bottom: 2px solid #e0e0e0;
    /* 内边距底部 */
    padding-bottom: 8px;
}

/* GIF容器样式 */
.gif-container {
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    min-height: 100px;
}

.gif-wrapper {
    margin-bottom: 15px;
    transition: transform 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
}

.gif-wrapper:hover {
    transform: scale(1.02);
}

/* GIF图片样式 */
.gif-container img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
    transition: opacity 0.3s ease;
}

/* GIF图片悬停样式 */
.gif-container img:hover {
    opacity: 0.9;
}

.video-wrapper {
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}

.video-wrapper:hover {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* 加载中消息样式 */
.loading-message {
    color: #888;
    text-align: center;
    padding: 20px 0;
    font-style: italic;
}

/* 无数据提示样式 */
.no-data {
    color: #999;
    font-size: 14px;
    text-align: center;
    padding: 20px;
    font-style: italic;
    grid-column: 1 / -1;
}

/* 无内容样式 */
.no-content {
    color: #aaa;
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}