/*
 * Qingsong responsive layer
 * Loaded after the legacy CMS styles so the desktop templates can share one
 * URL and one content source at phone widths. The /m/ entry remains available
 * for existing indexed links while the canonical site becomes responsive.
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; }

.qs-mobile-menu-toggle {
  display: none;
  appearance: none;
  border: 0;
  width: 42px;
  height: 42px;
  padding: 9px;
  margin-left: auto;
  border-radius: 8px;
  background: #f0f6fb;
  color: #145d9f;
  cursor: pointer;
  flex: 0 0 auto;
}
.qs-mobile-menu-toggle span {
  display: block;
  height: 2px;
  margin: 4px 0;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.top.is-menu-open .qs-mobile-menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.top.is-menu-open .qs-mobile-menu-toggle span:nth-child(2) { opacity: 0; }
.top.is-menu-open .qs-mobile-menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.qs-menu-lock { overflow: hidden; }

@media (max-width: 900px) {
  .top { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1000 !important; }
  .top_in { min-width: 0 !important; }
  .top_in > .totalwidth {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .top .logo {
    width: min(190px, calc(100% - 58px)) !important;
    height: auto !important;
    max-height: 46px !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
  }
  .top .logo a, .top .logo img { display: block !important; width: 100% !important; height: auto !important; max-height: 46px !important; object-fit: contain !important; }
  .qs-mobile-menu-toggle { display: block !important; }
  .top .nav.menu {
    display: none !important;
    position: absolute !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(100vh - 64px) !important;
    max-height: calc(100vh - 64px) !important;
    margin: 0 !important;
    padding: 8px 14px 28px !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-top: 1px solid #dfe8ef !important;
    box-shadow: 0 18px 28px rgba(18, 55, 90, .14) !important;
  }
  .top.is-menu-open .nav.menu { display: block !important; }
  .NavCeshi, .NavCeshi > li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: transparent !important;
  }
  .NavCeshi > li { border-bottom: 1px solid #e8eef3 !important; }
  .NavCeshi > li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 50px !important;
    height: auto !important;
    padding: 14px 4px !important;
    color: #203b52 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  .NavCeshi > li.qs-nav-has-menu > a::after { content: "⌄" !important; margin-left: 10px; color: #7a9bb6; font-size: 16px; }
  .qs-nav-mega {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 0 14px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .qs-nav-mega-inner { display: block !important; width: 100% !important; margin: 0 !important; }
  .qs-nav-mega-heading { display: none !important; }
  .qs-nav-mega-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .qs-main-nav > .qs-nav-item .qs-nav-mega-cards > a,
  .qs-main-nav > .qs-nav-item .qs-nav-mega-cards > a:first-child {
    display: flex !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px !important;
    border: 1px solid #e1eaf0 !important;
    border-radius: 8px !important;
    background: #f8fbfd !important;
  }
  .qs-main-nav > .qs-nav-item .qs-nav-mega-cards > a::before { display: none !important; }
  .qs-main-nav > .qs-nav-item .qs-nav-mega-cards > a img { align-self: center !important; width: 100% !important; height: 64px !important; margin: 0 0 6px !important; }
  .qs-main-nav > .qs-nav-item .qs-nav-mega-cards > a b,
  .qs-main-nav > .qs-nav-item .qs-nav-mega-cards > a small { width: 100% !important; margin: 0 !important; white-space: normal !important; text-align: left !important; }
  .qs-main-nav > .qs-nav-item .qs-nav-mega-cards > a b { font-size: 14px !important; }
  .qs-main-nav > .qs-nav-item .qs-nav-mega-cards > a small { margin-top: 3px !important; font-size: 11px !important; }
  .qs-nav-mega-arrow { right: 8px !important; bottom: 8px !important; font-size: 17px !important; }
  .qs-nav-mega-side { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px 12px !important; padding: 8px 2px 0 !important; }
  .qs-nav-mega-side span { grid-column: 1 / -1; color: #7a9bb6; font-size: 11px; }
  .qs-nav-mega-side a { color: #356581 !important; font-size: 12px !important; line-height: 1.6 !important; }

  #search_bg { padding: 16px 0 12px !important; margin-bottom: 0 !important; }
  #search_c {
    display: block !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
  #search_c_l { display: block !important; width: 100% !important; }
  #search_c_l .head_adv { width: 100% !important; float: none !important; transform: none !important; font-size: 12px !important; line-height: 1.65 !important; }
  #search_c_l .head_adv span { display: block !important; font-size: 18px !important; line-height: 1.35 !important; }
  #search_c_l .h_tel { display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; margin: 12px 0 0 !important; padding: 10px 0 0 !important; border-top: 1px solid #dfe8ef !important; border-left: 0 !important; }
  .h_tel .hgtbhmk { flex: 1 1 auto !important; }
  .h_tel .dianhsj { margin-left: auto !important; font-size: 18px !important; }
  #search_c_r { width: 100% !important; min-width: 0 !important; margin: 14px 0 0 !important; padding: 0 !important; }
  #search_cc { display: flex !important; width: 100% !important; height: 44px !important; }
  #search_cc_l { min-width: 0 !important; height: 44px !important; flex: 1 1 auto !important; }
  #search_cc_l .input { width: 100% !important; height: 44px !important; font-size: 14px !important; }
  #search_cc_r, #search_cc_r input { width: 78px !important; max-width: 78px !important; height: 44px !important; }
  #search_b { width: 100% !important; max-width: none !important; margin: 9px 0 0 !important; padding: 0 !important; white-space: normal !important; gap: 5px 10px !important; font-size: 12px !important; line-height: 1.8 !important; }
  #search_b a { margin-right: 0 !important; }

  #bodycon, #bodycon #center, #bodycon #left, #bodycon #right { width: 100% !important; max-width: none !important; float: none !important; }
  #bodycon #left, #bodycon #right { display: none !important; }
  #bodycontent, #bodycontent.mianbxContent { width: calc(100% - 28px) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; }
  #bodycontent.mianbxContent { height: auto !important; min-height: 46px !important; padding: 10px 0 !important; flex-wrap: wrap !important; line-height: 1.7 !important; text-align: left !important; overflow-wrap: anywhere !important; }
  #bodycontent.mianbxContent .qs-crumb-label { flex: 0 0 auto; }
  #bodycontent.pro_all_class { width: calc(100% - 28px) !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 8px 0 18px !important; }
  #bodycontent.pro_all_class a, .pro_all_class a { width: auto !important; min-width: 0 !important; height: 52px !important; margin: 0 !important; padding: 0 9px !important; font-size: 13px !important; white-space: normal !important; line-height: 1.35 !important; }

  .pro_one_box { width: calc(50% - 6px) !important; margin: 0 12px 18px 0 !important; float: left !important; }
  .pro_one_box:nth-child(2n) { margin-right: 0 !important; }
  .pro_pic, .pro_pic img { width: 100% !important; height: auto !important; aspect-ratio: 1.35 / 1 !important; object-fit: cover !important; }
  .pro_name { height: auto !important; min-height: 42px !important; padding: 9px 3px !important; font-size: 13px !important; line-height: 1.45 !important; }
  .news_content_title, .news_content_body, .news_content_back { width: 100% !important; max-width: 100% !important; }
  .news_content_title { height: auto !important; min-height: 54px !important; padding: 8px 0 !important; line-height: 1.45 !important; }
  .news_content_title h3, .news_content_title h3 strong { height: auto !important; line-height: 1.45 !important; font-size: 20px !important; }
  .news_content_body { padding: 0 !important; line-height: 1.8 !important; overflow-wrap: anywhere !important; }
  .news_content_body img { width: auto !important; max-width: 100% !important; height: auto !important; margin: 5px 0 !important; }
  .news_content_body table { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; }
  .news_content_body iframe { width: 100% !important; max-width: 100% !important; }
  .news_box_lbm, .bodyContentString8, .lianxi, .yunu-message { width: 100% !important; max-width: 100% !important; }
  .news_box_lbm { margin-left: 0 !important; margin-right: 0 !important; }
  .lianxi_m { width: 100% !important; display: block !important; }
  .lianxi_ml, .lianxi_mr { float: none !important; width: 100% !important; max-width: 100% !important; }
  .lianxi_ml { padding: 24px 18px !important; }
  .lianxi_ml_m { font-size: 30px !important; line-height: 1.3 !important; }
  .lianxi_ml_s { width: 100% !important; max-width: 315px !important; font-size: 20px !important; line-height: 1.8 !important; }
  .lianxi_mr { padding: 0 !important; }
  .lianxi_mr_m { width: auto !important; float: none !important; padding: 22px 28px !important; line-height: 1.9 !important; }
  .lianxi_mr_i, .lianxi_m .mr_i { display: none !important; }
  .shopmrsc { padding: 12px 0 !important; }
  .shopmrsc li { list-style: none !important; }
  .shopmrsc a.xwlb_img { width: 34% !important; height: auto !important; margin-right: 3% !important; }
  .shopmrsc a.xwlb_img img { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 1.45 / 1 !important; object-fit: cover !important; }
  .shopmrsc a.xwlb_content { width: 63% !important; height: auto !important; min-height: 0 !important; }
  .shopmrsc p.xwlbbt { font-size: 15px !important; line-height: 1.45 !important; }
  .shopmrsc p.xwlbnr { max-height: 3.4em !important; margin-top: 4px !important; font-size: 12px !important; line-height: 1.7 !important; }
  .shopmrsc p.xwlbsj { position: static !important; margin-top: 5px !important; font-size: 11px !important; }
  .form-label { float: none !important; display: block !important; width: auto !important; text-align: left !important; }
  .form-content { margin-left: 0 !important; }
  .form-control { width: 100% !important; max-width: 100% !important; }
  .yunu-message { padding: 24px 16px !important; }
  .news_prev, .news_next, .news_content_back { line-height: 1.7 !important; overflow-wrap: anywhere !important; }
  .pro_detail_rel_item { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; padding: 10px 0 !important; }
  .pro_detail_rel_item > div { float: none !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; overflow: visible !important; }
  .pro_detail_rel_item > div img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 1.32 / 1 !important; object-fit: cover !important; }
  .pro_detail_rel_item > div a { overflow-wrap: anywhere !important; }
  .pagess { width: 100% !important; max-width: 100% !important; margin: 20px 0 36px !important; overflow-x: auto !important; justify-content: flex-start !important; }
  .pagess > ul { margin: 0 auto !important; flex-wrap: wrap !important; justify-content: center !important; }

  .qs-product-hero { margin: 12px 0 !important; border-radius: 12px !important; }
  .qs-product-hero-copy { padding: 24px 20px 8px !important; }
  .qs-product-hero h1 { font-size: clamp(24px, 7vw, 30px) !important; }
  .qs-product-hero-art { padding: 0 18px 16px !important; }
  .qs-product-content { margin: 16px 0 22px !important; padding: 20px 16px !important; border-radius: 11px !important; }
  .qs-cases-rail { grid-template-columns: none !important; grid-template-rows: 1fr !important; grid-auto-flow: column !important; grid-auto-columns: calc((100% - 18px) / 2) !important; overflow-x: auto !important; overscroll-behavior-x: contain !important; }
  .qs-case-card { min-width: 0 !important; width: auto !important; height: auto !important; }
  .qs-case-card-body h3, .qs-case-card-body p { white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; }

  .qs-footer-main { width: calc(100% - 28px) !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 18px !important; padding: 34px 0 30px !important; }
  .qs-footer-brand { grid-column: 1 / -1; }
  .qs-footer-follow { grid-column: 1 / -1; }
  .qs-footer-qr-row { gap: 12px !important; }
  .qs-footer-qr-row img { width: 88px !important; height: 88px !important; }
  .qs-footer-bar-in { width: calc(100% - 28px) !important; padding: 14px 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 5px 12px !important; line-height: 1.7 !important; }
  .my-kefu { right: 8px !important; bottom: 12px !important; transform: scale(.88); transform-origin: right bottom; }
}

@media (max-width: 560px) {
  .top_in > .totalwidth { width: calc(100% - 22px) !important; }
  .top .logo { width: min(168px, calc(100% - 54px)) !important; }
  .top .nav.menu { padding-left: 11px !important; padding-right: 11px !important; }
  .qs-nav-mega-cards, .qs-nav-mega-side { grid-template-columns: 1fr !important; }
  .qs-nav-mega-side span { grid-column: auto; }
  #search_c, #bodycontent, #bodycontent.mianbxContent, #bodycontent.pro_all_class, .qs-footer-main, .qs-footer-bar-in { width: calc(100% - 22px) !important; }
  #search_c_l .head_adv span { font-size: 17px !important; }
  #search_c_l .h_tel { display: block !important; }
  .h_tel .dianhsj { margin: 4px 0 0 !important; }
  .pro_one_box { width: 100% !important; margin-right: 0 !important; }
  .shopmrsc a.xwlb_img, .shopmrsc a.xwlb_content { float: none !important; display: block !important; width: 100% !important; margin: 0 !important; }
  .shopmrsc a.xwlb_img { margin-bottom: 8px !important; }
  .qs-news-list > a { grid-template-columns: 61px 102px minmax(0, 1fr) !important; column-gap: 12px !important; }
  .qs-news-thumb { width: 100% !important; min-width: 0 !important; }
  .qs-news-thumb img { width: 100% !important; height: 88px !important; object-fit: cover !important; }
  .qs-news-txt { min-width: 0 !important; overflow: hidden !important; }
  .qs-news-txt b, .qs-news-txt p { overflow-wrap: anywhere !important; word-break: normal !important; }
  .qs-news-date b { display: block !important; font-size: 20px !important; letter-spacing: -.35px !important; white-space: nowrap !important; }
  .news_content_body span[style*="font-size"] { font-size: clamp(22px, 7vw, 28px) !important; line-height: 1.35 !important; white-space: nowrap !important; }
  .pro_pic img { aspect-ratio: 1.45 / 1 !important; }
  .news_content_title h3, .news_content_title h3 strong { font-size: 18px !important; }
  .pro_detail_rel_item { grid-template-columns: 1fr !important; }
  .qs-footer-main { grid-template-columns: 1fr !important; gap: 24px !important; }
  .qs-footer-col, .qs-footer-follow { grid-column: auto; }
  .qs-footer-cats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .qs-cases-rail { grid-auto-columns: minmax(240px, 80vw) !important; }
}

/* Home advantage cards: keep the copy and its illustration readable together on phones. */
@media (max-width: 640px) {
  .qs-advantage-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
    text-align: center !important;
  }
  .qs-advantage-heading > div { width: 100% !important; }
  .qs-advantage-heading > div p { max-width: 31em !important; margin-left: auto !important; margin-right: auto !important; }
  .qs-advantage-more {
    align-self: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 132px !important;
    justify-content: center !important;
    margin: 5px auto 0 !important;
    padding: 10px 14px 10px 18px !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }
  .qs-advantage-more b { flex: 0 0 32px !important; width: 32px !important; height: 32px !important; }

  .qs-advantage-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 12px !important;
    padding: 0 !important;
  }
  .qs-advantage-layout .qs-advantage-item {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: auto 30px auto !important;
    align-items: start !important;
    gap: 8px 12px !important;
    min-height: 0 !important;
    padding: 16px !important;
    text-align: left !important;
    position: relative !important;
  }
  .qs-advantage-layout .qs-advantage-item .qs-advantage-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
  }
  .qs-advantage-layout .qs-advantage-body {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  .qs-advantage-layout .qs-advantage-body h3 {
    margin: 0 0 5px !important;
    padding-right: 96px !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
  }
  .qs-advantage-layout .qs-advantage-body p { margin: 0 !important; font-size: 12px !important; line-height: 1.65 !important; }
  .qs-advantage-layout .qs-advantage-arrow {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 86px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #3d95ff, #126fce) !important;
    color: #fff !important;
  }
  .qs-advantage-layout .qs-advantage-arrow svg { width: 15px !important; height: 15px !important; }
  .qs-advantage-layout .qs-advantage-arrow::before { content: "了解更多"; font-size: 12px; font-weight: 700; line-height: 1; }
  .qs-advantage-layout .qs-advantage-arrow-label,
  .qs-advantage-layout .qs-advantage-meta,
  .qs-advantage-layout .qs-advantage-num { display: none !important; }
  .qs-advantage-layout .qs-advantage-photo {
    position: relative !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    top: auto !important;
    right: auto !important;
    align-self: end !important;
    width: 100% !important;
    height: 112px !important;
    max-width: none !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    z-index: 1 !important;
  }

  .qs-contact-visual {
    display: block !important;
    align-self: center !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1078 / 1293 !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  .qs-contact-visual img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; }

  .qs-contact-panel {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 42px !important;
  }
  .qs-contact-panel-bottom {
    width: 100% !important;
    min-height: 0 !important;
    justify-content: center !important;
    gap: 20px !important;
    padding-top: 30px !important;
    padding-bottom: 34px !important;
    box-sizing: border-box !important;
  }
  .qs-contact-panel-bottom .qs-contact-qr-item {
    min-width: 104px !important;
    margin: 0 !important;
  }
  .qs-footer-qr-row { justify-content: center !important; }
}

