@charset "UTF-8";
/* easy-animation.scss */
html {
  font-family: 'MicrosoftYaHei', '微软雅黑', 'STHeitiSC'; }

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1500px);
    -moz-transform: translateY(-1500px);
    -ms-transform: translateY(-1500px);
    -o-transform: translateY(-1500px);
    transform: translateY(-1500px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@-moz-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1500px);
    -moz-transform: translateY(-1500px);
    -ms-transform: translateY(-1500px);
    -o-transform: translateY(-1500px);
    transform: translateY(-1500px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@-ms-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1500px);
    -moz-transform: translateY(-1500px);
    -ms-transform: translateY(-1500px);
    -o-transform: translateY(-1500px);
    transform: translateY(-1500px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@-o-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1500px);
    -moz-transform: translateY(-1500px);
    -ms-transform: translateY(-1500px);
    -o-transform: translateY(-1500px);
    transform: translateY(-1500px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1500px);
    -moz-transform: translateY(-1500px);
    -ms-transform: translateY(-1500px);
    -o-transform: translateY(-1500px);
    transform: translateY(-1500px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
#container {
  width: 100%;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: relative; }

section {
  height: 100%;
  display: block; }

.m-page {
  width: 100%;
  height: 755px;
  z-index: 9;
  background: #ddd;
  overflow: hidden; }

.m-page .page-con {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; }

#page-2, #page-3, #page-4, #page-5, #page-6,
#page-7, #page-8, #page-9, #page-10, .page-11, .page-1 {
  background: url("../images/p1_bg1.jpg") bottom center no-repeat;
  background-size: 100% 100%; }

.title_bg, .title_bg_line {
  position: absolute;
  left: 50%;
  top: 48px;
  width: 328px;
  height: 328px;
  margin-left: -164px; }

.title_bg {
  background: url("../images/p1_title_bg.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .title_bg {
  -webkit-animation: title_pulse 3s linear 0s infinite;
  -moz-animation: title_pulse 3s linear 0s infinite;
  -ms-animation: title_pulse 3s linear 0s infinite;
  -o-animation: title_pulse 3s linear 0s infinite;
  animation: title_pulse 3s linear 0s infinite; }

@-webkit-keyframes title_pulse {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0.3; } }
@-moz-keyframes title_pulse {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0.3; } }
@-ms-keyframes title_pulse {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0.3; } }
@-o-keyframes title_pulse {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0.3; } }
@keyframes title_pulse {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0.3; } }
.title_bg_line {
  background: url("../images/p1_title_bg_r_line.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .title_bg_line {
  -webkit-animation: spin 30s linear 0s infinite;
  -moz-animation: spin 30s linear 0s infinite;
  -ms-animation: spin 30s linear 0s infinite;
  -o-animation: spin 30s linear 0s infinite;
  animation: spin 30s linear 0s infinite; }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-ms-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-o-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
.title_text {
  position: absolute;
  left: 28.125%;
  width: 43.75%;
  top: 170px;
  height: 110px;
  background: url("../images/p1_title.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .title_text {
  -webkit-animation: zoomOut 1s linear 0s 1;
  -moz-animation: zoomOut 1s linear 0s 1;
  -ms-animation: zoomOut 1s linear 0s 1;
  -o-animation: zoomOut 1s linear 0s 1;
  animation: zoomOut 1s linear 0s 1; }

@-webkit-keyframes zoomOut {
  0% {
    opacity: 0;
    -webkit-transform: scale(8);
    -moz-transform: scale(8);
    -ms-transform: scale(8);
    -o-transform: scale(8);
    transform: scale(8); }
  50% {
    opacity: 0.5; }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
    transform: scale(0.95); }
  90% {
    opacity: 1;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  95% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-moz-keyframes zoomOut {
  0% {
    opacity: 0;
    -webkit-transform: scale(8);
    -moz-transform: scale(8);
    -ms-transform: scale(8);
    -o-transform: scale(8);
    transform: scale(8); }
  50% {
    opacity: 0.5; }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
    transform: scale(0.95); }
  90% {
    opacity: 1;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  95% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-ms-keyframes zoomOut {
  0% {
    opacity: 0;
    -webkit-transform: scale(8);
    -moz-transform: scale(8);
    -ms-transform: scale(8);
    -o-transform: scale(8);
    transform: scale(8); }
  50% {
    opacity: 0.5; }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
    transform: scale(0.95); }
  90% {
    opacity: 1;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  95% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-o-keyframes zoomOut {
  0% {
    opacity: 0;
    -webkit-transform: scale(8);
    -moz-transform: scale(8);
    -ms-transform: scale(8);
    -o-transform: scale(8);
    transform: scale(8); }
  50% {
    opacity: 0.5; }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
    transform: scale(0.95); }
  90% {
    opacity: 1;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  95% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@keyframes zoomOut {
  0% {
    opacity: 0;
    -webkit-transform: scale(8);
    -moz-transform: scale(8);
    -ms-transform: scale(8);
    -o-transform: scale(8);
    transform: scale(8); }
  50% {
    opacity: 0.5; }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
    transform: scale(0.95); }
  90% {
    opacity: 1;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  95% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
.sub_title_icon {
  position: absolute;
  left: 25.41667%;
  width: 6.25%;
  top: 405px;
  height: 36px;
  background: url("../images/p1_sub_title_em.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .sub_title_icon {
  -webkit-animation: my_tada 1s linear 1s 1;
  -moz-animation: my_tada 1s linear 1s 1;
  -ms-animation: my_tada 1s linear 1s 1;
  -o-animation: my_tada 1s linear 1s 1;
  animation: my_tada 1s linear 1s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes my_tada {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg); }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@-moz-keyframes my_tada {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg); }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@-ms-keyframes my_tada {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg); }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@-o-keyframes my_tada {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg); }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@keyframes my_tada {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, 2deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -ms-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg);
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(0, 0, 1, -2deg); }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
.sub_title_word {
  position: absolute;
  left: 33.95833%;
  top: 415px;
  width: 40.83333%;
  height: 25px;
  background: url("../images/p1_sub_title.png") left center no-repeat;
  background-size: 100%;
  opacity: 1; }

.animate .sub_title_word {
  -webkit-animation: sub_title_in 1s linear 1s 1;
  -moz-animation: sub_title_in 1s linear 1s 1;
  -ms-animation: sub_title_in 1s linear 1s 1;
  -o-animation: sub_title_in 1s linear 1s 1;
  animation: sub_title_in 1s linear 1s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes sub_title_in {
  0% {
    opacity: 1; }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    transform: translate(0, 0px); } }
@-moz-keyframes sub_title_in {
  0% {
    opacity: 1; }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    transform: translate(0, 0px); } }
@-ms-keyframes sub_title_in {
  0% {
    opacity: 1; }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    transform: translate(0, 0px); } }
@-o-keyframes sub_title_in {
  0% {
    opacity: 1; }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    transform: translate(0, 0px); } }
@keyframes sub_title_in {
  0% {
    opacity: 1; }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    transform: translate(0, 0px); } }
.cartoon {
  position: absolute;
  left: 0;
  width: 100%;
  top: 495px;
  height: 148px;
  background: url("../images/p1_cartoon.png") center center no-repeat;
  background-size: 100% 100%; }

.page-1.animate .cartoon {
  -webkit-animation: flipInY 1s linear 1.5s 1;
  -moz-animation: flipInY 1s linear 1.5s 1;
  -ms-animation: flipInY 1s linear 1.5s 1;
  -o-animation: flipInY 1s linear 1.5s 1;
  animation: flipInY 1s linear 1.5s 1; }

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg); }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  100% {
    -webkit-transform: perspective(400px);
    -moz-transform: perspective(400px);
    -ms-transform: perspective(400px);
    -o-transform: perspective(400px);
    transform: perspective(400px); } }
@-moz-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg); }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  100% {
    -webkit-transform: perspective(400px);
    -moz-transform: perspective(400px);
    -ms-transform: perspective(400px);
    -o-transform: perspective(400px);
    transform: perspective(400px); } }
@-ms-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg); }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  100% {
    -webkit-transform: perspective(400px);
    -moz-transform: perspective(400px);
    -ms-transform: perspective(400px);
    -o-transform: perspective(400px);
    transform: perspective(400px); } }
@-o-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg); }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  100% {
    -webkit-transform: perspective(400px);
    -moz-transform: perspective(400px);
    -ms-transform: perspective(400px);
    -o-transform: perspective(400px);
    transform: perspective(400px); } }
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 30deg);
    transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg); }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -o-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  100% {
    -webkit-transform: perspective(400px);
    -moz-transform: perspective(400px);
    -ms-transform: perspective(400px);
    -o-transform: perspective(400px);
    transform: perspective(400px); } }
.logo {
  position: absolute;
  left: 8.33333%;
  width: 23.95833%;
  bottom: 25px;
  height: 36px;
  background: url("../images/baidu_logo.png") center center no-repeat;
  background-size: 100% 100%; }

.logo_left_100 {
  left: 20.83333%;
  bottom: 35px; }

.page_nav {
  width: 70px;
  height: 70px;
  margin-left: -35px;
  position: absolute;
  left: 50%;
  bottom: 25px;
  background: url("../images/page_nav.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 1; }

#page-1 .page_nav, .page-1 .page_nav {
  -webkit-animation: downup 1s linear 3s infinite;
  -moz-animation: downup 1s linear 3s infinite;
  -ms-animation: downup 1s linear 3s infinite;
  -o-animation: downup 1s linear 3s infinite;
  animation: downup 1s linear 3s infinite;
  opacity: 0; }

.right_pos {
  position: absolute;
  left: auto;
  right: 100px;
  margin-left: auto; }

@-webkit-keyframes downup {
  0% {
    opacity: 0.3;
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -o-transform: translate(0, 10px);
    transform: translate(0, 10px); }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    transform: translate(0, 0px); }
  100% {
    opacity: 0.3;
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
    transform: translate(0, -10px); } }
@-moz-keyframes downup {
  0% {
    opacity: 0.3;
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -o-transform: translate(0, 10px);
    transform: translate(0, 10px); }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    transform: translate(0, 0px); }
  100% {
    opacity: 0.3;
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
    transform: translate(0, -10px); } }
@-ms-keyframes downup {
  0% {
    opacity: 0.3;
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -o-transform: translate(0, 10px);
    transform: translate(0, 10px); }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    transform: translate(0, 0px); }
  100% {
    opacity: 0.3;
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
    transform: translate(0, -10px); } }
@-o-keyframes downup {
  0% {
    opacity: 0.3;
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -o-transform: translate(0, 10px);
    transform: translate(0, 10px); }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    transform: translate(0, 0px); }
  100% {
    opacity: 0.3;
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
    transform: translate(0, -10px); } }
@keyframes downup {
  0% {
    opacity: 0.3;
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -o-transform: translate(0, 10px);
    transform: translate(0, 10px); }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    transform: translate(0, 0px); }
  100% {
    opacity: 0.3;
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
    transform: translate(0, -10px); } }
