/*@media screen and (min-width: 1000px) {
    .kb-frame{
        position: absolute;
        width:80%; 
        height:62.5%; 
        margin: 0 0 0 0;
        background-color: rgba(0,0,0,1);
    }
}
@media screen and (min-width: 600px) and (max-width: 1000px) {
    .kb-frame{
        position: absolute;
        width:80%; 
        height:62.5%; 
        margin: 0 0 0 0;
        background-color: rgba(255,0,0,1);
    }
}
@media screen and (min-width: 300px) and (max-width: 600px) {
    .kb-frame{
        position: absolute;
        width:80%; 
        height:62.5%; 
        margin: 0 0 0 0;
        background-color: rgba(0,255,0,1);
    }
}
@media screen and (min-width: 0px) and (max-width: 300px) {
    .kb-frame{
        position: absolute;
        width:80%; 
        height:62.5%; 
        margin: 0 0 0 0;
        background-color: rgba(0,0,255,1);
    }
}*/

.kb-frame{
    /*position: absolute;*/
    width:78.70370370370371%;           /* 850 / 1080 */
    height: 62.65625%; /* 1203 / 1920 */
    /*height: auto;*/
    margin: 0 0 0 0;
    background-color: rgba(0,0,0,1);
}
.kb-title-frame{
    position: absolute;
    left: 0%;                           /* 0 / 1080 */
    top: 20.520833333333333%;           /* 394 / 1920 */
    width: 100%;                        /* 1080 / 1080 */
    height:3.125%;                      /* 60 / 1920 */
}
.kb-title-frame div{
    text-align: center;
    font-size: 60px;
    font-weight: 900;
    line-height: 100%;
    color: #333333;
}
.kb-input{
    position: absolute;
    left: 17.592592592592593%;          /* 190 / 1080 */
    top: 27.03125%;                     /* 519 / 1920 */
    width: 69.44444444444444%;          /* 750 / 1080 */
    height: 6.25%;                      /* 120 / 1920 */
    font-size: 40px;
    text-align: center;
    border:none;
    color: #333333;
    background-color: transparent;
    outline: none;
}
.kb-key-frame{
    position: absolute;
    left: 16.666666666666666%;          /* 180 / 1080 */
    top: 35.36458333333333%;            /* 679 / 1920 */
    width: 66.66666666666666%;          /* 720 / 1080 */
    height: 45.83333333333333%;         /* 880 / 1920 */
}
.kb-key{
    position: relative;
    width:16.666666666666666%;          /* 120 / 720 */
    height: 13.636363636363635%; /* 120 / 880 */
    /*height:auto; */
    display:inline-block;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
}
.kb-wide-key{
    position: relative;
    width:33.33333333333333%;           /* 240 / 720 */
    height: 13.636363636363635%; /* 120 / 880 */
    /*height:auto;                        */
    display:inline-block;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
}
.kb-enter-key-wrap{
    height: 15.90909090909091%; /* 140 / 880 */
}
.kb-enter-key{
    position: relative;
    width:43.05555555555556%;           /* 310 / 720 */
    height: 100%; /* 140 / 880 */
    /*height:auto;*/
    display:inline-block;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
}