@baseFont: 25;
body {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  .content {
    .wrap {
      box-shadow: (15rem / @baseFont) 0 (15rem / @baseFont) (-15rem / @baseFont) rgba(0, 0, 0, 0.2), (-15rem / @baseFont) 0 (15rem / @baseFont) (-15rem / @baseFont) rgba(0, 0, 0, 0.2);
      #error404 {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: (300rem / @baseFont);
          user-select: none;
        }
      }
      & > .banner {
        width: 100%;
        user-select: none;
        height: (266rem / @baseFont);
        object-fit: cover;
        &.lazyloaded {
          height: auto;
          object-fit: fill;
        }
      }
      & > .msg {
        padding: (20rem / @baseFont);
        padding-bottom: 0;
        display: none;
        h6 {
          font-size: (30rem / @baseFont);
          line-height: (48rem / @baseFont);
          color: #212121;
          margin-bottom: (20rem / @baseFont);
        }
        p {
          font-size: (18rem / @baseFont);
          line-height: (32rem / @baseFont);
          color: #999999;
          text-indent: 1em;
          text-align: justify;
        }
      }
      & .columnTop {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: (20rem / @baseFont) 0;
        margin: 0 (20rem / @baseFont);
        position: relative;
        border-bottom: (1rem / @baseFont) solid #F3F3F3;
        h6 {
          font-size: (30rem / @baseFont);
          line-height: (36rem / @baseFont);
          color: #212121;
        }
        a {
          position: absolute;
          top: (20rem / @baseFont);
          left: 0;
          color: var(--primaryColor);
          font-size: (26rem / @baseFont);
          line-height: (36rem / @baseFont);
        }
      }
      & > .tags {
        position: sticky;
        top: 0;
        left: 0;
        display: flex;
        flex-wrap: wrap;
        margin: 0 (20rem / @baseFont);
        padding: (20rem / @baseFont) 0;
        border-bottom: (1rem / @baseFont) solid #F3F3F3;
        background-color: #FFFFFF;
        z-index: 999;
        a {
          padding: (10rem / @baseFont) (15rem / @baseFont);
          font-size: (18rem / @baseFont);
          border: (1rem / @baseFont) solid #999999;
          color: #666666;
          margin-right: (10rem / @baseFont);
          transition: transform 0.2s ease-in-out;
          margin-bottom: (10rem / @baseFont);
          &:hover {
            transform: translateY((-4rem / @baseFont));
            border-color: var(--primaryColor);
            color: var(--primaryColor);
          }
        }
      }
      & > .news {
        display: flex;
        flex-direction: column;
        .columnTitle {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: (20rem / @baseFont) 0;
          margin: 0 (20rem / @baseFont);
          border-top: (1rem / @baseFont) solid #F3F3F3;
          h5 {
            font-size: (26rem / @baseFont);
            line-height: (26rem / @baseFont);
            font-weight: bold;
            color: #212121;
            border-left: (7rem / @baseFont) solid var(--primaryColor);
            padding-left: (10rem / @baseFont);
          }
          a {
            font-size: (20rem / @baseFont);
            line-height: (20rem / @baseFont);
            color: var(--primaryColor);
          }
        }
        .item {
          display: flex;
          padding: (20rem / @baseFont);
          cursor: pointer;
          transition: transform 0.2s ease-in-out;
          background-color: #FFFFFF;
          & > .msg {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            h6 {
              font-size: (24rem / @baseFont);
              line-height: (34rem / @baseFont);
              font-weight: normal;
              color: #212121;
              text-align: justify;
              transform: translateY((-5rem / @baseFont));
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            & .other {
              display: flex;
              margin-top: (20rem / @baseFont);
              i {
                font-size: (22rem / @baseFont);
                line-height: (22rem / @baseFont);
                color: #999999;
              }
            }
          }
          & > img {
            width: (230rem / @baseFont);
            height: (130rem / @baseFont);
            margin-left: (20rem / @baseFont);
            object-fit: cover;
            cursor: zoom-in;
          }
          &:hover {
            transform: translateY((-4rem / @baseFont));
            box-shadow: 0 (15rem / @baseFont) (15rem / @baseFont) (-15rem / @baseFont) #999999, 0 (-15rem / @baseFont) (15rem / @baseFont) (-15rem / @baseFont) #999999;
          }
        }
        .noMore {
          text-align: center;
          font-size: (18rem / @baseFont);
          padding: (20rem / @baseFont) 0;
          color: #999999;
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  body {
    .content {
      .wrap {
        & > .banner {
          height: (133rem / @baseFont);
        }
        & > .msg {
          padding: (10rem / @baseFont);
          h6 {
            font-size: (26rem / @baseFont);
            line-height: (44rem / @baseFont);
            margin-bottom: (10rem / @baseFont);
          }
        }
        & .columnTop {
          padding: (10rem / @baseFont) 0;
          margin: 0 (10rem / @baseFont);
          h6 {
            font-size: (20rem / @baseFont);
            line-height: (26rem / @baseFont);
          }
          a {
            top: (10rem / @baseFont);
            font-size: (16rem / @baseFont);
            line-height: (26rem / @baseFont);
          }
        }
        & > .tags {
          position: static;
          margin: 0 (10rem / @baseFont);
          padding: (10rem / @baseFont) 0;
          a {
            font-size: (16rem / @baseFont);
            &:hover {
              transform: translateY(0);
              border-color: #999999;
              color: #666666;
            }
          }
        }
        & > .news {
          .columnTitle {
            padding: (10rem / @baseFont) 0;
            margin: 0 (10rem / @baseFont);
            h5 {
              font-size: (20rem / @baseFont);
              line-height: (22rem / @baseFont);
            }
            a {
              font-size: (14rem / @baseFont);
              line-height: (16rem / @baseFont);
            }
          }
          .item {
            padding: (20rem / @baseFont);
            & > .msg {
              h6 {
                font-size: (17rem / @baseFont);
                line-height: (23rem / @baseFont);
                transform: translateY((-3rem / @baseFont));
                text-align: left;
              }
              & .other {
                margin-top: 0;
                i {
                  font-size: (14rem / @baseFont);
                  line-height: (14rem / @baseFont);
                }
              }
            }
            & > img {
              width: (140rem / @baseFont);
              height: (79rem / @baseFont);
              margin-left: (10rem / @baseFont);
            }
          }
          .noMore {
            font-size: (14rem / @baseFont);
            padding: (10rem / @baseFont) 0 (20rem / @baseFont) 0;
          }
        }
      }
    }
  }
}