body {
  overflow-x: hidden !important;
  overflow: hidden;
  width: 100vw;
  height: min-content;
  background-image: url("https://static.igem.wiki/teams/5038/bg-5.jpg");
  background-size: 100vw 100vh;
  background-repeat: repeat;

}
* {
  margin: 0 auto;
}
.header-bg {
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: repeat;
  pointer-events: none;

}
.main {
  transition: all 1s;
  position: relative;
  top: 0;
  box-sizing: border-box;

  width: 100vw;
  background-image: url("https://static.igem.wiki/teams/5038/bg-5.jpg");
  background-repeat: repeat;
  /* background-color: #fff; */
  background-size: 100vw 100vh;
  /* background-position: 0 100%; */
  margin: 0 auto;
  overflow: visible;

  margin-top: 100vh;
}
.main-bg {
  position: absolute;
  height: 100vh;
  width: 95vw;
  filter: blur(5px);
}
.Start-btn {
  position: absolute;
  width: 20vw;
  left: 40vw;
  height: 10vh;
  top: 45vh;
  background-color: rgba(255, 255, 255, 0.539);
  font-size: 6vh;
  font-family: "CG";
}
.main-left {
  position: fixed;
  z-index: 10;
  top: 18vh;
  left: -40vh;
  width: 40vh;
  margin-right: 1vw;
  border-radius: 0 3vw 3vw 0;
  /* background-color: rgba(255, 255, 255, 0.975); */
  /* background-color: rgba(255, 255, 255, 0.867); */
  background-image: url("https://static.igem.wiki/teams/5038/nav-left-2.png");
  background-repeat: no-repeat;
  background-size: 100% 90%;
  background-position: 0 80%;
  padding-bottom: 4vh;
  /* transform: scale(0.8); */

  transition: all 1s;
}

.main-right {
  position: relative;

  /* height: 75vh; */
  left: 100vw;

  width: 65vw;
  transition: all 1s;
  /* animation-play-state: paused; */
  /* right: -100%; */
  overflow: hidden;
  top: 8vh;
  padding-top: 8vh;
}
.web-move {
  position: relative;
  margin-top: 0;
}
.main-left-move {
  left: 1vw;
}
.main-right-move {
  left: 30vw;
}
.part-container {
  z-index: 1;
  position: relative;

  width: 100%;
  /* height: 75vh; */
  border-radius: 3vw;

  border-radius: 0 0 3vw 3vw;
  /* background-color: rgba(255, 255, 255, 0.867); */
  /* backdrop-filter: blur(50px) brightness(99%); */

  /* overflow: hidden; */
}

.part {
  display: none;
  z-index: 3;
  position: relative;
  left: 0;
  top: 0vh;
  /* min-height: 100vh; */
  /* overflow: auto; */
  /* scrollbar-width: none; */
  margin: 0 auto;
  width: 100%;
  padding: 0 0 10vh 0;
  transform-style: preserve-3d;
  overflow-x: hidden;
  overflow: hidden;
}
.part-1 {
  display: block;
}

.part-title-1 {
  position: relative;

  text-align: start;
  width: 100%;
  height: 10vh;
  line-height: 10vh;

  font-size: 5vh;
  font-weight: 800;
  font-family: "CG-bold";
  color: rgb(159, 119, 181);

  padding-left: 5vh;
  background-size: 5vh 5vh;
  background-position: 0 50%;

  scroll-margin-top: 10vh;
  scroll-margin-left: 30vw;
}


.part-title-2 {
  position: relative;
  width: 100%;
  height: 8vh;
  line-height: 8vh;

  font-size: 2vw;
  font-weight: 800;
  font-family: "CG-bold";
  color: rgb(218, 154, 167);

  padding-left: 4vh;
  background-size: 4vh 4vh;
  background-position: 0 50%;

  scroll-margin-top: 10vh;
  scroll-margin-left: 30vw;
}

.part-title-2-sticky {
  z-index: 100;
  position: sticky !important;
  visibility: visible !important;
}

.part-title-3 {
  position: relative;
  left: 0;
  top: 0;

  font-size: 1.4vw;
  font-weight: 800;
  font-family: "CG-bold";
  color: rgb(140, 200, 240);
  border: 1%;
  text-align: left;
  width: 100%;
}

