/* 列表页-慈善项目列表 start */

.list-project-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 45px;
}

.list-project-list .project-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width:100%;
    display: flex;
    flex-direction: row; /* 横向排列 */
    overflow: hidden;
}

.list-project-list .item-img {
    box-sizing: border-box; /* 包括内边距在内的总宽度 */
    display: flex; /* 使其成为一个 flex 容器 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    height: 220px; /* 确保容器有高度，以便居中 */
    width: 300px;
}

.list-project-list .item-img img {
    width: 100%;
    height: 100%; /* 自适应高度 */
    object-fit: cover;
    display: block; /* 去掉图片底部的间隙 */
}

.list-project-list .item-content {
    padding: 15px;
    flex: 2; /* 内容占更多空间 */
    display: flex;
    flex-direction: column; /* 垂直排列内容 */
    position: relative;
}

.list-project-list .item-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    padding-right: 100px;
}


.list-project-list .info-item {
    display: flex;
    margin-top: 16px;
    margin-bottom: 10px;
    align-items: center;
}


.list-project-list .info-title {
    font-weight: bold;
    color: #666;
    font-size: 14px;
}

.list-project-list .info-content {
    display: inline-block;
    font-size: 24px;
    color: #FF0000;
}
.list-project-list .info-content2 {
    display: inline-block;
    font-size: 24px;
    color: #808080;
}
.list-project-list .currency {
    margin-left: 5px;
    color: #f60; /* 例如，设置为橙色 */
}


.list-project-list .people-count {
    margin-left: 5px;
    color: #808080; /* 例如，设置为绿色 */
}

.list-project-list .item-description {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-project-list .donate-button {
    position: absolute; /* 绝对定位 */
    bottom: 20px; /* 距离顶部10px */
    right: 20px; /* 距离右侧10px */
    background-color: #D43030; /* 设置背景颜色 */
    color: #fff; /* 设置字体颜色为白色 */
    padding: 10px 22px; /* 设置内边距 */
    border: none; /* 去掉边框 */
    border-radius: 5px; /* 设置圆角 */
    text-decoration: none; /* 去掉下划线 */
    font-size: 14px;
}
/* 新增的样式，用于已结束状态 */
.list-project-list .donate-button.disabled {
    background-color: #ccc; /* 灰色背景 */
    color: #666; /* 灰色字体 */
    cursor: not-allowed; /* 鼠标光标为禁用状态 */
    pointer-events: none; /* 禁止点击 */
}
.list-project-list .donate-button:hover {
    background-color: #a52c2c; /* 鼠标悬停时的背景颜色变化 */
    color: #fff;
}


@media (max-width: 980px) {
    .list-project-list .project-item {
        width: 100%; /* 在小屏幕上堆叠 */
        flex-direction: column; /* 切换为垂直排列 */
    }

    .list-project-list .item-img {
        width: 100%; /* 图片全宽 */
    }

    .list-project-list .item-content {
        padding: 10px; /* 调整内边距 */
    }
}
.list-project-list .project-item3 {
    border-radius: 10px;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
    background-color: white;
    padding: 0;
    overflow: hidden;
    text-align: center;
    flex: 0 0 calc(33% - 20px); /* 一行3列,每列占33.33% */
}

/* 响应式布局 */
@media screen and (max-width: 1200px) {
    .list-project-list .project-item3 {
        flex: 0 0 calc(50% - 10px); /* 中等屏幕时一行2列 */
    }
    .list-project-list .project-logo img {
        height: 200px;
    }
}

@media screen and (max-width: 980px) {
    .list-project-list .project-item3 {
        flex: 0 0 100%; /* 小屏幕时占满整行 */
        margin: 10px 0; /* 调整垂直间距 */
    }

    .list-project-list .project-logo img {
        height: 180px;
    }
}
/* 首页慈善项目列表2 start */


.list-project-list .project-item2 {
    border-radius: 10px;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
    background-color: white;
    padding: 0;
    margin: 20px;
    overflow: hidden;
    text-align: center;
}

.list-project-list .project-logo img {
    width: 100%;
    height: 240px;
    object-fit: contain;
}

.list-project-list .item-content2 {
    padding: 15px;
}

.list-project-list .progress-bar-container {
    width: 100%;
    height: 24px;
    position: relative;
    padding-top: 20px;
}

.list-project-list .progress-bar {
    background-color: #e0e0e0;
    width: 100%;
    height: 8px; /* 进度条的高度 */
    position: relative;
    border-radius: 10px;
}

.list-project-list .progress {
    background-color: #ff3b30; /* 红色的进度条 */
    height: 100%;
    border-radius: 10px;
}

.list-project-list .progress-bar-text {
    position: absolute;
    top: -30px; /* 调整文字的位置在进度条上方 */
    transform: translateX(-50%);
    text-align: center;
    background-color: #ff3b30;
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
}
/* 使用伪元素创建箭头 */
.list-project-list .progress-bar-text::after {
    content: '';
    position: absolute;
    top: 100%; /* 箭头位置在文本下方 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中 */
    border-width: 6px; /* 箭头大小 */
    border-style: solid; /* ��头样式 */
    border-color: #ff3b30 transparent transparent transparent; /* 上边框为红色，其他边框透明 */
}

.list-project-list .progress-arrow {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ff3b30;
    position: absolute;
    top: 100%; /* 箭头位置调整 */
    left: 50%;
    transform: translateX(-50%);
}

.list-project-list .percentage {
    font-weight: bold;
}


.list-project-list .item-info2 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.list-project-list .info-item2 {
    display: flex;
    align-items: center;
}

.list-project-list .info-title {
    font-size: 14px;
    color: #888;
}

.list-project-list .info-content {
    font-size: 16px;
    color: #333;
}

.list-project-list .item-title2 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    text-align: left;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
}

