html {
	-webkit-text-size-adjust: none;
	text-size-adjust: 100%;
	font-size: 14px;
	color:#444444;
	font-family: sans-serif, Arial;
}

:root {
  /* 여기에다 사용하지 말 것.
  --base-font-size: 14px;
  font-size: var(--base-font-size);
  */
}

body { 
background-image:url(); 
background-attachment: fixed; 
background-repeat: no-repeat; 
background-position: center; 
font-size: 14px;
font-family:sans-serif, Arial;
} 

td, div, textarea {
	font-size: 14px;
	font-family: sans-serif, Arial;
}

legend {
	font-size: 1.1rem;
	font-weight: bold;
	color: #666666;
	white-space: nowrap;
}

BODY {scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #C0C0C0;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-shadow-color: #C0C0C0;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #C0C0C0;}

A:link    {color:#444444;text-decoration:none;font-family:Sans-serif;}
A:visited {color:#444444;text-decoration:none;font-family:Sans-serif;}
A:active  {color:#444444;text-decoration:none;font-family:Sans-serif;}
A:hover   {color:blue;text-decoration:none;font-family:Sans-serif; border-bottom:1px solid blue;}

ul, ol {padding-inline-start:1.5em; vertical-align:middle; list-style-type:• margin-top:0px;}
input::placeholder {color:#969696; font-size:12px;}

ol {
  counter-reset: section;
  list-style-type: none;
  padding-inline-start:1.5em;
  text-indent:-1.5em;
}
ol li:before {
  counter-increment: section;
  content: counters(section, ".") ". ";
}

.s_found {background-color:yellow; color:red}
.links {color:blue; cursor:hand;} 
.q_sub {vertical-align:-5%; font-size:10px;}
.qb_u {border-bottom:1px solid black; padding-bottom:1px; padding-left:1px; padding-right:1px;}
.qb_em {font-style:italic;}
.b_red {font-weight:bold; color:red;}
.b_blue {color:blue; font-weight: bold;}
/*.suffix {font-weight:bold; color:red; font-style:italic;}*/
.back_img { 
background-repeat: no-repeat; 
vertical-align:top;
background-size: 99% 99%;
}


.tree {line-height:160%; boder-collapse:collapse; border:1px none red; margin:0px; padding:3px; font-size:14px;}

.box {  padding: 1rem;  max-height: 220px;  overflow-y: auto;  scrollbar-gutter: stable; 
/*     scrollbar-gutter 속성의 기본값은 auto    stable both-edges 함께 사용하면 왼쪽 끝의 영역도 확보함   */}

.strikethrough {
  position: relative;
}

.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
  
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  transform:rotate(-45deg);
}

.mb_strikethrough {
  position: relative;
  margin: 0 2 0 2;
}

.mb_strikethrough:before {
  position: absolute;
  content: "";
  left: -1px;
  top: 60%;
  right: -1px;
  border-top: 1px solid;
  border-color: #61b056;
  
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  transform:rotate(0deg);
}

.mb_strikethrough_red {
	text-decoration:line-through; 
	text-decoration-style:double; 
	text-decoration-color:red; 
	line-height: 100%;
}

.strikediag {
  display: inline-block;
  position: relative;
}
.strikediag::before {
  content: '';
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 0.38em;
  bottom: 0.38em;
  background: linear-gradient(to left top, transparent 45.5%, currentColor 47.5%, currentColor 52.5%, transparent 54.5%);
  pointer-events: none;
}

/*
.cell_strikediag {
  display: table-cell;
  position: relative;
}

.cell_strikediag::before {
  content: '';
  position: absolute;
  left: -0.001em;
  right: -0.01em;
  top: 0.01em;
  bottom: 0.01em;
  background: linear-gradient(to right top, transparent 49.99%, currentColor 51.0%, currentColor 51.0%, transparent 50.01%);
  pointer-events: none;
}
*/

.cell_strikediag {
  position: relative;
  /*min-width: 8rem; */   /* adjust as needed */
  /*min-height: 1rem;*/   /* adjust as needed */
  padding: 0;
  overflow: hidden;
}

/* draw the diagonal */
.cell_strikediag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top right,
    transparent 49.5%, currentColor 50%, transparent 50.5%);
  pointer-events: none;
}

/* text in corners */
.cell_strikediag .top-right {
  position: absolute;
  top: 4px;
  right: 6px;
  white-space: nowrap;
  outline: 0px solid red;
  line-height: 100%;
}

.cell_strikediag .bottom-left {
  position: absolute;
  bottom: 4px;
  left: 6px;
  white-space: nowrap;
  line-height: 100%;
}


.ul_dash {list-style-type:"— "}
.ul_square {list-style-type:"∎ "}
.ul_round_square {
	list-style-type: none;
	
	li {
		position: relative;
		padding-left: 25px;
	}

	li::before {
		content: ""; /* 가상 요소에 빈 콘텐츠 추가 */
		display: block; /* 블록 요소로 설정 */
		position: absolute; /* 절대 위치 지정 */
		top: 15px; /* 수직 위치를 50%로 설정 */
		left: 0; /* 좌측 정렬 */
		transform: translateY(-50%); /* 정확한 수직 중앙 정렬을 위해 Y축으로 -50% 이동 */
		width: 18px; /* 이미지 너비 */
		height: 18px; /* 이미지 높이 */
		background: url("/images/round_square_18.png") no-repeat center center; /* 이미지와 위치 지정 */
		background-size: contain; /* 이미지 크기 조절 */
	}
}

.ul_round_square_w {
	list-style-type: none;
	
	li {
		position: relative;
		padding-left: 25px;
	}

	li::before {
		content: ""; /* 가상 요소에 빈 콘텐츠 추가 */
		display: block; /* 블록 요소로 설정 */
		position: absolute; /* 절대 위치 지정 */
		top: 15px; /* 수직 위치를 50%로 설정 */
		left: 0; /* 좌측 정렬 */
		transform: translateY(-50%); /* 정확한 수직 중앙 정렬을 위해 Y축으로 -50% 이동 */
		width: 18px; /* 이미지 너비 */
		height: 18px; /* 이미지 높이 */
		background: url("/images/round_square_18_w.png") no-repeat center center; /* 이미지와 위치 지정 */
		background-size: contain; /* 이미지 크기 조절 */
	}
}

.page_break_before {
	page-break-before: always;
}

.page_break_after {
	page-break-after: always;
}

.page_no_break {
	page-break-inside: avoid;
}

/********************************************/
* {
	box-sizing:border-box; 
	/*font-family:sans-serif, Arial; */
	/*font-size: var(--base-font-size); 여기에다 사용하면 안 됨. h1~h6 안 먹힘.*/ 
	/*color:#444444;*/
	line-height:2;
}

.q_body {
	outline:0px dotted blue;
}

.radio_button, .choice_number {
	padding:0px; 
	outline:0px none red;
}

.radio_button {
	padding-top:5px;
}

.navigation_bar {
	display: inline-flex;
	align-items: center;
	justify-content:space-between;
	outline:0px none silver;
	width:90%;
}

.arrows {
	font-size:24px;
	width: 2rem;
}

.h_source {
	width:80%;
	text-align:center;
	vertical-align:baseline;
}

.passage {
	background:#fafafa;
	padding: 5px;
	margin:0 10 0 10;
}

.q_quiz {
	padding:10 0 0 10;
	width:98%;
}

.q_multiple_choices {
	padding:5 0 0 5;
	/*width:100%;*/
}

.column_titles_container {
	box-sizing:border-box;
	display: inline-flex;
	flex-flow: row nowrap;
	outline:0px solid gray;
	padding:0px;
	/*background:orange;*/
}

.section_container {
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content:flex-start;
	outline:0px solid silver;
}

.choices_container {
	display: flex;
	flex-flow: row wrap;
	outline:0px solid orange;
	padding:0px;
	/*background:brown;*/
}

.column_core_A, .column_core_B, .column_core_C {
	/*padding:0 0 0 5;*/
	/*margin:0 0 0 5;*/
	outline: 0px solid magenta;
	text-align:justify;
	white-space: nowrap;
}

.one_row_img_container {
	display: flex;
	flex: wrap;
	outline:0px solid lightblue;
	padding:0px;
	justify-content:flex-start;
	width:98%;
}

.choices_img {
	display: flex;
	
	flex-flow: column nowrap;
	justify-content:flex-start;
}

.choice_core_img {
	outline:0px solid green;
}

.one_row_container {
	display: flex;
	flex-flow: row wrap;
	outline:0px solid red;
	padding:0;
	width:98%;
}

.one_row_not_even {
	display: flex;
	flex-flow: row wrap;
	outline:0px solid red;
	padding:0px;
	margin:0px/
	width:100%;
	justify-content: space-between;
}

/*********************************/
.common_row_container {
	display: flex;
	flex-flow: row wrap;
	outline:0px solid red;
	padding:0px;
	margin:0px;
	justify-content: flex-start;
}

.common_cell {
	display: flex;
	outline:0px solid lightblue;
	padding:0px;
}

.pre_space {
	display: flex;
	flex-wrap: nowrap;
	outline:0px solid red;
	width: 3rem;
}

.common_choice_core {
	display: table-cell;
	/*background: #f0f0f0;*/
	text-align: justify;
	margin:0px;
	padding:0px;
}

.radio_cell, .number_cell {
	display: table-cell;
	padding:0px; 
	outline:0px none red;
}

.radio_cell {
	margin-top:0.28rem;
}

/********************************/

.one_fifth_container {
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	outline:0px dotted blue;
	width: 7.5rem;
}

.one_row_cell {
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	outline:0px dotted blue;
	padding:0px;
	margin: 0px;
}

.choice_core {
	/*background: #f0f0f0;*/
	text-align: justify;
	margin:0px;
	padding:0px;
}

.two_rows_container {
	display: inline-flex;
	flex-wrap: wrap;

}

.one_third_container {
	display: inline-flex;
	flex-wrap: nowrap;
	outline: 0px solid brown;

}

.one_third_container:nth-child(5) {
	width: 20rem;
}

.three_rows_container {
	display: flex;
	flex-wrap: wrap;
	outline: 0px dotted blue;
}

.three_rows_container .choice_core {
	outline: 0px solid silver;
}

.half_container {
	display: inline-flex;
	flex-wrap: nowrap;
	outline: 0px solid silver;
	/*width: 19rem;*/
}

.half_container:nth-child(5) {
	display: inline-flex;
	flex-wrap: nowrap;
	outline: 0px solid pink;
	/*width: 39rem;*/
}

.five_rows_container {
	display: flex;
	flex-wrap: wrap;
	outline: 0px dotted red;
	width: 98%;
}

.whole_container {
	display: flex;
	flex-wrap: nowrap;
	outline: 0px solid blue;
	/*max-width: 40rem;*/
}

/*
@media (max-width:550px) {
	.column_titles_container .section_container:nth-child(2) {
		display: none
	}
}
*/

.following_space {
	width:1rem;
	outline:0px solid red;
	/* background:#fafafa; */
}

.dummy_space {
	width: 2rem;
	outline:0px solid red;
}

.quiz_spec {
	float: right;
	display: inline-flex;
	flex-flow: row nowrap;
	align-items: center;
	border-top:1px solid silver;
	border-bottom:1px solid silver;
	margin-right: 1.5rem;
	/*margin-bottom: 1rem;*/
}

.quiz_spec_2 {
	display: inline-flex;
	align-items: center;
}

.qb_qspec_title {
	display: table-cell;
	color:#444444; 
	text-align:right; 
	background-color:#f5f5f5; 
	padding: 5px;  
	white-space:nowrap;
	vertical-align: middle;
	line-height: 100%;
}

.qb_qspec {
	display: table-cell;
	font-size:12px; 
	color:#444444; 
	text-align:left; 
	padding-left:2px; 
	white-space:nowrap;
	line-height: 100%;
}

.leading_space {
	display: flex;
	flex-wrap: nowrap;
	outline:0px solid red;
	width: 3rem;
}

.delimiter {
	width: 3rem;
	text-align:center;
	outline: 0px solid silver;
}

input[type="radio"] {
  width: 1rem; /* Adjust as needed */
  height: 1rem; /* Keep height and width similar for a circular shape */
  /*border-radius: 50%; /* Ensures a circular shape */
  /* Add other styling as desired */
}

.single_header {
	display: flex;
	outline: 0px sold red;
	flex: nowrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.qb_src {
	display: table-cell;
	color:#759540; 
	padding-left: 10px;
	font-size: 0.9rem;
}

.q_source {
	color:#759540; 
	padding-left:0rem;
	font-size:0.9rem;
}

.result_view {
	display: table-cell;
	align-items: center;
	background: #f5f5f5;
	padding: 5p;
}

.article_commentary {
	border: 1px dotted silver;
	padding: 0 5 0 5;
	margin: 5 10 15 10; 
	vertical-align:top;
}

.hidden_radio {
	visibility: hidden;
}

.no_radio {
	display: none;
}

.explanation {
	display: flex;
	flex-flow: column wrap;
	padding: 5px;
	margin: 0 10 0 10;
	outline: 0px solid brown;
}

.response_container {
	display: flex;
	align-items: center;
	border: 1px dotted silver;
	padding: 0px;
	margin: 0px;
	line-height: 100%;
}

.response_container:nth-child(1) {
	display: table-cell;
	border: 0px solid blue;
	margin-top: 1rem;
}

.response_container:nth-child(2) {
	background: #f5f5f5;
	border-width: 1 1 0 1;
}

.result_container {
	display: inline-flex;
	align-items: center;
	border-width: 1 1 0 1; 
	border-style: dotted;
	border-color: silver;
}

.result_container:nth-child(1) {
	border-width: 1 0 0 1; 
}

.result_container:nth-child(3) {
	float: right;
}

.response {
	display: table-cell;
	color: blue;
	font-weight: bold;
	text-align: center;
	padding: 5 10 5 10;
	line-height: 100%;
}

.qb_OX {
	display: table-cell;
	vertical-align:middle;
	padding: 5 10 5 10;
	font-size:1.5rem; 
	font-family:Sans-serif; 
	font-weight:bold; 
	color:red; 
	text-align: center; 
	line-height: 1;
}

.corr_ans_containger {
	display: table-cell;
	background-color:#f5f5f5; 
}

.correct_answer {
	display: table-cell;
	vertical-align: middle;
	padding: 10px;
	line-height: 100%;
	color: blue;
	font-weight: bold;
}
 
.q_commentary {
	display: table-cell;
	padding: 5px;
}

.no_response {
	padding: 5px;
}

.result_title {
	background: #f5f5f5;
	padding: 5px;
}

.multi_header_container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 10;
	/*background: #f5f5f5;*/
	justify-content:space-around;
	border-bottom: 1px solid silver;
}

.q_amount, .examinee {
	padding:5px;
}

.qb_input {
	background-color:#dddddd; 
	border:1px solid silver; 
	font-size:1rem padding:0; 
	font-family:Sans-serif; 
	cursor:hand;
}

.exam_spec {
	display: flex;
	outline: 0px sold red;
	flex: nowrap;
	justify-content: center;
	align-items: center;
	border-top: 0px solid silver;
	border-bottom: 1px solid silver;
	margin: 0 10 0 10;
}

/***** enrolled, statistics 부분 **********************************/
.section_title {
	font-size: 1.5rem; 
	margin-top: 1rem; 
	text-align: left;
}

.section_notice_container {
	display: flex;
	flex-flow: row wrap;	
	justify-content: space-between;
	max-width: 950px;
}

.rows_container {
	border: 0px solid silver;
	max-width: 950px;
}

.cells_container {
	display: flex;
	flex-wrap: nowrap;
}

.type_cells {
	display: table-cell;
	white-space: wrap;
	outline: 1px solid silver;
	width: 18rem;
	padding-left: 0.8rem;
	word-break: break-all;
}

.table_cells {
	display: table-cell;
	white-space: wrap;
	flex: 1;
	text-align: center;
	outline: 1px solid silver;
	min-width: 1.5rem;
	word-break: break-all;
}

.first_row_cells {
	display: table-cell;
	white-space: normal;
	flex: 1;
	text-align: center;
	outline: 1px solid silver;
	min-height: 3rem;
	padding-top: 0.5rem;
	min-width: 1.5rem;
}
/***** header_mb 부분 ******************************/

.the_body {
	z-index:1; 
	max-width: 950px;
	outline: 0px dashed red;
}

.dbl_body {
	z-index:1; 
	max-width: 1900px;
	outline: 0px dashed red;
}


.header_top_container {
	display: flex;
	flex-wrap: wrap;
	outline: 0px solid red;
	justify-content: space-between;
	
	.header_title_cluster {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		
		.favicon_cell {
			display: table-cell;
			aling-self: center;
			width: 32;
		}
	}
}

.header_top_left {
	display: flex;
	flex-flow: column wrap;
}

.header_top_right {
	display: flex;
	flex-flow: column wrap;
	outline: 0px dotted blue;
	justify-content: space-between;
}

.header_title {
	font-family: 맑은고딕;
	font-size: 2rem;
	color: #333333;
	cursor: hand;
	outline: 0px solid red;
	padding: 0 0 0 1rem;
	line-height: 2.5rem;
	outline: 0px solid red;
}

.header_note_left {
	padding: 0 0 0 1rem;
	font-size: 0.85rem;
	color: #888888;
	outline: 0px solid blue;
}

.header_note_right {
	padding: 0 0 0 1rem;
	font-size: 0.85rem;
	outline: 0px solid blue;
}

.enrolled_note_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 950px;
}

.home_menu_container {
	display: flex;
	flex-flow: row wrap;
}

.home_menu {
	display: table-cell;
	flex: 1 1 9rem;
	min-width: 9rem;
	font-size: 1rem;
	background: #f6f6f6;
	outline: 1px solid silver;
	text-align: center;
	height: 2rem;
	cursor: hand;
}

/*
.statistics_body_container {
	max-height: 25rem;
	overflow-y: auto;
}
*/

/*** qbank 부분 *******************************/
.outmost_container {
	max-width: 950px;
	outline: 0px solid red;
}

.qbank_title {
	font-size: 1.5rem; 
	margin-top: 1rem; 
	text-align: center;
}


.bank_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	max-width: 950px;
}

