body{margin:0}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.tuner{width:100%}.title{padding:10px 0;display:flex;align-items:center}.title img{width:24px;height:24px}.title-name{font-size:17px;font-weight:800;color:#2f2f30;margin-left:9px}.tuner-head{background:#f8f8f8;padding:20px 20px 54px 20px}.switch-item{width:125px;background:#fff;border-radius:20px;border:1px solid #e2e2e2;display:flex;align-items:center}.item{width:64px;background:#fff;border:none;border-radius:14px}.active,.item{height:26px;line-height:26px;font-size:10px;text-align:center}.active{background:#ffecf4;border:1px solid #fb4995;border-radius:14px;width:62px}.tone{padding:0 13px;margin-top:55px}.tone-box{background:#fff;border-radius:11px;height:102px;box-shadow:0 3px 6px 0 rgba(0,0,0,.1);flex-direction:column;position:relative;overflow:hidden}.tone-box,.tone-item{display:flex;justify-content:space-around;align-items:center}.tone-item{width:100%}.lowActive,.tone-box-name{font-size:20px;font-weight:700}.lowActive{color:#fc8484}.CActive{color:#81e3cc}.CActive,.tone-C{font-size:60px;font-weight:700}.tone-status{width:100%;display:flex;justify-content:space-around;align-items:center;position:absolute;bottom:-7px}.unstatus{background:#fff}.inappropriate,.unstatus{width:15px;height:15px;transform:rotate(45deg)}.inappropriate{background:#fc8484}.appropriate{width:15px;height:15px;background:#81e3cc;transform:rotate(45deg)}.Tuning{padding:45px 0;display:flex;justify-content:center;align-items:center}.Tuning-box{width:100%;display:flex;justify-content:space-around}.Tuning-left,.Tuning-right{height:100%;margin-top:60px}.Tuning-item{width:48px;height:48px;border:1px solid #d2d2d2;border-radius:50%;color:#181818}.keyActive,.Tuning-item{text-align:center;line-height:50px;font-size:22px;font-weight:700;margin-bottom:60px}.keyActive{width:50px;height:50px;background:linear-gradient(222deg,#ffe0b7,#fb4995 89%);border-radius:50%;border:none;color:#fff}.Yukri-content{width:160px;height:324px;position:relative}.number-list{display:flex;justify-content:center;align-items:center;margin-top:7px}.Yukri-number{font-size:12px;font-weight:700;color:#a5a5a5;margin:0 10px}.Yukrinumberactive{font-size:17px;font-weight:700;color:#181818}.Yukri-bg{width:100%;height:100%}.Yukri-phtot{display:flex;position:absolute;bottom:-4px;left:10px}.Yukri-list{width:100%;height:100%;position:relative}.Yukri-G{width:27px;height:141px;position:absolute;bottom:4px;left:17px}.Yukri-C{left:15px}.Yukri-C,.Yukri-E{width:42px;height:252px;position:absolute;bottom:4px}.Yukri-E{left:82px}.Yukri-A{width:27px;height:141px;position:absolute;bottom:4px;left:96px}.guitar-item{width:48px;height:48px;border:1px solid #d2d2d2;border-radius:50%;color:#181818}.guitar-item,.keyActive2{text-align:center;line-height:50px;font-size:22px;font-weight:700;margin-bottom:25px}.keyActive2{width:50px;height:50px;background:linear-gradient(222deg,#ffe0b7,#fb4995 89%);border-radius:50%;border:none;color:#fff}.guitar-left,.guitar-right{height:100%;margin-top:45px}.guitar-phtot{display:flex;position:absolute;bottom:-4px;left:10px}.guitar-E{width:27px;height:122px}.guitar-A,.guitar-E{position:absolute;bottom:4px;left:15px}.guitar-A{width:32px;height:196px}.guitar-D{left:15px}.guitar-D,.guitar-G{width:48px;height:266px;position:absolute;bottom:4px}.guitar-G{left:78px}.guitar-B{width:32px;height:196px;left:95px}.guitar-B,.guitar-E2{position:absolute;bottom:4px}.guitar-E2{width:27px;height:122px;left:99px}.guitar-number{font-size:12px;font-weight:700;color:#a5a5a5;margin:0 5px}.guitarnumberactive{font-size:17px;font-weight:700;color:#181818}.bg_black{width:100%;height:100%;position:fixed;background:rgba(0,0,0,.7);left:0;top:0;z-index:200;display:flex;justify-content:center;align-items:center}.explain-box{padding:0 20px;width:100%}.explain-content{background:#fff;border-radius:10px;padding:20px}.explain-tip{font-size:17px;color:#181818;margin-bottom:20px}.explain-btn,.explain-tip{font-weight:800;text-align:center}.explain-btn{height:44px;background:linear-gradient(226deg,#ffe0b7 3%,#fb4995 81%);border-radius:22px;font-size:16px;color:#fff!important;line-height:46px;margin-top:20px}.close-icon_box{display:flex;justify-content:center;align-items:center}.close-icon{width:32px;height:32px;border-radius:50%;margin-top:20px}.content{font-size:15px;font-weight:400;text-align:center;color:#181818}.tuning-view{width:100%;height:100px;background-image:linear-gradient(90deg,transparent 9px,#ccc),linear-gradient(180deg,transparent 9px,#ccc);background-size:10px 10px;background-repeat:repeat;position:relative}.tuning-view__true{background-image:linear-gradient(90deg,transparent 9px,#81e3cc),linear-gradient(180deg,transparent 9px,#81e3cc)}.tuning-view__false{background-image:linear-gradient(90deg,transparent 9px,#ccc),linear-gradient(180deg,transparent 9px,#ccc)}.tuning-center{left:calc(50% - 1px);background:green}.tuning-center,.tuning-current{position:absolute;top:0;height:100px;width:2px}.tuning-current{left:19px;z-index:20;//background:#fc5f9a}.tuning-view-value{margin-top:10px;position:relative}.tuning-view-value-item{position:absolute;top:0;left:0}