// 1. 변수선언

// 1-1. Color
@color_amber : #FFC107;
@color_amber_dark : #FFA000;
@color_amber_light : #FFD54F;
@color_black : #000000;
@color_white : #FFFFFF;
@color_black_light : #333333;
@color_blue : #2196F3;
@color_blue_dark : #1A7DCB;
@color_blue_light : #03A9F4;
@color_blue_gray: #687790;
@color_blue_gray_dark: #434f66;
@color_blue_gray_light: #6f7d95;
@color_brown : #D35400;
@color_brown_dark : #B34902;
@color_brown_light : #E67E22;
@color_coffee : #795548;
@color_coffee_dark : #643F31;
@color_coffee_light : #8E6F64;
@color_cyan : #00BCD4;
@color_cyan_dark : #00A9BE;
@color_cyan_light : #24E5FE;
@color_deep_orange : #FF5722;
@color_deep_orange_dark : #E64A19;
@color_deep_orange_light : #FE794F;
@color_deep_purple : #673AB7;
@color_deep_purple_dark : #512DA8;
@color_deep_purple_light : #855ECA;
@color_gray : #9E9E9E;
@color_gray_dark : #737373;
@color_gray_light : #C9C9C9;
@color_green : #4CAF50;
@color_green_dark : #449D48;
@color_green_light : #8BC34A;
@color_indigo : #3F51B5;
@color_indigo_dark : #303F9F;
@color_indigo_light : #6272CB;
@color_light_gray : #E0E0E0;
@color_light_gray_dark : #BDBDBD;
@color_light_gray_light : #F6F6F6;
@color_lime : #CDDC39;
@color_lime_dark : #AFB42B;
@color_lime_light : #DCE775;
@color_orange : #FF9800;
@color_orange_dark : #FF6D00;
@color_orange_light : #FFAB40;
@color_pink : #FF4081;
@color_pink_dark : #F50057;
@color_pink_light : #FF80AB;
@color_purple : #8E44AD;
@color_purple_dark : #7B1FA2;
@color_purple_light : #9B59B6;
@color_red : #F44336;
@color_red_dark : #DB3C30;
@color_red_light : #F86E64;
@color_teal : #26A69A;
@color_teal_dark : #00897B;
@color_teal_light : #00BFA5;
@color_yellow : #FFEB3B;
@color_yellow_dark : #FDD835;
@color_yellow_light : #FFF176;

@color_menu_light : #37424C;
@color_menu : #242B32;
@color_menu_dark : #121212;

@text_color : @color_black;
@text_color_dark : @color_black;
@content_border : @color_gray_light;

// 1-2. Size
@space_size : 20px;

// 2. Design

// 2-1. Background Color
.menu_bg_light { background-color: @color_menu_light; }
.menu_bg { background-color: @color_menu; }
.menu_bg_dark { background-color: @color_menu_dark;  }
.top_bg { background-color: @color_white;    }
.main_bg { background-color: @color_light_gray;   }
.main_title_bg { background-color: @color_blue_gray; }

.bg_black { background-color: @color_black !important; }
.bg_white { background-color: @color_white !important; }
.bg_amber_light { background-color: @color_amber_light !important; }
.bg_amber { background-color: @color_amber !important; }
.bg_amber_dark { background-color: @color_amber_dark !important; }
.bg_black_light { background-color: @color_black_light !important; }
.bg_blue { background-color: @color_blue !important; }
.bg_blue_dark { background-color: @color_blue_dark !important; }
.bg_blue_light { background-color: @color_blue_light !important; }
.bg_blue_gray { background-color: @color_blue_gray !important; }
.bg_blue_gray_dark { background-color: @color_blue_gray_dark !important; }
.bg_blue_gray_light { background-color: @color_blue_gray_light !important; }
.bg_brown { background-color: @color_brown !important; }
.bg_brown_dark { background-color: @color_brown_dark !important; }
.bg_brown_light { background-color: @color_brown_light !important; }
.bg_cyan { background-color: @color_cyan !important; }
.bg_cyan_dark { background-color: @color_cyan_dark !important; }
.bg_cyan_light { background-color: @color_cyan_light !important; }
.bg_coffee { background-color: @color_coffee !important; }
.bg_coffee_dark { background-color: @color_coffee_dark !important; }
.bg_coffee_light { background-color: @color_coffee_light !important; }
.bg_deep_orange { background-color: @color_deep_orange !important; }
.bg_deep_orange_dark { background-color: @color_deep_orange_dark !important; }
.bg_deep_orange_light { background-color: @color_deep_orange_light !important; }
.bg_gray { background-color: @color_gray !important; }
.bg_gray_dark { background-color: @color_gray_dark !important; }
.bg_gray_light { background-color: @color_gray_light !important; }
.bg_green { background-color: @color_green !important; }
.bg_green_dark { background-color: @color_green_dark !important; }
.bg_green_light { background-color: @color_green_light !important; }
.bg_indigo { background-color: @color_indigo !important; }
.bg_indigo_dark { background-color: @color_indigo_dark !important; }
.bg_indigo_light { background-color: @color_indigo_light !important; }
.bg_light_gray { background-color: @color_light_gray !important; }
.bg_light_gray_dark { background-color: @color_light_gray_dark !important; }
.bg_light_gray_light { background-color: @color_light_gray_light !important; }
.bg_lime { background-color: @color_lime !important; }
.bg_lime_dark { background-color: @color_lime_dark !important; }
.bg_lime_light { background-color: @color_lime_light !important; }
.bg_orange { background-color: @color_orange !important; }
.bg_orange_dark { background-color: @color_orange_dark !important; }
.bg_orange_light { background-color: @color_orange_light !important; }
.bg_pink { background-color: @color_pink !important; }
.bg_pink_dark { background-color: @color_pink_dark !important; }
.bg_pink_light { background-color: @color_pink_light !important; }
.bg_purple { background-color: @color_purple !important; }
.bg_purple_dark { background-color: @color_purple_dark !important; }
.bg_purple_light { background-color: @color_purple_light !important; }
.bg_red { background-color: @color_red !important; }
.bg_red_dark { background-color: @color_red_dark !important; }
.bg_red_light { background-color: @color_red_light !important; }
.bg_teal { background-color: @color_teal !important; }
.bg_teal_dark { background-color: @color_teal_dark !important; }
.bg_teal_light { background-color: @color_teal_light !important; }
.bg_yellow { background-color: @color_yellow !important; }
.bg_yellow_dark { background-color: @color_yellow_dark !important; }
.bg_yellow_light { background-color: @color_yellow_light !important; }
.bg_none { background:none !important }

.bg_top_line_gray {
    color : @text_color !important;
	background: @color_white; // Old browsers
	background: -moz-linear-gradient(top,  @color_gray 3px, @color_white 3px); // FF3.6+
	background: -webkit-gradient(linear, left top, left bottom, color-stop(3px, @color_gray), color-stop(3px, @color_white)); // Chrome,Safari4+
	background: -webkit-linear-gradient(top,  @color_gray 3px, @color_white 3px); // Chrome10+,Safari5.1+
	background: -o-linear-gradient(top, @color_gray 3px,@color_white 3px); // Opera 11.10+
	background: -ms-linear-gradient(top, @color_gray 3px,@color_white 3px); // IE10+
	background: linear-gradient(to bottom, @color_gray 3px,@color_white 3px); // W3C
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color_gray', endColorstr='@color_white',GradientType=0 ); // IE6-9
    border-bottom: 1px solid @color_gray_light !important;
}

