* {
  margin: 0;
  padding: 0; }

html, body {
  position: relative;
  font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Tahoma, sans-serif;
  font-size: 20px;
  height: 100%;
  background-color: #000000;
  overflow: hidden; }

a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  text-decoration: none;
  vertical-align: baseline;
  background: transparent; }

a:link, a:visited, a:hover, a:active {
  text-decoration: none;
  outline: none; }

input, select, textarea {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  box-sizing: border-box;
  vertical-align: middle; }

body {
  font-size: 0.32rem; }

#loading {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: radial-gradient(100% 90%, #ffffff, #ffc4ba, #f7acaa);
  overflow: hidden; }
  #loading .content {
    margin: 60% auto 0 auto;
    width: 100%;
    overflow: hidden;
    text-align: center; }
    #loading .content .redpacket {
      width: 1.81333rem; }
    #loading .content p {
      width: 100%;
      color: #e94a57;
      font-size: 0.34667rem;
      text-align: center;
      line-height: 300%; }

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  overflow: hidden; }

.btn_small {
  width: 1.62667rem;
  height: 0.73333rem;
  line-height: 0.73333rem;
  background-color: transparent;
  background-image: url("../images/1-btn-ranking.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 0.32rem;
  color: white; }

.btn_circle {
  position: absolute;
  left: 50%;
  bottom: 0.33333rem;
  margin-left: -1.40667rem;
  display: block;
  width: 2.81333rem;
  height: 2.81333rem;
  background: url("../images/1-btn-start.png") left top no-repeat;
  background-size: 100% 100%; }
  .btn_circle p {
    text-align: center;
    font-size: 0.42667rem;
    color: white; }
  .btn_circle p:first-child {
    margin-top: 0.85333rem; }

#first_page {
  background: url("../images/1-bg.png") left top no-repeat;
  background-size: 100% 100%;
  text-align: center; }
  #first_page .logo {
    position: absolute;
    width: 1.72rem;
    top: 0.33333rem;
    left: 0.33333rem; }
  #first_page .slogan_big {
    width: 8.29333rem;
    margin-top: 1.6rem; }
  #first_page .slogan_group {
    margin-top: 0.4rem;
    width: 100%;
    text-align: center;
    overflow: hidden; }
    #first_page .slogan_group img:first-child {
      width: 2.21333rem;
      vertical-align: middle; }
    #first_page .slogan_group img:last-child {
      width: 5.89333rem;
      vertical-align: middle; }

#last_page {
  background: url("../images/3-bg.jpg") left top no-repeat;
  background-size: 100% 100%; }
  #last_page .title {
    position: absolute;
    width: 100%;
    top: 0.93333rem;
    font-size: 0.48rem;
    color: red;
    font-weight: bolder;
    text-align: center; }
  #last_page .description {
    margin-top: 8.4rem;
    text-align: center;
    font-size: 0.34667rem;
    line-height: 300%; }

#game {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0; }
  #game canvas {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    display: block;
    width: 750px;
    height: 1206px;
    background-color: rgba(255, 255, 255, 0); }
  #game .top_bar {
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 100%;
    height: 0.82667rem;
    z-index: 100;
    overflow: hidden; }
    #count_down {
      float: left;
      margin-left: 0.4rem;
      margin-right: 0.93333rem;
      width: 2.61333rem;
      height: 100%;
      border-radius: 0.82667rem;
      background-color: #e94a57;
      line-height: 0.82667rem;
      overflow: hidden; }
      #count_down img {
        margin-left: 0.2rem;
        margin-right: 0.4rem;
        width: 0.52rem;
        vertical-align: text-bottom; }
      #count_down span {
        color: white;
        font-size: 0.50667rem;
        font-style: italic;
        font-weight: bold;
        letter-spacing: 0.01333rem; }
      #count_down span:last-child {
        vertical-align: bottom;
        font-size: 0.42667rem; }
    #score_bar {
      float: left;
      width: 4.08rem;
      height: 100%;
      border-radius: 0.82667rem;
      background-color: white;
      line-height: 0.82667rem;
      overflow: hidden; }
      #score_bar img {
        margin-left: 0.26667rem;
        margin-right: 0.6rem;
        width: 0.46667rem;
        vertical-align: text-bottom; }
      #score_bar span {
        color: #FB261C;
        font-size: 0.50667rem;
        font-style: italic;
        font-weight: bold; }
    #music {
      float: right;
      margin-top: 0.13333rem;
      margin-right: 0.26667rem;
      width: 0.61333rem;
      height: 0.70667rem; }
    #game .top_bar .music_on {
      background: url("../images/game/music-on.png") left top no-repeat;
      background-size: 100% 100%; }
    #game .top_bar .music_off {
      background: url("../images/game/music-off.png") left top no-repeat;
      background-size: 100% 100%; }
    #rule {
      position: absolute;
      right: 0.26667rem;
      bottom: 0.66667rem;
      width: 1.93333rem;
      height: 0.73333rem;
      line-height: 0.73333rem;
      background-color: transparent;
      background-image: url("../images/game/btn.png");
      background-position: left top;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      z-index: 100;
      font-size: 0.37333rem;
      color: white; }
  #game .fail_page {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    text-align: center; }
    #game .fail_page .content {
      position: relative;
      width: 5.45333rem;
      height: 5.45333rem;
      margin: 4.2rem auto 0 auto;
      background: url("../images/2-p1-BG.png") left top no-repeat;
      background-size: 100% 100%; }
      #game .fail_page .content p {
        font-size: 0.42667rem;
        font-weight: bold;
        color: white;
        line-height: 150%;
        text-align: center; }
      #game .fail_page .content p:first-child {
        padding-top: 1.65333rem; }
      #game .fail_page .content .snow_1st {
        position: absolute;
        width: 0.584rem;
        top: -0.19467rem;
        left: 1.46667rem; }
      #game .fail_page .content .snow_2nd {
        position: absolute;
        width: 0.77867rem;
        top: 0.8rem;
        right: -0.74667rem; }
      #game .fail_page .content .snow_3th {
        position: absolute;
        width: 0.77867rem;
        bottom: 0.26667rem;
        left: 0.93333rem; }
      #game .fail_page .content .snow_4th {
        position: absolute;
        width: 0.584rem;
        bottom: 0.86667rem;
        left: -0.46667rem; }
    .btn_again {
      margin-top: 0.73333rem; }
  #game .rule_detail {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.7);
    overflow: hidden; }
    #game .rule_detail .rule_main {
      position: relative;
      width: 8.52rem;
      margin: 2.2rem auto 0 auto;
      height: 11.54667rem;
      background: url("../images/game/rule.png") left top no-repeat;
      background-size: 100% 100%;
      overflow: hidden; }
      .btn_close {
        width: 0.32rem;
        height: 0.30667rem;
        background-color: transparent;
        background: url("../images/game/btn-close.png") left top no-repeat;
        background-size: 100% 100%; }
      #game .rule_detail .rule_main .rule_close {
        position: absolute;
        top: 0;
        right: 0; }
      #game .rule_detail .rule_main .content {
        margin-top: 1.2rem;
        width: 100%;
        overflow: hidden; }
        #game .rule_detail .rule_main .content .title {
          margin-left: 0.4rem;
          margin-top: 0.4rem;
          margin-bottom: 0.13333rem;
          width: 2.33333rem;
          height: 0.66667rem;
          line-height: 0.66667rem;
          overflow: hidden;
          text-align: center;
          color: white;
          font-size: 0.34667rem;
          background-color: #e94a57;
          border-radius: 0.66667rem; }
        #game .rule_detail .rule_main .content .detail {
          padding-left: 0.86667rem;
          padding-right: 0.26667rem;
          font-size: 0.32rem;
          text-align: justify; }
        #game .rule_detail .rule_main .content .detail:nth-child(3) {
          margin-top: 0.2rem; }

