html, body { 
	height:100%; 
	overflow: hidden;
}
body {
	padding:0;
	margin:0;
	background:#333;
	-webkit-user-select:none;
    -webkit-text-size-adjust:none;
	color:#eee;
	font-family:helvetica;
	font-size:12px;
}

#wrapper {
	width:100%;
	min-width:320px;
	height:100%;
}

#nav {
	position:absolute;
	z-index:100;
	top:8px;	 
	height:20px;
	left:50%;
	background:rgba(0,0,0,0.75);
	padding:0;
	 
	-webkit-border-radius:10px;
}

.Toolbar{
	position:absolute;
	z-index:100;
	top:0%;	 	
	left:0%;
	background:rgba(0,0,0,0.3);
	padding:0;
	 
	-webkit-border-radius:10px;
}

#Scrollbar {
	position:absolute;
	z-index:100;
	top:5%;	 
	height:200px;
	left:20%;
	background:rgba(255,0,0,0.5);
	padding:0;
	 
	-webkit-border-radius:10px;
}


#nav li {
	display:block;
	float:left;
	width:14px;
	height:14px; line-height:14px;
	-webkit-border-radius:7px;
	background:rgba(255,255,255,0.1);
	overflow:hidden;
	padding:0;
	margin:3px 11px 0 0;
	text-align:center;
}

#nav li#prev {
	margin-left:5px;
	background:transparent;
}

#nav li#next {
	margin-right:0;
	background:transparent;
}

#nav li.selected {
	background:rgba(255,255,255,0.4);
}

#swipeview-slider > div {
	position:relative;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-box-pack:center;
	-webkit-box-align:center;
	overflow:hidden;
}
.topToolbar{
	position: fixed;
	width: 30px;
	bottom: 0%;
	right: 0px;
	cursor: pointer;
	margin: 0;
	right: 4%;
}
.topToolbar li{
	width: 30px;
	height: 30px;
	margin-bottom: 5px;
}
.topToolbar img{
	width: 30px;
	height: 30px;
	float: left;
}
#swipeview-slider img {
	display:block;
	/*border:5px solid #eee;*/
	-webkit-box-shadow:0 0px 0px #000;
	-webkit-border-radius:2px;
	-webkit-transition-duration:.4s;
	-webkit-transition-property:opacity;
	opacity:1;
	pointer-events:none;
}

#swipeview-slider span {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	padding:20px 0;
	display:block;
	background:rgba(0,0,0,0.75);
	font-size:20px;
	text-align:center;
	text-shadow:0 1px 0 #000;
	border-top:1px solid rgba(255,255,255,0.2);
	-webkit-border-top-left-radius:10px;
	-webkit-border-top-right-radius:10px;
	-webkit-transition-duration:.3s;
	-webkit-transition-property:-webkit-transform;
	-webkit-transform:translate3d(0,100%,0);
}

#swipeview-slider .swipeview-active span {
	-webkit-transform:translate3d(0,0,0);
}

#wrapper > div > .swipeview-loading {
	background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#444), to(#555)),
		-webkit-gradient(linear, 0 0, 100% 0, from(#777), to(#777));
	background-position:50% 50%, 50% 50%;
	background-size:200px 140px, 210px 150px;
	background-repeat:no-repeat;
}

#wrapper > div > .swipeview-loading img,
#swipeview-slider img.loading {
	-webkit-transition-duration:0;
	opacity:0;
}

#wrapper > div > .swipeview-loading span {
	-webkit-transition-duration:0;
	-webkit-transform:translate3d(0,100%,0);
}

.infoEPUB3
{
    width: 1024px;
    height: 768px;
    margin: 0 auto;
    padding: 0;
    /*display: none;*/
    background-repeat: no-repeat;
    position: relative;
    
}

.info2
{
    width: 1024px;
    height: 768px;
    margin: 0 auto;
    background-repeat: no-repeat;
    
}
            
