/*  PC選單 */
nav#menu > ul{ list-style-type: none; margin: 0; padding: 0; text-align: center;}
nav#menu > ul > li{ float: left; font-size: 18px; font-weight: 300;}
nav#menu > ul > li > a{ color: #e0e0e0; display: block; padding: 32px 25px; position: relative; z-index: 11;}
nav#menu > ul > li:hover > a, nav#menu > ul > li.current > a{ color: #fff; background: #4e4e4e !important;}

/* 子選單 */
nav#menu ul.nav-submenu{ list-style: none; margin: 0 0 0 -4%; padding: 0; position: absolute; top: 100%; z-index: 99; display: none;}
nav#menu ul.nav-submenu > li{ float: none; line-height: 60px;}
nav#menu ul.nav-submenu > li > a{ color: #fff; font-size: 24px; letter-spacing: 2px; padding: 10px 25px 10px 20px; background-color: rgba(0, 0, 0, 0.6); border-radius: 5px; display:block; margin-top: 2px;}
nav#menu ul.nav-submenu > li > a > span{ width: 80px; height: 60px; background: #9b9a9a; border-radius: 8px; display: block; float: left; margin-right: 15px; padding-top: 3px; overflow: hidden;}
nav#menu ul.nav-submenu > li > a > span > img{ width: 100%; max-width: 80px; height: auto; max-height: 60px; display: table;}
nav#menu ul.nav-submenu > li:hover > a{ background-color: rgba(0, 0, 0, 0.7);}
nav#menu > ul > li:hover > .hover-expand{ display: block; animation: hover-expand .2s linear 0s forwards; -moz-animation: hover-expand .2s linear 0s forwards; -ms-animation: hover-expand .2s linear 0s forwards; -o-animation: hover-expand .2s linear 0s forwards; -webkit-animation: hover-expand .2s linear 0s forwards;}

/* =================== 手機版選單 =============================== */
/* 按鈕 */

#responsive-nav{ display: none; font-size: 16px; font-weight: bold; text-transform: uppercase; color: #fff; font-family: Verdana, "Microsoft JhengHei"; padding: 32px 15px; background-color: #fa901f; cursor: pointer; margin: 0px;}
.responsive-nav-icon { width: 25px; height: 2px; background: #fff; display: block; float: right; margin: 10px 0 0 8px; position: relative; text-align: left;}
.responsive-nav-icon:before, .responsive-nav-icon:after{ width: 25px; height: 2px; content: ""; position: absolute; background: #fff; left: 0px; top: -7px;}
.responsive-nav-icon:after{ top: 7px;}
.responsive-nav-icon, .responsive-nav-icon:before, .responsive-nav-icon:after, .menu-button{ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

#responsive-nav-button.active .responsive-nav-icon{ background: transparent;}
#responsive-nav-button.active .responsive-nav-icon:before{ top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
#responsive-nav-button.active .responsive-nav-icon:after{ top: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}

#menu #responsive-nav ul{ width: 100%; list-style: none; margin: 0; padding: 0; box-shadow: 0 2px 3px rgba(0,0,0, 0.152); -webkit-box-shadow: 0 2px 3px rgba(0,0,0, 0.12); position: absolute; top: 100%; left: 0; z-index: 100; display: none;}
#menu #responsive-nav ul li{ width: 100%; max-width: 100% !important; padding-bottom: 0 !important; background: #fafafa; font-size: 15px; line-height: 25px; font-weight: 700; border-top: 1px solid rgba(200, 200, 200, 0.4); border-bottom: 1px solid rgba(255, 255, 255, 0.7); position: relative;}
#menu #responsive-nav ul li a{ padding: 12px 0 12px 15px; display: block; color: #555; text-transform: uppercase;}
#menu #responsive-nav ul li:first-of-type{ border-top: none;}
#menu #responsive-nav ul li:last-of-type{ border-bottom: none;}
#menu #responsive-nav ul li a:hover, #menu #responsive-nav ul li.active{ color: #fa901f;}


#menu #responsive-nav ul li a:before{ content: "\e87a"; font-size: 12px; color: #aaa; padding-left: 10px; padding-right: 15px; font-family: fontello;}

.menu-button{ font-size: 26px; color: #101010; display: block; cursor: pointer; z-index: 100; position: absolute; right: 5px; top: 12px;}
#menu #responsive-nav ul li .menu-button:hover{ color: #a80d1f;}
#menu #responsive-nav ul li ul{	display: none; box-shadow: none; -webkit-box-shadow: none;}

#menu #responsive-nav ul li ul, #menu #responsive-nav ul li ul li ul{ width: 100%; position: relative; border-top: 1px solid rgba(200, 200, 200, 0.5); border-left: none; border-right: none; background: none;}
#menu #responsive-nav ul li ul li{ background:#f0f0f0;}
#menu #responsive-nav ul li ul li ul li{ font-size:15px; line-height:20px; background:#e3e3e3;}
#menu #responsive-nav ul li ul a { font-size: 15px; padding:10px 0 10px 30px !important; margin-top: 0; background: transparent;}
#menu #responsive-nav ul li ul a span{ display: none;}
#menu #responsive-nav ul li ul li ul a{	padding:10px 0 10px 41px !important;}

#menu #responsive-nav ul li.responsive-platform{ display: block;}
#menu #responsive-nav > ul > li.responsive-platform > a:before{ content: "\e825"; font-size: 16px; color: #101010;}

/*===========================================================================================================*/