@charset "UTF-8";
/* CSS Document */
BODY{margin:0;padding:0;background:#EEE;font-family:Arial, Helvetica, '微軟正黑體', 'Microsoft JhengHei', sans-serif;font-size:12px;-webkit-user-select:none;-moz-user-select:none; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
A{text-decoration:none;}
IMG{border:0;}
.page{position:relative;margin:0 auto;width:640px;height:505px;overflow:hidden;}


/* Landing Page Style Starts */
body#landing_pg #slideShow {display: none;}

body#landing_pg #background.en {height: 453px; background: url(../images/landingGB_en.jpg) left bottom no-repeat;}
body#landing_pg #background.zhhk {height: 453px; background: url(../images/landingGB_zhhk.jpg) left bottom no-repeat;}
body#landing_pg #background.zhcn {height: 453px; background: url(../images/landingGB_zhcn.jpg) left bottom no-repeat;}

body#landing_pg #landingNavigation {
	display: inline-block;
	position: absolute;
	right: 10px; top: 10px;
	width: 170px; height: 34px;
	background: url(../images/splash_languageButton.png) center top no-repeat;
}
body#landing_pg #landingNavigation > DIV {margin: 8px 0 0 2px;}

body#landing_pg #landingNavigation A {display: block; float: left; padding: 0 12px; border-right: 1px #ebebeb solid; color: #FFF;}
body#landing_pg #landingNavigation A + A {border-left: none;}
body#landing_pg #landingNavigation A:last-child {border-right: none;}
body#landing_pg #landingNavigation A.selected {color: #A6CE39;}

body#landing_pg #landingContent {position: absolute; top: 135px; left: 250px; width: 350px;}
body#landing_pg h2.serviceDemo {font-size: 28px; margin: 0; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.5); font-weight:normal; line-height: 38px;}
body#landing_pg h3.businessMobileBanking {font-size: 18px; margin: 15px 0 0; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.5); font-weight:normal; line-height: 26px;}
body#landing_pg a.startBTN {
	display: block; 
	padding: 0;
	margin-top: 30px; 
	width: 115px; height: 35px; 
	font-size: 15px; font-weight: bold;
	text-align: center;
	/* text-transform: uppercase; */
	color: #fff; 
	line-height: 34px;
	text-shadow: none;
	background: url(../images/StartButton.png) left top no-repeat;
}
/* Landing Page Style Ends */




/*.splash-page{position:relative;margin:0 auto;width:640px;height:505px;overflow:hidden;}
.splash-page IMG{width:640px;height:529px;}*/
/* Icons */
/*.icon{display:block;width:20px;height:20px;background:url(icon.jpg) no-repeat;}
.icon.prev{background-position:0 0;}
.icon.next{background-position:-20px 0;}
.icon.replay{background-position:-40px 0;}
.icon.startagain{background-position:-60px 0;}*/
/*.coverIcon {width: 50px; height: 50px; margin-right: 8px; margin-bottom: -15px; display: inline-block; -webkit-border-radius: 5px; border-radius: 5px; 
 -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.7);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.7);

	background: url(../images/menu-icons.png) no-repeat,
		-webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0.0, #F0F0F0),
		color-stop(1.0, #CBCBCB)
		);
}*/
.coverIcon {
	width: 55px;
	height: 55px;
	margin-right: 12px;
	margin-bottom: -20px;
	display: inline-block;
	float: left;
	margin-top: -12px;
	position: relative;
	top: -4px;
}

.coverIcon > .menu-icon {
	display: block; 
	height: 55px; 
	width: 55px;
	position: absolute; 
	top: 0; 
	left: 0; 
	background: url(../images/menu-icons.png) no-repeat; 
}

/*#mainNav-startagain{width:20px;height:13px;}
#mainNav-prev{left:36px;}
#mainNav-prev-icon, #mainNav-startagain-icon{position:absolute;top:-1px;left:10px;}
#mainNav-next-icon,#mainNav-replay-icon{position:absolute;top:-1px;right:10px;}
.scn-container>IMG{float:left;}*/

#background{
	position:absolute;
	top: 51px;
	left: 0;
	min-width:640px;
	height: 423px;
	overflow: hidden;
	background-image: url(../images/screen_bg.jpg);
	background-position: left top;
	background-repeat: no-repeat;
}

#slideShow{
	display: block;
	position: absolute; top: 62px; left: 72px;	
	/*width: 161px; height: 210px;*/
	width: 200px; height: 355px;
	overflow: hidden;
}

#screen {
	display: block;
	height: 210px;
	position: absolute;
	
	-webkit-transition-property:left;
	-moz-transition-property:left;
	-o-transition-property:left;
	-ms-transition-property:left;
	transition-property:left;
	
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-ms-transition-duration:0.5s;
	transition-duration:0.5s;
}

#screen > img{/*width:161px;height:210px;*/ width: 200px; height: 355px;}

