@font-face {
    font-family: 'brlnsdb';
    src: url('https://static.igem.wiki/teams/5261/font/brlnsdb.woff')format('woff');
    font-weight: normal;
    font-style: normal;
}


.student-members {
    font-family: 'brlnsdb';
    font-size: 98px; /* 调整字体大小 */
    font-weight: bold; /* 加粗文本 */
    text-align: center; /* 居中对齐 */
    margin: 20px 0; /* 上下边距 */
}

.container-t {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 垂直对齐 */
    flex-wrap: wrap; /* 支持换行 */
    margin: 20px; /* 外边距 */
}

.box-t {
    background-color: #1a3d98; /* 盒子背景色 */
    border-radius: 15px; /* 圆角 */
    width: 200px; /* 盒子宽度 */
    margin: 50px; /* 盒子间距 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影 */
    text-align: center; /* 文本居中 */
}

.box-t img {
    width: 100%; /* 图片宽度适应盒子 */
    border-top-left-radius: 15px; /* 圆角 */
    border-top-right-radius: 15px; /* 圆角 */
}

.box-t p {
    padding: 10px; /* 内边距 */
    color: aliceblue;
}



.profile-section * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.profile-section {
    font-family: 'Arial', sans-serif;
    /* background-color: #62647d; */
    color: white;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column; /* 设置纵向布局 */
    gap: 150px; /* 增加容器之间的距离 */
    padding: 20px;
}

.profile-section .profile-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    gap: 100px; /* 固定容器之间的距离为 100px */
    width: 100%; /* 占满父容器的宽度 */
}

.profile-section .profile-card {
    background-color: #223044;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 300px; /* 固定卡片宽度 */
    position: relative;
}

.profile-section .profile-image {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    object-fit: cover; 
    object-position: center; 
}

.profile-section .profile-image-t {
    border-radius: 10%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    object-fit: cover; 
    object-position: center; 
}



.profile-section .profile-image-gyt {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/gyt.webp');
    background-size: cover; 
    background-repeat: no-repeat; 
    
    background-position: -29px -24px; 
    background-size: 120% auto;
}

.profile-section .profile-image-wxy {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/wxy.webp');
    background-size: cover; 
    background-repeat: no-repeat; 
    
    background-position: -15px -44px; 
    background-size: 120% auto;
}

.profile-section .profile-image-llq {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    /* 使用 background-image 替代 img 元素 */
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/llq.webp');
    background-size: cover; 
    background-repeat: no-repeat; 
    /* 以像素为单位调整背景图片的位置 */
    background-position: -5px -50px; 
    background-size: 110% auto; /* 放大背景图片到110% */
}

.profile-section .profile-image-chj {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    /* 使用 background-image 替代 img 元素 */
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/chj.webp');
    background-size: cover; 
    background-repeat: no-repeat; 
    /* 以像素为单位调整背景图片的位置 */
    background-position: -5px -50px; 
    background-size: 110% auto; /* 放大背景图片到110% */
}

.profile-section .profile-image-hzc {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    /* 使用 background-image 替代 img 元素 */
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/hzc.webp');
    background-size: cover; 
    background-repeat: no-repeat; 
    /* 以像素为单位调整背景图片的位置 */
    background-position: -5px -15px; 
    background-size: 110% auto; /* 放大背景图片到110% */
}

.profile-section .profile-image-cs {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/cs.webp');
    background-size: cover; 
    background-position: -5px -20px; 
    background-size: 107% auto; 
}

.profile-section .profile-image-zbw {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/zbw.webp');
    background-size: cover; 
    background-position: -5px -15px; 
    background-size: 100% auto; 
}

.profile-section .profile-image-xgc {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/xgc.webp');
    background-size: cover; 
    background-position: -14px -35px; 
    background-size: 123% auto; 
}

.profile-section .profile-image-myf {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/myf.webp');
    background-size: cover; 
    background-position: -2px -50px; 
    background-size: 103% auto; 
}

.profile-section .profile-image-cxy {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/cxy.webp');
    background-size: cover; 
    background-position: -17px -50px; 
    background-size: 117% auto; 
}

.profile-section .profile-image-zzy {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/zzy.webp');
    background-size: cover; 
    background-position: -19px -30px; 
    background-size: 117% auto; 
}

.profile-section .profile-image-zsy {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/zsy.webp');
    background-size: cover; 
    background-position: -15px -24px; 
    background-size: 117% auto; 
}

.profile-section .profile-image-zjl {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/zjl.webp');
    background-size: cover; 
    background-position: -7px -39px; 
    background-size: 117% auto; 
}

