@import url("reset.css");
header { width: 100%; background: url(../images/main-menu.jpg) repeat-y center top; position: fixed; top: 0px; z-index: 9999; font-family: Helvetica, "Microsoft JhengHei", 微軟正黑體, "Hiragino Sans GB", Arial, sans-serif; }
.nav-item-container, .nav-item-content { padding-left: 0; list-style-type: none; }
.icon { text-indent: 100%; white-space: nowrap; overflow: hidden; }
.nav { width: 100%; margin: 3% auto; display: block; }
.nav-item-container { margin: 0; }
.nav-item { float: left; font-size: 14px; }
.nav-item .nav-item .nav-item .nav-item-title { text-transform: capitalize; }
.nav-item--right { position: absolute; top: 0px; right: 25px; font-size: 12px !important; }
.nav-item-title2 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: 40px; font-size: 12px !important; line-height: 40px; margin-right: 20px; padding: 0px; display: block; color: #f0f0f0; text-decoration: none; text-transform: uppercase; }
.nav-item-title { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: 50px; line-height: 50px; padding: 0px 20px; display: block; color: #f0f0f0; text-decoration: none; text-transform: uppercase; }
.nav-item-title:focus, .nav-item-title:hover { background: rgba(0,0,0,1); color: #f06292; }
.nav-item-content:not(.off-canvas-content) { max-height: 0; overflow: hidden; -moz-transition: max-height 0.3s ease-in-out; -o-transition: max-height 0.3s ease-in-out; -webkit-transition: max-height 0.3s ease-in-out; transition: max-height 0.3s ease-in-out; }
.nav-item--open .nav-item-content:not(.off-canvas-content) { max-height: 500px; }
.logo { width: 246px; height: 16px; float: left; margin: 15px 30px 0px 0px; background: url(../images/logo.png) center 0px no-repeat; text-indent: -9999px; background-size: 246px 16px; }
.logo a { width: 246px; height: 16px; display: block; }
html, body, .off-canvas { height: 100%; }
body, .off-canvas { min-height: 100%; }
body { overflow-x: hidden; }
.off-canvas { position: relative; width: 100%; -moz-transition: margin-left 0.3s ease-in-out; -o-transition: margin-left 0.3s ease-in-out; -webkit-transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out; }
.off-canvas--left { margin-left: 280px; }
.off-canvas--right { margin-left: -280px; }
.off-canvas-content { width: 280px; min-height: 100%; position: absolute; top: 0; background: #1e1e1e; }
.off-canvas-content .nav-item, .off-canvas-content .nav-item-title { width: 100%; }
.off-canvas-content > .nav-item { margin-bottom: 1px; }
.off-canvas-content > .nav-item > .nav-item-title { position: relative; }
.off-canvas-content > .nav-item > .nav-item-title:not(:only-child)::after { right: 20px; font-size: 14px; content: '▼'; position: absolute; color: #f0f0f0; }
.off-canvas-content > .nav-item--open > .nav-item-title:not(:only-child)::after { content: '▲'; }
[data-off-canvas-direction='left'] .off-canvas-content { left: -280px; }
[data-off-canvas-direction='right'] .off-canvas-content { right: -310px; }
.icon { position: relative; width: 60px; height: 60px; padding: 0; margin-top: -10px; }
.icon--menu::before, .icon--menu::after { content: ''; position: absolute; left: 50%; margin-left: -10px; width: 20px; height: 4px; }
.icon--menu::before { top: 50%; margin-top: -10px; border-top: 4px solid #f0f0f0; border-bottom: 4px solid #f0f0f0; }
.icon--menu::after { bottom: 50%; margin-bottom: -10px; background: #f0f0f0; }
.icon--account { margin-top:0px; margin-right: -30px; text-indent: -9999px; }
.icon--account::before, .icon--account::after { content: ''; position: absolute; left: 50%; top: 50%; height: 36px; }
.icon--account::before { top: 5%; margin-left: -15px; width: 36px; height: 36px; background: url("../images/shop-cart.png") no-repeat scroll 0px 0px; background-size: 36px; }
/*.icon--account::after {
	bottom: 50%;
	margin-bottom: -10px;
	margin-left: -10px;
	width: 20px;
	-moz-border-radius-topleft: 20px;
	-webkit-border-top-left-radius: 20px;
	border-top-left-radius: 20px;
	-moz-border-radius-topright: 20px;
	-webkit-border-top-right-radius: 20px;
	border-top-right-radius: 20px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-bottom-right-radius: 5px;
}  */
#shopping-cart { margin-top: 5px; position: absolute; right: 0; z-index: 999; width: auto; }
a #shopping-cart {  top:0; padding: 0 5px 0 20px;   display: block;  height: 24px; /*line-height: 19px;*/background: url("../images/shop-cart.png") no-repeat scroll 0px 0px #442222; background-size: 24px; border-radius: 13px; color: #002853; font-size: 15px; 
overflow: hidden; text-align: center; }
a:hover #shopping-cart { background-color: rgba(0, 110, 69, 0); background-position: 0px -6px; border-color: #425c96; color: #fff; }
#car_count { background-color: rgba(255, 255, 255, 1); border-radius: 10px; color: #000; display: block; font-size: 12px; height: 20px; line-height: 20px; margin: 2px 0 0 10px; overflow: hidden; text-align: center; width: 20px; }
 @media only screen and (max-width: 768px) {
.logo { position: absolute; left: 20%; width: 200px; height: 13px; background-size: 200px 13px; }
.nav { margin-top: 3%; margin-bottom: 0px; display: block; height: 56px; background-color: #442222; }
.nav-item-title2 { font-size: 15px !important; width: 100%; padding-left: 15%; }
#shopping-cart { margin: 5px auto; left: 0; z-index: 999; width: 50%; }
}
 @media only screen and (min-width: 800px) {
.nav-item-container .nav-item-content .nav-item { position: relative; }
.nav-item-container .nav-item-content .nav-item .nav-item-content { width: 280px; position: absolute; top: 50px; left: 0; z-index: 1; background: url("../images/sub-bg.jpg") center top; }
.nav-item-container .nav-item-content .nav-item--open { background: url("../images/sub-bg.jpg") center top; }
.nav-item-container .nav-item-content .nav-item--open > .nav-item-title:hover, .nav-item-container .nav-item-content .nav-item--open > .nav-item-title:focus { background: url("../images/sub-bg.jpg") center top; }
.nav-item-container .nav-item-content .nav-item--open .nav-item-content { background: url("../images/sub-bg.jpg") center top; }
.nav-item-container .nav-item--right .nav-item .nav-item-content { right: 0; left: auto; }
.nav-item .nav-item .nav-item { width: 100%; }
.nav-item .nav-item .nav-item .nav-item-title { width: 100%; }
.off-canvas--left { margin-left: 0; }
.off-canvas--right { margin-left: 0; }
.off-canvas-toggle-button { display: none; }
.off-canvas-content { width: auto; min-height: auto; position: static; }
.off-canvas-content .nav-item, .off-canvas-content .nav-item-title { width: auto; }
.off-canvas-content > .nav-item > .nav-item-title { }
.off-canvas-content > .nav-item > .nav-item-title:not(:only-child)::after { content: ''; }
.off-canvas-content > .nav-item--open > .nav-item-title:not(:only-child)::after { content: ''; }
[data-off-canvas-direction='right'] .off-canvas-content {margin-top: -30px !important; }
}