.bg_top_line_blue_gray {
    color : @text_color !important;
	background: @color_white; // Old browsers
	background: -moz-linear-gradient(top,  @color_blue_gray 3px, @color_white 3px); // FF3.6+
	background: -webkit-gradient(linear, left top, left bottom, color-stop(3px, @color_blue_gray), color-stop(3px, @color_white)); // Chrome,Safari4+
	background: -webkit-linear-gradient(top,  @color_blue_gray 3px, @color_white 3px); // Chrome10+,Safari5.1+
	background: -o-linear-gradient(top, @color_blue_gray 3px,@color_white 3px); // Opera 11.10+
	background: -ms-linear-gradient(top, @color_blue_gray 3px,@color_white 3px); // IE10+
	background: linear-gradient(to bottom, @color_blue_gray 3px,@color_white 3px); // W3C
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color_gray', endColorstr='@color_white',GradientType=0 ); // IE6-9
    border-bottom: 1px solid @color_blue_gray_light !important;
}

.bg_top_line_blue {
    color : @text_color !important;
	background: @color_white; // Old browsers
	background: -moz-linear-gradient(top,  @color_blue 3px, @color_white 3px); // FF3.6+
	background: -webkit-gradient(linear, left top, left bottom, color-stop(3px, @color_blue), color-stop(3px, @color_white)); // Chrome,Safari4+
	background: -webkit-linear-gradient(top,  @color_blue 3px, @color_white 3px); // Chrome10+,Safari5.1+
	background: -o-linear-gradient(top, @color_blue 3px,@color_white 3px); // Opera 11.10+
	background: -ms-linear-gradient(top, @color_blue 3px,@color_white 3px); // IE10+
	background: linear-gradient(to bottom, @color_blue 3px,@color_white 3px); // W3C
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color_gray', endColorstr='@color_white',GradientType=0 ); // IE6-9
    border-bottom: 1px solid @color_blue_light !important;
}

.bg_top_line_green {
    color : @text_color !important;
	background: @color_white; // Old browsers
	background: -moz-linear-gradient(top,  @color_green 3px, @color_white 3px); // FF3.6+
	background: -webkit-gradient(linear, left top, left bottom, color-stop(3px, @color_green), color-stop(3px, @color_white)); // Chrome,Safari4+
	background: -webkit-linear-gradient(top,  @color_green 3px, @color_white 3px); // Chrome10+,Safari5.1+
	background: -o-linear-gradient(top, @color_green 3px,@color_white 3px); // Opera 11.10+
	background: -ms-linear-gradient(top, @color_green 3px,@color_white 3px); // IE10+
	background: linear-gradient(to bottom, @color_green 3px,@color_white 3px); // W3C
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color_gray', endColorstr='@color_white',GradientType=0 ); // IE6-9
    border-bottom: 1px solid @color_green_light !important;
}

.bg_top_line_red {
    color : @text_color !important;
	background: @color_white; // Old browsers
	background: -moz-linear-gradient(top,  @color_red 3px, @color_white 3px); // FF3.6+
	background: -webkit-gradient(linear, left top, left bottom, color-stop(3px, @color_red), color-stop(3px, @color_white)); // Chrome,Safari4+
	background: -webkit-linear-gradient(top,  @color_red 3px, @color_white 3px); // Chrome10+,Safari5.1+
	background: -o-linear-gradient(top, @color_red 3px,@color_white 3px); // Opera 11.10+
	background: -ms-linear-gradient(top, @color_red 3px,@color_white 3px); // IE10+
	background: linear-gradient(to bottom, @color_red 3px,@color_white 3px); // W3C
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color_gray', endColorstr='@color_white',GradientType=0 ); // IE6-9
    border-bottom: 1px solid @color_red_light !important;
}

.bg_top_line_orange {
    color : @text_color !important;
	background: @color_white; // Old browsers
	background: -moz-linear-gradient(top,  @color_orange 3px, @color_white 3px); // FF3.6+
	background: -webkit-gradient(linear, left top, left bottom, color-stop(3px, @color_orange), color-stop(3px, @color_white)); // Chrome,Safari4+
	background: -webkit-linear-gradient(top,  @color_orange 3px, @color_white 3px); // Chrome10+,Safari5.1+
	background: -o-linear-gradient(top, @color_orange 3px,@color_white 3px); // Opera 11.10+
	background: -ms-linear-gradient(top, @color_orange 3px,@color_white 3px); // IE10+
	background: linear-gradient(to bottom, @color_orange 3px,@color_white 3px); // W3C
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color_gray', endColorstr='@color_white',GradientType=0 ); // IE6-9
    border-bottom: 1px solid @color_orange_light !important;
}

.bg_top_line_teal {
    color : @text_color !important;
	background: @color_white; // Old browsers
	background: -moz-linear-gradient(top,  @color_teal 3px, @color_white 3px); // FF3.6+
	background: -webkit-gradient(linear, left top, left bottom, color-stop(3px, @color_teal), color-stop(3px, @color_white)); // Chrome,Safari4+
	background: -webkit-linear-gradient(top,  @color_teal 3px, @color_white 3px); // Chrome10+,Safari5.1+
	background: -o-linear-gradient(top, @color_teal 3px,@color_white 3px); // Opera 11.10+
	background: -ms-linear-gradient(top, @color_teal 3px,@color_white 3px); // IE10+
	background: linear-gradient(to bottom, @color_teal 3px,@color_white 3px); // W3C
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color_gray', endColorstr='@color_white',GradientType=0 ); // IE6-9
    border-bottom: 1px solid @color_teal_light !important;
}

.bg_top_line_coffee {
    color : @text_color !important;
	background: @color_white; // Old browsers
	background: -moz-linear-gradient(top,  @color_coffee 3px, @color_white 3px); // FF3.6+
	background: -webkit-gradient(linear, left top, left bottom, color-stop(3px, @color_coffee), color-stop(3px, @color_white)); // Chrome,Safari4+
	background: -webkit-linear-gradient(top,  @color_coffee 3px, @color_white 3px); // Chrome10+,Safari5.1+
	background: -o-linear-gradient(top, @color_coffee 3px,@color_white 3px); // Opera 11.10+
	background: -ms-linear-gradient(top, @color_coffee 3px,@color_white 3px); // IE10+
	background: linear-gradient(to bottom, @color_coffee 3px,@color_white 3px); // W3C
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color_gray', endColorstr='@color_white',GradientType=0 ); // IE6-9
    border-bottom: 1px solid @color_coffee_light !important;
}

.bg_top_line_purple {
    color : @text_color !important;
	background: @color_white; // Old browsers
	background: -moz-linear-gradient(top,  @color_purple 3px, @color_white 3px); // FF3.6+
	background: -webkit-gradient(linear, left top, left bottom, color-stop(3px, @color_purple), color-stop(3px, @color_white)); // Chrome,Safari4+
	background: -webkit-linear-gradient(top,  @color_purple 3px, @color_white 3px); // Chrome10+,Safari5.1+
	background: -o-linear-gradient(top, @color_purple 3px,@color_white 3px); // Opera 11.10+
	background: -ms-linear-gradient(top, @color_purple 3px,@color_white 3px); // IE10+
	background: linear-gradient(to bottom, @color_purple 3px,@color_white 3px); // W3C
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color_gray', endColorstr='@color_white',GradientType=0 ); // IE6-9
    border-bottom: 1px solid @color_purple_light !important;
}

