*{padding: 0;margin: 0;}
body{
    overflow-x: hidden;
}
.homepart1{
    position: relative;
    width: 100%;
    height: 55vw;

}
.homepart2{
    position: relative;
    width: 100%;
    height: 55vw;  
}
.homepart3{
    position: relative;
    width: 100%;
    height: 55vw;

}
.homepart4{
    position: relative;
    width: 100%;
    height: 55vw;

}
.homepart5{
    position: relative;
    width: 100%;
    height: 55vw;

}
.homepart6{
    position: relative;
    width: 100%;
    height: 55vw;

}
.homepart7{
    position: relative;
    width: 100%;
    height: 55vw;

}
.homepart8{
    position: relative;
    width: 100%;
    height: 55vw;

}
.homepart9{
    position: relative;
    width: 100%;
    height: 64vw;

}










@keyframes moving  {
    0%,100%{
        transform: translate(0);
    }
     50%{
        transform: translate(10%);
    }
}



.hmknight{
    position: relative;
width: 60%;
height: auto;
top: 16%;
left: 22%;
}
.medal{
    position: relative;
    width: 20%;
    height: auto;
    top: 0%;
    right: -8%;
}
.hmpart1p1{
    position: relative;
    left: -105%;
    bottom: -26%;transition: 1s;
}
.hmpart1p2{
    position: relative;
    left: 105%;
    bottom: -40%;transition: 1.8s;
}
.hmclock{
    position: relative;
    width: 19%;
    height: auto;
    left: 66%;
    top:15%;
}
.hmcloud1{
    position: relative;
    width: 30%;
    left: -20vw;
    top: -2vw;
    transition: 0.8s;
}
.hmpart2p1{
    position: relative;
    left: 17%;
    top: 42%;
    transition: 0.8s; opacity: 0;
}
.hmfigure1{
    position: relative;
    width: 40%;
    left: 100%;
    transition: 0.6s;
}
.hmcloud2{
    width: 45%;
    position: relative;
    top: -1%;
    left: 100%;
    transition: 0.8s;
}
.hmpart3p1{
    position: relative;
    left: -50%;
    top: 3%;
    transition: 0.6s;
}
.hmpill1{
    width: 10%;
    position: relative;
    left: -30%;
    top: -10%;
    transition: 1s;
}
.hmpart4p1{
    position: relative;
    left: 25%;
    top: 8vw;
    opacity: 0;

}
.hmpart4p2{
    position: relative;
    left: 24%;
    top: 0vw;
}
.hmpill2{
    width: 30%;
    position: relative;
    left: 64%;
    top: -12%;
    transition: 0.8s;
}
.hmfigure2{
    position: relative;
    width: 40%;
    top: 2vw;
    left: 50%;
}
.hmpart5p1{
    position: relative;
    left: 5%;
    top: -5vw;transition: 0.4s;
}
.hmneuron{
    position: relative;
    width: 24%;
    height: auto;
    top: -3vw;
    left: 50%;
    transition: 1.4s;
}
.hmheart1{
    position: relative;
    width: 40%;
    height: auto;
    top: 8vw;
    left: -13%;transition: 2.4s;
}
.hmmacrophages{
    position: relative;
    width: 50%;
    height: auto;
    top: 7vw;
    left: 24%;transition: 3.4s;
}
.hmpart5p2{
    position: relative;
    left: 5%;
    top: 5vw;
}
.hmpart6p1{
    position: relative;
    left: 8%;
    top: -6vw;
    transition: 1.2s;
}
.tonglu1{
    position: relative;
    width: 34%;
    left: 68%;
    top: -28vw; 
    z-index: 2;
    transition: 1.8s;
}
.hmcloud3{
    position: relative;
    width: 30%;
    left:30%;
    top: -18vw;
    animation-name: moving;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
.hmpart6p2{
    position: relative;
    left: 13%;
    top: -15vw;
    transition: 0.8s;
}
.hmclock2{
    width: 20%;
    position: relative;
    left: 70%;
    top: -23vw;
    opacity: 0.5;
    transition: 0.9s;
}
.hmpart6p3{
    position: relative;
    left: 45%;
    top: -27vw;
    transition: 1.2s;
}
.actonglu{
    position: relative;
    width: 40%;
    left: 10%;
    top: 11vw;
    transition: 1s;
}
.hmpart7p1{
    position: relative;
    left: 100%;
    top: -13vw;
    transition: 1s;
}
.hmcloud5{
    position: relative;
    width: 20%;
    left: 60%;
    top:-25vw;
}
.hmcloud4{
    position: relative;
    width: 20%;
    left: 50%;
    top:-23vw;
}
.hmoil{
    position: relative;
    width: 10%;
    left: 0%;
    top:25vw;
}
.hmpart8p1{
    position: relative;
    left: 5vw;
    top: -2%;
    transition: 0.8s;
}
.hmcloud6{
    width: 80%;
    position: relative;
    width: 30%;
    left: 20%;
    top: -1vw;
    animation-name: moving;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.hmcloud7{
    width: 40%;
    position: relative;
    left: 40%;
top: 8vw;
animation-name: moving;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.hmcloud8{
    position: relative;
    width: 40%;
top: 10vw;
left: 10%;
animation-name: moving;
animation-duration: 6s;
animation-iteration-count: infinite;
}


.hmpart9p1{
    position: relative;
    left: 7vw;
    top: 0vw;
    transition: 0.8s;
    opacity: 0.2;
}
.hmpart9p2{
    position: relative;
    left: 5vw;
    top: 10vw;
    transition: 1s;
}

















































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