@media only screen and (min-width: 1200px) {
  #page-navi {
  width:100%;
  /*margin:10px auto;*/
  margin-bottom:10px;
  padding: 0px;
  overflow: hidden;
}

#page-navi li {
  list-style: none;
  display: inline;
}

#page-navi li a {
  float: left;
  display: block;
  padding: 8px 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  text-decoration: none;
  background: #fff;
  -webkit-transition: background 200ms linear;
  transition: background 200ms linear;
  border-radius: 3px;
  color:#000;
}

#page-navi li:last-child a {
  margin-right: 0px;
}

#page-navi li a.current,
#page-navi li a.disable,
#page-navi li a:hover {
  background: tomato;
  color: #fff;
  border-bottom:3px solid #fff;
}
}


  @media only screen and (max-width: 800px) {
   #page-navi {
  width:100%;
  /*margin:40px auto;*/
  margin-bottom:10px;
  padding: 0px;
  overflow: hidden;
}

#page-navi li {
  list-style: none;
  display: inline;
}

#page-navi li a {
  float: left;
  display: block;
  padding: 8px 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  text-decoration: none;
  background: #fff;
  -webkit-transition: background 200ms linear;
  transition: background 200ms linear;
  border-radius: 3px;
  color:#000;
}

#page-navi li:last-child a {
  margin-right: 0px;
}

#page-navi li a.current,
#page-navi li a.disable,
#page-navi li a:hover {
  background: tomato;
  color: #fff;
  border-bottom:3px solid #fff;
}
}