@charset "utf-8";
@import 'reset.css';
@import '../font/nanumsquare.css';

html { height: 100%; min-height: 400px; }
body { min-width: 1280px; font: 400 12px/16px '돋움', 'Dotum', 'dotum', sans-serif; padding-bottom: 48px; min-height: 100%; box-sizing: border-box; position: relative; border-top: 8px solid #2e3192; }

input,
button,
a { transition: all .2s; display: inline-block; box-sizing: border-box; }

input[type=text],
input[type=password] { border: 1px solid #a7a7a7; padding: 0 2px; }
input[type=text]:hover,
input[type=text]:focus,
input[type=password]:hover,
input[type=password]:focus { border-color: #2e3192; }
input[type=text][required],
input[type=password][required] { border-color: #e64a19; background-color: #fcf0ed; }
input[type=text][disabled],
input[type=password][disabled],
input[type=text][readonly],
input[type=password][readonly] { border-color: #a7a7a7; background-color: #ebebeb; color: #888; }

input.useDatepicker { background: #fff url('../images/icon_calendar.png') center right no-repeat; padding-right: 23px; width: 152px; }

div.ui-datepicker { border: 1px solid #2e3192; background: #fff; margin-top: -9px; display: none; padding-bottom: 3px; }
div.ui-datepicker table { border: 0 none; }
div.ui-datepicker th,
div.ui-datepicker td { width: 20px; height: 20px; padding: 0; }
div.ui-datepicker th { background: #ebebeb; font-weight: 400; }
div.ui-datepicker td { color: #252525; }
div.ui-datepicker th:first-child,
div.ui-datepicker td:first-child { color: #e10019; padding-left: 5px; }
div.ui-datepicker th:last-child,
div.ui-datepicker td:last-child { padding-right: 5px; }
div.ui-datepicker th + th,
div.ui-datepicker td + td { border: 0 none; }
div.ui-datepicker .ui-datepicker-header { position: relative; }
div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
div.ui-datepicker .ui-datepicker-header .ui-datepicker-next { position: absolute; top: 0; left: 0; display: block; height: 23px; width: 23px; text-indent: -999px; overflow: hidden; background: #fff; }
div.ui-datepicker .ui-datepicker-header .ui-datepicker-next { left: auto; right: 0; }
div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before,
div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before { content: ''; display: block; width: 0; height: 0; border: 5px solid transparent; margin: auto; left: 0; right: 0; top: 0; bottom: 0; position: absolute; }
div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before { left: 0; right: 5px; border-right-color: #4a5bb9; }
div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before { right: 0; left: 5px; border-left-color: #4a5bb9; }
div.ui-datepicker .ui-datepicker-header .ui-datepicker-title { text-align: center; line-height: 23px; text-align: center; font-size: 12px; font-weight: 700; color: #252525; }

div.ui-datepicker td.ui-datepicker-today,
div.ui-datepicker td.ui-datepicker-current-day { color: #fff;  }
div.ui-datepicker td:hover { background: #e3ecf8; }
div.ui-datepicker td.ui-datepicker-today { background: #2e3192; }
div.ui-datepicker td.ui-datepicker-current-day { background: #f47a50; }

div.ui-datepicker table a { text-decoration: none; }
/* login */
section.login { background: url('../images/index/bg.png') center top no-repeat; height: 670px; margin-bottom: 40px; }

.login h1 { text-align: center; padding-top: 130px; font-family: 'NanumSquare', sans-serif; font-weight: 700; font-size: 38px; color: #152851; line-height: 36px; margin-bottom: 45px; }
.login h1 figure { margin-bottom: 32px; }
.login h1 .sub { font-size: 20px; font-weight: 400; display: block; }
.login .input { width: 410px; margin: 0 auto; font: 400 16px '맑은고딕', 'MalgunGohic', sans-serif; }
.login .input input[type=text],
.login .input input[type=password],
.login .input button { box-sizing: border-box; width: 100%; height: 50px; margin-bottom: 15px; color: #999; }
.login .input input[type=text],
.login .input input[type=password] { border: 1px solid #ccc; background: #fff; padding: 15px 18px 13px; line-height: 20px; }
.login .input input[type=text]:focus,
.login .input input[type=password]:focus { border-color: #445260; }
.login .input button { color: #fff; background: #2e3192; border-radius: 2px; padding-top: 2px; }
.login .input button:active { background-color: #1b1d73; }
.login .input label { font-size: 14px; color: #252525; }
.login .input label input[type=checkbox] { vertical-align: top; margin-top: 3px; }

.contact { width: 404px; height: 70px; background: #f0f0f0; text-align: center; margin: 0 auto 50px; padding-top: 22px; font: 400 12px/20px '맑은고딕', 'MalgunGohic', sans-serif; }
.contact p + p { margin-top: 6px; }

footer.login { position: absolute; bottom: 0; left: 0; right: 0; height: 75px; font: 700 12px/75px '맑은고딕', 'MalgunGohic', sans-serif; color: #8795af; text-align: center; }
footer.login strong { color: #2e3192; }

/* layout */
header.common { height: 60px; line-height: 62px; border-bottom: 1px solid #cdcdcd; padding: 0 12px 0 19px; overflow: hidden; }
header.common h1 { float: left; font-family: 'NanumSquare', sans-serif; font-weight: 700; font-size: 18px; color: #152851; }
header.common h1 figure { float: left; margin-right: 10px; line-height: 60px; }
header.common h1 figure img { vertical-align: middle; }
header.common .sub { margin-left: 6px; font-size: 13px; color: #666;  }
header.common .information { float: right; }
header.common .information li,
header.common .information figure { display: inline-block; vertical-align: top; }
header.common .information li + li { margin-left: 12px; }
header.common .information figure { line-height: 56px; margin-right: 12px; }
header.common .information figure img { vertical-align: middle; }
header.common .information .date { color: #374b71; }
header.common .information .member { font-size: 13px; }
header.common .information .member strong { font-size: 14px; font-weight: 700; }
header.common .information button.setting,
header.common .information button.menu { width: 18px; height: 18px; background: url('../images/icon_setting.png') center no-repeat; vertical-align: middle; margin-top: -4px; text-indent: -999px; overflow: hidden; }
header.common .information button.menu { background-image: url('../images/icon_menu.png'); width: 54px; border-left: 1px solid #e5e5e5; }

nav.gnb { position: absolute; left: 0; top: 61px; bottom: 0; width: 69px; border-right: 1px solid #cdcdcd; background: #36397c; color: #fff; text-align: center; z-index: 9; font-weight: 700; }
nav.gnb > ul > li { border-bottom: 1px solid #2b2e63; }
nav.gnb .home a { display: block; height: 59px; background: #1380ca url('../images/icon_home.png') center no-repeat; text-indent: -999px; }
nav.gnb .home a:hover,
nav.gnb .home a:focus { background-color: #066fb6; }
nav.gnb > ul > li > button,
nav.gnb > ul:hover > li.on > button { display: block; width: 70px; height: 110px; padding-top: 40px; background: no-repeat; border-right: 1px solid #cdcdcd; background-color: #36397c; color: #fff; }
nav.gnb > ul > li.on > button,
nav.gnb > ul > li > button:hover,
nav.gnb > ul > li > button:focus,
nav.gnb > ul > li:hover button,
nav.gnb > ul > li:focus button,
nav.gnb > ul > li.on:hover button,
nav.gnb > ul > li.on:focus button { background-color: #fff; color: #2e3192; }

nav.gnb .acquire button,
nav.gnb > ul:hover .acquire.on button { background-image: url('../images/icon_gnb_1.png'); background-position: center 19px; }
nav.gnb .acquire.on button,
nav.gnb .acquire button:hover,
nav.gnb .acquire button:focus,
nav.gnb > ul .acquire:hover button,
nav.gnb > ul .acquire:focus button,
nav.gnb > ul .acquire.on:hover button,
nav.gnb > ul .acquire.on:focus button { background-image: url('../images/icon_gnb_1_on.png'); }

nav.gnb .google button,
nav.gnb > ul:hover .google.on button { background-image: url('../images/icon_gnb_2.png'); background-position: center 22px; }
nav.gnb .google.on button,
nav.gnb .google button:hover,
nav.gnb .google button:focus,
nav.gnb > ul .google:hover button,
nav.gnb > ul .google:focus button,
nav.gnb > ul .google.on:hover button,
nav.gnb > ul .google.on:focus button { background-image: url('../images/icon_gnb_2_on.png'); }

nav.gnb .system button,
nav.gnb > ul:hover .system.on button { background-image: url('../images/btn_LF_NavMenuImg05.png'); background-position: center 19px; }
nav.gnb .system.on button,
nav.gnb .system button:hover,
nav.gnb .system button:focus,
nav.gnb > ul .system:hover button,
nav.gnb > ul .system:focus button,
nav.gnb > ul .system.on:hover button,
nav.gnb > ul .system.on:focus button { background-image: url('../images/btn_LF_NavMenuImg05_P.png'); }

nav.lnb { position: absolute; left: 0px; top: 0; bottom: 0; border: 1px solid #e3e7ea; border-left: 0 none; background: #fff; box-shadow: 2px 0 2px rgba(0,0,0,.1); overflow: hidden; width: 0; color: #424242; opacity: 0; }
li:hover nav.lnb { opacity: 1; width: 208px; left: 70px;}
nav.lnb .wrap { position: absolute; right: 0; top: 0; bottom: 0; width: 0; box-sizing: border-box; padding: 10px 19px; text-align: left; font-size: 13px; line-height: 14px; width: 208px; }
nav.lnb h2 { color: #3f51b5; font-size: 16px; line-height: 40px; border-bottom: 1px solid #3f51b5; }
nav.lnb li { position: relative; border-bottom: 1px solid #ddd; font-weight: 400; }
nav.lnb li:before { content: ''; display: block; width: 8px; height: 2px; position: absolute; left: 10px; top: 17px; background: #3f51b5}
nav.lnb li.on { font-weight: 700; }
nav.lnb li a { display: block; padding: 12px 10px 12px 27px; }
nav.lnb li a:hover { background-color: #f9f9f9; }

main { padding: 20px 30px 70px 100px; }
h3,
h4,
h5 { font-size: 16px; color: #333; line-height: 30px; margin-top: 20px; padding-left: 16px; background: left center no-repeat; font-weight: 700; }
h3 { margin-top: 0; background-image: url('../images/bullet_h3.png'); }
h4 { background-image: url('../images/bullet_h4.png'); }
h5 { background-image: url('../images/bullet_h5.png'); }

h4 + div.function { margin-top: -28px; }
h4 + div.function button { }

.condition { border: solid #2e3192; border-width: 1px 0; background: #e3ecf8; padding: 10px 31px; position: relative; }
.condition dl:after { content: ''; display: block; clear: both; }
.condition dt,
.condition dd { float: left; height: 18px; padding-top: 1px; line-height: 18px; }
.condition dt { font-weight: 700; }
.condition dt + dd { margin-left: 18px; }
.condition dd + dt { margin-left: 50px; }
.condition input[type=text] { width: 140px; height: 20px; line-height: 18px; vertical-align: top; margin-top: -1px; }
.condition input.useDatepicker { width: 152px; }
.condition button { border: 1px solid #252775; background: #2e3192 center no-repeat; color: #fff; padding: 0 10px; margin-top: -1px; vertical-align: top; }
.condition button[disabled] { border-color: #ccc; color: #fff; background-color: #bbb; }
.condition button + button { margin-left: 2px; }
.condition select { vertical-align: top; margin-top: 0; height: 20px; padding: 2px 2px 2px 3px;  }
.condition button + select { margin-left: 27px; }
.condition button.icon { width: 20px; height: 20px; text-indent: -999px; overflow: hidden; padding: 0; }
.condition button.icon.find { background-image: url('../images/icon_find.png'); }
.condition button.icon.add { background-image: url('../images/icon_add_ff.png'); }
.condition input ~ label { margin-left: 50px; }
.condition label + label { margin-left: 30px; }
.condition select ~ label { margin-left: 10px; }
.condition .action { position: absolute; right: 20px; top: 0; bottom: 0; margin: auto 0; height: 24px; }
.condition .action button { border: 1px solid #252775; background: #2e3192 11px no-repeat; height: 24px; padding: 0 11px 0 34px; color: #fff; font-weight: 700; margin: 0; }
.condition .action button.search { background-image: url('../images/icon_search.png'); }
.condition .action button.save { background-image: url('../images/icon_check_ff.png'); }
.condition button:hover,
.condition .action button:hover { background-color: #1b1d73; }

.save1 {border: 1px solid #252775; background: #2e3192 left center no-repeat; color: #fff; padding: 0 10px; margin-top: -1px; vertical-align: top;}
.save1 {background-image: url('../images/icon_check_ff.png');}
	
table { border-top: 1px solid #2e3192; border-bottom: 1px solid #a7a7a7; width: 100%; text-align: center; border-collapse: separate; }
table th,
table td { height: 20px; padding: 3px 10px; }
table th { background: #e3ecf8; font-weight: 700; color: #101010; }
table td { color: #252525; }
table th + th,
table td + td { border-left: 1px solid #fff; }
table th + td { text-align: left; }
table a,
table a:link { text-decoration: underline; }
table input.full { width: 100%; }

table.list tr:nth-child(even) td { background: #eff2f4; }

div.function { text-align: right; margin: 10px 0; }
div.function button,
button.fn { height: 24px; border: 1px solid #36397c; background: #fff 11px no-repeat; color: #36397c; padding: 0 11px 0 34px; font-weight: 700; margin: 0; font-size: 12px; }
button.fn:hover,
div.function button:hover { background-color: #f2f2f2; }
div.function button + button { margin-left: 2px; }
div.function button[disabled],
button.fn[disabled] { background-color: #ccc; color: #fff; border-color: #bbb; }
div.function button.save { background-image: url('../images/icon_check_blue.png'); }
div.function button.save[disabled] { background-image: url('../images/icon_check_ff.png'); }
div.function button.del { background-image: url('../images/icon_del.png'); border-color: #d23434; }
div.function button.del[disabled] { background-image: url('../images/icon_del_ff.png'); border-color: #bbb; }
div.function button.add,
button.fn.add { background-image: url('../images/icon_add_blue.png'); }
div.function button.add[disabled],
button.fn.add[disabled] { background-image: url('../images/icon_add_ff.png'); }

div.function2 { text-align: left; margin: 10px 0; }
div.function2 button { height: 24px; border: 1px solid #36397c; background: #f7f7f7 11px no-repeat; color: #36397c; font-weight: 700; font-size: 11px; padding: 1px 15px 0; width: 120px; }
div.function2 button:hover { background-color: #ddd; }
div.function2 button + button { margin-left: 2px; }
div.function2 button[disabled] { background-color: #ccc; color: #fff; border-color: #a7a7a7; }
div.function2 button.save { background-image: url('../images/icon_check_blue.png'); }
div.function2 button.del { background-image: url('../images/icon_del.png'); border-color: #d23434; }

div.googleAPI { position: absolute; top: 218px; left: 100px; right: 30px; bottom: 50px; border: 1px solid #a7a7a7; border-top-color: #2e3192; overflow-y: auto; }

footer.common { position: absolute; bottom: 0; right: 0; left: 0; line-height: 50px; text-align: center; color: #adb5cc; font-size: 11px; }
footer.common strong { color: #7576a4; }

/* popup*/ 
.popupMask { position: fixed; left: 70px; top: 69px; right: 0; bottom: 0; background: url('../images/popupmask.png') left top repeat; z-index: 1; }
.popupMask > .popup { position: absolute; left: 50%; top: 50%; }
.popupMask > .popup > header { background: #2e3192 url('../images/bullet_popuptitle.png') 21px center no-repeat; line-height: 40px; font-size: 14px; font-weight: 700; padding-left: 38px; position: relative; color: #fff; }
.popupMask > .popup > header button.close { position: absolute; right: 0; top: 0; width: 42px; text-indent: -999px; overflow: hidden; background: url('../images/btn_popupclose.png') center no-repeat; }
.popupMask > .popup > article { padding: 20px 19px 19px; border: 1px solid #a7a7a7; border-top: 0 none; background: #fff; }
.popupMask > .popup .function { text-align: center; margin: 30px 0 0; }
.popupMask .function button { border: 1px solid #252775; background: #2e3192 11px no-repeat; height: 24px; padding: 0 11px 0 34px; color: #fff; font-weight: 700; margin: 0; font-size: 12px; }
.popupMask .function button:hover { background-color: #1b1d73; }
.popupMask .function button.confirm { background-image: url('../images/icon_check_ff.png'); width: auto; }
.popupMask .function button.upload { background-image: url('../images/icon_upload.png'); width: auto; }
.popupMask .function button.reset { border: 1px solid #2e3192; color: #2e3192; background: #fff; padding: 0; width: 70px; }
.popupMask .function button.reset:hover { background-color: #f2f2f2; }

.siteInfo > .popup { width: 650px; height: 422px; margin-top: -211px; margin-left: -325px; }

.fileUpload > .popup { width: 550px; height: 334px; margin-left: -275px; margin-top: -167px; }
.uploadState { border: 1px solid #ccc; padding: 0 9px; margin-top: 10px; }
.uploadState dl { padding: 10px 6px 10px 10px; }
.uploadState dl + dl { border-top: 1px solid #ccc; }
.uploadState dt,
.uploadState dd { line-height: 32px; }
.uploadState dt { float: left; font-weight: 700; width: 73px; }
.uploadState dd { color: #666; }
.uploadState dd strong { font-weight: 700; }
.uploadState dl.progress dd { color: #4879df; }
.uploadState dl.progress span.unit { margin: 0 3px; }
.uploadState dl.progress div.progress { display: inline-block; width: 360px; height: 10px; border: 1px solid #a7a7a7; vertical-align: middle; margin-top: -1px; }
.uploadState dl.progress div.progress div.bar { background: #4879df; height: 100%; }