body{
    background-color: white;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    cursor: url(https://static.igem.wiki/teams/4703/wiki/cursor-test1.ico),auto;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 将background-image中url改成自己gif的路径即可，loading的样式 */
.preloader {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    z-index: 99999;
    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(https://static.igem.wiki/teams/4703/wiki/loading.gif);
}


/* 主体部分 */
.mainbody{
    background: linear-gradient( rgb(232, 250, 246), rgb(98, 150, 129), rgb(57,80,72));
    display: block;
    width:100%;
}
/* 头图 */
.headview{
    position: relative;
    display: block;
    width: 100%;
    height: calc(88vh);
    text-align: center;
    justify-content: center;
    align-items: center;
}
.headview img{
    width: 100%;
    height: calc(88vh);
}


/* 左边的进度条 */

/* 右边的内容 */
/* 题目部分 */
.heading{
    margin-left: 15%;
    width: 70%;
    height:auto;
    text-align: center;
}
/* 标题部分文字 */
.heading h1{
    margin: 20px 20px 15px 20px;
    width: auto;
    font-size: calc(10vh);
    
    font-family: "Cooper Std";
    /* line-height: 180px; */
}

#middle6{
    font-size: calc(15vh);
    line-height: 125px;
}
#middle11{
    line-height: 125px;
    margin-left: 4%;
    width: 92%;
    height:auto;
    text-align: center;
}
/* 图片与文字分开的短模块主体 */
.shorting{
    margin-left: 17%;
    width: 70%;
    height:auto;
    /* text-align: center; */
}
/* 短模块文字部分 */
.shorting h2{
    margin: 20px 20px 15px 20px;
    width: 50%;
    /* 这个字体可用 */
    font-family: "Comic Sans MS";
    line-height: 51px;
}
/* 短模块图片部分 */
.shorting img{
    width: 50%;
    height: auto;
    transform: translateX(45%);
}
/* 图片与文字分开的长模块主体 */
.longing{
    margin-left: 9%;
    width: 85%;
    height:auto;
}
/* 长模块文字部分 */
.longing h2{
    margin: 20px 20px 15px 20px;
    width: auto;
    /* 这个字体可用 */
    font-family: "Comic Sans MS";
    /* font-size: large; */
    line-height: 51px;
}
/* 长模块图片部分 */
.longing img{
    width: 80%;
    height: auto;
    transform: translateX(11%);
}
.longing a{
    margin: 20px 20px 15px 20px;
    width: auto;
    /* 这个字体可用 */
    font-family: "Comic Sans MS";
    font-size: xx-large;
    color: rgb(189,222,244);
    line-height: 51px;
}
/* 文字和图片在同一行的每一行的主体 */
.unusualblocks{
    display: block;
    margin-left: 15%;
}
/* 文字块主体 */
.wordblock{
    width: 55%;
    height: auto;
    position: relative;
    display: inline-block;

    /* 竖直居中方法 */
    /* transform: translateY(-15%); */
    vertical-align: top;
}
/* 文字块里的文字 */
.wordblock h2{
    margin: 20px 20px 15px 20px;
    width: auto;
    font-size: xx-large;
    /* 这个字体可用 */
    font-family: "Comic Sans MS";
    line-height: 51px;
}
/* 文字块里的链接 */
.wordblock a{
    margin: 20px 20px 15px 20px;
    width: auto;
    /* 这个字体可用 */
    font-family: "Comic Sans MS";
    
    font-size: large;
    color: rgb(189,222,244);
}
/* 图片块 */
.imgblock{
    width: 33%;
    height: auto;
    position: relative;
    display: inline-block;
    /* margin-right: 2%; */
}
/* 图片块里的图片 */
.imgblock img{
    width:100%;
    height:auto;
}

/* 快速跳转模块主体 */
.quickchange{
    position: relative;
    display: block;
    text-align: center;
    margin-left: 18%;
}
/* 图片块 */
.quickchange a{
    width: 18%;
    height: auto;
    position: relative;
    display: inline-block;
    margin-right: 15%;
    text-decoration: none;
}
/* 图片块里的图片 */
.quickchange a img{
    height: 200px;
}
/* 图片块里的文字 */
.quickchange a h1{
    margin: 20px 20px 15px 20px;
    line-height: 51px;
}
.quickchange a:hover{
    transform: scale(1.1);
}
/* 调整各个页面的宽度 */
.page1{
    margin-left: 5%;
}
#left1{
    width: 40%;
}
.page2{
    margin-left: 5%;
}
.wordleft2{
    width: 50%;
    padding-top: 6%;
}
#right2{
    width: 45%;
}
.page4{
    margin-left: 10%;
}
#left4{
    padding-right: 5%;
}
#right5{
    width: 44%;
}
/* !!! */
/* 右边特效实现 */
/* 从左边弹出 */
@keyframes bounceInLeft-old {
    /* from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);} */
    0% {opacity: 0;transform: translate3d(-3000px, 0, 0);}
    60% {opacity: 1;transform: translate3d(25px, 0, 0);}
    75% {transform: translate3d(-10px, 0, 0);}
    90% {transform: translate3d(5px, 0, 0);}
    100% {opacity: 1;transform: none;}
}
@keyframes bounceInLeft{
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    75% {
        opacity: 1;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}
@keyframes bounceInLeft1{
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    75% {
        opacity: 1;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

/* 从右边弹出 */
@keyframes bounceInRight-old {
    from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
    0% {opacity: 0;transform: translate3d(3000px, 0, 0);}
    60% {opacity: 1;transform: translate3d(-25px, 0, 0);}
    75% {transform: translate3d(10px, 0, 0);}
    90% {transform: translate3d(-5px, 0, 0);}
    100% {opacity: 1;transform: none;}
}
@keyframes bounceInRight{
    from {
        opacity: 0;
        transform: translateX(150px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}
@keyframes bounceInRight1{
    from {
        opacity: 0;
        transform: translateX(150px);
    }
    75% {
        opacity: 1;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}
/* 旋转出现 */
@keyframes rotateInLight {
    from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);}
    0% {opacity: 0;transform: rotate(90deg);}
    15% {opacity: 0.2;transform: rotate(75deg);}
    30% {opacity: 0.4;transform: rotate(60deg);}
    45% {opacity: 0.6;transform: rotate(45deg);}
    60% {opacity: 0.8;transform: rotate(30deg);}
    75% {opacity: 1;transform: rotate(15deg);}
    85% {opacity: 1;transform: none;}
    90% {opacity: 1;transform: rotate(-30deg);}
    100% {opacity: 1;transform: none;}
}
/* 从下方出现 */
@keyframes bounceInBottom {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}
/* 从右边滚动出现 */
@keyframes gunDong1{
    from {
        opacity: 1;
        transform: translateX(850px) rotate(0) ;
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(360deg) ;
    }
}
@keyframes gunDong2{
    from {
        opacity: 1;
        transform: translateX(650px) rotate(0) ;
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(360deg) ;
    }
}
@keyframes gunDong3{
    from {
        opacity: 1;
        transform: translateX(450px) rotate(0) ;
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(360deg) ;
    }
}
@keyframes gunDong4{
    from {
        opacity: 1;
        transform: translateX(250px) rotate(0) ;
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(360deg) ;
    }
}
/* 从左边滚动出现 */
@keyframes gunDongleft1{
    from {
        opacity: 1;
        transform: translateX(-250px) rotate(0) ;
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(360deg) ;
    }
}
@keyframes gunDongleft2{
    from {
        opacity: 1;
        transform: translateX(-450px) rotate(0) ;
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(360deg) ;
    }
}

#left1.move{
    animation: bounceInLeft1 2s forwards;
}
#right1.move{
    animation: bounceInRight 2s forwards;
}
#left2.move{
    animation: bounceInLeft 2s forwards;
}
#right2.move{
    animation: bounceInRight1 2s forwards;
}
#middle3.move,
#middle6.move,
#middle0.move {
    animation: bounceInBottom 1.5s  forwards;
}
#left10.move{
    animation: bounceInLeft 2s forwards;
}
#right101.move{
    animation: gunDong1 1.5s forwards;
}
#right102.move{
    animation: gunDong2 1.5s forwards;
}
#right103.move{
    animation: gunDong3 1.5s forwards;
}
#right104.move{
    animation: gunDong4 1.5s forwards;
}
#middle11.move{
    animation: bounceInLeft1 2s forwards;
}
#left111.move{
    animation: gunDong1 1.5s forwards;
}
#left112.move{
    animation: gunDong2 1.5s forwards;
}
#right113.move{
    animation: gunDong3 1.5s forwards;
}

