@charset "UTF-8";

html, body {
	font-family:'NotosansKr', sans-serif;
}
/*버튼*/
button {
	font-family:'NotosansKr', sans-serif;
	cursor:pointer;
}

/*팝업*/
.dim {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, .3);
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
	z-index:3;
	display:none;
}
.popWrap {
	max-width:1200px;
	width:100%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	box-shadow:0 0 15px rgba(0, 0, 0, .15);
	z-index:4;
}
.popWrap .popHeader {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:1rem;
	background:#39444A;
}
.popWrap .popHeader h4 {
	color:#fff;
	font-size:18px;
}
.popWrap .popHeader .btnCls {
	position:relative;
	width:30px;
	height:30px;
	background:#262B2E;
	border-radius:50%;
}
.popWrap .popHeader .btnCls:before {
	content:"X";
	position:absolute;
	display:block;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%) scaleY(.8);
	color:#fff;
	font-size:16px;
}
.popWrap .popBody {
	background:#fff;
	padding:1rem;
}

/*테이블*/
.listTable {
	width:100%;
	font-size:14px;
}
.listTable thead {
	background:#EAF5FF;
	border-top:1px solid #A4CBE5;
	border-bottom:1px solid #A4CBE5;
}
.listTable thead th {
	padding:0.75rem 0.5rem;
	font-weight:normal;
	vertical-align:middle;
}
.listTable tbody th {
	vertical-align:middle;
}
.listTable tbody tr {
	border-bottom:1px solid #ccc;
}
.listTable tbody td {
	padding:0.75rem 0.5rem;
	text-align:center;
	vertical-align:middle;
}
.listTable th:not(:last-child),
.listTable td:not(:last-child) {
	border-right:1px dashed #ccc;
} 

/*셀렉트박스 커스텀*/
.selectBox {
	position:relative;
	width:100px;
	height:40px;
	border-bottom:1px solid #c1c1c1;
}
.selectBox ul {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:40px;
	overflow-y:hidden;
	border:1px solid #c1c1c1;
}
.selectBox ul:before {
	content:"";
	position:absolute;
	top:18px;
	right:0.35rem;
	width:6px;
	height:6px;
	background:url(/images/sp/iconDownArrow.png) no-repeat center center / contain;
	transition:all .15s linear;
	opacity:.8;
	z-index:4;
}
.selectBox ul.active {
	max-height:500px;
	height:auto;
	overflow-y:auto;
	box-shadow:0 0 15px rgba(0, 0, 0, .15);
	z-index:2;
}
.selectBox ul.active:before {
	transform:rotate(180deg);
}
.selectBox ul > li {
	width:100%;
	height:40px;
	background:#fff;
	padding:0 0.5rem;
	font-size:14px;
	line-height:38px;
	border-bottom:1px solid #c1c1c1;
	cursor:pointer;
}
.selectBox ul > li:last-child {
	border-bottom:none;
}
.selectBox ul > li:hover {
	color:#262626;
	background:#f2f3f5;
}

