@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-400.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --blue: #1d63b5;
  --ink: #1d2023;
  --gray: #555555;
  --gray-2: #50555c;
  --placeholder: #bbbbbb;
  --section: #e8eaec;
  --footer-link: #636972;
  --content: 978px;
  --font: 'Montserrat', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 18.7px;
  line-height: 1.6;
  color: var(--gray);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

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

img {
  display: block;
  border: 0;
}

.wrap {
  width: var(--content);
  margin: 0 auto;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 13px 21px;
  text-align: center;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.btn:hover {
  opacity: 0.9;
}

/* ---------- 导航 ---------- */
.nav {
  background: #fff;
  padding: 20px 0 21px;
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-right: 60px;
  min-height: 59px;
}

.nav-link {
  font-size: 16px;
  color: #000;
  line-height: 1;
  margin-top: 13.5px;
}

.nav-link:hover {
  color: var(--blue);
}

.nav-logo {
  width: 50px;
  height: 50px;
  margin: 0 29px;
  align-self: flex-start;
}

.nav .btn {
  margin-top: 15px;
}

.nav-name {
  display: block;
  margin-top: 1px;
  text-align: center;
  font-size: 14.4px;
  font-weight: 700;
  line-height: 1;
  color: var(--blue);
}

/* ---------- Hero ---------- */
.hero {
  height: 656px;
  padding: 235px 0 90px;
  background: url('../img/Flvbi1J90hm5xO_rFjaI-TXge8ng.jpg') no-repeat center / cover;
  text-align: center;
}

.hero-title {
  font-size: 46.8px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

.hero-sub {
  margin-top: 10.5px;
  font-size: 18px;
  line-height: 1.6;
  color: #fff;
}

.hero .btn {
  margin-top: 184px;
}

/* ---------- 通用区块 ---------- */
.section {
  padding: 80px 0;
}

.section-gray {
  background: var(--section);
}

.section-title {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  text-align: center;
}

.section-sub {
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--blue);
  text-align: center;
}

/* ---------- 医院简介 ---------- */
.intro {
  padding: 80px 0;
  background: var(--section);
  text-align: center;
}

.intro-title {
  font-size: 28.8px;
  font-weight: 700;
  line-height: 1.216;
  color: var(--blue);
}

.intro-en {
  display: block;
  margin-top: 32px;
  font-size: 18.7px;
  line-height: 1.283;
  color: var(--blue);
}

.intro-body {
  margin-top: 35px;
  font-size: 18.7px;
  line-height: 1.6;
  color: var(--gray);
}

.intro-body p {
  margin: 0;
}

.intro-body strong {
  font-weight: 700;
}

/* ---------- 院长 ---------- */
.master {
  padding: 0 0 91px;
  background: url('../img/Fv5G1bK7YlUm5oS-X8u5jHeq80Eq.jpg') no-repeat center / cover;
}

.master-inner {
  display: flex;
  align-items: flex-start;
  width: var(--content);
  margin: 0 auto;
}

.master-photo {
  flex: 1;
  padding-left: 78px;
}

.master-photo img {
  width: 320px;
  height: 504px;
}

.master-text {
  width: 474px;
  text-align: center;
  color: #fff;
}

.master-name {
  font-size: 28.8px;
  line-height: 1.4;
  color: #fff;
}

.master-tag {
  display: block;
  margin-top: 15px;
  font-size: 21.6px;
  line-height: 1.4;
  color: #fff;
}

.master-tag + .master-tag {
  margin-top: 14px;
}

.master-list {
  margin-top: 12px;
  padding-left: 38px;
  font-size: 18px;
  line-height: 1.6;
  color: #fff;
}

.master-list span {
  display: block;
}

.master-text .btn {
  margin-top: 36px;
}

/* ---------- 讲糖（视频） ---------- */
.talk {
  padding: 0 0 80px;
  background: var(--section);
}

.talk-videos {
  display: flex;
  justify-content: center;
  width: 1320px;
  margin: 40px auto 0;
}

.talk-videos iframe {
  display: block;
  width: 240px;
  height: 240px;
  border: 0;
}

/* ---------- 新闻轮播 ---------- */
.news {
  padding: 107px 0 108px;
  overflow: hidden;
}

.news-viewport {
  position: relative;
  width: 1000px;
  height: 257px;
  margin: 0 auto;
  overflow: hidden;
}

.news-track {
  display: flex;
  transition: transform 0.6s ease;
}

.news-slide {
  flex: 0 0 1000px;
  display: flex;
  gap: 21px;
}

.news-slide img {
  width: 478px;
  height: 257px;
  object-fit: cover;
}

.news-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 478px;
}

.news-cat {
  font-size: 36px;
  line-height: 1.4;
  color: var(--ink);
}

.news-title {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--blue);
}

.news-text .btn {
  align-self: flex-start;
  margin-top: 24px;
}

