/* style css */
body, html {
	overflow-x:hidden;
}

img {
	-webkit-user-drag: none;
}

::selection {
   background: #0fbcc2;
   color: #fff
}

::-moz-selection {
   background: #0fbcc2;
   color: #fff
}


::-webkit-selection {
    background: #0fbcc2;
   color: #fff
}


body {
	text-align: center;
}
h2 {
	color: lightgray;
}
.bg {
	background-color: #484c50;
	width: 600px;
	height: 600px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.a_body {
	position: relative;
	rotate: 3deg;
	transform: translateY(10px);
	display: none;
	transform: translateX(70px);
}

.a_body > img {
	position: relative;
	z-index: 5;
}
.a_head, .a_l_arm, .a_r_arm, .a_l_leg, .a_r_leg {
	position: absolute;
}
.a_head {
	z-index: 15;
	top: -46px;
	left: -4px;
	rotate: 337deg;
}
.a_head_ani {
	animation: a_head ease-in-out .6s infinite ;
}
@keyframes a_head {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(8deg);
	}
	50% {
		transform: rotate(0deg);
	}
	75% {
		transform: rotate(8deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
.text_a {
	z-index: 15;
	top: -44px;
	left: 28px;
	position: absolute;
}
.text_a_ani {
	animation: text_a ease-in-out .6s infinite;
}
@keyframes text_a {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(-10px);
	}
	50% {
		transform: translateY(0);
	}
	75% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0);
	}
}
.a_body {
	z-index: 10;
}
.a_body_ani {
	animation: a_body ease-in-out .6s infinite;
}
@keyframes a_body {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(10px);
	}
	50% {
		transform: translateY(0);
	}
	75% {
		transform: translateY(10px);
	}
	100% {
		transform: translateY(0);
	}
}
.a_l_arm {
	z-index: 1;
	top: 85px;
	left: 33px;
	rotate: 273deg;
	transform: rotate(28deg) translateX(-6px);
}
.a_l_arm_ani {
	animation: a_l_arm ease-in-out .6s infinite;
}
@keyframes a_l_arm {
	0% {
		transform: translate(-3px, 0) rotate(3deg);
	}
	65% {
		transform: translate(-10px, -5px) rotate(66deg);
	}
	100% {
		transform: translate(-3px, 0) rotate(3deg);
	}
}
.a_r_arm {
	z-index: 10;
	top: 90px;
	left: 20px;
	rotate: 267deg;
	transform: rotate(42deg);
}
.a_r_arm_ani {
	animation: a_r_arm ease-in-out .6s infinite;
}
@keyframes a_r_arm {
	0% {
		transform: translate(-5px, -10px) rotate(82deg);
	}
	65% {
		transform: translate(1px, 0px) rotate(2deg);
	}
	100% {
		transform: translate(-5px, -10px) rotate(82deg);
	}
}
.a_l_leg {
	z-index: 1;
	top: 117px;
	left: 15px;
	rotate: 286deg;
	transform: rotate(32deg);
}
.a_l_leg_ani {
	animation: a_l_leg ease-in-out .6s infinite;
}
@keyframes a_l_leg {
	0% {
		transform: translate(-0px, -8px) rotate(61deg);
	}
	50% {
		transform: translate(2px, 8px) rotate(0deg);
	}
	100% {
		transform: translate(-0px, -8px) rotate(61deg);
	}
}
.a_l_leg > img {
	position: relative;
	z-index: 5;
}
.a_l_leg_b {
	position: absolute;
	top: 12px;
	left: -6px;
	z-index: 1;
}
.a_l_leg_b_ani {
	animation: a_l_leg_b ease-in-out .6s infinite;
}
@keyframes a_l_leg_b {
	0% {
		transform: translate(-12px, 16px) rotate(85deg);
	}
	50% {
		transform: translate(8px, 20px) rotate(0deg);
	}
	100% {
		transform: translate(-12px, 16px) rotate(85deg);
	}
}
.a_r_leg {
	z-index: 1;
	top: 117px;
	left: 15px;
	rotate: 286deg;
	transform: rotate(32deg);
}
.a_r_leg_ani {
	animation: a_r_leg ease-in-out .6s infinite;
}
@keyframes a_r_leg {
	0% {
		transform: translate(2px, 8px) rotate(0deg);
	}
	50% {
		transform: translate(-0px, -8px) rotate(61deg);
	}
	100% {
		transform: translate(2px, 8px) rotate(0deg);
	}
}
.a_r_leg > img {
	position: relative;
	z-index: 5;
}
.a_r_leg_b {
	position: absolute;
	top: 33px;
	left: -3px;
	z-index: 1;
}
.a_r_leg_b_ani {
	animation: a_r_leg_b ease-in-out .6s infinite;
}
@keyframes a_r_leg_b {
	0% {
		transform: translate(5px, 0px) rotate(0deg);
	}
	50% {
		transform: translate(-16px, -8px) rotate(91deg);
	}
	100% {
		transform: translate(5px, 0px) rotate(0deg);
	}
}

