@charset "UTF-8";
/*-------default setting-------*/
/*--------------------setting the responsive screen size--------------------*/
.overflow_show {
  overflow: inherit; }

/*============================= comment module =============================*/
.article__body__comment {
  clear: both;
  padding-bottom: 20px; }
  @media only screen and (max-width: 639px) {
    .article__body__comment {
      padding-bottom: 0; } }
  .article__body__comment p {
    letter-spacing: 0.2px; }
  .article__body__comment .channel_tit {
    background-color: #30acd0;
    color: #fff;
    font-size: 19px;
    background-image: url(../images/tit_arrow.png);
    background-position: calc(100% - 30px) 50%;
    background-repeat: no-repeat;
    display: inline-table;
    padding-right: 65px;
    padding-left: 5px;
    height: 30px;
    line-height: 30px;
    background-size: auto 15px;
    margin: 20px 0 10px 0; }
    .article__body__comment .channel_tit * {
      margin-left: 5px; }
    .article__body__comment .channel_tit:before {
      content: '';
      border-left: 4px solid #fff;
      display: table-cell;
      margin-right: 5px; }
      @media only screen and (max-width: 639px) {
        .article__body__comment .channel_tit:before {
          width: 1px; } }
    .article__body__comment .channel_tit h2 {
      display: inherit;
      margin-right: 50px;
      margin-left: 5px; }
    @media only screen and (max-width: 639px) {
      .article__body__comment .channel_tit {
        /*width: calc(100% - 10px);*/
        width: 100%;
        padding-right: 0px; } }
  .article__body__comment form {
    padding-bottom: 20px;
    border-bottom: 1px dotted #d6d6d6; }
    .article__body__comment form a.avatar {
      width: 50px;
      height: 50px;
      float: left;
      margin-right: 20px;
      cursor: default; }
      @media only screen and (max-width: 639px) {
        .article__body__comment form a.avatar {
          width: 35px;
          height: 35px;
          margin-right: 10px; } }
    .article__body__comment form .commentbox_wrapper {
      float: right;
      width: calc(100% - 70px);
      font-size: 16px;
      color: #666666;
      position: relative; }
      @media only screen and (max-width: 639px) {
        .article__body__comment form .commentbox_wrapper {
          width: calc(100% - 45px);
          font-size: 14px; } }
      .article__body__comment form .commentbox_wrapper #comment_box_cover {
        width: 100%;
        height: 120px;
        position: absolute; }
      .article__body__comment form .commentbox_wrapper textarea {
        border: 1px solid #d6d6d6;
        width: calc(100% - 22px);
        max-width: calc(100% - 22px);
        height: 98px;
        display: block;
        background-color: #f4f4f4;
        font-size: 14px;
        line-height: 18px;
        color: #666666;
        padding: 10px; }
      .article__body__comment form .commentbox_wrapper .toolbar {
        border: 1px solid #d6d6d6;
        border-top: none;
        padding: 0 0 0 10px; }
        .article__body__comment form .commentbox_wrapper .toolbar a, .article__body__comment form .commentbox_wrapper .toolbar button {
          color: #30acd0;
          line-height: 16px;
          padding: 10px 0;
          margin-right: 10px;
          display: block;
          float: left;
          border: 0;
          background: transparent;
          font-size: 16px;
          cursor: pointer; }
          .article__body__comment form .commentbox_wrapper .toolbar a.comment-sub, .article__body__comment form .commentbox_wrapper .toolbar button.comment-sub {
            background-color: #30acd0;
            padding: 10px;
            color: #fff;
            margin-right: 0;
            float: right; }
        .article__body__comment form .commentbox_wrapper .toolbar:after {
          clear: both;
          display: block;
          content: ''; }
      .article__body__comment form .commentbox_wrapper p.notice {
        font-size: 12px; }
    .article__body__comment form:after {
      display: block;
      content: '';
      clear: both; }
  .article__body__comment ul li {
    padding: 20px 0;
    border-bottom: 1px dotted #d6d6d6; }
    @media only screen and (max-width: 639px) {
      .article__body__comment ul li {
        padding: 10px 0; } }
    .article__body__comment ul li form {
      margin-left: 70px;
      padding-bottom: 0;
      border-bottom: none; }
      @media only screen and (max-width: 639px) {
        .article__body__comment ul li form {
          margin-left: 45px; } }
      .article__body__comment ul li form a.avatar {
        width: 35px;
        height: 35px;
        margin-right: 10px; }
      .article__body__comment ul li form .commentbox_wrapper {
        width: calc(100% - 45px); }
        .article__body__comment ul li form .commentbox_wrapper textarea {
          height: 24px; }
    .article__body__comment ul li ul {
      margin: 10px 0 0 70px;
      display: block;
      clear: both; }
      @media only screen and (max-width: 639px) {
        .article__body__comment ul li ul {
          margin: 0 0 0 45px; } }
      .article__body__comment ul li ul li {
        border-bottom: none;
        padding: 5px 0; }
        .article__body__comment ul li ul li a.avatar {
          width: 35px;
          height: 35px;
          margin-right: 10px; }
        .article__body__comment ul li ul li .comment_content {
          width: calc(100% - 45px); }
    .article__body__comment ul li a.avatar {
      width: 50px;
      height: 50px;
      float: left;
      margin-right: 20px; }
      @media only screen and (max-width: 639px) {
        .article__body__comment ul li a.avatar {
          width: 35px;
          height: 35px;
          margin-right: 10px; } }
    .article__body__comment ul li .comment_content {
      float: right;
      width: calc(100% - 70px);
      font-size: 14px;
      position: relative; }
      @media only screen and (max-width: 639px) {
        .article__body__comment ul li .comment_content {
          width: calc(100% - 45px);
          font-size: 14px; } }
      .article__body__comment ul li .comment_content .commentator {
        color: #30acd0;
        font-size: 14px;
        font-weight: normal; }
      .article__body__comment ul li .comment_content .comment_time {
        font-weight: normal;
        color: #d6d6d6;
        background: url("../comment/icon_phone.png") left center no-repeat;
        background-size: auto 12px;
        padding-left: 10px;
        margin-left: 10px;
        font-size: 13px; }
      .article__body__comment ul li .comment_content p.comment {
        color: #4d4d4d;
        margin: 4px 0 8px 0;
        line-height: 19px; }
      .article__body__comment ul li .comment_content a {
        color: #666666; }
        .article__body__comment ul li .comment_content a.neir_more {
          padding: 5px 20px 5px 10px;
          background: #6d6e70 url("../comment/btn_comment_expand.png") calc(100% - 8px) 50% no-repeat;
          background-size: 10px auto;
          color: #fff;
          position: absolute;
          bottom: 0px;
          right: 0;
          font-size: 12px;
          display: table;
          line-height: 14px; }
          .article__body__comment ul li .comment_content a.neir_more.neir_more_up {
            background: #6d6e70 url("../comment/btn_comment_hide.png") calc(100% - 8px) 50% no-repeat;
            background-size: 10px auto; }
        .article__body__comment ul li .comment_content a.no_of_likes {
          background: url("../comment/icon_like.png") left center no-repeat;
          background-size: 16px auto;
          padding-left: 20px; }
          .article__body__comment ul li .comment_content a.no_of_likes:before {
            content: '讚';
            margin-right: 5px; }
        .article__body__comment ul li .comment_content a.liked {
          background: url("../comment/icon_liked.png") left center no-repeat;
          background-size: 16px auto;
          color: #30acd0;
          cursor: text; }
        .article__body__comment ul li .comment_content a.reply {
          margin-left: 15px;
          background: url("../comment/icon_reply.png") left center no-repeat;
          background-size: 16px auto;
          padding-left: 20px; }
    .article__body__comment ul li:after {
      clear: both;
      display: block;
      content: ''; }
  .article__body__comment a.load_more_comment {
    margin: 20px 0;
    width: calc(100% - 2px);
    height: 19px;
    line-height: 19px;
    padding: 10px 0;
    font-size: 16px;
    border: 1px solid #d6d6d6;
    color: #666666;
    text-align: center;
    background: #f4f4f4 url("../comment/icon_load_more.png") calc(50% - 80px) center no-repeat;
    background-size: auto 19px;
    display: block; }