.main_color {
  --body-background     : none;
  --bg-default-color    : #f8f8f8;
  --bg-hover-color      : #e0e0e0;
  --header-bg-color     : #fff;
  --header-hover-color  : #0065d1;
  --text-default-color  : #333;
  --text-des-color      : #999;
  --text-hover-color    : #0065d1;
  --border-default-color: #dddddd;
  --border-hover-color  : #52a6ff;
  --shadow-default      : 0 0 6px 1px rgba(0, 0, 0, 0.2);
  --shadow-hover        : 0 0 10px 2px rgba(0, 0, 0, 0.2);
  --border-radius       : 4px;
}

.second_color {
  --body-background     : linear-gradient(90deg, #00638a, #bb4dcf, #4f73e9, #df10df, #021a4b, #127500, #fb3760, #866691);
  --bg-default-color    : #00000010;
  --bg-hover-color      : #00000020;
  --header-bg-color     : transparent;
  --header-hover-color  : #fff;
  --text-default-color  : #fff;
  --text-des-color      : #ddd;
  --text-hover-color    : #52a6ff;
  --border-default-color: #dddddd;
  --border-hover-color  : #999;
  --shadow-default      : 0 0 10px 1px rgba(0, 0, 0, 0.1);
  --shadow-hover        : 0 0 10px 2px rgba(255, 255, 255, 0.2);
}

* {
  box-sizing: border-box;
  color     : var(--text-default-color);
  transition: all 0.3s;

  &::after,
  &::before {
    box-sizing: border-box;
    color     : var(--text-default-color);
    transition: all 0.4s;
  }
}



body {
  margin          : 0;
  padding         : 0;
  padding-top     : 80px;
  background-image: var(--body-background);
  background-size : 1000% 100%;
  font-size       : 14px;
  overflow-x      : hidden;

  &::-webkit-scrollbar {
    width : 6px;
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--bg-default-color);
  }

  &::-webkit-scrollbar-thumb {
    border-radius   : 50%;
    background-color: var(--border-default-color);
    cursor          : pointer;
  }
}

:is(h1, h2, h3, h4, h5, h6, ul, ol, li, p, pre, blockquote, dl, dt, dd, table, button) {
  margin    : 0;
  padding   : 0;
  list-style: none;
}

:is(a, p, span, h1, h2, h3, h4, h5, h6) {
  text-decoration: none;
  color          : var(--text-default-color);
  font-family    : 'Open Sans', sans-serif, Arial, "PingFang SC", "Microsoft YaHei"，'宋体', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif;

  &:hover {
    color          : var(--text-hover-color);
    text-decoration: none;

  }
}

/* 通用样式 */
.container {
  margin-bottom: 1.5em;
}

.lm_title {
  margin         : 20px 0;
  padding        : 0 15px 8px;
  border-bottom  : 3px solid var(--border-hover-color);
  justify-content: space-between;
  align-items    : center;

  &>h3 {
    font-weight   : bolder;
    letter-spacing: 4px;
  }

  &>a {
    font-weight: bolder;

    &:hover {
      scale: 1.5;
    }
  }

}

.cards_box {
  flex-wrap: wrap;
}

.cards_list {
  min-height: 300px;
}

.card {
  background-color       : transparent;
  backdrop-filter        : blur(30px);
  -webkit-backdrop-filter: blur(30px);
  overflow               : hidden;

  & .card_img {
    overflow: hidden;

    & img {
      width       : 100%;
      aspect-ratio: 2 / 2;
      object-fit  : cover;
      transition  : all cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
    }
  }

  & .card_body {
    height  : 40px;
    padding : 0 8px;
    overflow: hidden;
    z-index : 100;

    & .card_title {
      height       : 40px;
      line-height  : 40px;
      overflow     : hidden;
      text-overflow: ellipsis;
      white-space  : nowrap;
    }

    & .card_text {
      display           : -webkit-box;
      width             : 100%;
      height            : 80px;
      font-size         : 12px;
      color             : var(--text-des-color);
      line-height       : calc(80px / 3);
      overflow          : hidden;
      text-overflow     : ellipsis;
      -webkit-box-orient: vertical;
      line-clamp        : 3;
      -webkit-line-clamp: 3;
    }

    & .card_time {
      height     : 40px;
      font-size  : 12px;
      line-height: 40px;
      color      : var(--text-des-color);
    }
  }

  &:hover .card_img img {
    scale: 1.1;
  }

  &:hover .card_body .hover_text {
    color: var(--text-hover-color);
  }
}

.row_card {
  height        : 120px;
  display       : flex;
  flex-direction: row;
  container-type: size;

  &>.card_img {
    height      : 100cqh;
    aspect-ratio: 1 / 1;
  }

  &>.card_body {
    width  : calc(100% - 100cqh);
    height : 100cqh;
    padding: 0 15px;

    & .card_title {
      height     : 25cqh;
      line-height: 25cqh;
    }

    & .card_text {
      height     : 50%;
      line-height: calc(50cqh / 3);
    }

    & .card_time {
      height     : 25cqh;
      line-height: 25cqh;
    }
  }
}

.list_box {
  padding         : 0 20px;
  border          : 1px solid var(--border-default-color);
  background-color: var(--bg-default-color);

  & .list_item {
    padding         : 12px 0;
    border          : none;
    border-bottom   : 1px dashed var(--border-default-color);
    background-color: transparent;

    &:last-child {
      border-bottom: none;
    }

    &>li {
      font-weight: bolder;

      &:hover {
        color: var(--text-hover-color);
      }
    }
  }
}