.list-project-list .project-duration {
    font-size: 14px;
    color: #888;
    margin-bottom: 20px;
    display: flex;
    align-items: center; /* 使内容垂直居中 */
    justify-content: space-between;
}

.list-project-list .donate-button2 {
    display: block;
    background-color: #DB2525;
    color: white;
    text-decoration: none;
    padding: 10px 0;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
}

.list-project-list .donate-button2:hover {
    background-color: #c9302c;
    transform: scale(1.05);
}

/* 禁用状态的捐款按钮样式 */
.list-project-list .donate-button2.disabled {
    background-color: #ccc;
    color: #999;
    cursor: pointer;
}

.list-project-list .donate-button2.disabled:hover {
    background-color: #bbb;
    transform: scale(1.02);
}

.list-project-list .item-content2 a:hover{
    color: #fff;
}



/* 列表页慈善项目列表 end */

/* 列表页-文字列表 不含图片 start */

.inner-newslist {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    align-items: center;
    /* background-color: #fff; */
    /* padding: 15px; */
    /* margin-bottom: 10px; */
    text-decoration: none;
}

.inner-newslist .news-item {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
    width: 100%;
}

.inner-newslist .list-title {
    font-size: 16px;
    font-weight: normal;
    color: #333;
    line-height: 1.6;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1; /* 让标题占据剩余空间 */
    margin-right: 20px; /* 与日期保持间距 */
}

.inner-newslist .list-date {
    font-size: 14px;
    color: #999;
    white-space: nowrap; /* 防止日期换行 */
    flex-shrink: 0; /* 防止日期被压缩 */
}

.inner-newslist a:hover .list-title
{
    padding-left: 10px;
}
.inner-newslist a:hover .list-title,
.inner-newslist a:hover .list-date{
    color:#D43030;
}

@media screen and (max-width: 980px) {
    .inner-newslist .list-title,.inner-newslist .list-date{
        font-size: 14px;
    }
    
}

/* 有图的列表 */

.inner-newslist .list-img-news-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    width: 100%;
}

.inner-newslist .list-img-news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 图片容器样式 */
.list-img-news-item .news-img {
    flex: 0 0 300px;
    margin-right: 25px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
}

.list-img-news-item .news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.list-img-news-item:hover .news-img img {
    transform: scale(1.05);
}

/* 内容区域样式 */
.list-img-news-item .news-content {
    flex: 1;
    padding: 10px 0;
    align-self: flex-start;
    min-height: 200px; /* 确保内容区域最小高度与图片一致 */
    display: flex;
    flex-direction: column;
}

.list-img-news-item .list-title2 {
    font-size: 18px;
    font-weight: normal;
    color: #333;
    line-height: 1.6;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.list-img-news-item:hover .list-title2 {
    color: #D43030;
}

.list-img-news-item .list-summary {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; /* 让简介区域自动填充剩余空间 */
}

/* 日期样式 */
.list-img-news-item .list-news-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 添加垂直居中 */
    margin-left: 25px;
    padding: 15px 25px;
    align-self: stretch; /* 确保日期区域高度与父容器一致 */
}

.list-img-news-item .news-month-day {
    font-size: 22px;
    color: #D43030;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.list-img-news-item .news-year {
    font-size: 15px;
    color: #999;
    line-height: 1.2;
    opacity: 0.9;
}

/* 移动端适配 */
@media screen and (max-width: 980px) {
    .inner-newslist .list-img-news-item {
        flex-direction: column;
        padding: 0;
        position: relative; /* 为绝对定位的日期做准备 */
    }

    .list-img-news-item .news-img {
        width: 100%;
        flex: none;
        margin-right: 0;
        margin-bottom: 15px;
        height: 180px;
    }

    .list-img-news-item .news-content {
        min-height: auto; /* 移动端不需要最小高度限制 */
        padding: 15px;
    }

    .list-img-news-item .list-title2 {
        font-size: 16px;
        margin-bottom: 10px;
        -webkit-line-clamp: 2;
    }

    .list-img-news-item .list-summary {
        font-size: 13px;
        line-height: 1.6;
        -webkit-line-clamp: 4;
        margin-bottom: 10px;
    }

    .list-img-news-item .list-news-date {
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(212, 48, 48, 0.8);
        padding: 6px 10px;
        border-radius: 4px;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 13px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        z-index: 10;
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.2);
        gap: 4px;
        margin-left: 0;
        border-left: none;
    }

    .list-img-news-item .news-month-day {
        font-size: 14px;
        margin-bottom: 0;
        margin-right: 0;
        color: #fff;
    }

    .list-img-news-item .news-year {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.9);
    }
}

/* 专题列表，一行两个 */
/* 卡片列表 */
.card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 0;
}

