.style-container {
  position: relative;
  width: 100%;
  height: 44.16667vw;
}

@media only screen and (max-width: 800px) {
  .style-container {
    position: relative;
    width: 100%;
    height: 100.8vw;
  }
}

.style-container .styleguide-txt {
  position: absolute;
  top: 17.78646vw;
  left: 0vw;
  width: 33.38542vw;
  height: 9.89583vw;
  right: 0;
  margin: auto;
  font-family: adine;
  font-size: 9.89583vw;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 10.625vw;
  letter-spacing: 0.29688vw;
  text-align: center;
  color: #ffffff;
}

@media only screen and (max-width: 800px) {
  .style-container .styleguide-txt {
    position: absolute;
    top: 54.13333vw;
    left: 0vw;
    width: 78.93333vw;
    height: 18.66667vw;
    font-size: 20vw;
  }
}

.style-container .style-img {
  position: absolute;
  top: 0vw;
  left: 0vw;
  width: 100vw;
  height: 44.16667vw;
  background-image: url("../images/styleguide/styleguide.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@media only screen and (max-width: 800px) {
  .style-container .style-img {
    position: absolute;
    top: 0vw;
    left: 0vw;
    width: 100vw;
    height: 100.8vw;
    background-size: cover;
  }
}

.img-container {
  position: relative;
  width: 100%;
  height: 58.69792vw;
}

@media only screen and (max-width: 800px) {
  .img-container {
    position: relative;
    width: 100%;
    height: 99.6vw;
  }
}

.img-container .head-txt {
  position: absolute;
  top: 2.23958vw;
  left: 0vw;
  width: 31.40625vw;
  height: 8.64583vw;
  right: 0;
  margin: auto;
  font-family: adine;
  font-size: 8.33333vw;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 9.27083vw;
  letter-spacing: normal;
  text-align: center;
  color: #000000;
  white-space: nowrap;
}

@media only screen and (max-width: 800px) {
  .img-container .head-txt {
    position: absolute;
    top: 7.33333vw;
    left: 0vw;
    width: 41.06667vw;
    height: 18.93333vw;
    font-size: 18.93333vw;
  }
}

.img-container .busi1 {
  position: absolute;
  top: 13.69792vw;
  left: 3.125vw;
  width: 28.59375vw;
  height: 42.86458vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@media only screen and (max-width: 800px) {
  .img-container .busi1 {
    position: absolute;
    top: 23.46667vw;
    left: 5.09333vw;
    width: 42.69333vw;
    height: 63.52vw;
  }
}

.img-container2 {
  position: relative;
  width: 100%;
  height: 105.57292vw;
}

@media only screen and (max-width: 800px) {
  .img-container2 {
    position: relative;
    width: 100%;
    height: 230.26667vw;
  }
}

.img-container2 .head-txt {
  position: absolute;
  top: 1.19792vw;
  left: 0vw;
  width: 31.40625vw;
  height: 8.64583vw;
  right: 0;
  margin: auto;
  font-family: adine;
  font-size: 8.33333vw;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 9.27083vw;
  letter-spacing: normal;
  text-align: center;
  color: #000000;
  white-space: nowrap;
}

@media only screen and (max-width: 800px) {
  .img-container2 .head-txt {
    position: absolute;
    top: 0vw;
    left: 0vw;
    width: 41.06667vw;
    height: 18.93333vw;
    font-size: 18.93333vw;
  }
}

.img-container2 .lei1 {
  position: absolute;
  top: 13.69792vw;
  left: 3.125vw;
  width: 28.59375vw;
  height: 42.86458vw;
  background-image: url("../images/styleguide/leisure/1.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@media only screen and (max-width: 800px) {
  .img-container2 .lei1 {
    position: absolute;
    top: 18.13333vw;
    left: 5.09333vw;
    width: 42.69333vw;
    height: 63.52vw;
  }
}

.img-container2 .lei2 {
  position: absolute;
  top: 13.69792vw;
  left: 35.83333vw;
  width: 28.59375vw;
  height: 42.86458vw;
  background-image: url("../images/styleguide/leisure/2.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@media only screen and (max-width: 800px) {
  .img-container2 .lei2 {
    position: absolute;
    top: 18.13333vw;
    left: 52.10667vw;
    width: 42.69333vw;
    height: 63.52vw;
  }
}

.img-container2 .lei3 {
  position: absolute;
  top: 13.69792vw;
  left: 68.54167vw;
  width: 28.59375vw;
  height: 42.86458vw;
  background-image: url("../images/styleguide/leisure/3.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@media only screen and (max-width: 800px) {
  .img-container2 .lei3 {
    position: absolute;
    top: 86.66667vw;
    left: 5.09333vw;
    width: 42.69333vw;
    height: 63.52vw;
  }
}

.img-container2 .lei4 {
  position: absolute;
  top: 60.20833vw;
  left: 3.125vw;
  width: 28.59375vw;
  height: 42.86458vw;
  background-image: url("../images/styleguide/leisure/4.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@media only screen and (max-width: 800px) {
  .img-container2 .lei4 {
    position: absolute;
    top: 86.66667vw;
    left: 52.10667vw;
    width: 42.69333vw;
    height: 63.52vw;
  }
}

.img-container2 .lei5 {
  position: absolute;
  top: 60.20833vw;
  left: 35.83333vw;
  width: 28.59375vw;
  height: 42.86458vw;
  background-image: url("../images/styleguide/leisure/5.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@media only screen and (max-width: 800px) {
  .img-container2 .lei5 {
    position: absolute;
    top: 155.2vw;
    left: 5.09333vw;
    width: 42.69333vw;
    height: 63.52vw;
  }
}

.img-container2 .lei6 {
  position: absolute;
  top: 60.20833vw;
  left: 68.54167vw;
  width: 28.59375vw;
  height: 42.86458vw;
  background-image: url("../images/styleguide/leisure/6.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@media only screen and (max-width: 800px) {
  .img-container2 .lei6 {
    position: absolute;
    top: 155.2vw;
    left: 52.10667vw;
    width: 42.69333vw;
    height: 63.52vw;
  }
}

.img-container3 {
  position: relative;
  width: 100%;
  height: 60.26042vw;
}

@media only screen and (max-width: 800px) {
  .img-container3 {
    position: relative;
    width: 100%;
    height: 160.93333vw;
  }
}

.img-container3 .head-txt {
  position: absolute;
  top: 1.19792vw;
  left: 0vw;
  width: 31.40625vw;
  height: 8.64583vw;
  right: 0;
  margin: auto;
  font-family: adine;
  font-size: 8.33333vw;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 9.27083vw;
  letter-spacing: normal;
  text-align: center;
  color: #000000;
  white-space: nowrap;
}

@media only screen and (max-width: 800px) {
  .img-container3 .head-txt {
    position: absolute;
    top: 0vw;
    left: 0vw;
    width: 51.73333vw;
    height: 18.93333vw;
    font-size: 18.93333vw;
  }
}

.img-container3 .comm1 {
  position: absolute;
  top: 13.69792vw;
  left: 3.125vw;
  width: 28.59375vw;
  height: 42.86458vw;
  background-image: url("../images/styleguide/commercial/1.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@media only screen and (max-width: 800px) {
  .img-container3 .comm1 {
    position: absolute;
    top: 18.13333vw;
    left: 5.09333vw;
    width: 42.69333vw;
    height: 63.52vw;
  }
}

.img-container3 .comm2 {
  position: absolute;
  top: 13.69792vw;
  left: 35.83333vw;
  width: 28.59375vw;
  height: 42.86458vw;
  background-image: url("../images/styleguide/commercial/2.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@media only screen and (max-width: 800px) {
  .img-container3 .comm2 {
    position: absolute;
    top: 18.13333vw;
    left: 52.10667vw;
    width: 42.69333vw;
    height: 63.52vw;
  }
}

.img-container3 .comm3 {
  position: absolute;
  top: 13.69792vw;
  left: 68.54167vw;
  width: 28.59375vw;
  height: 42.86458vw;
  background-image: url("../images/styleguide/commercial/3.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@media only screen and (max-width: 800px) {
  .img-container3 .comm3 {
    position: absolute;
    top: 86.66667vw;
    left: 5.09333vw;
    width: 42.69333vw;
    height: 63.52vw;
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.45);
  display: none;
}

.item-popup {
  position: absolute;
  top: 0.88542vw;
  left: 19.375vw;
  width: 60.98958vw;
  height: 47.44792vw;
  position: fixed;
  -webkit-box-shadow: 0.10417vw 0.10417vw 0.10417vw 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0.10417vw 0.10417vw 0.10417vw 0 rgba(0, 0, 0, 0.16);
  background-color: #e8e8e8;
  z-index: 999;
  display: none;
}

@media only screen and (max-width: 800px) {
  .item-popup {
    position: absolute;
    top: 13.33333vw;
    left: 2.66667vw;
    width: 94.66667vw;
    height: 133.33333vw;
    position: fixed;
  }
}

.item-popup .cross-x {
  position: absolute;
  top: 0.9375vw;
  left: 58.90625vw;
  width: 1.14583vw;
  height: 1.14583vw;
  color: #000000;
  font-family: adequate;
  font-weight: bolder;
  font-size: 1.5625vw;
  cursor: pointer;
}

@media only screen and (max-width: 800px) {
  .item-popup .cross-x {
    position: absolute;
    top: 2.66667vw;
    left: 86.66667vw;
    width: 8vw;
    height: 8vw;
    font-size: 6.4vw;
  }
}

.item-popup .pop-img {
  position: absolute;
  top: 1.97917vw;
  left: 2.03125vw;
  width: 28.59375vw;
  height: 42.86458vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

@media only screen and (max-width: 800px) {
  .item-popup .pop-img {
    position: absolute;
    top: 8vw;
    left: 13.33333vw;
    width: 68vw;
    height: 80vw;
  }
}

.item-popup .pop-img .img1 {
  position: absolute;
  top: 2.5vw;
  left: 31.45833vw;
  width: 11.51042vw;
  height: 17.03125vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  cursor: pointer;
}

@media only screen and (max-width: 800px) {
  .item-popup .pop-img .img1 {
    position: absolute;
    top: 88vw;
    left: -5.33333vw;
    width: 24vw;
    height: 32vw;
  }
}

.item-popup .pop-img .img2 {
  position: absolute;
  top: 2.5vw;
  left: 44.375vw;
  width: 11.51042vw;
  height: 17.03125vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  cursor: pointer;
}

@media only screen and (max-width: 800px) {
  .item-popup .pop-img .img2 {
    position: absolute;
    top: 88vw;
    left: 22.66667vw;
    width: 24vw;
    height: 32vw;
  }
}

.item-popup .pop-img .img3 {
  position: absolute;
  top: 21.09375vw;
  left: 31.45833vw;
  width: 11.51042vw;
  height: 17.03125vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  cursor: pointer;
}

@media only screen and (max-width: 800px) {
  .item-popup .pop-img .img3 {
    position: absolute;
    top: 88vw;
    left: 50.66667vw;
    width: 24vw;
    height: 32vw;
  }
}
/*# sourceMappingURL=styleguide.css.map */