#mapContainer {
  --layer-width: 320px;
}

#hospitalMap {
  width: calc(100% - var(--layer-width));
  height: 100vh;
}

/* infoWindow */
#hospitalMap .info-inner-wrapper {
  position: relative;
  min-width: 40vw;
}
#hospitalMap .info-inner-wrapper .gm-ui-hover-effect {
  height: 38px !important;
}
#hospitalMap .info-inner-wrapper .gm-ui-hover-effect span {
  margin: 7px 12px !important;
}
#hospitalMap .info-inner-wrapper .gm-style-iw-ch {
  padding-top: 0px !important;
}
#hospitalMap .info-inner-wrapper .swiper-container {
  padding-bottom: 5px;
}
#hospitalMap .info-inner-wrapper .swiper-container.multiple {
  padding-bottom: 26px;
}
#hospitalMap .info-inner-wrapper .swiper-container .swiper-pagination-fraction,
#hospitalMap .info-inner-wrapper .swiper-container .swiper-pagination-custom,
#hospitalMap .info-inner-wrapper .swiper-container .swiper-horizontal > .swiper-pagination-bullets,
#hospitalMap .info-inner-wrapper .swiper-container .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 0;
}
#hospitalMap .info-inner-wrapper .swiper-container .swiper-pagination-bullet-active {
  background: #000;
}
#hospitalMap .info-inner-wrapper .multiple-tag {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 11px;
  font-weight: normal;
  color: #fff;
  background: #000;
  padding: 2px 5px;
  border-radius: 10px;
}
#hospitalMap .info-inner-wrapper .swiper-slide > a {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.1em;
  outline: none;
  text-decoration: none;

  font-weight: 700;
  width: 100%;
  padding: 8px 17px 8px 4px;
  background: url(/new/img/renew/i_next_black.svg) no-repeat 100%;
  box-sizing: border-box;
}
#hospitalMap .info-inner-wrapper .swiper-slide > a.brand {
  padding-left: 28px;
  padding-right: 20px;
  color: var(--main-color);
  background: url(/new/img/renew/i_trust_d.svg), url(/new/img/renew/i_next_black.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 50%, 100%;
  background-size: 22px;
}

#mapContainer .description {
  /* margin-bottom: 5px; */
}
#mapContainer .description .info {
  color: #121212;
  font-weight: 300;
}

#mapContainer .description .info .star-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: #777;
  font-weight: 600;
}
#mapContainer .description .info .star-wrap .common-star-score {
  margin-right: 2px;
}
#mapContainer .description .info .star-wrap strong {
  margin-right: 6px;
  font-weight: bold;
  color: #000;
}
#mapContainer .description .info p:not(:last-child) {
  margin: 6px 0;
}
#mapContainer .description .info .bottom-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#mapContainer .description .info .left > a i {
  margin-right: 4px;
  font-size: 14px;
}
#mapContainer .description .info .info-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 2px 0 6px 0;
}
#mapContainer .description .info .info-wrap > li {
  position: relative;
  font-size: 13px;
  margin-bottom: 3px;
  line-height: 1.2;
}
#mapContainer .description .info .info-wrap > li span {
  font-size: 12px;
  font-weight: 700;
  color: #000;
}
#mapContainer .description .info .info-wrap > li:not(:last-child) {
  margin-right: 10px;
}
#mapContainer .description .info .info-wrap > li:not(:last-child):after {
  display: block;
  position: absolute;
  content: "";
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1px;
  background: #3b3b3b;
}
#mapContainer .description .info .info-wrap > li i {
  margin-right: 3px;
}

#mapContainer .description .logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 5px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #dcdcdc;
}
#mapContainer .description .logo img {
  object-fit: cover;
  width: 100%;
}
/* list layer */
#ListTableLayer {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;

  width: var(--layer-width);
  height: 100vh;
  border-left: 1px solid #ddd;
  background: #fff;
  z-index: 999;
  overflow: hidden;
}
#ListTableLayer .layer-header {
}
#ListTableLayer .layer-header .search-wrap {
  display: flex;
  margin-top: 10px;
}
#ListTableLayer .layer-header .search-button-wrap {
  display: flex;
  align-items: center;

  font-size: 11px;
  padding: 7px 12px;
}
#ListTableLayer .layer-header .search-button-wrap button {
  flex-shrink: 0;
  margin-right: 3px;
}
#ListTableLayer .layer-header .search-button-wrap button.btn-brand {
  padding: 5px;
  border: 1px solid var(--main-color);
  background: #fff;
  color: var(--main-color);
  border-radius: 4px;
  font-weight: 500;
  display: flex;
  align-items: center;
}
#ListTableLayer .layer-header .search-button-wrap button.btn-brand.active {
  background: var(--main-color);
  color: #fff;
}
#ListTableLayer .layer-header .search-button-wrap button.btn-all {
  display: none;
  background: #000;
  border: 1px solid #000;
}
#ListTableLayer .layer-header .search-button-wrap button.btn-location {
  padding: 5px;
  border: 0px solid;
  border-radius: 4px;
  background: #ff6600;
  color: #fff;
  font-weight: 500;
  display: flex;
  align-items: center;
}
#ListTableLayer .layer-header .search-button-wrap input {
  width: 100%;
}
#ListTableLayer .layer-header .logo_img {
  padding: 7px 12px;
}