/* 单个卡片样式 */
.card-item {
    flex: 0 0 calc(50% - 10px);
    display: flex;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 图片容器 */
.card-image {
    flex: 0 0 50%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-item:hover .card-image img {
    transform: scale(1.05);
}

/* 内容区域 */
.card-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 12px;
    font-weight: normal;
    line-height: 1.4;
}

.card-description {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.card-link {
    display: inline-block;
    padding: 8px 20px;
    background: #D43030;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    align-self: flex-start;
    transition: background-color 0.3s ease;
}

.card-link:hover {
    background: #b92b2b;
    color: #fff;
}

/* 响应式布局 */
@media screen and (max-width: 980px) {
    .card-list {
        padding: 15px;
        gap: 15px;
    }

    .card-item {
        flex: 0 0 100%;
    }

    .card-content {
        padding: 15px;
    }

    .card-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .card-description {
        font-size: 13px;
        -webkit-line-clamp: 2;
        margin-bottom: 12px;
    }

    .card-link {
        padding: 6px 15px;
        font-size: 13px;
    }
}


/* 列表页-文字列表 不含图片 start */

/* 文章页样式 start*/
.right-content .pageArticleTitle {
    margin-bottom: 20px;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.right-content .pageArticleTitle h3 {
    line-height: 30px;
    color: #333;
}

.right-content .articleAuthor {
    border-bottom: #e4e8e6 1px solid;
    padding: 15px 0;
    overflow: hidden;
}

.right-content .articleAuthor .articleAuthor span {
    display: inline-block;
    padding: 0 15px;
    line-height: 24px;
}

.right-content .gp-article {
    line-height: 28px;
}

.right-content .articleAuthor2 {
    border-top: #e4e8e6 1px solid;
    text-align: center;
}
.right-content .articleAuthor2 span {
    display: inline-block;
    padding: 0 15px;
    line-height: 24px;
}

@media screen and (max-width: 766px)
{
    .gp-article img {
        width: auto !important;
        height: auto !important;
        max-width: 100%;
    }
}
/* 文章页样式 end*/

/* 慈善项目详情页面 start */

.csxm-container {
    border-radius: 5px;
    border: 1px solid #EFEFEF;
}
.csxm-container .csxm-info{
    margin: 25px;
}
.csxm-container .csxm-line{
    height: 1px;
    background-color:  #EFEFEF;
    width: 100%;
    margin-bottom: 30px;
}
.csxm-info .project-item {
   
    background-color: #fff;
    border-radius: 8px;
    width:100%;
    display: flex;
    flex-direction: row; /* 横向排列 */
    overflow: hidden;
}

.csxm-info .item-img {
    box-sizing: border-box; /* 包括内边距在内的总宽度 */
    display: flex; /* 使其成为一个 flex 容器 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    height: 290px; /* 确保容器有高度，以便居中 */
    width: 480px;
    position: relative;
}

.csxm-info .item-img img {
    width: 100%;
    height: 290px; /* 自适应高度 */
    object-fit: contain;
    display: block; /* 去掉图片底部的间隙 */
}

.csxm-info .item-content {
    padding-left: 30px;
    flex: 2; /* 内容占更多空间 */
    display: flex;
    flex-direction: column; /* 垂直排列内容 */
    position: relative;
}

.csxm-info .item-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    padding-right: 100px;
}


.csxm-info .info-item {
    display: flex;
    margin-top: 16px;
    margin-bottom: 10px;
    align-items: center;
}

.csxm-info .info-title {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
}

.csxm-info .info-content {
    display: inline-block;
    font-size: 24px;
    color: #FF0000;
}
.csxm-info .info-content2 {
    display: inline-block;
    font-size: 24px;
    color: #808080;
}
.csxm-info .currency {
    margin-left: 5px;
    color: #f60; /* 例如，设置为橙色 */
}


.csxm-info .people-count {
    margin-left: 5px;
    color: #808080; /* 例如，设置为绿色 */
}

.csxm-info .donate-button {
    position: absolute; /* 绝对定位 */
    bottom: 10px; /* 距离顶部10px */
    left: 30px; /* 距离右侧10px */
    background-color: #D43030; /* 设置背景颜色 */
    color: #fff; /* 设置字体颜色为白色 */
    padding: 10px 22px; /* 设置内边距 */
    border: none; /* 去掉边框 */
    border-radius: 5px; /* 设置圆角 */
    text-decoration: none; /* 去掉下划线 */
    font-size: 14px;
}
/* 新增��样式，用于已结束状态 */
.csxm-info .donate-button.disabled {
    background-color: #ccc; /* 灰色背景 */
    color: #666; /* 灰色字体 */
    cursor: not-allowed; /* 鼠标光标为禁用状态 */
    pointer-events: none; /* 禁止点击 */
}
.csxm-info .donate-button:hover {
    background-color: #a52c2c; /* 鼠标悬停时的背景颜色变化 */
    color: #fff;
}

/* 项目详情页捐款按钮禁用状态样式 */
#donateButton.disabled {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

#donateButton.disabled:hover {
    background-color: #ccc !important;
    color: #666 !important;
}

.csxm-container .tab-navigation {
    padding-left: 10px; /* 底部间距 */
}

.csxm-container .tab-navigation .tab-list {
    border-bottom: 1px solid #EFEFEF;
}
.csxm-container .tab-content{
    padding: 20px;
}

@media screen and (max-width: 980px) {
    .csxm-container .tab-navigation {
        padding-left: 0px; /* 底部间距 */
    }
    .csxm-container .tab-navigation .tab-list {
        border-bottom: none;
    }
    .csxm-container{
        border: none;
    }
    .csxm-info .project-item {
   
        width: 100%;
        flex-direction: column;
    }
    .csxm-info .item-img{
        width: auto;
        height: 200px;
    }

    .csxm-container .csxm-info{
        margin: 0;
    }
    .csxm-info .item-content{
        padding-top: 20px;
        padding-left: 0;
    }
    .csxm-info .donate-button{
        left: auto;
        right: 20px;
    }

    .csxm-container .tab-content{
        padding: 10px;
        border: 1px solid #EFEFEF;
    }
}

/* 项目进展 */

.csxm-container .timeline {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 30px; /* 调整整体的左边距 */
}

.csxm-container .timeline::before {
    content: '';
    position: absolute;
    width: 2px;
    background-color: #D6D6D6;
    top: 0;
    bottom: 0;
    left: -26px; /* 确保线条与红点对齐 */
}
.csxm-container .event {
    display: flex;
    margin-bottom: 30px;
    position: relative;
}

.csxm-container .event-icon {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: -30px;
    top: 22px;
}

.csxm-container .event-content {
    background-color: #FAFAFA;
    padding: 15px;
    border-radius: 5px;
    width: 100%;
}

.csxm-container .event h3 {
    font-size: 18px;
    margin: 0;
    font-weight: bold;
    color: #333;
}

.csxm-container .event p {
    font-size: 14px;
    margin: 10px 0;
    color: #666;
    line-height: 1.6; /* 设置行高 */
}

.csxm-container .event-image {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    flex-wrap: wrap; /* 允许自动换行 */
}

.csxm-container .event-image img {
    width: 180px;
    object-fit: cover;
    border-radius: 5px;
}

.csxm-container .event-time {
    font-size: 12px;
    color: #999;
    text-align: left;
    display: block;
}

@media screen and (max-width: 980px) {
    .csxm-container .event-image img {
        width: calc(50% - 10px);
    }
}

/* 捐赠播报效果 */

.scroll-container2 {
    width: 85%;
    height: 140px; /* 控制可见区域的高度 */
    overflow: hidden;
    border-radius: 20px;
    color: white;
    position: absolute;
    top: 55px;
    left: 0;
    display: none;
}

.scroll-container2 .scroll-content2 {
    position: relative; /* 添加此属性以便于控制滚动 */
    transition: transform 0.5s; /* 添加过渡效果 */
}
.scroll-container2 .scroll-item2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    margin-bottom: 10px;
    font-size: 14px;
}

