@charset "utf-8";
/* CSS Document */

    	/*웹폰트 Noto Sans*/
@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: normal;
    src: local('Noto Sans Light'), local('NotoSans-Light'),
    url(../../fonts/eot/NotoSansKR-Light-Hestia.eot),
    url(../../fonts/eot/NotoSansKR-Light-Hestia.eot?#iefix) format('embedded-opentype'),
    url(../../fonts/woff/NotoSansKR-Light-Hestia.woff) format('woff'),
    url(../../fonts/otf/NotoSansKR-Light-Hestia.otf) format('opentype');
}
@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: bold;
    src: local('Noto Sans Medium'), local('NotoSans-Medium'),
    url(../../fonts/eot/NotoSansKR-Medium-Hestia.eot),
    url(../../fonts/eot/NotoSansKR-Medium-Hestia.eot?#iefix) format('embedded-opentype'),
    url(../../fonts/woff/NotoSansKR-Medium-Hestia.woff) format('woff'),
    url(../../fonts/otf/NotoSansKR-Medium-Hestia.otf) format('opentype');
}

/************
// reset //
************/

html, body {height: 100%; margin: 0; padding: 0; overflow: hidden; line-height:100%; font-size:100%; font-family: 'Noto Sans Korean'; font-weight:bold;background:#343d46}
div{box-sizing:border-box}
/*#map{height:700px;width:1000px}*/
/*#map{height:100%;width:100%}*/
.wrap{width:100%; height:100%}
/*#map_wrap{height:100%; width:2994px;display:inline-block;}/*zoom 11일때*/
/*#map_wrap{height:100%; width:3024px;display:inline-block;}/*zoom10.6일때*/
#map_wrap{height:100%; width:1996px;display:inline-block;}/*텍스트사이즈 150%일때 zoom 11일때*/
/*#controls {width: 100%; height: 60px; display:inline-block;}/*텍스트사이즈 125% 일때 zoom10.6, zoom11일때*/
#controls {width: 100%; height: 33px; display:inline-block;}/*텍스트사이즈 150%일때 zoom 11일때*/
/*#map{height:2100px;width:100%;display:inline-block;}/*zomm 11일때*/
/*#map{height:2130px;width:100%;display:inline-block;}/*zoom10.6일때*/
#map{height:1440px;width:100%;display:inline-block;}/*텍스트사이즈 150%일때 zoom 11일때*/
#panel{ height: 100%; display: none; background: #343d46;position: absolute;left: 1996px;right: 0px;border-left: 1px solid #222;}
.nicebox {
	position: relative;
	text-align: center;
	font-size: 30px;
	line-height:30px;
	z-index: 5;
	background: rgb(255,255,255);
	background: linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(245,245,245,1) 100%);
	border: rgb(229, 229, 229) 1px solid;
	box-sizing: border-box;
}
.select-wrap{display:inline-block;text-align:left;width:100%;text-overflow:ellipsis;white-space: nowrap;}
.select-wrap select{width:auto;font-size:15px}

/*#controls {width: 100%; height: 78px; display:inline-block;}*/
.data-box {
	/*min-height: 120px;*/
    display: inline-block;
    color: white;
    text-align: center;
    background: #2b303b;
    margin: 5px 2%;
    border-radius: 5px;
    width: 96%;
    padding:5px 2%
}
/*
.data-box:last-child
{
	height: 340px;
}
*/
.data-inner-wrap-left
{width:100%;text-align:left; margin:14px 5px}

#census-variable {width: 360px;height: 20px;}
#legend { display: flex; display: -webkit-box; padding: 0 10px; }

