@charset "utf-8";
@font-face {
    font-family:'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#conts p,#conts ul, #conts .qna-list {word-break:keep-all;}

/* 게시판 상단 h4 들어가는 영역*/
#conts .blind {display:none;}

/**********************************
	보건소 Guide : 컬러맞춤
**********************************/

#snbWrap h2 {background:#3aacdc;}
.snb >li >a.state.on, .snb >li >a.on {background:#00638c; border-color:#00638c;}
.snb >li >a.state.on + ul {border-color:#00638c;}
.snb >li >a:hover, .snb >li >a:focus {color: #00638c;}
.snb >li >ul >li >a.on {color:#00638c;}
.snb >li >ul >li >a:before {background:#98c3bc;}
.snb >li >ul >li >a:hover:before, .snb >li >ul >li >a:focus:before, .snb >li >ul >li >a.on:before {background:#00638c; border:1px solid #00638c;}

.snb >li >ul >li > ul {background:#ecf6fa;}
.snb >li >ul >li > ul > li >a.on {color:#496e80;}

.spot_list >li:before {background:url('./../img/common/spr_spot_ghc.png') 0 -26px no-repeat;}
.share_list button.close {background:url('./../img/common/spr_spot_ghc.png') -94px 0px no-repeat;}


/*	가이드기본 */
.tab { border-bottom: 1px solid #3aacdc; }
.tab>li { float: left; }
.tab a { width: 140px; display: block; text-align: center; background: #e9f1ef; border: 1px solid #3aacdc; border-bottom: 0; padding: 10px 17px; margin-right: 10px; color: #3aacdc; ;}
.tab a.active { background: #3aacdc; color: #fff; }
.exp_guide { padding: 2rem 2.4rem; background: #e9f1ef; border: 2px solid #58a087; line-height: 160%; color: #333; font-size: 1.5rem; word-break: break-all; }
#uiGuide, #contGuide { position: relative; }

/* 	TEXT */

#conts .point {color:#3aacdc;}
#conts .txt_point {color:#3aacdc !important;}
#conts .link {color:#3aacdc;}

#conts *[target="_blank"]:not([class]):after,
#conts .link[target="_blank"]:after {background:url('/ghc/img/common/ico_blank_ghc.png') no-repeat 50% bottom;}
#conts .icon-file {background: url('/common/img/guide/ico_file.png') no-repeat left 5px;}
#conts .icon-file:hover { color:#3aacdc; }
#conts .s-title {color:#3aacdc !important;}
#conts .list-count em {color:#3aacdc;}

/* 	Tab Style */
#conts .dep05 li.on a, #conts .dep05 li a.on, #conts .dep05 li a:hover {color:#3aacdc;}
#conts .dep05.list03 li {width:33.3%;}

@media all and (max-width:840px) {
	#conts .dep05.list03 li {padding:1rem .2rem; width:49.5%;}
}

@media all and (max-width:640px) {
	#conts .dep05.list03 li {display:block; width:auto; float:none;}
}


.tab-wrap li.on a{ background-color: #3aacdc; color: #fff; font-weight:600; }
.ico_con .box_color { font-size:1.6rem; padding:2rem 2.4rem; background: #e9f0f4; border: 2px solid #59b98f; line-height: 160%; color: #333; word-break: break-all; }
.tab-link-box li a:hover:before {background:#3aacdc;}



/* 	Table */
.spot_list >li:last-child >a {color:#3aacdc;}

/* 	Button */

.btn_top {border:1px solid #3aacdc; color:#3aacdc !important;}
.btn_top:after { background:url('/common/img/common/btn_tab_top.png') no-repeat 50% 50%;}
.btn_top:hover {background:#3aacdc;}
.btn_top:hover:after {background-image:url('/common/img/common/btn_tab_top_on.png');}

.button {color:#3aacdc !important; border:1px solid #3aacdc !important;}
.button:hover {border-color:#3aacdc; background:#3aacdc !important; color:#fff !important;}

.btn_wrap >*.write, .btn_wrap >*[onclick *= "write"], .btn_wrap >input[type="submit"].write, .btn_wrap >input[type="button"].write, .btn_wrap >button.write {border-color:#3aacdc; color:#3aacdc !important; background:url('/ghc/img/common/split_button_icon_ghc.png') no-repeat right -3.9rem top -34.4rem; background-size:10rem auto; }
.btn_wrap >*.write:hover, .btn_wrap >*[onclick *= "write"]:hover, .btn_wrap >input[type="submit"].write:hover, .btn_wrap >input[type="button"].write:hover, .btn_wrap >button.write:hover {background-color:#3aacdc !important; color:#fff !important;}

@media all and (max-width:640px) {
	.btn_wrap >*.write, .btn_wrap >*[onclick *= "write"], .btn_wrap >input[type="submit"].write, .btn_wrap >input[type="button"].write, .btn_wrap >button.write {background:none !important; padding-right:3.7rem;}
}


.button.normal {border-color:#3aacdc; background:#3aacdc; }
.button.normal:hover{border-color:#3aacdc; background: #3aacdc;}

.button.point {border-color:#00638c; background:#00638c; }
.button.point:hover {border-color:#002253; background:#002253;}
.button.icon:after {background:url('/ghc/img/common/split_button_icon_ghc.png') no-repeat 0 0; background-size:10rem auto; }

.button.small.icon:after { background:url('/ghc/img/common/split_button_icon_small_ghc.png') no-repeat 0 0; }

/* 그 외 콘텐츠 가이드 */
#conts *.box-notice {border-radius:0;}

#conts h4 {padding-left:0; padding-top:2rem;}
#conts h4:before {top:0; margin-top:0; height:10px; width:32px; background:url('../img/common/bul_h4.png') no-repeat 0 0; }

#conts h5 {color: #3aacdc ; margin-left:0;}
#conts h6 {margin-left:0; margin-bottom:1.2rem; padding-left:1.8rem; }
#conts h6:before {width:12px; height:12px; top:0.25rem; background:url("../img/common/bul_h6.png") no-repeat 0 0;}

#conts .mh6, #conts .fix-mh6, #conts .list-u.mh6, #conts .list-o.mh6 {margin-left:2.1rem !important;}

#conts .list-u > li {padding-left:1.5rem;}
#conts .list-u li:before {background:url('/ghc/img/common/split_ul_dot.png') no-repeat 0 0;}
#conts .list-u > li:before {margin-top:-0.75rem;}
#conts .list-o > li ul li:before, #conts .list-u > li ul li:before {margin-top:-0.7rem;}
#conts .list-o > li:before {color:#00638c; border-bottom:2px solid #00638c;}
#conts .list-u .flow-list.fit > ul {margin:0 -18px;}

#conts .flow ul li:before {top:16px;}
#conts .flow-list.ty2 .flow .item .tit {background:#08acb2;}
#conts .flow-list.ty2 .flow li:nth-child(even) .item .tit {background:#389cdb;}

#conts .flow-list.img .flow .item .tit {background:none; color:#00638c; padding:1.8rem 1rem 1rem;}


.bod_head .bod_search input[type="submit"] {background:#3aacdc;}


#conts *.box-design { border-radius:0; background:none; border-top:5px solid #3aacdc; border-left:1px solid #3aacdc; border-right:1px solid #3aacdc; border-bottom:1px solid #ddd;}
#conts *.box-design .cell {background:#fff; border-radius:0; }
#conts *.box-design .cell + .cell {border-radius:0;}

#conts *.box-design.history  { border-top:0; border-left:0;}
#conts *.box-design.history .s-title.years {color:#3aacdc !important;}
#conts .locationWrap .address dl dt span:before {background:url('/ghc/img/common/ico_location.png') no-repeat;}

.bod_guide {position:relative; min-height:150px; font-size:1.7rem; width:100%;}
.bod_guide { border-radius:0; background:none; border-top:5px solid #3aacdc; border-left:1px solid #3aacdc; border-right:1px solid #3aacdc; border-bottom:1px solid #ddd;}
.bod_guide ul li {line-height:1.5;}
.bod_guide ul li:before {top:8px;}

@media all and (max-width:640px) {
	.ico_con.location {margin-top:3rem !important; padding:0;}
	.ico_con.location .cell {padding:1rem 0 3rem;}
	.ico_con.location .thumb {padding:0;}

	#conts *.box-design.history .cell {display:block;}
	#conts *.box-design.history .thumb {padding:2rem 0 0;}
	#conts *.box-design.history .thumb + .cell {padding:1rem 0 3rem; }
}


/* 담당자 연락처 카드 */
#conts .card {position:relative; display:table; table-layout:fixed; border:1px solid #ddd; border-radius:3px; width:100%; min-height:80px; margin-bottom:10px;  line-height:1.3; }
#conts .card:after {content: ''; clear: both;}
#conts .card > div {display:table-cell;  vertical-align:middle; padding:1.0rem 3rem; width:100%;}
#conts .card .dep { background:#f0f5f8; text-align:center; color:#222; border-radius:3px;}


/***************************** 인사말 ***********************************/
#conts .greeting .tit {background:url('/ghc/img/common/greeting_tit_bg.png') no-repeat left top;}
#conts .greeting[data-name="보건소"] {background: url('/ghc/img/content/01/sub01_bg01.png') no-repeat right top;}
#conts .greeting[data-name="보건소"] .tit{padding: 7rem 6rem;}
#conts .greeting .tit:after {background:url('/ghc/img/common/greeting_deco.png') no-repeat; }




/***************************** 자가건강 체크리스트 ***********************************/
.checkList .box-tit {width:100%;  font-size:2.4rem;  font-weight:700; border:3px solid #3aacdc; text-align:center; padding:30px; margin-bottom:50px; word-break:keep-all;}
.checkList .box-tit span {position:relative; padding-left:65px;}
.checkList .box-tit span:before {content:''; position:absolute; left:0; top:50%; transform:translateY(-60%); width:55px; height:52px; background:url('/ghc/img/content/common/ico_checklist.png') no-repeat;}
.checkList .box-tit span em {color:#3aacdc !important;}
.checkList .box-tit  p {font-weight:400; margin-top:20px;}

.checkList .checkBox .tit {display:table; width:100%;  background:#f2f5f7; border-radius:100px;}
.checkList .checkBox .tit span {display:table-cell; padding:2rem; vertical-align:middle; line-height:1.5;}
.checkList .checkBox .tit span:first-child {width: 14rem;  background:#3aacdc; color:#fff; font-weight:700;  padding:2rem 3rem; text-align:center;  border-radius:100px; margin-right:15px;}

.checkList .checkBox ul {padding:2rem 3rem; overflow:hidden; }
.checkList .checkBox ul li {float:left; width:33.333333%; margin:10px 0;}
.checkList .checkBox ul li input[type="radio"] {margin: -2px 5px 0 0;}

.checkList .bod_write dl dt {width:18rem;}
.checkList .resultWrap {border:3px solid #f2f5f7; text-align:center; font-size:2.4rem; font-weight:700; padding:3rem; margin-top:30px;}
.checkList .resultWrap #result {font-size:3rem; color:#3aacdc; padding :0 5px 0 10px;}



@media all and (max-width:768px) {
	.checkList .checkBox ul li {width:50%;}
}

@media all and (max-width:640px) {
	.checkList .box-tit {padding:80px 20px 20px;}
	.checkList .box-tit span {padding-left:0px; padding-top:65px;}
	.checkList .box-tit span:before {left:50%; top:0; transform:translateX(-50%);}

	.checkList .checkBox .tit span:first-child {width: 10rem; padding:1rem 0.5rem; }

	.checkList .bod_write dl dt {display:block; width:100%; font-size:1.6rem;}
	.checkList .bod_write dl dd {display:block;  padding:1rem 0 1.5rem;}
	.checkList .bod_write dl dt br {display:none;}
}

@media all and (max-width:400px) {
	.checkList .checkBox ul li {float:none; width:100%;}
}


/***************************** 나의 비만도 측정 ***********************************/
#conts .bmi {width:100%; padding:6rem 7rem; background:#fafcfe url('/ghc/img/content/05/bg_bmi.png') no-repeat 90% 15%;}
#conts .bmi .titWrap .tit {position:relative; display:inline-block; font-family:'yg-jalnan'; font-size:3.5rem; color:#333; padding-right:90px; margin-bottom:20px;}
#conts .bmi .titWrap .tit em {color:#3aacdc;}
#conts .bmi .titWrap .tit:after {content:''; width:80px; height:46px; position:absolute; right:0; bottom:10px; background:url('/ghc/img/content/05/ico_bmi.png') no-repeat;}

#conts .bmi .bmiCalc {background:#fff; padding: 5rem 3rem; margin-top:50px; border-radius:10px;}
#conts .bmi .bmiCalc:after {content:''; clear:both; display:table;}

#conts .bmi .bmiCalc .input {float:left; width:45%; padding-right:30px; border-right:1px dashed #ddd;}
#conts .bmi .bmiCalc .input dl {padding:5px 0;}
#conts .bmi .bmiCalc .input dl:nth-child(3) {padding:10px 0;}
#conts .bmi .bmiCalc .input dl dt{display:inline-block; width:20%; font-size:1.8rem;}
#conts .bmi .bmiCalc .input dl dd{display:inline-block; width:75%; }
#conts .bmi .bmiCalc .input input[type="text"] {width:80%; margin-right:5%;}
#conts .bmi .bmiCalc .input input[type="radio"] {margin:-1px 5px 0;}
#conts .bmi .bmiCalc .input input[type="submit"] {display:block; width:100%; background:#3aacdc; margin-top:30px;}
#conts .bmi .bmiCalc .input dl:nth-child(3) span {display:inline-block; width:50%;}

#conts .bmi .bmiCalc .result {float:left; width:55%; padding-left:30px;}
#conts .bmi .bmiCalc .result .box {margin:0 6rem;}
#conts .bmi .bmiCalc .result dl {padding:10px 0;}
#conts .bmi .bmiCalc .result dl dt {display:inline-block; width:50%; font-size:2.2rem;}
#conts .bmi .bmiCalc .result dl dd {display:inline-block; font-size:2.2rem;}
#conts .bmi .bmiCalc .result dl dd em {font-family:'yg-jalnan';  color:#2c80ed; font-size:3.5rem; font-weight:700;}
#conts .bmi .bmiCalc .result > p {text-align:center; margin-top:50px;}
#conts .bmi .bmiCalc .result > p span {color:#ff4545;}


@media all and (max-width:1024px) {
	#conts .bmi {padding:5rem 4rem;}
	#conts .bmi .bmiCalc .result .box {margin:0;}

}
@media all and (max-width:860px) {
	#conts .bmi  {background-position:95% 15%;}
	#conts .bmi .titWrap .tit {padding-right:0; padding-top:60px;}
	#conts .bmi .titWrap .tit:after {top:0; left:0; right:auto; bottom:auto;}

	#conts .bmi .bmiCalc .result > p {margin-top:20px;}
}
@media all and (max-width:800px) {
	#conts .bmi  {background:none; background-color:#fafcfe;}
	#conts .bmi .titWrap {text-align:center;}
	#conts .bmi .titWrap .tit:after {left:50%; margin-left:-40px;}

	#conts .bmi .bmiCalc {margin-top:30px;}

	#conts .bmi .bmiCalc .input {width:100%; float:none; padding-right:0; padding-bottom:3rem; border-right:none;  border-bottom:1px dashed #ddd; }
	#conts .bmi .bmiCalc .result {width:100%; float:none; padding-left:0; padding-top:3rem;}
}

@media all and (max-width:500px) {
	#conts .bmi .titWrap .tit  {font-size: 3rem;  line-height:1.3;}
	#conts .bmi .bmiCalc {padding:3rem 0rem;}
	#conts .bmi .bmiCalc .input input[type="submit"] {margin-top:20px;}
	#conts .bmi {padding:5rem 0rem;}
}


/***************************** 의료기관 및 약국 현황 ***********************************/
#conts .mediNotice li {width:30%; height:350px; float:left; padding:30px 20px; margin:0 1.5%; border:3px solid  #b2d7e7; text-align:center;}
#conts .mediNotice li .img {display:inline-block; background:#efefef; border-radius:100px; padding:20px;}
#conts .mediNotice li .tit {font-size:2.0rem; font-weight:700; margin :20px 0 5px;}
#conts .mediNotice li .txt {font-size:1.6rem; line-height:1.4; margin-bottom:15px;}


#conts .mediNotice.work li {width:23%; height:160px;  margin:1%; padding:20px 10px; border-width:1px;}
#conts .mediNotice.work li .tit {margin:0 0 5px;}

@media all and (max-width:1024px) {
	#conts .mediNotice li {width:47%; margin:1.5%; height:auto;}
	#conts .mediNotice li:last-child {width:97%;}

	#conts .mediNotice.work li {width:31% !important;}
}

@media all and (max-width:768px) {
	#conts .mediNotice.work li {width:48%  !important;}
}

@media all and (max-width:640px) {
	#conts .mediNotice li {width:100%; margin:1.5% 0 ;}
	#conts .mediNotice li:last-child {width:100%;}
}

@media all and (max-width:375px) {
	#conts .mediNotice.work li {width:100%  !important; margin:1% 0; height:auto;}
}

#conts .mediCheck li {display:table; padding:1rem 2rem; border-top:2px solid #3aacdc; border-bottom:1px dotted #ddd; background:#fafcfd;  margin-bottom:15px; width:100%; }
#conts .mediCheck li:after {content:''; clear:both; display:table;}
#conts .mediCheck li span {display:table-cell; vertical-align:middle;}
#conts .mediCheck li .tit {font-size:2.0rem; font-weight:700; margin-right:20px; width:26rem;}
#conts .mediCheck li .btnWrap {float:right;}

@media all and (max-width:860px) {
	#conts .mediCheck  li {display:block; padding:2rem;}
	#conts .mediCheck li span {display:block;}
	#conts .mediCheck li .tit { width:100%; margin-bottom:15px;}
}

@media all and (max-width:640px) {
	#conts .mediCheck li { text-align:center; padding:2rem 0;}
	#conts .mediCheck li .btnWrap {float:none; margin-top:15px;}
}


/***************************** 의료기관약국 - 자율점검 - 프로그램 ***********************************/
.bod_head .bod_search.self{margin:2.5rem 0; }
.bod_head .bod_search.self dl > dt {width: 20rem;}

.bod_list.self  .num{color:#3aacdc;}
.bod_list.self  .tit{text-align:left;}

.ico_con.self{background:#f8f8f8; border:none;}
.ico_con.self .thumb{width:40rem;padding:2rem 4rem;}
.ico_con.self .call{ padding: 1rem; background: #00638c; display: inline-block; margin-top: 2.5rem; color: #fff!important;}
.ico_con.self .cell .blue{color:#00638c;}

@media all and (max-width:768px) {

	.bod_list.self  .num{width:50px;}
	.bod_list.self colgroup{display:none;}
	.bod_list.self  .check{width:40%;}
	.ico_con {display:block; padding:.5rem 0; min-height:0;}
	.ico_con.self .thumb{position:absolute;top: 20px;left:50%;margin-left: -150px;height: 230px;width: 300px;overflow: hidden;padding: 0!important;}
	.ico_con.self .cell:nth-child(1){padding-top: 230px;text-align: center;}
	.ico_con.self .cell {display:block;padding: 1rem 2rem;}
	.ico_con .thumb + .cell {padding-left:0rem;}
}

@media all and (max-width:640px) {
	.bod_list.self  .num, .bod_list.self  .tit {display: inline;}
	.bod_list.self  .check{text-align:right; display:block; width:100%}
	.bod_list.self tr{text-align:left; padding:1rem;}

}

#conts .bod_maintain {table-layout:fixed;}


/***************************** 영유아 예방접종 사전예진표 ***********************************/
.preliminary {margin-top:20px;}
.preliminary a {width:24.4%;}

@media all and (max-width:1024px) {
	.preliminary a {width:32%;}
}
@media all and (max-width:640px) {
	.preliminary a {width:48%;}
}
@media all and (max-width:375px) {
	.preliminary a {width:98%;}
}


/***************************** 조직도 ***********************************/

.organization{text-align:center;}
.organization .dep1_center{display:inline-block;position:relative;width:200px;margin-bottom:40px;padding:18px 0;border-radius:5px;background-color: #00638c;font-size:18px;font-weight:500;color:#fff;}
.organization .dep1_center:before{content:''; display:inline-block; position:absolute; top:100%; left:50%; width:1px; height:40px; background:#c5c9d6;}
.organization .dep1_center span{display:block; font-size:14px; line-height:20px; font-weight:300;}
.organization .dep2{position:relative; margin-left:-16px; padding-top:41px;}
.organization .dep2:before{content:'';display:block;position:absolute;top:0;left: calc((50% + 16px) / 2);width: calc(100% - 50%);height:1px;background:#c5c9d6;}
.organization .dep2 .dep2_item{float:left;width: 50%;padding-left:16px;}
.organization .dep2 .dep2_team{position:relative;width:100%;height: 50px;padding:13px 0;border: 1px solid #139fda;border-radius:5px;background-color: #3aacdc;line-height:22px;font-weight:500;color: #ffffff;}
.organization .dep2 .dep2_team:before{content:''; display:inline-block; position:absolute; bottom:100%; left:50%; width:1px; height:41px; background:#c5c9d6;}
.organization .dep2 .dep2_team span{display:block; font-size:15px; line-height:20px; font-weight:300; color:#363c5a;}
.organization .dep3{margin-top:10px;}
.organization .dep3_item{float:left; width:calc(50% - 5px); padding-top:13px; padding-bottom:12px; border:1px solid #c5c9d6; border-radius:5px;}
.organization .dep3_item:nth-child(2n){margin-left:10px;}
.organization .dep3_item:nth-child(n + 3){margin-top:10px;}
.organization .dep3_title{font-size:15px;}

@media all and (max-width:1400px){
    .organization .dep3_title{font-size:14px;}
}
@media all and (max-width:780px){
    .organization .dep2{margin-left:-5px;}
    .organization .dep2:before{left:calc((50% + 5px) / 2)}
    .organization .dep2 .dep2_item{padding-left:5px;}
    .organization .dep3_item{width:100%;}
    .organization .dep3_item:nth-child(2n){margin-left:0;}
    .organization .dep3_item:nth-child(n + 2){margin-top:8px;}
}


/* 보건사업 - 방역 */
.ico_con.prevent .cell {padding:2rem 5rem 2rem 0;}
.ico_con.prevent .thumb img {display:block; width:150px;}

@media all and (max-width:640px) {
	.ico_con.prevent .thumb img {display:inline-block;}
}