* {margin:0; padding:0;}

html, body {
  width:100%;
  height:100%;
  font-size:100%;
  margin:0;
  padding:0;
  zoom: 0.97;
}
.title-1 {
  font-size:14px;
  margin-top:10px;
}
.title-2 {
  font-size:30px;
}

.corner {
  width:20%;
  height:auto;
  position:fixed;

}

.corner-left {
  left:0;
  bottom:0;
}

.corner-left img {
  zoom: 0.1;
}

.corner-right svg {
  zoom: 0.8;
}

.corner-right {
  right:0;
  top:0;
}

#container {
  width:80%;
  height:100%;
  margin:0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items:flex-start;
  padding-top:30px;
  box-sizing: border-box;
}

.logo {
  font-size:20px;
  height:50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top:20px;
}

.mlyimg {
  width:100%;
}


.logo p {
  display:inline-block;
  line-height: -50px;
}
.logo img {
  height:80%;
  margin-top:8px;
  margin-right:5px;
  margin-left:5px;
}

.walk-text img, .walk-text p {
  display:inline-block;
}
.walk-text p {
  font-size:30px;
}
.walk-text img{
  padding-bottom:10px;
}

.register-wrap {
  position:relative;
  width:300px;
  height:300px;
  text-align: center;
  display:inline-block;
  background: url(../images/registerbg.png) no-repeat center center;
}

.character {
  position:absolute;
  width:100px;

}

.c1 {
    left: 20px;
    top: 55px;
    transform: rotate(-10deg);
}

.c2 {
    left: 75px;
    top: 45px;
}

.c3 {
  left: 128px;
    top: 25px;
}

.c4 {
  left: 180px;
  top: 63px;
  transform: rotate(30deg);
}

.btn {
  position:absolute;
  z-index: 10;
  bottom:0;
  left:50%;
  margin-left:-100px;
}


@media (max-width: 500px) {
  .corner {
    width:45%;
    height:auto;
    position:fixed;
  }
  .title-1 {
    font-size: 3vw;
    margin-top: 10px;
  }

  .title-2 {
    font-size: 5vw;
  }

  .walk-text img {
    padding-bottom: 3px;
  }

  .walk-text p {
    font-size: 4.5vw;
  }

  .logo p {
    display: inline-block;
    line-height: -50px;
    font-size: 3vw;
  }

  .logo img {
    height: 60%;
  }
}


@media only screen
  and (min-width: 320px)
  and (max-width:900px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    #container {
      width:80%;
      height:100%;
      margin:0 auto;
      text-align: center;
      display:block;
      padding:15px 15px;
      box-sizing:border-box;
    }

    .mlyimg {
      width:60%;
      text-align: center;
    }
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 900px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    #container {
      width:80%;
      height:100%;
      margin:0 auto;
      text-align: center;
      display:block;
      padding:15px 15px;
      box-sizing:border-box;
    }

    .mlyimg {
      width:60%;
      text-align: center;
    }
}




.delay1 {
  animation-delay: 0.35s;
  -webkit-animation-delay:0.35s;
}

.delay2 {
  animation-delay: 0.75s;
  -webkit-animation-delay:0.75s;
}

.delay3 {
  animation-delay: 0.95s;
  -webkit-animation-delay: 0.95s;
}


.delay4 {
  animation-delay: 1.15;
  -webkit-animation-delay: 1.15s;
}

.delay5 {
  animation-delay: 1.35s;
  -webkit-animation-delay: 1.35s;
}