.part-text {
  position: relative;
  /* IBM Plex Mono */
  font-family: IBM Plex Mono;
  font-size: 1.3vw;
  font-weight: 400;
  line-height: 2vw;
  text-align: justify;
  margin-bottom: 30px;

  word-spacing: -1px;

  word-wrap: break-word;
  font-size: 1.35vw;
  font-family: HarmonyOS_Sans, Ubuntu, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
    sans-serif;
}

.part-img {
  position: relative;
  left: 5%;

  width: 90%;
  height: auto;
  margin-top: 0vh;
  margin-bottom: 3vh;

  border-radius: 2vw;
}

.part-text > b {
  font-family: "CG-bold";
}

.inline-a {
  /* display: inline-block; */
  /* 不能使用inline-block 不然文字排版会有问题 */

  position: relative;
  float: initial;
  left: 0;

  width: max-content;
  background-color: transparent;
  /* text-decoration: underline; */
  font-family: "CG";
  font-size: 1.3vw;

  font-style: italic;
  font-weight: 800;

  color: transparent;

  transition: all 0.5s;
  white-space: nowrap;
  letter-spacing: 0.5vw;

  background-size: 3vw 100%;
  background-position: 50% 50%;
  font-size: 1.4vw;

  text-shadow: none;
}

.inline-a::after {
  content: var(--pseudo-content, "默认值");

  position: absolute;
  top: -0.3vh;
  left: 0;

  height: 100%;
  width: 0;

  color: var(--pseudo-color, "rgb(159, 119, 181)");
  transition: all 1s;
  border-bottom: solid 3px var(--pseudo-color, "rgb(159, 119, 181)");
  letter-spacing: 0.5vw;
  transition: all 1s;
  font-size: 1.4vw;
}

.inline-a::before {
  content: "";

  opacity: 0;

  position: absolute;

  width: 3vw;
  height: 2.3vw;

  background-repeat: no-repeat;
  background-size: contain;
  transition: all 1s;
  background-image: var(--pseudo-url, "");
}
@keyframes inline-a-ani {
  0% {
    width: 0;
  }
  90% {
    width: 55%;
  }
  100% {
    width: max-content;
  }
}
.inline-a:hover::before {
  opacity: 1;
}
.inline-a:hover::after {
  height: 100%;
  letter-spacing: 0.1vw;
  margin-left: 2.5vw;
  animation: inline-a-ani 1s linear both;
}
.name-right {
  position: relative;
  font-size: 1vw;
  text-align: left;
  text-indent: 3vw;
}
/* .move-up {
  transform: translateY(-100vh);
} */
.img-introduce {
  position: relative;
  max-width: 90%;
  font-family: "CG";

  line-height: 2.3vh;
  font-size: 2vh;
  line-height: 2.3vh;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 2vh;
  margin-top: -2vh;

  font-family: HarmonyOS_Sans, Ubuntu, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
    sans-serif;
}
.table-introduce {
  position: relative;
  max-width: 90%;
  font-family: "CG";

  line-height: 2.3vh;
  font-size: 2vh;
  line-height: 2.3vh;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 2vh;
  /* margin-top: 2vh; */

  font-family: HarmonyOS_Sans, Ubuntu, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
    sans-serif;
}
.part-gif-container-1 {
  width: 90%;
  display: flex;
  justify-content: center;
  margin: 2vh auto;
  margin-bottom: 2vh;
}
.part-gif-container-1 > .part-gif {
  width: 60%;
  border-radius: 1vw;
}
.part-gif-container-2 {
  width: 90%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 2vh;
}
.part-gif-container-2 > .part-gif {
  width: 40%;
  border-radius: 1vw;
}
.part-gif-container-2 :nth-child(1) {
  margin-right: 2vw;
}
.part-gif-container-3 {
  width: 90%;
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  margin-bottom: 2vh;
}

.part-gif-container-3 > .part-gif {
  border-radius: 1vw;
  width: 30%;
}

