/* Article cover stays below the independent site header. */
.df-blog-separate-header.has-long-banner .page-top-info {
  padding-top: 0;
  min-height: clamp(400px, 30vw, 450px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #038b84;
}
.df-blog-separate-header.has-long-banner .page-top-wrapper {
  position: relative;
  padding-top: 96px;
}
.df-blog-separate-header .page-top-info #pagetitle {
  text-wrap: balance;
  font-size: 32px;
  line-height: 1.25;
}
.df-blog-separate-header .page-top-info .topic__heading {
  max-width: 50%;
}
.df-blog-separate-header .page-top-info #navigation {
  max-width: 50%;
}
.df-blog-separate-header .detail-image--top_on_head .detail-image__fon {
  left: 50%;
  background-size: contain !important;
}
.df-blog-separate-header .page-top-info .breadcrumbs {
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 6px;
  background: #026f69;
}
.df-blog-separate-header .page-top-info .breadcrumbs__item {
  font-size: 14px;
  color: #fff;
  opacity: 1;
}
.df-blog-separate-header .page-top-info .breadcrumbs__link {
  color: #fff;
  opacity: 1;
  text-decoration: none;
}
.df-blog-separate-header .page-top-info .breadcrumbs__link:hover {
  color: #fff;
  text-decoration: none;
}
.df-blog-separate-header .page-top-info .top-meta .primary-color {
  color: #fff;
}
.df-blog-separate-header .detail-image--top_on_head:before {
  background: linear-gradient(90deg, #038b84 0%, rgba(3, 139, 132, .94) 43%, rgba(3, 139, 132, .08) 64%, rgba(3, 139, 132, 0) 100%);
}
@media (max-width: 767px) {
  .df-blog-separate-header.has-long-banner .page-top-info {
    min-height: 0;
    padding-top: clamp(180px, 57.15vw, 240px);
    margin-bottom: 24px;
  }
  .df-blog-separate-header.has-long-banner .page-top-wrapper {
    padding-top: 24px;
    background: #038b84;
  }
  .df-blog-separate-header .detail-image--top_on_head .detail-image__fon {
    left: 0;
    bottom: auto;
    height: clamp(180px, 57.15vw, 240px);
  }
  .df-blog-separate-header .detail-image--top_on_head:before {
    background: none;
  }
  .df-blog-separate-header .page-top-info .topic__heading {
    max-width: 100%;
  }
  .df-blog-separate-header .page-top-info #navigation {
    max-width: 100%;
  }
  .df-blog-separate-header .page-top-info #pagetitle {
    font-size: 24px;
    line-height: 1.25;
  }
  .df-blog-separate-header .page-top-info .mb--40 {
    margin-bottom: 24px;
  }
}

.df-blog-separate-header .page-top-info #navigation,
.df-blog-separate-header .page-top-info .breadcrumbs {
  scrollbar-width: none;
}
.df-blog-separate-header .page-top-info #navigation::-webkit-scrollbar,
.df-blog-separate-header .page-top-info .breadcrumbs::-webkit-scrollbar {
  display: none;
}