body{
	overflow:hidden;
	background-color:#fcfcfc;
	margin:0;
	padding:0;
} 
html, body {
  max-width: 100%;
  overflow: hidden;
}
html, body {
    touch-action: manipulation;
}
img {
}
body,a,p,input{ font-family: "Noto Sans TC",  "Noto Sans SC", "Microsoft JhengHei","Ariel","Barlow", sans-serif !important;}
/*
.thumbnails{ display:none; opacity:0; width:10px; height:10px; overflow:hidden;}
.thumbnails *{color:#fff;}
*/
#toolbar{ position: fixed;  z-index:3000;
bottom:0; left:0;
width:100vw;
 display:flex; align-items:center; justify-content:center; padding:10px 10px 5px 10px;
 background:#fff; 
/*box-shadow: 0px -1px 2px 3px #aaa; */
border-radius:0; border:1px solid #aaa;
}
#toolbar a{ position: relative; padding:0; 
  width:38px; height:38px;
  margin:0 5px 0 5px; display:inline:block; background:0; border:0;  display:flex; align-items:center; justify-content:center; cursor:pointer; }
#toolbar .fa{  color:#444; font-size:30px; }
 #toolbar a .fa { font-size:30px;}
 

  
#toolbar .nx-button .fa{ transform:scale(0.5,1) }
#toolbar .pr-button .fa{ transform:scale(-0.5,1)  }

#toolbar .tb_icon {text-decoration:none; transition: all .3s ease-in-out;}
#toolbar .tb_icon:hover { opacity:0.75}
 
 #pg_cnt{position: fixed;  z-index:3000;
top:0; left:50%;

 transform:translate(-50%,0);
 display:flex; align-items:center; justify-content:center; padding:2px 15px 3px 15px;
 background:#fff; 
box-shadow: 0px -1px 4px 3px #aaa; border-radius: 0 0 20px 20px;
 }
	.tal,
 #pg_val{ padding:0; display:flex; align-items:center; justify-content:center;  height:23px; width:40px; border:1px solid #ccc;  text-align:center; font-size:1em; line-height:1em}
 .tal{height:23px; border-left:0; background:#eee;}
 
#search_obtn,
#pg_val_go{ position: relative; padding:0; background:0; border:0;  display:flex; align-items:center; justify-content:center; 
padding:5px; margin:0 5px 0 5px;  cursor:pointer; }

 #pg_cnt .fa{ font-size:20px; line-height:20px; color:#444;}

#pg_cnt .gap{ display:none; }
#pg_val_go:hover,
#search_obtn:hover{ color:#aaa;}


       #flipbook .page img {
      mix-blend-mode: multiply; 
    /* OR if background colors break, use: */
    mix-blend-mode: normal;
        }
		
       #flipbook  {
            image-rendering: auto;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;

          
            touch-action: none;
            transform-origin: center center;
            will-change: transform;
            transition: none;
            flex-shrink: 0;
			
            zoom: 1;
            -moz-transform: scale(1);
            -moz-transform-origin: center center;
        }
	      @-moz-document url-prefix() {
            #flipbook {
                zoom: unset;
                transform: scale(1);
                transform-origin: center center;
            }
        }
 
	/*
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
	overflow-clip-margin: content-box;
    overflow: clip;
	filter: blur(0);
-webkit-filter: blur(0);
 transform: translateZ(0);
-webkit-transform: translateZ(0);
  will-change: transform;
}
      
	
    .draggable img {
		/*
    transform: translate3d(0, 0, 0);
    
    perspective: 1000px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    
    image-rendering: -webkit-optimize-contrast;
    transform-style: preserve-3d;*/

 
