.keyboard-box{
  position: relative;
  height: 473px;
}

input {
  box-sizing: border-box;
  width: 860px;
  height: 60px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 30px;
  padding: 20px;
  color: #3f3f3f; }

.keyboard-wrapper {
  position: absolute;
  bottom: 0;
  margin-left: -20px;
  box-sizing: border-box;
  width: 860px;
  overflow: hidden;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #d0d8dd; }
  .keyboard-wrapper dl.keyboard-card {
    padding-bottom: 10px; }
    .keyboard-wrapper dl.keyboard-card dt {
      color: #555;
      font-size: 24px; }
    .keyboard-wrapper dl.keyboard-card dd {
      width: 100%;
      line-height: 30px;
      white-space: nowrap;
      overflow-x: scroll;
      color: #3f3f3f; }
      .keyboard-wrapper dl.keyboard-card dd span {
        margin-right: 20px;
        font-size: 24px; }
        .keyboard-wrapper dl.keyboard-card dd span.active, .keyboard-wrapper dl.keyboard-card dd span:hover {
          color: #ff5c00;
          cursor: pointer; }
  .keyboard-wrapper .keyboard {
    width: 820px; }
    .keyboard-wrapper .keyboard .row {
      display: flex;
      gap: 5px;
      margin-bottom: 5px; }
      .keyboard-wrapper .keyboard .row .key {
        border: 1px solid #d0d8dd;
        border-radius: 4px;
        font-size: 24px;
        color: #3f3f3f;
        cursor: pointer;
        width: 70px;
        height: 66px;
        line-height: 66px;
        text-align: center;
        box-sizing: border-box; }
        .keyboard-wrapper .keyboard .row .key img {
          vertical-align: top;
          width: auto; }
          .keyboard-wrapper .keyboard .row .key img#Backspace {
            height: 22px;
            margin-top: 22px; }
          .keyboard-wrapper .keyboard .row .key img#Shift {
            height: 22px;
            margin-top: 22px; }
          .keyboard-wrapper .keyboard .row .key img#CnEn {
            height: 40px;
            margin-top: 13px; }
          .keyboard-wrapper .keyboard .row .key img#Enter {
            height: 14px;
            margin-top: 26px; }
          .keyboard-wrapper .keyboard .row .key img#Space {
            height: 8px;
            margin-top: 29px; }
      .keyboard-wrapper .keyboard .row:nth-child(2) {
        justify-content: center; }
      .keyboard-wrapper .keyboard .row:nth-child(1) .key:nth-last-child(1), .keyboard-wrapper .keyboard .row:nth-child(4) .key:nth-child(1), .keyboard-wrapper .keyboard .row:nth-child(5) .key:nth-child(1), .keyboard-wrapper .keyboard .row:nth-child(5) .key:nth-last-child(2), .keyboard-wrapper .keyboard .row:nth-child(5) .key:nth-last-child(1) {
        background-color: #e9f0f8; }
      .keyboard-wrapper .keyboard .row:nth-child(5) .key:nth-child(1), .keyboard-wrapper .keyboard .row:nth-child(5) .key:nth-last-child(1) {
        width: 125px; }
      .keyboard-wrapper .keyboard .row:nth-child(5) .key:nth-child(3) {
        flex: 1; }

/*# sourceMappingURL=keyboard.css.map */