.icon {
  background-image: url("../assets/sprity.png"); }

.icon-wrong {
  background-position: -0px -0px;
  width: 21px;
  height: 21px; }

.icon-right {
  background-position: -0px -21px;
  width: 30px;
  height: 24px; }

.icon-txt-reborn {
  background-position: -0px -45px;
  width: 103px;
  height: 25px; }

.icon-gong {
  background-position: -0px -70px;
  width: 29px;
  height: 29px; }

.icon-dadui {
  background-position: -0px -99px;
  width: 156px;
  height: 30px; }

.icon-coins {
  background-position: -0px -129px;
  width: 136px;
  height: 32px; }

.icon-title-rule {
  background-position: -0px -161px;
  width: 220px;
  height: 34px; }

.icon-title-info {
  background-position: -0px -195px;
  width: 230px;
  height: 36px; }

.icon-title-act-rule {
  background-position: -0px -231px;
  width: 152px;
  height: 36px; }

.icon-btn2-bg {
  background-position: -0px -267px;
  width: 156px;
  height: 41px; }

.icon-btn-bg {
  background-position: -0px -308px;
  width: 156px;
  height: 41px; }

.icon-title-code {
  background-position: -0px -349px;
  width: 265px;
  height: 41px; }

.icon-1000 {
  background-position: -0px -390px;
  width: 425px;
  height: 44px; }

.icon-200 {
  background-position: -0px -434px;
  width: 407px;
  height: 44px; }

.icon-more {
  background-position: -0px -478px;
  width: 159px;
  height: 53px; }

.icon-visit-code {
  background-position: -0px -531px;
  width: 158px;
  height: 53px; }

.icon-get-prize {
  background-position: -0px -584px;
  width: 158px;
  height: 53px; }

.icon-gold1 {
  background-position: -0px -637px;
  width: 50px;
  height: 59px; }

.icon-little-reborn {
  background-position: -0px -696px;
  width: 60px;
  height: 60px; }

.icon-option {
  background-position: -0px -756px;
  width: 612px;
  height: 94px; }

.icon-start {
  background-position: -0px -850px;
  width: 304px;
  height: 98px; }

.icon-join {
  background-position: -0px -948px;
  width: 382px;
  height: 100px; }

.icon-rules {
  background-position: -0px -1048px;
  width: 316px;
  height: 101px; }

.icon-visit-code2 {
  background-position: -0px -1149px;
  width: 434px;
  height: 104px; }

.icon-logo {
  background-position: -0px -1253px;
  width: 433px;
  height: 104px; }

.icon-gold2 {
  background-position: -0px -1357px;
  width: 117px;
  height: 105px; }

.icon-moer2 {
  background-position: -0px -1462px;
  width: 438px;
  height: 105px; }

.icon-remain {
  background-position: -0px -1567px;
  width: 517px;
  height: 147px; }

.icon-create-code {
  background-position: -0px -1714px;
  width: 526px;
  height: 168px; }

.icon-reborn {
  background-position: -0px -1882px;
  width: 172px;
  height: 172px; }

.icon-status-panel {
  background-position: -0px -2054px;
  width: 613px;
  height: 219px; }

.icon-intro {
  background-position: -0px -2273px;
  width: 413px;
  height: 222px; }

.icon-next-panel {
  background-position: -0px -2495px;
  width: 613px;
  height: 323px; }

.icon-panel {
  background-position: -0px -2818px;
  width: 701px;
  height: 724px; }

.icon-time-panel {
  background-position: -0px -3542px;
  width: 613px;
  height: 830px; }

* {
  box-sizing: border-box; }

.ev {
  pointer-events: all !important; }

html {
  background-color: #fff;
  height: 100%;
  font-family: 'Microsoft Yahei', sans-serif;
  font-size: 18px;
  line-height: 1.5; }

