:root {
  --blue-960: #014a99;
  --blue-950: #062c5d;
  --blue-900: #063a7c;
  --blue-800: #07539b;
  --blue-700: #197bc3;
  --blue-500: #51a8df;
  --blue-100: #e8f5ff;
  --blue-50: #f6fbff;
  --text: #3b4b5c;
  --muted: #7d8b99;
  --line: #d7e3ee;
  --white: #fff;
  --gold: #b59a5c;
  --red: #a83237;
  --panel: 1668px;
  --ease: cubic-bezier(.2, .75, .25, 1);
  --duration: 320ms;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  /* background: var(--blue-50); */
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

.site-header {
  position: relative;
  z-index: 20;
  background: #fff;
}

body.nav-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

img {
  max-width: 100%;
}

.page-shell {
    width: min(calc(100% - 40px), var(--panel));
  margin: 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.masthead {
  min-height: 145px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: block;
  flex: 0 1 862px;
  min-width: 0;
}

.brand img {
  width: min(100%, 862px);
  height: auto;
  display: block;
}

.masthead__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.site-search {
  width: min(345px, 21vw);
  height: 48px;
  display: flex;
  background: #fff;
  border: 1px solid #d9e6f0;
}

.site-search input {
  min-width: 0;
  flex: 1;
  padding: 0 12px;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 15px;
}

.site-search input::placeholder {
  color: #a7b4c1;
}

.site-search button {
  width: 82px;
  color: #fff;
  background: var(--blue-900);
  font-size: 15px;
  transition: background var(--duration) var(--ease);
}

.site-search button span {
  margin-right: 3px;
  font-size: 18px;
  vertical-align: -2px;
}

.site-search button:hover,
.site-search button:focus-visible {
  background: var(--blue-700);
}

.qr-pair {
  display: flex;
  gap: 14px;
}

.qr-pair figure {
  width: 104px;
  margin: 0;
  color: #718394;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
}

.qr-pair img {
  width: 96px;
  height: 109px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.nav-toggle {
  display: none;
  width: 43px;
  height: 40px;
  padding: 8px;
  color: #fff;
  background: var(--blue-900);
}

.nav-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: currentColor;
}

.main-nav {
  position: relative;
  z-index: 10;
  color: #fff;
  background: var(--blue-900);
  box-shadow: 0 5px 15px rgba(3, 44, 93, .12);
}

.main-nav__inner {
  display: flex;
  align-items: stretch;
}

.nav-item {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.nav-item > a {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: #fff;
  font-size: 20px;
  white-space: nowrap;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.nav-item > a::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: 0;
  transform: rotate(45deg) translateY(-2px);
  transition: opacity var(--duration) var(--ease);
}

.nav-item.has-dropdown > a::after {
  opacity: .8;
}

.nav-item:hover > a,
.nav-item:focus-within > a,
.nav-item.is-active > a {
  color: #fff;
  background: var(--blue-700);
}

.nav-item.is-active > a {
  box-shadow: inset 0 -3px 0 #8ed6ff;
}

.nav-dropdown {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 150px;
  padding: 7px;
  background: #fff;
  border: 1px solid #d4e4f1;
  box-shadow: 0 12px 26px rgba(3, 48, 100, .15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.dropdown-open .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown a {
  display: block;
  padding: 11px 15px;
  color: var(--text);
  font-size: 18px;
  white-space: nowrap;
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  color: var(--blue-800);
  background: var(--blue-100);
}

.hero-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #dfefff;
  aspect-ratio: 1920 / 333.333;
}

.hero-banner__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
}

.hero-banner__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-banner__bg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 6s ease-out;
}

.hero-banner__slide.is-active .hero-banner__bg {
  transform: scale(1);
}

.hero-banner__txt {
  position: absolute;
  z-index: 2;
  width: 36%;
  right: 7%;
  top: 50%;
  transform: translateY(-50%) translateX(-3vw);
  opacity: 0;
  transition: opacity .8s ease 1s, transform 1s ease 1s;
}

.hero-banner__slide.is-active .hero-banner__txt {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.hero-banner__slide--campus .hero-banner__txt {
  left: 7%;
  right: auto;
}

.hero-banner__txt img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.hero-banner__arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 80px;
  display: grid;
  place-items: center;
  color: #fff;
  font: 42px/1 serif;
  background: rgba(3, 54, 111, .2);
  border: 0;
  cursor: pointer;
  transition: background .3s;
}

.hero-banner__arrow:hover {
  background: rgba(3, 54, 111, .6);
}

.hero-banner__arrow--prev { left: 0; }
.hero-banner__arrow--next { right: 0; }

.hero-banner__dots {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 18px;
  display: flex;
  gap: 8px;
}

.hero-banner__dots button {
  width: 28px;
  height: 4px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: background .3s, width .3s;
}

.hero-banner__dots button.is-active {
  width: 40px;
  background: #fff;
}

.service-hero {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 637fr) minmax(0, 1000fr);
  gap: clamp(18px, 1.86vw, 31px);
  padding-top: 38px;
}

.service-hero::before {
  display: none;
}

.service-grid {
  display: grid;
  grid-template-columns: minmax(0, 196fr) minmax(0, 196fr) minmax(0, 237fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 4px;
  align-content: stretch;
  background: #f0e9dc;
  border: 1px solid #e7ddce;
}

.service-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 8px;
  overflow: hidden;
  color: var(--blue-800);
  background: #fff;
  border: 1px solid transparent;
  text-align: center;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease), color var(--duration) var(--ease);
}

.service-card:nth-child(2),
.service-card:nth-child(3) {
  grid-row: span 1;
}

.service-card--primary {
  grid-column: span 2;
  align-items: flex-start;
  padding-left: 0;
  background: var(--blue-800) url("../images/icon1bg.png") center / cover no-repeat;
  color: #fff;
  text-align: left;
}

.service-card--gold {
  grid-column: span 2;
  align-items: center;
  padding-left: 8px;
  background: #b59a5c url("../images/icon7bg.png") center / cover no-repeat;
  color: #fff;
  text-align: left;
}

.service-card__icon {
  width: 62px;
  height: 61px;
  flex: 0 0 61px;
  display: grid;
  place-items: center;
}

.service-card__icon img {
  display: block;
  max-width: 62px;
  max-height: 61px;
  object-fit: contain;
  transition: transform .9s ease-in-out;
}