.game-box {
	position: relative;
	width: 500px;
	height: 100px;
	background-color: #007fff;
	margin: 0 auto;
	margin-bottom: 80px;
}
.game-box:after {
	content: '';
	display: inline-block;
	width: 100px;
	height: 100px;
	background-color: #007fff;
	position: absolute;
	left: 436px;
	top: 0;
	z-index: -1;
}
#startBtn {
	width: 150px;
	height: 40px;
	color: #ffffff;
	font-size: 24px;
	font-weight: 800;
	background-color: #001833;
	cursor: pointer;
	margin-right: 10px;
}
#startBtn:hover {
	color: #001833;
	background-color: #abd1f8;
}
#runBtn {
	width: 150px;
	height: 40px;
	color: #001833;
	font-size: 24px;
	font-weight: 800;
	background-color: #abd1f8;
	cursor: pointer;
	margin-left: 10px;
	pointer-events: none;
}
#runBtn:hover {
	color: #ffffff;
	background-color: #001833;
}
#resetBtn {
	width: 150px;
	height: 40px;
	color: #fff;
	font-size: 24px;
	font-weight: 800;
	background-color: #414040;
	cursor: pointer;
	margin-left: 10px;
}
#resetBtn:hover {
	color: #414040;
	background-color: #fff;
}

.character {
	position: absolute;
	left: 0px;
	transition: .6s;
	top: -160px;
	background-image: url("../img/cha01.png");
	width: 66px;
	height: 147px;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 15;
}

.character_jump {
	animation: character_jump 2s ease-in-out infinite;
}
@keyframes character_jump {
	0% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-20px);
	}
	40% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
	60% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}

.character.run {
	rotate: 10deg;
}
.gbb {
	width: fit-content;
	position: relative;
	top: -50px;
	left: 120px;
	background-image: url("../img/gbb_ready.png");
	background-repeat: no-repeat;
	width: 137px;
	height: 118px;
	background-size: cover;
}
.gbb_inner {
	position: relative;
}
.gbb_body, .gbb_leg_l, .gbb_leg_r, .gbb_arm_l, .gbb_arm_r {
	position: absolute;
	display: none;
}
.gbb_leg_l {
	top: 115px;
	left: 50px;
	z-index: -1;
	rotate: -50deg;
}
.gbb_leg_r {
	top: 115px;
	left: 20px;
	z-index: -1;
	rotate: 0deg;
}
.gbb_arm_l {
	top: 80px;
	left: 90px;
	z-index: -1;
	rotate: 246deg;
	transform: rotate(65deg) translate(-10px, -10px);
}
.gbb_arm_r {
	top: 80px;
	left: 50px;
	rotate: 0deg;
	transform: rotate(-95deg) translate(0px, 15px);
}

.gbb.active .gbb_inner {
	animation: gbb_inner ease-in-out .7s infinite;
}
@keyframes gbb_inner {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(-20px);
	}
	50% {
		transform: translateY(0);
	}
	75% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0);
	}
}

.gbb.active .gbb_leg_l {
	animation: gbb_leg_l ease-in-out .7s infinite;
}
@keyframes gbb_leg_l {
	0% {
		transform: rotate(0) translate(0, 0);
	}
	50% {
		transform: rotate(45deg) translate(-10px, 0);
	}
	100% {
		 transform: rotate(0) translate(0, 0);
	}
}
.gbb.active .gbb_leg_r {
	animation: gbb_leg_r ease-in-out .7s infinite;
}
@keyframes gbb_leg_r {
	0% {
		transform: rotate(0) translate(0, 0);
	}
	50% {
		transform: rotate(-80deg) translate(5px, 20px);
	}
	100% {
		transform: rotate(0) translate(0, 0);
	}
}
.gbb.active .gbb_arm_l {
	animation: gbb_arm_l ease-in-out .7s infinite;
}
@keyframes gbb_arm_l {
	0% {
		transform: rotate(65deg) translate(-10px, -10px);
	}
	50% {
		transform: rotate(0) translate(0, 0);
	}
	100% {
		transform: rotate(65deg) translate(-10px, -10px);
	}
}
.gbb.active .gbb_arm_r {
	animation: gbb_arm_r ease-in-out .7s infinite;
}
@keyframes gbb_arm_r {
	0% {
		transform: rotate(-95deg) translate(0px, 15px);
	}
	50% {
		transform: rotate(0) translate(0, 0);
	}
	100% {
		transform: rotate(-95deg) translate(0px, 15px);
	}
}

.dolphin_ani {
	animation: dolphin_ani 8s linear forwards;
}
@keyframes dolphin_ani {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(250px);
	}
}

.gbb_lose {
	background-image: url("../img/gbb_lose.png") !important;
	width: 131px;
	height: 144px;
	left: 200px;
}
.gbb_win {
	background-image: url("../img/gbb_win.png") !important;
	width: 137px;
	height: 144px;
	left: 400px;
}