article {
  width: 100%;
  position: relative;
  /* top: .85rem; */
  padding: .22rem;
  box-sizing: border-box;
  background-color: #fff;
  margin-bottom: .12rem;
}
article .title {
  font-size: .28rem;
  font-weight: 300;
  color: #333;
  margin-bottom: .2rem;
  text-align: justify;
}
article .info {
  font-size: .14rem;
  font-weight: 300;
  color: #ccc;
  margin: .12rem 0 .12rem 0;
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
article .info #qrcode {
  /* position: absolute; */
  /* float: right; */
  /* top: 0; */
  /* right: 0; */
  color: #576b95;
}

article .info #qrcode img,
article .info #qrcode2 img {
  width: .14rem;
  position: relative;
  top: .03rem
}
header .header-content-right .show-qrcode-3,
header .header-content-right .show-qrcode-4,
article .info .show-qrcode,
article .info .show-qrcode-2 {
  position: absolute;
  right: 0;
  top: .24rem;
  width: 1.5rem;
  padding: .1rem;
  background-color: #fff;
  transition: opacity .3s ease-in;
  opacity: 0;
  border: 1px solid #e5e5e6;
  font-size: .12rem;
  z-index: 999;
  /* padding-bottom: .06rem; */
}
article .info .show-qrcode-2 {
  /* top:auto;
  bottom: .24rem; */
}
header .header-content-right .show-qrcode-3,
header .header-content-right .show-qrcode-4
 {
  color: #333;
  top: .6rem;
  right: -0.1rem
}
header .header-content-right .show-qrcode-4 {
  top: .6rem;
  right: .4rem;
}
header .header-content-right .show-qrcode-3 img,
header .header-content-right .show-qrcode-4 img {
  width: 100% !important;
}

article .info span {
  margin-right: .12rem;
}
article .content {
  color: #555;
}
/* article */

article .content .word-item p {
  margin-bottom: .3rem;
  font-size: .14rem;
  letter-spacing: .01rem;
  line-height: .3rem;
  text-shadow: 1px 1px 3px rgba(0,0,0,.2);
  text-align: justify;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -o-user-select:none;
  display: flex; justify-content: flex-start;
  align-items:  flex-start;
}
article .content .word-item.word-item.long {
  padding-bottom: 0.1rem !important;
  margin: 0.3rem 0 0.3rem 0 !important;
  border-bottom: none !important;
}
article .content .word-item.word-item.long p {
  margin-bottom: 0 !important
}
article .content .word-item p .word-no {
  font-weight: 700;
  color: #ccc;
  text-shadow: none;
  font-size: .12rem;
  font-style: italic;
  margin-right: .1rem;
}
article .content .word-item {
  margin: .3rem 0 .3rem 0;
  padding-bottom: .3rem;
  border-bottom: .01rem solid rgba(0,0,0,.02);
}
article .content .word-item .word-action {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .12rem;
}
article .content .word-item .word-action .word-action-item {
  margin: 0 .2rem;
  opacity: .3;
  color: #333;
  display: flex;
  align-items: center;

  cursor: pointer;
  text-decoration: none;
  padding: .03rem .1rem 0 .1rem;
  border-radius: 40px;
  border: 1px solid #fff;
  transition: all .3s linear;
}
article .content .word-item:hover .word-action .word-action-item {
  opacity: .3
}
article .content .word-item:hover .word-action .word-action-item:hover {
  opacity: 1;
  border: 1px solid #555;
  box-shadow: 0 0 5px 3px rgba(0,0,0,.1);
}

article .content .word-item .word-action .word-action-item img {
  width: .2rem;
  height: .2rem;
  margin-right: .03rem;
}

article .footer {
  display: flex;
  justify-content: center;
}
article .tips {
  background-color: #f3f3f3;

  font-size: .12rem;
  color: #888;
  box-sizing: border-box;
  padding: .08rem .12rem;
  border-radius: .03rem;
  /* margin-bottom: .12rem; */
  /* background-color: #ff4848 */
}
article .tips div {
  margin: .03rem 0;
  text-align: center;
}
article .tips div a {
  color: #f97043;
  font-weight: 700;
}
article .footer .qrcode {
  display: none;
  font-size: .12rem;
  color: #888;
}
article .footer .qrcode img {
  width: 1.2rem;
  padding: .05rem;
}
article .share-content {
  /* display: none; */
  text-align: center;
  /* margin-top: .24rem; */
  font-size: .12rem;
}
article .share-content .share-content-tips {
  margin: .06rem 0 .06rem 0;
  padding-top: .12rem;
  /* border-top: 1px solid #f5f5f6; */
  color: #ff4848;
  font-weight: 700;
  /* margin-bottom: .06rem; */
}
article .more-words {
  text-align: center;
  color: #fff;
  background-color:
}
@media screen and (max-width: 768px) {
  article {
    width: 100%;
    padding: .12rem;
  }
  /* article .footer .qrcode,  */
  /* article .share-content {
    display: block;
  } */
  article .content .word-item .word-action .word-action-item {
    opacity: 1 !important;
    border: 1px solid #555!important;
    box-shadow: 0 0 5px 3px rgba(0,0,0,.1)!important;
  }
}

.more-articles, .content {
  overflow: hidden; /* 隐藏超出部分 */
  position: relative; /* 确保按钮可以绝对定位 */
  transition: height 1s ease;
}
.expand-more {
  display: none;
  text-align: center;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1rem;
}
.expand-more .expand-mask {
  width: 100%;
  padding-top: 1rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(#fff));
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.3) 10%, #fff 100%);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.expand-more .expand-btn {
  color: #555;
  font-size: .14rem;
  padding: .10rem 0;
  text-align: center;
  z-index: 99;
  position: absolute;
  width: 100%;
  bottom: 0;
  text-shadow: 0 0 .03rem rgba(0, 0, 0, .3);
} 
.expand-more .expand-btn span {
  padding: .04rem .15rem;
  border-radius: .3rem;
  background:rgba(255,255,255,.8);
  box-shadow: 0 0 .05rem 0 rgba(0, 0, 0, .3);
}
.meme-content {
  text-align: center;
  margin-top: .20rem;
  /* padding: 0 .2rem; */
}
.meme-content img {
  width: 90%;
  border-radius: 6px;
  box-shadow: 0 0 10px 1px rgba(0,0,0,.1);
}
.meme-content .meme-content-action {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items:  flex-end;
  margin-bottom: 1rem;
}
.meme-content .meme-content-action .meme-content-action-btn {
  width: 30%;
  padding: .12rem .15rem;
  font-size: .16rem;
  box-sizing: border-box;
  background-color: #333;
  color: #fff;
  border-radius: .03rem;
  border: .02rem solid #333;
  font-weight: 700;
}

.meme-content .meme-content-action .meme-content-action-btn.second {
  background-color: #fff;
  color: #333;
  border: .02rem dotted #bbb;
  width: 20%;
  padding: .06rem .1rem;
  font-size: .14rem;
}
.meme-content .meme-content-action .meme-content-action-btn.second:hover {
  border-color: #333;
}
.meme-content-tags {
  font-size: .14rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: .12rem 0 .5rem 0;

}
.meme-content-tags a {
  margin: 0 .06rem
}