html,
body{
  margin:0px;
  padding: 0px;
  background: #fbfbfb;

  padding-bottom: 40px;
}

div[class^='player_stage-only'] div{
  max-height: 100% !important;
  max-width: 100% !important;
}
div[class^='player_stage-only'] canvas[class^='stage_dragging'] {
 width: 0px !important;
 height: 0px !important;
}
div[class^='player_stage-only'] :not([class*="stage_stage-wrapper-overlay"])>[class^="stage_stage-bottom-wrapper"] {
 width: 100% !important;
 bottom: 0;
 top: initial;
 left: 0 !important;
 margin-left: 0 !important;
}
div[class^='player_stage-only'],
div[class^='player_stage-only'] [class^='stage_stage-wrapper'] [class^='stage_stage'],
div[class^='player_stage-only'] [class^='stage_stage'] canvas
{
  width: 100% !important; 
  height: 100% !important;
  margin-top: 0px;
}
#player-container{
 margin:0 auto;
 position: relative;
}
div[class^='stage-header_stage-header-wrapper']{
 background-color: #eee;
}
div[class^='stage_stage'],
div[class^='stage_green-flag-overlay-wrapper']{
  border-radius: 0 !important;
}
div[class^='player_stage-only'] canvas[class^='stage_dragging'] {
 width: 0 !important;
 height: 0 !important;
}
div[class^='player_stage-only'] [class^='stage_stage-wrapper']{
  min-width: 0px !important;
  min-height: 0px !important;
}

.panel-container {
 position: relative;
 min-height: 5.333333rem;
 background-color: #323238;
 overflow:hidden;
}
.f-cb, .f-cbli li {
 zoom: 1;
}
.f-cb:after, .f-cbli li:after {
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
 overflow: hidden;
 content: ".";
}
.panel-left {
 left: 0.4rem;
 top: 0.693333rem;
}
.panel-left-4 {
 left: 0.533333rem;
 top: 0.693333rem;
}
.panel-right {
 right: 0.4rem;
 top: 0.693333rem;
}

.f-fl {
 float: left;
}
.f-fr {
  float: right;
}
.key{
  opacity: 0.6;
}
.key:active{
  opacity: 1;
}
.key-4 {
 width: 4.293333rem;
 height: 3.946667rem;
 position: absolute;
}