/**第2页样式**/
.p2_title {
  position: absolute;
  left: 18.75%;
  width: 62.5%;
  top: 56px;
  height: 31px;
  background: url("../images/p2_title.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p2_title {
  -webkit-animation: bounceInDown 1s linear 0s 1;
  -moz-animation: bounceInDown 1s linear 0s 1;
  -ms-animation: bounceInDown 1s linear 0s 1;
  -o-animation: bounceInDown 1s linear 0s 1;
  animation: bounceInDown 1s linear 0s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards; }

.p2_sub_title {
  box-sizing: border-box;
  padding-left: 50px;
  position: absolute;
  left: 145px;
  top: 109px; }

.p2_sub_title .icon {
  width: 37px;
  height: 34px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -17px;
  background: url("../images/p2_icon_1.png") center center no-repeat;
  background-size: 100% 100%; }

.p2_sub_title .txt, .p2_sub_title2 .txt {
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  font-size: 24px;
  font-weight: bold; }

.p2_sub_title2 {
  box-sizing: border-box;
  padding-left: 40px;
  position: absolute;
  left: 130px;
  top: 414px; }

.p2_sub_title2 .icon {
  width: 23px;
  height: 32px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -16px;
  background: url("../images/p2_icon_2.png") center center no-repeat;
  background-size: 100% 100%; }

.p2_text_yzm {
  position: absolute;
  left: 35.41667%;
  width: 30%;
  top: 120px;
  height: 23px;
  background: url("../images/p2_yuanzhumin.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p2_text_yzm {
  -webkit-animation: bounceInDown 1s linear 500ms 1;
  -moz-animation: bounceInDown 1s linear 500ms 1;
  -ms-animation: bounceInDown 1s linear 500ms 1;
  -o-animation: bounceInDown 1s linear 500ms 1;
  animation: bounceInDown 1s linear 500ms 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p2_result1 {
  position: absolute;
  left: 7.29167%;
  width: 85.41667%;
  top: 169px;
  height: 178px; }

.p2_yzm_box {
  position: absolute;
  left: 25px;
  width: 435px;
  top: 170px;
  height: 178px; }

.p2_yzm_part1, .p2_yzm_part2, .p2_yzm_part3 {
  box-sizing: border-box;
  width: 125px;
  height: 178px;
  float: left;
  margin: 0 10px; }

.p2_yzm_part1 .round, .p2_yzm_part2 .round, .p2_yzm_part3 .round {
  width: 125px;
  height: 125px;
  border: 1px solid #fff;
  border-radius: 60%; }

.p2_yzm_part2 .round {
  position: relative; }

.p2_yzm_part1 .txt, .p2_yzm_part2 .txt, .p2_yzm_part3 .txt {
  color: #fff;
  font-size: 16px;
  width: 125px;
  text-align: center;
  margin-top: 8px; }

.p2_yzm_part1 .content {
  height: 59px;
  width: 123px;
  top: 50%;
  margin-top: 29.5px;
  background: url("../images/p2_yzm1_content.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p2_yzm_part1 .content {
  -webkit-animation: overturn 2s linear 0s 1;
  -moz-animation: overturn 2s linear 0s 1;
  -ms-animation: overturn 2s linear 0s 1;
  -o-animation: overturn 2s linear 0s 1;
  animation: overturn 2s linear 0s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes overturn {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); } }
@-moz-keyframes overturn {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); } }
@-ms-keyframes overturn {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); } }
@-o-keyframes overturn {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); } }
@keyframes overturn {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); } }
.p2_yzm_part2 .content {
  height: 126px;
  width: 126px; }

.p2_yzm_part3 .content {
  height: 46px;
  width: 45px;
  margin-left: 39px;
  margin-top: 39px;
  background: url("../images/p2_yzm3_content.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p2_yzm_part3 .content {
  -webkit-animation: star_pluse 1s linear 3s 1;
  -moz-animation: star_pluse 1s linear 3s 1;
  -ms-animation: star_pluse 1s linear 3s 1;
  -o-animation: star_pluse 1s linear 3s 1;
  animation: star_pluse 1s linear 3s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes star_pluse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-moz-keyframes star_pluse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-ms-keyframes star_pluse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-o-keyframes star_pluse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@keyframes star_pluse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
.p2_clock_center {
  width: 19px;
  left: 50%;
  top: 50%;
  margin-top: -9.5px;
  margin-left: -9.5px;
  height: 19px;
  position: absolute;
  border-radius: 50%;
  background-color: white; }

.p2_yzm2_hour, .p2_yzm2_minute {
  position: absolute;
  left: 241px;
  background-color: #fff; }

.p2_yzm2_minute {
  width: 50px;
  left: 50%;
  top: 50%;
  margin-top: -1px;
  height: 3px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center; }

.p2_yzm2_hour {
  width: 42px;
  left: 50%;
  top: 50%;
  margin-top: -1px;
  height: 3px;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center; }

.animate .p2_yzm2_hour {
  -webkit-animation: clock_hour 2s linear 1s 1;
  -moz-animation: clock_hour 2s linear 1s 1;
  -ms-animation: clock_hour 2s linear 1s 1;
  -o-animation: clock_hour 2s linear 1s 1;
  animation: clock_hour 2s linear 1s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.animate .p2_yzm2_minute {
  -webkit-animation: clock_minute 2s linear 1s 1;
  -moz-animation: clock_minute 2s linear 1s 1;
  -ms-animation: clock_minute 2s linear 1s 1;
  -o-animation: clock_minute 2s linear 1s 1;
  animation: clock_minute 2s linear 1s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes clock_hour {
  0% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(210deg);
    -moz-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    -o-transform: rotate(210deg);
    transform: rotate(210deg); } }
@-moz-keyframes clock_hour {
  0% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(210deg);
    -moz-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    -o-transform: rotate(210deg);
    transform: rotate(210deg); } }
@-ms-keyframes clock_hour {
  0% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(210deg);
    -moz-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    -o-transform: rotate(210deg);
    transform: rotate(210deg); } }
@-o-keyframes clock_hour {
  0% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(210deg);
    -moz-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    -o-transform: rotate(210deg);
    transform: rotate(210deg); } }
@keyframes clock_hour {
  0% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(210deg);
    -moz-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    -o-transform: rotate(210deg);
    transform: rotate(210deg); } }
@-webkit-keyframes clock_minute {
  0% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg); }
  100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg); } }
@-moz-keyframes clock_minute {
  0% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg); }
  100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg); } }
@-ms-keyframes clock_minute {
  0% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg); }
  100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg); } }
@-o-keyframes clock_minute {
  0% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg); }
  100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg); } }
@keyframes clock_minute {
  0% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg); }
  100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg); } }
.p2_text_tongji {
  position: absolute;
  left: 12.5%;
  width: 71.875%;
  padding-left: 6.45833%;
  top: 366px;
  height: 25px;
  line-height: 25px;
  background: url("../images/p2_tongji_icon.png") left center no-repeat;
  background-size: auto 100%;
  color: #fff;
  font-size: 16px; }

.p2_text_yidong {
  position: absolute;
  left: 30.41667%;
  width: 39.58333%;
  top: 420px;
  height: 23px;
  background: url("../images/p2_yidong.png") center center no-repeat;
  background-size: 100% 100%; }

.p2_mobile {
  position: absolute;
  left: 90px;
  width: 126px;
  top: 470px;
  height: 156px;
  -webkit-animation: bounceIn 1s linear 0.2s 1;
  -moz-animation: bounceIn 1s linear 0.2s 1;
  -ms-animation: bounceIn 1s linear 0.2s 1;
  -o-animation: bounceIn 1s linear 0.2s 1;
  animation: bounceIn 1s linear 0.2s 1; }

.p2_mobile .pic {
  background: url("../images/p2_mobile_round.png") center center no-repeat;
  background-size: 100% 100%;
  width: 123px;
  height: 124px; }

.p2_mobile .txt, .p2_pc .txt {
  color: #fff;
  font-size: 14px;
  width: 123px;
  text-align: center;
  margin-top: 8px; }

.p2_pc {
  position: absolute;
  left: 54.79167%;
  width: 26.25%;
  top: 470px;
  height: 156px;
  -webkit-animation: bounceIn 1s linear 0.2s 1;
  -moz-animation: bounceIn 1s linear 0.2s 1;
  -ms-animation: bounceIn 1s linear 0.2s 1;
  -o-animation: bounceIn 1s linear 0.2s 1;
  animation: bounceIn 1s linear 0.2s 1; }

.p2_pc .pic {
  background: url("../images/p2_pc_round.png") center center no-repeat;
  background-size: 100% 100%;
  width: 124px;
  height: 124px; }

.animate .p2_pc, .animate .p2_mobile {
  -webkit-animation: bounceIn 1s linear 0.2s 1;
  -moz-animation: bounceIn 1s linear 0.2s 1;
  -ms-animation: bounceIn 1s linear 0.2s 1;
  -o-animation: bounceIn 1s linear 0.2s 1;
  animation: bounceIn 1s linear 0.2s 1; }

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05); }
  70% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-moz-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05); }
  70% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-ms-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05); }
  70% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-o-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05); }
  70% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05); }
  70% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
.p2_child {
  position: absolute;
  right: 10.20833%;
  width: 15.83333%;
  bottom: 15px;
  height: 128px;
  background: url("../images/p2_child.png") center center no-repeat;
  background-size: 100% 100%; }

/*第三页样式*/
.p3_scan_container {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 8px;
  bottom: 8px;
  background: url("../images/p3_scan_container.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p3_scan_container {
  -webkit-animation: scan_container_in 1.5s ease 2s 1;
  -moz-animation: scan_container_in 1.5s ease 2s 1;
  -ms-animation: scan_container_in 1.5s ease 2s 1;
  -o-animation: scan_container_in 1.5s ease 2s 1;
  animation: scan_container_in 1.5s ease 2s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes scan_container_in {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-moz-keyframes scan_container_in {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-ms-keyframes scan_container_in {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-o-keyframes scan_container_in {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@keyframes scan_container_in {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
.p3_scan_line {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 5px;
  bottom: 8px;
  background: url("../images/p3_scan_line.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p3_scan_line {
  -webkit-animation: lineWalkRound 6s ease 1.75s infinite;
  -moz-animation: lineWalkRound 6s ease 1.75s infinite;
  -ms-animation: lineWalkRound 6s ease 1.75s infinite;
  -o-animation: lineWalkRound 6s ease 1.75s infinite;
  animation: lineWalkRound 6s ease 1.75s infinite; }

@-webkit-keyframes lineWalkRound {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 25px);
    -moz-transform: translate(0, 25px);
    -ms-transform: translate(0, 25px);
    -o-transform: translate(0, 25px);
    transform: translate(0, 25px); }
  50% {
    -webkit-transform: translate(0, 705px);
    -moz-transform: translate(0, 705px);
    -ms-transform: translate(0, 705px);
    -o-transform: translate(0, 705px);
    transform: translate(0, 705px); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 25px);
    -moz-transform: translate(0, 25px);
    -ms-transform: translate(0, 25px);
    -o-transform: translate(0, 25px);
    transform: translate(0, 25px); } }
@-moz-keyframes lineWalkRound {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 25px);
    -moz-transform: translate(0, 25px);
    -ms-transform: translate(0, 25px);
    -o-transform: translate(0, 25px);
    transform: translate(0, 25px); }
  50% {
    -webkit-transform: translate(0, 705px);
    -moz-transform: translate(0, 705px);
    -ms-transform: translate(0, 705px);
    -o-transform: translate(0, 705px);
    transform: translate(0, 705px); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 25px);
    -moz-transform: translate(0, 25px);
    -ms-transform: translate(0, 25px);
    -o-transform: translate(0, 25px);
    transform: translate(0, 25px); } }
@-ms-keyframes lineWalkRound {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 25px);
    -moz-transform: translate(0, 25px);
    -ms-transform: translate(0, 25px);
    -o-transform: translate(0, 25px);
    transform: translate(0, 25px); }
  50% {
    -webkit-transform: translate(0, 705px);
    -moz-transform: translate(0, 705px);
    -ms-transform: translate(0, 705px);
    -o-transform: translate(0, 705px);
    transform: translate(0, 705px); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 25px);
    -moz-transform: translate(0, 25px);
    -ms-transform: translate(0, 25px);
    -o-transform: translate(0, 25px);
    transform: translate(0, 25px); } }
@-o-keyframes lineWalkRound {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 25px);
    -moz-transform: translate(0, 25px);
    -ms-transform: translate(0, 25px);
    -o-transform: translate(0, 25px);
    transform: translate(0, 25px); }
  50% {
    -webkit-transform: translate(0, 705px);
    -moz-transform: translate(0, 705px);
    -ms-transform: translate(0, 705px);
    -o-transform: translate(0, 705px);
    transform: translate(0, 705px); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 25px);
    -moz-transform: translate(0, 25px);
    -ms-transform: translate(0, 25px);
    -o-transform: translate(0, 25px);
    transform: translate(0, 25px); } }
@keyframes lineWalkRound {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 25px);
    -moz-transform: translate(0, 25px);
    -ms-transform: translate(0, 25px);
    -o-transform: translate(0, 25px);
    transform: translate(0, 25px); }
  50% {
    -webkit-transform: translate(0, 705px);
    -moz-transform: translate(0, 705px);
    -ms-transform: translate(0, 705px);
    -o-transform: translate(0, 705px);
    transform: translate(0, 705px); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 25px);
    -moz-transform: translate(0, 25px);
    -ms-transform: translate(0, 25px);
    -o-transform: translate(0, 25px);
    transform: translate(0, 25px); } }
#page-2.animate .p3_scan_container {
  -webkit-animation: scan_container_in 1.5s ease 1s 1;
  -moz-animation: scan_container_in 1.5s ease 1s 1;
  -ms-animation: scan_container_in 1.5s ease 1s 1;
  -o-animation: scan_container_in 1.5s ease 1s 1;
  animation: scan_container_in 1.5s ease 1s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

