.word1{
    font-size: 45px;
    font-weight: bolder;
}
.twhite{
    animation: tfloat 2s;
}
@keyframes tfloat {
    0%, 100%{
        transform: translate(0, 0);
    }
    50%{
        transform: translate(0, 10%);
    }
}

.main_container{
    width: 100%;
    min-width: 1300px;
}

.main_container > *{
    font-size: 30px;
    overflow: hidden;
    color: #7a6540;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: 'Roboto Slab', serif;

}
/*.footer_container{*/
/*    min-width: 1300px;*/
/*    padding-left: 50px;*/
/*    padding-right: 50px;*/
/*    margin-top: 0px !important;*/
/*}*/
/*::-webkit-scrollbar{*/
/*    display: none;*/
/*}*/
.page_container::-webkit-scrollbar{
    display: none;
}
.page_dot{
    top: 10vw;
    right: 1vw;
    width: 1vw;
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 999;
}
.adot{
    height: 1vw;
    width: 1vw;
    background-color: #788f38;
    border-radius: 50%;
    margin-top: 1.0vw;
    transition: 0.3s ease;

}
.light_adot{
    transform: scale(1.1);
    background-color: white;
}
.page_container{
    min-width: 1300px;
    min-height: 600px;
    max-height: 800px;
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    transition: scroll-snap-type 1s ease;
}

.tpage{
    position: relative;
    min-height: 600px;
    height: 100%;

    scroll-snap-align: start;
    scroll-snap-stop: always;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#page2{
    position: relative;
    padding-left: 2%;
    padding-right: 2%;
    display: block;

}


#page2_p0{
    position: absolute;
    width: 50%;
    height: 70%;
    margin-bottom: auto;
    margin-top: auto;
    top: 0%;
    width: 50%;
    opacity: 0;
    transition: 0.7s;
}
#page2_p1{
    position: absolute;
    top: 33%;
    width: 50%;
    opacity: 0;
    transition: 0.7s;
}
#page2_p2{
    position: absolute;
    width: 57%;
    top: 64%;
    opacity: 0;
    transition: 0.7s;
}

.tpicture{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#page2_0{

    width: 56%;
    height: 70%;
    background-size: 100% 100%;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/page2-0.png");
    transition: 0.5s ease;
    opacity: 0;
    transform: translate(10%, 0);
    margin-top: auto;
    margin-left: auto;
    top: 20%;
    position: relative;

}
#page3{
    display: block;
}
#page3_0{
    opacity: 0;
    position: relative;
    width: 100%;
    height: 60%;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/page3-0.png");
    background-size: contain;
    transition: 1s ease;
}
#page3_1{
    opacity: 0;
    position: absolute;
    width: 30%;
    height: 40%;
    top: 2%;
    right: 3%;
    opacity: 0;
    background-size: contain;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/page3-1.png");
    transition: 0.5s;
    transition-delay: 1s;
}
#page3_p0{
    position: relative;
    top: 3%;
    width: 80%;
    font-size: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    transition: 0.7s ease;
    opacity: 0;
}

#page3_later{
    position: relative;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/tkey.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.7s ease;
    opacity: 0;
}
#page3_later0{
    width: 100%;
    position: relative;
    margin-top: auto;
    font-size: 30px;
    text-align: center;
}
#page3_later1{
    width: 100%;
    margin-top: 3%;
    margin-bottom: auto;
    position: relative;
    text-align: center;

    font-size: 60px;
    color: #503314;
}

#page4_0{
    position: absolute;
    width: 100%;
    height: 90%;
    background-size: contain;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/tmap.png");
    opacity: 0;
    transition: 0.7s ease;

}
#page4_p0{
    position: absolute;
    width: 100%;
    bottom: 10%;
    padding-left: 30%;
    text-align: center;
    transition: 0.7s ease;
    opacity: 0;
}
#page4_later{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 44%;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/toolplant.png");
    padding-right: 3%;
    padding-left: 3%;
    flex-direction: column;
    transition: 0.7s ease;
    opacity: 0;
}

