.c8-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.c8-vis{position:relative;height:384px}
.c8-panel{position:absolute;left:0;top:0;width:60%;height:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:var(--white);padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px}
.c8-lb{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.c8-site{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:650}
.c8-site em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--blue)}
.c8-env{display:grid;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.c8-ck{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.c8-ck i{position:relative;flex:none;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line);box-sizing:border-box}
.c8-ck i b{position:absolute;inset:-1.5px;border-radius:50%;background:var(--green);opacity:0}
.c8-ck i b::after{content:"";position:absolute;left:5px;top:2.6px;width:3.4px;height:6.4px;border:solid var(--white);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.c8-qh{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.c8-qh strong{font-size:14px;font-weight:700}
.c8-q{display:grid;gap:6px}
.c8-qi{position:relative;display:grid;grid-template-columns:22px 1fr auto;gap:2px 8px;align-items:center;padding:7px 8px;border-radius:8px;border:1px solid var(--line)}
.c8-qon{position:absolute;inset:-1px;border-radius:8px;border:2px solid var(--blue);background:rgba(232,239,255,.55);opacity:0}
.c8-qn{position:relative;width:22px;height:22px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted)}
.c8-qt{position:relative;display:grid;gap:1px;min-width:0}
.c8-qt strong{font-size:13px;font-weight:650;white-space:nowrap}
.c8-qt span{font-size:12px;color:var(--muted);white-space:nowrap}
.c8-bar{position:relative;grid-column:2/4;height:4px;border-radius:2px;background:var(--paper);overflow:hidden}
.c8-bar b{position:absolute;inset:0;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:left center}
.c8-rd{position:relative;display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:5px;background:#e3f1ea;color:var(--green);font-size:12px;font-weight:700;letter-spacing:.04em;opacity:0}
.c8-adm{position:absolute;right:0;top:44px;width:36%;border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.c8-ab{display:flex;gap:4px;align-items:center;height:22px;padding:0 9px;background:var(--white);border-bottom:1px solid var(--line)}
.c8-ab i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.c8-aw{display:grid;grid-template-columns:54% 1fr;height:216px}
.c8-side{display:flex;flex-direction:column;gap:4px;padding:8px 6px;background:var(--navy)}
.c8-mi{position:relative;display:flex;align-items:center;justify-content:space-between;height:24px;padding:0 3px 0 7px;border-radius:5px}
.c8-mi>b{position:relative;width:52%;height:5px;border-radius:3px;background:rgba(255,255,255,.32)}
.c8-mi>i{position:relative;width:20px;height:20px}
.c8-mon{position:absolute;inset:0;border-radius:5px;background:rgba(255,255,255,.14);opacity:0}
.c8-main{display:flex;flex-direction:column;gap:6px;padding:10px 8px}
.c8-main b{height:6px;border-radius:3px;background:var(--line)}
.c8-main b.s{width:62%}
.c8-main b.h{height:9px;width:78%;background:#c9ccc2}
.c8-fly{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--blue);color:var(--white);display:grid;place-items:center;font-size:12px;font-weight:700;z-index:3;opacity:0}
.c8-ok{position:absolute;right:0;top:300px;width:36%;display:flex;justify-content:center;opacity:0}
.c8-ok span{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;background:var(--white);border:1px solid #bfdccf;color:var(--green);font-size:12px;font-weight:700;white-space:nowrap}
.c8-ok i{position:relative;width:13px;height:13px;border-radius:50%;background:var(--green)}
.c8-ok i::after{content:"";position:absolute;left:4.2px;top:2.2px;width:3.2px;height:6px;border:solid var(--white);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.c8-list{list-style:none;display:grid;gap:6px}
.c8-list li{position:relative;display:grid;grid-template-columns:44px 1fr;align-items:center;padding:14px 14px 14px 10px;border-top:1px solid var(--line)}
.c8-list li:first-child{border-top:0}
.c8-hl{position:absolute;inset:0;border-radius:12px;background:var(--soft);opacity:0}
.c8-mark{position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--blue);transform:scaleY(0)}
.c8-num{position:relative;width:30px;height:30px;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0}
.c8-num b{position:absolute;inset:0;border-radius:50%;background:var(--blue);color:var(--white);display:grid;place-items:center;font-weight:700;opacity:0}
.c8-txt{position:relative;display:grid;gap:3px}
.c8-txt strong{font-size:18px;font-weight:650}
.c8-txt span{font-size:15px;color:var(--muted)}
@container (max-width:639px){
.c8-grid{grid-template-columns:1fr;gap:16px}
.c8-vis{height:322px}
.c8-panel{width:63%;padding:10px 9px;gap:8px}
.c8-lb{letter-spacing:.02em}
.c8-site em{display:none}
.c8-ck{font-size:12px;gap:5px}
.c8-env{gap:5px;padding-bottom:8px}
.c8-qh span{display:none}
.c8-qi{grid-template-columns:20px 1fr auto;gap:3px 6px;padding:6px}
.c8-qn{width:20px;height:20px}
.c8-qt strong{font-size:12px}
.c8-qt span{display:none}
.c8-rd{height:18px;padding:0 4px;letter-spacing:0}
.c8-adm{width:34%;top:16px}
.c8-aw{height:206px;grid-template-columns:62% 1fr}
.c8-mi>b{width:34%}
.c8-main{padding:8px 5px}
.c8-ok{top:auto;bottom:0;width:auto;right:0}
.c8-ok span{height:26px;padding:0 8px;gap:4px}
.c8-list li{grid-template-columns:40px 1fr;padding:10px 10px 10px 8px}
.c8-num{font-size:12px}
.c8-txt strong{font-size:16px}
.c8-txt span{font-size:13px}
}