@charset "utf-8";
/* 역사 */
.history dt, .history dd { float: left;}
.history dt { width: 15%;}
.history dd { width: 85%;}
.history dd p { margin: 15px 0;}
.history.h010204 dd p { margin: 9px 0;}
.history.h010207 dd p { margin: 18px 0;}
@media screen and (max-width:1024px){
	.history dt { width: 18%;}
	.history dd { width: 82%;}
	.history dd p { margin: 9px 0;}
}
@media screen and (max-width:768px){
	.history dt { width: 22%;}
	.history dd { width: 78%;}
}
@media screen and (max-width:767px){
	.history dt, .history dd {float: none;width: 100%;}
	.history dt {text-align: center;}
}
/* --- 클린광주 - 광주역사 - 전설/민담/낙화암 - 디자인정리되면 삭제 --- 
.tab_depth04>ul.list09>li>a{line-height: 1.2em; padding-top: 18px; font-size: 15px; height: 35px; margin: 0 auto; width: 93%; letter-spacing: -1.5pt;}
.tab_depth04>ul.list09>li>a[href*="mId=0101050300"], .tab_depth04>ul.list09>li>a[href*="mId=0101050500"]{padding-top: 10px; height: 43px;}
.tab_depth04>ul>li>a.on{margin: 0 auto 7px auto !important;}
--- 끝 -- */

/* 연혁 */
.history_box { margin-top:20px; }
.history_box .history_img { float:left; width:18% }
.history_box .txt { float:left; width:82%; }
.history_box .txt dt { position:relative; padding-left:14px; }
.history_box .txt dt:before { content:''; position:absolute; width:8px; height:8px; left:0; top:6px; background:url(/common/img/common/spr_bu.png) no-repeat 0 -92px; }
.history_box .txt dd { position:relative; margin-bottom:20px; padding-left:18px; margin-left:20px; }
.history_box .txt dd:before { content:''; position:absolute; width:11px; height:11px; left:0; top:4px; background:url(/common/img/common/spr_bu.png) no-repeat 0 -109px; }
.history_box .txt dd.list { position:relative; margin-bottom:20px; padding-left:0; margin-left:20px; }
.history_box .txt dd.list li { position:relative; margin-top:5px; padding-left:18px; }
.history_box .txt dd.list li:first-child { margin-top:0; }
.history_box .txt dd.list li:before { content:''; position:absolute; width:11px; height:11px; left:0; top:4px; background:url(/common/img/common/spr_bu.png) no-repeat 0 -109px; }
.history_box .txt dd.list:before { display:none; }
.history_box:after { content:''; display:block; clear:both; }

