@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%;
	min-width:460px;
}

.listTable * {vertical-align:middle !important;}

.listTable:nth-child(2){
	margin-top:1rem;
}
.listTable thead th {
	padding:0.5rem 0.25rem;
	background:#F5F2F2;
	color:#BB021F;
	text-align:center;
}
.listTable tbody tr {
	border-bottom:1px solid #f0f0f0; 
}
.listTable tbody tr th {
	background:#fffcfc;
	padding:0.5rem 0.25rem;
	font-weight:normal;
	color:#BB021F;
	text-align:center;
	border-right:1px solid #f0f0f0;
} 
.listTable tbody td:first-of-type {
	padding:0.5rem 0.25rem;
	text-align:center;
	border-right:1px solid #f0f0f0;
}
.listTable tbody td {
	padding:0.5rem 0.25rem;
	color:#464646;
	font-weight:500;
	text-align:center;
	border-right:1px solid #f0f0f0;
}
.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;
	padding:1rem;
	background: #FBF2F2;
	margin-bottom:2rem;
}
.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;
	background-color:#fff;
}
.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;
}


.chartWrap {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding:1rem 0 2rem 0;
}
.chartWrap .chart_select {
	text-align:right;
}
.chartWrap > div.chartBox {
	width:48.5%;
	margin-bottom:2.5rem;
}
.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;
}
.titleBox {
	border:1px solid #c27e7e;
}
.titleBox p.title {
	position:relative;
	padding:0.75rem 0;
	font-weight:bold;
}
.titleBox p.title:before {
	content:"";
	position:absolute;
	top:-4px;
	left:0;
	width:8px;
	height:8px;
	background:#ea3c3c;
	border-radius:50%;
}
.titleBox p.title:after {
	content:"";
	position:absolute;
	top:-4px;
	left:11px;
	width:8px;
	height:8px;
	background:#ffc900;
	border-radius:50%;
}
.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;
	overflow:auto;
}
.chartWrap > div.chartBox:hover .chart {
	border:1px solid #c27e7e;
}
div[class*=wide] .chartWrap > div.chartBox .chart > div[id*=chart] {
	width:75%;
}

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

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



.mapBox .legend {
	padding:1rem;
	font-size:0.875rem;
	font-weight:400;
	color:#333;
	border:1px solid #ddd;
	border-radius:10px;
	background:#fff;
	z-index:9;
}
.mapBox .legend li {
	margin-bottom:5px;
	display:flex;
	align-items:center;
}
.mapBox .legend li:last-of-type {
	margin-bottom:0;
}
.mapBox .legend span {
	display:inline-block;
	width:14px;
	height:14px;
	border:1px solid #ddd;
	margin-right:3px;
}

