@charset "utf-8";

body{
	min-width: 280px;
}

#hkecl-topbar {
		font-size: 16px;
}

		#hkecl-topbar h3 {
				font-size: 20px;
		}
		#hkecl-topbar h4 {
				font-size: 16px;
		}

body.eng #hkecl-topbar {
		font-size: 13px;
}

		body.eng #hkecl-topbar h3 {
				font-size: 16px;
		}
		body.eng #hkecl-topbar h4 {
				font-size: 13px;
		}

/*
 * Top Navigation Bar
 * Use 450px as first media query point
 */
#hkecl-topbar .hkecl-page-container {
		padding: 0;
		/*background: rgba(255,255,255,0.75);*/
		background-color: #FFF;
		width: 100%;
		/*min-width: 320px;*/
		min-height: 40px;
		/*font-size: 16px;*/
}

body.eng #hkecl-topbar .hkecl-page-container {
	/*font-size: 13px;*/
}

#hkecl-topbar ul {
		padding: 0;
		margin: 0;
}

#hkecl-topbar ul.hkecl-menu-left {
	float: left;
	font-size: 15px;
}

div#hkecl-topbar ul.hkecl-menu-left {
		display: block;
}

.touch #hkecl-topbar ul.hkecl-menu-left {
		/*display: none;*/
}

@media (max-width: 1023px){
	div#side-menu-trigger {
		display: inline-block;
	}
}

@media all and (min-width: 1023px) {
		#hkecl-topbar ul.hkecl-menu-left {
				display: block;
		}
}

#hkecl-topbar ul.hkecl-menu-left li {
		display: inline;
		background: url(images/props/graydot.png) center left no-repeat;
		background-origin: content-box;
		padding-left: 15px;
		padding-right: 0px;
	 /*padding-right: 5px;*/
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box; /* Firefox, other Gecko */
		-ms-box-sizing: border-box; /* for IE8 */
		box-sizing: border-box; /* Opera/IE 8+ */
		float: left;
		background: none;
		padding-left: 1px;
		padding-top: 10px;
}

#hkecl-topbar ul.hkecl-menu-left li a {
		display: inline;
		border-bottom: none;
}

#hkecl-topbar ul.hkecl-menu-left li a h3, #hkecl-topbar ul.hkecl-menu-left li a.hkecl-h3 {
		display: inline-block;
		font-size: 100%;
		padding: 0 3px;
		margin: 0;
		color: #666666;
}



#hkecl-topbar ul.hkecl-menu-left li a h3, #hkecl-topbar ul.hkecl-menu-left li a.hkecl-h3 {
		/* display: none; */
}
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login.hkecl-menu-item,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-lang.hkecl-menu-item,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-fontsize.hkecl-menu-item{
	display: none;
}

#hkecl-topbar ul.hkecl-menu-left li a img {
		background: #ff0;
		width: 28px;
		height: 23px;
		background: url(images/topbar/top_login.png);
		background-size: 90%;
		background-position: 45% top;
		/*background-color: #00f;*/
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		float: left;
		display: none;
}

