@charset "utf-8";

@import url('common.css');

/*공통*/
.wrap {position: relative; width:100%; min-height:100%; background: #e9f0fd;}
.layout {position: relative; width:100%; box-sizing: border-box;}
.point {color:var(--point-pink);}
.orange {color:var(--point-orange);}
.underline {display:inline-block; position: relative; z-index:1;}
.underline:after {position:absolute; display:block; content:''; z-index:-1; bottom:2px; left:0; width:100%; height:9px; background-color:var(--point-pink); opacity:0.2;}
.sr-only {position:absolute !important; width:1px !important; height:1px !important; padding:0 !important;margin:-1px !important; overflow:hidden !important; clip:rect(0, 0, 0, 0) !important; white-space:nowrap !important; border:0 !important;}
:root{
	--point-pink:#fb5757;
	--point-blue:#2680EB;
	--point-orange:#fa745d;
}
.m_t_10 {margin-top:10px;}
.m_t_20 {margin-top:20px;}
.m_t_30 {margin-top:30px;}

/*헤더*/
#header {position: sticky; top:0; width:100%; height:70px; background:linear-gradient(90deg, #2F4480, #17172B); z-index:99;}
#header .layout {padding:0 20px; height:100%; display:flex; justify-content: space-between; align-items: center;}
#header .logo_wrap {display:flex; gap:5px; align-items:center;}
#header .logo_wrap .logo {display: flex; gap:10px; align-items: center;}
#header .logo a {display:flex; align-items: center; gap:5px; font-size:28px; color:#fff; letter-spacing:-3px;}
#header .logo a img {height:28px;}
#header .logo_wrap .logo .color {color:#fdb759; }
#header .logo_wrap .logo span {font-size:28px;}
#header .logo_wrap .criteria {margin-top:4px; padding:0 20px 0 40px; height:30px; line-height:30px; font-size:14px; font-weight: bold; color:#fff; border-radius:20px; background:#495580 url('../../../../img/fpm/icon_criteria.png') no-repeat center left 20px;}
#header .menu_wrap {display:flex; gap:30px; height:100%; align-items:center;}
#header .gnb {display:flex; gap:50px; height:100%; align-items: center;}
#header .gnb > li {position: relative; display: flex; align-items: center; height:100%;}
#header .gnb > li > a {position: relative; display:inline-block; font-family: 'SCoreDream3'; color:#fff; font-size:20px;}
#header .gnb > li.on > a {font-weight:600;}
#header .gnb > li.on > a:after {position: absolute; display:block; content:''; left:0; bottom:-5px; width:100%; height:2px; background-color: #24FFF0; opacity:0.6;}
#header .gnb > li > a:hover {font-weight:600;}
#header .gnb > li.sub_menu > a {padding-right:18px;}
#header .gnb > li.sub_menu > a::before {transition:all 0.3s; content:''; width:6px; height:6px; position:absolute;
	display:block; top:50%; right:0px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform:translateY(-50%) rotate(135deg); /*background:url('../../../../img/fpm/icon_subMenu.png') no-repeat center;*/}
#header .gnb > li ul {
	position: absolute; display:none; flex-direction: column; top:55px; left:50%; transform: translateX(-50%) translateY(15px);
	padding:20px; min-width:120px; background-color:#fff; box-sizing: border-box; text-align: center; border-radius:5px;
	opacity:0; box-shadow: 0 0 16px 0px #4a4e8354; border: 1px solid #e9e9e9;
}
#header .gnb > li ul li a {display:flex; justify-content:center; align-items:center; padding: 5px; border-radius:5px; position: relative; font-family: 'SCoreDream4'; font-size:15px; color:#48485b; transition: all 0.3s;}
/*#header .gnb > li ul li.on a:after {position: absolute; display:block; content:''; left:0; bottom:-5px; width:100%; height:2px; background-color: #1f9aaf; opacity:0.6;}*/
#header .gnb > li ul li:hover a {background:#f5f5f5; }
#header .gnb > li ul li.on a {background:linear-gradient(45deg, #eaf9f7, #e2ebff); color:#0990b1; font-weight:bold;}
#header .gnb > li ul li + li {margin-top:10px;}

#header .gnb > li.hover ul { display: flex;-webkit-animation: up_opacity 0.5s ease-in-out 1 forwards;animation: up_opacity 0.5s ease-in-out 1 forwards;}
@keyframes up_opacity {100%{opacity: 1; transform: translateX(-50%) translateY(0px);}}
#header .gnb > li.sub_menu.hover > a::before { transform:rotate(315deg);}

#header .info_btn {transition:all 0.3s; display:inline-flex; position: relative; align-items: center; gap:5px; padding: 5px 15px; height:30px; border-radius:20px; background:linear-gradient(45deg, #1daca3, #0a69d5); box-sizing: border-box;}
#header .info_btn::before {content:''; display:block; width:12px; height:12px; background:url('../../../../img/fpm/info_btn.svg') no-repeat center; background-position:center;}
#header .info_btn span {font-family: 'SCoreDream4'; color:#fff; font-size:14px;}
#header .info_btn:hover {box-shadow: 0 0 9px 5px #000;}
#header .cr_selBox {display:flex; gap:5px; margin-top:3px;}
#header .cr_selBox select {height:30px; line-height:28px; font-size:16px; font-family:'SCoreDream3'; background-color:#ffffff00; color:#fff; border-radius:5px; border-color: #ffffff66; transition:all 0.3s;}
#header .cr_selBox select:hover {border-color:#fff;}
#header .cr_selBox select option {color:#000;}
#header .region_name {padding: 5px 20px; border-radius: 30px; border: 1px solid #ffffff4f;}
#header .region_name strong {font-size:20px; color:#fff;}


#header .new_btn {transition:all 0.3s; display:inline-flex; position: relative; align-items: center; gap:5px; padding: 5px 10px; height:30px; border-radius:5px; background:linear-gradient(45deg, #ffa2257a, #ff4f51); box-sizing: border-box;}
#header .new_btn::before {content:''; display:block; width:15px; height:15px; background:url('../../../../img/fpm/btn_window.png') no-repeat center; background-position:center;}
#header .new_btn span {font-family: 'SCoreDream4'; color:#fff; font-size:14px;}
#header .new_btn:hover {box-shadow: 0 0 9px 5px #0000003a;}