.scroll-container2 .avatar2 {
    width: 30px;
    height: 30px;
    background-color: #f2f2f2;
    border-radius: 50%;
    margin-right: 10px;
    overflow: hidden; /* 确保超出部分被裁剪 */
}
.scroll-container2 .avatar2 img {
    width: 100%; /* 设置宽度为100%以适应容器 */
    height: 100%; /* 设置高度为100%以适应容器 */
    object-fit: cover; /* 使图片填充整个容器并保持比例 */
}
.scroll-container2 .info2 {
    flex: 1;
    margin-right: auto; /* 将 info2 推���左边 */
}

.scroll-container2 .donor-name2 {
    font-weight: bold;
    margin-right: 5px;
}
.scroll-container2 .donation-amount2 {
    color: #ffcc00; /* 可以根据需要选择颜色 */
    font-weight: bold; /* 如果需要可以加粗 */
}
.scroll-container2  .time2 {
    white-space: nowrap;
    padding-right: 5px;
}

@media screen and (max-width: 980px) {
    .scroll-container2{
        display: block;
    }
}

/* 慈善项目详情页面 end */


/* 捐赠方单独页面 start */
/* 容器样式 */
.donation-methods-container {
    width: 100%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    color: #333;
  }
  
  /* 每个捐赠方式的分区 */
  .donation-methods-container .donation-method-section {
    margin-bottom: 20px;
    border: 1px solid #EFEFEF;
    border-radius: 8px;
    background-color: #FFFFFF;
    overflow: hidden;
  }
  
  /* 分标题样式 */
  .donation-methods-container .donation-method-header {
    font-size: 20px;
    font-weight: bold;
    background-color: #FAFAFA;
    border-bottom: 1px solid #EFEFEF;
    border-radius: 8px 8px 0px 0px;
    padding: 20px;
  }
  
  /* 每个条目样式 */
  .donation-methods-container .donation-method-entry {
    padding: 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EFEFEF;
  }
  
  /* 条目中的标签部分 */
  .donation-methods-container  .donation-method-label {
    font-size: 14px;
    width: 200px;
    flex-shrink: 0;
  }
  
  /* 条目中的值部分 */
  .donation-methods-container  .donation-method-value {
    font-size: 14px;
  }
  .donation-methods-container  .donation-method-linkbutton{
        bottom: 10px;
        left: 30px;
        background-color: #D43030;
        color: #fff;
        padding: 10px 22px;
        border: none;
        border-radius: 5px;
        text-decoration: none;
        font-size: 14px;
  }
  /* 链接样式 */
  .donation-methods-container  .donation-method-link,
  .donation-methods-container  .donation-method-download-link {
    color: #D43030;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    padding-left: 20px;
  }
  
  .donation-methods-container  .donation-method-link:hover,
  .donation-methods-container  .donation-method-download-link:hover {
    text-decoration: underline;
  }
  
  /* 二维码占位符样式 */
  .donation-methods-container  .donation-method-qr-placeholder {
    width: 100px;
    height: 100px;
    background-color: #F5F5F5;
    border: 1px solid #EFEFEF;
    display: inline-block;
  }
  
  .donation-methods-container  .donation-method-qr-placeholder .qrcode-img{
    width: 100px;
    height: 100px;
    background-color: #F5F5F5;
    border: 1px solid #EFEFEF;
    display: inline-block;
  } 

  /* 去掉最后一项的边框 */
  .donation-methods-container .donation-method-section:last-child .donation-method-entry {
    border-bottom: none;
  }
  
@media screen and (max-width: 980px) {
    .donation-methods-container .donation-method-header {
        font-size: 16px;
        padding: 10px;
    }
    .custom-donation-entry {
        flex-direction: column; /* 纵向排列 */
        align-items: center; /* 中心对齐 */
    }
    .hide-on-mobile {
        display: none;
      }
    /* 二维码和文字展示样式 */
    .donation-methods-container .qr-entry {
        display: flex;
        flex-direction: column; /* 让内容垂直排列 */
        align-items: center; /* 水平居中 */
    }
    .donation-methods-container .qr-entry .donation-method-qr-placeholder {
        margin-bottom: 10px; /* QR码和文字之间的间距 */
      }
    .donation-methods-container .donation-method-entry .donation-method-label {
        width: 160px;
    }
    .vertical-entry {
        flex-direction: column;     /* 纵向排列 */
        gap: 20px;                 /* 每个元素之间的间距 */
    }
    
    /* 确保span靠左 */
    .vertical-entry .donation-method-label,
    .vertical-entry .donation-method-value {
        align-self: flex-start;
    }
    
    /* 让a元素居中对齐 */
    .vertical-entry .donation-method-download-link {
        display: block;
        align-self: center;
        border-radius: 8px;
        border-top: 1px solid #EFEFEF;
        width: 100%;
        text-align: center;
        height: 30px;
        padding-top: 15px;
    }
}
/* 捐赠方式单独页面 end */