.news-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.news-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c8ccd0;
  cursor: pointer;
}

.news-dot.is-active {
  background: var(--blue);
}

/* ---------- 联系我们 ---------- */
.contact {
  padding: 80px 0;
  background: var(--section);
}

.contact-title {
  font-size: 36px;
  line-height: 1.4;
  color: var(--blue);
  text-align: center;
}

.contact-sub {
  margin-top: 19px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--blue);
  text-align: center;
}

.contact-inner {
  display: flex;
  justify-content: center;
  gap: 52px;
  padding-left: 9px;
  align-items: flex-start;
  width: var(--content);
  margin: 40px auto 0;
}

.contact-form {
  width: 303px;
  padding-top: 16px;
}

.field {
  margin-bottom: 0;
}

.field label {
  display: block;
  font-size: 18px;
  line-height: 1.4;
  color: var(--placeholder);
}

.field input,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #d8dcde;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  padding: 3px 0;
  outline: none;
}

.field textarea {
  resize: none;
  height: 75px;
}

.form-submit {
  display: block;
  margin: 19px auto 0;
  font-size: 20px;
  padding: 14px 28px;
}

.form-tip {
  margin-top: 12px;
  font-size: 13px;
  color: #8a8f96;
}

.form-tip.is-error {
  color: #c0392b;
}

.contact-map {
  width: 333px;
}

.contact-map img {
  width: 333px;
  height: 250px;
}

.contact-info {
  width: 228px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-2);
}

.contact-info p {
  width: fit-content;
  margin-bottom: 10px;
}

/* ---------- 页脚 ---------- */
.footer {
  padding: 57px 0 90px;
  background: #fff;
}

.footer-inner {
  display: flex;
  width: var(--content);
  margin: 0 auto;
}

.footer-col {
  width: 334px;
}

.footer-head {
  font-size: 19.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--blue);
}

.footer-phone {
  display: block;
  width: 169px;
  margin-top: 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--blue);
}

.footer-mail {
  display: block;
  width: 102px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--blue);
}

.footer-icp {
  display: block;
  margin-top: 61px;
  text-align: center;
  font-size: 14px;
  line-height: 1;
  color: var(--footer-link);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
  .talk-videos {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 1000px) {
  .wrap,
  .master-inner,
  .contact-inner,
  .footer-inner {
    width: auto;
    max-width: 100%;
    padding: 0 20px;
  }

  .nav-row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .nav-logo {
    margin: 0 12px;
  }

  .hero {
    height: auto;
    padding: 100px 20px;
  }

  .hero .btn {
    margin-top: 48px;
  }

  .master-inner {
    flex-direction: column;
  }

  .master-photo {
    padding-left: 0;
    margin-bottom: 24px;
  }

  .master-text {
    width: 100%;
  }

  .talk-videos iframe {
    width: 100%;
    height: 220px;
  }

  .news-viewport {
    width: 100%;
  }

  .news-slide {
    flex: 0 0 100%;
    flex-direction: column;
    gap: 12px;
  }

  .news-slide img,
  .news-text {
    width: 100%;
  }

  .news-slide img {
    height: auto;
  }

  .contact-inner {
    flex-direction: column;
    gap: 32px;
  }

  .contact-form,
  .contact-map,
  .contact-info {
    width: 100%;
  }

  .contact-map img {
    width: 100%;
    height: auto;
  }

  .footer-inner {
    flex-direction: column;
    gap: 24px;
  }

  .footer-col {
    width: 100%;
  }
}

/* ---------- 内页通用 ---------- */
.page-banner {
  height: 533px;
  background: no-repeat center / cover;
}

.page-banner-dept {
  background-image: url(../img/FqotOmSE_ZUmezkXD0bh6JmlGkxT.jpg);
}

.nav-link.is-current {
  color: var(--blue);
}

.page-sub {
  margin-top: 15px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--blue);
  text-align: center;
}

/* ---------- 科室介绍 ---------- */
.dept-head {
  padding: 0 0 30px;
  background: #fff;
}

.dept-photos {
  display: flex;
  justify-content: center;
  gap: 29px;
  margin-top: 40px;
}

.dept-photos img {
  width: 312px;
  height: 204px;
  object-fit: cover;
}

.dept-list {
  width: 938px;
  margin: 0 auto;
  padding-top: 21px;
}

.dept-item {
  margin-bottom: 50px;
}

.dept-name {
  font-size: 23.4px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--blue);
}

.dept-item p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-2);
}

.dept-item p + p {
  margin-top: 26px;
}

.dept-item .btn {
  display: block;
  width: 100px;
  margin: 14px auto 0;
}

.dept-item {
  text-align: left;
}

/* ---------- 特色医疗项目 ---------- */
.proj-hero {
  height: 254px;
  padding: 80px 0;
  background: url(../img/FmyXDJ9uBXUQ1lV9lxMXT6Lc7eVN.jpg) no-repeat center / cover;
  text-align: center;
}

