@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
/* CSS Document */
html, body {
	font-family: "Nanum Gothic", "Malgun Gothic", Dotum, "Times New Roman", Helvetica, Arial, 'Anton', Impact, sans-serif, "Apple SD Gothic Neo", "AppleGothic";
	line-height: 1.5;
	color: #000;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
a, img, object {
	outline: none;
}
img {
	border: 0;
	max-width:100%;
	height:auto;
}
a {
	text-decoration: none;
}
a:link, a:active, a:visited {
	color: #22557D;
	text-decoration: none;
}
a:hover {
	color: #DE2649;
	text-decoration: none;
}
.btn-default {
	border: 1px solid #CED4DA;
}
.btn-default:hover {
	background-color: #F0F0F0;
}
#moremenu {
	position:fixed;
	bottom:55px;
	left: 10px;
	border:1px solid #CDD8E4;
	display:none;	
	background-color:rgba(241,249,253,1.0);
	overflow:auto;
	padding:20px;		
	border-radius: 5px;
	-webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
	z-index:300;     
}
.scrollbar-style {
	scrollbar-color: #92C2DC;
	scrollbar-width: thin;
}
.scrollbar-style::-webkit-scrollbar
{
	width: 3px;
	background-color: #F5F5F5;
}
.scrollbar-style::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}
.scrollbar-style::-webkit-scrollbar-thumb
{
	background-color: #92C2DC;
}
#btncontrol {
	min-width:60px;
	text-align:left;
}
.moreulvertical {
	margin:0;
	padding:0;
	list-style: none;
}
.moreulvertical li {
	line-height: 50px;
}
.moreulhorizontal {
	margin:0;
	padding:0;
	list-style: none;
}
.moreulhorizontal ul, .moreulhorizontal li {	
	display:inline-block;
	line-height: 50px;
}
.moreulhorizontal li div {
	float:left;
}
.moreulhorizontal li ul {
	float:right;
	height:52px;
	overflow: hidden;
}
.moreulhorizontal #subboard {
	display:none;
	list-style: none;
	background:#F5FAFE;
	margin:0px 0px 0px 10px;
	padding:0px 10px;
	border:1px solid #CDD8E4;
	overflow:auto;
	border-radius: 5px;
	-webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px; 
}
#subboard {
	display:none;
	list-style: none;
	background:#F5FAFE;
	margin:0;
	padding:10px;
	border:1px solid #CDD8E4;
	overflow:auto;
	border-radius: 5px;
	-webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}
#capturelistview {
	display:none;
	border:1px solid #CDD8E4;
	background-color:rgba(241,249,253,1.0);
	padding:10px;
	position:absolute;
	bottom:55px;
	right: 10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;         
	z-index:300;	
}
.capturelist {
	margin:0;
	padding:0;
	list-style: none;
}
.captureli {
	display:block;
	border:1px solid #DDDDDD;
	background-color:#ffffff;
	margin-bottom:3px;
	width:50px;
	height:50px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
    cursor:pointer;
    position:relative;
}
.captureimage {
	display:block;
	width:50px;
	height:50px;
}
.capturedel {
	position:absolute;
	width:17px;
	height:17px;
	top:0px;
	right:0px;
	z-index:500;
	cursor:pointer;
	color:#FF0000;
}
.capturedel:hover {
	z-index:500;
	text-shadow: 0px 0px 10px #FF0000; 
}
#notelistview {
	display:none;
	border:3px solid #CDD8E4;
	background:#F1F9FD;
	padding:0;
	width:380px;
	height:400px;
	position:absolute;
	bottom:55px;
	margin-left:-180px;
	left:50%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;         
	z-index:200;	
}
#notehead {
	width:100%;
	height:20px;
	background:#B9D8E7;
	cursor:move;
}
#notehide {
	display:inline-block;
	width:16px;
	height:16px;	
	vertical-align:top;
	margin-top:2px;
	cursor:pointer;
}
#notelist {
	width:100%;
	height:304px;
	background:#FFFFFF;
	overflow: auto;
}
#notetextareawrap {
	width:100%;
	height:70px;
	background:#CDD8E4;
}
#noteinput {
	display:inline;
	width:304px;
	max-width:304px;
	height:70px;
	max-height:70px;
	border: 1px solid #BDBDBD;
	border-radius: 2px;
	-webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
    vertical-align: middle;
    resize:none;
}
#notebtnsave {
	display:inline;
	width:70px;
	height:70px;
	background:#DAEDF6;
	border: 1px solid #BDBDBD;
	vertical-align: middle;
}
.notewrap {
	width:98%;
	margin:5px auto;
	padding:5px;
	background:#E9F4F9;
	border-radius: 2px;
	-webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
}
.notedate {
	font-size:10pt;
}
.noteedit, .noteeditok, .notedel {
	margin:0 5px;
	font-size:10pt;
	float:right;
	cursor:pointer;
}
.notecontent, .notetextarea {
	display:inline-block;
	clear:both;
	width:100%;
	max-width:100%;
	overflow:visible;
	white-space: normal;
	word-break:break-all;
}

