/* common */
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&display=swap');
* {outline: none;}
html, body {margin: 0 auto; padding: 0; font-family: 'Nanum Gothic', '나눔고딕', sans-serif;}
a {text-decoration: none; color: #000;}
ul {list-style: none; padding: 0;}
caption {display: none;}
.wrap {width: 1400px; margin: 0 auto;}
.hidden {display: none;}
.dIb {display: inline-block;}
.v_helper {vertical-align: middle; height: 100%; display: inline-block; width: 0;}


/* header */
#header {position: fixed; top: 0; width: 100%; z-index: 2021;}
div#hdTop {background: #1a508b; color: #fff;}
div#hdTop a {color: #fff; display: inline-block; padding: 10px; font-size: 14px; font-weight: bold; transition: 0.3s all ease;}
div#hdLeft a {background: #19456b; border-right: 2px solid #65839d; border-bottom: 4px solid #19456b;}
div#hdLeft a:hover {background: #fff; border-bottom: 4px solid #ffb400; color: #000;}
div#hdRight {float: right;}
div#hdRight a:hover {color: #ffb400;}

#topNav {background: #fff; position: relative; text-align: right;}
div#logo {float: left;}
div#logo a {padding: 11px 0; display: block;}
div#hdSearch {border: 1px solid #ddd; cursor: pointer; width: 45px; height: 45px; float: right; margin: 17px; background: url(/resources/img/icon/search.png) center no-repeat;}

div.menu_wrap {vertical-align: top; display: inline-block; margin-right: 80px;}
ul.hd_menu {float: left; vertical-align: top; font-size: 14px; margin: 0;}
ul.hd_menu:hover .hd_sub {border-color: #ddd; border-top: 4px solid #1a508b; background: #fafafa;}
ul.hd_menu:hover >li>a {color: #1a508b;}
ul.hd_menu>li {width: 150px; text-align: center; letter-spacing: -1px; padding: 0 px;}
ul.hd_menu>li>a {font-weight: bold; font-size: 18px; display: block; padding: 30px 0;}
ul.hd_sub {text-align: left;  line-height: 2em; padding-bottom: 15px; padding-left: 15px; border: 1px solid #fff; border-bottom: 0; border-top: 4px solid #fff; display: none;}
ul.hd_sub li {height: 28px;}
div.menu_bg {position: absolute; width: 100%; border-top: 1px solid #b2b2b2; top: 80px; display: none;}


/* footer */
#footer {background: #535353; color: #fff; text-align: center; font-size: 14px;}
#footer a {color: #fff;}
ul#ftLinks {border-bottom: 1px solid #909090; font-weight: bold; margin: 0;}
ul#ftLinks li {display: inline-block;  padding: 30px 15px}
ul#ftLinks a {transition: 0.3s all ease;}
ul#ftLinks a:hover {color: #ffb400;}
ul#ftAddr {line-height: 1.6em; padding: 20px 0 30px; margin: 0;}
ul#ftAddr strong {margin-left: 10px;}


/* sub */
#subWrap {margin-top: 120px; min-height: 678px;}
div#subVisual {text-align: center; background: url(/resources/img/bg/subVisual_bg.jpg) center no-repeat; display: table; width: 100%; height: 250px;}
div#subVisual h2 {display: table-cell; vertical-align: middle; color: #fff; font-size: 34px; letter-spacing: 3px;}

#subMenu {width: 240px; display: inline-block; vertical-align: top; margin-right: 30px;}
#subMenu h2 {text-align: center; color: #fff; font-size: 24px; margin: 0; height: 130px; display: table-cell; vertical-align: middle; width: 240px; background: url(/resources/img/bg/subMenu_bg.jpg) no-repeat;}
#subMenu>ul {margin: 0;}
h4.sM_title {border: 1px solid #ddd; border-bottom: none; margin: 0; padding: 15px; cursor: pointer;}
#subMenu>ul>li:last-child h4.sM_title {border-bottom: 1px solid #ddd;}
h4.sM_on {border-color: #5da3cb;}
h4.sM_title:hover, h4.sM_on {background: #5da3cb; color: #fff;}
h4.sM_title:hover span.onOff_ico {filter: brightness(2);}
span.onOff_ico {background: url(/resources/img/icon/sub_off.png) no-repeat; float: right; width: 16px; height: 16px;}
h4.sM_on span.onOff_ico {background: url(/resources/img/icon/sub_on.png) no-repeat}
ul.sub_depth {background: #f4f4f4; padding: 10px; padding-left: 20px; display: none;}
ul.sub_depth li {line-height: 2em; font-size: 15px;}
ul.sub_depth li:before {content: "·"; margin-right: 5px;}
ul.sub_depth a:hover, a.current_page {color: #1a508b; font-weight: bold;}

#contentsWrap {display: inline-block; width: 1120px; margin-bottom: 100px;}
#contentsHead {margin: 40px 0;}
h3#pageTitle {font-size: 24px; display: inline-block; margin: 0;}
div#breadCrumb {float: right; font-size: 12px; padding: 7px 0;}
div#breadCrumb a {vertical-align: middle;}
span.breadArrow {display: inline-block; vertical-align: middle; margin: 0 7px; height: 13px; width: 13px; background: url(/resources/img/icon/breadArrow.png) center no-repeat;;}