body {
  font-size: 28px ;
}
.pages {
  position: relative;
}
.pages div {
  position: absolute;
  background-size: 100% !important;
}
.pages .content {
  width: 26.66666667em;
  height: 42em;
  left: 50%;
  top: 50%;
  margin: -21em 0 0 -13.33333333em;
  position: absolute;
}
.pages section[data-id="1"] {
  background-color: #F9C46A;
}
.pages section[data-id="1"] .content .t1 {
  background: url("../images/1_t1.png") no-repeat left top;
  width: 6.95833333em;
  height: 1.95833333em;
  left: 7.33333333em;
  top: 10.08333333em;
}
.pages section[data-id="1"] .content .pop {
  background: url("../images/1_pop.png") no-repeat left top;
  width: 9.16666667em;
  height: 5.875em;
  left: 14.91666667em;
  top: 5.04166667em;
}
.pages section[data-id="1"] .content .t2 {
  background: url("../images/1_t2.png") no-repeat left top;
  width: 11.25em;
  height: 1.95833333em;
  left: 7.33333333em;
  top: 13.25em;
}
.pages section[data-id="1"] .content .foot {
  background: url("../images/1_foot.png") no-repeat left top;
  width: 5.08333333em;
  height: 6.41666667em;
  left: 9.08333333em;
  top: 28.20833333em;
}
.pages section[data-id="1"] .content .foot.f2 {
  left: 12.875em;
  top: 21.08333333em;
}
.pages section[data-id="2"] {
  background-color: #FC4B44;
}
.pages section[data-id="2"] .content .t1 {
  background: url("../images/2_t1.png") no-repeat left top;
  width: 21.83333333em;
  height: 5.29166667em;
  left: 2.25em;
  top: 3.25em;
}
.pages section[data-id="2"] .content .p1 {
  background: url("../images/2_p1.png") no-repeat left top;
  width: 15.29166667em;
  height: 4.79166667em;
  left: 5.79166667em;
  top: 7.70833333em;
}
.pages section[data-id="2"] .content .p2 {
  background: url("../images/2_p2.png") no-repeat left top;
  width: 15.33333333em;
  height: 4.75em;
  left: 5.75em;
  top: 12.5em;
}
.pages section[data-id="2"] .content .p3 {
  background: url("../images/2_p3.png") no-repeat left top;
  width: 17.875em;
  height: 4.79166667em;
  left: 4.33333333em;
  top: 17.25em;
}
.pages section[data-id="2"] .content .p4 {
  background: url("../images/2_p4.png") no-repeat left top;
  width: 19.45833333em;
  height: 4.79166667em;
  left: 3.58333333em;
  top: 21.95833333em;
}
.pages section[data-id="2"] .content .p5 {
  background: url("../images/2_p5.png") no-repeat left top;
  width: 19.375em;
  height: 4.83333333em;
  left: 3.54166667em;
  top: 26.66666667em;
}
.pages section[data-id="2"] .content .p6 {
  background: url("../images/2_p6.png") no-repeat left top;
  width: 21.5em;
  height: 4.79166667em;
  left: 2.66666667em;
  top: 31.41666667em;
}
.pages section[data-id="3"] {
  background-color: #C0B090;
}
.pages section[data-id="3"] .content .pb {
  border: 0.33333333em solid #ffffff;
  border-radius: 0.33333333em;
  margin-left: -0.66666667em;
  margin-top: -0.66666667em;
}
.pages section[data-id="3"] .content .t1 {
  background: url("../images/3_t1.png") no-repeat left top;
  width: 7.41666667em;
  height: 1.75em;
  left: 9.83333333em;
  top: 2.79166667em;
}
.pages section[data-id="3"] .content .t2 {
  background: url("../images/3_t2.png") no-repeat left top;
  width: 21.83333333em;
  height: 4.79166667em;
  left: 2.625em;
  top: 32.125em;
}
.pages section[data-id="3"] .content .p1 {
  background: url("../images/3_p1.jpg") no-repeat left top;
  width: 13em;
  height: 9.66666667em;
  left: 7.58333333em;
  top: 21.70833333em;
}
.pages section[data-id="3"] .content .p2 {
  background: url("../images/3_p2.jpg") no-repeat left top;
  width: 15.25em;
  height: 10.83333333em;
  left: 6.375em;
  top: 16.33333333em;
}
.pages section[data-id="3"] .content .p3 {
  background: url("../images/3_p3.jpg") no-repeat left top;
  width: 18.04166667em;
  height: 12.875em;
  left: 4.66666667em;
  top: 10.29166667em;
}
.pages section[data-id="3"] .content .p4 {
  background: url("../images/3_p4.jpg") no-repeat left top;
  width: 9.66666667em;
  height: 12.875em;
  left: 14.95833333em;
  top: 7.33333333em;
}
.pages section[data-id="3"] .content .p5 {
  background: url("../images/3_p5.jpg") no-repeat left top;
  width: 9.79166667em;
  height: 13.16666667em;
  left: 2.83333333em;
  top: 7.33333333em;
}
.pages section[data-id="4"] {
  background-color: #00CABA;
}
.pages section[data-id="4"] .content .pb {
  border: 0.33333333em solid #ffffff;
  border-radius: 1.08333333em;
  margin-left: -0.66666667em;
  margin-top: -0.66666667em;
}
.pages section[data-id="4"] .content .t1 {
  background: url("../images/4_t1.png") no-repeat left top;
  width: 11.04166667em;
  height: 1.75em;
  left: 7.625em;
  top: 3em;
}
.pages section[data-id="4"] .content .p1 {
  background: url("../images/4_p1.jpg") no-repeat left top;
  width: 9.08333333em;
  height: 9.125em;
  left: 13.66666667em;
  top: 26.16666667em;
}
.pages section[data-id="4"] .content .p2 {
  background: url("../images/4_p2.jpg") no-repeat left top;
  width: 10.375em;
  height: 9.54166667em;
  left: 4.83333333em;
  top: 26.70833333em;
}
.pages section[data-id="4"] .content .p3 {
  background: url("../images/4_p3.jpg") no-repeat left top;
  width: 10.5em;
  height: 9.25em;
  left: 2.29166667em;
  top: 19.45833333em;
}
.pages section[data-id="4"] .content .p4 {
  background: url("../images/4_p4.jpg") no-repeat left top;
  width: 8.58333333em;
  height: 12.29166667em;
  left: 14.83333333em;
  top: 8.20833333em;
}
.pages section[data-id="4"] .content .p5 {
  background: url("../images/4_p5.jpg") no-repeat left top;
  width: 14.625em;
  height: 11em;
  left: 10.08333333em;
  top: 18.54166667em;
}
.pages section[data-id="4"] .content .p6 {
  background: url("../images/4_p6.jpg") no-repeat left top;
  width: 8.95833333em;
  height: 12.70833333em;
  left: 8.58333333em;
  top: 6.95833333em;
}
.pages section[data-id="4"] .content .p7 {
  background: url("../images/4_p7.jpg") no-repeat left top;
  width: 9.20833333em;
  height: 10.91666667em;
  left: 2.33333333em;
  top: 11.79166667em;
}
.pages section[data-id="5"] {
  background-color: #7EC452;
}
.pages section[data-id="5"] .content .pb {
  border: 0.33333333em solid #ffffff;
  border-radius: 0.33333333em;
  margin-left: -0.66666667em;
  margin-top: -0.66666667em;
}
.pages section[data-id="5"] .content .t1 {
  background: url("../images/5_t1.png") no-repeat left top;
  width: 13.58333333em;
  height: 2.125em;
  left: 6.58333333em;
  top: 2.375em;
}
.pages section[data-id="5"] .content .p1 {
  background: url("../images/5_p1.jpg") no-repeat left top;
  width: 15.41666667em;
  height: 11.41666667em;
  left: 6.58333333em;
  top: 15.875em;
}
.pages section[data-id="5"] .content .p2 {
  background: url("../images/5_p2.jpg") no-repeat left top;
  width: 14.625em;
  height: 10.16666667em;
  left: 9.41666667em;
  top: 23.45833333em;
  -webkit-transform: rotate(-9deg);
      -ms-transform: rotate(-9deg);
          transform: rotate(-9deg);
}
.pages section[data-id="5"] .content .p3 {
  background: url("../images/5_p3.jpg") no-repeat left top;
  width: 14.83333333em;
  height: 10.95833333em;
  left: 3.45833333em;
  top: 25.70833333em;
  -webkit-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
          transform: rotate(3deg);
}
.pages section[data-id="5"] .content .p4 {
  background: url("../images/5_p4.jpg") no-repeat left top;
  width: 14.70833333em;
  height: 9.625em;
  left: 9.375em;
  top: 7.70833333em;
  -webkit-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.pages section[data-id="5"] .content .p5 {
  background: url("../images/5_p5.jpg") no-repeat left top;
  width: 14.41666667em;
  height: 10.70833333em;
  left: 3.125em;
  top: 10.16666667em;
  -webkit-transform: rotate(6deg);
      -ms-transform: rotate(6deg);
          transform: rotate(6deg);
}
.pages section[data-id="6"] {
  background-color: #8C98EA;
}
.pages section[data-id="6"] .content .pb {
  border: 0.33333333em solid #ffffff;
  border-radius: 0.33333333em;
  margin-left: -0.66666667em;
  margin-top: -0.66666667em;
}
.pages section[data-id="6"] .content .t1 {
  background: url("../images/6_t1.png") no-repeat left top;
  width: 9.04166667em;
  height: 2.08333333em;
  left: 8.83333333em;
  top: 2.66666667em;
}
.pages section[data-id="6"] .content .p2 {
  background: url("../images/6_p2.jpg") no-repeat left top;
  width: 15em;
  height: 11.16666667em;
  left: 6.45833333em;
  top: 24.875em;
  -webkit-transform: rotate(16deg);
      -ms-transform: rotate(16deg);
          transform: rotate(16deg);
}
.pages section[data-id="6"] .content .p3 {
  background: url("../images/6_p3.jpg") no-repeat left top;
  width: 14.45833333em;
  height: 10.16666667em;
  left: 7.08333333em;
  top: 18.25em;
}
.pages section[data-id="6"] .content .p4 {
  background: url("../images/6_p4.jpg") no-repeat left top;
  width: 14em;
  height: 9.75em;
  left: 8.25em;
  top: 13.08333333em;
  -webkit-transform: rotate(4deg);
      -ms-transform: rotate(4deg);
          transform: rotate(4deg);
}
.pages section[data-id="6"] .content .p5 {
  background: url("../images/6_p5.jpg") no-repeat left top;
  width: 14.75em;
  height: 10.875em;
  left: 4.75em;
  top: 7.58333333em;
  -webkit-transform: rotate(-5.5deg);
      -ms-transform: rotate(-5.5deg);
          transform: rotate(-5.5deg);
}
.pages section[data-id="7"] {
  background-color: #F9C46A;
}
.pages section[data-id="7"] .content .pb {
  border: 0.33333333em solid #ffffff;
  border-radius: 0.33333333em;
  margin-left: -0.66666667em;
  margin-top: -0.66666667em;
}
.pages section[data-id="7"] .content .t1 {
  background: url("../images/7_t1.png") no-repeat left top;
  width: 8.66666667em;
  height: 2.16666667em;
  left: 9.04166667em;
  top: 3.16666667em;
}
.pages section[data-id="7"] .content .p1 {
  background: url("../images/70_p1.jpg") no-repeat left top;
  width: 11.58333333em;
  height: 10.54166667em;
  left: 10.66666667em;
  top: 17.54166667em;
}
.pages section[data-id="7"] .content .p2 {
  background: url("../images/70_p2.jpg") no-repeat left top;
  width: 9.83333333em;
  height: 13.33333333em;
  left: 4.25em;
  top: 9.29166667em;
  -webkit-transform: rotate(-12deg);
      -ms-transform: rotate(-12deg);
          transform: rotate(-12deg);
}
.pages section[data-id="7"] .content .p3 {
  background: url("../images/70_p3.jpg") no-repeat left top;
  width: 9.08333333em;
  height: 12.29166667em;
  left: 4.91666667em;
  top: 23.75em;
  -webkit-transform: rotate(-24deg);
      -ms-transform: rotate(-24deg);
          transform: rotate(-24deg);
}
.pages section[data-id="7"] .content .p4 {
  background: url("../images/70_p4.jpg") no-repeat left top;
  width: 10em;
  height: 13.54166667em;
  left: 13em;
  top: 9.04166667em;
  -webkit-transform: rotate(7deg);
      -ms-transform: rotate(7deg);
          transform: rotate(7deg);
}
.pages section[data-id="7"] .content .p5 {
  background: url("../images/70_p5.jpg") no-repeat left top;
  width: 13em;
  height: 10.08333333em;
  left: 11.04166667em;
  top: 24.66666667em;
  -webkit-transform: rotate(9.5deg);
      -ms-transform: rotate(9.5deg);
          transform: rotate(9.5deg);
}
.pages section[data-id="8"] {
  background-color: #F9C46A;
}
.pages section[data-id="8"] .content .pb {
  border: 0.33333333em solid #ffffff;
  border-radius: 0.33333333em;
  margin-left: -0.66666667em;
  margin-top: -0.66666667em;
}
.pages section[data-id="8"] .content .t1 {
  background: url("../images/7_t1.png") no-repeat left top;
  width: 8.66666667em;
  height: 2.16666667em;
  left: 9.04166667em;
  top: 3.16666667em;
}
.pages section[data-id="8"] .content .p1 {
  background: url("../images/71_p1.jpg") no-repeat left top;
  width: 14.04166667em;
  height: 10.54166667em;
  left: 4.04166667em;
  top: 21.25em;
  -webkit-transform: rotate(-37deg);
      -ms-transform: rotate(-37deg);
          transform: rotate(-37deg);
}
.pages section[data-id="8"] .content .p2 {
  background: url("../images/71_p2.jpg") no-repeat left top;
  width: 10.375em;
  height: 13.83333333em;
  left: 12.75em;
  top: 13.16666667em;
  -webkit-transform: rotate(-17deg);
      -ms-transform: rotate(-17deg);
          transform: rotate(-17deg);
}
.pages section[data-id="8"] .content .p3 {
  background: url("../images/71_p3.jpg") no-repeat left top;
  width: 13.33333333em;
  height: 8.79166667em;
  left: 9.04166667em;
  top: 26.16666667em;
  -webkit-transform: rotate(26deg);
      -ms-transform: rotate(26deg);
          transform: rotate(26deg);
}
.pages section[data-id="8"] .content .p4 {
  background: url("../images/71_p4.jpg") no-repeat left top;
  width: 14em;
  height: 10.5em;
  left: 6.08333333em;
  top: 16.625em;
}
.pages section[data-id="8"] .content .p5 {
  background: url("../images/71_p5.jpg") no-repeat left top;
  width: 13.25em;
  height: 8.5em;
  left: 4.79166667em;
  top: 8.54166667em;
  -webkit-transform: rotate(-11deg);
      -ms-transform: rotate(-11deg);
          transform: rotate(-11deg);
}
.pages section[data-id="9"] {
  background-color: #F46C61;
}
.pages section[data-id="9"] .content .pb {
  border: 0.33333333em solid #ffffff;
  border-radius: 0.33333333em;
  margin-left: -0.66666667em;
  margin-top: -0.66666667em;
}
.pages section[data-id="9"] .content .t1 {
  background: url("../images/8_t1.png") no-repeat left top;
  width: 11.41666667em;
  height: 2.125em;
  left: 7.70833333em;
  top: 3.66666667em;
}
.pages section[data-id="9"] .content .p1 {
  background: url("../images/8_p1.jpg") no-repeat left top;
  width: 16em;
  height: 11.875em;
  left: 5.08333333em;
  top: 15.33333333em;
}
.pages section[data-id="9"] .content .p2 {
  background: url("../images/8_p2.jpg") no-repeat left top;
  width: 15.04166667em;
  height: 10.45833333em;
  left: 7em;
  top: 8.95833333em;
  -webkit-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.pages section[data-id="9"] .content .p3 {
  background: url("../images/8_p3.jpg") no-repeat left top;
  width: 14.83333333em;
  height: 10.125em;
  left: 6.5em;
  top: 25.29166667em;
  -webkit-transform: rotate(13deg);
      -ms-transform: rotate(13deg);
          transform: rotate(13deg);
}
.pages section[data-id="9"] .content .shareBtn {
  background: url("../images/shareBtn.png") no-repeat left top;
  width: 13em;
  height: 3.03333333em;
  left: 50%;
  margin-left: -6.5em;
  bottom: 1.45833333em;
}
.pages .mask {
  display: none;
  background: url("../images/bg_share.png") rgba(0, 0, 0, 0.85) no-repeat 85% top;
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 21.66666667em !important;
  left: 0;
  z-index: 20;
  top: 0;
}
.pages .animated {
  display: block;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.pages .fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
.pages .fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@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: 14px !important;
  }
}
/*# sourceMappingURL=style.css.map */