html,body{
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

html {
  background-color: #5eb9ff;
  /*background-color: #1f1e25;*/
}

*{
  box-sizing: border-box;
}

#fullpage {
  display: none;
  position: relative;
}

.absolute {
  position: absolute;
}

.section {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 14px;
  background-color: #1f1e25;
  overflow: hidden;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}

.background img {
  display: block;
  width: 100%;
}

.loading {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 100px;
  margin-top: -50px;
  margin-left: -140px;
}

.loading_progress {
  padding-top: 15px;
  font-size: 14px;
  color: #9a4021;
  text-align: center;
}

.bubbleWrap {
  position: absolute;
  overflow: hidden;
}

.bubbleWrap img {
  width: 100%;
  height: 100%;
}

.avatar {
  float: left;
  overflow: hidden;
}

.text {
  float: right;
  overflow: hidden;
}

.btn {
  position: absolute;
  width: 3.9rem;
  height: 0.55rem;
  line-height: 0.55rem;
  font-size: 0.28rem;
  right: 5.6%;
  bottom: 9.1%;
  text-align: center;
  color: #f5f5f5;
  overflow: hidden;
  cursor: pointer;
  /*opacity: .6;*/
}


.btn.red {
  /*background-image: url(./img/btn_red.png);*/
  background-image: url(//image2.vipc.cn/zt/20171219/24/btn_red.png);
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
}

.arrow>div {
  position: absolute;
  width: 40.3%;
  height: 100%;
  top: 0;
  opacity: 0;
  background-image: url(//image2.vipc.cn/zt/20171219/24/1_2_arrow.png);
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-animation: showIn 1.4s infinite ease-in-out;
  animation: showIn 1.4s infinite ease-in-out;
}

.arrow .arrow1 {
  -webkit-animation-delay: -0.48s;
  animation-delay: -0.48s;
}

.arrow .arrow2 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.arrow .arrow3 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.button {
  display: block;
  width: 14.2%;
  height: 8.8%;
  bottom: 5.6%;
}

@keyframes showIn {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

@-webkit-keyframes showIn {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

#player {
  display: none;
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 0.64rem;
  height: 0.64rem;
  z-index: 9999;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAMAAAAPkIrYAAABF1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAgIAAAADAwMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD39/fw8PAAAAD29vYAAAAAAADMzMz39/egoKCLi4sEBATu7u7y8vKqqqoAAADp6em1tbXz8/Pe3t4AAAAyMjL09PTj4+MICAgAAABSUlL19fXr6+vu7u7l5eVFRUXs7Oz19fXHx8fb29ulpaXLy8vr6+vV1dXQ0NB7e3v09PTS0tLn5+eCgoL////+/v78/Pz7+/vX19fX19fPz887OzuJiYn7+/vw8PDf39/Y2NhFRUWsrKyioqJsbGzCwsLz8/OEhIScnJz39/f////iqcO0AAAAW3RSTlMAIQEEAgkDDREHHRcWBhsIFA4cDxkQIwsf99Mu8jYmcf1HPSzNylQ6qFDeiSgk0JVCMi3ksIBhF7SlZUAxKcJzNhC6em00+vHj0Yl7SSoh8ta9qE9MPCQZl2hsO5dfZAAABydJREFUWMPtmGdz2kAQhiOaupCQAGGKA8QGx2DHvcZxT5zi9Cr+/+/Iu3sqgAhOmcmXZMcznkG6597d27vb1b3/9o9YZsL+hJPLFQrZ2AqFXA683wKBY6pqMR9aUVVN8ID7ZUUAnR3t9Je2GkHQ2Fo62Hm5J+fzwP2augxA2c+X57Vgwmrnl7eEywKX+WlR2ezpQQiawvVPHZloPyUtQ6IeH9znoQvrT1auNn1p82p5cX2Bf7q/f8w0jtvdos52agxaHPrSuL1aZFxtdc+pFs07pbGoNRrxoK1JaWs/oGdrx+VQ2h2o3QZpWokk+ZqmlWD4xz8tk7bGoQJpBJuLuqRILYaagLE8PTTPsjT6fZGi9sJ25XkwoMwdvPgwFAWQbhi2EpptGLpV0iDtIV5aNcpy0QTsx6rw1lJbkipE8nRwXMeRyRzHdcHTPdA4ai8AY2UzVxCxgoP7mkBZILlyNZ9YVZZd0Cy8sA83DwVs1moiGR43oEqTKhXJL+mGQnlkwm52HosNia0pO4qhl3wJyhofGTZDGOXVGmLVBgqiDMXlZadzYjS6PnhMClXa6dBmWFobMVuwDLeqzoBlRNxXIlSYQJhCHcGud/ZcIRM0gi1T/D3byZuFzAwPa0gGipXmRWuUoSnyI7a1K8UBLJs183LZ8DSkRq2jK2kvafoDqPYJZSUrBJYqj4Q9+2i7SFDAioBZGpJ2G6+mvCRZ99lDySeUGu22TLbILIZd8UgYw+Dl/Q55OcWCrD7WUIKVDOhmlGDl3VFkN0OGYT2KiFkJa9kv6QpNPLWIyIcPlOxJCMQk+fIotnXNcPNmCNM/IC82rWlhiMouokUorDMtzRhLSVjXnRKGIpRYEdewELFFFsZLmYw4D4InYIlHyTw5swpWbNsVi5/nCiqEPQmCE01EbDy3zpAQm5AVx3I263rgG/wCZnfsIdJiiKUiR8ZcfClcTCtmVmJ1CKtSDFgYnFzWJodgEuT8OkXLdjFrmvX1TcjaGGg2DSVhrr0eBM8nncSA/DbnfDRHitV79Fawml3JcIvZzD0WhoD1JXYyZPHPS1ALF5E/Zm4GqxnBmnVJL+eJhSflFdwLHBd4nbC2gqBDKe+S3DRro9d7tCBYFU8BiwPjHgfB1qQz2CdOg5aRXCf9aVa92ey9bySsnBj1CdkKVjyK94mDEyTM+cIsVre+sdH8RgK7UsQqFOU9JIXkc/ATlsssofbeDNag263XN95B4EDSBeteQQ1ZWPwJFvvI2ZWbZtF+bA1aLfC2RoOWZpQFK6fKt+QjFnKCVebY84rMZrUqdOAejiqS2Mz8SKbYp1mUE3NY4PD9vc/HNyItWC+REymWS7k6x0egLA8X77Fu0EktWKp8iVxNs1axh6LYz2Z5uMHLZUVx6CrIiNjTHkrF3qG9ncqJjNjCzCrh6pXJ8lwuiZygvT2dE0VnD2fOq/FczYgq2sQOjlgubtuiqFgzPIpS4tVkrvLkJwjY2B4CiaroIk4pndaRYwlFWfwRivfQLs7CyQMh3vILyd4m0tGXm6ejpzdfPhCrwiNw0odFPu9t3PMX02cezpzyJzjZDqcgUZ/PR2PWbWniNAAIJgScwsVNKTlz2PjA7SNXorMQqGejcau3fF0hyWTsC8YscUb48VmYOPkxwKIIvXDwYDTJ6krMGr+5jgJ4EocreQAnjW1ETBy42az6dJLVpOOhGs/OshCtbboikrsjcbJTi647U81Psl436+KoiVF8odY6kBW5OOGkvko1k2VQGsmTPr6Njua4hDTJw9VZN1d43S1QLaej3K46t+Ox33oPH3UXrPj1U6rlhqhkUjUAnCRhnQbWErWJ67j2VZITJ+97uMqMKLkzQBWxho1OJEu4mDhJwrxDqn1xqiio/CrL7968Hr1+8+7rox5OeYtdCVEq175c9nF9MV1/qVXUVBfcveiGbVhSq46bDEaolk+7K9oRp1CFjIeH6VqOYVwGlVa5V6AuQ6sM6hvNXq/X3ABKuEI7AmHnXgEosUmnUZxj5KX2gnsYy7NQeLcGuDHqXbEZqVQiUeou9zBcI6dr38RLFzXtoeit0K1Q04ARGBKW1QWQjta4txKouCZPw0RN21kQPV8JNNFc2dSVUT2uIlI0U4dR1uxeQSQghQyw4fOoF7UskIyolznbXRO96BCxIpQS9zBpYQyDm1JnP+mRjz8Ze7fHR7vrAJFtI63YcUbNadS4dPcQ9nb/B717WxL9kjen50uUuaIV27w4qU2BTi42JRg3cUkvOg9WdRSWhmZ9+Xn/wcNGrdZ4uLS9ujIUIBaV9MhzYSr6HZs72JRF3a59Z+8ebVwT0kQH60+DfNHtJt8U7oKxNNAM3aOM9X2m+Mg1kSGpbx3zpTGtTDgdQDJgdAKV7/wGk44aaIxTbNs2YPinABR/G/rVb1bA8QcANseRU9+s/sK3tD/+xvcdhdeLpTr6sDkAAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  overflow: hidden;
}
#player.stop {
  background-image:url('data:image/png;base64,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');
}
#player audio {
  display: none;
}

.shareTips {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.shareTips img {
  position: absolute;
  top: 30px;
  left: 30px;
  display: block;
  width: 25%;
}

@keyframes breathe {
  100% {
    /*opacity: 1;*/
    transform: scale(1);
  }
  50% {
    /*opacity: 1;*/
    transform: scale(1.1);
  }
  0% {
    /*opacity: .7;*/
    transform: scale(1);
  }
}

@-webkit-keyframes breathe {
  100% {
    /*opacity: 1;*/
    -webkit-transform: scale(1);
  }
  50% {
    /*opacity: 1;*/
    -webkit-transform: scale(1.1);
  }
  0% {
    /*opacity: .7;*/
    -webkit-transform: scale(1);
  }
}

.breathe {
  animation-timing-function: ease-in-out;
  animation-name: breathe;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe;
  -webkit-animation-duration: 1500ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}

.click {
  width: 50%;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 200%;
  background-image: url(//image2.vipc.cn/zt/20171219/24/click.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 50% auto;
}