@charset "utf-8";
/*
	-----------------------------------------------
	* sub.css (포털 서브 공용)
	-----------------------------------------------
*/

/* 행정서비스 */
#conts .declarationWrap {padding: 5rem; border:1px dashed #ddd;}
#conts .declarationWrap .inner{ text-align:center;}
#conts .declarationWrap .inner .title{ font-size: 32px; color: #355fe1; font-weight: 700; margin:20px 0;}
#conts .declarationWrap .inner .box {background:#f2f8ff; padding:5rem; margin:40px 0;}
#conts .declarationWrap .inner .box ul {}
#conts .declarationWrap .inner .box li {position:relative; padding:15px 0 15px 40px; text-align:left; line-height:1.5;}
#conts .declarationWrap .inner .box li:before {content:''; background:url('/portal/img/content/02/bul_declaration.png') no-repeat; width:30px; height:30px; position:absolute; left:0; top: 50%;transform: translateY(-57%);}

#conts .declarationBtn {margin:0 0 50px;}
#conts .declarationBtn ul:after {content:''; clear:both; display:table;}
#conts .declarationBtn li {position:relative; width:31%; float:left; margin:1%;}
#conts .declarationBtn li a {display:block; border:1px dashed #ddd; padding:20px;}
#conts .declarationBtn li a:after {content:''; position:absolute !important; right:20px !important; width:21px !important; height:17px !important; background:url('/portal/img/content/02/ico_declaration_btn.png') no-repeat 0 0 !important;}
#conts .declarationBtn li a:hover {color:#355fe1 !important; border:1px solid #355fe1 !important;}
#conts .declarationBtn li a:hover:after {background-position:-21px 0 !important;}


@media all and (max-width:1024px) {
	#conts .declarationWrap {padding:5rem 3rem;}

}

@media all and (max-width:900px) {
	#conts .declarationBtn li {width:48%;}
}

@media all and (max-width:768px) {
	#conts .declarationWrap .inner {word-break:keep-all;}
	#conts .declarationWrap .inner br { display: none; }
	#conts .declarationWrap .inner .box  {padding:3rem;}
}
@media all and (max-width:480px) {
	#conts .declarationBtn li{width:100%; margin:1% 0;}
}



/* 탭이 있는 콘텐츠 (depth05 아님) */
#conts .contTab {margin:50px 0;}
#conts .contTab ul:after {content:''; clear:both; display:table;}
#conts .contTab li {width:20%; float:left; border:1px solid #3a81dc; border-right-width:0; text-align:center; cursor : pointer;}
#conts .contTab li button {display:block; width:100%; padding:1.5rem 2rem; color:#3a81dc; white-space:nowrap; overflow:hidden; text-overflow:ellipis;}
#conts .contTab li:last-child {border-right-width:1px;}
#conts .contTab li.on {background: #3a81dc; color:#fff;}
#conts .contTab li.on button {color:#fff;}
#conts .contTab li.on button span.select_tab{display: block; position: absolute; z-index: -999999; opacity: 0;}
#conts .contTab li button span.select_tab{display: none;}

@media all and (max-width:1024px) {
	#conts .contTab li {width:33.3333%; border-right-width:1px; border-left-width:0; border-top-width:0;}
	#conts .contTab ul {border-left:1px solid #3a81dc; border-top:1px solid #3a81dc;}

}

@media all and (max-width:640px) {
	#conts .contTab li {width:50%;}
}

@media all and (max-width:460px) {
	#conts .contTab li {width:100%;}
}


/* ================== 재정관련 셀렉트박스 콘텐츠 ==================== */

