.option {
  display: flex;
//   align-items: center;
  // justify-content: center;
  flex-direction: column;
}
.optionIcon {
  font-size: 24px;
  margin-right: 10px;
}
.optionTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  //   font-weight: bold;
  border-bottom: 1px solid #7f7f7f;
  width: 100%;
  color: #000000d9;
  padding: 10px 0px;
//   font-family: "Lucida Console", Courier, monospace;
}
.optionTwo {
  display: flex;
  flex-direction: column;
}
.optionTwoTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  font-size: 18px;
  // border-bottom: 1px solid #7f7f7f;
  width: 100%;
  margin: 10px 0px;
  color: #000000d9;
//   font-family: "Lucida Console", Courier, monospace;
}
.optionTwoIcon {
  font-size: 18px;
  margin-right: 8px;
}
.optionThree {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-template-columns: repeat(auto-fill, 200px);
  justify-content: space-between;
  //   grid-gap: 5px;
  /*  声明了两行，行高分别为 50px 50px  */
  //   grid-template-rows: 50px;
  margin: 0px 20px;
}

.optionThreeTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  // border-bottom: 1px solid #7f7f7f;
  width: 100%;
  //   white-space: nowrap;
  padding: 8px 5px 8px 10px;
  margin: 8px 5px;
//   font-weight: bold;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  color: #000000d9;
  background-color: transparent;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
//   font-family: "Lucida Console", Courier, monospace;
//   background: #cee1f7;
}
// .optionThreeTitle::before {
//     transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
//     content: '';
//     // width: 1%;
//     height: 100%;
//     // background:  #7e90a8;
//     position: absolute;
//     top: 0;
//     left: 0;
// }
.optionThreeTitle:hover {
    color: #ffffff;
    background: #1890FF;
    // width: 100%;

}
// .optionThreeTitle:hover:before {
//     // background: #1890FF;
//     width: 100%;
// }
.optionThreeName {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 9999;
}
.optionThreeIcon {
  font-size: 14px;
  margin-right: 5px;
  z-index: 9999;
}