/* 新工具 */
.utilities {
  height: 1040px;
}

.utilities {
  margin-top: 50px;
}

.outer_frame {
  width: 600px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border: 2px solid #eee;
  /* 盒子圆角 */
  border-radius: 10px;
}

.utilities h3 {
  width: 600px;
  height: 25px;
  font-size: 16px;
  margin: 10px auto;
}

.calculator_page h4 {
  font-size: 16px;
  margin-top: 15px;
}

.utilities p {
  width: 600px;
  height: 25px;
  font-size: 14px;
  margin: 10px auto;
}

.utilities span {
  float: right;
  font-size: 14px;
}

.calculator_page {
  display: flex;
  justify-content: space-around;
  /* 输入单元格上下间距 */
  padding: 5px;
}

.calculator_page input {
  width: 120px;
  height: 35px;
  /* 输入文字的大小 */
  font-size: 16px;
  border: 1px solid #b1191a;
  /* padding-left: 5px; */
  /* 文字居中显示 */
  text-align: center;
  border-radius: 8px;
}

input::placeholder {
  /* 提示文字大小 */
  font-size: 12px;
  opacity: 1;
}

.calculator_page input[type="reset"] {
  font-size: 16px;
  color: #fff;
  background-color: #b1191a;
  /* 鼠标经过变成小手 */
  cursor: pointer;
}

.calculator_page input[type="button"] {
  font-size: 16px;
  color: #fff;
  background-color: #19a008;
  border: 1px solid #19a008;
  /* 鼠标经过变成小手 */
  cursor: pointer;
}

.calculator_page .button input:hover {
  /* 改变背景颜色
  border: 1px solid #5678ef;
  background-color: #5678ef; */
  /* 放大5% */
  /* transform: scale(1.05); */
  /* 阴影 
  3px 3px 5px rgba(0, 0, 0, 0.5)：在右下方向添加阴影。
 -3px 3px 5px rgba(0, 0, 0, 0.5)：在左下方向添加阴影。 */
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5), -3px 3px 5px rgba(0, 0, 0, 0.5);
  /* 向上移动3px */
  /* transform: translateY(-3px); */
  /* 加个过渡时间 */
  transition: all 1s;
}

.calculator_page span {
  width: 120px;
  height: 35px;
  /* 输入文字的大小 */
  font-size: 16px;
  border: 1px solid #19a008;
  line-height: 35px;
  /* 文字居中显示 */
  text-align: center;
  /* 输入框上边距 */
  margin-top: 0px;
  border-radius: 8px;
}