@charset "utf-8";

/************************************
	공통 스타일
************************************/

html,
body {margin:0; padding:0;}
html {min-width:320px;}


/************************************
	해상도별 폰트 사이즈
************************************/

@media (max-width:320px)						{html{font-size:10px;}}
@media (min-width:321px) and (max-width:360px)	{html{font-size:12px;}}
@media (min-width:361px) and (max-width:399px)	{html{font-size:13px;}}
@media (min-width:400px) and (max-width:439px)	{html{font-size:14px;}}
@media (min-width:440px) and (max-width:479px)	{html{font-size:15px;}}
@media (min-width:480px) and (max-width:519px)	{html{font-size:16px;}}
@media (min-width:520px) and (max-width:559px)	{html{font-size:17px;}}
@media (min-width:560px) and (max-width:599px)	{html{font-size:18px;}}
@media (min-width:600px) and (max-width:639px)	{html{font-size:19px;}}
@media (min-width:640px)						{html{font-size:20px;}}
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,400,500,700&subset=korean');


/************************************
	기본 레이아웃
************************************/
body {-webkit-text-size-adjust: none;font-family: 'Noto Sans KR', 'Malgun gothic', '맑은고딕', sans-serif;font-size: 1.6rem;font-weight: 600;}

#wrap {padding-top:4rem;}
.inner {position:relative; max-width:640px; box-sizing:border-box; margin-left:auto; margin-right:auto; padding-left:1rem; padding-right:1rem;}
.body {position:relative; min-height:400px; padding-top:1rem;}


/************************************
	헤더
************************************/

#headerWrap {display:block; position:fixed; background:#fff; top:0; left:0; right:0; z-index:99999; -webkit-transform: translateZ(0)}
#lnbWrap .logo,
#headerWrap .logo {display:block; position:relative; float:left; width:8rem; height:4rem; background:url('./../img/common/logo.png') no-repeat 0 0; background-size:contain; overflow:hidden; text-indent:-999px;}

#headerWrap .logo a {display:block; position:absolute; top:0; left:0; right:0; bottom:0;}
#headerWrap .inner:after {content:""; display:block; clear:both;}

#headerWrap .slogan {position:absolute; top:0; bottom:0; left:8rem; right:8rem; text-align:center; transition:.3s all; -webkit-transition:.3s all;}
#headerWrap .slogan img {display:block; position:absolute; max-width:100%; max-height:100%; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}

#headerWrap .gnb-control {position:absolute; top:0; right:0; bottom:0; width:7rem;}
#headerWrap .gnb-control button {display:block; position:relative; float:right; width:50%; height:100%; overflow:hidden; text-indent:-999px; background:no-repeat 50% 50%; background-size:contain;}
#headerWrap .gnb-control button.search {background-image:url('./../img/common/btn_control_search.png');}
#headerWrap .gnb-control button.gnb {background-image:url('./../img/common/btn_control_menu.png');}

.open-lnb #headerWrap .gnb-control button.gnb {background-image:url('./../img/common/btn_control_menu_close.png');}
.open-lnb #headerWrap .gnb-control button.search {display:none;}
.open-lnb #headerWrap .slogan {opacity:0;}


/************************************
	메인메뉴
************************************/

#lnbWrap {position:fixed; top:4rem; left:0; bottom:0; width:100%; max-width:640px; z-index:9999; background:#e8f2f6; transform:translateX(-100%); -webkit-transform:translateX(-100%); transition:.3s all; -webkit-transition:.3s all;}
.open-lnb #lnbWrap {transform:translateX(0%); -webkit-transform:translateX(0%);}

#lnbWrap .vis-area {padding:4rem 0 2.25rem; background:#e4f0f4;}
#lnbWrap .vis-area .vis {padding-bottom:1.35rem;}
#lnbWrap .vis-area img {max-width:100%;}

