@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR');

/* ****************************** *
   RESET
 * ****************************** */
body { font-size: 0; }
* { padding:0; margin:0; font-family: 'Noto Sans KR', 'Malgun Gothic'; line-height: 1.2; color: #212121; }
img { border: 0; }
a, span { display: inline-block; }
a { cursor: pointer; text-decoration:none;}
a:hover { color: #0165c3 !important; text-decoration: none; }
li { list-style: none;}
table { width: 100%; border-spacing: 0; border-collapse: collapse; }
select { line-height:1;border: 1px solid #999999; padding: 7px 10px; font-size: 14px;}
input { line-height:1;border: 1px solid #999999; padding: 8px 10px; font-size: 14px;}
button { background-color: #333333; color: white; line-height:1; padding: 12px 18px; font-size: 14px; border:0;}

/* ****************************** *
   COMMON CLASS
 * ****************************** */

.centered-wrap { width: 1420px; margin: 0 auto;}
.mobile-only { display: none; }
/*.pc-only { display: block; }*/
.aright { text-align: right !important; }
.aleft { text-align: left !important;}
.acenter { text-align: center !important;}
.bullet-black { padding-left: 7px; background:url("/image/sub/list.bullet.black.png") left center no-repeat;}
.indent-1 { padding-left: 10px;}
.blue { color: #166ae0; }
strong.blue { color: #166ae0; border-bottom: 1px solid #166ae0; padding-bottom: 1px;}
strong.black { color: #212121; border-bottom: 1px solid #212121; padding-bottom: 1px;}
.subtitle { display: block; font-size: 15px; font-weight: bold; color: #888;}

/* ****************************** *
   LAYOUT & SECTION
 * ****************************** */

#top { position: fixed; width: 100%; top: 0; z-index: 2;}
#top .link { height: 40px; background-color: #2b4365; }
#top .link .left { float: left; }
#top .link a { height: 40px; border-left: 1px solid #556984; text-align: center; padding: 0 22px;}
#top .link a span { color: white; font-size: 13px; line-height: 40px; }
#top .link a.last-item { border-right: 1px solid #556984; }
#top .link .right { float: right; }
#top .link .right a { background-color: #0174b7; }
#top .menu { height: 89px; background-color: white; border-bottom: 1px solid #dee1e6; }
#top .menu .centered-wrap > * { float: left; }
#top .menu .logo { margin-top: 20px; }
#top .menu .main {     margin-left: 171px; margin-top: 35px; }
#top .menu .main a { font-size: 17px; margin-left: 50px; text-align: center; }
#top .menu .main a.more { margin-right: 46px; position:relative; top: 1px;}
#top .menu .util { float: right; margin-top: 29px; }
#top .menu .util .kor { margin-left: 15px; }
#top .menu .util .map { margin-right:10px; }
#top .menu .sub { clear: both; display: none; width: 730px; margin-left: 355px; margin-top: 28px;}
#top .menu .sub > div { padding-left: 20px; border-left: 1px solid #e8ebef; width: 110px; margin-left:25px;}
#top .menu .sub > div:nth-child(2) { width:100px; margin-left:15px;}
#top .menu .sub > div:nth-child(3) { width:190px; margin-left:15px;}
#top .menu .sub > div:nth-child(4) { width:120px; margin-left:15px;}
#top .menu .sub > div > a { display: block; font-size: 13px; margin-top: 22px; text-decoration:none; }
#top .menu .sub > div > a:first-child { margin-top: 0px; }

#top .menu.active { height: 440px; border-bottom: 1px solid #2b4365; }
#top .menu.active .sub { display: flex; }

#middle { min-height: 600px; background-color: #e9ecf1; padding-top: 25px; margin-top:130px; padding-bottom: 30px; }
#middle .centered-wrap { display: flex; flex-direction: row;}

#middle #lnb { width: 210px; background-color: #2b4365; }
#middle #lnb div.submenu { display:none; }
#middle #lnb h1{ line-height: 142px; text-align: center; border-bottom: 1px solid #e9ecf1; font-weight: bold; font-size: 25px; color: white;}
#middle #lnb a { width:200px; line-height: 50px; font-size: 16px; color: #b1bbca; display: block; text-align: left; text-indent: 30px;}
#middle #lnb a.active { background-color: #0e1622; color: white; }
#middle #lnb a:hover { color: #ffffff !important; }


#middle #content { min-height: 600px; width: 1210px; background-color: white; padding: 40px 50px 50px 50px;}
#middle #content .title { height: 59px; border-bottom: 1px solid #dee1e6; margin-bottom: 45px; }
#middle #content .title h2 { font-size: 25px; float: left; font-weight: bold;}
#middle #content .title .route { float: right; font-size: 13px; color: #999999; display: flex; flex-direction: row; }
#middle #content .title .route a { font-size: 13px; color: #999999; }
#middle #content .title .route span { font-size:0; background:url("../image/common/route.separator.png") no-repeat center center; width: 5px; height: 13px; margin:0 12px;  }
#middle #content > *:nth-child(2) { margin-top:0;}

#bottom { background-color: #212121; height: 180px; text-align: center; }
#bottom .email { margin-left: 7px; }
#bottom .policy { padding-top: 23px;}
#bottom .address { font-size: 14px; color: #c1c6cd; margin-top: 14px;}
#bottom .copyright { font-size: 13px; color: #7d8894; margin-top: 11px;}


/* ****************************** *
   CONTENT COMMON STYLE
 * ****************************** */
#content > table { font-size: 15px; }
#content > h3 { font-size: 20px; }
#content > h3.blue { font-size: 18px; color: #2b4365; margin-top: 45px; border-bottom: 1px solid #2b4365; display: inline-block; padding-bottom:1px; }
#content > h4 { font-size: 16px; margin-bottom: 6px; margin-top: 40px; padding-bottom: 1px;  border-bottom: 1px solid #212121; display: inline-block; }
#content > h5 { font-size: 15px; margin-top: 15px; margin-left: 1px; padding-left: 7px; background:url("/image/sub/list.bullet.black.png") left center no-repeat; }
#content > h6 { font-size: 15px; margin-top: 15px; margin-left: 10px; padding-left: 10px; background:url("/image/sub/list.bullet.black.png") left center no-repeat; }
#content > p { font-size: 15px; line-height: 1.9; margin-top:10px;}
#content > ol { font-size: 15px; margin-top: 13px; margin-left: 15px; width: calc(100% - 15px);}
#content > ol li { line-height: 1.9; list-style:decimal; }
#content > ul { font-size: 15px; margin-top: 13px; margin-left: 15px; width: calc(100% - 15px);}
#content > ul li { line-height: 1.9; }
#content > pre { font-size: 15px; margin-top: 15px; line-height: 1.6;}
#content .tabs { margin-bottom: 5px; display:flex; flex-wrap:wrap;}
#content .tabs a { font-size: 15px; padding: 10px 15px; border-radius: 20px; border: 1px solid #c3c9cf; margin-right: 10px; background-color: #e7e9eb;}
#content .tabs a.active { background-color: #2b4365; color: white; border-color: #2b4365; }
#content .comment { font-size: 14px;}


/* ****************************** *
   TABLE STYLE
 * ****************************** */


table.table-basic { margin-top: 15px;  }
table.table-basic tr th { line-height: 34px; border:1px solid #dee1e6; background-color: #f5f5f5; padding: 5px 15px; color: #2b4365; font-size: 14px; }
table.table-basic tr td { line-height: 34px; border:1px solid #dee1e6; text-align: center; padding: 5px 15px; font-size: 14px; }
table.table-basic thead tr:first-child th { border-top: 1px solid #2b4365; }
table.table-basic thead tr:last-child th { border-bottom: 1px solid #2b4365; }
table.table-basic tbody th { color: #2b4365;}
table.table-basic tfoot tr:first-child th,
table.table-basic tfoot tr:first-child td { border-top: 1px solid #2b4365; }
table.table-basic tfoot tr:last-child th,
table.table-basic tfoot tr:last-child td { border-bottom: 1px solid #2b4365; }
table.table-basic tfoot td { text-align: left; color: #999999; font-size: 14px; }

table.table-basic tr th:first-child { border-left: none; }
table.table-basic tr th:last-child { border-right: none; }
table.table-basic tr td:first-child { border-left: none; }
table.table-basic tr td:last-child { border-right: none; }

table.table-blue thead th { background-color: #0174b7; color: white; font-weight: normal; border: 1px solid #dee1e6; border-top: none; line-height: 50px;}
table.table-blue thead th:first-child { border-left: 1px solid #0174b7; }
table.table-blue thead th:last-child { border-right: 1px solid #0174b7; }
table.table-blue tbody th { text-align: center; color: #0174b7; font-weight: bold; border: 1px solid #dee1e6; }
table.table-blue tbody td { border: 1px solid #dee1e6; padding: 25px 20px; line-height: 1.5; vertical-align:top;}
table.table-blue tbody td li {line-height: 1.6;background: url(/image/common/bullet_1.png) no-repeat left 10px;padding-left: 8px;font-size: 14px;}



.board .search { text-align: right; }
.board .search input {margin-left: 10px;}
.board .search button {margin-left: 10px;}
.board table { clear:both; margin-top: 10px;}
.board table.table-basic tr th,
.board table.table-basic tr td { border-left: none; border-right: none;}
.board .paging { display: flex; justify-content: center; align-content: center; margin-top: 20px; height:35px; flex-wrap: wrap;}
.board .paging a { padding: 10px 13px;  font-size: 14px; display:flex; justify-content: center; align-content: center; }
.board .paging a.active {background-color: #333333; color: white; }
.board .paging img { height: 15px;}
.board span.tag { color:white; position:relative; top: -1px; }
.board span.tag.blue { font-size: 11px; background-color: #6ca3ff; padding: 6px 8px;}
.board span.tag.orange { font-size: 11px; background-color: #ff7800; padding: 6px 8px;}
.board span.tag.new { font-size: 8px; background-color: #f73232; padding: 2px 4px; margin-left:4px;}
.board img.icon { position: relative; top:4px; }
.board table.view { margin-top: 0px;}
.board .header { height: 50px; border-top: 1px solid #2b4365;  display: flex; justify-content: space-between; align-items: center; margin-bottom: 0px; border-bottom: 1px solid #dee1e6;}
.board .header > h3 { font-weight: normal; margin-left: 10px;  font-size: 17px;}
.board .header > div { display: flex; align-items: center; margin-right: 10px;}
.board .header > div span { font-size: 13px;}
.board .header > div span.separator { padding: 0 15px; font-size: 9px; line-height: 9px; color: #979797;}
.board .detail { font-size: 14px;}
.board .detail .files {text-align: right;margin-top: 10px;min-height: 30px;padding:5px;}
.board .detail .files span { background: url("/image/common/board.icon.file.png") no-repeat left center; padding-left: 27px; line-height: 27px; font-size: 13px; border-bottom: 1px solid #1b5fdd; color: #1b5fdd; margin: 0 8px;}
.board .detail div {padding: 20px;min-height: 130px;line-height: 22px;}
.board .buttons { text-align: right; margin-top: 20px; margin-bottom: 40px;}

/* ****************************** *
   MOBILE
 * ****************************** */

@media only screen and (max-width: 1000px) {
    .mobile-only { display: block; }
    .pc-only { display: none; }
    .centered-wrap { width: 100%; }


    #mobile-top { height: 55px; }
    #mobile-top .link { display: flex; align-items: center; justify-content: space-between; height: 55px; margin-left: 20px; margin-right: 20px; }
    #mobile-top .link .logo { width: 129px;  }
    #mobile-top .link .logo img { width: 100%; }
    #mobile-top .link .more { width: 25px; }
    #mobile-top .link .more img { width: 100%; }

    #mobile-top .menu-wrap { display: none; }
    #mobile-top .menu-wrap .menu { position:fixed; top:0; right:0; width: 230px; height: 100%; z-index: 2; background-color: #0174b7;}
    #mobile-top .menu-wrap .menu * { color: white; }
    #mobile-top .menu-wrap .menu .header a { font-size: 12px; line-height: 50px;}
    #mobile-top .menu-wrap .menu .header > div:first-child { display: flex; align-items: center; justify-content: center; }
    #mobile-top .menu-wrap .menu .header > div:first-child span { padding: 0 5px; font-size: 10px; color: #6693ad;}
    #mobile-top .menu-wrap .menu .header > div:first-child a { color: #6693ad;}
    #mobile-top .menu-wrap .menu .header > div:first-child a.active { color: white;}
    #mobile-top .menu-wrap .menu .header { display: flex; height: 50px; align-items: center; }
    #mobile-top .menu-wrap .menu .header > * { height: 50px; line-height: 50px; }
    #mobile-top .menu-wrap .menu .header > div {width: 100px; text-align: center; background-color: #00263e; }
    #mobile-top .menu-wrap .menu .header > a:nth-child(2) { width: 80px; text-align: center; background-color: #001a2a; }
    #mobile-top .menu-wrap .menu .header > a:nth-child(3) { width: 50px; }
    #mobile-top .menu-wrap .menu .header > a:nth-child(3) img { width: 100%; }
    #mobile-top .menu-wrap .menu .list { display: flex; flex-direction: column;  overflow-y: scroll; height: calc(100% - 50px);}
    #mobile-top .menu-wrap .menu .list h3 { font-size: 16px; font-weight: bold; color: #80badb; border-top: 1px solid #01659f; line-height: 34px; padding-left: 20px;}
    #mobile-top .menu-wrap .menu .list a { font-size: 13px; color: white;  border-top: 1px solid #01659f; margin-left: 20px; line-height: 34px; margin-right: 20px; }
    #mobile-top .menu-wrap .screen { position: fixed; top:0; left: 0; background-color: rgba(0,26,42,0.8); width: 100%; height: 100%; z-index: 1;}

    #lnb { display: none; }

    #middle { margin-top: 0px; padding-top: 0px; }
    #middle #content { width: 100%; padding: 20px;}
    #middle #content * { word-break: break-all; max-width: 100%;}
    #middle #content .title .route { display: none;}
    #middle #content > .wrap { flex-direction: column; }
    #middle #content .tabs { flex-direction: column;}
    #middle #content .tabs a { margin-bottom: 5px; }

    #bottom { height: 145px; }
    #bottom .address { font-size: 11px; }
    #bottom .copyright { font-size: 10px; }


    /* TABLE STYLE */
    table tbody th { border: none;font-size: 20px; padding: 20px;}
    table tbody td { border: none; }
    table tr { margin-top: 30px;}
    table tr:first-child { margin-top: 0px;}

    table.table-basic th,
    table.table-basic td { border: none !important; border-bottom: 1px solid #dee1e6 !important; }
    table.table-basic th { border-bottom: 1px solid #2b4365 !important;}
    table.table-basic tr { border-top: 1px solid #2b4365; }
    table.table-basic th:first-child { min-width: 40px; }
    table.table-basic td:first-child { min-width: 40px; }

    .table-mobile table,
    .table-mobile thead,
    .table-mobile tbody,
    .table-mobile th,
    .table-mobile td,
    .table-mobile tr { display: block; }
    .table-mobile thead tr { position: absolute; top: -9999px; left: -9999px; }
    .table-mobile td { border: none; border-bottom: 1px solid #dee1e6; position: relative; padding-left: 50%; white-space: normal; text-align:left; }
    .table-mobile td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: bold; }
    .table-mobile td:before { content: attr(data-title); }


    .board .search { display: none; }
    .board .paging { margin-top: 40px; }
    .board .header { flex-direction: column; padding: 20px; height:auto;}
    .board .header > div { margin-top: 20px;}
    .board .detail { border-bottom: 1px solid #dee1e6;}
    .board .detail .files { text-align: center; }
    .board .detail p { margin-top: 30px;}
    .board .prev-next-article { display: none;}
    .board .tag.new { display: none;}
}

/* ****************************** *
   CROSS BROWSING
 * ****************************** */
body.msie-10 #middle #content { width: 1110px; }