@media screen and (max-width:520px){
	
 #toolbar a .fa { font-size:32px;}
}
@media screen and (max-width:768px){
 #toolbar{ width:100%;
padding: 0;
 background:#fff; 
/*box-shadow: 0px -1px 4px 3px #aaa;*/ border-radius: 0 0 0 0;
 }
 #toolbar a .fa { font-size:32px;}
 #toolbar a {  
  position: relative;
  padding: 10px 0 10px 0;
  margin: 0 0 0 0;
  display: inline-block;
  background: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width:40px; height:auto;
}
}
.search_on{}
#searchinp{ padding:5px; border:0; font-size:16px; color:#666; width:calc(100% - 60px);}
#search_panel{  transition: all .3s ease-in-out; position:fixed; left:0; top:0; padding:10px; background:#fff;
box-shadow:0 0 20px rgba(0,0,0,0.2); z-index:1000; height:100%; width:100%; max-width:320px; min-width:280px;
 transform:translate(-110%,0);
}
.search_on #search_panel{  transform:translate(0,0); }
#clearbtn{ cursor:pointer; border:0; background:0;  width:40px; height:40px; color:#444; margin:0 0 0 0;
 display:flex; align-items:center; justify-content:center; font-size:26px;
 opacity:0;
}
.s_box{ display:flex; align-items:center; justify-content:center;  padding:10px 0 10px 0; border-bottom:1px solid #aaa;}
#clearbtn.on{ opacity:1;}
#search_result{ padding:10px 0 10px 0; height:calc(100vh - 90px);overflow: hidden auto; }
#search_result h2{margin:0;}
#search_result p.inner_p{ border:1px solid #eee; padding:10px; margin:0 0 15px 0; font-size:14px;color:#666;}
#search_result  .highlight{ background:#ff0; color:#000; }
#search_result .pagebtn{  background:#444;   color:#fff; cursor:pointer; width:calc(100% - 20px); padding:10px; font-size:16px; font-weight:bold;
 display:flex; align-items:center; justify-content:space-between; transition: all .3s ease-in-out;
}
#search_result .pagebtn:hover{ background:#000; color:#fff}
/*
/*
#toolbar .previous-button .fa{ transform:scale(0.5,1) }
/*
.first-button::after{content:""; height:80%; width:15% ; background:#444; display:block; position:absolute; left:15%; top:5%; }
.last-button::after{content:""; height:80%; width:15% ; background:#444; display:block; position:absolute; right:15%; top:5%; }
*/
.last-button{}
.nx-button.end,
.pr-button.end,
.first-button.end,
.last-button.end,
.next-button.end,
.previous-button.end{ opacity:0.2}
 

		      .book-viewport.draggable {
            cursor: grab;
        }
        .book-viewport.draggable:active {
            cursor: grabbing;
        }
        .book-viewport.drag-disabled {
            cursor: default;
        }
 

.magazine-viewport .container{
	position:absolute;
	top:50%;
	left:50%;
	width:922px;
	height:600px;
	margin:auto;
}

.magazine-viewport .magazine{
	width:922px;
	height:600px;
	left:-461px;
	top:-300px;
}

.magazine-viewport .page{
	width:461px;
	height:600px;
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.magazine-viewport .zoomer .region{
	display:none;
}

.magazine .region{
	position:absolute;
	overflow:hidden;
	background:#0066FF;
	opacity:0.2;
	-webkit-border-radius:10px;
	border-radius:10px;
	cursor:pointer;
	-webkit-filter: alpha(opacity=20);
	filter: alpha(opacity=20);
}

.magazine .region:hover{
	opacity:0.5;
	-webkit-filter: alpha(opacity=50);
	filter: alpha(opacity=50);
}

.magazine .region.zoom{
	opacity:0.01;
	-webkit-filter: alpha(opacity=1);
	filter: alpha(opacity=1);
}

.magazine .region.zoom:hover{
	opacity:0.2;
	-webkit-filter: alpha(opacity=20);
	filter: alpha(opacity=20);
}

.magazine .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.magazine-viewport .page img{
	-webkit-user-select: none;
	user-select: none;
	margin:0;
}

.magazine .even .gradient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
}

.magazine .odd .gradient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	background-image:-webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
}

.magazine-viewport .zoom-in .even .gradient,
.magazine-viewport .zoom-in .odd .gradient{

	display:none;

}

.magazine-viewport .loader{
	background-image:url(../pics/loader.gif);
	width:22px;
	height:22px;
	position:absolute;
	top:280px;
	left:219px;
}

.magazine-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	transition: box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}
 
.magazine-viewport .next-button,
.magazine-viewport .previous-button{
	width:22px;
	height:600px;
	position:absolute;
	top:50%;
 transform:translate(0,-50%);
}

.magazine-viewport .next-button{
	right:-22px;
	-webkit-border-radius:0 15px 15px 0;
	border-radius:0 15px 15px 0;
}

.magazine-viewport .previous-button{
	left:-22px;
	-webkit-border-radius:15px 0 0 15px;
	border-radius:15px 0 0 15px;
}

.magazine-viewport .previous-button-hover,
.magazine-viewport .next-button-hover{
	background-color:rgba(0,0,0, 0.2);
}

.magazine-viewport .previous-button-hover,
.magazine-viewport .previous-button-down{
	background-image:url(../pics/arrows.png);
	background-position:-4px 284px;
	background-repeat:no-repeat;
}

.magazine-viewport .previous-button-down,
.magazine-viewport .next-button-down{
	background-color:rgba(0,0,0, 0.4);
}

.magazine-viewport .next-button-hover,
.magazine-viewport .next-button-down{
	background-image:url(../pics/arrows.png);
	background-position:-38px 284px;
	background-repeat:no-repeat;
}

.magazine-viewport .zoom-in .next-button,
.magazine-viewport .zoom-in .previous-button{
	display:none;
} 

.animated{
	-webkit-transition:margin-left 0.5s;
	transition:margin-left 0.5s;
}



