.oxBox {position:relative; overflow:hidden; width:600px; margin:0 auto; height:800px; background-color:#b6eff3;}
	
	.oxBoxStart {position:absolute; opacity:0; transition:all 0.6s ease; z-index:100; top:0px; left:0px; right:0px; bottom:0px;}
		.oxTitle {text-align:center; margin-bottom:50px; margin-top:-30px; transition:all 0.9s ease;}
		.oxTitle img {margin-left:-50px;}
		.oxStext { font-size:21px; color:#000; margin-bottom:60px; text-align:center;}
		.oxStext div {margin-bottom:10px; font-size: 20px;}
		.oxStext strong {font-size:25px; color:#2c7fb7;}
		a.gameStarBtn {display:block; width:320px; margin:0 auto; background-color:#36cad5; color:#fff; font-size:28px; position: relative;  padding: 20px 0 20px 53px; border-radius: 20px; overflow:hidden; text-align:left; box-shadow: 8px 8px 0 rgba(15,154,164,1); margin-bottom:50px;  animation: bigSmall 1s linear infinite;}
			.arrowBtn {position: absolute; right:0; top:0; background-color:#73dae2; text-align: center; padding:23px;}

		.oxSBg {position: absolute; left:0; right:0; bottom:-50px; z-index:-1; transition:all 0.9s ease;}
		.cludeBg img{position: absolute; bottom:0;  z-index:-5;}
		.cludeBg img.cludewhite {left:-560px; animation: moveClude 40s linear infinite;}
		.cludeBg img.cludeL {bottom:-104px; left:-425px}
		.cludeBg img.cludeR {right:-278px} 
		div.cludewhite { position:absolute; left:0; right:0; bottom:0; width:100%; height:100%; background-image:url(images/images/clude01.png); }
		@keyframes moveClude {
			0% {margin-left:0;}
			50%{ margin-left:-100px;}
			100%{ margin-left:0;}
		}
		@keyframes bigSmall {
			0% {transform:scale(1);}
			50%{transform:scale(1.1);}
			100%{transform:scale(1);}
		}
	.oxBoxStart.on {display:block; opacity:1;}
	.oxBoxStart.on .oxTitle {margin-top:60px;}
	.oxBoxStart.on .oxSBg { bottom:0px;}
	.oxBoxStart.out {display:none;}
		
	.oxBoxEnd {position:absolute; opacity:0; transform:scale(0); transition:all 0.6s ease; z-index:100; top:0px; left:0px; right:0px; bottom:0px;}
		.oxShint {overflow:hidden; margin-bottom:26px; max-width:300px; margin:0 auto;}
		.oxShint .box {background-color:#fff; border-radius: 20px; box-shadow: 8px 8px 0px rgba(182,182,182,1); width:100px; height:100px; text-align:center; color:#999999; position: relative;margin:0 0 10px 30px;float:left;}
		.oxShint .box .num {font-size:60px;}
		.oxShint .box .txt {position:absolute; left:0; right:0; bottom:0; font-size:14px;}
		.hit .num {color:#ff6969;}
		.score .num {color:#36cad5;}
		.gameScore {font-size:60px; color:#ff6969; max-width:350px; text-align:center; margin:0 auto;}
		.gameLv {letter-spacing:-0.05em;color:#000;font-size: 31px; text-align:center;margin-bottom:50px;}
	
	.oxBoxEnd.on {opacity:1; transform: scale(1);}
	.oxBoxEnd.on .oxTitle {margin-top:60px;}
	.oxBoxEnd.on .oxSBg { bottom:0px;}
	.oxBoxEnd.out {display:none;}
	
	.oxBoxQuiz {opacity:0; transition:all 0.6s ease; position:absolute; z-index:1; top:0px; left:0px; right:0px; bottom:0px;}
		.oxBoxQuiz .cludeBg img {bottom:60px;}
		.oxBoxQuiz .cludeBg img.cludeL {bottom:0;}
		.oxButtonBox {background-color:#5d5e0d; width:100%; height:78px; position: absolute; left:0; right:0; bottom:0; z-index:2;}
			.oBtn img {position: absolute;  bottom:5px; left:50px;}
			.xBtn img {position: absolute; bottom:5px; right:50px;}
		.oxBoxQuizTop {position: relative; padding:20px 20px 0 20px; text-align: center;}
			.oxBtimeB{display:inline-block; position: absolute; left:20px; top:20px;; text-align:center; transition: transform 1s ease 0.5s;}
			.tleft {position: absolute; left:0; width:15px; top:-15px; transform: rotate(-109deg);}
			.tright {position: absolute; right:-18px; top:15px; width:15px;}
			.timeNum {color:#ff6969; font-size:30px; position: absolute;right:0; left:-10px; top:30px;}
			.oxBtimeB.on {animation: hurry .5s infinite ease-out 0.5s;}
			@keyframes hurry{
				0% {transform: rotate(0);}
				50% {transform: rotate(-20deg);}
				100% {transform: rotate(0deg);}
			}
		.oxBstep .stepTotal{color: #9e9e9e;}
		.oxBhit {position: absolute; right:20px; top:20px; text-align:center;}
			.hitIcon {position: absolute;}
			.hitIleft {left:43px; top:18px;}
			.hitIright {right:26px; top:8px;}
		.oxBhit	.hit {font-size:20px; color:#ff6969; padding-left:20px; display:inline-block}
		.oxBhit .score {font-size:30px; color:#17c6d2; margin-top:-5px;}	
		.oxBhit .hitScore {position: absolute; right:0; left:0; top:8px; transition:all 0.3s ease;}
		.oxBhit.on .hitIright {animation: iconRo 1s infinite;}
		.oxBhit.on .hitIleft {animation: iconLo 1s infinite;}
		@keyframes iconRo{
			0% {transform: rotate(0);}
			100% {transform: rotate(360deg);}
		}
		@keyframes iconLo{
			0% {transform: rotate(0);}
			100% {transform: rotate(-360deg);}
		}
		.oxBQuizBox{background-color:#029a34; border-radius: 20px; padding:30px 30px 30px 160px ; max-width:330px; margin:20px auto 0; position: relative;box-shadow: 18px 18px 18px rgba(37,72,76,0.27); min-height:120px;}
		
			.quesmark {position:absolute; left:30px; }
			.quesText {color:#fff; font-size:25px; word-break: keep-all;}
		.step1 {left:0px; bottom:45px; z-index:1; transition:all 0.6s ease;}
		.step1 .bg {width:100%;}
			.tree {position: absolute; right:20px; bottom:70px;} 
			.tree02 {position: absolute; top:-47px; left:-12px;}
			.tree.on .tree02{transition: transform 1s ease 0.5s; animation: tree 3s infinite;}
				
			.character {position: absolute; left:449px; bottom:105px; z-index:100; transition:all 0.6s ease;}
			.character img {width: 70px; animation: character 1s infinite;}
			@keyframes character{
			0% {transform: translate3d(0px, 0px, 0px); animation-timing-function: ease-out}
			50% {transform: translate3d(0px, -10px, 0px);animation-timing-function: ease-in}
			100% {transform: translate3d(0px, 0px, 0px);}
		}
			.levelmark {position: absolute; text-align: center; transition:all 0.3s ease;}
			.levelmark .number {color:#ef4d00; font-size:18px; position: absolute; left:0; right:0; top:6px;}
			.levelmark  img {width:40px;}
			.lem01 {left:338px; bottom:61px; transform: scale(1);}
			.lem02 {left:176px; bottom:94px; transform: scale(0.9);}
			.lem03 {left:257px; bottom:126px; transform: scale(0.8);}
			.lem04 {left:330px; bottom:148px; transform: scale(0.7);}
		.step2 {left:-167px; bottom:124px; z-index:-1; transition:all 0.6s ease; transform: scale(0.6);}
		.step2 .bg {}
			.lem05 {left:446px; bottom:24px; transform: scale(1);}
			.lem06 {left:400px; bottom:86px; transform: scale(0.9);}
			.lem07 {left:282px; bottom:82px; transform: scale(0.8);}
			.levelmark.on {transform: scale(1.2);}

		.step3 {left:-252px; bottom:82px; transition:all 0.6s ease; z-index:-2; transform: scale(0.5);}
		.step3 .bg {}
			.lem08 {left:203px; bottom:39px; transform: scale(1);}
			.lem09 {left:267px; bottom:63px; transform: scale(0.9);}
			.lem10 {left:228px; bottom:100px; transform: scale(0.8);}

		.stepBox1 .character {left: 370px;}
		.stepBox2 .character {left: 215px;}
		.stepBox2 .step1 {bottom: 27px; transform: scale(1.1);}
		.stepBox2 .step2 {transform: scale(0.7);}
		.stepBox2 .step3 {transform: scale(0.6);}
		.stepBox3 .character {left: 198px; bottom:132px;}
		.stepBox3 .step1 {bottom: 4px; transform: scale(1.2);}
		.stepBox3 .step2 {transform: scale(0.7); bottom: 130px;}
		.stepBox3 .step3 {transform: scale(0.6);}
		.stepBox4 .character {left: 376px; bottom:132px;}
		.stepBox4 .step1 {bottom: -25px; transform: scale(1.3);}
		.stepBox4 .step2 {transform: scale(0.9); bottom: 130px;}
		.stepBox4 .step3 {transform: scale(0.6); bottom: 90px; left:-240px;}
		.stepBox5 .character {left: 306px; bottom:132px; transform: scale(0.9);}
		.stepBox5 .step1 {bottom: -46px; left:11px; transform: scale(1.4);}
		.stepBox5 .step2 {transform: scale(1); bottom: 130px;}
		.stepBox5 .step3 {transform: scale(0.6); bottom: 100px; left:-230px;}
		.stepBox6 .character {left: 256px; bottom: 191px; transform: scale(0.8);}
		.stepBox6 .step1 {bottom: -55px; left:22px; transform: scale(1.5);}
		.stepBox6 .step2 {transform: scale(1); bottom: 124px;}
		.stepBox6 .step3 {transform: scale(0.7); bottom: 110px; left:-220px;}
		.stepBox7 .character {left: 147px; bottom: 186px; transform: scale(0.7);}
		.stepBox7 .step1 {bottom: -65px; left:32px; transform: scale(1.6);}
		.stepBox7 .step2 {transform: scale(1.1); bottom: 124px;  left:-157px;}
		.stepBox7 .step3 {transform: scale(0.8); bottom: 125px; left:-210px;}
		.stepBox8 .character {left: 39px; bottom: 172px; transform: scale(0.6);}
		.stepBox8 .step1 {bottom: -85px; left:42px; transform: scale(1.7);}
		.stepBox8 .step2 {transform: scale(1.2); bottom: 124px; left:-147px;}
		.stepBox8 .step3 {transform: scale(0.9); bottom: 135px; left:-200px;}
		.stepBox9 .character {left: 39px; bottom: 182px; transform: scale(0.5);}
		.stepBox9 .step1 {bottom: -95px; left:52px; transform: scale(1.7);}
		.stepBox9 .step2 {transform: scale(1.2); bottom: 112px; left:-137px;}
		.stepBox9 .step3 {transform: scale(1); bottom: 145px; left:-190px;}
	.oxBoxQuiz.on {opacity:1;}
	.oxBoxReady {position:absolute; transition:all 0.6s ease; z-index:101; top:100%; left:0px; right:0px; height:100%;}
		.oxBRIn {  width:100%; height:100%; position: relative;}
		.oxBRIn:before {content:""; position: absolute;background-color:#000; left:0; opacity:0.7; right:0; top:0px; bottom:0px; }
			.oxRCircle {width:300px; height:300px; background-color:#fff; box-shadow:8px 8px 0 rgba(182,182,182,1); border-radius:50%;position: absolute; z-index:10; top:50%; left:0; right:0; bottom:0; margin:-150px auto 0; text-align:center;}
			
			.oxRlevel {margin:30px 0 0 0;}
			.step {color:#ff6969; font-size:40px;}
			.stepTotal {color:#e0e0e0; font-size:30px; }
			.oxRtxt {color:#17c6d2; font-size:30px; display:inline-block; position: relative;}
			.oxRtxt:before {width:58px; height:1px; background-color:#17c6d2; position: absolute;left:-70px; top:20px;display:block; content:'';}
			.oxRtxt:after {width:58px; height:1px; background-color:#17c6d2; position: absolute;right:-70px; top:20px; display:block; content:'';}
			.numcount {color:#ff6969; font-size:84px;}
	.oxBoxReady.on {top:0px;}
	.oxBoxReady.on .oxBRIn {opacity:1;}
	.oxSBottom {display:none; background-color:#029a34; padding:20px 150px; color:#fff; font-size:15px; position: absolute; bottom:0; left:0; right:0;z-index:101;}
		.gametip {color:#f0ff00; position:absolute; left:34px; top:42px;}
		.gametipList {font-family: 'Nanum Gothic','나눔고딕';}
		.gametipList li {padding-top:5px;}
		.gametipList li:first-child {padding-top:0;}
	.oxBoxYes, .oxBoxNo {position: absolute; z-index: 2; left:0; right:0; top:0; bottom:0; transition:all 0.3s ease; transform:scale(0);}
		.oxBoxInBg {background-color:rgba(0,0,0,0.7); width:100%; height:100%; position: absolute;}
			.totalNum {position: absolute; left: 0px; top: 48px; right: 0px; text-align: center; font-size: 20px; color: #fffc00;}
			.totalNum span {font-size:40px; color: #fffc00;}
			.oxBoxInBgIn {overflow: hidden; margin-top: 30px; height: 300px; position: relative;}
			.oxBQuResultB {overflow:hidden; color:#fff;background-color:#029a34; border-radius:20px; padding:26px; max-width:468px; position: absolute; left:0 ; right:0; top:330px; margin:0 auto; }
				.oxBReTitle {position: relative; }	
				.oxBReTitle span{font-size:30px;}
				.oxBReTitle a{font-size:17px; color:#000; display:block; position: absolute; right:0;top:0; background-color:#ffcc00; border-radius:50px; padding:5px 20px;}
				.oxBReCon {font-family: 'Nanum Gothic','나눔고딕'; max-height:126px; font-size:18px; overflow-y :auto; line-height:25px} 
			.char02 {position: absolute; left:135px; top:100px;}
			.remark {position: absolute; right:100px; top:100px;}
			.remark02 {position: absolute; right:50px; top:127px;}
	.oxBoxYes .gameStarBtn, .oxBoxNo .gameStarBtn {position: absolute; right:0; left:0; bottom:80px;}
	.oxBoxYes.on, .oxBoxNo.on {transform:scale(1);}