/* CSS Document */
#ul-top {
  background-image: url("../img/03-header.jpg"); }
  #ul-top h2 img {
    width: 45px; }
    @media screen and (max-width: 991px) {
      #ul-top h2 img {
        width: 37px; } }

#members {
  margin-top: 6.5rem;
  margin-bottom: 10rem; }
  @media screen and (max-width: 991px) {
    #members {
      margin-top: 4.5rem;
      margin-bottom: 4rem; } }
  #members h4 img {
    width: 37px; }
  #members #sort {
    margin-top: 6rem;
    margin-bottom: 5rem; }
    @media screen and (max-width: 991px) {
      #members #sort {
        margin-top: 4rem;
        margin-bottom: 3rem; } }
    #members #sort ul .all {
      color: #13ae67; }
    #members #sort ul .eat {
      color: #ffa300; }
      #members #sort ul .eat::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f2e7";
        padding-right: 0.8rem; }
    #members #sort ul .retail {
      color: #a2a2d0; }
      #members #sort ul .retail::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f07a";
        padding-right: 0.8rem; }
    #members #sort ul .service {
      color: #9ad455; }
      #members #sort ul .service::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f007";
        padding-right: 0.8rem; }
    #members #sort ul .manufacturing {
      color: #f47980; }
      #members #sort ul .manufacturing::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f275";
        padding-right: 0.8rem; }
    #members #sort ul .construction {
      color: #66aef8; }
      #members #sort ul .construction::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f552";
        padding-right: 0.8rem; }
    #members #sort ul .wholesale {
      color: #66ccc2; }
      #members #sort ul .wholesale::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f54f";
        padding-right: 0.8rem; }
    #members #sort ul .others {
      color: #a9a9a9; }
    #members #sort ul li {
      font-size: 18px;
      font-size: 1.8rem;
      border: solid 1px #13ae67;
      padding: 0.7rem 2rem 0.5rem 2rem;
      width: 31.9%;
      display: inline-block;
      margin-right: 1rem;
      margin-bottom: 1.5rem;
      transition: 0.2s;
      cursor: pointer; }
      @media screen and (max-width: 1199px) {
        #members #sort ul li {
          width: 31.6%; } }
      @media screen and (max-width: 991px) {
        #members #sort ul li {
          width: 31.7%; } }
      @media screen and (max-width: 767px) {
        #members #sort ul li {
          width: 31.1%;
          font-size: 16px;
          font-size: 1.6rem; } }
      @media screen and (max-width: 575px) {
        #members #sort ul li {
          width: 48.1%;
          padding: 0.5rem 1rem 0.5rem 1rem;
          margin-right: 0.3rem;
          margin-bottom: 0.8rem; } }
      #members #sort ul li:hover {
        background-color: #13ae67;
        color: #fff; }
      #members #sort ul li.is_active {
        background-color: #13ae67;
        color: #fff; }
    #members #sort ul .eat {
      border-color: #ffa300; }
      #members #sort ul .eat:hover {
        background-color: #ffa300;
        color: #fff; }
      #members #sort ul .eat.is_active {
        background-color: #ffa300; }
    #members #sort ul .retail {
      border-color: #a2a2d0; }
      #members #sort ul .retail:hover {
        background-color: #a2a2d0;
        color: #fff; }
      #members #sort ul .retail.is_active {
        background-color: #a2a2d0; }
    #members #sort ul .service {
      border-color: #9ad455; }
      #members #sort ul .service:hover {
        background-color: #9ad455;
        color: #fff; }
      #members #sort ul .service.is_active {
        background-color: #9ad455; }
    #members #sort ul .manufacturing {
      border-color: #f47980; }
      #members #sort ul .manufacturing:hover {
        background-color: #f47980;
        color: #fff; }
      #members #sort ul .manufacturing.is_active {
        background-color: #f47980; }
    #members #sort ul .construction {
      border-color: #66aef8; }
      #members #sort ul .construction:hover {
        background-color: #66aef8;
        color: #fff; }
      #members #sort ul .construction.is_active {
        background-color: #66aef8; }
    #members #sort ul .wholesale {
      border-color: #66ccc2; }
      #members #sort ul .wholesale:hover {
        background-color: #66ccc2;
        color: #fff; }
      #members #sort ul .wholesale.is_active {
        background-color: #66ccc2; }
    #members #sort ul .others {
      border-color: #a9a9a9; }
      #members #sort ul .others:hover {
        background-color: #a9a9a9;
        color: #fff; }
      #members #sort ul .others.is_active {
        background-color: #a9a9a9; }
  #members #members-list table {
    width: 100%; }
    #members #members-list table tr {
      font-size: 18px;
      font-size: 1.8rem;
      border-top: solid 0.5px #333333;
      border-bottom: solid 0.5px #333333; }
      @media screen and (max-width: 767px) {
        #members #members-list table tr {
          font-size: 16px;
          font-size: 1.6rem; } }
      #members #members-list table tr th {
        width: 20%;
        padding: 1rem 2rem 1rem 2rem; }
        @media screen and (max-width: 767px) {
          #members #members-list table tr th {
            width: 27%; } }
        @media screen and (max-width: 575px) {
          #members #members-list table tr th {
            width: 100%;
            display: block;
            padding: 0.5rem 1rem; } }
      #members #members-list table tr td {
        padding: 1rem 2rem 1rem 2rem; }
        @media screen and (max-width: 575px) {
          #members #members-list table tr td {
            width: 100%;
            display: block; } }
        #members #members-list table tr td a {
          color: #000;
          border-bottom: solid 0.5px #000; }
          #members #members-list table tr td a:hover {
            color: #ffa300;
            border-bottom: solid 0.5px #ffa300; }
    #members #members-list table .eat th {
      background-color: #fff6e5;
      color: #ffa300; }
      #members #members-list table .eat th::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f2e7";
        padding-right: 0.8rem; }
    #members #members-list table .retail th {
      background-color: #f6f6fa;
      color: #a2a2d0; }
      #members #members-list table .retail th::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f07a";
        padding-right: 0.8rem; }
    #members #members-list table .service th {
      background-color: #f5fbee;
      color: #9ad455; }
      #members #members-list table .service th::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f007";
        padding-right: 0.8rem; }
    #members #members-list table .manufacturing th {
      background-color: #fef2f2;
      color: #f47980; }
      #members #members-list table .manufacturing th::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f275";
        padding-right: 0.8rem; }
    #members #members-list table .construction th {
      background-color: #f0f7fe;
      color: #66aef8; }
      #members #members-list table .construction th::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f552";
        padding-right: 0.8rem; }
    #members #members-list table .wholesale th {
      background-color: #edf9f8;
      color: #66ccc2; }
      #members #members-list table .wholesale th::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f54f";
        padding-right: 0.8rem; }
    #members #members-list table .others th {
      background-color: #f6f6f6;
      color: #a9a9a9; }
    #members #members-list table th.area1, #members #members-list table th.area2, #members #members-list table th.area3 {
      width: 3em;
      color: #fff;
      background-color: #c1c1c1;
      padding: 0.5rem;
      text-align: center;
      font-weight: 500;
      display: revert; }
      #members #members-list table th.area1::before, #members #members-list table th.area2::before, #members #members-list table th.area3::before {
        display: none; }
    #members #members-list table th.area2 {
      background-color: #b2b2b2; }
      #members #members-list table th.area2::before {
        display: none; }