.article-detail {
  font-size: 0；  
}

.article-detail>div {
  height: 100%;
  vertical-align: top
}

.article-detail .article-img {
  position: relative;
  width: 100%;
  /*height: 2.8rem;*/
  text-align: center;
  background-color: transparent;
  border-radius: .1rem;
  text-align: center;
  overflow: hidden;
}
.article-detail .article-img .avatar {
  position: relative;
  width: 100%;
  /*height: 1.6rem;*/
  text-align: center;
  line-height: 2.0rem;
}
.article-detail .article-img .avatar img {
  position: relative;
  /*margin-top: -3.4rem;*/
  margin-left: auto;
  margin-right: auto;
  width: 1.4rem;
  vertical-align: middle;
  border-radius: .8rem;
  z-index: 3;
}
.article-detail .article-img .avatar .animation {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 1.4rem;
  height: 1.4rem;
  vertical-align: middle;
  border-radius: .8rem;
    background: #fff;
    opacity: 0.15;
    z-index: 2;
    transition-duration: .3s;
    -webkit-transition-duration: .3s;
    animation: avatar-bg 4s linear 0s infinite;
    -webkit-animation: avatar-bg 4s linear 0s infinite;
      -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

.article-detail .article-img .special-icon {
  position: absolute;
  top: .03rem;
  left: 0;
  line-height: normal;
  text-align: left
}

.article-detail .article-img .special-icon img {
  width: .38rem
}
.article-detail .article-info .nickname {
  width: 100%;
  padding: .16rem 0rem;
  line-height: .2rem;
  color: #fecd67;
  font-size: .24rem;
}
.article-detail .article-info .nickname p{
  margin: .1rem 0;
}
.article-detail .article-img .cart-info {
  margin: 0.43rem 0.8rem;
  color: #627381;
  font-size: .14rem;
  text-align: left;
  border-radius: .20rem;
  z-index: 4;
  overflow: hidden;
}
.article-detail .article-img .cart-info .index-number{
  color: rgba(232,25,87,1);
  text-align: center;
}
.article-detail .article-img .cart-info .index-number span{
  color: rgba(232,25,87,1);
}
.article-detail .article-img .cart-info .send-msg {
  line-height: .40rem;
  text-align: center;
    font-weight: bold;
    font-size: .14rem;
    border-radius: .20rem;
    color: #5dfafc;
    background-image: linear-gradient(135deg, rgba(209, 4, 89, 1) 0,rgba(209, 4, 89, .7) 45%, rgba(214, 14, 214, 1));
    /* background-image: linear-gradient(-45deg, rgba(209, 4, 89, 1) 0,rgba(209, 4, 89, .8) 45%, rgba(209, 4, 89, .6)); */
    background-color: #6DFDFF;
    z-index: 4;
}
.article-detail .article-img .cart-info a {
  position: relative;
  line-height: .4rem;
  height: .4rem;
  z-index: 4;
  overflow: hidden;
  display: block;
}
.article-detail .article-img .cart-info a:before {
  content:"";
    position:absolute;
    width: 100%;
    height:100%;
    top:0;
    left:-250px;
    overflow:hidden;
    background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.6)),color-stop(100%,rgba(255,255,255,0)));

    background:-moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.6)50%,rgba(255,255,255,0)100%);
    background:-webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.6)50%,rgba(255,255,255,0)100%);
    background:-o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.6)50%,rgba(255,255,255,0)100%);
    -webkit-transform:skewX(-25deg);
    -moz-transform:skewX(-25deg);
    animation: leftone 1s ease 1s;
}
.article-detail .article-img .cart-info a:hover:before {
    left:150%;
    transition:left 1s ease 0s;
}
.article-detail .article-img .cart-info span {
  padding-right: .06rem;
  color: #007dc9;
}
.article-detail .article-img .cart-info .index-number{
  color: rgba(232,25,87,1);
  text-align: center;
}
.article-detail .article-img .cart-info .index-number span{
  color: rgba(232,25,87,1);
}
.article-detail .article-img .tonggao {
  display: inline-block;
  cursor: pointer;
}
.article-detail .article-info .cert-tip {
  display: inline-block;
  padding: 0rem .06rem;
  line-height: .3rem;
  color: #007dc9;
  font-size: .14rem;
  cursor: pointer;
}
.article-detail .article-img .relation {
  position: absolute;
  z-index: 1;
  display: block;
  bottom: .3rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  line-height: normal;
  color: #67c1f5;
  font-size: .14rem
}

.article-detail .article-info {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 0.3rem;
  background-color: transparent;
  text-align: center;
  border-bottom-left-radius: .06rem;
  border-bottom-right-radius: .06rem
}

