@charset "utf-8";

/* z-index sits between 100 - 1000 */

body,h1, h2, h3, h4, h5, h6 {
}
a {
color: #1c64ad;
text-decoration: none;
}

/* added at 2023-06-15 for 5/F request */
.field-author a, .field-publisher a {
	color: #393c3f;
}

/*a:hover {*/
/*color: #c93;*/
/*cursor: pointer;*/
/*padding-bottom: 2px;*/
/*border-bottom: #c93 1px solid;*/
/*}*/

/*a.no-hover-style:hover {*/
/*  color: inherit;*/
/*  cursor: inherit;*/
/*  padding-bottom: inherit;*/
/*  border-bottom: none;*/
/*}*/

body #hkecl-container {
	background: #b1f582 url('images/ReadingCity/RC_bkg_800.jpg') 100% 0 repeat;
}

.hkecl-page-container {
	background-color: #FFF;
}
.linebreak { border-bottom: dotted 3px #717171; margin:10px 0; display:block; }

/**************************
 * Top Bar
 **************************/

#hkecl-topbar .hkecl-page-container {
	background-color: #fff;

}

.hkecl-page-container {
}


/**************************
 * Upper, treat in sepearate CSS
 **************************/


/**************************
 * Columns Container
 **************************/
.layout-2nd.search #hkecl-columns-container {
margin-top: 0px;
z-index: 0;
}
.layout-2nd.search #hkecl-columns-container article{
	padding: .5em 0;
}
.layout-2nd.search #hkecl-columns-container article .article-image-container a:hover {
	border-bottom:none;
}
#hkecl-columns-container a.visited{
	color:#58741A;
}
		/**************************
		 * Content & side bar
		 **************************/

		#hkecl-content {
				/*padding: 20px;*/
		}

		#hkecl-side {
				/*padding: 15px;
				padding-top: 10px;*/
		}

		/* mobile */
		#hkecl-content {
				/*width: 100%;*/
		}

		#hkecl-side {
				/*width: 100%;*/
		}

		.layout-index #hkecl-content {
						/*background-image: url('images/banner_bkg04.jpg');*/
						background-repeat: no-repeat;
				}

		.layout-index #hkecl-content h2{
				border-bottom: none;
				color: #FF6341;
				margin: 2px 0 0 5px;
		}

		.layout-index.layout-readingcity #hkecl-content h2{
			font-size: 180%;
		}

		.layout-index #hkecl-content h2 span.paging{
			color: #4B4B4B;
			font-size: 75%;
		}

		.layout-index #hkecl-columns-container {
						padding: 0;
				}

		.layout-2nd.search #hkecl-side {
					display:none;
				}
		.layout-2nd.search #hkecl-content {
						width: 100%;
				}

		.layout-2nd.no-side #hkecl-side {
				display: none;
		}

		.layout-2nd.no-side #hkecl-content {
				width: 100%;
		}

		.layout-3rd #hkecl-side {
					display:block;

				}
		.layout-3rd #hkecl-content {
						width: 100%;
				}

		@media all and (min-width: 650px) {
				#hkecl-side {
						padding-top: 0px;

				}

				#hkecl-content {
						width: 100%;
				}

				#hkecl-side {
						width: 100%;
						display:none;
				}
				.layout-2nd #hkecl-side {
					width: 100%;
					display:block;
				}
		}


		@media all and (min-width: 768px) {
			.layout-3rd #hkecl-side {}
			.layout-3rd #hkecl-content {}
		}

		@media all and (min-width: 850px) {
				#hkecl-content {

				}
				.layout-2nd #hkecl-content {
						width: 68%;
				}
				.layout-2nd #hkecl-side {
					width: 30%;
						display:block;
				}
		}

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

				}

				#hkecl-side {

				}
		}

.ui-widget-overlay {
	background: #000000 !important;
}


/**************************
 * Pseudo Side
 **************************/

.channel-infostructure {
	position: relative;
}

		.channel-infostructure #content-body{

		}

		.channel-infostructure .channel-pseudo-side{

		}

		.layout-3rd #hkecl-content .channel-infostructure .channel-pseudo-side h2 {
			border-bottom: 1px solid #717171;
		}

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

	.channel-infostructure {
	}

		.channel-infostructure #content-body{

		}

		.channel-infostructure .channel-pseudo-side{
			position: absolute;

		}

	.channel-infostructure #content-body{
		width: 68%;
		float: left;
		padding: 5px;
	}
	.channel-infostructure .channel-pseudo-side{
		margin-left: 71%;
		padding-top: 1px;
	}

	.channel-infostructure .channel-pseudo-side > div {
		display: block;
		margin-bottom: 25px;
	}

	.related-articles {
		/* width: 70%; */
		display: block;
	}

	.comment-container {
		/* width: 70%; */
		display: block;
		margin-top: 30px;
	}
}

#channel_nav_sec .role-item_1 .nav-item.level-2 a[href*="ereadscheme"] {
  color: #A0F9F5 !important;
}

#hkecl-upper #channel-nav-sec.menu_item_1 .menu-content .nav-item.level-1 .nav-item.level-2 .nav-item.level-3 a {
	/* color: #F4E8AE; */
}



/**************************
 * Footer
 **************************/

#hkecl-footer .hkecl-page-container {

}

#hkecl-footer-content {
		color: #777;
		letter-spacing: 1px;

}




/**************************
 * FAVORITES CONTAINER OF INDEX PAGE
 **************************/

.channel-favorites-pack {
	text-align: center;
}

#hkecl-content h1, #hkecl-content h2, #hkecl-content .hkecl-h2 {
	font-size:200%;
	border-bottom: dotted 3px #717171;
}
.layout-3rd #hkecl-content h2 {
	font-size:150%;
	border-bottom: solid 1px #717171;
	margin-top:30px;
}

.layout-3rd.layout-readingcity #hkecl-content h2{
	padding-left:0
}

ul, li {
	padding: 0;
}

h3 {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

#hkecl-side h2, .layout-3rd #hkecl-side h2, #hkecl-side .hkecl-h3 {
	border-bottom: 1px solid #717171;
}

#channel-pack {
	top: 60px;
}

.layout-2nd #channel-pack {
	/*top: 20px;*/
}

.layout-2nd.series #channel-pack {

}
@media all and (min-width: 650px) {
	#channel-pack {
		top: 10px;
	}
	.layout-2nd.series #channel-pack {

	}
	.layout-3rd #channel-pack {
		top: 0px;
	}

	.layout-3rd.static-content #channel-pack {
		top: 40px;
	}

	.search #channel-pack {
		top: 180px;
	}
}

@media all and (min-width: 750px) {
	.search #channel-pack {
		top: 220px;
	}
}

@media all and (min-width: 850px) {
	.layout-2nd.series #channel-pack {
	top: 20px;
}
}







/* fixed on topbar, already updated in topbar.css */
#hkecl-topbar .fontscale-pack-top .fontscale-pack{
	margin-top: 5px;
	margin-bottom: -5px;
}

#hkecl-side-menu-container .channel-menu-content {
	background-color:#cd452f;
}

#hkecl-side-menu-container .channel-menu-content .nav-item.level-1 h2, #hkecl-side-menu-container .channel-menu-content .nav-item.level-1 a.hkecl-h3 {
		color: #fcf77a;
}

body.layout-index.hkecl-style-switcher-on #channel-nav {
	border-bottom: 5px solid #333333;
}

@media all and (min-width: 768px) {
	body.layout-index.hkecl-style-switcher-on #channel-nav {
		border-bottom: none;
	}
}

body.hkecl-style-switcher-on #hkecl-side-menu-container .channel-menu-content .nav-item.level-1 h3,
#hkecl-side-menu-container .channel-menu-content .nav-item.level-1 a.hkecl-h3 {
		color: #fff;
}

body.hkecl-style-switcher-on #hkecl-upper{
	/*background-image: none;*/
}

body.layout-index.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li a {
	color: #fff;
}

body.layout-2nd.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li,
body.layout-3rd.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li {
	/*background: #646262;*/
	background: #646262;
}

@media all and (min-width: 768px) {
	body.layout-2nd.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li,
	body.layout-3rd.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li {
		background: transparent;
	}
}

body.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li.active, body.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li.selected {
	background: #333333;
}

.layout-index.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li.active, .layout-index.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li.selected {
	background-color: #474747;
}

#hkecl-side-menu-container .channel-menu-content .nav-item.level-1 span.role-mainpage{
		display: none;
}

#hkecl-side-menu-container .channel-menu-content .nav-item.level-2 {
		float: left;
		width: 95%;
		display: inline-block;
		margin-right: 10px;
}
#hkecl-side-menu-container .nav-item.level-2 a.hkecl-h4 {
	text-decoration: none;
	/*color: #fcf77a;*/
}

#hkecl-side-menu-container .nav-item.level-2 ul {
	margin: 0 0 0.3em 0;
	padding:0px;


}



/**************************
 * INDEX
 **************************/

body.layout-index {
}


.hkecl-content ul.inline-list {

}

.hkecl-content ul.inline-list li{
	display: inline;
	float: left;
	margin-right: 20px;
}

.hkecl-content img {
}

.subject-show-more {
  margin-top: 30px;
  color:#ffffff;
}

.subject-show-more a{
  background-color: #575757;
  width: 100%;
  display: block;
  text-align: center;
  border-radius: 5px;
  color:#ffffff;
}
.subject-show-more a:hover{
color: #575757;
padding-bottom: 0px;
border-bottom:none;
background-color: #c7c7c7;
}

/**************************
 * 2ND
 **************************/


body.layout-2nd #hkecl-side {
	padding: 50px 15px 15px 15px;
}


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

body.layout-2nd #hkecl-side {
	padding: 75px 0px 15px 15px;
}
}

/**************************
 * side columns
 **************************/

#latest-news {
		width: 100%;
		margin-bottom: 50px;
}


#hkecl-content .article-list.thumbnail-list article {
		/*margin-right: 10px;
		margin-left: 10px;*/
}


.channel-show-more {
		margin-top: 30px;
}

.channel-show-more a{
		background-color: #c7c7c7;
		width: 100%;
		display: block;
		text-align: center;
		border-radius: 5px;
		padding-bottom: 2px;
		color:#FFFFFF;
}

.channel-show-more a:hover{
		padding-bottom: 1px;
		color:#C93;
}


/**************************
 * 3RD
 **************************/

.layout-3rd .favorites-pack {}

.layout-book .layout-3rd .favorites-pack {
	text-align: right;
}

/* added by sysdev */
.layout-book .favorites-pack.invisible {
	min-height: 0;
}

#content-info {

}

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

	.layout-3rd #content-info {
		/*float: left;*/
		float: none; /* 2020-11-30 */
	}

	.layout-book.layout-3rd #content-info {
		float: none;
	}

	.layout-3rd .favorites-pack {
		text-align: right;
	}

	.layout-book.layout-3rd .favorites-pack {
		text-align: right;
	}
}

@media all and (min-width: 980px) {
	.layout-3rd.layout-readingcity #content-info {
		width: 40%;
		/* background: #f00; */ /* 2016-10-06 */
		width: 65%; /* 2016-10-06 */
	}
}

@media all and (min-width: 1020px) {
	.layout-3rd.layout-readingcity #content-info {
		width: 42%;
		/* background: #f00; */ /* 2016-10-06 */
		width: 65%; /* 2016-10-06 */
	}
}

.channel_activities_calendar {
	margin: 0px 5px 50px 0px;
}

#hkecl-side .channel_activities_calendar h3{
	border-bottom: none;
	padding-bottom: 10px;
}