.part-gif-container-4 {
  width: 90%;
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  flex-wrap: wrap;
  margin-bottom: 2vh;
}
.part-gif-container-4 > .part-gif {
  border-radius: 1vw;
  width: 45%;
}
.part-gif-container-4 :nth-child(1) {
  margin-bottom: 5vh;
}
.part-gif-container-4 :nth-child(2) {
  margin-bottom: 5vh;
}
.margin-bug {
  /* top: -10vh; */
  margin-top: -10vh;
}
.margin-bug-son {
  position: relative;
  width: 100%;
  height: 8vh;
  overflow: hidden;
}
.up-btn {
  position: fixed;
  display: block;
  top: 90vh;
  right: 2vh;
  width: 5vh;
  height: 5vh;
  z-index: 10;
  background-image: url("https://static.igem.wiki/teams/5038/up-btn.png");
}
.up-btn-rotate {
  transform: rotateZ(180deg);
}

@media (max-width: 500px) {
  body {
    overflow: auto !important;
  }
  .up-btn {
    display: none;
  }
  .header {
    margin-top: 5.5vh !important;

    height: 60vw !important;
  }
  .main {
    margin-top: 70vw;
  }
  .py-5 {
    padding: 0 !important;
  }

  small {
    font-size: 10px !important;
  }
  .main-left {
    transform: scale(0.3);
    left: -26vw !important;
  }
  .main-right {
    left: 30vw;
  }

  .part-title-1 {
    text-indent: 8.5vw;

    width: 100%;
    height: 10vw;
    line-height: 12vw;
    border-radius: 2vw 2vw 0 0;

    font-size: 3.5vw;
    font-weight: 800;
    font-family: "CG-bold";
    color: rgb(177, 125, 205);
    /* letter-spacing: 0.4vw; */
    /* background-color: #fff; */

    background-size: 5vw 45%;
    background-position: 3vw 60%;

    scroll-margin-top: 10vh;
    scroll-margin-left: 30vw;

    left: -0.8vw;
    top: 1vh;
  }
  .part-text {
    margin-bottom: 5px;
  }
  .part-img {
    margin-bottom: 5px;
  }
}
.linear .part {
  display: block;
  height: auto;
  padding-bottom: 10px;
}

.linear > :last-child {
  padding-bottom: 0vh;
}