.playlet-img.article-img img {
      border-radius: 0.1rem;
}
.playlet-info.article-info{
  padding: 0 30px;
}
.playlet-info.article-info .playlet-title  {
  font-size: .23rem;
  color: #9f9eb1;
}
.playlet-info.article-info  .tag {
    display: flex;
    gap: 0.05rem;
    margin-top: 0.08rem;
    margin-bottom: 0.08rem;
    font-size: .12rem;
}
.playlet-info.article-info  .tag a {
    color: #c6d4df;
    border-top: 1px solid rgba(255, 0, 0, 0);
    border-bottom: 1px solid rgba(255, 0, 0, .6);
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .8) 0,rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .3));
    background-color: transparent;
    font-size: .12rem;
    display: inline-block;
    border-radius: 0.12rem;
    line-height: .22rem;
    padding: 0 0.05rem;
    margin-right: 0.05rem;
    vertical-align: middle;
}
.playlet-info.article-info  .tag a:hover {
    color: #c6d4df;
    border-top: 1px solid rgba(255, 0, 0, .6);
    border-bottom: 1px solid rgba(255, 0, 0, 0);
}
.playlet-info.article-info  .tag .time {
    color: #77787d;
    opacity: .8;
    font-size: .14rem;
    line-height: .24rem;
}
.playlet-info.article-info .tag .time i{
  margin-right: .05rem;
}
.playlet-info.article-info .playlet-score i{
    color: #e3c414;
    font-size: .14rem;
}
.playlet-info.article-info .playlet-score .score{
    color: #e3c414;
    margin-left: 0.25rem;
    font-size: .14rem;
}
.playlet-info.article-info .playlet-score span{
    color: #77787d;
    opacity: .8;
    font-size: .14rem;
    font-weight: bold;
}
.playlet-info.article-info .playlet-intro {
    color: #77787d;
    opacity: .8;
    font-size: .14rem;
    line-height: 1.5;
    margin-bottom: .14rem;
    white-space: pre-wrap;
}
.playlet-info.article-info .playlet-intro span {
   font-weight: bold;
}
.playlet-info.article-info .performer-info h3 {
    margin-bottom: .1rem;
    font-size: .18rem;
    font-weight: bold;
    color: #9f9eb1;
}
.playlet-info.article-info .performer-info ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.05rem;
    width: 100%;
}
.playlet-info.article-info .performer-info ul li {
    list-style: none;
    margin-bottom: 0;
    text-align: center;
}
.playlet-info.article-info .performer-info ul li:hover img {
    border: 1px solid rgba(255, 0, 0, 1);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    z-index: 3;
}
.playlet-info.article-info .performer-info ul li img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 0, 0, .6);
    transition: .3s;
}
.playlet-info.article-info .performer-info ul li a .text {
    margin-top: .08rem;
    font-size: .12rem;
    color: #77787d;
    opacity: .8;
}
.article-detail .article-info p {
  color: #9f9eb1;
  font-size: .14rem;
  line-height: .24rem;
}
.article-detail .article-info p.statistics strong {
    padding: 0 .05rem;
    font-weight: bold;
}
.article-detail .article-info p.info {
  text-align: left;
  white-space: pre-wrap;
  line-height: .24rem;
}
.article-detail .article-info p span {
   color: #77787d;
   padding-right: .1rem;
}
.article-detail .article-info .article-name {
  display: block;
  margin-right: .05rem;
  font-size: .26rem;
  color: #fff;
  word-break: break-all;
}
.article-detail .article-info .article-intro {
    display: block;
    margin-right: 0.05rem;
    color: #77787d;
    font-size: .14rem;
    word-break: break-all;
    white-space: pre-line;
    text-align: justify;
    line-height: 1;
    padding: 0 0 0.1rem 0;
}
.article-detail .article-info .article-intro span{
  color: #9f9eb1;
}
.article-detail .article-info .special-tag {
  display: block;
  line-height: .39rem
}

.article-detail .article-info .special-tag span {
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
  margin-right: .02rem;
  padding: .02rem .05rem;
  border-radius: .02rem;
  color: #fff;
  font-size: .12rem
}

.article-detail .article-info .article-desc {
  margin-top: .20rem;
    margin-bottom: .15rem;
  border-radius: .15rem;
  background:rgba(0, 0, 0, .4);
  padding: .2rem 0rem;
}

.article-detail .article-info .article-desc span {
  display: inline-block;
  vertical-align: middle;
  width: 33.333333%;
  text-align: center;
  border-right: 1px dashed rgba(255,255,255,.2);
}
.article-detail .article-info .article-desc span:nth-child(3) {
  border-right: none;
}
.article-detail .article-info .article-desc span .num {
  color: #9f9eb1;
    font-size: .26rem;
}
.article-detail .article-info .article-desc span strong {
  margin-right: .2rem;
  color: #fff;
}

