*{padding: 0;margin:0;}
body{
    background-color: #B9D4E2;
}

p{
    font-size: 1.2vw;
    line-height: 1.5vw;
    padding: 2%;
}

body{
    background: url('#');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #B9D4E2;
}



.overbasicpart{
position: absolute;
width: 10%;
left: 25%;
top: 28vw;
}
.overbasicpart:hover{
width: 12%;
left: 24%;
top: 99% ;
transition: 0.4s;
}
.basisword{
position: absolute;
width: 7%;
left: 26%;
top:135%;
}
.overcompositeparts{

position: absolute;
width: 10%;
left: 45%;
top: 28vw;
}
.overcompositeparts:hover{
width: 12%;
left: 44%;
top: 99% ;
transition: 0.4s;
}
.compoword{
position: absolute;
width: 10%;
left: 45%;
top: 135%;
}
.overpartcollection{
position: absolute;
width: 10%;
left:65%;
top:28vw;
}

.collectword{
position: absolute; 
width: 9%;
left: 65%;
top: 135%;
}
    





.pcpart1{   position: relative;
width: 100%;
height: 30vw;
top: 50vw;
background-color: transparent ;
}
.pcpart2{
position: relative;
width: 100%;
height: 40vw;
background-color: transparent;
}
.pcpart3{
position: relative;
width: 100%;
height: 45vw;
background-color: transparent;

}
.pcpart4{
position: relative;
width: 100%;
height: 125vw;
background-color: transparent;

}
.pcpart5{
    position: relative;
    width: 100%;
    height: 30vw;
    background-color: transparent;
    
    }

.pcpart6{
    position: relative;
    width: 100%;
    height: 65vw;
    background-color: transparent;
    top:44vw;
    
    }
    .pcpart7{
        position: relative;
        width: 100%;
        height: 65vw;
        background-color: transparent;
        
        }
        .mopart5content2{
            border-radius: 14px;
            position: relative;
            width: 70%;
            left:27%;
            height: auto;
            top: 65%;
            background-color:#83bfdd;
            }



.pcpart2content{
position: relative;
width: 70%;
left: 27%;
height: auto;
top: 56vw;
border-radius: 14px;
background-color:#98cfeb;
}
.pcpart3content{
position: relative;
border-radius: 14px;
width: 70%;
left: 27%;
height: auto;
top: 58vw;
background-color:rgba(44, 92, 129, 0.6);
color:aliceblue;
}
.pcpart4content1{
border-radius: 14px;
position: relative;
width: 70%;
left: 27%;
height: auto;
top: 42vw;
background-color:rgba(44, 92, 129, 0.6);
color:aliceblue;
}
.pcpart4content2{
    border-radius: 14px;
    position: relative;
    width: 70%;
    left: 27%;
    height: auto;
    top: 45vw;
    background-color:rgba(44, 92, 129, 0.6);
    color:aliceblue;
    }
.pcpart4figure1{
    position: relative;
    width: 70%;
    left: 20%;
    height: 42%;
    top: 22%;
    border-radius: 14px;
    background-color:rgba(44, 92, 129, 0.6);
    }
    .pcpart4figure2{
        position: relative;
        width: 70%;
        left: 20%;
        height: 18%;
        top: 32%;
        border-radius: 14px;
        background-color:rgba(44, 92, 129, 0.6);
        }
        .pcpart5content1{
            border-radius: 14px;
            position: relative;
            width: 70%;
            left: 27%;
            height: auto;
            top: -25vw;
            background-color:#83bfdd;
            }
            .pcpart5content2{
                border-radius: 14px;
                position: relative;
                width: 70%;
                left: 27%;
                height: auto;
                top: -21vw;
                background-color:#83bfdd;
                }
                .pcpart5content3{
                    border-radius: 14px;
                    position: relative;
                    width: 70%;
                    left: 27%;
                    height: auto;
                    top: -18vw;
                    background-color:#83bfdd;
                    }
                .pcpart5figure1{
                    position: relative;
                    width: 70%;
                    left: 20%;
                    height: 28%;
                    top: 56%;
                    border-radius: 14px;
                    background-color:rgba(44, 92, 129, 0.6);
                    }
        .pcpart6figure1{
            position: relative;
            width: 70%;
            left: 20%;
            height: 44%;
            top: 136%;
            border-radius: 14px;
            background-color:rgba(44, 92, 129, 0.6);
            }
            .pcpart6content1{
                border-radius: 14px;
                position: relative;
                width: 70%;
                left: 27%;
                height: auto;
                top: 30%;
                background-color:#83bfdd;
                }
                .pcpart6content2{
                    border-radius: 14px;
                    position: relative;
                    width: 70%;
                    left: 27%;
                    height: auto;
                    top: 30%;
                    background-color:#83bfdd;
                    }
                    .pcpart6figure2{
                        position: relative;
                        width: 70%;
                        left: 20%;
                        height: 54%;
                        top: 142%;
                        border-radius: 14px;
                        background-color:rgba(44, 92, 129, 0.6);
                        }
                        .references{
                            border-radius: 14px;
                            position: relative;
                            width: 70%;
                            left:27%;
                            height: auto;
                            top: 200%;
                            background-color:#83bfdd;
                            }
    
