/* 전설민담 */
.legend_box { margin-top:20px; border:4px solid #e8e7f1; padding:30px; box-sizing:border-box; }
.legend_box p { margin-top:15px; }
.legend_box p:first-child { margin-top:0; }

@media (max-width: 1024px){
	.history_box .history_img { width:20%; }
	.history_box .txt { width:80%; }	
}

@media (max-width: 890px){
	.history_box .history_img { width:25%; }
	.history_box .txt { width:75%; }	
}

@media (max-width: 700px){
	.history_box .history_img { width:30%; }
	.history_box .txt { width:70%; }	
}

@media (max-width: 560px){
	.history_box .history_img { width:35%; }
	.history_box .txt { width:65%; }	
}

@media (max-width: 490px){
	.history_box .history_img { width:100%; }
	.history_box .history_img img { width:100%; }
	.history_box .txt { width:100%; margin-top:20px; }	
}


/* 광주역사 - 자료실*/
.con010801{}
.con010801 .select_area{margin:0px 0 10px 0;text-align:right;}
.con010801 .select_area select{padding:8px 16px;vertical-align:top;}
.con010801 .select_area input{padding:7px 15px 7px 15px;vertical-align:top;}
.con010801 .pics_con{overflow:hidden;width:90%;margin:0 auto;}
.con010801 .pics_thumbs{float:left;width:50%;text-align:center;}
.con010801 .pics_thumbs div{background:url(../img/sub01/pics_bg.png) no-repeat center bottom;height:277px;}
.con010801 .pics_thumbs div img{display:inline-block;width:168px;height:228px;border:1px solid rgba(0,0,0,0.08);}
.con010801 .data_down{float:right;width:50%;padding-top:10px;}

@media (max-width: 699px){
.con010801 .pics_con{width:100%;}	
}
@media (max-width: 589px){
.con010801 .pics_thumbs{float:inherit;width:100%;}	
.con010801 .data_down{float:inherit;width:100%;padding-top:20px;}
}	

/* 클린광주 - 일반현황 - 캐릭터 */
.character_wrap {margin-top: 10px;}
.character_wrap div{width: 24%; text-align: center;border:1px solid #ddd; box-sizing:border-box; margin: 0px 0.5%;}
.character_wrap img{}

@media (max-width: 1024px){
.con010203 .box_h p{float:inherit;margin-bottom:20px;}
.con010203 .box_h ul{width:100% !important;}	
}	
@media (max-width: 634px){
.character_wrap div{width:48%;margin-bottom:1%;}	
}
	
/* 클린광주 - 일반현황 - 광주의 노래 */
.song_box{text-align: center;}
.song_box img{padding: 10px; border:1px solid #ddd; box-sizing:border-box;}

/* 오시는 길 */
.map_wrap div{border-bottom: 1px dashed #ddd; padding-bottom: 20px; margin-top: 20px;}
.map_wrap p{float: left; padding-top: 80px; background: url(/portal/img/sub01/spr_map.png) no-repeat; font-size: 17px; font-family: 'NanumSB'; width: 15%; 
text-align: center; color: #276cad;}
.map_wrap ul{float: left; width: 80%;}
.map_wrap .car p{background-position: center 0;}
.map_wrap .subway p{background-position: center -273px; padding-top: 94px;}
.map_wrap .bus p{background-position: center -552px;}

@media (max-width: 644px){
	.map_wrap p{margin-bottom: 10px;}
	.map_wrap p, .map_wrap ul{float: none; width: 100%;}
}


/* 일반현황 */
.state_wrap>div{width: 50%; float: left; min-height: 240px; box-sizing:border-box; border-right:1px dashed #ddd; padding: 20px 20px 20px 159px;
background: url(/portal/img/sub01/spr_state.png) no-repeat;}
.state_wrap>div.people{background-position: 10px 0px;}
.state_wrap>div.area{border-right: 0;background-position: 10px -360px;}
.state_wrap>div.money{background-position: 10px -710px;}
.state_wrap>div.group{border-right: 0; background-position: 10px -1063px;}
.state_wrap>div.public{width: 100%; clear: both;border-right: 0; background: url(/portal/img/sub01/bg_state_public.png) no-repeat 10px 10px;}
.state_wrap>div.public .tbl{margin-top: 10px;}
.state_wrap>div.edu{background-position: 10px -1767px;}
.state_wrap>div.office{border-right: 0;background-position: 10px -2119px;}
.state_wrap>div.car{background-position: 10px -2471px;}
.state_wrap>div.water1{border-right: 0;background-position: 10px -2833px;}
.state_wrap>div.water2{background-position: 10px -3175px;}
.state_wrap>div.trash{border-right: 0;background-position: 10px -3528px;}
.state_wrap>div.gas{background-position: 10px -3879px;}
.state_wrap>div h4{padding-left: 0; color: #286dad;}
.state_wrap div h4:before{display: none;}
@media (max-width: 786px){
	.state_wrap>div{width: 100%; border-right: 0 !important; border-bottom: 1px dashed #ddd;}
}
@media (max-width: 486px){
	.state_wrap>div{background-position-x: center !important; float: none; padding: 160px 20px 10px;}
}

/* 상징물 */
.logo_wrap{margin-bottom: 30px;}
.logo_wrap .img{border:1px dashed #bbb; border-radius:20px; text-align: center; padding: 20px; box-sizing:border-box; width: 49%; float: left;}
.logo_wrap .img img{display: block; margin: 0 auto;}
.logo_wrap .img>p{display: inline-block; vertical-align: middle;}
.logo_wrap .img ul{display: inline-block; width: 49%; vertical-align: middle;}
.logo_wrap .img ul li{float: left; width: 50%; margin-top: 10px;}
.logo_wrap .img ul li p:first-child{font-family: 'NanumSB'; font-size: 15px;}
.logo_wrap .img ul li p{font-size: 12px;}
.logo_wrap .img ul li:before{content: ''; display: block; height: 20px; width: 100px; margin: 2px auto;}
.logo_wrap .img ul .color_blue:before{background: #1b52a2;}
.logo_wrap .img ul .color_red:before{background: #dd0027;}
.logo_wrap .img ul .color_yellow:before{background: #f2c000;}
.logo_wrap .img ul .color_green:before{background: #00aa51;}

.logo_wrap .txt{float: right; width: 49%;}
.slogan .img{padding: 74px 20px;}

.yellow{color: #f2c000;}
.green{color: #00aa51;}

.symbol_wrap{margin-top: 20px; border-radius:20px; border:1px solid #ddd; padding: 20px;}
.symbol_wrap h4:before{display: none;}
.symbol_wrap h4{padding-left: 0; text-align: center; margin-top: 10px !important;}
.symbol_wrap div{width: 25%; float: left; box-sizing:border-box; padding: 10px; border-right:1px dashed #bbb;}

.brn{border-right: 0 !important;}

@media (max-width: 924px){
.logo_wrap .img{width:100%;float:inherit;margin-bottom:20px;}
.logo_wrap .txt{width:100%;float:inherit;}
.symbol_wrap div{width:50%;min-height:440px;}
.symbol_wrap div:nth-child(1){border-bottom:1px dashed #bbb;margin-bottom:10px;}
.symbol_wrap div:nth-child(2){border-bottom:1px dashed #bbb;margin-bottom:10px;border-right:0;}	
}
@media (max-width: 529px){
.logo_wrap .img>p{display:block;margin-bottom:20px;}
.logo_wrap .img ul{width:78%;}
.symbol_wrap div{width:100%;min-height:inherit;border-right:0;}
.symbol_wrap div:nth-child(3){border-bottom:1px dashed #bbb;}
}	

/* 행정지도 */
.img_map_wrap {position: relative; border:1px solid #ddd; border-radius:20px; overflow: hidden; background: url(/portal/img/sub01/img_map_all.png) no-repeat 20px 0px; height: 594px;}
.img_map_wrap li{position: absolute; top: 0; left: 0;}
.img_map_wrap li a{display: block; position: relative; font-size: 18px; color: #276cad; font-weight: 600; text-shadow: 0 0 2px #fff;}
.img_map_wrap li a:hover{color: #fff;text-shadow: 0 0 2px #000;}
.namjong{top: 75px; left: 312px;}
.namhan {top: 144px; left: 147px;}
.toechon{top: 160px; left: 348px;}
.songjeong{top: 215px; left: 173px;}
.gyeongan{top: 271px; left: 226px;}
.chowol{top: 289px; left: 322px;}
.gwangnam{top: 292px; left: 134px;}
.opo{top: 372px; left: 120px;}
.gonji{top: 369px; left: 433px;}
.docheok{top: 479px; left: 324px;}
.center_01{ background: url(/portal/img/sub01/img_map_namjong.png) no-repeat 20px 0;}
.center_02{ background: url(/portal/img/sub01/img_map_namhan.png) no-repeat 20px 0;}
.center_03{ background: url(/portal/img/sub01/img_map_toechon.png) no-repeat 20px 0;}
.center_04{ background: url(/portal/img/sub01/img_map_songjeong.png) no-repeat 20px 0;}
.center_05{ background: url(/portal/img/sub01/img_map_gyeongan.png) no-repeat 20px 0;}
.center_06{ background: url(/portal/img/sub01/img_map_chowol.png) no-repeat 20px 0;}
.center_07{ background: url(/portal/img/sub01/img_map_gwangnam.png) no-repeat 20px 0;}
.center_08{ background: url(/portal/img/sub01/img_map_opo.png) no-repeat 20px 0;}
.center_09{ background: url(/portal/img/sub01/img_map_gonji.png) no-repeat 20px 0;}
.center_10{ background: url(/portal/img/sub01/img_map_docheok.png) no-repeat 20px 0;}
.map_txt {float: right; width: 40%; padding-top: 40px; padding-right: 22px;}
.map_txt .tit{font-size: 30px; color: #276cad; font-weight: 600; margin-bottom: 20px;}
.map_txt .txt{font-size: 16px; line-height: 1.5em;}
.img_map_wrap_box .div_guide{display: none;}
@media (max-width: 1014px){
	.img_map_wrap_box{width: 100%; overflow: scroll;}
	.img_map_wrap{width: 995px;}
	.img_map_wrap_box .div_guide { display: block; padding: 20px 0 0 18px; color: #3547ad; font-size: 13px; background: url('/common/img/common/ico_tbl_guide.gif') 0px 22px no-repeat; line-height: 130%; margin-left: 20px;}
}
/* 조직도 */
.organ_box { margin-top:15px; }
.organ_box .depth1 { position:relative; text-align:center; margin:0 auto; width:50%; }
.organ_box .depth1 p {display:inline-block;/* position:relative; */font-size:24px;}
.organ_box .depth1 p a{background: url(/depart/youth/img/sub01/bg_org_lv01.png) no-repeat;color: #00a5d4;font-weight: 600;font-size: 24px; display: block;width: 140px; height: 140px;  border-radius: 50%;line-height: 140px;
margin: 0 auto; text-align: center;}
.organ_box .depth1 p:before {content:'';position:absolute;top:0;left:0;border-bottom:17px solid transparent;}
.organ_box .depth2 {position:relative;margin:0 auto;margin-top: 10px;text-align:center;}
.organ_box .depth2:after { content:''; display:block; clear:both; }
.organ_box .depth2 div {display:inline-block;float:right;position:relative;font-size:18px;padding: 10px 45px;background: #de981e;color:#fff;border-radius: 30px;}
.organ_box .depth2 div:before { content:''; position:absolute; top:0; left:0; border-bottom:15px solid transparent;  }
.organ_box .depth3 { position:relative; text-align:center; margin:0 auto; width:50%; }
.organ_box .depth3 p {display:inline-block;position:relative;font-size: 18px;padding: 14px 45px;background: #01488a;border-radius: 30px;color:#fff;}
.organ_box .depth3 p a{color: #fff;}
.organ_box .depth3 p:before {content:'';position:absolute;top:0;left:0;border-bottom:17px solid transparent;}
.organ_box .depth3 { margin-top:20px; }
.organ_box .depth3 > ul > li > div { display:inline-block; position:relative; font-size:18px; padding:15px 45px; background:#0d66d5; color:#fff; }
.organ_box .depth3 > ul > li { width:49%; margin:0 auto; text-align:center; }
.organ_box .depth3 > ul > li > div:before { content:''; position:absolute; top:0; left:0; border-bottom:15px solid transparent; border-left:14px solid #fff; }
.organ_box .depth3 ul:after { content:''; display:block; clear:both; }
.organ_box .depth4 { margin-top:30px; padding:5px; box-sizing:border-box; background:#f4f4f4; border-radius:8px; }
.organ_box .depth4 div {border-radius: 10px 10px 0 0; display:block; position:relative; font-size:14px; font-weight:bold; padding:10px 0; text-align:center;color:#333; }
.organ_box .depth4 .dep4_01 div{ background:#4cb561; } 
.organ_box .depth4 .dep4_02 div{background: #218785;} 
.organ_box .depth4 .dep4_03 div{background: #287bca;}  
.organ_box .depth4 ul > li { float:left; width:33.33333333333333%; display:block; position:relative; box-sizing:border-box; padding:10px; }
.organ_box .depth4 ul > li > ul { padding:10px 15px; border:1px solid #ddd; box-sizing:border-box; height:190px; background:#fff; }
.organ_box .depth4 ul > li > ul > li {width:50%}
.organ_box .depth4 ul > li > ul > li p { text-align:left; letter-spacing:-1px; padding:3px 0 3px 10px; vertical-align:middle; }
.organ_box .depth4 ul > li > div > p a{ color:#fff }
.organ_box .depth4 ul > li > ul > li p:before { content:""; display:inline-block; vertical-align:middle; width:5px; height:2px; background:#33345f; margin-right:5px; }
.organ_box .depth4:after { content:''; display:block; clear:both; }
.organ_box .depth4 div:before { content:''; position:absolute; top:0; left:0; border-bottom:15px solid transparent;}
.organ_box .depth5 { margin-top:10px; padding:5px; box-sizing:border-box; background:#f4f4f4; border-radius:8px; }
.organ_box .depth5 > ul{width:98%;margin:10px auto}
.organ_box .depth5 div{border-radius: 10px 10px 0 0; display:block; position:relative; font-size:14px; font-weight:bold; padding:10px 0; text-align:center; background:#40688e; color:#333;}
.organ_box .depth5 ul > li > ul { padding:15px; border:1px solid #ddd; box-sizing:border-box; height:60px; background:#fff; }
.organ_box .depth5 ul > li > ul > li{width:100%}
.organ_box .depth5 ul > li > ul > li p { text-align:center; letter-spacing:-1px; padding:3px 0 3px 10px; vertical-align:middle; }
.organ_box .depth5 ul > li > ul > li p:before { content:""; display:inline-block; vertical-align:middle; width:5px; height:2px; background:#33345f; margin-right:5px; }
.organ_box .depth5 ul > li > div > p a{color:#fff}
.organ_box .depth1 p:after {content:'';position:absolute;top:100%;left:50%;display:block;width:1px;border-left: 1px dashed #9a9a9a;height: 107%;}
.organ_box .depth2:before {content:'';position:absolute;top:50%;right:0;display:block;width:50%;border-top: 1px dashed #9a9a9a;height:1px;}
.organ_box .depth3 > ul > li.fL > div > p:after { content:''; position:absolute; top:50%; left:100%; display:block; width:127%; border-top:1px solid #dddddd; height:1px; }
.organ_box .depth3 > ul > li.fR > div > p:after { content:''; position:absolute; top:50%; right:100%; display:block; width:126%; border-top:1px solid #dddddd; height:1px; }
.organ_box .depth3 > ul > li > div:after { content:''; position:absolute; top:100%; left:50%; display:block; width:1px; border-left:1px solid #dddddd; height:59%; }
.chart_box{width:99%;margin:15px auto}
.chart_box ul li a{display: inline-block;float: left;position: relative;font-size: 15px;padding: 10px 0px;background:#2eaba1;color: #fff;border-radius: 10px 10px 0 0;width: 18%;margin: 5px;text-align: center;}
@media screen and (max-width:862px){
	.organ_box .depth4 ul > li > ul > li{width:100%;padding:1px}
	.chart_box ul li a{width:48%;margin:4px}
	}
@media screen and (max-width:500px){
	.organ_box .depth4 ul > li{float:none;width:100%}
	.organ_box .depth3{width:100%}
	.organ_box .depth3 p{display:block}
	.organ_box .depth2 div{display:block;float:none}
	.chart_box ul li a{width:100%;float:none}
	
}
tr[id^="more_box"] .img{ width: 29%; float: left; padding-right: 15px; box-sizing:border-box;}
tr[id^="more_box"] .txt{width: 70%; float: left;}
tr[id^="more_box"] .txt p:first-child{margin-top: 0;}

/*시청안내 - 업무안내*/
.role{}
.role .role_group{position:relative;min-height:52px;}
.role .title{background:url(../img/sub01/bg_role.jpg) no-repeat;padding:5px;width:174px;height:52px;box-sizing:border-box;position:absolute;top:0;left:0;}
.role .title strong{display:block;font-weight:600;background:#fff;height:100%;text-align:center;color:#197b61;font-size:117%;line-height:40px;}
.role ul.menu_tab{overflow:hidden;margin-left:184px;background:#e9eff5;font-size:0;}
.role ul.menu_tab li{display:inline-block;width:16.66%;position:relative;}
.role ul.menu_tab li a{display:block;text-align:center;font-size:16px;line-height:52px;}
.role ul.menu_tab li:after{content:'';display:block;width:2px;height:14px;background:#afbac5;position:absolute;top:18px;right:0;}
.role ul.menu_tab li:last-child:after{display:none;}

.role .role_box_wrap{clear:both;margin-left:184px;margin-top:14px;}
.role .role_box_wrap .role_box{border:1px solid #e9eff5;padding:24px;display:none;margin-bottom:20px;}

@media (max-width: 1024px){
.role ul.menu_tab li{width:20%;}	
}
@media (max-width: 885px){
.role ul.menu_tab li{width:25%;}	
}
@media (max-width: 745px){
.role ul.menu_tab li{width:33.33%;}	
}
@media (max-width: 629px){
.role .title{position:inherit;margin:0 auto;margin-top:28px;margin-bottom:10px;}
.role ul.menu_tab{margin-left:0;}	
.role .role_box_wrap{margin-left:0;}
}
@media (max-width: 499px){
.role ul.menu_tab li{width:50%;}
}
@media (max-width: 389px){
.role ul.menu_tab li{width:100%;}
.role ul.menu_tab li:after{content:'';display:block;width:100%;height:1px;background:#d5d8dc;position:absolute;top:inherit;bottom:0;right:inherit;left:0;}	
}