/* 主選單 */
/*樣式自行設計，只要架構不改即可
// 以div為區塊設定id為第一個參數，第2-4的參數為被選取的選單套上.selected ，最多可顯示三層
// 第二層以dl,dt,dd為架構,dt為主選單,dd為次選單
// 第三層以ul,li為架構
// 僅有第一層可被選取, css命名須為selected
// 被選取的效果class請命名為rollover
*/
#topmenu { width:820px; position:absolute; top:0; left:50%; margin-left:-410px; z-index:0; color:#FFF;}
#topmenu dl{ float:left; width:25%; }
#topmenu dl dt,#topmenu dl dd,#topmenu dl dd ul li{ padding:5px; border:solid 1px #FFF;  background-color:rgba(45, 45, 45, 0.8); list-style-type: none; cursor:pointer;}
#topmenu dl dt.rollover,#topmenu dl dd.rollover,#topmenu dl dd ul li.rollover, #topmenu dl .selected{ background-color:#60d1e4;}
#topmenu dl dd { position:relative; display:none;}
#topmenu dl dd ul{ position: absolute; left: 100%; top: -1px;}
#topmenu dl dd ul li{ width:190px;}
#topmenu dl dt a, #topmenu dl dd a, #topmenu dl dd ul li a{ color:#FFF;}

/* 行動版選單按鈕 
 #floatmenu .menu a.mobilemenu, */
a.mobilemenu,
a.mobilemenu > span{ display:none;}

a.mobilemenu{ width:44px; height:44px; border:3px solid #FFF; border-radius: 50px; padding:0; background-color:rgba(0, 0, 0, 0.6);position:absolute; top:10px; right:20px;}
a.mobilemenu:hover, a.mobilemenu.rollover, a.mobilemenu.selected{ background-color:rgba(145, 145, 145, 0.8);}

a.mobilemenu b, a.mobilemenu b::before, a.mobilemenu b::after{ content:""; display:block; width:22px; border-bottom:solid 2px #FFF; position:absolute; left:50%; margin-left:-11px; top:50%; margin-top:-1px;}
a.mobilemenu b::before{ margin-top:-7px;}
a.mobilemenu b::after{ margin-top:7px;}
a.mobilemenu.rollover b, a.mobilemenu.selected b{width:0px; margin-left:0;}
a.mobilemenu.rollover b::before, a.mobilemenu.selected b::before{
	margin-top:0;
	transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);}
a.mobilemenu.rollover b::after, a.mobilemenu.selected b::after{
	margin-top:0; 
	transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);}
	
/* 浮動選單 */
#floatmenu{ width:100%; height:92px; background:#76BD22; position:fixed; top:-97px;	 left:0;  z-index:1;
	 /* CSS3 陰影*/
	-moz-box-shadow: 	0px 2px 2px rgba(0,0,0,.4);
	-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,.4);
	box-shadow: 		0px 2px 2px rgba(0,0,0,.4);
}
#floatmenu .menu{width:900px; margin:0 auto; line-height:50px;}
#floatmenu .menu .logo, #floatmenu .menu a{ color:#fff; padding:0 20px;}
#floatmenu .menu .logo{ display:inline-block;}
#floatmenu .menu a.mobilemenu{ padding:0;}

/* 套漸變 */
a.mobilemenu{
			 transition: background-color .5s;
		-moz-transition: background-color .5s;
	 -webkit-transition: background-color .5s;
		  -o-transition: background-color .5s;}
		  
a.mobilemenu > b, a.mobilemenu > b::before, a.mobilemenu > b::after{
			 transition: all .5s;
		-moz-transition: all .5s;
	 -webkit-transition: all .5s;
		  -o-transition: all .5s;}
		  
#topmenu dl dt.lv::after, #topmenu dl dd.lv::after{
			 transition: transform .5s;
		-moz-transition: transform .5s;
	 -webkit-transition: transform .5s;
		  -o-transition: transform .5s;}


