@charset "UTF-8";
@import url("fonts.css");

/***판서***/
#draw {
	position: absolute;
    left: 0px;
    /* top: 60px; */
	top: 0px;
    right: 0px;
    margin: 0 auto;
    width: 1600px;
    height: 900px;
	z-index:0;
	background:transparent;
	display: none;

    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    transform-origin: 50% 0%;

    -webkit-transform:scale(1.06);
    -moz-transform:scale(1.06);
    transform:scale(1.06);
	border-radius: 30px;
}

#draw.full {
	-webkit-transform-origin: 50% 400px;
    -moz-transform-origin: 50% 400px;
    transform-origin: 50% 400px;

    -webkit-transform:scale(1.14);
    -moz-transform:scale(1.14);
    transform:scale(1.14);
}

.writer_bg{
	top: 48px;
	left: -6px;
	width: 1670px;
	height: 870px;
	border-radius: 31px;
	background-image:url('../images/writer_bg.png');
	background-size: 100% 100%;
}

#wr_bottom {
	position: absolute;
	top: 806px;
	left: -8px;
}

.Text_box{
	top:0px; left:210px;
	width:320px; height:54px;
	border-radius:30px;
	border:1px solid #ffffff;
	background-color:#000000;
}
.Drawing_box{
	top:0px; left:576px;
	width:320px; height:54px;
	border-radius:30px;
	border:1px solid #ffffff;
	background-color:#000000;
}
.Reset_box{
	top:0px; left:950px;
	width:220px; height:54px;
	border-radius:30px;
	border:1px solid #ffffff;
	background-color:#000000;
}

