.num-keyboard-view {
  width: 100%;
  background-color: #f6f6f7;
  border-top: solid 0.02rem #c6a86c;
  z-index: 1001;
}
.num-keyboard-view .num-area {
  width: 75%;
  display: flex;
  flex-wrap: wrap;
}
.num-keyboard-view .oper-area {
  width: 25%;
}
.num-keyboard-view .key-item {
  width: 33.33%;
  height: 0.5rem;
  border-right: solid 0.02rem #c6a86c;
  border-bottom: solid 0.02rem #c6a86c;
  font-size: 0.26rem;
  color: #c6a86c;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent linear-gradient(118deg, #ffffff 0%, #f0f0f0 100%) 0% 0% no-repeat padding-box;
}
.num-keyboard-view .key-item:active,
.num-keyboard-view .key-delete:active {
  color: #fff;
  background: #c6a86c;
}
.num-keyboard-view .key-delete {
  height: 0.99rem;
  color: #c6a86c;
  display: flex;
  justify-content: center;
  align-items: center;
}
.num-keyboard-view .key-sure {
  height: 1.01rem;
  color: #fff;
  border-top: solid 0.02rem #c6a86c;
  background: transparent linear-gradient(137deg, #f5e8c4 0%, #e3bb83 100%) 0% 0% no-repeat padding-box;
  font-size: 0.16rem;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 0px 3px 6px #67483780;
  display: flex;
  justify-content: center;
  align-items: center;
}
.num-keyboard-view .key-sure:active {
  background: #e6c985;
  color: #fff;
}
.num-keyboard-view .keyboard {
  width: 0.325rem;
  height: 0.29rem;
}
.num-keyboard-view .clear {
  width: 0.255rem;
  height: 0.19rem;
}