@media (max-width: 960px) {
  #top {
    width: 88%;
  }
  #top .flex {
    justify-content: space-around;
  }
  #top .btn {
    font-size: 35px;
    width: 300px;
    height: 120px;
  }
  header .logo {
    width: 95%;
    text-align: center;
  }
  #gallery .contents {
    width: 95%;
  }
  #gallery .contents.flex {
    justify-content: space-between;
  }
  .contents::before{
    content:"";
    display: block;
    width: 169px;
    order:1;
    margin: 0 10px 28px 10px;
  }
  .contents::after{
    content:"";
    display: block;
    width: 169px;
    margin: 0 10px 28px 10px;
  }
}
@media (max-width: 811px) {
  #gallery .contents .box {
    width: 200px;
    height: auto;
  }
  #gallery .contents .box a img {
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 710px) {
  #top {
    width: 90%;
  }
  #top .flex {
    justify-content: space-around;
  }
  #top .logo {
    font-size: 30px;
  }
  #top .btn {
    font-size: 23px;
    width: 45%;
    height: 80px;
    letter-spacing: .05em;
  }
  header {
    height: 25vh;
    margin: 0 0 -20px 0;
  }
  .object_fit {
    height: 18vh;
  }
  header .logo {
    font-size: 30px;
    text-align: center;
    width: 95%;
    padding: 70px 0 0;
  }
  #gallery .contents.flex {
  	justify-content: space-between;
  }
  #gallery .contents {
    width: 95%;
  }
  #gallery .contents .box {
    width: 100px;
    margin: 0 5px 10px 5px;
  }
  #gallery .contents .box a img{
    width: 100px;
    height: 93px;
  }
  .lb-dataContainer {
    padding: 20px 0 20px;
  }
  .lb-data .lb-number {
    margin: 0;
  }
  .title {
    font-size: 20px;
    margin: 10px 0 15px;
  }
  .text {
    font-size: 13px;
  }
  .lb-nav a.lb-prev, .lb-nav a.lb-next {
    width: 25px;
  }
  footer {
    margin: 20px 0 0;
  }
  .empty {
    display: block;
  }
}
@media (max-width: 477px) {
  .empty {
    display: none;
  }
}