.channel_activities_calendar .calendar-component{
	border: 1px solid #c7c7c7;
	border-radius: 10px;
	padding: 10px;
}
.channel_activities_calendar .calendar-list li {
padding: 5px 0px;
}
.channel_activities_calendar .calendar-list li div.calendar-list-content {
	width: 80%;
	padding-bottom: 5px;
	min-height: 45px;
}

@media all and (min-width: 400px) {
		.channel_activities_calendar .calendar-list li div.calendar-list-content {
				width: 85%;
		}
}
@media all and (min-width: 580px) {
		.channel-partners .article-list article .article-content-wrapper h4 {
				font-size: 90%;
				font-weight: normal;
		}
		.channel_activities_calendar .calendar-list li div.calendar-list-content {
	width: 90%;
}
}
@media all and (min-width: 850px) {
		.channel_activities_calendar .calendar-list li div.calendar-list-content {
				width: 75%;
		}
}

/* added by sysdev */
@media all and (min-width: 980px) {
	.layout-book .favorites-pack.invisible {
		min-height: 60px;
	}
}

/**************************
 * tag cloud
 **************************/

.tag-cloud {
	margin: 0px 5px 50px 0px;
}

.tag-cloud .tag-cloud-component{
	border: 1px solid #c7c7c7;
	padding: 10px;
	min-height: 300px;
	margin: 25px 2px 5px 2px;
}

.tag-cloud .tag-cloud-component a{
	margin-right: 15px;
}

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

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

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

}
/**************************
* comment box
**************************/
.channel-comment img {
		 width: auto;
}

.resources-download {
		display: block;
		margin-bottom: 25px;
}

.resources-download ul {
		padding-top: 3px;
		padding-left: 10px;
}

.reference-materials {
		display: block;
		margin-bottom: 25px;
}



/** BREADCRUMBS */

.hkecl-content h1 {
		margin-top: 10px;
}

.hkecl-content .main-category {
		display: block;
}

@media all and (min-width: 650px) {
		.hkecl-content .main-category {
				max-width: 60%;
		}
}

.hkecl-content .sub-category {
		font-size: 70%;
}

.hkecl-content .breadcrumb-neo {
		display: none;
		font-family:"Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
}

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

		.hkecl-content .main-category {
				display: none;
		}
		.hkecl-content .sub-category {
				font-size: 100%;
				margin-left: 0px;
		}

		.hkecl-content .breadcrumb-neo {
				display: block;
				margin-top: -25px;
				margin-left: -25px;
		}

		.hkecl-content .breadcrumb-neo {
				/*background-image: url(images/title_bkg.jpg);*/
				background-repeat: no-repeat;
				max-width: 700px;
				background-size: 100%;
				margin-bottom: 30px;
		}

		.hkecl-content .breadcrumb-neo.category-type-dir_growth {
				/*background-image: url(images/title_bkg.jpg);*/
		}

		.hkecl-content .breadcrumb-neo.category-type-dir_learn {
				/*background-image: url(images/title_bkg.jpg);*/
		}

		.hkecl-content .breadcrumb-neo.category-type-dir_school {
				/*background-image: url(images/title_bkg.jpg);*/
		}

		.hkecl-content .breadcrumb-neo.category-type-dir_sharing {
				/*background-image: url(images/title_bkg.jpg);*/
		}

		.hkecl-content .breadcrumb-neo h2, .hkecl-content .breadcrumb-neo div {
				font-size: 175%;
				font-weight: bold;
				color: #FFF;
				height: 70px;
				padding: 10px;
				margin: 0;
				-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-content .breadcrumb-neo ul {
			background-color: #f8931c;
		}

		.hkecl-content .breadcrumb-neo ul li{
			float: left;
			display: inline-block;
			padding: 5px;
			padding-left: 20px;
			/*list-style-position: outside;
			list-style-image: none;
			list-style-type: disc;*/
		}

		.hkecl-content .breadcrumb-neo ul li a:before{
			content: "  ";
		}

		.hkecl-content .breadcrumb-neo ul li.active a{
			color: #fcf77a;
		}

		.hkecl-content .breadcrumb-neo ul li a{
			color: #fff;
		}

		.hkecl-content .breadcrumb-neo ul li a:hover{
				color: #fcf77a;
				border-bottom: none;
		}

}


/**************************
* new css ken
**************************/
#content-body ol {
		/*list-style: decimal;*/
		margin-left: 25px;
		margin-top: 10px;
		margin-bottom: 10px;
}

#content-body ul {
		/*list-style: outside;*/
		margin-left: 25px;
		margin-top: 10px;
		margin-bottom: 10px;
}

#content-body li{
		list-style-type: disc;
		/*float: left;*/
		/*padding-bottom: 20px;*/
}

/* fixed on 2016-01-21 */

#content-body ol li{
		list-style-type: decimal;
}

#content-body div.autoanchors li {
	list-style-type: none;
}

#content-body li li{
		padding-bottom: 0px;
}


/* delete on 24 June 2013 due to bug created on other spans */
/*
span {
	padding-left:30px;
	vertical-align: text-top;

}
*/

.hkecl-columns-container h1,
.hkecl-columns-container h2,
.hkecl-columns-container h3,
.hkecl-columns-container h4,
.hkecl-columns-container h5,
.hkecl-columns-container h6
{
	color: #454545;
}

article .article-content-wrapper .visited-article a{
	color:#58741A;
}
article .article-content-wrapper .visited-article a:hover {
	color: #C93;
}

.hkecl-date-selector img.icon_previous {
	float: left;
}

.hkecl-date-selector img.icon_next {
	float: right;
}

#hkecl-side-menu-container .menu-content.channel-menu-content .nav-item.level-1 a:hover {
border-bottom: #fcf77a 1px solid;
cursor: pointer;
color:#fcf77a;
}

#hkecl-side-menu-container .channel-menu-content .nav-item.level-1 a.hkecl-h3:hover {
	color: #fff;
	border-bottom: #fff 1px solid;
}

#paginate_top{
	clear:both;
	width:100%;
	margin-top: 10px;
}

.hkecl-content-page{
	display:none;
	clear:both;
}


/**************************
* event calendar
**************************/

.event-calendar-component, .news-calendar-component {
	border: 1px solid #c7c7c7;
	border-radius: 10px;
	padding: 20px;
	width: 98%;
	min-height: 380px;
}
.calendar-list li div.calendar-list-content {
width: 75%;
min-height: 45px;
}
.event-calendar, .news-calendar {
		width: 100%;
		margin-bottom:20px;
}

.event-calendar h1, .news-calendar h1{
	border-bottom:none;
		margin-top: 0;
		margin-bottom: 5px;
}
#hkecl-content .event-calendar h2, #hkecl-content .news-calendar h2{
		border-bottom: none;
		margin-top: 0;
		margin-bottom: 5px;
}

.calendar-list li {
	margin-top:5px;
	min-height: 45px;
	float: left;
	width: 100%;
}
.calendar-prev{
  display: inline-block;
  width: 40px;
  float: left;
}

.calendar-next{
  display: inline-block;
  width: 40px;
  float: right;
}

a.calendar-prev:hover,
a.calendar-next:hover {
  border-bottom: none;
}

.date_selector {width:98%; text-align:center;display: inline-block;border-bottom: 2px dotted #c8c8c8;}
.date_selector img.icon_previous {background-image: url(images/arrow_left.png); background-repeat:no-repeat; width:40px; height:40px;vertical-align:middle; float:left;}
.date_selector img.icon_next {background-image:url(images/arrow_right.png); background-repeat:no-repeat; width:40px; height:40px;vertical-align:middle; float:right;}
.date_selector img.icon_previous.dim {background-image: url(images/arrow_left_dim.png); background-repeat:no-repeat; width:40px; height:40px;vertical-align:middle; float:left;}
.date_selector img.icon_next.dim{background-image:url(images/arrow_right_dim.png); background-repeat:no-repeat; width:40px; height:40px;vertical-align:middle; float:right;}
.date_selector img:hover {
-moz-opacity:0.5;
opacity:0.5;

}
.date_selector a:hover {
	padding-bottom:0px;
}
#divPProducts {
display:inline-block;
width: 98%;
}
#divPProducts div.resources-packages article {
border: none;
background-color: #ffffff;
margin-bottom: 20px;
}

@media all and (min-width: 480px) {
.calendar-list li div.calendar-list-content {
width: 80%;
}
.event-calendar {
	width: 100%;
	float: left;
}
.event-calendar-component, .news-calendar-component {
	width: 95%;
}
}
@media all and (min-width: 700px) {
.event-calendar {
	width: 50%;
}
.calendar-list li div.calendar-list-content {
width: 78%;
}
.event-calendar-component, .news-calendar-component {
	min-height:600px;
}
}
@media all and (min-width: 900px) {
.calendar-list li div.calendar-list-content {
width: 85%;
}
}

/* ------------------------------------
combined dev_root.css

-------------------------------------- */
#app{
		margin-bottom:30px;
		min-height:800px;
	}
#app_more{
	display:none;
}
#divPProducts .article-list{
	padding-bottom:10px;
}
#tagcloud {
border: 1px solid #BFBFBF;
padding: 0.5em;
}
.tag {
float: left;
margin: 0.2em 0.5em;
font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
}
#repo{
	display:none;
}
.layout-index #app_box div.article-title {
font-size:112.5%;
}

.items-break {
padding: 0 10px;
}




















/**************************
 * DEMO Style
 * to show Layout Wireframe
 **************************/

		.bootstrap-style.demo {
			margin-bottom: 50px;
			background-color: #FFF9D1;
			padding: 20px;
			border-radius: 15px;
			border: #F9DD71 1px solid;
			margin-right: -10px;
		}

		.bootstrap-style.demo h2 {
		}

		.bootstrap-style.demo ul {
		}

		.bootstrap-style.demo ul li {
			list-style-type: disc;
			list-style-position: inside;
		}

		.bootstrap-style.demo i {
			color: #DB7D43;
		}

		.layout-3rd #hkecl-content .bootstrap-style.demo .demo-title {
			border-bottom: dotted 3px #717171;
			padding-bottom: 10px;
		}

		/* STYLES FOR SHOWING HKECL FRAMEWORK */

		.layout-demo #hkecl-upper {
			background-color: #0f0 !important;
			background-image: url(images/layout-demo/hkecl-upper.png) !important;
			background-repeat: no-repeat;
			background-position: 5px 5px;
			border: 3px dashed;
		}

		.layout-demo #hkecl-content {
			background-color: #F00 !important;
			background-image: url(images/layout-demo/hkecl-content.png) !important;
			background-repeat: no-repeat;
			background-position: 5px 5px;
			border: 3px dashed;
		}

		.layout-demo #hkecl-side {
			background-color: #00F !important;
			background-image: url(images/layout-demo/hkecl-side.png) !important;
			background-repeat: no-repeat;
			background-position: 5px 5px;
			border: 3px dashed;
			margin-left: 10px;
		}

		.layout-demo.layout-demo-2 .hkecl-columns-container {
			padding-top: 40px !important;
			background-color: #0FF !important;
			background-image: url(images/layout-demo/hkecl-columns-container.png) !important;
			background-repeat: no-repeat;
			background-position: 5px 5px;
			border: 3px dashed;
		}

		.layout-demo #hkecl-container {
			background-color: #F7E7E7 !important;
			background-image: none !important;
		}

		.layout-demo #container2 {
			background-color: #A2A26A !important;
			background-image: url(images/layout-demo/promotional-area.png) !important;
			background-repeat: no-repeat;
			background-position: 5px 5px;
		}

		.layout-demo.layout-demo-2 #hkecl-upper > *,
		.layout-demo.layout-demo-2 #hkecl-content > *,
		.layout-demo.layout-demo-2 #hkecl-side > *,
		.layout-demo.layout-demo-2 #container2 > *
		{
			visibility: hidden !important;
		}

		/* Show article list */

		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .region.region-content {
			visibility: visible !important;
		}

		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .region.region-content > * {
			visibility: hidden !important;
		}


		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .region.region-content .resources-packages > * {
			visibility: visible !important;
		}

		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-side .region.region-sidebar-first {
			visibility: visible !important;
		}

		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .resources-packages,
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-side .article-list {
			padding-top: 40px !important;
			background-color: #0CF !important;
			background-image: url(images/layout-demo/resources-packages.png) !important;
			background-repeat: no-repeat;
			background-position: 5px 5px;
			border: 3px dashed;
		}

		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .resources-packages .article-image-container,
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-side .article-list .article-image-container{
			background-color: #0F1;
		}

		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .resources-packages .article-image-container > *,
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-side .article-list .article-image-container > *{
				visibility: hidden !important;
		}

		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .resources-packages .article-content-wrapper,
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-side .article-list .article-content-wrapper{
			background-color: #A8A7B9;
		}

		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .resources-packages .article-content-wrapper > *,
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-side .article-list .article-content-wrapper > *{
					visibility: hidden !important;
		}


		/* Index page layout*/

		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .resources-packages,
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-side .article-list {
			visibility: visible !important;
		}

		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .resources-packages .added-to-ebs .article-image-container {
			background-image: none;
		}






