.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;

}

.container {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.background{
    background-image: linear-gradient(to bottom, #61ABAB, #39578A, rgb(0, 0, 0));
}
.corner-image {
  position: absolute;
  height: 100%; /* Set height to 100% of the parent container */
  width: 45%; /* Maintain aspect ratio */
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}

.container-member img {
  width: 50%; /* 宽度占父容器的80% */
  max-width: 100%; /* 确保图片不会超过容器宽度 */
  height: auto; /* 保持图片的宽高比 */
  position: absolute;
  top: 0; /* 保证图片位于父容器的顶部 */
  left: 50%; /* 左边缘移动到容器中点 */
  transform: translateX(-50%); /* 使图片水平居中 */
  margin-top: 0; /* 确保图片紧贴顶部 */
}

.welcome {
  width: 60vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  margin-left: 17vw;
  font-size: 80px;
  font-family: Comic Sans Ms;
}

.container-pv {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding-top: -50px;    /* 将上边距设置为较小的值 */
  padding-bottom: 80px;
}

.pv {
  position: relative;
  width: 60%;
  margin: auto;
  padding: 20px 0; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.pv-text {
  width: 60vw;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直方向居中 */
  align-items: center; /* 水平方向居中 */
  margin: 2vh auto 0; /* 上外边距200px, 左右居中 */
  font-family: 'Comic Sans Ms';
  padding-bottom: 3vh;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: calc(100% / (560 / 315));
  /* 根据视频的宽高比例计算容器的高度 */
}

#videoFrame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container-member {
  display: flex;
  flex-direction: row; /* 水平排列 */
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-bottom: 10vh;
}

.card {
    display: flex; 
    flex-direction: row; /* 水平排列 */
}
 
.card img {
    width: 8vw;
    padding-top: 8vh;
    transition: opacity 0.3s;
}

.card0{
    position: relative;
    width: 28vw; /* 适当的宽度 */
    height: 33vh; /* 适当的高度 */
    flex: 1 1 300px;
    border-radius: 20px; /* 圆角边框 */
    overflow: hidden; /* 超出部分隐藏 */
    background-color: #ffffff; /* 卡片背景色 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    transition: background-color 1s; /* 背景颜色平滑过渡 */
    margin-right: 2vw;
}
 
.card1{
    position: relative;
    width: 28vw; /* 适当的宽度 */
    height: 33vh; /* 适当的高度 */
    flex: 1 1 300px;
    border-radius: 20px; /* 圆角边框 */
    overflow: hidden; /* 超出部分隐藏 */
    background-color: #ffffff; /* 卡片背景色 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    transition: background-color 1s; /* 背景颜色平滑过渡 */
    margin-right: 2vw;
    z-index: 1;
}

.card2{
    position: relative;
    width: 28vw; /* 适当的宽度 */
    height: 33vh; /* 适当的高度 */
    flex: 1 1 300px;
    border-radius: 20px; /* 圆角边框 */
    overflow: hidden; /* 超出部分隐藏 */
    background-color: #ffffff; /* 卡片背景色 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    transition: background-color 1s; /* 背景颜色平滑过渡 */
    margin-right: 2vw;
    z-index: 1;
}

.card3{
    position: relative;
    width: 28vw; /* 适当的宽度 */
    height: 33vh; /* 适当的高度 */
    flex: 1 1 300px;
    border-radius: 20px; /* 圆角边框 */
    overflow: hidden; /* 超出部分隐藏 */
    background-color: #ffffff; /* 卡片背景色 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    transition: background-color 1s; /* 背景颜色平滑过渡 */
    margin-right: 2vw;
    z-index: 1;
}

.description {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center; /* 中心对齐 */
    align-items: center; /* 中心对齐 */
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
    transition: opacity 0.3s; /* 透明度过渡效果 */
    text-align: center; /* 文字居中 */
    padding: 20px; /* 内边距 */
    background-image: url("https://static.igem.wiki/teams/5549/members/members-background2.webp");
    background-size: cover;
}
.description img {
    margin-top:1.2vh;
    margin-bottom:0.8vh;
}
.description h4{
    margin-top: 0.3vh;
    font-size:19px;
    line-height: 1.1;   
}
.description h5{
    margin-top: 1vh;
    font-size:17px;
    line-height: 1.1;   
} 
.description p{
    margin-top: 17vh;   
} 

.profile-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center; /* 中心对齐 */
    align-items: center; /* 中心对齐 */
    opacity: 1;
    transition: opacity 0.3s; /* 透明度过渡效果 */
    text-align: center; /* 文字居中 */
    padding: 20px; /* 内边距 */
    background-image: url("https://static.igem.wiki/teams/5549/members/members-background1.webp");
    background-size: cover;
}
.profile-image img{
    margin-top: -0.5vh;
    width:32%;
} 
.profile-image h5{
    margin-top: 2vh;   
    z-index: 10;
    font-size:19px;
} 
.profile-image p{
    margin-top: 17vh;   
} 

.card0:hover .profile-image {
    opacity: 0; /* 当悬停时，将图片透明度设置为 0 */
} 
.card0:hover .description {
    opacity: 1; /* 当悬停时，将描述透明度设置为 1 */
}
.card1:hover .profile-image {
    opacity: 0; /* 当悬停时，将图片透明度设置为 0 */
} 
.card1:hover .description {
    opacity: 1; /* 当悬停时，将描述透明度设置为 1 */
}
.card2:hover .profile-image {
    opacity: 0; /* 当悬停时，将图片透明度设置为 0 */
} 
.card2:hover .description {
    opacity: 1; /* 当悬停时，将描述透明度设置为 1 */
}
.card3:hover .profile-image {
    opacity: 0; /* 当悬停时，将图片透明度设置为 0 */
} 
.card3:hover .description {
    opacity: 1; /* 当悬停时，将描述透明度设置为 1 */
}

.scroll-image {
    position: absolute;
    top: 80vh; 
    left:-25vw;
    opacity: 1;
    transition: opacity 0.5s ease; /* 过渡效果 */
    width: 70vw; /* 设定图片宽度 */
    height: auto; /* 保持宽高比 */
} 
.scroll-image.visible {
    opacity: 1; /* 显示图片 */
}
.background-img1{
    width: 100%;
    height: auto;
    margin-top: 5vh;
    margin-bottom: -0.1vh;
}
.background-bubbles{
    position: absolute;
    width:100%;
    top: 715vh;
    z-index: 0;
}

@media (max-width: 768px) {
    .card {
        flex: 1 1 100%; /* 一行只显示一个卡片 */
    }
 
    .fenlei {
        text-align: center; /* 居中标题 */
    }
 
    .container-member {
        flex-direction: column; /* 容器垂直排列 */
        align-items: center; /* 居中对齐 */
    }
}