.mission_wrap {
	position: relative;
	margin: 0 auto;
	max-width: 100%;
	text-align: center;
}

.mission_wrap > .qabox {
	padding: 0;
	width: 100%;
	height: 670px;
	max-height: 650px;
	overflow-y: auto;

	background-image: url('https://talkstation.co.kr/edu/skin/default/content/images/idic_eync/seminar_mission_emoji.png');
	background-position: 100% 95%;
	background-repeat: no-repeat;
	background-size: 15%;
}

.mission_wrap > .qabox > h3 {
	color: #333;
}

.mission_wrap > .qabox > .question {
	display: flex;
	position: relative;
	overflow: hidden;
	padding-top: 1vw;
	width: 100%;
}

.question > .left_title {
	flex-direction: column;
	margin-right:  5px;
	width: 6%;
	color: #D948BF;
	font-size: 21px;
	font-weight: 700;
	text-align: center;
	box-sizing: border-box;
}

.question > .right_subs {
	flex-direction: column;
	padding: 1vw 20px;
	width: 93%;
	border: 1px solid #ddd;
	border-bottom-left-radius: 1.5em;
	border-bottom-right-radius: 1.5em;
	border-top-right-radius: 1.5em;
	color: #D948BF;
	font-size: 16px;
	font-weight: 700;	
	text-align: left;
}

.question > .right_choice {
	flex-direction: column;
	padding: 1vw;
	width: 93%;
	border: 1px solid #ddd;
	border-bottom-left-radius: 1.5em;
	border-bottom-right-radius: 1.5em;
	border-top-right-radius: 1.5em;	
	text-align: left;
}

.question > .right_choice > ul > li {
	padding: 0 10px;
	font-size: 14px;
	font-weight: 600;
}
.question > .right_choice > ul > li > label {
	padding: 5px 12px;
}
.question > .right_choice > ul > li > label.active {
	color: #D948BF;
	font-weight: 700;
	border-radius: 5px;
	background-color: #fef3fc;
}
.question > .right_choice > ul > li > label.active > em {
	background-color: #D948BF;
}

.question > .right_choice > ul > li > label > em {
	display: inline-block;
	padding: 0;
	margin-right: 5px;
	background-color: #c4c4c4;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	font-size: 16px;
	line-height: 24px;
	font-style: normal;
}













.mission_wrap > .qabox > .btnarea,
.mission_wrap > .qa_area > .qabox > .btnarea {
	padding-top: 20px;
}


.mission_wrap > .qabox > .btnarea > button,
.mission_wrap > .qa_area > .qabox > .btnarea > button{
	padding: 0.7vw 1.2vw;
	background-color: #D948BF;
	border: none;
	border-radius: 3rem;
	font-size: 1vw;
	font-weight: 700;
	color: #fff;
}













.mission_wrap > .qa_area > .qabox > .btnarea.prev > button {
	background-color: #666;
}

.mission_wrap > .qa_area > .qabox > .review_txt {
	padding: 1vw 0;
	font-size: 0.8vw;
	color: #666;
}

.mission_wrap > .qa_area > .qabox > .review_box {
	width: 100%;
}








.mission_wrap > .qa_area > .qabox > .review_box > textarea {
	padding: 0.8vw;
	width: 100%;
	height: 230px;
	background-color: #fafafa;
	border: 1px solid #ddd;
	border-radius: 2rem;
	color: #333;
	box-sizing: border-box;
}

.mission_wrap > .qa_area > .review_box > textarea::placeholder,
.mission_wrap > .qa_area > .review_box > textarea::-webkit-input-placeholder,
.mission_wrap > .qa_area > .review_box > textarea::-ms-input-placeholder {
	color: #999;
}


.qabox > .result {
	position: relative;
	width: 100%;
	padding-bottom: 2vw
}

.qabox > .result > .title {
	padding: 5px 0 0;
	text-align: left;
}

.qabox > .result > .title > h3 {
	color: #D948BF;
	font-weight: 700;
}

.qabox > .result > .subs {
	padding:1.3vw 0.8vw;
	width: 100%;
	height: 230px;
	border: 1px solid #ddd;
	border-top-right-radius: 1.5rem;
	border-bottom-right-radius: 1.5rem;
	border-bottom-left-radius: 1.5rem;
	overflow-y: auto;
	text-align: left;
}

.qabox > .result > .subs > .quiz_view {
	padding-bottom: 13px;
}

.qabox > .result > .subs > .quiz_view > ul > li {
	color: #333;
	font-size: 15px;
	line-height: 25px;
	padding: 0 10px;
}

.qabox > .result > .subs > .quiz_view > ul > li.quiz {
	font-size: 18px;
	font-weight: 700;
	color: #D948BF;
	line-height: 25px;
	padding: 0 0 11px 11px;
}

.qabox > .result > .subs > .quiz_view > ul > li.my_a {
	font-weight: 700;
	color: #D948BF;
}







.qabox > .result > .subs > .quiz_view > ul > li > .icn_right {
	display: inline-block;
	padding: 0vw 0.5vw;
	margin-left: 5px;
	border-radius: 2rem;
	background-color: #D948BF;
	color: #fff;
	font-size: 0.7vw;
}

.qabox > .result > .myreview {
	padding: 1.5vw 1.5vw;
	width: 100%;
	height: 100px;
	border: 1px solid #ddd;
	border-top-right-radius: 1.5rem;
	border-bottom-right-radius: 1.5rem;
	border-bottom-left-radius: 1.5rem;
	overflow-y: auto;
	text-align: left;
}



