@charset "utf-8";
/* CSS Document */

/* ============================================================================ 생각넓히기 */
#info_text::before {
	content: "\f084";
	background: url(../images/ks02_ot_06.png) 0 0 no-repeat;
	padding: 2px 0;
}
article {
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
}
#q_title {
	float: left;
	width: 520px;
	text-align: left;
	font-size: 22px;
	line-height: 125%;
	margin-top: 60px;
	margin-left: 390px;
	margin-right: 50px;
	color: #154128 ;
	font-family: nanum_sr;
	background: url(../images/ks06_qtit.png) -5px top no-repeat;
	padding-left: 30px;
}
#q_title.line_over {
	width: 510px;
	padding-right: 10px;
	height: 130px;
	overflow-y: auto;
	font-size: 20px;
}
#q_title span { color: #da3e16; }
.opinion {
	float: left;
	margin-left: 390px;
	font-size: 15px;
	padding: 0;
}
.opinion textarea {
	width: 530px;
	height: 160px;
	margin: 15px 0 25px 0;
	float: left;
	padding: 5px;
	resize: none;
	font-size: 16px;
	border: 1px solid #8589b8;
}
.btn_wrap {
	float: left;
	text-align: center;
}
.btn_wrap a {
	margin-right: 15px;
	font-size: 19px;
	font-family: nanum_srr;
}
.btn_wrap a, .btn_result a {
	display: block;
	float: left;
	width: 170px;
	line-height: 43px;
	height: 41px;
	background: #1a8041 ;
	text-align: center;
	color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.btn_wrap a.float_n, .btn_result a.float_n { float: none; }
.btn_wrap .btn_view {
	background: #154128  ;
	color: #fff;
}
.btn_wrap .btn_answer {
	float: left;
	line-height: 43px;
	height: 43px;
	color: #291c13;
	border-color: rgba(0, 0, 0, 0.3);
	background: #ffd800 ;
}
#img_wrap {
	position: absolute;
	clear: both;
	top: 0;
	left: 0;
	bottom: 0;
}
.img01 {
	position: absolute;
	left: 190px;
	bottom: 355px;
	margin-bottom: -10px;
	opacity: 0;
	width: 100px;
	font-size: 20px;
	color: #325ab2;
}
.img02 {
	position: absolute;
	left: 63px;
	bottom: 93px;
	margin-bottom: -30px;
	opacity: 0;
}
@keyframes fadeIn { 0%, 70% {
 opacity:0;
 transform:rotate(10deg) translateY(20px);
}
100% {
 opacity:1;
 transform:rotate(0) translateY(0);
}
}
 @-webkit-keyframes fadeIn { 0%, 70% {
 opacity:0;
 transform:rotate(10deg) translateY(20px);
}
100% {
 opacity:1;
 transform:rotate(0) translateY(0);
}
}
@keyframes fadeIn02 { 0%, 70% {
 opacity:0;
 transform:rotate(10deg) translateY(20px);
}
100% {
 opacity:1;
 transform:rotate(0) translateY(0);
}
}
 @-webkit-keyframes fadeIn { 0%, 70% {
 opacity:0;
 transform:rotate(10deg) translateY(20px);
}
100% {
 opacity:1;
 transform:rotate(0) translateY(0);
}
}
.img02 img { vertical-align: bottom; }
.swing {
	animation: swing 2s ease none infinite normal;
	-webkit-animation: swing 2s ease none infinite normal;
}
 @keyframes swing { 0%, 100% {
transform:translateY(0)
}
50% {
transform:translateY(5px)
}
}
@-webkit-keyframes swing { 0%, 100% {
transform:translateY(0)
}
50% {
transform:translateY(5px)
}
}
.tada {
	-webkit-animation-delay: 1.3s;
	animation-delay: 1.3s;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: tada;
	animation-name: tada;
}
 @keyframes tada { 0% {
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 0;
}
 10%, 20% {
 -webkit-transform: scale(0.9) rotate(-3deg);
 -ms-transform: scale(0.9) rotate(-3deg);
 transform: scale(0.9) rotate(-3deg);
 opacity: 1;
}
 30%, 50%, 70%, 90% {
 -webkit-transform: scale(1.3) rotate(3deg);
 -ms-transform: scale(1.3) rotate(3deg);
 transform: scale(1.3) rotate(3deg);
}
 40%, 60%, 80% {
 -webkit-transform: scale(1.2) rotate(-3deg);
 -ms-transform: scale(1.2) rotate(-3deg);
 transform: scale(1.2) rotate(-3deg);
}
 100% {
 -webkit-transform: scale(1) rotate(0);
 -ms-transform: scale(1) rotate(0);
 transform: scale(1) rotate(0);
}
}
@-webkit-keyframes tada { 0% {
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 0;
}
 10%, 20% {
 -webkit-transform: scale(0.9) rotate(-3deg);
 transform: scale(0.9) rotate(-3deg);
 opacity: 1;
}
 30%, 50%, 70%, 90% {
 -webkit-transform: scale(1.3) rotate(3deg);
 transform: scale(1.3) rotate(3deg);
}
 40%, 60%, 80% {
 -webkit-transform: scale(1.2) rotate(-3deg);
 transform: scale(1.2) rotate(-3deg);
}
 100% {
 -webkit-transform: scale(1) rotate(0);
 transform: scale(1) rotate(0);
}
}
.mg_2line { margin-top: -30px; }
.color_r { color: #ff3d3d }
.color_b { color: #2391e2; }
.fs20 { font-size: 20px !important; }
.label .disabled {
	background-color: gray;
	border: none;
	cursor: none;
}
/* 정답보기 팝업 */

#correct {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	left: 0;
	display: none;
	z-index: 30;
}
#correct_wrap {
	position: absolute;
	width: 686px;
	height: 450px;
	top: 50%;
	left: 50%;
	margin-left: -343px;
	margin-top: -225px;
	background: url(../images/correct_bg.png) left top no-repeat;
	z-index: 31;
}
#correct_text {
	position: relative;
	float: left;
	left: 91px;
	top: 130px;
	width: 535px;
	height: 230px;
	overflow-y: auto;
	color: #000;
	font-family: nanum_srr;
}
#correct_text ul {
	padding-left: 20px;
	margin: 0;
}
#correct_text li { margin-bottom: 7px; }
#correct_text li:last-child { margin-bottom: 0; }
#correct_text p {
	margin: 10px 0;
	float: left;
	color: #758d0d;
	width: 100%;
	background: none;
}
ul.ul_list li {
	padding: 0;
	margin: 0;
	list-style: disc;
}
ul.ul_list li ul li {
	padding: 0;
	margin: 0;
	list-style: url(../images/hyphen.png);
}
ol.ol_list li {
	padding-left: 20px;
	margin: 0;
	list-style: none;
}
.p_tit {
	background: url(../images/table_bg.png) left no-repeat !important;
	padding-left: 10px;
}
#correct_text p .txt_box {
	display: inline-block;
	float: left;
	width: 60px;
	background: #ffc85a;
	margin-right: 10px;
	padding: 12px 0;
	text-align: center;
	color: #333;
}
#correct_close {
	position: absolute;
	float: right;
	width: 48px;
	text-align: center;
	top: 20px;
	right: 45px;
	font-size: 27px;
	cursor: pointer;
	color: #1a8041 ;
}
table th { background: #eee; }