#header{position:fixed; display:block; width:100%; height:110px; background:url(../../images/header_bg.png); z-index: 999;}
#header ul{ position: relative; margin: 0 auto; top: -110px;}
#header .left { display: block; }
#header .left li{ width: 85px; height:82px;  }
#header .left li a{ border-right:1px solid #48a1a8 ; }
#header .right { width: 546px; height: 30px; float: right; top: -159px; position: relative;}
#header ul li{width: 105px; display: inline-block;}
#header .top { width: 270px; height: 40px; position: relative; background: #a3c8cb; float: right; right: 20px; padding: 5px 0 0 0; z-index: 999; }
#header .top li{ width: 30px; height:30px; margin: 0 0 0 10px; display: inline-block; }
#header .top li .Language { color: #2f828a; margin: 12px 0 0 0; display: inline-block; position: absolute; }

/*mb_menu*/
#header .left_mb{display: none;}
/*end mb_menu*/

#header2{position:fixed; display:block; width:100%; height:60px; background:#b99349}
#header2 ul{ position: relative; width: 100%; margin: 0 auto; height: 60px; }
#header2 ul li{width: 105px; display: inline-block; margin: 0 0 0 10px; }

.menu_icon01{ background: url(../../images/menu_left_01.png); width: 45px; height: 30px; display: inline-block;}
.menu_icon02{ background: url(../../images/menu_left_02.png); width: 45px; height: 30px; display: inline-block;}
.menu_icon03{ background: url(../../images/menu_left_03.png); width: 45px; height: 30px; display: inline-block;}
.icon_cart{ background: url(../../images/menu_cart.png) no-repeat; width: 40px; height: 40px; display: block; top: 5px; position: absolute;}
.icon_cart2{ background: url(../../images/menu_cart2.png) no-repeat; width: 40px; height: 40px; display: block; top: -93px; position: relative; left: 290px;}
.icon_fb{ background: url(../../images/menu_fb.png) no-repeat; width: 40px; height: 40px; display: block;}
.icon_line{ background: url(../../images/menu_line.png) no-repeat; width: 40px; height: 40px; display: block;}
.icon_quantity{ width: 30px; height: 30px; background: url(../../images/car_quantity.png) no-repeat center; display: block; position: relative; right: 20px; top: 20px; color: #fff; text-align: center; line-height: 30px;}

.logo_wp{ width: 110px; margin: 0 auto; position: relative; height: 110px; }
.logo{ position: absolute; height: 110px; top: 0px; background: url(../../images/logo.png) center no-repeat transparent; text-indent: -9999px; z-index: 10; margin: 0 auto;}
.logo_2{position:absolute; float: left; margin: 0 10px 0 30px; width:235px; height:105px; top:0px; background:url(../../images/logo.png) center no-repeat transparent; background-color:#fff; text-indent:-9999px; z-index:10}
.menu-main{ position: relative; float: right; margin: -5px 0 0 0; width: 770px;}
.menu-main li{display: inline-block;}

nav{display:block; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out}
[class*="glyph-"]{ background:url('../../images/hamburger_menu.png');  width:25px;  height:25px;  display:inline-block;  vertical-align:top;  -webkit-transition:all 0.3s ease-in-out;  -moz-transition:all 0.3s ease-in-out;  transition:all 0.3s ease-in-out;  cursor:pointer}
[class*="glyph-"]:hover{-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; -webkit-opacity:0.9; -moz-opacity:0.9; opacity:0.9}
.glyph-list{background-position:0 -60px}
.glyph-list-white{background-position:0 -150px}
.glyph-right{background-position:-120px -30px}
/* Clearfix */
nav:after{content:""; display:table; clear:both}
nav.toggle{height:100%}
.nav-btn{position:absolute; top:0px; right:0px; padding:20px; display:none}

.btn-main{display:block; width:85px; height: 70px; border:1px solid transparent; text-align:center; margin: 20px 0; }

.btn-main-tw{position:absolute; display:block; width:85px; color:#ddd; font:bold 16px/50px 'neo_sanslight' , "微軟正黑體"; letter-spacing:1px; line-height: 14px; font-size: 13px; margin: 18px 0 0 0;}

 /* Landscape and down
===============================*/
@media (max-width:1200px){
#header .right { width: 470px; height: 30px; float: right; top: -159px; position: relative;}
#header ul li{width: 90px; display: inline-block;}

}
@media (max-width:1024px){
.logo_wp{ top: 60px; }
#header , #header2{ overflow: hidden; position: fixed; display: block; width: 100%; height: 60px; background:url(../../images/header_bg_mb.png); top: 0px; z-index: 999;}
#header ul , #header2 ul{ position: relative; width: 120px; margin: 0 auto; top: 100px; float: left; left: 20%;}
#header ul li , #header2 ul li {width: 160px; display: block; height: 40px; margin: 10px auto; }
.logo , .logo_2{margin: 0 10px 0 0; width:100px; height:60px; top:70px; background:url(../../images/logo_mb.png) center no-repeat transparent; text-indent:-9999px; z-index:10; z-index: 888888;}
.menu-main { position: relative; float: right; margin: -5px 0 0 0; width: 78%; }
.nav-btn{display:block}


#header .top { width: 270px; height: 40px; position: absolute; background: #a3c8cb; float: none; right: 0px; padding: 5px 0 0 0; z-index: 999; left: 0px; top: 210px;}
#header .top li{ width: 30px; height:30px; margin: 0 0 0 10px; display: inline-block;}
#header .right { width: 80px; height: 30px; float: none; top: 140px; position: relative; left: 0px;}

#header .left { display: none; }
#header .left_mb{display: inline-block; top: -28px; width: 280px; left: 0px; position: absolute;}
#header .left_mb li{ width: 85px; height:82px; display: inline-block;}
#header .left_mb li a { border-right:1px solid #48a1a8 ; }

.btn-main{height: 55px; }
.btn-main-tw{ margin: -3px 0 0 0;}

}

@media (max-width:480px){
.icon_fb li{margin:0 100px; display:inline-block}
#header .left_mb{display: inline-block; top: -28px; width: 280px; left: 0px; position: absolute;}
#header .left_mb li{ width: 70px; height:82px; display: inline-block;}
#header .left_mb li a { border-right:0px solid #48a1a8 ; }
.icon_cart2{ top: -78px; left: 250px;}

}
@media (max-width:320px){
.icon_fb li{margin:0 100px; display:inline-block}


}