* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

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

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

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
  text-decoration: none;
  display: inline-block;
}

li {
  list-style: none;
}

div {
  position: relative;
}

span {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}

.abs {
  position: absolute;
}

.hide {
  display: none;
}

.mask {
  width: 100%;
  height: 100%;
  background: rgba(32, 29, 36, 0.9);
  position: absolute;
  top: 0;
  left: 0;
}

.loading {
  width: 100%;
  height: 100%;
}

.share {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: url("../images/share.png") no-repeat center;
  background-size: cover;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
}

.delay-1 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.delay-2 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.logo {
  position: absolute;
  top: 20px;
  left: 15px;
  background: url("../images/logo.png") no-repeat top;
  background-size: cover;
  width: 62px;
  height: 37px;
  background-size: cover;
  z-index: 999;
}

.dot {
  display: inline-block;
  width: 54px;
  height: 54px;
  background-color: #F7B09C;
  border-radius: 50%;
}

.dot::after {
  position: absolute;
  content: "";
  width: 54px;
  height: 54px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
  opacity: 0;
  -webkit-box-shadow: 0 0 1px 2px #F7B09C;
          box-shadow: 0 0 1px 2px #F7B09C;
  -webkit-animation: halo 1.5s 0.5s infinite ease-out;
          animation: halo 1.5s 0.5s infinite ease-out;
}

.dot::before {
  position: absolute;
  content: "";
  width: 54px;
  height: 54px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
  opacity: 0;
  -webkit-box-shadow: 0 0 1px 2px #F7B09C;
          box-shadow: 0 0 1px 2px #F7B09C;
  -webkit-animation: halo 1.5s infinite ease-out;
          animation: halo 1.5s infinite ease-out;
}

@-webkit-keyframes notes {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.5) translate(50%, -50%);
            transform: scale(1.5) translate(50%, -50%);
  }
  80% {
    opacity: 0;
    -webkit-transform: scale(1.5) translate(100%, -100%);
            transform: scale(1.5) translate(100%, -100%);
  }
  100% {
    -webkit-transform: scale(1.5) translate(100%, -100%);
            transform: scale(1.5) translate(100%, -100%);
    opacity: 0;
  }
}

@keyframes notes {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.5) translate(50%, -50%);
            transform: scale(1.5) translate(50%, -50%);
  }
  80% {
    opacity: 0;
    -webkit-transform: scale(1.5) translate(100%, -100%);
            transform: scale(1.5) translate(100%, -100%);
  }
  100% {
    -webkit-transform: scale(1.5) translate(100%, -100%);
            transform: scale(1.5) translate(100%, -100%);
    opacity: 0;
  }
}

.audio {
  display: none;
}

#btn_audio {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 100;
  background: url("../images/music_on.png") no-repeat center;
  background-size: cover;
  width: 24px;
  height: 24px;
  background-size: cover;
  z-index: 999;
}

#btn_audio.on {
  -webkit-animation: rotate 4s infinite linear both;
          animation: rotate 4s infinite linear both;
}

#btn_audio.off {
  background: url("../images/music_off.png") no-repeat center;
  background-size: cover;
  width: 24px;
  height: 24px;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes zoom {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@keyframes zoom {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@-webkit-keyframes flash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes halo {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.7);
            transform: scale(1.7);
  }
}

@keyframes halo {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.7);
            transform: scale(1.7);
  }
}

@-webkit-keyframes updown {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
}

@keyframes updown {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
}

.p1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 100vh;
  overflow: hidden;
  background: url("../images/bg.png") no-repeat top center;
  background-size: cover;
  width: 375px;
  height: 100vh;
}

.p1 .bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  -webkit-animation: flash 3s ease infinite;
          animation: flash 3s ease infinite;
}

.p1 .l1 {
  position: absolute;
  top: 70px;
  left: 41px;
  background: url("../images/p1_01.png") no-repeat center;
  background-size: cover;
  width: 291px;
  height: 81px;
}

.p1 .books {
  position: absolute;
  top: 126px;
  left: 0;
  background: url("../images/book1.png") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 498.5px;
}

