@charset "utf-8";

/**************************************
	시정 비전
**************************************/

.vision-itme {display:block; padding:5rem; border:.3rem solid #E2E7EF;}
.vision-itme ~ h4 {margin-top:6rem;}
.vision-itme .box {display:flex; justify-content:center;}
.vision-itme img {display:block; margin:0 auto;}
.vision-itme ul {display:block; margin:0; padding:0; list-style:none;}
.vision-itme li {display:block;width:100%;padding:1.6rem 0;text-align:left;position: relative;}
.vision-itme li:before {content:"";display: block;position:absolute;top: 45%;left: -1.5em;width: .8rem;height: .8rem;background: #1c1d2f;border-radius: 100%;}

.vision-itme li i {display:none; position:relative; width:5.8rem; height:5.8rem; margin-right:2rem; border-radius:100%; background:#F4F6FB;}
.vision-itme li i:before {content:""; display:none; position:absolute; top:50%; left:50%; width:2.4rem; height:2.4rem; margin:-1.2rem 0 0 -1.2rem; background:url(../img/contents/04/img_040101.svg) no-repeat 0 0 / auto 2.4rem;}
.vision-itme li i.ty1:before {background-position-x:0;}
.vision-itme li i.ty2:before {background-position-x:-3rem;}
.vision-itme li i.ty3:before {background-position-x:-6rem;}
.vision-itme li i.ty4:before {background-position-x:-9rem;}
.vision-itme li i.ty5:before {background-position-x:-12rem;}
.vision-itme li i.ty6:before {background-position-x:-15rem;}
.vision-itme li p {display:inline-block; margin:0; font-size:1.5em; text-align:left;}
.vision-itme li p span {color: #17212D;margin-bottom:.5rem;}
.vision-itme li p strong {color: #2a569b;font-weight:700;}

@media all and (max-width:640px) {
	.vision-itme {padding:4rem;}
	.vision-itme ul {margin-top:2rem;}
	.vision-itme li:before {top: 30%;}
	.vision-itme li p {font-size:1.3em;}
	.vision-itme li p strong {display:block;}
}

/**************************************
	공약 이행 방향
**************************************/

.promiseDirectionWrap {display:block; overflow:hidden;}
.promiseDirectionWrap li {display:flex; align-items:center; margin:0 -3rem;}
.promiseDirectionWrap li + li {margin-top:5rem;}
.promiseDirectionWrap li:before {content:""; display:block; position:relative; width:44rem; height:30rem; border-radius:2rem; background:no-repeat 50% 50% / cover; margin:0 3rem; flex-shrink:0;}
.promiseDirectionWrap li > div {display:block; position:relative; padding:2rem 0; margin:0 3rem; flex-grow:1;}
.promiseDirectionWrap li:nth-child(even) {flex-direction:row-reverse;}
.promiseDirectionWrap li:nth-child(1):before,
.promiseDirectionWrap li:nth-child(1) .txt:before {background-image:url(../img/contents/04/img_040102_01.png);}
.promiseDirectionWrap li:nth-child(2):before,
.promiseDirectionWrap li:nth-child(2) .txt:before {background-image:url(../img/contents/04/img_040102_002.png);}
.promiseDirectionWrap li:nth-child(3):before,
.promiseDirectionWrap li:nth-child(3) .txt:before {background-image:url(../img/contents/04/img_040102_003.png);}
.promiseDirectionWrap li:nth-child(4):before,
.promiseDirectionWrap li:nth-child(4) .txt:before {background-image:url(../img/contents/04/img_040102_004.png);}
.promiseDirectionWrap li:nth-child(5):before,
.promiseDirectionWrap li:nth-child(5) .txt:before {background-image:url(../img/contents/04/img_040102_005.png);}
.promiseDirectionWrap li:nth-child(6):before,
.promiseDirectionWrap li:nth-child(6) .txt:before {background-image:url(../img/contents/04/img_040102_006.png);}
.promiseDirectionWrap li:nth-child(7):before,
.promiseDirectionWrap li:nth-child(7) .txt:before {background-image:url(../img/contents/04/img_040102_007.png);}
.promiseDirectionWrap li:nth-child(8):before,
.promiseDirectionWrap li:nth-child(8) .txt:before {background-image:url(../img/contents/04/img_040102_008.png);}
.promiseDirectionWrap li:nth-child(9):before,
.promiseDirectionWrap li:nth-child(9) .txt:before {background-image:url(../img/contents/04/img_040102_009.png);}
.promiseDirectionWrap li:nth-child(10):before,
.promiseDirectionWrap li:nth-child(10) .txt:before {background-image:url(../img/contents/04/img_040102_010.png);}

.promiseDirectionWrap li > div h4 {margin-top:0; margin-bottom:2.7rem; font-weight:600; padding:0; color:#2F353D; font-size:4rem; word-break:keep-all;}
.promiseDirectionWrap li > div h4:before {display:none;}
.promiseDirectionWrap li > div h4 em {color:#2A569B; font-weight:800;}

.promiseDirectionWrap .txt {display:none;}

@media all and (max-width:1024px) {
	.promiseDirectionWrap li {margin:0 -2rem;}
	.promiseDirectionWrap li + li {margin-top:4rem;}
	.promiseDirectionWrap li:before ,
	.promiseDirectionWrap li > div {margin-left:2rem; margin-right:2rem;}
	.promiseDirectionWrap li > div h4 {font-size:3.5rem;}
}
@media all and (max-width:840px) {
	.promiseDirectionWrap li:before {width:30rem; height:30rem;}
}
@media all and (max-width:640px) {
	.promiseDirectionWrap li {display:block; margin:0;}
	.promiseDirectionWrap li:before ,
	.promiseDirectionWrap li > div {margin:0;}
	.promiseDirectionWrap li:before {width: 100%;/* height:auto; */}
	.promiseDirectionWrap li > div {/* padding:0; */}
	.promiseDirectionWrap li > div h4 {font-size:3rem;}
	.promiseDirectionWrap li > div h4 em {display:inline-block;}
	
	.promiseDirectionWrap li .txt {display:flex; align-items:center; display:none;}
	.promiseDirectionWrap li .txt:before {content:""; display:block; position:relative; width:20rem; height:20rem; border-radius:2rem; background:no-repeat 50% 50% / cover; margin-right:2rem; flex-shrink:0;}
}
@media all and (max-width:460px) {
	.promiseDirectionWrap li .txt:before {width:15rem; height:15rem;}
}
@media all and (max-width:380px) {
	.promiseDirectionWrap li .txt {/* display:block; */}
	.promiseDirectionWrap li .txt:before {width:auto; height:15rem; margin-bottom:2rem; margin-right:0;}
}

/**************************************
	사회 경제적 여건
**************************************/

.socialConditionWrap {display:flex; flex-wrap:wrap; margin:-1.5rem;}
.socialConditionWrap .item {display:flex; position:relative; flex-direction:column; padding:5.8rem 6.2rem 6.4rem; margin:1.5rem; width:calc((100% - (3rem * 2)) / 2); border-radius:2rem; border:.3rem solid #E2E7EF; overflow:hidden;}
.socialConditionWrap .item .badge {display:block; position:absolute; top:0; right:0; width:10rem; height:10rem; text-align:center; line-height:10rem; font-size:4rem; font-family:'Kanit'; color:#fff; font-weight:600; background:#003365; border-radius:0 0 0 2rem;}
.socialConditionWrap .item .badge.point {background:#FF4A57;}
.socialConditionWrap .item h4 {margin-top:0; margin-bottom:2rem;}

@media all and (max-width:1024px) {
	.socialConditionWrap .item {padding:4rem 5rem;}
	.socialConditionWrap .item .badge {font-size:3rem; width:7rem; height:7rem; line-height:7rem;}
}
@media all and (max-width:780px) {
	.socialConditionWrap .item {width:calc((100% - (3rem * 1)) / 1);}
}
@media all and (max-width:490px) {
	.socialConditionWrap .item {padding:3rem 4rem;}
}
@media all and (max-width:360px) {
	.socialConditionWrap .item {padding:3rem;}
}


/**************************************
	공약관리체계
**************************************/

.promiseManageWrap {display:flex; justify-content:center; align-items:start; border-radius:3rem; margin-bottom:6rem; padding:7rem; background:#F4F6FB;}
.promiseManageWrap .group {max-width:calc((100% - 10rem) / 2); width:35.3rem;}
.promiseManageWrap .group + .group {margin-left:10rem;}

@media all and (max-width:960px) {
	.promiseManageWrap .group {max-width:calc((100% - 5rem) / 2);}
	.promiseManageWrap .group + .group {margin-left:5rem;}
}
@media all and (max-width:830px) {
	.promiseManageWrap {padding:5rem;}
}
@media all and (max-width:680px) {
	.promiseManageWrap {padding:4rem;}
	.promiseManageWrap .group {max-width:calc((100% - 3rem) / 2);}
	.promiseManageWrap .group + .group {margin-left:3rem;}
}
@media all and (max-width:640px) {
	.promiseManageWrap {display:block;}
	.promiseManageWrap .group {margin-left:auto; margin-right:auto; width:100%; max-width:100%;}
	.promiseManageWrap .group + .group {margin-left:auto; margin-top:4rem;}
}
@media all and (max-width:380px) {
	.promiseManageWrap {padding:3rem;}
	.promiseManageWrap .group + .group {margin-top:3rem;}
}

.promiseManageWrap .group {display:flex; flex-direction:column;}
.promiseManageWrap .group h5 {border-radius:1rem; font-size:2.2rem; background:#003365; color:#fff; padding:2.3rem 2rem; text-align:center; font-weight:500; margin-top:0; margin-bottom:3rem; word-break:keep-all;}

.promiseManageWrap .list {display:block; position:relative; z-index:0;}
.promiseManageWrap .list > li {display:flex; border-radius:1rem; overflow:hidden; background:#fff; border:1px solid #E2E7EF;}
.promiseManageWrap .list > li + li {margin-top:2rem;}
.promiseManageWrap .list > li > strong {display:flex; flex-shrink:0; align-items:center; text-align:center; padding:1rem; word-break:keep-all; width:11.2rem; justify-content:center; background:#3482CE; color:#fff; font-weight:600;}
.promiseManageWrap .list > li > span {display:flex; align-items:center; padding:1.8rem 2.6rem;}
.promiseManageWrap .list > li > .list-ol,
.promiseManageWrap .list > li > .list-ul {padding:1.8rem;}
.promiseManageWrap .list > li > .list-ol > li > .num {background:#101010;}

.promiseManageWrap .list.line:before {content:""; display:block; position:absolute; width:1px; top:0; bottom:0; left:50%; background:#E2E7EF; z-index:-1;}
.promiseManageWrap .list.line > li {display:block;}
.promiseManageWrap .list.line > li > strong,
.promiseManageWrap .list.line > li > span {display:block; width:auto; padding:1.8rem 1rem; text-align:center;}

.promiseManageWrap .group.ty2 h5 {background:#DE1322;}
.promiseManageWrap .group.ty2 .list > li > strong {background:#F94753;}


@media all and (min-width:641px) {
	.promiseManageWrap .group.ty2 h5 {margin-bottom:6rem;}
}
@media all and (max-width:640px) {
	.promiseManageWrap .group h5 {margin-bottom:2rem;}
}
@media all and (max-width:410px) {
	.promiseManageWrap .list > li {display:block;}
	.promiseManageWrap .list > li > strong,
	.promiseManageWrap .list > li > span {display:block; width:auto; padding:1.8rem 1rem; text-align:center;}
}



/**************************************
	e-민주주의 공약
**************************************/

.e-minjuWrap {display:block; position:relative; padding-top:5rem;}
.e-minjuWrap h4 {margin-top:0; text-align:center; margin-bottom:7.6rem; font-weight:400; color:#2F353D; font-size:4rem; padding:0;}
.e-minjuWrap h4:before {display:none;}
.e-minjuWrap h4 em {color:#2A569B; font-weight:800;}
.e-minjuWrap ul {display:flex; flex-wrap:wrap; margin:-1rem;}
.e-minjuWrap li {display:flex; padding:1rem; width:28%; flex-grow:1;}
.e-minjuWrap li a {display:flex; flex-direction:column; flex-grow:1; backgrounD:#F4F6FB; border-radius:1rem; padding:3.6rem 4.7rem;}
.e-minjuWrap li a strong {display:block; font-size:2.4rem; font-weight:700; margin-bottom:calc(5.8rem - 1.4em); word-break:keep-all; line-height:1.4em; height:2.8em;}
.e-minjuWrap li a span {display:flex; align-items:center; color:#7F899C; font-size:1.6rem; line-height:1.8rem;}
.e-minjuWrap li a span:after {content:""; display:block; margin-left:.7rem; width:1.8rem; height:1.8rem; border-radius:100%; background:#7F899C url(../img/contents/04/img_0701.png) no-repeat 0 -14rem / auto 16rem;}
.e-minjuWrap li a:after {content:""; display:block; position:absolute; font-size:1rem; width:13em; height:13em; bottom:.5em; right:2.5em; background:url(../img/contents/04/img_0701.png) no-repeat 0 0 / auto 16em;}
.e-minjuWrap li:nth-child(1) a:after {background-position-x:0;}
.e-minjuWrap li:nth-child(2) a:after {background-position-x:-13em;}
.e-minjuWrap li:nth-child(3) a:after {background-position-x:-26em;}
.e-minjuWrap li:nth-child(4) a:after {background-position-x:-39em;}
.e-minjuWrap li:nth-child(5) a:after {background-position-x:-52em;}
.e-minjuWrap li:nth-child(6) a:after {background-position-x:-65em;}

@media all and (max-width:1024px) {
	.e-minjuWrap li a {padding:3rem}
	.e-minjuWrap li a:after {font-size:.8rem; right:1em;}
	.e-minjuWrap li a strong {margin-bottom:calc(4.8rem - 1.4em);}
}
@media all and (max-width:860px) {
	.e-minjuWrap {padding-top:0;}
	.e-minjuWrap h4 {word-break:keep-all; margin-bottom:6rem; font-size:3.7rem;}
	.e-minjuWrap h4 br {display:none;}
}
@media all and (max-width:760px) {
	.e-minjuWrap li {width:40%;}	
}
@media all and (max-width:640px) {
	.e-minjuWrap li a:after {font-size:.6rem; right:2rem; bottom:2rem;}
}
@media all and (max-width:440px) {
	.e-minjuWrap li {width:100%;}
}


/**************************************
	민선 9기 공략
**************************************/

.promise9Wrap {display:block; position:relative;}
.promise9Wrap dl {border-radius:2rem; overflow:hidden;}
.promise9Wrap dl + dl {margin-top:4rem;}
.promise9Wrap dt {display:block; position:relative; padding:1.95rem; text-align:center; color:#fff; font-size:3rem; font-weight:600; background:#020928 url(../img/contents/04/img_0405_title_bak.png) no-repeat top 50% left -13.4rem / 43.6rem auto; z-index:0; overflow:hidden;}
.promise9Wrap dt em {font-family:'Kanit'; font-size:4.4rem; margin-right:2rem; vertical-align:middle;}
.promise9Wrap dt strong {font-weight:600; vertical-align:middle;}
.promise9Wrap dt:after {content:""; display:block; position:absolute; right:2.3rem; bottom:-1.5rem; width:30rem; height:11.5rem; background:url(../img/contents/04/img_0405.svg) no-repeat 50% 50% / contain; z-index:-1;}
.promise9Wrap dd {padding:2.5rem; border:1px solid #E5E5E5; border-radius:0 0 2rem 2rem; border-top-width:0;}

.promise9Wrap ol {display:flex; flex-wrap:wrap; margin:-.5rem;}
.promise9Wrap ol li {display:flex; position:relative; width:calc((100% - (1rem * 2)) / 2); margin:.5rem; padding:2rem; flex-wrap:wrap; border-radius:2rem; border:1px solid #E5E5E5;}
.promise9Wrap ol li em {display:block; margin-right:1rem; flex-shrink:0; text-align:center; border-radius:1rem; min-width:3.6rem; padding:0 .5rem; height:3.6rem; line-height:3.6rem; background:#FF4A57; color:#fff; font-weight:700; font-weight:700;}
.promise9Wrap ol li strong {display:block; line-height:3.5rem; font-size:2rem; flex-grow:1; margin-right:2rem;}
.promise9Wrap ol li span {display:none; font-size:1.6rem; color:#787878; margin-left:auto; line-height:3.6rem; flex-shrink:0;}

@media all and (max-width:1024px) {
	.promise9Wrap ol {margin:0;}
	.promise9Wrap ol li {margin:0; width:100%; padding-left:7rem;}
	.promise9Wrap ol li + li {margin-top:1rem;}
	.promise9Wrap ol li em  {position:absolute; top:2rem; left:2rem;}
}
@media all and (max-width:640px) {
	.promise9Wrap dt:after {opacity:.7; right:-3rem;}
	.promise9Wrap dt em {display:block; margin:0; font-size:3.5rem;}
	.promise9Wrap dt strong {display:block; word-break:keep-all; font-size:2.5rem;}
	.promise9Wrap ol li strong {width:100%; padding:.4rem 0; line-height:1.4; margin-right:0;}
	.promise9Wrap ol li span {line-height:1.2; margin-top:1rem;}
}
@media all and (max-width:440px) {
	.promise9Wrap dd {padding:1.5rem;}
	.promise9Wrap ol li {padding-left:2rem;}
	.promise9Wrap ol li em {position:relative; top:auto; left:auto; margin-bottom:1rem;}
	.promise9Wrap ol li strong {width:100%; padding:.4rem 0; line-height:1.4;}
	.promise9Wrap ol li span {line-height:1.2; margin-top:1rem;}
}


/**************************************
	매니페스토
**************************************/

.manifestoWrap {display:block; position:relative; padding:4.8rem 7.8rem 0; z-index:0; overflow:hidden;}
.manifestoWrap:before {content:""; display:block; position:absolute; top:0; left:0; right:0; height:44.6rem; z-index:-2; background:#F7FAFC;}
.manifestoWrap:after {content:""; display:block; position:absolute; font-size:1rem; top:0; right:0; width:41.1em; height:36.3em; background:url(../img/contents/04/img_0410.png) no-repeat 0 0 / 89em auto; z-index:-1;}

.manifestoWrap .top {display:flex; align-items:center; position:relative; padding:3rem 0 6.4rem; z-index:0;}
.manifestoWrap .top:after {content:""; display:block; position:absolute; font-size:1rem; bottom:-4.8em; left:4.2em; width:88.6em; height:14em; background:url(../img/contents/04/img_0410.png) no-repeat 0 -52em / 89em auto; z-index:-1;}
.manifestoWrap .top > * {display:flex; justify-content:end; width:100%; padding:0 7.4rem; position:relative;}
.manifestoWrap .top > * + * {justify-content:start;}
.manifestoWrap .top > * + *:before {content:""; display:block; position:absolute; width:1px; height:7rem; background:#000; left:0; top:50%; margin-top:-3.5rem;}
.manifestoWrap .top .txt {font-size:1rem;}
.manifestoWrap .top .logo {display:block; position:absolute; top:-3rem; left:0; width:14em; height:3.4em; text-indent:-999px; background:url(../img/contents/04/img_0410.png) no-repeat -42em 0 / 89em auto; overflow:hidden;}
.manifestoWrap .top .txt h4 {font-size:1em; margin:0; padding:0; text-indent:-999px; overflow:hidden; width:35em; height:12.7em; background:url(../img/contents/04/img_0410.png) no-repeat 0 -37em / 89em auto; }
.manifestoWrap .top .txt h4:before {display:none;}

.manifestoWrap .con {display:block; position:relative; padding:5.9rem 7.3rem; background:#fff; z-index:1;}
.manifestoWrap .con h4 {margin-top:0;}
.manifestoWrap .con p + p {margin-top:1.4em;}


@media all and (max-width:1024px) {
	.manifestoWrap {padding:4.8rem 5rem 0;}
	.manifestoWrap:after {font-size:.8rem;}
	.manifestoWrap .top {display:block; padding:2rem 0 5rem;}
	.manifestoWrap .top:after {font-size:.8rem; left:50%; margin-left:-44.3em;}
	.manifestoWrap .top > * {display:block; padding:0;}
	.manifestoWrap .top > * + *:before  {display:none;}
	.manifestoWrap .top .txt h4 {margin:0 auto;}
	.manifestoWrap .top .control {text-align:center; margin-top:3rem;}
}
@media all and (max-width:760px) {
	.manifestoWrap {padding:3.5rem 3rem 0;}
	.manifestoWrap:after {font-size:.6rem;}
	.manifestoWrap .top .txt {font-size:.9rem;}
	.manifestoWrap .con {padding:5rem 6.5rem;}
}
@media all and (max-width:640px) {
	.manifestoWrap:after {display:none;}
	.manifestoWrap {padding:3.5rem 2rem 0;}
	.manifestoWrap .con {padding:3rem 4rem;}
}
@media all and (max-width:480px) {
	.manifestoWrap .con {padding:3rem;}
}
@media all and (max-width:380px) {
	.manifestoWrap {padding:3.5rem 0 0;}
	.manifestoWrap .top .txt {font-size:.7rem;}
	.manifestoWrap .con {padding:3rem 0;}
}