.article-detail .article-info .article-intro .tag {
  position: relative;
  top: .05rem;
  display: inline-block;
  line-height: .3rem;
  font-size: .14rem;
  margin-left:10px;
  background: transparent;
  border-radius: .15rem;
  overflow: hidden;
  background-image:linear-gradient(90deg, rgba(14, 199, 255, 1) 0,rgba(49, 245, 179, 1) 45%, rgba(126, 247, 116, 1));
  /*background-image:linear-gradient(90deg, rgba(0, 255, 255, 1) 0,rgba(215, 27, 253, 1) 45%, rgba(0, 129, 255, 1));*/
}
.article-detail .article-info .article-intro .tag a:before {
    content:"";
    position:absolute;
    width: 100%;
    height:100%;
    top:0;
    left:-150px;
    overflow:hidden;
    background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.6)),color-stop(100%,rgba(255,255,255,0)));
    /*老式语法书写规则*/

    background:-moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.6)50%,rgba(255,255,255,0)100%);
    background:-webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.6)50%,rgba(255,255,255,0)100%);
    background:-o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.6)50%,rgba(255,255,255,0)100%);
    -webkit-transform:skewX(-25deg);
    -moz-transform:skewX(-25deg);
    animation: leftone 1s ease 3s;
}
.article-detail .article-info .article-intro .tag a:hover:before {
    left:150%;
    transition:left 1s ease 0s;
}
@keyframes leftone {
    from{left:-150px;}
    to{left:150%;}
}
@-webkit-keyframes leftone {
    from{left:-150px;}
    to{left:150%;}
}
.article-detail .article-info .article-intro .tag a {
  color: #FFF;
  display: block;
  padding: 0 .2rem; 
}
.article-detail .article-info .article-count {
  display: inline-block;
  height: .4rem;
  margin: .1rem 0;
  line-height: .5rem;
  background: rgba(8,19,31,.3);
  white-space: nowrap;
  vertical-align: middle
}

.article-detail .article-info .article-count>p {
  display: inline-block;
  line-height: .38rem
}

.article-detail .article-info .article-count strong {
  color: #fff
}

.article-detail .article-info .article-count .now-count {
  height: 100%;
  border: solid 1px #2d3b4c;
  font-size: 0;
  vertical-align: top;
  overflow: hidden
}

.article-detail .article-info .article-count .now-count span {
  display: inline-block;
  padding: 0 .15rem;
  font-size: .14rem;
  color: #c6d2de
}

.article-detail .article-info .article-count .now-count span:nth-child(1) {
  background: #2d3b4c
}

.article-detail .article-info .article-count .total-sell,.article-detail .article-info .article-count .area {
  margin: 0 .3rem
}


.article-detail .article-info .controls {
	/*position: absolute;*/
	/*left: 0;*/
	/*top: 100%;*/
	vertical-align: middle;
	text-align: left;
	padding: .3rem 0 .1rem 0;
}
.spec .article-detail .article-info .controls {
    text-align: left;
}
.article-detail .article-info .controls span,.article-detail .article-info .controls button {
  display: inline-block;
  margin:0 .03rem;
}
.article-detail .article-info .controls span a span,.article-detail .article-info .controls button a span {
  display: inline-block;
  margin:0rem;
}
.article-detail .article-info .controls .heart-clicked {
  position: relative;
  top: 0rem;
  left: 0rem;
  clear: both;
  width: auto;
  height: auto;
    background: rgba(232,25,87,1);
  display: inline-block;
  padding: 0 .15rem;
    line-height: .40rem;
    text-align: center;
    color: #fff;
    border-radius: .25rem;
    box-shadow: none;
    font-size: .14rem;
}
.article-detail .article-info .controls .heart-clicked i.like {
  opacity: 1;
    width: .20rem;
    height: .20rem;
    line-height: .20rem;
    background-image: url(../images/icon-digg.svg);
    margin-top: -.02rem;
}
.article-detail .article-info .controls button:nth-child(2) {
/*  margin-left: .20rem;*/
}
.article-detail .article-info .controls .for-hits,
.article-detail .article-info .controls .for-collect,
.article-detail .article-info .controls .for-click,
.article-detail .article-info .controls .for-now {
  display: inline-block;
    padding: 0 .15rem;
    margin: 0 .05rem;
    line-height: .40rem;
    text-align: center;
    color: #fff;
    border-radius: .2rem;
    font-size: .14rem;
    background:rgba(232,25,87,1);
    background-image: linear-gradient(-45deg, rgba(232,25,87,1) 0,rgba(232,25,87,.6) 45%, rgba(232,25,87,1));
}
.article-detail .article-info .controls .for-hits:hover {
  -webkit-box-shadow: 0 0 5px 0 rgba(232,25,77,1), inset 0 0 10px 0 rgba(232,25,77,1);
  box-shadow: 0 0 5px 0 rgba(232,25,77,1), inset 0 0 10px 0 rgba(232,25,77,1);
}
.article-detail .article-info .controls .for-collect:hover {
  -webkit-box-shadow: 0 0 5px 0 rgba(83,157,203,1), inset 0 0 10px 0 rgba(83,157,193,1);
  box-shadow: 0 0 5px 0 rgba(83,157,203,1), inset 0 0 10px 0 rgba(83,157,193,1);  
}
.article-detail .article-info .controls .for-click:hover {
  -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,1), inset 0 0 10px 0 rgba(0,0,0,1);
  box-shadow: 0 0 5px 0 rgba(0,0,0,1), inset 0 0 10px 0 rgba(0,0,0,1);  
}
.article-detail .article-info .controls .for-hits.for-collect,
.article-detail .article-info .controls .for-collect.for-collect,
.article-detail .article-info .controls .for-click.for-collect,
.article-detail .article-info .controls .for-now.for-collect {
  background: #539dcb;
}
.article-detail .article-info .controls .for-hits.for-click,
.article-detail .article-info .controls .for-collect.for-click,
.article-detail .article-info .controls .for-click.for-click,
.article-detail .article-info .controls .for-now.for-click {
  /*background: #993a38;*/
  background: #000;
}

