@charset "UTF-8";
.header-inner { width:100%; display: flex; margin-bottom:50px; justify-content: center; border-bottom: 1px solid #ccc; box-shadow:0 -1px 10px rgba(150, 150, 150, 0.8); position: relative; z-index: 9999; background-color: #fff; }
.header-inner>div { max-width: 1920px; min-width: 1280px; width: 100%; display: flex; justify-content:space-between; }

.header-inner-left, .header-inner-right { display: flex; align-items: center; }
.menu-mobile-btn { display:none; }
.logo { height: 100%; display: flex; align-items: center; }
.logo>a, .logo>a>img { display:block; }
.logo>a>img { height: 50px; padding-left:15px; }

.menu-container-ul { display:flex; list-style:none; }
.menu-item-parent { font-size: 16px; font-weight: bold; cursor:pointer; transition: all 0.3s; background-color:#fff; position:relative; }
/*.menu-item-parent:hover { background-color:#efefef; }*/
.menu-item-parent>a { padding:25px; display: block; color:#262626; position:relative; }
.menu-item-parent>a:after { display:block; width: calc(100% - 50px); height:2px; background-color:#383838; content:""; position:absolute; bottom:18px; left:25px; opacity: 0; transition: all .3s; }
.menu-item-parent>a:hover:after { opacity:1; }
.menu-item-parent>a>svg, .menu-item-children>svg { display: block; position: absolute; top: 50%; right: 6px; transform:translate(-3px, -8px); fill: #383838; width: 15px; }
.menu-item-children>svg { display:none; }

.menu-item-children { transition: all 0.3s; }
.menu-item-active { background-color:#efefef; }

.sub-menu, .custom-sub-menu { display:none; list-style:none; position: absolute; background-color: rgb(239, 239, 239); width:200px; z-index:99999; left: 0; border-style: solid;
    border-width: 1px 1px 2px; border-color: rgba(0,0,0,.05) rgba(0,0,0,.05) #000; }
.sub-menu-item, .menu-item-object-custom { transition: all .3s; } 
.sub-menu-item:hover, .menu-item-object-custom:hover { background-color:rgb(228, 228, 228); } 
.sub-menu-item>a, .menu-item-object-custom>a { padding:25px; display:block; } 

.menu-item-object-custom { position: relative; }
.menu-item-object-custom:hover>a { color:#aa0000; }
.menu-item-object-custom>.custom-sub-menu { left: 100%; top: 0; }


.header-inner-right { padding-right:15px; }
.member-info-box { position:relative; height:100%; }
.member-info { width:60px; height:60px; margin:6px 0 5px; border:1px solid #efefef; border-radius: 100%; background-color:#fff; background-image: url(https://img.empyrean.tw/FEBF2EE5-7D65-42E6-8EF0-D9B3657370F1.png);
    background-repeat: no-repeat; background-position: center; background-size: cover; cursor: pointer; }
.member-info-menu { display:none; position: absolute; background-color: #fff; width: 350px; right: 0; border-style: solid; border-width: 1px 1px 2px; border-color: rgba(0,0,0,.05) rgba(0,0,0,.05) #000; list-style: none; }
.info-menu-item {  }
.info-menu-item>a { display:block; padding:5px 15px; transition: all 0.3s; }
.info-menu-item>a:hover { background-color:#ececec; }

.acc-info { display: flex; padding: 5px 15px; }
.acc-info-portrait { background-image: url(https://img.empyrean.tw/FEBF2EE5-7D65-42E6-8EF0-D9B3657370F1.png); width:70px; height:70px; background-position: center; background-repeat: no-repeat; background-size: cover; 
	border: 1px solid #efefef; border-radius: 100%; margin-right: 20px; }
.acc-info-name { font-size: 1.15em; margin-bottom: 7px; }
.acc-info-txt { font-size: 0.9em; color:rgba(0,0,0,.6);     margin-top: 3px; }


@media screen and (max-width:1279px)and (min-width:1px)
{
	.header-inner>div { max-width: initial; min-width: initial; height:50px; }
	
	.header-inner-left { position: relative; width: 100%; justify-content: center; }
	.menu-mobile-btn { width:30px; border:2px solid #000; border-left:0; border-right:0; height: 15px; display: flex; align-items: center; position: absolute; top: 20px; left: 20px; }
	.menu-mobile-btn>span { display:block; height:2px; width:30px; background-color:#000; }
	.menu-mobile-btn.active { border:0; }
	.menu-mobile-btn.active>span { display:none; }
	.menu-mobile-btn.active:before, .menu-mobile-btn.active:after { content:""; position:absolute; height:2px; width:30px; background-color: #000; transform: rotate(45deg); }
	.menu-mobile-btn.active:after { transform: rotate(-45deg); }
	.logo { padding-left:50px; }
	.logo>a>img { padding:0; height:40px; }
	.menu-container { display: none; position: absolute; top: 50px; left: 0; z-index: +1; width: 100vw; max-height: 80vh; overflow-y:auto; z-index: 999999; }
	.menu-container::-webkit-scrollbar { display: none; }
	.menu-container-ul { height: 100%; flex-direction: column; }
	.sub-menu, .custom-sub-menu { position: relative; width: 100%; background-color:#fff; }
	.sub-menu-item:hover, .menu-item-object-custom:hover { background-color:#fff; }
	.menu-item-active { background-color:#fff; }
	.menu-item-parent>a:after { display:none; }
	.menu-item-object-custom>.custom-sub-menu { width: 100%; padding-left: 50px; left: 0; border: 0; }
	.menu-item-children>svg { display:block; }
	.sub-menu-item { border-bottom:1px solid #ddd; }
	
	.header-inner-right { padding:0; }
	.member-info-box { padding-right: 12px; position: unset; }
	.member-info { width:40px; height:40px; }
	.member-info-menu { width: 100vw; left:0; right: unset; }
}