html,body{
  width:100%;
  height:100%;
  font-size: 1em;
  font-family: "微软雅黑";
  overflow: hidden;
}
-webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */
a:active,a:hover,a:link{background:transparent;}
.clearfix:after,.clearfix:before{content:"";display:table}.clearfix:after{clear:both}.clearfix{zoom:1}
.color_box{
  width:270px;
  position: absolute;
  left:50%;               
  margin-left:-135px;
  top:133px;
}
.game_bg2{
  width:320px;
  margin:0 auto;
  margin-top:30px;
}
img{
  max-width:100%;
  max-height:100%;
}
body{
  background:url('img/bg.jpg') no-repeat 0 0;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
*{
  margin:0;padding:0;
}
.music {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    right: 0rem;
    top: 0rem;
    z-index: 100;
}
.music .control .control-after {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 80%;
    left: 30%;
    margin-top: -.75rem;
    margin-left: -.75rem;
    background: url(img/music_off_8d94020.png) transparent no-repeat center center;
    background-size: 100% 100%;
    -webkit-animation: rotate2d 1.2s linear infinite;
    animation: rotate2d 1.2s linear infinite;
    z-index: -1;
}
.music.stopped .control {
    background: 0 0;
}
.music.stopped .control .control-after {
    -webkit-animation: none;
    animation: none;
}
@keyframes rotate2d{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate2d{
  0%{
    -webkit-transform:rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
  }
}
.music .control {
    width: 2.5rem;
    height: 2.5rem;
    background: url(img/music_c0fda01.gif) transparent no-repeat center center;
    background-size: contain;
}
audio:not([controls]) {
    display: none;
}
#color_box div{
  float:left;
  border-radius: 20px;
  box-sizing: border-box;
  border:1px solid #fff;
  background-image: url('img/hua2.png');
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
#header,#time{
  width:97%;
  text-align: center;
}
#time{
  width:50%;
  position: absolute;
  right:0;
  bottom:5%;
  text-align: left;
}
#time h1{
  width:100%;
  color:#eee;
  text-shadow: 0.02em 0.03em 0.44em #000;
  font-size: 1.4em;
}
#time h1 span{
  font-size: 1.5em;
}
.time_icon{
  height:2.6em;
  width:2.3em;
  background:url(img/time_icon.png) no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  position: absolute;
  right:52%;
  bottom:5%;
}
#header{
  position: absolute;
  top:4.5%;
  font-size: 2.5em;
  z-index: 99;
  left:0;
  color:#fff;
  font-weight: bold;
  text-shadow: 4px 4px 4px #666;
}
#game_end,#game_start,#game_share_img,.qidong_page{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  color:#fff;
  z-index: 999;
  color:#CD0D3C;
  text-shadow: 3px 3px 3px #fff;
}
#game_start{
  background:url(img/srart.jpg) no-repeat 0 0;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
#game_end,#game_share_img{
  color:#fff;
  text-shadow: 3px 3px 3px #2E7C9D;
  background:url(img/end_bg.jpg) no-repeat 0 0;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
.qidong_page{
   background:#E5BEB7;
   z-index: 1000;
}
.qidong_page img{
  width:150px;
  position: absolute;
  top:48%;
  left:50%;
  margin-left: -75px;
}
#game_share_img img{
  width: 70%;
    display: block;
    position: fixed;
    right: 18px;
    top: 0;
}
.game_start_txt{
  position: absolute;
  width:100%;
  left:0;
  top:27%;
  overflow: hidden;
}
.game_top{
  top:35%;
}
.game_title{
  font-weight: bold;
  font-size: 42px;
 }
.game_start_txt p{
  text-align: center;
  margin-top:5%;
}
.game_end_txt{
  top:40%;
}
.game_rule{
  position: absolute;
  left:0;
  top: 60%;
  width:100%;
  padding:0 20px;
  box-sizing: border-box;
}
.game_rule p{
  font-size: 14px;
  margin-top:10px;
} 
.game_end_btn{
  text-align: center;
}
.game_end_btn a{
  color:#fff;
}
.game_end_btn a:last-child{
  margin-left:40px;
}
.game_end_num{
  margin-top:20px;
  font-size: 24px;
  text-align: center;
}
.congratulation{
  margin-top:50px;
  font-size: 50px;
  text-align: center;
}
.guan_num{
  font-size: 80px;
  color:red;
  font-weight: bold;
}
.none{
  display: none;
}
.f14{
  font-size: 1em;
}
.game_erweima{
  margin:51% auto;
  width:100px;
  height:100px;
}
/*animate.css动画*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
@-webkit-keyframes time_animate{
      0%{
        -webkit-transform-origin:50% 60%;
        -webkit-transform: rotateZ(30deg);
      }
      25%{
        -webkit-transform-origin:50% 60%;
        -webkit-transform: rotateZ(-30deg);
      }
      50%{
        -webkit-transform-origin:50% 60%;
        -webkit-transform: rotateZ(0deg);
      }
      100%{
        -webkit-transform-origin:50% 60%;
        -webkit-transform: rotateZ(0deg);
      }
  }
@keyframes time_animate{
      0%{
        transform-origin:50% 60%;
        transform: rotateZ(30deg);
      }
      25%{
        transform-origin:50% 60%;
        transform: rotateZ(-30deg);
      }
      50%{
        transform-origin:50% 60%;
        transform: rotateZ(0deg);
      }
      100%{
        transform-origin:50% 60%;
        transform: rotateZ(0deg);
      }
  }
  .time_animate{
    animation: time_animate .5s linear alternate infinite;
  }
@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}