/* 隐藏pc样式 */
.left {
  display: none;
}
.right {
  display: none;
}

/* PE样式 */
.inner .middle .card {
  position: relative;
  border-radius: 10px;
  margin-bottom: 10px;
  /* 溢出隐藏 */
  overflow: hidden;
  cursor: pointer;
}
.inner .middle .card:nth-child(1) {
  box-shadow: 1px 1px 2px gold, -1px -1px 2px gold;
}
.inner .middle .card:nth-child(2) {
  box-shadow: 1px 1px 2px gold, -1px -1px 2px gold;
}
.inner .middle .card:hover img {
  /* 放大并模糊 */
  filter: blur(4px);
  transform: scale(1.2);
}

.inner .middle .card img {
  position: absolute;
  width: 100%;
  /* 垂直居中显示图片 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transition: all 0.2s ease-out;
}

.inner .middle .card .cardLeft {
  position: absolute;
  width: 50%;
  height: 64px;
  padding: 20px 0 20px 4%;
  background-image: linear-gradient(
    120deg,
    #f5f5f7,
    #f5f5f7,
    transparent,
    transparent
  );
}
.inner .middle .card .cardLeft h1 {
  font-size: 20px;
  text-shadow: 0px 0px 5px #f5f5f7;
  /* 溢出省略 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.inner .middle .card .cardLeft .date {
  line-height: 30px;
  color: rgb(165, 165, 165);
}
.inner .middle .card .cardLeft .tag {
  float: left;
  width: 30px;
  margin-right: 1%;
  font-size: 10px;
  text-align: center;
  color: rgb(165, 165, 165);
  border: 1px solid rgb(165, 165, 165);
}

.inner .middle .card .cardRight {
  float: right;
  width: 46%;
}
.inner .middle .card .cardRight .cardR_copy {
  position: relative;
  /* 宽度不这样设置文字过短就会出错 :( 学艺不精 */
  width: 1%;
  height: 104px;
  /* 文字垂直居中 */
  display: table-cell;
  vertical-align: middle;
  background-image: linear-gradient(
    -60deg,
    rgb(0, 0, 0),
    rgba(0, 0, 0, 0.5),
    transparent,
    transparent
  );
}
.inner .middle .card .cardRight .cardR_copy p {
  float: right;
  width: 60%;
  
}
.inner .middle .card .cardRight .cardR_copy p span {
  width: 92%;
  color: #f5f5f7;
  text-align: right;
  text-shadow: 0px 1px 1px #1d1d1f;
  /* 溢出省略 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.inner .middle .card:hover .cardRight .cardR_copy p span {
  -webkit-line-clamp: 4;
}
/* PE样式 end */

@media (min-width: 992px) {
  /* 显示pc样式 */
  .left {
    display: block;
  }
  .right {
    display: block;
  }

  /* left */
  .inner .left {
    float: left;
    width: 20%;
  }
  .inner .left .leftTop {
    position: relative;
    background-color: #f5f5f7;
    border-radius: 10px;
    overflow: hidden;
  }
  .inner .left .leftTop .user {
    position: absolute;
    width: 90px;
    height: 90px;
    /* 居中显示 */
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    cursor: pointer;
  }
  .inner .left .leftTop .user img {
    width: 100%;
    border-radius: 50%;
    box-shadow: 0 0 5px #5c7b1e, 0 0 3px #d8ff46;
    transition: all 0.3s ease-out;
  }
  .inner .left .leftTop .user img:hover {
    /* 旋转放大 */
    transform: rotate(360deg) scale(1.2);
  }
  .inner .left .leftTop h1 {
    position: relative;
    margin-top: 50px;
    font-size: 40px;
    text-align: center;
  }
  .inner .left .leftTop .link {
    display: flex;
    width: 80%;
    margin: 20px auto 0 auto;
    /* 让元素平均分配宽度 */
    justify-content: space-around;
    border-radius: 10px 10px 0 0;
    background: #56ab2f; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to left,
      #a8e063,
      #56ab2f
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to left,
      #a8e063,
      #56ab2f
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  .inner .left .leftTop .link img {
    width: 30%;
    cursor: pointer;
    transition: all 0.2s ease-out;
  }
  .inner .left .leftTop .link img:hover {
    transform: scale(0.8);
  }

  .inner .left .leftBottom {
    margin-top: 15px;
    padding: 4%;
    border-radius: 10px;
    background-color: #f5f5f7;
  }
  .inner .left .leftBottom h1 {
    font-size: 20px;
    padding: 4%;
    border-bottom: 2px solid #000;
  }
  .inner .left .leftBottom .leftText {
    margin-top: 4%;
    border-radius: 10px;
    text-shadow: 1px 1px 1px #1d1d1f;
    /* 背景居中 */
    background: url(https://shabox.oss-cn-beijing.aliyuncs.com/BG/tianTai%28xsr%29.jpg)
      no-repeat center;
    background-size: cover;
  }
  .inner .left .leftBottom .leftText .IDcard {
    text-align: center;
    /* 重置多余样式 */
    text-indent: 0;
    font-size: 20px;
    line-height: 30px;
  }
  .inner .left .leftBottom .leftText p {
    color: #f5f5f7;
    /* 保护圆角不被模糊 */
    margin: 0 4%;
    padding: 4% 0;
    /* 首行缩进 */
    text-indent: 2em;
    line-height: 20px;
    /* 背景模糊 */
    backdrop-filter: blur(2px);
  }
  .inner .left .leftBottom .leftText p em {
    color: yellowgreen;
    font-weight: bold;
  }
  /* left end  */

  /* middle */
  .inner .middle {
    float: left;
    width: 56%;
    padding: 0 2%;
  }
  .inner .middle .card {
    float: left;
    width: 48%;
    margin: 0 1% 16px 1%;
  }
  /* middle end  */

  /* right */
  .inner .right {
    float: right;
    width: 20%;
  }
  .inner .right .rightTop {
    padding: 4%;
    border-radius: 10px;
    background-color: #f5f5f7;
  }
  .inner .right .rightTop h1 {
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    border-bottom: 2px solid #1d1d1f;
  }
  .inner .right .rightTop .rightText {
    margin-top: 4%;
    text-shadow: 0px 1px 1px #1d1d1f;
    border-radius: 10px;
    /* 背景居中 */
    background: url(https://shabox.oss-cn-beijing.aliyuncs.com/BG/tianTai.jpg)
      no-repeat center;
    background-size: cover;
  }
  .inner .right .rightTop .rightText p {
    color: #f5f5f7;
    margin: 0 4%;
    padding: 4% 0;
    /* 首行缩进 */
    text-indent: 2em;
    line-height: 20px;
    /* 背景模糊 */
    backdrop-filter: blur(2px);
  }

  .inner .right .rightBottom {
    height: 350px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: #f5f5f7;
    border: 1px solid #1d1d1f;
    text-align: center;
  }
  .inner .right em {
    color: #d8ff46;
    font-weight: bold;
  }
  /* right end  */
}