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

/* banner部分 */

.banner {
    width: calc(100vw);
    height: calc(100vh);
    min-width: 1400px;
    /* min-width: 90em; */
    background-image: url(https://static.igem.wiki/teams/4257/wiki/picture/members/m-1.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%;
    min-width: 1400px;
    position: absolute;
    z-index: 20;
}
.kuang path{
    stroke-dasharray: 600;
    stroke-dashoffset: 100;
}
.bg {
    width: 100%;
    min-width: 1400px;
    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: 70px;
    

}

.inner {
    background-color: rgba(51, 4, 31, 0.425);
    width:1400px;
    margin: 0 auto ;
    /* 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: 40px;
}

/* 合照 */
.all{
    width: 70%;
    min-width: 980px;
    margin: 0 auto;
    margin-bottom: 5%;
}

.all img{
    width: 100%;
    object-fit: cover;
}
/* team member */
.team_introduction .folder{
    height: auto;
    margin-top: 0;
    background: rgba(146, 9, 139, 0.274);
    padding-bottom: 15%;
}
.team_introduction .up_folder,.team_introduction .up1,.team_introduction .up2{
    background-color: rgba(57, 117, 117, 0.487);
}


.content h5{
    color:  #ffffff;
    font-size: 20px;
    text-align: left;
    background: rgba(0, 0, 0, 0.294);
    padding: 25px;
    /* padding-bottom: 30px; */
    font-weight: 40;
}
.main_headline {
    font-size: 50px !important;
    color: #ffffff;
    text-align: center;
    /* margin: 3vw auto; */
    padding-top: 50px;;
    line-height: 50px;
    margin-bottom: 50px;
}

.content h4{
    font-size: 40px;
    padding: 20px;
    color: white;
    font-weight: 100;
}

.main_headline span::after {
    width: 50%;
    height: 4px;
    content: '';
    /* background-color: #9effff; */
    position: absolute;
    left: 25%;
    margin-top: 5%;
    border-radius: 50%;
    /* margin-bottom: 70%; */
}

.box {
    width: 100%;
    height:660px;
    margin: 0 auto;
    font-size: 20px;
    text-align: center;
    /* display:inline-block; */
}

.box .card {
    float: left;
    width: 410px;
    height:100%;
    /* height: 45%; */
    
    margin-left: 40px;
    margin-bottom: 40px;
    /* margin: 20px; */
    /* background: #c3cfff; */
    /* box-shadow: 0.6em 0.6em 1.2em #d2dce9, -0.5em -0.5em 1em #ffffff; */
    border-radius: 0px;
    border: solid 1.5px  rgb(229, 195, 250);
    box-shadow:0 0 7px 0 rgb(134,213,218,0.5);
}

/* .box.last {
    margin-right: 0;
} */

/* .card {
    text-align: center;
    height: 200px;
    width: 200px;
    border-radius: 100%;
    position: relative;
    margin: 20px;
    color: #fff;
    font-family:'Courier New', Courier, monospace;
    font-size: 1.2em;
} */

.box img {
    margin: 0 auto;
    object-fit: cover;
    /* display: table-cell; */
    vertical-align: middle;
    text-align: center;
    box-shadow:0 0 7px 0 rgb(134,213,218,0.5);
    /* clip-path: circle(38%); */
    
    border-radius: 100%;
    border: solid 1.5px rgb(229, 195, 250);
    padding: 2px;
    margin-top: 25px;
    height: 200px;
    width: 200px;
}
.card1 img{
    height: 250px;
    width: 250px;
    border-radius: 100%;
    border: solid 1.5px rgb(229, 195, 250);
    box-shadow:0 0 7px 0 rgb(134,213,218,0.5);
    object-fit: cover;
    float: left;
    margin-left: 40px;
    margin-right: 40px;
}
.card1 h4{
    
    color: #ffffff;
    font-size: 40px;
    font-weight: 100;
    
}
.card1 .a11{
    height: 160px;
    /* box-sizing:border-box ; */
    color:  #ffffff;
    font-size: 20px;
    text-align: left;
    background: rgba(0, 0, 0, 0.294);
    padding: 25px;
    width: 950px;

}
.card1{
    width: 1000px;
    margin: 0 auto;
    height:300px;
    border: solid 1.5px rgb(229, 195, 250);
    box-shadow:0 0 7px 0 rgb(134,213,218,0.5);
    padding-top: 20px;
    padding-bottom:  20px;
}



/* pi */


.PI {
    width: 80%;
    height: calc(100vh);
    /* background-color: #c6efff; */
    /* background-image: linear-gradient(to top,  rgba(179, 12, 12, 0.014),rgba(27, 17, 222, 0.374)); */
    margin: 0 auto;
    /* border: #aafffb solid 0.15em; */
    margin-top: 5%;

}

.PI h1 {
    text-align: center;
    padding-top: 2em;
    font-family: sans-serif;
    /* color: rgb(103, 16, 16); */
    color: rgb(189, 194, 255);
    /* border: solid 2px; */
}



/* 介绍部分 */

.PI1 {
    /* background-image: linear-gradient(25deg, #e33b54, #ee7374, #f5a197, #f8cdbb); */
    width: 90%;
    min-width: 1260px;
    height: calc(70vh);
    margin: 0 auto;
    margin-top: calc(5vh);
    overflow: hidden;
    background-image: linear-gradient(to top,  rgba(179, 12, 12, 0.014),rgba(27, 17, 222, 0.374));
    border: 0.15rem solid rgb(110, 122, 252);
    box-shadow: 0 0 15px 0#76a2ffa2;
}


/* 装饰 */

.PI11 {
    
    width: 8em;
    height: 4em;
    border: 0.15rem solid rgb(110, 122, 252);
    box-shadow: 0 0 15px 0#76a2ffa2;
    position: absolute;
    margin-top: -4.35em;
    margin-left: -0.15em;
    background: rgba(27, 17, 222, 0.374);
}

.PI12 {
    
    width: 8em;
    height: 2em;
    /* background: rgb(255, 195, 195); */
    border: 0.15rem solid rgb(110, 122, 252);
    box-shadow: 0 0 15px 0#76a2ffa2;
    position: absolute;
    margin-top: -2.35em;
    margin-left: 8.05em;
    background: rgba(27, 17, 222, 0.374);

}

.PI13 {
    
    width: 8em;
    height: 2em;
    /* background: rgb(255, 219, 219); */
    border: 0.15rem solid rgb(110, 122, 252);
    box-shadow: 0 0 15px 0#76a2ffa2;
    position: absolute;
    margin-top: -2.35em;
    margin-left: 16.25em;
    background: rgba(27, 17, 222, 0.374);

}
.PI1::before{
    content: '';
    width: 10px;
    height: 4.15em;
    position: absolute;
    /* left: 0; */
    /* background-color:#ff868692 ; */
    top:6.5em;
}

/* 简介 */
.part1{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    /* border: #ffffff solid 1px; */
}

.our-team {
    padding: 30px 0px 40px 0px;
    border: solid 1px rgb(110, 122, 252);
    box-shadow: 0 0 15px 0#76a2ffa2;
    /* background-color: #f7f5ec9a; */
    text-align: center;
    overflow: hidden;
    position: relative;
    align-items: center;
    height: 28em;
   
    color: #ffffff;
  }
  .col-1,.col-2,.col-3{
    width: 20em;
    margin-left: 2%;
  }
  .col-1{
    margin-left: -1%;
  }
  .our-team .picture {
    margin:0 auto;
    display: block;
    height: 15em;
    width: 15em;
    margin-bottom: 15%;
    margin-top: 15%;
    z-index: 1;
    position: relative;
    
  }
  .our-team .name{
    font-size: 2em;
    font-weight: 100;
    margin-bottom: 5%;
  }

  .our-team:hover .picture::before {
    height: 100%;
  }
  
  .our-team .picture::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* background-color: #0029988f; */
    border: 0.05rem solid rgb(110, 122, 252);
    box-shadow: 0 0 15px 0#76a2ffa2;
    position: absolute;
    top: -1px;
    left: -0.8px;
    
  }
  
  .our-team .picture img {
    width: 100%;
    height: 100%;
    object-fit:cover;
    border-radius: 50%;
    transform: scale(1);
    transition: all 0.9s ease 0s;
  }
  
  .our-team:hover .picture img {
    box-shadow: 0 0 0 2px rgb(110, 122, 252);
    box-shadow: 0 0 15px 0 rgb(103, 198, 212);
    transform: scale(0.7);
  }
  
  .our-team .title {
    display: block;
    font-size:1.2em;
    color: #aafffb;
    text-transform: capitalize;
  }
  
  .our-team .social {
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #141e39b3;
    border: 0.05rem solid rgb(110, 122, 252);
    box-shadow: 0 0 15px 0#76a2ffa2;
    position: absolute;
    bottom: -100px;
    left: 0;
    transition: all 0.5s ease 0s;
   
  }
  

  
  .our-team .social li {
    display: inline-block;
    
  }
  
  .our-team .social li a {
    display: block;
    padding: 10px;
    font-size: 17px;
    color: white;
    transition: all 0.3s ease 0s;
    text-decoration: none;
    
  }
  
  .our-team .social li a:hover {
    color: #ffffff;
    /* background-color: #f7f5ec81; */
  }