.hotbox{font-family:Arial,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;left:0;top:0}.hotbox,.hotbox .state{overflow:visible;position:absolute}.hotbox .state{display:none}.hotbox .state .center .button,.hotbox .state .ring .button{border-radius:100%;box-shadow:0 0 30px rgba(0,0,0,.3);height:70px;margin-left:-35px;margin-top:-35px;position:absolute;width:70px}.hotbox .state .center .key,.hotbox .state .center .label,.hotbox .state .ring .key,.hotbox .state .ring .label{display:block;line-height:1.4em;text-align:center;vertical-align:middle}.hotbox .state .center .label,.hotbox .state .ring .label{color:#000;font-size:16px;font-weight:400;line-height:1em;margin-top:17px}.hotbox .state .center .key,.hotbox .state .ring .key{color:#999;font-size:12px}.hotbox .state .ring-shape{border:25px solid rgba(0,0,0,.3);border-radius:100%;box-sizing:content-box;left:-25px;position:absolute;top:-25px}.hotbox .state .bottom,.hotbox .state .top{position:absolute;white-space:nowrap}.hotbox .state .bottom .button,.hotbox .state .top .button{border-radius:15px;box-shadow:0 0 30px rgba(0,0,0,.3);display:inline-block;margin:0 10px;padding:8px 15px;position:relative}.hotbox .state .bottom .button .label,.hotbox .state .top .button .label{color:#000;font-size:14px;line-height:14px;line-height:1em;vertical-align:middle}.hotbox .state .bottom .button .key,.hotbox .state .top .button .key{color:#999;font-size:12px;line-height:12px;margin-left:3px;vertical-align:middle}.hotbox .state .bottom .button .key:before,.hotbox .state .top .button .key:before{content:"("}.hotbox .state .bottom .button .key:after,.hotbox .state .top .button .key:after{content:")"}.hotbox .state .button{background:#f9f9f9;cursor:default;overflow:hidden}.hotbox .state .button .key,.hotbox .state .button .label{opacity:.3}.hotbox .state .button.enabled{background:#fff}.hotbox .state .button.enabled .key,.hotbox .state .button.enabled .label{opacity:1}.hotbox .state .button.enabled:hover{background:#e87372}.hotbox .state .button.enabled:hover .label{color:#fff}.hotbox .state .button.enabled:hover .key{color:#fadfdf}.hotbox .state .button.enabled.selected{-webkit-animation:selected .1s ease;background:#e45d5c}.hotbox .state .button.enabled.selected .label{color:#fff}.hotbox .state .button.enabled.selected .key{color:#fadfdf}.hotbox .state .button.enabled.pressed,.hotbox .state .button.enabled:active{background:#ff974d}.hotbox .state .button.enabled.pressed .label,.hotbox .state .button.enabled:active .label{color:#fff}.hotbox .state .button.enabled.pressed .key,.hotbox .state .button.enabled:active .key{color:#fff0e6}.hotbox .state.active{display:block}@-webkit-keyframes selected{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}.hotbox-key-receiver{height:20px;left:-999999px;margin:0;outline:none;position:absolute;top:-999999px;width:20px}