@media all and (min-width: 1024px) {
		#hkecl-topbar ul.hkecl-menu-left li a h3, #hkecl-topbar ul.hkecl-menu-left li a.hkecl-h3 {
				display: inline-block;
				margin-right: 10px;
		}
		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login.hkecl-menu-item,
		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-lang.hkecl-menu-item,
		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-lang.hkecl-menu-item>div.lang,
		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-fontsize.hkecl-menu-item{
			display: inline-block;
		}
		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-fontsize.hkecl-menu-item{
			line-height: 1;
		}
		body.eng #hkecl-topbar ul.hkecl-menu-left li a h3, body.eng #hkecl-topbar ul.hkecl-menu-left li a.hkecl-h3 {
				margin-right: 1px;
		}

		#hkecl-topbar ul.hkecl-menu-left li.menu_hq a h3:hover, #hkecl-topbar ul.hkecl-menu-left li.menu_hq a.hkecl-h3:hover {
				/* color: #202ca5; */
				color: #FAFF00;
		}

		#hkecl-topbar ul.hkecl-menu-left li.menu_teacher a h3:hover, #hkecl-topbar ul.hkecl-menu-left li.menu_teacher a.hkecl-h3:hover {
				/* color: #0985ba; */
				color: #FAFF00;
		}

		#hkecl-topbar ul.hkecl-menu-left li.menu_secondary a h3:hover, #hkecl-topbar ul.hkecl-menu-left li.menu_secondary a.hkecl-h3:hover {
				/* color: #00b341; */
				color: #FAFF00;
		}

		#hkecl-topbar ul.hkecl-menu-left li.menu_primary a h3:hover, #hkecl-topbar ul.hkecl-menu-left li.menu_primary a.hkecl-h3:hover {
				/* color: #91b54b; */
				color: #FAFF00;
		}

		#hkecl-topbar ul.hkecl-menu-left li.menu_parent a h3:hover, #hkecl-topbar ul.hkecl-menu-left li.menu_parent a.hkecl-h3:hover {
				/* color: #e38022; */
				color: #FAFF00;
		}

		#hkecl-topbar ul.hkecl-menu-left li.menu_partner a h3:hover, #hkecl-topbar ul.hkecl-menu-left li.menu_partner a.hkecl-h3:hover {
				/* color: #b22d2d; */
				color: #FAFF00;
		}
}





				/*


				#hkecl-topbar ul.hkecl-menu-left li.menu_teacher {
						background: none;
						padding-left: 0;
				}

				#hkecl-topbar ul.hkecl-menu-left li.menu_primary {
						max-width: 125px;
						display: inline-block;
				}

				#hkecl-topbar ul.hkecl-menu-left li.menu_secondary {
						max-width: 145px;
						display: inline-block;
				}

				#hkecl-topbar ul.hkecl-menu-left li h3{
						width: auto;
						min-width: 35px;
						height: 40px;
						border: none;
						background-position: 0 0px;
						background: url(images/topbar/top_login.png);
						background-repeat: no-repeat;

						cursor: pointer;
				}

				#hkecl-topbar ul.hkecl-menu-left li.menu_teacher h3{
					background-color: #0985ba;
				}
				#hkecl-topbar ul.hkecl-menu-left li.menu_secondary h3{
					background-color: #00b341;
				}
				#hkecl-topbar ul.hkecl-menu-left li.menu_primary h3{
					background-color: #b4c831;
				}
				#hkecl-topbar ul.hkecl-menu-left li.menu_parent h3{
					background-color: #a65d00;
				}
				#hkecl-topbar ul.hkecl-menu-left li.menu_partner h3{
					background-color: #ed9e2e;
				}



				#hkecl-topbar ul.hkecl-menu-left li h3:hover{

						background-color: #919191;
				}












				#hkecl-topbar ul.hkecl-menu-left li a {
						color: #AAA;
				}

				#hkecl-topbar ul.hkecl-menu-left li a.role-link {

				}

				#hkecl-topbar ul.hkecl-menu-left li a:hover {
						border-bottom: none;
						text-decoration: none;
				}

				#hkecl-topbar ul.hkecl-menu-left li.menu_teacher a:hover {
						color: #0985ba;
				}

				#hkecl-topbar ul.hkecl-menu-left li.menu_secondary a:hover {
						color: #00b341;
				}

				#hkecl-topbar ul.hkecl-menu-left li.menu_primary a:hover {
						color: #b4c831;
				}

				#hkecl-topbar ul.hkecl-menu-left li.menu_parent a:hover {
						color: #a65d00;
				}

				#hkecl-topbar ul.hkecl-menu-left li.menu_partner a:hover {
						color: #ed9e2e;
				}


*/








































/*********************************************************************
 * MENU RIGHT
 ********************************************************************/

#hkecl-topbar ul.hkecl-menu-right {
	float: right;
	font-size: 93.75%;
	padding: 3px 5px 3px 5px;
	top: 0;
	right: 0;
	width: auto;
	z-index: 99;
}

@media all and (min-width: 1024px) {
	#hkecl-topbar ul.hkecl-menu-right {
			padding: 10px 0px 5px 5px;
	}
}

#hkecl-topbar ul.hkecl-menu-right li {
		float: left;
		padding: 0 5px;
}

#hkecl-topbar ul.hkecl-menu-right li a {
	width: auto;
	min-width: 20px;
	height: 20px;
	border: none;
	text-align: center;
	font-family: Arial, simhei, Helvetica, sans-serif;
	display: inline-block;
}

#hkecl-topbar ul.hkecl-menu-right li a:hover {
	cursor: pointer;
	text-decoration: none;
}

						/*
						#hkecl-topbar .channel-logo-small {
							display: inline-block;
							height: 40px;
							overflow: hidden;
							display: inline-block;
							float: left;
							margin-left: 40px;
						}

						@media all and (min-width: 650px) {
								#hkecl-topbar .channel-logo-small {
									display: none;
								}
						}

						@media all and (min-width: 960px) {

						}

						#hkecl-topbar .channel-logo-small img {
							width: auto;
							height: 34Px;
						}
						*/


						/*第一個state收埋*/

#hkecl-side-menu-container .fontscale-pack-top {
		display: inline-flex;
		justify-content: flex-start;
		width: 100%;
}

#hkecl-side-menu-container .fontscale-pack-top .fontscale-pack{
	margin-top: 5px;
	margin-bottom: -5px;
}