/**************************
 * CUSTOM Styles Starts
 **************************/

/* INDEX Page */


/* left slide menu */
#hkecl-side-menu-container .nav-item.level-1:nth-child(2) .nav-item.level-2:nth-child(1) a.hkecl-h4 {
	color: #69DEF6;
}


/* BANNER EDIT */

@media screen and (min-width: 700px) {

	.swiper-pagination {
		bottom: 0 !important;
		top: auto !important;
	}

	.swiper-container.swiper-banner {
		height: auto /*220px*/ !important;
	}
	.swiper-banner-image img {width:680px; height:220px;}
}
@media screen and (min-width: 950px) {
}

@media screen and (min-width: 700px) {
	.layout-index .swiper-banner-image img {
		height: 220px;
	}
}


/* BANNER EDIT, ADDON */

#hkecl-upper #promotion-area {
  max-width: 1500px !important;
  width: 100% !important;
}

.reading-city-enable-left-menu #hkecl-upper #promotion-area {
	margin-left: 0 !important;
	padding-top: 8px;
	margin-bottom: 20px;
}

.swiper-container.swiper-banner .reading-banner-set1 {
}

.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image {
	position: relative;
	float: left;
}

.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image a {
}

.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image img.banner-large {
	width: 100%;
	height: auto;
}
.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image img.banner-middle {
	width: 100%;
	height: auto;
}
.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image img.banner-small {
	width: 100%;
	height: auto;
}

	.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image:nth-child(1) {
		width: 66%;
	}

	.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image:nth-child(1) img.banner-large {
	}
	.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image:nth-child(1) img.banner-middle {
		display: none;
	}
	.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image:nth-child(1) img.banner-small {
		display: none;
	}

	.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image:nth-child(2) {
		width: 33%;
	}

	.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image:nth-child(2) img.banner-large {
		display: none;
	}
	.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image:nth-child(2) img.banner-middle {
		display: none;
	}
	.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image:nth-child(2) img.banner-small {
	}

	.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image:nth-child(3) {
		width: 33%;
	}

	.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image:nth-child(3) img.banner-large {
		display: none;
	}
	.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image:nth-child(3) img.banner-middle {
		display: none;
	}
	.swiper-container.swiper-banner .reading-banner-set1 .swiper-banner-image:nth-child(3) img.banner-small {
	}



























.layout-2nd #hkecl-content h1 {
	margin-bottom: 10px;
}

.layout-2nd div.resources-packages {
	margin-top: 15px;
}

.layout-2nd .resources-packages.type-thumbnail-small-2.category-books {
	margin-top: 5px;
}

.layout-2nd .category-description {
	display: none;
}

.browse-sorting-option {
	text-align: right;
}

.browse-sorting-option select {
	background-color: #FFFFFF;
	padding: 1px 10px 1px 5px;
	border-radius: 0;
	font-family:"Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	font-size: 15px;
	font-weight: bold;
	color: #515151;
}

.browse-sorting-option select option{color: #515151;}

/* MENU */

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-2 {
		min-height: 0px !important;
}

.browse-sorting-option {
	text-align: right;
	/* margin-top: -10px; */
	/* margin-bottom: 5px; */
}









/* edit on article listing */

/*2nd*/


.layout-2nd div.resources-packages.type-sec-level-listing article .article-content-wrapper .hkecl-channel-customized.upload-date,
.layout-2nd div.resources-packages.type-sec-level-listing article .article-content-wrapper .hkecl-channel-customized.resources-avaliable{
	display: none;
}

.layout-2nd div.resources-packages.type-sec-level-listing article .article-content-wrapper div.field-author {
	display: block;
}

.layout-2nd div.resources-packages.type-thumbnail-related-article-2 article .article-content-wrapper {
	margin-top: 10px;
}

.layout-2nd div.resources-packages.type-thumbnail-related-article-2 article .article-content-wrapper .article-title, div.resources-packages.type-thumbnail-related-article-2 article .article-content-wrapper div.article-title a {
	color: #565656;
}

.layout-2nd div.resources-packages.type-thumbnail-related-article-2 article .article-content-wrapper div.field-author {
	display: block;
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
}

#hkecl-content div.resources-packages.type-thumbnail-small-2 article {
	border-color: #CBCBCB !important;
}

.layout-2nd div.resources-packages.type-thumbnail-small-2 article {
	/*border: none !important;*/
}

/* ranking */
#hkecl-content div.resources-packages.type-thumbnail-small-2 article {position: relative;}
#hkecl-content div.resources-packages.type-thumbnail-small-2 article .ranking-block{
	position: absolute;
	display: inline-block;
	background-color: #2AA7DF;
	padding: 0px 4px;
	left: 0;
	top: 0;
	color: #fff;
}

div.resources-packages.type-thumbnail-small-2 article .article-content-wrapper .article-title,
div.resources-packages.type-thumbnail-small-2 article .article-content-wrapper div,
div.resources-packages.type-thumbnail-small-2 article .article-content-wrapper p {
	padding: 0 15px;
}

div.resources-packages.type-thumbnail-small-2 article .article-title {
	font-weight: normal;
	font-size: 95%;
}

div.resources-packages.type-thumbnail-small-2 article .hkecl-channel-customized.field-author {
	display: block;
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	font-size: 95%;
}

div.resources-packages.type-thumbnail-small-2 article .hkecl-channel-customized.field-publisher {
	display: block;
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	font-size: 95%;
}

div.resources-packages.type-thumbnail-small-2 article .hkecl-channel-customized.field-eread-plan {
	display: block;
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	font-size: 95%;
}

div.resources-packages.type-thumbnail-small-2 article .hkecl-channel-customized.field-description {
	display: block;
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	font-size: 95%;
}

.channel-facebook {
	background-image: url('images/ReadingCity/facebook_icon_bkg.png');
	padding-left: 20px;
	margin-top: 50px;
	margin-bottom: 0;
	background-position: 25% 0px;
	background-repeat: repeat-x;
}
	.channel-facebook-button {
			background-image: none;
	}

	.channel-facebook-button .take-time-to-read{
		color: #3aa589;
		display: block;
	}

	.channel-facebook-button a{
			display: inline-block;
			background-image: url('images/ReadingCity/facebook_icon.png');
			/*width: 220px;*/
			height: 65px;
			vertical-align: bottom;
			margin-left: 100px;
			background-repeat: no-repeat;
			padding-left: 70px;
			padding-top: 10px;
			font-size: 18px;
			font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
			color: #615F5F;
			font-weight: bold;
			margin-left: 0px;
	}

	.channel-facebook-button a:hover{
			background-image: url('images/ReadingCity/facebook_icon_h.png');
			padding-bottom: 0;
			border-bottom: none;
	}

	.eng .channel-facebook-button a{
			display: inline-block;
			background-image: url('images/ReadingCity/facebook_icon.png');
			width: 220px;
			height:75px;
	}
	.eng .channel-facebook-button a:hover{
			background-image: url('images/ReadingCity/facebook_icon.png');
	}

@media screen and (min-width: 600px) {
	.channel-facebook-button a{
		margin-left: 100px
	}

	.channel-facebook {
		background-position: left bottom; /*0 0px;*/
	}
}



















/* article page**/




.layout-3rd.layout-book .favorites-pack {text-align: center;}

@media all and (min-width: 640px) {
	.layout-book.layout-3rd .favorites-pack {
		text-align: right;
	}
}


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

	.layout-book.layout-3rd .favorites-pack {
		text-align: right;
	}
}


.content-blockquote {
	background:url(images/content_quote.png) no-repeat;
	margin:30px 50px 0px 20px;
	padding:10px 10px 10px 25px;
	color: #000000;
}







.layout-3rd #hkecl-content .channel-infostructure .channel-pseudo-side h2 {
	border-bottom: dotted 3px #717171;
	margin-bottom: 10px;
	font-size: 180%;
}

.layout-3rd .channel-pseudo-side h2 {
	background-image: url(images/ReadingCity/icon_download.png);
	background-repeat: no-repeat;
	padding-left: 35px;
	background-position: 0 7px;
}

#hkecl-content .related-articles h2,
#hkecl-content .related-books h2 {
	font-size: 150%;
	border-bottom: solid 1px #717171;
	margin-bottom: 10px;
}

#hkecl-content .related-books h2 {
	margin-bottom: 0;
}

.layout-3rd div.resources-packages.type-thumbnail-related-article-2 {
	margin-left: 20px;
}

.layout-3rd div.resources-packages.type-thumbnail-related-article-2 article {
	padding-bottom: 10px;
}

.layout-3rd div.resources-packages.type-thumbnail-related-article-2 article .article-image-container a {
	position: relative;
	display: inline-block;
}

.layout-3rd div.resources-packages.type-thumbnail-related-article-2 article .article-image-container span.play-button {
	background-image: url(images/ReadingCity/play-button.png);
	background-repeat: no-repeat;
	/*background-position: -20px -10px;*/
	background-position: 0 0;
	background-size: 100%;
	position: absolute;
	height: 100%;
	width: 100%;
	display: inline-block;
}






























/* index searching panel */

.searching-panel {
	/* background: #EFEFEF; */
	border-radius: 0;
	padding: 10px 20px 5px;
	/* margin-top: 60px; */
	font-family:"Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	font-size: 100%;
}

.layout-2nd .searching-panel {
	padding-top: 10px;
	/* padding-bottom: 20px; */
	padding: 0;
	margin-right: 35px;
	margin-top: 0px; /*-30px*/
}

.browse-sorting-option {
	/* margin-left: calc(100% - 110px); */
	padding-top: 0;
	position: absolute;
	top: 0;
	right: 0;
}

.searching-panel p.searching-title {
	display: block;
	font-weight: bold;
	color: #747474;
	margin-bottom: 10px;
	margin-top: 5px;
}

@media screen and (min-width: 560px) {
	.layout-2nd .searching-panel {
		/*width: calc(100% - 110px);
		float: left;*/

	}

	.browse-sorting-option {
		/* margin-left: calc(100% - 110px); */
	}
}


