@font-face {
  font-family: AlibabaPuHuiTi;
  src: url(https://static.igem.wiki/teams/4594/wiki/alibabafont.ttf);
}
@font-face {
  font-family: Arlon;
  src: url(https://static.igem.wiki/teams/4594/wiki/arlonfont.otf);
}
@font-face {
  font-family: xiangsu;
  src: url(https://static.igem.wiki/teams/5391/xiangsu.ttf);
}
body {
  overflow-x: hidden;
}
.homepage-holder {
  /* it holds and expands the whole homepage */
  margin: 0 auto;
  width: max(100%, 1300px);
  /*上科大幕布长度为固定长度*/
  height: 10660px;
  background-color: rgb(252, 247, 247);
  /* the following codes make all boxes placed in center */
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: space-around;
}

/*下列所有样式中，务必加入position：absolute样式*/
/*在此主页文件z-index中，背景遮罩层为0，背景层为-1，导航层为10，其余元素位于区域中间*/

/* for canvas */
#tutorial {
  position: absolute;
  z-index: 5;
  top: 700px;
}

/* shelter for background1 */
.shelter-for-bg1 {
  position: absolute;
  margin: 0 auto;
  top: 980px;
  width: 300px;
  height: 300px;
  box-shadow: 0px 0px 30px 20px black;
  background-color: black;
  z-index: 6;
}
/*整个页面的副标题和文本字体样式*/
.homepage-subtitle-style {
  margin: 0 auto;
  text-align: left;
  color: rgb(193, 0, 93);
  font-family: 'xiangsu', Arial, sans-serif;
  font-size: 40.625px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  font-variant-ligatures: none; /* 禁用连字 */
}

.homepage-subtitle-style2 {
  margin: 0 auto;
  text-align: left;
  color: rgb(255, 163, 172); /*F8F0E8*/
  font-family: 'xiangsu', Arial, sans-serif;
  font-size: 30.625px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  font-variant-ligatures: none; /* 禁用连字 */
}

.homepage-contents-style {
  margin: 0 auto;
  margin-top: 15px;
  text-align: justify; /* 两端对齐 */
  text-justify: inter-word;
  hyphens: auto;
  word-spacing: 0.05em;
  /* text-align: left;左侧对齐 */
  /*初版 wyc dsb*/
  color: rgb(255, 107, 144);
  /* font-family: AlibabaPuHuiTi; */
  font-family: xiangsu;
  font-size: 30.313px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.homepage-contents-style2 {
  margin: 0 auto;
  margin-top: 15px;
  text-align: justify; /* 两端对齐 */
  text-justify: inter-word;
  hyphens: auto;
  word-spacing: 0.05em;
  /* text-align: left;左侧对齐 */
  /*初版 wyc dsb*/
  color: rgb(255, 163, 172);
  /* font-family: AlibabaPuHuiTi; */
  font-family: Xiangsu;
  font-size: 35.313px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  /* text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5); 添加阴影 */
}

/*大部分图片的层数位于页面的第九层*/
.homepage-elements {
  /* not for backgrounds!! */
  position: absolute;
  z-index: 9;
}
/*将小元素图片设置为第十层，模拟大肠上感染体*/
.homepage-elements2 {
  /* not for backgrounds!! */
  position: absolute;
  z-index: 10;
}

/* main title style: */
.homepage-maintitle {
  top: 260px;
  width: 1300px;
  height: 400px;
}
.homepage-maintitle-name {
  margin: 0 auto;
  margin-top: 5px;
  width: 1300px;
  height: 200px;
  color: #402811;
  text-align: center;
  font-feature-settings: 'liga' off;
  font-family: Arlon;
  font-size: 100px;
  font-style: normal;
  font-weight: 600;
}

/*主界面图片格式*/

.homepage-content-img1 {
  top: 250px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 1300px;
  height: 318px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-maintitle.png'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* transition: all 0.5s linear; */
}

.homepage-content-img2 {
  top: 700px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 1300px;
  height: 732px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-xin2.jpg'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* transition: all 0.5s linear; */
}

.homepage-content-img3 {
  top: 1500px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 1200px;
  height: 670px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/homepage-3.jpg'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* transition: all 0.5s linear; */
}

.homepage-content-img4 {
  top: 2350px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 1300px;
  height: 750px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/homepage-4.jpg'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* transition: all 0.5s linear; */
}

.homepage-content-img5 {
  top: 3150px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 1300px;
  height: 750px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-5.jpg'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* transition: all 0.5s linear; */
}

.homepage-content-img6 {
  top: 4000px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 1182px;
  height: 682px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-6.jpg'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* transition: all 0.5s linear; */
}

.homepage-content-img7 {
  top: 4750px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 1182px;
  height: 682px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-xin.jpg'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* transition: all 0.5s linear; */
}

.homepage-content-img8 {
  top: 5500px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 1300px;
  height: 750px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-8.jpg'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* transition: all 0.5s linear; */
}

.homepage-content-img9 {
  top: 6250px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 1300px;
  height: 750px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-9.jpg'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* transition: all 0.5s linear; */
}

.homepage-content-img10 {
  top: 7150px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 1300px;
  height: 750px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-10.jpg'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* transition: all 0.5s linear; */
}

.homepage-content-img11 {
  top: 7950px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 1300px;
  height: 750px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-11.jpg'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* transition: all 0.5s linear; */
}

.homepage-content-img16 {
  top: 9270px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(30%);
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-linkbg.png'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* background-color: rgb(234, 200, 244);  */
  /* transition: all 0.5s linear; */
}

.homepage-content-img17 {
  top: 8990px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(85%);
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-linkbg.png'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* background-color: rgb(234, 200, 244);  */
  /* transition: all 0.5s linear; */
}

.homepage-content-img18 {
  top: 8990px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-linkbg.png'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* background-color: rgb(234, 200, 244);  */
  /* transition: all 0.5s linear; */
}
.homepage-content-img19 {
  top: 9270px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(165%);
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-linkbg.png'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* background-color: rgb(234, 200, 244);  */
  /* transition: all 0.5s linear; */
}
.homepage-content-img20 {
  top: 9670px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 1800px;
  height: 1000px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-gai.jpg'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* background-color: rgb(234, 200, 244);  */
  /* transition: all 0.5s linear; */
  z-index: 3;
}
.homepage-content-img21 {
  top: 10340px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 512px;
  height: 270px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-girls.png'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  /* background-color: rgb(234, 200, 244);  */
  /* transition: all 0.5s linear; */
  z-index: 3;
}
.homepage-content-img22 {
  top: 10070px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-50%);
  width: 1200px;
  height: 130px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-lasttitle.png'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  /* background-color: rgb(234, 200, 244);  */
  /* transition: all 0.5s linear; */
  z-index: 3;
}
.homepage-content-img23 {
  top: 7253px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-15%);
  width: 600px;
  height: 351px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/zhiliao.png'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  z-index: 9;
}
.homepage-content-img24 {
  top: 8113px;
  left: 50%; /* 左侧对齐到容器的中间 */
  transform: translateX(-49%);
  width: 721px;
  height: 337px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url('https://static.igem.wiki/teams/5391/wiki/zisha.png'),
    no-repeat, center, center;
  background-size: contain; /* 背景图片等比例缩小 */
  opacity: 0;
  z-index: 9;
}

/*主界面文本框样式*/

.homepage-content1 {
  top: 980px;
  transform: translateX(82%);
  width: 640px;
  height: 450px;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content2 {
  top: 1050px;
  transform: translateX(-78%);
  width: 640px;
  height: 450px;
  opacity: 0;
  transition: all 0.5s linear;
}
.homepage-content3 {
  top: 1630px;
  transform: translateX(40%);
  width: 840px;
  height: 350px;
  opacity: 0;
  transition: all 0.5s linear;
}
.homepage-content4 {
  top: 2170px;
  transform: translateX(-40%);
  width: 840px;
  height: 350px;
  opacity: 0;
  transition: all 0.5s linear;
}
.homepage-content5 {
  top: 2170px;
  transform: translateX(40%);
  width: 840px;
  height: 350px;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content6 {
  top: 2770px;
  transform: translateX(40%);
  width: 840px;
  height: 350px;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content7 {
  top: 3330px;
  transform: translateX(-40%);
  width: 840px;
  height: 350px;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content8 {
  top: 4030px;
  transform: translateX(0%);
  width: 1040px;
  height: 350px;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content9 {
  top: 4530px;
  transform: translateX(30%);
  width: 1040px;
  height: 350px;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content10 {
  top: 5462px;
  transform: translateX(-40%);
  width: 1040px;
  height: 350px;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content11-1 {
  top: 5962px;
  transform: translateX(-40%);
  width: 1040px;
  height: 350px;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content11-2 {
  top: 5962px;
  transform: translateX(40%);
  width: 1040px;
  height: 350px;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content12 {
  top: 6600px;
  transform: translateX(25%);
  width: 1040px;
  height: 350px;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content13 {
  top: 7460px;
  transform: translateX(-45%);
  width: 1040px;
  height: 350px;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content14 {
  top: 8160px;
  transform: translateX(50%);
  width: 1040px;
  height: 350px;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content15 {
  top: 9060px;
  transform: translateX(0%);
  width: 1040px;
  height: 350px;
  opacity: 0;
  transition: all 0.5s linear;
  background: #cb8df1;
  border-radius: 33.854px;
}

/* 定义svg动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#homepage-zl1 {
  animation: rotate 6s linear infinite; /* 应用旋转动画，4秒钟完成一圈，线性旋转，无限循环 */
  width: 150px; /* 设置SVG的宽度 */
  height: 150px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 160px; /* 将元素定位到容器的顶部 */
  right: 100px; /* 将元素定位到容器的右侧 */
  z-index: 10;
}
#homepage-zl2 {
  animation: rotate 6s linear infinite; /* 应用旋转动画，4秒钟完成一圈，线性旋转，无限循环 */
  width: 150px; /* 设置SVG的宽度 */
  height: 150px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 510px; /* 将元素定位到容器的顶部 */
  left: 100px; /* 将元素定位到容器的右侧 */
  z-index: 10;
}
#homepage-zl3 {
  animation: rotate 6s linear infinite; /* 应用旋转动画，4秒钟完成一圈，线性旋转，无限循环 */
  width: 90px; /* 设置SVG的宽度 */
  height: 90px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 190px; /* 将元素定位到容器的顶部 */
  right: 600px; /* 将元素定位到容器的右侧 */
  z-index: 10;
}
#homepage-zl4 {
  animation: rotate 6s linear infinite; /* 应用旋转动画，4秒钟完成一圈，线性旋转，无限循环 */
  width: 150px; /* 设置SVG的宽度 */
  height: 150px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 530px; /* 将元素定位到容器的顶部 */
  right: 190px; /* 将元素定位到容器的右侧 */
}
#homepage-star1 {
  animation: rotate 4s linear infinite; /* 应用旋转动画，4秒钟完成一圈，线性旋转，无限循环 */
  width: 150px; /* 设置SVG的宽度 */
  height: 150px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 1380px; /* 将元素定位到容器的顶部 */
  left: 100px; /* 将元素定位到容器的右侧 */
}
#homepage-star2 {
  animation: rotate 4s linear infinite; /* 应用旋转动画，4秒钟完成一圈，线性旋转，无限循环 */
  width: 150px; /* 设置SVG的宽度 */
  height: 150px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 880px; /* 将元素定位到容器的顶部 */
  left: 50px; /* 将元素定位到容器的右侧 */
}
#homepage-star3 {
  animation: rotate 4s linear infinite; /* 应用旋转动画，4秒钟完成一圈，线性旋转，无限循环 */
  width: 150px; /* 设置SVG的宽度 */
  height: 150px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 1180px; /* 将元素定位到容器的顶部 */
  right: 50px; /* 将元素定位到容器的右侧 */
}
#homepage-light {
  width: 200px; /* 设置SVG的宽度 */
  height: 200px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 1680px; /* 将元素定位到容器的顶部 */
  /* 将元素的中心移到定位点 */
}

/*闪烁动画效果*/
/* 星星的闪烁动画 */
@keyframes starTwinkle {
  0%,
  100% {
    opacity: 1; /* 星星显示 */
  }
  50% {
    opacity: 0; /* 星星隐藏 */
  }
}

/* 光芒的闪烁动画 */
@keyframes glowTwinkle {
  0%,
  100% {
    opacity: 0; /* 光芒隐藏 */
  }
  50% {
    opacity: 1; /* 光芒显示 */
  }
}

/* 星星样式 */
#xingxing {
  animation: starTwinkle 1s infinite; /* 1秒内交替闪烁 */
  width: 80px; /* 设置星星的宽度 */
  height: 80px; /* 设置星星的高度 */
  position: absolute;
  top: 9930px; /* 设置星星的位置 */
  right: 300px; /* 设置星星的位置 */
  background-image: url('https://static.igem.wiki/teams/5391/xingxing.svg'); /* 星星的图像 */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
}

/* 光芒样式 */
#guangmang {
  animation: glowTwinkle 1s infinite; /* 1秒内交替闪烁 */
  width: 80px; /* 设置光芒的宽度 */
  height: 80px; /* 设置光芒的高度 */
  position: absolute;
  top: 9930px; /* 设置光芒的位置 */
  right: 300px; /* 设置光芒的位置 */
  background-image: url('https://static.igem.wiki/teams/5391/guangmang.svg'); /* 光芒的图像 */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
}

/* 星星样式 */
#xingxing1 {
  animation: starTwinkle 1s infinite; /* 1秒内交替闪烁 */
  width: 80px; /* 设置星星的宽度 */
  height: 80px; /* 设置星星的高度 */
  position: absolute;
  top: 9970px; /* 设置星星的位置 */
  left: 200px; /* 设置星星的位置 */
  background-image: url('https://static.igem.wiki/teams/5391/xingxing.svg'); /* 星星的图像 */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
}

/* 光芒样式 */
#guangmang1 {
  animation: glowTwinkle 1s infinite; /* 1秒内交替闪烁 */
  width: 80px; /* 设置光芒的宽度 */
  height: 80px; /* 设置光芒的高度 */
  position: absolute;
  top: 9970px; /* 设置光芒的位置 */
  left: 200px; /* 设置光芒的位置 */
  background-image: url('https://static.igem.wiki/teams/5391/guangmang.svg'); /* 光芒的图像 */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
}
/* 星星样式 */
#xingxing2 {
  animation: starTwinkle 1s infinite; /* 1秒内交替闪烁 */
  width: 80px; /* 设置星星的宽度 */
  height: 80px; /* 设置星星的高度 */
  position: absolute;
  top: 10270px; /* 设置星星的位置 */
  left: 400px; /* 设置星星的位置 */
  background-image: url('https://static.igem.wiki/teams/5391/xingxing.svg'); /* 星星的图像 */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
}

