﻿@media all and (min-width: 650px) {
	#hkecl-upper {
	}
}

@media all and (min-width: 700px) {
		#hkecl-upper {
			background-image: none;
			background-color: transparent;
			background-position: 0 70px;
			background-repeat: no-repeat;
		}
}




/*Banner edit 3*/



/** banner me , reading city */

.reading-banner-set2 {padding-left: 0;padding-right: 5px;}

.reading-banner-set2 > div.reading-banner-content {
	width: 100%;
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
}

.reading-banner-set2 > div.reading-banner-content a {
	display: block;
}

.reading-banner-set2 > div.reading-banner-content a:hover {
	border-bottom: none;
	padding-bottom: 0;
}

.reading-banner-set2 > div.reading-banner-content span.headline-text,
.reading-banner-set2 > div.reading-banner-content span.sub-headline-text {
	display: block;
}

.reading-banner-set2 > div.reading-banner-content span.headline-text {
	position: absolute;
	margin-top: 0;
	color: #923189;
	margin-left: 0.5em;
	/*background-color: rgba(255, 241, 162, 0.44);*/
}

.reading-banner-set2 > div.reading-banner-content span.sub-headline-text {
	position: absolute;
	margin-top: 2.1em;
	color: #595550;
	margin-left: 0.8em;
	/*background-color: rgba(255, 241, 162, 0.44);*/
}

/*headlines size*/

.reading-banner-set2 > div.reading-banner-content span.headline-text {
	line-height: 1.2em;
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 0.5em;
}
.reading-banner-set2 > div.reading-banner-content span.sub-headline-text {
	line-height: 1.1em;
	font-size: 1.2em;
	font-weight: bold;
}

@media screen and (min-width: 465px) {
		.reading-banner-set2 > div.reading-banner-content span.headline-text {
			line-height: 2em;
			font-size: 1.5em;
			font-weight: bold;
			margin-top: 0.5em;
		}
		.reading-banner-set2 > div.reading-banner-content span.sub-headline-text {
			line-height: 2em;
			font-size: 1.4em;
			font-weight: bold;
		}
}

.reading-banner-set2 > div.reading-banner-content img {
	width: 100%;
}

.reading-banner-set2 > div.reading-banner-content img.banner-large {}
.reading-banner-set2 > div.reading-banner-content img.banner-middle {}
.reading-banner-set2 > div.reading-banner-content img.banner-small {
}

.reading-banner-set2 > div.reading-banner-content:nth-child(1) img.banner-middle,
.reading-banner-set2 > div.reading-banner-content:nth-child(1) img.banner-small,
.reading-banner-set2 > div.reading-banner-content:nth-child(2) img.banner-middle,
.reading-banner-set2 > div.reading-banner-content:nth-child(2) img.banner-small,
.reading-banner-set2 > div.reading-banner-content:nth-child(3) img.banner-middle,
.reading-banner-set2 > div.reading-banner-content:nth-child(3) img.banner-small{
	display: none;
	
}

/*
.reading-banner-set2 > div:nth-child(1) {
	background-color: #0f0;
}

.reading-banner-set2 > div:nth-child(2) {
	background-color: #0ff;
}

.reading-banner-set2 > div:nth-child(3) {
	background-color: #00f;
}
*/

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

		.reading-banner-set2 {
			padding-right: 0;
		}
		
		.reading-banner-set2 > div.reading-banner-content {
			float: left;
		}
		
		.reading-banner-set2 > div.reading-banner-content a {
			display: inline-block;
		}
		
		.reading-banner-set2 > div.reading-banner-content img {
			width: 100%;
			height: auto;
		}
		
		.reading-banner-set2 > div.reading-banner-content img.banner-large {}
		.reading-banner-set2 > div.reading-banner-content img.banner-middle {}
		.reading-banner-set2 > div.reading-banner-content img.banner-small {
			/* max-height: 104px; */
			/* width: auto; */
		}
		
		.reading-banner-set2 > div.reading-banner-content:nth-child(1) img.banner-large,
		.reading-banner-set2 > div.reading-banner-content:nth-child(2) img.banner-small,
		.reading-banner-set2 > div.reading-banner-content:nth-child(3) img.banner-small{
			display: inline
		}
		
		.reading-banner-set2 > div.reading-banner-content:nth-child(1) img.banner-middle,
		.reading-banner-set2 > div.reading-banner-content:nth-child(1) img.banner-small,
		.reading-banner-set2 > div.reading-banner-content:nth-child(2) img.banner-large,
		.reading-banner-set2 > div.reading-banner-content:nth-child(2) img.banner-middle,
		.reading-banner-set2 > div.reading-banner-content:nth-child(3) img.banner-large,
		.reading-banner-set2 > div.reading-banner-content:nth-child(3) img.banner-middle{
			display: none;
		}
		
		.reading-banner-set2 > div.reading-banner-content:nth-child(1) {
			width: calc( 66% - 5px );
			margin: 0%;
			text-align: right;
			margin-left: 5px;
		}
		
		.reading-banner-set2 > div.reading-banner-content:nth-child(2),
		.reading-banner-set2 > div.reading-banner-content:nth-child(3) {
			width: calc( 33% - 5px );
			margin-left: 5px;
		}
		
		/*headlines size*/
		
		.reading-banner-set2 > div.reading-banner-content:nth-child(1) span.headline-text {
			line-height: 2em;
			font-size: 1.5em;
			font-weight: bolder;
		}
		.reading-banner-set2 > div.reading-banner-content:nth-child(2) span.headline-text {
			line-height: 1.5em;
			font-size: 1.1em;
			font-weight: bold;
			margin-top: 0.5em;
		}
		.reading-banner-set2 > div.reading-banner-content:nth-child(3) span.headline-text {
			line-height: 1.5em;
			font-size: 1.1em;
			font-weight: bold;
			margin-top: 0.5em;
		}
		.reading-banner-set2 > div.reading-banner-content:nth-child(1) span.sub-headline-text {
			line-height: 2em;
			font-size: 1.4em;
			font-weight: bold;
		}
		.reading-banner-set2 > div.reading-banner-content:nth-child(2) span.sub-headline-text {
			line-height: 1.2em;
			font-size: 1em;
			font-weight: bolder;
			margin-top: 2.5em;
			margin-left: 0.6em;
		}
		.reading-banner-set2 > div.reading-banner-content:nth-child(3) span.sub-headline-text {
			line-height: 1.2em;
			font-size: 1em;
			font-weight: bolder;
			margin-top: 2.5em;
			margin-left: 0.6em;
		}
}

@media all and (min-width: 700px) {
	#hkecl-upper {
	
	}

	.reading-banner-set2 > div.reading-banner-content:nth-child(1) {
		margin-top: 0;
	}
}

