@charset "utf-8";
/* CSS Document */
/* com2zoa design KYJ 26.01.22 */

/** 조직 장 안내 **/
.gmem_leader{margin-bottom:30px}
.gmem_leader .gmem_lead{position: relative; padding: 10px; border-radius: 10px; border:1px solid #ddd; text-align: center; box-sizing: border-box}
.gmem_leader .gmem_lead::after{display: block; clear: both; content: ''; position: absolute; left:50%; width: 1px; height: 41px; background: #ddd}
.gmem_leader .gmem_lead .gmem_posi{padding: 10px;border-radius: 8px; background: #ddd; color:#fff; font-weight: 600}
.gmem_leader .gmem_lead .gmem_name{padding: 13px 0; border-bottom: 1px solid #ddd; font-weight: 600}
.gmem_leader .gmem_lead .gmem_work{padding: 13px 0}
.gmem_leader .gmem_lead .gmem_call{padding: 10px; border-radius: 8px; background: #f3f3f3}
.gmem_leader .gmem_lead .gmem_call span{font-weight: 600}
/*원장*/
.gmem_lead.gmem_lead01{max-width: 360px; margin: 0 auto}
.gmem_lead.gmem_lead01::after{bottom:-41px}
.gmem_lead.gmem_lead01 .gmem_posi{background: linear-gradient(90deg, #415b6c 0, #698ea6 100%)}
/*부장*/
.gmem_leadwrap{position: relative; display: flex; flex-wrap:wrap; gap:20px; margin-top: 40px; padding-top: 40px; border-top:1px solid #d9d9d9}
.gmem_leadwrap::before,
.gmem_leadwrap::after{display: block; clear: both; content: ''; position: absolute; top:-1px; height: 1px; background: #fff}
.gmem_leadwrap::before{left:0; width: 12%}
.gmem_leadwrap::after{right:0; width: 11.8%}
.gmem_leadwrap .gmem_lead{flex: 1; min-width: 220px}
.gmem_leadwrap .gmem_lead::after{top:-41px}
.gmem_leadwrap .gmem_lead:first-child .gmem_posi{background: #4b7d9d}
.gmem_leadwrap .gmem_lead:nth-child(2) .gmem_posi{background: #43a3b7}
.gmem_leadwrap .gmem_lead:nth-child(3) .gmem_posi{background: #33a294}
.gmem_leadwrap .gmem_lead:nth-child(4) .gmem_posi{background: #418dc2}

/** 부서별 바로가기 **/
.gmem_tabnavi{margin-bottom:30px}
.gmem_tabnavi .gmem_tabbox{padding: 15px; border-radius: 10px; background: #f7f7f7}
.gmem_tabnavi .gmem_tabbox ul{display: flex; flex-wrap: wrap; gap:15px}
.gmem_tabnavi .gmem_tabbox ul li{flex: 1;   min-width: 150px}
.gmem_tabnavi .gmem_tabbox ul li a{display: block; width: 100%; height: 100%; padding:15px 10px; border-radius: 5px; background: #fff; line-height: 150%; text-align: center; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1); box-sizing: border-box}
.gmem_tabnavi .gmem_tabbox ul li a:hover{font-weight: 700; color:#4b6577}

/** 팀정보 **/
.gmem_wrap h4.part_tit{display:inline-block; padding:12px 20px 12px 50px; margin-bottom:15px; border-radius:50px; background:url(../../site/images/sub/ico_partmem.png) no-repeat left 20px center #4b6577; text-align:left; color:#fff}
.gmem_wrap h4.part_tit a:hover{color:#fff}
.gmem_wrap h4:nth-of-type(1) {background-color: #4b7d9d}
.gmem_wrap h4:nth-of-type(2) {background-color: #43a3b7}
.gmem_wrap h4:nth-of-type(3) {background-color: #33a294}
.gmem_wrap h4:nth-of-type(4) {background-color: #418dc2}
.gmem_wrap h5.team_tit{padding-left:30px; margin-bottom:15px; background:url(../../site/images/sub/ico_parttit.png) no-repeat left center; font-size:1.067em}
.gmem_wrap table .tel_btn{display:none}
/*장 수정*/
.gmem_name a.member_modi{display:block; width:50px; margin:5px auto 0; border-radius:50px; background:#4b6577; color:#fff; font-size:13px; transition: all .3s}
.gmem_name a.member_modi:hover{background:#ff4444}
/*팀 수정*/
.gmem_wrap a.member_modi{display:block; width:50px; margin:5px auto 0; border-radius:50px; background:#4b6577; color:#fff; font-size:13px; transition: all .3s}
.gmem_wrap a.member_modi:hover{background:#ff4444}

/** 직원관리 버튼 **/
#bt_list .btn_box{margin-left: auto; width: fit-content}
#bt_list .btn_box button.btn_member{ min-width:200px; padding:12px; border-radius:5px; background:#4b6577; font-size:1.067em; color:#fff; transition: all .3s}
#bt_list .btn_box button.btn_member:hover{background:#ff4444}

/* 직원정보 수정 (기존스타일에서 수정진행) */
#sub_d_tb {width:830px; margin-left:20px;}
#member_layer {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index:999; background: rgba(0, 0, 0, 0.6); min-width: 320px; background: url(../../images/depart/layer_bg.png) 0 0 repeat}
#member_layer .member_wrap { width: 90%; max-width:800px; min-width: 300px; margin: 15% auto 0 auto; background: #fff; position: relative;/* overflow-y: scroll; */ border-radius:10px; box-shadow:0 3px 10px rgba(0, 0, 0, 0.5);}
#member_layer .topArea {position: relative}
#member_layer .topArea h4 {font-size:1.538em; background:#4b6577; font-weight:600; padding:20px 15px;  border-radius:8px 8px 0 0; text-align:center; color:#fff}
#member_layer .topArea .btn_close {position:absolute; top:15px; right:10px}
#member_layer .topArea .btn_close button {width:83px; height:45px; text-indent:-9999px; overflow:hidden; font-size:0; line-height:0; background: url(../../images/depart/btn_layerclose.png) no-repeat 50% 50%}
#member_layer .member_box {margin:15px 20px; padding-bottom:15px; border-bottom:2px solid #ddd;}
#member_layer .member_form > li {padding-top: 10px;line-height:160%}
#member_layer .member_form > li:first-child {border:0}
#member_layer .input_row {display:flex; width:100%}
#member_layer .input_row:after {content:""; clear:both; display:block; height:0; visibility:none;}
#member_layer .input_row dt {margin-bottom: 0; align-content:space-around; width: 14%; min-width:90px; margin-right:10px; float: left; position: relative; background:#4b6577; padding:7px 0; font-size:1.067em; text-align:center; color:#fff; border-radius:5px}
#member_layer .input_row dd {float:left; width:100%}
#member_layer .area_workbox {display:block; width:100%; background:#fff; border:1px solid #ddd; color:#222; height:150px; padding:4px; box-sizing:border-box}
#member_layer .input_base {border: 1px solid #d9d9d9; display: block; background: #fff; height:30px}
#member_layer .input_base input {border: 0; color: #222; font-size: 1.077em; background: none}
#member_layer .txt {margin-top:2px; color:#8c8c8c; font-size:1.077em}
#member_layer .ct_bottom {max-width:270px; margin:0 auto; padding-bottom:20px; text-align:center}
#member_layer .ct_bottom button {width:45%; padding:10px 0; font-size:1.154em;
border-radius:50px; color:#fff}
#member_layer .ct_bottom button.ct_bt_btn01 {background:#f6532d}
#member_layer .ct_bottom button.ct_bt_btn02 {background:#a0a0a0}
#member_layer .member_box {margin:15px 20px; padding-bottom:20px; background:url(../../site/images/sub/line_tit.gif) repeat-x left bottom}


/**** MOBILE LAYOUT ****/
@media only screen and (max-width:1024px) {
/** 직원관리 버튼 **/
#bt_list .btn_box{width:100%}
#bt_list .btn_box button.btn_member{width:100%}
}


/**** PC LAYOUT ****/
@media only screen and (min-width:1025px) {
/* 직원정보 수정 (기존스타일에서 수정진행)  */ 
#member_layer .area_wokrbox {width:100%; min-height:150px; width:100%}
#member_layer .input_base {border: 1px solid #d9d9d9; display: block; background: #fff; height:34px; width:100%}
#member_layer .input_base input {border: 0; width: 100%; color: #222; font-size: 1.077em; background: none}
#member_layer .ct_bottom {max-width:300px}
}



/**** LOWSET FIX ****/
@media only screen and (max-width:1300px) {
/** 조직 장 안내 **/
.gmem_leadwrap{margin-top: 20px; padding-top: 20px}
.gmem_leadwrap::before{left:0; width: 24.4%}
.gmem_leadwrap::after{right:0; width: 24.3%}
.gmem_leader .gmem_lead::after{height: 20px}
/*원장*/
.gmem_lead.gmem_lead01{max-width: 360px; margin: 0 auto}
.gmem_lead.gmem_lead01::after{bottom:-20px}
/*부장*/
.gmem_leadwrap .gmem_lead{flex: auto; width:calc(100% / 2 - 20px)}
.gmem_leadwrap .gmem_lead::after{top:-20px}

/** 팀정보 **/
.gmem_wrap table .tel_btn{display:block}
.gmem_wrap table .tel_txt{display:none}

}

@media only screen and (max-width:495px) {
/** 조직 장 안내 **/
.gmem_leadwrap{margin-top: 20px; padding-top: 0; border-top:0} 
/*원장*/
.gmem_lead.gmem_lead01{max-width: 100%; margin: 0 auto}
}