.bank_note {
	padding-left: 5px;
	font-size: 0.9rem;
}

.collecting_options_container {
	border-top: 1px solid silver;
	padding-top: 2px;
	margin: 0px;
	max-width: 950px;
}

.collecting_options {
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: space-between;
	/*justify-content: flex-start;*/
	background: #fffff;
	width: 100%;
	gap: 2px;
	padding: 2px;
}

.collecting_options:nth-child(3) {
	border: 0px solid red;
}

.option_cell {
	outline: 0px solid red;
	vertical-align: middle;
}

.search_cluster {
	display: inline-flex;
	flex-flow: row wrap;
	background: #fafafa;
	outline: 1px solid silver;
	padding: 2px;
	align-items: center;
}

.search_cluster_cell {
	display: table-cell;
	padding: 0px;
	margin: 0px;
	line-height:1;
}

.found_and_reset {
	display: inline-flex;
	flex-flow: row wrap;
	background: #fafafa;
	outline: 1px solid silver;
	padding: 2px;
	align-items: center;
}

.found_cell {
	display: table-cell;
	margin: 0px;
	outline: 0px solid silver;
	background: #ffffff;
	padding: 0 10 0 10;
	/*line-height: 1.1;
	color: blue;*/
}

.reset_button {
	margin-left: 2px;
	padding: 0px;
}

