@charset "utf-8";
	* {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
.both {
	clear: both;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	border: 0;
}
a {
	text-decoration: none;
	cursor: pointer;
}
html, body {
	margin: 0;
	padding: 0;
	margin: 0 auto;
	position: relative;
	width: 100%;
	font-size: .24rem;
	color: #fff;
}
p {
	margin: 0;
	padding: 0;
}
.main-game {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 5.7rem;
	height: 7.38rem;
}
.chose-box {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	width: 5.7rem;
	height: 7.38rem;
	background: url(../../images/chose_box.jpg) no-repeat;
	background-size: 5.7rem 7.38rem;
}
.chose-tab {
	position: absolute;
	top: 2.9rem;
	left: .3rem;
	z-index: 9;
	width: 5.1rem;
	height: 2.44rem;
}
.chose-tab li {
	float: left;
	margin-left: 0.05rem;
	display: inline;
	position: relative;
	width: 1.6rem;
	height: 2.44rem;
}
.chose-tab li a {
	float: left;
	width: 1.6rem;
	height: 2.44rem;
}
.btn-chose1 {
	background: url(../../images/btn_chose1.png) no-repeat;
	background-size: 1.6rem 2.44rem;
}
.btn-chose2 {
	background: url(../../images/btn_chose2.png) no-repeat;
	background-size: 1.6rem 2.44rem;
}
.btn-chose3 {
	background: url(../../images/btn_chose3.png) no-repeat;
	background-size: 1.6rem 2.44rem;
}
.chose-tab .current .btn-chose1 {
	background: url(../../images/btn_chose1_h.png) no-repeat;
	background-size: 1.6rem 2.44rem;
}
.chose-tab .current .btn-chose2 {
	background: url(../../images/btn_chose2_h.png) no-repeat;
	background-size: 1.6rem 2.44rem;
}
.chose-tab .current .btn-chose3 {
	background: url(../../images/btn_chose3_h.png) no-repeat;
	background-size: 1.6rem 2.44rem;
}
.chose-phone {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	width: 5.7rem;
	height: 7.38rem;
	background: url(../assets/bg1.jpg) no-repeat;
	background-size: 5.7rem 7.38rem;
}
.chose-phone span {
	position: absolute;
	top:6rem;
	left: .66rem;
	z-index: 9;
	width: 4.38rem;
	height: 1.15rem;
	background: url(../assets/begin.png) no-repeat;
	background-size: 4.38rem 1.15rem;
	cursor:pointer;
	-webkit-animation: transparent .6s linear infinite alternate;
	-moz-animation: transparent .6s linear infinite alternate;
	animation: transparent .6s linear infinite alternate;
}

.game-phone {
	position: absolute;
	top: 1.8rem;
	left: .1rem;
	z-index: 9;
	border-radius:.2rem;
	border: .02rem solid #d9d9d9;
	padding: .2rem;
	width: 5.06rem;
	background: url(../../images/rep2.png) repeat;
	color: #fff;
}
.cancel {
	position: absolute;
	top: 0.05rem;
	right: 0.05rem;
	z-index: 9;
	width: 0.4rem;
	height: 0.4rem;
	background: url(../../images/cancel.png) no-repeat;
	background-size: 0.4rem 0.4rem;
}
.game-phone h3 {
	margin: 0 auto;
	padding-bottom: .2rem;
	border-bottom: .02rem solid #d9d9d9;
	width: 100%;
	line-height: .5rem;
	text-align: center;
	font-size: .4rem;
	color: #fff;
}
.city-chose {
	position: absolute;
	top: 2.2rem;
	left: .1rem;
	z-index: 9;
	border-radius:.2rem;
	border: .02rem solid #d9d9d9;
	padding: .2rem;
	width: 5.06rem;
	padding-top:1rem;
	padding-bottom: 1rem;
	background: url(../../images/rep2.png) repeat;
	color: #fff;
}
.city-name {
	margin: 0 auto;
	width: 100%;
	line-height: .5rem;
	text-align: center;
	font-size: .4rem;
	font-weight: bold;
	color: #ffd76a;
}
.btn-confirmation {
	float:left;
	margin-top:0.5rem;
	margin-left:0.5rem;
	display:inline;
	width:  1.8rem;
	height: 0.62rem;
	background: url(../../images/btn_confirmation.png) no-repeat;
	background-size: 1.8rem 0.62rem;
}
.btn-remove {
	float:right;
	margin-top:0.5rem;
	margin-right:0.5rem;
	display:inline;
	width:  1.8rem;
	height: 0.62rem;
	background: url(../../images/btn_remove.png) no-repeat;
	background-size: 1.8rem 0.62rem;
}
.phone-box {
	margin: 0 auto;
	margin-top:.3rem;
	overflow: hidden;
	display: block;
	border: .02rem solid #666;
	width: 5rem;
	text-align: center;
	font-size: .3rem;
	background: #fff;
	color: #000;
}
.phone-area {
	float: left;
	padding-left: .1rem;
	width: 2rem;
	height: .77rem;
	background: url(../../images/phone_area.jpg) no-repeat;
	border: none;
	outline: medium;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	font-size: .3rem;
	background-size:2rem .77rem;
	color: #000;
}
.right-input-in {
	float: right;
	border: none;
	outline: none;
	padding-left: .05rem;
	padding-right: .05rem;
	width: 2.9rem;
	height: .77rem;
	line-height: .76rem;
	font-size: .3rem;
	text-align: center;
	background: transparent;
	color: #000;
}
.btn-start {
	margin: 0 auto;
	margin-top:.3rem;
	padding-bottom: 0.2rem;
	display: block;
	width: 4.8rem;
	height: 1.01rem;
	background: url(../../images/btn_start.png) no-repeat;
	background-size: 4.8rem 1.01rem;
}
.btn-query {
	margin: 0 auto;
	margin-top: 50px;
	padding-bottom: 20px;
	display: block;
	width: 326px;
	height: 80px;
	background: url(../../images/btn_query.png) no-repeat;
}
.game {
	position: absolute;
	left: 0;
	top: 0;
	width: 5.7rem;
	height: 7.38rem;
}
.message {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	width: 5.7rem;
	height: 7.38rem;
}
.attackbg {
	position: absolute;
	top: 0.6rem;
	left: 0;
	width: 5.7rem;
	height: 4.53rem;
	background: url(../assets/attackbg.png) no-repeat;
	background-size: 5.7rem 4.53rem;
}
.over {
	display: none;
	position: absolute;
	top: 1.6rem;
	left: 0;
	width: 5.7rem;
	height: 2.28rem;
	background: url(../assets/over.png) no-repeat;
	background-size: 5.7rem 2.28rem;
}
.over-tips {
	position: absolute;
	top: .6rem;
	left: .65rem;
	width: 4.4rem;
	text-align: center;
	font-size: .22rem;
	font-weight: bold;
	color: #ffcc33;
}
.over-tips p {
	line-height: .34rem;
}
.over-area, .over-score {
	padding-left: .05rem;
	padding-right: .05rem;
	color: #fff;
}
.share {
	position: absolute;
	top: 4rem;
	left: .85rem;
	display: none;
	width: 4rem;
	height: .84rem;
	background: url(../assets/share.png) no-repeat;
	background-size: 4rem .84rem;
}
.soldier1-score {
	position: absolute;
	left: 1.5rem;
	top: 1.7rem;
	width: 1.3rem;
	text-align: center;
	font-weight: bold;
	font-size: 0.22rem;
	color: #fff;
}
.soldier2-score {
	position: absolute;
	right: 1.5rem;
	top: 1.7rem;
	width: 1.3rem;
	text-align: center;
	font-weight: bold;
	font-size: 0.22rem;
	color: #fff;
}
.soldier3-score {
	position: absolute;
	left: 1.5rem;
	top: 2.1rem;
	width: 1.3rem;
	text-align: center;
	font-weight: bold;
	font-size: 0.22rem;
	color: #fff;
}
.soldier4-score {
	position: absolute;
	right: 1.5rem;
	top: 2.1rem;
	width: 1.3rem;
	text-align: center;
	font-weight: bold;
	font-size: 0.22rem;
	color: #fff;
}
.bomb-score {
	position: absolute;
	left:.85rem;
	top: 2.45rem;
	width: 4rem;
	text-align: center;
	font-weight: bold;
	font-size: 0.24rem;
	color: #f00;
}
.soldier1-score span, .soldier2-score span, .soldier3-score span, .soldier4-score span {
	padding-left: .05rem;
	padding-right:.05rem;
	color: #fffe9e;
}
.bomb-score span {
	padding-left: .05rem;
	padding-right:.05rem;
	color: #fff;
}
.result {
	position: absolute;
	left: .85rem;
	top: 2.8rem;
	width: 4rem;
	text-align: center;
	font-weight: bold;
	font-size: .26rem;
	color: #ffcc33;
}
.result span {
	padding-left: .05rem;
	padding-right: .05rem;
	color: #fff;
}
.tab-area {
	position: absolute;
	top: 3.8rem;
	left: .85rem;
	z-index: 9;
	width: 4rem;
	height: 1.5rem;
}
.tab-area .tab {
	float: left;
	position: relative;
	width: 4rem;
	height: 1.5rem;
}
.tab-area .btn-area1 {
	position: absolute;
	left: 0;
	top: 0;
	width: 1.3rem;
	height: 1.25rem;
	background: url(../assets/area1.png) no-repeat;
	background-size: 1.3rem 1.25rem;
}
.tab-area .btn-area2 {
	position: absolute;
	left: 1.36rem;
	top: 0;
	width: 1.3rem;
	height: 1.25rem;
	background: url(../assets/area2.png) no-repeat;
	background-size: 1.3rem 1.25rem;
}
.tab-area .btn-area3 {
	position: absolute;
	right: 0;
	top: 0;
	width: 1.3rem;
	height: 1.25rem;
	background: url(../assets/area3.png) no-repeat;
	background-size: 1.3rem 1.25rem;
}
.tab-area .current .btn-area1 {
	background: url(../assets/cur1.png) no-repeat;
	background-size: 1.3rem 1.25rem;
}
.tab-area .current .btn-area2 {
	background: url(../assets/cur2.png) no-repeat;
	background-size: 1.3rem 1.25rem;
}
.tab-area .current .btn-area3 {
	background: url(../assets/cur3.png) no-repeat;
	background-size: 1.3rem 1.25rem;
}
.pop-box {
	position: absolute;
	left: .3rem;
	top: 1.5rem;
	display: none;
	border-radius: .2rem;
	width: 4.98rem;
	height: 2.2rem;
	text-align: center;
	font-weight: bold;
	font-size: .28rem;
	background: url(../assets/pop.png) repeat;
}
.fire-box {
	position: absolute;
	display: none;
	left: .7rem;
	top: 1.05rem;
	z-index: 12;
	border: 0.02rem solid #000;
	border-radius: .2rem;
	width: 4.26rem;
	height: 4.26rem;
	background: url(../assets/pop.png) repeat;
}
#city {
	float: left;
	position: relative;
	border-radius: .2rem;
	width: 4.26rem;
	height: 4.26rem;
}
.city1 {
	background: url(../assets/city1.jpg) no-repeat;
	background-size: 4.26rem 4.26rem;
}
.city2 {
	background: url(../assets/city2.jpg) no-repeat;
	background-size: 4.26rem 4.26rem;
}
.city3 {
	background: url(../assets/city3.jpg) no-repeat;
	background-size: 4.26rem 4.26rem;
}
#city h3 {
	padding-top:.3rem;
	text-align: center;
	color: #fff600;
}
.fire-group {
	position: absolute;
	left: .85rem;
	top: 1.15rem;
	width: 2.56rem;
	height: 2.56rem;
}
.fire-bg1 {
	position: absolute;
	display: none;
	left: .85rem;
	top: 1.2rem;
	z-index: 9;
	width: 2.56rem;
	height: 2.56rem;
	background: url(../assets/fire3.png) no-repeat;
	background-size: 2.56rem 2.56rem;
}
.fire-bg2 {
	position: absolute;
	display: none;
	left: .85rem;
	top: 1.2rem;
	z-index: 9;
	width: 2.56rem;
	height: 2.56rem;
	background: url(../assets/fire5.png) no-repeat;
	background-size: 2.56rem 2.56rem;
}
.fire-group div {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	width: 2.56rem;
	height: 2.56rem;
}
.fire1 {
	background: url(../assets/fire1.png) no-repeat;
	background-size: 2.56rem 2.56rem;
}
.fire2 {
	background: url(../assets/fire2.png) no-repeat;
	background-size: 2.56rem 2.56rem;
}
.fire3 {
	background: url(../assets/fire3.png) no-repeat;
	background-size: 2.56rem 2.56rem;
}
.fire4 {
	background: url(../assets/fire4.png) no-repeat;
	background-size: 2.56rem 2.56rem;
}
.fire5 {
	background: url(../assets/fire5.png) no-repeat;
	background-size: 2.56rem 2.56rem;
}
.fire6 {
	background: url(../assets/fire6.png) no-repeat;
	background-size: 2.56rem 2.56rem;
}
.fire7 {
	background: url(../assets/fire7.png) no-repeat;
	background-size: 2.56rem 2.56rem;
}
.fire8 {
	background: url(../assets/fire8.png) no-repeat;
	background-size: 2.56rem 2.56rem;
}
#city h2 {
	position: absolute;
	left: 0;
	top:.7rem;
	z-index: 15;
	width: 100%;
	text-align: center;
	font-size:.3rem;
	color: #fff;
}
.blood-line {
	position: absolute;
	left: 0;
	top: .4rem;
	z-index: 10;
	width: 4.26rem;
	height: 1.17rem;
}
.blood-line div {
	position: absolute;
	left: 0;
	top: 0;
	width: 4.26rem;
	height: 1.17rem;
}
.blood1 {
	background: url(../assets/blood_line1.png) no-repeat;
	background-size: 4.26rem 1.17rem;
}
.blood2 {
	background: url(../assets/blood_line2.png) no-repeat;
	background-size: 4.26rem 1.17rem;
}
.blood3 {
	background: url(../assets/blood_line3.png) no-repeat;
	background-size: 4.26rem 1.17rem;
}
.blood4 {
	background: url(../assets/blood_line4.png) no-repeat;
	background-size: 4.26rem 1.17rem;
}
.blood5 {
	background: url(../assets/blood_line5.png) no-repeat;
	background-size: 4.26rem 1.17rem;
}
.blood6 {
	background: url(../assets/blood_line6.png) no-repeat;
	background-size: 4.26rem 1.17rem;
}
.blood7 {
	background: url(../assets/blood_line7.png) no-repeat;
	background-size: 4.26rem 1.17rem;
}
.blood-bg {
	position: absolute;
	display: none;
	left: 0;
	top: .4rem;
	z-index: 9;
	width: 4.26rem;
	height: 1.17rem;
	background: url(../assets/blood_line7.png) no-repeat;
	background-size: 4.26rem 1.17rem;
}
.pop-box>div {
	display: none;
}
.pop-box .show {
	display: block;
}
.pop-box>div {
	padding-top: .4rem;
	color: #000;
}
.pop-box>div p {
	line-height: .4rem;
}
.pop-box span {
	color: #f00;
}
.w-box {
	margin: 0 auto;
	overflow: hidden;
	width: 3rem;
}
.btn-confirm {
	float: left;
	margin-top: .1rem;
	width: 1.31rem;
	height: .45rem;
	background: url(../assets/confirm.jpg) no-repeat;
	background-size:1.31rem .45rem;
}
.btn-cancel {
	float: right;
	margin-top: .1rem;
	width: 1.31rem;
	height: .45rem;
	background: url(../assets/cancel.jpg) no-repeat;
	background-size:1.31rem .45rem;
}
.bottom-tip {
	position: absolute;
	left: 0;
	top: 5.4rem;
	width: 5.7rem;
	height: 1.97rem;
	background: url(../assets/power_tip.jpg) no-repeat;
	background-size: 5.7rem 1.97rem;
}
.cicy1-line {
	position: absolute;
	left: 0.7rem;
	top: .54rem;
	width: 2rem;
	height: .32rem;
	background: url(../assets/progressbar.jpg) no-repeat;
	background-size:2rem .32rem;
}
.cicy2-line {
	position: absolute;
	left: 3.5rem;
	top: .54rem;
	width: 2rem;
	height: .32rem;
	background: url(../assets/progressbar.jpg) no-repeat;
	background-size:2rem .32rem;
}
.cicy3-line {
	position: absolute;
	left: 2rem;
	top: 1.34rem;
	width: 2rem;
	height: .32rem;
	background: url(../assets/progressbar.jpg) no-repeat;
	background-size:2rem .32rem;
}
.blood-strip {
	position: absolute;
	left: 0;
	top: 0;
	width: 2rem;
	height: .32rem;
	background: url(../assets/on.jpg) no-repeat;
	background-size:2rem .32rem;
}
.line-total {
	position: absolute;
	top: 0;
	left: .2rem;
	z-index: 8;
	font-size: .24rem;
	line-height: .32rem;
	font-weight: normal;
}
@-webkit-keyframes transparent {
0% {
	opacity:0;
}
100% {
	opacity:1;
}
}
@-moz-keyframes transparent {
	0% {
	opacity:0;
}
100% {
	opacity:1;
}
}
@keyframes transparent {
0% {
	opacity:0;
}
100% {
	opacity:1;
}
}
keyframes sg {
	from {
	left:-100%;
}
to {
	left: 100%;
}
}