/* 標準版 */
#wrapper{  display: flex; min-height: 100%; width: 100%;flex-direction: column }
#wrapper > header{ z-index: 10;    }
#wrapper > section{; flex: 1; flex: 1 ;  }
#wrapper > section > footer{z-index: 5;   }


/*內容*/
#header{display: flex; align-items: center;  width: 95%; max-width: 1600px; margin: 0px auto ; padding:  0px 0px; ; justify-content: space-between; }

#brands{display: inline-flex;  align-items: center; padding: 10px 0px ;  }

.brands-logo{   }
.brands-logo img{ height:   80px; }
.brands-title{  padding:0px 10px;  text-align: left;  }
.brands-title img{  height: 80px;   display: block;   }
.brands-title-vertical{ display: none;}
.brands-word{ font-size: 18pt; font-weight: bold!important;    }

#nav-header{ flex:1}
#nav-header ul{ width: 100%; display: flex; align-items: center; justify-content: flex-end ; flex-wrap: wrap;}
#nav-header ul li{}
#nav-header ul li a{display: flex; align-items: center; padding: 5px 8px; white-space: nowrap;}
#nav-header ul li a i{}
#nav-header ul li a img{ display: block; max-height: 40px;}
#nav-header ul li a span{padding: 5px ;}

#nav-icon{ margin :0 10px;; }
#nav-icon-rwd{ margin-left:5px; display: none;; }


.nav-icons{ }
.nav-icons ul{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end}
.nav-icons ul li{margin:0 2px;}
.nav-icons ul li a{display: flex; align-items: center;  padding: 3px 5px; cursor: pointer;}
.nav-icons ul li a i{ font-size: 24px}
.nav-icons ul li a img{ display: block; max-height: 40px;}

.nav-icons ul li a span{ display: none} 

.nav-icons-member{}
.nav-icons-member-name{margin-left:5px; max-width:60px;white-space:nowrap;overflow: hidden; text-overflow:ellipsis; font-size: 10pt;}

#nav-rwd{ position: fixed; left: 0px ; top:-100%; background: rgba(0,0,0,0.9); width: 100%; height: 100%; z-index: 9; overflow: auto;   }
#nav-rwd ul{  min-height: 100%; width: 100%; overflow: auto; display: flex; align-items: center; justify-content: center;  flex-direction: column; padding:20px 10% 50px 10%; }

#nav-rwd ul li{width: 100%;  border-bottom:1px dotted rgba(255,255,255,0.3) ;}
#nav-rwd ul li a{display: flex;; align-items: center;    justify-content: space-between;;padding: 15px 20px   }
#nav-rwd ul li a span{flex:1 }
#nav-rwd ul li a i{ margin: 0px 10px;  }
#nav-rwd ul li a img{ display: block; max-height:40px;}

#nav-rwd ul li a span{  font-weight: bold; }
 
@media screen and (max-width:768px) {	
	#nav-header{ display: none;}
	#brands{flex:1}
	
	.brands-logo img{ height: 60px;  }
	.brands-title img{ height:60px}
	#nav-icon-rwd{ display:block} 
	
	.nav-icons ul li a{ padding: 2px;}
	.nav-icons ul li a i{ font-size: 20pt;}

	.nav-icons-member-name{ display: none;}

}
@media screen and (max-width:480px) { 
	 
}


#nav-header li{position: relative}
#nav-header li.haveSub{ }
#nav-header li.haveSub >a:after{content: '▼'; font-size: 0.5em; opacity: 0.5; margin: 0 5px}
#nav-header .nav-header-sub{display: none; position: absolute; top: 100%; ; min-width: 100%;   }
#nav-header .nav-header-sub ul{ flex-direction: column;padding: 20px 10px; opacity: 0.9; background: #FFF;}
#nav-header .nav-header-sub ul li{ width: 100% }
#nav-header .nav-header-sub ul li a{ display: block;width: 100%; text-align:center}

#nav-header li:hover .nav-header-sub{display: block}

#nav-header li.haveSub{ }
 
#nav-rwd ul li.haveSub{ }
#nav-rwd ul li.haveSub a{ cursor: pointer; }
#nav-rwd ul li.haveSub > a:after{content: '▼'; font-size: 0.5em; opacity: 0.5; margin: 0 5px; ;}
#nav-rwd .nav-header-sub{display: none; position:relative;  }
#nav-rwd .nav-header-sub ul{ padding:0px 10px 10px 10px; }
#nav-rwd .nav-header-sub ul li{ width: 100% ; border: 0px;}
#nav-rwd .nav-header-sub ul li a{ display: block;width: 100%; padding:8px 10px; opacity: 0.75; padding-left: 30px;}
 

#nav-rwd li.on .nav-header-sub{display: block}
#nav-rwd li.on.haveSub > a:after{content: '▲';  }