body, html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

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


.sidebar {
  position: absolute;
  top: 1000px; 
  width: 250px; /* 导航栏宽度 */
  background-color: transparent; 
  margin-left: -150px;
}

.sidebar ul {
  list-style-type: none;
  padding: 5;
}

.sidebar ul li a {
  display: block;
  padding: 10px 15px; /* 增加左右内边距 */
  text-decoration: none;
  color: #687bde;
  border-left: 3px solid transparent; /* 左侧边框，初始为透明 */
  transition: background-color 0.3s, border-color 0.3s; /* 过渡效果 */
  font-size: 15px;
  font-weight: 700;
}

.sidebar ul li a:hover, .sidebar ul li a.active {
  background-color: #e6e6ff; /* 悬浮和激活状态的背景颜色 */
  border-left-color: #5ab8cf; /* 悬浮和激活状态的左侧边框颜色 */
  color: #333; /* 悬浮和激活状态的文本颜色 */
}


.content {
  margin-left: 110px;
  margin-right: -10px;
  padding: 20px;
}



.content .image-container {
  text-align: center; /* 仅在这个容器内水平居中图片 */
  padding: 20px;
  width: 100%;
}

.content .myimage-container {
  text-align: center; /* 仅在这个容器内水平居中图片 */
  padding: 20px;
  width: 100%;
}



.content .section{
  font-size: 40px;
  font-family: 'newFont', sans-serif;
  border-bottom: 3px solid #716bdd;
  margin-bottom: 0px;
  padding-top: 20px;    /* 上内边距 */
  padding-right: 20px;  /* 右内边距 */
  padding-bottom: 20px; /* 下内边距 */
  padding-left: 20px;   /* 左内边距 */
}

.content .title1{
  font-size: 35px;
  font-family: 'newFont', sans-serif;
  padding: 20px;
  /* margin-top: -30px; */
  margin-bottom: -30px;
}

.content .title2{
  font-size: 30px;
  font-family: 'newFont', sans-serif;
  padding: 0px;
  margin-left: 20px;
  margin-bottom: 0px;
  margin-top: 10px;
}


.content .part{
  font-size: 22px;
  /* font-family: 'newFont', sans-serif; */
  padding: 20px;
  margin-left: 40px;
  margin-bottom: -30px;
  font-weight: bold; 
  /* margin-top: 40px; */
}

.content .special-part{

font-size: 22px;
padding: 20px;
/* margin-top: -30px; */
margin-bottom: -30px;
font-weight: bold; 
}


.content .plain{
/* font-family: 'micross'; */

  font-size: 22px;
  padding: 20px;
  /* margin-top: -10px; */
  margin-bottom: -30px;
  line-height: 1.6;
}

.content .plain-math{
  font-size: 20px;
  padding: 20px;
  /* margin-top: -10px; */
  margin-bottom: -10px;
  text-align: center;
}

.content .plain-part{
  font-size: 22px;
  padding: 20px;
  margin-left: 40px;
  margin-top: -20px;
  margin-bottom: -30px;
  line-height: 1.6;
}

.content  .unber-pic {
  text-align: center; 
  font-size: 20px;
}

.content ol ul {
  font-family: 'Arial', sans-serif; /* 设置字体类型 */
  font-size: 20px; /* 设置字体大小 */
  font-style: normal; /* 设置字体样式，如正常、斜体等 */
  margin-left:-20px;
  padding: 3px;
}


.content .twopic-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.content .twopic-image{
  text-align: center; /* 使图片和标题居中 */
  margin: 0 60px; /* 图片之间的间隔 */
}

.content .one-of-image-250 {
  padding: 10px;
  width: 250px;
  height: 250px; /* 保持图片的宽高比 */
}

.content .one-of-image-61 {
  padding: 10px;
  width: 250px;
  height: 250px; /* 保持图片的宽高比 */
}

.content .one-of-image-62 {
  padding: 0px;
  
  width: 330px;
  height: auto; /* 保持图片的宽高比 */
}

.content .one-of-image-71 {
  padding: 10px;
  width: 380px;
  height: auto; /* 保持图片的宽高比 */
}

.content .one-of-image-72 {
  padding: 0px;
  
  width: 300px;
  height: auto; /* 保持图片的宽高比 */
}

.content .one-of-image-241 {
  padding: 0px;
  
  width: 400px;
  height: auto; /* 保持图片的宽高比 */
}

.content .one-of-image-242 {
  padding: 0px;
  
  width: 320px;
  height: auto; /* 保持图片的宽高比 */
}

.content .one-of-image-title {
  padding: 10px;
  font-size: 16px; /* 标题字体大小 */
  margin-top: 8px; /* 标题与图片的间隔 */
}



.content .mytable {
  width: 80%;
  border-collapse: collapse;
  /* text-align: center; */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 0 auto; /* 水平居中 */
  
}
.content th, .content td {
  padding: 15px;
  text-align: center;
}
.content th {
  background-color: #667eea;
  color: white;
}
.content tr:nth-child(even) {
  background-color: #f9fafb;
}
.content tr:hover {
  background-color: #ebf4ff; /* 鼠标悬停时的背景颜色 */
}


.content  .p4container {
  display: flex;
  align-items: flex-start; /* 使子项在交叉轴的起始位置对齐 */
}

.content  .p4large-image {
  max-width: 75.87%;  
  height: auto; 
}

.content  .p4small-images {
  flex: 1; /* 小图区域也占剩余空间 */
  display: flex;
  flex-direction: column; /* 小图纵向排列 */
  justify-content: space-between; /* 纵向间距均匀分布 */
}

.content  .p4small-image {
  width: 100%; /* 小图宽度填满容器 */
  height: auto; /* 高度自动，保持图片的纵横比 */
}

.content .my-pdf-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  max-width: 80%;
  height: 700px;
  margin: auto; /* 水平居中 */
  border: 1px solid #ccc;
}