﻿@charset "utf-8";
body, html { height: 100%; }

/* Skip Navi */
#skiptoContent { position: absolute; z-index: 99999999; top: 0; width: 100%; margin: 0; }
#skiptoContent dd { display: block; }
#skiptoContent a { display: block; overflow: hidden; font-size: 1.2rem; height: 0; text-align: center; background: #333; color: #fff; }
#skiptoContent a:hover, #skiptoContent a:focus, #skiptoContent a:active { height: auto; padding: 0.5rem; }

/**
 * header 영역
 */
.sticky-header #gnbMenu { position: fixed; left: 0; top: 0; right: 0; z-index: 200; }
.sticky-header .allMenu-wrap { position: fixed; left: 0; top:0; top: 50px; }

header { position: relative; z-index: 101; background: #fff; margin-bottom: 50px; }
header:before { position: absolute; top: 0; left: 0; width: 100%; min-width: 1240px; height: 38px; content: ''; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; background: #fafafa; z-index: -1;}
header .container { position: relative; width: 1180px; height: 150px; margin: 0 auto; }

/* 국방대 로고 */
header .logo { position: absolute; top: 73px; left: 20px; }
header .logo a:first-child { display: inline-block; overflow: hidden; width: 184px; height: 43px; text-indent: -9999px; background: url('../../images/common/logo.png') no-repeat; direction: ltr; }
header .logo a:last-child { font-size: 27px; line-height: 1; position: absolute; top: 4px; left: 192px; display: inline-block; letter-spacing: -2px; color: #0584f8; }

/* 중요 사이트 링크 */
header .rel_menu { display: table; margin-left: -12px; }
header .rel_menu li { position: relative; display: table-cell; }
header .rel_menu li:before { position: absolute; z-index: -1; top: 0; left: 0; display: inline-block; width: 100%; height: 38px; content: ''; -webkit-transform: skewX(30deg); -ms-transform: skewX(30deg); transform: skewX(30deg); border: 1px solid #e6e6e6; background: #fff; }
header .rel_menu li:hover:before { border: 1px solid #E7F1E5; background: #F2E6E8; }
header .rel_menu li.on:before { border: 1px solid #0584f8; background: #0584f8; }
header .rel_menu li a { line-height: 40px; display: block; padding: 0 13px; letter-spacing: -1px; }
header .rel_menu li a:hover { color: #000; }
header .rel_menu li.on a { color: #fff; }

/* 유틸 사이트 */
header .utility { position: absolute; right: 0; top: 8px; }
header .utility li { position: relative; float: left; }
header .utility li ~ li:before { font-size: 10px; padding: 0 10px; content: '/'; color: #ccc; }
header .utility li > a { line-height: 24px; position: relative; padding-left: 18px; letter-spacing: -1px; color: #454545; }
header .utility .data > a { background: url('../../images/common/ico_data.png') no-repeat 0 center; }
header .utility .mail > a { background: url('../../images/common/ico_mail.png') no-repeat 0 center; }
header .utility .mail > a:after { font-family: FontAwesome; font-size: 12px; margin-left: 5px; content: '\f0d7'; color: inherit; }
header .utility .mail:hover > a:after { margin-top: -2px; content: '\f0d8'; }
header .utility .mail .dropdown-content { position: absolute; z-index: 2; left: 50%; top: 24px; margin-left: 10px; padding: 5px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); border-radius: 5px; background: #757575; }
header .utility .mail .dropdown-content:before { position: absolute; bottom: 100%; left: 50%; margin-left: -5px; content: ''; border-width: 5px; border-style: solid; border-color: transparent transparent #757575 transparent; }
header .utility .mail .dropdown-content a { font-weight: 300; line-height: 25px; display: block; padding: 5px 15px; color: #fff; }
header .utility .mail .dropdown-content a ~ a { border-top: 1px solid #888; }
header .utility .mail .dropdown-content a:hover { background: #666; }
header .utility .language:before { display: none; }
header .utility .language a { font-size: 12px; line-height: 24px; display: block; margin-left: 12px; padding: 0 5px; color: #fff; border-radius: 3px; background: #757575; letter-spacing: 0; }
header .utility .language a:hover { background: #0584f8; }
header .utility .login > a { background: url('../../images/common/ico_login.png') no-repeat 0 center; }
header .utility .logout > a { background: url('../../images/common/ico_logout.png') no-repeat 0 center; }
header .utility .onnara > a { background: url('../../images/common/ico_nara.png') no-repeat 0 center; }

/* 동합검색 */
.total_search { position: absolute; top: 70px; right: 0; left: 0; width: 390px; margin: 0 auto; padding-left: 100px; }
.total_search input[type=text] { width: 350px; height: 36px; padding-left: 15px; border: 2px solid #0584f8; border-radius: 18px; background: #fff; }
.total_search input[type=submit] { position: absolute; top: 0; right: 0; overflow: hidden; width: 36px; height: 36px; text-indent: -9999px; border-radius: 50%; background: #0584f8 url('../../images/common/btn_search.png') no-repeat center center; direction: ltr; }
.total_search .hotkeword { overflow: hidden; width: 375px; margin: 8px 0 0 15px; white-space: nowrap; }
.total_search .hotkeword * { vertical-align: top; }
.total_search .hotkeword .tit { font-size: 13px; font-weight: 700; line-height: 1; display: inline-block; }
.total_search .hotkeword .tit:after { position: relative; top: -1px; display: inline-block; width: 3px; height: 7px; margin-left: 5px; content: ''; vertical-align: middle; background: url('../../images/common/ico_arrow02.png') no-repeat 0 50%; }
.total_search .hotkeword ul { font-size: 0; display: inline-block; }
.total_search .hotkeword ul li { display: inline-block; }
.total_search .hotkeword ul li a { font-size: 13px; line-height: 1; position: relative; margin-left: 7px; padding-left: 7px; }
.total_search .hotkeword ul li ~ li a:before { position: absolute; top: 2px; left: 0; width: 1px; height: 8px; content: ''; background: #ccc; }

/* 상단 우측 배너 */
header .banner { position: absolute; top: 80px; right: 0; }

/**
 * 글로벌 메뉴
 */
#gnbMenu { position: absolute; z-index: 100; top: 150px; display: block; overflow: hidden; width: 100%; background: #fff; box-shadow: 0 4px 4px rgba(0, 0, 0, .2); }
#gnbMenu .container { position: relative; display: block; width: 1180px; margin: 0 auto; }
#gnbMenu:before { position: absolute; top: 0; display: block; width: 100%; height: 48px; content: ''; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; background: #fff; }
#gnbMenu .gnb { display: table; width: 1130px; height: 50px; table-layout: fixed; }
#gnbMenu .depth1 { display: table-cell; border-right: 1px solid #ddd; }
#gnbMenu .depth1:first-child { border-left: 1px solid #ddd; }
#gnbMenu .depth1 > span { position: relative; display: block; box-sizing: border-box; height: 50px; }
#gnbMenu .depth1 > span > a { font-size: 18px; font-weight: 500; line-height: 48px; display: block; width: 100%; text-align: center; color: #000; }
#gnbMenu .depth1:hover > span { border-bottom: 3px solid #0584f8; }
#gnbMenu .depth2 { overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; }
#gnbMenu .depth2 > ul { padding: 20px 15px; }
#gnbMenu .depth2 .has_child { padding-right: 17px; background: url('../../images/common/btn_more.png') no-repeat right center; }

/* #gnbMenu .depth2 .has_child:hover > ul { display: block; } */
#gnbMenu .depth2 span, #gnbMenu .depth2 a { display: block; }
#gnbMenu .depth2 a:hover { text-decoration: underline; color: #0584f8; }
#gnbMenu .depth2 > ul > li { position: relative; padding-left: 13px; }

/* #gnbMenu .depth2 > ul > li~li { margin-top: 20px; } */
#gnbMenu .depth2 > ul > li:before { position: absolute; top: 4px; left: 0; content: '•'; }
#gnbMenu .depth2 > ul > li > span > a { font-size: 14px; padding: 5px 0; }
#gnbMenu .depth2 li ul { margin-top: 0; }
#gnbMenu .depth2 li li { position: relative; padding: 5px 0 5px 10px; }
#gnbMenu .depth2 li li:before { position: absolute; left: 0; content: '-'; }
#gnbMenu .depth2 li li a { font-size: 14px; }
#gnbMenu .depth2, #gnbMenu .depth2 li ul { display: none; }
#gnbMenu.active .depth2 li ul { display: block !important; }

.allmenu { position: absolute; right: 0; top: 0; display: inline-block; overflow: hidden; width: 50px; height: 50px; text-indent: -9999px; outline: none; background: #0584f8 url('../../images/common/btn_all.png') no-repeat 50% 50%; direction: ltr; }
.allmenu.active { background: #0584f8 url('../../images/common/btn_allclose.png') no-repeat 50% 50%; }

/* 서브 비주얼 */
.sub_visual { position: relative; min-width: 1240px; height: 110px; background: url('../../images/contents/sub_visual.jpg') no-repeat 50% 0; background-size: cover; }
.sub_visual:after { position: absolute; top: 0; left: 50%; display: block; width: 1180px; height: 110px; margin-left: -590px; content: ''; background: url('../../images/contents/visual_txt.png') no-repeat 100% 70%; }

/* 본문시작 */
.body { position: relative; display: table; /* overflow: hidden; */ box-sizing: border-box; width: 1180px; min-height: 300px; margin: 40px auto 100px; table-layout: fixed; }

/* 현재 위치 */
.location { font-size: 10px; position: absolute; top: -25px; right: 0; color: #a0a0a0; }
.location * { vertical-align: middle; }
.location .home { font-size: 0; display: inline-block; width: 16px; height: 12px; margin: 0 5px; background: url('../../images/common/ico_home.png') no-repeat 0 0; }
.location span { font-size: 14px; margin: 0 5px; color: #616263; }
.location strong { font-size: 14px; font-weight: normal; margin: 0 5px; color: #333; }
.location .btn_print { display: inline-block; width: 41px; height: 21px; margin-left: 15px; background: url('../../images/common/ico_print.png') no-repeat 0 0; border: 0; text-indent: -9999px;direction: ltr; overflow: hidden; }

/* 문서제목 */
.section_tit { margin: 8px 0 40px 0; }
.section_tit p { font-size: 16px; margin-top: 4px; color: #0584f8; }
.section_tit h1 { font-family: serif; font-size: 28px; font-weight: bold; letter-spacing: -1px; word-spacing: -3px; color: #0584f8; }

/* 탭 네비게이션 */
.tab_navi { position: relative; border-bottom: 1px solid #0584f8; margin-bottom: 50px; height: 45px;}
.tab_navi li { position: relative; display: block; float: left; border-top: 1px solid #0584f8; border-right: 1px solid #0584f8; color: #0584f8; }
.tab_navi li:first-child {border-left: 1px solid #0584f8;}
.tab_navi li:hover {background: #Ece1f1}
.tab_navi li.active {background: #0584f8; color: #fff}
.tab_navi a { display: block; line-height: 44px; padding: 0 15px; font-size: 16px; color: inherit; letter-spacing: -1px; }

.body .contents{ display: table-cell; padding-left: 40px;}

/* side navi */
#localMenu { position: relative; display: table-cell; box-sizing: border-box; width: 220px; padding: 0 14px 150px 0; border-right: 1px solid #ddd; }
.lnb_tit { font-size: 28px; font-weight: 500; padding-bottom: 15px; color: #000; }
.lnb { position: relative; }
.lnb:after { position: absolute; bottom: -3px; left: 0; width: 100%; height: 10px; content: ''; }
.lnb li { border-top: 1px solid #eaeaea; }
.lnb li a { font-size: 16px; font-weight: 400; position: relative; display: block; padding: 10px 5px; color: #757575; }
.lnb li .has_child { padding: 10px 30px 10px 5px; }
.lnb ul { display: none; padding: 10px 0; }
.lnb ul li { border-top: 0; }
.lnb ul li a, .lnb .hover li a, .lnb ul li a.hover, .lnb .depth2 .has_child { font-size: 15px; line-height: 16px; width: auto; height: auto; margin-left: 10px; padding: 3px 0 3px 8px; color: #757575; background: url('../../images/common/ico_dot.png') no-repeat 0 8px; }
.lnb ul li ~ li { margin-top: 10px; }
.lnb a.hover { color: #0584f8; }
.lnb a.has_child.hover { color: #000; }
.lnb a:hover { text-decoration: none; color: #000; background-color: #fafafa; }
.lnb a.has_child:after { position: absolute; top: 0; right: 0; bottom: 0; width: 15px; height: 5px; margin: auto 0; content: ''; background: url('../../images/common/ico_lnbDown.png') no-repeat 0 0; }
.lnb .depth2 .has_child:after { content: ' +'; }
.lnb .depth2 .has_child.selected:after { content: ' -'; }
.lnb .depth2 .selected { width: auto; }
.lnb .depth2 a.hover, .lnb .depth2 a:hover, .lnb .depth2 .selected { width: auto; }
.lnb .has_child.selected:after, .lnb .has_child.hover:after { background: url('../../images/common/ico_lnbUp.png') no-repeat 0 0; }
.lnb .on, .lnb .depth2 .selected { color: #0584f8 !important; }
.lnb .depth3 { padding-top: 0; }
.lnb .depth3 li a, .lnb .depth3 li a:hover { background: none !important; }
.lnb .depth3 .selected { background: none !important; }


/* 하단 영역 */
#dFoot { z-index: 9; min-width: 1180px; border-top: 4px solid #f5eff9; background: #fcfafd; padding: 35px 0 40px }
#dFoot .footer { position: relative; width: 1180px; margin: 0 auto; }
#dFoot .f_menu { display: inline-block; }
#dFoot .f_menu li { line-height: 16px; display: inline-block; }
#dFoot .f_menu li ~ li { padding-left: 15px; }
#dFoot .f_menu li ~ li a { position: relative; padding-left: 15px; }
#dFoot .f_menu li ~ li a:before { position: absolute; top: 4px; left: 0; width: 1px; height: 9px; content: ''; background: #ccc; }
#dFoot .f_menu li a { font-size: 14px; position: relative; display: block; }
#dFoot .f_menu li a:hover { text-decoration: underline; }
#dFoot .f_menu li strong { color: #f57c00; }
#dFoot .file { font-size: 0; position: absolute; display: inline-block; margin-left: 30px; }
#dFoot .file a ~ a { margin-left: 5px; }
#dFoot .relorg { font-size: 0; position: absolute; top: 0; right: 0; }
#dFoot .relorg select { height: 30px; border: 1px solid #e0e0e0; }
#dFoot .relorg .btn { width: 29px; height: 30px; text-align: center; color: #fff; background: #585858; }
#dFoot .relorg .obj { margin-top: 18px; text-align: right; }
#dFoot .adress { line-height: 20px; margin-top: 27px; color: #7b7c85; }
#dFoot .adress span { font-size: inherit; margin-left: 10px; color: #363636; }
#dFoot .copy { font-size: 11px; margin-top: 10px; letter-spacing: 0; color: #7b7c85; }

.btn_top { position: fixed; z-index: 100; right: 20px; bottom: 20px; display: none; overflow: hidden; width: 58px; height: 58px; text-indent: -9999px; border-radius: 50%; background: #0584f8 url('../../images/common/btn_top.png') no-repeat 50% 50%; direction: ltr; }
