.note-bar{position:absolute;z-index:10;top:0;width:100%;height:100%;touch-action:none;cursor:default;user-select:none;pointer-events:none}.note-bar>canvas{width:100%;height:100%}.keyboard-c{position:absolute;bottom:0;left:0;width:100%;padding:0 0 15px}.keyboard{position:absolute;bottom:15px;height:200px;touch-action:none;cursor:default;overflow:visible;transition:transform .2s;-webkit-user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0);transform-origin:0 100%;font-size:12px;box-shadow:0 0 10px rgba(0,0,0,.267)}.keyboard>.black{position:absolute;height:125px;margin:0 0 0 26px;width:0;bottom:75px;z-index:4;pointer-events:none}.keyboard>.black>div{position:absolute;left:0;top:0;width:27px;height:100%;background-color:#444;border:1px solid rgba(0,0,0,.5333333333);border-radius:3px;color:#fff;text-align:center}.keyboard>.black>div.act{background-color:#c783b2;border-color:rgba(0,0,0,.533)}.keyboard>.white{height:200px;white-space:nowrap;bottom:0;margin:0 0 0 1px;z-index:2;pointer-events:none}.keyboard>.white>div{position:relative;display:inline-block;width:41px;height:100%;background-color:#fff;border:1px solid rgba(0,0,0,.2666666667);margin:0 0 0 -1px;box-sizing:border-box;border-radius:4px;text-align:center;color:#000}.keyboard>.white>div.act{background-color:rgba(173,60,138,.6)}.keyboard>.white>div>div.pn{position:absolute;width:100%;bottom:10px;font-size:12px}.keyboard>.white>div>div.pn>div.sub,.keyboard>.white>div>div.pn>div.sup{display:inline-block;margin:0 2px}.keyboard>.white>div>div.pn>div.sub{transform:scale(.9) translateY(5px)}.keyboard>.white>div>div.pn>div.sup{transform:scale(.9) translateY(-5px)}.keyboard.hidenum>div>div>span{display:none}.keyboard.hidepname>div.white>div>div{display:none}.keyboard>.center-c{position:absolute;bottom:35px;left:925px;font-size:12px;color:#a43983;z-index:5;pointer-events:none}.old-entry{min-height:20px}.old-entry>div{padding:.6em 0 0;margin:0 20px;text-align:right;font-size:13px}.visit-ct>.logo-ct{position:relative;margin:0}.visit-ct>.logo-ct>.pn-logo{position:absolute;top:0;left:18px;width:40px;max-width:30%;overflow:hidden;border-radius:110px;border:2px solid #fff;box-shadow:0 0 10px rgba(0,0,0,.2);margin:0 auto}.visit-ct>.logo-ct>.pn-logo:before{padding-top:100%;content:"";display:block}.visit-ct>.logo-ct>.pn-logo>img{position:absolute;top:0;max-height:100%}.visit-ct>.logo-ct>.pn-info{margin:0 0 0 78px}.visit-ct>.logo-ct>.pn-info>h1{padding:4px 0 0;margin:0;font-size:16px;font-weight:700}.visit-ct>.logo-ct>.pn-info>p{margin:0;word-break:break-all}.visit-ct>.tips-wrapper{padding:50px 0 30px;margin:0 20px;font-size:17px;min-height:2em}.visit-ct>.tips-wrapper>div{text-align:center;transition:opacity .3s}.visit-ct>.tips-wrapper>div.hidden{opacity:0}.visit-ct>.tips-wrapper>div b{margin:0 6px;font-size:17px;color:#444}.visit-ct>.doc-div{margin:0 15px;padding:10px 0 0}.visit-ct>.doc-div p{margin:8px 0}.xw-input{margin:0 2px;border:1px solid rgba(0,0,0,.3333333333);border-radius:3px;padding:4px 8px}.pc-keyboard-save{padding:0}.pc-keyboard-save>.t-save-tips{margin:1em 0}.pc-keyboard-save>.title{margin:0 0 1em}.pc-keyboard-save .save-list{position:relative;padding:0 0 1em}.pc-keyboard-save .save-list .save-list-item{display:inline-block;margin:3px;transition:all .6s}.pc-keyboard-save .save-list .save-list-item>div.cont{position:relative;padding:10px 12px;width:280px;border-radius:3px;box-shadow:0 0 6px rgba(0,0,0,.267);background-color:#fff}.pc-keyboard-save .save-list .save-list-item>div.cont>.name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 50px 5px 0}.pc-keyboard-save .save-list .save-list-item>div.cont>.time{font-size:12px}.pc-keyboard-save .save-list .save-list-item>div.cont>.btns{position:absolute;bottom:5px;right:3px;text-align:center}.pc-keyboard-save .save-list .save-list-item>div.cont>.btns>.xw-button{font-size:12px}.pc-keyboard-save .save-list-enter-from{opacity:0;transform:translateY(-100px) scale(.5)}.pc-keyboard-save .save-list-leave-to{opacity:0;transform:scale(.2) translateY(-100px) rotate(30deg)}.pc-keyboard-save .save-list-leave-active{position:absolute}.faq-item{background:#fff;padding:16px 0 8px;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,.267);margin:0 0 1em}.faq-item>header{position:relative;font-size:16px;padding:0 10px 0 20px;color:#000}.faq-item>header:before{position:absolute;top:8px;left:0;content:"";display:inline-block;width:14px;height:9px;background:#2479c1}.faq-item>p{margin:5px 10px 5px 20px}.pc-kbd-ct{padding:30px 5px 15px;user-select:none;width:1272px;margin:0 auto}.pc-kbd-ct>.pc-kbd-row{display:block;white-space:nowrap;height:52px;margin:0 0 5px}.pc-kbd-ct>.pc-kbd-row>div{display:inline-block;width:50px;height:50px;margin:0 5px 0 0;background:#fff;border:1px solid rgba(0,0,0,.3019607843);border-radius:4px;line-height:1;vertical-align:top}.pc-kbd-ct>.pc-kbd-row>div.disable{background:#7d97ad;border:1px solid rgba(0,0,0,.2)}.pc-kbd-ct>.pc-kbd-row>div.d{background-color:rgba(199,39,76,.5)}.pc-kbd-ct>.pc-kbd-row>div.selec{animation:shanshan 1s infinite}.pc-kbd-ct>.pc-kbd-row>div>.key-name{padding:5px 8px 0;pointer-events:none}.pc-kbd-ct>.pc-kbd-row>div>.key-rep{font-size:12px;padding:6px 0 0;color:rgba(16,10,255,.8);font-weight:700;text-align:center;pointer-events:none}.pc-kbd-set{width:1272px;margin:0 auto;padding:0 0 50px}.pc-kbd-set>.row-title{margin:0 10px .5em;font-size:16px;font-weight:700}.pc-kbd-set>.row{margin:0 10px}.pc-kbd-set>.row.faq-item{margin:0 10px 1em}.pc-kbd-set .xw-button{font-size:14px;margin:0 .25em}.pc-kbd-set .select-key{display:inline-block;width:50px;height:50px;margin:0 5px 0 0;background:rgba(0,0,0,.7333333333);border:1px solid rgba(0,0,0,.3019607843);border-radius:4px;line-height:1;vertical-align:top}.pc-kbd-set .select-key>.key-name{padding:5px 8px 0;pointer-events:none;font-weight:700;color:#fff}.pc-kbd-set .edit-container{margin:5px 0 0;border:1px solid rgba(0,0,0,.2);padding:3px 16px 20px;background:#fff}.pc-kbd-set .edit-container>.btn-group{margin:10px 0 0}@keyframes shanshan{0%{border:1px solid rgba(16,10,255,.8);color:rgba(16,10,255,.8);background-color:rgba(16,10,255,.2)}49%{border:1px solid rgba(16,10,255,.8);color:rgba(16,10,255,.8);background-color:rgba(16,10,255,.2)}50%{border:1px solid rgba(0,0,0,.3019607843);color:#000}to{border:1px solid rgba(0,0,0,.3019607843);color:#000}}.panel-midifile{margin:0 1em;font-size:14px}.panel-midifile>.player-wp{max-width:500px;padding:2em 0;margin:0 auto}.panel-midifile>.player-wp>.file-upload{position:relative;min-height:120px;border:1px dashed rgba(0,0,0,.2666666667);border-radius:5px;background:rgba(245,246,247,.6666666667);cursor:pointer;user-select:none}.panel-midifile>.player-wp>.file-upload:hover{background-color:rgba(242,243,244,.667)}.panel-midifile>.player-wp>.file-upload:active{background-color:rgba(239,240,241,.667)}.panel-midifile>.player-wp>.file-upload>.tips-text{position:absolute;z-index:1;font-size:14px;top:50%;left:0;width:100%;text-align:center;color:rgba(0,0,0,.533);font-weight:700;text-shadow:0 0 2px rgba(255,255,255,.5333333333);transform:translateY(-50%)}.panel-midifile>.player-wp>.file-upload>.tips-text>.tips{font-weight:400}.panel-midifile>.player-wp>.player-control{padding:1em 0}.panel-midifile>.player-wp>.player-control>.play-btns{text-align:center}.panel-midifile>.player-wp>.player-control>.play-info{text-align:center;padding:.8em 0}.panel-midifile>.player-wp>.player-control>.meta-info>div{margin:0 0 0 50px;word-break:break-all}.panel-midifile>.player-wp>.player-control>.meta-info>div>.name{font-size:12px;color:rgba(0,0,0,.467);margin:0 0 0 -50px}.panel-midifile>.player-wp>.player-control>.meta-info>div>.value{margin:0 0 0 1em;font-size:14px;color:rgba(0,0,0,.733)}.record{position:relative;z-index:1;font-size:14px;min-height:100%}.record>.record-loading{font-size:18px}.record>.record-loading .recording-tips{margin:1em 0}.record>.record-loading .record-time{margin:.5em 0;font-size:40px;line-height:2;user-select:none}.record>.record-card{margin:0 auto;padding:4em 0 1em;width:100%;max-width:1000px;min-height:200px}.record>.record-card>.bottons{margin:0 1em;text-align:center}.record>.record-card>.bottons>button{font-size:16px;transition:opacity .3s}.record>.record-card>.record-tips{font-size:16px;text-align:center;margin:1em 0}.record>.record-card>.record-list{margin:2em 1em 0}.record>.record-card>.record-list>.tips{margin:.5em}.record>.record-card>.record-list>.record-item{font-size:16px;margin:.4em 0;line-height:2;background:#fff;padding:.5em 1em}.record>.record-card>.record-list>.record-item>.index{font-weight:700}.setting-panel{position:relative}.setting-panel>.slide-menu{position:relative;top:4px;z-index:10;margin:0;padding:0 15px;line-height:32px;overflow-y:hidden;font-size:13px;white-space:nowrap;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.2)}.setting-panel>.slide-menu>a{display:inline-block;padding:0 12px;cursor:pointer;margin:0 1px;background-color:rgba(255,255,255,.333);transition:background-color .3s;text-decoration:none;color:rgba(0,0,0,.667);font-size:14px}.setting-panel>.slide-menu>a:last-child{border-right:none}.setting-panel>.slide-menu>a>.midi-title{margin:0 6px 0 0}.setting-panel>.slide-menu>a>.btn{padding:3px 5px;background:rgba(0,0,0,.1333333333);border-radius:2px;margin:0 2px}.setting-panel>.slide-menu>a>.btn:hover{background:rgba(0,0,0,.0666666667)}.setting-panel>.slide-menu>a.active{position:relative;background-color:rgba(1,102,189,.133);color:#0166bd;font-weight:700;border:1px solid rgba(1,102,189,.2);border-width:0 1px}.setting-panel>.slide-menu>a:focus,.setting-panel>.slide-menu>a:hover{outline:none;background-color:rgba(1,102,189,.133)}.setting-panel>.slide-menu>a>.iconfont{padding:0 3px 0 0}.setting-panel>.st-cont{position:absolute;top:36px;left:0;bottom:0;width:100%;overflow-y:auto}.piano{position:absolute;overflow:hidden;top:50px;left:0;right:0;background-image:url(../../assets/pianobg-a4068da3.jpg)}.piano>.loading{position:absolute;z-index:20;top:50%;left:50%;width:200px;background:#fff;padding:0 0 10px;box-shadow:0 0 5px rgba(0,0,0,.2);border-radius:5px;overflow:hidden;transform:translate(-50%,-50%)}.piano>.loading>.loading-status{position:relative;height:7em;font-size:13px}.piano>.loading>.loading-status .loading-icon{padding:3em 0 0}.piano>.loading>.text{padding:20px 0;font-size:15px;text-align:center}.piano>.loading>.loading-bar{display:block;height:2px;max-width:100%;background:rgba(1,102,189,.8509803922)}html,body,#app,#main{position:relative;width:100%;height:100%}.xw-footer{display:none}