#page4_later0{
    margin-top: 3%;
    width: 100%;
    height: 10%;
    text-align: center;
}
#page4_later1{
    width: 100%;
    height: 10%;
    text-align: center;
}

#page5{
    display: block;
    height: 240%;
}
#page5_p0{
    transform: translate(0, 40%);
    padding-left: 3%;
    padding-right: 3%;
    text-align: center;
}
#page5_p1{
    padding-left: 3%;
    padding-right: 3%;
    text-align: center;
}
#page5_p2{
    padding-left: 3%;
    padding-right: 3%;
    text-align: center;
}

#pagewf{
    display: block;
    position: relative;
}

#pagewf_0{
    width: 60%;
    aspect-ratio: 2/1;
    margin-right: auto;
    margin-left: auto;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/whatif.png");
    transition: 0.7s ease;

}
#pagewf_p0{
    padding-right: 10%;
    padding-left: 10%;
    text-align: center;
    transition: 0.7s ease;
}

#pagefield{
    padding: 3%;
    opacity: 0;
    transition: 0.7s ease;
}

#pagefield_p0{
    width: 100%;
    height: 40%;
}

#pagefield_0{
    width: 50%;
    height: 60%;
    position: relative;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/page7-0.png");
}
#pagefield_1{
    width: 50%;
    height: 60%;
    position: relative;
    transform: translate(-95%, 34%) scale(0.05);
    background-image: url("https://static.igem.wiki/teams/5300/source/home/newcoin.png");


}
.coin_move{
    transform: translate(0%, 0%);
    animation: coin_move 5s ease-in-out;
}
@keyframes coin_move {
    0% {
        transform: translate(-95%, 34%) scale(0.05);
    }
    30% {
        transform: translate(-50%, 15%) scale(0.1) rotate3d(1, 1, 1, 0deg);
    }
    70% {
        transform: translate(0%, 0%) scale(1) rotate3d(1, 1, 1, 360deg);
    }
    100% {
        transform: rotate3d(1, 1, 1, 0deg);
    }
}

#B1{
    width: 90%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 5/2;
    transition: 0.5s ease;
    opacity: 0;

}



#B1_1{
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url("https://static.igem.wiki/teams/5300/source/plant-0.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
    transition: background-image 0.5s ease; /* 过渡效果 */

}
#B1_0{
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url("https://static.igem.wiki/teams/5300/source/truck1/truck.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 1;


}

.truck_move{

    animation: truck_move 6s infinite;
}
.plant_disappear{
    animation: plant_disappear 6s infinite;
}
@keyframes truck_move {
    0%{
        opacity: 0;
        transform: translateX(0%);
    }
    17%{
        opacity: 1;
        transform: translateX(17%);
    }
    29%{
        transform: translateX(29%);
    }
    41%{
        transform: translateX(41%);
    }
    53%{
        transform: translateX(53%);
    }
    65%{
        transform: translateX(65%);
    }
    77%{
        transform: translateX(77%);
    }
    89%{
        opacity: 1;
        transform: translateX(89%);
    }
    100%{
        opacity: 0;
        transform: translateX(100%);
    }
}
@keyframes plant_disappear {
    0%{
        opacity: 0;
        background-image: url("https://static.igem.wiki/teams/5300/source/plant-0.png");
    }
    17%{
        opacity: 1;
        background-image: url("https://static.igem.wiki/teams/5300/source/plant-0.png");
    }
    29%{
        background-image: url("https://static.igem.wiki/teams/5300/source/plant-1.png");
    }
    41%{
        background-image: url("https://static.igem.wiki/teams/5300/source/plant-2.png");
    }
    53%{
        background-image: url("https://static.igem.wiki/teams/5300/source/plant-3.png");
    }
    65%{
        background-image: url("https://static.igem.wiki/teams/5300/source/plant-4.png");
    }
    77%{
        background-image: url("https://static.igem.wiki/teams/5300/source/plant-5.png");
    }
    89%{
        opacity: 1;
        background-image: url("https://static.igem.wiki/teams/5300/source/plant-6.png");
    }
    100%{
        opacity: 0;
        background-image: url("https://static.igem.wiki/teams/5300/source/plant-6.png");
    }
}

