@charset "utf-8";

* { margin:0; padding:0; user-select: none;  }

@font-face {
    font-family: 'Nanum Gothic Extra Bold';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/NanumGothic-ExtraBold.woff) format('woff');
}

.container { width:1920px; height:1080px; position: absolute; top:0; left:0; }
.board {
    width:1280px;
    height:720px;
    background: url(../images/12_board/00_bg.png) left top no-repeat;
    background-size: 100%;
}
#draw1{ position: absolute; left:20px; top:102px; pointer-events: none; z-index:1;}
.font { color:#4C2818; font-size:15px; position: absolute; font-family: 'Nanum Gothic Extra Bold'; }

@font-face {font-family: 'Nanum Myeongjo Bold'; font-style: normal; font-weight: 700; src: url(../fonts/NanumMyeongjoBold.woff) format('woff');}
.textarea > span{font-family: 'Nanum Myeongjo Bold';}
.textarea { 
    width: 1218px;
    height: 577px;
    position: absolute;
    top: 103px;
    left: 22px;
    font-size: 50px;
    resize: none;
    background-color: transparent;
    padding: 10px;
    overflow: hidden;
    outline: 0;
    word-break: break-all;
    font-family: "바탕";
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
	z-index:0;
	z-index:1;
}

.textarea.on1{
    background: none;
}
.textarea.on2{
    background: url(../images/12_board/board_bg2.png) left top/contain no-repeat;
}
.textarea.on3{
    background: url(../images/12_board/board_bg3.png) left top/contain no-repeat;
}

.boardBottom { position: absolute; top:0px; width:647px; left:38px; }

.openFS { background: url(../images/12_board/box_open010001.png) 0px 0px no-repeat; background-size: 18px 22px;  width:18px; height: 21px; top:2px; right:6px; display: block; position: absolute; cursor: pointer; }
.drawSize .openFS{ top:1px; right:1px;}
.openFS:hover { background-image: url(../images/12_board/box_open010003.png); }
.blueopenFS:hover { background-image: url(../images/12_board/box_open010002.png); }

/* textOption */
.btn_box {
    position: absolute;
    top: 49px;
    left: 202px;
    width: 494px;
    height: 50px;
}

.btn_box > div{
    width: 100px;
    height:42px;    
    cursor: pointer;
    float:left;    
}
.btn_box > div + div{
    margin-left: 10px;
}

.btn_box>div.select_tool {width: 100px;}

.select_text {
    background: url(../images/12_board/01_btn_text.png) 0px 0px/contain no-repeat;    
}
.select_text.on {
    background: url(../images/12_board/01_btn_text_over.png) 0px 0px/contain no-repeat;    
}

.select_draw {
    background: url(../images/12_board/01_btn_draw.png) 0px 0px/contain no-repeat;
}

.select_draw.on {
    background: url(../images/12_board/01_btn_draw_over.png) 0px 0px/contain no-repeat;
}

.select_shapes{
    background: url(../images/12_board/01_btn_figure02.png) 0px 0px/contain no-repeat;

}
.select_shapes.on{
    background: url(../images/12_board/01_btn_figure02_over.png) 0px 0px/contain no-repeat;
}

.select_tool{
    background: url(../images/12_board/01_btn_tool.png) 0px 0px/contain no-repeat;
}
.select_tool.on{
    background: url(../images/12_board/01_btn_tool_over.png) 0px 0px/contain no-repeat;
}

.select_shapes2{
    background: url(../images/12_board/01_btn_figure02.png) 0px 0px/contain no-repeat;
    display: none;
}
.select_shapes2.on{
    background: url(../images/12_board/01_btn_figure02_over.png) 0px 0px/contain no-repeat;
    display: none;
}


.textOption {width: 192px;height:96px;position: absolute;top: -2px; left: 628px;}
.symbolOption {width: 192px;height:96px;position: absolute;top:-4px; left: 623px;}

.fontFamilytext { top:61px; left:15px; }
.fontFamily { background: url(../images/12_board/font_select_01.png) 0px 0px no-repeat; background-size: 187px 30px; width:187px; height:30px; position: absolute; top:57px; left:51px; }
.menuFF { background: url(../images/12_board/font_select_bg.png) 0px 0px no-repeat; background-size: 187px 156px; width:187px; height:156px; position: absolute; top:83px; left:51px; display: none; z-index:1; }
.btnFF { background: url(../images/12_board/font1_01.png) 0px 0px no-repeat; background-size: 177px 29px;  width:177px; height:29px; position: absolute; left:4px; top:2px; cursor: pointer; }
.btnFF:hover { background-image: url(../images/12_board/font1_02.png); }
.btnFF:nth-child(2) { top:31px; background-image: url(../images/12_board/font2_01.png); }
.btnFF:nth-child(2):hover { background-image: url(../images/12_board/font2_02.png); }
.btnFF:nth-child(3) { top:62px; background-image: url(../images/12_board/font3_01.png); }
.btnFF:nth-child(3):hover { background-image: url(../images/12_board/font3_02.png); }
.btnFF:nth-child(4) { top:92px; background-image: url(../images/12_board/font4_01.png); }
.btnFF:nth-child(4):hover { background-image: url(../images/12_board/font4_02.png); }
.btnFF:nth-child(5) { top:121px; background-image: url(../images/12_board/font5_01.png); }
.btnFF:nth-child(5):hover { background-image: url(../images/12_board/font5_02.png); }

font[face="바탕"] { font-family: 바탕; }
font[face="굴림"] { font-family: 굴림; }
font[face="돋움"] { font-family: 돋움; }
font[face="Time New Roman"] { font-family: 'Time New Roman'; }
font[face="verdana"] { font-family: verdana; }

/* font-size */
.fontSizetext {top: 60px;left: 0;}
.fontSize {background:url(../images/12_board/size_box.png) 0px 0px no-repeat;background-size: 77px 30px;width:77px;height:30px;position: absolute;top:57px;left: 33px;display: block;}
.sizeNum { position: absolute;
    top: 2px;
    left: 0px;
    font-size: 16px;
    width: 33px;
    text-align: center;
    font-family: 'Nanum Gothic Extra Bold';
}

.menuFS {background: url(../images/12_board/fontsize_select_bg.png) 0px 0px no-repeat;background-size: 77px 186px;width:77px;height:186px;position: absolute;top:83px;left: 33px;display: none;z-index:1;}
.btnFS { font-size: 16px;
    font-size: 16px;
    position: absolute;
    width: 61px;
    text-align: left;
    top: 0px;
    left: 2px;
    padding: 6px 5.5px;
    cursor: pointer;
    font-family: 'Nanum Gothic Extra Bold';
}
.btnFS:nth-child(2) { top:30px; }
.btnFS:nth-child(3) { top:59px; }
.btnFS:nth-child(4) { top:88px; }
.btnFS:nth-child(5) { top:117px; }
.btnFS:nth-child(6) { top:146px; }
font[size="1"] { font-size:50px !important; }
font[size="2"] { font-size:60px !important; }
font[size="3"] { font-size:70px !important; }
font[size="4"] { font-size:80px !important; }
font[size="5"] { font-size:90px !important; }
font[size="6"] { font-size:100px !important; }


/* font-color */
.fontColortext {top: 62px;left: 117px;}

/* 상단 버튼 */
.menuDC,
.menuTC,
.menufO{
    width: 150px;
    height:87.5px;
    position: absolute;
    top: 26px;
    left: -52px;
    background: url(../images/12_board/11_color_select_box.png) left top/cover no-repeat;    
    /* 추가 */
    /*background: url(../images/12_board/05_color_picker.png)0px 0px no-repeat; 
	background-size: 150px 98px;
	background-color: #000000;*/
    /* box-shadow: 0px 0px 0px black ,
				0 0 8px black ,
				0 0 1px black; */
    display: none;
    z-index: 1;
}

/* .menuTC{left: -30px;}
.menuDC{left: 78px;}
.menufO{left: 78px;} */

.menuDC.on,
.menuTC.on,
.menufO.on{
    display: block;
    z-index:2;
}

#color_pallet,
#color_palletDC,
#color_palletfO{
    position: absolute;
    top: 58px;
    width: 43px;
    height: 24px;
    background: #000;
    cursor: pointer;
}

