.top-bar{
	background-color: #5d1b56;
	height: 50px;
	width:100%;
	color:#fefefe;
	position: fixed;
	top:0px;
	left:0px;
	z-index: 99999;
	pointer-events: fill;
}
.top-bar.active{
	opacity: 0;
	pointer-events: none;
	height: 0px;
}
.top-bar-left{
	margin-top: 15px;
	display: inline-block;
	flex: 10;
	padding-left: 0px;
	letter-spacing: 1px;
    text-align: center;
}

.top-bar-left li{
	display: inline-block;
	margin-right: 1.5%;
}
.top-bar-right{
	float: right;
	color:#fefefe;
}
.top-bar-right li{
	margin-top: 15px;
	letter-spacing: 1px;
	display: inline-block;
	flex: 1;
}
.top-bar-right li a{
	text-decoration: none;
	color:#fff;

}
.header-bar{
	width:100%;
	height: 80px;
	border-bottom:2px solid #F8F8F8;
	position: fixed;
	background: #fefefe;
	top:50px;
	left:0px;
	z-index: 999;
}
.header-bar.active{
	position: static;
	position: fixed;
	top:0px;
}
.header-bar-wrap,.top-bar-wrap{
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
	display: flex;

}
.main-menu-wrap{
	width: 65%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content:space-around;
}
.menu-img-wrap{
	width: 80px;
	height: 80px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 1376px) {
	.main-menu-wrap{
	width: 90%;
	}
}

.logo-img{
	height: 45px;
	margin-top: 15px;
	flex: 1;
}

.logo-img img{
    height: 100%;
}

@media all and (-ms-high-contrast: active),(-ms-high-contrast:none){
    
    .logo-img img{
        width: 100%;
    }
}

.search-bar-new-wrap{
	flex: 2 ;
	height: 70px;
	display: inline-block;
}

.hotword-wrap ul{
    list-style: none;
}

.hotword-wrap ul li{
    display: inline;
    margin-right: 10px;
}

.hotword-wrap ul li a{
    text-decoration: none;
    letter-spacing: 0;
}
/*會員下拉選單開始*/

#member-menu {
	flex: 2;
	height: 80px;
	width:100%;
	display: inline-block;
}
@media (max-width: 1200px) {
.top-bar-wrap{
	padding-left:  20px;
	padding-right: 20px;
}
.logo-img{
	height: 45px;
	margin-top: 15px;
	flex: 1;
	margin-left: 20px;
}
.search-bar-new-wrap{
	flex: 4 600px;
	height: 70px;
	margin-left: 80px;
	display: inline-block;
}
#member-menu {
	flex: 3 500px;
	height: 80px;
	width:100%;
	display: inline-block;
}	
}
#member-menu ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

* html #member-menu ul {
    /* 解決IE6不理overflow問題，直接指定高度 */
    height:30px;
}

#member-menu ul li {
    /* 利用float讓第一層li水平排列 */
    float:right;
}

/* 解決IE6條列式餘白問題*/

* html #member-menu ul li {
    display:inline;
}

#member-menu ul li a {

    /* 將a改為區塊元件，以便指定寬高 */
    display:block;
    /* 這邊也要設float，否則IE6會以100%寬度顯示 */
    float:left;
    /* 固定高度 */
    width: 140px;
    text-align: center;
}

#member-menu ul li ul {
    position:absolute;
    width:140px;
    overflow:visible;
    clear:left;
    margin-top: 70px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}

/* 修正IE7絕對定位差異 */

*:first-child+html #member-menu ul li ul {
    margin-top:0;
}

/* 修正IE6絕對定位差異 */

* html #member-menu ul li ul {
    margin-top:0;
}

#member-menu ul li ul li {

    /* 覆寫繼承自第一層的浮動設定 */
    float:none;
    margin-top: 10px;
    margin-bottom: 10px;
	font-size: 14px;
	letter-spacing: 2px;
    text-align: center;
    cursor: pointer;

}

#member-menu ul li ul li a {

    /* 覆寫繼承自第一層的浮動設定 */
    float:none;
    width: 100%;/* 註：display、height、padding繼承第一層的設定 */
}

#member-menu ul li ul li ul {
    margin-top: -30px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 100px;
    width: 100%;
}

/* 修正IE7絕對定位差異 */

*:first-child+html #member-menu ul li ul li ul {
    margin-top:-30px;
}



/* ---------- 隱藏與顯示階層 ---------- */

#member-menu ul li ul {
    /* 預先隱藏第二層 */
    margin-top: 80px;
    opacity: 0;
    pointer-events: none;
    transition:0.5s;
}

#member-menu ul li:hover ul {
	pointer-events: fill;
    /* 觸動第一層時，顯示第二層 */
    opacity: 1;
	transition:0.5s;
	margin-top: 70px;
}

#member-menu ul li:hover ul li ul {

    /* 顯示第二層時，隱藏第三層，避免同時彈出 */

    visibility:hidden;

}

#member-menu ul li ul li:hover ul {

    /* 觸動第二層時，顯示第三層 */

    visibility:visible;

}

#member-menu ul li ul li:hover ul li ul {

    /* 顯示第三層時，隱藏第四層，避免同時彈出 */

    visibility:hidden;

}

#member-menu ul li ul li ul li:hover ul {
    visibility:visible;
}




/* ---------- 以下為美化用，非必需 ---------- */

 

 

/* 預設字體 */

#member-menu {
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;

}
/* 第一層a字型 */
#member-menu ul li a {
    color:#FFF;
    text-decoration:none;
    line-height: 30px;
}
#member-menu ul li a i{
    font-size: 24px;
    line-height: 80px;
    color:#5d1b56;
}
#member-menu ul li span{
    font-size: 20px;
    line-height: 80px;
    color:#5d1b56;
    font-family: "微軟正黑體";
    font-weight: normal;
}
/*第二層ul背景色彩與邊框  */

#member-menu ul li ul {
    background:#fefefe;
    border-radius: 0px 0px 10px 10px;
    width: 140px;
    text-align: center;
}

/* 第二層a字型 */

#member-menu ul li ul li a {
    font-size:16px;
    color:#333333;
    text-decoration:none;
}

/* 觸動第一層li時，改變背景色 */

#member-menu ul li:hover, #member-menu ul li a:hover {
    background:#efefef;
}

#member-menu ul li:hover a {
    color:#333333;
}

/* 觸動第二層以上li時改變背景色 */

#member-menu ul li ul li:hover, #member-menu ul li ul li a:hover {
    background:#dfdfdf;
}

/*會員下拉選單結束*/