:root {
      --bg: #f5f7fb;
      --card: #fff;
      --text: #1f2937;
      --muted: #6b7280;
      --line: #e5e7eb;
      --brand: #2563eb;
      --shadow: 0 10px 30px rgba(17, 24, 39, .08);
      --r: 14px
  }

  body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
      color: var(--text);
      /* background: radial-gradient(1200px 500px at 20% 0%, rgba(37, 99, 235, .10), rgba(37, 99, 235, 0)), var(--bg) */
  }

  a {
      color: inherit;
      text-decoration: none
  }

  .page {
      max-width: 1200px;
      margin: 0 auto;
      padding: 22px 18px 42px
  }

  .breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 14px
  }

  .breadcrumb .sep {
      opacity: .55
  }

  .breadcrumb a:hover {
      color: var(--brand)
  }

  .d_layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 18px;
      align-items: start
  }

  .card {
      background: var(--card);
      border: 1px solid rgba(229, 231, 235, .85);
      border-radius: var(--r);
      box-shadow: var(--shadow)
  }

  .content {
      padding: 28px 28px 22px
  }

  .title {
      margin: 0 0 12px;
      font-size: 34px;
      line-height: 1.2;
      letter-spacing: .2px
  }

  .meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      color: var(--muted);
      font-size: 13px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line)
  }

  .meta strong {
      font-weight: 600;
      color: rgba(55, 65, 81, .9)
  }

  .share {
      display: flex;
      align-items: center;
      gap: 8px
  }

  .share-btn {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      border: 1px solid rgba(229, 231, 235, .9);
      background: linear-gradient(180deg, #fff, #f7f8fb);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform .15s ease, border-color .15s ease
  }

  .share-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(37, 99, 235, .45)
  }

  .share-btn svg {
      width: 16px;
      height: 16px;
      opacity: .78
  }

  .article {
      padding-top: 18px;
      line-height: 1.9;
      font-size: 15px;
      color: rgba(31, 41, 55, .95)
  }

  .article h2 {
      font-size: 18px;
      margin: 18px 0 8px
  }

  .article p {
      margin: 10px 0
  }

  .figure {
      margin: 18px 0 8px;
  }

  .figure img {
      width: 100%;
      height: auto;
  }

  .nav-links {
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
  }

  .nav-item {
      padding: 14px;
      border-radius: 12px;
      border: 1px solid rgba(229, 231, 235, .9);
      background: linear-gradient(180deg, #fff, #fafbff);
      transition: transform .15s ease, border-color .15s ease
  }

  .nav-item:hover {
      transform: translateY(-1px);
      border-color: rgba(37, 99, 235, .40)
  }

  .nav-item .k {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 6px
  }

  .nav-item .v {
      font-size: 13px;
      line-height: 1.35
  }

  .sidebar {
      position: sticky;
      top: 16px
  }

  .side-wrap {
      padding: 16px
  }

  .side-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px
  }

  .side-title h3 {
      margin: 0;
      font-size: 16px
  }

  .tag {
      font-size: 12px;
      color: rgba(37, 99, 235, .95);
      background: rgba(37, 99, 235, .10);
      border: 1px solid rgba(37, 99, 235, .18);
      padding: 5px 10px;
      border-radius: 999px
  }

  .carousel {
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid rgba(229, 231, 235, .9);
      background: #0b1220;
      position: relative
  }

  .viewport {
      position: relative;
      height: 180px
  }

  .slides {
      height: 100%;
      display: flex;
      transition: transform .45s cubic-bezier(.2, .8, .2, 1)
  }

  .slide {
      min-width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      align-items: flex-end
  }

 .slide a {
      width: 100%;
      height: 100%;
      display: block;
      text-decoration: none;
      color: inherit
  }
      
  .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .c-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 34px;
      height: 34px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .35);
      background: rgba(15, 23, 42, .55);
      backdrop-filter: blur(6px);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
      user-select: none
  }

  .c-btn.prev {
      left: 10px
  }

  .c-btn.next {
      right: 10px
  }

  .c-btn svg {
      width: 16px;
      height: 16px
  }

  .dots {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 10px;
      display: flex;
      gap: 6px;
      justify-content: flex-end;
      z-index: 2
  }

  .dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .65);
      background: rgba(255, 255, 255, .20);
      cursor: pointer
  }

  .dot.active {
      background: #fff
  }

  .side-card {
      margin-top: 12px;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid rgba(229, 231, 235, .75);
      background: linear-gradient(180deg, #fff, #fafbff)
  }

  .side-card h4 {
      margin: 0 0 10px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between
  }

  .side-card .qa-all {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
      padding: 2px 6px;
      border-radius: 999px;
      transition: color .15s ease, background-color .15s ease, transform .15s ease
  }

  .side-card .qa-all::after {
      content: '';
      width: 6px;
      height: 6px;
      border-right: 1.6px solid currentColor;
      border-top: 1.6px solid currentColor;
      transform: rotate(45deg);
      margin-top: 1px
  }

  .side-card .qa-all:hover {
      color: var(--brand);
      background: rgba(37, 99, 235, .08);
      transform: translateX(1px)
  }

  .channel-card {
      margin-top: 12px;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid rgba(229, 231, 235, .75);
      background: linear-gradient(180deg, #fff, #fafbff)
  }

  .channel-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none
  }

  .channel-list .channel-list-item {
      display: block;
      width: 62px;
      height: 62px;
      border-radius: 12px;
  }

  .channel-list .channel-list-item:hover {
      border-radius: 0;
  }

  .channel-list .channel-name {
      font-size: 12px;
      color: rgba(55, 65, 81, .9);
      line-height: 1.1;
      text-align: center;
      white-space: nowrap;
      display: block;
      margin-top: 6px;

  }

  .channel-list .app_item {
      background: url(https://img.cdeledu.com/RUIDA/2026/0113/38d96d8d7ea8684c-0.png) no-repeat;
      background-size: cover;
  }

  .channel-list .app_item:hover {
      background: url(https://img.cdeledu.com/RUIDA/2026/0113/65923763e8808c56-0.png) no-repeat;
      background-size: cover;
  }

  .channel-list .wechat_item {
      background: url(https://www.ruidaedu.com/upload/html/2021/11/18/xt2ffdde986f314d18aa78e3755bf67996.png) no-repeat;
      background-size: cover;
  }

  .channel-list .wechat_item:hover {
      background: url(https://www.ruidaedu.com/upload/html/2021/11/18/xta38ccc393e0d455ea2ffc70011683d73.jpeg) no-repeat;
      background-size: cover;
  }


  .channel-list .xhs_item {
      background: url(https://www.ruidaedu.com/upload/html/2021/11/18/xta91a184e37874338bac813f0212313f5.png) no-repeat;
      background-size: cover;
  }

  .channel-list .xhs_item:hover {
      background: url(https://www.ruidaedu.com/upload/html/2021/11/18/xt68d9a37dd57b4675a802b2288eacd53a.png) no-repeat;
      background-size: cover;
  }

  .channel-list .douyin_item {
      background: url(https://www.ruidaedu.com/upload/html/2021/11/18/xt5b014eb35f0f4fcba983205755754514.png) no-repeat;
      background-size: cover;
  }

  .channel-list .douyin_item:hover {
      background: url(https://www.ruidaedu.com/upload/html/2021/11/18/xt8bd03c09c3a44be68d0bcadf497b5928.png) no-repeat;
      background-size: cover;
  }

  .channel-list .weibo_item {
      background: url(https://www.ruidaedu.com/upload/html/2021/11/18/xta152ac61e78448878063a86f689b38ad.png) no-repeat;
      background-size: cover;
  }

  .channel-list .weibo_item:hover {
      background: url(https://www.ruidaedu.com/upload/html/2021/11/18/xt5e4acdff015247119b4572bae9d1e777.png) no-repeat;
      background-size: cover;
  }

  .channel-list .bili_item {

      background: url(https://www.ruidaedu.com/upload/html/2021/11/19/xt36962cda58884768aeb2a046dbdff4e6.png) no-repeat;
      background-size: cover;
  }

  .channel-list .bili_item:hover {
      background: url(https://www.ruidaedu.com/upload/html/2021/11/19/xt453c6ce491034ae6912621fa03943018.jpg) no-repeat;
      background-size: cover;
  }

  .channel-list .toutiao_item {
      background: url(https://www.ruidaedu.com/upload/html/2021/11/19/xte170ef7e49fd4a0db14dee39f3e3b1a5.png) no-repeat;
      background-size: cover;
  }

  .channel-list .toutiao_item:hover {
      background: url(https://www.ruidaedu.com/upload/html/2021/11/19/xt917c27abe05b460a84cf236cfd9cf6d0.jpg) no-repeat;
      background-size: cover;
  }

  .channel-list .baidu_item {
      background: url(https://www.ruidaedu.com/upload/html/2021/11/19/xt8645a06c5eed46d6b0de3c47ca606e80.png) no-repeat;
      background-size: cover;
      cursor: pointer;
  }

  .channel-list .baidu_item:hover {
      background: url(https://www.ruidaedu.com/upload/html/2021/11/19/xt20e6b8c383e747bb95dac01399b79a0c.png) no-repeat;
      background-size: cover;
  }

  .channel-list .mini_item {
      background: url(https://img.cdeledu.com/RUIDA/2026/0113/38d96d8d7ea8684c-0.png) no-repeat;
      background-size: cover;
      cursor: pointer;
  }

  .channel-list .mini_item:hover {
      background: url(https://img.cdeledu.com/RUIDA/2026/0113/3a90f49d5f1add1e-0.png) no-repeat;
      background-size: cover;
  }

  .channel-list .zhihu_item {
      background: url(https://www.ruidaedu.com/upload/html/2021/12/23/xtbb598dce51914e8cb28e3e00e411b45f.png) no-repeat;
      background-size: cover;
      cursor: pointer;
  }

  .face_item {
      background: url(http://img.cdeledu.com/ADVC/2022/0117/75ccff25710de101-0.png) no-repeat;
      background-size: cover;
      cursor: pointer;
  }

  .channel-list .net_item {
      background: url(http://img.cdeledu.com/ADVC/2022/0117/019fae143a6129ce-0.png) no-repeat;
      background-size: cover;
      cursor: pointer;
  }

  .qa {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px
  }

  .qa a {
      display: block;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid rgba(229, 231, 235, .9);
      background: #fff;
      transition: transform .15s ease, border-color .15s ease
  }

  .qa a:hover {
      transform: translateY(-1px);
      border-color: rgba(37, 99, 235, .35)
  }

  .qa .q {
      font-size: 13px;
      line-height: 1.35
  }

  .qa .m {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px
  }



  @media (max-width:980px) {
      .d_layout {
          grid-template-columns: 1fr
      }

      .sidebar {
          position: static
      }
  }
    
img {
    max-width: 100%;
}