#left4.move{
    animation: bounceInLeft1 1.5s forwards;
}
#right4.move{
    animation: bounceInRight1 1.5s forwards;
}
#left5.move{
    animation: bounceInLeft1 3s forwards;
}
#right5.move{
    animation: bounceInRight1 3s forwards;
}

/* 设置四个球的样式 */
.gundong-container{
    display: flex;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}
.gundong{
    display: inline;
}
.gundong img{
    width: 100%;
}
/* 设置三个球的样式 */
.tiaozhuan-container{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.tiaozhuan{
    display: inline-table;
    width: 160px;
    height: 160px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 100%;
    /* 调居中 */
    text-align: center;
    vertical-align: middle;
}
.tiaozhuan a p{
    font-size: xx-large;
    color: rgb(61, 51, 51);
    font-weight: 900;
}
.tiaozhuan a{
    text-decoration: none;
}
.littletiaozhuan{
    width: 100%;
    height: 100%;
    visibility: hidden;
    display: table-cell;
    /* 设置原型 */
    border-radius: 100%;
    /* 调居中 */
    text-align: center;
    vertical-align: middle;
}
.littz1{
    background-color: rgba(228, 149, 205, 0.5);
}
.littz2{
    background-color: rgba(93, 134, 154, 0.5);
}
.littz3{
    background-color: rgba(184, 119, 196, 0.5);
}
.tiaozhuan:hover .littletiaozhuan{
    visibility: visible;
}
#left111{
    background-image: url('https://static.igem.wiki/teams/4703/wiki/head/home/tiaohzuan1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#left112{
    background-image: url('https://static.igem.wiki/teams/4703/wiki/head/home/tiaozhuan2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#right113{
    background-image: url('https://static.igem.wiki/teams/4703/wiki/head/home/tiaozhuan3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* 三行黏贴效果 */
.page7contain{
    height: 1500px;
}
.page7{
    position: sticky;
    top: 70px;
}
.page8{
    position: sticky;
    top: 205px;
}
.page9{
    position: sticky;
    top: 400px;
}
.page7 img{
    width: 50%;
    padding-left: 40px;
}
.page8 img{
    width: 60%;
}
.page9 img{
    width: 70%;
    padding-top: 30px;
}
.page8 h2{
    padding-top: 60px;
}
.page9 h2{
    padding-top: 30px;
}




/* 底部导航栏 */
/* .bottomnav{
    display: flex;
    position: relative;
    background-color: rgb(98, 150, 129);
    padding-bottom: 50px;
}
.bottomleft{
    display: inline;
    color: snow;
    width: 30%;
    text-align: center;
    margin-left: 5%;
    font-size: x-large;
}
.bottomlogo{
    display: inline;
    width:  25%;
    text-align: center;
    padding-top: 50px;
}
.bottomright{
    display: inline;
    color: snow;
    width: 30%;
    text-align: center;
    font-size: x-large;
} */