.options_string {
	color: #444444;
	margin-left: 1rem;
}

.input_box_search {
	width: fit-content;
	outline: 1px solid blue;
	white-space: nowrap;
}

.search_field_box {
	width: fit-content;
	outline: 1px solid red;
}

.search_cluster_cell .qb_search_box {
	outline: 0px solid red;
	width: 15rem; 
	line-height: 0.8; 
	padding: 0px;
	vertical-align: top;
}

.option_cell .qb_search_box::placeholder {
	padding: 0px;
	margin: 0px;
	line-height: 1;
}

.search_cluster_cell .search_tip {
	vertical-align: top;
	padding: 0px;
	border:0px; 
	width:14px; 
	height:14px; 
	background:transparent; 
	opacity:65%;
}

.search_field {
	margin: 2px;
}

.miscellaneous_buttons .btn {
	display: table-cell;
	vertical-align: middle;
}

.qbank_main_table {
	display: flex;
	flex-flow: column nowrap;
	max-width: 950px;
	justify-content: flex-start;
	margin: 2px;
}


.qbank_main_table .qb_title_row {
	display: flex;
	flex-flow: row wrap;
	outline: 0px solid silver;
	align-items: center;
	padding: 0px;
	border-bottom: 1px solid silver;
	
	.ttl_applicants_cell {
		font-size: 0.8rem;
	}
}

.qbank_main_table .rows_container {
	display: flex;
	flex-flow: row wrap;
	outline: 0px solid silver;
	align-items: center;
	padding: 0px;
	border-bottom: 1px solid silver;
}
	
.title_cell {
	height: 2.5rem;
	font-size: 0.9rem;
	line-height: 120%;
	padding-top: 2px;
	background: #f5f5f5;
	border-top: 1px solid silver;
	align-self: center;
	vertical-align: middle;
}

.check_cell, .no_cell, .qid_cell, .quiz_cell, .topic_cell, .type_cell, .level_cell, .qpoint_cell, .ttl_applicants_cell, .correct_race_cell, .attempts_cell, .result_cell, .delete_cell, .date_cell {
	display: table-cell;
	outline: 0px solid silver;
	padding-left: 2px;
	/*line-height: 1;*/
}

.level_cell, .qpoint_cell, .check_cell, .no_cell, .qid_cell, .ttl_applicants_cell, .correct_rate_cell, .attempts_cell, .result_cell, .delete_cell, .date_cell {
	text-align: center;
}



.check_cell { 
	width: 3rem;
	flex: 1;
	outline: 0px solid silver;
}

.title_cell:nth-child(1) { 
	cursor: hand;
}

.title_cell:nth-child(3) {
	cursor: auto;
}

.no_cell, .qid_cell {
	width: 3.9rem;
	flex: 1.3;
	word-break: break-all;
	min-width: 2.5rem;
}

.quiz_cell {
	width: 15rem;
	flex: 5.5;
	cursor:hand; 
	min-width: 9rem;
}

.quiz_cell:nth-child(1) {
	cursor: pointer; 
}