.mission_wrap > .qabox > .page-step
{ position: absolute; width: 100%; text-align: left; left: 0%; top: -70px; font-size: 13px; }
.mission_wrap > .qabox > .page-step > span
{ border-radius: 30px ; height: 30px; padding: 6px 20px; background-color: #EEEEEE; }

h3 {
	font-size: 21px;
	line-height: 25px;
}


@media(max-width: 526px) {
	
	
	.mission_wrap > .qabox {
		padding: 0;
		width: 100%;
		height: 400px;
		border-radius: 3rem;
		box-sizing: border-box;
		background-image: url('https://talkstation.co.kr/edu/skin/default/content/images/idic_eync/seminar_mission_emoji.png');
		background-position: right bottom;
		background-repeat: no-repeat;
		background-size: 20%;
	}
	.mission_wrap > .qabox > h3 {
		padding-top: 0;
		color: #333;
		font-size: 18px;
		margin: 0; 
	}
		
	.question > .left_title {
		flex-direction: column;
		margin-right: 5px;
		width: 5%;
		color: #D948BF;
		font-size: 18px;
		font-weight: 700;
		text-align: right;
		box-sizing: border-box;
	}


	.question > .right_subs {
		flex-direction: column;
		padding: 3vw;
		width: 92%;
		border: 1px solid #ddd;
		border-bottom-left-radius: 1.5em;
		border-bottom-right-radius: 1.5em;
		border-top-right-radius: 1.5em;
		color: #D948BF;
		font-size: 15px;
		font-weight: 700;	
		text-align: left;
		box-sizing: border-box;
	}

	.question > .right_choice {
		flex-direction: column;
		padding: 10px;
		width: 92%;
		border: 1px solid #ddd;
		border-bottom-left-radius: 1.5em;
		border-bottom-right-radius: 1.5em;
		border-top-right-radius: 1.5em;	
		text-align: left;
		box-sizing: border-box;
	}
	
	.question > .right_choice > ul > li {
		padding: 0;
		font-size: 14px;
		font-weight: 600;
	}

	.question > .right_choice > ul > li > label > em {
		margin-right: 3px;
		width: 22px;
		height: 22px;
		border-radius:50%;
		font-size: 12px;
		line-height: 22px;
	}
	


	.mission_wrap > .qabox > .btnarea > input[type=submit],
	.mission_wrap > .qabox > .btnarea > button[type=submit] {
		padding: 1.5vw 2.5vw;
		background-color: #D948BF;
		border: none;
		border-radius: 3rem;
		font-size: 16px;
		font-weight: 700;
		color: #fff;
	}
	
	.mission_wrap > .qabox > .btnarea.prev > input[type=submit] {
		background-color: #666;
	}
	
	.mission_wrap > .qabox > .review_txt {
		padding: 15px 0;
		font-size: 14px;
		color: #666;
	}




	.mission_wrap > .qa_area > .qabox > .review_box > textarea {
		padding: 10px;
		width: 100%;
		height: 200px;
	}
	.mission_wrap > .qa_area > .qabox > .btnarea > button {
		padding: 6px 15px; font-size: 14px;
	}

	.mission_wrap > .qa_area > .qabox > .review_box {
		margin-top: 10px;
	}
	.mission_wrap > .qa_area > .qabox > .review_box > textarea {
		padding: 10px;
		width: 100%;
		height: 150px;
	}
	.mission_wrap > .qa_area > .qabox > .btnarea > button {
		padding: 6px 15px; font-size: 14px;
	}


	.qabox > .result > .title {
		padding: 10px 0 0;
		text-align: left;
	}
	.qabox > .result > .title > h3 {
		color: #D948BF;
		font-weight: 700;
		font-size: 18px;
	}
	.qabox > .result > .subs {
		padding: 10px 3px;
		width: 100%;
		height: 150px;
		border: 1px solid #ddd;
		border-top-right-radius: 1rem;
		border-bottom-right-radius: 1rem;
		border-bottom-left-radius: 1rem;
		box-sizing: border-box;
		overflow-y: auto;
		text-align: left;
	}

	.qabox > .result > .subs > .quiz_view > ul > li {
		color: #333;
		font-size: 15px;
		line-height: 24px;
	}
	.qabox > .result > .subs > .quiz_view > ul > li.quiz {
		font-size: 16px;
		font-weight: 700;
		color: #D948BF;
		line-height: 5vw;
	}
	.qabox > .result > .subs > .quiz_view > ul > li > .icn_right {
		display: inline-block;
		padding: 0vw 2vw;
		margin-left: 5px;
		border-radius: 2rem;
		background-color: #D948BF;
		color: #fff;
		font-size: 12px;
		font-weight: 700;
	}
	
	.qabox > .result > .myreview {
		padding: 2vw;
		width: 100%;
		height: 90px;
		border: 1px solid #ddd;
		border-top-right-radius: 1rem;
		border-bottom-right-radius: 1rem;
		border-bottom-left-radius: 1rem;
		box-sizing: border-box;
		overflow-y: auto;
		text-align: left;
		font-size: 14px;
	}




	.mission_wrap > .qa_area > .qabox > h3
	{ font-size: 20px; line-height: 25px; }
	.mission_wrap > .qa_area > .qabox > .review_txt
	{ padding: 0; font-size: 15px; color: #666; }
	.mission_wrap > .qa_area > .qabox > .review_box
	{ padding-top: 10px; }

	.mission_wrap
	{ padding: 0; width: 100%; }
	.mission_wrap > .qabox > .btnarea > button
	{ padding: 6px 14px; font-size: 14px; }

	.mission_wrap > .qabox > .page-step
	{ text-align: center; left: 0; top: 100%; margin-top: 10px; }
	.mission_wrap > .qabox > .page-step > span
	{ background-color: #EEEEEE; font-size: 12px; padding: 2px 12px; }


	.mission_wrap > .qabox > h3
	{ margin: 0; padding: 0; }

}