@charset "utf-8";
/*	
	-----------------------------------------------
	* sub.css
	-----------------------------------------------
*/

/* header */
#headerWrap .quick-link {display: none;}
#headerWrap:before {content:''; width: 96%; height: 29.063em; position: absolute; top: 0; right: 0; background: url(/portal/img/common/img_sub_visual.png) center center no-repeat; overflow: hidden; border-radius: 0 0 0 50px; z-index: -100;}
#headerWrap .aside {width: 3em;}

.ctn_area h1.depth_tle {margin:15px 0 0;color:#3b3a3a;font-size: 24px;font-weight:800;line-height:1.3;}
.ctn_area h1.depth_tle:before {display:block; margin:0 0 0.4em; width:20px; height:4px; background:#3589d8; content:'';}

.ctn_area .depth_01 {margin:20px 0 0;}
.ctn_area .depth_01 li:before {display:inline-block;margin: 4px 8px 0 0;width:10px;height:10px;background:rgb(79,210,237);background: linear-gradient(135deg, rgba(79,210,237,1) 50%, rgba(57,57,185,1) 50%);vertical-align: top;content:'';}
.ctn_area .depth_01 li {padding:0 0 0 0.8em;margin:0 0 1em;color:#3b3a3a;font-size: 17px;font-weight:700;}
.ctn_area .depth_01 li:after{content:''; display:block; clear:both;}
.ctn_area .depth_01 ol.list_num{margin-top:10px;}
.ctn_area .depth_01 ol.list_num li{font-size:15px; font-weight:400; color:#757575; background:none;}

.ctn_area h2 {padding: 0 0 0 1.5em;margin: 2.3em 0 1em; color:#3b3a3a; font-size:21px; font-weight:700;}
.ctn_area .depth_02 {margin:13px 0 0 15px;}
.ctn_area .depth_02 li:before {display:inline-block; width:3px; height:3px; margin:0 0.3em 0 0; background:rgb(79,210,237); vertical-align:middle; content:'';}
.ctn_area .depth_02 li {padding:0;margin: 0 0 4px;background:none;color:#757575;font-size:14px;font-weight:400;}
.ctn_area .depth_02 li strong {color:#1b6094;}

.ctn_area .depth_03 {margin:10px 0 8px !important;}
.ctn_area .depth_03 li {padding:0; margin:0 0 10px 12px; background:none; color:#a5a5a5; font-size:14px; font-weight:300;}
.ctn_area .depth_03 li:before {display:inline-block; width:4px; height:1px; margin:0 0.3em 0 0; background:#a5a5a5; vertical-align:middle; content:'';}

.ctn_area .depth_none {padding:0; margin:5px 0 0 17px; background:none; color:#757575; font-size:14px; font-weight:400;}

span.dash {color: #777; margin: 0 1em;}

#titWrap h3 {font-family: 'KIMM_Bold', sans-serif; }


/* radio */
#content [type="radio"] {position: relative; -webkit-appearance: none; appearance: none; width: 1.15em; height: 1.15em; display: inline-block;}
#content [type="radio"]:after  {content: ''; position: absolute; top: 50%; left: 0; transform: translate(0%, -50%); width: 1.25em;height: 1.25em; border: 4px solid #DDDDDD; border-radius: 50%; display: block; cursor: pointer;}
#content [type="radio"]:checked:after {content: ''; width: 1.25em; height: 1.25em; border: 4px solid #23336F; display: block;}


/* check box */
#content [type="checkbox"] {position: relative; -webkit-appearance: none; appearance: none; width: 1.15em; height: 1.15em; display: inline-block;}
#content [type="checkbox"]:after  {content: ''; position: absolute; top: 50%; left: 0; transform: translate(0%, -50%); width: 20px;height: 20px; background: url(/common/img/common/spr_checkbox.svg) 100% center no-repeat; background-size: cover; display: block; cursor: pointer;}
#content [type="checkbox"]:checked:after {content: ''; width: 20px; height: 20px; background: url(/common/img/common/spr_checkbox.svg) 0% center no-repeat; background-size: cover; display: block;}

input[type=radio], input[type=checkbox] {vertical-align: middle; margin-right: 6px; }


/* 만족도 조사 커스텀 */
.radio_list >li label {line-height: 1.85;}
.opinion_wrap input[type=text] {height: 3em; border: 1px solid #DDE3ED; border-radius: 4px; padding: 0.5em;}
.opinion_wrap input[type=submit] {width: 5em; height: 3em; background: #23336F; color: #fff; border-radius: 4px;}

.word-break-box td {word-break: keep-all;}


/* -------------------- content -------------------- */
/* 열린경영 - 윤리인권경영 */
.morality-box {width: 100%; height: auto; background: #F7FAFD; border-radius: 20px; padding: 4em;}
.morality-box .inner {position: relative; padding: 4em 1em; background: #fff; border-radius: 20px; padding: 5em; box-shadow: 0px 0px 20px 0px rgba(64, 129, 255, 0.10);}
.morality-box .inner p {text-align: center;}
.morality-box .inner p.title {font-size: 2em; font-weight: 700; color: #23336F !important; margin-bottom: 1em;}
.morality-box .inner p.sign {font-size: 1.125em; font-weight: 700; margin-top: 1em;}
.morality-box .inner ul {padding: 0 3em;}
.morality-box .inner ul li {margin: 1.7em 0; line-height: 180%;}
.morality-box .inner ul li span {position: relative; font-weight: 700; color: #23336F !important;}
.morality-box .inner ul li span:before {content: ''; display: block; position: absolute; width: 10px; height: 10px; top: -4px; left: -14px; border-radius: 2em; background: linear-gradient(135deg, #E8F4FE 0%, #F1FAFB 100%, #F1FAFB 100%); z-index: 0;}
.morality-box .inner:before {content: ''; position: absolute; top: 40px; left: 5%; width: 90%; height: 4em; background: url(/portal/img/content/obj-morality.svg) 0 0 no-repeat; background-size: 100%;}
.morality-box .inner:after {content: ''; position: absolute; bottom: 40px; left: 5%; width: 90%; height: 4em; background: url(/portal/img/content/obj-morality.svg) 0 0 no-repeat; background-size: 100%; transform: rotate(180deg);}

@media all and (min-width:1025px) {
	.morality-box .inner ul li {word-break: keep-all;}
}
@media all and (max-width:768px) {
	.morality-box .inner {padding: 5em 3em;}
}
@media all and (max-width:425px) {
	.morality-box {padding: 12px;}
	.morality-box .inner {padding: 5em 2em;}
	.morality-box .inner ul {padding: 0;}
	.morality-box .inner p.title {font-size: 1.35em; word-break: break-word;}
	.morality-box .inner p.normal br {display: none;}
}


/* 열린경영 - 안전보건경영 */
.morality-box.health .inner:before {background: url(/portal/img/content/obj-morality2.svg) 0 0 no-repeat; background-size: 100%;}
.morality-box.health .inner:after {background: url(/portal/img/content/obj-morality2.svg) 0 0 no-repeat; background-size: 100%;}
.morality-box.health .inner ul li span {color: #4081FF !important;}
.morality-box.health .inner ul li span:before {display: none;}
.morality-box.health .inner ul.small {padding: 0 10em;}
@media all and (max-width:1024px) {
	.morality-box.health .inner ul.small {padding: 0 2em;}
}
@media all and (max-width:768px) {
	.morality-box.health .inner ul.small {padding: 0 0em;}
}


/* 공단소개 - 이사장인사말 */
.greeting-box {position: relative; padding-bottom: 8em;}
.greeting-box .img img {position: relative; border-radius: 20px 20px 0px 20px; overflow: hidden; z-index: 2;}
.greeting-box .txt {font-size: 1.05em; line-height: 160%; color: #333;}
.greeting-box .txt * {font-size: 1em;}
.greeting-box .txt p {font-family: 'KIMM_Bold', sans-serif;}
.greeting-box .txt p.sub-tit {color: #23336F; font-size: 1.200em; margin-bottom: 0.5em;}
.greeting-box .txt p.tit {font-size: 1.800em; margin-bottom: 0.8em;}
.greeting-box .txt > span {display: block; margin: 1em 0;}
.greeting-box .txt .sign {position: absolute; display: inline; right: 0; bottom: 2em;}
.greeting-box .txt .sign * {vertical-align: middle;}
.greeting-box .txt .sign .name {font-size: 1.400em; font-weight: 700; margin-left: 0.25em;}

@media all and (min-width:1025px) {
	.greeting-box .img {position: absolute; top: 0; left: 0; width: 455px;}
	.greeting-box .img::after {content: ''; position: absolute; width: 455px; height: 580px; top: 2em; left: 2em; border-radius: 20px 20px 0px 20px; background: linear-gradient(135deg, #E8F4FE 0%, #F1FAFB 100%, #F1FAFB 100%); opacity: 0.75;}
	.greeting-box .txt {margin-top:3em; margin-left: 560px; word-break: keep-all;}
	.greeting-box .txt p.tit {padding-top: 1em;}
}
@media all and (max-width:425px) {
	.greeting-box .txt {margin-top:2em;}
	.greeting-box .img {width: 100%;}
	.greeting-box .img img {width: 100%;}
}


/* 공단소개 - 주요현황 - CI 소개 */
.simbol-box .img-box {background-image: url(/portal/img/content/05/bak_ci.png); background-position: -2px -2px; border: 1px solid #DDE3ED; border-radius: 6px; padding: 1.5em 0; text-align: center;}
.simbol-box .color-list {overflow: hidden;}
.simbol-box .color-list li {float: left; width: 31.3%; margin: 0 1%;}
.simbol-box .color-list li .color {height: 2em;}
.simbol-box .color-list li:nth-child(1) .color {background: #009240;}
.simbol-box .color-list li:nth-child(2) .color {background: #84C326;}
.simbol-box .color-list li:nth-child(3) .color {background: #212A7A;}
.simbol-box .color-list li .title {margin-top: 0.75em; font-size: 1.25em; font-weight: bold;}
.simbol-box .color-list li .sub {font-size: 0.9em;}
.simbol-box .simbol-list {overflow: hidden;}
.simbol-box .simbol-list li {float: left; width: 48%; margin: 0 1%; text-align: center;}
.simbol-box .simbol-list li img {height: 10em;}
.simbol-box .simbol-list li p {margin-top: 0.5em;}


/* 공단소개 - 주요현황 - 비전 및 미션 */
.img-bg-box.mission {position: relative; width: 100%; height: 20em; background: url(/portal/img/content/05/img_0502030000.png) no-repeat; background-size: cover; border-radius: 1.250em; margin-top: 3em;}
.img-bg-box.mission .tit {position: absolute; top: 50%; left: 2.5em; transform: translate(0, -50%); font-family: 'KIMM_Bold', sans-serif; color: #fff; font-size: 2.25em; line-height: 140%; }
@media all and (max-width:767px) {
	.img-bg-box.mission {height: 12em;}
	.img-bg-box.mission .tit {left: 1.5em; font-size: 2em;}
}
@media all and (max-width:425px) {
	.img-bg-box.mission .tit {left: 1em; font-size: 1.6em;}
}

.management-policy-box {position: relative;}
.management-policy-box ul {overflow: hidden;}
.management-policy-box > div > ul > li {float: left; box-sizing: border-box; border-radius: 12px;}

@media all and (min-width:1025px) {
	.management-policy-box > div > ul > li {width: 23.5%;}
	.management-policy-box > div > ul > li:not(:first-child) {margin-left: 2%;}
}
@media all and (max-width:1024px) {
	.management-policy-box > div > ul > li {width: 48%; margin: 0 1%; margin-bottom: 1.5em;}
}
@media all and (max-width:425px) {
	.management-policy-box > div > ul > li {width: 100%;}
}

.management-policy-box .vision {text-align: center; padding: 3em; background: url(/portal/img/content/05/bg_0502030000.svg) 0 0 no-repeat; color: #fff; border-radius: 12px;}
.management-policy-box .vision span {font-size: 1.500em; word-break: keep-all;}
.management-policy-box .vision strong {font-size: 1em;}
.management-policy-box .value ul li {position: relative; color: #fff;}
@media all and (min-width:1025px) {
	.management-policy-box .value ul li {height: 15.5em;}
}
@media all and (max-width:1024px) {
	.management-policy-box .value ul li {height: 8em;}
}

.management-policy-box .value ul li img {position: absolute; top: 0em; right: 0em;}
.management-policy-box .value ul li .txt {position: absolute; left: 1.5em; bottom: 1.5em;}
.management-policy-box .value ul li .eng {font-family: 'KIMM_Bold', sans-serif; font-size: 1.250em; line-height: 140%; margin-bottom: 0.5em;}
.management-policy-box .value ul li:nth-child(1) {background: #34A3F2 url(/portal/img/content/05/bg_0502030000_02.svg) 100% 100% no-repeat;}
.management-policy-box .value ul li:nth-child(2) {background: #0069B0 url(/portal/img/content/05/bg_0502030000_02.svg) 100% 100% no-repeat;}
.management-policy-box .value ul li:nth-child(3) {background: #0096B7 url(/portal/img/content/05/bg_0502030000_02.svg) 100% 100% no-repeat;}
.management-policy-box .value ul li:nth-child(4) {background: #1FBEA2 url(/portal/img/content/05/bg_0502030000_02.svg) 100% 100% no-repeat;}

.management-policy-box ul li .line-box {font-size: 1.250em; font-weight: 700; text-align: center; line-height: 140%; padding: 1.500em 0; border-radius: 12px;}
.management-policy-box ul li .line-box img {display: block; margin: 1.500em auto !important;}
.management-policy-box ul li:nth-child(1) .line-box {border: 2px solid #34A3F2; color: #34A3F2;}
.management-policy-box ul li:nth-child(2) .line-box {border: 2px solid #0069B0; color: #0069B0;}
.management-policy-box ul li:nth-child(3) .line-box {border: 2px solid #0096B7; color: #0096B7;}
.management-policy-box ul li:nth-child(4) .line-box {border: 2px solid #1FBEA2; color: #1FBEA2;}

.management-policy-box .mission ul li ul {padding: 2em 0.5em; border-radius: 6px; border: 1px solid #DDE3ED; margin: 0.625em 0; }
.management-policy-box .mission ul li .cnt {padding: 1em 0; border-radius: 6px; border: 1px solid #DDE3ED; background: #F7FAFD; text-align: center;}

.management-policy-box .goal ul li ul.years li {position: relative; padding: 1em 0; border-radius: 6px; border: 1px solid #DDE3ED; background: #F7FAFD; text-align: center; margin-top: 0.5em;}
.management-policy-box .goal ul li:first-child ul.years li:nth-child(1)::before {content: '2023'; position: absolute; left: 10px; top: 50%; transform: translate(0, -50%); padding: 0.625em 0; color: #23336F; border-radius: 2em; font-weight: 700;}
.management-policy-box .goal ul li:first-child ul.years li:nth-child(2)::before {content: '2024'; position: absolute; left: 10px; top: 50%; transform: translate(0, -50%); padding: 0.625em 0; color: #23336F; border-radius: 2em; font-weight: 700;}
.management-policy-box .goal ul li:first-child ul.years li:nth-child(3)::before {content: '2025'; position: absolute; left: 10px; top: 50%; transform: translate(0, -50%); padding: 0.625em 0; color: #23336F; border-radius: 2em; font-weight: 700;}


/* 공단소개 - 주요현황 - 역대 ceo */
.ceo-box > ul {overflow: hidden;}
.ceo-box > ul > li {position: relative; float: left; width: 49%; margin-bottom: 1.5em; padding: 2.813em 3.125em; border-radius: 6px; border: 3px solid #EDF3FF; box-sizing: border-box; vertical-align: middle;}
.ceo-box > ul > li:nth-child(even) {margin-left: 2%;}
.ceo-box > ul > li > * {float: left;}
.ceo-box > ul > li > .badge {position: absolute; top: 0; right: 0; background: #23336F; color: #fff; font-size: 1.000em; font-size: 0.875em; font-family: 'KIMM_Bold', sans-serif; border-radius: 0 6px 0 6px; padding: 0.75em 0; width: 10.714em; text-align: center;}
.ceo-box > ul > li > img {width: 7.500em; border-radius: 0.75em;}
.ceo-box > ul > li > div {margin-left: 2em;}
.ceo-box > ul > li > div .name {font-size: 1.500em; font-weight: 700; color: #222; margin: 0.5em 0 0.75em 0;}
.ceo-box > ul > li > div ul {margin-top: 0.5em;}
.ceo-box > ul > li > div ul li {line-height: 140%; color: #777;}

@media all and (min-width:1023px) {
	.ceo-box > ul > li {height: 13.750em;}
	
}
@media all and (max-width:1024px) {
	.ceo-box > ul > li {width: 100%; margin-left: 0 !important;}
	
}
@media all and (max-width:540px) {
	.ceo-box > ul > li {text-align: center; padding: 2.813em 3.125em 1.5em 3.125em}
	.ceo-box > ul > li > * {float: none;}
	.ceo-box > ul > li > div {margin-left: 0;}
}

/* 공단소개 - 주요현황 - 조직도 */
.organization-box {position: relative; overflow: hidden; padding: 1em;}
.organization-box ul {text-align: center;}
.organization-box .chairman {position: relative; font-family: 'KIMM_Bold', sans-serif; font-size: 1.333em; width: 170px; height: 170px; padding: 75px 0; margin: 0 auto; background: #4081FF; color: #fff; border-radius: 200px; box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.10);}
.organization-box .chairman:before {content: ''; display: block; position: absolute; width: 200px; height: 200px; top: -15px; left: -15px; border-radius: 200px; border: 1px solid #4081FF;}
.organization-box .chairman:after {content: ''; display: block; position: absolute; width: 1px; height: 128px; top: 170px; left: 50%; background: #DDE3ED; z-index: -5;}

.organization-box .dep02 {position: relative; /* width: 33.3333%; */ float: left; padding: 0 1.5em;}
.organization-box .dep02.no-dept {width:20%; padding-top:80px;}
.organization-box .dep02.no-dept:before {content:''; position:absolute; width:1px; height:100%; top:-50px; left:50%; background: #DDE3ED; z-index: -5;}
.organization-box .dep02:nth-child(2) {width:50%;}
.organization-box .dep02:nth-child(3) {width:30%;}
.organization-box .dep02 p {width: 100%; padding: 24px; height:80px; margin-bottom: 0.5em; justify-content: center; background: #23336F; font-weight: 700; border-radius: 6px; box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.10);}
.organization-box .dep02 p a {color: #fff !important;}
.organization-box .dep02 p.blank{background:none; box-shadow:none;}

.organization-box .dep02Top		  {position:relative;}
.organization-box .dep02Top:after {content: ''; display: block; position: absolute; width: 50%; height: 1px; top: 24%; left: 25%; background: #DDE3ED; z-index: -5;}

.organization-box .dep02.side p {width: 240px; margin-bottom: 100px;background:#fff; border:1px solid #23336F;}
.organization-box .dep02.side p:before {content: ''; display: block; position: absolute; top: 21%; left: 262px; width: 6px; height: 6px; background: #23336F; border: 2px solid #fff; border-radius: 6px; box-sizing: content-box; z-index: 5;}

.organization-box .dep02.dep02-1 {float:left;width:auto;}
.organization-box .dep02.dep02-2 {float:right;width:auto;}
.organization-box .dep02.dep02-2 p:before {left:auto;right:262px;}

.organization-box .line {position: relative; }
.organization-box .line:after {content:''; clear:both; display:block;}
.organization-box .line:before {content: ''; display: block; position: absolute; width: 75%; height: 1px; top: -50px; left: 10%; background: #DDE3ED; z-index: -5;}

.organization-box .line .dep02 p {position: relative;}
.organization-box .line .dep02 p:before {content: ''; display: block; position: absolute; top: -4px; left: 50%; margin-left:-3px; width: 6px; height: 6px; background: #23336F; border: 2px solid #fff; border-radius: 6px; box-sizing: content-box; z-index: 5;}
.organization-box .line .dep02 p:after {content: ''; display: block; position: absolute; width: 1px; height: 50px; top: -50px; left: 50%; background: #DDE3ED; z-index: -5;}

.organization-box .dep02 ul:after {content:''; clear:both; display:block;}
.organization-box .dep02 ul li {width: calc(100% / 2 - 8px); margin: 4px; float: left; padding: 1.25em .75em; border-radius: 6px; border: 1px solid #DDE3ED; background: #F7FAFD; font-weight: 700;}
.organization-box .dep02 ul li a {color: #222;}
.organization-box .line .dep02.no-dept ul {margin-top:0.5em;}
.organization-box .line .dep02.no-dept ul li {width:100%; margin:4px 0;}
.organization-box .line .dep02:nth-child(2) ul li {width: calc(100% / 3 - 8px);}


@media all and (max-width:1024px) {
	.organization-box .dep02.side p:before {left:250px;}
	.organization-box .dep02.dep02-2 p:before {left:auto; right:250px;}
	.organization-box .dep02 {padding-left:1em; padding-right:1em;}
	.organization-box .line .dep02 ul li {width: calc(100% - 8px); float: none;}
	.organization-box .line .dep02:nth-child(2) ul li {width: calc(100% / 2 - 8px); float:left;}
}
@media all and (max-width:768px) {
	.organization-box .chairman:after {height:109px;}
	
	.organization-box .dep02 p{height:auto;}
	
	.organization-box .dep02Top:after {top:35%;}
	.organization-box .dep02.side p {width:200px; margin-bottom:2em;}
	.organization-box .dep02.side p:before {top:30%; left:210px;}
	.organization-box .dep02.dep02-2 p:before {left:auto; right:210px;}
	.organization-box .line {padding:1em .5em; border:1px solid #dde3ed;}
	
	.organization-box .line:before,
	.organization-box .line .dep02 p:before {content:none;}
	.organization-box .line .dep02.no-dept {width:100%; padding-top:0; float:none;}
	.organization-box .line .dep02.no-dept:before {content:none;}
	.organization-box .line .dep02:nth-child(2) {width:65%;}
	.organization-box .line .dep02:nth-child(3) {width:35%;}
	
	.organization-box .line .dep02:nth-child(2) ul li {width: calc(100% / 2 - 8px); }
	
}
@media all and (max-width:640px) {
	.organization-box .chairman {width:150px; height:150px; padding:65px 0; margin:0 auto 1.5em;}
	.organization-box .chairman:before {width:180px; height:180px;}
	.organization-box .chairman:after {content:none;}
	.organization-box .dep02 {padding:0;}
	.organization-box .dep02 + .dep02 {margin-top:.5em;}
	.organization-box .dep02.side {float:none; width:100%;}
	.organization-box .dep02.side p {width:100%; margin-bottom:0;}
	.organization-box .dep02.side p:before {content:none;}
	.organization-box .line {margin-top:1em; border:0; padding:0;}
	.organization-box .line .dep02 p:after {content:none;}
	
	.organization-box .line .dep02.no-dept,
	.organization-box .line .dep02:nth-child(2),
	.organization-box .line .dep02:nth-child(3) {width:100%; float:none;}
	.organization-box .line .dep02:nth-child(3) ul li {width: calc(100% / 2 - 8px); float:left; }
	
}


/* 공단소개 - 대외협력 - 업무협약 */
.agreement-box .box-design {margin-bottom: 1em;}
.agreement-box .box-design div.cell {padding: 1.5em 3em !important;}
.agreement-box .box-design div.cell:first-child {width: 75%;}
.agreement-box .box-design div.cell:nth-child(2) {width: 25%;}
.agreement-box .box-design div.cell:nth-child(2) * {display: block; text-align: center;}
.agreement-box .box-design div.cell:nth-child(2) img {margin-bottom: 1em !important;}
.agreement-box .box-design .cell .list-u li {word-break: keep-all !important;}
@media all and (max-width:1024px) {
	.agreement-box .box-design div.cell {padding: 1.5em 2em !important; float: left;}
}
@media all and (max-width:640px) {
	.agreement-box .box-design {overflow: hidden;}
	.agreement-box .box-design .cell .list-u {text-align: left;}
}



/* 공단소개 - 대외협력 - 대외인증 */
.certification-box {position: relative;}
.certification-box ul {overflow: hidden;}
.certification-box ul li {float: left; width: 32%; margin-right: 2%; margin-bottom: 1.5em; padding: 2.4em 2em; border-radius: 6px; border: 3px solid #EDF3FF; box-sizing: border-box; vertical-align: middle; text-align: center;}
.certification-box ul li:nth-child(3n) {margin-right: 0;}
.certification-box ul li img {border: 1px solid #DDE3ED; width: 8em;}
.certification-box ul li p.tit {font-size: 1.15em; font-weight: 700; margin-top: 1em;}
.certification-box ul li p.date {font-size: 0.9em; color: #555 !important; margin: 0.5em 0;}
.certification-box ul li p.supervise span {font-size: 0.85em; padding: 2px 8px; border: 1px solid #4081FF; color: #4081FF; border-radius: 32px; margin-right: 5px;}

@media all and (max-width:1024px) {
	.certification-box ul li {width: 49%; margin-right: 2%;}
	.certification-box ul li:nth-child(3n) {margin-right: 2%;}
	.certification-box ul li:nth-child(2n) {margin-right: 0;}
}
@media all and (max-width:425px) {
	.certification-box ul li {width: 100%; margin-right: 0%;}
}


/* 공단소개 - 열린마음봉사대 - 소개 */
.img-bg-box.volunteer {position: relative; width: 100%; height: 20em; background: url(/portal/img/content/05/img_0504070000.png) no-repeat; background-size: cover; border-radius: 1.250em; margin-top: 3em;}
.img-bg-box.volunteer .txt {position: absolute; top: 50%; left: 6.250em; transform: translate(0, -50%);}
.img-bg-box.volunteer .txt > * {display:block;}
.img-bg-box.volunteer .tit {font-family: 'KIMM_Bold', sans-serif; color: #fff; font-size: 2.25em; line-height: 140%; }
.img-bg-box.volunteer .sub {color: #fff !important; line-height: 140%; margin-top: 0.5em;}
@media all and (max-width:767px) {
	.img-bg-box.volunteer {height: 12em;}
	.img-bg-box.volunteer .tit {left: 1.5em; font-size: 2em;}
}
@media all and (max-width:425px) {
	.img-bg-box.volunteer .tit {left: 1em; font-size: 1.6em;}
}


/* 공단소개 - 오시는길 */
#conts .kakao-map *[target="_blank"]:after {display: none !important;}/* 카카오맵 내부 a태그 */

.map-box {position: relative;}
.map-box .box {border: 1px solid #DDE3ED; overflow: hidden;}
.map-box > div:not(.kakao-map) {border-top: 1px solid #DDE3ED;}

.map-box .map-address {position: relative; padding: 2em 2.375em;}
.map-box .map-address .name {font-family: 'KIMM_Bold', sans-serif; color: #222;}
.map-box .map-address .address {color: #777 !important;}

.map-box .map-info ul {width: 100%; overflow: hidden; border-top: 1px solid #DDE3ED; overflow: hidden;}
.map-box .map-info ul li {overflow: hidden; width: 100%; padding: 2em 2em 2em 4em;}
.map-box .map-info ul li:not(:first-child) {border-top: 1px solid #DDE3ED;}
.map-box .map-info ul li div {float: left; vertical-align: middle;}
.map-box .map-info ul li div.label {position: relative; width: 12.500em; font-weight: 700; color: #222;}
.map-box .map-info ul li div.txt {width: 70%; color: #333;}
.map-box .map-info ul li div.txt a {color: #333;}
.map-box .map-info ul li div.txt a[target="_blank"]:after {display: none !important;}

.map-box .map-info ul li .label::before {content: ''; position: absolute; left: -2em; top: -1px; display: block; width: 1.250em; height: 1.250em; background: url(/common/img/common/spr_map_ico.svg) 0 0 no-repeat;}
.map-box .map-info ul li.tel .label::before {background-position: 0 0;}
.map-box .map-info ul li.bus-stop .label::before {background-position: -20px 0;}
.map-box .map-info ul li.bus .label::before {background-position: -40px 0;}
.map-box .map-info ul li.memo .label::before {background-position: -60px 0;}

.map-box .map-info ul li.bus-stop span.num {display: inline-block; font-size: 0.875em; width: 1.714em; height: 1.714em; border: 1px solid #4081FF; border-radius: 50%; color: #4081FF; text-align: center; line-height: 1.6; margin-right: 0.5em;}
.map-box .map-info ul li.bus span.badge {display: inline-block; font-size: 0.875em; font-weight: 700; border-radius: 5px; background: #35AFBF; color: #fff; padding: 0.25em 0.7em; margin-right: 0.5em;}
@media all and (min-width:1025px) {
	.map-box .map-address a {position: absolute; top: 2em; right: 2.375em;}
}
@media all and (max-width:1025px){
	.map-box .map-info ul li div.label {margin-bottom: 0.5em;}
}


/* 통합신고센터 */
.qr-btn-list {overflow: hidden; margin: 2em 0;}
.qr-btn-list li {position: relative; width: 49.5%; margin-left: 1%; float: left; border-radius: 6px;}
.qr-btn-list li:first-child {margin: 0;}
.qr-btn-list li a {display:block;}
.qr-btn-list li a[target="_blank"]:not([class]) {position:revert !important;margin-right:0 !important;}
.qr-btn-list li a::after{display:none !important;}
.qr-btn-list li a .txt {position: absolute; top: 50%; left: 3em; transform: translate(0, -50%); width: 70%;}
.qr-btn-list li a .txt .tit {font-family: 'KIMM_Bold', sans-serif; font-size: 1.5em; line-height: 1.3;}
.qr-btn-list li a .txt .sub {font-size: 1.15em;}
.qr-btn-list li a img {float: right;}

@media all and (max-width:800px) {
	.qr-btn-list li {width: 100%; margin: 0;}
	.qr-btn-list li a .txt .sub {font-size: 1em;}
	.qr-btn-list li a .txt .tit {font-size: 1.15em;}
}


/* 시설소개 사진 슬라이드 */
.facility-info-conts .mycode {display:block; position:relative; width:100%; margin:0 auto; border-radius: 0px 4.25em 0px 2em; overflow: hidden;}
.facility-info-conts .mycode .control {display:block; position:absolute; right:0; left:0; bottom: 0; padding: 2em 2em 0 2em; height: 7rem; z-index:5; text-align:center; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.40) 100%);}
.facility-info-conts .mycode .control > * {display:inline-block; position:relative; vertical-align:middle; bottom:auto; left:auto; right:auto; top:auto; height:4rem; line-height:3.7rem; font-family:'atomy', sans-serif;}
.facility-info-conts .mycode .control .pager {width:auto; margin: 0 1em;}
.facility-info-conts .mycode .control .pager > * {display:inline-block; position:relative; vertical-align:middle; margin:2px; background: rgba(255, 255, 255, 1); text-indent: -500px;}
.facility-info-conts .mycode .control button {overflow:hidden;}
.facility-info-conts .mycode .control button.prev {width:2em; height: 2em; text-indent: -500px; background: url(/portal/img/main/spr_main_arrow.svg) 0 center no-repeat !important; rotate: 180deg; opacity: 0.8;}
.facility-info-conts .mycode .control button.next {width:2em; height: 2em; text-indent: -500px; background: url(/portal/img/main/spr_main_arrow.svg) 0 center no-repeat !important; opacity: 0.8;}
.facility-info-conts .mycode .control button.play {display:none;}
.facility-info-conts .mycode .control button.prev:hover, 
.facility-info-conts .mycode .control button.next:hover {opacity: 1;}
.facility-info-conts .mycode .slider {display:block; position:relative; height:100%;}
.facility-info-conts .mycode .slider .swiper-container {}
.facility-info-conts .mycode .slider .swiper-container,
.facility-info-conts .mycode .slider .swiper-wrapper,
.facility-info-conts .mycode .slider .swiper-slide {height:100%; background: gray;}
.facility-info-conts .mycode .slider .swiper-slide {}
.facility-info-conts .mycode .slider .swiper-slide > * {display:block;}
.facility-info-conts .mycode .slider .swiper-slide a {text-align:center; line-height:34rem;}
.facility-info-conts h4 {margin-bottom: 0.25em !important;}

@media all and (min-width:1025px) {
	.facility-info-conts .box-notice strong {display: inline-block; width: 12.5em;}
}
@media all and (max-width:1024px) {
	.facility-info-conts .box-notice strong {display: block;}
}

/* 디자인박스 내 ul 정렬 */
.facility-info-conts .box-notice li .list-u {display: inline-block; vertical-align: top;}


/* 열린경영 - 시민서포터즈 - 고객모니터 */
.img-bg-box.monitor {position: relative; width: 100%; height: 20em; background: url(/portal/img/content/03/img_0306020000_01.png) center 20% no-repeat; background-size: cover; border-radius: 1.250em; margin-top: 3em;}
.img-bg-box.monitor .txt {position: absolute; top: 50%; left: 6.250em; transform: translate(0, -50%);}
.img-bg-box.monitor .txt > * {display:block;}
.img-bg-box.monitor .tit {font-family: 'KIMM_Bold', sans-serif; color: #fff; font-size: 2.25em; line-height: 140%; }
.img-bg-box.monitor .sub {color: #fff !important; line-height: 140%; margin-top: 0.5em;}
@media all and (max-width:767px) {
	.img-bg-box.monitor {height: 20em;}
	.img-bg-box.monitor .tit {left: 1.5em; font-size: 2em;}
}
@media all and (max-width:425px) {
	.img-bg-box.monitor {height: 20em;}
	.img-bg-box.monitor .txt {left: 0; padding: 0 1.5em; word-break: keep-all;}
	.img-bg-box.monitor .tit {font-size: 1.6em;}
	.img-bg-box.monitor .sub br {display: none;}
}

/* 열린경영 - 시민서포터즈 - 시민운영위원회 */
.img-bg-box.citizen {position: relative; width: 100%; height: 20em; background: url(/portal/img/content/03/img_0306030000_01.png) center 20% no-repeat; background-size: cover; border-radius: 1.250em; margin-top: 3em;}
.img-bg-box.citizen .txt {position: absolute; top: 50%; left: 6.250em; transform: translate(0, -50%);}
.img-bg-box.citizen .txt > * {display:block;}
.img-bg-box.citizen .tit {font-family: 'KIMM_Bold', sans-serif; color: #fff; font-size: 2.25em; line-height: 140%; }
.img-bg-box.citizen .sub {color: #fff !important; line-height: 140%; margin-top: 0.5em;}
@media all and (max-width:767px) {
	.img-bg-box.citizen {height: 12em;}
	.img-bg-box.citizen .tit {left: 1.5em; font-size: 2em;}
}
@media all and (max-width:425px) {
	.img-bg-box.citizen .tit {left: 1em; font-size: 1.6em;}
}


/* 상세 */
.budget-detail .btnWrap {float: right;}


/* 협약서 */
.box-design.agreement img {border: 1px solid #DDE3ED; border-radius: 6px;}


/* 개인정보처리방침 */
.privacy-box h4#list-num-01 {background: url(/common/img/privacy/ico_privacy_13_1.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}
.privacy-box h4#list-num-02 {background: url(/common/img/privacy/ico_privacy_21_1.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}
.privacy-box h4#list-num-03 {background: url(/common/img/privacy/ico_privacy_19_1.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}
.privacy-box h4#list-num-04 {background: url(/common/img/privacy/ico_privacy_20_1.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}
.privacy-box h4#list-num-05 {background: url(/common/img/privacy/ico_privacy_24.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}
.privacy-box h4#list-num-06 {background: url(/common/img/privacy/ico_privacy_35.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}
.privacy-box h4#list-num-07 {background: url(/common/img/privacy/ico_privacy_23.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}
.privacy-box h4#list-num-08 {background: url(/common/img/privacy/ico_privacy_25.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}
.privacy-box h4#list-num-09 {background: url(/common/img/privacy/ico_privacy_30.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}
.privacy-box h4#list-num-10 {background: url(/common/img/privacy/ico_privacy_34.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}
.privacy-box h4#list-num-11 {background: url(/common/img/privacy/ico_privacy_33.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}
.privacy-box h4#list-num-12 {background: url(/common/img/privacy/ico_privacy_19_1.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}
.privacy-box h4#list-num-13 {background: url(/common/img/privacy/ico_privacy_36.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}
.privacy-box h4#list-num-14 {background: url(/common/img/privacy/ico_privacy_26.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}
.privacy-box h4#list-num-15 {background: url(/common/img/privacy/ico_privacy_02_1.png); background-position: 0 0.1em; background-repeat: no-repeat; background-size: 1.15em; padding-left: 1.35em;}

.list-privacy {overflow: hidden; margin: 2em 0;}
.list-privacy li {background: #F7FAFD; border: 1px solid #DDE3ED; border-radius: 6px; padding: 1em;}
.list-privacy li a {color:#222; letter-spacing:-.02em;}
.list-privacy li a img {vertical-align: middle; margin: 0 0.5em 0 0 !important; width: 1.85em;}

.personal-info-box a {width: 20em;}

@media all and (min-width: 769px) {
	.list-privacy li {width: 49%; float: left; height: 4em; margin: 0 1% 1% 0; padding: 1em 1.5em;}
	.list-privacy li:nth-child(2n) {margin-right: 0;}
}
@media all and (max-width: 768px) {
	.list-privacy li {margin-bottom: 0.5em;}
}


/* program */
/* 주민참여예산제 */

.budget-Wrap select {-webkit-appearance:none; /* for chrome */-moz-appearance:none; /*for firefox*/appearance:none;}
.budget-Wrap select::-ms-expand{display:none;/*for IE10,11*/}

.budget-Wrap .right select {background: url('/common/img/common/ico_select_arrow.svg') no-repeat right 0.5em top 0.7em; padding-right: 2em; }

.budget-Wrap {position: relative; overflow: hidden;}
.budget-Wrap > div {float:left; width: 49%; }
.budget-Wrap .left {height: 20em; margin-right: 2%; background: url(/portal/img/content/back_budget01.png) 100% 0 no-repeat; background-size: cover; border-radius: 20px; padding: 2em;}
.budget-Wrap .left h3 {font-family: 'KIMM_Bold', sans-serif; font-size: 2.500em; color: #23336F; line-height: 1.2;}
.budget-Wrap .left select {font-family: 'KIMM_Bold', sans-serif; font-size: 1.25em; width: 180px; height: 60px; background: #23336F url('/common/img/common/ico_select_arrow.svg') no-repeat right 0.5em top 0.1em; color: #fff; border: none; border-radius: 6px 20px 6px 20px; margin-top: 1em;}
.budget-Wrap .right {position: relative; overflow: hidden;}
.budget-Wrap .right .count ul {overflow: hidden;}
.budget-Wrap .right .count ul li {float: left;  width: 49%; border: 4px solid #EDF3FF; border-radius: 10px; padding: 1.5em 1em;}
.budget-Wrap .right .count ul li:nth-child(1) {margin-right: 2%;}
.budget-Wrap .right .count ul li span {float: left; line-height: 2.75em;}
.budget-Wrap .right .count ul li p {font-family: 'KIMM_Bold', sans-serif; font-size: 1.5em; color: #23336F !important; display: inline-block; float: right;}
.budget-Wrap .right .search {margin: 1em 0 !important;} 
.budget-Wrap .right .txt {border-radius: 6px; border: 1px solid #DDE3ED; background: #F7FAFD; padding: 1.5em;}
.budget-Wrap .right .txt ul li {font-size: 0.9em; line-height: 1.4;}

@media all and (min-width: 640px) {
	.bod_list_budget thead tr th.num {width: 8%;}
	.bod_list_budget thead tr th.year {width: 12%;}
	.bod_list_budget thead tr th.title {width: 60%;}
	.bod_list_budget thead tr th.stat {width: 15%;}
	.bod_list_budget thead tr th.charge {width: 15%;}
}
@media all and (max-width: 640px) {
	.bod_list_budget tbody tr {text-align: left;}
	.bod_list_budget tbody tr td {display: inline-block;}
	.bod_list_budget tbody tr td:nth-child(1) {display: none;}
	.bod_list_budget tbody tr td:nth-child(2) {display: none;}
	.bod_list_budget tbody tr td:nth-child(3) {width: 100%;}
}

@media all and (max-width: 768px) {
	.budget-Wrap > div {float:left; width: 100%; margin-bottom: 2em;} 
	.budget-Wrap .bod_head {text-align: center;}
}
@media all and (min-width:426px) {
	.budget-Wrap .right .search input[type="text"] {width: 17.2em;}
}
@media all and (max-width:425px) {
	.budget-Wrap .left h3 br {display: none;}
}
@media all and (max-width: 375px) {
	.bod_list_budget tbody td {font-size: 1em !important;}
}

@media all and (max-width: 640px) {
	.budget-list-wrap .bod_list tr {display: table-row !important;}
}
.budget-list-wrap .page_num {display: none;}

.budget-badge {display: inline-block; padding: 8px 16px; border-radius: 5em; font-size: 0.85em; font-weight: 700;}
.budget-badge.accept {background: #f2f3f3; color: #23336F;}
.budget-badge.complete {background: #EBF2FF; color: #4081FF;}
.budget-badge.ongoing {background: #FFF3EE; color: #F04E04;}

.flow-list-budget ul li .item {padding: 1.25em 0.25em;}
.flow-list-budget ul li .item > * {display: inline-block !important;}
.flow-list-budget ul li .item .step {font-size: 0.722em; font-weight: 700; padding: 3px 10px; border-radius: 4em; border-radius: 33px; background: var(--bluegray, #F7FAFD); color: #23336F; margin-bottom: 1em;}
.flow-list-budget ul li .item .title {width: 100%; margin-bottom: 0.5em; line-height: 1.2em !important; height: 2.4em; overflow: hidden;}
.flow-list-budget ul li .item .date {width: 100%; font-size: 0.85em; color: #555;}
.flow-list-budget ul li .item .count {width: 100%; color: #F04E04; margin-top: 0.6em;}

.flow-list-budget ul li .item.active {box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);}
.flow-list-budget ul li .item.active .step {background: var(--Linear, linear-gradient(91deg, #2050AD 0%, #23B2B2 99.06%)); color: #fff;}
.flow-list-budget ul li .item.active .title {font-weight: 700;}


/* 고객제안 상세 */
#inputForm .btn_wrap .btn {border: 1px solid #DDE3ED !important;}
#inputForm .btn_wrap .btn.write {color: #fff !important; background: #23336F;}