@charset "utf-8";

.greeting {display: flex; gap: 4rem; padding: 2rem 5rem 5rem 0; border-radius: 2.6rem; font-family: var(--font-paper); background: url(/headman/img/contents/bg_greeting.png) no-repeat center/cover;}
.greeting .img {max-width: 56.8rem;}
.greeting .txt {padding-top: 5rem;}
.greeting .txt .tit {padding-bottom: 1rem; font-size: 2.7rem; color: #171B52; font-weight: 700; font-family: var(--font-elicedx);}
.greeting .txt .tit h3 {font-size: 4rem;}
.greeting .txt .tit h3 strong {background: linear-gradient(90deg, #0873D8 0%, #4522DF 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.greeting .txt .con {display: flex; gap: 2.6rem; font-size: 1.8rem; flex-direction: column; padding-top: 4rem; border-top: 1px solid #53578B;}
.greeting .txt .con strong {font-size: 2rem;}
.greeting .txt .name {display: flex; align-items: center; justify-content: flex-end; gap: 2rem; padding: 2rem 0; font-size: 2.4rem; font-weight: 600; color: #333; margin-top: 2rem;}

.career {display: flex; align-items: flex-start; gap: 6rem;}
.career .img {max-width: 28rem; border-radius: 2.6rem; overflow: hidden;}
.career .cont {display: flex; flex-direction: column; gap: 1rem; flex-grow: 1;}
.career .cont dl {display: flex; align-items: flex-start; gap: 2rem; padding: 1.6rem; border-radius: 1rem; border: 1px dashed #d9d9d9;}
.career .cont dl dt {padding-left: 2.5rem; width: 9.5rem; height: 3rem; font-size: 2rem; font-weight: 700; background: url(/headman/img/contents/ico_blet.svg) no-repeat left center; text-align: justify;}
.career .cont dl dt::after {content: ''; display: inline-block; width: 100%; height: 0;}
.career .cont dl dd {line-height: 1.5; font-size: 1.8rem; padding-top: 0.2rem;}
.career .cont dl dd ul {display: flex; flex-direction: column; gap: 1rem;}
.career .cont dl dd ul li {position: relative; padding-left: 1.2rem;}
.career .cont dl dd ul li::before {content: ''; position: absolute; z-index: 1; left: 0; top: 1.2rem; width: 0.6rem; height: 0; border-top: 1px solid #3c3c3c;}

.headmanSns {display:flex; flex-wrap:wrap; justify-content:space-between; gap:36px;}
.headmanSns a {position:relative; flex-basis:calc(50% - 18px); padding:3.3% 3.7% 3.7%; color:#fff; font-size:2.4rem;}
.headmanSns a:before, .headmanSns a:after {content:''; display:block; position:absolute;}
.headmanSns a:before {top:22px; right:7%; padding:11%; border-radius:100%; background:#fff;}
.headmanSns a:after {top:29%; right:10%; width:77px; height:70px; background:no-repeat center;}
.headmanSns a.s01 {background:#00bf04;}
.headmanSns a.s01:after {background-image:url('/headman/img/contents/snsBox_sns02.png');}
.headmanSns a.s02 {background:linear-gradient(to right,#be0099,#f61a02,#feb200);}
.headmanSns a.s02:after {background-image:url('/headman/img/contents/snsBox_sns03.png');}
.headmanSns a.s03 {background:#006ef7;}
.headmanSns a.s03:after {background-image:url('/headman/img/contents/snsBox_sns01.png');}
.headmanSns a.s04 {background:#f80000;}
.headmanSns a.s04:after {background-image:url('/headman/img/contents/snsBox_sns04.png');}
.headmanSns a span {display:block; padding-bottom:7%; font-size:1.3rem; font-weight:800;}

.flex-con {display: flex; align-items: center; gap: 2.4rem; flex-direction: row; justify-content: space-between;}
.flex-con .img {max-width: 24rem; flex-shrink: 0; border: 1px solid #eee;}
.flex-con .con strong {display: block; font-size: 1.8rem; font-weight: 400; margin-bottom: 1rem;}

/*선거 공약*/
.pledge {overflow:hidden; margin-top:30px;}
.pledge>li {float:left; width:48%; margin-right:2%; border:1px solid #ddd;}
.pledge>li .img {float:left; width:38%;}
.pledge>li .img img {display:block; min-width:218px; max-height:290px;}
.pledge>li .con {position:relative; margin-left:220px; height:290px;; padding:5%;}
.pledge>li .con .tit {font-size:30px; line-height:1.5;}
.pledge>li .con .tit span {display:block; color:#0148bc; font-size:23px;}
.pledge>li .con ul.pledge_btn {position:absolute; bottom:8%; left:8%; width:84%;}
.pledge>li .con ul.pledge_btn li a {position:relative; display:block; margin-bottom:3%; padding:8px 15px; border:1px solid #484848; border-radius:0; font-size:16px;}
.pledge>li .con ul.pledge_btn li a:before {content:''; display:block; position:absolute; top:10px; right:5%; width:17px; height:17px; background:url('/headman/img/contents/btn_ic.png') no-repeat;}
.pledge>li .con ul.pledge_btn li a:hover {color:#fff; background-color:#0148bc;}
.pledge>li .con ul.pledge_btn li a.view:before {background-position:0 -18px;}
.pledge>li .con ul.pledge_btn li a.down:before {background-position:-18px -18px;}
.pledge>li .con ul.pledge_btn li a.view:hover:before {background-position:0 0;}
.pledge>li .con ul.pledge_btn li a.down:hover:before {background-position:-18px 0;}

.promise05 {position:relative; display: inline-block; margin-top:10px; padding:0px 5px; border:1px solid #dcdcdc;}
.promise05:before,
.promise05:after{display:block; content:''; position:absolute; height:100%; width:1px; top:0px; background:#dcdcdc;;}
.promise05:before {right: 5px;}
.promise05:after {right:2px;}

.Gchart2 #PieChart {max-height: 35rem;}

/*이행및실적*/
.graph_box {overflow:hidden; margin-bottom:80px;}
.graph_box .chart {float: left; width:40%; height:100%; margin:0 auto; text-align:center;}
.graph_box .chart span.title{position:relative; top:175px; display:block; width:100%; text-align:center; font-size:19px; font-weight:bold;}
.graph_box .table-box {float:right; width:60%}

.graph_circle{overflow:hidden; margin:60px 0 30px}
.circle{position:relative; float:left; width:20%; text-align:center}
.circle p.tag{position:absolute; left:0; top:31%; width:100%; text-align:center; margin-left:0; line-height:26px; font-weight:bold; font-size:20px;}

.circle p.tit{width:80%; margin:10px auto; text-align:center; font-size:15px; line-height:20px;}
.circle p.tit span{display:block; margin-top:10px; font-size:25px; font-weight:bold;}

.circle strong{color:#333}
.performP{display:flex; flex-direction:row; justify-content:center; flex-wrap: wrap; width:100%; margin-top:30px; padding:40px 0; background:#f5f5f5}
.performP li{margin:0 10px}

.rate>span{display:inline-block; width:50px;}
.rate>div {display:inline-block; vertical-align:middle; min-width:190px; height:20px; margin-right:5px; background:#ddd; border-radius:20px;}
.rate>div>span {display:block; height:20px; border-radius:20px;}
.rate.end>div>span {background:linear-gradient(to right, #005aea, #0766ff);}
.rate.ing>div>span {background:linear-gradient(to right, #ffba00, #ffba00);}
.rate.rate-ready>div>span {background:linear-gradient(to right, red, red);}

.rate.green>div>span {background:linear-gradient(to right, #14bfa9, #00aa8d);}
.rate.red>div>span {background:linear-gradient(to right, #ff5f68, #ff2b36);}
.rate.blue>div>span {background:linear-gradient(to right, #0766ff, #005aea);}
.rate.violet>div>span {background:linear-gradient(to right, #874af8, #600ff6);}
.rate.yellow>div>span {background:linear-gradient(to right, #ffba00, #ffa300);}

/*추진현황 추진율신호등
.result_light {position:relative; width:100px; height:30px; margin:0 auto; border-radius:4px; background:#1f1f1f;}
.result_light:after {display:block; content:""; position:absolute; left:50%; margin-left:-10px; top:5px; width:20px; height:20px; border-radius:50%; background:yellow; box-shadow:-30px 0 0px green, 30px 0 0px red; opacity:.2; z-index:0;}
.result_light span {position:absolute; left:50%; top:5px; width:20px; height:20px; border-radius:50%; border:1px solid rgba(255,255,255,.5); box-sizing:border-box; z-index:5;}
.result_light .yellow {margin-left:-10px;background:yellow;}
.result_light .green {margin-left:-40px; background:#00e700;}
.result_light .red {margin-left:20px; background:red;}*/

.con_manage {position:relative; padding-left:39%; padding-top:10px;}
.con_manage+.con_manage {margin-top: 60px;}
.con_manage img {position:absolute; left:0; top:0; max-width:41% !important; }
.con_manage h4 {margin-left:80px; margin-top: 30px; font-size: 2.7rem;}
.con_manage ul:not(.info-list) {padding:30px 30px 30px 80px; margin-top:15px; background:#f4f4f4;}
.con_manage ul:not(.info-list) > li {margin:10px 0; font-weight:bold;}
.con_manage ul>li>ul {padding:0 5px 5px 10px; margin-top:10px;}
.con_manage ul>li>ul>li {margin: 0;}
.manage_btn {padding-left:45px !important; background-image:url(/open_content/main/images/sub/ic_down.gif); background-repeat:no-repeat; background-position:25px center;}
.con_manage2 ul {padding:30px 50px; margin-top:15px; background:#f4f4f4;}
.con_manage2 ul li {margin:10px 0; font-weight:bold;}

.con_manage.dp_f {display: flex; padding-left: 0px }
.con_manage .img{max-width: 41%;}
.con_manage .img img{position: relative; max-width: 100% !important;}
.con_manage .conin{display: flex; flex-direction: column; flex-grow:1; margin-left: -25px;}
.con_manage .conin>ul{flex-grow: 1}

/*주민의견*/
.suggest {overflow:hidden;}
.suggest li {position:relative; float:right; width:49%; margin-top:2%; padding:7% 5%; height:400px; background:#f5f5f5;}
.suggest li:before {display:block; content:""; position:absolute; right:8%; bottom:10%; width:187px; height:187px; background:#fff; border-radius:50%;}
.suggest li:after {display:block; content:""; position:absolute; right:14%; bottom:18%; width:116px; height:115px; background-repeat:no-repeat; background-position:0 0;}
.suggest li:nth-child(odd) {float:left;}
.suggest li.suggest01:after {background-image:url('/headman/img/contents/suggest01.png');}
.suggest li.suggest02:after {background-image:url('/headman/img/contents/suggest02.png');}
.suggest li.suggest03:after {background-image:url('/headman/img/contents/suggest03.png');}
.suggest li.suggest04:after {background-image:url('/headman/img/contents/suggest04.png');}
.suggest li p.tit {font-family: var(--font-paper); font-weight: 700; margin-top:10px; font-size:37px; color:#0766ff;}
.suggest li p.tit span{display:block; margin-top:-10px; color:#484848; font-size:19px;}
.suggest li p.txt {font-size:19px;}
.suggest li a {position:relative; display:block; margin-top:120px; font-size:17px; font-weight:500;}
.suggest li a:after {display:block; content:""; position:absolute; left:80px; top:5px; width:63px; height:13px; background:url('/headman/img/contents/suggest_arrow.gif') no-repeat left top;}
.snsBox {display: flex; justify-content: space-between; margin-top:2%; padding:5%; background:#f5f5f5; overflow:hidden;}
.snsBox p.tit {font-family: var(--font-paper); font-weight: 700; font-size:37px; color:#0766ff;}
.snsBox ul {display: flex; justify-content: flex-end; gap: 4%; text-align:right; width:75%; font-size:0;}
.snsBox ul li a {position:relative; display:block; width:130px; height:130px; border-radius:100%; background:#fff; font-size:0; text-indent:-5000px;}
.snsBox ul li a:after {position:absolute; content:''; display:block; right:50%; top:50%; width:77px; height:70px; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.snsBox ul li.sns01 a:after {background:url('/headman/img/contents/snsBox_sns01.png') no-repeat center;}
.snsBox ul li.sns02 a:after {background:url('/headman/img/contents/snsBox_sns02.png') no-repeat center;}
.snsBox ul li.sns03 a:after {background:url('/headman/img/contents/snsBox_sns03.png') no-repeat center;}
.snsBox ul li.sns04 a:after {background:url('/headman/img/contents/snsBox_sns04.png') no-repeat center;}

/*공약지도*/
.promise-map {height:684px; background:url('/open_content/headman/img2020/contents/promise_map.jpg') no-repeat center top;}
.promise-map p {font-size:18px; font-weight:600; line-height:40px; color:#0148bc;}
/* .promise-map p a {padding-right:26px; color:#0148bc; background:url('/open_content/headman/img2020/contents/ic_link.png') no-repeat right -1px;} */
.promise-map>ul {position:relative; margin:4px 0 0 4px;}
.promise-map>ul li {position:relative; padding-left:10px; font-size:14px; letter-spacing:-.5px;}
.promise-map ul.list li:after{display:block; content:''; position:absolute; left:0; top:7px; width:4px; height:4px; background:#1d51b8; border-radius:50%}
.promise-map>ul>li {position:absolute; }
.promise-map>ul li.wg {left:40px; top:20px;}
.promise-map>ul li.cl {left:40px; top:209px;}
.promise-map>ul li.sn {left:40px; top:421px;}
.promise-map>ul li.gd {left:880px; top:15px;}
.promise-map>ul li.ga {left:880px; top:180px;}
.promise-map>ul li.yh {left:880px; top:335px;}
.promise-map>ul li.gj {left:880px; top:480px;}
.promise-map>ul li.gi {left:510px; top:570px;}
.mapBox{padding:30px; background:#f5f5f5;}
.mapBox>.Lcon {width:45%; margin-right:3%;}
.mapBox>.Rcon>p {text-align:right; margin-bottom:30px; font-size:16px;}
.mapBox>.Rcon>div .tit {padding-left:15px; margin-bottom:3.5%; font-size:25px; font-weight:bold; font-family:"S-CoreDream-4Regular" !important; border-left:6px solid #0766ff;}
.mapBox>.Rcon .conbox {padding:5%; background:#fff; border-radius:20px;}
.mapBox>.Rcon .conbox ul li {position:relative; line-height:1.4; margin-bottom:14px; padding-left:7px;}
.mapBox>.Rcon .conbox ul li:before {content:''; position:absolute; top:9px; left:0; display:block; width:3px; height:3px; background:#484848; border-radius:50%;}

.table-wrap.pledge-tb {overflow-x: auto;}
.table-wrap.pledge-tb tbody tr:hover {border: 2px solid var(--krds-light-color-border-primary);}

.tbox { padding: 1.6rem 3rem; font-size: 1.9rem; font-weight: 700; border-radius: 1rem; background: #EFF5FF;}
.new-site .img { max-height: 66rem; border-radius: 2rem; border: 1px solid #DADADA; box-shadow: 0 0 0.2rem 0 rgba(0, 0, 0, 0.08), 0 0.8rem 1.6rem 0 rgba(0, 0, 0, 0.12); overflow: hidden;}
.new-site .krds-btn { height: 6.4rem; padding-left: 2.4rem; padding-right: 2rem; }

.wish .tbox { display: flex; align-items: center; justify-content: center; gap: 2rem; text-align: center; margin-bottom: 3rem; }
.wish .tbox::before { content: ''; flex: 0 0 auto;  width: 6rem; height: 6rem; border-radius: 1rem; background: #FFF url(../img/contents/wish-ic.svg) no-repeat center / 100%; box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.11); }
.wish .tbox span { color: #1D4BBE; }
/********************************************************************************** 반응형*********************************************************************/


@media (min-width: 1200px) {
	.mapBox{display:flex; justify-content:space-between;}
	.mapBox>.Rcon {width:52%;}
	.mapBox>.Rcon>div {display:none;}
	.mapBox>.Rcon>div.on {display:block;}
	.mapBox>.Rcon .conbox {min-height:550px;}
	.mapBox>.Rcon .conbox.long ul {display:flex; justify-content:space-between; flex-wrap:wrap;}
	.mapBox>.Rcon .conbox.long ul li {width:48%; word-break: keep-all;}
	.mapBox>.Rcon .conbox.long ul li:nth-last-of-type(3)~li {margin-bottom:0;}
}

@media (max-width: 1199px) {
	.headmanSns a:after {width:13%; height:45%; background-size:contain;}
	.mapBox>.Rcon>div {margin-bottom:40px;}
	.mapBox>.Rcon>div:nth-last-of-type(2) ~ div {margin-bottom:0px;}
	.mapBox>.Rcon .conbox ul li {margin-bottom:8px; font-size:14px;}
	.mapBox>.Lcon, .mapBox>.Rcon>p {display:none;}
}

@media (max-width: 768px) {
	.greeting {padding: 2rem; gap: 0; flex-direction: column; align-items: center;}
	.greeting .txt {padding-top: 0;}
	.greeting .txt .tit {font-size: 2rem;}
	.greeting .txt .tit h3 {font-size: 2.6rem;}
	.greeting .txt .con {font-size: 1.6rem;}
	.greeting .txt .con strong {font-size: 1.8rem;}
	.greeting .txt .name {padding: 1rem 0; font-size: 2rem;}
	.greeting .txt .name img {max-width: 9rem;}
	
	.headmanSns {gap:10px}
	.headmanSns a {flex-basis:calc(50% - 5px)}
	.headmanSns a:before, .headmanSns a:after {display:none;}

	.flex-con {flex-direction: column;}

	/*선거 공약*/
	.pledge>li {width:100%; margin-bottom:2%;}
	.pledge>li .con {margin-left:220px;}

	.Gchart2 canvas {min-height:200px;}
	.graph_box .chart {float:none; width:100%; text-align:center;}

	.con_manage {padding-left:0;}
	.con_manage img {position:static; max-width:100% !important;}
	.con_manage h4 {margin-left:0; margin-top:20px !Important;}
	.con_manage ul:not(.info-list) {padding:30px;}
	.con_manage.dp_f {flex-direction: column;}
	.con_manage .img{max-width: 100%;}
	.con_manage .conin{margin-left: 0px;}

	/*주민의견*/
	.suggest li {width:100%; height:auto; margin-bottom:20px; padding:7% 8%;}
	.suggest li:before {display:none;}
	.suggest li:after {right:10%; bottom:30%; width:80px; height:80px; background-size:100%;}
	.suggest li:first-child:after {background-size:100%;}
	.suggest li p.tit {padding-right:85px; font-size: 3rem;}
	.suggest li p.txt {font-size:15px;}
	.suggest li a {margin-top:40px; font-size:16px;}
	
	.career {flex-direction: column; align-items: center; gap: 3rem;}
	.career .cont {width: 100%;}
	.career .cont dl dt {padding-left: 2.2rem; background-size: 1.4rem;}
}

@media screen and (max-width:640px) {
	.headmanSns a {flex-basis:100%; padding:20px}

	.Gchart2 {padding:10px;}
	.graph_box .chart {margin:0 auto 20px;}
	.graph_box .chart canvas {width:250px !important; height:250px !important;}
	.graph_box .chart span.title {top:150px;}
	.circle{width:50%; margin-bottom:15px;}
	.circle canvas {width:140px !important; height:140px !important;}
	.circle p.tag {top:58px;}

	.snsBox {flex-direction: column;}
	.snsBox ul {width:100%;}
	.snsBox ul li {width:24%; margin:1% 0 0 1%;}
	.snsBox ul li a {width: 6.5rem; height: 6.5rem;}
	.snsBox ul li a:after {width:4.4rem; height:4.4rem; background-size:100% !important;}
}

@media screen and (max-width:480px) {
	.greeting_intro {padding-top:0;}
	.greeting .greeting_intro>div {position:static; left:0%; top:0; padding:20px;}

	.pledge>li .con {margin-left:140px; height:185px;}
	.pledge>li .con .tit {font-size:25px;}
	.pledge>li .con .tit span {font-size:17px;}
	.pledge>li .img img {width:140px; min-width:140px;}
	.pledge>li .con ul.pledge_btn li a {padding:3px 10px; font-size:14px;}
	.pledge>li .con ul.pledge_btn li a:before {top:5px;}

	.wish .tbox { flex-direction: column; }
}