@charset "UTF-8";

.in-box {
  background-color: #E1F3D4;
  color: #555555;
  padding: 3%;
}

.in-box p {
  margin: 0;
}

.in-box p.hr {
  border-bottom: 1px solid #808080;
  padding-bottom: 1.5%;
}

.in-box ul {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 150px;
  margin: 1.5% 0 0 calc(100%/9);
  padding-left: 1.5%;
  text-align: left;
  width: calc(100% - 1.5%);
}

.in-box ul li {
  width: calc(100% / 3);
}

.sliderWrap {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  width: 100%;
}

.sliderWrap div {
  border: 1px solid #808080;
  height: 256px;
  margin: 0 10px 10px 0;
  position: relative;
  width: calc((100% - 20px) / 3 - 2px);
  z-index: 0;
}

.sliderWrap div:nth-child(n+7) {
  margin-bottom: 0;
}

.sliderWrap div:nth-child(3n) {
  margin-right: 0;
}

.sliderWrap div img {
  display: inline-block;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: -1;
}

.button-link {
  color: #ffffff;
  display: block;
  height: 100%;
  position: relative;
  text-decoration: none;
  width: 100%;
}

.button-link h3 {
  background-color: #000000;
  bottom: -1px;
  display: block;
  left: 0;
  margin: 0;
  opacity: 0.75;
  padding: 12px 0;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: -1;
}

.button-link:hover {
  box-shadow: 0 0 0 3px #0000ff inset;
  box-shadow: 0 0 0 3px -webkit-link inset;
  box-shadow: 0 0 0 3px -moz-hyperlinkText inset;
  cursor: pointer;
}

#modal-content {
  display: none;
  height: 100%;
  width: 100%;
  z-index: 2;
}

#modal-overlay {
  background-color: #000000;
  display: none;
  height: 120%;
  left: 0;
  opacity: 0.75;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.bxslider {
  margin: 0;
  padding: 0;
}

.bxslider > div {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  margin: 0.5px;
}

.modal-main {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.content {
  list-style: none;
  margin: 0 3% 0 0;
  padding: 0;
  width: 77%;
}

.content li {
  width: 100%;
}

.content li img {
  display: block;
  width: 100%;
}

.tab {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 20%;
}

.tab li {
  background-color: #000000;
  display: block;
  height: 25%;
  width: 100%;
}

.tab li.blank {
  visibility: hidden;
}

.tab li img {
  display: block;
  height: 100%;
  opacity: 0.3;
  width: 100%;
}

.tab li:hover {
  cursor: pointer;
}

.tab li.select img {
  opacity: 1;
}

.modal-title {
  background-color: #ffffff;
  height: calc(20% - 35px);
  width: 20%;
}

.modal-title h4 {
  border-bottom: 2px solid #486608;
  margin: 35px 0 0 0;
  padding: 0;
  text-align: center;
}

.modal-title p {
  font-size: 12px;
  margin: 0;
  padding: 0;
  text-align: center;
}

.modal-side {
  background-color: #eeeeee;
  display: block;
  text-align: left;
}

.modal-side ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: calc(100% - 20px);
  margin: 0;
  padding: 10px 0 10px 40px;
}

.floorMapContainer img {
  width: 80%;
}