/* 光芒样式 */
#guangmang2 {
  animation: glowTwinkle 1s infinite; /* 1秒内交替闪烁 */
  width: 80px; /* 设置光芒的宽度 */
  height: 80px; /* 设置光芒的高度 */
  position: absolute;
  top: 10270px; /* 设置光芒的位置 */
  left: 400px; /* 设置光芒的位置 */
  background-image: url('https://static.igem.wiki/teams/5391/guangmang.svg'); /* 光芒的图像 */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
}
/* 星星样式 */
#xingxing3 {
  animation: starTwinkle 1s infinite; /* 1秒内交替闪烁 */
  width: 80px; /* 设置星星的宽度 */
  height: 80px; /* 设置星星的高度 */
  position: absolute;
  top: 10330px; /* 设置星星的位置 */
  right: 250px; /* 设置星星的位置 */
  background-image: url('https://static.igem.wiki/teams/5391/xingxing.svg'); /* 星星的图像 */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
}

/* 光芒样式 */
#guangmang3 {
  animation: glowTwinkle 1s infinite; /* 1秒内交替闪烁 */
  width: 80px; /* 设置光芒的宽度 */
  height: 80px; /* 设置光芒的高度 */
  position: absolute;
  top: 10330px; /* 设置光芒的位置 */
  right: 250px; /* 设置光芒的位置 */
  background-image: url('https://static.igem.wiki/teams/5391/guangmang.svg'); /* 光芒的图像 */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
}

