@charset "utf-8";
@import url('xeicon.css');
@import url('jquery-ui.css');
@import url('fonts.css');
@import url('swiper.min.css');
@import url('reset.css');



/************************************************************************************************************************************************
	Datepicker
************************************************************************************************************************************************/
/* DatePicker */
.ui-datepicker {  border-radius: 5px !important;  padding: 20px !important;  border: 1px solid #e1e1e1;  }
.ui-datepicker .ui-datepicker-header {  background: none;  border: 0; }
.ui-datepicker .ui-datepicker-title,
.ui-datepicker th { font-size:12px; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {  background: none;  border: 0;  border-radius: 5px; font-size:12px;  }
.ui-state-default:hover {  background: #f5f5f5; }
.ui-datepicker-today a {  font-weight: 600; }
.ui-datepicker .ui-datepicker-prev {  left: 2px;  background: url("/img/common/ico_cal_prev.gif") no-repeat 50% 50%;  cursor: pointer; }
.ui-datepicker .ui-datepicker-next {  right: 2px;  background: url("/img/common/ico_cal_next.gif") no-repeat 50% 50%;  cursor: pointer; }
.ui-datepicker td span, .ui-datepicker td a {  text-align: center; }
.ui-state-active {  background: #ffdf00 !important; }

/************************************************************************************************************************************************
	Modal
************************************************************************************************************************************************/
body.overflow { overflow: hidden; }
.hidden { overflow:hidden; }
.modal-backdrop {position: fixed; top:0; right:0; bottom:0; left:0; background:#000; z-index:7500; opacity:.7; filter:alpha(opacity=70);}
.modal {display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:8000; overflow:auto; -webkit-overflow-scrolling:touch; outline:0; }
.modal-dialog {position:relative; width:auto;margin:0 auto;  padding:0 30px; margin-bottom: 20px;  }
.modal-content {position:relative; background-color:#fff; outline:none;  overflow:hidden; padding:0; border-radius:5px; box-shadow:0 0 10px rgba(0,0,0,0.2); }
.modal-header { height:38px; padding-left: 10px; line-height:29px; background: #007FA4; position: relative; }
.modal-header .h5 { font-size:15px; line-height: 38px; font-weight: 400; color: #fff;  }
.modal-header .btn-close { position: absolute; right:0; top:0; width:38px; height: 38px; background:none;outline:none; border:0; text-indent:-9999px; }
.modal-header .btn-close:before { content:''; position:absolute; left:12px; top:18px; width:16px; height:1px; background:#fff; transform:rotate(45deg); }
.modal-header .btn-close:after{ content:''; position:absolute; left:12px; top:18px; width:16px; height:1px; background:#fff; transform:rotate(-45deg); }
.modal-body { padding:20px; }
.modal-foot { padding:10px 0 24px; text-align:center; }
.modal-foot a,
.modal-foot button { margin:0 9px;}

.modal-dialog .modal-body .search-type2 dt div.checkValidMsg{display: inline; height: 12px; font-style:italic;}

.modal-notice { margin-top:-20px; }
.modal-notice .head { position: relative; padding:12px; border-bottom: 1px solid #d2d8e1;  }
.modal-notice .head .h6 { font-size:15px; color: #425776; font-weight: 500; }
.modal-notice .head .date { position: absolute; right:12px; top:12px; font-size:14px; color: #606e82; font-weight: 200;}
.modal-notice .body { padding:12px; background: #f3f5f7; border-radius:2px; min-height: 200px; font-size:14px; line-height: 23px; color: #666666; }
.modal-notice .files { padding:15px 12px; }
.modal-notice .files > div + div { margin-top:7px; }
.modal-notice .files a { font-size:13px;  color: #425776; }
.modal-notice .files a span { color: #a7b5cc; margin-left: 5px; font-weight: 100;}
.modal-notice .agree { padding-top:20px; text-align: center;  border-top:1px solid #d2d8e1;}
.modal-notice .agree label { margin:0 19px;}

body.bg-white { background: #fff; }
.window-pop .modal-content { border-radius:0;  box-shadow:none;}
.window-pop .modal-header { height:44px; border-bottom: 2px solid #145597; padding-left: 15px; }
.window-pop .modal-header .h5 { line-height: 43px; }

/************************************************************************************************************************************************
	Common
************************************************************************************************************************************************/
::-webkit-input-placeholder { color: #a6b2c4;}
:-ms-input-placeholder { color: #a6b2c4;}
.inner { padding:0 60px; max-width:1740px; margin: 0 auto; }
/* Text */
.text-left { text-align:left !important; }
.text-center { text-align:center !important; }
.text-right { text-align:right !important; }
.text-blue { color:#007FA4 !important; }
.blue { color: #007FA4 !important; }
.red { color: #DC0800 !important; }

/* Title */
.h2 { font-size:16px; font-weight:500; color:#333333; padding-left:12px; position:relative; line-height:1; letter-spacing: -0.25px; }
.h2.blue:before { background: #007FA4;}
.h2:before { content:''; position:absolute; left:0; top:2px; width:3px; height:14px; border-radius:2px; background:#333333; }

.h3 { font-size:16px; margin-bottom:10px; }
.h4 { font-size:15px; margin-bottom:10px; color:#ff0000; }
.h5 { font-size:14px; margin-bottom:7px; color:#425776; }


/* Form */
.checkbox { position: absolute;left: -9999px; }
.checkbox + em { display: inline-block; vertical-align: middle; width:18px; height: 18px; border-radius:3px; background: #fff; border: 1px solid #333333; position: relative; transition: all 0.5s ease;cursor: pointer; text-align: center; line-height: 16px; font-size:14px; color: #007FA4; font-weight: 600; }
.checkbox + em:before { content: '\e928'; display: inline; font-family:xeicon; opacity:0; transition: all 0.5s ease; color: #007FA4; }
.checkbox + em + span { display: inline-block; vertical-align: middle; font-size:14px; color: #666666; margin-left: 10px;cursor: pointer; }
.checkbox:checked + em { border-color:#007FA4; }
.checkbox:checked + em:before { opacity:1; }
.checkbox:disabled + em { border-color:#d8dde6; cursor: no-drop; }
.checkbox:disabled + em + span { color: #a6b2c4; opacity:0.3;cursor: no-drop;  }

.radio { position: absolute;left: -9999px; }
.radio + em { display: inline-block; vertical-align: middle; width:18px; height: 18px; border-radius:100%; background: none; border: 1px solid #333333; position: relative; transition: all 0.5s ease;
 text-align: center; line-height: 16px; font-size:14px; color: #007FA4; font-weight: 600; }
.radio + em:before { content: ''; position: absolute;left: 4px; top:4px; right:4px; bottom:4px; border-radius:100%; background: #007FA4; transform: scale(0.4); transition: all 0.5s ease; opacity:0; cursor: pointer;}
.radio + em + span { display: inline-block; vertical-align: middle; font-size:14px; color: #666666; margin-left: 10px;cursor: pointer; }
.radio:checked + em:before{ transform: scale(1); opacity:1;}
.radio:disabled + em { border-color:#d8dde6; cursor: no-drop; }
.radio:disabled + em + span { color: #a6b2c4; opacity:0.3; cursor: no-drop; }

.toggle { position: absolute;left: -9999px; }
.toggle + span { display: inline-block; vertical-align: middle; width:36px; height: 18px; border-radius:18px; background: #d2d8e1; position: relative; position: relative;transition: all 0.5s ease; cursor: pointer;}
.toggle + span em { position: absolute;left: 0; top:0; width:18px; height: 18px; border-radius:100%; background: #333333; box-shadow:1px 0 2px 0 rgba(0, 0, 0, 0.16); transition: all 0.5s ease;}
.toggle:checked + span  { background: rgba(0,126,255,0.5); }
.toggle:checked + span em { left:18px; background: #007FA4; }
.toggle:disabled + span { background: rgba(204,204,204,0.5); cursor: no-drop; }
.toggle:disabled + span em { background:#ccc; }
.toggle-txt { font-size:14px; color: #425776; vertical-align: middle; display: inline-block; margin:-2px 4px 0;}


.btn-base-theme { position: fixed; right:160px; bottom:20px; width:60px; height: 60px; border-radius:100%; background: #fff; border: 1px solid #000; text-align: center; font-size:16px;color: #222; line-height: 1.2; box-shadow:0 0 10px rgba(0,0,0,0.5); transition: all 0.5s ease;}
.btn-base-theme:hover { background: #000; color: #fff; }

.btn-cross-theme { position: fixed; right:90px; bottom:20px; width:60px; height: 60px; border-radius:100%; background: #fff; border: 1px solid #000; text-align: center; font-size:16px;color: #222; line-height: 1.2; box-shadow:0 0 10px rgba(0,0,0,0.5); transition: all 0.5s ease;}
.btn-cross-theme:hover { background: #000; color: #fff; }

.btn-black-theme { position: fixed; right:20px; bottom:20px; width:60px; height: 60px; border-radius:100%; background: #fff; border: 1px solid #000; text-align: center; font-size:16px;color: #222; line-height: 1.2; box-shadow:0 0 10px rgba(0,0,0,0.5); transition: all 0.5s ease;}
.btn-black-theme:hover { background: #000; color: #fff; }

.inp { height:28px; border:1px solid #d2d8e1; background:#fff; padding-left:10px; font-size:14px; /*color:#a6b2c4;*/ color:#425776; vertical-align:middle;  transition:all 0.3s ease; border-radius:2px;}
.inp.calendar { background-image: url(/img/common/ico_calendar.svg); background-repeat: no-repeat; background-position: right 8px center; }
.inp:focus { border-color:#007FA4 !important; color:#425776; }
.inp:disabled { border-color: #ccc;background: #eee;color: rgba(210, 216, 225, 0.9); }
.inp:read-only { border-color: #ccc;background: #eee;color: #425776; }
.inp.danger { border-color:#f73859 !important; color: #f73859 !important; }
.inp.danger::-webkit-input-placeholder { color: #f73859 !important;}
.inp.danger:-ms-input-placeholder { color: #f73859 !important;}

.select { height:28px; border:1px solid #d2d8e1; background:#fff url(/img/common/bu_select.svg) no-repeat 100% 50%; padding:0 21px 0 8px; font-size:14px; color:#a6b2c4; vertical-align:middle;  transition:all 0.3s ease; border-radius:2px;}
.select:focus{ border-color:#007FA4 !important; }

.textarea { width:100%; height:239px; border:1px solid #d2d8e1; background:#fff; padding:6px 10px; font-size:14px; color:#a6b2c4; vertical-align:middle;  transition:all 0.3s ease; border-radius:2px;}
.textarea:focus { border-color:#007FA4 !important; color:#425776; }
.textarea:disabled {border-color: #D2D8E1; background:#fff; color: rgba(210, 216, 225, 0.9); }
.textarea.danger  { border-color:#f73859 !important; color: #f73859 !important; }
.textarea.danger ::-webkit-input-placeholder { color: #f73859 !important;}
.textarea.danger :-ms-input-placeholder { color: #f73859 !important;}

.agreement {text-align: end; margin-top: 10px;}


/* Button */
.btn-type0 { display:inline-block; vertical-align:middle; padding:0 15px; font-size:14px; color:#007FA4; background:none; border:1px solid #007FA4; border-radius:2px; height:28px; line-height:26px; text-align:center; transition: all 0.3s ease; }
.btn-type1 { display:inline-block; vertical-align:middle; padding:0 15px; font-size:14px; color:#fff; background:#007FA4; border:1px solid #007FA4; border-radius:2px; height:28px; line-height:26px; text-align:center; transition: all 0.3s ease; }
.btn-type2 { display:inline-block; vertical-align:middle; padding:0 15px; font-size:14px; color:#fff; background:#009774; border:1px solid #009774;  border-radius:2px; height:28px; line-height:26px; text-align:center; transition: all 0.3s ease; }
.btn-type3 { display:inline-block; vertical-align:middle; padding:0 15px; font-size:14px; color:#fff; background:#7d8ea6; border:1px solid #7d8ea6;  border-radius:2px; height:28px; line-height:26px; text-align:center; transition: all 0.3s ease; }
.btn-type4 { display:inline-block; vertical-align:middle; padding:0 15px; font-size:14px; color:#fff; background:#ec193e; border:1px solid #ec193e;  border-radius:2px; height:28px; line-height:26px; text-align:center; transition: all 0.3s ease; }
.btn-type0:hover { border-color:#3EAFD2; color: #3EAFD2;  }
.btn-type1:hover { background: #3EAFD2; border-color:#3EAFD2; }
.btn-type2:hover { }
.btn-type3:hover { background: #92a4be; border-color: #92a4be;}
.btn-type0:disabled { border-color:rgba(166,178,196,0.3); color: rgba(166,178,196,0.3);  }
.btn-type1:disabled,
.btn-type2:disabled,
.btn-type3:disabled,
.btn-type4:disabled { border-color:transparent; background: rgba(96,110,130,0.3);  color: rgba(255,255,255,0.3); pointer-events: none }
.btn-round { border-radius:28px !important; }
.btn-excel,
.btn-doc,
.btn-pdf,
.btn-etc{ padding:0; width:56px; }
.btn-doc .ico-doc,
.btn-pdf .ico-pdf,
.btn-etc .ico-etc,
.btn-excel .ico-excel { margin-left:0; }
.btn-l { height:38px; line-height:36px; padding:0 25px; }
.btn-link { font-size:14px; color: #218bff; text-decoration: underline !important; }

.btn-refresh { width:28px; height: 28px; border: 1px solid #d2d8e1; border-radius:2px; background: #fff; }
.btn-modify { background: url(/img/common/ico_edit.svg) no-repeat 0 0; border: 0; width:16px; height: 16px; }
.btn-modify:hover { background-image: url(/img/common/ico_edit_on.svg); }

/* Icon */
.ico-excel { display:inline-block; vertical-align:middle; width:14px; height:16px; background:url(/img/common/ico_xls.svg) no-repeat 0 0; margin:-4px 3px 0; }
.ico-doc { display:inline-block; vertical-align:middle; width:14px; height:16px; background:url(/img/common/ico_doc.svg) no-repeat 0 0; margin:-4px 3px 0; }
.ico-pdf { display:inline-block; vertical-align:middle; width:14px; height:16px; background:url(/img/common/ico_pdf.svg) no-repeat 0 0; margin:-4px 3px 0; }
.ico-etc { display:inline-block; vertical-align:middle; width:14px; height:16px; background:url(/img/common/ico_etc.svg) no-repeat 0 0; margin:-4px 3px 0; }
.ico-file-doc { display:inline-block; vertical-align:middle; width:36px; height:18px; background:url(/img/common/ico_file_doc.svg) no-repeat 0 0; margin:-2px 3px 0; }
.ico-file-pdf { display:inline-block; vertical-align:middle; width:36px; height:18px; background:url(/img/common/ico_file_pdf.svg) no-repeat 0 0; margin:-2px 3px 0; }
.ico-file-xls { display:inline-block; vertical-align:middle; width:36px; height:18px; background:url(/img/common/ico_xls_s.svg) no-repeat 0 0; margin:-2px 3px 0; }
.ico-file-etc { display:inline-block; vertical-align:middle; width:36px; height:18px; background:url(/img/common/ico_etc_s.svg) no-repeat 0 0; margin:-2px 3px 0; }
.ico-refresh { display:inline-block; vertical-align:middle; width:16px; height:16px; background:url(/img/common/ico_refresh.svg) no-repeat 0 0; margin:-2px 3px 0; }


/* Etc */
.hr1 { display:block; width:100%;  height:1px; border-top:1px dashed #ccc; margin:20px 0; }

.level { display: inline-block; vertical-align: middle; width:52px; height: 21px; line-height: 19px; border-radius:21px; font-size:12px !important; border: 1px solid #000; text-align: center; }
.level1 { border-color:#ff9000; color: #ff9000; }
.level2 { border-color:#007FA4; color: #007FA4; }
.level3 { border-color:#2fd1d0; color: #2fd1d0; }
.level4 { border-color:#3d46c7; color: #3d46c7; }
.level5 { border-color:#a162f7; color: #a162f7; }
.level6 { border-color:#DC0800; color: #DC0800; }
.level7 { border-color:#FA7D00; color: #FA7D00; }
.level8 { border-color:#FFA900; color: #FFA900; }
.level9 { border-color:#26B8D6; color: #26B8D6; }
.level.type2 { color: #fff; border: 0; line-height: 21px; }
.level.type2.level1 { background-color:#dc0800;}
.level.type2.level2 { background-color:#fa7d00;}
.level.type2.level3 { background-color:#ffa900;}
.level.type2.level4 { background-color:#26b8d6;}
.level.type2.level5 { background-color:#007FA4;}

.level-ALARM { border-color:#ff9000; color:#ff9000;}
.level-DEMAND { border-color:#a162f7; color: #a162f7; }
.level-REPAIR { border-color:#1db4ff; color: #1db4ff; }
.level-FINISH { border-color:#3d46c7; color: #3d46c7; }
.level-CONFIRM { border-color:#007FA4; color: #007FA4; }

.level-ALARM:hover  { border-color:#ff9000; color:#ff9000;}
.level-DEMAND:hover  { border-color:#a162f7; color: #a162f7; }
.level-REPAIR:hover  { border-color:#1db4ff; color: #1db4ff; }
.level-FINISH:hover  { border-color:#3d46c7; color: #3d46c7; }
.level-CONFIRM:hover { border-color:#007FA4; color: #007FA4; }

#alarmList .level-ALARM,#alarmList .level-DEMAND,#alarmList .level-REPAIR,#alarmList .level-FINISH,#alarmList .level-CONFIRM {font-size: 13px;}

.radibox-LIGHTON { border-radius: 24px; display: inline-block; vertical-align: middle; padding: 0 12px; font-size: 14px; color: #007FA4; background: none; border: 1px solid #007FA4; height: 24px; line-height: 26px; text-align: center; transition: all 0.3s ease; }
.radibox-LIGHTOFF { border-radius: 24px; display: inline-block; vertical-align: middle; padding: 0 12px; font-size: 14px; color: #333333; background: none; border: 1px solid #333333; height: 24px; line-height: 26px; text-align: center; transition: all 0.3s ease; }

/* Element */
.flex { display: flex; justify-content: space-between; align-items: center; margin:0 -10px; }
.flex > div { padding:0 10px; }
.flex > div + div button { margin-left: 7px;}
.flex .inp-date-box {flex: 1 1 auto;}
.flex-inp { display: flex; margin:0 -5px; justify-content: space-between; align-items: center; }
.flex-inp > div { padding:0 5px; flex:1;}
.flex-inp .h5 { margin-bottom: 0; }

.inp-date-box { display: flex; justify-content: space-between; align-items: center; margin:0 -10px; }
.inp-date-box > div { padding:0 10px; flex: 1 1 auto; }
.inp-date-box .space{ padding:0;  flex:0 0 20px; text-align: center; }

.stepper-type1 { padding-right:22px; position: relative;}
.stepper-type1 .inp { width:100%; color: #a6b2c4;  }
.stepper-type1 button { position: absolute; right:0; width:22px; border: 1px solid #d2d8e1; border-left:0; background: #fff; height: 14px; }
.stepper-type1 button:after { content: ''; display: inline-block; vertical-align: top;border:4px solid transparent; border-bottom-color:#a6b2c4;  }
.stepper-type1 .plus { top:0; border-bottom: 0; border-radius:0 2px 0 0; }
.stepper-type1 .minus { bottom:0; border-radius:0 0 2px 0; }
.stepper-type1 .minus:after { margin-top:4px;border:4px solid transparent; border-top-color:#a6b2c4;  }

.stepper-type2 { padding:0 28px; position: relative;}
.stepper-type2 .inp{ width:100%; text-align: center; padding: 0; color: #a6b2c4; }
.stepper-type2 button { position: absolute; top:0; width:28px; height: 28px; text-align: center; background: #fff; border: 1px solid #d2d8e1; font-size:20px; color: #a6b2c4; }
.stepper-type2 .minus { left:0; border-right:0; border-radius:2px 0 0 2px; }
.stepper-type2 .plus { right:0; border-left:0; border-radius:0 2px 2px 0; }
.stepper-type2 button i { position: relative; top:-1px;}


/************************************************************************************************************************************************
	Login
************************************************************************************************************************************************/
.login-wrap { position: fixed; justify-content: center; left: 0; right:0; top:0; bottom:0; display: flex; align-items: center; background: url(/img/login/login_bg.png) no-repeat 50% 50%; background-size:cover; }
.login-wrap .foot { position: absolute;left: 0; right:0; bottom:30px; text-align: center; font-size:12px;color: #9E9E9E; font-weight: 300;}
.login-wrap .login { margin: 0 auto; width:360px; padding: 80px 50px 50px; text-align: center; }
.login-wrap .login h1 { margin-bottom: 50px;}
.login-wrap .login h1 strong { display: block; padding-top:13px; font-size:24px; color: #666666; font-weight: 700; }
.login-wrap .login .inp-box { margin-bottom: 15px; }
.login-wrap .login .inp-box .loginUser{ height: 46px; border: 1px solid #f3f3f3; background-position: 21px 50%; background-repeat: no-repeat;border: 0; outline:none; padding-left: 53px; font-size:14px; color: #000; border-radius:3px; transition: all 0.3s ease;  }
.login-wrap .login .inp-box .loginPwd{ height: 46px; border: 1px solid #f3f3f3; background-position: 21px 50%; background-repeat: no-repeat;border: 0; outline:none; padding-left: 53px; font-size:14px; color: #000; border-radius:3px; transition: all 0.3s ease;  }
.login-wrap .login .inp-box .inp-login { width:100%; height: 46px; background: #f3f3f3; border: 1px solid #f3f3f3; background-position: 21px 50%; background-repeat: no-repeat;border: 0; outline:none; padding-left: 53px; font-size:14px; color: #000; border-radius:3px; transition: all 0.3s ease; }
.login-wrap .login .inp-box .loginUser { position:absolute; background-image: url(/img/login/ico_user.svg);}
.login-wrap .login .inp-box .loginPwd { position:absolute; background-image: url(/img/login/ico_pw.svg);}
.login-wrap .login .inp-box .inp-login.danger { }
.login-wrap .login .inp-box .inp-login.danger { border:1px solid #f73859; color: #f73859; }
.login-wrap .login .inp-box .inp-login.danger::-webkit-input-placeholder { color: #f73859;}
.login-wrap .login .inp-box .inp-login.danger:-ms-input-placeholder { color: #f73859;}


.login-wrap .login .agree { overflow: hidden; padding-top:30px;  margin-bottom: 50px; }
.login-wrap .login .agree > div { text-align: center; }
.login-wrap .login .agree .btn-find { font-size:14px;color: #fff; display: inline-block; padding-left: 20px; background: url(/img/login/ico_search_s.svg) no-repeat 0 50%; font-weight: 200;}
.login-wrap .login .agree .remember-Id {font-size:14px;color: #fff; }
.login-wrap .login .btn-box .btn-login { width:100%; height: 46px; border-radius:3px; background: #007FA4; line-height: 44px; text-align: center; font-size:14px; color: #fff; margin-bottom: 15px; }
.login-wrap .login .btn-box .btn-login:hover  { width:100%; height: 46px; border-radius:3px; background: #3EAFD2; line-height: 44px; text-align: center; font-size:14px; color: #fff; margin-bottom: 15px; }
.login-wrap .login .btn-box .btn-login2 { width:100%; height: 46px; border-radius:3px; background: rgba(18, 18, 18, 0.3); border: 1px solid #007FA4; line-height: 44px; text-align: center; font-size:14px; color: #007FA4; font-weight: 600; }
.login-wrap .login .btn-box .btn-login2:hover { width:100%; height: 46px; border-radius:3px; background: rgba(18, 18, 18, 0.3); border: 1px solid #3EAFD2; line-height: 44px; text-align: center; font-size:14px; color: #3EAFD2; font-weight: 600; }
.login-wrap .login .alert-msg { text-align: center; font-size:11px; color: #f73859; margin-bottom: 15px; }
.login-wrap .login .alert-msg i { font-size:17px; position: relative; top:2px;  }
.login-wrap ::-webkit-input-placeholder { color: #9ea7b8;}
.login-wrap :-ms-input-placeholder { color: #9ea7b8;}

.login-wrap .login .login-copy {vertical-align: middle; font-size: 10px; color: #A6B2C4; text-align: center;} 

/************************************************************************************************************************************************
	Layout
************************************************************************************************************************************************/
body { background: #fff;} 
#wrap { min-height: 100vh; min-width: 1560px; padding:70px 20px 20px 20px; transition:all 0.5s ease; }
#wrap.bg-white { background: #fff; }
#wrap.dashboard-type1 { padding-left:50px; padding-right:0; padding-top:50px; background: #fff; padding-bottom: 0; }
#wrap.dashboard-type2{ padding-left:0; padding-right:0; padding-bottom: 0; padding-top:50px; background: #fff; }
header { position: fixed; left: 0; right:0; top:0; height: 50px; border-bottom: 1px solid #dcdcdc; background: #f9f9f9;  transition: all 0.5s ease; z-index:1000; }
header h1 { position: absolute; left: 20px; top:0; height: 60px; line-height: 58px; font-size:22px; color: #666666; font-weight: 700; padding-left:0px;  width: 100%;}   /* background: url(/img/common/top_logo.png) no-repeat 0 50%; padding-left:56px; */
header h1 img { border: 0 }
/** background: url(/img/common/top_logo.png) no-repeat 0 50%; **/
header .right { position: absolute; right:20px; top:0; line-height: 49px;  }
header .right span { display: inline-block; vertical-align: middle; color: #333333; font-size: small; }
header .right a { display: inline-block; vertical-align: middle; margin-left: 10px; height:49px; }
header .right .btn-dashboard { width:21px; text-indent: -9999px; background: url(/img/common/ico_dashboard.svg) no-repeat 50% 50%; }
header .right .btn-admin { width:20px; text-indent: -9999px; background: url(/img/common/ico_adm.svg) no-repeat 50% 50%; }
header .right .btn-logout { width:16px; text-indent: -9999px; background: url(/img/common/ico_logout.svg) no-repeat 50% 50%; }
header .right .btn-dashboard:hover {background-image: url(/img/common/ico_dashboard_hover.svg) }
header .right .btn-admin:hover {background-image: url(/img/common/ico_adm_hover.svg) }
header .right .btn-logout:hover {background-image: url(/img/common/ico_logout_hover.svg) }

header .type2 {width:100%;  height: 60px;  background-color:#FBFBFB; border-bottom: solid #D9D9D9 1px; box-shadow: 0 2px 4px 0 rgba(217, 217, 217, 0.35); }
header .type2 h1 { left: 0; width:100%;  left: 30px;}
header .type2 nav { display: block; margin: 0 auto; width: 60%;}
header .type2 nav > ul:after  {display: block; content: ''; clear: both; }
header .type2 nav > ul > li { float: left; }
header .type2 nav .btn-dep1 {  display: block; padding:0 33px; height: 60px; line-height: 58px; font-size:16px; color: #121212; position: relative; transition: all 0.5s ease; }
header .type2 nav .btn-dep1:before { content: ''; position: absolute;left: 18px; right:18px; bottom:0; height: 3px; background: #007FA4; opacity:0; transition: all 0.5s ease;  }
header .type2 nav > ul > li:hover .btn-dep1,
header .type2 nav > ul > li .btn-dep1.active { color: #007FA4; }
header .type2 nav > ul > li .btn-dep1.active:before, 
header .type2 nav > ul > li:hover .btn-dep1:before{ opacity:1; }
header .type2 nav > ul > li:hover .dep2 { display: block; }
header .type2 .dep2 { display: none; position: absolute; background: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); padding:12px 0 14px 0;  } /* height:150px;  */
header .type2 .dep2:after { display: block; content: ''; clear: both; }
header .type2 .dep2 ul { float:left; margin:0 auto; }
header .type2 .dep2 .menu2 { color: #121212; font-weight: 500; font-size: 14px; line-height: 26px; width:180px;} 
header .type2 .dep2 ul li { width:180px; /* padding-left: 15px; padding-right:30px; */}
header .type2 .dep2 ul li a { display: inline-block; font-size:14px; color: #9E9E9E; line-height: 24px; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; transition: all 0.5s ease; font-weight: 200;}  /*   margin-left: 10px;   */
header .type2 .dep2 ul li a:hover,
header .type2 .dep2 ul li a.active { color: #3EAFD2;}
header .type2 nav > ul > li > div > ul:after  {display: block; content: ''; clear: both; }
header .type2 nav > ul > li > div > ul > li { float: left; }
header .type2 nav > ul > li > div .btn-dep2 {  display: block;  line-height: 30px; font-size:14px; color: #121212; position: relative; transition: all 0.5s ease; }
header .type2 nav > ul > li > div .btn-dep2:before { content: ''; position: absolute;left: 18px; right:18px; bottom:0; height: 3px; opacity:0; transition: all 0.5s ease;  }
header .type2 nav > ul > li > div > ul > li:hover .btn-dep2,
header .type2 nav > ul > li > div > ul > li .btn-dep2.active { font-weight: 500; color: #007FA4; background: #f1f1f1; }
header .type2 nav > ul > li > div > ul > li .btn-dep2.active:before, 
header .type2 nav > ul > li > div > ul > li:hover .btn-dep2:before{ opacity:1; }
header .type2 nav > ul > li > div > ul > li:hover .dep3,
header .type2 nav > ul > li > div > ul > li:hover .dep3 ul { display: block; }
header .type2 .dep2 .dep3 { display: none; position: absolute; background: #fcfcfc; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); left:100%;  padding:12px 0 14px 0; transform: translate( 0px, -42px);}
header .type2 .dep2 .dep3:after { display: block; content: ''; clear: both; }
header .type2 .dep2 .dep3 ul { float:left; margin:0 auto; }
header .type2 .dep2 .dep3 .menu3 { color: #121212; font-weight: 500; font-size: 14px; line-height: 26px; width:180px; } 
header .type2 .dep2 .dep3 ul li {  width:180px; /*margin-left: 15px; padding-right:30px; */ }
header .type2 .dep2 .dep3 ul li a { display: inline-block; font-size:14px; color: #5f5f5f; line-height: 24px; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; transition: all 0.5s ease; font-weight: 200; } /* margin-left: 10px; */
header .type2 .dep2 .dep3 ul li a:hover,
header .type2 .dep2 .dep3 ul li a.active { font-weight: 500; color: #3EAFD2;}

aside { position: fixed; left: 0; top:50px; width:50px; background: #f9f9f9; border-right:1px solid #dcdcdc; bottom:0; transition: all 0.5s ease; z-index:100; }
aside nav > ul > li >  a { display: block; height: 50px; line-height: 49px; position: relative; transition: all 0.5s ease; background-position: 50% 50%; background-repeat: no-repeat; text-align: center; font-size:21px; color: #36557e;}
aside nav > ul > li >  a span { visibility: hidden; position:absolute ;left:38px; top:50%; margin-top:-14px; padding:0 17px; height:28px; line-height:27px; font-size:13px; color:#282e3d; background:rgba(184,198,219,0.8); border-radius:2px; white-space:nowrap; opacity:0; transition:all 0.3s ease; z-index:200; }
aside nav > ul > li >  a .nav-dashboard { display: inline-block; vertical-align: middle; background: url(/img/common/nav_dashboard_off.svg) no-repeat 0 0; width:18px; height: 18px; }
aside nav > ul > li >  a:hover .nav-dashboard { background-image: url(/img/common/nav_dashboard_on.svg) }

aside nav > ul > li >  a.m1 { background-image: url(/img/common/ico_menu_01.svg); }
aside nav > ul > li >  a.m2 { background-image: url(/img/common/ico_menu_02.svg); }
aside nav > ul > li >  a.m3 { background-image: url(/img/common/ico_menu_04.svg); }
aside nav > ul > li >  a.m4 { background-image: url(/img/common/ico_menu_03.svg); }
aside nav > ul > li >  a.m5 { background-image: url(/img/common/ico_menu_05.svg); }
aside nav > ul > li >  a.m6 { background-image: url(/img/common/ico_menu_06.svg); }
aside nav > ul > li >  a.m7 { background-image: url(/img/common/ico_menu_07.svg); }

aside nav > ul > li >  a:hover,
aside nav > ul > li >  a.active { background-color:#007FA4;  color: #fff !important; }
aside nav > ul > li >  a:hover span { opacity:1; visibility: visible }

aside nav > ul > li >  a.active,
aside nav > ul > li >  a.m1:hover,
aside nav > ul > li >  a.m1.active { background-image: url(/img/common/ico_menu_01_sel.svg) !important; }
aside nav > ul > li >  a.m2:hover,
aside nav > ul > li >  a.m2.active { background-image: url(/img/common/ico_menu_02_sel.svg) !important; }
aside nav > ul > li >  a.m3:hover,
aside nav > ul > li >  a.m3.active { background-image: url(/img/common/ico_menu_04_sel.svg) !important; }
aside nav > ul > li >  a.m4:hover,
aside nav > ul > li >  a.m4.active { background-image: url(/img/common/ico_menu_03_sel.svg) !important; }
aside nav > ul > li >  a.m5:hover,
aside nav > ul > li >  a.m5.active { background-image: url(/img/common/ico_menu_05_sel.svg) !important; }
aside nav > ul > li >  a.m6:hover,
aside nav > ul > li >  a.m6.active { background-image: url(/img/common/ico_menu_06_sel.svg) !important; }
aside nav > ul > li >  a.m7:hover,
aside nav > ul > li >  a.m7.active { background-image: url(/img/common/ico_menu_07_sel.svg) !important; }
aside nav .flip > span { display: none; }

aside nav .dep2 { display:none; position:fixed; left:49px; top:50px; bottom:0; width:165px; background:#fff; box-shadow: 3px 0 3px 0 rgba(0, 0, 0, 0.16); z-index:20; }
aside nav .dep2 .tit { padding:13px 16px; font-size:16px; line-height:1.3; color:#5c718e; position: relative; margin-bottom: 6px; }
aside nav .dep2 .tit:before { content: ''; position: absolute; left: 10px; right:10px; bottom:0; height: 1px; background: #d2d8e1; }
aside nav .dep2 .btn-dep2 { display:block; font-size:14px; line-height: 36px; color:#5c718e; transition:all 0.3s ease; padding-left: 16px; }
aside nav .dep2 .btn-dep2.active,
aside nav .dep2 .btn-dep2:hover { color:#007FA4;  }
aside nav > ul > li:hover .dep2 { display:block; }


aside .logo { position:absolute ;left:0; right:0; bottom:20px; text-align:center; }
aside .logo p { display:none; font-size:10px; color:#97b0d3; }


/************************************************************************************************************************************************
	Common
************************************************************************************************************************************************/
/* Tabs */
.tabs1 { margin-bottom:-1px; position:relative; z-index:2; }
.tabs1 ul:after { display:block; content:''; clear:both; }
.tabs1 ul li { float:left; margin-right:2px;  }
.tabs1 ul li a { display:block; min-width:110px; padding:0 20px; height:40px; line-height:38px; color:#425776;  border:1px solid #333333;  background:#f9f9f9; position:relative;   font-size:14px ; text-align:center;}
.tabs1 ul li a:before { content:''; position:absolute; left:-1px; right:-1px; top:-1px; height:2px; background:#007FA4; opacity:0; transition:all 0.5s ease; }
.tabs1 ul li a em { display: inline-block; vertical-align: middle; width:18px; height:18px; border-radius:100%; text-align: center; line-height: 17px; font-size:11px; color: #fff; background: #007aff; margin:-2px 0 0 5px; }
.tabs1 ul li.active a { border-bottom:0; background: #26add5; color:#f9f9f9;}
.tabs1 ul li.active a:before { opacity:1; }
.tabs1 .right { position: absolute; right:0; top:0; }

.tabs2 { margin-bottom:-1px; position:relative; z-index:2; }
.tabs2 ul:after { display:block; content:''; clear:both; }
.tabs2 ul {}
.tabs2 ul li { float:left; margin-right:-1px;  }
.tabs2 ul li a { display:block; min-width:88px; padding:0 10px; height:36px; line-height:34px; color:#425776; border:1px solid #333333; border-bottom:0;  background:#f2f4f7; position:relative; font-size:14px; text-align:center; }
.tabs2 ul li a:before { content:''; position:absolute; left:-1px; right:-1px; top:-1px; height:2px; background:#007FA4; opacity:0; transition:all 0.5s ease; }
.tabs2 ul li.active a { color:#fff; background:#007FA4; border-color:#007FA4;  }
.tabs2 ul li:first-child a { border-radius:2px 0 0 0;}
.tabs2 ul li:last-child a { border-radius:0 2px 0 0;}
.tabs2 .right{  position: absolute; right:0; top:0; }
.tabs2 .right a { margin-left: 6px; }

.tabs3 { margin-bottom:-1px; position:relative; z-index:2; }
.tabs3 ul:after { display:block; content:''; clear:both; }
.tabs3 ul {}
.tabs3 ul li { float:left; margin-right:-1px;  }
.tabs3 ul li a { display:block; min-width:88px; padding:0 10px; height:36px; line-height:34px; color:#425776; border:1px solid #333333; border-bottom:0;  background:#ffffff; position:relative; font-size:14px; text-align:center; }
.tabs3 ul li a:before { content:''; position:absolute; left:-1px; right:-1px; top:-1px; height:2px; background:#007FA4; opacity:0; transition:all 0.5s ease; }
.tabs3 ul li.active a { color:#fff; background:#007FA4; border-color:#007FA4;  }
.tabs3 ul li:first-child a { border-radius:2px 0 0 0;}
.tabs3 ul li:last-child a { border-radius:0 2px 0 0;}
.tabs3 .right{  position: absolute; right:0; top:0; }
.tabs3 .right a { margin-left: 6px; }

.tab-cont {  }
.tab-cont .cont-box .cont { border: 1px solid #333333; border-top:2px solid #146ec9; margin-top:1px; padding:20px;  }
.tab-cont .cont-box .modal-foot { padding-top:30px; padding-bottom:4px; }
.tab-cont .cont-box .cont.scroll-type { height: 620px; overflow: auto; }
.modal .tabs2 li a { min-width:170px; }


.tab-wrap .tabs2 { margin-bottom: 0; }
.tab-wrap .tabs2 ul{ display: flex; justify-content: space-between; }
.tab-wrap .tabs2 ul li { flex: 50%; margin-right:0; }
.tab-wrap .conts .search-type2 { border: 1px solid #333333; border-top:2px solid #007FA4; padding:20px; height: 370px;margin-bottom: 20px; }
.tab-wrap .conts > div { display: none; }
.tab-wrap .conts > div .action:after { display: block; }
.tab-wrap .conts > div:first-child { display: block; }
.tab-wrap .conts .modal-foot { padding-bottom:0; }

/* 컨텐츠  > 상단 검색 조회 */
.search-type1 { position:relative; border:1px solid #dce2e6; background:#fff; border-top:2px solid #007FA4; padding: 11px 100px 11px 15px;  font-size:0; margin-bottom:40px; z-index:3; }
.search-type1 .form-area dl { display:inline-block; vertical-align:middle; margin-right:20px;  }
.search-type1 .form-area dl dt { display:inline-block; vertical-align:middle; font-size:14px; color:#165493; margin-right:20px; }
.search-type1 .form-area dl dd { display:inline-block; vertical-align:middle;  }
.search-type1 .form-area dl dd select,
.search-type1 .form-area dl dd input { margin-right:10px;}
.search-type1 .table-area { padding-right:113px; padding-left:0;  }
.search-type1 .table-area table { width:100%; border-collapse:collapse; }
.search-type1 .table-area table tbody th { font-size:14px ;color:#425776;  font-weight:400; text-align:left; padding-left:5px; min-width: 100px; height: 42px;}
.search-type1 .table-area table tbody td { padding:7px; }
.search-type1 .table-area table tbody td + th { padding-left: 17px;}
.search-type1 .table-area.hidden { display:none;overflow: visible; }

.search-type1 .btn-search { position:absolute; right:0; top:0; width:100px; height:100%; text-align:center; font-size:16px; color:#007FA4; letter-spacing:-0.5px; outline:none; border:0; background:none;  border-left:1px solid #dce2e6; }
.search-type1 .btn-search:before{ content:''; display:inline-block; vertical-align:middle; background:url(/img/common/ico_search.svg) no-repeat 0 0; width:14px; height:14px; margin:-2px 5px 0 0; }
.search-type1 .btn-flip { position: absolute; left:50%; width:94px; height: 14px;bottom:-14px;  margin-left:-47px; border-radius:0 0 5px 5px; background: #f9f9f9; border: 1px solid #dcdcdc;  text-indent: -9999px; transition:all 0.5s ease; }
.search-type1 .btn-flip:before { content: ''; position: absolute; left: 50%; top:1px; width:5px; height: 5px; border-left: 1px solid #333333; border-bottom: 1px solid #333333; transform: rotate(-45deg); transition: all 0.5s ease; margin-left: -2px;}
.search-type1 .btn-flip.active:before { transform: rotate(-225deg); top:4px;}
.search-type1.border-gray { border-top-color:#333333; }

.search-type1 .btn-reset { position:absolute; right:100px; top:0; width:100px; height:100%; text-align:center; font-size:16px; color:#425776; letter-spacing:-0.5px; outline:none; border:0; background:none;  border-left:1px solid #dce2e6; }
.search-type1 .btn-reset:before { content:''; display:inline-block; vertical-align:middle; background:url(/img/common/ico_refresh.svg) no-repeat 0 0; width:14px; height:14px; margin:-2px 5px 0 0; }

.search-type1 .nowrap { display: flex; align-items: center; }
.search-type1 .nowrap .tit { padding-right:15px; margin-right:15px; border-right:1px solid #eaeaea; }
.search-type1 .nowrap .times { display: flex; align-items: center;  }
.search-type1 .nowrap .times span { font-size:14px; color: #425776; margin-right:15px;  }
.search-type1 .nowrap .times em { font-size:14px; color: #333333; margin:0 16px 0 10px;}

/* 검색 폼 스타일 */
.search-type2 { margin-bottom: 20px; clear: both; }
.search-type2 dl dt { font-size:14px; color: #425776; font-weight: 500; margin-bottom: 6px; padding-left: 1px; }
.search-type2 dl { margin-bottom: 18px; }
.search-type2 dl dd { }
.search-type2 .half { display: flex; justify-content: space-between; margin:0 -10px;  }
.search-type2 .half dl { flex: 1 1 50%; padding:0 10px; }
.search-type2 .files { text-align: center; line-height:1.4; padding:12px 0; font-size:14px; color: #90a1bf; background: #f3f5f7; border-radius:2px; }
.search-type2 .files { padding:15px 12px; }
.search-type2 .files > div + div { margin-top:7px; }
.search-type2 .files a { font-size:13px;  color: #425776; }
.search-type2 .files a span { color: #a7b5cc; margin-left: 5px; font-weight: 100;}
.search-type2 .files.list { text-align: left; background: none;border-bottom: 1px solid #d2d8e1;  }
.search-type2 .files.list div { position: relative; }
.search-type2 .files.list div .del { position: absolute; right:0; top:0; width:28px; height: 28px; border: 0; outline:none; background: url(/img/common/ico_file_del.svg) no-repeat 50% 50%; }
.search-type2 .col2 { display: flex; justify-content: space-between; margin:0 -10px;  }
.search-type2 .col2 dl { flex:1 1 50%; padding:0 10px;}
.search-type2 .col3 { display: flex; justify-content: space-between; margin:0 -10px;  }
.search-type2 .col3 dl { flex:1 1 33.3333%; padding:0 10px;}
.search-type2 .col4 { display: flex; justify-content: space-between; margin:0 -10px;  }
.search-type2 .col4 dl { flex:1 1 25%; padding:0 10px;}
.search-type2 .col2 dl .col2{ display: flex; justify-content: space-between; margin:0 -10px;  }
.search-type2 .col2 dl .col2 dl{ flex:1 1 50%; padding:0 10px;}

/* Table-head */
.table-head { overflow:hidden; margin-bottom:8px;}
.table-head .fl { float:left; }
.table-head .fr { float:right; }
.table-head .fr a { margin-left: 7px; }

/* Table */
.grid-type1 { }
.grid-type1 table { width:100%; border-collapse:collapse; border-top:2px solid #007FA4;  }
.grid-type1 table thead th { font-size:14px; color:#333333; padding:13px 14px; background:#EAF5F8; border-bottom:1px solid #eaeaea; font-weight: 400; text-align: center;}
.grid-type1 table thead th + th { border-left: 1px solid #eaeaea; }
.grid-type1 table tbody td { font-size:14px; color:#666666; padding:13px 14px; background:#fff; border-bottom:1px solid #eaeaea; transition:all 0.3s ease; height: 48px; }
.grid-type1 table tbody td a { color: #666666; }
.grid-type1 table tbody td + td { border-left: 1px solid #eaeaea; }
.grid-type1 table tbody tr:nth-child(even) td { background:#fdfdfe; }
.grid-type1 table tbody tr:last-child td { border-bottom-color:#797f96; }

.grid-type1 table tbody tr:hover td { background:#F9F9FA; }
.grid-type1 table tbody tr.active { border: 2px solid #007FA4;  }
.grid-type1 table tbody tr.active td { background: #e6efff; }
.grid-type1.border-color1 table { border-color:#797f96; }
.grid-type1.border-color2 table { border-color:#DC0800; }
.grid-type1.small-type table thead th { padding:10px ;}
.grid-type1.small-type table tbody td { padding-top:7px; padding-bottom: 7px; height: 35px;}


.table-type2 {}
.table-type2 table { width:100%; border-collapse:collapse;  }
.table-type2 table tbody th { font-size:11px; color:#165493; font-weight:400; padding:0 5px 0 20px; text-align:left;  }
.table-type2 table tbody td { font-size:11px; color:#222; padding:6px 0;  }
.table-type2 table tbody td + th { padding-left:70px; }

.form-table {}
.form-table table { width:100%; border-collapse: collapse; }
.form-table table tbody th { font-size:14px; text-align: left; font-weight: 500; color: #425776; vertical-align: top; padding-top:6px; }
.form-table table tbody td { padding:6px 0; }

/* Paging */
.pagenate { text-align:center ; font-size:0; margin:20px 0; }
.pagenate a { display:inline-block; vertical-align:middle; font-size:14px; color:#333333; padding-left:5px; padding-right:5px; height:30px; line-height:30px; background-position:50% 50%; background-repeat:no-repeat; }
.pagenate a.active { color:#007FA4; font-weight:600; }
.pagenate a span { position: relative; top:-2px;}
.pagenate a span:before {content: ''; display: inline-block; vertical-align: middle; width:6px; height: 6px; border-left:1px solid #333333; border-bottom: 1px solid #333333; transform: rotate(-315deg); margin-right:-3px;}
.pagenate a span:after {content: ''; display: inline-block; vertical-align: middle; width:6px; height: 6px; border-left:1px solid #333333; border-bottom: 1px solid #333333; transform: rotate(-315deg);}
.pagenate a.prev span:before { display: none; }
.pagenate a.next { transform:scaleX(-1); }
.pagenate a.next span:before { display: none; }
.pagenate a.last { transform:scaleX(-1); }
.pagenate a:hover { color: #007FA4; }
.pagenate a:hover span:after,
.pagenate a:hover span:before{ border-color:#007FA4; }
/*
.pagenate a.first { background-image:url(/img/common/ico_paging_first.png); }
.pagenate a.last { background-image:url(/img/common/ico_paging_first.png); transform:scaleX(-1); }
.pagenate a.prev{ background-image:url(/img/common/ico_paging_prev.png); }
.pagenate a.next { background-image:url(/img/common/ico_paging_prev.png); transform:scaleX(-1); }
.pagenate a.first,.pagenate a.prev,.pagenate a.next,.pagenate a.last { font-size:0;color:rgba(0,0,0,0); }
*/

/* 공지사항 */
.notice-list {}
.notice-list ul li { margin-bottom: 12px; border: 1px solid #d2d8e1; transition: all 0.3s ease;background: #fff; }
.notice-list ul li .q { display: block; padding: 15px 48px 15px 20px; font-size:14px; color: #425776; position: relative;}
.notice-list ul li .q:before { content: ''; position: absolute; right:19px; top:19px; width:7px; height: 7px; border-left: 2px solid #333333; border-bottom: 2px solid #333333; transform: rotate(-45deg); transition: all 0.3s ease;}
.notice-list ul li .q .date { position: absolute; right:48px; top:15px; font-size:14px; color: #606e82; }
.notice-list ul li .a { display: none;padding:15px; border-top:1px solid #d2d8e1; }
.notice-list ul li .a .text-box { padding:15px; font-size:14px; color: #666666; line-height: 1.7; background: #f3f5f7;  }
.notice-list ul li .a .btn-box { padding-top:15px; display: flex; justify-content: space-between; align-items: flex-end; }
.notice-list ul li .a .btn-box .file > div + div { margin-top:5px; }
.notice-list ul li .a .btn-box .file i { vertical-align: middle; margin-top:0; }
.notice-list ul li .a .btn-box .file a { display: inline-block; vertical-align: middle; font-size:13px; color: #425776;  }
.notice-list ul li .a .btn-box .file a span { color: #a7b5cc; margin-left: 4px; font-weight: 100;}
.notice-list ul li .a .btn-box .btns a { margin-left: 7px; }
.notice-list ul li.active { border-color:#007FA4 !important; }
.notice-list ul li.active .q:before { transform: rotate(-225deg); top:22px;}

.write-box { position: absolute; left: 20px; top:20px; right:20px; bottom:20px;  border: 1px solid #d2d8e1; background: #fff; }
.write-box .head { border-bottom: 1px solid #d2d8e1; }
.write-box .head .search-type1 { border:0; padding:11px 0 11px 15px;margin-bottom: 0;}
.write-box .head .inp-write { width:100%; height: 50px; padding-left:15px; border: 0; font-size:14px; color: #000; background: none; outline:none; }
.write-box .body { padding:15px; position: absolute;left: 0; top:64px; right:0; bottom:120px;  }
.write-box .body textarea { width:100%; height: 100%; font-size:14px; color: #000; line-height: 1.5; padding:15px; border: 1px solid #d2d8e1; box-sizing: border-box;}
.write-box .foot { position: absolute; left: 15px; right:15px; bottom:20px; }
.write-box .foot .text-right button,
.write-box .foot .text-right a { margin-left: 7px; }
.write-box .foot .files { text-align: center; line-height:1.4; padding:12px 0; font-size:14px; color: #90a1bf; background: #f3f5f7; border-radius:2px; margin-bottom: 20px; }

.layer-box { position: fixed;left: 0; right:0; bottom:0; top:0; background:rgba(0,0,0,0.55); z-index:9999;  display: flex; align-items: center; }
.layer-box .layer { width:390px; margin:0 auto; background: #fff; border-radius:3px; overflow: hidden; }
.layer-box .layer .head { height: 90px; background: #007FA4 url(/img/common/ico_clock.svg) no-repeat 50% 26px; }
.layer-box .layer .body { padding: 30px 0; text-align: center; font-size:16px; color: #425776; }
.layer-box .layer .body strong { font-weight: 600; }
.layer-box .layer .foot { padding-bottom: 30px; text-align: center;  }
.layer-box .layer .foot button { margin:0 8px; width:100px; }

.map-wrap { position: fixed; left: 50px; top:50px; right:0; bottom:0; }
.map-wrap .map { width:100%; height: 100%; }
.map-wrap .search-type1 { position: absolute; left: 20px; top:20px; z-index:10; background: rgba(255,255,255,0.9); box-shadow:0 3px 6px 0 rgba(0, 0, 0, 0.16); border: 1px solid #d2d8e1;  padding:3px 5px; border-radius: 5px;}
.map-wrap .search-type1 .table-area { padding-right:0; }
.map-wrap .search-type1 .table-area table tbody th { min-width:unset; }
.map-wrap .search-type1 .table-area table tbody td { padding:7px 3px;}
.aside-info { position: fixed; transform:translateX(110%); right:0; top:50px; bottom:0; border-radius:5px 0 0 5px; box-shadow:-3px 3px 3px 0 rgba(0, 0, 0, 0.16); background: #fff; z-index:100; width:520px; padding: 20px;  transition:all 0.5s ease;}
.aside-info .btn-close { position: absolute; right:0; top:0; width:38px; height: 38px; background: url(/img/common/ico_map_close.svg) no-repeat 0 0; }
.aside-info .tit { font-size:18px; color: #007FA4; font-weight: 500; margin-bottom: 22px; }
.aside-info .tit a { margin:-3px 0 0 5px; }
.aside-info .grid-type1 table tbody td { padding:5px; height: 35px;}
.aside-info .grid-type1 table thead th { padding:5px 0; height: 35px; }

.map-wrap.aside-on .aside-info { transform:translateX(0); }
.map-wrap.aside-on .bottom-info { right:540px; }

.trouble-status { display: flex; justify-content: space-between; position: relative; margin:0 0 20px;  }
.trouble-status div { width:66px; padding-top:66px; text-align: center; background-position: 50% 15px; background-repeat: no-repeat; font-size:14px; color: #425776; line-height: 1; position: relative; }
.trouble-status:before{ content: ''; position: absolute;left: 40px; top:33px; right:40px; height: 2px; background: #d9d9d9;  }
.trouble-status div.s1 { background-image: url(/img/common/ico_step_01.svg); }
.trouble-status div.s2 { background-image: url(/img/common/ico_step_02.svg); }
.trouble-status div.s3 { background-image: url(/img/common/ico_step_03.svg); }
.trouble-status div.s4 { background-image: url(/img/common/ico_step_04.svg); }
.trouble-status div.s5 { background-image: url(/img/common/ico_step_05.svg); }
.trouble-status div.s1-on { background-image: url(/img/common/ico_step_01_on.gif); background-position: 50% 0; }
.trouble-status div.s2-on { background-image: url(/img/common/ico_step_02_on.gif); background-position: 50% 0; }
.trouble-status div.s3-on { background-image: url(/img/common/ico_step_03_on.gif); background-position: 50% 0; }
.trouble-status div.s4-on { background-image: url(/img/common/ico_step_04_on.gif); background-position: 50% 0; }
.trouble-status div.s5-on { background-image: url(/img/common/ico_step_05_on.gif); background-position: 50% 0; }
.trouble-status div.off:before { content: ''; position: absolute;left: 50%; top:15px; width:36px;height: 36px; border-radius:100%; margin-left: -18px; background: rgba(255,255,255,0.7);}

.bottom-info { position: fixed; left: 70px; bottom:0; right:20px; background: #fff; border-radius:5px 5px 0 0; box-shadow: 0 -3px 3px 0 rgba(0, 0, 0, 0.16); z-index:100; padding:12px 20px; transition: all 0.5s ease; }
.bottom-info .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

.bottom-info .head .right {  }
.bottom-info .head .right .stat1 { display: inline-block; vertical-align: middle; padding:0 10px 0 33px; border: 1px solid #ffddb2; border-radius:28px; height: 28px; line-height: 24px; background: url(/img/common/ico_stat1.svg) no-repeat 0 0;}
.bottom-info .head .right .stat1 span { font-size:14px; color: #ff9000; margin-right:23px; } 
.bottom-info .head .right .stat1 strong { font-size:16px; color: #666666; } 
.bottom-info .head .right .stat2 { display: inline-block; vertical-align: middle; padding:0 10px 0 33px; border: 1px solid #bae8ff; border-radius:28px; height: 28px; line-height: 24px; background: url(/img/common/ico_stat2.svg) no-repeat 0 0; margin:0 8px;}
.bottom-info .head .right .stat2 span { font-size:14px; color: #1db4ff; margin-right:23px; } 
.bottom-info .head .right .stat2 strong { font-size:16px; color: #666666; } 
.bottom-info .head .right .btns { display: inline-block; vertical-align: middle; font-size:0; border: 1px solid #d2d8e1; border-radius:3px;  }
.bottom-info .head .right .btns button { display: inline-block; vertical-align: middle; border: 0; height: 26px; width:27px; position: relative; background: none;}
.bottom-info .head .right .btns button + button { border-left: 1px solid #d2d8e1; }
.bottom-info .head .right .btns button.type1:before { content: ''; position: absolute;left: 6px; bottom:6px; right:6px; height: 2px; background: #425776; }
.bottom-info .head .right .btns button.type2:before { content: ''; position: absolute;left: 6px; bottom:6px; right:6px; height: 6px; border: 1px solid #425776; }
.bottom-info .head .right .btns button.type3:before { content: ''; position: absolute;left: 6px; bottom:6px; right:6px; height: 12px; border: 1px solid #425776; }
.bottom-info .head .right .btns button.active { background-color:#d2d8e1; }

.status-info { position: absolute; left: 20px; top:80px; background:rgba(255,255,255,0.8); border: 1px solid #d2d8e1; box-shadow:0 3px 6px 0 rgba(0, 0, 0, 0.16); width:254px; z-index:200; padding-top:15px; border-radius: 5px;}
.status-info .btn-close { position:absolute; right:0; top:0; width:28px; height: 28px; background: url(/img/common/ico_map_close.svg) no-repeat 50% 50%; }
.status-info .graph-box { text-align: center; }
.status-info .graph-table {}
.status-info .graph-table table { width:100%; border-collapse: collapse; border-top:1px solid #d5dbe3; }
.status-info .graph-table table thead th div { height: 22px; font-size:12px; position: relative; color:#333333; position: relative; line-height: 22px;  font-weight: 400; text-align: center; }
.status-info .graph-table table thead th div:before { content: ''; position: absolute;left: 7px; right:7px; bottom:0; height: 1px; background: #d5dbe3; opacity:0.5; }
.status-info .graph-table table tbody td { font-size:18px; font-weight: 600; text-align: right; padding:5px 10px; line-height: 1; }
.status-info .graph-table table tbody td:first-child { text-align: left; font-size:13px; color: #282e3d; opacity:0.7; }
.status-info .graph-table table tbody td .blue1 { color: #1889fe;}
.status-info .graph-table table tbody td .blue2 { color: #10bbd8;}
.status-info .graph-table table tbody td .red { color: #ed5f5f;}


.marker1 { z-index:100; width:24px; }
.marker1 > img { transform:scale(0.65);}
.marker1.active > img { transform:scale(1) !important;}
.marker1.disabled > img { opacity:0.3; }

.marker1 > img.power-on { transform:scale(1);}
.marker1.active > img.power-on { transform:scale(1.2) !important;}
.marker1.disabled > img.power-on { opacity:0.3; }

.marker-txt1 { position: absolute; background: url(/img/common/pin1.svg) no-repeat 0 0; width:130px; height: 45px; z-index:100; padding:0 7px 0 35px; text-align: center; }
.marker-txt1 p  {font-size:17px; color: #666666; font-weight: 700; line-height: 36px; letter-spacing: -1px; }
.marker-txt2 { position: absolute; background: url(/img/common/pin2.svg) no-repeat 0 0; width:130px; height: 45px; z-index:100; padding:0 7px 0 35px; text-align: center; }
.marker-txt2 p  {font-size:17px; color: #666666; font-weight: 700; line-height: 36px; letter-spacing: -1px; }

.marker-txt3 { position: absolute; background: url(/img/common/pin3.svg) no-repeat 0 0; width:176px; height: 44px; z-index:100; padding:0 7px 0 30px;  font-size:0; }
.marker-txt3 p { display: inline-block; vertical-align: middle; width:58px; margin-right:21px;  font-size:16px; color: #666666; font-weight: 600; text-align: center; line-height: 36px; }
.marker-txt3 p:nth-child(2) { margin-right:0; }

.marker-txt4 { position: absolute; background: url(/img/common/pin4.svg) no-repeat 0 0; width:176px; height: 44px; z-index:100; padding:0 7px 0 30px;  font-size:0; }
.marker-txt4 p { display: inline-block; vertical-align: middle; width:58px; margin-right:21px;  font-size:16px; color: #666666; font-weight: 600; text-align: center; line-height: 36px; }
.marker-txt4 p:nth-child(2) { margin-right:0; }

::-webkit-scrollbar { width: 10px; height: 10px;} 
::-webkit-scrollbar-thumb {  background-color: #333333;  border-radius: 10px;  }
::-webkit-scrollbar-track { background-color: #dce1e8;  border-radius: 10px; }

.marker-layer { position: absolute; /* left: 1px; top:290px; */ width:304px; border: 2px solid #007FA4; border-radius:8px; background: rgba(255,255,255,0.65); padding:5px 12px; margin-left: -152px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);}
.marker-layer:before { content: ''; position: absolute;left: 50%; margin-left:-8px;  top:-10px; width:0; height: 0; border-left: 7px solid transparent; border-right:7px solid transparent; border-bottom: 10px solid #007FA4; }
.marker-layer .head { display:flex; justify-content: space-between; align-items:center; margin-bottom:5px;}
.marker-layer .head .tit { font-size:14px; color:#666666;  font-weight:600; }
.marker-layer .form-table table th { vertical-align: middle; }
.marker-layer.none-type { width:200px; margin-left:-100px; }
.marker-layer.none-type .txt { text-align:center; font-size:14px;color:#425776; }


 
.group-mng { white-space: nowrap; overflow: auto; font-size:0;padding-top:4px;  margin-right:-20; padding-bottom: 20px;  margin-bottom: 30px; }             
.group-mng .add { position: relative; right: 0px;display: inline-block; vertical-align: middle; width:230px; height: 180px;  border: 1px solid rgba(119, 131, 149, 0.4);; background: #fff; border-radius:8px; box-shadow:0 3px 10px 0 rgba(0, 0, 0, 0.08); margin-right:20px; font-size:18px; color: #333333; } 
.group-mng .add.type2 { height:120px; }
.group-mng .item { cursor:pointer; display: inline-block; vertical-align: middle; width:230px; padding:48px 20px 20px 20px; border: 1px solid rgba(119, 131, 149, 0.4);; background: #fff; border-radius:8px; position: relative; box-shadow:0 3px 10px 0 rgba(0, 0, 0, 0.08); margin-right:20px; }
.group-mng .item .tit { position: absolute;left: 20px; right:20px; top:-4px; height: 40px; line-height: 39px; text-align: center; background: #333333; font-size:18px; color: #fff; border-radius:2px; box-shadow:0 3px 10px 0 rgba(0, 0, 0, 0.08);text-overflow: ellipsis;overflow: hidden; }
.group-mng .item .info {} 
.group-mng .item .info dl + dl { margin-top:10px; }
.group-mng .item .info dl:after { display: block; content: ''; clear: both; }
.group-mng .item .info dl dt { float:left; padding-left: 63px; padding-top:6px; position: relative; height: 50px; font-size:16px; line-height: 1; color: #425776; text-align: center; }
.group-mng .item .info dl dt:before { content: ''; position: absolute;left: 0; top:0; width:50px; height: 50px; border-radius:100%; background: #ebf2ff url(/img/common/ico_pin1.svg) no-repeat 50% 50%; }
.group-mng .item .info dl.ic2  dt:before { background-image: url(/img/common/ico_pin2.svg); }
.group-mng .item .info dl dd { float:right; width:80px; text-align: right; font-size:24px; color: #425776; font-weight: 600; line-height: 50px; }
.group-mng .item.active { border-color:#007FA4; }
.group-mng .item.active .tit { background: #007FA4; }


.group-mng::-webkit-scrollbar { height: 8px;}

.group-flex { display: flex; justify-content: space-between; }
.group-flex > div { flex: 1;; }
.group-flex .control { flex:0 0 70px; display: flex; align-items: center;  flex-wrap:wrap; text-align:center; align-content: center; }
.group-flex .control div{width:100%;  display: block; margin-bottom: 24px; }
.group-flex .control {  }

.controller-box h3 { font-size:14px; color: #425776; margin-bottom: 7px; }
.controller-box { display: flex; justify-content: space-between; }
.controller-box > div { flex: 1;; }
.controller-box .control { flex:0 0 70px; display: flex; align-items: center;  flex-wrap:wrap; text-align:center; align-content: center; }
.controller-box .control div{width:100%;  display: block; margin-bottom: 24px; }
.controller-box .control {  }
.controller-box .list { height: 440px;  border: 1px solid #d2d8e1; padding:10px;  }
.controller-box .list ul li {margin-bottom: 5px;  }
.controller-box .list ul li a { display: block; font-size:14px; color: #a6b2c4; line-height: 26px; transition: all 0.5s ease;}
.controller-box .list ul li a:hover,
.controller-box .list ul li a.active { color: #007FA4; }


.controller-wrap { padding-left: 252px;  }
.aside-controller { position: fixed; left: 50px; top:50px; bottom:0; width:252px; border-right:1px solid #d2d8e1; background: #fff;   overflow: auto; } 
.aside-controller section { padding:15px 20px 20px; }
.aside-controller section  + section { border-top:1px solid #d2d8e1; }
.aside-controller section .h2 { font-size:18px; color: #007FA4; margin-bottom: 18px; }
.aside-controller section .h2:before { background: #007FA4; width:4px; height: 20px; top:0; }
.aside-controller section .h3 { font-size:14px; color: #425776;font-weight: 500; padding-left: 10px; position: relative; margin-bottom: 13px; }
.aside-controller section .h3 .right { position: absolute; right:0; bottom:0; }
.aside-controller section .h3 .right a { font-size:12px; color: #007FA4; font-weight: 400; }
.aside-controller section .h3:before { content: ''; position: absolute;left: 0; top:50%; margin-top:-2px; width:4px; height: 4px; border-radius:100%; background: #425776; }
.aside-controller section .srch { position: relative}
.aside-controller section .srch .inp { padding-right:30px; }
.aside-controller section .srch .btn-srch { position: absolute; right:0; top:0; border: 0; background: url(/img/common/ico_search2.svg) no-repeat 50% 50%; width:28px; height: 28px; ;}
.aside-controller section .checks:after  { display: block; content: ''; clear: both; }
.aside-controller section .checks  { display: flex; justify-content: space-between; }
.aside-controller section .checks label { flex:1; }
.aside-controller section .checks.col3 label { flex:1 0 auto; }
.aside-controller section .checks + .h3 { margin-top:20px; }
.aside-controller section ul li + li { margin-top:4px; }
.aside-controller section ul li .level  {font-size:12px; }

.control-list { }
.control-list .head:after  {display: block; content: ''; clear: both; }
.control-list .head  { display: flex; justify-content: space-between; }
.control-list .head li {  line-height: 60px; font-size:14px; text-align: center; color: #425776; }
.control-list .head li:nth-child(1) { width:15%; }
.control-list .head li:nth-child(2) { width:15%; }
.control-list .head li:nth-child(3) { width:23%; }
.control-list .head li:nth-child(4) { width:14%; }
.control-list .head li:nth-child(5) { width:12%; }
.control-list .head li:nth-child(6) { width:21%; }

.control-list .body .item { margin-bottom: 10px; }
.control-list .body .item ul { display: flex; justify-content: space-between; padding: 13px 0; border-radius:5px; border: 1px solid #d2d8e1; align-items: center; position: relative;}
.control-list .body .item li { font-size:14px; text-align: center; color: #606e82; }
.control-list .body .item li img { border-radius:100%; }
.control-list .body .item li:nth-child(1) { width:15%; text-align: left; padding-left: 20px;}
.control-list .body .item li:nth-child(2) { width:15%; }
.control-list .body .item li:nth-child(3) { width:23%; }
.control-list .body .item li:nth-child(4) { width:14%; }
.control-list .body .item li:nth-child(5) { width:12%; }
.control-list .body .item li:nth-child(6) { width:21%; }
.control-list .body .item .btn-modify { position: absolute; right:15px; top:50%; margin-top:-8px; }

.control-list .body .item .cr { display: inline-block;vertical-align: middle; width:28px; height: 28px; border-radius:100%; background: #dc0800; text-align: center; font-style: normal; line-height: 26px; font-size:12px; color: #fff; position: relative; top:-1px; margin-right:5px; }
.control-list .body .item .add { display: block; width:100%; height: 100px; text-align: center; border-radius:5px; background: #f6f7f9 url(/img/common/ico_control_add.svg) no-repeat 50% 50%; }

.group-list ul  { display: flex; flex-wrap: wrap; margin:0 -10px;  }
.group-list ul li { flex: 0 1 33.3333%; padding: 10px; }
.group-list ul.type2 li { flex:0 1 25%; }
.group-list ul li .item { padding: 20px; border: 1px solid #d2d8e1; border-radius:5px; }
.group-list ul li .item .head { display: flex; justify-content: space-between; margin-bottom: 5px; }
.group-list ul li .item .body { display: flex; align-items: center; }
.group-list ul li .item .body .img { flex:0 0 95px; }
.group-list ul li .item .body .img p  { width:70px; height: 70px; background: #d8dde6; border-radius:100%; text-align: center; line-height: 65px;}
.group-list ul li .item .form-table { flex: 1;}
.group-list ul li .item .form-table table th { width:95px; }
.group-list ul li .item .form-table table .inp { width:100%; }
.group-list .btn-add { display: block; width:100%; min-height: 100px; height: 100%; text-align: center; border-radius:5px; background: #f6f7f9 url(/img/common/ico_control_add.svg) no-repeat 50% 50%; }
.text-box em {font-style:italic;}



/* 컨텐츠 레이아웃 요소 */
#container { min-width: 1800px ; min-height:calc(100vh - 115px) }
.section { padding:20px; border:1px solid #333333; background:#f9f9f9; min-height:calc(100vh - 105px); position: relative; }
.section-inner {padding: 20px; border:1px solid #dcdcdc; border-top:2px solid #146ec9; background:#fff; }
.tabs1 + .section { min-height: calc(100vh - 175px); }
.tabs3 + .section { min-height: calc(100vh - 275px); }

.location { height:34px; padding:0 20px; line-height:33px; font-size:13px; color:#2a2b2f; background:rgba(228,233,241,0.75); margin:-10px -20px 20px -20px; }
.location .path span + span:before { content:'>'; display:inline; margin:0 6px; }
.location.right { text-align: right; }


.dashboard1 { min-height: calc(100vh - 100px);  }
.dashboard1 .in {  }
.dashboard1 .head { height:520px; position: relative;  }
.dashboard1 .head .box  { text-align: right; position: relative; }
.dashboard1 .head .box .main-stat { text-align: left; position: absolute; left: 20px; top:20px; width:460px; height: 372px; padding:15px 20px; border: 1px solid #e4e6eb; box-shadow:0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius:5px; background: #fff; z-index:2; }
.dashboard1 .head .box .main-stat .tit { font-size:18px; color: #425776; font-weight: 600; margin-bottom: 15px; }
.dashboard1 .head .box .main-stat .stat { position: absolute; top:90px; left: 20px; background: url(/img/common/label_main_stat1.svg) no-repeat 0 0; width:202px; height: 84px; text-align: center; font-size:22px; font-weight: 700; color: #fff; padding-top:15px; line-height: 1; opacity:0; transition: all 0.5s ease; transition-delay: 0.3s }
.dashboard1 .head .box .main-stat .stat2 { top:170px; left: 240px; background-image: url(/img/common/label_main_stat2.svg); opacity:0; transition: all 0.5s ease; transition-delay: 0.5s }
.dashboard1 .head .box .main-stat .list:after { display: block; content: ''; clear: both; }
.dashboard1 .head .box .main-stat .list { margin:-40px -15px 0; position: relative; z-index:2;  opacity:0; transform: translateY(30px); transition: all 0.5s ease; transition-delay: 0.7s;}
.dashboard1 .head .box .main-stat .list dl { float:left; width:25%;  align-items: center; padding:0 5px;  }
.dashboard1 .head .box .main-stat .list dl dt { font-size:15px; color: #282e3d; width: 102px; text-align: center;}
.dashboard1 .head .box .main-stat .list dl dd { display: block; content: ''; text-align: center; line-height: 38px; font-size:18px; color: #10bbd8; font-weight: 700; background: #F1F3F6; border-radius: 30px; width: 102px; height: 38px;}
.dashboard1 .head .box .main-stat .list dl dd.color1 { color: #10bbd8;}
.dashboard1 .head .box .main-stat .list dl dd.color2 { color: #10bbd8;}
.dashboard1 .head .box .main-stat .list dl dd.color3 { color: #1889fe;}
.dashboard1 .head .box .main-stat .list dl dd.color4 { color: #1889fe;}
.dashboard1 .head .box .labels { display: inline-block; vertical-align: top;   text-align: right; width:1186px; height: 500px; background: url(/img/common/main_visual.jpg) no-repeat 0 0; position: relative;}
.dashboard1 .head .box .labels .stat { position: absolute; background: url(/img/common/label_main.svg) no-repeat 0 0; width:50px; height: 47px; font-size:21px; font-weight: 700; color: #fff; padding-top:5px; line-height: 1; text-align: center; opacity:0; transform: translateY(30px); transition: all 0.5s ease; transition-delay: 0.5s;}
.dashboard1 .head .box .labels .stat.stat1 { left: 240px; top:140px; }
.dashboard1 .head .box .labels .stat.stat2 { left: 410px; top:50px;transition-delay: 0.7s; }
.dashboard1 .head .box .labels .stat.stat3 { left: 500px; top:290px; transition-delay: 0.9s;}
.dashboard1 .head .box .labels .stat.stat4 { left: 660px; top:205px;transition-delay: 1.1s; }
.dashboard1 .head .box .graph-wrap { position: absolute; right:40px; bottom:70px; opacity:0; transform: translateY(30px); transition: all 0.5s ease; transition-delay: 1.3s; }
.dashboard1 .head .box .graph-wrap .graph-box { float:left; margin-left: 50px; }
.dashboard1 .head .box .graph-wrap .graph-box .graph { margin-bottom: 10px; }
.dashboard1 .head .box .graph-wrap .graph-box .info dl { display: flex; justify-content: space-between; align-items: center;  }
.dashboard1 .head .box .graph-wrap .graph-box .info dl dt { font-size:15px; color: #282e3d; font-weight: 400; opacity:0.7; letter-spacing: -0.3px; }
.dashboard1 .head .box .graph-wrap .graph-box .info dl dd { font-size:18px; font-weight: 700; letter-spacing: -0.45px; }
.dashboard1 .head .box .graph-wrap .graph-box .info dl dd.color1 { color: #1889fe}
.dashboard1 .head .box .graph-wrap .graph-box .info dl dd.color2 { color: #10bbd8}
.dashboard1 .head .box .graph-wrap .graph-box .info dl dd.color3 { color: #ff9000}
.dashboard1 .head .box .graph-wrap .graph-box .info dl dd.color4 { color: #a162f7}
.dashboard1 .head .box .graph-wrap .graph-box .info dl dd.color5 { color: #2fd1d0}
.dashboard1 .head .box .graph-wrap .graph-box .info dl dd.color6 { color: #3d46c7}
.dashboard1 .head .controller { position: absolute;left: 40px; bottom:70px; z-index:10; }
.dashboard1 .head .controller button { height: 30px; padding:3px 4px; display: flex; justify-content: space-between; background: #dde3f0; border-radius:30px;  font-size:13px;color: #617794; line-height: 23px; padding-left: 37px; padding-right:14px; outline:none; background:#dde3f0 url(/img/common/ico_play.svg) no-repeat 4px 50%; }
.dashboard1 .head .controller button.play  { display: none; }
.dashboard1 .head .controller button.stop {  background-image: url(/img/common/ico_pause.svg); }
.dashboard1 .head .tabsBackground { content: ''; position: absolute;left: 20px; right:20px; bottom:10px; border-bottom:28px solid #e9effa ; border-left:40px solid transparent; border-right:40px solid transparent;z-index:10;}  
.dashboard1  .tabs { padding-bottom: 5px; }
.dashboard1  .tabs button { min-width: 100px; height: 28px; border-radius:2px; background: #96a9bb; text-align: center; font-size:14px; color: #fff; outline:none; flex:1;  z-index:2; position: relative; transition: all 0.5s ease; }
.dashboard1  .tabs button.active { background: #007FA4; }
.dashboard1 .body {/* display: flex; justify-content: space-between;*/  padding:10px 10px 0; }
.dashboard1 .body .flex-box{display: flex; justify-content: space-between; }


.dashboard1 .body .in-box1 { width:100%;  margin:0 5px 20px 5px; }
.dashboard1 .body .in-box1 .box {border: 1px solid #d2d8e1; border-radius: 5px; padding: 14px 20px; height: 195px; margin-bottom: 10px; position: relative;}
.dashboard1 .body .in-box1 .box .tit {  font-size:14px; color: #425776; margin-bottom: 15px; position: relative; }
.dashboard1 .body .in-box2 { width:50%;  margin:0 5px; }
.dashboard1 .body .in-box2 .box {border: 1px solid #d2d8e1; border-radius: 5px; padding: 14px 20px; height: 100%; margin-bottom: 10px; position: relative;}
.dashboard1 .body .in-box2 .box .tit {  font-size:14px; color: #425776; margin-bottom: 15px; position: relative; }
.dashboard1 .body .in-box { width:40%;  margin:0 5px; }
.dashboard1 .body .in-box .box { border: 1px solid #d2d8e1; border-radius:5px; padding:14px 20px; height: 168px; margin-bottom: 10px; position: relative; }
.dashboard1 .body .in-box .box .tit {  font-size:14px; color: #425776; margin-bottom: 15px; position: relative; }
.dashboard1 .body .in-box .box .tit .right{  position: absolute; right:0; top:0; }
.dashboard1 .body .in-box .box .tit .right2{  position: absolute; right:120px; top:0; }
.dashboard1 .body .in-box .box .tit .btn { display: inline-block; vertical-align: middle; padding:0 10px; height: 24px; line-height: 22px; border-radius:24px; border: 1px solid #7d8ea6; font-size:13px; color: #425776; margin:-2px 0 0 7px; background: none; }
.dashboard1 .body .in-box:last-child .box { height: 346px; padding-bottom: 0; }
.dashboard1 .body .in-box:last-child .box .tit { margin-bottom: 10px; }

.dashboard1 .swiper-slide { background: #fff; }
.dashboard1 .swiper-slide-active .box .main-stat .stat1 { opacity:1; top:70px; }
.dashboard1 .swiper-slide-active .box .main-stat .stat2 { opacity:1; top:140px; }
.dashboard1 .swiper-slide-active .box .main-stat .list { transform: translateY(0); opacity:1;}
.dashboard1 .swiper-slide-active .box .labels .stat { transform: translateY(0); opacity:1;}
.dashboard1 .swiper-slide-active .box .graph-wrap { transform: translateY(0); opacity:1;}


.dashboard1 .info-box1 { display: flex; justify-content: space-between; }
.dashboard1 .info-box1 dl { width:48%; }
.dashboard1 .info-box1 dl dt { height: 30px; line-height: 29px; border-radius:4px; background: #f1f4f9; text-align: center; font-size:14px; color: #617794; margin-bottom: 10px; }
.dashboard1 .info-box1 dl dd { display: flex; justify-content: space-between; text-align: center; }
.dashboard1 .info-box1 dl dd p { flex:1; line-height: 20px; height: 60px; text-align: center; font-size:30px; font-weight: 700; color: #3d46c7; padding-top: 20px; border-radius: 4px; background: #f1f4f9;}
.dashboard1 .info-box1 dl dd p:first-child { color: #ff9000;   }

.dashboard1 .info-box2 ul:after { display: block; content: ''; clear: both; }
.dashboard1 .info-box2 ul  { width:200px; padding-top:10px; }
.dashboard1 .info-box2 ul li { float:left; width:100px; margin-bottom: 15px;  }
.dashboard1 .info-box2 ul li em { display: inline-block; vertical-align: top; width:14px; height: 4px; border-radius:4px; background: #007FA4; }
.dashboard1 .info-box2 ul li p { font-size:13px; color: #425776; }
.dashboard1 .info-box2 .graph { position: absolute; right:5px; top:5px; }
.dashboard1 .info-box5 ul { height: 297px; overflow: auto; }
.dashboard1 .info-box5 ul li { margin-bottom: 8px; border: 1px solid #dde3f0; border-radius:3px; position: relative; padding:8px 5px 8px 10px;  }


.dashboard1 .info-box5 ul li:before { content: ''; position: absolute;left: -1px; top:-1px; bottom:-1px; border-radius:3px 0 0 3px; width:5px; background: #ff9000;  }
.dashboard1 .info-box5 .INSTALL:before { content: ''; position: absolute;left: -1px; top:-1px; bottom:-1px; border-radius:3px 0 0 3px; width:5px; background: #cccccc;  }
.dashboard1 .info-box5 ul li:after  {display: block; content: ''; clear: both; }
.dashboard1 .info-box5 ul li p { float:left; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top:2px;; }
.dashboard1 .info-box5 ul li p:nth-child(1){ width: 16%; }
.dashboard1 .info-box5 ul li p:nth-child(2){ width: 21%; }
.dashboard1 .info-box5 ul li p:nth-child(3){ width: 24%; }
.dashboard1 .info-box5 ul li p:nth-child(4){ width: 23%; }
.dashboard1 .info-box5 ul li p:nth-child(5){ width: 16%; text-align: right; padding-top:0; }
.dashboard1 .info-box5 ul li.type2:before { background: #a162f7; }
.dashboard1 .info-box5 ul li.type2 .btn-type0 { color: #0ec8c6; border-color:#0ec8c6; }
.dashboard1 .info-box5 ul li button { width:65px !important; height: 24px !important; line-height: 22px; padding: 0; }



.dashboard2 { min-height: calc(100vh - 60px); padding-left:1210px; padding-right:20px; padding-top:20px; }
.dashboard2 .body .box { padding: 14px 20px; border: 1px solid #d2d8e1; border-radius:5px; margin-bottom: 20px;  }
.dashboard2 .body .box .tit { position: relative; font-size:14px; color: #425776; font-weight: 600; margin-bottom: 15px; }
.dashboard2 .body .box .tit .etc { position:  absolute; right:0;top:0; white-space: nowrap; }
.dashboard2 .body .box .tit .etc p { display: inline-block; vertical-align: middle; font-size:12px; color: #a6b0be;  margin-left: 10px; font-weight: 400;}
.dashboard2 .body .box .tit .etc p span { display: inline-block; vertical-align: middle; width:10px; height: 10px; border-radius:100%; margin:-3px 3px 0 0;}
.dashboard2 .body .box .in-box1 dl { display: flex; justify-content: space-between;  margin-bottom: 9px; line-height: 20px; position: relative; }
.dashboard2 .body .box .in-box1 dl dt { font-size:14px; color: #425776; }
.dashboard2 .body .box .in-box1 dl dd { font-size:14px; color: #425776; font-size:20px; color: #ff9000; font-weight: 700; }
.dashboard2 .body .box .in-box1 dl dd p { position: absolute;left: 70px; right:80px; top:7px; height: 5px; border-radius:5px; background: #f1f4f9; overflow: hidden; }
.dashboard2 .body .box .in-box1 dl dd p span { position: absolute;left: 0; top:0; bottom:0; background: #ff9000; }
.dashboard2 .body .box .in-box1 dl.color2 dd { color: #3d46c7; }
.dashboard2 .body .box .in-box1 dl.color2 dd p span { background: #3d46c7; }
.dashboard2 .board { position: absolute; left: 0; top:120px; width:1200px; height: 577px; background: url(/img/dashboard/bg_plate.svg) no-repeat 50% 0; }
.dashboard2 .board .cloud { position: absolute; top:-20px; background: url(/img/dashboard/img_head.svg) no-repeat 0 0; width:244px; height: 165px; }
.dashboard2 .board .cloud p { font-size:21px; color: #fff; font-weight: 700; position: absolute; left: 52px; top:58px; }
.dashboard2 .board .line1 { position: absolute;left: 332px; top:122px; }
.dashboard2 .board .machine1 { position: absolute;left: 378px; top:122px; }
.dashboard2 .board .machine2 { position: absolute;left: 762px; top:130px; }
.dashboard2 .board .machine1-label { position: absolute;left: 452px; top:190px;width:79px; height: 47px; text-align: center; padding-top:15px; text-align: center; font-size:21px; font-weight: 600; color: #fff; background: url(/img/dashboard/label_a.svg) no-repeat 0 0;}
.dashboard2 .board .machine2-label { position: absolute;left: 803px; top:166px;width:79px; height: 47px; text-align: center; padding-top:15px; text-align: center; font-size:21px; font-weight: 600; color: #fff; background: url(/img/dashboard/label_a.svg) no-repeat 0 0; z-index:5;}
.dashboard2 .board .machine-label { position: absolute;left: 1040px; top:26px;width:138px; height: 47px; text-align: center; padding-top:1px; text-align: center; font-size:21px; font-weight: 600; color: #fff; background: url(/img/dashboard/label_b.svg) no-repeat 0 0;}

.dashboard2 .board .line2 { position: absolute;left: 291px; top:182px; }
.dashboard2 .board .machine3 { position: absolute;left: 181px; top:280px; }
.dashboard2 .board .machine3-label { position: absolute;left: 282px; top:340px;width:50px; height: 47px; text-align: center; padding-top:5px; text-align: center; font-size:16px; font-weight: 600; color: #fff; background: url(/img/dashboard/label_c.svg) no-repeat 0 0;}
.dashboard2 .board .bubble1 { position: absolute;left: 230px; top:220px; }

.dashboard2 .board .machine4{ position: absolute;left: 500px; top:328px; }
.dashboard2 .board .machine4-label { position: absolute;left: 592px; top:370px;width:50px; height: 47px; text-align: center; padding-top:5px; text-align: center; font-size:16px; font-weight: 600; color: #fff; background: url(/img/dashboard/label_c.svg) no-repeat 0 0;}
.dashboard2 .board .bubble2 { position: absolute;left: 550px; top:239px; }


.dashboard2 .board .line3 { position: absolute;left: 780px; top:164px; z-index:2; }
.dashboard2 .board .machine5{ position: absolute;left: 836px; top:334px; }
.dashboard2 .board .machine6{ position: absolute;left: 977px; top:343px; }




.dashboard2 .bottom-info { left: 20px; right:inherit; width:1170px; }
.bottom-info .head .h2 span { display: inline-block; vertical-align: top; padding:0 12px; height: 28px; line-height: 27px; border-radius:28px; background: #fce6e6; font-size:16px; color: #ed5f5f; margin-top:-5px; }
.bottom-info .head .right .stat3 { display: inline-block; vertical-align: middle; padding:0 10px 0 33px; border: 1px solid #ffddb2; border-radius:28px; height: 28px; line-height: 24px; background: url(/img/common/ico_stat3.svg) no-repeat 0 0; margin:0 3px;}
.bottom-info .head .right .stat3 span { font-size:14px; color: #ff9000; margin-right:23px; } 
.bottom-info .head .right .stat3 strong { font-size:16px; color: #666666; } 
.bottom-info .head .right .stat4 { display: inline-block; vertical-align: middle; padding:0 10px 0 33px; border: 1px solid #e2cffc; border-radius:28px; height: 28px; line-height: 24px; background: url(/img/common/ico_stat4.svg) no-repeat 0 0; margin:0 3px;}
.bottom-info .head .right .stat4 span { font-size:14px; color: #a162f7; margin-right:23px; } 
.bottom-info .head .right .stat4 strong { font-size:16px; color: #666666; } 
.bottom-info .head .right .stat5 { display: inline-block; vertical-align: middle; padding:0 10px 0 33px; border: 1px solid #b6eeee; border-radius:28px; height: 28px; line-height: 24px; background: url(/img/common/ico_stat5.svg) no-repeat 0 0; margin:0 3px;}
.bottom-info .head .right .stat5 span { font-size:14px; color: #0ec8c6; margin-right:23px; } 
.bottom-info .head .right .stat5 strong { font-size:16px; color: #666666; } 
.bottom-info .head .right .stat6 { display: inline-block; vertical-align: middle; padding:0 10px 0 33px; border: 1px solid #c3c6ed; border-radius:28px; height: 28px; line-height: 24px; background: url(/img/common/ico_stat6.svg) no-repeat 0 0; margin:0 3px;}
.bottom-info .head .right .stat6 span { font-size:14px; color: #3d46c7; margin-right:23px; } 
.bottom-info .head .right .stat6 strong { font-size:16px; color: #666666; } 
.bottom-info .head .right .stat7 { display: inline-block; vertical-align: middle; padding:0 10px 0 33px; border: 1px solid #dfe4ea; border-radius:28px; height: 28px; line-height: 24px; background: url(/img/common/ico_stat7.svg) no-repeat 0 0; margin:0 3px;}
.bottom-info .head .right .stat7 span { font-size:14px; color: #8491a2; margin-right:23px; } 
.bottom-info .head .right .stat7 strong { font-size:16px; color: #666666; } 



/************************************************************************************************************************************************
	Plugin OVERRIDE
************************************************************************************************************************************************/
/* Select */
.vscomp-ele { max-width:100%; }
.vscomp-wrapper { font-size:11px; color:#222; }
.vscomp-toggle-button { padding:0 21px 0 8px; height:28px; line-height:26px; font-size:14px;  }
.vscomp-toggle-button .vscomp-value { font-family: 'Noto Sans KR'; }
.vscomp-options-list { background: #d2d8e1;  }  
.vscomp-option { font-size:14px; color:#333333; transition: all 0.3s ease; }
.vscomp-search-container{ font-size:14px; color:#333333; transition: all 0.3s ease; }
.vscomp-no-search-results{ font-size:14px; color:#333333; transition: all 0.3s ease; }
.vscomp-clear-button { width:20px; height:20px; right:32px; margin-top:-10px;}
.vscomp-arrow { border-left:1px solid #d2d8e1; }
/*
.vscomp-options-list { height:auto !important; background: #d2d8e1;  }
.vscomp-option { height:28px !important; padding:0 0 0 8px; font-size:14px; color:#333333; transition: all 0.3s ease; }
.vscomp-clear-button { width:20px; height:20px; right:32px; margin-top:-10px;}
.vscomp-arrow { width:28px; border-left:1px solid #d2d8e1; }
.vscomp-arrow::after { border-width:6px; border-top-color:#8c8c8c; }
.vscomp-option.focused { background: #333333; color: #fff; }
*/


/* Grid(pqgrid) */

.pq-grid { border:0; border-radius:0; border-bottom:1px solid #eaeaea; }
.pq-grid-cont { background:#fff; }
.pq-header-outer {}
.ui-widget-header { border-bottom:0; }
.pq-header-outer .pq-grid-cont { background:#EAF5F8; border-bottom:1px solid #eaeaea;  border-top:2px solid #007FA4; }
/* .border-color2 .pq-header-outer .pq-grid-cont { background:#EAF5F8; border-bottom:1px solid #eaeaea; border-top:2px solid #DC0800; } */
.pq-header-outer .pq-grid-row { font-size:14px; color:#333333;  }
.pq-grid-col {border-left: 1px solid #eaeaea;border-right: none;} 
.pq-cont-inner>.pq-table>.pq-grid-row { border-bottom:1px solid #eaeaea;}
.pq-striped { background:#fdfdfe; }
.pq-grid-cell, .pq-grid-row { font-size:14px !important; color:#666666;  }
.pq-td-border-right>.pq-grid-row>.pq-grid-cell {border-left: 1px solid #eaeaea;border-right: none;} 
/*
.pq-td-border-right>.pq-grid-row>.pq-grid-cell { border-right:0; }
.pq-grid-cell { padding:14px 0;}
.pq-grid-number-cell { padding:14px 0; }
.pq-td-div {padding:14px 0;}
*/
.pq-grid-row>.pq-grid-number-cell,.pq-body-outer .pq-cont-left, .pq-cont-lt, .pq-cont-tr { border-color:#eaeaea; }


/************************************************************************************************************************************************

	크로스 테마 버젼 
	Cross Theme

************************************************************************************************************************************************/

/************************************************************************************************************************************************
	Common
************************************************************************************************************************************************/


/************************************************************************************************************************************************
	Login
************************************************************************************************************************************************/
.cross-theme .login-wrap { background: #000; }
.cross-theme .login-wrap .login { background: #292f3e; border-color:#292f3e; }
.cross-theme .login-wrap .login h1 strong { color: #fff; }
.cross-theme .login-wrap .login .inp-box .inp-login { color: #fff; background-color:#303543;  }
.cross-theme .login-wrap .login .inp-box .inp-login[type=text] { background-image: url(/img/login/black/ico_user.svg);}
.cross-theme .login-wrap .login .inp-box .inp-login[type=password] { background-image: url(/img/login/black/ico_pw.svg);}

.cross-theme .login-wrap .login .btn-box .btn-login2 { color: #96a0b2;}



/************************************************************************************************************************************************
	Layout
************************************************************************************************************************************************/
body.cross-theme  { background: #fff; }
.cross-theme header { background: #282e3d; border-color:#1f2432; }
/**
.cross-theme header h1 { color: #fff; background-image: url(/img/common/black/top_logo.png);}
**/
.cross-theme header .right span { color: #a6b2c4; }
.cross-theme header .right .btn-set, 
.cross-theme header .right .btn-logout { color: #a6b2c4; }
.cross-theme header .right .btn-dashboard { background-image: url(/img/common/black/ico_dashboard.svg); }
.cross-theme header .right .btn-admin { background-image: url(/img/common/black/ico_adm.svg); }
.cross-theme header .right .btn-logout { background-image: url(/img/common/black/ico_logout.svg); }
.cross-theme header .right .btn-dashboard:hover { background-image: url(/img/common/black/ico_dashboard_hover.svg); }
.cross-theme header .right .btn-admin:hover { background-image: url(/img/common/black/ico_adm_hover.svg); }
.cross-theme header .right .btn-logout:hover { background-image: url(/img/common/black/ico_logout_hover.svg); }
.cross-theme header .type2 h1 { background-color:#1f2432; }

.cross-theme header .type2 nav .btn-dep1 { color:#e1edff; }
.cross-theme header .type2 nav > ul > li:hover .btn-dep1,
.cross-theme header .type2 nav > ul > li .btn-dep1.active { color: #fff; }
.cross-theme header .type2 .dep2 { background: #303543; }
.cross-theme header .type2 .dep2 ul li a { color: #d0ddf2; }
.cross-theme header .type2 .dep2 ul li a.active,
.cross-theme header .type2 .dep2 ul li a:hover { color: #007FA4; }

.cross-theme aside { background: #282e3d; border-color:#1f2432; }
.cross-theme aside nav > ul > li >  a { color: #a6b2c4; }
.cross-theme aside nav > ul > li > a span { background:rgba(40,46,61,0.8); color: #e1edff; }
.cross-theme aside nav .dep2 { background: #303543; }
.cross-theme aside nav .dep2 .tit { color: #a6b2c4;  }
.cross-theme aside nav .dep2 .btn-dep2 { color: #e1edff; }
.cross-theme aside nav .dep2 .btn-dep2.active,
.cross-theme aside nav .dep2 .btn-dep2:hover { color: #007FA4; }
.cross-theme aside nav .dep2 .tit:before { border-color:#a6b2c4; opacity:0.3; }
.cross-theme aside nav > ul > li >  a .nav-dashboard { background-image: url(/img/common/black/nav_dashboard.svg) }
.cross-theme aside nav > ul > li >  a:hover .nav-dashboard { background-image: url(/img/common/nav_dashboard_on.svg) }

.cross-theme aside nav > ul > li >  a.m1 { background-image: url(/img/common/black/ico_menu_01.svg); }
.cross-theme aside nav > ul > li >  a.m2 { background-image: url(/img/common/black/ico_menu_02.svg); }
.cross-theme aside nav > ul > li >  a.m3 { background-image: url(/img/common/black/ico_menu_04.svg); }
.cross-theme aside nav > ul > li >  a.m4 { background-image: url(/img/common/black/ico_menu_03.svg); }
.cross-theme aside nav > ul > li >  a.m5 { background-image: url(/img/common/black/ico_menu_05.svg); }
.cross-theme aside nav > ul > li >  a.m6 { background-image: url(/img/common/black/ico_menu_06.svg); }
.cross-theme aside nav > ul > li >  a.m7{ background-image: url(/img/common/black/ico_menu_07.svg); }

/************************************************************************************************************************************************

	블랙 테마 버젼 
	Black Theme : cross-theme + black-theme 클래스

************************************************************************************************************************************************/

.black-theme ::-webkit-input-placeholder { color: rgba(235,235,245,0.3);}
.black-theme  :-ms-input-placeholder { color: rgba(235,235,245,0.3);}


/* Form */
.black-theme .checkbox + em { border-color:#333333; background: none; }


/* Form */
.black-theme .inp { background-color: #323847; border-color:#212738; color: #a6b2c4; }
.black-theme .textarea { background-color: #323847; border-color:#212738; color: #a6b2c4; }
.black-theme .select { background-color: #323847; background-image: url(/img/common/black/bu_select.svg); border-color:#212738; color: #a6b2c4; }
.black-theme .inp.calendar { background-image: url(/img/common/black/ico_calendar.svg); }
.black-theme .checkbox + em + span { display: inline-block; vertical-align: middle; font-size:14px; color: #a6b2c4; margin-left: 10px; }
.black-theme .radio + em + span { display: inline-block; vertical-align: middle; font-size:14px; color: #a6b2c4; margin-left: 10px; }
.black-theme .stepper-type1 button { background: #4c5163; border-color:#212738; }
.black-theme .stepper-type2 button { background: #4c5163; border-color:#212738; }
.black-theme .toggle + span { background: rgba(204,204,204,0.5);}
.black-theme .toggle + span em { background: #ccc; }
.black-theme .toggle:disabled + span { background: rgba(33,39,56,0.5); }
.black-theme .toggle:disabled + span em { background: #212738}

/* Tabs */
.black-theme .tabs1 ul li a { background: rgba(53,58,73,0.5); border-color:#212738; color: #c3d0e2; }
.black-theme .tabs1 ul li.active a { color: #fff; background: #353a49; }
.black-theme .tabs2 ul li:not(.active) a { background: #4c5163; border-color:#212738; color: #c3d0e2;  }
/*.black-theme .tabs2 ul li.active a { border-color:#212738;}*/

/* Sub */
.black-theme .search-type1 { background: #353a49; border-left-color:#212738; border-bottom-color:#212738; border-right-color:#212738; }
.black-theme .search-type1 .form-area dl dt { color: #e2ebff; }
.black-theme .search-type1 .btn-search { border-color:#212738; }
.black-theme .search-type1 .table-area table tbody th { color: #e2ebff; }
.black-theme .search-type1 .btn-flip { border-color:#212738; background: #3d414f; }
.black-theme .search-type1 .btn-flip:before { border-color:#fff; }
.black-theme .search-type2 dl dt { color: #c3d0e2; }

.black-theme .h2 { color: #a6b2c4; }
.black-theme .h2:before { background: #a6b2c4; }
.black-theme .location { color: #8c929d; }

.black-theme .tab-wrap .conts .search-type2 { background: #2b3141; border-color:#212738; }

/************************************************************************************************************************************************
	Layout
************************************************************************************************************************************************/
body.black-theme { background: #414553; }
.black-theme .modal-content { background: #2f3544;  }
.black-theme .modal-notice .head { border-bottom-color:#252b3c; }
.black-theme .modal-notice .head .h6 { color: #e2ebff; }
.black-theme .modal-notice .head .date { color: #c3d0e2; }
.black-theme .modal-notice .body { background: rgba(37,43,60,0.5); color: #e1edff; }
.black-theme .modal-notice .files a { color: #fff; }
.black-theme .modal-notice .agree { border-color:#252b3c; }
.black-theme .section { background: #353a49; border-color:#212738;}
.black-theme .grid-type1 table thead th { background: #40465c; color: #c3d0e2; border-bottom-color:#252b3c;  }
.black-theme .grid-type1 table thead th + th { border-left: 1px solid #252b3c; }
.black-theme .grid-type1 table tbody td { background: #2d3344; border-color: #252b3c; color: #e2ebff;  }
.black-theme .grid-type1 table tbody td a { color: #e2ebff; }
.black-theme .grid-type1 table tbody tr:nth-child(even) td { background: #2a3040; }
.black-theme .grid-type1 table tbody tr:last-child td { border-color:#252b3c;  }
.black-theme .grid-type1 table tbody tr:hover td { background: #212738}


.black-theme .write-box { background: #2a3040; border-color:#252b3c; }
.black-theme .write-box .head { border-color:#252b3c; }
.black-theme .write-box .head .inp-write { color: #fff; }
.black-theme .write-box .head .search-type1  { background: #2a3040; }
.black-theme .write-box .body textarea { background: none; border-color:#212738; color: #fff; }
.black-theme .write-box .foot .files { background:#252b3c; color: #90a1bf;  }
.black-theme .notice-list ul li { background: #2a3040;  border-color:#252b3c; }
.black-theme .notice-list ul li .q { color: #e2ebff; }
.black-theme .notice-list ul li .q .date { color: #c3d0e2; }
.black-theme .notice-list ul li .a { border-color:#252b3c; }
.black-theme .notice-list ul li .a .text-box { background: rgba(37,43,60,0.5); color: #e1edff; }
.black-theme .notice-list ul li .a .btn-box .file a { color: #fff; }
.black-theme .vscomp-toggle-button { background: #323847; border-color:#212738; }
.black-theme .vscomp-arrow { border-left-color:#212738; }
.black-theme .vscomp-arrow::after {  border-top-color:#acb9cb; }
.black-theme .vscomp-wrapper .vscomp-value { color: #a6b2c4; font-family: 'noto'; }
.black-theme .vscomp-wrapper:not(.has-value) .vscomp-value {opacity:1; }
.black-theme .vscomp-options-list { background: #323847; }
.black-theme .vscomp-option.selected { background: #323847;  color: #fff; }
.black-theme .vscomp-option.focused { background-color:#4c5163; color: #fff; }
.black-theme .search-type2 .files:not(.list) { background: #272d3e; color: #90a1bf; }
.black-theme .search-type2 .files.list { border-color:#272d3e; }
.black-theme .search-type2 .files a {  color: #fff; }
.black-theme .layer-box .layer .body { background: #2f3544; color: #c3d0e2; }
.black-theme .layer-box .layer { background: #2f3544;}

.black-theme .pq-grid { border-bottom-color:#252b3c; }
.black-theme .pq-header-outer .pq-grid-cont { background: #40465c; border-bottom-color:#252b3c; }
.black-theme .pq-header-outer .pq-grid-row { color: #c3d0e2; border-bottom-color:#252b3c;}
.black-theme .pq-grid-cont { background: #2d3344; }
.black-theme .pq-cont-inner>.pq-table>.pq-grid-row { border-bottom-color:#252b3c; }
.black-theme .pq-td-border-right>.pq-grid-row>.pq-grid-cell,
.black-theme .pq-grid-row>.pq-grid-number-cell, 
.black-theme .pq-body-outer .pq-cont-left, 
.black-theme .pq-cont-lt, 
.black-theme .pq-cont-tr { border-color:#252b3c;}

.black-theme .pq-grid-cell,
.black-theme .pq-grid-row { color: #e2ebff; }
.black-theme .pq-striped { background: #2a3040; }

.ui-icon-triangle-1-n { display: inline-block; vertical-align: middle !important; margin:-1px 0 0 5px; width: 0;height: 0;border-style: solid;border-width: 6px 5px 0 5px;border-color: #333333 transparent transparent transparent;}
.ui-icon-triangle-1-s { display: inline-block; vertical-align: middle !important; margin:-1px 0 0 5px; width: 0;height: 0;border-style: solid;border-width: 0 5px 6px 5px;border-color: transparent transparent #333333 transparent;}


/* Loading */
.loading-wrap { position: fixed; left: 0; right:0; top:0; bottom:0; z-index:999999999999; display: flex; align-items: center; background: rgba(0,0,0,0.7); justify-content: center; }
.loading-wrap.type2 { background: none; }
.loading-wrap.type2 div:after { background: #222; }
.lds-roller {  display: inline-block;  position: relative;  width: 80px;  height: 80px;}
.lds-roller div {  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;  transform-origin: 40px 40px;}
.lds-roller div:after {  content: " ";  display: block;  position: absolute;  width: 7px;  height: 7px;  border-radius: 50%;  background: #fff;  margin: -4px 0 0 -4px;}
.lds-roller div:nth-child(1) {  animation-delay: -0.036s;}
.lds-roller div:nth-child(1):after {  top: 63px;  left: 63px;}
.lds-roller div:nth-child(2) {  animation-delay: -0.072s;}
.lds-roller div:nth-child(2):after {  top: 68px;  left: 56px;}
.lds-roller div:nth-child(3) {  animation-delay: -0.108s;}
.lds-roller div:nth-child(3):after {  top: 71px;  left: 48px;}
.lds-roller div:nth-child(4) {  animation-delay: -0.144s;}
.lds-roller div:nth-child(4):after {  top: 72px;  left: 40px;}
.lds-roller div:nth-child(5) {  animation-delay: -0.18s;}
.lds-roller div:nth-child(5):after {  top: 71px;  left: 32px;}
.lds-roller div:nth-child(6) {  animation-delay: -0.216s;}
.lds-roller div:nth-child(6):after {  top: 68px;  left: 24px;}
.lds-roller div:nth-child(7) {  animation-delay: -0.252s;}
.lds-roller div:nth-child(7):after {  top: 63px;  left: 17px;}
.lds-roller div:nth-child(8) {  animation-delay: -0.288s;}
.lds-roller div:nth-child(8):after {  top: 56px;  left: 12px;}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.pq-grid-cell[title] {
    background-image: none;
}

.date-check-box {
    margin-left: 10px;
    vertical-align: middle;
}

.formDeliver fieldset {
	width: 100%;
    border: revert;
    margin-right: 20px;
    padding: 10px;
    float: left;
    margin-bottom: 10px;
  }
  
.formDeliver fieldset legend {
	font-size: 14px;
    color: #425776;
    font-weight: 500;
    display: revert;
    overflow: revert;
    position: revert;
    width: revert;
    text-indent: revert;
    white-space: revert;
}

.delivery-type2 { clear: both; }
.delivery-type2 dl dt { font-size:14px; color: #425776; font-weight: 500; margin-bottom: 6px; padding-top: 5px; padding-left: 1px; }
.delivery-type2 dl { margin-bottom: 18px; }
.delivery-type2 dl dd { }
.delivery-type2 .half { display: flex; justify-content: space-between; margin:0 -10px;  }
.delivery-type2 .half dl { flex: 1 1 50%; padding:0 10px; }

.vscomp-ele[disabled] {cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; background: #c7c7c7;}
.vscomp-ele[disabled] .vscomp-wrapper{opacity:.7;pointer-events:none;}


.auto-height-box{
 position: absolute;
 z-index: 1;
 top: 7px; /* .search-type1 .table-area table tbody td */
 width: 100%;
 padding-right: 13px;
}
.auto-height-box textarea{
 width: 100%;
}
.auto-height-box textarea:focus{
 height: 100px;
}

.auto-height-box-modal{
 position: absolute;
 z-index: 1;
 top: 0px; /* .search-type1 .table-area table tbody td */
 width: 200px;
 padding-right: 13px;
}
.auto-height-box-modal textarea{
 width: 100%;
}
.auto-height-box-modal textarea:focus{
 height: 100px;
}