/* 票据查询单页页面 start */
.application-container {
    width: 100%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    color: #333;
}

.application-container .application-header {
    margin-bottom: 20px;
}
.application-container .application-header .header-title {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #D43030; /* 使用更明确的 background-color */
    border-radius: 8px 8px 0 0; /* 修正语法错误，正确的四角顺序 */
    height: 54px;
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    text-align: center; /* 确保文本始终居中 */
}

.application-container .application-header .header-description {
    font-size: 14px;
    color: #D43030;
    line-height: 1.6;
}

.application-container .application-methods {
    margin-bottom: 20px;
}

.application-container .application-methods .methods-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.application-container .application-methods .method-item {
    margin-bottom: 15px;
    border-top: 1px solid #ddd;
    padding-top: 15px
}

.application-container .application-methods .method-item .method-description {
    font-size: 14px;
    line-height: 1.5;
}

.application-container .application-methods .method-item .qr-code-section {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.application-container .application-methods .method-item .qr-code-section .qr-code-text {
    font-size: 14px;
    margin: 0 10px;
}

.application-container .application-methods .method-item .qr-code-section .qr-code-image img {
    width: 100px;
    height: 100px;
    border-radius: 4px;
}

.application-container .application-methods .method-item .method-link {
    margin-top: 10px; /* 增加与描述的间距 */
}

.application-container .application-methods .method-item .query-link {
    font-size: 14px;
    color: #FF8D1A;
    text-decoration: none;
    cursor: pointer;
}

.application-container .application-methods .method-item .query-link:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* 容器样式 */
.application-container .application-form {
    margin: 0 auto; /* 居中显示 */
}

/* 表单项样式 */
.application-container .application-form .form-item {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

/* 标签样式 */
.application-container .application-form .form-label {
    font-size: 14px;
    color: #333;
    width: 100px;
    position: relative; /* 确保伪元素定位相对于 label */
    padding-left: 15px;
}

.application-container .application-form .form-label::before {
    content: "";
    position: absolute;
    width: 4px; /* 红色竖线的宽度 */
    height: 20px; /* 竖线与标文字高度一致 */
    background-color: #D43030; /* 红色 */
    border-radius: 6px; /* 可选：增加一点圆角 */
    left: 0;
}

/* 必填标识样式 */
.application-container .application-form .form-label-icon {
    color: #D43030;
}

/* 输入区域样式 */
.application-container .application-form .form-input {
    flex-grow: 1;
}

.application-container .application-form .form-input .input-text,
.application-container .application-form .form-input .dropdown-select {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s;
    max-width: 400px; /* 设置最大宽度 */
}

.application-container .application-form .form-input .input-text:focus,
.application-container .application-form .form-input .dropdown-select:focus {
    border-color: #D43030;
}

/* 按钮样式 */
.application-container .application-form .form-item .submit-button {
    padding: 10px 24px;
    background-color: #D43030;
    color: #fff;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 115px;
    text-align: center;
    transition: background-color 0.3s;
}

.application-container .application-form .form-item .submit-button:hover {
    background-color: #B92B2B;
}

/* 错误提示样式（如果需要添加错误提示） */
.application-container .application-form .form-error {
    font-size: 12px;
    color: #D43030;
    margin-top: 5px;
}

.application-container .application-form .select-result .resulttitle {
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 20px;
   
}


/* 查询结果 */
.application-container .application-form .select-result .result-donation-list {
    width: 100%; /* 确保列宽度填满父容器 */
    border-collapse: collapse; /* 移除表格内边距，边框合并 */
    border: 1px solid #F5F5F5; /* 表格外部边框 */
    background-color: #fff; /* 设置表格的背景颜色 */
}

/* 移动端样式 */
@media (max-width: 980px) {
    .application-container .application-form .select-result .result-donation-list {
        border: none; /* 移除移动端的外部边框 */
    }
}

/* 每一项的基样式 */
.application-container .application-form .select-result .result-donation-item {
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 在水平方向上分布子项 */
    padding: 10px; /* 每一项的内边距 */
    border-bottom: 1px solid #EFEFEF; /* 行之间的下边框 */
    transition: background-color 0.3s ease; /* 加平滑的背景色过渡效果 */
}

/* 行悬浮时的背景色变化 */
.application-container .application-form .select-result .result-donation-items .result-donation-item:hover {
    background-color: #f9f9f9; /* 悬浮时背景色变浅 */
}

/* 标题行的样式 */
.application-container .application-form .select-result .result-head {
    font-weight: bold;
    background-color: #EFEFEF;
    text-align: left;
    font-size: 16px;
    position: relative;
}

/* 每一的单个子项的样式 */
.application-container .application-form .select-result .result-donation-item > div {
    font-size: 14px; /* 设置每个项的字体大小 */
    padding: 5px; /* 添加内边距，确保内容与边框有间距 */
    text-align: center; /* 默认情况下，内容居中对齐 */
    word-wrap: break-word; /* 确保长单词会换行显示 */
    overflow: hidden; /* 隐藏超出的部分 */
    text-overflow: ellipsis; /* 使用省略号表示溢出的内容 */
    white-space: nowrap; /* 防止内容换行 */
}

/* 各列的宽度设置 */
.application-container .application-form .select-result .result-donation-id {
    flex: 2; /* 捐赠流水号列占2份宽度 */
    text-align: left; /* 流水号左对齐 */
    max-width: 200px;  /* 设置最大宽度 */
    overflow: hidden;   /* 超过的部分隐藏 */
    text-overflow: ellipsis;  /* 溢出的文本略号显示 */
    white-space: nowrap;  /* 防止文本换行 */
}

.application-container .application-form .select-result .result-donation-time {
    flex: 2; /* 捐赠时间列占2份宽度 */
}

.application-container .application-form .select-result .result-donation-project {
    flex: 3; /* 捐赠项目列占3份宽度 */
}

.application-container .application-form .select-result .result-donation-donor {
    flex: 2; /* 捐赠人列占2份宽度 */
}

.application-container .application-form .select-result .result-donation-amount {
    flex: 2; /* 捐赠金额列占2份宽度 */
    text-align: right; /* 金额右对齐 */
}

.application-container .application-form .select-result .result-donation-source {
    flex: 1; /* 数据来源列占1份宽度 */
    text-align: right; /* 数据来源右对齐 */
}

.application-container .application-form .select-result .result-donation-method ,
.application-container .application-form .select-result .result-donation-certificate {
    flex: 1; /* 支付方式列占1份宽度 */
    text-align: center; /* 支付方式居中对齐 */
}
.application-container .application-form .select-result .result-donation-invoice-status {
    flex: 1.5; /* 支付方式列占1份宽度 */
    text-align: center; /* 支付方式居中对齐 */
}

/* 置链接的样式 */
.application-container .application-form .select-result .result-donation-items .result-donation-certificate a{
    display: inline-block; /* 保持行内块级元素样式 */
    text-decoration: underline;
    color: #007BFF; /* 设置文字颜色为蓝色 */
    cursor: pointer; /* 设置鼠标悬停时显示为点击势 */
}

/* 发票状态超链接的基本样式 */
.application-container .application-form .select-result .result-donation-invoice-status a {
    text-decoration: underline; /* 去掉下划线 */
    border-radius: 3px; /* 圆角边框 */
    font-size: 14px; /* 字体大小 */
    display: inline-block; /* 使其为块级元素 */
}

/* 发票状态为"申请开票"的样式 */
.application-container .application-form .select-result .result-donation-invoice-status .applying {
    color: #007bff; /* 蓝色文字 */
}

/* 发票状态为"开票中"的样式 */
.application-container .application-form .select-result .result-donation-invoice-status .in-progress {
    color: #ffc107; /* 黄色文字 */
}

/* 发票状态为"已开票"的样式 */
.application-container .application-form .select-result .result-donation-invoice-status .issued {
    color: #28a745; /* 绿色文字 */
}

/* 发票状态为"被驳回"的样式 */
.application-container .application-form .select-result .result-donation-invoice-status .rejected {
    color: #dc3545; /* 红色文字 */
}

/* 支付方式图标的样式 */
.application-container .application-form .select-result .result-payment-icon {
    width: 20px; /* 图标宽度 */
    height: 20px; /* 图标高度 */
    vertical-align: middle; /* 图标与文字垂直居中对齐 */
    margin-left: 5px; /* 图标与文字之间的间距 */
}

/* 移动端样式 */
@media screen and (max-width: 980px) {

    .application-container .application-form .form-item .submit-button{
        margin-left:auto;
        width: 100%;
    }
    /* 隐藏标题行（移动端显示时） */
    .application-container .application-form .select-result .result-head {
        display: none; /* 隐藏标题行 */
    }

    /* 列表项布局调整 */
    .application-container .application-form .select-result .result-donation-items .result-donation-item {
        display: flex;
        flex-wrap: wrap; /* 允许内容换行 */
        justify-content: space-between; /* 让子项均匀分布 */
    }

    /* 单个子项样式调整 */
    .application-container .application-form .select-result .result-donation-items .result-donation-item > div {
        box-sizing: border-box; /* 确保内边距和边框不影响宽度 */
        padding: 5px; /* 每项增加内边距 */
    }
   /* 列的顺序调整 */
   .application-container .application-form .select-result .result-donation-id ,
   .application-container .application-form .select-result .resulttitle {
        display: none;
    }
    /* 各列的顺序调整 */
    .application-container .application-form .select-result .result-donation-amount {
        order: 2; /* 捐赠金额排在第一位 */
        flex-basis: 40%; /* 设置捐赠金额列宽度 */
        text-align: right !important;
        color: #DF0024;
        font-size: 16px !important;
    }

    .application-container .application-form .select-result .result-donation-project {
        order: 3; /* 捐赠项目排在第二位 */
        flex-basis: 60%; /* 设置捐赠项目列宽度 */
        text-align: left !important;
    }

    .application-container .application-form .select-result .result-donation-donor {
        order: 1; /* 捐赠人排在第三 */
        flex-basis: 60%; /* 设置捐赠人列宽度 */
        text-align: left !important;
    }

    .application-container .application-form .select-result .result-donation-source {
        order: 4; /* 数据来源排在第四位 */
        flex-basis: 40%; /* 设置数据来源列宽度 */
        text-align: right !important;
    }

    .application-container .application-form .select-result .result-donation-method {
        order: 6; /* 支付方式排在最后 */
        flex-basis: 40%; /* 设置支付方式列宽度 */
        text-align: right !important;
    }

    .application-container .application-form .select-result .result-donation-time {
        order: 5; /* 捐赠时间排在倒数第二位 */
        flex-basis: 60%; /* 设置捐赠时间列宽度 */
        text-align: left !important;
    }
    .application-container .application-form .select-result .result-donation-certificate {
        order: 7; /* 支付方式排在最后 */
        flex-basis: 40%; /* 设置支付方式列宽度 */
        text-align: left !important;
    }

    .application-container .application-form .select-result .result-donation-invoice-status {
        order: 8; /* 捐赠时间排在倒数第二位 */
        flex-basis: 60%; /* 设置捐赠时间列宽度 */
        text-align: right !important;
    }
}


/* 票据查询单页页面 end */

/* 视频列表样式 */
.video-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    padding: 20px 0;
}

/* 视频项样式 */
.video-item {
    flex: 0 0 calc(50% - 10px); /* 一行显示2个 */
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.video-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 视频缩图容器 */
.video-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.video-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.video-item:hover .video-image::before {
    opacity: 1;
}

.video-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-item:hover .video-image img {
    transform: scale(1.05);
}

/* 播放图标 */
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(212, 48, 48, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
}

.play-icon::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
}

.video-item:hover .play-icon::before {
    opacity: 1;
    transform: scale(1.1);
}

.play-icon i {
    color: #fff;
    font-size: 24px;
    margin-left: 4px; /* 稍微调整播放图标位置 */
}

.video-item:hover .play-icon {
    background: rgba(212, 48, 48, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

/* 视频内容 */
.video-content {
    padding: 15px;
}
.video-title {
    font-size: 16px;
    font-weight: normal;
    color: #333;
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px; /* 添加标题和日期之间的间距 */
}
.video-item:hover .video-title {
    color: #D43030;
}
.video-info {
    font-size: 13px;
    color: #999;
}

.video-info .time i {
    margin-right: 5px;
}

/* 响应式布局 */
@media screen and (max-width: 980px) {
    .video-item {
        flex: 0 0 100%;
    }
    
    .video-image {
        height: 180px;
    }
    
    .video-content {
        padding: 12px;
    }
    
    .video-title {
        font-size: 15px;
    }
    
    .video-info {
        font-size: 12px;
    }
}

/* 大屏幕时显示3个 */
@media screen and (min-width: 1200px) {
    .video-item {
        flex: 0 0 calc(33.333% - 14px);
    }
}

/* 基本信息列表样式 */
.basic-info-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 0px 20px;
    width: 100%;
    box-sizing: border-box;
}

.basic-info-list .info-item {
    min-width: 0; /* 防止内容撑开容器 */
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
}

.basic-info-list .info-item a {
    display: flex;
    flex-direction: column;
    padding: 15px 5px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* 确保内容不会溢出 */
}

.basic-info-list .info-item:hover a {
    transform: translateX(5px);
    border-left: 3px solid #D43030;
}

.basic-info-list .item-title {
    font-size: 16px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s ease;
    margin-bottom: 10px;
    width: 100%; /* 确保标题宽度不超过容器 */
}

.basic-info-list .info-item:hover .item-title {
    color: #D43030;
}

.basic-info-list .item-date {
    color: #999;
    font-size: 14px;
    width: 100%; /* 确保日期宽度不超过容器 */
}

/* 响应式布局 */
@media screen and (max-width: 992px) {
    .basic-info-list {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 5px 15px;
    }
    
    .basic-info-list .info-item a {
        padding: 12px 15px;
    }
    
    .basic-info-list .item-title {
        font-size: 15px;
        margin-bottom: 8px;
    }
    
    .basic-info-list .item-date {
        font-size: 13px;
    }

    .basic-info-section .header-right .more-link {
        padding: 0 10px;
        min-width: 50px;
    }

    .basic-info-section .header-right .more-link:hover {
        padding: 0 20px 0 0;
    }
}

/* 基本信息容器样式 */
.basic-info-section {
    margin: 20px 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

/* 标题样式 */
.basic-info-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #f0f0f0; /* 添加下划线 */
}

/* 左侧标题标签 */
.basic-info-section .header-left .title-tag {
    display: inline-block;
    background: #D43030;
    color: #fff;
    font-size: 18px; /* 增大标题字号 */
    font-weight: normal;
    padding: 10px 25px; /* 增加内边距 */
    position: relative;
    margin-bottom: -1px; /* 让红色背景盖住下划线 */
}

/* 右侧更多链接 */
.basic-info-section .header-right .more-link {
    color: #999;
    font-size: 15px; /* 调整更多链接字号 */
    text-decoration: none;
    padding: 0 20px 0 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.basic-info-section .header-right .more-link i {
    margin-left: 5px;
    font-size: 13px;
    transition: transform 0.3s ease;
}

.basic-info-section .header-right .more-link:hover {
    color: #D43030;
    padding: 0 30px 0 0;
}

.basic-info-section .header-right .more-link:hover i {
    transform: translateX(3px);
}


.basic-info-list .info-item:hover a {
    transform: translateX(5px);
    border-left: 3px solid #D43030;
}

.basic-info-list .item-title {
    font-size: 16px; /* 增大标题字号 */
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s ease;
    margin-bottom: 10px; /* 增加间距 */
}

.basic-info-list .info-item:hover .item-title {
    color: #D43030;
}

.basic-info-list .item-date {
    color: #999;
    font-size: 14px; /* 调整日期字号 */
}

/* 响应式布局 */
@media screen and (max-width: 992px) {
    .basic-info-list {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 0px 15px;
    }
    
    .basic-info-list .info-item a {
        padding: 12px 5px;
    }
    
    .basic-info-list .item-title {
        font-size: 15px;
        margin-bottom: 8px;
    }
    
    .basic-info-list .item-date {
        font-size: 13px;
    }

    .basic-info-section .header-right .more-link {
        padding: 0 10px;
        min-width: 50px;
    }

    .basic-info-section .header-right .more-link:hover {
        padding: 0 5px;
    }
}

/* 列表项样式 */
.basic-info-list .info-item {
    border-bottom: 1px solid #f0f0f0; /* 添加下划线 */
}


/* 移动端适配 */
@media screen and (max-width: 992px) {
    .basic-info-list .info-item {
        border-bottom: 1px solid #f5f5f5; /* 移动端下划线颜色稍浅 */
    }
}

/* 新闻列表页面头部样式 */
.newslist-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    position: relative;
    margin-bottom: 20px;
}

/* 左侧标题 */
.newslist-header-title {
    font-size: 20px;
    font-weight: bold;
    position: relative;
    padding-left: 15px;
}

/* 红色竖线 */
.newslist-header-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: #D43030;
    border-radius: 2px;
}

/* 红色下划线 */
.newslist-page-header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #f0f0f0;
}