#B2{
    width: 28%;
    aspect-ratio: 6/5;
    margin-right: auto;
    margin-left: auto;
    margin-top: 2%;
    margin-bottom: 2%;
    display: block;
    position: relative;
}

#B2_0{
    position: absolute;

    width: 40%;
    aspect-ratio: 1/1;
    background-image: url("https://static.igem.wiki/teams/5300/source/32.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: ease 1.5s;
    animation: bean_move 6s ease-in-out infinite;
}
@keyframes bean_move {
    0%{
        opacity: 1;
        transform: translate(266%, -220%) scale(0.05);
    }
    80%{
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100%{
        opacity: 0;
        transform: translate(-30%, 30%);
    }
}
#B2_1{
    position: absolute;

    width: 100%;
    height: 100%;
    background-image: url("https://static.igem.wiki/teams/5300/source/39.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: ease 0.7s;
    animation: float_B2_1 0.7s infinite;
}
#B2_2{
    position: absolute;

    width: 100%;
    height: 100%;
    aspect-ratio: 6/5;
    background-image: url("https://static.igem.wiki/teams/5300/source/40.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: ease 0.7s;
    animation: float_B2_2 0.7s infinite;
}
#B2_3{
    position: absolute;

    width: 100%;
    height: 100%;
    aspect-ratio: 6/5;
    background-image: url("https://static.igem.wiki/teams/5300/source/41.png");
    background-size: contain;
    background-repeat: no-repeat;
    transition: ease 0.7s;
    animation: float_B2_3 0.7s infinite;
}
#page6{
    position: relative;
    display: block;
    height: 150%;

    padding-left: 3%;
    padding-right: 3%;
}
#page6_tmp{
    width: 100%;
    aspect-ratio: 6/1;
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
}

#page6_p1{
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    z-index: 10;
}

#page6_0{
    position: absolute;
    width: 35%;
    aspect-ratio: 2/1;
    margin-right: auto;
    margin-left: auto;
    background-size: contain;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/wenhao.png");
    transition: 0.7s ease;

}
#page6_1{
    position: relative;
    display: flex;
    flex-direction: row;
}





#B3{
    position: relative;
    width: 30%;
    aspect-ratio: 6/5;
    background-image: url("https://static.igem.wiki/teams/5300/source/37.png");
    background-size: 60% 60%;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.7s ease;
    opacity: 0;

}

.pill_move{
    opacity: 1 !important;
    transform: translateX(10%);
    animation: pill_move 1s linear;
}

@keyframes pill_move {
    0%{
        background-image: url("https://static.igem.wiki/teams/5300/source/34.png");
        transform: translateX(-20%);
    }
    20%{
        background-image: url("https://static.igem.wiki/teams/5300/source/34.png");

    }
    40%{
        background-image: url("https://static.igem.wiki/teams/5300/source/35.png");

    }
    60%{
        background-image: url("https://static.igem.wiki/teams/5300/source/36.png");

    }
    80%{
        background-image: url("https://static.igem.wiki/teams/5300/source/37.png");

    }
    100%{
        background-image: url("https://static.igem.wiki/teams/5300/source/37.png");
        transform: translateX(10%);
    }
}

#A3{
    position: relative;
    width: 60%;
    align-content: center;

    transition: 0.7s;
}

#page6_tmp1{
    width: 100%;
    height: 20%;
    position: relative;
    display: flex;
    flex-direction: row;
}

#page6_p0{
    width: 70%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#page6_tmp2{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 30%
}
.page6_icon{
    width: 50%;
    height: 50%;
    margin: auto;
}

