html, body {
	margin: 0;
	padding: 0;
	background-color: #000;
	overflow: hidden;
}

#game {
	position: absolute;
	margin: auto;
	width: 960px;
	height: 720px;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

#create_js_dom_overlay_container, #create_js_canvas, #create_js_container, #three_js_container {
	width: 960px;
	height: 720px;
	position: absolute;
	display: block;
}

#create_js_container {
	overflow: hidden;
}

#create_js_dom_overlay_container {
	pointer-events: none;
	left: 0;
	top: 0;
	display: block;
}

#score {
	display: none;
	position: absolute;
	margin: auto;
	width: 100%;
	height: 100%;
	background: url("../assets/source/background.jpg");
	background-size: cover;

	max-width: 960px;
	max-height: 720px;

	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	overflow: hidden;
}

#modal_score {
	background: url("../assets/source/modal_score.png");
	background-size: cover;
	left: 0;
	right: 0;
	width: 85%;
	height: 0;
	margin: -2% auto auto;
	padding-bottom: 34.87%;
	position: relative;
}

.enter_name {
	display: none;
}

.enter_name__pic {
	display: block;
	text-align: right;
	margin: 2% 10% 0 0;
}

.enter_name__img {
	width: 30%;
}

#modal_score input {
	margin: auto;
	display: block;
	top: 39.5%;
	position: absolute;
	width: 87%;
	left: 7%;
	background-color: rgba(0, 0, 0, 0.0);
	font-size: 50px;
	padding: 1px;
	border: none;
	color: white;
}

@media (max-width: 960px) {
	#modal_score input {
		font-size: 5.87vw;
	}
}

#modal_score input:active {
	border: none;
}


.btn_retry {
	display: block;
	margin: 0 0 1vmin;
	border: none;
	background: url(../assets/b/retry.png) no-repeat 0 0 / cover;
	width: 70%;
	padding-bottom: 9%;
	cursor: pointer;

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
}

.btn_retry:hover {
	background-position: 0 101%;
}

.btn_accept {
	border: none;
	display: block;
	background: url("../assets/source/sprite_accept.png") no-repeat 0 0 / cover;
	margin: auto;
	left: 0;
	right: 0;
	width: 100%;
	height: 0;
	padding-bottom: 11.04%;

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
}

.btn_accept:hover {
	background-position: 0 89%;
	cursor: pointer;
}

.btn_main_menu {
	border: none;
	display: block;
	background: url("../assets/b/main.png") no-repeat 0 0 / contain;

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;

	position: absolute;
	top: 5px;
	left: 5px;
	width: 9vw;
	height: 0;
	padding-bottom: 10%;
	cursor: pointer;
}

.btn_more_game {
	border: none;
	display: block;
	background: url("../assets/source/sprite_more_game.png") no-repeat 0 0 / cover;

	margin-top: 36px;
	margin-left: auto;
	margin-right: 0;

	width: 55%;
	height: 0;
	padding-bottom: 3.6%;

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
}

.btn_more_game:hover {
	background-position: 0 99%;
	cursor: pointer;
}

.btn_enter_score {
	border: none;
	display: block;
	background: url(../assets/b/ssr.png) no-repeat center top / cover;
	margin: -1% 0 0 3%;
	width: 75%;
	height: 0;
	padding-bottom: 6.4%;
	cursor: pointer;

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
}

.btn_enter_score:hover {
	background-position: center bottom;
}



.window-3-4 #modal_score {
	width: 61%;
	padding-bottom: 25%;
}

.window-3-4 #enter_name .btn_accept {
	margin-left: 13%;
	padding-bottom: 8%;
	width: 70%;
}

/*leader_board*/

#leader_board {
	display: none;
}

.leader_board__pic {
	margin: 1% 10% 0 0;
	text-align: right;
	display: block;
}

.leader_board__img {
	width: 30%;
}

.leader_panel {
	display: block;
	background: url(../assets/source/score.png);
	background-size: cover;
	width: 73%;
	height: 0;
	padding-bottom: 52%;
	margin: -2vh auto auto;
	position: relative;
}

.leader_panel .btn {
	display: block;
	background: url("../assets/source/Sprite text.png");
	background-size: 200%;
	width: 16vw;
	max-width: 100%;
	height: 0;
	padding-bottom: 29%;
	background-position-x: 0;
	border: none;
}

.leader_panel table {
	margin: auto;
	position: relative;
	top: 7vw;
}



.leader_panel .btn:hover {
	border: none;
	background-position-x: -100%;
	cursor: pointer;
}

