body {
         /* background-color: #1a1a1a;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            font-family: "Microsoft Yahei", sans-serif; */
     }
html{
    overflow: hidden;
}
     .keyboard {
         background-color: #252525;
         padding: 20px;
         border-radius: 12px;
         /* display: grid; */
         grid-template-columns: repeat(22, 1fr);
         gap: 8px;
     }

     .key {
         background-color: #333333;
         border-right: 1px solid rgb(81 74 74);
         border-left: 1px solid rgb(81 74 74);
         /* background-color: linear-gradient(to bottom, #434343, #232121); */
         box-shadow: 1px 3px 4px 0px rgba(0, 0, 0, 0.5);
         /* box-sizing: border-box; */
         color: #cccccc;
         /* border: none; */
         border-radius: 6px;
         padding: 12px 8px;
         text-align: center;
         font-size: 14px;
         cursor: default;
         user-select: none;
         transition: background-color 0.15s ease;
         width: 28px;
         margin: 3px
     }

     .key.flash {
         animation: flash 0.2s ease-in-out;
     }

     @keyframes flash {
         0% {
             background-color: #333333;
             box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
         }

         50% {
             background-color: #4caf50;
             box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
         }

         100% {
             background-color: #333333;
             box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
         }
     }

     /* .key.wide-2 {
            grid-column: span 2;
        }

        .key.wide-3 {
            grid-column: span 3;
        }

        .key.wide-6 {
            grid-column: span 6;
        }

        .key.wide-8 {
            grid-column: span 8;
        } */

     .col_1 {
         display: flex;
     }

     .col_1 .logo {
       width: 125px;
    height: auto;
    position: absolute;
    right: 74px;
    top: 30px;
     }

     .col_1 .logo img {
         width: 100%;
         height: auto;

     }

     .col_2 {
         display: flex;

     }

     .col_2 .key {
         width: 38px;
     }

     [data-key="F1"] {
         margin-left: 40px;
     }

     [data-key="F9"] {
         margin-left: 25px;
     }

     [data-key="F5"] {
         margin-left: 25px;
     }

     [data-key="Backspace"] {
         width: 60px;
     }

     [data-key="Tab"] {
         width: 45px;
     }

     [data-key="Backslash"] {
         width: 45px;
     }

     [data-key="CapsLock"] {
         width: 70px;
     }

     [data-key="Enter"] {
         width: 71px
     }

     [data-key="ShiftLeft"] {
         width: 97px;
     }

     [data-key="ShiftRight"] {
         width: 97px;
     }

     .col_2 [data-key="Space"] {
         width: 302px;
     }

     [data-key="PrintScreen"] {
         margin-left: 22px;
     }

     [data-key="Insert"] {
         margin-left: 19px;
     }

     [data-key="Delete"] {
         margin-left: 17px;
     }

     [data-key="Numpad4"] {
         margin-left: 197px;
     }

     [data-key="ArrowUp"] {
         margin-left: 62px;
         width: 40px;
     }

     [data-key="Numpad1"] {
         margin-left: 73px;
     }

     .col_2 [data-key="Numpad0"] {
         margin-left: 12px;
         width: 70px;
     }

     [data-key="NumpadEnter"] {
         position: absolute;
         right: 30px;
         height: 67px;
     }

     [data-key="Numpad7"] {
         margin-left: 26px;
     }

     [data-key="NumLock"] {
         margin-left: 26px;
     }

     [data-key="NumpadAdd"] {
         height: 68px;
         position: absolute;
         right: 31px;
     }

     .cheshi .el-dialog__title {
         color: #cccccc;
     }