#icon1{
    background-image: url("https://static.igem.wiki/teams/5300/source/home/heart.png");
    animation: shake 0.7s ease-in-out infinite;
    animation-delay: 3s;
    animation-direction: alternate;
}
#icon2{
    background-image: url("https://static.igem.wiki/teams/5300/source/home/brain.png");
    animation: shake 0.7s ease-in-out infinite;
    animation-delay: 2s;
    animation-direction: alternate;
}
#icon3{
    background-image: url("https://static.igem.wiki/teams/5300/source/home/page8-1.png");
    animation: shake 0.7s ease-in-out infinite;
    animation-delay: 1s;
    animation-direction: alternate;
}

@keyframes shake {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(0deg);
    }

}

#B6_picture{
    position: relative;
    width: 60%;
    aspect-ratio: 3/2;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/finalpaper.jpg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition:  all 0.7s ease-out;
    transform: translate(0%, 0%) rotate(-5deg);
    margin-top: 10%;
    opacity: 0;
    margin: auto;
}

.paper_fly{
    opacity: 1 !important;
    animation: paper_fly 2s ease;
}

@keyframes paper_fly {
    0%{
        opacity: 0;
        transform: translate(100%, -100%) rotate(60deg);
    }
    100%{
        opacity: 1;
        transform: translate(0%, 0%) rotate(-5deg);
    }

}

#page8{
    display: block;
    position: relative;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/factory.png");
    background-size: 25%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: 0.7s ease;
}
#page8_p0{
    top: 9%;
    left: 43%;
    width: 30%;
    position: absolute;
    text-align: center;
    transition: 1.5s linear;
}

#page8_0{
    left: 12%;
    top: -4%;
    width: 35%;
    height: 40%;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    transition: 1.5s linear;
}
#page8_1{
    left: -2%;
    top: 32%;
    width: 35%;
    height: 40%;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    transition: 1.5s linear;
}
#page8_2{
    left: 17%;
    top: 54%;
    width: 35%;
    height: 40%;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    transition: 1.5s linear;
}
#page8_3{
    left: 55%;
    top: 54%;
    width: 35%;
    height: 40%;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    transition: 1.5s linear;
}
#page8_4{
    left: 60%;
    top: 15%;
    width: 35%;
    height: 40%;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    transition: 1.5s linear;
}

#p80{
    position: relative;
    width: 100%;
    height: 75%;
    padding: 5%;
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/311.png");
    transition: 0.5s ease;
}
#p80:hover{
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/312.png");
}
#w80{
    width: 90%;
    height: 25%;
    font-size: 15px!important;
    text-align: center;
}
#p81{
    position: relative;
    width: 100%;
    height: 75%;
    padding: 5%;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/821.png");
    transition: 0.5s ease;
}
#p81:hover{
    background-image: url("https://static.igem.wiki/teams/5300/source/home/822.png");
}
#w81{
    width: 90%;
    height: 25%;
    font-size: 15px!important;
    text-align: center;
}
#p82{
    position: relative;
    width: 100%;
    height: 75%;
    padding: 5%;
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/341.png");
    transition: 0.5s ease;
}
#p82:hover{
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/342.png");
}
#w82{
    width: 90%;
    height: 25%;
    font-size: 15px!important;
    text-align: center;
}

#p83{
    position: relative;
    width: 100%;
    height: 75%;
    padding: 5%;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/841.png");
    transition: 0.5s ease;
}
#p83:hover{
    background-image: url("https://static.igem.wiki/teams/5300/source/home/842.png");
}
#w83{
    width: 90%;
    height: 25%;
    font-size: 15px!important;
    text-align: center;
}

#p84{
    position: relative;
    width: 100%;
    height: 75%;
    padding: 5%;
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/321.png");
    transition: 0.5s ease;
}
#p84:hover{
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/322.png");
}
#w84{
    width: 90%;
    height: 25%;
    font-size: 15px!important;
    text-align: center;
}

.arrowdown
{
    width: 10%;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/arrowdown.png");
    transform: translateX(-250%) translateY(-30%);
}
.arrowup
{
    width: 10%;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/arrowup.png");
    transform: translateX(-250%) translateY(-30%);
}

