@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display: block;}
ol, ul {list-style: none;}
br{opacity: 0;}

/*******************************************************************
default
********************************************************************/
html, body {height: 100%; position: relative;}


input[type1button], input[type=text], input[type=image], input[type=submit], textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

textarea {overflow: hidden;}
textarea.content{
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
        box-sizing: border-box;
}

/* IE6 */
:first-child + html .clearfix {zoom: 1;}

/* IE7 */
.hide, .hidden, .blind, caption, legend {
  opacity: 0;
  text-indent: -999em;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}

.clearfix:after {
  display: block;
  clear: both;
  content: '';
}

* html .clearfix {zoom: 1;}

/* 뷰표트 변환시 폰트크기 자동확대 방지 */
body {
  -webkit-text-size-adjust: none;
}

input[type='text'], input[type='password'], input[type='submit'], input[type='search'] {
  -webkit-appearance: none;
  border-radius: 0;
}

input[type='date'] {
  background-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a:active, a:hover {
  text-decoration: none;
}

address, caption, cite, code, dfn, em, var {
  font-style: normal;
  font-weight: normal;
}

input, select, textarea, button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

button{
    background: transparent; border:none;
    box-shadow:none; border-radius:0;
    padding:0; overflow:visible; cursor:pointer ;
}


select::-ms-expand {
  display: none;
}

input[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}

input[type=submit], input[type=button], button {
  cursor: pointer;
}

input[type=checkbox], input[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}

input[type=checkbox] {
  /* position: static !important; */
  vertical-align: middle;
}

input[type=checkbox] + label:before {
  display: none;
}

/* input 기본 스타일 초기화 */
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear {
  display: none;
}

/* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Select box 스타일 초기화 */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* IE 에서 Select box 화살표 제거 */
select::-ms-expand {
  display: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}


html {
  font-family: 'Arita', 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', Dotum, Arial, sans-serif;
  font-size: 10px;
  line-height: 1.5;
}

html, body, h1, h2, h3, h4, h5, h6, strong, table th, input, textarea, select, button {
  font-weight: 400;
  font-size: inherit;
  color: #000;
  letter-spacing: -0.5px;
  margin: 0;
  padding: 0;
}

/* font */
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/NotoSansKR-Black.woff) format("woff2"),
        url(../fonts/NotoSansKR-Light.woff) format("woff"),
        url(../fonts/NotoSansKR-Light.otf) format("opentype");
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/NotoSansKR-Regular.woff2) format("woff2"),
        url(../fonts/NotoSansKR-Regular.woff) format("woff"),
        url(../fonts/NotoSansKR-Regular.otf) format("opentype");
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/NotoSansKR-Medium.woff2) format("woff2"),
        url(../fonts/NotoSansKR-Medium.woff) format("woff"),
        url(../fonts/NotoSansKR-Medium.otf) format("opentype");
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/NotoSansKR-Bold.woff2) format("woff2"),
        url(../fonts/NotoSansKR-Bold.woff) format("woff"),
        url(../fonts/NotoSansKR-Bold.otf) format("opentype");
}

@font-face {
    font-family: 'Arita';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/Arita-Bold.woff2) format("woff2"),
        url(../fonts/Arita-Bold.woff) format("woff"),
        url(../fonts/Arita-Bold.otf) format("opentype");
}
@font-face {
    font-family: 'Arita';
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/Arita-SemiBold.woff2) format("woff2"),
        url(../fonts/Arita-SemiBold.woff) format("woff"),
        url(../fonts/Arita-SemiBold.otf) format("opentype");
}
@font-face {
    font-family: 'Arita';
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/Arita-Medium.woff2) format("woff2"),
        url(../fonts/Arita-Medium.woff) format("woff"),
        url(../fonts/Arita-Medium.otf) format("opentype");
}


