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

#main_wrap { width:1024px; height:660px; background:url(../../../images/SGFW1/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; vertical-align:middle }
header h1 .section { margin-left:10px; line-height:51px; color:#f0b7c6; 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 }

#contents { position:relative; width:1004px; height:568px; margin:0 auto; background:url(../../../images/SGFW1/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 { width:881px; height:77px; margin:0 auto; border-bottom:1px solid #b1b1b1; 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 .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_wrap { height:348px; overflow:hidden }
#contents .con .quiz_wrap02 { height:425px; overflow:hidden }

#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_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/SGFW1/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/SGFW1/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/SGFW1/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 .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:40px; letter-spacing:-3px; text-align:center; 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; text-align:center }
#contents .con .quiz .quiz_input_answer input { width:80%; height:65px; font-size:40px; border:0; border-radius:5px; background:#eaeaea url('../../../images/SGFW1/quiz/quiz_img_input.png') no-repeat 50% 50%; }
#contents .con .quiz .quiz_question_hint { /*height:50px;*/ color:#ea3061; font-size:35px; text-align:center; font-weight:bold }  /*20170508*/
#contents .con .quiz .quiz_question_hint span { display:inline-block }  /*20170508*/
#contents .con .quiz .quiz_submit { display:block; width:194px; margin:0 auto; margin-top:12px; cursor:pointer } /*20170508*/

#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; border-bottom:1px solid #b1b1b1; margin:0 auto; margin-top:13px; height:25px }
#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/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:#52a613; height:4px; border-radius:9px }
#contents .du_table .search_box_tot_du_graph { width:0%; background:#ff5a1a; height:4px; border-radius:9px }

#contents .search_menu { width:192px; margin:9px auto 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 #263248; font-size:15px; background:#fff url('../../../images/user_search_placeholder.png') no-repeat 0 0; vertical-align:middle }
#contents .search_form input[type='submit'] { background:url('../../../images/user_search_btn.png') no-repeat 0 0; width:30px; height:27px; border:0; cursor:pointer }
#contents .search_result { width:192px; 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 }