@font-face {
    font-family: 'xeicon';
    src:url('../fonts/xeicon.eot?v=2.2.0');
    src:url('../fonts/xeicon.eot?#iefix&v=2.2.0') format('embedded-opentype'),
        url('../fonts/xeicon.woff2?v=2.2.0') format('woff2'),
        url('../fonts/xeicon.woff?v=2.2.0') format('woff'),
        url('../fonts/xeicon.ttf?v=2.2.0') format('truetype'),
        url('../fonts/xeicon.svg?v=2.2.0#xeicon') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'icomoon';
    src:    url('../fonts/icomoon.eot?uevi4o');
    src:    url('../fonts/icomoon.eot?uevi4o#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?uevi4o') format('truetype'),
        url('../fonts/icomoon.woff?uevi4o') format('woff'),
        url('../fonts/icomoon.svg?uevi4o#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
	font:1em/1.4em notokr-regular, "Malgun Gothic", candara, dotum;
	overflow:hidden
}
header {
	position:fixed;
	width:100%;
	background-color:#fff;
	border-top:solid 3px #d50779;
	height:50px;
	line-height:50px;
	font-size:20px;
	font-weight:300;
	margin:0;
	z-index:2
}
section {
	padding-top:50px;
	width:83%;
	height:auto;
	background-color:#D5D9DD;
	float:right;
	overflow:hidden;
	margin:0px
}
th {
	text-align:center
}
table {
	width:100%
}
th {
	border:solid 1px rgb(244, 244, 244);
	padding:8px
}
td {
	border:solid 1px rgb(244, 244, 244);
	padding:8px
}
.box-header {
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	background-color:#F3F4F5;
	font-size:12px;
	padding:5px;
	color:#000;
	line-height:22px;
	text-align:left;
	-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
			box-sizing:border-box
}
.box-title {
	display:inline-block;
	font-size:12px;
	font-weight:500;
	line-height:12px;
	margin:0;
	-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
			box-sizing:border-box    		
}
.box-body {
	border-bottom-left-radius:4px;
	border-bottom-right-radius:4px;
	padding:5px;
	font-size:12px;
	font-weight:normal;
	line-height:20px;
	text-align:center
}
.panel-pink {
  border-color:#4a5568;
  border-radius:4px;
  border-width:0px
}
.panel-pink > .panel-heading {
  color:#fff;
  background-color:#4a5568;
}
.panel-pink > .panel-heading .badge {
  color: #4a5568;
  background-color:#fff
}
.panel-pink > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color:#4a5568
}
.helmetgroup {
	float:left;
	width:33%;
	text-align:center;
	position:relative
}
.helmet {
	float:left;
	margin-left:1%;
	width:66%;
	text-align:center;
	position:relative
}
.box-header>.box-tools [data-toggle="tooltip"] {
	position:relative
}
.header>.box-tools.pull-left .dropdown-menu {
	right:0;
	left:auto
}
.box.box-solid > .box-header > .box-tools .btn {
  border:0;
  box-shadow:none
}
.camPanel {
	text-align:center;
	height:100%;
	overflow:hidden;
	position:relative
}
.camPanelSub {
	margin-left:0px;
	margin-right:5px;
	display:inline-block
}
.box-tools {
	line-height:12px
}
.btn-pink {
	color:#3C3C3C;
	background-color:#F1F1F1;
	padding:1px 5px 1px 5px;
	border-color:#A5A5A6
}
.btn-gray {
	color:#000;
	background-color:#f1f1f1;
	padding:1px 5px 1px 5px;
	border-color:#a5a5a6
}
.btn-gray.active,.btn-gray.focus,.btn-gray:active,.btn-gray:focus,.btn-gray:hover,.open>.dropdown-toggle.btn-gray {
	color:#000;
	background-color:#f1f1f1;
	padding:1px 5px 1px 5px;
	border-color:#a5a5a6
}
.btn-gray.active,.btn-gray:active,.open>.dropdown-toggle.btn-gray {
	background-image:none
}
.btn-gray.disabled,.btn-gray.disabled.active,.btn-gray.disabled.focus,.btn-gray.disabled:active,.btn-gray.disabled:focus,.btn-gray.disabled:hover,.btn-gray[disabled],.btn-gray[disabled].active,.btn-gray[disabled].focus,.btn-gray[disabled]:active,.btn-gray[disabled]:focus,.btn-gray[disabled]:hover,fieldset[disabled] .btn-gray,fieldset[disabled] .btn-gray.active,fieldset[disabled] .btn-gray.focus,fieldset[disabled] .btn-gray:active,fieldset[disabled] .btn-gray:focus,fieldset[disabled] .btn-gray:hover {
	background-color:#f1f1f1;
	border-color:#a5a5a6
}
.btn-gray .badge {
	color:#d50779;
	background-color:#fff
}

