*{
	margin: 0;
	padding: 0;
	list-style:none;
	text-decoration: none;
	box-sizing: border-box;
	font-family: 'Open Sans','微軟正黑體';
}
html{
	position: relative;
	height: 100%;
	width: 100%;
	/* border: 1px solid #000; */
}
body{
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	/* border: 1px solid #f00; */
	max-width: 1920px;
    min-width: 1280px;
    min-height: 658px;
}
.text_black{
	color: #000;
}
.text_blue{
	color: #00f;
}
.text_red{
	color: #f00;
}
.startgame_area{
	position: absolute;
	display: block;
	z-index: 8;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 1);
	color: #fff;
	text-align: center;
}
.startgame_area::before{
	content:'';
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}
.countdown_area{
	position: absolute;
	display: none;
	z-index: 8;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 1);
	color: #fff;
	text-align: center;
}
.countdown_area::before{
	content:'';
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}
.countdown_area h1{
	display: inline-block;
	vertical-align: middle;
}
.page1_content{
	position: absolute;
	display: block;
	top: 0%;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 3;
	border: 1px solid #0f0;
}
.game_window{
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 70%;
	height: 80%;
	border: 10px solid #f00;
	overflow: hidden;
}
.speed{
	position: absolute;
	display: block;
	top: 2%;
	left: 2%;
	font-size: 24px;
	font-weight: bold;
}
.score{
	position: absolute;
	display: block;
	top: 2%;
	right: 2%;
	font-size: 24px;
	font-weight: bold;
}
.floor_area{
	position: absolute;
	display: block;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 200000%;
	height: 60%;
	background: url('../img/floor.png') 0 0 repeat-x;
	background-size: contain;
	/* border: 1px solid #00f; */
}
.floor{
	position: relative;
	display: inline-block;
	top: 0;
	height: 100%;
}
.speed1{
	animation: floor_ni 4000s 0s linear forwards;
	-webkit-animation: floor_ni 4000s 0s linear forwards;
	-moz-animation: floor_ni 4000s 0s linear forwards;
	-o-animation: floor_ni 4000s 0s linear forwards;
	-ms-animation: floor_ni 4000s 0s linear forwards;
}
.speed2{
	animation: floor_ni 2500s 0s linear forwards;
	-webkit-animation: floor_ni 2500s 0s linear forwards;
	-moz-animation: floor_ni 2500s 0s linear forwards;
	-o-animation: floor_ni 2500s 0s linear forwards;
	-ms-animation: floor_ni 2500s 0s linear forwards;
}
.speed3{
	animation: floor_ni 1500s 0s linear forwards;
	-webkit-animation: floor_ni 1500s 0s linear forwards;
	-moz-animation: floor_ni 1500s 0s linear forwards;
	-o-animation: floor_ni 1500s 0s linear forwards;
	-ms-animation: floor_ni 1500s 0s linear forwards;
}
@-webkit-keyframes floor_ni{
	0%{
		background: url('../img/floor.png') 0% center repeat;
		background-size: cover;
	}
	100%{
		background: url('../img/floor.png') 200000% center repeat;
		background-size: cover;
	}
}
@-moz-keyframes floor_ni{
	0%{
		background: url('../img/floor.png') 0% center repeat;
		background-size: cover;
	}
	100%{
		background: url('../img/floor.png') 200000% center repeat;
		background-size: cover;
	}
}
@-o-keyframes floor_ni{
	0%{
		background: url('../img/floor.png') 0% center repeat;
		background-size: cover;
	}
	100%{
		background: url('../img/floor.png') 200000% center repeat;
		background-size: cover;
	}
}
@-ms-keyframes floor_ni{
	0%{
		background: url('../img/floor.png') 0% center repeat;
		background-size: cover;
	}
	100%{
		background: url('../img/floor.png') 200000% center repeat;
		background-size: cover;
	}
}
@keyframes floor_ni{
	0%{
		background: url('../img/floor.png') 0% center repeat;
		background-size: cover;
	}
	100%{
		background: url('../img/floor.png') 200000% center repeat;
		background-size: cover;
	}
}
.he{
	position: absolute;
	display: block;
	z-index: 3;
	left: 3%;
	bottom: 5%;
	width: 11%;
	height: 40%;
	/* border: 1px solid #00f; */
	background: url('../img/he1.png') center center no-repeat;
	background-size: contain;
}
.word{
	position: absolute;
	display: block;
	top: -20%;
	width: 100%;
	text-align: center;
}
.he.active{
	background: url('../img/he2.png') center center no-repeat;
	background-size: contain;
}
.he.jump_bg{
	background: url('../img/he3.png') center center no-repeat !important;
	background-size: contain !important;
}
.he.jump{
	animation: he_jump_ni 1s 0s ease-in-out alternate !important;
    -webkit-animation: he_jump_ni 1s 0s ease-in-out alternate !important;
}
@keyframes he_jump_ni {
    0%{
        bottom: 5%;
    }
    50%{
        bottom: 55%;
    }
    100%{
        bottom: 5%;
    }
}

.it{
	position: absolute;
	display: block;
	z-index: 3;
	bottom: 5%;
	width: 5%;
	height: 20%;
	opacity: 0;
	left: 100%;
	/* border: 3px solid #0f0; */
	background: url('../img/fire.png') center center no-repeat;
	background-size: 100% 100%;
}
/* .it_speed1{
	animation-name: it_ni;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}
.it_speed2{
	animation-name: it_ni;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}
.it_speed3{
	animation-name: it_ni;
	animation-duration: 0.8s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-fill-mode: forwards;
} */
@-webkit-keyframes it_ni{
	0%{
		left: 100%;
	}
	100%{
		left: -5%;
	}
}
@-moz-keyframes it_ni{
	0%{
		left: 100%;
	}
	100%{
		left: -5%;
	}
}
@-o-keyframes it_ni{
	0%{
		left: 100%;
	}
	100%{
		left: -5%;
	}
}
@-ms-keyframes it_ni{
	0%{
		left: 100%;
	}
	100%{
		left: -5%;
	}
}
@keyframes it_ni{
	0%{
		left: 100%;
	}
	100%{
		left: -5%;
	}
}