/* 농업인 가계 현황 */
.famer_color01 {background:#FF3636; }
.famer_color02 {background:#FF7070;}
.famer_color03 {background:#FF8F8F;}
.famer_color04 {background:#FFAFAF;}
.famer_color05 {background:#FFCFCF;}
.famer_color06 {background:#E4E4E4;}

.famer .mapWrap {
    display: flex;
    flex-wrap:wrap;
    /* align-items: center; */
    justify-content: space-between;
    }
.famer .mapWrap > .titleBox {
	width:100%;
}


.famer .mapWrap .chartWrap > div.chartBox {
	width:100%;
	margin-bottom:0;
}

.famer .mapWrap .left {
	position:relative;
	width:calc(50% - 1rem);
	margin:1rem 0 2rem 0;
}
.famer .mapWrap .right {
	width:48%;
}
.famer .left .mapBox {
	/* position:relative; */
	min-height:850px;
}
.famer .left .mapBox .unit {
	position:absolute;
	bottom:0;
	right:0;
	color:#767676;
}
.famer .left .mapBox .legend {
	position:absolute;
	left:0;
	bottom:0;
	z-index:9;
}

.famer .mapWrap .mapBox select {
	position:absolute;
	right:0;
	top:0;
	z-index:9;
}

.famer .left .mapBox .polygon {
	position:absolute;
	top:46%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:3;
}
.famer .left .mapBox .value {
	position:absolute;
	top:50%;
	left:50.35%;
	transform:translate(-50%, -50%);
	z-index:4;
}
 .famer .left .mapBox.farmer:before {
    content:"";
    position:absolute;
    top:47%;
	left:53%;
	transform:translate(-50%, -50%);
    width:100%;
    height:100%;
    background:url(/images/sp/carAccident/bgMap03.svg) no-repeat center center / contain;
    z-index:2;
    opacity:0.8;
} 
.famer .left .mapBox svg {
    position:relative;
    width:100%;
    height: 100%;
    z-index:2;
}
.famer .left .mapBox .overlayLayer {
    position: absolute;
    width:100%;
    height: 100%;
}
.famer .left .mapBox.farmer: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;
}

.famer .chartWrap > div.chartBox .titleBox p.title {
	padding:1rem 0 0.75rem 0;
}
.famer .chartWrap > div.chartBox .titleBox p.unit {
	padding:1.25rem 0 0.75rem 0;
}
.famer .chartWrap > div.chartBox .chart {
	display:block;
	border-radius:10px;
}

.famer .chartWrap > div.chartBox .chart .listTable th {
	padding:0.8rem 0.25rem;
	font-size:14px;
	font-weight:500;
	width: 800px;
	table-layout: fixed;
}
.famer .chartWrap > div.chartBox .chart .listTable td {
	padding:0.8rem 0.25rem;
	font-size:14px;
}

.famer .chartWrap small {
	font-size:14px;
	font-weight:400;
	display:block;
	color:#555;
	margin-top:20px;
}


/* 농업인 생산 현황 */
.production_color01 {background:#F7FBFF;}
.production_color02 {background:#C8DCF0;}
.production_color03 {background:#73B2D8;}
.production_color04 {background:#2979B9;}
.production_color05 {background:#0A2F66;}

/* 농업인 현황 */
.famer2_color01 {background:#FFFFFF;}
.famer2_color02 {background:#C1CCDE;}
.famer2_color03 {background:#8398BD;}
.famer2_color04 {background:#44649C;}
.famer2_color05 {background:#06317B;}

/* 인포그래픽 */
.infoImgBox img {display:block; width:100%;}


@media all and (max-width:1024px) {
	.famer .mapWrap .left {width:100%; padding: 0 1rem 10rem;}
	.famer .mapWrap .right {width:100%;}
	.famer .left .mapBox  {position:relative; min-height:100vw;}
	.famer .left .mapBox .legend {bottom:inherit; top:calc(100% + 1rem); width:100%;}
	.famer .unit {font-size:12px;}

}
@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;
	}
	
	.conditionBox > li.tip .tipCont {
		max-width:calc(100vw - 4rem);
	}
	.barchart .conditionBox > li {
		margin-top:0.25rem;
		margin-bottom:0.25rem;
	}

}
.agrioutline * {
	font-family: 'GmarketSans', sans-serif;
}

.agrioutline .chartWrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 1rem 0 2rem 0;
}

.agrioutline .chartBox {
	width: 48.5%;
	margin-bottom: 2.5rem;
}

.agrioutline .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;
}

.agrioutline .chartBox:hover .titleBox {
	border: 1px solid #c27e7e;
}

.agrioutline .chartBox .titleBox p.title {
	position: relative;
	padding: 0.75rem 0;
	font-weight: bold;
}

.agrioutline .chartBox .titleBox p.title::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 8px;
	height: 8px;
	background: #ea3c3c;
	border-radius: 50%;
}

.agrioutline .chartBox .titleBox p.title::after {
	content: "";
	position: absolute;
	top: -4px;
	left: 11px;
	width: 8px;
	height: 8px;
	background: #ffc900;
	border-radius: 50%;
}

.agrioutline .chartBox .chart {
	display: flex;
	justify-content: space-between;
	min-height: 280px;
	padding: 1rem;
	border: 1px solid #ececec;
	border-radius: 10px;
	transition: all .15s linear;
}

.agrioutline .chartBox:hover .chart {
	border: 1px solid #c27e7e;
}

.agrioutline .chartWrap > div[class$=Box] {
	width: 100%;
}

/* 농업인 현황 개요 */
.outlineBox {
	padding:1rem;
}
.outlineImg {
	text-align:center;
	margin-bottom:3rem;
}
.outlineImg img{
	width:90%;
	max-width:100%;
	
}
.outlineText {
	background:#f7f7f7;
	border:1px solid #ddd;
	padding:1rem 2rem;
	border-radius:10px;
	line-height:1.5;
	word-break: keep-all;
}
.outlineText span {
	display:block;
	margin-top: 1rem; 
	color:#555;
	font-weight:400;
}


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