.color-key {
    background: linear-gradient(to right,
    hsl(240, 69%, 54%) 0%,
    hsl(200, 71%, 51%) 17%,
    hsl(160, 74%, 47%) 33%,
    hsl(120, 76%, 44%) 50%,
    hsl(80, 78%, 41%) 67%,
    hsl(40, 81%, 37%) 83%,
    hsl(0, 83%, 34%) 100%);
  flex: 1;
  -webkit-box-flex: 1;
  margin: 0 5px;
  padding: 0 12px 0 5px;
  text-align: left;
  /*
  font-size: 40px;
  line-height: 40px;
  height:40px;*/
  font-size: 30px;
  line-height: 30px;
  height:30px;
}
#data-value { font-size: 80px; font-weight: bold; line-height:120px;text-align:left; height:120px }
#data-name { position: absolute; left: 20px; margin: 5px; font-size: 20px; color: #bbb; font-weight: 600;}
#data-label { font-size: 40px; font-weight: bold; padding-right: 20px; line-height:40px; color:gray}
/*#data-label:after { content: ':' }*/
#data-caret { margin-left: -5px; display: none; font-size: 40px; width: 40px; color:#333340; position:absolute}
.data-inner { margin-left: -5px; font-size: 40px; width: 40px; color:#fff; position:absolute}

#data-value div{font-size:10px; line-height:30px}
#data-value div>span{margin-left:10px;}

.panel_list{
    list-style: none;
    margin: 0px;
    width: 100%;
}
.panel_innerbox{
    padding: 20px 0px 5px 5px;
    margin-bottom: 5px;
    border-bottom: 0.8px solid #888;
    font-size: 20px;
    color:skyblue
}
.panel_innerbox :last-child {
    border-bottom: 0px;
}
.panel_innerbox i
{
	color:#BCE55C
}
.panel_icon
{
	color:#BCE55C;
	margin:0 10px;
}
/*
.panel_innerbox:before {
    display: inline-block;
    vertical-align: middle;
    padding: 0px 5px 6px 0px;
    padding-right: 10px;
     content: "\f6d1";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}*/
/*
ul.data-list, ol.data-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
    width:100%
}

.data-list li {
    padding: 5px 0px 5px 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #efefef;
    font-size: 12px;
}
.data-list li:last-child {
    border-bottom: 0px;
}
.data-list li:before {
    content: ">";
    display: inline-block;
    vertical-align: middle;
    padding: 0px 5px 6px 0px;
}*/
#graph .tb-list {
    margin-bottom: 150px;
}
.tb-list
{
	width:100%;
	margin-bottom: 5px;
}
.tb-list th
{
	font-size:12px; line-height:25px;font-weight:bold;border-bottom: 0.5px solid #ccc;
}
.tb-list th.row2
{
	font-size: 12px;line-height: 18px;padding-bottom: 6px;
}
.tb-list tr
{
	border-bottom: 0.5px solid #ccc;
}
.tb-list td
{
	font-size:12px; line-height:23px;
	text-align:center; font-weight:normal;
}
.tb-list td:first-child
{
	text-align:left
}
.tb-list td:first-child:before
{
	content:">";
	padding-right:5px;
}
.tb-list td.pd
{
	color:#8a93a4
}
.tb-list td.rc
{
	color:#fff
}

