@charset "utf-8";
/*************************************
	민선8기
**************************************/
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.value-list { display: block; position: relative; text-align: center; }
.value-list:before { content: ''; display: block; position: absolute; width: 100%; height: 340px; z-index: -1; top: 0; left: 0; box-sizing: border-box;
	border: 20px solid transparent;
    border-radius: 100px 0 100px 0;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to top, rgba(74,32,135,1), rgba(224,39,132,1));
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.value-list *{ font-family: 'GmarketSansBold'; }
.value-list .value-top{ font-size: 40px; color: #000; padding: 90px 0 50px; line-height: 1.2; }
.value-list .value-top br {font-family:'Noto Sans KR';}
.value-list .value-top span{ font-size: 50px; color: #1e1a71; }

.value-bottom { width: 90%; margin: 0 5%; }
.value-bottom .part {font-size:1.6rem; color:#555; background: #fff; border-radius: 20px; box-shadow: 10px 10px 10px rgba(0,0,0,0.1);  }
.value-bottom .part + .part {margin-top: 40px; }
.value-bottom .part {display:table; table-layout:fixed; min-height:320px; width:100%;}
.value-bottom .part .cell {display:table-cell; padding:2rem 3.5rem; vertical-align:middle; text-align: left;}
.value-bottom .part .cell,
.value-bottom .part .cell p { line-height:1.2;}
.value-bottom .part .thumb {padding:0; max-width:500px; width: 55%; text-align:left; position: relative; }
.value-bottom .part .thumb img {max-width:100%; border-radius: 20px;}
.value-bottom .part .cell .tit { font-size: 42px; font-weight: bold; font-family: 'GmarketSansBold'; margin-bottom: 10px;}
.value-bottom .part .cell p { font-size: 24px; color: #666;font-family: 'GmarketSansMedium';}

.value-bottom .part .thumb span{position: absolute; left: 10px; top: 10px; font-size: 15px; border-radius: 100px; width: 80px; height: 80px; padding: 22px 5px; display: block; text-align: center;font-family: 'GmarketSansMedium'; }
.value-bottom .part .thumb span em{ font-size: 20px !important; color: #fff !important;font-family: 'GmarketSansBold'; display: block; }

.value-bottom .part.p01 .thumb span { background-color: #d20f71; color: #ffd8ec; }
.value-bottom .part.p02 .thumb span { background-color: #73117d; color: #fbd5ff; }
.value-bottom .part.p03 .thumb span { background-color: #1e1a71; color: #e0deff; }

.value-bottom .part.p01 .cell .tit { color: #d20f71;}
.value-bottom .part.p02 .cell .tit { color: #73117d;}
.value-bottom .part.p03 .cell .tit { color: #1e1a71;}

.value-bottom .part.p01 .thumb + .cell { background:url(/gjmayor/img/sub/sub020101_bg01.png)no-repeat 90% 110%;}
.value-bottom .part.p02 .thumb + .cell { background:url(/gjmayor/img/sub/sub020101_bg02.png)no-repeat 90% 115%;}
.value-bottom .part.p03 .thumb + .cell { background:url(/gjmayor/img/sub/sub020101_bg03.png)no-repeat 90% 103%;}

@media all and (max-width:1370px){
	.value-bottom .part .cell {padding: 2rem;}
	.value-bottom .part {min-height:250px;}

	.value-bottom .part .cell .tit { font-size: 35px;}
	.value-bottom .part .cell p { font-size: 20px;}
}

@media all and (max-width:1000px) {
	.value-bottom .part .thumb {padding: 0rem;}

}
@media all and (max-width:840px) {
	.value-list .value-top{ font-size: 32px; padding: 60px 0 30px; line-height: 1.2; }
	.value-list .value-top span{ font-size: 40px; }

	.value-bottom .part {display:block;width:100%; max-width: 500px; margin: 0 auto;}
	.value-bottom .part .cell {display:block;width: 100%; text-align: center;}

	.value-bottom .part.p01 .thumb + .cell { background:none;}
	.value-bottom .part.p02 .thumb + .cell { background:none;}
	.value-bottom .part.p03 .thumb + .cell { background:none;}

}
@media all and (max-width:375px) {
	.value-bottom {padding:.5rem 0 !important;}
	.value-bottom .cell {padding:1rem 1.5ren !important;}
	.value-bottom .cell, .value-bottom .cell p, .value-bottom .cell li {font-size:1.3rem;}
}

/*************************************
	공약실천
**************************************/

.goal-group .goal.tabs {position:relative;padding: 65px 50px 50px;}
.goal-group .goal.tabs:before {content:''; position:absolute;width: 96%; height:150px; transform:skew(-15deg);background: #e6f3ff; z-index:-1; top:0;left: 2%;}
.goal-group .goal.tabs ul:after {content:""; display:block; clear:both;}
.goal-group .goal.tabs li {width: 14%; text-align:center;margin-right: 3.2%; float:left;}
.goal-group .goal.tabs li:last-child {margin-right: 0;}
.goal-group .goal.tabs li button {position:relative; display:block; width:100%;height: 8rem; text-align:center; color:#777;border-radius: 20px;border: 3px solid transparent;box-shadow: rgb(205 205 205 / 10%) 0px 2px 10px 5px;background: #fff;padding: 0 .9rem;}
.goal-group .goal.tabs li button.on {padding:0 1.8rem; margin-right:1rem; border-radius:20px; border:3px solid #374ed6;top: 0;left: 0;}
.goal-group .goal.tabs li button + p {font-family: GmarketSansMedium; font-size:1.15rem; line-height:1.3; margin-top:25px}
.goal-group .goal.tabs li:first-child button + p {padding-top:12px}
.goal-group .goal.tabs li button + p span {font-family: GmarketSansBold;}
.goal-group .goal-con {display:none;}
.goal-group .goal-con.on {display:block;}
td.point1 {font-weight: 600; color:#333 !important;background: #e9e7ff;border-left: 2px solid #9a99c9 !important;}
td.point2 {font-weight: 600;background: #ffeeeb;border-left: 2px solid #dfbebe !important;}

.chart-wrap {position: relative;border: 2px solid #cee2f5;border-radius: 20px;padding: 40px 40px 30px; margin-bottom:40px;}
.chart-wrap .container {position:relative;margin-bottom: 10px;overflow: hidden;}
.chart-wrap .container p {text-align:center;}
.chart-wrap .container .main-chart {width: 26%;min-height: 270px;padding-right: 20px;float: left;}
.chart-wrap .container .main-chart div {text-align:center;}
.chart-wrap .container .main-chart div > div {width:200px; height:200px;background: #efefef;margin: 0 auto;}
.chart-wrap .container .sub-chart {position:relative; width: 74%;border-left: 1px solid #ddd;padding-left: 30px;float: left; overflow:hidden;}
.chart-wrap .container .tit {font-family: 'GmarketSansBold';font-size: 23px;}
.chart-wrap .container .date {position:absolute; font-family:'GmarketSansMedium'; font-size:0.9rem;; color:#777; top:5px; right:0;}
.chart-wrap .container .name {font-family: 'GmarketSansMedium'; line-height:1; margin-top:10px;}
.chart-wrap .container .name span {font-family: 'GmarketSansMedium'; }
.chart-wrap .container .main-chart .tit {color: #203e83; margin-bottom:10px;}
.chart-wrap .container .sub-chart .tit {position: relative;text-align: left;color: #203e83;margin-bottom:30px; padding-left:20px;}
.chart-wrap .container .sub-chart .tit:after {content:''; position:absolute; width:8px; height:8px; border-radius:10px;background: #2c3c8d; top:11px; left:0;}
.chart-wrap .container .sub-chart .tit span {font-family: 'GmarketSansBold';color: #ff7600;}
.chart-wrap .container .sub-chart > div {width:25%;  float:left;}
.chart-wrap .container .sub-chart div {display:inline-block;text-align: center;}
.chart-wrap .container .sub-chart div > div {width:150px; height:150px; background:#efefef;}
.chart-wrap .container .sub-chart .complete {margin-left:0;}
.chart-wrap .container .chart {position: relative; width: 80px; height: 80px; border-radius: 50%; transition: 0.3s;}
.chart-wrap .container span.center {background: #fff;position: absolute;top: 50%;left: 50%;width: 90px;height: 90px; font-family:'GmarketSansBold'; font-size:1.4rem; font-weight:bold;border-radius: 50%;text-align: center;line-height: 0.8;padding-top: 35px;transform: translate(-50%, -50%);}
.chart-wrap .container span.center .small {font-family: 'GmarketSansMedium'; font-weight:normal; color:#777 !important;}
.chart-wrap .container .main-chart span.center {width:130px; height:130px; font-size:2rem; padding-top:55px;}
.chart-wrap button {width: 80px; position: absolute; left: 0; right: 0; margin: 0 auto;}



/*버튼스타일*/

.goal-con .tbl .file_list li {padding-left:0;}
.goal-con .tbl .file_list li:before {content:none;}
.goal-con .tbl .file_list li a {position:relative;display:inline-block;border: 1px solid #d8dde4;padding: 8px 50px 8px 14px;}
.goal-con .tbl .file_list li a:before {content:'파일 다운로드';}
.goal-con .tbl .file_list li a img {vertical-align:initial; margin-left:2px; display:none;}
.goal-con .tbl .file_list li a:after {content:''; position:absolute; width:37px; height:100%; border:1px solid #d8dde4; background:url(/gjmayor/img/common/ico_down.png) no-repeat center; top:-1px; right:-1px; transition:all 0.3s;}
.goal-con .tbl .file_list li a:hover {border:1px solid #0b2854;}
.goal-con .tbl .file_list li a:hover:after { border:1px solid #0b2854;background: url(/gjmayor/img/common/ico_down_on.png) no-repeat center #0b2854;}

.download {position:relative;display:inline-block;border: 1px solid #d8dde4;padding: 8px 50px 8px 14px;}
.download img {vertical-align:initial; margin-left:2px; display:none;}
.download:after {content:''; position:absolute; width:37px; height:100%; border:1px solid #d8dde4; background:url(/gjmayor/img/common/ico_down.png) no-repeat center; top:-1px; right:-1px; transition:all 0.3s;}
.download:hover {border:1px solid #0b2854;}
.download:hover:after { border:1px solid #0b2854;background: url(/gjmayor/img/common/ico_down_on.png) no-repeat center #0b2854;}



@media all and (max-width:1370px){
	.goal-group {zoom:0.8;}
}

@media all and (max-width:1024px){
	.goal-group {zoom:1;}
	.goal-group .goal.tabs {padding: 65px 30px 50px;}
	.chart-wrap .container .main-chart div > div {width:180px; height:180px;}
	.chart-wrap .container .main-chart span.center {width:110px; height:110px;padding-top: 45px;}
	.chart-wrap .container .sub-chart div > div {width:120px; height:120px;}
	.chart-wrap .container span.center {width:70px; height:70px;padding-top: 20px;}
}

@media all and (max-width:980px){
	.goal-group .goal.tabs li {width: 15.5%;margin-right: 1.4%;}
}

@media all and (max-width:900px){
	.goal-group .goal.tabs {padding: 50px 50px 50px;}
	.goal-group .goal.tabs li {width:31%;margin-right: 3.3333%;}
	.goal-group .goal.tabs li:nth-child(3n) {margin-right:0;}
	.goal-group .goal.tabs li:nth-child(n+4) {margin-top:15px;}
	.goal-group .goal.tabs:before {width:100%; height:320px; border-radius:20px; transform: inherit; left:0;}
}

@media all and (max-width:840px){
	.chart-wrap .container .main-chart,
	.chart-wrap .container .sub-chart {width:100%;}
	.chart-wrap .container .main-chart {min-height:auto; margin-bottom:10px;padding: 0;}
	.chart-wrap .container .sub-chart {border-top:1px solid #ddd; border-left:none;padding: 30px 0 0; margin-top:15px;}
	.chart-wrap .container .sub-chart .tit {text-align:center;margin-bottom: 0;}
	.chart-wrap .container .sub-chart .tit:after {display:none;}
	.chart-wrap .container .date {position:relative; margin-bottom:30px;}
	.chart-wrap .container .sub-chart div > div {width:130px; height:130px;}
	.chart-wrap .container span.center {width:80px; height:80px;padding-top: 28px;}
}

@media all and (max-width:640px){
	.chart-wrap .container .sub-chart div {width:50%;}
	.chart-wrap .container .sub-chart div:nth-child(n+5) {margin-top:20px;}
}

@media all and (max-width:580px){
	.goal-group .goal.tabs {padding: 25px 30px; margin-bottom:20px;}
}

@media all and (max-width:480px){
	.goal-group .goal.tabs {padding: 25px 20px;}
	.goal-group .goal.tabs:before {height:100%;}
	.goal-group .goal.tabs li {width:48%;}
	.goal-group .goal.tabs li:nth-child(3n) {margin-right:2%;}
	.goal-group .goal.tabs li:nth-child(even) {margin-right:0;}
	.goal-group .goal.tabs li:nth-child(n+3) {margin-top:15px;}
	.goal-group .goal.tabs li button {height:4rem; border-radius:10px;}
	.goal-group .goal.tabs li button.on {border-radius: 10px;}
	.goal-group .goal.tabs li button img {width:40px;}
	.goal-group .goal.tabs li button + p {margin-top:15px;}

	.chart-wrap {padding:20px 20px 10px;}
}

/*************************************
	공약지도
**************************************/

.map-group {width:100%;}
.map-group .tabs {margin-bottom:50px;}
.map-group .tabs li {position:relative; display:inline-block; width:calc(100% / 5); min-height:155px; text-align:center; border-right:1px solid #ddd; border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin:0 -1.5px; padding:1em 0; cursor:pointer; vertical-align:middle;}
.map-group .tabs li p {line-height:1.4; margin-top:15px;}
.map-group .tabs li p span {font-size:20px; font-weight:700;}
.map-group .tabs li:first-child {border-left:1px solid #ddd;}
.map-group .tabs li.active {border:4px solid #122454; border-radius:10px; z-index:10;}

.map-group .tabs li:nth-child(1).active{border:4px solid #355fe1;}
.map-group .tabs li:nth-child(2).active{border:4px solid #7a1fd7;}
.map-group .tabs li:nth-child(3).active{border:4px solid #914821;}
.map-group .tabs li:nth-child(4).active{border:4px solid #00ab88;}
.map-group .tabs li:nth-child(5).active{border:4px solid #6a9100;}

.map-group .tabs li:nth-child(1).active p span {color:#355fe1;}
.map-group .tabs li:nth-child(2).active p span {color:#7a1fd7;}
.map-group .tabs li:nth-child(3).active p span {color:#914821;}
.map-group .tabs li:nth-child(4).active p span {color:#00ab88;}
.map-group .tabs li:nth-child(5).active p span {color:#6a9100;}

.map-group .content .img-box {float:left; width:60%; text-align:center; margin-bottom:50px; margin-right:5%; cursor:pointer;}
.map-group .content .txt {float:left;  width:35%; padding:1em; background:#f8f8f8; border-radius:20px;}
.map-group .content .txt li {position:relative;padding-left:30px; line-height:1.3; word-break:keep-all; margin-bottom:10px;}
.map-group .content .txt li span {position:absolute; top:0px; left:0; display:inline-block; width:24px; height:24px; color:#fff;  font-size:15px; border-radius:12px; text-align:center; line-height:24px;} 
.map-group .content .con01 .txt li span {background:#355fe1; }
.map-group .content .con02 .txt li span {background:#7a1fd7;}
.map-group .content .con03 .txt li span {background:#914821;}
.map-group .content .con04 .txt li span {background:#00ab88;}
.map-group .content .con05 .txt li span {background:#6a9100;}

@media all and (max-width:1024px) {
	.map-group .tabs {padding:2px;}
	
}

@media all and (max-width:860px) {
	.map-group .content .img-box, .map-group .content .txt {float:none; width:100%;}
	.map-group .tabs li {font-size:16px;}
	.map-group .tabs li p span {font-size:18px; }
}

@media all and (max-width:768px) {
	.map-group .tabs li {width:calc(100% / 3);}
	.map-group .tabs li:nth-child(4) {border-top:0; border-left:1px solid #ddd; width:calc(100% / 2); }
	.map-group .tabs li:nth-child(5) {border-top:0; width:calc(100% / 2); }
}

@media all and (max-width:500px) {
	.map-group .tabs li {min-height:80px;}
    .map-group .tabs li:nth-child(4), .map-group .tabs li:nth-child(5) {margin-top: -4px;}
	.map-group .tabs li img {display:none;}
	.map-group .tabs li p {margin-top:0;}
	.map-group .tabs li p span {font-size:16px;}
}

/*************************************
	공약 이행 로드맵
**************************************/

#tbl_road_map tbody tr td .inner-size {min-height: 70px;}
#tbl_road_map tbody tr td:first-child {text-align: center;}
#tbl_road_map thead tr th.year {font-size: 13px !important; padding: 10px;}
#tbl_road_map th {font-size: 15px !important;}
#tbl_road_map td {font-size: 14px !important; padding: 12px !important;}
#tbl_road_map td.year {font-size: 13px !important; text-align: center; color: #3f64d0; padding: 12px 4px !important;}
#tbl_road_map td.bar {background-color: #f7fbff; border-bottom: 3px solid #3f64d0;}
#tbl_road_map th:last-child {border-right-width: 0 !important;}


/*************************************
	민선8기 공약변경사항
**************************************/

.promiseChange {position:relative; padding:5em 2em; background:url(../img/02/0209_img01.svg) no-repeat right 30px center; background-size:24em auto; border:1px solid #ddd; border-radius:1em;}
.promiseChange .txt-box {width:50%; text-align:center;}
.promiseChange .txt-box .title {font-size:2em; font-weight:700; line-height:1.3; color:#000; word-break:keep-all;}
.promiseChange .txt-box span {display:inline-block; background:#000; padding:.5em 1.5em; color:#fff; border-radius:2em; margin:1em 0 1.5em;}

@media all and (max-width:840px) {
	.promiseChange {padding:2em 3em 20em; background-size:auto 18em; background-position:center bottom;}
	.promiseChange .txt-box {width:100%;}
}

@media all and (max-width:500px) {
	.promiseChange {padding:2em 2em 70%; background-size:90% auto;}
	.promiseChange .txt-box .title {font-size:1.7em;}
}

.stepFlow {position:relative;}
.stepFlow ul:after {content:''; clear:both; display:table;}
.stepFlow li {width:25%; padding:.5em;float:left; text-align:center; word-break:keep-all;}
.stepFlow li .tit {background:#2F43C3;color:#fff; font-weight:700; padding:.5em;}
.stepFlow li .txt {padding:1em .5em; border:1px solid #ddd; min-height:100px;}

@media all and (max-width:1024px) {
	.stepFlow li {width:50%;}
	.stepFlow li .txt br {display:none;}
}

@media all and (max-width:480px) {
	.stepFlow li {width:100%; float:none;}
	.stepFlow li .txt {min-height:auto;}
}


/*************************************
	주민참여와 소통
**************************************/
.juminSotong {position:relative; min-height:25em; padding:5em 3em; background:url(../img/02/0210_img01.svg) no-repeat right 30px center; background-size:24em auto; border:1px solid #ddd; border-radius:1em;}
.juminSotong .btn-box {width:50%; text-align:center;}
.juminSotong .btn-box .title {font-size:2em; font-weight:700; line-height:1.3; color:#000; word-break:keep-all; margin-bottom:1em;}
.juminSotong .btn-box a {display:inline-block; width:15em; padding:0 1em; border-radius:3em; line-height:3.6em; color:#fff; text-align:left; background:#fff;}
.juminSotong .btn-box a + a {margin-top:1em;}
.juminSotong .btn-box a span {display:block; padding-right:2.25em;}
.juminSotong .btn-box a:after {display:none;}

.juminSotong .btn-box a.poll {border:1px solid #7128A9; color:#7128A9;}
.juminSotong .btn-box a.poll span {background:url(../img/02/0210_ico01.svg) no-repeat right center; background-size:1.75em auto;}
.juminSotong .btn-box a.suggest {border:1px solid #E61E66; color:#E61E66;}
.juminSotong .btn-box a.suggest span {background:url(../img/02/0210_ico02.svg) no-repeat right center; background-size:1.75em auto;}

.juminSotong .btn-box a.poll:hover {background:#7128A9; color:#fff;}
.juminSotong .btn-box a.poll:hover span {background:url(../img/02/0210_ico01_on.svg) no-repeat right center; background-size:1.75em auto;}
.juminSotong .btn-box a.suggest:hover {background:#E61E66; color:#fff;}
.juminSotong .btn-box a.suggest:hover span {background:url(../img/02/0210_ico02_on.svg) no-repeat right center; background-size:1.75em auto;}

@media all and (max-width:840px) {
	.juminSotong {padding:2em 3em 20em; background-size:auto 18em; background-position:center bottom;}
	.juminSotong .btn-box {width:100%;}
	.juminSotong .btn-box a + a {margin-top:0; margin:.25em .5em;}
}

@media all and (max-width:500px) {
	.juminSotong {padding:2em 2em 70%; background-size:90% auto;}
	.juminSotong .btn-box .title {font-size:1.7em;}
}


/*************************************
	주민배심원제
**************************************/
.group-box {position:relative; display:table; width:100%; padding:1.5rem; border:1px dashed #ddd; }
.group-box + .group-box  {margin-top:1rem;}
.group-box .txt {display:table-cell;  vertical-align:top; width:40%; padding-right:1.5em;}
.group-box .txt .s-tit {font-weight:700; font-size:1.25rem; color:#3c6bbf; margin-bottom:1rem;}
.group-box .pic {display:table-cell;  vertical-align:top;}
.group-box .pic img {width:49%; display:inline-block;}

.conts .btn-box.jury .btn.down:after {content:''; position:absolute; width:37px; height:100%; border:1px solid #d8dde4; background:url(/gjmayor/img/common/ico_down.png) no-repeat center #fff; top:-1px; right:-1px; transition:all 0.3s;}
.conts .btn-box.jury .btn.down {padding-right:50px;}
.conts .btn-box.jury .btn.down:hover:after  { border:1px solid #0b2854; background: url(/gjmayor/img/common/ico_down_on.png) no-repeat center #0b2854;}

.tbl.jury .bg th,
.tbl.jury .bg td {background:#3c6bbf; color:#fff !important; font-weight:600 !important;}

@media all and (max-width:768px) {
	.group-box {display:block; width:100%;}
	.group-box .txt {display:block; width:100%; padding-right:0; padding-bottom:1.5rem;}
	.group-box .pic {display:block; width:100%;}
}

@media all and (max-width:420px) {
.group-box .pic img {width:100%; display:block;}
	
}