@charset "utf-8";
/*
	-----------------------------------------------
	* sub05.css (포털 서브 콘텐츠)
	-----------------------------------------------
*/


@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&display=swap');

.sibling_tit {margin-top:30px;}
.sibling_tit p {font-size: 25px !important; font-weight: 600;}

.song .ppq-audio-player {display:inline-block; position:relative; padding-left:35px; width:230px; text-align:right; vertical-align:middle;}
.song .ppq-audio-player audio {display:none;}
.song .ppq-audio-player .play-pause-btn {display:block; position:absolute; width:30px; height:30px; top:50%; margin-top:-15px; left:0;}
.song .ppq-audio-player .play-pause-btn a {display:block; position:relative; width:100%; height:100%; background:url('/portal/img/content/05/ico_sound_off.png') no-repeat 50% 50%;}
.song .ppq-audio-player.player-playing .play-pause-btn a  {background-image:url('/portal/img/content/05/ico_sound_on.png');}
.song .ppq-audio-player.player-paused .play-pause-btn a {background-image:url('/portal/img/content/05/ico_sound_off.png');}
.song .ppq-audio-player .player-bar {display:block; position:relative; width:193px; height:6px; border-radius:9em; overflow:hidden; background:#d0d9df;}
.song .ppq-audio-player .player-bar .player-bar-played {display:block; position:absolute; top:0; left:0; bottom:0; background:#006ec3;}
.song .ppq-audio-player .player-time-box {position:absolute; top:100%; right:0; left:35px;}
.song .ppq-audio-player .player-time {display:inline-block; vertical-align:middle; font-size:13px; color:#333; opacity:.5; margin-bottom:-.2em;}
.song .ppq-audio-player .player-time + .player-time:before {content:"/ ";}
.song .ppq-audio-player .player-time-box .player-time-duration {display:none;}





/* 탭이 있는 콘텐츠  */
#conts .contTab {margin:50px 0 10px;}
#conts .contTab ul:after {content:''; clear:both; display:table;}
#conts .contTab li {width:20%; float:left; padding:1.5rem 2rem; border:1px solid #2eb79a; border-right-width:0; color:#2eb79a; text-align:center; cursor : pointer;}
#conts .contTab li:last-child {border-right-width:1px;}
#conts .contTab li.on {background: #2eb79a; color:#fff;}
#conts .contWrap {background:#fdfdfd;border:1px solid #eee;border-top: 2px solid #3a81dc;padding:2rem 3rem;overflow-y:scroll;}
#conts .contWrap > div {height:500px;}
#conts .contWrap dl{display:table; table-layout: fixed; width:100%; border-bottom:1px solid #ddd; padding:1.5rem; line-height:1.5; }
#conts .contWrap dl:last-child {border-bottom:none; padding-bottom:30px;}
#conts .contWrap dt{display:table-cell;width:15%;color: #2f5998;}
#conts .contWrap dd{display:table-cell; width:100%; }
#conts .contWrap dd em { display:block; color:#777; font-weight:300;}

@media all and (max-width:1024px) {
	#conts .contWrap dt{width:20%; }
}

@media all and (max-width:640px) {
	#conts .contTab li {width:50%;}
	#conts .contWrap dl {display:block; padding:1.5rem 0;}
	#conts .contWrap dt,
	#conts .contWrap dd { display:block; width:100%; }
	#conts .contWrap dt br {display:none;}
}

@media all and (max-width:320px) {
	#conts .contTab li {width:100%;}
	#conts .contWrap {padding:1.5rem;}
}

/* 조직도 */
dl.organ a, dl.organ span {line-height:50px;}
dl.organ {position:relative; display:table; table-layout:fixed; width:100%; margin-bottom:2rem;}
dl.organ dt {position:relative; display:table-cell; width:190px; text-align:center; vertical-align:top;}
dl.organ dt:after{content:'';position:absolute;height:1px; width:20px; left:100%; top:25px; background:#ddd;}
dl.organ dt a, dl.organ dt span {display:block; width:100%; font-size:1.8rem; font-weight:700; color:#fff; background:#1da885; border-radius:5px;}

dl.organ dd {display:table-cell; width:100%;  vertical-align:top; }
dl.organ dd ul {margin-left:20px;}
dl.organ dd ul:after {content:''; clear:both; display:table;}
dl.organ dd ul li {float:left; width:19%; margin:0 1% 1% 0; text-align:center;  }
dl.organ dd ul li a, dl.organ dd ul li span {display:block;border-radius:5px; background:#f8f8f8; border:1px solid #ddd;}

dl.organ.type01, dl.organ.type02 {padding:0 1.5rem;}

dl.organ.type02 dt a {background:#4792f0;}

.type04 {padding:2rem 1.5rem; background:#f8f8f8; margin-bottom:30px;}
.type04 dl.organ dt:after {content:none;}
.type04 dl.organ.dep02 {margin-bottom:20px;}
.type04 dl.organ.dep02 dt a, .type04 dl.organ.dep02 dt span {background:#292984;}
.type04 dl.organ.dep02 dd ul li {margin:0;}
.type04 dl.organ.dep03 {background:#fff; border-radius:5px; margin-bottom:10px;}
.type04 dl.organ.dep03 dt a {background:none;color:#292984;font-weight:400;font-size:inherit;border: 1px solid #292984;}
.type04 dl.organ.dep03 dd ul li {position:relative; width:16.666666%; margin:0; text-align:left;padding-left:10px;}
.type04 dl.organ.dep03 dd ul li:before {content:''; width:3px; height:3px; background:#ddd; position:absolute; left:0; top:22px;}
.type04 dl.organ.dep03 dd ul li a, .type04 dl.organ.dep03 dd ul li span {border:none; background:none;}

.type04 dl.organ.dep03 dd ul li.w {width:30%;}

.type04.plan dl.organ.dep02 dt a {background:#4c68e2;}

.type04.health dl.organ.dep02 dt a {background:#00a59f;}
.type04.health dl.organ.dep03 dt a {color:#00a59f;border: 1px solid #00a59f;}

.type04.facility dl.organ.dep02 dt a {background:#ef7000;}
.type04.facility dl.organ.dep03 dt a {color:#ef7000;border: 1px solid #ef7000;}

.type04.jumin dl.organ.dep02 dt span {background:#0078a4;}
.type04.assembly dl.organ.dep02 dt a {background:#38918b;}

.type04.plan dl.organ.dep02,
.type04.jumin dl.organ.dep02,
.type04.assembly dl.organ.dep02 {margin-bottom:0;}

.type04.plan dl.organ.dep02 dd ul li,
.type04.jumin dl.organ.dep02 dd ul li,
.type04.assembly dl.organ.dep02 dd ul li {margin:0 1% 1% 0; }

.type04.plan dl.organ.dep02 dd ul li span,
.type04.jumin dl.organ.dep02 dd ul li a,
.type04.assembly dl.organ.dep02 dd ul li span {border:none; background:#fff;}

.organOffice {padding:1.5rem; margin-bottom:4rem;}
.organOffice dt {width:190px; padding:1.5rem 0; margin:0 auto 40px; font-size:1.8rem; color:#fff; font-weight:700; text-align:center; background:#014ab5; border-radius:5px; position:relative;}
.organOffice dt:after {content:''; display:block; position:absolute; width:1px; height:20px; bottom:-20px; left:50%; background:#ddd;}
.organOffice dd {width:100%; position:relative;}
.organOffice dd:before {content:''; display:block; position:absolute; width:80%; height:1px; top:-20px; left:10%; background:#ddd;}
.organOffice dd ul:after {content:''; display:block; clear:both;}
.organOffice dd li {float:left; width:20%; text-align:center; position:relative;}
.organOffice dd li:before {content:''; display:block; position:absolute; width:1px; height:20px; top:-20px; left:50%; background:#ddd;}
.organOffice dd li span {display:block; padding:1.5rem 0; margin:0 2%; color:#666; background:#f8f8f8; border:1px solid #ddd; border-radius:5px;}

@media all and (max-width:1024px){
	dl.organ dd ul li {width:24%;}
	.type04 dl.organ.dep03 dd ul li {width:25%;}
	.type04 dl.organ.dep03 dd ul li.w {width:50%;}
}

@media all and (max-width:768px){
	dl.organ dt {width:150px;}
	dl.organ dd ul li {width:32%;}
	.type04 dl.organ.dep03 dd ul li {width:33.333333%;}
}
@media all and (max-width:640px){
	dl.organ dd ul li {width:49%;}
	.type04 dl.organ.dep03 dd ul li {width:50%;}
}

@media all and (max-width:500px){
	dl.organ a{line-height:40px; }
	dl.organ dt, dl.organ dd {display:block; width:100%; margin-bottom:10px;}
	dl.organ dd ul {margin-left:0;}

	dl.organ dt:after {content:none;}

	.type04 dl.organ.dep03 dt {border-bottom:1px dashed #ddd;}
	.type04 dl.organ.dep03 dd ul {padding:0 20px;}
	.type04 dl.organ.dep03 dd ul li {width:50%;}
	.type04 dl.organ.dep03 dd ul li:before {top:17px;}

	.type04 dl.organ.dep02 dd ul li {width:100%;}

	.type04.plan dl.organ.dep02 dd ul li,
	.type04.jumin dl.organ.dep02 dd ul li,
	.type04.assembly dl.organ.dep02 dd ul li {width:49%;}

	.type04 dl.organ.dep03 dd ul li.w {width:100%;}

	.organOffice {margin-bottom:3rem; border:1px solid #ddd; border-radius:5px;}
	.organOffice dt {width:100%; padding:1rem; margin-bottom:10px;}
	.organOffice dt:after {display:none;}
	.organOffice dd:before {display:none;}
	.organOffice dd li {width:50%;}
	.organOffice dd li span {margin:0 2% 2% 0;}
	.organOffice dd li:before {display:none;}
}

/* 조직도 변경. 2022.08.18 */
.organ_box {text-align: center;}
.organ_box ul {position: relative;}
.organ_box ul li {display: inline-block;}
.organ_box .organ.dep03 {margin-top: 102px;}
.organ_box .organ.dep03 .type04 {background: #292984; margin-bottom: 10px; border-radius: 5px;}
.organ_box .organ.dep03 .type04.jumin {background: #0078a4;}
.organ_box .organ.dep03 .type04.facility {background: #ef7000;}
.organ_box .organ.dep03 .type04.health {background: #00a59f;}
.organ_box .organ.dep03 .type04.assembly {background: #38918b;}

.organ.dep01 > li > div.box_organ {background: #1da885; width: 19.2%;}
.organ.dep02 > li > div.box_organ {background: #4792f0; width: 19.2%;}
.organ.dep03 > li > div.box_organ {position: absolute; top: 0; left: 0; margin-top: -96px; background: #4c68e2; width: 50rem;}
.organ.dep01 > li > div.box_organ a,
.organ.dep02 > li > div.box_organ a,
.organ.dep03 > li > div.box_organ a,
.organ_box .organ.dep03 .type04 a {color: #fff;}
.organ.dep01 > li.simin > div.box_organ {background: #fff; border: 1px solid #2548b3; min-width: 21rem; line-height: 4.7rem;}
.organ.dep01 > li.simin > div.box_organ span {color: #2548b3; font-size: 2rem; font-weight: normal;}
.organ.dep01 > li > ul > li > div.Secretary {position: absolute; right: 0; margin-top: -20px; margin-right: 10%; background: #f8f8f8; border: #ddd 1px solid; width: 20rem; line-height: 4.6rem;}
.organ.dep01 > li > ul > li > div.Secretary a {font-size: initial;}
.organ.dep03 > li {width: 19.2%; margin-left: 0.8%; float: left; position: relative;}
.organ.dep03 > li.cleboth {clear: left;}
.organ_dep03 > li > ul > li {float: left; clear: left;}

.organ.dep03 > li:first-child {width:100%; margin:0;}
.organ.dep03 > li:first-child:before {display:none;}
.organ.dep03 > li:first-child > div.box_organ {width:19.2%; margin-left:.8%;}
.organ.dep03 > li:first-child > div.box_organ.cap02 {left:auto; right:0;}
.organ.dep03 > li:first-child > div.box_organ.cap02:after {left:auto; right:100%;}

.organ_box .organ.dep04 {margin-bottom: 3rem; box-sizing: border-box; text-align: left; overflow: hidden;}
.organ_box .organ.dep04 li {clear: left; width: 100%; margin: 5px 0;}
.organ_box .organ.dep04 li a {color: #292984; font-weight: 400; font-size: inherit; display: block; border: 1px solid #292984; border-radius: 5px; padding: 15px 0; text-align: center;}

.organ.dep03 li.jumin_li .organ.dep04 li a {color: #2a77a3; border: 1px solid #2a77a3;}
.organ.dep03 li.facility_li .organ.dep04 li a {color: #ef7000; border: 1px solid #ef7000;}
.organ.dep03 li.health_li .organ.dep04 li a {color: #00a59f; border: 1px solid #00a59f;}

.organ.dep03 > li:before {content: ""; display: block; position: absolute; width: 1px; height: 2.4rem; background: #ddd; top: -24px; left: 50%; margin-left: -1px;}
.organ.dep01 > li.simin > div.box_organ:after {content: ''; display: block; position: absolute; width: 1px; height: 36px; bottom: -37px; left: 51.5%; background: #ddd;}
.organ.dep01 > li > ul > li > div.Secretary:before {content: '';display: block;position: absolute;width: 114%;height: 1px;right: 100%;top: 24px;background: #ddd;}
.organ.dep01 > li > div.box_organ:after {content:''; display:block; position:absolute; width:1px; height:36px; bottom:-36px; left:51.5%; background:#ddd;}
.organ.dep02 > li > div.box_organ:after {content:''; display:block; position:absolute; width:1px;height: 77px;bottom: -77px; left:51.5%; background:#ddd;}
.organ.dep03 > li > div.box_organ:after {content: ''; display: block; position: absolute; width: 158%; height: 1px; left: 100%; top: 26px; background: #ddd;}
.organ_box .organ.dep02 li .organ.dep03:after {content: ""; display: block; position: absolute; left: 66.3%; top: 0; width: 80.1%;  height: 1px; margin-top: -2.5rem; background: #ddd; margin-left: -56%;}
.organ.dep03 > li.line_none:before {display:none;}

.box_organ {display: block; border-radius: 5px; width: 15.5rem;height: 5rem;font-size: 1.8rem;font-weight: 700; line-height: 5rem; color: #ffffff; font-weight: 500; width: auto; min-width: 15rem; display: inline-block;  max-width: 100%; box-sizing: border-box; margin-top: 2rem; position: relative;}

@media all and (max-width:1024px){
	.organ.dep01 > li > ul > li > div.Secretary:before {display:none;}
}
@media all and (max-width:820px){
	.organ.dep03 > li > div.box_organ:after {display:none;}
	.organ.dep01 > li > ul > li > div.Secretary {margin-right: 0; width: 15rem;}
}
@media all and (max-width:500px){
	.organ_box ul li {display: block;}
	.organ.dep01 > li > div.box_organ {width: 100%;}
	.organ.dep02 > li > div.box_organ {width: 100%;}
	.organ.dep03 > li {width: 100%;}
	.organ.dep01 > li > ul > li > div.Secretary {position: relative; margin-top: 20px; margin-right: 0; width: 100%;}
	.organ.dep03 > li {margin-left: 0;}
	.organ.dep03 > li:before,
	.organ.dep01 > li > div.box_organ:after,
	.organ.dep02 > li > div.box_organ:after,
	.organ_box .organ.dep02 li .organ.dep03:after,
	.organ.dep01 > li.simin > div.box_organ:after,
	.organ.dep03 > li.line_none:before {display:none;}
}

/* 과천시민헌장 */
#conts .box-top {width:100%; background:url("/portal/img/content/05/sub1104_bg01.png") no-repeat 0 0;margin-bottom:30px;padding: 3.5rem 5rem;}
#conts .box-top p {width: 70%;position:relative;font-family:'Noto Serif KR', serif;font-size: 2.2rem;color:#fff !important;text-align:center;padding:30px 0;float:right;}
#conts .box-top p:before {content:""; width:30px; height:20px; position:absolute; left:0; top:0; background:url("/portal/img/content/05/quotation01.svg") no-repeat;}
#conts .box-top p:after {content:""; width:30px; height:20px; position:absolute; right:0; bottom:0; background:url("/portal/img/content/05/quotation02.svg") no-repeat;}
#conts .box-top:after {content:""; display:block; clear:both;}

@media all and (max-width:1024px) {
	#conts .box-top {padding:3.5rem 2rem; background-position:100% 50%;}
	#conts .box-top p {width:auto; float:none;}
}
@media all and (max-width:760px) {
	#conts .box-top p {font-size:1.9rem;}
}
@media all and (max-width:640px) {
	#conts .box-top {background-size:cover;}
	#conts .box-top p {word-break:keep-all;}
	#conts .box-top p br {display:none;}
}

/*  과천비전 */
#conts .box-img.vision p {font-size: 2.2rem; margin-bottom:30px;}



/* 과천상징 */
#conts .box-symbol {position:relative; width:100%; padding:3rem 5rem; text-align:center; border:1px dashed #ddd; }
#conts .box-symbol p {margin-top:3rem; word-break:keep-all;}
#conts .box-symbol .btnWrap {margin-top:3rem; border-top:1px dashed #ddd; padding-top:3rem;}
#conts .box-symbol ul:after {content:''; clear:both; display:table;}
#conts .box-symbol ul li {width:25%; float:left; border-right:1px solid #ddd; padding:1rem;}
#conts .box-symbol ul li:last-child {border-right:0; border-bottom:0;}
#conts .box-symbol ul li .tit {font-weight:700; font-size:2.0rem; margin-bottom:20px;}
#conts .box-symbol ul.col-2 li {width:50%;}

#conts .box-symbol .img-view  {display:none; position:absolute; right:0; bottom:0; z-index:1; background:rgba(0,0,0,.6); padding:.8em 1em; color:#fff; font-size:.9em;}
#conts .box-symbol  .txt-caption {display:block; position:absolute; top:-999px; z-index:-9999; width:0px; height:0px; overflow:hidden;}

#conts .box-symbol.song {display:table; table-layout:fixed; padding:5rem 3rem;}
#conts .box-symbol.song > div {display:table-cell; vertical-align:top}
#conts .box-symbol.song .titWrap {width:45%;}
#conts .box-symbol.song .titWrap p {margin-top:0;}
#conts .box-symbol.song .titWrap .tit {font-size:2.6rem; color:#3a81dc; margin-bottom:1rem;}
#conts .box-symbol.song .titWrap .lyric {background:#f8f8f8; padding:20px; }
#conts .box-symbol.song .titWrap .lyric p {margin-bottom:20px; text-align:left; word-break:keep-all;}
#conts .box-symbol.song .titWrap .lyric .info {text-align:right; margin-bottom:10px;}

@media all and (max-width:1024px) {
	#conts .box-symbol.song,
	#conts .box-symbol.song > div,
	#conts .box-symbol.song .titWrap {display:block; width:100%;}
	#conts .box-symbol.song .titWrap .lyric p span {display:block;}
	#conts .box-symbol.song .titWrap .lyric p br {display:none;}
}

@media all and (max-width:850px) {
	#conts .box-symbol { padding:3rem;}
	#conts .box-symbol p br {display:none; }
	#conts .box-symbol .img-view {display:block;}
}
@media all and (max-width:640px) {
	#conts .box-symbol ul.mo-1 li {width:100%;}
	#conts .box-symbol ul li {border-right:none; border-bottom:1px solid #ddd; width:auto; float:none;}
}
@media all and (max-width:455px) {
	#conts .box-symbol .btnWrap .button {display:block;}
}


/*  자매결연도시  */
#conts .cuturalWrap:not(:first-child) {margin-top:40px;}
#conts .cuturalWrap .info {width:100%; display:table; table-layout:fixed; line-height:1.7; margin-bottom:30px;}
#conts .cuturalWrap .info .cell {display:table-cell; vertical-align: middle;}
#conts .cuturalWrap .info .thumb {width: 26rem;padding:0; text-align:center;}
#conts .cuturalWrap .info .s-title {color:#216cda !important; font-size:2.5rem !important; border-bottom: 1px dashed #ddd; padding-bottom:1rem;}
#conts .cuturalWrap .info dl {width:100%; display:table; table-layout:fixed;  font-size:1.6rem;}
#conts .cuturalWrap .info dl dt {display:table-cell; vertical-align:top; width:120px; border-bottom:1px solid #216cda; font-weight:700; padding:10px 0;}
#conts .cuturalWrap .info dl dd {display:table-cell; vertical-align:top; border-bottom:1px solid #ddd; padding:10px;}

#conts .cuturalWrap .flx-cont {border-radius:0; }
#conts .cuturalWrap .flx-cont h5 {color:#333;}

@media all and (max-width:640px) {
	#conts .cuturalWrap .info{display:block; padding:.5rem 0; min-height:0;}
	#conts .cuturalWrap .info .cell {display:block; padding:1rem 0rem;}
	#conts .cuturalWrap .info .thumb {width:auto; padding-bottom:0; text-align:center;}
	#conts .cuturalWrap .info .thumb + .cell {padding-left:0rem;}
}


/* 과천비전 2040 */


/* 과천비전 2040 */

#conts .vision {width:100%; text-align:center; padding:5rem 3rem; background:#004a98 url("/portal/img/content/05/sub0510_bg01.jpg") no-repeat center bottom; background-size:100%;}
#conts .vision .title {display:inline-block; font-size:4rem; color:#fff; font-weight:700; padding-bottom:5px; margin-bottom:6rem; border-bottom:3px solid #fff;}
#conts .vision .txt {text-align:left; width:730px; color:#fff; margin:0 auto;}
#conts .vision .txt dl {display:table; width:100%; margin-bottom:15px;}
#conts .vision .txt dl dt {display:table-cell; width:18rem; font-weight:700;}
#conts .vision .txt dl dd{display:table-cell;}
#conts .vision .txt dl dd em {color:#ffda30;}
#conts .vision .txt dl dd ul li {position:relative; padding-left:10px; margin-bottom:10px; }
#conts .vision .txt dl dd ul li:before {content:''; position:absolute; top:6px; left:0; width:4px; height:4px; background:#83a6cb; border-radius:10px;}
#conts .vision .box-img {margin:0;}

.img-content-0510000000 {display:block; position:relative; max-width:1400px; margin:0 auto; background:url('../../portal/img/content/05/sub100101_img01.jpg') no-repeat 50% 0; background-size:contain;}
.img-content-0510000000:before {content:""; display:block; position:relative; padding-top:141.1522633744856%;}

@media all and (max-width:640px) {
	#conts .vision .title  {font-size:3.2rem; margin-bottom:4rem;}
	#conts .vision .txt {width:100%; }
	#conts .vision .txt dl dt {width:14rem;}
}

@media all and (max-width:520px) {
	#conts .vision .txt dl {display:block; margin-bottom:20px;}
	#conts .vision .txt dl dt, #conts .vision .txt dl dd {display:block; width:100%;}
	#conts .vision .txt dl dt {margin-bottom:15px;}
}

@media all and (max-width:400px) {
	#conts .vision .title  {font-size:2.8rem; margin-bottom:3rem;}
}