.article-detail .douyin-qrcode {
  text-align: center;
}
.article-detail .douyin-qrcode #qrcode {
  margin: 0 auto;
}
.article-detail .douyin-qrcode img {
/*  width: 60%;
  border: 5px solid #FFF;
  border-radius: .03rem;*/
  width: 100px;
  height: 100px;
}
.article-detail .douyin-qrcode .text {
  padding: 0.3rem;
}
.article-detail .douyin-qrcode .text p {
  line-height: .2rem;
  font-size: .14rem;
  color: #9f9eb1;
}
.article-detail .article-info .collect {
  position: absolute;
  display: none;
  right: 0;
  padding: .15rem .25rem;
  color: rgba(255,255,255,.5);
  font-size: .14rem;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%)
}

.article-detail .article-info .collect span {
  margin-right: .1rem;
  vertical-align: middle
}

.article-detail .article-info .collect.collected,.article-detail .article-info .collect:hover {
  color: #549ecb
}



@media only screen and (min-width:768px) {
  .article-detail .article-info .article-intro,
  .article-detail .article-info .article-desc,
  .article-detail .article-info .controls, 
  .article-detail .article-info .info {
    width: 100%;
  }
  .article-detail .article-info .article-name,.article-detail .article-info .special-tag {
    display: inline-block;
    vertical-align: middle
  }

  .article-detail .article-info .controls {
    padding: .25rem 0;
    gap: 0.2rem;
    display: inline-flex;
  }

  .article-detail .article-info .controls .for-collect,
  .article-detail .article-info .controls .for-hits,
  .article-detail .article-info .controls .for-click,
  .article-detail .article-info .controls .for-now {
    padding: 0 .29rem;
    display: inline-block;
  }
  .article-detail .article-info .collect {
    display: block;
    top: 0;
    transform: none
  }
  .article-detail .douyin-qrcode {
    width: 15%;
    text-align: center;
  }
  .article-detail .douyin-qrcode #qrcode {
    width: 1.10rem;
    height: 1.10rem;
    padding: .05rem;
    background-color: #FFF;
    border-radius: .1rem;
  }
  #showdiv {
    max-height: 60px;
  }


}
/*个人资料归化*/
.necessary {
   position: relative;
   right: 0;
}

.button-data {
	cursor: pointer;
	position: absolute;
	right: .15rem;
	top: .15rem;
	color: #9f9eb1;
	font-size: .14rem;
	line-height: .3rem;
	padding: 0 .1rem;
	border: .01rem solid #9f9eb1;
	border-radius: .04rem;
	
}
.button-data:hover {
	color: #fff;
	background: #539dcb;
	border: .01rem solid #539dcb;
}
.persondata {
	position: absolute;	
	top:0;
	right: -45%;
	bottom: 0;
	width: 45%;
	padding: 4% 1% 4% 0%;
}
.persondata p{
	float: left;
	width: 50%;
	color: #9f9eb1;
	font-size: .14rem;
	line-height: .3rem;
}
.persondata p:nth-child(15),.persondata p:nth-child(16),.persondata p:nth-child(17) {
	width: 100%;
}
.persondata p a {
	line-height: .3rem;
	padding: .05rem .1rem;
	border-radius: .15rem;
	background: rgba(0,0,0,.5);
}

/*心跳*/
.avatar:hover .avatar-heart { opacity: 1; visibility: visible; }
.avatar:hover .heart-bg { opacity: 1; visibility: visible;  }
.heart-bg {
  opacity: 0;
  visibility: hidden;
  width:1.4rem;
  height:1.4rem;
  border-radius: .7rem;
  background:rgba(0,0,0,.5);
  position:relative;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    z-index: 3;
  left:0;
  top: -.04rem;
  z-index: 2;
}
.avatar-heart {
  opacity: 0;
  visibility: hidden;
  animation:heartbeat 1s infinite;
  -webkit-animation:heartbeat 1s infinite;
  /* Safari 和 Chrome */

    width:.66rem;
  height:.66rem;
  background:#f00;
  position:relative;
  filter:drop-shadow(0px 0px 20px rgb(255,20,20));
  transform:rotate(45deg);
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    z-index: 3;
  left:0;
  top:-.9666666rem;
}
.avatar-heart:before,.avatar-heart:after {
  content:"";
  position:absolute;
  width:.666666rem;
  height:.666666rem;
  background:#f00;
  border-radius:.333333rem;
}
.avatar-heart:before {
  left:-.333333rem;
}
.avatar-heart:after {
  left:0;
  top:-.333333rem;
}
@keyframes heartbeat {
  0% {
  transform:rotate(45deg) scale(0.8,0.8);
  opacity:1;
}
25% {
  transform:rotate(45deg) scale(1,1);
  opacity:0.8;
}
100% {
  transform:rotate(45deg) scale(0.8,0.8);
  opacity:1;
}
}

