@charset "utf-8";

.flex-con {display: flex; justify-content: space-between;}
.flex-con .sub-sec {margin-top: 0 !important;}

.greeting .tit { position:relative; padding-bottom:3rem; margin-bottom:3rem; text-align:center; }
.greeting .tit::before, .greeting .tit:before { position:absolute; left:50%; bottom:0; display:block; width:5.5rem; height:2px; margin-left:-27.5px; background:#131313; content:''; }
.greeting .txt1, .greeting .txt1 span { font-size:4rem; color:#131313; font-weight:600; letter-spacing:-1px; vertical-align:bottom; }
.greeting .txt1 span { padding:8px; font-size:8rem; color:#d3d3d3; line-height:3rem; }
.greeting .txt2 { margin-top:5px; font-size:2.5rem; }
.greeting .txt2 span { color:#3371be; font-weight:600; }
.greeting p { margin-top:2rem; line-height:170%; }
.greeting .name { margin-top:6rem; font-size:2rem; text-align:right; }
.greeting .name span { font-size:6rem; }

.location .map { overflow:hidden; width:100%; margin-top:1rem; border:1px solid #ccc; }

.history { margin-top:2rem; }
.history li { position:relative; }
.history dl { position:relative; padding-left:9rem; }
.history dt { position:absolute; left:1rem; top:0.5rem; font-weight:bold; font-size:1.8rem; color:#0e50a2; font-family:verdana; }
.history dd { position:relative; padding:0.8rem 0px; padding-left:7rem; }
.history dd.nodate { padding-left:2rem; }
.history dt+dd { border-top:0px; }
.history dd .date { position:absolute; left:0px; font-weight:bold; color:#3371be; }

/***** 주민자치회 조직도 *****/
.organ { text-align:center; }
.organ>li.rank1 { position:relative; width:138px; height:138px; margin:0 auto; border-radius:100%; background:#2b61b6 url(/open_content/dong/images/sub/organ_bg.png); }
.organ>li.rank1 p { position:absolute; line-height:1.2; transform:translateY(-50%); top:50%; width:100%; color:#fff; font-size:20px; font-weight:bold; }
.organ>li.rank2 { position:relative; padding:3% 0; }
.organ>li.rank2 p { text-align:center; width:20.5%; margin:0px auto 12px; padding:10px; border:1px solid #2b61b6; color:#2b61b6; font-size:16px; font-weight:bold; background:#fff; }
.organ>li.rank2:before { content:''; display:block; position:absolute; top:0; left:50%; width:1px; height:100%; background:#ddd; z-index:-1; }
.organ>li.rank2>ul { position:relative; width:80%; margin:0 auto; font-size:0; }
.organ>li.rank2>ul:after { content:''; position:absolute; top:50%; left:20%; right:20%; height:1px; background:#ddd; }
.organ>li.rank2>ul>li { display:inline-block; vertical-align:middle; }
.organ>li.rank2>ul>li:first-child { margin:0 auto; padding-right:42%; }
.organ>li.rank2>ul>li>p { position: relative; width:auto; margin:0; background: #fff; z-index: 1;}
.organ>li.rank2>p { position:relative;}
.organ>li.rank2>p:after { content:''; display:block; position:absolute; top:50%; height:1px; background:#ddd; }
.organ>li.rank2>p.organ_left{ margin-left:10%; }
.organ>li.rank2>p.organ_left:after { left:calc(100% + 1px); width:97%; }
.organ>li.rank2>p.organ_right { margin-right:10%; }
.organ>li.rank2>p.organ_right:after { right:calc(100% + 1px); width:96%; }
.organ>li.rank3 { padding-top:30px; }
.organ>li.rank3>ul { position:relative; }
.organ>li.rank3>ul:before { left:14.9%; width:70.3%; }
.organ>li.rank3>ul.col2:before { left:27.8%; width:44.5%; }
.organ>li.rank3>ul.col3:before { left:21.5%; width:57%; }
.organ>li.rank3>ul.col5:before { left:13%; width:74%; }
.organ>li.rank3>ul:before,
.organ>li.rank3>ul.col3:before,
.organ>li.rank3>ul.col5:before,
.organ>li.rank3>ul>li:before { content:''; display:block; position:absolute; top:-30px; height:1px; background:#ddd; }
.organ>li.rank3>ul>li { position:relative; display:inline-block; vertical-align:top; width:21%; margin:0 1%; }
.organ>li.rank3>ul>li:before { top:-30px; left:50%; width:1px; height:30px; }
.organ>li.rank3>ul.col2>li { width:42%; }
.organ>li.rank3>ul.col3>li { width:26%; }
.organ>li.rank3>ul.col5>li { width:16%; }
.organ>li.rank3>ul>li>p { padding:10px; color:#fff; background:#777; }
.organ>li.rank3>ul>li>ul>li { margin-top:10px; padding:10px; border:1px solid #ddd; background:#fff; }
.organ>li.rank3>ul>li>ul>li .mem { margin-top:7px; font-size:13px; letter-spacing:-1px; }


@media screen and (min-width:769px){
	.history { padding-left:220px;  min-height:182px; background:url(/dong/img/sub/history_bg.gif) no-repeat left 10%; }
	.history dl:before { display:block; content:''; position:absolute; left:93px; top:16px; width:1px; height:100%; border-left:1px dashed #3371be; }
	.history dd:before { display:block; content:''; position:absolute; left:0px; top:16px; width:8px; height:8px; border-radius:15px;  background:#3371be; }
	.history li:last-child dl dd:last-child:after { display:block; content:''; position:absolute; left:0px; top:24px; width:10px; height:55px; background:#fff}
	.history dd p { padding-left:15px;}
	.history.gajeong1 { padding-top:20px; padding-bottom:40px; }
	.history.gajeong2 { padding-top:25px; padding-bottom:60px; }
	.history.gumdan3 { padding-bottom:10px; }
}

@media screen and (max-width:768px){	
	.history li { padding:10px 0px 5px; border-top:1px solid #dcdcdc}
	.history li:first-child { border-top:0px solid #dcdcdc}
	.history dl { padding-left:0px; }
	.history dt { position:static; }
	.history dd { padding-left:60px; border-bottom:1px dotted #dcdcdc; }
	.history dd:last-child { border-bottom:0px; }	
	
	.organ:before { height:32%; }
	.organ>li.rank2>ul,
	.organ>li.rank2>p,
	.organ>li.rank2>p.organ_right,
	.organ>li.rank2>p.organ_left{ width:auto; margin-right:0; margin-left:0; }
	.organ>li.rank2>ul>li { width:100%; padding-right:0; margin:2% 0; }
	.organ>li.rank3 { padding-top:0; }
	.organ>li.rank2>ul:after,
	.organ>li.rank2>p.organ_left:after,
	.organ>li.rank2>p.organ_right:after,
	.organ>li.rank3>ul:before,
	.organ>li.rank3>ul.col3:before,
	.organ>li.rank3>ul.col5:before,
	.organ>li.rank3>ul>li:before,
	.organ>li.rank3>ul.col3>li:before,
	.organ>li.rank3>ul.col5>li:before { display:none; }
	.organ>li.rank3>ul>li,
	.organ>li.rank3>ul.col2>li,
	.organ>li.rank3>ul.col3>li,
	.organ>li.rank3>ul.col5>li{ width:98%; margin:2% 1%; }
	
	.flex-con {flex-direction: column; gap: 2rem}
}