.HamastarVideo
{
    width: 398px;
    height: 398px;
    position: relative;
    top: 283px;
    left: 46px;
    background-color: #acb;
}
            
.Hamastar0b3216fc-f1f3-46f1-b629-60c09e1a6a72
{
    width: 253px;
    height: 452px;
    position: relative;
    top: 43px;
    left: 54px;
}
            
.Hamastarf2d3d5b7-2558-4f86-bb70-487b0ede0e20
{
    width: 62px;
    height: 49px;
    position: relative;
    top: 57px;
    left: 517px;
    background-color: #acb;
}

.dynamicImageClass{
    width:256px;
    height:192px;
    position: relative;
    top: 283px;
    left: 46px;
    overflow:hidden;
    padding: 0;
    margin: 0;
    z-index:1;
}

.scrollerClass {
    width:1024px;
    height:100%;   
    padding: 0;   
}

 #dialog{
    display: none;
    position: absolute;
    top: 100px;
    left: 200px;
    width: 400px; /* adjust as per your needs */
    height: 400px; /* adjust as per your needs */
    margin-left: 0px; /* negative half of width above */
    margin-top: 0px; /* negative half of height above */
    z-index: 100;
    background:blueviolet;
    padding: 0px;
    font: 10pt tahoma;
    border: 1px solid gray;    
}

.Hamastar0b3216fc-f1f3-46f1-b629-60c09e1a6a72
{
    width: 253px;
    height: 452px;
    position: relative;
    top: 43px;
    left: 54px;
}
.Hamastar1df3c4b2-c27f-4f5a-96d1-4a3f020bc4a8
{
    width: 335px;
    height: 252px;
    position: absolute;
    top: 41px;
    left: 698px;
}

/*回饋正確訊息框*/
.textMessage
{
    width: 280px;
    height: 210px;
    top: 50px;
    left: 170px;
    position: absolute;
    font-size: 2.4em;
    font-weight: bold;
    border-color: #fff;
    color: red;
    background-color: rgba(0,0,0,0);
}

.divMessage 
{
    position:absolute; 
    display: none;  
    margin-left: 0px; 
    margin-top: 0px;
    z-index: 300;
    padding: 0px;
}

.btnClose {
    position: absolute;
    z-index: 90; 
    /*right: 0px; 
    padding-left: 370px;*/
    top: 0px;
    width: 30px;
    height: 30px;
}

.showaddimage{
	position: absolute;
	display: none;
    top: 50%;
	left: 50%;
	/*top: 25%;
	left: 5%;
	width: 90%;
	margin: auto;*/
    
	
	z-index: 99;
}
.showaddvideo{
	position: absolute;
	display: none;
      top: 50%;
	left: 50%;
	/*top: 25%;
	left: 5%;
	width: 90%;
	margin-top: 20%;
    margin-left: 30%;
	height: 50%;
    margin: auto;*/
	z-index: 99;
}/*
.showaddvideo video{
	width: 100%;
    height: 100%;
	object-fit: fill;
}*/
.showaddvideo video{
	/*width: 100%;
    height: 100%;*/
	object-fit: fill;
}

.showaddvideo2{
	position: fixed;    
	display: none;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	z-index: 99;
}
.showaddvideo2 video{
	width: 100%;
    height: 100%;
	object-fit: fill;
}

.CorrectAnswer{
	/*text-align:center;*/
	border-style: solid;
	border-width: 3px;
	border-color : rgba(0, 255, 0, 1);
	color : red;
	font-size : 25px;
}

