html,body{font-size:20px;margin: 0;padding: 0;background: #313131;color: #FFF;overflow: hidden;}
#_keyboard{width: 100%;height: 6.2rem;position: fixed;bottom: 0;left: 0;display: -webkit-flex;display: flex;justify-content:center;}
#_keyboard ._white{background: #FBFBFB;flex: 1;flex-grow: 1;position: relative;}
#_keyboard ._white:before{border-left: 1px solid #666;}
#_keyboard2{width: 100%;height: 3.9rem;position: fixed;bottom: 2.3rem;left: 0;display: -webkit-flex;display: flex;justify-content:center;}
#_keyboard2 ._black{background: #1D1D1D;flex: 1;flex-grow: 1;position: relative;}
#_keyboard2 ._black:before{border-left: 1px solid #999;border-bottom: 1px solid #999;}
/**/
#exhibition,#exhibition2{width: 100%;position: fixed;top: 0;left: 0;display: -webkit-flex;display: flex;justify-content:center;}
#exhibition ._white{background: #313131;flex: 1;flex-grow: 1;position: relative;overflow: hidden;border-left: 1px solid #313131;}
#exhibition ._white:before{border-left: 1px solid #313131;}
#exhibition2 ._black{background: #292929;flex: 1;flex-grow: 1;position: relative;overflow: hidden;border-left: 1px solid #313131;border-right: 1px solid #313131;}
#exhibition2 ._black:before{border-left: 1px solid #292929;}
/**/
#exhibition ._white:before,#exhibition2 ._black:before,#_keyboard ._white:before,#_keyboard2 ._black:before{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/**/
@keyframes runHeight{
from {height: 0;}
to {height:calc(100vh);}
}
@-moz-keyframes runHeight{
from {height: 0;}
to {height:calc(100vh);}
}
@-webkit-keyframes runHeight{
from {height: 0;}
to {height:calc(100vh);}
}
@-o-keyframes runHeight{
from {height: 0;}
to {height:calc(100vh);}
}
/**/
@keyframes runBottom{
from {bottom: 0;}
to {bottom:calc(100vh);}
}
@-moz-keyframes runBottom{
from {bottom: 0;}
to {bottom:calc(100vh);}
}
@-webkit-keyframes runBottom{
from {bottom: 0;}
to {bottom:calc(100vh);}
}
@-o-keyframes runBottom{
from {bottom: 0;}
to {bottom:calc(100vh);}
}
.slider,.slider_{
    /*background: rgba(140,198,231,1);*/
    bottom:0;
    position: absolute;
    width: 100%;
    height: 0;
    animation-fill-mode: forwards;
}
/**/
/*#setting{position: fixed;padding: .5rem;color: #FFF;border-radius: .3rem;font-size: .5rem;top: .3rem;right: .3rem;background-color: rgba(0, 0, 0, 0.15);cursor: pointer;}*/
#rgList{position: fixed;top: .5rem;right: 9.6rem;cursor: pointer;}
#recording{position: fixed;top: .5rem;right: 5.2rem;cursor: pointer;}
#setting{position: fixed;top: .5rem;right: .8rem;cursor: pointer;}
#settingBox{z-index: 1;display: none;position: absolute;top: 50%;right: 50%;transform: translate(50%,-100%);-webkit-transform: translate(50%,-100%);width: 15rem;background: rgba(0,0,0,.35);color: #FFF;border-top-left-radius: .6rem;border-top-right-radius: .6rem;}
#saveS{text-align: center;background: rgba(88,169,231,.66);width: 30%;margin: 0 auto;padding: .3rem 0;cursor: pointer;margin: .3rem auto;border-radius: .3rem;}
#colorS,#speedS{padding: .3rem;}
#colorS font{width: 1rem;height: 1rem;display: inline-block;vertical-align: middle;margin: .5rem .2rem;cursor: pointer;}
#colorS .check{border: 2px solid #2DACFC;box-shadow: 0 0 3px #2DACFC;}
#bgColor{background: rgba(0,0,0,.35);width: 100%;height: 100%;position: fixed;top: 0;display: none;}
#reset{position: absolute;bottom: .5rem;right: .5rem;cursor: pointer;}