html,
body {
  height: 100%;
  word-break:break-all;
}
.container {
  max-width: 750px;
  margin: 0 auto;
}
.container.flexCon {
  min-height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background: #f4f4f4;
}
.topImg {
  height: 4.26666667rem;
  position: relative;
  width: 100%;
  background: #f1f1f1;
}
.topImg .blank {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:rgba(0,0,0,0.4);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: flex-end;
  -ms-flex-direction: flex-end;
  flex-direction: flex-end;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.topImg .blank .bar {
  margin-bottom: 0.4rem;
  text-align: right;
  width: 100%;
  font-size: 0.32rem;
  font-family: SFUIDisplay-Regular;
  color: #fff;
}
.topImg .blank .bar > span {
  margin-right: 0.4rem;
}
.article {
  margin-top: 0.56rem;
  padding: 0 0.4rem 0.4rem;
}
.article .article-title {
  font-size: 0.64rem;
  font-family: PingFangSC-Semibold;
  color: #333333;
  line-height: 0.77333333rem;
}
.article .article-label {
  margin-top: 0.26666667rem;
  margin-bottom: 0.53333333rem;
}
.article .article-label .time {
  font-size: 0.32rem;
  font-family: PingFangSC-Regular;
  color: #cccccc;
  line-height: 0.4rem;
}
.article .article-love {
  border-radius: 50%;
  margin: 0.8rem auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.article .article-love i {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 1.28rem;
  height: 1.28rem;
  margin: 0 auto;
  background: url(/static/images/topic/icon_bigzan_display.png) no-repeat;
  background-size: cover;
}
.article .article-love i:active {
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  background-image: url(/static/images/topic/icon_bigzan_press.png);
}
.article .article-love.article-love-zan i {
  background-image: url(/static/images/topic/icon_bigzan_nor.png);
}
.article .article-ad {
  width: 100%;
  height: 3.2rem;
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 6px 4px rgba(204, 204, 204, 0.3);
  box-shadow: 0px 0px 6px 4px rgba(204, 204, 204, 0.3);
  position: relative;
}
.article .article-ad ul {
  padding: 0.26666667rem;
}
.article .article-ad ul .adList {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.article .article-ad ul .adList i.img {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 2.66666667rem;
  height: 2.66666667rem;
  background: #f1f1f1;
}
.article .article-content p{
	font-size:0.3733333333333333rem;
	font-family: PingFangSC-Regular;
	color:rgba(51,51,51,1);
	margin-bottom:0.5333333333333333rem;
	line-height:0.6666666666666667rem;
}
.article .article-content p img{
	max-width:100%;
}
.article .article-ad ul .adList .rightItem {
  margin-right: 0.8rem;
  margin-left: 0.26666667rem;
}
.article .article-ad ul .adList .rightItem h4 {
  font-size: 0.4rem;
  font-family: PingFangSC-Semibold;
  color: #333333;
  line-height: 0.56rem;
  margin-top: 0.26666667rem;
}
.article .article-ad ul .adList .rightItem p {
  margin-top: 0.53333333rem;
}
.article .article-ad ul .adList .rightItem p .price {
  font-size: 0.4rem;
  font-family: PingFangSC-Semibold;
  color: #f6586e;
  line-height: 0.48rem;
}
.article .article-ad ul .adList .rightItem p .marktPrice {
  font-size: 0.26666667rem;
  font-family: PingFangSC-Regular;
  color: #999999;
  line-height: 0.32rem;
}
.article .article-ad .rightBtn {
  position: absolute;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 0.53333333rem;
  height: 0.53333333rem;
  right: 0.13333333rem;
  top: 50%;
  z-index: 10000;
  cursor: pointer;
}
.article .article-ad .rightBtn img {
  max-width: 100%;
}
.article-comment {
  margin-top: 1.06666667rem;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  /*padding: 0 0.4rem;*/
  padding: 0 0 0 0.4rem;
}
.article-comment .title {
  margin-top: 0.4rem;
  padding: 0.13333333rem 0;
  font-size: 0.4rem;
  font-family: PingFangSC-Semibold;
  color: #333333;
  line-height: 0.48rem;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  border-bottom: 3px solid #333;
  margin-bottom: 0.26666667rem;
}
.article-comment ul li {
  border-bottom: 1px solid #eee;
  padding-bottom: 0.4rem;
}
.commentItems {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.commentItems .userFace {
  width: 1.06666667rem;
  height: 1.06666667rem;
  border-radius: 50%;
  margin-right: 0.26666667rem;
}
.commentItems .comflexTop {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.commentItems .comflexTop .user {
  font-size: 0.37333333rem;
  font-family: PingFangSC-Regular;
  color: #333333;
  line-height: 0.45333333rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1;


}
.commentItems .comflexTop .user img{
  margin-left: 5px;
  width: 15px;
}
.commentItems .comflexTop  i {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 0.18666667rem;
  height: 0.32rem;
  margin-left: 0.13333333rem;

}
.commentItems .comflexTop  i.GG {
  background: url('/static/images/topic/icon_man.png');
  background-size: cover;
  width: 0.18666667rem;
  height: 0.32rem;
}
.commentItems .comflexTop  i.MM {
  background: url('/static/images/topic/icon_girl.png');
  background-size: cover;
  width: 0.18666667rem;
  height: 0.32rem;
}
.commentItems .comflexTop .time {
  font-size: 0.32rem;
  font-family: PingFangSC-Regular;
  color: #999999;
  line-height: 0.4rem;
  margin-top: 0.21333333rem;
}
.commentItems .flex1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-right: 0.4rem;
}
.commentItems .commentCon {
  margin-top: 0.26666667rem;
  font-size: 0.37333333rem;
  font-family: PingFangSC-Regular;
  color: #333333;
  line-height: 0.53333333rem;
  padding-right: 0.4rem;
}
.commentItems .allComment {
  margin-top: 0.26666667rem;
}
.commentItems .allComment a {
  text-decoration: none;
  font-size: 0.4rem;
  font-family: PingFangSC-Regular;
  color: #3bd7d7;
  line-height: 0.45333333rem;
}
.commentItems .flexBottom {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 0.32rem;
  font-family: SFUIDisplay-Regular;
  color: #999999;
  line-height: 30px;
}
.commentItems .flexBottom > div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.commentItems .flexBottom > div .comment {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.commentItems .flexBottom > div .comment i {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 0.53333333rem;
  height: 0.53333333rem;
  background: url(/static/images/topic/icon_comment.png?v=1);
  background-size: cover;
  margin-right: 0.13333333rem;
}
.commentItems .flexBottom > div .love {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 1.2rem;
}
.commentItems .flexBottom > div .love i {
  width: 0.53333333rem;
  height: 0.53333333rem;
  background-image: url(/static/images/topic/icon_nozan.png?v=1);
  background-size: cover;
  margin-right: 0.13333333rem;
  position: relative;
  display: inline-block;
}
.commentItems .flexBottom > div .love.loved i {
  background-image: url(/static/images/topic/icon_zan_select.png?v=1);
}

@-webkit-keyframes clickAni {
  0% {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes clickAni {
  0% {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
}
.commentItems .flexBottom > div .love i img {
  width: 0.53333333rem;
  height: 0.53333333rem;
  position: absolute;
  top: -0.175rem;
  left: 0.00rem;
  opacity: 0;
  -webkit-animation: clickAni 0.6s ease-in-out 0s;
  animation: clickAni 0.6s ease-in-out 0s;
}
.replyDetail {
  padding-left: 1.33333333rem;
}
.replyDetail .replyBox {
  background: #f7f8f9;
  /*padding: 0 0.26666667rem;*/
  padding: 0 0 0 0.26666667rem;
}
.replyDetail .replyBox .total {
  text-align: right;
  padding: 0.26666667rem 0.4rem 0.26666667rem 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.replyDetail .replyBox .total a {
  font-size: 0.32rem;
  font-family: PingFangSC-Regular;
  color: #3bd7d7;
  line-height: 0.45333333rem;
  text-decoration: none;
}
.replyDetail .replyBox .total i {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 0.16rem;
  height: 0.24rem;
  background: url(/static/images/topic/disclosure.png);
  background-size: cover;
  margin-left: 0.13333333rem;
}
.replyDetail .replyBox .replayItem {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  border-bottom: 1px solid #eee;
  padding: 0.26666667rem 0;
}
.replyDetail .replyBox .replayItem .userFace {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  margin-right: 0.26666667rem;
}
.replyDetail .replyBox .replayItem .comflexTop {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.replyDetail .replyBox .replayItem .comflexTop .user {
  font-size: 0.32rem;
  font-family: PingFangSC-Regular;
  color: #999999;
  line-height: 0.45333333rem;
}
.replyDetail .replyBox .replayItem .comflexTop .user i {
  font-size: 0.32rem;
  font-family: PingFangSC-Regular;
  color: #52bbff;
  line-height: 0.45333333rem;
  font-style: normal;
  margin-right: 0.13333333rem;
}
.replyDetail .replyBox .replayItem .comflexTop .time {
  font-size: 0.32rem;
  font-family: PingFangSC-Regular;
  color: #999999;
  line-height: 0.4rem;
  margin-top: 0.21333333rem;
}
.replyDetail .replyBox .replayItem .flex1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-right: 0.4rem;
}
.replyDetail .replyBox .replayItem .commentCon {
  margin-top: 0.13333333rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular;
  color: #333333;
  line-height: 0.45333333rem;
}
.replyDetail .replyBox .replayItem .time {
  margin-top: 0.13333333rem;
  font-size: 0.26666667rem;
  font-family: PingFangSC-Regular;
  color: #999999;
  line-height: 0.37333333rem;
}
.replyDetail .replyBox .replayItem .allComment {
  margin-top: 0.26666667rem;
}
.replyDetail .replyBox .replayItem .allComment a {
  text-decoration: none;
  font-size: 0.4rem;
  font-family: PingFangSC-Regular;
  color: #3bd7d7;
  line-height: 0.45333333rem;
}
.replyDetail .replyBox .replayItem .flexBottom {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  font-size: 0.32rem;
  font-family: SFUIDisplay-Regular;
  color: #999999;
  line-height: 30px;
}
.replyDetail .replyBox .replayItem .flexBottom .comment {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.replyDetail .replyBox .replayItem .flexBottom .comment i {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 0.53333333rem;
  height: 0.53333333rem;
  background: url(/static/images/topic/icon_comment.png?v=1.0);
  background-size: cover;
  margin-right: 0.13333333rem;
}
.replyDetail .replyBox .replayItem .flexBottom .love {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 1.2rem;
}
.replyDetail .replyBox .replayItem .flexBottom .love i {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 0.53333333rem;
  height: 0.53333333rem;
  background: url(/static/images/topic/icon_nozan.png?v=1);
  background-size: cover;
  margin-right: 0.13333333rem;
}
.comment_detail {
  margin-top: 0;
  border: 0;
  background: #fff;
  margin-bottom: 0.4rem;
}
.comment_detail .commentItems {
  border: 0;
}
.allComment {
 /* -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;*/
  background: #fff;
}
.allComment .title {
  font-size: 0.34666667rem;
  font-family: PingFangSC-Regular;
  color: #333333;
  padding: 0.4rem;
  border-bottom: 1px solid #eee;
  margin: 0;
}
.allComment ul {
  /*padding: 0 0.4rem;*/
  padding: 0 0 0 0.4rem;
}
.allComment .commentItems {
  border: 0;
  margin-top: 0.4rem;
  margin-bottom: 0;
  padding: 0;
}
.allComment .commentItems .comflexTop {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  padding-right: 0.4rem;
}
.allComment .commentItems .comflexTop p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular;
  color: #999999;
  line-height: 0.45333333rem;
}
.allComment .commentItems .comflexTop p .user {
  color: #52BBFF;
  margin-right: 0.13333333rem;
}
.allComment .commentItems .userFace {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  margin-right: 0.26666667rem;
}
.allComment .commentItems .commentCon {
  padding-bottom: 0.2rem;
}
.allComment .commentItems .flexBottom{
  border-bottom: 1px solid #eee;
}
.allComment .commentItems .delComment{
  margin-top: 0.13333333rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular;
  color: #666;
  line-height: 0.37333333rem;
  margin-right: 0.4rem;
}
.scrollText {
  text-align: center;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular;
  color: #999999;
  line-height: 34px;
  margin: 0;
  padding: 0.53333333rem;
}
