@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";

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

/* board */
@import "../../component/pop-style";



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

.label-list {
  display: flex; gap: 5px; padding-top: 5px; flex-wrap: wrap;
  li {
    display: inline-block; background: #ebedf4; padding: 5px 10px; font-size: 1.3rem; border-radius: 3px; cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
    span {
      font-size: 1.3rem; padding-left: 5px;
    }
  }
}

.form-wrap .vertic-table table {
  .file-input {
    >.label {
      font-size: 1.3rem; color: #333; white-space: nowrap; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; margin-left: 0; top: 0; padding: 0 55px 0 0;
    }
    >.label.empty {
      color: #888; opacity: .5;
    }
  }
}

.file-input {
	display: inline-block; text-align: left; width: 700px; max-width: 100%; position: relative; padding-left: 10px; font-size: 1.2rem; line-height: 40px; vertical-align: middle; background-color: #fff; cursor: pointer; border: 1px solid var(--line-color); font-weight: 400; border-radius: 5px; margin-top: 7px;
	>input[type='file'] {
		position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 301; cursor: pointer; margin-top: 0 !important;
	}
	>.button {
		display: inline-block; padding: 0; font-size: 1.2rem; vertical-align: top; background-color: #1f1f1f; cursor: pointer; border: 1px solid #1f1f1f; border-bottom-color: #1f1f1f; border-radius: 4px; font-weight: 400; color: #fff; height: 42px; border-top-left-radius: 0; border-bottom-left-radius: 0; position: absolute; z-index: 2; top: -1px; right: -1px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; width: 70px; text-align: center; line-height: 40px;
	}
	&:hover {
		>.button {
			background: #000; color: #fff; border-color: #000;
		}
	}
}
.file-row {
	&:not(:first-child) {
		margin: 5px 0 0;
	}
}
.down-file-wrap {
	margin-top: 20px;
	a.file {
		height: 40px; display: inline-block; margin: 2.5px 2.5px 2.5px 0; height: 100%; border: 1px solid #d1dae6; border-radius: 50px; padding: 5px 20px 5px 40px; font-size: 1.4rem; position: relative; background: #f7f7f7; line-height: 20px;
	}
	a {
		&:hover {
			background: #F0F0F0;
		}
		&:before {
			position: absolute; content: ''; width: 16px; height: 16px; background: url('../../../../../img/sub/linc/common/down_icon.svg'); background-size: 16px 16px; left: 16px; top: 7px; opacity: .6;
		}
	}
}

.flex-layout {
  display: flex; gap: 5px; align-items: center;
}

.w-80px {
  width: 80px !important; max-width: 85%;
}
.w-100px {
  width: 100px !important; max-width: 85%;
}
.w-200px {
  width: 200px !important; max-width: 85%;
}
.w-300px {
  width: 300px !important; max-width: 85%;
}

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

@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; 
      }
    }
  }
}