@charset "UTF-8";

@import 'jqtransform.css';
@import 'animate.css';

body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul {margin: 0; padding: 0}
html, body {height: 100%;}
body {font-family: "Malgun-Gothic", "맑은 고딕", "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #555555;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;}
ol, ul {list-style: none;}
a {cursor: pointer; color: inherit;}
a:hover,
a:focus {text-decoration: none;}
video {width: 100% !important; height: auto !important;}
* {-webkit-tap-highlight-color:transparent;}
*, 
*:before, 
*:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
caption {display: none;}
em {font-style: normal;}

#skip {display: block; overflow: hidden; position: absolute; top: 0; left: 0; width: 1px; height: 1px; color: #fff; text-align: center;}
.block {display: block;}
.inblock {display: inline-block !important;}
.fl {float: left;}
.fr {float: right;}
.clear {display: block; overflow: hidden;}
.tal {text-align:left !important; padding-left: 15px !important}
.tar {text-align:right !important; padding-right: 15px !important;}
.tac {text-align:center !important;}
.vt {vertical-align: top !important}
.vb {vertical-align: bottom !important}
/* .right {position: absolute; right: 0; top: 0;} */
.hide {display: none}
.no-border {border: 0 !important;}
.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {font-family: inherit; font-size: inherit;}
.ellipsis {display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.mt0 {margin-top: 0 !important;}
.mt5 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.w100 {width: 100% !important;}
.w50 {width: 50% !important;}

/* ==============
Typo
 ===================*/
.ctxt1 {color:#DD1144;}
.title-area {position: relative;  margin-top: 50px; margin-bottom: 5px; min-height: 30px; text-align: right;}
.title-area:after {display: block; content:''; clear: both}
.title-area:first-child {margin-top: 0;}
/* .title-area .right {position: absolute; top: auto; bottom: 0; right: 0;} */
.title {font-size: 20px; color:#333333; line-height: 30px; margin-bottom: 15px; font-weight: 600;}
.title2 {font-size: 16px; color:#019126; font-weight: 600; line-height: 30px;}
.title-area .title,
.title-area .title2 {float: left}
/* .title-area .btn-group {top: auto; bottom: -7px;} */
/* .title-area .title + .btn-group,
.title-area .title2 + .btn-group {bottom: auto; top: 0} */


.tbl-list .radio input[type="radio"] + label:before  {top: 3px}
/* ==============
 Layout 
 ===================*/
.wrap {min-width: 1400px; position: relative; height: 100%; display:table; width: 100%; table-layout: fixed;}
.container {background: #f3f3f3; padding: 0; height: 100%; min-height: 568px; position: relative; width: auto; display:table-cell; vertical-align: top}
.header {background: #00c332; position: relative; z-index: 3;}
.contents {padding: 35px 40px 70px; max-width: 1460px; min-height: 800px}
.footer {border-top: 1px solid #dddddd; text-align: center; padding: 14px 0}
.footer > span {display: inline-block; background: url(../images/bar.gif) no-repeat 0 50%; padding-left: 17px; margin-left: 10px; font-size: 11px; color:#666666; font-family: 돋움}
.footer > span:first-child {background: none; padding-left: 0}
.col-group  {display: table; width: 100%;}
.col-group .col  {display: table-cell; position: relative; vertical-align: top;}
.col-group .col .tbl-write {padding: 20px}
.col-group .col .title-area ~ .title-area {margin-top: 40px}

.col + .col {padding-left: 40px;}
.col1 {width:33.33333%}
.col3 {width:66.66666%}
.col-left {width: 300px}
.section {position:relative;} 
.section + .section { margin-top: 30px } 

.assignment {table-layout: fixed;}
.assignment:after {display: none}
.assignment .col + .col {padding-left: 0}
.col-group .assignment-tool {width: 80px; text-align: center; vertical-align: middle }
.col-group .assignment-tool .btn {width: 40px; height: 120px; background: #00c332 url(../images/ico-pull-right.png) no-repeat 50% 50%; font-size: 0; line-height: 0; color: transparent; vertical-align: top; min-width: 40px; padding: 0}
.col-group .assignment-tool .btn + .btn {margin-top: 2px}
.col-group .assignment-tool .btn-pull-left {background-image: url(../images/ico-pull-left.png)}
 
/* ==============
topmenu
 ===================*/
 .topmenu {max-width: 1460px; padding: 0 40px; position: relative; text-align: right}
 .topmenu .logo {float: right; line-height: 50px; display: block; margin-left: 5px}
 .topmenu .logo img {padding-top: 4px; vertical-align: top;}
 .topmenu .gnb {float:left}
 .topmenu .gnb:after {display: block; content:''; clear: both}
 .topmenu .gnb > ul > li {float: left; margin-left: 17px;}
 .topmenu .gnb > ul > li:first-child {margin-left: 0}
 .topmenu .gnb > ul > li > a {position:relative; display: block; font-size: 18px; color: rgba(255,255,255,0.7); font-weight:bold; padding: 0 15px; min-height: 50px; line-height: 50px;}
 .topmenu .gnb > ul > li.active > a {color:#333333}
 .topmenu .gnb > ul > li.active > a:before {display: block; content:''; background: #333; left: 0; right: 0; height: 4px; position: absolute; bottom: 0;}
 .topmenu ul.util {text-align: right; display: inline-block;}
 .topmenu ul.util > li {display: inline-block;}
 .topmenu ul.util > li + li {margin-left: -5px}
 .topmenu ul.util > li > a {font-size: 11px; color:rgba(255,255,255,0.8); font-family: 돋움; background: url(../images/bar.gif) no-repeat 0 50%; padding: 0 15px; min-height: 50px; line-height: 50px;}
 .topmenu ul.util > li:first-child a {background:none}
 .topmenu .depth1:after {display: block; content:''; clear: both}
 .topmenu .depth2 {border: 1px solid #333333; background: #fff; position: absolute; top: 50px; z-index: 99; min-width: 180px; display: none;
     -webkit-box-shadow: 3px 3px 10px 1px rgba(153,153,153,0.5);
        -moz-box-shadow: 3px 3px 10px 1px rgba(153,153,153,0.5);
             box-shadow: 3px 3px 10px 1px rgba(153,153,153,0.5);}
 .topmenu .depth2 li {border-top: 1px solid #cccccc}
 .topmenu .depth2 li a {display: block; position:relative; color: #333333; font-size: 12px; font-weight: 600;  padding: 9px 13px 10px; text-align: left}
 .topmenu .depth2 > li > a {color:#00c332; font-size: 14px; padding-right: 50px}
 .topmenu .collapse > a { background: url(../images/ico-arrow.png) no-repeat 95% 50%;}
 .topmenu .collapse > a:hover { background:#666666 url(../images/ico-arrow-over.png) no-repeat 95% 50%; color:#fff;}
 .topmenu .depth2 li.active > a { background:#00c332; color:#fff;}
 .topmenu .depth2 li.collapse.active > a { background:#00c332 url(../images/ico-arrow-over.png) no-repeat 95% 50%; color:#fff;}
 .topmenu .depth3 {display: none}
 .topmenu .depth4 {display: none}
 .topmenu .depth3 li a {padding-left: 24px}
 .topmenu .depth4 li a {padding-left: 33px; color:#666666; font-weight: 400}
 .topmenu .depth4 li a:before {display: inline-block; content:''; background: #333; top: -5px; left: 0; width: 4px; height: 1px; margin-right: 5px; position: relative;}
 .topmenu .collapse {display: block}
 
 /* navbar */
 .navbar {background-color: #333333; z-index: 2001; display: table-cell; width: 180px; margin-bottom: 0; border-radius: 0}
 .nav-title {font-size: 30px; font-weight: bold; text-align: center; color:#fff; margin-top: 25px;}
 .nav-header {padding: 9px 0 27px; text-align: center;}
 .nav-header .logo {line-height: 0}
 .nav {border-top: 1px solid #0f0f0f; border-bottom: 1px solid #5c5c5c}
 .nav > li { height: 40px}
 .nav > li:hover:before,
 .nav > li.active:before {position: absolute; top: 0; left: 0; content: ''; display: block; background: transparent url(../images/bg-menu-on.png) no-repeat; width:203px; height: 40px; z-index: 9;}
 .nav > li > a {color: #aaaaaa; font-size: 14px; font-weight: 600; padding: 9px 20px 9px 25px; border-top: 1px solid #5c5c5c; border-bottom: 1px solid #0f0f0f; position: relative; z-index: 9;}
 .nav > li.active > a {color: #fff; background: transparent; border-top: 1px solid transparent; border-bottom: 1px solid transparent}
 .nav > li > a:hover,
 .nav > li > a:focus {color: #fff; background: transparent; border-top: 1px solid transparent; border-bottom: 1px solid transparent}
 .nav .depth2 {display: none; background: #17242d; padding: 10px 0;}
 .nav .not-collapse .depth2 {display: block;}
 .nav .depth2 li {border: 0;  padding: 0;}
 .nav .depth2 li a {display: block; position:relative; color: #c1daec; font-size: 14px; font-weight: 600;  padding: 6px 10px 6px 40px; font-size: 12px;}
 .nav .depth2 li a:before {background: url(../images/bar1.gif) no-repeat 0 0 !important; top: 12px; left: 29px; width: 4px; height: 2px;}
 .nav .depth2 li a.all:before {background: #c1daec !important; top: 12px; left: 29px; width: 4px; height: 4px; border-radius: 100%}
 .nav .depth2 li a:hover,
 .nav .depth2 li a:focus,
 .nav .depth2 li.active a { background:#17242d; color:#fff;}
 .nav .depth2 li a:hover:before,
 .nav .depth2 li a:focus:before,
 .nav .depth2 li.active a:before {background-image: url(../images/bar1-on.gif) !important; }
 .nav .depth2 li a.all:hover:before,
 .nav .depth2 li a.all:focus:before,
 .nav .depth2 li.active a.all:before {background: #fff !important;}

 /* ==============
Search
 ===================*/
.search-area {background: #fff; border-top: 1px solid #333; padding: 19px 133px 19px 0; position: relative; margin-bottom: 30px}
.search-area > ul {margin-top: -10px}
.search-area > ul:after{content:'';display:block;clear:both;}
.search-area > ul > li {float:left; min-height: 30px; margin-top: 10px;}
.search-area > ul > li:after{content:'';display:block;clear:both;}
.search-area > ul > li > label {display:inline-block; width: 120px; float: left; padding: 3px 10px 7px; margin-bottom: 0; white-space: initial; word-break: break-all;font-size: 14px; text-align: right; letter-spacing: -1px }
.search-area > ul > li label + div {display:inline-block; width: calc(100% - 120px); float: left;}
.search-area > ul > li label + div:after{content:'';display:block;clear:both;}
.search-area .form-inline {padding-top: 2px;}
.search-area .form-inline .checkbox {margin-right: 9px; min-width: 80px;}
.search-area .form-inline .radio {margin-right: 9px; min-width: 80px;}
.search-area .radio input[type="radio"] + label {font-size: 13px; letter-spacing: -1px}
.search-area .checkbox input[type="checkbox"] + label {font-size: 13px; letter-spacing: -1px}
.search-area .btn-search {position: absolute; top: 25px; right: 0; width: 133px; display: inline-block; color:#00c332; font-size: 13px; font-weight: bold; background: url(../images/ico-zoom.png) no-repeat 30px 0; padding-left: 53px;}
.search-area input[type="text"].form-control {width: 190px}
.search-area .select {width: 190px}
.search-area .input-date + .checkbox {margin-left: 10px}
.search-area .form-control + .checkbox {margin-left: 10px}

 /* ==============
form-area
 ===================*/
 .form-area {background: #fff; border-top: 1px solid #333; padding: 19px 20px 10px 0; position: relative; margin-bottom: 30px; display: table; width: 100%;}
 .form-area > ul {display: table-cell;}
 .form-area > ul:after{content:'';display:block;clear:both;}
 .form-area > ul > li {float:left; min-height: 30px; padding-bottom: 10px; min-width: 25%;}
 .form-area > ul > li:after{content:'';display:block;clear:both;}
 .form-area > ul > li.col2 {min-width: 50%}
 .form-area > ul > li.col3 {min-width: 75%}
 .form-area > ul > li.col4 {min-width: 100%}
 .form-area > ul > li > label {display:inline-block; width: 120px; float: left; padding: 3px 10px 7px; margin-bottom: 0; white-space: initial; word-break: break-all;font-size: 14px; text-align: right; letter-spacing: -1px }

 .form-area > ul > li label + div {display:inline-block; width: calc(100% - 120px); float: left; padding-right: 30px}
 .form-area > ul > li label + div:after{content:'';display:block;clear:both;}
 .form-area .form-inline {padding-top: 2px;}
 .form-area .form-inline .checkbox {margin-right: 9px; min-width: 80px;}
 .form-area .form-inline .radio {margin-right: 9px; min-width: 80px;}
 .form-area .radio input[type="radio"] + label {font-size: 13px; letter-spacing: -1px}
 .form-area .checkbox input[type="checkbox"] + label {font-size: 13px; letter-spacing: -1px}
 .form-area input[type="text"].form-control {width: 190px}
 .form-area .select {width: 190px}
 .form-area .btn {vertical-align: top; font-size: 11px; font-family: '돋움'; font-weight: 400; padding: 0 10px}
 .form-area .input-date + .checkbox {margin-left: 10px}
 .form-area .form-control + .checkbox {margin-left: 10px}
 .form-area .form-control + .btn {margin-left: -2px}

/* ==============
 window-popup 
 ===================*/
.pop_container {min-width: 780px;}
.pop_header {background: #000; color:#fff; padding: 16px 20px; position: relative; font-size: 25px;}
.pop_header h1 {color:#fff; font-size: 25px;}
.pop_header .pop_close {background: url(../images/btn-close.png) no-repeat 50% 50%;  color:transparent; width: 66px; height: 60px; position: absolute; top: 0; right: 0; font-size: 0}
.pop_contents {padding: 10px 10px; position: relative;}
.pop_contents .form-area { position: relative; background: #f3f3f3; border-top: 1px solid #000; margin-bottom: 20px}

.pop_contents .form-area > ul {margin-top: -10px}
.pop_contents .form-area > ul > li { min-width: 50%}
.pop_contents .form-area > ul > li label + div {padding-right: 25px}
.pop_contents .title-area {margin-top: 40px; margin-bottom: 10px;}
.pop_contents .title-area:first-child {margin-top: 0}
.pop_contents .calendar-wrap > div.input-date {width: 130px;}
.pop_contents .calendar-wrap > div.input-date input[type="text"] {max-width: 100px}
.pop_contents .tbl-view {background: #f3f3f3}
.pop_contents .tbl-view table {border-bottom: 1px solid #999}

/* ==============
 Btns 
 ===================*/
.btn { height: 30px; line-height: 28px; padding: 0 8px; font-size: 13px; font-weight: 600; border-radius: 0; color: #555; min-width: 60px; transition: all .5s;}
.btn-group > .btn + .btn {margin-left: 2px;}
.btn:focus {outline: none !important;}
.btn-lg {padding: 0 20px; font-size: 16px; height: 46px; line-height: 46px; font-weight: 600}
.btn-md {padding: 0 20px}
.btn-sm {padding: 0 15px; height: 24px; line-height: 22px; font-weight: 400; min-width: 72px;}
.btn-xs {padding: 0 8px; height: 24px; line-height: 24px; font-weight: 400; min-width: 48px;}
.btn-block {width: 100%;}
.btn-primary {background-color: #00c332; border-color: #00c332; color: #fff;}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:active:hover {background-color: #03a22c; border-color: #03a22c;}
.btn-info {background-color: #dddddd; border-color: #cccccc; color: #333333; font-size: 12px}
.btn-info.disabled.focus,
.btn-info.disabled:focus,
.btn-info.disabled:hover,
.btn-info.focus,
.btn-info:focus,
.btn-info:hover,
.btn-info.active,
.btn-info:active,
.btn-info.active.focus,
.btn-info.active:focus,
.btn-info.active:hover,
.btn-info:active.focus,
.btn-info:active:focus,
.btn-info:active:hover {background-color: #dddddd; border-color: #cccccc; color: #333333; font-size: 12px}
.btn-gray {background: #666666; border: 1px solid #666666; text-align: center; color:#fff}
.btn-gray.focus,
.btn-gray:focus,
.btn-gray:active,
.btn-gray:hover {background: #666666; border: 1px solid #666666; color:#fff;}
.btn-black {background: #333333; border: 1px solid #333333; text-align: center; color:#fff}
.btn-black.focus,
.btn-black:focus,
.btn-black:active,
.btn-black:hover {background: #333333; border: 1px solid #333333; color:#fff;}
td .btn {font-family: 돋움}

/* ==============
 Forms 
 ===================*/
 /* inputs */
input[type="text"], 
input[type="password"] {display: inline-block; border: 1px solid #e5e3e3; height: 30px; line-height: 30px; padding: 0 10px; width: 150px; color: #333; font-size: 13px;}
input[type="text"]:disabled, 
input[type="password"]:disabled {background: #eee !important;color: #999 !important;} 
input[type="text"]:focus, 
input[type="password"]:focus,
input[type="text"].form-control:focus, 
input[type="password"].form-control:focus,
textarea:focus,
textarea.form-control:focus {outline: 0; border-color: #00c332 !important; box-shadow: 0 0 0;}
input[type="text"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {color:#333 !important;}
input[type="text"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
textarea:-ms-input-placeholder {color:#333 !important;}
input[type="text"]::-ms-input-placeholder,
input[type="password"]::-ms-input-placeholder,
textarea::-ms-input-placeholder {color:#333 !important;}
input[type="text"].form-control,
input[type="password"].form-control,
textarea.form-control {background-color: #fff; border: 1px solid #cccccc; border-radius: 0; color: inherit; padding: 0 10px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; height: 30px; line-height: 28px; z-index: 2; position: relative; width: 100%; box-shadow: 0 0 0;}
textarea.form-control {height: auto}

/* textarea */
.textarea  {display: block; border: 1px solid #cccccc; width: 100%; height: 150px; padding: 7px 10px; font-size: 13px; overflow: auto; clear: both;}
.textarea::placeholder {color:#c7c8cc !important;}
.textarea:-ms-input-placeholder {color:#c7c8cc !important;}
.textarea::-ms-input-placeholder {color:#c7c8cc !important;}
.textarea + .hint {margin-left: 0;}

/* checkbox */
span.checkbox {position: relative; display: inline-block; margin: 0;}
span.checkbox * {vertical-align: middle;}
span.checkbox input[type="checkbox"] {position: absolute !important; border: 0; opacity: 0; filter: alpha(opacity=0); left: -999em;}
span.checkbox input[type="checkbox"] + label {line-height: 18px; display: inline-block; font-weight: normal; color:#555555;  cursor: pointer; font-size: 14px; padding-left: 0;}
span.checkbox input[type="checkbox"] + label:before {content: ''; display: inline-block; position: relative;top: 0; float: left; margin-right: 10px; width: 17px; height: 17px; background: #fff url(../images/ico-check.gif) no-repeat;}
span.checkbox input[type="checkbox"]:checked + label {color:#666666;}
span.checkbox input[type="checkbox"]:checked + label:before {border: 0; background: url(../images/ico-check.gif) no-repeat 0 -33px;}
span.checkbox input[type="checkbox"]:disabled + label {color:#b2b2b2; cursor: not-allowed;}
span.checkbox input[type="checkbox"]:disabled + label:before {border: 0; background: url(../images/ico-check.gif) no-repeat;}
span.checkbox input[type="checkbox"].checked + label {color:#666666;}
span.checkbox input[type="checkbox"].checked + label:before {border: 0; background: url(../images/ico-check.gif) no-repeat 0 -33px;}
span.checkbox input[type="checkbox"].disabled + label {color:#b2b2b2; cursor: not-allowed;}
span.checkbox input[type="checkbox"].disabled + label:before {border: 0; background: url(../images/ico-check.gif) no-repeat;}
span.checkbox.nolabel input[type="checkbox"] + label {padding-left: 0; text-indent: -999em; font-size: 0; line-height: 0;}
span.checkbox.nolabel input[type="checkbox"] + label:before {margin-right: 0;}

/* radio */
.radio {position: relative; display: inline-block; margin: 0;}
.radio input[type="radio"]{position: absolute;width: 1px; height: 1px;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;}
.radio input[type="radio"] + label {padding-left: 22px; cursor: pointer; font-size: 15px; color: #555; position: relative;}
.radio input[type="radio"] + label:before {content: '';position: absolute;left: -4px;top: 0;width: 18px;height: 18px; background: url(../images/ico-radio.png) no-repeat}
.radio input[type="radio"]:checked + label {color:#666666;}
.radio input[type="radio"]:checked + label:before {background-position: 0 -32px}
.radio input[type="radio"]:checked + label:hover:before {border: 0; border-radius: 0}
.radio input[type="radio"]:disabled + label {color:#b2b2b2; cursor: not-allowed;}
.radio input[type="radio"]:disabled + label:before {border: 0; background: url(../images/ico-radio.png) no-repeat;}
.radio.nolabel{width: 19px;height: 19px;}
.radio.nolabel input[type="radio"] + label {padding-left: 0; text-indent: -999em; font-size: 0; line-height: 0;}

/* select */
/* jQtransform css */
.select {position:relative; display: inline-block; background: transparent; vertical-align: top; width:100%; text-align: left; border-radius: 0}
.select .jqTransformSelectWrapper {margin-bottom: 0; border: 1px solid #cccccc; border-radius: 0; height: 30px; background: #fff}
.select .jqTransformSelectWrapper.select {background: transparent;}
.select .jqTransformSelectWrapper:before {position: absolute; top: 11px; right: 9px; background:#fff url(../images/ico-select-arrow.png) no-repeat 95% 50%; display: inline-block; content: ""; width: 13px; height: 6px}
.select .jqTransformSelectWrapper .selcontainer {margin-top: 0; position: absolute; top: 28px; left: -1px; right: -1px;}
.select .jqTransformSelectWrapper div span {color:#626262; font-size: 13px; padding-left: 10px; height: 30px;
    line-height: 30px;}
.select .jqTransformSelectWrapper  a.jqTransformSelectOpen { color:#626262; font-size: 13px; padding-left: 10px; height: 30px;}
.select .jqTransformSelectWrapper ul {border: 1px solid #cccccc; border-bottom-left-radius: 1px; border-bottom-right-radius: 1px;}
.select .jqTransformSelectWrapper ul a {display: block; padding: 0 10px; text-decoration: none;font-size: 13px; padding-left: 10px; height: 30px; line-height: 30px;} 

.tbl-list .select {width: 68px}
.tbl-list .select .jqTransformSelectWrapper {height: 24px}
.tbl-list .select .jqTransformSelectWrapper a.jqTransformSelectOpen {height: 24px; padding-left: 10px;}
.tbl-list .select .jqTransformSelectWrapper div span {height: 24px; line-height: 24px; font-size: 11px; padding-left: 10px}
.tbl-list .select .jqTransformSelectWrapper:before {width: 9px; height: 5px; background-size: 100% auto; background-position: 100% 30%;}
.tbl-list .select .jqTransformSelectWrapper .selcontainer {top: 22px;}
.tbl-list .select .jqTransformSelectWrapper ul a {padding: 0 5px; font-size: 11px;  padding-left: 10px; height: 24px; line-height: 24px;}

/* file */
.file-add {display: inline-block; position: relative; padding-right: 74px;}
.file-add > .btn {padding: 0 13px; position: absolute; top: 0; right: 0; z-index: 2; border-top-left-radius: 0; border-bottom-left-radius: 0; font-size: 12px; font-weight: normal}
.file-add input[type="text"].form-control {width: 300px; background: #fff !important; color:#333 !important}
.file-add input[type="file"] {overflow: hidden; position: absolute; top: 0; left: -999em; width: 1px; height: 1px; font-size: 0; line-height: 100px; white-space: nowrap; clip:rect(0,0,0,0);}
.file-add + .btn-add {margin-left: 3px;}

/* calendar */
.calendar-wrap > div.input-date {display: inline-block; position: relative; width: 190px; cursor: pointer; padding-right: 28px}
.calendar-wrap > div.input-date input[type="text"] {max-width: 190px; width: 190px; border: 1px solid #cccccc; background: #fff; padding: 0 30px 0 10px}
.calendar-wrap .date-group-to {display: inline-block; vertical-align: top; font-size: 13px; line-height: 30px;}
.calendar-wrap .btn-calendar {display: inline-block; border:0; background: url(../images/ico-calendar.png) no-repeat 100% 50%; width: 50px; height: 28px; font-size: 0; line-height: 0; position: absolute; top: 0; right: 0}
.calendar-wrap .ui-datepicker-trigger {position: absolute; top: 0; right: 0;border: 1px solid #cccccc;}
#ui-datepicker-div {z-index: 9999 !important} 



/* ==============
Swiper
 ===================*/
.device {width: 100%; position: relative; padding: 0 19px; border: 1px solid #cccccc}
.swiper-container {width: 100%; height: 39px;}
.swiper-slide + .swiper-slide {margin-left: -1px } 
.swiper-slide a {display: block; width: 70px; line-height: 39px; height: 39px; border-left: 1px solid #cccccc;  border-right: 1px solid #cccccc; color:#999999; font-size: 13px; text-align: center}
.swiper-active-switch {background: #fff;}
.swiper-slide-active {background: #fff; color:#333}
.swiper-slide-active a {background: #fff; color:#333; font-weight: bold}
.device .arrow-left {background: url(../images/btn-controls.png) no-repeat 0 50%; position: absolute; left: 0; top: 0; width: 20px; height: 39px; border-right: 1px solid #ccc}
.device .arrow-right {background: url(../images/btn-controls.png) no-repeat 100% 50%; position: absolute; left: auto; right: 0; top: 0; width: 20px; height: 39px;  border-left: 1px solid #cccccc;}
.col-left .device {width: 400px}
.col-right .swiper-slide a {width: 90px}

/* ==============
Table
 ===================*/
.tbl-list {border-top: 1px solid #333333; border-bottom: 1px solid #e8e8e8}
.tbl-list table {width: 100%; table-layout: fixed; background: #fff}
.tbl-list th {padding: 10px 0; font-size: 14px; color:#2a2d31; vertical-align: middle; text-align: center;}
.tbl-list td {border-top: 1px solid #e8e8e8; padding: 8px 3px 7px; text-align: center; font-size: 13px; color:#666666; vertical-align: middle; white-space: nowrap;    letter-spacing: -1px; height: 40px}
.tbl-list td.subject {text-align:left; padding-left: 15px !important}
.tbl-list th.th-team {padding-left: 60px; text-align: left;}
.tbl-list td.td-team {padding-left: 30px; text-align: left;border-top: 1px solid #74d58d}
.tbl-list td.td-team ~ td {border-top: 1px solid #74d58d}
.tbl-list tr:hover td {background: #f3f3f3}
.tbl-list tr.active td {background: #d9f6e0}
.tbl-view {border-top: 1px solid #333333; padding: 19px 40px 39px; background: #fff; }
.tbl-view table {width: 100%; table-layout: fixed; border-bottom: 1px solid #e8e8e8; }
.tbl-view th {padding: 10px; font-size: 16px; color:#2a2d31; font-weight: 600; text-align: left; border-bottom: 1px solid #999999}
.tbl-view td {text-align: left; line-height: 1.5; font-size: 14px; color: #333; white-space: nowrap; letter-spacing: -1px; height: 460px; vertical-align: top; padding: 25px 10px}

.tbl-write {border-top: 1px solid #333333; padding: 19px 40px 19px; background: #fff; }
.tbl-write table {width: 100%; table-layout: fixed;}
.tbl-write th {padding: 7px 0; font-size: 14px; color:#333; font-weight: 600; vertical-align: top; text-align: right; padding-right: 16px;}
.tbl-write td {text-align: left; line-height: 1.5; font-size: 14px; color: #333; white-space: nowrap; letter-spacing: -1px; vertical-align: top; padding: 5px 0}


/* pagination */
.pagination-wrap {position: relative; text-align:center; margin-top: 23px;}
.pagination-wrap .btn-top {position: absolute; top: 0; right: 0;}
.pagination {margin: 0;}
.pagination > li > a,
.pagination > li > span {color: #666666; float: left; padding: 0; position: relative; text-decoration: none; width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 13px; font-family: 돋움; font-weight: bold; background: transparent; border: 0}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {background-color: #00c332; color: #fff; cursor: default; z-index: 2;}
.pagination > li > .btn-first {background: url(../images/btn-paging.gif) no-repeat 0 0; margin-left: 2px}
.pagination > li > .btn-prev {background: url(../images/btn-paging.gif) no-repeat -26px 0; margin-left: 2px; margin-right: 10px}
.pagination > li > .btn-next {background: url(../images/btn-paging.gif) no-repeat -60px 0; margin-right: 2px; margin-left: 10px}
.pagination > li > .btn-last {background: url(../images/btn-paging.gif) no-repeat 100% 0; margin-right: 2px}

/* login*/
.intro {background: #f3f3f3; min-height:100%; position: relative;}
.intro-header {background: #00c332; padding: 77px 0 50px; text-align: center;}
.intro .footer {position: absolute; bottom: 0; left: 0; right: 0; height: 50px}
.login-box { width: 350px; margin: auto;}
.login-box legend {display: none}
.login-box .form-group {margin: 50px 0 0 0px;}
.login-box .form-group li + li {margin-top: 10px}
.login-box .form-group .form-control {display: block; height: 48px; line-height: 48px; width: 100%; background: #fff; border: 1px solid #cccccc; }
.login-box .form-group .form-control:focus {border-color:#00c332}
.login-box .form-group .form-control.uid {background:#fff url(../images/ico-id.png) no-repeat 14px 50%; padding-left: 44px }
.login-box .form-group .form-control.upw {background:#fff url(../images/ico-pw.png) no-repeat 14px 50%; padding-left: 44px }
.login-box .btn-login {background-color: #00c332; margin-bottom: 10px; font-size: 22px; font-weight: 600; width: 100%;color: #fff; height: 60px; line-height: 60px; margin-top: 23px;}
.login-box .auth-link {margin: 45px auto; text-align: center}
.login-box .auth-link a {display: inline-block; color: #999999; font-size: 12px; font-family: '돋움'; font-weight: 400; background: transparent; padding: 10px}
.login-box .auth-link a + a {background: url(../images/bar3.gif) no-repeat 0 50%; padding-left: 13px; margin-left: -5px}



/* ==============
Print
 ===================*/
@page {
    size: A4;
    margin: 0;
}
@media print {
    .topmenu,
    .navbar { display:none; }
    .container {padding-left: 0 !important;}
}