* {
    margin: 0;
    padding: 0;
}


@font-face {
    font-family: 'intro_font';
    src: url(https://static.igem.wiki/teams/4177/wiki/wiki/font/gothic.ttf);
}




.up_body {
    position: relative;
    width: 100%;
    height: 36rem; 
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.up_body #dun {
    width: 13%;
    top: 9rem;
}

.up_body #bigtitle_up {
    position: absolute;
    width: 40rem;
    top: 25rem;
    left: 50%;
    margin-left: -20rem;
    z-index: 1;
}

.up_body #bigtitle_down {
    position: absolute;
    width: 32rem;
    top: 36rem;
     left: 50%;
    margin-left: -20rem;
    z-index: 1;
}

.up_body img {
    width: 100%;
    position: absolute;
    top: 0;
    /* height: 100%; */
    object-fit: cover;
    pointer-events: none;

}

.water_note {
    position: relative;
    text-align: center;
}

.water_note #text1 {
    display: block;
    position: absolute;
    top: 25%;
    left: 0;
    text-align: center;
    width: 100%;
    font-family: 'intro_font';
    color: #595959;
    font-size: 1.4rem;
    line-height: 2.4rem;
}

.water_note #text1 em {
    font-style: normal;
    font-weight: bold;
}

.chajing {
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -22rem;
    width: 36rem;


}

.water_note #intro {
    position: absolute;
    top: 57.5%;
    text-align: center;
    width: 100%;
    font-family: 'intro_font';
    color: #595959;
    font-size: 1.3rem;
    line-height: 2rem;
}

.water_note #intro em {
    font-weight: 800;
}

.doucha_pic {
    position: absolute;
    height: 30rem;
    top: 75%;
    right: 14%;
}

#doucha_intro {
    position: absolute;
    top: 81%;
    left: 11%;
    text-align: center;
    font-family: 'intro_font';
    color: #fff;
    font-size: 1.3rem;
    line-height: 2rem;
}

#doucha_intro em {
    font-style: normal;
    color: #57e29f;
}

.paocha {
    width: 100%;
    position: relative;
}

.paocha img {
    width: 100%;
    vertical-align: middle;
    filter: grayscale(0);
    transition: filter .5s linear;
}

.paocha_note {
    position: absolute;
    top: 34%;
    right: 2%;
    text-align: right;
    font-family: 'intro_font';
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.8rem;
}

.paocha_note em {
    font-style: normal;
    color: #57e29f;
}

.big_note {
    position: absolute;
    top: 68%;
    right: 2%;
    text-align: right;
    font-family: 'intro_font';
    color: #fff;
    font-size: 2.4rem;
    line-height: 1.8rem;
}


.medicine {
    position: relative;
    height: 84rem;
}

.medicine1 {
    position: absolute;
    font-family: 'intro_font';
    color: #595959;
    font-size: 1.2rem;
    line-height: 1.8rem;
    top: 13.7%;
    left: 16%;
    text-align: left;
}

.medicine1 em {
    font-style: normal;
    color: #007b61;
    font-weight: bold;
}

.medicine2 em {
    font-style: normal;
    color: #000;
    font-weight: bold;
}

.medicine2 {
    position: absolute;
    text-align: right;
    font-family: 'intro_font';
    color: #595959;
    font-size: 1.2rem;
    line-height: 1.8rem;
    top: 60%;
    right: 16%;
}

.teatree {
    position: absolute;
    width: 38%;
    top: 33%;
    left: 16%;
}

.insect {
    position: absolute;
    width: 22%;
    top: 12%;
    right: 16%;
}

.video_part {
    position: relative;
    width: 100%;
    height: 135rem;
}

.video_first {
    position: absolute;
    text-align: center;
    font-family: 'intro_font';
    color: #fff;
    font-size: 1.4rem;
    line-height: 2rem;
    top: 16%;
    width: 100%;
}

.video_second {
    position: absolute;
    text-align: center;
    font-family: 'intro_font';
    color: #00e0b1;
    font-size: 1.7rem;
    line-height: 2.3rem;
    top: 33%;
    width: 100%;
}

iframe {
    position: absolute;
    top: 46%;
    left: 50%;
    margin-left: -35rem;
    width: 70rem;
    height:39rem; 
    
}

.video_intro {
    position: absolute;
    text-align: center;
    font-family: 'intro_font';
    color: #000;
    font-size: 1.4rem;
    line-height: 2.3rem;
    top: 76%;
    width: 100%;
    font-weight: 400;
}

.video_intro em {
    color: #ababab;


}

.video_intro .aphids {
    font-weight: bold;
    color: #000;
    font-style: normal;
}

.follow {
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 12%;
}

.follow img {
    width: 72%;
}