*{
    margin: 0;
    padding: 0;
}

body {
    background-image: url(../material/background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 999;
}
.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    width: 100%;
}
.footer a:link {
    color:#4c4c4c;
    text-decoration: none;
}
.footer a:visited, .footer a:hover {
    color: #465cbd;
    text-decoration: none;
}
ul {
    position: relative;
    display: flex; 
}
ul li {
    list-style: none;
    width: 120px;
    line-height: 40px;
    text-align: center;
    margin: 5px;
}
ul li a {
    color:#4c4c4c; 
    /* 导航字体颜色 */
    text-decoration: none;
}
.slider {
    width: 100px;
    height: 40px;
    background-color: #96e8df;
    border-radius: 4px;
    position: absolute;
    left: 10px;
    bottom: 0;
    z-index: -1;
    transition: all ease 0.4s;
    animation: waves 2s ease-in-out 0s infinite;
    display: none;
}

li:nth-child(1):hover ~ .slider {
    left: 15px;
    display: flex;
}
li:nth-child(2):hover ~ .slider {
    left: 145px;
    display: flex;
}
li:nth-child(3):hover ~ .slider {
    left: 274px;
    display: flex;
}
li:nth-child(4):hover ~ .slider {
    left: 404px;
    display: flex;
}
li:nth-child(5):hover ~ .slider {
    left: 533px;
    display: flex;
}

@keyframes waves {
    from {
        clip-path: polygon(
            0% 17%,
            9% 10%,
            18% 4%,
            30% 0%,
            43% 1%,
            49% 4%,
            57% 7%,
            66% 10%,
            78% 11%,
            89% 11%,
            96% 9%,
            100% 7%,
            100% 100%,
            0% 100%
        );
    }
    50% {
        clip-path: polygon(
            0% 4%,
            6% 9%,
            13% 13%,
            23% 15%,
            31% 16%,
            42% 15%,
            49% 13%,
            61% 10%,
            71% 5%,
            81% 3%,
            90% 2%,
            100% 5%,
            100% 100%,
            0% 100%
        );
    }
    to {
        clip-path: polygon(
            0% 17%,
            9% 10%,
            18% 4%,
            30% 0%,
            43% 1%,
            49% 4%,
            57% 7%,
            66% 10%,
            78% 11%,
            89% 11%,
            96% 9%,
            100% 7%,
            100% 100%,
            0% 100%
        );
    }
}
.index {
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 440px) {
    ul li {
        width: 60px;
    }
    .slider {
    width: 60px;
    }

    li:nth-child(1):hover ~ .slider {
        left: 5px;
        display: flex;
    }
    li:nth-child(2):hover ~ .slider {
        left: 74px;
        display: flex;
    }
    li:nth-child(3):hover ~ .slider {
        left: 144px;
        display: flex;
    }
    li:nth-child(4):hover ~ .slider {
        left: 218px;
        display: flex;
    }
    li:nth-child(5):hover ~ .slider {
        left: 284px;
        display: flex;
    }
}