#hkecl-side-menu-container .hkecl-style-switcher:hover {
    padding-bottom: 0px;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-search-input {
		display: none;
		min-width: 20px;
		overflow: hidden;
		width: auto; /* added by adrian as at 2013-05-09*/
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-search {
	padding-right: 0;
}

/* 2016MayEdit */

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-help,
						#hkecl-topbar ul.hkecl-menu-right li.hkecltb-lang {
		display: block;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-lang {
	padding: 0;
}

#hkecl-topbar ul.hkecl-menu-right h3, #hkecl-topbar ul.hkecl-menu-right a.hkecl-h3, #hkecl-topbar ul.hkecl-menu-right a.hkecl-h3:hover {
		border-bottom: 2px dotted #06345A;
		margin-bottom: 15px;
		font-size: 150%;
		cursor:default;
		display:block;
}
#hkecl-topbar ul.hkecl-menu-right input.checkbox {
		float: left;
		margin-right: 10px;
		width: auto;
		border: none;
}

#hkecl-topbar ul.hkecl-menu-right #openid-box {
		width: 100%;
		padding: 0 15px;
		margin-bottom:10px;
		float: left;
		background:#FFFFFF url(images/topbar/bg_gardient.png) repeat-x;
		vertical-align:middle;
}

#hkecl-topbar ul.hkecl-menu-right #login-box {
		width: 100%;
		float: left;
		padding: 0 10px;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div .user-input,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div .user-input {
	margin-right:10px; padding:10px;
}
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div .password-input,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div .password-input {
	margin-right:10px; padding:10px;
}
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div .staylabel,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div .staylabel {
	float:left;width:300px;width:100%;
}
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div .forgetlabel,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div .forgetlabel {
	float:right; display:block; margin-top:45px; margin-right:15px;
}
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div #login-box .forgetlabel a,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div #login-box .forgetlabel a{
	height:20px;
}
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div #login-box .forgetlabel a:hover,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div #login-box .forgetlabel a:hover{
	padding-bottom: 2px;
	border-bottom: #c93 1px solid;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.btn,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div a.btn {
	min-width:20px;
	min-height:20px;
	color:#FFF;
	text-align:center;
	vertical-align:middle;
	border-radius: 3px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* for IE8 */
	box-sizing: border-box;
	float:left;
	font-size:150%;
	font-weight:bold;
}


#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.btn:hover,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div a.btn:hover {
	opacity:0.7;
	border-radius: 2px;
	border-bottom: none;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.btn-join,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div a.btn-join {
	background:url(images/topbar/top_login20.png) center top;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .search-div a.btn {
	background: #2084af url(images/topbar/top_search20.png) center no-repeat;
	width: 40px;
	height: 30px;
	padding: 0 10px;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-facebook-120,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div a.icon-facebook-120 {
		background: url(images/props/logo_facebook_32.png) no-repeat;
		width: 32px;
		height: 32px;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-facebook-120:hover,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div a.icon-facebook-120:hover {
		background: url(images/props/logo_facebook_32_dim.png) no-repeat;
		width: 32px;
		height: 32px;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-google-120,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div a.icon-google-120 {
		background: url(images/props/logo_google_32.png) no-repeat;
		width: 32px;
		height: 32px;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-google-120:hover,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div a.icon-google-120:hover {
		background: url(images/props/logo_google_32_dim.png) no-repeat;
		width: 32px;
		height: 32px;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-yahoo-120,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div a.icon-yahoo-120 {
		background: url(images/props/logo_yahoo_32.png) no-repeat;
		width: 32px;
		height: 32px;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-yahoo-120:hover,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div a.icon-yahoo-120:hover {
		background: url(images/props/logo_yahoo_32_dim.png) no-repeat;
		width: 32px;
		height: 32px;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-winlive-120,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div a.icon-winlive-120 {
		background: url(images/props/logo_winlive_32.png) no-repeat;
		width: 32px;
		height: 32px;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-winlive-120:hover,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div a.icon-winlive-120:hover {
		background: url(images/props/logo_winlive_32_dim.png) no-repeat;
		width: 32px;
		height: 32px;
}

#hkecl-topbar ul.hkecl-menu-right .sharing-div {
	background-color: rgba(215,215,215,0.5);
	/* position: absolute; */
    width: auto;
    padding: 5px;
    border: solid 1px #59a5c1;
    z-index: 1000;
}

#hkecl-topbar ul.hkecl-menu-right .sharing-div .sharing-dropdown ul {
	list-style: none;
}

#hkecl-topbar ul.hkecl-menu-right .sharing-div .sharing-dropdown li {
	float: none;
	padding: 0;
}

#hkecl-topbar ul.hkecl-menu-right .sharing-div .sharing-dropdown a {
	height: 32px;
	width: 32px;
	display: block;
	padding: 2px;
}

#hkecl-topbar ul.hkecl-menu-right .sharing-div .sharing-dropdown a:hover {
	opacity: 0.7
}

#hkecl-topbar ul.hkecl-menu-right .sharing-div .sharing-dropdown .sharing_fb a {
	background: url(images/topbar/top_sharing_fb.png);
	background-repeat: no-repeat;
}

#hkecl-topbar ul.hkecl-menu-right .sharing-div .sharing-dropdown .sharing_whatsapp a {
	background: url(images/topbar/top_sharing_whatsapp.png);
	background-repeat: no-repeat;
}

#hkecl-topbar ul.hkecl-menu-right .sharing-div .sharing-dropdown .sharing_messenger a {
	background: url(images/topbar/top_sharing_messenger.png);
	background-repeat: no-repeat;
}

#hkecl-topbar ul.hkecl-menu-right .sharing-div .sharing-dropdown .sharing_twitter a {
	background: url(images/topbar/top_sharing_twitter.png);
	background-repeat: no-repeat;
}