.arrowwrong{
    width: 10%;
    background-image: url("https://static.igem.wiki/teams/5300/source/home/wrong.png");
    transform: translateX(-150%) ;
}



#page9{
    padding-left: 3%;
    padding-right: 3%;
    flex-direction: column;
    transition: 0.7s ease;
    opacity: 0;
}

#page9_p0{
    margin-top: auto;
    text-align: center;
    width: 100%;
}
#B8{
    position: relative;
    width: 100%;
    aspect-ratio: 3/1;
    display: flex;
    flex-direction: row;
    margin-bottom: auto;
}

#B8_0{
    width: 25%;
    background-image: url("https://static.igem.wiki/teams/5300/source/28.png");
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.7s;
    animation:  float_0 3s linear infinite;

}
#B8_1{
    width: 25%;
    background-image: url("https://static.igem.wiki/teams/5300/source/29.png");
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.7s;
    animation:  float_1 3s infinite;
}
#B8_2{
    width: 25%;
    background-image: url("https://static.igem.wiki/teams/5300/source/30.png");
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.7s;
    animation:  float_2 3s infinite;
}
#B8_3{
    width: 25%;
    background-image: url("https://static.igem.wiki/teams/5300/source/31.png");
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.7s;
    animation:  float_3 3s infinite;
}



#page10{
    background-image: url("https://static.igem.wiki/teams/5300/source/home/wuxian.gif");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

}
#page10_p0{
    position: relative;
    font-size: 20px;
    text-align: center;
    padding: 5%;
}





.head_picture{
    height: 700px;
    width: 100%;
    background-color: #0dcaf0;
    position: relative;
    display: block;

}

#A1 {
    opacity: 0;
    transition: 0.7s;
    position: relative;
}

.mytitle{
    width: 100%;
    height: auto;
    font-size: 50px;
    color: black;
    font-family: 'MV Boli';
}
.mycontainer{
    display: flex;
    flex-direction: column;
}
.mycontent{
    color: #7a6540;
    font-weight: bold;
    letter-spacing: 1px;
}
.mycontent b{
    color: #fab222;
}




#A2{
    opacity: 0;
    width: 700px;
    align-content: center;
    transition: 0.7s;
}

@keyframes float_B2_1 {
    0%, 100%{
        transform: translate(0, 0);
    }
    50%{
        transform: translate(0, -20px);
    }
}
@keyframes float_B2_2 {
    0%, 100%{
        transform: translate(0, 0);
    }
    50%{
        transform: translate(-20px, -20px);
    }
}
@keyframes float_B2_3 {
    0%, 100%{
        transform: translate(0, 0);
    }
    50%{
        transform: translate(-20px, 0);
    }
}







#A4{
    transition: 0.7s;
    opacity: 0;
    transform: translateX(-40%);
    align-content: center;
}
#B4{
    margin: 20px;
    width: 600px;
    height: 500px;
    background-image: url("https://static.igem.wiki/teams/5300/source/25.png");
    background-size: contain;
    background-repeat: no-repeat;
    transition: 0.7s;
    transform: translateX(40%);
    opacity: 0;
}

#A5{
    transition: 0.7s;
    opacity: 0;
    margin-top:15px;
}

#A5-0{
    transition: 0.7s;
    margin-top:15px;
    font-size: 52px;
}


#B6{
    width: 1300px;
    height: 750px;
    margin: 20px;
    margin-bottom: 100px;
}


@keyframes fly_come {
    0% {
        opacity: 0;
        transform: translate(100%, -100%) rotate(10deg);


    }
    1%{
        display: flex;
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(-5deg);
    }
}

@keyframes fly_back {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(-5deg);
    }
    99%{
        opacity: 0;
        transform: translate(100%, -100%) rotate(10deg);
    }

    100% {
        display: none;
    }
}
#B7{
    display: flex;
    flex-direction: column;
}
.trow{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
#B7 *{
    text-align: center;
    font-size: 20px;
}
#B7_0{
    margin: 10px;
}
#B7_1{
    transform: translate(0, 40px);
    margin: 10px;
}
#B7_2{
    margin: 10px;
}
#B7_3{
    margin: 10px;
}
#B7_4{
    transform: translate(0, 40px);
    margin: 10px;
}
#B7_5{
    margin: 10px;
}

