
.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(102, 128, 94)  8px dotted;
}

.home-item-left{
    text-align: left;
    display: flex;
    margin: 3% 5%;
    
    flex-direction: row;
    border-left: rgb(102, 128, 94) 8px dashed; 
    border-right: rgb(102, 128, 94)8px dashed; 
}

.home-item-right{
    text-align: left;
    display: flex;
    margin: 3% 5%;
    flex-direction: row;
    border-left: rgb(102, 128, 94) 8px dashed; 
    border-right: rgb(102, 128, 94)8px dashed; 
    /* border: #7F93C5 1px solid; */
}

.item-title{
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    color: #456842;
    font-size: 4rem;
    margin-bottom: 1%;
    
}


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

.img-in-item img{
    width: 100%;
}
.lines{
       background-color: rgba(248, 249, 249, 0); 
       width:100%
    
    }
.lines 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:#a25d2d;
    font-size: 1.8rem;
    line-height: 2.5rem;
    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%;
    }
}