.my_sort .sort_box{
  display:flex;
  justify-content:center;
  padding:12px 0;
}
.my_sort .sort_list{
  margin-right:20px;
    position:relative;
}
.my_sort .sort_name{
  padding:6px 25px;
  border-radius:6px;
  min-width:140px;
  font-size:17px;
  line-height:34px;
  color:#333;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
  white-space:nowrap;
  transition:all 0.35s ease;
}
.my_sort .sort_name2{
  width:100%;
  padding:6px;
  border-radius:0;
  background:#fff;
}
.my_sort .sort_child{
  position:absolute;
  min-width:100%;
  left:50%;
  transform:translateX(-50%);
  top:100%;
  max-height:0;
  transition:all 0.4s;
  overflow:hidden;
  visibility:hidden;
  z-index:2;
}
.my_sort .sort_list:hover .sort_child{
  max-height:400px;
  visibility:visible;
}
.my_sort .sort_name:hover{
  background:#444;
  color:#fff;
}
.my_sort .sort_name.sort_click{
  background:#444;
  color:#fff;
}
@media(max-width:768px){
  ::-webkit-scrollbar{display:none;}

  .my_sort .sort_box{
    overflow-x:auto;
    padding:10px 0;
    justify-content:flex-start;
  }
  .my_sort .sort_list{
    margin-right:10px;
  }
  .my_sort .sort_name{
    min-width:100px;
    font-size:14px;
    line-height:20px;
    padding:12px; 
  }
}