.popup_view
{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:1001;
	display:block;
	visibility:hidden;
}
.popup_view .popup_box
{
	position:relative;
	/* left:0px;
	top:0px; */
	left:50%;
	top:50%;
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);

	width:870px;
	height:auto;
	/* margin:0 auto; */
	border:2px solid #a4b2be;
	background-color:#fff;
	border-radius:15px;
	-webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.35);
	-moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.35);
	box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.35);
	z-index:999;
	overflow:hidden;
	box-sizing: border-box;
}
.popup_view .popup_box .popup_header
{
	position:relative;
	display:block;
	background:#efeded;
	z-index:2;
	text-align:center;
	padding:29px 0;
}

.popup_view .popup_box .popup_header .popup_title{color:#4d6d8f; font-size:35px; font-weight:bold; text-align:center; display:inline-block; line-height: 42px}
.popup_view .popup_box .popup_header .popup_close_btn{position:absolute; top:10px; right:10px; width:36px; height:36px; background:url(../images/popup/popup_close_btn.png) no-repeat; cursor:pointer;}
.popup_view .popup_box .popup_content{position:relative; z-index:1;}
.popup_view .popup_box .popup_content .popup_text_box{font-size:26px; line-height:40px; color:#3a3a3a; padding:30px;}
.popup_view .popup_box .popup_content .video_play_box{background:url(../images/popup/popup_play_btn.png) center center no-repeat;}

/* 추가 =============== */
/* paging */
.popup_view .popup_box .popup_content .prev_next_paging_box .prev_next_paging_item_box {display: none;}
.popup_view .popup_box .popup_content .prev_next_paging_box .prev_next_paging_item_box:first-child {display: block;}
.popup_view .popup_box .popup_content .prev_next_paging_box .prev_next_paging_ui_box {text-align: center; background-color: #f4f2f2; margin-top: -5px; padding: 10px 0px;}
.popup_view .popup_box .popup_content .prev_next_paging_box .prev_next_paging_ui_box>div {display: inline-block; vertical-align: top;}
.popup_view .popup_box .popup_content .prev_next_paging_box .prev_next_paging_ui_box .prev_paging_btn {background: url(../../common/images/popup/pn_prev_btn.png) no-repeat; width: 51px; height: 52px; cursor: pointer}
.prev_next_paging_ui_box .next_paging_btn {background: url(../../common/images/popup/pn_next_btn.png) no-repeat; width: 51px; height: 52px; cursor: pointer}
.prev_next_paging_box .prev_next_paging_ui_box .cur_txt_box {font-size: 42px; font-weight: bold; color: #7a97b6}
.prev_next_paging_box .prev_next_paging_ui_box .cur_txt_box .cur_num {color: #446c96; margin-right: 5px;}
.prev_next_paging_box .prev_next_paging_ui_box .cur_txt_box .max_num {margin-left: 5px;}

/*보기*/
.popup_view .popup_box .popup_content .quiz_example_box {margin: 20px; margin-bottom: 0px; border-radius: 15px; border: 1px solid #d2d1d1;}
.popup_view .popup_box .popup_content .quiz_example_box .quiz_example-title {display: inline-block; vertical-align: top; color: transparent; background: url(../../common/images/popup/example_txt.png) no-repeat; width: 85px; height: 86px; border-top-left-radius:15px}
.popup_view .popup_box .popup_content .quiz_example_box .quiz_example-title.type2 {background: url(../../common/images/popup/example_txt_2.png) no-repeat; background-color: #ffffff;}
.popup_view .popup_box .popup_content .quiz_example_box .quiz_example-obj {display: inline-block; width: 733px; padding: 24px 0; text-align: center;}
.popup_view .popup_box .popup_content .quiz_example_box .quiz_example-obj .drag-obj, .popup_view .popup_box .popup_content .quiz_example_box .quiz_example-obj .click-obj {display: inline-block; margin-right: 64px; cursor: pointer; vertical-align: middle;}
.popup_view .popup_box .popup_content .quiz_example_box .quiz_example-obj .view-obj {display: inline-block; margin-right: 64px;}
.popup_view .popup_box .popup_content .quiz_example_box .quiz_example-obj .drag-obj:last-child {margin-right: 0;}
.popup_view .popup_box .popup_content .quiz_example_box .quiz_example-obj .view-obj:last-child {margin-right: 0;}
.popup_view .popup_box .popup_content .quiz_example_box .quiz_example-obj.type2 .drag-obj, .popup_view .popup_box .popup_content .quiz_example_box .quiz_example-obj.type2 .view-obj{position: absolute;}
.popup_view .popup_box .popup_content .quiz_example_box .quiz_example-obj.type2 .drag-obj-create-box {position: absolute;}
.popup_view .popup_box .popup_content .quiz_example_box .quiz_example-obj .drag-obj-create-box {cursor: pointer;}
.popup_view .popup_box .popup_content .quiz_example_box .quiz_example-obj .drag-obj-create-box .drag-obj {opacity: 0;}
.draw_example_box {display: block}

.popup_view .popup_box .popup_content .active-box .click-active-obj {position:absolute; cursor: pointer; }
.popup_view .popup_box .popup_content .active-box .drop-active-obj {position:absolute;}
.popup_view .popup_box .popup_content .active-box.type1 .drag-obj {position:absolute;}
.popup_view .popup_box .popup_content .active-box.type2 .drag-obj {display: inline-block;}

.popup_view .popup_box .popup_content .change-box.type2 {position: absolute; top: 0; left: 0;}
.popup_view .popup_box .popup_content .change-box.type2 img {position: absolute;}

.popup_view .popup_box .popup_content .change-box .ans-show {display: none; position: absolute;}
.popup_view .popup_box .popup_content .change-box.type2 .num {text-align:center; font-size: 90px; font-weight: bold; color:#e51100;}
.popup_view .popup_box .popup_content .num-box {text-align:center; font-size: 70px; font-weight: bold; color:#e51100;}
.popup_view .popup_box .popup_content .num-count-box div{display: none; position: absolute; text-align:center; font-size: 70px; font-weight: bold; background-color: #fff;}

.popup_view .popup_box .popup_content .view-box {position: absolute;}
.popup_view .popup_box .popup_content .view-box .view-obj {display: inline-block}

.ans-show .ans-show-obj {position: absolute; font-size: 75px;
font-weight: bold; display: none;}
.ans-show .ans-show-obj.type2 {display: block; background-color: #fff; text-align: center;}
.ans-show .ans-show-obj.on {border:solid 3px red; box-sizing:border-box; border-radius:10px;}

.save-btn {
    width: 100%;
    padding: 15px 0;
}
.save-btn div{
    width: 305px;
    background: url(../images/popup/ans-check-btn.png) center center no-repeat;
    height: 93px;
    cursor: pointer;
    margin: 0 auto;
    cursor: pointer;
}
.save-btn.type1 {background-color: #f2fafe; margin-top: -5px;}

.btn-wrap {width: 100%; text-align: center; padding-bottom: 15px;}
.btn-wrap div {
    display: inline-block;
}
.btn-wrap .ans-show-btn {
    background: url(../images/popup/ans-preveal-btn.png) center center no-repeat;
    width: 319px;
    height: 93px;
    cursor: pointer;
}

/* 클릭 - 시계 */
.clock-box div{position: absolute;}
.clock-box .center-dot {width: 20px; height: 20px;
border-radius: 10px; background-color: #231f20;}
.clock-box .hour, .clock-box .minute{
    transform-origin: bottom center 0;
    transition: all ease 1s;
}

/* ox 선택활동 */
.popup_view .popup_box .popup_content .choice-ox-box {text-align: center;}
.popup_view .popup_box .popup_content .choice-ox-box .click-active-obj img {opacity: 0;}
.popup_view .popup_box .popup_content .choice-ox-box .click-active-obj.active {
    border:5px solid red;
    border-radius:19px;
    margin-top: -5px;
    margin-left: -5px;
}

.popup_view .popup_box .popup_content .click-active-obj.activeMul {
    box-shadow: 0px 0px 0px 9px red inset;
    border-radius:8px;
}
.popup_view .popup_box .popup_content .click-active-obj.circle {
    background: url(../images/popup/circle.png) center center no-repeat;
}
.popup_view .popup_box .popup_content .top-cover-box {
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

/* 드래그 활동 */
.popup_view .popup_box .popup_content .change-active-box>.drop-active-obj {display: none;}
.popup_view .popup_box .popup_content .change-active-box>.drop-active-obj:first-child {display: block;}

/* 드래그 배치 */
.popup_view .popup_box .popup_content .drop-box {position: relative;}
.popup_view .popup_box .popup_content .drop-box .drop-obj {position: absolute; display: none;}

/* 드래그 type5  */
.popup_view .popup_box .popup_content .active-box .drop-active-obj.type5 > div{position: absolute; top: 0; left: 0;}
.popup_view .popup_box .popup_content .active-box .change-img-box img {position: absolute;top: 0; left: 0; display: none;}

/* 선긋기 활동 */
.popup_view .popup_box .popup_content .active-box.drag-line-active {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.popup_view .popup_box .popup_content .active-box.drag-line-active .drag-obj, .popup_view .popup_box .popup_content .active-box.drag-line-active .drop-obj {position: absolute; z-index: 1; width:35px; height:35px; background: url(../images/popup/drag-line-obj.png) center center no-repeat}
.popup_view .popup_box .popup_content .active-box.drag-line-active .drag-obj, .popup_view .popup_box .popup_content .active-box.drag-line-active .drop-obj{cursor: pointer;}
.popup_view .popup_box .popup_content .active-box.drag-line-active canvas{position: absolute; left: 0; top: 0;}
.btn-box {position: absolute; bottom: 50px; width: 100%; text-align: center;}
.ans-check-btn {background:url(../images/popup/ans-check-btn.png) center center no-repeat; width: 305px; height: 93px; display: inline-block; margin-right: 10px; cursor: pointer;}
.ans-preveal-btn{background:url(../images/popup/ans-preveal-btn.png) center center no-repeat; width: 319px; height: 93px; display: inline-block; cursor: pointer;}

/* 길이 재기 활동 */
.popup_view .popup_box .popup_content .drag-area {position: absolute;}
.popup_view .popup_box .popup_content .drag-area .drag-obj {cursor: pointer;}
.popup_view .popup_box .popup_content .length-num-box {position: absolute; text-align:center; font-size: 75px; font-weight: bold; color:#000;}

/* 클릭 카운트 */
.popup_view .popup_box .popup_content .change-box.count-box div {position: absolute; text-align: center;}
.popup_view .popup_box .popup_content .change-box.count-box .type1 {font-size: 59px; font-weight: 800;}

/* 얼럿창 */
.quiz-alert-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: none; opacity: 0; z-index: 1000}
.quiz-alert-box .quiz-alert-img-box {position: absolute; top: 50%; left: 50%; margin-top: -142.5px; margin-left: -307px; width: 614px; height: 285px;}
.quiz-alert-box .incorrect {background-image: url(../images/popup/feedback_answer_incorrect.png)}
.quiz-alert-box .correct {background-image: url(../images/popup/feedback_answer_correct.png)}
.quiz-alert-box .again {background-image: url(../images/popup/feedback_answer_again_check.png)}
.quiz-alert-box .checkAns {background-image: url(../images/popup/feedback_answer_check.png)}
/* =============== 추가*/

/* 팝업 버튼 */
.view-pic-btn {cursor:pointer; position:absolute; top:0px; left:0px; width:184px; height:52px; background:url(../images/btns/view_pic_btn.png) center center no-repeat; z-index:10;}
.click-change-btn {cursor:pointer; position:absolute; top:0px; left:0px; width:184px; height:52px; background:url(../images/btns/click_activity_btn_2.png) center center no-repeat; z-index:10;}
.click-ans-btn {cursor:pointer; position:absolute; top:0px; left:0px; width:184px; height:52px; background:url(../images/btns/click_activity_btn.png) center center no-repeat; z-index:10;}
.calculation-btn {cursor:pointer; position:absolute; top:0px; left:0px; width:204px; height:52px; background:url(../images/btns/calculation_activity_btn.png) center center no-repeat; z-index:10;}
.keypad-btn {cursor:pointer; position:absolute; top:0px; left:0px; width:231px; height:52px; background:url(../images/btns/keypad_btn.png) center center no-repeat; z-index:10;}
.drag-drop-btn {cursor:pointer; position:absolute; top:0px; left:0px; width:184px; height:52px; background:url(../images/btns/drag_drop_activity_btn.png) center center no-repeat; z-index:10;}
.draw-btn {cursor:pointer; position:absolute; top:0px; left:0px; width:184px; height:52px; background:url(../images/btns/draw_activity_btn.png) center center no-repeat; z-index:10;}
.write-btn {cursor:pointer; position:absolute; top:0px; left:0px; width:184px; height:52px; background:url(../images/btns/write_btn.png) center center no-repeat; z-index:10;}
.draw-line-btn {cursor:pointer; position:absolute; top:0px; left:0px; width:184px; height:52px; background:url(../images/btns/draw_line_activity_btn.png) center center no-repeat; z-index:10;}
.video_show_badge_btn {cursor:pointer; position:absolute; top:0px; left:0px; width:184px; height:52px; background:url(../images/btns/video_show_badge_btn.png) center center no-repeat; z-index:10;}
.active-ready-btn {cursor:pointer; position:absolute; top:0px; left:0px; width:184px; height:52px; background:url(../images/btns/active_ready_btn.png) center center no-repeat; z-index:10;}
.move-btn {cursor:pointer; position:absolute; top:0px; left:0px; width:204px; height:52px; background:url(../images/btns/move_btn.png) center center no-repeat; z-index:10;}
.game-btn {cursor:pointer; position:absolute; top:0px; left:0px; width:184px; height:52px; background:url(../images/btns/game_activity_btn.png) center center no-repeat; z-index:10;}


#calculator-pop
{
	position: absolute;
	left: 0px;
	top:0px;
	width: 612px;
	height: 746px;
	z-index: 1000000;
	display: none;
	background: url(../images/popup/calculator_bg.png) no-repeat;
}
.calculator-cont {
	position: relative;
	width: 100%;
	height: 500px;
	
}
.calculator-cont>div {
	position: absolute;
	cursor: pointer;
	border-radius: 26px;
	opacity: 0.5;
}
.calculator-cont .calculator-view-mod {
	width: 418px; 
	top: 62px; 
	left: 91px; 
	border-radius:0; 
	padding: 20px 10px; 
	font-size: 28px; 
	font-weight: bold; 
	cursor: default;
	text-align: right;
	overflow: hidden;
	opacity: 1;
}
.calculator-cont .calculator-view {
	width: 418px; 
	top: 104px; 
	left: 91px; 
	border-radius:0; 
	padding: 20px 10px; 
	font-size: 50px; 
	font-weight: bold; 
	cursor: default;
	text-align: right;
	overflow: hidden;
	opacity: 1;
}
.calculator-cont #c_on {width: 87px; height: 239px; top: 267px; left: 26px;}
.calculator-cont #c_on.on {background: url(../images/popup/calculator_bg_on.png) center no-repeat; opacity: 1;}
.calculator-cont #c_reset {width: 87px; height: 133px; top: 517px; left: 26px;}
.calculator-cont #c_0 {width: 224px; height: 84px; top: 569px; left: 129px;}
.calculator-cont #c_1 {width: 102px; height: 84px; top: 469px; left: 131px;}
.calculator-cont #c_2 {width: 102px; height: 84px; top: 469px; left: 250px;}
.calculator-cont #c_3 {width: 102px; height: 84px; top: 469px; left: 369px;}
.calculator-cont #c_4 {width: 102px; height: 84px; top: 367px; left: 131px;}
.calculator-cont #c_5 {width: 102px; height: 84px; top: 367px; left: 250px;}
.calculator-cont #c_6 {width: 102px; height: 84px; top: 367px; left: 369px;}
.calculator-cont #c_7 {width: 102px; height: 84px; top: 267px; left: 131px;}
.calculator-cont #c_8 {width: 102px; height: 84px; top: 267px; left: 250px;}
.calculator-cont #c_9 {width: 102px; height: 84px; top: 267px; left: 369px;}
.calculator-cont #c_mul {width: 102px; height: 84px; top: 267px; left: 489px;}
.calculator-cont #c_div {width: 102px; height: 84px; top: 367px; left: 489px;}
.calculator-cont #c_add {width: 102px; height: 84px; top: 469px; left: 489px;}
.calculator-cont #c_min {width: 102px; height: 84px; top: 569px; left: 489px;}
.calculator-cont #c_equ {width: 102px; height: 84px; top: 569px; left: 369px;}


#ruler-pop
{
	position: absolute;
	left: 0px;
	top:0px;
	width: 810px;
	height: 85px;
	z-index: 1000000;
	display: none;
	background: url(../images/popup/ruler.png) no-repeat;
}

.s_reader
{
	display: inline-block;
}

/*
*:focus
{
	background: red;
}
*/

.video_play_box
{
	position:absolute;
	left:0px;
	top:0px;

}

.number-txt {font-weight: bold; font-size: 60px; position: absolute; text-align: center;}

/* 그리기 기능 */
.write_grid_bg{background-color:#ffffff;}
.write_grid_bg_2{background-color:#fee4cb}

.sketch_draw_center{text-align:center;}
.sketch_draw_box{position:relative; display:block; z-index:999;}
.sketch_draw_box.write_grid_ori{display:inline-block; margin-top:20px;}
.sketch_draw_box.write_grid{/* display:inline-block; */ text-align:center; margin-top:20px;}
.sketch_draw_box.write_grid_2{display:inline-block; margin-top:20px; margin-left:25px; margin-right:25px;}
.sketch_draw_box.write_grid_3{display:inline-block; margin-top:100px; margin-bottom:90px; margin-left:6px; margin-right:6px;}

.sketch_draw_box canvas{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.sketch_draw_box img{display:block; margin:0 auto;}
.sketch_save_btn{position:relative; width:485px; height:93px; margin:0 auto; padding-top:15px; padding-bottom:10px; background:url(../images/sketch/save_btn.png) center center no-repeat; cursor:pointer; z-index:999}
.sketch_save_btn.type2{margin-top:-120px;}
.sketch_view_box{position:absolute; top:0px; left:0px; width:90px; height:90px;}
.sketch_view_box img{display:block; width:100%; height:100%; text-indent: -999px;}

/*.sketch_box{text-align:center;}*/
.sketch_ui_box{position:relative; padding-top:5px; padding-bottom:5px; text-align:center; border-top:1px solid #dedcdb; border-bottom:1px solid #dedcdb; background-color:#fff}

/* 그리기 굵기 UI */
.sketch_ui_stroke_width_box{display:inline-block; vertical-align:top; width:274px; height:57px; background:url(../images/sketch/ui_stroke_width_bg.png) no-repeat; text-align:left; padding-top:5px; padding-left:120px; box-sizing:border-box;}
.sketch_ui_stroke_width_box .sketch_ui_size_btn{display:inline-block; vertical-align:middle; padding-top:17px; padding-bottom:17px;}
.sketch_ui_stroke_width_box .sketch_ui_size_btn .shape{width:31px; height:1px; background-color:black;}
.sketch_ui_stroke_width_box .sketch_ui_size_btn[data-size='1'] .shape{height:1px;}
.sketch_ui_stroke_width_box .sketch_ui_size_btn[data-size='2'] .shape{height:4px;}
.sketch_ui_stroke_width_box .sketch_ui_size_btn[data-size='3'] .shape{height:9px;}
.sketch_ui_stroke_width_box .sketch_ui_size_btn[data-size='4'] .shape{height:13px;}

/* 그리기 색상 UI */
.sketch_fill_box .sketch_ui_stroke_color_box{display:inline-block; vertical-align:top; width:639px; height:57px; background:url(../images/sketch/ui_stroke_color_bg_2.png) no-repeat; text-align:left; padding-top:10px; padding-left:127px; box-sizing:border-box;}
.sketch_fill_box .sketch_ui_stroke_color_box .sketch_ui_color_btn .shape{width:71px; height:31px; border:1px solid #dcdcdc; border-radius:10px; background-color:black; margin-left:2px; margin-right:2px;}

.sketch_ui_stroke_color_box{display:inline-block; vertical-align:top; width:351px; height:57px; background:url(../images/sketch/ui_stroke_color_bg.png) no-repeat; text-align:left; padding-top:14px; padding-left:127px; box-sizing:border-box;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn{display:inline-block; vertical-align:top;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn .shape{width:25px; height:25px; border:1px solid #dcdcdc; border-radius:25px; background-color:black; margin-left:2px; margin-right:2px;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn[data-color="#ce0e11"] .shape{background-color:#ce0e11;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn[data-color="#ef711d"] .shape{background-color:#ef711d;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn[data-color="#84ca1b"] .shape{background-color:#84ca1b;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn[data-color="#3a8df5"] .shape{background-color:#3a8df5;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn[data-color="#FFEB35"] .shape{background-color:#FFEB35;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn[data-color="#ffffff"] .shape{background-color:#ffffff;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn[data-color="#000000"] .shape{background-color:#000000;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn[data-color="#004eff"] .shape{background-color:#004eff;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn[data-color="#ff4343"] .shape{background-color:#ff4343;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn[data-color="#ffd448"] .shape{background-color:#ffd448;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn[data-color="#e75d53"] .shape{background-color:#e75d53;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn[data-color="#c1d359"] .shape{background-color:#c1d359;}
.sketch_ui_stroke_color_box .sketch_ui_color_btn[data-color="#FFDE42"] .shape{background-color:#FFDE42;}

/* 그리기 지우개 UI */
.sketch_fill_box .sketch_ui_stroke_eraser_box{display:inline-block; vertical-align:top; width:200px; height:57px; background:url(../images/sketch/ui_stroke_eraser_bg_2.png) no-repeat; text-align:left; padding-top:12px; padding-left:136px; box-sizing:border-box;}

.sketch_ui_stroke_eraser_box{display:inline-block; vertical-align:top; width:220px; height:57px; background:url(../images/sketch/ui_stroke_eraser_bg.png) no-repeat; text-align:left; padding-top:12px; padding-left:126px; box-sizing:border-box;}
.sketch_ui_stroke_eraser_box .sketch_ui_eraser_btn{display:inline-block; vertical-align:top;}
.sketch_ui_stroke_eraser_box .sketch_ui_eraser_btn .shape{width:29px; height:29px; background:url(../images/sketch/ui_eraser_pixcel_btn.png) no-repeat;}
.sketch_ui_stroke_eraser_box .sketch_ui_eraser_btn[data-eraser="all"] .shape{background:url(../images/sketch/ui_eraser_all_btn.png) no-repeat; margin-left:10px;}

.draw-line-box
{
	position:absolute;
	display:inline-block;
}