@charset "UTF-8";

/*****************************************************************/
/*지방통계청 - Sub Content */
/*2022-08 */
/*****************************************************************/
/* 인사말 지청장사진없을경우 20230320 */
.z_greeting{position:relative; display:block; width:100%}
.greeting_box{display:block; width:100%; height:196px; line-height:196px; font-size: 24px; color:#000;  text-align:center; background:url('../../img/region/greeting_bg01.png') no-repeat left center/ cover}
.greeting_box span{position:relative; display:inline-block; }
.greeting_box span::before{content:""; position:absolute; display:block; top:40%; left:-35px;  width:31px; height:26px; background:url('../../img/region/upper_01.png') no-repeat center}
.greeting_box span::after{content:""; position:absolute; display:block; top:40%; right:-30px;  width:31px; height:26px; background:url('../../img/region/upper_02.png') no-repeat center}

.greeting_box strong{font-size:28px; color:#0052c1; font-weight:500}

.z_greeting ul{position:relative; display:table; width:100%;  margin:30px auto 0 auto}
.z_greeting li:nth-child(1){display:block; float:right; width:calc(100% - 270px)}
.z_greeting li:nth-child(1) p{margin-bottom:10px; word-break:keep-all}
.z_greeting li:nth-child(2){display:block; float:left; width:270px; text-align:center; font-size:16px; font-weight:500;}
.z_greeting li:nth-child(2) strong{font-size:22px; font-weight:500; color:#000 }
.z_greeting ul:after{content:""; clear:both}

@media only screen and (max-width: 850px) {
.z_greeting li:nth-child(1){float:none; width:100%}
.z_greeting li:nth-child(2){float:none; width:100%; text-align:right}
.z_greeting li:nth-child(1) p br{display:none}
}

@media only screen and (max-width: 750px) {
.greeting_box{padding:30px; height:auto; line-height:35px; font-size: 24px; box-sizing:border-box; word-break:keep-all}
.greeting_box span::before{display:none}
.greeting_box span::after{display:none}
}

/* 지방청인사말 */
.sub_greeting{display:block; width:100%; padding:40px 30px 10px 30px; border:1px solid #e5eaf0; box-sizing:border-box; background: url('../../img/region/greeting_bg02.png') no-repeat left top,  url('../../img/region/greeting_bg03.png') no-repeat right bottom #f8fbff }
.sub_greeting p{margin-bottom:10px}
.sub_greeting p.name{color:#000; font-weight:500; text-align:right}
.sub_greeting p.name strong{font-weight:600; font-size:20px}

/* 인사말 */
.greetingArea { display:flex; }
.greetingArea .zGreeting { flex-grow: 1; flex-shrink: 1; flex-basis: 0; margin-right: 50px; }
.greetingArea .zGreeting h2 { font-size: 24px; line-height: 1.3; padding-bottom: 10px; }
.greetingArea .zGreeting p { line-height: 1.5; }
.greetingArea .imgGreeting{ width: 450px; margin: 0 auto; }
.greetingArea .imgGreeting img{ display: block; width: 100%; height: auto; }

.zName { font-size: 18px; padding: 20px 0; }
.zName > b { font-size: 22px; padding-left: 5px; }

@media only screen and (max-width: 1024px) {
	.greetingArea .zGreeting{ margin-right: 20px; }
	.greetingArea .imgGreeting{ width: 300px; }
}

@media only screen and (max-width: 800px) {
	.greetingArea .zGreeting h2 br { display:none; }
}

@media only screen and (max-width: 650px) {
	.greetingArea{ flex-direction: column-reverse; }
	.greetingArea .zGreeting{ margin-right: 0; }
	.greetingArea .zGreeting h2 { font-size:20px; }
	.greetingArea .imgGreeting{ width: 100%; max-width: 450px; }
}

/* 기존 인사말 */
/*
.zGreeting { padding: 30px; }
.zGreeting h2 { font-size: 24px; line-height: 1.3; padding-bottom: 10px; }
.zGreeting sapn { }
.zGreeting p { line-height: 1.3; }

.zName { font-size: 18px; padding: 20px 0; display: flex; align-items: center; }
.zName > b { font-size: 22px; padding-left: 5px; }
.zName > span { color: transparent; background-image: url("../img/img_sub/greetingSign_db.gif"); background-repeat: no-repeat; width: 80px; height: 50px; background-position: center; display: inline-block; margin-left: 10px; }

@media only screen and (max-width: 1640px) {
	.zGreeting { background-size: 320px auto; background-position: 100% center; padding: 30px 0; }
}

@media only screen and (max-width: 870px) {
	.zGreeting { background-image: none; }
}
*/

/* 미션및비전 */
.mv_db { padding-top: 20px; }
.mv_db .mission_tit {width: 76%;margin-right:auto;  margin-left:auto; margin-bottom:25px; background: #d2e8ff; ; text-align: center; padding: 15px 25px; border-radius: 150px; font-size: 18px; font-weight: 500; }
.mv_db .vision_tit {position: relative; padding-bottom:30px;}
.mv_db .vision_tit span {display: block;  width: 76%; margin:0 auto; padding: 11px 25px; text-align: center; border-radius: 50px; font-size:18px; background: #ffffff;border: 4px solid #ededed;}
.mv_db .vision_tit::after{ content: ''; display: block; position: absolute; left: 50%; top: 0; width: 3px; height: 90px; border-left: 2px solid #dddddd; box-sizing: border-box; z-index: -1;}

.mv_db .mv_box {display:flex;width:100%;padding-top:30px; position: relative;}
.mv_db .mv_box::before {content: '';display: block;position: absolute;left: 13%;top: 0;width: 74%;height:3px;border-top: 2px solid #dddddd;box-sizing: border-box;/* z-index: -1; */}

.mv_db .mv_box dl {width:23%; margin:0 1%; position: relative;}
.mv_db .mv_box dl::before{content: ''; display: block; position: absolute; left: 50%; top: -30px; width: 3px; height: 85px; border-left: 2px solid #dddddd; box-sizing: border-box; z-index: -1;}
.mv_db .mv_box dl:nth-child(1)::before{left:52%;}
.mv_db .mv_box dl:nth-child(4)::before{left:48%;}
.mv_db .mv_box dl:last-child {margin-right:0;}
.mv_db .mv_box dl dt {text-align: center; padding:12px 5px; word-break: keep-all; margin-bottom:6px; color:#ffffff; border-radius: 7px 7px 0 0; font-size: 16px; line-height: 1.2; }
.mv_db .mv_box dl dd {width:100%; height:calc(100% - 61px); box-sizing: border-box; border:1px solid #dddddd; background:#fff;}
.mv_db .mv_box dl dd ul {padding: 10px 10px 10px 5px; min-height: 130px;}

.mv_db .mv_box dl:nth-child(1) dt {background:#97d392; color: inherit;}
.mv_db .mv_box dl:nth-child(2) dt {background:#79bac9; color: inherit;}
.mv_db .mv_box dl:nth-child(3) dt {background:#4f5297;}
.mv_db .mv_box dl:nth-child(4) dt {background:#f1b591; color: inherit;}

p.titleBar { vertical-align: middle; padding: 9px 0; text-align: center; color: #223c5c; font-weight: 600; position: relative; font-size: 22px; }
p.titleBar::before { position: absolute; width: 15px; height: 2px; background-color: #2481b5; content: ""; left: 50%; top: 0; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%) }

@media only screen and (max-width: 850px) {
	.mv_db .vision_tit::after{height:85px;}
	 .mv_db .mv_box dl dd ul {padding: 5px 5px 5px 1px;}
}

@media only screen and (max-width: 650px) {
    .mv_db .mission_tit {width:90%; font-size:16px; margin-bottom:15px; padding:10px 5%; border-radius: 5px; word-break: keep-all;}
    .mv_db .vision_tit {padding:0;}
    .mv_db .vision_tit span {width:90%; font-size:16px; padding:10px 4%; border-radius: 5px; word-break: keep-all;}
    .mv_db .vision_tit::after {top:100%;left:50%;}
    .mv_db .mv_box{flex-direction:column;}
    .mv_db .mv_box::before {display:none;}
    .mv_db .mv_box dl {width:100%; margin:0 0 10px 0 !important;  padding:0;}
    .mv_db .mv_box dl::before {display:none;}
    .mv_db .mv_box dl dt {font-size:16px; text-align: left; padding:12px 15px; margin:0; border-radius:5px 5px 0 0;}
    .mv_db .mv_box dl dt br {display: none;}
	.mv_db .mv_box dl dd{height:auto; border-radius:0 0 5px 5px;}
    .mv_db .mv_box dl dd ul {min-height: inherit;}
}

/* 연혁 */
.history_list { }
.history_list > li {display: flex; width: 100%;}
.history_list li > h2 { width: 260px; font-size: 24px; padding-top: 24px; position: relative; }
.history_list li > h2::before { content: ""; position: absolute; width: 12px; height: 2px; background-color: #4b91e1; left: 0; top: 14px; }
.history_list li > .h_group { flex-grow: 1; flex-shrink: 1; flex-basis: 0; box-sizing: border-box;}
.history_list dl { display: flex; align-items: baseline; padding: 15px 0; border-bottom: 1px dashed #e1e1e1; }
.history_list dl dt { width: 155px; text-align: left; font-weight: 500; }
.history_list dl dd { flex-grow: 1; flex-shrink: 1; flex-basis: 0; text-align: left; font-size: 14px; word-break: keep-all; position: relative; }
.history_list dl dd .bsListin{margin:0;}

.history_list > li:nth-child(1) {margin-bottom: 40px;}

.history_list .pd_none {padding: 0;}

@media only screen and (max-width: 1200px) {
	.history_list dl dt { width: 100px; }
}

@media only screen and (max-width: 768px) {
    .history_list > li {display: block;}
	.history_list > li:nth-child(1){margin-bottom: 20px;}
    .history_list li > h2 { width: 100%; margin-bottom: 15px; }
    .history_list li > .h_group { width: 100%; padding-left: 0;}
    .history_list dl{padding: 10px 0;}
	.history_list dl:first-child{border-top: 1px dashed #e1e1e1;}
	.history_list dl dt{width: 80px;}
}

@media only screen and (max-width: 450px) {
	.history_list dl{flex-direction: column;}
	.history_list dl dt{width: 100%; margin-bottom:5px; padding-left: 10px;}
}

/* 조직도  */
#org_db {width: 93.5%;display: flex;flex-wrap: wrap;position: relative;}
#org_db dt { width: 63%; position: relative;}
#org_db dt a { display: block; width: 255px; height: 50px; background: #0a79b8; color: #fff;  text-align: center; border-radius: 30px; font-weight: 500; padding: 15px 10px; box-sizing: border-box; position: absolute; left: 26%; top: 115px; line-height: 1.2; }
#org_db dt a::before { content: ''; display: block; position: absolute; left: 100%; top: 48%; width: 100%; height: 3px; border-top: 2px solid #eee; box-sizing: border-box; z-index:-1;}
#org_db dt a::after { content: ''; display: block; position: absolute; left: 50%; top: 100%; width: 3px; height: 235px; border-left: 2px solid #eee; box-sizing: border-box; }

#org_db dd#org00 {position: absolute;top: 310px;margin-left: 29%;width: 68%; left:0;}
#org_db dd#org00 a {display: block;width: 250px;height: 50px;background: #ffffff;color: #0a79b8;text-align: center;border-radius: 30px;font-weight: 500;padding: 14px 10px;box-sizing: border-box;border: 2px solid #0a79b8;float: right;}
#org_db dd#org00::before {content: '';display: block;position: absolute;left: 0;top: 50%;width: 66%;height: 3px;border-top: 2px solid #eee;box-sizing: border-box;z-index: -1;}
#org_db dd#org00::after {content: '';display: block;position: absolute;left: 82%;top: 50px;width: 3px;height: 40px;border-left: 2px solid #eee;box-sizing: border-box;}


#org_db dd#org01 { width: 37%; position: relative; }
#org_db dd#org01::before { content: ''; display: block; position: absolute; left: 0; top: 26px; width: 3px; height: 232px; border-left: 2px solid #eee; box-sizing: border-box; }

#org_db dd#org01 li { margin-bottom: 10px; padding-left: 50px; position: relative; z-index:1; }
#org_db dd#org01 li:last-child { margin-bottom: 0;}
#org_db dd#org01 li::before { content: ''; display: block; position: absolute; left: 0; top: 23px; width: 50px; height: 3px; border-top: 2px solid #eee; z-index:-1; }
#org_db dd#org01 a { display: block; width: 100%; height: 48px; text-align: center; background: #dde8f2; padding: 15px 10px; box-sizing: border-box; color: inherit; }

.orgGroup {}
.orgGroup #org02 {width: 56%;margin-top: 120px;position: relative; float:left;}
.orgGroup #org02::before { content: ''; display: block; position: absolute; left: 12%; top: 0; width: 76.5%; height: 3px; border-top: 2px solid #eee; box-sizing: border-box; }
.orgGroup #org02 ul { display: flex; justify-content: space-between;  }
.orgGroup #org02 li { width: 23%; padding-top: 40px; position: relative; }
.orgGroup #org02 li::before { content: ''; display: block; position: absolute; left: 50%; top: 0px; width: 3px; height: 40px; border-left: 2px solid #eee; box-sizing: border-box; }
.orgGroup #org02 li a { word-break: keep-all; text-align: center; display: block; border: 2px solid #d1d1d1; box-sizing: border-box; padding: 13px 5px; overflow: hidden; color: inherit; background:#fff; }

.orgGroup #org03 {width: 42%;margin-top: 120px;position: relative; float:right;}
.orgGroup #org03::before { content: ''; display: block; position: absolute; left: 16%; top: 0; width: 69.5%; height: 3px; border-top: 2px solid #eee; box-sizing: border-box; }
.orgGroup #org03 ul { display: flex; justify-content: space-between;  }
.orgGroup #org03 li { width: 31%; padding-top: 40px; position: relative; }
.orgGroup #org03 li::before { content: ''; display: block; position: absolute; left: 52%; top: 0px; width: 3px; height: 40px; border-left: 2px solid #eee; box-sizing: border-box; }
.orgGroup #org03 li a { word-break: keep-all; text-align: center; display: block; border: 2px solid #d1d1d1; box-sizing: border-box; padding: 13px 5px; overflow: hidden; color: inherit;}

/* 조직안내 > 조직·기능 > 지방통계청 사무소 */
.orgGroup { display: flex; align-items: flex-start; justify-content: space-between; }
.orgJibang { text-align: center; width: 19.7%; }
.orgJibang a { color: inherit; }
.orgJibang a:hover,
.orgJibang a:focus { color: #5c56b3; }
.orgJibang > a {background-color: #f6f9ff; border-top: solid 1px #b5b5b5; border-bottom: solid 1px #b5b5b5; font-weight: 600; padding: 20px 0; display: block; }
.orgJibang > ul { background-color: orange; }
.orgJibang > ul > li { padding: 12px 0; background-color: #f8fcff; }
.orgJibang > ul > li:nth-of-type(odd) { padding: 12px 0; background-color: #ffffff; }

@media screen and (max-width: 1639px) {
	#org_db dd#org00{margin-left:32%;}
}

@media screen and (max-width: 1200px) {
	#org_db dd#org00{margin-left:29%;}
}

@media screen and (max-width: 1080px) {
	#org_db{width:100%;}
    #org_db dt { width: 50%;}
    #org_db dt a {left:10%; width:80%; max-width:80%; z-index:1;}
    #org_db dt a::before{top:49%;}
	#org_db dt::before{width:80%; left:20%; top:50%;}
    #org_db dt::after {left:50%; top:140px; height:260px;}
    #org_db dd#org00 {width: 100%; margin-left:0;}
    #org_db dd#org00 a {width: 42.2%;}
    #org_db dd#org00::after {left: 78.9%;}
    #org_db dd#org00::before {left:25%;}
    #org_db dd#org01 { width: 50%; }
	#org_db dd#org01 a{width:100%;}
	#org_db dd#org01::before{top:24px;}
	#org_db dd#org01 li::before{top:50%;}
    .orgGroup #org02 {width: 56.8%;}
	.orgGroup #org02 ul{background:#fff;}
	.orgGroup #org02 li { width: 23.8%;}
    .orgGroup #org02 li a {padding: 10px 0; line-height: 1.2; word-break:break-all;}
    .orgGroup #org03 {width:42.2%;}
	.orgGroup #org03 ul{background:#fff;}
	.orgGroup #org03 li { width: 32%;}
    .orgGroup #org03 li a {padding: 10px 0; line-height: 1.2; word-break:break-all;}
}

@media screen and (max-width: 650px) {
	#org_db dt{width:48%;}
	#org_db dt a{top:95px; left:0; width:90%; max-width:90%;}
	#org_db dt a::after{height:412px;}
	#org_db dt a::before{top:50%;}
	#org_db dd#org00{top:275px;left:auto;right:0;padding-left:55%;}
	#org_db dd#org00::before{left:auto;right:0;width:78%;}
	#org_db dd#org00::after{left:76.9%;}
	#org_db dd#org00 a{width:100%;padding:14px 5px;font-size:14px;}
	#org_db dd#org01{width:52%;}
	#org_db dd#org01::before{top:22px;height:198px;}
	#org_db dd#org01 li{padding-left:15%;}
	#org_db dd#org01 li::before{width:15%;}
	#org_db dd#org01 a{height:40px;font-size:14px;}

	.orgGroup{ display: flex; align-items: flex-end; justify-content: space-between; flex-direction: column-reverse;}
	.orgGroup #org02,.orgGroup #org03{width:52%;}
	.orgGroup #org02 ul,.orgGroup #org03 ul{flex-direction: column;}
	.orgGroup #org02 li,.orgGroup #org03 li{width:100%;padding-top:10px;padding-left:15%;}
	.orgGroup #org02 li:first-child,.orgGroup #org03 li:first-child{padding-top:0;}
	.orgGroup #org02 li a,.orgGroup #org03 li a{font-size:14px;}
	.orgGroup #org02{margin-top:50px;}
	.orgGroup #org02::before{left:auto;right:100%;top:23px;width:51%;}
	.orgGroup #org02 ul{position:relative;}
	.orgGroup #org02 ul::before{content:'';position:absolute;top:23px;left:0;width:2px;height:148px;background:#eee;}
	.orgGroup #org02 li{z-index:1;}
	.orgGroup #org02 li::before{left:0;top:55%;width:40px;height:3px;border-top:2px solid #eee; z-index:-1;}
	.orgGroup #org03{margin-top:100px;}
	.orgGroup #org03::before,
	.orgGroup #org03 li::before{content:none;}
}

@media screen and (max-width: 400px) {
	#org_db dt a{padding:18px 5px; font-size:14px;}
	#org_db dd#org01 a{padding:10px 0;}
}

/* 조직안내 > 조직·기능 > 지방통계청 사무소 */
@media only screen and (max-width: 660px) {
	.orgGroup { flex-wrap: wrap; }
	.orgGroup::after { content: ""; width: 33%; }
	.orgJibang { width: 33%; }
}