.type_cell {
	width: 12rem;
	flex: 4;
	min-width: 6rem;
}

.topic_cell {
	width: 18.9rem;
	flex: 7;
	min-width: 6rem;
}

.level_cell{
	width: 3.6rem;
	flex: 1.2;
}

.qpoint_cell {
	width: 2.7rem;
	flex: 0.9;
}

.ttl_applicants_cell, .correct_rate_cell, .attempts_cell, .result_cell {
	width: 4.5rem;
	flex: 1.5;
}

@media (max-width: 53rem) { 
	.correct_rate_cell {
		display: none;
	}
}

@media (max-width: 51rem) { 
	.ttl_applicants_cell {
		display: none;
	}
}

@media (max-width: 47rem) { 
	.no_cell, .qid_cell{
		display: none;
	}
}

@media (max-width: 44rem) { 
	.level_cell, .attempts_cell {
		display: none;
	}
}

@media (max-width: 42rem) { 
	.topic_cell {
		display: none;
	}
}

input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	cursor: hand;
	margin: 7 0 7 0;
}
/*** zeroboard login 부분 **********************************************/
.outlogin_box {
	outline: 0px solid blue;
}

.login_container {
	display: flex;
	flex-flow: row wrap;
	flex: 1; 
	justify-content: flex-end;
	align-items: center;
	padding:0;
	border:0;
	border-color:#111111;
}

.login_cell {
	display: inline-flex;
}

.logged {
	display: table-cell;
}

/****** 홈 첫화면 관련 부분 **************/
.contents_container {
	display: flex;
	flex-flow: row wrap;
	margin: 5 0 5 0;
	max-width: 950px;
}

.left_menu_container {
	display: table;
	flex-flow: column wrap;
	flex: 0.8	;
	justify-content: flex-start;
	outline: 1px solid silver;
	margin: 0 5 0 0;	
}

@media (max-width: 45rem) {
	.left_menu_container {
		display: none;
	}
}

.left_menu_container .left_menu_title {
	outline:1px solid #aaaaaa; 
	background:#f5f5f5; 
	text-align:center;
}

.left_menu_container .left_menu_items_container {
	display: table;
	flex-flow: row nowrap;
}

.left_menu_container .left_menu_items_container .bullet {
	display: table-cell;
	padding: 0 5 0 5;
}

.left_menu_container .left_menu_items_container .left_menu_item {
	display: table-cell;
	white-space: nowrap;
	padding: 0 10 0 0;
}

.contents_container .right_contents_notice {
	display: table-cell;
	outline: 1px solid silver;
	padding: 5px;
	flex: 2.2;
	min-width: 30rem;
}

.contents_container .right_contents_photo {
	outline: 0px solid silver;
	margin-left: 5;
}

@media (max-width: 55rem) {
	.right_contents_photo {
		display: none;
	}
}


/******* footer 부분 ****************************/
.footer_container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	max-width: 950px;
	width: 100%;
}

.footer_container_dbl {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	max-width: 1900px;
	outline: 0px solid #def;
}

.page_view_container {
	display: inline-flex;
	flex-flow: row wrap;
	flex: 2;
	justify-content: flex-start;
	outline: 0px solid silver;

	.page_view_title {
		display: table-cell;
		width: fit-content;
		outline: 0px solid silvr;
		background: #f5f5f5;
		padding: 0 5 0 5;
		color: #888888;
		font-size: 0.8rem;
	}

	.page_view_numbers {
		display: table-cell;
		width: fit-content;
		outline: 0px solid blue;
		padding: 0 5 0 5;
		color: #888888;
		font-size: 0.8rem;
	}
}

.copy_right_declare {
	display: table-cell;
	color: #888888;
	font-size: 0.8rem;
	flex: 3;
	text-align: center;
}

.last_items {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	margin-right: 1rem;
	flex: 2;

	.private_info {
		display: table-cell;
		width: fit-content;
		padding: 0 5 0 5;
	}
	.copy_right_claim {
		display: table-cell;
		width: fit-content;
		padding: 0 5 0 5;
	}

}


/****** mybook 관련 부분 **************************/
.mybook_body {
	outline: 0px solid orange;
	max-width: 950px;
}

.mybook_dbl_body {
	outline: 0px solid blue;
	max-width: 1900px;
}

.mybook_main_container {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	outline: 0px solid red;
	min-height: 56rem;
	gap: 2px;
}

.mybook_main_container_dbl {
	display: flex;
	flex-flow: row nowrap;
	/*justify-content: space-between;*/
	outline: 0px solid red;
	gap: 7px;
}


.folder_box {
	display: flex;
	flex-flow: column nowrap;
	vertical-align: top;
	outline: 1px solid silver;
	width: 17.5rem;
	overflow: auto;
	padding: 0 5 0 5;
}

.dbl_folder_box {
	display: flex;
	flex-flow: column nowrap;
	vertical-align: top;
	outline: 1px solid silver;
	width: 20rem;
	overflow: auto;
	padding: 0 5 0 5;
	flex: 1.5;
}


.detail_box {
	outline: 1px solid silver;
	width: 50rem;
}

.dbl_detail_box {
	outline: 0px solid silver;
	flex: 8;
}


.mybook_head_container {
	display: flex;
	flex-flow: row wrap;
	background: #f5f5f5; 
	margin: 5 0 5 0;
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;
	align-items: center;
	line-hright: 120%;
	max-width: 950px;
}

.mybook_dbl_head_container {
	display: flex;
	flex-flow: row wrap;
	background: #f5f5f5; 
	margin: 5 0 5 0;
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;
	line-hright: 100%;
	max-width: 1900px;
	align-items: center;
}

.mybook_intro_container {
	display: table;
	flex-flow: row nowrap;
	align-self: center;
	border-bottom: 1px solid silver;
	width: 100%;

	.mybook_intro_cell {
		display: table-cell;
		font-size: 0.8rem;
		color: #007fff;
	}
}
	
.form_box {
	margin: 0px;
	padding: 0px;
	line-height: 1;
	outline: 0px dotted red;
}

.form_box:nth-child(1) {
	flex: 0.6;
}

.form_box:nth-child(2) {
	flex: 1;
	outline: 0px solid blue;
}

.form_box:nth-child(3) {
	flex: 0.1;
}


.mybook_title_box {
	display: flex;
	flex-flow: row nowrap;
	min-width: 18rem;
	max-width: 39rem;
	background: #ffffff;
	outline: 1px solid silver;
	justify-content: center;
}

.book_title_header {
	display: table-cell;
	font-size: 0.9rem;
	color: #666666;
	text-align: right;
	background: #f5f5f5;
	padding-right: 0.2rem;
	padding-left: 1rem;
}

.book_title {
	display: table-cell;
	font-size: 1.5rem; 
	font-weight:bold; 
	vertical-align:middle
	line-height: 1;
	background: transparent;
	padding: 0px;
	margin: 0px;
	color: #444444;
}

.mybook_bookmark_box {
	display: flex;
	flex-flow: row nowrap;
	outline: 0px solid red;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	padding-right: 5px;
}

.double_page_button, bookmark_button {
	display: table-cell;
	width: fit-content;
	
}

.mybook_search_box_container {
	display: flex;
	flex-flow: row nowrap;
	outline: 0px solid orange;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	padding-left: 10px;
}

.search_key_input_box, .search_key_submit, .search_option_box, .and_or_box {
	display: table-cell;
	white-space: nowrap;
}

/**** items.php 부분 *****************************/
.mb_items_title_row {
	display: flex;
	flex-flow: row wrap;
	background: #fafafa;
	border-bottom: 1px solid silver;
}