#color_pallet{
    left: 137px;
}

#color_palletDC{
    left: 265px;
}

#color_palletfO{
    left: 920px;
}
.menuTC > span,
.menuDC > span,
.menufO > span{
    width:26px;
    height: 26px;
    padding:1.5px;
    background-clip: content-box;
    display: inline-block;
    border:1.5px solid #ebebeb;
    border-radius: 5px;
    position: absolute;
    cursor: pointer;
    transition:all 0.2s ease-in-out;
    transform: translateZ(0);
}

.menuTC > span:hover,
.menuDC > span:hover,
.menufO > span:hover{ border:1.5px solid #fabd02; box-shadow: 1px 1px 1px rgba(0,0,0,0.1); }

.menuTC > span:nth-of-type(-n+4),
.menuDC > span:nth-of-type(-n+4),
.menufO > span:nth-of-type(-n+4){top: 13px;}
.menuTC > span:nth-of-type(n+5),
.menuDC > span:nth-of-type(n+5),
.menufO > span:nth-of-type(n+5){top: 49px;}
.menuTC > span:nth-of-type(4n+1),
.menuDC > span:nth-of-type(4n+1),
.menufO > span:nth-of-type(4n+1){left: 5.5px;}
.menuTC > span:nth-of-type(4n+2),
.menuDC > span:nth-of-type(4n+2),
.menufO > span:nth-of-type(4n+2){left: 40.5px;}
.menuTC > span:nth-of-type(4n+3),
.menuDC > span:nth-of-type(4n+3),
.menufO > span:nth-of-type(4n+3){ left:75.5px; }
.menuTC > span:nth-of-type(4n),
.menuDC > span:nth-of-type(4n),
.menufO > span:nth-of-type(4n){left: 109.5px;}

#btn_symbol{
	position:absolute; 
	left: 193px;
	top: 56px;
	background:url(../images/12_board/06_btn_symbol.png) left top/100% no-repeat;
	background-size:55px 31px;
	width:55px;
	height:31px;
	cursor:pointer;
}