.bg_top_line_indigo {
    color : @text_color !important;
	background: @color_white; // Old browsers
	background: -moz-linear-gradient(top,  @color_indigo 3px, @color_white 3px); // FF3.6+
	background: -webkit-gradient(linear, left top, left bottom, color-stop(3px, @color_indigo), color-stop(3px, @color_white)); // Chrome,Safari4+
	background: -webkit-linear-gradient(top,  @color_indigo 3px, @color_white 3px); // Chrome10+,Safari5.1+
	background: -o-linear-gradient(top, @color_indigo 3px,@color_white 3px); // Opera 11.10+
	background: -ms-linear-gradient(top, @color_indigo 3px,@color_white 3px); // IE10+
	background: linear-gradient(to bottom, @color_indigo 3px,@color_white 3px); // W3C
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color_gray', endColorstr='@color_white',GradientType=0 ); // IE6-9
    border-bottom: 1px solid @color_indigo_light !important;
}

// 2-2. Text Color
.text_black { color: @color_black !important; }
.text_white { color: @color_white !important; }
.text_amber_light { color: @color_amber_light !important; }
.text_amber { color: @color_amber !important; }
.text_amber_dark { color: @color_amber_dark !important; }
.text_black_light { color: @color_black_light !important; }
.text_blue { color: @color_blue !important; }
.text_blue_dark { color: @color_blue_dark !important; }
.text_blue_light { color: @color_blue_light !important; }
.text_blue_gray { color: @color_blue_gray !important; }
.text_blue_gray_dark { color: @color_blue_gray_dark !important; }
.text_blue_gray_light { color: @color_blue_gray_light !important; }
.text_brown { color: @color_brown !important; }
.text_brown_dark { color: @color_brown_dark !important; }
.text_brown_light { color: @color_brown_light !important; }
.text_cyan { color: @color_cyan !important; }
.text_cyan_dark { color: @color_cyan_dark !important; }
.text_cyan_light { color: @color_cyan_light !important; }
.text_coffee { color: @color_coffee !important; }
.text_coffee_dark { color: @color_coffee_dark !important; }
.text_coffee_light { color: @color_coffee_light !important; }
.text_deep_orange { color: @color_deep_orange !important; }
.text_deep_orange_dark { color: @color_deep_orange_dark !important; }
.text_deep_orange_light { color: @color_deep_orange_light !important; }
.text_gray { color: @color_gray !important; }
.text_gray_dark { color: @color_gray_dark !important; }
.text_gray_light { color: @color_gray_light !important; }
.text_green { color: @color_green !important; }
.text_green_dark { color: @color_green_dark !important; }
.text_green_light { color: @color_green_light !important; }
.text_indigo { color: @color_indigo !important; }
.text_indigo_dark { color: @color_indigo_dark !important; }
.text_indigo_light { color: @color_indigo_light !important; }
.text_light_gray { color: @color_light_gray !important; }
.text_light_gray_dark { color: @color_light_gray_dark !important; }
.text_light_gray_light { color: @color_light_gray_light !important; }
.text_lime { color: @color_lime !important; }
.text_lime_dark { color: @color_lime_dark !important; }
.text_lime_light { color: @color_lime_light !important; }
.text_orange { color: @color_orange !important; }
.text_orange_dark { color: @color_orange_dark !important; }
.text_orange_light { color: @color_orange_light !important; }
.text_pink { color: @color_pink !important; }
.text_pink_dark { color: @color_pink_dark !important; }
.text_pink_light { color: @color_pink_light !important; }
.text_purple { color: @color_purple !important; }
.text_purple_dark { color: @color_purple_dark !important; }
.text_purple_light { color: @color_purple_light !important; }
.text_red { color: @color_red !important; }
.text_red_dark { color: @color_red_dark !important; }
.text_red_light { color: @color_red_light !important; }
.text_teal { color: @color_teal !important; }
.text_teal_dark { color: @color_teal_dark !important; }
.text_teal_light { color: @color_teal_light !important; }
.text_yellow { color: @color_yellow !important; }
.text_yellow_dark { color: @color_yellow_dark !important; }
.text_yellow_light { color: @color_yellow_light !important; }

// 2-3. Text Styling
.text_bold { font-weight: bold !important; }

// 2-4. Text Size
.font_9pt { font-size:9pt !important; }
.font_9px { font-size:9px !important; }
.font_10px { font-size:10px !important; }
.font_11px { font-size:11px !important; }
.font_12px { font-size:12px !important; }
.font_13px { font-size:13px !important; }
.font_14px { font-size:13px !important; }
.font_15px { font-size:15px !important; }
.font_16px { font-size:16px !important; }
.font_17px { font-size:17px !important; }
.font_18px { font-size:18px !important; }
.font_19px { font-size:19px !important; }
.font_20px { font-size:20px !important; }
.font_21px { font-size:21px !important; }
.font_22px { font-size:22px !important; }
.font_23px { font-size:23px !important; }
.font_24px { font-size:24px !important; }
.font_26px { font-size:24px !important; }
.font_28px { font-size:24px !important; }
.font_30px { font-size:24px !important; }
.font_32px { font-size:24px !important; }
.font_35px { font-size:32px !important; }
.font_40px { font-size:32px !important; }

// 2-5. Rounding
.radius_3px_1 { border-radius: 3px 0 0 0; }
.radius_3px_2 { border-radius: 0 3px 0 0; }
.radius_3px_3 { border-radius: 0 0 3px 0; }
.radius_3px_4 { border-radius: 0 0 0 3px; }
.radius_3px_12 { border-radius: 3px 3px 0 0; }
.radius_3px_13 { border-radius: 3px 0 3px 0; }
.radius_3px_14 { border-radius: 3px 0 0 3px; }
.radius_3px_23 { border-radius: 0 3px 3px 0; }
.radius_3px_24 { border-radius: 0 3px 0 3px; }
.radius_3px_34 { border-radius: 0 0 3px 3px; }
.radius_3px_123 { border-radius: 3px 3px 3px 0; }
.radius_3px_124 { border-radius: 3px 3px 0 3px; }
.radius_3px_134 { border-radius: 3px 0 3px 3px; }
.radius_3px_234 { border-radius: 0 3px 3px 3px; }
.radius_3px_All { border-radius: 3px; }

.radius_5px_1 { border-radius: 5px 0 0 0; }
.radius_5px_2 { border-radius: 0 5px 0 0; }
.radius_5px_3 { border-radius: 0 0 5px 0; }
.radius_5px_4 { border-radius: 0 0 0 5px; }
.radius_5px_12 { border-radius: 5px 5px 0 0; }
.radius_5px_13 { border-radius: 5px 0 5px 0; }
.radius_5px_14 { border-radius: 5px 0 0 5px; }
.radius_5px_23 { border-radius: 0 5px 5px 0; }
.radius_5px_24 { border-radius: 0 5px 0 5px; }
.radius_5px_34 { border-radius: 0 0 5px 5px; }
.radius_5px_123 { border-radius: 5px 5px 5px 0; }
.radius_5px_124 { border-radius: 5px 5px 0 5px; }
.radius_5px_134 { border-radius: 5px 0 5px 5px; }
.radius_5px_234 { border-radius: 0 5px 5px 5px; }
.radius_5px_All { border-radius: 5px; }

.radius_10px_1 { border-radius: 10px 0 0 0; }
.radius_10px_2 { border-radius: 0 10px 0 0; }
.radius_10px_3 { border-radius: 0 0 10px 0; }
.radius_10px_4 { border-radius: 0 0 0 10px; }
.radius_10px_12 { border-radius: 10px 10px 0 0; }
.radius_10px_13 { border-radius: 10px 0 10px 0; }
.radius_10px_14 { border-radius: 10px 0 0 10px; }
.radius_10px_23 { border-radius: 0 10px 10px 0; }
.radius_10px_24 { border-radius: 0 10px 0 10px; }
.radius_10px_34 { border-radius: 0 0 10px 10px; }
.radius_10px_123 { border-radius: 10px 10px 10px 0; }
.radius_10px_124 { border-radius: 10px 10px 0 10px; }
.radius_10px_134 { border-radius: 10px 0 10px 10px; }
.radius_10px_234 { border-radius: 0 10px 10px 10px; }
.radius_10px_All { border-radius: 10px; }