@media screen and (min-width: 700px) {
	.searching-panel p.searching-title {
		/* display: block; */
	}
	.searching-panel {
		margin-left: -21px;
	}

	.layout-2nd .searching-panel {
		margin-left: 0;
	}

	.layout-2nd .searching-panel {

	}

	.browse-sorting-option {

	}
}


.searching-panel ul.searching-keywords {
		margin-top: 5px;
		margin-bottom: 5px;
		display: inline;
}

.searching-panel ul.searching-keywords li{
		display: inline-block;
		margin-right: 5px;
		margin-bottom: 5px;
		padding: 3px 10px 0 5px;
}

.searching-panel ul.searching-keywords li label{
		cursor: pointer;
		font-weight: normal;
}

.searching-panel ul.searching-keywords li input {
		width: auto;
		vertical-align: sub;
		margin-bottom: 5px;
}

		.bootstrap-style .searching-panel ul.searching-keywords li input,
		.bootstrap-style .searching-panel ul.searching-keywords li input[type="radio"],
		.bootstrap-style .searching-panel ul.searching-keywords li input[type="checkbox"]
		{
				margin: 0 5px 0 0;
		}

.searching-panel ul.searching-keywords li span.subscribed {
		color: #FF7400;
		font-weight: bold;
}

/* 20150810 edit */

.searching-panel ul.searching-keywords li.not-subscribed span.subscribed {
		display: none; /* sysdev wants this tag rendered all the time and use status class to hide */
}

.not-login .searching-panel ul.searching-keywords li span.subscribed  {
		display: none;
}

.searching-panel ul.searching-keywords li {
		border: 1px #D4D2D3 solid;
		border-radius: 3px;
		color: #676767;
		-o-transition:color .2s ease-out, background .3s ease-in;
		-ms-transition:color .2s ease-out, background .3s ease-in;
		-moz-transition:color .2s ease-out, background .3s ease-in;
		-webkit-transition:color .2s ease-out, background .3s ease-in;
		/* ...and now override with proper CSS property */
		transition:color .2s ease-out, background .3s ease-in;
		background: transaprent;
		/*min-width: 120px;*/
}

.searching-panel ul.searching-keywords li:hover {
	background-color: #FFFBC3;
	color: #000;
}

.searching-panel ul.searching-keywords li.selected {
		border: #FF7400 solid 1px;
		color: #676767;
		/* background: #F49020; */
}

/*** reading city pagination ***/

.hkecl-pagination {
	margin-top: 50px;
}

.panel-footer .hkecl-pagination {
	margin-bottom: 0;
}

.hkecl-pagination{
	display: none;
}

.hkecl-pagination.bottom {
	margin-top: 10px;
	display: block;
	padding-right: 5px;
}

.hkecl-pagination ul li {
	float: left;
	display: inline-block;
	background: transparent;
	margin: 0 2px;
	color: #797979;
	padding: 0 7px;
	font-size: 90%;
	border: 1px solid #ADADAD;
	min-width: 1.6em;
	cursor: pointer;
}

.hkecl-pagination ul li.selected{
	background: #F36E45;
	color: #fff;
	border-color: #F36E45;
}

.hkecl-pagination ul li.prev,
.hkecl-pagination ul li.next {
	width: 20px;
	color: #F36E45;
	background: transparent;
	border: none;
	font-weight: bolder;
}

.hkecl-pagination ul li.prev{
	transform: rotateZ(-90deg);
	padding: 0;
	margin: 0;
	margin-top: -3px;
}
.hkecl-pagination ul li.next{
	transform: rotateZ(90deg);
	padding: 0;
	margin: 0;
	margin-top: 6px;
}

.hkecl-pagination ul li.first,
.hkecl-pagination ul li.last,
.hkecl-pagination ul li.dotdotdot {}

.hkecl-pagination ul li.three-digits{
	padding: 0 1px;
}

.hkecl-pagination ul li.dotdotdot {
	border: none;
	margin-left: -5px;
	margin-right: -5px;
}

.hkecl-pagination ul li.first,
.hkecl-pagination ul li.last,
.hkecl-pagination ul li.dotdotdot,
.hkecl-pagination ul li.optional {
	display: none;
}

@media screen and (min-width: 540px) {
	.hkecl-pagination {
		display: block;
		/*margin-bottom: -15px;*/
		margin-top: 40px;

		/* under sysdev's implementation */
		/*margin-bottom: -55px;*/
		width: 100%;
	}

	.hkecl-pagination ul {
		float: right;
	}

}

@media screen and (min-width: 800px) {
}

@media screen and (min-width: 950px) {
	.hkecl-pagination ul li.first,
	.hkecl-pagination ul li.last,
	.hkecl-pagination ul li.dotdotdot,
	.hkecl-pagination ul li.optional {
		display: inline;
	}
}

/* PSEUDO MENU, INITIALIZED ON DEMAND*/

.layout-readingcity #hkecl-upper #channel-nav header img {
	width: 110px;
}

@media all and (min-width: 750px) {
	.layout-readingcity #hkecl-upper #channel-nav header img{
			width: auto;
			max-width: 250px;
	}
}

.pseudo-left-menu-container{
	/*display: none;*/
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
}

.layout-index .pseudo-left-menu-container .pseudo-logo {
	margin-top: 1px;
}

.layout-2nd .pseudo-left-menu-container .pseudo-logo,
.layout-3rd .pseudo-left-menu-container .pseudo-logo {
	border-bottom: #E77735 5px solid;
	margin-top: 1px;
}

.pseudo-left-menu-container .pseudo-logo a {

}

.pseudo-left-menu-container .pseudo-logo a:hover {
	border-bottom: none;
}

.pseudo-left-menu-container .pseudo-logo img{
		vertical-align: bottom;
		margin-right: 0px;
		margin-top: 0px;
		margin-bottom: 5px;
		width: 180px;
}

.pseudo-left-menu-container .pseudo-logo img{
		width: auto;
		max-width: 250px;
		width: auto;
		max-width: 250px;
		margin-left: 20px;
}
.pseudo-left-menu-container ul.subscription,
.pseudo-left-menu-container ul.book-list{
	margin-right: 25px;
}

.pseudo-left-menu-container ul.subscription li,
.pseudo-left-menu-container ul.book-list li {
	padding: 8px 25px;
	border-top: 1.5px solid #DADADA;
	font-size: 100%;
	 font-weight: bold;
}

.front .pseudo-left-menu-container ul.subscription > li:nth-child(2) {
	border-bottom: 1.5px solid #DADADA;
}

.pseudo-left-menu-container ul.subscription li a,
.pseudo-left-menu-container ul.book-list li a {
	color: #7A7A7A;
}

.pseudo-left-menu-container ul.book-list li.submenu {
	padding-left: 43px;
	margin-bottom: 0;
	margin-top: 0px;
	background: url(images/greydot.png) 28px 17px no-repeat;
	margin-left: 0;
	border-bottom: none;
	padding-top: 5px;
	padding-bottom: 5px;
	background-position: 28px 14px;
	border-top: none;
}

.pseudo-left-menu-container ul.book-list li.submenu a {

}

.pseudo-left-menu-container ul.subscription > li:nth-child(1),
.pseudo-left-menu-container ul.book-list > li:nth-child(1){
	font-weight: bold;
	font-size: 150%;
	border-top: none;
}


.pseudo-left-menu-container ul.book-list > li:nth-child(2) a{
	color: #299DB6;
	font-weight: bold;
}


.pseudo-left-menu-container ul.book-list > li:nth-child(2).active {
	background-color: #2AA7DF;
}

.pseudo-left-menu-container ul.book-list > li:nth-child(2).active a{
	color: #FCFFFF !important;
}

.pseudo-left-menu-container ul.book-list li.active {
	background-color: #E77735;
}

.pseudo-left-menu-container ul.book-list li.active a {
	color: #fff;
}

@media screen and (min-width: 800px) {

	.reading-city-enable-left-menu .pseudo-left-menu-container {
		display: block;
		width: 200px;
		background-color: #fff;
		float: left;
		min-height: 600px;
		position: absolute;
	}

	.reading-city-enable-left-menu #hkecl-upper,
	.reading-city-enable-left-menu #hkecl-columns-container {
		width: calc(100% - 200px) !important;
		margin-left: 200px;
	}

	.reading-city-enable-left-menu #hkecl-columns-container {
		min-height: 1900px;
	}

	.reading-city-enable-left-menu #hkecl-upper #channel-nav header {
				width: 0%; /* for IE pls change to 25% */
				display: none;
	}

	.reading-city-enable-left-menu #hkecl-upper #channel-nav ul {
			width: 100%;
			margin-left: 0;
	}

}

.pseudo-left-menu-container ul.book-list-on-fire {
	border-radius: 10px;
	background: #F8F8F8;
	border: 1px solid #CDCDCD;
	margin-top: 20px;
	margin-left: 10px;
	padding: 15px 0 0 5px;
}

.pseudo-left-menu-container ul.book-list-on-fire li {
	padding: 10px 0;
	border-bottom: 1px dashed #CDCDCD;
}

.pseudo-left-menu-container ul.book-list-on-fire > li:nth-child(1){
	color: #E77735;
	font-size: 180%;
	font-weight: bold;
	padding-left: 20px;
}

.pseudo-left-menu-container ul.book-list-on-fire li span.ranking {
	background-color: #2BA7DD;
	padding: 10px 0 10px 0px;
	color: #fff;
	width: 25px;
	display: inline-block;
	text-align: center;
	margin-right: 5px;
	font-weight: bold;
	float: left;
}

.pseudo-left-menu-container ul.book-list-on-fire li a {
	margin-left: 25px;
	display: block;
}

.pseudo-left-menu-container ul.book-list-on-fire li a:hover {
	border-bottom: none;
	padding-bottom: 0;
}

.pseudo-left-menu-container ul.book-list-on-fire li a span {
	display: block;
	color: #4A4A4A;
}











.searchbox_dummy {
	/* display: none; */
}
@media screen and (min-width: 800px) {

	.searchbox_dummy {
		display: inline;
		margin-top: 30px;
	}

	.layout-index .searchbox_dummy {
		margin-left: -30px;
		margin-top: 60px;
	}
}












/* top area */


#content-info {
	/* float: left; */
}

.layout-book #content-info {
	float: clear;
}

#content-info span{
	display: block;
}


.layout-3rd .ebook-content-info .field-author span:nth-child(1),
.layout-3rd .ebook-content-info .field-publisher span:nth-child(1),
.layout-3rd .ebook-content-info .field-eread-plan span:nth-child(1),
.layout-3rd .ebook-content-info .field-description span:nth-child(1),
.layout-3rd .ebook-content-info .field-isdn span:nth-child(1),
.layout-3rd .ebook-content-info .field-publish-date span:nth-child(1),
.layout-3rd .ebook-content-info .field-isbn span:nth-child(1),
.layout-3rd .ebook-content-info .field-rating span:nth-child(1)
{
	/*20150813 edit
	width: 150px;
	display: inline-block;
	*/

	/*20150817 changed as following: */
	display: block;
	/*width: 100px;*/ /*20150825 remared*/
	float: left;
}

.layout-3rd .ebook-content-info .field-author span:nth-child(2),
.layout-3rd .ebook-content-info .field-publisher span:nth-child(2),
.layout-3rd .ebook-content-info .field-eread-plan span:nth-child(2),
.layout-3rd .ebook-content-info .field-description span:nth-child(2),
.layout-3rd .ebook-content-info .field-isdn span:nth-child(2),
.layout-3rd .ebook-content-info .field-publish-date span:nth-child(2),
.layout-3rd .ebook-content-info .field-isbn span:nth-child(2),
.layout-3rd .ebook-content-info .field-rating span:nth-child(2)
{
	/*20150817 changed as following: */
	display: block;
	/*margin-left: 150px;*/
}