.list_rows {
	display: flex;
	flex-flow: row wrap;
	border-bottom: 1px dotted #ddd;
}

.mb_items_page, .mb_items_update, .mb_items_read {
	display: table-cell;
	text-align: center;
	outline:0px solid blue;
}

.mb_items_title {
	display: table-cell;
	outline:0px solid blue;
	max-width: 38rem;
	flex: 13;
	padding-left: 5px;
}

.mb_items_title_row .mb_items_title {
	text-align: center;
}	
.mb_items_page {
	width: 3rem;
	flex: 1;
}

.mb_items_update {
	width: 6rem;
	flex: 2;
}

.mb_items_read {
	width: 3rem;
	flex: 1;
	align-self: center;
}

@media (max-width: 58rem) {
	.mb_items_read {
		display: none;
	}
}

@media (max-width: 55rem) {
	.mb_items_update {
		display: none;
	}
}

/*
@media (max-width: 52rem) {
	.mb_items_page {
		display: none;
	}
}
*/

@media (max-width: 45rem) {
	.folder_box, .dbl_folder_box {
		display: none;
	}
}

.items_body {
	min-height: 52rem;
	outline: 0px solid red;
}

.page_indexing_container {
	display: flex;
	flex-flow: row wrap;
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;
	max-width: 54rem;
	justify-content: space-between;
	align-items: center;
	background: #f5f5f5;

	.page_indexing_box {
		display: table-cell;
		flex: 0.5;
		margin: 0 5 0 5;
		outline: 0px solid cyan;
	}

	.page_jump {
		display: table-cell;
		flex: 1;
		padding: 0 5 0 5;
		margin: 0 5 0 5;
		line-height: 1;
		outline: 0px solid orange;
	}


	.edit_options_box {
		display: flex;
		flex: 2;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
		outline: 0px solid red;
		padding-right: 5px;
	
		.form_container {
			display: table-cell;
			margin: 0px;
			padding: 0px;
			line-height: 1;
			outline: 0px dotted red;
		}
	}
}

.dual_page_indexing_container {
	display: flex;
	flex-flow: row wrap;
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;
	justify-content: space-around;
	align-items: center;
	background: #f5f5f5;

	.page_jump_dbl {
		display: table-cell;
		padding: 0;
		margin: 0;
		line-height: 1;
		outline: 0px solid orange;
	}

	.admin_only_container_dbl {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center;
		background: #f5f5f5;
		padding: 0 5 0 5;
		border-bottom: 0px solid silver;
		/*gap: 2rem;*/

		.label_change_box_dbl, .page_move_box_dbl {
			display: table-cell;
			padding: 0px;
		}

		.edit_options_box_dbl {
			display: flex;
			align-items: center;
			outline: 0px solid red;
			gap: 10px;
			gap: 2rem;
	
			.add_next_cell {
				display: table-cell;
				outline: 1px solid blue;
				padding: 0px;
				margin: 0px;
				background: #ffffff;
			}

			.form_container {
				display: table-cell;
				margin: 0px;
				padding: 0px;
				line-height: 1;
				outline: 0px dotted red;
			}
		}
	}
}




input[type="number"] {
	height: 1.35rem;
	width: 3rem;
	text-align: right;
}

button[type="submit"] {
	height: 1.5rem;
	line-height: 1;
	padding: 2px;
	margin: 0px;
}

.admin_only_container {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	background: #f5f5f5;
	padding: 0 5 0 5;
	border-bottom: 1px solid silver;
}


.label_change_box, .page_move_box {
	display: table-cell;
	filex: 1;
	padding: 0 5 0 5;
}


/******** d_tree 부분 ******************************************************/

.tree {
	display: table-cell;
	outline:0px solid red; 
}

.tree:nth-child(1) {
	white-space: nowrap;	
}

.closed_folder {
	width:12px; 
	height:12px; 
	border: 0px;
}

.opened_folder {
	width:12px; 
	height:14px; 
	border: 0px;
}

.item_icon {
	width:12px; 
	height:14px; 
	border: 0px;
	margin-top: 4px;
}

.root_icon {
	width: 14px;
	height: 16px;
	vertical-align: baseline;
	border: 0px;
	margin-top: 6px;
	opacity: 80%;
}


.root_row {
	display: flex;
	flex-flow: row nowrap;
	background: #f5f5f5;
	outline: 1px solid silver;
	
	.root_img_cell {
		display: table-cell;
		outline: 0px solid blue;
		padding-top: 1px;
		color: white;
		white-space: nowrap;
		margin-left: 0px;
		font-size: 1px;
	}

	.root_name_cell {
		display: table-cell;
		outline: 0px solid brown;
		margin-left: 3px;
	}
}
	
.item_row {
	display: inline-flex;
	flex-flow: row nowrap;
	outline: 0px solid #f2f2f2;
	font-size: 1px;
}

.icon_cell {
	display: table-cell;
	outline:1px dotted #f0f0f0; 
	white-space: nowrap;
	/*color: #ffffff;*/
	margin-top: 4px;
}

.prefix {
	display: table-cell;
	outline:0px dotted blue; 
	font-size:0.9rem;
	white-space: wrap;	
	margin-top: 3px;
	margin-left: 2px;
}

.item_title_cell {
	display: table-cell;
	outline:0px solid red; 
	white-space: wrap;	
	margin-left: 3px;
}

.item_focused {
	background: #def;
}

.item_not_focused {
	background: #ffffff;
}


/******** mybook read 부분 ****************************/
.mb_read_body {
	display: flex;
	flex-flow: column wrap;
	max-width: 50rem;
	border: 0px solid red;
}

.mb_dual_read_body {
	outline: 0px dashed brown;
}

.read_navigator_container {
	outline: 0px solid brown;
	border-bottom: 0px solid silver;
}

.navigator_rows {
	display: flex;
	flex-flow: row nowrap;
	border-bottom: 0px solid silver;
}

.navigator_cell {
	flex: 1;
	white-space: nowrap;
	
	a:hover { 
		color: blue;
		border-bottom: 1px solid blue;
	}
}

.read_navigator {
	font-size: 12px;
	font-weight: normal;
}

.page_container {
	display: flex;
	flex-flow: column nowrap;
	outline: 1px solid silver;
	max-height: 1200px;
	overflow: auto;
}

.print_page_container {
	display: flex;
	flex-flow: column nowrap;
	outline: 1px solid silver;
	margin: 1rem;
	/*max-height: 1000px;*/
	overflow: auto;
}

.mb_dual_page_container {
	display: flex;
	flex-flow: row nowrap;
	flex: auto;
	/*justify-content: space-between;*/
	gap: 0.5rem;
	outline: 0px solid red;
	
	
	.single_page_container_l {
		outline: 1px solid silver;
		flex: 4;
		max-height: 1200px;
		//min-height: 56rem;
		overflow:auto;
	}
	
	.single_page_container_r {
		outline: 1px solid silver;
		flex: 4;
		max-height: 1200px;
		//min-height: 56rem;
		overflow:auto;
	}
}


.mb_read_title_row {
	display: flex;
	flex-flow: row nowrap;
	outline: 0px solid cyan;
	align-items: center;
	border-bottom: 1px solid silver;
	background: #f5f5f5;
	justify-content: space-between;

	.read_title_cell {
		display: table-cell;
		outline: 0px solid red;
		padding-left: 5px;
		vertical-align: middle;
		flex: 7.5;
		line-height:2.5;
	}

	.dual_read_title_cell {
		display: table-cell;
		outline: 0px solid red;
		padding-left: 5px;
		vertical-align: middle;
		flex: 8;
		line-height:2;
	}
	
	.hidden_page {
		color: red;
	}
	
	.link_cell {
		display: table-cell;
		outline: 0px solid blue;
		text-align: right;
	}
	
	.bookmark_cell {
		display: table-cell;
		flex: 1;
		background: transparent;
		outline: 0px solid blue;
		align-items: center;
	}
}