/*定义交互性动画*/
.slide-in-bck-left1 {
  -webkit-animation: slide-in-bck-left 0.6s;
  animation: slide-in-bck-left 0.6s;
}
@keyframes slide-in-bck-left {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.fade-in {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 定义浮动动画 */
@keyframes floatAndTilt {
  0%,
  100% {
    transform: translateY(0) rotate(0deg); /* 初始位置和角度 */
  }
  25% {
    transform: translateY(-10px) rotate(22deg); /* 上浮10px，顺时针旋转15度 */
  }
  75% {
    transform: translateY(10px) rotate(-22deg); /* 下沉10px，逆时针旋转15度 */
  }
}
@keyframes floatAndTilt1 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg); /* 初始位置和角度 */
  }
  25% {
    transform: translateY(-10px) rotate(45deg); /* 上浮10px，顺时针旋转15度 */
  }
  75% {
    transform: translateY(10px) rotate(-45deg); /* 下沉10px，逆时针旋转15度 */
  }
}
@keyframes floatAndTilt2 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg); /* 初始位置和角度 */
  }
  25% {
    transform: rotate(20deg); /* 顺时针旋转15度 */
  }
  75% {
    transform: rotate(-20deg); /* 逆时针旋转15度 */
  }
}

/* 应用新动画的样式 */
#floating-pill {
  animation: floatAndTilt1 3s ease-in-out infinite; /* 3秒上下浮动并倾斜，平滑过渡，无限循环 */
  width: 80px; /* 设置SVG的宽度 */
  height: 80px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 160px; /* 将元素定位到容器的顶部 */
  left: 130px; /* 将元素定位到容器的左侧 */
}

