.normal     { font-weight: 400 }
.bold       { font-weight: 700 }
.bolder     { font-weight: 800 }
.light      { font-weight: 300 }

body{
	margin: 0;
    padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}

p{
margin:0;
}


h1, h2, h3, h4, h5{
color:white;
text-align:center;
margin:0;
padding:0.2em;
}

h1{
font-size:2.2em;
letter-spacing:0.1em;
font-weight:700;
}

h2{
font-size:1.2em;
font-weight:300;
}


#top{
background-color:#60c2e6;
}

.top-text{
color:white;
padding:1em
}

.navi{
padding-top:0.5em;
overflow:auto;
}

.navi_btn{
float:left;
width:33.3%;
text-align:center;
color:white;
font-size:1em;
padding:0.5em 0em 0.5em 0em;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}

.result_tab_on { background-color:white; color:#54b9de; font-weight:bold; }

.testtitle{
margin:1em 0em 0.5em 0em;
text-align:center;
font-size:1.8em;
color:#165c82
}

.testtitle2{
margin:1em 0em 0.5em 0em;
text-align:center;
font-size:1.5em;
color:#165c82
}

.whiteback{
background-color:white;
margin:0.2em 1em 0em 1em;
}

.charttitle_active{
padding:0.5em;
color:white;
background-color:#60c2e6;
border-radius: 5px 5px 0px 0px;
overflow:auto;
}

.charttitle_disabled{
padding:0.5em;
color:#727272;
background-color:#fafafa;
border:1px solid #b4b4b4;
border-radius: 5px;
overflow:auto;
}

.charttitle{
text-align:left;
font-size:1.3em;
float:left;
}

.check{
float:left;
padding:0.1em 0em 0em 0.8em;
color:#ea6013;
}

.fold_img{
float:right;
padding-top:0.5em;
}

.chart{
margin:0em 1em 1em 1em;
}

.chart table { border-collapse: collapse; border:2px solid #60c2e6; width:100%; color:#000; }


.chart table th {
border: 1px solid #dadada;
border-collapse: collapse;
font-size:1.2em;
font-weight:700;
padding:0.5em;
width:33.3%;
background-color:#fafafa;
color:#165c82;
}

.chart table td {
border: 1px solid #dadada;
border-collapse: collapse;
font-size:0.9em;
padding:0.5em;
width:33.3%;
word-break:break-all;
}

.chart1{
margin:0em 1em 1em 1em;
}

.chart1 table { border-collapse: collapse; border:2px solid #60c2e6; width:100%; color:#000; }


.chart1 table th {
border: 1px solid #dadada;
border-collapse: collapse;
font-size:1.2em;
font-weight:700;
padding:0.5em;
background-color:#fafafa;
color:#165c82;
}

.chart1 table td {
border: 1px solid #dadada;
border-collapse: collapse;
font-size:0.9em;
padding:0.5em;
word-break:break-all;
}

.chart1_1{
margin:0em 1em 0em 1em;
}

.chart1_1 table { border-collapse: collapse; border-left:2px solid #60c2e6; border-right:2px solid #60c2e6; border-bottom:2px solid #60c2e6; width:100%; color:#000; }


.chart1_1 table th {
border: 1px solid #dadada;
border-collapse: collapse;
font-size:1.2em;
font-weight:700;
padding:0.5em;
background-color:#fafafa;
color:#165c82;
}

.chart1_1 table td {
border: 1px solid #dadada;
border-collapse: collapse;
font-size:0.9em;
padding:0.5em;
word-break:break-all;
}

.chart2{
margin:0em 1em 1em 1em;
}

.chart2 table { border-collapse: collapse; border:2px solid #60c2e6; width:100%; color:#000; }


.chart2 table th {
border: 1px solid #dadada;
border-collapse: collapse;
font-size:0.8em;
font-weight:700;
padding:0.5em;
background-color:#fafafa;
color:#165c82;
}

.chart2 table td {
border: 1px solid #dadada;
border-collapse: collapse;
font-size:0.8em;
padding:0.5em;
word-break:break-all;
}

.chart3{
margin:0em 1em 0em 1em;
}

.chart3 table { border-collapse: collapse; border-left:2px solid #60c2e6; border-right:2px solid #60c2e6; border-bottom:2px solid #60c2e6; width:100%; }

.chart3 table td {
border: 1px solid #dadada;
border-collapse: collapse;
font-size:1.2em;
color:#165c82;
padding:0.2em;
word-break:break-all;
background-color:#E8FFFF;
text-align:center;
}

.td2 {width:66.7% !important;}

.b {font-weight:700;}


.main_pop {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:1000; 
}

.main_wrap { 
position:fixed; 
top:0px; left:0px; 
width:100%; 
height:100%; 
z-index:900; 
background-color:#eeeeee; 
opacity:0.5;
}

.popup_wrap { 
position:relative; 
top:50%; 
left:50%; 
width:100%; 
text-align:center;  
margin:-200px 0 0 -150px; 
}

.popup_cont { 
width:300px; 
min-height:100px; 
max-height:400px; 
overflow: auto; 
background:#fff; 
color:#555; 
border:1px solid #999; 
border-radius:10px; 
font-size:1em; 
padding:10px 0; 
text-align:left;
box-shadow:0 0 8px #aaa;
}

.popup_wrap2 { 
position:relative; 
top:50%; 
left:50%; 
width:100%; 
text-align:center;  
margin:-250px 0 0 -300px; 
}

.popup_cont2 { 
width:600px;
min-height:100px; 
max-height:600px; 
overflow: auto; 
background:#fff; 
color:#555; 
border:1px solid #999; 
border-radius:10px; 
font-size:1em; 
padding:10px 0; 
text-align:left;
box-shadow:0 0 8px #aaa;
}

.comment_image { max-width:580px; }

.comment-video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 비율 */
	height: 0;
}

.comment-video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/***** 모바일 *****/
@media only screen and (max-width: 900px) {
.popup_wrap2 { 
position:relative; 
top:50%; 
left:50%; 
width:100%; 
text-align:center;  
margin:-260px 0 0 -45%; 
}

.popup_cont2 { 
width:90%;
min-height:100px; 
max-height:600px; 
overflow: auto; 
background:#fff; 
color:#555; 
border:1px solid #999; 
border-radius:10px; 
font-size:1em; 
padding:10px 0; 
text-align:left;
box-shadow:0 0 8px #aaa;
}

.comment_image { max-width:100%; }

}

.comment-popup-header {
  background:#60c2e6;
  color: white;
  padding:0.8em 0.5em 0.5em 1em;
  font-size: 1.2em;
  font-weight: bold;
  position: sticky;  /* 여기서 고정 효과 */
  top: -1em;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top:-1em;
  text-align:left !important;
}

.comment-popup_clo_btn { 
float:right; 
width:25px; 
height:25px; 
background:#fff; 
border-radius:5px;
margin:5px 10px 5px; 
border:1px solid #a9a9a9; 
color:#a9a9a9; 
font-size:13px; 
position:relative;

text-align:center;
font-family:'NanumGothic';
}

.popup_clo_btn { 
float:right; 
width:25px; 
height:25px; 
background:#fff; 
border-radius:5px;
margin:0 10px 10px; 
border:1px solid #a9a9a9; 
color:#a9a9a9; 
font-size:13px; 
position:relative;
right:2%; 
top:-3em;
text-align:center;
font-family:'NanumGothic';
}

.clo_btn {
width:35px;
height:35px;
background:#fff; 
border-radius:5px; 
margin:0 10px 10px; 
border:1px solid #a9a9a9; 
color:#a9a9a9; 
font-size:20px; 
position:absolute; 
right:2%; top:2%; 
text-align:center; 
font-family:'NanumGothic';
}

.comeent_title{
font-size:1.2em;
background-color:#60c2e6;
color:white;
margin-top:-1em;
padding:1.3em 0.5em 0.8em 1em;
text-align:left !important;
}

.btn_play{
font-size:1.1em;
background-color:#165c82;
color:white;
margin:0.5em;
padding:0.8em 0em 0.8em 2.1em;
border-top:1px solid;
}

#exam_2{
font-size:1.2em;
padding:1em;
text-align:justify;
line-height:1.3em;
color:#424242;
margin-bottom:3em;
}

.totalOp{
font-size:1.3em;
padding:1em;
text-align:justify;
line-height:1.2em;
color:#424242;
}

.normal_tts { width:100%; background:#60c2e6; color:white; text-align:center; padding:0.5em 0; }

.total_tts{ position:fixed; left:0px; bottom:0px; width:100%; background:#54b9de; color:white; text-align:center; padding:0.8em 0; }
.total_tts2{ width:100%; background:#54b9de; color:white; text-align:center; padding:0.3em 0; margin-top:0.3em; font-size:0.8em; }
.total_tts3{ background:#60c2e6; color:white; text-align:center; padding:0.5em 0.5em; font-size:0.8em; margin:-1.3em 0 1em 0; }

.totla_tts_txt{
line-height:3;
margin:0;
}

.totla_tts_img{
float:left;
padding:0.8em 0.7em 0em 33%
}

.add_data_button{
font-size:1.3em;
color:white;
margin:1em 3em 0em 3em;
background-color:#60c2e6;
padding:0.5em 1.2em 0.5em 1.2em;
border-radius:5px;
}

.viewAllBtn { width:70px; height:30px; background:#60c2e6; border-radius:3px; margin:5px; border:1px solid #60c2e6; color:white; font-size:14px; position:absolute; right:2%; top:175px; text-align:center; }
.closeAllBtn { width:70px; height:30px; background:white; border-radius:3px; margin:5px; border:1px solid #60c2e6; color:60c2e6; font-size:14px; position:absolute; right:2%; top:175px; text-align:center; }

.tbl001 {
	border-collapse: collapse;
	font-size: 12px;
	width: 697px;
	/*width:100%;*/
	margin-top: 20px;
	margin-left: 38px;
	border-style: solid;
	border-color: #333333;
	border-width: 1px;
	/*margin:auto;*/

}

	.tbl001 th {
		background-color: #e0e0e0;
		text-align:center;
		padding: 3px;
		border-style: solid;
		border-color: #333333;
		border-width: 1px;
		padding: 3px;
	}

	.tbl001 td {
		border-style: none solid dashed solid;
		border-color: #333333;
		border-width: 1px;
		padding: 3px;
	}

	.tbl001 .top {
		border-style: solid none none none;
		border-top-color: #333333;
		border-top-width: 1px;
	}


.result_info { position:relative; top:0px; left:0px; width:750px; float:left; color:black; z-index:9999; border-bottom:1px dotted #707070; margin:0em 1em 0.5em 1em; padding-bottom:5px; font-size:14px; }