/*응시 화면 새창*/
body.exam_body {background: #eee}
#screen_doc {position: relative;display: block;overflow: hidden;}

#screen_doc .head_fix {position: fixed;top: 0;left: 0;width: 100%;z-index: 500}

.screen_head {position: relative; display: block;padding: 0 135px;height: 60px;
    background: #ff9e0b; /* Old browsers */
    background: -moz-linear-gradient(left,  #ff9e0b 0%, #f2175e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #ff9e0b 0%,#f2175e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #ff9e0b 0%,#f2175e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9e0b', endColorstr='#f2175e',GradientType=1 ); /* IE6-9 */
}
.screen_head h1 {position: absolute;top: 17px;left: 20px;display: inline-block;}
.screen_head .title {position: relative;display: block;height: 30px;line-height: 30px;padding: 15px 0;text-align: center;color: #fff;font-size: 16px;font-weight: 600}
.screen_head .screen_close {position: absolute;top: 0;right: 0;width: 60px;height: 60px;text-align: center;background: rgba(0,0,0,0.5) url("/re_images/manager/pc/screen/screen_close.png") no-repeat }

.screen_type_wrap {position: relative;display: block;overflow: hidden;height: 30px;background: #e8ebf1;padding: 15px 220px 15px 20px;border-bottom: 1px solid #d7dce3}
.screen_type_wrap .screen_type {position: relative;display: block;overflow: hidden;}
.screen_type_wrap .screen_type li {float: left;margin-right: 3px}
.screen_type_wrap .screen_type li a {display: inline-block;padding: 0 15px;background: #fff;color: #222;line-height: 30px;height: 30px;}
.screen_type_wrap .screen_type li.active a {background: #13181e;color: #fff }

.screen_type_wrap .subject_select {position: relative;display: inline-block;overflow: hidden;background: #ced1d8;padding: 5px 10px;border-radius: 5px;max-width: 600px;margin-top: -6px}
.screen_type_wrap .subject_select .tit {float: left;margin-right: 10px;line-height: 32px;font-weight: 600;color: #222;}
.screen_type_wrap .subject_select select {width: 380px;float: left;border: none;border-radius: 5px}

.screen_type_wrap .wri_name {position: relative;display: block;overflow: hidden;}
.screen_type_wrap .wri_name b {position: relative;display: inline-block;float: left;padding-left: 28px;font-size: 14px;font-weight: 600;color: #222;line-height: 30px;margin-right: 10px}
.screen_type_wrap .wri_name b:after {position: absolute;top: 0;left: 0;width: 25px;height: 30px;line-height: 32px;color: #9298a1;text-align: center;font-size: 25px;font-weight: normal;content: "\f364";font-family: FontAwesome,LineAwesome}
.screen_type_wrap .wri_name span {position: relative;display: inline-block;float: left;font-size: 13px;color: #555;line-height: 30px;letter-spacing: 0}

.screen_type_wrap .screen_time {position: absolute;top: 50%;right: 30px;margin-top: -15px;height: 30px;overflow: hidden}
.screen_type_wrap .screen_time b {position: relative;display: inline-block;float: left;padding-left: 30px;font-size: 14px;font-weight: 600;color: #222;line-height: 30px;margin-right: 10px}
.screen_type_wrap .screen_time b:after {position: absolute;top: 0;left: 0;width: 30px;height: 30px;line-height: 32px;color: #9298a1;text-align: center;font-size: 25px;font-weight: normal;content: "\f18f";font-family: FontAwesome,LineAwesome}
.screen_type_wrap .screen_time span {position: relative;display: inline-block;float: left;font-size: 20px;font-weight: 600;color: #222;line-height: 30px;letter-spacing: 0}

.screen_contents_wrap {position: relative;display: block;padding: 20px 20px 40px;overflow: hidden;margin-top: 121px;}
.screen_contents {position: relative;display: block;overflow: hidden;min-height: 500px}

.font_size {position: absolute;top: 50%;left: 20px;margin-top: -15px;}
.font_size a {display: inline-block;vertical-align: top;width: 38px;height: 30px;background: #fff;text-align: center;line-height: 30px;border-radius: 3px}
.font_size a span {position: relative;display: inline-block;color: #555;font-weight: 600}
.font_size a span:after {position: absolute;top: 50%;right: 0;width: 10px;height: 10px;line-height: 8px;margin-top: -5px;text-align: right;font-size: 14px;display: block}
.font_size a.font_minus span {font-size: 11px;padding-right: 10px;}
.font_size a.font_minus span:after {content: "-"}
.font_size a.font_default span {font-size: 14px;}
.font_size a.font_plus span {font-size: 16px;padding-right: 12px;}
.font_size a.font_plus span:after {content: "+"}

.cont_box {position: relative;display: block;overflow: hidden;padding: 30px 0;border-bottom: 1px dotted #ccc}
.cont_box:first-child {padding-top: 0;}
.cont_box:last-child {border-bottom:none;}
.cont_box h3 {position: relative;display: block;overflow: hidden;padding-left: 35px;height: 35px;line-height: 35px;font-size: 16px;color: #222;font-weight: 600;margin-bottom: 10px}
.cont_box h3:after {position: absolute;top: 3px;left: 0;width: 30px;height: 30px;line-height: 28px;border-radius: 50%;overflow: hidden;text-align: center;font-weight: 600;color: #fff;font-size: 14px;}
.cont_box h3.t_q:after {background: #13181e;content: "Q";}
.cont_box h3.t_a:after {background: #ef5050;content: "A";}
.cont_box h3.t_t:after {background: #73b1a9;content: "T";}

.cont_box .question {position: relative;display: block;overflow: hidden;line-height: 160%;font-size: 14px;border: 1px solid #d7dce3;background: #f3f6f8;padding: 15px}
.cont_box .answer {position: relative;display: block;overflow: hidden;line-height: 160%;font-size: 14px;border: 1px solid #d7dce3;padding: 15px;height: 300px;overflow-y: auto}

.cont_box .filebox {position: relative;display: block;margin-top: 15px;border-radius: 7px;padding-left: 120px;}
.cont_box .filebox label {position: absolute;display: inline-block;top: 0;left: 0;padding-left: 28px;font-weight: 600;color: #222;line-height: 37px;font-size: 15px;}
.cont_box .filebox label:after {position: absolute;top: 50%;left: 0;margin-top: -15px;width: 25px;height: 30px;line-height: 28px;color: #9298a1;text-align: center;font-size: 25px;font-weight: normal;content: "\f1fd";font-family: FontAwesome,LineAwesome}
.cont_box .filebox input[type="file"] {width: 98%;}

.cont_box .infoBox {position: relative;display: block;overflow: hidden;line-height: 160%;font-size: 14px;background: #4d5765;padding: 10px 20px}
.cont_box .infoBox .score {display: inline-block;float: left;padding: 0 20px;border-radius: 30px;background: #616c7d}
.cont_box .infoBox .score em {display: inline-block;float: left;color: #fff;line-height: 30px;margin-right: 5px;font-style: normal;}
.cont_box .infoBox .score span {position: relative;display: inline-block;float: left;color: #fff;line-height: 30px;}
.cont_box .infoBox .score i {color: #fafd0e;font-style: normal;font-weight: 600}
.cont_box .infoBox .rBtn {position: relative;display: inline-block;float: right;}
.cont_box .infoBox .rBtn .down {background: #fff;}
.cont_box .infoBox .rBtn .down span {color: #2f3b4d}
.cont_box .infoBox .rBtn .down span:after {color: #2f3b4d}

.exam_screen_wrap {position: relative;display: block;overflow: hidden;min-width: 1024px;width: 1024px;margin: 121px auto 0;background: #fff}
.main .exam_screen_wrap {margin: 60px auto 0 !important;width: 100%;max-width: 100%;padding-bottom: 100}
.exam_contents {position: relative;display: block;width: 783px;float: left;}
.explanation_screen {width: auto;float: none;padding: 50px 0}

.stand_screen {position: relative;display: block;overflow: hidden;padding: 50px 50px 50px 40px}
.slider_screen {position: relative;display: block;overflow: hidden;min-height: 542px;padding: 50px 70px 50px 50px}
.explanation_screen .stand_screen {padding: 0 50px 0 40px}
.explanation_screen .stand_screen:after {position: absolute;top: 0;left: 50%;width: 1px;height: 100%;content: "";background: #ddd;z-index: 0}

.control_btn {position: fixed;top: 50%;width: 40px;height: 55px;margin-top: 30px;display: block;border: none;background: rgba(0,0,0,0.4);z-index: 99}
.control_btn.prev {left: 50%;margin-left: -512px;border-top-right-radius: 7px;border-bottom-right-radius: 7px}
.control_btn.next {right: 50%;margin-right: -271px;border-top-left-radius: 7px;border-bottom-left-radius: 7px}
.control_btn .fa {display: block;font-size: 43px;line-height: 55px;color: #fff}

.exam_item {position: relative;display: block;overflow: hidden;font-size: 15px;line-height: 150%}
.stand_screen .exam_item {border-bottom: 1px dotted #bbb;padding-bottom: 35px;margin-bottom: 35px}
.stand_screen .exam_item:last-child {border-bottom: none  !important;padding-bottom: 0 !important;margin-bottom: 0 !important}
.explanation_screen .exam_item {border-bottom: none  !important;padding-bottom: 0 !important;margin-bottom: 70px}

.item_body {position: relative;display: block;border: 1px solid #bbb;padding: 15px;background: #f8f8f8;margin-bottom: 20px;line-height: 160%;font-size: 13px}
.item_cont {position: relative;display: block;padding: 3px 0 0 30px;}

.important_cont {margin-top: 46px;padding: 3px 0 0 45px;}
.important_cont .as_chek {position: absolute;top: 2px;left: 0}
.important_cont .number {left: 20px !important}

.important_chek {position: absolute;top: -40px;left: 0;width: 100%;display: block;border-radius: 5px;background: #f2f2f2;padding: 8px 0;height: 20px;margin-bottom: 7px}
.important_chek:after {position: absolute;top: 0;left: 0;width: 3px;height: 36px;content: "";background: #ef5350}
.important_chek b {float: left;margin: 0 10px 0 15px;color: #111;line-height: 20px;font-size: 14px;}
.important_chek .rating {position: relative;float: left;display: inline-block;margin-bottom: 5px}
.important_chek .rating i {position: relative;float: left;display: inline-block;width: 20px;height: 20px;vertical-align: top;color: #cbcbcb}
.important_chek .rating i:after {position: absolute;top: 0;left: 0;width: 100%;height: 20px;line-height: 20px;content: "\f005";font-family: FontAwesome;font-style: normal;font-size: 14px;display: block}
.important_chek .rating i.on {color: #ef5350}


.explanation_screen .item_cont {width: 422px;float: left;}
.explanation_screen .item_explanation {width: 422px;float: right;}
.explan_table {width: 100%;border-top: 2px solid #444}
.explan_table thead th {font-size: 13px;text-align: center;padding: 10px;color: #333;background: #f1f1f1;font-weight: 600;border-bottom: 1px solid #ccc}
.explan_table tbody th {font-size: 13px;text-align: center;padding: 10px;color: #3d434c;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;background: #f7f7f7;font-weight: 600}
.explan_table tbody td {font-size: 13px;text-align: left;padding: 10px;border-bottom: 1px solid #ddd;color: #666;}
.explan_table tbody td .cblue {font-size: 16px}
.explan_table tbody td i {position: relative;display: inline-block;margin-left: 10px;padding: 0 10px;line-height: 24px;font-size: 12px;color: #fff;border-radius: 3px;font-style: normal}
.explan_table tbody td i:after {position: absolute;top: 4px;left: -14px;display:inline-block; width:0; height:0; border-style:solid; border-width:8px;content: ""}
.explan_table tbody td i.choice {background: #f21d5a}
.explan_table tbody td i.choice:after {border-color:transparent #f21d5a transparent transparent;}
.explan_table tbody td i.answer {background: #0d59cd}
.explan_table tbody td i.answer:after {border-color:transparent #0d59cd transparent transparent;}

.item_cont .number  {position: absolute;top: 0;left: 0;width: 30px;height: 25px;line-height: 25px;font-weight: 600;color: #222;font-size: 20px}
.editor_question {position: relative;display: block;overflow: hidden;color: #222}

.editor_answer {position: relative;display: block;margin: 15px 0 30px}
.editor_answer .editor_input {position: relative;display: block;}
.editor_answer input[type='text'] {border: 1px solid #ddd;width: 200px}
.editor_answer li {position: relative;display:block;line-height: 160%;margin-top: 10px;}
.editor_answer li .example {position: relative;display: inline-block;color: #666;padding-left: 30px;}
.editor_answer li .example .example_answer {position: absolute;top: 0;left: 0;display: block;width: 30px;height: 30px;text-align: center;line-height: 120%;font-weight: 600;color: #333;font-size: 17px}
.editor_answer li .example:hover, .editor_answer li .example:hover .example_answer {color: #177ed5}

.editor_answer li .example.choice, .editor_answer li .example.choice .example_answer,
.editor_answer li .example.choice:hover, .editor_answer li .example.choice:hover .example_answer {color: #f21d5a;font-weight: 600}
.editor_answer li .choice:after {position: absolute;top: -4px;left: 5px;width: 26px;height: 19px;display: block;background: url("/re_images/manager/pc/contents/ico_choice.png") no-repeat;content: ""}

.editor_answer li .example.answer, .editor_answer li .example.answer .example_answer,
.editor_answer li .example.answer:hover, .editor_answer li .example.answer:hover .example_answer {color: #0d59cd;font-weight: 600}
.editor_answer li .answer:after {position: absolute;top: 1px;left: -6px;width: 42px;height: 26px;display: block;background: url("/re_images/manager/pc/contents/ico_answer.png") no-repeat;content: ""}

.editor_answer .inputBox {position: relative;display: block;background: #f3f3f3;border-radius: 7px;padding: 6px 15px}

.score_screen .example {cursor: default}
.score_screen .example:hover, .score_screen .example:hover .example_answer {color: #666 !important;}
.score_screen .example.choice:hover, .score_screen .example.choice:hover .example_answer {color: #f21d5a !important;}
.score_screen .example.answer:hover, .score_screen .example.answer:hover .example_answer {color: #0d59cd !important;}

.memo_box {position: relative;display: block;margin-top: 15px;text-align: center}
.memo_box textarea {width: 100%;box-sizing: border-box;height: 100px}

.item_helpBox {position: relative;display: block;border-top: 1px solid #d7dce3;border-bottom: 1px solid #d7dce3;background: #e8ebf1;height: 25px;padding: 10px 20px}
.item_helpBox .h_left {position: relative;display: inline-block;overflow: hidden;}
.item_helpBox .h_left li {float: left;margin-right: 10px}
.item_helpBox .h_left li a {position: relative;display: inline-block;line-height: 25px;height: 25px;border-radius: 25px;padding: 0 20px;background: #fff}
.item_helpBox .h_left li a span {position: relative;display: inline-block;font-size: 13px;padding-left: 25px}
.item_helpBox .h_left li a span:after {position: absolute;top: 0;left: 0;width: 25px;height: 25px;display: block;line-height: 25px;font-family: FontAwesome,LineAwesome;font-size: 21px;font-weight: normal}
.item_helpBox .h_left li a:hover span {text-decoration: underline}
.item_helpBox .h_left li .btn_play span:after {content: "\f375";color: #fe600a}
.item_helpBox .h_left li .btn_down span:after {content: "\f2e9";color: #177ed5}
.item_helpBox .btn_report {position: absolute;top: 50%;right: 20px;font-size: 12px;line-height: 25px;margin-top: -13px}
.item_helpBox .btn_report:hover {text-decoration: underline}


.answer_sheet_wrap {position: fixed;top: 121px;right: 50%;width: 210px;margin-right: -512px;border-left: 1px solid #ddd;padding: 15px;background: #f6f6f6}
.main .answer_sheet_wrap {top: 60px !important;margin-right: -498px;width: 190px;height: 100%}

.sheet_top {position: relative;display: block;overflow: hidden;height: 45px}
.sheet_bottom {position: relative;display: block;overflow: hidden;height: 35px}

.sheet_top .title {position: relative;display: inline-block;font-size: 20px;color: #222;letter-spacing: -0.05em;line-height: 45px;font-weight: 600}
.sheet_top .result_score {position: absolute;display: block;top: 50%;right: 0;margin-top: -13px;border-radius: 25px;line-height: 25px;padding: 0 12px;background: #fe600a;color: #ffd3e0;font-size: 12px}
.sheet_top .result_score b {display: inline-block;color: #fff;font-size: 14px}


.exam_control_lyr {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.85);z-index: 999}
.exam_control_lyr .exam_control {position: absolute;top: 50%;left: 50%;width: 500px;height: 160px;margin: -170px 0 0 -300px;background: #fff;border-radius: 15px;padding: 80px 50px 50px}
.exam_control_lyr .exam_control:after {position: absolute;top: -66px;left: 50%;margin-left: -66px;width: 132px;height: 132px;content: "";background: url("/re_images/manager/pc/screen/exam_start_ico.png") no-repeat}
.exam_control_lyr .text_box {display: block;text-align: center;margin-bottom: 25px}
.exam_control_lyr .title {display: block;font-size: 35px;color: #111;line-height: 150%;font-weight: 600;margin-bottom: 5px}
.exam_control_lyr .text {display: block;font-size: 16px;color: #555;line-height: 130%;text-align: center;}
.exam_control_lyr .c_red {color: #f22058}
.exam_control_lyr .btn_box {display: block;text-align: center}
.exam_control_lyr .btn_box a {display: inline-block;width: 220px;}

.exam_start {position: relative;display: block;text-align: center;background: #f22058;border-radius: 5px}
.exam_start span {position: relative;display: inline-block;font-size: 20px;color: #fff;font-weight: 600;line-height: 25px;padding: 15px 0 15px 35px}
.exam_start span:after {position: absolute;top: 50%;left: 0;width: 35px;height: 35px;margin-top: -17px;display: block;line-height: 35px;font-family: FontAwesome,LineAwesome;content: "\f2c0";font-size: 31px;font-weight: normal}

.exam_restart {position: relative;display: block;text-align: center;background: #68a90c;border-radius: 5px}
.exam_restart span {position: relative;display: inline-block;font-size: 20px;color: #fff;font-weight: 600;line-height: 25px;padding: 15px 0 15px 35px}
.exam_restart span:after {position: absolute;top: 50%;left: 0;width: 35px;height: 35px;margin-top: -17px;display: block;line-height: 35px;font-family: FontAwesome,LineAwesome;content: "\f2c0";font-size: 31px;font-weight: normal}

.exam_stop {position: relative;display: block;text-align: center;padding: 10px 0;background: #fe600a;border-radius: 5px}
.exam_stop span {position: relative;display: inline-block;font-size: 17px;color: #fff;font-weight: 600;padding-left: 28px;line-height: 25px;background: url("/re_images/manager/pc/screen/exam_stop.png") no-repeat left center}


.exam_score {position: relative;display: block;text-align: center;padding: 5px 0;background: #177ed5;border-radius: 5px}
.exam_score span {position: relative;display: inline-block;font-size: 13px;color: #fff;font-weight: 600;padding-left: 30px;line-height: 25px;}
.exam_score span:after {position: absolute;top: 0;left: 0;width: 30px;height: 25px;display: block;line-height: 25px;font-family: FontAwesome,LineAwesome;content: "\f17b";font-size: 17px;font-weight: normal}

.exam_next {position: relative;display: block;text-align: center;padding: 5px 0;background: #53a000;border-radius: 5px}
.exam_next span {position: relative;display: inline-block;font-size: 13px;color: #fff;font-weight: 600;padding-left: 30px;line-height: 25px;}
.exam_next span:after {position: absolute;top: 0;left: 0;width: 30px;height: 25px;display: block;line-height: 25px;font-family: FontAwesome,LineAwesome;content: "\f121";font-size: 17px;font-weight: normal}


.exam_btn {position: relative;float: left;text-align: center;padding: 5px 0;margin-right: 3px;background: #177ed5;border-radius: 5px;font-size: 12px;color: #fff;line-height: 25px;}
.exam_btn:last-child {margin-right: 0}
.exam_btn.explanation {width: 103px;background: #f21d5a}
.exam_btn.wrong_note {width: 210px;background: #53a000}
.exam_btn.close {width: 40px;background: #30374b}

.answer_sheet {position: relative;display: block;overflow: hidden;margin: 15px 0;height: 500px;border: 1px solid #ddd;background: #fff;overflow-y: auto}
.main .answer_sheet {height: auto !important;background: none !important}
.answer_table {width: 100%;background: #fff}
.answer_table thead th {font-size: 12px;text-align: center;padding: 8px 3px;color: #fff;background: #391e0f;font-weight: 600;}
.answer_table tbody th {font-size: 13px;text-align: center;padding: 5px 3px;color: #3d434c;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;background: #ffefe7;font-weight: 600}
.answer_table tbody td {font-size: 12px;text-align: center;padding: 5px 3px;border-bottom: 1px solid #ddd;color: #7f7f7f;border-right: 1px solid #ddd;}
.answer_table tbody td a {display: inline-block;width: 15px;height: 15px;border: 1px solid #aaa;background: #fff;color: #555;text-align: center;line-height: 15px;border-radius: 50%;font-size: 11px}
.answer_table tbody td input[type='text'] {text-indent: 5px;font-size: 12px;color: #555;width: 142px;}
.answer_table tbody td a:hover {border: 1px solid #fe600a;color: #fe600a}
.answer_table tbody td .choice {border: 1px solid #fe600a;color: #fff;background: #fe600a}
.answer_table tbody td .choice:hover {color: #fff;}
.answer_table tbody td  .result {display: inline-block;font-weight: 600}
.answer_table tbody td  .result.wrong {color: #f21d5a}
.answer_table tbody td  .result.answer {color: #0d59cd}
.answer_table tbody tr:hover {background: #f4f4f4}

.as_main_b_textBox {position: fixed;bottom: 0;left: 0;width: 100%;display: block;background: #ffd71f;}
.as_main_b_textBox .cont {position: relative;display: block;margin: 0 auto;padding: 30px 0 30px 140px;background: url("/re_images/moi/pc/main/main_b_textBox_img.png") no-repeat 40px center}
.as_main_b_textBox .cont .txt {display: block;font-size: 20px;line-height: 150%;color: #141c6a;font-weight: 600}
.as_main_b_textBox .cont .btn {position: absolute;top: 50%;right: 40px;text-align: center;margin-top: -23px}
.as_main_b_textBox .cont .btn a {display: inline-block;padding: 0 30px;line-height: 45px;height: 45px;background: #f53849;color: #fff;border-radius: 45px;font-size: 17px;box-shadow: 0 5px 15px 0 rgba(245, 56, 73, 0.35)}
.as_main_b_textBox .cont .btn .img {position: absolute;top: 30px;right: -20px;z-index: 1}
.as_main_b_textBox .cont .btn .img img {width: 50px}

.blinking{
    -webkit-animation:blink 0.4s ease-in-out infinite alternate;
    -moz-animation:blink 0.4s ease-in-out infinite alternate;
    animation:blink 0.4s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0.2;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0.2;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0.2;}
    100% {opacity:1;}
}



/*캔버스 화면*/
#canvas_body {background: #f6f6f6}
#canvas_doc {position: relative;display: block;overflow: hidden;}

#canvas_doc .head_fix {position: fixed;top: 0;left: 0;width: 100%;z-index: 500}

.canvas_head {position: relative; display: block;padding: 0 135px;height: 60px;
    background: #f2175e; /* Old browsers */
    background: -moz-linear-gradient(left,  #ff9e0b 0%, #f2175e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #ff9e0b 0%,#f2175e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #ff9e0b 0%,#f2175e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9e0b', endColorstr='#f2175e',GradientType=1 ); /* IE6-9 */
}
.canvas_head h1 {position: absolute;top: 17px;left: 20px;display: inline-block;}
.canvas_head .title {position: relative;display: block;height: 30px;line-height: 30px;padding: 15px 0;text-align: center;color: #fff;font-size: 25px;font-weight: normal}
.canvas_head .canvas_close {position: absolute;top: 0;right: 0;width: 60px;height: 60px;text-align: center;background: rgba(0,0,0,0.3) url("/re_images/manager/pc/screen/screen_close.png") no-repeat }

.canvas_control {position: relative;display: block;width: 96%;padding: 15px 2%;background: #40272e;height: 30px;overflow: hidden;border-bottom: 1px solid #ddd}
.canvas_control div {display: inline-block;}
.canvas_control .left {float: left;}
.canvas_control .right {float: right;}

.canvas_control button {position: relative;display: inline-block;vertical-align: top;line-height: 26px;height: 30px;padding: 0 13px 0 35px;border: none;background: #f7f7f7;border-radius: 3px}
.canvas_control button:after {position: absolute;top: 0;left: 7px;width: 30px;height: 30px;line-height: 31px;font-family: FontAwesome,LineAwesome;font-size: 21px;text-align: center;}
.canvas_control button.active {background: #fd8e16;color: #fff}
.canvas_control button.active:after {color: #fff}

.canvas_control #btnDrawMode:after {content: "\f2a7"}
.canvas_control #btnZoomInByMouse:after {content: "\f2ed"}
.canvas_control #btnZoomOutByMouse:after {content: "\f2ec"}
.canvas_control #btnPanModeByMouse:after {content: "\f124"}
.canvas_control #btn_save:after {content: "\f1fd"}
/*.canvas_control #del:after {content: "\f34d"}*/

.canvas_contents_wrap {position: relative;display: block;padding: 15px;overflow: hidden;margin-top: 121px;}
.canvas_contents {position: relative;display: block;overflow: hidden;border: 1px solid #ccc;min-height: 400px;background: #fff}

.info-txt {position: relative;display: block;overflow: hidden;margin-bottom: 10px;color: #555;padding-left: 25px}
.info-txt:after {position: absolute;top: 0;left: 0;width: 20px;height: 20px;content: "";background: url("/re_images/common/etc/ico-ex04.png") no-repeat center;}


/*미리보기*/
#preview_doc {position: relative;display: block;overflow: hidden;padding-bottom: 30px}
.prev_title_wrap {position: relative;display: block;padding: 50px 20px 60px;z-index: 0}
.prev_title_wrap:after {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #f0eeee;content: "";z-index: 0}
.prev_title {position: relative;display: block;z-index: 10}

.prev_title .moi_type {position: absolute;top: -50px;left: 0;padding: 0 25px;background: #000;color: #fff;line-height: 30px;font-size: 15px;
    border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;z-index: 10}

.moi_type.free {background: #1e88e5}
.moi_type.single {background: #3745c6}
.moi_type.package {background: #e91e63}
.moi_type.brand {background: #57a22f}
.moi_type.dangoll {background: #009e95}
.moi_type.problem {background: #a227dc}
.moi_type.essay  {background: #f56e13}
.moi_type.self {background: #0e9ed3}


.prev_title .title {position: relative;display: block;padding: 0 200px 0 75px;z-index: 10}
.prev_title.smallTop .title {padding: 0 200px 0 0;}
.prev_title .title .using {position: absolute;top: 50%;left: 0;width: 60px;height: 30px;margin-top: -30px;padding: 15px 0;display: block;line-height: 30px;background: #fff;border-radius: 60px;text-align: center;font-weight: 600}
.prev_title .title h2 {display: block;font-size: 23px;color: #222;line-height: 32px}
.prev_title .title h2 .type {position: relative;display: inline-block;vertical-align: top;padding: 0 15px;color: #fff;line-height: 30px;height: 30px;border-radius: 40px;font-size: 16px}
.prev_title .title h2 .type.single {background: #3745c6}
.prev_title .title h2 .type.package {background: #e91e63}
.prev_title .block {position: relative;display: block;overflow: hidden;margin-top: 5px;z-index: 10}
.prev_title .block .channel {position: relative;display: inline-block;line-height: 22px;float: left;padding-right: 20px;}
.prev_title .block .channel:after {position: absolute;top: 50%;right: 9px;width: 1px;height: 10px;margin-top: -5px;background: #ccc3c2;content: ""}
.prev_title .block .date {position: relative;display: inline-block;line-height: 22px;float: left;padding-right: 20px;}
.prev_title .block .date:after {position: absolute;top: 50%;right: 9px;width: 1px;height: 10px;margin-top: -5px;background: #ccc3c2;content: ""}
.prev_title .block .report {position: relative;display: inline-block;line-height: 22px;float: left;padding-right: 20px;}
.prev_title .block .report:after {position: absolute;top: 50%;right: 9px;width: 1px;height: 10px;margin-top: -5px;background: #ccc3c2;content: ""}
.prev_title .block .channel a {position: relative;display: inline-block;padding-right: 15px;background: url("/re_images/common/etc/new-winDG.png") no-repeat right center;color: #777}
.prev_title .block .category {position: relative;display: inline-block;line-height: 22px;float: left;color: #777}

.using_Y {color: #1e88e5;}
.using_N {color: #555;}

.prev_cont_detail {position: relative;display: block;background: #fff;border: 1px solid #ddd;padding: 30px 0;width: calc(100% - 30px);margin: -36px 15px 0;z-index: 10}
.detail_nswer_wrap {position: relative;display: block;overflow: hidden;width: 600px;margin: 0 auto}

.editor_box {position: relative;display: block;overflow: hidden;}
.editor_box img {max-width: 100%;}
.editor_box .editor_question {position: relative;display: block;overflow: hidden;margin-bottom: 10px;font-size: 14px;line-height: 160%}

.editor_box .editor_answer {position: relative;display: block;overflow: hidden;}
.editor_box .editor_answer li {position: relative;display:block;line-height: 160%;margin-top: 15px;padding-left: 30px;font-size: 14px}
.editor_box .editor_answer li .example_answer {position: absolute;top: 0;left: 0;display: block;width: 30px;height: 30px;text-align: center;line-height: 120%;font-weight: 600;color: #333;font-size: 15px}


.answer_choice {position: relative;display: block;margin: 50px 0 0;padding: 10px 0 10px 100px;overflow: hidden;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;background: #f6f6f6;}
.answer_choice b {position: absolute;display: inline-block;top: 50%;left:0;width: 100px;font-weight: 600;color: #222;margin-top: -15px;line-height: 32px;text-align: center;}
.answer_choice ul {display: block;overflow: hidden;text-align: center}
.answer_choice ul li {display: inline-block;padding: 0 15px;vertical-align: top}
.answer_choice ul li a {display: inline-block;width: 30px;height: 30px;border: 1px solid #aaa;border-radius: 50%;text-align: center;line-height: 30px;font-weight: 600;background: #fff}
.answer_choice ul li a:hover {border: 1px solid #ef5050;}
.answer_choice ul li a.active {border: 1px solid #ef5050;background: #ef5050;color: #fff}

.answer_btnBox {position: relative;display: block;text-align: center;margin: 30px 0}

.correct_answer {position: relative;display: block;overflow: hidden;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;background: #faeeec;}
.correct_answer .box {position: relative;display: block;padding: 15px 20px 15px 100px;border-bottom: 1px dotted #bbb}
.correct_answer .box:last-child {border-bottom: none;}
.correct_answer .box .title {position: absolute;display: inline-block;top: 50%;left:0;width: 100px;font-weight: 600;margin-top: -15px;color: #222;line-height: 32px;text-align: center}
.correct_answer .box img {max-width: 100%}
.correct_answer .correct {display: inline-block;width: 30px;height: 30px;border-radius: 50%;text-align: center;line-height: 30px;font-weight: 600;border: 1px solid #ef5050;background: #ef5050;color: #fff}

.eplgContArea {position: relative;display: block;overflow: hidden;border: 1px solid #ddd;padding: 25px;margin-top: 20px}

.pop_tab {position: relative;display: block;overflow: hidden;border-bottom: 1px solid #2f3b4d;margin-top: 30px}
.pop_tab li {float: left;width: 50%;}
.pop_tab li a {display: block;padding: 10px;text-align: center;background: #eee;color: #333;line-height: 25px;}
.pop_tab li.active a {background: #2f3b4d;color: #fff;}

/*출력화면*/
.print_doc {position: relative;display: block;overflow: hidden;background: #e2e2e2;box-sizing: border-box;width: 100%;height: 100%;}
/*.print_doc {position: relative;display: block;background: #e2e2e2;box-sizing: border-box;}*/

.print_doc * {box-sizing: border-box; -moz-box-sizing: border-box;}
.print_doc .page {position: relative;display: block;background: #fff;padding: 15px;margin: 0 auto;width: 210mm;min-height: 297mm;box-sizing: border-box}
.print_cont_top {position: relative;display: block;border-bottom: 1px solid #bbb;padding: 0.7cm 3cm 1cm;box-sizing: border-box;height: 100px}
.print_cont_top .logo {position: absolute;top: 50%;left: 10px;margin-top: -0.5cm;box-sizing: border-box}
.print_cont_top .title {display: block;text-align: center;font-size: 1.4em;color: #111;font-weight: 600;line-height: 120%;box-sizing: border-box}
.print_cont_top .titleBox {position: relative;display: block;text-align: center}
.print_cont_top .titleBox span {display: block;font-size: 1.2em;color: #111;line-height: 120%;margin-bottom: 0.2cm}
.print_cont_top .titleBox b {display: block;font-size: 1.7em;color: #111;line-height: 120%}
.print_cont_top .examiner {position: absolute;bottom: 20px;right: 20px;display: block;text-align: right;box-sizing: border-box}

.print_cont {position: relative;display: block;padding: 1cm 0;overflow: hidden}
.print_cont .col_line {position: absolute;top: 0;left: 50%;width: 1px;height: 100%;border-left: 1px solid #bbb;z-index: 1}
.print_cont .col {position: relative;display: block;width: 100%;padding: 0 0.5cm;height: 232mm;float: left;box-sizing: border-box;column-gap: 4em;-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
/*.print_cont .col {position: relative;display: block;width: 50%;padding: 0 0.5cm;height: 232mm;float: left;box-sizing: border-box}*/
.print_cont .col * {font-size: 12px !important}
.print_cont .col .editor_answer li {margin-top: 5px !important}

@page {
    size: A4;
    margin: 0;
}
@media print {
    html, body {
        width: 210mm;
        height: 297mm;
        background: #fff;
    }
    .paper {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}


    /*버튼스타일*/
.btnBox_area {position: relative;display: block;overflow: hidden;text-align: center;margin-top: 30px}
.btnBox_area.r {text-align: right}

.btn_st {display: inline-block;padding: 0 8px;border-radius: 5px;min-width: 50px;text-align: center;margin: 2px 0}
.btn_st span {position: relative;display: inline-block;line-height: 28px;font-size: 13px;color: #fff;padding-left: 20px}
.btn_st span:after {position: absolute;top: 0;left: 0;width: 20px;height: 28px;line-height: 28px;font-family: FontAwesome,LineAwesome;font-size: 16px;text-align: center;}

.btn_st.medium {padding: 5px;min-width: 150px;margin: 3px 0}
.btn_st.medium span {line-height: 30px !important;padding-left: 32px !important}
.btn_st.medium span:after {width: 30px !important;height: 30px !important;line-height: 30px !important;font-size: 25px !important;}

.btn_st.big {padding: 10px 20px;margin: 0 3px;min-width: 120px;}
.btn_st.big span {line-height: 30px !important;font-size: 15px !important;padding-left: 32px !important}
.btn_st.big span:after {width: 30px !important;height: 30px !important;line-height: 30px !important;font-size: 25px !important;}

.bc_org {background: #f57c00 !important}
.bc_gray {background: #666 !important}
.bc_rbGary {background: #90a4ae !important}
.bc_dbGary {background: #607d8b !important}
.bc_red {background: #f44336 !important}
.bc_green {background: #689f38 !important}
.bc_skyblue {background: #19B6D4 !important}
.bc_dkblue {background: #2f3b4d !important}
.bc_pink {background: #ef5050 !important}

.btn_st.ok {background: #ef5050}
.btn_st.ok span:after {content: "\f17b"}
.btn_st.modify {background: #f57c00}
.btn_st.modify span:after {content: "\f1c1"}
.btn_st.del {background: #666}
.btn_st.del span:after {content: "\f342";}
.btn_st.cancel {background: #2f3b4d}
.btn_st.cancel span:after {content: "\f2da"}
.btn_st.list {background: #607d8b}
.btn_st.list span:after {content: "\f29a"}
.btn_st.link {background: #ef5050}
.btn_st.link span:after {content: "\f179"}
.btn_st.wri {background: #ef5050}
.btn_st.wri span:after {content: "\f2b0"}
.btn_st.down {background: #2f3b4d}
.btn_st.down span:after {content: "\f1bd"}
.btn_st.complete {background: #19B6D4}
.btn_st.complete span:after {content: "\f17d"}
.btn_st.close {background: #666}
.btn_st.close span:after {content: "\f342";}
.btn_st.chek span:after {content: "\f17b"}
.btn_st.reset span:after {content: "\f2e0";}
.btn_st.complete span:after {content: "\f17d";}
.btn_st.expiration span:after {content: "\f161";}
.btn_st.refresh span:after {content: "\f2d5";}
.btn_st.comment span:after {content: "\f19e";}
.btn_st.tag span:after {content:"\f330";}

.btn_st.share span:after {content:"\f2f1";}
.btn_st.login span:after {content:"\f2fb";}
.btn_st.refresh span:after {content: "\f2d5";}

.btwd100 {width: 100px !important;}