#appcanvas{font-family:Segoe UI,Avenir,Helvetica,Arial,sans-serif,微軟正黑體;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#e5e5e5;width:100%;height:80vh;display:flex;align-items:center;justify-content:center}*{box-sizing:border-box;margin:0;padding:0}.cv__wrap{width:100%;height:100%;font-weight:700;position:relative;overflow:hidden;text-align:right}.cv__wrap.is-collapse .top__panel__wrap{transform:translateY(-80px)}.cv__wrap.is-collapse .bot__panel__wrap{transform:translate(-50%,120px)}.cv__wrap #canvas{position:absolute;top:0;left:0}.cv__wrap .cursur__pointer{position:absolute;border-radius:50%;pointer-events:none}.cv__wrap .top__panel__wrap{height:80px;background-color:#fff;text-align:center;position:relative;transition:all .5s;min-width:510px}.cv__wrap .top__panel__wrap .action{margin-right:36px;display:inline-flex;height:100%;cursor:pointer;transition:all .3s;color:#000;text-decoration:none}.cv__wrap .top__panel__wrap .action i{font-size:36px;line-height:80px}.cv__wrap .top__panel__wrap .action .text{font-size:20px;margin-left:10px;line-height:80px}.cv__wrap .top__panel__wrap .action.is-disable{opacity:.5;cursor:not-allowed}.cv__wrap .top__panel__wrap .action.is-disable:hover{transform:none}.cv__wrap .top__panel__wrap .action:hover{transform:translateY(-5px)}.cv__wrap .top__panel__wrap .action .filterList{position:absolute;list-style:none;top:70px;background-color:#d3d3d3;padding:20px 16px;text-align:left;color:#333;transition:all .5s;border-radius:10px;line-height:2;word-wrap:nowrap}.cv__wrap .top__panel__wrap .action .filterList:after{content:"";position:absolute;width:0;height:0;top:-19px;left:calc(50% - 10px);border-bottom:10px solid #d3d3d3;border-right:10px solid transparent;border-left:10px solid transparent;border-top:10px solid transparent}.cv__wrap .top__panel__wrap .action .filterList li{transition:all .3s}.cv__wrap .top__panel__wrap .action .filterList li:hover{transform:translateY(-3px)}.cv__wrap .top__panel__wrap .top__panel__bar{position:absolute;top:calc(100% - 28px);left:calc(50% - 28px);background-color:inherit;color:#000;width:56px;height:56px;border-radius:50%;cursor:pointer}.cv__wrap .top__panel__wrap .top__panel__bar i{position:absolute;top:60%;left:50%;left:calc(50% - 5px);font-size:10px}.cv__wrap .top__panel__wrap .top__panel__bar i:hover{transform:scale(1.1)}.cv__wrap .bot__panel__wrap{position:absolute;height:80px;width:-moz-fit-content;width:fit-content;background-color:#fff;border-radius:40px;bottom:40px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;transition:all .5s;padding:0 30px;min-width:803px}.cv__wrap .bot__panel__wrap .action{line-height:80px;font-size:20px}.cv__wrap .bot__panel__wrap .action+.action{margin-left:30px}.cv__wrap .bot__panel__wrap .action .label{display:inline-block}.cv__wrap .bot__panel__wrap .action i.fas{font-size:36px}.cv__wrap .bot__panel__wrap .action:nth-child(3) .label{margin-right:16px}.cv__wrap .bot__panel__wrap .action:nth-child(3) .label+input[type=text]{background-color:#e8e8e8;width:74px;height:48px;border-radius:40px;border:none;margin-right:8px;outline:none;text-align:center;font-size:24px}.cv__wrap .bot__panel__wrap .action:nth-child(4){display:flex}.cv__wrap .bot__panel__wrap .action:nth-child(4) .label{margin-right:16px}.cv__wrap .bot__panel__wrap .action:nth-child(4) .color__options{display:flex;align-items:center}.cv__wrap .bot__panel__wrap .action:nth-child(4) .color__options .option{display:inline-block;width:48px;height:48px;border-radius:50%}.cv__wrap .bot__panel__wrap .action:nth-child(4) .color__options .option+.option{margin-left:8px}.cv__wrap .bot__panel__wrap .action:nth-child(4) .color__options .option:first-child{border:1px solid #000;background-color:#fff}.cv__wrap .bot__panel__wrap .action:nth-child(4) .color__options .option:nth-child(2){background-color:#000}.cv__wrap .bot__panel__wrap .action:nth-child(4) .color__options .option:nth-child(3){background-color:#9bffcd}.cv__wrap .bot__panel__wrap .action:nth-child(4) .color__options .option:nth-child(4){background-color:#0c9}.cv__wrap .bot__panel__wrap .action:nth-child(4) .color__options .option:nth-child(5){background-color:#01936f}.cv__wrap .bot__panel__wrap .action:nth-child(4) .color__options input[type=color]{background:none;border:none;border-radius:50%}.cv__wrap .bot__panel__wrap .bot__panel__bar{position:absolute;top:-28px;left:calc(50% - 28px);background-color:#fff;color:#000;width:56px;height:56px;border-radius:50%;z-index:-1;cursor:pointer}.cv__wrap .bot__panel__wrap .bot__panel__bar i{position:absolute;top:20%;left:calc(50% - 5px);font-size:10px}