.container-chordSelect{width:100%}.container-chordSelect .key-select{width:100%;text-align:center;padding:0 1rem;margin-top:20px;display:flex;justify-content:center;flex-wrap:nowrap}.container-chordSelect .key-select .square{width:100%}.container-chordSelect .key-select .square:after{content:"";display:block;padding-top:100%}.container-chordSelect .key-select .key-num{position:relative;background:transparent;max-width:170px;min-width:70px;min-height:70px;cursor:pointer;flex:1;transition:.3s ease}.container-chordSelect .key-select .key-num:before{content:"";display:block;position:absolute;left:50%;bottom:0;height:2px;width:80%;background:#ddd;z-index:1;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.container-chordSelect .key-select .key-num:last-of-type{margin-right:0}.container-chordSelect .key-select .key-num>span{position:absolute;display:inline-block;color:#666;top:50%;left:50%;font-size:40px;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.container-chordSelect .key-select .key-num .key-bar{opacity:0;position:absolute;left:20px;bottom:0;width:0;height:0;border:10px solid transparent;border-bottom-color:#ddd;transition:.3s ease}.container-chordSelect .key-select .key-num .key-bar.keybar-show{opacity:1}.container-chordSelect .select-notify{line-height:50px;color:#ddd;font-size:13px;text-align:center}.container-chordSelect .select-notify.noselect{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container-chordSelect .chord-count{width:100%;text-align:center}.container-chordSelect .chord-count>div{display:inline-block;text-align:center;width:15%;line-height:30px;font-size:13px;min-width:80px;max-width:200px;background:#fff;color:#aaa;margin-right:10px;border-radius:2px;cursor:pointer;transition:.3s ease}.container-chordSelect .chord-count>div:last-of-type{margin-right:0}.container-chordSelect .chord-count>div.active{background:#ddd;color:#666}.container-chordSelect .loading-box{opacity:0;margin-top:20px;width:100%;height:20px;text-align:center;transition:.3s ease}.container-chordSelect .loading-box.show{opacity:1;margin:20px 0}.container-chordSelect .loading-box .loading{height:100%}.container-chordDraw{padding-bottom:20px}.container-chordDraw .draw-info{opacity:0;line-height:0;font-size:15px;padding:0 20px;color:#aaa;text-align:center;transition:.3s ease}.container-chordDraw .draw-info.show{opacity:1;line-height:25px;margin-bottom:10px}.chord{text-align:center}.chord-svg{width:200px;height:220px}@media screen and (max-width:700px){.chord-svg{width:140px;height:155px}}@media screen and (max-width:320px){.chord-svg{width:120px;height:135px}}.chord-rect{width:100px;height:100px}.chord-grid,.chord-rect{fill:none;stroke:#666;stroke-width:2}.chord-blank-circle,.chord-forbidden{stroke:#666;stroke-width:1;fill:none}.chord-block-circle{fill:#333}.chord-barre{height:16px;fill:#333}.chord-barre-fret{fill:#333;font-size:14px;font-weight:700}.chord-string-key{fill:#333;font-size:10px;font-weight:700}.chord-name{fill:#333;font-size:20px;font-weight:700}@-webkit-keyframes chord-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes chord-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}