@charset "utf-8";
img, object, embed, video {max-width: 100%;}
/* IE 6 不支援最大寬度，因此寬度預設為 100% */
.ie6 img {width:100%;}
/*Dreamweaver 流變格線屬性----------------------------------dw-num-cols-mobile:5;dw-num-cols-tablet:8;dw-num-cols-desktop:10;dw-gutter-percentage:25;靈感來自於 Ethan Marcotte 的「具回應功能的網頁設計」 http://www.alistapart.com/articles/responsive-web-design以及 Joni Korpi 的「黃金格線系統」http://goldengridsystem.com/*/
/* 行動版面: 480px 以下。 */


body{margin: 0px; padding: 0px;}

#ebookQrcode{margin-top: 20px;display: none;  float: left; position:fixed;left:-200px;top:20px;z-index: 2;}

#ebookMenu{margin: 0px; padding: 5px;padding-top:10px; float: right;font-size:18px; cursor: pointer; box-sizing: border-box;border: 1px solid #fff;color:#ff0; font-weight: bold; font-family: '微軟正黑體'; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background: #069;}

#codeStyle{float:left; text-align: center; width: 200px; padding:25px 40px; box-sizing: border-box; background: rgba(50,50,50,0.8);}
#codeStyle img{width:100%; height:auto;}
#ebookQrcode a{color:#fff;text-decoration: none;}

#ebookQrcode a:hover{color:#ff0;text-decoration: underline;};

#ebookQrcode a:active{color: #fff;}

#ebookQrcode a:visited{color: #fff;}


#edmitem{margin: 0px; padding: 5px;padding-top:10px; float: right;font-size:18px; cursor: pointer; box-sizing: border-box;border: 1px solid #fff;color:#ff0; font-weight: bold; font-family: '微軟正黑體'; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background: #069;}


#edmarea{margin-top: 20px;display: none;  float: left; position:fixed;left:-200px;top:120px;z-index: 3;}



#edmimg{float:left; text-align: center;width:200px;  padding:25px 40px; box-sizing: border-box; background: rgba(50,50,50,0.8);}
#edmimg img{width: 100%; height: auto;}
#edmarea a{color:#fff;text-decoration: none;}
#edmarea a:hover{color:#ff0;text-decoration: underline;};
#edmarea a:active{color: #fff;}
#edmarea a:visited{color: #fff;}

#menu{width:50px; height:50px;background: #333; display:inline-block; position: fixed; top:2%;right: 0; z-index: 2; }
		#menu span{width:70%; height:3px; display:inline-block; background-color:#fff;position:absolute; transform: translate(-50%,-50%);top:50%;left:50%;padding:0;margin:0;transition: linear 0.3s}
		#menu span:first-child{top:25%; transition:linear 0.3s;}
		#menu span:last-child{top:75%; transition:linear 0.3s;}
		/*#menu:hover span:first-child, */
		#menu.hover span:first-child{transform:translate(-50%) rotate(45deg);left:50%;top:50%;background-color:rgba(255,255,255,1); transition:linear 0.3s;}
		/*#menu:hover span,*/
		#menu.hover span{background-color:rgba(255,255,255,0.0); left:-50%; transition: linear 0.3s; }
		/*#menu:hover span:last-child, */
		#menu.hover span:last-child{transform:translate(-50%) rotate(-45deg);left:50%;top:50%;background-color:rgba(255,255,255,1); transition:linear 0.3s;}
		#list{ width: 100vw; height: 100vh; position:fixed;background-color: rgba(0,0,0,0.0);top:0; left:-100vw; text-align: left; transition: all 0.3s linear; display: inline-block;z-index: 1;}
		#list ul{list-style: none;margin: 0;padding: 0;display: inline-flex; flex-direction: column;justify-content: center;width: 100%;margin-top:30px;}
		#list ul li{display:inline-block;line-height: 300%;width: 100%;text-align: center;}
		#list ul li a{margin: 0px; padding: 5px 40px;color:#ccc;font-size:18px;text-decoration: none;}
		#list ul li a:hover{color:#ff0;}






/* 表格版面: 481px 到 768px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 481px) {
	#ebookQrcode{margin-top: 20px;display: none;  float: left; position:fixed;left:-200px;top:20px;z-index: 2;}
	#edmarea{margin-top: 20px;display: none;  float: left; position:fixed;left:-200px;top:120px;z-index: 3;}
}

@media only screen and (min-width: 769px) {
	#edmitem{margin: 0px; padding: 5px;padding-top:10px; float: right;font-size:18px; cursor: pointer; box-sizing: border-box;border: 1px solid #fff;color:#ff0; font-weight: bold; font-family: '微軟正黑體'; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background: #069;}
	#ebookQrcode{margin-top: 20px;display: block;  float: left; position:fixed;left:-200px;top:20px;z-index: 2;}
	#edmarea{margin-top: 20px;display: none;  float: left; position:fixed;left:-200px;top:120px;z-index: 3;}
	
	#menu{width:50px; height:50px;background: #333; display:none; position: fixed; top:2%;right: 0; z-index: 2; }
		#menu span{width:70%; height:3px; display:none; background-color:#fff;position:absolute; transform: translate(-50%,-50%);top:50%;left:50%;padding:0;margin:0;transition: linear 0.3s}
		#menu span:first-child{top:25%; transition:linear 0.3s;}
		#menu span:last-child{top:75%; transition:linear 0.3s;}
		/*#menu:hover span:first-child, */
		#menu.hover span:first-child{transform:translate(-50%) rotate(45deg);left:50%;top:50%;background-color:rgba(255,255,255,1); transition:linear 0.3s;}
		/*#menu:hover span,*/
		#menu.hover span{background-color:rgba(255,255,255,0.0); left:-50%; transition: linear 0.3s; }
		/*#menu:hover span:last-child, */
		#menu.hover span:last-child{transform:translate(-50%) rotate(-45deg);left:50%;top:50%;background-color:rgba(255,255,255,1); transition:linear 0.3s;}
		#list{ width: 100vw; height: 100vh; position:fixed;background-color: rgba(0,0,0,0.0);top:0; left:-100vw; text-align: left; transition: all 0.3s linear;display:none;z-index: 1;}
		#list ul{list-style: none;margin: 0;padding: 0;display: inline-flex; flex-direction: column;justify-content: center;width: 100%;margin-top:30px;}
		#list ul li{display:inline-block;line-height: 300%;width: 100%;text-align: center;}
		#list ul li a{margin: 0px; padding: 5px 40px;color:#ccc;font-size:18px;text-decoration: none;}
		#list ul li a:hover{color:#ff0;}
	
	
}