/* 页尾样式 */
.footer{
    display: grid;
    grid-template-columns:1fr 5fr;
    grid-template-rows: 2fr 1fr;
    grid-template-areas: 
            "footer-flex scroller"
            "lastdiv lastdiv";
    background:
    linear-gradient(to left, #8fc2e7 10%, #f0bccb 70%);
    height:40vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding:20px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.footer::after{
    content: "";
    position: absolute;
    right: 15px;
    bottom: 0;
    width: 500px;
    height: 35px;
    background: url('https://static.igem.wiki/teams/5918/main-pic/footer-right.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;

}

.footer::before{
    content: "";
    position: absolute;
    left: 15px;
    bottom: 10px;
    width: 75px;
    height: 75px;
    background: url('https://static.igem.wiki/teams/5918/main-pic/footer-left.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;

}

.footer>.back-image{
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
}
.back-image::after{
    content: "";
    position: absolute;
    left: -10px;
    top: -400px;
    width: 100%;
    height: 100vh;
    background: url('https://static.igem.wiki/teams/5918/main-pic/footer-back.webp');
    background-size: 1000px;
    background-repeat: no-repeat;
    background-position: right;
    opacity: 0.15;
}

.ourLOGO_container{
    position: relative;
    display: block;
}
.ourLOGO{
    display: block;
    width: 80%;
    height: 80%;
    margin-top: 10%;
    margin-bottom: 10%;
    margin-left: 20%;
}
.footer_media {
    height: 35px;
    width: 35px;
}
.footer-flex{
    /* grid-area:1/ 1/ 2/ 2; */
    grid-area: footer-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-flex>div{
    display: flex;
    justify-content:right;
}

.scroller{
    grid-area: scroller;
    /* grid-area: 1/ 2/ 2/ 3; */
    position: relative;
    left:8%;
    width: 80%;
    justify-items: center;
    align-self: center;
    overflow: hidden;
    display: flex;
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
.scroller__inner{
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll 10s reverse forwards linear infinite;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
}

@keyframes scroll {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-100%);
}
}
.scroller__inner>a{
    margin:10px;
}
.lastdiv{
    grid-area: 2/ 1/ 3/ 3;
    text-align: center;
    align-content: center;
    color:white;
}



@media screen and (max-width:1100px) {
    .footer{
        display: grid;
        grid-template-columns:1.5fr 5fr;
        grid-template-rows: 2fr 1fr;
    }
    .scroller{
        width: 70%;
        margin: 10px auto;
        left:5%;
    }
    .lastdiv{
        width:70%;
        margin: 0 auto;
    }


}
@media screen and (max-width:700px) {
        .footer{
            display: grid;
            grid-template-columns:1fr;
            grid-template-rows: 2fr 1fr;
        }
        .ourLOGO_container{
            display: none;
        }
        .scroller{
            width: 70%;
            margin: 10px auto;
            left:0;
        }
        .lastdiv{
            width:70%;
            margin: 0 auto;
        }
    
    
    }