@font-face {
  font-family: Main;
  src: url(../fonts/main.woff2) format("woff2"), url(../fonts/main.woff) format("woff");
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
img {
  width: 100%;
  display: block;
}
.app {
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: url(../image/bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.notice {
  width: 20%;
  left: 40%;
  top: 15%;
  position: absolute;
}
.cards {
  position: absolute;
  width: 50%;
  left: 25%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  top: 20%;
}
.cards .card {
  -ms-flex-preferred-size: 30%;
  flex-basis: 30%;
  position: relative;
  -webkit-transition: all ease-in 0.5s;
  transition: all ease-in 0.5s;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.cards .card1 {
  margin-top: 5px;
  -ms-flex-preferred-size: 28%;
  flex-basis: 28%;
}

.cards .card img {
  -webkit-transition: all ease 1s;
  transition: all ease 1s;
}
.cards .card img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.cards .card:hover img:first-child {
  opacity: 1;
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.cards .card:hover img:last-child {
  opacity: 0;
}
.cards .card_eff {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.arrow {
  position: absolute;
  width: 7%;
  top: 38%;
  left: 78%;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
.arrow:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.logo {
  position: absolute;
  top: 1%;
  left: 42%;
  width: 17%;
}
.button {
  position: absolute;
  bottom: 10%;
  left: 40%;
  width: 20%;
  -webkit-animation: btn 1s ease;
  animation: btn 1s ease;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes btn {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes btn {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.scene2 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../image/bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: all ease 1s;
  transition: all ease 1s;
}
.scene2 .block-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
.scene2 .notice {
  position: absolute;
  width: 45%;
  left: 20.5%;
  top: 25%;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
.scene2 .notice .toys {
  position: absolute;
  width: 70%;
  top: 45%;
  left: 14%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.scene2 .notice .toys .toy {
  -ms-flex-preferred-size: 24%;
  flex-basis: 24%;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
.scene2 .notice .toys .toy:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.scene2 .notice .toys .toy_eff {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.scene2 .girl {
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
  position: absolute;
  width: 25%;
  left: 58%;
  bottom: 0;
  opacity: 0;
}
.scene2 .girl1 {
  width: 38%;
}
.scene2 .girl2 {
  width: 28%;
}
.scene2 .girl_active {
  opacity: 1;
}
.scene2_active {
  display: block;
  -webkit-animation: s2 0.5s ease;
  animation: s2 0.5s ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes s2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes s2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.loader {
  display: none;
  width: 50%;
  position: absolute;
  top: 40%;
  left: 25%;
  opacity: 0;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
.loader .box {
  position: relative;
  width: 100%;
}
.loader .box p {
  position: absolute;
  font-family: Main;
  top: -100%;
  color: #fff;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
  font-size: 2vw;
  width: 100%;
  text-align: center;
}
.loader .box .bar {
  background-image: url(../image/br.jpg);
  position: absolute;
  top: 10%;
  left: 0.5%;
  width: 5%;
  height: 78%;
  -webkit-transition: all ease 0.1s;
  transition: all ease 0.1s;
}