@charset "utf-8";

/*
* Copyright 2022 WoongjinThinkbig Mathpid TX-PJT Team Authors All rights reserved.
*
* Licensed under the WoongjinThinkbig.
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.wjthinkbig.co.kr/en/index.do
*/

/* 헤더 fixed */
header.fixed_header{position: fixed!important; top:0; left:0;z-index: 99; padding: 64px 0 0!important;  background-color: #ffffff; transition: box-shadow .3s;}
header.fixed_header.on{box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);}
header.fixed_header + .container {margin-top: 109.8px;}

.qz{position:relative; background-color: #ffffff;}
.qz header {position: relative; padding: 19px 0 0px; min-height:64px}
.qz header.on{z-index: 1; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);}
.qz:not(.incorrect) .header_wrap{min-height:28px}
/* 탑 페이지네이션, 프로그레스 */
.qz_pagination{height:24px;}
.qz_pagination span{font-size:18px; font-weight: 500; line-height: 1.56; letter-spacing: -0.01px;}
.qz_pagination .current_page{ font-weight: bold; }
.change_hands{display: none;}
.change_hands button{padding:8px 20px 8px 15px; display: flex; align-items: center; background-color: #f4f7fe; border-radius: var(--borderRadius);}
.change_hands button span{margin-left:5px; height:22px; font-size:16px; font-weight:bold; line-height:1.5; text-align:center; color:var(--subText);}
/* quiz_progress */
.quiz_progress{position: relative; width:100%; font-size:1rem; padding-left:1.5rem; display:flex; gap:0 2em; align-items: center;}
.quiz_progress_bar{position: relative; width:100%; height:2.4em; background-color: #ccc; border-radius: 1.2em; overflow: hidden;} 
.quiz_progress_bar .bar{position: absolute; top:0; left:0; height:100%; background-color:#33d6c5; border-radius: 1.2em;}
.quiz_progress_bar .txt{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); color:#fff; font-size:1.4em; white-space: nowrap;}
.quiz_timer{font-size:1.8em}

 /* main */
.qz .container{margin-top: 0; height: auto; overflow: inherit; border-radius: 0; background-color: #ffffff;}

/* 문제 설명 */
.quiz_desc{position: relative; z-index: 1; margin-top:20px; padding:0 20px;}
.quiz_desc p{font-size:16px; font-weight: 500; line-height: 1.5;}
.quiz_desc > p > span{margin-right:4px; display: block; margin-bottom:10px}
.quiz_desc .q_numbers{margin-bottom: 5px; font-size:16px; font-weight: 700;}
.quiz_desc .q_numbers > span{margin-right:5px;}
.qz .main_contents {position: relative; padding:0;}
.qz .main_contents.ex_box_on {z-index:9;}
.qz .main_contents>.wrap{position: relative; padding:0; height: calc(100vh - 437px); overflow: overlay;}
.qz .main_contents>.wrap.none_scroll{position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; }
.qz .main_contents>.wrap.ex_none_scroll{overflow: hidden;}
.ex_none_btn{pointer-events: none;}
.quiz_desc .btn_learn_view{display:flex; position: absolute; top:0; right:20px; gap:5px; align-items: center;}
.quiz_desc .btn_learn_view > span{font-size:14px; margin:0; line-height: 1.8;}
.qz .container.notepad_on .main_contents .quiz_desc .btn_learn_view{display: none;}
/* 2023.07.06 레이블 적용 전 */
/* .quiz_desc .q_numbers{display:inline; margin-right:5px;}
.quiz_text > p{display:inline;} */

/* 문제 예시 */
.quiz_content{margin-top:10px; }
.quiz_content .exam_wrap {padding:0 20px; justify-content: space-between;}
.quiz_content .exam_wrap .exam_btn{position: relative; z-index: 1; padding:5px 10px; display: flex; align-items: center; border-radius:var(--borderRadius); background-color: #999; height: 27px;}
.quiz_content .exam_wrap .exam_btn span{margin-right:5px; font-size:12px; font-weight:500; line-height:1.33; color:#fff}
.quiz_content .exam_wrap .exam_btn i{transition: transform .3s;}
.quiz_content .exam_wrap .exam_btn.active{background-color: var(--subText);}
.quiz_content .exam_wrap .exam_btn.active span{color:#Ffffff;}
.quiz_content .exam_wrap .exam_btn.active i{transform: rotate(180deg);}
.exam_content{position: fixed; transform: translateY(10px); z-index: 9; padding:5px;  display: none; width:calc(100vw - 40px); max-height: 515px;  border:1px solid #707070; border-radius: 15px; box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.02); background-color: #ffffff; overflow: hidden; /* height:100%; */ height:auto;}
.exam_content .exam_content_inner{padding:15px;  width:100%; height:100%; overflow: overlay;  min-height:230px;}
.exam_content.active{display: block;}
.qz.incorrect .exam_content{left:20px}

/**** 노트패드 Switch ****/
.notepad_btn{display:inline-block; height:27px; }
.notepad_btn .notepad_switch{position:relative; display:flex; align-items: center;  width:100%; height:100%; background-color:#999; cursor:pointer; -webkit-transition:all .2s; transition:all .2s;  border-radius: var(--borderRadius); text-align: left;}
.notepad_btn .notepad_switch:after{display:block; content:''; position:absolute; top:1px; left:1px; display:block; width:25px; height:25px; background-color:#fff; border:2px solid #999; border-radius:50%; -webkit-transition:all .2s; transition:all .2s; box-sizing:border-box;}
.notepad_btn .notepad_switch > i{line-height:2.3; color:#fff; font-size:12px; font-style: normal;}
.notepad_btn .notepad_switch .on{display:none; padding-left:10px; padding-right:33px; text-align: right;}
.notepad_btn .notepad_switch .off{text-align:left; padding-right:10px; padding-left:33px}
.notepad_btn.on .notepad_switch{background-color:var(--subText);}
.notepad_btn.on .notepad_switch:after{border:2px solid var(--subText)}
.notepad_btn.on .notepad_switch .on{display:inline-block}
.notepad_btn.on .notepad_switch .off{display:none}
.notepad_btn.on .notepad_switch:after{left:calc(100% - 26px);}

/* 문제영역 */
.quiz_content .quiz_area {position: relative; padding-bottom:60px; margin:10px auto 0; display: flex;}
.quiz_content .quiz_area .problem{position: relative; z-index: 1; margin: 0 auto; padding:0 20px;}
.quiz_content .quiz_area .problem figure img{width:auto;}
.quiz_content_inner .quiz_loading{position: absolute; width:100%; height:100%; background-color: #fff; z-index: 2;}

/* 문제영역 세로 스크롤 100% 처리 */
.quiz_content .quiz_area.newscroll_bar{overflow: overlay;}
.quiz_content .quiz_area .problem.newscroll_bar{overflow: overlay; padding-bottom:60px}
.qz .main_contents>.wrap {display:flex; flex-direction: column;}
.qz .main_contents>.wrap{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.qz .container.notepad_on .main_contents>.wrap {display:block;}
.qz .quiz_content{flex-grow: 1; z-index: 2;}
/* 2023.03.03 문제영역 높이 이슈 */
.qz .quiz_content .quiz_content_inner{height:calc(100% - 15px);} /* exam_wrap marginTop */
.qz .quiz_content .quiz_area{height:calc(100% - 37px);} /* exam_wrap height + quiz_area marginTop */
.qz.incorrect .quiz_content .quiz_content_inner{height:calc(100% - 10px);} /* quiz_area marginTop */
.qz.incorrect .quiz_content .quiz_content_inner .quiz_area{height: 100%;}

  /* 노트패드 영역*/
.notepad_area{position: absolute; top:0; left:0; z-index: 1; display: none; width:100%; height:100%;}
.notepad_area .notepad_tip_line{position: absolute; top:0; left:0; right:0; bottom:0; z-index: 9; display: none; width:100%; height:100%; border:dashed 3px #ffbe30;} 
.notepad_area .notepad_tip_desc{position:absolute; bottom:40px; left:50%; transform: translateX(-50%);  z-index: 9;  padding:10px 20px; display: none; width:calc(100% - 40px); max-width: 335px; border-radius: var(--borderRadius); background-color: #ffbe30;}
.notepad_area .notepad_tip_desc p{font-weight:bold; line-height:1.43; text-align: center;}
.notepad_area.vertical_scroll .notepad_tip_line{width:calc(100% + 15px);}
.notepad_area.horiz_scroll .notepad_tip_line{height:calc(100% + 20px);}

/*노트패드 오버레이*/
.notepad_overlay{position: fixed; top:0; left:0; z-index: 2; display: none; width:100%; height: 100vh; background-color:rgba(48, 48, 48, 0.15);}
.notepad_overlay.on{display: block;}

/* 노트패드, not_sure  버튼 영역 */
.note_wrap{position: relative; z-index: 2;}
.note_wrap .btn_wrap button{display:flex; align-items:center; border-radius:var(--borderRadius);}
.note_wrap .btn_wrap button span{font-size:12px; font-weight: 500; }
.note_wrap .btn_wrap button i{margin-right:5px;}
/* on off 배경 변경 */
.note_wrap .btn_wrap .notepad_btn{padding:5px 15px 5px 10px; color:#ffffff; background-color: var(--subText);}
.note_wrap .btn_wrap .notepad_btn.on{ background-color: #666666; }
.note_wrap .btn_wrap.not_sure{position: relative;}
.note_wrap .btn_wrap.not_sure button{ padding:9px 15px 8px 15px; color:var(--subText); background-color:#f4f7fe;}
.note_wrap .btn_wrap.not_sure button span{font-weight: bold;}

/* 버튼 중간 영역 */
.note_wrap .btn_wrap.notepad_btn_wrap{position: absolute; bottom:15px; left:20px; }
.note_wrap .btn_wrap.not_sure{position: absolute; bottom:15px; right:20px;}
.note_wrap .btn_wrap.not_sure .bubble_desc{top:inherit; bottom:calc(100% + 10px);}
.qz .bubble_desc::before{bottom:inherit; top:100%; border-left:6px solid transparent; border-right:6px solid transparent; border-top:10px solid var(--point_yellow); border-bottom: transparent; }
.qz .bubble_desc.hidden{transform: translateY(-10px); opacity: 0; visibility: hidden; }

/*입력 도구 그리기, 키보드*/
.input_tool{position: fixed; z-index:8; bottom:0; width:100%;   }
.input_tool .tool_wrap {position: relative; height:373px; background-color: #f5f5f5;}
.input_tool .input_tool_wrap{z-index: 2; display: none; width:100%; height:283px; }
.input_tool .input_tool_wrap.active{display: block; }
.drawpad .draw_tools .wrap{padding:0; width:auto}
.drawpad .draw_tools .inner_wrap .tools_wrap{position: absolute; top:0; z-index:99; overflow:visible;}
.drawpad .draw_tools .inner_wrap .tools_wrap.pad_tools{left:20px;}
.drawpad .draw_tools .inner_wrap .tools_wrap.instrument{right:20px;}

/* 경고메시지 */
.tools_wrap.pad_tools .bubble_desc.bubble_warning{top:auto; bottom:calc(100% + 15px); left:0; right:auto; opacity: 0; visibility: hidden;}
.tools_wrap.pad_tools .bubble_desc.bubble_warning.on:not(.hidden){opacity:1; visibility: visible;}
.tools_wrap.pad_tools .bubble_desc.bubble_warning .btn_bubble_close{position: absolute; top: 3px; right: 0}
.tools_wrap.pad_tools .bubble_desc.bubble_warning .btn_bubble_close::before{content: none;}
.tools_wrap.pad_tools .bubble_desc.bubble_warning::before{right:auto; left:74px }

/*그리기 영역*/
.input_tool .draw_area{width:100%; height:100%;}
/*그리기, 키보드 전환*/
.input_tool .tools_controll{position: absolute; bottom:0; left:0; right:0; z-index: 3; width:100%;}
.input_tool .tools_controll .inner_wrap{display: flex;}
.input_tool .tools_controll .inner_wrap .tool_select_btn_wrap{flex-shrink: 0; display: flex; align-items: center; height:90px}
.input_tool .tools_controll .inner_wrap .tool_select_btn_wrap button{height: 100%;}
.input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn{flex-shrink: 0; width:75px; padding:0 25px 10px 26px; background-color: #6460f0; } 
.input_tool .tools_controll .inner_wrap .tool_note_btn{flex-shrink: 0; display: flex; align-items: center; height:90px}
.input_tool .tools_controll .inner_wrap .tool_note_btn button{height: 100%;}
.input_tool .tools_controll .inner_wrap .tool_note_btn .not_sure{flex-shrink: 0; width:75px; padding:0 10px 10px; background-color: #004eb4; color:#fff; text-align: center; font-weight: 700;}
.input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn i{display: none;}
.input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn.mode_key i.tool_keyboard{display: block;}
.input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn.mode_pen i.tool_pen{display: block;}
.input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .keyborad_string{flex-shrink: 0;  padding:0 28px 10px; display: none;  width:75px; background-color: #a3a0ff;}
.input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .keyborad_string span{height:19px; font-weight: bold; line-height: inherit; text-align: center; color:#ffffff;}
.input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .keyborad_string.active{display: block;}
.input_tool .tools_controll .inner_wrap .tool_check_btn_wrap{display: flex; align-items:center; width:100%; height:90px;}
.input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button{padding:0 25px 10px; display: flex; justify-content: center; 
  align-items:center; width:100%; height:100%;  background-color: var(--disabled_bg);}
.input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span{margin-right:10px; font-size:16px; font-weight: bold; line-height:1.5; color:var(--disabled_text);}
.input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button.active{background-image: linear-gradient(100deg, var(--gradationStart), var(--gradationEnd));}
.input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button.brading_btn > .icon_16{display:none}/* 2023.06.28 아이콘 삭제 */

/* 네이티브 웹뷰 대응: 캐릭터별 컬러 */
/* active */
.rachael .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button.active{background-image: linear-gradient(100deg, #ea7263, #ef5e4e);}
.peter .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button.active{background-image: linear-gradient(100deg, #1998a3, #1998a3);}
.mia .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button.active{background-image: linear-gradient(100deg, #21a85b, #29a869);}
.emma .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button.active{background-image: linear-gradient(100deg, #a07ff7, #9571e5);}
.sophia .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button.active{background-image: linear-gradient(100deg, #ff9d4a, #fc9742);}
/* default */
.rachael .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button{background-color: #F1C0BA;}
.peter .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button{background-color: #a5dbdb;}
.mia .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button{background-color: #a6dcbd;}
.emma .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button{background-color: #d4c6f5;}
.sophia .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button{background-color: #fed5b3;}
/* disabled_text */
.rachael .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span,
.peter .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span,
.mia .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span,
.emma .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span,
.sophia .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span{color:#fff;}

/*노트패드 on*/
.qz .notepade_tool{top:inherit; /* bottom:0; */ transform: translateY(0); padding:0 15px; opacity: 0; visibility: hidden; transition: 0.5s; z-index: -1}
.qz .notepade_tool.active{transform: translateY(50px); opacity: 1; visibility: visible; bottom:0;}
/* .notepade_tool{top:inherit; bottom:calc(100% + 10px); transform: translateY(10px); padding:0 15px; opacity: 0; visibility: hidden; transition: transform, opacity, visibility, 0.5s;}
.notepade_tool.active{transform: translateY(0); opacity: 1; visibility: visible;} */

.qz .container.notepad_on{z-index: 3; overflow: visible; background-color: transparent; }
.qz .container.notepad_on .main_contents{padding: 0 5px; height:100%; }
.qz .container.notepad_on .main_contents .wrap{height:100%; overflow: inherit; max-width: inherit; background-color: #ffffff;}
.qz .container:not(.notepad_on) .notepad_area{width:calc(100% - 10px); left:5px}
.qz .container.notepad_on .main_contents .quiz_desc{margin-top:9px; padding:0 15px;}
.qz .container.notepad_on .main_contents .quiz_desc > p{padding-top: 11px;}
.qz .container.notepad_on .main_contents .quiz_desc .quiz_text{padding-top: 11px;}
/* .qz .container.notepad_on .main_contents .exam_wrap {visibility: hidden;} */
.qz .container.notepad_on .main_contents .exam_wrap{position: relative; z-index: 10; padding: 0 15px; transform: translateY(10px); width: 120px; margin: unset;}
.qz .container.notepad_on .main_contents .exam_wrap .exam_btn{visibility: hidden;}
.qz .container.notepad_on .main_contents .bubble_desc{top:inherit; bottom: calc(100% + 15px);}
.qz .container.notepad_on .main_contents .bubble_desc::before{top:100%; transform: rotate(180deg);  }
.qz .container.notepad_on .main_contents .quiz_content_inner{height:100%; display:block}
.qz .container.notepad_on .main_contents .quiz_area{position: relative; margin: 0 auto; padding-bottom:0; width:100%; height:100%;}
.qz .container.notepad_on .main_contents .quiz_area .problem {padding: 10px 15px 0;}
.qz .container.notepad_on .main_contents .exam_wrap ~ .quiz_area .problem{padding: 20px 15px 0;}
.qz .container.notepad_on .quiz_content{height: calc(100% - 93px);}
.qz .container.notepad_on .main_contents .quiz_area::-webkit-scrollbar {width: 5px; height: 5px;}
.qz .container.notepad_on .notepad_area{display: block;}
.qz .container.notepad_on .notepad_area.vertical_scroll{width:calc(100% - 15px);}
.qz .container.notepad_on .notepad_area.horiz_scroll{height:calc(100% - 20px);}
.qz .container.notepad_on .notepad_tip_line{display: block;} 
.qz .container.notepad_on .notepad_tip_desc{ display: block;}
.qz .container.notepad_on .main_contents .note_wrap {bottom: 0; z-index: 999;}
.qz .container.notepad_on .main_contents .note_wrap .btn_wrap .notepad_btn{background-color:#666666;}
.qz .container.notepad_on .input_tool {bottom: 35px; z-index: 999;}
.qz .container.notepad_on .note_wrap .btn_wrap.notepad_btn_wrap,
.qz .container.notepad_on .note_wrap .btn_wrap.not_sure {bottom: 65px; margin-top:0;}
.qz .container.notepad_on .input_tool .tool_wrap.notepad_on{height:0; overflow: hidden; display: none;}
.qz .container.under_notepad .notepad_area{display:block; z-index:0; opacity:0.3;}

/* toast pop : 문제풀이 */
.qz .toast_pop{top:calc(50% + 130px);}
 
/* 입력 키보드 */
.keyboard{position: relative;}
.keyboard .key_type{position: relative; z-index: 1; display: none; height:100%; }
.keyboard .key_type.active{display: block;}
.keyboard .key_type .key_type_inner{display: flex; height:100%; }
.keyboard .key_type .key_type_inner .key_wrap{display: flex; flex-wrap: wrap; height:100%;}
.keyboard .key_type .key_type_inner .key_wrap>li{height:25%;}
.keyboard .key_type .key_type_inner .key_wrap .key{display: flex; justify-content: center; align-items: center; width:100%; height:100%; border-top:1px solid #f3f3f3; border-right:1px solid #f3f3f3; }
.keyboard .key_type .key_type_inner .key_wrap .key span{font-family:'cambria', serif; letter-spacing: -0.01px; text-align: center;}
.keyboard .key_type .key_type_inner .key_oper{background-color: #fafafa;}
.keyboard .key_type .key_type_inner .key_num{background-color: #ffffff;}
.keyboard .key_type .key_type_inner .key_oper .key_wrap>li .key span{height:28px; font-size:24px; line-height: 1.33; }
.keyboard .key_type .key_type_inner .key_num .key_wrap>li .key span{/* height:21px;  */font-size:24px; line-height: 1.44; }
.keyboard .key_type .key_type_inner .key_num .key_wrap>li:nth-child(3n) .key{border-right:none;}

/* 키보드 키 */
.keyboard .key_type.key_type_basic .key_type_inner .key_oper{width:40%;}
.keyboard .key_type.key_type_basic .key_type_inner .key_num{width:60%;}
.keyboard .key_type.key_type_basic .key_type_inner .key_oper .key_wrap{height:50%;}
.keyboard .key_type.key_type_basic .key_type_inner .key_oper .key_wrap>li{width:50%; height:50%;}
.keyboard .key_type.key_type_basic .key_type_inner .key_num .key_wrap>li{width:33.3333%; }
.keyboard .key_type.key_type_basic .key_type_inner .key_wrap>li.key_zero{width:66.6666%;}
.keyboard .key_type.key_type_compound .key_type_inner .key_oper{width:49.3333%;}
.keyboard .key_type.key_type_compound .key_type_inner .key_num{width:50.4666%;}
.keyboard .key_type.key_type_compound .key_type_inner .key_oper .key_wrap>li{width:33.3333%; }
.keyboard .key_type.key_type_compound .key_type_inner .key_num .key_wrap>li{width:33.3333%; }
.keyboard .key_type.key_type_string .key_type_inner{display: block; }
.keyboard .key_type.key_type_string .key_type_inner .key_string{background-color: #ffffff;}
.keyboard .key_type.key_type_string .key_type_inner .key_string{height:75%;}
.keyboard .key_type.key_type_string .key_type_inner .key_oper{height:25%;}
.keyboard .key_type.key_type_string .key_type_inner .key_wrap>li{height:auto;}
.keyboard .key_type.key_type_string .key_type_inner .key_string .key_wrap>li{width:16.6666%; }
.keyboard .key_type.key_type_string .key_type_inner .key_string .key_wrap>li .key span{font-style: italic;}
.keyboard .key_type.key_type_string .key_type_inner .key_oper .key_wrap>li{width:16.6666%; }
.keyboard .key_type.key_type_string .key_type_inner .key_oper .key_wrap>li .key.key_num_del{background-color: #ffffff;}
.keyboard .key_type.key_type_number .key_type_inner .key_num {width: 100%;}
.keyboard .key_type.key_type_number .key_type_inner .key_wrap>li {width: 33.3333%;}
.keyboard .key_type.key_type_number .key_type_inner .key_wrap>li.key_zero{width:66.6666%;}

/*추가 입력 팝업*/
.keyboard .key_type .key_type_inner .key_wrap .key_input_add.key_on{background-color: var(--subText); color:#ffffff;}
.keyboard .input_add_wrap{position: absolute; top:0; left:0; right:0; width:100%; height:156px; background-color: #ffffff; border-top:1px solid #f3f3f3; transition: transform, .3s;}
.keyboard .input_add_wrap .input_add_btn{position: absolute;}
.keyboard .input_add_wrap .input_add_close{top:20px; left:20px}
.keyboard .input_add_wrap .input_add_order{top:20px; right:20px; display: flex;}
.keyboard .input_add_wrap .input_add_back{bottom:20px; left:20px;}
.keyboard .input_add_wrap .input_add_check{bottom:20px; right:20px;}
.keyboard .input_add_wrap .input_add_area{padding:20px; display: flex; flex-direction: column; justify-content: center; align-items: center; width:100%; height:100%; overflow: overlay; }
.keyboard .input_add_wrap.active{transform: translateY(-100%);}
.keyboard .input_add_wrap.active .input_add_btn{z-index:2;}
.keyboard .input_add_wrap.active .input_add_area{z-index:1; position: relative;}

/* 키보드 추가 키 */
.keyboard .key_type .key_type_inner .key_wrap>li {position: relative;}
.keyboard .key_type .key_type_inner .key_wrap>li .more_key{position: relative;}
.keyboard .key_type .key_type_inner .key_wrap>li .more_key::before{content: ""; position: absolute; top:0; right:0; display: block; border-top: 6px solid #e0e0e0; border-left: 6px solid transparent;}
.keyboard .key_type .key_type_inner .key_wrap>li .more_key.active{background-color: var(--subText); color:#ffffff;}
.keyboard .key_type .key_type_inner .key_wrap>li .more_key.active::before{display: none;}
.keyboard .key_type .key_type_inner .key_wrap>li .more_key_wrap{position: absolute; bottom: calc(100% - 1px); left:0; z-index: 1; display: none; border:2px solid var(--subText); background-color: #ffffff;}
.keyboard .key_type .key_type_inner .key_wrap>li .more_key_wrap .key{position:relative; height:50px; width:60px; border:none;}
.keyboard .key_type .key_type_inner .key_wrap>li .more_key_wrap .key:not(:last-child):nth-child(n-1)::after {content: ""; position:absolute; top:50%; right:0; transform:translateY(-50%);  display: block; width: 1px; height: 21px; background-color: #f3f3f3; }
.keyboard .key_type .key_type_inner .key_wrap>li .more_key.active + .more_key_wrap{ display: flex;}
.keyboard .key_type.key_type_string .key_type_inner .key_wrap>li .more_key.mo_key_right + .more_key_wrap{left: inherit; right:0;}

/* 객관식 문제 버튼 영역 흰색-투명 그라디언트 bg */
/* .container.multi_choice .input_tool .note_wrap::before{content: ""; position: absolute; bottom:0; left:0; right:0; z-index: -1;display: block; width:100%; height: 90px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); pointer-events: none;} */
.container.multi_choice .main_contents.notepad_on + .input_tool .note_wrap::before{display: none;}
.container.multi_choice .input_tool .multi_choice_board {display: block;}
.container.multi_choice .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap{display: none;}

/*객관식 문제 정답판*/
.multi_choice_board .wrap{position: relative;}
.multi_choice_board .wrap.close{display:none}
.multi_choice_board .note{padding-top:0; font-weight: 500; color:#666666; margin-bottom:15px; }
/* .multi_choice_board .note{padding-top:14px; font-weight: 500; color:#666666; margin-bottom:15px} */
.multi_choice_board .note:empty{margin-bottom:0}
.multi_choice_board .note span{font-weight: 500; color:var(--subText);}
.multi_choice_board .multi_answer_list{counter-reset:answer_list; height:233px; overflow:auto;}
.multi_choice_board .multi_answer_list li{display: flex; align-items: center; min-height:50px;}
.multi_choice_board .multi_answer_list li input[type="radio"]{position:absolute; padding:0; margin:-1px; width:1px; height:1px; border:0; overflow:hidden; clip:rect(0,0,0,0); }
.multi_choice_board .multi_answer_list li input[type="radio"] + label{position:relative; display:flex; align-items: center; width:100%; cursor:pointer; }
.multi_choice_board .multi_answer_list li input[type="radio"] + label span{font-family:'cambria', serif; font-size: 22px; letter-spacing: -0.01px; color: #303030; margin:10px 0}
.multi_choice_board .multi_answer_list li input[type="radio"] + label:before{counter-increment: answer_list;  content: counter(answer_list); margin-right:20px; display: flex; justify-content: center; align-items: center; width:40px; height:40px; font-size: 16px; font-weight: bold; line-height: 1.5; color: var(--subText); border-radius: 15px; background-color: #ffffff;}
.multi_choice_board .multi_answer_list li input[type="radio"]:checked + label:before{ color:#ffffff; background-color: var(--subText);}
/* checkbox */
.multi_choice_board .multi_answer_list li input[type="checkbox"]{position:absolute; padding:0; margin:-1px; width:1px; height:1px; border:0; overflow:hidden; clip:rect(0,0,0,0); }
.multi_choice_board .multi_answer_list li input[type="checkbox"] + label{position:relative; display:flex; align-items: center; width:100%; cursor:pointer; }
.multi_choice_board .multi_answer_list li input[type="checkbox"] + label span{font-family:'cambria', serif; font-size: 22px; letter-spacing: -0.01px; color: #303030; margin:10px 0}
.multi_choice_board .multi_answer_list li input[type="checkbox"] + label:before{counter-increment: answer_list;  content: counter(answer_list); margin-right:20px; display: flex; justify-content: center; align-items: center; width:40px; height:40px; font-size: 16px; font-weight: bold; line-height: 1.5; color: var(--subText); border-radius: 15px; background-color: #ffffff;}
.multi_choice_board .multi_answer_list li input[type="checkbox"]:checked + label:before{ color:#ffffff; background-color: var(--subText);}

/* 객관식 문항 토글 버튼 */
.multi_choice_board .multi_toggle_btn{display:flex; align-items:center; justify-content: center; width:100%; background-color:#f5f5f5; height:35px; border-bottom:1px solid #e5e5e5}
.multi_choice_board .multi_toggle_btn.close{border-bottom:none}
.multi_choice_board .multi_toggle_btn.close i{transform: rotate(-180deg); -webkit-transform: rotate(-180deg);}
/* test 삭제바람*/
.multi_choice_board .multi_answer_list{display: none;}
.multi_choice_board .multi_answer_list.active{display: block;}

/* 객관식 문제 선택 후 노트패드 on*/
.qz .container.multi_choice.notepad_on .note_wrap::before{display: none;}

/* 오답노트 */
.incorrect{background-image: linear-gradient(335deg, var(--currentSubjectBgStart), var(--currentSubjectBgEnd));}
.incorrect header {padding: 19px 0 0px; }
.incorrect header .header_wrap {display: block;}
.incorrect .quiz_content .quiz_area {width: 100%; padding-bottom:0;}
/* 오답 리스트 */
.incorrect_list{margin-top:22px; }
.incorrect_list .list_inner{display: flex; justify-content: center; padding: 0 20px}
.incorrect_list ul::-webkit-scrollbar { width: 3px; height: 3px;}
.incorrect_list ul::-webkit-scrollbar-thumb {background: #ddd; border-radius: 1.5px;}
.incorrect_list ul::-webkit-scrollbar-track {margin: 0 5px;}
.incorrect_list ul{padding-bottom: 20px; display: flex; gap:0 10px; overflow-y: auto;}
.incorrect_list ul::-webkit-scrollbar-thumb {background: #bbb; border-radius: 1.5px;}
.incorrect_list ul li button{padding: 8px 18px 8px 19px; height:35px; font-size: 14px; font-weight: bold; line-height: 1.43; text-align: center; color: var(--incorrect_list_text); border-radius: var(--borderRadius); background-color: var(--incorrect_list_bg);}
.incorrect_list ul li button.active{ color:var(--incorrect_list_bg); background-color: #ffffff;}
.incorrect .main_contents>.wrap { height: calc(100vh - 115px);}
.incorrect .container {height:calc(100vh - 115px); background-color: #ffffff; border-radius: var(--borderRadius) var(--borderRadius) 0 0;}
/* 오답 태그 */
.incorrect_tag_list_wrap{position:relative; margin-top: 25px; padding:0 20px;}
.incorrect_tag_list{display: flex; gap:10px; scrollbar-width: none; }
.incorrect_tag_list::-webkit-scrollbar {display: none;}
.incorrect_tag_list li{flex-shrink: 0;}
.incorrect_tag_list li:last-child{margin-right:40px;}
.incorrect_tag_list li button{padding:5px 15px 6px 10px; display: flex; align-items:center; height:35px; border:1px solid var(--subText); border-radius:var(--borderRadius); box-sizing: border-box; }
.incorrect_tag_list li button i{flex-shrink: 0; margin-right:5px;}
.incorrect_tag_list li button p{width:100%; height:17px; font-size: 12px; font-weight: bold; color: var(--subText); white-space: nowrap;}
.incorrect_tag_list.active{flex-wrap:wrap;}
.incorrect .tag_list_down_btn{position: absolute; top:-1px; right:0; z-index: 1; padding:9px 20px 9px 34px; height:37px; background-image: linear-gradient(to right, rgba(245, 245, 245, 0), #fff 20%, #fff); box-sizing: border-box;}
.incorrect .tag_list_down_btn i{transition: transform .3s;}
.incorrect .tag_list_down_btn.active i{transform: rotate(-180deg);}
.incorrect .quiz_desc {margin-top: 15px;}
/* 오답 중간 버튼 */
.incorrect_check{margin-top:10px; padding:0 20px;}
.incorrect_check .check_inner{display: flex; gap:10px;}
.incorrect_check .check_inner li{position: relative; }
.incorrect_check .check_inner li:last-child{margin-left:auto;}
.incorrect_check .check_inner li button{padding:5px 10px; display: flex; align-items:center; border-radius: var(--borderRadius); background-color: #f5f5f5; }
.incorrect_check .check_inner li button.retray{color:#ffffff; background-color: var(--subText);}
.incorrect_check .check_inner li button.retray .icon_12{display:none}
.incorrect_check .check_inner li button span{margin-right:5px; font-size: 12px; font-weight: 500; line-height: 1.33; white-space: nowrap;}
.incorrect_check .check_inner li button:not(.retray).inc_check_on{color:#ffffff; background-color: #666666;}
.incorrect_check .check_inner li button.steps i{transition:transform .3s;}
.incorrect_check .check_inner li button.steps.active i{transform: rotate(180deg);}
.incorrect_check .check_inner li button.steps.active{background-color: #666666; color:#ffffff;}
.incorrect_check .check_inner .bubble_desc{ right: inherit; left:0;}
.incorrect_check .check_inner .bubble_desc::before {right: inherit; left:30px;}
/* 오답 steps */
.incorrect .exam_content{position: fixed; left:20px; transform: translateY(10px); z-index: 9;  padding:5px; display: none; width:calc(100% - 40px); max-height: 450px; border:1px solid #707070; border-radius: 15px; box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.02); background-color: #ffffff; overflow: hidden;}
.incorrect .exam_content .exam_content_inner{padding:15px; overflow: overlay;  width:100%; min-height:190px;}
.incorrect .exam_content.active{display: block;}
/* .incorrect_check .exam_content{position: fixed; left:20px; transform: translateY(10px); z-index: 9;  padding:5px; display: none; width:calc(100% - 40px); min-height:190px; max-height: 450px; border:1px solid #707070; border-radius: 15px; box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.02); background-color: #ffffff; overflow: hidden;}
.incorrect_check .exam_content .exam_content_inner{padding:15px; overflow: overlay;  width:100%; }
.incorrect_check .exam_content.active{display: block;} */

/* 오답 객관식 container에 multi_choice클랙스 */
.incorrect .container.multi_choice .main_contents>.wrap {height: calc(100vh - 418px);}
.incorrect .input_tool{position: fixed; display: none;}
.incorrect .input_tool .tool_wrap {margin-top: 0px; height: 306px;}
.incorrect .multi_choice_board form{overflow: auto;}
.incorrect .multi_choice_board .multi_answer_list{margin-top:30px;}
.incorrect .multi_choice_board .multi_answer_list li input[type="radio"]:checked + label:before {background-color: #ff8678;}
.incorrect .multi_choice_board.answer_check .multi_answer_list li input[type="radio"]:checked + label:before {background-color: #32d6c5;}
.incorrect .multi_choice_board .multi_answer_list li input[type="checkbox"]:checked + label:before {background-color: #ff8678;}
.incorrect .multi_choice_board.answer_check .multi_answer_list li input[type="checkbox"]:checked + label:before {background-color: #32d6c5;}

/* .incorrect .input_tool */
.incorrect .input_tool::before{content: ""; position: absolute; bottom:100%; left:0; right:0; display: none; width:100%; height:90px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); pointer-events: none;}
.incorrect .input_tool.tag_list_column::before{display: block;}
.incorrect .container.multi_choice .input_tool{display: block;}
.incorrect .container.multi_choice .input_tool .multi_choice_board .multi_answer_list {height: 261px;}
.incorrect .container.multi_choice .multi_toggle_btn.close{height:90px; align-items: flex-start;}
.incorrect .container.multi_choice .multi_toggle_btn.close i{margin-top:7px}

/* test 키보드 모드 삭제바람 */
.input_tool .tools_controll .inner_wrap .tool_select_btn_wrap{position:relative;}
.keyboard_type_test{position: absolute; display: none; top:-20px; left: 20px; border-radius: 20px; overflow: hidden;}
.keyboard_type_test.active{display: block;}
.keyboard_type_test ul {display: flex; }
.keyboard_type_test ul li{position: relative;}
.keyboard_type_test ul li:nth-child(n+2):before{content:""; position: absolute; left:0; top:50%; transform: translateY(-50%); display: block; width: 1px; height:10px; background-color: #bfcfe7; box-shadow: 0 0 5px rgba(0,0,0,.15);}
.keyboard_type_test ul li button{padding:8px 24px; background: #303030; color:#ffffff;}

/* 팝업 리스트 보기 삭제 바람 */
/* .mpop_wrap{position: fixed; bottom: 40px; right: 8px; z-index: 10000; display: flex;   flex-wrap: wrap; gap: 4px 10px;}
.mpop_wrap button{padding:4px; color:blue} */

/* .lepop_wrap{position: fixed; bottom:20px; right:8px; z-index: 10000;}
.lepop_wrap button{padding:4px; color:blue} */

/* 한국 */
.ko .qz_pagination span {font-size: 20px; font-weight: 500;  line-height: 1.4; letter-spacing: -0.01px;}
.ko .quiz_desc p, 
.ko .quiz_desc > p > span {font-size: 18px; font-weight: 500; line-height: 1.56; letter-spacing: -0.01px; }
.ko .quiz_content .exam_wrap .exam_btn span {font-size: 14px; font-weight: 500; line-height: 1.43;}
.ko .note_wrap .btn_wrap button span {font-size: 14px; font-weight: 500; line-height: 1.43;}
.ko .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button {padding: 18px 25px 16px}
.ko .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span {font-size: 18px; font-weight: bold; line-height: 1.167; letter-spacing: -0.01px;}

/* 학습완료 */
.course_step:not(.qz) .container.step_completed{height:100vh; margin-top:0}
.course_step:not(.qz) .container.step_completed .main_contents{display:flex; height: 100%; align-items: center; padding-bottom: 0; justify-content: center;}
.course_step:not(.qz) .container.step_completed{background:#ffc806 url('../images/daily_course/bg_course_completed.webp') no-repeat center center; background-size: cover; border-radius: 0;}
.course_step:not(.qz) .container.step_completed .main_contents .wrap{display: flex; justify-content: center;}
.step_completed_charactor{position: relative;}
.step_completed_charactor .img_wrap{position: relative; padding:0 4px}
.step_completed_charactor .img_wrap figure.character{position: relative; z-index: 1;}
.step_completed_charactor .img_wrap .bg_bling{opacity: 0;  position: absolute; z-index: 2; top:0; left:0; width:100%; height: 100%; padding:0 4px; animation:blink 1.5s ease-in-out forwards;}
.step_completed_charactor .message{position: absolute; z-index:1; bottom:22%; width:100%; font-size: 18px; font-weight: 500; line-height: 1.5; text-align: center; color: #666}

@keyframes blink{
  0% {opacity:0; }
  20% {opacity:0;}
  100% {opacity:1;}
}

/* 폴드 */
@media (max-width:319px){  
  .quiz_desc p{font-size: 14px;}
  
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .keyborad_string {padding: 18px 28px 19px;}
  .incorrect_select_date .select_date_btn time {font-size: 14px;}
}

@media (max-width: 374px) {
  .keyboard .key_type .key_type_inner .key_wrap>li .more_key_wrap .key {width: 58px!important;}
  .keyboard .key_type.key_type_string .key_type_inner .key_wrap>li .more_key.more_key_right + .more_key_wrap{left:inherit; right:0px;  }    
}

@media (min-width:600px){    
  .qz header {position: relative; padding: 23px 0 0px; min-height:87px}
  .qz:not(.incorrect) .header_wrap{min-height:34px}
  .qz_pagination {height: 27px;}
  .qz_pagination span {font-size: 20px;}
  .quiz_desc{margin:40px auto 0; padding:0 30px; width:100%; max-width: 100%;}
  .quiz_desc p, .quiz_desc .q_numbers{font-size: 18px;}
  .quiz_desc .btn_learn_view > span{font-size:16px;}
  .quiz_content {margin-top: 15px;}

  /* quiz_progress */
  .quiz_progress{font-size:.7rem;}
  
  /* 2023.03.03 문제영역 높이 이슈 */
  .qz .quiz_content .quiz_content_inner {height: 100%;}  /* exam_wrap marginTop */
  .qz .quiz_content .quiz_area{height:calc(100% - 64px);} /* exam_wrap height + quiz_area marginTop */
  .qz.incorrect .quiz_content .quiz_content_inner{height:calc(100% - 30px);} /* quiz_area marginTop */
  .qz.incorrect .quiz_content .quiz_content_inner .quiz_area{height: 100%;}

  /* .quiz_content .quiz_content_inner {height: 100%;}  */
  .quiz_content .quiz_area {margin: 30px auto 0;}
  .quiz_content .quiz_area .problem{margin: 0 auto; padding:0 50px; }

/* 그리기툴 */
  .quiz_content .draw_tools .inner_wrap { justify-content: center;}
  .quiz_content .draw_tools .inner_wrap .tools_wrap{margin:0 15px; } 
  
  /* 예제 */
  .quiz_content .exam_wrap{margin:0 auto; padding:0 30px; width: 100%; max-width: 100%;} 
  .qz .container.notepad_on .main_contents .exam_wrap{padding: 0 20px;}
  .quiz_content .exam_wrap .exam_btn {padding: 7px 15px; height:33px;}
  .quiz_content .exam_wrap .exam_btn span{margin-right:10px; font-size: 14px;/*  line-height: 1.43; */}
  .quiz_content .exam_wrap .exam_btn i {width:16px; height:16px;}
  .quiz_content .exam_wrap .exam_btn i object{width:100%;}
  /* .quiz_content .exam_wrap .exam_content {position: fixed; left: 50%; width: calc(100% - 60px); height:auto;}
  .quiz_content .exam_wrap .exam_content .exam_content_inner {min-height: 260px; max-height: 578px;} */
  .sub_page:not(.incorrect) .exam_content {position: fixed; left: 50%; width: calc(100% - 60px); height:auto;}
  .sub_page:not(.incorrect) .exam_content .exam_content_inner {min-height: 260px; max-height: 578px;}
  .incorrect .exam_content{width:calc(100vw - 220px);}

  /**** 노트패드 Switch ****/
  .notepad_btn{height:33px;}
  .notepad_btn .notepad_switch:after{width:29px; height:29px; top: 2px; left:2px}
  .notepad_btn .notepad_switch > i{line-height:2.3; font-size:14px;}
  .notepad_btn .notepad_switch .on{padding-left:15px; padding-right:40px;}
  .notepad_btn .notepad_switch .off{padding-left:40px; padding-right:15px;}
  .notepad_btn.on .notepad_switch:after{left:calc(100% - 31px);}

  /* 노트패드 버튼 여역 */
  .note_wrap .btn_wrap .notepad_btn {padding: 5px 20px 5px 15px;}
  .note_wrap .btn_wrap button i {width:32px; height:32px;}
  .note_wrap .btn_wrap.not_sure button {padding: 9px 15px 9px 15px;}
  .note_wrap .btn_wrap.not_sure button i {width:24px; height:24px;}  
  .note_wrap .btn_wrap button i img{width:100%;}
  .note_wrap .btn_wrap button span {font-size: 16px; font-weight: 500; line-height: 1.5; }  
  /* 버튼 중간 영역 */
  .note_wrap .btn_wrap.notepad_btn_wrap{left:30px; bottom:30px}
  .note_wrap .btn_wrap.not_sure{right:30px;  bottom:30px}
  .note_wrap .btn_wrap.not_sure .bubble_desc {position: absolute; right:0; margin-top: 0;}
  .notepade_tool .inner_wrap{justify-content: center; gap:0 30px;}

  /* 노트패드 on */
  .qz .container.notepad_on .main_contents {padding: 0 10px;}
  .qz .container.notepad_on .main_contents .quiz_area .problem {padding: 29px 20px 0;}
  .qz .container.notepad_on .main_contents .exam_wrap{transform: none;}
  .qz .container.notepad_on .main_contents .exam_wrap ~ .quiz_area .problem{padding: 30px 40px 0;}
  .qz .container.notepad_on .input_tool { bottom: 60px;} 
  .qz .container.notepad_on .main_contents .quiz_desc{margin-top:20px; padding:0 20px;}
  .qz .container.notepad_on .main_contents .quiz_desc > p{padding-top:20px;}
  .qz .container.notepad_on .main_contents .quiz_desc .quiz_text{padding-top:20px;}
  .qz .container.notepad_on .main_contents .quiz_desc .quiz_text p{padding-top:0;}
  .qz .container:not(.notepad_on) .notepad_area{width:calc(100% - 20px); left:10px}
  .qz .container.notepad_on .note_wrap .btn_wrap.not_sure{bottom:75px}
  .qz .notepade_tool.active{transform: translateY(60px);}

  .input_tool .tool_wrap{height:500px;}
  .input_tool .tools_controll {bottom: 0px;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn {padding:0 64px; width: 160px; }
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn i{width:32px; height:32px;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn i img{width:100%;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .keyborad_string {padding:0 67px; width:160px;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .keyborad_string span {height: 27px; font-size:20px; }
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button {padding:0 32px;}
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span {height:27px; font-size: 20px; line-height: 1.3;}
     
  /* 키보드 */
  .input_tool .input_tool_wrap {height:calc(100% - 90px);}
  .keyboard .key_type .key_type_inner .key_wrap .key span {height: 33px; font-size: 28px;  line-height: 0.93;}
  .keyboard .key_type .key_type_inner .key_oper .key_wrap>li .key span {height: 33px; font-size: 28px; line-height: 0.93;}
  .keyboard .key_type .key_type_inner .key_num .key_wrap>li .key span {height: 33px; font-size: 28px;  line-height: 0.93;}
  .keyboard .key_type .key_type_inner .key_wrap .key_num_del i{width:40px; height:40px;}
  .keyboard .key_type .key_type_inner .key_wrap>li .more_key::before {border-top: 10px solid #e0e0e0; border-left: 10px solid transparent;}
  .keyboard .key_type .key_type_inner .key_wrap>li .more_key_wrap .key {height: 72px; width: 132px;}

  .keyboard .input_add_wrap {height: 300px;}
  .keyboard .input_add_wrap .input_add_area {padding: 30px 40px;}
  .keyboard .input_add_wrap .wrap button i{width:32px; height:32px;}
  .keyboard .input_add_wrap .wrap button i img{width:100%; }
  .keyboard .input_add_wrap .wrap .input_add_order li:last-child{margin-left:15px;}
  .keyboard .input_add_wrap .input_add_close {top: 30px; left: 40px;}
  .keyboard .input_add_wrap .input_add_order {top: 30px; right: 40px;}
  .keyboard .input_add_wrap .input_add_back {bottom: 30px; left: 40px;}
  .keyboard .input_add_wrap .input_add_check {bottom: 30px; right: 40px;}  

  /* 객관식 문제 */
  .container.multi_choice .input_tool .multi_choice_board .wrap{max-width: inherit; padding:0 60px;}
  /* .multi_choice_board .note {padding-top: 30px; font-size: 18px; line-height: 1.56; letter-spacing: -0.01px; margin-bottom:20px;} */
  .multi_choice_board .note {padding-top: 0; font-size: 18px; line-height: 1.56; letter-spacing: -0.01px; margin-bottom:20px;}
  .multi_choice_board .note span {font-size: 18px; line-height: 1.56; letter-spacing: -0.01px;}
  .multi_choice_board .multi_answer_list {/* margin-top: 20px;  */height: 330px;}
  .multi_choice_board .multi_answer_list li input[type="checkbox"] + label:before {margin-right: 40px; width: 60px; height: 60px; font-size: 24px; line-height: 1; letter-spacing: -0.01px; border-radius: 15px;  background-color: #ffffff;}
  .multi_choice_board .multi_answer_list li input[type="checkbox"] + label span { font-size: 28px;}
  .multi_choice_board .multi_answer_list li + li{margin-top:15px }
  .multi_choice_board .multi_toggle_btn{display: none;}
  /* test */
  .keyboard_type_test {top: -57px;  left: 84px;}
  
  /* 오답 노트 */
  .incorrect{background-image: linear-gradient(35deg, var(--currentSubjectBgStart),var(--currentSubjectBgEnd));}
  .incorrect header {padding: 23px 0 0px;}
  .incorrect header .sub_title a .text_wrap h2 {height: 33px; font-size: 24px; line-height: 1.33;}
  /* 오답 리스트 */
  .incorrect_list {margin-top: 25px;}
  .incorrect_list ul li button { padding: 10px 26px; height:42px; font-size: 16px; line-height: 1.5;}
  .incorrect .container {height: calc(100vh - 138px);}
  .incorrect .main_contents>.wrap {height: calc(100vh - 138px);}
  /* 오답 태그 */
  .incorrect .quiz_content {height:auto;}
  .incorrect .quiz_content .quiz_content_inner {height: auto;}
  .incorrect_tag_list_wrap {margin: 40px auto 0; padding:0; width: 550px; }
  .incorrect_tag_list li button i {width:24px; height:24px;}
  .incorrect .tag_list_down_btn {right: -20px;}
  .incorrect .quiz_desc {margin-top: 25px; padding:0; width:550px;}
  .incorrect_check {margin:15px auto 0; padding: 0; width: 550px; }
  .incorrect_check .check_inner li button {padding: 9px 15px;}
  .incorrect_check .check_inner li button span {font-size: 16px; line-height: 1.5;}  
  .incorrect_check .check_inner li button i{width:16px; height:16px;}
  .incorrect .bubble_desc {top: calc(100% + 20px); bottom:inherit;}
  .incorrect .bubble_desc::before{bottom:100%; top:initial; transform: rotate(180deg);}
  .incorrect .input_tool .tool_wrap {height: 450px;}  
  .incorrect .input_tool .input_tool_wrap {height: 100%;}  
  .incorrect .multi_choice_board .multi_answer_list {margin-top: 50px;}
  .incorrect .container.multi_choice .input_tool .multi_choice_board .multi_answer_list {height: 360px;}
  .incorrect .container.multi_choice .main_contents>.wrap {height: calc(100vh - 588px);}

  /* 학습완료 */
  .course_step:not(.qz) .container.step_completed .step_completed_charactor{max-width: 420px; width: 47.65vw;}
  .step_completed_charactor .message{font-size: 24px; bottom:20%}
}

@media (min-width:600px) and (orientation: portrait) {   
  .quiz_content .exam_wrap .exam_btn{height:33px}
  .qz .main_contents .wrap {height: calc(100vh - 587px); max-width: inherit;}  
  .quiz_content .quiz_area .notepad .notepad_tip_desc { bottom: 30px; width:100%;}
       
  .note_wrap {padding: 0 40px;}
  .main_contents.notepad_on .wrap {padding:0 25px; height: auto; overflow: inherit;}  
  .quiz_content .quiz_area.unactive .notepad_area {padding: 0 25px;}
  
  /* 오답노트 */
  .incorrect .main_contents>.wrap {height: calc(100vh - 138px);}
  /* .incorrect_check .exam_content{left: 50%; transform:translateY(10px) translateX(-25%); width: 550px; max-height: 464px!important;} */
  .incorrect .exam_content{width: 550px; max-height: 464px!important;}

  /* 필기장 스트로크 경고메시지 */
  .tools_wrap.pad_tools .bubble_desc.bubble_warning::before{left:104px}
}

/* 갤럭시 폴드 펼침 상태 */
@media (min-width:590px){
  .input_tool .tools_controll {bottom: 0px;}
}

@media (max-width:768px) and (orientation: portrait) { 
  .main_contents.notepad_on + .input_tool {bottom: 35px;}
  .keyboard .key_type .key_type_inner .key_wrap>li .more_key_wrap .key {width: 60px;}
}

/* 객관식 문항 : 컨텐츠 갯수에 따라 높이 조절되도록 수정 */
@media (orientation: portrait) { 
  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on) .multi_choice_board .wrap{padding-bottom: 20px; padding-top:20px}
  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on){display: flex; flex-direction: column; height: calc(100vh - 64px);}
  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on) .quiz_content{height:auto;}
  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on) .input_tool{position:static; flex-grow: 0;}
  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on) .input_tool .multi_choice_board{height: auto;}
  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on) .input_tool .tool_wrap{padding-bottom:0; height:auto;}
  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on) .input_tool .tools_controll{position: static;}
  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on) .multi_choice_board .multi_answer_list{ height:auto; max-height:273px;}
  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on) .main_contents{flex-grow: 1; overflow:hidden}
  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on) .main_contents .wrap{height: 100%;}
  /* 오답 확인 */
  /* 2023.04.14 네이티브앱 웹뷰 대응 : 미디어쿼리 바깥으로 이동, landscape 모드에서 속성 추가 */
  /* .incorrect .container.multi_choice{display:flex; flex-direction: column;}
  .incorrect .container.multi_choice .main_contents{flex-grow: 1; overflow: hidden;}
  .incorrect .container.multi_choice .main_contents>.wrap{height: 100%;}
  .incorrect .container.multi_choice .input_tool{position: static;}
  .incorrect .container.multi_choice .input_tool .multi_choice_board{height: 100%;}
  .incorrect .container.multi_choice .input_tool .multi_choice_board .multi_answer_list{height: auto; max-height:285px; margin-bottom:50px}
  .incorrect .container.multi_choice .input_tool .tool_wrap{height: auto;} */
}

/* 오답 확인 : 2023.04.17 네이티브 웹뷰 대응 @media (orientation: portrait) ~ 내용 옮김 */
/* 우선순위때문에 min-width:600 미디어쿼리 아래에 놓음 */
.incorrect .container.multi_choice{display:flex; flex-direction: column;}
.incorrect .container.multi_choice .main_contents{flex-grow: 1; overflow: hidden;}
.incorrect .container.multi_choice .main_contents>.wrap{height: 100%;}
.incorrect .container.multi_choice .input_tool{position: static;}
.incorrect .container.multi_choice .input_tool .multi_choice_board{height: 100%;}
.incorrect .container.multi_choice .input_tool .multi_choice_board .multi_answer_list{height: auto; max-height:285px; margin-bottom:50px}
.incorrect .container.multi_choice .input_tool .tool_wrap{height: auto;}

@media (max-height:670px) {
  .incorrect .multi_choice_board .wrap{overflow:hidden;}
}

@media (min-width:600px) and (orientation: portrait) { 
  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on){height: calc(100vh - 87px);}
  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on) .multi_choice_board .multi_answer_list{max-height:350px;}
}

@media (min-width:800px) and (orientation: portrait) {
  /* 2023.03.03 문제영역 높이 이슈 */
  .qz .quiz_content .quiz_content_inner {height: 100%;}  /* exam_wrap marginTop */
  .qz .quiz_content .quiz_area{height:calc(100% - 70px);} /* exam_wrap height + quiz_area marginTop */

  .qz_pagination {height: 32px;}
  .qz_pagination span {font-size: 26px;}
  .quiz_desc p, .quiz_desc .q_numbers,
  .quiz_desc > p > span {font-size: 24px; font-weight: 500; line-height: 1.33; letter-spacing: -0.01px;}
  .quiz_content .exam_wrap .exam_btn{height: 40px;}
  .quiz_content .exam_wrap .exam_btn span{font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01px;}
  .note_wrap .btn_wrap button span {font-size: 20px; font-weight: 500; line-height: 1.3;letter-spacing: -0.01px;}
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span {font-size: 26px; font-weight: bold;  letter-spacing: -0.01px; line-height: 1;}
  .level_badge{font-size: 18px; border-radius: 18px;}

  .ko .qz_pagination span {font-size: 26px; font-weight: 500; letter-spacing: -0.01px; }
  .ko .qz_pagination .current_page {font-weight: bold;}
  .ko .quiz_desc p, .ko .quiz_desc > p > span {font-size: 26px; font-weight: 500; letter-spacing: -0.01px;}
  .ko .quiz_content .exam_wrap .exam_btn span{font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01px;}
  .ko .note_wrap .btn_wrap button span { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01px;}
  .ko .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span {font-size: 26px; font-weight: bold; letter-spacing: -0.01px; line-height: 1;}
  .incorrect_check .check_inner li button span {font-size: 20px; }  

  /**** 노트패드 Switch ****/
  .notepad_btn{min-width:115px; height:40px;}
  .notepad_btn .notepad_switch:after{width:36px; height:36px; top: 2px; left:2px}
  .notepad_btn .notepad_switch > i{line-height:2; font-size:20px;}
  .notepad_btn .notepad_switch .on{padding-left:15px; padding-right:45px;}
  .notepad_btn .notepad_switch .off{padding-left:45px; padding-right:15px;}
  .notepad_btn.on .notepad_switch:after{left:calc(100% - 38px);}
}

@media (min-width:1600px) and (orientation: portrait) {
  .qz header {padding: 52px 0 0px;}
  .qz header .header_wrap {height: auto}

  /* 2023.03.03 문제영역 높이 이슈 */
  .qz .quiz_content .quiz_content_inner {height: 100%;}  /* exam_wrap marginTop */
  .qz .quiz_content .quiz_area{height:calc(100% - 106px);} /* exam_wrap height + quiz_area marginTop */

  .qz_pagination {height: 66px;}
  .qz_pagination span {font-size: 52px; line-height: 1.2;}
  .qz .main_contents .wrap {height: calc(100vh - (45.283vh + 178px ));}
  .quiz_desc {margin: 80px auto 0;}
  .ko .quiz_desc p, .ko .quiz_desc > p > span,
  .quiz_desc p, .quiz_desc > p > span {font-size: 48px; font-weight: 500; line-height: 1.33; letter-spacing: -0.02px; }
  .qz .container.notepad_on .main_contents .quiz_desc p {padding-top: 61px;}

  /* 예제 */
  .quiz_content .exam_wrap .exam_btn{padding: 12px 30px 13px; height: 76px;}
  .quiz_content .exam_wrap .exam_btn i{width: 32px; height: 32px;}
  .quiz_content .exam_wrap .exam_btn span{margin-right: 15px; font-size: 39px; font-weight: 500; line-height: 1.31; letter-spacing: -0.01px;}
  /* .quiz_content .exam_wrap .exam_content {width: 1100px;} */
  .sub_page:not(.incorrect) .exam_content {width: 1100px;}
  .ko .quiz_content .exam_wrap .exam_btn span{font-size:39px;}

 /* 노트패드 버튼 여영ㄱ */
  .note_wrap .btn_wrap button span {font-size: 39px; font-weight: 500;}
  .note_wrap .btn_wrap button i {margin-right: 20px; width:64px; height:64px;}
  .note_wrap .btn_wrap .notepad_btn {padding: 14px 47px 14px 30px;}
  .note_wrap .btn_wrap.not_sure button {padding: 18px 44px 21px 30px;}
  .note_wrap .btn_wrap.not_sure button i {width: 48px; height: 48px;} 
  /* 키보드, 드로우 패드 */
  .input_tool .tool_wrap {height: 45.283vh;}
  .draw_tools .inner_wrap button:not(.btn_bubble_close){padding: 18px 40px;}
  .draw_tools .inner_wrap button:not(.btn_bubble_close) i {width: 64px; height: 64px;}
  .draw_tools .inner_wrap button:nth-child(n+2)::before {left: -1px; width: 2px; height: 20px;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap,
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap{height:184px;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn i {width: 64px; height: 64px;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn {padding: 60px 128px; width:320px; height:184px;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .keyborad_string {padding: 34px 120px 34px; height: 100%; width:320px; height:184px;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .keyborad_string span {height: auto; font-size: 40px; line-height: 1.2;}
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button {height:184px;}
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span {height: auto; font-size: 52px; letter-spacing: -0.02px;}
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button i{width:32px; height:32px;}
  .input_tool .input_tool_wrap {height: calc(100% - 185px);}
  .keyboard .key_type .key_type_inner .key_wrap .key i{width:64px; height:64px;}
  .keyboard .key_type .key_type_inner .key_wrap>li .more_key_wrap .key {height: 144px; width: 200px;}
  .keyboard .input_add_wrap {height: 500px;}
  .keyboard .input_add_wrap .wrap button i {width: 64px; height: 64px;}
  .notepade_tool.active{transform: translateY(120px);}
  .qz .container.notepad_on .note_wrap .btn_wrap.not_sure{bottom: 125px;}

  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on){height: calc(100vh - 177px);}
  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on) .multi_choice_board .multi_answer_list{max-height:550px;}

   /**** 노트패드 Switch ****/
   .notepad_btn{min-width:240px; height:76px;}
   .notepad_btn .notepad_switch:after{width:72px; height:72px; top: 2px; left:2px}
   .notepad_btn .notepad_switch > i{line-height:1.9; font-size:39px;}
   .notepad_btn .notepad_switch .on{padding-left:30px; padding-right:95px;}
   .notepad_btn .notepad_switch .off{padding-left:95px; padding-right:30px;}
   .notepad_btn.on .notepad_switch:after{left:calc(100% - 74px);}
}

@media (min-width:712px) and (orientation: landscape) {
  .note_wrap .btn_wrap button i {width: 32px; height: 32px;}
  /* .quiz_content .exam_wrap .exam_content {width: calc(54% - 65px);} */
  .sub_page:not(.incorrect) .exam_content {width: calc(54% - 65px);}
  
  /* 그리기 툴 -> common */
  .qz .container {display: flex;}
  .qz .main_contents{width:54%;}
  .quiz_desc {padding: 0 20px; max-width: inherit;}
  .quiz_desc p{font-size: 16px;}
  .quiz_content .exam_wrap {padding: 0 20px; max-width: inherit;}
  .drawpad .draw_tools .inner_wrap .tools_wrap.pad_tools{left:30px;}
  .drawpad .draw_tools .inner_wrap .tools_wrap.instrument{right:30px;}
  
  .note_wrap {position: fixed; left:0; bottom: 20px; padding:0 20px; width:54%;}  
  
  .qz .main_contents {width:54%; height:calc(100vh - 87px); /* 89 헤더 높이*/}
  .qz .main_contents .wrap {padding: 0;  height:100%;} 
  .qz .quiz_content .quiz_area .problem{margin:0;}
  
  /* 노트패드 on */
  .qz .container.notepad_on .quiz_desc{ margin: 30px auto 0;}
  .qz .container.notepad_on .main_contents {width: 100%;}
  .qz .container.notepad_on .main_contents .quiz_area {height: 100%;}
  .qz .container.notepad_on .input_tool {width: 0; height: 0;}
  .qz .container.notepad_on .quiz_content {height: calc(100% - 74px);}
  .qz .container.notepad_on .note_wrap {width: 100%;}
  .qz .container.notepad_on .quiz_content .quiz_area .problem{margin:0;}
  .qz .container.notepad_on .main_contents .quiz_area .problem {padding: 30px 40px 0;}
  .qz .container.notepad_on .main_contents .exam_wrap ~ .quiz_area .problem{padding:30px 40px 0;}

  /* toast pop : 문제풀이 */
  .qz .toast_pop{top:50%;}

  .input_tool{ position: relative; width:46%; height: calc(100vh - 87px);}
  .input_tool .tool_wrap {margin-top: 0; height: 100%;}  
  /* .input_tool .input_tool_wrap {height: calc(100% - 55px);} */
  .input_tool .input_tool_wrap {height: calc(100% - 87px);}
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button {padding: 17px 25px 16px; /* height:55px; */}
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span {margin-right: 10px; height: 22px; font-size: 16px;  line-height: 1.5;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn {padding: 16px 25px 15px 26px; width:75px; /* height:55px; */}  
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn i {width: 24px; height: 24px;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .keyborad_string {padding: 18px 28px; width:75px; /* height:55px; */}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .keyborad_string span {height: 19px; font-size:14px;}
  .keyboard .key_type .key_type_inner .key_num .key_wrap>li .key span {height: 21px; font-size: 18px; line-height: 1.44;}
  .keyboard .key_type .key_type_inner .key_oper .key_wrap>li .key span {height: 28px; font-size: 24px; line-height: 1.33;}   
  .keyboard .key_type .key_type_inner .key_wrap>li .more_key_wrap .key {width: 56px;}
  .keyboard .input_add_wrap {top:inherit; bottom: -55px; left: 0;  right: inherit; width: calc(100vw - 100%); height: 220px; }
  .keyboard .input_add_wrap.active {transform: translateY(0) translateX(-100%);}
  .keyboard .input_add_wrap .wrap button i {width: 24px; height: 24px;}
  /* 객관식 문제 */
  /* s: 2023.04.17 네이티브 웹뷰 대응 */
  .incorrect .container.multi_choice{flex-direction: row;} 
  .incorrect .container.multi_choice .main_contents{flex-grow:initial; overflow: visible;} 
  .incorrect .container.multi_choice .input_tool{position: relative;} 
  .incorrect .container.multi_choice .input_tool .multi_choice_board{height: 100%;}
  .incorrect .container.multi_choice .input_tool .multi_choice_board .multi_answer_list{max-height:none; margin-bottom:0} 
  .incorrect .container.multi_choice .input_tool .tool_wrap{height: 100%;}
  /* e */
  .container.multi_choice .input_tool .multi_choice_board .wrap {padding: 0 20px; height:100%;}
  /* .container.multi_choice .input_tool .multi_choice_board .wrap .multi_answer_list_wrap {height: calc(100% - 108px);} */
  .container.multi_choice .input_tool .multi_choice_board .wrap .multi_answer_list_wrap {height: 100%; padding: 30px 0;}

  .container.multi_choice .input_tool .note_wrap::before {display: none;}
  .multi_choice_board .multi_answer_list {height: 100%;}

  /* 노트패트 스트로크 경고 메시지 */
  .tools_wrap.pad_tools .bubble_desc.bubble_warning{bottom:auto; top:calc(100% + 15px)}
  .tools_wrap.pad_tools .bubble_desc.bubble_warning::before{top:auto; bottom:100%; left:104px; transform: rotate(180deg); -webkit-transform: rotate(180deg);}

  .keyboard_type_test {top: -27px;}  

  .incorrect .main_contents {width: 100%; height: calc(100vh - 118px);}
  .incorrect_tag_list_wrap {width: 100%; padding: 0 20px;}
  .incorrect .tag_list_down_btn {right: 0;}
  .incorrect .quiz_desc {padding: 0 20px; }
  .incorrect .input_tool {position: relative; padding-left: 1px; width: 46%; height: calc(100vh - 118px);}
  .incorrect .main_contents {width: 100%; height: 100%;}
  .incorrect_check {width: 100%; padding: 0 20px;}  
  .incorrect .container.multi_choice .main_contents {width: 54%; }
  .incorrect .container.multi_choice .main_contents>.wrap {height: 100%;}
  .incorrect .container.multi_choice .input_tool {height: 100%; position: relative;}
  .incorrect .container.multi_choice .input_tool .tool_wrap {height: 100%;}
  .incorrect .container.multi_choice .input_tool .multi_choice_board .wrap .multi_answer_list_wrap {/* height: auto; */height:100%; padding:50px 0}
  .incorrect .container.multi_choice .input_tool .multi_choice_board .multi_answer_list {height: 280px;} 
} 

@media (min-width:1024px) and (orientation: landscape) {
  .qz_pagination{position: absolute; left:50%; transform:translateX(-50%); top:6px;}
  .change_hands{position: absolute; right: 50px; display: block;}
  .qz header .sub_title a i {padding-bottom: 0;}

  .qz .container {display: flex;}
  .qz .main_contents {width:54%; height:calc(100vh - 87px);}
  .qz .main_contents .wrap {height:100%;}  
  .quiz_desc {max-width: inherit; padding: 0 30px;}
  .quiz_desc p{font-size: 18px;}
  .input_tool {position: relative; padding-left:1px; width:46%; height: calc(100vh - 87px)}
  .note_wrap {position: fixed; left:0; bottom: 60px; padding: 0 30px; width:calc(54%);}
  .note_wrap .btn_wrap button i {width:32px; height:32px;}
  /* 버튼 중간 영역 */
  .note_wrap .btn_wrap.notepad_btn_wrap{left:30px; bottom:0;}
  .note_wrap .btn_wrap.not_sure{right:30px; bottom:0;}

  /* 예제  */
  .quiz_content {height: auto;}  
  .quiz_content .exam_wrap {margin: 0 auto; padding:0 30px; max-width: inherit; }
  /* .quiz_content .exam_wrap .exam_content {position: fixed; left: 30px; transform: translate(0, 10px); width: calc(54% - 65px);}
  .quiz_content .exam_wrap .exam_content .exam_content_inner {min-height: 220px; max-height: 60.732vh;} */
  .sub_page:not(.incorrect) .exam_content {position: fixed; left: 30px; transform: translate(0, 10px); width: calc(54% - 65px);}
  .sub_page:not(.incorrect) .exam_content .exam_content_inner {min-height: 220px; max-height: 60.732vh;}
 
  /* 노트패드 on */
  .qz .container.notepad_on{padding-top:32px;}
  .qz .container.notepad_on .main_contents {margin-bottom:0px; padding-bottom: 0px;  width:100%;}
  .qz .container.notepad_on .main_contents .wrap {max-width: inherit;}  
  .qz .container.notepad_on .main_contents .quiz_desc { margin:0; padding:0 20px; width: 100%; max-width: 54%;}
  .qz .container.notepad_on .main_contents .quiz_desc p{padding-top: 8px;}
  .qz .container.notepad_on .main_contents .quiz_desc .quiz_text{padding-top: 8px;}
  .qz .container.notepad_on .main_contents .quiz_desc .quiz_text > p{padding-top: 0}
  .qz .container.notepad_on .input_tool {width: 0; height: 0;}
  .qz .container.notepad_on .input_tool .note_wrap {width: 100%;}
    
  .input_tool .tool_wrap {margin-top: 0; height: 100%;} 
  .input_tool .input_tool_wrap {height:calc(100% - 92px); border-left: 1px solid #f3f3f3;}
  .multi_choice_board .note {padding-top: 40px; margin-bottom:0}
  .multi_choice_board .multi_answer_list {/* margin-top: 40px; */ /* height: calc(100% - 40px); */ height:100%;}
  .multi_choice_board .multi_answer_list li {padding:0}
  .multi_choice_board .multi_answer_list li + li{margin-top:50px}
  .container.multi_choice .input_tool .multi_choice_board .wrap {padding: 0px 40px; height:100%;}
  .container.multi_choice .input_tool .multi_choice_board .wrap .multi_answer_list_wrap{/* height: calc(100% - 108px); */ height:100%; padding:50px 0;}

  .input_tool .tools_controll {border-left: 1px solid #f3f3f3;}
  
  /* 그리기 툴 -> common */
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn {padding:0 29px; width: 90px; }
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn i {width: 32px; height:32px;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .keyborad_string {padding: 0 32px; width:90px;}  
  .input_tool .tools_controll .inner_wrap .tool_select_btnwrap .keyborad_string span {height: 27px; font-size: 20px;}

  .keyboard .key_type .key_type_inner {display: block;}
  /* 하단 버튼 라인*/
  .keyboard .key_type .key_type_inner .key_wrap>li.last_line_key button{border-bottom:none;}
  .keyboard .key_type .key_type_inner .key_wrap .key{border-bottom:1px solid #f3f3f3; border-top:none; }
  .keyboard .key_type.key_type_basic .key_type_inner .key_oper {display: flex; width: 100%; height:33.3333%;}
  .keyboard .key_type.key_type_basic .key_type_inner .key_oper .key_wrap{width:100%;}
  .keyboard .key_type.key_type_basic .key_type_inner .key_oper .key_wrap>li {width:25%; height: 100%;}
  .keyboard .key_type.key_type_basic .key_type_inner .key_oper .key_wrap>li:nth-child(1){order:0}
  .keyboard .key_type.key_type_basic .key_type_inner .key_oper .key_wrap>li:nth-child(2){order:1}
  .keyboard .key_type.key_type_basic .key_type_inner .key_oper .key_wrap>li:nth-child(3){order:4}
  .keyboard .key_type.key_type_basic .key_type_inner .key_oper .key_wrap>li:nth-child(4){order:2}
  .keyboard .key_type.key_type_basic .key_type_inner .key_oper .key_wrap>li:nth-child(5){order:7}
  .keyboard .key_type.key_type_basic .key_type_inner .key_oper .key_wrap>li:nth-child(6){order:3}
  .keyboard .key_type.key_type_basic .key_type_inner .key_oper .key_wrap>li:nth-child(7){order:6}
  .keyboard .key_type.key_type_basic .key_type_inner .key_oper .key_wrap>li:nth-child(8){order:5}
  .keyboard .key_type.key_type_basic .key_type_inner .key_num {width: 100%; height:66.6666%;}
  .keyboard .key_type .key_type_inner .key_num .key_wrap>li .key span {height: 33px; font-size: 28px;  line-height: 0.93;}
  .keyboard .key_type .key_type_inner .key_oper .key_wrap>li .key span {height: 33px; font-size: 28px; line-height: 0.93;}
  
  /* 키보드 키 */
  .keyboard .key_type.key_type_compound .key_type_inner .key_oper{width:100%; height:42.8572%}
  .keyboard .key_type.key_type_compound .key_type_inner .key_oper .key_wrap>li {width: 25%; height:33.3333%;}
  /* 키 순서 변경 */
  .keyboard .key_type.key_type_compound .key_type_inner .key_oper .key_wrap>li:nth-child(1){order:0}
  .keyboard .key_type.key_type_compound .key_type_inner .key_oper .key_wrap>li:nth-child(2){order:1}
  .keyboard .key_type.key_type_compound .key_type_inner .key_oper .key_wrap>li:nth-child(3){order:2}
  .keyboard .key_type.key_type_compound .key_type_inner .key_oper .key_wrap>li:nth-child(4){order:4} 
  .keyboard .key_type.key_type_compound .key_type_inner .key_oper .key_wrap>li:nth-child(5){order:5}
  .keyboard .key_type.key_type_compound .key_type_inner .key_oper .key_wrap>li:nth-child(6){order:6}
  .keyboard .key_type.key_type_compound .key_type_inner .key_oper .key_wrap>li:nth-child(7){order:3}
  .keyboard .key_type.key_type_compound .key_type_inner .key_oper .key_wrap>li:nth-child(8){order:7}
  .keyboard .key_type.key_type_compound .key_type_inner .key_oper .key_wrap>li:nth-child(9){order:8}
  .keyboard .key_type.key_type_compound .key_type_inner .key_oper .key_wrap>li:nth-child(10){order:9}
  .keyboard .key_type.key_type_compound .key_type_inner .key_oper .key_wrap>li:nth-child(11){order:10}
  .keyboard .key_type.key_type_compound .key_type_inner .key_oper .key_wrap>li:nth-child(12){order:11} 
  .keyboard .key_type.key_type_compound .key_type_inner .key_num{width: 100%; height:57.1428%}
  .keyboard .key_type .key_type_inner .key_wrap>li .more_key_wrap .key {width: 132px;}
  .keyboard .key_type .key_type_inner .key_wrap>li .more_key + .more_key_wrap{top:inherit; bottom: calc(100% - 1px); left: inherit; right:1px;  }
  .keyboard .key_type .key_type_inner .key_wrap>li .more_key.arrow_bracket + .more_key_wrap{bottom:inherit; top: calc(100% - 1px); }
  .keyboard .key_type .key_type_inner .key_wrap>li .more_key.key_num_dot + .more_key_wrap{left:0; right:inherit; }
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button {padding:0 32px; }
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span {height:27px; font-size: 20px; line-height: 1.3;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .keyborad_string span {height: auto; font-size: 20px;}

  .keyboard .key_type.key_type_string .key_type_inner .key_wrap>li .more_key + .more_key_wrap{left: 0; right:inherit;}
  .keyboard .key_type.key_type_string .key_type_inner .key_wrap>li .more_key.first_line_more + .more_key_wrap{top:calc(100% - 1px); bottom:inherit; left: 0; right:inherit;  }
  .keyboard .key_type.key_type_string .key_type_inner .key_wrap>li .more_key.more_key_right + .more_key_wrap{left:inherit; right:1px;  }
  .keyboard .key_type.key_type_number .key_type_inner .key_num {height: 100%;}

  /* 키보드 추가 보기 */
  .keyboard .input_add_wrap {top:inherit; bottom:-92px; left: 0; right: inherit; width: calc(100vw - 100%); height: 440px;}
  .keyboard .input_add_wrap.active {transform: translateX(-100%);}
  .keyboard .input_add_wrap .wrap button i {width:40px; height:40px;}
  .keyboard .input_add_wrap .input_add_area {padding: 40px 50px 50px; }
  .keyboard .input_add_wrap .input_add_close {top: 40px; left: 50px;}
  .keyboard .input_add_wrap .input_add_order {top: 40px; right: 50px;}
  .keyboard .input_add_wrap .input_add_back {bottom: 50px; left: 50px;}
  .keyboard .input_add_wrap .input_add_check {bottom: 50px; right: 50px;} 

  /* 좌우 변경 컨텐츠 변경 */
  .qz.change_hands_on .container {flex-direction: row-reverse;}
  .qz.change_hands_on .quiz_content .exam_wrap .exam_content {left: inherit; right:50px;}
  .qz.change_hands_on .keyboard .input_add_wrap { left: inherit; right: 0;}
  .qz.change_hands_on .keyboard .input_add_wrap.active {transform: translateX(100%);}
  .qz.change_hands_on .note_wrap {left: inherit; right:0;}
  .qz.change_hands_on .input_tool .input_tool_wrap {border-right: 1px solid #f3f3f3;}
  .qz.change_hands_on .input_tool .tools_controll {border-right: 1px solid #f3f3f3;}

  /* 오답노트 */
  .incorrect_list {margin-top: 14px;}
  .incorrect .container.multi_choice .input_tool {position: relative;}
  .incorrect .container.multi_choice .main_contents{width: 54%;}
  .incorrect .container.multi_choice .main_contents>.wrap {height: 100%;}
  .incorrect .container.multi_choice .input_tool {height: 100%;}
  .incorrect .container.multi_choice .input_tool .tool_wrap {height: 100%;}
  .incorrect .container.multi_choice .input_tool .multi_choice_board .multi_answer_list {height: 100%; margin-top:0}  
  .incorrect .container.multi_choice .input_tool .multi_choice_board .wrap .multi_answer_list_wrap {height:100%;}
  .incorrect .container.multi_choice .tag_list_down_btn {padding: 14px 30px 14px 34px; right: 0;}
  .incorrect .container.multi_choice .incorrect_tag_list li:last-child {margin-right: 24px;}
  .incorrect .container {height: calc(100vh - 127px);}
  .incorrect .main_contents{ width: 100%; height:100%;}
  .incorrect_tag_list_wrap {margin: 45px auto 0; width: 100%; padding: 0 50px;}
  .incorrect .quiz_desc {padding:0 50px; width: 100%;}
  .incorrect .tag_list_down_btn {right: 50px;}
  .incorrect_check {width: 100%; padding: 0 50px;}
  /* .incorrect_check .exam_content {transform: translateY(10px) translateX(0);  width: 537px; max-height: 417px!important;} */
  .incorrect .exam_content {transform: translateY(10px) translateX(0); width:calc(54% - 70px); max-height: 417px!important;}
}

@media (min-width: 1336px) and (orientation: landscape){
  .main_contents.notepad_on { width: 100%; height: calc(100vh - 250px); }
  .main_contents.notepad_on + .input_tool .note_wrap { bottom:100px;}
  .qz .quiz_content .quiz_area{height: calc(100% - 70px);}
  /* quiz_progress */
  .quiz_progress{font-size:.65rem;}
}

@media (max-height:768px) and (orientation: landscape) {
  .main_contents.notepad_on {width:100%; height: calc(100vh - 142px);}

  /* .quiz_content .exam_wrap .exam_content .exam_content_inner {max-height: 52.732vh;} */
  .sub_page:not(.incorrect) .exam_content .exam_content_inner {max-height: 52.732vh;}
  .main_contents.notepad_on + .input_tool .note_wrap { bottom:35px;}

  /* .incorrect_check .exam_content { max-height: 360px!important;} */
  .incorrect .exam_content { max-height: 360px!important;}

  .keyboard .key_type.key_type_string .key_type_inner .key_wrap>li .more_key + .more_key_wrap{left: 0; right:inherit;}
  .keyboard .key_type.key_type_string .key_type_inner .key_wrap>li .more_key.first_line_more + .more_key_wrap{top:calc(100% - 1px); bottom:inherit; left: 0; right:inherit;  }
  .keyboard .key_type.key_type_string .key_type_inner .key_wrap>li .more_key.more_key_right + .more_key_wrap{left:inherit; right:1px;  }
  .keyboard .key_type .key_type_inner .key_wrap>li .more_key_wrap .key {width: 80px; height: 64px;} 
}

@media (min-width:1280px) and (orientation: landscape) {
  /* 2023.03.03 문제영역 높이 이슈 */
  .qz .quiz_content .quiz_content_inner {height: 100%;}  /* exam_wrap marginTop */
  .qz .quiz_content .quiz_area{height:calc(100% - 70px);} /* exam_wrap height + quiz_area marginTop */

  .qz_pagination span {font-size: 26px;}
  .quiz_desc p, .quiz_desc .q_numbers,
  .quiz_desc > p > span {font-size: 24px; font-weight: 500; line-height: 1.33; letter-spacing: -0.01px;}
  .quiz_content .exam_wrap .exam_btn {height: 40px}
  .quiz_content .exam_wrap .exam_btn span{font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01px;}
  .note_wrap .btn_wrap button span {font-size: 20px; font-weight: 500; line-height: 1.3;letter-spacing: -0.01px;}
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span {font-size: 26px; font-weight: bold;  letter-spacing: -0.01px; line-height: 1;}  
  .level_badge{font-size:18px; border-radius: 18px;}

  /**** 노트패드 Switch ****/
  .notepad_btn{height:40px;}
  .notepad_btn .notepad_switch:after{width:36px; height:36px; top: 2px; left:2px}
  .notepad_btn .notepad_switch > i{line-height:2; font-size:20px;}
  .notepad_btn .notepad_switch .on{padding-left:15px; padding-right:45px;}
  .notepad_btn .notepad_switch .off{padding-left:45px; padding-right:15px;}
  .notepad_btn.on .notepad_switch:after{left:calc(100% - 38px);}

  .ko .qz_pagination span {font-size: 26px; font-weight: 500; letter-spacing: -0.01px; }
  .ko .qz_pagination .current_page {font-weight: bold;}
  .ko .quiz_desc p, .ko .quiz_desc > p > span {font-size: 26px; font-weight: 500; letter-spacing: -0.01px;}
  .ko .quiz_content .exam_wrap .exam_btn span{font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01px;}
  .ko .note_wrap .btn_wrap button span { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01px;}
  .ko .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span {font-size: 26px; font-weight: bold; letter-spacing: -0.01px; line-height: 1;}
}

@media (min-width:2650px) and (orientation: landscape) {
  .qz header {padding: 52px 0 0px;}
  .qz header .header_wrap {height: auto}

  .qz_pagination span {font-size: 52px; line-height: 1.2;}
  .qz .main_contents {height: calc(100vh - 176px);}
  /* .qz .main_contents .wrap {height: calc(100vh - (45.283vh + 176px ));} */

  /* 2023.03.03 문제영역 높이 이슈 */
  .qz .quiz_content .quiz_content_inner {height: 100%;}  /* exam_wrap marginTop */
  .qz .quiz_content .quiz_area{height:calc(100% - 106px);} /* exam_wrap height + quiz_area marginTop */

  .quiz_desc {margin: 66px auto 0;}
  .ko .quiz_desc p, .ko .quiz_desc > p > span,
  .quiz_desc p, .quiz_desc > p > span {font-size: 48px; font-weight: 500; line-height: 1.33; letter-spacing: -0.02px; }
  .qz .container.notepad_on .main_contents .quiz_desc p {padding-top: 33px;}
  .quiz_content .exam_wrap .exam_btn{padding: 12px 30px 13px; height:76px;}
  .quiz_content .exam_wrap .exam_btn i{width: 32px; height: 32px;}
  .quiz_content .exam_wrap .exam_btn span{margin-right: 15px; font-size: 39px; font-weight: 500; line-height: 1.31; letter-spacing: -0.01px;}
  /* .quiz_content .exam_wrap .exam_content {width: 1100px;} */
  .sub_page:not(.incorrect) .exam_content {width: 1100px;}
  .ko .quiz_content .exam_wrap .exam_btn span{font-size: 39px;}

  .note_wrap .btn_wrap button span {font-size: 39px; font-weight: 500;}
  .note_wrap .btn_wrap button i {margin-right: 20px; width:64px; height:64px;}
  .note_wrap .btn_wrap .notepad_btn {padding: 14px 47px 14px 30px;}
  .note_wrap .btn_wrap.not_sure button {padding: 18px 44px 21px 30px;}
  .note_wrap .btn_wrap.not_sure button i {width: 48px; height: 48px;} 
  .input_tool {height: calc(100vh - 176px);}
  .input_tool .tool_wrap {height: 100%;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap,
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap{height:184px;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn i {width: 64px; height: 64px;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .tool_select_btn {padding: 60px 128px; width:320px; height: 184px;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .keyborad_string {padding: 34px 120px 34px; height: 100%; width:320px; height: 184px;}
  .input_tool .tools_controll .inner_wrap .tool_select_btn_wrap .keyborad_string span {height: auto; font-size: 40px; line-height: 1.2;}
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button{height:184px;}
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button span {height: auto; font-size: 52px; letter-spacing: -0.02px;}
  .input_tool .tools_controll .inner_wrap .tool_check_btn_wrap button i{width:32px; height:32px;}
  .input_tool .input_tool_wrap {height: calc(100% - 185px);}
  .keyboard .key_type .key_type_inner .key_wrap .key i{width:64px; height:64px;}
  .keyboard .key_type .key_type_inner .key_wrap>li .more_key_wrap .key {height: 144px; width: 200px;}
  .keyboard .input_add_wrap { bottom: -184px; height: 600px;}
  .keyboard .input_add_wrap .wrap button i {width: 64px; height: 64px;}
  .change_hands button {padding:12px 48px 12px 30px;}
  .change_hands button i{width:40px; height:40px;}
  .change_hands button span {height: auto; font-size: 32px; font-weight: bold; line-height: 1;  letter-spacing: -0.01px;} 
  .notepade_tool.active{transform: translateY(120px);}
  .qz .container.notepad_on .note_wrap .btn_wrap.not_sure{bottom: 125px;}

  /**** 노트패드 Switch ****/
  .notepad_btn{min-width:240px; height:76px;}
  .notepad_btn .notepad_switch:after{width:72px; height:72px; top: 2px; left:2px}
  .notepad_btn .notepad_switch > i{line-height:1.9; font-size:39px;}
  .notepad_btn .notepad_switch .on{padding-left:30px; padding-right:95px;}
  .notepad_btn .notepad_switch .off{padding-left:95px; padding-right:30px;}
  .notepad_btn.on .notepad_switch:after{left:calc(100% - 74px);}
}

/* 문제풀이 화면 : header 없을 경우 */
.none_header.qz .main_contents > .wrap{height: calc(100vh - 373px);}

@media (min-width:600px) { 
  .none_header.qz .main_contents > .wrap{height: calc(100vh - 500px);}
}

@media (min-width:600px) and (orientation: portrait) { 
  .none_header.qz:not(.incorrect) .container.multi_choice:not(.notepad_on){height: 100vh;}
  .qz:not(.incorrect) .container.multi_choice:not(.notepad_on) .multi_choice_board .wrap{padding-top:50px; padding-bottom:50px;}
}

@media (min-width:712px) and (orientation: landscape) {
  .none_header.qz .container{height:100vh;}
  .none_header.qz .main_contents,
  .none_header.qz.dt_diag .main_contents{height: 100%;}
  .none_header.qz .main_contents > .wrap{height: 100%;}
  .none_header.qz .input_tool,
  .none_header.qz.dt_diag .input_tool{height: 100%;}
}

@media (orientation: portrait) { 
  .none_header.qz:not(.incorrect) .container.multi_choice:not(.notepad_on){height: 100vh;}
}
