/* 确保所有日期部分有一个共同的基础样式 */
#conference-dates {
    background-color: rgba(255, 255, 255, 1); /* 完全不透明的白色背景 */
    color: black;
    font-family: 'Century Gothic', sans-serif;
    text-align: center;
    min-height: 150px; /* 最小高度为200像素 */
    max-height: 240px; /* 最大高度为300像素 */
    display: flex; /* 使用 Flexbox */
    justify-content: space-around; /* 等间距分布 */
    padding: 20px 40px 20px 40px; /* 内边距，可以根据需要调整 */
    width: 100%; /* 默认宽度为100% */
    margin: -100px auto 0; /* 负的 top margin 使其覆盖 header 底部，auto 水平居中 */
    z-index: 30; /* 确保 countdowns 在 header 之上 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* 添加底部阴影 */
    overflow: hidden; /* 防止内容溢出 */
   /*filter: brightness(0.9) contrast(1.8) sepia(0) hue-rotate(30deg);*/
}

.date-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* 垂直居中 */
    margin-right: 20px;
    flex: 1; /* 让每个 date-section 占据相同的空间 */
    max-width: 320px; /* 设置最大宽度 */
}

/* 设置每个子项的基础样式 */
.date-label, .date-value, .countdown-value {
    flex: 1; /* 让每个子项占用相同的空间 */
    display: flex;
    align-items: center; /* 垂直居中内容 */
    justify-content: center; /* 水平居中内容 */
    box-sizing: border-box; /* 包含padding和border在元素的总宽高之内 */
    padding: 10px 0; /* 调整上下间距 */
}

.date-label {
    font-size: 16px;
    opacity: 0.7;
}

.date-value {
    font-size: 24px;
    font-weight: bold;
}

.countdown-value {
    font-size: 24px;
    font-weight: bold;
    color: #006666;
}

.containerkds .dates-list {
    width: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 使子元素在容器内上下对齐 */
    height: 100%; /* 确保 dates-list 占据整个可用高度 */
}

/* 针对第一个和最后一个项目的特殊样式 */
.containerkds .dates-list ul li:first-child {
    margin-top: 0; /* 确保第一个项目顶着顶部 */
}

.containerkds .dates-list ul li:last-child {
    margin-bottom: 0; /* 确保最后一个项目贴在底部 */
}

/* 如果有需要，可以为中间的项目添加一些额外的间距 */
.containerkds .dates-list ul li:not(:first-child):not(:last-child) {
    margin-top: auto; /* 让中间的项目自动分配剩余空间 */
}

/* 大屏幕设备的媒体查询 */
@media (min-width: 1200px) {
    #conference-dates {
        width: 60%; /* 设置最大宽度为1200px */
    }

    .date-section {
        margin-right: 20px; /* 在大屏幕上调整间距 */
    }
}

/* 小屏幕设备的媒体查询 */
@media (max-width: 600px) {
    #conference-dates {
        flex-direction: column; /* 在小屏幕上改为垂直排列 */
        align-items: center; /* 居中对齐 */
        padding: 20px; /* 减少内边距 */
        max-height: 450px; /* 增加最大高度以适应更多内容 */
        margin: 0px auto 0; 
    }

    .date-section {
        margin-right: 0; /* 移除右边距 */
        margin-bottom: 20px; /* 增加下边距以适应垂直排列 */
        max-width: 100%; /* 确保在小屏幕上占据整个宽度 */
    }

    .date-label, .date-value, .countdown-value {
        font-size: 12px; /* 减小字体大小 */
        padding: 8px 0; /* 减少上下间距 */
    }

    .date-value {
        font-size: 18px; /* 适当减小日期值的字体大小 */
    }

    .countdown-value {
        font-size: 14px; /* 适当减小倒计时的字体大小 */
    }
}