@charset "utf-8";

.search-side-button {text-align:right;}
@media all and (max-width:768px) {
	.search-side-button {text-align:left;}
}
@media all and (max-width:568px) {
	.search-side-button .btn {display:Block; line-height:3em !important; height:3em; text-align:center;}
}

/* 광주역사 - 연혁 */
.historyLine dl {display:table; width:100%; border-bottom:1px dashed #ddd;}
.historyLine dl:first-child >* {padding-top:0;}
.historyLine dt {display:table-cell; width:250px; padding:2em 0; border-right:1px solid #D22259;}
.historyLine dl:first-child dt {position:relative;}
.historyLine dl:first-child dt:after {content:''; width:3px; height:1em; background:#fff; position:absolute; right:-2px; top:0;}
.historyLine dt span {display:block; position:relative; padding-right:1em; font-size:1.4em; font-weight:600; color:#D22259; line-height:1.1;}
.historyLine dt span:after {content:''; position:absolute; width:13px; height:13px; top:50%; margin-top:-6.5px; right:-7.5px; background:#fff; border:3px solid #D22259; border-radius:50%; box-sizing:border-box; z-index:2;}
.historyLine dd {display:table-cell; padding:2em 0 2em 1.76em; vertical-align:top;}
.historyLine dd li {display:table; padding-bottom:1em; padding-left:.7em; position:relative; color:#666;}
.historyLine dd li:last-child {padding-bottom:0;}
.historyLine dd li:before {content:''; position:absolute; width:4px; height:4px; background:#333; border-radius:50%; top:.6em; left:0;}
.historyLine dd li strong {display:table-cell; width:12em; color:#333;}
.historyLine dd li span {display:table-cell; padding-left:10px;}

@media all and (max-width:768px) {
	.historyLine dl {display:block; position:relative; padding-left:20px;}
	.historyLine dl:before {content:''; width:1px; height:100%; background:#D22259; position:absolute; top:0; left:20px;}
	.historyLine dt {display:block; width:auto; padding:2em 25px 1em; border:0;}
	.historyLine dl:first-child dt:after {right:auto; left:-1px;}
	.historyLine dt span:after {right:auto; left:-31.5px;}
	.historyLine dd {display:block; padding:0 0 2em 25px;}
}
@media all and (max-width:640px) {
	.history-box dt, .history-box dd {display:table-row !important;}
	.history-box dt {width:100%; text-align:center;}
	.history-box dd .title {margin-top:1.5em;}
	.historyLine dd li {display:block;}
	.historyLine dd li strong {display:block; width:auto; padding-bottom:.3em;}
	.historyLine dd li span {display:block; padding:0;}
	.history-box.con .box-list.col-2 > div {width:100% !important; margin-top:1em!important;}
}

/* 광주역사 - 역사 */
.history-box {display:block; position:relative; width:100%;}
.history-box dl {display:table; position:relative; width:100%;}
.history-box dt {display:table-cell; position:relative; width:400px; vertical-align: top;}
.history-box dd {display:table-cell; position:relative; padding:0 0 0 2em; vertical-align: top;}
.history-box dd .title {position:relative; font-size:1.65em; font-weight:700; color:#2D2DA4; margin-bottom:.5em;}
.history-box dd .title:before {content:''; position:absolute; top:-5px; left:-10px; width:45px; height:30px; background:url(../img/sub/01/bullet-history-tit.png) no-repeat 0 0; z-index:-1;}

.history-box + .history-box {margin-top:2em;}
.history-box.con p {padding-left:35px; word-break: keep-all;}
.history-box.con .s-title{position:relative; font-size: 1.5em ;font-weight:700;  margin-bottom:.5em; }
.history-box.con .s-title:before {content:''; position:absolute; top:5px; left:0px; width:30px; height:30px; background:url(../img/sub/01/bullet-history.png) no-repeat 0 0; }
.history-box.con .box-list {padding-left:35px;}
.history-box.con .box-list.col-2 > div {width:49%; min-height:145px; float:left; margin:0;}
.history-box.con .box-list.col-2:after {content:''; clear:both; display:block;}
.history-box.con .box-list.col-2 > div:first-child {margin-right: 2%;}
.history-box.con .box-list.col-2 > div p {padding-left:0;}

/* 광주를 빛낸 인물 */
.shinyMan .imgCon {padding-left:1.18em;}
.shinyMan .innerBox {display:table; width:100%;}
.shinyMan .imgBox {display:table-cell; width:14em; vertical-align:top;}
.shinyMan .txtBox {display:table-cell; padding-left:1.18em; vertical-align:top;}

@media all and (max-width:768px) {
	.shinyMan .imgCon {padding-left:4.11em;}
	.shinyMan .innerBox {display:block;}
	.shinyMan .imgBox {display:block; width:auto; margin-bottom:20px; text-align:center;}
	.shinyMan .txtBox {display:block;}
}

/* 광주소개 - 광주역사 - 전설/민담 */

.legend-wrap {}
.legend-wrap .tit{color: #fff; font-size: 1.8em; margin:1em; border-radius: 0.5em 0.5em 1.5em; text-align:center; padding:0.5em; position:relative; background: #e3276b; font-family: 'GmarketSans';
    background: -moz-linear-gradient(45deg,  #e3276b 10%,  #2a3b6a 50%, #3151bd 90%);
    background: -webkit-linear-gradient(45deg,  #e3276b 5%,#2a3b6a 50%,#3151bd 90%);
    background: linear-gradient(-45deg,  #e3276b 5%,#2a3b6a 50%,#3151bd 90%);
    box-shadow: 0 0 20px 0 rgb(182 45 66 / 25%);
    }
.legend-wrap .tit::after{content: "GWANGJU HISTORY";position:absolute;right:20px;font-size: 0.55em;bottom:20px;letter-spacing: 4px;opacity: 0.4;}
.legend-wrap .cont{padding: 5em 3em 3em;border-radius:1em;margin-top:-4em;background: #fafbfc;border: 1px solid #ddd;text-align: center;word-break: keep-all;}
.legend-wrap .cont p {margin-bottom:1em;font-weight: 300;}

@media all and (max-width:1024px) {
	.legend-wrap .tit::after{bottom:-30px; color:#979797;}
}
@media all and (max-width:640px) {
	.legend-wrap .tit{font-size:1.5em;}
	.legend-wrap .cont{padding: 5em 1em 1em;}
}

/* 광주소개 - 광주역사 - 해공 신익희 */
.mini_docu{padding: 20px;height: 200px;border: 1px solid #ccc;overflow: auto;line-height: 30px;text-align: left;font-size: 15px;}

/* 일반현황 */
.generalInfo {margin:0 -.5em; display:flex; flex-wrap:wrap;}
.generalInfo:after {content:''; display:block; clear:both;}
.generalInfo >li {width:33.3333%; padding:0 .5em 1.7em; position:relative;}
.generalInfo .icoBox {position:absolute; top:-1em; right:2em; width:4.2em; height:4.2em; background:#fff; border-radius:1.6em; box-shadow:0 4px 16px rgba(0,0,0,.08); z-index:2;}
.generalInfo .icoBox img {position:absolute; top:50%; left:50%; width:60%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
.generalInfo .txtBox {height:100%; padding:2em 1.5em;  border:1px solid #ddd;}
.generalInfo .txtBox .tit {padding-bottom:.9em; font-size:1.3em; font-weight:600;}
.generalInfo .txtBox .call {position:relative; padding-left:1.470588em;}
.generalInfo .txtBox .call:before {content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:1.1764em; height:1.1764em; background:url(../img/sub01/020101_call.svg) no-repeat center center; background-size:100% auto;}
.generalInfo .tbl th, .generalInfo .tbl td {padding:.4em 0; font-size:.8em;}

@media all and (max-width:1024px) {
	.generalInfo .icoBox {width:3.5em; height:3.5em; border-radius:1.2em; right:1.5em;}
	.generalInfo .txtBox .tit {font-size:1.2em;}
}
@media all and (max-width:768px) {
	.generalInfo >li {width:50%;}
}
@media all and (max-width:480px) {
	.generalInfo >li {width:100%;}
}

/* 광주시사 */
.sisaBox {margin:0 -10px;}
.sisaBox:after {content:''; display:block; clear:both;}
.sisaBox .conBox {width:50%; float:left; padding:0 10px 20px;}
.sisaBox .conBox .inner {display:table; width:100%; padding:1.76em; border:1px solid #ddd; border-radius:20px;}
.sisaBox .conBox .down {display:table-cell; width:40%; vertical-align:top;}
.sisaBox .conBox .down a {display:block; height:270px; background:#000; position:relative;}
.sisaBox .conBox .down span {width:70px; height:70px; padding:24px 0; font-size:15px; color:#fff; text-align:center; border:1px solid #fff; position:absolute; left:50%; top:50%; margin:-35px 0 0 -35px; opacity:0; transition:opacity .2s;}
.sisaBox .conBox .down img {width:100%; height:100%; transition:opacity .3s;}
.sisaBox .conBox:hover .down span {opacity:1;}
.sisaBox .conBox:hover .down img {opacity:.4;}
.sisaBox .conBox .txt {display:table-cell; padding-left:1.4em; vertical-align:top;}
.sisaBox .conBox .txt p {padding:.5em 0; font-size:1.176em; font-weight:600; color:#E3276B;}
.sisaBox .conBox .txt li {padding-left:13px; margin-bottom:7px; font-size:14px; position:relative;}
.sisaBox .conBox .txt li:before {content:''; width:3px; height:3px; background:#333; border-radius:50%; position:absolute; left:0; top:9px;}

@media all and (max-width:1024px) {
	.sisaBox .conBox {width:auto; float:none;}
	.sisaBox .conBox .down {width:200px;}
}
@media all and (max-width:640px) {
	.sisaBox .conBox .inner {display:block;}
	.sisaBox .conBox .down {display:block; margin:0 auto 10px;}
	.sisaBox .conBox .txt {display:block; padding:0;}
	.sisaBox .conBox .txt p {text-align:center;}
}

/* 교류도시  */
.exchange_city {width:100%;padding-bottom: 22px;border-bottom:1px dashed #ddd;}
.exchange_city:last-child {border-bottom:none;}
.exchange_city::after {content:''; display:table; clear:both;}
.exchange_city>ul {width:60%; float:left;}
.exchange_city .city_logo {max-width:300px; float:left;}
.exchange_city .city_logo img {}

@media all and (max-width:870px){
	.exchange_city>ul {width:100%;}
	.exchange_city .city_logo {width: 90%;margin-left: 5%;}
}

/* 행정지도 */
.hangMapScroll {margin-right:240px;}
.hangMapScroll .tip {display:none;}
#hangMap {width:577px; height:630px; margin:0 auto; position:relative; background:url(../img/sub01/gj_map.png) no-repeat 0 0; background-size:100% auto;}
#hangMap.namjong {background-position:0 -650px;}
#hangMap.namhan {background-position:0 -1300px;}
#hangMap.toechon {background-position:0 -1950px;}
#hangMap.tanbeol {background-position:0 -2600px;}
#hangMap.songjeong {background-position:0 -3250px;}
#hangMap.gyeongan {background-position:0 -3900px;}
#hangMap.ssangryeong {background-position:0 -4550px;}
#hangMap.chowol {background-position:0 -5200px;}
#hangMap.gwangnam1 {background-position:0 -5850px;}
#hangMap.gwangnam2 {background-position:0 -6500px;}
#hangMap.opo {background-position:0 -7150px;}
#hangMap.opo2 {background-position:0 -7800px;}
#hangMap.sinhyun {background-position:0 -8450px;}
#hangMap.neungpyung {background-position:0 -9100px;}
#hangMap.gonji {background-position:0 -9750px;}
#hangMap.docheok {background-position:0 -10400px;}
#hangMap a {display:inline-block; padding:5px 20px; font-weight:600; color:#fff; text-decoration:none; background:#333; border-radius:40px; position:absolute; transform:translate(-50%, -50%);}
#hangMap a:hover {color:#D22259; background:#fff; z-index:2;}
#hangMap .namjong {top:12%; left:58%;}
#hangMap .namhan {top:29%; left:34%;}
#hangMap .toechon {top:30%; left:65%;}
#hangMap .tanbeol {top:39%; left:30%;}
#hangMap .songjeong {top:40%; left:42%;}
#hangMap .gyeongan {top:45%; left:39%;}
#hangMap .ssangryeong {top:50%; left:44%;}
#hangMap .chowol {top:51%; left:58%;}
#hangMap .gwangnam1 {top:50%; left:24%;}
#hangMap .gwangnam2 {top:55%; left:30%;}
#hangMap .opo {top:64%; left:25.5%;}
#hangMap .opo1 {top:64%; left:25.5%;}
#hangMap .opo2 {top:61%; left:41%;}
#hangMap .sinhyun {top:62%; left:9%;}
#hangMap .neungpyung {top:68%; left:12%;}
#hangMap .gonji {top:62%; left:79%;}
#hangMap .docheok {top:82%; left:59%;}
.hangMapBox {position:relative;}
.hangMapBox .box-notice {display:inline-block; position:absolute; right:0; top:0;}
.hangMapBox .box-notice .tit {margin-bottom:.5em;font-size:1.294em; font-weight:600; color:#5546A8;}

@media all and (max-width:1024px) {
	.hangMapScroll {margin:0; overflow:auto;}
	.hangMapBox .box-notice {position:static; display:block;}
	.hangMapBox .box-notice br {display:none;}
	.hangMapBox .box-notice >div {text-align:center;}
}
@media all and (max-width:577px) {
	.hangMapScroll .tip {display:block;}
}


/* 조직도 */
.organ_box a {color:#333; text-decoration:none;}
.organ_box .depth1 {position:relative;}
.organ_box .depth1 p a {display:table; width:7.64em; height:7.65em; padding:.88em; margin:0 auto; background:rgba(277,39,107,.06); border-radius:70px; transition:.3s; position:relative;}
.organ_box .depth1 p a:hover {background:rgba(277,39,107,.2);}
.organ_box .depth1 p a:after {content:''; width:1px; height:.88em; background:#CDD2E2; position:absolute; bottom:0; left:50%; z-index:-1;}
.organ_box .depth1 p a span {display:table-cell; font-size:1.4em; font-weight:600; color:#E3276B; text-align:center; background:#fff; border-radius:50px; box-shadow:0 6px 14px rgba(277,39,107,.25); position:relative; vertical-align:middle;}
.organ_box .depth2 {width:50%; padding-top:.58em; margin-left:50%; text-align:right; border-left:1px solid #CDD2E2; position:relative;}
.organ_box .depth2:before {content:''; width:100%; height:1.5em; border:1px solid #CDD2E2; border-top-width:0; border-right-width:0; border-radius:0 0 0 25px; position:absolute; top:.58em; left:-1px; z-index:-1;}
.organ_box .depth2 a {display:inline-block; width:13.5em; height:3em; padding:.6em 0; text-align:center; background:#fff; border:1px solid #D22259; border-radius:30px; transition:.3s;}
.organ_box .depth2 a:hover {color:#D22259;}
.organ_box .depth3 {position:relative; padding-top:1.17em; margin-bottom:2.35em;}
.organ_box .depth3:before {content:''; width:1px; height:1.17em; background:#CDD2E2; position:absolute; top:0; left:50%;}
.organ_box .depth3 >a {display:block; width:7.5em; height:3em; padding:.7em 0; margin:0 auto; font-size:1.17em; font-weight:600; color:#fff; text-align:center; background:#DD560A; border-radius:30px; transition:.3s;}
.organ_box .depth3 >a:hover {background:#ad3e00;}
.organ_box .depth4, .organ_box .depth5 {padding:1.17em; background:#F3F6FE; border-radius:20px;}
.organ_box .depth4 {padding:1.17em .88em .58em; margin-bottom:1.76em;}
.organ_box .depth4:after {content:''; display:block; clear:both;}
.organ_box .depth4 >ul >li {width:33.3333%; padding:0 .29em .58em; float:left;}
.organ_box .depth4 >ul >li >div {background:#fff; border:1px solid #ddd; border-radius:0 10px 0 10px;}
.organ_box .depth4 >ul >li >div >a {display:block; padding:.736em 0; font-weight:600; color:#fff; text-align:center; border-radius:0 0 0 10px;}
.organ_box .depth4 >ul >li >div >a:hover {text-decoration:underline;}
.organ_box .depth4 .dep4_01 {width:33.33333%;}
.organ_box .depth4 .dep4_01 >div {background:#0957AD; border:0;}
.organ_box .depth4 .dep4_02 >div >a {background:#442BA8;}
.organ_box .depth4 .dep4_03 >div >a {background:#8E2C9E;}
.organ_box .depth4 .dep5 >div >a {background:#c51372;}
.organ_box .depth4 >ul >li >div ul {padding:1.17em;}
.organ_box .depth4 >ul >li >div ul:after {content:''; display:block; clear:both;}
.organ_box .depth4 >ul >li >div li {width:50%; padding-left:10px; padding-bottom:5px; float:left; position:relative;}
.organ_box .depth4 >ul >li >div li:before {content:''; width:4px; height:4px; background:#aaa; border-radius:50%; position:absolute; top:12px; left:0;}
.organ_box .depth4 >ul >li >div li a {font-size:14px;}
.organ_box .depth4 >ul >li >div li a:hover {color:#D22259;}
.organ_box .depth4 .dep4_03 >div {min-height:153px;}
.organ_box .depth4 .dep5 {width:100%;}
.organ_box .detail {display:none; position:absolute; top:50%; right:60%; transform:translateY(-50%); z-index:2;}
.organ_box .detail dl {border:1px solid #D22259; background:#f8f8f8; border-radius:10px; overflow:hidden;}
.organ_box .detail dt {padding:.736em 1.17em; color:#fff; background:#D22259; border-radius:0 0 10px 0;}
.organ_box .detail dd {padding:1.17em;}
.organ_box .detail dd .imgWrap {display:inline-block; width:4.7em; height:4.7em; margin-right:1.17em; border-radius:50%; overflow:hidden; vertical-align:middle;}
.organ_box .detail dd .tel {display:inline-block; vertical-align:middle;}
.organ_box .detail dd .tel:before {content:''; display:inline-block; width:2em; height:2em; margin-right:.588em; background:#333 url(../img/sub01/ico_organ_tel.svg) no-repeat 50% 50%; background-size:100% auto; border-radius:50%; vertical-align:middle;}
.organ_box .detail .close {display:block; width:2.94em; height:2.94em; text-indent:-9999px; background:url(../img/sub01/ico_organ_close.svg) no-repeat 50% 50%; overflow:hidden; position:absolute; top:0; right:0;}

@media all and (max-width:1024px) {
.organ_box .depth4 .dep4_02 >div {min-height:263px;}
.organ_box .depth4 .dep4_03 >div {min-height:175px;}
	.organ_box .depth4 >ul >li >div li {width:100%;}
}
@media all and (max-width:768px) {
	.organ_box .depth4 >ul >li {width:50%;}
	.organ_box .detail {right:55%;}
}
@media all and (max-width:640px) {
	.organ_box .depth1 p a {width:100%; height:6em; margin:0 0 .5em;}
	.organ_box .depth2 {width:auto; margin-left:50px;}
	.organ_box .depth3 {padding-top:.58em; margin-left:50px;}
	.organ_box .depth2 a {display:block; width:auto; margin-left:30px;}
	.organ_box .depth3 a {width:auto; height:3em; padding:.6em 0; margin-left:30px; font-size:1em;}
	.organ_box .depth1 p a:after {height:1.38em; left:50px; bottom:-.5em;}
	.organ_box .depth3:before {width:100%; height:2.08em; background:none; border:1px solid #CDD2E2; border-top-width:0; border-right-width:0; border-radius:0 0 0 25px; left:0;}
	.organ_box .detail {right:auto; left:20px;}
	.organ_box .depth4 .dep4_01 {width:100%; float:none;}
}
@media all and (max-width:460px) {
	.organ_box .depth4 >ul >li {width:100% !important; float:none;}
	.organ_box .depth4 >ul >li >div {min-height:auto !important;}
	.organ_box .depth4 >ul >li >div li {width:100%;}
}


.chart_box {margin:0 -.29em; overflow:hidden;}
.chart_box li {width:16.6666%; float:left; padding:0 .29em .58em; }
.chart_box li a {display:block; padding:1em 0; font-weight:600; color:#fff; text-align:center; text-decoration:none; background:#62569F; border-radius:0 10px 0 10px;}
.chart_box li a:hover {text-decoration:underline;}
@media all and (max-width:640px) {
	.chart_box li {width:20%;}
}
@media all and (max-width:460px) {
	.chart_box li {width:33.333333%;}
}

.orgaWrap .detail {display:none; position:absolute; top:0; right:60%; z-index:2;}
.orgaWrap .detail2 {top:12em;}
.orgaWrap .detail dl {border:1px solid #D22259; background:#f8f8f8; border-radius:10px; overflow:hidden;}
.orgaWrap .detail dt {padding:.736em 1.17em; color:#fff; background:#D22259; border-radius:0 0 10px 0;}
.orgaWrap .detail dd {padding:1.17em;}
.orgaWrap .detail dd .imgWrap {display:inline-block; width:4.7em; height:4.7em; margin-right:1.17em; border-radius:50%; overflow:hidden; vertical-align:middle;}
.orgaWrap .detail dd .tel {display:inline-block; vertical-align:middle;}
.orgaWrap .detail dd .tel:before {content:''; display:inline-block; width:2em; height:2em; margin-right:.588em; background:#333 url(../img/sub01/ico_organ_tel.svg) no-repeat 50% 50%; background-size:100% auto; border-radius:50%; vertical-align:middle;}
.orgaWrap .detail .close {display:block; width:2.94em; height:2.94em; text-indent:-9999px; background:url(../img/sub01/ico_organ_close.svg) no-repeat 50% 50%; overflow:hidden; position:absolute; top:0; right:0;}

@media all and (max-width:780px) {
	.orgaWrap .detail {position:fixed; top:50%; left:50%; right:auto; width:295px; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); z-index:10;}
}


.orgaWrap {display:block; position:relative; margin-top:40px;}
.orgaWrap ul,
.orgaWrap li {display:block; position:relative; z-index:0;}
.orgaWrap .item,
.orgaWrap .item2 {display:block; position:relative; text-align:center; margin:0 auto;}
.orgaWrap .item a,
.orgaWrap .item2 a {display:block; position:relative;}
.orgaWrap ul:before,
.orgaWrap ul:after,
.orgaWrap li:before,
.orgaWrap li:after {border: 0px solid #898e9d;}
.orgaWrap .ul-depth2 {margin-top:-2em;}
.orgaWrap .ul-depth1:before {content:""; display:block; position:absolute; left:50%; top:.88em; width:1px; height:16em; border-left-width:1px; z-index:-1;}
.orgaWrap .li-depth1 > .item {width:7.65em; height:7.64em; padding:.88em;}
.orgaWrap .li-depth1 > .item > a {display:flex; justify-content:center; position:static; width:100%; height:100%; align-items:center; background:#fff; box-shadow:0 6px 14px rgba(277,39,107,.25); border-radius:9em;}
.orgaWrap .li-depth1 > .item > a strong {font-size:1.4em; color:#E3276B;}
.orgaWrap .li-depth1 > .item > a strong:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; background:rgba(277,39,107,.06); border-radius:9em; transition:.3s all; -webkit-transition:.3s all;}
.orgaWrap .li-depth1 > .item > a:hover strong:before,
.orgaWrap .li-depth1 > .item > a:focus strong:before {background:rgba(277,39,107,.2);}

.orgaWrap .li-depth1 > .item2 {display:block; position:relative; width:8.7em; top:9em; z-index:3;}
.orgaWrap .li-depth1 > .item2 a {border-radius:9em; padding:.9em 1em; color:#fff; background:#DD560A;}
.orgaWrap .li-depth1 > .item2 a strong {font-size:1.17em;}
.orgaWrap .li-depth1 > .item2 a:hover,
.orgaWrap .li-depth1 > .item2 a:focus {background:#ad3e00;}

.orgaWrap .li-depth2 {padding-top:3.17em;}
.orgaWrap .li-depth2:after {content:""; display:block; clear:both;}

.orgaWrap .li-depth2.side {margin-top:.58em; padding-top:0;}
.orgaWrap .li-depth2.side:before {content:""; display:block; position:absolute; left:50%; top:0; right:0; height:50%; border-radius:0 0 0 25px; border-left-width:1px; border-bottom-width:1px; z-index:-1;}
.orgaWrap .li-depth2.side > .item {float:right; width:13.5em;}
.orgaWrap .li-depth2.side > .item a {padding:.75em 0; font-size:1em; border:1px solid #D22259; background:#fff; color:#333; border-radius:9em;}
.orgaWrap .li-depth2.side > .item strong {font-weight:400; font-size:1em;}

.orgaWrap .ul-depth3 {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:2.35em; padding:.88em; background:#F3F6FE; border-radius:20px;}
.orgaWrap .li-depth3 {width:33.333%; padding:.29em;}
.orgaWrap .li-depth3.ty4 {width:100%;}
.orgaWrap .li-depth3 > .item {z-index:1;}
.orgaWrap .li-depth3 > .item a {padding:.7em 0 .8em; border-radius:0 10px 0 10px; background:#0957AD; color:#fff;}
.orgaWrap .li-depth3 > .item a strong {font-weight:600;}
.orgaWrap .li-depth3.ty2 > .item a {background:#442BA8;}
.orgaWrap .li-depth3.ty3 > .item a {background:#8E2C9E;}
.orgaWrap .li-depth3.ty4 > .item a {background:#c51372;}

.orgaWrap .ul-depth4 {display: block;z-index:0;margin-top: -20px;background:#fff;border:1px solid #ddd;border-top-width:0;border-radius:0 10px 0 10px;padding:30px 20px 20px;}
.orgaWrap .ul-depth4 > li {width:100%;padding: 3px 10px;}
.orgaWrap .ul-depth4 > li:before {content:""; display:block; position:absolute; width:4px; height:4px; background:#aaa; top:50%; margin-left:-2px; left:0;}
.orgaWrap .ul-depth4 a {font-size:.8235294em; color:#333;}
.orgaWrap .ul-depth4 a:hover,
.orgaWrap .ul-depth4 a:focus {color:#D22259;}


@media all and (min-width:1024px) {
	.orgaWrap .ul-depth4 {min-height: 14em;}
	.orgaWrap .li-depth3.ty3 .ul-depth4 {min-height:12em;}
	.orgaWrap .li-depth3.ty4 .ul-depth4 {min-height:auto;}
}

@media all and (max-width:1024px) {
	.orgaWrap .ul-depth4 > li {width:100%;}	
	.orgaWrap .li-depth3 {width:50%;}
}
@media all and (max-width:640px) {
	.orgaWrap .li-depth1 > .item {width:100%; height:5.64em;}
	.orgaWrap .ul-depth1:before,
	.orgaWrap .li-depth2.side:before {left:4em;}
	.orgaWrap .li-depth2.side {padding-left:7em;}
	.orgaWrap .li-depth2.side > .item {width:auto; float:none;}
	.orgaWrap .li-depth2 > .item,
	.orgaWrap .li-depth1 > .item2 {width:auto;}
	.orgaWrap .li-depth1 > .item2 {padding-top:1em;}
	.orgaWrap .ul-depth2 {margin-top:-2.8em;} 
	.orgaWrap .ul-depth3 {margin-top:2em;}
	.orgaWrap .li-depth3.ty1 {width:100%;}
}
@media all and (max-width:460px) {
	.orgaWrap .li-depth3 {width:100%;}
}

/* 팩스번호 안내 */
.fax_box:after {content:''; display:block; clear:both;}
.fax_box >ul {margin:0 -10px;}
.fax_box >ul >li {width:25%; padding:0 10px 20px; float:left;}
.fax_box .inner {border:1px solid #ddd; border-radius:0 10px 0 10px; overflow:hidden;}
.fax_box .inner p {padding:.736em 0; font-weight:600; color:#fff; text-align:center; border-radius:0 0 0 10px;}
.fax_box .style01 .inner p {background:#0957AD;}
.fax_box .style02 .inner p {background:#442BA8;}
.fax_box .style03 .inner p {background:#8E2C9E;}
.fax_box .style04 .inner p {background:#c51372;}
.fax_box .style05 .inner p {background:#c51943;}
.fax_box .style06 .inner p {background:#CE5816;}
.fax_box .inner ul {padding:1.17em;}
.fax_box .style02 .inner ul {min-height:85px;}
.fax_box .style04 .inner ul {min-height:110px;}
.fax_box .inner li {padding-left:10px; padding-bottom:5px; position:relative; font-size:14px;}
.fax_box .inner li:last-child {padding-bottom:0;}
.fax_box .inner li:before {content:''; width:4px; height:4px; background:#aaa; border-radius:50%; position:absolute; top:12px; left:0;}

@media all and (max-width:1024px) {
	.fax_box >ul >li {width:33.3333%;}
}
@media all and (max-width:768px) {
	.fax_box >ul >li {width:50%;}
	.fax_box .style05 .inner ul {min-height:126px;}
}
@media all and (max-width:460px) {
	.fax_box >ul >li {width:auto; float:none;}
	.fax_box .inner ul {min-height:auto !important;}
}

/* 오시는길 */
.mapWrap {position:relative;}
.mapWrap:after {content:'';display:block;border:1px solid #ddd;border-radius:1.176em;position:absolute;top:1.764em;right:0;bottom:0;left: 0;z-index:-1;}
.mapWrap .mapBoxWrap {margin-top:10px;/* margin-right:1.764em; */border-radius:1.176em;overflow:hidden;}
.mapWrap .mapBoxWrap .map_box {margin-top:0; border:0;}
.mapWrap .mapBoxWrap .map_border {display:none;}
.mapWrap .mapInfo {padding: 1.764em 1.764em 1.764em 2.5em;}
.mapWrap .mapInfo >ul >li {padding:.324em 0 .324em 9.176em; margin-bottom:.588em; position:relative;}
.mapWrap .mapInfo >ul >li:last-child {margin-bottom:0;}
.mapWrap .mapInfo >ul >li:before {content:''; display:block; width:2.117em; height:2.117em; background-size:auto !important; border-radius:50%; position:absolute; top:0; left:0;}
.mapWrap .mapInfo >ul >li.add:before {background:#333 url(../img/sub01/ico_map_info01.svg) no-repeat 50% 50%;}
.mapWrap .mapInfo >ul >li.cal:before {background:#333 url(../img/sub01/ico_map_info02.svg) no-repeat 50% 50%;}
.mapWrap .mapInfo >ul >li.fax:before {background:#333 url(../img/sub01/ico_map_info03.svg) no-repeat 50% 50%;}
.mapWrap .mapInfo >ul >li >strong {display:inline-block; position:absolute; top:.324em; left:3.294em;}
.mapTraffic {padding:1.764em 1.764em 1.764em 9.411em; margin-top:2.352em; background:#f8f8f8; border-radius:2.94em 1.176em 1.176em 1.176em; position:relative;}
.mapTraffic .icon {width:5.882em; height:5.882em; background:#fff; border-radius:1.764em; position:absolute; top:-1.176em; left:1.764em; box-shadow:0 4px 16px rgba(0,0,0,.08);}
.mapTraffic .icon img {display:block; position:absolute; top:50%; left:50%; height:3.764em; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
.mapTraffic >p {margin-bottom:.9em;font-size:1.294em; font-weight:600; color:#E3276B;}
.tab_detail {display:none;}

.mapTraffic.bus  ul.bus > li {display:table; width:100%;}
.mapTraffic.bus  ul.bus > li + li {margin-top:10px;}
.mapTraffic.bus  ul.bus > li > strong {display:table-cell;width:150px;border: 1px solid #E3276B;color:#E3276B;padding:5px 10px;vertical-align: middle;text-align: center; border-radius:5px;}
.mapTraffic.bus  ul.bus > li > span,
.mapTraffic.bus  ul.bus > li > ul {display:table-cell; vertical-align: top; padding:10px 15px; word-break:keep-all;}

.map_con .box {height:auto; padding:1em; border:1px solid #7681a8; border-top-width:0; position:relative; left:-1px;}
.map_con .box .title {font-weight:600;}
.map_con .box .body {font-size:.82em;}
.map_con .box .map_call {font-size:.82em; color:#666;}

.map_link {text-align:center;margin-top: 1.5em;display: block;}
.map_link a {display: inline-block;color:#fff;width: 200px;padding: 13px 21px 13px 56px;box-sizing:border-box;background:#fff;border: 1px solid #ddd;border-radius:15px;margin: .2em;}
.map_link .btn_list {color: #333333 !important;}
.map_link a:hover {border: 1px solid #333;;}
.map_link .btn_list:before {content:'';position:absolute;width: 30px;height: 30px;left: 1em;top:1.058em;background:url(/depart/img/sub07/ico_list.svg) no-repeat; top: 10px;}
.map_link .btn_list.kakao:before {background:url(/portal/img/sub01/map_kakao.png) no-repeat;}
.map_link .btn_list.naver:before {background:url(/portal/img/sub01/map_naver.png) no-repeat;}
.conts .map_link a[target="_blank"]:not(.btn):after {display:none;}

@media all and (max-width:640px) {
	.mapWrap:after {display:none;}
	.mapWrap .mapBoxWrap {margin-right:0;}
	.mapWrap .mapInfo {padding:1.764em 0; border-bottom:1px solid #ddd;}
	.mapTraffic {padding:5.8em 1.764em 1.764em;}
	.mapTraffic >p {position:absolute; top:1.7em; left:7em;}
}

@media all and (max-width:441px) {
	.map_link a {margin: .3em;}
}

/* 일반현황 - 상징물 */

.symbol-box, .symbol-box2 {display:block;position:relative;width:100%;border:1px solid #ddd;border-radius:1em;padding:3em;}
.symbol-box .col-2 > div {display:inline-block;vertical-align:middle;width: 100%;}
.symbol-box .col-2 > div:first-child {text-align:center;width: 100%;}
.symbol-box .col-2 > div:last-child  {width: 100%;border-top: 1px dashed #ddd;margin-top: 2em;padding-top: 1em;}
.symbol-box .col-2:after, .symbol-box .color:after{content:''; clear:both; display:block;}
.symbol-box .color {display:table;position:relative;width: 25%;padding: 2% .5%;float:left;}

.symbol-box .color dt, .symbol-box .color dd {display:table-cell; vertical-align:top;}
.symbol-box .color dt {width: 3.5em;}

.symbol-box .color ul li span {display:inline-block;font-weight:700;margin: 0 5px;}
.symbol-box .color ul li span:first-child{margin-left:0;}
.symbol-box .color .chip {width: 2.5em;height: 2.5em;border-radius:3em 3em 0 3em;}
.symbol-box .color:nth-child(1) .chip {background:#1B52A2;}
.symbol-box .color:nth-child(2) .chip {background:#DD0027;}
.symbol-box .color:nth-child(3) .chip {background:#F2C000;}
.symbol-box .color:nth-child(4) .chip {background:#00AA51;}

.symbol-box .blue {color:#1B52A2;}
.symbol-box .red {color:#DD0027;}
.symbol-box .yellow {color:#F2C000;}
.symbol-box .green {color:#00AA51;}

.symbol-box .txt, .symbol-box2 .txt {padding: 2em 0 0;margin-top: 3em;border-top: 1px dashed #ddd;}
.symbol-box2 .col-2 {text-align:center; margin:0 auto;}
.symbol-box3 {position:relative;}
.symbol-box3 img {float:left;}
.symbol-box3:after {content:''; display:block; clear:both;}
.symbol-box3 ul.col-2 >li {width: calc(50% - 15px);float:left;border:1px solid #ddd;border-radius:1em;padding:1em;margin-bottom: 1.5em;margin-right: 1.5em;}
.symbol-box3 ul.col-2 >li:nth-child(2n) {margin-right:0;}
.symbol-box3 ul.col-2 >li .cont {float:left;width: 58%;margin-left: 3%;}
.symbol-box3 ul.col-2 >li .tit {font-size:2rem;font-weight:500;margin:0 0 1.2rem 0;}

@media all and (max-width:1024px) {
.symbol-box3 ul.col-2 >li {width:100%;}
.symbol-box3 ul.col-2 >li .cont {width:65%;}
}

@media all and (max-width:640px) {
.symbol-box .color {width:100%;}
.symbol-box3 img {width:30%;}
}

/* 일반현황 - 캐릭터 */

.character-box ul li {width:calc(50% - 15px); float:left; text-align:center; border:1px solid #ddd; border-radius:1em;padding:1.5em; margin-bottom:15px;}
.character-box ul li:nth-child(2n) {margin-left:15px;}

@media all and (max-width:640px) {
.character-box ul li {width:100%; float:none;}
.character-box ul li:nth-child(2n) {margin-left:0;}
}


/* 교류도시 */
.exch-wrap .marker {display:block; position:absolute;}
.exch-wrap .marker:before{content: '';display: block;width: 30px;height: 30px;position: absolute;background: #e7bbc9;border-radius: 50%;animation: circleSpreaddeep 1600ms infinite linear;}
.exch-wrap .marker.ty2:before{background: #c4c6f9;}
@keyframes circleSpreaddeep {
        0% {transform:translate(-50%, -50%) scale(0.5); opacity: 0.3;}
        50% {opacity: 0.7;}
        100% {transform:translate(-50%, -50%) scale(1); opacity: 0;}
}
.exch-wrap .marker:after {content:'';width:10px;height:10px;background: #D22259;border-radius:50%;position:absolute;bottom:-5px;left:-5px;transition:.2s;}
.exch-wrap .marker.ty2:after {background: #4B4E9A;}
.exch-wrap .marker:hover:after {background:#e37295;}
.exch-wrap .marker.ty2:hover:after {background: #8083d7;}
.exch-wrap .marker span {display:inline-block;padding: .15em 1.25em 0.25em;font-size: .95em;font-weight: 500;color:#fff;white-space:nowrap;background: #D22259;border-radius:1em 1em 1em 0;position:absolute;bottom:1.25em;left:0;z-index:2;}
.exch-wrap .marker.ty2 span {background: #4B4E9A url(../img/sub01/pattern2.png);}
.exch-wrap .marker span.left {border-radius:1em 1em 0 1em; left:auto; right:0;}
.exch-wrap .marker span.btm-right {border-radius:0 1em 1em 1em;top: 1.3em;bottom:auto;}
.exch-wrap .marker span.btm-left {border-radius:1em 0 1em 1em; top:1.25em; bottom:auto; left:auto; right:0;}
.exch-wrap .marker span:before {content:''; width:.625em; height:.625em; background:url(../img/sub01/exchange_marker1.svg) no-repeat 0 0; background-size:contain; position:absolute; top:100%; left:0;}
.exch-wrap .marker.ty2 span:before {background-image:url(../img/sub01/exchange_marker2.svg);}
.exch-wrap .marker span.left:before {left:auto; right:0; transform:scaleX(-1);}
.exch-wrap .marker span.btm-right:before {top:auto; bottom:100%; transform:scaleY(-1);}
.exch-wrap .marker span.btm-left:before {top:auto; bottom:100%; left:auto; right:0; transform:scale(-1);}

.iskeyboard .exch-wrap .marker:focus:before,
.iskeyboard .exch-wrap .marker:focus span {outline:2px dotted red;}

.exch-wrap .city-layer {display:none;width: 500px;max-width: 85%;position:absolute;top: 28%;left:50%;transform:translateX(-50%);z-index:3;}
.exch-wrap .on .city-layer {display:block;}
.exch-wrap .city-layer .layer-box {background:#fff;border-radius:1.11em;box-shadow: 0 0 40px rgb(39 47 119 / 10%);overflow:hidden;position: unset;height: auto;max-width: 100%;transform: unset;padding: 0;}
.exch-wrap .city-layer .tit {padding: .9em 1.36em;font-size: 1.2em;font-weight:700;background:#F7F9FC;text-align: left;line-height: 1.3;}
.exch-wrap .city-layer .txt {padding: 1.3em 2em 1.9em;position:relative;}
.exch-wrap .city-layer .txt .img-wrap {position:absolute; top:2em; left:2em;}
.exch-wrap .city-layer .txt .img-wrap + .list-ul {padding-left:130px; margin-top:0;}
.exch-wrap .city-layer .txt .list-ul {font-size: 1em;}
.exch-wrap .city-layer .txt .list-ul li {position:relative;padding-left:7em;}
.exch-wrap .city-layer .txt .list-ul.ty2 li {padding-left:8em;}
.exch-wrap .city-layer .txt .list-ul span {font-weight: 500;position:absolute;left: 1.11em;}
.exch-wrap .city-layer .btn .selected {display:none; position:absolute; top:0; left:0; z-index:-999; overflow:hidden; width:0; height:0; opacity:0;}
.exch-wrap .city-layer .btn.on .selected {display:block;}
.exch-wrap .city-layer .close {display:block;position:relative;width: 2.5em;height: 2.5em;background: #37375b url(../img/sub01/btn_familysite_close.svg) no-repeat 50% 50%;background-size:contain;text-indent:-999px;overflow:hidden;position:absolute;top: -1.25em;right: .5em;z-index:1;border-radius: 2em;}

.exch-hae .tip.mo, .exch-guk .tip.mo {display:none;}
.exch-hae .exch-wrap {width:61.11em; height:33.33em; background:url(../img/sub01/exchange_map1.png) no-repeat; background-size:contain; position:relative;}
.exch-hae .marker.map01 {top:33.5%; left:7.5%;}
.exch-hae .marker.map02 {top:44%; left:39%;}
.exch-hae .marker.map03 {top:43%; left:40%;}
.exch-hae .marker.map04 {top:41%; left:44%;}
.exch-hae .marker.map05 {top:40%; left:45%;}
.exch-hae .marker.map06 {top:39%; left:70%;}
.exch-hae .marker.map07 {top:40%; left:74%;}
.exch-hae .marker.map08 {top:38%; left:81%;}
.exch-guk .exch-wrap {width:26.66em; height:38.88em; margin:0 auto; background:url(../img/sub01/twintowns_map.png) no-repeat; background-size:contain; position:relative;}
.exch-guk .marker.map01 {bottom: 17%;left: 23%;}
.exch-guk .marker.map02 {top: 23.5%;left:26%;}
.exch-guk .marker.map03 {top: 30%;right: 24%;}
.exch-guk .marker.map04 {bottom: 17%;left: 7%;}
.exch-guk .marker.map05 {top: 44%;left: 44%;}
.exch-guk .marker.map06 {top: 48%;left: 24%;}
.exch-guk .marker.map07 {top:42%; left:69%;}
.exch-guk .marker.map08 {top: 25%;right: 23%;}
.exch-guk .marker.map09 {top:59%; left:62%;}
.exch-guk .marker.map10 {top:69.5%; left:77%;}
.exch-guk .marker.map11 {top:71%; left:21.5%;}
.exch-guk .marker.map12 {top:96%; left:25%;}

.city-marker {padding:.6em;background:#fff;border: 1px solid #ddd;border-radius:10px;overflow:hidden;position:absolute;}
.city-marker li {padding: 0.2em .5em 0.4em 2.2em;font-weight: 500;position:relative;float: left;font-size: .9em;}
.city-marker li:before {content:'';width: 1em;position:absolute;top:.5em;bottom:.5em;left:.5em;background:#CF336B;border-radius:3px;}
.city-marker li.ty2:before {background: #4b4e9a;}
.city-marker li span {display:block; padding-top:.5em; font-size:.88em; font-weight:400; color:#666; line-height:1.5;}
.exch-hae .exch-box {position:relative;}
.exch-hae .city-marker {width:25em; bottom:1.11em; right:0;}
.exch-hae .city-marker li {width:50%; float:left;}
.exch-guk .exch-box {position:relative;margin-bottom:1.11em;}
.exch-guk .city-marker {width: 13em;bottom:0;right:0;}
.exch-guk .tip.mo {margin-top: 0 !important;}

.city-info-top {margin-top: 5em;}

@media all and (max-width:1024px) {
	.exch-hae .tip.mo {display:block;}
	.exch-box {overflow-X:auto;}
}
@media all and (max-width:768px) {
	.exch-hae .city-marker {right:auto; left:0;}
	.exch-guk .city-marker {width:auto; margin-top:1.11em; position:static;}
	.exch-guk .city-marker li {width:50%; float:left;}
	.city-info-top {margin-top: 1em;}
}
@media all and (max-width:480px) {
	.exch-guk .tip.mo {display:block;}
}

/* 광주의노래 */
.GwangjuSong {background:#f1f3f4;border-radius: 1em;margin-top: .5em;}

/* 기부자 명예의 전당 */
.donate-top {padding:2.94em 2em; margin-bottom:2em; text-align:center; background:url(../img/sub05/donat_bg.jpg) no-repeat 50% 0; border-radius:1.17em;}
.donate-top p {padding-top:1.5em; font-size:1.05em; color:#fff;}
.donate-top p .mo,
.donate-top p .ta {display:none;}
.donate-list {margin:.7em -.58em 0;}
.donate-list li {width:33.3333%; float:left; padding:0 .58em 1.17em;}
.donate-list .item {padding-top:3.9em; text-align:center; background:url(../img/sub05/donat_star.png) no-repeat 50% 1.76em; border:1px solid #DEE4EB; border-radius:1.17em 1.93em 1.17em 1.17em; overflow:hidden; position:relative;}
.donate-list .item:before,
.donate-list .item:after {content:''; width:3.41em; height:7.05em; background:url(../img/sub05/donat_leaf.svg) no-repeat 0 50%; background-size:contain; position:absolute; top:3.17em; left:1.76em; z-index:-1;}
.donate-list .item:after {transform:scaleX(-1); -webkit-transform:scaleX(-1); left:auto !important; right:1.76em;}
.donate-list .item .print {display:block; width:2.7em; height:2.7em; position:absolute; top:.58em; right:.58em; background:#949494 url(../img/sub05/donat_print.svg) no-repeat 50% 50%; background-size:cover; border-radius:50%; overflow:hidden; text-indent:-999px; transition:.2s;}
.donate-list .item .print:hover {background-color:#666;}
.donate-list p {height:1.5em; margin:0 1em; font-weight:600; line-height:1.5; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.donate-list .name {margin-bottom:.2em; font-size:1.41em;}
.donate-list .date {display:inline-block; padding:.3em 1.2em; margin:1.4em 0 1.5em; font-size:.82em; font-weight:200; color:#666; background:#F4F4F4; border-radius:30px;}
.donate-list .dona {padding:.63em; font-size:1.17em; font-weight:500; color:#fff; background:linear-gradient(to right, #9F1D39 30%, #C23341 100%);}
.donate-list .dona span {display:inline-block; margin-right:.5em; font-size:.9em; color:#FFE3BF; line-height:1;}
.donate-list .dona span:after {content:''; width:2px; height:1em; margin-left:.5em; float:right; background:rgba(255, 227, 191, .8);}
.donate-list .company.anonymity {font-size: 1.41em; margin: .632em auto;}

@media all and (max-width:1024px) {
	.donate-list .dona {font-size:1em;}
}
@media all and (max-width:768px) {
	.donate-top p .ta {display:block;}
	.donate-list li {width:50%;}
}
@media all and (max-width:480px) {
	.donate-top p .mo {display:block;}
	.donate-list {margin:.7em -.3em 0;}
	.donate-list li {padding:0 .3em .6em;}
	.donate-list .item {padding-top:3.2em; background-position:50% 1.2em; border-radius:1em 1.7em 1em 1em;}
	.donate-list .item:before,
	.donate-list .item:after {height:6em; top:2.8em; left:1.2em;}
	.donate-list .item:after {right:1.2em;}
	.donate-list .item .print {width:2.4em; height:2.4em; top:.5em; right:.5em;}
	.donate-list .name {font-size:1.3em;}
	.donate-list .date {margin-top:1.2em;}
	.donate-list .dona span {display:block; margin-right:0; margin-bottom:.3em;}
	.donate-list .dona span:after {display:none;}
}
@media all and (max-width:400px) {
	.donate-list li {width:100%;}
}