#hkecl-topbar ul.hkecl-menu-right .sharing-div .sharing-dropdown .sharing_linkedin a {
	background: url(images/topbar/top_sharing_linkedin.png);
	background-repeat: no-repeat;
}

#hkecl-topbar ul.hkecl-menu-right .sharing-div .sharing-dropdown .sharing_email a {
	background: url(images/topbar/top_sharing_email.png);
	background-repeat: no-repeat;
}

#hkecl-topbar ul.hkecl-menu-right .sharing-div .sharing-dropdown .sharing_copylink a {
	background: url(images/topbar/top_sharing_copylink.png);
	background-repeat: no-repeat;
}

#hkecl-topbar ul.hkecl-menu-right .hkecltb-sharing #copied-tooltip,
#hkecl-topbar ul.hkecl-menu-right .hkecltb-sharing #manual-copy-tooltip {
	display: none;
}

@media all and (min-width: 450px) {

}

@media all and (min-width: 605px) {
		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-search-input {
				display: block;
		}
		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-help,
		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-lang {
				display: block;
		}

		#hkecl-topbar ul.hkecl-menu-right #openid-box {
				width: 100%;
				float: left;
				padding: 0 10px;
				margin-bottom: 10px;
		}

		#hkecl-topbar ul.hkecl-menu-right #login-box {
				width: 100%;
				float: left;
				padding: 0 10px;
		}
}

#hkecl-topbar #search {
		float: left;
		width: 170px;
		height: 15px;
		max-width: 170px;
		margin: 0;
		padding: 3px;
		box-sizing: content-box; /* fix from box-sizing assigned by bootstrap */
}

@media all and (min-width: 650px) {
		#hkecl-topbar #search {
				max-width: 400px;
		}

		#hkecl-topbar .fontscale-pack-top {
				display: none;
		}
/*
		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div .password-input {
			width:170px;margin-right:5px;
		}
		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div .staylabel {
			float:left;width:340px;
		}
*/
}

@media all and (min-width: 750px) and (max-width: 1023px) {
		#hkecl-topbar #search {
				max-width: 100px;
		}
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-search a {
	background: url(images/topbar/top_search.png);
	background-repeat: no-repeat;
	padding: 0;
	box-sizing: content-box;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-fbpage a {
	background: url(images/topbar/top_fbpage.png);
	background-repeat: no-repeat;
	padding: 0;
	box-sizing: content-box;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-sharing a {
	background: url(images/topbar/top_sharing.png);
	background-repeat: no-repeat;
	padding: 0;
	box-sizing: content-box;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-help a {
		background: url(images/topbar/top_help.png);
		background-repeat: no-repeat;
}

/* 2016MayEdit Starts*/

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-lang, #hkecl-topbar ul.hkecl-menu-right li.hkecltb-login {
	border-left: 1px #fff solid;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-lang {
	border-right: 1px #fff solid;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-lang a {
		/*background: url(images/topbar/top_lang.png);
		background-repeat: no-repeat;*/
		height: auto;
		box-sizing: content-box;
}

body.eng #hkecl-topbar ul.hkecl-menu-right li.hkecltb-lang {
	font-size: 15px;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login a.hkecl_login_no {
		/*background: url(images/topbar/top_login.png);
		background-repeat: no-repeat;*/
		padding: 0;
		box-sizing: content-box;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login a.hkecl_login_yes {
		background-position-x: center;
		background-size: 20px 20px;
		border-radius: 10px;
		padding: 0;
		box-sizing: content-box;
}

.eng #hkecl-topbar ul.hkecl-menu-right li.hkecltb-lang a {
	padding: 0;
}

/* 2016MayEdit, Ends*/

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home a {
		background: url(images/topbar/top_home.png);
		background-repeat: no-repeat;
		padding: 0;
		box-sizing: content-box;
}

#hkecl-topbar ul.hkecl-menu-right .detail-div {
		display: block;
		position: absolute;
		background-color: rgba(255,255,255,1);
		right: 0;
		width: 100%;
		/*padding: 10px; remark due to js bug, place the padding at sub-child*/
		padding: 0;
		overflow: hidden;
		border-bottom: 1px solid #666;
		box-shadow: 0 8px 8px -5px #666;
		text-align: left;
		max-width: 600px;
}

#hkecl-topbar ul.hkecl-menu-right .detail-div.hkecl-keep-parent {
	position: relative;
	left: -10px;
	right: unset;
	width: unset;
}

