@import url("sub.css");

/* 회사개요 */
.overview_cont .overview_top{background:url('/company/img/overview_top.jpg') no-repeat center/cover; box-sizing:border-box; text-align:center; padding:140px 5%; margin-bottom: 60px;}
.overview_cont .overview_top h4 {line-height: 130%;}
.overview_cont .overview_top h4 span {line-height: inherit;}

.overview_cont .overview_list{display: flex; flex-wrap:wrap; justify-content:space-between; border-top: 2px solid var(--black);}
.overview_cont .overview_list dl{display:flex; border-bottom: 1px solid var(--border); width: 50%; align-items: center;}
.overview_cont .overview_list dl:last-child {width: 100%;}
.overview_cont .overview_list dl dt{width:250px; padding:20px; flex-shrink: 0; position: relative;}
.overview_cont .overview_list dl dt::after {content: ""; display: block; border-right: 1px solid var(--border); position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 27px;}
.overview_cont .overview_list dl dd{flex: 1; padding:20px; position: relative;}
.overview_cont .overview_list dl dd::after {content: ""; display: block; border-right: 1px solid var(--border); position: absolute; top: 50%; transform: translateY(-50%); right: 0; height: 27px;}
.overview_cont .overview_list dl:nth-child(2n) dd::after {display: none;}
.overview_cont .overview_list dl:last-child dd::after {display: none;}
.overview_cont .overview_list dl ul li {position: relative; padding-left: 9px;}
.overview_cont .overview_list dl ul li + li {margin-top: 3px;}
.overview_cont .overview_list dl ul li::before {content: ""; display: block; width: 3px; height: 3px; background: var(--sub); border-radius: 50%; position: absolute; left: 0; top:13px}

/* 인사말 */
.greeting_cont{display:flex; flex-wrap:wrap; justify-content:space-between; gap: 60px;}
.greeting_cont .txt_area {flex: 1;}
.greeting_cont .txt_area h4 {margin-bottom: 20px; line-height: 130%;}
.greeting_cont .txt_area h4 span {line-height: inherit;}
.greeting_cont .txt_area .fs22 {color: var(--black); opacity: 0.6;}
.greeting_cont .txt_area_body {margin: 35px 0 25px; display: flex; flex-direction: column; gap: 25px;}

.greeting_cont .txt_area .ceo{display: flex; align-items: center; justify-content: flex-end; gap: 5px;}

.greeting_cont .img_area{width: 50%; max-width: 760px; flex-shrink: 0;}
.greeting_cont .img_area img{max-width:100%;}

