@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');

@import url('http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');

.text_st::placeholder {
  color: #999;
  font-size: 15px;
  opacity: 1; /* 일부 브라우저에서 흐릿하게 나오는 걸 방지 */
}

/* 크로스 브라우징용 (선택사항) */
.text_st::-webkit-input-placeholder {
  color: #999;
}
.text_st:-ms-input-placeholder {
  color: #999;
}
.text_st::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.text_st_02::placeholder {
  color: #999;
  font-size: 15px;
  opacity: 1; /* 일부 브라우저에서 흐릿하게 나오는 걸 방지 */
}

/* 크로스 브라우징용 (선택사항) */
.text_st_02::-webkit-input-placeholder {
  color: #999;
}
.text_st_02:-ms-input-placeholder {
  color: #999;
}
.text_st_02::-moz-placeholder {
  color: #999;
  opacity: 1;
}

#quiz_wrap {
	width: 1280px;
	margin: 0 auto 50px;
}

.grade {
	width: 100%;
	padding: 60px;
	border: 1px solid #ccc;
	box-sizing: border-box;
}

.grade_book_title {
    padding-bottom: 25px;
	margin-bottom: 5px;
    border-bottom: 1px solid #000;
}

.grade_book_title p {
    font-size: 35px;
    font-weight: 700;
    line-height: 45px;
}

.grade_book_desc {
	 padding-bottom: 23px;	
	border-bottom: 1px solid #dcdcdc;
}

.grade_book_subtitle {
    display: block;
    font-size: 18px;
    color: #000;
	line-height: 25px;
}

.text_gap {
    display: inline-block;
    background-image: url(/image/sub/book_subtitle_gap.gif);
    background-repeat: no-repeat;
    background-position: 0px center;
    color: #606060;
    margin-left: 15px;
    padding-left: 15px;
    margin-top: 10px;
}

.grade_book_grade {
	width: 500px;
	margin: 70px auto 60px;
}

.grade_book_grade p {
	font-size: 55px;
	font-weight: 700;
	color: #ff7900;
	margin-bottom: 30px;
	text-align: center;
}

.grade_vote_box {
	width: 500px;
	height: 140px;
	background-color: #f8f8f8;
	border: 1px solid #dcdcdc;
	box-sizing: border-box;
	display: flex;
	justify-content: center;   /* 가로 중앙 정렬 */
	align-items: center;       /* 세로 중앙 정렬 */
	margin-bottom: 20px;
}

.grade_vote_box ul {
	display: flex;
	padding: 0;
	margin: 0;
	list-style: none;
}

.grade_vote_box ul li {
	float: left;
	margin-right: 25px;
	cursor: pointer;
}

.grade_vote_box ul li:last-child {
	margin-right: 0;
}

