body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 主内容区域，让底部导航栏固定在底部 */
.main-content {
    flex: 1;
    /* 使用 flex-basis 替代 height */
    flex-basis: 500px;
    z-index: 0;
}

.bottom-top {
    position: relative;
    line-height: 0; /*设置行高为 0*/
}



/* 底部导航栏容器 */
.bottom-nav {
    margin-top: 0;
    /* 使用 background-image 设置背景图片 */
    background-image: url(https://static.igem.wiki/teams/5858/images/footer/2-2.webp);
    /* 宽度 100%，高度按比例缩放 */
    background-size: 100% auto;
    /* 让背景图片从左上角开始显示 */
    background-position: left top;
    /* 确保图片不重复 */
    background-repeat: no-repeat;
    width: 100%;
    /* 初始高度设为 0，后续通过 JS 设置 */
    height: auto;
    background-color: #2A356C;
    z-index: 0;
}

/* 导航栏内容容器 */
.nav-content {
    max-width: 1200px;
    margin: 0px auto auto auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* 新添加的导航分组样式 */
.nav-group {
    flex: 0 0 25%;
    margin-bottom: 40px;
}

.nav-group h4 {
    margin: 0 0 10px 0;
}

.nav-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-group ul li a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-group h4 a,
.footer-info p a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-group ul li a:hover,
.footer-info p a:hover {
    color: #ccc;
}

.nav-group h4 a:hover {
    color: #ccc;
}

/* 导航链接列表 */
.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

/* 导航链接样式 */
.nav-links li a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-links li a:hover {
    color: #ccc;
}

/* 版权和声明信息 */
.footer-info {
    margin-top: 10px;
    width: 100%;
    text-align: center;
}

/* 新增 logo 和二维码容器样式 */
.logo-container,
.qrcode-container {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0 0 0;
}

.logo-container img,
.qrcode-container img {
    max-height: 100px;
    width: auto;
}

.code-contact {
    width: 100%;
    text-align: center;
}

#top_img {
    width: 100%;
    height: auto;
    z-index: 1;
}

.flowers
{
    position: absolute;
    z-index: 1;
    left:2vw;
    top:-4vw;
    width: 72%;
    height: auto;
}