/*** cover animation ***/
.main-cover {
  overflow: hidden;
}

.main-cover__image {
  will-change: transform;
  transition: 5s ease-in-out transform;
}
/*** cover animation end ***/

/*** lattice ***/
.lattice {
  overflow: hidden;
  width: 100%;
  margin: 3em 0;
}

.lattice__wrapper {
  position: relative;
  width: 100%;
}

@media(max-width: 600px) {
  .lattice {
    margin: 1em 0;
  }

  .lattice__wrapper {
    margin-left: -50%;
    width: 200%;
  }
}

.lattice__illustration {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 2;
}

.lattice__top-section,
.lattice__bottom-section {
  position: absolute;
  width: 24.8%;
  background: 50% 50% / 100% auto;

  z-index: 1;
}

.lattice__top-section::after,
.lattice__bottom-section::after {
  content: '';
  display: block;
  box-sizing: border-box;
  border: 1vw solid #000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@media(min-width: 601px) {
  .lattice__top-section::after,
  .lattice__bottom-section::after {
    border: 4px solid #000;
  }
}

@media(min-width: 801px) {
  .lattice__top-section::after,
  .lattice__bottom-section::after {

    border: 5px solid #000;
  }
}

@media(min-width: 1200px) {
  .lattice__top-section::after,
  .lattice__bottom-section::after {
    border: 6px solid #000;
  }
}

.lattice__top-section {
  overflow: hidden;
  bottom: 59.8%;
  height: 35.3%;
}

.lattice__top-section::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1100%;
  background: url('top-04.png') 0 0 / 100% auto;
  z-index: -1;

  -webkit-animation-duration: 30s;
  -webkit-animation-name: before-section;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;

  animation-duration: 30s;
  animation-name: before-section;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.lattice__bottom-section {
  overflow: hidden;
  top: 77.8%;
  height: 17.24%;
}

.lattice__bottom-section::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1100%;
  background: url('bottom-04.png') 0 0 / 100% auto;
  z-index: -1;

  -webkit-animation-duration: 30s;
  -webkit-animation-name: before-section;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;

  animation-duration: 30s;
  animation-name: before-section;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.lattice__top-section_1,
.lattice__bottom-section_1 {
  right: 75.2%;
}

.lattice__top-section_2,
.lattice__bottom-section_2 {
  left: 37.6%;
}

.lattice__top-section_3,
.lattice__bottom-section_3 {
  left: 75.2%;
}

.lattice__name {
  position: relative;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  z-index:-1;
  font-size: 100%;

  -webkit-animation-duration: 30s;
  -webkit-animation-name: lattice-name;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;

  animation-duration: 30s;
  animation-name: lattice-name;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.lattice__name-wrapper {
  position: relative;
  text-align: center;
  overflow: hidden;
  padding: 1em 0;
  height: 1.6em;
  box-shadow: inset #fff 0 0 .2em 1em;
  font-size: 150%;
  margin-bottom: -1em;
}

@-webkit-keyframes lattice-name {
  0%  { transform: translateY(0%); }
  7%  { transform: translateY(0%); }

  10%  { transform: translateY(-10.5%); }
  17%  { transform: translateY(-10.5%); }

  20%  { transform: translateY(-21%); }
  27%  { transform: translateY(-21%); }

  30%  { transform: translateY(-31.5%); }
  37%  { transform: translateY(-31.5%); }

  40%  { transform: translateY(-42%); }
  47%  { transform: translateY(-42%); }

  50%  { transform: translateY(-52.5%); }
  57%  { transform: translateY(-52.5%); }

  60%  { transform: translateY(-63%); }
  67%  { transform: translateY(-63%); }

  70%  { transform: translateY(-73.5%); }
  77%  { transform: translateY(-73.5%); }

  80%  { transform: translateY(-84%); }
  87%  { transform: translateY(-84%); }

  90%  { transform: translateY(-94.5%); }
  97%  { transform: translateY(-94.5%); }

  98.5% { transform: translateY(-100%); }
  98.501% { transform: translateY(5.5%); }
  100%  { transform: translateY(0); }
}

@keyframes lattice-name {
  0%  { transform: translateY(0%); }
  7%  { transform: translateY(0%); }

  10%  { transform: translateY(-10.5%); }
  17%  { transform: translateY(-10.5%); }

  20%  { transform: translateY(-21%); }
  27%  { transform: translateY(-21%); }

  30%  { transform: translateY(-31.5%); }
  37%  { transform: translateY(-31.5%); }

  40%  { transform: translateY(-42%); }
  47%  { transform: translateY(-42%); }

  50%  { transform: translateY(-52.5%); }
  57%  { transform: translateY(-52.5%); }

  60%  { transform: translateY(-63%); }
  67%  { transform: translateY(-63%); }

  70%  { transform: translateY(-73.5%); }
  77%  { transform: translateY(-73.5%); }

  80%  { transform: translateY(-84%); }
  87%  { transform: translateY(-84%); }

  90%  { transform: translateY(-94.5%); }
  97%  { transform: translateY(-94.5%); }

  98.5% { transform: translateY(-100%); }
  98.501% { transform: translateY(5.5%); }
  100%  { transform: translateY(0); }
}

@-webkit-keyframes before-section {
  0%  { transform: translateY(0); }
  7%  { transform: translateY(0); }

  10%  { transform: translateY(-9.091%); }
  17%  { transform: translateY(-9.091%); }

  20%  { transform: translateY(-18.182%); }
  27%  { transform: translateY(-18.182%); }

  30%  { transform: translateY(-27.273%); }
  37%  { transform: translateY(-27.273%); }

  40%  { transform: translateY(-36.364%); }
  47%  { transform: translateY(-36.364%); }

  50%  { transform: translateY(-45.455%); }
  57%  { transform: translateY(-45.455%); }

  60%  { transform: translateY(-54.546%); }
  67%  { transform: translateY(-54.546%); }

  70%  { transform: translateY(-63.637%); }
  77%  { transform: translateY(-63.637%); }

  80%  { transform: translateY(-72.728%); }
  87%  { transform: translateY(-72.728%); }

  90%  { transform: translateY(-81.819%); }
  97%  { transform: translateY(-81.819%); }

  100% { transform: translateY(-90.99%); }
}

@keyframes before-section {
  0%  { transform: translateY(0); }
  7%  { transform: translateY(0); }

  10%  { transform: translateY(-9.091%); }
  17%  { transform: translateY(-9.091%); }

  20%  { transform: translateY(-18.182%); }
  27%  { transform: translateY(-18.182%); }

  30%  { transform: translateY(-27.273%); }
  37%  { transform: translateY(-27.273%); }

  40%  { transform: translateY(-36.364%); }
  47%  { transform: translateY(-36.364%); }

  50%  { transform: translateY(-45.455%); }
  57%  { transform: translateY(-45.455%); }

  60%  { transform: translateY(-54.546%); }
  67%  { transform: translateY(-54.546%); }

  70%  { transform: translateY(-63.637%); }
  77%  { transform: translateY(-63.637%); }

  80%  { transform: translateY(-72.728%); }
  87%  { transform: translateY(-72.728%); }

  90%  { transform: translateY(-81.819%); }
  97%  { transform: translateY(-81.819%); }

  100% { transform: translateY(-90.99%); }
}
/*** lattice end ***/