.grade_blank {
	width: 55px;
	height: 55px;
	background-image: url(/image/sub/book_grade_blank.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 55px 55px;
}

.grade_vote {
	width: 55px;
	height: 55px;
	background-image: url(/image/sub/book_grade_vote.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 55px 55px;
}

.grade_book_grade span {
	display: inline-block;
	width: 500px;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
}

.quiz_page_go {
	width: 500px;
	height: 100px;
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	text-align: center;
    line-height: 98px;
	background-color: #0056e0;
	border: 1px solid #004dc8;
	box-sizing: border-box;
	cursor: pointer;
	margin: 0 auto;
}

.quiz_page_go:hover {
	background-color: #0049bd;
	border: 1px solid #003d9e;
	box-sizing: border-box;
	cursor: pointer;
}


.quiz_page {
	width: 100%;
}

.quiz_page_title {
	width: 100%;
	height: 108px;
	background-color: #003ea1;
	text-align: center;
	font-size: 45px;
	font-weight: 700;
	line-height: 106px;
	color: #fff;
	border-bottom: 5px solid #ff7900;
}

.quiz_page_body {
	height: 100%;
	background-color: #e0ebfa;
	padding: 45px 160px 28px;
	margin: 0 auto;
	position: relative;
}

.quiz_page_body_inner {
	display: block;
	width: 960px;
	height: 100%;
	position: relative;
}

.quiz_page_body_inner_top {
	display: block;
	height: 50px;
	background-image: url(/image/sub/quiz_body_inner_top.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 960px 50px;
}

.quiz_page_body_inner_bottom {
	display: block;
	height: 50px;
	background-image: url(/image/sub/quiz_body_inner_bottom.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 960px 50px;
	position: relative;
}


.quiz_page_body_inner_contents {
	display: block;
	height: 100%;
	min-height: 540px;
	padding: 35px 50px 50px; 
	background-color: #fff;
}

.quiz_page_book_title {	
	width: 800px;
	font-size: 30px;
	font-weight: 700;
	text-align: center; 
	line-height: 45px;
	padding: 0 20px 30px;
	border-bottom: 1px solid #ff7900;
}

.quiz_page_QnA {
	padding: 55px 115px 70px;
	text-align: left;
}

.quiz_page_question {
	width: 630px;
	font-size: 20px;
	font-weight: 700;
	line-height: 38px;
	word-break: keep-all;
	margin-bottom: 40px;
}

.quiz_page_select_line {
	display: block;
	height: 100%;
	position: relative;
}

.quiz_page_select_line ul {
	display: inline-block;
	
	width: 630px;
	/* overflow: hidden; */     /* 정답, 오답 라벨 가려지는 문제로 주석처리 */
	margin-bottom: 15px;
}

.quiz_page_select_line ul:last-child {
	margin-bottom: 0px;
}

.quiz_page_select_line ul li {
	float: left;
}

.quiz_page_select_line ul li:nth-child(1) {
	width: 25px;
}

.quiz_page_select_line ul li:nth-child(2)  {
	width: 605px;
	font-size: 18px;
	font-weight: 400;
	line-height: 33px;
	/* line-height: 35px; */
	word-break: keep-all;
}

/* 250611 국신원 요청에 따른 수정 */
.quiz_page_select_line input[type="radio"] {
	appearance: none;
	border: 1px solid gray;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	/* transition: border 0.5s ease-in-out; */

	margin-left: 0;
}

.quiz_page_select_line input[type="radio"]:checked {
	border: 5px solid #0056e1;
}

.quiz_page_select_line label {
	cursor: pointer;
}





.quiz_page_score_wrap {
	display: inline-block;
	width: 630px;
	padding: 0 115px 0;
	position: relative;
}

.quiz_page_score_wrap ul {
	display: inline-block;
	/* overflow: hidden; */
}

.quiz_page_score_wrap ul li {
	float: left;
	margin-right: 6px;
	line-height: 40px;
}

.quiz_page_score_wrap ul li:nth-child(1) {
	font-size: 25px;
	font-weight: 700;
	margin-right: 17px;
}

.font_orange_01 {
	color: #ff7900;
}

@keyframes bounce-scale {
  0%   { transform: scale(1.45) rotate(45deg); }
  25%  { transform: scale(0.95) rotate(-15deg); }
  50%  { transform: scale(1.25) rotate(25deg); }
  75%  { transform: scale(0.98) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes bounce-fade-slide {
  0% {
    transform: translateX(-15px) scale(1.04);
    opacity: 0;
  }
  25% {
    transform: translateX(10px) scale(0.97);
    opacity: 0.5;
  }
  50% {
    transform: translateX(-5) scale(1.02);
    opacity: 1;
  }
  75% {
    transform: translateX(2) scale(0.98);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

.quiz_blank {
	width: 40px;
	height: 40px;
	border: 1px solid #999999;
	border-radius: 50px;
	box-sizing: border-box;
	background-color: #fff;
}

.quiz_O {
	width: 40px;
	height: 40px;
	border: 1px solid #0056e0;
	border-radius: 50px;
	box-sizing: border-box;
	background-color: #0056e0;
	background-image: url(/image/sub/quiz_O.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 22px 22px;

	/* 애니메이션 추가 */
	animation: bounce-scale 0.5s ease-in-out;
}

.quiz_X {
	width: 40px;
	height: 40px;
	border: 1px solid #ff7900;
	border-radius: 50px;
	box-sizing: border-box;
	background-color: #ff7900;
	background-image: url(/image/sub/quiz_X.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 16px 16px;

	/* 애니메이션 추가 */
	animation: bounce-scale 0.5s ease-in-out;
}


.quiz_page_notice {
	margin-top: 10px;
	margin-left: 165px;
	font-size: 15px;
	text-indent: 25px;
	text-align: left;
	background-image: url(/image/sub/icon_notice_01.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 20px 20px;	
}

@keyframes shake-horizontal {
  0%   { background-position: 90px center; }
  25%  { background-position: 88px center; }
  50%  { background-position: 90px center; }
  75%  { background-position: 92px center; }
  100% { background-position: 90px center; }
}

.quiz_page_off {
	position: absolute;
	bottom: 0;
	right: 0;
	/* bottom: 33px;
	right: 180px; */
	width: 130px;
	height: 60px;
	font-size: 18px;
	font-weight: 500;
	color: #a0a0a0;
	text-align: left;
	text-indent: 40px;	
    line-height: 58px;
	background-color: #dcdcdc;
	background-image: url(/image/sub/arrow_next_03.png);
	background-repeat: no-repeat;
	background-position: 90px center;
	background-size: 11px 18px;
	border: 1px solid #b0b0b0;
	border-radius: 50px;
	box-sizing: border-box;
	cursor: pointer;
}

.quiz_page_off:hover {
	color: #ffffff;
	background-color: #b0b0b0;
	background-image: url(/image/sub/arrow_next_02.png);
	background-repeat: no-repeat;
	background-position: 90px center;
	background-size: 11px 18px;
	border: 1px solid #a0a0a0;
	border-radius: 50px;
	box-sizing: border-box;
	cursor: pointer;

	/* 애니메이션 추가 */
	animation: shake-horizontal 0.4s ease-in-out infinite;
}


.quiz_page_ready {
	position: absolute;
	bottom: 0;
	right: 0;
	/* bottom: 33px;
	right: 180px; */
	width: 130px;
	height: 60px;
	font-size: 18px;
	font-weight: 500;
	color: #fff;
	text-align: left;
	text-indent: 40px;	
    line-height: 58px;
	background-color: #0056e0;
	background-image: url(/image/sub/arrow_next_02.png);
	background-repeat: no-repeat;
	background-position: 90px center;
	background-size: 11px 18px;
	border: 1px solid #004dc8;
	border-radius: 50px;
	box-sizing: border-box;
	cursor: pointer;

	/* 애니메이션 추가 */
	animation: shake-horizontal 0.4s ease-in-out infinite;
}

.quiz_page_ready:hover {
	background-color: #0049bd;
	background-image: url(/image/sub/arrow_next_02.png);
	background-repeat: no-repeat;
	background-position: 90px center;
	background-size: 11px 18px;
	border: 1px solid #003d9e;
	border-radius: 50px;
	box-sizing: border-box;
	cursor: pointer;

	/* 애니메이션 추가 */
	animation: shake-horizontal 0.4s ease-in-out infinite;
}



.quiz_page_next {
	position: absolute;
	bottom: 0;
	right: 0;
	/* bottom: 33px;
	right: 180px; */
	width: 130px;
	height: 60px;
	font-size: 18px;
	font-weight: 500;
	color: #fff;
	text-align: left;
	text-indent: 40px;	
    line-height: 58px;
	background-color: #230084;
	background-image: url(/image/sub/arrow_next_02.png);
	background-repeat: no-repeat;
	background-position: 90px center;
	background-size: 11px 18px;
	border: 1px solid #1c0068;
	border-radius: 50px;
	box-sizing: border-box;
	cursor: pointer;

	/* 애니메이션 추가 */
	animation: shake-horizontal 0.4s ease-in-out infinite;
}

.quiz_page_next:hover {
	background-color: #1b0067;
	background-image: url(/image/sub/arrow_next_02.png);
	background-repeat: no-repeat;
	background-position: 90px center;
	background-size: 11px 18px;
	border: 1px solid #14004b;
	border-radius: 50px;
	box-sizing: border-box;
	cursor: pointer;

	/* 애니메이션 추가 */
	animation: shake-horizontal 0.4s ease-in-out infinite;
}


.correct_answer {
	position: relative;
	display: inline-block;
	font-weight: 700 !important;
	color: #004dc8;
	line-height: 1.4;
	word-break: keep-all;	
	vertical-align: top;
}

.correct_answer input[type="radio"] {
	vertical-align: top; /* 라디오 버튼이 위에 맞춰지도록 */
	margin-top: 2px; /* 필요시 위치 조절 */
}

.label_correct_answer {
	position: absolute;
	/* right: -70px; */
	/* bottom: 0; */
	width: 92px;
	height: 34px;
	background-image: url(/image/sub/chk_correct_answer.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 92px 34px;
	margin-left: 10px;

	/* 애니메이션 추가 */
	animation: bounce-fade-slide 0.5s ease-out forwards;
}


.wrong_answer {
	position: relative;
	display: inline-block;
	font-weight: 300 !important;
	color: #ff7900;
	line-height: 1.4;
	word-break: keep-all;	
	vertical-align: top;
}

.wrong_answer input[type="radio"] {
	vertical-align: top; /* 라디오 버튼이 위에 맞춰지도록 */
	margin-top: 10px; /* 필요시 위치 조절 */
}

.label_wrong_answer {
	position: absolute;
	/* right: -65px; */
	/* bottom: 0; */
	width: 86px;
	height: 34px;
	background-image: url(/image/sub/chk_wrong_answer.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 86px 34px;
	margin-left: 10px;

	/* 애니메이션 추가 */
	animation: bounce-fade-slide 0.5s ease-out forwards;
}

.quiz_page_end_text {
	margin-top: -30px;
	text-align: center;
	font-family: 'nanummyeongjo', 'Noto Serif KR', serif;
	font-size: 40px;
	font-weight: 700;
	color: #ff7900;
	letter-spacing: -1.25px;
	line-height: 1.4em;
}

.quiz_page_graph {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 600px;
	/* height: 100vh; */
	margin: 30px auto -30px;
	background: #f3f3f3;
}

canvas {
	width: 500px !important;
	height: 500px !important;
}




#quiz_guide_01 img {
  opacity: 0;
  position: absolute; /* 위치 유지 */
  z-index: 100;
}

#quiz_guide_02 img {
  opacity: 0;
  position: absolute; /* 위치 유지 */
  z-index: 100;
}

#quiz_guide_03 img {
  opacity: 0;
  position: absolute; /* 위치 유지 */
  z-index: 100;
}

#quiz_guide_04 img {
  opacity: 0;
  position: absolute; /* 위치 유지 */
  z-index: 100;
}

.guide_comment_01 {
	position: absolute;
	top: -310px;
    left: 671px;
}

.guide_comment_02 {
	position: absolute;
	top: 0px;
	left: -174px;
}

.guide_comment_03 {
	position: absolute;
	top: 50px;
    left: 232px;
}

.guide_comment_04 {
	position: absolute;
	top: -70px;
	left: 738px;
}

/* 왼쪽에서 오른쪽 */
#quiz_guide_01.show-guide .guide_comment_01 {
  animation: fadeInLeft 0.8s ease forwards;
  animation-delay: 0.3s;
}

/* 오른쪽에서 왼쪽 */
#quiz_guide_02.show-guide .guide_comment_02 {
  animation: fadeInRight 0.8s ease forwards;
  animation-delay: 1s;
}

/* 위에서 아래 */
#quiz_guide_03.show-guide .guide_comment_03 {
  animation: fadeInTop 0.8s ease forwards;
  animation-delay: 2s;
}

/* 아래에서 위 */
#quiz_guide_04.show-guide .guide_comment_04 {
  animation: fadeInBottom 0.8s ease forwards;
  animation-delay: 3s;
}

/* 각각의 방향 애니메이션 정의 */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInTop {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInBottom {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}




.page_go {
	position: absolute;
	bottom: 100px;
    right: 25px;
	width: 160px;
	height: 60px;
	font-size: 18px;
	font-weight: 500;
	color: #fff;
	text-align: left;
	text-indent: 40px;	
    line-height: 57px;
	background-color: #0056e0;
	background-image: url(/image/sub/arrow_next_02.png);
	background-repeat: no-repeat;
	background-position: 120px center;
	background-size: 11px 18px;
	border: 1px solid #004dc8;
	border-radius: 50px;
	box-sizing: border-box;
	cursor: pointer;

	/* 애니메이션 추가 */
	animation: shake-horizontal-2 0.4s ease-in-out infinite;
}

.page_go:hover {
	background-color: #0049bd;
	background-image: url(/image/sub/arrow_next_02.png);
	background-repeat: no-repeat;
	background-position: 90px center;
	background-size: 11px 18px;
	border: 1px solid #003d9e;
	border-radius: 50px;
	box-sizing: border-box;
	cursor: pointer;

	/* 애니메이션 추가 */
	animation: shake-horizontal-2 0.4s ease-in-out infinite;
}

@keyframes shake-horizontal-2 {
  0%   { background-position: 120px center; }
  25%  { background-position: 118px center; }
  50%  { background-position: 120px center; }
  75%  { background-position: 122px center; }
  100% { background-position: 120px center; }
}