css/style.scss
@charset "utf-8";
$green : #44BD9F;
$perple : #9282ff;
$blue : #57b7eb;

html,body { width: 100%;height: 100%; position: relative; overflow: hidden}
* { margin:0;padding:0;list-style: none;}
a { text-decoration: none;}

.l_canvas { padding-bottom: 100px;
	#canvas01 { }
}
.l_toolBox {
	position: absolute; bottom: 0; left: 0;
	box-sizing: border-box; width: 100%; height: 100px;
	border-top: 1px solid #333;
	background: rgba(0,0,0,0.3);

	.l_left { float: left; box-sizing: border-box; width: 30%; padding: 10px 0 10px 20px;}
	.file { width: 100%; height: 32px; line-height: 32px; font-size: 14px; text-align: center; color: #fff; background: $green; position: relative;
		#file { opacity: 0; position: absolute; left: 0; top: 0; height: 32px; width: 100%; z-index: 999;}
	}
	#save { display: block; width: 100%; height: 32px; margin-top: 16px; line-height: 32px; font-size: 14px; text-align: center; color: #fff; background: $perple;}

	.l_img { width: 40%; height: 100%; float: left;}
	#img { display: block; width: 80px; height: 80px; border: 2px solid #fff; margin: 8px auto; background: #000;}

	.l_right { float: left; width: 30%; box-sizing: border-box; padding: 10px 20px 10px 0;
		a { display: block; width: 100%; height: 32px; line-height: 32px; font-size: 14px; text-align: center; color: #fff; background: $blue;}
		#rotateL { margin-top: 10px;}
	}

}