.service-card:hover .service-card__icon img,
.service-card:focus-visible .service-card__icon img {
  animation: iconFloat 1.25s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.service-card > span:not(.service-card__icon) {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.service-card--primary .service-card__icon,
.service-card--primary > span:not(.service-card__icon) {
  width: 92px;
  margin-left: calc(27% - 46px);
  text-align: center;
}

.service-card__qr {
  position: absolute;
  top: 20px;
  right: calc(30% - 60px);
  width: 121px !important;
  height: 113px !important;
  object-fit: contain;
  opacity: .95;
}

.service-card:hover,
.service-card:focus-visible {
  z-index: 1;
  border-color: var(--blue-700);
  box-shadow: 0 5px 15px rgba(5, 79, 151, .2);
  transform: translateY(-2px);
}

.service-card--gold:hover,
.service-card--gold:focus-visible {
  border-color: #8e763c;
  box-shadow: 0 5px 15px rgba(107, 78, 21, .25);
}

.hero-slider {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #d7e6ef;
  aspect-ratio: 1000 / 487;
}

.hero-slider__track,
.hero-slide {
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease;
}
.hero-txt{
	position: absolute;
	z-index: 0;
	display: grid;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100px;
	line-height: 100px;
	padding: 0 120px 0 14px;
	color: #fff;
	background: rgba(0, 0, 0, 0.3); /* 黑底 30%透明度，文字白色正常 */
	font-size: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.slider-arrow,
.expert-arrow {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(3, 54, 111, .2);
  transition: background var(--duration) var(--ease);
}

.slider-arrow {
  top: 50%;
  width: 44px;
  height: 76px;
  font: 42px/1 serif;
  transform: translateY(-50%);
}

.slider-arrow--prev { left: 0; }
.slider-arrow--next { right: 0; }

.slider-arrow:hover,
.slider-arrow:focus-visible {
  background: rgba(3, 54, 111, .65);
}

.slider-dots {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 13px;
  display: flex;
  gap: 7px;
}

.slider-dots button {
  width: 27px;
  height: 4px;
  padding: 0;
  background: rgba(255, 255, 255, .55);
  transition: background var(--duration) var(--ease), width var(--duration) var(--ease);
}

.slider-dots button.is-active {
  width: 37px;
  background: #fff;
}

.headline-strip {
  min-height: 71px;
  display: flex;
  align-items: center;
  margin-top: 23px;
  border: 1px solid #07509a;
  background: #fff;
}

.headline-title {
  width: 204px;
  height: 71px;
  display: grid;
  place-items: center;
  flex: 0 0 204px;
  overflow: hidden;
  background: var(--blue-800);
  
}
.headline-title h4{

 font-size: 28px; 
 text-align: center;
 color: #fff;
 height: 70px;
line-height: 0;
 /* float: left; */
}
.headline-title img {
  width: 204px;
  height: auto;
  display: block;
}

.headline-marquee {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.headline-marquee__track {
  display: flex;
  gap: 88px;
  padding-left: 34px;
  white-space: nowrap;
  width: max-content;
  animation: ticker 28s linear infinite;
}

.headline-marquee__group {
  display: flex;
  gap: 88px;
}

.headline-marquee:hover .headline-marquee__track,
.headline-marquee:focus-within .headline-marquee__track {
  animation-play-state: paused;
}

.headline-marquee a {
  color: #434343;
  font-size: 16px;
}

.headline-marquee a:hover,
.headline-marquee a:focus-visible {
  color: var(--blue-800);
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 32px)); }
}

.section-band {
  margin-top: 42px;
  padding: 44px 0 52px;
  background: #edf7ff;
}

.departments {
  background: #fff url("../images/ksbigimg.png") center bottom / min(1602px, 100%) auto no-repeat;
}

.section-heading {
  position: relative;
  min-height: 72px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 26px;
}

.section-heading > div {
  position: relative;
}

.section-heading h2 {
  display: inline-block;
  margin: 0;
  color: var(--blue-800);
  font-size: 34px;
  line-height: 1.2;
}

.section-heading h2::after {
  content: "";
  display: block;
  width: 58px;
  height: 3px;
  margin-top: 8px;
  background: var(--blue-700);
}

.departments .section-heading h2::after {
  width: min(407px, 70vw);
  height: 11px;
  margin-top: 8px;
  background: url("../images/kstitle.png") left center / contain no-repeat;
}

.section-heading--center {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.section-heading--center h2 {
  content: "";
  display: block;

 
  margin-top: 8px;
 
}

.section-heading--center h2::after {
 width: 118px;
  margin-right: auto;
  margin-left: auto;
  height: 11px;
  margin-top: 8px;
  background: url("../images/zjbj.png") left center / contain no-repeat;
}

.section-heading--center .more-link {
  position: absolute;
  right: 0;
}



.section-heading--small {
  min-height: 45px;
  margin-bottom: 11px;
}

.section-heading--small h2 {
  font-size: 21px;
}

.section-heading--small h2::after {
  width: 44px;
  height: 2px;
  margin-top: 6px;
}

.more-link {
  min-width: 127px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 15px;
  color: #036dc1;
  background: #fff;
  border: 1px solid #9bc6e5;
  border-radius: 18px;
  font-size: 14px;
  white-space: nowrap;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.more-link b {
  color: var(--blue-700);
  font-size: 18px;
  font-weight: 400;
  transition: transform var(--duration) var(--ease);
}

.more-link:hover,
.more-link:focus-visible {
    background:#07509a;
  color:#fff;
  border-color: var(--blue-700);
  box-shadow: 0 3px 9px rgba(24, 118, 181, .12);
}

.more-link:hover b,
.more-link:focus-visible b {
  transform: translateX(4px);
}

.drawer-list {
  height: 400px;
  min-height: 400px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.drawer {
  min-width: 0;
  display: flex;
  flex: 0 0 101px;
  transition: flex-grow 1.4s cubic-bezier(.33, 0, .2, 1), flex-basis 1.4s cubic-bezier(.33, 0, .2, 1);
  
}

.drawer.is-open,
.drawer:hover,
.drawer:focus-within {
  flex: 1 1 0;
}

.drawer__tab {
  position: relative;
  width: 101px;
  min-width: 101px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 9px;
  overflow: hidden;
  color: #fff;
  background: var(--blue-800);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

.drawer:nth-child(2) .drawer__tab { background: #b59a5c; }
.drawer:nth-child(3) .drawer__tab { background: var(--red); }
.drawer:nth-child(4) .drawer__tab { background: #2388bc; }

.drawer__tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: .32;
  pointer-events: none;
}

.drawer:nth-child(1) .drawer__tab::before { background-image: url("../images/wkbj1.png"); }
.drawer:nth-child(2) .drawer__tab::before { background-image: url("../images/wkbj2.png"); }
.drawer:nth-child(3) .drawer__tab::before { background-image: url("../images/wkbj3.png"); }
.drawer:nth-child(4) .drawer__tab::before { background-image: url("../images/wkbj4.png"); }

.drawer__tab span,
.drawer__tab b {
  position: relative;
  z-index: 1;
}

.drawer__tab b {
  font-size: 25px;
  font-weight: 400;
  transition: transform var(--duration) var(--ease);
}

.drawer:hover .drawer__tab b,
.drawer:focus-within .drawer__tab b,
.drawer.is-open .drawer__tab b {
  transform: translateX(6px);
}
.drawer__content {
  min-width: 0;
  display: none;
  flex: 1;
  padding: 22px 38px 48px;
  overflow: hidden;
  background: transparent;
}


.drawer.is-open .drawer__content {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

@media (min-width: 1708px) {
  .service-grid {
    grid-template-rows: repeat(3, 154px);
    row-gap: 11.5px;
  }

}

.department-links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px 14px;
}
.department-links li{
list-style-type:none;
  background:#fff;
}
.department-links a {
  min-width: 0;
  min-height: 59px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 5px 13px;
  color: #434343;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #dce9f2;
  font-size: 15px;
  white-space: nowrap;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.department-links a::before {
  content: "";
  width: 38px;
  height: 33px;
  flex: 0 0 38px;
  /* background: url("../images/icon10.png") center / contain no-repeat; */
}
.department-links li:hover{
  background: rgb(24 73 139 / 42%);border: 1px solid #0b428b;
}
.department-links a:hover,
.department-links a:focus-visible {

  color: #fff
}

.experts {
  position: relative;
  padding: 48px 0 62px;
  overflow: hidden;
 /* background: #dff2ff url("../images/ysbg.png") center bottom / cover no-repeat;*/
}

.expert-carousel {
  position: relative;
  padding: 0 69px;
}

.expert-viewport {
  overflow: hidden;
}

.expert-track {
  display: flex;
  gap: 10px;
  overflow: hidden;
  transition: transform .5s var(--ease);
}

.doctor-card-wrap {
  flex: 0 0 210px;
  display: flex;
  align-items: stretch;
  min-width: 0;
  position:relative;
}

.doctor-card {
  flex: 1;
  min-width: 0;
  display: block;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 13px rgba(27, 100, 157, .1);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.doctor-card:hover,
.doctor-card:focus-visible {
  box-shadow: 0 10px 21px rgba(27, 100, 157, .22);
  transform: translateY(-5px);
  color:#fff;
}

.doctor-card > img {
  width: 100%;
  height: 260px;
  display: block;
  object-fit: cover;
  object-position: top center;
  background: #e9f5ff;
}

.doctor-card__meta {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 10px 12px 12px;
  color: var(--blue-900);
  background: #efefef;
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}

/* 左侧竖排科室标签（在 a 外框左边，高度为图片 2/3） */
.doctor-card__dept {
  flex: 0 0 34px;
  width: 34px;
  height: 200px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-960);
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 0px));
  filter: drop-shadow(0 0 0.5px var(--blue-960));
}
.doctor-card__deptline {
  position: absolute;
  width: 34px;
  height: 33px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-960);
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(57% - 18px));
  filter: drop-shadow(0 0 0.5px var(--blue-960));
  top: 202px;
}
.doctor-card__deptline1 {
  position: absolute;
  width: 34px;
  height: 33px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-960);
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(57% - 18px));
  filter: drop-shadow(0 0 0.5px var(--blue-960));
  top: 202px;
}
/* 底部荣誉行 */
.doctor-card__honor {
  text-align: center;
  color: var(--blue-800);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
}

.doctor-card:hover .doctor-card__meta,
.doctor-card:focus-visible .doctor-card__meta {
 
  background: var(--blue-960);
}

.doctor-card__meta strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  font-size: 24px;
  color: #014a99;
}