.footer{
position: relative;
left: 0vw;
background-color: #cdedf9;
width: 100%;
height: 24vw;
bottom: -100vw;
}

.part{
position:absolute;
width: auto;
height: 25%;
left: 25%;
top: 56%;

}

.hp{
position:absolute;
width: auto;
height: 29%;
left:45% ;
top: 52.5%;
}
.labwork{
position:absolute;
left: 5%;
width: auto;
height: 29%;
top: 52%;
}
.team{
position:absolute;
left: 35%;
width: auto;
height: 29%;
top: 53%;
}

.project{
position:absolute;
width: auto;
height: 29%;
top: 52%;
left: 15%;
}

.labwork:hover{
height: 34%;
transition: 0.2s;
left: 4.4%;
top: 49.5%;
}
.part:hover{
height: 29.31%;
transition: 0.2s;
left: 24.3535%;
top: 53.85%;
}
.team:hover{
height: 34%;
transition: 0.2s;
left: 34.4%;
top: 49.5%;
}
.project:hover{
height: 34%;
transition: 0.2s;
top: 49.5%;
left: 14.4%;
}
.hp:hover{
height:34%;
transition: 0.2s;
top: 50%;
left: 44.4%;
}









.knight{
position: absolute;
top:5%;
left: 3%;
width: 16%;
height: auto;

}

.rightdiv{
position: absolute;
width: 25%;
height: auto;
left: 68%;
bottom: 10%;
}



.transition {
position: relative;
text-align: center;
border:0;
margin: 0;
z-index: 9;
}

.waves {
position: relative;
width: 100%;
height: 15vh;
margin-bottom: -7px; 
min-height: 50px;
max-height: 150px;
bottom: -100VW;
}


/* Animation */

.parallax > use {
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
.waves {
height: 20px;
min-height: 20px;
}

}



.lisencep1{
margin: 0;

text-align: center;
}
.lisencep2{
margin: 0;
text-align: center;

}
a{
text-decoration-line: none; 
color: #416d8e;
}



#tooltip {
position: absolute;
bottom: 7vw;
right: 5vw;
width: 15vw;

background: transparent;
color: #416d8e;
text-align: center;
line-height: 1rem;
font-size: 0.7vw;
font-weight: 800;
}
.snapgene{
position: absolute;
width: 24%;
height: auto;
top: 2.6vw;
left: 23%;
}
.footerschool{
position: absolute;
width: 8%;
height: auto;
top: 3vw;
left:50%;
}

.overclick{
position: relative;
display: inline;
text-align: center;
top: 18vw;
left: 45%;
}
.overbasicpart{
position: absolute;
width: 10%;
left: 25%;
top: 75%;
}
.overbasicpart:hover{
width: 12%;
left: 24%;
top: 74% ;
transition: 0.4s;
}
.basisword{
position: absolute;
width: 10%;
left: 24%;
top:115%;
}
.overcompositeparts{

position: absolute;
width: 10%;
left: 45%;
top: 75%;
}
.overcompositeparts:hover{
width: 12%;
left: 44%;
top: 74% ;
transition: 0.4s;
}
.compoword{
position: absolute;
width: 10%;
left: 45%;
top: 115%;


}
.overpartcollection{

position: absolute;
width: 10%;
left:65%;
top:81%;

}
.collectword{
position: absolute; 
width: 10%;
left: 65%;
top: 115%;
}







#p1-1 {
/* padding-left: 50%; */
top: 50px;
}
.pppppart {
box-sizing: border-box;
position: relative;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 0;
}
#p2-2t1 {
text-align: right;
}

.content {
height: auto;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
/* padding-bottom: 50px; */
font-family: Arial, sans-serif;
font-size: 1rem;
line-height: 1.5rem;
text-align: justify;
text-align-last: left;
}
.img-intro {
text-align: center;
font-size: 13px;
}
.insert-img {
margin-top: 40px;
margin-bottom: 40px;
width: 70%;
display: inline-block;
}
.block1 {
width: 70%;
height: auto;
overflow-x: hidden;
font-family: Arial, sans-serif;
font-size: 1rem;
line-height: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#p1-1-1, #p1-1-2 {
width: 80vw;
align-items: center;
left: 10%;
/* padding-left: 20vw; */
}
#p1-1-1, #p1-1-2 {
width: 80vw;
align-items: center;
left: 10%;}
.block1 {
width: 70%;
height: auto;
overflow-x: hidden;
font-family: Arial, sans-serif;
font-size: 1rem;
line-height: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#table1 {
width: 90%;
border-collapse: collapse;
height: auto;
text-align: center;
table-layout: auto;
}
a{
color: #144851;
text-decoration: none;
}
.odd {
background-color: #AAD6E0;
border: 1px #174747;
}
.even {
background-color: #77b2bc;
}














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