#B7_1_1 div{
    font-size: 15px;
    color: #7d933f;
}
#B7_4_1 div{
    font-size: 15px;
    color: #7d933f;
}

#B7_0_0{
    width: 380px;
    height: 380px;
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/311.png");
    background-size: 100%;
    background-repeat: no-repeat;

    transition: 0.7s ease;
}
#B7_0_0:hover{
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/312.png");
}
#B7_0_1{

    transform: translate(0, -20px);
}



#B7_1_0{
    width: 380px;
    height: 380px;
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/321.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.7s ease;
}
#B7_1_0:hover{
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/322.png");
}
#B7_1_1{
    transform: translate(0, -20px);
}

#B7_2_0{
    width: 380px;
    height: 380px;
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/331.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.7s ease;
}
#B7_2_0:hover{
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/332.png");
}
#B7_2_1{
    transform: translate(0, -20px);
}

#B7_3_0{
    width: 380px;
    height: 380px;
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/351.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.7s ease;
    transform: translate(0, -20px);
}
#B7_3_0:hover{
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/352.png");
}
#B7_3_1{
    transform: translate(0, -20px);
}

#B7_4_0{
    width: 380px;
    height: 380px;
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/341.png");
    background-size: 110%;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.7s ease;
}
#B7_4_0:hover{
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/342.png");
}
#B7_4_1{
    transform: translate(0, -20px);
}

#B7_5_0{
    width: 380px;
    height: 380px;
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/361.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.7s ease;
}
#B7_5_0:hover{
    background-image: url("https://static.igem.wiki/teams/5300/source/advantagenew/362.png");
}
#B7_5_1{
    transform: translate(0, -20px);
}

#A8 {
    transition: 0.7s;
    position: relative;
    margin-bottom:25px;
}



@keyframes float_0 {
    0%,100% {
        transform: translateY(0) translateX(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-9%) translateX(0) rotate(1deg);
    }
}
@keyframes float_1 {
    0%,100% {
        transform: translateY(1%) translateX(0) rotate(-2deg);
    }

    65% {
        transform: translateY(-9%) translateX(0) rotate(1deg);
    }
}
@keyframes float_2 {
    0%,100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    70% {
        transform: translateY(-10%) translateX(0) rotate(0deg);
    }
}
@keyframes float_3 {
    0%,100% {
        transform: translateY(-2%) translateX(0) rotate(0deg);
    }

    40% {
        transform: translateY(-10%) translateX(0) rotate(0deg);
    }
}

#B9{
    height: 600px;
    width: 100%;
    position: relative;
}



#A9 {
    transition: 0.7s;
    position: relative;
    margin-top: 100px;
}


#B9_1{
    position: absolute;
    height: 600px;
    width: 100%;
    background-image: url("https://static.igem.wiki/teams/5300/source/plant-0.png");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    transition: background-image 0.5s ease; /* 过渡效果 */
}
#B9_0{
    position: absolute;
    height: 600px;
    width: 100%;
    background-image: url("https://static.igem.wiki/teams/5300/source/truck1/truck.png");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;

}

#coin_0{
    position: absolute;
    width: 150px;
    height: 110px;
    top: 360px;
    left: 300px;
    opacity: 0;
    background-image: url("https://static.igem.wiki/teams/5300/source/coin.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: 0.3s;
}

#coin_1{
    position: absolute;
    width: 150px;
    height: 110px;
    top: 360px;
    left: 455px;
    opacity: 0;
    background-image: url("https://static.igem.wiki/teams/5300/source/coin.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: 0.3s;
}