/* 頁面選單 */
.booktable{
	display: block;
	width:100px; 
	height:150px;
}
.towpagetd{
	display: block;
	margin-right: -2px;
}
.pptType{
	margin-left: 4%;
	height: 90%;
	overflow: auto;
	/*border: 3px red solid;*/
}
.pptType li{
	float: left;
	margin: 1%;
	/*width: 18%;
	height: 16%;*/
}
.pptType li img{
	width: 100%;
	height: 100%;
}
.pptType li span{
	top: 0;
	left: 0;
	
	fone-size: 1.5em;
	display: block;
}
/* newJumpPage */
.newJumpPage{
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
}
.tapJumpPage{
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
}
/* 工具列 - 關 */
.toolbarClose{
	position: absolute;
	z-index: 100;
	top: 0%;	 	
	left: 0%;
	width: 52px;
	height: 62px;
	background: rgba(0, 0, 0, 0.3);
	padding: 0;
	-webkit-border-radius: 10px;
	overflow: hidden;
}
.toolbarClose div{
	text-align:center;
	margin: 0 5px 0 5px;
}
.toolbarClose input{
	height: 42px;
}
.toolbarClose li{
	margin-bottom: 10px;
	display: block;
	min-height: 56px;
}

/* 頁簽顯示 */
.tabtag{
	position: absolute;
	
	top: 100px;
	right: 0px;
	width: 94px;
	height: 44px;
	z-index: 90;
}

/* 工具列 - 開 */
.toolbarOpen{
	position: absolute;
	z-index: 100;
	top: 0%;	 	
	left: 0%;
	width: 52px;
	height: 99%;
	min-height: 420px;
	background: rgba(0, 0, 0, 0.3);
	padding: 0;
	-webkit-border-radius: 10px;
}
.toolbarOpen div{
	text-align:center;
	margin: auto;/*0 5px 0 5px;*/
	height: 14%;
}
.toolbarOpen input{
	height: 42px;
}
.toolprev{
	position: absolute;
	z-index: 100;
	top: 45%;	 	
	left: 0%;
}

.toolprev input{
	height: 42px;
	
}

.toolnext{
	position: absolute;
	z-index: 100;
	top: 45%;	 	
	right: 0%;
}
.toolnext input{

	height: 42px;
	
}

#backCoverMsg {
	position:absolute;  
	text-align:center; 
	line-height:20px; 
	top:45%; 
	left:48%; 
	height:inline; 
	background-color:rgba(0, 0, 0, 0.5); 
	border-radius: 10px;
	display: none;
    color: white;
}
/* 左列工具列 - 開 */
.toolLeftBarOpen{
	position: absolute;
	z-index: 100;
	top: 0%;	 	
	left: 0%;
	width: 52px;
	height: 99%;
	min-height: 420px;
	background: rgba(0, 0, 0, 0.3);
	padding: 0;
	-webkit-border-radius: 10px;
}
.toolLeftBarOpen div{
	text-align:center;
	margin: auto;/*0 5px 0 5px;*/
	height: 14%;
}
.toolLeftBarOpen input{
	height: 42px;
}


/* 左列工具列 - 關 */
.toolLeftBarClose{
	position: absolute;
	z-index: 100;
	top: 0%;	 	
	left: 0%;
	width: 52px;
	height: 62px;
	background: rgba(0, 0, 0, 0.3);
	padding: 0;
	-webkit-border-radius: 10px;
	overflow: hidden;
}
.toolLeftBarClose div{
	text-align:center;
	margin: 0 5px 0 5px;
}
.toolLeftBarClose input{
	height: 42px;
}


/* 右列工具列 - 開 */
.toolRightBarOpen{
	position: absolute;
	z-index: 100;
	top: 0%;	 	
	right: 0%;
	width: 52px;
	height: 99%;
	min-height: 420px;
	background: rgba(0, 0, 0, 0.3);
	padding: 0;
	-webkit-border-radius: 10px;
}
.toolRightBarOpen div{
	text-align:center;
	margin: auto;/*0 5px 0 5px;*/
	height: 14%;
}
.toolRightBarOpen input{
	height: 42px;
}

