.contents{
	display: none;
}

.tt{
	background: url(../images/08_ox/tt1.png) center bottom no-repeat !important;
}
/* 게임페이지 */
.gamePage{
	background: url(../images/08_ox/ff.png) center bottom no-repeat;
	position: absolute;
    width: 100%;
	height: 100%;
	display: none;
}

.startPage{
	background: url(../images/08_ox/intro.png) center bottom no-repeat;
	display: block;
}

.mainPage{
    background: url(../images/08_ox/bg1.png) center bottom no-repeat;
}

.resultPage{
	background: url(../images/08_ox/result.png) center bottom no-repeat;
}

/* 시작페이지 타이틀 */
.startPage .title{
	background: url(../images/08_ox/intro_title.png) 0 0 no-repeat;
	width: 432px;
    height: 99px;
	position: absolute;
	top: 215px;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* 버튼 */
.btn{
    position: absolute;
    cursor: pointer;
/*	background: rgba(0,0,0,0.5);*/
	z-index: 1;
}

.btnStart{
	width: 321px;
	height: 137px;
    top: 808px;
    left: 799px;
}

.btnCheck{
	background: url(../images/08_ox/btnCheck.png) 0 0 no-repeat;
	width: 354px;
	height: 120px;
	top: 924px;
    left: 1345px;
}

.btnNext{
	background: url(../images/08_ox/btnNext.png) 0 0 no-repeat;
	width: 354px;
	height: 120px;
	top: 924px;
    left: 1345px;
}

.btnReplay{
	background: url(../images/08_ox/btnReplay.png) 0 0 no-repeat;
	width: 353px;
	height: 120px;
	top: 892px;
    left: 50%;
    transform: translateX(-50%);
}

/* 타이머 */
.timeWrap{
	position: absolute;
	width: 883px;
	top: 184px;
    right: -124px;
	animation-play-state: running;
}

.timeWrap div{
	position: absolute;
}

.timeWrap .timebarBack{
	background: url(../images/08_ox/timebarBack.png) 0 0 no-repeat;
	width: 653px;
	height: 75px;
	top: 0px;
	left: 45px;
}

.timeWrap .timebarWrap{
	position: absolute;
	width: 625px;
	height: 53px;
	top: 11px;
    left: 61px;
	border-radius: 15px;
}

.timebarWrap .timebar{
	background: url(../images/08_ox/timebar.png) 0 0 no-repeat;
	width: 100%;
	height: 100%;
	border-radius: 15px;
}

.timeWrap .timeClock{
	background: url(../images/08_ox/timeClock.png) 0 0 no-repeat;
	width: 88px;
	height: 98px;
	top: -18px;
	left: -4px;
}

/* 메인페이지 문제 영역*/
.mainPage .quizArea{
	position: absolute;
	width: 1031px;
	top: 309px;
	left: 64px;
}

.mainPage .quizArea .quiz{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.mainPage .quizArea .quizNum{
	background: #f2f2f2;
	border-radius: 50px;
	width: 201px;
	height: 66px;
	color: #12b596;

	margin-bottom: 40px;
}

.mainPage .quizArea .quizNum p{
	font-family: 'jalnan';
	font-size: 45px;
	font-weight: bold;
	text-align: center;
	line-height: 66px;
	float: left;
}


.mainPage .quizArea .quizNum p:nth-child(1){
	margin-right: 14px;
	margin-left: 40px;
}


.mainPage .quizArea .quizContent{
	font-family: 'NotoSan_kr';
	font-size: 80px;
	font-weight: bold;
	text-align: center;
	color: #000000;
	line-height: 119px;
}


/* 오엑스 버튼 */
.mainPage .objWrap{
	position: absolute;
	top: 374px;
    left: 1174px;
}

.mainPage .objWrap .obj{
	cursor: pointer;
	width: 298px;
	height: 298px;
	position: relative;
	float: left;
	margin-right: 63px;
}

.mainPage .obj:nth-child(1){
	background: url(../images/08_ox/ans_o_on.png) 0 0 no-repeat;
}

.mainPage .obj:nth-child(2){
	background: url(../images/08_ox/ans_x_on.png) 0 0 no-repeat;
}

.mainPage .obj:nth-child(1).off{
	background: url(../images/08_ox/ans_o_off.png) 0 0 no-repeat;
}

.mainPage .obj:nth-child(2).off{
	background: url(../images/08_ox/ans_x_off.png) 0 0 no-repeat;
}

/*
.mainPage .objWrap{
    position: absolute;
    top: 527px;
	left: 50%;
    transform: translate(-50%, -50%);
}

.mainPage .obj{
	background: url(../images/08_ox/obj.png) 0 0 no-repeat;
	float: left;
	width: 305px;
    height: 304px;
    float: left;
    margin-right: 128px;
}

.mainPage .obj:last-child{
	margin-right: 0px;
}

.mainPage .obj p{
	width: 100%;
	height: 100%;

    font-family: 'NotoSan_kr';
    font-size: 170px;
    text-align: center;
	font-weight: bolder;
	line-height: 278px;

    color: #e5e5e5;
}

.mainPage .textarea{
    width: 305px;
    height: 304px;
    background: none;
    border: none;

	font-family: 'NotoSan_kr';
    font-size: 170px;
    text-align: center;
	font-weight: bolder;

	position: absolute;
	top: -13px;
}

.mainPage .textarea:disabled{
    color: #000000;
}

.mainPage .textarea:focus{
    outline: none;
}
*/

/* 정답 */
/*
.mainPage .obj.onCorrect .textarea{
	color: #1d54e2;
}
*/

/* 오답 */
/*
.mainPage .obj.onWrong .textarea{
	color: #e73116;
}
*/

/* 비바몬 */
.vivaWrap .viva{
	position: absolute;
	background: url(../images/08_ox/vivamon.png) 0 0 no-repeat;
	width: 308px;
	height: 266px;
	top: 681px;
    left: 1607px;
}

.popReplay{
	background: url(../images/08_ox/pop_replay.png) 0 0 no-repeat;
	width: 455px;
	height: 118px;
	position: absolute;
	top: 759px;
    left: 1190px;
	display: none;
}

/* 결과페이지 */
.resultWrap{
    position: absolute;
	width: 1216px;
    top: 552px;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* 결과표 - 문제번호 */
.resultWrap .result p:nth-child(1){
	font-family: 'NotoSan_kr';
	font-weight: bolder;
	font-size: 80px;
	text-align: left;
	float: left;
	margin-left: 58px;
    margin-top: 49px;
}

.resultWrap .result{
	width: 1199px;
	height: 134px;
    font-family: 'NotoSan_kr';
    font-weight: bolder;
    font-size: 45px;
    text-align: left;
    line-height: 28px;
    left: 1px;
    position: relative;
	overflow: hidden;
}

/* 결과표 - 문제 */
.resultWrap .result p:nth-child(2){
	position: relative;
    top: 50%;
    left: 80px;
    font-family: 'NotoSan_kr';
    line-height: 68px;
    transform: translateY(-50%);
    width: 967px;
	float: left;
}

/* 결과표 - ox표시 */
.resultWrap .result p:nth-child(3){
    width: 127px;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -32px;
    transform: translateY(50%);

	font-family: 'NotoSan_kr';
    font-weight: bolder;
    font-size: 80px;
}


.resultWrap .result:nth-child(2){
	background: #e8e8e8;
}

.resultWrap .result:nth-child(4){
	background: #e8e8e8;
}

.item.st{
	top: 657px;
    left: 1602px;
}

.stamp{
    top: -43px;
    left: 1501px;
}

.item.st1 {
    background: url('../images/08_ox/stamp/stamp01.png') 0 0 no-repeat;
	width: 231px;
	height: 232px;
	left: 1600px;
}

.item.st2 {
    background: url('../images/08_ox/stamp/stamp02.png') 0 0 no-repeat;
	width: 226px;
	height: 226px;
}

.item.st3 {
    background: url('../images/08_ox/stamp/stamp03.png') 0 0 no-repeat;
	width: 226px;
	height: 226px;
}

.item.st4 {
    background: url('../images/08_ox/stamp/stamp04.png') 0 0 no-repeat;
	width: 226px;
	height: 226px;
}

.item.st5 {
    background: url('../images/08_ox/stamp/stamp05.png') 0 0 no-repeat;
	width: 276px;
	height: 226px;
	left: 1574px;
}

.item.st6 {
    background: url('../images/08_ox/stamp/stamp06.png') 0 0 no-repeat;
	width: 224px;
	height: 226px;
	left: 1604px;
}


/* 시작페이지 */
.startPage .twinkle{
	position: absolute;
	opacity: 0;
	animation: opacity010 3s linear infinite normal;
	display: none;
}

.startPage .twinkle.ani1{
	animation: twinkleScale1 3s linear infinite normal;
}

.startPage .twinkle.ani2{
	animation: twinkleScale2 3s linear infinite normal;
}

.startPage .twinkle.ani3{
	animation: twinkleScale3 3s linear infinite normal;
}

.startPage .twinkle:nth-child(1){
	background: url(../images/08_ox/twinkle1.png) 0 0 no-repeat;
	width: 76px;
	height: 94px;
	top: 285px;
    left: 277px;
}

.startPage .twinkle:nth-child(2){
	background: url(../images/08_ox/twinkle2.png) 0 0 no-repeat;
	width: 60px;
	height: 74px;
    top: 367px;
    left: 257px;

}

.startPage .twinkle:nth-child(3){
	background: url(../images/08_ox/twinkle3.png) 0 0 no-repeat;
	width: 37px;
	height: 45px;
	top: 295px;
    left: 1564px;
}

.startPage .twinkle:nth-child(4){
	background: url(../images/08_ox/twinkle4.png) 0 0 no-repeat;
	width: 77px;
	height: 94px;
	top: 310px;
    left: 1610px;
}

/* 시작페이지 물음표 */
.startPage .qmark{
	position: absolute;
}

.startPage .qmark:nth-child(1){
	background: url(../images/08_ox/qmark1.png) 0 0 no-repeat;
	width: 39px;
	height: 43px;
	top: 549px;
    left: 403px;
	transform-origin: bottom right;
	animation: qmarkAni1 3s linear infinite normal;
}

.startPage .qmark:nth-child(2){
	background: url(../images/08_ox/qmark2.png) 0 0 no-repeat;
	width: 40px;
	height: 43px;
	top: 447px;
    left: 519px;
	transform-origin: 8px 38px;
	animation: qmarkAni2 3s linear infinite normal;
}

.startPage .qmark:nth-child(3){
	background: url(../images/08_ox/qmark3.png) 0 0 no-repeat;
	width: 41px;
	height: 65px;
	top: 522px;
    left: 551px;
	transform-origin: 8px 55px;
	animation: qmarkMove 1s linear infinite normal;;
}

.startPage .qmark:nth-child(3).ani{
	animation: qmarkAni3 3s linear infinite normal;
}



/* 페이징 스타일 */
.navigation {
	background: #5edbba;
	border-top-left-radius: 46px;
	border-top-right-radius: 46px;
    position: absolute;
    bottom: 0px;
}

.navigation .dot{
	width: 22px;
    height: 22px;
    background: #ffffff;
    border-radius: 100%;
    float: left;
    margin-top: 15px;
    margin-bottom: 12px;
    margin-left: 27px;
}

.navigation .dot.on {
	width: 27px;
	height: 27px;
    background: #ffd205;
	border: 5px solid #ffffff;
	margin-top: 12px;
	margin-right: -5px;
}

.navigation .dot:first-child.on {
	margin-right: -5px;
}

.navigation .dot:first-child {
    margin-left: 52px;
}


@keyframes opacity010{

	0% {
		opacity: 0;
  	}
  	25% {
		opacity: 1;
  	}
  	50% {
		opacity: 0;
  	}
  	75% {
		opacity: 1;
  	}
  	100% {
		opacity: 0;
  	}
}

@keyframes twinkleScale1{

	0% {
		opacity: 0;
		transform: scale(1.2) rotate(.001deg);
  	}
  	25% {
		opacity: 1;
		transform: scale(0.3) rotate(.001deg);
  	}
  	50% {
		opacity: 0;
		transform: scale(1.2) rotate(.001deg);
  	}
  	75% {
		opacity: 1;
		transform: scale(0.3) rotate(.001deg);
  	}
  	100% {
		opacity: 0;
		transform: scale(1.2) rotate(.001deg);
  	}
}

@keyframes twinkleScale2{

	0% {
		opacity: 0;
		transform: scale(1) rotate(.001deg);
  	}
  	25% {
		opacity: 1;
		transform: scale(0.5) rotate(.001deg);
  	}
  	50% {
		opacity: 0;
		transform: scale(1) rotate(.001deg);
  	}
  	75% {
		opacity: 1;
		transform: scale(0.5) rotate(.001deg);
  	}
  	100% {
		opacity: 0;
		transform: scale(1) rotate(.001deg);
  	}
}


@keyframes twinkleScale3{

	0% {
		opacity: 0;
		transform: scale(1) rotate(.001deg);
  	}
  	25% {
		opacity: 1;
		transform: scale(0.2) rotate(.001deg);
  	}
  	50% {
		opacity: 0;
		transform: scale(1) rotate(.001deg);
  	}
  	75% {
		opacity: 1;
		transform: scale(0.2) rotate(.001deg);
  	}
  	100% {
		opacity: 0;
		transform: scale(1) rotate(.001deg);
  	}
}

@keyframes qmarkMove{
	0%{
		transform: scale(1) rotate(0deg);
	}
	50%{
		transform: scale(0.7) rotate(25deg);
	}
	100%{
		transform: scale(1) rotate(0deg);
	}
}

@keyframes qmarkAni1{
	0% {
		transform: scale(1) rotate(-20deg);
  	}
  	25% {
		transform: scale(0.5) rotate(30deg);
  	}
  	50% {
		transform: scale(1) rotate(-20deg);
  	}
  	75% {
		transform: scale(0.5) rotate(30deg);
  	}
  	100% {
		transform: scale(1) rotate(-20deg);
  	}
}

@keyframes qmarkAni2{
	0% {
		transform: scale(0.5) rotate(30deg);
  	}
  	25% {
		transform: scale(1) rotate(-20deg);
  	}
  	50% {
		transform: scale(0.5) rotate(30deg);
  	}
  	75% {
		transform: scale(1) rotate(-20deg);
  	}
  	100% {
		transform: scale(0.5) rotate(30deg);
  	}
}

@keyframes qmarkAni3{
	0% {
		transform: scale(0.7) rotate(25deg);
  	}
  	25% {
		transform: scale(1) rotate(-15deg);
  	}
  	50% {
		transform: scale(0.7) rotate(25deg);
  	}
  	75% {
		transform: scale(1) rotate(-15deg);
  	}
  	100% {
		transform: scale(0.7) rotate(25deg);
  	}
}


 /* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.resultWrap .result p:nth-child(2){
		line-height: 58px;
	}

	.mainPage .quizArea .quizNum p{
		line-height: 92px;
	}

	.mainPage .quizArea .quizContent{
		line-height: 101px;
	}
}

/* IE6,7,8 */
@media \0screen\,screen\9 {
	.resultWrap .result p:nth-child(2){
		line-height: 58px;
	}

	.mainPage .quizArea .quizNum p{
		line-height: 92px;
	}

	.mainPage .quizArea .quizContent{
		line-height: 101px;
	}
}

/* IE9,10 */
@media screen and (min-width:0\0){
	.resultWrap .result p:nth-child(2){
		line-height: 58px;
	}

	.mainPage .quizArea .quizNum p{
		line-height: 92px;
	}

	.mainPage .quizArea .quizContent{
		line-height: 101px;
	}
}