.read_main_contents {
	display: table-cell;
	flex-flow: column nowrap;
	font-size: unset;
	padding: 10px;
	border-bottom: 1px solid silver;
	
	.sub_items_container {
		display: flex;
		outline: 0px solid blue;
		
		.sub_item_rows {
			display: flex;
			/*margin-left:3em; 
			text-indent:-3em;*/
			text-align:justify;
			outline: 0px solid red;
			min-width: 10rem;
		}
	}
}

.dbl_edit_read_main_contents {
	display: table-cell;
	flex-flow: column nowrap;
	font-size: unset;
	padding: 5px;
	border-bottom: 1px solid silver;
	width: 100%;
	height: 1200px;
	overflow: auto;
	
	.sub_items_container {
		display: flex;
		outline: 0px solid blue;
		
		.sub_item_rows {
			display: flex;
			/*margin-left:3em; 
			text-indent:-3em;*/
			text-align:justify;
			outline: 0px solid red;
			min-width: 10rem;
		}
	}
}

.read_page_stats {
	display: flex;
	flex-flow: row wrap; 
	align-items: center;
	outline: 1px solid silver;
	background: #f5f5f5;
	
	.page_cell {
		display: table-cell;
		flex: 5;
		color: #999999;
		padding-left: 5px;
	}
		
	.update_cell {
		display: table-cell;
		color: #999999;
		padding: 0 10 0 10;
	}
	
	.view_cell {
		display: table-cell;
		color: #999999;
		padding: 0 10 0 10;
	}

	.bookmark_cell {
	display: table-cell;
	flex: 0.3;
	outline: 0px solid magenta;
	background: transparent;
	outline: 0px solid blue;
	}
}

/******* s_tree 부분  *************************************************/
.s_result_container {
	display: flex;
	border: 1px solid silver;
	background: #f5f5f5;
	justify-content: space-between;
	align-items: center;
	
	.s_result {
		display: table-cell;
		padding: 0 5 0 5;
		outline: 1p solid gray;
	}
}

.d_folder {
	display: flex;
	flex-flow: column nowrap;
	padding: 5px;
	max-width: 17.5rem;
	margin:0px; 
	padding:0px; 
	overflow-x:hidden; 
	overflow-y:hidden; 
	border-top:1px solid silver;
	
	.s_rows {
		display: table-cell;
		padding-left: 10px;
	}
}

/******** edit.php 부분 ************************************/
.editor_body_container {
	display: flex;
	flex-flow: column nowrap;
	width: 50rem;
}

.editor_head_container {
	display: flex;
	flex-flow: column nowrap;

	.currently_editing_page {
		text-align:center;
	}
	
	.editor_navigator_row {
		display: inline-flex;
		justify-content: space-between;
	}
	
	.editor_navigator_prev {
		display: table-cell;
		text-align: left;
	}
	
	.editor_navigatior_next {
		display: table-cell;
		text-align: right;
	}
}

.editor_customized_toolbox {
	display: flex:
	flex-flow: column nowrap;
	background: #f5f5f5;
	border-top: 1px solid silver;
	
	.editor_title_row {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 5 0 5;
	
		input[type="text"] {
			height: 1.5rem;
		}

		.editor_title_cell {
			display: table-cell;
			padding-left: 5px;
		}
		
		.title_type_cell {
			display: table-cell;
		}

		.count_in_cell {
			display: table-cell;
		}
		
		/*
		select[title_type] {
			height: 1.5rem;
		}
		*/

		select {
			height: 1.5rem;
		}
	}

	.tool_cell {
		display: table-cell;
	}
	
	.customized_tools_row {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: flex-start;
		padding: 0 5 0 5;
		gap: 4px;
	
		.cell_strikediag {
			width: 3rem;
		}
	}

	button {
		cursor: hand;
		vertical-align: middle;
		padding: 0px;
		margin: 0px;
		line-height: 100%;
		font-size: 12px;
		height: 1.5rem;
		width: 1.5rem;
	}
}

.html_editor_container {
	display: block;
	
	textarea {
		word-break: keep-all;
	}	
}

.editor_footer {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	
	.finish_cell {
		display: table-cell;
	}
	
	.add_one_cell {
		display: table-cell;
	}
}

.temp {
	display: flex;
}

.editor_body_container_dbl {
	display: flex;
	flex-flow: row wrap;
	gap: 0.5rem;
	
	.page_container {
		display: flex
		flex-flow: column nowrap;
		flex: 4;
		outline: 1px solid blue;
		padding: 5px;
		/*height: 63rem;*/
		overflow: auto;
	}
	
	.editor_body_container {
		display: flex;
		flex-flow: column nowrap;
		flex: 4;
		outline: 1px solid silver;
		align-items: center;
	}
}

.title_type_cell, .count_in_cell {
	select {
		height: 1.5rem;
		padding: 0px;
		margin-top: 5px;
	}
}
/******** cart.php 부분 *********************************/
.cart_title_row {
	text-align: center;
	font-size: 1.5rem;
}

.icons_row {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	gap: 0.1rem;
	
	.icon_cell {
		display: table-cell;
	}
}

.cart_body_container {
	display: flex;
	flex-flow: row wrap;
	
	.title_row {
		display: table;
		flex-flow: row wrap;
		outline:0px solid silver;
		background: #f5f5f5;
		align-items: center;
		border-bottom: 1px solid silver;
	}
	
	.rows_container {
		display: flex;
		flex-flow: row wrap;
		outline: 0px solid silver;
		align-items: center;
		padding: 0px;
		border-bottom: 1px solid silver;
	}
	
	.no_cell {
	width: 2.4rem;
	flex: 0.8;
	word-break: break-all;
	min-width: 2.5rem;
	}
	
	.check_cell { 
		width: 2.4rem;
		flex: 0.8;
		outline: 0px solid silver;
	}

	.delete_cell {
		display: table-cell;
		width: 2.1rem;
		flex: 0.7;
		outline: 0px solid silver;
	}

}

/******** personal_quiz_record.php 부분 ******************************************/
.cart_title_row {
	outline: 0px solid silver;
	max-width: 950px;
}

.user_section {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	max-width: 950px;
	gap: 1rem;
	
	.user_info_box {
		display: table-cell;
		white-space: nowrap;
	}
	
	.selecting_box {
		display: table-cell;
		white-space: nowrap;
	}
}

