@import url("https://fonts.googleapis.com/css?family=Patua+One|Bree+Serif&display=swap");@font-face{font-family:Musisync-KVLZ;src:url("/assets/meta/b2b82201/course/img/Musisync-KVLZ.ttf")}@font-face{font-family:NotoMusic;src:url("/assets/meta/357964ed/course/img/NotoMusic-Regular.ttf")}h2 i{color:#8cc63f;margin:0 10px 0 0}.mc-bg{background:#fafafa;margin:100px 0 0;min-height:calc(100vh - 158px)}.C-box{margin:0 auto;max-width:1060px;padding:50px;position:relative;z-index:0}.GC{min-height:calc(100vh - 367px)}.test{display:flex;margin:30px 0 0}.test .A1{margin:0 100px 0 0;width:370px}.test .A1 h2{margin:0 0 50px}.mic{font-size:25px;margin:0 0 15px}.mic .A{display:inline-block;height:50px;margin:0 0 15px 0;vertical-align:bottom;width:120px}.mic .A.on{background:url("/assets/meta/f1446653/course/img/mp_on.svg") 0 0 no-repeat}.mic .A.off{background:url("/assets/meta/2a6b7da2/course/img/mp_off.svg") 0 0 no-repeat}.mic b{display:block}.mic.pop{background:#fff;padding:30px;position:fixed;width:310px;z-index:1}.mic.pop .startTune{margin:15px 0}#dialogTitle{font-size:21px}.micH{padding:10px}.stB{background:#eee;margin:15px 0 30px;padding:30px 30px 50px;position:relative}.stB .info{color:#000;display:flex;font-size:17px;text-align:justify}.neck{padding:0 30px 0 0}.string{border:10px solid #555;border-width:0 4px 0 20px;display:inline-block;height:200px;margin:40px 0 0 70px;width:calc(100% - 70px)}.string .A{height:4px;width:100%}.string .A.on{background:#ef7e68}.string .B{height:calc((100% - 16px)/3)}.lmds{background:#666;border-radius:50%;color:#fff;font-size:36px;height:50px;position:absolute;top:50%;left:-85px;text-align:center;transform:translateY(-50%);width:50px}.string label{background:#555;cursor:pointer;display:block;height:100%;margin:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.string label input{position:absolute;opacity:0;cursor:pointer}.string .name{color:#555;font-size:16px;position:absolute}.string .active .lmds{animation:ready .5s linear infinite;-webkit-animation:ready .5s linear infinite;background:#ef7e68}.string .active{background:#ef7e68}.ok .lmds,.string .ok,.string .ok:hover .lmds{background:#8cc63f}@keyframes ready{0%{background:#ef7e68}40%{background:#ef7e68}50%{background:#c15540}90%{background:#c15540}}@-webkit-keyframes ready{0%{background:#ef7e68}40%{background:#ef7e68}50%{background:#c15540}90%{background:#c15540}}.smM .close{top:10px;right:12px}.smM .modal-header{border:0;height:10px}.smM .modal-body{background:#fff;padding:15px 15px 30px;text-align:center}.modal.smM h3{font-size:21px;line-height:1.3}.smM .modal-footer{padding:0;text-align:center;border:0}.smM .modal-footer a{background:#ccc;color:#fff;cursor:pointer;display:inline-block;font-size:17px;font-weight:600;padding:15px 10px;width:50%}.smM .modal-footer .goT{background:#39b54a}.smM .modal-footer .nextT{background:#71b5ff}.smM .modal-footer .one{background:#39b54a;width:100%}.intro{line-height:1.3;text-align:justify}.PB{margin:0 0 20px calc(100% - 200px);width:200px}.PB .progress,.songT .progress{background:#cae7f3;border:5px solid #fff;box-shadow:inset 0 3px 10px #437a9a80}.PB .progress-bar,.songT .progress-bar{background:#70b5ff}.songT .progress{margin:0}.topic{background:#fff;border:2px dashed #8cc63f;border-radius:5px;font-size:25px;line-height:1.3;margin:0 0 30px;padding:30px;position:relative;text-align:justify}.tmh .topic{margin:0 0 15px;padding:15px 30px}.PBS{color:#8cc63f;font:600 25px arial;position:absolute;right:8px;bottom:2px}.PBS b{color:#71b5ff}.topic.song{background:#def1f5;border:3px solid #fff;border-radius:50px 50px 5px 50px;box-shadow:0 8px 0 #dff1f5;color:#333;padding:20px 50px;font-size:30px;text-shadow:0 2px #fff}.topic.G{background:#8cc63f;border:6px solid #fff;border-radius:50px 50px 0;box-shadow:0 5px 10px #84b1bb4d;font-size:30px;font-weight:600;color:#fff;margin:0 0 50px;padding:20px 180px 20px 85px;position:relative;text-shadow:3px 3px 2px #607840}.topic.G.SCS{margin:0 0 15px}.topic.G b{font-size:4rem;letter-spacing:1px;position:absolute;top:50%;right:25px;text-shadow:none;transform:translateY(-50%)}.topic.G b:after{-webkit-text-stroke:10px #3778a6;content:attr(data-text);display:block;position:absolute;top:50%;transform:translateY(-50%);z-index:-1}.song-t{margin:0;position:absolute;top:50%;left:20px;transform:translateY(-50%);width:55px}.topic.t2{margin:30px 0}.goW{font-size:36px;font-weight:600;padding:100px 0 50px;text-align:center}.demo{text-align:center}.demo.VC{margin:30px 0 0}.demo.Xm{min-height:500px}.demo h2{margin:50px 0 20px}.demo.c1 h2{margin:30px 0 40px}.GMB{padding:20px 0 0;text-align:right}.GMB a{display:inline-block;padding:0 0 0 10px;width:85px}.GMB a:hover img{fill:red;opacity:.9}.GMB a img{width:100%}.play3{background:url("/assets/meta/97c93e7b/course/img/G_play3.svg") -115px 0 no-repeat;cursor:pointer;display:block;height:111px;margin:0 auto;width:115px}.play3:hover{background:url("/assets/meta/97c93e7b/course/img/G_play3.svg") -230px 0 no-repeat}.play3:active{background:url("/assets/meta/97c93e7b/course/img/G_play3.svg") 0 0 no-repeat}.play3s{background:url("/assets/meta/6d1b68e1/course/img/G_play3s.svg") -60px 0 no-repeat;border-radius:5px;cursor:pointer;display:block;height:60px;margin:0 auto;width:60px}.play3s:hover{background:url("/assets/meta/6d1b68e1/course/img/G_play3s.svg") -120px 0 no-repeat}.play3s:active{background:url("/assets/meta/6d1b68e1/course/img/G_play3s.svg") 0 0 no-repeat}.done{animation:done .2s linear;-webkit-animation:done .2s linear;display:block;max-width:600px;margin:0 auto;padding:20px 0 0;transform:scale(1);width:100%}@keyframes done{0%{transform:scale(0)}100%{transform:scale(1)}}@-webkit-keyframes done{0%{transform:scale(0)}100%{transform:scale(1)}}.sheet{font-family:'Patua One',arial}.Gr{display:grid;display:-ms-grid}.G2{grid-template-columns:repeat(2,1fr);-ms-grid-template-columns:repeat(2,1fr)}.G3{grid-template-columns:repeat(3,1fr);-ms-grid-template-columns:repeat(3,1fr)}.G4{grid-template-columns:repeat(4,1fr);-ms-grid-template-columns:repeat(4,1fr)}.G5{grid-template-columns:repeat(5,1fr);-ms-grid-template-columns:repeat(5,1fr)}.G6{grid-template-columns:repeat(6,1fr);-ms-grid-template-columns:repeat(6,1fr)}.G7{grid-template-columns:repeat(7,1fr);-ms-grid-template-columns:repeat(7,1fr)}.G8{grid-template-columns:repeat(8,1fr);-ms-grid-template-columns:repeat(8,1fr)}.G24442{grid-template-columns:1fr 2fr 2fr 2fr 1fr;-ms-grid-template-columns:1fr 2fr 2fr 2fr 1fr}.sheet .bar{border-right:5px solid #000;padding:0 20px;position:relative}.sheet .db-V-M{border-right:12px double}.bar.on{animation:here 3s forwards;background:#dfeecb00}@keyframes here{0%{background:#dfeecb00}5%{background:#dfeecb00}10%{background:#dfeecb}100%{background:#dfeecb}}.sheet .bar:first-child{border-left:5px solid #000}.sheet .bar.rp{border-left:4px solid;margin:0 0 0 4px}.sheet .bar.rp:first-child{border-left:12px double;margin:0}.bar.rp-e,.bar.rp-ese{border-right:12px double}.ese{display:block;height:100%;position:absolute;width:100%}.ese:before,.ese:after,.bar.rp:before,.bar.rp:after,.bar.rp-e:before,.bar.rp-e:after,.bar.rp-es:before,.bar.rp-es:after,.bar.rp-ese:before,.bar.rp-ese:after{background:#000;border-radius:50%;content:"";height:6px;position:absolute;width:6px}.bar.rp:before,.bar.rp-es:before,.bar.rp-ese:before{left:4px;top:35%}.bar.rp:after,.bar.rp-es:after,.bar.rp-ese:after{left:4px;bottom:35%}.bar.rp-e:before,.ese:before{right:4px;top:35%}.bar.rp-e:after,.ese:after{right:4px;bottom:35%}.sheet .bar.rp-0s{border-right:4px solid}.DC,.DS,.fine{display:block;height:12px;position:absolute;top:-15px;right:3px}.DC{background:url("/assets/meta/b01fa875/course/img/note.svg") -24px -85px no-repeat;width:33px}.DS{background:url("/assets/meta/b01fa875/course/img/note.svg") -57px -85px no-repeat;width:33px}.fine{background:url("/assets/meta/b01fa875/course/img/note.svg") -24px -73px no-repeat;width:39px}.coda,.coda-S,.segno,.segno-S,.tr{display:block;height:24px;position:absolute;right:-8px;top:-25px;transform:scale(.7);width:24px}.coda.t,.segno.t{margin:0 10px;position:relative;display:inline-block;top:initial;right:initial;transform:scale(1)}.coda,.coda-S{background:url("/assets/meta/b01fa875/course/img/note.svg") 0 -72px no-repeat}.coda-S{right:initial;left:-8px}.segno,.segno-S{background:url("/assets/meta/b01fa875/course/img/note.svg") -96px -72px no-repeat}.segno-S{right:initial;left:-8px}.G-gap{grid-column-gap:5%;-ms-grid-column-gap:5%}.sheet .bar b{position:relative;text-align:center;transition:all .3s ease}.Gr .red{color:#ef7e68;transform:scale(1)}.Gr .blue{color:#71b5ff;transform:scale(1.3)}.Gr .ok{color:#8cc63f;transform:scale(1)}.Gr .red i:before,.Gr .red i:after,.red .high32,.Gr .red.dot-half:after,.red .bass8-n8,.red .bass16-n8,.red .bass32-n8,.red .bass8-n16,.red .bass16-n16,.red .bass32-n16{background:#d85648}.Gr .ok i:before,.Gr .ok i:after,.ok .high32,.Gr .ok.dot-half:after,.ok .bass8-n8,.ok .bass16-n8,.ok .bass32-n8,.ok .bass8-n16,.ok .bass16-n16,.ok .bass32-n16{background:#8cc63f}.Gr .blue i:before,.Gr .blue i:after,.blue .high32,.Gr .blue.dot-half:after,.blue .bass8-n8,.blue .bass16-n8,.blue .bass32-n8,.blue .bass8-n16,.blue .bass16-n16,.blue .bass32-n16{background:#71b5ff}.bar.F1{font-size:60px}.high8:before,.high16:before,.high16:after,.high32,.high32:before,.high32:after,.dot-half:after,.range .high8:before,.bass8:before,.bass8-n8,.bass16-n8,.bass16-n8:before,.bass32-n8,.bass32-n8:before,.bass32-n8:after,.bass8-n16,.bass16-n16,.bass16-n16:before,.bass32-n16,.bass32-n16:before,.bass32-n16:after{background:#000;border-radius:50%;content:"";display:block;height:7px;position:absolute;left:50%;transform:translate(-50%,-50%);width:7px}.high8:before,.high16:before,.high32{top:15px}.high32:before{top:-5px}.high16:after{top:7px}.high32:after{top:-14px}.bass8:before{bottom:3px}.note8,.note16{display:block;border-top:4px solid;position:absolute;left:0;bottom:10px;width:100%}.note16:before{border-top:4px solid;content:"";display:block;position:absolute;bottom:-7px;width:100%}.dot-half:after{height:10px;top:50%;transform:translate(-50%,-50%);width:10px}.bass8-n8,.bass16-n8,.bass32-n8{bottom:-3px}.bass16-n8:before,.bass32-n8:before{bottom:-12px}.bass32-n8:after{bottom:-21px}.bass8-n16,.bass16-n16,.bass32-n16{bottom:-9px}.bass16-n16:before,.bass32-n16:before{bottom:-12px}.bass32-n16:after,.bass32-n16:after{bottom:-21px}.flat{font-family:Musisync-KVLZ;font-size:60px;font-style:normal;position:absolute;top:-35px;left:-12px}.MC2{display:flex}.c1 .MC2{align-items:center}.MC2.btm{margin:0 0 50px}.MLs .sheet{margin:0 0 30px}.sheet.S{line-height:60px}.MLs .sheet.T1{height:180px;margin:0}.MC2 .A{width:calc(100% - 80px)}.MC2 .B{margin:12px 0 0 20px;width:80px}.c1 .MC2 .B{margin:0 0 0 20px}.CTab{border:1px solid;border-width:1px 0;position:relative}.CTab b{min-height:85px}.CTab:before{border:1px solid;border-width:1px 0;content:"";height:33.33333%;position:absolute;top:50%;transform:translateY(-50%);width:100%}.Dn:before{border-style:solid;border-width:0 11px 22px 11px;border-color:transparent transparent #000 transparent;content:"";position:absolute;left:50%;transform:translateX(-50%);height:0;width:0}.Dn.dn41:before{top:0}.Dn:after{background:#000;content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:7px}.Dn.d41:after{top:22px}.Dn.blue:before{border-color:transparent transparent #71b5ff transparent}.Dn.blue:after{background:#71b5ff}.Dn.ok:before{border-color:transparent transparent #8cc63f transparent}.Dn.ok:after{background:#8cc63f}.Dn.red:before{border-color:transparent transparent #ef7e68 transparent}.Dn.red:after{background:#ef7e68}.MLs.mg{padding:0 0 10px}.CCd{margin:15px 0 20px}.CCd .tit{font:600 30px 'Skranji',cursive;line-height:1;margin:0 0 5px;text-align:left}.sub{color:#000;font-size:18px;font-style:normal;font-weight:600;margin:0}.CMode{background-image:repeating-linear-gradient(45deg,#efefef 25%,transparent 25%,transparent 75%,#efefef 75%,#efefef),repeating-linear-gradient(45deg,#efefef 25%,#fafafa 25%,#fafafa 75%,#efefef 75%,#efefef);background-position:0 0,8px 8px;background-size:16px 16px;display:flex}.CMode li{width:15.3846%}.CMode li div{background:#cdeca2;font-size:25px;padding:15px 0;width:50%}.CMode li b{display:block;margin:5px 0}.CMode .half{width:7.6923%}.CMode .half div{background:#c6e4f0;width:100%}.YN{display:flex;padding:30px 0 0}.YN .L{margin:30px 30px 30px 0}.YN .R{margin:30px 0 30px 30px}.YN .L,.YN .R{align-items:center;display:flex;height:200px;justify-content:center;position:relative;width:50%}.YN .Y,.YN .N{cursor:pointer;text-align:center;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.YN input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.YN .tit{color:#39b54a;font-size:50px;position:relative}.YN label i{background:#fff;border:15px solid #39b54a;border-radius:10px;color:#999;display:block;position:absolute;top:0;left:50%;right:0;bottom:0;transform:translateX(-50%);transition:all .4s;width:100%}.YN label i:hover{background:#f8f8f8}.YN input:checked ~ i{border-radius:50%;width:200px}.YN input:checked ~ .tit{opacity:0}.YN input:checked ~ .yes:before{animation:start .3s;border:solid 20px #39b54a;border-top:0;border-right:0;content:"";display:block;height:60px;position:absolute;top:45%;left:50%;transform:rotate(-45deg) translate(-50%,-50%);transform-origin:top left;width:100px}@keyframes start{0%{opacity:0;width:0;height:0}20%{opacity:1;width:0;height:60px}100%{width:100px}}.YN input:checked ~ .no{border:15px solid #ef7e68}.YN input:checked ~ .no:before,.YN input:checked ~ .no:after{animation:start2 .3s;border:solid 10px #ef7e68;content:"";display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}.YN input:checked ~ .no:before{transform:translate(-50%,-50%) rotate(45deg);width:120px}.YN input:checked ~ .no:after{transform:translate(-50%,-50%) rotate(135deg);width:120px}@keyframes start2{0%{opacity:0;width:0}20%{opacity:1;width:0}100%{width:120px}}.retry{display:none;font-size:21px;position:absolute;bottom:-50px}.retry a{color:#555}.retry a b{color:#ef7e68;font-size:30px;font-family:Musisync-KVLZ}.YN input:checked ~ .retry{display:block;width:100%}.hand{display:flex;align-items:center}.hand ul{font-size:25px;line-height:1.5;list-style:disc;margin:15px 0 15px 50px;text-align:left;width:calc(100% - 340px)}.hand li{margin:0 0 15px;text-align:justify}.hand img{margin:15px 30px 15px 10px;max-width:400px;width:100%}.hand .RH{max-width:280px}.hand b,.RbM,.LbM,.LF{--w:36px;background:#8cc63f;border-radius:50%;color:#fff;display:inline-block;font-family:arial;height:var(--w);line-height:var(--w);margin:0 5px;text-align:center;width:var(--w)}.hand .Lh,.LbM,.LF{background:#71b5ff}.hand .OS{background:#fff;box-shadow:inset 0 0 0 3px;color:#8cc63f}.hand .sqr{border-radius:7px}.ex{display:flex;margin:30px 0 0}.ex.CPy41{align-items:center;min-height:350px}.ex .p.A{width:500px}.ex .p.B{align-items:center;display:flex;margin:0 0 0 30px;width:calc(100% - 530px)}.ex .p.B p{text-align:justify;width:100%}.UTab{background:#eee;margin:30px 0 30px 100px;position:relative}.UTab.C{background:#4d4d4d;margin:30px 0 30px 20px;width:100%}.p.A .UTab.C{width:calc(100% - 20px)}.UTab:before{background:#ccc;border-radius:3px;content:"";display:inline-block;position:absolute;top:-10px;left:-20px;bottom:-10px;width:20px}.st li{border-right:5px solid #ddd;position:relative;height:60px}.st li:before{background:#ccc;content:"";display:block;position:absolute;top:50%;height:5px;transform:translateY(-50%);width:calc(100% + 5px)}.st.on li:before{background:#39b54a}.CPy41 li:before{background:#ddd}.CPy41 li{transition:unset}.CPy41 ul:nth-child(4) li:before{animation:CPy41-4 4s linear infinite}.CPy41 ul:nth-child(3) li:before{animation:CPy41-4 4s linear 1s infinite}.CPy41 ul:nth-child(2) li:before{animation:CPy41-4 4s linear 2s infinite}.CPy41 ul:nth-child(1) li:before{animation:CPy41-4 4s linear 3s infinite}@keyframes CPy41-4{0%{background:#ddd}0.001%{background:#39b54a}25%{background:#39b54a}25.001%{background:#ddd}}.X_i i{line-height:42px;position:absolute;top:calc(100% - 21px);animation:CPy41-i 4s linear infinite}@keyframes CPy41-i{0%{top:calc(100% - 21px)}24.999%{top:calc(100% - 21px)}25%{top:calc(66.666% - 21px)}49.999%{top:calc(66.666% - 21px)}50%{top:calc(33.333% - 21px)}74.999%{top:calc(33.333% - 21px)}75%{top:-21px}99.999%{top:-21px}100%{top:calc(100% - 21px)}}.st li b{background:#71b5ff;color:#fff;border-radius:50%;display:block;font-family:arial;font-size:36px;height:50px;line-height:50px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px}.st li .h8{line-height:60px}.st li .h8 i:before{background:#fff;top:10px}.st:first-child li,.st:last-child li{height:35px}.st:first-child li:before,.st:first-child li b{top:0}.st:last-child li:before,.st:last-child li b{top:100%}.st li .ok{background:#8cc63f;color:#fff}.st li .red{background:#ef7e68;color:#fff}.st li .os{background:#8cc63f;color:#fff;left:-60px}.STab{border-left:5px solid #0009}.STab ul{margin:0;width:56px}.STab li{border-right:1px solid #000;height:30px}.STab .s2{height:15px}.STab .st:first-child li,.STab .st:last-child li{height:1px}.st li:before{background:#ddd;height:5px;width:calc(100% + 5px)}.STab .st li b{background:#000;font-size:12px;height:16px;line-height:16px;text-align:center;width:16px}.STab .st li:before{background:#000;height:1px;width:100%}.X-mg{margin:50px 0 70px}.BPF:after,.X8F:after{border:1px solid;color:#000;content:"";position:absolute;left:50%;right:0;bottom:-20px}.BPF.L:after{border-width:0 0 3px 1px;left:50%;right:0}.BPF.R:after{border-width:0 1px 3px 0;left:0;right:50%}.BPF i{font-size:25px;position:absolute;left:50%;transform:translateX(-50%)}.BPF.c1 i{top:-13px}.BPF.c2 i{top:calc(33.333% - 13px)}.BPF.c3 i{top:calc(66.666% - 13px)}.BPF.c4 i{top:calc(100% - 12px)}.BPF.c1:after{top:0}.BPF.c2:after{top:33.333%}.BPF.c3:after{top:66.666%}.BPF.c4:after{top:100%}.Gr .BPF.ok i:before,.Gr .BPF.red i:before,.Gr .BPF.blue i:before{background:0}.Gr .BPF.blue{transform:scale(1)}.Gr .BPF.blue i{font-size:36px;z-index:1}.BPF.blue.c1 i{top:-18px}.BPF.blue.c2 i{top:calc(33.333% - 17px)}.BPF.blue.c3 i{top:calc(66.666% - 19px)}.BPF.blue.c4 i{top:calc(100% - 17px)}.ex .p.B p{animation:done .2s linear;-webkit-animation:done .2s linear;font-size:30px;transform:scale(1)}.replay .smile{color:#999;display:block;font-size:80px;margin:0 0 20px}.ex .p.B .replay{text-align:center;width:100%}.replay a{color:#365f4d;font-size:25px;font-weight:600}.replay a i{padding:0 0 0 15px}.PosC{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.FCD.PosC{position:fixed}.GEX{background:#0e1636c9;backdrop-filter:blur(5px);position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000}.GEX .txt{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.GEX h1{text-shadow:5px 5px #628b2d;font-size:60px;font-weight:600;letter-spacing:5px;margin:0 0 50px}.GEX .txt.score{background:url("/assets/meta/c35abce9/course/img/score-bg.svg") 0 0 no-repeat;background-size:cover;height:640px;position:relative;text-align:center;width:560px}.shield{margin:170px 0 0}.star{position:absolute;top:100px;left:50%;transform:translateX(-50%);width:410px}.star img{transition:all}.star .st{margin:45px 0 0;transform:rotate(-15deg) scale(0)}.star .nd{transform:scale(0)}.star .rd{margin:45px 0 0;transform:rotate(15deg) scale(0)}.star .st{animation:st .25s linear 0 1 forwards}.star .nd{animation:nd .25s linear .2s 1 forwards}.star .rd{animation:rd .25s linear .5s 1 forwards}@keyframes st{0%{transform:rotate(-15deg) scale(0)}40%{transform:rotate(-15deg) scale(1.2)}80%{transform:rotate(-15deg) scale(.8)}100%{transform:rotate(-15deg) scale(1)}}@keyframes nd{0%{transform:scale(0)}40%{transform:scale(1.2)}80%{transform:scale(.8)}100%{transform:scale(1)}}@keyframes rd{0%{transform:rotate(15deg) scale(0)}40%{transform:rotate(15deg) scale(1.2)}80%{transform:rotate(15deg) scale(.8)}100%{transform:rotate(15deg) scale(1)}}.scN{color:#ff0;font:600 12px arial;line-height:183px;position:absolute;top:230px;left:50%;transform:translateX(-50%);transition:all;animation:scN .1s linear forwards}.scN:after{-webkit-text-stroke-width:15px;-webkit-text-stroke-color:#0071bc;content:attr(data-text);color:#0071bc;position:absolute;left:50%;transform:translateX(-50%);z-index:-1}@keyframes scN{0%{font-size:12px;transform:scale(0) translateX(-50%)}100%{font-size:150px;transform:scale(1) translateX(-50%)}}.scM{margin:15px 0 0}.scM .A{width:85px}.scM .B{margin:0 0 0 15px;width:250px}.scM .C{margin:0 0 0 15px;width:85px}.FCD{font-size:200px;font-style:italic;font-family:arial;-webkit-text-fill-color:transparent;-webkit-text-stroke-width:3px;-webkit-text-stroke-color:#f1fb9f;text-shadow:8px 8px #71b5ff,20px 20px #c8f22f;z-index:1}.demo.WS{height:330px;overflow-y:scroll;position:relative;-ms-overflow-style:none;scrollbar-width:none}.demo.SCS{height:440px}.demo.WS::-webkit-scrollbar{display:none}.demo.WS:after{background:-moz-linear-gradient(top,rgba(250,250,250,0.5) 0%,rgba(250,250,250,1) 100%);background:-webkit-linear-gradient(top,rgba(250,250,250,0.5) 0%,rgba(250,250,250,1) 100%);background:linear-gradient(to bottom,rgba(250,250,250,0.5) 0%,rgba(250,250,250,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80fafafa',endColorstr='#fafafa',GradientType=0);content:"";display:block;height:100px;position:sticky;bottom:0;width:100%}.startTune,.popA{background:#8cc63f;border:3px solid #82a96f;border-radius:5px;color:#fff;cursor:pointer;display:block;font-size:23px;font-weight:600;margin:0 0 15px;padding:3px;text-align:center}.popA{margin:15px 0}.startTune:hover,.popA:hover{background:#39b54a;border:3px solid #365f4d;color:#fff}.songT{display:flex;align-items:center;margin:0 0 30px}.songT .p1{background:#def1f5;border:3px solid #fff;border-radius:30px 30px 5px 30px;box-shadow:0 5px 10px #84b1bb4d;box-shadow:0 8px 0 #dff1f5;color:#333;font-size:25px;padding:7px 30px;text-shadow:0 2px #fff;width:calc(100% - 100px)}.songT .p2{position:relative;text-align:right;width:100px}.p2 .PBS{font:600 38px arial;position:relative}.card{background:#fff;min-height:500px;padding:50px 250px;position:relative;text-align:center}.card:before{box-shadow:0 15px 10px #a9a9bb;content:"";max-width:300px;position:absolute;bottom:15px;left:10px;width:50%;top:80%;transform:rotate(-3deg);z-index:-1}.CdBG01,.CdBG02{position:absolute;width:200px}.CdBG01{left:0;bottom:0}.CdBG02{right:0;top:0}.Cdlogo{margin:0 0 20px;width:200px}.card h3{line-height:1.5;text-align:left}.DLine{font-size:16px;margin:15px 0;text-align:left}.DLine b{font-size:23px;padding:0 0 0 20px}.seal{display:flex;align-items:center}.seal li{width:50%}.seal .B{padding:0 0 0 30px}.card .tit{color:#2e365c;display:inline-block;font-size:18px;margin:15px 0;width:100%}.seal img{max-width:100%}.CdBGw{display:block;margin:30px auto;width:200px}.CDbtn{display:flex;width:100%;margin:30px 0;justify-content:center}.CDbtn a{background:#39b54a;border-radius:20px;color:#fff;font-size:21px;font-weight:600;margin:0 10px;padding:5px 30px}.tip img{display:block;margin:0 auto;max-width:300px}.MBox{align-items:center;display:flex;height:90px;justify-content:center;margin:-10px 0}.MBox .B{display:flex;align-items:center}.demo .MBox h2{margin:0 15px 0 50px}.MBox .play3{transform:scale(.8)}.tmh .MBox{margin:0 0 -40px 0}.tmh .MBox .play3{transform:scale(.6)}.tmh .GMB{padding:0}.chp{display:grid;grid-template-columns:1fr 1fr;grid-gap:30px;align-items:center;font-size:25px;margin:30px 0;text-align:justify}.chp li{align-items:center;display:grid}.chp.B4 li{grid-template-columns:200px 1fr}.chp img{width:100%}.drill{font-size:45px;margin:0 0 30px}.drill span{background:#365f4d;border-radius:15px;color:#fff;display:inline-block;font-size:16px;font-weight:600;margin:0 15px 0 0;padding:2px 10px;vertical-align:middle}.drill b{display:inline-block;vertical-align:middle}.drill .on{color:#8cc63f}.drill i{color:#8cc63f;display:inline-block;font-size:25px;padding:0 10px;vertical-align:middle}.rpQA{grid-column-gap:50px;grid-template-columns:1fr 200px;-ms-grid-template-columns:1fr 200px}.rpQA .A{grid-row:1/2}.rpQA .B{grid-row:1/3}.rpQA textarea{font:600 50px arial;max-height:150px;padding:50px;width:100%}.rpKB{align-items:center;grid-gap:5px;text-align:center}.rpKB a{background:#535570;border-radius:4px;box-shadow:inset -1px 5px 10px #8083a6,inset -2px -2px 10px #232538;color:#ccc;display:block;font:600 30px arial;line-height:60px}.rpKB a:hover{color:#fff}.rpB{background:#8cc63f;box-shadow:inset 0 3px #c9ed6e;border-radius:10px;border:3px solid;color:#365f4d;display:block;font:600 21px arial;margin:15px auto;padding:10px 15px;text-align:center;text-shadow:0 -3px 0 #c9ed6e;width:180px}.rpB:hover{box-shadow:inset 0 -2px #c9ed6e;text-shadow:0 2px 0 #c9ed6e}.rpQA .step{color:#666;font:609 30px arial;margin:0 0 10px;text-align:center}.step b{background:#43435c;border-radius:4px;box-shadow:inset 2px 2px 10px #212029;display:inline-block;color:#c8f22f;padding:0 15px}.rpQA textarea{background:#2c2c32;border-radius:10px;color:#c8f22f;font:600 50px arial;max-height:150px;padding:50px;resize:none;text-transform:uppercase;width:100%}.rpQA textarea::-webkit-input-placeholder{color:#bbb}.rpQA textarea::-moz-placeholder{color:#bbb}.rpQA textarea::-ms-input-placeholder{color:#bbb}.AEff{pointer-events:none;position:fixed;top:0;left:0;right:0;bottom:0}.RA{height:300px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px}.RA .L{position:absolute;clip:rect(0,300px,300px,150px)}.RA .R{position:absolute;clip:rect(0,150px,300px,0)}.RA .L b,.RA .R b{width:300px;height:300px;border-radius:100%;position:absolute;border:30px solid #5cb16e}.RA .L b{clip:rect(0,150px,300px,0);-webkit-animation:rotate-left .6s forwards linear}.RA .R b{clip:rect(0,300px,300px,150px);-webkit-animation:rotate-right .6s forwards linear}@-webkit-keyframes rotate-left{0%{-webkit-transform:rotate(0)}50%{-webkit-transform:rotate(180deg)}100%{-webkit-transform:rotate(180deg)}}@-webkit-keyframes rotate-right{0%{-webkit-transform:rotate(0)}50%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(180deg)}}.brp{border:2px solid;border-width:2px 0 0 3px;display:inline-block;height:20px;margin:0 5px;padding:0 15px 0 10px;position:relative}.brp i{background:#fff;color:#333;font:600 18px arial;padding:0 5px;position:absolute;top:-10px}.Chord{min-height:25px}.cRw{position:relative}.cRw .brp{width:calc(100% - 10px)}.mk{font-family:'NotoMusic'}.nex{display:grid;grid-template-columns:1fr 1fr;grid-gap:50px;margin:10px 0 0}.nex img{display:block;margin:10px auto;width:200px}@media screen and (max-width:1300px){.mc-bg{margin:70px 0 0;min-height:calc(100vh - 128px)}}@media screen and (max-width:991px){.mc-bg{margin:70px 0 0;min-height:calc(100vh - 128px)}.GC{min-height:calc(100vh - 337px)}.bar.F1{font-size:50px}.dot-half:after{height:8px;width:8px}.GMB a{width:75px}.MC2 .B{margin:5px 0 0 20px}.CdBG01,.CdBG02{width:20vw}.card{padding:50px calc(20vw + 20px)}.CTab b{min-height:71px}.Dn:after{width:5px}}@media screen and (max-width:768px){.C-box{padding:50px 30px}.bar.F1{font-size:40px}.dot-half:after{height:6px;width:6px}.note8,.note16{border-top:3px solid;bottom:7px}.note16:before{border-top:3px solid;bottom:-5px}.goW{font-size:25px}.YN .L{margin:30px 15px 30px 0}.YN .R{margin:30px 0 30px 15px}.stB{padding:50px 50px 70px}.hand{flex-direction:column}.hand img{margin:15px auto}.hand ul{width:calc(100% - 50px)}.ex{align-items:center;flex-direction:column;margin:50px 0 0}.ex .p.A{width:100%}.ex .p.B{margin:30px 0 0;width:100%}.MC2{flex-direction:column}.MC2 .B{margin:0;width:100%}.play3s{border-radius:50%;transform:scale(.8)}.songT{flex-direction:column}.songT .p1{font-size:20px;order:2;padding:7px 20px;width:100%}.songT .p2{margin:0 0 15px calc(100% - 180px);order:1;width:180px}.topic.song{padding:20px 30px;font-size:25px}.demo.WS{height:280px}.topic.G{font-size:25px;padding:20px 20px 20px 90px}.CdBG01,.CdBG02{transform:rotate(90deg);width:100px}.CdBG01{left:40px;bottom:unset;top:-40px}.CdBG02{top:unset;right:40px;bottom:-40px}.card{padding:120px 30px}.MBox{flex-direction:column}.tmh .MBox{height:auto;margin:0}.MBox .A{order:2}.Xm .MBox .B{padding:10px 0}.demo .MBox h2{margin:0 15px}.tmh .MBox .play3{margin:0 -20px}.chp{grid-template-columns:1fr}.test{flex-direction:column}.test .A1{width:100%}.rpQA{grid-template-columns:1fr;-ms-grid-template-columns:1fr}.rpQA .step{margin:10px 0}.rpQA .B{grid-row:2/3}.rpQA .C{grid-row:3/4}}@media screen and (max-width:480px){h2{font-size:21px}.C-box{padding:30px 15px}.PB{margin:0 0 20px 0;width:100%}.p2 .PBS{font-size:25px}.topic{font-size:23px;margin:0 0 20px;padding:15px 50px 15px 15px}.sheet .bar{border-right:3px solid #000;padding:0 10px}.bar.F1{font-size:30px}.sheet .bar:first-child{border-left:3px solid #000}.note8,.note16{border-top:2px solid;bottom:4px}.note16:before{border-top:2px solid;bottom:-4px}.high8:before,.high16:before,.high16:after,.dot-half:after,.range .high8:before,.bass8:before{height:5px;width:5px}.high8:before{top:5px}.bass8:before{bottom:-1px}.goW span{display:block}.GMB{padding:50px 10px 0;text-align:center}.GMB a{width:65px}.GMB a:first-child{padding:0;width:55px}.done{margin:30px auto}.YN{padding:0}.YN .L{margin:30px 10px 30px 0}.YN .R{margin:30px 0 30px 10px}.YN label i{border:10px solid #39b54a}.YN .tit{font-size:36px}.YN input:checked ~ .no{border:10px solid #ef7e68}.YN .L,.YN .R{height:calc(50vw - 25px);width:calc(50% - 10px)}.YN input:checked ~ i{width:100%}.YN input:checked ~ .no:before,.YN input:checked ~ .no:after{border:solid 7px #ef7e68}.YN input:checked ~ .no:before,.YN input:checked ~ .no:after{width:28vw}.YN input:checked ~ .yes:before{border-width:0 0 15px 15px;height:15vw;width:26vw}.mic{font-size:21px}.mic .A{margin:0 15px 5px 0;width:100%}.stB .info{display:block}.neck{padding:0 30px 10px 0}.stB{margin:20px 0 0;padding:30px 30px 60px}.songT .p2{margin:0 0 15px;width:100%}.ex .p.B p{font-size:20px;margin:20px 0}.GEX .txt.score{background-size:100%;height:107.385vw;width:93.965vw}.shield{margin:27vw 0 0;width:55.1vw}.star{top:15.5vw;width:60vw}.star .st{margin:8vw 0 0;width:14.5vw}.star .nd{width:21.5vw}.star .rd{margin:8vw 0 0;width:14.5vw}.scN{font:600 14vw arial;top:35vw}.scN{font:600 0vw arial;line-height:183px;line-height:initial;top:37vw}@keyframes scN{0%{font-size:0vw;transform:scale(0) translateX(-50%)}100%{font-size:25vw;transform:scale(1) translateX(-50%)}}.scM .A,.scM .C{width:15vw}.scM .B{width:45vw}.scM .B,.scM .C{margin:0 0 0 10px}.scN:after{-webkit-text-stroke-width:10px}.topic.G{border-radius:20px;margin:0 0 30px;padding:10px 20px 10px 75px}.topic img{max-width:80%}.song-t{left:15px;width:45px}.topic.G b{display:block;font-size:3.5rem;position:relative;right:0;transform:translateY(0)}.demo.WS{height:360px}.demo.WS:after{height:50px}.card{padding:120px 15px}.CDbtn a{font-size:18px}.CdBGw{margin:10px auto;width:150px}.seal{flex-direction:column}.seal li{width:100%}.seal .B{padding:0}.CTab b{min-height:42px}.Dn:before{border-width:0 7px 12px 7px}.Dn.d41:after{top:11px}.Dn:after{width:4px}.BPF i{font-size:16px}.BPF:after{bottom:-12px}.BPF.c1 i{top:-8px}.BPF.c2 i{top:calc(33.333% - 8px)}.BPF.c3 i{top:calc(66.666% - 9px)}.BPF.c4 i{top:calc(100% - 8px)}.Gr .BPF.blue i{font-size:21px}.BPF.blue.c1 i{top:-11px}.BPF.blue.c2 i{top:calc(33.333% - 10px)}.BPF.blue.c3 i{top:calc(66.666% - 11px)}.BPF.blue.c4 i{top:calc(100% - 10px)}.ex{margin:30px 0}.ex .p.B{margin:0}.tmh .topic{font-size:21px;padding:15px 15px 15px 70px}.sheet .bar.rp{border-left:3px solid;margin:0 0 0 3px}.sheet .bar.rp:first-child{border-left:9px double}.sheet .bar.rp-0s{border-right:3px solid}.bar.rp:before,.bar.rp:after,.bar.rp-e:before,.bar.rp-e:after,.bar.rp-es:before,.bar.rp-es:after{height:3px;width:3px}.drill span{display:block;margin:0 auto;width:90px}.drill{font-size:30px}.drill i{font-size:16px;padding:0 5px}.nex{grid-template-columns:1fr;grid-gap:20px}}@media screen and (max-width:350px){.bar.F1{font-size:25px}.UTab{margin:10px 0 10px 80px}.st li .os{left:-55px}.demo.WS{height:300px}}@media only screen and (min-device-width:1024px) and (max-device-width:1366px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1){.demo.WS{height:440px}}@media only screen and (min-device-width:768px) and (max-device-width:1180px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1){.header,.footer{display:none}.mc-bg{margin:0;min-height:100vh}.GC{min-height:calc(100vh - 210px);//min-height:auto}.test{margin:0;padding:30px 0 0}.test .A1{margin:0 70px 0 0;width:380px}h2.topic.ls{margin:0 0 10px}.intro1{font-size:30px}.intro1 p b{line-height:1}.intro1.ip .G7{font-size:40px}.intro1.ip .tit{margin:0}.done{max-width:550px}}