@charset "UTF-8";
* {
  box-sizing: border-box;
}

html {
  font-size: 19.2px;
}

html body {
  width: 100vw;
  height: 100vh;
  perspective: 100px;
  transform-style: preserve-3d;
  overflow-y: auto;
}

html body .total-contain .nav-contain {
  box-shadow: 0.4vw 0.4vw 1vw #a9a8a8;
  z-index: 9999;
  position: sticky;
  top: 2%;
  width: 100%;
  height: 7.77083rem;
  height: 5.3rem;
  background-color: #8AEAC4;
  background-color: #28ae78;
  background-color: #59df81;
  background-color: #5bc87b;
  background-color: #53dcba;
  display: flex;
  align-items: center;
}

html body .total-contain .nav-contain .nav-logo a {
  display: flex;
  align-items: center;
  width: 14.79166rem;
  height: 5.125rem;
  padding-left: 1rem;
}

html body .total-contain .nav-contain .nav-logo a img {
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
}

html body .total-contain .nav-contain .nav-logo a span {
  margin-top: 0.4rem;
  margin-left: 1rem;
  font-size: 1.3rem;
  font-weight: bolder;
  color: #fff;
  font-family: NavFont;
  font-size: 2.4vw;
  white-space: nowrap;
}

html body .total-contain .nav-contain .tabbar-list {
  width: 100%;
}