#lnbWrap .quick-area {display:block; position:relative; overflow:hidden;}
#lnbWrap .quick-area p.tit {padding:1.6rem 0 0; font-family: 'yg-jalnan'; font-size:1.3rem; text-align:center; background:#fff;}
#lnbWrap .quick-area p.tit span {color:#2a89f3;}
#lnbWrap .quick-area ul {overflow:hidden; background:#fff;}
#lnbWrap .quick-area ul + ul {margin-top:1rem;}
#lnbWrap .quick-area li {display:block; position:relative; width:50%; float:left; background:#fff;}
#lnbWrap .quick-area li a {display:block; position:relative; margin:-1px; border:1px solid #ddd; font-size:1rem; color:#333; font-weight:800; padding:0 .5rem 0 4.9rem; height:5rem; line-height:5rem; white-space:nowrap; overflow:hidden;}
#lnbWrap .quick-area li a:before {content:""; display:block; position:absolute; width:3rem; height:3rem; top:50%; margin-top:-1.5rem; left:1rem; background:no-repeat 50% 50%; background-size:contain;}
#lnbWrap .quick-area ul:nth-child(2) {padding:1.7rem 2.5rem 2rem;}
#lnbWrap .quick-area ul:nth-child(2) li {width:25%;}
#lnbWrap .quick-area ul:nth-child(2) li a {height:auto; padding:0; line-height:1em; text-align:center; border:0;}
#lnbWrap .quick-area ul:nth-child(2) li a:before {position:static; width:5rem; height:5rem; margin:0 auto .75rem; border-radius:1.5rem;}
#lnbWrap .quick-area li a[data-quick="조직도"]:before {background-image:url('./../img/common/ico_lnb_quick10.png'); background-color:#ffc039;}
#lnbWrap .quick-area li a[data-quick="직원안내"]:before {background-image:url('./../img/common/ico_lnb_quick11.png'); background-color:#24cecc;}
#lnbWrap .quick-area li a[data-quick="청사안내"]:before {background-image:url('./../img/common/ico_lnb_quick12.png'); background-color:#e86650;}
#lnbWrap .quick-area li a[data-quick="민원실안내"]:before {background-image:url('./../img/common/ico_lnb_quick13.png'); background-color:#3561ee;}
#lnbWrap .quick-area li a[data-quick="일반현황"]:before {background-image:url('./../img/common/ico_lnb_quick21.png');}
#lnbWrap .quick-area li a[data-quick="고시공고"]:before {background-image:url('./../img/common/ico_lnb_quick22.png');}
#lnbWrap .quick-area li a[data-quick="상하수도 스마트고지"]:before {background-image:url('./../img/common/ico_lnb_quick23.png');}
#lnbWrap .quick-area li a[data-quick="관광지도"]:before {background-image:url('./../img/common/ico_lnb_quick24.png');}
#lnbWrap .quick-area li a[data-quick="비상대피소"]:before {background-image:url('./../img/common/ico_lnb_quick25.png');}
#lnbWrap .quick-area li a[data-quick="보건소"]:before {background-image:url('./../img/common/ico_lnb_quick26.png');}
#lnbWrap .quick-area li a[data-quick="정보과학도서관"]:before {background-image:url('./../img/common/ico_lnb_quick27.png');}
#lnbWrap .quick-area li a[data-quick="추사박물관"]:before {background-image:url('./../img/common/ico_lnb_quick28.png');}

#lnbWrap .sns-area {padding:4rem 1rem; text-align:center;}
#lnbWrap .sns-area a {display:inline-block; vertical-align:middle; margin:.5rem; width:3.75rem; height:3.75rem; background:no-repeat 50% 50% #fff; background-size:contain; border-radius:100%; overflow:hidden; text-indent:-999px;
	-webkit-box-shadow: .1rem .1rem .25rem 0px rgba(11,76,210,0.1);
	-moz-box-shadow: .1rem .1rem .25rem 0px rgba(11,76,210,0.1);
	box-shadow: .1rem .1rem .25rem 0px rgba(11,76,210,0.1);
}
#lnbWrap .sns-area a[data-sns="페이스북"] {background-image:url('./../img/common/ico_sns_face.png');}
#lnbWrap .sns-area a[data-sns="네이버 블로그"] {background-image:url('./../img/common/ico_sns_blog.png');}
#lnbWrap .sns-area a[data-sns="인스타그램"] {background-image:url('./../img/common/ico_sns_insta.png');}
#lnbWrap .sns-area a[data-sns="유튜브"] {background-image:url('./../img/common/ico_sns_youtube.png');}
#lnbWrap .sns-area a[data-sns="카카오 채널"] {background-image:url('./../img/common/ico_sns_kakao.png');}

#lnbWrap .lnb-body {height:100%; overflow:auto;}

