@charset "UTF-8";

.daemin * {
	font-family:'GmarketSans', sans-serif;
}
.naebu * {
	font-family:'NotoSansKr', sans-serif;
}
/*테이블*/
.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;
}
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 {
	max-width:1400px;
	width:100%;
	margin:1rem auto;
}
.tabBox {
	display:flex;
	align-items:center;
	border-left:1px solid #d3c2c2;
	border-bottom:1px solid #d3c2c2;
}
.tabBox > li {
	position:relative;
	width:calc(40% / 3);
}
.accident .tabBox > li {
	position:relative;
	width:calc(60% / 4);
}
.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;
	justify-content:flex-end;
	align-items:center;
	margin-top:2rem;
}
.conditionBox > li {
	display:flex;
	align-items:center;
	justify-content:flex-end;
	width:calc(33.33% / 2);
}
.conditionBox > li p {
	flex-shrink:0;
	margin-right:0.5rem;
}
.conditionBox > li select {
	min-width:120px;
	width:calc(100% - 65px);
	flex-shrink:0;
}
.conditionBox > li.double select {
	width:80px;
}
.conditionBox > li.double select + select {
	margin-left:0.5rem;
}
.chartSection {
	display:flex;
	justify-content:space-between;
}
.chartSection > .chartWrap {
	width:47.5%;
}
.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;
}
.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:47.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 {
	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;
}
.mapWrap {
	display:flex;
	justify-content:space-between;
	padding:1rem 0;
}
.mapWrap .left {
	width:65%;
}
.mapWrap .right {
	width:30%;
}
.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;
}
.left .mapBox {
	position:relative;
	min-height:600px;
	margin-bottom:0;
}
.left .mapBox .unit {
	position:absolute;
	top:0;
	right:0;
	color:#767676;
}
.left .mapBox .polygon {
	position:absolute;
	top:46%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:3;
}
.left .mapBox .value {
	position:absolute;
	top:50%;
	left:50.35%;
	transform:translate(-50%, -50%);
	z-index:4;
}
.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;
}

.left .mapBox svg {
    position:relative;
    width:100%;
    height: 100%;
    z-index:2;
}
.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;
}
@media all and (max-width:1400px) {
	.contWrap {
		padding:0 2rem;
	}
}
@media all and (max-width:1200px) {
	.chartSection {
		display:block;
	}
	.chartSection > div.chartWrap {
		width:100%;
	}
	.mapWrap {
		display:block;
	}
	.mapWrap > div[class*=t] {
		width:100%;
	}
	.mapWrap > div > div {
		min-height:450px !important;
		height:auto;
		max-height:450px;
	}
}
@media all and (max-width:768px) {
	.tabBox {
		align-items:stretch;
	}
	.tabBox > li {
		width:100%;
	}
	.accident .tabBox > li {
		width:100%;
	}
	.tabBox > li > a {
		display:block;
		height:100%;
		font-size:14px;
	}
	.accident .tabBox > li > a {
		font-size:12px;
	}
	.accident .tabBox > li:nth-child(3) > a {
		letter-spacing:-0.145rem;
	}
	.conditionBox > li {
		width:auto;
		margin-left:0.5rem;
	}
	div.chartWrap {
		display:block;
	}
	div.chartWrap > div.chartBox {
		width:100%;
	}
}

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