@charset "utf-8";

/*
 * Swiper - Mobile Touch Slider CSS
 * http://www.idangero.us/sliders/swiper
 *
 * Vladimir Kharlampidi, The iDangero.us
 * http://www.idangero.us/
 * 
 * Copyright 2012, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us
 *
 * Licensed under GPL & MIT
 *
*/

/* 
CSS fixed on 2013 Dec 17
URI : http://static1.hkedcity.net/css/frontpage/idangerous.swiper.css
80	 #hkecl-upper #promotion-area .swiper-pagination	 Value Error : left attempt to find a semi-colon before the property name. add it
80	 #hkecl-upper #promotion-area .swiper-pagination	 Parse Error opacity=50)
104	 .swiper-overlay	 Parse Error opacity=80)
232	 .swiper-banner-image .swiper-logo-image	 Property moz-border-radius-topleft doesn't exist : 8px

Work around:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(enabled=false)";;
*/

/* Swiper Styles */
.swiper-container {
	visibility:hidden;
	margin:0 auto;
	position:relative;
	overflow:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	/* Fix of Webkit flickering */
	z-index:1;
}
.swiper-wrapper {
	position:relative;
	width:100%;
	-webkit-transition-property:-webkit-transform, left, top;
	-webkit-transition-duration:0s;
	-webkit-transform:translate3d(0px,0,0);
	-webkit-transition-timing-function:ease;
	
	-moz-transition-property:-moz-transform, left, top;
	-moz-transition-duration:0s;
	-moz-transform:translate3d(0px,0,0);
	-moz-transition-timing-function:ease;
	
	-o-transition-property:-o-transform, left, top;
	-o-transition-duration:0s;
	-o-transform:translate3d(0px,0,0);
	-o-transition-timing-function:ease;
	-o-transform:translate(0px,0px);
	
	-ms-transition-property:-ms-transform, left, top;
	-ms-transition-duration:0s;
	-ms-transform:translate3d(0px,0,0);
	-ms-transition-timing-function:ease;
	
	transition-property:transform, left, top;
	transition-duration:0s;
	transform:translate3d(0px,0,0);
	transition-timing-function:ease;
	
}
.swiper-slide {
	float: left;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
	-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
	-ms-touch-action: pan-x;
}

/* Specify Swiper's Size: */
.swiper-container, .swiper-slide {
}

/* hkec */
#hkecl-upper #promotion-area .swiper-pagination {height: 30px;background: #f3f3f3 url(images/bg_newsletter.png);position: absolute;border-radius: 5px;z-index: 40;padding: 2px 5px; border-left:1px solid #999999; border-right:1px solid #999999;bottom: 90px;
/*left:;*/
/*filter:alpha(opacity=50);*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-moz-opacity:0.5;
opacity:0.5;}
#hkecl-upper #promotion-area .swiper-overlay h2 {color:#369; top:0px; position:relative;margin: 0px;font-size:125%;}
body.eng #hkecl-upper #promotion-area .swiper-overlay h2 {color:#369; top:0px; position:relative;margin: 0px;font-size:110%;}
.swiper-pagination-switch {display:inline-block; width:10px; height:10px; border-radius:10px; background:#fff; 
	box-shadow: 0px 1px 2px #555 inset; margin: 0 3px; cursor: pointer;}
.swiper-active-switch {background:#008cd6;}
.swiper-pagination-bottom {position:absolute; bottom:20px; left:10px;}
.swiper-pagination-top {position:absolute; top:20px; left:20px;}

/*.swiper-content {position:absolute;}*/
.swiper-item {display:inline-block; margin-left:auto; margin-right:auto;}
.swiper-overlay {width:100%; height:100%; min-height:80px; position:relative; left:0px; z-index:30;
	background: url(images/bg_overlay.png) repeat-x; padding: 0px 5px;}
