@charset "UTF-8";

.daemin * {
	font-family:'GmarketSans', sans-serif;
}
.naebu * {
	font-family:'NotoSansKr', sans-serif;
}

.contWrap select {
	appearance:none;
	min-width:90px;
	height:35px;
	background:url(/images/sp/iconDownArrow.png) no-repeat 95% center / 6px;
	padding:0 0.5rem;
	border:1px solid #c1c1c1;
	border-radius:5px;
}
.contWrap input[type=text] {
	min-width:90px;
	height:35px;
	border:1px solid #c1c1c1;
	border-radius:5px;
}
/*테이블*/
.tableWrap {
	height:100%;
	border-top:2px solid #BB021F;
}
.listTable {
	width:100%;
	height:100%;
}
.listTable thead th {
	padding:0.5rem 0.25rem;
	background:#F5F2F2;
	color:#BB021F;
	text-align:center;
}
.listTable tbody tr {
	border-bottom:1px solid #ccc; 
}
.listTable tbody tr th {
	background:#fffcfc;
	padding:0.5rem 0.25rem;
	font-weight:normal;
	color:#BB021F;
	text-align:center;
	border-right:1px dashed #ccc;
} 
.listTable tbody td:first-of-type {
	padding:0.5rem 0.25rem;
	text-align:center;
}
.listTable tbody td {
	padding:0.5rem 0.25rem;
	color:#464646;
	text-align:center;
}
.btnTip {
	position:relative;
	width:30px;
	height:30px;
	background:#f2f3f5;
	border-radius:50%;
	transition:all .2s linear;
	cursor:pointer;
}
.btnTip:hover {
	background:#262626;
}
.btnTip:before {
	content:"?";
	position:absolute;
	top:53.5%;
	left:50%;
	font-size:18px;
	font-weight:bold;
	color:#464646;
	transform:translate(-50%, -50%);
}
.btnTip:hover:before {
	color:#fff;
}
.btnCls {
	position:relative;
	background:transparent;
	font-size:32px;
	font-weight:normal;
	color:#676767;
	line-height:1;
	cursor:pointer;
}
.bgDark {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%; 
	background:rgba(0, 0, 0, .25);
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
	z-index:9;
	display:none;
}
.contWrap {
	max-width:1400px;
	width:100%;
	margin:1rem auto;
}
.tabBox {
	display:flex;
	align-items:center;
	border-left:1px solid #d3c2c2;
	border-bottom:1px solid #d3c2c2;
}
div.contWrap ul.tabBox > li {
	position:relative;
	width:auto;
	min-width:calc(40% / 3);
}
.tabBox > li.active:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:4px;
	background:#ea3c3c;
}
.tabBox > li.active:after {
	content:"";
	position:absolute;
	bottom:-2px;
	left:0; 
	width:calc(100% - 1px);
	height:4px;
	background:#fff;
}
.tabBox > li > a {
	display:block;
	background:#fbf2f2;
	padding:15px 10px;
	color:#a57c7c;
	border-top:1px solid #d3c2c2;
	border-right:1px solid #d3c2c2;
	text-align:center;
	transition:all .15s linear;
}
.tabBox > li:hover > a {
	background:#ea3c3c;
	color:#fff;
}
.tabBox > li.active > a {
	background:#fff;
	color:#ea3c3c;
}
.conditionBox {
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	align-items:center;
}
.conditionBox > li {
	display:flex;
	align-items:center;
	justify-content:flex-end;
	width:auto;
	margin-left:1rem;
}
.conditionBox > li.tip .tipCont {
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	max-width:460px;
	width:100%;
	background:#fff;
	padding:1.5rem 1rem;
	border-radius:10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
	z-index:10;
	display:none;
}
.conditionBox > li.tip .tipCont .tipHeader {
	display:flex;
	justify-content:space-between;
	align-items:center;
	border-bottom:1px solid #262626;
}
.conditionBox > li.tip .tipCont .title {
	position:relative;
	font-size:18px;
	font-weight:bold;
	transform:rotate(-0.03deg);
}
.conditionBox > li.tip .tipCont .title:before {
	content:"";
	position:absolute;
	top:-12px;
	left:0;
	width:8px;
	height:8px;
	background:#ea3c3c;
	border-radius:50%;
}
.conditionBox > li.tip .tipCont .title:after {
	content:"";
	position:absolute;
	top:-12px;
	left:11px;
	width:8px;
	height:8px;
	background:#ffc900;
	border-radius:50%;
}
.conditionBox > li.tip .tipCont ul {
	background:#f2f3f5;
	margin-top:1rem;
	padding:0.5rem 0;
}
.conditionBox > li.tip .tipCont ul > li {
	position:relative;
	padding:0.5rem 0.5rem 0.5rem 1.5rem;
	transform:rotate(-0.03deg);
}
.conditionBox > li.tip .tipCont ul > li:before {
	content:"";
	position:absolute;
	top:14px;
	left:0.75rem;
	width:4px;
	height:4px;
	background:#464646; 
	border-radius:50%;
}
.conditionBox > li.chul {
	position:relative;
	width:100%;
	justify-content:flex-end;
	margin-bottom:1rem;
	padding:0 1rem;
	font-size:14px;
	color:#464646;
}
.conditionBox > li.chul:before {
	content:"";
	position:absolute;
	top:calc(50% - 0.15rem);
	right:0;
	width:110px;
	height:30px;
	background:#f2f3f5;
	border-radius:30px;
	transform:translateY(-50%);
	z-index:-1;
}
ul.chul {
	margin:2rem 0 0.5rem 0;
	display:flex;
	justify-content:flex-end;
}
ul.chul > li {
	display:block;
	background:#f2f3f5;
	padding:0.35rem 0.75rem 0.25rem 0.75rem;
	border-radius:30px;
	color:#676767;
	font-size:14px;
}
.conditionBox > li p {
	flex-shrink:0;
	margin-right:0.5rem;
}
.conditionBox > li select {
	width:auto;
	min-width:80px;
	flex-shrink:0;
}
.conditionBox > li.double select {
	width:80px;
}
.conditionBox > li.double select + select {
	margin-left:0.5rem;
}
.conditionBox > li.double select + input[type=text] {
	margin-left:0.5rem;
}
.jobcompare .chartSection {
	display:flex;
	justify-content:space-between;
}
.jobcompare .chartSection > .chartWrap {
	width:47.5%;
}
.jobcompare .chartSection > .chartWrap > .sbjt {
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:bold;
	width:100%;
	background:#f2f3f5;
	margin-bottom:1rem;
	padding:0.75rem 1rem;
	font-size:18px;
	text-align:center;
	border:1px solid #e1e1e1;
	border-radius:10px;
}
.jobcompare .chartSection > .chartWrap > .sbjt img {
	height:32px;
	padding-right:0.5rem;
}
.chartWrap {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding:1rem 0 2rem 0;
}
.chartWrap > div.chartBox {
	width:48.5%;
	margin-bottom:2.5rem;
}
.chartWrap > div.chartBox .titleBox {
	display:flex;
	justify-content:space-between;
	margin-bottom:0.5rem;
	padding:0 1rem;
	border:1px solid #ececec;
	border-radius:10px;
	box-shadow:0 0 12px rgba(0,0,0,.075);
	transition:all .15s linear;
}
.chartWrap > div.chartBox:hover .titleBox {
	border:1px solid #c27e7e;
}
.chartWrap > div.chartBox .titleBox p.title {
	position:relative;
	padding:0.75rem 0;
	font-weight:bold;
}
.chartWrap > div.chartBox .titleBox p.title:before {
	content:"";
	position:absolute;
	top:-4px;
	left:0;
	width:8px;
	height:8px;
	background:#ea3c3c;
	border-radius:50%;
}
.chartWrap > div.chartBox .titleBox p.title:after {
	content:"";
	position:absolute;
	top:-4px;
	left:11px;
	width:8px;
	height:8px;
	background:#ffc900;
	border-radius:50%;
}
.chartWrap > div.chartBox .titleBox p.unit {
	padding:1rem 0;
	font-size:14px;
	color:#676767;
}
.chartWrap > div.chartBox .chart {
	display:flex;
	justify-content:space-between;
	min-height:280px;
	padding:1rem;
	border:1px solid #ececec;
	border-radius:10px;
	transition:all .15s linear;
}
.chartWrap > div.chartBox:hover .chart {
	border:1px solid #c27e7e;
}
div[class*=wide] .chartWrap > div.chartBox .chart > div[id*=chart] {
	width:75%;
}
.jobcompare .chartSection > div.chartWrap div.chartBox .chart {
	display:block; 
}
.jobcompare .chartSection > div.chartWrap div.chartBox .chart > div[id*=chart] {
	width:100%;
} 
div[class*=wide] .chartWrap > div.chartBox .chart > ul {
	width:24%;
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	margin-top:-1.25rem;
}
div[class*=wide] .chartWrap > div.chartBox .chart > ul > li.value {
	font-size:2rem;
	font-weight:bold;
	letter-spacing:-0.1rem;
}
div[class*=wide] .chartWrap > div.chartBox .chart > ul > li.compare {
	letter-spacing:-0.1rem;
}
div[class*=wide] .chartWrap > div.chartBox .chart > ul > li.compare .increase {
	color:#0077c7;
}
div[class*=wide] .chartWrap > div.chartBox .chart > ul > li.compare .unchanged {
	color:#262626;
}
div[class*=wide] .chartWrap > div.chartBox .chart > ul > li.compare .decrease {
	color:#ed3d3d;
}
.gender .tabBox > li {
	position:relative;
	min-width:calc(60% / 5);
}
.tabBox > li span {
	font-size:14px;
	letter-spacing:-0.125rem;
}
.gender .conditionBox > li:not(:first-child) {
	width:auto;
	margin-left:1rem;
}
.gender .conditionBox > li select {
	width:auto;
}
.gender .conditionBox > li select + input[type=text] {
	width:80px;
	margin-left:0.5rem;
}
.gender .chartWrap > div.chartBox {
	width:calc((100% / 3) - 1rem);
}
.age .tabBox > li {
	position:relative;
	width:calc(60% / 5);
}
.age .chartWrap > div.chartBox:first-child {
	width:calc(40% - 1rem);
}
.age .chartWrap > div.chartBox:nth-child(2) {
	width:calc(60% - 1rem);
}
.age .chartWrap > div.chartBox:last-child {
	width:100%;
}
.sigun .chartSection {
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.sigun .chartSection > .mapWrap {
	width:calc(50% - 2rem);
}
.sigun .chartSection > .chartWrap {
	width:calc(50% - 2rem);
}
.sigun .chartSection > .chartWrap .chartBox {
	width:calc(50% - 1rem);
}
.sigun .chartSection > .chartWrap .chartBox:first-child {
	width:100%;
}
.st0{fill:#0068FF;}
.st1{font-family:'NotoSansKr'; font-weight:bold;}
.st2{font-size:15px;letter-spacing:-0.015rem;}
.st3{fill:#D12431;}
.mapBox .st0 {
	position:relative;
	fill:#0068ff;
}
.mapBox .st1 {
	font-family:'NotoSansKr';
	font-weight:bold;
}
.mapBox .st2 {
	font-size:16px;
	letter-spacing:-0.015rem;
}
.mapBox .st3 {
	fill:#d12431;
}
.mapBox .value .st3 {
	fill:#333; 
}
.mapBox .value text {
	fill:#464646 !important;
	text-shadow:-2px 0 rgba(255, 255, 255, .8), 0 2px rgba(255, 255, 255, .8), 2px 0 rgba(255, 255, 255, .8), 0 -2px rgba(255, 255, 255, .8);  
} 
.mapBox .value text tspan {
	fill:#464646 !important;
	text-shadow:-2px 0 rgba(255, 255, 255, .8), 0 2px rgba(255, 255, 255, .8), 2px 0 rgba(255, 255, 255, .8), 0 -2px rgba(255, 255, 255, .8);  
}
.mapBox .nmBg {
	fill:#fafafa;
}
.mapBox .nmTxt {
	fill:#000;
	stroke:#000;
	stroke-width:0.5px;
    stroke-dasharray: 1,1;
	stroke-linejoin:round;
}
.sigun .mapBox {
	position:relative;
	min-height:600px;
	margin-bottom:0;
}
.sigun .mapBox .unit {
	position:absolute;
	top:-5rem;
	right:0;
	color:#767676;
	text-align:right;
	z-index:2;
}
.sigun .mapBox .unit li {
	display:inline-block;
	background:#f2f3f5;
	padding:0.35rem 0.75rem 0.25rem 0.75rem;
	font-size:14px;
	border-radius:30px;
}
.sigun .mapBox .unit li:first-child {
	margin-bottom:1rem;
}
.sigun .mapBox .polygon {
	position:absolute;
	top:46%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:3;
}
.sigun .mapBox .value {
	position:absolute;
	top:50%;
	left:50.35%;
	transform:translate(-50%, -50%);
	z-index:4;
}
.sigun .mapBox:before {
    content:"";
    position:absolute;
    top:46%;
	left:50%;
	transform:translate(-50%, -50%);
    width:100%;
    height:100%;
    background:url(/images/sp/carAccident/bgMap.svg) no-repeat center center / contain;
    z-index:2;
    opacity:0.2;
}
.sigun .mapBox svg {
    position:relative;
    width:100%;
    height: 100%;
    z-index:2;
}
.sigun .mapBox svg tspan {
	display:block;
}
.sigun .mapBox:after {
    content:"";
    position:absolute;
    top:-25px;
    left:-35px;
    width:100%;
    height:100%;
    background:url(/images/sp/carAccident/bgBackMap.svg) no-repeat center center / contain;
    z-index:1;
}
.treemap .chartWrap .chartBox {
	width:100%; 
}
.treemap .chartWrap .chartBox:nth-child(n + 4) {
	width:calc(50% - 1rem);
}
.hire .mapWrap {
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.hire .mapWrap > div[class*=t] {
	width:calc(50% - 1rem);
}
.hire .left .mapBox {
	position:relative;
	min-height:600px;
}
.hire .left .mapBox .unit {
	position:absolute;
	top:-3.75rem;
	right:0;
	color:#767676;
}
.hire .left .mapBox .polygon {
	position:absolute;
	top:46%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:3;
}
.hire .left .mapBox .value {
	position:absolute;
	top:50%;
	left:50.35%;
	transform:translate(-50%, -50%);
	z-index:4;
}
.hire .left .mapBox:before {
    content:"";
    position:absolute;
    top:46%;
	left:50%;
	transform:translate(-50%, -50%);
    width:100%;
    height:100%;
    background:url(/images/sp/carAccident/bgMap.svg) no-repeat center center / contain;
    z-index:2;
    opacity:0.2;
}
.hire .left .mapBox svg {
    position:relative;
    width:100%;
    height: 100%;
    z-index:2;
}
.hire .left .mapBox:after {
    content:"";
    position:absolute;
    top:-25px;
    left:-35px;
    width:100%;
    height:100%;
    background:url(/images/sp/carAccident/bgBackMap.svg) no-repeat center center / contain;
    z-index:-1;
}
.hire .chartWrap .chartBox {
	width:100%;
}
.hire .chartWrap > div.chartBox .titleBox p.title {
	padding:1rem 0 0.75rem 0;
}
.hire .chartWrap > div.chartBox .titleBox p.unit {
	padding:1.25rem 0 0.75rem 0;
}
.hire .chartWrap > div.chartBox .chart {
	display:block;
	border-radius:10px;
}
.hire .chartWrap > div.chartBox .chart .listTable th {
	padding:0.6rem 0.25rem;
	font-size:14px;
}
.hire .chartWrap > div.chartBox .chart .listTable td {
	padding:0.6rem 0.25rem;
	font-size:14px;
}
.sigunJob .chartWrap > div[class$=Box] {
	width:100%;
}
.sigunJob .listTable th {
	padding:1rem 0.25rem;
	font-size:14px;
}
.sigunJob .listTable td {
	padding:1rem 0.25rem;
	font-size:14px;
}
.sigunHire .chartSection {
	display:flex;
	justify-content:space-between;
	align-items:stretch;
	
}
.sigunHire .chartSection > div[class$=Wrap]:first-child {
	width:calc((33.33% * 2) - 1rem);
	display:flex;
	justify-content:space-between;
}
.sigunHire .chartSection > div[class$=Wrap]:first-child > .chartBox {
	width:calc(50% - 1rem);
} 
.sigunHire .chartSection > div[class$=Wrap]:first-child > .chartBox > .chart {
	min-height:calc(100% - 3.25rem);
}
.sigunHire .chartSection > div[class$=Wrap]:last-child {
	width:calc((100% / 3) - 1rem);
	display:block;
}
.sigunHire .chartSection > div[class$=Wrap]:last-child > div {
	width:100%;
}

/*인구동향*/
.generation .corePoint {
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:1rem;
}
.generation .corePoint > div.valueBox {
	position:relative;
	width:calc((100% / 3) - 2rem);
	margin-top:4rem;
	border:1px solid #c1c1c1;
}
.generation .corePoint > .valueBox p.deco {
	position:absolute;
	top:-25px;
	left:50%;
	transform:translateX(-50%);
	width:50px;
	height:50px;
	background:url(/images/sp/iconPopul.png) no-repeat center center / 60%,#f2f3f5;
	border:6px solid #fff;
	border-radius:50%;
}
.generation .corePoint > .valueBox:nth-child(2) p.deco {
	background:url(/images/sp/iconHome.png) no-repeat center center / 60%,#f2f3f5;
}
.generation .corePoint > .valueBox:nth-child(3) p.deco {
	background:url(/images/sp/iconFamily.png) no-repeat center center / 60%,#f2f3f5;
}
.generation .corePoint > .valueBox p.sbjt {
	padding:2.5rem 0 1.5rem 0;
	font-size:18px;
	font-weight:bold;
	text-align:center;
}
.generation .corePoint > .valueBox p.value {
	background:#f2f3f5;
	padding:1.25rem 0;
	font-size:18px;
	font-weight:bold;
	text-align:center;
}
.generation .chartSection {
	display:flex;
	justify-content:space-between;
	align-items:stretch;
}
.generation .chartSection > .chartWrap {
	width:calc(50% - 1.25rem);
}
.generation .chartSection > .chartWrap > .chartBox {
	width:100%;
} 
.generation .chartSection > .chartWrap:nth-child(2) > .chartBox .chart {
	height:calc(100% - 3.25rem);
}
.region .chartSection {
	display:flex;
	justify-content:space-between;
	align-items:stretch;
	flex-wrap:wrap;
}
.region .chartSection .sbjt {
    width: 100%;
    background: #f2f3f5;
    margin:3rem 0 2rem 0;
    padding: 0.75rem 1rem;
    font-size: 18px;
	font-weight: bold;
    text-align: center;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
}
.region .chartSection > .mapWrap {
	width:calc(50% - 2rem);
}
.region .mapBox {
	position:relative;
	min-height:600px;
	margin-bottom:0;
}
.region .mapBox .unit {
	position:absolute;
	top:-5rem;
	right:0;
	color:#767676;
	text-align:right;
	z-index:2;
}
.region .mapBox .unit li {
	display:inline-block;
	background:#f2f3f5;
	padding:0.35rem 0.75rem 0.25rem 0.75rem;
	font-size:14px;
	border-radius:30px;
}
.region .mapBox .unit li:first-child {
	margin-bottom:1rem;
}
.region .mapBox .polygon {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:3;
}
.region .mapBox .value {
	position:absolute;
	top:50%;
	left:50.35%;
	transform:translate(-50%, -50%);
	z-index:4;
}
.region .mapBox svg {
    position:relative;
    width:100%;
    height:100%;
    z-index:2;
}
.region .mapBox svg tspan {
	display:block;
}
.region .mapBox:after {
    content:"";
    position:absolute;
    top:-25px;
    left:-35px;
    width:100%;
    height:100%;
    background:url(/images/sp/carAccident/bgBackMap.svg) no-repeat center center / contain;
    z-index:1;
}
.region .chartSection > .chartWrap {
	width:calc(50% - 2rem);
	padding:0;
}
.region .chartSection > .chartWrap .chartBox {
	width:100%;
	margin-bottom:0;
}
.region .chartSection > .chartWrap .chartBox .chart {
	height:100%;
}
.single .chartWrap div[class*=Box]:nth-child(3) {
	width:100%;
}

@media all and (max-width:1200px) {
	.jobcompare .chartSection {
		display:block;
	}
	.jobcompare .chartSection > div.chartWrap {
		width:100%;
	}
	.gender .chartWrap > div.chartBox {
		width:100%;
	}
	.sigun .conditionBox {
		margin-bottom:2rem;
	}
	.sigun .chartSection {
		display:block;
	}
	.sigun .chartSection > div[class*=Wrap]:not(.chartWrap) {
		position:relative;
		width:100%;
		z-index:-1;
	}
	.sigun .chartSection > div.mapWrap .unit {
		top:0;
	}
	.sigun .chartSection > .chartWrap {
		width:100%;
	}
	.hire .mapWrap {
		display:block;
	}
	.hire .mapWrap > div[class*=t] {
		width:100%;
	}
	.hire .left .mapBox .unit {
		top:2rem;
	}
	.sigunHire .chartSection {
		display:block;
	}
	.sigunHire .chartSection > div[class$=Wrap] {
		width:100% !important;
	}
	.sigunHire .chartSection > div[class$=Wrap]:first-child > .chartBox > .chart {
		min-height:500px;
		height:auto;
	}
	.region .chartSection > div[class*=Wrap] {
		width:100%;
	}
	.region .chartSection > .chartWrap .chartBox .chart {
		min-height:50vh;
		margin:0 0 1rem 0;
	}
}
@media all and (max-width:768px) {
	.tabBox {
		align-items:stretch;
	}
	.tabBox > li {
		width:100% !important;
	}
	.tabBox > li > a {
		display:block;
		height:100%;
		font-size:14px;
	}
	.conditionBox > li {
		width:auto;
		margin:0 0 0.5rem 0.5rem;
	}
	div.chartWrap {
		display:block;
	}
	div.chartWrap > div.chartBox {
		width:100% !important;
	}
	.chartWrap > div.chartBox .chart > ul > li.value {
		font-size:1.25rem !important;
	}
	.chartWrap > div.chartBox .chart > ul > li.compare {
		font-size:13px;
	}
	.gender .tabBox > li {
		min-width:calc(100% / 5);
	}
	.gender .conditionBox > li {
		margin-top:0.25rem;
		margin-bottom:0.25rem;
	} 
	.age .tabBox > li {
		min-width:calc(100% / 5);
	}
	.sigun .mapBox:after {
		left:-25px;
	}
	.conditionBox > li.tip .tipCont {
		max-width:calc(100vw - 4rem);
	}
	.barchart .conditionBox > li {
		margin-top:0.25rem;
		margin-bottom:0.25rem;
	}
	.sigunJob .chartWrap > div.tableBox {
		overflow:auto;
	}
	.sigunJob .chartWrap > div.tableBox::-webkit-scrollbar {
		height:8px;
	}
	.sigunJob .chartWrap > div.tableBox .listTable {
		width:200%;
	}
	.generation .corePoint {
		display:block;
	}
	.generation .corePoint > div.valueBox {
		width:100%;
		margin-bottom:2rem;
	}
	.generation .chartSection {
		display:block;
	}
	.generation .chartSection > .chartWrap {
		width:100%;
		padding:1rem 0 0 0;
	}
}


/*올담 탭 오류*/
.basic_tab li a {
	height:auto !important;
}