* {
    margin: 0;
    padding: 0;
  }

  ul {
    list-style-type: none;
  }

  .page {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* flex布局 */
  .flex {
    display: flex;
  }

  .flex_1 {
    flex: 1;
    -webkit-flex: 1;
    display: block;
    min-width: 0;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
  }

  .flex-between {
    justify-content: space-between;
  }

  .flex-betweens {
    display: flex;
    justify-content: space-between;
  }

  .flex_bt {
    justify-content: space-between;
  }

  .flex-around {
    display: flex;
    justify-content: space-around;
  }

  .flex-evenly {
    display: flex;
    justify-content: space-evenly;
  }

  .flex_ac {
    display: flex;
    align-items: center !important;
    flex-direction: row !important;
  }

  .flex-be {
    display: flex;
    align-items: baseline;
  }

  .flex_aed {
    align-items: flex-end !important;
  }

  .flex_jc {
    display: flex;
    justify-content: center;
  }

  .flex_jcs {
    justify-content: flex-end;
  }

  .flex-mid {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-column-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex_end {
    display: flex;
    justify-content: flex-end;
  }

  .fw {
    font-weight: 700;
  }

  .font12 {
    font-size: 12px;
  }

  .font14 {
    font-size: 14px;
  }

  .font16 {
    font-size: 16px;
  }

  .font18 {
    font-size: 18px;
  }

  .font20 {
    font-size: 20px;
  }

  .font24 {
    font-size: 24px;
  }

  .font26 {
    font-size: 26px;
  }

  .font28 {
    font-size: 28px;
  }

  .font32 {
    font-size: 32px;
  }

  .font36 {
    font-size: 36px;
  }

  .ccc {
    color: #ccc;
  }

  .c666 {
    color: #666;
  }

  .c333 {
    color: #333;
  }

  .cfff {
    color: #fff;
  }

  .c999 {
    color: #999;
  }

  .bg-fff {
    background-color: #fff;
  }

  .bg-fa {
    background-color: #FAFAFA;
  }

  .bg-f9 {
    background-color: #F9F9F9;
  }

  .bg-f7 {
    background-color: #F7F7F7;
  }

  .bg-fb {
    background-color: #fbfbfb;
  }

  .po_r {
    position: relative;
  }

  .w100 {
    width: 100%;
  }

  .h100 {
    height: 100%;
  }


  /* 整个页面的滚动条 */
  ::-webkit-scrollbar {
    width: 8px;
    /* 垂直滚动条宽度 */
    height: 8px;
    /* 水平滚动条高度 */
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }

  /* 滚动条滑块悬停状态 */
  ::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }

  .line1 {
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .line2 {
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .line3 {
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .line4 {
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }

  /* ===== PC 固定宽度与三列网格（保证120%缩放仍显示三列） ===== */
  html,
  body {
    min-width: 1280px;
    box-sizing: content-box;
    /* 页面最小宽度，避免浏览器缩放或小分辨率导致掉到两列 */
  }


  .onx {
    height: 40px;
    transition: all .5s;
  }