.swiper-container.swiper-banner {width:100%; height:auto; max-width:680px; max-height:400px;min-width: 320px;font-family:"Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";font-weight: 300;color: #000;}
/*.swiper-container.swiper-banner .swiper-slide {min-width:300px;}*/
.swiper-content.swiper-banner {position:absolute; min-height:160px;}
.swiper-content {height:auto;}
.swiper-banner-image {position:relative; top:0px; left:0px; z-index:20; width:100%; height:auto;}
.swiper-banner-image a, .swiper-banner-image a:hover {border-bottom:none;}
.swiper-banner-image img {width:100%; height:auto;}

.swiper-startstop {
	width:20px;
	height:10px;
	border-left:1px solid #CCC;
	margin: 0 3px 0 5px;
	cursor: pointer;
}
.swiper-startstop.pause {
	background:url(images/swiper_pause.png) 50% 50% no-repeat;
}
.swiper-startstop.play {
	background:url(images/swiper_play.png) 50% 50% no-repeat;
}
.swiper-startstop.pause:hover {
	background:#a1e9d5 url(images/swiper_pause.png) 50% 50% no-repeat;
	border-bottom:none;
}
.swiper-startstop.play:hover {
	background:#a1e9d5 url(images/swiper_play.png) 50% 50% no-repeat;
	border-bottom:none;
}

@media screen and (min-width: 700px) {
	.swiper-overlay {width:40%;top:0;opacity:0.8;
		/*filter:alpha(opacity=80);*/
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
		padding:50px 5px 5px 10px;background:#ffffff url(images/bg_overlay.png) repeat-x;position:absolute; font-size:110%;}
	#hkecl-upper #promotion-area .swiper-pagination {bottom: 10px;}
	#hkecl-upper #promotion-area .swiper-overlay h2 {font-size:175%;}
	body.eng #hkecl-upper #promotion-area .swiper-overlay h2 {font-size:150%;}
	.swiper-content.swiper-banner {max-height:320px; min-height:320px;}
	.swiper-banner-image {position:absolute; width:100%; height:100%;}
	.swiper-banner-image img {width:680px; height:320px;}
	.subject-box .swiper-content {padding-left:20px;}
}
@media screen and (min-width: 950px) {
	.swiper-overlay {width:40%;min-width:40%;padding:70px 5px 5px 10px;}
}






.swiper-container .swiper-archive {
	color:#000;
	font-size:87.5%;
	vertical-align:middle;}
.archive-wrapper {position:relative;
	width:1600px;}

.swiper-archive-image {position:relative; top:0px; left:0px; z-index:20; width:100%; height:auto;}
.swiper-archive-image img {width:100%; background:#ffffff; padding:2px;}
.swiper-archive-image a:hover { border:none;}

.swiper-content.swiper-archive { width:180px;min-height:150px;height:auto;padding:1px 5px 0 2px;display: inline-block;text-align: left;margin-top:30px;margin-right:10px;}
.swiper-slide-active .swiper-content.swiper-archive{ width:180px;min-height:180px;background:#fff;height:auto;display: inline-block;text-align: left;margin-top:0px;box-shadow: 0 8px 8px #000000;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-ms-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
}

.swiper-content.swiper-archive .swiper-archive-overlay { display:none;}
.swiper-slide-active .swiper-content.swiper-archive .swiper-archive-overlay { display:block;}
#hkecl-upper #promotion-area .swiper-archive-overlay h5 {color:#000; top:0px; position:relative;margin: 0px;font-size:87.5%;}


.archive-previous a, .archive-next a {
	width:24px;
	height:24px;
	background:#666666 url('images/btn_slider_left.png') no-repeat center;
position: absolute;
left: 5px;
top: 40px;
height: 70%;
width: 25px;
opacity: 0.9;
cursor: pointer;
z-index: 50;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-ms-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;	
}
.archive-previous a:hover, .archive-next a:hover {
	width: 50px;
	opacity: 0.6;
	border:none;
}
.archive-previous a {
	float:left;
	
}
.archive-next a {
	left: auto;
	right: 5px;
	background:#666666 url('images/btn_slider_right.png') no-repeat center;
}
.archive-close img {
	width:24px;
	height:24px;
	float:right;
	background:url('images/btn_close.png') no-repeat -2px -2px;
	}
.archive-close img:hover {
	background:url('images/btn_close_o.png') no-repeat -2px -2px;
	}
@media screen and (min-width:480px) {
	.swiper-archive-container {padding:70px 10px 10px 10px;}
}
@media screen and (min-width: 700px) {
	.swiper-archive-container {padding:60px 10px 10px 10px;}
	
	#hkecl-upper #promotion-area .swiper-archive-overlay h5 {color:#000; top:0px; position:relative;margin: 0px;font-size:100%;}
}



.swiper-wrapper-archive {background:#666666;min-height:310px;max-height:310px;padding: 10px;}
#hkecl-upper #promotion-area .swiper-pagination.inner{
position: absolute;
text-align: center;
left: 0;
bottom: 0;
width: 100%;
min-height: 40px;
height: auto;
opacity: 0.4;
border:none;
background: #ffffff;
}
.archive-title h4{color:#ffffff;margin:0 0 10px 0;}

.swiper-slide .swiper-slide-visible .swiper-slide-active {
	width:300px;
}

.swiper-get-more:hover {border-bottom:none;}
.swiper-get-more img {background:url('images/icon_swiper_all.png') no-repeat; vertical-align:middle;}
.swiper-get-more img:hover {background:url('images/icon_swiper_all_o.png') no-repeat;}


/* swiper-logo-image */
.swiper-banner-image .swiper-logo-image {right: 0px;
bottom: 0px;
-moz-opacity:0.9;
opacity:0.9;
background:#ffffff;
width: 50px;
height: 50px;
position: absolute;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-khtml-border-top-left-radius: 8px;
border-top-left-radius: 8px;
padding:5px;}
.swiper-banner-image .swiper-logo-image img{width:100%; height:100%;margin-top:0px;}