.p1 .book {
  position: absolute;
  top: 260px;
  right: 0;
  background: url("../images/book.png") no-repeat center;
  background-size: cover;
  width: 240px;
  height: 399px;
}

.p1 .tips {
  position: absolute;
  top: 609px;
  left: 245px;
}

.p1 .tips .icon {
  position: absolute;
  top: -60px;
  left: 0;
  background: url("../images/p1_02.png") no-repeat center;
  background-size: cover;
  width: 71.5px;
  height: 82.5px;
}

.p1 .tips .txt {
  color: #fff;
  font-size: 12px;
}

.p1 .people {
  position: absolute;
  top: 642px;
  left: 163px;
  background: url("../images/people.png") no-repeat center;
  background-size: cover;
  width: 89px;
  height: 83px;
}

@keyframes flash {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

@-webkit-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0, 5%, 0) rotateZ(0deg);
            transform: rotateZ(0deg) translate3d(0, 5%, 0) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0, 5%, 0) rotateZ(-360deg);
            transform: rotateZ(360deg) translate3d(0, 5%, 0) rotateZ(-360deg);
  }
}

@keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0, 5%, 0) rotateZ(0deg);
            transform: rotateZ(0deg) translate3d(0, 5%, 0) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0, 5%, 0) rotateZ(-360deg);
            transform: rotateZ(360deg) translate3d(0, 5%, 0) rotateZ(-360deg);
  }
}

.p2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 100vh;
  overflow: hidden;
  background: url("../images/bg.png") no-repeat top center;
  background-size: cover;
  width: 375px;
  height: 100vh;
}

.p2 .book {
  position: absolute;
  top: 95px;
  left: 0;
  background: url("../images/p2_01.png") no-repeat center;
  background-size: cover;
  width: 324px;
  height: 589px;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 1s;
  transition: all 1s;
}

.p2 .book.open {
  -webkit-transform: scale(1.5) !important;
          transform: scale(1.5) !important;
  -webkit-transform-origin: left 450px;
          transform-origin: left 450px;
}

.p2 .book .txt {
  position: absolute;
  top: 130px;
  left: 2px;
  background: url("../images/p2_t1.png") no-repeat center;
  background-size: cover;
  width: 237px;
  height: 260px;
}

.p2 .book .icon {
  position: absolute;
  bottom: 80px;
  left: 75px;
  background: url("../images/p2_02.png") no-repeat center;
  background-size: cover;
  width: 68px;
  height: 74px;
}

.p2 .book .menu {
  position: absolute;
  top: 80px;
  left: 260px;
}