.radius_15px_1 { border-radius: 15px 0 0 0; }
.radius_15px_2 { border-radius: 0 15px 0 0; }
.radius_15px_3 { border-radius: 0 0 15px 0; }
.radius_15px_4 { border-radius: 0 0 0 15px; }
.radius_15px_12 { border-radius: 15px 15px 0 0; }
.radius_15px_13 { border-radius: 15px 0 15px 0; }
.radius_15px_14 { border-radius: 15px 0 0 15px; }
.radius_15px_23 { border-radius: 0 15px 15px 0; }
.radius_15px_24 { border-radius: 0 15px 0 15px; }
.radius_15px_34 { border-radius: 0 0 15px 15px; }
.radius_15px_123 { border-radius: 15px 15px 15px 0; }
.radius_15px_124 { border-radius: 15px 15px 0 15px; }
.radius_15px_134 { border-radius: 15px 0 15px 15px; }
.radius_15px_234 { border-radius: 0 15px 15px 15px; }
.radius_15px_All { border-radius: 15px; }

.center_circle { padding:0; text-align:center; border-radius : 50%; -webkit-border-radius : 50%; -moz-border-radius : 50%; overflow : hidden; vertical-align : middle; display: inline-block; } 
.notice_circle { position:relative; margin:0; padding:0; text-align:center; top:-5px; left:-2px; border-radius : 50%; -webkit-border-radius : 50%; -moz-border-radius : 50%; overflow : hidden; vertical-align : middle; display: inline-block; } 

// 2-6. Border
.border_black { border: 1px solid @color_black !important; }
.border_white { border: 1px solid @color_white !important; }
.border_amber_light { border: 1px solid @color_amber_light !important; }
.border_amber { border: 1px solid @color_amber !important; }
.border_amber_dark { border: 1px solid @color_amber_dark !important; }
.border_black_light { border: 1px solid @color_black_light !important; }
.border_blue { border: 1px solid @color_blue !important; }
.border_blue_dark { border: 1px solid @color_blue_dark !important; }
.border_blue_light { border: 1px solid @color_blue_light !important; }
.border_blue_gray { border: 1px solid @color_blue_gray !important; }
.border_blue_gray_dark { border: 1px solid @color_blue_gray_dark !important; }
.border_blue_gray_light { border: 1px solid @color_blue_gray_light !important; }
.border_brown { border: 1px solid @color_brown !important; }
.border_brown_dark { border: 1px solid @color_brown_dark !important; }
.border_brown_light { border: 1px solid @color_brown_light !important; }
.border_cyan { border: 1px solid @color_cyan !important; }
.border_cyan_dark { border: 1px solid @color_cyan_dark !important; }
.border_cyan_light { border: 1px solid @color_cyan_light !important; }
.border_coffee { border: 1px solid @color_coffee !important; }
.border_coffee_dark { border: 1px solid @color_coffee_dark !important; }
.border_coffee_light { border: 1px solid @color_coffee_light !important; }
.border_deep_orange { border: 1px solid @color_deep_orange !important; }
.border_deep_orange_dark { border: 1px solid @color_deep_orange_dark !important; }
.border_deep_orange_light { border: 1px solid @color_deep_orange_light !important; }
.border_gray { border: 1px solid @color_gray !important; }
.border_gray_dark { border: 1px solid @color_gray_dark !important; }
.border_gray_light { border: 1px solid @color_gray_light !important; }
.border_green { border: 1px solid @color_green !important; }
.border_green_dark { border: 1px solid @color_green_dark !important; }
.border_green_light { border: 1px solid @color_green_light !important; }
.border_indigo { border: 1px solid @color_indigo !important; }
.border_indigo_dark { border: 1px solid @color_indigo_dark !important; }
.border_indigo_light { border: 1px solid @color_indigo_light !important; }
.border_light_gray { border: 1px solid @color_light_gray !important; }
.border_light_gray_dark { border: 1px solid @color_light_gray_dark !important; }
.border_light_gray_light { border: 1px solid @color_light_gray_light !important; }
.border_lime { border: 1px solid @color_lime !important; }
.border_lime_dark { border: 1px solid @color_lime_dark !important; }
.border_lime_light { border: 1px solid @color_lime_light !important; }
.border_orange { border: 1px solid @color_orange !important; }
.border_orange_dark { border: 1px solid @color_orange_dark !important; }
.border_orange_light { border: 1px solid @color_orange_light !important; }
.border_pink { border: 1px solid @color_pink !important; }
.border_pink_dark { border: 1px solid @color_pink_dark !important; }
.border_pink_light { border: 1px solid @color_pink_light !important; }
.border_purple { border: 1px solid @color_purple !important; }
.border_purple_dark { border: 1px solid @color_purple_dark !important; }
.border_purple_light { border: 1px solid @color_purple_light !important; }
.border_red { border: 1px solid @color_red !important; }
.border_red_dark { border: 1px solid @color_red_dark !important; }
.border_red_light { border: 1px solid @color_red_light !important; }
.border_teal { border: 1px solid @color_teal !important; }
.border_teal_dark { border: 1px solid @color_teal_dark !important; }
.border_teal_light { border: 1px solid @color_teal_light !important; }
.border_yellow { border: 1px solid @color_yellow !important; }
.border_yellow_dark { border: 1px solid @color_yellow_dark !important; }
.border_yellow_light { border: 1px solid @color_yellow_light !important; }

.non_border { border: 0 !important; }
.left_non_border { border-left: 0 !important; }
.right_non_border { border-right: 0 !important; }
.top_non_border { border-top: 0 !important; }
.bottom_non_border { border-bottom: 0 !important; }

// 2-7. Padding
.padding_0px { padding: 0 !important; }
.padding_0px_2px { padding: 0 2px !important; }
.padding_0px_5px { padding: 0 5px !important; }
.padding_0px_10px { padding: 0 10px !important; }
.padding_0px_15px { padding: 0 15px !important; }
.padding_0px_20px { padding: 0 20px !important; }
.padding_2px { padding: 2px !important; }
.padding_2px_5px { padding: 2px 5px !important; }
.padding_2px_10px { padding: 2px 10px !important; }
.padding_2px_15px { padding: 2px 15px !important; }
.padding_2px_20px { padding: 2px 20px !important; }
.padding_3px { padding: 3px !important; }
.padding_3px_5px { padding: 3px 5px !important; }
.padding_3px_10px { padding: 3px 10px !important; }
.padding_3px_15px { padding: 3px 15px !important; }
.padding_3px_20px { padding: 3px 20px !important; }
.padding_5px { padding: 5px !important; }
.padding_5px_10px { padding: 5px 10px !important; }
.padding_5px_15px { padding: 5px 15px !important; }
.padding_5px_20px { padding: 5px 20px !important; }
.padding_10px { padding: 10px !important; }
.padding_10px_15px { padding: 10px 15px !important; }
.padding_10px_20px { padding: 10px 20px !important; }
.padding_15px { padding: 15px !important; }
.padding_15px_20px { padding: 15px 20px !important; }
.padding_20px { padding: 20px !important; }
.padding_20px_30px { padding: 20px 30px !important; }

