@charset "utf-8";


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

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

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

/* title-style */ 
@import "../../component/title-style.scss";

/* check-style */ 
@import "../../component/check-style.scss";

/* board */
@import "../../component/vertical-table";



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

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

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

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



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

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


.com-cont {
  .content-box {
    margin-bottom: 0;
  }
} 


.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;
    }
  }
}
.diagram {
  width: 100%; height: auto; padding: 25px 0; text-align: center;
  &:last-child {
    padding-bottom: 0;
  }
  .diagram-text {
    position: relative; font-size: 1.5rem; font-weight: 600; padding-bottom: 15px; padding-left: 20px;
    &::before {
      position: absolute; top: 5px; left: 0; content: " "; height: 0; z-index: -1; border-bottom: 6px solid; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); color: #808080; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg);
    }
  }
  &.left {
    text-align: left;
  }
  img {
    width: 80%;
    &.w-100 {
      width: 100%;
    }
    &.w-60 {
      width: 60%;
    }
  }
}


@media all and (max-width: 1100px) {
  .diagram {
    img {
      width: 100%;
    }
  }
}

@media all and (max-width: 620px) {
  .diagram {
    padding-top: 30px;
  }
  .intro-text {
    text-align: left; word-break: keep-all; padding: 15px 20px;
    .text {
      font-size: 1.4rem;
      br {
        display: none; 
      }
    }
  }
}