/* 右列工具列 - 關 */
.toolRightBarClose{
	position: absolute;
	z-index: 100;
	top: 0%;	 	
	right: 0%;
	width: 52px;
	height: 62px;
	background: rgba(0, 0, 0, 0.3);
	padding: 0;
	-webkit-border-radius: 10px;
	overflow: hidden;
}
.toolRightBarClose div{
	text-align:center;
	margin: 0 5px 0 5px;
}
.toolRightBarClose input{
	height: 42px;
}
/********* 題組 *********/
.hamainput{
	width:300px; 
	padding: 10px; 
	font-size: 16px; 
	border: 1px solid #ccc;
	border-radius: 4px;
}

.hamabtn{
	width:30%; 
	padding: 10px 16px; 
	line-height: 1.3333333; 
	font-size: 16px; 
	border-radius: 6px; 
	color: #fff;
	margin: 20px;
}

/********* 題組 end *********/

/********* 錯誤列表 star *********/
/* ====================================================================================================================
 * FONT-FACE
 * ====================================================================================================================*/
/*@font-face {
  font-family: 'libricons';
  src:url('fonts/libricons.eot');
  src:url('fonts/libricons.eot?#iefix') format('embedded-opentype'),
    url('fonts/libricons.woff') format('woff'),
    url('fonts/libricons.ttf') format('truetype'),
    url('fonts/libricons.svg#libricons') format('svg');
  font-weight: normal;
  font-style: normal;
}*/
 /* ====================================================================================================================*/

div.windows_list_box{
	display:none;
	top:5%;
	right:25%;
	margin:5px;
	padding:5px;
	background-color:#F1C40F;/*#;FEF673*/
	box-shadow: 0px 0px 20px #888888;
	width:300px;
	height: 350px;
	position:relative;
	border-radius:10px;
	position:absolute;
}
	
 /*--關閉紐--*/		
div.windows_list_box .close_box{
	position: absolute;
	top: 10px;
	right: 10px;
}

div.windows_list_box .close_box a > span::after {
	/*content: "▾";*/
	font-family: "libricons";
	font-size: 16px;
	display: inline-block;
	content: '\e00b';
	color: rgba(255, 255, 255, 1);
	/*text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);*/
	background-color:rgba(0, 0, 0, 0.7);
	border-radius: 30px;
	padding:4px 5px 3px;
}

div.windows_list_box h2{
	color: black;
	margin-left: 30%;
}

 /*--內容區域--*/
div.windows_list_box .centent_box{
	position: absolute;
	top: 50px;
	left:5%;
	width:90%;
	height:auto;
	margin-bottom: 10px;
}
div.windows_list_box .centent_box ul{
	margin: 0;
	padding: 0;
	overflow-y: scroll;
	max-height: 293px;
}
div.windows_list_box .centent_box li{
	margin:5px 0;
	padding:10px ;
	display:block;
	overflow:hidden;
	border-radius: 5px;
	/*background-color:#FFF;*/
	width:85%;
	text-decoration:none;
	border:#F39C12 dashed 2px;
	color:#000;
	font-size: 16px;
}  
div.windows_list_box .centent_box li:hover{
	margin:5px 0;
	padding:10px ;
	display:block;
	overflow:hidden;
	border-radius: 5px;
	background-color:#F39C12;/*FCC*/
	width:85%;
	text-decoration:none;
	border:#F39C12 solid 2px;
	color:#000;
	font-size: 16px;
}   

/********* 錯誤列表 end *********/


/*********畫筆 透明度　粗細 *********/
input[type='range'] {
    -webkit-appearance: none;
    border-radius: 5px;
    box-shadow: inset 0 0 5px #333;
    background-color: #999;
    height: 10px;
    vertical-align: middle;
  }
  input[type='range']::-moz-range-track {
    -moz-appearance: none;
    border-radius: 5px;
    box-shadow: inset 0 0 5px #333;
    background-color: #999;
    height: 10px;
  }
  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    border-radius: 20px;
    background-color: #FFF;
    box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
    
    height: 20px;
    width: 20px;
  }
  input[type='range']::-moz-range-thumb {
    -moz-appearance: none;
    border-radius: 20px;
    background-color: #FFF;
    box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
    border: 1px solid #999;
    height: 20px;
    width: 20px;
  }