/*컨텐츠*/
.content {position: relative; box-sizing: border-box; background: #e9f0fd;}
.content .layout {padding:20px; z-index:10;}
.layout.n_3 {display: flex;justify-content: center; gap: 10px; align-items:flex-start;}
.layout.n_4 {display: flex;justify-content: center; gap: 10px; align-items:flex-start;}
.layout.n_4 .cont_box {display:flex; flex-direction: column; gap:10px; flex:1;}

/*차트 공통*/
.statsCnt + .statsCnt {margin-top:20px;}
.statsCnt {position:relative; padding:20px; background-color:#fff; box-shadow: 0px 0px 8px 0px #d0ccde7a; box-sizing: border-box;}

/*타이틀*/
.statTitle {position: relative; padding-right:80px; display: flex; justify-content: space-between; align-items:center; margin-bottom:10px; box-sizing: border-box;}
.statTitle h2 {font-family: 'SCoreDream6'; font-size:24px;}
.statSubTitle {position: relative; display: flex; justify-content: space-between; align-items:center; margin-bottom:10px; }
.statSubTitle .tit {font-size: 20px; font-weight:bold;}
.statSubTitle .unit {font-size: 16px; }

/* 차트 목록 */
.trend_list {display:flex; justify-content:left; flex-wrap: wrap; gap:20px;}
.trend_wrap .trend_list li:nth-child(odd){background:#fff;}
.list_top + .trend_list{padding-left:12px; box-sizing:border-box;}
.trend_list .trend_box {transition:0.3s; position:relative; display:flex; padding:20px; flex-direction:column; align-items:center; border:1px solid #C9C8CE; background-color:#fff; box-shadow:0px 0px 8px 0px #d0ccde7a; border-radius:10px; box-sizing: border-box;}
.trend_list .on a.trend_box {box-shadow: 0px 0px 8px 0px #2680eb3d; border-color:var(--point-blue);}

/*차트목록 갯수별 사이즈*/
.trend_list.n_3 li {width:calc((100% - 40px)/3);}
.trend_list.n_4 li {width:calc((100% - 60px)/4);}
.trend_list.n_5 li {width:calc((100% - 80px)/5);}

/* 순위 */
.ranks{opacity:0.15; position:absolute; top:-5px; left:5px; font-size:80px; font-family:'NanumSquare'; font-weight:800; letter-spacing:-5px; color:#162c56;}
.ranks.n_1 {opacity:0.4; top:-30px; left:-25px; font-size:160px; color:#ff6161;}
.ranks.n_2 {opacity:0.3; top:-20px; left:-10px; font-size:130px; color:#ff6161;}
.ranks.n_3 {opacity:0.2; top:-12px; left:0; font-size:100px; color:#ff6161;}

/* 제목 */
.trend_list li h3{position:relative; width:100%; text-align:center;}
.trend_list li h3 .tt{font-size:18px; font-weight:500; text-shadow:1px 1px #fff; color:#222;}
.trend_list li h3 span.tt{display:inline-block; vertical-align:bottom;}
.trend_list li h3 .ex{margin-left:5px; line-height:26px; font-size:14px; font-weight:500; color:#767676;}

/* 연령층 */
.trend_list li h3 .age{display:inline-block; height:23px; line-height:23px; margin:0 auto 6px; padding:0 6px; background-color:#dbdbdb; font-weight:400; color:#333; box-sizing:border-box;}
.trend_list li h3 .age.young{background-color:#dfefff;}
.trend_list li h3 .age.old{background-color:#ffebbd;}

/* 값 */
.trend_list li .price {display:flex; align-content:flex-end; margin:10px 0; line-height:30px; color:#222;}
.trend_list li .price>span{font-size:15px;}
.trend_list li .price strong {margin-right:4px; font-family:'NanumSquare', sans-serif; font-size:28px; font-weight:900; letter-spacing:-2px;}

/* 그래프 */
.trend_list li .graph {width:100%; height:150px;}
.trend_list li .graph.h_300 {height:300px;}

/* 자세히보기버튼 */
.trend_more_btn {transition: all 0.3s; margin-top:10px; display:flex; justify-content: center; align-items: center; width:100%; height:40px; border:1px solid #aac4e2; border-radius:5px; background-color:#f6fbfd; box-sizing: border-box;}
.trend_more_btn:hover {box-shadow: 0px 0px 8px 0px #a29eb185; border-color:var(--point-blue);}
.trend_more_btn.on {box-shadow: 0px 0px 8px 0px #a29eb185; border-color:var(--point-blue); }
.trend_more_btn span {position: relative; display:inline-flex; align-items: center; color:#377dd1; font-size:16px; font-weight:bold; gap:5px;}
.trend_more_btn span::after { position: relative; content:''; display:block; width:12px; height:7px; background:url('../../../../img/fpm/trend_more_btn.png') no-repeat center;}
.trend_more_btn.on span::after {transform: rotate(180deg);}

/* 상승 */
.rise {position:relative; /*padding-bottom:22px; width:100%;*/}
.rise p{
	display:flex; align-items:flex-end; font-size:17px; color:var(--point-pink); font-weight:500; letter-spacing:-1.5px;
	/*position:absolute; bottom:0; left:50%; transform:translateX(-50%);*/
	width:100%;
	justify-content:center;
}
.rise p:after{content:''; display:inline-block; width:8px; height:20px; margin-left:2px; margin-bottom:1px; background-repeat:no-repeat; background-position:right -3px top 7px; background-size:12px auto;}
.rise p:not(.reduction):after{background-image:url(../../../../img/fpm/chart_icon_rise.png);}
.rise > span {display:inline-block; margin-bottom:5px; margin-right:5px; line-height:24px; padding:0 10px; border-radius:50px; background:#ececec;}
.rise > strong {display:block; font-family:'NanumSquare'; font-size:18px; line-height:32px; color:#999; font-weight:900;}
.rise p .calc_rate{display:inline-block; margin-right:3px;}

/* 하락 */
.rise.reduction p {color:var(--point-blue);}
.rise.reduction p:after{background-image:url(../../../../img/fpm/chart_icon_reduction.png);}

/* 동일 */
.rise.same p {color:#4caf50; align-items: center; }
.rise.same p::after {background-image:none; display:block; content: ''; width:10px; height:0; margin-left:5px; margin-bottom:0; border-bottom:2px solid #4caf50; border-left:0;}

/* 차트 css 수정 */
.graph .rMateH5__Caption{display:block; font-family:'Noto Sans KR', sans-serif; font-size:18px; font-weight:500; color:#222;}

/* 수치 버튼*/
.toggle_btn{position:absolute; top:10px; right:0px; padding-right:44px; box-sizing:border-box;}
.toggle_btn > span{letter-spacing:-0.5px; font-size:14px;}
.toggle_btn:before{content:""; position:absolute; top:calc(50% - 3px); right:0; width:38px; height:4px; background-color:#c7c7c7; border-radius:14px;}
.toggle_btn:after{
	content:""; position:absolute; top:calc(50% - 8px); right:23px; width:14px; height:14px; background-color:#717171; border-radius:50%;
	-webkit-transition:right 0.3s ease; transition:right 0.3s ease;
}
/*.toggle_btn.on:before{background-color:var(--point-blue); opacity:0.2;}*/
.toggle_btn.on:after{right:0; background-color:#1daca3;}

/*소멸위험지수*/
.risk_box {position: relative; width:100%; margin-top:10px; padding-top:10px;}
.risk_box .risk_bar {display: flex; border:2px solid #fff; border-radius:20px; box-shadow:0 0 3px 4px #0000000f;}
.risk_box .risk_bar div[class^="bar_"] {flex:1; /*border: 1px solid #747474;*/ height:12px; box-sizing: border-box;}
.risk_box .risk_bar [class$="1"] {background: linear-gradient(90deg, #1587d6, #1daca3); border-radius:5px 0 0 5px;}
.risk_box .risk_bar [class$="2"] {background: linear-gradient(90deg, #1daca3, #fdb759);}
.risk_box .risk_bar [class$="3"] {background: linear-gradient(90deg, #fdb759, #fd9c89);}
.risk_box .risk_bar [class$="4"] {background: linear-gradient(90deg, #fd9c89, #ff4f51);}
.risk_box .risk_bar [class$="5"] {background: #ff4f51; border-radius:0 5px 5px 0;}
.risk_box .risk_arrow {transition: all 0.3s; display: block; position: absolute; top: -22px; left: 0%; transform: translateX(-50%); height: 24px; z-index: 3; /* 화살표 위치조정을 위해 별도 추가 */ }
.risk_box .risk_arrow .txt {display:block; transition:all 0.3s; font-size:14px; text-shadow:0 0 2px #0000008a; text-wrap-mode:nowrap; background-color:#1587d6; color:#fff; height: 24px; line-height:24px; border-radius:5px; padding:0 10px; box-shadow: 3px 3px 11px 1px #0d53a726; opacity:0;}
.risk_box .risk_arrow:before {display:block; content: ''; position: absolute; bottom:-10px; left:50%; transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 4px 0px 4px;
	border-color: #1587d6 transparent transparent transparent;
}
.risk_box .risk_arrow.n_1 .txt {background-color:#1587d6;}
.risk_box .risk_arrow.n_1:before {border-color:#1587d6 transparent transparent transparent;}
.risk_box .risk_arrow.n_2 .txt {background-color:#1daca3;}
.risk_box .risk_arrow.n_2:before {border-color:#1daca3 transparent transparent transparent;}
.risk_box .risk_arrow.n_3 .txt {background-color:#ff9916;}
.risk_box .risk_arrow.n_3:before {border-color:#ff9916 transparent transparent transparent;}
.risk_box .risk_arrow.n_4 .txt {background-color:#ff8b74;}
.risk_box .risk_arrow.n_4:before {border-color:#ff8b74 transparent transparent transparent;}
.risk_box .risk_arrow.n_5 .txt {background-color:#ff4f51;}
.risk_box .risk_arrow.n_5:before {border-color:#ff4f51 transparent transparent transparent;}
.risk_box:hover .risk_arrow .txt {opacity:1;}

.trend_list .risk_box .risk_bar div[class^="bar_"] {height:24px;}
.trend_list .risk_box .risk_bar [class$="1"] {border-radius:24px 0 0 24px}
.trend_list .risk_box .risk_bar [class$="5"] {border-radius: 0 24px 24px 0; text-align:right;}
.trend_list .risk_box .risk_bar .txt {font-size:13px; padding: 0 7px; color:#fff; line-height:24px;}

/*순위 상세보기 박스*/
.moreBox {margin-top:20px; position: absolute; left:20px; overflow: hidden; border-radius:10px; box-shadow: 0px 0px 8px 0px #2680eb3d; background-color:#fff; border:1px solid var(--point-blue); box-sizing: border-box;}
.more_title {position: relative; padding:20px 60px 0; display: flex; justify-content: space-between; align-items:center; margin-bottom:10px; }
.more_title .tit {font-size:30px; font-weight:bold;}
.more_title .unit {font-size:16px;}
.moreBox .trend_list {padding:0 60px 60px;}
.moreBox .chart_tit {position: absolute; display:flex; justify-content: center; font-family: 'SCoreDream3'; color:#fff; align-items: center; width:380px; height:50px; top:-25px; left:50%; transform:translateX(-50%); border-radius:25px; font-size:22px; line-height:22px; background:linear-gradient(90deg, #34a9a0, #1983fb);}
.moreBox_chart {display: flex; padding:40px 20px 20px; flex-direction: column; position: relative; border-top:1px solid #C9C8CE;}
.sankey_wrap {position: relative; min-height:400px; padding:20px ; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); border-radius:20px; background-color: #fbfbfb; box-sizing: border-box;}
.moreBox_chart .sankey_wrap {padding-top:100px;}

/* 슬라이더 */
.slider {position: absolute; top : 5px; left: calc(50% - 19%); z-index:1; width:38%;}
.slider #areaNm {margin-bottom:10px; font-size:20px; text-align: center; font-family: 'SCoreDream6';}
#slider-range {background : #fff; border-radius:20px;}
.wrap .ui-slider-range {background : #e7eaef;}
.wrap .ui-state-default, .wrap .ui-widget-content .ui-state-default, .wrap .ui-widget-header .ui-state-default {
	border-color:#1983fb; background:linear-gradient(to left, #39a1f9, #1983fb); top:-6px; border-radius:50%;
	width:14px; height:14px; box-shadow: 0 0 8px #0000007a; border:2px solid #fff;
}
.wrap .ui-slider-horizontal {height:6px;}
.wrap #slider-amount {font-size:14px; display:/*flex*/ none; justify-content:center; padding-top:14px;}
.wrap #slider-amount .txt {padding:5px 20px; background-color:#fff; border-radius:30px; box-shadow: 0 0 3px #00000057;}
.wrap .slider-amount {display:block; position:absolute; top:63px; left:55px; text-wrap-mode:nowrap; background-color:#5459c1; color:#fff; height: 24px; line-height:24px; border-radius:5px; padding:0 10px; box-shadow: 3px 3px 11px 1px #0d53a726;}
.wrap .slider-amount .txt {font-size:14px; color:#fff;}
.wrap .slider-amount:before {display:block; content: ''; position: absolute; top:-7px; left:50%; transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0px 4px 7px 4px;
	border-color: transparent transparent #5459c1 transparent;}
.ppltn_tool {position: relative; }
.ppltn_tool .ppltn_btn {position:absolute; display:block; top:-20px; width:30px; height:30px; border-radius:50%; background-color:#fff; background-repeat:no-repeat; background-position:center; box-shadow: 3px 3px 11px 1px #69696926; border:1px solid #ddd; box-sizing: border-box;}
.ppltn_tool .ppltn_btn.plus {right:-40px; background-image: url('../../../../img/fpm/map_ppltn_plus_s.png');}
.ppltn_tool .ppltn_btn.minus {left:-40px; background-image: url('../../../../img/fpm/map_ppltn_minus_s.png');}

/*전입전출슬라이더*/
.sankey_wrap .slider {left:60px; top:35px; width:calc(100% - 120px);}
.sankey_wrap .ui-slider-range {background:#eaeef3; }
.sankey_wrap .slider .slider-amount {top:25px; background-color:#1983fb;}
.sankey_wrap .slider .slider-amount:before {border-color:transparent transparent #1983fb transparent;}
.sankey_wrap .slider .start, .sankey_wrap .slider .last {background-color:#717171;}
.sankey_wrap .slider .start:before, .sankey_wrap .slider .last:before {border-color:transparent transparent #717171 transparent;}

/*인구이동지도 슬라이더*/
.map .ui-state-default, .map .ui-widget-content .ui-state-default, .map .ui-widget-header .ui-state-default {
	border-color:#a096d1; background:linear-gradient(to top, #6c6ccb, #4f50c3);
	width:14px; height:14px; box-shadow: 0 0 8px #0000007a; border:2px solid #fff;
}


/*전입전출 보기 선택 버튼*/
.chart_btn_box {display:flex; margin-bottom:10px; justify-content: space-between;}
.chart_scroll {display:none;}
.choice_btn_box {display:inline-flex;}
.choice_btn_box button {display:inline-flex; align-items: center; height:40px; padding:5px 15px; margin-left:-1px; border:1px solid #a8abc9; box-sizing: border-box;}
.choice_btn_box button:first-child {margin-left: 0; border-radius:10px 0 0 10px;}
.choice_btn_box button:last-child {border-radius:0 10px 10px 0;}
.choice_btn_box button.on {color:#fff; font-weight:500; background:linear-gradient(to right, #5d44d9, #4450d9); box-shadow:0 3px 6px rgba(0 0 0 /25%);}

/*인구감소지역*/
.left_box, .right_box {display:flex; gap:10px; flex: 1; flex-wrap:wrap;}
.center_box {position: relative;}
.center_box.s_size {width: 25%;}
.center_box.m_size {width: 40%;}
.chart_box {width:100%; gap:10px; position:relative; display:flex; padding:10px; flex-direction:column; align-items:center; border:1px solid #C9C8CE; background-color:#fff; box-shadow:0px 0px 8px 0px #d0ccde7a; border-radius:10px; box-sizing: border-box;}
.chart_box .head {display: flex; justify-content: space-between; width:100%;}
.chart_box .head .tit {font-size:14px; letter-spacing:-0.5px; font-weight:bold;}
.chart_box .head .tab_btn {transition:all 0.3s; position: relative; padding:0 4px; height:20px; color:#555; border-radius:4px; background-color:#edededc2; box-sizing: border-box; border:1px solid #ddd;}
.chart_box .head .tab_btn span {position: relative; line-height:18px; font-size:13px; font-weight: 400; margin-top:1px; display:inline-block;}
.chart_box .head .tab_btn.on span {font-weight:500;}
.chart_box .head .tab_btn + .tab_btn {margin-left:2px;}
.chart_box .head .tab_btn.on {border-color: #000; background-color:#191c32; color:#fff; box-shadow: 2px 2px 9px 1px #0000004d;}
.chart_box .head .tab_btn:hover {box-shadow: 2px 2px 9px 1px #0000004d;}
/*.chart_box .head .tit.f_big {font-size:18px;}*/
.chart_box .head .util {display: flex; font-size:13px; gap:5px; align-items:center;}
.chart_box .head .util .toggle_btn {position: relative; top:auto; right:auto; padding-right:33px;}
.chart_box .head .util .toggle_btn:before {width: 28px;}
.chart_box .head .util .toggle_btn:after {right:13px;}
.chart_box .head .util .toggle_btn.on:after {right:0;}
.chart_box .head .util .toggle_btn > span {line-height:16px;}
.chart_box .util_bot {display: flex; width:100%; font-size:13px; align-items:center; justify-content: space-between;}
.chart_box .util_bot .toggle_btn {position: relative; top:auto; right:auto; padding-right:33px;}
.chart_box .util_bot .toggle_btn:before {width: 26px;}
.chart_box .util_bot .toggle_btn:after {right:13px;}
.chart_box .util_bot .toggle_btn.on:after {right:0;}
.chart_box .util_bot .toggle_btn > span {line-height:16px;}
.chart_box .util_bot .unit span {position: relative;}
.chart_box .util_bot .unit span + span {padding-left:8px;}
.chart_box .util_bot .unit span + span::before {display:block; content:''; position: absolute; width:3px; height:3px; top:50%; left:2px; transform: translateY(-50%); background-color:#bfbfbf;}
.chart_box .mid {width:100%;}
.chart_box .mid.n_2 {display:flex; gap: 10px; height:auto;}
.chart_box .mid.n_2 > div {flex:1;}
.chart_box .mid .risk_box {margin-top:0; margin-bottom:10px;}/*
.chart_box .mid .risk_box .risk_arrow {position: absolute; top:0; left:30%; width:10px; height:9px; background:url('../../../../img/fpm/risk_arrow.png') no-repeat center;}
*/
.chart_box .mid .risk_wrap {
	width:100%;
	height:100%;
	padding: 10px;
	border-radius: 10px;
	background: linear-gradient(135deg, #f3f3f3, #54606d00);
	box-sizing: border-box;
	box-shadow: inset 2px 1px 4px 7px #8e9cb30a;
}
.chart_box .mid .risk_wrap .table {border-top:1px solid #E4E4E4; min-width:340px;}
.chart_box .mid .risk_wrap .table thead {display: none;}
.chart_box .chart_info {transition:all 0.3s; visibility: hidden; opacity:0; position: absolute; padding:10px; width:calc(100% - 20px); height:calc(100% - 45px); bottom:10px; left:10px; background-color:#F1F1F1; z-index:9; box-sizing: border-box;}
.chart_box .chart_info .bot_txt {position: absolute; bottom:10px; left:10px; width:calc(100% - 20px); padding:5px 20px 5px 0; box-sizing: border-box; border-top:1px solid #cbcbcb;}
.chart_box .chart_info .close {position: absolute; display:block; width:20px; height:20px; bottom:10px; right:10px; transform:rotate(45deg);}
.chart_box .chart_info .close::before {position: absolute; display:block; content:''; width:20px; height:1px; background-color:#000;}
.chart_box .chart_info .close::after {position: absolute; display:block; content:''; top:0; left:50%; transform:translateX(-50%); width:1px; height:20px; background-color:#000;}
.chart_box .chart_info.on {visibility: visible; opacity:1;}
.chart_box .root_type {width:100%;}
.chart_box.tab_box {border:0; background-color:transparent; gap:0; box-shadow:none; border-radius:0; overflow: inherit;}
.chart_box.tab_box .head {height:30px;}
.chart_box.tab_box .head .util {margin-right:10px;}
/*.chart_box.tab_box .head::before {content:''; position: absolute; display:block; width:100%; height:1px; background-color:#c9c8ce; top:29px;}*/
.chart_box.tab_box .head .tab_btn {position: relative; margin-top:5px; margin:0; height:30px; background-color:transparent; border-color:#c9c8ce; padding:0 10px; border-radius:10px 10px 0 0; border-bottom:0;}
.chart_box.tab_box .head .tab_btn.on { color:#000; background-color:#fff; border-color:#c9c8ce; box-shadow:none; height:31px; border-bottom:1px solid #fff; z-index:2;}
.chart_box.tab_box .head .tab_btn:first-child {margin-left:5px;}
.chart_box.tab_box .head .tab_btn:hover {box-shadow:none;}
.chart_box.tab_box {padding:0;}
.chart_box.tab_box .head .tit {display: flex; gap:3px;}
.chart_box.tab_box .head .tab_btn:first-child {margin: 0;}/*
.chart_box.tab_box .head .tab_btn::before {content:''; display:block; position: absolute;
      background: url('../../../../img/fpm/tab_bot_be.png') no-repeat center;
      width: 10px;
      height: 10px;
	  bottom:-1px;
	  left:-10px;
	}
.chart_box.tab_box .head .tab_btn:first-child::before {display:none;}
.chart_box.tab_box .head .tab_btn::after {content:''; display:block; position: absolute; 
      background: url('../../../../img/fpm/tab_bot_af.png') no-repeat center;
      width: 10px;
      height: 10px;
	  bottom:-1px;
	  right:-10px;
	}
	  **/
.chart_box.tab_box .head .tab_btn.on::after {z-index:2;}
.chart_box.tab_box .mid {padding:20px 10px 10px; box-sizing: border-box; background-color:#fff; border:1px solid #C9C8CE; overflow: hidden; border-radius:0 10px 10px 10px; z-index: 1;}
.chart_box.tab_box .chart_info {height:calc(100% - 50px);}


/*테이블*/
.table {width:100%;}
.table thead th {height:30px; font-size:13px; background-color:#F1F1F1; text-align: center;}
.table thead th + th {border-left:1px solid #E4E4E4;}
.table tbody td {padding: 0 10px; height:28px; font-size:13px; border-bottom:1px solid #E4E4E4; box-sizing: border-box;}
.table tbody td + td {border-left:1px solid #E4E4E4;}
.table tbody td.b_l_1px {border-left: 1px solid #E4E4E4;}
.table .circle {display:flex; align-items: center; gap:4px;}
.table .circle:before {content:''; display:inline-block; width:12px; height:12px; border-radius:12px; /*border:2px solid #717171;*/ box-sizing: border-box;}
.table .circle.n_1:before {background-color: #1084da;}
.table .circle.n_2:before {background-color: #1daca3;}
.table .circle.n_3:before {background-color: #fdb759;}
.table .circle.n_4:before {background-color: #fd9c89;}
.table .circle.n_5:before {background-color: #ff4f51;}

/*위치*/
.loc_box {position:absolute; top:12px; left:14px; z-index:10; display:flex;}
.loc_box li.first {padding-left:25px;}
.loc_box li.first::before {width:20px; height:31px; background:url('../../../../img/fpm/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:13px; 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:31px;}
.loc_box li a:hover {text-decoration:underline;}
.loc_box li span {font-size:14px;}
.loc_box li:last-child span {font-weight: bold;}

/* 검색 */
.search_sel_box {display:flex; width:100%; gap:5px;}
.search_sel_box .sel_box {flex:1; min-width:90px;}
.search_sel_box select {width:100%; height:40px; border-radius:10px; font-size:16px; border:1px solid #C9C8CE; box-shadow: 0px 0px 8px 0px #d0ccde7a;}
.search_sel_box .ck_box {display:flex; align-items: center; gap:5px; cursor: pointer;}
.search_sel_box .ck_box span {text-wrap-mode:nowrap;}

/*지도*/
/*.map_box {position: fixed; top:0; left:0; width:100%; height:100%; background:linear-gradient(180deg, #e9f0fd, #f4f5f7);}
.map_box .img {width:100%; height:100%; background:url(../../../../img/fpm/map_01.png) no-repeat center;}*/
.map.on .map_aside .menuCnt .menuChart {display:block;}
.content.map .layout {height:calc(100vh - 70px); padding:0;}
.map_aside {position: absolute; top:0; left:0; height:100%; display:flex; z-index:10;}
.map_aside .menu {width:70px; height:100%; background-color:#fff; border-right:1px solid #d4d8e2; z-index:10;}
.map_aside .menu ul {display:flex; flex-direction: column; gap:30px; margin-top:20px;}
.map_aside .menu ul li {display:flex; align-items: center; justify-content: center;}
.map_aside .menu .menu_btn { display:flex; justify-content: center; align-items: center; position: relative; width:40px; height:40px; border-radius:5px; box-sizing: border-box;}
.map_aside .menu .menu_btn:before {z-index:1; display:block; content:''; width:40px; height:40px; background-position:center; background-repeat:no-repeat; transition:all 0.3s; }
.map_aside .menu .menu_btn::after {transition:all 0.3s; position: absolute; top:0; left:0; border-radius:5px; display:block; content:''; width:40px; height:40px; background: linear-gradient(45deg, #1daca3, #0a69d5); opacity:0;}
.map_aside .menu .menu_btn[data-btn="btn_all"]:before {background-image:url('../../../../img/fpm/btn_map_all.png');}
.map_aside .menu .menu_btn[data-btn="btn_n1"]:before {background-image:url('../../../../img/fpm/btn_map_n1.png');}
.map_aside .menu .menu_btn[data-btn="btn_n2"]:before {background-image:url('../../../../img/fpm/btn_map_n2.png');}
.map_aside .menu .menu_btn[data-btn="btn_n3"]:before {background-image:url('../../../../img/fpm/btn_map_n3.png');}
.map_aside .menu .menu_btn[data-btn="btn_n4"]:before {background-image:url('../../../../img/fpm/btn_map_n4.png');}
.map_aside .menu .menu_btn[data-btn="btn_n5"]:before {background-image:url('../../../../img/fpm/btn_map_n5.png');}
.map_aside .menu .menu_btn[data-btn="btn_n6"]:before {background-image:url('../../../../img/fpm/btn_map_n6.png');}
.map_aside .menu .menu_btn.on {background: linear-gradient(45deg, #1daca3, #0a69d5);}
/*.map_aside .menu .menu_btn:hover::after {opacity:1;}*/
/*.map_aside .menu .menu_btn[data-btn="btn_all"]:hover:before,*/
.map_aside .menu .menu_btn.on[data-btn="btn_all"]:before {background-image:url('../../../../img/fpm/btn_map_all_on.png');}
/*.map_aside .menu .menu_btn[data-btn="btn_n1"]:hover:before,*/
.map_aside .menu .menu_btn.on[data-btn="btn_n1"]:before {background-image:url('../../../../img/fpm/btn_map_n1_on.png');}
/*.map_aside .menu .menu_btn[data-btn="btn_n2"]:hover:before,*/
.map_aside .menu .menu_btn.on[data-btn="btn_n2"]:before {background-image:url('../../../../img/fpm/btn_map_n2_on.png');}
/*.map_aside .menu .menu_btn[data-btn="btn_n3"]:hover:before,*/
.map_aside .menu .menu_btn.on[data-btn="btn_n3"]:before {background-image:url('../../../../img/fpm/btn_map_n3_on.png');}
/*.map_aside .menu .menu_btn[data-btn="btn_n4"]:hover:before,*/
.map_aside .menu .menu_btn.on[data-btn="btn_n4"]:before {background-image:url('../../../../img/fpm/btn_map_n4_on.png');}
/*.map_aside .menu .menu_btn[data-btn="btn_n5"]:hover:before,*/
.map_aside .menu .menu_btn.on[data-btn="btn_n5"]:before {background-image:url('../../../../img/fpm/btn_map_n5_on.png');}
/*.map_aside .menu .menu_btn[data-btn="btn_n6"]:hover:before,*/
.map_aside .menu .menu_btn.on[data-btn="btn_n6"]:before {background-image:url('../../../../img/fpm/btn_map_n6_on.png');}
.map_aside .menu .menu_btn span {visibility: hidden; opacity:0; transition:all 0.3s; display:block; position:absolute; top:8px; left:55px; text-wrap-mode:nowrap; background-color:#000; color:#fff; height: 24px; line-height:24px; border-radius:5px; padding:0 10px;}
.map_aside .menu .menu_btn span::before {display:block; content:''; position:absolute; top:9px; left:-6px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 3px 6px 3px 0px;
	border-color: transparent #000 transparent transparent;
}
.map_aside .menu .menu_btn:hover span {left:48px; opacity:1; visibility: visible;}
.map_aside .menuCnt .menuSel {padding:20px; z-index:1; position: absolute; top:0;}
.map_aside .menuCnt .menuChart {
	position:relative; height:100%; padding-top:80px; background-color:#ffffff40; box-sizing: border-box;
	box-shadow: 3px 3px 11px 1px #0d53a726; display:none;
}
.map_aside .menuCnt .menuChart .chart_list {
	display: flex; flex-direction: column; gap:10px;
	overflow: hidden; overflow-y: auto; height:100%; padding:20px 20px 20px; box-sizing: border-box;
	border-top:1px solid #dad7e7;
}
.map .map_box {position: relative; top:0; right:0; padding-left:70px; width:100%; height:100%; box-sizing: border-box;}
.map .map_box .slider_wrap {position: relative; padding-top:20px; padding-left:120px; display:flex; justify-content:center;}
.map.on .map_box .slider_wrap {padding-left:588px; }
.map .map_box .slider_wrap .slider {position: relative; top:auto; left:auto; width:500px;}
.map .map_box .img {position:absolute; top:0; left:0; padding-left:70px; box-sizing: border-box; width:100%; height:100%;}
.map .map_box .img.bg {background: url('../../../../img/fpm/map_01.png') no-repeat left 300px top;}
.menuChart .btn-close {transition:all 0.3s; display:block; position: absolute; top:20px; right:-60px; border-radius:50px; width:41px; height:41px; background:#fff url('../../../../img/fpm/icon_btn-close.png') no-repeat center; box-shadow: 3px 3px 11px 1px #0d53a726;}
.menuChart .btn-close:hover {box-shadow: 3px 3px 11px 1px #0d53a740;}

/*지도 - 관심지역 누르세요*/
.map_ex {position: absolute; top:180px; right:200px; display:flex; justify-content: center; align-items: center; width:160px; height:160px; border-radius:50%; background:#ffffffab; box-shadow: 3px 3px 11px 1px #0d53a726; z-index:1;}
.map_ex .txt {font-size:20px; font-family:'SCoreDream5'; padding-top:40px; background:url('../../../../img/fpm/icon_map.svg') no-repeat top center; background-size:70px;}

/*지도 - 컨트롤버튼*/
.map_control {z-index: 1; position: absolute; bottom:330px; right:20px; background-color:#fff; border-radius:10px; box-shadow: 3px 3px 11px 1px #0d53a726;}
.map_control li + li {border-top:1px solid #d4d8e2;}
.map_control li .map_btn { position: relative; width:50px; height:50px; background-repeat: no-repeat; background-position: center;}
.map_control li .map_btn.btn_name {background-image: url('../../../../img/fpm/map_control_01.png');}
.map_control li .map_btn.btn_move {background-image: url('../../../../img/fpm/map_control_02.png');}
.map_control li .map_btn.btn_down {background-image: url('../../../../img/fpm/map_control_03.png');}
.map_control li.on .map_btn.btn_name {background-image: url('../../../../img/fpm/map_control_01_on.png');}
.map_control li.on .map_btn.btn_move {background-image: url('../../../../img/fpm/map_control_02_on.png');}
.map_control li.on .map_btn.btn_down {background-image: url('../../../../img/fpm/map_control_03_on.png');}
.map_control li .map_btn .txt {visibility: hidden; opacity:0; transition:all 0.3s; display:block; position:absolute; top:12px; right:58px; text-wrap-mode:nowrap; background-color:#000; color:#fff; height: 24px; line-height:24px; border-radius:5px; padding:0 10px;}
.map_control li .map_btn .txt::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 #000;
}
.map_control li .map_btn:hover span {right:51px; opacity:1; visibility: visible;}

/*지도 - 인구수 컨트롤*/
.map_ppltn {z-index: 1; width:50px; position: absolute; bottom:20px; right:20px; background-color:#fff; border-radius:10px; box-shadow: 3px 3px 11px 1px #0d53a726;}
.map_ppltn .plus, .map_ppltn .minus {width:100%; height:50px; background-repeat:no-repeat; background-position: center;}
.map_ppltn .plus {background-image:url('../../../../img/fpm/map_ppltn_plus.png');}
.map_ppltn .minus {background-image:url('../../../../img/fpm/map_ppltn_minus.png');}
.map_ppltn .ppltn_mid {position: relative; display:flex; justify-content: center; align-items: center; height:200px; border-top:1px solid #d4d8e2; border-bottom: 1px solid #d4d8e2; box-sizing: border-box;}
.map_ppltn .ppltn_mid .ppltn_range {position: relative; width:6px; height:90%; border-radius:20px; border:1px solid #e3e3e3; background-color: #e9f1ff; box-sizing: border-box;}
.map_ppltn .button_state {
	position: absolute; top:-2px; left:-6px;
	display:block; border-color:#a096d1; background:linear-gradient(to top, #6c6ccb, #4f50c3);
	width:14px; height:14px; box-shadow: 0 0 8px #0000007a; border:2px solid #fff; border-radius:50%;}
.map_ppltn	.ppltn_slider-range {width:6px; height:80px; background-color: #10119926;}
.map_ppltn .slider-amount {left:auto; right:40px;}
.map_ppltn .slider-amount:before {top:9px; right:-6px; border-width: 3px 0 3px 6px; left:auto;
	border-color: transparent transparent transparent #5459c1;}

/*버튼*/
.btn_util {transition:all 0.3s; display:block; width:20px; height:20px; border-radius:20px; background-color:#eff0fe; background-repeat:no-repeat; background-position:center;}
.btn_util.view {background-image: url('../../../../img/fpm/btn_util_view.png');}
.btn_util.down {background-image: url('../../../../img/fpm/btn_util_down.png');}
.btn_util:hover {background-color:#e0e1f8;}
.btn_img {display:inline-block; width:17px; height:17px;}
.btn-down {transition:all 0.3s; display:block; position: fixed; bottom:20px; right:20px; border-radius:10px; width:50px; height:50px; background:#fff url('../../../../img/fpm/btn_down.png') no-repeat center; box-shadow: 3px 3px 11px 1px #0d53a726; cursor: pointer; z-index:9;}
.btn-down:hover {box-shadow: 3px 3px 11px 1px #0d53a740;}

/*전입전출*/
.p_move_wrap {display: flex; flex-direction: column; gap:10px;}
.p_move_wrap .p_move_chart { height:146.5px; position: relative;}
.p_move_wrap .p_move_top {display:flex; gap:10px; padding:0 20px; align-items:center; height:160px; border-radius:10px; background: linear-gradient(90deg, #d8f0e2, #E6EDFF);box-sizing: border-box;}
.p_move_wrap .p_move_top > div {display:flex; flex-direction: column; flex: 1; gap:8px;}
.p_move_wrap .p_move_top .l_box {align-items: flex-start;}
.p_move_wrap .p_move_top .r_box {align-items:end;}
.p_move_wrap .p_move_top .move_top {font-size:12px; font-weight:bold; color:#fff; height:24px; line-height:23px; padding:0 5px; border-radius:5px; background:#0f6543;}
.p_move_wrap .p_move_top .r_box .move_top {background-color:#0e4bc3;}
.p_move_wrap .p_move_top .move_num {position: relative; width:100%; font-size:28px; font-weight:bold; font-family: 'SCoreDream7'; letter-spacing:-1px;}
.p_move_wrap .p_move_top .move_num .num {z-index:1; position: relative;}
.p_move_wrap .p_move_top .move_num .num span {display:block; font-size:16px; line-height:20px; font-family: 'SCoreDream3';}
.p_move_wrap .p_move_top .r_box  .move_num .num {text-align:right;}
.p_move_wrap .p_move_top .arrow {
	position: absolute;
	width: 100%;
	height: 10px;
	top:26px;
	background-color: #bbe1d2; /* 연한 보라색 */
	border-radius: 5px;
}
.p_move_wrap .p_move_top .arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%) rotate(315deg);
	width: 20px;
	height: 20px;
	border-right: 10px solid #bbe1d2;
	border-bottom: 10px solid #bbe1d2;
	background: transparent;
}
.p_move_wrap .p_move_top .r_box .arrow {
	transform:rotate(180deg);
	background-color:#aad8ff;
	top:5px;
}
.p_move_wrap .p_move_top .r_box .arrow::after {

	border-color:#aad8ff;
}
.p_move_wrap .rise {padding-bottom: 0;}
.p_move_wrap .rise p {font-size:14px; position: relative;}
.p_move_wrap .rise p:after {height:20px; }
.p_move_wrap .l_box .rise p {justify-content:flex-start;}
.p_move_wrap .r_box .rise p {justify-content:flex-end;}
.p_move_wrap .num_group .rise {margin-top:5px;}
.p_move_wrap + .p_move_wrap {margin-top:5px;}
.p_move_wrap + .p_move_wrap .p_move_top {background:linear-gradient(90deg, #E6EDFF, #E6E6FF) ;}
/*.p_move_wrap + .p_move_wrap .p_move_top .move_top {background-color: #125bff;}
.p_move_wrap + .p_move_wrap .p_move_top .r_box .move_top {background-color: #9d36ff;}*/

/*버튼*/
.tab_btn.style_1 {transition:all 0.3s; position: relative; padding:0 4px; height:20px; color:#555; border-radius:4px; background-color:#edededc2; box-sizing: border-box; border:1px solid #ddd;}
.tab_btn.style_1 span {position: relative; line-height:18px; font-size:13px; font-weight: 400;display:inline-block;}
.tab_btn.style_1.on span {font-weight:500;}
.tab_btn.style_1 + .tab_btn.style_1 {margin-left:2px;}
.tab_btn.style_1.on {border-color: #1983fb; background:linear-gradient(45deg, #1daca3, #1983fb); color:#fff; box-shadow: 2px 2px 9px 1px #0000004d;}
.tab_btn.style_1:hover {box-shadow: 2px 2px 9px 1px #0000004d;}
.tab_btn.style_1.m_r_5 {margin-right:5px;}

/*박스 두개*/
.box_n2 {display:flex; gap:10px;}
.box_n2 .root_type .type_txt .num_box .num {font-size:18px;}
.box_n2 .root_type .type_txt .num_box .num span {margin-bottom:0;}
.box_n2 .mid {height:45px;}
.box_n2 .root_type .type_txt.auto_hi {height:40px; justify-content:end;}
.box_n2 .root_type .type_txt .num_box {align-items:end;}

.root_type .type_txt.auto_hi {height:53.5px;}
.j_c_end {justify-content:end;}

/*박스 두개 타입_2*/
.box_c_n2 {flex-direction: column; }
.box_c_n2.color_n1 .chart_box {background:linear-gradient(45deg, #d8f0e2, rgb(168 193 94 / 19%)); border:0;}
.box_c_n2.color_n2 .chart_box {background:linear-gradient(45deg, #d1e1ff, #e4f1ff); border:0;}
.box_c_n2 .type_txt.auto_hi {height:45px;}

/*자세히보기 버튼*/
.chart_view {position:absolute; bottom:5px; right:5px; }
.chart_view .view_btn {display:block; width:30px; height:30px; background:#0f62fa78 url('../../../../img/fpm/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;}

/* 수치 표시 박스 */
.num_group{display:flex; flex-wrap:wrap; flex-direction:column; gap:5px; width:100%;}
.numbers{display:flex; justify-content:space-between; align-items:center; min-height:115px; padding:0 22px; background-color:#F5F5F5; border-radius:10px; box-sizing:border-box;}
.numbers .l_bx .ranks_mini {font-style:normal; font-size:20px; font-weight:600;}
.numbers .l_bx>strong{display:block; font-size:26px; font-weight:600; letter-spacing:-1px;}
.numbers .r_bx{text-align:right;}
.numbers .r_bx .prices{display:inline-flex; align-items:end; font-size:30px; line-height:30px; font-weight:600; letter-spacing:-1.5px;}
.numbers .r_bx span{font-weight:500; font-size:14px; letter-spacing:-1px;}
.numbers .r_bx span>em{font-style:normal;}

/* 작은 버전 */
.smal .numbers{min-height:60px; padding:0 15px; border-radius:8px;}
.smal .numbers .l_bx .ranks_mini {font-size:14px;}
.smal .numbers .l_bx>strong{font-size:18px;}
.smal .numbers .r_bx .prices{font-size:20px; line-height:24px;}
.smal .numbers .r_bx .prices span {line-height:16px; margin-left:2px;}
.smal .numbers .r_bx span{font-size:14px;}

/*현황*/
.main .content {height:calc(100% - 70px);}
.main .content .layout {height:100%; /*align-items:center;*/}
.root_type .type_txt {display:flex; flex-direction: column; height:61px;}
.root_type.no_top .type_txt {height:37px;}
.root_type .type_txt .num_box {display:flex; width:100%; justify-content: space-between; align-items: center;}
.root_type .type_txt .num_box .num {display:flex; align-items: end; font-family: 'SCoreDream7'; font-size:25px; letter-spacing:-2px;}
.root_type .type_txt .num_box .num span {font-size:16px; margin-bottom:3px;}
.root_type .type_txt .num_box .rise_type_02 {display:flex; flex-direction: column; align-items: flex-end;}
.root_type .type_txt .num_box .rise {padding-bottom:0;}
.root_type .type_txt .num_box .rise p {font-size:12px; }
.root_type .type_txt .txt_box span {display:inline-block; font-size:13px; font-weight:bold; color:#fff; height:24px; line-height:23px; padding:0 5px; border-radius:5px; background:linear-gradient(45deg, #1daca3, #1983fb);}
.root_type .chart {height:259px;}
.root_type.no_top .chart {height:283px;}
.chart_box.one_box .mid {height:731px;}

/*팝업*/
.popup_wrap {opacity:0; transition:all 0.3s; visibility: hidden; position: fixed; top:0; left:0; display:flex; justify-content: center; align-items: center; width:100%; height:100%; z-index:9999; background: #00000054;}
.popup_wrap .popup_box {position:relative; max-width:900px; width:90%; background-color:#fff; border: 1px solid #000000bd; box-shadow: 6px 7px 6px 1px #0000002e; box-sizing: border-box;}
.popup_wrap .popup_head {position: relative; display: flex; align-items: center; padding:0 50px 0 20px; width:100%; height:50px; background:#f4f5f7; box-sizing: border-box;}
.popup_wrap .popup_head .tit {font-size:18px; font-family: 'SCoreDream6'; color:#222;}
.popup_wrap .popup_close {position: absolute; display:block; width:30px; height:30px; top:10px; right:10px; transform:rotate(45deg);}
.popup_wrap .popup_close::before {position: absolute; display:block; content:''; width:30px; height:1px; background-color:#000;}
.popup_wrap .popup_close::after {position: absolute; display:block; content:''; top:0; left:50%; transform:translateX(-50%); width:1px; height:30px; background-color:#000;}
.popup_wrap .popup_cont {overflow:hidden; overflow-y: auto; padding:20px; height:500px; box-sizing: border-box;}
.popup_wrap .table tbody td, .popup_wrap .table thead th {font-size:16px; height:40px;}
.popup_wrap.on {visibility: visible; opacity:1;}
.popup_wrap .popup_cont .sankey_wrap {min-height:70px; padding:0; background-color:transparent; box-shadow:none;}
.popup_wrap .popup_cont .sankey_wrap .slider {width:calc(100% - 80px); top:10px; left:40px;}

/*지역_인구브리핑 팝업*/
.popup_wrap.type_2 .popup_box {max-width:100%; width:calc(100% - 60px); height:calc(100vh - 60px); overflow:hidden; border-radius:10px;}
.popup_wrap.type_2 .popup_head {padding-right:80px; height:60px; background:transparent; border-bottom:1px solid #E2E2E2;}
.popup_wrap.type_2 .popup_head .logo img {width:120px;}
.popup_wrap.type_2 .popup_close {top:10px; right:20px; background-color: #ECECEC; width:40px; height:40px; border-radius:50%;}
.popup_wrap .popup_close::before {width:20px; transform: translate(-50%, -50%); top:50%; left:50%;}
.popup_wrap .popup_close::after {height:20px; transform: translate(-50%, -50%); top:50%; left:50%;}
.popup_wrap.type_2 .popup_cont {max-height:calc(100vh - 120px); height:auto; overflow: auto; background-color:#fff;}
.popup_wrap.type_2 .popup_cont .layout.n_3 > div[class $="_box"] {display:flex; gap:10px; flex:1; flex-wrap:wrap; width:33.33%;}
.popup_wrap.type_2 .content .layout {padding:0; gap:20px; flex-wrap: wrap;}
.popup_wrap.type_2 .size_m.chart_box .mid {height:290px;}
.popup_wrap.type_2 .size_s.chart_box .mid {height:200px;}
.popup_wrap.type_2 .size_s.chart_box .mid > .util_bot + .chart {height:calc(100% - 24px);}
.popup_wrap.type_2 .chart_box .mid.type_1 {display:flex; flex-direction: column; justify-content: space-between;}
.popup_wrap.type_2 .chart_box {padding:0; border:0; box-shadow:none;}
.popup_wrap.type_2 .chart_box .tit {font-size:20px; font-weight:bold;}
.popup_wrap.type_2 .chart_box .mid {padding:10px; border-radius:10px; border:1px solid #E2E2E2; box-sizing: border-box; overflow: auto;}
.popup_wrap.type_2 .chart_box .mid.bg_gray {background-image:url('../../../../img/fpm/bg_graph.svg'); background-repeat:no-repeat; background-position: center; background-size: cover; border:0;}
.popup_wrap.type_2 .chart_box .chart_info {height:calc(100% - 60px);}
.popup_wrap.type_2 .circle_box {display:flex; justify-content: space-between; container-type: inline-size; container-name:circle_box;}
.popup_wrap.type_2 .circle_box .c_chart {width:40%; min-width:150px;}
.popup_wrap.type_2 .circle_box .c_txtbox {width:60%;}
.popup_wrap.type_2 .circle_box .c_txtbox .titbox .rise p:after {width:12px; height:12px; background-size:15px auto;}
.popup_wrap.type_2 .txtbox {font-size:12px; padding:6px 10px; border-radius:10px; width:100%; box-sizing: border-box;}
.popup_wrap.type_2 .txtbox + .txtbox {margin-top:5px;}
.popup_wrap.type_2 .txtbox .t_tit {font-size:12px; white-space: nowrap;}
.popup_wrap.type_2 .txtbox.type_1 {display:flex; padding:0; align-items:center; overflow:hidden;}
.popup_wrap.type_2 .txtbox.type_1 .t_tit {display:inline-flex; padding:8px 10px; height:100%; align-items:center; box-sizing: border-box;}
.popup_wrap.type_2 .txtbox.type_1.mint .t_tit {background-color:#E0EFEE;}
.popup_wrap.type_2 .txtbox.type_1.blue .t_tit {background-color:#E1F4FF;}
.popup_wrap.type_2 .txtbox.type_1 p {padding:8px 10px;}
.popup_wrap.type_2 .bg_gray {background-color:#F7F8FE;}
.popup_wrap.type_2 .f_c_222 {color:#222;}
.popup_wrap.type_2 .rise p {font-size:14px; gap:2px; font-weight:400; letter-spacing:0; align-items:center;}
.popup_wrap.type_2 .rise p:after { content:'▲'; height:auto; margin-top:2px; margin-left:0; margin-bottom:0; background:none; font-size:8px;}
.popup_wrap.type_2 .rise.reduction p:after {content:'▼';}
.popup_wrap.type_2 .rise p .calc_rate {margin-right:0;}
.popup_wrap.type_2 .titbox {margin-bottom:5px;}
.popup_wrap.type_2 .titbox .rise p {gap:5px; font-size:20px; font-weight:bold; justify-content:flex-start;}
.popup_wrap.type_2 .lt_tit {margin-bottom:5px; font-size:16px; padding-left:10px; position: relative; display:inline-block;}
.popup_wrap.type_2 .lt_tit::before {content:''; position: absolute; display:block; width:6px; height:6px; border-radius:50%; left:0; top:50%; transform: translateY(-50%);}
.popup_wrap.type_2 .lt_tit.mint::before {background-color:#1CC1C1;}
.popup_wrap.type_2 .lt_tit.blue::before {background-color:#3549F1;}
.popup_wrap.type_2 .roundbox {display:flex; flex-wrap: wrap; gap:4px; justify-content: space-between;}
.popup_wrap.type_2 .roundbox li {width:calc(50% - 5px); padding:2px; border-radius:20px; background-color:#fff; box-shadow: 0 0 10px #e4e5eb; box-sizing: border-box;}
.popup_wrap.type_2 .chart_box .mid.type_2 .twin_box {display:flex; justify-content: space-between; gap:10px; container-type: inline-size; container-name:twin_box;}
.popup_wrap.type_2 .chart_box .util_bot {margin-bottom:5px;}

/*지역_인구브리핑 4개박스*/
.popup_wrap.type_2 .chart_box .mid.briefing_wrap {padding:20px; align-content:space-between; container-type: inline-size; container-name:briefing_wrap;}
.briefing_wrap {height:540px; display:flex; justify-content: space-between; flex-wrap: wrap;}
.briefing_wrap .briefing_item {display:flex; padding: 10px; flex-direction: column; justify-content: center; width:calc(50% - 10px); height:calc(50% - 10px); background-color:#fff; border:1px solid #E8E9E9; box-shadow:0px 5px 0px #304CF0; border-radius:10px; box-sizing: border-box;}
.briefing_wrap > div:nth-child(1) .num_list {display:flex; flex-direction: column; gap:5px;}
.briefing_wrap > div:nth-child(2) {box-shadow:0px 5px 0px #4794F4;}
.briefing_wrap > div:nth-child(3) {box-shadow:0px 5px 0px #1DC1C1;}
.briefing_wrap > div:nth-child(4) {box-shadow:0px 5px 0px #45B4FC;}
.briefing_wrap .briefing_item .briefing_box {display:flex; flex-direction: column; align-items: center;}
.briefing_wrap .briefing_item .briefing_box + .briefing_box {position: relative; margin-top:15px;}
.briefing_wrap .briefing_item .briefing_box + .briefing_box::before {position: absolute; content: ''; display:block; top:-5px; left:50%; transform:translateX(-50%); width:calc(100% - 50px); border-top:1px dashed #CECECE;}
.briefing_wrap .briefing_item .item_tit {font-size:20px; display:inline-block; position: relative; margin-bottom:5px;}
.briefing_wrap .briefing_item .item_tit::before {content:''; display:block; position: absolute; width:100%; height:10px; bottom:0; left:0; background-color:#304DF0; opacity:0.15;}
.briefing_wrap > div:nth-child(2) .item_tit::before {background-color:#4794F4;}
.briefing_wrap > div:nth-child(3) .item_tit::before {background-color:#1DC1C1;}
.briefing_wrap > div:nth-child(4) .item_tit::before {background-color:#45B4FC;}
.briefing_wrap .f_s_l {font-size:20px; font-weight: bold;}
.briefing_wrap .f_s_m {font-size:16px; font-weight: bold;}
.briefing_wrap .num_list.type_1 {display:flex; gap:10px; align-items: center;}

/*지역_인구브리핑 인구수*/
.p_numchart {container-type: inline-size; container-name: p_numchart;}
.p_numchart .twin_box {display:flex; justify-content: space-between; height:calc(100% - 24px);}
.p_numchart .num_box {width:150px; background:linear-gradient(45deg, #866CE2, #375ADE); box-shadow: 0 0 5px #6b44de85; border-radius:10px; overflow:hidden; border:1px solid #7e52dd2e;}
.p_numchart .num_box .top {display:flex; justify-content: center; align-items: center; width:100%; height:50px; border-radius:10px; background:linear-gradient(45deg, #A893F1, #6786FA); }
.p_numchart .num_box .top strong {font-size:20px; font-weight:bold; color:#fff;}
.p_numchart .num_box .bottom {display:flex; flex-direction: column; justify-content: center; align-items: center; font-size:14px; font-weight:bold; color:#fff; width:100%; height:calc(100% - 50px);}
.p_numchart .num_box .bottom .rise p {color:#FFCEDF; font-size:18px;}
.p_numchart .num_box .bottom .rise.reduction p {color:#CEFEFF;}
.p_numchart .chart {width:calc(100% - 170px);}

/*지역_인구브리핑 테이블*/
.table_type_1 {overflow: auto;}
.table_type_1 table {font-size:12px; width:100%; min-width:650px;}
.table_type_1 thead {background-color:#DCEEFF;}
.table_type_1 th {font-weight: bold; color:#222; word-break: keep-all;}
.table_type_1 th, .table_type_1 td {border-bottom:1px solid #E4E4E4; padding:1px 5px; text-align: center; height:40px; box-sizing: border-box;}
.table_type_1 td {word-break:break-all;}
.table_type_1 .c_skyblue {background-color:#E6FCFF;}
.table_type_1 .bg_red {background-color: #ffcebb47;}

.table_type_2 {overflow: auto;}
.table_type_2 table {font-size:12px; width:100%; }
.table_type_2 thead {background-color:#DCEEFF;}
.table_type_2 th {color:#fff; word-break: keep-all;}
.table_type_2 th, .table_type_2 td {height:36px; border-bottom:1px solid #E4E4E4; padding:6px 5px; text-align: center; font-weight: bold; box-sizing: border-box;}
.table_type_2 td {word-break:break-all;}
.table_type_2 .c_skyblue {background-color:#E6FCFF;}
.table_type_2.mint thead {background-color:#1DACA3;}
.table_type_2.blue thead {background-color:#1D48AC;}


/*텍스트*/
.tit_h3 {font-size:20px; line-height:24px; font-family: 'SCoreDream6'; color:#222; padding-left:25px; background:url('../../../../img/fpm/icon_tit_h3.png') no-repeat left 0 top 1px;}
.tit_h4 {position: relative; font-size:18px; line-height:22px; font-family: 'SCoreDream6'; color:#222; padding-left:10px; margin-bottom:0;}
.tit_h4:after {position: absolute; display:block; content:''; width:2px; height:12px; top:5px; left:0; background-color:#5faaff;}
.txt {font-size:16px; color:#555;}

/*텍스트 리스트*/
.tit_list {font-family: 'SCoreDream6'; margin-bottom:5px; font-size:18px;}
.bl_list > li {position: relative; padding-left:12px; font-size:16px; color:#555; box-sizing: border-box;}
.bl_list > li::before {content: ''; position: absolute; display:block; width:5px; height:5px; background-color:#c9c8ce; border-radius:10px; top:11px; left:0;}

/*팝업 텍스트 두박스*/
.txt_n_2 {display: flex; justify-content: space-between; gap:30px;}
.txt_n_2 .txt_box_gray {flex:1; background-color:#f3f3f3; padding:20px; border-radius:10px 10px 0px 10px; box-sizing: border-box;}

/* 로딩중 */
.loading_wrap {
	position: fixed; top:0; left:0; width:100%; height:100%; background: #ffffff9e; z-index:9999;
	display:flex; justify-content: center; align-items: center;
}
#loading {
	width: 100px;
	height: 100px;
	border: 3px solid #2680eb26;
	box-sizing: border-box;

	border-top-color: #1983fb;
	border-bottom-color: #1983fb;

	border-radius: 100%;
	animation: spin 1s ease-in-out infinite;
}

#loading-text {
	position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);
	font-size:16px; font-family: 'SCoreDream6'; color:#004da9; opacity:0;
	animation: loading-text-opacity 2s linear 0s infinite normal;
}


/*25.08.21 지역인구 맵 하단*/
.grid-stack .map {padding-bottom:40px;}
.grid-stack .map .risk_box {position: absolute; bottom:10px; padding:0 10px; box-sizing: border-box; }
.grid-stack .map .risk_box .risk_bar div[class^="bar_"] {height:16px;}
.grid-stack .map .risk_bar [class$="1"] {text-align:left; border-radius:5px 0 0 5px;}
.grid-stack .map .risk_bar [class$="3"] {text-align:center;}
.grid-stack .map .risk_bar [class$="5"] {text-align:right; border-radius:0 5px 5px 0;}
.grid-stack .map .risk_bar .txt {font-size:11px; padding: 0 7px; color:#fff; line-height:16px;}

/*25.08.21 인구이동지도 추가*/
.map_aside .menuChart .chart_box {width:532px; height:220px;}
.map_wrap #header .cr_selBox {display:flex; flex-wrap:wrap;}
.map_wrap #header .ck_box {display:flex; align-items: center; gap:5px; cursor: pointer; margin-left:5px;}
.map_wrap #header .ck_box span {text-wrap-mode:nowrap; color:#fff;}
.chart_box .head .tit {white-space:nowrap; text-overflow: ellipsis; overflow:hidden;}
#header .m_menu_btn, #header .menu_tit, #header .m_menu_close, #header .menu_wrap_bg {display:none;}
.map_aside .menuCnt .menuSel  {display:none;}
.no_scroll {overflow: hidden;}
.scroll {overflow: auto;}
.map.on .map_aside .menuCnt .menuChart {padding-top:0;}
.map_aside .menuCnt .menuChart .chart_list {border-top:0;}
#header .region_name {display:flex; align-items: center; height:30px; padding:0 10px; border-radius:5px; box-sizing: border-box; white-space:nowrap; text-overflow: ellipsis; overflow:hidden;}
#header .region_name strong {font-size:16px;}

/*25.12.17 2d, 3d 라디오버튼*/
.map_view_radio {position:absolute; display:flex; gap:10px; left:150px; top:20px; z-index:99;}
.map.on .map_view_radio {left:728px;}
.map_view_radio .label-box {position: relative; cursor: pointer;}
.map_view_radio .label-box .check-icon {transition:all 0.3s; display:block; border-radius:50%; width:41px; height:41px; background-color:#fff; background-repeat: no-repeat; background-position: center; box-shadow:3px 3px 11px 1px #0d53a726; box-sizing: border-box;}
.map_view_radio .view_radio-box[data-type="2d"] .check-icon {background-image: url('../../../../img/fpm/icon_map_01_off.png');}
.map_view_radio .view_radio-box[data-type="3d"] .check-icon {background-image: url('../../../../img/fpm/icon_map_02_off.png');}
.map_view_radio .label-box .txt {z-index: 1; display:block;	visibility: hidden; position: absolute; bottom:-30px; left:50%; transform:translateX(-50%);opacity:0; transition:all 0.3s; text-wrap-mode:nowrap; background-color:#000; color:#fff; height:24px; line-height:24px; border-radius:5px; padding:0 10px; }
.map_view_radio .label-box .txt::before {display:block; position: absolute; content:''; top:-3px; left:50%; width:0px; height:0px;
	border-width: 3px 0 3px 6px; border-style: solid; border-color: transparent transparent transparent #000; transform:rotate(270deg) translateX(50%);}
.map_view_radio .label-box:hover .txt {bottom:-40px; opacity:1; visibility: visible;}
.map_view_radio .view_radio-box[data-type="2d"] [type=radio]:checked + .label-box .check-icon {border:1px solid var(--point-blue); background-image: url('../../../../img/fpm/icon_map_01_on.png');}
.map_view_radio .view_radio-box[data-type="3d"] [type=radio]:checked + .label-box .check-icon {border:1px solid var(--point-blue); background-image: url('../../../../img/fpm/icon_map_02_on.png');}

@keyframes spin {
	100%
	{
		transform: rotate(180deg);
	}
}

@keyframes loading-text-opacity {
	0%  {opacity: 0}
	20% {opacity: 0}
	50% {opacity: 1}
	100%{opacity: 0}
}

/*25.08.21 반응형추가*/

@media all and (max-width : 1800px){

	.layout.n_4 {flex-wrap:wrap;}
	.layout.n_4 .cont_box {flex:1 1 40%;}

}

@media all and (max-width : 1700px){
	.chart_box .mid.n_2 {flex-direction: column;}
	.chart_box {width:100%;}
}

@media all and (max-width : 1500px){
	.trend_list.n_5 li {width:calc((100% - 60px)/4);}
	.center_box.s_size {width:350px;}

}

@media all and (max-width : 1400px){

	/*헤더*/
	#header {height:50px;}
	#header .logo a img {height:18px;}
	#header .logo_wrap .logo a, #header .logo_wrap .logo span  {font-size:20px; letter-spacing:-1px;}
	#header .cr_selBox {margin-top:0;}
	#header .layout {justify-content:flex-start; gap:5px;}
	#header .region_name strong {font-size:14px;}

	/*모바일 버튼*/
	#header .m_menu_btn {display: flex; flex-direction: column; justify-content: space-between; width:28px; height:22px; position:absolute; right:20px; top:50%; margin-top:-11px; transition:all 0.2s;}
	#header .m_menu_btn span {font-size:0; text-indent: -9999999px; display: block; width:28px; height:2px; background:#fff;}
	#header .m_menu_btn::before {display: block; content: ""; width:28px; height:2px; background:#fff; transition:all 0.2s;}
	#header .m_menu_btn::after {display: block; content: ""; width:28px; height:2px; background:#fff; transition:all 0.2s;}

	/*모바일 메뉴*/
	#header .menu_wrap {
		display:none; gap:20px;
		flex-direction:column; box-sizing: border-box; align-items:flex-end;
		position: fixed; top:0; right:0; width:100%; max-width:400px; height:100%;  z-index:999; background:linear-gradient(90deg, #2F4480, #17172B);
	}
	#header .menu_wrap.on {display:flex;}
	#header .menu_wrap_bg {display:none; position: absolute; top:0; right:0; width:100vw; height:100vh; background-color: rgba(0, 0, 0, 0.7); }
	#header .menu_wrap.on + .menu_wrap_bg {display:block;}
	#header .menu_tit {display: flex; width:100%; border-bottom:1px solid #ffffff24; padding-left:10px; height:50px; align-items: center; box-sizing: border-box;}
	#header .menu_tit span {font-family: 'SCoreDream3'; font-size: 20px; color:#fff;}
	#header .gnb {flex-direction: column; padding:0 10px; width:100%; box-sizing: border-box; height:auto; align-items:flex-start; gap:30px;}
	#header .gnb > li {height:auto; align-items:flex-start; flex-direction:column;}
	#header .gnb > li ul {position: relative; top:auto; left:auto; transform:none; background-color: transparent; border:0; padding:20px 0 0; text-align:left; box-shadow:none;}
	#header .gnb > li ul li a {color:#fff;font-size:16px;}
	#header .gnb > li ul li:hover a {background-color:transparent;}
	#header .gnb > li.hover ul {animation:none; transition:all 0.3s; opacity:1;}
	#header .gnb > li ul li.on a:after {background-color: #24FFF0;}
	#header .info_btn {margin-right:10px;}
	#header .m_menu_close {display:flex; transition:all 0.3s; flex-direction:column; justify-content:space-between; position:absolute; top:12px; right:10px; width:28px; height:22px;}
	#header .m_menu_close::before {display: block; content: ""; width:28px; height:2px; background:#fff; position:absolute; top:11px; transform: rotate(45deg);}
	#header .m_menu_close::after {display: block; content: ""; width:28px; height:2px; background:#fff; position:absolute; top:11px; transform: rotate(135deg);}
	#header .m_menu_close:hover,
	#header .m_menu_close:focus {transform: rotate(180deg);}

	/*인구이동지도*/
	.content.map .layout {height:calc(100vh - 50px);}

}

@media all and (max-width : 1200px){
	.trend_list.n_5 li {width:calc((100% - 40px)/3);}
	.trend_list.n_4 li {width:calc((100% - 20px)/2);}
	.search_sel_box select {padding:5px; font-size:14px; padding:0;}

	.p_move_wrap .p_move_top .move_num {font-size:22px;}
	.layout.n_4 > .cont_box:first-child .root_type .type_txt .num_box .num {font-size:20px;}
	.layout.n_4 > .cont_box:first-child .root_type .type_txt .num_box .num span {font-size:14px !important;}

	/*인구이동지도*/
	.map_aside .menuCnt .menuSel {padding: 20px 10px;}
	.search_sel_box .sel_box {min-width:70px;}
	.search_sel_box .sel_box.n_2 {min-width:50px;}
	.search_sel_box .sel_box.n_3 {min-width:50px;}
	.search_sel_box .ck_box span {font-size:13px;}
	.map_aside .menuCnt .menuChart .chart_list {padding:20px 10px;}
	.map_aside .menuChart .chart_box {width:360px;}
	.map.on .map_box .slider_wrap {padding-left: 570px;}
	.map_ex {right:100px;}

	.map.on .map_view_radio {left:537px;}

}

@media all and (max-width : 960px){

	.layout.n_4 .cont_box {flex:1 1 50%;}
	.trend_list.n_4 li {width:100%;}
	.statsCnt {padding:10px;}
	.trend_list {gap:10px;}
	.trend_list .trend_box {padding:10px;}
	.statTitle h2 {font-size:20px; word-break:keep-all;}
	.toggle_btn {top:5px;}
	.statSubTitle .tit {font-size:16px;}
	.statSubTitle .unit {font-size:14px;}
	.moreBox .trend_list {padding:0 20px 60px;}
	.more_title .unit {font-size:14px;}
	.more_title {padding:20px 20px 0 60px;}
	.more_title .tit {font-size:20px;}
	.trend_list li .price {margin:5px 0;}
	.trend_list li .price strong {font-size:22px;}
	.trend_list li h3 span.tt {font-size:16px;}
	.rise p {font-size:16px;}
	.rise p:after {margin-bottom:4px;}
	.moreBox {left:10px;}

	.layout.n_4 > .cont_box:first-child .root_type .type_txt .num_box .num {font-size:16px}

}

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

	/*레이아웃*/
	.box_n2 {flex-direction: column;}
	.content .layout {padding:10px;}

	/*헤더*/
	#header {height:auto;}
	#header .layout {align-items:flex-start; padding:0 10px;}
	#header .layout::before {content:'';display:block;position: absolute;top:50px;left:0;width:100%;height:calc(100% - 50px);background: #0000007a;z-index: -1;}
	#header .logo_wrap {flex-direction: column; align-items:flex-start; padding-top:12px; padding-bottom:10px; gap:23px;}
	#header .logo_wrap {padding-top: 14px;}
	#header .logo_wrap .logo a, #header .logo_wrap .logo span {font-size:16px;}
	#header .logo a img {height:15px;}
	#header .m_menu_btn {top:15px; right:10px; margin-top:0;}
	#header .cr_selBox select {font-size:16px;}

	/*현황 탭박스*/
	/*.chart_box.tab_box .head .tit {width:100%;}
	.chart_box.tab_box .head .tab_btn {flex:1;}
	.chart_box.tab_box .head .util {position:absolute; top:40px; right:0; z-index:5;}
	.chart_box.tab_box .mid {padding-top:40px; border-radius:0 0 10px 10px; height:213px !important;}*/

	/*도움말 팝업*/
	.popup_cont .txt_n_2 {flex-direction: column; gap:10px;}

	/*지역인구이동*/
	.content.map .layout {height:calc(100vh - 100px);}
	.map_aside .menuCnt .menuSel {display:none;}
	.map_aside .menuCnt .menuChart .chart_list {padding:10px;}
	.map.on .map_aside .menuCnt .menuChart {padding-top:0; border-top:0;}
	.map_ex {transform:translateX(-50%); right:auto; left:50%; top:100px; width:130px; height:130px;}
	.map_ex .txt {font-size:18px; line-height:20px;}
	.map_aside .menu {width:40px;}
	.map_aside .menu ul {gap:15px;}
	.map_aside .menu .menu_btn {width:35px; height:35px;}
	.map_aside .menu .menu_btn:before {width:35px; height:35px;}
	.map_aside .menu .menu_btn:after {width:35px; height:35px;}
	.map_aside .menuChart .chart_box {width:100%;}
	.map .map_box {padding-left:40px;}
	.map .map_box .slider_wrap {padding:20px 10px 0 10px;}
	.map.on .map_box .slider_wrap {padding:20px 10px 0 10px;}
	.slider #areaNm {font-size:16px;}
	.map_aside .menu .menu_btn[data-btn="btn_n5"]:before {background-size:30px;}
	.menuChart .btn-close {width:30px; height:30px; top:10px; right:-40px; background-size:14px;}
	.map_control  {right:10px; bottom:220px;}
	.map_control li .map_btn {width:40px; height:40px;}
	.map_control li .map_btn.btn_move {background-size:34px;}
	.map_ppltn {right:10px; bottom:10px; width:40px;}
	.map_ppltn .plus, .map_ppltn .minus {height:40px;}
	.map_ppltn .ppltn_mid {height:120px;}
	.map_ppltn .button_state {top:0;}
	.map .map_box .img {padding-left:40px;}

	.map.on .map_aside {width:calc(100% - 60px);}
	.map.on .map_aside .menuCnt {width:calc(100% - 40px);}

	.map_aside .menu .menu_btn span {display:none !important;}
	.map_aside .menu .menu_btn:hover span{display:none; opacity:0;}
	.map_control li .map_btn .txt {display:none;}
	.map_control li .map_btn:hover span {display:none; opacity:0;}

	.map.on .map_view_radio {left:auto; right:20px; top:50px;}
	.map_view_radio {top:20px; left:60px; flex-direction:column; }
	.map_view_radio .label-box .check-icon {width:30px; height:30px; background-size:30px;}
	.map_view_radio .label-box .txt {display:none;}

}

@media all and (max-width : 640px){
	#header .cr_selBox select {font-size:12px;}
	.map_wrap #header .ck_box {font-size:12px;}
	.layout.n_4 > .cont_box:first-child .root_type .type_txt .num_box .num {flex-direction:column; align-items:flex-start;}
	.layout.n_4 > .cont_box:first-child .root_type .type_txt .num_box .rise p {align-items:center;}
}

/*지역_인구브리핑*/

@container briefing_wrap (max-width: 490px) {
	.briefing_wrap .briefing_item .item_tit {font-size: 18px;}
	.briefing_wrap .f_s_l {font-size:17px;}
	.briefing_wrap .num_list.type_1 {gap:5px;}
}

@container p_numchart (max-width: 490px) {
	.p_numchart .num_box .top strong {font-size:18px;}
	.p_numchart .num_box .bottom .rise p {font-size:16px;}
}

@container circle_box (max-width: 490px) {
	.popup_wrap.type_2 .titbox .rise p {font-size:18px;}
	.popup_wrap.type_2 .lt_tit {font-size:15px;}
}

@media all and (max-width : 1500px){
	.popup_wrap.type_2 .rise p {font-size:12px;}
	.briefing_wrap .briefing_item .briefing_box {font-size:12px;}
	.popup_wrap.type_2 .chart_box .tit {font-size:16px;}
}

@media all and (max-width : 1450px){
	.popup_wrap.type_2 .chart_box .chart_info {height:calc(100% - 55px);}
	.popup_wrap.type_2 .popup_cont .layout.n_3 > div[class $="_box"] {width:50%;}
	.briefing_wrap {height:534px;}
	.popup_wrap.type_2 .right_box .chart_box .mid.type_1, .popup_wrap.type_2 .right_box .chart_box .mid.type_2 {height:auto;}
	.popup_wrap.type_2 .chart_box .mid.type_1 .txtbox {margin-top:10px;}
}

@media all and (max-width : 1024px){
	.popup_wrap.type_2 .popup_cont .layout.n_3 > div[class $="_box"] {width:100%;}
	.popup_wrap.type_2 .chart_box .mid.type_1, .popup_wrap.type_2 .chart_box .mid.type_2 {height:auto;}
}

@media all and (max-width : 800px){
	.briefing_wrap  {height:450px;}
	.briefing_wrap .briefing_item .item_tit {font-size: 18px;}
	.briefing_wrap .f_s_l {font-size:17px;}
	.briefing_wrap .num_list.type_1 {gap:5px;}

	.popup_wrap.type_2 .size_m.chart_box .mid {height:auto;}
	.popup_wrap.type_2 .circle_box {flex-direction: column;}
	.popup_wrap.type_2 .circle_box .c_chart {width:100%; height:200px;}
	.popup_wrap.type_2 .circle_box .c_txtbox {width:100%;}

	.popup_wrap.type_2 .chart_box .mid.type_2 .twin_box {flex-direction: column;}
	.popup_wrap.type_2 .titbox .rise p {flex-wrap:wrap; justify-content:center;text-align:center;}
	.popup_wrap.type_2 .titbox .rise span.f_c_222 {width:100%;}
}


@media all and (max-width : 600px){
	.briefing_wrap {gap:15px; height:auto;}
	.briefing_wrap .briefing_item {width:100%; height:auto;}
	.popup_wrap.type_2 .size_s.chart_box .mid.p_numchart {height:auto;}
	.p_numchart .twin_box {flex-direction: column;}
	.p_numchart .num_box {width:100%; display:flex;}
	.p_numchart .num_box .top, .p_numchart .num_box .bottom {padding:10px 0; height:auto; box-sizing: border-box;}
	.p_numchart .chart {width:100%; height:200px;}
	.p_numchart .num_box .bottom .rise p {font-size:14px;}
	.p_numchart .num_box .top strong {font-size:16px;}
}