@charset "utf-8";
@import url('fonts.css');

/*
	www.somansa.com
	project	:CM
	author	:WebUX / duck@somansa.com
	date	:2014.02.19

	category
		CSS RESET
		COMMON
		LAYOUT
		FLUID GRID SYSTEM
		HEAD
		ASIDE
		CONTENTS
		HYBOOST MANAGER MONITOR
		TABLE STYLE
		DATATABLE STYLE
		FORM & BUTTON
		ICON
		JQUERY
		PADDING/MARGIN STYLE
		인쇄용
 */



/* -------------------- CSS RESET -------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
mark, audio, video, input, button, select {
	margin: 0;
	padding: 0;
	border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
	line-height: 1.5
}
body {
	font-family: 'malgungothic', 'dotum', 'Open Sans', sans-serif;
	font-size: 12px;
	color: #333a4c
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 12px;
}
ol,
ul {
	list-style: none;
}
a {
	outline: 0;
	border: none;
	color: #363636;
	text-decoration: none;
}
a.atag {
	color: #1a0dab;
}
a.atag:hover {
	color: #1f11bb;
	text-decoration: underline;
	cursor: pointer;
}
a:hover {
	color: #7f91b7;
	text-decoration: none;
}
img {
	border: none;
}
hr {
	margin: 30px 0;
	border: none;
	border-top: 1px solid #cbccd1;
	box-shadow: 0 1px 0 #ffffff
}
.no-boxshadow hr {
	filter: progid: DXImageTransform.Microsoft.Shadow(color='#ffffff', Direction=180, Strength=1);
}



/* -------------------- COMMON -------------------- */

.clearfix {
	zoom: 1
}
.clearfix:after {
	content: ' ';
	display: block;
	clear: both
}
.fl {
	float: left;
}
.fr {
	float: right;
}
.text-l {
	text-align: left !important;
	word-break: break-all;
}
.text-r {
	text-align: right !important;
	word-break: break-all;
}
.text-c {
	text-align: center !important;
	word-break: break-all;
}
.text-default{/* color:#31708F; */}	/*	기본		:	대부분의 안내 문구			*/
.text-primary{color:#086fc8;}	    /*	문구 강조 	:	강조할 내용					*/
.text-success{color:#3C763D;}	    /*	폼 성공	:	폼 벨리데이션 성공			*/
.text-warning{color:#c8312e;}	    /*	폼 경고 	: 	폼 벨리데이션 실패, 경고 문구	*/

.a_left {
	text-align: left !important;
}

.a_center {
	text-align: center !important;
}

.a_right {
	text-align: right !important;
}

.text--sm {
	font-size: 11px;
	color: #999999;
}

.text--md {
	font-size: 14px;
	font-weight: 500;
}
.text--lg {
	font-size: 18px;
	font-weight: 800;
}
.text--xl {
	font-size: 24px;
	font-weight: 800;
}

.ellipsis { /* width값은 요소에 인라인으로 입력 필요 */
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.hide {
	display: none
}
.isCC_hide {
	display: none
}
.clickable:hover {
	cursor: pointer;
}

/* ------------------ Scrollbar ------------------ */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
	background-color: #CBCDD1;
	border-radius: 4px;
}
::-webkit-scrollbar-thumb {
	background-color: #989A9E;
	border-radius: 4px;
}


/* -------------------- LAYOUT -------------------- */

body {
	background: #f0f1f6 url('../images/aside_BG.jpg') left top repeat-y;
}
#wrap {
	min-width: 1280px
}
#header {
	position: relative;
	height: 50px;
	border-bottom: 6px solid #4b98dc;
	background: #424954;
	background: -moz-linear-gradient(top, #424954 0%, #2e333b 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424954), color-stop(100%, #2e333b));
	background: -webkit-linear-gradient(top, #424954 0%, #2e333b 100%);
	background: -o-linear-gradient(top, #424954 0%, #2e333b 100%);
	background: -ms-linear-gradient(top, #424954 0%, #2e333b 100%);
	background: linear-gradient(to bottom, #424954 0%, #2e333b 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#424954', endColorstr='#2e333b', GradientType=0);
	box-shadow: 0 -1px 0 #6bade4 inset;
	zoom: 1;
}
#header:after {
	content: ' ';
	display: block;
	clear: both
}
#container {
	position: relative;
	padding: 20px 20px 0 0;
}
.aside {
	position: absolute;
	left: 0;
	top: 0;
	padding: 20px 15px;
	width: 189px;
}
.contents {
	position: relative;
	width: 980px;
	margin: 0 0 0 240px;
	padding: 150px 20px 30px;
	border: 1px solid #cbccd1;
	border-radius: 5px;
	background: #fcfcfc;
	box-shadow: 1px 1px 3px rgba(24, 33, 48, 0.3);
}
.footer {
	width: 980px;
	margin: 20px 20px 10px 240px;
	font-size: 11px;
	text-align: center;
	font-family: tahoma;
	color: #acacac;
}
.footer .company,
.copyright_productInfo span {
	color: #7BA0D1;
}
#divPopView_productInfo .toe-Version-Copyright {
	position: relative;
}
#divPopView_productInfo .toe {
	margin-top: 5px;
	font-family: 'tahoma';
	font-size: 11px;
	/* color: #5490c4; */
}



/* -------------------- Full FRAME LAYOUT : 공통 -------------------- */

.fullFrame {
	background: #f0f1f6 url('../images/body_BG.jpg')
}
.fullFrame #wrap {
	min-width: initial;
	min-height: 670px;
	margin: 10px;
}
.fullFrame #header,
.fullFrame .aside {
	display: none;
}
.fullFrame #container {
	padding: 0;
}
.fullFrame .contents {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
	border: 0;
	border-radius: 5px;
	background: #fcfcfc;
	box-shadow: 2px 2px 3px rgba(24, 33, 48, 0.7);
}
.fullFrame h3 {
	padding: 0 0 5px;
}



/* -------------------- Full FRAME LAYOUT : LOGIN -------------------- */

.fullFrame.login #wrap {
	background: url('../images/wrap_BG.jpg') no-repeat 50% 50%;
}
.fullFrame.login .contents {
	background: none;
	box-shadow: none;
}
.fullFrame.login h1 {
	position: relative;
	width: 520px;
	margin: 30px auto 0;
	background: url('../images/logo2_shadow.png') no-repeat center bottom;
}
.fullFrame .toe {
	width: 100%;
	margin-top: -10px;
	padding-bottom: 10px;
	font-family: 'tahoma';
	font-size: 12px;
	color: #c6c9cf;
	font-weight: bold;
	text-align: center;
}
.fullFrame .loginBox {
	width: 257px;
	margin: 27px auto 0;
	padding: 30px 40px;
	border-radius: 5px;
	box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.2);
	background: #d2dcea url('../images/loginBox_top.png') repeat-x left top;
}
.fullFrame .licenseBox {
	width: 406px;
	height: 227px;
	margin: 27px auto 0;
	padding: 40px;
	background: url('../images/license_BG.png') no-repeat;
}
.fullFrame .loginBox > p.welcome {
	padding: 10px 0;
	font-size: 20px;
	font-weight: bold;
	font-family: verdana;
	letter-spacing: -1px;
	text-align: center;
	color: #374964;
}
.fullFrame .loginBox label {
	display: inline-block;
	font-size: 13px;
	font-weight: bold;
	margin: 8px 0 2px;
}
.fullFrame .loginBox .inputForm {
	position: relative;
}
.fullFrame .loginBox .inputForm i {
	position: absolute;
	left: 14px;
	top: 8px;
	z-index: 1;
}
.fullFrame .loginBox .inputForm .loginPW {
	background-position: -16px 0;
}
.fullFrame .loginBox .inputForm.focus .loginPW {
	background-position: -32px 0;
}
.fullFrame .loginBox .inputForm input[type="password"] {
	padding-left: 40px;
}
.fullFrame .loginBox .inputForm input[type="text"],
.fullFrame .loginBox .inputForm input[type="password"] {
	height: 32px;
}
.no-boxsizing .fullFrame .loginBox .inputForm .loginPW,
.no-boxsizing .fullFrame .loginBox .inputForm.focus .loginPW {
	display: none;
}
.no-boxsizing .fullFrame .loginBox .inputForm input {
	position: relative;
	left: 5px;
	top: 0;
	width: 255px;
	padding: 0;
}
.fullFrame .loginBox .btn-login {
	width: 257px;
	height: 50px;
	margin: 20px 0 0;
	padding: 0;
	border: none;
	border-radius: initial;
	outline: none;
	background: url('../images/login_btn.png') no-repeat left top;
	filter: none;
	box-shadow: none;
	cursor: pointer;
}
.fullFrame .loginBox .btn-login:hover {
	color: #dcffb9;
}
.fullFrame .loginBox .btn-login:active {
	background-position: left bottom;
}
.fullFrame .loginBox .firstLogin {
	position: relative;
	left: 20px;
	height: 35px;
	margin-top: 15px;
	cursor: help;
}
.fullFrame .loginBox .firstLogin p {
	position: absolute;
	right: 20px;
	padding: 10px 0;
}
.fullFrame .loginBox .firstLogin p:first-child {
	z-index: 1;
}
.fullFrame .loginBox .firstLogin p:last-child {
	right: 50px;
	opacity: 0;
}
.licenseBox .licenseOut {
	overflow: auto;
	height: 67px;
	margin-top: 80px;
	padding: 8px 5px;
	background-color: #e74949;
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	line-height: 1.5em;
	text-align: center;
}
.licenseBox .licenseOut span {
	font-weight: normal
}
.licenseBox .progressBar {
	width: 300px;
	height: 5px;
	margin: 30px auto 15px;
	background-color: #e55c5c;
	font-size: 0;
}
.licenseBox .progressBar > div {
	height: 5px;
	background-color: #ffffff;
	font-size: 0;
}
.licenseBox .interval {
	text-align: center;
	color: #ffffff;
}
.fullFrame .initialStep {
	position: relative;
	width: 678px;
	min-height: 416px;
	margin: 20px auto 0;
}
.fullFrame .initialStep_header {
	height: 59px;
	background: url('../images/initialStep_BG_header.png') no-repeat left top;
}
.fullFrame .initialStep_middle {
	padding: 20px 100px 0;
	background: url('../images/initialStep_BG_middle.png') repeat-y left top;
}
.fullFrame .initialStep_bottom {
	height: 70px;
	background: url('../images/initialStep_BG_bottom.png') no-repeat left top;
}
.fullFrame .initialStep h2 {
	position: relative;
	padding: 20px 70px 0;
	color: #fff;
	text-shadow: -1px -1px 0 #225480;
}
.fullFrame .initialStep_middle p {
	padding-bottom: 20px;
}
.fullFrame .initialStep_middle .row:last-child,
.fullFrame .initialStep_middle .row.last-child {
	margin: 0;
}
.fullFrame .initialStep .skipArea {
	text-align: right;
	padding-right: 100px;
}
.fullFrame .footer {
	width: auto;
	margin: 20px;
}
.fullFrame .initialStep.matool {
	width: 1160px;
}



/* -------------------- Full FRAME LAYOUT : LOGIN && DB-i CC -------------------- */

