*{margin: 0;padding: 0;scroll-behavior: smooth;}
body{
    background: url('https://static.igem.wiki/teams/5267/back-new/safety1001.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.part1{
    width: 100%;
    background-color: transparent;
    position: relative;
    height: 35vw;
}
.part2content{
    position: relative;
    background-color: #6fb6dd;
    width: 70%;
    height: auto;
    left: 22%;
    border-radius: 18px;
    top:7% ;
    padding: 3%;
    
}
.part2{
    width: 100%;
background-color: transparent;
position: relative;

height: 55vw;
}
.part3{
    width: 100%;
    background-color: transparent;
    position: relative;
    height: 45vw;
}
.part3content1{
    position: relative;
    background-color: #b3dbe5;
    width: 70%;
    height: auto;
    left: 22%;
    border-radius: 18px;
    top:6% ;
    padding: 3%;
}

.part4{
    width: 100%;
background-color: transparent;
position: relative;

height: auto;
}
.part4content{
    position: relative;
    background-color: #6fb6dd;
    width: 70%;
    height: auto;
    left: 22%;
    border-radius: 18px;
    top:5% ;
    padding: 3%;
    margin-top: 2%;
}













































.bigcard{
    width: 100%;
    height: 500vw;
    background-color: blue;
    margin: 0;
}
.menu-moon{
position: absolute;
width: 30%;
left:1.5vw ;
top: 1vw;
rotate: 20deg;
transition: 0.55s;
}
.menu-line{
position: absolute;
width: 40%;
top: 3vw;
height: 7vw;
left: -3vw;

}

.sidenav {
font-family: comic sans ms;
background-color: #416d8e;
display: block;
left: -500px;
top: 30%;
width: 14%;
position: fixed;
z-index: 3;
pointer-events: all;
text-align: right;
font-size: 1.2rem;
font-weight: bold;
line-height: 2vw;
/* 初始位置在屏幕左侧 */
transition: left 0.2s;
/* 添加过渡效果 */
border-radius: 20px;
}

a.side {
color: #fff1b6;
word-wrap: break-word;
word-break: keep-all;
text-align: center;
text-decoration: none;

display: inline;
padding: 0 0px;
font-size: 1rem;
font-family: comic sans ms;
}

a.side:hover {
font-size: 1.2rem;
text-align: right;
background-color: transparent;
}



.sidebox {
display: flex;
margin: 5% 0% 8% 0%;
margin-left: 2%;
}

.sideleft {
flex: 1;
text-align: center;
}

.sacloud1{
    width: 50%;
    position: absolute;
    height: 25%;
    left: 15vw;
    top: 10vw;
    transition: 1.1s;
    animation-name: sacloud1move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}
@keyframes sacloud1move{
    0%,100%{
            transform: translate(0);
    }
    
    50%{
        transform: translateX(-500px);
        }
    
    }


    .sacloud2{
        width: 35%;
        position: absolute;
        height: 35%;
        left: -20vw;
        top: 10vw;
        transition: 1.1s;
    }
    .sacloud3{
        width: 45%;
        position: absolute;
        height: 25%;
        left: 45vw;
        top: 20vw;
        transition: 1.3s;
    }
    .sacloud4{
        width: 45%;
        position: absolute;
        height: 25%;
        left: 65vw;
        top: 20vw;
        transition: 1.1s;
        animation-name: sacloud4move;
        animation-duration: 7.5s;
        animation-iteration-count: infinite;
        animation-timing-function: ease;
    }
    @keyframes sacloud4move{
        0%,100%{
                transform: translate(0);
        }
        
        50%{
            transform: translateX(-600px);
            }
        
        }