html,
body {
  background: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.page1 {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("../images/select-bg.png") no-repeat center center;
  background-size: 100% 100%;
  z-index: 5;
}

.page1-bg {
  position: absolute;
  top: 1.7rem;
  left: 0;
  width: 100%;
  padding-top: 93%;
  background: url("../images/_page1-bg2.png") no-repeat;
  background-size: 100% 100%;
}

.page1-btn {
  position: absolute;
  display: block;
  width: 48%;
  left: 26%;
  cursor: pointer;
}

.page1 .btn-male {
  bottom: 21%;
}

.page1 .btn-female {
  bottom: 8%;
}

.page-select {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("../images/select-bg.png") no-repeat center center;
  background-size: 100% 100%;
  z-index: 5;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.select-title {
  color: #000;
  font-weight: bold;
  font-size: 0.724rem;
  text-indent: .6em;
  background: #ffde00;
  border-radius: 1rem;
}

.select-desc {
  color: #fff;
  font-size: 0.563rem;
  margin: 0.3rem 0;
}

.select-btn {
  cursor: pointer;
  display: block;
  width: 5.73rem;
  margin: 0.25rem 0;
}

.page1-btn:active,
.select-btn:active,
.result-btn:active {
  -webkit-transform: translate(1%, 1%);
  transform: translate(1%, 1%);
}

.page-pre {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 2;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.pre-ico {
  display: block;
  width: 3.44rem;
  margin: 0 auto;
}

.pre-loading {
  position: relative;
  display: block;
  margin: 0.46667rem auto 0.33333rem;
  width: 6.24rem;
  height: 0.52rem;
  background: url("../images/_loading-1.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}

.pre-loading-track {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: url("../images/_loading-2.png") no-repeat;
  background-size: 6.24rem 0.52rem;
}

.pre-text {
  display: block;
  width: 2.13rem;
  margin: 0 auto;
}

.chat-wrap {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 1px;
  background: #ebebeb;
  display: none;
  overflow: auto;
  -webkit-animation: myFadeInLeft .3s 1;
  animation: myFadeInLeft .3s 1;
}

.chat {
  padding-top: 1px;
}

.chat-item {
  margin: 14px 10px;
  transition: 1s;
}

.chat-item::after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transition: .3s;
}

.highLight {
  position: relative;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  z-index: 1;
}

.highLight::after {
  content: ' ';
  position: absolute;
  left: -5px;
  top: -5px;
  right: -5px;
  bottom: -5px;
  box-shadow: 0 0 10000px 10000px rgba(0, 0, 0, 0.8);
}

.chat-time {
  text-align: center;
  margin-top: 25px;
}

.chat-time span {
  display: inline-block;
  line-height: 1;
  padding: 4px 6px;
  background: #cfcfcf;
  border-radius: 5px;
  font-size: 12px;
  color: #fff;
}

.chat-main {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: start;
  align-items: start;
}

.chat-me {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.chat-avatar {
  display: block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  -webkit-flex: none;
  flex: none;
}

.chat-avatar img {
  display: block;
  width: 100%;
  height: 100%;
}

.check-text {
  position: relative;
  background: #fff;
  border-radius: 4px;
  color: #000;
  padding: 10px;
  font-size: 16px;
  line-height: 20px;
  min-height: 20px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin-left: 11px;
  margin-right: 51px;
}

.check-text::before {
  content: ' ';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #ccc;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  border-radius: 8px;
}

.check-text::after {
  content: ' ';
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid #ccc;
  border-right-color: transparent;
  border-top-color: transparent;
  left: -7px;
  top: 13px;
  -webkit-transform: scale(0.5) rotate(45deg);
  transform: scale(0.5) rotate(45deg);
}

.chat-me .check-text {
  background: #A1E75A;
  border-color: #74BE4F;
  margin-left: 51px;
  margin-right: 11px;
}

.chat-me .check-text::after {
  left: inherit;
  right: -7px;
  background-color: #A1E75A;
  border-color: #ccc #ccc transparent transparent;
}

.chat-img {
  position: relative;
  background: #fff;
  border-radius: 4px;
  margin-left: 11px;
  margin-right: 51px;
}

.chat-img img {
  display: block;
  max-width: 135px;
  max-height: 140px;
}

.chat-me .chat-img {
  margin-left: 51px;
  margin-right: 11px;
}

.chat-article {
  position: relative;
  background: #fff;
  border-radius: 4px;
  width: 230px;
  color: #000;
  padding: 10px 10px 0;
  margin-left: 11px;
  margin-right: 51px;
}

.chat-article::before {
  content: ' ';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #ccc;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  border-radius: 8px;
}

.chat-article::after {
  content: ' ';
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid #ccc;
  border-right-color: transparent;
  border-top-color: transparent;
  left: -7px;
  top: 13px;
  -webkit-transform: scale(0.5) rotate(45deg);
  transform: scale(0.5) rotate(45deg);
}

.chat-article-title {
  font-size: 16px;
  color: #000;
  line-height: 20px;
  max-height: 40px;
  width: 100%;
  overflow: hidden;
}

.chat-article-content {
  display: -webkit-flex;
  display: flex;
  margin: 4px 0 12px;
}

.chat-article-desc {
  margin-top: -1px;
  font-size: 12px;
  color: #888;
  line-height: 14px;
  max-height: 42px;
  overflow: hidden;
  -webkit-flex: 1;
  flex: 1;
}

.chat-article-img {
  display: block;
  width: 45px;
  height: 45px;
  margin-left: 18px;
  -webkit-flex: none;
  flex: none;
}

.chat-article-bottom {
  position: relative;
  margin: 0 -10px -10px;
}

.chat-article-bottom::before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.chat-article-bottom i {
  float: left;
  width: 12px;
  height: 12px;
  font-size: 12px;
  background: url("../images/_logo36x36.jpg") no-repeat;
  background-size: cover;
  margin: 4px 4px 4px 10px;
}

.chat-article-bottom span {
  font-size: 12px;
  color: #888;
}

.chat-me .chat-article {
  margin-left: 51px;
  margin-right: 11px;
}

.chat-me .chat-article::after {
  left: inherit;
  right: -7px;
  border-color: #ccc #ccc transparent transparent;
}

.chat-bottom-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(245, 245, 247, 0.95);
  padding-bottom: env(safe-area-inset-bottom);
}

.chat-bottom {
  box-shadow: 0 -0.5px #d8d8da;
  padding: 7px 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-justify-content: center;
  justify-content: center;
}

.chat-bottom span {
  margin: 0 5px;
}

.chat-bottom span:first-of-type {
  margin-left: 10px;
}

.chat-bottom span:last-of-type {
  margin-right: 10px;
}

.chat-bottom .chat-bottom-voice {
  width: 28px;
  height: 28px;
  -webkit-flex: none;
  flex: none;
  background: url("../images/_icon-wx-voice.png");
  background-size: cover;
  margin-bottom: 4px;
}

.chat-bottom .chat-bottom-input {
  min-height: 26px;
  border: 1px solid #ddd;
  border-radius: 5px;
  -webkit-flex: 1;
  flex: 1;
  padding: 4px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  font-size: 16px;
  line-height: 20px;
  transition: .3s;
}

.chat-bottom .chat-bottom-input i {
  position: relative;
  width: 1px;
}

.chat-bottom .chat-bottom-input i::after {
  content: ' ';
  position: absolute;
  width: 2px;
  height: 90%;
  top: 5%;
  left: 2px;
  background: #3765ff;
  -webkit-animation: cursorFlash .2s infinite;
  animation: cursorFlash .2s infinite;
}

.chat-bottom .chat-bottom-face {
  width: 28px;
  height: 28px;
  -webkit-flex: none;
  flex: none;
  background: url("../images/_icon-wx-face.png");
  background-size: cover;
  margin-bottom: 4px;
}

.chat-bottom .chat-bottom-more {
  width: 28px;
  height: 28px;
  -webkit-flex: none;
  flex: none;
  background: url("../images/_icon-wx-more.png");
  background-size: cover;
  margin-bottom: 4px;
}

.chat-placeholder {
  height: 50px;
  padding-bottom: env(safe-area-inset-bottom);
}

.video {
  display: block;
  object-fit: fill;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: -1;
}

.page-rec {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  background: url("../images/_rec-bg.png");
  background-size: 100% 100%;
}

.rec-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.page-rec .rec {
  position: relative;
  margin: 0 18px;
  padding: 10px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.page-rec .rec-m {
  background-color: #CBE1FF;
}

.page-rec .rec-w {
  background-color: #FFDBE2;
}

.rec-title {
  position: relative;
  width: 236px;
  height: 36px;
  margin: -28px auto 0 auto;
  background-size: 100% 100%;
}

.rec-m .rec-title {
  background-image: url("../images/_rec-title-m.png");
}

.rec-w .rec-title {
  background-image: url("../images/_rec-title-w.png");
}

.rec-item {
  margin-top: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
}

.rec-b {
  border: 1px dashed #E5E2E2;
  border-radius: 5px;
  padding: 12px 10px;
}

.rec-member {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

.rec-avatar {
  display: block;
  width: 37px;
  height: 37px;
  border-radius: 100%;
  margin-right: 8px;
}

.rec-name {
  position: relative;
  font-size: 14px;
  color: #242529;
  line-height: 1;
}

.rec-name::after {
  content: ' ';
  position: absolute;
  margin-left: 5px;
  width: 14px;
  height: 14px;
  background-size: 100% 100%;
}

.rec-m .rec-name::after {
  background-image: url("../images/_rec-icon-m.png");
}

.rec-w .rec-name::after {
  background-image: url("../images/_rec-icon-w.png");
}

.rec-desc {
  font-size: 12px;
  color: #999EAD;
  line-height: 1;
  margin-top: 6px;
}

.rec-content {
  margin: 6px 0;
  font-size: 14px;
  line-height: 20px;
  height: 20px;
  color: #626470;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.rec-bottom {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}

.rec-topic {
  background: #149EFF;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 4px 10px;
}

.rec-btn {
  position: relative;
  width: 60px;
  height: 24px;
  border-radius: 50px;
  background-size: 100% 100%;
  cursor: pointer;
}

.rec-btn::after {
  content: ' ';
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 25px;
  height: 24px;
  background: url("../images/_rec-icon-hand.png") no-repeat;
  background-size: 100% 100%;
  -webkit-animation: aniHand 2s;
  animation: aniHand 2s;
}

.rec-m .rec-btn {
  background-image: url("../images/_rec-btn-m.png");
  box-shadow: 0 2px 4px 0 rgba(20, 130, 255, 0.3);
}

.rec-w .rec-btn {
  background-image: url("../images/_rec-btn-w.png");
  box-shadow: 0 2px 4px 0 rgba(255, 91, 125, 0.3);
}

.zy-wrap {
  box-sizing: border-box;
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #fff;
  left: 0;
  top: 0;
  z-index: 2;
  -webkit-animation: myFadeInLeft .3s 1;
  animation: myFadeInLeft .3s 1;
}

.zy {
  padding-top: 1px;
}

.zy-time {
  font-size: 13px;
  color: #999EAD;
  line-height: 17px;
  margin: 15px 0;
  text-align: center;
}

.zy-item {
  display: -webkit-flex;
  display: flex;
  margin: 10px;
}

.zy-avatar {
  display: block;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 100%;
  -webkit-flex: none;
  flex: none;
}

.zy-avatar-hidden {
  visibility: hidden;
}

.zy-text {
  margin: 0 8px;
  font-size: 16px;
  color: #121213;
  line-height: 24px;
  padding: 5px 12px;
  background: #F1F2F4;
  border-radius: 18px;
  max-width: 192px;
}

.zy-image {
  display: block;
  margin: 0 8px;
  border: 1px solid #F5F5F7;
  border-radius: 18px;
  max-width: 169px;
  max-height: 169px;
}

.zy-me {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.zy-me .zy-text {
  background: #139EFF;
  color: #fff;
}

.zy-placeholder {
  display: block;
  width: 100%;
  height: 50px;
  padding-bottom: env(safe-area-inset-bottom);
}

.zy-bottom {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 49px;
  background: #fff;
  border-top: 1px solid #DEE0E3;
  padding-bottom: env(safe-area-inset-bottom);
}

.zy-bottom-photo {
  -webkit-flex: none;
  flex: none;
  width: 24px;
  height: 21px;
  background: url("../images/_icon-zy-photo.png") no-repeat;
  background-size: 100% 100%;
  margin: 0 15px;
}

.zy-bottom-input {
  -webkit-flex: 1;
  flex: 1;
  border-radius: 5px;
  border: 1px solid #DEE0E3;
  font-size: 15px;
  line-height: 21px;
  margin-right: 20px;
  padding: 6px 7px;
  color: #E2E4E8;
}

.page-result {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  z-index: 3;
}

.page-result-m {
  background-color: #d5ecff;
}

.page-result-w {
  background-color: #ffe1e5;
}

.result-canvas {
  position: relative;
  padding: 0.80515rem 0;
}

.page-result-m .result-canvas {
  background-color: #d5ecff;
}

.page-result-w .result-canvas {
  background-color: #ffe1e5;
}

.result-h1 {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
  width: 8.28502rem;
  height: 3.17230rem;
  background-size: 100% 100%;
}

.page-result-w .result-h1 {
  background-image: url("../images/_result-title-w.png");
}

.page-result-m .result-h1 {
  background-image: url("../images/_result-title-m.png");
}

.result-num {
  position: absolute;
  width: 1.90016rem;
  height: 1.21578rem;
  right: 2.43428rem;
  top: 3rem;
  background-size: 100% 100%;
}

.result-num2 {
  background-image: url("../images/_result-num2.png");
}

.result-num3 {
  background-image: url("../images/_result-num3.png");
}

.result-num4 {
  background-image: url("../images/_result-num4.png");
}

.result-num5 {
  background-image: url("../images/_result-num5.png");
}

.result-num6 {
  background-image: url("../images/_result-num6.png");
}

.result-num7 {
  background-image: url("../images/_result-num7.png");
}

.result-num8 {
  background-image: url("../images/_result-num8.png");
}

.result-num9 {
  background-image: url("../images/_result-num9.png");
}

.result-num10 {
  background-image: url("../images/_result-num10.png");
}

.result-main {
  position: relative;
  margin: 0.48309rem 0.69243rem 0;
  padding: 1rem 0 0.80515rem;
  background: url("../images/_result-border-w.png") no-repeat;
  background-size: 100% 100%;
}

.page-result-w .result-main {
  background-image: url("../images/_result-border-w.png");
}

.page-result-m .result-main {
  background-image: url("../images/_result-border-m.png");
}

.result-main::before {
  position: absolute;
  content: ' ';
  left: -0.18519rem;
  top: -0.60386rem;
  width: 1.54589rem;
  height: 1.32850rem;
  background: url("../images/_result-btn-left.png");
  background-size: 100% 100%;
}

.result-main::after {
  position: absolute;
  content: ' ';
  right: 0.08052rem;
  bottom: 0;
  width: 1.08696rem;
  height: 0.64010rem;
  background: url("../images/_result-btn-right.png");
  background-size: 100% 100%;
}

.result-qr {
  position: absolute;
  top: 0.40258rem;
  right: 0.49919rem;
}

.result-qr-code {
  width: 1.20773rem;
  height: 1.20773rem;
  background: url("../images/_qr.png") no-repeat;
  background-size: 100% 100%;
}

.result-qr-text {
  display: block;
  height: 0.24155rem;
  margin: 0.07246rem auto 0;
}

.result-avatar-wrap {
}

.result-avatar {
  position: relative;
  display: block;
  border: 0.07246rem solid #000;
  border-radius: 100%;
  height: 3.30918rem;
  width: 3.30918rem;
  background: #fff;
  margin: 0 auto;
}

.result-tag {
  position: absolute;
  display: block;
  width: 1.83575rem;
  height: 0.75rem;
  border-radius: 0.74879rem;
  background: no-repeat center;
  background-size: 100% 100%;
}

.result-tag-pos1 {
  top: 0.32206rem;
  margin-left: -1.46538rem;
}

.result-tag-pos2 {
  top: 2.31884rem;
  margin-left: -1.23994rem;
}

.result-tag-pos3 {
  top: 1.56200rem;
  margin-left: 3.18841rem;
}

.result-tag-pos1::after,
.result-tag-pos2::after {
  content: ' ';
  position: absolute;
  right: -11px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-left-color: #000;
}

.result-tag-pos3::after {
  content: ' ';
  position: absolute;
  left: -11px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-right-color: #000;
}

.result-tag1 {
  background-image: url("../images/_result-tag1.png");
}

.result-tag2 {
  background-image: url("../images/_result-tag2.png");
}

.result-tag3 {
  background-image: url("../images/_result-tag3.png");
}

.result-tag4 {
  background-image: url("../images/_result-tag4.png");
}

.result-tag5 {
  background-image: url("../images/_result-tag5.png");
}

.result-tag6 {
  background-image: url("../images/_result-tag6.png");
}

.result-avatar img {
  display: block;
  border-radius: 100%;
  width: 100%;
  height: 100%;
}

.result-title {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin-top: 0.57971rem;
}

.result-title span {
  position: relative;
  display: block;
  color: #010101;
  font-size: 0.6rem;
  line-height: 1;
  z-index: 1;
}

.result-title span::before {
  position: absolute;
  content: ' ';
  top: 0.05636rem;
  bottom: 0.05636rem;
  left: -0.24155rem;
  right: -0.24155rem;
  background: #ffde00;
  border-radius: 0.6rem;
  z-index: -1;
}

.result-desc {
  font-size: 0.43478rem;
  margin: 0.37037rem 1.56200rem 0;
  line-height: 1.4;
  max-height: 1.217384rem;
  overflow: hidden;
  color: #000;
  text-align: center;
  font-weight: bold;
}

.result-tips {
  display: none;
  position: relative;
  margin-top: -0.56361rem;
  text-align: center;
  font-size: 0.35427rem;
  color: #000;
  z-index: 1;
}

.page-result-w .result-tips-w {
  display: block;
}

.page-result-m .result-tips-m {
  display: block;
}

.result-buttons {
  position: relative;
  z-index: 1;
  padding: 0.53945rem 0.76490rem;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}

.page-result-w .result-buttons {
  background-color: #ffe1e5;
}

.page-result-m .result-buttons {
  background-color: #d5ecff;
}

.result-btn {
  width: 3.94525rem;
  height: 1.43317rem;
  background-size: 100% 100%;
  cursor: pointer;
}

.page-result-w .result-btn-go {
  background-image: url("../images/_result-btn-w.gif");
}

.page-result-m .result-btn-go {
  background-image: url("../images/_result-btn-m.gif");
}

.result-btn-share {
  background-image: url("../images/_result-btn-share2.png");
}

.share-mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../images/_share-mask.png");
  background-size: 100% 100%;
  z-index: 10;
  -webkit-animation: myFadeIn 300ms;
  animation: myFadeIn 300ms;
  display: none;
  cursor: pointer;
}

.share-tips {
  pointer-events: none;
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  -webkit-animation: aniTips .3s;
  animation: aniTips .3s;
  font-size: 16px;
}

.share-tips-text {
  margin: 40px;
  padding: 15px;
  background: #7a8faf;
  color: #fff;
  line-height: 1.5;
  border-radius: 10px;
}

@-webkit-keyframes myFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes myFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes aniHand {
  0%,
  90% {
    opacity: 0;
    -webkit-transform: translate(100%, 100%);
    transform: translate(100%, 100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes aniHand {
  0%,
  90% {
    opacity: 0;
    -webkit-transform: translate(100%, 100%);
    transform: translate(100%, 100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@-webkit-keyframes myFadeInLeft {
  from {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes myFadeInLeft {
  from {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes cursorFlash {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cursorFlash {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes aniTips {
  from {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes aniTips {
  from {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/*base code*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

/*the animation definition*/

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  10%,
  20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  10%,
  20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
  -webkit-animation: tada 1s infinite;
  animation: tada 1s infinite;
}