.key-4 .key {
 width: 1.573333rem;
 height: 1.573333rem;
 position: absolute;
}
.left {
 left: 0;
 top: 1.173333rem;
}
.up {
 left: 1.373333rem;
 top: 0;
}
.right {
 right: 0;
 top: 1.173333rem;
}
.down {
 left: 1.373333rem;
 bottom: 0;
}
.arrow-left {
 background: url(//edu-image.nosdn.127.net/138F62B6FB18F6BB887226E70E71B315.png?imageView&quality=100) no-repeat center/contain;
}
.arrow-down {
 background: url(//edu-image.nosdn.127.net/096A81D7DCF4AD55FCB215E3D5779A5B.png?imageView&quality=100) no-repeat center/contain;
}
.arrow-right {
 background: url(//edu-image.nosdn.127.net/708E136773A11AAC073BC2221746AFA6.png?imageView&quality=100) no-repeat center/contain;
}
.arrow-up {
 background: url(//edu-image.nosdn.127.net/E86CC1576357F1DDC868AEFC1A1CD4E0.png?imageView&quality=100) no-repeat center/contain;
}
.space {
 width: 2.666667rem;
 height: 2.666667rem;
 position: absolute;
 right: 0.533333rem;
 top: 1.173333rem;
 background: url(//edu-image.nosdn.127.net/8B8C702C59C47DBFFAB99B96F8948626.png?imageView&quality=100) no-repeat center/contain;
}
.key-4 .key-a {
 background: url(//edu-image.nosdn.127.net/FD6CD1F55E91DC3955FC92275F17339E.png?imageView&quality=100) no-repeat center/contain;
}
.key-4 .key-s {
 background: url(//edu-image.nosdn.127.net/948631893AC9D621882A8A2BAC3A793F.png?imageView&quality=100) no-repeat center/contain;
}
.key-4 .key-d {
 background: url(//edu-image.nosdn.127.net/1733F556DCED31C8F00480F289B7222C.png?imageView&quality=100) no-repeat center/contain;
}
.key-4 .key-w {
 background: url(//edu-image.nosdn.127.net/A07A95E60E6DD2DF54C6C2E96491443D.png?imageView&quality=100) no-repeat center/contain;
}
.key-4 .key-h {
 background: url(//edu-image.nosdn.127.net/EEDF4ED204CC0A3F6334F5261350C2C5.png?imageView&quality=100) no-repeat center/contain;
}
.key-4 .key-j {
 background: url(//edu-image.nosdn.127.net/E3C32ED84DEC59FB43B21C2E67B214F8.png?imageView&quality=100) no-repeat center/contain;
}
.key-4 .key-k {
 background: url(//edu-image.nosdn.127.net/BBB770CC00E78763F53D3EABB487109E.png?imageView&quality=100) no-repeat center/contain;
}
.key-4 .key-u {
 background: url(//edu-image.nosdn.127.net/3FCFCA18AEAC9773587E55818065317D.png?imageView&quality=100) no-repeat center/contain;
}

.key-9 {
 width: 5.866667rem;
 height: 4.4rem;
 position: absolute;
 left: 2.066667rem;
 top: 0.106667rem;
}
.key-9 .key-q {
 background: url(//edu-image.nosdn.127.net/D6B7D63A7260618B959E120B21A9A46A.png?imageView&quality=100) no-repeat center/contain;
}

.key-9 .key-q, .key-9 .key-w, .key-9 .key-e {
 margin-top: 0;
}
.key-9 .key {
 width: 1.6rem;
 height: 1.2rem;
 display: block;
 float: left;
 margin-right: 0.426667rem;
 margin-top: 0.293333rem;
}
.key-9 .key:nth-child(3n) {
 margin-right: 0;
}
.key-9 .key-w {
 background: url(//edu-image.nosdn.127.net/E681CF5591245F61F72FBD22D5C0CFAE.png?imageView&quality=100) no-repeat center/contain;
}
.key-9 .key-e {
 background: url(//edu-image.nosdn.127.net/B7D2A5BEF703BED566BFCF41B8C6D352.png?imageView&quality=100) no-repeat center/contain;
}
.key-9 .key-a {
 background: url(//edu-image.nosdn.127.net/9EC53E41AF5F4B535CDD36F67F59D16F.png?imageView&quality=100) no-repeat center/contain;
}
.key-9 .key-s {
 background: url(//edu-image.nosdn.127.net/833A93F0A6AA97A3C71A2B78E03D264D.png?imageView&quality=100) no-repeat center/contain;
}
.key-9 .key-d {
 background: url(//edu-image.nosdn.127.net/ADA3D61B2E90D0D6CE15CC940935C433.png?imageView&quality=100) no-repeat center/contain;
}
.key-9 .key-z {
 background: url(//edu-image.nosdn.127.net/C2477CB7FFD4E3107D5B70765EDCB90E.png?imageView&quality=100) no-repeat center/contain;
}
.key-9 .key-x {
 background: url(//edu-image.nosdn.127.net/35E034AB6A163786429148CB6CBFDB71.png?imageView&quality=100) no-repeat center/contain;
}
.key-9 .key-c {
 background: url(//edu-image.nosdn.127.net/870D448F3929AAEFF8F2D2AE7AAEEA9C.png?imageView&quality=100) no-repeat center/contain;
}


/**
 * 模式3
 */
 .commentsss{padding-top:10px; padding-bottom: 10px; 
  border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; 
  overflow:hidden; margin-top:10px; padding-left:10px;  
  box-shadow:0px 0px 1px #cccccc;color: #666666;}
 .panel-container .abl-item{
  float: left;
  width: 50%;
  padding: 10px;
}
.panel-container .abl-item .abl-key{
 position: absolute;
}
.abl-thumbs-up,
.abl-button-group{
  text-align: center;
  margin-top: 30px;
}
.abl-button-group{
  margin-bottom: 40px;
}
.abl-desc-label{

  padding:4px 10px;
  color: #666;
  font-size: 16px;
}
.abl-desc-content{
 padding:10px;
 color: #888;
 font-size: 13px;
}
.ui.button {
  cursor: pointer;
  display: inline-block;
  min-height: 1em;
  outline: 0;
  border: none;
  vertical-align: baseline;
  background: #e0e1e2 none;
  color: rgba(0,0,0,.6);
  font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
  margin: 0 .25em 0 0;
  padding: .78571429em 1.5em .78571429em;
  text-transform: none;
  text-shadow: none;
  font-weight: 700;
  line-height: 1em;
  font-style: normal;
  text-align: center;
  text-decoration: none;
  border-radius: .28571429rem;
  -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
  transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
  transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
  transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
  will-change: '';
  -webkit-tap-highlight-color: transparent;
}

.ui.twitter.button {
  background-color: #55acee;
  color: #fff;
  text-shadow: none;
  background-image: none;
  -webkit-box-shadow: 0 0 0 0 rgba(34,36,38,.15) inset;
  box-shadow: 0 0 0 0 rgba(34,36,38,.15) inset;
}
.ui.twitter.button:hover {
  background-color: #35a2f4;
  color: #fff;
  text-shadow: none;
}
.abl-thumbs-up{width: 100%; background: #ffffff;margin-top: 10px; padding-top:10px;
  box-shadow:0px 0px 10px #cccccc; overflow: hidden;  }

  .abl-thumbs-up .icon{
   display: inline-block;
   width: 25px;
   height: 25px;
   background: #fff;
   border-radius: 70px;
   box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
   margin-bottom: 10px;
   float: right;
   margin-right: 10px;
 }
 .abl-thumbs-up .icon>i{
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAD10lEQVRoQ+2ZXWgdRRTHz3+vFwSlUEysRrSl1A8kCBYlIsm9OWdvDAriQ0VQq2+2+qQvRgqCrWCxKoh9EBVfiuZBxAqCn2Rn1lwUayMK0qr4UEXFqFSRRBQ3e48sNJjc7N4daDaZQud1zsz+fvfMzM49CzrDG85wfjor4JJBY8wuInqWiJSIDiVJMjE+Pv6Xy9iymMozYK3dQkQnloKo6sfMPAKgUwZY1l+5QBzHN6vqOzkgDzPzM2WAZf2VC1hrdxPRCzkg8/39/RcMDg7+WwbZq79yAWPMAQATeRCdTmc8DMMPvBaw1r5ORLcXQO5j5r3eCszMzNTn5uZ+J6LzCyBfZub7vBWI4/hWVX2rCFBVD4vIDm8FSpZPxv0GMxctLyevyjZxHMfXq+qnvShU9RURudeJtCCoEgFVDay1RwFsLxF4WkRyTyhXqUoE4jjeo6r7HSAeYubnHOIKQ1ZdwFp7FRF9SUTnOICNMfOUQ9zaCERRtBnANIDLXKBqtdpAo9H42SW2KGbVMtBut7cmSZLBX+IINMvMFzvGVpuBbNmo6ocALnQFWo0TKHvWigy02+2NSZJcAyA3O2maftVqtX5ZBJ2ent6epul7RNTvCp/FqepBAG+6jFFVBXCEmf/pjl8Gaa29SFW/AbChx8TztVptqNFoHM9ijDGHAJzWWe4isSgtIg8ujV8mEEWRBEEQlU2oqo+IyFNrLZA9r9PpbAnD8PtFxu4MXEdERx0EHhORx9dJIAzD0BQJbCOib30WIKJrmfmLIoE+IvrNZ4F6vb5heHh4Llcgu8PEcZx6LPAjM19auIlPrel5AOf1klDV9doD7zLzLWUCPwEY8FTgCWZ+tEzgGICrfRRQ1R0icrhM4CMAN/ookKZpX6vVOlkm8DaAZeusW2ad9sAJZt7a8ypxahNPArjLwwxMMvNOF4HnATzgm4Cq7haRl1wE9gPY45tAEARXNJvNFbeEFVdmY8wEgAM+CajqryKyKY8pT2AXgBd9EiCiV5n5HleBOwC85pnATmaedBKIouimIAje90hAFxYWNo6Njf3pJGCMGQLwiS8CWXVPRIaKePL2wJUAvvZFgIj2MvM+Z4GpqalNtVpt1hcBVb1BRI44C7j8J1jDq8Ts6OjoAIDs62Zuyy2dWGv/JqJziwZ1CRR+QuqVRce+J5m550s1V8AY8x2AzS4C1tptqvpZSSnGkff/MFU9Wa/XLx8ZGfmj1+CiDNxPRAeJqN49OHsrArh7aVHWWtsH4E5VzepDWWXjdNsPQRDc1mw2Py+baNVqo2UPqqr/rEBVv6zrvP8BnYgVT32fMdoAAAAASUVORK5CYII=) center center;
  background-repeat: no-repeat;
  display: inline-block;
  width: 25px;
  height: 25px;
  background-size: 15px 15px;
}
.abl-thumbs-up.active .icon>i{
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEF0lEQVRoQ+2ZW2gcVRjH///ZPTP1QqXYXGbEtlaTne2DYKlEBF8UFQXxoSKotW9afdIXIwXBVrBYFcQ+iIovRfMgYgXBKypYUGyLKIiZWSKmXrpn0/RCMdXsTDKfbGIhl9mZg80mU+i+nu878/vtd25zhrjAf7zA+XFRwKSCbuQ/CvAVAEJg/7Q6NTjGsbMmuXkxHa9Ar/gbrJij80Hk27oKbwGR5AHmtXdeYKr/LispfbwQJKE81VDhy3mAee0dF3AjfwfB1xeCCDChFa8Eh6M8yKz2jgt4zepeEIOpEJQ76yr8vNACbtN/j+R9qZAiu+tOuKu4AgLlxtVTBC5PgxQkb2m79khhBXqm/HtKCT9sBygiB7QTbi2sQObwaW0KIu9rJ0wfXoZWHZvEvVH/jRZKh7M4BHhb28F2Q9b0deB8ktvmCiw39o8Q3JzZv+CluhOkr1CGYB2pgBv7Oynck8cgSJ7Udu3VvLhl3Qc86fclLv1EoJwLRtxeV8EXuXEZAUtaAVeq6xHhIIl1JlCRgneCgTaJbRezZALd0rexHJUOgrzKBEgEDe0Erklsx4fQ7LCxvibYbQq0FCtQ61mLKnCFrFtzydSl16e1tRKScjM4ztGxc6BuVN0MyKcEu0zhW3EC2SfEB4Y50ihPHgKPTi6MnyfQJZt6y3FSI7i67e4JTIjEAw3nl+FWjBv5+wme11puKDEjre3wibnx8wR64sqtJbG+zO2QeLqugheXW2CmcgobNIPfzjHOE3CjyhbCOpInkFCebajwuZUQmGZy25iqfZUq0CXXXqdie6TIAjGmbhi3R35MFfCkfy3i0niRBSKVrD7B2l+pAhBYXlydLqyAyJ91J7y67SSeHdPVCQKXZUms1BwQwSfaCe7OFPCa/jGQXkEFntdO8Ex2BZrVn0lsKqSAJVt1OTyQXYHI/wbgzUUUoJK1xxiezKvARyTmjbOFMisxB0RkVDvhxsyjxH8b0xDBB4tWAYEMaTvclivgRdXXADxeQIEd2g7fzBVwm/4ekjuLJhAr9I8zWHRKWHSc9uLqIAR7iyQgkOPaDnvSmBYJtO7yCb5RLAG8o+3gYSOB3mblfovWu4USkGSbdmpDRgJe7N8B4WdFERCITKpozWn+esZIoCfqGyih/F1xBHBY28FAO57Fk1gqFcRWWBQBUHbVVbjbWKBbrukpx6saRRGYxtRNY/bIIWMBk3eC5TpKzNwd2YEHQswFAHiR/w/AVe2S5gpkfkLKKqNBm4i8oJ0wc1NNvZlzm9WjJNabCLTeo8ux+j7rKsaANSVETp5Vf/ed4e+ns/LTBaLKY4S1D4BamNzaFUk+NPdSdvZd2npAgO0Et/w/4DlZgj9A3lu3h3/I62vJ7kbzHtSp9osCnfpnTfv9F6fo/0Bj35oNAAAAAElFTkSuQmCC) center center;
  background-repeat: no-repeat;
  display: inline-block;
  width: 25px;
  height: 25px;
  background-size: 15px 15px;
}
.abl-thumbs-up .number{
  color: #333;
  margin-bottom: 8px;
  float: right;
  line-height: 25px;
  padding-right: 10px;
  color: #0fb1dd;
}
.abl-thumbs-up .text{
  color: #888;
  font-size: 13px;
  float: right;
  line-height: 25px;
  padding-right: 10px;
}