body {
  display: block;
  margin: 0 auto;
  width: 750px;
  height: 100%;
  background-color: #fff;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

ul {
  list-style: none;
  margin: 0;
  padding: 0; }

button {
  border: 0;
  background-color: transparent;
  outline: none; }

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

.hide {
  display: none; }

.disapear {
  opacity: 0;
  pointer-events: none; }

.page1 {
  background-image: url("../assets/bg1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  .page1 .icon-join {
    position: absolute;
    left: 50%;
    bottom: 8%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }

.page2 {
  background-image: url("../assets/bg2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  .page2 .icon-logo {
    position: absolute;
    left: 50%;
    top: 50px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  .page2 .status {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 200px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
    .page2 .status .icon-intro {
      padding-left: 150px;
      padding-top: 1px;
      color: #fff;
      font-size: 1.5rem;
      line-height: 1.2rem;
      font-weight: bold;
      margin: 0 auto; }
      .page2 .status .icon-intro b {
        color: #ffdb10; }
    .page2 .status .start {
      width: 100%;
      padding-top: 25px;
      text-align: center; }
      .page2 .status .start .icon-200, .page2 .status .start .icon-1000, .page2 .status .start button {
        margin: 0 auto; }
      .page2 .status .start button {
        margin-top: 50px; }
  .page2 .icon-next-panel {
    font-size: 2em;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
    .page2 .icon-next-panel .self {
      position: absolute;
      left: 10px;
      bottom: 30px;
      font-size: 1.5em;
      font-weight: bold;
      color: #fff;
      width: 300px;
      text-align: center;
      white-space: nowrap; }
      .page2 .icon-next-panel .self b {
        margin-left: 5px;
        color: #da2b29; }
    .page2 .icon-next-panel .current {
      width: 80%;
      margin: 80px auto;
      white-space: nowrap;
      height: 50px;
      line-height: 50px;
      background-color: #da2b29;
      border: 1px #e94d4d solid;
      overflow: hidden;
      border-radius: 20px;
      font-size: 1.5rem;
      color: #fff; }
      .page2 .icon-next-panel .current > div {
        display: inline-block;
        width: 50%;
        text-align: center; }
      .page2 .icon-next-panel .current > div:nth-child(2) {
        background-color: #0f0d0d; }
    .page2 .icon-next-panel .icon-get-prize {
      position: absolute;
      right: 80px;
      bottom: 30px; }
      .page2 .icon-next-panel .icon-get-prize div {
        font-size: 1.5rem;
        margin-top: -60px;
        text-align: center;
        white-space: nowrap;
        color: #da2b29; }
      .page2 .icon-next-panel .icon-get-prize span {
        margin: 0 5px;
        color: #fff;
        font-weight: bold; }
    .page2 .icon-next-panel .next {
      position: absolute;
      right: 70px;
      top: 28px;
      color: #fff;
      font-size: 1.5rem;
      width: 200px;
      text-align: center; }
  .page2 .icon-status-panel {
    position: absolute;
    left: 50%;
    bottom: 200px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
    .page2 .icon-status-panel .icon-reborn {
      margin: 25px 35px; }
    .page2 .icon-status-panel .btns {
      position: absolute;
      right: 30px;
      bottom: 30px; }
    .page2 .icon-status-panel .num {
      position: absolute;
      right: 30px;
      top: 20px;
      color: #fff;
      font-size: 4rem;
      font-weight: bold;
      width: 100px;
      text-align: center; }
  .page2 .icon-rules {
    position: absolute;
    left: 50%;
    bottom: 50px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  .page2 .icon-gold1 {
    position: absolute;
    right: 50px;
    top: 40%; }
  .page2 .icon-gold2 {
    position: absolute;
    left: -60px;
    bottom: 200px; }

.page3 {
  background-image: url("../assets/bg2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  .page3 .icon-logo {
    position: absolute;
    left: 50%;
    top: 50px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  .page3 .icon-time-panel {
    position: absolute;
    left: 50%;
    top: 15%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    color: #fff; }
    .page3 .icon-time-panel .prize, .page3 .icon-time-panel .count-time {
      font-size: 2em;
      font-weight: bold; }
    .page3 .icon-time-panel .prize {
      position: absolute;
      left: 76px;
      top: 135px;
      width: 180px;
      text-align: center; }
    .page3 .icon-time-panel .count-time {
      position: absolute;
      right: 30px;
      top: 132px;
      letter-spacing: 20px; }
      .page3 .icon-time-panel .count-time i {
        margin: 13px;
        font-style: normal; }
    .page3 .icon-time-panel .intro {
      width: 100%;
      text-align: center;
      position: absolute;
      left: 0;
      top: 300px;
      font-size: 2rem;
      font-weight: bold;
      opacity: .8; }
    .page3 .icon-time-panel .remain {
      position: absolute;
      left: 370px;
      bottom: 290px;
      font-size: 3rem;
      color: #ffda11;
      width: 60px;
      white-space: nowrap;
      text-align: center; }
    .page3 .icon-time-panel .btns {
      position: absolute;
      left: 0;
      bottom: 30px;
      width: 100%;
      text-align: center; }
  .page3 .icon-gold1 {
    position: absolute;
    right: 20px;
    top: 50%; }
  .page3 .icon-gold2 {
    position: absolute;
    left: -60px;
    bottom: 150px; }
  .page3 .hidden-rules {
    position: absolute;
    left: 50%;
    top: 215px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 200px;
    height: 60px; }

.page4 .panel {
  width: 100%;
  height: 100%;
    background-color:#fff;
}

.page4 .icon-panel {
  position: absolute;
  left: 50%;
  top: 50px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }
  .page4 .icon-panel .question {
    color: #ffda11;
    width: 80%;
    margin: 110px auto auto auto;
    font-size: 1.8rem;
    text-align: left;
    line-height: 45px;
    word-break: break-all; }
  .page4 .icon-panel .options {
    position: absolute;
    left: 50%;
    top: 200px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  .page4 .icon-panel .icon-option {
    position: relative;
    line-height: 90px;
    margin: 40px 0;
    font-size: 2em;
    text-align: center;
    padding: 0 50px;
    white-space: nowrap; }
    .page4 .icon-panel .icon-option.active {
      border: 5px #2a0a0a solid;
      filter:Gray; -webkit-filter: grayscale(100%);
      background-color:#878787;
      border-radius: 50px; }
      .page4 .icon-panel .icon-option.active:after, .page4 .icon-panel .icon-option.active:before {
        content: ' ';
        border-color: transparent;
        border-width: 10px;
        border-style: solid;
        border-left-width: 15px;
        border-left-color: #fff; }
      .page4 .icon-panel .icon-option.active:after {
        position: absolute;
        right: -28px;
        top: 32px;
        border-right-width: 15px;
        border-right-color: #fff;
        border-left-color: transparent;
        border-left-width: 20px;
        border-right-color: #2a0a0a; }
      .page4 .icon-panel .icon-option.active:before {
        position: absolute;
        left: -28px;
        top: 32px;
        border-left-color: #2a0a0a; }
  .page4 .icon-panel .remain {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    line-height: 100px;
    text-align: center; }
    .page4 .icon-panel .remain > * {
      display: inline-block;
      vertical-align: middle; }
    .page4 .icon-panel .remain b {
      margin: 0 10px;
      font-size: 2rem;
      color: #fff; }
  .page4 .icon-panel .result {
    position: absolute;
    left: 50%;
    top: 200px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
    .page4 .icon-panel .result > * {
      position: relative;
      line-height: 90px;
      margin: 30px 0;
      font-size: 2em;
      text-align: left;
      padding-left: 70px;
      white-space: nowrap;
      width: 612px;
      border: 5px #340d0e solid;
      border-radius: 50px;
      background-color: #fff; }
      .page4 .icon-panel .result > * .line {
        height: 90px;
        background-color: #a9a9a9;
        position: absolute;
        left: 0;
        top: 0;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        max-width: 80%;
        min-width: 70px;
        transition: width .5s ease; }
      .page4 .icon-panel .result > *.right:after, .page4 .icon-panel .result > *.right:before, .page4 .icon-panel .result > *.wrong:after, .page4 .icon-panel .result > *.wrong:before {
        content: ' ';
        border-color: transparent;
        border-width: 10px;
        border-style: solid;
        border-left-width: 15px;
        border-left-color: #fff; }
      .page4 .icon-panel .result > *.right:after, .page4 .icon-panel .result > *.wrong:after {
        position: absolute;
        right: -28px;
        top: 32px;
        border-right-width: 15px;
        border-right-color: #fff;
        border-left-color: transparent;
        border-left-width: 20px; }
      .page4 .icon-panel .result > *.right:before, .page4 .icon-panel .result > *.wrong:before {
        position: absolute;
        left: -28px;
        top: 32px; }
      .page4 .icon-panel .result > *.right .line:before, .page4 .icon-panel .result > *.wrong .line:before {
        content: ' ';
        color: #fff;
        position: absolute;
        left: 20px;
        width: 30px;
        height: 24px;
        position: absolute;
        left: 30px;
        top: 35px;
        -webkit-transform: scale(1.5);
                transform: scale(1.5); }
      .page4 .icon-panel .result > *.right:after {
        border-right-color: #f0c447; }
      .page4 .icon-panel .result > *.right:before {
        border-left-color: #f0c447; }
      .page4 .icon-panel .result > *.right .line {
        background-color: #f0c447; }
        .page4 .icon-panel .result > *.right .line:before {
          background-image: url("../assets/right.png");
          background-repeat: no-repeat;
          position: absolute;
          width: 30px;
          height: 24px; }
      .page4 .icon-panel .result > *.wrong {
        border-color: #ff462e; }
        .page4 .icon-panel .result > *.wrong:after {
          border-right-color: #ff685e; }
        .page4 .icon-panel .result > *.wrong:before {
          border-left-color: #ff685e; }
        .page4 .icon-panel .result > *.wrong .line {
          background-color: #ff685e; }
          .page4 .icon-panel .result > *.wrong .line:before {
            background-image: url("../assets/wrong.png");
            background-repeat: no-repeat;
            position: absolute;
            width: 30px;
            height: 24px; }
    .page4 .icon-panel .result i {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 100%;
      line-height: 90px;
      width: 120px;
      font-style: normal;
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px;
      color: #aa908a;
      font-weight: bold;
      z-index: 64;
      background-color: #fff; }
    .page4 .icon-panel .result span {
      position: relative;
      z-index: 32; }
  .page4 .icon-panel .txt-result {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90px;
    line-height: 90px;
    text-align: center; }
    .page4 .icon-panel .txt-result > * {
      display: inline-block; }
    .page4 .icon-panel .txt-result b {
      color: #ffda11;
      margin: 0 10px;
      font-size: 2.5rem; }

.page4 .icon-gold1 {
  position: absolute;
  right: -20px;
  top: 180px; }

.page4 .icon-gold2 {
  position: absolute;
  left: -30px;
  bottom: -50px; }

.page4 .counter {
  width: 90px;
  height: 90px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 57px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }
  .page4 .counter.right {
    background-color: #efba3f; }
    .page4 .counter.right:before {
      background-image: url("../assets/color-right.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center; }
  .page4 .counter.wrong {
    background-color: #ff614c; }
    .page4 .counter.wrong:before {
      background-image: url("../assets/color-wrong.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center; }
  .page4 .counter.over {
    background-color: #ff614c; }
    .page4 .counter.over .time {
      font-size: 1.5rem; }
  .page4 .counter.right:before, .page4 .counter.wrong:before {
    background-size: 70%; }
  .page4 .counter:before, .page4 .counter .time {
    content: ' ';
    width: 80px;
    height: 80px;
    line-height: 80px;
    white-space: nowrap;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    font-size: 2.5rem;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  .page4 .counter .time, .page4 .counter .color-right, .page4 .counter .color-wrong {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  .page4 .counter .time {
    font-weight: bold; }

.page4 .mengban {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #f48b00 10%, rgba(244, 139, 0, 0.5) 30%, rgba(244, 139, 0, 0) 50%); }

video {
  width: 100%; }

.dialog {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); }
  .dialog .card {
    position: relative;
    position: absolute;
    left: 50%;
    top: 45%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background-color: #8b210f;
    padding: 2px;
    border-radius: 10px;
    max-height: 80%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; }
    .dialog .card.txt {
      padding-top: 40px;
      min-width: 70%;
      width: auto;
      text-align: center; }
    .dialog .card.act-rules {
      width: 85%; }
    .dialog .card.revive-rule {
      width: 80%; }
      .dialog .card.revive-rule .visitcode {
        position: relative;
        text-align: center;
        width: 80%;
        height: 1px;
        background-color: #962816;
        margin: 80px auto;
        line-height: 1.4; }
        .dialog .card.revive-rule .visitcode div {
          position: absolute;
          left: 50%;
          top: -45px;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
          height: 90px;
          font-size: 3rem;
          text-align: center;
          letter-spacing: 2px;
          color: #fff;
          border: 5px #ac331e solid;
          background-color: #6c1809;
          border-radius: 10px;
          padding: 5px 30px;
          -webkit-user-select: all;
             -moz-user-select: all;
              -ms-user-select: all;
                  user-select: all; }
        .dialog .card.revive-rule .visitcode span {
          position: absolute;
          left: 50%;
          bottom: -90px;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%); }
      .dialog .card.revive-rule p {
        font-weight: bold;
        color: #ffb085;
        text-align: center;
        padding-top: 40px; }
    .dialog .card .icon {
      margin: 0 auto;
      margin-bottom: 30px;
      margin-top: -10px; }
    .dialog .card b {
      color: #ffd29f; }
    .dialog .card li {
      position: relative;
      margin-bottom: 30px; }
      .dialog .card li:before {
        position: absolute;
        left: -25px;
        top: 15px;
        content: ' ';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ffd29f; }
  .dialog .share {
    position: absolute;
    right: 30px;
    top: 30px;
    background-image: url("../assets/share.png");
    background-repeat: no-repeat;
    position: absolute;
    width: 156px;
    height: 117px; }
  .dialog .content {
    width: 100%;
    height: auto;
    background-color: #8b210f;
    padding: 40px 30px 40px 40px;
    border: 1px #952717 solid;
    border-radius: 10px;
    color: #db9d3b;
    font-size: 1.6rem; }
    .dialog .content div button {
      display: inline-block;
      margin-left: 10px;
      margin-right: 10px; }
    .dialog .content button {
      display: block;
      margin: 40px auto 0 auto;
      background-color: #f0cb08;
      color: #4b2c01;
      font-weight: bold;
      padding: 5px 50px;
      border-radius: 10px;
      font-size: inherit; }
      .dialog .content button.other {
        background-color: #ff9000;
        color: #6e2c00; }
    .dialog .content input {
      width: 80%;
      height: 60px;
      border-radius: 10px;
      text-align: center;
      font-size: 2.5rem;
      font-weight: bold;
      letter-spacing: 5px;
      color: #000; }
  .dialog .close {
    position: absolute;
    right: 0;
    top: -35px;
    font-size: 4.5rem;
    font-weight: 300;
    padding: 10px; }

.pageshare {
  background-image: url("../assets/bg-share.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  .pageshare .desc {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 20px;
    line-height: 1;
    color: #fff;
    text-align: center; }
  .pageshare .icon-qrcode {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    background-image:none;
    position: absolute;
    left: 50%;
    top: 67%; }
    .pageshare .icon-qrcode img {
      border: 5px #67150e solid;
      outline: #d67f55 solid thick; }
  .pageshare .icon-create-code {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 86px;
    line-height: 168px;
    text-align: center;
    letter-spacing: 2px;
    color: #fff; }
    .pageshare .icon-create-code p {
      position: absolute;
      left: 0;
      top: -70px;
      width: 100%;
      text-align: center;
      font-size: 1.5rem;
      color: #fec823;
      line-height: 1.4;
      letter-spacing: normal; }
      .pageshare .icon-create-code p i {
        color: #fff;
        margin: 0 10px;
        font-style: normal; }
        .pageshare .icon-create-code span {
          user-select: all;
      -webkit-user-select:all;}

.hidden-start{
    position: absolute;
    right:0px;
    top:110px;
    transform:scale(.8);
    -webkit-transform:scale(.8);
}

.landscape-tip{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:#000;
}
.landscape-tip div{
    position: absolute;
    left:50%;
    top:45%;
    font-size:2rem;
    text-align:center;
    color:#fff;
    transform:translate(-50%, -50%);
}