#page-2.animate .p3_scan_line {
  opacity: 0;
  -webkit-animation: lineWalkRound 6s ease 1.25s infinite;
  -moz-animation: lineWalkRound 6s ease 1.25s infinite;
  -ms-animation: lineWalkRound 6s ease 1.25s infinite;
  -o-animation: lineWalkRound 6s ease 1.25s infinite;
  animation: lineWalkRound 6s ease 1.25s infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p3_title {
  position: absolute;
  left: 18.75%;
  width: 62.5%;
  top: 56px;
  height: 31px;
  background: url("../images/p3_title.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p3_title {
  -webkit-animation: bounceInDown 1s linear 0s 1;
  -moz-animation: bounceInDown 1s linear 0s 1;
  -ms-animation: bounceInDown 1s linear 0s 1;
  -o-animation: bounceInDown 1s linear 0s 1;
  animation: bounceInDown 1s linear 0s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p3_sub_title {
  position: absolute;
  left: 22.91667%;
  width: 41.66667%;
  top: 139px;
  height: 25px;
  background: url("../images/p3_sub_title.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p3_sub_title {
  -webkit-animation: bounceInDown 1s linear 500ms 1;
  -moz-animation: bounceInDown 1s linear 500ms 1;
  -ms-animation: bounceInDown 1s linear 500ms 1;
  -o-animation: bounceInDown 1s linear 500ms 1;
  animation: bounceInDown 1s linear 500ms 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p3_sub_title_em {
  position: absolute;
  left: 67.08333%;
  width: 10.625%;
  top: 124px;
  height: 58px;
  background: url("../images/p3_sub_title_em.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p3_sub_title_em_in {
  -webkit-animation: bounceInDown 1s linear 500ms 1;
  -moz-animation: bounceInDown 1s linear 500ms 1;
  -ms-animation: bounceInDown 1s linear 500ms 1;
  -o-animation: bounceInDown 1s linear 500ms 1;
  animation: bounceInDown 1s linear 500ms 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.animate .p3_sub_title_em {
  -webkit-animation: bounceInDown 1s linear 500ms 1;
  -moz-animation: bounceInDown 1s linear 500ms 1;
  -ms-animation: bounceInDown 1s linear 500ms 1;
  -o-animation: bounceInDown 1s linear 500ms 1;
  animation: bounceInDown 1s linear 500ms 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.animate .p3_sub_title_em_loop {
  -webkit-animation: bounceInDown 1s linear 500ms 1;
  -moz-animation: bounceInDown 1s linear 500ms 1;
  -ms-animation: bounceInDown 1s linear 500ms 1;
  -o-animation: bounceInDown 1s linear 500ms 1;
  animation: bounceInDown 1s linear 500ms 1; }

@-webkit-keyframes tada2 {
  0% {
    opacity: 1;
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1); }
  40% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-moz-keyframes tada2 {
  0% {
    opacity: 1;
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1); }
  40% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-ms-keyframes tada2 {
  0% {
    opacity: 1;
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1); }
  40% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-o-keyframes tada2 {
  0% {
    opacity: 1;
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1); }
  40% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@keyframes tada2 {
  0% {
    opacity: 1;
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1); }
  40% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
.p3_zai {
  position: absolute;
  opacity: 0;
  width: 120px;
  height: 139px;
  top: 201px;
  left: 51px;
  background: url("../images/p3_tag_zai.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p3_zai {
  -webkit-animation: tada2 1s linear 1s 1;
  -moz-animation: tada2 1s linear 1s 1;
  -ms-animation: tada2 1s linear 1s 1;
  -o-animation: tada2 1s linear 1s 1;
  animation: tada2 1s linear 1s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p3_90 {
  position: absolute;
  opacity: 0;
  width: 120px;
  height: 139px;
  top: 201px;
  left: 180px;
  background: url("../images/p3_tag_90.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p3_90 {
  -webkit-animation: tada2 1s linear 1.3s 1;
  -moz-animation: tada2 1s linear 1.3s 1;
  -ms-animation: tada2 1s linear 1.3s 1;
  -o-animation: tada2 1s linear 1.3s 1;
  animation: tada2 1s linear 1.3s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p3_youxi {
  position: absolute;
  opacity: 0;
  width: 120px;
  height: 139px;
  top: 201px;
  left: 309px;
  background: url("../images/p3_tag_youxi.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p3_youxi {
  -webkit-animation: tada2 1s linear 1.1s 1;
  -moz-animation: tada2 1s linear 1.1s 1;
  -ms-animation: tada2 1s linear 1.1s 1;
  -o-animation: tada2 1s linear 1.1s 1;
  animation: tada2 1s linear 1.1s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p3_chengshu {
  position: absolute;
  opacity: 0;
  width: 120px;
  height: 139px;
  top: 350px;
  left: 51px;
  background: url("../images/p3_tag_chengshu.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p3_chengshu {
  -webkit-animation: tada2 1s linear 1.4s 1;
  -moz-animation: tada2 1s linear 1.4s 1;
  -ms-animation: tada2 1s linear 1.4s 1;
  -o-animation: tada2 1s linear 1.4s 1;
  animation: tada2 1s linear 1.4s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p3_chihuo {
  position: absolute;
  opacity: 0;
  width: 120px;
  height: 139px;
  top: 350px;
  left: 180px;
  background: url("../images/p3_tag_chihuo.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p3_chihuo {
  -webkit-animation: tada2 1s linear 1.2s 1;
  -moz-animation: tada2 1s linear 1.2s 1;
  -ms-animation: tada2 1s linear 1.2s 1;
  -o-animation: tada2 1s linear 1.2s 1;
  animation: tada2 1s linear 1.2s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p3_anjing {
  position: absolute;
  opacity: 0;
  width: 120px;
  height: 139px;
  top: 350px;
  left: 309px;
  background: url("../images/p3_tag_anjing.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p3_anjing {
  -webkit-animation: tada2 1s linear 1.5s 1;
  -moz-animation: tada2 1s linear 1.5s 1;
  -ms-animation: tada2 1s linear 1.5s 1;
  -o-animation: tada2 1s linear 1.5s 1;
  animation: tada2 1s linear 1.5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p3_2b {
  position: absolute;
  opacity: 0;
  width: 120px;
  height: 139px;
  top: 499px;
  left: 51px;
  background: url("../images/p3_tag_2b.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p3_2b {
  -webkit-animation: tada2 1s linear 1.3s 1;
  -moz-animation: tada2 1s linear 1.3s 1;
  -ms-animation: tada2 1s linear 1.3s 1;
  -o-animation: tada2 1s linear 1.3s 1;
  animation: tada2 1s linear 1.3s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p3_more {
  position: absolute;
  opacity: 0;
  width: 120px;
  height: 139px;
  top: 499px;
  left: 180px;
  background: url("../images/p3_tag_more.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p3_more {
  -webkit-animation: tada2 1s linear 1.4s 1;
  -moz-animation: tada2 1s linear 1.4s 1;
  -ms-animation: tada2 1s linear 1.4s 1;
  -o-animation: tada2 1s linear 1.4s 1;
  animation: tada2 1s linear 1.4s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p4_title {
  position: absolute;
  left: 17.70833%;
  width: 61.66667%;
  top: 55px;
  height: 31px;
  background: url("../images/p4_title.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p4_title {
  -webkit-animation: bounceInDown 1s linear 0s 1;
  -moz-animation: bounceInDown 1s linear 0s 1;
  -ms-animation: bounceInDown 1s linear 0s 1;
  -o-animation: bounceInDown 1s linear 0s 1;
  animation: bounceInDown 1s linear 0s 1; }

.p4_text_nc {
  position: absolute;
  left: 17.70833%;
  width: 62.08333%;
  top: 124px;
  height: 53px;
  background: url("../images/p4_text_nc.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p4_text_nc {
  -webkit-animation: bounceInDown 1s linear 0.5s 1;
  -moz-animation: bounceInDown 1s linear 0.5s 1;
  -ms-animation: bounceInDown 1s linear 0.5s 1;
  -o-animation: bounceInDown 1s linear 0.5s 1;
  animation: bounceInDown 1s linear 0.5s 1; }

.p4_rank {
  position: absolute;
  left: 34.58333%;
  width: 32.70833%;
  top: 204px;
  height: 157px;
  background: url("../images/p4_rank.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p4_rank {
  -webkit-animation: swing 1s linear 0.5s 1;
  -moz-animation: swing 1s linear 0.5s 1;
  -ms-animation: swing 1s linear 0.5s 1;
  -o-animation: swing 1s linear 0.5s 1;
  animation: swing 1s linear 0.5s 1; }

@-webkit-keyframes swing {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -moz-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    -o-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -moz-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    -o-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -moz-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    -o-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0);
    -moz-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    -o-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }
@-moz-keyframes swing {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -moz-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    -o-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -moz-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    -o-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -moz-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    -o-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0);
    -moz-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    -o-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }
@-ms-keyframes swing {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -moz-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    -o-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -moz-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    -o-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -moz-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    -o-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0);
    -moz-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    -o-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }
@-o-keyframes swing {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -moz-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    -o-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -moz-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    -o-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -moz-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    -o-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0);
    -moz-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    -o-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }
@keyframes swing {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -moz-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    -o-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -moz-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    -o-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -moz-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    -o-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0);
    -moz-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    -o-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }
.swiper-nested-2 {
  position: absolute;
  top: 377px;
  left: 35px;
  width: 410px;
  height: 242px; }

.p4_part1 {
  height: 240px;
  width: 412px;
  background: url("../images/p3_part1.png") center center no-repeat;
  background-size: 100% 100%; }

.p4_part2 {
  height: 240px;
  width: 412px;
  background: url("../images/p3_part2.png") center center no-repeat;
  background-size: 100% 100%; }

.p4_tieba {
  height: 240px;
  background: url("../images/p4_tieba_bg.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p4_tieba {
  -webkit-animation: fadeIn-right 1s linear 0.2s 1;
  -moz-animation: fadeIn-right 1s linear 0.2s 1;
  -ms-animation: fadeIn-right 1s linear 0.2s 1;
  -o-animation: fadeIn-right 1s linear 0.2s 1;
  animation: fadeIn-right 1s linear 0.2s 1; }

@-webkit-keyframes fadeIn-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px);
    -ms-transform: translateX(200px);
    -o-transform: translateX(200px);
    transform: translateX(200px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } }
@-moz-keyframes fadeIn-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px);
    -ms-transform: translateX(200px);
    -o-transform: translateX(200px);
    transform: translateX(200px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } }
@-ms-keyframes fadeIn-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px);
    -ms-transform: translateX(200px);
    -o-transform: translateX(200px);
    transform: translateX(200px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } }
@-o-keyframes fadeIn-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px);
    -ms-transform: translateX(200px);
    -o-transform: translateX(200px);
    transform: translateX(200px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } }
@keyframes fadeIn-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px);
    -ms-transform: translateX(200px);
    -o-transform: translateX(200px);
    transform: translateX(200px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } }
.p4_funba {
  height: 204px;
  background: url("../images/p4_funba.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p4_funba {
  -webkit-animation: fadeIn-bottom 1s linear 1s 1;
  -moz-animation: fadeIn-bottom 1s linear 1s 1;
  -ms-animation: fadeIn-bottom 1s linear 1s 1;
  -o-animation: fadeIn-bottom 1s linear 1s 1;
  animation: fadeIn-bottom 1s linear 1s 1;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards; }

.p4_gameba {
  height: 203px;
  background: url("../images/p4_gameba.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p4_gameba {
  -webkit-animation: fadeIn-bottom 1s linear 1.5s 1;
  -moz-animation: fadeIn-bottom 1s linear 1.5s 1;
  -ms-animation: fadeIn-bottom 1s linear 1.5s 1;
  -o-animation: fadeIn-bottom 1s linear 1.5s 1;
  animation: fadeIn-bottom 1s linear 1.5s 1;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards; }

.p4_literatureba {
  height: 203px;
  background: url("../images/p4_literatureba.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p4_literatureba {
  -webkit-animation: fadeIn-bottom 1s linear 2s 1;
  -moz-animation: fadeIn-bottom 1s linear 2s 1;
  -ms-animation: fadeIn-bottom 1s linear 2s 1;
  -o-animation: fadeIn-bottom 1s linear 2s 1;
  animation: fadeIn-bottom 1s linear 2s 1;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards; }

@-webkit-keyframes fadeIn-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
    -o-transform: translateY(200px);
    transform: translateY(200px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@-moz-keyframes fadeIn-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
    -o-transform: translateY(200px);
    transform: translateY(200px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@-ms-keyframes fadeIn-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
    -o-transform: translateY(200px);
    transform: translateY(200px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@-o-keyframes fadeIn-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
    -o-transform: translateY(200px);
    transform: translateY(200px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
@keyframes fadeIn-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
    -o-transform: translateY(200px);
    transform: translateY(200px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }
.p5_title {
  position: absolute;
  left: 12.29167%;
  width: 74.79167%;
  top: 32px;
  height: 58px;
  background: url("../images/p5_title.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p5_title {
  -webkit-animation: bounceInDown 1s linear 0s 1;
  -moz-animation: bounceInDown 1s linear 0s 1;
  -ms-animation: bounceInDown 1s linear 0s 1;
  -o-animation: bounceInDown 1s linear 0s 1;
  animation: bounceInDown 1s linear 0s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p5_main {
  position: absolute;
  left: 4.16667%;
  width: 91.875%;
  top: 114px;
  height: 541px;
  background: url("../images/p5_main_bg.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_game_title {
  position: absolute;
  left: 6.25%;
  width: 17.29167%;
  top: 129px;
  height: 20px;
  background: url("../images/p5_game_title.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_game_text {
  position: absolute;
  left: 6.25%;
  width: 20.625%;
  top: 184px;
  height: 99px;
  background: url("../images/p5_game_text.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_game {
  opacity: 0;
  border: 1px solide #fff;
  border-collapse: collapse; }

.animate .p5_game {
  -webkit-animation: fadeInLeftBig 1s ease 1s 1;
  -moz-animation: fadeInLeftBig 1s ease 1s 1;
  -ms-animation: fadeInLeftBig 1s ease 1s 1;
  -o-animation: fadeInLeftBig 1s ease 1s 1;
  animation: fadeInLeftBig 1s ease 1s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -moz-transform: translateX(-1000px);
    -ms-transform: translateX(-1000px);
    -o-transform: translateX(-1000px);
    transform: translateX(-1000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px); } }
@-moz-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -moz-transform: translateX(-1000px);
    -ms-transform: translateX(-1000px);
    -o-transform: translateX(-1000px);
    transform: translateX(-1000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px); } }
@-ms-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -moz-transform: translateX(-1000px);
    -ms-transform: translateX(-1000px);
    -o-transform: translateX(-1000px);
    transform: translateX(-1000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px); } }
@-o-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -moz-transform: translateX(-1000px);
    -ms-transform: translateX(-1000px);
    -o-transform: translateX(-1000px);
    transform: translateX(-1000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px); } }
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -moz-transform: translateX(-1000px);
    -ms-transform: translateX(-1000px);
    -o-transform: translateX(-1000px);
    transform: translateX(-1000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px); } }
.p5_animate_title {
  position: absolute;
  left: 36.66667%;
  width: 17.5%;
  top: 124px;
  height: 28px;
  background: url("../images/p5_animate_title.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_animate_text {
  position: absolute;
  left: 36.66667%;
  width: 23.95833%;
  top: 184px;
  height: 99px;
  background: url("../images/p5_animate_text.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_novel_title {
  position: absolute;
  left: 67.29167%;
  width: 17.08333%;
  top: 124px;
  height: 32px;
  background: url("../images/p5_novel_title.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_novel_text {
  position: absolute;
  left: 67.29167%;
  width: 20.41667%;
  top: 184px;
  height: 99px;
  background: url("../images/p5_novel_text.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_hotword_title {
  position: absolute;
  left: 6.25%;
  width: 16.875%;
  top: 304px;
  height: 32px;
  background: url("../images/p5_hotword_title.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_hotword_text {
  position: absolute;
  left: 6.25%;
  width: 17.29167%;
  top: 365px;
  height: 99px;
  background: url("../images/p5_hotword_text.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_tv_title {
  position: absolute;
  left: 36.66667%;
  width: 21.45833%;
  top: 304px;
  height: 32px;
  background: url("../images/p5_tv_title.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_tv_text {
  position: absolute;
  left: 36.66667%;
  width: 27.29167%;
  top: 365px;
  height: 93px;
  background: url("../images/p5_tv_text.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_movie_title {
  position: absolute;
  left: 67.29167%;
  width: 17.08333%;
  top: 304px;
  height: 30px;
  background: url("../images/p5_movie_title.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_movie_text {
  position: absolute;
  left: 67.29167%;
  width: 22.5%;
  top: 365px;
  height: 93px;
  background: url("../images/p5_moview_text.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_variety_title {
  position: absolute;
  left: 6.25%;
  width: 17.08333%;
  top: 485px;
  height: 28px;
  background: url("../images/p5_variety_title.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_variety_text {
  position: absolute;
  left: 6.25%;
  width: 23.95833%;
  top: 544px;
  height: 93px;
  background: url("../images/p5_variety_text.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_person_title {
  position: absolute;
  left: 36.66667%;
  width: 17.08333%;
  top: 485px;
  height: 28px;
  background: url("../images/p5_person_title.png") center center no-repeat;
  background-size: 100% 100%; }

.p5_person_text {
  position: absolute;
  left: 36.66667%;
  width: 17.29167%;
  top: 544px;
  height: 93px;
  background: url("../images/p5_person_text.png") center center no-repeat;
  background-size: 100% 100%; }

/*第六页*/
.p6_title {
  position: absolute;
  top: 21px;
  left: 28px;
  width: 423px;
  height: 35px;
  background: url("../images/p6_title.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p6_title {
  -webkit-animation: bounceInDown 1s linear 0s 1;
  -moz-animation: bounceInDown 1s linear 0s 1;
  -ms-animation: bounceInDown 1s linear 0s 1;
  -o-animation: bounceInDown 1s linear 0s 1;
  animation: bounceInDown 1s linear 0s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p6_sub_title {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  left: 115px;
  top: 84px; }

.p6_sub_title1 {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  left: 115px;
  top: 369px; }

.bar_animate {
  -webkit-transition: all 0.8s ease 1s;
  -moz-transition: all 0.8s ease 1s;
  -ms-transition: all 0.8s ease 1s;
  -o-transition: all 0.8s ease 1s;
  transition: all 0.8s ease 1s; }

.p6_tag1_title {
  position: absolute;
  top: 127px;
  left: 20px;
  width: 188px;
  height: 46px; }

.p6_tag1_title .icon {
  width: 16px;
  height: 44px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -22px;
  background: url("../images/p6_icon_1.png") center center no-repeat;
  background-size: 100% 100%; }

.p6_tag1_title .desc {
  position: absolute;
  left: 40px;
  font-size: 21px;
  top: 0;
  color: #fff;
  line-height: 22px; }

.p6_tag1_value1 {
  color: #fff;
  position: absolute;
  top: 189px;
  left: 46px;
  width: 60px;
  height: 12px;
  font-size: 12px;
  text-align: center; }

.p6_tag1_label1 {
  position: absolute;
  top: 320px;
  left: 46px;
  width: 60px;
  height: 14px;
  color: #fff;
  font-size: 16px;
  text-align: center; }

.p6_tag1_data1 {
  position: absolute;
  top: 214px;
  left: 65px;
  width: 23px;
  height: 90px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  border-radius: 1px;
  border-collapse: collapse; }

.p6_tag1_bar_1 {
  width: 100%;
  height: 87.5%;
  position: absolute;
  bottom: 0;
  border-top: 1px solid #fff;
  background-color: rgba(254, 43, 21, 0.5); }

.p6_tag1_bar_2 {
  width: 100%;
  height: 12.5%;
  position: absolute;
  bottom: 0;
  border-top: 1px solid #fff;
  background-color: rgba(254, 43, 21, 0.5); }

.p6_tag1_value2 {
  color: #fff;
  position: absolute;
  top: 189px;
  left: 107px;
  width: 60px;
  height: 12px;
  font-size: 12px;
  text-align: center; }

.p6_tag1_label2 {
  position: absolute;
  top: 320px;
  left: 107px;
  width: 60px;
  height: 14px;
  color: #fff;
  font-size: 16px;
  text-align: center; }

.p6_tag1_data2 {
  position: absolute;
  top: 214px;
  left: 125px;
  width: 25px;
  height: 90px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  border-radius: 1px;
  border-collapse: collapse; }

.p6_tag2_title {
  position: absolute;
  top: 127px;
  left: 235px;
  width: 225px;
  height: 45px; }

.p6_tag2_title .icon {
  width: 29px;
  height: 28px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -14px;
  background: url("../images/p6_icon_2.png") center center no-repeat;
  background-size: 100% 100%; }

#page-6 .desc {
  position: absolute;
  left: 40px;
  top: 0;
  color: #fff;
  font-size: 18px;
  line-height: 22px; }

.p6_tag2_value1 {
  position: absolute;
  top: 189px;
  left: 283px;
  width: 60px;
  height: 12px;
  color: #fff;
  font-size: 12px;
  text-align: center; }

.p6_tag2_label1 {
  position: absolute;
  top: 320px;
  left: 283px;
  width: 60px;
  height: 14px;
  color: #fff;
  font-size: 16px;
  text-align: center; }

.p6_tag2_data1 {
  position: absolute;
  top: 214px;
  left: 302px;
  width: 23px;
  height: 90px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  border-radius: 1px;
  border-collapse: collapse; }

.p6_tag2_bar_1 {
  width: 100%;
  height: 87.5%;
  position: absolute;
  bottom: 0;
  border-top: 1px solid #fff;
  background-color: rgba(254, 43, 21, 0.5); }

.p6_tag2_bar_2 {
  width: 100%;
  height: 12.5%;
  position: absolute;
  bottom: 0;
  border-top: 1px solid #fff;
  background-color: rgba(254, 43, 21, 0.5); }

.p6_tag2_value2 {
  color: #fff;
  position: absolute;
  top: 189px;
  left: 345px;
  width: 60px;
  height: 12px;
  font-size: 12px;
  text-align: center; }

.p6_tag2_label2 {
  position: absolute;
  top: 320px;
  left: 345px;
  width: 60px;
  height: 14px;
  color: #fff;
  font-size: 16px;
  text-align: center; }

.p6_tag2_data2 {
  position: absolute;
  top: 214px;
  left: 363px;
  width: 24px;
  height: 90px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  border-radius: 1px;
  border-collapse: collapse; }

.p6_tag3_title {
  position: absolute;
  top: 412px;
  left: 20px;
  width: 188px;
  height: 45px; }

.p6_tag3_title .icon {
  width: 31px;
  height: 30px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
  background: url("../images/p6_icon_3.png") center center no-repeat;
  background-size: 100% 100%; }

.p6_tag3_value1 {
  color: #fff;
  position: absolute;
  top: 467px;
  left: 46px;
  width: 60px;
  height: 12px;
  font-size: 12px;
  text-align: center; }

.p6_tag3_label1 {
  position: absolute;
  top: 609px;
  left: 46px;
  width: 60px;
  height: -275px;
  color: #fff;
  font-size: 16px;
  text-align: center; }

.p6_tag3_data1 {
  position: absolute;
  top: 494px;
  left: 65px;
  width: 23px;
  height: 98px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  border-radius: 1px;
  border-collapse: collapse; }

.p6_tag3_bar_1 {
  width: 100%;
  height: 86.82%;
  position: absolute;
  bottom: 0;
  border-top: 1px solid #fff;
  background-color: rgba(254, 43, 21, 0.5); }

.p6_tag3_bar_2 {
  width: 100%;
  height: 13.18%;
  position: absolute;
  bottom: 0;
  border-top: 1px solid #fff;
  background-color: rgba(254, 43, 21, 0.5); }

.p6_tag3_value2 {
  color: #fff;
  position: absolute;
  top: 467px;
  left: 107px;
  width: 60px;
  height: 12px;
  font-size: 12px;
  text-align: center; }

.p6_tag3_label2 {
  position: absolute;
  top: 609px;
  left: 107px;
  width: 60px;
  height: -275px;
  color: #fff;
  font-size: 16px;
  text-align: center; }

.p6_tag3_data2 {
  position: absolute;
  top: 494px;
  left: 125px;
  width: 25px;
  height: 98px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  border-radius: 1px;
  border-collapse: collapse; }

.p6_tag4_title {
  position: absolute;
  top: 412px;
  left: 235px;
  width: 187px;
  height: 45px; }

.p6_tag4_title .icon {
  width: 31px;
  height: 30px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
  background: url("../images/p6_icon_4.png") center center no-repeat;
  background-size: 100% 100%; }

.p6_tag4_value1 {
  position: absolute;
  top: 467px;
  left: 256px;
  width: 60px;
  height: 12px;
  color: #fff;
  font-size: 12px;
  text-align: center; }

.p6_tag4_label1 {
  position: absolute;
  top: 609px;
  left: 247px;
  width: 80px;
  height: -275px;
  color: #fff;
  font-size: 16px;
  text-align: center; }

.p6_tag4_data1 {
  position: absolute;
  top: 494px;
  left: 275px;
  width: 23px;
  height: 98px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  border-radius: 1px;
  border-collapse: collapse; }

.p6_tag4_bar_1 {
  width: 100%;
  height: 23.79%;
  position: absolute;
  bottom: 0;
  border-top: 1px solid #fff;
  background-color: rgba(254, 43, 21, 0.5); }

.p6_tag4_bar_2 {
  width: 100%;
  height: 72.1%;
  position: absolute;
  bottom: 0;
  border-top: 1px solid #fff;
  background-color: rgba(254, 43, 21, 0.5); }

.p6_tag4_value2 {
  color: #fff;
  position: absolute;
  top: 467px;
  left: 318px;
  width: 60px;
  height: 12px;
  font-size: 12px;
  text-align: center; }

.p6_tag4_label2 {
  position: absolute;
  top: 609px;
  left: 318px;
  width: 60px;
  height: -275px;
  color: #fff;
  font-size: 16px;
  text-align: center; }

.p6_tag4_data2 {
  position: absolute;
  top: 494px;
  left: 336px;
  width: 24px;
  height: 98px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  border-radius: 1px;
  border-collapse: collapse; }

.p6_tag4_bar_3 {
  width: 100%;
  height: 72.1%;
  position: absolute;
  bottom: 0;
  border-top: 1px solid #fff;
  background-color: rgba(254, 43, 21, 0.5); }

.p6_tag4_value3 {
  color: #fff;
  position: absolute;
  top: 467px;
  left: 378px;
  width: 60px;
  height: 12px;
  font-size: 12px;
  text-align: center; }

.p6_tag4_label3 {
  position: absolute;
  top: 609px;
  left: 378px;
  width: 60px;
  height: -275px;
  color: #fff;
  font-size: 16px;
  text-align: center; }

.p6_tag4_data3 {
  position: absolute;
  top: 494px;
  left: 396px;
  width: 24px;
  height: 98px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  border-radius: 1px;
  border-collapse: collapse; }

.p6_child {
  position: absolute;
  right: 10.20833%;
  width: 17.08333%;
  bottom: 15px;
  height: 104px;
  background: url("../images/p6_child.png") center center no-repeat;
  background-size: 100% 100%; }

.p6_tag1 {
  opacity: 0;
  -webkit-animation: tag1_play 3s ease 1s 1;
  -moz-animation: tag1_play 3s ease 1s 1;
  -ms-animation: tag1_play 3s ease 1s 1;
  -o-animation: tag1_play 3s ease 1s 1;
  animation: tag1_play 3s ease 1s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes tag1_play {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50px, 0) scale(1);
    -moz-transform: translate(-50px, 0) scale(1);
    -ms-transform: translate(-50px, 0) scale(1);
    -o-transform: translate(-50px, 0) scale(1);
    transform: translate(-50px, 0) scale(1); }
  20% {
    opacity: 1;
    -webkit-transform: translate(20px, 0) scale(1.3);
    -moz-transform: translate(20px, 0) scale(1.3);
    -ms-transform: translate(20px, 0) scale(1.3);
    -o-transform: translate(20px, 0) scale(1.3);
    transform: translate(20px, 0) scale(1.3); }
  80% {
    opacity: 1;
    -webkit-transform: translate(20px, 0) scale(1.3);
    -moz-transform: translate(20px, 0) scale(1.3);
    -ms-transform: translate(20px, 0) scale(1.3);
    -o-transform: translate(20px, 0) scale(1.3);
    transform: translate(20px, 0) scale(1.3); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0) scale(1);
    -moz-transform: translate(0px, 0) scale(1);
    -ms-transform: translate(0px, 0) scale(1);
    -o-transform: translate(0px, 0) scale(1);
    transform: translate(0px, 0) scale(1); } }
@-moz-keyframes tag1_play {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50px, 0) scale(1);
    -moz-transform: translate(-50px, 0) scale(1);
    -ms-transform: translate(-50px, 0) scale(1);
    -o-transform: translate(-50px, 0) scale(1);
    transform: translate(-50px, 0) scale(1); }
  20% {
    opacity: 1;
    -webkit-transform: translate(20px, 0) scale(1.3);
    -moz-transform: translate(20px, 0) scale(1.3);
    -ms-transform: translate(20px, 0) scale(1.3);
    -o-transform: translate(20px, 0) scale(1.3);
    transform: translate(20px, 0) scale(1.3); }
  80% {
    opacity: 1;
    -webkit-transform: translate(20px, 0) scale(1.3);
    -moz-transform: translate(20px, 0) scale(1.3);
    -ms-transform: translate(20px, 0) scale(1.3);
    -o-transform: translate(20px, 0) scale(1.3);
    transform: translate(20px, 0) scale(1.3); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0) scale(1);
    -moz-transform: translate(0px, 0) scale(1);
    -ms-transform: translate(0px, 0) scale(1);
    -o-transform: translate(0px, 0) scale(1);
    transform: translate(0px, 0) scale(1); } }
@-ms-keyframes tag1_play {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50px, 0) scale(1);
    -moz-transform: translate(-50px, 0) scale(1);
    -ms-transform: translate(-50px, 0) scale(1);
    -o-transform: translate(-50px, 0) scale(1);
    transform: translate(-50px, 0) scale(1); }
  20% {
    opacity: 1;
    -webkit-transform: translate(20px, 0) scale(1.3);
    -moz-transform: translate(20px, 0) scale(1.3);
    -ms-transform: translate(20px, 0) scale(1.3);
    -o-transform: translate(20px, 0) scale(1.3);
    transform: translate(20px, 0) scale(1.3); }
  80% {
    opacity: 1;
    -webkit-transform: translate(20px, 0) scale(1.3);
    -moz-transform: translate(20px, 0) scale(1.3);
    -ms-transform: translate(20px, 0) scale(1.3);
    -o-transform: translate(20px, 0) scale(1.3);
    transform: translate(20px, 0) scale(1.3); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0) scale(1);
    -moz-transform: translate(0px, 0) scale(1);
    -ms-transform: translate(0px, 0) scale(1);
    -o-transform: translate(0px, 0) scale(1);
    transform: translate(0px, 0) scale(1); } }
@-o-keyframes tag1_play {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50px, 0) scale(1);
    -moz-transform: translate(-50px, 0) scale(1);
    -ms-transform: translate(-50px, 0) scale(1);
    -o-transform: translate(-50px, 0) scale(1);
    transform: translate(-50px, 0) scale(1); }
  20% {
    opacity: 1;
    -webkit-transform: translate(20px, 0) scale(1.3);
    -moz-transform: translate(20px, 0) scale(1.3);
    -ms-transform: translate(20px, 0) scale(1.3);
    -o-transform: translate(20px, 0) scale(1.3);
    transform: translate(20px, 0) scale(1.3); }
  80% {
    opacity: 1;
    -webkit-transform: translate(20px, 0) scale(1.3);
    -moz-transform: translate(20px, 0) scale(1.3);
    -ms-transform: translate(20px, 0) scale(1.3);
    -o-transform: translate(20px, 0) scale(1.3);
    transform: translate(20px, 0) scale(1.3); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0) scale(1);
    -moz-transform: translate(0px, 0) scale(1);
    -ms-transform: translate(0px, 0) scale(1);
    -o-transform: translate(0px, 0) scale(1);
    transform: translate(0px, 0) scale(1); } }
@keyframes tag1_play {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50px, 0) scale(1);
    -moz-transform: translate(-50px, 0) scale(1);
    -ms-transform: translate(-50px, 0) scale(1);
    -o-transform: translate(-50px, 0) scale(1);
    transform: translate(-50px, 0) scale(1); }
  20% {
    opacity: 1;
    -webkit-transform: translate(20px, 0) scale(1.3);
    -moz-transform: translate(20px, 0) scale(1.3);
    -ms-transform: translate(20px, 0) scale(1.3);
    -o-transform: translate(20px, 0) scale(1.3);
    transform: translate(20px, 0) scale(1.3); }
  80% {
    opacity: 1;
    -webkit-transform: translate(20px, 0) scale(1.3);
    -moz-transform: translate(20px, 0) scale(1.3);
    -ms-transform: translate(20px, 0) scale(1.3);
    -o-transform: translate(20px, 0) scale(1.3);
    transform: translate(20px, 0) scale(1.3); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0) scale(1);
    -moz-transform: translate(0px, 0) scale(1);
    -ms-transform: translate(0px, 0) scale(1);
    -o-transform: translate(0px, 0) scale(1);
    transform: translate(0px, 0) scale(1); } }
.p7_part1 {
  position: absolute;
  top: 214px;
  left: 17px;
  width: 446px;
  height: 157px; }

.inner {
  position: relative;
  width: 100%;
  height: 100%; }

.p7_part1 .part_title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  padding-left: 95px; }

.p7_part1 .part_title img {
  position: absolute;
  left: 46px;
  top: 50%;
  margin-top: -18.5px;
  width: 35px;
  height: 37px; }

.p7_part1 .part_title h3 {
  line-height: 1.4;
  font-size: 19px;
  color: #fff; }

.p7_part1 .part_content {
  position: absolute;
  top: 70px;
  left: 0;
  bottom: 0;
  right: 0;
  border: 1px solid #fff;
  background-color: rgba(173, 157, 101, 0.2);
  opacity: 0.5; }

.p7_part1 .part_content .bar {
  background-color: white;
  height: 1px;
  position: absolute;
  left: 39px;
  top: 45px;
  width: 366px; }

.p7_part1 .part_content .bar_value {
  background-color: white;
  height: 3px;
  position: absolute;
  left: 39px;
  top: 44px;
  width: 16.22222%; }

.p7_part1 .part_content .point {
  position: relative;
  border-radius: 50%;
  background-color: white;
  float: right;
  right: -11px;
  top: -9px;
  height: 22px;
  width: 22px; }

.p7_part1 .part_content .value1 {
  position: absolute;
  left: 119px;
  top: 16px;
  font-size: 14px;
  width: 150px;
  color: #fff; }

.p7_part1 .part_content .value2 {
  position: absolute;
  right: 15px;
  top: 57px;
  font-size: 14px;
  width: 140px;
  color: #fff;
  text-align: right; }

.p7_part2 {
  position: absolute;
  top: 413px;
  left: 17px;
  width: 446px;
  height: 156px; }

.p7_part2 .part_title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  padding-left: 95px; }

.p7_part2 .part_title img {
  position: absolute;
  left: 46px;
  top: 50%;
  margin-top: -18.5px;
  width: 35px;
  height: 37px; }

.p7_part2 .part_title h3 {
  line-height: 1.4;
  font-size: 19px;
  color: #fff; }

.p7_part2 .part_content {
  position: absolute;
  top: 70px;
  left: 0;
  bottom: 0;
  right: 0;
  border: 1px solid #fff;
  background-color: rgba(173, 157, 101, 0.2);
  opacity: 0.5; }

.p7_part2 .part_content .bar {
  background-color: white;
  height: 1px;
  position: absolute;
  left: 39px;
  top: 45px;
  width: 366px; }

.p7_part2 .part_content .bar_value {
  background-color: white;
  height: 3px;
  position: absolute;
  left: 39px;
  top: 44px;
  width: 16.22222%; }

.p7_part2 .part_content .point {
  position: relative;
  border-radius: 50%;
  background-color: white;
  float: right;
  right: -11px;
  top: -9px;
  height: 22px;
  width: 22px; }

.p7_part2 .part_content .value1 {
  position: absolute;
  left: 119px;
  top: 16px;
  font-size: 14px;
  width: 150px;
  color: #fff; }

.p7_part2 .part_content .value2 {
  position: absolute;
  right: 15px;
  top: 57px;
  font-size: 14px;
  width: 140px;
  color: #fff;
  text-align: right; }

.p7_part2, .p7_part1 {
  opacity: 0; }

.animate .p7_part1 {
  -webkit-animation: animate_p7_part1 6s linear 1.5s 1;
  -moz-animation: animate_p7_part1 6s linear 1.5s 1;
  -ms-animation: animate_p7_part1 6s linear 1.5s 1;
  -o-animation: animate_p7_part1 6s linear 1.5s 1;
  animation: animate_p7_part1 6s linear 1.5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes animate_p7_part1 {
  0% {
    opacity: 0; }
  10% {
    opacity: 1;
    -webkit-transform: translateY(68px) scale(1.05);
    -moz-transform: translateY(68px) scale(1.05);
    -ms-transform: translateY(68px) scale(1.05);
    -o-transform: translateY(68px) scale(1.05);
    transform: translateY(68px) scale(1.05); }
  40% {
    -webkit-transform: translateY(68px) scale(1.05);
    -moz-transform: translateY(68px) scale(1.05);
    -ms-transform: translateY(68px) scale(1.05);
    -o-transform: translateY(68px) scale(1.05);
    transform: translateY(68px) scale(1.05); }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(0.4);
    -moz-transform: translateY(0px) scale(0.4);
    -ms-transform: translateY(0px) scale(0.4);
    -o-transform: translateY(0px) scale(0.4);
    transform: translateY(0px) scale(0.4); }
  90% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(0.4);
    -moz-transform: translateY(0px) scale(0.4);
    -ms-transform: translateY(0px) scale(0.4);
    -o-transform: translateY(0px) scale(0.4);
    transform: translateY(0px) scale(0.4); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(1);
    -moz-transform: translateY(0px) scale(1);
    -ms-transform: translateY(0px) scale(1);
    -o-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1); } }
@-moz-keyframes animate_p7_part1 {
  0% {
    opacity: 0; }
  10% {
    opacity: 1;
    -webkit-transform: translateY(68px) scale(1.05);
    -moz-transform: translateY(68px) scale(1.05);
    -ms-transform: translateY(68px) scale(1.05);
    -o-transform: translateY(68px) scale(1.05);
    transform: translateY(68px) scale(1.05); }
  40% {
    -webkit-transform: translateY(68px) scale(1.05);
    -moz-transform: translateY(68px) scale(1.05);
    -ms-transform: translateY(68px) scale(1.05);
    -o-transform: translateY(68px) scale(1.05);
    transform: translateY(68px) scale(1.05); }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(0.4);
    -moz-transform: translateY(0px) scale(0.4);
    -ms-transform: translateY(0px) scale(0.4);
    -o-transform: translateY(0px) scale(0.4);
    transform: translateY(0px) scale(0.4); }
  90% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(0.4);
    -moz-transform: translateY(0px) scale(0.4);
    -ms-transform: translateY(0px) scale(0.4);
    -o-transform: translateY(0px) scale(0.4);
    transform: translateY(0px) scale(0.4); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(1);
    -moz-transform: translateY(0px) scale(1);
    -ms-transform: translateY(0px) scale(1);
    -o-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1); } }
@-ms-keyframes animate_p7_part1 {
  0% {
    opacity: 0; }
  10% {
    opacity: 1;
    -webkit-transform: translateY(68px) scale(1.05);
    -moz-transform: translateY(68px) scale(1.05);
    -ms-transform: translateY(68px) scale(1.05);
    -o-transform: translateY(68px) scale(1.05);
    transform: translateY(68px) scale(1.05); }
  40% {
    -webkit-transform: translateY(68px) scale(1.05);
    -moz-transform: translateY(68px) scale(1.05);
    -ms-transform: translateY(68px) scale(1.05);
    -o-transform: translateY(68px) scale(1.05);
    transform: translateY(68px) scale(1.05); }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(0.4);
    -moz-transform: translateY(0px) scale(0.4);
    -ms-transform: translateY(0px) scale(0.4);
    -o-transform: translateY(0px) scale(0.4);
    transform: translateY(0px) scale(0.4); }
  90% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(0.4);
    -moz-transform: translateY(0px) scale(0.4);
    -ms-transform: translateY(0px) scale(0.4);
    -o-transform: translateY(0px) scale(0.4);
    transform: translateY(0px) scale(0.4); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(1);
    -moz-transform: translateY(0px) scale(1);
    -ms-transform: translateY(0px) scale(1);
    -o-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1); } }
@-o-keyframes animate_p7_part1 {
  0% {
    opacity: 0; }
  10% {
    opacity: 1;
    -webkit-transform: translateY(68px) scale(1.05);
    -moz-transform: translateY(68px) scale(1.05);
    -ms-transform: translateY(68px) scale(1.05);
    -o-transform: translateY(68px) scale(1.05);
    transform: translateY(68px) scale(1.05); }
  40% {
    -webkit-transform: translateY(68px) scale(1.05);
    -moz-transform: translateY(68px) scale(1.05);
    -ms-transform: translateY(68px) scale(1.05);
    -o-transform: translateY(68px) scale(1.05);
    transform: translateY(68px) scale(1.05); }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(0.4);
    -moz-transform: translateY(0px) scale(0.4);
    -ms-transform: translateY(0px) scale(0.4);
    -o-transform: translateY(0px) scale(0.4);
    transform: translateY(0px) scale(0.4); }
  90% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(0.4);
    -moz-transform: translateY(0px) scale(0.4);
    -ms-transform: translateY(0px) scale(0.4);
    -o-transform: translateY(0px) scale(0.4);
    transform: translateY(0px) scale(0.4); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(1);
    -moz-transform: translateY(0px) scale(1);
    -ms-transform: translateY(0px) scale(1);
    -o-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1); } }
@keyframes animate_p7_part1 {
  0% {
    opacity: 0; }
  10% {
    opacity: 1;
    -webkit-transform: translateY(68px) scale(1.05);
    -moz-transform: translateY(68px) scale(1.05);
    -ms-transform: translateY(68px) scale(1.05);
    -o-transform: translateY(68px) scale(1.05);
    transform: translateY(68px) scale(1.05); }
  40% {
    -webkit-transform: translateY(68px) scale(1.05);
    -moz-transform: translateY(68px) scale(1.05);
    -ms-transform: translateY(68px) scale(1.05);
    -o-transform: translateY(68px) scale(1.05);
    transform: translateY(68px) scale(1.05); }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(0.4);
    -moz-transform: translateY(0px) scale(0.4);
    -ms-transform: translateY(0px) scale(0.4);
    -o-transform: translateY(0px) scale(0.4);
    transform: translateY(0px) scale(0.4); }
  90% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(0.4);
    -moz-transform: translateY(0px) scale(0.4);
    -ms-transform: translateY(0px) scale(0.4);
    -o-transform: translateY(0px) scale(0.4);
    transform: translateY(0px) scale(0.4); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(1);
    -moz-transform: translateY(0px) scale(1);
    -ms-transform: translateY(0px) scale(1);
    -o-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1); } }
.animate .p7_part2 {
  -webkit-animation: animate_p7_part2 3s linear 4.5s 1;
  -moz-animation: animate_p7_part2 3s linear 4.5s 1;
  -ms-animation: animate_p7_part2 3s linear 4.5s 1;
  -o-animation: animate_p7_part2 3s linear 4.5s 1;
  animation: animate_p7_part2 3s linear 4.5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes animate_p7_part2 {
  0% {
    opacity: 0; }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-68px) scale(1.05);
    -moz-transform: translateY(-68px) scale(1.05);
    -ms-transform: translateY(-68px) scale(1.05);
    -o-transform: translateY(-68px) scale(1.05);
    transform: translateY(-68px) scale(1.05); }
  80% {
    -webkit-transform: translateY(-68px) scale(1.05);
    -moz-transform: translateY(-68px) scale(1.05);
    -ms-transform: translateY(-68px) scale(1.05);
    -o-transform: translateY(-68px) scale(1.05);
    transform: translateY(-68px) scale(1.05); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(1);
    -moz-transform: translateY(0px) scale(1);
    -ms-transform: translateY(0px) scale(1);
    -o-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1); } }