.padding_0px th, .padding_0px td { padding: 0 !important; }
.padding_0px_2px th, .padding_0px_2px td { padding: 0 2px !important; }
.padding_0px_5px th, .padding_0px_5px td { padding: 0 5px !important; }
.padding_0px_10px th, .padding_0px_10px td { padding: 0 10px !important; }
.padding_0px_15px th, .padding_0px_15px td { padding: 0 15px !important; }
.padding_0px_20px th, .padding_0px_20px td { padding: 0 20px !important; }
.padding_1px th, .padding_1px td { padding: 1px !important; }
.padding_1px_2px th, .padding_1px_2px td { padding: 1px 2px !important; }
.padding_1px_5px th, .padding_1px_5px td { padding: 1px 5px !important; }
.padding_1px_10px th, .padding_1px_10px td { padding: 1px 10px !important; }
.padding_1px_15px th, .padding_1px_15px td { padding: 1px 15px !important; }
.padding_1px_20px th, .padding_1px_20px td { padding: 1px 20px !important; }
.padding_2px th, .padding_2px td { padding: 2px !important; }
.padding_2px_5px th, .padding_2px_5px td { padding: 2px 5px !important; }
.padding_2px_10px th, .padding_2px_10px td { padding: 2px 10px !important; }
.padding_2px_15px th, .padding_2px_15px td { padding: 2px 15px !important; }
.padding_2px_20px th, .padding_2px_20px td { padding: 2px 20px !important; }
.padding_3px th, .padding_3px td { padding: 3px !important; }
.padding_3px_5px th, .padding_3px_5px td { padding: 3px 5px !important; }
.padding_3px_10px th, .padding_3px_10px td { padding: 3px 10px !important; }
.padding_3px_15px th, .padding_3px_15px td { padding: 3px 15px !important; }
.padding_3px_20px th, .padding_3px_20px td { padding: 3px 20px !important; }
.padding_5px th, .padding_5px td { padding: 5px !important; }
.padding_5px_10px th, .padding_5px_10px td { padding: 5px 10px !important; }
.padding_5px_15px th, .padding_5px_15px td { padding: 5px 15px !important; }
.padding_5px_20px th, .padding_5px_20px td { padding: 5px 20px !important; }
.padding_10px th, .padding_10px td { padding: 10px !important; }
.padding_10px_15px th, .padding_10px_15px td { padding: 10px 15px !important; }
.padding_10px_20px th, .padding_10px_20px td { padding: 10px 20px !important; }
.padding_15px th, .padding_15px td { padding: 15px !important; }
.padding_15px_20px th, .padding_15px_20px td { padding: 15px 20px !important; }
.padding_20px th, .padding_20px td { padding: 20px !important; }
.padding_20px_30px th, .padding_20px_30px td { padding: 20px 30px !important; }

// 2-8. Spacing
.vspace { display:block;width:100%; padding:@space_size 0 0 0; }
.vspace_5px { display:block;width:100%; padding:5px 0 0 0; }
.vspace_10px { display:block;width:100%; padding:10px 0 0 0; }
.vspace_15px { display:block;width:100%; padding:15px 0 0 0; }
.vspace_20px { display:block;width:100%; padding:20px 0 0 0; }
.vspace_30px { display:block;width:100%; padding:30px 0 0 0; }
.vspace_40px { display:block;width:100%; padding:40px 0 0 0; }
.vspace_50px { display:block;width:100%; padding:50px 0 0 0; }

// 2-9. Align
.center { text-align:center; }
.right { text-align:right; }
.left { text-align:left; }

// 2-10. 기타
.hasEvent { cursor: pointer; }

// 3. Tag

// 3-0. Print
@media only print {
    @page { size: A4; margin: 10mm; }
    body{ background-color:white; color:black; margin:0; padding:0; border:0; }
    .divGoTop { display:none; }    
    #divMenu  { display:none; }
}

header { border: 0; position: fixed; left:0; right:0; z-index: 100; background-color: white; }
.OutlineTBL { width:100%; border:0;margin:0;padding:0; position:absolute; } /* nav, article, aside를 포함하는 테이블 */
nav { border: 0; background-color: @color_menu; z-index:10; color: @color_gray; width:180px; overflow-x: hidden; overflow-y: auto; }
article { border: 0; overflow: auto; width:100%; max-width:100%; }
aside { border: 0; width: 120px; /*display: none;*/ } /* 제안 시스템에서 사용 */

// 3-1. Basic Setting
html, body {  }

// 3-2. Scroll Bar
html, body, div, pre { 
    scrollbar-face-color: @color_blue_gray;
    scrollbar-shadow-color: @color_light_gray;
    scrollbar-highlight-color:@color_light_gray;
    scrollbar-3dlight-color: @color_light_gray;
    scrollbar-darkshadow-color: @color_blue_gray;
    scrollbar-track-color: @color_white;
    scrollbar-arrow-color: @color_blue_gray; 
}
::-webkit-scrollbar {width: 15px;}
::-webkit-scrollbar-track {background-color: @color_white; border-left: 0; border-radius: 10px; }
::-webkit-scrollbar-thumb {background-color: @color_blue_gray;}
::-webkit-scrollbar-thumb:hover {background-color: @color_blue_gray;}

// 3-4. Link
A:link {color:@color_gray_dark; text-decoration:none;}
A:visited {color:@color_gray_dark; text-decoration:none;}
A:active {color:@color_gray_dark; text-decoration:none;}
A:hover {color:@color_gray; text-decoration:none;}

// 3-5. Button
button { padding: 0; border: 0; vertical-align:middle; font-size: 9pt; display:inline-block; }
.button { padding: 0; border: 0; vertical-align:middle; font-size: 9pt; display:inline-block; cursor: pointer; }

.btn_amber { background-color: @color_amber; color: @color_white; } .btn_amber:hover { background-color: @color_amber_dark !important;}
.btn_blue { background-color: @color_blue; color: @color_white; } .btn_blue:hover { background-color: @color_orange !important;}
.btn_blue_gray { background-color: @color_blue_gray; color: @color_white; } .btn_blue_gray:hover { background-color: @color_blue_gray_dark !important;}
.btn_brown { background-color: @color_brown; color: @color_white; } .btn_brown:hover { background-color: @color_brown_dark !important;}
.btn_coffee { background-color: @color_coffee; color: @color_white; } .btn_coffee:hover { background-color: @color_coffee_dark !important;}
.btn_cyan { background-color: @color_cyan; color: @color_white; } .btn_cyan:hover { background-color: @color_cyan_dark !important;}
.btn_deep_orange { background-color: @color_deep_orange; color: @color_white; } .btn_deep_orange:hover { background-color: @color_deep_orange_dark !important;}
.btn_purple { background-color: @color_purple; color: @color_white; } .btn_purple:hover { background-color: @color_purple_dark !important;}
.btn_gray { background-color: @color_gray; color: @color_white; } .btn_gray:hover { background-color: @color_gray_dark !important;}
.btn_green { background-color: @color_green; color: @color_white; } .btn_green:hover { background-color: @color_green_dark !important;}
.btn_indigo { background-color: @color_indigo; color: @color_white; } .btn_indigo:hover { background-color: @color_indigo_dark !important;}
.btn_light_gray { background-color: @color_light_gray; color: @color_black; } .btn_light_gray:hover { background-color: @color_light_gray_dark !important;}
.btn_lime { background-color: @color_lime; color: @color_white; } .btn_lime:hover { background-color: @color_lime_dark !important;}
.btn_menu { background-color: @color_menu; color: @color_white; } .btn_menu:hover { background-color: @color_menu_dark !important;}
.btn_orange { background-color: @color_orange; color: @color_white; } .btn_orange:hover { background-color: @color_orange_dark !important;}
.btn_pink { background-color: @color_pink; color: @color_white; } .btn_pink:hover { background-color: @color_pink_dark !important;}
.btn_purple { background-color: @color_purple; color: @color_white; } .btn_purple:hover { background-color: @color_purple_dark !important;}
.btn_red { background-color: @color_red; color: @color_white; } .btn_red:hover { background-color: @color_blue_light !important;}
.btn_teal { background-color: @color_teal; color: @color_white; } .btn_teal:hover { background-color: @color_teal_dark !important;}
.btn_yellow { background-color: @color_yellow; color: @color_white; } .btn_yellow:hover { background-color: @color_yellow_dark !important;}