.fullFrame.DBiCC,
.fullFrame.login.DBiCC #wrap {
	margin: 0;
	padding: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	font-family: Arial, "맑은 고딕", "Malgun Gothic", "돋움", "Dotum", sans-serif;
	font-size: 12px;
	background-color: #4d5465;
	background-image: none;
}
.fullFrame.login.DBiCC .contents {
	padding: 0px;
}
.fullFrame.login.DBiCC .contents * {
	margin: 0;
	padding: 0;
}
.fullFrame.login.DBiCC #wrap .footer {
	display: none;
}
.fullFrame.login.DBiCC .login {
	width: 480px;
	margin-left:auto;
	margin-right:auto;
	border-radius: 7px;
	background: #3e71b4;
	box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3), 0 0 50px 10px rgba(4, 37, 83, 0.3) inset;
}
.fullFrame.login.DBiCC .loginHead {
	box-sizing: border-box;
	min-height: 103px;
	border-radius: 7px 7px 0 0 ;
	background: #ffffff;
}
.fullFrame.login.DBiCC .loginHead img {
	position: relative;
	top: 0;
	left: 0;
	margin-bottom: -2px;
	border-radius: 7px 7px 0 0;
}
.fullFrame.login.DBiCC .loginHead .toe {
	position: relative;
	margin: -35px 0 0 170px;
	padding-bottom: 5px;
	max-width: 280px;
	color: #717171;
	font-size: 11px;
	font-weight: bold;
	line-height: 1.1em;
	text-align: left;
	font-family: Arial, "맑은 고딕", "Malgun Gothic", "돋움", "Dotum", sans-serif;
}
.fullFrame.login.DBiCC .loginBody {
	padding: 40px;
	position: relative;
}
.fullFrame.login.DBiCC .loginBody .inputBox {
	position: relative;
	min-height: 80px;
}
.fullFrame.login.DBiCC .loginBody .inputBox > div {
	margin-bottom: 12px;
}
.fullFrame.login.DBiCC .loginBody .inputBox label {
	display: inline-block;
	width: 70px;
	height: 34px;
	margin-right: 10px;
	color: #ebebeb;
	line-height: 32px;
	text-align: right;
}
.fullFrame.login.DBiCC .loginBody input[type="text"],
.fullFrame.login.DBiCC .loginBody input[type="password"] {
	width: 190px;
	padding: 8px 8px;
	color: #ebebeb;
	border: 1px solid #0d2c52;
	border-radius: 0;
	background-color: #1e4f8a;
	font-family: inherit;
    font-size: 12px;
	vertical-align: middle;
	box-sizing: content-box;
}
.fullFrame.login.DBiCC .loginBody input[type="text"]:focus,
.fullFrame.login.DBiCC .loginBody input[type="password"]:focus {
	border: 1px solid #009aff;
	outline: none;
	background-color: #114078;
}
.fullFrame.login.DBiCC .loginBody .info {
	padding-left: 63px;
	color: #efefef;
	font-size: 11px;
	line-height: 1.3em;
}
.fullFrame.login.DBiCC .loginBody .info label {
	display: inline-block;
	margin-right: 20px;
}
.fullFrame.login.DBiCC .loginBody a {
	text-decoration: none;
}
.fullFrame.login.DBiCC .loginBody a:hover {
	text-decoration: underline;
}
.fullFrame.login.DBiCC .loginBody .info a {
	color: #64ccdb;
}
.fullFrame.login.DBiCC .btnLoginSubmit {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 79px;
    border: 0;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    background: #518ee2;
    background: -moz-linear-gradient(top, #518ee2 35%, #427ec7 85%);
    background: -webkit-linear-gradient(top, #518ee2 35%,#427ec7 85%);
    background: linear-gradient(to bottom, #518ee2 35%,#427ec7 85%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#518ee2', endColorstr='#427ec7',GradientType=0 );
    cursor: pointer;
}
.fullFrame.login.DBiCC .copyright {
    margin: 20px 0 0 0;
    color: #caccd1;
    font-size: 11px;
    text-align: center;
}
.fullFrame.login.DBiCC .copyright span {
    color: #7ba0d1;
    vertical-align: baseline;
}
.fullFrame.login.DBiCC .firstLogin {
	position: relative;
	left: 20px;
	height: 35px;
	margin-top: 15px;
	cursor: help;
}
.fullFrame.login.DBiCC .firstLogin p {
	position: absolute;
	right: 20px;
	padding: 10px 0;
}
.fullFrame.login.DBiCC .firstLogin p:first-child {
	z-index: 1;
}
.fullFrame.login.DBiCC .firstLogin p:last-child {
	right: 50px;
	opacity: 0;
}

/* -------------------- 초기화면 정기정검도구 -------------------- */

.fullFrame .matool .initialStep_header {
	background: url('../images/initialStep_BG_header_1160.png') no-repeat left top;
}
.fullFrame .matool .initialStep_middle {
	background: url('../images/initialStep_BG_middle_1160.png') repeat-y left top;
}
.fullFrame .matool .initialStep_bottom {
	background: url('../images/initialStep_BG_bottom_1160.png') no-repeat left top;
}



/* -------------------- Full FRAME LAYOUT : ERROR PAGE -------------------- */

#errorWrap {
	height: 100%
}
#errorWrap {
	position: relative;
	height: 100%
}
#errorWrap > div {
	position: absolute;
	left: 50%;
	top: 100px;
	width: 640px;
	margin-left: -320px;
}
#errorWrap .fl {
	width: 170px;
	padding-top: 8px
}
#errorWrap .fr {
	width: 470px;
	color: #ffffff
}
#errorWrap h1 {
	font-size: 40px;
	font-family: tahoma;
	font-weight: bold;
	color: #ffffff;
	text-transform: uppercase;
}
#errorWrap strong {
	font-size: 16px;
	line-height: 1.5em;
	font-family: '맑은 고딕';
	font-weight: bold;
	color: #ffffff;
}
#errorWrap p {
	font-size: 11px;
	line-height: 1.2em;
	font-family: '맑은 고딕';
	font-weight: bold;
	color: #caccd1;
	word-spacing: -1px;
}



/* -------------------- Closed Aside LAYOUT : 공통 -------------------- */

.asideClose {
	background-image: none;
}
.asideClose #wrap {
	min-height: 670px;
	margin: 0;
}
.asideClose .aside {
	display: none;
}
.asideClose #container {
	margin: 20px;
	padding: 0;
}
.asideClose .contents {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 150px 20px 30px;
	box-sizing: border-box;
	border: 1px solid #cbccd1;
	border-radius: 5px;
	background: #fcfcfc;
	box-shadow: 1px 1px 3px #1821304d;
}
.asideClose .footer {
	width: initial;
	width: auto;
	/* For IE */
	margin: 20px 0 10px 0;
}



/* -------------------- FLUID GRID SYSTEM -------------------- */