@media all and (min-width: 750px) {
	.layout-3rd .ebook-content-info .field-author span:nth-child(2),
	.layout-3rd .ebook-content-info .field-publisher span:nth-child(2),
	.layout-3rd .ebook-content-info .field-eread-plan span:nth-child(2),
	.layout-3rd .ebook-content-info .field-description span:nth-child(2),
	.layout-3rd .ebook-content-info .field-isdn span:nth-child(2),
	.layout-3rd .ebook-content-info .field-publish-date span:nth-child(2),
	.layout-3rd .ebook-content-info .field-isbn span:nth-child(2),
	.layout-3rd .ebook-content-info .field-rating span:nth-child(2)
	{
		/*margin-left: 180px;*/
	}
}


.ebook-portfolio-container {
}


.button-controls {
	/* padding-left: calc((100% - 320px)/2); */
	/* margin-bottom: 30px; */ /* 2020-11-30 */
	text-align: center;
}

.button-controls button {
	/* min-width: 150px; /* 2020-11-30 */
	min-width: 215px; /* 2020-11-30 */
	height: 35px;
	padding: 0 10px 0 0;
	margin: 10px 10px;
	border: none;
	font-size: 105%;
	cursor: pointer;
	margin-left: calc((100% - 150px)/2);
	color: #FFF;
	/* padding-left: 0px; */
	background-color: #09699E;
	border-radius: 3px;
	font-weight: bold;
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	font-size: 104%;
	/* padding-right: 10px; */
	display: block;
}


.eng .button-controls button {
	/* min-width: 180px; /* 2016-10-06 */
	min-width: 215px; /* 2020-11-30 */
	/* margin-left: 70px; /* 2016-10-06 */
}
.eng .button-controls button.btn_EdMall {
	/* min-width: 150px; /* 2020-08-07 */
	min-width: 215px; /* 2020-11-30 */
}

.button-controls button.btn_EdMall {
	min-width: 215px; /* 2020-11-30 */
}

.button-controls button:hover {
	background-color: #E67734;
}

/* 2020-11-30 */
.button-controls .dim-button:hover {
	/*background-color: #09699E !important;*/
	background-color: #000000 !important;
	cursor: default;
}

/* 2020-11-30 */
.button-controls .btn_read_now:hover {
	background-color: #09699E !important;
}

/* 2020-11-30 */
.button-controls .btn_processing:hover {
	background-color: #767370 !important;
	cursor: default;
}

.button-controls .btn_library{
	/* background-image: url(images/ReadingCity/btn_library.png); */
	/* margin-top: 0; */
	text-align: left;
	padding-left: 12px;
	padding-top: -4px;
	margin-right: 10px;
}

.button-controls .btn_library span{
	background-image: url(images/ReadingCity/btn_library_span.png);
	width: 25px;
	height: 25px;
	display: inline-block !important;
	vertical-align: bottom;
	padding: 0;
	margin: 0;
	margin-right: 8px;
	background-repeat: no-repeat;
}

.button-controls .btn_library:hover{
	/* background-image: url(images/ReadingCity/btn_library_h.png); */
	background-color: #E67734;
}

.button-controls .btn_eRead{
	/*background-image: url(images/ReadingCity/btn_eRead.png);*/
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
	margin-right: 10px;
}

/* 2020-11-30 */
.button-controls .btn_read_now{
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
	margin-right: 10px;
	background-color: #E67734;
}

/* 2020-11-30 */
.button-controls .btn_processing{
	/* display:none; */
	background-color: #767370;
    border-color: #767370;
	color: #fff;
	margin-right: 10px;
}

/*
.button-controls .btn_eRead span{
	background-image: url(images/ReadingCity/btn_eRead_span.png);
	width: 30px;
	height: 25px;
	display: inline-block !important;
	vertical-align: bottom;
	padding: 0;
	margin: 0;
	margin-right: 5px;
}
*/
.button-controls .btn_eRead:hover{
	/*background-image: url(images/ReadingCity/btn_eRead_h.png);*/
	/* padding-right: 10px; */
}

.button-controls .btn_EdMall{
	/*background-image: url(images/ReadingCity/btn_EdMall.png);*/
	text-align: left;
	padding-left: 10px;
	margin-right: 10px;
}

.button-controls .btn_EdMall span{
	background-image: url(images/ReadingCity/btn_EdMall_span.png);
	width: 25px;
	height: 25px;
	display: inline-block !important;
	vertical-align: text-bottom;
	padding: 0;
	margin: 0;
	margin-right: 5px;
}

.button-controls .btn_eRead.btn_FreeReadingWeek2024 span{
	background-image: url(images/ReadingCity/Layer_1.png);
}
.button-controls .btn_eRead.btn_FreeReadingWeek2024:hover {
	width:max-content;
	background-color: #09699E;
}
.button-controls .btn_eRead.btn_FreeReadingWeek2024 {
	width:max-content;
	background-color: #E6714F;
}

/* 2020-11-30 */
.button-controls .btn_eRead span{
	background-image: url(images/ReadingCity/eRead_call-to-action-icon.png);
	width: 25px;
	height: 25px;
	display: inline-block !important;
	vertical-align: text-bottom;
	padding: 0;
	margin: 0;
	margin-right: 5px;
	background-size: 25px 25px;
}

/* 2024-04-09 */
/* .btn_FreeReadingWeek2024 span{
	background-image: url(images/ReadingCity/Layer_1.png);
}
.btn_FreeReadingWeek2024 {
	background-color: #E67734;
} */


/* 2020-11-30 */
.button-controls .btn_read_now span{
	background-image: url(images/ReadingCity/eRead_call-to-action-icon.png);
	width: 25px;
	height: 25px;
	display: inline-block !important;
	vertical-align: text-bottom;
	padding: 0;
	margin: 0;
	margin-right: 5px;
	background-size: 25px 25px;
}

/* 2020-11-30 */
.button-controls .btn_processing span{
	background-image: url(images/ReadingCity/eRead_call-to-action-icon.png);
	width: 25px;
	height: 25px;
	display: inline-block !important;
	vertical-align: text-bottom;
	padding: 0;
	margin: 0;
	margin-right: 5px;
	background-size: 25px 25px;
}

/*.button-controls .btn_EdMall:hover{
	background-image: url(images/ReadingCity/btn_EdMall_h.png);
}
*/

.button-controls .btn_MMIS {
	padding-left: 10px;
	text-align: left;
	margin-right: 10px;
}

.button-controls .btn_MMIS span{
	background-image: url(images/ReadingCity/btn_mmis_span.png);
	width: 25px;
	height: 25px;
	display: inline-block !important;
	vertical-align: text-bottom;
	padding: 0;
	margin: 0;
	margin-right: 5px;
}

.ebook-portfolio-container .ebook-image-container {
		position: relative;
		max-width: calc(90%);
		/* margin-left: calc(10% / 2); */
		text-align: center;
}

.ebook-portfolio-container .ebook-image-container img {
		/* max-width: calc(90%); */
		border: 1px solid #B7B7B7;
		padding: 10px;
		max-width: 280px;
}

.ebook-portfolio-container .ebook-image-container .preview-book {
	display: inline-block;

	background-image: url(images/ReadingCity/Icon_trial_reading_chi.png);
	width: 98px;
	height: 51px;
	position: absolute;
	bottom: 18px;
	left: 11px;
}

/* 2020-11-30 */
.has-audio{
	display: inline-block;
	background-image: url(images/ReadingCity/icon_has_audio.png);
	width: 20px;
    height: 20px;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-size: 20px;
	vertical-align: text-top;
}

/* 2020-11-30 */
.has-multimedia{
	display: inline-block;
	background-image: url(images/ReadingCity/icon_has_multimedia.png);
	width: 20px;
    height: 20px;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-size: 20px;
	vertical-align: text-top;
}

/* 2020-11-30 */
.has-interactive-exercise{
	display: inline-block;
	background-image: url(images/ReadingCity/icon_has_exercise.png);
	width: 20px;
    height: 20px;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-size: 20px;
	vertical-align: text-top;
}

/* 2020-11-30 */
.has-media-overlay{
	display: inline-block;
	background-image: url(images/ReadingCity/icon_has_media_overlay.png);
	width: 20px;
    height: 20px;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-size: 20px;
	vertical-align: text-top;
}

.ebook-portfolio-container .ebook-image-container .preview-book.eng {
	background-image: url(images/ReadingCity/Icon_trial_reading_eng.png);
}

.ebook-portfolio-container .ebook-image-container .preview-book:hover {
	border-bottom: none;
	padding-bottom: 0;
}

.ebook-portfolio-container .ebook-content-info {position: relative;}

.ebook-portfolio-container .ebook-content-info > div {
	/*margin-bottom: 10px*/
}

@media all and (min-width: 360px) {
	.ebook-portfolio-container .ebook-image-container {
		text-align: center;
	}

	.ebook-portfolio-container .ebook-content-info {
		padding-left: calc((100% - 320px)/2);
	}

	.ebook-portfolio-container .ebook-image-container .preview-book {

	}

	.button-controls button {
	}
}

@media all and (min-width: 386px) {
	.ebook-portfolio-container .ebook-image-container .preview-book {
		left: 11px;
	}
}

@media all and (min-width: 400px) {
	.ebook-portfolio-container .ebook-image-container .preview-book {
		left: calc((100% - 280px)/2 );
	}
}

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

	.button-controls {
		text-align: left;
		padding-left: 0px;
		/*padding-right: 50px; /* 2016-10-06, chinese */
		padding-right: 0px; /* 2020-11-30 */
	}

	.button-controls button {
		/* margin-left: calc( (100% - 200px) / 2 ); */
	}
}

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

	.ebook-portfolio-container {
	}

	.ebook-portfolio-container .ebook-image-container {
		float: left;
		width: 320px;
		/* min-height: 400px; */ /*remarked on 25 Aug 16 */ /* for better location of application bar button */
	}

	.ebook-portfolio-container .ebook-image-container .reading_floating_width_container{
		position: relative;
	}

		.ebook-portfolio-container .ebook-image-container img {
			/* border: 1px solid #B7B7B7; */
			/* padding: 10px; */
		}

	.ebook-portfolio-container .ebook-content-info {
		margin-left: 320px;
		height: 100%;
		padding-left: 0;
	}

	.ebook-content-info .favorites-pack {
		text-align: left;
		margin-top: 20px;
	}
	.button-controls {
		/*margin-top: -200px;*/ /*25 Aug 16*/
		width: 100%;
		text-align: right;
		padding-left: 0;
		/*padding-left: 40px;  2016-10-06 */
	}

	.button-controls button {
	margin-left: 0;
	margin-right: calc( (100% - 150px - 300px) /2 );
	}

	.button-controls button {
		margin-left: 0px; /* 2016-10-06 */
	}

}

@media (min-width: 780px) {

	.button-controls {
		/* margin-bottom: 60px; */ /* 2020-11-30 */
		/*margin-top: -100px;*/ /*25 Aug 16*/
		padding-right: 0; /* 2016-10-06 */
	}

	.button-controls button {
		margin-right: 0;
		float: left;
		min-width: 215px; /* 2020-11-30 */
		/* margin-left:	20px; */
	}

	.button-controls button.btn_EdMall {
		min-width: 215px; /* 2020-11-30 */
	}

	.eng .button-controls button {
		margin-left: 10px; /* 2016-10-06 */
		/* min-width: 185px; */
		min-width: 215px; /* 2020-11-30 */
	}

	.eng .button-controls button.btn_EdMall {
		/* min-width: 155px; /* 2020-08-07 */
		min-width: 215px; /* 2020-11-30 */
	}

	/* 2020-11-30 */
	.eng button.btn_EdMall {
		min-width: 155px; /* 2020-08-07 */
	}
}

