/* -------------------------------- sub4_1 : 기부금 현황 -------------------------------- */
#dStat{position: relative; padding-bottom:160px; }

/* 그래프 수치별 모션 */
@keyframes p-245386579{from{width:0}to{width:20%}}
@keyframes p-86303000{from{width:0}to{width:10%}}
@keyframes p-5610118001{from{width:0}to{width:70%}}

@keyframes p-0{from{width:0}to{width:0%}}
@keyframes p-5{from{width:0}to{width:5%}}
@keyframes p-10{from{width:0}to{width:10%}}
@keyframes p-15{from{width:0}to{width:15%}}
@keyframes p-20{from{width:0}to{width:20%}}
@keyframes p-25{from{width:0}to{width:25%}}
@keyframes p-30{from{width:0}to{width:30%}}
@keyframes p-35{from{width:0}to{width:35%}}
@keyframes p-40{from{width:0}to{width:40%}}
@keyframes p-45{from{width:0}to{width:45%}}
@keyframes p-50{from{width:0}to{width:50%}}
@keyframes p-55{from{width:0}to{width:55%}}
@keyframes p-60{from{width:0}to{width:60%}}
@keyframes p-65{from{width:0}to{width:65%}}
@keyframes p-70{from{width:0}to{width:70%}}
@keyframes p-75{from{width:0}to{width:75%}}
@keyframes p-80{from{width:0}to{width:80%}}
@keyframes p-85{from{width:0}to{width:85%}}
@keyframes p-90{from{width:0}to{width:90%}}
@keyframes p-95{from{width:0}to{width:95%}}
@keyframes p-100{from{width:0}to{width:100%}}

.p-0{width:0%; animation:p-0 .1s;}
.p-5{width:5%; animation:p-5 .1s;}
.p-10{width:5%; animation:p-10 .2s;}
.p-15{width:15%; animation:p-15 .3s;}
.p-20{width:20%; animation:p-20 .4s;}
.p-25{width:25%; animation:p-25 .5s;}
.p-30{width:30%; animation:p-30 .6s;}
.p-35{width:35%; animation:p-35 .7s;}
.p-40{width:40%; animation:p-40 .8s;}
.p-45{width:45%; animation:p-45 .9s;}
.p-50{width:50%; animation:p-50 1s;}
.p-55{width:55%; animation:p-55 1.1s;}
.p-60{width:60%; animation:p-60 1.2s;}
.p-65{width:65%; animation:p-65 1.3s;}
.p-70{width:70%; animation:p-70 1.4s;}
.p-75{width:75%; animation:p-75 1.5s;}
.p-80{width:80%; animation:p-80 1.6s;}
.p-85{width:85%; animation:p-85 1.7s;}
.p-90{width:90%; animation:p-90 1.8s;}
.p-95{width:95%; animation:p-95 1.9s;}
.p-100{width:100%; animation:p-100 2s;}
.p-245386579{width:20%; animation:p-245386579 2s;}
.p-86303000{width:10%; animation:p-86303000 2s;}
.p-5610118001{width:70%; animation:p-5610118001 2s;}

/* 그래프 수치 텍스트 표기*/
.p-245386579:before{content:"245,386,579원";}
.p-86303000:before{content:"86,303,000원";}
.p-5610118001:before{content:"5,610,118,001원";}
.p-0:before{/* content:"0%"; */}
.p-5:before{content:"5%";}
.p-10:before{content:"10%";}
.p-15:before{content:"15%";}
.p-20:before{content:"20%";}
.p-25:before{content:"25%";}
.p-30:before{content:"30%";}
.p-35:before{content:"35%";}
.p-40:before{content:"40%";}
.p-45:before{content:"45%";}
.p-50:before{content:"50%";}
.p-55:before{content:"55%";}
.p-60:before{content:"60%";}
.p-65:before{content:"65%";}
.p-70:before{content:"70%";}
.p-75:before{content:"75%";}
.p-80:before{content:"80%";}
.p-85:before{content:"85%";}
.p-90:before{content:"90%";}
.p-95:before{content:"95%";}
.p-100:before{content:"100%";}

