.clearfix:after {
  display: block;
  width: 0;
  height: 0;
  content: ' ';
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  clear: both;
}

@keyframes moving {
  0% {
    transform: translateX(0%);
  }
  85% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes loopcircle3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loopcircle2 {
  0%, 30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loopcircle1 {
  0%, 60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes wave {
  0% {
    background-position: 0px;
  }
  50% {
    background-position: -400px;
  }
  100% {
    background-position: -1233px;
  }
}
html {
  height: 100%;
}

img {
  display: block;
  border: 0;
}

* {
  box-sizing: border-box;
}

body {
  color: #ffffff;
  background: #000000;
  font-size: 4vw;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body .outbox {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}
body .outbox .btnMenu {
  width: 8%;
  top: 1%;
  left: 4%;
  position: absolute;
  z-index: 199;
}
body .outbox .showMenu {
  position: absolute;
  z-index: 200;
}
body .outbox .showMenu #popClose {
  width: 12%;
  height: 6%;
  top: 1%;
  left: 2%;
  position: absolute;
}
body .outbox .showMenu ul {
  font-weight: bold;
  top: 17%;
  left: 11%;
  position: absolute;
}
body .outbox .showMenu ul li a {
  color: #ffffff;
  font-size: 6vw;
  line-height: 15vw;
}
body .outbox .showMenu ul li a:hover {
  text-decoration: none;
}
body .outbox .pre {
  background: rgba(5, 5, 30, 0.8);
  position: absolute;
  z-index: 990;
}
body .outbox .pre #btnCloseFilm {
  width: 9%;
  height: 25%;
  cursor: pointer;
  top: 24.5%;
  right: 4%;
  position: absolute;
}
body .outbox .pre .yt {
  width: 100%;
  left: 0%;
  position: absolute;
  yop: 10%;
  top: 30%;
}
body .outbox .pre .yt .ytWrapper {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin-bottom: 15%;
  position: absolute;
}
body .outbox .pre .yt .ytWrapper iframe {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
body .outbox .index .header {
  width: 73%;
  top: 2%;
  left: 14%;
  position: absolute;
}
body .outbox .index .slogan {
  width: 75%;
  top: 18%;
  left: 13%;
  position: absolute;
  pointer-events: none;
}
body .outbox .index .slogan img:nth-child(1) {
  margin-bottom: 19%;
}
body .outbox .index .btnGo {
  width: 100%;
  top: 22%;
  left: 0%;
  position: absolute;
}
body .outbox .chooseCity {
  width: 88.6%;
  top: 42.6%;
  left: 5.7%;
  position: absolute;
}
body .outbox .chooseCity li {
  float: left;
  width: 46.4%;
  padding-top: 33.2%;
  margin-bottom: 6.2%;
  position: relative;
}
body .outbox .chooseCity li a {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1);
}
body .outbox .chooseCity li:nth-child(odd) {
  margin-right: 6.5%;
}
body .outbox .user {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
body .outbox .user .showFb {
  width: 90%;
  top: 17%;
  left: 5%;
  position: absolute;
  background: #fff url('../images/loading-1.gif') center center no-repeat;
}
body .outbox .user #fb-share {
  width: 100%;
  display: block;
}
body .outbox .user .event {
  width: 90%;
  top: 47%;
  left: 5%;
  position: absolute;
}
body .outbox .user .event .location {
  font-size: 6vw;
  font-weight: bold;
  text-align: center;
}
body .outbox .user .event .location span.target {
  color: #fff;
  border-bottom: 3px solid #4bf64b;
  padding: 0 .2em;
  margin-left: -.2em; 
}
body .outbox .user .event .userInput {
  width: 80%;
  margin-top: 7.2%;
  left: 10%;
  position: absolute;
}
body .outbox .user .event .userInput input {
  width: 100%;
  font-size: 5vw;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  background: transparent;
  border: 0;
}
body .outbox .user .hashtag {
  top: 68.6%;
  left: 15.5%;
  width: 70%;
  position: absolute;
}
body .outbox .user .hashtag select {
  width: 95%;
  font-size: 5vw;
  font-weight: bold;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  color: #ffffff;
  background: transparent;
  border: 0;
}
body .outbox .user .btn {
  top: 77%;
  left: 6%;
  position: absolute;
}
body .outbox .user .btn a {
  display: inline-block;
}
body .outbox .user .btn .btnReset {
  width: 44%;
  margin-right: 3%;
}
body .outbox .user .btn .btnSuccess,
body .outbox .user .btn .btnDone {
  width: 44%;
}
body .outbox .share {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
body .outbox .share .showFb,
body .outbox .renew .showFb {
  width: 90%;
  top: 15%;
  left: 5%;
  position: absolute;
}
body .outbox .share .btn {
  width: 95%;
  top: 68%;
  left: 6%;
  position: absolute;
}
body .outbox .share .btn a {
  display: inline-block;
}
body .outbox .share .btn .btnFb {
  width: 44%;
  margin-bottom: 2.4%;
  margin-right: 3%;
}
body .outbox .share .btn .btnInvite {
  width: 44%;
  margin-bottom: 2.4%;
}
body .outbox .share .btn .btnForm {
  width: 44%;
  margin-right: 3%;
}
body .outbox .share .btn .btnSony {
  width: 44%;
}
body .outbox .film .yt {
  width: 100%;
  left: 0%;
  position: absolute;
  yop: 10%;
  top: 30%;
}
body .outbox .film .yt .ytWrapper {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin-bottom: 15%;
  position: absolute;
}
body .outbox .film .yt .ytWrapper iframe {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
body .outbox .film .text {
  width: 91%;
  color: #053538;
  line-height: 6.3vw;
  font-size: 4.2vw;
  text-align: center;
  top: 65%;
  left: 5%;
  position: absolute;
}
body .outbox .form .text {
  top: 24.6%;
  left: 8%;
  font-size: 5.4vw;
  font-weight: 400;
  color: #000000;
  position: absolute;
}
body .outbox .form .boxInput {
  width: 74%;
  top: 30.5%;
  left: 16%;
  position: absolute;
}
body .outbox .form .boxInput span {
  display: block;
  width: 100%;
  color: #3CEFBC;
  font-size: 4.7vw;
  font-weight: 600;
  margin-bottom: 3.4%;
}
body .outbox .form .boxInput span .inputStyle {
  display: inline-block;
  width: 73%;
  height: 11vw;
  font-size: 5vw;
  text-align: left;
  padding-left: 7%;
  color: #ffffff;
  background: transparent;
  border: 0;
}
body .outbox .form .check {
  position: absolute;
  display: block;
  width: 7vw;
  height: 7vw;
  top: 55%;
  left: 16%;
}
body .outbox .form .btnSend {
  width: 44%;
  top: 70%;
  left: 51%;
  position: absolute;
}
body .outbox .form .btnIntro {
  width: 57%;
  font-size: 4.7vw;
  top: 55%;
  left: 27%;
  position: absolute;
  line-height: 7vw;
}
body .outbox .form .btnIntro a {
  color: #F6E449;
}
body .outbox .intro a.btnClose {
  width: 11%;
  top: 7%;
  right: 9%;
  position: absolute;
  z-index: 99;
}
body .outbox .intro .imgIntro {
  width: 100%;
  left: 0;
  position: absolute;
  z-index: 90;
}

#openIntro {
  -webkit-transition: ease-in 350ms;
  -webkit-transform: scale(0);
  -webkit-transform-origin: 100% 50%;
  opacity: 0;
  transition: ease-in 350ms;
  transform: scale(0);
  transform-origin: 100% 50%;
  background: #000;
  pointer-events: none;
}

#openIntro.fadeIn {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  background: rgba(51, 27, 78, 0.9);
  pointer-events: auto;
  top: 0;
  left: 0;
  position: absolute;
}

@media (min-width: 640px) {
  body .outbox {
    width: 640px !important;
    margin: 0 auto;
    position: relative;
  }

  body .outbox .user .event {
    width: 90%;
    top: 510px;
    left: 5%;
    position: absolute;
  }

  body .outbox .user .event .location {
    font-size: 35px;
  }

  body .outbox .user .event .userInput {
    width: 80%;
    margin-top: 48px;
    left: 10%;
    position: absolute;
  }

  body .outbox .user .event .userInput input {
    display: block;
    font-size: 31px;
  }

  body .outbox .user .hashtag {
    top: 740px;
    left: 15.5%;
    position: absolute;
  }

  body .outbox .user .hashtag select {
    display: block;
    font-size: 35px;
  }

  body .outbox .form .text {
    font-size: 33px;
    top: 24.3%;
  }

  body .outbox .form .boxInput {
    top: 27%;
  }

  body .outbox .form .boxInput span .inputStyle {
    font-size: 31px;
  }

  body .outbox .form .boxInput span {
    font-size: 28px;
    margin-top: 3%;
  }

  body .outbox .form .btnIntro {
    font-size: 28px;
    line-height: 42px;
  }

  body .outbox .showMenu ul li a {
    font-size: 40px;
    line-height: 105px;
  }
}