@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/move/left_menu_icon_01.svg');}
.left_menu > ul > li .left_btn.n_2:before {background-image:url('../../../images/sip/move/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/move/left_menu_icon_01_on.svg');}
.left_menu > ul > li.on .left_btn.n_2:before {background-image:url('../../../images/sip/move/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/move/left_menu_icon_01_on.svg');}
.left_menu > ul > li .left_btn:hover.n_2:before {background-image:url('../../../images/sip/move/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/move/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/move/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/move/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%;}


/*지도*/
.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/move/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:not(.last) {padding-left:20px;}
.map .loc_box li + li:not(.last)::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;}
.map .loc_box li span {font-size:16px;}
.map .loc_box li:last-child span {font-weight: bold;}

/*수치 활성+비활성 버튼*/
.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/move/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 {max-width:1400px; 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/move/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:not(.last) {padding-left:20px;}
.loc_box li + li:not(.last)::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/move/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/move/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;}
}



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

/*20260406 - css 추가*/
.top_sel_box .sel_box_wrap {display:flex; gap:5px; flex-flow:wrap;}
.top_sel_box .sel_box {gap:0;}
.top_sel_box .sel_box select {box-shadow:0 0 0 0; width:auto; min-width:100px;}
.cnt_box .cnt_head .btn_box .btn_link.popup {background-image: url('../../../images/sip/move/icon_popup.png'); background-size:auto;}

/*20260409 - css 추가*/
.cnt_box .cnt_head .btn_box .btn_link.clock {background-image: url('../../../images/sip/move/icon_clock.png'); background-size:auto;}
.cnt_box .cnt_head .btn_box .btn_link.num {background-image: url('../../../images/sip/move/icon_num.png'); background-size:auto;}

@media screen and (max-width:1200px) {
    .top_sel_box {flex-direction:column;}
    .top_sel_box .sel_box label {font-size:14px;}
    .top_sel_box .sel_box select {font-size:14px;}
}

@media screen and (max-width:900px) {
    .cnt_bot_wrap {position: relative;}
    .cnt_box.map {top:0;}
    .top_sel_box .sel_box_wrap {justify-content: center;}
    .top_sel_box .sel_box {flex-grow:1;}
    .top_sel_box .sel_box label {white-space: nowrap;}
    .top_sel_box .sel_box select {min-width:0; width:100%;}
}

/*20260421 - css 추가*/
.logo {font-size:22px; white-space: nowrap; font-weight:bold;}
.logo .point_type_1 {color:#506cff;}
.logo .point_type_2 {color:#2986e3;}
.guide_btn {display:flex; position: absolute;  border-radius:30px; background:linear-gradient(45deg, #2876ee, #434dd9);
    top:0px; right:0px; padding:0 15px; height:30px; align-items: center; box-sizing: border-box; gap:7px; transition:all 0.3s; font-size:16px; color:#fff;
}
.guide_btn:hover {box-shadow:1px 2px 5px 0px #23295596;}
.guide_btn::after {content:''; display:block; position: relative; width:15px; height:15px; background:url('../../../images/sip/move/icon_guide.png') no-repeat; }
.guide_btn.on {z-index:99999; color:#2876ee; background:#fff; border:1px solid #2876ee; font-weight:600; }
.guide_btn.on::after {display:none;}
.modal.guide_wrap {position:fixed; top:0; left:0; width:100%; height:100%;}
.modal.guide_wrap .modal_popup.guide_inner {
    display:flex; justify-content: center; align-items: center; flex-direction:column;
    text-align: center; background-color:transparent; max-width:870px; padding:0;
}
.guide_wrap .guide_tit {color:#fff; }
.guide_wrap .guide_tit .tit {font-size:34px; font-weight: 700; text-shadow: 2px 1px 8px #00000085;}
.guide_wrap .guide_tit .txt {font-size:20px; font-weight: 500; text-shadow: 2px 1px 8px #00000085}

@media screen and (max-width:900px) {
    .guide_btn {display:none;}
}
/*20260421 - css 추가 끝*/

/*모달 팝업 영역 스타일링 -- 웹에서 가져온것*/
.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;

}

/*20260519 추가*/
.current_location {overflow: hidden;display:flex;justify-content: center;padding:10px;margin-bottom:10px;position: relative;align-items: center;border-radius:10px;background: linear-gradient(80deg, #560c95, #1e167a 25%);}
.current_location::before {content: ''; display: block; position: absolute; top:50%; transform: translateY(-50%); right:0; width:1000px; height:627px; background:url('../../../images/sip/move/bg_current_location.png') no-repeat center; background-size:100% auto; opacity:0.5;}
.current_location::after {content: ''; display: block; position: absolute; top:50%; transform: translateY(-50%); left:-400px; width:1000px; height:627px; background:url('../../../images/sip/move/bg_current_location.png') no-repeat center;  background-size:100% auto; opacity:0.5;}
.current_location .txt-box-wrap {display: flex; align-items: end; gap: 20px; z-index: 1;}
.current_location .txt-box-wrap .txt-box {display: flex; flex-direction: column; gap:5px; align-items: center;}
.current_location .txt-box-wrap .txt-box .tit span {display: inline-flex; font-size:14px; line-height:14px; color:#fff; padding:2px 6px; border-radius:50px; border:1px solid #ffffffa3;}
.current_location .txt-box-wrap .txt-box .txt {font-size:22px; color:#fff; font-weight:bold;}
.current_location .txt-box-wrap .arrow {margin-bottom:1px; display:flex;}
.current_location.switch::before {transform:translateY(-50%) rotateY(180deg); right:-350px;}
.current_location.switch::after {transform:translateY(-50%) rotateY(180deg); left:0;}
.current_location.switch .txt-box-wrap .arrow {transform:rotateY(180deg);}


@media screen and (max-width:1600px) {
    .current_location::before , .current_location::after {width:500px;}
    .current_location::after {left:-150px;}
    .current_location.switch::before {right:-150px;}
}

@media screen and (max-width:1200px) {
    .current_location::before , .current_location::after {width:300px;}
    .current_location::after {left:-100px;}
    .current_location.switch::before {right:-100px;}
    .current_location .txt-box-wrap .txt-box .txt {font-size:20px;}
}

@media screen and (max-width:1000px) {
    .current_location .txt-box-wrap {gap:10px;}
    .current_location .txt-box-wrap .txt-box .txt {font-size:18px;}
    .current_location .txt-box-wrap .arrow {margin-bottom:3px;}
    .current_location .txt-box-wrap .arrow img {width:20px;}

}

@media screen and (max-width:800px) {
    .current_location::before , .current_location::after {width:200px;}
    .current_location::after {left:-50px; opacity:0.3;}
    .current_location.switch::before {right:-50px; opacity:0.3;}
    .current_location .txt-box-wrap .arrow {margin-bottom:2px;}
    .current_location .txt-box-wrap .txt-box .tit span {font-size:13px;}
    .current_location .txt-box-wrap .txt-box .txt {font-size:16px;}
}

@media screen and (max-width:800px) {

    .current_location .txt-box-wrap {gap:5px;}
    .current_location .txt-box-wrap .arrow {margin-bottom:1px;}
    .current_location .txt-box-wrap .txt-box .txt {font-size:14px;}
}