@media only screen and (min-width:980px) {
  .article-detail {
    height: auto
  }

  .article-detail>div {
    display: inline-block;
  }

  .article-detail .article-img {
    width: 25%;
  }
  .article-detail .article-info .controls .for-collect,
  .article-detail .article-info .controls .for-hits,
  .article-detail .article-info .controls .for-click,
  .article-detail .article-info .controls .for-now {
    padding: 0 .29rem;
    display: inline-block;
  }
  .article-detail .article-info {
    width: 55%;
    text-align: left;
    border-bottom-left-radius: 0;
    border-top-right-radius: .06rem
  }
  .article-detail .article-info .article-count {
    margin-right: .35rem
  }
  .article-detail .douyin-qrcode {
    width: 20%;
    text-align: center;
  }
  .article-detail .douyin-qrcode #qrcode {
    width: 1.10rem;
    height: 1.10rem;
    padding: .05rem;
    background-color: #FFF;
    border-radius: .1rem;
  }
  #showdiv {
    max-height: 60px;
  }

}

/*文章页修改*/
.container .floors .floor {
  margin: .2rem auto 0 auto;
}
.floors .main-content {
  margin: .3rem auto 0 auto;
}

@keyframes avatar-bg{
0%{ transform:scale(0.8);}
50%{transform:scale(1.15);}
100%{transform:scale(0.8);}
}
@-webkit-keyframes avatar-bg{
0%{ -webkit-transform:scale(0.8);}
50%{-webkit-transform:scale(1.15);}
100%{-webkit-transform:scale(0.8);}
}   
/*头像动效一*/
.play-tx {
  animation: ripple 1.2s linear infinite;
  border-radius: 50%;
  background:url() no;
}

.play-tx2 {
  animation: icon_rotate 20s linear infinite,ripple 1.2s linear infinite;
  border-radius: 50%;
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(255,0,255,0.1), 0 0 0 10px rgba(255,0,255,0.1), 0 0 0 20px rgba(255,0,255,0.1), 0 0 0 30px rgba(255,0,255,0.1);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(255,0,255,0.1), 0 0 0 20px rgba(255,0,255,0.1), 0 0 0 30px rgba(255,0,255,0.1), 0 0 0 40px rgba(255,0,255,0);
  }
}
@keyframes ripple2 {
  0% {
    box-shadow: 0 0 0 0 rgba(248,248,255,0.1), 0 0 0 10px rgba(248,248,255,0.1), 0 0 0 20px rgba(248,248,255,0.1), 0 0 0 30px rgba(248,248,255,0.1);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(230,230,250,0.1), 0 0 0 20px rgba(230,230,250,0.1), 0 0 0 30px rgba(230,230,250,0.1), 0 0 0 40px rgba(230,230,250,0);
  }
}
@keyframes icon_rotate {
  0% {
  -webkit-transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  }
}
/*程序员失恋了，我不会告诉你这是什么动效的*/