// 3-6. Label
label { padding: 0; border: 0; vertical-align:middle; display:inline-block; }

// 3-7. Form
input[type=text], input[type=text]:focus, input[type=password], input[type=password]:focus, input[type=file], input[type=file]:focus { box-shadow: none; }
input[type=text], input[type=password] { border: 1px solid @content_border; padding: 0 10px; font-size: 9pt; vertical-align:middle; }
input[type=file] { border: 0; padding: 0; font-size: 9pt; vertical-align:middle; }
input[type=text]:focus, input[type=password]:focus, input[type=file]:focus { border-color: @color_green !important; }
/*input[type=text]:read-only, input[type=password]:read-only, input[type=file]:read-only { background-color: @color_amber_light; }*/
input[type=checkbox],input[type=radio]{ cursor: pointer; border: 0; width:12px; height:12px; }
.checkbox { border:0; height:12px; } 
input[type=button], input[type=reset], input[type=submit] { border: 0; vertical-align:middle; font-size: 9pt; display:inline-block; cursor: pointer; }

select, select:focus { box-shadow: none; }
select::-ms-expand { border: 0; background-color: transparent; }
select { border: 1px solid @content_border; font-size: 9pt; vertical-align:middle; padding-left:10px; }
option { font-size: 9pt;padding-left:10px; }
textarea { color: @text_color; margin-top: 0; margin-left:0; margin-right: 0; padding: 0; font-family: "Malgun Gothic", "맑은 고딕", "dotum", "돋움", vernada, arial; font-size: 9pt; border:1px inset @color_gray_light; }

// 3-8. Table
.tbl { border-collapse: collapse; border:1px solid @color_gray_light; }
.tbl thead { font-weight: bold; }
.tbl th { border:1px solid @color_gray_light; background-color: @color_light_gray; }
.tbl td { border:1px solid @color_gray_light; background-color: @color_white; }

.tbl_hover tbody tr:hover { background-color: @color_yellow_light !important;  }
.tbl_hover tbody tr:hover td { background-color: @color_yellow_light !important;  }

.tbl_2n_change_color tbody tr:nth-child(2n-1) { background-color:@color_light_gray_light; }

.tbl_scroll { display: block; overflow-y: auto; overflow-x: hidden; float:left; }

.tbl_underline thead { border-top: 1px solid @color_gray_light; border-bottom: 1px solid @color_gray_light; }
.tbl_underline td { border-bottom: 1px solid @color_gray_light; }

.tbl_no_outline th, .tbl_no_outline tr { border-bottom: 1px solid @color_gray_light; }
.tbl_no_outline tr:last-child { border-bottom: 0; }

.tbl_no_border thead { border: 0 !important; }
.tbl_no_border td { border: 0 !important; }

.bbsHeader { width:100%; border-top: 2px solid @color_black_light; border-bottom: 2px solid @color_black_light; padding:5px 0; margin-bottom: 5px; }
.bbsFooter { width:100%; border-bottom: 2px solid @color_black_light; padding:5px 0; }

.page { border: 1px solid @color_white; padding : 2px 5px; display: inline; margin: 0 0 2px 2px; }
.page_select { font-weight: bold; border: 1px solid @color_blue_light; padding : 2px 5px; margin: 0 0 5px 5px; display: inline; background-color: @color_blue; text-decoration:none; color: @color_white; }
.page:hover { border: 1px solid @color_light_gray_light; padding : 2px 5px; display: inline; color:@color_black; background-color: @color_light_gray; text-decoration:none; }

// 4. 기타

pre { overflow:auto; max-width:100%; }

// 4-1. Top, Menu, Main
// Top
#Top { color: @text_color_dark; padding: 0; font-size: 14px; width:100%; height:100%; display:none; }
#TopS { color: @text_color; padding: 0; font-size: 16px; width:100%; height:100%; font-weight:bold; display:none; }
.TopTable{ background-color: @color_white; border:1px solid @color_gray_light; height:100%; width:100%; border-spacing: 0; padding: 0;}
.TopMenuDivFloat { padding:5px 10px 7px 10px; position:absolute; z-index:20000; display:block; top:32px; right:2px; background-color:white; border-radius:5px; border: 1px solid @color_coffee_dark; }

// Menu
#MenuTop {	height: 40px; color: @color_white; font-weight: bold; font-size: 14px; width:100%; display: block; overflow: hidden;}
#MenuTop A:link {color:@color_white; text-decoration:none;}
#MenuTop A:visited {color:@color_white; text-decoration:none;}
#MenuTop A:active {color:@color_white; text-decoration:none;}
#MenuTop A:hover {color:@color_gray_light; text-decoration:none;}