.doctor-card__meta strong em {
  flex: 0 0 auto;
  padding: 3px 7px;
  color: #fff;
  background: #d9b664;
  border-radius: 14px;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
}

.doctor-card__meta span {
  overflow: hidden;
  color: #014a99;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doctor-card:hover .doctor-card__meta span,
.doctor-card:hover .doctor-card__meta strong,
.doctor-card:focus-visible .doctor-card__meta span {
  color: #fff;
}

.expert-arrow {
  top: 50%;
  width: 34px;
  height: 43px;
  padding: 3px;
  background: transparent;
  transform: translateY(-50%);
}

.expert-arrow img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.expert-arrow:hover,
.expert-arrow:focus-visible {
  background: rgba(255, 255, 255, .55);
}

.expert-arrow--prev { left: 0; }
.expert-arrow--next { right: 0; }

.feature-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding-top: 42px;
  padding-bottom: 42px;
}

.feature-links a {
  position: relative;
  display: block;
  overflow: hidden;
  background: #dae9f3;
  border-radius: 3px;
  box-shadow: 0 3px 8px rgba(41, 102, 144, .09);
}

.feature-links a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 13px, rgba(255, 255, 255, .12) 14px 15px);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

.feature-links img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .55s var(--ease), filter .55s var(--ease);
}

.feature-links a:hover img,
.feature-links a:focus-visible img {
  filter: saturate(1.18) brightness(1.05);
  transform: scale(1.035);
}

.feature-links a:hover::after,
.feature-links a:focus-visible::after {
  opacity: 1;
}

.editorial {
  margin-top: 0;
  padding-top: 34px;
  padding-bottom: 42px;
  background: #eaf6ff;
}

.editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(330px, .9fr);
  gap: 40px;
}

.voice-heading {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.health-heading {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.editorial-title {
  position: relative;
  width: 272px;
  height: 78px;
  flex: 0 0 272px;
}

.editorial-title img {
  position: absolute;
  inset: 0;
  width: 272px;
  height: 78px;
  display: block;
  object-fit: contain;
}

.editorial-title h2 {
  position: absolute;
  z-index: 1;
  top: 24px;
  left: 64px;
  margin: 0;
  color: #536a7c;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

.image-more {
  width: 127px;
  height: 43px;
  display: block;
  flex: 0 0 127px;
}

.image-more img {
  width: 127px;
  height: 43px;
  display: block;
  object-fit: contain;
}

.voice-body {
  display: grid;
  grid-template-columns: minmax(220px, .95fr) minmax(0, 1.05fr);
  gap: 24px;
  padding-top: 14px;
}

.voice-feature {
  min-width: 0;
}

.voice-image {
  position: relative;
  display: block;
  overflow: hidden;
  background: #dbeaf4;
}

.voice-image img {
  width: 100%;
  aspect-ratio: 570 / 294;
  display: block;
  object-fit: cover;
  transition: transform .55s var(--ease), filter .55s var(--ease);
}

.voice-image:hover img,
.voice-image:focus-visible img {
  filter: brightness(1.04) saturate(1.08);
  transform: scale(1.025);
}

.voice-feature__title {
  display: block;
  margin-top: 9px;
  color: #000000;
  font-size: 16px;
  line-height: 1.55;
}

.voice-feature__title:hover,
.voice-feature__title:focus-visible {
  color: var(--blue-800);
}

.voice-feature p {
  margin: 12px 0 0;
  color: #000000;
  font-size: 13px;
  line-height: 1.8;
}

.voice-feature__ornament {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 13px;
}

.voice-feature__ornament span {
  width: 36px;
  height: 2px;
  margin-right: auto;
  background: var(--blue-700);
}

.voice-feature__ornament i {
  width: 6px;
  height: 6px;
  display: block;
  background: #a7cce4;
  border-radius: 50%;
}

.voice-feature__ornament i:nth-of-type(2) {
  background: var(--blue-700);
}

.voice-list {
  min-width: 0;
  display: grid;
  align-content: start;
}

.voice-list a {
  position: relative;
  min-width: 0;
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 12px 13px;
  border-bottom: 1px solid #d8e5ee;
  transition: color var(--duration) var(--ease);
}

.voice-list a::before {
  content: "";
  position: absolute;
  right: auto;
  bottom: -1px;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--blue-700);
  transition: width .45s var(--ease);
}

.voice-list a:hover,
.voice-list a:focus-visible {
  color: var(--blue-800);
}

.voice-list a:hover::before,
.voice-list a:focus-visible::before {
  width: 100%;
}

.voice-list span {
  min-width: 0;
  overflow: hidden;
  color: #000000;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-list time,
.health-list time {
  flex: 0 0 auto;
  color: #434343;
  font-size: 16px;
}

.health-list {
  display: grid;
  gap: 12px;
  padding-top: 14px;
}

.health-list a {
  min-width: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 2px;
  color: #000000;
  background: rgba(255, 255, 255, .74);
  border: 1px solid #d8e8f2;
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.health-list img {
  grid-row: 1 / span 2;
  width: 92px;
  height: 53px;
  display: block;
  object-fit: cover;
}

.health-list span {
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.45;
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
}

.health-list a:hover,
.health-list a:focus-visible {
  color: #fff;
  background: var(--blue-700);
  border-color: var(--blue-700);
}

.health-list a:hover time,
.health-list a:focus-visible time {
  color: rgba(255, 255, 255, .8);
}

.health-list time {
  align-self: start;
  justify-self: end;
  width: 100%;
  text-align: right;
}

.notice-heading > .more-link {
  transform: translateY(-8px);
}

.notices {
  padding-top: 70px;
  padding-bottom: 68px;
}

.notice-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.notice-tabs {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: 27px;
  border-bottom: 1px solid #cbdce8;
}

.notice-tabs button {
  position: relative;
  padding: 0 0 12px;
  color: #7c8c9a;
  background: transparent;
  font-size: 25px;
  font-weight: 700;
  transition: color var(--duration) var(--ease);
}

.notice-tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--blue-700);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}

.notice-tabs button:hover,
.notice-tabs button:focus-visible,
.notice-tabs button.is-active {
  color: var(--blue-800);
}

.notice-tabs button:hover::after,
.notice-tabs button:focus-visible::after,
.notice-tabs button.is-active::after {
  transform: scaleX(1);
}

.notice-panels {
  position: relative;
  min-height: 360px;
  padding-top: 0;
}

.notice-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  column-gap: 46px;
  row-gap: 0;
  transform-origin: top center;
}

.notice-panel.is-active {
  display: grid;
  animation: panelPop .5s var(--ease) both;
}

@keyframes panelPop {
  0% { opacity: 0; transform: scaleY(.72); }
  65% { opacity: 1; transform: scaleY(1.035); }
  100% { opacity: 1; transform: scaleY(1); }
}

.notice-panel a {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  min-height: 90px;
  border-bottom: 1px solid #e4edf3;
  transition: color var(--duration) var(--ease), padding-left var(--duration) var(--ease);
}

.notice-panel a:hover,
.notice-panel a:focus-visible {
  padding-left: 7px;
  color: var(--blue-800);
}

.notice-panel time {
  display: grid;
  place-items: center;
  color: #8b9bab;
  line-height: 1.1;
}

.notice-panel time b {
  color: var(--blue-700);
  font-size: 17px;
  font-weight: 500;
}

.notice-panel time span {
  margin-top: 3px;
  font-size: 11px;
  color: #434343;
}

.notice-panel a > span {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

.friend-bar {
  color: #fff;
  background: var(--red);
}

.friend-bar__inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 31px;
  overflow: hidden;
  white-space: nowrap;
}

.friend-bar__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 28px;
  border-right: 1px solid rgba(255, 255, 255, .7);
  font-size: 15px;
  font-weight: 700;
}