.panel {
	box-shadow:none;
	margin:5px
}
#leftMenu {
	width:17%;
	height:100%;
	background-color:#D5D9DD;
	border-right:solid 10px #fff;
	padding-top:10px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
	margin:0
}
#leftContent {
	margin-top:30px;
	background-color:#D5D9DD;
	height:calc(100% - 50px);
	text-align:center;
	padding:0px 10px 10px 10px;
	overflow:auto
}
.emptyPanel {
	display: -webkit-flex;
	display:         flex;
	-webkit-align-items:center;
			align-items:center;
	-webkit-justify-content:center;
			justify-content:center
}
.leftGroup {
	border-radius:4px;
	margin-top:20px
}
.leftGroupBody {
	margin:0px;
	font-size:12px;
	font-weight:normal;
	line-height:20px;
	text-align:center
}
.list-group-item {
	padding:3px 5px 3px 5px;
	line-height:20px;
}
.camSelect {
	color:#000
}
.btn-pink-top {
	border-radius:0px;
	background-color:#fff;
	color:#000;
	font-weight:bold;
	padding-top:12px;
	padding-bottom:10px;
	border-top-width:0px;
	border-bottom-width:0px;
	border-right-width:0px;
	border-left:solid 1px #D5D9DD;
	vertical-align:middle
}
.btn-pink-top i {
	font-size:25px
}
img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}
@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-o-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.blink {
    -webkit-animation: blink 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: blink 1s;
    -moz-animation-iteration-count: infinite;
    -o-animation: blink 1s;
    -o-animation-iteration-count: infinite;
}
.xi-signal-1:before {
	font-weight:bold;
	font-family: 'xeicon';
	font-style:normal;
	font-size:1.33333333em;
	line-height:.75em;
	vertical-align:-15%;
    content: "\eaf2";
    color:#F00;
}
.xi-signal-2:before {
	font-weight:bold;
	font-family: 'xeicon';
	font-style:normal;
	font-size:1.33333333em;
	line-height:.75em;
	vertical-align:-15%;
    content: "\eaf3";
}
.xi-signal-3:before {
	font-weight:bold;
	font-family: 'xeicon';
	font-style:normal;
	font-size:1.33333333em;
	line-height:.75em;
	vertical-align:-15%;
    content: "\eaf4";
}
.xi-signal-4:before {
	font-weight:bold;
	font-family: 'xeicon';
	font-style:normal;
	font-size:1.33333333em;
	line-height:.75em;
	vertical-align:-15%;
    content: "\eaf5";
}
.xi-signal-0:before {
	font-weight:bold;
	font-family: 'xeicon';
	font-style:normal;
	font-size:1.33333333em;
	line-height:.75em;
	vertical-align:-15%;
    content: "\eaf6";
    color:#F00;
}
.modal-content {
	border:solid 2px #ec018c;
	width:900px;
	height:50px;
	text-align:center;
	vertical-align:middle;
	display:table-cell;
	font-size:14px;
	font-weight:bold
}
.download:before {
	cursor:default;
	margin-right:3px;
	font-weight:bold;
	font-family: 'xeicon';
	font-style:normal;
	font-size:1.33333333em;
	line-height:.75em;
	vertical-align:-50%;
    content: "\eb7c";
    -webkit-animation: blink 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: blink 1s;
    -moz-animation-iteration-count: infinite;
    -o-animation: blink 1s;
    -o-animation-iteration-count: infinite;
}
.downloadFail:before {
	cursor:pointer;
	margin-right:3px;
	font-weight:bold;
	font-family: 'xeicon';
	font-style:normal;
	font-size:1.33333333em;
	line-height:.75em;
	vertical-align:-50%;
	color:#f00;
    content: "\e925";
}
.downloadComplete:before {
	cursor:pointer;
	margin-right:3px;
	font-weight:bold;
	font-family: 'xeicon';
	font-style:normal;
	font-size:1.33333333em;
	line-height:.75em;
	vertical-align:-50%;
	color:#2F9D27;
    content: "\e92c";
}
.logo {
	left:0px;
	top:0px;
	height:47px;
	vertical-align:top;
}
.xi-heart:before {
	font-weight:bold;
	font-family: 'xeicon';
	font-style:normal;
	font-size:1.33333333em;
	line-height:.75em;
	vertical-align:-15%;
    content: "\ea10";
    color:#F361A6;
}
.xi-arrow-1:before {
	font-family: 'icomoon';
	font-style:normal;
    content: "\ea32";
}
.xi-arrow-2:before {
	font-family: 'icomoon';
	font-style:normal;
    content: "\ea33";
}
.xi-arrow-3:before {
	font-family: 'icomoon';
	font-style:normal;
    content: "\ea34";
}
.xi-arrow-4:before {
	font-family: 'icomoon';
	font-style:normal;
    content: "\ea35";
}
.xi-arrow-5:before {
	font-family: 'icomoon';
	font-style:normal;
    content: "\ea36";
}
.xi-arrow-6:before {
	font-family: 'icomoon';
	font-style:normal;
    content: "\ea37";
}
.xi-arrow-7:before {
	font-family: 'icomoon';
	font-style:normal;
    content: "\ea38";
}
.xi-arrow-8:before {
	font-family: 'icomoon';
	font-style:normal;
    content: "\ea31";
}
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.4;
  visibility: visible;
  filter: alpha(opacity=0);
  opacity: 0;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
/*   color: #000; */
  text-align: center;
  text-decoration: none;
/*   background-color: #fff; */
  border-radius: 4px;
}