.notIndent {
  position: relative;
  text-indent: 0;
  left: 5%;
  width: 90%;
  margin-right: 10vw;
}
.notIndent::before {
  content: "";

  position: absolute;
  top: 0.6vh;
  left: -3vw;
  transform: scale(0.9);
  width: 1.6vw;
  height: 2.5vh;
  background-size: 100% 100%;

  /* -webkit-clip-path: polygon(
    75% 0%,
    100% 50%,
    75% 100%,
    0% 100%,
    25% 50%,
    0% 0%
  );
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); */
  /* background-color: #6614a960; */
  background-image: url("https://static.igem.wiki/teams/5038/headerbg/team-logo.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.loading-container {
  z-index: 100;
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("https://static.igem.wiki/teams/5038/loading-bg.png");
  background-color: #fff;
  opacity: 1;
}
.loading {
  position: relative;
  top: 35vh;
  width: 30vh;
  height: 30vh;
  left: 0;
  transform: scale(1.7);
  margin: 0 auto;
  background-image: url("https://static.igem.wiki/teams/5038/loading-joint.png");
  background-size: 1200% 100%;
  background-position: 0 0;
  transition: all 1s;
}
.loading-move-1 {
  animation: loading-ani 1.1s both infinite steps(11, start);
}
.loading-move-2 {
  animation: loading-ani-2 3s ease-in-out both;
}
@keyframes loading-ani {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}
@keyframes loading-ani-2 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.loading-body {
  overflow: hidden;
}
.n10 {
  width: 10% !important;
  left: 45% !important;
  border-radius: 0 !important;
}
.n20 {
  width: 20% !important;
  left: 40% !important;
  border-radius: 0 !important;
}
.n30 {
  width: 30% !important;
  left: 35% !important;
  border-radius: 0 !important;
}
.n40 {
  width: 40% !important;
  left: 30% !important;
  border-radius: 0 !important;
}
.n50 {
  width: 50% !important;
  left: 25% !important;
  border-radius: 0 !important;
}
.n60 {
  width: 60% !important;
  left: 20% !important;
  border-radius: 0 !important;
}
.n70 {
  width: 70% !important;
  border-radius: 0 !important;
  left: 15% !important;
}
.n80 {
  width: 80% !important;
  border-radius: 0 !important;
  left: 10% !important;
}
.n90 {
  width: 90% !important;
  border-radius: 0 !important;
  left: 5% !important;
}
.n95 {
  width: 95% !important;
  border-radius: 0 !important;
  left: 2.5% !important;
}
.n100 {
  width: 100% !important;
  border-radius: 0 !important;
  left: 0% !important;
}
.r10 {
  width: 10% !important;
  left: 45% !important;
}
.r20 {
  width: 20% !important;
  left: 40% !important;
}
.r30 {
  width: 30% !important;
  left: 35% !important;
}
.r40 {
  width: 40% !important;
  left: 30% !important;
}
.r50 {
  width: 50% !important;
  left: 25% !important;
}
.r60 {
  width: 60% !important;
  left: 20% !important;
}
.r70 {
  width: 70% !important;
  left: 15% !important;
}
.r80 {
  width: 80% !important;
  left: 10% !important;
}
.r90 {
  width: 90% !important;
  left: 5% !important;
}
.r95 {
  width: 95% !important;
  left: 2.5% !important;
}
.r100 {
  width: 100% !important;
  left: 0% !important;
}
.reference {
  font-size: 4vh;
}
.reference + .part > .part-text {
  position: relative;
  width: 100%;

  padding-left: 5vh;
  min-height: 2.5vh;
  font-size: 2.5vh;
  line-height: 2.5vh;
  text-align: justify;
  margin: 0 auto;
  margin-bottom: 2vh;

  font-family: HarmonyOS_Sans, Ubuntu, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
    sans-serif;
}

.reference + .part > .part-text::after {
  content: var(--re, "默认值");
  position: absolute;
  top: 0;
  left: 0vh;
  width: 5vh;
  height: 5vh;
}
.reference + .reference-box > .part-text::after {
  content: var(--re, "默认值");
  position: absolute;
  top: 0;
  left: 0vh;
  width: 5vh;
  height: 5vh;
}
.reference + .reference-box > .part-text {
  position: relative;
  width: 100%;

  padding-left: 5vh;
  min-height: 2.5vh;
  font-size: 2.5vh;
  line-height: 2.5vh;
  text-align: justify;
  margin: 0 auto;
  margin-bottom: 2vh;

  font-family: HarmonyOS_Sans, Ubuntu, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
    sans-serif;
}

.small {
  text-indent: 0vw;
  display: inline-block;
  font-size: 1.24vw;
}

.ww {
  background-color: white;
}

.img-container {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.img-container > * {
  flex-grow: 1;
  flex-shrink: 1;
  left: 0 !important;
  width: 50%;
}

/* circle-img */
.dot-eater::after {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  height: 50%;
  width: 100%;

  background-color: white;
  border-radius: 0.75vw 0.75vw 0 0;

  transform-origin: left bottom;
  animation: eat-dot-1 1.5s infinite alternate linear both;
}

.dot-eater::before {
  content: "";

  position: absolute;
  top: 50%;
  height: 50%;
  width: 100%;
  left: 0;

  background-color: white;
  transform: rotateZ(10deg);

  border-radius: 0 0 0.75vw 0.75vw;

  transform-origin: left top;
  animation: eat-dot-2 1.5s infinite alternate linear both;
}

@keyframes eat-dot-1 {
  0% {
    transform: rotateZ(0deg);
  }
  65% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(-30deg);
  }

  100% {
    transform: rotateZ(-30deg);
  }
}

@keyframes eat-dot-2 {
  0% {
    transform: rotateZ(0deg);
  }
  65% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(30deg);
  }

  100% {
    transform: rotateZ(30deg);
  }
}

.circle-img-3 {
  position: relative;
  display: flex;
  height: 33vw;
  width: 50vw;
  margin: 0 auto;
  background-size: 400% 100%;
  background-position: 0 0;
  animation: circle-img-3 9s infinite;
  margin-bottom: 2vh;

  border-radius: 2vw;
}

.circle-img-3 .dot-eater {
  position: absolute;
  left: 0;
  top: 0;

  width: 10%;
  height: 100%;

  animation: dot-eater-move-3 9s infinite both;
}

