.main {
  position: relative;
  .search {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    padding-bottom: 50px;
    align-items: center;
    .searchBox {
      width: 100%;
    }
    .cancelFont {
      font-size: 28px;
      font-weight: 400;
      color: #b1b1b1;
    }
  }
  .up_search {
    color: $color_main;
    font-size: $font_size;
    position: absolute;
    right: 20px;
  }
  .hot {
    padding: 0 20px;
    .hot_header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: $font_size_medium;
      .hot_header_title {
        font-size: $font_size;
        color: $color_font_one;
        font-weight: 700;
      }
    }

    .list {
      display: flex;
      font-size: $font_size_medium;
      flex-wrap: wrap;
      padding: 20px 0;
      .item {
        margin-right: 20px;
        margin-bottom: 20px;
        padding: 10px 20px;
        background-color: #f0f0f0;
        color: $color_font_three;
        border-radius: 8px;
      }
    }
  }
  .history {
    padding: 0 20px;
    .history_header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: $font_size_medium;
      .history_header_title {
        font-size: $font_size;
        color: $color_font_one;
        font-weight: 700;
      }
      .miconfont {
        font-size: 40px;
        color: $color_font_three;
        margin-left: 20px;
      }
    }
    .list {
      display: flex;
      font-size: $font_size_medium;
      flex-wrap: wrap;
      padding: 20px 0;
      .item {
        margin-right: 20px;
        margin-bottom: 20px;
        padding: 10px 20px;
        background-color: #f0f0f0;
        color: $color_font_three;
        border-radius: 8px;
      }
    }
  }
  .reslutBox {
    .reslutTitle {
      margin-bottom: 20px;
      margin-left: 20px;
      font-size: $font_size;
      color: $color_font_one;
      font-weight: 700;
    }
    .scrollBox {
      height: calc(100vh - 250px);
    }
  }
  .topFlex {
    display: flex;
    align-items: center;
    // margin-top: 35px;
    justify-content: space-between;
    .historyFont {
      margin-left: 32px;
      font-size: $font_size;
      color: $color_font_one;
      font-weight: 700;
    }
    .up_search {
      color: $color_main;
      font-size: $font_size;
      margin-right: 20px;
    }
  }
}