.noteeditok, .notetextarea {
	display:none;
}
#whiteboard, #usercontrolpannel, #shareboard{
	cursor:pointer;
}
#managepannel {
	position:fixed;
	bottom:0;
	border:1px solid #CDD8E4;
	width:100%;
	/*background-color:rgba(255,249,136,0.5);*/
	background-color:rgba(208,234,248,0.5);
	padding:10px;
	font-size:12px;
	margin:0 auto;
	text-align:center;
	z-index:300;
	/* These three lines are for transparency in all browsers. 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:.5; */
}
#remoconpannel {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:300;
	background-color:rgba(255,249,136,0.5);
	padding:10px;
	text-align:center;
	display:none;
}
.reconp {
	height:25%;
}
.reconpbtn {
	width:100%;
	height:95%;
	font-size:50px;	
}
#state_wrap {
	position:relative;
}
#loadingstate {
	margin: auto;
  	position: absolute;
  	top: 0; left: 0; bottom: 0; right: 0;
	background: url("/images/loader-big.gif") no-repeat center;
	width:200px;
	max-width:600px;
	height:50px;
	text-align:center;
	z-index:300;
	display:none;
}
#state {
	position:absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	width:300px;
	max-width:600px;
	height:auto;
	text-align:center;
	z-index:1000;
	padding: 6px 12px;
	display:none;
	background-color: #fff;
  	border: 1px solid #ccc;
  	border-radius: 4px;
  	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(10, 0, 0, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 0, 0, .6);
  	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
#body_wrap {
	width: 100%; 
	height: 100%; 
	position: absolute; 
	overflow-y:auto;
	z-index:1;
	padding-bottom:100px;
}
#contents_wrap {
	margin:0 auto;
	position:relative;
	max-width:1024px; 
	min-width:150px;
	min-height:600px; 
}
#drawCanvas {
	display:none; 
	position: absolute;	
	top:0;
	left:0; 
	background:none;
	z-index:100;
	cursor:url(/images/pencilcursors.png), auto;
}
#content {
	margin:0 auto;
	padding:20px;
	max-width:1024px;
	min-width:150px;
/* 	min-height:600px; */ 
	font-size:16px;	
	overflow:visible;
	z-index:10;
/*	word-break: keep-all;
	word-wrap: break-word; */
}
#urlcontent {
	border:3px solid #617E89;
	background-color:#FFFFFF;
	display:none;
	position: absolute;	
	top:0;
	left:0; 
	margin:0 auto;
	padding:0;
	width:100%;
	max-width:1024px;
	height:100%;
	z-index:20;
}
#chatwrap {
	position:absolute;
	display:none;
	width:270px;
	top:10px;
	right:25px;
	background:#ccc;
	border-radius: 5px;
	-webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
	z-index:200;	
}
#chatwindow {
	width:100%;
    padding: 5px;
    border: 1px solid #ccc;
  	border-radius: 4px;
  	background-color:#ccc;
  	display:block;
}
#videos-container {
	width:100%;
	height:171px;
	border: 1px solid #ccc;
	margin-bottom:10px;
	background-color:#fff;
	display:none;
}
#chatcall {
	width:100%;
	height:400px;
	border: 1px solid #ccc;
	background-color:#fff;
	padding:5px;
	overflow:auto; 
    white-space: normal;
	word-break:break-all;    
}
#chatinputwrap {
	width:100%;
	height:30px;
	margin-left:0px;
}
#chatinput {
	height:30px;
	max-height:30px;
	wrap:off;
	white-space:nowrap;
	overflow:hidden;
	border: 1px solid #BDBDBD;
	border-radius: 2px;
	-webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
    vertical-align: middle;
    resize:none;
}
#chatbutton {
	height:30px;
	background:#DAEDF6;
	border: 1px solid #BDBDBD;
	font-size:15px;
}
#urladdress {
	position:fixed;
	bottom:55px;
	left:200px;
	border:1px solid #CDD8E4;
	background-color:rgba(241,249,253,1.0);
	overflow:auto;
	padding:10px;
	display:none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
	z-index:300;     
}
#updown {
	position:fixed;
	bottom:55px;
	right:10px;
	z-index:190;
	color:#86B8D1; 
	display:none;   
}

video {
	width:228px;
}
.btn_wrap {
/*	min-width:480px; */
}
#navi {
	display:inline-block;
	min-width:220px;
}
.cbtn {
	margin-top:3px;
	display:inline-block;
	padding:4px;
	font-size:13px;
	font-weight:bold;
	text-align:justify;
}
#question {
	padding:20px;
}
#btnfirst, #btnlast {
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
#btnfirst:hover, #btnlast:hover {
	opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}
#btnprev, #btnnext, #pennote, .menuicons{
	opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