.p2 .book .menu .m1 {
  position: absolute;
  top: 0;
  left: 0;
  background: url("../images/p2_m1.png") no-repeat center;
  background-size: cover;
  width: 78px;
  height: 78px;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

.p2 .book .menu .m2 {
  position: absolute;
  top: 70px;
  left: 5px;
  background: url("../images/p2_m2.png") no-repeat center;
  background-size: cover;
  width: 78px;
  height: 78px;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}

.p2 .book .menu .m3 {
  position: absolute;
  top: 140px;
  left: 10px;
  background: url("../images/p2_m3.png") no-repeat center;
  background-size: cover;
  width: 78px;
  height: 78px;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
}

.p2 .book .menu .m4 {
  position: absolute;
  top: 210px;
  left: 15px;
  background: url("../images/p2_m4.png") no-repeat center;
  background-size: cover;
  width: 79px;
  height: 78px;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}

.p2 .book .menu .m5 {
  position: absolute;
  top: 280px;
  left: 20px;
  background: url("../images/p2_m5.png") no-repeat center;
  background-size: cover;
  width: 79px;
  height: 78px;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}

.p2 .book .menu .m6 {
  position: absolute;
  top: 350px;
  left: 25px;
  background: url("../images/p2_m6.png") no-repeat center;
  background-size: cover;
  width: 79px;
  height: 78px;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

.hill {
  position: absolute;
  top: 596px;
  left: 0;
  background: url("../images/hill.png") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 139px;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.hill.out {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.hill .people {
  position: absolute;
  top: 40px;
  left: 163px;
  background: url("../images/people.png") no-repeat center;
  background-size: cover;
  width: 89px;
  height: 83px;
  -webkit-animation: flash2 2s infinite;
          animation: flash2 2s infinite;
}

@-webkit-keyframes flash2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flash2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(-90deg);
            transform: perspective(400px) rotateY(-90deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(20deg);
            transform: perspective(400px) rotateY(20deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
            transform: perspective(400px) rotateY(-10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateY(5deg);
            transform: perspective(400px) rotateY(5deg);
  }
  to {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(-90deg);
            transform: perspective(400px) rotateY(-90deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(20deg);
            transform: perspective(400px) rotateY(20deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
            transform: perspective(400px) rotateY(-10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateY(5deg);
            transform: perspective(400px) rotateY(5deg);
  }
  to {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

.p3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 100vh;
  overflow: hidden;
}

.p3 .scrollX {
  position: absolute;
  top: 10px;
  left: 0;
  width: 375px;
  height: 629px;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p3 .page {
  position: relative;
  width: 1600px;
}

.p3 .page div {
  float: left;
}

.p3 .page .bg {
  width: 375px;
  height: 629px;
  position: relative;
}

.p3 .page .bg::before {
  position: absolute;
  content: "";
  background: url("../images/p_bg1.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p3 .page .img0::after {
  position: absolute;
  content: "";
  background: url("../images/p3_00.png") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p3 .page .img1 {
  background: url("../images/p3_01.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p3 .page .img2 {
  background: url("../images/p3_02.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p3 .page .img3 {
  background: url("../images/p3_03.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p3 .page .menu {
  position: relative;
  width: 100px;
  padding-top: 100px;
}

.p3 .page .menu .item {
  display: block;
  background: url("../images/bookmark_bg.png") no-repeat center;
  background-size: cover;
  width: 65px;
  height: 36px;
  margin: 15px 0;
}

.p3 .page .menu .item span {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  -webkit-transform: rotate(-5deg) translateY(8px);
          transform: rotate(-5deg) translateY(8px);
}

.p3 .page .menu .item span.line1 {
  -webkit-transform: rotate(-5deg) translateY(4px);
          transform: rotate(-5deg) translateY(4px);
}

.p4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 100vh;
  overflow: hidden;
}

.p4 .scrollX {
  position: absolute;
  top: 10px;
  left: 0;
  width: 375px;
  height: 629px;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p4 .page {
  position: relative;
  width: 1225px;
}

.p4 .page div {
  float: left;
}

.p4 .page .bg {
  width: 375px;
  height: 629px;
  position: relative;
}

.p4 .page .bg::before {
  position: absolute;
  content: "";
  background: url("../images/p_bg1.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p4 .page .img0::after {
  position: absolute;
  content: "";
  background: url("../images/p4_00.png") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p4 .page .img1 {
  background: url("../images/p4_01.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p4 .page .img2 {
  background: url("../images/p4_02.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p4 .page #p4_1_1 {
  position: absolute;
  top: 113px;
  right: 209px;
  font-size: 14px;
  color: #D61319;
  font-weight: 600;
  text-align: right;
}

.p4 .page #p4_1_2 {
  position: absolute;
  top: 394px;
  right: 253px;
  font-size: 14px;
  color: #D61319;
  font-weight: 600;
  text-align: right;
}

.p4 .page .menu {
  position: relative;
  width: 100px;
  padding-top: 100px;
}

.p4 .page .menu .item {
  display: block;
  background: url("../images/bookmark_bg.png") no-repeat center;
  background-size: cover;
  width: 65px;
  height: 36px;
  margin: 15px 0;
}

.p4 .page .menu .item span {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  -webkit-transform: rotate(-5deg) translateY(8px);
          transform: rotate(-5deg) translateY(8px);
}

.p4 .page .menu .item span.line1 {
  -webkit-transform: rotate(-5deg) translateY(4px);
          transform: rotate(-5deg) translateY(4px);
}

.p5 {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 100vh;
  overflow: hidden;
}

.p5 .scrollX {
  position: absolute;
  top: 10px;
  left: 0;
  width: 375px;
  height: 629px;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p5 .page {
  position: relative;
  width: 1225px;
}

.p5 .page div {
  float: left;
}

.p5 .page .bg {
  width: 375px;
  height: 629px;
  position: relative;
}

.p5 .page .bg::before {
  position: absolute;
  content: "";
  background: url("../images/p_bg1.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p5 .page .img0::after {
  position: absolute;
  content: "";
  background: url("../images/p5_00.png") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p5 .page .img1 {
  background: url("../images/p5_01.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p5 .page .img2 {
  background: url("../images/p5_02.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p5 .page #p5_1_1 {
  position: absolute;
  top: 92px;
  right: 263px;
  font-size: 16px;
  color: #D61319;
  font-weight: 600;
  text-align: right;
}

.p5 .page #p5_1_2 {
  position: absolute;
  top: 117px;
  right: 253px;
  font-size: 16px;
  color: #D61319;
  font-weight: 600;
  text-align: right;
}

.p5 .page #p5_1_3 {
  position: absolute;
  top: 381px;
  right: 224px;
  font-size: 14px;
  color: #D61319;
  font-weight: 600;
  text-align: right;
}

.p5 .page #p5_2_1 {
  position: absolute;
  top: 92px;
  right: 204px;
  font-size: 16px;
  color: #D61319;
  font-weight: 600;
  text-align: right;
}

.p5 .page #p5_2_2 {
  position: absolute;
  top: 92px;
  right: 100px;
  font-size: 16px;
  color: #D61319;
  font-weight: 600;
  text-align: right;
}

.p5 .page #p5_2_3 {
  position: absolute;
  top: 117px;
  right: 278px;
  font-size: 16px;
  color: #D61319;
  font-weight: 600;
  text-align: right;
}

.p5 .page #p5_2_4 {
  position: absolute;
  top: 401px;
  right: 85px;
  font-size: 16px;
  color: #D61319;
  font-weight: 600;
  text-align: right;
}

.p5 .page #p5_2_5 {
  position: absolute;
  top: 426px;
  right: 226px;
  font-size: 16px;
  color: #D61319;
  font-weight: 600;
  text-align: right;
}

.p5 .page .menu {
  position: relative;
  width: 100px;
  padding-top: 100px;
}

.p5 .page .menu .item {
  display: block;
  background: url("../images/bookmark_bg.png") no-repeat center;
  background-size: cover;
  width: 65px;
  height: 36px;
  margin: 15px 0;
}

.p5 .page .menu .item span {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  -webkit-transform: rotate(-5deg) translateY(8px);
          transform: rotate(-5deg) translateY(8px);
}

.p5 .page .menu .item span.line1 {
  -webkit-transform: rotate(-5deg) translateY(4px);
          transform: rotate(-5deg) translateY(4px);
}

.p6 {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 100vh;
  overflow: hidden;
}

.p6 .scrollX {
  position: absolute;
  top: 10px;
  left: 0;
  width: 375px;
  height: 629px;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p6 .page {
  position: relative;
  width: 1225px;
}

.p6 .page div {
  float: left;
}

.p6 .page .bg {
  width: 375px;
  height: 629px;
  position: relative;
}

.p6 .page .bg::before {
  position: absolute;
  content: "";
  background: url("../images/p_bg1.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p6 .page .img0::after {
  position: absolute;
  content: "";
  background: url("../images/p6_00.png") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p6 .page .img1 {
  background: url("../images/p6_01.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p6 .page .img2 {
  background: url("../images/p6_02.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p6 .page #p6_2_1 {
  position: absolute;
  top: 101px;
  right: 228px;
  font-size: 16px;
  color: #D61319;
  font-weight: 600;
  text-align: right;
}

.p6 .page #p6_2_2 {
  position: absolute;
  top: 125px;
  right: 184px;
  font-size: 16px;
  color: #D61319;
  font-weight: 600;
  text-align: right;
}

.p6 .page .menu {
  position: relative;
  width: 100px;
  padding-top: 100px;
}

.p6 .page .menu .item {
  display: block;
  background: url("../images/bookmark_bg.png") no-repeat center;
  background-size: cover;
  width: 65px;
  height: 36px;
  margin: 15px 0;
}

.p6 .page .menu .item span {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  -webkit-transform: rotate(-5deg) translateY(8px);
          transform: rotate(-5deg) translateY(8px);
}

.p6 .page .menu .item span.line1 {
  -webkit-transform: rotate(-5deg) translateY(4px);
          transform: rotate(-5deg) translateY(4px);
}

.p7 {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 100vh;
  overflow: hidden;
}

.p7 .scrollX {
  position: absolute;
  top: 10px;
  left: 0;
  width: 375px;
  height: 629px;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p7 .page {
  position: relative;
  width: 1225px;
}

.p7 .page div {
  float: left;
}

.p7 .page .bg {
  width: 375px;
  height: 629px;
  position: relative;
}

.p7 .page .bg::before {
  position: absolute;
  content: "";
  background: url("../images/p_bg1.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p7 .page .img0::after {
  position: absolute;
  content: "";
  background: url("../images/p7_00.png") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p7 .page .img1 {
  background: url("../images/p7_01.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p7 .page .img2 {
  background: url("../images/p7_02.jpg") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 629px;
}

.p7 .page #p7_1_1 {
  position: absolute;
  top: 93px;
  right: 70px;
  font-size: 16px;
  color: #D61319;
  font-weight: 600;
  text-align: right;
}

.p7 .page .menu {
  position: relative;
  width: 100px;
  padding-top: 100px;
}

.p7 .page .menu .item {
  display: block;
  background: url("../images/bookmark_bg.png") no-repeat center;
  background-size: cover;
  width: 65px;
  height: 36px;
  margin: 15px 0;
}

.p7 .page .menu .item span {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  -webkit-transform: rotate(-5deg) translateY(8px);
          transform: rotate(-5deg) translateY(8px);
}

.p7 .page .menu .item span.line1 {
  -webkit-transform: rotate(-5deg) translateY(4px);
          transform: rotate(-5deg) translateY(4px);
}

.p8 {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 100vh;
  overflow: hidden;
  background: url("../images/bg.png") no-repeat top center;
  background-size: cover;
  width: 375px;
  height: 100vh;
  z-index: 10000;
}

.p8 .l1 {
  position: absolute;
  top: 0;
  left: 15px;
  background: url("../images/p8_01.png") no-repeat center;
  background-size: cover;
  width: 345px;
  height: 620px;
}

.p8 .l2 {
  position: absolute;
  top: 0;
  left: 15px;
  background: url("../images/p8_02.png") no-repeat center;
  background-size: cover;
  width: 345px;
  height: 620px;
}

.p8 .l3 {
  position: absolute;
  top: 0;
  left: 15px;
  background: url("../images/p8_03.png") no-repeat center;
  background-size: cover;
  width: 345px;
  height: 620px;
}

.p8 .l4 {
  position: absolute;
  top: 0;
  left: 15px;
  background: url("../images/p8_04.png") no-repeat center;
  background-size: cover;
  width: 345px;
  height: 620px;
}

.p8 .l5 {
  position: absolute;
  top: 0;
  left: 15px;
  background: url("../images/p8_05.png") no-repeat center;
  background-size: cover;
  width: 345px;
  height: 620px;
}

.p8 .btn {
  position: absolute;
  top: 108px;
  right: 15px;
  background: url("../images/p8_btn.png") no-repeat center;
  background-size: cover;
  width: 101px;
  height: 26px;
  z-index: 1;
}

.p8 .tips {
  position: absolute;
  bottom: 50px;
  width: 100%;
  color: #fff;
  text-align: center;
  opacity: .6;
}

.p8 .pic {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.p8 .pic img {
  width: 100%;
}

@media screen and (max-height: 660px) {
  .p8 .tips {
    bottom: 30px;
  }
}
/*# sourceMappingURL=styles.css.map */