﻿#dvStudyArea {
	display: flex;
	flex-direction: column;
	height: calc(100% - 75px);
	overflow-y: auto
}
	#dvStudyArea .study_info {
		background-color:#F7F7F7; overflow:hidden;
		padding:20px;
		box-sizing: border-box;
	}
		#dvStudyArea .study_info section {
			display:inline-block;
		}
		#dvStudyArea .study_info .step {
			margin-right: 10px;
		}
			#dvStudyArea .study_info .step div {
				display:inline-block;
				background-color:#fff; height:55px;
			}
				#dvStudyArea .study_info .step div label {
					/*display:inline-block;*/
					float:left;
					color:#666666; font-size:12px; font-weight:bold;
					/*line-height:55px;*/ height:55px; margin:20px 20px 0px 10px;
				}
				#dvStudyArea .study_info .step div ul {
					float:left; height:55px; margin-top:10px;
				}
					#dvStudyArea .study_info .step div ul li {
						font-size:10px;
						display:inline-block; text-align:center; padding:0px 5px;
					}
						#dvStudyArea .study_info .step div ul li span {
							display:block; width:16px; height:16px; border-radius:8px;
							background-color:#E2E2E2; margin-top:3px;
						}
			#dvStudyArea .study_info .step div.multiple {
				width:310px; margin-right:1px;
				border-top-left-radius:5px;
				border-bottom-left-radius:5px;
			}
				#dvStudyArea .study_info .step div.multiple label {
				}
				#dvStudyArea .study_info .step div.multiple ul {
				}
					#dvStudyArea .study_info .step div.multiple ul li {
					}
						#dvStudyArea .study_info .step div.multiple ul li span {
						}
							#dvStudyArea .study_info .step div.multiple ul li span.studied {
								background-color:#5B9BA7;
							}
			#dvStudyArea .study_info .step div.dictation {
				width:267px;
				border-top-right-radius:5px;
				border-bottom-right-radius:5px;
			}
				#dvStudyArea .study_info .step div.dictation label {
				}
				#dvStudyArea .study_info .step div.dictation ul {
				}
					#dvStudyArea .study_info .step div.dictation ul li {
					}
						#dvStudyArea .study_info .step div.dictation ul li span {
						}
							#dvStudyArea .study_info .step div.dictation ul li span.studied {
								background-color:#E70014;
							}
		#dvStudyArea .study_info .player {
			/* width:470px; position:relative; */
			/*background-color:yellow;*/
		}
			#dvStudyArea .study_info .player audio {
				/* position:absolute; top:-40px;
				width:400px; */
				max-width: 400px;
			}
	#dvStudyArea .question_area,
	#dvStudyArea .review_area  {
		flex:1;
		overflow-y: auto;
		padding:20px;
		width: 100%;
		box-sizing: border-box;
		overflow:auto; /*background-color:yellow;*/
	}
		#dvStudyArea .question_area .multiple_question {
		}
			#dvStudyArea .question_area .multiple_question h2 {
				margin:0px; font-size:20px;
			}
			#dvStudyArea .question_area .multiple_question p {
				margin:0px;
			}
			#dvStudyArea .question_area .multiple_question ul {
				margin-top:20px;
			}
				#dvStudyArea .question_area .multiple_question ul li {
					height:30px;
				}
					#dvStudyArea .question_area .multiple_question ul li input {
						float:left; margin-right:10px;
					}
					#dvStudyArea .question_area .multiple_question ul li label {
						float:left; font-size:16px; margin-top:-3px;
					}
		#dvStudyArea .question_area .dictation_question {
		}
			#dvStudyArea .question_area .dictation_question .answer {
				width: 100%;
				height: 140px;
				background-color: #DFDFDF;
				border-radius: 20px;
				position: relative;
			}
				#dvStudyArea .question_area .dictation_question .answer p {
					margin:0px auto; padding:20px 0px;
					text-align:center; line-height:50px;
					color:#666666; font-size:25px; font-weight:bold;
					/*background-color:yellow;*/
				}
					#dvStudyArea .question_area .dictation_question .answer p span {
						display: inline-block;
						color:inherit; font-size:inherit;
					}
						#dvStudyArea .question_area .dictation_question .answer p span.focus {
							border-left: 1px solid #666666;
						}
				#dvStudyArea .question_area .dictation_question .answer div {
					position:absolute; right:16px; bottom:16px;
				}
					#dvStudyArea .question_area .dictation_question .answer div label {
						display:inline-block; margin-right:20px;
						color: #666666; font-size:12px;
					}
					#dvStudyArea .question_area .dictation_question .answer div a {
						border: none; display:inline-block; padding:5px 10px;
						background-color: #fff;
						color: #A4A4A4; font-size:12px;
					}
			#dvStudyArea .question_area .dictation_question .question_list {
			}
				#dvStudyArea .question_area .dictation_question .question_list ul {
					margin:30px 0px 0px 50px;
				}
					#dvStudyArea .question_area .dictation_question .question_list ul li {
						padding-top:15px; font-size:15px; font-weight:bold;
						color:#666666;
					}
						#dvStudyArea .question_area .dictation_question .question_list ul li.active {
							color:#FB8D0C;
						}
						#dvStudyArea .question_area .dictation_question .question_list ul li.correct {
							color:#2BAA04;
						}
						#dvStudyArea .question_area .dictation_question .question_list ul li.wrong {
							color:#E5010C; text-decoration:line-through;
						}
		#dvStudyArea .question_area .command_area {
			margin-top:10px;
			text-align: center;
		}

	#dvStudyArea .review_area {
		display: none;
	}
		#dvStudyArea .review_area .summary {
			width:100%; height:43px;
		}
			#dvStudyArea .review_area .summary li {
				float:left; height:43px; text-align:center;
				color:#666666; font-size:14px; line-height:43px;
				border-top:1px solid #E1E1E1;
				border-bottom:1px solid #E1E1E1;
				border-right:1px solid #E1E1E1;
			}
				#dvStudyArea .review_area .summary li:first-child {
					border-left:1px solid #E1E1E1;
				}
		#dvStudyArea .review_area section.result {
			padding:20px 0px;
		}
			#dvStudyArea .review_area section.result h2 {
				color:#666666; font-size:14px;
			}
			#dvStudyArea .review_area section.result p {
				margin:0px;
			}
				#dvStudyArea .review_area section.result p img {
				}
			#dvStudyArea .review_area section.result .multiple {
			}
				#dvStudyArea .review_area section.result .multiple img {
					float:left;
				}
				#dvStudyArea .review_area section.result .multiple ul {
					float:left; margin-left:10px; padding-top:10px;
				}
					#dvStudyArea .review_area section.result .multiple ul li {
						height:22px; position:relative;
						color:#666666; font-size:13px;
					}
						#dvStudyArea .review_area section.result .multiple ul li.correct {
							color:#E70014; font-weight:bold;
						}
						#dvStudyArea .review_area section.result .multiple ul li span {
							display:block; position:absolute; left:0px; top:-5px;
							width:16px; height:17px;
							background-image:url(/StepEnglish/images/learning/common/Check.png);
						}
			#dvStudyArea .review_area section.result .dictation {
				width:100%;
				background-color:#F5F5F5;
			}
				#dvStudyArea .review_area section.result .dictation ul {
					width:950px; margin:0px auto; padding:20px 0px;
				}
					#dvStudyArea .review_area section.result .dictation ul li {
						color:#0000FF; font-size:13px; padding:5px 0px;
					}
						#dvStudyArea .review_area section.result .dictation ul li.correct {
							color:#008000;
						}
			#dvStudyArea .review_area section.result .cmd {
				text-align:right; padding:10px 0px;
			}
				#dvStudyArea .review_area section.result .cmd a {
					display:inline-block; background-color:#ECECEC;
					width:72px; height:28px; text-align:center; line-height:28px;
					color:#545454; font-size:12px;
				}
			#dvStudyArea .review_area section.result .description {
				width:100%;
				background-color:#DCDCDC;
				display:none;
			}
				#dvStudyArea .review_area section.result .description ul {
					width:950px; margin:0px auto; padding:20px 0px;
				}
					#dvStudyArea .review_area section.result .description ul.eng {
						display:block;
					}
					#dvStudyArea .review_area section.result .description ul.kor {
						display:none;
					}
					#dvStudyArea .review_area section.result .description ul li {
						color:#000; font-size:13px; padding:5px 0px;
					}