@charset "utf-8"; 


/* ******************** component ******************** */

/* 컨텐츠 공용 타이틀 */
@import "../../component/title-style";

/* input */ 
@import "../../component/input-style";

/* button */ 
@import "../../component/button-style";



/* ******************** sub-common ******************** */ 

/* sub-banner */ 
@import "../common/_sub-banner";

/* sub-tab */ 
@import "../common/_sub-tab";

/* sub-cont */ 
@import "../common/_sub-cont";

/* ******************** 가족회사 ******************** */

/* banner */ 
@import "./banner";



.intro-text {
  padding: 20px 25px; background: #eef0f3; border-radius: 10px; text-align: center;
  .text {
    font-size: 1.6rem; line-height: 1.8; 
    strong {
      font-weight: 600;
    }
  }
}

.partner-wrap {
  ul {
    display: flex; flex-wrap: wrap; border-top: 1px solid #ddd; border-left: 1px solid #ddd;
    li {
      position: relative;  width: 25%; height: 120px;  border: 1px solid #ddd; border-left: 0; border-top: 0;
      a {
        display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; 
        img {
          width: 80%; height: 100%; object-fit: contain; padding-top: 12px;
        }
      }
      .label {
        position: absolute; left: 0; top: 0; font-size: 1.2rem; font-weight: 600; padding: 6px 15px; border-radius: 0px 0px 10px 0px;
        &.type-01 {
          color: #4f3db5; background: #eaecff;
        }
        &.type-02 {
          color: #53aa12; background: #e6f5e8;
        }
        &.type-03 {
          color: #4189fa; background: #e5f1f9;
        }
      }
    }
  }
}

.diagram {
  width: 100%; height: auto; padding-top: 30px; text-align: center;
  img {
    width: 100%;
  }
}



@media all and (max-width: 1200px) {
  .partner-wrap {
    ul {
      li {
        width: 33.3%;
      }
    }
  }
}


@media all and (max-width: 970px) {
  .partner-wrap {
    ul {
      li {
        width: 50%; height: 120px;
      }
    }
  }
}


@media all and (max-width: 620px) {
  .intro-text {
    text-align: left; word-break: keep-all; padding: 15px 20px;
    .text {
      font-size: 1.4rem;
      br {
        display: none; 
      }
    }
  }
  .partner-wrap {
    ul {
      li {
        .label {
          font-weight: 500; letter-spacing: -1.1px;
        }
        a {
          img {
            max-width: 90%;
          }
        }
      }
    }
  }
}

@media all and (max-width: 400px) {
  .partner-wrap {
    ul {
      li {
        height: 70px;
        .label {
          font-size: 1.0rem;
        }
        a {
          top: 65%;
        }
      }
    }
  }
}