/* CSS Document */
body{-webkit-text-size-adjust:none;background:url(../images/bg_rep.jpg) repeat 0 0;}
*{-webkit-text-size-adjust:none; font-size:12px; font-family:"微软雅黑"; margin:0; padding:0; outline:none;}
input,textarea,select{ font-size:100%;}ul{ list-style:none;}
a{ display:inline-block; border: medium none;display: inline-block;outline: medium none;text-decoration: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
.box img{ vertical-align:top; border:none;pointer-events: none; width:100%;}
.box{width:640px; position:relative; overflow:hidden; margin:0 auto;}
.box .rel{ position:relative;}
.box .abs{position:absolute; }


.indexPage .box{ display:none;}
.loading{ position:absolute; top:350px; left:50%;z-index:99; width:383px; margin-left:-191px;}
.loadBg{ width:100%; height:25px; position:relative;}
.loadCar{ position:absolute; left:0; top:-18px; z-index:3;}
.loadhint{ text-align:center; color:#f7b10c; font-size:30px;}
.loadhint span{ font-size:18px;}


.con2_l,.con2_m,.con2_r{ float:left;}
.con2_m{ width:304px; height:183px;}
.prize{ display:block; width:100%; height:100%;}
#scr{ position:relative;width:100%; height:100%;}
.btn_order,.btn_game{ width:38.6%; left:32.3%; top:4%;}
.btn_game{ top:22.9%;}
.prize_list{ position:absolute; width:45%; height:70px; left:31.8%; top:232px; overflow:hidden;}
.box_list{ position:relative; width:100%; height:100%;}
.box_list .list{ position:absolute; top:0; left:0; width:100%;}
.box_list .list li{ width:100%; height:35px; line-height:35px; text-align:center; color:#fff; font-size:20px;}
.score_now,.score_best{ font-size:24px; color:#fff; top:16.7%; left:6.2%; width:15.6%; text-align:center; font-weight:bold;}
.score_best{ left:77.6%;}
.gamePage .box{ background:url(../images/bg_rep.jpg) repeat 0 0;}

.head_box{ display:none; position:absolute; top:81%; left:12%;width:17.8%; height:12%;}
.head_img{ position:absolute; width:63%;top:17%; left:17%; border-radius:10px; overflow:hidden;}
.head_bg{ position:absolute;  top:0%; left:0;}

.btn1{ width:39.8%; top:19.4%; left:30.9%;animation: fadeIn 0.5s 0.9s linear both; -webkit-animation: fadeIn 0.5s 0.1s linear both;}
.btn2{ width:38.9%; top:33.3%; left:31.9%;animation: fadeIn 0.5s 0.9s linear both; -webkit-animation: fadeIn 0.5s 0.1s linear both;}
.title{ left:17%; top:6.2%; width:66.9%;animation: bounceIn .5s 0.6s ease-out both;-webkit-animation: bounceIn .5s 0.6s ease-out both;}
.panda_left{ width:16.6%; left:0; top:18.4%;animation: fadeInLeft 0.5s 0.1s linear both; -webkit-animation: fadeInLeft 0.5s 0.1s linear both;}
.panda_right{ width:30%; top:36.7%; right:4.4%;animation: fadeInRight 0.5s 0.1s linear both; -webkit-animation: fadeInRight 0.5s 0.1s linear both;}
.panda_big{ width:48%; left:0; top:46.2%;animation: fadeInLeft 0.5s 1.1s linear both; -webkit-animation: fadeInLeft 0.5s 1.1s linear both;}
.index_car{ width:73.3%; left:30.9%; top:66.2%;;animation: fadeInRight 0.5s 1.1s linear both; -webkit-animation: fadeInRight 0.5s 1.1s linear both;}
.ball{ width:27.3%; left:4%; top:70.2%;-webkit-animation:bounce 2s 1.5s ease both; animation:bounce 2s 1.5s ease both; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite;}


.btn_close{ position:absolute; width:60px; height:60px; top:100px; right:50px; text-indent:-9999px;}
.z_box{ display:none; position:absolute; top:-1042px;}
.z_order{ width:100%;}
.form_box{ position:absolute; width:80%; left:10.6%; top:25.5%;}
.form_con{ position:absolute; top:0; left:0; width:100%;}
.z_share{ width:100%; height:100%;}
.back_con{ position:absolute; width:41.7%; left:29.2%; top:20.7%;}
.back_con a{ position:absolute; width:63.7%; height:41.7%; top:24%; left:19%; text-indent:-9999px;}

.share_layer{ position:absolute; width:250px; top:35px; right:21px;}
.share_layer .btn_share{ display:block; width:96px; margin:0 0 15px 0; float:right;}
.share_item{ float:right; display:none;}
.share_item a{ float:left; width:36px; margin:0 0 0 25px;}
.show{ display:block;}

.layerBg{ position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.8; z-index:30; display:none;}
.z_hint{ position:fixed; top:0; z-index:31; width:640px; display:none;}

.arrow{ position:fixed; bottom:10px; left:50%; margin-left:-22px; z-index:6;-webkit-animation:bounce 1.5s .3s ease both; -moz-animation:bounce 1.5s .3s ease both; -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite;}

.z_info{ width:100%;}
.z_info .info_con{ position:absolute; top:437px; left:189px; width:275px; height:213px;}
.z_info .btn_close{ width:75px; height:75px; top:208px; right:40px;}

@-webkit-keyframes bounce{
0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
40%{-webkit-transform:translateY(-20px)}
60%{-webkit-transform:translateY(-10px)}
}
@keyframes bounce{
0%,20%,50%,80%,100%{transform:translateY(0)}
40%{transform:translateY(-20px)}
60%{transform:translateY(-10px)}
}


@-webkit-keyframes fadeInLeft {
  0% {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}

@keyframes fadeInLeft {
    0% {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
    100% {opacity: 1;-webkit-transform: none;transform: none;  }
}

@-webkit-keyframes fadeInRight {
  0% {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}

@keyframes fadeInRight {
  0% {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}

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

@keyframes fadeIn {
  0% {opacity: 0; transform:scale(0);}
  100% {opacity: 1;ransform:scale(1);}
}

@-webkit-keyframes shake {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
            transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
            transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
            transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
            transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes shake {
 20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
            transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
            transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
            transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
            transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
}


@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
            transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
            transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}


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

  100% {-webkit-transform: none;
  }
}

@keyframes fadeInUp {
  0% { transform: translate3d(0, 100%, 0);}

  100% { transform: none;}
}


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

@keyframes changeSize {
  0% {transform:scale(0.5);}
  100% {transform:scale(1);}
}

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

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