body {
  background: #F7F7F8; }

.section {
  padding: 100px 0; }
  .section .wrap .list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 30px; }
    .section .wrap .list .item {
      display: block;
      border-radius: 12px;
      background: #FFF;
      width: 380px;
      padding: 10px 10px 24px;
      position: relative; }
      .section .wrap .list .item:after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 12px;
        border: 1px solid rgba(4, 84, 244, 0.2);
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        opacity: 0;
        transition: 0.6s; }
      .section .wrap .list .item .img {
        width: 100%;
        height: 240px;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 20px; }
        .section .wrap .list .item .img img {
          display: block;
          width: 100%;
          height: 100%;
          transition: 3s; }
      .section .wrap .list .item .item_bottom {
        padding: 0 30px 0 10px; }
        .section .wrap .list .item .item_bottom .h5 {
          color: #333;
          font-size: 18px;
          font-weight: 600;
          letter-spacing: 0.36px;
          height: 50px;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          transition: 0.6s; }
        .section .wrap .list .item .item_bottom .p {
          color: #999;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          letter-spacing: 0.28px;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          height: 44px;
          margin: 20px 0; }
        .section .wrap .list .item .item_bottom .date {
          color: #333;
          font-size: 12px;
          font-weight: 400;
          line-height: 1.83333;
          letter-spacing: 0.24px; }
      .section .wrap .list .item:hover:after {
        opacity: 1; }
      .section .wrap .list .item:hover .item_bottom .h5 {
        color: #0454F4; }
      .section .wrap .list .item:hover .img img {
        transform: scale(1.1); }

.page {
  margin: 40px 0 0; }
  .page a {
    background: #FFFFFF; }