.home-bg{
    display: flex;
    background-color: burlywood;
    background-image: url('https://static.igem.wiki/teams/4228/wiki/home-bro-bg.png');
    background-size:100% 100%;
    height: 800px;
    background-attachment: fixed;
    width: 100%;
}

#home-cutoff{
    margin: 2% 5%;
    border-top: rgb(203, 203, 203) 2px dashed;
}

.home-item-left{
    text-align: left;
    display: flex;
    margin: 3% 5%;
    flex-direction: row;
    /* border: #7F93C5 1px solid; */
}

.home-item-right{
    text-align: left;
    display: flex;
    margin: 3% 5%;
    flex-direction: row;
    /* border: #7F93C5 1px solid; */
}

.item-title{
    font-family: 'Gilmer Bold';
    color: #7F93C5;
    font-size: 3rem;
    margin-bottom: 2%;
}

.img-in-item{
    width: 40%;
}

.img-in-item img{
    width: 100%;
}

.text-in-item-left{
    margin: 1% 2%;
    align-self:center;
    padding-right: 3%;
    width: 60%;
}

.text-in-item-right{
    margin: 1% 2%;
    align-self:center;
    padding-left: 3%;
    width: 60%;
}

.item-text{
    padding-top: 3px;
    color:#868686;
    font-size: 1.3rem;
    line-height: 2rem;
    padding: 1% 0%;
}

/* 主页动画 */
.moveUp {
    animation-name: my-index-fadeIn;
    animation-duration: 0.5s;
    height: 55px;
}

.moveDown {
    animation-name: my-index-fadeOut;
    animation-duration: 0.5s;
    height: 800px;
}

/* 上滑动画 */
@keyframes my-index-fadeIn{
    from{
       height: 800px;
    }
    to{
        height: 55px;
    }
}

/* 下滑动画 */
@keyframes my-index-fadeOut{
    from{
        height: 55px;
    }
    to{
        height: 800px;
    }
}

/* 淡入动画 */
.my-fadeIn {
    animation-name: my-fadeIn;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
    opacity: 100%;
}

@keyframes my-fadeIn{
    from{
       opacity: 0%;
    }
    to{
        opacity: 100%;
    }
}