.header {
	background-color:#ffffff;
	box-shadow: 0 2px 20px #999999;
	width:100%;
	position:relative;
	left:0;
	top:0;
	z-index:501;
	text-align:left;
	-webkit-transition:all .6s ease-in-out;
            transition:all .6s ease-in-out;
}
.header::after {
    clear: both;
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
	overflow: hidden;
}

.header-top { text-align: right; }

.headerBg {
	position: absolute;
	width: 100%; height: 100%; top: 0; left: 0;
	background-position: center top;
	background-repeat: no-repeat;
	/*background-size: cover;*/
	z-index: -1;
}

.headerwrapper {
    margin: auto;
    width: 1365px;
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.headerwrapper::after {
    display: none;
}


/*
==============================================
   header logo
==============================================
*/
.header .logo {
	position:relative;
	margin-bottom: 0px;
	padding: 0;
	line-height: 1;
	z-index: 10;
	float: left;
	-webkit-transition:all 0.6s ease-in-out;
			transition:all 0.6s ease-in-out;
}
.header .logo > a {
	margin: 0 auto;
	display: block;
	/*-webkit-transition:all 0.6s ease-in-out;
			transition:all 0.6s ease-in-out;*/
}
.header .logo > a > span { font-size: 18px; }
/*.header .logo > a img { width: 400px; }*/

/*
==============================================
   search
==============================================
*/
.header .search-box{
    position:relative;
    min-width:265px;
    vertical-align: middle;
    display: inline-block;
}
.header .search-box .input-search{
    background:#fff;
    border-top-left-radius:25px;
    border-bottom-left-radius:25px;
    border-bottom-right-radius:25px;
    border-top-right-radius:25px;
    padding: 5px;
}
.header .search-box .advance-search{
    position:absolute;
    top:0;
    right:5px;
    z-index:2;
    height:45px;
    line-height:45px;
    color: gray;
}
.header .search-box .advance-search a{display:inline-block}
.header .search-box .advance-search .fa-search{
    height:28px;
    position:relative;
    top:-7px;
    color:#000;
    border-top-right-radius:15px;
    background-color:#fff;
    border-bottom-right-radius:15px
}
.header .search-box .advance-search .fa-search:before{position:relative;top:6px;left:-4px}
input.search-input {
    font-size: 15px;
    font-size: 1.5rem;
    width: 100%;
    border-bottom: 0;
    height: 35px;
    padding: 0px;
}
.intelligent-search {
    vertical-align: middle;
    display: inline-block;
}

/*
==============================================
   menu
==============================================
*/
.header .menu {
	/*position: relative;*/
	width: 100%;
	text-align: left;
	z-index: 600;
	background-color: #454545;
	margin-top: 10px;
}
.header .menu::after {
    clear: both;
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
	overflow: hidden;
}


.header .main-menu {
	margin:0;
	padding:0;
	vertical-align:middle;
	font-size:18px;
	font-size:1.8rem;
	width: 100%;
	position: relative;
	right: 0;
	bottom: 0;

	/*font-family: 'Montserrat', 'Noto Sans TC', "敺株��迤暺煾��", "Microsoft JhengHei", sans-serif;*/
}
.header .main-menu, 
.header .main-menu ul, 
.header .main-menu li { list-style:none; margin:0; padding:0; }
.header .main-menu a { display:block; white-space:nowrap; }
.header .main-menu li { position:relative; line-height:1; }


/* level 1 */
.header .main-menu > li > a:link { color:#ffffff; }
.header .main-menu > li > a:visited { color:#ffffff; }
.header .main-menu > li > a:hover { color:#ffffff; }
.header .main-menu > li > a:active { color:#ffffff; }

.header .main-menu > li {
	/*display:inline-block;
	*display:inline;*/
	float: left;
	*zoom:1;
	-webkit-transition:all 0.3s ease-in-out;
            transition:all 0.3s ease-in-out;
}

.header .main-menu > li::after {
	content:'';
	display:block;
	position:absolute;
	width: 100%;
	height: 0;
	background-color: rgba(255,255,255,0.2);
	overflow: visible;
	visibility: visible;
	bottom: 0;
	left: 0;
	opacity:0;

	-webkit-transition:all 0.3s ease-in-out;
            transition:all 0.3s ease-in-out;
}
.header .main-menu > li.parent:hover::before, 
.header .main-menu > li.parent.current-menu-item::before {
	opacity:1;
}
.header .main-menu > li.on::after,
.header .main-menu > li:hover::after {
	height: 100%;
	opacity:1;
}
.header .main-menu > li.parent:hover::before, 
.header .main-menu > li.current-menu-item::before {
	color: #454545;
	font-weight: 600;
}

.header .main-menu > li.sub-menu-active {
	background-color:#1f1f1f;
}
.header .main-menu > li > a {
	position: relative;
	padding: 15px 13px;
	z-index: 1;
}
.header .main-menu > li.parent:hover > a, 
.header .main-menu > li.current-menu-item > a {
	/*padding: 12px 25px 12px 13px;*/
}

/* MENU > DROPDOWN */
.header .menu ul.sub-menu a:link { color:#000000; }
.header .menu ul.sub-menu a:visited { color:#000000; }
.header .menu ul.sub-menu a:hover { color:#ffffff; }
.header .menu ul.sub-menu a:active { color:#ffffff; }

.header ul.sub-menu { 
	display:none;
	min-width: 100%;
	left:0px;
	top: 100%;
	position:absolute;
	z-index:200;
	text-align:left;

	box-shadow: 0 2px 6px #cccccc;
}
.header ul.sub-menu > li > a {
	padding:12px 13px;
	background:#ffffff;
}
.header ul.sub-menu li.parent > a::before {
	font-family: "Ionicons";
	content: "\f3d3";
	display:block;
	position: absolute;
	right: 15px;
	overflow: visible;
	visibility: visible;
	opacity:1;
	line-height: 19px;
	font-size: 13px;
    color: #000000;

	-webkit-transition:all 0.3s ease-in-out;
            transition:all 0.3s ease-in-out;
}
.header ul.sub-menu li:hover > a {
	background:#454545;
}
.header ul.sub-menu li.parent:hover > a::before {
	color: #ffffff;
	font-weight: 600;
}

/* level 3+ */
.header ul.sub-menu ul.sub-menu {
	left: 100%;
	top: 20%;
}

/* �訜��漤�賊� */
.header .main-menu > li.current-menu-item::after { left: 0; opacity: 1; }
.header .main-menu > li.current-menu-item > a { background: #ffffff; font-size: 1.85rem; font-size: 18.5px; }
.header .main-menu > li.current-menu-item > a:link { color:#454545; }
.header .main-menu > li.current-menu-item > a:visited { color:#454545; }
.header .main-menu > li.current-menu-item > a:hover { color:#454545; }
.header .main-menu > li.current-menu-item > a:active { color:#454545; }


.header ul.sub-menu > li.current-menu-item > a { background:#454545; }
.header ul.sub-menu > li.current-menu-item > a:link { color:#ffffff; }
.header ul.sub-menu > li.current-menu-item > a:visited { color:#ffffff; }
.header ul.sub-menu > li.current-menu-item > a:hover { color:#ffffff; }
.header ul.sub-menu > li.current-menu-item > a:active { color:#ffffff; }
.header ul.sub-menu li.current-menu-item > a::before {
	color: #ffffff;
	font-weight: 600;
}

/* 皛煾�� */
.header .menu ul.sub-menu > li.open > a:link { color:#ffffff; }
.header .menu ul.sub-menu > li.open > a:visited { color:#ffffff; }
.header .menu ul.sub-menu > li.open > a:hover { color:#ffffff; }
.header .menu ul.sub-menu > li.open > a:active { color:#ffffff; }


/*
==============================================
   menu-toggle
==============================================
*/
.header .menu-toggle {
	display: none;
	position: fixed;
	top: 0px;
	right: 10px;
	z-index: 1005;
	cursor: pointer;
	padding: 24px 10px;
}
body.admin .header .menu-toggle {
	top: 40px;
}
.header .menu-toggle.menu-toggle-active {
}
.header .menu-toggle-hamburger {
	display: block;
	width: 30px;
	height: 2px;
	background: #000000;
	position: relative;
}
.header .menu-toggle.menu-toggle-active .menu-toggle-hamburger {
	background: #ffffff;
	height: 2px;
}
.header .menu-toggle-hamburger::before, 
.header .menu-toggle-hamburger::after {
	display: block;
	width: inherit;
	height: 2px;
	position: absolute;
	background: inherit;
	left: 0;
	content: '';
	overflow: visible;
	visibility: visible;
	-webkit-transition:all 0.3s linear;
			transition:all 0.3s linear;
}
.header .menu-toggle-hamburger::before {
	bottom: 320%;
}
.header .menu-toggle-hamburger::after {
	top: 320%;
}
/* menu-toggle-active */
.header .menu-toggle-active .menu-toggle-hamburger::before {
	bottom: 520%;
	height: 2px;
}
.header .menu-toggle-active .menu-toggle-hamburger::after {
	top: 520%;
	height: 2px;
}

/*
==============================================
   nav
==============================================
*/
.header .nav {
	position:relative;
	float: right;
	z-index:601;
	line-height: 1;
    display:block;
    width: 80%;
}
.header .nav:after {
    clear: both;
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
	overflow: hidden;
}
.header .nav-menu { margin:auto; padding:0; font-size:14px; font-size:1.4rem; width:100%; display: flex; justify-content: space-around;}
.header .nav-menu ul, 
.header-shrink-nav-menu li { list-style:none; margin:0; padding:0; }
.header .nav-menu a { display:block; white-space:nowrap; }
.header .nav-menu li { position:relative; }
.header .nav-menu i { margin-right: 5px; }
.header .nav-menu:after {display: none;}

/* level 1 */
.header .nav-menu > li {
	border-right: 1px solid #cccccc;
	display:inline-block;
	*display:inline;
	*zoom:1;
	-webkit-transition:all 0.3s ease-in-out;
            transition:all 0.3s ease-in-out;
    display: inline-block;
    vertical-align: middle;
}

.header .nav-menu > li:last-child { border-right: none; padding-right: 0; display: block; margin: auto 0;}
.header .nav-menu > li:last-child > ul { text-align: right;}

.header .nav-menu > li > div { padding-right: 5px; }
.header .nav-menu > li > div:last-child { padding-right: 0; }

.header .nav-menu > li a {}
.header .nav-menu > li a:link, .menulist div { color: #fff; padding: 3px; margin: 2px; display: inline-block; }
.header .nav-menu > li span { color: #fff;padding: 3px 0; margin: 2px 2px 2px 5px; display: inline-block;}
.header .nav-menu > li a:visited { color:#fff; }
.header .nav-menu > li a:hover, .callStudyColorbox:hover { color:#ddd; }
.header .nav-menu > li a:active { color:#fff; }

/* �訜��漤�賊� */
.header .nav-menu > li.current-menu-item > a:link { color:#9cc9ff; }
.header .nav-menu > li.current-menu-item > a:visited { color:#9cc9ff; }
.header .nav-menu > li.current-menu-item > a:hover { color:#9cc9ff; }
.header .nav-menu > li.current-menu-item > a:active { color:#9cc9ff; }

.header .nav-menu ul.nav-sub-menu > li.current-menu-item > a { background:#cccccc; }
.header .nav-menu ul.nav-sub-menu > li.current-menu-item > a:link { color:#ffffff; }
.header .nav-menu ul.nav-sub-menu > li.current-menu-item > a:visited { color:#ffffff; }
.header .nav-menu ul.nav-sub-menu > li.current-menu-item > a:hover { color:#ffffff; }
.header .nav-menu ul.nav-sub-menu > li.current-menu-item > a:active { color:#ffffff; }

/* MENU > DROPDOWN */
.header .nav-menu ul.nav-sub-menu {
	min-width: 100%; 
	display:none;
	left:0px;
	top:100%;
	position:absolute;
	z-index:200;
	text-align:center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.header .nav-menu ul.nav-sub-menu > li {
	zoom: 1;
	z-index: 200;
}
.header .nav-menu ul.nav-sub-menu > li > a {
	padding: 7px 16px;
	background: #ffffff;
}
.header .nav-menu ul.nav-sub-menu > li > a:link { color: #C1C1C1; }
.header .nav-menu ul.nav-sub-menu > li > a:visited { color: #C1C1C1; }
.header .nav-menu ul.nav-sub-menu > li > a:hover { color: #9cc9ff; }
.header .nav-menu ul.nav-sub-menu > li > a:active { color: #9cc9ff; }

/* last-child ul */
.header .nav .nav-menu > li:last-child ul.nav-sub-menu { 
	left: auto;
	right: 0;
}

/*有聲雲新增*/


/* ipad 以下版型*/
@media all and (max-width: 768px) {
    .header .nav-menu {
        margin-right: 0px;
    }
    .header .nav-menu > li:first-child {
        margin-right: 0px;
    }
}

@media all and (max-width: 1365px) {
    .headerwrapper {
        width: 100%;
    }
    .header .nav {
        margin-right: 0;
    }
}

@media all and (max-width: 1080px) {
    .header .nav-menu > li:first-child {
        margin-right: 0;
    }
    .header .search-box{
        display: block;
        min-width: 190px;
        width: 100%;
    }
}

@media all and (max-width: 880px) {
    .headerwrapper {
        max-width: 90%;
        display: block;
    }
    .headerwrapper::after {
        display: block;
    }
    .header .nav-menu {
        margin-right: 0;
        display: block;
    }
    .header .nav-menu > li:last-child { 
        margin-left: 0;
    }
    .header .nav-menu > li:last-child > ul { 
        text-align: center;
    }
}
@media all and (max-width: 479px){
    .headerwrapper {
        max-width: 95%;
    }
    .header .search-box {
        min-width: 275px;
    }
}