@charset "utf-8";
/* common css*/
html, body { width: 100%; height: 100%; background:none; }
.app { width: 950px; height:415px; margin: 0 auto; background:url(../img/bg.png) center top no-repeat;}
/* loading */
.app-loading{ width: 100%; height: 100%; position:absolute; z-index: 1000000; background: #f4f4f4 url(../img/loading.gif) no-repeat center center;}
/* header */
.app-header { width: 640px; position: absolute; z-index: 100000; }
/* footer */
/* content */
.app-content { position: relative; width:950px; height: 100%; overflow: hidden; }
.page { width: 950px; height: 415px; position: absolute; background-repeat: no-repeat; background-size: cover; background-position: center center; overflow: hidden; z-index: 0; display: none; }
.page.z-current { z-index: 1; display: block; }
.page.z-move { z-index: 5; display: block; }
/* page-start */
.page-start .slogon_png { position: absolute; top: 100px; }
.page-start .text_bg { }
.page-start .intro_text_png { position: absolute; top: 00px; left: 0px; }
.page-start .start_btn_link { position: absolute; top: 15px; left:344px;  }
/* page-game */
.page-game .slogon_png { position: absolute; top: 40px; }
.page-game .attr_bg { width: 475px; height: 100px; position: absolute; top:50px; left:30px;  vertical-align: middle; line-height: 87px; text-align: center; }
.page-game .attr_png { }
.page-game .game_area { width: 950px; height: 415px;  position: absolute; bottom: 0px; right:0;}
.page-game .text1_png { position: absolute; left: 80px; top: 30px; }
.page-game .timetext_png { position: absolute; left: 80px; top: 100px; }


.page-game .time_line_bg { width: 220px; height: 38px; background: #24ddba; position: absolute; left: 30px; top: 10px; display:none; }
.page-game .time_line { width: 218px; height: 36px; background: #bbf8ff; position: absolute; left: 1px; top: 1px; }
.page-game .time_text { position: absolute; left: 280px; font-size: 36px; color: #fff; top: 5px; line-height: 40px; font-weight: bold; }
.page-game .time_text .time_num { font-size: 60px; }


.page-game .card_area { width:400px; height:400px; background-repeat:no-repeat;   position: relative; top:18px; left:348px; }
.page-game  .wg { width:386px; height:386px; background: url(../img/wg.png) no-repeat top left; position: absolute; left:0; top:0; }
.page-game .card { width: 129px; height: 129px; float: left; margin: 0px; background:none; }
.page-game .card img { width: 128px; height: 128px; overflow:hidden;}
.tishi { position:absolute; top:275px; margin-left:180px;}
.tishi2 { position:absolute; top:305px; margin-left:220px; width:75px; height:47px;}
.yes { background:url(../img/yes.jpg) no-repeat;}
.no { background:url(../img/no.jpg) no-repeat;}

/*.page-game .dark { background: #24ddba; }
.page-game .light { background: #bbf8ff; }*/
/* page-reg */
.page-reg .text1_png { position: absolute; top: 80px; }
.page-reg .text2_png { position: absolute; top: 250px; }
.page-reg .gamelevel_text { position: absolute; line-height: 30px; top: 200px; left: 385px; color: #DC1313; font-size: 42px; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff; }
.page-reg .text_bg { width: 640px; height: 520px; background: url(../img/p3/text_bg.png); position: absolute; bottom: 0px; }
.page-reg .textline { color: #fff; font-size: 28px; padding: 0 0px 0px 17px; }
.page-reg .name_area { width: 545px; height: 60px; border: 2px solid #fff; position: absolute; left: 45px; top: 30px; }
.page-reg .mobile_area { width: 545px; height: 60px; border: 2px solid #fff; position: absolute; left: 45px; top: 100px; }
.page-reg .larea_area { width: 267px; height: 60px; border: 2px solid #fff; position: absolute; left: 45px; top: 170px; }
.page-reg .city_area { width: 267px; height: 60px; border: 2px solid #fff; position: absolute; left: 323px; top: 170px; }
.page-reg .dealer_area { width: 545px; height: 60px; border: 2px solid #fff; position: absolute; left: 45px; top: 240px; }
.page-reg .model_area { width: 545px; height: 60px; border: 2px solid #fff; position: absolute; left: 45px; top: 310px; }
.page-reg .form_text { width: 420px; height: 56px; line-height: 56px; font-size: 28px; color: #FFD87D; border: none; background-color: transparent; }
.page-reg .form_select { width: 360px; height: 56px; line-height: 56px; font-size: 24px; color: #FFD87D; border: none; background-color: transparent; }
.page-reg .submit_btn_link { position: absolute; top: 390px; left: 45px; }
/* page-success */
.page-success .tjcg_bg { position: absolute; top:350px;}
.page-success .tjcg_png{ position:absolute; left:150px; top:50px;}
/* page-share */
.page-share .share_tip_png { position: absolute; top: 120px; left: 80px; }
.page-share .share_arrow_png{position: absolute; top: 0px; right: 0px; }

/* sina */
.submit_btn_link{background: url(../img/p3/submit_btn.png) no-repeat center top; width:544px; height:79px;border: none;}
._SubmitZ{width: 560px; height: 88px; position: absolute; margin-top: 388px; margin-left: 38px; cursor:pointer;}
.level_num { display:none;}










        
.shake-little:hover {
	-webkit-animation-name: shake-little;
	-ms-animation-name: shake-little;
	animation-name: shake-little;
	-webkit-animation-duration: 100ms;
	-ms-animation-duration: 100ms;
	animation-duration: 100ms;
	-webkit-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-ms-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-delay: 0s;
	-ms-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-play-state: running;
	-ms-animation-play-state: running;
	animation-play-state: running
}


@-webkit-keyframes shake-little {
 0% {
 -webkit-transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 4% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 6% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 8% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 10% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 12% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 14% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 16% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 18% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 20% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 22% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 24% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 26% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 28% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 30% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 32% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 34% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 36% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 38% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 40% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 42% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 44% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 46% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 48% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 50% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 52% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 54% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 56% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 58% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 60% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 62% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 64% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 66% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 68% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 70% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 72% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 74% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 76% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 78% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 80% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 82% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 84% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 86% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 88% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 90% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 92% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 94% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 96% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 98% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
}











@keyframes blink{
  0%{opacity: 1;}
  50%{opacity: 1;}
  50.01%{opacity: 0;} /* 注意这里定义50.01%立刻透明度为０，可以设置闪烁效果 */
  100%{opacity: 0;} 
}

/* 添加兼容性前缀 */

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

@-moz-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-ms-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-o-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

/* 定义blink类*/
.blink{
    animation: blink .75s linear infinite;  
    /* 其它浏览器兼容性前缀 */
    -webkit-animation: blink .75s linear infinite;
    -moz-animation: blink .75s linear infinite;
    -ms-animation: blink .75s linear infinite;
    -o-animation: blink .75s linear infinite;
    color: #dd4814;
}
.dianxuan b { font-size:30px;  display:block; padding-bottom:1px; padding-top:10px;}
.dianxuan { font-size:14px; position:absolute; top:30px; margin-left:20px; z-index:100; width:200px;}
.dianxuan label { width:100px; display:block; float:left; height:30px;}