/* body{
    background-image: url(../img/code.jpg);
    background-size:contain;
} */

* {
    margin: 0;
    padding: 0;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
}


/* banner部分 */

.banner {
    width: calc(100vw);
    height: calc(100vh);
    /* min-width: 90em; */
    background-image: url('https://static.igem.wiki/teams/4257/wiki/picture/collaboration/c-9.jpg');
    background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    z-index: -4;
}

.be_banner {
    background-color: rgba(35, 0, 44, 0.719);
    width: 100%;
    height: calc(100vh);
    position: fixed;
    z-index: -3;
    top: 0;
}

.bt {
    width: 100%;
    height: calc(90vh);
    left: 0;
    position: fixed;
    top: 0;
    z-index: -2;
}

.bt text {
    text-transform: uppercase;
    animation: stroke 5s infinite alternate;
    font-size: 8em;
    font-weight: bolder;
    text-shadow: 0 0 5px rgb(185, 199, 255), 0 0 10px rgb(185, 199, 255), 0 0 15px rgb(185, 199, 255), 0 0 20px rgb(185, 199, 255), 0 0 35px rgb(185, 199, 255), 0 0 40px rgb(185, 199, 255), 0 0 50px rgb(185, 199, 255), 0 0 75px rgb(185, 199, 255);
    /* 0 0 75px #f39d6b; */
}

@keyframes stroke {
    0% {
        fill: rgba(72, 138, 20, 0);
        stroke: rgb(177, 181, 255);
        stroke-dashoffset: 25%;
        stroke-dasharray: 0 50%;
        stroke-width: 1.5;
    }
    50% {
        fill: rgba(72, 138, 20, 0);
        stroke: rgb(177, 181, 255);
        stroke-width: 1.5;
    }
    70% {
        fill: rgba(72, 138, 20, 0);
        stroke: rgb(177, 181, 255);
        stroke-width: 1.5;
    }
    90%,
    100% {
        fill: rgba(72, 138, 20, 0);
        stroke: rgb(177, 181, 255);
        stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
        stroke-width: 1.5;
    }
}

@-webkit-keyframes stroke {
    0% {
        fill: rgba(72, 138, 20, 0);
        stroke: rgb(74, 82, 235);
        stroke-dashoffset: 25%;
        stroke-dasharray: 0 50%;
        stroke-width: 0.8;
    }
    50% {
        fill: rgba(72, 138, 20, 0);
        stroke: rgb(74, 82, 235);
        stroke-width: 1.2;
    }
    70% {
        fill: rgba(72, 138, 20, 0);
        stroke: rgb(74, 82, 235);
        stroke-width: 1.5;
    }
    90%,
    100% {
        fill: rgb(74, 82, 235);
        stroke: rgba(5, 12, 128, 0);
        stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
        stroke-width: 0;
    }
}


/* 边框 */

.kuang {
    stroke: rgb(221, 60, 154);
    fill: rgba(63, 1, 46, 0.551);
    stroke-width: 2;
    width: 100%;
    position: absolute;
    z-index: 20;
}
.kuang path{
    stroke-dasharray: 600;
    stroke-dashoffset: 100;
}
.bg {
    width: 100%;
    margin-top: calc(90vh);
    padding-top: 3.5%;
    /* padding-bottom: 15%; */
}

.bg h1 {

    color: aliceblue;
    text-align: center;
    padding-top: 3em;
}

.outer {
    background: rgba(63, 1, 46, 0.551);
    width: 100%;
    margin-top: -0.355px;
    padding-top: 4em;
    

}

.inner {
    background-color: rgba(51, 4, 31, 0.425);
    width: 80%;
    /* height: calc(270vh); */
    /* position: absolute; */
    /* left: -50%; */
    /* padding-top: 4em; */
    /* margin-top: 4em; */
    transform: translate(12.5%, 0);
    border: 2px solid rgb(221, 60, 154);

}

.cfo {
    /* background-image: url(../img/cfo.png); */
    background-size: cover;
    /* position: absolute;
    left: 0;
    bottom: 0; */
    z-index: 500;
    width: 900px;
    height: 700px;
    margin: 0 auto;
    margin-top: 30%;
}