@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* easy hover */
html, body {
  margin: 0;
  padding: 0;
}

.whitemask {
  background: #ffffff;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9100;
  opacity: 0;
}

.dn {
  display: none;
}

.skip {
  opacity: 0;
  z-index: 9999;
  position: fixed;
  top: 5%;
  right: 5%;
}

.fadeIn {
  opacity: 1 !important;
  -webkit-transition-delay: 2s;
  transition-delay: 2s;
}

.main {
  width: 100%;
  height: 100vh;
}

.main img {
  width: 100%;
}

.motion {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9000;
  background: #ffffff;
}

.motion .motion-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 905px;
  margin-left: auto;
  margin-right: auto;
}

.motion .motion-inner {
  background: #ffffff;
  width: 100%;
  max-width: 905px;
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: relative;
}

@media screen and (max-width: 599px) {
  .motion .motion-inner {
    height: 100vw;
  }
}

.motion .motion-inner .logo-20th {
  z-index: 3;
  width: 100%;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}

.motion .motion-inner .logo-20th img {
  width: 100%;
}

.motion .motion-inner .character_dot {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 2;
  padding-left: 1%;
  padding-right: 1%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  width: 100%;
  max-width: 100vh;
  margin-left: auto;
  margin-right: auto;
}

.motion .motion-inner .chacter_dot-item {
  display: inline-block;
  width: 14%;
  height: auto;
  margin-right: 1px;
  margin-bottom: 1px;
  opacity: 0;
  background-color: #36B78F;
  padding: 0;
  -webkit-transition: all 0.2s cubic-bezier(0.44, 0.07, 0.23, 1.11);
  transition: all 0.2s cubic-bezier(0.44, 0.07, 0.23, 1.11);
}

.motion .motion-inner .chacter_dot-item img {
  display: block;
  width: 100%;
}

.motion .motion-inner .chacter_dot-item.-chara1 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/1.png?_v=1) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara2 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/2.png?_v=2) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara3 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/3.png?_v=3) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara4 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/4.png?_v=4) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara5 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/5.png?_v=5) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara6 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/6.png?_v=6) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara7 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/7.png?_v=7) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara8 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/8.png?_v=8) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara9 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/9.png?_v=9) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara10 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/10.png?_v=10) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara11 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/11.png?_v=11) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara12 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/12.png?_v=12) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara13 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/13.png?_v=13) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara14 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/14.png?_v=14) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara15 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/15.png?_v=15) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara16 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/16.png?_v=16) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara17 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/17.png?_v=17) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara18 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/18.png?_v=18) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara19 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/19.png?_v=19) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara20 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/20.png?_v=20) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara21 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/21.png?_v=21) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara22 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/22.png?_v=22) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara23 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/23.png?_v=23) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara24 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/24.png?_v=24) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara25 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/25.png?_v=25) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara26 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/26.png?_v=26) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara27 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/27.png?_v=27) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara28 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/28.png?_v=28) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara29 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/29.png?_v=29) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara30 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/30.png?_v=30) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara31 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/31.png?_v=31) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara32 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/32.png?_v=32) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara33 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/33.png?_v=33) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara34 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/34.png?_v=34) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara35 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/35.png?_v=35) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara36 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/36.png?_v=36) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara37 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/37.png?_v=37) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara38 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/38.png?_v=38) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara39 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/39.png?_v=39) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara40 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/40.png?_v=40) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara41 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/41.png?_v=41) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara42 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/42.png?_v=42) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara43 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/43.png?_v=43) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara44 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/44.png?_v=44) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara45 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/45.png?_v=45) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara46 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/46.png?_v=46) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara47 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/47.png?_v=47) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara48 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/48.png?_v=48) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}

.motion .motion-inner .chacter_dot-item.-chara49 {
  background: url(/movie/digimon-adventure/last-evolution/img/20th/49.png?_v=49) no-repeat;
  background-color: #36B78F;
  background-size: 100% 100%;
}