/* ------------------- mediaqueries ------------------- */
@media screen and (max-height: 620px) {
	/* height */
}
@media screen and (max-width: 640px) {
	/* 選單 */
	a.mobilemenu, #floatmenu .menu a.mobilemenu { display:inline-block; padding:0;}
	#floatmenu { }
	#floatmenu .menu a.mobilemenu{ }
	
	#topmenu{width:85%; height:100vh; background-color:rgba(0, 0, 0, 0.8); margin-left:0; left:-90%; z-index:999999; position:fixed; text-align:left; overflow-y:auto;
	-moz-box-shadow:0px 0px 15px rgba(0,0,0,.8); -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.8); box-shadow:	0px 0px 15px rgba(0,0,0,.8);
	font-size:32px;
	}
	
	#topmenu dl{ float:none; width:100%; }
	#topmenu dl dt,#topmenu dl dd,#topmenu dl dd ul li{ padding:20px 0; border:none;}
	#topmenu dl dt.rollover,#topmenu dl dd.rollover,#topmenu dl dd ul li.rollover, #topmenu dl .selected{ background-color:#76BD22;}
	#topmenu dl dd {}
	#topmenu dl dd ul{ position: relative; left:auto; top:auto; margin-top:10px; }
	#topmenu dl dd ul li{ width:auto; background-color:rgba(146, 223, 236, 0.9); position: relative;}
	#topmenu dl dt a, #topmenu dl dd a, #topmenu dl dd ul li a{ margin-left:15px;}
	#topmenu dl dt{ border-top:solid 1px #336699; border-bottom:solid 1px #408080; position:relative;}
	
	/* mobilemenu 右側箭頭 */	
	#topmenu dl dt.lv::after, #topmenu dl dd.lv::after{ 
	position:absolute; content: "›"; display:block; right:0px; top:15px; width:50px; height:50px; font-size:38px; text-align:center; line-height:50px;}
	#topmenu dl dt.rollover::after, #topmenu dl dd.rollover::after, #topmenu dl dt.selected::after, #topmenu dl dd.selected::after{ 
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);	/* IE 9 */
		-webkit-transform: rotate(90deg);	/* Safari and Chrome */
		-o-transform: rotate(90deg);	/* Opera */
		-moz-transform: rotate(90deg);	/* Firefox */
	}
	/*#floatmenu{ display:none;}*/
	#floatmenu .menu{width:100%; min-width:640px;}
	#floatmenu .menu .logo, #floatmenu .menu a{ padding:0 15px;}
	
	#floatmenu .menu a{ display:none;}
	
	
	a.mobilemenu, #floatmenu .menu a.mobilemenu { display:inline-block; padding:0;}
	#floatmenu { }
	#floatmenu .menu a.mobilemenu{ }
	
	#topmenu{width:85%; height:100vh; background-color:rgba(0, 0, 0, 0.8); margin-left:0; left:-90%; z-index:999999; position:fixed; text-align:left; overflow-y:auto;
	-moz-box-shadow:0px 0px 15px rgba(0,0,0,.8); -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.8); box-shadow:	0px 0px 15px rgba(0,0,0,.8);
	font-size:32px;
	}
	
	#topmenu dl{ float:none; width:100%; }
	#topmenu dl dt,#topmenu dl dd,#topmenu dl dd ul li{ padding:20px 0; border:none;}
	#topmenu dl dt.rollover,#topmenu dl dd.rollover,#topmenu dl dd ul li.rollover, #topmenu dl .selected{ background-color:#76BD22;}
	#topmenu dl dd {}
	#topmenu dl dd ul{ position: relative; left:auto; top:auto; margin-top:10px; }
	#topmenu dl dd ul li{ width:auto; background-color:rgba(146, 223, 236, 0.9); position: relative;}
	#topmenu dl dt a, #topmenu dl dd a, #topmenu dl dd ul li a{ margin-left:15px;}
	#topmenu dl dt{ border-top:solid 1px #41693D; border-bottom:solid 1px #41693D; position:relative;}
	
	/* mobilemenu 右側箭頭 */	
	#topmenu dl dt.lv::after, #topmenu dl dd.lv::after{ 
	position:absolute; content: "›"; display:block; right:0px; top:15px; width:50px; height:50px; font-size:38px; text-align:center; line-height:50px;}
	#topmenu dl dt.rollover::after, #topmenu dl dd.rollover::after, #topmenu dl dt.selected::after, #topmenu dl dd.selected::after{ 
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);	/* IE 9 */
		-webkit-transform: rotate(90deg);	/* Safari and Chrome */
		-o-transform: rotate(90deg);	/* Opera */
		-moz-transform: rotate(90deg);	/* Firefox */
	}
	/*#floatmenu{ display:none;}*/
	#floatmenu .menu{width:100%; min-width:640px;}
	#floatmenu .menu .logo, #floatmenu .menu a{ padding:0 15px;}
	
	#floatmenu .menu a{ display:none;}


}