#btn_symbol:hover{
	background:url(../images/12_board/06_btn_symbol_over.png) left top/100% no-repeat;
	background-size:55px 31px;
	width:55px;
	height:31px;
}

#btn_fractional{
	position:absolute; 
	left: 251px;
	top: 56px;
	background:url(../images/12_board/07_btn_fractional.png) left top/100% no-repeat;
	background-size:69px 31px;
	width:69px;
	height:31px;
    cursor:pointer;
    display: none;
}



#btn_fractional.on{
	background:url(../images/12_board/07_btn_fractional_over.png) left top/100% no-repeat;
	background-size:69px 31px;
	width:69px;
	height:31px;
}

#btn_fractionalselect{
	position:absolute; 
	left: 347px;
	top:45px;
	background:url(../images/12_board/08_btn_fractional_select.png) left top/100% no-repeat;
	background-size:53px 53px;
	width:53px;
	height:53px;
	cursor:pointer;
}

#btn_fractionalselect.on{
	background:url(../images/12_board/08_btn_fractional_select_on.png) left top/100% no-repeat;
	background-size:53px 53px;
	width:53px;
	height:53px;
}




/* 상단 버튼 end */

/* 기호 팝업 */
#symbol_pop{
	position:absolute;
	left:120px;
	top: 72px;
	background:url(../images/12_board/symbol/00_Symbol_bg.png) left top/100% no-repeat;
	background-size:244px 215px;
	width:244px;
	height:215px;
	z-index: 1;
	display: none;
}
#symbol_pop.on{display: block;}

#symbol_pop ul{
	position:absolute; 
	left:8px;
	top:15px;
	width:230px;
}

#symbol_pop ul li{
	position:relative;
	display: inline-block;
	width:27px;
	height:27px;
	margin-right:1px;
	cursor:pointer;
	list-style:none;
}

#symbol_pop ul li + li{
	margin-left: 5px;
}
#symbol_pop ul li:nth-child(7n+1){
	margin-left:0px;
}

