@charset "utf-8";
.wrap {position:relative; margin:0 2%;}

@media screen and (max-width:640px) {
.wrap {margin:0 4%;}
}



/* HEADER */
#header {width:100%; position:fixed; top:0; z-index:11;}
#header .head_top {position:relative; width:100%; height:50px; background:#231f20;}
#header .head_top:after {clear:both; display:block; content:"";}
#header .head_top h1 {width:50%; float:left; }
#header .head_top h1 img {width:94px; padding:11px 0 0 0;}
#header .head_top .icon {width:80px; float:right; text-align:right;}
#header .head_top .icon a {display:inline-block; margin:10px 0 0 0;}
#header .head_top .icon a.account img {width:27px;}
#header .head_top .icon a.setting {margin-left:7px;}
#header .head_top .icon a.setting img {width:30px;}



/* SUB TITLE */
#header .sub_title {position:relative; width:100%; height:34px; background:#fdb514;}
#header .sub_title p {line-height:34px; vertical-align:middle; color:#222; font-weight:400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;}



/* BOTTOM MENU */
.bottom_menu {width:100%; height:; position:fixed; bottom:0; background:#fff; border-top:1px solid #e9e9e9; z-index:12;}
.bottom_menu ul {position:relative; }
.bottom_menu ul:after {clear:both; display:block; content:"";}
.bottom_menu ul li {width:20%; float:left; position:relative; text-align:center;}
.bottom_menu ul li dl {padding:6px 0 4px 0;}
.bottom_menu ul li dl a {display:block; width:100%; height:100%;}
.bottom_menu ul li dl dt span img {width:30px;}
.bottom_menu ul li dl dt span.focus {display:none;}
.bottom_menu ul li dl dt span.num {display:block; width:18px; height:18px; line-height:18px; border-radius:10px; position:absolute; left:50%; margin:-2px 0 0 6px; background:#231f20; color:#fff; font-size:12px; font-weight:600;}
.bottom_menu ul li dl dd {margin:2px 0 0 0;}
.bottom_menu ul li dl dd p {font-size:13.5px; position:}

.bottom_menu ul li.on dl dt span.normal {display:none;}
.bottom_menu ul li.on dl dt span.focus {display:block;}
.bottom_menu ul li.on dl dd p {color:#fdb514; font-weight:500;}



/* CONTENTS */
.contents {position:relative; padding:84px 0 86px 0;  z-index:10;}

@keyframes blink-effect {
    50% {
      opacity: 0;
    }
  }
  
  .blink {
    animation: blink-effect 1s step-end infinite;
  
    /*
    animation-name: blink-effect;
    animation-duration: 1s;
    animation-iteration-count:infinite;
    animation-timing-function:step-end;
    */
  }

.msg-table {
  border-radius: 3px;
  -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
  background-color: white;

  width: 98%;
  margin-left: 32px;
  text-align: center;
}
.msg-table > thead {
  background-color: #111111;
  color: white;
  font-size: 20px;
}

.msg-table > tbody {
  font-size: 18px;
}

.msg-table th, td {
  padding: 12px;
}

.msg-table td.bold {
  font-weight: bold;
}

.msg-table td.norm {
  color : #78c62e;
  font-weight: bold;
}


.msg-table td.caution {
  color : #ffa800;
  font-weight: bold;
}

.msg-table td.warn {
  color : #e84a4a;
  font-weight: bold;
}


.msg-table tr {
  border-bottom: 1px solid #f1f1f1;
}

.msg-table select {
  width: 85px;
  height: 34px;
  border-radius: 5px;
  font-size: 18px;
}

.msg-table button.caution {
  font-size: 18px;
  color: white;
  font-weight: bold;
  width: 90px;
  border: 1px solid #ffa800;
  padding: 5px;
  border-radius: 5px;
  background: #ffa800;
}

.msg-table button.warn {
  font-size: 18px;
  color: white;
  font-weight: bold;
  width: 90px;
  border: 1px solid #e84a4a;
  padding: 5px;
  border-radius: 5px;
  background: #e84a4a;
}

.msg-table button.safe {
  font-size: 18px;
  color: white;
  font-weight: bold;
  width: 90px;
  border: 1px solid #78c62e;
  padding: 5px;
  border-radius: 5px;
  background: #78c62e;
}

.msg-table button.off {
  font-size: 18px;
  color: white;
  font-weight: bold;
  width: 90px;
  border: 1px solid #999999;
  padding: 5px;
  border-radius: 5px;
  background: #999999;
}

.sealed-table {
  margin: auto;
}

.sealed-table td {
  padding: 5px;
}

.sealed-table .sealed-head {
  background: #f4f4f4;
  padding: 0% 0;
  /*
  border-top: 1px solid #ddd;;
  border-right: 1px solid #ddd;;
  border-left: 1px solid #ddd;;
  */
  text-align: center;
  display: inline-block;
  margin: 0 0 0 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 68px;
  vertical-align: middle;
  color: #222222;
  border-radius: 5px 5px 0px 0px;
  width: 445px;
}

.sealed-table .sealed-head p.img {
  display: inline-block;
  line-height: 42px;
  vertical-align: middle;
  width: 57px;
  margin-top: -10px;
}

.sealed-table .sealed-cont {
  background: white;
  padding: 0% 0;
  /*
  border-right: 1px solid #ddd;;
  border-left: 1px solid #ddd;;
  border-bottom: 1px solid #ddd;;
  */
  border-radius: 0px 0px 5px 5px;
  width: 445px;
  text-align: center;
  font-family: 'Heebo';
}

.sealed-table .sealed-cont p.number {
  display: inline-block;
  vertical-align: middle;
  letter-spacing: 0.5px;
  font-size: 55px;
  font-weight: 700;
  line-height: 58px;
  padding: 20px;
}

.sealed-table .sealed-cont.green p.number {
  color: #099a5b;
}

.sealed-table .sealed-cont.yellow p.number {
  color: #e3a707;
}

.sealed-table .sealed-cont.red p.number {
  color: #d4282c;
}

.sealed-table .sealed-cont.green p.notice {
  background: #099a5b;
}

.sealed-table .sealed-cont.yellow p.notice {
  background: #e3a707;
}

.sealed-table .sealed-cont.red p.notice {
  background: #d4282c;
}

.sealed-table .sealed-cont p.notice {
  display:inline-block;
  vertical-align: middle;
  width:70px;
  height:70px;
  line-height:71px;
  font-size:14px;
  font-weight:500;
  border-radius:50%;
  margin:-5px 0 0 5px;
  color:#fff;
  background-color: #555555;
  font-weight: bold;
}

.sealed-table .sealed-head small {
  font-weight: 600;
  font-size: 17px;
}

.sealed-table .sealed-cont span {
  font-weight: 400;
  font-size: 34px;
  margin-left: 5px;
}

.sealed-info {
  float: right;
  margin: 0px 135px 0px 0px;
  font-size: 24px;
  line-height: 68px;
  vertical-align: middle;
  color: white;
}

.sealed-info span {
  vertical-align: middle;
}

.sealed-info select {
  padding: 0px 15px 0px 15px;
  border-radius: 50px;
  color: #222222;
  vertical-align: middle;
}

.sealed-info .on {
  padding: 7px 20px 7px 20px;
  font-size: 14px;
  color: white;
  border-radius: 18px;
  background-color: #0bba82;
  vertical-align: baseline;
}

.sealed-info .off {
  padding: 7px 20px 7px 20px;
  font-size: 14px;
  color: white;
  border-radius: 18px;
  background-color: #ed4956;
  vertical-align: baseline;
}

.sealed-info .div {
  color: #d3d3d3;
  opacity: 0.6;
}

.sealed-container {
  background: #121212 url(../img/viewer/view_bg.jpg) center bottom no-repeat;
  width: 98%;
  height: 634px;
  margin: 0 auto;
  margin-left: 25px;
  border-radius: 5px;
}

#statForm {
  color: #0d0d0d;
  padding: 20px;
  text-align: right;
  margin-right: 42px; 
}
/*
#statForm input[type='date']::before {
  content: attr(placeholder);
  float: left;
  color: #4f4f4f;
  line-height: 1.4;
  background: #cccccc;
  position: absolute;
  margin-left: -145px;
  margin-top: -4px;
  padding: 3.5px;
}
*/
#statForm input[type='date'] {
  font-size: 15px;
  padding: 4.2px;
  margin-left: 3px;
  padding-left: 0px;
  border: 1px solid #cccccc;
  text-align: center;
  width: 100px;
}

#statForm input[type='text'] {
  font-size: 15px;
  padding: 4.2px;
  margin-left: 3px;
  padding-left: 0px;
  border: 1px solid #cccccc;
  text-align: center;
  width: 150px;
  vertical-align: top;
  height: 20px;
}