.personal_record_body {
	display: flex;
	flex-flow: column nowrap;
	max-width: 950px;

	.pr_title_row {
		display: flex;
		flex-flow: row wrap;
		background: #f5f5f5;
		align-items: center;
		border-bottom: 1px solid silver;
		text-align: center;
	}

	.no_cell, .qid_cell, .quiz_cell, .topic_cell, .type_cell, .level_cell, .qpoint_cell, .attempts_cell, .result_cell {
		display: table-cell;
		outline: 1px solid silver;
	}

	.level_cell, .qpoint_cell, .no_cell, .qid_cell, .attempts_cell, .result_cell, .date_cell {
		text-align: center;
	}

		.pr_title_cell {
			display: table-cell;
			height: 2.5rem;
			font-size: 0.9rem;
			line-height: 120%;
			background: #f5f5f5;
			border-top: 1px solid silver;
			padding-top: 3px;
		}

	.rows_container {
		display: flex;
		flex-flow: row wrap;
		outline: 0px solid silver;
		align-items: center;
		padding: 0px;
		border-bottom: 0px solid silver;		
	}
	

	/*
	.no_cell {
		width: 2.4rem;
		flex: 0.8;
		word-break: break-all;
	}
	*/

	.no_cell, .qid_cell {
		width: 3rem;
		flex: 1;
		word-break: break-all;
		min-width: 2.5rem;
	}

	.quiz_cell {
		width: 12rem;
		flex: 4;
		cursor:hand; 
		min-width: 9rem;
		vertical-align: middle;
	}

	.quiz_cell:nth-child(1) {
		cursor: pointer;
	}

	.type_cell {
		width: 10.2rem;
		flex: 3.4;
		min-width: 6rem;
	}

	.topic_cell {
		width: 18rem;
		flex: 6;
		min-width: 6rem;
	}

	
	.level_cell{
		width: 3rem;
		flex: 1;
	}

	.date_cell {
		width: 4.8rem;
		flex: 1.6;
		word-break: break-all;
	}
	
	.attempts_cell, .result_cell {
		width: 2.4rem;
		flex: 0.8;
	}
	
media (max-width: 53rem) { 
	.correct_rate_cell {
		display: none;
	}
}

@media (max-width: 51rem) { 
	.ttl_applicants_cell {
		display: none;
	}
}

@media (max-width: 47rem) { 
	.no_cell, .qid_cell{
		display: none;
	}
}

@media (max-width: 44rem) { 
	.level_cell, .attempts_cell {
		display: none;
	}
}

@media (max-width: 42rem) { 
	.topic_cell {
		display: none;
	}
}	
}

.page_indexing_row {
	text-align: center;
}

/***********statistics.php 관련 부분*************************************************/
.statistics_body {
	display: table;
	max-width: 950px;
	
	.stats_user_section {
		display: flex;
		max-width: 950px;
		outline: 0px solid silver;
		justify-content: space-between;
		
		.user_info_box, .selecting_box {
			display: table-cell;
			flex: 1;
			outline: 0px solid silver;
		}
		
		.selecting_box {
			text-align: right;
			align-self: center;
		}
	}

	.type_cell {
		text-align: left;
		font-size: 0.9rem;
	}

	.table_cells {
		test-align: center;
		min-width: 2.8rem;
		font-size: 0.9rem;
		outline: 0px;
		line-height: 200%;
		padding: 0px;
		margin: 0px;
	}
	
	.first_row_cells {
		display: table-cell;
		flex: 1;
		text-align: center;
		outline: 0px solid silver;
		min-height: 3rem;
		padding-top: 0rem;
		min-width: 1.5rem;
	}

	.blue {
		/*color: #0047ab;*/  /* cobalt blue */
		color: #007fff;		/* azure */
		cursor: default;
	}
	
}

/******** quiz_add.php 부분 ***************************************************************/
.outmost_box {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	max-width: 1140px;
	/*gap: 0.1rem;*/
	
	textarea {
		outline: 1px solid silver;
	}
}

.qb_edit_title {
	display: table-cell;
	font-weight: bold;
	padding: 3px;
	margin-right: 5;
	background: #f5f5f5;
}

.icons_cluster {
	display: table-cell;
	gap: 2px;
	background: #f5f5f5;
}

.editor_icons {
	display: table-cell;
	height: 1.5rem;
	border: 0px;
	padding: 1px;
	margin: 0;
	background: #f5f5f5;
	line-height: 120%;
	cursor: hand;
}

.editor_icon_img {
	height: 14px;
	margin: 0px;
	padding: 0px;
}
	
.left_box, .right_box {
	display: flex;
	flex-flow: column wrap;
	flex: 1;
	max-width: 570px;
	margin: 3px;
	outline: 0px solid silver;
}

.passage_box {
	display: flex;
	flex-flow: column wrap;
	margin-bottom: 2px;
	
	.passage_header_row {
		display: flex;
		outline: 1px solid silver;
		background: #f5f5f5;
		padding: 1 0 1 0;
		
		.selecting_box {
			text-align: right;
			align-self: center;
		}
	}

	.passage_container {
		display: flex;
		flex-flow: column wrap;
		overflow: auto;
		max-height:300px;
		background: #ffffff;
		outline: 1px solid silver;

		.passage_cell, .p_commentary_cell {
			width: 99%;
		}
	}		
}


.quiz_box {
	display: flex;
	flex-flow: row wrap;
	margin: 2 0 2 0;
	
	.quiz_header {
		display: flex;
		flex-flow: row wrap;
		background: #f5f5f5;
		width: 100%;
		outline: 1px solid silver;
		
		.q_order_cell {
			display: table-cell;
		}
		
		.quiz_id_cell {
			display: table-cell;
			padding: 0 3 0 3;
		}
		
	}
	
	.quiz_main_cell {
		display: table-cell;
		margin-bottom: 2px;
		outline: 1px solid silver;
	}
}

.q_commentary_box {
	display: flex;
	flex-flow: column wrap;
	
	.q_commentary_header {
		display: flex;
		flex-flow: row wrap;
		background: #f5f5f5;
		outline: 1px solid silver;
	}
	.q_commentary_cell {
		display: table-cell;
	}
	
}

.spec_row {
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	outline: 1px solid silver;
	background: #f5f5f5;
	padding: 0px;
	margin: 0 0 2 0;
	
	.spec_cluster {
		display: flex;
		flex-flow: row nowrap;
		padding: 2px;
	
		.spec_title {
			display: table-cell;
			padding: 2 5 2 2;
		}
	
		.selecting_box {
			display: table-cell;
			text-align: right;
			align-self: center;
		}
	}
	
	.spec_manager {
		display: flex;
		align-self: center;
	}
}

.choices_cluster {
	display: flex;
	flex-flow: column wrap;
	width: 100%;
	margin: 2 0 2 0;
	
	.choices_header {
		display: flex;
		flex-flow: row wrap;
		width: 100%;
		outline: 1px solid silver;
		background: #f5f5f5;
	}
	}

.signle_choice_cluster {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	outline: 1px solid silver;
	
	
	.icons_column {
		display: table-cell;
		padding: 2px;
		background: #f5f5f5;
		text-align: center;
		width: 2rem;
	}
	
	.choice_self {
		display: table-cell;
		width: 100%;
		
	}
}

.answer_cluster {
	display: table;
	outline: 1px solid silver;
	background: #f5f5f5;	
	margin-top: 2px;
}

.common_icons_cluster {
	background: #f5f5f5;
	outline: 1px solid silver;
}

.map_area {
	background: #f9f9f9;
	outline: 1px solid silver;
}

