body{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.navbar{position:fixed;width:100%;z-index:2}.canvas_box{padding-top:53px}.canvas-container{z-index:0}#cvs{width:100%}.toolbar{position:fixed;bottom:0;left:20px;z-index:2}.toolbar div.tool-item{width:54px;height:54px;line-height:54px;border-radius:50%;background:#fff;text-align:center;font-size:12px;box-shadow:1px 1px 1px #bbb;margin-bottom:10px;position:relative;cursor:pointer}.toolbar div.tool-item.active,.toolbar div.tool-item:hover{background:#eee}.toolbar span{position:absolute;width:inherit;line-height:initial;padding:5px 0;background:#fff;left:64px;top:14px;border-radius:4px;box-shadow:1px 1px 1px #bbb;display:none}.toolbar div.tool-item:hover span{display:block;z-index:999}.toolbar .tool-item{transition:.5s all}.toolbar>div.magic i{display:inline-block;transition:.4s all;transform:rotate(-45deg)}.toolbar>div.magic.active i{transform:rotate(-270deg)}.toolbar i{font-size:20px;color:#484848}.toolbar .color>div{display:block;height:100%}.toolbar .color .background{width:90%;height:90%;border-radius:50%;position:absolute;top:5%;left:5%;border:0;outline:0}.toolbar .select-choose{position:absolute;top:0;margin-left:54px;height:54px;line-height:30px;width:110px;display:none}.tool-left{z-index:9}.tool-right{left:95px}.tool-right #selection-tool .tool-item{display:none}.slider{outline:0;font-size:12px;position:fixed !important;background:#fff;height:100%;transition:.4s;transform:translateX(100%);z-index:100;right:0;top:53px;width:300px;box-shadow:0 0 30px #e0e0e0}:root{--slider-close-icon:"\f053";--slider-open-icon:'\f054';--slider-icon-btn-width:25px;--slider-icon-btn-height:50px;--slider-icon-size:15px;--itext-setting-width:220px;--draw-setting-width:240px}.setting-panel{position:fixed;font-size:0;z-index:100}.setting-panel .itext-setting{position:fixed;width:var(--itext-setting-width);left:calc(0px - var(--itext-setting-width));background-color:#fff;padding:10px;font-size:0;display:none;z-index:100;box-shadow:0 0 45px #e0e0e0}.setting-panel .lable{line-height:1.5;touch-action:manipulation;vertical-align:middle;text-align:center;padding:0 5px 0 0}.setting-panel .setting-group{margin-bottom:5px;font-size:14px}.setting-panel .itext-setting .itext-color,.setting-panel .draw-setting .draw-color{display:inline-block;width:25px;height:25px;vertical-align:middle;padding:2px;border:1px solid #ddd;border-radius:2px}.setting-panel .itext-setting .itext-color .itext-color-box,.setting-panel .draw-setting .draw-color .draw-color-box{display:inline-block;position:relative;width:100%;height:100%;border:0;outline:0;background-color:red}.slider .setting-panel input{display:inline-block;line-height:1.5;padding:1px 5px;height:auto;vertical-align:middle;font-size:inherit}.slider .setting-panel .itext-setting input{width:50px}.slider .setting-panel input::-webkit-outer-spin-button,.slider .setting-panel input::-webkit-inner-spin-button{-webkit-appearance:none}.setting-panel .draw-setting{position:fixed;width:var(--draw-setting-width);left:calc(0px - var(--draw-setting-width));background-color:#fff;padding:10px;font-size:0;display:none;z-index:100;box-shadow:0 0 45px #e0e0e0}.setting-panel .draw-setting input{width:50px}.setting-panel .iconfont{font-size:12px}.setting-panel .itext-setting .itext-fontselect{display:inline-block;vertical-align:middle;width:auto;height:auto;font-size:inherit;padding:1px 5px}.slider .slider-icon-btn{font:normal normal normal 14px/1 FontAwesome;display:inline-block;position:fixed;font-size:var(--slider-icon-size);left:calc(0px - var(--slider-icon-btn-width));width:var(--slider-icon-btn-width);height:var(--slider-icon-btn-height);line-height:var(--slider-icon-btn-height);top:calc(50% - var(--slider-icon-btn-height) / 2);background-color:#fff;border-radius:5px 0 0 5px;cursor:pointer;box-shadow:0 -10px 45px #e0e0e0;color:#555;padding:0;margin:0}.slider .slider-icon-btn:before{content:var(--slider-close-icon);position:relative;display:inline-block;text-align:center;width:100%;height:100%}.slider.active .slider-icon-btn:before{content:var(--slider-open-icon)}.slider.active{transform:translateX(0)}.slider-tp{position:relative;overflow:hidden;height:100%}.slider-tp>ul{margin-bottom:0 !important}.slider-tp>ul>li>a{display:inline-block;width:100%;padding:5px 0}.slider-tp>ul>li>a.active{background:#eee}.slider .slider-content::-webkit-scrollbar-track,.slider .slider-nav::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);border-radius:10px;background-color:#fbfbfb}.slider .slider-content::-webkit-scrollbar-thumb,.slider .slider-nav::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);background-color:#e0e0e0}.slider .slider-content::-webkit-scrollbar,.slider .slider-nav::-webkit-scrollbar{width:8px;height:8px;background-color:#fff}.slider .slider-tp input{display:inline-block;width:auto;vertical-align:middle}.slider .slider-tp .form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.slider .slider-tp .take-photo{position:relative;text-align:center;background:#eee;border-radius:2px}.slider .slider-tp .material-search{margin:10px}.slider .slider-tp .take-photo input{display:inline-block;position:absolute;opacity:0;width:100%;height:100%;left:0;top:0}.slider .slider-tp ul{font-size:0;text-align:center}.slider .slider-tp ul.cate_filter li{font-size:12px;display:inline-block;width:20%;border-right:1px solid #ececec;border-bottom:1px solid #ececec;border-top:1px solid #ececec;cursor:pointer}.slider .slider-tp ul.cate_filter li:last-of-type{border-right:0}.slider .slider-tp ul.cate_filter li.active,.slider .slider-tp ul.cate_filter li:hover{color:#000}.slider .slider-tp .pager,.slider .slider-tp .pagination{font-size:12px}.slider .slider-tp .pager{margin:0}.slider-container{overflow:hidden;height:100%;padding-bottom:140px;position:relative}.slider .slider-nav{float:left;width:30%;height:100%;overflow:auto;border-right:1px solid #ececec}.slider .slider-nav a.active{background:#eee}.slider .slider-nav a{display:block;width:100%;text-align:center;padding:10px;border-bottom:1px solid #ececec}.slider .slider-content{font-size:0;float:left;width:70%;height:100%;position:relative;overflow:auto;padding:2%}.slider .slider-content .tips{font-size:12px}.slider .grid-item{display:inline-block;text-align:center;padding:2%;transition:.3s;width:50%}.slider .grid-item:hover{background:#ececec;border-radius:5px}.grid-item img{max-width:100%;max-height:100%}.slider .slider-content img{max-width:100%;cursor:pointer;padding:5%}.cvs-color-picker{position:absolute;top:0 !important;left:unset;right:0 !important}@media screen and (max-width:600px){:root{--slider-position:58%;--tool-icon-size:40px;--slider-mobile-close-icon:"\f078";--slider-mobile-open-icon:"\f077";--slider-mobile-icon-btn-width:55px;--slider-mobile-icon-btn-height:25px;--slider-mobile-icon-size:12px}.slider{top:var(--slider-position);height:calc(100% - var(--slider-position));width:100%;transform:translateY(100%);border-radius:4px 4px 0 0}.slider .slider-icon-btn{display:none;left:calc(50% - var(--slider-mobile-icon-btn-width) / 2);top:calc(0px - var(--slider-mobile-icon-btn-height));height:var(--slider-mobile-icon-btn-height);line-height:calc(var(--slider-mobile-icon-btn-height));width:var(--slider-mobile-icon-btn-width);font-size:var(--slider-mobile-icon-size);background-color:#fff;text-align:center;border-radius:3px 3px 0 0;box-shadow:0 -5px 30px #e0e0e0}.slider .slider-icon-btn:before{padding:0;content:var(--slider-mobile-open-icon)}.slider.active{transform:translateY(0)}.slider.active .slider-icon-btn:before{content:var(--slider-mobile-close-icon)}.toolbar>div.magic{display:inline-block}.toolbar>div.magic i{transform:rotate(0)}.toolbar>div.magic.active i{transform:rotate(-225deg)}.toolbar div.tool-item{font-size:10px;box-shadow:-3px 5px 15px #d0d0d0;width:var(--tool-icon-size);height:var(--tool-icon-size);line-height:var(--tool-icon-size)}.toolbar i{font-size:16px}.toolbar span{left:50px;top:7px}.tool-left .tool-item{display:none}.toolbar.tool-right{right:20px;left:initial}.slider .slider-nav{width:25%}.slider .slider-content{width:75%}.slider .slider-nav a{padding:7px}.slider .grid-item{width:23%}.slider .slider-tp ul{margin-bottom:8px}.slider .slider-content{padding:0}.slider-container{padding-bottom:72px}:root{--itext-mobile-setting-width:220px;--draw-mobile-setting-width:220px}.setting-panel .itext-setting{width:var(--itext-mobile-setting-width);left:calc(50% - var(--itext-mobile-setting-width) / 2);top:-73px;padding:7px;border-radius:4px 4px 0 0}.setting-panel .itext-setting .itext-color,.setting-panel .draw-setting .draw-color{position:unset !important}.setting-panel .itext-setting .custom-huebee-class{position:absolute;top:-165px !important;left:0 !important}.setting-panel .draw-setting{width:var(--draw-mobile-setting-width);left:calc(50% - var(--draw-mobile-setting-width) / 2);top:-44px;padding:7px;border-radius:4px 4px 0 0}.setting-panel .draw-setting .custom-huebee-class{position:absolute;top:-165px !important;left:0 !important}.setting-panel.show+.slider-icon-btn{top:calc(0px - var(--slider-mobile-icon-btn-height) - 70px)}}