@font-face {
    font-family:'NanumSquareR';
    src:url(../font/NanumSquareR.woff) format('woff');
}

@font-face {
    font-family:'NanumSquareB';
    src:url(../font/NanumSquareB.woff) format('woff');
}

@font-face {
    font-family:'NanumSquareRoundB';
    src:url(../font/NanumSquareRoundB.woff) format('woff');
}

@font-face {
    font-family:'NanumSquareRoundEB';
    src:url(../font/NanumSquareRoundEB.woff) format('woff');
}

*{margin:0px; padding:0px; box-sizing:border-box; font-family:NanumSquareB; word-break:keep-all;}
body{position:absolute; width:100%; height:100%; background:#000; overflow:hidden;}
button{tap-highlight-color:transparent; -webkit-tap-highlight-color:transparent; -moz-tap-highlight-color:transparent; -ms-tap-highlight-color:transparent; -o-tap-highlight-color:transparent; outline:none;}
.trans{color:transparent;}

.loading_wrap{z-index:999; position:absolute; width:100%; height:100%; background:#fff; background-size:cover;}
.loading_wrap .loading{position:absolute; display:inline-block; width:200px; height:58px; background:url(../img/loading.gif); margin:auto; padding:0; top:0; right:0; bottom:0; left:0;}
#content_wrap{position:relative; width:100%; height:100%;}
#content{z-index:998; position:absolute; width:100%; height:100%; background:url(../img/content_bg.png) no-repeat; background-position:center; background-size:cover; overflow:hidden;}

#alert_wrap{z-index:5; display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
#alert_wrap #alert_correct{position:absolute; width:360px; height:286px; top:50%; left:50%; margin-top:-143px; margin-left:-180px; background:url(../img/alert_correct.png);}
#alert_wrap #alert_wrong{position:absolute; width:360px; height:286px; top:50%; left:50%; margin-top:-143px; margin-left:-180px; background:url(../img/alert_wrong.png);}
#alert_wrap #alert_re{position:absolute; width:360px; height:286px; top:50%; left:50%; margin-top:-143px; margin-left:-180px; background:url(../img/alert_re.png);}
#mobile_play{z-index:5; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.5);}
#mobile_play img{position:absolute; width:606px; height:391px; top:50%; left:50%; margin-top:-195px; margin-left:-303px;}

/*일반페이지 공통*/
.content_video{z-index:-1;}
.content_html{z-index:1;}
.content_video,
.content_html{position:absolute; margin:-303px 0 0 -503px; top:50%; left:50%; width:1006px; height:568px; border:3px solid #ccc;} /* 테두리의 두께까지 합하여 계산 */
.content_video.mini{width:806px; height:456px; margin:-205px 0 0 -403px;}
.content_video .bug_cover{position:absolute; top:0; right:0; width:1px; height:100%; background:#ccc;}
.content_html.sudden, 
.content_html.quiz{background:url(../img/content_bg_q.png) no-repeat; background-position:center; background-size:cover;}
.content_html.org{background:url(../img/content_bg_org.png) no-repeat; background-position:center; background-size:cover;}
.content_html.outro_ref{background:none;}
.content_html.quiz{display:none;}
video#mainMedia{position:absolute; margin:auto; padding:0; top:0; right:0; bottom:0; left:0; width:100%;}

/************ 하단 컨트롤바 ************/
.controls{z-index:3; position:absolute; width:100%; min-width:1000px; height:38px; padding:0; bottom:0; left:0; font-size:0; background:url(../img/con_bg.png) no-repeat; background-size:100% 100%;}
.controls .control_wrap{position:relative; width:1000px; height:100%; margin:0 auto;}

.controls .area_bar{position:absolute; top:18px; left:345px; display:inline-block; width:243px; height:2px;}
.controls .area_bar #bar_event{position:absolute; display:inline-block; width:100%; height:100%; top:0; left:0; cursor:pointer;}
.controls .area_bar #bar_pointer{display:inline-block; transform:translateX(-50%); margin-top:-4px; width:10px; height:10px; background:#fff; border-radius:50%; cursor:pointer;}
.controls .area_bar #bar_display_bg{position:absolute; top:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.2);}
.controls .area_bar #bar_display_bg #bar_display_mask{position:absolute; top:0; left:0; width:0; height:100%; overflow:hidden;}
.controls .area_bar #bar_display_bg #bar_display_mask #bar_display_fill{position:absolute; top:0; left:0; width:1000px; height:100%; background:#fff;}

.controls #quickMark .mark{position:absolute; top:0; margin-left:-10px; width:20px; height:100%; text-align:center; cursor:pointer;}
.controls #quickMark .mark .displayMark{display:inline-block; width:1px; height:100%; background:#fff;}
.controls #quickMark .mark:hover .displayMark{background:#8a230f;}
.controls #quickBubble .text,
.controls #quickMark .mark .text{display:none; position:absolute; padding:4px 6px; left:0; bottom:80px; height:20px; border-radius:5px; background:#8a230f; color:#fff; font-size:12px; line-height:12px; font-family:NanumSquareR;}
.controls #quickBubble .text{display:inline-block; top:-9999px; left:-9999px;}
.controls #quickMark .mark .text::after{content:""; display:inline-block; position:absolute; margin-left:-0.5px; top:20px; left:50%; width:1px; height:50px; background:#8a230f;}
.controls #quickMark .mark:hover .text{display:inline-block;}

.controls .area_watermark{display:inline-block; position:absolute; left:30px; margin:5px 0; width:90px; height:28px; background:url(../img/con_watermark.png);}

.controls .area_controls1{position:absolute; display:inline-block; left:170px; height:100%;}
.controls .area_controls2{position:absolute; display:inline-block; left:700px; height:100%; vertical-align:top;}
.controls .btn_wrap{position:relative; display:inline-block; margin:4px 1px; vertical-align:top; width:30px; height:30px; border:none; background:none;}
.controls button+.btn_bubble{display:none; position:absolute; padding:4px 0; bottom:40px; left:50%; transform:translateX(-50%); width:76px; height:20px; background:url(../img/con_btn_bubble.png) no-repeat; color:#fff; font-size:12px; line-height:12px; font-family:NanumSquareR; text-align:center;}
.controls button:hover+.btn_bubble{display:inline-block;}

.controls #btn_learningmap,
.controls #btn_download{position:relative; box-sizing:content-box; overflow:visible; cursor:pointer;}
.controls #btn_learningmap,
.controls #btn_download{display:inline-block; width:100%; height:100%; border:none; background:none;}
.controls #btn_learningmap{background:url(../img/con_map.png) no-repeat; background-position:center;}
.controls #btn_learningmap:hover{background:url(../img/con_map_over.png) no-repeat; background-position:center;}
.controls #btn_download{background:url(../img/con_down.png) no-repeat; background-position:center;}
.controls #btn_download:hover{background:url(../img/con_down_over.png) no-repeat; background-position:center;}

.controls #btn_play,
.controls #btn_pause,
.controls #btn_replay,
.controls #btn_script,
.controls #btn_sound{position:relative; display:inline-block; width:100%; max-width:30px; height:100%; border:none; cursor:pointer;}
.controls .btn_wrap.script{width:40px;}
.controls #btn_script{max-width:40px;}

.controls #btn_play{background:url(../img/con_play.png) no-repeat; background-position:center;}
.controls #btn_play:hover, .controls #btn_play.on{background:url(../img/con_play_over.png) no-repeat; background-position:center;}
.controls #btn_pause{background:url(../img/con_pause.png) no-repeat; background-position:center;}
.controls #btn_pause:hover, .controls #btn_pause.on{background:url(../img/con_pause_over.png) no-repeat; background-position:center;}
.controls #btn_replay{background:url(../img/con_rewind.png) no-repeat; background-position:center;}
.controls #btn_replay:hover{background:url(../img/con_rewind_over.png) no-repeat; background-position:center;}
.controls #btn_script{background:url(../img/con_script.png) no-repeat; background-position:center;}
.controls #btn_script:hover{background:url(../img/con_script_over.png) no-repeat; background-position:center;}
.controls #btn_sound{background:url(../img/con_sound.png) no-repeat; background-position:center;}
.controls #btn_sound:hover{background:url(../img/con_sound_over.png) no-repeat; background-position:center;}
.controls #btn_sound.mute{background:url(../img/con_sound_mute.png) no-repeat; background-position:center;}
.controls #btn_sound.mute:hover{background:url(../img/con_sound_mute_over.png) no-repeat; background-position:center;}

.controls .area_time{position:absolute; display:inline-block; left:605px; height:38px; text-align:center; vertical-align:top;}
.controls .area_time #cTime,
.controls .area_time #tTime,
.controls .area_time #slice{display:inline-block; height:100%; color:#fff; font-size:12px; line-height:38px; font-family:NanumSquareR;}
.controls .area_time #tTime{color:#cdc9c9;}
.controls .area_time #slice{margin:0 3px;}

/* 사운드 조절바 */
.controls #sound_wave{position:relative; display:inline-block; margin:18px 3px; width:66px; height:2px; vertical-align:top;}
.controls #sound_wave #sound_display_bg{position:relative; width:100%; height:2px; background:rgba(255, 255, 255, 0.2);}
.controls #sound_wave #sound_display_bg #sound_display_mask{position:absolute; top:0; left:0; width:0; height:100%; overflow:hidden;}
.controls #sound_wave #sound_display_bg #sound_display_mask #sound_display_fill{position:absolute; top:0; left:0; width:61px; height:100%; background:#fff; bottom:0;}
.controls #sound_wave #sound_event{position:absolute; top:0; width:100%; height:100%; cursor:pointer;}
.controls #sound_wave #sound_pointer{position:absolute; top:-4px; left:0; transform:translateX(-50%); width:10px; height:10px; background:rgba(0, 0, 0, 0); cursor:pointer;}

/* 배속 */
.controls .area_speed{position:absolute; display:inline-block; left:165px; width:40px; height:100%; text-align:center; vertical-align:top; transition:0.1s left;}
.controls .area_speed.move{left:235px;}
.controls .area_speed #display_speed{display:inline-block; padding:13px 0; width:100%; font-family:NanumSquareR; line-height:14px; font-size:14px; color:#fff; cursor:pointer;}
.controls .area_speed #display_speed:hover{color:#88ffc0;}
.controls .area_speed #speed_list{display:none; position:absolute; left:0; padding-bottom:2px; bottom:40px;}
.controls .area_speed #speed_list .btn_speed{display:inline-block; padding:6px 0; width:40px; height:26px; color:#fff; font-size:14px; line-height:14px; font-family:NanumSquareR; text-align:center; cursor:pointer; background-color:rgba(0,0,0,0.8);}
.controls .area_speed #speed_list .btn_speed:hover{color:#88ffc0;}
.controls .area_speed:hover #speed_list{display:inline-block;}

/* 페이지 이동 */
.controls .area_movePage{position:absolute; display:inline-block; height:100%; right:15px; vertical-align:top;}
.controls .area_movePage #btn_prev,
.controls .area_movePage #btn_next{position:relative; display:inline-block; margin:0 4px; width:26px; height:38px; cursor:pointer;}
.controls .area_movePage #btn_prev{background:url(../img/con_prev.png) no-repeat; background-position:center;}
.controls .area_movePage #btn_prev:hover{background:url(../img/con_prev_over.png) no-repeat; background-position:center;}
.controls .area_movePage #btn_next{background:url(../img/con_next.png) no-repeat; background-position:center;}
.controls .area_movePage #btn_next:hover{background:url(../img/con_next_over.png) no-repeat; background-position:center;}
.controls .area_movePage #currentPage,
.controls .area_movePage #slice,
.controls .area_movePage #totalPage{position:relative; display:inline-block; vertical-align:top;}
.controls .area_movePage #currentPage{margin:7px 0; font-size:24px; line-height:24px; color:#e0a16b; font-family:NanumSquareR; text-align:right;}
.controls .area_movePage #slice{display:inline-block; margin:11px 5px; width:1px; height:16px; background:#fff;}
.controls .area_movePage #totalPage{margin:10px 0; font-size:18px; line-height:18px; color:#b8b8b8; font-family:NanumSquareR; text-align:left;}

.controls #next_bubble{display:none; position:absolute; bottom:38px; right:0; width:157px; height:24px; background:url(../img/con_bubble_next.png);}
.controls #next_bubble.last{background:url(../img/con_bubble_last.png);}

/******************  객관식 퀴즈  ******************/
#quiz_start{display:none; position:absolute; bottom:85px; right:235px; width:148px; height:40px; cursor:pointer; background:url(../img/q_start.png);}
#quiz_start:hover{background:url(../img/q_start_over.png);}

.review_wrap{z-index:1; display:inline-block; position:absolute; top:90px; right:20px;}
.review_wrap .review{position:relative; display:inline-block; margin:0 2px; cursor:normal;}
.review_wrap.review_mode .review{cursor:pointer;}
.review_wrap .review .re_correct{position:absolute; width:52px; height:52px; top:0px; left:-3px;}
.review_wrap .review .review_ball{display:inline-block; padding:16px 0; width:46px; height:52px; background:url(../img/q_rev_bg.png) no-repeat; color:#fff; font-size:21px; line-height:21px; text-align:center;}
.review_wrap .review.on .review_ball,
.review_wrap.review_mode .review:hover .review_ball{background:url(../img/q_rev_bg_over.png) no-repeat;}

.quiz_wrap{display:none; margin-top:90px; margin-left:30px; width:100%; max-width:1000px;}
.quiz_wrap .pageQ_text{position:relative; display:table; margin-bottom:-20px;}
.quiz_wrap .pageQ_text .display_correct{position:absolute; display:inline-block; top:27px; left:27px; width:90px; height:90px; visibility:hidden;}
.quiz_wrap .pageQ_text .qNum{display:table-cell; float:left; width:149px; height:149px; background:url(../img/q_num_bg.png) no-repeat;}
.quiz_wrap .pageQ_text .qNum p{display:inline-block; width:100%; margin-top:49px; padding-right:5px; font-family:NanumSquareRoundEB; font-size:52px; line-height:52px; color:#303030; letter-spacing:-5px; text-align:center;}
.quiz_wrap .pageQ_text .question{display:table-cell; vertical-align:middle; padding-left:15px; width:640px; color:#362f2f; font-size:22px; line-height:28px; font-family:NanumSquareRoundB;}
.quiz_wrap .pageQ_text .question strong{color:#ff1800; border-bottom:2px solid #ff4200; font-family:NanumSquareRoundB; font-weight:normal;}
.quiz_wrap .pageQ_sub{display:inline-block; color:#df2c26; max-width:640px; margin:-15px 0 15px 160px; padding:5px; font-size:20px; background:#fff; border:1px solid #231f20; font-family:NanumSquareRoundB;}
.quiz_wrap .page{position:relative; margin-left:160px; height:100%;}
.quiz_wrap .page .select{display:table; margin-bottom:10px; cursor:pointer;}
.quiz_wrap .page .select .ball{display:inline-block; float:left; position:relative; padding:4px 5px 5px 4px; background:url(../img/q_ball_bg.png) no-repeat; text-align:center; width:29px; height:29px; color:#fff; font-size:20px; line-height:20px;}
.quiz_wrap .page .select.end:hover .ball{background:url(../img/q_ball_bg.png) no-repeat !important;}
.quiz_wrap .page .select:hover .ball,
.quiz_wrap .page .select.answer .ball,
.quiz_wrap .page .select.end.answer:hover .ball{background:url(../img/q_ball_bg_over.png) no-repeat !important;}
.quiz_wrap .page .select .ball .check{position:absolute; bottom:7px; left:-1px; visibility:hidden; width:38px; height:37px; background:url(../img/q_user_chk.png) no-repeat;}
.quiz_wrap .page .select .ball .ans{display:none; position:absolute; top:-9px; left:-9px; width:46px; height:46px; background:url(../img/q_ans.png) no-repeat;}
.quiz_wrap .page .select.click .ball .check{visibility:visible;}
.quiz_wrap .page .select.answer .ans{display:block;}

.quiz_wrap .page .select p{display:inline-block; max-width:580px; margin-left:10px; padding-top:2px; color:#362f2f; font-size:20px; line-height:24px; font-family:NanumSquareRoundB;}
.quiz_wrap .page .select.end.answer p{color:#9861b7;}

.quiz_wrap .page .text_field{width:600px; height:80px; font-size:18px; line-height:24px; color:#362f2f; font-family:NanumSquareRoundB; resize:none;}

.quiz_wrap .viewCon{display:none; z-index:1; display:none; position:absolute; width:131px; height:36px; right:155px; bottom:150px; background:url(../img/q_ref.png); cursor:pointer;}
.quiz_wrap .viewCon:hover{background:url(../img/q_ref_over.png);}
.quiz_wrap .btnCheck{z-index:1; display:none; position:absolute; width:131px; height:36px; right:40px; bottom:150px; background:url(../img/q_chk.png); cursor:pointer;}
.quiz_wrap .btnCheck:hover{background:url(../img/q_chk_over.png);}
.quiz_wrap .btnNext{z-index:1; display:none; position:absolute; width:131px; height:36px; right:40px; bottom:150px; cursor:pointer; background:url(../img/q_next.png);}
.quiz_wrap .btnNext:hover{background:url(../img/q_next_over.png);}
.quiz_wrap .btnNext.result{background:url(../img/q_fin.png);}
.quiz_wrap .btnNext.result:hover{background:url(../img/q_fin_over.png);}

.quiz_wrap .explain_wrap{display:none; position:absolute; bottom:3px; left:39px; width:922px; height:141px; background:url(../img/q_explain_bg.png) no-repeat;}
.quiz_wrap .explain_wrap .answer_area{position:relative; display:inline-block; width:142px; height:141px;}
.quiz_wrap .explain_wrap .answer_area .label_answer{display:inline-block; width:100%; margin-top:20px; color:#303030; font-size:22px; line-height:22px; text-align:center;}
.quiz_wrap .explain_wrap .answer_area .answer{display:inline-block; width:100%; margin-top:22px; font-size:45px; line-height:45px; color:#303030; text-align:center; font-family:NanumSquareRoundB;}
.quiz_wrap .explain_wrap .explain_area{position:relative; display:inline-block; margin:20px 0 20px 20px; width:650px; height:101px; vertical-align:top; overflow-y:auto;}
.quiz_wrap .explain_wrap .explain_area .label_explain{display:none;}
.quiz_wrap .explain_wrap .explain_area .explain{display:table; height:100%;}
.quiz_wrap .explain_wrap .explain_area .explain p{display:table-cell; margin:10px 0; font-size:18px; line-height:28px; color:#303030; vertical-align:middle; font-family:NanumSquareRoundB;}

.quiz_wrap .explain_wrap.str{background:url(../img/q_explain_str_bg.png) no-repeat;}
.quiz_wrap .explain_wrap.str .answer_area{display:none;}
.quiz_wrap .explain_wrap.str .explain_area{width:750px;}

#popup_wrap{z-index:5; display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
#popup_wrap #popup{display:inline-block; position:absolute; width:900px; max-height:560px; overflow-y:auto; overflow-x:hidden; left:50%; top:50%; margin-top:-292px; margin-left:-450px; background:#fff; border:2px solid #1f1f1f; box-sizing:content-box;}
#popup_wrap #popup img{width:880px; margin:10px;}
#popup_wrap #popup_close{margin-top:38px; margin-left:953px; width:30px; height:30px; background:url(../img/q_ref_close.png); cursor:pointer;}
#popup_wrap #popup_close:hover{background:url(../img/q_ref_close_over.png);}

/******************  결과화면  ******************/
.result_wrap{position:relative; display:none; width:100%; height:100%; padding-left:474px; padding-right:66px; background:url(../img/q_result_bg.png) no-repeat; background-position:top center; text-align:center;}

.result_wrap .resultStr{position:relative; display:inline-block; margin-top:193px; width:100%; text-align:center; font-size:24px; color:#000; line-height:24px; vertical-align:top; font-family:NanumSquareRoundB;}
.result_wrap .resultStr .totalQNum{display:inline-block;}
.result_wrap .resultStr .correctQNum{display:inline-block; text-align:center; font-size:24px; color:#ff4c06; line-height:24px; vertical-align:top; font-family:NanumSquareRoundB;}

.result_wrap .resultTable{position:relative; display:inline-block; width:100%; margin:20px auto; padding:0 20px; border-collapse:collapse; text-align:center; background:rgba(255, 255, 255, 0.5); border:1px solid rgba(0, 0, 0, 0.3);}
.result_wrap .resultTable .labelRow td{padding:7px 0 23px; font-family:NanumSquareRoundB; font-size:56px; letter-spacing:-2px; color:#403c9c; background:url(../img/q_result_dot.png) no-repeat; background-position:bottom center;}
.result_wrap .resultTable .viewRow{height:85px;}
.result_wrap .resultTable .viewRow td{padding:5px;}
.result_wrap .resultTable .viewRow td img{width:100%; max-width:59px; pointer-events:none; vertical-align:middle;}

.result_wrap .btns{position:relative; display:inline-block; margin-top:40px; width:100%; text-align:center;}
.result_wrap .btnRetest{position:relative; float:left; display:inline-block; background:url(../img/q_retest.png); width:214px; height:36px; z-index:10; cursor:pointer;}
.result_wrap .btnRetest:hover{background:url(../img/q_retest_over.png);}
.result_wrap .btnRetest.incorrect{background:url(../img/q_incorrect.png);}
.result_wrap .btnRetest.incorrect:hover{background:url(../img/q_incorrect_over.png);}
.result_wrap .btnReview{position:relative; float:right; display:inline-block; background:url(../img/q_review.png); width:214px; height:36px; z-index:10; cursor:pointer;}
.result_wrap .btnReview:hover{background:url(../img/q_review_over.png);}