@charset "utf-8";

/* 공통 구조
**********************************************/

/* Global */
html { height: 100%;}
body { height: 100%; background-color: #f2f2f2;}
#wrap { height: 100%;}
.area { width: 1100px; margin: 0 auto;}
.bg_white { background-color: #fff;}

/* Header */
.hpor { position: relative;}
.header { position: relative; z-index: 2; border-top:5px solid #19346e; background-color: #234687;}
.header >.area h1 { display: inline-block; vertical-align: middle;}
.header >.area .global { display: inline-block; clear: both; overflow: hidden; width: 888px; margin-left: 27px; vertical-align: middle; background: url(/images/header_bg.png) no-repeat right top;}
.header >.area .global .gnb { float: left; font-size: 0px; letter-spacing: 0px; word-spacing: 0px;}
.header >.area .global .gnb >li { display: inline-block;}
.header >.area .global .gnb >li >a { display: block; padding: 26px 20px 21px; font-size: 17px; font-weight: bold; color: #fff; background: url(/images/gnb_blet.png) no-repeat left 27px;}
.header >.area .global .gnb >li >a:hover,
.header >.area .global .gnb >li >a.active { color: #efd259;}
.header >.area .global .gnb >li >a:hover +.st { z-index: 2;}
.header >.area .global .gnb >li >a.active +.st { display: block !important; z-index: 1;}
.header >.area .global .gnb >li:first-child a { background:none;}
.header >.area .global .log { float: right; padding-top: 26px; color: #fff;}
.header >.area .global .log .logout { display: inline-block; margin:-3px 0 0 10px; padding: 2px 14px 5px; color: #324c7c; background-color: #efd259; border-radius:10px;}
.sub { display: none; position: absolute; left: 0; top: 69px; z-index: 1; width: 100%; height: 34px; background-color: #efd259;}
.st { display: none; position: absolute; left: 0; top: 64px; z-index: 2; width: 100%; background-color: #efd259;}
.st .sarea { width: 1100px; margin: 0 auto;}
.st.s1 .sarea { padding-left: 334px;}
.st.s2 .sarea { padding-left: 540px;}
.st.s3 .sarea { padding-left: 762px;}
.st a { display: inline-block; padding: 10px 8px; font-size: 14px; font-weight: bold; color: #907f36;}
.st a:hover,
.st a.active { font-weight: 700; color: #234687;}

/* Footer */
.footer { padding: 17px 0 25px; font-size: 12px; color: #234687; text-align: center; letter-spacing: 0;}


/* 공통 STYLE
**********************************************/

/* 정렬 */
.dib { display: inline-block; vertical-align: middle;}
.tal { text-align:left !important;}
.tac { text-align:center !important;}
.tar { text-align:right !important;}

/* 클리어 */
.clear { clear: both; overflow: hidden;}
.clear .left { float: left;}
.clear .right { float: right;}

/* HR */
hr.h4 { height:4px;}
hr.h6 { height:6px;}
hr.h7 { height:7px;}
hr.h8 { height:8px;}
hr.h9 { height:9px;}
hr.h10 { height:10px;}
hr.h14 { height:14px;}
hr.h16 { height:16px;}
hr.h17 { height:17px;}
hr.h19 { height:19px;}
hr.h20 { height:20px;}
hr.h25 { height:25px;}
hr.h30 { height:30px;}
hr.h34 { height:34px;}
hr.h41 { height:41px;}

/* 크기 */
.w100 { width:100px;}
.w100p { width:100%;}

.h79 { height:79px;}

/* 헤딩 */
h2 { font-size: 18px;}
h3 { font-size: 15px; color: #234687;}
h3.other { font-size: 18px; text-align: center;}
h3.other span { padding: 0 22px 5px; border-bottom: 2px solid #666;}

/* 색상 */
.color_red { color: #fa665a;}
.color_blue { color: #5b74bd;}
.color_orange { color: #eb6d1a;}

/* 폰트 */
.fs12 { font-size: 12px;}

/* Margin / Padding / Letter-sapcing */
.ml6 { margin-left: 6px;}
.ml20 { margin-left: 20px;}
.ml30 { margin-left: 30px;}
.ml40 { margin-left: 40px;}
.pt6 { padding-top: 6px;}
.pr20 { padding-right: 20px;}
.ls0 { letter-spacing: 0;}
.vat { vertical-align: top !important;}
.vam { vertical-align: middle;}

/* img_checkbox */
.img_checkbox { clear: left; overflow: hidden;}
.img_checkbox input[type=checkbox] { display:none;}
.img_checkbox input[type=checkbox] +label { display: inline-block; height: 19px; padding: 2px 0 0 26px; background: url('/images/ico_checkbox.png') no-repeat; cursor: pointer;}
.img_checkbox input[type=checkbox]:checked +label { background-position: 0 -40px;}
.img_checkbox input[type=checkbox][readonly] +label { background-position: 0 -20px;}
.img_checkbox >div { float: left; padding-top: 5px;}
.img_checkbox >ul { float: left; margin-left: 14px; padding-left: 17px;}
.img_checkbox >ul.bgimg { background: url('/images/ico_checkbox_line.png') no-repeat 0 14px;}
.img_checkbox >ul li { padding: 5px 0;}

/* Position */
.por { position: relative; padding-top:6px;}
.poa { position: absolute; right:0; top:0;}
.poa span { margin-right:5px; font-size:14px; font-weight:normal; color:#333;}

/* 버튼 */
#wrap .btn { display: inline-block; font-size: 14px; color: #fff; text-align: center; line-height: 34px; transition:all .3s ease;}
#wrap .btn.small { font-size: 12px; line-height: 26px;}
#wrap .btn.disable,
#wrap .btn.disable:hover { background-color: #c7c7c7 !important; cursor:default; pointer-events: none;}

#wrap .btn.blue { background-color: #234687;}
#wrap .btn.blue:hover { background-color: #1a376e;}
#wrap .btn.skyblue { background-color: #00c4d6;}
#wrap .btn.skyblue:hover { background-color: #00abbb;}
#wrap .btn.lightblue { background-color: #3976b6;}
#wrap .btn.lightblue:hover { background-color: #295f98;}
#wrap .btn.red { background-color: #fa665a;}
#wrap .btn.red:hover { background-color: #e7564a;}
#wrap .btn.gray { background-color: #666;}
#wrap .btn.gray:hover { background-color: #888;}
#wrap .btn.grayborder { color: #333; line-height: 29px; border: 2px solid #cdcdcd; background-color: #f2f2f2;}
#wrap .btn.grayborder img { vertical-align: middle;}
#wrap .btn.grayborder span { margin-left: 5px; vertical-align: middle;}
#wrap .btn.grayborder:hover { background-color: #ddd;}
#wrap .btn.orange { background-color: #eb6d1a;}
#wrap .btn.orange:hover { background-color: #d06017;}

/* Overflow */
.overflow-x { overflow-x: auto; overflow-y: hidden; padding-bottom: 10px;}
.overflow-y { overflow-x: hidden; overflow-y: auto;}
.overflow { overflow: auto;}

/* Help 도움말 */
.help { font-size: 12px;}
.help span { color: #eb6d1a;}

/* Table */
.line_black { border-top:2px solid #666; border-bottom:1px solid #666;}
.line_black_bn { border-top:2px solid #666; border-bottom:1px solid #e5e5e5;}

#wrap .pd10 th,
#wrap .pd10 td { padding: 0 10px;}
#wrap .mw100px td input[type=text],
#wrap .mw100px td select { min-width: 100px;}

.cal { display: inline-block; position: relative; width:118px; vertical-align:middle;}
.cal input { padding-right: 0px; width:100%;}
.cal img { position:absolute; right:5px; top:4px; width: 20px; height: auto; cursor: pointer;}
.cal.h30 { width: inherit;}
.cal.h30 img { right:5px; top:4px;}

#wrap .w100p { width: 100%;}

.table_tb_padding { padding:5px 0;}

.wbntatble >tbody >tr >th { padding:0 10px 0 20px; font-size: 13px; text-align: right;}
.wbntatble >tbody >tr >th.pb0,
.wbntatble >tbody >tr >td.pb0 { padding-top: 11px; padding-bottom: 0;}
.wbntatble >tbody >tr >th.vat { padding-top: 18px; vertical-align: top;}
.wbntatble >tbody >tr >th:first-child { padding-left: 0;}
.wbntatble >tbody >tr >td { padding: 11px 0; font-size: 13px;}
.wbntatble >tbody >tr >td input[type=text],
.wbntatble >tbody >tr >td select { width: 100%; height: 30px;}
.wbntatble >tbody >tr >td.last { padding-left: 15px;}
.wbntatble >tbody >tr >td.last .btn { height: 30px; line-height: 30px !important;}
.wbntatble >tbody >tr >tr:nth-child(2) th { padding-bottom: 8px;}
.wbntatble >tbody >tr >tr:nth-child(2) td { padding-top: 0;}
.wbntatble >tbody >tr >td.vab { vertical-align: bottom;}
.wbntatble >tbody >tr >td.pbt0 { padding-top: 6px; padding-bottom: 0;}
.wbntatble >tbody >tr >td .btn { width: 100%;}
.wbntatble >tbody >tr >td .cal .ico_btn { top:6px;}
.wbntatble >tbody >tr >td .por { position: relative;}
.wbntatble >tbody >tr >td .por .poa { position: absolute;}

.wtable th { height: 40px; padding: 0 10px; font-size: 13px; white-space:nowrap; border-bottom:1px solid #e4e4e4; background-color: #f2f2f2;}
.wtable th.ll { padding: 8px 0; border-left:1px solid #e4e4e4;}
.wtable th.lr { padding: 8px 0; border-right:1px solid #e4e4e4;}
.wtable th.lb { padding: 8px 0; border-bottom:1px solid #e4e4e4;}
.wtable th.empht { padding: 8px 0;}

.wtable th .sort_toggle { position: relative; left: -9px;}
.wtable th .sort_toggle::after { position: absolute; right: -18px; top: 3px; content: ''; width: 13px; height: 13px; background: url('/images/ico_sort.png') no-repeat;}
.wtable th .sort_toggle.up::after { background-position: 0 -87px;}
.wtable th .sort_toggle.down::after { background-position: 0 0;}

.wtable th .dsort_toggle { position: relative; left: -9px;}
.wtable th .dsort_toggle::after { position: absolute; right: -18px; top: 3px; content: ''; width: 13px; height: 13px; background: url('/images/ico_sort.png') no-repeat;}
.wtable th .dsort_toggle.dup::after { background-position: 0 -87px;}
.wtable th .dsort_toggle.ddown::after { background-position: 0 0;}

.wtable td { height: 40px; padding: 0 10px; font-size: 12px; text-align: center; white-space:nowrap; letter-spacing: 0; border-bottom:1px solid #e4e4e4;}
.wtable td a { color: #002fb8; text-decoration: underline;}
.wtable td.left { padding-left: 10px; text-align: left;}
.wtable td .btn { width:100%;}
.wtable td .color_orange
.wtable td input[type=text],
.wtable td select { width: 100%; height: 30px;}
.wtable tr.active td { background-color: #fbfbe8;}
.wtable.pd td { padding: 6px 5px;}
.wtable.fixed { table-layout:fixed;}
.wtable.border { border-top:2px solid #666; border-bottom:1px solid #666;}
.wtable.border tr:last-child td { border-bottom:none;}
.wtable.boxborder th { border-left:1px solid #e4e4e4;}
.wtable.boxborder td { border-left:1px solid #e4e4e4;}
.wtable.h30 th,
.wtable.h30 td { height: 30px;}

.wtable2 th { height: 40px; padding: 0 3px; font-size: 13px; white-space:nowrap; border-bottom:1px solid #e4e4e4; background-color: #f2f2f2;}
.wtable2 th.ll { padding: 8px 0; border-left:1px solid #e4e4e4;}
.wtable2 th.lr { padding: 8px 0; border-right:1px solid #e4e4e4;}
.wtable2 th.lb { padding: 8px 0; border-bottom:1px solid #e4e4e4;}
.wtable2 th.empht { padding: 8px 0;}
.wtable2 td { height: 40px; padding: 0 3px; font-size: 12px; text-align: center; white-space:nowrap; letter-spacing: 0; border-bottom:1px solid #e4e4e4;}
.wtable2 td a { color: #002fb8; text-decoration: underline;}
.wtable2 td.left { padding-left: 10px; text-align: left;}
.wtable2 td .btn { width:100%;}
.wtable2 td input[type=text],
.wtable2 td select { width: 100%; height: 30px;}
.wtable2 tr.active td { background-color: #fbfbe8;}

.wtable2.pd td { padding: 6px 5px;}
.wtable2.fixed { table-layout:fixed;}
.wtable2.border { border-top:2px solid #666; border-bottom:1px solid #666;}
.wtable2.border tr:last-child td { border-bottom:none;}

.fixed_table_container { position: relative; padding-top: 43px; border-bottom:1px solid #666;}
.fixed_table_header_bg { position: absolute; top: 0; right: 0; left: 0; height: 43px; border-top:2px solid #666; border-bottom: 1px solid #e4e4e4; background-color: #f2f2f2;}
.fixed_table { table-layout: fixed;}
.fixed_table th { font-size: 13px; text-align: center;}
.fixed_table th .th_text { position: absolute; top: 0; width: inherit; line-height: 43px;}
.fixed_table td { height: 40px; padding: 5px; font-size: 12px; letter-spacing: 0; text-align: center; border-bottom: 1px solid #ebebeb;}
.fixed_table td input[type=text],
.fixed_table td select { width: 100%; height: 29px;}
.fixed_table td .btn { width: 100%;}
.fixed_table td.empht { text-align: center;}
.fixed_table td:last-child { padding-right: 20px;}

.htable th { padding: 0 20px 0; font-size: 13px; text-align: left; border-top: 1px solid #e4e4e4; background-color: #f2f2f2;}
.htable tr:first-child th { border-top:none;}
.htable th .required { margin-left: 3px; color: #ff0000}
.htable td { height: 40px; padding: 0 9px; border-top: 1px solid #e4e4e4;}
.htable tr:first-child td { border-top:none;}
.htable td input[type=text],
.htable td input[type=password],
.htable td select { width: 120px; height: 30px; font-size: 12px; letter-spacing: 0;}
.htable td .lh { line-height: 30px;}
.htable td .lh label { margin-right: 15px; font-size: 12px;}

/* 페이지 넘버 */
.pagenumber { position: relative; margin-top: 20px; font-size: 0px; text-align: center; letter-spacing: 0px; word-spacing: 0px;}
.pagenumber a { display: inline-block; width:27px; height: 27px; padding-top: 7px; font-size: 12px; vertical-align: middle;}
.pagenumber a.active { color: #fff; background-color: #7691a1;}
.pagenumber >div { display: inline-block; vertical-align: middle;}
.pagenumber .poa { position: absolute; right:0; top:-9px;}


/* 레이어
**********************************************/

.layer { position: fixed; left:0; top: 0; z-index: 100; overflow-x:hidden; width: 100%; height:100%; background-color: rgba(0, 0, 0, .6);}
.layer .component { position:absolute; left:50%; top:50%; z-index:100; width:870px; padding: 24px 20px 20px; border:1px solid #dbdbdb; background-color:#fff; transform:translate(-50%, -50%);}
.layer .component h2 { font-weight: normal;}
.layer .component .close { position: absolute; right: 20px; top: 17px;}
.layer .component.half { width: 500px;}

.layer .contents { position: relative;}
.layer .contents .btns .right .btn { margin-left: 7px;}
.layer .contents .close { position: absolute; right:0; top: -7px;}


/* 로그인
**********************************************/

.login { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff;}
.login .contents { position: absolute; left: 0; top: 50%; width: 100%; height: 513px; margin-top: -257px; background: url(/images/login_bg.jpg) no-repeat center top;}
.login .contents .area { padding: 147px 0 0 615px;}

.login .form { position: relative; width:408px;}
.login .form >input { width:288px; height: 44px; margin-top: 11px; padding-left: 15px; border: none;}
.login .form >input:first-child { margin-top: 0;}
.login .form .submit { display: block; position:absolute; right:0; top:0; width:110px; height: 99px; font-size: 16px; color: #fff; text-align: center; background-color: #234687;}
.login .form .check { margin-top: 20px;}
.login .form .check input { border:1px solid #fff;}

.login .cr { margin-top: 190px; padding: 9px 0; font-size: 12px; color: #234687; text-align: center; letter-spacing: 0; background-color: #f2f2f2;}


/* 404
**********************************************/

.p404 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff;}
.p404 .contents { position: absolute; left: 50%; top: 50%; width: 768px; height: 359px; margin: -180px 0 0 -384px; padding: 124px 0 0 50px; background: url(/images/p404.jpg) no-repeat center center;}
.p404 .contents .t { font-size: 30px; color: #eb6d1a;}
.p404 .contents .s { margin-top: 12px; font-size: 16px; color: #444;}
.p404 .contents .pbtn { margin-top: 25px;}
.p404 .contents .pbtn a { display: inline-block; padding: 13px 56px; font-size: 15px; color: #fff; background-color: #234687; border-radius: 6px;}


/* 페이지
**********************************************/

.page { padding:47px 0 100px; background-color: #fff;}
.controls { clear: both; overflow: hidden;}
.controls .left { float: left;}
.controls .left .number { display: inline-block; padding-top: 6px; font-size: 12px; font-weight: normal; color: #333;}
.controls .left .number span { color: #fa665a;}
.controls .left h3 .number { padding-top: 0;}
.controls .right { float: right;}
.controls .right select { width: 100px; height: 28px; font-size: 13px;}
.controls .right .btn.red { width:64px;}
.controls .right .number { padding-top: 5px; font-size: 12px;}
.controls input[type=file],
.controls input[type=submit] { height: 26px; vertical-align: middle;}

.frame { clear: both; overflow: hidden;}
.frame >.left { float: left; width:537px;}
.frame >.right { float: right; width:537px;}

.btns { clear: both; overflow: hidden; margin-top: 10px;}
.btns .left { float: left;}
.btns .right { float: right;}
.btns .btn { width:100px;}
.btns .mr { margin-right: 7px;}

.short_layer { position: relative;}
.short_layer .short_table { position: absolute; right: -80px; top: 30px; z-index: 1; padding: 10px; border: 2px solid #eb6d1a; background-color: #fff;}
.short_layer .short_close { position: absolute; right: -23px; top: -2px;}

.vs { display: inline-block; margin: 0 6px; padding: 4px 7px 5px; font-size: 12px; color: #fff; vertical-align: middle; background-color: #234687; border-radius: 11px;}


/* 진단 테스트 (인쇄용)
**********************************************/

.container { width:800px; margin: 0 auto; padding-bottom: 40px;}
.container .ph2 { margin-top: 57px; font-size: 34px; color: #1e2188; text-align: center; line-height: 47px;}
.container .ph2 .bottom_line { border-bottom: 4px solid #698dc2;}
.container .p_wtable { margin-top: 50px; border:2px solid #5981bb;}
.container .p_wtable th { padding: 6px 0; border-left: 1px solid #999; background-color: #dfe7f3;}
.container .p_wtable th:first-child { border-left:none;}
.container .p_wtable td { padding: 18px 0; text-align: center; border-left: 1px solid #999; border-top: 1px solid #999;}
.container .p_wtable td:first-child { border-left:none;}

.container .ph3 { margin-top: 65px; font-size: 21px; color: #343794;}
.container .ph3 img { margin:-2px 4px 0 0; vertical-align: middle;}
.container .p_whtable { border-top:3px solid #5981bb;}
.container .p_whtable th { padding: 7px 0; border-left: 1px solid #999; border-bottom: 1px solid #999; background-color: #dfe7f3; background-color: #eee;}
.container .p_whtable th:first-child { border-left:none;}
.container .p_whtable .white th { padding: 12px 0; border-top:none; background-color: #fff;}
.container .p_whtable .th17 th { padding: 17px 0;}
.container .p_whtable .bottom_line th { border-bottom:2px solid #5981bb;}
.container .p_whtable td { padding: 12px 0; text-align: center; border-left: 1px solid #999; border-bottom: 1px solid #999;}
.container .p_whtable td:first-child { border-left:none;}
.container .p_whtable td.bg_gray { background-color: #f1f1f1;}
.container .p_whtable.ll_none th,
.container .p_whtable.ll_none td { border-left:none;}
.container .p_whtable.td18 td { padding: 18px 0;}
.container .guide { margin: 10px 0 0 10px; color: #ea5d5d;}

.container .ph4 { padding: 11px 0 12px; text-align: center; border-top:3px solid #5981bb; border-bottom:2px solid #5981bb; background-color: #f1f1f1;}
.container .chart { padding: 10px; text-align: center; background-color: #f1f1f1;}
.container .left,
.container .right { width: 48%;}