/*온실가스 개요*/
.gasOutline {
	max-width:1400px;
	width:100%;
	margin:0 auto;
}
.gasOutline .outlineHeader {
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.gasOutline .outlineHeader h2 {
	font-size:24px;
}
.gasOutline .outlineHeader > button.btnNewWin {
	background:url(/images/sp/whiteColor/iconNewWin.svg) no-repeat 92% center / 20px, #2c60cb;
	border-radius:40px; 
}
.gasOutline .outlineHeader > button.btnNewWin a {
	width:100%;
	height:100%;
	display:block; 
	padding:0.35rem 1.75rem 0.45rem 1rem;
	color:#fff;
	font-size:16px;
}
.gasOutline .outlineBody .guideSbjt {
	margin-top:1rem;
	font-weight:bold;
}
.gasOutline .outlineBody .contBox:not(:first-of-type) {
	margin-top:2rem;
}
.gasOutline .outlineBody .contBox ul {
	margin-top:0.5rem;
	padding:1rem;
	background:#f2f3f5;
}
.gasOutline .outlineBody .contBox ul {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
}
.gasOutline .outlineBody .contBox ul > li {
	position:relative;
	width:50%;
	padding-left:0.75rem; 
}
.gasOutline .outlineBody .contBox ul > li:before {
	content:"";
	position:absolute;
	top:9px;
	left:0;
	width:6px;
	height:6px;
	background:#767676;
	border-radius:50%;
}
.gasOutline .outlineBody .contBox.guide02 ul {
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.gasOutline .outlineBody .contBox.guide02 ul > li {
	width:50%;
	margin:0.5rem 0;
}
.gasOutline .outlineBody .contBox.guide02 ul > li b {
	display:block;
}
.gasOutline .outlineBody .guideMiddle {
	padding:1rem 0 0.5rem 0;
	text-align:center;
}
.gasOutline .outlineBody .guideMiddle img {
	width:100%;
	object-fit:contain;
}
.gasOutline .outlineBody .guideBottom {
	margin-top:1rem;
}
.gasOutline .outlineBody .guideBottom > p.desc {
	margin-bottom:0.5rem;
}
.gasOutline .outlineBody .guideBottom table {
	font-size:16px;
}
.gasOutline .outlineBody .guideBottom td {
	text-align:left;
}
.gasOutline .outlineBody .guideBottom td p {
	position:relative;
	margin:0.25rem 0;
	padding-left:0.75rem;
}
.gasOutline .outlineBody .guideBottom td p:before {
	content:"";
	position:absolute;
	top:9px;
	left:0;
	width:6px;
	height:6px;
	background:#767676;
	border-radius:50%;
}
.gasOutline .outlineBody .guideBottom td ul {
	padding-left:0.75rem;
}
dl.alert {
	display:flex;
	padding:1rem 0;
	color:#676767;
}
dl.alert dt {
	margin-right:1rem;
}

/*기타*/
.greenGas {
	max-width:1400px;
	width:100%;
	margin:0 auto;
}
.greenGas .selectBox {
	position:relative;
	display:flex;
	align-items:center;
}
.greenGas .selectBox > .btnTip {
	position:absolute;
	top:50%;
	left:345px;
	transform:translateY(-50%);
	width:30px;
	height:30px;
	background:#767676;
	border-radius:50%;
}
.greenGas .selectBox > .btnTip:before {
	content:"?";
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	font-size:18px;
	color:#fff;
	width:18px;
	height:18px;
	line-height:18px;
}
.greenGas .selectBox > .btnTip + .popWrap {
	max-width:500px; 
	top:calc(50% + 35px);
	left:calc(50% - 3rem);
	display:none;
}
.greenGas .selectBox > .btnTip + .popWrap.month {
	max-width:600px; 
	top:calc(50% + 353px);
	left:50%;
	display:none;
}
.greenGas .selectBox > .btnTip + .popWrap .popHeader {
	padding:0.75rem 1rem;
}
.greenGas .selectBox > .btnTip + .popWrap.month p.intro {
	margin-bottom:1rem;
	padding:1rem;
	background:#f2f3f5;
	border-radius:5px;
}
.greenGas .selectBox > .btnTip + .popWrap.month p.guideTitle {
	font-weight:bold;
}
.greenGas .selectBox > .btnTip + .popWrap.month .bgGray {
	padding:0.5rem;
	background:#f2f3f5;
	border-radius:5px;
}
.greenGas .selectBox > .btnTip + .popWrap.month dl:not(:last-child) {
	margin-bottom:1rem;
}
.greenGas .selectBox > .btnTip + .popWrap.month dl dt {
	font-weight:bold;
}
.greenGas .selectBox > .btnTip + .popWrap.month dl dd {
	position:relative;
	padding-left:0.75rem;
}
.greenGas .selectBox > .btnTip + .popWrap.month dl dd:before {
	content:"";
	position:absolute;
	top:9px;
	left:2px;
	width:6px;
	height:6px;
	background:#767676;
	border-radius:50%;
}
.greenGas .visualHeader > .btnTip + .popWrap#pop02 p.intro {
	margin-bottom:1rem;
	padding:1rem;
	background:#f2f3f5;
	border-radius:5px;
} 
.greenGas .visualHeader > .btnTip + .popWrap#pop02 p.guideTitle {
	font-weight:bold;
}
.greenGas .visualHeader > .btnTip + .popWrap#pop02 .bgGray {
	padding:0.5rem;
	background:#f2f3f5;
	border-radius:5px;
}
.greenGas .visualHeader > .btnTip + .popWrap#pop02 dl:not(:last-child) {
	margin-bottom:1rem;
}
.greenGas .visualHeader > .btnTip + .popWrap#pop02 dl dt {
	font-weight:bold;
}
.greenGas .visualHeader > .btnTip + .popWrap#pop02 dl dd {
	position:relative;
	padding-left:0.75rem;
}
.greenGas .visualHeader > .btnTip + .popWrap#pop02 dl dd:before {
	content:"";
	position:absolute;
	top:9px;
	left:2px;
	width:6px;
	height:6px;
	background:#767676;
	border-radius:50%;
}
.greenGas .visualHeader > .btnTip {
	position:absolute;
	top:50%;
	left:345px;
	transform:translateY(-50%);
	width:30px;
	height:30px;
	background:#767676;
	border-radius:50%;
}
.greenGas .visualHeader > .btnTip:before {
	content:"?";
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	font-size:18px;
	color:#fff;
	width:18px;
	height:18px;
	line-height:18px;
}
.greenGas .visualHeader > .btnTip + .popWrap {
	max-width:500px; 
	top:calc(50% + 35px);
	left:calc(50% - 3rem);
	display:none;
}
.greenGas .visualHeader > .btnTip + .popWrap.month {
	max-width:600px; 
	top:calc(50% + 353px);
	left:50%;
	display:none;
}
.greenGas .visualHeader > .btnTip + .popWrap .popHeader {
	padding:0.75rem 1rem;
}
.greenGas .visualHeader > .btnTip + .popWrap.month p.intro {
	margin-bottom:1rem;
	padding:1rem;
	background:#f2f3f5;
	border-radius:5px;
}
.greenGas .visualHeader > .btnTip + .popWrap.month p.guideTitle {
	font-weight:bold;
}
.greenGas .visualHeader > .btnTip + .popWrap.month .bgGray {
	padding:0.5rem;
	background:#f2f3f5;
	border-radius:5px;
}
.greenGas .visualHeader > .btnTip + .popWrap.month dl:not(:last-child) {
	margin-bottom:1rem;
}
.greenGas .visualHeader > .btnTip + .popWrap.month dl dt {
	font-weight:bold;
}
.greenGas .visualHeader > .btnTip + .popWrap.month dl dd {
	position:relative;
	padding-left:0.75rem;
}
.greenGas .visualHeader > .btnTip + .popWrap.month dl dd:before {
	content:"";
	position:absolute;
	top:9px;
	left:2px;
	width:6px;
	height:6px;
	background:#767676;
	border-radius:50%;
}
.greenGas .selectBox.sigun {
	width:100%;
	height:60px;
	margin:2rem 0 3.5rem 0;
	border-bottom:2px solid #2c60cb;
}
.greenGas .selectBox.sigun ul {
	width:325px; 
	height:60px;
	border:none;
}
.greenGas .selectBox.sigun ul:before {
	width:8px;
	height:8px;
	top:28px;
	right:1rem;
}
.greenGas .selectBox.sigun ul.active {
	height:auto;
	display:flex;
	flex-wrap:wrap;
	border:none;
	border:2px solid #2c60cb;
}
.greenGas .selectBox.sigun ul.active > li {
	width:100%;
	height:45px;
	background:#f2f3f5;
	font-size:16px;
	line-height:45px;
	text-align:center;
	border-bottom:none;
	border-left:none;
}
.greenGas .selectBox.sigun ul::-webkit-scrollbar {
    width:4px;
}
.greenGas .selectBox.sigun ul li:first-child {
	position:sticky;
	top:0;
	width:100%;
	height:60px;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	line-height:60px;
	color:#2c60cb;
	background:#fff;
	border-top:2px solid #2c60cb;
	border-right:2px solid #2c60cb;
	border-left:2px solid #2c60cb;
	z-index:3;
}
.greenGas .selectBox.sigun ul li:first-child:before {
	content:"";
	position:absolute;
	bottom:-4px;
	left:0;
	width:100%;
	height:6px;
	background:#fff;
	z-index:4;
}
.greenGas .selectBox.sigun ul.active li:first-child {
	border:none;
}
.greenGas .selectBox.sigun.date > ul {
	width:210px;
}
.greenGas .selectBox.sigun.date > ul:last-child {
	left:208px;
}
.greenGas .selectBox.sigun.date > ul:last-child > li {
	width:100%;
}
.greenGas .selectBox.sigun.date ul.active > li:not(:first-child):nth-child(odd){
	border-right:2px solid #2c60cb;
}
.greenGas .selectBox.sigun.date > ul:last-child > li {
	border-right:2px solid #2c60cb;
	border-left:2px solid #2c60cb;
}
.greenGas .selectBox.sigun.date > ul:last-child > li:not(:last-child) {
	border-bottom:none;
}
.greenGas .visualBox {
	margin:1.5rem 0;
}
.visualBox .visualHeader {
	position:relative;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.visualBox .visualHeader h5 {
	background:url(/images/sp/h4.png) no-repeat 0 12px;
	padding-left:32px;
	font-size:24px;
}
.visualBox .visualHeader h5 + div {
	display:flex;
	align-items:center;
}
.visualBox .visualHeader div.popWrap + div {
	display:flex;
	align-items:center;
}
.visualBox .visualHeader h5 + div p.unit {
	margin-right:1rem;
}
.visualBox .visualHeader div.popWrap + div p.unit {
	margin-right:1rem;
}
.visualBox .visualBody > div[class*=Box] .selectBox {
	margin:0.5rem 0;
}
.visualBox .visualBody .chartBox {
	min-height:300px;
}
.contWrap .visualBox .visualBody .tableBox {
	position:relative;
	width:100%;
	height:auto;
	overflow-x:auto;	
}
.contWrap .visualBox .visualBody .tableBox::-webkit-scrollbar {
	height:6px;
}
/* .contWrap .visualBox .visualBody .tableBox > table { */
/* 	width:calc(100% + 300px); */
/* } */
.contWrap .visualBox .visualBody .tableBox.half > table {
	width:100%;
}
.contWrap .visualBox .visualBody .tableBox thead tr:first-child th:last-child {
	border-bottom:1px dashed #ccc;
}
.contWrap .visualBox .visualBody .tableBox > table thead tr:last-child th {
	min-width:160px;
	max-width:160px;
	width:calc(100% / 12);
}
.contWrap .visualBox .visualBody .tableBox.half > table thead tr:last-child th {
	width:calc((100% - 210px) / 2);
}
.contWrap .visualBox .visualBody .tableBox tbody tr {
	border-bottom:none;
}
.contWrap .visualBox .visualBody .tableBox tbody th {
	position:sticky;
	left:0;
	min-width:70px;
	width:70px;
	background:#fff;
	font-size:14px;
	font-weight:normal;
	letter-spacing:-0.15rem;
	border-right:none;
	border-bottom:none;
	word-break:break-word;
	z-index:2;
}
.contWrap .visualBox .visualBody .tableBox tbody th:before {
	content:"";
	position:absolute;
	bottom:0;
	right:0;
	width:1px;
	height:100%;
	border-right:1px dashed #ccc;
	z-index:3;
}
.contWrap .visualBox .visualBody .tableBox tbody th:after {
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	background:#ccc;
	z-index:3;
}
.contWrap .visualBox .visualBody .tableBox tbody th.left70 {
	left:71px;
}
.contWrap .visualBox .visualBody .tableBox tbody th.left140 {
	left:141px;
	width: 140px;
}
.contWrap .visualBox .visualBody .tableBox tbody th.left210 {
	left:211px;
}
.contWrap .visualBox .visualBody .tableBox tbody td {
	border-bottom:1px solid #ccc;
}

#chart01, #chart02 {
	width: 100%;
	height: 380px;
}

/*올담 탭 오류*/
.local .sub_navi {
	z-index:6;
}
.basic_tab li a {
	height:auto !important;
}