/* 조직도 */
/* .organ_chart {overflow: hidden;} */
.organ_chart .organ_top {position: relative;}
.organ_chart .organ_top .box_top {background: var(--main); margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; flex-direction: column; padding: 18px; width: 350px}
.organ_chart .organ_top .box_top::after {content: ''; display: block; position: absolute; left: 50%; bottom: -100px; transform: translateX(-50%); height: 100px; border-left: 1px solid #ccc;}
.organ_depth.organ_depth2 {margin: 100px 0; position: relative;}
.organ_depth.organ_depth2 ul {display: flex; justify-content: space-between; position: relative; max-width: 1300px; margin-left: auto; margin-right: auto; gap: 30px;}
.organ_depth.organ_depth2 li {max-width: 240px; text-align: center; width: 100%;}
.organ_depth.organ_depth2 li .box.box1 {background: var(--sub); display: flex; align-items: center; justify-content: center; position: relative; flex-direction: column; padding: 18px; width: 100%;}
.organ_depth.organ_depth2 ul::before {content: ''; display: block; position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); width: calc(100% - 240px); border-bottom: 1px solid #ccc;}
/*.organ_depth.organ_depth2 li .box.box1::before {content: ''; display: block; position: absolute; left: 50%; top: -50px; transform: translateX(-50%); height: 50px; border-left: 1px solid #ccc;}*/
.organ_depth.organ_depth2 li:nth-child(2) .box.box1::after {content: ''; display: block; position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%); height: 50px; border-left: 1px solid #ccc;}
.organ_depth.organ_depth3 {position: relative;}
.organ_depth.organ_depth3::before {content: ''; display: block; position: absolute; top: -50px; left: 120px; width: 80%; border-bottom: 1px solid #ccc;}
.organ_depth.organ_depth3 ul {display: flex; position: relative; justify-content: space-between; width: 100%; gap: 50px;}
.organ_depth.organ_depth3 li.organ_col_manage {width: 240px; flex-shrink: 0;}
.organ_depth.organ_depth3 li.organ_col_design {display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; max-width: 1050px;}
.organ_depth.organ_depth3 li.organ_col_design::before {content: ''; display: block; position: absolute; top: -50px; width: 50%; background-color: var(--white); height: 50px; left: 50%;}
.organ_depth.organ_depth3 .box_dept {background: #cfd2d6; display: flex; align-items: center; justify-content: center; position: relative; padding: 18px;}
.organ_depth.organ_depth3 .box_dept::after {content: ''; display: block; position: absolute; left: 50%; bottom: -60px; transform: translateX(-50%); height: 60px; border-left: 1px solid #ccc;}
.organ_depth.organ_depth3 li.organ_col_manage .box_dept::before {content: ''; display: block; position: absolute; left: 50%; top: -50px; transform: translateX(-50%); height: 50px; border-left: 1px solid #ccc;}
.organ_depth.organ_depth3 li.organ_col_design .box_dept {width: 240px;}
.organ_depth.organ_depth3 li.organ_col_design .box_dept::before {content: ''; display: block; position: absolute; left: 50%; top: -50px; transform: translateX(-50%); height: 50px; border-left: 1px solid #ccc;}
.organ_depth.organ_depth3 li.organ_col_design .box_dept::after {content: ''; display: block; position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%); height: 50px; border-left: 1px solid #ccc;}
.organ_depth.organ_depth3 .box2_wrap {margin-top: 60px; display: flex; flex-direction: column; gap: 10px;}
.organ_depth.organ_depth3 .box2 {background: var(--grayBg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; position: relative; padding: 18px; text-align: center;}

.organ_depth.organ_depth3 .box2:not(:last-child)::after {content: ''; display: block; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); height: 10px; border-left: 1px solid #ccc;}
.organ_depth.organ_depth3 .box3_wrap {margin-top: 100px; display: flex; gap: 30px; width: 100%; align-self: stretch; position: relative;}
.organ_depth.organ_depth3 .box3_wrap::before {content: ''; display: block; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); border-bottom: 1px solid #ccc; width: calc(((100% + 30px) / 4)* 3);}
.organ_depth.organ_depth3 li.organ_col_design .box3_wrap .box3 {text-align: center; width: calc((100% - 90px) / 4); flex-shrink: 0; line-height:1.3;}
.organ_depth.organ_depth3 .box3 {background: var(--white); border: 2px solid var(--main); display: flex; align-items: center; justify-content: center; position: relative; padding: 18px;}
.organ_depth.organ_depth3 li.organ_col_design .box3_wrap .box3::before {content: ''; display: block; position: absolute; left: 50%; top: -51px; transform: translateX(-50%); height: 50px; border-left: 1px solid #ccc;}
.organ_depth.organ_depth3 li.organ_col_design .box2_wrap {margin-top: 30px; flex-direction: row; gap: 30px; width: 100%; align-self: stretch;}
.organ_depth.organ_depth3 li.organ_col_design .box2_wrap .box2 {width: calc((100% - 90px) / 4); flex-shrink: 0; text-align: center;}
.organ_depth.organ_depth3 li.organ_col_design .box2_wrap .box2::before {content: ''; display: block; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); height: 30px; border-left: 1px solid #ccc;}
.organ_depth.organ_depth3 li.organ_col_design .box2_wrap .box2:not(:last-child)::after {display: none;}

/*******************************************************************************
    @media 1740px
*******************************************************************************/
@media all and (max-width:1740px){
/* 인사말 */
.greeting_cont br {display: none;}
}
/*******************************************************************************
    @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){

}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 회사개요 */
.overview_cont .overview_list dl dt {width: 150px; padding: 18px;}
.overview_cont .overview_list dl dd {padding: 18px;}

/* 인사말 */
.greeting_cont .txt_area h4 {font-size: 2.2rem;}

/* 조직도 */
.organ_chart .organ_top .box_top {width: 320px; font-size: 1.5rem; padding: 15px;}

.organ_depth.organ_depth2 li {max-width: 200px;}
.organ_depth.organ_depth2 li .box.box1 {padding: 15px; font-size: 1.111rem;}
.organ_depth.organ_depth2 ul::before {width: calc(100% - 200px);}

.organ_depth.organ_depth3 .box_dept {padding: 15px; font-size: 1.111rem;}
.organ_depth.organ_depth3::before {left: 100px;}
.organ_depth.organ_depth3 li.organ_col_manage {width: 200px;}
.organ_depth.organ_depth3 li.organ_col_design .box_dept {width: 200px;}
.organ_depth.organ_depth3 .box2 {padding: 15px; font-size: 0.9rem;}
.organ_depth.organ_depth3 .box3 {padding: 15px; font-size: 1rem;}

.organ_depth.organ_depth3 .box3_wrap {gap: 15px;}
.organ_depth.organ_depth3 li.organ_col_design .box2_wrap {gap: 15px;}
.organ_depth.organ_depth3 li.organ_col_design .box3_wrap .box3 {width: calc((100% - 45px) / 4);}
.organ_depth.organ_depth3 li.organ_col_design .box2_wrap .box2 {width: calc((100% - 45px) / 4);}
.organ_depth.organ_depth3 .box3_wrap::before {width: calc(((100% + 15px) / 4)* 3);}

}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 회사개요 */
.overview_cont .overview_top {padding: 100px 30px; margin-bottom: 40px;}

.overview_cont .overview_list dl {width: 100%; align-items: stretch;}
.overview_cont .overview_list dl dd::after {display: none;}
.overview_cont .overview_list dl dt::after {height: calc(100% - 36px);}

.overview_cont .overview_list dl ul li::before {top: 11px;}

/* 인사말 */
.greeting_cont {gap: 40px;}
.greeting_cont > div {width: 100% !important; max-width: 100% !important; flex: initial;}

.greeting_cont .txt_area_body {margin: 25px 0 20px; gap: 15px;}

/* 조직도 */
.organ_chart .organ_top .box_top {padding: 12px; font-size: 1.3rem; width: 240px;}
.organ_chart .organ_top .box_top::after {bottom: -60px; height: 60px;}

.organ_depth.organ_depth2 {margin: 60px 0;}
.organ_depth.organ_depth2 ul::before {width: calc(100% - 160px);}
.organ_depth.organ_depth2 li {max-width: 160px;}
.organ_depth.organ_depth2 li .box.box1 {font-size: 1rem; padding: 12px;}
.organ_depth.organ_depth2 li .box.box1::before {height: 30px; top: -30px;}
.organ_depth.organ_depth2 li:nth-child(2) .box.box1::after {height: 30px; bottom: -30px;}

.organ_depth.organ_depth3 li.organ_col_manage {width: 160px;}
.organ_depth.organ_depth3 li.organ_col_design .box_dept {width: 160px;}
.organ_depth.organ_depth3 li.organ_col_manage .box_dept::before {height: 30px; top: -30px;}


.organ_depth.organ_depth3 li.organ_col_design .box_dept::before {height: 30px; top: -30px;}
.organ_depth.organ_depth3 li.organ_col_design .box_dept::after {height: 30px; bottom: -30px;}
.organ_depth.organ_depth3 li.organ_col_design .box2_wrap {gap: 10px; margin-top: 15px;}
.organ_depth.organ_depth3 li.organ_col_design .box3_wrap .box3 {width: calc((100% - 30px) / 4);}
.organ_depth.organ_depth3 li.organ_col_design .box3_wrap .box3::before {height: 30px; top: -32px;}
.organ_depth.organ_depth3 li.organ_col_design .box2_wrap .box2 {width: calc((100% - 30px) / 4);}
.organ_depth.organ_depth3 li.organ_col_design .box2_wrap .box2::before {height: 15px; top: -15px;}

.organ_depth.organ_depth3::before {left: 80px; top: -30px;}
.organ_depth.organ_depth3 .box_dept {padding: 12px; font-size: 1rem;}
.organ_depth.organ_depth3 .box_dept::after {height: 30px; bottom: -30px;}
.organ_depth.organ_depth3 .box2 {padding: 12px;}
.organ_depth.organ_depth3 .box3_wrap {gap: 10px; margin-top: 60px;}
.organ_depth.organ_depth3 .box3_wrap::before {width: calc(((100% + 10px) / 4)* 3); top: -30px;}
.organ_depth.organ_depth3 .box3 {padding: 12px;}


.organ_depth.organ_depth3 .box2_wrap {margin-top: 30px;}

}
/*******************************************************************************
    @media 768px
*******************************************************************************/
@media all and (max-width:768px){
/* 조직도 */
.organ_chart_wrap {overflow-x: auto; position: relative;}
.organ_chart_wrap .responsive-dim.show {display: block;}
.organ_chart {width: 800px;}
}


/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 회사개요 */
.overview_cont .overview_top {padding: 60px 20px; margin-bottom: 30px;}
.overview_cont .overview_top br {display: none;}

.overview_cont .overview_list dl {align-items: stretch;}
.overview_cont .overview_list dl dt {padding: 15px; width: 120px;}
.overview_cont .overview_list dl dt::after {height: calc(100% - 30px);}
.overview_cont .overview_list dl dd {padding: 15px;}
.overview_cont .overview_list dl ul li {padding-left: 8px;}
.overview_cont .overview_list dl ul li + li {margin-top: 2px;}
.overview_cont .overview_list dl ul li::before {top: 9px;}

/* 인사말 */
.greeting_cont .txt_area h4 {margin-bottom: 10px; font-size: 1.8rem;}
.greeting_cont .txt_area_body {margin: 20px 0 15px; gap: 15px;}
}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){
/* 조직도 */
.organ_chart {width: 600px;}
}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){

}