@media (min-width: 980px) {
	.ebook-portfolio-container {
		margin-top: -60px; /*-60px b4, changed due to 20160822-005 */
	}

	.ebook-portfolio-container.loading {
		margin-top: 0px;
	}

	.ebook-portfolio-container .ebook-image-container {
		width: 35%;
	}

	.ebook-portfolio-container .ebook-content-info {
		margin-left: 35%;
	}

	.ebook-content-info #content-info {
		float: left;
		width: 70%;
	}

	.ebook-content-info .favorites-pack {
		margin-left: 70%;
		text-align: right;
	}

	.button-controls button {
		/*min-width: 120px; */
		min-width: 215px; /* 2020-11-30 */
		/* margin-left: 10px; */
	}

	.button-controls button.btn_EdMall {
		min-width: 215px; /* 2020-11-30 */
	}


}


/* Tab */
.layout-3rd .hkecl-content-page #tabs {
	border: none;
}

.layout-3rd .hkecl-content-page #tabs.ui-tabs .ui-tabs-nav {
	margin-bottom: 0;
	background-image: none;
	background-color: transparent;
	border: none;
	margin-left: 0;
}

.layout-3rd .hkecl-content-page #tabs.ui-tabs .ui-tabs-panel {
	border: #B5B5B5 solid 1px;
	padding: 15px;
	min-height: 200px;
}

.layout-3rd .hkecl-content-page #tabs.ui-tabs .ui-tabs-nav li {
	list-style-type: none;
	padding: 0;
	margin: 0 4px -1px 4px;
	border: 1px solid #ababab;
	background-color: #EFF0EB;
	background-image: none;
}

.layout-3rd .hkecl-content-page #tabs.ui-tabs .ui-tabs-nav li.ui-state-hover {
	background: rgb(245, 245, 245) 0% 20% repeat-x;
}


.layout-3rd .hkecl-content-page #tabs.ui-tabs .ui-tabs-nav li.ui-state-active {
	border-bottom: 1px solid #fff;
	background-color: #fff;
}

.layout-3rd .hkecl-content-page #tabs.ui-tabs .ui-tabs-nav li.ui-state-default a:hover {
	border-bottom: none;
}

.layout-3rd .hkecl-content-page #tabs.ui-tabs .ui-tabs-nav li a {
	padding: 3px 10px 3px 10px;
	background-repeat: no-repeat;
	background-position: 10px 10px;
	-o-transition: none;
	-ms-transition: none;
	-moz-transition: none;
	-webkit-transition: none;/* ...and now override with proper CSS property */
	transition: none;
	font-size: 100%;
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	font-weight: bold;
	min-width: 64px;
	text-align: center;
}

/*
#hkecl-content .ui-widget-content a {
	color: #1c64ad;
}

#hkecl-content .ui-widget-content a:hover {
	color: #c93;
}
*/

@media all and (min-width: 860px) {
	.layout-3rd .hkecl-content-page #tabs.ui-tabs .ui-tabs-nav li a {
		min-width: 100px;
	}
}





/* author box */

.authors-box, .additional-box {
	margin: 30px 0;
}

.authors-box .resources-packages {
	background:#f9f9f9;
	border-bottom:1px #717171 solid;
	padding: 20px 20px 0 10px;
	margin-top: 10px;
}

.authors-box .resources-packages article {
	margin-bottom: 20px;
	background-color: transparent;
}

@media all and (min-width: 950px) {
	.authors-box .resources-packages {
		width: 70%;
	}
}

.authors-box .resources-packages article .article-image-container {
	width: 100px;
	float: left;
}
.authors-box .resources-packages article .article-content-wrapper {
	margin-left: 100px;
}

.authors-box .resources-packages article .article-content-wrapper p {
	margin-bottom: 10px;
}

.additional-box .resources-packages {
	border: 1px #999 solid;
	padding: 10px;
	width: 100%;
	font-size: 81.25%;
	display: inline-block;
	max-width: 500px;
	margin-top: 0;
}
.additional-box .resources-packages article {
	margin-bottom: 0px;
	padding-bottom: 0px;
}
.additional-box .resources-packages .article-title {
	color:#900;
	font-size:125%;
}
.additional-box .resources-packages .article-title a {
	color:#900;
}
.additional-box .resources-packages article .article-image-container {
	max-height:100%;
}

.additional-box .resources-packages article .article-image-container img {
	width: 100px;
	height: auto;
}

.additional-box .resources-packages article .article-content-wrapper {
	/* width: 100%; */
	margin-left: 0px;
	margin-top: 0px;
	/* padding-left: 120px; */
	padding-right: 5px;
	display: block;
	float: none;
}

.additional-box .resources-packages article .article-image-container {
	width: 100px;
	float: left;
}
.additional-box .resources-packages article .article-content-wrapper {
	margin-left: 110px;
}


/* related article custom */

/* migrated to global */

/*div.resources-packages.type-thumbnail-related-article .article-image-container {
	max-width: 380px !important;
}

div.resources-packages.type-thumbnail-related-article.article-image-container img {
	max-width: 380px !important;
}*/

@media all and (min-width: 480px) {
	div.resources-packages.type-thumbnail-related-article article {
		/*width: 175px !important;*/
		margin: 5px;
	}
}


/* prize list */

ul.reading-prize-list {margin-top: 50px;}

ul.reading-prize-list li {
	float: left;
	border: 2px #C7C7C7 dotted;
	padding: 10px;
	box-sizing: border-box;
	border-top: none;
	border-left: none;
	box-sizing: border-box;
}

ul.reading-prize-list li a {text-align: center;}

ul.reading-prize-list li a:hover {border-bottom: none;}

