@charset "utf-8";

.help-breadcrumb {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 48px !important;
    margin-top: 16px !important;
    padding: 0 18px;
    color: #7b8c9d;
    border: 1px solid #deebf4;
    border-radius: 11px;
    background: #fff;
}
.help-breadcrumb a { color: #187bb8; }
.help-breadcrumb i { color: #a8b7c4; font-style: normal; }
.help-breadcrumb em { color: #43576a; font-style: normal; }

.help-shell {
    width: 1200px;
    margin: 14px auto 42px;
    color: #102a43;
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
.help-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    min-height: 190px;
    padding: 35px 48px;
    color: #fff;
    border-radius: 18px;
    background: radial-gradient(circle at 84% 20%, rgba(255,255,255,.18), transparent 24%), linear-gradient(135deg, #06447f, #0a8fd2);
    box-shadow: 0 16px 36px rgba(7, 75, 132, .2);
}
.help-hero > div > span { color: #bce7ff; font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.help-hero h1 { margin: 7px 0 6px; color: #fff; font-size: 34px; line-height: 46px; }
.help-hero p { margin: 0; color: #dbf1ff; font-size: 15px; line-height: 26px; }
.help-hero > a { display: flex; box-sizing: border-box; width: 248px; padding: 16px 20px; flex-direction: column; color: #fff !important; border: 1px solid rgba(255,255,255,.42); border-radius: 12px; background: rgba(255,255,255,.1); }
.help-hero > a small { color: #d8f0ff; font-size: 12px; }
.help-hero > a strong { margin-top: 5px; font-size: 23px; letter-spacing: 1px; }
.help-layout { display: grid; grid-template-columns: 270px 1fr; gap: 20px; align-items: start; margin-top: 20px; }
.help-sidebar, .help-content { border: 1px solid #dce8f2; border-radius: 15px; background: #fff; box-shadow: 0 9px 25px rgba(23,62,98,.08); overflow: hidden; }
.help-sidebar-title { padding: 21px 22px 16px; border-bottom: 1px solid #e8f0f6; }
.help-sidebar-title b { display: block; margin-bottom: 4px; font-size: 19px; }
.help-sidebar-title span { color: #7a8d9f; font-size: 12px; }
.help-sidebar ul { margin: 0; padding: 8px; }
.help-sidebar li { list-style: none; }
.help-sidebar li em { display: block; font-style: normal; }
.help-sidebar li a { display: block; padding: 13px 16px; color: #43576a !important; font-size: 14px; border-radius: 9px; }
.help-sidebar li span { display: none; }
.help-sidebar li:hover a, .help-sidebar li.hover a { color: #0877bd !important; font-weight: 700; background: #eaf6ff; }
.help-contact { margin: 10px 16px 16px; padding: 17px; border-radius: 11px; background: #f1f8fe; }
.help-contact span, .help-contact b { display: block; }
.help-contact span { color: #718598; font-size: 12px; }
.help-contact b { margin: 5px 0 12px; font-size: 15px; }
.help-contact a { display: inline-block; padding: 7px 13px; color: #fff !important; font-size: 12px; border-radius: 7px; background: #0877bd; }
.help-content { min-height: 470px; padding: 0 25px 25px; }
.help-content > header { display: flex; align-items: center; justify-content: space-between; min-height: 92px; border-bottom: 1px solid #e5edf4; }
.help-content > header span { color: #0a83c8; font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.help-content > header h2 { margin: 5px 0 0; color: #102a43; font-size: 24px; }
.help-content > header > a { color: #0877bd !important; font-size: 13px; }
.help-answer-list { padding-top: 5px; }
.help-answer { padding: 20px 5px; border-bottom: 1px solid #e9f0f5; }
.help-answer:last-child { border-bottom: 0; }
.help-answer h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 13px; color: #183b56; font-size: 16px; line-height: 26px; }
.help-answer h3 span { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; color: #fff; font-family: Arial; font-size: 12px; border-radius: 9px; background: #0a83c8; }
.help-answer > div { padding-left: 38px; color: #526779; font-size: 14px; line-height: 1.85; }
.help-answer > div p { margin: 5px 0; color: inherit; font-size: inherit; line-height: inherit; }
.help-answer > div img { max-width: 100%; height: auto; }

@media (max-width: 1240px) {
    .help-shell { width: auto; margin-right: 20px; margin-left: 20px; }
    .help-breadcrumb { margin-right: 20px !important; margin-left: 20px !important; }
}

@media (max-width: 800px) {
    .help-shell { width: auto; margin: 12px; }
    .help-breadcrumb { margin: 12px !important; }
    .help-hero { padding: 26px; }
    .help-hero > a { display: none; }
    .help-layout { grid-template-columns: 1fr; }
    .help-content { min-height: 0; padding: 0 18px 18px; }
    .help-answer > div { padding-left: 0; }
}

@media (max-width: 520px) {
    .help-hero { min-height: 160px; padding: 24px 20px; }
    .help-hero h1 { font-size: 28px; line-height: 38px; }
    .help-hero p { font-size: 14px; line-height: 23px; }
    .help-content > header { min-height: 78px; }
    .help-content > header h2 { font-size: 21px; }
    .help-content > header > a { display: none; }
}