/* BASE */
@-ms-viewport{width: device-width;}
body{margin:0; padding:0; background: #f9f9f9; font-family:Arial,"新細明體",Helvetica,sans-serif; position:absolute; width:100%; height:100%;}
p,h1,h2,h3,h4,h5,h6{margin:2%;}
i,input{margin: 0%;}
h4{font-size:16px;}
h5{font-size:15px;}
p{font-size: 14px;}
a, a:hover ,a:active{text-decoration: none; }
ul,ol{padding:0 0 0 10%;}

ul li{list-style:none;}
ol[type="1"] {counter-reset: item; }
ol[type="1"]>li {display: block; position: relative;}
ol[type="1"]>li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
    font-size:0.75em;
}
ol[type="a"]{font-size:0.75em;}
em{text-decoration:italic;}
table{border-spacing:0;}
label{font-weight:bold;}
form{margin-bottom:0;}

/* LAYOUT */
#container>div{width:100%; margin:0 auto;}
#container>div>div{padding: 0.5%;}
#header{padding:1.5% 0; background:#b7274c;}
#footer p{text-align:center; font-weight:bold;}
#footer a{text-decoration: none; color:#b7274c;}
.footer-links p{font-size:12px;}

.section, .btn-small, .btn-block, .btn-wide,.prompt-moderate{border-radius: 5px;}
.section .section{border-radius: 0;}

/* MODULE */
#logo{height:50px; width:165px; background:url('../img/logo.png') no-repeat; background-size:contain; margin:0% auto;}