#statForm label {
  background: #cccccc;
  color: #4f4f4f;
  font-size: 14px;
  padding: 6.8px 5.5px 5.5px 5.5px;
  margin-right: -3.4px;
  text-align: center;
}

#statForm input[type='submit'] {background:#0d0d0d; border:1px solid #0d0d0d; color:#fff; padding: 4px}
#statForm input[type='submit']:hover {background:none; color:#0d0d0d;}

#statForm input[type='button'] {background:#0d0d0d; border:1px solid #0d0d0d; color:#fff; padding: 4px}
#statForm input[type='button']:hover {background:none; color:#0d0d0d;}

.statChartGrid {
  display: grid; grid-template-columns: repeat(2, 750px); margin-left: 100px;
}
.statChart {
  background-color: white; border-radius: 10px; padding: 8px;
  -webkit-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
}

table.msg-table tr.odd { background-color: #f3f3f3 !important; }
table.msg-table tr.even { background-color: white !important; }

.exc-table {
  border-radius: 3px;
  -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
  background-color: white;
  margin-left: 32px;
  text-align: center;
  min-width: 185px;
  min-height: 270px;
}

.exc-table > thead {
  background-color: #6e6e6e;
  color: white;
  font-size: 20px;
}

.exc-table > tbody {
  font-size: 18px;
}

.exc-table th {
  vertical-align: middle;
  border: 1px solid #333;
  padding: 5px;
  font-size: 13px;
}

.exc-table td {
  vertical-align: middle;
  border: 1px solid #333;
  padding: 5px;
  font-size: 13px;
}

.exc-table td.bold {
  font-weight: bold;
}

.exc-table td.norm {
  color : #78c62e;
  font-weight: bold;
}
.exc-list ul {
  width: 395px;
  float: left;
  margin-left: 10px;
}
.exc-list ul li {
  width: 47%;
  display: inline-block;
}

.exc-list .exc-title {
  margin-left: 32px;
  margin-bottom: 10px;
  background-color: #777777;
  color: white;
  border-bottom: 2px solid #333;
  width: 95%;
  text-align: center;
}

.exc-site {
  width: 100%;
}

.exc-table tfoot tr {
  background-color: #8f8e8e;
  color: white;
}

.exc-table td.st {
  background-color: #8f8e8e;
  color: white;
}
.exc-table tfoot tr {
  background-color: #6e6e6e;
  color: white;
}

.exc-view ul {
  float: left;
  margin-left: 10px;
  width: 100%;
}
.exc-view ul li {
  display: inline-block;
  width: 100%;
}

.exc-view .exc-title {
  margin-left: 32px;
  margin-bottom: 10px;
  background-color: #777777;
  color: white;
  border-bottom: 2px solid #333;
  width: 95%;
  text-align: center;
}