#btnprev:hover, #btnnext:hover, #pennote:hover, .menuicons:hover{
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
.menudisable {
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
.questionregist {
	border:1px solid #EEE;
	padding-bottom: 20px;
}
.caseitem {
	margin-left:20px;
	padding:20px;
}
.caseitem ul {
	list-style:none;
	line-height:30px;
}
.checkcase {
	cursor:pointer;
}
.horizontal li {
	display:inline-block;
	margin:0 10px;
}
.submitbutton {
	text-align:center;
}
.tawrap {
	padding:20px;
}
.docta {
	width:100%;
	max-width:100%;
	min-height:100px;
	padding:10px;
}
.questionwrap, .qeditwrap {
	display:none;
}
#buzzerwrap {
	position: absolute;
	top: 100px;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	z-index:3000;
}
.buzzerwrap {
	background-color:rgba(255,255,211,0.9);
	max-width:500px;
	border:1px solid #DDDDDD;
	-moz-border-radius: 4px;
  	-webkit-border-radius: 4px;
  	border-radius: 4px;
}
.buzzerdown {
	opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}
#firstman {
	font-size:30px;
	padding:10px 0;
	z-index:3100;
}
#secondlist {
	font-size:20px;
	padding:7px 0;
	z-index:3100;
}
#myorder {
	position: absolute;	
	top:10px;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	vertical-align: middle;
	font-size:320px;
	z-index:3100;
}

.w300 {
	width:300px;
}
.alert {
	z-index:100;
}
.graph {
	margin:10px auto;
	padding:10px 30px;;
	width:100%;	
}
.graphtable {
	margin-top:20px;
	width:100%;
	border-top:2px solid #999;
	border-bottom:2px solid #999;
}
.graph-td .progress {
	margin: 10px 0;	
}
.graphHr{
	height:15px; 
}
.questionresult {
	display:inline-block;
	font-size:13px;
	font-weight:bold;
}
#doc_title {
	display:none;
}
.menuicons {
	cursor:pointer;
}
.coloroff {
	color:#26272C;
}
.coloron {
	color:#C82128;
}
.colorchecked {
	color:#43B0DF;
}
.color-gray {
	color:#93A6B4;
}

.faicons {
	display: inline-block;
	width: 40px;
	height: 30px;	
	font-size: 30px;
	text-align: center;
	vertical-align:middle;
	cursor:pointer;
}
.faiconssmall {	
	display: inline-block;
	width: 30px;
	height: 25px;
	font-size: 25px;
	text-align: center;
	vertical-align:middle;
	cursor:pointer;
}
.faiconsimg {
	display: inline-block;
	width: 40px;
	height: 40px;	
	font-size: 30px;
	text-align: center;
	vertical-align:middle;
	cursor:pointer;
	margin-top:-5px;
}
.color-help {
	color:#189CD4;
	cursor:default;
}
.opac {
	opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
.opac:hover {
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

#totalpage {
	margin-right:10px;
}
#btnpenpannel {
	display:none;	
}
#penpannel {
	display:none;
	position:absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	bottom:55px;
	text-align:center;
	z-index:300;
	width:300px;
}
.hexcolor {
	margin-bottom:5px;	
}
#hexcolor {
	width:75px;
	padding:2px;
}
#penwidthtext {
	display:inline-block;
	margin:0;
	padding:0;
	width:20px;
	height:20px;
	text-align:center;
	font-size:12px;
}
#bookmarknumber {
	width:30px;
}
#originscreen {
	display:none;
}
#recording, #recordstop {
	display:none;
}
#recording {
	position:absolute;
	top :10px;
	left:10px;
	z-index:10;	
}
.widthfull {
	width:80%;
	max-width:1024px;
	margin-left:auto;
  	margin-right:auto; 
}
.speakerwrap {
	height:55px;
	margin:10px 0;	
	cursor:pointer;
}
#speaker {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	padding: 10px 10px;
	width:30%;
	min-width:200px;
	font-wieght:bold;
	font-size:30px;
	vertical-align:middle;
	color:#FFFFFF;
	background-color:#5CB85C;
	border: 1px solid #ddd;
	text-align: center;
  	-webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.speakers {
	height:45px;
	padding: 10px;
	background-color:#D9ECEC;
	border: 1px solid #ddd;
	text-align: center;
  	-webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
}
.speakerindi {
	background-color:#DC2929;
	font-weight:bold;
	color:#FFFFFF;
}
.qeditwrap {
	display:none;
	margin:5px;
	padding:10px;
	border :1px solid #EEE;
}
.alerthelp div {
	font-size:15px;
	height:35px;
}
@media (max-width: 767px) {

}
@media (min-width: 768px) and (max-width: 991px) {

}
@media (min-width: 992px) and (max-width: 1199px) {

}
@media (min-width: 1200px) {
	.container {
    max-width: 1024px;
  }
}