.friend-bar__label img {
  width: 25px;
  height: 23px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.friend-bar__inner > a {
  color: rgba(255, 255, 255, .86);
  font-size: 15px;
  transition: color var(--duration) var(--ease);
}

.friend-bar__inner > a:hover,
.friend-bar__inner > a:focus-visible {
  color: #fff;
}

.footer-main {
  color: #fff;
  background: var(--blue-950);
}

.footer-main__inner {
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 36px 0;
}

.footer-qr {
  display: flex;
  gap: 24px;
}

.footer-qr figure {
  width: 96px;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  text-align: center;
  font-size: 9px;
}

.footer-qr img {
  width: 96px;
  height: 109px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.footer-rule {
  width: 1px;
  height: 130px;
  background: rgba(255, 255, 255, .35);
}

.footer-contact {
  min-width: 550px;
  color: rgba(255, 255, 255, .84);
  font-size: 15px;
  line-height: 2;
}

.footer-contact strong {
  color: #fff;
  font-size: 20px;
}

.footer-contact p {
  margin: 2px 0 0;
}

.copyright {
  min-height: 190px;
  padding: 34px 0 28px;
  color: rgba(255, 255, 255, .62);
  background: #1a2f45;
  text-align: center;
  font-size: 12px;
}

.copyright p {
  margin: 4px 0;
}

.footer-badges {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 15px;
}

.footer-badges img {
  width: auto;
  height: 45px;
  object-fit: contain;
}

.toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 20px;
  padding: 9px 15px;
  color: #fff;
  background: rgba(4, 42, 84, .9);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (min-width: 1708px) {
  .editorial-grid {
    grid-template-columns: 1120px 508px;
  }

  .voice-body {
    grid-template-columns: 570px minmax(0, 1fr);
    gap: 24px;
  }

  .health-list a {
    grid-template-columns: 144px minmax(0, 1fr) auto;
  }

  .health-list img {
    width: 144px;
    height: 74px;
  }
}

@media (max-width: 1400px) and (min-width: 1051px) {
  .drawer__content {
    padding: 31px 24px;
  }

  .department-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
  }

  .department-links a {
    min-height: 57px;
    gap: 9px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .department-links a::before {
    width: 30px;
    height: 27px;
    flex-basis: 30px;
  }
}

@media (max-width: 1050px) {
  .page-shell {
    width: min(calc(100% - 30px), var(--panel));
  }

  .masthead__actions {
    gap: 8px;
  }

  .qr-pair {
    display: none;
  }

  .nav-item > a {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 13px;
  }

  .service-hero {
    grid-template-columns: 330px minmax(0, 1fr);
  }

  .service-card--primary,
  .service-card--gold {
    padding-left: 0;
  }

  .service-card__icon {
    width: 49px;
    height: 48px;
    flex-basis: 48px;
  }

  .service-card__icon img {
    max-width: 49px;
    max-height: 48px;
  }

  .service-card > span:not(.service-card__icon) {
    font-size: 15px;
  }

  .service-card--primary .service-card__icon,
  .service-card--primary > span:not(.service-card__icon) {
    width: 70px;
    margin-left: calc(27% - 35px);
  }

  .service-card__qr {
    top: 15px;
    right: calc(30% - 41px);
    width: 82px !important;
    height: 77px !important;
  }

  .drawer__content {
    padding: 25px 20px;
  }

  .department-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .department-links a {
    min-height: 49px;
    gap: 8px;
    padding: 7px 9px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
  }

  .department-links a::before {
    width: 28px;
    height: 25px;
    flex-basis: 28px;
  }

  .footer-main__inner {
    gap: 24px;
  }

  .footer-contact {
    min-width: 0;
  }

  .doctor-card {
    flex-basis: calc((100% - 54px) / 4);
  }

  .doctor-card > img {
    width: 100%;
    height: auto;
    aspect-ratio: 210 / 260;
  }
}

@media (max-width: 760px) {
  .page-shell {
    width: min(calc(100% - 24px), var(--panel));
  }

  .hero-banner {
    aspect-ratio: 4.2 / 1;
  }

  .hero-banner__txt {
    transform: translateY(-50%);
    transition: opacity 1s ease .3s;
  }

  .hero-banner__slide.is-active .hero-banner__txt {
    transform: translateY(-50%);
  }

  .hero-banner__txt img {
    width: 100%;
    height: auto;
  }

  .hero-banner__arrow {
    width: 32px;
    height: 56px;
    font-size: 28px;
  }

  .hero-banner__dots {
    right: 12px;
    bottom: 10px;
    gap: 5px;
  }

  .hero-banner__dots button {
    width: 18px;
    height: 3px;
  }

  .hero-banner__dots button.is-active {
    width: 26px;
  }

  .masthead {
    min-height: 82px;
    gap: 10px;
  }

  .brand {
    flex-basis: 255px;
  }

  .brand img {
    width: 255px;
  }

  .masthead__actions {
    display: none;
  }

  .nav-toggle {
    display: block;
    flex: 0 0 43px;
  }

  .main-nav {
    display: none;
  }

  .main-nav.is-open {
    position: absolute;
    top: 82px;
    right: 0;
    left: 0;
    display: block;
    max-height: calc(100vh - 82px);
    overflow-y: auto;
  }

  .main-nav__inner {
    width: 100%;
    display: block;
  }

  .nav-item > a {
    min-height: 44px;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }

  .nav-item > a::after {
    margin-left: auto;
  }

  .nav-dropdown {
    position: static;
    display: none;
    min-width: 0;
    padding: 0;
    background: rgba(1, 39, 83, .7);
    border: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }

  .nav-item.dropdown-open .nav-dropdown {
    display: block;
  }

  .nav-dropdown a {
    padding: 9px 32px;
    color: rgba(255, 255, 255, .86);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  .service-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 14px;
  }

  .service-grid {
    grid-auto-rows: minmax(72px, auto);
  }

  .service-card {
    min-height: 72px;
  }

  .headline-title {
    width: 88px;
    flex-basis: 88px;
  }

  .headline-title img {
    display: none;
  }

  .headline-title::after {
   content:"新闻头条";
   color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }

  .headline-marquee__track {
    gap: 38px;
    padding-left: 15px;
  }

  .headline-marquee__group {
    gap: 38px;
  }

  .section-band {
    margin-top: 20px;
    padding: 23px 0 28px;
  }

  .section-heading h2 {
    font-size: 22px;
  }

  .departments .section-heading h2::after {
    width: 58px;
    height: 3px;
    margin-top: 8px;
    background: var(--blue-700);
  }

  .drawer-list {
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-content: start;
    align-items: start;
  }

  .drawer,
  .drawer.is-open,
  .drawer:hover,
  .drawer:focus-within {
    min-height: 0;
    display: block;
    flex: none;
    align-self: start;
  }

  .drawer__tab {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    flex-direction: row;
    justify-content: space-between;
    gap: 6px;
    padding: 9px 11px;
    font-size: 14px;
  }

  .drawer__tab b {
    font-size: 20px;
  }

  .drawer__content {
    display: block;
    max-height: none;
    padding: 8px 0 0;
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: none;
  }

  .department-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .department-links a {
    min-height: 54px;
    padding: 7px;
    font-size: 12px;
    text-indent: 10px;
  }

  .experts {
    padding-top: 25px;
    padding-bottom: 31px;
  }

  .section-heading--center .more-link {
    position: static;
    margin-left: auto;
  }

  .expert-carousel {
    padding: 0 37px;
  }
  .doctor-card__meta strong{ font-size:18px;}
  .doctor-card {
    flex-basis: calc((100% - 18px) / 2);
  }

  .feature-links {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .editorial-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .voice-panel,
  .health-panel,
  .health-list {
    width: 100%;
    min-width: 0;
  }

  .voice-heading,
  .health-heading {
    min-height: 58px;
  }

  .editorial-title {
    width: 200px;
    height: 58px;
    flex-basis: 200px;
  }

  .editorial-title img {
    width: 200px;
    height: 58px;
  }

  .editorial-title h2 {
    top: 18px;
    left: 50px;
    font-size: 19px;
  }

  .image-more {
    width: 101px;
    height: 34px;
    flex-basis: 101px;
  }

  .image-more img {
    width: 101px;
    height: 34px;
  }

  .voice-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .health-list a {
    grid-template-columns: 82px minmax(0, 1fr);
    padding: 2px;
  }

  .health-list img {
    width: 82px;
    height: 50px;
  }

  .health-list time {
    display: block;
    font-size: 9px;
  }

  .notice-panel {
    grid-template-columns: 1fr;
  }

  .notice-panel a {
    min-height: 72px;
  }

  .friend-bar__inner {
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .friend-bar__inner::-webkit-scrollbar {
    display: none;
  }

  .footer-main__inner {
    min-height: 0;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0;
  }

  .footer-qr {
    gap: 5px;
  }

  .footer-qr figure {
    width: 66px;
    font-size: 8px;
  }

  .footer-qr img {
    width: 66px;
    height: 75px;
  }

  .footer-rule {
    height: 70px;
  }

  .footer-contact {
    min-width: 0;
    font-size: 9px;
    line-height: 1.7;
  }
}

/* Department directory page */
.department-directory {
  background: #fff;
}

.directory-group {
  min-height: clamp(315px, 19.8vw, 497px);
  padding: 32px 0 40px;
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.directory-group--surgery {
  background-image: url("../images/ksbg1.png");
}

.directory-group--medicine {
  min-height: clamp(318px, 20vw, 502px);
  background-image: url("../images/ksbg2.png");
}

.directory-group--technology {
  min-height: clamp(350px, 22vw, 552px);
  background-image: url("../images/ksbg3.png");
}

.directory-group--key {
  min-height: clamp(318px, 20vw, 503px);
  background-image: url("../images/ksbg4.png");
}

.directory-group h2 {
  margin: 0 0 24px;
  color: #2f3f50;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.directory-group--medicine h2,
.directory-group--key h2 {
  color: var(--blue-800);
}

.directory-grid {
  width: min(1400px, 100%);
  max-height: 245px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 0 auto;
  padding-right: 13px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #3aa7df rgba(255, 255, 255, .55);
  scrollbar-width: thin;
}

.directory-grid::-webkit-scrollbar {
  width: 7px;
}

.directory-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .55);
  border-radius: 8px;
}

.directory-grid::-webkit-scrollbar-thumb {
  background: #3aa7df;
  border-radius: 8px;
}

.directory-grid a,
.key-specialties a {
  min-width: 0;
  min-height: 49px;
  display: flex;
  align-items: center;
  gap:2px;
  padding: 8px 13px 8px 8px;
  color: #526271;
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(222, 231, 238, .82);
  box-shadow: 0 4px 10px rgba(43, 102, 150, .1);
  font-size: 14px;
  white-space: nowrap;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.directory-grid a:hover,
.directory-grid a:focus-visible,
.key-specialties a:hover,
.key-specialties a:focus-visible {
 background: rgb(24 73 139 / 42%);1px solid rgba(222, 231, 238, .82);
    color: #fff
}

.directory-grid a img,
.key-specialties a img {
  width: 29px;
  height: 25px;
  flex: 0 0 29px;
  display: block;
  object-fit: contain;
}

.key-specialties-carousel {
 width: min(1400px, 100%);
  margin: 0 auto;
  padding: 0;
}

.key-specialties-viewport {
  overflow: hidden;
}

.key-specialties {
  display: flex;
  gap: 30px;
  width: 100%;
}

.key-specialties > div {
  width: calc((100% - 90px) / 4);
  max-height: 232px;
  flex: 0 0 calc((100% - 90px) / 4);
  padding: 0 9px 9px;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(255, 255, 255, .68);
  scrollbar-color: #cfd5dc rgba(255, 255, 255, .58);
  scrollbar-width: thin;
}
.key-specialties > div::-webkit-scrollbar {
  width: 6px;
}
.key-specialties > div::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .46);
}

.key-specialties > div::-webkit-scrollbar-thumb {
  background: #cfd5dc;
  border-radius: 8px;
}

.key-specialties h3 {
  position: sticky;
  z-index: 1;
  top: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -9px;
  padding: 0 7px;
  color: #fff;
  background: #15558a;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}




.specialty-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 38px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #2996d1;
  background: transparent;
  font: 42px/1 serif;
  transform: translateY(-50%);
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.specialty-arrow:hover,
.specialty-arrow:focus-visible {
  color: var(--blue-900);
  background: rgba(255, 255, 255, .62);
}

.specialty-arrow:disabled {
  opacity: .3;
  cursor: default;
}

.specialty-arrow--prev {
  left: 0;
}

.specialty-arrow--next {
  right: 0;
}


.subsection-nav {
  position: relative;
  z-index: 4;
  min-height: 72px;
  width: 100%;
  background: #fff;
  box-shadow: 0 5px 13px rgba(33, 80, 120, .1);
}

.subsection-nav__inner {
  min-height: 72px;
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  align-items: stretch;
  overflow-x: auto;
  background: transparent;
  scrollbar-width: none;
}
.subsection-nav .subsection-nav__inner
 {
  width: min(calc(100% - 40px), 1020px);
}
.department-page .subsection-nav__inner,
.department-page .department-intro {
  width: min(calc(100% - 40px), 960px);
}

.news-list-page .subsection-nav__inner,
.news-list-page .section-content {
  width: min(calc(100% - 40px), 1050px);
}

.picture-list-page .subsection-nav__inner,
.picture-list-page .section-content {
  width: min(calc(100% - 40px), 1120px);
}

.article-page .subsection-nav__inner,
.article-page .article-wrap {
  width: min(calc(100% - 40px), 1100px);
}

.doctor-page .subsection-nav__inner,
.doctor-page .section-content {
  width: min(calc(100% - 40px), 1020px);
}

.subsection-nav__inner::-webkit-scrollbar {
  display: none;
}

.subsection-nav a {
  min-width: 104px;
  display: grid;
  place-items: center;
  padding: 0 20px;
  color: #263746;
  font-size: 20px;
  white-space: nowrap;
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.subsection-nav a:hover,
.subsection-nav a:focus-visible,
.subsection-nav a.is-active {
  color: #fff;
  background: #0758a8;
}

.key-specialties a {
  width: 100%;
  line-height: 1.45;
  letter-spacing: .02em;
 
  margin: 20px 0 0 0;
}

@media (max-width: 1050px) {
  .directory-grid {
    width: min(850px, 100%);
    gap: 12px 14px;
  }

  .directory-grid a {
    gap: 7px;
    padding: 7px 9px;
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  .directory-group {
    min-height: 0;
    padding: 25px 0 29px;
    background-position: center;
    background-size: cover;
  }

  .directory-group h2 {
    margin-bottom: 17px;
    font-size: 23px;
  }

  .directory-grid {
    max-height: 258px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .directory-grid a {
    min-height: 47px;
    gap: 7px;
    padding: 7px 8px;
    font-size: 11px;
  }

  .directory-grid a img,
  .key-specialties a img {
    width: 26px;
    height: 23px;
    flex-basis: 26px;
  }

  .key-specialties-carousel {
    padding: 0 25px;
  }

  .key-specialties {
    gap: 10px;
  }

  .key-specialties > div {
    width: 48%;
    max-height: 224px;
    flex-basis: 48%;
    padding: 0 6px 7px;
  }

  .key-specialties h3 {
    min-height: 42px;
    font-size: 10px;
  }

  .subsection-nav,
  .subsection-nav__inner {
    min-height: 54px;
  }

  .subsection-nav__inner {
    padding: 0 12px;
  }

  .department-page .subsection-nav__inner,
  .department-page .department-intro,
  .news-list-page .subsection-nav__inner,
  .news-list-page .section-content,
  .picture-list-page .subsection-nav__inner,
  .picture-list-page .section-content,
  .article-page .subsection-nav__inner,
  .article-page .article-wrap,
  .doctor-page .subsection-nav__inner,
  .doctor-page .section-content {
    width: calc(100% - 24px);
  }
/* news.html: wrap the news-section nav into two rows on mobile */
  .subsection-nav--two-row,
  .subsection-nav--two-row .subsection-nav__inner {
    min-height: 0;
  }

  .subsection-nav--two-row .subsection-nav__inner {
    flex-wrap: wrap;
    overflow-x: visible;
    padding: 0;
  }

  .subsection-nav--two-row a {
    flex: 1 0 33%;
    min-width: 0;
    height: 44px;
    padding: 0 4px;
    font-size: 13px;
  }
  .subsection-nav a {
    min-width: 94px;
    padding: 0 15px;
    font-size: 14px;
  }

  .key-specialties a {
    min-height: 43px;
    margin-top: 6px;
    gap: 5px;
    padding: 6px;
    font-size: 10px;
  }
}

@media (max-width: 400px) {
  .brand,
  .brand img {
    width: 225px;
    flex-basis: 225px;
  }

  .service-card__qr {
    right: calc(30% - 39px);
    width: 78px !important;
    height: 73px !important;
  }

  .service-card--primary,
  .service-card--gold {
    padding-left: 0;
  }

  .service-card > span:not(.service-card__icon) {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* News, picture list and doctor detail pages */
.content-banner {
  position: relative;
  overflow: hidden;
  background: var(--blue-900);
}

.content-banner > img {
  width: 100%;
  height: auto;
  aspect-ratio: 2511 / 577;
  display: block;
  object-fit: cover;
}

.content-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 38, 83, .6), rgba(3, 38, 83, .08) 65%, rgba(3, 38, 83, .1));
  pointer-events: none;
}

.content-banner__copy {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  color: #fff;
  transform: translate(-50%, -50%);
}

.content-banner__copy h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 3vw, 50px);
  font-weight: 500;
}

.content-banner__copy p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 16px;
}

.content-banner__copy a:hover,
.content-banner__copy a:focus-visible {
  color: #a5dcff;
}

.section-content {
  min-height: 760px;
  padding-top: 48px;
  padding-bottom: 74px;
  background: #fff;
}

.content-title {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 25px;
  color: var(--blue-800);
}

.content-title h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
}

.content-title span {
  width: 55px;
  height: 3px;
  background: var(--blue-700);
}

.news-list__items {
  width: min(1400px, 100%);
  margin: 0 auto;
}
.news-list__items a {
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  align-items: center;
  gap: 20px;
  padding: 0 8px;
  color: #000;
  border-bottom: 1px solid #e7edf2;
  font-size: 15px;
  transition: color var(--duration) var(--ease), padding-left var(--duration) var(--ease), background var(--duration) var(--ease);
  position: relative;
  padding-left: 20px; /* 给圆点腾出空间 */
}
.news-list__items a::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333;
}



.news-list__items a:hover,
.news-list__items a:focus-visible {
  padding-left: 15px;
  color: var(--blue-800);
  background: #f7fbfe;
}

.news-list__items time {
  color: #434343;
  text-align: right;
  font-size: 13px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-top: 45px;
  color: #8493a0;
  font-size: 13px;
}
.pagination li{
  list-style-type:none;
}
.pagination a:hover,
.pagination a:focus-visible,
.pagination .is-current {
  color: var(--blue-800);
}

.picture-list__layout {
  width: min(1400px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 570px) minmax(360px, 1fr);
  gap: 20px;
  margin: 0 auto;
}

.picture-feature {
  display: block;
  overflow: hidden;
  color: var(--text);
  border: 1px solid #e4ebf0;
  box-shadow: 0 4px 15px rgba(41, 102, 144, .1);
}

.picture-feature img {
  width: 100%;
  aspect-ratio: 675 / 375;
  display: block;
  object-fit: cover;
}

.picture-feature div {
  padding: 15px 18px 17px;
}

.picture-feature strong {
  display: block;
  margin-bottom: 8px;
  color: #465867;
  font-size: 14px;
}

.picture-feature time,
.picture-item time {
  color: var(--blue-700);
  font-size: 13px;
}

.picture-items {
  display: grid;
  gap: 10px;
}

.picture-item {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 13px;
  min-height: 108px;
  padding: 6px;
  color: #5e6e7d;
  border: 1px solid #e4ebf0;
  box-shadow: 0 3px 10px rgba(41, 102, 144, .08);
}

.picture-item img {
  width: 180px;
  height: 104px;
  display: block;
  object-fit: cover;
}

.picture-item strong {
  display: block;
  margin: 3px 0 7px;
  color: #506170;
  font-size: 13px;
  line-height: 1.5;
}

.picture-item:hover,
.picture-item:focus-visible {
  color: var(--blue-800);
  border-color: #9fc9e5;
}

.picture-list__rows {
  width: min(1400px, 100%);
  display: grid;
  gap: 12px;
  margin: 18px auto 0;
}

.picture-list__rows .picture-item {
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 132px;
  padding: 8px;
}

.picture-list__rows .picture-item img {
  width: 210px;
  height: 122px;
}

.picture-item p {
  margin: 8px 0 0;
  color: #8d98a2;
  font-size: 12px;
  line-height: 1.65;
}

.article-wrap {
  width: min(calc(100% - 40px), 1400px);
  min-height: 870px;
  margin: 0 auto;
  padding: 5% 1%;
  color: #66727d;
  background: #fff;
}

.article-title {
  margin: 0;
  color: #384b5c;
  font-size: 27px;
  line-height: 1.4;
  text-align: center;
}

.article-meta {
  margin: 8px 0 27px;
  color: #9ba7b1;
  text-align: center;
  font-size: 13px;
}

.article-body {
  border-top: 1px solid #e6edf2;
  padding-top: 23px;
  font-size: 15px;
  line-height: 2.15;
}

.article-body p {
  margin: 0 0 15px;
  text-indent: 2em;
}

.article-body img {
  /* width: min(680px, 100%); */
  height: auto;
  display: block;
  margin: 18px auto 0;
  object-fit: contain;
}

.doctor-profile {
  width: min(1400px, 100%);
  min-height: 630px;
  margin: 0 auto;
  padding-bottom: 42px;
}

.profile-bar {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px;
  color: #fff;
  background: var(--blue-700);
}

.profile-bar h2,
.profile-section h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.profile-bar p {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
}

.profile-summary {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 23px;
  padding: 15px 0 28px;
}

.profile-summary img {
  width: 180px;
  aspect-ratio: 210 / 260;
  display: block;
  object-fit: cover;
}

.profile-summary h3 {
  margin: 3px 0 11px;
  color: #52616f;
  font-size: 24px;
  font-weight: 500;
}

.profile-summary p {
  margin: 6px 0;
  color: #687680;
  font-size: 14px;
}

.profile-ruler {
  height: 7px;
  margin-top: 14px;
  background: repeating-linear-gradient(90deg, #87c8ec 0 1px, transparent 1px 6px);
}

.profile-section {
  margin-top: 14px;
  background: #f1f1f1;
  padding-bottom: 20px;
}

.profile-section h2 {
  padding: 11px 17px;
  color: #fff;
  background: var(--blue-700);
}

.profile-section p {
  margin: 0;
  padding: 25px 34px;
  color: #707b83;
  font-size: 14px;
 
  text-indent: 2em;
}
.zztd p{
  line-height: 30px;
 padding:5px 20px;
 
}
@media (max-width: 760px) {
  .content-banner > img {
    min-height: 180px;
    object-fit: cover;
  }

  .content-banner__copy h1 {
    margin-bottom: 6px;
    font-size: 28px;
  }

  .content-banner__copy p {
    gap: 8px;
    font-size: 13px;
  }

  .section-content {
    min-height: 620px;
    padding-top: 31px;
    padding-bottom: 44px;
  }

  .content-title h2 {
    font-size: 23px;
  }

  .news-list__items a {
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 9px;
    padding: 4px 2px;
    font-size: 13px;
  }

  .news-list__items time {
    font-size: 10px;
  }

  .pagination {
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 32px;
    font-size: 11px;
  }

  .picture-list__layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .picture-feature strong {
    font-size: 14px;
  }

  .picture-item {
    grid-template-columns: 105px minmax(0, 1fr);
    min-height: 83px;
    gap: 9px;
    padding: 5px;
  }

  .picture-item img {
    width: 105px;
    height: 68px;
  }

  .picture-list__rows {
    margin-top: 14px;
  }

  .picture-list__rows .picture-item {
    grid-template-columns: 105px minmax(0, 1fr);
  }

  .picture-list__rows .picture-item img {
    width: 105px;
    height: 68px;
  }

  .picture-item p {
    margin-top: 5px;
    display: -webkit-box;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .picture-item strong {
    margin: 1px 0 5px;
    font-size: 12px;
  }

  .picture-item time,
  .picture-feature time {
    font-size: 10px;
  }

  .article-wrap {
    min-height: 620px;
    padding: 8% 5%;
  }

  .article-title {
    font-size: 21px;
  }

  .article-meta {
    margin-bottom: 18px;
    font-size: 11px;
  }

  .article-body {
    padding-top: 17px;
    font-size: 13px;
    line-height: 1.95;
  }

  .doctor-profile {
    min-height: 550px;
  }

  .profile-bar {
    min-height: 45px;
    padding: 0 10px;
  }

  .profile-bar h2,
  .profile-section h2 {
    font-size: 16px;
  }

  .profile-bar p {
    font-size: 10px;
  }

  .profile-summary {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 13px;
    padding: 11px 0 21px;
  }

  .profile-summary img {
    width: 110px;
  }

  .profile-summary h3 {
    margin: 0 0 7px;
    font-size: 19px;
  }

  .profile-summary p {
    margin: 3px 0;
    font-size: 11px;
  }

  .profile-section p {
    padding: 18px 17px;
    font-size: 12px;
    line-height: 1.9;
  }
}

/* Department detail page */
.department-banner {
  position: relative;
  overflow: hidden;
  background: var(--blue-900);
}

.department-banner > img {
  width: 100%;
  height: auto;
  aspect-ratio: 2512 / 575;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.department-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 38, 83, .62), rgba(3, 38, 83, .08) 62%, rgba(3, 38, 83, .16));
  pointer-events: none;
}

.department-banner__copy {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  color: #fff;
  transform: translate(-50%, -50%);
}

.department-banner__copy h1 {
  margin: 0 0 12px;
  font-size: clamp(30px, 3vw, 52px);
  font-weight: 500;
  letter-spacing: .08em;
}

.department-banner__copy p {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 16px;
}

.department-banner__copy a:hover,
.department-banner__copy a:focus-visible {
  color: #9edcff;
}

.department-intro {
  width: min(calc(100% - 40px), 1400px);
  margin: 0 auto;
  padding: 52px 0 44px;
  background: #fff;
}

.department-intro__heading,
.department-experts__heading {
  position: relative;
  min-height: 54px;
  margin-bottom: 25px;
}

.department-experts__heading {
  display: flex;
  align-items: end;
  gap: 18px;
}

.department-intro__heading h2 {
  margin: 0;
  color: #394b5a;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
}

.department-experts__heading h2 {
  margin: 0;
  color: var(--blue-800);
  font-size: 31px;
  line-height: 1.1;
}

.department-intro__heading > img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(407px, 55vw);
  height: 11px;
  object-fit: contain;
  object-position: left center;
}

