.content-page .content-grid { gap: 48px; } .content-page .content-main { max-width: none; width: 100%; } .content-page .content-main > h1 { font-family: var(--font-display); font-size: clamp(38px, 3.1vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; color: #2449a8; margin: 0 0 20px; } .content-page .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin: 0 0 28px; padding: 0 0 22px; border-bottom: 1px solid #e8edf4; } .content-page .article-meta-item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.4; color: #64748b; } .content-page .article-meta-item i, .content-page .article-meta-item .svg-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; width: 1em; height: 1em; color: #94a3b8; line-height: 1; } .content-page .content-main .content-lead, .content-page .content-main > p, .content-page .content-main p { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: #172033; font-weight: 400; margin: 0 0 8px; } .content-page .content-main .content-lead { font-size: 17px; line-height: 1.7; margin: 0 0 12px; } .content-page .content-main h2 { font-family: var(--font-display); font-size: clamp(27px, 2.1vw, 30px); font-weight: 700; line-height: 1.25; color: #0d203d; letter-spacing: -0.015em; margin: 22px 0 8px; text-wrap: balance; } .content-page .content-main h3 { font-family: var(--font-display); font-size: clamp(20px, 1.5vw, 22px); font-weight: 600; line-height: 1.35; color: #152a4a; letter-spacing: -0.01em; margin: 16px 0 6px; } .content-page .content-main h3:first-child { margin-top: 0; } .content-page .content-main h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.35; color: #1a3358; margin: 22px 0 10px; } .content-page .content-main strong { font-weight: 700; color: #0d203d; } .content-page .content-main .accent, .content-page .content-main strong.accent { color: #d45122; font-weight: 700; } .content-page .content-main p strong, .content-page .content-main li strong, .content-page .content-main td strong, .content-page .content-main th strong { color: #0d203d !important; font-weight: 700 !important; } .content-page .content-main .accent, .content-page .content-main p strong.accent, .content-page .content-main li strong.accent { color: #d45122 !important; } .content-page .content-main ul:not(.content-toc-list):not(.sidebar-links), .content-page .content-main ol:not(.content-toc-list) { margin: 8px 0 10px; padding-left: 1.4em; list-style-position: outside; } .content-page .content-main ul:not(.content-toc-list):not(.sidebar-links) { list-style-type: disc; } .content-page .content-main ol:not(.content-toc-list) { list-style-type: decimal; } .content-page .content-main ul:not(.content-toc-list):not(.sidebar-links) > li, .content-page .content-main ol:not(.content-toc-list) > li { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: #172033; margin: 0 0 4px; padding-left: 0.2em; list-style: inherit; display: list-item; } .content-page .content-main ul:not(.content-toc-list):not(.sidebar-links) > li:last-child, .content-page .content-main ol:not(.content-toc-list) > li:last-child { margin-bottom: 0; } .content-page .content-main ul:not(.content-toc-list):not(.sidebar-links) > li::marker { color: var(--c-primary, #C45C26); font-size: 0.85em; } .content-page .content-main ol:not(.content-toc-list) > li::marker { color: #3158d4; font-weight: 600; } .content-page .content-main table { width: 100%; margin: 28px 0; border-collapse: collapse; font-size: 15px; line-height: 1.55; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .content-page .content-main table th, .content-page .content-main table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid #e8edf4; color: #172033; font-size: 15px; line-height: 1.55; white-space: normal; } .content-page .content-main table th { font-weight: 700; color: #0d203d; background: #f5f8fc; border-bottom-color: #dbe4f0; } .content-page .content-main table tbody tr:nth-child(even) { background: #fafbfd; } .content-page .content-main p a, .content-page .content-main li a, .content-page .content-main td a { color: #2f5699; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(47, 86, 153, 0.35); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color 0.15s ease, text-decoration-color 0.15s ease; } .content-page .content-main p a:hover, .content-page .content-main li a:hover, .content-page .content-main td a:hover { color: #1e3f7a; text-decoration-color: rgba(30, 63, 122, 0.55); } .content-page .content-main .content-image { margin: 22px auto; width: 100%; max-width: min(100%, 860px); border-radius: 12px; border: 1px solid rgba(14, 31, 61, 0.10); overflow: hidden; box-shadow: 0 1px 3px rgba(18, 34, 68, 0.04); background: #f3f4f6; } .content-page .content-main .content-image img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; object-position: center; } .content-page .content-main p + .content-image, .content-page .content-main ul + .content-image, .content-page .content-main ol + .content-image, .content-page .content-main table + .content-image { margin-top: 22px; } .content-page .content-main .content-image + h2 { margin-top: 26px; } .content-page .content-main .content-image + h3 { margin-top: 20px; } .content-page .content-main .content-image + p { margin-top: 12px; } .content-page .content-main .content-image + .content-image, .content-page .content-main table + table { margin-top: 20px; } .content-page .content-main h2 + .content-image, .content-page .content-main h3 + .content-image, .content-page .content-main h4 + .content-image { margin-top: 14px; } .content-page .content-main h2 + p, .content-page .content-main h3 + p, .content-page .content-main h4 + p { margin-top: 0; } .content-page .content-main ul + p, .content-page .content-main ol + p { margin-top: 4px; } .content-page .content-sidebar .sidebar-box h3 { font-size: 18px; font-weight: 700; color: #0d203d; letter-spacing: -0.01em; margin: 0 0 14px; padding-bottom: 12px; } .content-page .content-sidebar .sidebar-section h4 { font-size: 11.5px; font-weight: 700; color: #7b879c; letter-spacing: 0.06em; margin: 18px 0 10px; padding-top: 14px; } .content-page .content-sidebar .sidebar-links a { display: block; padding: 11px 28px 11px 14px; font-size: 15px; line-height: 1.45; color: #334155; font-weight: 500; border-radius: 8px; border-left: 3px solid transparent; } .content-page .content-sidebar .sidebar-links a::after { top: 50%; transform: translateY(-50%); line-height: 1; color: #cbd5e1; } .content-page .content-sidebar .sidebar-links a:hover { color: #2647b6; background: #f5f8ff; } .content-page .content-sidebar .sidebar-links a:hover::after { color: #3158d4; transform: translateY(-50%) translateX(2px); } .content-page .content-sidebar .sidebar-links a.active { background: #eef3ff; color: #2647b6; font-weight: 600; box-shadow: none; border-left: 3px solid #3158d4; padding-left: 11px; } .content-page .content-sidebar .sidebar-links a.active::after { color: #3158d4; } .sidebar-drawer .sidebar-links a { font-size: 15px; line-height: 1.45; padding: 12px 28px 12px 14px; border-left: 3px solid transparent; } .sidebar-drawer .sidebar-links a.active { background: #eef3ff; color: #2647b6; font-weight: 600; box-shadow: none; border-left: 3px solid #3158d4; padding-left: 11px; } .sidebar-drawer .sidebar-links a:hover { color: #2647b6; background: #f5f8ff; } @media (max-width: 1023px) { .content-page .content-grid { gap: 40px; } .content-page .content-main { max-width: 100%; } .content-page .content-main > h1 { font-size: clamp(34px, 4vw, 40px); line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 18px; } .content-page .content-main h2 { font-size: clamp(25px, 3vw, 28px); margin: 44px 0 16px; } .content-page .content-main h3 { font-size: clamp(19px, 2.4vw, 21px); margin: 28px 0 12px; } .content-page .content-main .content-lead, .content-page .content-main p, .content-page .content-main ul li, .content-page .content-main ol li { font-size: 16.5px; line-height: 1.72; } .content-page .article-meta { margin-bottom: 24px; padding-bottom: 18px; } } @media (max-width: 767px) { .content-page { padding: 28px 0 50px; } .content-page > .container { padding-left: 20px; padding-right: 20px; } .content-page .content-main > h1 { font-size: clamp(28px, 6.8vw, 32px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 16px; } .content-page .article-meta { gap: 10px 14px; margin-bottom: 22px; padding-bottom: 16px; } .content-page .article-meta-item { font-size: 13px; } .content-page .content-main h2 { font-size: clamp(23px, 5.5vw, 26px); margin: 20px 0 8px; } .content-page .content-main h3 { font-size: clamp(18px, 4.5vw, 20px); margin: 14px 0 6px; } .content-page .content-main table th, .content-page .content-main table td { font-size: 14.5px; padding: 10px 12px; } .content-page .content-main .content-lead, .content-page .content-main p, .content-page .content-main ul li, .content-page .content-main ol li { font-size: 16px; line-height: 1.65; margin-bottom: 8px; } .content-page .content-main ul:not(.content-toc-list), .content-page .content-main ol:not(.content-toc-list) { padding-left: 1.25em; margin: 8px 0 10px; } .content-page .content-main ul:not(.content-toc-list) > li, .content-page .content-main ol:not(.content-toc-list) > li { margin-bottom: 4px; } .content-page .content-main .content-image { margin: 18px auto; border-radius: 12px; } .content-page .content-main .content-image + h2 { margin-top: 22px; } .content-page .content-main .content-image + p { margin-top: 10px; } }