@keyframes black-hole {
  0% {
    transform: scale(1) translate3d(75px, 0, 0);
  }
  50% {
    transform: scale(4) translate3d(55px, 0, 0);
  }
  100% {
    transform: scale(1) translate3d(75px, 0, 0);
  }
}
@keyframes black-hole-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) skew(3deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) skew(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) skew(3deg);
  }
}
.black-hole {
  backface-visibility: hidden;
  z-index: 20;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  box-shadow: 0 0 16px 0 #0000ff inset;
}
.black-hole .gooey-container {
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) skew(5deg);
  filter: url(#gooey-plasma-2);
  width: 1.68rem;
  height: 1.68rem;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 0 12px #9900ff inset;
  animation: black-hole-rotate 5s ease infinite;
}
.black-hole .gooey-container .bubble {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: right;
}
.black-hole .gooey-container .bubble:before {
  content: "";
  display: inline-block;
  background: #ff4081;
  width: .56rem;
  height: .56rem;
  border-radius: 50%;
  transform: scale(1) translate3d(75px, 0, 0);
  box-shadow: 0 0 10px 0 #0000ff inset, 0 0 10px 0 #0000ff inset;
}
.black-hole .gooey-container .bubble:nth-child(1) {
  transform: translate(-50%, -50%) rotate(60deg);
}
.black-hole .gooey-container .bubble:nth-child(1):before {
  animation: black-hole 1s ease 0.5s infinite;
}
.black-hole .gooey-container .bubble:nth-child(2) {
  transform: translate(-50%, -50%) rotate(120deg);
}
.black-hole .gooey-container .bubble:nth-child(2):before {
  animation: black-hole 2s ease 1s infinite;
}
.black-hole .gooey-container .bubble:nth-child(3) {
  transform: translate(-50%, -50%) rotate(180deg);
}
.black-hole .gooey-container .bubble:nth-child(3):before {
  animation: black-hole 3s ease 1.5s infinite;
}
.black-hole .gooey-container .bubble:nth-child(4) {
  transform: translate(-50%, -50%) rotate(240deg);
}
.black-hole .gooey-container .bubble:nth-child(4):before {
  animation: black-hole 4s ease 2s infinite;
}
.black-hole .gooey-container .bubble:nth-child(5) {
  transform: translate(-50%, -50%) rotate(300deg);
}
.black-hole .gooey-container .bubble:nth-child(5):before {
  animation: black-hole 5s ease 2.5s infinite;
}
.black-hole .gooey-container .bubble:nth-child(6) {
  transform: translate(-50%, -50%) rotate(360deg);
}
.black-hole .gooey-container .bubble:nth-child(6):before {
  animation: black-hole 6s ease 3s infinite;
}
/*打榜*/ 
#loadingContainer {
  /*position: absolute;
  top:55%;
  right: .15rem;*/
  box-sizing:border-box;
  display:block;

}
#loadingContainer * {
  box-sizing:border-box
}
#loadingContainer .loadingbar {
  position:relative;
  width:calc(100% - .1rem);
  height:.2rem;
  -webkit-border-radius:10px;
  border-radius:10px;
  background: rgba(10, 17, 61, 1);
  -webkit-box-shadow:0 0 1px 0 magenta, inset 0 0 10px 0 magenta;
  box-shadow: 0 0 1px 0 magenta, inset 0 0 10px 0 magenta;
  margin:.1rem 0;
  padding:4px;
}
#loadingContainer .loadingbar .filler_wrapper {
  border-radius:999999px;
  width:100%;
  height:100%;
  overflow:hidden
}
#loadingContainer .loadingbar .filler_wrapper .filler {
  transition:ease-out width .9s;
  -webkit-transition:ease-out width .9s;
  background:#e81957;
  background:-moz-linear-gradient(top,rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(232,25,87,1)),color-stop(100%,rgba(170,0,51,1)));
  background:-webkit-linear-gradient(top,rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
  background:-o-linear-gradient(top,rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
  background:-ms-linear-gradient(top,rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
  background:linear-gradient(to bottom,rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e81957',endColorstr='#aa0033',GradientType=0 );
  -webkit-box-shadow:0 0 12px 0 #e81957,inset 0 1px 0 0 rgba(255,255,255,.45),inset 1px 0 0 0 rgba(255,255,255,.25),inset -1px 0 0 0 rgba(255,255,255,.25);
  box-shadow:0 0 12px 0 #e81957,inset 0 1px 0 0 rgba(255,255,255,.45),inset 1px 0 0 0 rgba(255,255,255,.25),inset -1px 0 0 0 rgba(255,255,255,.25);
  text-align:center;
  width:20%;
  height:100%;
  overflow: hidden;
}
#loadingContainer .loadingbar .filler_wrapper .filler span.paopao {
  display:block;
  width:100%;
  height:10px;
  -webkit-border-radius:16px;
  border-radius:16px;
  top:5px;
  left:0;
  margin: 0 5px;
  background:url(../images/paopao.png) 0 0;
  -webkit-animation:sparkle 1500ms linear infinite;
  -moz-animation:sparkle 1500ms linear infinite;
  -o-animation:sparkle 1500ms linear infinite;
  animation:sparkle 1500ms linear infinite;
  opacity:.5;
}

@-webkit-keyframes sparkle {
  from {
  background-position:0 0
}
to {
  background-position:0 -64px
}
}@-moz-keyframes sparkle {
  from {
  background-position:0 0
}
to {
  background-position:0 -64px
}
}@-o-keyframes sparkle {
  from {
  background-position:0 0
}
to {
  background-position:0 -64px
}
}@keyframes sparkle {
  from {
  background-position:0 0
}
to {
  background-position:0 -64px
}
}

#loadingContainer .loadingbar .filler_wrapper .filler .value {
  color:#fff;
  text-shadow:1px 1px 3px #ff8c00;
  font-size:12px;
  position:absolute;
  top:0;
  left:45%;
}
#loadingContainer .loadingbar .leaf {
  transition:linear all 2.5s;
  -webkit-transition:linear all 2.5s;
  width:10px;
  height:15px;
  background:url(../images/leaf.png) no-repeat;
  background-size:contain;
  position:absolute;
  right:5%;
  top:5px;
  z-index:5;
}
#loadingContainer .loadingbar .marker_container {
  height:60px;
  width:60px;
  border-radius:50%;
  border:solid 2px #fff;
  position:absolute;
  background-color:#ff8c00;
  right:0;
  top:-5px;
  transition:all 2s ease-out;
  z-index:10
}
#loadingContainer .loadingbar .marker_container:before {
  content:" ";
  display:inline-block;
  position:relative;
  width:60px;
  height:10px
}
#loadingContainer .loadingbar .marker_container:after {
  content:" ";
  width:4px;
  height:4px;
  border-radius:100px;
  background-color:#fff;
  display:inline-block;
  position:absolute;
  left:calc(50% - 2px);
  top:calc(50% - 2px)
}
#loadingContainer .loadingbar .marker_container .marker {
  position:absolute;
  width:20px;
  height:20px;
  border-radius:100% 100% 100% 0;
  background-color:#fff
}
#loadingContainer .loadingbar .marker_container .marker:nth-child(1) {
  left:18px;
  top:1px;
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg)
}
#loadingContainer .loadingbar .marker_container .marker:nth-child(2) {
  left:1px;
  top:18px;
  -moz-transform:rotate(-135deg);
  -ms-transform:rotate(-135deg);
  -webkit-transform:rotate(-135deg);
  transform:rotate(-135deg)
}
#loadingContainer .loadingbar .marker_container .marker:nth-child(3) {
  left:18px;
  bottom:1px;
  -moz-transform:rotate(-225deg);
  -ms-transform:rotate(-225deg);
  -webkit-transform:rotate(-225deg);
  transform:rotate(-225deg)
}
#loadingContainer .loadingbar .marker_container .marker:nth-child(4) {
  right:1px;
  top:18px;
  -moz-transform:rotate(-315deg);
  -ms-transform:rotate(-315deg);
  -webkit-transform:rotate(-315deg);
  transform:rotate(-315deg)
}
.rotateIt {
  animation:wowrotate 3s infinite ease-in-out
}
#plus_ten {

}
/*打榜动效*/
@keyframes wowrotate {
  from {
  transform:rotate(360deg)
}
to {
  transform:rotate(0deg)
}
}@keyframes wind {
  0% {
  top:2px
}
50% {
  top:12px
}
100% {
  top:30px;
  right:100%
}
}@keyframes wind-up {
  0% {
  top:1px
}
60% {
  top:20px
}
100% {
  top:7px;
  right:100%
}
}
/*发光特效*/
x-sign {
  --interval: .5s;
  display: block;
  text-shadow: 
    0 0 10px var(--color1),
    0 0 20px var(--color2),
    0 0 40px var(--color3),
    0 0 80px var(--color4);
  will-change: filter, color;
  filter: saturate(60%);
  animation: flicker steps(1000) var(--interval) 3s infinite;
}
x-sign {
  color: azure;
  --color1: azure;
  --color2: aqua;
  --color3: dodgerblue;
  --color4: blue;
}
@keyframes flicker {
  50% {
    color: white;
    filter: saturate(200%) hue-rotate(20deg);
  }
}

