@charset "UTF-8";

/*****************************************************************/
/*지방통계청 - Sub Content */
/*2022-08 */
/*****************************************************************/

b { font-weight: 600; }
/* 인사말 지청장사진없을경우 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}

/* 도서관이용안내 */
.narasem {}
.narasem > article { margin-bottom: 30px; }
.narasem > article .librBox { margin-bottom: 20px; }
.narasem > article .librBox > p { padding-bottom: 3px; }
.narasem > article .smallBox { border: solid 1px #eaeaea; background-color: #fbfbfb; padding: 20px; margin-bottom: 5px; }

.narasemUse { display: flex; flex-wrap: wrap; justify-content: space-between; }
.narasemUse > article { width: 31%; position: relative; border: solid 1px #d6d6d6; border-radius: 6px 6px 0 0; }
.narasemUse > article::after { height: 24px; width: 15px; background-image: url("../img/img_sub/mvArrow.png"); background-repeat: no-repeat; position: absolute; content: ""; right: -28px; top: 45%; }
.narasemUse > article:nth-of-type(3)::after { content: none; }
.narasemUse > article > p { text-align: center; padding: 14px 0; background-color: #2f5876; color: #ffffff; border-radius: 6px 6px 0 0; }
.narasemUse > article > ul { }
.narasemUse > article > ul > li { }

@media only screen and (max-width: 1640px) {
	.narasemUse > article::after { right: -22px; }
}
@media only screen and (max-width: 1200px) {
	.narasemUse > article::after { right: -28px; }
}
@media only screen and (max-width: 920px) {
	.narasemUse > article::after { right: -24px; }
}
@media only screen and (max-width: 800px) {
	.narasemUse { }
	.narasemUse > article { width: 100%; margin-bottom: 30px; }
	.narasemUse > article::after { left: 50%; right: 50%; bottom: -29px; top: unset; transform: rotate(90deg);}
}

/* 인사말 */
.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; background-repeat: no-repeat; background-position: 90% 10px; min-height: 400px;}
.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; }
.zName > b { font-size: 22px; padding-left: 5px; }

@media only screen and (max-width: 1640px) {
	.zGreeting { background-position: 100% top; }
}
@media only screen and (max-width: 920px) {
	.zGreeting { background-size: 320px auto; background-position-y: 31px; padding: 30px 0; }
}
@media only screen and (max-width: 830px) {
	.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: 85px; 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: 90px; 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 { width: 100%; display: flex; flex-wrap: wrap; }
#org dt { width: 63%; position: relative;}
#org 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: 31%; top: 115px; line-height: 1.2; }
#org dt a::before { content: ''; display: block; position: absolute; left: 100%; top: 48%; width: 90%; height: 3px; border-top: 2px solid #eee; box-sizing: border-box; z-index:-1;}
#org dt a::after { content: ''; display: block; position: absolute; left: 50%; top: 100%; width: 3px; height: 50px; border-left: 2px solid #eee; box-sizing: border-box; }

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

#org dd#org01 li { margin-bottom: 10px; padding-left: 50px; position: relative; }
#org dd#org01 li:last-child { margin-bottom: 0;}
#org 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 dd#org01 a { display: block; width: 100%; height: 48px; text-align: center; background: #dde8f2; padding: 15px 10px; box-sizing: border-box; color: inherit; }

#org dd#org02 { width: 100%; margin-top: 50px; position: relative; }
#org dd#org02::before { content: ''; display: block; position: absolute; left: 15.3%; top: 0; width: 69.5%; height: 3px; border-top: 2px solid #eee; box-sizing: border-box; }
#org dd#org02 ul { display: flex; justify-content: space-between;  }
#org dd#org02 li { width: 30.5%; padding-top: 40px; position: relative; }
#org dd#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; }
#org dd#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; }

@media screen and (min-width:0) and (max-width: 1080px) {
    #org dt { width: 50%;}
    #org dt a {left:10%; width:80%; max-width:80%; z-index:1;}
/* 	#org dt::before{width:80%; left:20%; top:50%;} */
/*     #org dt::after {left:50%; top:140px; height:170px;} */
    #org dd#org01 { width: 50%; }
	#org dd#org01 a{width:100%;}
	#org dd#org01::before{top:24px;}
	#org dd#org02 ul{background:#fff;}
	#org dd#org02 li {display:inline-flex;}
/* 	#org dd#org01 li::before{top:50%;} */
    #org dd#org02 li a {width:100%; padding: 10px 0; line-height: 1.2; word-break:break-all;}
}
@media only screen and (max-width: 768px) {
	#org dt{width:55%}
	#org dt a{top:105px; width:60%; left:20%;}
	#org dt a::before{top:51%;}
	#org dd#org01{width:45%}
	#org dd#org01 a{width:100%; height:auto; padding:10px;}
	#org dd#org01::before{top: 23px;height: calc(100% - 42px);}
	#org dd#org02 li a{font-size:14px;}
}
@media only screen and (max-width: 600px) {
	#org dt{width:48%;}
	#org dt::after{top:145px;left:43%;}
	#org dt a{width:90%; max-width:90%; top:51%; left:0; transform:translateY(-50%);}
	#org dt a::before{top:50%;}
	#org dt a::after{height:110px;}
	#org dd#org01{width:52%;}
	#org dd#org01 li{padding-left:15%; font-size:14px;}
	#org dd#org02{width:100%; margin-top:30px;}
	#org dd#org02::before{left:calc((48% - 20px) / 2); top:31px; width:calc(24% + 15px);}
	#org dd#org02 ul{flex-direction: column; position:relative; width: 52%; margin: 0 0 0 auto;}
	#org dd#org02 ul::before{content:''; position:absolute; top:30px; left:0; width:2px; height:calc(100% - 50px); background:#eee;}
	#org dd#org02 li{width:100%; padding-top:0;  margin-top:10px; padding-left:15%;}
	#org dd#org02 li::before{ left: 0; top: 50%; width: 50px; height: 1px; border-top: 2px solid #eee; border-left: 0;}
	#org dd#org02 li a{padding:10px; background:#fff; z-index:1;}
}
@media only screen and (max-width: 400px) {
	#org{justify-content:space-between;}
	#org dt a{top:52%; padding:18px 5px; font-size:14px;}
	#org dt a::after{height:105px;}
	#org dd#org01 a{padding:10px 0;}
	#org dd#org01 li,#org dd#org02 li a{font-size:13px;}
	#org dd#org02::before{top:30px;}
}

/* 사이트맵 */
.site_map {}
.site_map .site_h2 {margin:0 0 17px 0; padding:0 0 13px 0; font-size:22px; font-weight:500; color:#0064cc; border-bottom:2px solid #444444;}
.site_map ul {font-size:0; padding:0 0 15px 0; margin-bottom:40px; border-bottom:1px solid #e0e0e0; overflow:hidden;}
.site_map > ul > li {font-size:15px; width:25%; vertical-align:top; display:inline-block; font-weight:500; margin:0 0 4px 0;}
.site_map > ul > li > a {color:#222222; display:block; background: #f5f5f5; padding: 10px 0 10px 10px;  width:90%; margin:0 auto;}
.site_map > ul > li > a[target="_blank"] {background:#f5f5f5 url(../img/img_sub/t_blank_icon.png) no-repeat 94% center;}
.site_map > ul > li li > a[target="_blank"]:after {content: ''; position:absolute; width:18px; height:15px; background:#ffffff url(../img/img_sub/t_blank_icon.png) no-repeat 94% center;}
.site_map > ul > li  ul {width:1000%;  border-bottom:none;font-weight:normal; margin:4px 0 16px 5%; padding:0;}
.site_map > ul > li  ul li {font-size:13px; background: url(../img/img_sub/li_bul4.png) no-repeat 1px 6px; padding:0 0 0 10px; margin:9px 0;}
.site_map > ul > li  ul li a {color:#444444;}
.site_map > ul > li  ul li a:hover {color:#111111;}

@media only screen and (max-width: 768px) {
	.site_map > ul > li { width: 100%; background-color: #f5f5f5; }
	.site_map > ul > li > a { background: transparent; width: auto; margin: 0; display: inline-block; }
	.site_map > ul > li > a[target="_blank"] {background:#f5f5f5 url(../img/img_sub/t_blank_icon.png) no-repeat 94% center; padding-right: 20px;}
	.site_map > ul > li li > a[target="_blank"]:after {content: ''; position:absolute; width:18px; height:15px; background:#ffffff url(../img/img_sub/t_blank_icon.png) no-repeat 94% center;}
}