#floating-pill1 {
  animation: floatAndTilt 2s ease-in-out infinite; /* 3秒上下浮动并倾斜，平滑过渡，无限循环 */
  width: 80px; /* 设置SVG的宽度 */
  height: 80px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 460px; /* 将元素定位到容器的顶部 */
  right: 125px; /* 将元素定位到容器的左侧 */
}

#floating-yaowan1 {
  animation: floatAndTilt1 5s ease-in-out infinite; /* 3秒上下浮动并倾斜，平滑过渡，无限循环 */
  width: 160px; /* 设置SVG的宽度 */
  height: 160px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 5990px; /* 将元素定位到容器的顶部 */
  right: 250px; /* 将元素定位到容器的左侧 */
  z-index: 9;
}

#floating-yaowan2 {
  animation: floatAndTilt 4s ease-in-out infinite; /* 3秒上下浮动并倾斜，平滑过渡，无限循环 */
  width: 160px; /* 设置SVG的宽度 */
  height: 160px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 5980px; /* 将元素定位到容器的顶部 */
  left: 280px; /* 将元素定位到容器的左侧 */
  z-index: 9;
}

#dazhenguan {
  animation: floatAndTilt 2s ease-in-out infinite; /* 3秒上下浮动并倾斜，平滑过渡，无限循环 */
  width: 200px; /* 设置SVG的宽度 */
  height: 200px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 5580px; /* 将元素定位到容器的顶部 */
  right: 160px; /* 将元素定位到容器的左侧 */
  z-index: 10;
}