#symbol_pop ul li img{
	width:100%;
	height:100%;
}
/* 기호 팝업 end*/


/* textOption end */
.btn_text {top:13px; left:19px; text-align: right; }
.btn_draw {top:13px; left:107px; text-align: right; }
/* drawOption */
.drawOption { width:449px; height:88px; position: absolute; top: -2px; left: 633px; display: none; }

.drawSizetext { top: 62px; left: 140px; }
.drawSize { background: url(../images/12_board/dot_select_030001.png) 0px 0px no-repeat; background-size: 60px 23px !important; width: 60px; height: 23px; display: block; position: absolute; top: 60px; left: 174px; }
.menuDS { background: url(../images/12_board/dot_select_bg.png) 0px 0px no-repeat; background-size: 65px 103px; width: 65px; height: 103px; position: absolute; top: 81px; left:174px; display: none; z-index:1;}
.btnDS { width: 61px; height:26px; position: absolute; top:0; left:0; cursor: pointer; }
.btnDS:nth-child(2) { top:26px; }
.btnDS:nth-child(3) { top:52px; }
.btnDS:nth-child(4) { top:78px; }

/* draw-color */
.drawColortext { top:61px; left: 244px; }

.pen_typet { top:38px; left:16px; }
.pen_type { background: url(../images/12_board/13_btn_pen.png) 0px 0px no-repeat; background-size: 33px 33px;  width:33px; height:33px; display: block; position: absolute; top:30px; left:38px; cursor: pointer; }
.erasertext { top:29px; left:315px; text-align: right; }
.eraser { background: url(../images/12_board/13_btn_earser.png) 0px 0px no-repeat; background-size: 53px 51px;  width:53px; height:51px; display: block; position: absolute; top: 46px; left: 343px; cursor: pointer; }
.eraserAlltext { top:28px; left:404px; text-align: right; }
.eraserAll { background: url(../images/12_board/13_btn_earser_all.png) 0px 0px no-repeat; background-size: 53px 51px;  width:53px; height:51px;display: block; position: absolute; top: 44px; left: 1070px; cursor: pointer; }
/* drawOption end */

/* figureOption */
.figureColortext { top: 58px; left: 900px; }
.figureOption {display:none;}
.figureOption ul{
	position:absolute; 
	left: 621px;
	top: 58px;
	width: 300px;
}

.figureOption ul li{
	position:relative;
	display: inline-block;
	width: 31px;
	height: 27px;
	margin-right: -3px;
	cursor:pointer;
	list-style:none;
}

.figureOption ul li:nth-child(6){
    display: none;
}
.figureOption ul li:nth-child(7){
    display: none;
}
.figureOption ul li:nth-child(8){
    display: none;
}



.figureOption ul li img{
	width:100%;
	height:100%;
}

/* .figureOption ul li:nth-of-type(n+6) {display: none;} */
/* figureOption end*/

/* toolOption */
.toolOption {display:none;}
.toolOption ul{
	position:absolute; 
	left: 631px;
	top: 44px;
	width:164px;
}

.toolOption ul li{
	position:relative;
	display: inline-block;
	width:49px;
	height:47px;
	margin-right:1px;
	cursor:pointer;
	list-style:none;
}

.toolOption ul li img{
	width:100%;
	height:100%;
}
/* toolOption end*/

.x_btn{width: 60px;height: 60px;background: url(../images/12_board/close_01.png) left top/100% no-repeat;position: absolute; left: 1216px; cursor: pointer; z-index:3;}
.x_btn:hover{width: 60px;height: 60px;background: url(../images/12_board/close_02.png) left top/100% no-repeat;position: absolute; left: 1216px; cursor: pointer; z-index:3;}

/* 배경 선택 */
.select_wrap{
    position: absolute;
    left: 1135px;
    top: 41px;
}

.select_bg{
    position: absolute;
    left:0px;
    top:0px;
    width: 76px;
    height: 50.5px;
    background: url(../images/12_board/bgimg_wrap.png) left top/contain no-repeat;
    z-index: 2;
    cursor: pointer;
}


.select_bg > div{    
    width: 67px;
    height: 44px;
    background-size: 134px;
    background-image: url(../images/12_board/bgimg.png);
    background-position: right top;
    position: absolute;
    left: 2px;
    top: 4px;
    z-index: 2;
}

