.topic-wraper{
  font-size: 14px; border: #EEE 1px solid; padding:0 50px;  margin: 0 auto; max-width: 750px;

  & > article{
    border: #EEE 1px solid; border-left: 0; border-right: 0; padding: 50px 0; border-bottom: 0;
    img{max-width: 100%;}
  }

  .title{
    text-align: center; padding: 20px 0; position: relative;
    .tx{width: 60px; height: 60px; border-radius: 100%; display: inline-block; position: absolute;  background-color: #FFF;  padding: 10px; left: 50%; margin-left: -30px;  bottom: -30px;}
  }
  .info{
    padding: 20px 0; color: #888; text-align: center; font-size: 13px;
    .favor{
      border:#EEE 1px solid; border-radius: 100%; width: 50px; height: 50px; display: inline-block; text-align: center; line-height: 50px; font-size: 20px; cursor: pointer; color: #DDD;
      &.on{
        color: #FF102E; border-color: #FF102E;
      }
    }
  }

}

@media (max-width: 768px) {
  .topic-wraper{
     padding:0 10px; border: 0; border-bottom: #EEE 1px solid;
  }
}

.topic-author{
   text-align: center; margin: 50px 0; 
  .tx{width: 100px; height: 100px; border-radius: 100%;   margin-top: -50px;  background-color: #FFF;  padding: 10px;}
}

.topic-extra{
  border: #EEE 1px solid;  border-top: 0; margin: 0 auto; max-width: 750px; padding: 10px;overflow: hidden;
  .pub{position: absolute; left: 50%; font-size: 15px; color: #DDD}
  .next{font-size: 20px; }
  &.opers{
    a{ color: #DDD}
  }
}


.source-list{
  max-width: 800px; margin: 0 auto;
  .favor{
    width: 50px; float: left; text-align: center; font-size: 12px;
    i{font-size: 15px;}
  }
  .title{
    font-size: 15px;
  }
  .code{color: #CCC}
  .extra{
    float: right;color: #B6B6B6;  
    & > *{
      margin-right: 10px;
    }
    .tx{width: 20px; height: 20px; border-radius: 100%; margin-right: 0}
    .fa{margin-right: 5px;}
   
  }
  .list-group-item{
    padding:  15px;  position: relative;
    &:hover{
      .extra{color: #555}
    } 
  }

  a{text-decoration: none; color: #444}
  
}


.source-banner{
  text-align: center; padding-bottom: 20px;
}
