.paging {
  text-align: center; margin-top: 30px;
  ul {
    display: inline-block;
    li {
      display: inline-block; height: 30px; line-height: 30px; width:30px; text-align: center; margin:0 2px;
      a {
        display: block; width: 100%; height: 100%;color: #444; border-radius: 5px;
        img {
          width: 20px; height: 20px; margin-top: 5px; opacity: .7;
        }
      }
      &:hover {
        a {
          background: #f0f0f0; 
        }
      }
      &.select {
        a {
          background: var(--main-color); color: #fff;
        }
      }
      &:first-child {
        a {
          img {
            margin-left: -2px
          }
        }
      }  
      &.rotate {
        img {
          transform: rotate(180deg); margin-left: 1px;
        &:last-child {
          img {margin-left: 0}
          }
        }
      }  
    }
  }
}


@media all and (max-width: 580px) {
  .paging {
    ul {
      li {
        height: 25px; line-height: 23px; width: 25px; font-size: 1.2rem;
        &:first-child, &:last-child {
          display:none;
          a {
            img {margin-top:3px;}
          }
        }
      }
    }
  }
}

@media all and (max-width: 500px) {
  .paging {
    ul {
      width: 100%;
      li {
        margin:0;
        a {
          border: 0;
        }
      }
    }
  }
}

@media all and (max-width: 375px) {
  .paging {
    ul {
      li {
        width: 20px; height: 20px; line-height: 20px;
        a {
          img {
            width: 15px; height: 15px; margin-top: 3px;
          }
        }
      }
    }
  }
}