.gird-fluid {
	margin-right: auto;
	margin-left: auto;
	padding: 0 10px;
}
.row {
	*zoom: 1;
	margin-bottom: 10px;
}
.row:last-child {
	margin-bottom: 0;
}
.row [class*="row"] {
	margin: 2px 0 0;
}
.row:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.row [class*="col-"] {
	display: block;
	float: left;
	margin-left: 2.127659574468085%;
	width: 100%;
	line-height: 26px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.no-boxsizing .row [class*="col-"] {
	margin-left: 2.074468085106383%;
}
.row [class*="col-"]:first-child {
	margin-left: 0;
}
.row [class*="col-"] img {
	vertical-align: middle
}
.row .col-1                 {width: 6.382978723404255%;        *width: 6.329787234042553%;}
.row .col-2                 {width: 14.893617021276595%;       *width: 14.840425531914894%;}
.row .col-3                 {width: 23.404255319148934%;       *width: 23.351063829787233%;}
.row .col-4                 {width: 31.914893617021278%;       *width: 31.861702127659576%;}
.row .col-5                 {width: 40.42553191489362%;        *width: 40.37234042553192%;}
.row .col-6                 {width: 48.93617021276595%;        *width: 48.88297872340425%;}
.row .col-7                 {width: 57.44680851063829%;        *width: 57.39361702127659%;}
.row .col-8                 {width: 65.95744680851064%;        *width: 65.90425531914893%;}
.row .col-9                 {width: 74.46808510638297%;        *width: 74.41489361702126%;}
.row .col-10                {width: 82.97872340425532%;        *width: 82.92553191489361%;}
.row .col-11                {width: 91.48936170212765%;        *width: 91.43617021276594%;}
.row .col-12                {width: 100%;                      *width: 99.94680851063829%;}
.row .offset-1              {margin-left: 10.638297872340425%; *margin-left: 10.53191489361702%;}
.row .offset-1:first-child  {margin-left: 8.51063829787234%;   *margin-left: 8.404255319148938%;}
.row .offset-2              {margin-left: 19.148936170212764%; *margin-left: 19.04255319148936%;}
.row .offset-2:first-child  {margin-left: 17.02127659574468%;  *margin-left: 16.914893617021278%;}
.row .offset-3              {margin-left: 27.659574468085104%; *margin-left: 27.5531914893617%;}
.row .offset-3:first-child  {margin-left: 25.53191489361702%;  *margin-left: 25.425531914893618%;}
.row .offset-4              {margin-left: 36.170212765957444%; *margin-left: 36.06382978723405%;}
.row .offset-4:first-child  {margin-left: 34.04255319148936%;  *margin-left: 33.93617021276596%;}
.row .offset-5              {margin-left: 44.68085106382979%;  *margin-left: 44.57446808510638%;}
.row .offset-5:first-child  {margin-left: 42.5531914893617%;   *margin-left: 42.4468085106383%;}
.row .offset-6              {margin-left: 53.191489361702125%; *margin-left: 53.085106382978715%;}
.row .offset-6:first-child  {margin-left: 51.063829787234035%; *margin-left: 50.95744680851063%;}
.row .offset-7              {margin-left: 61.70212765957446%;  *margin-left: 61.59574468085106%;}
.row .offset-7:first-child  {margin-left: 59.574468085106375%; *margin-left: 59.46808510638297%;}
.row .offset-8              {margin-left: 70.2127659574468%;   *margin-left: 70.10638297872339%;}
.row .offset-8:first-child  {margin-left: 68.08510638297872%;  *margin-left: 67.9787234042553%;}
.row .offset-9              {margin-left: 78.72340425531914%;  *margin-left: 78.61702127659572%;}
.row .offset-9:first-child  {margin-left: 76.59574468085106%;  *margin-left: 76.48936170212764%;}
.row .offset-10             {margin-left: 87.23404255319149%;  *margin-left: 87.12765957446807%;}
.row .offset-10:first-child {margin-left: 85.1063829787234%;   *margin-left: 84.99999999999999%;}
.row .offset-11             {margin-left: 95.74468085106382%;  *margin-left: 95.6382978723404%;}
.row .offset-11:first-child {margin-left: 93.61702127659574%;  *margin-left: 93.51063829787232%;}
.row .offset-12             {margin-left: 104.25531914893617%; *margin-left: 104.14893617021275%;}
.row .offset-12:first-child {margin-left: 102.12765957446808%; *margin-left: 102.02127659574467%;}
[class*="col-"].hide,
.row [class*="col-"].hide {
	display: none;
}
[class*="col-"].pull-right,
.row [class*="col-"].pull-right {
	float: right;
}
.row.paragraph {
	margin-bottom: 0px
}
.row.paragraph [class*="col-"] {
	line-height: 12px
}



/* -------------------- HEAD -------------------- */

#header h1 {
	float: left;
	margin: 9px 0 0 30px;
}
#header .gnb {
	float: left;
	margin: 0 0 0 13px;
}
#header .gnb ul {
	zoom: 1;
}
#header .gnb ul:after {
	content: ' ';
	display: block;
	clear: both;
}
#header .gnb li {
	float: left;
}
#header .gnb li a {
	display: inline-block;
	min-width: 56px;
	height: 49px;
	padding: 0 12px;
	text-shadow: -1px -1px 0 #23272d;
	font-family: 'Open Sans';
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	line-height: 56px;
}
#header .gnb li a:hover {
	background: #435161;
	background: -moz-linear-gradient(top, #435161 0%, #313e4b 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #435161), color-stop(100%, #313e4b));
	background: -webkit-linear-gradient(top, #435161 0%, #313e4b 100%);
	background: -o-linear-gradient(top, #435161 0%, #313e4b 100%);
	background: -ms-linear-gradient(top, #435161 0%, #313e4b 100%);
	background: linear-gradient(to bottom, #435161 0%, #313e4b 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#435161', endColorstr='#313e4b', GradientType=0);
	color: #66ccff;
}
#header .gnb li.active a {
	height: 56px;
	border-left: 1px solid rgba(0, 0, 0, 0.4);
	border-right: 1px sOlid rgba(0, 0, 0, 0.4);
	background: url('../images/gnb_activeBG.png') no-repeat center bottom;
	background-size: 100% 10px;
	box-shadow: 0 1px 0 1px rgba(80, 103, 126, 0.4) inset;
}
.no-rgba #header .gnb li.active a {
	border-left: 1px solid #21252a;
	border-right: 1px sOlid #21252a;
}
.no-backgroundsize #header .gnb li.active a {
	position: relative;
	background: none;
}
.no-backgroundsize #header .gnb li.active a:hover {
	color: #66ccff;
	filter: none;
}
.no-backgroundsize #header .gnb li.active a:after {
	content: url('../images/gnb_activeBG.png');
	display: block;
	position: absolute;
	left: 50%;
	bottom: -4px;
	margin-left: -46px;
}
#header .headerSetting {
	float: right;
}
#header .headerSetting > li {
	float: left;
	width: 50px;
	height: 48px;
	border-left: 1px solid #2d3239;
	box-shadow: 1px 0 0 rgba(86, 86, 86, 0.5) inset;
	background: #4b4b4b;
	background: -moz-linear-gradient(top, #4b4b4b 0%, #353535 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4b4b4b), color-stop(100%, #353535));
	background: -webkit-linear-gradient(top, #4b4b4b 0%, #353535 100%);
	background: -o-linear-gradient(top, #4b4b4b 0%, #353535 100%);
	background: -ms-linear-gradient(top, #4b4b4b 0%, #353535 100%);
	background: linear-gradient(to bottom, #4b4b4b 0%, #353535 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4b4b4b', endColorstr='#353535', GradientType=0);
	text-align: center;
}
#header .headerSetting img {
	padding-top: 12px;
	cursor: pointer;
}



/* -------------------- ASIDE -------------------- */

.selectCard {
	position: relative;
}
.selectCard > div,
.selectCard a {
	display: block;
	position: relative;
	height: 26px;
	padding: 8px 20px 12px 10px;
	cursor: pointer;
}
.selectCard > div {
	padding: 9px 20px 11px 10px;
	border-radius: 5px;
	background: #343a42;
}
.selectCard ul {
	position: absolute;
	left: 0;
	top: 0;
	width: 189px;
}
.selectCard li {
	height: 46px;
	border-top: 1px solid #3b4048;
	border-bottom: 1px solid #17191b;
	background: #343a42;
}
.selectCard li:hover {
	background: #202326;
}
.selectCard li:first-child {
	border-radius: 5px 5px 0 0;
}
.selectCard li:last-child {
	border-radius: 0 0 5px 5px;
}
.selectCard strong {
	font-size: 13px;
	color: #a6a8b0;
	text-shadow: -1px -1px 0 #1f2226;
}
.selectCard span {
	display: block;
	font-size: 20px;
	color: #85868a;
	text-shadow: -1px -1px 0 #1f2226;
}
.selectCard li:hover strong,
.selectCard li:hover span {
	color: #fff;
}
.selectCard > div i {
	display: block;
	position: absolute;
	right: 10px;
	top: 20px;
	width: 10px;
	height: 6px;
	background: url('../images/ico_arrow1.png') no-repeat left top;
}
.lnb .menu > li {
	margin-bottom: 10px;
	padding: 15px;
}
.lnb .menu > li.active {
	border-top: 1px solid #b4b5b9;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	border-left: 1px solid #b4b5b9;
	border-radius: 2px;
	background: #dedfe4;
	box-shadow: 1px 1px 0 #d0d1d5 inset;
}
.lnb .menu > li > a {
	padding-bottom: 10px;
}
.lnb .subMenu > li {
	line-height: 20px
}
.lnb .menu a {
	display: block;
	font-size: 12px;
	font-weight: bold;
	color: #292929;
}
.lnb .subMenu a {
	display: block;
	position: relative;
	padding-left: 10px;
	font-weight: normal;
	color: #737476;
}
.lnb .subMenu a.currentSubMenu {
	font-weight: bold;
}
.lnb .subMenu a i {
	display: inline-block;
	*display: inline;
	zoom: 1;
	position: absolute;
	left: 0;
	top: 50%;
	width: 7px;
	height: 6px;
	margin: -2px 5px 0 0;
	*margin: -2px 5px 0 0;
	vertical-align: middle;
}
.lnb .subMenu a i.on {
	background: url('../images/useFilter_on.png')
}
.lnb .subMenu a i.off {
	background: url('../images/useFilter_off.png')
}
.hyboostSetting {
	margin: 10px 0 20px;
	text-align: right;
}
.hyboostSetting .hyboostPopup {
	position: absolute;
	left: 126px;
	z-index: 100;
	width: 120px;
	margin-top: -122px;
	border-radius: 5px;
	border-bottom: 1px solid #3d444d;
	background: #343a42;
	box-shadow: 0 3px 2px 0px #a9aaaf;
}
.hyboostSetting .hyboostPopup ul {
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 3px 0 0 #0f1216;
}
.hyboostSetting .hyboostPopup:after {
	content: url('../images/ico_arrow2.png');
	position: absolute;
	left: 50%;
	width: 14px;
	height: 8px;
	margin-left: -7px;
}
.hyboostSetting ul li {
	padding: 3px 0;
	text-align: center;
}
.hyboostSetting ul a {
	font-weight: bold;
	color: #929ca3;
}
.hyboostSetting ul a:hover {
	color: #66ccff;
}


/* ---------- flat 버튼 : UI 조작용 ---------- */

.btn--flat {
	border-width: 0;
	color: #009FF4;
	font-weight: 600;
	letter-spacing: -1px;
	box-shadow: none;
	background: #ffffff;
	padding: 0 4px;
}

.btn--flat:hover {
	background: #e5e5e5;
	color: #0094E3;
	box-shadow: none;
}

.btn--flat:active {
	background-color: #e5e5e5;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.24) inset;
}

.btn--flat-grey {
	color: #bbbbbb;
	background-color: #EBEBEB;
	width: 50px;
}


.btn--flat,
.btn--dropdown {
	position: relative; /* 아이콘을 가진 버튼, btn--file 용 */
	border-radius: 2px;
	outline: 0;
	cursor: pointer;
	background-color: #ffffff;
}

a.btn--flat,
a.btn--dropdown {
	display: inline-block;
	text-decoration: none;
}

.btn--dropdown:hover {
	background-color: #f9f9f9;
}

.btn--dropdown:active {
	background-color: #f9f9f9;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.24) inset;
}

/* ---------- dropdown 버튼 ---------- */

.btn--dropdown {
	padding-right: 16px;
}
.btn--dropdown:after {
	content: '\25BE';
	display: block;
	position: absolute;
	right: 4px;
	top: 50%;
	line-height: 0em;
	color: #000;
}

.btn--flat[disabled],
.btn--dropdown[disabled] {
	border: 1px solid #ccc;
	outline: 0;
	cursor: default;
	color: #aaa;
	background: #ececec;
	box-shadow: none;
}

.btn--flat[disabled] {
	border: 0;
	background: 0 0;
	box-shadow: none;
}

.btn--flat > .icon,
.btn--dropdown > .icon {
	margin-top: -2px;
}

.btn--primary + .btn--dropdown,
.btn + .btn--dropdown {
	margin-left: 1px;
}



/* -------------------- smsFilter -------------------- */
.filter-item {
	width: 106px;
	font-weight: 500;
	flex-shrink: 0;
}

.filter-ctrl {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.moreOption .smsFilter .filter-item {
	width: 100px;
}

/* 패턴 필터(패턴선택+개수) */
.ptrnSet {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 4px;
  background-color: #dae7f6;
  border-radius: 4px;
  margin-bottom: 3px;
}

.ptrnSet--header {
  background-color: transparent;
}

.ptrnSet--header .ptrnSet__name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ptrnSet--group {
  padding: 0 4px;
}

.ptrnSet--group > ul {
  width: 95%;
}

.ptrnSet--group .ptrnSet {
  padding: 2px 0;
  border-radius: 0;
}

.ptrnSet--group .ptrnSet:not(:first-child) .ptrnSet__name::before {
  background-image: url("../images/icon.png");
  background-position: -608px -80px;
  background-repeat: no-repeat;
}

.ptrnSet--group .ptrnSet__name::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: text-bottom;
}

.ptrnSet--header .ptrnSet__name, .ptrnSet__name {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ptrnSet__input {
  margin: 0 4px;
  width: 60px !important;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: right;
}

.ptrnSet__action {
  width: 16px;
}



/* -------------------- smsDropdown -------------------- */
.smsDropdown {
  position: relative;
}

.smsDropdown__body {
  /* display: none; */
  position: absolute;
  z-index: 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 180px;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 4px;
  -webkit-box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
          box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
}

.smsDropdown__body--right {
  right: 0;
}

.smsDropdown__body--pad {
  padding: 8px;
  margin: 1px 0 0;
}

.smsDropdown:not(.nohover):hover .smsDropdown__body {
  display: block;
}



/* -------------------- smsLabelForm -------------------- */
/* 새로운 검색 필터의 폼 항목 */
.smsLabelForm {
  margin-top: 4px;
  position: relative;
  display: inline-flex;
  height: 32px;
  align-items: stretch;
  justify-content: stretch;
  border-radius: 2px;
  border: 1px solid #cccccc;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  background-color: #ffffff;
}
.smsLabelForm:hover,
.smsLabelForm:active {
  box-shadow: none;
  background-color: #ffffff;
}
.smsLabelForm__label {
  padding: 4px 10px;
  border-right: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  background: #eef1f5;
  display: flex;
  align-items: center;
  font-weight: 500;
}
.smsLabelForm__value {
  padding: 3px 20px 3px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #ffffff;
  display: inline-block;
  width: 80px;
  text-align: left;
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #333a4c;
}

/* 포커스 되었을 때 효과 */
.smsLabelForm:focus-within {
  outline: 2px solid #009FF4;
  outline-offset: -2px;
}
.smsLabelForm:focus-within .smsLabelForm__label {
	border-right: 2px solid #009FF4 !important;
}
.smsLabelForm__value:focus-within {
	border-left: 2px solid #009FF4;
}
.smsLabelForm__input.text > label > input:focus-within {
	outline: none !important;
}



/* -------------------- smsList -------------------- */
.smsList {
	
}
.smsList.hoverable .smsList__item:hover {
	background: #DDEDFD;
	cursor: pointer;
}
.smsList.hoverable-gy .smsList__item:hover {
	background: #525252;
	cursor: pointer;
}
.smsList__header {
	padding: 4px;
}
.smsList__header.between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.smsList__header.xs {
	padding: 0;
}
.smsList__header.md {
	padding: 10px;
}
.smsList__header.top {
	vertical-align: top;
}
.smsList__body {
	overflow-y: auto;
}
.smsList__body.scroll {
	position: absolute;
	padding: 20px;
	box-sizing: border-box;
}
.smsList__body.grayBg {
	background: #eef1f5;
	padding: 8px;
	margin-left: 0;
	border-radius: 2px;
}
.smsList__item {
	display: flex;
	align-items: center;
	padding: 4px 8px;
}
.smsList__item.xs {
	padding: 0;
}
.smsList__item.md {
	padding: 2px 1px;
}
.smsList__item.pad_02 {
	padding: 2px 4px;
}
.smsList__item.pad_04 {
	padding: 4px 0;
}
.smsList__item.pad_06 {
	padding: 6px;
}
.smsList__item.pad_08 {
	padding: 8px 6px;
}
.smsList__item.pad_12 {
	padding: 12px 6px;
}
.smsList__item.between {
	justify-content: space-between;
}
.smsList__item.center {
	justify-content: center;
}
.smsList__item.end {
	justify-content: end;
}
.smsList__item.select {
	justify-content: space-between;
	padding: 4px;
	margin: 4px 0;
	border-radius: 8px;
}
.smsList__item.select.xs {
	margin: 0;
	padding: 4px 4px 4px 8px;
}
.smsList__footer {
	padding: 4px;
}
.smsList__footer.md {
	padding: 8px;
}



/* -------------------- HYBOOST PACKET CAPTURE -------------------- */

.splitCheck {
	height: 26px;
}
.splitOption label {
	margin-right: 70px;
}
.splitOption label:last-child {
	margin-right: 0;
}
.splitOption input[type="text"] {
	width: 80px;
	margin: 0 0 0 10px;
}
.formValidate {
	display: inline-block;
	margin-left: 20px;
	color: #999999;
}
.formValidate.error {
	color: #ff0000;
}



/* -------------------- CONTENTS -------------------- */

.contents .titleArea {
	position: absolute;
	left: -1px;
	right: -1px;
	top: -1px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background: url('../images/pageTitle_BG.jpg');
}
.contents .titleArea > div {
	height: 90px;
	padding: 30px 30px 0;
	background: url('../images/pageTitle_BG2.png') no-repeat left top;
}
.contents .titleArea .depth1 {
	font-family: 'Open Sans';
	font-size: 28px;
	font-weight: 600;
	color: #fff;
}
.contents .titleArea .depth2 {
	font-size: 17px;
	font-weight: bold;
	color: #fff;
}
.contents .titleArea .depth3 {
	position: absolute;
	left: 30px;
	bottom: 0;
	zoom: 1;
}
.contents .titleArea .depth3:after {
	content: ' ';
	display: block;
	clear: both;
}
.contents .titleArea .depth3 li {
	float: left;
}
.contents .titleArea .depth3 li a {
	display: inline-block;
	margin-right: 1px;
	padding: 5px 20px;
	border-top: 1px solid #8b8b8b;
	border-left: 1px solid #8b8b8b;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	background: url('../images/depth3_BG.png');
	box-shadow: 1px -1px 0 #1d1d1d;
}
.contents .titleArea .depth3 li:hover a {
	border-top: 1px solid #a6a6a6;
	border-left: 1px solid #a6a6a6;
	background: #929292;
}
.contents .titleArea .depth3 li.active a {
	border-top: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
	background: #fcfcfc;
}
.contents .titleArea .depth3 a {
	font-size: 13px;
	font-weight: bold;
	color: #fff;
}
.contents .titleArea .depth3 li.active a {
	color: #464b53;
}
.contents > div[id*="tab-"].noSelect {
	visibility: hidden;
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 980px;
}
.contents > div[id*="tab-"].selected {
	visibility: visible;
	position: relative;
	left: 0;
	top: 0;
}
.editBox {
	padding: 15px;
	border: 1px solid #cbccd1;
	background: #ffffff;
}
.editBox__header {
	margin: -15px;
	padding: 6px 10px;
	border-bottom: 1px solid #cbccd1;
	background: #ffffff;
}
.editBox__header + smsPanel + * {
	margin-top: 30px;
}
.searchBox {
	padding: 5px 20px 5px 20px;
	border: 1px solid #cbccd1;
	background: #ffffff;
}
.unorderedList {
	margin: 5px 0 15px 18px;
	list-style-type: disc
}
.unorderedList li {
	line-height: 1.4em
}
h3 {
	padding: 30px 0 5px;
	font-size: 16px;
	font-weight: bold;
	color: #09192a;
	line-height: 33px;
}
.contents h4 {
	padding-bottom: 10px;
	font-size: 14px;
	font-weight: bold;
	color: #09192a;
}
.popView-contents h4 {
	padding: 10px 0 2px;
	font-size: 14px;
	font-weight: bold;
	color: #09192a;
}
.popView-contents h4:first-child {
	padding: 0 0 2px;
}
div[id*="tab-"] > h3:first-child {
	padding: 0 0 5px;
}
div[id*="tab-"] > .clearfix:first-child {
	margin: -30px 0 0;
}
.contents .tab-description,
.contents .description {
	margin: 5px 0 10px;
}
hr.dashed {
	margin: 10px 0;
	border: none;
	border-top: 1px dashed #cbccd1;
}
.breadcrumb {
	padding: 0 10px;
}
.breadcrumb_bottom {
	padding: 0 10px 10px;
}
.breadcrumb ol {
	overflow: hidden;
	zoom: 1;
	margin: 10px 0;
	border-radius: 5px;
	background: #7e8c9b;
}
.breadcrumb ol:after {
	content: '.';
	display: block;
	clear: both;
	width: 0;
	height: 0;
	visibility: hidden;
}
.breadcrumb li {
	float: left;
	position: relative;
	padding: 6px 10px 6px 50px;
	background: #7e8c9b;
	*border-right: 1px solid #fff;
	font-weight: bold;
	color: #fff;
}
.breadcrumb li:before {
	content: ' ';
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 0px;
	height: 0px;
	margin: -30px 0 0 0;
	border-width: 30px;
	border-style: solid;
	border-color: transparent transparent transparent white;
}
.breadcrumb li:after {
	content: ' ';
	position: absolute;
	right: -56px;
	top: 50%;
	display: block;
	z-index: 10;
	width: 0px;
	height: 0px;
	margin-top: -30px;
	border-width: 30px;
	border-style: solid;
	border-color: transparent transparent transparent #7e8c9b;
}
.breadcrumb li.active,
.breadcrumb li.active span {
	background: #314458;
	color: #66ccff;
}
.breadcrumb li.active:after {
	border-color: transparent transparent transparent #314458;
}
.breadcrumb li:first-child {
	padding-left: 30px;
}
.breadcrumb li:last-child {
	padding-right: 20px;
}
.breadcrumb li:first-child:before,
.breadcrumb li:last-child:after {
	display: none;
}
.breadcrumb li span {
	display: block;
	padding-right: 5px;
	font-family: tahoma;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	color: #ddd;
}
.no-lastchild .breadcrumb li {
	padding: 6px 40px;
}
.no-lastchild .breadcrumb li:before,
.no-lastchild .breadcrumb li:after {
	display: none;
}
.selectDept {
	position: relative;
	padding-left: 80px;
}
.selectDept button.small {
	position: absolute;
	left: 0;
}
.fr.text-r button {
	margin: 35px 0 0;
}
.listBox li {
	line-height: 33px;
}
.joinCondition .col-6 {
	position: relative;
	padding-left: 43px;
}
.joinCondition label {
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	text-align: right;
}
.setting {
	width: 800px;
}
#divInlGeneral .col-5 {
	position: relative;
	padding-left: 60px;
}
#divInlGeneral .col-5 span {
	position: absolute;
	left: 0;
	top: 0;
}
.agentSelectTab {
	margin-left: 1px;
}
.agentSelectTab ul {
	border-bottom: 1px solid #888888;
}
.agentSelectTab ul:after {
	content: '';
	display: block;
	clear: both
}
.agentSelectTab li {
	float: left;
	margin: 0 0 -1px -1px;
	padding: 10px 20px;
	border: 1px solid #888888;
	background: #b4b4b4;
	color: #fff;
	letter-spacing: -1px
}
.agentSelectTab li:hover,
.agentSelectTab li:active,
.agentSelectTab li.active {
	border-bottom: 1px solid #fcfcfc;
	background: #fcfcfc;
	color: #333;
	font-weight: bold
}
div[id*="tab2-agent-"] {
	display: none
}
div[id*="tab2-agent-"] h3 {
	padding-top: 10px
}
.title1 {
	font-weight: bold;
	margin: 20px 0 5px
}
.title1:first-child {
	font-weight: bold;
	margin: 0 0 5px
}
.blockPortSetting li span {
	display: inline-block;
	width: 250px;
	vertical-align: middle;
}
.blockPortSetting li input[type="text"] {
	width: 510px;
}

.imDeptCode {
	width: 23%;
	display: inline-block;
}

#pgBackrestExecuteBox {
	margin-bottom: 15px;
}

#divPgbackrestInfo .row {
	margin-bottom: 10px;
}

