* {
    padding: 0;
    margin: 0;
  }
  
  body{
    /* background: linear-gradient(to right,#D8584D,#26204c); */
    font-family: 'Comic Sans MS', cursive;
    font-weight: bold!important;
    
  }
    
  .cards-box {
    display: flex;
    flex-direction: column;
    justify-content: top;
    max-height: 220vh; /* 例如，为其设置最小高度以确保页面填满屏幕 */

    align-items: center;
    left: 35%;
    width: 60%;
    top: 2vh;
    position: relative;
    /* 右侧头像卡片组的背景颜色 */
    background: linear-gradient(to bottom, #9ca5d7, #b9c0e1);
  
  }
  
  .card-box {
    flex: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    top: 0px;
    margin-bottom: 5%;
    width: 100%;
    background:transparent;
  }
  
  .ins-mem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.75rem;
    font-weight: bold;
    /* 文字框颜色 */
    background: #26204c;
    /* 文字颜色 */
    color: #f5f3ff;
    width: 35%;
    height: 50px;
    margin-top: 2%;
    margin-bottom: 2%;

    border-radius: 5px;
  }
  
  .card {
    perspective: 100px;
    /* 单张头像卡片的背景 */
    background-color: #ccc6e4; 
    border-radius: 10px;
    position: relative;
    flex: 1;
    display: block;
    margin: 0 2% 0 2%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  }
  
  
  .card-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .info {
    width: 100%;
    height: 86%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .head-sculpture {
    margin: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 隐藏超出容器的部分 */
  }
  
  .head-sculpture img {
    width: 90%; /* 图片宽度90%父元素 */
    height: 70%; /* 图片高度70%父元素 */
    object-fit: cover; /* 保持图片比例，并裁剪超出部分 */
    border-radius: 5%; /* 圆角边框 */
    margin: 0;
    position: relative;
    top: 0%;
}
  
  .card .card-content .info .rief-introduction {
    text-align: center;
    width: 100%;
  }
  
  .card .card-content .info .rief-introduction .name {
    font-family: 'Comic Sans MS', cursive;
    font-weight: 400;
    font-size: 1.5vw; 
    color: #26204c; /* 人名文字颜色 */
    white-space: normal; /* 允许换行 */
    display: flex; /* 使用 flex 布局 */
    justify-content: center; /* 中心对齐 */
    align-items: center; /* 垂直居中 */
    width: 100%; /* 确保宽度为100%以自适应父容器 */
    text-align: center; /* 文字居中对齐 */
}

  
  .card .card-content .info .rief-introduction .job {
    font-family: 'Comic Sans MS', cursive;
    font-size: 1.2vw;
    display: block;
  }
  
  .card .front {
    opacity: 1;
    position: absolute;
    z-index: 1;
    transition: 0.5s;
    backface-visibility: hidden;
  }
  
  .card:hover .front {
    transform: rotateY(-180deg);
  }
  
  
  .card .opposite {
    transform: rotateY(180deg);
    backface-visibility: hidden;
    transition: 0.5s;
    opacity: 1;
    position: absolute;
    z-index: 1;
  
  }
  
  .card:hover .opposite {
    transform: rotateY(0deg);
  
  }
  
  
  
  .opposite .head-sculpture img {
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
  }
  
  
  .btn {
    width: 70%;
    height: 13%;
    border: 2px solid #000;
    border-radius: 50px;
  
    cursor: pointer;
    background-color: rgb(183, 211, 232);
    font-size: 3vw;
    font-family: Butler_Black;
    transition: 0.5s;
  }
  
  .btn:hover {
    background-color: rgb(200, 229, 252);
  }
  
  .flip-left {
    animation: flip-left 0.5s linear both;
  }
  
  .flip-right {
    animation: flip-right 0.5s linear both;
  }
  
  @keyframes flip-left {
    0% {
      transform: translateX(0) rotateY(0) scale(1);
      transform-origin: 0% 50%;
    }
  
    50% {
      transform: translateX(-50%) rotateY(90deg) scale(1.1);
      transform-origin: 50% 50%;
    }
  
    100% {
      transform: translateX(-100%) rotateY(180deg) scale(1);
      transform-origin: 100% 50%;
    }
  }
  
  @keyframes flip-right {
    0% {
      transform: translateX(0) rotateY(0) scale(1);
      transform-origin: 100% 50%;
    }
  
    50% {
      transform: translateX(50%) rotateY(-90deg) scale(1.1);
      transform-origin: 50% 50%;
    }
  
    100% {
      transform: translateX(100%) rotateY(-180deg) scale(1);
      transform-origin: 0% 50%;
    }
  }
  
  .bigcardbox {
    width: 27%;
    height: auto;
    position:absolute;
    left: 5%;
    top: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .bigcard {
    position: absolute;
    height: 100%;
    opacity: 0;
    border-radius: 2%;
    display: flex;
    background-color: transparent;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s;
    z-index: 1;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    margin-top: 7vh;
    
    background:  #ccc6e4;
  }
  
  .backpic {
  
    z-index: 1;
    flex: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  
  }
  
  .backpic img {
    width: 120%;
    height: auto;
    margin-top: -30%;
  }
  
  .people {
      z-index: 2;
    top: 20px;
    position: absolute;
    width: 100%;
    height: 65%;
    display: flex;
    justify-content: center;
    align-items: center;
  
  }
  
  
  .bigcard .people img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 5%;
    padding: 10px;
    background-color: transparent;
    flex: 0;
  
  }
  
  /* 管左侧大卡左上角的字 */
  .bigcard-name {
    z-index: 2;
    font-family: 'Comic Sans MS', cursive;
    font-weight:unset;
    font-size: 1.8vw;
    background-color: transparent;
    border-radius: 3%;
    position: absolute;
    left: 0%;
    top: 1.5%;
    flex: 0;
    height: 6.5%;
    color: #26204c;
  }
  
  /* 管左侧大卡中间加框图 */
  .bigcard-job {
    width: 77%;
       position: absolute;
    border-radius: 5px;
    padding: 1%;
    top: 65%;
    flex: 0;
    z-index: 222;
    font-size: 2vw;
    height: 5%;
    background: #26204c;;
    color: #f5f3ff;
    text-align: center;
  }
  .bigcard-job p{
    position: relative;
    top: -50%;
  }
  
  
  /* 管左侧大卡底部小字 */
  .bigcard-intro {
    width: 80%;
    flex: 0;
    margin: 1%;
    height: 22%;
    padding: 5px;
    z-index: 22222;
    text-align: justify;
    text-align-last: left;
    position: absolute;
    font-size: 1vw;
    color: #26204c;
    background-color: transparent;
    border-radius: 5px;
    top: 70%
  }