#pop {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden; }
  #pop .share_content {
    width: 100%;
    text-align: right;
    overflow: hidden; }
    #pop .share_content img {
      width: 2.10667rem;
      margin-top: 0.13333rem;
      margin-bottom: 0.4rem;
      margin-right: 0.4rem; }
    #pop .share_content p {
      text-align: right;
      padding-right: 1.06667rem;
      color: white;
      font-size: 0.34667rem; }
  #pop .result_main {
    position: relative;
    width: 85%;
    margin: 3.2rem auto 0 auto;
    text-align: center;
    overflow: hidden; }
    #pop .result_main .result_close {
      position: absolute;
      top: 0;
      right: 0; }
    #result_content {
      margin: 0.93333rem auto 0 auto;
      width: 6.8rem;
      height: 5.33333rem;
      overflow: hidden; }
      #result_content p {
        color: white;
        text-align: center; }
    #pop .result_main .success {
      background: url("../images/huojiang.png") left top no-repeat;
      background-size: 100% 100%; }
      #pop .result_main .success p:first-child {
        font-size: 0.48rem;
        font-weight: bold;
        margin-top: 2.2rem;
        line-height: 200%; }
      #pop .result_main .success p:last-child {
        font-size: 0.32rem; }
    #pop .result_main .failed {
      background: url("../images/weihuojiang.png") left top no-repeat;
      background-size: 100% 100%; }
      #pop .result_main .failed p {
        font-size: 0.64rem;
        font-weight: bold;
        margin-top: 2.26667rem; }
    #share {
      margin-top: 0.4rem; }

#particular_info {
  margin: 0 auto;
  width: 8.18667rem;
  text-align: left;
  overflow: hidden; }
  #particular_info .row {
    width: 100%;
    height: 0.72rem;
    line-height: 0.72rem;
    border-radius: 0.72rem;
    background-color: #E84A58; }
    #particular_info .row .w {
      letter-spacing: 0.26667rem; }
    #particular_info .row label {
      display: inline-block;
      width: 1.46667rem;
      color: white;
      padding-left: 0.13333rem;
      text-align: justify;
      vertical-align: middle; }
    #particular_info .row input, #particular_info .row select {
      color: white;
      width: 6.32rem;
      vertical-align: middle;
      font-size: 0.32rem;
      background-color: transparent; }
    #particular_info .row select {
      padding-right: 0.2rem;
      background-image: url("../images/arrow_down.png");
      background-position: right center;
      background-repeat: no-repeat;
      background-size: 0.26667rem 0.13333rem; }
  #particular_info .form-inline {
    border-radius: 0;
    background-color: transparent; }
    #particular_info .form-inline .fl {
      float: left;
      width: 3.93333rem;
      height: 100%;
      border-radius: 0.72rem;
      background-color: #E84A58;
      overflow: hidden; }
      #particular_info .form-inline .fl input, #particular_info .form-inline .fl select {
        width: 2.06667rem; }
    #particular_info .form-inline .fr {
      float: right;
      width: 3.93333rem;
      height: 100%;
      border-radius: 0.72rem;
      background-color: #E84A58; }
      #particular_info .form-inline .fr input, #particular_info .form-inline .fr select {
        width: 2.06667rem; }
  #particular_info .form-inline:after {
    content: '';
    clear: both;
    width: 0;
    height: 1px;
    overflow: hidden; }
  #particular_info .row:nth-child(n+2) {
    margin-top: 0.26667rem; }

.btn {
  margin: 0 auto;
  display: block;
  width: 2.66667rem;
  height: 0.8rem;
  background-color: #FFF; }