/* Display */
::placeholder {color: #ddd !important; letter-spacing: -2px;}

/* Buttons */
.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* 
[class*=btn_] + [class*=btn_] { margin-left: 5px; }
a[class*=btn_], button[class*=btn_] {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-sizing: border-box; box-sizing: border-box;
    height: 30px; width: 95px; border-radius: 4px;
    font-size: 1.2rem; text-align: center; font-weight: 700;
}
a[class*=btn_].small, button[class*=btn_].small { width: 70px; height: 30px; line-height: 30px; }
a[class*=btn_].large, button[class*=btn_].large { width: 100%; height: auto; }
 */


/* Width */
.w20{width:20px!important}
.w30{width:30px!important}
.w40{width:40px!important}
.w50{width:50px!important}
.w60{width:60px!important}
.w70{width:70px!important}
.w80{width:80px!important}
.w90{width:90px!important}
.w100{width:100px!important}
.w110{width:110px!important}
.w120{width:120px!important}
.w130{width:130px!important}
.w200{width:200px!important}
.fs0{font-size:0!important}
.fs11{font-size:11px!important}
.fs12{font-size:12px!important}
.fs13{font-size:13px!important}
.fs14{font-size:14px!important}
.fs15{font-size:15px!important}
.fs16{font-size:16px!important}
.fs17{font-size:17px!important}
.fs18{font-size:18px!important}
.fs19{font-size:19px!important}
.fs20{font-size:20px!important}
.mb0{margin-bottom:0!important}
.mb5{margin-bottom:5px!important}
.mb10{margin-bottom:10px!important}
.mb15{margin-bottom:15px!important}
.mb20{margin-bottom:20px!important}
.mb25{margin-bottom:25px!important}
.mb30{margin-bottom:30px!important}
.mb35{margin-bottom:35px!important}
.mb40{margin-bottom:40px!important}
.mb45{margin-bottom:45px!important}
.mb50{margin-bottom:50px!important}
.mb100{margin-bottom:100px!important}
.mr0{margin-right:0!important}
.mr5{margin-right:5px!important}
.mr10{margin-right:10px!important}
.mr15{margin-right:15px!important}
.mr20{margin-right:20px!important}
.mr25{margin-right:25px!important}
.mr30{margin-right:30px!important}
.mr35{margin-right:35px!important}
.mr40{margin-right:40px!important}
.mr45{margin-right:45px!important}
.mr50{margin-right:50px!important}
.ml0{margin-left:0!important}
.ml5{margin-left:5px!important}
.ml10{margin-left:10px!important}
.ml15{margin-left:15px!important}
.ml20{margin-left:20px!important}
.ml25{margin-left:25px!important}
.ml30{margin-left:30px!important}
.ml35{margin-left:35px!important}
.ml40{margin-left:40px!important}
.ml45{margin-left:45px!important}
.ml50{margin-left:50px!important}
.mt0{margin-top:0!important}
.mt5{margin-top:5px!important}
.mt10{margin-top:10px!important}
.mt15{margin-top:15px!important}
.mt20{margin-top:20px!important}
.mt25{margin-top:25px!important}
.mt30{margin-top:30px!important}
.mt35{margin-top:35px!important}
.mt40{margin-top:40px!important}
.mt45{margin-top:45px!important}
.mt50{margin-top:50px!important}
.p0{padding:0!important}
.p5{padding:5px!important}
.p10{padding:10px!important}
.p20{padding:20px!important}
.p30{padding:30px!important}
.pt5{padding-top:5px!important}
.pt10{padding-top:10px!important}
.pt15{padding-top:15px!important}
.pt20{padding-top:20px!important}
.pl5{padding-left:5px!important}
.pl10{padding-left:10px!important}
.pl15{padding-left:15px!important}
.pl20{padding-left:20px!important}
.pr5{padding-right:5px!important}
.pr10{padding-right:10px!important}
.pr15{padding-right:15px!important}
.pr20{padding-right:20px!important}
.pb5{padding-bottom:5px!important}
.pb10{padding-bottom:10px!important}
.pb15{padding-bottom:15px!important}
.pb20{padding-bottom:20px!important}

/* .wrap{width:100%;overflow-x:hidden} */

.no_scroll{overflow:hidden}
.text_indent{text-indent:-9999px}
.text_hide{position:absolute;left:-999em}
.ly_mt_sm{display:block;margin-top:1em}
.ly_mt_md{display:block;margin-top:2em}
.ly_mt_lg{display:block;margin-top:3em}
.br_m{display:none}
.br_pc{display:block}




/* 체크박스 공통 */
.checks_edit{
    display: inline-flex;
    height: 100%;
    align-items:center;
}

.custom_radio{
    position: relative;
    display: inline-block;
    vertical-align: top;
}

/* 실제 체크박스는 화면에서 숨김 */
.custom_radio input[type=radio] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.custom_radio label{
    display: inline-block;
    position: relative;
    padding-left: 18px; /* 글자와 체크박스 사이의 간격을 변경 */
    cursor: pointer;
    user-select: none;
}
.custom_radio label::after { /* 가짜 체크박스 */
    content: '';
    position: absolute;
    left: 0;
    top: 0; /* 이 값을 변경해서 글자와의 정렬 */
    width: 18px; /* 체크박스의 너비를 지정 */
    height: 18px; /* 체크박스의 높이를 지정 */
    line-height: 18px; /* 세로정렬을 위해 높이값과 일치 */
    text-align: center;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.custom_radio input[type=radio]:checked + label::before{
    content: '';
    position: absolute; z-index: 10;
    left: 4px;
    top: 4px; /* 이 값을 변경해서 글자와의 정렬 */
    width: 10px; /* 체크박스의 너비를 지정 */
    height: 10px; /* 체크박스의 높이를 지정 */
    line-height: 10px; /* 세로정렬을 위해 높이값과 일치 */
    text-align: center;
    background: #333;
    border-radius: 20px;
    box-sizing: border-box;
}
.custom_check{
    display: inline-flex;
    height: 100%;
    align-items:center;
}

input[type="checkbox"] {
    display: inline-block;
    width: 16px !important;
    height: 16px !important;
}






/* custom select */
.custom_select {
    position: relative;
    z-index: 1;
    width: 265px;
    height: 45px;
    display: inline-block;
    background: transparent;
    vertical-align: top;
}
.custom_select select {
    padding: 0 10px;
    width: 100%;
    height: 100%;
    font-size: 16px;
    border: 1px solid #ccc;
    vertical-align: top;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    opacity: 1;
}
.custom_select:after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    height: 7px;
    width: 7px;
    -webkit-transform: translateY(-50%) rotate(-45deg);
            transform: translateY(-50%) rotate(-45deg);
    border-bottom: 2px solid #7f8084;
    border-left: 2px solid #7f8084;
}

@media screen and (max-width: 800px) {
    .custom_select {width: 100%;}
}


body{background-color: #f5f5f5; color: #505f7a;}


.gic1{color: #2784ff;} /*근무중*/
.gic1_bg{background-color: #2784ff;} /*근무중*/
.gic2{color: #00b8d9;} /*외출*/
.gic2_bg{background-color: #00b8d9;} /*외출*/
.gic3{color: #36b37e;} /*출장*/
.gic3_bg{background-color: #36b37e !important;} /*출장*/
.gic4{color: #ffb400;} /*휴가*/
.gic4_bg{background-color: #ffb400;} /*휴가*/


/* 직원검색 */
.bl1_bg{background-color: #43a5fd !important;}
.bl2_bg{background-color: #0054a0 !important;}
.bl3_bg{background-color: #505f7a !important;}
.bl4_bg{background-color: #799ed5 !important;}
.bl5_bg{background-color: #50607a !important;}

/* 50607a */



/* modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed; z-index: 10;  left: 0; top: 0;
    width: 100%; height: 100%; overflow: auto;
    background-color: rgba(0,0,0,0.4);
    font-family: 'Arita';
    -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.modal .modal-content {
    position: relative; 
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    width: 90%; border-radius: 30px; background-color: #fff;
}
.modal .close {
    position: absolute; top: -30px; right: -30px;
    width: 100px; height: 100px;
    font-size: 0; cursor: pointer; vertical-align: top;
    background-color: #fff;
    border: 2px solid #505f7a; border-radius: 50px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.modal .close:before{content:''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 70px; height: 10px; background-color: #505f7a; border-radius: 10px;}
.modal .close:after{content:''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(135deg); width: 70px; height: 10px; background-color: #505f7a; border-radius: 10px;}


/* modal-profile */
.modal-profile {padding: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 0; color: #333;}
.modal-profile .profile-img{display: inline-block; vertical-align: top;}
.modal-profile .profile-img > div{display: block; width: 100%; margin-top: 30px; text-align: center;}
.modal-profile .profile-img strong{display: inline-block; padding: 0 60px; font-size: 80px; line-height: 95px; font-weight: 700; color: #fff; border-radius: 80px; text-align: center;}
.modal-profile .profile-img img{width: 350px; height: 350px; border-radius: 30px; overflow: hidden; background-color: #eff0f5;}
.modal-profile ul{float: right; display: inline-block; width: 550px;}
.modal-profile ul li{display: block; width: 100%; vertical-align: top;}
.modal-profile ul li+li{margin-top: 25px;}
.modal-profile .profile-tit{display: inline-block; width: 125px; font-size: 50px; line-height: 60px;}
.modal-profile .profile-desc{display: inline-block; width: calc(100% - 125px);  font-size: 60px; line-height: 60px; font-weight: 700; vertical-align: top;}
.modal-profile .profile-desc em{
    display: -webkit-box;
    /* height: 120px; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 700;
}

/* 세로 직원검색결과 */
.col .stf-searchresult{width: 85%;}
.col .stf-searchresult .modal-content{width: 100%;}
.col .modal-profile .profile-img img{width: 300px; height: 300px;;}
.col .stf-searchresult .modal-profile{padding: 40px 50px;}
.col .modal-profile .profile-tit{font-size: 40px; line-height: 50px;}
.col .modal-profile .profile-desc{font-size: 50px; line-height: 50px; font-weight: 700; vertical-align: top;}
.col .modal-profile .profile-img strong{font-size: 60px;}
.col .modal-profile .profile-desc em{height: 100px;}
.col .modal-profile ul{width: 420px;}
.col .modal-profile ul li+li{margin-top: 20px;}






/* 부서안내, 종합안내도 부서검색  ->> 부서의 조직도 */
.group{padding: 60px 0; height: 915px; overflow-y: scroll;-ms-overflow-style: none; scrollbar-width: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.group::-webkit-scrollbar {display: none;}
.boxg{width: 200px; margin: 0 auto; background-color: #fff; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.2); cursor: pointer; color: #000; vertical-align: top;}
.boxg:after{content:''; display: block; clear: both;}
.boxg .group_head{
    height: 35px;
    font-size: 16px; line-height: 35px; font-weight: 600; text-align: center; color: #fff;
    background-color: #505f7a; border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.boxg .boxg_wrap{height: 85px; padding: 12px 12px 0 12px; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.boxg .group_img{float: left; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; background-color: #e4e3e9;}
.boxg .group_img img{width: 100%; height: 100%;}
.boxg .group_cont{width: 100px; float: right;}
.boxg .group_tit{padding-bottom: 3px; font-size: 16px; line-height: 1;}
.boxg .group_rank{font-weight: 500;}
.boxg .group_name{font-weight: 700;}
.boxg .group_onf em{font-size: 16px; line-height: 1.6; font-weight: 600;}

.boxg .group_desc{
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 13px; line-height: 1.3; font-weight: 700;
}

.group_first{display: block; width: 100%; }
.group_first.boxg_section1{padding-top: 0; padding-bottom: 35px;}
.group_first.boxg_section1:before{top: auto; bottom: 0; background-color: #b9bfc8;}

.group_first .boxg{width: 270px; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.group_first .boxg .group_head{width: 100%; height: 40px; margin: 0 auto; font-size: 24px; line-height: 40px; background-color: #36b37e;}
.group_first .boxg .boxg_wrap{height: 100px; padding: 13px 25px 0 25px;}
.group_first .boxg .group_img{width: 75px; height: 75px;}
.group_first .boxg .group_cont{width: 125px;}
.group_first .boxg .group_tit{font-size: 20px;}
.group_first .boxg .group_onf em{font-size: 20px;}
.group_first .boxg .group_desc{font-size: 16px;}

.group.team .boxg_section1{padding-top: 0; padding-bottom: 35px;}
.group.team .boxg_section1:before{top: auto; bottom: 0;}




.boxg_section{position: relative; width: 420px; margin: 16px auto 0; font-size: 0; z-index: 10;}
.boxg_section .boxg + .boxg{margin-top: 10px;}

/* 추가 */
.boxg_section:before{
    content:'';
    position: absolute; top: -16px; left: 50%; z-index: -1; transform: translateX(-50%);
    width: 3px; height: 32px; background-color: #b9bfc8;
}
.boxg_section1:before{
    left: 50%; transform: translateX(-50%);
}
.boxg_section2:before{height: 16px; top: -16px;}


.boxg_section1{
    position: relative;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    padding-top: 35px;
}
.boxg_section1:before{ content: ''; position: absolute; top: 0; width: 3px; height: 35px; background-color: #b9bfc8;}



.boxg_section2{width: 420px; font-size: 0;}
.boxg_section2 .boxg{display: inline-block; margin: 0 5px 10px 5px;}
.boxg_section2 .boxg + .boxg{margin-top: 0;}

.bar1{display: block; width: 100%; height: 32px; background: url(../images/gi_bar1.png) no-repeat; background-position: center;}
.boxg_section b{display: block; width: 100%; height: 16px;}
.boxg_section2 b{display: block; width: 100%; height: 16px; background: url(../images/dpt_bar2_new.png) no-repeat; background-position: center;}


.group > ul{
    position: relative;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center;-ms-flex-pack: center; justify-content: center;
}
.group > ul:before{content:''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 3px; background-color: #b9bfc8;}
.group > ul li{display: inline-block; vertical-align: top; text-align: left;}
.group1 > ul:before{width: 0;}
.group2 > ul:before{width: 25.4%;}
.group3 > ul:before{width: 50.8%;}
.group4 > ul:before{width: 76%;}
.group5 > ul:before{width: 79.2%;}
.group6 > ul:before{width: 80.3%;}
.group7 > ul:before{width: 87.7%;}

.group5 .boxg_section{width: 324px;}
.group6 .boxg_section{width: 260px;}
.group7 .boxg_section{width: 235px;}

.group5 .boxg_section b{display: none;}
.group6 .boxg_section b{display: none;}
.group7 .boxg_section b{display: none;}





/* 종합안내도 가로 */
.row .modal-dep .group1 > ul:before{display: none;}

.row .modal-dep .group2 > ul:before{width: 528px;}
.row .modal-dep .group2 .boxg_section{width: 420px;}

.row .modal-dep .group3 > ul:before{width: 928px;}
.row .modal-dep .group3 .boxg_section{width: 420px;}

.row .modal-dep .group4 > ul:before{width: 1034px;}
.row .modal-dep .group4 .boxg_section{width: 290px;}

.row .modal-dep .group5 > ul:before{width: 1140px;}
.row .modal-dep .group5 .boxg_section{width: 290px;}

.row .modal-dep .group6 > ul:before{width: 1220px;}
.row .modal-dep .group6 .boxg_section{width: 240px;}

.row .modal-dep .group7 > ul:before{width: 1257px;}
.row .modal-dep .group7 .boxg_section{width: 210px;}





/* 종합안내도 세로 */
.col .modal-dep .group .boxg_section{width: 160px;}
.col .modal-dep .group > ul li .boxg{width: 160px;}

.col .modal-dep .group1 > ul:before{display: none;}

.col .modal-dep .group2 > ul:before{width: 23%;}
.col .modal-dep .group3 > ul:before{width: 46%;}
.col .modal-dep .group4 > ul:before{width: 69%;}
.col .modal-dep .group5 > ul:before{width: 76%;}

.col .modal-dep .group6 > ul:before{width: 81.5%;}
.col .modal-dep .group6 .boxg_section{width: 155px;}
.col .modal-dep .group6 > ul li .boxg{width: 155px;}

.col .modal-dep .group7 > ul:before{width: 86%;}
.col .modal-dep .group7 > ul{width: 97%; margin: 0 auto;}
.col .modal-dep .group7 .boxg_section{width: 130px;}
.col .modal-dep .group7 > ul li .boxg{width: 130px;}

.col .boxg_section{width: 100%;}











/* table */
.table{text-align: center;}
.table tr, .table th, .table td{
    padding: 28px 10px; vertical-align: middle;
    font-size: 1.6rem; line-height: 1.7; font-weight: 400; color: #505f7a;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.table thead tr > th, .table tbody tr > td{border-left:  2px solid #f5f5f5; }
.table thead tr, .table thead th{padding: 28px 10px;}
.table thead {display: block; width: 100%; border-bottom: 2px solid #f5f5f5;}
.table thead tr{width: 100%;}
.table tbody {width: 100%;}
.table tbody tr{width:100%; border-bottom: 2px solid #f5f5f5; }
.table tbody tr:last-child{border-bottom: none;}



/* up & down control */
.control{position: absolute; right: 20px; bottom: 0; z-index: 100; width: 65px; height: 610px; font-size: 0;}
.control > div{
    position: absolute; top: 20px; right: 0;
    width: 68px; height: 68px; background-color: #b9bfcb;
    border-radius: 50%; cursor: pointer;
}
.control > div:hover{background-color: #98c5ff;}
.control > div.control-next{top: auto; bottom: 20px; right: 0; transform: rotate(60deg);}
.control > div.control-next .triangle {margin: 8px auto;}
.triangle, .triangle:before, .triangle:after { width: 40px; height: 36px; font-size: 0;}
.triangle {
    overflow: hidden; position: relative; margin: 10px auto; border-radius: 20%;
    transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
} 
.triangle:before, .triangle:after{ position: absolute; background: #fff; pointer-events: auto; content: '';}
.triangle:before {
    border-radius: 20% 20% 20% 53%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
            skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle:after{
    border-radius: 20% 20% 53% 20%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
            skewX(-30deg) scaleY(.866) translateX(24%);
}




/* 팀장이 없을때 teamnone 클래스 추가 */
/* .teamnone .boxg_section:before{display: none;} */
.teamnone .boxg_section1 {height: 115px;}
.teamnone .boxg_section1:before {height: 170px;}
/* .teamnone .boxg_section b{height: 16px;} */
.teamnone .boxg_section2 b{display: block;}







/* 공통 header */
/* 기구조직표(ebd) + 출동통계현황(chart) + 지도맵 + e-book */
.common_header{
    position: relative; height: 180px;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    background-color: #235196;
}
.common_header *{color: #fff;}
.common_header .header_inner{width: 3640px; max-width: 90%; height: 180px; margin: 0 auto;}
.common_header .chart_btn{
    float: left; position: relative; top: 30px;
    display: block; height: 100px;
    padding: 0 30px 0 100px;
    font-size: 45px; line-height: 103px;
    border: 3px solid #fff; border-radius: 20px;
}
.common_header .chart_mline{
    position: absolute; left: 31px; top: 50%;
    transform: translateY(-50%);
    width: 50px; height: auto; 
    cursor: pointer;
}
.common_header .chart_line{
    position: relative;
    width: 50px; height: 5px; 
    margin: 12px 0;
    border-radius: 2px;
    background:#fff;
}
.common_header .chart_menu{
    display: none;
    position: absolute; top: 28px; left: 80px; z-index: 10;
    width: 640px; padding: 20px 0;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    background-color: rgba(19,45,84,0.85);
    border-radius: 20px;
    box-shadow: 2px 5px 22px rgba(0, 0, 0, 0.7);
}
.common_header .chart_menu.show{display: block;}
.common_header .chart_menu li{display: block;}
.common_header .chart_menu li:nth-of-type(1),
.common_header .chart_menu li:nth-of-type(2),
.common_header .chart_menu li:nth-of-type(3),
.common_header .chart_menu li:nth-of-type(4){margin-bottom: 28px;}
.common_header .chart_menu li a{
    display: block;
    margin: 0 20px;
    font-size: 50px; line-height: 100px;
    font-weight: 600; text-align: center;
    border: 3px solid #fff; border-radius: 20px;
    background-color: #235196;
}
.common_header .chart_menu li.on a{border: none; color: #95a4c4;}
.common_header .chart_menu .chart_close{position: relative; margin-top: 42px;}
.common_header .chart_menu .chart_close a{background-color: #333;}
.common_header .chart_menu .chart_close:before{
    content: '';
    position: absolute; top: -20px; left: 0; right: 0;
    width: 100%; height: 2px;
    background-color: #fff;
}
.common_header h1{
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-size: 120px; line-height: 1; font-weight: 700; color: #e4f0ff; letter-spacing: -1px;
}
.common_header .util{position: relative; top: 12px; float: right; text-align: right; letter-spacing: -1px; font-size: 0;}
.common_header .util > *{float: left; height: 180px;}
.common_header .util input{text-align: right; background: transparent; }
.common_header .util p{position: relative; top: 8px;}
.common_header .util p input{font-family: 'Arita'; font-size: 40px; line-height: 180px; font-weight: 100;}
.common_header .util strong{width: 230px;}
.common_header .util strong b{display: inline-block;}
.common_header .util strong b input{width: 100%; font-family: 'Arita'; font-size: 80px; line-height: 180px; font-weight: 600;}


@media screen and (max-width: 1920px) {
    .common_header{height: 90px;}
    .common_header .header_inner{width: 1820px; height: 90px;}
    .common_header .chart_btn{
        top: 15px; height: 50px; padding: 0 15px 0 50px;
        font-size: 22.5px; line-height: 51.5px;
        border: 2px solid #fff; border-radius: 10px;
    }
    .common_header .chart_mline{left: 15.5px; width: 25px; }
    .common_header .chart_line{
        width: 25px; height: 2px; 
        margin: 6px 0;
        border-radius: 2px;
    }
    .common_header .chart_menu{
        top: 14px; left: 40px;
        width: 320px; padding: 10px 0;
        border-radius: 10px;
        box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.7);
    }
    .common_header .chart_menu li:nth-of-type(1),
    .common_header .chart_menu li:nth-of-type(2),
    .common_header .chart_menu li:nth-of-type(3),
    .common_header .chart_menu li:nth-of-type(4){margin-bottom: 14px;}
    .common_header .chart_menu li a{
        margin: 0 10px;
        font-size: 25px; line-height: 50px;
        border: 1.6px solid #fff; border-radius: 10px;
    }
    .common_header .chart_menu .chart_close{ margin-top: 21px;}
    .common_header .chart_menu .chart_close:before{top: -10px; height: 1.5px;}
    .common_header h1{ font-size: 60px; letter-spacing: -1px;}
    .common_header .util{ top: 6px; letter-spacing: -1px;}
    .common_header .util > *{height: 900px;}
    .common_header .util p{top: 4px;}
    .common_header .util p input{font-size: 20px; line-height: 90px;}
    .common_header .util strong{width: 115px;}
    .common_header .util strong b input{font-size: 40px; line-height: 90px;}
}