body {
  margin: 0;
  width: 100vw !important;
  height: calc((100vw / 16)* 9) !important;
  overflow: hidden;
}



.reveal .progress {
  background: rgba(0, 0, 0, 0.2);
  height: 10px;

}

.reveal .progress span {
  background: #2aa198;
}

/* 定义入场和出场的动画 */
.from-left {
  animation: fromLeft 0.8s ease-out;
}

.from-right {
  animation: fromRight 0.5s ease-out;
}

.leave-left {
  animation: leaveLeft 0.5s ease-in;
}

.leave-right {
  animation: leaveRight 0.5s ease-in;
}

.reveal-viewport {
  background-color: #fff;
}

.slides {
  width: 100vw;
  height: calc(80vh - 100px);
}

section {
  padding-top: 100px;
  height: calc(80vh - 100px);
  width: 100vw !important;
}

/* 定义关键帧动画 */
@keyframes fromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes leaveLeft {
  from {
    opacity: 1;
  }

  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes leaveRight {
  from {
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}


.reveal .controls {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.reveal .controls button {
  background: none;
  border: none;
  color: transparent;
  cursor: pointer;

}

.reveal .controls button.enabled {
  cursor: pointer;
  opacity: 1;
  z-index: -1;
}

.reveal .controls button:disabled {
  cursor: disabled;
  opacity: 0.6;
}

/* 自定义左箭头 */
.reveal .controls button.navigate-left {
  background: url('https://static.igem.wiki/teams/5083/team/arrow-left.png') no-repeat center center;
  /* 替换为你的左箭头图片 */
  background-size: contain;
  width: 40px;
  /* 根据你的图片尺寸调整 */
  height: 40px;
  /* 根据你的图片尺寸调整 */
  left: 10px;
  z-index: 1000000000;
  display:none;
}

/* 自定义右箭头 */
.reveal .controls button.navigate-right {
  background: url('https://static.igem.wiki/teams/5083/team/arrow-right.png') no-repeat center center;
  /* 替换为你的右箭头图片 */
  background-size: contain;
  width: 40px;
  /* 根据你的图片尺寸调整 */
  height: 40px;
  /* 根据你的图片尺寸调整 */
  right: 10px;
  z-index: 1000000000;
  display:none;
}

/* 默认样式 */
.reveal {
  margin-top: calc(((100vw / 16) * 9) / 1080 * -28);
  z-index: -1;
}

/* 16寸及以下屏幕的样式 */
@media screen and (max-width: 1920px) {
  .reveal {
    transform: translateY(-10%);
  }
}




.diynav-submenu>li {
  margin: 12px 0 !important;
}
/*width:calc((100vw/1920)*x)*/
/*height:calc((100vh/1080)*y)*/

.nav {
  width: 100vw;
  height: calc(((100vw/16)*9)/1080*122);
  overflow: hidden;
  z-index: 10;
}

.nav-content-container {
  width: 100vw;
  height: calc((calc((100vw/16)*9)/1080)*110);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}

.nav-content-logo-container {
  width: calc((100vw/1920)*86);
  height: calc((100vw/1920)*86);
  margin-left: 23.43vw;
  border-radius: calc((100vw/1920)*15);
  background: linear-gradient(135deg, rgba(192, 199, 204, 1) 0%, rgba(225, 233, 237, 1) 51.19%, rgba(226, 235, 240, 1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-content-logo {
  width: calc((100vw/1920)*74);
  height: calc((100vw/1920)*65);
  background: url('https://static.igem.wiki/teams/5083/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.nav-content-text-container {
  width: calc((100vw/1920)*(211*3+93*2));
  height: 100%;
  display: flex;
  margin-left: calc((100vw/1920)*113);
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.nav-content-text {
  width: calc((100vw/1920)*211);
  height: calc((100vw/1920)*122);
  font-size: calc((100vw/1920)*60);
  font-weight: 310;
  letter-spacing: 0px;
  line-height: calc((100vw/1920)*93.06);
  margin-right: calc((100vw/1920)*93);
  color: rgba(51, 51, 51, 1);
  text-align: center;
  vertical-align: top;
  display: flex;
  align-items: center;
}

.nav-line-container {
  height: calc((100vw/1920)*12);
  width: 100%;
}

.nav-line {
  width: 100%;
  height: 100%;
  opacity: 1;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 53.5%, rgba(0, 0, 0, 0) 100%);
  border-radius: 16%;
}

.header {

  height: calc(calc((100vw/16)*9) - calc(((100vw/16)*9)/1080*122));
  width: 100vw;
  overflow: hidden;
}



@keyframes moveUp {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-20%);
    opacity: 1;
  }
}

.move-up {
  animation: moveUp 0.5s ease-in-out forwards;
  /* 动画名称，持续时间，缓动函数，动画结束时的状态 */
}

@keyframes moveDown {
  from {
    transform: translateY(-20%);
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.move-down {
  animation: moveDown 0.5s ease-in-out forwards;
  /* 动画名称，持续时间，缓动函数，动画结束时的状态 */
}

@keyframes fromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.from-bottom {
  animation: fromBottom 0.8s ease-out;
}

@keyframes fromUp {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(-20%);
    opacity: 1;
  }
}

.from-up {
  animation: fromUp 0.5s ease-out;
}

@keyframes leaveDown {
  from {
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.leave-down {
  animation: leaveDown 0.5s ease-in;
}

@keyframes leaveUp {
  from {
    opacity: 1;
  }

  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

.leave-up {
  animation: leaveUp 0.5s ease-in;
}

@keyframes slideInFromLeftTop {
  from {
    transform: translate(-100%, -100%);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.slide-in-from-left-top {
  animation: slideInFromLeftTop 0.8s ease-in;
  transform-origin: right bottom;
}

@keyframes slideInFromLeftBottom {
  from {
    transform: translate(-100%, 100%);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.slide-in-from-left-bottom {
  animation: slideInFromLeftBottom 0.8s ease-in-out forwards;
  transform-origin: right top;
}


@keyframes slideOutToLeftTop {
  from {
    transform: translate(0, 0);
    opacity: 1;
  }

  to {
    transform: translate(-100%, -100%);
    opacity: 0;
  }
}

.slide-out-to-left-top {
  animation: slideOutToLeftTop 0.5s ease-in;
  transform-origin: left top;
}

@keyframes slideOutToLeftBottom {
  from {
    transform: translate(0, 0);
    opacity: 1;
  }

  to {
    transform: translate(-100%, 100%);
    opacity: 0;
  }
}

.slide-out-to-left-bottom {
  animation: slideOutToLeftBottom 0.5s ease-in-out forwards;
  transform-origin: left bottom;
}

/* fade-in 动画（带有缩放） */
@keyframes fadeIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1.0);
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
}

/* fade-out 动画（带有缩放） */
@keyframes fadeOut {
  from {
    transform: scale(1.0);
    opacity: 1;
  }

  to {
    transform: scale(0.9);
    opacity: 0;
  }
}

.fade-out {
  animation: fadeOut 0.5s ease-in-out forwards;
}

@keyframes fadeIn-1 {
  from {
    transform: scale(1.1);
    opacity: 0;
  }

  to {
    transform: scale(1.0);
    opacity: 1;
  }
}

.fade-in-1 {
  animation: fadeIn-1 0.5s ease-in-out forwards;
}

@keyframes fadeOut-1 {
  from {
    transform: scale(1.0);
    opacity: 1;
  }

  to {
    transform: scale(1.1);
    opacity: 0;
  }
}

.fade-out-1 {
  animation: fadeOut-1 0.5s ease-in-out forwards;
}



.section1-bg-container,
.section2-bg-container,
.section3-2-3-bg-container {
  position: absolute;
  left: calc((100vw/1920)*(300));
  top: calc((100vw/1920)*(250));
  width: calc((100vw/1920)*1179*1.2);
  height: calc((100vw/1920)*502*1.2);
  opacity: 1;
  z-index: -21;
  overflow: hidden;
}

.section2-bg-container {
  transform: translateY(-20%);
}

.section3-2-3-bg-container {
  transform: translateY(-20%);
  opacity: 0;
}

.section1-bg,
.section2-bg {
  background-image: url('https://static.igem.wiki/teams/5083/home/section-1-bg.png');
  background-size: contain;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}

.section2-text-container,
.section1-text-container,
.section3-2-3-text-container {
  position: absolute;
  left: calc((100vw/1920)*(0));
  bottom: calc((100vw/1920)*(250));
  width: calc((100vw/1920)*2364*0.4);
  height: calc((100vw/1920)*1228*0.4);
  opacity: 1;
  z-index: 10;
  overflow: hidden;
}

.section3-2-3-text-container {
  opacity: 0;
}

.section1-text-container {
  opacity: 0;
}

.section2-text,
.section1-text {
  background-image: url('https://static.igem.wiki/teams/5083/home/section-1-text.png');
  background-size: contain;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}

.section2-3-small-container,
.section3-2-small-container,
.section4-3-small-container {
  position: absolute;
  right: calc((100vw/1920)*(-375));
  top: calc((100vw/1920)*(75));
  width: calc((100vw/1920)*1143*0.9);
  height: calc((100vw/1920)*1370*0.9);
  opacity: 1;
  z-index: -9;
  overflow: hidden;
}

.section2-3-small-container,
.section4-3-small-container {
  opacity: 0;
}

.section2-3-small {
  background-image: url('https://static.igem.wiki/teams/5083/home/section-3-small.png');
  background-size: contain;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}


.section2-3-big-container,
.section3-2-big-container,
.section4-3-big-container {
  position: absolute;
  right: calc((100vw/1920)*(-550));
  top: calc((100vw/1920)*(100));
  width: calc((100vw/1920)*1143*1.1);
  height: calc((100vw/1920)*1370*1.1);
  opacity: 1;
  z-index: -20;
  overflow: hidden;
}

.section2-3-big-container,
.section4-3-big-container {
  opacity: 0;
}

.section2-3-big {
  background-image: url('https://static.igem.wiki/teams/5083/home/section-3-big.png');
  background-size: contain;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}


.section2-3-yellow-container,
.section3-2-yellow-container,
.section4-3-yellow-container {
  position: absolute;
  right: calc((100vw/1920)*(-400));
  top: calc((100vw/1920)*(200));
  width: calc((100vw/1920)*1280*1.2);
  height: calc((100vw/1920)*704*1.2);
  opacity: 1;
  z-index: -8;
  overflow: hidden;
}

.section2-3-yellow-container,
.section4-3-yellow-container {
  opacity: 0;
}

.section2-3-yellow {
  background-image: url('https://static.igem.wiki/teams/5083/home/section-3-yellow.png');
  background-size: contain;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}


.section2-3-green-container,
.section3-2-green-container,
.section4-3-green-container {
  position: absolute;
  right: calc((100vw/1920)*(-480));
  top: calc((100vw/1920)*(-120));
  width: calc((100vw/1920)*1280*1.3);
  height: calc((100vw/1920)*628*1.3);
  opacity: 1;
  z-index: -11;
  overflow: hidden;
}

.section2-3-green-container,
.section4-3-green-container {
  opacity: 0;
}

.section2-3-green {
  background-image: url('https://static.igem.wiki/teams/5083/home/section-3-green.png');
  background-size: contain;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}


.section2-3-arrow-container,
.section3-2-arrow-container,
.section4-3-arrow-container {
  position: absolute;
  right: calc((100vw/1920)*(-600));
  top: calc((100vw/1920)*(-300));
  width: calc((100vw/1920)*2437*1.3);
  height: calc((100vw/1920)*1162*1.3);
  opacity: 1;
  z-index: -22;
  overflow: hidden;
}

.section2-3-arrow-container,
.section4-3-arrow-container {
  opacity: 0;
}

.section2-3-arrow {
  background-image: url('https://static.igem.wiki/teams/5083/home/section-3-arrow.png');
  background-size: contain;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}

.section2-3-text-container,
.section3-2-text-container,
.section4-3-text-container {
  position: absolute;
  left: calc((100vw/1920)*(200));
  top: calc((100vw/1920)*(275));
  width: calc((100vw/1920)*525*1.3);
  height: calc((100vw/1920)*320*1.3);
  opacity: 1;
  z-index: -22;
  overflow: hidden;
}

.section2-3-text-container,
.section4-3-text-container {
  opacity: 0;
}

.section2-3-text {
  background-image: url('https://static.igem.wiki/teams/5083/home/section-3-text.png');
  background-size: contain;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}

.section4-bg-container,
.section4-5-bg-container,
.section3-4-bg-container {
  position: absolute;
  left: calc((100vw/1920)*(-350));
  top: calc((100vw/1920)*(-500));
  width: calc((100vw/1920)*2884*0.95);
  height: calc((100vw/1920)*2040*0.95);
  opacity: 1;
  z-index: -21;
  overflow: hidden;
}

.section4-bg {
  background-image: url('https://static.igem.wiki/teams/5083/home/section-4-bg-2.png');
  background-size: contain;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}

.section4-5-bg-container,.section3-4-bg-container{
  opacity: 0;
}

.section4-text-container,
.section4-5-text-container,
.section3-4-text-container {
  position: absolute;
  right: calc((100vw/1920)*(70));
  top: calc((100vw/1920)*(120));
  width: calc((100vw/1920)*950*1.2);
  height: calc((100vw/1920)*455*1.2);
  opacity: 1;
  z-index: -15;
  overflow: hidden;
}

.section4-5-text-container,
.section3-4-text-container{
  opacity: 0;
}

.section4-text {
  background-image: url('https://static.igem.wiki/teams/5083/home/section-4-text.png');
  background-size: contain;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}


.section5-bg-container,
.section5-4-bg-container {
  position: absolute;
  left: calc((100vw/1920)*(80));
  top: calc((100vw/1920)*(-400));
  width: calc((100vw/1920)*1196*1.5);
  height: calc((100vw/1920)*996*1.5);
  opacity: 1;
  z-index: -21;
  overflow: hidden;
}

.section5-bg {
  background-image: url('https://static.igem.wiki/teams/5083/home/section-5-bg.png');
  background-size: contain;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}

.section5-4-bg-container{
  opacity: 0;
}

.section5-text-container,
.section5-4-text-container {
  position: absolute;
  right: calc((100vw/1920)*(300));
  top: calc((100vw/1920)*(250));
  width: calc((100vw/1920)*516*1.2);
  height: calc((100vw/1920)*295*1.2);
  opacity: 1;
  z-index: -21;
  overflow: hidden;
}

.section5-4-text-container{
  opacity: 0;
}

.section5-text {
  background-image: url('https://static.igem.wiki/teams/5083/home/section-5-text.png');
  background-size: contain;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}


.section5-wave-container,
.section5-4-wave-container {
  position: absolute;
  left: calc((100vw/1920)*(-1400));
  top: calc((100vw/1920)*(-1350));
  width: calc((100vw/1920)*2330*1.5);
  height: calc((100vw/1920)*2330*1.5);
  opacity: 1;
  z-index: -30;
  overflow: hidden;
}

.section5-4-wave-container{
  opacity: 0;
}

.section5-wave {
  background-image: url('https://static.igem.wiki/teams/5083/home/section-5-wave.png');
  background-size: contain;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}





.diynav-submenu {
  z-index: 2147483647;
}