.to_all {
  display: block;
  margin: 12rem auto 0;
  width: 100%;
  width: calc(100% + 9rem);
  border-top: 1px solid #D2D2D2;
}
.to_all a {
  position: relative;
  display: block;
  margin: -1px auto 0;
  padding: 4.8rem 0 2.4rem;
  width: 10rem;
  font-size: 1.5rem;
  color: inherit;
  text-align: center;
  border-top: 1px solid #4F545A;
  transition: all 0.2s ease-in-out;
}
.to_all a .dot {
  position: absolute;
  top: 2rem;
  left: 0;
  right: 0;
  display: block;
  margin: auto;
  width: 10rem;
}
.to_all a .dot:before, .to_all a .dot:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  margin: auto;
  width: 4px;
  height: 4px;
  background-color: #C8C8C8;
}
.to_all a .dot:before {
  transform: translate3d(-3px, 0, 0px);
}
.to_all a .dot:after {
  transform: translate3d(3px, 0, 0px);
}
.to_all a .dot i:before, .to_all a .dot i:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  display: block;
  margin: auto;
  width: 4px;
  height: 4px;
  background-color: #C8C8C8;
}
.to_all a .dot i:before {
  transform: translate3d(-3px, 0, 0px);
}
.to_all a .dot i:after {
  transform: translate3d(3px, 0, 0px);
}
.to_all a:hover {
  width: 100%;
}
.to_all a:hover .dot:before, .to_all a:hover .dot:after {
  background-color: #4F545A;
}
.to_all a:hover .dot i:before, .to_all a:hover .dot i:after {
  background-color: #4F545A;
}
@media only screen and (max-width: 860px) {
  .to_all {
    margin: 8rem auto 0;
    width: 100%;
  }
  .to_all a {
    font-size: 1.3rem;
  }
}