/*字体浮动效果*/
@keyframes floatUpDown {
  0%,
  100% {
    transform: translateY(0); /* 初始位置 */
  }
  50% {
    transform: translateY(-10px); /* 上浮10px */
  }
}
@keyframes floatUpDown1 {
  0%,
  100% {
    transform: translateY(0); /* 初始位置 */
  }
  50% {
    transform: translateY(-18px); /* 上浮10px */
  }
}
#learn {
  animation: floatUpDown 3s ease-in-out infinite; /* 3秒上下浮动，平滑过渡，无限循环 */
  width: 381px; /* 设置SVG的宽度 */
  height: 147px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 9015px; /* 将元素定位到容器的顶部 */
  left: 230px; /* 将元素定位到容器的左侧 */
}

#more {
  animation: floatUpDown 3s ease-in-out infinite; /* 3秒上下浮动，平滑过渡，无限循环 */
  width: 296px; /* 设置SVG的宽度 */
  height: 147px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 9185px; /* 将元素定位到容器的顶部 */
  left: 300px; /* 将元素定位到容器的左侧 */
}

#details {
  animation: floatUpDown 3s ease-in-out infinite; /* 3秒上下浮动，平滑过渡，无限循环 */
  width: 489px; /* 设置SVG的宽度 */
  height: 147px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 9355px; /* 将元素定位到容器的顶部 */
  left: 310px; /* 将元素定位到容器的左侧 */
}
#xiaozhenguan {
  animation: floatUpDown1 2s ease-in-out infinite; /* 3秒上下浮动，平滑过渡，无限循环 */
  width: 250px; /* 设置SVG的宽度 */
  height: 250px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 5550px; /* 将元素定位到容器的顶部 */
  left: 160px; /* 将元素定位到容器的左侧 */
  z-index: 10;
}
#tianshi {
  animation: floatUpDown1 4s ease-in-out infinite; /* 3秒上下浮动，平滑过渡，无限循环 */
  width: 140px; /* 设置SVG的宽度 */
  height: 140px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 9900px; /* 将元素定位到容器的顶部 */
  left: 500px; /* 将元素定位到容器的左侧 */
  z-index: 10;
}