/*#nav-back{
	display:block;
	position:absolute;
	top:0;right:0;
	padding:3px 15px;
	background:#EEE; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.4);
	border-left:1px solid #999;border-bottom:1px solid #999;
	color:#666;text-shadow:0 1px 1px rgba(255,255,255,0.6);
	z-index:1;
}
.npNav{position:relative;width:100%;height:24px;background:url(bg-pnNav.gif) repeat-x #EEE;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.4);border-top:1px solid #CCC;z-index:1;}
.npNav P, .npNav A{color:#72BB00;font-size:13px;text-shadow:0 1px 1px rgba(255,255,255,0.6);text-align:center;line-height:1em;}
.npNav P{margin:0;padding:6px;}
.npNav A{
	display:block;
	position:absolute;
	top:3px;
	padding-top:3px;padding-bottom:3px;
	width:80px;
	cursor:pointer;
}
.npNav-prev, .npNav-index, .npNav-back{left:0;padding-left:20px;border-right:1px solid #CCC;text-align:left;}
.npNav-next, .npNav-replay{right:0;padding-right:20px;border-left:1px solid #CCC;text-align:right;}
#mainNav{position:absolute;left:0;bottom:0; display: none;}*/



/* Branding Starts */
#branding {
	display: block;
	overflow: hidden;
	clear: both;
	height: 48px;
	width: 640px;
	border-bottom: 3px #34a344 solid;
	background: white;
	position: absolute;
	top: 0;
	z-index: 400;
/*	-webkit-box-shadow: 0 2px 5px #888;
	box-shadow: 0 2px 5px #888;*/
}

#branding > .logo {
	display: block;
	width: 240px;
	height: 24px;
	background: url(../images/logo_sprite.png) -175px top no-repeat;
	position: absolute;
	top: 11px;
	left: 10px;
}

#branding > .slogan {
	display: block;
	width: 150px;
	height: 20px;
	background: url(../images/logo_sprite.png) left 7px no-repeat;
	position: absolute;
	top: 13px;
	left: 120px;
}

#branding > .slogan.en {background-position: left 7px;}
#branding > .slogan.zhhk {background-position: left -43px;}
#branding > .slogan.zhcn {background-position: left -93px;}

#branding > .ad {
	display: block;
	width: 160px;
	height: 32px;
	background: none;
	position: absolute;
	top: 8px;
	right: 10px;
}

#branding > .ad.en {background-position: right 0;}
#branding > .ad.zhhk {background-position: right -50px;}
#branding > .ad.zhcn {background-position: right -100px;}
/* Branding Ends */




.section {
	display: block; 
	overflow: hidden; 
	position: absolute; 
	top: 473px;
	width: 100%; 
	height: 31px;
	z-index: 350;
/*	-webkit-box-shadow: 0 -1px 3px rgba(0,0,0,0.3);
	box-shadow: 0 -1px 3px rgba(0,0,0,0.3);*/
}

.section a {
	display: block;
	position:absolute;
	bottom:0; 
	background: url(../images/sprite.png) right -54px no-repeat; 
	color: white;
	height: 33px;  
	vertical-align: middle; 
	text-align: center; 
	font-size: 12px;
	font-weight: normal;
	text-shadow: none;
	line-height: 12px;
}

.section a.singleLine {height: 11px; padding: 11px 0;}
.section a.doubleLine {height: 23px; padding: 5px 0;}

.section > a.current {background-position: right -103px; color: #fff; text-shadow: none; font-weight:normal;}

.section > #btn_home {width: 51px; z-index:200;}
.section > a > .home {background: url(../images/sprite.png) no-repeat scroll -120px -11px transparent; display: inline-block; height: 25px; margin-right: 8px; margin-top: 3px; width: 25px;}

#caption > table {
	position: absolute; 
	z-index: 200; 
	top: 60px; 
	right: 40px; 
	height: 402px; 
	width: 300px; 
}

#caption a, #caption a:visited {color: #0d6c29; text-decoration: underline;}

#caption > table > tbody > tr > td {
	padding: 50px 10px; 
/*	background: rgba(255,255,255,0.8);  */
	vertical-align: top; 
	font-size: 17px;
	text-align: left;
	color: #333;
	text-shadow: none; 	
}

#caption > table > tbody > tr > td > h3 {
	font-size: 24px;
	color: #0d6c29;
	margin: 25px 0;
	font-weight: normal;
}

#caption > table > tbody > tr > td > h3.longTitle {
	font-size: 20px;
}

#caption > table > tbody > tr > td > h3 > span.push {
	margin-left: 67px;
	width: 200px;
	display: block;
	/*background: #FFC;*/
}

#caption > table > tbody > tr > td > h4 {
	font-size: 18px;
	color: #0d6c29;
	margin: 25px 0;
	font-weight: normal;
}

#caption > table > tbody > tr > td > ul.nonDot {
	list-style:none;
}


#caption > table > tbody > tr > td.coverPage {margin: 0; vertical-align: middle;}

