@charset "utf-8";

/*********************************************************/
/** @desc : 기본 엘리먼트 Markup *************************/
/*********************************************************/
/*나눔고딕*/
@font-face {
    font-family: NanumGothic;
    src:url('../../dsitec/css/font/NanumGothic-Regular.eot');/* ie9 */
    src:local(''),
    url('../../dsitec/css/font/NanumGothic-Regular.eot?iefix') format('embedded-opentype'),/* ie6~8 */
    url('../../dsitec/css/font/NanumGothic-Regular.woff') format('woff'),/* modern browser */
    url('../../dsitec/css/font/NanumGothic-Regular.ttf') format('truetype');/* safari, android */
}

@font-face {
    font-family: NanumGothicBold;
    src:url('../../dsitec/css/font/NanumGothic-Bold.eot');/* ie9 */
    src:local(''),
    url('../../dsitec/css/font/NanumGothic-Bold.eot?iefix') format('embedded-opentype'),/* ie6~8 */
    url('../../dsitec/css/font/NanumGothic-Bold.woff') format('woff'),/* modern browser */
    url('../../dsitec/css/font/NanumGothic-Bold.ttf') format('truetype');/* safari, android */
}

@font-face {
    font-family: NanumGothicExtraBold;
    src:url('../../dsitec/css/font/NanumGothic-ExtraBold.eot');/* ie9 */
    src:local(''),
    url('../../dsitec/css/font/NanumGothic-ExtraBold.eot?iefix') format('embedded-opentype'),/* ie6~8 */
    url('../../dsitec/css/font/NanumGothic-ExtraBold.woff') format('woff'),/* modern browser */
    url('../../dsitec/css/font/NanumGothic-ExtraBold.ttf') format('truetype');/* safari, android */
}

*, select, input, textarea {
    margin: 0;
    padding: 0;
    color: #121212;
    font-family: NanumGothic, gulim, '굴림', Arial, sans-serif;
    font-size: 12px;
    line-height: 18px;
}

html {
    height: 100%;
    min-height: 100%;
}

body {
    height: 100%;
    min-height: 100%;
}

a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    vertical-align: top;
}

img {
    border: 0;
    vertical-align: top;
}

ul {
    list-style: none;
}

select, textarea,
input[type='text'],
input[type='password'],
input[type='number'] {
    border: 1px solid #999;
}

input[type='checkbox'],
input[type='radio'] {
    border: 0;
    vertical-align: middle;
}

/* input 커서 선택시 파란색 테두리 색 나오는거 없애는 css */
input, select, textarea {
    outline-style: none;
}


/**********************************************************************************************/
/** @use  : input[readonly='true'] 일때, 입력받는 것과 구분을 위해 bgc 지정 *******************/
/** chrome 은 자동으로 background-color 지정됨 ************************************************/
/**********************************************************************************************/
input:-moz-read-only { /* Firefox用, IE 와 함께 선언불가*/
    background-color: #ebebe4;
}

input:read-only { /* IE 用, Firefox用 와 함께 선언불가*/
    background-color: #ebebe4;
}

input[readonly="true"] { /* IE 에서 적용 */
    background-color: #ebebe4;
}


label {
    cursor: pointer;
}


/******************************************************************************************/
/** @desc  : input tag 입력칸 높이 지정(기본 line-height: 18px; 이므로) *******************/
/******************************************************************************************/
input[type='text'],
input[type='number'],
input[type='date'],
input[type='password'] {
    min-height: 18px;
}


/*********************************************************/
/** @desc : 특수 속성들 **********************************/
/*********************************************************/
.hidden { display: none; }
.bold   { font-weight: bold; }
.underline { text-decoration: underline; }
.pointer   { cursor: pointer; }


/*********************************************************/
/** @desc : HTML5 객체중 불필요한 UI 제거 ****************/
/*********************************************************/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.date::-webkit-inner-spin-button,
input.date::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/*********************************************************/
/** @desc : 필수항목 *************************************/
/*********************************************************/
.need:before {
    content: '* ';
    color: #f00;
}


/*********************************************************/
/** @desc : 정렬 *****************************************/
/*********************************************************/
.f_left  { float: left;  }
.f_right { float: right; }

.left   { text-align: left;   }
.center { text-align: center; }
.right  { text-align: right;  }
.middle { vertical-align: middle;}