#search_wpra {display:block; position:fixed; left:1rem; right:1rem; top:6rem; z-index:9999; opacity:0; transform:translateY(-150%); -webkit-transform:translateY(-150%); transition:.3s all; -webkit-transition:.3s all;}
#search_wpra .inner {padding:.5rem 1.5rem; background:#fff; border-radius:9em; overflow:hidden;
	-webkit-box-shadow: 0px 0px .5rem 0px rgba(11,76,210,0.7);
	-moz-box-shadow: 0px 0px .5rem 0px rgba(11,76,210,0.7);
	box-shadow: 0px 0px .5rem 0px rgba(11,76,210,0.7);
}
#search_wpra .top-search {position:relative; padding-right:3rem;}
#search_wpra .top-search input[type="text"] {border:none; height:3rem; font-size:1rem; width:100%; outline:0;}
#search_wpra .top-search input[type="submit"] {display:block; position:absolute; top:0; right:-1rem; bottom:0; width:3rem; padding:0; background:url('./../img/common/btn_search.png') no-repeat 50% 50%; background-size:contain; overflow:hidden; text-indent:-999px;} 
.open-search #search_wpra {opacity:1; transform:translateY(0%); -webkit-transform:translateY(0%);}
.open-search body:before {content:""; display:block; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999; background:rgba(0,0,0,.5);}

/************************************
	퀵메뉴
************************************/

