/* base.css */

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* 顶部渐变条 */
.top-bar {
    background: linear-gradient(to right, #BFBFBF, #868BA6, #54587D);
    height: 45px;
    width: 100%;
    display: flex;
    align-items: center; /* 内容上下居中 */
    position: relative; /* 为内部元素的绝对定位提供参考 */
}

/* 包裹文本的容器 */
.top-bar-content {
    color: white;
    position: absolute;
    right: 20px; /* 使内容距右侧20px */
    transform: translateX(-50%);
    white-space: nowrap; /* 保证文本不换行 */
    display: flex;
    align-items: center; /* 确保内容在 div 内部上下居中 */
}

/* 顶部栏中的图标 */
.top-bar .icon {
    margin-right: 10px; /* 图标和文字之间的间距 */
}

/* 横幅图片 */
.banner {
    height: 385px;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto; /* 移除上下间距 */
}

/* 设置导航栏渐变背景并使其具有粘性效果 */


/* 页面内容区域的间距 */
.content {
    padding: 0; /* 移除页面内容区域的顶部间距 */
}

#progress-bar {
    position: sticky;
    top: 77px; /* 紧贴导航栏下方 */
    left: 0;
    width: 0px;
    height: 4px;
    background-color: #272c4d; /* 进度条颜色，可根据需要调整 */
    z-index: 1001; /* 确保进度条在导航栏之上 */
    transition: width 0.25s ease-out; /* 进度条平滑扩展 */
}

/* 页脚样式 */
.footer {
    background-color: #2c2f48; /* 页脚背景颜色 */
    color: white; /* 页脚文字颜色 */
    padding: 20px 0; /* 页脚上下内边距 */
    text-align: center; /* 页脚文字居中 */
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* 垂直居中 */
}

.footer-nav {
    margin-bottom: 20px; /* 导航和版权信息之间的间距 */
}

.footer-nav a {
    color: white;
    margin: 0 10px; /* 导航链接的左右内边距 */
    text-decoration: none; /* 移除链接下划线 */
}

.footer-nav a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* 添加媒体查询以适应移动设备 */
@media (max-width: 768px) {
    .navbar {
        background: linear-gradient(to right, #BFBFBF, #868BA6, #54587D);
        height: 77px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: sticky; /* 设置为粘性布局 */
        top: 0; /* 当导航栏接触到视口顶端时，固定在顶部 */
        z-index: 1000; /* 确保导航栏在其他内容之上 */
    }

    .navbar ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        height: 100%; /* 确保 ul 高度与导航栏一致 */
    }

    .navbar li {
        position: relative;
        margin: 0;
        display: flex;
        align-items: center; /* 使内容垂直居中 */
    }

    .navbar li:not(:last-child)::after {
        content: '';
        display: block;
        width: 1px;
        height: 30%; /* 调整竖线的长度，使其更短 */
        background-color: #ffffff;
        position: absolute;
        right: 0;
        top: 35%; /* 将竖线垂直居中 */
    }

    .navbar a {
        color: white;
        text-decoration: none;
        padding: 0 20px; /* 为导航项添加左右填充，使竖线显示在项目之间 */
        display: flex;
        align-items: center; /* 使内容垂直居中 */
        height: 100%; /* 确保链接高度与导航栏一致 */
    }

    .navbar a:hover {
        background-color: #262626;
    }

    /* 为Program项添加小v符号 */
    .navbar li.has-dropdown > a .fa-angle-down {
        margin-left: 5px; /* 与文字间距 */
        font-size: 12px; /* 调整图标大小 */
        color: white; /* 设置颜色 */
    }

    /* 下拉菜单动画样式 */
    .dropdown-content {
        display: none; /* 初始状态下隐藏 */
        background-color: #6a6f9c;
        flex-direction: column;
    }

    .navbar li:hover .dropdown-content {
        display: block; /* 鼠标悬停时显示下拉菜单 */
    }

    /* 隐藏 top-bar 和 banner */
    .top-bar, .banner, #progress-bar {
        display: none;
    }

    /* 调整导航栏为汉堡菜单 */
    .navbar {
        position: relative;
        height: auto;
        display: block;
    }

    .navbar ul {
        display: none; /* 隐藏导航栏菜单 */
        flex-direction: column; /* 将菜单垂直排列 */
        width: 100%;
        background-color: #54587D;
    }

    .navbar ul.active {
        display: block; /* 当点击汉堡菜单时，显示导航栏菜单 */
    }

    .navbar li {
        display: block;
        width: 100%;
    }

    .navbar a {
        padding: 15px 20px;
        border-bottom: 1px solid #fff;
    }

    /* 汉堡菜单按钮样式 */
    .hamburger {
        display: block;
        cursor: pointer;
        padding: 15px;
        background-color: #54587D;
        text-align: right;
    }

    .hamburger .bar {
        width: 25px;
        height: 3px;
        background-color: white;
        margin: 5px 0;
    }

    /* 容器布局调整 */
    .container {
        flex-direction: column;
        width: 100%;
        padding: 0 15px; /* 增加左右内边距 */
    }

    .left-column,
    .right-column {
        width: 100%; /* 设置宽度为100% */
        margin-right: 0; /* 移除右侧间距 */
        padding: 0 10px; /* 增加列的左右内边距 */
    }

    .right-column .image {
        margin-top: 20px; /* 设置上间距 */
        margin-bottom: 20px; /* 设置下间距 */
    }
}