#divPgbackrestList {
	margin-top:15px;
}

#divPgbackrestExecuteMsg {
	width: 80%;
}

.messagebox {
	margin-top:15px;
}

/* -------------------- Maintenance -------------------- */

.print_wrap {
	margin-top: 20px;
	padding: 40px;
	border: 1px solid #333;
	box-shadow: 3px 3px 0 0 #ccc;
	background: #fff;
	font-size: 12px;
	color: #000000;
}
.print_header {
	position: relative;
	padding: 0 0 10px;
	border-bottom: 4px solid #333;
}
.print_title {
	font-size: 30px;
	font-weight: bold;
	letter-spacing: -2px;
}
.print_date {
	position: absolute;
	right: 0;
	bottom: 10px;
	font-size: 12px;
}
.print_container h4 {
	padding: 30px 0 5px;
	font-size: 14px;
}
.print_container h4:before {
	content: ' ';
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 5px;
	background: #333;
}
.print_container textarea {
	border: 1px solid #333333;
	resize: vertical;
	line-height: 1.5em;
}
.print_footer {
	margin: 30px 0 0;
	padding-top: 20px;
	border-top: 1px solid #cccccc;
}
.print_footer address {
	margin-top: 5px;
	color: #999999;
	font-style: normal;
	font-size: 11px;
}
.table_print {
	width: 100%;
	border-top: 2px solid #333333;
}
.table_print th,
.table_print td {
	padding: 8px;
	border: 1px solid #333333;
}
.table_print th {
	font-weight: bold;
	background: #f1f1f1;
	text-align: left;
}
.table_print.product {
	border-top: none;
	margin: 0 0 10px;
}
.table_print.product caption {
	padding: 8px 20px;
	border: 1px solid #333333;
	border-top: 2px solid #333333;
	border-bottom: none;
	text-align: left;
	font-weight: bold;
	background: #ccc;
}
.table_print input[type="text"] {
	width: 100%;
	height: 19px;
	padding: 1px 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #a0983b;
	border-radius: 0;
	font-family: 'MalgunGothic';
	font-size: 12px;
	vertical-align: middle;
	line-height: 1em;
}
.table_print label {
	margin-right: 20px;
}
.table_print input[type="radio"] {
	margin-right: 5px;
}
.table_print .sign {
	position: relative;
	text-align: left;
}
.table_print pre {
	font-family: 'malgungothic', 'dotum', 'Open Sans', sans-serif;
	font-size: 12px;
	color: #333a4c;
}
.table_print .SEeditArea {
	background: #fffdeb;
}
.editMode {
	display: block;
}
.viewMode {
	display: none;
}
.ESStatus {
	display: inline-block;
	padding: 1px 4px;
	font-weight: bold;
	color: #ffffff;
	border-radius: 3px;
	background: #000000
}
.ESStatus.green {
	background: #468847;
}
.ESStatus.yellow {
	background: #cccc00;
}
.ESStatus.red {
	background: #ff0000;
}
.MAstatus0 {
	color: #000000;
	font-weight: normal;
}
.MAstatus1 {
	color: #ff0000;
	font-weight: bold;
}
.MATool_report_input table label {
	margin: 0 20px 0 0;
	line-height: 33px;
	vertical-align: baseline;
}
.MATool_report_input table input[type="checkbox"] {
	margin-right: 5px;
}
.traffic-chart {
	min-height: 200px;
	margin-bottom: 10px;
	border: 1px solid #cbccd1;
}
.alertSetting tr:last-child th,
.alertSetting tr:last-child td {
	padding-bottom: 8px !important;
}
.alertSetting li {
	padding: 8px 0 0;
}
.alertSetting label {
	display: inline-block;
}
.alertSetting label input[type="text"] {
	width: 60px;
	margin: 0 8px 0 10px;
	text-align: right;
}
.alertSetting label input[type="checkbox"] {
	margin-right: 5px;
}
.alertSummary {
	padding-bottom: 5px;
}
.alertSummary dt {
	font-weight: bold;
	padding: 5px 0 0 0;
}
.alertSummary dd {
	padding: 0 0 0 10px;
}
.MATool-filter {
	font-size: 12px;
	font-weight: normal;
}
.MATool-filter label {
	margin: 0 20px 0 0;
}



/* -------------------- HYBOOST MANAGER MONITOR -------------------- */

.widget {
	padding: 10px;
	border: 1px solid #19293e;
	border-radius: 7px;
	background: #3c4653;
	line-height: 1em;
	color: #fff;
	text-shadow: -1px -1px #1a1f24;
}
.widget-title {
	color: #c5c8cc;
	text-shadow: -1px -1px 0 #252b33;
	font-weight: bold;
	text-align: center;
}
.widget > div {
	margin-top: 10px;
	height: 97px;
}
.widget .packetCaptureType {
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	line-height: 80px;
}
.widget .channelCompositionMode {
	margin: 0 10%;
}
.widget .channelCompositionMode:after {
	content: '';
	display: block;
	clear: both;
}
.widget .channelCompositionMode li {
	text-align: center
}
.widget .Wengine i,
.widget .Mengine i {
	display: inline-block;
	width: 61px;
	height: 40px;
	margin: 10px 0 8px;
	background: url('../images/img_engine.png') no-repeat;
}
.widget .Wengine i.on {
	background-position: 0 0
}
.widget .Wengine i.off {
	background-position: 0 -41px
}
.widget .Mengine i.on {
	background-position: -62px 0
}
.widget .Mengine i.off {
	background-position: -62px -41px
}
.widget .Wengine p,
.widget .Mengine p {
	font-size: 11px;
	letter-spacing: -1px;
}
.widget > div table {
	width: 100%;
	font-size: 10px;
	word-spacing: -1px;
}
.widget > div table th {
	padding: 5px;
	border: 1px solid #1c2024;
	background: #23282f;
	text-align: left;
	font-weight: normal;
}
.widget > div table td {
	padding: 5px;
	border: 1px solid #1c2024;
	background: #2a313a;
}
.widget > div table .on,
.widget > div table .off {
	display: inline-block;
	width: 11px;
	height: 11px;
	margin: 0 5px 0 0;
	background: url('../images/icon.png') no-repeat;
	vertical-align: -4px;
}
.widget > div table .on {
	background-position: -112px -32px;
}
.widget > div table .off {
	background-position: -128px -32px;
}
.traffic-widget-wrap:after {
	content: '';
	display: block;
	clear: both;
}
.traffic-combine {
	position: relative;
	float: left;
	margin-bottom: 22px;
	width: 15.19652118912081%\9;
	min-width: 223px\9;
	margin-right: 1.39152435167615%\9;
}
.traffic-combine.last-child,
.traffic-combine:last-child {
	margin-right: 0;
}
.traffic-combine.last-child:after {
	content: none;
	display: none;
}
.capture .traffic-combine {
	margin-right: 22px;
}
.capture .traffic-combine:after {
	right: -7.5%;
}
.capture .traffic-combine.last-child,
.capture .traffic-combine:last-child {
	margin-right: 0;
}
.capture .updownSwitch {
	display: none;
}
@media (max-width:1280px) {
	.traffic-combine {
		width: 223px;
		margin-right: 22px;
	}
	.traffic-combine:nth-child(4) {
		margin-right: 0;
	}
	.traffic-combine:nth-child(4):after {
		content: none;
		display: none;
	}
}
@media (min-width:1281px) {
	.traffic-combine {
		width: 15.49652118912081%;
		min-width: 223px;
		margin-right: 1.39152435167615%;
	}
	.traffic-combine:last-child:after {
		content: none;
		display: none;
	}
}
.traffic-combine:after {
	content: url('../images/icon_widgetArrow.png');
	display: block;
	position: absolute;
	right: -6%;
	top: 50%;
	margin-top: -6px;
}
.traffic-combine.row1 .traffic-widget {
	height: 432px;
}
.traffic-combine.row2 .traffic-widget {
	height: 204px;
}
.traffic-combine.row2.device1000 .traffic-widget {
	height: initial;
}
.traffic-widget {
	position: relative;
	margin: 0 0 2px;
	padding: 10px;
	border: 1px solid #bebebe;
	border-radius: 5px;
	background: #fff;
	box-shadow: 1px 1px 0 #dddddd;
	line-height: 1em;
}
.traffic-widget-title {
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -1px;
}
.traffic-widget-title span {
	padding-left: 5px;
	font-size: 10px;
	font-weight: normal;
}
.traffic-widget > div .portState {
	display: none;
}
.traffic-widget.down > div {
	box-shadow: 0px 0px 0px 1px #d5d5d5 inset;
	background: #e6e6e6 url('../images/img_portState_down.png') 50% 30% no-repeat;
}
.traffic-widget.inactive > div {
	box-shadow: 0px 0px 0px 1px #d5d5d5 inset;
	background: #e6e6e6 url('../images/img_portState_inactive.png') 50% 30% no-repeat;
}
.traffic-widget.down > div .traffic-widget-chart,
.traffic-widget.down > div .traffic-widget-value,
.traffic-widget.inactive > div .traffic-widget-chart,
.traffic-widget.inactive > div .traffic-widget-value {
	visibility: hidden;
}
.traffic-widget.down > div .portState,
.traffic-widget.inactive > div .portState {
	display: block;
	position: absolute;
	left: 0;
	top: 55%;
	width: 100%;
	text-align: center;
	text-shadow: 1px 1px 0 #fff;
	font-weight: bold;
	letter-spacing: -1px;
	font-size: 11px;
	color: #999
}
.traffic-widget-chart {
	width: 100%;
	height: 80px;
	background: #eeeeee;
}
.traffic-widget-value {
	margin: 10px 0 0;
	width: 100%;
}
.traffic-widget-value li {
	position: relative;
	padding: 4px 0 6px;
	border-bottom: 1px dotted #b5b5b5;
	font-size: 11px;
	color: #999;
	text-align: right;
}
.traffic-widget-value li:after {
	content: '';
	display: block;
	clear: both;
}
.traffic-widget-value li.last-child,
.traffic-widget-value li:last-child {
	border-bottom: none;
}
.traffic-widget-value li span {
	display: inline-block;
	vertical-align: middle;
}
.traffic-widget-value li .item {
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -6px;
}
.traffic-widget-value li .count {
	text-align: right;
	font-size: 14px;
	font-weight: bold;
}
.traffic-widget-value li .unit {
	width: 30px;
	padding-left: 8px;
	font-size: 10px;
	text-align: left;
}
.traffic-widget-value .big .count {
	font-size: 18px;
	color: #333;
	letter-spacing: -1px;
}
.iFOD .traffic-widget-value {
	margin: 0;
}
.iFOD .traffic-widget-chart {
	height: 137px;
}
.HBCapture-progress {
	margin-top: 20px;
	padding: 20px;
	border: 1px solid #bebebe;
	border-radius: 3px;
	background: #eeeeee;
	box-shadow: 1px 1px #ffffff inset;
}
.HBCapture-progress:after {
	content: ' ';
	display: block;
	clear: both;
}
.HBCapture-progress .fl {
	width: 220px;
	margin-right: 10px;
}
.HBCapture-progress .fr {
	vertical-align: top;
	line-height: 27px;
}
.progressBar {
	position: relative;
	width: 100%;
	height: 27px;
	background: #838791;
	font-size: 0;
	box-shadow: 2px 2px 2px 0 rgba(50, 50, 50, 0.3) inset, 1px 1px 0 #fff;
}
.progressBar .progress-percent {
	display: inline-block;
	height: 27px;
	background-color: #405faa;
	font-size: 0;
	box-shadow: 2px 2px 2px 0 rgba(50, 50, 50, 0.3) inset, -1px -1px 0 rgba(50, 50, 50, 0.3) inset;
}
.progressBar .progress-txt {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	margin-top: -6px;
	font-size: 12px;
	line-height: 12px;
	text-align: center;
	color: #fff;
	text-shadow: -1px -1px rgba(0, 0, 0, 0.5);
	word-spacing: -1px;
}