.button-blue { 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-name: bluePulse; 
  -webkit-animation-duration: 2s; 
  filter: saturate(60%);
}
.button-red { 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-name: redPulse; 
  -webkit-animation-duration: 2s; 
  filter: saturate(60%);
}
@-webkit-keyframes bluePulse {
  from { background-color: blue; -webkit-box-shadow: 0 0 9px #333; }
  50% { 
    background-color: dodgerblue; 
    -webkit-box-shadow: 0 0 27px #007dc9; 
  }
  to { background-color: blue; -webkit-box-shadow: 0 0 27px #333; }
}
@-webkit-keyframes redPulse {
  from { background-color: #8c2305; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #e33100; -webkit-box-shadow: 0 0 27px #e33100; }
  to { background-color: #8c2305; -webkit-box-shadow: 0 0 9px #333; }
}

/*查看更多*/
.article {
	position: relative;
    background-color: #1a1a32;
    border-radius: .15rem;
    overflow: hidden;
    padding: 0;
}

#showdiv {
  width: 100%;
  padding: 0 .6rem;
  color: #67c1f5;
  font-size: .14rem;
  overflow: hidden;
  max-height: 2000px;
  margin-top: -60px;
  -webkit-transition: max-height 3s;
  transition: max-height 3s;
}

#showdiv p {
  display: block;
  color: #9f9eb1;
  line-height: 26px;
  white-space: pre-wrap;
  text-align: justify;
}
#showdiv blockquote{
  display:block;
  padding: 15px 45px 0 45px;
  margin: 0;
  position: relative;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  text-align: justify;

}
#showdiv blockquote::before{
  content: "\201C"; /*左双引号的Unicode编码*/
  /*字体*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
  /*位置*/
  position: absolute;
  left: 0px;
  top:5px;
}
#showdiv blockquote::after{
	content: "\201D";
	font-family: Georgia, serif;
	font-size: 60px;
	font-weight: bold;
	color: #999;
	position: absolute;
	right: 0px;
	bottom: -40px;
}
.articlemore {
  width: 100%;
  height: .62rem;
  text-align: center; 
}
.for-more {
  height: 32px;
  width: 32px;
  line-height: 48px;
  margin-bottom: .2rem;
  background-size: contain;
  background:url(../images/for-more.png) no-repeat;
}
.articlebody {
  display: none;
  margin-bottom: 30px;
}
/*--上下动画--*/
.up-down{
    margin-top: 0px;
    animation: Updown 1s infinite alternate;
    -webkit-animation: Updown 1s infinite alternate;
}