.select_bg > div.on1{ background-position: right top; }
.select_bg > div.on2{ background-position: right 92px; }
.select_bg > div.on3{ background-position: right bottom; }

.select_wrap > ul{
    width: 76px;
    height: 153.5px;
    top: 43px;
    position: absolute;
    background: url(../images/12_board/bgimg_bg.png) left top/contain no-repeat;
    z-index: 1;
    display: none;
}

.select_wrap > ul.on{ display: block;}

.select_wrap > ul li{
    width: 65px;
    height: 45px;
    background-size: 134px;
    background-image: url(../images/12_board/bgimg.png);
    background-position: right top;
    margin-top: 8px;
    margin-left: 4px;
    list-style: none;
    cursor: pointer;
}

.select_wrap > ul li:hover{
    background-position: left top;
}

.select_wrap > ul li:nth-child(2){
    margin-top: 1px;
    background-position: right 92px;
}

.select_wrap > ul li:hover:nth-child(2){
    background-position: left 92px;
}

.select_wrap > ul li:nth-child(3){
    margin-top: 3px;
    background-position: right bottom;
}

.select_wrap > ul li:hover:nth-child(3){
    background-position: left bottom;
}

.select_bg_cover{
	position:absolute; 
	left:1060px;
	top:41px;
	background:url(../images/12_board/bgimg_cover.png) left top/100% no-repeat;
	background-size:73px 51px;
	width:73px;
	height:51px;
	cursor:pointer;
}


.ruler {
    display: inline-block;    
    cursor: move;
    transform: rotate(0deg);
    position: relative;
    left: 488px;
    top: 386px;
    z-index: 10;
    width: 500px;
    height: 50px;
    background: url(../images/ja.png) no-repeat;
    background-size: contain;    
  }
  
  .protractor {
    position: relative;
    display: inline-block;
    left: -190px;
    top: 400px;
    width: 380px;
    height: 208px;
    background: url(../images/protractor3.png) top no-repeat;
    background-size: contain;
    cursor: move;
    transform: rotate(0deg);
    transform-origin: 50% 191px;
    z-index: 1;
  }
  
  .tri {
    position: relative;
    display: inline-block;
    left: 126px;
    top: 320px;
    width: 190px;
    height: 283px;
    background: url(../images/tri.png) no-repeat;
    background-size: contain;
    cursor: move;
    transform: rotate(0deg);
    z-index: 3;
    transform-origin: 81px 179px;
  }


 .ui-rotatable-handle {
    height: 22px;
    width: 22px;
    cursor: pointer;
    background: url(../images/rotate.png) center/contain no-repeat;
    position: absolute;
    top: -10%;
    left: -5%;
    z-index: 5;
  }

  #draggable3 .ui-rotatable-handle {
    top: -15%;
    left: 47%;
}

  #modelBox{
    width: 1218px;
    height: 577px;
    position: absolute;
    top: 103px;
    left: 22px;
    background-color: transparent;
    padding: 10px;
    overflow: hidden;
    outline: 0;
    word-break: break-all;
    z-index: 1;
}


#fracBox{
    width: 1218px;
    height: 577px;
    position: absolute;
    top: 103px;
    left: 22px;
    background-color: transparent;
    padding: 10px;
    overflow: hidden;
    outline: 0;
    word-break: break-all;
    z-index: 1;
}


.baseFrac.font20{font-size: 20px !important;}
.baseFrac.font50{font-size: 50px !important;}
.baseFrac.font60{font-size: 60px !important;}
.baseFrac.font70{ font-size: 70px !important;}
.baseFrac.font80{ font-size: 80px !important;}
.baseFrac.font90{font-size: 90px !important;}
.baseFrac.font100{font-size: 100px !important;}

.mjx-math.on{
    border: 1px #bcbcbc dashed;
    cursor: pointer;
	padding: 0px 0px 8px 0px;
}

.fracClose{
    position: absolute;
    top: -8%;
    left: -8px;
    width:18px;
    height:18px;
    background: url(../images/12_board/del.png) 0px 0px/contain no-repeat;
    background-size: 18px 18px;
    z-index:2;
    cursor: pointer;
}