@-moz-keyframes animate_p7_part2 {
  0% {
    opacity: 0; }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-68px) scale(1.05);
    -moz-transform: translateY(-68px) scale(1.05);
    -ms-transform: translateY(-68px) scale(1.05);
    -o-transform: translateY(-68px) scale(1.05);
    transform: translateY(-68px) scale(1.05); }
  80% {
    -webkit-transform: translateY(-68px) scale(1.05);
    -moz-transform: translateY(-68px) scale(1.05);
    -ms-transform: translateY(-68px) scale(1.05);
    -o-transform: translateY(-68px) scale(1.05);
    transform: translateY(-68px) scale(1.05); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(1);
    -moz-transform: translateY(0px) scale(1);
    -ms-transform: translateY(0px) scale(1);
    -o-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1); } }
@-ms-keyframes animate_p7_part2 {
  0% {
    opacity: 0; }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-68px) scale(1.05);
    -moz-transform: translateY(-68px) scale(1.05);
    -ms-transform: translateY(-68px) scale(1.05);
    -o-transform: translateY(-68px) scale(1.05);
    transform: translateY(-68px) scale(1.05); }
  80% {
    -webkit-transform: translateY(-68px) scale(1.05);
    -moz-transform: translateY(-68px) scale(1.05);
    -ms-transform: translateY(-68px) scale(1.05);
    -o-transform: translateY(-68px) scale(1.05);
    transform: translateY(-68px) scale(1.05); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(1);
    -moz-transform: translateY(0px) scale(1);
    -ms-transform: translateY(0px) scale(1);
    -o-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1); } }
