@charset "utf-8";

/*************************************
	민선9기 핵심가치
**************************************/

.value-list {display: block; position: relative; text-align: center; font-family:'Pretendard',"Arial","Helvetica","AppleGothic","Sans-serif";  z-index:1;}
.value-list:before { content: ''; display: block; position: absolute; top: 0; bottom:0; left: -1rem; right:-1rem; border-radius: 10rem 10rem 5rem 5rem; background:url(../img/main/bak_stat.jpg); z-index:0; opacity:0.5}
.value-list .value-top{ font-size:4rem; color: #16243f; padding:6rem 0 0; line-height: 1.5; position:relative; }
.value-list .value-top span {font-size:5.5rem; color: #367FFC; font-weight:800; margin-top:2rem;}
.value-list .value-top .eng {display:block; color:#bcc4d0; font-weight:700; letter-spacing:0.3rem; font-size:1.8rem; margin-bottom:1rem;}
.value-list .value-top p {font-size:1.8rem; color:#515252; margin-top:3rem;}
.value-bottom {display:flex; position:relative; margin:5rem 4rem; padding:0 0 8rem;}
.value-bottom .part {font-size:1.6rem; color:#54657d; background: #fff; border-radius: 20px; box-shadow: 10px 10px 30px rgba(27,86,168,0.12); margin:1em; }
.value-bottom .part {-webkit-transition:background .3s, -webkit-transform .6s; transition:background .3s, transform .6s; -webkit-transform-style:preserve-3d; transform-style:preserve-3d;}
.value-bottom .part:hover,
.value-bottom .part:focus { -webkit-transform:translateY(-1rem); transform:translateY(-1rem);}
.value-bottom .part .cell {padding:4rem 2rem; vertical-align:middle; text-align:center;}
.value-bottom .part .cell,
.value-bottom .part .cell p {line-height:1.2;}
.value-bottom .part .thumb {padding:0; max-width:500px; width:100%; text-align:left; position: relative; }
.value-bottom .part .thumb img {max-width:100%; border-radius: 20px;}
.value-bottom .part .cell .tit {font-size: 3.4rem; font-weight:800; margin-bottom:2rem;}
.value-bottom .part .cell p { font-size:2rem; color: #54657d; line-height:3rem;}

.value-bottom .part .thumb span{position: absolute; left:2rem; top:2rem; font-size:1.3rem; border-radius:1rem 2rem; width:8rem; padding:14px 5px; display: block; text-align: center; }
.value-bottom .part .thumb span em{ font-size:3rem; color:#fff; display: block; font-weight:800;}

.value-bottom .part.p01 .thumb span { background:#367ffc; color: #dcefff; }
.value-bottom .part.p02 .thumb span { background:#1c5aa7; color: #cfe2fb; }
.value-bottom .part.p03 .thumb span { background:#0a2961; color: #d4ddf3; }

.value-bottom .part.p01 .cell .tit { color: #367ffc;}
.value-bottom .part.p02 .cell .tit {color: #1c5aa7;}
.value-bottom .part.p03 .cell .tit { color: #0a2961;}

@media all and (max-width:768px) {
	.value-list:before {border-radius:5rem 5rem 0 0; }
	.value-bottom {display:block; margin:4rem 1rem;}
	.value-bottom .part .thumb {max-width:100%;}
	.value-bottom .part .thumb img {width:100%;}
}

@media all and (max-width:430px) {
	.value-list .value-top {font-size:3rem;}
	.value-list .value-top span {font-size:4.5rem;}
}

/*************************************
	시정비전 및 시정목표
**************************************/

.slider .swiper-slide {width:100%;}
.slider .swiper-slide > a {display:block;}
.slider .swiper-slide img {display:block; max-width:100%;}

.fix-scroll .swiper-container {display:block; position:relative;}
.fix-scroll .swiper-wrapper {display:block !important; transform:none !important; -webkit-transform:none !important; height:100% !important; overflow:auto; white-space:nowrap;}
.fix-scroll .swiper-wrapper li {display:inline-block !important; vertical-align:top; transform:none !important; -webkit-transform:none !important; opacity:1 !important;}
.fix-scroll .swiper-wrapper li a {display:block; position:relative;}
.fix-scroll .swiper-wrapper li a:focus:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border:5px solid rgba(0,0,0,.5); z-index:2;}

.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#2292e9; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}

.vision {display:block; position:relative;}
.vision .control {display:flex; position:absolute; left:0; bottom:0em; width:28.888889em; justify-content:start; z-index:1; margin-left:40em;}
.vision .control > button {display:block; position:relative; width:1.777778em; height:1.333334em; overflow:hidden; text-indent:-9999px;}
.vision .control .prev {background:url(../img/sub02/0102_prev.svg) no-repeat center center;}
.vision .control .next {background:url(../img/sub02/0102_next.svg) no-repeat center center;}

.vision .control .pager {display:flex; width:auto; margin:0 1em; align-items:center; overflow:hidden;}
.vision .control .pager .swiper-pagination-current {color:#367FFC; font-weight:700;}
.vision .control .pager .bar {display:block; width:1em; height:1px; background:#ddd; margin:0 .5em;}
/* .vision .control .pager .swiper-pagination-bullet {display:block; width:17.777778em; height:13.333333em; border-radius:0 2.222222em 0 2.222222em; overflow:hidden; opacity:1;}
.vision .control .pager .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:3.5555556em;} */

.mycode .slider {display:block; position:relative; height:100%; overflow:hidden;}
.mycode .slider .swiper-container {}
.mycode .slider .swiper-container,
.mycode .slider .swiper-wrapper,
.mycode .slider .swiper-slide {height:100%;}
.mycode .slider .swiper-slide {}
.mycode .slider .swiper-slide > * {display:block;}

.vision .swiper-slide {position:relative; padding:4.444444em 0 0 35.555556em;}
.vision .swiper-slide:before {content:''; position:absolute; top:0; left:0; width:40em; height:44.444444em; border-radius:0 6.666667em 0 6.666667em; background-repeat:no-repeat; background-position:center center; background-size:cover; opacity:0; visibility:hidden;}
.vision .swiper-slide.vis01:before {background-image:url(../img/sub02/0102_img01.png);}
.vision .swiper-slide.vis02:before {background-image:url(../img/sub02/0102_img02.png);}
.vision .swiper-slide.vis03:before {background-image:url(../img/sub02/0102_img03.png);}
.vision .swiper-slide.vis04:before {background-image:url(../img/sub02/0102_img04.png);}
.vision .swiper-slide.vis05:before {background-image:url(../img/sub02/0102_img05.png);}
.vision .swiper-slide.swiper-slide-active:before {opacity:1; visibility:visible;}
.vision .txt {position:relative; height: 40em; background:#fff; border-radius:6.666667em 0 0; padding:4.444444em 4.444444em; box-shadow:-1em -1em 1em rgba(0, 0, 0, .05); z-index:1;}
.vision .txt * {word-break:keep-all;}
.vision .txt p {color:#555}
.vision .txt .title {font-size:1.777778em; font-weight:700; color:#333; margin:.5em 0;}
.vision .txt .title strong {display:block; color:#367FFC; font-weight:800; font-size:1.75em; margin:.25em 0; line-height:1.2;}
.vision .txt .info {color:#666; font-weight:400; margin:.25em 0;}
.vision .txt span {display:block; margin:1.5em 0 1em; padding-top:1.5em; border-top:1px dashed #ddd; color:#bbb; font-size:.888889em; font-weight:700; letter-spacing:1em;}
.vision .txt strong {color:#367FFC; font-weight:800;}
.vision .txt .s-title {margin:1em 0; font-size:1.333334em; font-weight:700; color:#333;}

@media all and (max-width:1600px) {
	.vision .swiper-slide {padding-left:50%;}
	.vision .swiper-slide:before {width:60%;}
	.vision .control {margin-left:60%;}
}

@media all and (max-width:1024px) {
	.vision .swiper-slide {padding:20.222222em 1.666667em 0;}
	.vision .swiper-slide:before  {width:100%; height:24.444444em;}
	.vision .txt {height:auto;}
	.vision .txt span,
	.vision .txt strong {display:inline-block;}
	.vision .txt .s-title {font-size:1.3333334em;}
	.vision .txt .s-title br {display:none;}
	
	.vision .control {margin-left:0;justify-content: center;width: 100%;position: relative;padding: 1em 0;}
}

@media all and (max-width:768px) {
	.vision .txt {padding:2.7778em;}
	.vision .txt .title {font-size:1.25em;}
}



/********************
	공직자의 자세
********************/
.attWrap {width:100%; max-width:68.888889em; margin:0 auto;}
.attWrap ul {display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; margin:-.833333em;}
.attWrap ul li {position:relative; width:calc(33.333333% - 1.666667em); height:14.277778em; margin:.833333em; padding:3.333333em 2.222222em; border-radius:1.666667em; background:linear-gradient(180deg, #E7F3FD 0%, rgba(231,243,253,0) 100%); text-align:center;}
.attWrap ul li .ico {display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; -ms-flex-pack:center; justify-content:center; position:absolute; left:1.666667em; top:-1.111111em; width:5em; height:5em; border-radius:1.111111em; overflow:hidden;}
.attWrap ul li .ico img {display:block; max-width:2.222222em; max-height:2.222222em;}
.attWrap ul li .ico01 {background:#1877F2;}
.attWrap ul li .ico02 {background:#3085F4;}
.attWrap ul li .ico03 {background:#4692F5;}
.attWrap ul li .ico04 {background:#5EA0F6;}
.attWrap ul li .ico05 {background:#74ADF7;}
.attWrap ul li .ico06 {background:#8CBBF9;}
.attWrap ul li strong {display:block; font-size:1.3333em; font-weight:700; color:#0A2961;}
.attWrap ul li p {margin:.45em 0 0; font-weight:400; color:#333;}

@media all and (max-width:1024px) {
	.attWrap ul li {width:calc(50% - 1.666667em);}
}

@media all and (max-width:640px) {
	.attWrap ul {margin:-.555556em 0;}
	.attWrap ul li {width:100%; height:auto; min-height:12.777778em; margin:.555556em 0; padding:3.333333em 1.666667em 2.222222em;}
	.attWrap ul li strong {font-size:1.333333em;}
	.attWrap ul li p {font-size:1em;}
	.attWrap ul li .ico {left:1.388889em; width:4.444444em; height:4.444444em;}
}

/*************************************
	한 눈에 보는 공약
**************************************/
.goal-group {position:relative; padding:0 1.6667em 1.6667em;}
.goal-group .goal.tabs {position:relative; padding:0 1.6667em; z-index:1;}
.goal-group .goal.tabs:before {display:none;}
.goal-group .goal.tabs ul {display:-ms-flexbox; display:flex; -ms-flex-wrap:nowrap; flex-wrap:nowrap; margin:0 -.2778em;}
.goal-group .goal.tabs ul:after {display:none;}
.goal-group .goal.tabs li {float:none; width:auto; -ms-flex:1 1 0; flex:1 1 0; margin:0 .2778em; text-align:center;}
.goal-group .goal.tabs li:last-child {margin-right:.888889em;}
.goal-group .goal.tabs li button {position:relative; width:100%; padding:1.777778em 1.111111em; border:0; border-radius:0 2.222222em 0 2.222222em; background:#fff; box-shadow:none; color:#222; font-weight:700; text-align:center; word-break:keep-all;}
.goal-group .goal.tabs li button {height:100%; padding:1.277778em .944444em; border:.444444em solid transparent; background:linear-gradient(#fff,#fff) padding-box,linear-gradient(transparent,transparent) border-box; color:#222; transition:background .2s;}
.goal-group .goal.tabs li button:hover {background:linear-gradient(#fff,#fff) padding-box,linear-gradient(#DADADA,#DADADA) border-box;}
.goal-group .goal.tabs li button.on,
.goal-group .goal.tabs li button.on:hover {background:linear-gradient(#fff,#fff) padding-box,linear-gradient(145deg,#3B7DD3 0%,#593F96 100%) border-box;}
.goal-group .goal.tabs li button p {font-size:.95em; margin-top:.75em; color:#222; font-weight:500;}
.goal-group .goal.tabs li button p span {display:block; margin-top:.25em; font-size:1.11112em; font-weight:700;}
.goal-group .goal.tabs li:first-child button + p {padding-top:0;}
.goal-group .goal-con {display:none;}
.goal-group .goal-con.on {display:block;}

.chart-wrap {position:relative; margin-bottom:2.222222em; padding:2.222222em;  z-index:0;}
.chart-wrap:before {content:''; position:absolute; left:0; bottom:0; width:100%; height:calc(100% + 6.6667em); border-radius:2.666667em; background:#E7F3FD; z-index:-1;}
.chart-wrap .container {position:relative; display:-ms-flexbox; display:flex; -ms-flex-align:stretch; align-items:stretch; margin-bottom:0; padding:2.222222em; border-radius:1.777778em; background:#fff; overflow:hidden;}
.chart-wrap .container p {text-align:center;}
.chart-wrap .container .main-chart {float:none; width:15.111111em; min-height:auto; padding-right:2.222222em; -ms-flex:0 0 15.111111em; flex:0 0 15.111111em;}
.chart-wrap .container .main-chart div {text-align:center;}
.chart-wrap .container .main-chart div > div {width:13.333333em; height:13.333333em; margin:0 auto; background:#efefef;}
.chart-wrap .container .sub-chart {position:relative; float:none; overflow:hidden; width:auto; padding-left:2.222222em; border-left:.055556em solid #ddd; -ms-flex:1 1 auto; flex:1 1 auto;}
.chart-wrap .container .tit {font-size:1.333333em; font-weight:700; color:#222;}
.chart-wrap .container .date {display:none;}
.chart-wrap .container .name {margin-top:.888889em; font-family:inherit; font-size:1.111111em; font-weight:700; color:#222;}
.chart-wrap .container .name span {font-size:.8em; font-weight:400; color:#222;}
.chart-wrap .container .name .small {color:#555;}
.chart-wrap .container .main-chart .tit {margin-bottom:.666667em; color:#222;}
.chart-wrap .container .sub-chart .tit {position:relative; margin-bottom:.666667em; padding-left:0; color:#222; text-align:left;}
.chart-wrap .container .sub-chart .tit:after {display:none;}
.chart-wrap .container .sub-chart .tit span {font-family:inherit; color:#DF144E; font-weight:800;}
.chart-wrap .container .sub-chart > div {float:left; width:25%; margin-left:0; text-align:center;}
.chart-wrap .container .sub-chart div {display:block; text-align:center;}
.chart-wrap .container .sub-chart div > div {width:8.888889em; height:8.888889em; margin:0 auto; background:#efefef;}
.chart-wrap .container .sub-chart .complete {margin-left:0;}
.chart-wrap .container .chart {position:relative; width:4.444444em; height:4.444444em; border-radius:50%; transition:.3s;}
.chart-wrap .container span.center {position:absolute; top:50%; left:50%; width:4em; height:4em; padding-top:1.388889em; border-radius:50%; background:#fff; transform:translate(-50%, -50%); font-family:inherit; font-size:1.333333em; font-weight:800; line-height:1.1; color:#222; text-align:center;}
.chart-wrap .container span.center .small {display:block; margin-top:.111111em; font-size:.666667em; font-weight:400; color:#222 !important;}
.chart-wrap .container .main-chart span.center {width:3em; height:3em; padding-top:1em; font-size:2.666667em; color:#1877F2;}
.chart-wrap button {position:absolute; left:0; right:0; width:4.444444em; margin:0 auto;}
td.point1 {font-weight:600; color:#333 !important; background:#e9e7ff; border-left:.111111em solid #9a99c9 !important;}
td.point2 {font-weight:600; background:#ffeeeb; border-left:.111111em solid #dfbebe !important;}

.goal-content .tbl thead, .goal-content .tbl tbody {border-top:0;}
.goal-content .bmg {font-size:.95em; color:#888;}
.goal-content .tbl th,
.goal-content .tbl td {padding:1em .75em; border:0; border-bottom:1px solid #ddd; font-size:.8889em;}
.goal-content .tbl thead tr:first-child th {border-top:0; background:#0A2961; color:#fff;}
.goal-content .tbl thead th {background:#203E83; color:#fff; border:0;}
.goal-content .tbl tbody tr:first-child th,
.goal-content .tbl tbody tr:first-child td {border-top:0;}
.goal-content .tbl tbody th {background:#f4f8fc; color:#222; font-weight:600;}
.goal-content .tbl tbody td {background:#fff; color:#444;}
.goal-content .tbl tbody tr:hover td {background:#eef6ff;}
.goal-content .tbl thead tr:first-child th:first-child {border-radius:1.111111em 0 0 0;}
.goal-content .tbl thead tr:first-child th:last-child {border-radius:0 1.111111em 0 0;}

/*버튼스타일*/
.goal-con .tbl .file_list li {padding-left:0; text-align:center !important;}
.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:calc(100% + 2px); 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:1024px){
	.goal-group {padding:0 1.111111em 1.666667em;}	
	.chart-wrap .container {padding:1.666667em;}
	.chart-wrap .container .main-chart {width:12.222222em; -ms-flex:0 0 12.222222em; flex:0 0 12.222222em; padding-right:1.666667em;}
	.chart-wrap .container .main-chart div>div {width:10em; height:10em;}
	.chart-wrap .container .sub-chart div>div {width:6.666667em; height:6.666667em;}
}

@media all and (max-width:768px){
	.goal-group .goal.tabs {padding:0 1.111111em;}
	.goal-group .goal.tabs ul {-ms-flex-wrap:wrap; flex-wrap:wrap;}
	.goal-group .goal.tabs li {-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%; margin:0; padding:.444444em;}
	.goal-group .goal.tabs li:last-child {margin-right:0;}
	.goal-group .goal.tabs li button img {width:2.666667em; height:2.666667em;}
	.chart-wrap:before {height:calc(100% + 10em);}
	.chart-wrap .container {display:block;}
	.chart-wrap .container .main-chart {width:100%; padding:0; margin-bottom:1.666667em;}
	.chart-wrap .container .sub-chart {padding:1.666667em 0 0; border-left:0; border-top:.055556em solid #ddd;}
	.chart-wrap .container .sub-chart .tit {text-align:center;}
	.chart-wrap .container .sub-chart>div {width:50%; margin-top:1.111111em;}
	.chart-wrap .container .sub-chart>div:nth-of-type(-n+2) {margin-top:0;}
}

@media all and (max-width:480px){
	.goal-group .goal.tabs li button {padding:.833333em .555556em; border-width:.277778em; border-radius:0 .888889em 0 .888889em;}
	.goal-group .goal.tabs li button p {font-size:1em; margin-top:.444444em;}
	.goal-group .goal.tabs li button img {width:2.111111em; height:2.111111em;}
	.chart-wrap {padding:.833333em;}
	.chart-wrap .container {padding:1.111111em;}
	.chart-wrap .container .main-chart div>div {width:8.888889em; height:8.888889em;}
	.chart-wrap .container .sub-chart div>div {width:5.888889em; height:5.888889em;}
	.goal-content .tbl th,
	.goal-content .tbl td {padding:.777778em .555556em;}
}


/*************************************
	매니페스토란?
**************************************/
.manifesto{padding:4.444444em 3.333333em; border-radius:2.777778em; background:#f5f7f9; background:linear-gradient(to bottom,#f5f7f9 0%,#f5f7f9 84.4%,#fff 100%);}
.manifesto-title{text-align:center;}
.manifesto-title .eng{color:rgba(0,0,0,.2); font-weight:600; font-size:1em; letter-spacing:.7em; text-transform:uppercase;}
.manifesto-title h3{color:#0a2961; font-weight:700; font-size:2.555556em; margin:.326087em 0 0;}
.manifesto-title .txt{color:#444; font-size:1.111111em; margin:1em 0 0;}
.manifesto-list{margin-top:3.333333em;}
.manifesto-list .item{display:-ms-flexbox; display:flex; -ms-flex-align:start; align-items:flex-start; padding:2.222222em; border-radius:1.111111em; background:#fff;}
.manifesto-list .item + .item{margin-top:1.666667em;}
.manifesto-list .flag{-ms-flex:0 0 6.666667em; flex:0 0 6.666667em; width:6.666667em; height:4.444444em; border-radius:.277778em; overflow:hidden;}
.manifesto-list .flag.type-border{border:1px solid rgba(0,0,0,.1);}
.manifesto-list .flag img{display:block; width:100%; height:100%; object-fit:cover;}
.manifesto-list .con{-ms-flex:1 1 auto; flex:1 1 auto; min-width:0; margin-left:2.222222em;}
.manifesto-list .tit{display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center;}
.manifesto-list .tit strong{color:#0a2961; font-weight:700; font-size:1.666667em;}
.manifesto-list .tit span{color:#888; font-weight:500; font-size:1em; margin-left:.555556em;}
.manifesto-list .s-txt{color:#000; font-weight:500; font-size:1.111111em; margin:1em 0 0;}
.manifesto-list .desc{color:#000; font-size:1em; margin:1.111111em 0 0;}
.manifesto-list .s-txt + .desc{margin-top:1.111111em;}

@media all and (max-width:1024px){
	.manifesto{padding:3.333333em 2.222222em; border-radius:2.222222em;}
	.manifesto-title h3{font-size:2.111111em;}
	.manifesto-title .txt{font-size:1em;}
	.manifesto-list{margin-top:2.777778em;}
	.manifesto-list .item{padding:1.666667em;}
	.manifesto-list .con{margin-left:1.666667em;}
}

@media all and (max-width:640px){
	.manifesto{padding:2.222222em 1.111111em; border-radius:1.388889em;}
	.manifesto-title .eng{font-size:.888889em; letter-spacing:.5em;}
	.manifesto-title h3{font-size:1.777778em;}
	.manifesto-title .txt br{display:none;}
	.manifesto-list{margin-top:2.222222em;}
	.manifesto-list .item{display:block; padding:1.388889em; border-radius:.888889em;}
	.manifesto-list .flag{width:6.666667em; height:4.444444em;}
	.manifesto-list .con{margin:1.111111em 0 0;}
	.manifesto-list .tit{display:block;}
	.manifesto-list .tit strong{display:inline-block; font-size:1.444444em;}
	.manifesto-list .tit span{display:inline-block; margin-left:.444444em;}
	.manifesto-list .s-txt{font-size:1em;}
}

/*************************************
	공약이행로드맵
**************************************/
.roadmap .htitle{position:relative; color:#0a2961; font-weight:800; font-size:1.777778em; margin:0 0 1.25em;}
/*
.roadmap .roadmap-table{width:100%; min-width:1100px; table-layout:fixed;}
.roadmap .roadmap-table th{padding:1.111111em .555556em; color:#fff; font-weight:700; text-align:center; background:#0A2961; border-right:1px solid #475f89; border-bottom:1px solid #475f89;}
.roadmap .roadmap-table td{position:relative; padding:1.111111em .777778em; border-right:1px solid #ebebeb; border-bottom:1px solid #ebebeb; color:#333; background:#fff;}
.roadmap .roadmap-table th:last-child,.roadmap .roadmap-table td:last-child{border-right:0;}
.roadmap .roadmap-table .taC{text-align:center;}
*/
.roadmap .roadmap-table td {position:relative; background:#fff;}
.roadmap .rate-head{display:-ms-flexbox; display:flex; padding:0 !important;}
.roadmap .rate-head span{display:block; -ms-flex:1 1 20%; flex:1 1 20%; padding:1.111111em .25em; border-right:1px solid #e7e7e7;}
.roadmap .rate-head span:last-child{border-right:0;}
.roadmap .rate-graph{height:3.055556em; padding:0; background:repeating-linear-gradient(to right,#fff 0,#fff 99px,#d8dde6 100px);}
.roadmap .rate-graph span{position:absolute; left:0; top:50%; display:block; height:1.555556em; border-radius:0 .555556em .555556em 0; background:#367FFC; transform:translateY(-50%);}
.roadmap .pledge-link{display:inline; color:#222; text-decoration:underline; cursor:pointer; background:none; text-align:left; text-underline-offset:3px;}
.roadmap .pledge-link:hover,.roadmap .pledge-link:focus{color:#0a2961;}
.roadmap .key-pledge{display:inline-block; margin:0 0 .555556em; padding:.277778em .666667em; border:1px solid #d8dde6; border-radius:.277778em; color:#0a2961; font-weight:700; font-size:.888889em; background:#f7f9fc;}
.roadmap .pledge-modal-pop{display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:99999;}
.roadmap .pledge-modal-pop .innerWrap{position:absolute; left:50%; top:50%; display:-ms-flexbox; display:flex; -ms-flex-direction:column; flex-direction:column; width:85%; max-width:900px; height:80%; max-height:620px; min-height:400px; padding:3.333333em 2.222222em 2.222222em; border-radius:1.111111em; background:#fff; transform:translate(-50%,-50%);}
.roadmap .pledge-modal-pop .pop-close{position:absolute; right:1em; top:1em; width:2.222222em; height:2.222222em; font-size:0; cursor:pointer; background:none;}
.roadmap .pledge-modal-pop .pop-close:before,.roadmap .pledge-modal-pop .pop-close:after{content:''; position:absolute; left:50%; top:50%; width:1.333333em; height:2px; background:#333;}
.roadmap .pledge-modal-pop .pop-close:before{transform:translate(-50%,-50%) rotate(45deg);}
.roadmap .pledge-modal-pop .pop-close:after{transform:translate(-50%,-50%) rotate(-45deg);}
.roadmap .pledge-modal-pop h5 {display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; padding-left:0; margin-top:0; color:#0a2961; font-size:1.444444em; font-weight:700;}
.roadmap .pledge-modal-pop h5 b {-ms-flex:0 0 auto; flex:0 0 auto; -ms-flex-item-align:start; align-self:flex-start; padding:.625em 1.25em; margin-right:.769231em; border-radius:999px; color:#fff; font-size:.615385em; font-weight:700; line-height:1; text-align:center; background:#1e3272;}
.roadmap .pledge-modal-pop h5:before {display:none;}
.roadmap .pledge-modal-pop h5 span {-ms-flex:1 1 auto; flex:1 1 auto;}
.roadmap .pledge-modal-pop .m-cont{-ms-flex:1 1 auto; flex:1 1 auto; margin-top:1.111111em; padding:1.666667em; overflow:auto; background:#f5f7f9; border-radius:1.111112em;}
.roadmap .pledge-modal-pop .ready{color:#555;}
.roadmap .pledge-modal-pop .pop-btn {display:inline-block; padding:.555556em 2.2222em; margin:1.666667em auto 0; border-radius:.277778em; color:#fff; font-weight:600; text-align:center; cursor:pointer; background:#0a2961;}

@media all and (max-width:1024px){
	.roadmap .guide{display:block;}
}

@media all and (max-width:640px){
	.roadmap .htitle{font-size:1.444444em;}
	.roadmap .pledge-modal-pop .innerWrap{width:90%; padding:3.055556em 1.388889em 1.388889em;}
	.roadmap .pledge-modal-pop h5{font-size:1.111111em;}
	.roadmap .pledge-modal-pop .cont{padding:1.111111em;}
	.roadmap .pledge-modal-pop .pop-btn {width:100%;}
}

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

.mainMap {position:relative; min-height:45.7056em; padding:2.7778em; background:#F4F9FE url(../img/sub02/0202_bg.png) no-repeat 50% 100%; background-size:contain; border-radius:1.6667em; overflow:hidden;}
.mainMap:after {content:''; display:block; position:absolute; bottom:-9em; left:2.7778em; width:15.5556em; height:25.5556em; background:url(../img/sub02/0202_img01.png) no-repeat 50% 50%; background-size:contain;}
.mainMap:before {content:''; display:block; position:absolute; top:2.7778em; left:2.7778em; width:31.7778em; height:5.0556em; background:url(../img/sub02/0202_img02.png) no-repeat 50% 50%; background-size:contain;}
.mainMap .detail {display:block; position:relative; width:29em; margin-left:auto;}
.mainMap .detail.loading {opacity:0; visibility:hidden;}
.mainMap .detail > div {display:block; position:relative; background:#fff; border-radius:1.1111em; padding:1.6667em;}
.mainMap .detail > div + div {margin-top:1.66667em;}
.mainMap .detail .tit {}
.mainMap .detail .tit strong {font-size:1.5em;}
.mainMap .detail ul, .mainMap .detail ol {margin-top:1.11112em;}

.mainMap .map {position:absolute; top:3.3333em; left:2.7778em; width:31.3em; height:34.15em; background:url(/portal/img/map/bak.svg) no-repeat 50% 50%; background-size:contain; z-index:0;}
.mainMap .map #over {position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; background:no-repeat 50% 50%; background-size:contain; transition:.3s all; -webkit-transition:.3s all;}
.mainMap .map #over.chowol {background-image:url(/portal/img/map/chowol.svg);}
.mainMap .map #over.docheok {background-image:url(/portal/img/map/docheok.svg);}
.mainMap .map #over.gongiam {background-image:url(/portal/img/map/gongiam.svg);}
.mainMap .map #over.gwangnam1 {background-image:url(/portal/img/map/gwangnam1.svg);}
.mainMap .map #over.gwangnam2 {background-image:url(/portal/img/map/gwangnam2.svg);}
.mainMap .map #over.gyeongan {background-image:url(/portal/img/map/gyeongan.svg);}
.mainMap .map #over.namhansanseong {background-image:url(/portal/img/map/namhansanseong.svg);}
.mainMap .map #over.namjong {background-image:url(/portal/img/map/namjong.svg);}
.mainMap .map #over.neungpyeong {background-image:url(/portal/img/map/neungpyeong.svg);}
.mainMap .map #over.opo1 {background-image:url(/portal/img/map/opo1.svg);}
.mainMap .map #over.opo2 {background-image:url(/portal/img/map/opo2.svg);}
.mainMap .map #over.shinhyun {background-image:url(/portal/img/map/shinhyun.svg);}
.mainMap .map #over.songjeong {background-image:url(/portal/img/map/songjeong.svg);}
.mainMap .map #over.ssangryeong {background-image:url(/portal/img/map/ssangryeong.svg);}
.mainMap .map #over.tanbeol {background-image:url(/portal/img/map/tanbeol.svg);}
.mainMap .map #over.toechon {background-image:url(/portal/img/map/toechon.svg);}

.map .selected {display:none;position:absolute;width:0;height:0;overflow:hidden;text-indent:-999px;opacity:0;z-index:-9999;}
.map .on .selected {display:block;}

.mainMap .map .marker strong {display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); white-space:nowrap; font-size:.8em; color:#666; font-weight:400; transition:.3s all; -webkit-transition:.3s all;}
.mainMap .map .marker .selected {width:1.4em; height:1.8em; bottom:-1em; margin-top:-.15em; background:url(/portal/img/map/marker.svg) no-repeat 50% 50%; background-size:contain; z-index:1; opacity:1; left:50%; margin-left:-.7em;}
.mainMap .map .marker.on {z-index:5;}
.mainMap .map .marker.on strong {padding:.25em 1.25em; border-radius:9em; background:#222; color:#fff; font-size:1em; bottom:1.6em;}
.mainMap .map .marker.on .selected {bottom:0;}
.mainMap .map .marker {display:block; position:absolute; width:1px; height:1px;}
.mainMap .map .marker[data-cate='chowol'] {top:17.9em; left:17.7em;}
.mainMap .map .marker[data-cate='gongiam'] {top:22em; left:24.6em;}
.mainMap .map .marker[data-cate='docheok'] {top:28.7em; left:18.3em;}
.mainMap .map .marker[data-cate='toechon'] {top:10.6em; left:20.5em;}
.mainMap .map .marker[data-cate='namjong'] {top:5em; left:18.5em;}
.mainMap .map .marker[data-cate='namhansanseong'] {top:9.5em; left:10em;}
.mainMap .map .marker[data-cate='opo1'] {top:22.2em; left:7.8em;}
.mainMap .map .marker[data-cate='opo2'] {top:21.3em; left:12.6em;}
.mainMap .map .marker[data-cate='shinhyun'] {top:21.5em; left:3.5em;}
.mainMap .map .marker[data-cate='neungpyeong'] {top:23.5em; left:3.7em;}
.mainMap .map .marker[data-cate='gyeongan'] {top:16.7em; left:11.8em;}
.mainMap .map .marker[data-cate='ssangryeong'] {top:17.3em; left:14em;}
.mainMap .map .marker[data-cate='songjeong'] {top:14.4em; left:12.8em;}
.mainMap .map .marker[data-cate='tanbeol'] {top:13.7em; left:9.6em;}
.mainMap .map .marker[data-cate='gwangnam1'] {top:17.5em; left:7.5em;}
.mainMap .map .marker[data-cate='gwangnam2'] {top:19.4em; left:9.6em;}

.mainMap .detail {display:none;}
.mainMap .detail.active {display:block;}

@media all and (max-width:1024px) {
	.mainMap:after {display:none;}
	.mainMap .map {position:relative; top:0; left:auto; transform:none; -webkit-transform:none; margin:0 auto;}
	.mainMap .map-area {overflow:auto; margin:0 -1em 2em;}
	.mainMap .detail {width:auto; margin-left:0; word-break:keep-all;}
	.mainMap .detail .more-area {text-align:center; padding-bottom:3em;}
}