#hkecl-topbar ul.hkecl-menu-right #keep-parent-container {
	position: absolute;
}

#hkecl-topbar ul.hkecl-menu-right .home-div,
#hkecl-topbar ul.hkecl-menu-right .help-div,
#hkecl-topbar ul.hkecl-menu-right .lang-div,
#hkecl-topbar ul.hkecl-menu-right .login-div,
#hkecl-topbar ul.hkecl-menu-right .home-div{
	padding: 0 5px;
}


@media all and (min-width: 600px) {
		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home {
				position: relative;
		}

		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div,
		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div {
				right: 0;
				width: 650px;
		}

		#hkecl-topbar ul.hkecl-menu-right #openid-box {
				width: 100%;
				float: left;
		}

		#hkecl-topbar ul.hkecl-menu-right #login-box {
				width: 100%;
				float: left;
		}
/*
		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-facebook-120 {
				background: url(images/props/logo_facebook_120.png) no-repeat;
				width: 120px;
				height: 40px;
				margin-right: 15px;
		}

		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-facebook-120:hover {
				background: url(images/props/logo_facebook_120_o.png) no-repeat;
				width: 120px;
				height: 40px;
		}

		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-google-120 {
				background: url(images/props/logo_google_120.png) no-repeat;
				width: 120px;
				height: 40px;
				margin-right: 15px;
		}

		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-google-120:hover {
				background: url(images/props/logo_google_120_o.png) no-repeat;
				width: 120px;
				height: 40px;
		}

		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-yahoo-120 {
				background: url(images/props/logo_yahoo_120.png) no-repeat;
				width: 120px;
				height: 40px;
				margin-right: 15px;
		}

		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-yahoo-120:hover {
				background: url(images/props/logo_yahoo_120_o.png) no-repeat;
				width: 120px;
				height: 40px;
		}

		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-winlive-120 {
				background: url(images/props/logo_winlive_120.png) no-repeat;
				width: 120px;
				height: 40px;
				margin-right: 15px;
		}

		#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div a.icon-winlive-120:hover {
				background: url(images/props/logo_winlive_120_o.png) no-repeat;
				width: 120px;
				height: 40px;
		}
*/
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div {
		text-align: left;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .detail-div li,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login .detail-div li {
		display: block;
		float: inherit;
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-home .search-div {
	padding: 8px 2px;
}

#hkecl-topbar ul.hkecl-menu-right .search-div,
								#hkecl-topbar ul.hkecl-menu-right .help-div,
								#hkecl-topbar ul.hkecl-menu-right .lang-div,
								#hkecl-topbar ul.hkecl-menu-right .login-div {
										/*position: absolute;
										width: 100%;
										right: 0;*/
}

#hkecl-topbar ul.hkecl-menu-right .search-div .text-input {
		float: left;
		width: 80%;
		height: 23px;
		margin: 0 5px;
		padding: 3px;
		box-sizing: content-box; /* fix from box-sizing assigned by bootstrap */
}




/*
#hkecl-topbar ul.hkecl-menu-right .topbar {
		width: 100%;
		font-size: 90%;
		text-align: left;
		background: rgba(243,243,243,0.9);
		padding: 10px;
		top: 45px;
		box-shadow: 0 8px 8px -5px #666;
		color: #6A8E9E;
		position: absolute;
		z-index: 999;
		display: none;
}

.topbar h4 {
		font-size: 120%;
		border-bottom: 2px dotted #06345A;
		padding-bottom: 5px;
}

.topbar ul {
		margin: 0;
		padding: 10px 10px 0 1px;
}

.topbar ul li {
		margin: 0;
		padding: 5px 5px;
		list-style: none outside none;
		border-left: #AAA solid 1px;
		display: inline-block;
}

.topbar button {
		float: right;
		margin-right: 5px;
}

.topbar .checkbox {
		float: left;
		margin-right: 2px;
}

.topbar input.text-input {
}

.topbar form {
		padding: 15px 0;
}

.topbar form label {
		width: auto;
}
*/









#hkecl-menu-left-pull-down {
		position: absolute;
		background-color: #FF0;
		display: block;
		width: 100%;
}

.custom-pull-down {
}

.custom-pull-down .nav-item.level-2 {
	/*
	display: inline-block;
	float: left;
	min-width: 100px;
	min-height: 100px;
	*/
		padding-bottom: 5px;
}

.custom-pull-down .arrow.left {
		left: 10%;
}

.custom-pull-down h3, .custom-pull-down a.hkecl-h3  {
		font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
		font-size: 125%;
		margin: 0px 5px 10px 0px;
		padding-bottom: 10px;
		height: auto;
		vertical-align: baseline;
		border-bottom: 1px dotted #06345a;
		display: block;
		padding-top: 5px;
		color:#454545;
}