#caption > table > tbody > tr > td .coverIcon > .menu-icon.accountOverview {background-position: 0 0;}
#caption > table > tbody > tr > td .coverIcon > .menu-icon.fundTransfer {background-position: -55px 0;}
#caption > table > tbody > tr > td .coverIcon > .menu-icon.timeDeposit {background-position: -110px 0;}
#caption > table > tbody > tr > td .coverIcon > .menu-icon.authorization {background-position: 0 -55px;}
#caption > table > tbody > tr > td .coverIcon > .menu-icon.bbcLocator {background-position: -165px 0;}

#caption > table > tbody > tr > td .coverIcon > .menu-icon.accountOverview.tripleLine,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.fundTransfer.tripleLine,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.timeDeposit.tripleLine,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.authorization.tripleLine,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.bbcLocator.tripleLine {top: 26px;}

#caption > table > tbody > tr > td .coverIcon > .menu-icon.accountOverview.tripleLine.longTitle,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.fundTransfer.tripleLine.longTitle,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.timeDeposit.tripleLine.longTitle,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.authorization.tripleLine.longTitle,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.bbcLocator.tripleLine.longTitle {top: 20px;}

#caption > table > tbody > tr > td .coverIcon > .menu-icon.accountOverview.doubleLine,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.fundTransfer.doubleLine,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.timeDeposit.doubleLine,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.authorization.doubleLine,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.bbcLocator.doubleLine {top: 13px;}

#caption > table > tbody > tr > td .coverIcon > .menu-icon.accountOverview.quadruple,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.fundTransfer.quadruple,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.timeDeposit.quadruple,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.authorization.quadruple,
#caption > table > tbody > tr > td .coverIcon > .menu-icon.bbcLocator.quadruple {top: 0px;}


#caption > table > tbody > tr > td > p {/*font-weight: bold; */margin: 0 0 5px;}
#caption > table > tbody > tr > td > ol {margin: 10px 0 10px 20px; padding: 0; margin-left: 10px\9; padding-left: 25px\9;}
#caption > table > tbody > tr > td > ul {margin: 10px 0 10px 20px; padding: 0; margin-left: 10px\9; padding-left: 15px\9;}
#caption > table > tbody > tr > td > ul li {margin-bottom: 3px;}
#caption > table > tbody > tr > td > ul li > ol {margin: 5px 0 0 25px; padding: 0; margin-left: 5px\9; padding-left: 30px\9;}
#caption > table > tbody > tr > td > ul li > ol li {margin-bottom: 3px;}

#navigationContainer {display: block; width: 100%; clear: both; position: absolute; top: 234px;/* z-index: 300;*/}
#navigationContainer a {display: block;	width: 50px; height: 50px; background: url(../images/sprite.png) no-repeat;}
#navigationContainer a#previousBTN {float: left; background-position: 0 0;}
#navigationContainer a#nextBTN {float: right; background-position: -50px 0; margin-right: 0;}

#caption .tableTitle {margin-top: 20px; margin-bottom: 5px; font-size: 15px;}
#caption table.contentTable {border-spacing: 0; border-collapse: collapse; font-size: 14px;}
#caption table.contentTable > THEAD > TR > TH.model {width: 80px;}
#caption table.contentTable > THEAD > TR > TH.os {width: 80px;}
#caption table.contentTable > THEAD > TR > TH.browser {width: 80px;}
#caption table.contentTable > THEAD > TR > TH, #caption table.contentTable > TBODY > TR > TD {padding: 5px; border: 1px black solid; vertical-align: top;}

strong {font-weight: bold;}



@media all and (-webkit-min-device-pixel-ratio: 1.5) {
	
	#background{
		background-image: url(../images/screen_bg@2x.jpg);
		background-size: 640px 422px;
	}
	
	body#landing_pg #background.en {background-image: url(../images/landingGB_en@2x.jpg); background-size: 640px 453px;}
	body#landing_pg #background.zhhk {background-image: url(../images/landingGB_zhhk@2x.jpg); background-size: 640px 453px;}
	body#landing_pg #background.zhcn {background-image: url(../images/landingGB_zhcn@2x.jpg); background-size: 640px 453px;}
	
	
	#branding > .logo, #branding > .slogan, #branding > .ad {
		background-image: url(../images/logo_sprite@2x.png);
		background-size: 500px 150px;
	}
	
	body#landing_pg #landingNavigation {
		background-image: url(../images/splash_languageButton@2x.png);
		background-size: 170px 34px;
	}
	
	body#landing_pg a.startBTN {
		background-image: url(../images/StartButton@2x.png) left top no-repeat;
		background-size: 115px 35px;
	}
	
	.coverIcon > .menu-icon {
		background-image: url(../images/menu-icons@2x.png);
		background-size: 220px 110px;
	}
	
	#navigationContainer a, .section a, .section > a > .home {
		background-image: url(../images/sprite@2x.png);
		background-size: 400px 400px;
	}

}