@import url( "//fonts.googleapis.com/earlyaccess/notosanskr.css ");
/*font-family: 'Noto Sans KR', sans-serif;*/
@charset "utf-8";
 
 ul, li, div { padding:0px; margin: 0px; list-style:none; } 
 a { text-decoration:none;}
 .skip { display:none;}

/*��ũ�� css ����� ��� �������� �ϰ������ �����ϰ� �ܵ������� ����Ұ�*/ 
  body {
			/*IE���� ��ũ�� ���� */
			scrollbar-arrow-color:#2f2f36; /* ȭ��ǥ����*/
			scrollbar-track-color:#131317; /*��ũ�ѹ� ����*/
			scrollbar-darkshadow-color:#131317; /*�����ʾƷ�(����)*/
			scrollbar-face-color:#434349; /*�����̴� ��ũ�ѹ�*/
			scrollbar-highight-color:#131317; /*����, �� (����)*/
			scrollbar-shadow-color:#131317; /*������,�Ʒ�(�ٱ���)*/
			}
	/*webkit chrome, safari ��ũ�� ����*/
	::-webkit-scrollbar { width: 10px; height: 10px; background:#131317; }
	::-webkit-scrollbar-button{ display: block; height: 10px; background: #131317}
	::-webkit-scrollbar-track {background: #131317; -webkit-border-radius: 3px; border-radius:3px; }
	::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: #434349; -webkit-border-radius: 8px; border-radius: 8px;}


 #wPlayerSkin { width:1158px; height:570px; border:2px solid #000;background:#212125/*blue*/;}
	.wply_head { display: table;width:100%; height:74px; border-bottom:1px solid #000;}
	.wply_head > h1 { display: table-cell; vertical-align: middle;width: 122px; text-align:center; text-indent:-8px; background: url('../images/w_ply_logbar.png') no-repeat right ;}
	.wply_head > h2 { display: table-cell; vertical-align: middle; font-family: 'Noto Sans KR', sans-serif;color:#fff;padding: 3px 0px; padding-left:10px; font-size:17px; font-weight:300;}
	.wply_dwbtn { float:right; width:274px; height:73px; overflow:hidden; padding:20px 20px 20px 0; box-sizing:border-box; background: url('../images/w_ply_dwbtn.jpg') no-repeat; }
	.wply_dwbtn li { float:right; margin-left:35px; }
	.wply_dwbtn li.mp3 a { background: url('../images/w_ply_mp3.png') no-repeat; }
	.wply_dwbtn li.download a { background: url('../images/w_ply_downIcon.png') no-repeat; }
	.wply_dwbtn li a { font-family:'Noto Sans KR', sans-serif; display:block; height:35px; text-decoration:none; font-size:14px; font-weight:500; color:#fff; padding-left:45px; line-height:35px; }
	
	.wply_body { width:100%; overflow:auto;}
	.wply_bd_mvarea { float:left; width:882px; height:496px; background: url('../images/w_ply_plybg.jpg') no-repeat;overflow: hidden; }
	.wply_bd_listarea { overflow: hidden;float:left; width:274px; height:497px;border-left:1px solid #000; vertical-align:top; }
		.wply_bd_list { width:274px; height:407px; overflow:scroll; overflow-x: hidden;}

 		.wply_bd_list > li { border-bottom:1px solid #1d1d21;}
		.wply_bd_list > li.active { background: #b10e0e; }
 		.wply_bd_list > li.active > .wply_bd_listareaL > li, .wply_bd_list > li.active > .wply_bd_listareaL > li > a { color:#fff;}
		.wply_bd_list > li.visit { background: #111; }
		.wply_bd_list > li.visit > .wply_bd_listareaL > li, .wply_bd_list > li.visit > .wply_bd_listareaL > li > a { color:#666;}

		/*�߰� 20191115 BY õ��*/
		.wply_bd_list > li > div.mov_category  { color: #fff; font-size: 13px; padding: 14px 10px; border-bottom: 1px solid #000; border-top: 1px solid #000; overflow: hidden;
    white-space: nowrap;    text-overflow: ellipsis;    word-wrap: normal;}
 
 		.wply_bd_listareaT { width:274px; overflow:hidden; border-bottom:1px solid #000; }
			.wply_bd_listareaT > li { float:left; font-family: 'Noto Sans KR', sans-serif;font-size:13px; height:34px; line-height:34px;color:#a9a9b1; text-align:center; } 
			.wply_bd_listareaT > li > a { color:#a9a9b1;text-decoration:none; }
			.wply_bd_listareaT > li:first-child { width:21px; border-right:1px solid #000; }
			.wply_bd_listareaT > li:first-child > img { padding-top:9px; opacity: 0.7; filter: alpha(opacity:70); }
			.wply_bd_listareaT > li:nth-child(2) { width:183px; border-right:1px solid #000; text-align:left;  text-indent:10px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-wrap: normal; }
			.wply_bd_listareaT > li:nth-child(3) { width:53px; text-align:center; }
		
		.wply_bd_listareaL { width:257px; overflow:hidden; }
			.wply_bd_listareaL > li { float:left; font-family: 'Noto Sans KR', sans-serif;font-size:13px; height:34px; line-height:34px;color:#a9a9b1; text-align:center; } 
			.wply_bd_listareaL > li > a { color:#a9a9b1;text-decoration:none; }
			.wply_bd_listareaL > li:first-child { width:22px;}
			.wply_bd_listareaL > li:first-child > img { padding-top:9px; }
			.wply_bd_listareaL > li:nth-child(2) { width:183px; text-align:left;  text-indent:10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-wrap: normal;}
			.wply_bd_listareaL > li:nth-child(3) { width:45px; text-align:right;   }
		.wply_bd_listareaLC { /*width:257px;*/padding-right:10px; overflow:hidden; background-color: #212125;font-size:12px;padding-top:10px;padding-bottom:10px;}
			.wply_bd_listareaLC > li { line-height:1.8em;color:#a9a9b1; text-align:left;text-indent:10px; list-style-position:outside;list-style-type:decimal;} 
			.wply_bd_listareaLC > li > a { color:#a9a9b1;text-decoration:none;}

		
 div.summary_view{
	height:100px;
	overflow-y:scroll;
	color:#fff;
	opacity:0.7;
	padding: 10px 20px;
 }

#wPlayerSkin.active{height:670px;}
#wPlayerSkin.active .wply_bd_mvarea {height:596px;}
#wPlayerSkin.active .wply_bd_listarea {height:597px;}
#wPlayerSkin.active .wply_bd_list {height:507px;}

.wply_head{position:relative;}
.show_summary_btn{position:absolute;left: 780px;bottom: 3px;border-radius:5px;margin-left:10px;color:#ffffff;background-color:#000000;opacity:1;border:1px solid #ffffff;padding:1px 10px;font-size:12px;}

.wply_bnerZone h4{text-align:center;}


/* 200729 by mr */
#check_alert_div{width:480px; padding:40px 10px; text-align:center; }
#check_alert_div .top_txt{padding-bottom:25px; font-size:18px; font-weight:300; color:#666;}
#check_alert_div .top_txt em{font-size:100%; font-weight:600; font-style:inherit; color:#222; }
#check_alert_div .btn_center{width:100%; font-size:0; }
#check_alert_div .btn_center a{display:inline-block; min-width:160px; margin:0 10px; padding:16px 10px; font-size:16px; text-align:center; }
#check_alert_div .btn_center a.cancel{color:#000; border:1px solid #666; }
#check_alert_div .btn_center a.next_mov_btn{color:#fffefe; background-color: #00479d;}
#check_alert_div .btn_center span.ico{color:#ced1e2; }

div.review-rating{width:100%;height:20px;margin:0 auto;overflow:hidden;display:inline-block;}
div.review-rating a.star{float:left;padding-right:5px;}
div.review-rating a.star span{position: absolute;overflow: hidden;clip: rect(0 0 0 0);width: 1px;height: 1px;margin: -1px;}
div.review-rating a::before{content:"";width:19px;height:18px;display:block;background:url('/template/resp/images/rating.png') repeat left top;}
div.review-rating a.star.on::before, div.review-rating a.star.over::before{background-position:left -18px;}
/*.feedback_div{max-width:90%;width:602px;padding:30px;}
.feedback_div h3{margin:0px;}
.feedback_div >ul>li{display:none;}
.feedback_div >ul>li.active{display:block;}
.feedback_div input.check_text{width:100%;}
.feedback_div textarea.check_text{width:100%;}
.feedback_div .tip_box{display:none;}
.feedback_div .tip_box.active{display:block;}*/

/* quiz */
.quiz_wrap {max-width:600px;width:80vw;min-width:300px;height:94vh;max-height:540px;font-family:"Noto Sans KR", sans-serif; box-sizing:border-box;}
.quiz_wrap >ul>li{display:none;}
.quiz_wrap >ul>li.active{display:block;}
.quiz_wrap .quiz_inner {padding:30px;}
.quiz_wrap .question_box .icon {display:inline-block;font-size:24px;font-weight:bold;letter-spacing:-0.025em;color:#ddd; font-family:'NanumSquare', sans-serif;}
.quiz_wrap .question_box .question {margin:0; line-height:1.5em; font-size:16px;font-weight:bold;letter-spacing:-0.025em;color: #333; word-break:break-all;}
.quiz_wrap .answer_box {margin-top:20px;}
.quiz_wrap .answer_box .multiple_choice_wrap {display:flex;}
.quiz_wrap .answer_box .multiple_choice_wrap .choice_list {flex-grow:1; width:50%;}
.quiz_wrap .answer_box .choice_list {padding-left:0;}
.quiz_wrap .answer_box .choice_list li + li {margin-top:10px;}
.quiz_wrap .answer_box .check_box {position:relative; display:inline-block;}
.quiz_wrap .answer_box .check_box label{display:flex; align-items:center; position:relative; font-size:16px;font-weight:400;letter-spacing:-0.025em;color:#333;cursor:pointer;}
.quiz_wrap .answer_box .check_box input[type="radio"],
.quiz_wrap .answer_box .check_box input[type="checkbox"]{position:absolute;top:0;left:0;visibility:hidden;}
.quiz_wrap .answer_box .check_box label:before {content:''; flex-shrink:0; display: inline-block;width:24px;height:24px;margin-right:10px; background-position: 0 0; -webkit-background-size: 100%; background-size:100%;background-size: cover; background-repeat: no-repeat;vertical-align: top;}
.quiz_wrap .answer_box .check_box input[type="radio"] + label:before {width:20px;height:20px;background-image: url(../images/icon_radio_off.png);}
.quiz_wrap .answer_box .check_box input[type="checkbox"] + label:before {background-image: url(../images/icon_check_off.png);}
.quiz_wrap .answer_box .check_box input[type="radio"]:checked + label:before {background-image:url(../images/icon_radio_on.png);}
.quiz_wrap .answer_box .check_box input[type="checkbox"]:checked + label:before {background-image:url(../images/icon_check_on.png);}
.quiz_wrap .answer_box .check_box input:checked + label {font-weight:bold;color:#476eff;}
.quiz_wrap .answer_box .input_box input {height:auto; padding:17px 19px; background:#fff;}
.quiz_wrap .answer_box .textarea_box textarea {padding:25px 30px; font-weight: 400; resize:none; font-family:'Noto Sans KR', sans-serif;}
.quiz_wrap .answer_box .input_box input,
.quiz_wrap .answer_box .textarea_box textarea {width:100%; line-height:1.5em; font-size:16px; color:#333; letter-spacing:-.025em; border:1px solid #c1c1c1; border-radius:9px; box-sizing:border-box;}
.quiz_wrap .answer_box .input_box input::placeholder,
.quiz_wrap .answer_box .textarea_box textarea::placeholder {color:#c1c1c1;}
.quiz_wrap .answer_box .input_box input:focus,
.quiz_wrap .answer_box .textarea_box textarea:focus {border:1px solid #333;}
.quiz_wrap .answer_box .ox_quiz {display:flex; gap:10px;}
.quiz_wrap .answer_box .ox_box {position:relative; width:50%; height:100px;}
.quiz_wrap .answer_box .ox_box input[type="radio"] {position:absolute;top:0;left:0;visibility:hidden;}
.quiz_wrap .answer_box .ox_box label {width:100%; height:100%; display:flex; justify-content:center; align-items:center; font-size:30px; letter-spacing:-.025em; font-weight:bold; color:#333; border:1px solid #ccc; background:#fff;box-sizing:border-box;border-radius:10px;}
.quiz_wrap .answer_box .ox_box input[type="radio"]:checked + label {border-width:5px; border-color:#476eff;}
.quiz_wrap .answer_explanation_box {margin-top:20px; padding:17px 20px; background:#f8f8f8;border-radius:8px;}
.quiz_wrap .answer_explanation_box .correct_answer {line-height:1.4em;font-size:16px;font-weight:bold;letter-spacing:-.025em;color:#cf102b;}
.quiz_wrap .answer_explanation_box .explanation {margin-top:12px; line-height:1.714em; font-size:14px;letter-spacing:-.025em;color:#999;}
.quiz_wrap .btn_box {display:flex; gap:10px; margin-top:10px;}
.quiz_wrap .btn_box :where(a, button) {flex-grow:1; width:calc(50% - 5px); height:60px; line-height:60px; font-size:16px;font-weight:500;color:#fff;letter-spacing:-.025em; text-align:center; border-radius:9px;}
.quiz_wrap .btn_box .bg_gray {background:#333;}
.quiz_wrap .btn_box .bg_blue {background:#476eff;}
.quiz_wrap .star_rate {position:relative;display:inline-block; width:100px; height:20px; left:-4px; background:url(../images/icon_star_off.png) 0 0 repeat-x; background-size:20px; vertical-align:top; border:none; cursor:pointer;}
.quiz_wrap .star_rate .star_bg {position:absolute;top:0;left:0; width:0px; height:100%; background:url(../images/icon_star_on.png) 0 0 repeat-x; background-size:20px; text-indent:-9999em;}
.quiz_wrap .tip_box{display:none;}
.quiz_wrap .tip_box.active{display:block;}


@media(max-width:767px) {
.quiz_wrap .quiz_inner {padding:20px;}
.quiz_wrap .answer_box .input_box input {padding:11px 15px;}
.quiz_wrap .answer_box .textarea_box textarea {padding:20px;}
.quiz_wrap .btn_box :where(a, button) {height:48px;line-height:48px;font-size:14px;}
}