.back-white {
  background-color: #fff;
}

.hide {
  opacity: 0.4;
}

.show {
  opacity: 1 !important;
}

.color-red {
  color: #f13039 !important;
}

.color-blue {
  color: #277cea;
}

.border-top {
  border-top: 1.6px solid #000 !important;
}

.btn-button {
  background-image: linear-gradient(90deg, #ff2808 0%, #ffbd23 90%);
  font-size: 16px;
  color: #fff;
  border-radius: 8px;
  padding: 5px 20px;
}
.btn-button:hover {
  color: #fff;
  opacity: 0.9;
}

button:focus {
  box-shadow: none !important;
}

button:hover {
  opacity: 0.9;
}

.modal-backdrop.show {
  opacity: 0.8;
}

@keyframes ShowDash {
  from {
      opacity: 0.4;
  }
  to {
      opacity: 1;
  }
}

@keyframes ShowDetails {
  from {
      opacity: 0;
      width: 0;
  }
  to {
      opacity: 1;
  }
}

.modal-backdrop {
  background-color: #000000ba;
}

/* Track */
/* Handle */
/* Handle on hover */
.map {
  margin-top: 40px;
}
@media only screen and (max-width: 1440px) {
  .map .container-xl {
      max-width: 1164px;
  }
}
@media only screen and (max-width: 1366px) {
  .map .container-xl {
      max-width: 1088px;
  }
}
@media only screen and (max-width: 1283px) {
  .map .container-xl {
      max-width: 982px;
  }
  .map .container-xl .hide-on-pc-HD {
      display: none;
  }
}
.map-header,
.map-wrapper {
  position: relative;
  color: #fff;
}
.map-header .map-text {
  left: -12%;
}
@media only screen and (max-width: 1366px) {
  .map-header .map-text {
      left: -13%;
  }
}
@media only screen and (max-width: 1283px) {
  .map-header .map-text {
      left: -14%;
  }
  .map-header .map-text .hide-on-pc-HD {
      display: none;
  }
}
@media only screen and (max-width: 63.9375em) {
  .map-header .map-text {
      left: -1.8%;
  }
  .map-header .map-text .hide-on-bothTM {
      display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .map-header .map-text {
      left: 2%;
  }
  .map-header .map-text .hide-on-mobile {
      display: none;
  }
}
.map-cover {
  width: 58%;
  position: relative;
}
@media only screen and (max-width: 63.9375em) {
  .map-cover {
      width: 82%;
      margin-left: auto;
  }
  .map-cover .hide-on-bothTM {
      display: none !important;
  }
}
.map-restaurant__heading {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 90%;
  padding-top: 14px;
  border-top: 1.8px solid #000;
  border-bottom: 0px;
  transform: translateX(-50%);
}
.map-restaurant .map-item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  background-color: #818285;
}
.map-restaurant .map-list {
  border-top: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
}
.map-restaurant .map-details {
  background-color: transparent;
  width: max-content;
  display: block;
  border: 0;
  bottom: -438px;
}
.map-restaurant .map-details::after,
.map-restaurant .map-details::before {
  display: none;
}
.map-offices {
  position: relative;
}
.map-offices.hide ~ .map-text {
  opacity: 0.4;
}
.map-offices:hover + .map-restaurant,
.map-offices:hover ~ .map-tech,
.map-offices:hover ~ .map-parking {
  opacity: 0.4;
}
.map-offices .map-item {
  min-height: 250px;
}
.map-offices .map-details {
  width: 60%;
  bottom: -242px;
  left: 100%;
}
.map-offices .map-details::after {
  right: 10px;
  width: 70%;
  transform: translateX(-68%);
}
.map-offices .map-details::before {
  left: -22%;
  top: -73%;
  transform: translateY(-11%);
}
.map-offices .map-details__icon {
  top: -8%;
  transform: translateX(-57%);
}
.map-offices .map-details__table {
  text-align: center;
}
.map-offices .map-details__table tr > th {
  font-weight: bold;
  font-size: 16px;
  padding: 8px 38px;
}
.map-offices .map-details__table tr > td {
  padding: 8px 20px;
}
.map-tech .map-list {
  border-bottom: 0;
}
.map-tech .map-list:first-child .map-item {
  background-color: #e41e26;
}
.map-tech .map-list:nth-child(2) .map-item {
  background-color: #fadccf;
}
.map-tech .map-item {
  background-color: #e41e26;
}
.map-tech .map-details {
  bottom: -120px;
  left: 103%;
}
.map-tech .map-details::after {
  height: 41%;
  width: 76%;
  right: 15%;
}
.map-tech .map-details::before {
  top: -45%;
  left: -29%;
}
.map-tech .map-details__icon {
  top: -11%;
}
.map-tech__center,
.map-tech__header {
  position: relative;
}
.map-tech__center .map-item {
  background-color: #e41e26 !important;
  min-height: 44px;
}
.map-tech__center .map-text {
  top: 82%;
  left: -24%;
}
@media only screen and (max-width: 1366px) {
  .map-tech__center .map-text {
      left: -26%;
  }
}
@media only screen and (max-width: 1283px) {
  .map-tech__center .map-text {
      left: -28%;
  }
  .map-tech__center .map-text .hide-on-pc-HD {
      display: none;
  }
}
@media only screen and (max-width: 46.1875em) {
  .map-tech__center .map-text {
      left: -24%;
      top: 68%;
  }
  .map-tech__center .map-text .hide-on-mobile {
      display: none;
  }
}
.map-tech__footer .map-item {
  min-height: 66px;
}
.map-tech__header .map-item {
  min-height: 170px;
}
.map-tech__header .map-text {
  top: 65%;
  left: -21%;
}
@media only screen and (max-width: 1366px) {
  .map-tech__header .map-text {
      left: -22%;
  }
}
@media only screen and (max-width: 1283px) {
  .map-tech__header .map-text {
      left: -24%;
  }
  .map-tech__header .map-text .hide-on-pc-HD {
      display: none;
  }
}
@media only screen and (max-width: 46.1875em) {
  .map-tech__header .map-text {
      left: -19%;
      top: 56%;
  }
  .map-tech__header .map-text .hide-on-mobile {
      display: none;
  }
}
.map-parking {
  color: #000;
}
.map-parking .map-list {
  border-top: 1.2px solid #fff;
  width: 83%;
}
.map-parking .map-list .map-item__title {
  width: 61.2%;
}
.map-parking .map-item {
  min-height: 92px;
  background-color: #dcddde;
}
.map-parking .map-text {
  left: -22%;
}
@media only screen and (max-width: 1366px) {
  .map-parking .map-text {
      left: -24%;
  }
}
@media only screen and (max-width: 1283px) {
  .map-parking .map-text {
      left: -26%;
  }
  .map-parking .map-text .hide-on-pc-HD {
      display: none;
  }
}
@media only screen and (max-width: 46.1875em) {
  .map-parking .map-text {
      left: -22%;
  }
  .map-parking .map-text .hide-on-mobile {
      display: none;
  }
}
.map-parking .map-side {
  bottom: -42%;
}
.map-parking .map-side::before {
  bottom: 80px;
}
.map-parking .map-side::after {
  z-index: -1;
  width: 27%;
  right: 87%;
}
.map-merger.hide {
  opacity: 1;
}
.map-merger.hide .map-text,
.map-merger.hide .map-item {
  opacity: 0.4;
}
.map-merger .map-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 0;
  grid-template-columns: 40% 60%;
}
.map-merger .map-list:nth-child(2) {
  width: 83%;
  grid-template-columns: 41% 59%;
}
.map-merger .map-list:nth-child(2) .map-item:last-child .map-item__title {
  width: 60.5%;
}
.map-merger .map-item {
  background-color: #e7e7e8;
  border-bottom: 0;
}
@media only screen and (max-width: 46.1875em) {
  .map-merger .map-item {
      justify-content: start;
  }
  .map-merger .map-item .hide-on-mobile {
      display: none;
  }
  .map-merger .map-item__title {
      width: 100%;
      padding: 0px 8px 0 0;
      line-height: 18px;
  }
}
@media only screen and (max-width: 46.1875em) {
  .map-merger .map-item__floor {
      padding-left: 8px;
  }
  .map-merger .map-item__floor .hide-on-mobile {
      display: none;
  }
}
@media only screen and (max-width: 23.5em) {
  .map-merger .map-item__floor {
      min-width: 13px;
  }
}
.map-merger .map-item:last-child {
  justify-content: start;
  background-color: #58585a;
}
.map-merger .map-item:last-child .map-item__title {
  width: 66%;
}
.map-merger .map-item__title {
  width: calc(var(--width) - 22%);
}
.map-merger .map-item.left {
  background-color: #e41e26;
  min-height: 50px;
}
@media only screen and (max-width: 46.1875em) {
  .map-merger .map-item.left > .map-item__title {
      width: 100%;
  }
  .map-merger .map-item.left > .map-item__title .hide-on-mobile {
      display: none;
  }
}
.map-merger .map-item.right {
  position: relative;
}
.map-merger .map-item.right .retail-text {
  position: absolute;
  left: 48%;
  transform: translate(-50%, -85%);
}
.map-merger .map-text {
  top: -58%;
  left: -20%;
}
@media only screen and (max-width: 1366px) {
  .map-merger .map-text {
      left: -21%;
  }
}
@media only screen and (max-width: 1283px) {
  .map-merger .map-text {
      left: -23%;
  }
  .map-merger .map-text .hide-on-pc-HD {
      display: none;
  }
}
@media only screen and (max-width: 46.1875em) {
  .map-merger .map-text {
      left: -18%;
  }
  .map-merger .map-text .hide-on-mobile {
      display: none;
  }
  .map-merger .map-item.right .retail-text {
    top: 30%;
    left: 54%;
  }
}
.map-merger__cover {
  position: relative;
}
.map-merger__cover .map-area__line {
  width: 8%;
}
.map-merger__cover .map-list {
  border-bottom: 0;
}
.map-merger .map-details.show {
  display: block !important;
}
.map-list {
  width: 75%;
  margin: 0 auto;
  border-bottom: 2px solid #fff;
}
.map-item {
  min-height: 22px;
  --rate: 1.111764705882353;
  --width: 68%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  padding: 2px 0;
  border: 0px solid #000;
  border-top: 0;
  background-color: #a7a9ac;
}
@media only screen and (max-width: 46.1875em) {
  .map-item {
      font-size: 13px;
      padding: 6px 0;
  }
  .map-item .hide-on-mobile {
      display: none;
  }
}
.map-item.limit {
  width: 90%;
  margin: 0 auto;
  border-top: 0;
}
.map-item.limit:nth-child(2) {
  border-bottom: 0;
}
.map-item.limit .map-item__title {
  width: calc(var(--width) * var(--rate));
}
.map-item__title {
  font-size: 15px;
  width: var(--width);
  text-align: center;
}
@media only screen and (max-width: 46.1875em) {
  .map-item__title {
      font-size: 13px;
      line-height: 18px;
      padding: 0px 16px;
  }
  .map-item__title .hide-on-mobile {
      display: none;
  }
}
.map-item__floor {
  min-width: 16px;
}
@media only screen and (max-width: 46.1875em) {
  .map-item__floor {
      text-align: center;
  }
  .map-item__floor .hide-on-mobile {
      display: none;
  }
}
@media only screen and (max-width: 23.5em) {
  .map-item__floor {
      min-width: 13px;
  }
}
.map-details,
.map-side {
  z-index: 2;
  position: absolute;
  left: 102%;
  display: none;
  border: 1.4px solid #000;
  animation: ShowDash 0.4s linear;
}
.map-details {
  padding: 14px 16px;
  background-color: #eeee;
  border: 1px solid #000;
  color: #000;
  bottom: -200px;
  width: 57%;
  max-width: max-content;
}
@media only screen and (max-width: 63.9375em) {
  .map-details {
      position: relative;
      bottom: 0px;
      left: 0;
  }
  .map-details .hide-on-bothTM {
      display: none !important;
  }
}
.map-details::after {
  content: "";
  position: absolute;
  right: -3%;
  transform: translateX(-50%);
  bottom: 101%;
  z-index: -1;
  width: 106%;
  height: 71%;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  animation: ShowDetails 0.3s linear;
}
@media only screen and (max-width: 63.9375em) {
  .map-details::after {
      display: none;
  }
  .map-details::after .hide-on-bothTM {
      display: none !important;
  }
}
.map-details::before {
  content: "";
  position: absolute;
  left: -60%;
  top: -74%;
  transform: translateY(0%);
  z-index: 2;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #000;
}
@media only screen and (max-width: 63.9375em) {
  .map-details::before {
      display: none;
  }
  .map-details::before .hide-on-bothTM {
      display: none !important;
  }
}
.map-details__heading {
  color: #fff;
  text-align: center;
  font-size: 22px;
  padding: 8px 14px;
  text-transform: uppercase;
  background-color: #e41e26;
}
.map-details__list {
  margin: 32px 0 14px;
  list-style-type: disc;
}
.map-details__item {
  padding-left: 14px;
  margin: 0 0 3px 20px;
  font-size: 14px;
  list-style-type: disc;
  line-height: 22px;
  font-weight: bold;
}
.map-details__info {
  color: #000;
}
.map-details__info:last-child {
  margin-top: 60px;
}
.map-details__info > p {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 20px;
  margin-bottom: 4px;
}
.map-details__data {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  color: #e41e26;
  font-size: 60px;
  font-weight: bold;
}
.map-details__data > p {
  margin: 24px 0 0 4px;
  color: #6c6c6c;
  font-size: 40px;
  font-weight: 500;
}
.map-side {
  bottom: -30%;
}
.map-side::after {
  content: "";
  position: absolute;
  right: 78%;
  bottom: 13%;
  z-index: -1;
  width: 32%;
  height: 40%;
  border-top: 2px solid #000;
  border-right: 0px;
}
.map-side::before {
  left: -28%;
  top: auto;
  bottom: 180px;
}
.map-side__top::after {
  right: 82%;
  width: 36%;
  height: 25%;
}
.map-side__top::before {
  bottom: 74px;
  left: -39%;
}
.map-side__top .map-details__icon {
  bottom: 66px;
  transform: translateY(-2%);
  left: -3%;
}
.map-area__total {
  margin-top: 4px;
  display: block;
  font-size: 17px;
}
.map-area__line {
  position: absolute;
  right: 87.5%;
  bottom: -1%;
  width: max-content;
  min-width: 200px;
  height: 1.6px;
  background-color: #000;
  color: #000;
}
@media only screen and (max-width: 46.1875em) {
  .map-area__line {
      left: -22.6%;
  }
  .map-area__line .hide-on-mobile {
      display: none;
  }
  .map-area__total{
    font-size: 14px;
  }
 .map-restaurant .map-details{
    display: none !important;
  }
}
.map-area__title {
  margin-top: 10px;
  font-weight: bold;
  font-size: 17px;
  color: #e42128;
}
@media only screen and (max-width: 46.1875em) {
  .map-area__title {
      font-size: 14px;
      width: 50%;
  }
  .map-area__title .hide-on-mobile {
      display: none;
  }
}
.map-img {
  padding-top: 90%;
  position: relative;
  overflow: hidden;
}
.map-img > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.map-info {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 16px;
  border-top: 1.4px solid #000;
  font-size: 14px;
  font-weight: bold;
  width: max-content;
}
.map-info__position {
  min-width: fit-content;
  display: inline-block;
}
.map-info__text {
  padding-left: 16px;
  font-size: 14px;
  line-height: 17px;
  min-width: fit-content;
  text-align: center;
  position: relative;
  display: inline-block;
}
.map-info__text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 7px;
  width: 2px;
  height: 100%;
  background-color: #000;
}
.map-modal .modal-header {
  border-bottom: 0;
}
.map-modal .modal-content {
  background-color: #eee;
}
.map-modal .modal-body .map-info {
  width: 100%;
  justify-content: center;
  font-size: 16px;
}
.map-modal .modal-body .map-info__text {
  font-size: 16px;
}
.map-modal .modal-body .map-details {
  width: 100%;
  max-width: 100%;
  display: none;
  padding-top: 0;
}
.map-modal .modal-body .map-details.show {
  border: 0;
  display: block;
}
.map-modal .modal-body .map-details__info > p {
  margin-bottom: 8px;
  text-align: center;
}
@media only screen and (max-width: 46.1875em) {
  .map-modal .modal-body .map-details__info > p {
      font-size: 17px;
  }
  .map-modal .modal-body .map-details__info > p .hide-on-mobile {
      display: none;
  }
}
.map-modal .modal-body .map-details__item {
  font-size: 18px;
}
.map-modal .modal-body .map-details__data {
  font-size: 75px;
  justify-content: center;
}
@media only screen and (max-width: 46.1875em) {
  .map-modal .modal-body .map-details__data > p {
      margin: 14px 0 0 6px;
      font-size: 30px;
  }
  .map-modal .modal-body .map-details__data > p .hide-on-mobile {
      display: none;
  }
}
@media only screen and (max-width: 46.1875em) {
  .map-modal .modal-body .map-details__data {
      font-size: 55px;
  }
  .map-modal .modal-body .map-details__data .hide-on-mobile {
      display: none;
  }
}
.map-modal .modal-body #map-restaurant {
  background-color: transparent;
}
.map-modal .modal-body #map-offices {
  border: 0px solid #000;
}
.map-modal .modal-body #map-offices .map-details__table {
  width: 100%;
  text-align: center;
}
.map-modal .modal-body #map-offices .map-details__table tr > th {
  font-weight: bold;
  font-size: 16px;
  padding: 8px 38px;
}
.map-modal .modal-body #map-offices .map-details__table tr > td {
  padding: 8px 20px;
}
.map-modal .modal-body #map-parking .map-info {
  flex-direction: column;
}
.map-modal .modal-body #map-parking .map-info__cover {
  margin-bottom: 10px;
}