/* The location pointed to by the popup tip. */
.popup-tip-anchor { height: 0; position: absolute; /* The max width of the info window. */ width: 200px;}
/* The bubble is anchored above the tip. */
.popup-bubble-anchor { position: absolute; width: 100%; bottom: /* TIP_HEIGHT= */ 10px; left: 0;}
/* Draw the tip. */
.popup-bubble-anchor::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: /* TIP_HEIGHT= */ 8px solid #333340;
}
/* The popup bubble itself. */
.popup-bubble-content {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%);
  background-color: #3cb41b;
  padding: 5px;
  border-radius: 1px;
  font-family: 'Noto Sans Korean', sans-serif;
  font-weight:bold;
  overflow-y: auto;
  max-height: 60px;
  box-shadow: 0px 2px 10px 1px rgba(74, 214, 214,0.2);
  cursor:pointer;
  color: #1c1f88;
  border:0.5px solid #333340;
}
/*
.popup-bubble-content span
{
	color: #e3a312;
}
.popup-bubble-content.buoy {
  border:0.5px solid #333340;
}
.buoy span
{
	color: #662107;
}
.popup-bubble-content.tide {
 border:0.5px solid #333340;
}
.tide span
{
	color:#41bfba;
}
.popup-bubble-content.vsrc {
  border:0.5px solid #333340;
}
.vsrc span
{
	color:#082a32;
}
/*
/*국립수산과학원 [START]*/
/*
.popup-bubble-content.nifs {
  border:0.5px solid #333340;
}
.nifs span {
	color:rgb(30, 97, 91);
}
.legend.popup-bubble-content
{
    padding: 0px;
    border-radius: 1px;
    font-family: 'Noto Sans Korean';
    font-weight: bold;
    overflow: hidden;
    max-height: none;
    box-shadow: 0px 2px 10px 1px rgba(74, 214, 214,0.2);
    position: unset;
    max-width: 125px;
    height: 80px;
    line-height: 30px;
    display: inline-block;
    vertical-align: middle;
    top: unset;
    left: unset;
    transform: translate(0, 0);
    padding-top: 10px;
    margin: 10px 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -1px;
    font-size: 0.8rem;
    min-width: 70px;
}
.legend.active
{
	opacity:0.5;
}
*/
/*국립수산과학원 [END]*/
.popup-bubble-content:hover {border: 1px solid #fff;z-index:1}

      
div.btn {display:inline-block; cursor: pointer;font-weight: bold; text-align: center; border-radius: 5px;text-overflow: ellipsis; white-space: nowrap;}
div.btn_md {width:auto;margin:2px 5px;padding:5px 10px;display:inline;cursor: pointer;height:auto; font-size:12px; font-weight: bold; text-align: center; border-radius: 4px;}
div.btn_sm {display:inline-block; cursor: pointer;height:20px; line-height:20px; font-size:12px; padding:1px 3px; border-top:1px solid #ccc;font-weight: normal; text-align: center; border-radius: 3px; margin:1px}
div.btn_lg {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 8px 22px 8px 12px;
    display: inline;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
}div.btn i {display: inline-block; width:14px; margin-right:5px;}
div.btn i img {width:100%;}

div.btn_md i img {width:15px;}
.btn_sky {background: #0a6ecd;color:#fff}
.btn_sky:active {background: #005eb8 !important;color:#fff}
.btn_sky:hover {background: #1481e9;color:#fff}
.btn_gray {background: #666;color:#fff}
.btn_gray:active {background: #BDBDBD !important;color:#fff}
.btn_gray:hover {background: #666;color:gray}
.btn_blue {background: #1e3269;color:#fff}
.btn_blue:active {background: #192958 !important;color:#fff}
.btn_blue:hover {background: #274187;color:#fff}

/* 셀렉트박스 */
/*
select {border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px; -webkit-tap-highlight-color:rgba(0,0,0,0.1) !important;}
.customslt{display:inline-block; vertical-align:middle; position:relative;width:100%;box-sizing:border-box;background:#fff;}
.customslt select{display:block;position:relative; width:100%; height:28px; padding:0 25px 0 4px; font-size:13px; line-height:1; border:#ccc 1px solid; background:#f7f7f7; color:#333;letter-spacing:-0.5px; box-sizing:border-box;-webkit-appearance: none;-moz-appearance: none;appearance: none; box-sizing:border-box;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}
.customslt select::-ms-expand {display: none;}
.customslt select:focus{border-color:#0a6ecd;}
.customslt:after{content:'';display:block;position:absolute; right:1px; top:1px; width:25px; height:26px; background:url(../../images/mrs/img_select.png) no-repeat 100% 12px #ccc; background-size:7px 5px;-webkit-background-size:7px 5px;pointer-events:none;}
.customslt select:disabled{background:#dbdbdb;border-color:#dbdbdb;color:#999;}
*/

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background: url(../../images/mrs/img_select.png) no-repeat right 12px center #47525d;
    padding: 6px;
    padding-right: 40px;
    font-family: 'Noto Sans Korean';
    font-weight: bold;
    color: white;
    border-radius: 5px;
    margin:2px 0px;
    border: rgb(169, 169, 169) 1px solid;
}

.customslt select{
}

input[type="checkbox"] + label {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid #bcbcbc;
	cursor: pointer;
	border-color: rgb(169, 169, 169);
	background-color:#47525d;
	color: white;
	line-height:20px;
	background:url(./images/check_radio_sheet.png) left top no-repeat;
	white-space: nowrap;
    margin-left: 10px;
}
input[type="checkbox"] {
	display: none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(./images/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(./images/check_radio_sheet.png) -19px top no-repeat;
}
/* 인풋 */
.customtxt.label {display:inline-block; vertical-align:middle; overflow:hidden; position:relative; box-sizing:border-box; width:100%; padding-right:25px;}
.customtxt.label span.label {position:absolute; right:0px; top:0px; width:25px; height:28px; border:1px solid #ccc; border-left:0px; text-align: center; color:#666; line-height: 28px; background: #cccccc; font-size:11px; box-sizing: border-box; border-radius:0px 3px 3px 0px;-webkit-border-radius:0px 3px 3px 0px;-moz-border-radius:0px 3px 3px 0px}
.customtxt.label input{display:inline-block; position:relative; width:100%; height:28px; padding:0 6px; font-size:13px; border:#ccc 1px solid; background:#f7f7f7; color:#333; box-sizing:border-box;border-radius:3px 0px 0px 3px;-webkit-border-radius:3px 0px 0px 3px;-moz-border-radius:3px 0px 0px 3px;}
.customtxt input{display:block; position:relative; width:100%; height:28px; padding:0 6px; font-size:13px; border:#ccc 1px solid; background:#f7f7f7; color:#333; box-sizing:border-box;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}
.customtxt.dark input{
	display:block; background:#1e3269;position:relative; width:100%; 
	height:36px; padding:0 6px; font-size:13px; border:rgb(169, 169, 169) 1px solid; color:#fff; 
	box-sizing:border-box;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;    font-family: 'Noto Sans Korean';
    font-size:13px; line-height:36px
}
    
    
.customtxt input[type='date']{line-height:1;vertical-align:middle;}
.customtxt input[type='text'],
.customtxt input[type='number'],
.customtxt input[type='password'],
.customtxt input[type='date'],
.customtxt input[type='search']{-webkit-appearance:none;-moz-appearance: textfield;}
.customtxt input::-webkit-input-placeholder{color:#888;}
.customtxt input:-moz-placeholder{color:#888;}
.customtxt input::-moz-placeholder{color:#888;}
.customtxt input:-ms-input-placeholder{color:#888;}
.customtxt input:disabled{background:#dbdbdb;color:#999;}
.customtxt input:focus{border:#0a6ecd 1px solid;}

.customtxt.auto{width:auto;display:inline-block;}
.customslt.auto{width:auto;display:inline-block;}

/*중제목*/
.pagetitle_wrap + .contents .div_title {border-top:none;position:relative; width:100%; height:30px; background:#def; border-bottom:1px solid #ccc;}
.div_title {border-top:1px solid #ccc;position:relative; width:100%; height:30px; background:#def; border-bottom:1px solid #ccc;}
.div_title .btn_go_detail {position:absolute; display:block; width:28px;top:3px; right:20px;}
.div_title .btn_go_detail img {width:28px;}
.div_title h3 {width:80%; height:30px; font-size:15px; line-height:30px; color:#1e3269; font-weight:bold; text-align: center; margin:0 auto;}

/*제어화면가기 타이틀*/
.div_command {position:relative; width:100%; height:32px; background:#FFF59D; border-bottom:1px solid #ccc;}
.div_command .btn_go_command {position:absolute; display:block; width:32px; top:3px;right:20px;cursor: pointer;}
.div_command .btn_go_command img {width:32px;}
.div_command h3 {width:80%; height:30px; font-size:15px; line-height:30px; color:#1e3269; font-weight:bold; text-align: center; margin:0 auto;}

.subtitle{width:100%;font-size:1.4em;text-align:center;font-weight:600;border:0;color:#004080;line-height:130%;margin:0.2em 0}
.popup_close{position: absolute;
    top: 11px;
    right: 18px;
    width: 28px;
    height: 28px;
    background: url(../../images/app/btn_pop_close.png) no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    text-indent: -9999px;
    z-index: 1;}

/*측정시간*/
.monitortime {display:block; background: #dddddd; text-align: center; color:#666; margin:10px 0px; padding:10px 0px;}
.monitortime i {display:inline-block; width:12px; height:12px; margin-right:5px;}
.monitortime i img {width:100%;}

.contbox {width:100%; height:auto; padding:0px 10px 5px; box-sizing: border-box;}
.contbox h3 {width:100%; height:34px; font-size:15px; line-height:34px; font-weight:bold; border-bottom:1px solid #666; padding-left:20px; margin-bottom: 5px; background:url(../../images/mrs/icon_conttit.png) no-repeat 0px 11px; background-size:11px 13px; box-sizing: border-box;text-align:left}
.inner_title {position:relative; width:100%; height:28px; background:#1e3269; padding:0px 10px; font-weight: bold; color:#fff; line-height:28px; box-sizing: border-box;}
.inner_cont {width:100%; height:auto; padding:5px; box-sizing: border-box;}

/*팝업창*/
/* ---------- 팝업창  ----------  시작*/
.popup_container{
    width: 100%;
    z-index: 500;
    position: absolute;
    background-color: #000000;
    display: none;
    background-color: rgba( 0, 0, 0, 0.7 );
    top: 0px;
    left: 0px;
    text-align: center;
    height: 100%;
    padding: 5% 30%;
}

/*
.popup_wrap{
	width: 100%;
    padding: 5%;
    height: 100%;
    text-align:center;
}
*/
.popup-title{position:relative}


.popup_container.on{
	display: block;
    text-align: center;
}
/*
.popup_container.on .popup{
	display: block;
    text-align: center;
}
*/
.popup_container .popup {
        border: 1px solid #3498db;
    background-color: #ffffff;
    background-color: rgba( 255, 255, 255, 1 );
    width: 100%;
    position: relative;
    height: 80%;
    padding: 1em;
    border-radius: 25px;
    /* margin: 5%; */
    /* display: none; */
    text-align: center;
}
.popup_container.auto .popup {
    height:auto;
}
.popup_container.auto .popup-contents{
    height: auto;
    position:unset;
}
.popup-contents
{
    position: absolute;
    top: 50px;
    bottom: 20px;
    left: 20px;
    right: 20px;
}
.popup_container .popup .popup-cell{width:100%;}
.popup_close{position:absolute;top:0px;right:0px;width:30px;height:30px;/* background-color:black; */background-color:#1e3269;color:white;font-weight:600;line-height:200%;cursor:pointer;z-index: 1;}

//#1e3269
.btn_close{position: absolute;
    top: 0;
    right: 0;
    width: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0.7;
    border-radius: 17px 0 17px 17px;
    cursor: pointer;
    background: url(../images/btn_close.png)}
    
#div_popup{	overflow-y:auto;height:100%;}
/* ---------- 팝업창  ----------  끝*/

.table_wrap {width:100%; padding:10px 0px;}
table.table_type1 {width:100%;}
table.table_type1 th, table.table_type1 td {padding:2px 0px; text-align:left;}
/* table.table_type1 th {width:35%; color:#1e3269; font-weight:bold; background: url(../../images/mrs/icon_tableth.png) no-repeat 1px 50%; background-size: 8px 8px; padding-left:12px;} */
table.table_type1 th {width:35%; color:#1e3269; background: url(../../images/mrs/icon_tableth.png) no-repeat 1px 50%; background-size: 8px 8px; padding-left:12px;     font-family: 'Noto Sans Korean';
    font-size: 14px;
    font-weight: 600;}
table.table_type2 {width:100%;}
table.table_type2 th, table.table_type2 td {padding:2px 0px; text-align:left;}
table.table_type2 th {width:20%; color:#1e3269; font-weight:bold; background: url(../../images/mrs/icon_tableth.png) no-repeat 1px 50%; background-size: 8px 8px; padding-left:12px;}
table.table_type2 td {width:30%;}
table.table_type2 td.padding-right {padding-right:5px;} table.table_type2 {width:100%;}
table.table_type2-1 {width:100%;}
table.table_type2-1 th, table.table_type2-1 td {padding:4px 0px; text-align:left;}
table.table_type2-1 th {width:20%; color:#1e3269; font-weight:bold; background: url(../../images/mrs/icon_tableth.png) no-repeat 1px 50%; background-size: 8px 8px; padding-left:12px;}
table.table_type2-1 td {width:30%;}
table.table_type2-1 td.padding-right {padding-right:5px;}
table.table_type3 {width:100%; border-top:2px solid #1e3269;}
table.table_type3 th, table.table_type3 td {padding:8px 0px; text-align:center; border-bottom:1px solid #ccc;}
table.table_type3 th {color:#1e3269;}
table.table_type3 td {color:#666;}


div.table_type2-1 {width:100%;}
div.table_type2-1 div {padding:4px 0px; text-align:left;}
div.table_type2-1 div div:first {width:20%; color:#1e3269; font-weight:bold; background: url(../../images/mrs/icon_tableth.png) no-repeat 1px 50%; background-size: 8px 8px; padding-left:12px;}
div.table_type2-1 div div {width:30%;}
div.table_type2-1 div div.padding-right {padding-right:5px;}














/*graph그래프 화면*/
.title{height:33px; color:pink; font-weight:bold;font-size:25px;line-height:33px;text-align:center}
#graph{width:100%; height:1440px;color:white}
.chart_wrap{width:32%;margin:0.5%;height:100%;display: inline-block;}
.chart_wrap:first-child{margin-left:0.5%}
.chart{height:400px;
    display: inline-block;
    color: white;
    text-align: center;
    background: #2b303b;
    margin: 5px 2%;
    border-radius: 5px;
    width: 96%;
    padding:5px 2%
}
.datalist{
    display: inline-block;
    color: white;
    text-align: center;
    background: #2b303b;
    margin: 5px 2%;
    border-radius: 5px;
    width: 96%;
    padding:5px 2%
}

        
        
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
    line-height: 160%;    
}
        
        
        
/* 2019-05-21 장비상태 작업 부분 : 정수정 */    
.gb-system-wrap {height:798px;padding:14px 2%;text-align:left;box-sizing:border-box;}
.gb-system-wrap div,.gb-system-wrap p,.gb-system-wrap em,.gb-system-wrap span,.gb-system-wrap dl,.gb-system-wrap dt,.gb-system-wrap dd,.gb-system-wrap ul,.gb-system-wrap li {margin:0px;padding:0px;}
.gb-system-wrap h1, .gb-system-wrap h2, .gb-system-wrap h3, .gb-system-wrap h4, .gb-system-wrap h5, .gb-system-wrap h6 {margin:0;padding:0;}

h3.gb-system-name {width:100%;padding-left:10px;margin-bottom:7px;background:#41454f;border-radius:23px;line-height:32px;font-size:15px;font-weight:700;box-sizing:border-box;}

/* 기본 박스 */
dl.gb-system-option-box {width:100%;height:auto;padding:0px 5px;box-sizing:border-box;}
dl.gb-system-option-box+dl {margin-top:10px;}
dl.gb-system-option-box dt {width:100%;margin-bottom:4px;border-bottom:1px solid #fff;line-height:26px;font-size:12px;font-weight:700;box-sizing:border-box;}
dl.gb-system-option-box dd {position:relative;width:100%;padding-left:100px;line-height:26px;font-size:12px;font-weight:400;box-sizing:border-box;}
dl.gb-system-option-box dd::after {position:absolute;display:block;top:0px;left:0px;width:100%;height:11px;border-bottom:1px dashed #383e4a;content:'';z-index: 0;}
dl.gb-system-option-box dd.no-line::after {border-bottom:0px;content:'';}/* 가이드선 없음 */
dl.gb-system-option-box dd p.option-label {position:absolute;top:0px;left:0px;width:100px;background:#2b303b;z-index:1;box-sizing:border-box;}
dl.gb-system-option-box dd p.option-label::before {display:inline-block;margin-right:5px;content:'>';}
dl.gb-system-option-box dd p.option-value {position:relative;width:100%;text-align: right;z-index:1;box-sizing:border-box;}
dl.gb-system-option-box dd p.option-value span,div.option-percent span {padding-left:15px;background:#2b303b;box-sizing:border-box;}
dl.gb-system-option-box dd p.option-value span em,div.option-percent span em {padding-left:8px;color:#87cee6;font-style:normal;box-sizing:border-box;}/* 단위 */
/* dt없을때 .single */
dl.gb-system-option-box.single dd p.option-label {position:absolute;top:0px;left:0px;width:100px;background:#2b303b;font-weight:700;z-index:1;box-sizing:border-box;}
dl.gb-system-option-box.single dd p.option-label::before {display:inline-block;margin-right:0px;content:'';}

/* 상태 */
dl.gb-system-option-box dd p.option-value span.condition {position:relative;padding-left:40px;font-weight:700;box-sizing:border-box;}
dl.gb-system-option-box dd p.option-value span.condition::before {display:block;position:absolute;top:50%;left:15px;width:16px;height:16px;margin-top:-8px;border-radius:100%;vertical-align:middle;content:'';box-sizing:border-box;}
dl.gb-system-option-box dd p.option-value span.condition.type-normal::before {background:#05a21b;}
dl.gb-system-option-box dd p.option-value span.condition.type-yellow::before {background:#fe9a2e;}
dl.gb-system-option-box dd p.option-value span.condition.type-red::before {background:#ff0000;}

/* 퍼센트 */
dl.gb-system-option-box dd div.option-percent {position:relative;width:100%;text-align: right;z-index:1;box-sizing:border-box;}
/* 퍼센트-게이지부분 */
dl.gb-system-option-box dd div.option-percent .percent {position:absolute;top:50%;right:70px;width:159px;height:14px;margin-top:-7px;background:#222732;box-sizing:border-box;}
dl.gb-system-option-box dd div.option-percent .percent .percent-bg {position:absolute;top:0px;left:0px;width:100%;height:100%;background:url(../../images/bg_percent.png) no-repeat; background-size:cover;box-sizing:border-box;}/* 이미지마스크 */
dl.gb-system-option-box dd div.option-percent .percent .percent-gauge {display:block;height:100%;background:#8a93a4;box-sizing:border-box;}

/* 프로세스 */
/* 동작상태 - 기본 */
dl.gb-system-option-box dd.process-line {height:60px;}
dl.gb-system-option-box dd.process-line p.option-label {line-height:60px;}
dl.gb-system-option-box dd.process-line::after {height:16px;border-bottom:1px solid #8a93a4;content:'';}
dl.gb-system-option-box dd ul.option-process {display:inline-block;position:relative;width:100%;text-align:center;z-index:1;box-sizing:border-box;}
dl.gb-system-option-box dd ul.option-process::after {display:block;clear:both;content:'';}
dl.gb-system-option-box dd ul.option-process li {float:left;position:relative;width:20%;height:100%;padding-top:28px;list-style: none;}
dl.gb-system-option-box dd ul.option-process li p.process-label{color:#8a93a4;line-height:140%;}
dl.gb-system-option-box dd ul.option-process li span.process-marker{display:block;position:absolute;top:10px;left:50%;width:12px;height:12px;margin-left:-6px;background:#2b303b;border:2px solid #8a93a4;border-radius:100%;box-sizing:border-box;}
dl.gb-system-option-box dd ul.option-process li.active span.process-marker{top:8px;left:50%;width:16px;height:16px;margin-left:-8px;background:#0a6ecd;border:0px;}
dl.gb-system-option-box dd ul.option-process li.active p.process-label{color:#fff; font-weight:700;}
/* 측정위치 - 3개열 */
dl.gb-system-option-box dd.process-line.col3 {height:46px;}
dl.gb-system-option-box dd.process-line.col3 p.option-label {line-height:46px;}
dl.gb-system-option-box dd.process-line.col3::after {height:12px;}
dl.gb-system-option-box dd.col3 ul.option-process li span.process-marker{top:7px;}
dl.gb-system-option-box dd.col3 ul.option-process li.active span.process-marker{top:5px;}
dl.gb-system-option-box dd.col3 ul.option-process li+li {margin-left:20%;}