/* -------------------- 문구 -------------------- */

.validation {
	display: block;
	padding: 3px 0 0;
	color: #999999;
	line-height: 1.3em;
}
.validation.error {
	color: #ff0000;
}



/* -------------------- TABLE STYLE 기본 -------------------- */

.tableType1 {
	width: 100%;
	table-layout: auto;
	background: #ffffff;
}
.tableCaption {
	margin-top: -5px;
	padding-bottom: 3px;
	font-weight: bold;
	text-align: right;
	color: #999;
}
.tableType1 caption {
	margin-bottom: 5px;
	text-align: left;
}
.tableType1 th {
	padding: 7px;
	border: 1px solid #7b828d;
	background-color: #8e9095;
	box-shadow: 1px 1px 0 0 #9d9ea1 inset;
	color: #fff;
	line-height: initial;
	text-align: left;
}
.tableType1 .ui-state-default {
	background: #8e9095;
}
.tableType1 td {
	padding: 7px;
	border: 1px solid #cbccd1;
	line-height: initial;
	word-break: break-all;
}
.tableType1 .listCheck {
	width: 20px;
	text-align: center;
}
.tableType1.narrow th,
.tableType1.narrow td {
	padding: 10px 3px;
}
.tableType1.narrow th,
.tableType1.narrow td {
	padding: 4px
}
.tableType1.narrow th input[type="text"],
.tableType1.narrow td input[type="text"] {
	padding: 2px;
	height: initial
}
.tableType1 tr.row_selected,
.tableType1 tr:hover td:not([rowspan]) {
	cursor: pointer;
	background: #eff0f2;
}
.tableType1.noHover tr.row_selected,
.tableType1.noHover tr:hover td:not([rowspan]){
	cursor: default;
}
.tableType1 tr:hover td.dataTables_empty {
	cursor: auto;
	background: none;
}
.tableType1.notHover tr.row_selected,
.tableType1.notHover tr:hover td:not([rowspan]) {
	cursor: default;
	background: none;
}
.tableType1.notHover tr:hover td.dataTables_empty {
	cursor: auto;
	background: none;
}
.dataTables_wrapper .top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}
.dataTables_wrapper .top .dataTable-toolbar-right {
	white-space: nowrap;
}
.dataTables_wrapper .top .dataTable-toolbar-right input {
	width: auto
}


/* -------------------- TABLE STYLE 레이아웃용 -------------------- */

.table_layout {
	width: 100%;
	border-collapse: collapse;
}
.table_layout th {
	text-align: left;
	vertical-align: top;
	padding-top: 8px;
}
.table_layout tr th,
.table_layout tr td {
	padding-bottom: 8px;
}
.table_layout tr:last-child th,
.table_layout tr:last-child td {
	padding-bottom: 0;
}



/* -------------------- tableType1 속 테이블 -------------------- */

.tableType2 {
	width: 100%;
}
.tableType2 th,
.tableType2 td {
	padding: 5px;
	border: 1px solid #a9acb1;
	border-left: none;
	border-right: none;
}
.tableType2 th {
	background: initial;
	box-shadow: none;
	color: #333a4c;
}
.tableType2.narrow th,
.tableType2.narrow td {
	padding: 2px;
}
.tableType3 {
	width: 100%;
	border-top: 1px solid #cbccd1;
}
.tableType3 th {
	vertical-align: text-top;
	padding-top: 10px;
}
.tableType3 th,
.tableType3 td {
	border-bottom: 1px solid #cbccd1;
}



/* -------------------- DATATABLE STYLE -------------------- */

.sorting {
	padding-right: 27px !important;
	background: url('../images/dataTable_sortAble.png') no-repeat right center
}
.sorting_asc {
	padding-right: 27px !important;
	background: url('../images/dataTable_sortAsc.png') no-repeat right center
}
.sorting_desc {
	padding-right: 27px !important;
	background: url('../images/dataTable_sortDesc.png') no-repeat right center
}
.DataTables_sort_wrapper {
	position: relative;
}
.DataTables_sort_icon {
	position: absolute;
	right: 0;
	top: 0;
}
.dataTables_empty {
	text-align: center
}
.dataTables_paginate {
	margin-top: 20px;
	font-size: 11px;
	text-align: center;
}
.dataTables_paginate a {
	margin: 0 3px;
	padding: 2px 8px;
	border: 1px solid #f5f5f5;
	border-radius: 2px;
	background: #fafafa;
	text-decoration: none;
	color: #929292;
}
.dataTables_paginate a:hover {
	border: 1px solid #d9d9d9;
	background: #e9e9e9;
	box-shadow: -1px -1px 0 #f5f5f5 inset;
	color: #666;
	cursor: pointer;
}
.dataTables_paginate a.paginate_active {
	border: 1px solid #7e92a4;
	background: #889daf;
	box-shadow: -1px -1px 1px 0 #778c9e inset;
	color: #fff;
}
.dataTables_paginate span a.ui-state-disabled {
	border: 1px solid #3382c1;
	background: #68a2d1;
	box-shadow: 1px 1px 0 #7fb0d8 inset;
	color: #fff;
}
.dataTable input[type="text"],
.dataTable input[type="password"] {
	height: inherit;
	padding: 3px 5px
}
.dataTable>tbody>tr.disabledRow>td {
	font-style: italic;
	opacity: 0.72;
	-webkit-filter: grayscale(1);
            filter: grayscale(1);
}
.dataTable>tbody>tr.canceledRow>td {
	text-decoration: line-through;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	border: 1px solid #7e92a4;
	background: #889daf;
	box-shadow: -1px -1px 1px 0 #778c9e inset;
	color: #fff;
}

/* -------------------- FORM & BUTTON -------------------- */

