*{ word-wrap:break-word;
  word-break:normal; 
}
.my_sort{
  position:relative;
  max-width:1600px;
  padding:40px;
  margin:0 auto;
}
.sort_box{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.sort_list{
  flex-grow:1;
  max-width:200px;
  position:relative;
  margin:10px 20px;
}
.sort_name{
  width:100%;
  display:block;
  height:60px;
  background:#666;
  text-align:center;
  margin:30px auto;
  line-height:60px;
  transform:skewX(-30deg);
  position:relative;
  transition:all .5s ease;
}
.sort_name:before{
  content:'';
  width:10px;
  height:100%;
  background:rgba(255,255,255,0.15);
  position:absolute;
  right:10px;
  top:0;
  transition:all .5s ease;
}
.sort_name:after{
  content:'';
  width:10px;
  height:100%;
  background:rgba(255,255,255,0.15);
  position:absolute;
  right:30px;
  top:0;
  transition:all .5s ease;
}
.sort_font{
  font-size:20px;
  color:#fff;
  position:absolute;
  width:100%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) skewX(30deg);
}
.sort_name:hover{
  background:var(--color);
}
.sort_name.sort_click{
  background:var(--color);
}
a:active, a:hover, a:focus{
    color: var(--color);
    text-decoration: none;
}
@media(max-width:768px){
  .my_sort{
   padding:20px;
  }
  .sort_name{
    margin:0;
    height:44px;
    line-height:44px;
  }
  .sort_list{
    margin:10px;
    width:calc(50% - 20px);
    max-width:calc(50% - 20px);
  }
  .sort_font{
    font-size:14px;
  }
  
  .p_pagebox .NumBox{
    height: 45px;
  }
  .p_pagebox .font{
    font-size:14px!important;
  }
  .p_pagebox .iconfont{
    font-size:18px!important;
  }
  .p_pagebox .num{
    font-size:16px!important;
  }
  .p_pagebox .num .iconfont:before{
    font-size:16px!important;
  }
}