.bold {
  font-weight: bold; }

.green {
  color: #27d1d1 !important; }

.center {
  text-align: center; }

.no-padding {
  padding: 0; }

#top #top-img {
  padding: 0;
  overflow: hidden;
  background: url("/images/customer-top-pc.jpg") no-repeat center center;
  height: 190px;
  width: 100%;
  position: relative; }
#top #top-label {
  width: 1200px;
  margin: 0 auto;
  padding: 57px 0 0 20px; }
  #top #top-label .top-label-l {
    font-size: 35px;
    letter-spacing: -1px; }
  #top #top-label .top-label-s {
    font-size: 15px;
    color: #666;
    letter-spacing: -1px; }

#tab {
  width: 1200px;
  margin: 0 auto;
  margin-top: 194px;
  position: relative; }
  #tab #tab-wrap {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 780px;
    height: 65px; }
    #tab #tab-wrap .tab {
      float: left;
      width: 25%;
      color: white;
      font-size: 15px;
      text-align: center;
      padding: 20px 0;
      background-color: #a3a4a5;
      cursor: pointer; }
      #tab #tab-wrap .tab.active {
        background-color: #1cc8c9; }

#contacts {
  min-height: 500px;
  width: 1200px;
  margin: 0 auto;
  margin-top: 70px;
  font-size: 15px; }
  #contacts .write-btn-wrap {
    display: flex;
    justify-content: right; }
  #contacts .write-btn-wrap .btn {
    background-color: #67bfb7; }
  #contacts .contacts-table {
    width: 100% !important;
    border: 0;
    border-collapse: collapse;
    border-top: 3px solid #333;
    margin-top: 20px;
    display: none; }
    #contacts .contacts-table thead {
      display: none; }
    #contacts .contacts-table td {
      padding: 20px 8px;
      border-bottom: 1px solid #dedede;
      font-size: 15px;
      cursor: pointer;
      color: #666;
      vertical-align: middle; }
      #contacts .contacts-table td .receipt {
        padding: 8px 0;
        text-align: center;
        width: 90px;
        background-color: #f3f5f7;
        border: 1px solid #c7c7c7; }
      #contacts .contacts-table td .completed {
        padding: 8px 0;
        text-align: center;
        width: 90px;
        color: white;
        background-color: #666666;
        border: 1px solid #c7c7c7; }
      #contacts .contacts-table td .secret-table {
        border: 0;
        border-collapse: collapse;
        width: 100%; }
        #contacts .contacts-table td .secret-table tbody th, #contacts .contacts-table td .secret-table tbody td {
          border: 1px solid #c0c0c0; }
        #contacts .contacts-table td .secret-table tbody th {
          background-color: #f1f1f1;
          text-align: center;
          font-weight: bold;
          padding: 4px 8px; }
        #contacts .contacts-table td .secret-table tbody td {
          padding: 8px; }
          #contacts .contacts-table td .secret-table tbody td .content {
            white-space: pre-wrap; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0; }

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: inherit; }

.dataTables_wrapper {
  margin-bottom: 200px;
  margin-top: 20px; }

#pc-table_wrapper {
  display: block; }

#mobile-table_wrapper {
  display: none; }

@media (max-width: 991px) {
  #top #top-img {
    width: 100%;
    height: auto;
    background: url("/images/customer-top-mobile.jpg") no-repeat center center;
    background-size: cover; }

  #top #top-label {
    width: 100%;
    padding: 27px 0 27px 20px; }

  #top #top-label .top-label-l {
    font-size: 20px; }

  #top #top-label .top-label-s {
    font-size: 12px; }

  #tab {
    width: 100%;
    margin-top: 180px;
    position: relative; }

  #tab #tab-wrap {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 65px; }

  #tab #tab-wrap .tab {
    float: left;
    width: 50%;
    color: white;
    font-size: 15px;
    text-align: center;
    padding: 20px 0;
    background-color: #a3a4a5;
    cursor: pointer; }

  #contacts {
    width: 100%;
    margin-top: 90px;
    font-size: 13px; }

  #contects .write-btn-wrap {
    display: flex;
    justify-content: right; }

  #contects .write-btn-wrap .btn {
    background-color: #67bfb7; }

  #contacts .contacts-table td {
    padding: 10px 4px;
    font-size: 14px; }

  #contacts .contacts-table td .contact-date {
    color: #999999; }

  #contacts .contacts-table td .receipt {
    padding: 4px 0;
    text-align: center;
    width: 90%; }

  #contacts .contacts-table td .completed {
    padding: 4px 0;
    text-align: center;
    width: 90%; }

  #pc-table_wrapper {
    display: none; }

  #mobile-table_wrapper {
    margin-top: 5px;
    display: block;
    margin-bottom: 50px; } }

/*# sourceMappingURL=contacts.css.map */