.drawBox{width:100%;height:100%;position:absolute;top:0;left:0;background:0 0;z-index:100}#canvasWrapper{width:100%;height:50%;position:absolute;bottom:0;left:0;right:0;overflow:auto;box-sizing:border-box}.wScroll{width:100%;height:30px;background:rgba(0,0,0,.1);position:absolute;bottom:0;left:0;z-index:100000}.hScroll{width:30px;height:100%;background:rgba(0,0,0,.1);position:absolute;bottom:0;right:0;z-index:100000;top:20px}#canvasBox{width:100%;height:100%;position:absolute;top:0;left:0}#canvas{display:block;position:absolute;top:0;left:0;background:#fff;width:100%;height:100%}.dragBox{position:absolute;left:46%;top:46.9%;width:81px;height:12px;cursor:n-resize}.dragBox img{width:100%;height:100%}.actions{position:fixed;top:48.7%;left:0;width:100%;height:46px;background:#fcfcfc;line-height:46px;border-top:1px solid #d8d8d8}.actions>li{float:left;margin:2px 30px 0;cursor:pointer;width:42px;height:38px;border-radius:4px;border:2px solid #fcfcfc;text-align:center;line-height:50px}.actions>li>img{width:23px;height:23px}.actions>li.active{background:rgba(0,132,255,.11);border-color:#3892f7}.penSetting{width:300px;height:218px;background:rgba(0,0,0,.72);border-radius:4px;position:absolute;top:48px;left:317px;display:none}.penSetting .pTit{width:100%;height:48px;text-align:center;line-height:48px;font-size:13px;color:#fff}.pSize{padding:0 17px 15px}.pSize p{font-size:13px;color:#fff;line-height:20px}.pSize .el-slider__runway{background:#d2d2d2;height:2px}.pSize .el-slider__bar{background:#0078d7;height:2px}.pSize .el-slider__button{background:#0078d7;width:15px;height:15px;margin-top:-14px}.pColor{padding:0 17px}.pColor>li{width:38px;height:38px;cursor:pointer;float:left}.pColor>li.active{box-shadow:0 0 3px rgba(0,0,0,.95);transform:scale(1.2)}.sizes{position:fixed;right:20px;top:10px}.sizes>li{margin:20px 0}.sizes>.thin{height:0;width:20px;border-top:3px solid #000}.sizes>.thick{height:0;width:20px;border-top:6px solid #000}.drawBoardBox{background:#fff;width:100%;height:384px;position:absolute;bottom:0;left:0}.drawBoardBox div:nth-child(2){height:282px!important}.drawBoardBox canvas{width:100%!important;height:282px!important}.controlBox .controlBar{width:20%}input[type=range]{-webkit-appearance:none;width:100%;background:-webkit-linear-gradient(#0084FF,#0084FF) no-repeat,#d2d2d2;background-size:0% 100%;height:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}input[type=range]::-webkit-slider-runnable-track{height:2px;background:#d2d2d2}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:20px;width:20px;margin-top:-9px;background:#0078d7;border-radius:50%}#canvasWrapper::-webkit-scrollbar{width:20px;height:20px}#canvasWrapper::-webkit-scrollbar-track{-webkit-border-radius:2em;-moz-border-radius:2em;border-radius:2em}#canvasWrapper::-webkit-scrollbar-thumb{-webkit-border-radius:2em;-moz-border-radius:2em;border-radius:2em}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#101431;border-radius:6px}::-webkit-scrollbar-thumb{background:#d2d2d2;border-radius:4px}::scrollbar-track{background:#101431;border-radius:4px}::scrollbar-thumb{background:#d2d2d2;border-radius:4px}