@charset "utf-8";


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

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

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

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

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

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

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


/* ******************** 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;
    }
  }
}

.list-box {
  display: flex; flex-wrap: wrap; gap: 10px; padding-top: 20px;
  .box {
    background: #fff; border: 1px solid var(--main-color); border-radius: 10px; padding: 30px 10px; text-align: center; flex: 1;
    .img-area {
      width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; margin: 0 auto 12px;
      img {
        width: 100%; height: 100%; object-fit: contain;
      }
    }
    .box-tit {
      font-size: 1.6rem; font-weight: 600; color: var(--main-color); margin-bottom: 12px;
    }
    .box-cont {
      font-size: 1.4rem; font-weight: 400; color: #222; line-height: 1.5;
    }
  }
}

/* 하단 유의/안내 문구 (CEC equipment 등과 동일 패턴) */
.notice-txt {
  margin-top: 7px;
  .txt {
    font-size: 1.2rem; color: #495fb1; line-height: 1.6;
    padding-bottom: 8px;
    &:last-child { padding-bottom: 0; }
  }
}

.diagram {
  width: 100%; height: auto; padding-top: 50px; text-align: center;
  img {
    width: 80%;
  }
}
.table-inner {
  background: #eaeff8; padding: 15px; border-radius: 3px; margin: 5px 0;
  .inner-text {
    display: flex; gap: 5px; align-items: center;
    .inner-tit {
      font-size: 1.3rem; font-weight: 800; color: #4e6cb9;
    }
    .text {
      font-weight: 500;
      .inner-tit {
        margin-right: 10px;
      }
    }
  }
}
.tech-img {
  display: flex; gap: 20px; padding: 10px 0 30px 0;
  .img-area {
    width: calc(50% - 10px);
    img {
      width: 100%; height: auto;
    }
  }
}

.step-area {
	ul {
		display: flex; gap: 15px; flex-wrap: wrap;
		li { 
			text-align: center; font: size 1.5rem;; flex: 1; font-weight: 600; flex: 1;
			div {
				width:100%; padding:10px 0;
			}
			.top {
				background:var(--main-color); color: #fff;
				span { 
					position:relative; top:-1px; font-weight:600; padding:1px 7px 2px 6px; background:#fff; color: var(--main-color); border-radius: 50%;font-size:12px; margin-right:5px; 
				}
			}
			.bottom {
				background:#f8f8f8; border:1px solid #eee; border-top:0; font-weight: 500; line-height: 1.5;
			}
		}
	}
}

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

.process {
  margin:20px 0; 
  &.intro {
    ul {
      li {
        background: #fff; border: 1px solid var(--main-color); border-radius: 10px;
        &.first-li {
          border: 0; border-radius: 0;
          .bottom,
          .top {
            background: #fff; border: 1px solid var(--main-color); border-radius: 10px;
          }
        }
        .title {
          color: var(--main-color);
        }
      }
    }
  }
  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: 119px; height:auto;
      &:nth-child(1) {
        width:30%
      }
      &:nth-child(2) {
        width:15%
      }
      &:nth-child(3) {
        width:15%
      }
      &:nth-child(4) {
        width:20%
      }
      .title {
       font-size: 1.4rem; font-weight: bold; display: block; margin-bottom: 12px;
      }
      .exp {
        font-size: 1.4rem; 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: 1.4rem; letter-spacing: -0.5px; line-height: 1.8;
        }
        .top,
        .bottom {
          background: #f8f8f8; padding:30px 15px;
        }
      }
      &.frist-li {
        div:not(.first-wrap) {
          background:#f8f8f8; padding:30px 10px;
        }
      }
      &.first-li {
        div.bottom {
          margin-top:10px;
        }
      }
    }    
  }
}

.support-program-list {
  ul {
    display: flex; flex-wrap: wrap; border-right: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color);
    li {
      width: 33.33%; background: #fff; border-left: 1px solid var(--line-color); border-top: 1px solid var(--line-color); padding: 30px 20px 90px; position: relative; word-break: keep-all;
      .number {
        font-weight: 800; font-size: 5rem; margin-bottom: 5px; color: #C9C9C9; position: absolute; bottom: 10px; left: 15px; color: #e7e7e7;
      }
      .name {
        font-weight: 700; font-size: 1.8rem; padding-bottom: 15px; position: relative;
      }
      .exp {
        font-size: 1.4rem; line-height: 1.6; position: relative;
      }
      a {
        display: inline-block; font-size: 13px; background: #15284c; color: #fff; height: 30px; line-height: 30px; font-weight: 600; padding: 0 15px; border-radius: 3px; position: absolute; right: 20px; bottom: 20px; transition: background .25s ease;
      }
      .float-btn {
        position: absolute; bottom: 20px; right: 20px;
        a {
          position: static;
        }
      }
    }
  }
}