/* first row of 1column */
ul.reading-prize-list li:nth-child(-n+1){border-top: 2px #C7C7C7 dotted;}
/* first column of 1column */
ul.reading-prize-list li:nth-child(1n+1){border-left: 2px #C7C7C7 dotted;}



@media all and (min-width: 540px) {
	/* first row of 1column */
	ul.reading-prize-list li:nth-child(-n+1){border-top: none;}
	/* first column of 1column */
	ul.reading-prize-list li:nth-child(1n+1){border-left: none;}

	/* first row of 2column */
	ul.reading-prize-list li:nth-child(-n+2){border-top: 2px #C7C7C7 dotted;}
	/* first column of 2column */
	ul.reading-prize-list li:nth-child(2n+1){border-left: 2px #C7C7C7 dotted;}
}

@media all and (min-width: 773px) {
	/* first row of 2column */
	ul.reading-prize-list li:nth-child(-n+2){border-top: none;}
	/* first column of 2column */
	ul.reading-prize-list li:nth-child(2n+1){border-left: none;}

	/* first row of 3column */
	ul.reading-prize-list li:nth-child(-n+3){border-top: 2px #C7C7C7 dotted;}
	/* first column of 3column */
	ul.reading-prize-list li:nth-child(3n+1){border-left: 2px #C7C7C7 dotted;}
}


@media all and (min-width: 1007px) {
	/* first row of 3column */
	ul.reading-prize-list li:nth-child(-n+3){border-top: none;}
	/* first column of 3column */
	ul.reading-prize-list li:nth-child(3n+1){border-left: none;}

	/* first row of 4column */
	ul.reading-prize-list li:nth-child(-n+4){border-top: 2px #C7C7C7 dotted;}
	/* first column of 4column */
	ul.reading-prize-list li:nth-child(4n+1){border-left: 2px #C7C7C7 dotted;}
}



/* celebrity */

div.resources-packages.type-celebrity {
	//margin-left: 8%;
	margin-left: 2.5%;
	//width: 92%;
	width: 97.5%;
}

div.resources-packages.type-celebrity article {
	position: relative;
}

div.resources-packages.type-celebrity article .article-content-wrapper {
	position: absolute;
	bottom: -5px;
	/* background-color: #f00; */
	padding: 0;
	width: 100%;
}


div.resources-packages.type-celebrity > div article .article-content-wrapper {
	position: absolute;
	bottom: 2px;
}

div.resources-packages.type-celebrity article .article-content-wrapper .article-title {
	background: #959595;
	text-align: center;
	color: #fff;
	font-weight: normal;
	font-size: 16px;
}

div.resources-packages.type-celebrity article .article-image-container {
	padding: 0;
}

div.resources-packages.type-celebrity article .article-image-container img {
	//width: 260px;
	width: 240px;
	max-width: 260px;
}

div.resources-packages.type-celebrity > div {
	float: left;
	display: inline-block;
	width: 100%;
}

@media all and (min-width: 505px) {
	div.resources-packages.type-celebrity > div {
		//width: 130px;
		width: 120px;
		background: #fff;
	}
}

div.resources-packages.type-celebrity > article {
	margin-bottom: 5px
}

div.resources-packages.type-celebrity > article {
	margin-right: 5px;
}


div.resources-packages.type-celebrity div article:nth-child(1) .article-image-container img,
div.resources-packages.type-celebrity div article:nth-child(2) .article-image-container img {
	//width: 125px;
	width: 115px;
}

div.resources-packages.type-celebrity div article:nth-child(2) {
	margin-left: 10px;
}

@media all and (min-width: 505px) {
	div.resources-packages.type-celebrity > article,
	div.resources-packages.type-celebrity > div {
		//height: 260px;
		height: 240px;
		overflow: hidden;
		margin-bottom: 5px
	}
	div.resources-packages.type-celebrity div article:nth-child(2) {
		margin-top: 3px;
		margin-left: 0px;
	}
}

@media all and (min-width: 505px) {div.resources-packages.type-celebrity {/*width: 510px;*/}}
@media all and (min-width: 920px) {div.resources-packages.type-celebrity {/*width: 92%;*/}}
@media all and (min-width: 950px) {div.resources-packages.type-celebrity {}}


/* Width 70% for video */

@media all and (min-width: 768px) {
	.reading-city-width-70-percent {
		max-width: 70%;
	}
}














/*************************************************************************************
*
* COLUMNS: SMALL, 1,2,3,4,5 cols
*
**************************************************************************************/

div.resources-packages {
	margin-top: 20px;
}

div.resources-packages.type-thumbnail-small-6 article {
		width: 100%;
		padding: 15px;
		margin: 10px 1%;
}

div.resources-packages.type-thumbnail-small-6 article {
	border: 1px solid #eadec6 !important;
	padding: 5px !important;
}

div.resources-packages.type-thumbnail-small-6 article:nth-child(-n+1){
		border-top: 1px solid #ccc;
}

div.resources-packages.type-thumbnail-small-6 article:nth-child(n+1),
div.resources-packages.type-thumbnail-small-6 article:last-child{
		border-right: 1px solid #ccc;
}

.layout-3rd .ebook-portfolio-container .ebook-content-info div.readBtnDiv {
	flex-wrap: wrap;
}

/* 2-Column's border setting */
@media all and (min-width: 480px) {
	div.resources-packages.type-thumbnail-small-6 article .article-content-wrapper,
	div.resources-packages.type-list-item article .article-content-wrapper {
		padding-left: 0px;
	}
		div.resources-packages.type-thumbnail-small-6 article {
				width: 48%;
				margin: 10px 1%;
				padding: 25px;
				margin-bottom: 0px; /*only for smallest layout */
				border-top: none; /*only for smallest layout */
		}

		div.resources-packages.type-thumbnail-small-6 article .article-content-wrapper .article-title,
		div.resources-packages.type-thumbnail-small-6 article .article-content-wrapper div,
		div.resources-packages.type-thumbnail-small-6 article .article-content-wrapper p {
				min-width: auto;
		}

		div.resources-packages.type-thumbnail-small-6 article .article-image-container {
				clear: both;
				float: initial;
				width: auto;
				min-width: auto;
		}

		div.resources-packages.type-thumbnail-small-6 article .article-image-container img {
				/*width: 200px;
				height: 150px;*/
		}

		/*Reset due to column change */
		div.resources-packages.type-thumbnail-small-6 article:nth-child(-n+1){
				border-top: none;
		}

		div.resources-packages.type-thumbnail-small-6 article:nth-child(n+1),
		div.resources-packages.type-thumbnail-small-6 article:last-child{
				border-right: none;
		}

		/* New border */
		div.resources-packages.type-thumbnail-small-6 article:nth-child(-n+2){
				border-top: 1px solid #ccc;
		}

		div.resources-packages.type-thumbnail-small-6 article:nth-child(2n+2),
		div.resources-packages.type-thumbnail-small-6 article:last-child{
				border-right: 1px solid #ccc;
		}

		.layout-3rd .ebook-portfolio-container .ebook-content-info div.readBtnDiv {
			margin-bottom: 0px !important;
			/*width: 1px;*/
		}

		.readBtnDiv {
			/* margin-bottom: 0px !important; */
		}
}

/* 3-Column's border setting */
@media all and (min-width: 650px) {
		div.resources-packages.type-thumbnail-small-6 article {
				width: 31%;
				padding: 25px;
				/*margin-bottom: 0px;*/ /*only for smallest layout */
				border-top: none; /*only for smallest layout */
				margin: 10px 1%;
		}

		div.resources-packages.type-thumbnail-small-6 article .article-image-container {
				clear: both;
				float: initial;
				width: auto;
				min-width: auto;
		}

		div.resources-packages.type-thumbnail-small-6 article .article-image-container img {
				/*width: 160px;
				height: 120px;*/
		}

		/*Reset due to column change */
		div.resources-packages.type-thumbnail-small-6 article:nth-child(-n+2){
				border-top: none;
		}

		div.resources-packages.type-thumbnail-small-6 article:nth-child(n+2),
		div.resources-packages.type-thumbnail-small-6 article:last-child{
				border-right: none;
		}

		/* New border */
		div.resources-packages.type-thumbnail-small-6 article:nth-child(-n+3){
				border-top: 1px solid #ccc;
		}

		div.resources-packages.type-thumbnail-small-6 article:nth-child(3n+3),
		div.resources-packages.type-thumbnail-small-6 article:last-child{
				border-right: 1px solid #ccc;
		}

		.layout-3rd .ebook-portfolio-container .ebook-content-info div.readBtnDiv {
			margin-bottom: 0px !important;
			/*width: 1px;*/
		}

		.readBtnDiv {
			/* margin-bottom: 0px !important;*/
		}
}


@media all and (min-width: 850px) {
		div.resources-packages.type-thumbnail-small-6 article {
				width: 23%;
				margin: 10px 1%;
		}

		/*Reset due to column change */
		div.resources-packages.type-thumbnail-small-6 article:nth-child(-n+3){
				border-top: none;
		}

		div.resources-packages.type-thumbnail-small-6 article:nth-child(3n+3),
		div.resources-packages.type-thumbnail-small-6 article:last-child{
				border-right: none;
		}

		/* New border */
		div.resources-packages.type-thumbnail-small-6 article:nth-child(-n+4){
				border-top: 1px solid #ccc;
		}

		div.resources-packages.type-thumbnail-small-6 article:nth-child(4n+4),
		div.resources-packages.type-thumbnail-small-6 article:last-child{
				border-right: 1px solid #ccc;
		}

		.layout-3rd .ebook-portfolio-container .ebook-content-info div.readBtnDiv {
			flex-wrap: nowrap !important;
		}
		.clearfix2 {
			min-width: 215px;
			margin-right: 10px;
			display: contents;
			/*display: block;*/
		}
}


@media all and (min-width: 950px) {
		div.resources-packages.type-thumbnail-small-6 article {
				width: 18%;
				margin: 10px 1%;
		}

		/*Reset due to column change */
		div.resources-packages.type-thumbnail-small-6 article:nth-child(-n+3){
				border-top: none;
		}

		div.resources-packages.type-thumbnail-small-6 article:nth-child(3n+3),
		div.resources-packages.type-thumbnail-small-6 article:last-child{
				border-right: none;
		}

		/* New border */
		div.resources-packages.type-thumbnail-small-6 article:nth-child(-n+4){
				border-top: 1px solid #ccc;
		}

		div.resources-packages.type-thumbnail-small-6 article:nth-child(4n+4),
		div.resources-packages.type-thumbnail-small-6 article:last-child{
				border-right: 1px solid #ccc;
		}
}




















#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-3 {
	display: none;
}
#hkecl-side-menu-container .nav-item.level-3 {
	display: none;
}




/*
#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-1.role-item_1 .nav-item.level-2 {
	position: absolute;
}

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-1.role-item_1 .nav-item.level-2:nth-child(1) {
}

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-1.role-item_1 .nav-item.level-2:nth-child(2) {
	top: 60px;
}

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-1.role-item_1 .nav-item.level-2:nth-child(3) {
	left: 200px;
}

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-1.role-item_1 .nav-item.level-2:nth-child(4) {
	left: 200px;
	top: 150px;
}

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-1.role-item_1 .nav-item.level-2:nth-child(5) {
	left: 200px;
	top: 400px;
}

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-1.role-item_1 .nav-item.level-2:nth-child(6) {
	left: 200px;
	top: 440px;
}

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-1.role-item_1 .nav-item.level-2:nth-child(7) {
	left: 380px;
	top: 20px;
}

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-1.role-item_1 .nav-item.level-2:nth-child(8) {
	left: 380px;
	top: 240px;
}

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-1.role-item_1 .nav-item.level-2:nth-child(9) {
	left: 560px;
	top: 20px;
}

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-1.role-item_1 .nav-item.level-2:nth-child(10) {
	left: 560px;
	top: 180px;
}

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-1.role-item_1 .nav-item.level-2:nth-child(11) {
	left: 560px;
	top: 220px;
}

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-1.role-item_1 .nav-item.level-2:nth-child(12) {
	left: 560px;
	top: 320px;
}

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-1.role-item_1 .nav-item.level-2:nth-child(13) {
	left: 560px;
	top: 420px;
}
*/









































/*************************************************************************************
*
* AFTER SYSTEM DEV HAVE PAGINATION READY
*
**************************************************************************************/


/*
POPULAR BOOKS
*/

		ul.pagination li.first {
			color: #9f9f9f;
			padding-right: 5px;
			padding-left: 8px;
		}

		ul.pagination li.first:hover {
			color: white;
			background-color: #F36E45;
			border: 1px solid transparent;
		}

		ul.pagination li.first .first-stroke {
			border-left: 3px solid #9f9f9f;
			margin-right: -1px;
			display: inline-block;
			width: 1px;
			height: 0.72em;
		}

		ul.pagination li.first:hover .first-stroke {
			border-left: 3px solid white;
		}

		ul.pagination li.prev {
			transform: none;
			margin-top: 0;
			border: 1px solid #ADADAD;
			padding-left: 4px;
			color: #9f9f9f;
			padding-left: 5px;
			padding-right: 5px;
			width: auto;
			border-color: transparent;
		}

		ul.pagination li.prev:hover {
			color: #F36E45;
		}

		ul.pagination li.next {
			transform: none;
			margin-top: 0;
			border: 1px solid #ADADAD;
			padding-left: 5px;
			color: #9f9f9f;
			padding-left: 5px;
			padding-right: 5px;
			width: auto;
			border-color: transparent;
		}

		ul.pagination li.next:hover {
			color: #F36E45;
		}

		ul.pagination li.last {
			color: #9f9f9f;
			padding-left: 5px;
			padding-right: 7px;
		}

		ul.pagination li.last:hover {
			color: white;
			background-color: #F36E45;
			border: 1px solid transparent;
		}

		ul.pagination li.last .last-stroke {
			border-right: 3px solid #9f9f9f;
			margin-left: -1px;
			display: inline-block;
			width: 1px;
			height: 0.72em;
		}

		ul.pagination li.last:hover .last-stroke {
			border-right: 3px solid white;
		}

		.hkecl-pagination ul li a {
			color: #797979;
		}

		.hkecl-pagination ul li.selected a {
			color: white;
		}

		.hkecl-pagination ul li:hover a {
			border-bottom: none;
			color: #F36E45;
		}

		.hkecl-pagination ul li.first:hover a,
		.hkecl-pagination ul li.last:hover a {
			color: white;
		}

		.hkecl-pagination ul li.first .first-stroke,
		.hkecl-pagination ul li.last .last-stroke {
				-o-transition:border-color .2s ease-out, background .3s ease-in;
				-ms-transition:border-color .2s ease-out, background .3s ease-in;
				-moz-transition:border-color .2s ease-out, background .3s ease-in;
				-webkit-transition:border-color .2s ease-out, background .3s ease-in;
				/* ...and now override with proper CSS property */
				transition:border-color .2s ease-out, background .3s ease-in;
		}


		#advance_book_search {
		}

		#advance_book_search_input {
			background-color: #efefef;
			padding: 20px 20px 10px;
			margin-top: 20px;
			margin-bottom: 0 !important;
			border-radius: 5px;
			margin-top: 20px; /* production */
		}


		#advance_book_search_bar {
			vertical-align: top;
			margin-right: 5px;
			margin-left: -5px;
			cursor: pointer;
		}

		#AdvBkSearch_btnSearch {
			width:100px;
			height:35px;
			/*margin: 21px 10px;*/
			/*float:left;*/
			display: inline-block;
			transition: color 0s ease-out, background 0s ease-in;
			background-image: url(images/ReadingCity/search_icon.png);
			background-repeat: no-repeat;
			background-color: #f76943;
			background-position: 10px 5px;
			padding-left: 20px;
		}

		#AdvBkSearch_btnSearch:hover {
			color: white;
			border-bottom: 0;
		}

		#advance_book_search_input input {
			font-size: 16px;
			height: 37px;
			width: 60%;
			border-radius: 5px 0 0 5px;
		}


/*
PULLDOWN BOX
*/

		div#advance_book_search_box {
			width: auto !important;
			margin-left: 0 !important;
			border-radius: 0 0 15px 15px;
			top: -5px !important;
			font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
			z-index: 10000;
		}

		#advance_book_search_box h3 {
			font-size: 1em;
		}

		#advance_book_search_box .filter {
			background: #f00;
		}

		#advance_book_search_box .category {
			background: #0f0;
		}

		#advance_book_search_box .filter .ABS_level_filter {
			background: #0ff;
		}

		#advance_book_search_box .filter .ABS_access_type_filter {
			background: #0ff;
		}

		#advance_book_search_box .filter .ABS_language_filter {
			background: #00f;
		}

		#advance_book_search_box .category .ABS_category_filter {
			background: #ff0;
		}

		#advance_book_search_box .category {
		}

		#advance_book_search_box .category .children {
			padding-left: 20px;
			margin-top: 0;
		}

		#advance_book_search_box .category .children .ABS_category_filter {
			background: #f0f;
		}

		#advance_book_search_box .category h3 {margin-bottom: 0;padding-bottom: 0;}

		div#advance_book_search_box input[type="checkbox"] {
			vertical-align: top;
		}

		#advance_book_search_box .filter,
		#advance_book_search_box .category,
		#advance_book_search_box .filter .ABS_level_filter,
		#advance_book_search_box .filter .ABS_access_type_filter,
		#advance_book_search_box .filter .ABS_language_filter,
		#advance_book_search_box .category .ABS_category_filter,
		#advance_book_search_box .category .children .ABS_category_filter {
			background-color: transparent;
			display: inline;
		}

		#advance_book_search_box .category .children .ABS_category_filter {
			display: block;
		}

		@media all and (min-width: 750px) {
			#advance_book_search_box .category .children .ABS_category_filter {
				display: inline-block;
			}
		}


