/*鼠标特效*/
.mouse{
    width: 40px;
    height: 40px;
    border-radius: 50%;;
    position: fixed;
    left: -200px;
    z-index: 8000;
}
*{
    -webkit-text-fill-color: white;
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
@keyframes drop
{
    0% {top:5%;}
   
    100% {top:100%;}
}
.drop{
    animation: drop 2s;
    animation-fill-mode:forwards;
    animation-timing-function:ease-in;
}
.change_p{
    background-image: url('https://static.igem.wiki/teams/4724/wiki/logo2.png');
}
.orange{
    background-image: url('https://static.igem.wiki/teams/4724/wiki/logo1.png');
    background-size:contain;
    background-repeat:no-repeat;
    position:fixed;
    top:5%;
    left: 47%;
    z-index: 7100;
    width:8rem;
    height:8rem;
}
/*小橘子左右飘动*/
.blow-right{
    transition:2s;
    transform:rotate(30deg) translateX(10rem);
}
.blow-left{
    transition:2s;
    transform:rotate(-30deg) translateX(-10rem);
}
.loader{
    margin:0;
    position: fixed;
    top: 50%;
    left: 50%;
    width:100%;
    height :100%;
    transform: translate(-50%,-50%);
    z-index: 6000;
    background-image: url('https://static.igem.wiki/teams/4724/wiki/csjj.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: aliceblue;
}
.preloader{
    position:fixed;
    top: 50%;
    left: 50%;
    width:35%;
    transform: translate(-50%,-50%);
}
.bt4{
    margin:0%;
    width:100%;       
    z-index: 6;
    height:1100px;width:100%;
    background-image: url("https://static.igem.wiki/teams/4724/wiki/header2.png");
     background-position: 50% 50%; 
    background-size: cover;
    background-repeat: no-repeat;
}
.bt43{
    margin:0%;
    position:absolute;top:1080px;
    height:1684px;width:100%;
    z-index: 7;
    background-image: url("https://static.igem.wiki/teams/4724/wiki/lvbu.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.mark1{
    z-index: 0;
    position:absolute;
    bottom:0%;
    opacity: 0;
}
.mark2{
    z-index: 0;
    position:absolute;
    top:0%;
}
/*菜单*/
.menu{
    width: 10rem;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5000;
    top: 25rem;
    left: 0;
    position: fixed;
    cursor: move;
    opacity: 1;
    }
#menu {
    background-image: url('../Fudan-menu1.png');
    background-position:center;
    background-size: cover;
}
/*Homepage menu style */
.active-right{
    transition:0.3s;
    transition-delay: calc(0.12s * var(--i2));
    transition-timing-function:ease-in-out;
    transform:
    translateX(calc(4rem * var(--i1) + 2rem));
    opacity:1;
}
.active-left{
    transition:0.3s;
    transition-delay: calc(0.12s * var(--i2));
    transition-timing-function:ease-in-out;
    transform:
    translateX(0rem);
    opacity:1;
}
.active-top{
    transition:0.3s;
    transition-delay: calc(0.12s * var(--i2));
    transition-timing-function:ease-in-out;
    transform:
    translateY(calc(-4rem * var(--i1) - 2rem));
    opacity:1;
}
.active-down{
    transition:0.3s;
    transition-delay: calc(0.12s * var(--i2));
    transition-timing-function:ease-in-out;
    transform:
    translateY(0rem);
    opacity:1;
}
.active-top-right{ 
    transition:0.3s;
    transition-delay: calc(0.12s * var(--i2));
    transition-timing-function:ease-in-out;
    transform:
    translateY(calc(-4rem * var(--i1) - 2rem))translateX(calc(4rem * var(--i1) + 2rem));
    opacity:1;
}
.active-down-left{
    transition:0.3s;
    transition-delay: calc(0.12s * var(--i2));
    transition-timing-function:ease-in-out;
    transform:
    translateY(0rem)  translateX(0rem);
    opacity:1;
}
/* END */
.trans {
    position: absolute;
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10%;
    cursor: pointer;
    box-shadow: 0 0 0.3rem gray;
    z-index: 100;
    background-color: white;
    opacity: 1;
}
/* 侧边导航栏小图标*/
.test{
    background-position: center;
    background-size: cover;
    height: 30%;
    width: 30%;
    z-index: 50;
    position: absolute;
    opacity: 1;
}
.enlarge-number{
    font-size:9rem;
    width:75vw;
    position:relative;
    left:30%;
}
.word-before-merge{
    font-size: 80px;
    text-align: center;
    color:crimson;
    opacity: 0;
    filter: blur(2px);
    transform: translateY(160%);
    transition: all 1s;
}

.word-before-merge1{
    opacity: 0;
    filter: blur(2px);
    transform: translateX(-100%);
    transition: all 1s;
}
.word-merging{
    opacity: 1;
    filter: blur(0);
    transition: all 1s;
    transform: translateY(0);
}
.trashbox{
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('https://static.igem.wiki/teams/4724/wiki/box-closed.png');
    width:15rem;
}
.trashbox:hover
{
    background-image: url('https://static.igem.wiki/teams/4724/wiki/box-open.png');
}
.trashbox2{
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('https://static.igem.wiki/teams/4724/wiki/project-c2.png');
    width:15rem;
}
.trashbox2:hover
{
    background-image: url('https://static.igem.wiki/teams/4724/wiki/box-open.png');
}
.trashbox3{
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('https://static.igem.wiki/teams/4724/wiki/hp-c2.png');
    width:15rem;
}
.trashbox3:hover
{
    position:relative;
    top:-10%;
    background-image: url('https://static.igem.wiki/teams/4724/wiki/human-parctices-open1.png');
}
.trashbox5{
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('https://static.igem.wiki/teams/4724/wiki/safety-close1.png');
    width:15rem;
}
.trashbox5:hover
{
    background-image: url('https://static.igem.wiki/teams/4724/wiki/safety-open1.png');
}
.trashbox4{
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('https://static.igem.wiki/teams/4724/wiki/team-open1.png');
    width:15rem;
}
.trashbox4:hover
{
    background-image: url('https://static.igem.wiki/teams/4724/wiki/team-open1.png');
}

.mark3{
    z-index: 0;
    position:absolute;
    bottom:0%;
    opacity: 0;
    height:1px;
    width:1px;
}.pet_filter_fabric{
    background-image: url('https://static.igem.wiki/teams/4724/wiki/sidepet.png');
    background-repeat: no-repeat;
    background-size: contain;
    position:relative;
    left:18%;
    
    height:66vh;
    width:87%;
}
.e_polution{
    background-image: url('https://static.igem.wiki/teams/4724/wiki/e-polution.png');
    background-repeat: no-repeat;
    background-size: contain;
    position:relative;
    left:-15%;
    height:60vh;
    width:250%;
    display: inline-block;
}
.burning1{
position:absolute;
background-image: url('https://static.igem.wiki/teams/4724/wiki/burning-trash1.png');
background-repeat: no-repeat;
background-size: contain;
height:80vh;
width:90vw;
opacity: 0;
filter: blur(2px);
transform: translateX(50%);
transition: all 1s;;
}
.burning2{
position:relative;
background-image: url('https://static.igem.wiki/teams/4724/wiki/burning-tarsh.png');
background-repeat: no-repeat;
background-size: contain;
height:80vh;
width:90vw;
opacity: 0;
filter: blur(2px);
transform: translateX(-100%);
transition: all 1s;
}
.word-merging1{
    opacity: 1;
    filter: blur(0);
    transition: all 2s;
    transform: translateX(-25%);
}
.word-merging2{
    opacity: 1;
    filter: blur(0);
    transition: all 1s;
    transform: translateX(-5%);
}
.preview_png1
{
    position: relative;
    left:30%;
    background-image: url('https://static.igem.wiki/teams/4724/wiki/preview-png1.png');
    background-size: contain;
    background-repeat: no-repeat;
    height:60vh;
    width:auto;
}
.preview_png2
{
    background-image: url('https://static.igem.wiki/teams/4724/wiki/preview-png2.png');
    background-size: contain;
    background-repeat: no-repeat;
    height:60vh;
    width:auto;
}
.preview_png3
{
    position:relative;
    left:30%;
    background-image: url('https://static.igem.wiki/teams/4724/wiki/preview-png3.png');
    background-size: contain;
    background-repeat: no-repeat;
    height:60vh;
    width:auto;
}