@media (min-width: 769px) {
    .navbar {
        background: linear-gradient(to right, #BFBFBF, #868BA6, #54587D);
        height: 77px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: sticky; /* 设置为粘性布局 */
        top: 0; /* 当导航栏接触到视口顶端时，固定在顶部 */
        z-index: 1000; /* 确保导航栏在其他内容之上 */
    }

    .navbar ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        height: 100%; /* 确保 ul 高度与导航栏一致 */
    }

    .navbar li {
        position: relative;
        margin: 0;
        display: flex;
        align-items: center; /* 使内容垂直居中 */
    }

    .navbar li:not(:last-child)::after {
        content: '';
        display: block;
        width: 1px;
        height: 30%; /* 调整竖线的长度，使其更短 */
        background-color: #ffffff;
        position: absolute;
        right: 0;
        top: 35%; /* 将竖线垂直居中 */
    }

    .navbar a {
        color: white;
        text-decoration: none;
        padding: 0 20px; /* 为导航项添加左右填充，使竖线显示在项目之间 */
        display: flex;
        align-items: center; /* 使内容垂直居中 */
        height: 100%; /* 确保链接高度与导航栏一致 */
    }

    .navbar a:hover {
        background-color: #262626;
    }

    /* 为Program项添加小v符号 */
    .navbar li.has-dropdown > a .fa-angle-down {
        margin-left: 5px; /* 与文字间距 */
        font-size: 12px; /* 调整图标大小 */
        color: white; /* 设置颜色 */
    }

    /* 下拉菜单动画样式 */
    .dropdown-content {
        display: block;
        position: absolute;
        background-color: white; /* 设置下拉菜单背景为白色 */
        min-width: 160px;
        max-height: 0; /* 初始高度为0 */
        overflow: hidden; /* 超出内容部分隐藏 */
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        top: 77px; /* 确保下拉菜单位于导航项正下方 */
        border: 1px solid #e0e0e0; /* 下拉菜单的边框颜色 */
        transition: max-height 0.5s ease-out; /* 高度变化动画 */
    }

    .dropdown-content a {
        color: black; /* 设置下拉菜单文字颜色 */
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        border-bottom: 1px solid #e0e0e0; /* 添加上下灰色线条 */
    }

    .dropdown-content a:hover {
        background-color: #f0f0f0; /* 悬浮时下拉菜单项的背景色 */
    }

    .dropdown-content a:last-child {
        border-bottom: none; /* 移除最后一项的下边框 */
    }

    .navbar li:hover .dropdown-content {
        max-height: 500px; /* 鼠标悬停时的最大高度，视下拉内容而定 */
    }


}