div.general-dication-piano{position:relative;width:90%;margin:25px auto 45px;height:180px;display:flex;flex-direction:row-reverse}div.general-dication-piano div.key{width:4.5372050817%;height:99%;background:#fff;border:1px solid #ccc;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #fff,inset 1px 0 0 #fff,inset -1px 0 0 #fff,0 4px 3px rgba(0,0,0,.7);border-radius:0 0 3px 3px;display:flex;align-items:center;flex-flow:column-reverse}div.general-dication-piano div.key.green{box-shadow:0 4px 3px rgba(0,0,0,.7);background:#56e675;border-bottom:1px solid #56e675;border-left:1px solid #56e675}div.general-dication-piano div.key.red{box-shadow:0 4px 3px rgba(0,0,0,.7);background:red;border-bottom:1px solid red;border-left:1px solid red}div.general-dication-piano div.key.black.green{background:linear-gradient(-20deg,#56e675,#56e675,#56e675);border-color:#89c27c #55a150 #094205 #798479;border-style:solid;border-width:1px 2px 7px;box-shadow:inset 0 -1px 2px hsla(0,0%,100%,.4),0 2px 3px rgba(0,0,0,.4);border-radius:0 0 2px 2px}div.general-dication-piano div.key.black.red{background:linear-gradient(-20deg,red,red,red);border-color:#a194a1 #965e60 #792d2d #9e6464;border-style:solid;border-width:1px 2px 7px;box-shadow:inset 0 -1px 2px hsla(0,0%,100%,.4),0 2px 3px rgba(0,0,0,.4);border-radius:0 0 2px 2px}div.general-dication-piano div.key div.note-name{position:absolute;bottom:0;color:#000;font-size:1.1em;direction:ltr}div.general-dication-piano div.key.black{position:absolute;width:2.7%;height:67%;top:0;z-index:1;background:linear-gradient(-20deg,#333,#000,#333);border-color:#666 #222 #111 #555;border-style:solid;border-width:1px 2px 7px;box-shadow:inset 0 -1px 2px hsla(0,0%,100%,.4),0 2px 3px rgba(0,0,0,.4);border-radius:0 0 2px 2px}div.general-dication-piano div.key.black div.note-name{top:-1.5em}div.general-dication-piano div.key:nth-child(2){left:3.1%}div.general-dication-piano div.key:nth-child(4){left:7.7%}div.general-dication-piano div.key:nth-child(7){left:16.5%}div.general-dication-piano div.key:nth-child(9){left:21.1%}div.general-dication-piano div.key:nth-child(11){left:25.8%}div.general-dication-piano div.key:nth-child(14){left:34.8%}div.general-dication-piano div.key:nth-child(16){left:39.3%}div.general-dication-piano div.key:nth-child(19){left:48.6%}div.general-dication-piano div.key:nth-child(21){left:53%}div.general-dication-piano div.key:nth-child(23){left:57.6%}div.general-dication-piano div.key:nth-child(26){left:66.6%}div.general-dication-piano div.key:nth-child(28){left:71.2%}div.general-dication-piano div.key:nth-child(31){left:80.2%}div.general-dication-piano div.key:nth-child(33){left:84.7%}div.general-dication-piano div.key:nth-child(35){left:89.3%}div.general-dication-piano div.key:nth-child(13){position:relative}div.general-dication-piano div.key:nth-child(13):after{content:"C";position:absolute;bottom:-30px;left:31%;font-weight:700}div.small-piano{position:relative;width:549px;margin:25px auto 45px;height:226px;display:flex;flex-direction:row-reverse}@media screen and (max-width:800px){div.small-piano{width:95%}}div.small-piano div.key{width:12.5%;height:99%;background:#fff;border:1px solid #ccc;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #fff,inset 1px 0 0 #fff,inset -1px 0 0 #fff,0 4px 3px rgba(0,0,0,.7);border-radius:0 0 3px 3px;display:flex;align-items:center;flex-flow:column-reverse}div.small-piano div.key div.note-name{position:absolute;bottom:0;color:#000;font-size:1.1em;direction:ltr}div.small-piano div.key.black{position:absolute;width:8.3%;height:67%;top:0;z-index:1;background:linear-gradient(-20deg,#333,#000,#333);border-color:#666 #222 #111 #555;border-style:solid;border-width:1px 2px 7px;box-shadow:inset 0 -1px 2px hsla(0,0%,100%,.4),0 2px 3px rgba(0,0,0,.4);border-radius:0 0 2px 2px}div.small-piano div.key.black div.note-name{top:-1.5em}div.small-piano div.key:nth-child(2){left:8.2%}div.small-piano div.key:nth-child(4){left:21%}div.small-piano div.key:nth-child(7){left:45.5%}div.small-piano div.key:nth-child(9){left:58%}div.small-piano div.key:nth-child(11){left:70.6%}div.general-dictation #audio,div.general-dictation #paper{display:none}div.general-dictation div.points{margin-top:30px}div.general-dictation div.list div.lessons{display:flex;margin-top:50px;margin-bottom:40px}@media(max-width:900px){div.general-dictation div.list div.lessons{flex-wrap:wrap}}div.general-dictation div.list ul{padding-right:15px;margin:0}div.general-dictation div.list ul li{list-style-type:none;text-align:right;color:#1090d8;margin:14px 0;cursor:pointer;min-width:223px}div.general-dictation div.list div.lesson{box-shadow:0 0 5px #aaa;border-radius:13px}div.general-dictation div.list div.lesson h3{text-align:center;background:#2a426e;color:#fff;padding:8px;border-top-left-radius:13px;border-top-right-radius:13px;font-size:20px}div.general-dictation div.list div.lesson p{padding:10px 20px;box-sizing:border-box;text-align:justify;line-height:2;margin-bottom:1.5rem}div.general-dictation div.list div.lesson h4{padding-right:15px;font-weight:700}div.general-dictation #ins-wrap{width:100%;margin:0 auto;padding-bottom:20px;overflow-x:auto;overflow-y:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}