#tianshi1 {
  animation: floatUpDown1 3s ease-in-out infinite; /* 3秒上下浮动，平滑过渡，无限循环 */
  width: 140px; /* 设置SVG的宽度 */
  height: 140px; /* 设置SVG的高度 */
  position: absolute; /* 使用绝对定位 */
  top: 10240px; /* 将元素定位到容器的顶部 */
  right: 380px; /* 将元素定位到容器的左侧 */
  z-index: 10;
}

/*网页底部链接样式*/

/*链接位置和样式*/
.homepage-link1 {
  top: 9239px;
  transform: translateX(-41px);
  width: 400px;
  height: 500px;
  flex-shrink: 0;
  opacity: 0;
  transition: all 0.5s linear;
}
.homepage-link2 {
  top: 8959px;
  transform: translateX(-41px);
  width: 400px;
  height: 500px;
  flex-shrink: 0;
  opacity: 0;
  transition: all 0.5s linear;
}
.homepage-link3 {
  top: 8959px;
  transform: translateX(-41px);
  width: 400px;
  height: 500px;
  flex-shrink: 0;
  opacity: 0;
  transition: all 0.5s linear;
}
.homepage-link4 {
  top: 9239px;
  transform: translateX(-41px);
  width: 400px;
  height: 500px;
  flex-shrink: 0;
  opacity: 0;
  transition: all 0.5s linear;
}

/*样式补充-去掉文字下划线*/
.homepage-link1 > a {
  text-decoration: none;
}
.homepage-link2 > a {
  text-decoration: none;
}
.homepage-link3 > a {
  text-decoration: none;
}
.homepage-link4 > a {
  text-decoration: none;
}

/*链接图片样式*/
.homepage-link-img1 {
  margin: 0 auto;
  width: 250px;
  height: 250px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-link1.png');
  background-repeat: no-repeat;
  background-size: 91%;
  background-position: center;
  transition: all 0.1s linear;
  transform: translateY(2px);
}
.homepage-link-img2 {
  margin: 0 auto;
  width: 250px;
  height: 250px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-link2.png');
  background-repeat: no-repeat;
  background-size: 91%;
  background-position: center;
  transition: all 0.1s linear;
  transform: translateY(2px);
}
.homepage-link-img3 {
  margin: 0 auto;
  width: 250px;
  height: 250px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-link3.png');
  background-repeat: no-repeat;
  background-size: 91%;
  background-position: center;
  transition: all 0.1s linear;
  transform: translateY(2px);
}
.homepage-link-img4 {
  margin: 0 auto;
  width: 250px;
  height: 250px;
  background: url('https://static.igem.wiki/teams/5391/wiki/homepage-link4.png');
  background-repeat: no-repeat;
  background-size: 91%;
  background-position: center;
  transition: all 0.1s linear;
  transform: translateY(2px);
}