#MenuMain ul { margin: 0; border: 0; padding: 0; }
#MenuMain ul li { cursor: pointer; z-index: 10; color: @color_gray_light; display: block; list-style: none; width:100%; max-width: 100%; background-color: @color_menu; position: relative; font-size:13px; }
#MenuMain ul ul li { background-color: @color_menu_dark; display: block; }
#MenuMain ul li span.MenuTitle { display: inline-block; padding: 10px; }
#MenuMain ul ul li span.MenuTitle { padding: 5px 10px 5px 20px; font-size: 9pt; }
#MenuMain ul ul ul li span.MenuTitle { padding: 5px 10px 5px 30px; font-size: 9pt; }
#MenuMain ul li:hover, #MenuMain ul li.open {   
    color : @color_white; 
	background: @color_menu_dark; // Old browsers
	background: -moz-linear-gradient(left,  @color_green 3px, @color_menu_dark 3px); // FF3.6+
	background: -webkit-gradient(linear, left top, right top, color-stop(3px, @color_green), color-stop(3px, @color_menu_dark)); // Chrome,Safari4+
	background: -webkit-linear-gradient(left,  @color_green 3px, @color_menu_dark 3px); // Chrome10+,Safari5.1+
	background: -o-linear-gradient(left, @color_green 3px,@color_menu_dark 3px); // Opera 11.10+
	background: -ms-linear-gradient(left, @color_green 3px,@color_menu_dark 3px); // IE10+
	background: linear-gradient(to right, @color_green 3px,@color_menu_dark 3px); // W3C
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color_green', endColorstr='@color_menu_dark',GradientType=1 ); // IE6-9
}
#MenuMain ul li.active {
	color : @color_white; 
	background: @color_menu_dark; // Old browsers
	background: -moz-linear-gradient(left,  @color_orange 3px, @color_menu_dark 3px); // FF3.6+
	background: -webkit-gradient(linear, left top, right top, color-stop(3px, @color_orange), color-stop(3px, @color_menu_dark)); // Chrome,Safari4+
	background: -webkit-linear-gradient(left,  @color_orange 3px, @color_menu_dark 3px); // Chrome10+,Safari5.1+
	background: -o-linear-gradient(left, @color_orange 3px,@color_menu_dark 3px); // Opera 11.10+
	background: -ms-linear-gradient(left, @color_orange 3px,@color_menu_dark 3px); // IE10+
	background: linear-gradient(to right, @color_orange 3px,@color_menu_dark 3px); // W3C
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color_orange', endColorstr='@color_menu_dark',GradientType=1 ); // IE6-9
}
#MenuMain ul ul { display: none; }
#MenuMain ul ul li:hover, #MenuMain ul ul li.open, #MenuMain ul ul li.active {
    color : @color_white; 
	background: @color_menu_light; // Old browsers
	background: -moz-linear-gradient(left,  @color_blue 3px, @color_menu_light 3px); // FF3.6+
	background: -webkit-gradient(linear, left top, right top, color-stop(3px, @color_blue), color-stop(3px, @color_menu_light)); // Chrome,Safari4+
	background: -webkit-linear-gradient(left,  @color_blue 3px, @color_menu_light 3px); // Chrome10+,Safari5.1+
	background: -o-linear-gradient(left,  @color_blue 3px, @color_menu_light 3px); // Opera 11.10+
	background: -ms-linear-gradient(left,  @color_blue 3px, @color_menu_light 3px); // IE10+
	background: linear-gradient(to right,  @color_blue 3px, @color_menu_light 3px); // W3C
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color_blue', endColorstr='@color_menu_light',GradientType=1 ); // IE6-9
}
#MenuMain ul ul ul li:hover, #MenuMain ul ul ul li.open, #MenuMain ul ul ul li.active {
    color : @color_white; 
	background: @color_menu_light; // Old browsers
	background: -moz-linear-gradient(left,  @color_red 3px, @color_menu_light 3px); // FF3.6+
	background: -webkit-gradient(linear, left top, right top, color-stop(3px, @color_red), color-stop(3px, @color_menu_light)); // Chrome,Safari4+
	background: -webkit-linear-gradient(left,  @color_red 3px, @color_menu_light 3px); // Chrome10+,Safari5.1+
	background: -o-linear-gradient(left,  @color_red 3px, @color_menu_light 3px); // Opera 11.10+
	background: -ms-linear-gradient(left,  @color_red 3px, @color_menu_light 3px); // IE10+
	background: linear-gradient(to right,  @color_red 3px, @color_menu_light 3px); // W3C
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color_red', endColorstr='@color_menu_light',GradientType=1 ); // IE6-9
}
#MenuMain ul ul li.has-sub::after {
    display: block;
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    right: 10px;
    top: 10px;
    z-index: 10;
    border-top: 2px solid @color_white;
    border-left: 2px solid @color_white;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.holder { width: 0; height: 0; position: absolute; top: 0; right: 0; }
.holder::after, .holder::before {
    display: block;
    position: absolute;
    content: "";
    width: 4px;
    height: 4px;
    right: 10px;
    z-index: 10;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    top: 16px; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff;
}

.MenuTitle > i { width:17px !important; text-align:center; }

// Main
#MainComment { margin: @space_size 0 0 @space_size; padding: 0; background-color: @color_blue; color: @color_white; border: 0 solid @content_border; display: block; max-width:100%; font-size:15px; font-weight:bold; }
.MainBox { margin: @space_size 0 0 @space_size; padding: 0; display: inline-block; border: 0; vertical-align: top;}
.MainTitle { margin:0; padding: 0; display: block; width:100%; color: @color_white; font-weight: bold; font-size:14px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.MainContentWithTitle { margin: 0; padding: 0; border: 0; background-color: white; display: block; box-shadow: -1px -1px 1px 0px @content_border inset;}
.MainContent { margin: 0; padding: 0; background-color: white; border: 0; display: block; box-shadow: -1px -1px 1px 0px @content_border inset; }
.MainContent article { box-shadow: -1px -1px 1px 0px @content_border inset; }


// 4-2. File Progress
.FileProgress { z-index: 20000; position: fixed; left:0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.2); /*not in ie */ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000'); /* ie */ display:none; }
.FileProgress div{ position: fixed; top:50%; left:50%; margin-left: -230px; margin-top: -100px; background-color: white; border:1px solid #808080; }
progress[value] { width: 395px; height: 15px; color: #7BAAF7; background-color:#EEE; border:1px solid @content_border; -webkit-appearance: progress-bar; }
progress[value]::-webkit-progress-bar { background-color:#EEE; border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; display:inline;  }
progress[value]::-webkit-progress-value { background-color:#7BAAF7;   }

// 4-4. Loading Bar
.loading { position: fixed; left:0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.2); /*not in ie */ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000'); /* ie */ display:none; }
.loading div{ position: fixed; top:50%; left:50%; margin-left: -116px; margin-top: -34px; }

// 4-5. 로그인 프로세스
.LoginOutBox { width: 100%; height: 100vh; border: 0; text-align: center; vertical-align: central; display: table; border: 0; }
.LoginInBox { position:absolute; width: 500px; margin: 0; padding: 0; text-align: center; display: inline-block; vertical-align: central; background-color: @color_white; left: 50%; top: 50%; margin-right: 50%; transform: translate(-50%, -50%) ; border-radius: 10px; }

// 4-6. Code Browser
#CodeBrowser {
	position: absolute;
	z-index: 10000;
	display: none;
	background-color: #FFFFFF;
	font-family:"Malgun Gothic", "맑은 고딕", "dotum", "돋움";
	color:black;
	margin-top: 2px;
	padding: 10px;
	border:  2px solid #DEDEDE;

	-moz-box-shadow: 3px 3px 4px silver;
	-webkit-box-shadow: 3px 3px 4px silver;
	box-shadow: 3px 3px 4px silver;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='silver')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='silver');
}		
#CodeBrowserList { width:100%; height: 230px; display:block; overflow-y: auto; border: 0; padding:0; margin:0; }
#EmployeeInformationCard {
    position: absolute;
    z-index: 10000;
    display: none;
    background-color: #FFFFFF;
    font-family: "Malgun Gothic", "맑은 고딕", "dotum", "돋움";
    color: black;
    margin-top: 2px;
    padding: 10px;
    border: 2px solid #DEDEDE;
    -moz-box-shadow: 3px 3px 4px silver;
    -webkit-box-shadow: 3px 3px 4px silver;
    box-shadow: 3px 3px 4px silver;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='silver')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='silver');
}

#CalTemp {
    position: absolute;
    z-index: 10000;
    display: none;
    background-color: @color_light_gray_light;
    font-family: "Malgun Gothic", "맑은 고딕", "dotum", "돋움";
    color: black;
    margin-top: 2px;
    font-size: 11px;
}		
.calendar th { padding:5px 2px!important;border:0;color:@color_black_light; }
.calendar td { padding:4px !important;border:1px solid @color_blue_gray;color:@color_black_light; }
.currentMonth { text-align: center; color: @text_color; }
.prevMonth, .nextMonth { text-align: center; color: @color_gray_light !important; }
.calendar .sun { color: @color_red !important; }
.calendar .sat { color: @color_blue !important; }
.calendar .currentMonth.sun { font-weight: bold; }
.calendar .currentMonth.sat { font-weight: bold; }
.calendar .today { background-color:@color_light_gray; font-weight:bold; }
.calendar .selday { background-color:@color_blue_gray_light; font-weight:bold; color: white !important; }

