body { width:1024px; height:660px; background:url(../../../images/MGFW1/background.png) no-repeat 0 0 }

#main_wrap { width:1024px; height:660px; background:url(../../../images/MGFW1/background.png) no-repeat 0 0 }

header { position:relative }
header .logo { position:absolute; top:25px; right:48px }
header h1 { display:block; height:44px; border-top:7px solid rgba(255, 255, 255, .2)}
header h1 .title { margin-left:19px; line-height:51px; color:#fff; font-weight:bold; vertical-align:middle }
header h1 .unit { margin-left:10px; line-height:51px; color:#fff; font-weight:bold; font-size:12px; vertical-align:middle }
header h1 .section { margin-left:10px; line-height:51px; color:#eff1c2; font-weight:bold; vertical-align:middle }

nav { width:1004px; margin:0 auto }
nav > ul { height:30px }
nav > ul > li { float:left; width:129px; height:30px; margin-right:3px }
/* sub */
nav > ul > li > ul { position:absolute; top:29px; left:0; z-index:9; width:129px; height:28px }
nav > ul > li > ul > li { float:left; font-size:13px; width:64px; height:30px; line-height:35px; text-align:center }
nav > ul > li > ul > li:last-child { padding-left:1px; background:url(../../../images/MGFW1/tab/nav_bar.png) no-repeat 0 50% }
nav > ul > li > ul > li { display:none }

#contents { position:relative; width:1004px; height:568px; margin:0 auto; background:url(../../../images/MGFW1/contents_background.png) no-repeat 0 0 }
#contents .con article { width:1004px; height:518px }
#contents .con article h2 { padding-left:24px; height:26px; line-height:32px; background:#fff }
#contents .con .video_box { position:relative; width:738px; height:425px; margin:32px 0 0 22px; border-radius:10px; background:#000 } 
#contents .con .video_contents { display:block; position:absolute; top:0; bottom:0; left:0; right:0; width:720px; height:405px; margin:auto; border:0px solid }

#contents .con .con_box { position:relative; width:960px; height:425px; margin:32px 0 0 22px; border-radius:10px; background:#fff }
#contents .con .con_readalong h3 { width:881px; height:77px; margin:0 auto; padding-left:8px; border-bottom:1px solid #b1b1b1; line-height:90px }
#contents .con .con_readalong .mp3_menu { position:absolute; top:25px; right:36px; border:0px solid }
#contents .con .con_readalong_text { width:856px; height:/*347*/269px; margin:0 auto; overflow-y:auto; font-size:28px; font-weight:bold; padding:0px 0 39px 34px; color:#02243d }

#contents .con .quiz_contents h3 { position:relative; width:881px; height:77px; margin:0 auto; border-bottom:1px solid #2e303d; line-height:90px } /*20170508*/
#contents .con .quiz_contents h3 img { /*margin-left:12px*/ } /*20170508*/
#contents .con .quiz_contents h3 span { padding-left:5px; font-weight:bold; font-size:28px; color:#0e3f6c; vertical-align:middle } 
#contents .con .quiz_contents h3 .quiz_submit { position:absolute; bottom:7px; right:0; cursor:pointer /*bottom:0; margin-top:auto; margin-bottom:auto*/ }


/*#contents .con .quiz_contents .quiz_answer_choice { display:none; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; background: rgba(255, 255, 255, .6); border-radius:15px; width:249px; height:139px; z-index:9 }*/
/*#contents .con .quiz_contents .quiz_answer_choice { display:none; position:absolute; bottom:0; right:48px; margin:auto; width:249px; height:139px; z-index:9 }*/
#contents .con .quiz_contents .quiz_answer_choice { display:none; position:absolute; bottom:0; right:10px; margin:auto; width:363px; height:222px; z-index:9 }

#contents .con .quiz_wrap { height:348px; overflow:hidden }
#contents .con .quiz_wrap02 { height:425px; overflow:hidden }
#contents .con .quiz_wrap03 { height:348px; overflow:hidden }
#contents .con .quiz_wrap03 { font-family:'맑은 고딕','Malgun Gothic','돋움',Dotum,AppleGothic,sans-serif !important }

#contents .con .quiz { width:849px; margin:0 auto; margin-top:25px; font-size:30px; /*line-height:60px;*/ overflow:hidden } /*20170508*/
#contents .con .quiz.top { margin-top:60px }

#contents .con .quiz_wrap02 .quiz_font { font-family:'맑은 고딕','Malgun Gothic','돋움',Dotum,AppleGothic,sans-serif }

#contents .con .quiz_wrap02 .quiz_res_1 { width:825px; height:128px; margin:0 auto; margin-top:32px; border-bottom:1px solid #b1b1b1; font-size:30px; line-height:60px; overflow:hidden } /*20170508*/
#contents .con .quiz_wrap02 .quiz_res_2 { width:825px; height:113px; margin:0 auto; font-size:30px; line-height:60px; overflow:hidden } /*20170508*/

#contents .con .quiz_wrap02 .quiz_res_1_table { margin-top:12px }
#contents .con .quiz_wrap02 .quiz_res_1_table .td_1 { width:159px; height:100px; line-height:24px }
#contents .con .quiz_wrap02 .quiz_res_1_table .td_2 { width:162px; height:50px }
#contents .con .quiz_wrap02 .quiz_res_1_table .td_3 { width:393px }
#contents .con .quiz_wrap02 .quiz_res_1_table .td_4 { width:111px }
#contents .con .quiz_wrap02 .quiz_res_1_table .td_5 { height:50px }
#contents .con .quiz_wrap02 .quiz_res_1_table .tfont { color:#02243d; font-size:24px; line-height:24px; font-weight:bold }
#contents .con .quiz_wrap02 .quiz_res_1_table .tgraph { background:url('../../../images/MGFW1/video_du_graph.png') no-repeat 0 50% }
#contents .con .quiz_wrap02 .quiz_res_1_table .tdubg { text-align:center; color:#fff; font-size:21px; line-height:21px; font-weight:bold; background:url('../../../images/MGFW1/video_du_bg.png') no-repeat 50% 50% }

#contents .con .quiz_wrap02 .quiz_res_2_table { margin-top:27px }

#contents .con .quiz_wrap02 .quiz_res_2_table .td_1 { width:159px; height:50px; line-height:24px }
#contents .con .quiz_wrap02 .quiz_res_2_table .td_2 { width:666px; background:url('../../../images/MGFW1/quiz_du_graph.png') no-repeat 0 50% }

#contents .con .quiz_wrap02 .grade { width:825px; height:119px; margin:0 auto; background:#eaeaea }
#contents .con .quiz_wrap02 .grade img { margin:29px 0 0 40px }

#contents .con .quiz_wrap03 .quiz { width:881px; height:346px; margin:0 auto; margin-top:0px; font-size:30px; /*line-height:60px;*/ overflow:hidden } /*20170508*/
#contents .con .quiz_wrap03 .quiz.top { margin-top:0px }
#contents .con .quiz_wrap03 .quiz input { height:60px; font-size:34px; border:0; border-radius:5px; background:#eaeaea /*url('../../../images/MGFW1/quiz/quiz_img_input.png') no-repeat 50% 50%;*/ }

#contents .con .quiz .quiz_img01 { float:left }
#contents .con .quiz .quiz_img02 { float:left }
#contents .con .quiz .quiz_img03 { float:left }
#contents .con .quiz .quiz_img04 { float:left }

#contents .con .quiz .quiz_img05 { /*width:100%*/ }
#contents .con .quiz .quiz_img06 { /*width:100%*/ }

#contents .con .quiz .quiz_left { float:left }
#contents .con .quiz .quiz_top { }

#contents .con .quiz .quiz_left_bg { float:left; position:relative; width:531px ; height:287px; font-weight:bold; color:#2c2c2c; line-height:38px } /*20170508*/
#contents .con .quiz .quiz_left_bg span { position:absolute; left:0; right: 0; top: 0; bottom: 0; margin: auto; width:95%; height:90% } /*20170508*/

#contents .con .quiz .quiz_center_bg_1 { position:relative; width:865px; height:73px; margin-bottom:30px; background:#f0f0f0; font-weight:bold; color:#2c2c2c } /*20170508*/
#contents .con .quiz .quiz_center_bg_1 span { position:absolute; left:0; right: 0; top: 0; bottom: 0; margin: auto; height:85% } /*20170508*/
#contents .con .quiz .quiz_center_bg_1 .sp1 { width:15%; } 
#contents .con .quiz .quiz_center_bg_1 .sp2 { width:28%; } 
#contents .con .quiz .quiz_center_bg_1 .sp3 { width:32%; }

#contents .con .quiz .quiz_center_bg_2 { position:relative; width:830px; height:180px; margin:0 auto; margin-bottom:30px; background:#f0f0f0; font-weight:bold; color:#2c2c2c } /*20170508*/
#contents .con .quiz .quiz_center_bg_2 span { position:absolute; right: 0; top: 0; bottom: 0; width:74%; height:100% } /*20170508*/



#contents .con .quiz .quiz_left_text_bg { float:left; position:relative; width:531px ; height:287px; border-radius:9px; background:#f0f0f0; font-weight:bold; font-size:30px; color:#2c2c2c; line-height:38px;  }
#contents .con .quiz .quiz_left_text_bg span { position:absolute; left:0; right: 0; top: 0; bottom: 0; margin: auto; width:90%; height:70% }

#contents .con .quiz .quiz_left_text_bottom { float:left; position:relative; width:531px ; height:287px }
#contents .con .quiz .quiz_left_text_bottom div { position:relative;  width:531px; height:73px; border-radius:9px; background:#f0f0f0; font-weight:bold; font-size:30px; color:#2c2c2c }
#contents .con .quiz .quiz_left_text_bottom span { position:absolute; left:0; right: 0; top: 0; bottom: 0; margin: auto; width:85%; height:85% }





#contents .con .quiz .ul_01 { float:right; width:274px; margin-top:1px } /*20170508*/
#contents .con .quiz .ul_01 li { height:63px; margin-bottom:10px; background:#49a717; text-align:center; border-radius:8px; cursor:pointer }
#contents .con .quiz .ul_01 li:last-child { margin-bottom:0px }
#contents .con .quiz .ul_01 li span { font-weight:bold; color:#fff }

#contents .con .quiz .ul_02 { }
#contents .con .quiz .ul_02 li { float:left; width:25%; height:25%; text-align:center; cursor:pointer }
#contents .con .quiz .ul_02 li:last-child { margin-bottom:0px }
#contents .con .quiz .ul_02 li span { display:inline-block }
#contents .con .quiz .ul_02 li img { width:90% }

#contents .con .quiz .ul_03 { width:783px; margin:0 auto; margin-top:20px } /*20170508*/
#contents .con .quiz .ul_03 li { float:left; width:180px; height:63px; margin-right:21px; height:25%; background:#49a717; text-align:center; border-radius:8px; cursor:pointer } /*20170508*/
#contents .con .quiz .ul_03 li:last-child { margin-right:0 }
#contents .con .quiz .ul_03 li span { display:inline-block; font-weight:bold; color:#fff }

#contents .con .quiz .quiz_question { font-size:32px; letter-spacing:-2px; font-weight:bold } /*20170508*/
#contents .con .quiz .quiz_question_cf { font-size:35px; text-align:center; font-weight:bold }

/*#contents .con .quiz .quiz_input_answer { margin-top:0px; font-size:30px; background:#eaeaea; border-radius:5px }*/
/*#contents .con .quiz .quiz_input_answer input { padding:0; margin:6px 10px 0 10px; width:50%; height:50px; font-size:37px; border:0; background:#eaeaea url('../../../images/MGFW1/quiz/quiz_img_input.png') no-repeat 50% 50%; }*/

#contents .con .quiz .quiz_input_answer { margin-top:0px; font-size:30px; /*text-align:center*/ padding-left:20px }
#contents .con .quiz .quiz_input_answer input { height:60px; font-size:40px; border:0; border-radius:5px; background:#eaeaea url('../../../images/MGFW1/quiz/quiz_img_input.png') no-repeat 50% 50%; }

#contents .con .quiz .quiz_question_hint { /*height:50px;*/ color:#ea3061; font-size:38px; /*text-align:center;*/ padding-left:40px; font-weight:bold }  /*20170508*/
#contents .con .quiz .quiz_question_hint span { display:inline-block }  /*20170508*/
#contents .con .quiz .quiz_submit { display:block; width:214px; margin:0 auto; margin-top:12px; cursor:pointer } /*20170508*/

#contents .con .memo_box { position:absolute; top:0; bottom:0; left:0; right:0; width:845px; height:385px; margin:auto; /*background:#000*/ } 
/*#contents .con .video_contents { display:block; position:absolute; top:0; bottom:0; left:0; right:0; width:720px; height:405px; margin:auto; border:0px solid }*/

#contents .con .memo_box .memo_nav { height:30px; background:#f2f2f2 }
#contents .con .memo_box .memo_nav .memo_nav_main { width:807px; margin-left:auto; margin-right:auto; margin-top:3px }
#contents .con .memo_box .memo_nav .memo_nav_main > li { float:left; position:relative; width:78px; height:22px; margin-left:3px; text-align:center; background:#f0563e; color:#fff; line-height:22px; cursor:pointer }
#contents .con .memo_box .memo_nav .memo_nav_main > li:first-child { margin-left:0 }
#contents .con .memo_box .memo_nav .memo_nav_main > li.on { color:yellow }
#contents .con .memo_box .memo_nav .memo_nav_main:after { display:block; content:''; clear:both }


#contents .con .memo_box .memo_nav .memo_nav_sub { display:none; position:absolute; width: 250px }
#contents .con .memo_box .memo_nav .memo_nav_sub > li { float:left; width:60px;  background:#b7c11e; cursor:pointer }

#contents .con .memo_box .memo_nav .memo_nav_main > li:hover ul {display:block} 

#contents .aside_box { position:absolute; top:58px; right:22px; width:211px; height:425px; border-radius:10px; background: rgba(255, 255, 255, .6) }
#contents .aside_box .user_box { width:199px; height:54px; border-bottom:1px solid #b1b1b1; margin:0 auto; margin-top:13px; height:54px }
#contents .aside_box .user_box .user_img { float:left; margin:1px 0 0 5px }
#contents .aside_box .user_box ul li { float:left  }
#contents .aside_box .user_box ul .user_message { margin:0 0 0 8px }
#contents .aside_box .user_box ul .user_coupon { margin:0 0 0 2px }
#contents .aside_box .user_box ul .user_setting { margin:0 0 0 2px }
#contents .aside_box .user_box ul .user_id_view span { font-size:17px; font-weight:bold; color:#263248; margin:7px 0 0 8px }
#contents .aside_box .user_box:after { display: block; content: ''; clear: both }
#contents .aside_box .search_menu_box { width:199px; height:21px; margin:0 auto; margin-top:11px }
#contents .aside_box .search_menu_box li { float:left; margin:0 0 0 3px }

#contents .aside_box .search_box { width:199px; margin:0 auto; background:#bbb }

#contents .user_info_box { display:none; position:absolute; top:58px; right:22px; width:211px; height:425px; border-radius:10px; background:#fff }

#contents .du_table { width: 199px;  border-collapse: collapse; border:0px solid; margin:7px auto 7px auto }
#contents .du_table th { width:48px }
#contents .du_table th span { font-size:11px; letter-spacing:-1px; margin-left:6px; color:#02253b; border:0px solid }
#contents .du_table td span { display:block; width:144px; height:4px; background:url('../../../images/MGFW1/user_duration.png') no-repeat 0 0 }
#contents .du_table th, .du_table td { height:15px; font-weight: bold; border:0px solid }
#contents .du_table .search_box_cur_du_graph { width:0%; background:#00a8aa; height:4px; border-radius:9px }
#contents .du_table .search_box_tot_du_graph { width:0%; background:#0092d4; height:4px; border-radius:9px }

#contents .search_menu { width:192px; margin:0 auto }
#contents .search_menu li { float:left; margin-left:2px; height:21px  }
#contents .search_menu li:first-child { margin-left:0  }
#contents .search_menu:after { display:block; content:''; clear:both }

#contents .search_form { display:block; width:192px; margin:6px auto 0 auto }
#contents .search_form legend { display:none }
#contents .search_form input[type='text'] { width:158px; height:23px; border:2px solid #2e323e; font-size:15px; background:#fff url('../../../images/MGFW1/user_search_placeholder.png') no-repeat 0 0; vertical-align:middle }
#contents .search_form input[type='submit'] { background:url('../../../images/MGFW1/user_search_btn.png') no-repeat 0 0; width:30px; height:27px; border:0; cursor:pointer }
#contents .search_result { width:192px; height:260px; /*height:240px;*/ margin:6px auto 0 auto; overflow:auto }

#contents .footer { width:1004px; height:50px }

.word-data { -x-background: #ffffee; }
.current-word { background: yellow; outline: solid 2px yellow; /*box-shadow: 0 0 10px rgba(0,0,0,0.5)*/ }
.aligned-word:hover { cursor: pointer; background: #feffdc }

.bdr { border:1px solid }