/*-------------------------------------------- 
        Banner
    --------------------------------------------*/

    .body {
      padding: 20px 0 0;
  }
  
  .banner {
      display: flex;
      height: 160px;
      margin: 0 0 20px;
      padding: 40px 50px 38px;
      background-size: cover;
      background-position: center center;
  }
  
      .banner .info {
          display: flex;
          flex-flow: column nowrap;
          justify-content: space-between;
          width: 100%;
      }
  
          .banner .info .title {
              display: flex;
              flex-flow: row nowrap;
              align-items: center;
              font-size: 28px;
              font-weight: bold;
              color: #ffffff;
          }
  
          .banner .info .sub {
              display: flex;
              flex-flow: row nowrap;
              justify-content: space-between;
              width: 100%;
          }
  
              .banner .info .sub .items,
              .banner .info .sub .addition {
                  display: flex;
                  flex-flow: row nowrap;
                  align-items: center;
              }
  
                  .banner .info .sub .items .item {
                      display: flex;
                      flex-flow: row nowrap;
                      margin: 0 50px 0 0;
                      font-size: 14px;
                      color: #ffffff;
                  }
  
                      .banner .info .sub .items .item .key {
                          margin: 0 12px 0 0;
                          opacity: 0.7;
                      }
  
              .banner .info .sub .addition {
                  display: flex;
                  flex-flow: row nowrap;
                  align-items: center;
                  font-size: 14px;
                  color: #ffffff;
                  opacity: 0.8;
              }
  
                  .banner .info .sub .addition .location {
                      display: flex;
                      flex-flow: row nowrap;
                      align-items: center;
                  }
  
                      .banner .info .sub .addition .location img {
                          width: 20px;
                          height: auto;
                      }
  
                  .banner .info .sub .addition .divider {
                      margin: 0 16px;
                  }
  
                  .banner .info .sub .addition .due b {
                      font-weight: bold;
                  }
  
  /*-------------------------------------------- 
    Main Content
  --------------------------------------------*/
  .main {
      padding: 28px 50px;
      background: #ffffff;
  }
  
      .main .menu {
          position: sticky;
          top: 0;
          width: auto;
          height: 54px;
          background: #ffffff;
          border-bottom: 2px solid #f4f6f9;
          overflow-x: auto;
          overflow-y: hidden;
          white-space: nowrap;
          z-index: 100;
          scrollbar-width: none;
      }
  
          .main .menu .item {
              display: inline-block;
              vertical-align: center;
              height: 50px;
              line-height: 50px;
              margin-right: 40px;
              font-size: 18px;
              color: #333333;
              cursor: pointer;
          }
  
              .main .menu .item:last-child {
                  margin-right: 0;
              }
  
              .main .menu .item.active {
                  color: #2681f6;
                  font-size: 20px;
              }
  
              .main .menu .item:hover {
                  color: #2681f6;
              }
  
      .main .contents {
          padding: 20px 0 10px;
      }
  
          .main .contents h3 {
              position: relative;
              margin: 40px 0 30px;
              padding: 10px 0 0 16px;
              font-size: 20px;
              font-weight: bold;
          }
  
              .main .contents h3:first-child {
                  margin-top: 0;
              }
  
              .main .contents h3::before {
                  content: "";
                  position: absolute;
                  left: 0;
                  top: 16px;
                  width: 6px;
                  height: 18px;
                  border-radius: 6px;
                  background: #2681f6;
              }
  
          .main .contents p {
              line-height: 40px;
              margin-bottom: 10px;
          }

          .main .contents p img{
           width: 100%;
        }
  
          .main .contents ol{
              margin-bottom: 10px;
          }
  
          .main .contents ol li{
              line-height: 40px;
              list-style:square ;
              list-style-position:inherit;
          }
  
          /*-------------------------------------------- 
    Table
  --------------------------------------------*/
  
  
          .main .contents table {
              width: 100%;
              margin: 0 0 20px;
              border-collapse: collapse;
          }
  
              .main .contents table th,
              .main .contents table tr:nth-child(1) td {
                  padding: 12px 18px;
                  background: #f4f6f9;
                  color: #9c9c9c;
                  font-size: 14px;
                  text-align: left;
              }
  
              .main .contents table td {
                  padding: 12px 18px;
                  border: 1px solid #ececec;
                  font-size: 14px;
                  text-align: left;
              }
  
          .main .contents .table th,
          .main .contents .table td {
              text-align: center;
          }
  
          .main .contents table th,
          .main .contents table td {
              line-height: 20px;
              vertical-align: top;
          }
  
          .main .contents .table th,
          .main .contents .table td {
              line-height: 24px;
              vertical-align: middle;
          }
  
          .main .contents table th p,
          .main .contents table td p {
              line-height: 24px;
              margin: 0;
          }
  
          .main .contents table tr td .post,
          .main .contents table tr td .view {
              display: inline-block;
              line-height: 30px;
              height: 30px;
              padding: 0 20px;
              cursor: pointer;
          }
  
          .main .contents table tr td .post {
              margin: 0 10px 0 0;
              border: 1px solid #2681f6;
              color: #2681f6;
          }
  
              .main .contents table tr td .post:hover {
                  font-weight: bold;
              }
  
          .main .contents table tr td .view {
              border: 1px solid #9c9c9c;
          }
  
              .main .contents table tr td .view:hover {
                  font-weight: bold;
              }
  
          /*-------------------------------------------- 
    Files
  --------------------------------------------*/
  
          .main .contents .files {
              display: flex;
              flex-flow: row wrap;
              justify-content: space-between;
              align-items: center;
          }
  
  
              .main .contents .files .file {
                  display: flex;
                  flex-flow: row nowrap;
                  align-items: center;
                  width: 49%;
                  height: 80px;
                  padding: 0 30px;
                  margin: 0 0 20px;
                  background: #f9fafc;
                  cursor: pointer;
              }
  
                  .main .contents .files .file:hover {
                      box-shadow: 0px 1px 5px 0px rgba(23, 24, 25, 0.15);
                  }
  
                  .main .contents .files .file img {
                      height: 40px;
                      width: auto;
                      margin: 0 30px 0 0;
                  }
  
                  .main .contents .files .file .filename {
                      flex: 1;
                      min-width: 0;
                      font-size: 14px;
                      color: #333333;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                  }
  
  
          /*-------------------------------------------- 
    Social
  --------------------------------------------*/
  
          .main .contents .social {
              display: flex;
              flex-flow: row nowrap;
              align-items: center;
              padding: 20px 0;
          }
  
              .main .contents .social .shares {
                  display: flex;
                  flex-flow: row nowrap;
              }
  
                  .main .contents .social .shares a {
                      position: relative;
                  }
  
                      .main .contents .social .shares a > img {
                          width: 36px;
                          height: 36px;
                          opacity: 0.8;
                      }
  
                      .main .contents .social .shares a > img {
                          opacity: 1;
                      }
  
                      .main .contents .social .shares a .qrcode {
                          position: absolute;
                          bottom: 44px;
                          left: calc(50% - 60px);
                          display: none;
                          width: 120px;
                          height: 120px;
                          padding: 5px;
                          background: #ffffff;
                          box-shadow: 0px 0px 15px 0px rgba(23, 24, 25, 0.15);
                      }
  
                          .main .contents .social .shares a .qrcode::before {
                              content: "";
                              position: absolute;
                              bottom: -12px;
                              left: calc(50% - 6px);
                              border: 6px solid transparent;
                              border-top: 6px solid #ffffff;
                          }
  
                      .main .contents .social .shares a:hover .qrcode {
                          display: block;
                      }
  
                      .main .contents .social .shares a .qrcode img {
                          width: 100%;
                          height: 100%;
                      }
  
              .main .contents .social .text {
                  margin: 0 0 0 10px;
                  font-size: 12px;
                  color: #999999;
              }
  
  /*-------------------------------------------- 
    Pagination
  --------------------------------------------*/
  
  .pagination {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
      align-items: center;
  }
  
      .pagination .page {
          width: 30px;
          height: 30px;
          line-height: 30px;
          margin: 0 4px;
          background: #ffffff;
          border: 1px solid #dcdcdc;
          text-align: center;
          font-size: 14px;
      }
  
          .pagination .page.prev,
          .pagination .page.next {
              color: #9c9c9c;
          }
  
          .pagination .page:hover {
              color: #2681f6;
          }
  
          .pagination .page.active {
              background: #2681f6;
              border: 1px solid #2681f6;
              color: #ffffff;
          }
  
  /*-------------------------------------------- 
    Reviews
  --------------------------------------------*/
  
  .reviews {
      margin: 20px 0 0;
      padding: 40px 50px 55px;
      background: #ffffff;
  }
  
      .reviews h3 {
          position: relative;
          margin: 0 0 30px;
          padding: 0 0 0 16px;
          font-size: 20px;
          font-weight: bold;
      }
  
          .reviews h3::before {
              content: "";
              position: absolute;
              left: 0;
              top: 6px;
              width: 6px;
              height: 18px;
              border-radius: 6px;
              background: #2681f6;
          }
  
      .reviews .block {
          display: flex;
          flex-flow: column nowrap;
          height: 160px;
      }
  
          .reviews .block textarea {
              flex: 1;
              width: 100%;
              min-height: 0;
              line-height: 20px;
              padding: 15px 20px;
              border: 1px solid #f1f1f1;
              border-bottom: 1px solid #fafafa;
              font-size: 14px;
              resize: none;
          }
  
          .reviews .block .line {
              display: flex;
              flex-flow: row nowrap;
              justify-content: space-between;
              align-items: center;
              height: 50px;
              line-height: 50px;
              padding: 0 20px;
              background: #fafafa;
              font-size: 14px;
              color: #9c9c9c;
          }
  
              .reviews .block .line .text a {
                  color: #2681f6;
              }
  
              .reviews .block .line .control {
                  display: flex;
                  flex-flow: row nowrap;
                  align-items: center;
              }
  
                  .reviews .block .line .control .submit {
                      width: 78px;
                      height: 28px;
                      line-height: 28px;
                      margin: 0 0 0 18px;
                      text-align: center;
                      color: #ffffff;
                      background: #0091ff;
                      opacity: 0.9;
                  }
  
                      .reviews .block .line .control .submit:hover {
                          opacity: 1;
                      }
  
          .reviews .block .tip {
              margin: 10px 0 0;
              color: #acacac;
              font-size: 12px;
          }
  
  
  .main .contents .source-link{
  padding-top: 20px;
  }
  
  .main .contents .post-tips {
      position: relative;
      padding: 10px 0 0 16px;
  }
  
      .main .contents .post-tips::before {
        content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 10px;
    height: 10px;
    background: #2681f6;
      }

      .main .contents .post-tips b{
        margin-left: 5px;
      }