.writer_line1{top:0px;left:285px;border:1px solid #ffffff;height:54px;}
.writer_line2{top:0px;left:410px;border:1px solid #ffffff;height:54px;}
.writer_line3{top:0px;left:655px;border:1px solid #ffffff;height:54px;}
.writer_line4{top:0px;left:780px;border:1px solid #ffffff;height:54px;}
.writer_line5{top:0px;left:1028px;border:1px solid #ffffff;height:54px;}

.text_t{font-family: 'KoPubDotum'; font-weight: bold; font-size:35px;color:#ffffff;margin-top: 10px;margin-left: 32px;position: absolute;}
.text_n{font-family: 'KoPubDotum'; font-weight: bold;font-size:25px;color:#ffffff;margin-top: 14px;margin-left: 98px;width:50px;position: absolute;text-align:center;}
.text_v01{font-family: 'KoPubDotum'; font-weight: bold;font-size:15px;color:#ffffff;margin-top: 20px;margin-left: 162px;width:20px;position: absolute;}
.text_v02{font-family: 'KoPubDotum'; font-weight: bold;font-size:15px;color:#ffffff;margin-top: 20px;margin-left: 275px;width:20px;position: absolute;}
.text_c{margin-top: 12px;margin-left: 225px;width:28px;height:28px;border:1px solid rgb(255, 255, 255);border-radius:5px;background-color:rgb(255, 255, 255);position: absolute;}

.writer_pen{
	margin-top: 12px;
    margin-left: 27px;
    position: absolute;
    width: 32px;
}
.pen_size {
	position: absolute;top: 15px;left: 110px;width:28px;height:28px;background:transparent;
}
.pen_size .circle{
	position:absolute;
	margin:auto;
	top:0; left:0; right:0;bottom:0;
	width:10px; height:10px;
	border:1px solid #BBBBBD;border-radius:25px;background-color:#ffffff;
}
.pen_c{margin-top: 12px;margin-left: 225px;width:28px;height:28px;border:1px solid rgb(255, 255, 255);border-radius:5px;background-color:rgb(255, 255, 255);position: absolute;}
.pen_v01{
	font-family: 'KoPubDotum';
	font-weight: bold;
	font-size:15px;
	color:#ffffff;
	top: 20px;
	left: 162px;
	width:20px;
	position: absolute;
}
.pen_v02{
	font-family: 'KoPubDotum';
	font-weight: bold;
	font-size:15px;
	color:#ffffff;
	margin-top: 20px;
	margin-left: 275px;
	width:20px;
	position: absolute;
}

.Reset_img{
	margin-top: 9px;
	margin-left: 24px;
	position: absolute;
	width: 35px;
	transform: rotate(50deg);
}
.Reset_t{font-family: 'KoPubDotum';
	font-weight: bold;font-size:29px;color:#ffffff;margin-top: 10px;margin-left: 105px;position: absolute;}

#writer_close, .tool_close {
	position:absolute;
	top: -11px;
    right: -106px;
    width: 50px;
	cursor:pointer;
}
/* #writer_close:hover, .tool_close:hover {
	filter:sepia(100%);
} */

#popup_close {
    top: 40px;
    right: 30px;
    width: 43px;
    cursor: pointer;
    z-index: 11;
}


#writer .board, #draw .board {
	top: 29px;
	left: -27px;
	width: 1672px;
	height: 866px;
	padding:20px; overflow-y:auto;
	font-weight:bold; color:rgb(255, 130, 100); font-size:60px;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.8);
}
#writer .board *, #draw .board * {
	position:relative;
}

.area { cursor:pointer; border:0px solid red;}
.area:hover {background:rgba(0,0,0,0.1);}

.area_font       { top:0px;left:  0px;width: 71px;height:54px; }
.area_font_size  { top:0px;left: 72px;width:124px;height:54px; }
.area_font_color { top:0px;left:200px;width:120px;height:54px; }
.area_pen        { top:0px;left:  0px;width: 75px;height:54px; }
.area_pen_width  { top:0px;left: 80px;width:121px;height:54px; }
.area_pen_color  { top:0px;left:205px;width:116px;height:54px; }
.area_eraser     { top:0px;left:  0px;width: 75px;height:54px; }
.area_reset      { top:0px;left: 79px;width:141px;height:54px; }

.sel_font_size { bottom:158px; left:100px; display:none;}
.area_font_20  { left:0px; top:  0px; width:75px; height:28px;}
.area_font_60  { left:0px; top: 30px; width:75px; height:28px;}
.area_font_100 { left:0px; top: 60px; width:75px; height:28px;}

.sel_color { bottom:230px; left:223px; display:none;}
.area_yellow  { left:0px; top:  6px; width:70px; height:35px; }
.area_red     { left:0px; top: 44px; width:70px; height:35px; }
.area_blue    { left:0px; top: 82px; width:70px; height:35px; }
.area_white   { left:0px; top:120px; width:70px; height:35px; }

.sel_pen_width  { bottom:248px; left:100px; display:none;}
.area_width_1 { left:0px; top: 4px; height:19px; width:71px;}
.area_width_2 { left:0px; top:26px; height:19px; width:71px;}
.area_width_3 { left:0px; top:49px; height:22px; width:71px;}
.area_width_4 { left:0px; top:74px; height:27px; width:71px;}
.area_width_5 { left:0px; top:105px; height:30px; width:71px;}
.area_width_6 { left:0px; top:139px; height:34px; width:71px;}

#draw canvas {
	position: absolute;
    top: 0px;
    left: 0px;
    width: 1600px;
    height: 900px;
    /* border-radius: 0px 0px 31px 31px; */
    background: rgba(0,0,0,0.05);
    cursor: url(../images/writer_pen.png) 3 40, auto;
    /* opacity: 0.75;*/
	border-radius: 30px;
}

.corner_Title_box {
    position: absolute;
    top: 5px;
    left: 902px;
    width: 47.6%;
    height: 50px;
    background-color: #96a4c3;
    color: white;
}
.corner_Title_text{
    font-size: 27px;
    font-family: 'DXnewGothicStd-20';
    line-height: 30px;
    padding: 10px 16px;
    text-align: right;
}

.background_icons{
	position:absolute;
	width:120px;
	height:auto;
}

/*그리기*/
.draw_box {
	position: absolute;
	margin:auto;
	left: 0px;
	right:0px;
	bottom: 0px;
	height: 114px;
	background: #fafafc;
	border-radius: 10px 10px 0 0;
	border: 2px solid #555555;
	/* -webkit-box-shadow: 11px 11px 1px #e5e5e5;
    -moz-box-shadow: 11px 11px 1px #e5e5e5; */
	/* box-shadow: 11px 11px 1px #e5e5e5; */
	z-index: 10;
	font-family: 'KoPubDotum', sans-serif;
}

.draw_box.hide {
	height: 50px;
	width: 325px;
	border-width: 0px;
	opacity: 0.5;
	background-color: transparent;
	left: auto;
}

.draw_box label {
	font-size: 19px;
	color: #555;
	font-weight: 600;
	font-family: 'NotoSansM';
	display: block;
	position: absolute;
	top: -22px;
	/* margin-left: 16px; */
	margin: auto;
	left: 0;
	right: 0;
	text-align: center;
}

.draw_box label .tri {
    display: inline-block;
    vertical-align: middle;
    line-height: 30px;
    height: 7px;
    width: 12px;
    background: url(../images/draw/tri.png) no-repeat center;
    transform: rotate(-90deg);
    display: none;
}

.draw_box .select_pen {
    position: absolute;
    left: 33px;
    top: 30px;
    width: 305px;
    height: 66px;
}

.draw_box .select_pen .pen {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    cursor: pointer;
    margin-right: 6px;
    border-radius: 20px;
    background-color: #fdfcfa;
    border: 3px solid #ada49d;
    background-repeat: no-repeat;
    background-position: center;
}

.draw_box .select_pen .pen:hover,
.draw_box .select_pen .pen.on {
	border: 3px solid #17d0b0;
	box-shadow: 6px 6px 1px #e1ded9;
}

.draw_box .select_pen .pen.pencil {
	background-image: url(../images/draw/pencil.png);
	background-size: 29px 29px;
}
.draw_box .select_pen .pen.marker {
	background-image: url(../images/draw/marker.png);
	background-size: 35px 33px;
}
.draw_box .select_pen .pen.erase {
    background-image: url(../images/draw/erase.png);
	/* cursor:url(../images/draw/erase.png) 3 40; */
	background-size: 38px 34px;
}
.draw_box .select_pen .pen.eraseAll {
	background-image: url(../images/draw/eraseAll.png);
	background-size: 32px 31px;
}

.draw_box .hide_draw {
	position: absolute;
    top: 30px;
    right: 133px;
    /* width: 145px; */
    height: 52px;
    cursor: pointer;
}

.draw_box .show_draw {
	position: absolute;
	bottom: 0px;
	left: -20px;
	height:52px;
	cursor: pointer;
	z-index: 10;
	display: none;
}

.draw_box .close_button {
    position: absolute;
    top: 40px;
    right: 35px;
    width: 26px;
    cursor: pointer;
}

.draw_box .thickness_box {
	position: absolute;
	top: 26px;
	left: 346px;
	width: 247px;
	height: 74px;
	/* background:#fafafc; */
	/* background-color: #fff; */
	border-left: 3px double #ccc;
}


.draw_box .opacity_box {
	position: absolute;
	top: 26px;
	left: 593px;
	width: 305px;
	height: 74px;
	background:#fafafc;
	/* background-color: #fff; */
	border-left: 3px double #ccc;
}

.draw_box .color_box {
	position: absolute;
	top: 26px;
	left: 845px;
	width: 520px;
	height: 74px;
	background:#fafafc;
	/* background-color: #fff; */
	border-left: 3px double #ccc;
}

.draw_box .color_box .table {
	/* margin-top:5px; */
	position:absolute;
	top: 18px;
	left: 16px;
}

.draw_box .thickness_box .thickbox,
.draw_box .opacity_box .opbox {
	position: absolute;
	left: 18px;
	top: 0px;
	width: 68px;
	height: 68px;
}

.draw_box .opacity_box .cbox {
    top: -2px;
    left: 17px;
    width: 70px;
    height: 72px;
    border-radius: 13px;
    opacity: 0.5;
    border: 2px solid #e3e1de;
    position: absolute;
    box-sizing: border-box;
}

.draw_box .slider {
	position: absolute;
	left: 105px;
	top: 32px;
	width: 120px;
	height: 7px;
	background-color: #d0d8e1;
	border-radius: 12px;
}

.draw_box .slider .ui-slider-handle {
	position: absolute;
	background: url(../images/draw/pointer.png) no-repeat;
	background-size: 100% 100%;
	width: 25px;
	height: 25px;
	top: -8px;
	margin-left: -15px;
	cursor: pointer;
	/* opacity: 0.5; */
}

.draw_box .slider .ui-slider-handle:focus {
	outline: 0px;
}

.draw_box .slider .ui-slider-range {
    background-color: #808d9c;
    border-radius: 12px;
    display: block;
    height: 7px;
}

.draw_box .point {
    position: absolute;
    margin: auto;
    top: -5px;
    bottom: 0px;
    left: 22px;
    right: 166px;
    background-color: #454240;
    width: 6px;
    height: 6px;
    border-radius: 100px;
}

.draw_box .point.marker {
	border-radius: 3px;
	-webkit-transform: skew(-15deg) scaleY(1.5);
	-moz-transform: skew(-15deg) scaleY(1.5);
	transform: skew(-15deg) scaleY(1.5);
}

.draw_box .color_box .col {
	position: absolute;
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 7px;
	border:2px solid #aaa;
	border-radius: 5px;
	cursor: pointer;
}

.draw_box .color_box .col:nth-child(4),
.draw_box .color_box .col:nth-child(8),
.draw_box .color_box .col:nth-child(12) {
	margin-right: 0;
}

.draw_box .color_box .col.on {
	border:2px solid #333;
	background-image:url(../images/draw/colcheck.png);
	background-size: 23px 18px;
	background-position: center;
	background-repeat: no-repeat;
}

.draw_box .color_box .col.r1 {top:0;}
.draw_box .color_box .col.r2 {top:57px;}
.draw_box .color_box .col.r3 {top:114px;}
.draw_box .color_box .col.r4 {top:172px;}
.draw_box .color_box .col.c1 {left:0;}
.draw_box .color_box .col.c2 {left: 40px;}
.draw_box .color_box .col.c3 {left: 80px;}
.draw_box .color_box .col.c4 {left: 120px;}
.draw_box .color_box .col.c5 {left: 160px;}
.draw_box .color_box .col.c6 {left: 200px;}
.draw_box .color_box .col.c7 {left: 240px;}
.draw_box .color_box .col.c8 {left: 280px;}
.draw_box .color_box .col.c9 {left: 320px;}
.draw_box .color_box .col.c10 {left: 360px;}
.draw_box .color_box .col.c11 {left: 400px;}
.draw_box .color_box .col.c12 {left: 440px;}