.custom-pull-down .nav-item.level-2 h4, .custom-pull-down .nav-item.level-2 a.hkecl-h4, .custom-pull-down .nav-item.level-2 a.hkecl-h4:hover {
		font-size: 125%;
		font-weight: normal;
		cursor: default;
		color:#454545;
		border-bottom:none;
		border-right:none;
}
.custom-pull-down.ui-widget-content a {
		color: #1c64ad;
		line-height:1.5;
}

.custom-pull-down.ui-widget-content a:hover {
		color: #8A6005;
		border-bottom-color: #8A6005;
}

.custom-pull-down .nav-item.level-1 ul {
		padding-left: 0;
}

.custom-pull-down .nav-item.level-2 ul {
		padding-left: 10px;
}

.custom-pull-down .nav-item.level-1 a.hkecl-h3, .custom-pull-down .nav-item.level-2 a.hkecl-h4 {
	margin-top: 0.5em;
	margin-bottom: 0.1em;
}
		.custom-pull-down h3, .custom-pull-down a.hkecl-h3 {
				display: none;
		}











































/*********************************************
 * Menu at footer, Smallest Version
 *********************************************/

#hkecl-side-menu-container a {
		color:#FFFFFF;
}

#hkecl-side-menu-container a:hover {
color: #c93;
cursor: pointer;
padding-bottom: 2px;
border-bottom: #c93 1px solid;
}
#hkecl-side-menu-container ul.site-structure {
}

#hkecl-side-menu-container .nav-item {
		margin-top: 0.5em;
		margin-left: 2%;
		margin-right: 2%;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		-ms-box-sizing: border-box;     /* for IE8 */
		box-sizing: border-box;         /* Opera/IE 8+ */
}

#hkecl-side-menu-container .nav-item h3, #hkecl-side-menu-container .nav-item a.hkecl-h3 {
		margin-bottom: 0.5em;
		font-weight: 100;
		border-bottom: 1px dotted #AAA;
		font-size: 120%;
}

#hkecl-side-menu-container .nav-item h3 a, #hkecl-side-menu-container .nav-item a.hkecl-h3 a {
		border-right: none;
}


#hkecl-side-menu-container .nav-item.level-1 h3, #hkecl-side-menu-container .nav-item.level-1 a.hkecl-h3,
#hkecl-side-menu-container .nav-item.level-1 span.role-mainpage {
		font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
		font-size: 125%;
		margin: 0px 5px 10px 0px;
		padding-bottom: 10px;
		height: auto;
		vertical-align: baseline;
		border-right:none;
		border-bottom: 1px dotted #06345a;
		display: block;
}

#hkecl-side-menu-container .nav-item.level-1 span.role-mainpage a {
		border-right: none;
}

#hkecl-side-menu-container ul {
		padding-left: 0px;
		margin: 0;
		border: 0;
		padding-bottom: 1.0em;
}

#hkecl-side-menu-container .nav-item {
		display: inline-block;
		padding-right: 10px;
		border: 0;
		margin-bottom: 0px;
		padding-left: 10px;
		line-height: 1.3;
		float: left;
}

#hkecl-side-menu-container .nav-item a {
	border-right: 1px dotted #06345a;
}

/* level 1, Columns, Role-based */
#hkecl-side-menu-container .nav-item.level-1 {
		margin-top: 1.2em;
		display: block;
		width: 100%;
}

#hkecl-side-menu-container .nav-item.level-1 h3, #hkecl-side-menu-container .nav-item.level-1 a.hkecl-h3 {
	cursor: pointer;
	padding-left: 25px;
	background: url(images/topbar/grey_header.png) no-repeat;
	color:#DDDDDD;
}

#hkecl-side-menu-container .nav-item.level-1.role-partner {
		margin-bottom: 3em;
}


/* level 2, Categories */
#hkecl-side-menu-container .nav-item.level-2 {
		width: 100%;
		margin: 0;
		padding: 0;
		margin-bottom: 10px;
}

#hkecl-side-menu-container .nav-item.level-2 h4, #hkecl-side-menu-container .nav-item.level-2 a.hkecl-h4 {
		font-size: 100%;
		font-weight: normal;
		cursor: default;
		color:#000!important;
		border-bottom:none;
		border-right:none;
}
#hkecl-side-menu-container .nav-item.level-2 a.hkecl-h4 {
	text-decoration:none;
}
#hkecl-side-menu-container .nav-item.level-2 ul {
		margin-bottom: 0.5em;
}

/* level 3, Ground List Items */
#hkecl-side-menu-container .nav-item.level-3 {
		background: none;
		margin: 0;
		padding: 4px 0;
		float: left;
		margin-right: 10px;
}


/* Flagship */

#hkecl-side-menu-container .nav-item.level-1.flagship-service {
		margin-bottom: 0px;
}

#hkecl-side-menu-container .nav-item.level-1.flagship-service img {
	width: 100%;
	min-width: 120px;
	max-width: 150px;
	margin: 0;
	padding: 0;
	float: unset;
	height: unset;
}

