﻿.menu_container {
	position: relative;
	width: 990px;
	padding: 0;
	color: #FFFFFF;
	z-index:800;
	font-family: "微軟正黑體";
	font-size: 20px;
	line-height: 21px;
	float: right;
	margin-top: 55px;
	margin-right: 6px;
	margin-top: 70px \9;
}
.menu{display:block;position:relative}
.menu,
.menu ul{
	margin:0;
	padding:0;
	list-style:none;
	position:relative;
	background-color:#ffffff;
	border-radius: 5px;
	float:right;
	height:50px;
	line-height:50px\9;
}
.menu ul a{
	float:left;
	
}
.menu ul ul a{float:none;}
.menu 
.mega-menu a{float:none;padding:5px 8px;}
.menu ul ul,
.menu 
.mega-menu,
.menu 
.mega-menu ol li{
margin:0 !important;
opacity:0;visibility:hidden;display:none ! important/9;-webkit-transition:opacity 150ms ease-in-out;-moz-transition:opacity 150ms ease-in-out;-o-transition:opacity 150ms ease-in-out;-ms-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out}
.menu li:hover>ul,
.menu li:hover>
.mega-menu,
.menu li:hover>
.mega-menu ol li{opacity:1;visibility:visible;visibility:visible \9;display:block ! important/9}
.menu ul:after{content:"";clear:both;display:block}
.menu ul li{float:left;-webkit-transition:all 150ms ease-in-out;-moz-transition:all 150ms ease-in-out;-o-transition:all 150ms ease-in-out;-ms-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;}
.menu ul li a{display:block;color:#2d84c4;text-decoration:none; border-right: 1px solid rgba(f, f, f, 0.9);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1); font-weight:bold; border:0;}
.menu .arrow:after{content:"";float:right;text-align:right;width:0;height:0;display:block;border-left:3px solid rgba(0,0,0,0);border-right:3px solid rgba(0,0,0,0);border-top:3px solid #fff;top:9px;margin:0 0 0 5px;position:relative;border-left:3px solid transparent/9;border-right:3px solid transparent/9}
.menu ul li ul li .arrow:after{border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:3px solid #bbb;margin:-2px 0 0 5px}
.menu i{font-size:14px;font-style:normal;float:left;margin:4px 4px 0 -2px;line-height:14px;padding:0}
.menu .right{float:right;}
.menu .right ul,
.menu .right 
.mega-menu{right:0}
.menu ul ul{background:#fff;border:1px solid #e0e0e0;border-top:0;border-bottom:0;position:absolute;top:100%;width:170px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.04);box-shadow:0 1px 1px rgba(0,0,0,.04)}
.menu ul ul ul{position:absolute;left:100%;border-top:1px solid #e0e0e0;top:-1px}
.menu ul ul li a{padding:8px 12px;color:#777;border-bottom:1px solid #e4e4e4; background:#FFFFFF;}
.menu ul ul li{float:none;position:relative;-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none}
.menu ul ul li a:active,
.menu ul ul li:hover{background:#f5f5f5}
.menu ul ul li{background:#fff}
.mega-menu{
	background: rgba(255,255,255,0.85);
	background: url(../../../images/menuBg.png)\9 !important;
	position:absolute;
	top:100%;
	color:#666666;

-webkit-box-shadow:0 1px 1px rgba(0,0,0,.04);		box-shadow:0 1px 1px rgba(0,0,0,.04);

-webkit-box-sizing:border-box;-moz-box-sizing:border-box;		box-sizing:border-box;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #eee;
	border-right-color: #eee;
	border-bottom-color: #eee;
	border-left-color: #eee;
	margin: 0px;
	padding-top: 18px;
	padding-right: 11px;
	padding-bottom: 18px;
	padding-left: 11px;
}
.mega-menu ol{list-style:none;padding:0}
.mega-menu ol li{width:100%}
.mega-menu ol li:hover,
.mega-menu ol li a{color:#333;font-size:14px;padding:0;background-image:none;}
.mega-menu ol li a:hover{color:#FFFFFF; padding-left:8px;}
.mega-menu ol li img{color:#666666; padding-left:0px;}
.mega-menu div h4{
	font-size:16px;
	color:#333333;
	font-weight:bold;
	margin:5px 0;
	padding:5px 0;
}
.mega-menu div h4 a{color:#333333;}
.mega-menu .col-1{width:135px; line-height:20px\9; }
.mega-menu .col-2{width:288px}
.mega-menu .col-3{width:441px}
.mega-menu .col-4{width:594px}
.mega-menu .col-5{width:747px}
.mega-menu .col-6{width:900px}
.mega-menu .col-1,
.mega-menu .col-2,
.mega-menu .col-3,
.mega-menu .col-4,
.mega-menu .col-5,
.mega-menu .col-6{float:left;margin:0 9px}
.mega-menu.full-width{left:0;width:100%;padding:10px 15px 20px 15px;top:50px \9;}.full-width .col-1{width:14.1%}.full-width .col-2{width:30.4%}.full-width .col-3{width:46.7%}.full-width .col-4{width:63%}.full-width .col-5{width:79.3%}.full-width .col-6{width:95.6%}.full-width .col-1,.full-width .col-2,.full-width .col-3,.full-width .col-4,.full-width .col-5,.full-width .col-6{float:left;margin:0 0.8 0 2.2%}

@media only screen and (max-width: 767px){
.menu ul li{width:100%;cursor:pointer}
.menu ul li{position:relative}
.menu 
.mega-menu ol li{height:0}
.menu li:hover>
.mega-menu ol li{height:auto}
.mega-menu,
.menu ul ul{z-index:100}
.menu ul ul{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.menu ul ul ul{left:0}
.menu ul ul li:hover>ul{position:relative;border:none;border-top:1px solid #e4e4e4;-webkit-box-shadow:none;box-shadow:none}
.menu ul li ul li .arrow:after{border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #bbb;margin:0}
.mega-menu{padding:18px 0}
.mega-menu ol li:last-child{margin:0 0 20px 0}
.menu .col-1,.full-width .col-1,
.menu .col-2,.full-width .col-2,
.menu .col-3,.full-width .col-3,
.menu .col-4,.full-width .col-4,
.menu .col-5,.full-width .col-5,
.menu .col-6,.full-width .col-6{float:left;margin:0 0 0 3%;width:90%}} 
.style-1
.menu, .style-1
.menu ul li  { background-color: #FFFFFF; background-image: linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); background-image: -o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); background-image: -moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); background-image: -ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); } .style-1
.menu ul li:hover { background-color: #eb4e01; background-image: linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); }

a.rss:hover{ background:#ffaa31; color:#fff; padding-left:20px;}
a.twitter:hover{background:#07beed; color:#fff; padding-left:20px;}
a.facebook:hover{background:#314d91; color:#fff; padding-left:20px;}
a.googleplus:hover{background:#2d2d2d; color:#fff; padding-left:20px;}
a.pinterest:hover{background:#cd1d1f; color:#fff; padding-left:20px;}
a.stumbleupon:hover{background:#ec4b24; color:#fff; padding-left:20px;}


@media screen and (min-width: 1280px) and (max-width: 1980px) { 
.menu_container { width: 950px; 
}
.menu ul li a{padding:14px 15px 15px 15px;
}

}
@media screen and (min-width: 900px) and (max-width: 1279px) { 
.menu_container {
	
	font-size: 18px;
	line-height: 21px;
	float: right;
	margin-top: 55px;
	margin-right: 6px; 
	width: 990px;
} 
.menu ul li a{
	padding:14px 0px 15px 0px;
	margin:0px;
}
.mega-menu{
	position:absolute;
	top:100%;
	padding:0px;
	color:#666666;
}
.mega-menu.full-width{padding:10px 10px 20px 10px;}
.mega-menu .col-1{width:16%;}
.mega-menu .col-1 .hr h4{ padding:5px 3px;}
}
@media screen and (min-width: 550px) and (max-width: 900px) {
.menu_container { display:none;}
}
@media screen and (min-width: 320px) and (max-width: 550px)
{.menu_container { display:none;}}