.thumbnails{ transition: all .5s ease-in-out; visibility:hidden;
	position:absolute;
	top:0; 
	left:0;
	width:600px; 
	z-index:1;
	max-width:70vw;
	background:#fff;
	-webkit-box-shadow:0 0 10px #ccc;
	box-shadow:0 0 10px  #ccc;
	 transform:translate(-101%,0);
}
.thumbnails.on{ z-index:2000;  visibility: visible;  transform:translate(0%,0);}

.thumbnails button{margin-left:4px}
.thumbnails > div{
	width:100%;
	max-width:1050px;
	/*height:100px;*/
	margin:0 auto;
}
#scroll-close-btn,
#scroll-up-btn,
#scroll-down-btn{ position: absolute; width:30px; display:block; background:#444; color:#fff}

#scroll-close-btn{left:0; top:0;  height:40px;}

#scroll-up-btn{left:0; top:50px;  height:40%; }
#scroll-down-btn{left:0; top:calc(40% + 60px); height:40%;  }
.thumbnails { background:#444;}
.thumbnails ul{
	margin:0 0 0 0;
	padding:0;
	padding:0 0 0 0;
	text-align:center; height:80vh ; overflow:auto;
	
 display:flex; align-content:flex-start;  align-items:flex-start; justify-content:flex-start; padding:10px 10px 0px 40px;
 flex-wrap:wrap;
	/*
	-webkit-transform:scale3d(0.5, 0.5, 1);
	transform:scale3d(0.5, 0.5, 1);
	-webkit-transition:-webkit-transform ease-in-out 100ms;
	transition:transform ease-in-out 100ms;*/
}

.thumbanils-touch ul{
	-webkit-transform:none;
	transform:none;
}

.thumbnails-hover ul{/*
	-webkit-transform:scale3d(0.6, 0.6, 1);
	transform:scale3d(0.6, 0.6, 1);*/
}

.thumbnails li span{display:none;} 
.thumbnails li{ 
	width:100%;
	list-style:none;
	display:block;
	margin:0;
	
 display:flex; align-items:center; justify-content:flex-start;; 
 /*
	
	-webkit-transition:-webkit-transform 60ms;
	transition:transform 60ms;*/
}

.thumbnails li img:hover{ border:1px solid #aaa; }
.thumbnails li img{ border:1px solid #ccc; cursor:pointer;
	margin:0 5px 5px 0; max-width:calc(50% - 5px); height:auto;} 
.thumbnails li span{
	display:none;
}
/*
.thumbnails .current{
	-webkit-box-shadow:0 0 10px red;
	box-shadow:0 0 10px red;
}

.thumbnails .thumb-hover{
	-webkit-transform:scale3d(1.3, 1.3, 1);
	transform:scale3d(1.3, 1.3, 1);

	-webkit-box-shadow:0 0 10px #666;
	box-shadow:0 0 10px #666;
}

.thumbanils-touch .thumb-hover{
	-webkit-transform:none;
	transform:none;
}*/
/*
.thumbnails .thumb-hover span{
	position:absolute;
	bottom:-30px;
	left:0;
	z-index:2;
	width:100%;
	height:30px;
	font:bold 15px arial;
	line-height:30px;
	color:#666;
	display:block;
	cursor:default;
}*/

.thumbnails img{
	float:left;
}

.exit-message{
	position: absolute;
	top:10px;
	left:0;
	width:100%;
	height:40px;
	z-index:10000;
}

.exit-message > div{
	width:140px;
	height:30px;
	margin:auto;
	background:rgba(0,0,0,0.5);
	text-align:center;
	font:12px arial;
	line-height:30px;
	color:white;
	-webkit-border-radius:10px;
	border-radius:10px;
}
/*
.zoom-icon{
	position:absolute;
	z-index:1000;
	width:22px;
	height:22px;
	top:10px;
	right:10px;
	background-image:url(../pics/zoom-icons.png);
	background-size:88px 22px;
}

.zoom-icon-in{
	background-position:0 0;
	cursor: pointer;
}

.zoom-icon-in.zoom-icon-in-hover{
	background-position:-22px 0;
	cursor: pointer;
}

.zoom-icon-out{
	background-position:-44px 0;
}

.zoom-icon-out.zoom-icon-out-hover{
	background-position:-66px 0;
	cursor: pointer;
}
*/

.bottom{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
}


@media only screen and (max-width: 768px) {
	
	 .thumbnails li span{display:none;} 
.thumbnails li{ 
	width:100%;
	list-style:none;
	display:block;
	margin:0;
	
 display:flex; align-items:center; justify-content:flex-start;
 flex-wrap:wrap; 
}

.thumbnails li img:hover{ border:1px solid #aaa; }
.thumbnails li img{ border:1px solid #ccc; cursor:pointer;
	margin:0 5px 5px 0; max-width:calc(100% - 5px); height:auto;} 
.thumbnails li span{
	display:none;
}
 

}