input[type="text"],
input[type="password"],
textarea {
	width: 100%;
	padding: 4px 5px 6px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #c9cacc;
	border-radius: 2px;
	font-family: 'MalgunGothic';
	font-size: 12px;
	vertical-align: middle;
}
.textarea_2 {
	-moz-appearance: textfield-multiline;
	-webkit-appearance: textarea;
	border: 1px solid gray;
	font: medium -moz-fixed;
	font: -webkit-small-control;
	height: 500px;
	overflow: auto;
	padding: 2px;
	resize: both;
}
.no-boxsizing input[type="text"],
.no-boxsizing input[type="password"],
.no-boxsizing textarea {
	height: 31px;
	margin-left: -2.074468085106383%;
	padding: 0;
	line-height: 31px;
}
input[type="text"]::-ms-clear { /* IE10 ~ input X버튼 제거 */
	display: none;
}
textarea {
	height: auto;
	line-height: 25px;
}
.no-boxsizing textarea {
	height: auto;
}
select {
	width: 100%;
	padding: 3px 5px 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #c9cacc;
	border-radius: 2px;
	font-family: 'MalgunGothic';
	font-size: 12px;
	line-height: 27px;
	vertical-align: middle;
}
.no-boxsizing select {
	*zoom: 1.2;
	margin-top: 5px;
	padding: 0;
	line-height: 31px;
}
input[type="radio"],
input[type="checkbox"] {
	position: relative;
	top: 3px;
}
input[type="text"].date {
	width: 120px;
}
input[type="text"].date {
	background: url('../images/icon.png') no-repeat -140px -169px;
}
.no-boxsizing input[type="radio"],
.no-boxsizing input[type="checkbox"] {
	position: static;
	top: initial;
}
input[type="text"].small,
select.small {
	height: 27px;
	padding: 3px 10px 5px;
}
.no-boxsizing input[type="text"].small,
.no-boxsizing select.small {
	position: relative;
	height: 25px;
	padding: 0;
	line-height: 25px;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
	padding: 5px 25px 5px 5px;
}
.btnArea {
	position: relative;
	padding: 15px 0 0;
	text-align: center;
}
.btnAreaRight {
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: 6px;
}
.btnAreaRight a {
	display: inline-block;
	margin-left: 15px;
	font-weight: bold;
}
button.useSwitch {
	width: 69px;
	height: 32px;
	margin: -5px 0 0 10px;
	border: none;
	outline: none;
	background-color: transparent;
	background-position: left top;
	background-repeat: no-repeat;
	background-image: url('../images/btn_switchOff.png');
	box-shadow: none;
	filter: none;
	text-indent: -9999px;
	cursor: pointer;
}
button.useSwitch:hover,
button.useSwitch:active {
	background-color: transparent;
	background-position: left top;
	background-repeat: no-repeat;
	background-image: url('../images/btn_switchOff.png');
	box-shadow: none;
	filter: none;
	text-shadow: none;
}
button.useSwitch.on {
	background-image: url('../images/btn_switchOn.png');
}
button.updownSwitch {
	position: absolute;
	right: 5px;
	top: 9px;
	width: 58px;
	height: 18px;
	border: none;
	outline: none;
	background-color: transparent;
	background-position: left top;
	background-repeat: no-repeat;
	background-image: url('../images/btn_switchUp.png');
	box-shadow: none;
	filter: none;
	text-indent: -9999px;
	cursor: pointer;
}
button.updownSwitch:hover,
button.updownSwitch:active {
	background-color: transparent;
	background-position: left top;
	background-repeat: no-repeat;
	background-image: url('../images/btn_switchUp.png');
	box-shadow: none;
	filter: none;
	text-shadow: none;
}
.traffic-widget.down button.updownSwitch {
	background-image: url('../images/btn_switchDown.png');
}
button {
	display: inline-block;
	position: relative;
	*top: -1px;
	height: 28px;
	margin: 0 4px 0 0;
	padding: 5px 15px 7px;
	*padding: 3px 6px 9px;
	border: 1px solid #868686;
	border-radius: 3px;
	outline: none;
	background: #999999;
	background: -moz-linear-gradient(top, #999999 0%, #868686 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #999999), color-stop(100%, #868686));
	background: -webkit-linear-gradient(top, #999999 0%, #868686 100%);
	background: -o-linear-gradient(top, #999999 0%, #868686 100%);
	background: -ms-linear-gradient(top, #999999 0%, #868686 100%);
	background: linear-gradient(to bottom, #999999 0%, #868686 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#868686', GradientType=0);
	box-shadow: 1px 1px 0 0 rgba(255,255,255,0.1) inset;
	font-family: 'malgungothic';
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	line-height: 14px;
	vertical-align: middle;
	cursor: pointer;
}
.fr button {
	margin: 0 0 0 4px;
}
.no-boxsizing button {
	display: inline;
}
button:hover {
	background: #868686;
	background: -moz-linear-gradient(top, #868686 0%, #999999 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #868686), color-stop(100%, #999999));
	background: -webkit-linear-gradient(top, #868686 0%, #999999 100%);
	background: -o-linear-gradient(top, #868686 0%, #999999 100%);
	background: -ms-linear-gradient(top, #868686 0%, #999999 100%);
	background: linear-gradient(to bottom, #868686 0%, #999999 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#868686', endColorstr='#999999', GradientType=0);
}
button:active {
	box-shadow: 0 2px 2px 1px rgba(0,0,0,0.1) inset;
}
button[disabled="disabled"] {
	opacity: 0.3;
	cursor: default;
}
button.blue {
	border: 1px solid #1f6ebd;
	background: #2a95df;
	background: -moz-linear-gradient(top, #2a95df 0%, #237ed7 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2a95df), color-stop(100%, #237ed7));
	background: -webkit-linear-gradient(top, #2a95df 0%, #237ed7 100%);
	background: -o-linear-gradient(top, #2a95df 0%, #237ed7 100%);
	background: -ms-linear-gradient(top, #2a95df 0%, #237ed7 100%);
	background: linear-gradient(to bottom, #2a95df 0%, #237ed7 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2a95df', endColorstr='#237ed7', GradientType=0);
}
button.blue:hover {
	background: #237ed7;
	background: -moz-linear-gradient(top, #237ed7 0%, #2a95df 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #237ed7), color-stop(100%, #2a95df));
	background: -webkit-linear-gradient(top, #237ed7 0%, #2a95df 100%);
	background: -o-linear-gradient(top, #237ed7 0%, #2a95df 100%);
	background: -ms-linear-gradient(top, #237ed7 0%, #2a95df 100%);
	background: linear-gradient(to bottom, #237ed7 0%, #2a95df 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#237ed7', endColorstr='#2a95df', GradientType=0);
	text-shadow: -1px -1px #1c639a;
}
button.green {
	border: 1px solid #508e00;
	background: #75ab2f;
	background: -moz-linear-gradient(top, #75ab2f 1%, #609e0f 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #75ab2f), color-stop(100%, #609e0f));
	background: -webkit-linear-gradient(top, #75ab2f 1%, #609e0f 100%);
	background: -o-linear-gradient(top, #75ab2f 1%, #609e0f 100%);
	background: -ms-linear-gradient(top, #75ab2f 1%, #609e0f 100%);
	background: linear-gradient(to bottom, #75ab2f 1%, #609e0f 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#75ab2f', endColorstr='#609e0f', GradientType=0);
}
button.green:hover {
	background: #75ab2f;
	background: -moz-linear-gradient(top, #609e0f 1%, #75ab2f 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #609e0f), color-stop(100%, #75ab2f));
	background: -webkit-linear-gradient(top, #609e0f 1%, #75ab2f 100%);
	background: -o-linear-gradient(top, #609e0f 1%, #75ab2f 100%);
	background: -ms-linear-gradient(top, #609e0f 1%, #75ab2f 100%);
	background: linear-gradient(to bottom, #609e0f 1%, #75ab2f 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#609e0f', endColorstr='#75ab2f', GradientType=0);
}
button.red {
	border: 1px solid #e10a00;
	background: #ff3b31;
	background: -moz-linear-gradient(top, #ff443a 0%, #ff1a0f 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff443a), color-stop(100%, #ff1a0f));
	background: -webkit-linear-gradient(top, #ff443a 0%, #ff1a0f 100%);
	background: -o-linear-gradient(top, #ff443a 0%, #ff1a0f 100%);
	background: -ms-linear-gradient(top, #ff443a 0%, #ff1a0f 100%);
	background: linear-gradient(to bottom, #ff443a 0%, #ff1a0f 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff443a', endColorstr='#ff1a0f', GradientType=0);
}
button.red:hover {
	background: #ff3b31;
	background: -moz-linear-gradient(top, #ff1a0f 0%, #ff443a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff1a0f), color-stop(100%, #ff443a));
	background: -webkit-linear-gradient(top, #ff1a0f 0%, #ff443a 100%);
	background: -o-linear-gradient(top, #ff1a0f 0%, #ff443a 100%);
	background: -ms-linear-gradient(top, #ff1a0f 0%, #ff443a 100%);
	background: linear-gradient(to bottom, #ff1a0f 0%, #ff443a 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff1a0f', endColorstr='#ff443a', GradientType=0);
}
button.small {
	position: relative;
	height: 24px;
	padding: 0 5px;
	border-bottom-color: #777777;
	font-size: 12px;
	vertical-align: middle;
	font-weight: normal;
}
button.small2 {
	top: 0;
	height: initial;
	padding: 2px 4px;
	border: 1px solid #868686;
	border-radius: 2px;
	background: #989898;
	box-shadow: none;
	font-size: 11px;
	line-height: 1em;
	font-weight: normal;
}
button.small3 {
	height: initial;
	padding: 3px 5px;
	border: 1px solid #668baa;
	border-radius: 2px;
	background: #7a9ebe;
	box-shadow: none;
	line-height: 1em;
	font-size: 11px;
	font-weight: normal;
	text-shadow: none;
}
button.small.blue {
	border-bottom-color: #0c5197;
}
button.small.green {
	border-bottom-color: #508e00;
}
button.small.red {
	border-bottom-color: #ee0b00;
}
button.popsmall {
	position: relative;
	top: 2px;
	height: 23px;
	padding: 5px;
	border-bottom-color: #777777;
	font-size: 10px;
	line-height: 12px;
	vertical-align: top;
}
button.btn-move {
	width: 80px;
	margin: 0 0 5px 0;
	padding: 5px;
	border: 1px solid #dededf;
	background: #fff;
	filter: none;
	box-shadow: none;
	color: #7b7b7b;
	text-shadow: none;
	text-align: center;
	font-weight: normal;
	letter-spacing: -1px;
}
button.btn-move:active {
	box-shadow: none;
}
button.btn-move:first-child {
	margin: 43px 0 5px 0;
}
button.prevBtn {
	padding: 6px 16px 6px 24px
}
button.nextBtn {
	padding: 6px 24px 6px 16px
}
button.prevBtn:before,
button.nextBtn:after {
	content: ' ';
	display: inline-block;
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: url('../images/icon.png') no-repeat;
}
button.prevBtn:before {
	left: 5px;
	background-position: -144px -16px
}
button.nextBtn:after {
	right: 5px;
	background-position: -128px -16px
}
.text-l .btn,
.text-l button {
	margin: 0 10px 0 0;
}
.text-r .btn,
.text-r button {
	margin: 0 0 0 10px;
}
.finalSave {
	padding: 0 10px;
	text-align: right;
}
.finalSave button {
	position: relative;
	width: 220px;
	height: 65px;
	padding: 10px 20px 10px 60px;
	border: 1px solid #1b2027;
	border-right: 2px solid #1b2027;
	border-bottom: 2px solid #1b2027;
	border-radius: 3px;
	box-shadow: 1px 1px 0 #5e6877 inset;
	background: #4b535f;
	background: -moz-linear-gradient(top, #4b535f 0%, #3a414a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4b535f), color-stop(100%, #3a414a));
	background: -webkit-linear-gradient(top, #4b535f 0%, #3a414a 100%);
	background: -o-linear-gradient(top, #4b535f 0%, #3a414a 100%);
	background: -ms-linear-gradient(top, #4b535f 0%, #3a414a 100%);
	background: linear-gradient(to bottom, #4b535f 0%, #3a414a 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4b535f', endColorstr='#3a414a', GradientType=0);
	font-size: 11px;
	font-family: 'dotum';
	text-align: left;
	color: #8c9197;
	cursor: pointer;
}
.finalSave button img {
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -16px;
	box-shadow: 1px 1px 2px #323840;
}
.finalSave button p {
	text-overflow: initial;
	font-weight: normal;
}
.finalSave button span {
	display: block;
	margin-bottom: 3px;
	font-family: 'MalgunGothic';
	color: #fff;
	text-shadow: 1px 1px 1px #21252a;
	font-size: 16px;
	font-weight: bold;
}
input[disabled="disabled"],
textarea[disabled="disabled"],
select[disabled="disabled"] {
	opacity: 0.7;
	background-color: #f4f4f4;
	filter: none;
	text-shadow: none;
}
textarea {
	resize: vertical;
}
.checkboxGroup.horizontal {
	*zoom: 1;
}
.checkboxGroup.horizontal:after {
	content: ' ';
	display: block;
	clear: both;
}
.checkboxGroup.horizontal li {
	float: left;
	margin-right: 20px;
}
.checkboxGroup.horizontal li:last-child {
	margin-right: 0;
}

.radioGroup.horizontal {
	*zoom: 1;
}
.radioGroup.horizontal:after {
	content: ' ';
	display: block;
	clear: both;
}
.radioGroup.horizontal li {
	float: left;
	margin-right: 20px;
}
.radioGroup.horizontal li:last-child {
	margin-right: 0;
}

.mouseMove {
	display: inline-block;
	width: 10px;
	height: 20px;
	background: url('../images/icon_086.png') no-repeat left center;
}
label + label {
	margin-left: 20px;
}

.smsForm__control {

}
.smsForm__input-wrapper {
	position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
	align-items: center;
    width: 100%;
    padding: 0px 8px;
    background-color: #fff;
    border: 1px solid #c9cacc;
    border-radius: 2px;
    box-sizing: border-box;
}
.smsForm__input-wrapper:focus-within,
.smsForm__input-wrapper:focus-within {
	outline: -webkit-focus-ring-color auto 1px; /* webkit 기반 브라우저의 user agent style이며, 어차피 IE에서는 포커스 효과 없음 */
}
.smsForm__input[type="text"],
.smsForm__input[type="password"] {
	width: 100%;
	padding: 0;
    border: none;
    outline: none;
    height: 26px;
}
.smsForm__input--lg[type="text"],
.smsForm__input--lg[type="password"] {
	height: 36px;
}
.smsForm__control-prefix {
	flex: none;
	margin-right: 8px;
}
.smsForm__control-suffix {
	flex: none;
	margin-left: 8px;
}


/* -------------------- ICON -------------------- */

.icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url('../images/icon.png') no-repeat;
	vertical-align: middle;
}
.icon.pwdCheck-ok   {background-position: -16px -16px; margin-top: 6px}
.icon.pwdCheck-fail {background-position: -32px -16px; margin-top: 6px}
.icon.bullet-1      {background-position: -48px -16px; margin: 0 7px 0 0}
.icon.allmove-right {width: 8px; height: 8px; background-position: -68px -20px;}
.icon.move-right    {width: 8px; height: 8px; background-position: -100px -20px;}
.icon.move-left     {width: 8px; height: 8px; background-position: -116px -20px;}
.icon.allmove-left  {width: 8px; height: 8px; background-position: -84px -20px;}
.icon.noneCheck     {background-position: -64px -32px;}
.icon.partialCheck  {background-position: -80px -32px;}
.icon.allCheck      {background-position: -96px -32px;}
.icon.setting       {background-position: -48px 0px;}
.icon.arrowDown     {background-position: -192px -16px;}
.icon.arrowUp       {background-position: -208px -16px;}
.icon.preview       {background-position: -64px 0; cursor: pointer;}
.icon.link          {background-position: -80px 0; cursor: pointer;}
.icon.iFOD__filter--on            {background-position: -144px -32px; cursor: pointer;}
.icon.iFOD__filter--off           {background-position: -160px -32px; cursor: pointer;}
.icon.iFOD__networkAgent          {margin:-5px 4px -4px 0; width: 30px; height:22px; background-position: -16px -160px;}
.icon.iFOD__networkAgent.abnormal {margin:-5px 4px -4px 0; width: 30px; height:22px; background-position: -16px -192px;}
.icon.iFOD__peerConnect           {margin:-5px 4px -4px 0; width: 30px; height:22px; background-position: -48px -160px;}
.icon.iFOD__peerConnect.abnormal  {margin:-5px 4px -4px 0; width: 30px; height:22px; background-position: -48px -192px;}
.icon.iFOD__switchHandle          {margin: -1px; width: 20px; height:12px; background-position: 0px -32px;}
.icon.info                        {background-position: -96px 0px;}
.icon.dept {background-position: -112px 0px;} /* 부서 */
.icon.user {background-position: -128px 0px;} /* 사용자 */
.icon.agent {background-position: -144px 0px;} /* 에이전트 */
.icon.cancel {background-position: -160px 0px;} /* 취소 */
.icon.delete {background-position: -176px 0px;} /* 삭제 */
.icon.red-circle {background-position: -193px 0px;}
.icon.orange-circle {background-position: -210px 0px;}
.icon.green-circle {background-position: -225px 0px;}


/* -------------------- iFOD -------------------- */

.iFOD__card {
	display: flex;
	padding: 4px 0;
	/* width: 636px; */
	height: 91px;
	font-size: 11px;
	/* background: url('../images/iFOD_card.png') no-repeat left top; */
}
.iFOD__card::before {
	content: url("../images/iFOD_card_left.png");
}
.iFOD__card::after {
	content: url("../images/iFOD_card_right.png");
}
.iFOD__cardBody {
	display: flex;
	padding: 4px 10px;
	background-image: url("../images/iFOD_card_center.png");
	background-repeat: repeat-x;
}
.iFOD__card--simpleSlot::before {
	content: url("../images/iFOD_card_simpleSlotLeft.png");
}
.iFOD__card--simpleSlot::after {
	content: url("../images/iFOD_card_simpleSlotRight.png");
}

.iFOD__state,
.iFOD__external,
.iFOD__internal {
	margin: 0 2px;
	box-sizing: border-box;
	height: 82px;
	border: 1px solid #ebebeb;
	border-radius: 3px;
	vertical-align: middle;
	background-color: #ffffff;
}
.iFOD__external>.lanport:before,
.iFOD__internal>.lanport:after,
.iFOD__external>.lanport.noLink:before,
.iFOD__external>.lanport.noLink:after,
.iFOD__internal>.lanport.noLink:before,
.iFOD__internal>.lanport.noLink:after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	text-align: center;
	background: url('../images/icon.png') no-repeat;
}
.iFOD__external>.lanport:before {
	margin: 6px auto 0;
	background-position: -176px -32px;
}
.iFOD__internal>.lanport:after {
	margin: 0 auto 5px;
	background-position: -192px -32px;
}
.iFOD__external>.lanport.noLink:before,
.iFOD__external>.lanport.noLink:after,
.iFOD__internal>.lanport.noLink:before,
.iFOD__internal>.lanport.noLink:after {
	background: none;
	margin: 0 auto;
}
.iFOD__external .lanport__title {
	margin: 5px 0 0;
}
.iFOD__internal .lanport__title {
	margin:0 0 5px;
}
.lanport {
	position: relative;
	display: inline-block;
	margin: 2px 10px;
	width: 60px;
	text-align: center;
}
.lanport>.icon.iFOD__filter--on,
.lanport>.icon.iFOD__filter--off {
	position: absolute;
	right: 0px;
	top: 38px;
}
.lanport__title {
	line-height: 1;
}
.iFOD__state {
	margin-right: 10px;
	padding: 0 2px;
}
.iFOD__stateTable {
	word-break: keep-all;
}
.iFOD__stateTable th {
	font-weight: normal;
}
.iFOD__stateTable tbody th {
	text-align: right;
}
.iFOD__stateTable td {
	padding: 2px 10px;
	text-align: center;
}
.iFOD__lanport--up,
.iFOD__lanport--down {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 1px solid rgba(0,0,0,0.4);
	border-radius: 12px;
}
.iFOD__lanport--up {
	background-color: #67be32;
}
.iFOD__lanport--down {
	background-color: #bdbdbd;
}
.iFOD__switch {
	margin: 0 -3px;
	border: 1px solid rgba(0,0,0,0.2);
	background-color: #eeeeee;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1) inset;
}
.lanportPreview {
	margin-right: 12px;
}

/**
 * N시리즈 슬롯 미리보기
 */
.slotPreview {
	position: relative;
	display: inline-block;
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 2px;
	background-color: #3d3d40;
	-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24) inset;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24) inset;
}
.slotPreview--N300 {
	width: 72px;
	height: 16px;
}
.slotPreview--N700 {
	width: 72px;
	height: 24px;
}
.slotPreview--N1000 {
	width: 72px;
	height: 24px;
}
.slotPreview--N3000 {
	width: 72px;
	height: 24px;
}
.slot {
	position: absolute;
	width: 12px;
	height: 8px;
	background-color: rgba(255, 255, 255, 0.08);
	-webkit-box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.12),
		1px 1px 0 0 rgba(255, 255, 255, 0.12) inset;
	box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.12),
		1px 1px 0 0 rgba(255, 255, 255, 0.12) inset;
}
.slot--active {
	background-color: #0090ff;
}
.slotPreview--N300 > .slot--10 {
	left: 41px;
	top: 4px;
}
.slotPreview--N300 > .slot--20 {
	left: 54px;
	top: 4px;
}
.slotPreview--N700 > .slot--10 {
	left: 16px;
	top: 11px;
}
.slotPreview--N700 > .slot--20 {
	left: 29px;
	top: 11px;
}
.slotPreview--N700 > .slot--30 {
	left: 42px;
	top: 11px;
}
.slotPreview--N700 > .slot--50 {
	left: 42px;
	top: 5px;
	width: 25px;
	height: 3px;
}
.slotPreview--N1000 > .slot--10,
.slotPreview--N3000 > .slot--10 {
	left: 16px;
	top: 11px;
}
.slotPreview--N1000 > .slot--20,
.slotPreview--N3000 > .slot--20 {
	left: 29px;
	top: 11px;
}
.slotPreview--N1000 > .slot--30,
.slotPreview--N3000 > .slot--30 {
	left: 42px;
	top: 11px;
}
.slotPreview--N1000 > .slot--40,
.slotPreview--N3000 > .slot--40 {
	left: 55px;
	top: 11px;
}
.slotPreview--N1000 > .slot--501,
.slotPreview--N3000 > .slot--501 {
	left: 42px;
	top: 2px;
	width: 25px;
	height: 3px;
}
.slotPreview--N1000 > .slot--502,
.slotPreview--N3000 > .slot--502 {
	left: 42px;
	top: 6px;
	width: 25px;
	height: 3px;
}
.icon.lanport__1G--small {
	outline: 1px solid #b2b2b2;
	background-position: -208px -32px;
	background-color: #ffffff;
}
.icon.lanport__10G--small {
	outline: 1px solid #b2b2b2;
	background-position: -224px -32px;
	background-color: #ffffff;
}
.lanport__1G--small.active,
.lanport__10G--small.active {
	outline: 2px solid #0090ff;
}



/* -------------------- LABEL -------------------- */

[class*='label__'] {
	display: inline-block;
	box-sizing: border-box;
	height: 28px;
	padding: 0px 10px;
	border: 1px solid rgba(0,0,0,0.1);
	line-height: 24px;
	font-size: 12px;
	font-weight: normal;
	color: #ffffff;
	vertical-align: middle;
}
[class*='label__'].small {
	height: 24px;
	line-height: 22px;
}
.label__success {
	background: #5ab25a;
}
.label__warning {
	background: #f1c40f;
}
.label__danger {
	background: #d7726f;
}



/* -------------------- JQUERY -------------------- */

.ui-icon-circle-triangle-w {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url('../images/icon.png') no-repeat -144px -16px;
	text-indent: -9999px;
	cursor: pointer;
}
.ui-icon-circle-triangle-e {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url('../images/icon.png') no-repeat -128px -16px;
	text-indent: -9999px;
	cursor: pointer;
}
.ui-datepicker {
	display: none;
	padding: 15px;
	border: 1px solid #272935;
	background-color: #3f414d;
	box-shadow: 1px 1px 2px #272936;
	color: #FFF;
}
.ui-datepicker-prev {
	float: left;
}
.ui-datepicker-next {
	float: right;
}
.ui-datepicker-title {
	height: 22px;
	font-weight: bold;
	text-align: center;
	color: #FFF;
}
.ui-datepicker-calendar {
	border-collapse: separate;
	border-right: 1px solid #292C3D;
}
.ui-datepicker-calendar th {
	width: 22px;
	height: 28px;
	padding: 3px;
	border-top: 1px solid #282830;
	background: #292C3D;
	font-weight: normal;
	color: #FFF;
}
.ui-datepicker-calendar td {
	height: 26px;
	border: 1px solid #292C3D;
	border-top-color: #585A6A;
	border-right-color: #585A6A;
	background: #4A4E5A;
	text-align: center;
}
.ui-datepicker-calendar td a {
	display: inline-block;
	padding: 3px;
	text-shadow: 0 1px #0d1021;
	color: #FFF;
}
.ui-datepicker-calendar td a:hover {
	color: #66ccff;
}
.ui-datepicker-current-day {
	border-top-color: #2671b4 !important;
	border-right-color: #2671b4 !important;
	background: #2671b4 !important;
}
.ui-datepicker-buttonpane {
	padding-top: 15px;
	text-align: center;
}
.ui-datepicker-buttonpane button {
	border: 1px solid #292C3D;
}
.ui-accordion .ui-accordion-header {
	display: block;
	position: relative;
	min-height: 0;
	margin: 2px 0 0 0;
	padding: .5em .5em .5em .7em;
	border: 1px solid #d3d3d3;
	border-radius: 3px;
	background: #fafafa;
	font-size: 100%;
	cursor: pointer;
	outline: none;
}
.ui-accordion .ui-accordion-header.ui-state-hover {
	border: 1px solid #bfbfbf;
	background: #ececec;
}
.ui-accordion .ui-accordion-header.ui-state-active {
	position: relative;
	z-index: 1;
	margin-top: 10px;
	border: 1px solid #989898;
	border-bottom: none;
	border-radius: 3px 3px 0 0;
	background: #fff;
	box-shadow: 1px 1px 2px 0 #999;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
	position: absolute;
	right: .5em;
	top: 50%;
	margin-top: -8px;
	width: 16px;
	height: 16px;
	background: url('../images/icon.png') no-repeat;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-e {
	background-position: -192px -16px;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-s {
	background-position: -208px -16px;
}
.ui-accordion .ui-accordion-content {
	overflow: auto;
	position: relative;
	z-index: 100;
	margin-bottom: 10px;
	padding: 20px;
	border: 1px solid #989898;
	border-radius: 0 0 3px 3px;
	background: #fff;
	box-shadow: 1px 1px 2px 0 #999;
}
.ui-accordion-content label {
	display: inline-block;
	padding-right: 20px;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* overflow:hidden; */
}
.ui-accordion-content label input[type="checkbox"] {
	margin-right: 5px;
}
#divAgentOptions .ui-accordion-content label {
	width: 270px;
	padding-bottom: 10px;
}
#divMailiAdvOtp .ui-accordion-content label {
	width: 220px;
	padding-bottom: 10px;
}

[class*="badge--"] {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 4px 3px;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 2px;
	font-size: 11px;
	line-height: 1em;
}

.badge--secondary {
	background: #ececec;
}

.badge--danger {
	background: #ff8f9a;
}

.badge--green {
	background: #67BE32;
}

.badge--gray {
	background: #C0C0C0;
}

/* -------------------- PADDING/MARGIN STYLE -------------------- */

.mgT_01m  {margin-top: -1px;}
.mgT_02m  {margin-top: -2px;}
.mgT_03m  {margin-top: -3px;}
.mgT_04m  {margin-top: -4px;}
.mgT_05m  {margin-top: -5px;}
.mgT_06m  {margin-top: -6px;}
.mgT_07m  {margin-top: -7px;}
.mgT_08m  {margin-top: -8px;}
.mgT_09m  {margin-top: -9px;}
.mgT_10m  {margin-top: -10px;}
.mgT_01   {margin-top: 1px;}
.mgT_02   {margin-top: 2px;}
.mgT_03   {margin-top: 3px;}
.mgT_04   {margin-top: 4px;}
.mgT_05   {margin-top: 5px;}
.mgT_06   {margin-top: 6px;}
.mgT_07   {margin-top: 7px;}
.mgT_08   {margin-top: 8px;}
.mgT_10   {margin-top: 10px;}
.mgT_11   {margin-top: 11px;}
.mgT_12   {margin-top: 12px;}
.mgT_15   {margin-top: 15px;}
.mgT_16   {margin-top: 16px;}
.mgT_18   {margin-top: 18px;}
.mgT_20   {margin-top: 20px;}
.mgT_21   {margin-top: 21px;}
.mgT_22   {margin-top: 22px;}
.mgT_24   {margin-top: 24px;}
.mgT_25   {margin-top: 25px;}
.mgT_30   {margin-top: 30px;}
.mgT_40   {margin-top: 40px;}
.mgT_50   {margin-top: 50px;}
.mgT_70   {margin-top: 70px;}
.mgT_100  {margin-top: 100px;}
.mgL_01   {margin-left: 1px;}
.mgL_02   {margin-left: 2px;}
.mgL_06   {margin-left: 3px;}
.mgL_04   {margin-left: 4px;}
.mgL_05   {margin-left: 5px;}
.mgL_06   {margin-left: 6px;}
.mgL_08   {margin-left: 8px;}
.mgL_10   {margin-left: 10px;}
.mgL_12   {margin-left: 12px;}
.mgL_15   {margin-left: 15px;}
.mgL_16   {margin-left: 16px;}
.mgL_18   {margin-left: 18px;}
.mgL_20   {margin-left: 20px;}
.mgL_28   {margin-left: 28px;}
.mgL_30   {margin-left: 30px;}
.mgL_200  {margin-left: 200px;}
.mgR_01   {margin-right: 1px;}
.mgR_02   {margin-right: 2px;}
.mgR_06   {margin-right: 3px;}
.mgR_04   {margin-right: 4px;}
.mgR_05   {margin-right: 5px;}
.mgR_06   {margin-right: 6px;}
.mgR_08   {margin-right: 8px;}
.mgR_10   {margin-right: 10px;}
.mgR_12   {margin-right: 12px;}
.mgR_15   {margin-right: 15px;}
.mgR_18   {margin-right: 18px;}
.mgR_20   {margin-right: 20px;}
.mgR_50   {margin-right: 50px;}
.mgB_01   {margin-bottom: 1px;}
.mgB_02   {margin-bottom: 2px;}
.mgB_03   {margin-bottom: 3px;}
.mgB_04   {margin-bottom: 4px;}
.mgB_05   {margin-bottom: 5px;}
.mgB_06   {margin-bottom: 6px;}
.mgB_07   {margin-bottom: 7px;}
.mgB_08   {margin-bottom: 8px;}
.mgB_09   {margin-bottom: 9px;}
.mgB_10   {margin-bottom: 10px;}
.mgB_11   {margin-bottom: 11px;}
.mgB_15   {margin-bottom: 15px;}
.mgB_30   {margin-bottom: 30px;}
.mgB_40   {margin-bottom: 40px;}
.padT_01m {padding-top: -1px;}
.padT_02m {padding-top: -2px;}
.padT_03m {padding-top: -3px;}
.padT_04m {padding-top: -4px;}
.padT_05m {padding-top: -5px;}
.padT_06m {padding-top: -6px;}
.padT_07m {padding-top: -7px;}
.padT_08m {padding-top: -8px;}
.padT_09m {padding-top: -9px;}
.padT_10m {padding-top: -10px;}
.padT_01  {padding-top: 1px;}
.padT_02  {padding-top: 2px;}
.padT_03  {padding-top: 3px;}
.padT_04  {padding-top: 4px;}
.padT_05  {padding-top: 5px;}
.padT_06  {padding-top: 6px;}
.padT_07  {padding-top: 7px;}
.padT_08  {padding-top: 8px;}
.padT_10  {padding-top: 10px;}
.padT_11  {padding-top: 11px;}
.padT_12  {padding-top: 12px;}
.padT_15  {padding-top: 15px;}
.padT_16  {padding-top: 16px;}
.padT_18  {padding-top: 18px;}
.padT_20  {padding-top: 20px;}
.padT_22  {padding-top: 22px;}
.padT_24  {padding-top: 24px;}
.padT_25  {padding-top: 25px;}
.padT_30  {padding-top: 30px;}
.padT_35  {padding-top: 35px;}
.padT_40  {padding-top: 40px;}
.padL_01  {padding-left: 1px;}
.padL_02  {padding-left: 2px;}
.padL_06  {padding-left: 3px;}
.padL_04  {padding-left: 4px;}
.padL_05  {padding-left: 5px;}
.padL_06  {padding-left: 6px;}
.padL_08  {padding-left: 8px;}
.padL_10  {padding-left: 10px;}
.padL_12  {padding-left: 12px;}
.padL_15  {padding-left: 15px;}
.padL_18  {padding-left: 18px;}
.padL_20  {padding-left: 20px;}
.padL_30  {padding-left: 30px;}
.padL_50  {padding-left: 50px;}
.padL_60  {padding-left: 60px;}
.padL_103 {padding-left: 103px;}
.padL_203 {padding-left: 203px;}
.padR_01  {padding-right: 1px;}
.padR_02  {padding-right: 2px;}
.padR_06  {padding-right: 3px;}
.padR_04  {padding-right: 4px;}
.padR_05  {padding-right: 5px;}
.padR_06  {padding-right: 6px;}
.padR_08  {padding-right: 8px;}
.padR_10  {padding-right: 10px;}
.padR_12  {padding-right: 12px;}
.padR_15  {padding-right: 15px;}
.padR_18  {padding-right: 18px;}
.padR_20  {padding-right: 20px;}
.padR_24  {padding-right: 24px;}
.padB_01  {padding-bottom: 1px;}
.padB_02  {padding-bottom: 2px;}
.padB_03  {padding-bottom: 3px;}
.padB_04  {padding-bottom: 4px;}
.padB_05  {padding-bottom: 5px;}
.padB_06  {padding-bottom: 6px;}
.padB_07  {padding-bottom: 7px;}
.padB_08  {padding-bottom: 8px;}
.padB_09  {padding-bottom: 9px;}
.padB_10  {padding-bottom: 10px;}
.padB_11  {padding-bottom: 11px;}
.padB_15  {padding-bottom: 15px;}
.padB_40  {padding-bottom: 40px;}
.w_50     {width: 50px;}
.h_200    {height: 200px}
.h_240    {height: 240px}
.h_24     {height: 24px}
.fontSize_12 {
	font-size: 12px;
	line-height: 20px;
}

[class*="badge--"] {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 4px 3px;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 2px;
	font-size: 11px;
	line-height: 1em;
}

.badge--secondary {
	background: #ececec;
}

.badge--danger {
	background: #ff8f9a;
}

/* -------------------- 인쇄용 -------------------- */

.inspectionInfo {
	display: none;
	margin: -30px 0 15px
}
#inspectionDateStr {
	font-size: 12px;
}

/* -------------------- Space -------------------- */
.smsSpace {
	display: inline-flex;
	align-items: center; /* 이게 가장 많이 사용될 듯 */
}
.smsSpace.between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.smsSpace.small > * + * {
	margin-left: 4px;
}
.smsSpace > * + *,
.smsSpace.middle > * + * {
	margin-left: 8px;
}
.smsSpace.large > * + * {
	margin-left: 16px;
}

/* -------------------- smsGap -------------------- */
.smsGap--lg > * + * {
  margin-left: 24px;
}
.smsGap__y > * + * {
  margin-top: 8px;
}


/* -------------------- smsPanel -------------------- */
.smsPanel {
	border: 1px solid #e2e2e2;
}
.smsPanel__header {
	padding: 8px;
	background-color: #f7f7f7;
	border-bottom: 1px solid #e2e2e2;
}
.smsPanel__header.sm {
	padding: 4px 8px;
}
.smsPanel__title {
	font-weight: 700;
}
.smsPanel__body {
	padding: 8px;
}

/* -------------------- smsSwitch -------------------- */
.smsSwitch {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.smsSwitch__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.smsSwitch__checkbox:checked + .smsSwitch__button::after {
  -webkit-transform: translateX(13px);
          transform: translateX(13px);
  background-color: #2db300;
}

.smsSwitch__button {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 16px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 9px;
  background: #ffffff;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.24) inset;
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.24) inset;
}

.smsSwitch__button:hover {
  cursor: pointer;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.32) inset;
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.32) inset;
}

.smsSwitch__button::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 3px;
  top: 0;
  margin-top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28) inset;
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28) inset;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

.smsSwitch__label {
  margin-left: 4px;
}

.dynatree-ico-c span.dynatree-icon{
	background-position: -528px -144px;
	background-image: url("../images/icon2.png");
}

/* --------------------- */
/* width 값은 따로 지정 */

.ellipsisRWD {
	display: table;
	table-layout: fixed;
	width: 100%;
	white-space: nowrap;
}


/* 반응형 글자 자름(width값 설정 필요없음) */

.ellipsisRWD > * {
	display: table-cell;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 16px;
}


/* 탭메뉴 */
.smsTabs {
	display: flex;
}
.smsTabs__tab {
	position: relative;
	bottom: -1px;
	margin-right: 1px;
	padding: 8px 20px;
	border: 1px solid rgb(123,130,141);
	border-bottom: 0;
	border-radius: 3px 3px 0 0;
	background-color: rgb(142, 144, 149);
	font-size: 13px;
    font-weight: bold;
    line-height: 1em;
    color: #ffffff;
}
.smsTabs__tab:not(.smsTabs__tab--active):hover {
	border: 1px solid rgba(123,130,141, 0.8);
	border-bottom: 0;
	background-color: rgba(142, 144, 149, 0.8);
	color: #ffffff;
}
.smsTabs__tab--active {
	border: 1px solid #cbccd1;
	border-bottom: 0;
	color: #464b53;
	background-color: #fcfcfc;
}
.smsTabs__tab--active:hover {
	color: #464b53;
}

/* custom checkbox */
.smsCheckbox__wrapper:hover {
	cursor: pointer;
}

.reaction {
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 10px;
	box-sizing: border-box;
}

.reaction legend {
	font-size: 12px;

}
.reaction legend span {
	font-weight: bold;
	margin: 0 10px;
}

.reaction>div {
	float: left;
	width: 50%;
}

.reaction:after {
	content: " ";
	display: block;
	clear: both;
}

.reaction>div>p {
	padding-bottom: 5px;
}

.reaction>div>ul>li {
	line-height: 2em;
}

/* Divider */

.smsDivider.hor {
    border-bottom: 1px solid #D9DEE6;
    margin-bottom: 8px;
}
.smsDivider.hor-shadow {
	box-shadow: 0 1px -1px rgb(0 0 0 / 10%);
    border-bottom: 1px solid #D9DEE6;
}
.smsDivider.ver {
    border-right: 1px solid #D9DEE6;
    margin-left: 8px;
    margin-right: 8px;
}


.smsGap--xs > * + * {
  margin-left: 2px;
}

.smsGap--sm > * + * {
  margin-left: 4px;
}

.smsGap > * + *,
.smsGap--md > * + * {
  margin-left: 8px;
}

.smsGap--lg > * + * {
  margin-left: 24px;
}

.smsGap__y--sm > * + * {
  margin-top: 4px;
}

.smsGap__y > * + *,
.smsGap__y--md > * + * {
  margin-top: 8px;
}

.smsGap__y--lg > * + * {
  margin-top: 24px;
}



/* Loading Bar */

.loadingBar {
	/* block 요소 로딩바  */
	/* margin:10px 0; */
	height: 11px;
	background: url('../images/common/loading.gif');
	border-radius: 6px;
	border: 1px solid #a2a2a2;
}

span.loadingBar {
	/* inline 요소 로딩바  */
	display: inline-block;
	vertical-align: middle;
}

.spinner {
	/* block 요소 스피너 */
	/* margin:10px 0; */
	width: 32px;
	height: 32px;
	background: url('../images/common/spinner.gif');
}

span.spinner {
	/* inline 요소 로딩바  */
	display: inline-block;
	vertical-align: middle;
}

label > * + * {
    margin-left: 4px;
}


/**
 * Multi Picker → mpicker
 * 주로 좌우로 구성된 전체 리스트, 선택 리스트에서 사용
 */
.mpicker {
	position: relative;
}
.mpicker.hasBorder {
	border: 1px solid #a4a4a4;
	padding: 8px;
}
.mpicker:after {
	content: '';
	display: block;
	clear: both;
}
[class*="mpicker__body"] {
	width: calc(50% - 20px);
	box-sizing: border-box;
}
.mpicker__body--left {
	float: left;
}
.mpicker__body--right {
	float: right;
}
.mpicker__controls {
	position: absolute;
	left: 50%;
	top: calc(50% + 16px); /*16px : mpicker__title의 높이*/
	margin-left: -12px;
	margin-top: -68px;
}
.mpicker__control {
	display: block;
	width: 24px;
	margin: 8px auto;
}
.mpicker__control:hover {
	cursor: pointer;
}
.mpicker__title {
	height: 20px; /* 국문과 영문의 높이 차로 인해 설정됨 */
	letter-spacing: -0.2px;
}
.mpicker__lists {
	padding: 8px;
	border: 1px solid #a4a4a4;
	overflow-x: hidden;
	overflow-y: auto;
}
.mpicker__list {
	margin: 4px 0;
	list-style: none;
}
.mpicker__list:first-child {
	margin-top: 0;
}
.mpicker__list:last-child {
	margin-bottom: 0;
}


.ui-multiselect {
    padding: 0 6.5px;
    text-align: left;
    line-height: normal
}

.ie7 .ui-multiselect {
    padding: 2px 3px 1px;
    vertical-align: middle
}

.ie8 .ui-multiselect {
    padding: 3px;
    vertical-align: middle
}

@-moz-document url-prefix() {
    .ui-multiselect {
        padding: 2px 1px 1px
    }
}

.ui-multiselect span.ui-icon {
    float: right
}

.ui-multiselect-single .ui-multiselect-checkboxes input {
    position: absolute!important;
    top: auto!important;
    left: -9999px
}

.ui-multiselect-header {
    flex-wrap: wrap;
    flex-direction: column
}

.ui-multiselect-header,.ui-multiselect-header-input {
    margin-bottom: 3px;
    padding: 3px;
    display: flex
}

.ui-multiselect-header ul {
    font-size: 11px
}

.ui-multiselect-header ul li {
    float: left;
    padding: 0 10px 0 0
}

.ui-multiselect-header a {
    text-decoration: none
}

.ui-multiselect-header a:hover {
    text-decoration: underline
}

.ui-multiselect-header span.ui-icon {
    float: left
}

.ui-multiselect-header li.ui-multiselect-close {
    float: right;
    text-align: right;
    padding-right: 0
}

.ui-multiselect-filter {
    padding-bottom: 3px
}

.ui-multiselect-filter input {
    width: 100%
}

.ui-multiselect-menu {
    display: none;
    padding: 3px;
    position: absolute;
    z-index: 999;
    text-align: left
}

.ui-multiselect-checkboxes {
    position: relative;
    overflow-y: auto
}

.ui-multiselect-checkboxes label {
    cursor: default;
    display: block;
    border: 1px solid transparent;
    padding: 0 6px;
    box-sizing: content-box
}

.ui-multiselect-checkboxes label input {
    margin-right: 5px
}

.ui-multiselect-checkboxes li {
    clear: both
}

.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label {
    text-align: center;
    font-weight: 700;
    border-bottom: 1px solid
}

.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a {
    display: block;
    padding: 3px;
    margin: 1px 0;
    text-decoration: none
}

* html .ui-multiselect-checkboxes label {
    border: none
}