#works-category {
  width: 100%;
}
#works-category li {
  height: 300px;
  margin-bottom: 30px;
}
#works-category li#ctg-hotel {
  background: url("../img/works/bg-ctg-hotel.jpg") center center no-repeat;
}
#works-category li#ctg-hotel div {
  padding-top: 35px;
}
#works-category li#ctg-hotel div a {
  display: block;
  width: 230px;
  height: 230px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#works-category li#ctg-hotel div a:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: url("../img/works/title-ctg-hotel_on.png") center center no-repeat;
  opacity: 0;
  transition: 0.5s;
}
#works-category li#ctg-hotel div a:hover:after {
  opacity: 1;
}
#works-category li#ctg-hotel div a:hover:after > img:hover {
  opacity: 0;
}
#works-category li#ctg-flat {
  background: url("../img/works/bg-ctg-flat.jpg") center center no-repeat;
}
#works-category li#ctg-flat div {
  padding-top: 35px;
}
#works-category li#ctg-flat div a {
  display: block;
  width: 230px;
  height: 230px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#works-category li#ctg-flat div a:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: url("../img/works/title-ctg-flat_on.png") center center no-repeat;
  opacity: 0;
  transition: 0.5s;
}
#works-category li#ctg-flat div a:hover:after {
  opacity: 1;
}
#works-category li#ctg-flat div a:hover:after > img:hover {
  opacity: 0;
}
#works-category li#ctg-house {
  background: url("../img/works/bg-ctg-house.jpg") center center no-repeat;
}
#works-category li#ctg-house div {
  padding-top: 35px;
}
#works-category li#ctg-house div a {
  display: block;
  width: 230px;
  height: 230px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#works-category li#ctg-house div a:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: url("../img/works/title-ctg-house_on.png") center center no-repeat;
  opacity: 0;
  transition: 0.5s;
}
#works-category li#ctg-house div a:hover:after {
  opacity: 1;
}
#works-category li#ctg-house div a:hover:after > img:hover {
  opacity: 0;
}
#works-category li#ctg-store {
  background: url("../img/works/bg-ctg-store.jpg") center center no-repeat;
}
#works-category li#ctg-store div {
  padding-top: 35px;
}
#works-category li#ctg-store div a {
  display: block;
  width: 230px;
  height: 230px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#works-category li#ctg-store div a:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: url("../img/works/title-ctg-store_on.png") center center no-repeat;
  opacity: 0;
  transition: 0.5s;
}
#works-category li#ctg-store div a:hover:after {
  opacity: 1;
}
#works-category li#ctg-store div a:hover:after > img:hover {
  opacity: 0;
}
#works-category li#ctg-other {
  background: url("../img/works/bg-ctg-other.jpg") center center no-repeat;
}
#works-category li#ctg-other div {
  padding-top: 35px;
}
#works-category li#ctg-other div a {
  display: block;
  width: 230px;
  height: 230px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#works-category li#ctg-other div a:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: url("../img/works/title-ctg-other_on.png") center center no-repeat;
  opacity: 0;
  transition: 0.5s;
}
#works-category li#ctg-other div a:hover:after {
  opacity: 1;
}
#works-category li#ctg-other div a:hover:after > img:hover {
  opacity: 0;
}

@media (max-width: 768px) {
  #works-category li {
    width: 100%;
    height: 0;
    padding-bottom: 39.062%;
    margin-bottom: 2.6vw;
  }
  #works-category li#ctg-hotel {
    background: url("../img/works/bg-ctg-hotel_mb.jpg") center center no-repeat;
    background-size: cover;
  }
  #works-category li#ctg-hotel div {
    padding-top: 4.561vw;
  }
  #works-category li#ctg-hotel div a {
    width: 30vw;
    height: 30w;
  }
  #works-category li#ctg-hotel div a:after {
    background: url("../img/works/title-ctg-hotel_on.png") center top no-repeat;
    background-size: contain;
  }
  #works-category li#ctg-hotel div a img {
    width: 100%;
    height: auto;
  }
  #works-category li#ctg-flat {
    background: url("../img/works/bg-ctg-flat_mb.jpg") center center no-repeat;
    background-size: cover;
  }
  #works-category li#ctg-flat div {
    padding-top: 4.561vw;
  }
  #works-category li#ctg-flat div a {
    width: 30vw;
    height: 30w;
  }
  #works-category li#ctg-flat div a:after {
    background: url("../img/works/title-ctg-flat_on.png") center top no-repeat;
    background-size: contain;
  }
  #works-category li#ctg-flat div a img {
    width: 100%;
    height: auto;
  }
  #works-category li#ctg-house {
    background: url("../img/works/bg-ctg-house_mb.jpg") center center no-repeat;
    background-size: cover;
  }
  #works-category li#ctg-house div {
    padding-top: 4.561vw;
  }
  #works-category li#ctg-house div a {
    width: 30vw;
    height: 30w;
  }
  #works-category li#ctg-house div a:after {
    background: url("../img/works/title-ctg-house_on.png") center top no-repeat;
    background-size: contain;
  }
  #works-category li#ctg-house div a img {
    width: 100%;
    height: auto;
  }
  #works-category li#ctg-store {
    background: url("../img/works/bg-ctg-store_mb.jpg") center center no-repeat;
    background-size: cover;
  }
  #works-category li#ctg-store div {
    padding-top: 4.561vw;
  }
  #works-category li#ctg-store div a {
    width: 30vw;
    height: 30w;
  }
  #works-category li#ctg-store div a:after {
    background: url("../img/works/title-ctg-store_on.png") center top no-repeat;
    background-size: contain;
  }
  #works-category li#ctg-store div a img {
    width: 100%;
    height: auto;
  }
  #works-category li#ctg-other {
    background: url("../img/works/bg-ctg-other_mb.jpg") center center no-repeat;
    background-size: cover;
  }
  #works-category li#ctg-other div {
    padding-top: 4.561vw;
  }
  #works-category li#ctg-other div a {
    width: 30vw;
    height: 30w;
  }
  #works-category li#ctg-other div a:after {
    background: url("../img/works/title-ctg-other_on.png") center top no-repeat;
    background-size: contain;
  }
  #works-category li#ctg-other div a img {
    width: 100%;
    height: auto;
  }
}/*# sourceMappingURL=works.css.map */