.calendar2 th { padding:5px 5px !important;border-bottom:1px solid @color_light_gray;color:@color_black_light; line-height:120% !important; }
.calendar2 td { padding:5px 5px !important;border-bottom:1px solid @color_light_gray;color:@color_black_light; line-height:120% !important; }
.calendar2 .sun { color: @color_red !important; }
.calendar2 .sat { color: @color_blue !important; }
.calendar2 .today { background-color:@color_blue_gray_light; font-weight:bold; color: white !important; }

.schedule th { padding:5px 2px!important;border:1px solid @color_blue_gray;color:@color_white;background-color:@color_blue_gray_light !important;  }
.schedule td { padding:4px !important;border:1px solid @color_blue_gray;color:@color_black_light;background-color:white;height:80px;text-align:left;vertical-align:top; }
/*.currentMonth a { color: @text_color; font-weight:bold; }*/
.prevMonth, .nextMonth { background-color:@color_light_gray_light !important; }
.prevMonth, .nextMonth a { color: @color_gray_light !important; }
.schedule .sun { color: @color_red !important; }
.schedule .sat { color: @color_blue !important; }
.schedule .sun a { color: @color_red !important; }
.schedule .sat a { color: @color_blue !important; }

/*.schedule .currentMonth.sun a { font-weight: bold; }
.schedule .currentMonth.sat a { font-weight: bold; }*/
.schedule .today { background-color:@color_light_gray; font-weight:bold; }

.reservation th { padding:5px 2px!important;border:1px solid @color_blue_gray;color:@color_white;background-color:@color_blue_gray_light !important;  }
.reservation td { padding:4px !important;border:1px solid @color_blue_gray;color:@color_black_light;background-color:white;height:80px;text-align:left;vertical-align:top; }
.reservation .sun { color: @color_red; }
.reservation .sat { color: @color_blue; }
.reservation .sun a { color: @color_red; }
.reservation .sat a { color: @color_blue; }
.reservation .today { background-color:@color_light_gray; font-weight:bold; }

.schedule_view { z-index:5000; position: fixed; left:0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.5); /*not in ie */ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000'); /* ie */ display:none; }
.schedule_view > div{ position: fixed; top:50%; left:50%; background-color: white; overflow:auto; padding:20px; }
.schedule_comment { z-index:6000 !important; position: fixed; left:0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.5); /*not in ie */ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000'); /* ie */ display:none; }
.schedule_comment > div{ position: fixed; top:50%; left:50%; background-color: white; overflow:auto; padding:20px; }

// 4-7. TAB
section.Tab ul.tabs { list-style-type: none; margin: 0; padding: 0;  }
section.Tab ul.tabs li { float: left; margin:0 5px 0 0; padding: 5px 20px; background-color:@color_light_gray !important; border: 0; border-bottom: 1px solid @color_light_gray; border-right: 1px solid @color_light_gray; }
section.Tab ul.tabs li:hover { background-color:@color_blue_gray_light !important; }
section.Tab ul.tabs li:hover a { color: white; }
section.Tab ul.tabs li a { font-weight: bold; text-decoration: none; }
section.Tab ul.tabs li.active { background: @color_blue_gray !important; }
section.Tab ul.tabs li.active a { color: white; }
section.Tab .clr { clear: both; }

// 4-8. 기타
.divGoTop {border:0; z-index:20000; position:fixed; right:10px; bottom:10px; padding:0; opacity: 0.5;} // Top으로 가기
.divMessage { color:white; z-index:20000; padding:10px 30px; } // Message 보이기
.divServerList { line-height:170%; width:120px; font-weight:bold; border:1px solid @color_light_gray_dark; z-index:20000; position:fixed; padding:10px; background-color: @color_light_gray_light; } // Server List 보이기
.divLanguageList { line-height:170%; width:100px; font-weight:bold; border:1px solid @color_light_gray_dark; z-index:20000; position:fixed; padding:10px; background-color: @color_light_gray_light; } // Language List 보이기

.position_topleft {position:fixed; top:10px; left:10px; }
.position_topcenter {position:fixed; top:10px; left:45%; }
.position_topright {position:fixed; top:10px; right:10px; }
.position_middleleft {position:fixed; top:45%; left:10px; }
.position_middlecenter {position:fixed; top:45%; left:45%;  }
.position_middleright {position:fixed; top:45%; right:10px; }
.position_bottomleft {position:fixed; bottom:10px; left:10px; }
.position_bottomcenter {position:fixed; bottom:10px; left:45%; }
.position_bottomright {position:fixed; bottom:10px; right:10px; }

// 4-9. BBS Float
.bbs_view { z-index:5000; position: fixed; left:0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.5); /*not in ie */ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000'); /* ie */ display:none; }
.bbs_view > div{ position: fixed; top:50%; left:50%; background-color: white; overflow:auto; padding:20px; }
.bbs_comment { z-index:6000 !important; position: fixed; left:0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.5); /*not in ie */ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000'); /* ie */ display:none; }
.bbs_comment > div{ position: fixed; top:50%; left:50%; background-color: white; overflow:auto; padding:20px; }

.float_window { z-index:6000 !important; position: fixed; left:0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.5); /*not in ie */ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000'); /* ie */ display:none; }
.float_window > div{ position: fixed; top:50%; left:50%; overflow:auto; background-color: white; padding:10px;}

.ImageBBSDiv { display:block;border:1px solid @color_gray_light;width:200px;height:180px;float:left;margin:2px;text-align:center;vertical-align:middle; }

// 4-10. Tree View
.TreeView { overflow-y: auto; overflow-x: auto; white-space:nowrap; padding: 5px 10px; }
.TreeView ul { margin: 0; border: 0; padding: 0; line-height:20px; }
.TreeView ul li { cursor: pointer; z-index: 10; color: @text_color; display: block; list-style: none; position: relative; font-size:9pt; }
.TreeView ul ul { display: none; }

// 5. Media Query
@media screen and (max-width: 1023px) {    
    header { height: 30px; }
    body { color: @text_color; margin: 0; padding: 0; font-family: "Malgun Gothic", "맑은 고딕", "dotum", "돋움", vernada, arial; font-size: 9pt; max-height: 100%; overflow-x: hidden; background-color: @color_light_gray; overflow-x:auto; }
    .OutlineTBL { top:30px; }
    aside { display: none; }
    #Top { display:none; }
    #TopS { display:block; }    
    nav { display: none; }
}

@media screen and (min-width: 1024px) {    
    header {height: 40px;}        
    body { color: @text_color; margin-top: 0; margin-left:0; margin-right: 0; padding: 0; font-family: "Malgun Gothic", "맑은 고딕", "dotum", "돋움", vernada, arial; font-size: 9pt; max-height: 100%; overflow-x: hidden;
        background: @color_menu_dark; // Old browsers
	    background: -moz-linear-gradient(left,  @color_menu 180px, @color_light_gray 180px); // FF3.6+
	    background: -webkit-gradient(linear, left top, right top, color-stop(180px, @color_menu), color-stop(180px, @color_light_gray)); // Chrome,Safari4+
	    background: -webkit-linear-gradient(left,  @color_menu 180px, @color_light_gray 180px); // Chrome10+,Safari5.1+
	    background: -o-linear-gradient(left, @color_menu 180px,@color_light_gray 180px); // Opera 11.10+
	    background: -ms-linear-gradient(left, @color_menu 180px,@color_light_gray 180px); // IE10+
	    background: linear-gradient(to right, @color_menu 180px,@color_light_gray 180px); // W3C
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@menu_bg', endColorstr='@color_light_gray',GradientType=1 ); // IE6-9
    }
    .OutlineTBL { top:40px; }
    aside { display: block; }
    #Top { display: block; }
    #TopS { display: none; }
    nav { display: block; }
}