#hkecl-side-menu-container .nav-item.level-1.flagship-service .nav-item.level-2 {
		display: inline-block;
		vertical-align: top;
		width: 100%;
		min-width: 75px;
		background: none;
}

/*
#hkecl-side-menu-container .nav-item.level-1.flagship-service .nav-item.level-2 a {
		border-right: none;
		padding-right: 5px;
		margin-left: 5px;
		margin-top: 10px;
}
*/

#hkecl-side-menu-container .nav-item.level-1.flagship-service a {
	border-right:none;
}

@media all and (min-width: 605px) {
		#hkecl-side-menu-container .nav-item.level-1.help,
		#hkecl-side-menu-container .nav-item.level-1.lang{
				display: none;
		}
}

/* help and lang */

#hkecl-side-menu-container .nav-item.level-1.help .nav-item.level-2,
#hkecl-side-menu-container .nav-item.level-1.lang .nav-item.level-2 {
		float: left;
		width: auto;
		display: inline-block;
		margin-right: 10px;
}

#menu-content-layer > *{
	font-size: 80%;
}
/* CSS Document */





/* new topbar style */
#hkecl-topbar{
	position: fixed;
}
#hkecl-main{
	/*padding-top: 40px;*/
}
#side-menu-trigger{
	top: 50px;
	right: 20px;
	background-image: none;
	background-color: #FFF;
	opacity: 0.9;
	text-align: center;
	padding: 4px;
	border-radius: 6px;
	display: none;
}
#side-menu-trigger i {
	color: #8B8B8B;
	font-size: 26px;
}
#hkecl-topbar .hkecl-visible-desktop div.hkecl-page-container{
	background-color: #008CD6!important;
	background-image: none!important;
	padding: 0 20px;
}
#hkecl-topbar ul.hkecl-menu-left li a.hkecl-h3{
	color: #FFF;
}
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-lang,
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-login{
	border: 0;
}
#hkecl-topbar ul.hkecl-menu-right li,
#hkecl-topbar ul.hkecl-menu-right li a{
	font-size: 15px;
	color: #FFF;
}
#hkecl-side-menu-container{
	background-color: #FFF;
}
#hkecl-side-menu-container ul.mobile-menu{
	padding: 20px 0 0 0;
	background-color: #008CD6;
}
#hkecl-side-menu-container li.nav-item.level-2 {
	width: 100%;
}
#hkecl-side-menu-container li.nav-item.level-2 ul{
	width: 100%;
	columns: 1!important;
}
#hkecl-side-menu-container li.nav-item.level-2 ul li{
	width: 100%;
}

#hkecl-side-menu-container li.nav-item{
	float: unset;
}
#hkecl-side-menu-container ul.mobile-menu li.nav-item:first-child{
	margin: 10px 0 25px 0;
}
#hkecl-side-menu-container ul.mobile-menu{
	font-size: 18px;
	text-align: center;
	line-height: 1.5;
	font-family: "Microsoft JhengHei", "微軟正黑體", "Microsoft JhengHei", Tahoma, Verdana, Arial, "sans-serif", "monospace";
}
#hkecl-side-menu-container ul.mobile-menu li:nth-child(3),
#hkecl-side-menu-container ul.mobile-menu li:nth-child(6){
	padding: 0;
	margin: 0;
}
#hkecl-side-menu-container ul.mobile-menu li:nth-child(4),
#hkecl-side-menu-container ul.mobile-menu li:nth-child(5),
#hkecl-side-menu-container ul.mobile-menu li:not(:first-child)>div:first-child{
	display: inline;
}

#hkecl-side-menu-container ul.mobile-menu li.lang > * {
	padding: 0 5px;
}

#hkecl-side-menu-container ul.mobile-menu li.nav-item.level-1.flagship-service .font-size a{
	background-image: unset;
	border: 0;
	display: inline;
	padding: 0 7px;
}
#hkecl-side-menu-container ul.mobile-menu li.nav-item.level-1.flagship-service .font-size a.active{
	color: #FAFF00;
}
#hkecl-topbar ul.hkecl-menu-right .lang span,
#hkecl-side-menu-container ul.mobile-menu li.nav-item.level-1.flagship-service .lang span{
	color: #FAFF00;
}
#hkecl-side-menu-container ul.mobile-menu li.nav-item.level-1.flagship-service .font-size a.fontscale-minus-1{
	font-size: 75%;
}
#hkecl-side-menu-container ul.mobile-menu li.nav-item.level-1.flagship-service .font-size a.fontscale-2{
	font-size: 125%;
}
#hkecl-side-menu-container ul.menu-content.channel-menu-content{
	background-color: #FFF!important;
}
#hkecl-side-menu-container .channel-menu-content li.nav-item.level-1 a.hkecl-h3,
#hkecl-side-menu-container .channel-menu-content li.nav-item.level-1 a.hkecl-h3:hover{
	color: #000!important;
	font-weight: 700;
	/* font-size: 18px; */
	border-bottom: 0;
}
#hkecl-side-menu-container .channel-menu-content li.nav-item.level-2 a{
	color: #000!important;
	border-right: 0;
	margin: 0;
	padding: 5px 25px;
}
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-search a{
	background-image: none;
}
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-search a i.fa.fa-search{
	color: #FFF;
	font-size: 16px;
}

