*{user-select:none;}
body{padding: 0; margin: 0; overflow: hidden; font-family: 'Microsoft YaHei UI'}
.key_group{width: 13.49%;height: 100%;display: inline-flex;position: relative;}
.key_group:last-child div:last-child{border-right: none;}
.key_group:first-child{width:3.80%; }
/*.key_group:last-child{width:1.8868%; }*/
.key_group:last-child{width:1.75%; }

.key_black_1{left: 9.5%;}
.key_black_2{left: 24%;}
.key_black_3{left: 52.2%;}
.key_black_4{left: 66.6%;}
.key_black_5{left: 81%;}
.key_black_6{left: 29%;width: 36%;}

.skin_img_button{position: absolute;bottom: 0;height: 42px;width: 180px;opacity: 0.9;cursor: pointer;transition: .3s;}
.skin_img_button:hover{transform: scale(1.05, 1.05); }
.skin_img_container{padding-left: 12px;height: 100%;width: 50%;position: relative}

.footage_content section{width: 100%;padding:20px; display: flex; box-sizing: border-box;flex-wrap: wrap;}
.footage_content section div{position: relative; margin-right: 15px; border-top-left-radius: 5px; border-bottom-right-radius: 5px; cursor: pointer; background-size: cover; border: 2px solid #1b1b1b;width: 80px; height: 80px;margin-bottom: 20px;}
.footage_content section div:hover{border-color: #d20000;}
.footage_content section p{width: 100%; margin: 0; position: absolute; bottom: 0;text-align: center; background: rgba(0, 0 , 0, 0.7);color: white;font-size: 13px;padding: 2px 0; border-bottom-right-radius: 3px;}
.footage_content section div div{width: 18px;height: 18px;background: black;border-radius: 50%;position: relative;top: -10px;right: -68px;color: white;text-align: center;font-size: 32px;line-height: 13px;border: 3px solid #d20000;}
.footage_content section div div:hover{background: #3e3e3e; transition: .3s;}
.footage_active{border-color: #d20000 !important; box-shadow: 0 0 10px 0px red;}
.footage_button_div{position: absolute;top: -33px;right: 0;}

.diao_panel{display: inline-flex;list-style: none;margin: 10px 0 4px 0;padding: 0;}
.diao_panel li{margin-right: 8px; cursor: pointer; opacity: 0.65; transition: .1s;}
.diao_panel li:hover{ opacity: 1; transform: scale(1.05, 1.05);}
.diao_panel li img{display: block; height: 50px; border-top-left-radius: 5px; }
.diao_panel_active{ opacity: 1 !important;}
.midi_label_span{display: inline-block;margin: 0 0 4px 0;color: #f4b422; width: 100%; font-family: '华文隶书';}

.center_content{display: flex; margin-top: 6px;}
.center_content section:first-child{flex: 1.5; display: flex; align-items: center;}
.center_content section h4{font-size: 80px;margin-left: auto; padding-right: 50px;font-family: '华文隶书';}
.center_content section:last-child{flex: 1.5; display: flex;align-items: center;}

.train_option_div{position: absolute;width: 45px;right: -20px; opacity: 0;}
.train_option_div_show_ani { animation: train_btn_show forwards .3s;}
.train_option_div_hide_ani { animation: train_btn_hide .3s;}
.train_op_button{padding: 10px 4px 10px 4px; font-size: 12px; }
.train_op_button_top{border-top-left-radius: 5px;}
.train_op_button_btm{border-top: none; border-bottom-right-radius: 5px;}

.press_correct{position: absolute; opacity:0; pointer-events: none;}
.press_correct_ani{animation: press_correct 3s;}
.div_tip{color: white;padding: 8px 20px 8px 20px;border-width: 1px; border-style:  solid ;border-radius: 2px;box-shadow: 0 2px 7px 1px #0009;position: absolute;top: 12px;left: 100px; opacity: 0; pointer-events: none;}
.div_tip_ani{animation: tip_show 3s;}
@-webkit-keyframes press_correct
{
  from {opacity: 1;}
  to {opacity: 0; transform:translateY(-20px);}
}
@-webkit-keyframes tip_show
{
  0%   {opacity: 0; }
  25%  {opacity: 1;transform: translateY(20px)}
  75%  {opacity: 1;transform: translateY(20px)}
  100% {opacity: 0;transform: translateY(0)}
}
@-webkit-keyframes train_btn_show {
  from {opacity: 0;}
  to {opacity: 1; right: 0;}
}
@-webkit-keyframes train_btn_hide {
  from {opacity: 1; right: 0}
  to {opacity: 0; right: -20px;}
}