@media (min-width: 959px) {
	.leader_panel .btn {
		width: 170px;
	}

	.leader_panel table {
		top: 68px;
	}
}

.leader_panel .btn.active {
	border: none;
	background-position-x: 100%;
}

.leader_panel .btn:active {
	border: none;
	background-position-x: 100%;
}

.leader_panel .d {
	background-position-y: 0;
}

.leader_panel .w {
	background-position-y: 31%;
}

.leader_panel .m {
	background-position-y: 63%;
}

.leader_panel .y {
	background-position-y: 96%;
}

.leader_panel .containers {
	position: absolute;
	left: 7%;
	top: 32%;
	bottom: 10%;
	box-sizing: border-box;
	right: 5%;
}

.leader_panel .container {
	width: calc(50% - 20px);
	float: left;
	margin: 10px;
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
}

@media (max-width: 640px) {
	.leader_panel .container {
		width: 42%;
	}
}

.leader_panel .container .item {
	color: #ffffff;
	text-shadow: #FF00FF 1px 1px 0, #FF00FF -1px -1px 0, #FF00FF -1px 1px 0, #FF00FF 1px -1px 0;
	margin: 3px;
	font-size: 20px;
}

.game_over_img {
	width: 90%;
	margin-left: -5%;
}

.game_complete_img {
	width: 120%;
	margin-left: 10%;
	display: none;
}

.score__wr {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	margin: 0 auto;
}

.score__pic {
	margin: 10px 0 0 auto;
	width: 28%;
	padding: 0 12% 0 0;
}

.score__img {
	margin: 0 auto;
	display: block;
	width: 100%;
}

#enter_name .btn_accept {
	margin-left: -6%;
}

#enter_name .btn_sponsor {
	top: 7px;
	left: 378px;
	right: 0;
}
#leader_board .btn_sponsor {
	top: 10px;
	left: 378px;
	right: 0;
}
#game_over .btn_sponsor {
	bottom: 14px;
	left: 321px;
	right: 0;
}


.game-load__pic {
	display: none;
	position: absolute;
	bottom: 30%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	padding-right: 2%;
}

.game-load__img {
	width: 80%;
}


.game-menu__pic {
	display: none;

	position: absolute;
	top: 7.2%;
	left: 70.1%;
	transform: translate(-50%, -50%);
	max-width: 40.2vmin;
}

.game-menu__img {
	width: 100%;
}


.game-pre__pic {
	display: none;

	position: absolute;
	left: 3%;
	bottom: 5%;
	right: 85%;

}

.game-pre__img {
	width: 100%;
	object-fit: contain;
	max-height: 60px;
	display: block;
}


.game-race__pic {
	display: none;
	position: absolute;
	bottom: 1%;
	left: 1%;
	right: 70%;
}

.game-race__img {
	display: block;
	max-height: 100px;
	width: 100%;
	object-fit: contain;
	object-position: 0 0;
}

.show {
	display: block !important;
}

#animation_container {
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
	display: none;
}


.ats {
	position: absolute;
	right: -7%;
	left: 23%;
	top: 77%;

	display: none;
	background: url(../assets/b/ats.png) no-repeat 0 0 / cover;
	height: 0;
	padding-top: 5.7%;
}

.ats:hover {
	background-position: 0 100%;
}

.bubblebox {
	display: block;
	text-decoration: none;
}

.bubblebox_canvas {
	display: block;
	position: absolute;
}

.bubblebox_dom {
	pointer-events:none;
	overflow:hidden;
	width:640px;
	height:960px;
	position: absolute;
	left: 0;
	top: 0;
	display: block;
}

.f-end__first {
	background: url(../assets/mission/fin_1.png) no-repeat 0 0 / contain;
	width: 55%;
	height: 0;
	padding-bottom: 5%;
	position: absolute;
	top: 26%;
	left: 52%;
	transform: translateX(-50%);
	display: none;
}

.f-end__second {
	background: url(../assets/mission/fin_2.png) no-repeat 0 0 / contain;
	position: absolute;
	width: 55%;
	height: 0;
	padding-bottom: 5%;
	top: 26%;
	left: 52%;
	transform: translateX(-50%);
	display: none;
}

.fault {
	background: url(../assets/fault/reason.png) no-repeat 0 0 / contain;
	width: 75%;
	padding-bottom: 23%;
	height: 0;
	position: relative;
	margin: 20px 0;
	font-size: 0;
}

