.extraWrap{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
#canvas{
	position: absolute;
	top:0px;
	left:0px;
	z-index: 8;
	/*background: rgba(255,255,255,0.1);*/
}
.penWrap{
	position: absolute;
	z-index: 9;
	width: 283px;
	height: 128px;
	background: url(../../img/common/extra/bg.png) 0 0 no-repeat;
	bottom:0px;
	right:30px;
	padding-left: 60px;
	padding-top:15px ;
}
.penWrap .drawClose{
	width: 30px;
	height: 30px;
	background: url(../../img/common/extra/close.png) 0 0 no-repeat;
	position: absolute;
	top: -7px;
  right: -7px;
}
.penWrap .drawClose:hover{
	background: url(../../img/common/extra/close_on.png) 0 0 no-repeat;
}
.penWrap>div{
	width: 29px;
	height: 26px;
	float: left;
	margin-left:14px;
	cursor: pointer;

}
.penWrap>div.pen1{
	background: url(../../img/common/extra/pen1.png) 0 0 no-repeat;
}
.penWrap>div.pen2{
	background: url(../../img/common/extra/pen2.png) 0 0 no-repeat;
}
.penWrap>div.pen3{
	background: url(../../img/common/extra/pen3.png) 0 0 no-repeat;
}
.penWrap>div.all_del{
	width: 41px;
	height: 24px;
	background: url(../../img/common/extra/del.png) 0 0 no-repeat;
}
.penWrap>div.all_del:hover{
	width: 41px;
	height: 24px;
	background: url(../../img/common/extra/del_on.png) 0 0 no-repeat;
}
.penWrap ul{
	width: 200px;
	height: 30px;
	float: left;
	margin-top: 18px;
	margin-left:8px;
}
.penWrap ul li{
	width: 26px;
	height: 26px;
	border-radius: 3px;
	box-sizing: border-box;
	border: 1px solid #fff;
	float: left;
	margin-right: 6px;
	cursor: pointer;
}