@charset "utf-8";

/* 공약이행현황 */
.ui-promise__layout {box-sizing: border-box;}
.ui-promise__list, .ui-promise__chart{position:relative;overflow:hidden;width:100%;}
.ui-promise__list {margin-top: 30px;}
.ui-promise__chart{position: relative; padding: 50px 20px 50px 250px;background-color: #F8F7F6;padding-left: 250px;box-sizing: border-box;border: 1px solid #ddd;border-top: 4px solid #2f68c2;}
.ui-total__chart{position:absolute;top: 50%;left: 30px;width: 190px;display: flex;flex-wrap: wrap;justify-content: center;transform: translate(0, -50%);}
.ui-total__chart .circle-chart{width:190px; height:190px; position:relative; opacity:0;}
.ui-total__chart .circle-chart .chart-box{width:100%; height:100%; padding:7px;}
.ui-total__chart .circle-chart .chart-circle-base{position:absolute; left:0; top:0; right:0; bottom:0; border:15px solid #D1CBCB; border-radius:50%;}
.ui-total__chart .circle-chart .chart-box svg{width:100%; height:100%; overflow:visible; position:relative;transform: rotateY(180deg) rotate(-90deg);}
.ui-total__chart .chart-circle-progress{fill:transparent; stroke-width: 16px; stroke:#4175c7;}
.ui-total__chart .circle-chart .chart-title{position:absolute; left:0; top:50%;width:100%;transform:translate(0,-50%);}
.ui-total__chart .circle-chart .chart-title .per-num{width:100%; text-align:center; font-size:20px; font-weight: 600;}
.ui-total__chart .circle-chart .chart-title .per-num span{font-size:20px; vertical-align:-1px;}
.ui-total__chart>p{margin:0;text-align:center;font-weight:bold;font-size:16px;}
.ui-total__chart .active.circle-chart{opacity:1}
.ui-total__chart .active .chart-circle-progress{-ms-transition: all 1s ease-out;-webkit-transition: all 1s ease-out;transition: all 1s ease-out;}
.ui-total__chart .circle-chart.theme02 .chart-circle-progress{stroke:#CE4144;}
.ui-total__chart .circle-chart.theme03 .chart-circle-progress{stroke:#fca35b;}
.ui-total__chart .circle-chart.theme04 .chart-circle-progress{stroke:#59af59;}
.ui-total__chart .circle-chart.theme05 .chart-circle-progress{stroke:#075d9b;}
.ui-total__chart .circle-chart.theme06 .chart-circle-progress{stroke:#4f3d9b;}
.ui-promise__chart .ui-chart__group{position:relative;overflow:hidden;padding:20px;background-color:#fff;border:1px solid #D1CBCB}
.ui-promise__chart .ui-chart__group .chart__group-title{display:block;margin-bottom: 15px;font-size: 16px;font-weight:bold; text-align: center;}
.ui-promise__chart .ui-chart__group .chart__group-sub-title {display: block;width: 100%;text-align: right; margin-bottom: 15px;font-weight: 600;letter-spacing: -1px; color: #858585;}
.ui-promise__chart .ui-chart__group .chart__group-title em{display:inline-block;padding:0 5px;color: #121212;font-size:20px;font-weight:bold;}
.ui-promise__chart .ui-chart__list{display:flex;justify-content: space-between;}
.ui-promise__chart .ui-chart__list .item{position:relative;width: calc(100% / 5 - 14px);height:116px;padding:0 10px;padding-top: 4px;}
.ui-promise__chart .ui-chart__list .item .circle-chart{max-height: 95px; position:relative; opacity:0;width: 100%;height: 100%;}
.ui-promise__chart .ui-chart__list .item .circle-chart .chart-box{width:100%; height:100%; padding: 0px;}
.ui-promise__chart .ui-chart__list .item .circle-chart .chart-circle-base{position:absolute; left:0; top:0; right:0; bottom:0; border:15px solid #D1CBCB; border-radius:50%;}
.ui-promise__chart .ui-chart__list .item .circle-chart .chart-box svg{width:100%; height:100%; overflow:visible; position:relative;transform: rotateY(180deg) rotate(-90deg);}
.ui-promise__chart .ui-chart__list .item .chart-circle-progress{fill:transparent; stroke-width:16px; stroke:#4175c7;}
.ui-promise__chart .ui-chart__list .item .circle-chart .chart-title{position:absolute; left:0; top: 50%;width:100%;transform:translate(0,-50%);}
.ui-promise__chart .ui-chart__list .item .circle-chart .chart-title .per-num{width:100%; text-align:center; font-size:20px; display: none;}
.ui-promise__chart .ui-chart__list .item .circle-chart .chart-title .per-num span{font-size:20px; vertical-align:-1px;}
.ui-promise__chart .ui-chart__list .item .circle-chart .chart-title p{margin:0;text-align:center;/* font-weight:bold; *//* font-size: 0; */}
.ui-promise__chart .ui-chart__list .item .circle-chart .chart-title p span{display:block;font-weight:bold;font-size:14px;letter-spacing:-1px;position: absolute;top: 65px;left: 0;width: 100%;}
.ui-promise__chart .ui-chart__list .item .active.circle-chart{opacity:1}
.ui-promise__chart .ui-chart__list .item .active .chart-circle-progress{-ms-transition: all 1s ease-out;-webkit-transition: all 1s ease-out;transition: all 1s ease-out;}
.ui-promise__chart .ui-chart__list .item .circle-chart.theme02 .chart-circle-progress{stroke:#CE4144;}
.ui-promise__chart .ui-chart__list .item .circle-chart.theme03 .chart-circle-progress{stroke:#fca35b;}
.ui-promise__chart .ui-chart__list .item .circle-chart.theme04 .chart-circle-progress{stroke:#59af59;}
.ui-promise__chart .ui-chart__list .item .circle-chart.theme05 .chart-circle-progress{stroke:#075d9b;}
.ui-promise__chart .ui-chart__list .item .circle-chart.theme05 .chart-circle-progress{stroke:#4f3d9b;}
.ui-promise__list .accordion {display:flex; flex-direction:column;}
.ui-promise__list .accordion-item .accordion-title {position: relative; padding: 20px; margin-top: 10px; border: 1px solid #d4d4d4; border-radius: 5px; padding-left: 45px; text-align: left; font-size: 19px; font-weight: 700; color: #4d4c4c;}
.ui-promise__list .accordion-item .accordion-content {display: none}
.ui-promise__list .accordion-item .accordion-content {width: 100%; padding: 20px; border: 1px solid #d4d4d4; border-top: none;border-radius: 0 0 5px 5px;}
.ui-promise__list .accordion-item .accordion-title.ov, .ui-promise__list .accordion-item .accordion-title:hover, .ui-promise__list .accordion-item .accordion-title:focus {border:1px solid #105fc1;}
.ui-promise__list .accordion-item .accordion-title .arrow{ display: inline-block; position: absolute; top: 50%; right: 33px; margin-top: -10px; width: 18px; height: 18px; transform: rotate(225deg); -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg);}
.ui-promise__list .accordion-item .accordion-title .arrow:after{display: inline-block;position: absolute;top: 0px;left: 0;width: 10px;height: 10px;border-right-width: 3px;border-bottom-width: 3px;border-right-style: solid;border-bottom-style: solid;content: '';}
.ui-promise__list .accordion-item .accordion-title.ov .arrow{top: 52%; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg)}
.ui-promise__list .accordion-item .accordion-title.ov .arrow:after{border-color: #3c425a;}

@media only screen and (max-width: 1340px){
	.ui-promise__chart{padding: 250px 20px 50px 20px;}
	.ui-total__chart{right:47px;justify-content: center;top: 110px;width: 100%;left: 0;}
	.ui-total__chart .circle-chart{margin:0 15px;}
	.ui-promise__chart .ui-chart__list .item{height:180px;display: inline-block;float: left;width: calc(100% / 5 - 0px);}
	.ui-promise__chart .ui-chart__list .item .circle-chart{margin:0 auto;width: 127px; height: 100%;min-height: 120px;max-height: none;height: 125px;}
	.ui-promise__chart .ui-chart__list .item .circle-chart .chart-title p span{top:95px}
	.ui-total__chart>p {position: absolute;top: 0px;left: 50%;transform: translate(-50%, 0);}
	.ui-total__chart .all-chart {position: relative;top: 30px;}
	}
	
	@media (max-width:1279px) {
		.ui-promise__chart .ui-chart__list .item .circle-chart {min-height: 1px;max-height: none;height: 110px;min-width: 95px;width: 100%;}
		.ui-promise__chart .ui-chart__list .item {width: calc(100% / 5 - 38px);}
	}
	
	@media only screen and (max-width:1000px) {
		#contentswrap {width: 100%;}
		#snb, #container, #contentswrap, #footer {box-sizing: border-box;padding: 0 10px;}
		.ui-promise__chart .ui-chart__list {flex-wrap: wrap;}
		.ui-promise__chart .ui-chart__list .item {}
		.ui-promise__chart .ui-chart__list .item .circle-chart {width: 115px;}
	}
	
	@media (max-width:970px) {
		.ui-promise__chart .ui-chart__list {justify-content: space-around;}
		.ui-promise__chart .ui-chart__list .item {width: calc(100% / 3 - 0px);}
		.ui-promise__chart .ui-chart__list .item .circle-chart {width: 115px;}
	}
	
	@media only screen and (max-width: 767px){
		.ui-promise__list .item{float:none;width:100%;height:auto}
		.ui-promise__list {margin-top: 20px;}
	}
	
	@media (max-width:540px) {
		.ui-promise__chart .ui-chart__list .item {width: calc(100% / 2 - 20px);}
		.ui-promise__layout .txt-tip {font-size: 15px;}
	}
	
	@media(max-width:460px){
		.ui-promise__chart {padding-bottom: 70px;}
		.ui-promise__list .promise__box{width:100%;}
		.ui-promise__list .promise__head .promise__label:before{top: 25px;}
	} 
	

	@media (max-width:420px) {
		.ui-promise__chart .ui-chart__list .item {
		width: 100%;
	}
	}
	@media (max-width:410px) {
		.ui-promise__list .promise__box .btn {position: relative;width: 100%;padding: 10px 40px;}
		.ui-promise__list .promise__head .promise__label {font-size: 20px;text-align: left;}
	}
	
	@media (max-width:350px) {
		.ui-promise__chart .ui-chart__list .item {width: 100%;}	
	}