/*
 GOOGLE SEARCH
*/

		#search_content1-root {
			margin-left: -25px;
			margin-right: -25px;
			margin-top: -25px;
		}

		#hkecl-upper2 {
			background-image: url(images/ReadingCity/search_bkg02.png);
			background-repeat: repeat-x;
			margin-left: 0;
			margin-right: 0;
		}

		#hkecl-upper2 #channel-nav2 {
			padding: 25px;
		}

		/*@media all and (min-width: 750px) { */

		hkecl-columns-container2 {
			margin-left: 25px;
			margin-right: 25px;
		}

		#search_content1-upper {
		}

		#hkecl-upper2 #channel-nav2 ul {
			background-color: rgba(255, 255, 255, 0.5);
			background-image: none;
			padding-top: 5px;
		}

		#hkecl-columns-container2 {
			margin-left: 25px;
			margin-right: 25px;
		}

		#hkecl-upper2 #channel-nav2 ul li.category span {
		}

/*
ADVANCED BOOK SEARCH
*/

		.search .region.region-advance-book-search{
			margin-left: -25px;
			margin-right: -25px;
			margin-top: -20px;
		}

		.search .advance_book_search {
			background-image: url(images/ReadingCity/search_bkg02.png);
			background-repeat: repeat-x;
			margin-left: 0;
			margin-right: 0;
			padding: 40px 20px 60px;
		}

		@media all and (min-width: 750px) {
			.search .advance_book_search {
				padding: 80px 80px 60px;
			}
		}

		.search .advance_book_search div#advance_book_search_input{
			margin-top: 0px !important;
			background-color: rgba(255, 255, 255, 0.5);
			background-image: none;
			padding-top: 30px;
			min-height: 100px;
		}

		.search .layout-2nd #channel-pack {
			top: 210px;
		}

		@media all and (min-width: 750px) {
			.search .layout-2nd #channel-pack {
				top: 250px;
			}
		}

@media all and (min-width: 500px) {
	.panel-heading .hkecl-pagination {
		margin-top: 10px;
	}
}

@media all and (min-width: 600px) {
	.panel-heading .hkecl-pagination {
		margin-top: -40px;
	}
}


.layout-3rd .ui-widget {
	font-size: 1em;
}

.layout-3rd .ebook-portfolio-container .ebook-content-info a.preview-book {
	width: 98px;
	height: 51px;
	display: inline-block;
	background-image: url(images/ReadingCity/Icon_trial_reading_chi.png);
	/* Hide the text. */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	padding-bottom: 1px; /*for hover */
}

.layout-3rd .ebook-portfolio-container .ebook-content-info a.preview-book:hover {padding-bottom: 0;}


.layout-3rd .ebook-portfolio-container .ebook-content-info a.preview-book.eng {
	background-image: url(images/ReadingCity/Icon_trial_reading_eng.png);
}

/* 2020-11-30 */
.field-add-edbookshelf-text {
	font-weight: bold;
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	/* font-size: 118%; */
}


.layout-3rd .ebook-portfolio-container .ebook-content-info a.add-mybookrecord {
	width: 98px;
	height: 51px;
	display: inline-block;
	background-image: url(images/ReadingCity/Icon_addbook_record_chi.png);
	/* Hide the text. */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	padding-bottom: 1px; /*for hover */
}

.layout-3rd .ebook-portfolio-container .ebook-content-info a.add-mybookrecord:hover {padding-bottom: 0;}

.layout-3rd .ebook-portfolio-container .ebook-content-info a.add-mybookrecord.eng {
	background-image: url(images/ReadingCity/Icon_addbook_record_eng.png);
}

.layout-3rd .ebook-portfolio-container .ebook-content-info div.priceDiv {
	display: flex;
	margin-top: 20px;
	margin-bottom: 20px;
	height: 50px;
}
.layout-3rd .ebook-portfolio-container .ebook-content-info div.readBtnDiv {
	display: flex;
	width: 1px;
}

.layout-3rd .ebook-portfolio-container .ebook-content-info div.trialDiv {
	display: inline-flex;
}
.layout-3rd .ebook-portfolio-container .ebook-content-info span.teacher_resource {
	/* margin-top:10px; */
}
.layout-3rd .ebook-portfolio-container .ebook-content-info a.add_edbookshelf {
	background-color: #09699E;
    border-color: #448bcb;
    min-width: 80px;
	color: #fff;
	display: inline-flex;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-top: 10px;
}

.layout-3rd .ebook-portfolio-container .ebook-content-info a.add_edbookshelf:hover {
	opacity: 0.7;
}

.layout-3rd .ebook-portfolio-container .ebook-content-info .hkecl-eread-icon {
	width: 21px;
    height: 21px;
    display: inline-block;
    vertical-align: sub;
	background-image: url(images/ReadingCity/eRead_call-to-action-icon.png);
}

.layout-3rd .ebook-portfolio-container .ebook-content-info a.read_now {
	background-color: #ff880a;
    border-color: #ff880a;
    min-width: 80px;
	color: #fff;
	display: block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-top: 10px;
}
/*
.layout-3rd .ebook-portfolio-container .ebook-content-info a.processing {
	display:none;
	background-color: #767370;
    border-color: #767370;
    min-width: 80px;
	color: #fff;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-top: 10px;
}
*/

.layout-3rd .ebook-portfolio-container .ebook-content-info a.read_now:hover {
	background-color: #FF3000;
    border-color: #FF3000;
}

.layout-3rd .ebook-portfolio-container .ebook-content-info a.free_book {
	margin-right: 20px;
	cursor: default;
	margin-left: 20px;
	position: relative;
	display: inline-block;
	background: red;
	color: white;
	height: 2.5rem;
	width: 2.5rem;
	text-align: center;
	vertical-align: middle;
	line-height: 2.5rem;
	transform: rotate(-20deg);
	animation: beat 0.5s ease infinite alternate;
}
.layout-3rd .ebook-portfolio-container .ebook-content-info a.free_book:hover {padding-bottom: 0;}
.layout-3rd .ebook-portfolio-container .ebook-content-info a.free_book:before, .layout-3rd .ebook-portfolio-container .ebook-content-info a.free_book:after {
	content: "";
	position: absolute;
	background: inherit;
	height: inherit;
	width: inherit;
	top: 0;
	left: 0;
	z-index: -1;
	transform: rotate(30deg);
}
.layout-3rd .ebook-portfolio-container .ebook-content-info a.free_book:after {
	transform: rotate(60deg);
}
@keyframes beat {
	from {
		transform: rotate(-20deg) scale(1);
   }
	to {
		transform: rotate(-20deg) scale(1.1);
   }
}
/* Frontpage tunning */

.layout-readingcity #promotion-area .swiper-button-prev,
.layout-readingcity #promotion-area .swiper-button-next{
	display: none;
}
.layout-readingcity .hkecl-columns-container .swiper-button-prev,
.layout-readingcity .hkecl-columns-container .swiper-button-next{
	background-color: #e6e6e4;
	transform: scaleX(0.7) scaleY(1.8);
	padding-top: 10px;
	background-position: 0 10px;
	padding-bottom: 50px;
}

.layout-readingcity .hkecl-columns-container .swiper-button-next {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
	position: absolute;
	right: 0px;
}

.layout-readingcity .hkecl-columns-container .swiper-button-prev {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
	position: absolute;
	left: 0px;
}

.layout-readingcity .hkecl-columns-container .swiper-container {
}

#hkecl-upper #promotion-area .swiper-pagination-bullets {
	/*bottom: 0px !important;*/
	position: relative;
	margin-left: -3px;
	margin-right: -3px;
	margin-bottom: -3px;
	padding-top: 5px;
	background-color: #fff;
}

#hkecl-upper #promotion-area .swiper-pagination-clickable .swiper-pagination-bullet {
	margin: 0 4px;
	width: 10px;
	height: 10px;
}

#hkecl-upper #promotion-area .swiper-pagination-bullet-active {
	background: #f88650;
}

#hkecl-upper #promotion-area .swiper-container {

}

@media all and (min-width: 600px) {
	#hkecl-upper #promotion-area .swiper-container {
	}
}

#hkecl-upper #promotion-area .swiper-container::-webkit-scrollbar {
	/*display: none;*/
}



.all-book-list {
	position: relative;
}

.layout-index .all-book-list .swiper-button-prev,
.layout-index .all-book-list .swiper-button-next {

}

.layout-index .all-book-list .swiper-button-prev {
	left: -23px;
}

.layout-index .all-book-list .swiper-button-next {
	right: -23px;
}



.latest-books > article.swiper-slide,
.populars-books > article.swiper-slide,
.editor-choices > article.swiper-slide {

	border: #CBCBCB 1px solid;
}


.latest-books .book-image-container,
.populars-books .book-image-container,
.editor-choices .book-image-container {
	text-align: center;
	padding: 10px;
}

.latest-books .book-image-container a {
}

.latest-books .book-image-container a:hover,
.populars-books .book-image-container a:hover,
.editor-choices .book-image-container a:hover {
	border-bottom: none;
	padding-bottom: 0;
}

.latest-books .book-image-container img,
.populars-books .book-image-container img,
.editor-choices .book-image-container img {
	max-width: 160px;
	max-height: 160px;
}

.latest-books .article-title,
.populars-books .article-title,
.editor-choices .article-title {
	font-size: 95%;
	font-weight: normal;
	padding: 5px 10px 5px;
}

/* pad the frontpage in order to show first row of books */

.layout-index #hkecl-content {
	padding-top: 0;
}

.layout-index div#advance_book_search_input {
	margin-top: 0 !important; /*original is 48*/
}

@media all and (min-width: 650px) {
		.layout-index #hkecl-content {
			padding-top: 0;
		}

		.layout-index div#advance_book_search_input {
			margin-top: 35px !important; /*original is 48*/
		}

		.layout-index #channel-pack{
			top: 0;
			margin-top: -20px;
		}
}

@media all and (min-width: 780px) {
	.layout-index #hkecl-upper {
		min-height: auto !important;
	}
	.layout-index #hkecl-content {
		position: relative;
	}
}

@media all and (min-width: 780px) {
		.layout-index #channel-pack{

		}
}

@media all and (min-width: 800px) {
	#promotion-area-desktop .swiper-wrapper {
		height: auto !important;
	}
}

#control_div {
  position: relative;
}
#personal_info_div, #year_div {
  display: none;
}
.personal_info_value {
  font-weight: bold;
}

.show-read-more .more-text{
	display: none;
}

.dim-button {
	opacity: 35%;
	background-color: #000000 !important;
	/*border-bottom: 1px solid #fff;*/
}

.no-close .ui-dialog-titlebar .ui-dialog-titlebar-close {
	display: none;
  }