@media screen and (min-width: 701px) {
  html:root {
    --c1: #087fc4;
    --c2: #087e61;
    --ll-blue: #087fc4;
    --ll-yellow: #ffcd32;
    --ll-coral: #f66b5c;
    --ll-green: #39ac83;
    --ll-ink: #112b3b;
    --ll-muted: #5c6d77;
    --ll-line: #dce5e9;
    --ll-paper: #f3f7f8;
  }
  html body .garment-header {
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  html body .garment-header.is-scrolled {
    background: #fff;
    border-bottom: 1px solid #e0e8ed;
    box-shadow: 0 3px 20px #112b3b08;
  }
  html body .garment-header .garment-header-inner {
    width: min(calc(100% - 64px), 1440px);
    height: 88px;
    grid-template-columns: 208px minmax(0, 1fr) auto;
    grid-template-rows: 88px;
    gap: 28px;
  }
  html body .garment-header .garment-logo { width: 200px; height: 72px; }
  html body .garment-header.is-scrolled .garment-header-inner { height: 88px; }
  html body .garment-header .garment-logo img { object-fit: contain; opacity: 1; }
  html body .garment-header .logo-light { visibility: hidden; }
  html body .garment-header:not(.is-scrolled) .logo-light { visibility: visible; }
  html body .garment-header:not(.is-scrolled) .logo-dark { visibility: hidden; }
  html body .garment-header .garment-nav {
    justify-content: flex-end;
    gap: clamp(16px, 2vw, 34px);
    width: 100%;
    min-width: 0;
  }
  html body .garment-header .garment-nav > a,
  html body .garment-header .dropdown-trigger {
    color: var(--ll-ink);
    font: 650 13px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
  }
  html body .garment-header .garment-nav > a.current,
  html body .garment-header .garment-nav > a:hover,
  html body .garment-header .dropdown-trigger:hover { color: var(--ll-blue); }
  html body .garment-header .garment-nav > a::after { background: var(--ll-blue); }
  html body .garment-header:not(.is-scrolled) .garment-nav > a,
  html body .garment-header:not(.is-scrolled) .dropdown-trigger { color: #fff; text-shadow: 0 1px 4px #112b3b70; }
  html body .garment-header:not(.is-scrolled) .garment-nav > a.current,
  html body .garment-header:not(.is-scrolled) .garment-nav > a:hover,
  html body .garment-header:not(.is-scrolled) .dropdown-trigger:hover { color: var(--ll-yellow); }
  html body .garment-header:not(.is-scrolled) .garment-nav > a::after { background: var(--ll-yellow); }
  html body .garment-header .price-list-dropdown { border-top-color: var(--ll-blue); }
  html body #kf { width: min(calc(100% - 64px), 1440px); max-width: 1440px; margin-inline: auto; }
  html body #kf .online_cont { margin: 0; padding: 60px 0 64px; }
  html body #kf .online_cont .title { margin-bottom: 32px; }
  html body #kf .online_cont .title p:first-child {
    color: var(--ll-ink);
    font: 750 36px/1.15 system-ui, -apple-system, 'Segoe UI', sans-serif;
    text-transform: none;
    margin-bottom: 12px;
  }
  html body #kf .online_cont .title p:last-child { color: var(--ll-muted); }
  html body #kf .online_cont ul { gap: 20px; }
  html body #kf .online_cont ul li p:first-child {
    width: 110px;
    height: 110px;
    box-shadow: none;
    border: 4px solid #edf4f7;
  }
  html body #kf .online_cont ul li p:nth-child(2) { color: var(--ll-ink); font-weight: 650; }
  html body #kf .online_cont ul li p:nth-child(3) span { background: #087e61; padding: 7px 9px; border-radius: 3px; }
  html body #kf .online_cont ul li p:nth-child(3) span:nth-child(2) { background: #087fc4; }
  html body .zw { height: 0; }
  html body .mobile_nav { display: none; }
  html body .dibu {
    background-image: linear-gradient(90deg, #0b243bf0, #0b243bcd), url('../img/loong/footer-park.webp');
    background-position: center;
    background-size: cover;
    padding: 56px 0 0;
    border-top: 4px solid var(--ll-blue);
  }
  html body .dibu::after { background: none; pointer-events: none; }
  html body .dibu .bls { display: none; }
  html body .dibu .footer {
    width: min(calc(100% - 64px), 1440px);
    max-width: 1440px;
    padding: 0 0 40px;
    gap: 52px;
  }
  html body .dibu .footer .footer-l { flex: 0 0 27%; }
  html body .dibu .footer .footer-l .logo { width: 230px; max-width: 100%; margin-bottom: 22px; }
  html body .dibu .footer .footer-l .logo img { width: 100%; height: auto; object-fit: contain; }
  html body .dibu .footer p, html body .dibu .footer li, html body .dibu .footer a { color: #dbe7f0; font-size: 13px; line-height: 1.8; }
  html body .dibu .footer h3 { color: #fff; font-size: 17px; margin-bottom: 18px; }
  html body .dibu .footer a:hover { color: var(--ll-yellow); }
  html body .dibu .footer2 {
    width: min(calc(100% - 64px), 1440px);
    max-width: 1440px;
    padding: 22px 0;
    color: #bbcedb;
    border-top: 1px solid #ffffff26;
    font-size: 12px;
  }
  html body .garment-header a:focus-visible,
  html body #kf a:focus-visible,
  html body .dibu a:focus-visible { outline: 2px solid var(--ll-blue) !important; outline-offset: 4px; }
}
@media screen and (min-width: 701px) and (max-width: 1100px) {
  html body .garment-header .garment-header-inner { width: calc(100% - 40px); grid-template-columns: 160px minmax(0, 1fr) auto; gap: 16px; }
  html body .garment-header .garment-logo { width: 154px; }
  html body .garment-header .garment-nav { gap: 14px; }
  html body .garment-header .garment-nav > a, html body .garment-header .dropdown-trigger { font-size: 11px; }
  html body #kf .online_cont ul { gap: 12px; }
  html body .dibu .footer { gap: 28px; }
}
@media screen and (min-width: 701px) and (max-width: 850px) {
  html body .garment-header .garment-header-inner { grid-template-columns: 130px minmax(0, 1fr) auto; gap: 10px; }
  html body .garment-header .garment-logo { width: 128px; }
  html body .garment-header .garment-nav { gap: 9px; overflow: visible; }
  html body .garment-header .garment-nav > a, html body .garment-header .dropdown-trigger { font-size: 10px; }
  html body #kf .online_cont ul li p:first-child { width: 90px; height: 90px; }
  html body #kf .online_cont ul li p:nth-child(3) { gap: 4px; }
  html body #kf .online_cont ul li p:nth-child(3) span:nth-child(2) { margin-left: 0; }
  html body .dibu .footer { flex-direction: column; }
}