@media (prefers-reduced-motion: reduce) {
  .qs-mobile-menu-toggle span { transition: none; }
}

/* Mobile navigation panel: give the open menu a clear hierarchy and compact
   horizontal product cards so the whole catalogue remains easy to scan. */
@media (max-width: 640px) {
  body.qs-home-page .top.is-menu-open {
    background: rgba(255, 255, 255, .78) !important;
    border-bottom: 1px solid rgba(210, 226, 239, .82) !important;
    box-shadow: 0 8px 24px rgba(37, 78, 115, .12) !important;
    backdrop-filter: saturate(150%) blur(16px) !important;
    -webkit-backdrop-filter: saturate(150%) blur(16px) !important;
  }
  body.qs-home-page .top.is-menu-open .qs-mobile-menu-toggle {
    background: rgba(255, 255, 255, .9) !important;
  }
  body.qs-home-page .top.is-menu-open .NavCeshi > li > a {
    color: #123e68 !important;
    text-shadow: none !important;
  }
  body.qs-home-page .top.is-menu-open .NavCeshi > li.qs-nav-has-menu > a::after {
    color: #6c9bc2 !important;
  }
  .top.is-menu-open .nav.menu {
    position: fixed !important;
    top: 64px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    height: calc(100vh - 76px) !important;
    max-height: calc(100vh - 76px) !important;
    margin: 0 !important;
    padding: 10px 12px 24px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid rgba(210, 226, 239, .92) !important;
    border-top: 0 !important;
    border-radius: 0 0 16px 16px !important;
    background: #fff !important;
    box-shadow: 0 18px 36px rgba(16, 65, 112, .22) !important;
  }
  .top.is-menu-open .NavCeshi > li > a {
    min-height: 42px !important;
    padding: 10px 4px !important;
    color: #123e68 !important;
    text-shadow: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
  }
  .top.is-menu-open .NavCeshi > li.qs-nav-has-menu > a::after {
    content: "⌄" !important;
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin-left: auto !important;
    transform: none !important;
    background: none !important;
    color: #6c9bc2 !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }
  .top.is-menu-open .NavCeshi > li:not(.qs-nav-has-menu) > a::after { display: none !important; }
  .top.is-menu-open .NavCeshi > li { border-bottom: 1px solid #e4edf5 !important; }
  .top.is-menu-open .NavCeshi > li:last-child { border-bottom: 0 !important; }
  .top.is-menu-open .qs-nav-mega { padding: 0 0 14px !important; }
  .top.is-menu-open .qs-nav-mega-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }
  .top.is-menu-open .qs-main-nav > .qs-nav-item .qs-nav-mega-cards > a,
  .top.is-menu-open .qs-main-nav > .qs-nav-item .qs-nav-mega-cards > a:first-child {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) 22px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    min-height: 78px !important;
    padding: 9px 10px !important;
    border: 1px solid #dce9f3 !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #fbfdff, #f1f7fc) !important;
    box-shadow: 0 3px 10px rgba(25, 86, 136, .05) !important;
  }
  .top.is-menu-open .qs-nav-mega-cards > a img,
  .top.is-menu-open .qs-main-nav > .qs-nav-item .qs-nav-mega-cards > a img {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    width: 86px !important;
    height: 56px !important;
    margin: 0 !important;
    object-fit: contain !important;
  }
  .top.is-menu-open .qs-nav-mega-cards > a b,
  .top.is-menu-open .qs-main-nav > .qs-nav-item .qs-nav-mega-cards > a b {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    width: auto !important;
    margin: 0 !important;
    color: #123f6e !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }
  .top.is-menu-open .qs-nav-mega-cards > a small,
  .top.is-menu-open .qs-main-nav > .qs-nav-item .qs-nav-mega-cards > a small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    width: auto !important;
    margin: 3px 0 0 !important;
    color: #6b849c !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }
  .top.is-menu-open .qs-nav-mega-arrow {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
    color: #176fc0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
  .top.is-menu-open .qs-nav-mega-side {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px 12px !important;
    margin-top: 1px !important;
    padding: 10px 4px 2px !important;
    border-top: 1px solid #e1ebf4 !important;
  }
  .top.is-menu-open .qs-nav-mega-side > span {
    grid-column: 1 / -1 !important;
    margin-bottom: 1px !important;
    color: #86a2bb !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .top.is-menu-open .qs-nav-mega-side > a {
    color: #2d5d86 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  @supports (height: 100dvh) {
    .top.is-menu-open .nav.menu {
      height: calc(100dvh - 76px) !important;
      max-height: calc(100dvh - 76px) !important;
    }
  }
}