body {
    padding: 0;
    margin: 0;
}



.diy-nav {
    z-index: 100000;
    position: sticky;
    background-color: #fff;
    top: 0;
    width: 100vw;
    /*vw是以屏幕为基准分成100分，几vw就是几份；height是vh*/
    height: calc(((100vw/16)*9)/1080*122);
    /*margin-top: calc((calc((100vw/16)*9)/1080)*20);*/
    overflow: hidden;
}
.nav-content-container {
    width: 100vw;
    height: calc((calc((100vw/16)*9)/1080)*110);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    background-color: #fff;
}
.nav-content-logo-container {
    width: calc((100vw/1920)*86);
    height: calc((100vw/1920)*86);
    margin-left: 8vw;
    border-radius: calc((100vw/1920)*15);
    background-image: url("https://static.igem.wiki/teams/5083/z-nav/linelight.png");
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-content-logo {
    width: calc((100vw/1920)*74);
    height: calc((100vw/1920)*65);
    background: url('https://static.igem.wiki/teams/5083/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.nav-content-text-container {
    width: calc((100vw/1920)*(211*3+93*2));
    height: 100%;
    display: flex;
    margin-left: calc((100vw/1920)*113);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.diy-nav-menu {
    position: relative;
}

.active {

}

.nav-content-text {
    width: calc((100vw/1920)*172);
    height: calc((100vw/1920)*122);
    font-size: calc((100vw/1920)*40);
    font-weight: 310;
    letter-spacing: 0px;
    line-height: calc((100vw/1920)*93.06);
    margin-right: calc((100vw/1920)*52);
    color: rgba(51, 51, 51, 1);
    text-align: center;
    vertical-align: top;
    display: flex;
    align-items: center;
    transition: font-size .08s;
    justify-content: center;
}

.diynav-submenu-active {
    opacity: 1 !important;
    visibility: visible !important;
}

.nav-content-text {
    
}

.diynav-submenu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    position: absolute;
    /* font-size: 0.8em; */
    font-size: calc((100vw / 1920)* 30);
    /* text-decoration: none; */
    list-style-type: none;
    padding: calc((100vw / 1920)* 30);
    box-shadow: 2;
    background-color: #f0f0f0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}

.diynav-submenu a {
    text-decoration: none;
    color: rgba(51, 51, 51, 0.8);
}

.diynav-submenu > li:hover a {
    text-decoration: none; /* 移除默认的下划线 */
    display: inline-block; /* 使背景可以应用到链接上 */
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background-size: 100% 0.1em; /* 设置渐变背景的大小和位置 */
    background-repeat: no-repeat; /* 不重复背景 */
    background-position: 0 100%; /* 将背景放在文本的底部 */
    transition: background-size 0.3s ease-in-out; /* 渐变动画效果 */
}

.nav-line-container {
    height: calc((100vw/1920)*32);
    width: 100%;
    position: relative;
    bottom: calc((100vw/1920)*20);
}
.nav-line {
    width: 100%;
    height: 100%;
    opacity: 1;
    background-image: url("https://static.igem.wiki/teams/5083/z-nav/linelight.png");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 16%;
    transform: translateX(-27%);
    transition: transform 0.5s ease-in-out;
}