@charset "utf-8";

/*서브비쥬얼*/
.sub_visual {background:url('/eng/img/contents/sub-visual01.jpg') no-repeat center top; margin-top:160px; width:100%; height:290px; z-index:-1}
.sub_visual span {color:#fff; font-size:2em; display:block; width:30%; text-align:center; line-height:1.2em; margin:0 auto; position:relative; top:30%}

/* none */
#snb {display:none}
#sns_wrap {display:none}

/*content*/	
#content{font-size:0.95em; max-width:1300px; margin:-60px auto 30px; position:relative; padding:0 10px; line-height:26px}

/* ctt & location */
.content_info {position:relative; padding:110px 0 60px 0}
.content_info  h3 {color:#333; font-weight:500; font-size:2em; text-align:center;}
.content_info  h3:before {content:''; border-top:1px solid rgba(19,98,160,1); width:35px; height:1px; display:block; margin:0 auto 20px}
.location {background:#fff; border-bottom:1px solid #e5e5e5; width:100%; height:60px; position:absolute; top:0}
.location  ul {clear:both; overflow:hidden}
.location  ul li {font-size:0.9em; float:left; line-height:60px; margin-right:30px; position:relative}
.location  ul li:after {content:''; border-top:1px solid #999; border-right:1px solid #999; position:absolute; right:-15px; top:47%; width:5px; height:5px; transform:rotate(45deg)}
.location  ul li:first-child:after, .location  ul li:last-child:after  {content:none}
.location  ul li.icon a{color:rgba(19,98,160,1); display:block; width:60px; height:60px; text-align:center; position:relative; z-index:1}
.location  ul li.icon a:before {content:''; background:url(/eng/img/contents/icon-home.png) no-repeat center; display:block; width:100%; height:100%}
.location  ul li.icon a:after {content:''; background-color:#bc282e; position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1}
.location  ul li a:hover {color:rgba(19,98,160,1)} 

/*depth4 탭메뉴 */
#depth4_menu_div {margin-bottom:60px}
#depth4_menu_div ul {display:table; width:100%}
#depth4_menu_div ul li{border:1px solid #e5e5e5; border-right:0; display:table-cell; width:25%; vertical-align:middle}
#depth4_menu_div ul li:last-child {border-right:1px solid #e5e5e5}
#depth4_menu_div ul li a{display:block; text-align:center; padding:0.9em 0; position:relative}
#depth4_menu_div ul li:hover {border:1px solid #bc282e}
#depth4_menu_div ul li:hover a {color:#bc282e}
#depth4_menu_div ul li.active {border:0; background:#bc282e}
#depth4_menu_div ul li.active a{color:#fff}
#depth4_menu_div ul li.active a:before {content:''; display:block; background:#fff; height:10px; width:1px; position:absolute; left:50%; bottom:-1px}
	
/* 콘텐츠 하단 정보 */	
.contentInfo {position:relative; margin-top:50px; width:100%}
.contentInfo > div {border:1px solid #e5e5e5; position:relative; vertical-align:middle}
.contentInfo .qr-wrap {position:absolute; right:0; bottom:2px;  border:none; padding:0 1px 0 0} 

/* 콘텐츠 담당자 */
div.duty-wrap {background:#f8f8f8; border-bottom:0; clear:both; overflow:hidden; width:100%; padding:10px} 
div.duty-wrap div.duty span {float:left; margin-right:20px}
div.duty-wrap div.duty dl {float:left}
div.duty-wrap div.duty dl dt {font: 0px/0 Arial;  height: 0; left: -9999px !important; position: absolute !important; top: -9999px !important; visibility:hidden}
div.duty-wrap div.duty dl dd {display:inline-block; font-size:0.9em; padding-right:8px}
/*최근업데이트*/
div.duty-wrap div.duty_date {float:right; margin-top:-1px}
div.duty-wrap div.duty_date strong, .contentInfo div.duty_date span {font-size:0.9em; font-weight:normal; display:inline-block; vertical-align:middle}
div.duty-wrap div.duty_date strong:after {content:':'; display:inline-block; padding:0 5px}

/* 콘텐츠 만족도 */ 
#satisfy-wrap {padding:15px 100px 15px 10px; width:100%} 	
#satisfy-wrap:first-child + div {width:10%}	
#satisfy-wrap fieldset {width:100%}
#satisfy-wrap .satisfyTitle {clear:both; width:100%; overflow:hidden}
#satisfy-wrap .satisfyTitle strong {font-weight:normal; display:inline-block; margin-right:10px}
#satisfy-wrap .satisfyTitle span {display:inline-block}

#satisfy-wrap div.satisfyForm {clear:both; overflow:hidden}
#satisfy-wrap div.satisfyForm ol {float:left; padding:5px 0; width:48%}
#satisfy-wrap div.satisfyForm ol li {display:inline-block; font-size:0.9em}
#satisfy-wrap div.satisfyForm ol li label {letter-spacing:-1px; vertical-align:-1px}

#satisfy-wrap div.satisfyForm p.opinion {float:left; position:relative; width:52%}
#satisfy-wrap div.satisfyForm p.opinion > span {display:block; height:40px}
#satisfy-wrap div.satisfyForm p.opinion span input {width:100%; height:100%}
#satisfy-wrap div.satisfyForm p.opinion .form-input {font-size:0.8em; float:left; width:75%}
#satisfy-wrap div.satisfyForm p.opinion .form-input input{padding-right:50px}
#satisfy-wrap div.satisfyForm p.opinion .form-btn {cousor:pointer; float:left; width:25%}
#satisfy-wrap div.satisfyForm p.opinion .form-btn input {background:#fff; border:1px solid #a9a9a9; border-left:0; cursor:pointer; color:#444; font-size:13px; padding:0 10px}
#satisfy-wrap div.satisfyForm p.opinion .opinion_right {display:block; font-size:0.8em; position:absolute; top:8px; right:28%}

/* 참여 후 멘트 */
#satisfy-wrap .txtMent {padding:6px 0 4px; margin:5px 0 0}
#satisfy-wrap .txtMent strong {font-weight:500}

/* 하단 QR */
.qr-wrap {text-align:right}
.qr-wrap img {width:80px}

/* 공공누리 */
.codeView {border:1px solid #dbdbdb; display:table; width:100%; padding:10px 0}
.codeView img, .codeView span {display:table-cell; vertical-align:middle; padding:0 10px}

/* 사이트 맵 */
.sitemap {border-top:2px solid #000}
.sitemap dl {padding:50px 0; border-bottom:1px solid #e5e5e5}
.sitemap dl:last-child {border-bottom:0}
.sitemap dt a {color:#1068ae; font-size:1.6em}
.sitemap dd {clear:both; overflow:hidden; padding:30px 0 0}
.sitemap ul > li  {float:left; margin-right:3em; line-height:2em}
.sitemap ul li a {color:#000; font-size:1em}
.sitemap ul li a:hover {color:#1068ae; text-decoration:underline}


/************* 콘텐츠 ***************/
h2.dep01 {display:block; color:#1362a0; font-size:1.7em; font-weight:normal; margin:50px 0 20px} /*파란색*/
h2.dep01:first-child {margin-top:0}/*파란색*/
h3.dep02 {color:#000; display:block; font-size:1.3em; font-weight:normal;  margin-bottom:1%} /*bullet 없음*/
h4.dep03 {color:#000; display:block; position:relative; padding-left:15px} /*파란원 bullet*/
h4.dep03:before {content:''; border:2px solid #1362a0; border-radius:50px; position:absolute; left:0; top:8px; width:5px; height:5px}

ul.dep02 li {color:#000; display:block; font-size:1.3em}
ul.dep02 li > ul {padding:13px 0 30px}
ul.dep02 li > ul li {font-size:0.75em; display:block; position:relative;  padding:0 0 0 15px}
ul.dep02 li > ul li:before {content:''; border:2px solid #1362a0; border-radius:50px; position:absolute; left:0; top:8px; width:5px; height:5px}
ul.dep02 li > p,
ul.dep02 li > span{font-size:0.75em; display:block; position:relative; padding:15px 0 25px}

ul.dep03 > li, span.dep03 {color:#000; position:relative; padding:0 0 0 15px}
ul.dep03 > li:before, span.dep03:before {content:''; border:2px solid #1068ae; border-radius:50px; position:absolute; left:0; top:8px; width:5px; height:5px}
ul.dep03 > li > ul li, 
ul.dep03 > li > p,
ul.dep03 > li > span {font-size:1em; position:relative; padding:10px 0 25px}

ul.dep03 > li > ul {margin-bottom:5px}
ul.dep03 > li > ul > li {color:#444; display:block; position:relative; padding:0 0 0 15px; line-height:160%}
ul.dep03 > li > ul > li:before {content:''; background:#666; position:absolute; left:1px; top:10px; width:5px; height:1px}

/* 3depth */
ul.dep04 > li, span.dep04 {color:#000; display:block; font-size:0.95em; font-weight:normal; position:relative; padding:0 0 0 12px; line-height:160%}
ul.dep04 > li:before, span.dep04:before {content:''; background:#666; position:absolute; left:2px; top:8px; width:3px; height:5px}
ul.dep04 > li > ul > li {color:#444; display:block; position:relative; padding:0 0 0 15px; line-height:160%}
ul.dep04 > li > ul > li:before {content:''; background:#666; position:absolute; left:1px; top:10px; width:5px; height:1px}
ul.dep04 > li > ul > li > ul > li{display:block; font-size:1em; position:relative; padding:0 0 7px 10px; line-height:160%}
ul.dep04 > li > ul > li > ul > li:before {content:''; background:#999; position:absolute; left:1px; top:11px; width:2px; height:2px}

/* 4depth 로 시작*/
ul.dep05 > li > ul > li{color:#444; display:block; font-size:1em; position:relative; padding:0 0 7px 10px; line-height:160%}
ul.dep05 > li > ul > li:before {content:''; background:#999; position:absolute; left:1px; top:11px; width:2px; height:2px}

/* 테이블 공통 */
.table {margin:5px 0 15px; position:relative}
.table table{position:relative}
.table table:before {content:''; background:#666; width:100%; height:1px; position:absolute; left:0; top:0}
.table thead tr th.line-r,
.table tbody tr td.line-r {border-right:1px solid #ddd !important}

/* 테이블 thead */
.tbl_type1 {border-collapse:collapse; font-size:1em; width:100%}
.tbl_type1 thead th, .tbl_type1 tfoot th {background:#f7f7f7; border-bottom:1px solid #cad0d6; border-right:1px solid #ddd; color:#333; font-weight:500; text-align:center; line-height:150%; padding:12px 5px}
.tbl_type1 tbody th, .tbl_type1 tfoot td  {background:#f7f7f7; border-bottom:1px solid #ddd; border-right:1px solid #ddd; color:#333; font-weight:500; text-align:center; line-height:150%; padding:10px 3px;}
.tbl_type1 tbody td{border-bottom:1px solid #ddd; border-right:1px solid #ddd; color:#666; text-align:center; line-height:150%; padding:12px 5px; vertical-align:middle}
.tbl_type1 thead th:last-child,
.tbl_type1 tbody tr th:last-child,
.tbl_type1 tbody tr td:last-child, 
.tbl_type1 tfoot th:last-child {border-right:none}
.tbl_type1 tbody td ul li, .tbl_type1 tbody td span {text-align:left; display:block}

/*테이블 tbody*/
.tbl_type2 {border-collapse:collapse; border-bottom:1px solid #666; margin:0 0 15px 0; width:100%}
.tbl_type2 tbody th{background:#f7f7f7; border-bottom:1px solid #ddd; border-right:1px solid #ddd; color:#000; font-size:0.95em; font-weight:normal; padding:1em; text-align:center}
.tbl_type2 tbody td{border-bottom:1px solid #ddd; border-right:1px solid #ddd; color:#000; font-size:0.9em; text-align:center; padding:1em;}
.tbl_type2 thead tr th:last-child,
.tbl_type2 tbody tr td:last-child {border-right:none}
.tbl_type2 tbody tr:last-child th, .tbl_type2 tbody tr:last-child td {border-bottom:none}

/*공통사용*/
.con-section {display:table; width:100%; margin-bottom:50px}
.con-section .article-left, .con-section .article-right {display:table-cell; vertical-align:top}
.con-section .article-left img {margin:0 auto}

/* 텍스트 콘텐츠 그룹 */
.con-section .article {display:block; margin:2% 0 0 0}

/* 텍스트 콘텐츠 부분 */
.article {margin-bottom:5%}

/*알림*/
.info {color:#005aab; display:block; position:relative; padding-left:22px}
.info:before {content:''; background:url('/eng/img/contents/icon-info.png') no-repeat; background-size:100%; display:block; width:15px; height:15px; position:absolute; left:0; top:6px}

/* 사진형식 리스트 ex)심볼,관광명소 */
.content-list > li {border:1px solid #e5e5e5; display:table; margin-top:-1px; padding:2.2%; width:100%}
.content-list > li > div {font-size:0.9em; display:table-cell; padding:0 5% 0 0; line-height:1.6em}
.content-list > li .txt {width:77%; padding:2.5% 5% 0 0}
.content-list > li .txt .h5 {padding-bottom:3%}
.content-list > li .txt strong {color:#000; display:block; font-size:1.4em; font-weight:500; margin-bottom:15px}
.content-list > li .txt strong > span {color:#333; display:inline- block; font-size:0.7em; margin-left:20px}
.content-list > li .txt > span{color:#000; font-size:1.1em; display:block; padding:15px 0 10px 0} 
.content-list > li .thumb {width:23%; height:147px; vertical-align:middle}
.content-list > li .thumb img {display:block; width:100%; height:100%}

/*행정지도*/
.bukgu-map {display:table; width:100%}
.bukgu-map .article-map, .bukgu-map .article-con {display:table-cell; width:50%; vertical-align:top}
.bukgu-map .article-map {background-image:url('/eng/img/contents/bukgu-map/map-bg.png');  background-repeat:no; background-position:center; padding:6% 4%}
.bukgu-map .article-map .map {background-image:url('/eng/img/contents/bukgu-map/bugu-map.png');  background-repeat:no-repeat; background-position:0 0; max-width:530px; height:475px; margin:0 auto}
.bukgu-map .article-con {padding-left:5%}
.bukgu-map .list {margin-top:20px}
.bukgu-map .list  ul {clear:both; padding:1px 0 0 1px; overflow:hidden}
.bukgu-map .list  ul li {border:1px solid #CCC; float:left; width:33.3%; margin:-1px 0 0 -1px; line-height:48px; text-align:center}
.bukgu-map .list  ul li a {display:block}
.bukgu-map .list  ul li a:hover, 
.bukgu-map .list  ul li.on a{background:#1362a0; color:#fff}

@media screen and (max-width:1100px){
		
	/*행정지도*/
	.bukgu-map {display:block; width:100%}
	.bukgu-map .article-map, .bukgu-map .article-con {display:block; width:100%; vertical-align:top}
	.bukgu-map .article-map .map {background-size:100%; height:auto}
	.bukgu-map .article-con {margin:30px 0 0; padding:0}

	}	
	
@media screen and (max-width:768px){
		
	/* 사진형식 리스트 ex)심볼,관광명소 */
	.content-list li .thumb {height:auto}

}	

@media screen and (max-width:480px){
		
	/*행정지도*/
	.bukgu-map .list  ul li {width:50%}

	}