@charset "UTF-8";

/***********************************************************/
/* Font Definition                                         */
/***********************************************************/
@import url("http://vfor.vieworks.com/cdn/include/font/VieworksWebFont.css");

/***********************************************************/
/* Print Definition                                        */
/***********************************************************/
@page           { MARGIN-TOP:20PX; MARGIN-LEFT:25PX; MARGIN-RIGHT:25PX; MARGIN-BOTTOM:20PX; }
@media print    {
    .Header         { DISPLAY:NONE; }
    .Footer         { DISPLAY:NONE; }
    .AdminLayer     { DISPLAY:NONE; }
    .RightSideMenu  { DISPLAY:NONE; }
}

/***********************************************************/
/*                                                         */
/* Style Definition for Common-Rule                        */
/*                                                         */
/***********************************************************/
/***********************************************************/
/* Basic Tag Definition                                    */
/***********************************************************/
*               { FONT-FAMILY:"Malgun Gothic", "나눔바른고딕", Gulim, Dotum, AppleGothic, Sans-serif, Arial, VieworksWebFontL; }
BODY            { DISPLAY:BLOCK; MARGIN-TOP:0PX; MARGIN-LEFT:0PX; MARGIN-RIGHT:0PX;
                  FONT-SIZE:13PX; FONT-WEIGHT:NORMAL; COLOR:#000000; LINE-HEIGHT:1.5EM; }
::-WEBKIT-SCROLLBAR         { WIDTH:15PX; HEIGHT:15PX; }
::-WEBKIT-SCROLLBAR-TRACK   { -WEBKIT-BOX-SHADOW:INSET 0 0 6PX RGBA(0,0,255,0.3); BORDER-RADIUS:5PX; }
::-WEBKIT-SCROLLBAR-THUMB   { -WEBKIT-BOX-SHADOW:INSET 0 0 6PX RGBA(0,0,0,0.5); BORDER-RADIUS:5PX; }

TABLE           { BORDER:0; }
IMG             { BORDER:NONE; VERTICAL-ALIGN:MIDDLE; }

H1              { FONT-SIZE:24PX; FONT-WEIGHT:BOLD; PADDING-TOP:3PX; PADDING-BOTTOM:2PX; }
H2              { FONT-SIZE:16PX; FONT-WEIGHT:BOLD; MARGIN-TOP:2PX; MARGIN-BOTTOM:1PX; }
H3              { FONT-SIZE:12PX; FONT-WEIGHT:BOLD; MARGIN-TOP:1PX; MARGIN-BOTTOM:1PX; }

A               { TEXT-DECORATION:NONE; }
A:LINK          { COLOR:#000000; }
A:VISITED       { COLOR:#000000; }
A:HOVER         { COLOR:#000000; FONT-WEIGHT:BOLD; }

LABEL           { CURSOR:POINTER; }
INPUT           { HEIGHT:20PX; VERTICAL-ALIGN:MIDDLE;
                  BORDER:1PX SOLID #D2CED1; FONT-SIZE:12PX; }
INPUT:REQUIRED  { BOX-SHADOW:2PX 2PX 10PX RGBA(200, 0, 0, 0.85); }
INPUT[TYPE=BUTTON],
INPUT[TYPE=SUBMIT]
                { DISPLAY:INLINE-BLOCK; CURSOR:POINTER;
                  HEIGHT:25PX; VERTICAL-ALIGN:MIDDLE;
                  BORDER:0PX; BORDER-RADIUS:1PX;
                  FONT-SIZE:13PX; FONT-WEIGHT:BOLD; LINE-HEIGHT:25PX;
                  PADDING:0 15PX 0; BACKGROUND-COLOR:#8CC63E; COLOR:#FFFFFF; }

SELECT          { DISPLAY:INLINE-BLOCK; CURSOR:POINTER; VERTICAL-ALIGN:MIDDLE;
                  BORDER:1PX SOLID #D2CED1; BORDER-RADIUS:1PX; }


/***********************************************************/
/* Basic Table Style Definition                            */
/***********************************************************/
/* 테이블(TableTop, TableLeft) 스타일 정의 - 메인이나 요약페이지 등 부분적 적용 권장 */
/* 테이블(TableCommon) 스타일 정의 - 업무기능 페이지에 적용 권장 */
.TableTop, .TableLeft, .TableCommon
    { WIDTH:100%; BORDER-SPACING:0PX; VERTICAL-ALIGN:MIDDLE;
      MARGIN:0PX 0PX 0PX 0PX; BACKGROUND-COLOR:#FFFFFF; BORDER:4PX SOLID #E5E5E5; }

.TableTop    TR TD, .TableTop    TR TH,
.TableLeft   TR TD, .TableLeft   TR TH,
.TableCommon TR TD, .TableCommon TR TH
    { FONT-SIZE:13PX; HEIGHT:25PX; PADDING-TOP:2PX; PADDING-BOTTOM:2PX;
      BORDER-BOTTOM:2PX SOLID #E5E5E5; BORDER-RIGHT:2PX SOLID #E5E5E5; }
.TableTop    TR TD, .TableLeft   TR TD, .TableCommon TR TD
    { TEXT-ALIGN:LEFT; COLOR:#000000; }

.TableTop    TR TH { TEXT-ALIGN:CENTER; BACKGROUND-COLOR:#4C4C4C; COLOR:#FFFFFF; }
.TableLeft   TR TH { TEXT-ALIGN:CENTER; BACKGROUND-COLOR:#4C4C4C; COLOR:#FFFFFF; WIDTH:20%; MIN-WIDTH:80PX; MAX-WIDTH:150PX; }
.TableCommon TR TH { TEXT-ALIGN:CENTER; BACKGROUND-COLOR:#F2F2F2; COLOR:#000000; WHITE-SPACE:INITIAL; MIN-WIDTH:80PX; }

.TableTop    TR:nth-last-child(1) TH, .TableTop    TR:nth-last-child(1) TD,
.TableLeft   TR:nth-last-child(1) TH, .TableLeft   TR:nth-last-child(1) TD,
.TableCommon TR:nth-last-child(1) TH, .TableCommon TR:nth-last-child(1) TD { BORDER-BOTTOM:0PX; }

.TableTop    TR TD:nth-last-child(1), .TableTop    TR TH:nth-last-child(1),
.TableLeft   TR TD:nth-last-child(1), .TableLeft   TR TH:nth-last-child(1),
.TableCommon TR TD:nth-last-child(1), .TableCommon TR TH:nth-last-child(1) { BORDER-RIGHT:0PX; }

/* 테이블 내용 강조에 사용( (예)결재대기:YellowBG, 결재진행:BlueBG */
.YellowBG     { BACKGROUND-COLOR:#EEA340; }
.YellowBG TD  { COLOR:#FFFFFF; }
.BlueBG       { BACKGROUND-COLOR:#B2EBF4; }
.BlueBG TD    { COLOR:#000000; }

/* 테이블 내용 생략 스타일 정의 */
.TableEllipsis       { TABLE-LAYOUT:FIXED; }
.TableEllipsis TR TD { TEXT-OVERFLOW:ELLIPSIS; OVERFLOW:HIDDEN; WHITE-SPACE:NOWRAP; VERTICAL-ALIGN:TOP; }


/***********************************************************/
/* Button Style Definition                                 */
/***********************************************************/
.GrayButton   { DISPLAY:INLINE-BLOCK; HEIGHT:25PX; PADDING:0 14PX 0; MARGIN-TOP:3PX; MARGIN-BOTTOM:3PX;
                BORDER:1PX SOLID #DDDDDD; CURSOR:POINTER; BORDER-RADIUS:1PX;
                BACKGROUND-COLOR:#DDDDDD; FONT-SIZE:13PX; LINE-HEIGHT:25PX;
                WIDTH:140PX; TEXT-ALIGN:CENTER; }
.RedButtonS   { DISPLAY:INLINE-BLOCK; PADDING:0PX 15PX 0PX 15PX; CURSOR:POINTER; BORDER-RADIUS:2PX;
                BACKGROUND-COLOR:#E10032; FONT-SIZE:8PT; COLOR:#FFFFFF; LINE-HEIGHT:150%; }
.GreenButtonS { DISPLAY:INLINE-BLOCK; PADDING:0PX 15PX 0PX 15PX; CURSOR:POINTER; BORDER-RADIUS:2PX;
                BACKGROUND-COLOR:#8CC63E; FONT-SIZE:8PT; COLOR:#FFFFFF; LINE-HEIGHT:150%; }

/* Align Style */
.AlignCenter   { MARGIN:0 AUTO; DISPLAY:BLOCK; TEXT-ALIGN:CENTER; }
.AlignLeft     { FLOAT:LEFT;  CLEAR:BOTH; }
.AlignRight    { FLOAT:RIGHT; CLEAR:BOTH; }
.FloatLeft     { FLOAT:LEFT; }
.FloatRight    { FLOAT:RIGHT; }

/* Link Style */
.ListLink       { CURSOR:POINTER; COLOR:#2158CC; }

/* Font Style */
.FontLink       { CURSOR:POINTER; }
.FontBlock      { DISPLAY:INLINE-BLOCK; }
.FontBold       { FONT-WEIGHT:BOLD; }
.FontBoldBlue   { FONT-WEIGHT:BOLD; COLOR:#0000FF; }
.FontBoldRed    { FONT-WEIGHT:BOLD; COLOR:#FF0000; }
.FontComment    { COLOR:#0088BB; }
.FontGray       { COLOR:#999999; }
.FontBlue       { COLOR:#0000FF; }
.FontRed        { COLOR:#FF0000; }

/* File Drag and Drop Area Style */
.FileDragAndDropArea { WIDTH:98%; HEIGHT:100PX; BORDER:3PX DOTTED #0B85A1;
                       FONT-SIZE:18PX; COLOR:#92AAB0; CURSOR:POINTER; }

/* BarGraph Style */
.GraphBarGreen { BACKGROUND-COLOR:#00FF00; HEIGHT:15PX; DISPLAY:INLINE-BLOCK; }

/* 객체 Blink(결재 상태 및 이미지 등) */
@-webkit-keyframes blink { 0% { opacity:1; } 50% { opacity:0.2; } 100% { opacity:1; } }
@-moz-keyframes    blink { 0% { opacity:1; } 50% { opacity:0.2; } 100% { opacity:1; } }
@-o-keyframes      blink { 0% { opacity:1; } 50% { opacity:0.2; } 100% { opacity:1; } }
.BlinkImg {
    -webkit-animation:blink 3s; -webkit-animation-iteration-count:2;
    -moz-animation:blink 3s; -moz-animation-iteration-count:2;
    -o-animation:blink 3s; -o-animation-iteration-count:infinite; }


/***********************************************************/
/* Page Loading Image Definition                           */
/***********************************************************/
#PageLoading    { WIDTH:100%; HEIGHT:100%; TOP:0PX; LEFT:0PX; POSITION:FIXED; DISPLAY:BLOCK;
                  OPACITY:0.5; BACKGROUND-COLOR:#AAAAAA; Z-INDEX:99; TEXT-ALIGN:CENTER; }
#PageLoadingImage
                { POSITION:ABSOLUTE; TOP:40%; LEFT:45%; Z-INDEX:100; }

/***********************************************************/
/* Common Shadow Layer Definition                          */
/***********************************************************/
.CommonShadowLayer
    { DISPLAY:NONE; POSITION:FIXED; TOP:0; LEFT:0; WIDTH:100%; HEIGHT:100%; Z-INDEX:100; }
.CommonShadowLayer .CommonShadowBackGround
    { POSITION:ABSOLUTE; TOP:0; LEFT:0; WIDTH:100%; HEIGHT:100%; BACKGROUND:#000000; OPACITY:.5; FILTER:ALPHA(OPACITY=50); }
.CommonShadowLayer .CommonShadowPopupLayer
    { DISPLAY:BLOCK; }

.CommonShadowPopupLayer
    { DISPLAY:NONE; POSITION:ABSOLUTE; TOP:50%; LEFT:50%;
      BACKGROUND-COLOR:#FFFFFF; BORDER:5PX SOLID #3571B5; BORDER-RADIUS:10PX; }
.CommonShadowPopupLayer .CommonShadowPopupWindow
    { PADDING:10PX 20PX; }
.CommonShadowPopupLayer P.CommonShadowPopupWindowContent
    { TEXT-ALIGN:LEFT; LINE-HEIGHT:25PX; MAX-HEIGHT:600PX; OVERFLOW:AUTO; }
.CommonShadowPopupLayer P.CommonShadowPopupWindowContent IMG
    { WIDTH:100%; MAX-WIDTH:800PX; }
.CommonShadowPopupLayer .CommonShadowPopupWindowClose
    { PADDING-TOP:10PX; BORDER-TOP:1PX SOLID #DDD; TEXT-ALIGN:CENTER; }

/***********************************************************/
/* Right Side Menu Definition                              */
/***********************************************************/
.RightSideMenu {
    POSITION:FIXED; TOP:50PX; RIGHT:-92PX; Z-INDEX: 5;
    BACKGROUND:HSLA(80, 90%, 40%, 0.7); OPACITY:.9; FILTER:ALPHA(OPACITY=50);
    PADDING: 10PX 20PX 10PX 10PX; TEXT-ALIGN: LEFT;
    BORDER: SOLID HSLA(80, 90%, 40%, 0.5); BORDER-RIGHT: NONE;
    BOX-SHADOW: 0 1PX 3PX BLACK; BORDER-RADIUS: 10PX 2PX 2PX 10PX;
}
.RightSideMenu A {
    DISPLAY: BLOCK; TEXT-DECORATION: NONE; COLOR:#FFFFFF; FONT-SIZE:14PX;
    MARGIN:10PX 0PX 10PX 0PX;
}
.RightSideMenu A:HOVER { FONT-WEIGHT: BOLD; }
.RightSideMenu.open { RIGHT: 0PX; }


/***********************************************************/
/*                                                         */
/* Style Definition for multi-Device                       */
/*                                                         */
/***********************************************************/
/***********************************************************/
/* Common Definition                                       */
/***********************************************************/
/* 전체 프레임 */
.TotalFrame     { WIDTH:100%; MARGIN-TOP:0PX; MARGIN-LEFT:0PX; MARGIN-RIGHT:0PX; }

/* 상단 로고 영역 */
.Header { WIDTH:100%; PADDING:10PX 0PX 0PX 0PX; MARGIN-TOP:0PX; MARGIN-LEFT:AUTO; MARGIN-RIGHT:AUTO; }
.Header .HeadTop                { DISPLAY:TABLE; WIDTH:100%; }
.Header .HeadTop .HeadTitle     { FLOAT:LEFT; PADDING-LEFT:10PX; }
.Header .HeadTop .HeadTitle A   { COLOR:#B22637; FONT-SIZE:15PX; VERTICAL-ALIGN:TEXT-BOTTOM; }
.Header .HeadTop .HeadLogin     { FLOAT:RIGHT; PADDING-RIGHT:10PX; }
.Header .HeadMenu               { PADDING:0PX 5PX 0PX 5PX; MARGIN-TOP:3PX; LINE-HEIGHT:20PX; BORDER-RADIUS:2PX;
                                  BACKGROUND-COLOR:#E10032; COLOR:#CCCCCC; TEXT-ALIGN:CENTER; FONT-WEIGHT:BOLD; }
.Header .HeadMenu A             { COLOR:#FFFFFF; LINE-HEIGHT:2EM; }
.HeaderPopup { POSITION:ABSOLUTE; TOP:0PX; LEFT:0PX; }

/* 하단 영역 */
.Footer { WIDTH:100%; PADDING:10PX 0PX 10PX 0PX; MARGIN-LEFT:AUTO; MARGIN-RIGHT:AUTO; }
.Footer .FooterComment { TEXT-ALIGN:CENTER; COLOR:#999999; }
.Footer .FooterComment FONT { CURSOR:POINTER; }
.Footer .FooterCopyRight { TEXT-ALIGN:CENTER; COLOR:#555555; }

/* 본문 영역 */
.Content        { WIDTH:100%; PADDING:0PX 0PX 0PX 0PX; MARGIN-TOP:5PX; MARGIN-LEFT:AUTO; MARGIN-RIGHT:AUTO; }
.ContentTable   { WIDTH:100%; MARGIN-LEFT:AUTO; MARGIN-RIGHT:AUTO; VERTICAL-ALIGN:MIDDLE; }

.MenuBoxContainer       { POSITION:RELATIVE; DISPLAY:INLINE-BLOCK; WIDTH:100%; MARGIN:0PX 0PX 0PX 0PX; }
.MenuBoxContainerLeft   { DISPLAY:INLINE-BLOCK; HEIGHT:100%; }
.MenuBoxContainerRight  { DISPLAY:INLINE-BLOCK; HEIGHT:100%; }

.MenuBox                { DISPLAY:INLINE-BLOCK; OVERFLOW:HIDDEN; BACKGROUND-COLOR:#FFFFFF;
                          WIDTH:100%; HEIGHT:180PX; MARGIN:0PX 0PX 0PX 0PX; BORDER:4PX SOLID #E5E5E5; }
.MenuBoxWide            { DISPLAY:INLINE-BLOCK; OVERFLOW:AUTO; BACKGROUND-COLOR:#FFFFFF;
                          WIDTH:100%; HEIGHT:100%; MARGIN:0PX 0PX 0PX 0PX; BORDER:4PX SOLID #E5E5E5; }
.MenuBoxHeader          { WIDTH:100%; MARGIN:0PX 0PX 0PX 0PX; HEIGHT:26PX; TEXT-ALIGN:LEFT;
                          BACKGROUND-COLOR:#555555; COLOR:#FFFFFF; BORDER:0PX; BORDER-BOTTOM:4PX SOLID #E5E5E5; }
.MenuBoxHeader A        { COLOR:#FFFFFF; FONT-SIZE:13PX; }
.MenuBoxContent         { WIDTH:100%; HEIGHT:146X; MARGIN:0PX 0PX 0PX 0PX; TEXT-ALIGN:LEFT;
                          FONT-SIZE:12PX; BORDER:0PX; }
.MenuBoxContent.hide    { DISPLAY:NONE; }

.MenuBoxTable { WIDTH:100%; BORDER-SPACING:0PX; BORDER:0PX; VERTICAL-ALIGN:MIDDLE;
                MARGIN:0PX 0PX 0PX 0PX; BACKGROUND-COLOR:#FFFFFF; CURSOR:POINTER; }
.MenuBoxTable TR TH { TEXT-ALIGN:CENTER; }
.MenuBoxTable TR TD { TEXT-ALIGN:LEFT; }
.MenuBoxTable TR TD,
.MenuBoxTable TR TH { COLOR:#000000; FONT-SIZE:13PX; HEIGHT:25PX;
                      BORDER-BOTTOM:2PX SOLID #E5E5E5; BORDER-RIGHT:2PX SOLID #E5E5E5; }
.MenuBoxTable TR TD:nth-last-child(1),
.MenuBoxTable TR TH:nth-last-child(1) { BORDER-RIGHT:0PX; }
.MenuBoxTable.hide    { DISPLAY:NONE; }
.MenuBoxTableWide TR:nth-last-child(1) TD,
.MenuBoxTableWide TR:nth-last-child(1) TH { BORDER-BOTTOM:0PX; }


/***********************************************************/
/* Responsive Web Definition                               */
/***********************************************************/
/***********************************************************/
/* 0 ~ 360                                                 */
/***********************************************************/
@MEDIA ONLY SCREEN AND (MAX-WIDTH:360PX)
{
    .TotalFrame             { WIDTH:360PX; }
    .MenuBoxContainerLeft   { WIDTH:100%; }
    .MenuBoxContainerRight  { WIDTH:100%; }
    .MenuBox                { HEIGHT:100%; }
    .RightSideMenu          { DISPLAY: NONE; }
}

/***********************************************************/
/* 360 ~ 750                                               */
/***********************************************************/
@MEDIA ONLY SCREEN AND (MIN-WIDTH:360PX) AND (MAX-WIDTH:750PX)
{
    .TotalFrame             { WIDTH:100%; }
    .MenuBoxContainerLeft   { WIDTH:100%; }
    .MenuBoxContainerRight  { WIDTH:100%; }
    .MenuBox                { HEIGHT:100%; }
    .RightSideMenu          { DISPLAY: NONE; }
}

/***********************************************************/
/* 750 ~ 1920                                              */
/***********************************************************/
@MEDIA ONLY SCREEN AND (MIN-WIDTH:750PX) AND (MAX-WIDTH:1920PX)
{
    .TotalFrame             { WIDTH:90%; MIN-WIDTH:750PX; }
    .MenuBoxContainerLeft   { POSITION:ABSOLUTE; TOP:0; LEFT:0; TEXT-ALIGN:LEFT; WIDTH:60%; }
    .MenuBoxContainerRight  { WIDTH:39.5%; MARGIN-LEFT:60.5%; }
    .MenuBox                { HEIGHT:180PX; }
    .RightSideMenu          { DISPLAY:; }
}

/***********************************************************/
/* 1920 ~                                                  */
/***********************************************************/
@MEDIA ONLY SCREEN AND (MIN-WIDTH:1920PX)
{
    .TotalFrame             { WIDTH:1728PX; }
    .MenuBoxContainerLeft   { POSITION:ABSOLUTE; TOP:0; LEFT:0; TEXT-ALIGN:LEFT; WIDTH:60%; }
    .MenuBoxContainerRight  { WIDTH:39.5%; MARGIN-LEFT:60.5%; }
    .MenuBox                { HEIGHT:180PX; }
    .RightSideMenu          { DISPLAY:; }
}


/***********************************************************/
/* 특정 화면에서만 사용하는 Style                          */
/***********************************************************/
/* 근태, 예약에서만 사용하는 테이블 */
.TimeTable             { WIDTH:100%; TABLE-LAYOUT:FIXED; BORDER:4PX SOLID #E5E5E5; VERTICAL-ALIGN:MIDDLE; BORDER-SPACING:0PX; }
.TimeTable TR TH:nth-child(1)  { BACKGROUND-COLOR:#EEEEEE; }
.TimeTable TR:nth-child(-n+2) TH { BACKGROUND-COLOR:#4C4C4C; COLOR:#FFFFFF; }
.TimeTable TR TD       { BACKGROUND-COLOR:#CCCCCC; BORDER:1PX SOLID #EEEEEE; CURSOR:POINTER;
                         TEXT-OVERFLOW:ELLIPSIS; OVERFLOW:HIDDEN; WHITE-SPACE:NOWRAP; }
.TimeTable TR TD.HighLighted   { BACKGROUND-COLOR:#99FF99; }
.TimeTable TR TD.Reserved      { BACKGROUND-COLOR:#FF9999; }
.TimeTable TR TD.ReservedMine  { BACKGROUND-COLOR:#9999FF; }
.TimeTable .BackSlash          { BACKGROUND-IMAGE:URL(http://vfor.vieworks.com/cdn/image/back_slash.png); BACKGROUND-SIZE:100% 100%; TEXT-ALIGN:LEFT; }
.TimeTable .BackSlash DIV      { TEXT-ALIGN:RIGHT; }

/* 부재중 임직원에서만 사용 */
.AbsentUserWidth  { WIDTH:250PX; }