.department-intro__heading .department-more {
  position: absolute;
  top: 3px;
  right: 0;
}

.department-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 30px;
  margin-left: auto;
  padding: 0 16px;
  color: var(--blue-700);
  background: #fff;
  border: 1px solid #a8cce7;
  border-radius: 16px;
  font-size: 13px;
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.department-more:hover,
.department-more:focus-visible {
  color: #fff;
  background: var(--blue-700);
  border-color: var(--blue-700);
}

.department-more--image {
  min-width: 76px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
}

.department-more--image img {
  width: 76px;
  height: 28px;
  display: block;
  object-fit: contain;
}

.department-more--image:hover,
.department-more--image:focus-visible {
  background: transparent;
  border-color: transparent;
}

.department-more--image:hover img,
.department-more--image:focus-visible img {
  filter: brightness(1.08) saturate(1.1);
}

.department-intro__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .93fr);
  gap: clamp(35px, 5vw, 80px);
  align-items: start;
}

.department-intro__text {
  padding-top: 4px;
  color: #4a5967;
  font-size: 16px;
  line-height: 2.1;
}

.department-intro__text p {
  margin: 0 0 14px;
}

.department-intro__image {
  margin: 0;
  overflow: hidden;
  background: #eaf5fc;
  border: 1px solid #e0ebf2;
}

