@charset "utf-8";

:root{
    --navi-color:#1F38C1;
    --blue-color:#2680EB !important;
    --red-color:#e61956 !important;
    --yellow-color:#E8661A !important;
    --bg-color:#F2F2F2;
    --border-color:#B7B7B7;

    --bdrdus-20:20px;
    --bdrdus-10:10px;
    --bdrdus-5:5px;

    --ani-1:all 0.2s ease;
}

#wrap { position: relative; width:100%; height:100%; box-sizing: border-box; overflow: hidden;}
.m_t_10 {margin-top:10px;}

/*왼쪽 메뉴*/
.left_menu {position:absolute; top:0; left:0; width:70px; height:100%; border-right:1px solid var(--border-color); background-color:#fff; box-sizing: border-box;}
.left_menu > ul > li {width:100%;}
.left_menu > ul > li .left_btn {position: relative; display:flex; align-items: center; justify-content: center; padding:40px 10px 10px 10px; width:100%; min-height:70px; text-align: center; box-sizing: border-box;}
.left_menu > ul > li .left_btn:before {transition:var(--ani-1); content: ''; position: absolute; top:0; left:0px; width:100%; height:35px; display:block; background-repeat:no-repeat; background-position:center bottom;}
.left_menu > ul > li .left_btn span {font-size:17px; font-weight:500; transition:var(--ani-1); }
.left_menu > ul > li .left_btn.n_1:before {background-image:url('../../../images/sip/map/left_menu_icon_01.svg');}
.left_menu > ul > li .left_btn.n_2:before {background-image:url('../../../images/sip/map/left_menu_icon_02.svg');}
.left_menu > ul > li.on .left_btn {background-color: #F1F3FF;}
.left_menu > ul > li.on .left_btn span {color:var(--navi-color); font-weight:bold;}
.left_menu > ul > li.on .left_btn.n_1:before {background-image:url('../../../images/sip/map/left_menu_icon_01_on.svg');}
.left_menu > ul > li.on .left_btn.n_2:before {background-image:url('../../../images/sip/map/left_menu_icon_02_on.svg');}
.left_menu > ul > li .left_btn:hover span {color:var(--navi-color);}
.left_menu > ul > li .left_btn:hover.n_1:before {background-image:url('../../../images/sip/map/left_menu_icon_01_on.svg');}
.left_menu > ul > li .left_btn:hover.n_2:before {background-image:url('../../../images/sip/map/left_menu_icon_02_on.svg');}


/*메인 컨텐츠*/
.container {position: relative; margin-left:70px; width:auto; height: 100%; padding:10px; background-color:var(--bg-color); box-sizing: border-box; overflow: auto;}
.cnt_main {position: relative; min-width:1400px; min-height:100%; }
.top_sel_box {position: relative; display:flex; margin-bottom:10px; width:100%; box-sizing: border-box;}
.top_sel_box .sel_box {display:flex; align-items: center; gap:10px;}
.top_sel_box .sel_box label {font-size:18px; font-weight:bold;}
.top_sel_box .sel_box select {width:150px; height:30px; border-radius:10px; padding:0 30px 0 10px; appearance: none; font-size:17px; color:#222; background:#fff url('../../../images/sip/map/sel_box_icon.svg') no-repeat center right 10px; box-shadow: 0 3px 10px #00000014; border:0; box-sizing: border-box;}
.cnt_bot_wrap {display:flex; gap:10px;}
.layout_box {display:flex; flex-direction:column; gap:10px;}
.layout_box.left {width:30%;}

/*박스 두개 레이아웃*/
.layout_box.fixe-box-row {flex-direction: row;}
.cnt_box {width:100%; border-radius:10px; background-color:#fff; border:1px solid var(--border-color); box-sizing: border-box;}
.cnt_box .cnt_head {padding:0 10px; display:flex; justify-content: space-between; align-items: center; height:40px; border-bottom:1px solid var(--border-color); box-sizing: border-box;}
.cnt_box .cnt_head .tit {font-size:16px; font-weight: bold;}
.cnt_box .cnt_head .btn_box {display:flex; gap:5px; align-items:center;}
.cnt_box .cnt_head .btn_box .btn_link {
    display:inline-flex; align-items: center; justify-content: center; text-align:center; 
    width:20px; height:22px; transition: var(--ani-1); background-color:#eff0ff; border-radius:var(--bdrdus-20);
    background-image:url('../../../images/sip/map/icon_search.svg'); background-position:center; background-repeat:no-repeat; background-size:14px;
}
.cnt_box .cnt_head .btn_box .btn_link span {font-size:0; position: absolute; top:-9999px; left:-9999px; text-indent:-9999px; color:transparent;}
.cnt_box .cnt_head .btn_box .btn_link.down {
    background-image:url('../../../images/sip/map/icon_down.svg'); 
}
.cnt_box .cnt_head .btn_box .txt {font-size:13px;}
.cnt_box .cnt_body {padding:10px; width:100%; box-sizing: border-box;}
.cnt_box.s-s-box {height:120px;}
.cnt_box.s-box {height:350px;}
.cnt_box.m-box {height:250px;}
.cnt_box.l-box {height:480px;}
.cnt_box.s-box .cnt_body {height:310px;}
.cnt_box.m-box .cnt_body {height:210px;}
.cnt_box.l-box .cnt_body {height:440px;}

/*순위*/
.rnking_list {display:flex; flex-direction: column; gap:5px;}
.rnking_box {display:flex; align-items: center; justify-content: space-between; padding:0 10px; width:100%; height:60px; border-radius: var(--bdrdus-10); border: 1px solid #DFE1F2; background-color: #F5F6FF; box-sizing: border-box;}
.rnking_box .left_tit,
.rnking_box .right_txt {display:flex; flex-direction: column; gap:2px;}
.rnking_box .left_tit .num {font-size:15px; font-weight: 500; color:var(--yellow-color);}
.rnking_box .left_tit .tit {font-size:20px;}
.rnking_box .right_txt {align-items: flex-end;}
.rnking_box .right_txt .num {font-size:26px; font-weight: bold; }
.rnking_box .right_txt .txt {font-size:13px; font-weight:500;}
.rnking_box .right_txt .blue {color:var(--blue-color);}
.rnking_box .right_txt .red {color:var(--red-color);}

/*순위 빠진거*/
.cnt_body.h_60 .rnking_box {height:60px;}
/*
.cnt_body.no_num .rnking_box .left_tit .tit {font-size:28px;}
.cnt_body.no_num .rnking_box .right_txt {gap:5px;}
.cnt_body.no_num .rnking_box .right_txt .num {font-size:50px;}
.cnt_body.no_num .rnking_box .right_txt .txt {font-size:17px;}
*/


/*오른쪽 박스*/
.layout_box.right {width:70%;}
.layout_box.r-top {flex-direction:row; gap:10px;}
.layout_box.r-top .r-top-left {width:60%;}
.layout_box.r-top .r-top-right {display:flex; flex-direction:column; gap:10px; width:40%;}


/*로딩중*/
.loading_box {position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999999; background:rgba(0,0,0,0.54);}
.loading_box .loading {position:absolute; top:50%; left:50%; width:400px; height:300px; transform:translate3d(-50%, -50%, 0); border-radius:10px; background:#fff; text-align:center; box-sizing:border-box;}
.loading_box .loading img {margin-top:60px; display:inline-block;}
.loading_box .loading div.circles {padding-top:20px;}
.loading_box .loading div.circles i {animation:scaleBounce .5s alternate infinite; display:inline-block; margin:0 3px; width:10px; height:10px; background:#00a5e5; border-radius:50em;}
.loading_box .loading div.circles i:nth-child(2) {animation-delay:.1s;}
.loading_box .loading .circles i:nth-child(3) {animation-delay:.2s;}
.loading_box .loading p {font-size:16px; color:#777; line-height:24px;font-family:'Noto Sans KR', sans-serif;}
.loading_box .loading p strong {display:block; font-size:20px; line-height:30px; color:#000;font-family:'Noto Sans KR', sans-serif;}



/*지도*/
.cnt_box.map {position: relative; padding:10px; box-sizing: border-box;}
.cnt_box.map .cnt_body{display:flex; justify-content: center; align-items:center; height:100% !important; background-color:var(--bg-color); padding:0; border-radius: var(--bdrdus-10);}
.cnt_box.map .cnt_body .body_box {width:90%; height:90%;}
.map .loc_box {position:absolute; top:20px; left:20px; z-index:10; display:flex;}
.map .loc_box li.first {padding-left:20px;}
.map .loc_box li.first::before {width:15px; height:25px; background:url('../../../images/sip/map/map_loc.png') no-repeat center; top:0; left:0;}
.map .loc_box li {display:inline-flex; position: relative; align-items:center;}
.map .loc_box li:before { display:block; position: absolute; content:''; top:10px; left:6px; width:5px; height:5px; }
.map .loc_box li + li {padding-left:20px;}
.map .loc_box li + li::before {border-top:1px solid #9f9f9f; border-left:1px solid #9f9f9f; transform:rotate(135deg);}
.map .loc_box li a {line-height:26px;}
.map .loc_box li a:hover {text-decoration:underline;}
.cnt_head a:hover {text-decoration:underline;}
.map .loc_box li span {font-size:16px;}
.map .loc_box li:last-child span {font-weight: bold;}

.modal .cnt_body {height:260px !important;}
.modal .cnt_box {height:300px;}

/*수치 활성+비활성 버튼*/
.box_cont .Toggle_label {top: 10px; right:10px;}
.topBtnBox .Toggle_label {top: 10px; right:10px;}
.box_cont .box_chart {width:100%; height:150px; padding:0 15px; box-sizing: border-box;}
.box_cont .box_chart .linkBox {display:block; width:100%; height:100%;}
.Toggle_label {
    display: flex;
    align-items: center !important;
    z-index: 1;
}

.Toggle_label span {
    color: #4d576e;
    font-size: 13px;
    font-weight: bold;
    margin-right: 5px !important;
    width: auto !important;
    min-width: auto !important;
    min-height: 0 !important;
}

.Toggle_label .Toggle {
    width: 23px;
    height: 18px;
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;
}

.Toggle_label .Toggle::before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #bcc5d7
}

.Toggle_label .Toggle::after {
    content: '';
    border: #0075ff solid 0;
    display: block;
    width: 12px;
    height: 12px;
    background: #0089ff;
    border-radius: 50%;
    position: absolute;
    transition: all 0.2s;
    z-index: 0;
    box-sizing: border-box;
}

.Toggle_label .Toggle:hover::after {
    border-width: 1px;
}

.Toggle_label .Toggle.On::after {
    left: auto;
    right: 0;
}

.Toggle_label .Toggle.Off::after {
    left: 0;
    background-color: #162d54;
}

.Toggle_label button {
    font-size: 0;
    display: flex;
    width: 100%;
    height: 100%;
    transition: all 0.2s;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.Toggle_label .Toggle.On button.BtnToggleOn {
    display: none;
}

.Toggle_label .Toggle.Off button.BtnToggleOff {
    display: none;
}

/*지도 범례 온/오프 */
.Toggle_label.map {
    position: absolute;
    top:20px;
    right:20px;
    height:22px;
    padding:0 10px;   
    border-radius:10px;
    background-color:#fff;
}

.Toggle_label.map .Toggle::after {
    border-color:#e8661a;
    background-color:#e8661a;
}

.Toggle_label.map  .Toggle.Off::after {
    background-color:#656261;
}

/* 2025.08.05 추가 css */
.left_menu {display:none;}
.container {position: relative; width:auto; height: 100%; margin-left:0; padding:10px; background-color:var(--bg-color); box-sizing: border-box; overflow: auto;}
.cnt_main {position: relative; min-width:100%; min-height:100%; }
.top_sel_box {position: relative; display:flex; gap:10px; margin-bottom:10px; width:100%; align-items:center; box-sizing: border-box;}
.top_sel_box .sel_box {display:flex; align-items: center; padding-left:10px; border-radius:10px; background-color:#fff;  box-shadow: 0 3px 10px #00000014; overflow: hidden;}
.top_sel_box .sel_box label {position: relative; display:inline-block; padding-right:10px; font-size:16px; height:30px; line-height:31px;}
.top_sel_box .sel_box label::after {content:''; display:block; position: absolute; width:1px; height:12px; background-color:#ccc; right:0; top:10px;}
.top_sel_box .sel_box select {width:150px; height:30px; line-height:31px; padding:0 30px 0 10px; appearance: none; font-size:16px; color:#222; background:#fff url('../../../images/sip/map/sel_box_icon.svg') no-repeat center right 10px; border:0; box-sizing: border-box;}
.cnt_box {position: relative; width:100%; border-radius:10px; background-color:#fff; border:1px solid var(--border-color); box-sizing: border-box;}
.modal_popup .cnt_main { width:100%;} 

/*위치*/
.map .loc_box {position:absolute; top:20px; left:20px; z-index:10;}
.loc_box {display:flex;}
.loc_box li.first {padding-left:20px;}
.loc_box li.first::before {width:15px; height:25px; background:url('../../../images/sip/map/map_loc.png') no-repeat center; top:0; left:0;}
.loc_box li {display:inline-flex; position: relative; align-items:center;}
.loc_box li:before { display:block; position: absolute; content:''; top:10px; left:6px; width:5px; height:5px; }
.loc_box li + li {padding-left:20px;}
.loc_box li + li::before {border-top:1px solid #9f9f9f; border-left:1px solid #9f9f9f; transform:rotate(135deg);}
.loc_box li a {line-height:26px;}
.loc_box li a:hover {text-decoration:underline;}
.loc_box li span {font-size:16px;}
.loc_box li:last-child span {font-weight: bold;}
.business .loc_box li.first::before {top:4px; width:17px; height:17px; background:url('../../../images/sip/map/business_icon.png') no-repeat center;}
.business .loc_box {font-weight:normal;}

/*자세히보기 버튼*/
.chart_view {position:absolute; bottom:5px; right:5px; }
.chart_view .view_btn {display:block; width:30px; height:30px; background:#0f62fa78 url('../../../images/sip/map/btn_sta_seh.png') no-repeat center; background-size:15px; border-radius:40px; transition:all 0.3s;}
.chart_view .view_btn span {opacity:0; transition:all 0.3s; font-size:13px; display:block; position:absolute; top:2px; right:35px; text-wrap-mode:nowrap; background-color:#0a56e4f1; color:#fff; height: 24px; line-height:24px; border-radius:5px; padding:0 10px;}
.chart_view .view_btn span::before {display:block; content:''; position:absolute; top:9px; right:-6px;

	width: 0;

	height: 0;

	border-style: solid;

	border-width: 3px 0 3px 6px;

	border-color: transparent transparent transparent #0a56e4f1;

}
.chart_view .view_btn:hover span {right:40px; opacity:1;}
.chart_view .view_btn:hover {background-color:#0a56e4f1;}


.r_txtBox {width:100%; padding:5px; background-color:#f5f0f087; box-sizing: border-box; border-radius:10px;}
.r_txtBox span {color:#c11f1f; font-size:13px;}

@media screen and (max-width:1500px) {
    .layout_box.left {width:450px;}
    .layout_box.right {width:calc(100% - 460px);}
}

@media screen and (max-width:1200px) {
    .layout_box.r-top .r-top-left {width:100%;}
    .layout_box.r-top .r-top-right {width:100%;}
    .layout_box.r-top {flex-direction: column;}
    .cnt_box.m-box.chart_01 {position: absolute; bottom:260px; left:0; width:450px; height:220px;}
    .cnt_box.m-box.chart_01 .cnt_body {height:180px;}

    .loc_box li span {font-size:14px;}
    .cnt_box .cnt_head .tit {font-size:14px;}
    .rnking_box .left_tit .tit {font-size:18px;}
    .rnking_box .right_txt .num {font-size:22px;}
}



@media screen and (max-width:900px) {
    .layout_box.left {width:100%;}
    .layout_box.right {width:100%;}
    .layout_box.r-top {gap:0;}
	.cnt_box.l-box.employee {height:350px;}
    .cnt_box.map {position: absolute; top:40px; height:430px;}
    .cnt_bot_wrap {flex-direction: column; padding-top:440px;}
    .cnt_box.m-box.chart_01 {position: relative; bottom:auto; left:auto; width:100%; height:250px;}
    .cnt_box.m-box.chart_01 .cnt_body {height:210px;}
    .cnt_box.l-box .cnt_body {height:308px;}
    .rMateH5__Root {heught:auto;}
}



@media screen and (max-width:500px) {
    .logo img {width:140px;}
    .top_sel_box {justify-content:space-between;}
    .top_sel_box .sel_box select {width:90px;}
    .top_sel_box .sel_box label, .top_sel_box .sel_box select {font-size:14px;}
    .layout_box.fixe-box-row {flex-direction: column;}
    .cnt_box .cnt_head .tit {font-size:13px;}
    .loc_box li span {font-size:13px;}
}

.modal_btn {
    display: block;
    margin: 40px auto;
    padding: 10px 20px;
    background-color: royalblue;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.modal_btn:hover {
    box-shadow: 3px 4px 11px 0px #00000040;
}

/*모달 팝업 영역 스타일링*/
.modal {
/*팝업 배경*/
	display: none; /*평소에는 보이지 않도록*/
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: rgba(0,0,0,0.5);
    z-index: 9999; 
    box-sizing:border-box;
    padding:10px;
}
.modal .modal_popup {
/*팝업*/
    position: absolute;
    max-width:1400px;
    width:98%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: #ffffff;
    border-radius: 20px;
    z-index: 10000;
    box-sizing:border-box;
}
.modal .modal_popup .close_btn {
    display: block;
    padding: 10px 20px;
    background-color: rgb(128 66 255);
    border: none;
    border-radius: 5px;
    margin-top: 10px;;
    color: #fff;
    cursor: pointer;
    transition: box-shadow 0.2s;
    float:right;
    
}

.modal .cnt_box .cnt_head {height:auto; main-height:40px; padding:10px;}
.modal .cnt_box .cnt_head .tit {width:calc(100% - 165px); padding-right:5px; box-sizing:border-box;}
.modal .cnt_box .cnt_head .btn_box {width:165px}

/*툴팁*/

/* 기본 컨테이너 스타일 */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* 툴팁 텍스트 스타일 */
.tooltip .tooltip-text {
    visibility: hidden;
    width: 100px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    
    /* 툴팁 위치 설정 */
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    
    /* 애니메이션 효과 */
    opacity: 0;
    transition: opacity 0.3s;
}

/* 툴팁 표시 트리거 */
.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}