#coin_2{
    position: absolute;
    width: 150px;
    height: 110px;
    top: 360px;
    left: 610px;
    opacity: 0;
    background-image: url("https://static.igem.wiki/teams/5300/source/coin.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: 0.3s;
}

#coin_3{
    position: absolute;
    width: 150px;
    height: 110px;
    top: 360px;
    left: 765px;
    opacity: 0;
    background-image: url("https://static.igem.wiki/teams/5300/source/coin.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: 0.3s;
}

#coin_4{
    position: absolute;
    width: 150px;
    height: 110px;
    top: 360px;
    left: 920px;
    opacity: 0;
    background-image: url("https://static.igem.wiki/teams/5300/source/coin.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: 0.3s;
}

#coin_5{
    position: absolute;
    width: 150px;
    height: 110px;
    top: 360px;
    left: 1075px;
    opacity: 0;
    background-image: url("https://static.igem.wiki/teams/5300/source/coin.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: 0.3s;
}

@keyframes coin_appear {
    0%, 100%{
        transform: translate(0, 0);
    }

    50%{
        transform: translate(0, -50px);
    }

}
#B10{
    overflow: visible;
    flex-wrap: wrap;
    display: flex;
}
#factory{
    display: flex;
    flex-direction: row;
    z-index: 1;
}
#factory_0{
    width: 300px;
    height: 400px;
    background-position: center;
    background-image: url("https://static.igem.wiki/teams/5300/source/47.png");
    background-repeat: no-repeat;
    background-size: 60%;
    transform: translate(-20px, 90px);
}
#factory_1{
    width: 400px;
    height: 400px;
    background-position: center;
    background-image: url("https://static.igem.wiki/teams/5300/source/48.png");
    background-repeat: no-repeat;
    background-size: 140%;
    transform: translate(-60px, 60px);
}
#factory_2{
    width: 600px;
    height: 400px;
    background-position: center;
    background-image: url("https://static.igem.wiki/teams/5300/source/49.png");
    background-repeat: no-repeat;
    background-size: 90%;
    transform: translate(0, 0px);
}

#land{
    width: 100%;
    height: 700px;
    background-position: center;
    background-image: url("https://static.igem.wiki/teams/5300/source/53.png");
    background-repeat: no-repeat;
    background-size: contain;
    transform: translate(0, -55px);
    z-index: 0;
}



#balloon{
    position: relative;
    display: flex;
    flex-direction: row;
    top: -330px;
    left: 250px;

    z-index: -1;
    opacity: 0.3;
    animation: none;
    transition: 0.7s ease;
}

#balloon_left{
    position: absolute;
    width: 600px;
    height: 400px;
    background-position: center;
    background-image: url("https://static.igem.wiki/teams/5300/source/50.png");
    background-repeat: no-repeat;
    background-size: 60%;

}

#balloon_right{
    position: absolute;
    width: 600px;
    height: 400px;
    background-position: center;
    background-image: url("https://static.igem.wiki/teams/5300/source/51.png");
    background-repeat: no-repeat;
    background-size: 40%;
    transform: translate(180px, 50px);
}

#balloon_word{
    position: absolute;
    transform: translate(250px, 350px);
    font-size: 50px;
    color: #fab223;
}

@keyframes balloon_float {
    0%, 100%{
        transform: translate(0, 0);
    }
    50%{
        transform: translate(0, 50px);
    }
}









/*#page1{*/
/*    display: none;*/
/*}*/
/*#page2{*/
/*    display: none;*/
/*}*/


/*#page3{*/
/*    display: none;*/
/*}*/

/*#page3_later{*/
/*    display: none;*/
/*}*/

/*#page4{*/
/*    display: none;*/
/*}*/
/*#page4_later{*/
/*    display: none;*/
/*}*/

/*#page5{*/
/*    display: none;*/
/*}*/
/*#pagewf{*/
/*    display: none;*/
/*}*/
/*#pagefield{*/
/*    display: none;*/
/*}*/
/*#page6{*/
/*    display: none;*/
/*}*/
/*#page7{*/
/*    display: none;*/
/*}*/