.department-intro__image img {
  width: 100%;
  aspect-ratio: 580 / 314;
  display: block;
  object-fit: cover;
}

.department-experts {
  padding: 48px 0 75px;
  background: #fff;
}

.department-experts__heading {
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.department-experts__heading h2 {
  font-size: 34px;
  text-align: center;
}

.department-experts__heading > span {
  position: absolute;
  bottom: -11px;
  left: 50%;
  width: 84px;
  height: 4px;
  background: var(--blue-700);
  transform: translateX(-50%);
}

.department-experts__heading .department-more {
  position: absolute;
  right: 15%;
  bottom: 3px;
}

.department-doctors {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 260px));
  justify-content: center;
  gap: 26px 29px;
}

.department-experts--tabbed .department-experts__heading {
  margin-bottom: 32px;
}

.doctor-category-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0 0 58px;
}

.doctor-category-tab {
  min-width: 122px;
  min-height: 48px;
  padding: 7px 25px;
  color: #fff;
  background: #b2b2b2;
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: .06em;
  transition: background var(--duration) var(--ease);
}

.doctor-category-tab:hover {
  background: #8b9bab;
}

.doctor-category-tab.is-active,
.doctor-category-tab[aria-selected="true"] {
  background: var(--blue-960);
}

.doctor-category-tab:focus-visible,
.doctor-category-panel:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 5px;
}

