.sec_methods_compare {
  scroll-margin-top: 70px;
  background: #fff;
  .wrap { margin: 0 auto; padding: 84px 40px 94px; max-width: 1360px; @media (max-width: 800px) { padding: 70px 28px 78px; } @media (max-width: 600px) { padding: 58px 18px 66px; } }
  .heading { .kicker { margin-bottom: 10px; } h2 { font-size: 36px; font-weight: 800; line-height: 1.45em; letter-spacing: -.03em; @media (max-width: 1200px) { font-size: 32px; } @media (max-width: 600px) { font-size: 28px; } } p:last-child { margin-top: 10px; color: #5d7797; font-size: 14px; } }
  .table { margin-top: 32px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 14px 36px #2c6db913; @media (max-width: 600px) { margin-top: 26px; overflow: visible; border: 0; border-radius: 0; box-shadow: none; } }
  table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  thead { background: #eef6ff; th { padding: 22px 24px; border-bottom: 1px solid var(--color-border); font-size: 18px; font-weight: 800; line-height: 1.5em; text-align: left; &:first-child { width: 24%; color: #496687; font-size: 14px; } .number { margin-bottom: 5px; display: block; } &:nth-child(2) { background: #e5f1ff; } } @media (max-width: 600px) { display: none; } }
  tbody { tr { border-bottom: 1px solid var(--color-border); &:last-child { border-bottom: 0; } } th, td { padding: 20px 24px; vertical-align: top; border-right: 1px solid var(--color-border); font-size: 14px; line-height: 1.8em; text-align: left; &:last-child { border-right: 0; } } th { color: #17355a; background: #f9fcff; font-weight: 800; } td { color: #48617f; } td:nth-child(2) { background: #f8fbff; } @media (max-width: 900px) { th, td { padding: 17px 16px; } } @media (max-width: 600px) { display: block; tr { margin-bottom: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--color-border); border-radius: 9px; box-shadow: 0 8px 22px #2c6db90c; &:last-child { border-bottom: 1px solid var(--color-border); } } th { padding: 11px 16px; grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--color-border); background: #eef6ff; font-size: 14px; } td { padding: 14px 13px 17px; font-size: 13px; line-height: 1.75em; &::before { margin-bottom: 8px; display: block; color: var(--color-blue); font-family: var(--font-en); font-size: 11px; font-weight: 800; line-height: 1.4em; content: attr(data-label); } } } }
}