.text_box {
  min-height             : 300px;
  padding                : 15px;
  border-radius          : .25rem;
  border                 : 1px solid var(--border-default-color);
  backdrop-filter        : blur(30px);
  -webkit-backdrop-filter: blur(30px);

  &>.text_header {
    text-align: center;

    &>.text_title {
      font-size     : 26px;
      font-weight   : bolder;
      letter-spacing: 2px;
    }

    &>.text_info {
      font-size: 12px;
      color    : var(--text-des-color);
    }
  }

  &>.text_content {
    font-size  : 14px;
    color      : var(--text-default-color);
    text-indent: 2em;
    line-height: 2em;

    &>p {
      margin-bottom : 1em;
      color         : var(--text-default-color);
      letter-spacing: 1px;

      &>img {
        display      : block;
        max-width    : 70% !important;
        margin       : 10px auto;
        border-radius: 6px;
      }
    }

    &>:is(h1, h2, h3, h4, h5, h6) {
      width         : 100%;
      margin        : 1em 0 .5em;
      padding-bottom: 8px;
      border-bottom : 2px solid var(--border-default-color);
      color         : var(--text-default-color);
      font-weight   : bolder;
      text-indent   : 0;
      letter-spacing: 2px;
    }

    & li {
      margin-bottom : 10px;
      color         : var(--text-default-color);
      font-size     : 14px;
      line-height   : 2em;
      text-indent   : 4em;
      letter-spacing: 1px;
    }
  }
}

.pagination {
  justify-content: center;

  &>.step-links {
    cursor: default;

    &>span,
    &>a {
      display      : inline-block;
      min-width    : 30px;
      padding      : 4px 8px;
      border       : 1px solid var(--border-default-color);
      border-radius: 4px;
      color        : var(--text-des-color);
      text-align   : center;
      cursor       : pointer;

      &:hover {
        border: 1px solid var(--border-hover-color);
        color : var(--text-hover-color);
      }
    }

    &>.current {
      border: 1px solid var(--border-hover-color);
      color : var(--text-hover-color);
    }

    &>.previous {
      border: 1px solid transparent;
    }

    &>.next {
      border: 1px solid transparent;
    }

    &>.continue {
      cursor: default;

      &:hover {
        border: 1px solid var(--border-default-color);
        color : var(--text-des-color);
      }
    }
  }
}

/* header样式 */
.header {
  height                 : 80px;
  box-shadow             : var(--shadow-default);
  background             : var(--header-bg-color);
  backdrop-filter        : blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

.navbar {
  max-width: 1200px;
  margin   : 0 auto;
  padding  : 0;
}

.search {
  height: 40px;
}

.menu {
  height     : 40px;
  display    : flex;
  align-items: center;

  & .menu_item {
    max-width  : 182px;
    height     : 40px;
    display    : block;
    position   : relative;
    font-size  : 18px;
    font-weight: bolder;
    line-height: 40px;
    cursor     : pointer;

    &>a {
      display      : block;
      width        : 100%;
      height       : 100%;
      padding      : 0 20px;
      white-space  : nowrap;
      text-overflow: ellipsis;
      overflow     : hidden;
    }

    &::after {
      content   : '';
      width     : 0;
      height    : 2px;
      position  : absolute;
      left      : 50%;
      bottom    : 0;
      transform : translateX(-50%);
      background: var(--header-hover-color);
    }

    &:hover::after {
      width: 100%;
    }

    &:hover>.sub_menu {
      transform: translate(-50%, 0%) scaleY(1);
    }
  }

  & .sub_menu {
    min-width       : 100%;
    position        : absolute;
    top             : 40px;
    left            : 50%;
    background-color: var(--header-bg-color);
    box-shadow      : var(--shadow-default);
    border-radius   : var(--border-radius);
    transform       : translate(-50%, -50%) scaleY(0);

    &>.menu_item {
      min-width  : 100%;
      height     : 40px;
      line-height: 40px;
      text-align : center;
      font-size  : 14px;

      &>.sub_menu {
        opacity: 0;
        left   : 100%;
      }

      &:hover>.sub_menu {
        opacity         : 1;
        background-color: var(--header-bg-color);
        z-index         : 100;
      }
    }
  }
}

/* index样式 */
.index_jianjie {
  margin-top   : 10px;
  margin-bottom: 10px;
  height       : 400px;
  overflow     : hidden;
  text-overflow: ellipsis;

  & .index_text {
    height       : 100%;
    overflow     : hidden;
    text-overflow: ellipsis;

    &>h3 {
      margin-bottom: 10px;
      color        : var(--text-default-color);
      font-weight  : bolder;
    }

    &>p {
      margin-bottom : 1em;
      font-size     : 14px;
      color         : var(--text-des-color);
      text-indent   : 2em;
      letter-spacing: 1px;
      overflow      : hidden;
      text-overflow : ellipsis;
    }
  }

  & .index_img {
    height: 100%;

    &>img {
      display   : block;
      width     : 100%;
      height    : 100%;
      object-fit: cover;
    }
  }
}

/* footer样式 */
.footer {
  position: relative;

  &>.footer_text {
    width           : 100%;
    min-height      : 100px;
    background-color: #005698;
    text-align      : center;

    &>p {
      color      : #fff;
      font-size  : 12px;
      line-height: calc(68px / 3);
    }
  }
}