.pagecontainer {
    top: 20px;
    display: flex;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    /* 使子元素垂直排列 */
  }

  .content1 {
    margin-top: 65px;
    box-sizing: border-box;
    width: 100%;
    /* 设置宽度，确保内容区域不会太宽 */
    margin-left: auto;
    /* 自动调整左边距 */
    margin-right: auto;
    /* 自动调整右边距 */
    /* max-width: 1200px; */
    /* 设置最大宽度，防止内容溢出 */
    flex-grow: 1;
    /* 允许内容区域填充剩余空间 */
  }

.team-pagecontent {
    background-image: url(https://static.igem.wiki/teams/5142/home/wikihome.png);

    background-size: 100%;
  }
  
  .box1 {
  
    width: 100%;
    height: 30%;
    overflow: hidden;
  }
  
  .box1 .son {
    margin-left: 36%;
    margin-top: 24%;
    width: 57%;
    height: 33%;
  
    display: flex;
    justify-content: space-between;
  }
  
  .box1 .son .left {
    width: 90%;
  
  }
  
  .box1 .son .right {
    margin-top: -9.6%;
    width: 110%;
    transition: all .5s;
  }
  
  .box1:hover .right {
    transform: translateX(-17%);
  }
  
  .box2 {
  
    width: 100%;
    height: 22%;
    overflow: hidden;
  }
  
  .box2 .son {
  
    width: 45%;
    height: 70%;
    margin-top: 7%;
    margin-left: 5%;
    /* overflow: hidden; */
  }
  
  .box2 .son .pic1 {
    width: 16%;
    height: 25%;
    margin-top: -13%;
    margin-left: -3%;
  }
  
  .box2 .son .pic2 {
    width: 16%;
    height: 25%;
    margin-top: -13%;
    margin-left: 67%;
    perspective: 800px;
  }
  
  .box2 .son .pic3 {
    width: 16%;
    height: 25%;
    margin-top: 27%;
    margin-left: 28%;
  }
  
  .box2 .son .pic4 {
    width: 16%;
    height: 25%;
    margin-top: -36%;
    margin-left: 69%;
  }
  
  .box2 .son .pic1 img {
    transform-origin: 46% 50%;
    transition: all .5s;
  }
  
  .box2 .son .pic2 img {
    transition: all .5s;
  }
  
  .box2 .son .pic3 img {
    transition: all .5s;
  }
  
  .box2 .son .pic4 img {
    transition: all .5s;
  }
  
  .box2:hover .pic1 img {
    transform: rotate(180deg);
  }
  
  .box2:hover .pic2 img {
    transform: translateZ(100px);
  }
  
  .box2:hover .pic3 img {
    transform: translate(10%, 10%)
  }
  
  /* .box2 .son:hover .pic4 img {} */
  
  .box3 {
  
    width: 100%;
    height: 12%;
  
    overflow: hidden;
  }
  
  .box3 .son {
    margin-left: 54%;
    margin-top: 5%;
    width: 40%;
    height: 65%;
  
  }
  
  .box3 .son .virus {
    margin-left: 20%;
    width: 65%;
    height: 97%;
    background-image: url(https://static.igem.wiki/teams/5142/home/2.png);
    background-size: 100%;
  }
  
  .box3 .son .virus img {
    width: 80%;
    margin-left: 13%;
    margin-top: 6%;
    transition: 1s;
    opacity: 0;
  }
  
  .box3 .son:hover img {
    opacity: 1;
  }
  
  .box4 {
  
    width: 100%;
    height: 17%;
  }
  
  .box5 {
    width: 100%;
    height: 14%;
    overflow: hidden;
  }
  
  .box5 .son {
    width: 45%;
    height: 62%;
    margin-top: 5%;
    margin-left: 56%;
  }
  
  .box5 .son .left {
    width: 106%;
    margin-left: 1%;
    margin-top: 7%;
    transition: all .5s;
  }
  
  .box5 .son .right {
    width: 108%;
    margin-left: 9%;
    margin-top: -29%;
    transition: all .5s;
  }
  
  .box5:hover .left {
    transform: translate(15%);
  }
  
  .box5:hover .right {
    transform: translate(-15%);
  }