body, html, .page, .page-box {
  padding: 0;
  margin: 0;
  width: 100%;
}

.owo-animation {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.owo-animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.owo-animation-forward {
  z-index: 99;
}

img {
  border: none;
}

[route-active="false"] {
  display: none;
}

/* 清除浮动 */
.clear:after {
  content: "";
  height: 0;
  line-height: 0;
  display: block;
  visibility: hidden;
  clear: both;
  zoom: 1;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.loading-box {
  width: 100%;
  height: 100%;
  background-image: url('../resource/loading-bg.jpg');
}

.loading-box .loading {
  position: absolute;
  left: 0;
  right: 0;
  top: -16%;
  bottom: 0;
  margin: auto;
}

.loading-box .loading-bar {
  position: absolute;
  top: 0%;
  bottom: 3%;
  height: 20px;
  background-color: white;
  width: 80%;
  margin: auto;
  left: 0;
  right: 0;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 2px 3px 9px #5d739c;
}

.loading-box .num-bar {
  background-color: #61b0ad;
  height: 20px;
  border-radius: 20px;
  width: 0%;
  transition: width 0.5s;
}

.loading-box .num,
.loading-box .text {
  position: absolute;
  top: 0%;
  bottom: -8%;
  margin: auto;
  line-height: 50px;
  height: 50px;
  font-size: 36px;
  width: 100%;
  text-align: center;
  color: white;
  font-weight: bold;
}

.loading-box .text {
  bottom: -14%;
}

[o-animation="floatUpDownSmall"] {
  -webkit-animation: floatUpDownSmall 3s linear infinite;
  animation: floatUpDownSmall 3s linear infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-webkit-keyframes floatUpDownSmall {
  0% { transform: translateY(-2px);}
  50% {transform: translateY(2px);}
  100% {transform: translateY(-2px);}
}

@keyframes floatUpDownSmall {
  0% { transform: translateY(-2px);}
  50% {transform: translateY(2px);}
  100% {transform: translateY(-2px);}
}

@-webkit-keyframes flickerSmall {
  from {
    opacity: 100%;
  }

  to {
    opacity: 70%;
  }
}

@keyframes flickerSmall {
  from {
    opacity: 100%;
  }

  to {
    opacity: 70%;
  }
}

[o-animation="flickerSmall"] {
  -webkit-animation: flickerSmall 4s linear 0s infinite alternate;
  animation: flickerSmall 4s linear 0s infinite alternate;
}

[o-animation="shrink"] {
  -webkit-animation: shrink 1s linear alternate infinite;
  animation: shrink 1s linear alternate infinite;
}
@-webkit-keyframes shrink{
  0%{-webkit-transform:scale(0.9);}
  100%{-webkit-transform:scale(1);}
}
@keyframes shrink{
  0%{transform:scale(0.9);}
  100%{transform:scale(1);}
}

.page-1 {
  height: 100%;
}

.page-1 .so-0 {
  left: 0px;
  top: 0px;
  width: 750px;
  height: 1507px;
  z-index: 0;
}

.page-1 .so-1 {
  left: 187px;
  top: 230px;
  z-index: -1;
}

.page-1 .so-2 {
  left: 290px;
  top: 115px;
}

.page-1 .so-3 {
  left: 0px;
  top: 1331px;
  z-index: -3;
}

.page-1 .so-4 {
  left: 247px;
  top: 413px;
  z-index: -4;
}

.page-1 .so-5 {
  left: 0px;
  top: 1147px;
  z-index: -5;
}

.page-1 .so-6 {
  left: 0px;
  top: 0px;
  z-index: -6;
}

.page-1 .so-7 {
  left: 0px;
  top: 862px;
  z-index: -7;
}

.page-1 .so-8 {
  left: 0px;
  top: 0px;
  z-index: -8;
}

.page-1 .button {
  position: absolute;
  left: 284px;
  top: 920px;
  font-size: 40px;
  line-height: 80px;
}

[o-animation="floatUpDown"] {
  -webkit-animation: floatUpDown 3s linear infinite;
  animation: floatUpDown 3s linear infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-webkit-keyframes floatUpDown {
  0% { transform: translateY(-4vh);}
  50% {transform: translateY(-8vh);}
  100% {transform: translateY(-4vh);}
}

@-webkit-keyframes float {
  0% { transform: translateY(-4vh);}
  50% {transform: translateY(-8vh);}
  100% {transform: translateY(-4vh);}
}

@keyframes float {
  0% { transform: translateY(-4vh);}
  50% {transform: translateY(-8vh);}
  100% {transform: translateY(-4vh);}
}

.page2 {
  background-image: url('../resource/bg2.jpg');
}

.page2 .icon-list-1 {
  display: block;
  margin: 0 auto;
  margin-top: 30px;
}

.page2 .icon-list-2,
.page2 .icon-list-3 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  margin: 0 auto;
}

.page2 .icon-list-3 {
  z-index: 100;
}

.page2 .ind {
  position: absolute;
  bottom: 128px;
  left: 100px;
  right: 0;
  margin: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
}

.page2 .newmessage {
  position: absolute;
  left: 10px;
  right: 0;
  top: -140px;
  transition: top 1s;
  z-index: 100;
}

.page2 .blinker {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99;
  left: 0;
  top: 0;
  transition: opacity 1s;
  opacity: 0;
}

.page2 .blinker .guide {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 300px;
  height: 200px;
  top: 340px;
}

.page2 .blinker .text {
  color: white;
  line-height: 80px;
  font-size: 34px;
  text-align: center;
}

.page2 .blinker img {
  display: block;
  margin: 0 auto;
}
.menu-1 .china-box {
  background-color: #f7f7f7;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  transform: translate3d(0, 0, 0);
  height: 150px;
}

.menu-1 .china-message {
  position: absolute;
  left: 0px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.menu-1 .notice {
  position: absolute;
  left: 110px;
  top: 12px;
}

.menu-1 .duihua {
  color: #b5afaf;
  position: absolute;
  top: 88px;
  left: 155px;
  font-size: 28px;
  line-height: 30px;
}

.menu-1 .blinker3 {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99;
  transition: opacity 1s;
  left: 0;
  top: 0;
  opacity: 0;
  display: none;
}

.menu-1 .blinker3 .guide {
  position: absolute;
  left: 200px;
  right: 0;
  margin: auto;
  width: 300px;
  height: 200px;
  bottom: 295px;
}

.menu-1 .blinker3 .text {
  color: white;
  line-height: 80px;
  font-size: 34px;
  text-align: center;
}

.menu-1 .blinker3 img {
  display: block;
  margin: 0 auto;
}
.menu-2 img {
  display: block;
  margin: 0px auto;
}

.menu-2 .notice {
  position: absolute;
  left: 115px;
  top: 15px;
}

.menu-2 .blinker,
.menu-2 .blinker2 {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99;
  left: 0;
  top: 0;
  transition: opacity 1s;
  opacity: 0;
}

.menu-2 .blinker .guide,
.menu-2 .blinker2 .guide {
  position: absolute;
  left: -205px;
  right: 0;
  margin: auto;
  width: 300px;
  height: 200px;
  top: 320px;
}

.menu-2 .blinker .text,
.menu-2 .blinker2 .text {
  color: white;
  line-height: 80px;
  font-size: 34px;
  text-align: center;
}

.menu-2 .blinker img,
.menu-2 .blinker2 img {
  display: block;
  margin: 0 auto;
}

.menu-2 .blinker2 .guide {
  left: -533px;
  bottom: 330px;
  top: auto;
}

.menu-2 .h111 {
  height: 141px;
}

.menu-2 .friend-bar {
  background-color: white;
  position: absolute;
  z-index: 999;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding-top: 30px;
}
.menu-3 .top-bar {
  background-color: #ededed;
}

.menu-3 .scroll-box {
  height: 100%;
  overflow: auto;
  background-color: white;
}

.menu-3 .page-1 {
  background-color: white;
}

.menu-3 .top-image {
  width: 100%;
  display: block;
}

.menu-3 .top-image-box {
  position: relative;
}

.menu-3 .top-image-box .name {
  position: absolute;
  right: 188px;
  font-size: 32px;
  color: white;
  font-weight: bold;
  bottom: 16px;
}

.menu-3 .top-image-box .user-image {
  position: absolute;
  right: 40px;
  bottom: -50px;
}

.menu-3 .chart-box {
  border-bottom: 1px solid #dedcdc;
  padding: 30px 0;
  position: relative;
}

.menu-3 .chart-box .user-image2 {
  position: absolute;
  left: 20px;
  top: 30px;
}

.menu-3 .chart-box .chart-conn {
  padding-left: 140px;
  padding-right: 80px;
}

.menu-3 .chart-box .chart-conn p {
  font-size: 30px;
  line-height: 42px;
  color: #3a3b3b;
  margin: 5px 0;
  margin-bottom: 15px;
}

.menu-3 .chart-box .chart-conn h2 {
  font-size: 38px;
  line-height: 40px;
  color: #4f6aa2;
  font-family: "Microsoft YaHei";
  margin-bottom: 15px;
}

.menu-3 .chart-box .chart-conn img {
  display: block;
}

.menu-3 .chart-box .chart-conn .local {
  height: 40px;
  background-repeat: no-repeat;
  background-position: center left;
  margin-top: 20px;
}

.menu-3 .time-box {
  font-size: 28px;
  line-height: 60px;
  color: #3a3b3b;
  margin-top: 10px;
}

.menu-3 .time-box .fr {
  color: #adaaaa;
  font-size: 40px;
}

.menu-3 .time-box .active {
  color: red;
}

.menu-3 .conn-text {
  margin: 30px 0;
}

.menu-3 .video-box {
  width: 417px;
  height: 276px;
  overflow: hidden;
  position: relative;
}

.menu-3 .video-box video {
  width: 100%;
  height: 100%;
  background-color: black;
}

.menu-3 .video-box .show-image {
  position: absolute;
  left: -50%;
  right: -50%;
  top: -50%;
  bottom: -50%;
  margin: auto;
  min-width: 100%;
  min-height: 100%;
}

.menu-3 .video-box .cover {
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.menu-3 .video-box .cover img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}

.menu-3 .image-more .image-more-item {
  width: 255px;
  margin-right: 10px;
  overflow: hidden;
  height: 164px;
  margin-top: 10px;
  position: relative;
}

.menu-3 .image-more .image-more-item img {
  position: absolute;
  left: -50%;
  right: -50%;
  top: -50%;
  bottom: -50%;
  margin: auto;
}

.menu-3 .image-more-2 .image-more-item {
  width: 166px;
  margin-right: 10px;
  overflow: hidden;
  height: 166px;
  margin-top: 10px;
  position: relative;
}

.menu-3 .image-more-2 .image-more-item img {
  position: absolute;
  left: -50%;
  right: -50%;
  top: -50%;
  bottom: -50%;
  margin: auto;
}

.menu-3 .float-ad {
  position: absolute;
  right: 60px;
  top: 45px;
}

.menu-3 .smartphoto {
  display: block;
  position: relative;
}

.menu-3 .smartphoto img {
  min-width: 100%;
  min-height: 100%;
}

.menu-3 .share-button {
  display: block;
  margin: 25px auto;
}

.menu-3 .chart-box a {
  display: block;
}

.menu-3 .select-box {
  background-color: #f2f1f1;
  display: flex;
}

.menu-3 .select-box .select-icon {
  width: 100%;
  height: 60px;
  background-image: url('../resource/lan.png');
  background-repeat: no-repeat;
  background-position: center;
  height: 100px;
}

.menu-3 .select-box .select-box-item {
  width: 25%;
  font-size: 30px;
  color: #6a84b4;
  line-height: 40px;
  text-align: center;
}

.menu-3 .select-box .active .select-icon {
  background-image: url('../resource/hong.png');
}

.menu-3 .select-box .active span {
  color: #f2343f;
}
.menu-3 {
  background-color: #ededed;
}

.menu-3 .top-bar-me {
  background-color: white;
  display: flex;
  padding: 3% 8%;
}

.menu-3 .right {
  padding-left: 20px;
}

.menu-3 .right span {
  line-height: 60px;
  font-size: 40px;
  font-weight: bold;
  display: block;
}

.menu-3 .right p {
  line-height: 54px;
  font-size: 28px;
  color: #b4afaf;
  font-weight: bold;
}

.menu-3 .message {
  background-color: white;
  font-size: 36px;
  line-height: 70px;
  text-indent: 2em;
  padding: 2% 4%;
  margin-top: 40px;
}
.page-3 {
  background-color: #ededed;
}

.page-3 .message-box {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background-color: white;
  height: calc(100% - 180px);
}

.page-3 .xiaoxi {
  margin: 0 auto;
  margin-top: 170px;
  display: block;
}

.page-3 .bottom-bar {
  position: absolute;
  width: 100%;
  display: flex;
  background-color: #f6f6f6;
  bottom: 0;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
}

.page-3 .bottom-bar .bottom-bar-item {
  width: 25%;
  height: 110px;
  padding-top: 10px;
  position: relative;
}

.page-3 .bottom-bar .bottom-bar-item .notice-icon {
  position: absolute;
  right: 46px;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 15px;
  background-color: #dd391f;
  display: none;
}

.page-3 .bottom-bar .ico {
  display: block;
  margin: 0 auto;
  width: 64px;
  height: 64px;
}

.page-3 .bottom-bar span {
  display: block;
  font-size: 28px;
  text-align: center;
  font-weight: bold;
  line-height: 45px;
}

.page-3 .active {
  color: #51b963;
}

.page-3 .active svg,
.page-3 .active path {
  fill: #51b963;
}

.page-3 .router-item {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
}
.page-4 .title-bar {
  position: relative;
  height: 78px;
  width: 100%;
  text-align: center;
  line-height: 78px;
  font-size: 36px;
  font-weight: bold;
  background-color: white;
  border-bottom: 1px solid #bfbfbf;
}

.page-4 .back-button {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0 30px;
}

.page-4 p {
  font-size: 43px;
  line-height: 64px;
  width: 94%;
  margin: 2% auto;
  text-indent: 2em;
}
.friend .friend-add {
  margin: 0 auto;
  display: block;
  padding-top: 30px;
}

.friend .add-button {
  width: 140px;
  height: 60px;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  right: 40px;
  top: 100px;
  background-image: url('../resource/jieshou.png');
}
.file {
  background-color: #ededed;
}

.file .conn-box {
  position: absolute;
  width: 100%;
  background-image: url('../resource/liaotian-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  padding-top: 180px;
}

.file .title-bar {
  position: absolute;
  height: 78px;
  width: 100%;
  text-align: center;
  line-height: 78px;
  font-size: 36px;
  font-weight: bold;
  background-color: white;
  border-bottom: 1px solid #bfbfbf;
  z-index: 9;
}

.file .back-button {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0 30px;
}

.file .message-item {
  z-index: 999;
}

.file .duihua {
  position: absolute;
  left: 165px;
  top: 205px;
  z-index: 999;
  font-size: 30px;
  line-height: 37px;
  width: 389px;
  word-break: break-all;
  text-indent: 2em;
  color: #535151;
}

.file .duihua-2 {
  position: absolute;
  right: -78px;
  top: 45px;
  z-index: 999;
  font-size: 30px;
  line-height: 37px;
  width: 389px;
  word-break: break-all;
  text-indent: 2em;
  color: #535151;
}

.file .duihua-3 {
  position: absolute;
  left: 99px;
  top: 35px;
  z-index: 999;
  font-size: 30px;
  line-height: 37px;
  width: 489px;
  word-break: break-all;
  text-indent: 2em;
  color: #535151;
}

.file .message-box {
  padding: 15px 20px;
  position: relative;
}
.top-bar {
  background-image: url('../resource/top-bar.png');
  height: 30px;
  background-repeat: no-repeat;
  background-position: center center;
  text-align: center;
  line-height: 33px;
  font-size: 18px;
  font-weight: bold;
  font-family: "Microsoft YaHei";
  color: #484948;
  background-size: 92% auto;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #ededed;
  opacity: 0;
}
.page5 {
  background-image: url('../resource/share-bg.jpg');
}

.page5 .change {
  position: absolute;
  right: 45px;
  top: 240px;
  z-index: 1000;
}

.page5 .share-image {
  position: absolute;
  left: 240px;
  margin: 0 auto;
  top: 390px;
  width: 440px;
}

.page5 p {
  position: absolute;
  left: 76px;
  top: 890px;
  font-size: 36px;
  line-height: 67px;
  width: 600px;
  color: #563717;
}

.page5 .canvas-image {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  opacity: 0;
}
.music-menu {
  position: absolute;
  right: 10px;
  top: 10%;
  z-index: 9;
  width: 35px;
  height: 35px;
  display: none;
}

.music-menu .music-icon {
  width: 35px;
  height: 35px;
}

.music-menu .active {
  -webkit-animation: musicturn 12s linear infinite;
          animation: musicturn 12s linear infinite;
}

@-webkit-keyframes musicturn {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes musicturn {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}
/* 页面切换动画 */
.o-page-rotatePushLeft {
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotatePushLeft .8s both ease;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotatePushLeft .8s both ease;
	transform-origin: 0% 50%;
	animation: rotatePushLeft .8s both ease;
}
@-webkit-keyframes rotatePushLeft {
	to { opacity: 0; -webkit-transform: rotateY(90deg); }
}
@-moz-keyframes rotatePushLeft {
	to { opacity: 0; -moz-transform: rotateY(90deg); }
}
@keyframes rotatePushLeft {
	to { opacity: 0; transform: rotateY(90deg); }
}
.o-page-moveFromRight {
	-webkit-animation: moveFromRight .6s ease both;
	-moz-animation: moveFromRight .6s ease both;
	animation: moveFromRight .6s ease both;
}

@-webkit-keyframes moveFromRight {
	from { -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveFromRight {
	from { -moz-transform: translateX(100%); }
}
@keyframes moveFromRight {
	from { transform: translateX(100%); }
}
.o-page-ontop {
	z-index: 999;
}
.o-page-moveToLeft {
	-webkit-animation: moveToLeft .6s ease both;
	-moz-animation: moveToLeft .6s ease both;
	animation: moveToLeft .6s ease both;
}

@-webkit-keyframes moveToLeft {
	to { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveToLeft {
	to { -moz-transform: translateX(-100%); }
}
@keyframes moveToLeft {
	to { transform: translateX(-100%); }
}
.o-page-rotatePushRight {
	-webkit-transform-origin: 100% 50%;
	-webkit-animation: rotatePushRight .8s both ease;
	-moz-transform-origin: 100% 50%;
	-moz-animation: rotatePushRight .8s both ease;
	transform-origin: 100% 50%;
	animation: rotatePushRight .8s both ease;
}
@-webkit-keyframes rotatePushRight {
	to { opacity: 0; -webkit-transform: rotateY(-90deg); }
}
@-moz-keyframes rotatePushRight {
	to { opacity: 0; -moz-transform: rotateY(-90deg); }
}
@keyframes rotatePushRight {
	to { opacity: 0; transform: rotateY(-90deg); }
}
.o-page-moveFromLeft {
	-webkit-animation: moveFromLeft .6s ease both;
	-moz-animation: moveFromLeft .6s ease both;
	animation: moveFromLeft .6s ease both;
}

@-webkit-keyframes moveFromLeft {
	from { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveFromLeft {
	from { -moz-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
	from { transform: translateX(-100%); }
}
.o-page-moveToRight {
	-webkit-animation: moveToRight .6s ease both;
	-moz-animation: moveToRight .6s ease both;
	animation: moveToRight .6s ease both;
}

@-webkit-keyframes moveToRight { 
	to { -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveToRight { 
	to { -moz-transform: translateX(100%); }
}
@keyframes moveToRight { 
	to { transform: translateX(100%); }
}
.o-page-scaleDown {
	-webkit-animation: scaleDown .7s ease both;
	-moz-animation: scaleDown .7s ease both;
	animation: scaleDown .7s ease both;
}

@-webkit-keyframes scaleDown {
	to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleDown {
	to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleDown {
	to { opacity: 0; transform: scale(.8); }
}
.o-page-scaleUp {
	-webkit-animation: scaleUp .7s ease both;
	-moz-animation: scaleUp .7s ease both;
	animation: scaleUp .7s ease both;
}

@-webkit-keyframes scaleUp {
	from { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleUp {
	from { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleUp {
	from { opacity: 0; transform: scale(.8); }
}
.o-page-scaleUpDown {
	-webkit-animation: scaleUpDown .5s ease both;
	-moz-animation: scaleUpDown .5s ease both;
	animation: scaleUpDown .5s ease both;
}

@-webkit-keyframes scaleUpDown {
	from { opacity: 0; -webkit-transform: scale(1.2); }
}
@-moz-keyframes scaleUpDown {
	from { opacity: 0; -moz-transform: scale(1.2); }
}
@keyframes scaleUpDown {
	from { opacity: 0; transform: scale(1.2); }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-180vw, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  animation-name: slideInLeft;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  animation-duration: 0.75s;
  animation-name: bounceIn;
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.bounceInRight {
  animation-name: bounceInRight;
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }

  75% {
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    transform: translate3d(5px, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  animation-name: bounceInLeft;
}