@charset "utf-8";



* { margin: 0px; padding: 0px; box-sizing: border-box; font-family: system-ui, -apple-system, "Microsoft Yahei", sans-serif; }



body { background-color: rgb(248, 250, 252); color: rgb(51, 65, 85); }



.page-wrap { max-width: 1200px; margin: 0px auto; padding: 40px 20px; }



.page-header { text-align: center; margin-bottom: 48px; }



.page-header .tip { font-size: 14px; color: rgb(37, 99, 235); background: rgb(239, 246, 255); display: inline-block; padding: 4px 12px; border-radius: 99px; margin-bottom: 12px; }



.page-header h1 { font-size: 30px; color: rgb(15, 23, 42); margin-bottom: 8px; font-weight: 700; }



.page-header .desc { color: rgb(100, 116, 139); font-size: 15px; }



.main-layout { display: flex; gap: 32px; }



.sidebar { width: 220px; flex-shrink: 0; }



.sidebar-nav { background: rgb(255, 255, 255); border-radius: 16px; padding: 16px; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px; position: sticky; top: 20px; }



.sidebar-nav a { display: block; padding: 12px 16px; border-radius: 12px; text-decoration: none; color: rgb(71, 85, 105); margin-bottom: 4px; transition: 0.24s; cursor: pointer; }



.sidebar-nav a.active { background-color: rgb(37, 99, 235); color: white; }



.sidebar-nav a:hover:not(.active) { background-color: rgb(241, 245, 249); transform: translateX(2px); }



.faq-content { flex: 1 1 0%; }



.faq-item { background: rgb(255, 255, 255); border-radius: 14px; margin-bottom: 14px; border: 1px solid rgb(226, 232, 240); overflow: hidden; transition: 0.24s; }



.faq-item.hidden-item { display: none; }



.faq-item:hover { border-color: rgb(191, 219, 254); box-shadow: rgba(37, 99, 235, 0.08) 0px 4px 12px; transform: translateY(-2px); }



.faq-question { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }



.faq-question > span:first-child { font-weight: 600; font-size: 15.5px; }



.faq-answer { padding: 0px 22px; max-height: 0px; overflow: hidden; color: rgb(85, 85, 85); line-height: 1.75; transition: 0.35s; font-size: 15px; }



.faq-item.open .faq-answer { padding: 0px 22px 22px; max-height: 800px; }



.icon-arrow { transition: transform 0.32s; font-size: 16px; color: rgb(102, 102, 102); }



.faq-item.open .icon-arrow { transform: rotate(180deg); }



@media (max-width: 768px) {

  .main-layout { flex-direction: column; }

  .sidebar { width: 100%; }

  .sidebar-nav { display: flex; overflow-x: auto; gap: 6px; padding: 12px; }

  .sidebar-nav a { white-space: nowrap; margin-bottom: 0px; }

  .sidebar-nav a:hover:not(.active) { transform: none; }

}