.compare_title{
  width:300px;
  margin:0 auto;
  position:relative;
  .title{
    font-size:18px;
    margin-top:20px;
    margin-bottom:10px;
  }
  .date{
    font-size:16px;
    color:darkorange;
  }
  .select{
    width:100px;
    background:rgba(#666,.4);
    text-align:center;
    height:40px;
    line-height:40px;
    border:1px solid $color;
    color:$color;
    @include pos(top,1px,right,10px);
    .name{
      &:after{
        color:$color;
        font-family:'home';
        font-size:24px;
        margin-left:5px;
      }
      display:block;
    }
    .down:after{
      content:'\e81b';
      font-size:16px;
    }
    .select-list{
      $bcolor:#777;
      background:$bcolor;
      width:110px;
      @include pos(right,5px,top,10px,relative);
      @include text-arrow(top,-19px,right,50px,rgba(#fff,.1),$bcolor,16px,1px);
      font-size:16px;
      box-shadow:inset 3px 0 4px rgba(#fff,.15),inset -3px 0 4px rgba(#fff,.15),1px 0 0 #777,-1px 0 0 #777;
      z-index:2;
      a{
        color:#fff;
        display:block;
        height:40px;
        text-indent:1em;
        text-align:left;
        line-height:40px;
        border-bottom:1px solid rgba(#000,.3);
        box-shadow:inset 0 1px 0 rgba(#fff,.2);
      }
      .cur a{
        color:$color;
      }
    }
  }
}
#compare{
  width:320px;
  margin:0 auto;
  box-sizing:border-box;
  padding-left:10px;
  .band-title{
    margin-top:10px;
  }
  .compare{
    margin-top:20px;
    &.rank .line{
      margin-top:30px;
      &:after{
        content:attr(data-rank);
        position:absolute;
        top:-14px;
        font-size:14px;
        color:#ccc;
      }
    }
    .line{
      margin-bottom:20px;
      position:relative;
      &:before{
        content:attr(data-content);
        width:100px;
        display:inline-block;
        @include text-overflow;
        color:#fff;
      }
      svg{
        float:right;
        border-radius:3px;
        margin-right:10px;
      }
    }
  }
}