@charset "UTF-8";
html, body {
  width: 100%;
  height: 100%;
  background-color: white; }

a, img {
  -webkit-touch-callout: none;
  /* 禁止长按链接与图片弹出菜单 */ }

html, body {
  -webkit-user-select: none;
  /* 禁止选中文本（如无文本选中需求，此为必选项） */
  user-select: none;
  width: 100%;
  height: 100%; }

.fixed {
  position: fixed; }

.abs {
  position: absolute; }

.rel {
  position: relative; }

.hidden {
  display: none; }

.alpha {
  opacity: 0;
  visibility: hidden; }

.alpha2 {
  opacity: 0; }

.mouseDisabled {
  pointer-events: none; }

.clear {
  clear: both; }

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  padding: 0;
  margin: 0; }

.app {
  opacity: 1; }

.container {
  width: 100%;
  height: 100%;
  overflow: hidden; }

.holder {
  -o-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #21130b; }
  .holder .pages {
    width: 100%;
    height: 100%; }

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

.loadbox {
  width: 100%;
  top: 45%;
  text-align: center;
  color: #e18459;
  font-size: 15px; }

.page1 {
  -o-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  width: 100%;
  height: 100%;
  background: url("../imgs/p1_bg2.jpg") no-repeat;
  background-position: center;
  background-size: cover; }
  .page1 .page1_box {
    -o-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    background-position: center;
    background-size: cover;
    background: url("../imgs/p1_bg.jpg?v1") no-repeat;
    width: 750px;
    height: 1624px; }
  .page1 .logo {
    -o-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    top: 114px;
    left: 0;
    margin-left: -103px; }
  .page1 .p1_txt1 {
    top: 354px;
    left: 253px; }
  .page1 .vid_box {
    width: 576px;
    height: 431px;
    top: 596px;
    left: 88px; }
    .page1 .vid_box .vid {
      width: 100%; }
  .page1 .p1_icon {
    top: 322px;
    left: 20px;
    -o-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    animation: scale_ani2 1.2s infinite;
    -webkit-animation: scale_ani2 1.2s infinite  linear;
    -moz-animation: scale_ani2 1.2s infinite linear;
    -o-animation: scale_ani2 1.2s infinite linear;
    -ms-animation: scale_ani2 1.2s infinite linear; }
  .page1 .p1_btn01, .page1 .p1_btn02, .page1 .p1_btn03 {
    left: 248px;
    cursor: pointer;
    top: 1155px;
    -o-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center; }
  .page1 .p1_btn01 {
    top: 1246px;
    animation: scale_ani 1.4s infinite .2s;
    -webkit-animation: scale_ani 1.4s infinite  linear .2s;
    -moz-animation: scale_ani 1.4s infinite  linear  .2s;
    -o-animation: scale_ani 1.4s infinite  linear .2s;
    -ms-animation: scale_ani 1.4s infinite  linear .2s; }
  .page1 .p1_btn02 {
    animation: scale_ani 1.4s infinite .5s;
    -webkit-animation: scale_ani 1.4s infinite  linear .5s;
    -moz-animation: scale_ani 1.4s infinite  linear  .5s;
    -o-animation: scale_ani 1.4s infinite  linear .5s;
    -ms-animation: scale_ani 1.4s infinite  linear .5s; }
  .page1 .p1_btn03 {
    top: 1337px;
    animation: scale_ani 1.4s infinite .8s;
    -webkit-animation: scale_ani 1.4s infinite  linear .8s;
    -moz-animation: scale_ani 1.4s infinite  linear  .8s;
    -o-animation: scale_ani 1.4s infinite  linear .8s;
    -ms-animation: scale_ani 1.4s infinite  linear .8s; }
  .page1 .tips_box {
    top: 1478px;
    left: 337px;
    width: 70px;
    height: 55px; }
  .page1 .p1_tips_icon {
    top: 42px;
    left: 23px;
    -o-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center; }

.page2 {
  -o-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  width: 100%;
  height: 100%;
  background: url("../imgs/p2_bg3.jpg") repeat-x;
  background-size: 100% 100%; }
  .page2 .page2_box {
    -o-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    pointer-events: none;
    width: 750px;
    height: 100%; }
  .page2 .page2_kv_box {
    width: 100%;
    height: 100%;
    pointer-events: auto; }
  .page2 .p2_bg {
    pointer-events: none; }
  .page2 .p2_pic01, .page2 .p2_pic02, .page2 .p2_pic03 {
    left: 87px;
    top: 89px; }
  .page2 .p2_pic02 {
    top: 595px; }
  .page2 .p2_pic03 {
    top: 1101px; }
  .page2 .p2_chakan {
    top: 486px;
    left: 355px; }
  .page2 .p2_chakan2 {
    top: 993px; }
  .page2 .p2_chakan3 {
    top: 1498px; }
  .page2 .page2_detail {
    width: 100%;
    height: 1624px;
    z-index: 1;
    pointer-events: auto;
    background-color: rgba(0, 0, 0, 0.8); }
    .page2 .page2_detail .p2_kvs_box {
      width: 720px;
      height: 1280px;
      top: 110px;
      left: 15px;
      overflow: hidden;
      pointer-events: auto; }
    .page2 .page2_detail .p2_kvs {
      width: 300%;
      height: 100%;
      top: 0px;
      left: 0px;
      pointer-events: auto; }
      .page2 .page2_detail .p2_kvs .kv {
        float: left; }
    .page2 .page2_detail .close_btn {
      top: 0px;
      right: 0px;
      padding: 25px;
      -o-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -webkit-transform-origin: center center;
      transform-origin: center center;
      animation: scale_ani 1.4s infinite;
      -webkit-animation: scale_ani 1.4s infinite  linear;
      -moz-animation: scale_ani 1.4s infinite  linear;
      -o-animation: scale_ani 1.4s infinite  linear;
      -ms-animation: scale_ani 1.4s infinite  linear; }
    .page2 .page2_detail .p2_icons_box {
      width: 163px;
      height: 26px;
      top: 1454px;
      left: 295px; }
    .page2 .page2_detail .p2_tx11 {
      left: 45px; }
    .page2 .page2_detail .p2_right {
      left: 149px; }
  .page2 .tips_box {
    top: 1548px;
    left: 337px;
    width: 70px;
    height: 55px; }
  .page2 .p1_tips_icon {
    top: 42px;
    left: 23px;
    -o-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center; }

.page3 {
  -o-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  width: 100%;
  height: 100%;
  background: url("../imgs/haibao_bg.jpg") no-repeat;
  background-size: cover;
  top: 0px;
  left: 0px; }
  .page3 .page3_bg {
    width: 100%;
    height: 100%; }
  .page3 .page3_box {
    -o-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    pointer-events: none;
    width: 750px;
    height: 100%; }
  .page3 .canvas_box {
    width: 750px;
    height: 1624px;
    pointer-events: none; }
    .page3 .canvas_box .canvas {
      top: 94px;
      left: 25px;
      pointer-events: auto; }
    .page3 .canvas_box .shoot {
      top: 94px;
      left: 25px;
      pointer-events: auto; }
    .page3 .canvas_box .haibao_txts_box {
      width: 537px;
      height: 96px;
      top: 1296px;
      left: 107px;
      -o-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -o-transform: scale(1.2, 1.2);
      -moz-transform: scale(1.2, 1.2);
      -ms-transform: scale(1.2, 1.2);
      -webkit-transform: scale(1.2, 1.2);
      transform: scale(1.2, 1.2); }
      .page3 .canvas_box .haibao_txts_box .haibao_btn001 {
        top: 0px;
        left: 0px;
        pointer-events: auto; }
      .page3 .canvas_box .haibao_txts_box .haibao_btn002 {
        top: 0px;
        left: 183px;
        pointer-events: auto; }
      .page3 .canvas_box .haibao_txts_box .haibao_btn003 {
        top: 0px;
        left: 366px;
        pointer-events: auto; }
      .page3 .canvas_box .haibao_txts_box .haibao_btn001.on, .page3 .canvas_box .haibao_txts_box .haibao_btn002.on, .page3 .canvas_box .haibao_txts_box .haibao_btn003.on {
        background: url("../imgs/haibao_btn001_on.png") no-repeat; }
      .page3 .canvas_box .haibao_txts_box .stamp_arraw {
        top: 60px;
        left: 77px; }
      .page3 .canvas_box .haibao_txts_box .stamp_tipsTxt {
        left: 200px;
        top: 80px; }
    .page3 .canvas_box .haibao_btn1, .page3 .canvas_box .haibao_btn2, .page3 .canvas_box .replay {
      top: 1343px;
      left: 247px;
      pointer-events: auto;
      -o-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -webkit-transform-origin: center center;
      transform-origin: center center; }
    .page3 .canvas_box .haibao_btn1, .page3 .canvas_box .replay {
      animation: scale_ani 1.4s infinite;
      top: 1456px;
      -webkit-animation: scale_ani 1.4s infinite  linear;
      -moz-animation: scale_ani 1.4s infinite  linear;
      -o-animation: scale_ani 1.4s infinite  linear;
      -ms-animation: scale_ani 1.4s infinite  linear; }
    .page3 .canvas_box .haibao_btn2 {
      top: 1293px; }
    .page3 .canvas_box .replay {
      top: 1396px; }
    .page3 .canvas_box .haibao_tips_box {
      width: 211px;
      height: 40px;
      top: 850px;
      left: 270px; }
      .page3 .canvas_box .haibao_tips_box .tips_left1 {
        top: 20px;
        left: 0px; }
      .page3 .canvas_box .haibao_tips_box .tips_right1 {
        top: 20px;
        right: 0px; }
      .page3 .canvas_box .haibao_tips_box .tips_txt {
        top: 0px;
        left: 54px;
        -o-transform-origin: center bottom;
        -moz-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -o-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2); }
  .page3 .close_btn2 {
    padding: 25px;
    top: 115px;
    right: 26px;
    pointer-events: auto; }