@keyframes Updown {
    from{margin-top:.2rem;}
    to{margin-top:.1rem;}
}
@-webkit-keyframes Updown {
    from{margin-top:.2rem;}
    to{margin-top:.1rem;}
}
/*榜单*/
.article-rank {
  position: absolute;
  top: 0;
  left: 0;
  line-height: .4rem;
  padding: 0 .13rem;
  font-size: .14rem;
  background: transparent;
  border-radius: .15rem 0 .25rem 0;
  overflow: hidden;
  background-image:linear-gradient(90deg, rgba(14, 199, 255, 1) 0,rgba(49, 245, 179, 1) 45%, rgba(126, 247, 116, 1));
  /*background-image:linear-gradient(90deg, rgba(0, 255, 255, 1) 0,rgba(215, 27, 253, 1) 45%, rgba(0, 129, 255, 1));*/
}
.article-rank a:before {
    content:"";
    position:absolute;
    width: 100%;
    height:100%;
    top:0;
    left:-150px;
    overflow:hidden;
    background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.6)),color-stop(100%,rgba(255,255,255,0)));
    /*老式语法书写规则*/

    background:-moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.6)50%,rgba(255,255,255,0)100%);
    background:-webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.6)50%,rgba(255,255,255,0)100%);
    background:-o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.6)50%,rgba(255,255,255,0)100%);
    -webkit-transform:skewX(-25deg);
    -moz-transform:skewX(-25deg);
    animation: leftone 1s ease 1s;
}
.article-rank a:hover:before {
    left:150%;
    transition:left 1s ease 0s;
}
@keyframes leftone {
    from{left:-150px;}
    to{left:150%;}
}
@-webkit-keyframes leftone {
    from{left:-150px;}
    to{left:150%;}
}
.article-rank a {
  color: #FFF;
  font-size: .12rem;
}
/*shop*/
.article-detail .article-info .article-intro .title {
    font-size: .23rem;
    color: #9f9eb1;
    display: inline-flex;
    margin-top: -0.2rem;
}
.article-detail .article-info .article-intro .title.shop {
  display: inline-block;
}
.article-detail .article-info .article-intro .title span {
  margin-right: 10px;
}
#pic-page {
  text-align: center;
  margin-top: 10px;
}

#pic-page a {
  margin: 0 2px;
}

#pic-page a img {
  width: 40px;
  padding: 2px;
  border: solid #ccc 1px;
  margin-bottom: 5px;
}

#pic-page a:hover img,#pic-page a.active img {
  border: solid #5280DD 1px;
}

.rec-caipin {
  width: 100%;
    padding: 1% 3%;
    color: #67c1f5;
    font-size: .14rem;
    overflow: hidden;
    -webkit-transition: max-height 3s;
    transition: max-height 3s;
    line-height: normal;
}
.rec-caipin .text {
  padding: .1rem 0;
  color: #9f9eb1;
}
.rec-title {
  display: inline-block;
  font-size: 16px;
    color: #9f9eb1;
    width: .80rem;
    line-height: .5rem;
}
.rec-line {
  height: 1px;
    width: calc(100% - .85rem);
    float: right;
    margin-top: .26rem;
    border-top: 1px dashed #77787d;
    display: inline-block;
    overflow: hidden;
}
.rec-caipin .item-caipin {
  float: left;
  display: inline-block;
  width: 50%;
  padding: 0 .05rem;
  margin-top: .15rem;
  text-align: center;
}
.rec-caipin .item-caipin:hover {
  opacity: .6;
}
.rec-caipin .item-caipin img {
  width: 100%;
  border-radius: .1rem;
}
/*自适应修改*/
@media only screen and (min-width:768px) {
  .article .article-detail {
    padding: 60px;
  }     
  .rec-caipin .item-caipin {
    width: 16.667%;
  }
}
@media only screen and (min-width:980px) {
  .article .article-detail {
    padding: 60px;
  }     
  .rec-caipin .item-caipin {
    width: 16.667%;
  }
}
@media only screen and (min-width:1200px) {
  .article .article-detail {
    padding: 60px;
  }   
  .rec-caipin .item-caipin {
    width: 16.667%;
  } 
}