.profile-section .profile-image-zjl {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/zjl.webp');
    background-size: cover; 
    background-position: -7px -39px; 
    background-size: 117% auto; 
}

.profile-section .profile-image-wyz {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/wyz.webp');
    background-size: cover; 
    background-position: -20px -25px; 
    background-size: 124% auto; 
}



.profile-section .profile-image-pc {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/students/pc.webp');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: -20px -45px; 
    background-size: 120% auto; 
}

.profile-section .profile-image-ljc {
    border-radius: 10%;
    width: 180px;
    height: 180px;
    position: absolute;
    top: -110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/teachers/ljc.webp');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: -0px -15px; 
    background-size: 100% auto; 
}

.profile-section .profile-image-yhr {
    border-radius: 10%;
    width: 180px;
    height: 180px;
    position: absolute;
    top: -110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/teachers/yhr.webp');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 0px -20px; 
    background-size: 100% auto; 
}

.profile-section .profile-image-bzh {
    border-radius: 10%;
    width: 180px;
    height: 180px;
    position: absolute;
    top: -110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/teachers/bzh.webp');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 0px -10px; 
    background-size: 100% auto; 
}

.profile-section .profile-image-yld {
    border-radius: 10%;
    width: 180px;
    height: 180px;
    position: absolute;
    top: -110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/teachers/yld.webp');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 0px -10px; 
    background-size: 100% auto; 
}

.profile-section .profile-image-ztl {
    border-radius: 10%;
    width: 180px;
    height: 180px;
    position: absolute;
    top: -110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/teachers/instructor-ztl.webp');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: -36px -70px; 
    background-size: 150% auto; 
}

.profile-section .profile-image-jl {
    border-radius: 10%;
    width: 180px;
    height: 180px;
    position: absolute;
    top: -110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/teachers/instructor-jl.webp');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 0px -10px; 
    background-size: 100% auto; 
}

.profile-section .profile-image-gh {
    border-radius: 10%;
    width: 180px;
    height: 180px;
    position: absolute;
    top: -110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/teachers/instructor-gh.jpeg');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: -39px -60px; 
    background-size: 150% auto; 
}

.profile-section .profile-image-jxj {
    border-radius: 10%;
    width: 180px;
    height: 180px;
    position: absolute;
    top: -110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: rgb(244, 244, 244);
    background-image: url('https://static.igem.wiki/teams/5261/picture/members/teachers/advisor-jxj.jpeg');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: -3px -30px; 
    background-size: 120% auto; 
}

.profile-section h2 {
    color: #ffa500;
    font-size: 1.5rem;
    margin-top: 60px;
}

.profile-section .title {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.profile-section p {
    margin-bottom: 20px;
}

.profile-section .linkedin-icon {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    color: #0077b5;
    border-radius: 50%;
    padding: 10px;
    font-size: 1.5rem;
    text-decoration: none;
}

.slider-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* 容器宽度设置为100%，可以根据需要调整 */
    max-width: 1200px; /* 最大宽度，可根据需要调整 */
    margin: 0 auto; /* 水平居中 */
    position: relative; /* 设置为相对定位，以便箭头可以相对于它进行绝对定位 */
    padding: 20px; /* 容器内边距，可根据需要调整 */
  }
  
  .slider {
    width: 100%; /* 宽度设置为100%以填充容器 */
    height: 600px; /* 根据实际需要调整高度 */
    overflow: hidden; /* 隐藏超出slider容器的图片部分 */
    position: relative; /* 设置为相对定位，以便图片可以相对于它进行绝对定位 */
  }
  
  .slider ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  .slider ul li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 宽度设置为100%以填充slider */
    height: 100%; /* 高度设置为100%以填充slider */
    opacity: 0;
    transition: opacity 1s;
  }
  
  .slider ul li img {
    /* width: 100%; 
    height: auto;  */
    width: auto; 
    height: 100%; 
    position: absolute; /* 绝对定位，以填充li */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 通过变换实现真正的居中 */
  }
  
  .slider ul li.active {
    opacity: 1;
  }
  
  .slider-nav {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  
  .slider-nav span {
    cursor: pointer;
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    margin: 0 5px;
    border-radius: 50%;
  }
  
  .slider-nav span.active {
    background-color: #333;
  }

  .arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5); /* 设置半透明背景 */
    padding: 10px;
    z-index: 100;
    /* 添加额外的外边距 */
    margin: 0 10px; /* 根据需要调整外边距大小 */
  }
  
  .arrow.left {
    left: 0; /* 保持左边箭头的位置 */
  }
  
  .arrow.right {
    right: 0; /* 保持右边箭头的位置 */
  }