#hkecl-topbar li.hkecltb-fontsize .font-size a{
	border: 0;
	background-image: unset;
	display: initial;
	margin: 0 3px;
}
#hkecl-topbar li.hkecltb-fontsize .font-size a.active{
	color: #FAFF00;
}
#hkecl-topbar li.hkecltb-fontsize .font-size a.fontscale-minus-1{
	font-size: 12px;
}
#hkecl-topbar li.hkecltb-fontsize .font-size a.fontscale-0{
	font-size: 16px;
}
#hkecl-topbar li.hkecltb-fontsize .font-size a.fontscale-2{
	font-size: 20px;
}
div#hkecl-footer {
	display: none;
}

@media (max-width: 1023px){
	header#hkecl-side-menu-container {
		width: 100%;
		max-width: 100vw;
	}
	#hkecl-side-menu-container .mobile-menu{
		padding-bottom: 0;
	}
	.mobile-menu .nav-item.level-1.flagship-service{
		display: block;
    margin: 0;
    padding: 0;
	}
	#hkecl-side-menu-container ul.mobile-menu li:not(:first-child)>div.user_profile_card{
		display: none;
	}
	#hkecl-side-menu-container ul.mobile-menu li:not(:first-child)>div.user_profile_card{
		background-color: #FFF;
    display: block;
    margin: 0;
		text-align: left;
		position: relative;
	}
	#hkecl-side-menu-container .user_profile_card .user-pic{
    display: inline-block;
    padding-right: 20px;
	}
	#hkecl-side-menu-container .nav-item.level-1.flagship-service .user_profile_card .user-pic img{
		width: 80px;
    max-width: 80px;
    min-width: unset;
		height: auto;
	}
	#hkecl-side-menu-container .user_profile_card .user-name{
		font-size: 26px;
    word-wrap: break-word;
    display: inline-block;
    vertical-align: top;
    padding-right: 20px;
    max-width: 60%;
		font-weight: 700;
	}
	#hkecl-side-menu-container .user_profile_card .user-name a{
		font-size: 26px;
    text-wrap: wrap;
		color: #000;
	}
	#hkecl-side-menu-container .user_profile_card .user-name a:hover{
		border-bottom: 0;
	}
	#hkecl-side-menu-container .user_profile_card .user-logout{
		display: inline-block;
    vertical-align: top;
    position: absolute;
    right: 20px;
    top: 26px;
	}
	#hkecl-side-menu-container .user_profile_card .user-logout a{
		font-size: 200%;
    background: unset;
    padding: 0;
    color: #000;
	}
	#hkecl-side-menu-container .user_profile_card .user-logout a i{
		vertical-align: top;
	}
	#hkecl-side-menu-container ul.mobile-menu li:nth-child(4),
	#hkecl-side-menu-container ul.mobile-menu li:nth-child(6){
		font-size: 18px;
		line-height: 3;
		font-weight: 700;
	}
	#hkecl-side-menu-container ul.mobile-menu li:nth-child(5){
		font-weight: 700;
	}
}
@media (min-width: 1024px){
	#hkecl-topbar{
		position: relative;
	}
	#hkecl-main{
		padding-top: 0;
	}
}
@media (max-width: 1023px){
	#hkecl-topbar ul.hkecl-menu-right li.hkecltb-search{
		position: absolute;
    top: 50px;
    right: 70px;
    background-color: #FFF;
    padding: 4px;
    opacity: 0.9;
    width: 35px;
    height: 35px;
		text-align: center;
		border-radius: 6px;
	}
	#hkecl-topbar ul.hkecl-menu-right li.hkecltb-search a i.fa.fa-search{
		color: #8B8B8B;
		font-size: 24px;
	}
	ul.mobile-menu #side-menu-trigger-close i{
		cursor: pointer;
    font-size: 30px;
    color: #FFF;
    position: absolute;
    top: 30px;
    right: 25px;
	}
}
@media (max-width: 768px){
	#hkecl-side-menu-container .nav-item.level-1.flagship-service .user_profile_card .user-pic img{
		width: 50px;
    max-width: 50px;
	}
	#hkecl-side-menu-container .user_profile_card .user-name a{
		font-size: 18px;
	}
}
/* for english version */
@media (max-width: 399px){
	body.eng #hkecl-main {
    padding-top: 71px;
	}
	body.eng #side-menu-trigger{
		top: 82px;
	}
	body.eng #hkecl-topbar ul.hkecl-menu-right li.hkecltb-search{
		top: 85px;
	}

}