* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  min-width: 1100px;
  background: #fff;
  color: #182236;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  letter-spacing: 0;
}
button,
input {
  font: inherit;
  letter-spacing: 0;
}
.header .navigator .toplogo {
  display: block;
}
.institution-page,
.institution-page div,
.institution-page span,
.institution-page p {
  font-size: inherit;
}
.query-banner {
  height: 146px;
  background: #dff2ff url("../images/institution-query/query-banner.png") center / cover no-repeat;
}
.query-banner-inner {
  width: min(1200px, calc(100% - 80px));
  margin: 0 auto;
  padding-top: 33px;
  color: #117fac;
  text-align: center;
}
.query-banner h1 {
  margin: 0 0 13px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}
.query-banner p {
  margin: 0;
  color: #3f94b7;
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
}
.query-content {
  background: #fff;
}
.query-shell {
  width: 1320px;
  margin: 0 auto;
  padding: 26px 0 33px;
}
.product-tabs {
  display: grid;
  width: 760px;
  height: 42px;
  margin: 0 auto 15px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.product-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #087ead;
  border-radius: 2px;
  background: #fff;
  color: #087ead;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.product-tab.is-selected {
  background: #1687b4;
  color: #fff;
}
.product-tab b {
  font-size: 14px;
  font-weight: 500;
}
.filter-form {
  position: relative;
  z-index: 10;
  display: grid;
  width: 1015px;
  margin: 0 auto 38px;
  grid-template-columns: 760px 245px;
  gap: 10px;
}
.region-cascade {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.region-trigger {
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border: 1px solid #aaa;
  border-radius: 2px;
  background: #fff;
  color: #333;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
.region-trigger > span:first-child {
  min-width: 0;
  flex: 1;
  text-align: left;
}
.chevron {
  width: 8px;
  height: 8px;
  border-right: 1px solid #252a2e;
  border-bottom: 1px solid #252a2e;
  transform: translateY(-2px) rotate(45deg);
}
.region-menus {
  position: absolute;
  top: 42px;
  left: 0;
  display: block;
  width: calc(33.333333% - 6.666667px);
}
.region-menus[data-level="city"] {
  left: calc(33.333333% + 3.333333px);
}
.region-menus[data-level="district"] {
  left: calc(66.666667% + 6.666667px);
}
.region-menu {
  box-sizing: border-box;
  width: 100%;
  max-height: 238px;
  padding: 6px;
  overflow-y: auto;
  scrollbar-color: #b8c4ca transparent;
  scrollbar-width: thin;
  border: 1px solid #d4d4d4;
  background: #fff;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.14);
}
.region-menu::-webkit-scrollbar {
  width: 6px;
}
.region-menu::-webkit-scrollbar-track {
  background: transparent;
}
.region-menu::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #b8c4ca;
}
.region-menu::-webkit-scrollbar-thumb:hover {
  background: #91a2ab;
}
.region-option {
  position: relative;
  display: flex;
  width: 100%;
  height: 34px;
  align-items: center;
  padding: 0 10px;
  border: 0;
  background: #fff;
  color: #2d3338;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
}
.region-option:hover,
.region-option.is-selected {
  border-radius: 3px;
  background: #eaf7fc;
  color: #087ead;
}
.keyword-field {
  display: grid;
  height: 42px;
  grid-template-columns: minmax(0, 1fr) 42px;
  border: 1px solid #aaa;
  border-radius: 2px;
  background: #fff;
}
.keyword-field input {
  min-width: 0;
  padding: 0 13px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333;
  font-size: 14px;
}
.keyword-field input::placeholder {
  color: #b5b5b5;
  opacity: 1;
}
.keyword-field button {
  display: grid;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  place-content: center;
}
.keyword-field img {
  width: 19px;
  height: 19px;
}
.result-panel {
  min-height: 0;
}
.hospital-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 22px 20px;
}
.hospital-card {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  min-height: 148px;
  padding: 18px 20px 15px;
  border: 1px solid #e3eff6;
  border-radius: 8px;
  background: #fff url("../images/institution-query/card-bg-v2.png") center / calc(100% + 8px) calc(100% + 8px) no-repeat;
  background-origin: border-box;
  background-clip: border-box;
}
.hospital-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.hospital-title-row h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #182236;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.distance {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: #087ead;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.distance img {
  width: 14px;
  height: 14px;
}
.hospital-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: #4b96b5;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}
.hospital-line > img {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.hospital-line > span,
.hospital-line > a {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hospital-card .address-line,
.hospital-card .address-line > span {
  font-size: 12px !important;
  font-weight: 400;
}
.hospital-card .address-line > span {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.product-tags {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.institution-page .hospital-card .product-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 2px;
  background: #e5f4fa;
  color: #087ead;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.product-tag b {
  padding: 2px 3px;
  border-radius: 2px;
  background: #087ead;
  color: #fff;
  font-size: 8px;
  font-weight: 600;
}
.empty-panel {
  display: grid;
  width: 100%;
  height: 290px;
  border: 0;
  background: #fff url("../images/institution-query/empty-bg.png") center / 100% 100% no-repeat;
  place-content: center;
}
.empty-message {
  width: 720px;
  color: #858b91;
  text-align: center;
}
.empty-icon {
  display: grid;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: transparent;
  place-content: center;
}
.empty-icon img {
  width: 76px;
  height: 76px;
}
.empty-icon.is-building {
  background: transparent;
}
.empty-icon.is-building img {
  width: 76px;
  height: 76px;
}
.empty-message p {
  margin: 0;
  color: #858b91;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.empty-message .manual-region-text {
  display: inline;
  color: #252a2e;
  font-size: inherit;
}
.status-message {
  padding: 100px 12px;
  color: #8b9197;
  font-size: 14px;
  text-align: center;
}
.load-more {
  display: block;
  width: 120px;
  height: 28px;
  margin: 14px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #087ead;
  cursor: pointer;
  font-size: 12px;
}
.load-more:disabled {
  color: #9da1a5;
  cursor: default;
}
.institution-page .result-notes {
  margin-top: 32px;
  color: #777d83;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
@media screen and (max-width: 1300px) {
  .query-shell {
    width: 1080px;
  }
  .hospital-card {
    padding-right: 16px;
    padding-left: 16px;
  }
}