/* ZJMF visual layer: YZHL layout with a cleaner blue and white system. */
:root {
  --zjmf-blue: #2563eb;
  --zjmf-blue-dark: #0f2d63;
  --zjmf-ink: #10213f;
  --zjmf-muted: #64748b;
  --zjmf-line: #dbe7f5;
  --zjmf-surface: #f5f9ff;
}

body {
  color: var(--zjmf-ink);
  background: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

#navbar,
#navbar.nav-bg {
  background: rgba(255, 255, 255, .96) !important;
  border: 0;
  box-shadow: 0 1px 0 rgba(15, 45, 99, .08), 0 8px 24px rgba(15, 45, 99, .06);
}

#navbar .container {
  min-height: 68px;
}

#navbar .navbar-brand {
  display: flex;
  align-items: center;
  height: 68px;
  padding: 12px 15px;
}

#navbar .zjmf-brand-logo {
  display: block;
  width: auto;
  max-width: 170px;
  height: 40px;
  object-fit: contain;
}

#navbar .navbar-nav > li > a,
#navbar .dropdown-toggle-mobile {
  color: var(--zjmf-ink);
  transition: color .2s ease, background-color .2s ease;
}

#navbar .navbar-nav > li > a:hover,
#navbar .navbar-nav > li.open > a,
#navbar .dropdown-toggle-mobile:hover {
  color: var(--zjmf-blue);
  background: #eef5ff;
}

#navbar .btn-hollow {
  border-color: var(--zjmf-blue);
  color: var(--zjmf-blue);
  border-radius: 4px;
}

#navbar .btn-hollow:hover {
  color: #fff;
  background: var(--zjmf-blue);
}

#navbar .dropdown-menu {
  border: 1px solid var(--zjmf-line);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(15, 45, 99, .14);
}

#navbar .service-view-all h4,
#navbar .service-view-all h4 span {
  color: var(--zjmf-blue);
}

.banners-slider {
  margin-top: 68px;
}

.hero.hero-enterpriseoncloud-index {
  min-height: 520px;
  background-position: center;
}

.hero.hero-enterpriseoncloud-index::before {
  background: linear-gradient(90deg, rgba(8, 28, 67, .78), rgba(14, 73, 145, .48) 58%, rgba(14, 73, 145, .14));
}

.banner-desc h1,
.banner-desc h2,
.banner-desc p {
  text-shadow: 0 2px 18px rgba(4, 18, 48, .38);
}

.banner-desc h1 {
  letter-spacing: .02em;
}

.btn-banner,
.btn-banner:focus,
.btn.btn-default.btn-banner {
  background: var(--zjmf-blue) !important;
  border-color: var(--zjmf-blue) !important;
  color: #fff !important;
  border-radius: 5px;
  box-shadow: 0 8px 22px rgba(37, 99, 235, .3);
}

.btn-banner:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  transform: translateY(-1px);
}

.bg-c1 {
  background: #fff;
  border-bottom: 1px solid var(--zjmf-line);
}

.promotion-list > li {
  border-right: 1px solid var(--zjmf-line);
}

.promotion-list > li:last-child {
  border-right: 0;
}

.promotion-list a {
  transition: background-color .2s ease, transform .2s ease;
}

.promotion-list a:hover {
  background: #f4f8ff;
  transform: translateY(-2px);
}

.promotion-list .title2 {
  color: var(--zjmf-ink);
}

.promotion-list .content,
.features .desc,
.thumbnail p,
.media-body p {
  color: var(--zjmf-muted);
}

.features {
  padding-top: 76px;
  padding-bottom: 76px;
}

.features-solution {
  background: #fff;
}

.features-value {
  background: var(--zjmf-surface);
}

.features .intro .title,
.hkweb9 .div1 {
  color: var(--zjmf-ink);
}

.features-solution .thumbnail {
  min-height: 282px;
  padding: 30px 22px 24px;
  border: 1px solid var(--zjmf-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 45, 99, .05);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.features-solution .thumbnail:hover {
  border-color: #a9c7fa;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .12);
  transform: translateY(-4px);
}

.features-value .media {
  min-height: 130px;
  padding: 25px 24px;
  border: 1px solid var(--zjmf-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
}

.features-value .media-heading {
  color: var(--zjmf-blue-dark);
}

.hkweb6 {
  background-color: var(--zjmf-blue-dark);
  background-image: linear-gradient(135deg, rgba(15, 45, 99, .96), rgba(37, 99, 235, .78));
}

.hkweb6 .hkweb6top1 h2,
.hkweb6 .hkweb6top1 h3,
.hkweb6 .hkweb6top .title,
.hkweb6 .hkweb6top .desc {
  text-shadow: 0 2px 12px rgba(3, 15, 40, .32);
}

.hkweb6 .tab-hd li {
  border-color: rgba(255, 255, 255, .22);
}

.hkweb6 .tab-hd li.active,
.hkweb6 .tab-hd li:hover {
  background: rgba(255, 255, 255, .12);
}

.hkweb6 .d4 a {
  background: #fff;
  color: var(--zjmf-blue-dark);
  border-radius: 4px;
}

.hkweb7 {
  background: #f8fbff;
}

.hkweb9 {
  background: #fff;
}

.hkweb9 .divv2,
.hkweb9 .divv3 {
  border-color: var(--zjmf-line);
}

.hkweb9 a:hover {
  color: var(--zjmf-blue);
}

footer {
  border-top: 1px solid var(--zjmf-line);
  background: #0b1d3a;
}

footer .grey-link a,
footer .grey-link dt,
footer .grey-darker-color,
footer .grey-darker-color a {
  color: rgba(255, 255, 255, .72);
}

footer .grey-link a:hover,
footer .grey-darker-color a:hover {
  color: #fff;
}

footer .zjmf-contact-qr {
  display: block;
  width: 96px;
  height: 96px;
  margin-top: 10px;
  object-fit: cover;
  border-radius: 6px;
}

@media (max-width: 767px) {
  #navbar .container,
  #navbar .navbar-brand {
    min-height: 58px;
    height: 58px;
  }

  #navbar .navbar-brand {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  #navbar .zjmf-brand-logo {
    max-width: 140px;
    height: 34px;
  }

  .banners-slider {
    margin-top: 58px;
  }

  .hero.hero-enterpriseoncloud-index {
    min-height: 430px;
  }

  .promotion-list > li {
    border-right: 0;
    border-bottom: 1px solid var(--zjmf-line);
  }

  .promotion-list > li:last-child {
    border-bottom: 0;
  }

  .features {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .features-solution .thumbnail {
    min-height: 0;
    margin-bottom: 16px;
  }

  .features-value .media {
    margin-bottom: 16px;
  }
}