.newslist-page-header::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100px; /* 红色下划线的宽度 */
    height: 2px;
    background: #D43030;
    z-index: 1;
}

/* 右侧位置导航优化 */
.newslist-header-location {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    color: #999;
    line-height: 1.5;
}

.newslist-header-location i {
    font-size: 14px;
    margin-right: 4px;
    color: #D43030;
}

.newslist-header-location span {
    color: #999;
    margin-right: 4px;
}

.newslist-header-location a {
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    padding: 0 8px;
    font-size: 14px;
}

/* 分隔符样式 */

/* 最后一个链接的样式 */
.newslist-header-location a:last-child {
    color: #D43030;
    padding-right: 0;
}

.newslist-header-location a:hover {
    color: #D43030;
}

/* 响应式布局 */
@media screen and (max-width: 980px) {
    .newslist-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .newslist-header-title {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .newslist-header-location {
        font-size: 12px;
        width: 100%;
        line-height: 1.8;
        padding-top: 10px;
    }
    
    .newslist-header-location i {
        font-size: 12px;
    }
    
    .newslist-header-location a {
        padding: 0 6px;
        font-size: 12px;
    }
}

/* 我的捐赠记录相关样式 */
.my-donation-summary {
    background-color: #f9f9f9; /* 背景颜色 */
    border-radius: 8px; /* 圆角 */
    margin-bottom: 20px; /* 下边距 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    text-align: center;
    padding: 5px;
}

.my-donation-tips {
    font-size: 14px; /* 提示字体大小 */
    color: #D43030; /* 提示颜色 */
    margin-bottom: 15px; /* 下边距 */
    display: flex; /* 使用 flexbox 布局 */
    align-items: center; /* 垂直居中对齐 */
}

.my-donation-tips i {
    font-size: 20px; /* 图标大小 */
    margin-right: 8px; /* 图标与文本之间的间距 */
}

.my-donation-base-info {
    display: flex; /* 使用 flexbox 布局 */
    justify-content: space-between; /* 横向排列 */
    margin-top: 10px; /* 上边距 */
}

.my-donation-info-item {
    display: flex; /* 使用 flexbox 布局 */
    flex-direction: column; /* 纵向排列 */
    align-items: center; /* 左对齐 */
    font-size: 14px; /* 字体大小 */
    color: #333; /* 字体颜色 */
}

.my-donation-info-item span {
    margin-bottom: 5px; /* 下边距 */
    text-align: center;
}

.my-donation-continue-btn {
    display: inline-block;
    background-color: #D43030;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
    transition: background-color 0.3s;
    text-align: center;
}

.my-donation-continue-btn:hover {
    background-color: #a52c2c; /* 悬停时背景颜色变化 */
}

/* 我的捐赠记录列表样式 */
.my-donation-list {
    margin-top: 20px; /* 上边距 */
}

/* 我的捐赠记录列表样式 */
.my-donation-item {
    background-color: #fff; /* 背景颜色 */
    border: 1px solid #e0e0e0; /* 边框 */
    border-radius: 8px; /* 圆角 */
    padding: 15px; /* 内边距 */
    margin-bottom: 15px; /* 下边距 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    display: flex; /* 使用 flexbox 布局 */
    flex-direction: column; /* 纵向排列 */
}

.my-donation-info {
    display: flex; /* 使用 flexbox 布局 */
    justify-content: space-between; /* 横向排列并均匀分布 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 10px; /* 下边距 */
}

.my-donation-date {
    font-size: 14px; /* 日期字体大小 */
    color: #999; /* 日期颜色 */
}

.my-donation-amount {
    font-size: 18px; /* 金额字体大小 */
    color: #D43030; /* 金额颜色 */
    font-weight: bold; /* 加粗 */
}

.my-donation-project {
    font-size: 16px; /* 项目名称字体大小 */
    color: #333; /* 项目名称颜色 */
    margin-bottom: 10px; /* 下边距 */
}

.my-donation-actions {
    display: flex; /* 使用 flexbox 布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中对齐 */
    margin-top: 10px; /* 上边距 */
}

.my-donation-actions a {
    color: #D43030; /* 链接颜色 */
    text-decoration: none; /* 去掉下划线 */
    transition: color 0.3s; /* 过渡效果 */
}

.my-donation-actions a:hover {
    color: #a52c2c; /* 悬停时颜色变化 */
}

.my-invoice-status {
    font-size: 14px; /* 发票状态字体大小 */
    color: #666; /* 发票状态颜色 */
    margin-left: 10px; /* 左边距 */
}

.load-more-btn {
    display: block; /* 使其成为块级元素 */
    background-color: #D43030; /* 按钮背景颜色 */
    color: #fff; /* 按钮字体颜色 */
    padding: 10px 20px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    border: none; /* 去掉边框 */
    font-size: 16px; /* 字体大小 */
    margin: 20px auto; /* 上下边距，居中对齐 */
    cursor: pointer; /* 鼠标指针样式 */
    transition: background-color 0.3s; /* 过渡效果 */
}

.load-more-btn:hover {
    background-color: #a52c2c; /* 悬停时背景颜色变化 */
}
/* 通用数字样式 */
.common-number {
    font-size: 24px; /* 字体大小 */
    color: #D43030; /* 字体颜色 */
    font-weight: bold; /* 加粗 */
    margin: 5px 0; /* 上下边距 */
    text-align: center; /* 居中对齐 */
}

/* 发票信息对话框样式 */
#invoiceDialog {
    font-size: 14px; /* 字体大小 */
    box-sizing: border-box;
}

#invoiceDialog label {
    display: block; /* 标签块级显示 */
    margin-bottom: 5px; /* 标签与输入框之间的间距 */
}

#invoiceDialog input {
    width: 100%; /* 输入框宽度100% */
    padding: 8px; /* 内边距 */
    margin-bottom: 15px; /* 输入框之间的间距 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 4px; /* 圆角 */
    box-sizing: border-box;
}