.footer-quick {display:block; position:fixed; left:0; right:0; bottom:0; z-index:999; background:#fff; border-top:1px solid #dddddd;}
.footer-quick .inner {padding:0;}
.footer-quick a {display:block; position:relative; width:20%; float:left; padding:.7rem 0 .5rem; text-align:center;}
.footer-quick a .icon {display:block; position:relative; margin:0 auto; width:2.8rem; height:2.25rem; background:no-repeat 50% 50%; background-size:contain;}
.footer-quick a span {display:block; font-size:.8rem; color:#333; line-height:1.6rem;}
.footer-quick a:hover span {color:#1c7df5; font-weight:600;}

.footer-quick a .icon[data-quick="홈"] {background-image:url('./../img/common/ico_quick_home.png');}
.footer-quick a:hover .icon[data-quick="홈"] {background-image:url('./../img/common/ico_quick_home_on.png');}

.footer-quick a .icon[data-quick="분야별"] {background-image:url('./../img/common/ico_quick_depart.png');}
.footer-quick a:hover .icon[data-quick="분야별"] {background-image:url('./../img/common/ico_quick_depart_on.png');}

.footer-quick a .icon[data-quick="주민참여"] {background-image:url('./../img/common/ico_quick_app.png');}
.footer-quick a:hover .icon[data-quick="주민참여"] {background-image:url('./../img/common/ico_quick_app_on.png');}

.footer-quick a .icon[data-quick="통합예약"] {background-image:url('./../img/common/ico_quick_reserv.png');}
.footer-quick a:hover .icon[data-quick="통합예약"] {background-image:url('./../img/common/ico_quick_reserv_on.png');}

.footer-quick a .icon[data-quick="평생학습"] {background-image:url('./../img/common/ico_quick_edu.png');}
.footer-quick a:hover .icon[data-quick="평생학습"] {background-image:url('./../img/common/ico_quick_edu_on.png');}

/* 서브페이지 */
.list-u > li {padding-left:.85rem; font-size:.9rem; position:relative;}
.list-u > li:before {content:""; width:.55rem; height:.55rem; margin-top:-.5rem; display:block; position:absolute; top:1.05em; left:0; background:url('./../img/common/split_ul_dot.png') no-repeat 0 0; background-size:.55rem; background-position:0 0px;}

.txt_point {color:#1c7df5 !important;}

#headerWrap .goBack {display:block; float:left; width:3.5rem; height:4rem; margin-left:-1rem; font-size:0; text-indent:-9999px; background:url('./../img/sub/ico_back.png') no-repeat center center;}
#headerWrap .subTit {display:inline-block; font-size:1.3rem; font-weight:400; line-height:4rem;}
#headerWrap [class^="btn_right"] {display:block; padding:0 1rem; font-size:1.1rem; font-weight:400; line-height:2.5rem; text-align:center; border-radius:5px; position:absolute; right:.85rem; top:50%; transform:translateY(-50%);}
#headerWrap .btn_right_green {color:#00adbd; background:#cceff2;}
#headerWrap .btn_right_blue {color:#1c7df5; background:#d2e5fd;}

*[class^="box-"] {line-height:1.7;}
*[class^="box-"] + *[class^="box-"] {margin-top:1.5rem !important;}
*.box-notice {max-width:640px; padding:1.1rem .9rem; margin:0 auto; font-weight:normal; border:1px solid #ddd; color:#333; border-radius:.4rem; word-break:keep-all;}
*.box-notice .box-notice-inner {border:1px solid #ddd; border-left-width:0; border-right-width:0; padding:20px 0; margin:20px 0;}

#boardWrap{margin-bottom:8rem;}
.certification {height:auto !important; margin:0 1rem 50px; font-weight:400;}
.certification:after {content:""; display:block; clear:both;}
.certification >.tit {font-size:1.5rem; text-align:center; font-weight:600; margin:2rem auto 1.5rem; max-width:640px;}
.certification .grid {position:relative;border:1px solid #c5c9d6; max-width:640px; margin:0 auto;}
.certification .grid:after {content:""; display:block; clear:both;}
.certification .grid li {display:block; position:relative; width:100%; box-sizing:border-box; border-bottom:1px dashed #c5c9d6;}
.certification .grid.col-2 li {display:block; position:relative; width:100%; box-sizing:border-box; border-bottom:1px dashed #c5c9d6;}
.certification .grid li:last-child {border-bottom:0;}
.certification .grid .item {background:#fff; padding:2rem 1.25rem 2rem; transition:.3s all; -webkit-transition:.3s all;}

.certification .grid .item .box {position:relative; padding:0 0 1.5rem 7.5rem; margin:0 auto;}
.certification .grid .item.certi .box:before {content:''; position:absolute; top:-20px; left:0; width:120px; height:120px; background:url("./../img/common/ico_certi_01.png") no-repeat;}
.certification .grid .item.iPin .box:before {content:''; position:absolute; top:-20px; left:0; width:120px; height:120px; background:url("./../img/common/ico_certi_02.png") no-repeat;}
.certification .grid .item.onePass .box:before {content:''; position:absolute; top:-20px; left:0; width:120px; height:120px; background:url("./../img/common/ico_certi_03.png") no-repeat;}

.certification .grid .item .tit {display:block; font-weight:800; color:#10293b; font-size:1rem; line-height:1.3; margin-bottom:.7rem;}
.certification .grid .item .txt {height:auto; margin-bottom:0px;color:#666666; font-size:.75rem !important; line-height:1.5 !important; word-break:keep-all; }
.certification .grid .item .txt br {display:none;}
.certification .grid .item .box > a {position:relative; display:inline-block; margin-top:15px; font-size:.9rem; color:#216cda; text-decoration:underline;}
.certification .grid .item .box > a[target="_blank"]:after {content:""; position:absolute; width:13px; height:18px; background:url('./../img/common/ico_blank.png') no-repeat !important;}
.certification .grid .item .box > a:hover {background:#ebf3f0;}
.certification .grid .item .btnWrap > * {display:block; position:relative; width:calc(100% - 7.5rem); height:2.25rem; font-size:.75rem; box-sizing:border-box; line-height:2.25rem; border:none; text-align:center; padding:0 !important;margin:0 auto !important; margin-left:7.5rem !important; background:#003583 !important; color:#fff !important;}
.certification .grid .item.onePass .btnWrap a span {padding:2px 0 2px 7.4rem; background:#003583 url("./../img/common/digital_onepass.png") no-repeat 0px 0px !important; background-size:6.9rem !important;}

/* 소셜로그인 */
.snsLogin {position:relative; max-width:640px; margin:0 auto 7rem;}
.snsLogin .tit {font-size:1.5rem !important; font-weight:700; margin:0 0 20px; text-align:center;}
.snsLogin ul:after {content:""; display:block; clear:both;}
.snsLogin .btnWrap {border: 1px solid #c5c9d6; padding:1.25rem;}
.snsLogin ul li {width:100%; line-height:3.5rem; margin:10px 0; border:1px solid #ddd; border-radius:.15rem; text-align:center;}
.snsLogin ul li.naver {background:url("./../img/common/ico_naver.svg") no-repeat 8% 50%; background-size: 30px 30px;}
.snsLogin ul li.kakao {background:url("./../img/common/ico_kakao.svg") no-repeat 8% 50%; background-size: 30px 27px;}
.snsLogin ul li span {display:block; margin-left:20%; border-left:1px dashed #ddd; color: #000;}

@media all and (max-width:680px) {
	.snsLogin {margin:0 1rem;}
}

@media all and (max-width:450px) {
	.certification .grid .item {padding:3rem 2.5rem;}
	.certification .grid .item .box {padding:0 0 3rem 10rem;}
	.certification .grid .item.certi .box:before,
	.certification .grid .item.iPin .box:before ,
	.certification .grid .item.onePass .box:before {width:80px; height:80px; background-size:100%; top:0;}
	.certification .grid .item .btnWrap > * { width:100% ; margin-left:0 !important;}

	.snsLogin ul li { line-height:6rem; }
	.snsLogin ul li.naver,
	.snsLogin ul li.kakao { background-size: 20px 20px; }

}