.imgClose{
    position: absolute;
    top: -10%;
    left: -23px;
    width:18px;
    height:18px;
    background: url(../images/12_board/del.png) 0px 0px/contain no-repeat;
    background-size: 18px 18px;
    z-index:2;
    cursor: pointer;
    
}

.lineClose{
    position: absolute;
    top: -10%;
    left: -23px;
    width:25px;
    height:25px;
    background: url(../images/12_board/del.png) 0px 0px/contain no-repeat;
    background-size: 25px 25px;
    z-index:2;
    cursor: pointer;
    
}


.lineFree { background: url(../images/12_board/09_draw_btn1.png) 0px 0px no-repeat; background-size: 53px 51px;  width:53px; height:51px; display: block; position: absolute; top:45px; left:13px; cursor: pointer; }
.lineFree.on { background: url(../images/12_board/09_draw_btn1_on.png) 0px 0px no-repeat; background-size: 53px 51px;  }
.linedirect { background: url(../images/12_board/09_draw_btn2.png) 0px 0px no-repeat; background-size: 53px 51px;  width:53px; height:51px;display: block; position: absolute; top:45px; left: 70px; cursor: pointer; }
.linedirect.on { background: url(../images/12_board/09_draw_btn2_on.png) 0px 0px no-repeat; background-size: 53px 51px; }

.MJXc-TeX-main-I{font-family: 'Nanum Myeongjo Bold' !important;}


.baseItem .ui-rotatable-handle {
    height: 22px;
    width: 22px;
    cursor: pointer;
    background: url(../images/rotate.png) center/contain no-repeat;
    position: absolute;
    top: -20%;
    left: 45%;
    z-index: 5;
}

.alertSelf{
    text-align: center;
    display: none;
    position: absolute;
    left: 100px;
    top: 27px;
    width: 676px;
    height: 100px;
    line-height: 100px;
    background: #666;
    color: #fff;
    z-index: 1;
    border-radius: 45px;
    padding: 0 15px;
    left: 312px;
    border: 3px #999 solid;
}
  
.alertSClose{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    right: -12px;
    top:-1px;
    display: inline-block;
    border: solid 3px #999;
    background: #fff url(../experience/images/object/btn_delete.png) center/100% no-repeat;
}

.alertSClose.over{
    background:#fff url(../experience/images/object/btn_delete_over.png) center/100% no-repeat;
}
  



/* .insert_Btn{
    position: absolute;
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    top: -46px;
    left: 203px;
    color: rgb(22, 25, 238);
} */
/* .insert_Btn.on{
    color: rgb(2, 2, 2);
} */


.insert .eraser { background: url(../images/12_board/13_btn_earser.png) 0px 0px no-repeat; background-size: 53px 51px;  width:53px; height:51px; display: block; position: absolute; cursor: pointer; top: 44px; left: 976px;}
.insert .eraserAll { background: url(../images/12_board/13_btn_earser_all.png) 0px 0px no-repeat; background-size: 53px 51px;  width:53px; height:51px;display: block; position: absolute; cursor: pointer; top: 45px; left: 990px }
/* drawOption end */

.regular{
    left: 403px;
    top: 12px;
    position: absolute;
    cursor: pointer;
    font-size: 12px;
    font-family: 'Nanum Gothic Extra Bold';
    color: rgb(95 95 95);
    display: none;
}
.regular::before {
    content: '';
    width: 15px; height: 15px;
    border: 2px solid #515151;
    border-radius: 3px;
    background: #fff;
    box-sizing: border-box;
    position: absolute;
    top: 2px; left: -19px;
}
.regular.on::before{
    background: #00cef3;
}


.toolClose{
    height: 22px;
    width: 22px;
    cursor: pointer;
    background: url(../images/12_board/del.png) center/contain no-repeat;
    position: absolute;
    top: 43%;
    left: -5%;
    z-index: 5;
}


.tri .toolClose{
    top: -10%;
    left: 9%;
}

.protractor .toolClose{
    top: -15%;
    left: 55%;
}