@charset "utf-8";

body{margin:0; padding-top: 46px; /*font-size: 1em;*/ color: #000; font-family: 'Roboto', '微軟正黑體', 'Microsoft JhengHei', 'Arial', '新細明體';}
img {width:100px; height:auto;}
#content {padding-bottom:50px; /*float:left*/}

.nav-up {top: -50px;}

/*Logo*/
#toplogobar{width:100%; height:50px; background-color:#1ca15d; background-image:url(../images/hkej_logo.png); background-repeat:no-repeat; background-position:center; position: fixed; top: 0; transition: top 0.2s ease-in-out; z-index:100000;}
.btn_menu{width:40px; height:40px; float:left; margin:5px 0px 0px 10px;cursor:pointer;}
.btn_back{width:40px; height:40px; float:left; margin:5px 0px 0px 10px;cursor:pointer;}
.btn_login{width:40px; height:40px; display: block;position: absolute;top: 3px;right: 10px;cursor:pointer;}

/*Drop down menu*/
#topdropdown{width:100%; height:40px; float:left; background-color:#eeeeee; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#e6ebe9; position:relative; z-index:1;}
.btn_dropdown{width:40px; height:40px; margin:auto}
.cat_name{width:100px; height:20px; float:left; margin:5px 0px 0px 10px; font-size: 1.25em; color:#1ca15d; }

/*Listing content*/
#date_select_box{width:100%; float:left; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#e6ebe9; padding:10px;}
#date_box{font-size: 1.1em;}
#date_box a{font-size: 1.1em; color:#33B1D7; font-weight:bold; text-decoration:underline}
#date_box a:hover{color:#33B1D7;}
#date_dropdown{margin-top:15px;}
#date_dropdown input[type=button]{background-color:#1ca15d; color:#ffffff;}

.listingbox{width:100%; float:left; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#e6ebe9; padding:10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box; }
.titlebox{width:75%; float:left; font-size: 1.3em; color:#000; font-weight:bold; }
.titlebox a, .titlebox2 a {font-size: 1.25em; color:#000; font-weight:bold; text-decoration:none;}
.titlebox2{width:100%; float:left; font-size: 1.25em; color:#000; font-weight:bold; line-height:130%; }
.imgbox{float:right; margin:0px 0px 0px 5px; position:relative; z-index:0;}
.imgbox img.edcplaybtn { width: 40%;height: auto;left: 28%; top: 16%; }
.listinginfobox{width:100%; float:left;}
.listingnames{color:#045104; font-size: 1em; margin-right:15px;}
.listingnames a{color:#045104; font-size: 1em; text-decoration:none;}
.listingcolume{color:#719b2f; font-size: 1em;}
.listingcolume a{color:#719b2f; font-size: 1em; text-decoration:none;}

.listing_on_cat{color:#444444; font-size: 0.6em; margin-right:15px;}
.listing_on_cat a{color:#444444; font-size: 0.6em; text-decoration:none;}
.listing_on_time{color:#777777; font-size: 0.6em;}
.sign{color:#b1b4cb; font-size: 0.5em;}

.listingbox_inbanner{width:100%; float:left; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#e6ebe9; padding:10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box; background-color:#f3f3f3; }
.listingbox_LREC{width:100%; float:left; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#e6ebe9;padding:10px 0px 10px 0px; -moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box; background-color:#ffffff; }
.LRECbox{width:300px;margin:auto;}
.LREC{width:300px;}

.pagebox{width:100%; float:left; text-align:center; margin:10px 0px 10px 0px;}
.btn_paging {background-color: #1ca15d; border: none; color: #ffffff; padding: 8px 16px; text-align: center; text-decoration: none; display: inline-block;font-size: 1em; margin: 4px 2px; cursor: pointer; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2), 0 5px 10px 0 rgba(0,0,0,0.19);}



.footer{width:100%; float:left; color:#5b5b5b; font-size: 0.6em; padding:8px;}

/*Bottom menu*/
#bottommenu{width:100%; height:40px; position:fixed; bottom:0; left:0; background-color:#eeeeee; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#e6ebe9;box-shadow: 0px 0px 15px #a1a1a1;}
.btn_next{width:40px; height:40px; float:right; margin:0px 10px 0px 0px; cursor:pointer;}
.btn_previous{width:40px; height:40px; float:left; margin:0px 0px 0px 10px; cursor:pointer;}

/*mainmenu*/
/* The Overlay (background) */
.mainmenu {
    /* Height & width depends on how you want to reveal the overlay */    
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1000000; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(50,70,50); /* Black fallback color */
    background-color: rgba(50,70,50, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.mainmenu_content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%;
	padding-bottom:10%;
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.mainmenu a {
    padding: 8px;
    text-decoration: none;
    font-size: 30px;
    color: #ffffff;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}
.mainmenu a:hover, .mainmenu a:focus {color: #83fcbe;}
/* Position the close button */
.mainmenu .closebtn {position: absolute; top: 20px; right: 45px; font-size: 40px;}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .mainmenu a {font-size: 20px}
    .mainmenu .closebtn {font-size: 40px;top: 15px;right: 35px;}
}


/*Subsection menu*/
.hamburger{cursor:pointer;outline:none;z-index:1000;}
.cross{background:none;border:0;cursor:pointer;outline:none;z-index:100;}
.menu{z-index:2000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1; position:absolute; text-align:center; font-size:1.25em;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu li:hover{display: block; background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu ul li a {text-decoration:none; margin: 0px; color:#666;}
.menu ul li a:hover {color: #666; text-decoration:none;}
.menu a{text-decoration:none; color:#666;}
.menu a:hover{text-decoration:none; color:#666;}

.glyphicon-home{color:white; font-size:1.5em; margin-top:5px; margin:0 auto;}

@media only screen and (max-width: 768px) {}
@media only screen and (max-width: 480px) {
.titlebox{width:72%; float:left; font-size: 1.2em; color:#000; font-weight:bold;}	
.titlebox a, .titlebox2 a{font-size: 1.2em; color:#000; font-weight:bold; text-decoration:none;}
.titlebox2{width:100%; float:left; font-size: 1.2em; color:#000; font-weight:bold;}
img {width:80px; height:auto;}
.imgbox{float:right; margin:0px 0px 0px 2px;}
}

@media only screen and (max-width: 320px) {
.titlebox{width:70%; float:left; font-size: 1.15em; color:#000; font-weight:bold;}
.titlebox a, .titlebox2 a{font-size: 1.15em; color:#000; font-weight:bold; text-decoration:none;}
.titlebox2{width:100%; float:left; font-size: 1.15em; color:#000; font-weight:bold;}
img {width:80px; height:auto;}
.imgbox{float:right; margin:0px 0px 0px 2px;}
}


/*hkej feature style menu*/
div.logo{
	height: 45px;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #3b9366;
	background-color: rgba(59,147,102,0.95);
	font-size:1.125em;
				}
				
				
 div.logo a.icon-logo{
	height: 45px;
	background-image: url(../css/ui/hkej_logo_m.png);
	background-size: 98px;
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
				}

a.menu-btn{
				float:right;
				height:18px;
				width:22px;
				margin-top:12px;
				background-image: url(../css/ui/menu_btn.png);
				background-size:contain;
				background-repeat: no-repeat;
				cursor:pointer;

			}
			
			
            a.menu-btn:hover, a.menu-btn:focus {
				-webkit-opacity: 0.60;
				-moz-opacity: 0.60;
				-o-opacity: 0.60;
				-khtml-opacity: 0.60;
				opacity: 0.60;
				filter:alpha(opacity=60);
            }

label.feature-mobile-menu{
height: 45px;
width:47px;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
background-color: rgba(59,147,102,0.9);
position:absolute;
display:inline-block;
left:0;
top:0;
}



input.listing-box{
	display: none;
}



ul.feature-mobile-menu-listing{
	background-color:rgba(15,61,88,0.98);
	position: fixed;
	z-index:5;
	top: 45px;
	left:0;
	width:100%;
	height:100%;
	margin:0;
    overflow-x: hidden;
    overflow-y: auto;
	padding:0;
	list-style:none;
	box-sizing:border-box;
	display: none;
	}
	
label.feature-mobile-menu { background-image: url(ui/menu_btn.png); }
input.listing-box[type=checkbox]:checked + label.feature-mobile-menu { background-image: url(ui/menu_btn_cross.png); }
	
ul.feature-mobile-menu-listing li{	
	box-sizing:border-box;
	border-bottom:solid #41657b 1px; 
	width:100%;
	text-align:left;

	}
		
ul.feature-mobile-menu-listing li a{
	display:block;
	color:#FFFFFF;
	padding-left:36px;
	padding-top:17px;
	padding-bottom:17px;
	box-sizing:border-box;
 text-decoration:none;}


ul.feature-mobile-menu-listing li.feature-mobile-menu-bottom { box-sizing:border-box; width:100%; padding-left:36px; padding-right:36px; padding-top:54px; padding-bottom:54px;} 
ul.feature-mobile-menu-listing li.feature-mobile-menu-bottom a { color:#41657b; text-align:center; 	box-sizing:border-box;	border-bottom:solid #0f3d58 1px; display:block; background-color:#f3f3f1; padding-left:0; text-decoration:none;}
a.m-menu-login.signed { background-image:url(ui/login-icon.png); background-repeat:no-repeat; 
background-position:center center; color:#3b9366 !important;}
a.m-menu-login.sign { background-image:url(ui/login-b4-icon.png); background-repeat:no-repeat; 
background-position:center center;}

#backButton a {background-image: url(ui/back-fea.png);  height: 45px;    width: 47px;    background-size: contain;   background-repeat: no-repeat;    cursor: pointer;    background-color: rgba(59,147,102,0.9);    position: absolute;    display: inline-block;    left:47px;   top: 0; z-index:5;}
button#ejm_pswp__button--close{line-height:18px !important; font-size:40px !important;  width:18p !important; height:18px !important; padding: 20px !important;   box-sizing: content-box !important; }

ul.feature-mobile-menu-listing li.sub-cat {padding-left:5%; padding-right:5%; padding-top:16px; padding-bottom:16px; display:none; font-size:0;}
ul.feature-mobile-menu-listing li.sub-cat  a { padding-left:0;  width:50%; display: inline-block;  box-sizing:border-box; background-color:#f3f3f1; text-align:center; padding-top:8px; padding-bottom:8px; border: #dddddd 1px solid; font-weight:bold;color: #666666; font-size:18px;}
ul.feature-mobile-menu-listing li.sub-cat  a.on { background-color:#45986e; color:#ffffff; border-color:#096344;}

span.sub-cat-arr { width:11px; display:inline-block; margin-left:8px; height:100%; background-position:right; background-repeat:no-repeat; background-size:contain; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAoCAYAAAD6xArmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdCNTE4MDI5REE1RjExRTdBOTJDRTc0MTA0MDAyRjdEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdCNTE4MDJBREE1RjExRTdBOTJDRTc0MTA0MDAyRjdEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0I1MTgwMjdEQTVGMTFFN0E5MkNFNzQxMDQwMDJGN0QiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0I1MTgwMjhEQTVGMTFFN0E5MkNFNzQxMDQwMDJGN0QiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7+3QFZAAADy0lEQVR42pxXS0hUYRT+52U6MoozSo7ji/ENObURCVrYA2kRbYpaaNhCklq4qBYiSIQhthBCohCCjAxaBG1aBTGCiUobG0bU1BxlfOVj1CHH13j7zvAL88+dmeb3wJ17uOfOd89/7nfO919Nf3//R0VRbrPopuC4XlNT84VJmsbpdGbg/NPhcOSZzWYhuLW1xUZHR1fw4LMAX5EB1uIPPpwbJiYmjg4ODoRgeno6y8/PPw33DVamkQKmH4A79/f3uyYnJ1U3FBYWMpPJdA3uPWlgspSUlLb19XXX0tKSWCuNhlVUVDCdTteFrEulgaurq/dQy7rp6endQCAg3GQ0GllRUVEq3D6AG6SAeUncwWCwZXx8nOEhwo05OTnMYrFUwX0iDcyte3t7++vc3JwqUFZWxpKSklqQ9QVpYGRNqd4F8AYeIMQASuA6uO8AbpLNmMDpDTaBggylEWIoB5XFTiuLmzLVMtaB5nkLCiqRdnh4qIyMjCiI34z1X+1/StW8uLj4e21tTbgI6oUoCCr2oCS2hEsRVhI/TvXIOogGEmJoGmoeM6+3RgqYgw+h1TuidSXanaWlpV2mlUkDc2tHV/5AWWJ1ZSeyPiMNjKxpOtXPzMz8hQkxjAJWUlKSDPcDwE/JZkzgv0C9B2NjYwysEGLZ2dksKyvLAbcjIbrFoOBLt9utoiBerjI4OHiE+KVE6BbNHq6urg7Nz88LFw0GAysvLyd29KIkGdLAKAnx7tbs7Owfn88nxEiBcnNz8+C+PknGBO7Fcp8TBSOnoPTLCzcs9Qoo1o6lhyh3bLQCr9e7APe+/gSgtXq9/nNlZaWRNPHYSC8xtCj9hpCOSjLi6sDAQGBzc1PFCmIK4l2JDqHwTEux/E/INDk8U7Ll5WUGprjgtkrVmOtcn91uT40EJX2cmprahVuHEuzJvrw2UKnKZrOpZjkXg1bSSylWINvzIH8rMSDSqEmwW/oG94UU3biu9ZHOkd6Fm9/vZx6PZ4OzQJHlcTfpW2ZmpnCRdJBvEZoAuiCleaDOjeHh4ZC+RRrpIOlhPGpqY5TASnrGh7gQw8BnGPieaKoRtxRcv3oLCgoskB0hRrpH+gf3DtdDqX1FMwBrAawK0NABeCdAv0vthEi3SL+4tAs3kt6R7sF9KrV3Ayjx6X1xcXEy6Vi47ezsMNI70j2uf1Kbwmeg1Tmr1apiDVELFHtMuie1P0a2F9EAj2g3GWloAmoG+rjpkdrRkz7RbgYtqyXdivy4QdvSR01jtO6KZzToX+HIc7lcsT7HGmW/mMj+CTAAGRGkusp1U5oAAAAASUVORK5CYII=");  }