.fault__time {
	background: url(../assets/fault/tio.png) no-repeat 0 0 / contain;
	width: 70%;
	height: 0;
	padding-bottom: 7%;
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translateX(-50%);
	display: none;
}

.fault__cond {
	background: url(../assets/fault/notfinish.png) no-repeat 0 0 / contain;
	width: 66%;
	height: 0;
	padding-bottom: 12%;
	position: absolute;
	top: 48%;
	left: 53%;
	transform: translateX(-50%);
}

.fault__life {
	background: url(../assets/fault/life.png) no-repeat 0 0 / contain;
	width: 70%;
	height: 0;
	padding-bottom: 7%;
	position: absolute;
	top: 50%;
	left: 53%;
	transform: translateX(-50%);
	display: none;
}

.mission {
	background: url(../assets/source/mission.png) no-repeat 0 0 / contain;
	position: absolute;
	top: 47%;
	left: 50%;
	width: 79%;
	height: 31%;
	margin-left: 0.5%;
	transform: translate(-50%, -40%);
	display: none;
}

.mission.show {
	display: block;
}

.mission::after {
	content: '';
	display: block;
	position: absolute;
	top: 65%;
	transform: translate(-50%, -50%);
	width: 56%;
	height: 28%;
}

.mission-0::after {
	left: 51%;
	background: url(../assets/mission/1.png) no-repeat 0 0 / contain;
}

.mission-1::after {
	left: 52%;
	background: url(../assets/mission/2.png) no-repeat 0 0 / contain;
	width: 90%;
}

.mission-2::after {
	left: 52%;
	background: url(../assets/mission/3.png) no-repeat 0 0 / contain;
}

.mission-3::after {
	left: 52%;
	width: 80%;
	background: url(../assets/mission/4.png) no-repeat 0 0 / contain;
}

.mission-4::after {
	left: 52%;
	background: url(../assets/mission/5.png) no-repeat 0 0 / contain;
	width: 75%;
}

.mission-5::after {
	left: 53%;
	background: url(../assets/mission/6.png) no-repeat 0 0 / contain;
}

.mission-0,
.mission--top {
	top: 21%;
}


.m-zero {
	display: none;
	position: absolute;
	top: 70%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
}

.m-zero.show {
	display: block;
}

.m-play {
	display: block;
	border: none;
	background: url(../assets/b/play.png) no-repeat 0 0 / cover;
	margin-left: 13%;
	width: 70%;
	padding-bottom: 11.6%;
	cursor: pointer;
	outline: none;

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
}

.h-bnr {
	display: block;
	text-align: center;
}

.h-bnr__img {
	width: 65vmin;
}

.b-more-racing {
	display: block;
	margin: 0 auto;
	background: url(../assets/b/mrg.png) no-repeat center / contain;

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;

	width: 80%;
	height: 0;
	padding-bottom: 7%;
	transform: translateX(3%);
}

.b-more-racing:hover {
	background-image: url(../assets/b/mrg-h.png);
}

.m-home {
	display: none;
}

.b-racing {
	background: url(../assets/b/rg.png) no-repeat center / contain;
	display: none;
	width: 80%;
	height: 0;
	padding-bottom: 9%;
	position: absolute;
	top: 79%;
	left: 50%;
	transform: translateX(-47%);

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
}

.b-home-racing {
	background: url(../assets/b/rg.png) no-repeat center / contain;
	display: none;
	width: 80%;
	height: 0;
	padding-bottom: 9%;
	position: absolute;
	top: 85%;
	left: 64%;
	transform: translateX(-47%);

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
}


@media (orientation: landscape) {
	.game_over_img {
		width: 80%;
	}

	.fault {
		margin: 0;
		width: 60%;
		padding-bottom: 18.4%;
	}

	.btn_retry {
		width: 44%;
		padding-bottom: 5.7%;
	}

	.btn_enter_score {
		width: 60%;
		padding-bottom: 5%;
	}
	.btn_more_game {
		margin-top: 10px;
		width: 49%;
		padding-bottom: 3.3%;
	}
}

@media (orientation: landscape) and (max-height: 360px) {
	.game_over_img {
		width: 70%;
	}

	.fault {
		width: 55%;
	}

	.btn_retry {
		width: 37%;
		padding-bottom: 4.7%;
	}

	.btn_enter_score {
		width: 55%;
		padding-bottom: 4.5%;
	}

	.score__pic {
		margin: 10px 0 0 auto;
		width: 18%;
		padding: 0 12% 0 0;
	}
}