body,html,ul,li{
	padding: 0;margin: 0;list-style: none;
}
.box{
	width:900px;height: ;border: 1px solid #aaa;margin: 0 auto;
	border-radius:30px;background:white;
}
.box .menu{
	width: 100%;height:50px;border: 1px ridge #ccc;background:#EEE;
	border-radius:30px 30px 0 0;
}
.box .menu li{
    font-family:'Noto Sans TC', sans-serif;width:16.666666666%;float:left;line-height:44px;
	text-align: center;font-size:16px;cursor:pointer;margin:3px 0;height:44px;
	background:#EEE;border-radius:30px 30px 0 0;
}
.body{width:100%;display:inline-flex;justify-content:space-around;
	align-items:stretch;flex-wrap:nowrap;
}
.body .tool{
    width:100px;height:;border: 1px solid #999;float: left;box-sizing: border-box;
	border-radius:0 0 0 30px;
}
.body .canvas{
	width:;height:;float:left;position: relative;background:white;
	background:url('../m.png') no-repeat 90% 10%;background-size:15%;border:1px solid #999;
	display:inline-flex;margin-right:0;
	border-radius:0 0 30px 0;
	}

.canvas .copy{
    width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 10;background:;
}
.body .option{
    width: 100%;height: 100%;text-align: center;line-height:50px;display: none;border: 0px outset #ccc;background:#EEE;
	font-family:'Noto Sans TC', sans-serif;
	border-radius:0 0 0 30px;
}
.body .option li{
    border-bottom: 1px solid #aaa;cursor: pointer;
}
.op-active{
    display: block;
}
.body input[type=number]{
    width: 90px;height:50px;padding:0;margin: 0;font-size:1.2rem;
}
.body input[type=color]{
    width: 90px;height:50px;padding:0;margin: 0;font-size:1.2rem;
}
.canvas .xp{
    width: 10px;height: 10px;border: 1px solid #000;position: absolute;left: 0;top: 0;display: none;
}