html body .total-contain .nav-contain .tabbar-list .tabbar-info {
  margin-right: 2rem;
  height: 2.6rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

html body .total-contain .nav-contain .tabbar-list .tabbar-info .tabbar-item {
  position: relative;
}

html body .total-contain .nav-contain .tabbar-list .tabbar-info .tabbar-item .title {
  display: block;
  font-size: 1rem;
  color: #fff;
  margin: 0 0.8rem;
  height: 2rem;
  line-height: 2rem;
  padding-bottom: 0.5rem;
  font-family: NavTitle;
}

html body .total-contain .nav-contain .tabbar-list .tabbar-info .tabbar-item .item-menu {
  display: none;
  position: absolute;
  padding-top: 1rem;
  top: 1.6rem;
  background-color: #fff;
}

html body .total-contain .nav-contain .tabbar-list .tabbar-info .tabbar-item .item-menu ul li {
  width: 100%;
}

html body .total-contain .nav-contain .tabbar-list .tabbar-info .tabbar-item .item-menu ul li a {
  font-family: NavTitle;
  white-space: nowrap;
  margin: 0.3rem 1rem;
  height: 2rem;
  line-height: 2rem;
  display: block;
  color: #1b1a1a;
  font-size: 1.3vw;
}

html body .total-contain .nav-contain .tabbar-list .tabbar-info .tabbar-item .item-menu ul li a:hover {
  color: #8AEAC4;
  cursor: pointer;
}

html body .total-contain .nav-contain .tabbar-list .tabbar-info .tabbar-item .title:hover {
  color: #fff;
  text-decoration: none;
  transition: all .3s ease-in;
}

html body .total-contain .nav-contain .tabbar-list .tabbar-info .tabbar-item .title:hover + .item-menu,
html body .total-contain .nav-contain .tabbar-list .tabbar-info .tabbar-item .item-menu:hover {
  display: block;
  transition: .5s ease-in;
}

html body .total-contain .nav-contain .tabbar-img {
  display: none;
  border: none !important;
}

html body .total-contain .nav-contain .tabbar-click {
  display: none;
}

@media only screen and (max-width: 1110px) {
  html body .total-contain .top-img {
    height: 4.25rem;
  }
  html body .total-contain .nav-contain {
    position: sticky;
    height: 4.77083rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  html body .total-contain .nav-contain .nav-logo {
    margin-left: 0.1rem;
  }
  html body .total-contain .nav-contain .nav-logo a img {
    padding: 0;
    width: 3.5rem;
    height: 3.5rem;
  }
  html body .total-contain .nav-contain .tabbar-list {
    display: none;
  }
  html body .total-contain .nav-contain .tabbar-img {
    display: block;
    margin-right: 3rem;
    border: 1.2px solid #2B232C;
    box-sizing: border-box;
  }
  html body .total-contain .nav-contain .tabbar-img img {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    line-height: 2rem;
  }
  html body .total-contain .nav-contain .tabbar-img img:hover {
    cursor: pointer;
    animation: loganPlay 1.5s linear infinite;
    transition: all .35s ease;
  }
  html body .total-contain .nav-contain .tabbar-click {
    display: block;
    position: absolute;
    top: 4.77083rem;
    z-index: 999;
    width: 0%;
    background-color: #fff;
    transition: all .35s ease;
    overflow: auto;
    height: 24rem;
  }
  html body .total-contain .nav-contain .tabbar-click .click-item .click-title .click-title-item .smallTitle {
    display: block;
    width: 9.8rem;
    height: 2rem;
    line-height: 2rem;
    margin: 1.3rem auto;
    text-align: center;
    font-size: 1rem;
    font-weight: bolder;
  }
  html body .total-contain .nav-contain .tabbar-click .click-item .click-title .click-title-item .smallTitle:hover {
    cursor: pointer;
    color: black;
  }
  html body .total-contain .nav-contain .tabbar-click .click-item .click-title .click-title-item .small {
    display: none;
  }
  html body .total-contain .nav-contain .tabbar-click .click-item .click-title .click-title-item .small li {
    width: 15.78947rem;
    height: 2rem;
    line-height: 2rem;
    margin: 1.3rem auto;
  }
  html body .total-contain .nav-contain .tabbar-click .click-item .click-title .click-title-item .small li a {
    display: block;
    text-align: center;
    font-size: 1rem;
    font-weight: bolder;
    color: #8AEAC4;
  }
  html body .total-contain .nav-contain .tabbar-click .click-item .click-title .click-title-item .small li a:hover {
    color: #f9a10b;
  }
  html body .total-contain .nav-contain ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0px !important;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
}

@font-face {
  font-family: qiantuhou;
  src: url("https://static.igem.wiki/teams/4113/wiki/wiki-font/qiantuhouheiti-2.ttf");
}

@font-face {
  font-family: MvBoli;
  src: url("https://static.igem.wiki/teams/4113/wiki/wiki-font/mvboli.ttf");
}

@font-face {
  font-family: NavFont;
  src: url("https://static.igem.wiki/teams/4113/wiki/wiki-font/montserratalternates-semibold.otf");
}

@font-face {
  font-family: NavTitle;
  src: url("https://static.igem.wiki/teams/4113/wiki/wiki-font/montserratalternates-medium.otf");
}

@font-face {
  font-family: hawk;
  src: url("https://static.igem.wiki/teams/4113/wiki/wiki-font/quirky-black-2.otf");
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes loganPlay {
  0% {
    transform: rotateZ(0deg);
  }
  25% {
    transform: rotateZ(30deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  75% {
    transform: rotateZ(-30deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}

/* 滚动条设置 */
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #ce8506 !important;
  background-color: #ddace1 !important;
  background-color: #ABB882 !important;
  /* background-color: #23C5B9; */
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background-color: #fff !important;
}

.index-contain {
  width: 100%;
}

.index-contain .first-picture {
  width: 100%;
  object-fit: fill;
}

.index-contain .second-picture {
  position: relative;
  width: 100%;
  opacity: 1;
}

.index-contain .second-picture .second-item {
  width: 100%;
  min-height: calc(100vh);
  object-fit: fill;
  position: static;
}

.index-contain .second-picture img {
  position: absolute;
}

.index-contain .second-picture .shake {
  top: 0vw;
  right: -5vw;
  width: 55%;
}

.index-contain .second-picture .star {
  top: 0vw;
  left: -5vw;
  width: 40%;
}

.index-contain .second-picture .smile {
  top: 63vw;
  left: -3vw;
  width: 55%;
}

.index-contain .second-picture .arrow {
  top: 125vw;
  left: 20vw;
  width: 40%;
}

.index-contain .second-picture .tree {
  top: 115vw;
  right: 0vw;
  width: 40%;
}

.index-contain .second-picture .bottle {
  top: 200vw;
  right: 4vw;
  width: 40%;
}

.index-contain .second-picture .index-video {
  position: absolute;
  z-index: 9;
  top: 145vw;
  display: block;
  width: 60%;
  height: 450px;
  height: 37vw;
  margin: 0 auto;
  left: 0;
  right: 0;
  border-radius: 0.5vw;
  overflow: hidden;
  box-shadow: 0.6vw 0.6vw 1vw #a9a8a8;
}

.foot {
  height: auto !important;
  padding: 1rem;
}

.foot .foot-top {
  display: flex;
  align-items: center;
}

.foot .foot-top .foot-left {
  cursor: pointer;
  width: 50%;
  height: 100%;
  font-family: NavTitle;
  line-height: 4vw;
  font-size: 1.5vw;
  color: #fff;
  padding-left: 0.5rem;
}

.foot .foot-top .foot-left .index-bold {
  font-size: 2vw;
  font-weight: 900;
}

.foot .foot-top .foot-right {
  padding: 1rem;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.foot .foot-top .foot-right a {
  cursor: pointer;
  display: block;
  width: 17%;
  margin: 0.5rem;
}

.foot .foot-top .foot-right a img {
  display: block;
  width: 100%;
}

.foot .foot-bottom {
  margin-top: 1rem;
  text-align: center;
  font-weight: NavTitle;
  color: #fff;
  font-size: 1.3vw;
}