@-o-keyframes animate_p7_part2 {
  0% {
    opacity: 0; }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-68px) scale(1.05);
    -moz-transform: translateY(-68px) scale(1.05);
    -ms-transform: translateY(-68px) scale(1.05);
    -o-transform: translateY(-68px) scale(1.05);
    transform: translateY(-68px) scale(1.05); }
  80% {
    -webkit-transform: translateY(-68px) scale(1.05);
    -moz-transform: translateY(-68px) scale(1.05);
    -ms-transform: translateY(-68px) scale(1.05);
    -o-transform: translateY(-68px) scale(1.05);
    transform: translateY(-68px) scale(1.05); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(1);
    -moz-transform: translateY(0px) scale(1);
    -ms-transform: translateY(0px) scale(1);
    -o-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1); } }
@keyframes animate_p7_part2 {
  0% {
    opacity: 0; }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-68px) scale(1.05);
    -moz-transform: translateY(-68px) scale(1.05);
    -ms-transform: translateY(-68px) scale(1.05);
    -o-transform: translateY(-68px) scale(1.05);
    transform: translateY(-68px) scale(1.05); }
  80% {
    -webkit-transform: translateY(-68px) scale(1.05);
    -moz-transform: translateY(-68px) scale(1.05);
    -ms-transform: translateY(-68px) scale(1.05);
    -o-transform: translateY(-68px) scale(1.05);
    transform: translateY(-68px) scale(1.05); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(1);
    -moz-transform: translateY(0px) scale(1);
    -ms-transform: translateY(0px) scale(1);
    -o-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1); } }
