/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: OswaldLight, "微軟正黑體";
	font-size:15px;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul.hover_menu_left{
	position: absolute;
	display: none;
	top: 12px;
	z-index: 99;
	margin-top: 11px;
	background-color: #000;
	width: 449px;
	padding: 0px 0px 19px 13px;
	height:246px;
	text-transform:uppercase;
	
}
.sf-menu ul.extra_hover_menu_left{
	position: absolute;
	display: none;
	top: 6px;
	z-index: 99;
	margin-top: 11px;
	background-color: #000;
	width: 441px;
	padding: 2px 13px;
	height: 275px;
	text-transform: uppercase;

}

.extra_nav_link a{
font-size:12px;
}
.extra_hover_menu_left a{
	font-size:16px;
	letter-spacing:1px;
}

#primary-nav .hover_menu_left a{
	font-size:16px;
}
.sf-menu.margin_none{
margin:0px;
padding:0px;
}
.sf-menu ul.hover_menu_right{
position: absolute;
display: none;
height: 254px;
width: 339px;
z-index: 99;
padding: 10px 19px 0px 6px;
top: 24px;
background-color: #000;
}

.sf-menu ul.hover_menu_right img{padding-left:8px;}

.sf-menu ul.extra_hover_menu_right{
position: absolute;
display: none;
height: 265px;
width: 338px;
z-index: 99;
padding: 22px 15px 3px 6px;
background-color: #000;
top: 6px;
}

.sf-menu ul.extra_hover_menu_right img{padding-left: 0px;}

@media (min-width: 1035px){
.extra_first_item_left{left: -16px;}
.extra_first_item_right{left:451px;}
.extra_second_item_left{left: -82px;}
.extra_second_item_right{left:385px;}
.extra_third_item_left{left: -148px;}
.extra_third_item_right{left:319px;}
.extra_four_item_left{left: -214px;}
.extra_four_item_right{left: 253px;}
.extra_five_item_left {left: -334px;}
.extra_five_item_right{left: 132px;}

.first_item_left{left: -16px;}
.first_item_right{left:446px;}
.second_item_left{left: -106px;}
.second_item_right{left:356px;}
.third_item_left{left: -196px;}
.third_item_right{left:266px;}
.four_item_left{left: -304px;}
.four_item_right{left:158px;}
.five_item_left{left: -394px;}
.five_item_right{left:68px;}
}

@media (max-width: 1035px){
.extra_first_item_left{left: -15px;}
.extra_first_item_right{left:452px;}
.extra_second_item_left{left: -81px;}
.extra_second_item_right{left:387px;}
.extra_third_item_left{left: -147px;}
.extra_third_item_right{left:321px;}
.extra_four_item_left{left: -218px;}
.extra_four_item_right{left: 249px;}
.extra_five_item_left {left: -334px;}
.extra_five_item_right{left: 132px;}

.first_item_left{left: -15px;}
.first_item_right{left:446px;}
.second_item_left{left: -105px;}
.second_item_right{left:357px;}
.third_item_left{left: -195px;}
.third_item_right{left:267px;}
.four_item_left{left: -303px;}
.four_item_right{left:159px;}
.five_item_left{left: -393px;}
.five_item_right{left:69px;}
}

/*firefox only hack*/
@media only screen and (min-width: 1035px){
 @-moz-document url-prefix() { 
.extra_first_item_left{left: -15px;}
.extra_first_item_right{left:451px;}
.extra_second_item_left{left: -81px;}
.extra_second_item_right{left:385px;}
.extra_third_item_left{left: -147px;}
.extra_third_item_right{left:319px;}
.extra_four_item_left{left: -213px;}
.extra_four_item_right{left: 253px;}
.extra_five_item_left {left: -333px;}
.extra_five_item_right{left: 133px;}

.first_item_left{left: -15px;}
.first_item_right{left:446px;}
.second_item_left{left: -105px;}
.second_item_right{left:356px;}
.third_item_left{left: -195px;}
.third_item_right{left:266px;}
.four_item_left{left: -303px;}
.four_item_right{left:158px;}
.five_item_left{left: -393px;}
.five_item_right{left:68px;}
 }
}


.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu a:hover {
	display: block;
	position: relative;
	color:#FFFF00;
}
.sf-menu a:active {
	display: block;
	position: relative;
	color:#FFFF00;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}


/*** DEMO SKIN ***/
.sf-menu {
	float: left;
	margin-bottom:0px;
}
.sf-menu ul {
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	min-width: 12em;
	opacity: 0.90;
}
.navbar_display_images{
	padding: 10px 10px 10px 21px;
}
.sf-menu a {
	zoom: 1; /* IE7 */
	padding: 0px;
	margin-right: 18px;
	color: #fff;
	background: transparent;
	border: 0px;
}
.sf-menu a {
	color: #fff;
}
.sf-menu li {
	background:transparent;
	white-space: nowrap; /* no need for Supersubs plugin */
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */

}
.sf-menu ul li {
	background: #000;
	padding: 5px;
	opacity: 1;
	float:left;
	width:210px;
}

.sf-menu li:hover,
.sf-menu li.sfHover {
	background: transparent;
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;
	color:#FFFF00;
}

@media (max-width: 320px){
	#primary-nav .sf-menu a{
	margin-right:10px;
	}
	
	.extra_first_item_left{left: -15px;}
	.extra_first_item_right{left:452px;}
	.extra_second_item_left{left: -80px;}
	.extra_second_item_right{left:387px;}
	.extra_third_item_left{left: -146px;}
	.extra_third_item_right{left:321px;}
	.extra_four_item_left{left: -213px;}
	.extra_four_item_right{left: 253px;}
	.extra_five_item_left {left: -333px;}
	.extra_five_item_right{left: 134px;}
	
	.first_item_left{left: -15px;}
	.first_item_right{left:446px;}
	.second_item_left{left: -98px;}
	.second_item_right{left:364px;}
	.third_item_left{left: -180px;}
	.third_item_right{left:280px;}
	.four_item_left{left: -282px;}
	.four_item_right{left:180px;}
	.five_item_left{left: -365px;}
	.five_item_right{left:99px;}
	
}

@media only screen and (device-width: 768px) {
	#primary-nav .sf-menu a{
	margin-right:8px;
	}
}