@charset "utf-8";
 
/* 웹폰트 */
@font-face {
	font-family:'GmarketSans'; font-style:normal; font-weight:100;
	src: url('/humanframe/global/assets/css/font/GmarketSansLight.woff') format('woff'), url('/humanframe/global/assets/css/font/GmarketSansLight.ttf') format('truetype');
}

@font-face {
	font-family:'GmarketSans'; font-style:normal; font-weight:400;
	src: url('/humanframe/global/assets/css/font/GmarketSansMedium.woff') format('woff'), url('/humanframe/global/assets/css/font/GmarketSansMedium.ttf') format('truetype');
}

@font-face {
	font-family:'GmarketSans'; font-style:normal; font-weight:700;
	src: url('/humanframe/global/assets/css/font/GmarketSansBold.woff') format('woff'), url('/humanframe/global/assets/css/font/GmarketSansBold.ttf') format('truetype');
}

@keyframes pong2 {0%{transform:scaleY(0.9) scaleX(0.9);} 50%{transform:scaleY(0.7) scaleX(1);} 75%{transform:scaleY(1) scaleX(0.7);} 100%{transform:scaleY(0.9) scaleX(0.9);}}

a, a:hover, a:focus {text-decoration:none;}
br {opacity:0;}

/* 테마 버튼 컬러 */
button {font-family: inherit;}
.button.color {border:1px solid #2d5785; color:#fff; background-color:#2d5785;}

/* 공통 레이아웃 */
.inner {width:100%; max-width:1200px; margin:0 auto; position:relative;}
.inner:after {content:""; display:block; clear:both;}

#header {font-family: "GmarketSans", sans-serif;}
#header * {box-sizing: border-box;}
#header {position:fixed; top:0; left:0; right:0; background:#fff; z-index:9999;}
#header .headerTop {background:#f9f9f9; position:relative; z-index:2;}
#header .headerBottom {background:#fff; position:relative; z-index:1;}
#header .headerTop .inner {display:flex; justify-content:space-between; align-items:center;}
#header .headerTop .inner:after {display:none;}
#header .headerTop .logo img {vertical-align: middle;}
#header .menus > ul {display:table;}
#header .menus > ul > li {display:table-cell; vertical-align: middle; padding:0 1em; line-height:1; border-left:1px solid #ccc; font-size:0.9em; color:#555; white-space:nowrap;}
#header .menus > ul > li:first-child {border-left:0;}
#header .menus > ul > li.language {border-left:0; padding-right:0;}
#header .menus > ul > li.language select {height:2.5em; vertical-align: middle; float:left; border:0; border-radius: 1em 0 0 1em; background:#fff url(../../assets/img/common/ico_select_arrow.png) no-repeat center right 0.5em; font-family:inherit; color:#555; font-size:0.9em;}
#header .menus > ul > li.language button {height:2.5em; vertical-align: middle; float:left; width:2.5em; border-radius: 0 1em 1em 0; position:relative; background:#fff; font-size:0.9em;}
#header .menus > ul > li.language button:after {content:"GO"; font-size:0.9em;}
#header .menus > ul > li.corona {border-left:0; margin-left:1.5em; padding-right:0; padding-left:1em;}
#header .menus > ul > li.corona a {display:inline-block; background:#21529f; color:#fff; padding: 0.7em 0.7em 0.5em; vertical-align: middle; border-radius:0.3em; font-size:0.9em;}

#header .headerMiddle {border-bottom:1px solid #ddd;}
#header .headerMiddle > .inner {display:flex; justify-content:space-between; align-items:center; height:90px;}
#header .headerMiddle > .inner:after {display:none;}
#header .headerMiddle .search input.text {height:3em; width:300px; border:2px solid #21529f; font-family:inherit;}
#header .headerMiddle .search .searchForm {display:flex;}
#header .headerMiddle .search .searchForm button {height:3em; width:3em; background:#21529f; text-indent:-9999px; overflow:hidden; position:relative;}
#header .headerMiddle .search .searchForm button:after {content:""; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2em; height:2em; background:url(../../assets/img/common/ico_search.png) no-repeat 0 0 / cover;}
#header .utils {display:flex; justify-content:flex-end;}
#header .utils > li.microdust {border-left:0; position:relative;}
#header .utils > li.microdust:before {content:""; display:inline-block; width:26px; height:26px; vertical-align: middle; margin-right:0.25em;}
#header .utils > li.microdust[data-state]:before {background:url(../../assets/img/common/ico_microdust.png) no-repeat; background-size:cover;}
#header .utils > li.microdust[data-state='1']:before {background-position:0 0;}
#header .utils > li.microdust[data-state='2']:before {background-position:-26px 0;}
#header .utils > li.microdust[data-state='3']:before {background-position:-52px 0;}
#header .utils > li.microdust[data-state='4']:before {background-position:-78px 0;}
#header .utils > li.microdust .microdust_tooltip {position:absolute; top:calc(100% + 0.5em); max-width:300px; width:200%; right:0; padding:1.5em; background:#dbf3ff; border:1px solid #649db9; color:#555; z-index:10; display:none;}
#header .utils > li.microdust .microdust_tooltip > ul > li {padding-left:0.5em; position:relative; line-height:1.2; margin-bottom:0.5em; word-break: keep-all;}
#header .utils > li.microdust .microdust_tooltip > ul > li:last-child {margin-bottom:0;}
#header .utils > li.microdust .microdust_tooltip > ul > li:before {content:""; display:block; width:2px; height:2px; left:0; top:0.25em; background:#555; position:absolute;}
#header .utils > li.microdust > a {font-size:0.9em;}
#header .utils > li.microdust > a:hover + .microdust_tooltip,
#header .utils > li.microdust > a:focus + .microdust_tooltip {display:block;}
#header .utils > li.corona {margin-left:1.5em;}
#header .utils > li.corona a {display:inline-block;background:#21529f; color:#fff; padding: 0.5em 0.75em 0.3em; vertical-align: middle; border-radius:0.3em; font-size:0.9em;}

#header .topNavSub {display:none; word-break:keep-all;}
#header .areaList:after {content:""; display:block; clear:both;}
#header .areaList > li {float:left; width:12.5%;}
#header .areaList > li > a {display:block; text-align: center;}
#header .topNavSub li a[target='_blank']:after {vertical-align: 0; margin-left:5px;}
#header .topNavSub > li > a[target='_blank']:after {display:none;}
#sideNav .sideNavMenu > ul > li a[target='_blank']:after {vertical-align: 0; margin-left:5px;}

#topSearch {display:none;}

.areaList > li > a:before {content:""; display:block; margin:0 auto 0.5em; width:60px; height:60px; background:url(../../assets/img/main/ico_area.png?v=202112081638) no-repeat; transform:scaleY(0.9) scaleX(0.9);}
.areaList > li > a:hover:before,
.areaList > li > a:focus:before {animation: pong2 0.5s ease-out;}
.areaList > li > a.type1:before {background-position: 0 0;}
.areaList > li > a.type2:before {background-position: -60px 0;}
.areaList > li > a.type3:before {background-position: -120px 0;}
.areaList > li > a.type4:before {background-position: -180px 0;}
.areaList > li > a.type5:before {background-position: -240px 0;}
.areaList > li > a.type6:before {background-position: -300px 0;}
.areaList > li > a.type7:before {background-position: -360px 0;}
.areaList > li > a.type8:before {background-position: -420px 0;}
.areaList > li > a.type9:before {background-position: -480px 0;}
.areaList > li > a.type10:before {background-position: -540px 0;}
.areaList > li > a.type11:before {background-position: -600px 0;}
.areaList > li > a.type12:before {background-position: -660px 0;}
.areaList > li > a.type13:before {background-position: -720px 0;}
.areaList > li > a.type14:before {background-position: -780px 0;}
.areaList > li > a.type15:before {background-position: -840px 0;}
.areaList > li > a.type16:before {background-position: -900px 0;}

#footer {font-family: "GmarketSans", sans-serif;}
#footer * {box-sizing: border-box;}
#footer {background:#f9f9f9; padding:0 0 100px;}
#footer .footAttach {border-bottom:1px solid #ddd; border-top:1px solid #ddd; margin-bottom:1em; padding: 1em; word-break: keep-all;}
#footer .footAttach a {text-decoration:underline; text-underline-position:under;}
#footer .familySite:after {content:""; display:block; clear:both;}
#footer .familySite .cell {border:1px solid #ccc; height:2.5em;}
#footer .familySite .cell select {vertical-align: top; height:100%; border:0; background:transparent url(../../assets/img/common/ico_select_arrow.png) no-repeat center right 0.5em; font-family:inherit;}
#footer .familySite .cell button {height:100%; padding:0 0.5em; position:relative;}
#footer .familySite .cell button:before {content:""; display:block; width:1px; height:1em; background:#ccc; position:absolute; top:calc(50% - 0.5em); left:0;}
#footer .footerSns:after {content:""; display:block; clear:both;}
#footer .footerSns > a {display:block; float:left; position: relative; width:2.5em; height:2.5em; text-indent: -9999px;}
#footer .footerSns > a:before {content:""; display:block; width:100%; height:100%; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:url(../../assets/img/common/ico_sns.png?v=202110221314) no-repeat; background-size:cover;}
#footer .footerSns .mail:before { background-position: 0 center;}
#footer .footerSns .twitter:before { background-position: -2.5em center;}
#footer .footerSns .facebook:before { background-position: -5em center;}
#footer .footerSns .naverblog:before { background-position: -7.5em center;}
#footer .footerSns .kakaostory:before { background-position: -10em center;}
#footer .footerSns .youtube:before { background-position: -12.5em center;}
#footer .footerSns .badatv:before { background-position: -15em center;}
#footer .footerSns .insta:before { background-position: -17.5em center;}
#footer .footerSns .befm {width:5em;}
#footer .footerSns .befm:before { background-position: -20em center;}
#footer .footerBody {margin-top:3em;}
#footer .footerMenu li {line-height:1; margin-bottom:1em;}
#footer .footerMenu li:before {content:""; display:inline-block; width:2px; height:2px; background:#333; margin-right:0.5em; vertical-align:middle;}
#footer .footerMenu span {color:#0f6ca1;}
#footer .footMark > a {margin-right:2em; display:inline-block; vertical-align:center;}
#footer .footMark > a:last-child {margin-right:0;}
#footer .footMark img {vertical-align:top;}
#footer .footMinwon {margin-bottom:1em;}
#footer .footMinwon > a {display:block;}
#footer .footMinwon .tit {font-size:1.5em;}
#footer .footTxt > div {margin-bottom:1em;}
#footer .footTxt > div > a {color:#0f6ca1; border-bottom:1px solid #0f6ca1; margin-right:1.5em;}
#footer .footTxt > div > a:last-child {margin-right:0;}
#footer .copy {margin-top:1em;}

#scrollTop {position:fixed; bottom:1em; right:1em; font-family: "GmarketSans", sans-serif;}
#scrollTop > span {font-size: 0.85em;}
#scrollTop:before {content:""; display:block; width:11px; height:37px; background:url(../../assets/img/common/ico_scrolltop.png) no-repeat center top; margin:0 auto 0.5em; transition: all 0.3s ease-in-out;}
#scrollTop:hover:before,
#scrollTop:focus:before {height:57px;}

/* 재난 레이어팝업 */
#disaster {position:relative; z-index:3; transition:all 0.3s ease-in-out;}
#disaster .disasterInner {display:block; height:100%; margin:0 auto; overflow:hidden;}
#disaster .disasterInner > a {height:100%; display:none;}
#disaster.active .disasterInner > a {display:block;}
#disaster .disasterTitle {font-size:1.4em; color:#fff; margin-bottom:1em; text-align: center;}
#disaster .disasterTitle > span {display:inline-block; vertical-align:top; border-bottom:3px solid #fff; margin-left:2.5em; position: relative;}
#disaster .disasterTitle > span:before {content:""; display:block; width:2em; height:2em; background:url(../../assets/img/common/ico_disaster.png) no-repeat center center; position:absolute; top:50%; right:calc(100% + 0.5em); transform:translateY(-50%);}
#disaster .disasterContents {font-size:1.1em; line-height:1.4; color:#fff; word-break: keep-all;}
/* #disaster .disasterClose {position:absolute; left:50%; top:100%; transform:translate(-50%); width:180px; height:30px; background:url(../../assets/img/common/bg_disaster_more.png) no-repeat center center / auto 100%; overflow:hidden; color:#fff;} */
#disaster[data-type] .disasterInner {max-width:1200px;}
#disaster[data-type] .disasterInner > a {padding:2em 1em 4em;}
#disaster[data-type='1'] {background:url(../../assets/img/common/bg_disaster.jpg) no-repeat center bottom / cover;}
#disaster[data-type='2'] {background:url(../../assets/img/common/bg_disaster_warn.jpg) no-repeat center bottom / cover;}
/* #disaster[data-type='2'] .disasterClose {background:url(../../assets/img/common/bg_disaster_warn_more.png) no-repeat center center / auto 100%;} */
#disaster img[data-response='pc'] {display:block; width:100%;}
#disaster img[data-response='ta'] {display:none; width:100%;}
#disaster img[data-response='mo'] {display:none; width:100%;}
#disaster .disasterClose {position:absolute; bottom:1em; right:1em; color:#fff; line-height:1; background:rgba(0,0,0,.5); padding:0 0 0 0.5em; font-size:0.9em;}
#disaster .disasterClose label {display:inline-block; height:3em; line-height:3em; white-space:nowrap;}
#disaster .disasterClose button {width:3em; height:3em; text-indent:-9999px; overflow:hidden; background:url(/humanframe/global/assets/img/common/ico_close_w.png) no-repeat center center;}

@media all and (min-width:769px){
	#footer .footerTop .inner {display:flex;}
	#footer .familySite .cell {display:flex; margin-right:0.5em;}
	#footer .familySite .cell:last-child {margin-right:0;}
}

@media all and (min-width:1201px) { 
	
	#header .headerTop .inner {height:45px;}
	#header .headerBottom .logo {display:none;}
	
	#header .menus > ul > li.corona {display:none;}
	#header .btnNav {display:none;}
	#header .btnSearch {display:none;}
	
	#topNav:after {content:""; display:block; clear:both;}
	#topNav .topBtn {display:none;}
	#topNav .topNavMenus {float:right; display:table; height:60px; position:relative;}
	#topNav .topNavMenus > li {display:table-cell; vertical-align: middle;}
	#topNav .topNavMenus > li > a {font-size: 1.3em; display:table; height:100%; padding-left:1.5em; margin-left:1.5em; position:relative;}
	#topNav .topNavMenus > li > a:before {content:""; display:block; width:1px; height:1em; background:#ddd; position:absolute; top:calc(50% - 0.5em); left:0;}
	#topNav .topNavMenus > li > a > span {display:table-cell; vertical-align: middle; position:relative;}
	#topNav .topNavMenus > li > a > span:after {content:""; display:block; position:absolute; bottom:0; left:0; width:0; height:5px; background:#21529f;}
	#topNav .topNavMenus > li:first-child > a:before {display:none;}
	#topNav .topNavMenus > li:hover > a > span,
	#topNav .topNavMenus > li.superActive > a > span {font-weight:bold; color:#21529f;}
	#topNav .topNavMenus > li.superActive > a > span {font-weight:bold; color:#21529f;}
	#topNav .topNavMenus > li.superActive > a > span:after {width:100%;}
	#topNav .topNavMenus .dropdown {display:none;}
	
	#header .topNavSub {position:absolute; right:0; top:100%; width:100%; min-width:1080px; padding:1em; max-height:calc(100vh - 196px); overflow-y:auto;}
	#header .topNavSub > li {width:25%; float:left; padding:0 1em 0.5em; border-right:1px solid #ddd;}
	#header .topNavSub > li:nth-child(4n) {border-right:0;}
	#header .topNavSub > li > a {display:table; width:100%; height:2.5em; font-size:1.15em; border:1px solid #ddd; text-align: center;}
	#header .topNavSub > li > a > span {display:table-cell; vertical-align: middle;}
	#header .topNavSub > li > a:hover,
	#header .topNavSub > li.superActive > a {border-color:#3287c3; background:#3287c3; color:#fff;}
	#header .topNavSub > li > ul {padding: 1em;}
	/* #header .topNavSub > li > ul > li:not(:last-child) {margin-bottom:0.1em;} */
	#header .topNavSub > li > ul > li > a {line-height:1.2; font-size:1em}
	#header .topNavSub > li > ul > li > a:before {content:""; display:inline-block; width:2px; height:2px; background:#333; vertical-align: middle; margin-right:0.5em;}
	#header .topNavSub > li > ul > li > a:hover,
	#header .topNavSub > li > ul > li.superActive > a {text-decoration:underline; text-underline-position:under;}
	#header .topNavSub > li > ul > li > ul {display:none;}
	
	#header .areaList > li:nth-child(n+9) {margin-top:1em;}
	
	#topNavBack {display:none; background:#fff; position:absolute; top:100%; left:0; right:0; overflow:hidden;}
	#topNavBack .topNavTit {position:absolute; top:0; left:0; bottom:0; background:#f9f9f9 url(../../assets/img/common/bg_nav.png) no-repeat right bottom -30px;}
	#topNavBack .topNavTit span {font-size: 1.8em; font-weight:bold; line-height:1.2; position:absolute; top:3em; right:3em;}
	
	#navBack {position:fixed; top:196px; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); display:none;}
	
	#container {margin-top:196px;}
	
	#footer .footerTop .inner {justify-content:space-between;}
	#footer .footerTop .inner:after {display:none;}
	#footer .footerTop .inner > div {display:flex;}
	
	#footer .footerBody .inner {display:flex;}
	#footer .footerBody .inner > article {display:flex; width:50%;}
	#footer .footerBody .inner > article > div {border-left:1px solid #ccc; padding: 0 1.5em;}
	#footer .footerBody .inner > article > .footerLogo {border-left:0;}
	#footer .footerAddress {font-size:0.9em;}
	#footer .footerMenu {width:50%;}
	#footer .footMark {width:50%; text-align:center;}
	#footer .footMark img {vertical-align: middle;}
}


@media all and (max-width:1200px) {
	
	#header .inner {padding:0 0.5em;}
	#header .headerTop .inner {height:3.5em;}
	
	#header .headerMiddle {display:none;}
	
	#header .headerBottom {height:5em;}
	#header .headerBottom .inner {height:100%;}
	#header .headerBottom .logo {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
	#header .headerBottom .logo img {height:3em;}
	
	#header .btnNav {position:absolute; top:50%; right:0.5em; transform:translateY(-50%); width:2.5em; height:2.5em; overflow:hidden; text-indent:-9999px;}
	#header .btnNav > span {position:absolute; display:block; width:80%; height:1px; background:#333; left:50%; transform:translate(-50%,-50%); transition: all 0.3s ease-out;}
	#header .btnNav > span:nth-child(1) {top:20%;}
	#header .btnNav > span:nth-child(2) {top:50%;}
	#header .btnNav > span:nth-child(3) {top:80%;}
	
	#header.active .btnNav > span:nth-child(1) {transform:translate(-50%,-50%) rotate(45deg); top:50%;}
	#header.active .btnNav > span:nth-child(2) {left:-50%; opacity:0;}
	#header.active .btnNav > span:nth-child(3) {transform:translate(-50%,-50%) rotate(-45deg); top:50%;}

	#header .btnSearch {position:absolute; top:50%; left:0.5em; transform:translateY(-50%); width:2.3em; height:2.3em; text-indent:-9999px; overflow:hidden; background:url(../../assets/img/common/ico_search.png) no-repeat -2.3em 0 / cover;}
	#header .btnSearch.active + #topSearch {display:block;}
	#header .btnSearch.active.show + #topSearch {opacity:1;}
	#topSearch {background:#fff; position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; opacity:0; transition: opacity 0.3s ease-in-out;}
	#topSearch .text {width: 250px; height:2.5em; border:0; border-bottom:2px solid #333; font-family: inherit;}
	#topSearch button[type=submit] {font-size:1.2em; height:2.5em; width:2.5em; text-indent:-9999px; overflow:hidden; position:relative;}
	#topSearch button[type=submit]:after {content:""; display:block; width:1.5em; height:1.5em; position:absolute; top:calc(50% - 0.75em); left:calc(50% - 0.75em); background:url(../../assets/img/common/ico_search.png) no-repeat -1.5em 0 / cover; transform:scale(1.2);}
	#topSearch #srchFrm2 {position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); padding: 0 1.5em;}
	#topSearch #srchFrm2 .field {display:table;}
	#topSearch #srchFrm2 .field > div {display:table-cell; vertical-align: middle;}
	#topSearch #srchFrm2 .keyword {counter-reset: keyword; background:#f9f9f9; padding: 1.5em;}
	#topSearch #srchFrm2 .keyword > li:not(:last-child) {margin-bottom:1em;}
	#topSearch #srchFrm2 .keyword > li > a:before {counter-increment: keyword; content: counter(keyword); display:inline-block; vertical-align: middle; border:1px solid #ccc; width:1.5em; height:1.5em; overflow:hidden; text-align: center; margin-right:0.5em;}
	#topSearch .close {position:absolute; top:50%; right:1em; width:2.5em; height:2.5em; text-indent:-9999px; overflow:hidden; background:url(../../assets/img/common/ico_close_large.png) no-repeat center -2.5em / cover; transform:translateY(-50%);}

	#topNav {display:none; position:fixed; bottom:0; opacity:0; right:-360px; top:8.5em; background:#f9f9f9 url(../../assets/img/common/bg_nav.png) no-repeat right bottom -30px; width:100%; max-width:360px; transition: all 0.5s ease-in-out;}
	.active #topNav {display:block;}
	.show #topNav {opacity:1; right:0;}
	#topNav .topBtn {display:table; width:100%; border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:0.5em; background:#fff;}
	#topNav .topBtn > li {display:table-cell; vertical-align: middle; width:50%;}
	#topNav .topBtn > li > a {display:table; width:100%; text-align: center; background:#3287c3; border:1px solid #3287c3; height:3em; white-space:nowrap; color:#fff;}
	#topNav .topBtn > li > a:first-child {border-right:0;}
	#topNav .topBtn > li:nth-child(2) > a {background:#fff; border:1px solid #3287c3; color:#3287c3;}
	#topNav .topBtn > li > a > span {display:table-cell; vertical-align: middle;}
	#topNav .topNavMenus {overflow-y:auto; height:calc(100vh - 4em - 5em - 3.5em)}
	#topNav .topNavMenus .dropdown {position:absolute; top:1em; right:0.5em; overflow:hidden; text-indent:-9999px; font-size:inherit; background:#f9f9f9; border:1px solid #ddd;}
	#topNav .topNavMenus .dropdown:before,
	#topNav .topNavMenus .dropdown:after {content:""; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#333;}
	#topNav .topNavMenus .dropdown:before {width:1px; height:50%;}
	#topNav .topNavMenus .dropdown:after {width:50%; height:1px;}
	#topNav .topNavMenus li.active > .dropdown:before {display:none;}
	#topNav .topNavMenus li {position:relative;}
	#topNav .topNavMenus li > a {display:table; width:100%;}
	#topNav .topNavMenus > li > a > span {display:table-cell; vertical-align: middle; font-size: 1.1em;}
	
	#topNav .topNavMenus > li {background:#fff;}
	#topNav .topNavMenus > li > a {height: 4em; padding: 0 3em 0 1em; border-bottom:1px solid #ddd;}
	#topNav .topNavMenus > li.topNavArea > a {border-bottom:0;}
	#topNav .topNavMenus > li > .dropdown {width:2em; height:2em; }
	#topNav .topNavMenus ul {transition: all 0.5s ease-in-out; overflow:hidden;}
	#topNav .topNavMenus li.superActive > a {color:#21529f;}
/* 	#topNav .topNavMenus li.active.superActive > ul {display:block;} */
	#topNav .topNavMenus li.active.superActive > .dropdown:before {display:none;}
	
	#topNav .topNavTit {display:none;}
	
	#topNav .topNavSub {border-bottom:1px solid #ddd;}
	#topNav .topNavSub ul {display:none;}
	#topNav .topNavSub > li > a {height:3em; padding:0 3em 0 2em;}
	#topNav .topNavSub > li > a > span {display:table-cell; vertical-align: middle; font-size: 1.1em;}
	#topNav .topNavSub > li > .dropdown {width:2em; height:2em; top:0.5em; right:0.5em; font-size: 1em; background:#f9f9f9;}
	#topNav .topNavSub > li > ul {background:#f9f9f9; border-top:1px solid #ddd;}
	#topNav .topNavSub > li.active + li {border-top:1px solid #ddd;}
	#topNav .topNavSub > li.active.superActive + li {border-top:1px solid #ddd;}
	#topNav .topNavSub > li > ul > li {margin: 0.5em 1em 0.5em 1em;}
	#topNav .topNavSub > li > ul > li:first-child {margin-top:1em;}
	#topNav .topNavSub > li > ul > li:last-child {margin-bottom:1em;}
	#topNav .topNavSub > li > ul > li > a {padding-left: 1em;}
	#topNav .topNavSub > li > ul > li > a:before {content:""; display:inline-block; width:2px; height:2px; background:#333; vertical-align: middle; margin-right:0.5em;}
	#topNav .topNavSub > li > ul > li > .dropdown {border:0;width:1.5em; height:1.5em; top:0; right:0;}
	#topNav .topNavSub > li > ul > li > ul {padding: 0 0 0 1.5em;}
	#topNav .topNavSub > li > ul > li > ul > li > a:before {content:"-"; vertical-align:middle; margin-right:0.5em;}
	#topNav .topNavSub > li > ul > li > ul > li .dropdown {width:1.5em; height:1.5em; border:0; top:0; right:0;}
	#topNav .topNavSub > li > ul > li > ul > li ul {padding:0 0 0 1em;}
	#topNav .topNavSub > li > ul > li > ul > li li > a {font-size:0.9em;}
	#topNav .topNavSub > li > ul > li > ul > li li > a:before {content:"-"; vertical-align:middle; margin-right:0.5em;}
	#topNav .topNavSub.areaType {display:block; padding: 0 1em 1em;}
	#topNav .topNavSub.areaType .areaList {display:block;}
	#topNav .topNavSub.areaType .areaList > li {width:25%;}
	#topNav .topNavSub.areaType .areaList > li > a {display:block;}
	#topNav .topNavSub.areaType .areaList > li > a > span {display:inline-block; font-size:0.9em;}
	
	#topNavBack {display:none;}
	
	#navBack {position:fixed; top:8.5em; left:0; right:0; bottom:0; background:rgba(0,0,0,.7); display:none; opacity:0; transition: all 0.5s ease-in-out;}
	.active #navBack {display:block;}
	.show #navBack {opacity:1;}
	
	#disaster ~ #navBack {top:8.5em;}
	#disaster ~ .headerTop {height:3.5em;}
	#disaster ~ .headerBottom #topNav {top:8.5em;}
	#disaster.active ~ #navBack {top:calc(8.5em + 149px);}
	#disaster.active ~ .headerBottom #topNav {top:calc(8.5em + 149px);}
	#disaster img[data-response='pc'] {display:none;}
	#disaster img[data-response='ta'] {display:block;}
	#disaster img[data-response='mo'] {display:none;}
	
	#container {margin-top:8.5em;}
	#header.disasterOn ~ #container {margin-top:calc(8.5em + 149px);}
	
	#footer .footerTop .inner {flex-flow:row wrap; text-align: center; padding:0 3em;}
	#footer .footerBody .inner {padding:0 3em; font-size: 0.85em;}
	#footer .footerBody .inner > article {float:left;}
	#footer .footerBody .inner > article:first-child {width:60%; padding-right:2em;}
	#footer .footerBody .inner > article:last-child {width:40%; border-left:1px solid #ccc; padding-left: 2em;}
	
	#footer .footerLogo {margin-bottom:2em;}
	#footer .familySite {display:flex; width:100%; justify-content:center;}
	#footer .familySite .cell {width:calc(33.3333% - 1em);}
	#footer .familySite .cell select {width:calc(100% - 5.7em);}
	#footer .familySite .cell button {width:5.3em;}
	#footer .footerSns {display:flex; justify-content:center; margin:1em 0 0; width:100%;}
	#footer .footerMenu {margin-bottom:2em;}
}

@media all and (max-width:768px){
	#header .headerTop .logo img {height:14px;}
	#header .menus {font-size:0.5em;}
	/*200731 수정*/
	#header .menus .mypage,
	#header .menus .logout,
	#header .menus .login,
	#header .menus .regist,
	#header .menus .microdust {display:none;}
	
	#header .menus > ul > li.language select {font-size:0.8em; height:5em; border-radius: 2.5em 0 0 2.5em;}
	#header .menus > ul > li.language button {width:auto; font-size:0.8em; padding-right:1em; height:5em; border-radius:0 2.5em 2.5em 0;}
	
	#footer .footerBody {margin-top:2em;}
	
	#footer .footerTop .inner {padding: 0 1.5em;}
	#footer .footerBody .inner {padding: 0 1.5em;}
	
	#footer .footerBody .inner > article {width:100% !important; text-align: center; padding:0 !important; border:0 !important;}
	
	#footer .familySite {display:block;}
	#footer .familySite .cell {width:100%; margin-top:-1px; height:3em;}
	#footer .footerAddress {margin-bottom:1em;}
	#footer .footerMenu {text-align: center;}
	#footer .footerMenu ul {display:inline-block;}
	#footer .footerMenu li {display:inline-block; margin-right:1em;}
	#footer .footerMenu li:last-child {margin-right:0;}
	
	/* #header.disasterOn ~ #container {margin-top:calc(8.5em + 2em + 137px);}
	#disaster.active {height:137px;}
	#disaster.active ~ #navBack {top:calc(8.5em + 2em + 137px);}
	#disaster.active ~ .headerBottom #topNav {top:calc(8.5em + 2em + 137px);} */
	/* #disaster .disasterClose {background:#d5343c; width:100%; height:2em;}
	#disaster[data-type='2'] .disasterClose {background:#44839c;} */
	#disaster img[data-response='pc'] {display:none;}
	#disaster img[data-response='ta'] {display:none;}
	#disaster img[data-response='mo'] {display:block;}
	
}