/* section */
.section{background:#ffffff; margin:1% 2%;}
.section:first-child{margin-top:0; padding-top:0;}
.section:last-child{margin-top:0; padding-bottom:0;}
.section .section{padding:0.5%; margin:0.5%;}

/* tagline */
.tagline{font-weight:bold; text-align:left;}

/* button */
.btn-small{background:url('../img/btn.png') 0 -2px  no-repeat; width:110px; height:25px; position:relative; margin:0 auto;}
.btn-small a,.btn-small a:hover,.btn-small a:active, .btn-small a:focus{color:#eee; text-decoration:none; font-weight: bold;}
.btn-small a:hover{color:#fff;}


.btn-block{background:#b7274c; padding:4%; margin:2%; display:inline-block; min-width:40px;}
.btn-block a{cursor: pointer;}
.btn-block a,.btn-block a:hover,.btn-block a:active, .btn-block a:focus{color:#eee; text-decoration:none; font-weight: bold; text-align:center;  vertical-align: middle;}
.btn-block a:hover{color:#fff;}

.btn-wide{padding:0 !important;}
.btn-wide a{padding:4%;  cursor:pointer;}
.btn-wide{background:#b7274c; min-height:25px; padding:0%; margin:0 auto; display:block;}
.btn-wide a,.btn-wide a:hover,.btn-wide a:active, .btn-wide a:focus{color:#eee; text-decoration:none; font-weight: bold; text-align:center; line-height:1.5;  display:block;}
.btn-wide a:hover{color:#fff;}

/* tab menu */
.tab-menu{height:45px;}
.tab-menu ul{padding:0; margin:0;}
.tab-menu ul li{padding:1% 0; float:left; text-align: center; cursor: pointer; font-weight: bold; color:white; background:#bababa;}
.tab-menu ul li.active,.tab-menu ul li:active{background:#b7274c;}
.split-half{width: 47%;height:100%; float:left; margin:0 1.25%;}
.split-one-third{width:31%;height:100%; float:left; margin:0 1%;}

/* accordion menu */
.accordion-menu>dl{padding:0; margin:0;}
.accordion-menu>dl>dt, .accordion-menu>dl>dd{padding:2%; margin:0 0 1% 0;}
.accordion-menu dt{color:white; font-weight:bold; background:#bababa; cursor:pointer;}
.accordion-menu dt.active, .accordion-menu dt:active{background:#B7274C;}
.accordion-menu dt:after{position:absolute; right:6%; margin-top:1%; font-size:12px; content:'▼'}
.accordion-menu dt.active:after {content:'▲';}


/* hero */
.hero{margin:0;}
.hero img{width:101%; margin-left:-0.5%; margin-top:-0.5%;}

/* lang switch */
.langswitch{padding:0% !important;}

/* qrblock */
.qrblock-split-half{width: 47%;height:100%; display:inline-block; margin:0 1%; vertical-align: middle}
.qrblock-img, .qr-keyword,.qr-stores{padding:1%; text-align:center; font-weight:bold;}
.qr-block h5, .qr-block p{margin-top:0px;}
.qr-keyword{margin-top:-20px;}
.qrblock-img img, .qr-keyword img,.qr-stores img{width:100%;}
.qrblock-img>img{max-width:147px;}
.qr-keyword>img{max-width: 212px;}
.qr-stores>a img{max-width: 136px;}

/* rates */
#rates-refresh{background:url('../img/btn-refresh.png') no-repeat; background-size: cover; width:24px; height:24px; margin:0px auto; cursor: pointer; float:right; margin:1%; display:inline-block;}
#rates-refresh:active{background:url('../img/btn-refresh.png') no-repeat 0px -24px;  background-size: cover;}
.rates{}
.rates:last-child{padding-bottom:0px;}
.rates-info{padding:1%; border-bottom:1px solid #eeeeee;}
.rates-canvas{width:100%; height:120px; margin-bottom:15px; }	
.rates-table ul{padding:0; margin:0;}
.rates-table table{width:100%; display:table; border-collapse: collapse;}
.rates-table td{display:table-cell; padding:2% 0;}
.rates-table thead{font-weight: bold;}
.rates-table tbody tr{display:table-row; border-bottom:1px solid #eeeeee;}
.rates-table tbody tr:nth-child(odd){background:#faf6f6;}
.rates-table-disclaimer{padding:0 1%;}
#notes-table, #tt-table{margin:1%; padding:1%;}
#notes-table thead tr:nth-child(1) td:nth-child(1){width:30%;}
#notes-table thead tr:nth-child(1) td:nth-child(2),#notes-table thead tr:nth-child(1) td:nth-child(3){width:35%;}
#tt-table thead tr:nth-child(1) td:nth-child(1){width:30%;}
#tt-table thead tr:nth-child(2) td:nth-child(2),#tt-table thead tr:nth-child(2) td:nth-child(3){width:35%;}
#tt-table thead tr:first-child td:nth-child(2),#tt-table thead tr:first-child td:nth-child(3),#tt-table thead tr:first-child td:nth-child(4){display:none;}
#tt-table thead tr:nth-child(2) td:nth-child(3),#tt-table thead tr:nth-child(2) td:nth-child(4){display:none;}
#tt-table tbody td:nth-child(4),#tt-table td:nth-child(5),#tt-table td:nth-child(6){display:none;}

/* account-binding */
#acc-bind{}
#ncc-prefix{position:absolute; margin-top:-1px;}
.ncc#row-item-user{width:67%; padding-left:13%;}

.form-row{display:inline-block; width:100%; margin:4px 0;}
.form-row>*{padding:4%;}
.form-row input{width:76%; font-size:15px; background:#f9f9f9 ; border:none;}
.form-row input:focus{background:#fff;}
.form-row input[type="checkbox"]{width:20px; height:20px; margin:4%;}

i[id^="row-icon-"]{
	height:20px;
	width:20px; 
	text-align:center;
	padding: 2%;
	margin:2%;
	border-radius: 50%;
	font-size:20px;
	vertical-align: middle;
}

#row-item-name{display:inline-block; text-align:left; margin:0%;}
.row-prompt-message{line-height:1; font-size:small; padding:2%;}
.row-agreement{padding:0 0 0 4%; font-weight:normal; font-size:small; display:inline-block; width:78%;}


/* branch */
.branch-info{padding:1%; border-bottom:1px solid #eeeeee;}
.inner-content_branch-header{display:none !important;}
.inner-content_branch-district-header {background: #B7274C; color: #fff; padding: 8px;}
.inner-content_branch-header-region{color:#b7274c; font-weight: bold;}
.inner-content_branch-header-facilities{margin-bottom:5%;}
.inner-content_branch-footer{padding: 4%;}

/* STATE */
.is-white{color:white;}
.is-red{color:#B7274c;}
.bg-red{background:#B7274C;}
.is-hidden{display:none !important;}
.is-centered{text-align:center !important;}
.is-left{text-align:left !important;}
.is-right{text-align:right !important;}
table.is-centered th,table.is-centered td{text-align:center !important;}
table.is-left th,table.is-left td{text-align:left !important;}
table.is-right th,table.is-right td{text-align:right !important;}
.is-strong{font-weight: bold !important;}
.no-bold{font-weight:normal !important;}
.no-padding{padding:0 !important;}
.no-margin{margin:0 !important;}
.thin-margin{margin:1px 0 !important;}

.clearfix {display: inline-block;}
.clearfix:after {content: " "; display: block; height: 0; clear: both; font-size: 0; visibility: hidden;}
.clearfix {display: block;}

/* XTRA */
.guide-heading{padding:2%; display:block; text-align:right; color:#b7274c;}

/* THEME - color info override */

body{background: #f9f9f9;}
p,li,span,div,h1,h2,h3,h4,h5,h6{color:#34495e ;}
th > span{color: #fff;}
a,a:hover,a:active{color:#b7274c;}

#header{background:#b7274c;}
#footer a{color:#b7274c;}

 /*section */
.section{background:#ffffff; box-shadow:0px 0px 1px #ddd;}

/* button */
.btn-small a:hover{color:#ecf0f1;}

.btn-block{background:#b7274c;}
.btn-block a,.btn-block a:hover,.btn-block a:active, .btn-block a:focus{color:{{silver}};}
.btn-block a:hover{color:#ecf0f0;}

.btn-wide{background:#b7274c;}
.btn-wide a,.btn-wide a:hover,.btn-wide a:active, .btn-wide a:focus{color:{{silver}};}
.btn-wide a:hover{color:#ecf0f1;}

/* prompt */
.prompt-moderate{background:#eeeeee;}

/* tab menu */
.tab-menu ul li{color:#ffffff; background:#bdc3c7;}
.tab-menu ul li.active,.tab-menu ul li:active{background:#b7274c;}

 /*accordion menu */
.accordion-menu dt{color:white; font-weight:bold; background:#bdc3c7;}
.accordion-menu dt.active, .accordion-menu dt:active{background:#b7274c;}

/* rates */
.rates-info{border-bottom:1px solid {{silver}};}
.rates-table tbody tr{border-bottom:1px solid {{silver}};}
.rates-table tbody tr:nth-child(odd){background:#faf6f6;}

/* account-binding */
.form-row input{background:#f9f9f9}
.form-row input:focus{background:#ffffff;}
i[id^="row-icon-"]{color: #871B00;}
i[id^="row-icon-"].icon-circle{background: #871B00; color:white;}
i[id^="row-icon-"].icon-prompt{padding:0; margin:0;}

/* branch */
.branch-info{padding:1%; border-bottom:1px solid {{silver}};}
.inner-content_branch-district-header {background: #b7274c; color: #ecf0f1; font-weight:bold;}
.inner-content_branch-header-region{color:#b7274c;}
.is-white{color:#ecf0f1;}
.is-red{color:#b7274c;}
.bg-red{background:#b7274c;}

/* Customer Suggestions */
#form-contact-us input,#form-contact-us select{-webkit-appearance: none;}

#form-contact-us select{
	width:98%;
	margin:1% 1%;
	border: none;
	background: #bdc3c7; color: white;
	position: relative;
	z-index:990;
	float:right;
}

#form-contact-us .down-arrow{
	margin:1%;
	margin-top:-10%;
	height:2%;

	clear:both;
	float:right;
	width:4%;
	
}
#form-contact-us .down-arrow:after {
    clear:both;

    font-size:12px;
    color:#ffffff;
    content:'▼';

	margin-top:-18px;
	padding:1%;

    position:absolute;
    z-index: 999;
}


#form-contact-us option:selected{color:#999;}
#form-contact-us input{width:90%; margin:1% 1%;}
#form-contact-us textarea{font-family:Arial,"a–°c’°a??e?”",Helvetica,sans-serif; width:90%; margin:1% 1%; height:150px}
#form-contact-us input[type^=radio]{width:10%; margin:2% 0;}
#form-contact-us #row-name input{width:60%;}
#form-contact-us #row-name select{width:25%;}

/* contact-us */
#contact-us table.inner-content_table-with-alt-color.inner-content_table-with-top-header td:nth-child(2){
    width:40%
}


/* XTRA */
.guide-heading{padding:2%; display:block; text-align:right; color:#b7274c;}


/* FROM CORPORATE */
/*.inner-content_section-bullet-points-tick{margin-left: 12px; margin-bottom: 25px;}*/
/*.inner-content_section-bullet-points-tick{margin-bottom: 6px; padding-left: 30px; background: url(../img/icon-bullet-tick.png) no-repeat left 2px; }*/
.inner-content_section-bullet-points-tick{margin-bottom: 5px; padding-left: 0px; }
.inner-content_table-alt-color-style-with-bullet table td{ width:49%; padding:6px 20px;}
.inner-content_table-alt-color-style-with-bullet table td a{ display:block; padding-left:15px; background:url(../img/icon-bullet-triangle.png) no-repeat left 3px;}
.inner-content_table-with-alt-color tr.odd{ background:#faf6f6;}
.inner-content_table-with-top-header { /*width:532px;*/ width:100%;  border-left:1px solid #DDDDDD; border-bottom:1px solid #DDDDDD;}
.inner-content_table-with-top-header td, .inner-content_table-with-top-header th{ padding:8px; border-top:1px solid #DDDDDD; border-right:1px solid #DDDDDD; /* some changes here */ font-size:14px;}
.inner-content_table-with-top-header th{ background:#B7274C; color:#fff; text-align:left;}
.inner-content_table-with-alt-color td table tr, .inner-content_table-with-alt-color td table td{ background:none!important; border:0!important;}
.inner-content_remark-block{ font-size:11px; /*color:#7a7a7a;*/ margin-bottom:25px;}
.inner-content_remark-block ol{ margin-left:15px; list-style-type:decimal; list-style-position:outside;}
.inner-content_remark-block ol ol { margin:0 0 5px 18px;}
.inner-content_remark-block ol ol.inner-content_remark-block-lower-roman{ list-style-type:lower-roman;}
.inner-content_remark-block ol ol.inner-content_remark-block-lower-alpha{ list-style-type:lower-alpha;}
.inner-content_remark-block .inner-content_table-with-left-header{ margin-bottom:5px;}
.inner-content_remark-block .inner-content_table-with-left-header tr.odd td{ background:#faf6f6;}
.inner-content_branch-header-facilities span{ width:23px; height:24px;}
.inner-content_branch-list li div span {display: inline-block;}
.inner-content_branch-list li div span.inner-content_branch-hide-icon{ display:none;}
.branch-location-icon{ padding-right:3px;}
.inner-content_branch-tel-icon{ display:inline-block; padding-left:20px; background:url(../img/icon-branch-tel.png) no-repeat left top; margin-bottom:5px; font-size:12px;}
.inner-content_branch-fax-icon{ display:inline-block; padding-left:20px; background:url(../img/icon-branch-fax.png) no-repeat left 2px; font-size:12px;}
.inner-content_branch-atm-icon{ background:url(../img/icon-atm.png) no-repeat left top;}
.inner-content_branch-atm-with-rmb-withdrawal-icon{ background:url(../img/icon-atm-rmb.png) no-repeat left top;}
.inner-content_branch-sunflower-wealth-management-centre-icon{ background:url(../img/icon-sunflower-wealth-management-centre.png) no-repeat left top;}
.inner-content_branch-sunflower-investment-services-zone-icon{ background:url(../img/icon-sunflower-investment-services-zone.png) no-repeat left top;}
.inner-content_branch-safe-deposit-box-icon{ background:url(../img/icon-safe-deposit-box.png) no-repeat left top;}
.inner-content_branch-securities-trading-icon{ background:url(../img/icon-securities-trading.png) no-repeat left top;}
.inner-content_branch-money-exchange-icon{ background:url(../img/icon-money-exchange.png) no-repeat left top;}
.inner-content_branch-reservation-of-foreign-currency-notes-icon{ background:url(../img/icon-reservation-of-foreign-currency-notes.png) no-repeat left top;}
.inner-content_branch-atm-chq{ background:url(../img/icon-atm-chq.png) no-repeat left top;}
.inner-content_branch-atm-csh{ background:url(../img/icon-atm-csh.png) no-repeat left top;}
.inner-content_branch-atm-vtm{ background:url(../img/icon-atm-vtm.png) no-repeat left top;}
.inner-content_branch-mec{ background:url(../img/icon-branch-mec.png) no-repeat left top;}
.inner-content_branch-wheelchair {
    background: url(../img/icon-Wheelchair-ATM.png) no-repeat left top;
}
.inner-content_branch-listening {
    background: url(../img/icon-assistive-listening-system.png) no-repeat left top;
}
.inner-content_branch-free-access {
    background: url(../img/icon-barrier-free-access.png) no-repeat left top;
}
.inner-content_branch-audio-lead-through {
    background: url(../img/icon-vioce-navigation.png) no-repeat left top;
}
.inner-content_branch-mailcode-icon { background: url(../img/icon-branch-zipcode.png) no-repeat scroll left 2px transparent; display:block; font-size: 12px; padding-left: 20px;}
.inner-content_branch-footer{ margin-top:10px; font-size:11px;}
.inner-content_branch-footer li{ float:left; width:100%; margin-bottom:0px; border:0; padding:0; }
.inner-content_branch-footer li div{ float:left; clear:both; margin-right:5px; min-height:24px; padding-left:28px; background-position:left -4px;}
.inner-content_remark-block-title{margin:2%;}


.wrap{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.flex{
	display: flex;
}