#ListTableLayer .layer-header .search-button-wrap .search-input {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 2px solid #000;
  outline: none;
}
#ListTableLayer .list-container {
  display: flex;
  height: 100%;
  overflow-y: auto;
  border-top: 1px solid #ddd;
}
#ListTableLayer .hospital-list {
  height: 100%;
  width: 100%;
}
#ListTableLayer .hospital-list > li.no-data {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  box-sizing: border-box;
}
#ListTableLayer .hospital-list > li {
  position: relative;
  padding: 18px 12px;
  border-bottom: 1px solid #ddd;
  font-size: 12px;
  color: #999;
}
#ListTableLayer .hospital-list > li.brand .name {
  padding: 5px 0 5px 28px;
  color: var(--main-color);
  background: url(/new/img/renew/i_trust_d.svg);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 22px;
}

#ListTableLayer .hospital-list > li .title {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 4px;
}

#ListTableLayer .hospital-list > li:hover {
  background: #fdecdb52;
}
#ListTableLayer .hospital-list > li .name {
  font-weight: 700;
  display: flex;
  align-items: center;
  color: #000;
  cursor: pointer;
}
#ListTableLayer .hospital-list > li.brand .name {
  color: var(--main-color);
}
#hospitalMap .info-inner-wrapper .swiper-slide a:hover,
#ListTableLayer .hospital-list > li .name:hover {
  color: #f56602;
}
#ListTableLayer .hospital-list > li .name .img-wrap {
  width: 24px;
  height: 24px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 5px;
}
#ListTableLayer .hospital-list > li .name .img-wrap img {
  width: 100%;
}
#ListTableLayer .hospital-list > li .title .mapmaker_icon {
  padding: 0px 5px;
  margin-left: 5px;
  border: 1px solid var(--main-color);
  border-radius: 5px;
  background: #fff;
  font-size: 1em;
  text-decoration: none;
  color: var(--main-color);
}

#ListTableLayer .hospital-list > li .info-wrap,
#ListTableLayer .hospital-list > li .button-wrap {
  display: flex;
  align-items: center;
}
#ListTableLayer .hospital-list > li .button-wrap button {
  border: 1px solid #dcdcdc;
}
#ListTableLayer .hospital-list > li .info-wrap {
}
#ListTableLayer .hospital-list > li .info-wrap > li {
  position: relative;
  font-size: 12px;
  color: #999;
}
#ListTableLayer .hospital-list > li .info-wrap > li span {
  font-weight: 700;
  color: #ec6c85;
}
#ListTableLayer .hospital-list > li .info-wrap > li:not(:last-child) {
  margin-right: 10px;
}
#ListTableLayer .hospital-list > li .info-wrap > li:not(:last-child):after {
  display: block;
  position: absolute;
  content: "";
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 100%;
  background: #999;
}
#ListTableLayer .hospital-list > li .info-wrap > li i {
  margin-right: 3px;
}

#ListTableLayer .hospital-list > li .tel {
  display: flex;
  align-items: center;
  padding: 3px 0px;
  color: #999;
  font-weight: 400;
}
#ListTableLayer .hospital-list > li .tel i {
  margin-right: 3px;
}
/* -----------------------------------------------------------
  ------ mobile ------
--------------------------------------------------------------  */
#mapContainer {
  --layer-height: 20vh;
  --layer-height-open: 45vh;
}
.mobile #ListTableLayer .layer-header {
  position: fixed;
  top: 0;
  width: 100%;
  border: none;
  box-sizing: border-box;
}
.mobile #ListTableLayer .layer-header .logo_img {
  background: #fff;
}
.mobile #ListTableLayer .layer-header .search-button-wrap {
  position: absolute;
  right: 0;
  width: 80%;

  justify-content: flex-end;
  padding: 10px 12px;
}
.mobile #ListTableLayer .layer-header .search-button-wrap .search-input {
  max-width: 120px;
}
.mobile #hospitalMap {
  width: 100%;
  height: calc(100vh - var(--layer-height) - 50px);
  margin-top: 50px;
}
.mobile #ListTableLayer {
  width: 100%;
  height: calc(var(--layer-height));
  top: auto;
  bottom: 0;
  padding-top: 25px;
  border-radius: 8px 8px 0 0px;

  box-sizing: border-box;
}
.mobile #ListTableLayer.open {
  height: var(--layer-height-open);
}
.mobile #ListTableLayer .layer-header .search-wrap {
  margin-top: 0;
}
.mobile .drag-icon {
  width: 100%;
  height: 25px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile .drag-icon p {
  width: 55px;
  height: 2px;
  border-radius: 10px;
  background: #dcdcdc;
}

/* kakao */
#mapContainer.kakao .info-inner-wrapper {
  background: #fff;
  padding: 4px 12px;
  width: 70vw;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #d1d1d4;
  border-radius: 6px;
  position: relative;
  left: 2px;
  bottom: 26px;
}

#mapContainer.kakao #hospitalMap .info-inner-wrapper {
  /* max-width: 40%; */
  min-width: auto;
  width: 80vw;
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 288px;
  padding: 8px 12px;
  margin-left: -144px;
  text-align: left;
  overflow: hidden;
  font-size: 12px;
  font-family: "Malgun Gothic", dotum, "돋움", sans-serif;
  line-height: 1.5;
  overflow: visible;
}
#mapContainer.kakao #hospitalMap .info-inner-wrapper:after {
  content: "";
  position: absolute;
  transform: translateY(100%);
  margin-left: -12px;
  left: 50%;
  bottom: 0;
  width: 22px;
  height: 12px;
  background: url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png");
}
#mapContainer.kakao #hospitalMap .info-inner-wrapper .multiple-tag {
  right: 10px;
  bottom: 8px;
  line-height: 1.2;
}
#mapContainer.kakao #mapContainer .description .info p:not(:last-child) {
  margin: 0;
}
#mapContainer.kakao #hospitalMap .info-inner-wrapper .swiper-container.multiple {
  padding-bottom: 16px;
}

#mapContainer.kakao #hospitalMap .info-inner-wrapper .swiper-container.multiple {
  padding-bottom: 16px;
}