.vid_page {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.8); }
  .vid_page .vid {
    width: 100%;
    height: auto;
    top: 30%; }
  .vid_page .vid_close_btn {
    top: 26.5%;
    right: 15px;
    width: 5%; }

@font-face {
  font-family: "font1";
  src: url("font1.eot");
  /* IE9 */
  src: url("font1.eot?#iefix") format("embedded-opentype"), url("font1.woff") format("woff"), url("font1.ttf") format("truetype"), url("font1.svg#font1") format("svg");
  /* iOS 4.1- */
  font-style: normal;
  font-weight: normal; }
@-webkit-keyframes scale_ani {
  0% {
    transform: scale(1); }
  60% {
    transform: scale(0.92); }
  100% {
    transform: scale(1); } }
@-moz-keyframes scale_ani {
  0% {
    transform: scale(1); }
  60% {
    transform: scale(0.92); }
  100% {
    transform: scale(1); } }
@keyframes scale_ani {
  0% {
    transform: scale(1); }
  60% {
    transform: scale(0.92); }
  100% {
    transform: scale(1); } }
@-webkit-keyframes scale_ani2 {
  0% {
    transform: scale(1); }
  60% {
    transform: scale(0.9); }
  100% {
    transform: scale(1); } }
@-moz-keyframes scale_ani2 {
  0% {
    transform: scale(1); }
  60% {
    transform: scale(0.9); }
  100% {
    transform: scale(1); } }