.proj-hero-title {
  color: #fff;
}

.proj-hero-sub {
  margin-top: 15px;
  font-size: 18px;
  line-height: 1.6;
  color: #fff;
}

.proj-body {
  padding: 80px 0;
  background: #fff;
}

.proj-head {
  font-size: 28.8px;
  font-weight: 700;
  line-height: 1.216;
  color: var(--blue);
  text-align: center;
}

.proj-head-en {
  margin-top: 18px;
  font-size: 14.4px;
  line-height: 1.6;
  color: var(--blue);
  text-align: center;
}

.proj-list {
  width: 977px;
  margin: 40px auto 0;
}

.proj-item {
  display: flex;
  align-items: flex-start;
  gap: 31px;
  margin-bottom: 32px;
}

.proj-item:nth-child(even) {
  flex-direction: row-reverse;
}

.proj-item img {
  width: 228px;
  height: auto;
}

.proj-text {
  width: 718px;
}

.proj-title {
  font-size: 23.4px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--blue);
}

.proj-title.is-dark {
  color: var(--ink);
}

.proj-sub {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--blue);
}

.proj-desc {
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-2);
}

/* ---------- 专家团队 ---------- */
.page-banner-team {
  height: 433px;
  background-image: url(../img/FoyMJ-yy1gDv4s517ItjagUDPsLV.jpg);
}

.team-body {
  padding: 80px 0;
  background: var(--section);
}

.team-list {
  width: 977px;
  margin: 40px auto 0;
}

.team-item {
  display: flex;
  align-items: flex-start;
  gap: 31px;
  margin-bottom: 32px;
}

.team-item img {
  width: 228px;
  height: auto;
}

.team-text {
  width: 718px;
}

.team-name {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}

.team-role {
  margin-top: 5px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--blue);
}

.team-desc {
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-2);
}

/* ---------- 新闻活动 ---------- */
.page-banner-news {
  height: 477px;
  background-image: url(../img/FnD9G0e_eUXMiJGZQq3TmYxdWhy9.jpg);
}

.news-body {
  background: #fff;
}

.news-cat-label {
  padding-top: 80px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--blue);
  text-align: center;
}

.news-list {
  width: 978px;
  margin: 97px auto 0;
  padding-bottom: 49px;
}

.post-item {
  display: flex;
  gap: 25px;
  margin-bottom: 61px;
}

.post-text {
  width: 562px;
}

.post-thumb {
  width: 391px;
  flex: 0 0 391px;
}

.post-thumb img {
  width: 391px;
  height: 220px;
  object-fit: cover;
}

.post-title {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.post-title a:hover {
  color: var(--blue);
}

.post-date {
  margin-top: 7px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--blue);
}

.post-summary {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-2);
  max-height: 68px;
  overflow: hidden;
}

.post-more {
  display: inline-block;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--gray-2);
}

.post-more:hover {
  color: var(--blue);
}

/* ---------- 就医预约 ---------- */
.appt-body {
  padding: 80px 0 85px;
  background: var(--section);
}

.appt-form {
  width: 380px;
  margin: 45px auto 0;
}

.f-row {
  margin-bottom: 8px;
}

.f-label {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: #4b5056;
}

.f-label .req {
  color: #e64751;
}

.f-input {
  width: 100%;
  height: 46px;
  margin-top: 8px;
  padding: 0 12px;
  border: 1px solid #c8ccd0;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}

.f-input:focus {
  border-color: var(--blue);
}

.f-textarea {
  height: 114px;
  padding: 10px 12px;
  line-height: 1.6;
  resize: none;
}

.f-opts {
  margin-top: 5px;
}

.f-opt {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(99, 105, 114, 0.8);
  cursor: pointer;
}

.f-opt input {
  margin-right: 6px;
  accent-color: var(--blue);
}

.appt-submit {
  display: block;
  width: 96px;
  margin: 30px auto 0;
  font-size: 20px;
  padding: 14px 22px;
}

/* ---------- 博客文章 ---------- */
.article-banner img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.article {
  width: 800px;
  margin: 0 auto;
  padding: 60px 0 80px;
}

.article-title {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  text-align: center;
}

.article-date {
  margin-top: 12px;
  font-size: 16px;
  color: var(--blue);
  text-align: center;
}

.article-body {
  margin-top: 40px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--gray-2);
}

.article-body p {
  margin-bottom: 18px;
}

.article-line {
  margin-bottom: 8px;
}

.article-back {
  display: inline-block;
  margin-top: 20px;
  font-size: 16px;
  color: var(--blue);
}

@media (max-width: 1000px) {
  .article {
    width: auto;
    padding: 40px 20px 60px;
  }

  .article-banner img {
    height: 220px;
  }
}