@keyframes dot-eater-move-3 {
  0% {
    left: 0;
  }
  33.3% {
    left: 45%;
  }
  66.7% {
    left: 90%;
  }
  75% {
    left: 112.5%;
  }
  75.01% {
    left: -22.5%;
  }
  100% {
    left: 0;
  }
}

.circle-img-3 .dot-list {
  display: flex;
  justify-content: space-between;
  align-items: center;

  position: absolute;
  top: 94%;
  left: 35%;

  width: 30%;
  height: 5%;
}

.dot {
  height: 100%;
  width: 10%;
  border-radius: 50%;
  background-color: rgb(100, 97, 97);
}

@keyframes circle-img-3 {
  0% {
    background-position: 0 0;
  }
  33% {
    background-position: 33.4% 0;
  }
  66% {
    background-position: 66.7% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.circle-img-4 {
  position: relative;
  display: flex;
  height: 33vw;
  width: 50vw;
  margin: 0 auto;
  background-size: 500% 100%;
  background-position: 0 0;
  animation: circle-img-4 12s infinite;

  border-radius: 2vw;
  box-sizing: initial;
  margin-bottom: 2vh;
}

.circle-img-4 .dot-eater {
  position: absolute;
  left: 0;
  top: 0;

  width: 10%;
  height: 100%;

  animation: dot-eater-move-4 12s infinite both;
}

@keyframes dot-eater-move-4 {
  0% {
    left: 0;
  }
  25% {
    left: 30%;
  }
  50% {
    left: 60%;
  }
  75% {
    left: 90%;
  }
  80% {
    left: 100%;
  }
  80.1% {
    left: -15%;
  }
  100% {
    left: 0%;
  }
}

.circle-img-4 .dot-list {
  display: flex;
  justify-content: space-between;
  align-items: center;

  position: absolute;
  top: 94%;
  left: 35%;

  width: 30%;
  height: 5%;
}

@keyframes circle-img-4 {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 25% 0;
  }
  50% {
    background-position: 50% 0;
  }
  75% {
    background-position: 75% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.inline-a {
  /* display: inline-block; */
  /* 不能使用inline-block 不然文字排版会有问题 */

  position: relative;
  float: initial;
  left: 0;

  width: max-content;
  background-color: transparent;
  /* text-decoration: underline; */
  font-family: "CG";
  font-size: 1.3vw;

  font-style: italic;
  font-weight: 800;

  color: transparent !important;

  transition: all 0.5s;
  white-space: nowrap;
  letter-spacing: 0.5vw;

  background-size: 3vw 100%;
  background-position: 50% 50%;
  font-size: 1.4vw;

  text-shadow: none;
}

.inline-a::after {
  content: var(--pseudo-content, "默认值");

  position: absolute;
  top: -0.3vh;
  left: 0;

  height: 100%;
  width: 0;

  color: var(--pseudo-color, "rgb(159, 119, 181)");
  transition: all 1s;
  border-bottom: solid 3px var(--pseudo-color, "rgb(159, 119, 181)");
  letter-spacing: 0.5vw;
  transition: all 1s;
  font-size: 1.4vw;
}

.inline-a::before {
  content: "";

  opacity: 0;

  position: absolute;

  width: 3vw;
  height: 2.3vw;

  background-repeat: no-repeat;
  background-size: contain;
  transition: all 1s;
  background-image: var(--pseudo-url, "");
}
@keyframes inline-a-ani {
  0% {
    width: 0;
  }
  90% {
    width: 55%;
  }
  100% {
    width: max-content;
  }
}
.inline-a:hover::before {
  opacity: 1;
}
.inline-a:hover::after {
  height: 100%;
  letter-spacing: 0.1vw;
  margin-left: 2.5vw;
  animation: inline-a-ani 1s linear both;
}

/* <div class="circle-img-3">
              <div class="dot-list">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot-eater"></div>
              </div>
            </div>

            <div class="circle-img-4" style="background-image: url();">
        <div class="dot-list">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot-eater"></div>
        </div>
      </div> */

.jump-a {
  position: relative;
  top: 0;
  color: rgb(134, 49, 195);
  font-style: italic;
  transition: all 1s;

  text-decoration: none;
}
.jump-a::after {
  content: "";
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  height: 110%;
  width: 0%;

  transition: all 1s;
  border-bottom: 3px solid rgb(134, 49, 195);
}

.jump-a:hover::after {
  width: 100%;
}

.jump-a:hover{
  color: rgb(134, 49, 195);
}
/* model表格 */

.table-2 {
  position: relative;
  width: 95%;
  background-color: #fff;
  margin: 0 auto;
  border-top: 4px solid rgb(146, 97, 182);
  border-bottom: 4px solid rgb(146, 97, 182);
  margin-bottom: 2vh;
}
.table-2 thead {
  background-color: rgb(247, 228, 250);

  border-bottom: 2px solid rgb(146, 97, 182);
}
.table-2 th {
  text-align: center;
  font-family: "CG";
}
.table-2 td {
  border-bottom: 2px solid rgb(146, 97, 182);
  text-align: center;
  font-family: "CG";
}
.table-2 > tbody > tr > :nth-child(1) {
  width: 15%;
  white-space: wrap;
  word-break: break-all;
  text-align: center;
}
.table-2 > tbody > tr > :nth-child(2) {
  width: 25%;
  white-space: wrap;
  word-break: break-all;
}
.table-2 > tbody > tr > :nth-child(3) {
  position: relative;
  width: 30%;
  height: 13vw;
  white-space: wrap;
  word-break: break-all;
  text-align: center;
}
.table-2 > tbody > tr > :nth-child(4) {
  position: relative;

  width: 30%;
  height: 13vw;
  white-space: wrap;
  word-break: break-all;
  text-align: center;
}
.table-2 img {
  max-width: 80%;
  max-height: 100%;
  position: absolute;
  bottom: 0;
  left: 10%;
}

/* 星形图标 */
.star-behine {
  position: relative;
  margin-right: 2vh;
  display: inline-block;
}
.star-behine::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  height: 100%;
  width: 2vh;
  height: 2vh;
  background-size: 1vh 1vh;
  background-position: 50% 50%;

  background-color: red;
  -webkit-clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}


#video{
  width: 41vw;
  height: 24vw;
  position: relative;
  left: 12vw;
}

.footer-container {
  position: relative;
  left: 29vw;
  height: 15vw;
  width: 68vw;
  transform-style: preserve-3d;
  background-size: 100% 100%;
  background-color: #fff;
  border-radius: 2vw;
  background-image: url("https://static.igem.wiki/teams/5038/img-footer/footer-img-10.png");
}

.footer-container::before {
  content: "";
  position: absolute;

  height: 100%;
  width: 100%;
  top: 0vh;
  left: 0;

  padding: 10px;
  border-radius: 2vw;
  pointer-events: none;
}
.footer-container::after {
  content: "";
  position: absolute;

  height: 100%;
  width: 100%;
  top: 0vh;
  left: 0;

  border-radius: 2vw;

  background-image: linear-gradient(
    130deg,
    rgb(223, 190, 247) 5%,
    rgb(189, 182, 247) 30%,
    rgb(176, 212, 249) 50%,
    rgb(223, 190, 247) 55%,
    rgb(189, 182, 247) 80%,
    rgb(176, 212, 249) 100%
  );

  background-size: 200% 200%;
  padding: 5px;
  mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) border-box;
  mask-composite: exclude;

  pointer-events: none;
  animation: footer-container-ani 2s linear infinite;
}

@keyframes footer-container-ani {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }
}
.footer-scroll {
  position: absolute;
  left: 14.5vw;
  top: 0.5vw;
  width: 53vw;
  height: 7vw;
  /* background-color: rgba(255, 0, 0, 0.305); */

  overflow: hidden;
}
.footer-img {
  position: relative;
  width: auto;
  height: 100%;
  background-size: 230% 100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-footer/footer-img-4.jpg");

  background-repeat: no-repeat;

  animation: footer-ani 25s linear infinite both;
}
@keyframes footer-ani {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 89% 0;
  }
}

.jump-sup{
  color: rgba(41, 41, 228, 0.807);
  font-size: 1vw;
  font-weight: bold;
}
.jump-sup:hover{
  color: rgb(30, 0, 255);
  font-size: 1.2vw;
  font-weight: bolder
}

#ref{
  scroll-margin-top: 10vh;
}