@keyframes scale_ani2 {
  0% {
    transform: scale(1); }
  60% {
    transform: scale(0.9); }
  100% {
    transform: scale(1); } }
.move_down {
  -webkit-animation: move_down 1s infinite  linear;
  -moz-animation: move_down 1s infinite  linear;
  -o-animation: move_down 1s infinite  linear;
  -ms-animation: move_down 1s infinite  linear;
  animation: move_down 1s infinite  linear; }

.move_left {
  -webkit-animation: move_left 1s infinite  linear;
  -moz-animation: move_left 1s infinite  linear;
  -o-animation: move_left 1s infinite  linear;
  -ms-animation: move_left 1s infinite  linear;
  animation: move_left 1s infinite  linear; }

.move_right {
  -webkit-animation: move_right 1s infinite  linear;
  -moz-animation: move_right 1s infinite  linear;
  -o-animation: move_right 1s infinite  linear;
  -ms-animation: move_right 1s infinite  linear;
  animation: move_right 1s infinite  linear; }

@-webkit-keyframes move_down {
  0% {
    transform: translateY(0px); }
  60% {
    transform: translateY(8px); }
  100% {
    transform: translateY(0px); } }
@-moz-keyframes move_down {
  0% {
    transform: translateY(0px); }
  60% {
    transform: translateY(8px); }
  100% {
    transform: translateY(0px); } }
@keyframes move_down {
  0% {
    transform: translateY(0px); }
  60% {
    transform: translateY(8px); }
  100% {
    transform: translateY(0px); } }
@-webkit-keyframes move_left {
  0% {
    transform: translateX(0px); }
  60% {
    transform: translateX(-5px); }
  100% {
    transform: translateX(0px); } }
@-moz-keyframes move_left {
  0% {
    transform: translateX(0px); }
  60% {
    transform: translateX(-5px); }
  100% {
    transform: translateX(0px); } }
@keyframes move_left {
  0% {
    transform: translateX(0px); }
  60% {
    transform: translateX(-5px); }
  100% {
    transform: translateX(0px); } }
@-webkit-keyframes move_right {
  0% {
    transform: translateX(0px); }
  60% {
    transform: translateX(5px); }
  100% {
    transform: translateX(0px); } }
@-moz-keyframes move_right {
  0% {
    transform: translateX(0px); }
  60% {
    transform: translateX(5px); }
  100% {
    transform: translateX(0px); } }
@keyframes move_right {
  0% {
    transform: translateX(0px); }
  60% {
    transform: translateX(5px); }
  100% {
    transform: translateX(0px); } }

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