/*********************************************************/
/** @desc : 색상 *****************************************/
/*********************************************************/
.red    { color: #f00; }
.blue   { color: #00f; }
.white  { color: #fff; }
.yellow { color: #ff0; }
.purple { color: #5c2384; }


/*********************************************************/
/** @desc : 배경색상 *************************************/
/*********************************************************/
.bg_red    { background-color: #f90; }
.bg_green  { background-color: #339040; }
.bg_blue   { background-color: #09f; }
.bg_purple { background-color: #5c2384; }
.bg_dark   { background-color: #343434; }
.bg_pale   { background-color: #e7e3e0; }
.bg_g_blue {
    background: #005188;
    background: -moz-linear-gradient(top, #002945 0%, #005188 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002945), color-stop(100%,#005188));
    background: -webkit-linear-gradient(top, #002945 0%,#005188 100%);
    background: -o-linear-gradient(top, #002945 0%,#005188 100%);
    background: -ms-linear-gradient(top, #002945 0%,#005188 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002945', endColorstr='#005188',GradientType=0 );    /* ie8적용, GradientType=0 위에서 아래로, GradientType=1 왼쪽에서 오른쪽으로 */
    background: linear-gradient(to bottom, #002945 0%,#005188 100%);
}
/*  background: linear-gradient(to bottom, #fff, #276928);    (방향,시작색,끝색) */


/*********************************************************/
/** @desc : 폰트사이즈 ***********************************/
/*********************************************************/
.fs_11 { font-size: 11px; }
.fs_14 { font-size: 14px; }
.fs_20 { font-size: 20px; }


/*********************************************************/
/** @desc : 넓이 *****************************************/
/*********************************************************/
.w_100p { width: 100%; }
.w_99p  { width: 99%; }
.w_98p  { width: 98%; }
.w_90p  { width: 90%; }
.w_80p  { width: 80%; }
.w_70p  { width: 70%; }
.w_60p  { width: 60%; }
.w_50p  { width: 50%; }

.w_20  { width: 20px; }
.w_30  { width: 30px; }
.w_45  { width: 45px; }
.w_50  { width: 50px; }
.w_60  { width: 60px; }
.w_70  { width: 70px; }
.w_80  { width: 80px; }
.w_85  { width: 85px; }
.w_100 { width: 100px; }
.w_150 { width: 150px; }
.w_200 { width: 200px; }
.w_202 { width: 202px; }
.w_275 { width: 275px; }
.w_300 { width: 300px; }
.w_400 { width: 400px; }
.w_500 { width: 500px; }

.h_10  { height: 10px; }
.h_20  { height: 20px; }
.h_70  { height: 70px; }
.h_115 { height: 115px; }
.h_185 { height: 185px; }


/*********************************************************/
/** @desc : padding **************************************/
/*********************************************************/
.p_5  { padding: 5px; }
.p_7  { padding: 7px; }
.p_10 { padding: 10px; }

.pt_10  { padding-top: 10px; }
.pt_15  { padding-top: 15px; }
.pt_20  { padding-top: 20px; }
.pt_25	{ padding-top: 25px; }
.pt_40  { padding-top: 40px; }
.pt_70  { padding-top: 70px; }
.pt_100 { padding-top: 100px; }
.pt_130 { padding-top: 130px; }

.pb_10 { padding-bottom: 10px; }
.pb_20 { padding-bottom: 20px; }
.pb_30 { padding-bottom: 30px; }
.pb_50 { padding-bottom: 50px; }

/* .pud_5 { padding: 5px 0; } */
/* .pud_12 { padding: 12px 0; } */
/* .pud_15 { padding: 15px 0; } */
/* .pud_20 { padding: 20px 0; } */

/* .plr_5 { padding: 0 5px; } */
/* .plr_8 { padding: 0 8px; } */


/*********************************************************/
/** @desc : margin ***************************************/
/*********************************************************/
.mt_2   { margin-top: 2px; }
.mt_5   { margin-top: 5px; }
.mt_10  { margin-top: 10px; }
.mt_20  { margin-top: 20px; }
.mt_100 { margin-top: 100px; }
.mt_170 { margin-top: 170px; }

.mr_10 { margin-right: 10px; }
.mr_30 { margin-right: 30px; }

.mb_5  { margin-bottom: 5px; }
.mb_10 { margin-bottom: 10px; }
.mb_20 { margin-bottom: 20px; }
.mb_30 { margin-bottom: 30px; }

.ml_2   { margin-left: 2px; }
.ml_8   { margin-left: 8px; }
.ml_10  { margin-left: 10px; }
.ml_12  { margin-left: 12px; }
.ml_20  { margin-left: 20px; }
.ml_30  { margin-left: 30px; }
.ml_300 { margin-left: 300px; }


/*********************************************************/
/** @desc : table property *******************************/
/*********************************************************/
table {
    width: 100%;
    table-layout: fixed;    /* table-width 값에 따라 넓이 고정 */
    background-color: transparent;
    border: 0;
    border-collapse: collapse;    /* 서로 이웃하는 테이블이나 셀의 테두리를 겹쳐서 표현 */
}

table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td,
table > tfoot > tr > th,
table > tfoot > tr > td {
    overflow: hidden;           /* *** overflow 되면 안보이게 하기      *** */
    text-overflow: ellipsis;    /* *** text-overflow 되면 생략부호(...) *** */
    white-space: nowrap;        /* *** nowrap 자동으로 줄바꿈 x         *** */
    word-break: break-all;
}

table > caption {
    padding: 10px;
    text-align: left;
}