.animate .p7_part1 .bar_value {
  -webkit-animation: animate_p7_part1_bar_value 0.75s linear 3s 1;
  -moz-animation: animate_p7_part1_bar_value 0.75s linear 3s 1;
  -ms-animation: animate_p7_part1_bar_value 0.75s linear 3s 1;
  -o-animation: animate_p7_part1_bar_value 0.75s linear 3s 1;
  animation: animate_p7_part1_bar_value 0.75s linear 3s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes animate_p7_part1_bar_value {
  0% {
    width: 16.22222%; }
  100% {
    width: 53.83344%; } }
@-moz-keyframes animate_p7_part1_bar_value {
  0% {
    width: 16.22222%; }
  100% {
    width: 53.83344%; } }
@-ms-keyframes animate_p7_part1_bar_value {
  0% {
    width: 16.22222%; }
  100% {
    width: 53.83344%; } }
@-o-keyframes animate_p7_part1_bar_value {
  0% {
    width: 16.22222%; }
  100% {
    width: 53.83344%; } }
@keyframes animate_p7_part1_bar_value {
  0% {
    width: 16.22222%; }
  100% {
    width: 53.83344%; } }
.animate .p7_part2 .bar_value {
  -webkit-animation: animate_p7_part2_bar_value 1.75s linear 5.25s 1;
  -moz-animation: animate_p7_part2_bar_value 1.75s linear 5.25s 1;
  -ms-animation: animate_p7_part2_bar_value 1.75s linear 5.25s 1;
  -o-animation: animate_p7_part2_bar_value 1.75s linear 5.25s 1;
  animation: animate_p7_part2_bar_value 1.75s linear 5.25s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes animate_p7_part2_bar_value {
  0% {
    width: 16.22222%; }
  100% {
    width: 70.53422%; } }
@-moz-keyframes animate_p7_part2_bar_value {
  0% {
    width: 16.22222%; }
  100% {
    width: 70.53422%; } }
@-ms-keyframes animate_p7_part2_bar_value {
  0% {
    width: 16.22222%; }
  100% {
    width: 70.53422%; } }
@-o-keyframes animate_p7_part2_bar_value {
  0% {
    width: 16.22222%; }
  100% {
    width: 70.53422%; } }
@keyframes animate_p7_part2_bar_value {
  0% {
    width: 16.22222%; }
  100% {
    width: 70.53422%; } }
.p7_title {
  position: absolute;
  left: 2.5%;
  width: 94.79167%;
  top: 56px;
  height: 47px;
  background: url("../images/p7_title.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p7_title {
  -webkit-animation: bounceInDown 1s linear 0s 1;
  -moz-animation: bounceInDown 1s linear 0s 1;
  -ms-animation: bounceInDown 1s linear 0s 1;
  -o-animation: bounceInDown 1s linear 0s 1;
  animation: bounceInDown 1s linear 0s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p7_sub_title {
  position: absolute;
  left: 23.54167%;
  width: 45.83333%;
  top: 149px;
  height: 25px;
  background: url("../images/p7_sub_title.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p7_sub_title {
  -webkit-animation: bounceInDown 1s linear 500ms 1;
  -moz-animation: bounceInDown 1s linear 500ms 1;
  -ms-animation: bounceInDown 1s linear 500ms 1;
  -o-animation: bounceInDown 1s linear 500ms 1;
  animation: bounceInDown 1s linear 500ms 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p7_child {
  position: absolute;
  right: 10.20833%;
  width: 15.20833%;
  bottom: 15px;
  height: 105px;
  background: url("../images/p7_child.png") center center no-repeat;
  background-size: 100% 100%; }

.p8_part1 {
  position: absolute;
  top: 152px;
  left: 55px;
  width: 385px;
  height: 237px;
  opacity: 0; }

.p8_part1 .part_title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  padding-left: 57px; }

.p8_part1 .part_title img {
  position: absolute;
  left: 15px;
  top: 50%;
  margin-top: -16px;
  width: 24px;
  height: 32px; }

.p8_part1 .part_title h3 {
  line-height: 1.4;
  font-size: 19px;
  color: #fff; }

.p8_part1 .part_content {
  position: absolute;
  top: 64px;
  left: 0;
  bottom: 0;
  right: 0; }

.p8_part1 .bar_item {
  position: relative;
  width: 100%;
  height: 30px; }

.p8_part1 .part_content .bar {
  box-sizing: border-box;
  position: relative;
  border: 1px solid #fff;
  height: 3px;
  background: transparent;
  top: 10px;
  width: 266px; }

.p8_part1 .part_content .bar_value {
  box-sizing: border-box;
  background-color: #ffb100;
  height: 3px;
  position: absolute;
  top: 10px;
  width: 0px; }

.p8_part1 .part_content .point {
  position: relative;
  border-radius: 50%;
  background-color: #ffb100;
  float: right;
  right: -22px;
  top: -9px;
  height: 22px;
  width: 22px; }

.p8_part1 .part_content .value1 {
  position: absolute;
  font-size: 16px;
  color: #fff;
  top: 0;
  right: 0; }

.p8_part2 {
  position: absolute;
  top: 456px;
  left: 55px;
  width: 385px;
  height: 153px;
  opacity: 0; }

.p8_part2 .part_title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  padding-left: 57px; }

.p8_part2 .part_title img {
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -17px;
  width: 34px;
  height: 34px; }

.p8_part2 .part_title h3 {
  line-height: 1.4;
  font-size: 19px;
  color: #fff; }

.p8_part2 .part_content {
  position: absolute;
  top: 64px;
  left: 0;
  bottom: 0;
  right: 0; }

.p8_part2 .bar_item1 {
  position: relative;
  width: 100%;
  height: 53px; }

.p8_part2 .bar_item2 {
  position: relative;
  width: 100%;
  height: 35px; }

.p8_part2 .part_content .bar {
  box-sizing: border-box;
  position: relative;
  border: 1px solid #fff;
  height: 3px;
  background: transparent;
  top: 20px;
  width: 220px; }

.p8_part2 .part_content .bar_value {
  box-sizing: border-box;
  background-color: #ffb100;
  height: 3px;
  position: absolute;
  top: 20px;
  width: 0px; }

.p8_part2 .part_content .point {
  position: relative;
  border-radius: 50%;
  background-color: #ffb100;
  float: right;
  right: -22px;
  top: -9px;
  height: 22px;
  width: 22px; }

.p8_part2 .bar_item1 .value1 {
  position: absolute;
  font-size: 16px;
  color: #fff;
  top: 0;
  right: 0;
  text-align: right; }

.p8_part2 .value2 {
  position: absolute;
  top: 0;
  font-size: 12px;
  color: #fff; }

.p8_part2 .bar_item1 .value2 {
  left: 96px; }

.p8_part2 .bar_item2 .value2 {
  left: 48px; }

.p8_part2 .bar_item2 .value1 {
  position: absolute;
  font-size: 16px;
  color: #fff;
  top: 16px;
  right: 50px;
  text-align: right; }

.animate .p8_part1 {
  -webkit-animation: rotateInUpLeft 1s linear 1.25s 1;
  -moz-animation: rotateInUpLeft 1s linear 1.25s 1;
  -ms-animation: rotateInUpLeft 1s linear 1.25s 1;
  -o-animation: rotateInUpLeft 1s linear 1.25s 1;
  animation: rotateInUpLeft 1s linear 1.25s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.animate .p8_part2 {
  -webkit-animation: rotateInUpRight 1s linear 4s 1;
  -moz-animation: rotateInUpRight 1s linear 4s 1;
  -ms-animation: rotateInUpRight 1s linear 4s 1;
  -o-animation: rotateInUpRight 1s linear 4s 1;
  animation: rotateInUpRight 1s linear 4s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }
@-moz-keyframes rotateInUpLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(90deg);
    opacity: 0; }
  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1; } }
@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }
@-moz-keyframes rotateInUpRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1; } }
.p8_title {
  position: absolute;
  left: 2.5%;
  width: 94.79167%;
  top: 34px;
  height: 40px;
  background: url("../images/p8_title.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p8_title {
  -webkit-animation: bounceInDown 1s linear 0s 1;
  -moz-animation: bounceInDown 1s linear 0s 1;
  -ms-animation: bounceInDown 1s linear 0s 1;
  -o-animation: bounceInDown 1s linear 0s 1;
  animation: bounceInDown 1s linear 0s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p8_sub_title {
  position: absolute;
  left: 23.54167%;
  width: 30.41667%;
  top: 112px;
  height: 23px;
  background: url("../images/p8_sub_title.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p8_sub_title {
  -webkit-animation: bounceInDown 1s linear 0.5s 1;
  -moz-animation: bounceInDown 1s linear 0.5s 1;
  -ms-animation: bounceInDown 1s linear 0.5s 1;
  -o-animation: bounceInDown 1s linear 0.5s 1;
  animation: bounceInDown 1s linear 0.5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p8_sub_title2 {
  position: absolute;
  left: 23.54167%;
  width: 40.20833%;
  top: 414px;
  height: 23px;
  background: url("../images/p8_sub_title2.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p8_sub_title2 {
  -webkit-animation: bounceInDown 1s linear 2.75s 1;
  -moz-animation: bounceInDown 1s linear 2.75s 1;
  -ms-animation: bounceInDown 1s linear 2.75s 1;
  -o-animation: bounceInDown 1s linear 2.75s 1;
  animation: bounceInDown 1s linear 2.75s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p8_child {
  position: absolute;
  right: 10.20833%;
  width: 15.625%;
  bottom: 15px;
  height: 106px;
  background: url("../images/p8_child.png") center center no-repeat;
  background-size: 100% 100%; }

.p9_part1 {
  position: absolute;
  top: 159px;
  left: 27px;
  width: 413px;
  height: 190px;
  opacity: 0; }

.p9_part1 .part_title {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  padding-left: 55px;
  box-sizing: border-box; }

.p9_part1 .part_title img {
  position: absolute;
  top: 50%;
  left: 14px;
  margin-top: -14px;
  width: 28px;
  height: 28px; }

.p9_part1 .part_title h3 {
  line-height: 1.4;
  font-size: 19px;
  color: #fff; }

.p9_part1 .part_content {
  margin-top: 14px;
  padding-left: 55px;
  width: 100%;
  position: relative;
  box-sizing: border-box; }

.p9_part1 .part_content .male {
  position: absolute;
  top: 50%;
  left: 18px;
  margin-top: -12px;
  width: 24px;
  height: 24px; }

.p9_part1 .part_content .female {
  position: absolute;
  top: 50%;
  left: 18px;
  margin-top: -14px;
  width: 20px;
  height: 28px; }

.rect1, .rect2, .rect3 {
  display: inline-block;
  height: 16px;
  width: 16px;
  margin-left: 3px;
  box-sizing: border-box; }

.rect1 {
  background-color: rgba(0, 255, 241, 0.8); }

.rect2 {
  background-color: rgba(0, 117, 248, 0.8); }

.rect3 {
  background-color: rgba(156, 20, 9, 0.8); }

.rect_part_1 {
  width: 5.92px; }

.rect_part_2 {
  width: 10.08px; }

.rect_part_3 {
  width: 13.92px; }

.rect_part_4 {
  width: 2.08px; }

.rect_part_5 {
  width: 2.752px; }

.rect_part_6 {
  width: 4.304px; }

.rect_part_7 {
  width: 8.944px; }

.p9_part1 .rect_container {
  margin-bottom: 10px; }

.p9_part1 .value {
  display: inline;
  font-size: 16px;
  color: #fff;
  margin-left: 20px; }

.p9_part1 .rect_label {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  text-align: right; }

.p9_part1 .rect_label > div.rect1_label, .p9_part1 .rect_label > div.rect2_label {
  display: inline-block;
  margin-left: 8px;
  color: #fff;
  font-size: 16px; }

.p9_part2 {
  position: absolute;
  top: 416px;
  left: 27px;
  width: 413px;
  height: 183px;
  opacity: 0; }

.p9_part2 .part_title {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 33px;
  padding-left: 55px;
  box-sizing: border-box; }

.p9_part2 .part_title img {
  position: absolute;
  top: 50%;
  left: 10.5px;
  margin-top: -14px;
  width: 35px;
  height: 28px; }

.p9_part2 .part_title h3 {
  line-height: 1.4;
  font-size: 21px;
  color: #fff;
  position: absolute;
  bottom: 0; }

.p9_part2 .part_content {
  margin-top: 14px;
  padding-left: 55px;
  width: 100%;
  position: relative;
  box-sizing: border-box; }

.p9_part2 .part_content .male {
  position: absolute;
  top: 50%;
  left: 16px;
  margin-top: -12px;
  width: 24px;
  height: 24px; }

.p9_part2 .part_content .female {
  position: absolute;
  top: 50%;
  left: 18px;
  margin-top: -14px;
  width: 20px;
  height: 28px; }

.p9_part2 .value {
  display: inline;
  font-size: 16px;
  color: #fff;
  margin-left: 20px; }

.p9_part2 .labels {
  position: absolute;
  top: 140px;
  left: -7px;
  width: 425px;
  height: 53px; }

.p9_part2 .rect_label > div.rect1_label, .p9_part1 .rect_label > div.rect2_label {
  display: inline-block;
  margin-left: 8px;
  color: #fff;
  font-size: 16px; }

.p9_part2 .labels .label_part_1, .p9_part2 .labels .label_part_2, .p9_part2 .labels .label_part_3 {
  width: 140px;
  height: 41px;
  text-align: center;
  float: left; }

#page-9 .labels .txt {
  color: #fff;
  font-size: 14px; }

.clear {
  clear: left; }

.p9_child {
  position: absolute;
  right: 10.20833%;
  width: 13.95833%;
  bottom: 15px;
  height: 105px;
  background: url("../images/p9_child.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p9_part1 {
  -webkit-animation: fadein 0.5s linear 1.25s 1;
  -moz-animation: fadein 0.5s linear 1.25s 1;
  -ms-animation: fadein 0.5s linear 1.25s 1;
  -o-animation: fadein 0.5s linear 1.25s 1;
  animation: fadein 0.5s linear 1.25s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.animate .p9_part2 {
  -webkit-animation: fadein 1s linear 2.75s 1;
  -moz-animation: fadein 1s linear 2.75s 1;
  -ms-animation: fadein 1s linear 2.75s 1;
  -o-animation: fadein 1s linear 2.75s 1;
  animation: fadein 1s linear 2.75s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-ms-keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-o-keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.p9_title {
  position: absolute;
  left: 4.58333%;
  width: 92.29167%;
  top: 42px;
  height: 31px;
  background: url("../images/p9_title.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p9_title {
  -webkit-animation: bounceInDown 1s linear 0s 1;
  -moz-animation: bounceInDown 1s linear 0s 1;
  -ms-animation: bounceInDown 1s linear 0s 1;
  -o-animation: bounceInDown 1s linear 0s 1;
  animation: bounceInDown 1s linear 0s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p9_sub_title, .p9_sub_title2 {
  position: absolute;
  left: 16.66667%;
  top: 116px;
  font-size: 24px;
  opacity: 0;
  color: #fff;
  font-weight: bold; }

.animate .p9_sub_title {
  -webkit-animation: bounceInDown 1s linear 0.5s 1;
  -moz-animation: bounceInDown 1s linear 0.5s 1;
  -ms-animation: bounceInDown 1s linear 0.5s 1;
  -o-animation: bounceInDown 1s linear 0.5s 1;
  animation: bounceInDown 1s linear 0.5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p9_sub_title2 {
  top: 384px; }

/*
.p9_sub_title2 {
  position: absolute;
  left: base_width_percent(113px);
  width: base_width_percent(165px);
  top: after_ratio(minus_topbar(480px));
  height: after_ratio(23px);
  background: url('../images/p9_sub_title2.png') center center no-repeat;
  background-size: 100% 100%;
  opacity: 0;
}*/
.animate .p9_sub_title2 {
  -webkit-animation: bounceInDown 1s linear 1.75s 1;
  -moz-animation: bounceInDown 1s linear 1.75s 1;
  -ms-animation: bounceInDown 1s linear 1.75s 1;
  -o-animation: bounceInDown 1s linear 1.75s 1;
  animation: bounceInDown 1s linear 1.75s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p10_part1 {
  position: absolute;
  top: 199px;
  left: 18px;
  width: 444px;
  height: 201px; }

.p10_part1 .part_title {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  padding-left: 65px;
  box-sizing: border-box;
  opacity: 0; }

.p10_part1 .part_title img {
  position: absolute;
  top: 50%;
  left: 16px;
  margin-top: -13px;
  width: 40px;
  height: 26px; }

.p10_part1 .part_title h3 {
  line-height: 1.4;
  font-size: 19px;
  color: #fff; }

.p10_part1 .part_content {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  position: absolute;
  top: 68px;
  left: 38px;
  width: 363px;
  height: 130px;
  opacity: 0; }

.p10_part1 .part_content .item {
  float: left;
  width: 33%; }

.p10_part1 .part_content .item svg {
  width: 100%; }

.job_1, .job_2, .job_3 {
  float: left;
  width: 110px;
  height: 130px;
  text-align: center; }

.part_content .pic_box {
  width: 110px;
  height: 102px;
  text-align: center; }

.job_1 .pic {
  width: 90px;
  height: 101px;
  background: url("../images/p10_job_qiuzhi.png") center center no-repeat;
  background-size: 100% 100%; }

.job_2 .pic {
  width: 93px;
  height: 101px;
  background: url("../images/p10_job_chuangye.png") center center no-repeat;
  background-size: 100% 100%; }

.job_3 .pic {
  width: 100px;
  height: 90px;
  background: url("../images/p10_job_gongwuyuan.png") center center no-repeat;
  background-size: 100% 100%; }

.part_content .txt {
  color: #fff;
  font-size: 16px;
  margin-top: 8px; }

.p10_part2 {
  position: absolute;
  top: 429px;
  left: 18px;
  width: 444px;
  height: 200px; }

.p10_part2 .part_title {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 35px;
  padding-left: 65px;
  box-sizing: border-box;
  opacity: 0; }

.p10_part2 .part_title img {
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -16px;
  width: 32px;
  height: 32px; }

.p10_part2 .part_title h3 {
  line-height: 1.4;
  font-size: 19px;
  color: #fff;
  display: table-cell;
  vertical-align: middle; }

.p10_part2 .label svg {
  width: 18px;
  height: 18px;
  -webkit-transform: scale(0.88889);
  -moz-transform: scale(0.88889);
  -ms-transform: scale(0.88889);
  -o-transform: scale(0.88889);
  transform: scale(0.88889); }

.p10_part2 .label span {
  color: #fff;
  position: relative;
  top: -4px;
  font-size: 16px;
  margin-left: 5px; }

.p10_part2 .column1 {
  position: absolute;
  left: 35px;
  top: 50px;
  opacity: 0;
  line-height: 1; }

.p10_part2 .column2 {
  position: absolute;
  left: 120px;
  top: 50px;
  opacity: 0;
  line-height: 1; }

#doughnutChart {
  position: absolute;
  top: 20px;
  right: 25px;
  width: 145px;
  height: 145px;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  transform: rotate(-5deg); }

#page-10 .label_1 {
  position: absolute;
  line-height: 1;
  color: #fff;
  font-size: 12px;
  top: 10px;
  left: 337px; }

#page-10 .label_2 {
  position: absolute;
  line-height: 1;
  color: #fff;
  font-size: 12px;
  top: 27px;
  left: 394px; }

#page-10 .label_3 {
  position: absolute;
  line-height: 1;
  color: #fff;
  font-size: 12px;
  top: 75px;
  left: 365px; }

#page-10 .label_4 {
  position: absolute;
  line-height: 1;
  color: #fff;
  font-size: 12px;
  top: 105px;
  left: 365px; }

#page-10 .label_5 {
  position: absolute;
  line-height: 1;
  color: #fff;
  font-size: 12px;
  top: 150px;
  left: 390px; }

#page-10 .label_6 {
  position: absolute;
  line-height: 1;
  color: #fff;
  font-size: 12px;
  top: 170px;
  left: 350px; }

#page-10 .label_7 {
  position: absolute;
  line-height: 1;
  color: #fff;
  font-size: 12px;
  top: 160px;
  left: 290px; }

#page-10 .label_8 {
  position: absolute;
  line-height: 1;
  color: #fff;
  font-size: 12px;
  top: 96px;
  left: 230px; }

#page-10 .label_9 {
  position: absolute;
  line-height: 1;
  color: #fff;
  font-size: 12px;
  top: 17px;
  left: 277px; }

.p10_title {
  position: absolute;
  left: 16.66667%;
  width: 66.25%;
  top: 33px;
  height: 75px;
  background: url("../images/p10_title.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p10_title {
  -webkit-animation: bounceInDown 1s linear 0s 1;
  -moz-animation: bounceInDown 1s linear 0s 1;
  -ms-animation: bounceInDown 1s linear 0s 1;
  -o-animation: bounceInDown 1s linear 0s 1;
  animation: bounceInDown 1s linear 0s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p10_sub_title {
  position: absolute;
  left: 16.66667%;
  width: 39.58333%;
  top: 151px;
  height: 23px;
  background: url("../images/p10_sub_title.png") center center no-repeat;
  background-size: 100% 100%;
  opacity: 0; }

.animate .p10_sub_title {
  -webkit-animation: bounceInDown 1s linear 0.5s 1;
  -moz-animation: bounceInDown 1s linear 0.5s 1;
  -ms-animation: bounceInDown 1s linear 0.5s 1;
  -o-animation: bounceInDown 1s linear 0.5s 1;
  animation: bounceInDown 1s linear 0.5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.p10_child {
  position: absolute;
  right: 10.20833%;
  width: 13.125%;
  bottom: 15px;
  height: 106px;
  background: url("../images/p10_child.png") center center no-repeat;
  background-size: 100% 100%; }

.animate .p10_part1 .part_title {
  -webkit-animation: fadein 1s ease 1.5s 1;
  -moz-animation: fadein 1s ease 1.5s 1;
  -ms-animation: fadein 1s ease 1.5s 1;
  -o-animation: fadein 1s ease 1.5s 1;
  animation: fadein 1s ease 1.5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.animate .p10_part1 .part_content {
  -webkit-animation: fadein 1s ease 2.75s 1;
  -moz-animation: fadein 1s ease 2.75s 1;
  -ms-animation: fadein 1s ease 2.75s 1;
  -o-animation: fadein 1s ease 2.75s 1;
  animation: fadein 1s ease 2.75s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.animate .p10_part2 .part_title {
  -webkit-animation: fadein 1s ease 4s 1;
  -moz-animation: fadein 1s ease 4s 1;
  -ms-animation: fadein 1s ease 4s 1;
  -o-animation: fadein 1s ease 4s 1;
  animation: fadein 1s ease 4s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.animate .p10_part2 .column1 {
  -webkit-animation: fadeInLeft 0.25s ease 4.75s 1;
  -moz-animation: fadeInLeft 0.25s ease 4.75s 1;
  -ms-animation: fadeInLeft 0.25s ease 4.75s 1;
  -o-animation: fadeInLeft 0.25s ease 4.75s 1;
  animation: fadeInLeft 0.25s ease 4.75s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.animate .p10_part2 .column2 {
  -webkit-animation: fadeInLeft 0.2s ease 4.9s 1;
  -moz-animation: fadeInLeft 0.2s ease 4.9s 1;
  -ms-animation: fadeInLeft 0.2s ease 4.9s 1;
  -o-animation: fadeInLeft 0.2s ease 4.9s 1;
  animation: fadeInLeft 0.2s ease 4.9s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.my_labels {
  opacity: 0; }

.animate .p10_part2 .my_labels {
  -webkit-animation: fadein 0.5s ease 5.5s 1;
  -moz-animation: fadein 0.5s ease 5.5s 1;
  -ms-animation: fadein 0.5s ease 5.5s 1;
  -o-animation: fadein 0.5s ease 5.5s 1;
  animation: fadein 0.5s ease 5.5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
    -moz-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    -o-transform: translateX(-30px);
    transform: translateX(-30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px); } }
@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
    -moz-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    -o-transform: translateX(-30px);
    transform: translateX(-30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px); } }
@-ms-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
    -moz-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    -o-transform: translateX(-30px);
    transform: translateX(-30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px); } }
@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
    -moz-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    -o-transform: translateX(-30px);
    transform: translateX(-30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px); } }
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
    -moz-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    -o-transform: translateX(-30px);
    transform: translateX(-30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px); } }
.p11_title_text {
  position: absolute;
  top: 201px;
  left: 50%;
  margin-left: -110px;
  width: 220px;
  text-align: center; }

.p11_title_text p {
  font-size: 36px;
  color: #fff;
  font-weight: bolder;
  line-height: 1; }

.p11_title_text p:first-child {
  font-size: 52px;
  margin-bottom: 14px; }

.copyright {
  position: absolute;
  right: 16.66667%;
  width: 33.33333%;
  bottom: 24px;
  text-align: right;
  color: #fff;
  line-height: 1;
  font-size: 24px; }

.page-11 .title_bg, #page-11 .title_bg_line {
  position: absolute;
  left: 50%;
  width: 328px;
  height: 328px;
  margin-left: -164px;
  top: 78px; }

.page-11 .logo {
  left: 16.66667%; }

.page-11 .cartoon {
  top: 426px; }

.page-11.animate .cartoon {
  -webkit-animation: flipInY 1s linear 0.75s 1;
  -moz-animation: flipInY 1s linear 0.75s 1;
  -ms-animation: flipInY 1s linear 0.75s 1;
  -o-animation: flipInY 1s linear 0.75s 1;
  animation: flipInY 1s linear 0.75s 1; }

.page-11 .report_btn {
  display: inline-block;
  position: absolute;
  top: 611px;
  left: 50%;
  margin-left: -152px;
  width: 304px;
  height: 44px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  border-radius: 20px;
  background-color: rgba(220, 213, 216, 0);
  opacity: 0.8;
  color: #fff;
  font-size: 18px;
  line-height: 44px;
  text-align: center; }

.chart {
  position: absolute; }

.doughnutTip {
  position: absolute;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 15px;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.8);
  color: #ddd;
  font-size: 17px;
  text-shadow: 0 1px 0 #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none; }

.doughnutTip:after {
  position: absolute;
  left: 50%;
  bottom: -6px;
  content: "";
  height: 0;
  margin: 0 0 0 -6px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.7);
  line-height: 0; }

.doughnutSummary {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #d5d5d5;
  text-align: center;
  text-shadow: 0 -1px 0 #111;
  cursor: default; }

.doughnutSummaryTitle {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -27%;
  font-size: 22px;
  letter-spacing: .06em; }

.doughnutSummaryNumber {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -15%;
  font-size: 55px; }

.chart path:hover {
  opacity: .65; }

/*# sourceMappingURL=common.css.map */