/*********畫筆 透明度　粗細 *********/

/*********畫筆 *********/
#colorPicker{
	padding:10px;
	float:left;
	border-radius:20px;
	box-shadow: 0px 0px 20px #888888;
}
.option
{
   width: 100px; float:left;height: 40px; border: 2px solid #cccccc;
    margin-right: 30px; margin-bottom: 4px;    border-radius: 10px;padding-right: 10px;
}
.colorStateBar
{
    text-align: center; 
    vertical-align: middle;
    margin-bottom: 20px; 
    margin-top: 10px;
    height:30px
}

.colorStateBar div{
	margin: 3px; 
	margin-left: 3px; 
	width: 545; 
	height: 5px; 
	background-color: red;
	
}

#norColor{
	float:left;
	width:50%;   
	position: relative;
}
#circleColor{
	float:left;
	width:50%;   
	position: relative;
}
.changeSlider{
	background-color: #b9bfc6; 
	width:90%;
	z-index:1001;
	margin-bottom:20px;
}


#picker{
	margin-left: 50px;
}
#color{
	border-radius: 10px;
	margin-left: 20px;
}

#divbtn{
	float:left;
	margin-left: 200px;
	margin-top:10px ;
}
.pikerbtn{
	border-radius: 10px;   
	padding: 10px; 
	background-color: #000;
	color: #fff; 
}

.active { border: 2px solid black; }

img.output { border: 1px solid green; }
#cSketchPad { cursor: arrow; }
/*********畫筆  *********/


#Jumptable{
	overflow:auto;
	width:1024px; 
	height: 200px; 
	background-color:rgba(54, 48, 48, 0.729412); 
	top:65%;
	position:absolute;
}

.hyperLinkObj {
  width: 100%;
  height: 100%;
  animation: hyperLinkObj 1.5s infinite;
  border-color:red !important;
  border-style: Solid;
  border-width: 1.0px !important;
    
}


@keyframes hyperLinkObj {
  30% {
   
    border-color:yellow;
  }
}


@-moz-keyframes hyperLinkObj /* Firefox */
{
 30% {
   
    border-color:yellow;
  }
}

@-webkit-keyframes hyperLinkObj /* Safari 和 Chrome */
{

  30% {
   
    border-color:yellow;
  }

}

@-o-keyframes hyperLinkObj /* Opera */
{
 30% {
   
    border-color:yellow;
  }
}
#Bookmark{
overflow:auto;width:400px; 
height: 100%; 
background-color:rgba(54, 48, 48, 0.729412); 
top:0; 
right:4%; 
position:absolute; 
font-size: 1.5em;
display: none;
}
/*
#dialogSearchWord button{
	 border-radius: 10px;
    padding: 3px;
   background:#333;
    color: #fff;
}

#dialogSearchWord input
{
	    border-radius: 5px;
    width: 257px;
    margin-bottom: 5px;
}*/
#dialogSearchText{
	max-height: 400px;
	background-color:gray !important;

}
.ui-dialog .ui-dialog-titlebar{
	background-color:orange !important;
}
#TextKeyword{
	width:60%;    
	border-radius: 5px;
}
#textSearchBtn{
	width:30%;    
	border-radius: 5px;
}
.centent_Text{
	background-color: white;    
	/*height: 300px; */     
	overflow: auto;  
	width: 95%;
	margin-top: 3px;    
	border-radius: 5px;
}

#dialogSearchWord button{
	 border-radius: 10px;
    padding: 3px;
   background:#333;
    color: #fff;
}

#dialogSearchWord input
{
	    border-radius: 5px;
    width: 257px;
    margin-bottom: 5px;
}