.doctor-category-panel[hidden] {
  display: none;
}

.department-experts--tabbed .department-doctors {
  grid-template-columns: repeat(5, minmax(0, 246px));
  gap: 26px 22px;
}

#doctor-panel-eye .department-doctors {
  grid-template-columns: repeat(3, minmax(0, 246px));
}

.department-experts--tabbed .doctor-card > img {
  height: auto;
  aspect-ratio: 210 / 260;
}

.department-experts--tabbed .doctor-card__meta {
  min-height: 116px;
  padding: 10px 12px 14px;
}

.department-experts--tabbed .doctor-card__meta strong {
  font-size: clamp(16px, 1.4vw, 24px);
}

.department-experts--tabbed .doctor-card__honor {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
}

.department-experts--tabbed .doctor-card__meta strong em {
  color: #8d211d;
  background: linear-gradient(#f4e7c9, #cbb67d);
}

.department-doctor {
  display: block;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 13px rgba(27, 100, 157, .1);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.department-doctor:hover,
.department-doctor:focus-visible {
  box-shadow: 0 10px 21px rgba(27, 100, 157, .22);
  transform: translateY(-5px);
}

.department-doctor > img {
  width: 100%;
  aspect-ratio: 210 / 260;
  display: block;
  object-fit: cover;
  object-position: top center;
}

.department-doctor > div {
  min-height: 70px;
  padding: 8px 10px 10px;
  color: #fff;
  background: var(--blue-800);
}

.department-doctor strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  font-size: 16px;
  line-height: 1.45;
}

.department-doctor strong em {
  flex: 0 0 auto;
  padding: 3px 7px;
  color: #6f5520;
  background: #dfc17a;
  border-radius: 14px;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
}

.department-doctor span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ksxq{display:none;}

.department-detail__actions {
  display: flex;
  justify-content: center;
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid #e6edf2;
}

.detail-back-button {
  min-width: 148px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 24px;
  color: #fff;
  background: var(--blue-700);
  border: 1px solid var(--blue-700);
  border-radius: 999px;
  box-shadow: 0 7px 16px rgba(3, 75, 143, .2);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.detail-back-button:hover,
.detail-back-button:focus-visible {
  color: #fff;
  background: var(--blue-800);
  border-color: var(--blue-800);
  box-shadow: 0 10px 20px rgba(3, 75, 143, .28);
  transform: translateY(-2px);
}

.detail-back-button:focus-visible {
  outline: 3px solid rgba(55, 166, 224, .38);
  outline-offset: 3px;
}

.detail-back-button:active {
  transform: translateY(0);
  box-shadow: 0 5px 12px rgba(3, 75, 143, .2);
}

.detail-back-button__icon {
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 1050px) {
  .department-doctors {
    grid-template-columns: repeat(4, minmax(0, 210px));
  }

  .department-experts--tabbed .department-doctors {
    grid-template-columns: repeat(3, minmax(0, 246px));
  }

  .department-intro__body {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
    gap: 30px;
  }
}

@media (max-width: 760px) {
  .department-banner > img {
    height: 230px;
  }

  .department-banner__copy h1 {
    margin-bottom: 7px;
    font-size: 28px;
  }

  .department-banner__copy p {
    gap: 8px;
    font-size: 13px;
  }

  .department-intro {
    padding: 30px 0 28px;
  }

  .department-intro__heading,
  .department-experts__heading {
    min-height: 43px;
    margin-bottom: 18px;
  }

  .department-intro__heading h2,
  .department-experts__heading h2 {
    font-size: 25px;
  }

  .department-intro__heading > img {
    width: 120px;
    height: 6px;
  }

  .department-more {
    min-width: 76px;
    height: 27px;
    padding: 0 10px;
    font-size: 11px;
  }

  .department-more--image,
  .department-more--image img {
    width: 68px;
    min-width: 68px;
    height: 25px;
  }

  .department-intro__body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .department-intro__text {
    font-size: 14px;
    line-height: 1.9;
  }

  .department-intro__text p {
    margin-bottom: 9px;
  }

  .department-experts {
    padding: 30px 0 42px;
  }

  .department-experts__heading {
    margin-bottom: 25px;
  }

  .department-experts__heading h2 {
    font-size: 27px;
  }

  .department-experts__heading > span {
    bottom: -8px;
    width: 66px;
    height: 3px;
  }

  .department-experts__heading .department-more {
    right: 0;
    bottom: 0;
  }

  .department-doctors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 12px;
  }

  .department-doctor > div {
    min-height: 64px;
    padding: 7px 8px 8px;
  }

  .department-doctor strong {
    font-size: 13px;
    gap: 4px;
  }

  .department-doctor strong em {
    padding: 2px 5px;
    font-size: 8px;
  }

  .department-doctor span {
    font-size: 9px;
  }

  .doctor-category-tabs {
    gap: 10px;
    margin-bottom: 30px;
  }

  .doctor-category-tab {
    min-width: 78px;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 18px;
  }

  .department-experts--tabbed .department-doctors,
  #doctor-panel-eye .department-doctors {
    grid-template-columns: repeat(2, minmax(0, 210px));
    gap: 24px 12px;
  }

  .department-experts--tabbed .doctor-card__dept {
    flex-basis: 24px;
    width: 24px;
    height: 170px;
    font-size: 14px;
  }

  .department-experts--tabbed .doctor-card__deptline1 {
    width: 24px;
    height: 24px;
    top: 172px;
  }

  .department-experts--tabbed .doctor-card__meta {
    min-height: 105px;
    padding: 9px 7px;
  }

  .department-experts--tabbed .doctor-card__meta strong {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 18px;
  }

  .department-experts--tabbed .doctor-card__honor {
    font-size: 16px;
  }

  .department-detail__actions {
    margin-top: 30px;
    padding-top: 22px;
  }

  .detail-back-button {
    min-width: 136px;
    padding: 10px 18px;
    font-size: 14px;
  }
}

/* ===== 邻医要闻 / 媒体聚焦 Tab 滑动切换 ===== */
.voice-tabbar {
  flex: 1;
  min-width: 0;
  height: 78px;
  display: flex;
  align-items: flex-end;
  gap: 30px;
  border-bottom: 1px solid #cbdce8;
}

.voice-tabbar button {
  position: relative;
  padding: 0 0 12px;
  color: #7c8c9a;
  background: transparent;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color var(--duration) var(--ease);
}

.voice-tabbar button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--blue-700);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}

.voice-tabbar button:hover,
.voice-tabbar button:focus-visible,
.voice-tabbar button.is-active {
  color: var(--blue-800);
}

.voice-tabbar button.is-active::after {
  transform: scaleX(1);
}

.voice-viewport {
  overflow: hidden;
}

.voice-panel-page {
  display: none;
}

.voice-panel-page.is-active {
  display: block;
  animation: voiceSlideIn .45s var(--ease);
}

@keyframes voiceSlideIn {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 768px) {
  .voice-tabbar {
    height: 58px;
    gap: 20px;
  }
  .voice-tabbar button {
    font-size: 19px;
  }
}