.select_area_wrap .select_area {width:100%; padding:2rem 1rem; text-align:center; background:#f8f8f8;}
.select_area_wrap .select_area #selectTarget {width:320px; height:4rem;}
.select_area_wrap .select_area input {padding:0 1em; background:#216cda; color:#fff; border-radius:.3rem; height:4rem;}
@media all and (max-width:470px) {
	.select_area_wrap .select_area #selectTarget {width:100%;}
	.select_area_wrap .select_area input {width:100%; margin-top:5px;}
}


/* ================== 프로그램 베이스 버튼 디자인 수정 ==================== */

/* 정보공개-재정정보-투자심사 */
#updateFileList a.btn_preview {border-radius:.3rem; padding:3px 5px;}
#updateFileList a.btn_preview:hover {border:1px solid #216cda; background:#216cda; }
#updateFileList a.btn_preview:hover span {color:#fff; text-decoration:none;}
#conts .bod_maintain form[target="_blank"]:after {content:none;}




/* 인사말 : 일반현황 */
#conts .greeting {background:url('/portal/img/content/05/sub0701_bg01.png') no-repeat right top; z-index:1; }
#conts .greeting .tit { background:url('/portal/img/content/05/greeting_tit_bg.png') no-repeat left top; }
#conts .greeting .tit:after { background:url('/portal/img/content/05/greeting_deco.png') no-repeat; }




/*이용안내 하위 탭 스크*/
.tab-script-box {position:relative;padding-top: 140px;}
.tab-script-box dt{display: block;position: absolute;top: 0;left: 0;padding: 0 0.2%;text-align: center;line-height: 1.5;box-sizing: border-box;}
.tab-script-box dt button{display: block;width: 100%;height: 80px;border: none;font-size: 17px;color: #999;letter-spacing: -0.06em;border-radius: 5px;background: #eee;box-sizing: border-box;font-weight: 600;padding: 10px 20px;cursor: pointer;}

.tab-script-box dl.active dt button{color: #fff;background: #003583;}

.tab-script-box.cnt-5 dt{width:20%;}
.tab-script-box.cnt-5 dl:nth-child(2) dt {left: 20%;}
.tab-script-box.cnt-5 dl:nth-child(3) dt {left: 40%;}
.tab-script-box.cnt-5 dl:nth-child(4) dt {left: 60%;}
.tab-script-box.cnt-5 dl:nth-child(5) dt {left: 80%;}

.tab-script-box.cnt-4 dt{width:25%;}
.tab-script-box.cnt-4 dl:nth-child(2) dt {left: 25%;}
.tab-script-box.cnt-4 dl:nth-child(3) dt {left: 50%;}
.tab-script-box.cnt-4 dl:nth-child(4) dt {left: 75%;}


.tab-script-box.cnt-3 dt{width:33.3%;}
.tab-script-box.cnt-3 dl:nth-child(2) dt {left: 33.3%;}
.tab-script-box.cnt-3 dl:nth-child(3) dt {left: 66.6%;}

.tab-script-box dl dd{display:none;}
.tab-script-box dl.active dd{display:block;}
.tab-script-box dl.active dt button:focus{background:#05ac99;}

@media all and (max-width:768px) {
	.tab-script-box.cnt-5 dt{width:33.3%;}
	.tab-script-box.cnt-5 dl:nth-child(2) dt {left: 33.3%;}
	.tab-script-box.cnt-5 dl:nth-child(3) dt {left: 66.6%;}
	.tab-script-box.cnt-5 dl:nth-child(4) dt {left: 0%; top:90px;}
	.tab-script-box.cnt-5 dl:nth-child(5) dt {left: 33.3%; top:90px;}
	.tab-script-box {position:relative;padding-top: 200px;}
	.tab-script-box dt button{font-size:1.6rem;padding:1rem;}
}


#conts .list-o.info > li{padding:1rem 0 1rem 2.7em}
#conts .list-o.info > li:before, #conts .list-o.info > li > ol > li:before {color:#fff;border-radius:100%;background: #3a81dc !important;padding: 1rem;border-bottom:none;top:0.9rem;line-height: 1.4;height:1.2em;}
@media all and (max-width:768px) {
	#conts .list-o.info > li{padding:0.7rem 0 0.7rem 2.5em}
	#conts .list-o.info > li:before, #conts .list-o.info > li > ol > li:before {padding: 0.7rem;}

}

/* ************************** 과천소식 - 알림마당 - 채용정보 - 일반공고 상태값 css ************************** */
span[data-type="대기"] {display:inline-block; min-width:52px; color:#0095b0;border:1px solid #0095b0;padding: 2px 6px;font-size: 1.4rem;border-radius: 3px;}
span[data-type="채용중"] {display:inline-block; min-width:52px; color:#ff3262;border:1px solid #ff3262;padding: 2px 6px;font-size: 1.4rem;border-radius: 3px;}
span[data-type="마감"] {display:inline-block; min-width:52px; color:#999;border:1px solid #999;padding: 2px 6px;font-size: 1.4rem;border-radius: 3px;}


.label_title_type{border-top:2px solid #0a55a5; text-align: center; padding: 0.6rem 0; background: #EAF1F8FF; color:black;}
.label-wrap{display: flex;padding: 10px;margin: 0;flex-wrap: wrap;text-align: center;background: #e4e8ef;border-radius: 10px;}
.label-wrap > li{list-style-type: none;margin: 1% 5px;width: 13.2857%;background: #fff;border-radius: 10px;}
.label-wrap > li div{padding: 1rem;}
.label-wrap > li div p{text-align: center; line-height: 1.4!important;}
.label-wrap > li div > p img{/* width:100px; */}
.label-wrap > li > div:hover ~ p.desc{display: block; }
.desc{border:1px solid #0d73bd;position:absolute;background: #226bda;color: #fff!important;z-index: 99999;display:none;padding:0.5rem 1rem;border-radius: 10px;text-align: left;}

    
@media (max-width:900px){
    .label-wrap > li{width: 18.5%;}
}
  
   
@media (max-width:550px){
    .label-wrap > li{width: 22.5%;}
}
   
@media (max-width:460px){
    .label-wrap > li{width: 30%;}
	.label-wrap > li div p{font-size: 0.9em!important;}
}


/* 캘린더 디자인 */
.eventSchedule .calendar th {font-weight:500; font-size:17px; height:64px;}
.eventSchedule .calendar th span {font-size:inherit; margin-left:0;}
.eventSchedule .calendar td {position:relative; font-size:15px; padding:2rem 1rem;}
.eventSchedule .calendar td > span {display:block; margin-top:.5rem; margin-right:0;}
.eventSchedule .calendar a {display:block; margin-top:.8rem; margin-right:0; color:#333;}
.eventSchedule .calendar a[target="_blank"]:not([class]):after {display:none !important;}
.eventSchedule .calendar a .day {display:block; position:relative; padding-left:2rem;}
.eventSchedule .calendar a .day:before {content:""; position:absolute; top:0; left:0; margin-top:-.1rem; display:block; width:1.6rem; height:1.6rem; border-radius:50%;}
.eventSchedule .calendar a .day.ty1:before {background:#B7B3D7 url(../img/content/03/bg_pat01.png);}
.eventSchedule .calendar a .day.ty2:before {background:#ABDCD9 url(../img/content/03/bg_pat02.png);}
.eventSchedule .calendar a .day.ty3:before {background:#7FABED url(../img/content/03/bg_pat03.png);}
.eventSchedule .calendar a .day.ty4:before {background:#D4E25B url(../img/content/03/bg_pat04.png);}
.eventSchedule .calendar a .day.ty5:before {background:#FECC4F;}
.eventSchedule .calendar td > span > br {display:none;}
.eventSchedule .calendar .btn {position:absolute; top:0; right:1rem; margin-top:2.25rem; width:2rem; height:2rem; background:url(../img/common/cal_more_btn.svg) no-repeat 50% 50%; background-size:2rem; text-indent:-9999px;}

.eventSchedule .legend {text-align:right; margin-top:2rem;}
.eventSchedule .legend span {display:inline-block;}
.eventSchedule .legend span + span {margin-left:1rem;}
.eventSchedule .legend .day {display:inline-block; width:1.6rem; height:1.6rem; vertical-align:middle; border-radius:50%; margin-right:0.5rem;}
.eventSchedule .legend .day[data-cate="행정·공지"] {background:#B7B3D7 url(../img/content/03/bg_pat01.png);}
.eventSchedule .legend .day[data-cate="생활·교육·경제"] {background:#ABDCD9 url(../img/content/03/bg_pat02.png);}
.eventSchedule .legend .day[data-cate="청년·청소년"] {background:#7FABED url(../img/content/03/bg_pat03.png);}
.eventSchedule .legend .day[data-cate="보건·복지"] {background:#D4E25B url(../img/content/03/bg_pat04.png);}
.eventSchedule .legend .day[data-cate="문화·행사"] {background:#FECC4F;}



/* 모달창 */
.modalPopup.off {display:none;}
.modalPopup {display:block; position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.4); z-index:9999;}
.modalPopup .pop-con {position:fixed; z-index:9999999; top:50%; left:50%; background:#fff; overflow:hidden; box-shadow: 0 10px 25px rgba(28,35,45,.1); width:900px; margin:-350px 0 0 -450px; border-radius:1rem; text-align:left;}
.modalPopup .pop-tit {padding:2.5rem; background:#003583;}
.modalPopup .pop-tit > * {display:inline-block; vertical-align:middle;}
.modalPopup .pop-tit em.badge {padding-left:1em; padding-right:1em;}
.modalPopup .pop-tit h3 {color:#fff; font-weight:700; font-size:1.369em; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modalPopup .pop-desc {padding:2.5rem; max-height:500px; overflow:auto;}
.modalPopup .pop-desc .title 	{font-size:2.4rem !important; font-weight:700; line-height:1.2 !important;}
.modalPopup .pop-desc .list-u > li {padding-left:1.5rem !important;}
.modalPopup .pop-desc .list-u > li > * {display:table-cell;}
.modalPopup .pop-desc .list-u > li strong {width:10rem;}
.modalPopup .pop-desc .list-u > li span {color:#666;}
.modalPopup .pop-desc .list-u li:before {width:.5em; height:.5rem; margin-top:-.35em; background-image:url(../img/common/pop_ul_bul.svg) !important; background-size:0.5rem !important;}
.modalPopup .box-buttons.gray {background:#F9F9F9; padding:1.0526em;}
.modalPopup .pop-control {border-top:1px solid #e3e3e3; padding:1em 1.5em;}
.modalPopup .pop-close {position:absolute; top:1.5rem; right:2.5rem; width:4rem; height:4rem; background:url(../img/common/btn_pop_close.svg) no-repeat 50% 50%; background-size:4rem auto; text-indent:-9999px; overflow:hidden; border-radius:50%;}

@media (max-width:1024px){
	.modalPopup {padding:3em 1em; margin:0 auto; overflow:auto;}
	.modalPopup .pop-con {position:relative; top:auto; left:auto; margin:0 auto; width:100%;}
	.modalPopup .pop-desc {max-height:460px; overflow:auto;}
}
@media (max-width:420px){
	.modalPopup .pop-desc .list-u > li > * {display:block;}
}