@charset "utf-8";

.zq-mbnav { position: relative; z-index: 30; background: #0c1430; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.zq-mbnav-in { position: relative; display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; max-width: var(--zq-max); margin: 0 auto; padding: 0 12px; }
.zq-mbnav-link { display: block; height: 46px; line-height: 46px; padding: 0 12px; font-size: 14px; color: #c3cee9; white-space: nowrap; transition: color .2s, background .2s; }
.zq-mbnav-item:hover .zq-mbnav-link, .zq-mbnav-item:focus-within .zq-mbnav-link { color: #fff; background: rgba(255, 255, 255, .07); }
.zq-mbnav-link.zq-on { position: relative; color: #fff; font-weight: 700; background: var(--zq-grad-soft); }
.zq-mbnav-link.zq-on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--zq-grad); }
.zq-mbnav-sub { display: none; }
@media (min-width: 901px) and (max-width: 1120px) {
    .zq-mbnav-link { padding: 0 7px; font-size: 13px; }
    .zq-mbnav-link.zq-on::after { left: 7px; right: 7px; }
}
@media (min-width: 901px) and (hover: hover) {
    .zq-mbnav-item:hover .zq-mbnav-sub, .zq-mbnav-item:focus-within .zq-mbnav-sub { display: flex; }
    .zq-mbnav-sub { position: absolute; left: 50%; top: 100%; z-index: 31; transform: translateX(-50%); box-sizing: border-box; width: min(980px, 92vw); flex-wrap: wrap; align-content: flex-start; gap: 2px 4px; padding: 16px 18px; background: #0b132c; border: 1px solid rgba(255, 255, 255, .12); border-top: 2px solid var(--zq-blue); border-radius: 0 0 14px 14px; box-shadow: 0 24px 48px rgba(4, 8, 24, .52); }
    .zq-mbnav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; background: transparent; }
    .zq-mbnav-sub a { display: inline-block; padding: 7px 14px; border-radius: 8px; font-size: 13.5px; color: #a9bade; white-space: nowrap; }
    .zq-mbnav-sub a:hover { color: #fff; background: rgba(47, 107, 255, .3); }
    .zq-mbnav-sub a.zq-on { color: #fff; font-weight: 700; background: var(--zq-grad); }
}

.zq-mbintro { margin-bottom: 20px; }
.zq-mbintro p { margin: 0; font-size: 14.5px; line-height: 1.95; color: var(--zq-tx2); }
.zq-mbintro:empty { display: none; }
.zq-mbbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.zq-mbbar .info { font-size: 14px; color: var(--zq-tx2); }
.zq-mbbar .info b { color: var(--zq-blue); font-weight: 800; }
.zq-mbbar .links { display: flex; flex-wrap: wrap; gap: 8px; }
.zq-mbbar .links a {
    font-size: 13px; padding: 7px 14px; border-radius: 999px; color: var(--zq-tx2);
    background: var(--zq-card); border: 1px solid var(--zq-line);
}
.zq-mbbar .links a:hover { color: var(--zq-blue); border-color: rgba(47, 107, 255, .45); }

.zq-mbgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.zq-mbcard {
    position: relative; display: flex; flex-direction: column; background: var(--zq-card);
    border: 1px solid var(--zq-line); border-radius: 14px; overflow: hidden;
    transition: transform .24s, box-shadow .24s, border-color .24s;
}
.zq-mbcard:hover { transform: translateY(-5px); box-shadow: var(--zq-shadow-lg); border-color: rgba(47, 107, 255, .42); }
.zq-mbshot { position: relative; display: block; aspect-ratio: 5 / 6; overflow: hidden; background: #0a1024; }
.zq-mbshot-l { display: block; height: 100%; }
.zq-mbshot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s ease; }
.zq-mbcard:hover .zq-mbshot img { transform: scale(1.045); }
.zq-mbno {
    position: absolute; top: 10px; left: 10px; z-index: 2; padding: 6px 9px; border-radius: 7px;
    font: 600 11px/1 Consolas, "Courier New", monospace; letter-spacing: .06em; color: #dbe6ff;
    background: rgba(8, 14, 34, .72); border: 1px solid rgba(255, 255, 255, .18);
}
.zq-mbover {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; gap: 8px;
    padding: 38px 12px 12px; background: linear-gradient(to top, rgba(6, 10, 26, .92), rgba(6, 10, 26, 0));
    opacity: 0; transform: translateY(10px); transition: opacity .24s, transform .24s;
}
.zq-mbcard:hover .zq-mbover, .zq-mbcard:focus-within .zq-mbover { opacity: 1; transform: none; }
.zq-mbover a {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 34px;
    border-radius: 8px; font-size: 13px; font-weight: 700; color: #fff;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
}
.zq-mbover a:first-child { background: var(--zq-grad); border-color: transparent; }
.zq-mbover a:hover { color: #fff; filter: brightness(1.08); }
.zq-mbbody { display: flex; flex-direction: column; gap: 10px; padding: 14px 15px 15px; flex: 1; }
.zq-mbbody h3 {
    font-size: 14.5px; font-weight: 700; line-height: 1.55; color: var(--zq-tx); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zq-mbbody h3 a { color: inherit; }
.zq-mbbody h3 a:hover { color: var(--zq-blue); }
.zq-mbmeta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.zq-mbcate {
    font-size: 12px; padding: 3px 9px; border-radius: 999px; color: var(--zq-blue);
    background: rgba(47, 107, 255, .08); border: 1px solid rgba(47, 107, 255, .22);
}
.zq-mbdate { font: 12px/1 Consolas, "Courier New", monospace; color: var(--zq-tx3); letter-spacing: .02em; }

.zq-mbgrid:empty + .zq-empty { display: block; }
.zq-mbpage { margin-top: 34px; }

.zq-mbd-hero { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 30px; }
.zq-mbd-side { min-width: 0; }
.zq-mbd-side h3 { font-size: 17px; font-weight: 800; color: var(--zq-tx); margin-bottom: 12px; }
.zq-mbd-side p { font-size: 13.5px; line-height: 2.05; color: var(--zq-tx2); }
.zq-mbd-side p + p { margin-top: 10px; }
.zq-mbd-side .zq-mbd-btns .zq-btn { flex: 0 0 auto; min-width: 148px; }
.zq-mbd-side .zq-mbspec li { justify-content: flex-start; }
.zq-mbd-side .zq-mbspec li span { flex: 0 0 92px; }
.zq-mbd-side .zq-mbspec li b { text-align: left; }
.zq-mbd-shot {
    position: relative; border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08); 
}
.zq-mbd-shot img { display: block; width: 100%; height: auto; }
.zq-mbd-shot .bar {
    display: flex; align-items: center; gap: 7px; padding: 10px 14px;
    background: rgba(8, 14, 34, .94); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.zq-mbd-shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.zq-mbd-shot .bar span { margin-left: 6px; font: 600 11.5px/1 Consolas, monospace; color: #9fb0d6; letter-spacing: .06em; }
.zq-mbspec { border: 1px solid var(--zq-line); border-radius: 12px; overflow: hidden; }
.zq-mbspec li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 15px; font-size: 13.5px; border-top: 1px solid var(--zq-line); }
.zq-mbspec li:first-child { border-top: 0; }
.zq-mbspec li span { color: var(--zq-tx3); }
.zq-mbspec li b { color: var(--zq-tx); font-weight: 700; text-align: right; }
.zq-mbd-btns { display: flex; gap: 10px; margin-top: 16px; }
.zq-mbd-btns .zq-btn { flex: 1; }
.zq-mb-note { font-size: 13px; color: var(--zq-tx3); border-left: 3px solid var(--zq-line); padding-left: 12px; }
.zq-mbrelated { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.zq-mbrelated .zq-mbbody { padding: 11px 12px 12px; }
.zq-mbrelated .zq-mbbody h3 { font-size: 13px; }

.zq-mbcta { margin-top: 56px; padding: 44px 0; background: var(--zq-ink); color: #dfe5f5; position: relative; overflow: hidden; }
.zq-mbcta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 300px at 12% 0%, rgba(47, 107, 255, .38), transparent 62%), radial-gradient(560px 300px at 88% 100%, rgba(25, 211, 230, .22), transparent 60%); }
.zq-mbcta-in { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.zq-mbcta h2 { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.3px; }
.zq-mbcta p { margin-top: 8px; font-size: 14px; color: #a9bade; }
.zq-mbcta .acts { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 820px) {
    .zq-mbcta { margin-top: 36px; padding: 32px 0; }
    .zq-mbcta h2 { font-size: 19px; }
}

@media (max-width: 1100px) {
    .zq-mbgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .zq-mbrelated { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .zq-mbnav-in { justify-content: flex-start; gap: 6px; padding: 9px 12px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .zq-mbnav-in::-webkit-scrollbar { display: none; }
    .zq-mbd-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .zq-mbnav-link { height: 32px; line-height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
    .zq-mbnav-link.zq-on { background: var(--zq-grad); border-color: transparent; }
    .zq-mbnav-link.zq-on::after { display: none; }
    .zq-mbgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .zq-mbbody { padding: 11px 12px 12px; }
    .zq-mbbody h3 { font-size: 13.5px; }
    .zq-mbover { opacity: 1; transform: none; padding-top: 30px; }
    .zq-mbover a { height: 30px; font-size: 12px; }
}
@media (max-width: 520px) {
    .zq-mbgrid { gap: 10px; }
    .zq-mbdate { display: none; }
}

.zq-mbpop { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(6, 10, 26, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.zq-mbpop.is-open { display: flex; }
.zq-mbpop-box { position: relative; box-sizing: border-box; width: 420px; max-width: 100%; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 24px 56px rgba(4, 8, 24, .42); animation: zq-mbpop-in .26s ease; }
@keyframes zq-mbpop-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.zq-mbpop-hd { padding: 28px 26px 24px; text-align: center; color: #fff; background: var(--zq-grad); }
.zq-mbpop-hd .ic { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: 27px; line-height: 58px; }
.zq-mbpop-hd h4 { font-size: 20px; font-weight: 800; letter-spacing: 1px; }
.zq-mbpop-hd p { margin-top: 10px; font-size: 13.5px; line-height: 1.85; opacity: .95; }
.zq-mbpop-bd { padding: 22px 26px 26px; text-align: center; }
.zq-mbpop-no { display: inline-block; margin-bottom: 16px; font-size: 12.5px; font-weight: 700; color: var(--zq-blue); background: rgba(47, 107, 255, .09); border: 1px solid rgba(47, 107, 255, .24); border-radius: 999px; padding: 4px 14px; }
.zq-mbpop-x { position: absolute; right: 12px; top: 12px; z-index: 2; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff; font-size: 20px; line-height: 30px; cursor: pointer; }
.zq-mbpop-x:hover { background: rgba(255, 255, 255, .38); }
@media (max-width: 520px) {
    .zq-mbpop { padding: 16px; }
    .zq-mbpop-hd { padding: 22px 18px 20px; }
    .zq-mbpop-hd h4 { font-size: 18px; }
    .zq-mbpop-bd { padding: 18px 18px 22px; }
}