@charset "UTF-8";[v-cloak]{display:none}*{margin:0;padding:0}html{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}a{text-decoration:none;color:#333}body{max-width:1200px;margin:0 auto;color:#fff;font-size:18px;font-family:Arial,Microsoft Yahei;background-color:#222}ul li{list-style:none}button,img,input,select,textarea{border:0;outline:none}input[type=range]{outline:none;-webkit-appearance:none;background:-webkit-linear-gradient(#61bd12,#61bd12) no-repeat,#fff;background-size:0 100%;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;background:#61bd12;border-radius:50%;border:1px solid #fff}.bg{position:fixed;top:0;left:0;z-index:-1;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(10px);filter:blur(10px);-webkit-transform:scale(1.2);transform:scale(1.2)}.help{position:absolute;top:2%;right:2%}.help .icon{position:absolute;top:0;right:0;width:20px;height:20px;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTUwMDQ3MjQ2ODYwIiBjbGFzcz0iaWNvbiIgc3R5bGU9ImZpbGw6I2ZmZiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEwODMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyLjAwMjU1OCAxMTEuMzUyMDg3YzEwNy4wMTk0MDkgMCAyMDcuNjIzNzExIDQxLjY3ODIzOCAyODMuMjg0OTI1IDExNy4zNjI5ODggNzUuNjgwNjU3IDc1LjY3NDUxNyAxMTcuMzYwOTQxIDE3Ni4yODA4NjYgMTE3LjM2MDk0MSAyODMuMjg2OTcxIDAgMTA3LjAyMjQ3OS00MS42NzgyMzggMjA3LjYyNTc1OC0xMTcuMzYyOTg4IDI4My4yODY5NzEtNzUuNjczNDkzIDc1LjY3OTYzMy0xNzYuMjc4ODE5IDExNy4zNTg4OTUtMjgzLjI4MTg1NSAxMTcuMzU4ODk1LTEwNy4wMjU1NDkgMC0yMDcuNjMwODc0LTQxLjY3ODIzOC0yODMuMjkyMDg4LTExNy4zNjA5NDEtNzUuNjc5NjMzLTc1LjY3NjU2My0xMTcuMzU4ODk1LTE3Ni4yODI5MTItMTE3LjM1ODg5NS0yODMuMjg0OTI1IDAtMTA3LjAxODM4NiA0MS42NzgyMzgtMjA3LjYyNDczNCAxMTcuMzYwOTQxLTI4My4yODkwMThDMzA0LjM5MDEwNCAxNTMuMDMxMzQ5IDQwNC45OTg0OTkgMTExLjM1MjA4NyA1MTIuMDAyNTU4IDExMS4zNTIwODdNNTEyLjAwMjU1OCA2NC4yODAwMDJjLTExOS41OTY4NjUgMC0yMzIuMDE0MjE0IDQ2LjU4Mjk0NS0zMTYuNTc2MTQ1IDEzMS4xNDg5NjktODQuNTYxOTMxIDg0LjU0MTQ2NS0xMzEuMTQ2OTIyIDE5Ni45NzUxODctMTMxLjE0NjkyMiAzMTYuNTczMDc1IDAgMTE5LjU5NDgxOSA0Ni41ODQ5OTEgMjMyLjAxMzE5MSAxMzEuMTQ2OTIyIDMxNi41NzAwMDYgODQuNTYxOTMxIDg0LjU4NzUxNCAxOTYuOTk3NyAxMzEuMTQ2OTIyIDMxNi41NzYxNDUgMTMxLjE0NjkyMiAxMTkuNTc1Mzc2IDAgMjMyLjAxMDEyMS00Ni41ODE5MjEgMzE2LjU2Nzk1OS0xMzEuMTQ2OTIyIDg0LjU2OTA5NC04NC41NDA0NDIgMTMxLjE0ODk2OS0xOTYuOTc1MTg3IDEzMS4xNDg5NjktMzE2LjU3MDAwNiAwLTExOS41OTc4ODktNDYuNTgwODk4LTIzMi4wMTMxOTEtMTMxLjE0ODk2OS0zMTYuNTczMDc1Qzc0NC4wMTE2NTYgMTEwLjg0MzUwNCA2MzEuNTk3Mzc3IDY0LjI4MDAwMiA1MTIuMDAyNTU4IDY0LjI4MDAwMkw1MTIuMDAyNTU4IDY0LjI4MDAwMnoiIHAtaWQ9IjEwODQiPjwvcGF0aD48cGF0aCBkPSJNNTExLjk5OTQ4OCA2OTYuMTc1NjczIiBwLWlkPSIxMDg1Ij48L3BhdGg+PHBhdGggZD0iTTYzNS41MDg0NTMgMjkyLjU4MjY4NWMtMjkuNjI3Nzg0LTI2LjQwOTQ4Ni02OC4yODUyMjMtMzkuNjM0Njk2LTExNS45OTU4NTEtMzkuNjM0Njk2LTU0LjEzMDg1MSAwLTk2Ljg5NTg0MSAxNS44OTUwMTUtMTI4LjMzMDc4NCA0Ny43MDY1MzUtMzEuNDI4ODAzIDMxLjgxMzU2Ni00Ny4xMzY1NTMgNzUuMTU1Ny00Ny4xMzY1NTMgMTMwLjA0ODkxNWwwLjA2MDM3NSAwYzAuODI5OTAxIDE3LjIyODM4MyAxNS4wNTc5NTEgMzAuOTQxNzEgMzIuNDkyMDE4IDMwLjk0MTcxczMxLjY2MzE0LTEzLjcxMzMyNiAzMi40OTQwNjUtMzAuOTQxNzFsMC4wMjE0ODkgMGMwLTAuNDEzNDE2IDAuMDA3MTYzLTAuODE5NjY4IDAuMDA5MjEtMS4yMzEwMzcgMC4wMDEwMjMtMC4xMTk3MjcgMC4wMDkyMS0wLjIzODQzIDAuMDA5MjEtMC4zNjAyMDQgMC0wLjA2ODU2Mi0wLjAwNTExNy0wLjEzODE0Ni0wLjAwNTExNy0wLjIwNjcwOCAwLjUxODgxNi04MS4zODg2NTggMzYuMjYzOTI1LTEyMi4xMDI5NDIgMTA3LjMxNDEyMS0xMjIuMTAyOTQyIDI3LjQ0MzAyNiAwIDUwLjA4MTYyOSA3Ljk2ODQ4NSA2Ny45MDU1NzYgMjMuODY1NTQ3czI2Ljc0NjE1NCAzNi4yODU0MTQgMjYuNzQ2MTU0IDYxLjE2NDAzNWMwIDI4Ljk2ODc3NS0xNi41MzA0ODggNTguMzQ3ODk2LTQ5LjYzODUzNyA4OC4xMDI1N2wtMjQuNjI2ODg3IDIxLjkzNTU5MmMtMjQuMTE1MjM0IDIxLjUzMzQzMi0zOS41OTA2OTQgNDAuMjY4MTIyLTQ2LjM3MjE0NCA1Ni4xNjQxNjEtNi43ODE0NSAxNS45MTU0ODEtMTAuMTY4NTk0IDQxLjU2NDY1MS0xMC4xNjg1OTQgNzYuOTU3NzQzbDAuMDA4MTg2IDAuMDgwODQxYy0wLjA4MDg0MSAwLjkwMDUwOS0wLjEyODkzNyAxLjgxMDIyOS0wLjEyODkzNyAyLjczMTIwNCAwIDE2LjczMzEwMyAxMy41NjM5MjQgMzAuMjkzOTU3IDMwLjI5Mzk1NyAzMC4yOTM5NTcgMTUuOTYzNTc3IDAgMjkuMDMxMTk3LTEyLjM0NTE2NiAzMC4xOTk4MTMtMjguMDA5OTM3bDAuMDczNjc4LTAuMDg5MDI4IDAuMzM0NjIxLTExLjE1ODEzMWMwLTM2LjQyNzY1NCAxNy4yOTE4MjgtNjguNzMwMzYxIDUxLjkyMDUxLTk2Ljk1NzIzOSA1Ny45ODg3MTYtNDcuNDMyMjg5IDg2Ljk2MjYwNy05Mi44NTA3MTEgODYuOTYyNjA3LTEzNi4xOTM4NjlDNjc5Ljk1MjY4OCAzNTMuMzY2MDUgNjY1LjE0MDMzMSAzMTkuMDEwNTkxIDYzNS41MDg0NTMgMjkyLjU4MjY4NXoiIHAtaWQ9IjEwODYiPjwvcGF0aD48cGF0aCBkPSJNNTExLjk5OTQ4OCA3NDMuMDk3MzMybS00MC45MzIyNDggMGE0MCA0MCAwIDEgMCA4MS44NjQ0OTYgMCA0MCA0MCAwIDEgMC04MS44NjQ0OTYgMFoiIHAtaWQ9IjEwODciPjwvcGF0aD48L3N2Zz4=) no-repeat 50%;background-size:100%;cursor:pointer}.help .popop{opacity:0;visibility:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:fixed;top:0;bottom:0;right:0;left:0;margin:auto;z-index:1000;background-color:rgba(0,0,0,.8);-webkit-transition:all .3s;transition:all .3s}.help .popop.show{opacity:1;visibility:visible}.help .popop.show .box{-webkit-transition:all .4s cubic-bezier(.43,2.18,.65,.5);transition:all .4s cubic-bezier(.43,2.18,.65,.5);-webkit-transform:scale(1);transform:scale(1)}.help .popop .box{position:relative;width:80%;max-width:420px;margin:auto;padding:30px 0;border-radius:10px;background-color:#fff;-webkit-transform:scale(.2);transform:scale(.2)}.help .popop .box .close{position:absolute;top:6px;right:10px;color:#333;cursor:pointer}.help .popop .box h2{padding-bottom:20px;font-size:20px;color:#333;text-align:center}.help .popop .box .content{padding:0 6%}.help .popop .box .content li{padding-bottom:8px;line-height:1.5;font-size:14px;color:#666}.help .popop .box .content li span{font-weight:700}.title{padding:6% 0;font-size:30px;text-align:center;text-shadow:1px 1px 8px rgba(0,0,0,.3)}.music-box ul{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;width:96%;margin:0 auto}.music-box li{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;position:relative;margin:0 1px;color:#000;font-size:14px;cursor:pointer}.music-box li span{display:block;height:200px;border-radius:4px;background-color:#fff;-webkit-box-shadow:0 3px 5px rgba(0,0,0,.3),inset 0 -3px 5px rgba(0,0,0,.1);box-shadow:0 3px 5px rgba(0,0,0,.3),inset 0 -3px 5px rgba(0,0,0,.1)}.music-box li.cur span{background-color:#f1f1f1;-webkit-box-shadow:inset 0 -3px 5px rgba(0,0,0,.1);box-shadow:inset 0 -3px 5px rgba(0,0,0,.1)}.music-box li i{position:absolute;bottom:10px;width:100%;text-align:center;font-style:normal}.music-box li i.high:before,.music-box li i.low:before{content:"\B7";position:absolute;left:0;width:100%}.music-box li i.low:before{bottom:-10px}.music-box li i.high:before{top:-10px}.chord{display:none}.form{width:96%;margin:20px auto}.form-grp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:10px 0}.form-grp label{min-width:56px;padding-right:5px;text-shadow:1px 1px 8px rgba(0,0,0,.3)}.form-grp .type-list{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-basis:400px;-ms-flex-preferred-size:400px;flex-basis:400px;font-size:0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;overflow:hidden}.form-grp .type{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding:0;border-right:1px solid #eee;text-shadow:none;cursor:pointer}.form-grp .type:last-child{border:0}.form-grp .type input{display:none}.form-grp .type input:checked+span{color:#fff;background-color:#61bd12}.form-grp .type span{display:block;line-height:30px;color:#333;text-align:center;font-size:14px;background-color:#fff;-webkit-transition:all .3s ease;transition:all .3s ease}.form-grp .type span:hover{background-color:#eee}.form-grp.align-top{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}#music-text{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;height:100px;padding:10px;border:0;border-radius:4px;font-size:14px;outline:none;background-color:#fff}.music-name{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.music-name .btn{position:relative;display:inline-block;margin:0 8px 4px 0;border-radius:4px;color:#333;line-height:30px;font-size:14px;background-color:#fff;-webkit-transition:all .3s ease;transition:all .3s ease;cursor:pointer}.music-name .btn:hover{background-color:#eee}.music-name .btn.cur{color:#61bd12}.music-name .btn span{display:block;padding:0 10px}.music-name .btn .close{position:absolute;top:-5px;right:-5px;width:10px;height:10px;border-radius:100%;background-color:#fff;text-align:center;line-height:10px;font-size:8px;color:#333;-webkit-box-shadow:0 0 5px #333;box-shadow:0 0 5px #333}#speed{width:120px;height:4px;border-radius:2px}#speed-value{padding:0 10px}#speed,#speed-value,.unit{vertical-align:middle;text-shadow:1px 1px 8px rgba(0,0,0,.3)}@media screen and (max-width:414px){.music-box li span{height:30vw}}
/*# sourceMappingURL=main.css.map*/