/* 그래프 단위표시 */
.percent-indicator .per-0:before{content:'0';}
.percent-indicator .per-10:before{content:'10';}
.percent-indicator .per-20:before{content:'20';}
.percent-indicator .per-40:before{content:'40';}
.percent-indicator .per-60:before{content:'60';}
.percent-indicator .per-80:before{content:'80';}
.percent-indicator .per-100:before{content:'100';}
.percent-indicator .per-200:before{content:'200';}
.percent-indicator .per-300:before{content:'300';}
.percent-indicator .per-400:before{content:'400';}
.percent-indicator .per-500:before{content:'500';}
.percent-indicator .per-600:before{content:'600';}
.percent-indicator .per-700:before{content:'700';}
.percent-indicator .per-800:before{content:'800';}
.percent-indicator .per-900:before{content:'900';}
.percent-indicator .per-1000:before{content:'1,000';}
.percent-indicator .per-1100:before{content:'1,100';}
.percent-indicator .per-1200:before{content:'1,200';}

.graphBox {position: relative;padding: 3% 4.5%;max-width: 1920px;margin: 0 auto;border-radius: 20px;background: #f9fafb;/* border: 1px solid #d5d7dd; *//* box-shadow: 8px 6px 20px 0 rgba(32, 54, 121, 0.07); */}
.graphBox.monthGraph{}
.graphBox.yearGraph{padding: 3% 8%;}

.graphBox .titWr{position: relative;display:flex;width: 100%;padding: 0;align-items: flex-end;gap: 18px;justify-content: space-between;}
.graphBox .gr-tit{display:flex;gap: 20px;align-items: center;}
.graphBox .gr-tit .tit{font-size: 32px;font-family: 'SBAggro';font-weight: 500;color: #f79b39;}
.graphBox .gr-tit .st{font-family: 'Paperlogy';font-size: 18px;color: #666;font-weight: 500;}
.tableBox .titWr{position: relative;display:flex;width: 100%;padding: 0;align-items: flex-end;gap: 18px;justify-content: flex-end;}

.graphBox .tr{display: inline-flex; align-items: center; gap: 20px;}
.graphBox .color-cate{display: inline-flex;background: #fff;border: 2px solid #cde2ed;border-radius: 30px;padding: 0px 25px 0 20px;box-sizing: border-box;height: 50px;align-items: center;justify-content: center;/* position: absolute; *//* left: 50%; *//* transform: translate(-50%, 0%); */}
.graphBox .color-cate > ul{gap: 20px;display:inline-flex;align-items:center;justify-content:center;}
.graphBox .color-cate > ul > li{padding-left:30px;position:relative;font-size: 15px;font-weight: 500;color:#000;font-family: 'Paperlogy';flex-shrink: 0;}
.graphBox .color-cate > ul > li:before{content:"";position:absolute;left:0;top: 50%;width: 18px;height: 18px;border-radius:50%;transform: translate(0%, -50%);display:inline-block;}
.graphBox .color-cate > ul > li.color1:before{background:#f68e1e;}
.graphBox .color-cate > ul > li.color2:before{background:#4bab41;}

.graphBox .year-sb{}
.set-box{
	width: 100%;
	height: 50px;
	font-weight: 600;
	font-size: 16px;
	color: #333 !important;
	padding: 0 0 0 15px;
	border-radius: 6px;
	border: 1px solid #E1E1E1;
	background: url("/images/common/arrow-down-s-line.png") no-repeat top 11px right 14px #fff;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position:relative;
	min-width: 150px;
	font-family: 'Paperlogy';
}

.graphBox .graphWr{position:relative;width:100%;height:100%;display:block;padding: 25px;}

.btnRight{margin: 10px 0;display: flex;justify-content: flex-end;align-items: flex-end;width: 100%;}
.btnRight .btnWr{display: flex; gap: 5px;}
.btnRight .btnWr > li{}
.btnRight .btnWr > li > a{}
a.btn_admin,.btn_admin {background:#fff;padding: 0px 15px;color:#333;border:solid 1px #bbb;height: 45px;line-height: 44px;font-size: 16px;} /* 관리자 전용 버튼 */
.btn_admin:hover, a.btn_admin:hover {color:#fff;background:#aaa;}

.percent-indicator {position:absolute;top:0;right:25px;left:25px;bottom:0;display:flex;justify-content: space-between;width:calc(100% - 50px);padding: 30px 20px;}

.percent-indicator div {position:relative;width:0;margin-left:-1px;border-left: 1px dashed #d5d7dd;}

.percent-indicator .per-0 {transform: translateX(1px);}

.percent-indicator div:before,
.percent-indicator div:after {position: absolute;left:50%;transform: translateX(-50%);padding-bottom:5px;font-size:16px;line-height:16px;background: #fff;}
.percent-indicator div:after {top:21px;}

.graph {position: relative;margin: 40px auto 20px;padding:0 20px;list-style:none;z-index: 2;}

.graph li.gr-item {position:relative;margin-bottom: 15px;}
.graph li.gr-item .itemTit{position:absolute;left:-50px;font-size: 18px;top: 50%;transform: translate(0%, -50%);font-family: 'SBAggro';font-weight: 500;}
.graphBox.yearGraph .graph li.gr-item .itemTit{left:-90px;}
.graph li.gr-item .barWr{gap: 0px; display: flex; flex-direction: column;}
.graph li.gr-item .barWr .bar{display:block;height: 24px;padding: 4px 10px;background:#000;font-family: 'Paperlogy';font-size: 12px;font-weight: 500;color: rgb(255,255,255,1);text-align: left;}
.graph li.gr-item .barWr .bar:before{width:100%;height:100%;display:block;/* padding:7px 10px; */}
.graph li.gr-item .barWr .bar.color1{background: #f68e1e;}
.graph li.gr-item .barWr .bar.color2{background: #4bab41;}

@media screen and (max-width:640px) {
	.percent-indicator div:after {display:none;}
}

.graphBox .inbox{border-radius: 15px;margin-top: 20px;overflow: hidden;background: #fff;padding: 30px 30px 40px 30px;border: 1px solid #d5d7dd;box-shadow: 8px 6px 20px 0 rgba(32, 54, 121, 0.07);font-family: 'Paperlogy';}
#chart_div{background:none;font-family: 'Paperlogy' !important;min-width: 900px;}

#dStat .tableBox{position:relative; margin-top:60px;}
#dStat .tableBox table .color1 th{background: #f9efe5;}
#dStat .tableBox table .color1 td{background: #fff9f4;}
#dStat .tableBox table .color2 th{background: #e7f2e9;}
#dStat .tableBox table .color2 td{background: #f6fbf6;}

/* 금액 롤오버시 툴팁 */
.tooltip-cell{position:relative;cursor: pointer;}
.tooltip-box {
	background:#000;
	color: #fff;
	padding: 7px 10px;
	font-size: 14px;
	font-family:'Paperlogy';
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 9999;
	display: none;
	transition: opacity 0.2s ease;
	position: fixed; /* 뷰포트 기준 고정 */
}
.tooltip-box:after {
	content: "";
	position: absolute;
	top: 100%; /* 툴팁 아래쪽 */
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px;
	border-style: solid;
	border-color: #000 transparent transparent transparent;
}

/* 그래프 테이블 */
.tbl-border {border:1px solid #A2AAB9;border-radius:20px;overflow:hidden;position:relative;/* box-shadow: 8px 6px 20px 0 rgba(32, 54, 121, 0.07); */}
.tbl-type01 {position:relative;border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%;clear:both;text-align:center}
.tbl-type01 th,
.tbl-type01 td {padding:19px 10px 19px;border-left: 1px solid #d5d7dd;border-top: 1px solid #d5d7dd;color:#555;box-sizing:border-box;word-break:break-all;}
.tbl-type01 thead th {border-top:0}
.tbl-type01 tr:last-child td,
.tbl-type01 tr:last-child th {border-bottom:0}
.tbl-type01 tfoot tr td,
.tbl-type01 tfoot tr th {border-top:1px solid #D7DBE9}
.tbl-type01 th.l,
.tbl-type01 th.left,
.tbl-type01 td.l,
.tbl-type01 td.left {padding-left:25px;padding-right:25px}
.tbl-type01 th {background:#F6F7F8;color:#374359;font-weight:500}
.tbl-type01 th:last-child,
.tbl-type01 td:last-child {border-right:0}
.tbl-type01 th.bg,
.tbl-type01 td.bg {background:#F6F7F8}
.tbl-type01 th:first-child, .tbl-type01 td:first-child {border-left:0}
.tbl-type01 .border {border-left:1px solid #A2AAB9}
.tbl-type01 thead {border-bottom:1px solid #A2AAB9}
.tbl-type01 thead th {position:relative;background:#F0F2F6;border-left:0;padding:20px 10px 19px;color:#374359;font-weight:700;border-right: 1px solid #d5d7dd;border-bottom:1px solid #A2AAB9 !important;}
.tbl-type01 tr th.line,
.tbl-type01 tr td.line {border-right:1px solid #A2AAB9}
.tbl-type01 thead tr th.line {border-right:1px solid #A2AAB9}
.tbl-type01 th.backslash {background:#f6f6f6 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="gray" /></svg>');}
.tbl-type01 th.backslash span {display:block;}
.tbl-type01 th:last-of-type,
.tbl-type01 td:last-of-type{border-right:0;}
.tbl-type01 th[colspan]:first-of-type,
.tbl-type01 th[rowspan]:first-of-type,
.tbl-type01 td[colspan]:first-of-type,
.tbl-type01 td[rowspan]:first-of-type {border-left:0;}
.tbl-type01 td + th[colspan]:first-of-type,
.tbl-type01 td + th[rowspan]:first-of-type,
.tbl-type01 td + td[colspan]:first-of-type,
.tbl-type01 td + td[rowspan]:first-of-type,
.tbl-type01 th + th[colspan]:first-of-type,
.tbl-type01 th + th[rowspan]:first-of-type,
.tbl-type01 th + td[colspan]:first-of-type,
.tbl-type01 th + td[rowspan]:first-of-type {border-left:1px solid #D7DBE9;}
.tbl-type01 tbody td b{font-weight:bold; color:#374359;}

.tbl-type01 thead th[colspan],
.tbl-type01 thead th[rowspan] {border-right:1px solid #A2AAB9 !important;}
.tbl-type01 thead th[colspan]:last-of-type,
.tbl-type01 thead th[rowspan]:last-of-type {border-right:0 !important;}
.tbl-type01 tbody th[colspan]:first-of-type,
.tbl-type01 tbody th[rowspan]:first-of-type {border-left:0 !important}
.tbl-type01 tfoot th[colspan]:first-of-type,
.tbl-type01 tfoot th[rowspan]:first-of-type {border-left:0 !important}
.tbl-type01 th[colspan],
.tbl-type01 th[rowspan] {border-left:1px solid #A2AAB9;}
.tbl-type01 td[colspan],
.tbl-type01 td[rowspan]{border-right:1px solid #D7DBE9;}
.tbl-type01 th[colspan]:last-of-type,
.tbl-type01 th[rowspan]:last-of-type {border-right:0;border-left:1px solid #A2AAB9;}
.tbl-type01 tbody th[colspan]:last-of-type,
.tbl-type01 tbody th[rowspan]:last-of-type {border-right:0;border-left:1px solid #D7DBE9;}
.tbl-type01 tfoot th[colspan]:last-of-type,
.tbl-type01 tfoot th[rowspan]:last-of-type {border-right:0;border-left:1px solid #D7DBE9;}
.tbl-type01 td[colspan]:last-of-type,
.tbl-type01 td[rowspan]:last-of-type {border-right:0;border-left:1px solid #D7DBE9;}
.tbl-type01 th[colspan],
.tbl-type01 th[rowspan]{border-right:1px solid #D7DBE9 !important}


.tableTouchArea {position:absolute;background-color:rgba(0,0,0,0.3);width:100%;height:100%;left:0;top:0;z-index:55;border-radius:20px}
.tableTouchArea .tableScrollTouch {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:70px;height:70px;opacity:0.7;border:0;background-color:#fff;background-image:url(/resources/_Img/Common/Guied/table_plus.png);background-position:center center;border-radius:50%;background-repeat:no-repeat}

@media all and (max-width:768px){
	.tbl-type01 thead th {padding:10px 0 10px 5px}
	.tbl-type01 tfoot th,
	.tbl-type01 tfoot td,
	.tbl-type01 tbody th,
	.tbl-type01 tbody td {padding:10px 5px}
}
@media (max-width: 767px){
	#dStat{padding-bottom: 60px;}
	.graphBox {padding: 30px 10px 10px;}
	.graphBox .titWr {align-items: center; gap: 10px; justify-content: space-between; flex-direction: column;}
	.graphBox .gr-tit {gap: 10px; align-items: center;}
	.graphBox .gr-tit .tit {font-size: 24px;}
	.graphBox .tr {width:100%; display: inline-flex; align-items: center; gap: 10px; flex-direction: column;}
	.graphBox .color-cate{height:40px;}
	.graphBox .year-sb,
	.graphBox .set-box{width:100%;}
	.graphBox .inbox{border-radius:10px; margin-top:15px;}
	.tbl-border{border-radius:10px;}
}