* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  background: #000;
  display: grid;
  margin:0 auto;
  place-items: center;  /* 가로/세로 중앙 정렬 */
}

body{
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

img { width:100%; display:block; }

.imagemap { width:100%; position:relative; }

.start_button {
    position: absolute;
    top: 67.2%;
    left: 50%;
    width: 53.5%;
    transform: translateX(-50%);
    height: 6%;
    cursor: pointer;
	}

.question_no {
	position: absolute;
	top:25.26%;
	left:50%;
	transform: translateX(-50%);
	width:34.72%;
	height:auto;
	}
	
.choose_01 {
    position: absolute;
    top: 59.55%;
    left: 50%;
    width: 53.5%;
    transform: translateX(-50%);
    height: 6%;
    cursor: pointer;
	}

.choose_02 {
    position: absolute;
    top: 67.2%;
    left: 50%;
    width: 53.5%;
    transform: translateX(-50%);
    height: 6%;
    cursor: pointer;
	}

.choose_03 {
	position: absolute;
    top: 74.8%;
    left: 50%;
    width: 53.5%;
    transform: translateX(-50%);
    height: 6%;
    cursor: pointer;
	}

/* 결과 레이어팝업: imagemap 영역 안에서만 덮기 */
.result_layer{
	position:absolute;			/* fixed 제거 */
	left:0;
	top:0;
	width:100%;				/* imagemap 기준 100% */
	height:100%;			/* imagemap 높이 기준 100% */
	z-index:9999;
	display:none;
	background:rgba(0,0,0,0.8);

	/* 중앙정렬 */
	display:none;
	align-items:center;
	justify-content:center;
}

.result_layer.on{
	display:flex;
}

.result_box{
	position:relative;		/* result_answer absolute 기준 */
	width:77.76%;			/* imagemap 폭 기준으로 계산됨 */
	height:auto;
}

.result_box > img{
	width:100%;
	height:auto;
	display:block;
}

/* 정답 아이콘 위치 */
.result_answer{
	position: absolute;
    top: 8%;
    left: 50%;
    width: 38.7%;
    transform: translateX(-50%);
}

.result_answer img{
	width:100%;
	height:auto;
	display:block;
}

.next_question {
    position: absolute;
    top: 87.5%;
    left: 50%;
    width: 69%;
    transform: translateX(-50%);
    height: 9%;
    cursor: pointer;
	}
	
.restart_button {
    position: absolute;
    top: 67.2%;
    left: 50%;
    width: 53.5%;
    transform: translateX(-50%);
    height: 6%;
    cursor: pointer;
	}

.question01_result {
	position:absolute;
	top:20%;
	left:40%;
	transform:translateX(-50%);
	width:9.25%;
	height:auto;
	}
	
.question02_result {
	position:absolute;
	top:20%;
	left:50%;
	transform:translateX(-50%);
	width:9.25%;
	height:auto;
	}

.question03_result {
	position:absolute;
	top:20%;
	left:60%;
	transform:translateX(-50%);
	width:9.25%;
	height:auto;
	}
	
.question01_result_big {
    position: absolute;
    top: 20%;
    left: 32%;
    transform: translateX(-50%);
    width: 16.25%;
    height: auto;
	}
	
.question02_result_big {
	position:absolute;
	top:20%;
	left:50%;
	transform:translateX(-50%);
    width: 16.25%;
	height:auto;
	}

.question03_result_big {
    position: absolute;
    top: 20%;
    left: 68%;
    transform: translateX(-50%);
    width: 16.25%;
    height: auto;
	}