body,
html {
  height: 100%;
  font-size: 40px;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  overflow: hidden;
  background: #000;
}
* {
  background-size: 100% !important;
}
.hide {
  position: absolute;
  display: none;
}
.swipe {
  position: absolute;
  left: 50%;
  bottom: 1em;
  background: url("../images/swipe_up.png") no-repeat left top;
  width: 1.1em;
  height: 1.5em;
  margin-left: -0.55em;
  z-index: 1000;
  opacity: 0;
}
.animated {
  display: block !important;
}
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.content {
  position: absolute;
  width: 100%;
  left: -100%;
}
.content-p {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.nr {
  width: 16em;
  height: 25em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -12.5em;
  margin-left: -8em;
}
.p1 {
  background-color: #131531;
  background: -webkit-gradient(linear, left top, left bottom, from(#131531), to(#2a2b50));
  background: -webkit-linear-gradient(top, #131531, #2a2b50);
  background: -ms-linear-gradient(top, #131531, #2a2b50);
  background: -o-linear-gradient(top, #131531, #2a2b50);
  height: 100%;
  width: 100%;
  position: relative;
}
.p1 .t1 {
  background: url("../images/p1/text1.png") no-repeat left top;
  width: 6.525em;
  height: 1.225em;
  top: 4.5em;
  left: 3.5em;
}
.p1 .t2 {
  background: url("../images/p1/text2.png") no-repeat left top;
  width: 7.1em;
  height: 1.625em;
  left: 5.5em;
  top: 6.25em;
}
.p1 .moon {
  background: url("../images/p1/moon.png") no-repeat left top;
  width: 3.175em;
  height: 3.35em;
  top: 9.1em;
  left: 2.2em;
}
.p1 .build {
  background: url("../images/p1/build.png") no-repeat left top;
  width: 16em;
  height: 10.7em;
  bottom: 0;
  left: 0;
}
.p2 {
  height: 100%;
  width: 100%;
  position: relative;
  background: #4C4680;
}
.p2 .t1 {
  background: url("../images/p2/text1.png") no-repeat left top;
  width: 10.6em;
  height: 1.075em;
  left: 2.1em;
  top: 3.1em;
}
.p2 .t2 {
  background: url("../images/p2/text2.png") no-repeat left top;
  width: 11.225em;
  height: 1.7em;
  left: 3.05em;
  top: 5.1em;
}
.p2 .star {
  background: url("../images/p2/start.png") no-repeat left top;
  width: 0.7em;
  height: 0.575em;
}
.p2 .s1 {
  left: 4.5em;
  top: 1.5em;
}
.p2 .s2 {
  left: 12em;
  top: 2em;
}
.p2 .s3 {
  left: 6em;
  top: 7.5em;
}
.p2 .cloud {
  background: url("../images/p2/cloud.png") left top;
  width: 51.2em;
  height: 3.975em;
  background-size: 25% 100% !important;
  left: 0;
  top: 1em;
  z-index: 5;
}
.p2 .erqi {
  background: url("../images/p2/erqi.png") no-repeat left top;
  width: 2.825em;
  height: 5.25em;
  left: 12.5em;
  z-index: 3;
  top: 13.5em;
}
.p2 .window {
  background: url("../images/p2/bus.png") no-repeat left top;
  width: 14.075em;
  height: 9.25em;
  top: 9.25em;
  left: 50%;
  z-index: 11;
  margin-left: -7.0375em;
  overflow: hidden;
}
.p2 .back {
  width: 13.95em;
  height: 9.2em;
  background: #fff;
  top: 9.3em;
  left: 50%;
  margin-left: -6.975em;
  overflow: hidden;
  border-radius: 1.05em;
}
.p3 {
  height: 100%;
  width: 100%;
  position: relative;
  background: #617396;
}
.p3 .t1 {
  background: url("../images/p3/text1.png") no-repeat left top;
  width: 6.375em;
  height: 1.25em;
  left: 2.75em;
  top: 2.7em;
}
.p3 .t2 {
  background: url("../images/p3/text2.png") no-repeat left top;
  width: 8.325em;
  height: 1.775em;
  left: 4.75em;
  top: 4.25em;
}
.p3 .y1 {
  width: 1.45em;
  height: 1.35em;
}
.p3 .y2 {
  width: 1.9em;
  height: 1.85em;
}
.p3 .y3 {
  width: 1.675em;
  height: 1.575em;
}
.p3 .build1 {
  background: url("../images/p3/build1.png") no-repeat left top;
  -webkit-animation-duration: 1.2s;
  -ms-animation-duration: 1.2s;
  animation-duration: 1.2s;
  width: 2.925em;
  height: 4.825em;
  top: 11.5em;
  left: 1em;
}
.p3 .build2 {
  background: url("../images/p3/build2.png") no-repeat left top;
  -webkit-animation-duration: 1.2s;
  -ms-animation-duration: 1.2s;
  animation-duration: 1.2s;
  width: 10.8em;
  height: 7.65em;
  right: 1.3em;
  top: 8em;
}
.p3 .people {
  background: url("../images/p3/people.png") no-repeat left top;
  -webkit-animation-duration: 2s;
  -ms-animation-duration: 2s;
  animation-duration: 2s;
  width: 7.875em;
  height: 8.975em;
  bottom: 3.5em;
  left: 5em;
  z-index: 10;
}
.p3 .dm {
  width: 264em;
  height: 9.35em;
  background: #485c7c;
  left: 50%;
  margin-left: -143em;
  bottom: 0;
}
.p3 .dm::after {
  content: '';
  display: block;
  position: absolute;
  background: url("../images/p3/p3_dm.png") left top;
  width: 100%;
  height: 1.2em;
  top: -1.2em;
  left: 0;
  background-size: 10% 100%;
}
.p3 .wdm {
  position: absolute;
  bottom: 0;
  height: 40%;
  width: 100%;
  background: #485C7C;
}
.p4 {
  height: 100%;
  width: 100%;
  position: relative;
  background: #E4455A;
}
.p4 .t1 {
  background: url("../images/p4/text1.png") no-repeat left top;
  width: 8.275em;
  height: 0.9em;
  left: 2.25em;
  top: 3.45em;
}
.p4 .t2 {
  background: url("../images/p4/text2.png") no-repeat left top;
  width: 11.6em;
  height: 1.175em;
  left: 2.25em;
  top: 5em;
}
.p4 .cloud {
  background: url("../images/p4/cloud.png") left top;
  width: 55.2em;
  height: 2.625em;
  left: 0;
  z-index: 10;
  top: 7em;
  background-size: 25% 100% !important;
}
.p4 .girl {
  background: url("../images/p4/window.png") no-repeat left top;
  width: 11.8em;
  height: 11.275em;
  left: 50%;
  top: 9em;
  margin-left: -5.9em;
}
.p5 {
  background: #534682;
}
.p5 .t1 {
  background: url("../images/p5/text1.png") no-repeat left top;
  width: 6.25em;
  height: 0.85em;
  left: 2.25em;
  top: 2.25em;
}
.p5 .t2 {
  background: url("../images/p5/text2.png") no-repeat left top;
  width: 11.525em;
  height: 1.25em;
  left: 2.25em;
  top: 3.5em;
}
.p5 .allWindow {
  background: url("../images/p5/allWindow.png") no-repeat left top;
  width: 11.75em;
  height: 15.325em;
  left: 50%;
  top: 7.15em;
  margin-left: -5.875em;
}
.p5 .openWindow {
  background: url("../images/p5/openWindow.png") no-repeat left top;
  width: 7.25em;
  height: 5.95em;
  left: 4.3em;
  top: 12em;
}
.p5 .hole {
  position: absolute;
  left: 1.7em;
  top: 0.4em;
  width: 4em;
  height: 4em;
  background: radial-gradient(1.75em, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
  border-radius: 2em;
}
.p5 .light {
  position: absolute;
  background: url("../images/p5/light.png") no-repeat left top;
  width: 2.25em;
  height: 2.75em;
  left: 2.5em;
  top: 0.5em;
  z-index: 10;
}
.p6 {
  background: #4963AA;
}
.p6 .t1 {
  background: url("../images/p6/text1.png") no-repeat left top;
  width: 11.275em;
  height: 1.725em;
  left: 1.05em;
  top: 2.1em;
}
.p6 .t2 {
  background: url("../images/p6/text2.png") no-repeat left top;
  width: 11.2em;
  height: 1.725em;
  left: 3.75em;
  top: 4.5em;
}
.p6 .t3 {
  background: url("../images/p6/text3.png") no-repeat left top;
  width: 11.55em;
  height: 1.95em;
  left: 1.05em;
  top: 6.95em;
}
.p6 .cloud {
  background: url("../images/p6/cloud_02.png") left top;
  background-size: 25% 100%;
  width: 64em;
  height: 8.225em;
  left: 2.5em;
  top: 0.5em;
}
.p6 .house {
  background: url("../images/p6/house.png") no-repeat left top;
  width: 13.45em;
  height: 12.725em;
  left: 50%;
  top: 10.5em;
  margin-left: -6.725em;
}
.p6 .name {
  display: block;
  position: absolute;
  background: none;
  top: 6.725em;
  left: 4.77em;
  width: 5.75em;
  height: 1.075em;
  border: 0;
}
.p6 .tel {
  display: block;
  position: absolute;
  background: none;
  top: 8.3em;
  left: 4.77em;
  width: 5.75em;
  height: 1.075em;
  border: 0;
}
.p6 .submit {
  background: url("../images/p6/btn.png") no-repeat left top;
  width: 5.3em;
  height: 1.75em;
  display: block;
  border: 0;
  text-indent: -1000px;
  position: absolute;
  bottom: 0.75em;
  left: 50%;
  margin-left: -2.65em;
  z-index: 10;
}
.p6 .finger {
  background: url("../images/p6/finger.png") no-repeat left top;
  width: 5.625em;
  height: 5.625em;
  bottom: -2em;
  right: -0.5em;
  z-index: 22;
}
.p7 {
  background: #ED6B93;
}
.p7 .t1 {
  background: url("../images/p7/text1.png") no-repeat left top;
  width: 4.95em;
  height: 0.875em;
  left: 2em;
  top: 3.35em;
}
.p7 .t2 {
  background: url("../images/p7/text2.png") no-repeat left top;
  width: 12.075em;
  height: 1.35em;
  left: 2em;
  top: 5em;
}
.p7 .star {
  background: url("../images/p2/start.png") no-repeat left top;
  width: 0.7em;
  height: 0.575em;
}
.p7 .s1 {
  left: 6em;
  top: 2em;
}
.p7 .s2 {
  left: 12em;
  top: 2em;
}
.p7 .s3 {
  left: 6em;
  top: 7.5em;
}
.p7 .window {
  background: url("../images/p7/window.png") no-repeat left top;
  width: 11.35em;
  height: 12.125em;
  left: 50%;
  top: 9em;
  margin-left: -5.675em;
}
.p7 .women {
  background: url("../images/p7/women.png") no-repeat left top;
  width: 2.6em;
  height: 5.1em;
  left: 3em;
  top: 3.45em;
}
.p7 .men {
  background: url("../images/p7/men.png") no-repeat left top;
  width: 2.95em;
  height: 3.7em;
  left: 6em;
  top: 3.5em;
}
.p8 {
  background: #291F1D;
  -webkit-transition: background 1s;
  -ms-transition: background 1s;
  -o-transition: background 1s;
  z-index: 10;
}
.p8 .t1 {
  background: url("../images/p8/text1.png") no-repeat left top;
  width: 9.025em;
  height: 0.9em;
  left: 2.3em;
  top: 2.85em;
}
.p8 .t2 {
  background: url("../images/p8/text2.png") no-repeat left top;
  width: 9.25em;
  height: 1.225em;
  left: 4.225em;
  top: 4.55em;
}
.p8 .star {
  background: url("../images/p2/start.png") no-repeat left top;
  width: 0.7em;
  height: 0.575em;
  left: 0.5em;
  top: 0.5em;
}
.p8 .s1 {
  left: 6em;
  top: 2em;
}
.p8 .s2 {
  left: 12em;
  top: 2em;
}
.p8 .s3 {
  left: 6em;
  top: 7.5em;
}
.p8 .house {
  background: url("../images/p8/house.png") no-repeat left top;
  width: 14.45em;
  height: 13.775em;
  left: 50%;
  top: 6.5em;
  z-index: 10;
  margin-left: -7.225em;
}
.p8 .light {
  background: url("../images/p8/light.png") no-repeat left top;
  width: 8.425em;
  height: 8.25em;
  left: 50%;
  top: 6em;
  margin-left: -4.2125em;
}
.p8 .lineOut {
  width: 0.7em;
  height: 6.975em;
  left: 10.75em;
  top: 11.165em;
}
.p8 .line {
  background: url("../images/p8/light_line.png") no-repeat left bottom;
  width: 0.7em;
  height: 5.975em;
  left: 0;
  top: 0;
}
.p8 .arrow {
  background: url("../images/p8/arrow.png") no-repeat left top;
  width: 1.7em;
  height: 3.975em;
  left: 10.25em;
  top: 19em;
}
.p8 .finger {
  background: url("../images/p6/finger.png") no-repeat left top;
  width: 5.625em;
  height: 5.625em;
  right: -2em;
  bottom: 3em;
}
.p9 {
  background: #2F2730;
  position: absolute;
  left: 0;
  bottom: -3.85em;
  padding-bottom: 3.85em;
}
.p9 .olight {
  width: 3.8em;
  height: 5.2em;
  top: 7.8em;
  z-index: 9;
  left: 5.75em;
  display: block;
}
.p9 .olimg {
  background: url("../images/p8/o_light.png") no-repeat left top;
  width: 100%;
  height: 100%;
}
.p9 .t1 {
  background: url("../images/p9/text1.png") no-repeat left top;
  width: 5.75em;
  height: 0.775em;
  left: 3em;
  top: 3.5em;
}
.p9 .t2 {
  background: url("../images/p9/text2.png") no-repeat left top;
  width: 10.075em;
  height: 1.825em;
  left: 3em;
  top: 5em;
}
.p9 .num {
  position: absolute;
  color: #E9C772;
  font-size: 2.5em;
  line-height: 0.6em;
  left: 0.5em;
}
.p9 .mapImg {
  background: url("../images/p9/map1.png") no-repeat 0 0em;
  width: 14.6em;
  height: 8.7em;
  left: 50%;
  top: 10.2em;
  margin-left: -7.25em;
}
.p9 .map {
  width: 14.6em;
  height: 8.7em;
  left: 50%;
  top: 9em;
  margin-left: -7.3em;
}
.p9 .slight {
  background: url("../images/p9/s_light.png") no-repeat left top;
  width: 0.625em;
  height: 0.75em;
  position: absolute;
}
.p9 .s1 {
  left: 0em;
  top: 0em;
}
.p9 .s2 {
  left: 50%;
  top: 1.5em;
  margin-left: 0em;
}
.p9 .s3 {
  left: 0em;
  top: 0em;
}
.p9 .s4 {
  left: 0em;
  top: 0em;
}
.p9 .mapNr {
  width: 10em;
  position: absolute;
  height: 4.375em;
  left: 2.5em;
  top: 2em;
}
.p9 .bottomInfo {
  position: absolute;
  bottom: 0;
  color: #fff;
  left: 0;
  width: 100%;
  height: 3.85em;
  background: url("../images/bottom_pic.png") #898a8a no-repeat 50% 50%;
  background-size: 4.675em 2.15em !important;
  text-align: center;
}
.p9 .shareTip {
  background: url("../images/bg_share.png") rgba(0, 0, 0, 0.85) no-repeat 85% top;
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 13em !important;
  left: 0;
  z-index: 20;
  top: 0;
}
.p9 .shareBtn {
  background: url("../images/shareBtn.png") no-repeat left top;
  width: 9.75em;
  height: 2.275em;
  left: 50%;
  bottom: 48px;
  position: absolute;
  margin-left: -4.875em;
}
.p9 .nr {
  margin-top: -14.425em;
}
.p9.bottomAni {
  transition: bottom 0.3s;
  -webkit-transition: bottom 0.3s;
  -ms-transition: bottom 0.3s;
  -o-transition: bottom 0.3s;
}
.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 11;
}
.speaker {
  position: absolute;
  background: url("../images/speaker.png") no-repeat left top;
  width: 1.25em;
  height: 1.25em;
  right: 0.5em;
  top: 0.5em;
}
.speaker.mute {
  background: url("../images/speaker_mute.png") no-repeat left top;
  height: 1.3em;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
  body {
    font-size: 20px !important;
  }
}