@charset "utf-8";

/* ******************** default ******************** */

/* 폰트 */
@import "../../../font/NanumSquareNeo.css";

/* root */
@import "../../common/color";

/* mixin */ 
@import "../../mixin/ui-mixin";

/* common */ 
@import "../../common/common";


/* ******************** 공통 요소 ******************** */

/* header */
@import "../../common/header";

/* footer */
@import "../../common/footer";

/* fix-btn */ 
@import "../../common/fixed-btn";


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

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

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

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


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

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

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

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



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

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






.cont-banner {
  background-image: url(../../../img/sub/portal-intro/family/cont_banner.webp); 
}

.intro-wrap {
  .img-wrap {
    &.family {
      width:900px; margin:57px auto 0; height:auto;
      img {
        width:100%; height:100%;
      }
    }
  }
}

@media(max-width:900px) {
  .intro-wrap {
    .img-wrap {
      &.family {
        width:100%;
      }
    }
  }
}

.process {
  margin:20px 0; 
  ul {
    li {
      width: 20%; display: inline-block; background: #f8f8f8; padding: 30px 10px; text-align: center; vertical-align: top; min-height: 130px; position: relative; float: left; margin-right: 6.66%; margin-top: 95px; height:auto;
      &:nth-child(1) {
        width:30%
      }
      &:nth-child(2) {
        width:15%
      }
      &:nth-child(3) {
        width:15%
      }
      &:nth-child(4) {
        width:20%
      }
      .title {
        font-weight: bold; display: block; margin-bottom: 10px;
      }
      .exp {
        font-size: 13px; color: #555; line-height: 18px; display: block;
      }
      &:not(:last-child):after {
        width: 20px; height: 20px; position: absolute; content: ''; background: url("../../../img/sub/portal-intro/double_arrow.svg"); z-index: 2; right: -42px; top: 50%; margin-top: -10px; opacity: .2; 
      }
      &:last-child {
        margin-right:0
      }
      &.first-li {
        background:none; padding: 0; margin-top:0; width:30%; height:auto;
        .exp {
          text-align: left; font-size:12px; letter-spacing: -0.5px;
        }
        .top {
          background: #f8f8f8; padding:30px 15px;
        }
        .bottom {
          background: #f8f8f8; padding:30px 15px;
        }
      }
      &.frist-li {
        div:not(.first-wrap) {
          background:#f8f8f8; padding:30px 10px;
        }
      }
      &.first-li {
        div.bottom {
          margin-top:10px;
        }
      }
    }    
  }
}

@media(max-width:768px) {
  .process {
    margin:20px 0; 
    ul {
      li {
        width: 100%; float: none; margin-right: 0; margin-top: 0; margin-bottom:50px;
        &:nth-child(1) {
          width:100%
        }
        &:nth-child(2) {
          width:100%
        }
        &:nth-child(3) {
          width:100%
        }
        &:nth-child(4) {
          width:100%
        }        
        .exp {
          text-align: center;
        }
        &:not(:last-child):after {
          right:auto; top:auto; bottom:-32px; transform: rotate(90deg);
        }
        &.first-li {
          width:100%;
          .top {
            float:left; width:calc(50% - 5px); margin-right:10px; margin-top:10px;
          }
          .bottom {
            float:left; margin-top:0; min-height:156px;width:calc(50% - 5px);
          }
        }
      }    
    }
  }
}

@media(max-width:500px) {
  .process {
    ul {
      li {        
        &.first-li {
          width:100%;
          .top {
            float:none; width:100%; margin-right:0px; margin-top:10px;
          }
          .bottom {
            float:none; margin-top:0; min-height:auto ; width:100%;
          }
        }
      }    
    }
  }
}