.intro-dl {
  position: relative; display: flex; gap: 20px; margin-bottom: 20px; border-bottom: 1px dashed #b9b9b9; padding-bottom: 20px;
  dl {
    padding: 30px 90px 30px 20px; flex: 1; background: #f1f1f1; position: relative; border-radius: 10px;
    dt {
      font-weight: 800; font-size: 1.3rem; color: var(--main-color);
    }
    dd {
      padding-top: 10px; font-size: 1.5rem; line-height: 1.6; word-break: keep-all;
      .icon {
        position: absolute; top: 25px; right: 20px; max-width: 70px; max-height: 65px;
      }
    }
  }
}
.application-btn {
  background: var(--main-color); color: #fff; font-size: 1.5rem; border: 1px solid var(--main-color); padding: 12px 0; border-radius: 4px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.1); font-weight: 600; transition: background .25s ease; display: block; text-align: center;
}


@media all and (max-width: 1100px) {
  .diagram {
    img {
      width: 100%;
    }
  }
  .step-area {
    flex-wrap: wrap;
    .step {
      width: calc(50% - 5px);
    }
  }
  .support-program-list {
    ul {
      li {
        width: 50%; border-right: 1px solid #dee3eb; padding: 20px 20px 65px;
        &:nth-child(2n) {
          border-right: 0; border-left: 0;
        }
        .number {
          position: static; font-size: 1.8rem; padding-bottom: 20px; margin: 0; color: #aaa;
        }
        .name {
          padding-bottom: 10px;
        }
        .float-btn {
          left:15px; bottom: 20px;
          a {
            width: 48.5%;
          }
        }
        a {
          left:15px; bottom: 20px; text-align: center;
        }
      }
    }
  }
  .intro-dl {
    dl {
      dt {
        font-size: 1.2rem;
      }
      dd {
        font-size: 1.3rem; line-height: 1.4;
      }
    }
  }
}

@media all and (max-width: 870px){
	.step-area {
		ul {
			gap: 10px;
			li {
				flex: 1 1 25%;
			}
		}
	}
}

@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);
          }
        }
        &:last-child {
          margin-bottom: 0;
        }
      }    
    }
  }
  .application-btn { 
    padding: 10px 0;
  }
  .intro-dl {
    gap: 5px;
    dl {
      padding: 20px 70px 20px 20px;
      dd {
        .icon {
          max-width: 65px; max-height: 55px; right: 15px; top: 15px;
        }
      }
    }
  }
  .support-program-list {
    ul {
      li {
        .float-btn {
          position: static; margin-top: 20px;
          a {
            width: 100%; 
            &:not(:last-child) {
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }
}

@media all and (max-width: 620px) {
  .diagram {
    padding-top: 30px;
  }
  .step-area {
    .step {
      .number {
        width: 21px; height: 21px; padding: 5px; margin-right: 3px;
      }
      .title {
        font-size: 1.4rem;
      }
    }
  }
  .intro-text {
    text-align: left; word-break: keep-all; padding: 15px 20px;
    .text {
      font-size: 1.4rem;
      br {
        display: none; 
      }
    }
  }
}

@media(max-width:500px) {
  .process {
      ul {
        li {
          .title {
            font-size: 1.3rem; margin-bottom: 10px;
          }
        }
      }
    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%;
          }
          .exp {
            font-size: 1.3rem;
          }
        }
      }    
    }
  }
  .support-program-list {
    ul {
      li {
        .number {
          font-size: 1.6rem; padding-bottom: 15px;
        }
        .name {
          font-size: 1.5rem; padding-bottom: 6px;
        }
        .exp {
          font-size: 1.2rem;
        }
        a {
          font-size: 1.2rem;
        }
      }
    }
  }
  .intro-dl {
    flex-direction: column;
  }
  .application-btn {
    font-size: 1.3rem;
  }
  .step-area {
		ul {
			gap: 5px;
			li {
				flex: 1 1 40%;
			}
		}
	}
}

@media all and (max-width: 420px) {
  .support-program-list ul li {
    height: auto;
    a {
      width: 100%;
      .support-program-list ul li {
        float: left; width: 49%; height: 250px; background: #fff; border-left: 1px solid #dee3eb; border-top: 1px solid #dee3eb; padding: 20px; position: relative;
        &:nth-child(2n) {
          border-right: 1px solid #dee3eb;
        }
        &:last-child, &:nth-last-child(2) {
          border-right: 1px solid #dee3eb;
          border-bottom: 1px solid #dee3eb;
        }
        .number {
          font-weight: 800;
          font-size: 20px;
          margin-bottom: 5px;
          color: #C9C9C9;
        }
        .name {
          font-weight: 700; font-size: 18px; margin-bottom: 5px;
        }
        .exp {
          font-size: 13.5px;
        }
        a {
          margin-top: 20px; display: inline-block; font-size: 13px; background: #1686f4; color: #fff; height: 30px; line-height: 30px; font-weight: 300; padding: 0 15px; border-radius: 3px; position: absolute; right: 20px; bottom: 20px; transition: background .25s ease;
          &:hover {
            background: #0068D0;
          }
        }
      
        .float-btn {
          position: absolute; bottom: 20px; right: 20px;
          a {
            position: static;
          }
        }
      }
      right: 0; bottom: 0; position: relative; text-align: center; margin-top: 30px;
    }

    .float-btn {
      width: 100%; right: 0; bottom: 0; position: relative; text-align: center; margin-top: 30px;

      a {
        margin-top: 15px;
      }
    }
  }
}