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

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

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

.imgs{
    position: absolute;
    /* z-index: 4; */
    left:2vw;
    top:-4vw;
    width: 20%;
    height: auto;
}
#g1{
    left:76vw;
    top:-15vw;
    z-index:3;
}
#g2{
    left:65vw;
    top:-18vw;
    width: 13vw;
    z-index: 2;
}
#g4{
    left:8vw;
    top:-12vw;
    width: 70vw;
    z-index: 6;
}
#g5_1{
    left:49vw;
    top:-6.6vw;
    width: 15vw;
    z-index: 1;
}
#g5_2{
    left:-0.5vw;
    top:-5.7vw;
    width: 13vw;
    z-index: 1;
}
#g6_1{
    left:56vw;
    top:-17vw;
    width: 37.5vw;
    z-index: -1;
}
#g6_2{
    left:85vw;
    top:-22vw;
    width: 8vw;
    z-index: -1;
}
#g6_3{
    left:4vw;
    top:-7.7vw;
    width: 20vw;
    z-index: -1;
}


#g7_1{
    left:58vw;
    top:-22vw;
    width: 10vw;
    z-index: 1;
}

#g7_2{
    left:5vw;
    top:-12vw;
    width: 6vw;
    z-index: 1;
}

#g8_1{
    left:18vw;
    top:-2.3vw;
    width: 8vw;
    z-index: 2;
}

#g8_2{
    left:64vw;
    top:-20vw;
    width: 7vw;
    z-index: 2;
}

#g8_3{
    left:71vw;
    top:-8vw;
    width: 27vw;
    z-index: 2;
}

#f1{
    left:71vw;
    top:-8vw;
    width: 3vw;
    z-index:3;
    transform: rotate(10deg);
}
#f2{
    left:67vw;
    top:-13vw;
    width: 5.5vw;
    z-index: 3;
    transform: rotate(-15deg);
}

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

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

/* 新添加的导航分组样式 */
.nav-group {
    flex: 0 0 23%; /* 调整宽度以适应四列布局 */
    margin-bottom: 40px;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    /* align-items: center; 居中对齐内容 */
}

.nav-group h4 {
    margin: 0 0 10px 0;
    /* text-align: center; 标题居中 */
}

.nav-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* text-align: center; 列表项居中 */
}

.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;
}


/* .flower {
    position: absolute;
    z-index: 1;
    
    will-change: transform;
    --rotation: 0deg; 
} */
.flowers
{
    position: absolute;
    z-index: 1;
    left:2vw;
    top:-4vw;
    width: 72%;
    height: auto;
}