/*********Advance Grammar를 위한 부분**************************************/
.unit_container {
	display: flex;
	flex-flow: column nowrap;
	margin: -10px;
	
	.unit_rows_cluster {
		display: flex:
		flex-flow: column nowrap;
		border-bottom: 1px solid silver;
		padding: 0px;
	
		.unit_single_row {
			display: inline-flex;
			flex-flow: row nowrap;
			width: 100%;
			page-break-inside: avoid;			
			
			.subunit_number {
				display: table-cell;
				background: #61A27C;
				font-weight: bold;
				color: white;
				font-size: 1.1rem;
				padding: 5px;
				text-align: right;
				flex: 0.8;
			}
			
			.subunit_body {
				position: relative;
				display: table-cell;
				padding: 5px;
				background: #E6F0E3;
				flex: 19;
				
				.subunit_title_row {
					display: inline-flex;
					flex-flow: row nowrap;
					justify-content: space-between;
					width: 100%;
					
					.subunit_title_cell {
						display: table-cell;
						color: green;
						font-weight: bold;
						font-size: 1.1rem;
					}
				}
				
				.reminder_cell {
					float: right;
					background: #61B056;
					color: white;
					font-weight: bold;
					border-radius: 10px;
					padding: 0 10 0 10;
					font-size: 0.9rem;
					vertical-align: middle;
					align-self: center;
					line-height: 130%;
				}

				
				.inner_box_20{
					float: right;
					padding: 5px;
					background: #ffffff;
					font-weight: bold;
					border: 2px solid #61B056;
					line-height: 130%;
					width: 17rem;
				}

				.inner_box_25{
					float: right;
					padding: 5px;
					background: #ffffff;
					font-weight: bold;
					border: 2px solid #61B056;
					width: 22rem;
					line-height: 130%;
				}

				.inner_image_box {
					top: 50px;
					right: 50px;
					width: 200px;
					height: 200px;
					border: 0px solid red;
					background-repeat: no-repeat; 
					vertical-align:top;
					background-size: 100% 100%;
				}
			}				
		}
	}
}


/*****************************************/

.quiz_unit_container {
	display: flex;
	flex-flow: row nowrap;
	margin: -8px;
	
	.quiz_unit_clm {
		display: flex;
		flex-flow: column nowrap;
		padding: 5px;
		flex: 0.8;

		.quiz_unit_cell {
			display: table-cell;
			background: #00793E;
			color: white;
			font-weight: bold;
			border-radius: 10px;
			padding: 0 10 0 10;
			font-size: 1rem;
			vertical-align: middle;
			align-self: center;
		}
				
	}
	
	.quiz_body_clm {
		display: flex;
		flex-flow: column nowrap;
		outline: 0px solid silver;
		padding: 5px;
		flex: 20;
		
		.quiz_request {
			display: table-cell;
			flex-flow: row wrap;
			font-weight: bold;
		
			.quiz_refer_cell {
				display: inline-flex;
				background: #61B056;
				color: white;
				font-weight: bold;
				border-radius: 10px;
				padding: 0 10 0 10;
				margin: 0 5 0 5;
				font-size: 0.9rem;
				vertical-align: middle;
				align-self: center;
				line-height: 140%;
			}
		}
		
		.items_box {
			float: right;
			font-weight: bold;
			border-radius: 10px;
			padding: 0 10 0 10;
			vertical-align: middle;
			align-self: flex-start;
			border: 2px solid #61B056;
			max-width: 100%;
		}
		
		.quiz_container {
			display: flex;
			flex-flow: row nowrap;
			outline: 0px solid blue;
			justify-content: flex-start;
			
			.quiz_no_cell {
				display: table-cell;
				text-align: right;
				max-width: 1.7rem;
				min-width: 1.7rem;
				padding-right: 0.5rem;
			}
			
			.quiz_rows_container {
				display: table;
				flex-flow: column nowrap;
				outline: 0px solid red;
			
				.quiz_rows, .quiz_dialogue_rows {
					display: inline-flex;
					flex-wrap: nowrap;
					
					.row_order_cell {
						display: table-cell;
						width: 1.5rem;
						color: #444444;
						font-family: "Comic Sans MS", "Comic Sans", cursive;
						align-self: middle;
					}
					
					.little_uppercase_d {
						display: table-cell;
						font-family: Tahoma, Verdana;
						font-size: 0.8rem;
						padding-top: 4px;
					}

					.quiz_sentence {
						display: table-cell;
						color: #444444;
						padding-left: 0;
					}

					.small_passage {
						display: table-cell;
						align-self: middle;
						width: 65%;
						align-items: center;
					}
					
					.banner_box {
						display: table-cell;
						border: 0px solid silver;
						padding: 0 10 0 10;
						margin: 0 10 10 0;
						background-repeat: no-repeat; 
						background-size: 100% 100%;
						box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
					}
				}
			}
		}
	}
}

.quiz_unit_container:not(:first-child) {
	page-break-inside: avoid;
}


.mb_u {
	border-bottom:1px dotted gray; 
	padding-bottom:1px; 
	padding-left:5px; 
	padding-right:5px;
	font-family: "Comic Sans MS", "Comic Sans", cursive;
	color: #61b056; 
}

/****** 첨자 기호 ***********************/
.caret {
	display: inline-flex;
	font-size: 2rem; 
	vertical-align: baseline; 
	margin-top: -1.786rem; 
	color: #61b056; 
	font-weight: normal;
	align-self: center;
}

.sup_cursive {
	font-family: "Comic Sans MS", "Comic Sans", cursive; 
	font-size: 1rem;
}

.little_uppercase {
	font-family: Tahoma, Verdana;
	font-size: 0.8rem;
}

.image_box {
	/*position: absolute; 절대 사용하지 말 것 */ 
	top: 50px;
	right: 50px;
	width: 200px;
	height: 200px;
	border: 1px solid silver;
	background-repeat: no-repeat; 
	vertical-align:top;
	background-size: 100% 100%;
}


.additional_practice {
	display: table-cell;
	color: #00793E;
}

/********말 풍선********************************************/
.speech_bubble {
  position: relative;
  background: #f5f5f5;
  border-radius: .8em;
  padding: 1em;
  color: #444444;
  /*width: 200px;*/
  margin: 10 10 10 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.speech_bubble::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-right-color: #f5f5f5;
  border-left: 0;
  margin-top: -15px;
  margin-left: -13px;
}

.speech_bubble_border {
  position: relative;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: .4em;
  padding: 0 10 0 10;
  /*width: 200px;*/
  margin: 10 10 10 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Outer border triangle */
.speech_bubble_border::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -20px;
  border: 10px solid transparent;
  border-right-color: #cccccc;
  margin-top: -10px;
}

/* Inner fill triangle */
.speech_bubble_border::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -18px; /* Slightly adjusted to align with inner bubble */
  border: 10px solid transparent;
  border-right-color: #ffffff;
  margin-top: -10px;
}

.thought_bubble {
  position: relative;
  background: #eeeeee;
  border-radius: 50%; /* Main circle */
  padding: 1.5em;
  width: 150px;
  height: 150px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thought_bubble::before,
.thought_bubble::after {
  content: '';
  position: absolute;
  background: #eeeeee;
  border-radius: 50%;
  bottom: -15px;
  left: 20%;
}

.thought_bubble::before {
  width: 20px;
  height: 20px;
  bottom: -25px;
  left: 25%;
}

.thought_bubble::after {
  width: 15px;
  height: 15px;
  bottom: -40px;
  left: 15%;
}

/******** 화살표 ***********************************/
/* 화살표가 시작되는 기준점 */
.arrow_box {
  position: relative;
  width: 170px;
  height: 10px;
  background-color: transparent;
  outline: 0px solid red;
}

/* 선 부분 */
.arrow_box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;; /* 화살표 머리를 제외한 선의 길이 */
  height: 1px;
  background-color: #61B056;
  transform: translateY(-50%);
}

/* 화살표 머리 부분 (삼각형) */
.arrow_box::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-left: 10px solid #61B056;  /*화살표 머리 길이 */
  border-bottom: 4px solid transparent;
  transform: translateY(-50%);
}

/******** 직선 ***********************************/
/* 시작되는 기준점 */
.line_box {
  position: relative;
  width: 100px;
  height: 10px;
  background-color: transparent;
  outline: 1px solid red;
}

/* 선 부분 */
.line_box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px; /* 화살표 머리를 제외한 선의 길이 */
  height: 1px;
  background-color: black;
  transform: translateY(-50%);
}

/* 화살표 머리 부분 (삼각형) 
.line_box::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid black;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
*/