/* Font embed
----------------------------------------------------------------------------------------------------*/
@font-face {
  font-family: 'Lato';
  src:  url('/common/font/Lato-Regular.woff2') format('woff2'),
        url('/common/font/Lato-Regular.woff') format('woff'),
        url('/common/font/Lato-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src:  url('/common/font/Lato-Bold.woff2') format('woff2'),
        url('/common/font/Lato-Bold.woff') format('woff'),
        url('/common/font/Lato-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'NotoSan';
  src:  url('/common/font/NotoSans-Regular.woff2') format('woff2'),
        url('/common/font/NotoSans-Regular.woff') format('woff'),
        url('/common/font/NotoSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/*  Reset
----------------------------------------------------------------------------------------------------*/
* { margin:0; padding:0; border:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
body{
	font-size:14px;
	background:#fff url(/common/images/bgContent.jpg) repeat left top;
	font-weight:normal;
	color:#575757;
	font-family: "Lato", "Microsoft JhengHei", "微軟正黑體", Verdana, Arial, PMingLiU, sans-serif;
	min-width:1180px;
}

html, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; }
table { width:100%; border-collapse:collapse; border-spacing:0; }
table, th, td { border:0; margin: 0; padding: 0;}
img { border: 0 none; vertical-align: top; width:100%; }
/*ul { list-style-type:none;}  CMS issue */
li { list-style-type:inherit; }
button { cursor: pointer; }
a, a span{-webkit-transition:color,border 0.2s; /* Safari */  transition:color,border 0.2s; -ms-transition:color,border 0.2s;}

/* for Firefox */
a, a:link { text-decoration: none; color:#575757; }
a:hover {color:#0b2653;}
.fixed:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
.fixed { display: block; min-height: 1%; }
_html .fixed { height: 1%; }
.clear { display: block!important; float: none!important; clear: both; overflow: hidden; width: auto!important; height: 0!important; margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0; }
.fl, .fr { display: inline; float: left; }
.fr { float: right; }
h1.hidden{position: absolute; left:-9999px;}
.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
.noMargin { margin: 0 !important; }
.hidden { display: none; }

/* `Grid
----------------------------------------------------------------------------------------------------*/

.wrap {
	width:1180px;
	position:relative;
	margin:0 auto;
	padding:0 20px;
}
#header .wrap:after{clear: both;display: block; content:""; }

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
	float: left;
	margin-right: 2.7118644%;
}

.col1 { width: 5.8474576%; }
.col2 { width: 14.4067796%; }
.col3 { width: 22.9661016%; }
.col4 { width: 31.5254236%; }
.col5 { width: 40.0847456%; }
.col6 { width: 48.6440676%; }
.col7 { width: 57.2033896%; }
.col8 { width: 65.7627116%; }
.col9 { width: 74.3220336%; }
.col10 { width: 82.8813556%; }
.col11 { width: 91.4406776%; }
.col12 { width: 99.9999996%; margin-right: 0; }

.last {
	margin-right: 0; 
}

.push0 {margin-left:0%;}
.push1 {margin-left:8.559322%;}
.push2 {margin-left:17.118644%;}
.push3 {margin-left:25.677966%;}
.push4 {margin-left:34.237288%;}
.push5 {margin-left:42.79661%;}
.push6 {margin-left:51.355932%;}
.push7 {margin-left:59.915254%;}
.push8 {margin-left:68.474576%;}
.push9 {margin-left:77.033898%;}
.push10 {margin-left:85.59322%;}
.push11 {margin-left:94.152542%;}

.pull0 {margin-right:0%;}
.pull1 {margin-right:8.559322%;}
.pull2 {margin-right:17.118644%;}
.pull3 {margin-right:25.677966%;}
.pull4 {margin-right:34.237288%;}
.pull5 {margin-right:42.79661%;}
.pull6 {margin-right:51.355932%;}
.pull7 {margin-right:59.915254%;}
.pull8 {margin-right:68.474576%;}
.pull9 {margin-right:77.033898%;}
.pull10 {margin-right:85.59322%;}
.pull11 {margin-right:94.152542%;}


.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img  {
	width: 100%;
	height: auto;
	display: block;
}
.col12.center img{float: none; margin:0 auto;}


/* Common
----------------------------------------------------------------------------------------------------*/
#header { width:100%; padding: 20px 0 0 0; background-color: #fff; z-index: 101; position: relative;}






/* Menu / nav 
*************************************************************************/
#navigation{font-size:16px;position:relative; clear: both; text-align: center; width: 100%; height: 62px; background-color: #f2f2f2; margin-top: 11px;}
#navigation > .mainMenu ul { display:none; position:absolute; background-color:white; left:-30px; z-index:10; min-width:330px; padding: 20px 30px;  }
#navigation > .mainMenu ul li { clear:both;width:100%; text-align: left;   margin-bottom: 15px;}
#navigation > .mainMenu ul li a{padding-left: 15px; position: relative; font-size: 16px; display: inline-block; width:100%; }
#navigation > .mainMenu ul li a:before {position: absolute; left: 0; top: 6px;  content:"";	display: block;	width: 0;	height: 0;	border-top: 4px solid transparent;	border-left: 7px solid #575757;	border-bottom: 4px solid transparent;}
#navigation > .mainMenu ul li a:hover { color:#bc2815;}
#navigation > .mainMenu ul li a:hover:before{border-left:7px solid #bc2815; }
#navigation > .mainMenu li:hover > ul, #navigation > .mainMenu li:focus > ul{ display:block;}
#navigation > .mainMenu li:last-child ul{left: auto; right: -70px;}
.corporate #navigation > .mainMenu li:last-child ul { right: 0; left: -30px; }
#navigation > .mainMenu{display: none;}



.logo{width: 270px;	height: 49px; text-indent: -9999px;	display: block;	background: url(/common/images/logo.jpg) no-repeat left center;	float: left; background-size: contain; position: relative; top: -8px;}

a.btn{font-size: 1.143em; min-width:120px; height: 38px; display: inline-block; line-height:35px; border: 1px solid #bc2815; padding:0 23px; color: #bc2815; -webkit-transition:background-color 0.2s; /* Safari */  transition:background-color 0.2s; -ms-transition:background-color 0.2s;}
a.btn:hover {background-color:rgba(255,141,42,0.3); border:1px solid #FF8B28 !important;  }
a.btn:disabled {border:1px solid #BFBFBF !important; color: #BFBFBF !important; cursor: default !important; }
input.btn{background-color: #ffffff; font-size: 1.143em; min-width:120px; height: 38px; display: inline-block; line-height:35px; border: 1px solid #bc2815; padding:0 23px; color: #bc2815; -webkit-transition:background-color 0.2s; /* Safari */  transition:background-color 0.2s; -ms-transition:background-color 0.2s;}
input.btn:hover {background-color:rgba(255,141,42,0.3); border:1px solid #FF8B28 !important;  }
input.btn:disabled {border:1px solid #BFBFBF !important; color: #BFBFBF !important; cursor: default !important; }

.business a.btn{background-color: #ffffff; color: #fff; border:1px solid #2b7683;}
.business a.btn:hover{background-color: #20606c; border: 1px solid #20606c !important; }
.business input.btn{background-color: #ffffff; color: #fff; border:1px solid #2b7683;}
.business input.btn:hover{background-color: #20606c; border: 1px solid #20606c !important; }

.corporate a.btn{background-color: #ffffff; color: #087962; border:1px solid #087962;}
.corporate a.btn:hover{background-color: rgba(8,121,98,0.3); border: 1px solid #087962 !important; }
.corporate input.btn{background-color: #ffffff; color: #087962; border:1px solid #087962;}
.corporate input.btn:hover{background-color: rgba(8,121,98,0.3); border: 1px solid #087962 !important; }

.topNavMenu{float: right;margin-top: 8px;}
.topNavMenu li{height: 20px; line-height: 20px; font-size: 16px;}
.topNavMenu > li.sectionMenuWrap{ border-left:none; }
.topNavMenu > li{ border-left:1px solid #d7d7d7;border-right:1px solid #f3f3f2;}
.topNavMenu > li:otherNavWrap{ border-right:none }
.topNavMenu > li.carrerWrap{font-size: 16px; padding:0 25px;}
.topNavMenu li{	float: left;list-style:none;}

.sectionMenu{padding-right: 25px;}
.sectionMenu li{position: relative;}
.sectionMenu li a.active:before{ left:50%; margin-left: -7px; bottom:-32px;position:absolute; content:""; display:block; width: 0;  height: 0;  border-left: 7px solid transparent;  border-right: 7px solid transparent;  border-bottom: 14px solid #f2f2f2;}
.sectionMenu li a{font-size: 18px;}
.sectionMenu li:nth-child(2) a{margin:0 48px;}
.sectionMenu li:nth-child(1) a:hover, .sectionMenu li:nth-child(1) a.active{color: #d90d0d;}
.sectionMenu li:nth-child(2) a:hover, .sectionMenu li:nth-child(2) a.active{color: #115eb2;}
.sectionMenu li:nth-child(3) a:hover, .sectionMenu li:nth-child(3) a.active{color: #087962;} 
.sectionMenu li:nth-child(1) a.active{color: #d90d0d; font-weight: bold;}
.sectionMenu li:nth-child(2) a.active{color: #115eb2; font-weight: bold;}
.sectionMenu li:nth-child(3) a.active{color: #087962; font-weight: bold;} 

.topNavMenu li.othersNavWrap{border-right: none;}
.othersNav {padding-left:25px;}
.othersNav > li:nth-child(1){margin-right: 43px;}
.othersNav > li:nth-child(2){margin-right: 35px;}
.othersNav a.btnSearch{position:absolute; left:0; top:0;  z-index:99; width: 20px; height: 19px; display:block; background:url(/common/images/iconSearch.png) no-repeat center center; text-indent: -99999px;}
.othersNav input.btnSearch{position:absolute; outline: none; cursor: pointer; right:15px; top:12px;  z-index:101; width: 20px; height: 19px; display:block; background:url(/common/images/iconSearch.png) no-repeat center center; text-indent: -99999px;}
.othersNav > li.fontsizeWrap a.fontsize-a{font-size: 14px;}
.othersNav > li.fontsizeWrap a.active{color: #000;}
.othersNav > li.fontsizeWrap a.fontsize-b{margin:0 7px; font-size: 16px;}
.othersNav > li.fontsizeWrap a.fontsize-c{font-size: 18px;}
.othersNav > li.fontsizeWrap a img { width: auto; vertical-align: inherit; opacity: 0.8; }
.othersNav > li.fontsizeWrap a.active img { opacity: 1; }

a.selectedLang{position: relative;display: block; min-height: 11px; padding-right: 30px; font-size: 16px;}
a.selectedLang:after, a.selectedLang:before {width: 12px; height: 7px;border-left: 1px solid #bdbdbd;content: "";position: absolute;pointer-events: none;top: 7px;}
a.selectedLang:after {transform: skew(-45deg); -webkit-transform: skew(-45deg); -ms-transform: skew(-45deg);	right:0px;}
a.selectedLang:before {transform: skew(-45deg); -webkit-transform: skew(45deg); -ms-transform: skew(45deg);   right: 6px;}

.langsListWrap{position: relative; z-index: 99;}
.langsList{padding:0 10px 0 10px; background:#fff; position: absolute; top: 25px; left:-10px; display: none; width: 66px;}
.langsList li{display: block;  font-size: 16px;}
.langsList li:last-child{margin-left: 8px;}
.langsList li a{font-size: 15px;}

.mainMenu{ display: none; }
.mainMenu > li { display:inline-block;  position:relative; margin:0 26px; font-size: 16px; }
.mainMenu > li > a{  display:block; font-size: 16px; height: 62px; line-height: 62px; width: 100%;}
.mainMenu > li > a > span{  display:inline-block; font-size: 16px; height: 62px; line-height: 62px; color:#575757;}
html[lang="zh-hk"] .mainMenu > li > a > span { font-weight: bold; }
html[lang="zh-cn"] .mainMenu > li > a > span { font-weight: bold; }
.mainMenu > li > a:hover span{color: #d90d0d; }
.mainMenu li > ul li{list-style-type: none;}
.business .mainMenu > li > a:hover span{color: #115eb2; }
.business #navigation > .mainMenu ul li a:hover{color: #115eb2;}
.business #navigation > .mainMenu ul li a:hover:before{border-left: 7px solid #115eb2}
.corporate .mainMenu > li > a:hover span{color: #087962; }
.corporate #navigation > .mainMenu ul li a:hover{color: #087962;}
.corporate #navigation > .mainMenu ul li a:hover:before{border-left: 7px solid #087962}
body.consumer #navigation > .mainMenu.consumer{display: block;}
body.business #navigation > .mainMenu.business{display: block;}
body.corporate #navigation > .mainMenu.corporate{display: block;}

.consumer .mainMenu li.active > a > span{border-bottom: 3px solid #d90d0d; color: #d90d0d; font-weight: bold}

.business .mainMenu li.active > a > span{border-bottom: 3px solid #115eb2; color: #115eb2; font-weight: bold;}

.corporate .mainMenu li.active > a > span{border-bottom: 3px solid #087962; color: #087962; font-weight: bold;}

.mobileMenuBtn {z-index:101; display:none; position:absolute; right:12px; top:4px; width:20px; height:17px; background:#fff url(/common/images/bgMenuBtn.png) no-repeat center center; background-size:cover !important; overflow:hidden; text-indent: 999px; line-height:200%; }
.mobileMenuBtn span{ display: none; }
.mobileMenuMask { display:none; position:fixed; background-color:black; opacity:0.7; width:100%; height:100%; z-index:100; top:0; left:0;}
.mobileMenu {display:none; position:absolute; width:50%; z-index:110; right:0; top:0; padding-top:50px;}
.mobileMenu ul.mainMenu {display:block; padding-top:0; background-color: #fff; overflow: hidden;}
.mobileMenu ul.mainMenu li {width:100%; float:left; }
.mobileMenu ul.mainMenu li a {color:#fff; padding:15px; }
.mobileMenu ul.mainMenu li a:hover {background:#333; }
.mobileMenu ul.mainMenu ul {display:none; padding-top: 15px; }
.mobileMenu ul.mainMenu ul li a {padding-left:20px; color:#eee; font-size:0.95em; background:#111;}
.mobileMenu .topNavMenu{background-color: #fff;}
.mobileMenu ul.mainMenu{border-top: 1px solid #efefef; clear: both;}
.mobileMenu ul.mainMenu li{border-color: #efefef; line-height: 20px; }
.mobileMenu ul.mainMenu li a{color:#575757; line-height: 29px;font-size: 22px;display: inline-block; padding: 0 0 0 30px;}
.mobileMenu ul.mainMenu > li > a:after, .mobileMenu ul.mainMenu > li > a:before{width: 12px; height: 13px;border-left: 1px solid #787878;content: "";position: absolute;pointer-events: none;top: 30px;}
.mobileMenu ul.mainMenu > li > a:after{transform: skew(-45deg); -webkit-transform: skew(-45deg); -ms-transform: skew(-45deg); right: 30px;}
.mobileMenu ul.mainMenu > li.active > a:before{transform: skew(45deg); -webkit-transform: skew(45deg); -ms-transform: skew(45deg); right: 30px; top: 25px;}
.mobileMenu ul.mainMenu > li.active > a:after{top: 25px;}
.mobileMenu ul.mainMenu > li > a:before{transform: skew(227deg); -webkit-transform: skew(227deg); -ms-transform: skew(227deg); right: 30px; top: 17px;}
.mobileMenu ul.mainMenu li a > span{font-size: 22px; height: 62px;}
.mobileMenu ul.mainMenu li:hover, .mobileMenu ul.mainMenu li.active{background-color: #f2f2f2;}
.mobileMenu ul.mainMenu li a:hover{background:none;}
.mobileMenu ul.mainMenu li.active > a{color: #bc2815}
.mobileMenu ul.mainMenu ul{background:#e4e4e4; overflow: hidden;}
.mobileMenu ul.mainMenu ul li{padding-left: 30px; margin-bottom: 22px;}
.mobileMenu ul.mainMenu ul li a{background:none; font-size: 22px; color: #575757; position: relative;}
.mobileMenu ul.mainMenu ul li a:before {position: absolute; left: 0; top:9px; content:"";  display: block; width: 0; height: 0;  border-top: 6px solid transparent;  border-left: 9px solid #575757; border-bottom: 6px solid transparent;}
.mobileMenu ul.mainMenu ul li a:hover:before{border-left: 9px solid #c3500b;}
.mobileMenu ul.mainMenu ul li a:hover{color: #c3500b; }
.mobileMenu ul.mainMenu ul li:hover{background:none;}
.mobileMenu ul.mainMenu > li.cuurent > a:before{right: 29px;}
.mobileMenu ul.mainMenu > li > a:after{right: 17px;}
.mobileMenu ul.mainMenu > li > a:before{right: 17px;}
.mobileMenu ul.mainMenu > li > a.noSub:after, .mobileMenu ul.mainMenu > li > a.noSub:before { display: none; }

.leftMenu {  list-style: none; }
.leftMenu li a {   background-color:#ffffff;   display: block;  padding: 18px 20px;   color: #333;   font-size: 1.067em;   font-weight: bold; }
.leftMenu li a:hover { background-color:#f6f6f6; color: #d90d0d; }
.business .leftMenu li a:hover { background-color:#eeeeee; color: #115eb2; }
.corporate .leftMenu li a:hover { background-color:#eeeeee; color: #087962; }
.leftMenu li a.active { background-color:#d90d0d; color: #ffffff; border-bottom: 3px solid #feb914; }
.leftMenu li a.active.haveSub{ background: #d90d0d url(/common/images/arrowRight_white.png) no-repeat 94% 22px !important; color: #fff; }
.business .leftMenu li a.active { background-color:#115eb2; color: #ffffff; border-bottom: 3px solid #feb914; }
.business .leftMenu li a.active.haveSub{ background: #115eb2 url(/common/images/arrowRight_white.png) no-repeat 94% 22px !important; color: #fff; }
.corporate .leftMenu li a.active { background-color:#087962; color: #ffffff; border-bottom: 3px solid #feb914; }
.corporate .leftMenu li a.active.haveSub{ background: #087962 url(/common/images/arrowRight_white.png) no-repeat 94% 22px !important; color: #fff; }
.leftMenu li ul { list-style: none; }
.leftMenu li ul li a { background-color: #eeeeee; }
.leftMenu li ul li a.active { background-color: #f6f6f6; color: #d90d0d; border-bottom: 0; }
.leftMenu .submenu { display: none; }
.leftMenu .submenu li > a { padding-left: 35px; }
.leftMenu li a.haveSub.open {  background:#ffffff url(/common/images/arrowDown_black.png) no-repeat 94% 24px !important;  color: #d90d0d;}
.leftMenu li a.active.haveSub.open {  background:#d90d0d url(/common/images/arrowDown_white.png) no-repeat 94% 24px !important;  color: #ffffff;border-bottom: 3px solid #feb914;}
.business .leftMenu li a.haveSub.open {  background:#ffffff url(/common/images/arrowDown_black.png) no-repeat 94% 24px !important;  color: #115eb2;}
.business .leftMenu li a.active.haveSub.open {  background:#115eb2 url(/common/images/arrowDown_white.png) no-repeat 94% 24px !important;  color: #ffffff;border-bottom: 3px solid #feb914;}
.corporate .leftMenu li a.haveSub.open {  background:#ffffff url(/common/images/arrowDown_black.png) no-repeat 94% 24px !important;  color: #087962;}
.corporate .leftMenu li a.active.haveSub.open {  background:#087962 url(/common/images/arrowDown_white.png) no-repeat 94% 24px !important;  color: #ffffff;border-bottom: 3px solid #feb914;}
.leftMenu li a.haveSub {  background: #ffffff url(/common/images/arrowRight_black.png) no-repeat 94% 22px;}

a.mmCloseBtn {display:block; position:absolute; top:2px; right:12px; width:20px; height:20px; background-size:cover !important; background:#fff url(/common/images/closeBtn.png) no-repeat; cursor:pointer;z-index:120; overflow:hidden; text-indent: 999px; line-height:200%;}


.photoFancyContainer {  padding:5px; }
.photoFancyContainer img {  width:auto; height:auto; max-height:600px; max-width:900px; }

.socialShare{  position: absolute;right: 30px; top: -30px;}
.socialShare a{float: left; text-indent: -9999px;}
.socialShare .iconWhatapp{display: none; width: 22px; height: 22px; background:url(/common/images/iconWhatapp.png) no-repeat center center;}
.socialShare .iconFacebook{margin-left:15px;width: 65px;height: 22px;display: inline-block;background: url(/common/images/iconFacebook.png) no-repeat center left;text-indent: 0;padding-left: 26px;float: none;}

/* Footer
*************************************************************************/
footer .consumerColor,  .consumerColor:hover{color: #d90d0d  !important}
footer .businessColor, .businessColor:hover{color: #115eb2 !important;}
footer .corporateColor, .corporateColor:hover{color: #087962  !important}
footer span.title{font-size: 14px; margin-bottom: 20px; display: block;}
footer img{width: auto;}
footer{position:relative; clear: both; background-color:#f2f0ee; background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto !important; padding-bottom: 110px;}
footer .wrap.bottom{padding-top: 25px;}
footer.mainMenu { width:100%;}
footer .topFooterWrap{  border-bottom: 3px solid #feb914;padding:30px 0 34px 0; overflow: hidden;}
footer .footerCol{float: left;}
footer .footerCol:nth-child(1){width: 240px;}
footer .footerCol:nth-child(2){width: 240px;}
footer .footerCol:nth-child(3){width: 330px;}
footer .footerCol:nth-child(4){width: 330px;}
footer .footerCol:nth-child(3) .sitemap{margin-bottom: 40px;}
footer ul li{list-style-type: none}
footer .rightCredit{float: right; display: flex; align-items: center;gap: 10px 20px;flex-wrap:wrap;justify-content:flex-end;}
footer .rightCredit > img:first-child{ width: 150px;}
footer .rightCredit > img{ width: 100px;}
/* footer .rightCredit img{margin-left: 47px;} */
footer .rightCredit a img{ width: 90px;}
footer .sitemap li{margin-bottom: 12px; font-size: 14px;}
footer .sitemap li a{font-size: 14px;}
footer .helpLink{margin-bottom: 20px; overflow: hidden;}
footer .helpLink li{width: 50%; float: left; height: 25px; line-height: 25px; margin-bottom: 12px; text-align: left;}
footer .helpLink li a{padding-left: 40px; display: block;height:25px; font-size: 13px;}
footer .helpLink li a.iconContact{background:url(/common/images/iconFooterContact.png) no-repeat left center; background-size:23px 24px;}
footer .helpLink li a.iconLivechat{background:url(/common/images/iconFooterWechat.png) no-repeat left center; background-size:27px 23px;}
footer .helpLink li a.iconCareer{background:url(/common/images/iconFooterCareer.png) no-repeat left center; background-size:25px 17px;}
footer .helpLink li a.iconSitemap{background:url(/common/images/iconFooterSitemap.png) no-repeat left 2px center; background-size:22px 21px;}
footer .helpLink li a.iconFaq{background:url(/common/images/iconFooterFAQ.png) no-repeat left 1px center; background-size:24px 24px;}
footer .helpLink li a.iconFacebookPage{background:url(/common/images/iconFacebookPage.png) no-repeat left 1px center; background-size:23px 22px;}
footer .helpLink li a.iconLostCard{background:url(/common/images/iconFooterLost.png) no-repeat left 1px center; background-size:24px 21px;}
footer .helpLink li a.iconSecurity{background:url(/common/images/iconFooterLock.png) no-repeat left 1px center; background-size:20px 22px;}
/* footer .socialMedia{overflow: hidden;} */
footer .socialMedia li{width: 50%; float: left; height: 25px; line-height: 25px; margin-bottom: 12px; text-align: left;}
footer .socialMedia li a{padding-left: 40px; display: block;height:25px; font-size: 13px;}
footer .socialMedia li a.iconFacebookPage{background:url(/common/images/footerIconFacebook.png) no-repeat left 1px center; background-size:25px 25px;}
footer .socialMedia li a.iconInstagram{background:url(/common/images/footerIconInstagram.png) no-repeat left 1px center; background-size:25px 25px;}
footer .socialMedia li a.iconYoutube{background:url(/common/images/footerIconYoutube.svg) no-repeat left 1px center; background-size:25px 25px;}
footer .socialMedia li a.iconWhatsapp{background:url(/common/images/icon_footer_whatsapp.svg) no-repeat left 1px center; background-size:25px 25px;}
footer .tel{font-size: 18px; font-weight: bold;}
footer .footerCol .hotlineWrap p{margin-top:20px; margin-bottom: 12px; font-size: 14px;}
/*footer .footerCol .hotlineWrap p a.iconLostCard{background:url(/common/images/iconFooterLost.png) no-repeat left 1px center; background-size:24px 21px;padding-left:40px; line-height: 25px; height: 25px; display: block;} */
/* footer .footerCol .hotlineWrap p:last-child{margin-bottom: 0;} */
footer .wrap.bottom{color: #333; font-size: 13px;}
footer .wrap.bottom p{padding-top: 15px; display: inline-block;}
footer .wrap.bottom p a{ color:#333; margin-right:12px; padding-right: 12px; border-right: 1px solid #575757; font-size: 13px; display: inline-block; line-height: 13px; }
footer .wrap.bottom .termsWrap a:last-child{border-right: none;}
footer .downloadApp{width: 279px;background:url(/common/images/appIcon.png) no-repeat left top; padding-left:65px; text-align:left; background-size: 55px 55px; overflow: hidden }
footer .downloadApp a{float: left; width:100px; margin: 0 10px 0 0; }
footer .downloadApp p{font-size: 14px; margin-bottom: 3px;}
footer .downloadApp a:last-child{margin-right: 0;}
footer .downloadApp a img{max-width:100%;}
footer .downloadApp img{width: 100%;}
footer .downloadApp .badge li{margin: 0 5px 5px 0; text-align: center; display: inline-block;}
footer .downloadApp .badge li img{max-height: 30px; width: auto;}
footer  .termsWrap{padding-top: 0 !important; border-top: none !important;}

footer .btnToTop{ text-indent:-9999px; z-index:999; position:fixed; right:30px; bottom:20px; width: 30px; height: 30px; display: none; border-radius: 50%; background-color: rgba(211,116,6,1);}
footer .btnToTop:before,  footer .btnToTop:after{content:""; width: 12px; height: 7px;  border-left: 1px solid #f8e8d6;  position: absolute; pointer-events: none; top: 11px;}
footer .btnToTop:before {transform: skew(45deg); -webkit-transform: skew(45deg); -ms-transform:skew(45deg); right: 0;}
footer .btnToTop:after{transform: skew(-45deg); -webkit-transform: skew(-45deg); -ms-transform:skew(-45deg); left:11px;}

footer .btnBackPage{ text-indent:-9999px; z-index:999; position:fixed; right:70px; bottom:20px; width: 30px; height: 30px; display: none; border-radius: 50%; background-color: rgba(211,116,6,1);}
footer .btnBackPage:before,  footer .btnBackPage:after{content:"";width: 14px;height: 6px;border-left: 1px solid #ffffff;position: absolute;pointer-events: none;top: 11px;}
footer .btnBackPage:before {transform: skew(125deg); -webkit-transform: skew(125deg);-ms-transform:skew(125deg);right: 2px;top: 9px;}
footer .btnBackPage:after{transform: skew(-125deg); -webkit-transform: skew(-125deg);-ms-transform:skew(-125deg);left: 13px;top: 15px;}
.searchWrap{position: relative; width: 20px; height: 19px; position: relative;}
.searchWrap .searchInput{ width:180px;position: absolute; top:-12px; left:-145px; background-color: #f2f2f2; height: 43px; line-height: 43px; padding: 0 10px; z-index: 100;}
.searchWrap .searchInput.open{display: block}
.searchWrap input[type=text]{height: 40px; width:130px; padding: 0; line-height: 28px; font-size: 16px; margin: 1px 0; display: block; background:#f2f2f2;}
.searchWrap input[type=button]{ float:right; border:none; width: 20px;height: 19px;display: block;  background: url(/common/images/iconSearch.png) no-repeat center center; text-indent: -99999px;}
.searchInput{display: none}
.searchWrap input[type=text]:focus { outline: 0; }
.searchWrap .searchInput .searchBoxLabel { position: absolute; top: -9999px; }

/* .contentArea (for CMS content)
----------------------------------------------------------------------------------------------------*/
.contentArea h2 {padding:0 0 20px 0; }
.contentArea h3 {padding:0 0 10px 0; }
.contentArea p {padding-bottom:10px; line-height:130%; clear: both;}

.contentArea img {width:auto; float:left; margin:0 15px 5px 0;  }
.contentArea img.imgRight { float:right; margin:0 0 5px 15px; }
.contentArea .center img{float: none; margin:0 auto;}

.contentArea ul { clear:both; padding:0 0 20px 18px;   }
.contentArea ul li{ list-style-type:disc; list-style-position:outside; padding:0 0 10px 0; word-wrap: break-word;}

.contentArea .genTable td, .contentArea .genTable th {padding:5px 10px; background-color:white; }
.contentArea .genTable th  { background-color:#ccc; }
.contentArea .genTable tr:nth-child(odd) td{background-color:#eee; }


/*-----------------------common--------------------*/
body:lang(zh-cn) {
/*	font-size:15px;
	font-family: "Open Sans", Verdana, Arial, "Microsoft yahei", "微软雅黑", PMingLiU, sans-serif; */
    font-family: "Lato", "Microsoft yahei", "微软雅黑", Verdana, Arial, PMingLiU, sans-serif;
}

/******************************END sch css*******************************/

/* General Template
*************************************************************************/
.contentArea { color: #575757; }
.contentArea .whiteBox { background-color: #ffffff; word-wrap: break-word; border:1px solid #e1e1e1; padding:20px; } 
.contentArea .whiteBox:after{ display: block; content:""; width: 100%; clear: both;}
.contentArea a { color:#db1709; text-decoration:none; } 
.business .contentArea a { color:#2b64e3; } 
.corporate .contentArea a { color:#00811C; } 
.contentArea a.btnWidthImg{display: inline-block; overflow: hidden;}
.contentArea h3 { margin:0; color:#4e4e4e; font-size:1.371em; clear: both; } 
.contentArea h4 { color:#4e4e4e; font-weight:500; font-size:1.286em; margin-bottom:10px; } 
.contentArea h5 { color: #db1709; font-weight: 500; font-size: 1.143em; }
.contentArea ol { padding-left:18px; list-style-type:decimal; margin-bottom: 35px; } 
.contentArea ol li { font-size:1.143em; line-height:1.5; margin-bottom:10px; padding-left: 15px; } 
.contentArea ol[type="a"] li { list-style-type: lower-alpha !important; }
.contentArea ol[type="i"] li { list-style-type: lower-roman !important; }
.contentArea ol li img { float: none; }
.contentArea ol li p { font-size: 1em; }
.contentArea ol li:last-child { margin-bottom:0; } 
.contentArea ol li ul { margin-top:10px; padding-bottom: 0; } 
.contentArea ol li ul li { margin-bottom:0; font-size: 1em; } 
.contentArea ol li ol { margin-top:10px; padding-bottom: 0; } 
.contentArea ol li ol li { margin-bottom:0; font-size: 1em; }
.contentArea ul { padding-left:22px; list-style-type:disc; } 
.contentArea ul li { font-size:1.143em; margin-bottom:10px; } 
.contentArea ul li ul { padding-bottom: 0; padding-top: 10px; }
.contentArea ul li ul li { font-size:1em; list-style-type: square; }
.contentArea ul li ol { padding-bottom: 0; padding-top: 10px; margin-bottom: 0; }
.contentArea ul li ol li { list-style-type: decimal; }
.contentArea ul > li > ol > li { font-size:1em;}
.contentArea ul.arrow { padding-left:5px; } 
.contentArea ul li:last-child { margin-bottom:0; } 
.contentArea ul.arrow > li { padding:0 0 0 25px; list-style:none; color:#db1709; position: relative; } 
.contentArea ul.arrow > li p { font-size: 1em; color: #575757; }
.corporate ul.arrow > li { color: #4e4e4e; }
.contentArea ul.arrow > li::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 10px; border-color: transparent transparent transparent #db1709; position: absolute; left: 0; top: 5px; }
.business .contentArea ul.arrow > li::before { border-color: transparent transparent transparent #2b64e3; }
.corporate .contentArea ul.arrow > li::before { border-color: transparent transparent transparent #00811C; }
.contentArea ul.arrow > li.active::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 5px 0 5px; border-color: #db1709 transparent transparent transparent; position: absolute; left: 0; top: 5px; }
.contentArea ul.arrow > li > a { color:#db1709; text-decoration:none; } 
.business .contentArea ul.arrow > li > a { color:#2b64e3; } 
.corporate .contentArea ul.arrow > li > a { color:#00811C; } 
.contentArea ul.arrow li ul { margin-top: 10px; padding-bottom: 10px; }
.contentArea ul.arrow li ul li  { font-size: 1em; color: #575757; margin-bottom: 0; } 
.contentArea ul.arrow li ol { margin-top: 10px; }
.contentArea ul.arrow li ol li  {word-wrap: break-word; font-size: 1em; color: #575757; margin-bottom: 0; list-style-type: decimal; } 
.contentArea ul.tick { padding-left: 0; }
.contentArea ul.tick > li { background:url(/common/images/iconTick.png) no-repeat 0 0; padding:0 0 0 30px; list-style:none; margin-bottom: 15px; } 
.contentArea ul.tick > li > a { text-decoration:none; } 
.contentArea ul.tick > li > ul { margin-top: 10px; }
.contentArea ul.tick > li > ul > li { font-size: 1em; margin-bottom: 0; }
.contentArea ul.hasImage { clear: none; }
.contentArea ul.hasImage ul { clear: none; }
.contentArea ul.cross { padding-left: 0; }
.contentArea ul.cross > li { background:url(/common/images/iconCross.png) no-repeat 0 0; padding:0 0 0 30px; list-style:none; margin-bottom: 15px; } 
.contentArea ul.cross > li > a { text-decoration:none; } 
.contentArea .spaceLine { display:inline-block; height:1px; width:100%; background-color:#bebebe; margin:20px 0; } 
.contentArea img { width:auto; max-width: 100%; } 
.contentArea p { font-size:1.143em; margin-top:0; margin-bottom:10px; line-height:1.6; }
.contentArea p.description{font-size:1em;} 
.contentArea .imgLeft { float:left; margin:0 15px 15px 0; width:auto!important; } 
.contentArea .imgRight { float:right; margin:0 0 15px 15px; width:auto!important; } 
.contentArea a.btn { cursor: pointer; text-decoration:none; color:#db1709; border:1px solid #db1709; padding:10px 50px; display:inline-block; text-align:center; margin-right:15px; height: auto; line-height: 1; margin-bottom: 10px; } 
.contentArea input.btn { cursor: pointer; text-decoration:none; color:#db1709; border:1px solid #db1709; padding:10px 50px; display:inline-block; text-align:center; margin-right:15px; height: auto; line-height: 1; margin-bottom: 10px; } 
.business .contentArea a.btn { text-decoration:none; color:#2b64e3; border:1px solid #2b64e3; padding:10px 50px; display:inline-block; text-align:center; margin-right:15px; height: auto; line-height: 1; margin-bottom: 10px; } 
.business .contentArea a.btn:hover { color: #ffffff; }
.business .contentArea input.btn { text-decoration:none; color:#2b64e3; border:1px solid #2b64e3; padding:10px 50px; display:inline-block; text-align:center; margin-right:15px; height: auto; line-height: 1; margin-bottom: 10px; } 
.business .contentArea input.btn:hover { color: #ffffff; }
.corporate .contentArea a.btn { text-decoration:none; color:#00811C; border:1px solid #00811C; padding:10px 50px; display:inline-block; text-align:center; margin-right:15px; height: auto; line-height: 1; margin-bottom: 10px; } 
.corporate .contentArea a.btn:hover { color: #ffffff; }
.corporate .contentArea input.btn { text-decoration:none; color:#00811C; border:1px solid #00811C; padding:10px 50px; display:inline-block; text-align:center; margin-right:15px; height: auto; line-height: 1; margin-bottom: 10px; } 
.corporate .contentArea input.btn:hover { color: #ffffff; }
.contentArea a.btn.grey{color: #575757; border:1px solid #575757;}
.contentArea a.btnIcon { text-decoration:none; color:#db1709; border:1px solid #db1709; padding:10px 20px 10px 60px; display:inline-block; text-align:center; background-repeat:no-repeat; background-position:20px 10px; margin-right:15px; } 
.contentArea a.btnIcon:hover {background-color:rgba(255,141,42,0.3); border:1px solid #FF8D2A !important;  }
.contentArea a.btnIcon.cart { background-image:url(/common/images/general/btn_icon_cart.png); background-position: 20px 7px; } 
.contentArea a.btnIcon.store { background-image:url(/common/images/general/btn_icon_store.png); padding:10px 20px 10px 50px; background-position: 20px 7px; } 
.contentArea a.btnIcon.pdf { background-image:url(/common/images/general/btn_icon_pdf.png); padding: 10px 10px 10px 40px; background-position: 10px 10px; margin: 0;} 
.contentArea input.btn.grey{color: #575757; border:1px solid #575757;}
.contentArea input.btnIcon { text-decoration:none; color:#db1709; border:1px solid #db1709; padding:10px 20px 10px 60px; display:inline-block; text-align:center; background-repeat:no-repeat; background-position:20px 10px; margin-right:15px; } 
.contentArea input.btnIcon:hover {background-color:rgba(255,141,42,0.3); border:1px solid #FF8D2A !important;  }
.contentArea input.btnIcon.cart { background-image:url(/common/images/general/btn_icon_cart.png); background-position: 20px 7px; } 
.contentArea input.btnIcon.store { background-image:url(/common/images/general/btn_icon_store.png); padding:10px 20px 10px 50px; background-position: 20px 7px; } 
.contentArea input.btnIcon.pdf { background-image:url(/common/images/general/btn_icon_pdf.png); padding: 10px 10px 10px 40px; background-position: 10px 10px; margin: 0;} 
.contentArea span.highLight{color: #db1709; display: inline-block !important;}
.contentArea table { border-spacing:0; border-collapse:collapse; border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; } 
.contentArea table th { background-color:#4e4e4e; color:#fff; padding:20px 15px; border-left:1px solid #e1e1e1; border-right:1px solid #e1e1e1; font-size:1.143em; text-align:left; } 
.contentArea table.center th { text-align:center; } 
.contentArea table thead tr.tableSubHead th { background-color:#fbf8f0; color: #a76700; padding: 10px 15px; }
.contentArea table td { background-color:#fff; padding:20px 15px; border-left:1px solid #e1e1e1; border-right:1px solid #e1e1e1; font-size:1.143em; vertical-align:top; } 
.contentArea table td p{font-size: 1em;}
.contentArea table td li{font-size:1em; }
.contentArea table tr:nth-child(odd) td { background-color:#f7f7f7; } 
.contentArea table tr:nth-child(even) td { background-color:#fff; } 
.contentArea table.table2 th { padding: 10px; }
.contentArea table.table2 tr:nth-child(even) td { background-color:#f7f7f7; vertical-align: middle; padding: 10px; } 
.contentArea table.table2 tr:nth-child(odd) td { background-color:#fff; vertical-align: middle; padding: 10px; } 
.contentArea table.tableWhite th { background-color: #F5F5F5; color: #545454; }
.contentArea table.tableWhite td { border:1px solid #e1e1e1; vertical-align:top; } 
.contentArea table.tableWhite tr td:first-child { width:20%; } 
.contentArea table.tableWhite tr:nth-child(odd) td { background-color:#fff; } 
.contentArea table.whiteWithTwoCol tr:nth-child(even) td{ background-color:#f7f7f7; }
.contentArea table.tableWhite thead tr td { background-color: #F5F5F5 !important; }
.contentArea table td img { margin:0 auto; float: none; width: auto; } 
.contentArea .yellowBanner { padding-bottom:0; margin-bottom:-20px; border-bottom:none;}
.contentArea .whiteBoxBanner { background-color:#fff6d4; margin:-20px -20px 20px; padding:20px; } 
.contentArea .whiteBoxBanner img { width:auto; margin:0 auto; float: none; } 
.contentArea .whiteBoxBannerTitle { font-size:1.565em!important; font-weight:500; } 
.contentArea .whiteBoxBanner p { font-size:1.15em; } 
.contentArea .whiteBoxBannerContent { margin:30px 0; } 
.contentArea .whiteBoxBannerFull { background-color:#fff; margin:-20px -20px 20px; padding:0; } 
.contentArea .whiteBoxBannerFull img { width:100%; margin:0 auto; } 
.contentArea .whiteBoxBannerFull .bgBanner{padding: 105px 25px 0 25px;}
.contentArea .whiteBoxBannerFull .bgBanner p{width: 60%;}
.contentArea .whiteBoxBannerRight img { float: right; margin: 0; }
.contentArea .whiteBoxBannerLeft img { float: left; margin: 0; }
.contentArea .whiteBoxBanner.singleBanner { height: 180px; position: relative; }
.contentArea .whiteBoxBannerNoMargin { margin: -20px 20px -20px -20px; }
.contentArea .whiteBoxBannerDesc { position:relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top:50%; }
.contentArea .whiteBoxBannerDesc h2 { padding: 0; }
.contentArea .whiteBoxListContent img { width:auto; margin:0 auto; max-width: 100%; } 
.contentArea .whiteBoxListContent .listContentRow { display:inline-block; margin:15px 0; width:100%; } 
.contentArea .whiteBoxListContent .listContentImg { padding: 0 15px; margin-bottom: 20px; }
.contentArea .whiteBoxListContent .listContentImg img { float: none !important; border:1px solid #e1e1e1; padding: 5px; } 
.contentArea .whiteBoxListContent h4 { color:#4e4e4e; font-weight:500; font-size:1.3em; margin-bottom:10px; } 
.contentArea .whiteBoxListContent p:last-child { margin-bottom: 0; padding-bottom: 5px; }
.contentArea .contentBoxListContent { line-height: 1.5; }
.contentArea .productDetail .contentBoxListContent  { font-size: 1em; }
.contentArea .whiteBoxContent h4 { color:#4e4e4e; font-weight:bold; font-size:1.286em; margin-bottom:10px; } 
.contentArea .whiteBoxContent a h4 { color: #d90d0d; }
.business .contentArea .whiteBoxContent a h4 { color: #115eb2; }
.corporate .contentArea .whiteBoxContent a h4 { color: #087962; }
.contentArea .whiteBoxContent h4.normal { margin:0 0 8px; color:#575757; font-size:1.15em; } 
.contentArea .whiteBoxContent h5 { color:#575757; font-weight:500; font-size:15px; margin-bottom:10px; } 
.contentArea .whiteBoxContent p { padding-bottom: 0; word-wrap: break-word; }
.contentArea .whiteBoxContent .listContentRow { display:inline-block; margin:15px 0; width:100%; } 
.contentArea .whiteBoxContent .listContentImg { padding: 0 15px; margin-bottom: 20px; border: 0; }
.contentArea .whiteBoxContent .listContentImg img { float: none !important; margin: 0 auto; border:1px solid #e1e1e1; padding: 5px; } 
.contentArea .products .whiteBoxContent .listContentImg { padding: 0 15px; margin-bottom: 20px; border:1px solid #e1e1e1; }
.contentArea .products .whiteBoxContent .listContentImg img { float: none !important; margin: 0 auto; border:0; padding: 5px; } 
.contentArea .whiteBoxMargin { margin-top: 30px; }
.contentArea .whiteBoxContent p:last-child{margin-bottom: 0;}
.contentArea .greyBox { border:1px solid #e1e1e1; padding:20px; margin-top:30px; margin-bottom: 25px; position: relative; } 
.contentArea .greyBox:after{clear: both; content:""; display: block; width: 100%;}
.contentArea .greyBox h3 { color:#4e4e4e; font-weight:500; } 
.contentArea .greyBox h4 { color:#4e4e4e; font-weight:500; font-size:18px; margin-bottom:10px; } 
.contentArea .greyBox span.hotline {color: #d90d0d; font-size: 1.75em; display: block; margin-bottom: 15px;}
.contentArea .greyBox.greyBoxSplit:before {content: "";width: 1px;height: 90%;position: absolute;background-color: #bebebe;left: 49.6440676%;top: 0;margin: 3% 0;}
.contentArea .greyBox.greyBoxSplit.smallSplit:before {height: 85%; margin: 2.5% 0; }
.contentArea .greyBox { background-color:#f2f2f2; } 
.contentArea .greyBox .colBorder { position:relative; padding-left:15px; } 
.contentArea .greyBox .colBorder::before { content:""; position:absolute; width:1px; height:100%; background-color:#bebebe; left:-15px; top:0; }
.contentArea .greyBox.greyBoxRight { margin-top: 0; padding: 20px; }
.contentArea .greyBox p:last-child{margin-bottom: 0; padding-bottom: 0;}
.contentArea select { border: 1px solid #BFBFBF; color: #575757; padding: 5px 8px; font-size: 1.2em; width:  260px; margin-bottom: 15px; }
.contentArea ul li img { margin: 0 5px 0 0; }
.contentArea span.pSpace { display: inline-block; width: 77px; }
.contentArea p.normalTitle{padding-bottom: 0;}
.contentArea .hiddenSpace { display: inline-block; width: 100%; height: 10px; }
.contentArea .hiddenLabel { position: absolute; opacity: 0; filter:alpha(opacity=0); width: 0; height: 0; }
.contentArea .emailUs, .contentArea .contactAddress { padding-bottom: 0; }
.contentArea .yellowBox { background-color: #fff6d4; padding: 20px; clear: both;border:1px solid #e1e1e1; margin-bottom:20px; }
.contentArea .yellowBox p { margin-bottom:0; padding-bottom:0; }
.contentArea .yellowBox > ol, .contentArea .yellowBox > ul { margin-bottom:0; padding-bottom:0; padding-top: 0; margin-top:10px;}
.contentArea .yellowBox > ol:first-child, .contentArea .yellowBox > ul:first-child { margin-top:0;}
.contentArea .yellowBox > ol >li, .contentArea .yellowBox > ul > li { margin-bottom:10px; padding-bottom:0; }
.contentArea .yellowBox > ol > li:last-child, .contentArea .yellowBox > ul > li:last-child { margin-bottom:0;}
.contentArea .yellowBox > ol > li > ul, .contentArea .yellowBox > ol > li > ol, .contentArea .yellowBox > ul > li > ul, .contentArea .yellowBox > ul > li > ol { margin-bottom:0; padding-bottom:0; }
.contentArea .yellowBox > ol > li > ul >li, .contentArea .yellowBox > ol > li > ol > li, .contentArea .yellowBox > ul > li > ul > li, .contentArea .yellowBox > ul > li > ol > li { margin-bottom:10px; padding-bottom:0; }
.contentArea .yellowBox > ol > li > ul > li:last-child, .contentArea .yellowBox > ol > li > ol > li:last-child, .contentArea .yellowBox > ul > li > ul > li:last-child, .contentArea .yellowBox > ul > li > ol > li:last-child { margin-bottom:0;}
.contentArea .yellowBox:after{display: block; width: 100% ; content:""; clear: left;}
.contentArea table.noStyle { width: auto; border: 0; }
.contentArea table.noStyle td { padding: 5px; border: 0; padding-left: 0; }
.contentArea table.noStyle tr:nth-child(odd) td { background-color: transparent; }
.contentArea .yellowBox table.noStyle td { background-color: transparent !important; padding: 5px; }
.contentArea table.noStyle tr:nth-child(even) td { background-color: transparent !important; }
.contentArea .contentWithImg img { max-width: 100%; float: none; margin: 0; }
.contentArea .noPM { padding: 0 !important; margin: 0 !important; }
.contentArea .bannerContent { padding: 30px 25px; }
.contentArea .greyBoxTable td { padding: 5px; font-size: 12px; }
.contentArea .imgBorder { border: 1px solid #e1e1e1; padding: 5px; }
.contentArea .mt100 { margin-top: 100px !important; }
.contentArea img.full { width: 100% !important; }
.contentArea img.center { text-align: center; float: none; margin: 0 auto; }
.contentArea p.discount { background-color: #EDEDEE; padding: 0 5px 10px; }

.contentArea table.aavsTable tbody td:first-child img { margin: 0; text-align: left; }
.contentArea table.aavsFITable tbody td:first-child img { margin: 0; text-align: left; }

.contentArea .btnSoldOut { display: inline-block; width: 100px; border: 1px solid #aaaaaa; text-align: center; padding: 10px; background: #aaaaaa; color: #ffffff; cursor: pointer; }

.btnFilterSearch {font-size: 1.143em; min-width:120px; height: 38px; display: inline-block; line-height:35px; border: 1px solid #d90d0d; padding:0 23px; color: #d90d0d; background-color: #ffffff; outline: 0; cursor: pointer; -webkit-transition:background-color 0.2s; /* Safari */  transition:background-color 0.2s; -ms-transition:background-color 0.2s;}
.btnFilterSearch:hover {background-color:rgba(255,141,42,0.3); border:1px solid #FF8D2A !important; }

/* General Template
*************************************************************************/

/* Tooltips css
*****************************************************************/
.tooltips{position: relative;}
.tooltips span{ margin-bottom:20px !important; text-indent:0; visibility: hidden; width: 150px;  background-color: #953800;    color: #fff;    text-align: center; border-radius: 6px; padding:10px;   position: absolute; z-index: 100;  bottom: 100%;  left: 50%;  margin-left: -65px; font-size: 0.8em}
.tooltips:hover span, .tooltips:focus span{visibility: visible;}
.tooltips span::after { content: "";  position: absolute;  top: 100%;  left: 50%;   margin-left: -5px;   border-width: 5px; border-style: solid;  border-color: #953800 transparent transparent transparent;}


/* Container
*****************************************************************/
.mainContainer.noLeftMenu .contentArea {  width: 100%;}
.mainContainer {  margin-bottom: 40px;  position: relative;}
.fullWidthContainer{border: 1px solid #e1e1e1; padding: 20px; overflow: hidden; background-color: #fff;}
.topContainer {  text-align: center;  margin-top: 20px;  margin-bottom: 20px;}
.mainContainer .contentArea {    float: left;    width: 839px;    position: relative;}
.leftMenuContainer {  width: 270px;  float: left;  margin-right: 2.7118644%;}
.noLeftMenu .leftContainer {  display: none;}
.noLeftMenu .mobileDropDown {  display: none;}
.mobileNoMenu .mobileDropDown {  display: none !important;}
.mobileTopContainer {  display: none;  background-color: #ffffff;  padding: 15px 0;  margin-bottom: 15px;  width: 100%;  position: relative;}
.mobileTopContainer span {  color: #d90d0d;  font-weight: bold;  position: relative;  font-size: 15px;}
.business .mobileTopContainer span { color: #115eb2; }
.corporate .mobileTopContainer span { color: #087962; }
.topBannerContainer {  width: 100%;  height: 250px;  position: relative;  background-repeat: no-repeat;  background-size: auto 100%;  background-position: center center;}
.topBannerContainer.hidden{display: none;}

/* page banner
*****************************************************************/
.octopusCards .topBannerContainer {  background-color: #f7edd8; }
.octopusCards.aavs .topBannerContainer { background-color: #f7edd8; }
.octopusRewards .topBannerContainer {  background-color: #f7edd8; }
.customerService .topBannerContainer {background-color: #f7edd8; }
.customerService.usefulDocuments .topBannerContainer {  background-color: #f7edd8; }
.latestPromotions .topBannerContainer { background-color: #f7edd8; }
.cardReplacement .topBannerContainer { background-color: #f7edd8; }
.cardReplacement.octopusServicePoint .topBannerContainer { background-color: #f7edd8; }

.whatsNew .topBannerContainer {  background-color: #E7F3F7; }
.careers .topBannerContainer { background-color: #E7F3F7; }
.sitemap .topBannerContainer {  background-color: #e3e3e3; }
.siteMapBanner.topBannerContainer {  background-color: #e3e3e3; }

.corporate .topBannerContainer { background-color: #c9dac9; }
.business .topBannerContainer { background-color: #E7F3F7; }

/* Breadcrumb
*****************************************************************/
.breadcrumb ul { list-style: none;}
.breadcrumb ul li { position: relative;  list-style: none;  display: inline-block;  padding: 10px 5px 10px 15px; background-image: url(/common/images/breadcrumbArrow.png);background-repeat: no-repeat;background-position: 0 15px;font-size: 14px;}
.breadcrumb ul li:first-child {  padding: 10px 5px 10px 0;  background-image: none;}
.breadcrumb ul li.active {  color: #bc2815;}
.breadcrumb.noTopBanner { margin-top: 10px; }

.business .breadcrumb ul li.active { color: #2b64e3;}
.corporate .breadcrumb ul li.active { color: #00811C;}

/* headline
*****************************************************************/
.pageTopTitle {  font-weight: 400;  font-size: 25px;  color: #ee6d1f;  padding-bottom: 12px;  margin-bottom: 15px;  border-bottom: 3px solid #feb914;display: inline-block; max-width: 820px; }
.consumer .pageTopTitle { color: #d90d0d; }
.business .pageTopTitle { color: #115eb2; }
.corporate .pageTopTitle { color: #087962; }

.consumer .topBannerContainer h1 {  color: #d90d0d;  position: relative;  top: 100px;  font-size: 28px;}
.business .topBannerContainer h1 {  color: #115eb2;  position: relative;  top: 100px;  font-size: 28px;}
.corporate .topBannerContainer h1 {  color: #087962;  position: relative;  top: 100px;  font-size: 28px;}
.sitemap .topBannerContainer h1 {  color: #575757 !important;  position: relative;  top: 100px;  font-size: 28px;}

/* consumer
*****************************************************************/
.mainCardsWrap .loading { position: absolute; height: 100%; width: 100%; display: inline-block; background: #fff url(/common/images/bgContent.jpg) repeat left top; z-index: 1;}
.mainCardsWrap .loading:before { content: ""; width: 100%; height: 100%; position: absolute; background-image: url(/common/images/loading.gif); background-position: center 100px; background-repeat: no-repeat; }

.mainCardsWrap{ display: flex; flex-wrap: wrap; gap: 25px; width: 839px; float: left; margin-right: 25px; margin-bottom: 25px;}
.mainCardsWrap > a.card {margin:0; display: flex; flex-direction: column; width: 255px; border: 1px solid #d7d7d7; min-height: 400px; background-color: #fff; flex: 1 0 auto; max-width: 261px;}
.mainCardsWrap > a.card:hover {border: 1px solid #bc2815;}
.mainCardsWrap > a.card > span:first-child {height: 185px; display: block; overflow: hidden;}
.mainCardsWrap > a.card > span.subHead {margin: 0 10px; display:block; padding:10px; display: block; border-bottom: 1px solid #feb914; font-size: 1.4em;  font-weight: normal;  color: #bc2815; overflow: hidden; min-height: 120px; }
.mainCardsWrap > a.card > span:last-child {display:block; padding: 10px 20px; font-size: 1.143em; line-height: 1.48; color: #575757; height: 135px; overflow: hidden;}

/* .mainCardsWrap{ width: 839px; float: left; margin:0 36px 36px 0; position: relative; }
.card{position:relative; width: 255px;  display:block; margin:0 36px 36px 0;  float: left; border: 1px solid #d7d7d7; min-height: 400px; background-color: #fff;} 
.card:hover { border: 1px solid #bc2815; } 
.mainCardsWrap a.card > span:first-child { height: 185px; display: block; overflow: hidden; }
.card > span:last-child{display:block;padding: 10px 20px; font-size: 1.143em; line-height: 1.48; color: #575757; height: 135px; overflow: hidden;}
.card .subHead{margin: 0 10px; display:block; padding:10px; display: block; border-bottom: 1px solid #feb914; font-size: 1.4em;  font-weight: normal;  color: #bc2815;}

.mainCardsWrap .card:nth-of-type(3n){margin-right: 0;}
.mainCardsWrap .card:nth-of-type(3n +1){clear:left;}

*/




aside.mainShortCut{position:relative; border:1px solid #d7d7d7; padding: 0 19px; background-color: #fff; float: left; width: 265px; margin-bottom: 25px;}
aside.mainShortCut li{list-style:none;    padding: 22px 0;  border-bottom: 1px solid #d7d7d7;}
aside.mainShortCut li:last-child{border: none;}
aside.mainShortCut li a{display: block; width: 100%;padding: 0 13px 0 48px; color: #bc2815; font-size: 1.143em;}
aside.mainShortCut li a:hover{color: #700000;}
aside.mainShortCut li.btnTopupByMobile{background:url(/en/images/consumer/iconPhoneTopup.svg) no-repeat left 10px center;}
aside.mainShortCut li.btnOnlinePayment{background:url(/en/images/consumer/iconOnlinePayment.jpg) no-repeat left 10px center;}
aside.mainShortCut li.btnOepay{background:url(/en/images/consumer/iconOepay.jpg) no-repeat left 10px center;}
aside.mainShortCut li.btnAuto{background:url(/en/images/consumer/iconAuto.jpg) no-repeat left 10px center;}
aside.mainShortCut li.btniconLost{background:url(/en/images/consumer/iconLost.jpg) no-repeat left 10px center;}
aside.mainShortCut li.btniconRetail{background:url(/en/images/consumer/iconRetail.jpg) no-repeat left 10px center;}
aside.mainShortCut li.btniconPTFSS{background:url(/en/images/consumer/iconPTFSS.png) no-repeat left 10px center;}
aside.mainShortCut li.btniconUpgrade{background:url(/en/images/consumer/iconUpgrade.svg) no-repeat left 10px center;}
aside.mainShortCut li.btnRewards{background:url(/en/images/consumer/iconNote.svg) no-repeat left 10px center;}
aside.mainShortCut li.btniconJoyYou{background:url(/en/images/consumer/iconJoyYou.png) no-repeat left 10px center;}
aside.mainShortCut li.btnQR{background:url(/en/images/consumer/iconQr.svg) no-repeat left 10px center;}
aside.mainShortCut li.btnOctopusMobile{background:url(/en/images/consumer/iconMobile.svg) no-repeat left 10px center;}



/* mobile drop down
*****************************************************************/
.mobileDropDown{margin-bottom: 30px;	display: none;}
.mobileDropDown .title {padding: 18px 45px 18px 15px;font-size: 1.3em; display: block; overflow: hidden;text-align: left;font-weight: 400; background: #d90d0d url(/common/images/arrowDown_white.png) no-repeat 94% 24px !important; color: #ffffff; border-bottom: 3px solid #feb914; text-decoration:none !important;}
.business .mobileDropDown .title { background: #115eb2 url(/common/images/arrowDown_white.png) no-repeat 94% 24px !important; }
.corporate .mobileDropDown .title { background: #087962 url(/common/images/arrowDown_white.png) no-repeat 94% 24px !important; }
.mobileDropDown .title.open{background: #0f75bd url(../images/arrowDown.png) no-repeat 94% 23px;}
.mobileDropDown .leftMenu li a.active.haveSub.open { background: #ffffff url(/common/images/arrowDown_black.png) no-repeat 94% 24px !important; color: #d90d0d; border-bottom: 0; }
.mobileDropDown ul{	display: none}
.menuTitle, .leftMenu{	display: block;}

/* others
*****************************************************************/
select.withBtn { margin-right: 20px; }
body.octopusCards footer .socialShare {  display: none;}
.topTools {    position: absolute;    right: 0;    top: 8px;}
.topTools .socialShare {    position: relative;    right: 0;    top: 0;}
.topTools .socialShare a{   float: left;   text-indent: -9999px;}
.topTools .socialShare .iconFacebook {margin-left: 15px;width: 68px;height: 22px;display: block;background: url(/common/images/iconFacebook.png) no-repeat center left;text-indent: 0;padding-left: 30px;}
.skipButton{position: absolute;left: -9999px;}
label.hidden{display: none !important;}

.topContainerDesc { max-width: 800px; margin: 15px auto 30px; }
.topContainerDesc p { font-size: 1.143em; line-height: 1.5; }

.rewardsMerchant .fancybox-close { background-image: url(/common/images/iconFancyboxClose.png) !important; background-repeat: no-repeat; background-size: 100% 100% !important; }
.rewardsMerchant .fancybox-close { top: 22px; right: 22px; width: 17px; height: 17px; }

.fancyboxPopupDialog { width: 55%; }


.stepBox{ padding: 15px; background-color: #f7f7f7; }
.stepBox h3{ text-align: center; color: #bb4701; font-size: 1.5em; }
.stepBox .stepRow img{ float: none; margin: 0 auto; width: auto; }
.stepBox .step{ display: table; height: 200px; width: 100%; }
.stepBox .stepDesc{ display: table-cell; vertical-align: middle; }
.stepBox span.circleStep{ display:block; width:65px; height:65px; text-align: center; line-height: 65px; margin-bottom:10px; float: left; background-color: #4e4e4e; color: #fff; border-radius: 100%; font-weight: 700; font-size: 1.15em; margin-right: 10px; }
.stepBox span.circleStepDesc{ color: #4e4e4e; font-size: 1.15em; display: table-cell; vertical-align: middle; height: 65px; }
.stepBox div.circleStep{ display:block; width:65px; height:65px; text-align: center; line-height: 65px; margin-bottom:10px; float: left; background-color: #4e4e4e; color: #fff; border-radius: 100%; font-weight: 700; font-size: 1.15em; margin-right: 10px; }
.stepBox div.circleStepDesc{ color: #4e4e4e; font-size: 1.15em; display: table-cell; vertical-align: middle; height: 65px; }
.stepBox .stepLine{ position: relative; width: 100%; height: 3px; background-color: #feb914; display: block; margin: 30px 0; }
.stepBox .stepLine .stepLineArrow{ position: absolute; margin-left: -32.5px; left: 50%; width: 65px; height: 38px; top: -18px; background-image: url(/common/images/doubleArrowDown.png); background-repeat: no-repeat; background-color: #f7f7f7; }
.stepBox .stepBottom { margin-top: 50px; margin-bottom: 25px; text-align: center; }
.stepBox .stepBottom a.btn { margin: 0; }
.stepBox .stepBottom input.btn { margin: 0; }

.applyStepTitle div.circleStep{ display:block; width:65px; height:65px; text-align: center; line-height: 65px; margin-bottom:10px; float: left; background-color: #4e4e4e; color: #fff; border-radius: 100%; font-weight: 700; font-size: 1.15em; margin-right: 10px; }
.applyStepTitle div.circleStepDesc{ color: #4e4e4e; font-size: 1.15em; display: table-cell; vertical-align: middle; height: 65px; }


.stepDesc p{clear: both;}

.arrowLine{ position: relative; width: 100%; height: 3px; background-color: #feb914; display: block; margin: 30px 0; }
.arrowLine .arrowLineArrow{ position: absolute; margin-left: -32.5px; left: 50%; width: 65px; height: 38px; top: -18px; background-image: url(/common/images/doubleArrowDown.png); background-repeat: no-repeat; background-color: #ffffff; }

#widgetLightbox { width: 800px; }
#widgetLightbox img.widgetLightboxLogo { float: left; width: 80px; height: 80px; }
#widgetLightbox img { width: auto; }
#widgetLightbox .widgetLightboxTitle { padding: 30px 0 0 95px; display: block; font-size: 20px; }

.nowrap { white-space: nowrap }

ol.steps { position: relative; display: inline-block; padding-left: 0; }
ol.steps li {float: left;margin-right: 50px;list-style: none;position: relative;}
ol.steps li::before {content: "";width: 0;height: 0;border-style: solid;border-width: 20px 0 20px 25px;border-color: transparent transparent transparent #db1709;position: absolute;right: -30px;top: 40%;} 
ol.steps li:last-child { margin-right: 0; }
ol.steps li:last-child::before { display: none; }

/* Page Sub Banner 
****************************************************************/
.whiteBoxBanner.bannerLeft { background-repeat: no-repeat; background-position: bottom left; padding: 20px; }
.whiteBoxBanner.bannerLeft p { padding: 0; bottom: 0; }
.octopusPCReader .whiteBoxBanner.bannerLeft { background-image: url(/en/images/consumer/octopus-cards/pc-reader/pc-reader_subBanner.png); }

.whiteBoxBanner.bannerRight { background-repeat: no-repeat; background-position: bottom right; padding: 20px; }
.whiteBoxBanner.bannerRight p { padding: 0; bottom: 0; }
.octopress .whiteBoxBanner.bannerRight { background-image: url(/en/images/corporate/media/octoContentImage_press.jpg); background-color: #ffffff; background-size: cover; }

.awards .whiteBoxBanner.bannerRight { background-image: url(/en/images/corporate/about-octopus/profile/awards/banner.jpg); background-color: #ffffff; background-size: cover; }

/* Search Result Page
****************************************************************/
.searchResultWrap p { height: 100px; overflow: hidden; padding-bottom: 0; }

/* Pagination
****************************************************************/
.pagingBox {margin-bottom: 0;}
.pagingContainer {text-align:center; padding-top:20px; clear: both;}
.pagingBox input{ text-align:center; font:inherit; display:inline-block; position:relative; top:-10px; border:1px solid #575757; width:30px; padding:4px;}
.pagingBox span{ padding:0 5px;position:relative; top:-10px;  }
.pagingBox a {display:inline-block; width:30px; height:30px;border:1px solid white; margin:0; }
.pagingBox a:hover {border:1px solid #ddd;}
.pagingBox a.goNext {background:url(/common/images/goNext.png)center center no-repeat; background-color: #97918a; }
.pagingBox a.goPrev {background:url(/common/images/goPrev.png)center center no-repeat; background-color: #97918a; }
.pagingBox a.goFirst {background:url(/common/images/goFirst.png)center center no-repeat; background-color: #97918a; }
.pagingBox a.goLast{background:url(/common/images/goLast.png)center center no-repeat; background-color: #97918a; }

/* Sitemap
***************************************************************/
.sitemapList a:hover { color: #bc2815; }
.sitemapList ul { padding-bottom: 0; }
.sitemapList ul.sitemapLevel2 { position: relative; width: 350px; padding-left: 18px; }
.sitemapList ul.sitemapLevel2 > li { list-style-type: none; padding-left: 0; position: relative; }
.sitemapList ul.sitemapLevel2 > li:before { content: ""; background-image: url(/common/images/general/list_arrow.png); width: 8px; height: 8px; background-size: 100% 100%; position: absolute; left: -18px; top: 6px;}
.sitemapList ul.sitemapLevel3 { position: relative; top: -20px; left: 350px; width: 350px; }
.sitemapList ul.sitemapLevel3 li { font-size: 1em; }
.sitemapList ul.sitemapLevel4 { position: relative; left: 350px; top: -20px; width: 350px; }
.sitemapList ul.sitemapLevel4 li {font-size: 1em; padding-bottom: 0; list-style-type: none; text-indent: -5px;}
.sitemapList ul.sitemapLevel4 li:before {content: "-"; position: relative; left: -5px;}
.sitemapList li.sitemapHasSub { position: relative; }

/* Product Notice List
***************************************************************/
.noticeContent { display: none; }
.noticeContent span { color: #575757; font-size: 0.9em; display: block; padding-bottom: 10px; }
.noticeContent span sup { color: #bc2815; }

/* popup banner 
***************************************************************/
#popup_banner { z-index: 0; display: none; }
.popup_close_btn { position:absolute; z-index:1; top: 6px; left: 6px; display: inline-block; }
.popup_close_btn img { width: 15px; }

html[lang="en-hk"] .contentEN { display: block; }
html[lang="en-hk"] .contentTC { display: none; }
html[lang="en-hk"] .contentSC { display: none; }
html[lang="zh-hk"] .contentEN { display: none; }
html[lang="zh-hk"] .contentTC { display: block; }
html[lang="zh-hk"] .contentSC { display: none; }
html[lang="zh-cn"] .contentEN { display: none; }
html[lang="zh-cn"] .contentTC { display: none; }
html[lang="zh-cn"] .contentSC { display: block; }


/* Octopus App
***************************************************************/
.octoErrMsg {font-size:80%; color:#ff0000; clear:both; width:100%; padding: 2px 0; display:none;}
.agreeOctopusAppTerms { position: relative; }
.agreeOctopusAppTerms input[type="checkbox"] {width: 22px;height: 22px;position: absolute;left: 0;top: -2px;}
.agreeOctopusAppTerms span {font-size: 1.143em;margin-left: 30px;line-height: 30px;}

.deviceModel { display: none; width: 600px; min-height: 470px; }
.deviceModel #device_name { margin-bottom: 25px; font-size: 1.3em; }
.deviceModel div#popup_logo { margin-bottom: 20px; }
.deviceModel div#popup_logo img { width: auto; max-width: 100%; }
.deviceModel ol { margin-top: 15px; margin-left: 15px; }
.deviceModel a { outline: 0; color: #d90d0d; }
.deviceModel #device_img img { width: auto; float: none; margin: 0 auto; }

/* Live Chat Float Icon
**************************************************************/
/* .btnLiveChat { position: fixed; right: 0; top: 45%; z-index: 99; } 
html[lang="en-hk"] .btnLiveChat { display: none; }
html[lang="zh-cn"] .btnLiveChat { display: none; } */

.btnLiveChat {display: none;}
.btnWhatsappChat { position: fixed; right: 0; top: 80%; z-index: 99; } 

/* Latest Promotion 
*********************************************************/
.promotionSliderWrap{margin-bottom: 40px; width: 100%; position: relative; background-color:#f5f5f5;}
.promotionSliderWrap .prevBtn{left: 16px;}
.promotionSliderWrap .nextBtn{right: 16px;}
.promotionSliderWrap .prevBtn, .promotionSliderWrap .nextBtn{width: 13px; height: 22px; position: absolute; top: 50%; margin-top: -11px;  display: block;}
.promotionSliderWrap .nextBtn:before, .promotionSliderWrap .nextBtn:after, .promotionSliderWrap .prevBtn:before, .promotionSliderWrap .prevBtn:after{width: 12px; height: 13px;border-left: 3px solid #333333; content: "";position: absolute;pointer-events: none;}
.promotionSliderWrap .prevBtn:before{ transform: skew(-45deg); -webkit-transform: skew(-45deg); -ms-transform: skew(-45deg); left: 4px; top:0; }
.promotionSliderWrap .prevBtn:after{ transform: skew(45deg); -webkit-transform: skew(45deg); -ms-transform: skew(45deg); left: 4px; top: 13px;}
.promotionSliderWrap .nextBtn:before{ transform: skew(45deg); -webkit-transform: skew(45deg); -ms-transform: skew(45deg); left: 4px; top:0; }
.promotionSliderWrap .nextBtn:after{ transform: skew(-45deg); -webkit-transform: skew(-45deg); -ms-transform: skew(-45deg); left: 4px; top: 13px;}
.promotionSlider{width: 100%; height: 450px;}
/*.promotionSlider .slidesContainer a.slide { pointer-events: none; }*/
.promotionFilter{padding:20px 63px; margin-bottom: 40px; border: 1px solid #d2d2d2; text-align: center;}
.promotionFilter li{display: inline-block;}
.promotionFilter li a{font-size: 1.143em; padding-right:17px; border-right:1px solid #d2d2d2; margin-right: 17px; display: inline-block; margin-bottom: 10px;}
.promotionFilter li:last-child a{margin-right: 0; padding-right: 0; border-right: none;}
.promotionFilter a:hover, .promotionFilter a.active{color: #db1709}
.promotionsWrap{  clear: both;  width: 100%;}
.promotionsItemWrap{display: none;}
.promotionsItemWrap.all{display: block;}
.promotions{width: 266px; float: left; text-align: center; margin:0 25px 40px 0;}
.promotions:nth-child(4n){margin-right: 0;}
.promotions:nth-child(4n+1){clear: both;}
.promotions .thumb{display:block; margin-bottom: 20px; width: 266px; height: 190px; background-image: url(/common/images/loading.gif); background-repeat: no-repeat; background-position: center center; overflow: hidden; border: 1px solid #e1e1e1;}
.promotions .thumb:hover{border: 1px solid #db1709;}
.promotions .thumb img { width: auto; max-width: 100%; }
.promotions p{text-align: left; margin-bottom: 20px; display: block; min-height: 34px;}
.latestPromotions .contentArea .brandLogo{ overflow: hidden;}
.latestPromotions .contentArea .brandLogo img{max-width: 100%; width: auto; margin-bottom: 20px; }
.latestPromotions .contentArea .brandLogo img[src=""] { display: none; }
.latestPromotions .termsWrap{padding-top: 20px;}
.latestPromotions .termsWrap p{padding-bottom: 0;}
.consumer.latestPromotions .leftMenuContainer { display: none; }
.consumer.latestPromotions .contentArea { width: 100%; }
p.noPromotion { font-size: 1.143em; }

.latestPromotions .contentArea .center.col12 > img { max-width: 100%; }


/* Milestone
*********************************************************/
.btn-more-milestone { font-size: 1.143em; min-width:120px; height: 38px; display: inline-block; line-height:35px; border: 1px solid #087962; background-color: #ffffff; padding:0 23px; color: #087962 !important; -webkit-transition:background-color 0.2s; /* Safari */  transition:background-color 0.2s; -ms-transition:background-color 0.2s; }
.btn-more-milestone:hover { background-color: rgba(8,121,98,0.3); }


/* Table Fix
*********************************************************/
.octopusServicePoint .ps-container { -ms-touch-action: initial; touch-action: initial; }


/* Detect Browser
*********************************************************/
#browser-update { position: fixed; left: 0px; border-bottom: 1px solid rgb(223, 221, 203); top: 0px; margin: 0px; width: 100%; z-index: 99999; color: rgb(111, 109, 91); font-size: 10pt; padding: 0px; background: rgb(255, 252, 223); text-align: center; }
#browser-update > span { display: block; padding: 10px 10px; margin: 0 auto; }
#browser-update span.underline { text-decoration: underline; }
#browser-update span.closeMsg { display: block; position: fixed; right: 15px; top: 8px; border-radius: 25px; height: 9px; width: 9px; background-color: #565656; cursor: pointer; }
#browser-update span.closeMsg:before, #browser-update span.closeMsg:after { content: ""; width: 7px; height: 8px; margin: 0 auto; border-left: 1px solid #ffffff; position: absolute; pointer-events: none; top: 6px; }
#browser-update span.closeMsg:before { transform: skew(45deg); -webkit-transform: skew(45deg); -ms-transform: skew(45deg); right: 3px; }
#browser-update span.closeMsg:after { transform: skew(-45deg); -webkit-transform: skew(-45deg); -ms-transform: skew(-45deg); left: 9px; }


/* Priority Message
*********************************************************/
.priority-msg { margin: 0px; width: 100%; color: rgb(111, 109, 91); font-size: 10pt; padding: 0px; background: rgb(255, 252, 223); text-align: center; }
.priority-msg > span { display: block; padding: 10px 10px; margin: 0 auto; }
.priority-msg span.underline { text-decoration: underline; }

/* Video Captions
*********************************************************/
video::cue {color: #ffffff; font: 0.85em "Microsoft JhengHei", Verdana, Arial, PMingLiU, sans-serif; background: rgb(0,0,0,0.4);}


.managementStructure {
	width:80vw;
	max-width:550px;
	min-height: 65vw;
}

div.videoContainer > video {
	width:70%;
}

/* Tab Content 
*********************************************************/
.tabs{width:100%; height:auto; margin:0 auto;}
.tabs .tabs-list{margin:0; padding:0;display:flex; gap: 1px;}
.tabs .tabs-list li {list-style:none !important; width:40%; float:left; padding:10px; text-align:center; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom:0; margin-bottom:0;background-color:#f2f2f2;}
.tabs .tabs-list li:hover{cursor:pointer;}
.tabs .tabs-list li a{text-decoration:none; color:#575757;}

.tabs .tab {display:none; border:1px solid #d90d0d; border-top-width:3px !important; padding:25px; clear:both;}
.tabs .active {display:block !important;}
.tabs .tabs-list li.active{border-bottom: none; background-color:#d90d0d;}
.tabs .tabs-list li.active a{color:#ffffff; font-weight:bold;}


/* List in N column */
ul.Col2List { columns: 2; }
ul.Col2List > li {padding-bottom: 0;}
ul.Col3List { columns: 3; }
ul.Col3List > li {padding-bottom: 0;}
ul.Col4List { columns: 4; }
ul.Col4List > li {padding-bottom: 0;}

/* Logo Wrapper - For display a list of logo in grid */ 
 div.logoWrapper{display:grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 20px; justify-items: center; align-items: center;}
 div.logoWrapper img{margin:0 !important;}

 /* Remark style */
div.remarks{font-size:smaller; margin:20px 0;}
div.remarks > p {padding-bottom:0;}
div.remarks > div  * {padding-bottom:0; margin-bottom:0; line-height:1.6em}
div.remarks > div {margin-bottom:10px; margin-left:10px;}


/* Rotate banner pause button */
/* .rotateBtnPanel{position: absolute; right: 0; margin-top: 10px; background-color: #eeeeee; padding: 5px 15px; border-radius: 0 0 8px 8px; } */
.rotateBtnPanel{position: absolute; right: 0; background-color: #f5f5f5; padding: 5px 15px; border-radius: 0 0 8px 8px; top:0; z-index:10;display:block;}


.rotateBtnPanel a#resumeBtn {display:none;}


/* Download Badges with QR code image */
/* div.badgesWithQR{display:grid; grid-template-columns: 2fr 1fr; grid-column-gap:20px; justify-items: center; align-items: center;padding-bottom:0 !important;} */
div.badgesWithQR {display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; justify-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 0 20px; padding-bottom: 0 !important;}
div.badgesWithQR > div {-webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto;}
div.badgesWithQR > div:first-child {-ms-flex-preferred-size: 67%; flex-basis: 67%;}
div.badgesWithQR > div:last-child {-ms-flex-preferred-size: 33%; flex-basis: 33%;}

div.phoneQR{position:relative; top:40px;}
div.badgesWithQR .title{font-weight:600; font-size:1.2rem;}
.noTopBorder{border-top:none !important;}




	
/* Display on mobile only or desktop only */
.mobileOnly{display:none !important;}
.mobileBlockOnly{display:none !important;}
.desktopOnly{display:none !important;}
.desktopBlockOnly{display:none !important;}
.nonMobile{display:none !important;}
.nonMoileBlock{display:none !important;}

/* Yellow Banner - no fix height */
/* div.yellowTopBanner{display:grid; grid-template-columns: 1fr 2fr; align-items: center; grid-column-gap:20px; border: 1px solid #e1e1e1; background-color:#fff6d4; border-bottom:none;margin-bottom:20px;}
div.yellowTopBanner img{margin:0;}
div.yellowTopBanner .headline{font-size:1.25rem; font-weight:bold;}
div.yellowTopBanner .text{padding:0 20px;} */

div.yellowTopBanner {position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; border: 1px solid #e1e1e1; background-color: #fff6d4; border-bottom: none; margin-bottom: 20px;}
div.yellowTopBanner > div {-webkit-box-flex: 1;-ms-flex: 1 auto;flex: 1 auto;}
div.yellowTopBanner > div:first-child {max-width: 33%;}
div.yellowTopBanner > div:first-child img {margin: 0;}
div.yellowTopBanner > div:last-child {max-width: 66%;}
div.yellowTopBanner .text {padding: 0 20px; -webkit-box-flex: 3; -ms-flex-positive: 3; flex-grow: 3;}
div.yellowTopBanner .text .headline {font-size: 1.25rem; font-weight: bold;}


/* Help button */
.circleHelp {content:"?"; color:#bb4701; text-indent:0; width: 20px; height: 20px; text-align: center; line-height: 20px; border:1px solid #bb4701; display: block; border-radius: 50%; position: absolute; left:50%; top: 50%; margin:-10px -10px 0 0 ;}


/* Popup for Cookies */
div.cookiesPopup{background-color:#FFFCDF;width:100%; position:fixed; bottom:10px;padding:20px 50px 20px 20px;border: 1px solid #FEB914;z-index:1000;}
div.cookiesPopup a{text-decoration:underline;}
div.cookiesPopup .cookiesPopupClose{width:15px;height:15px;position:absolute;margin:auto; top:0; bottom:0;right:20px;}


/* Website Accessibility */
.sr-only { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; }

/* Step by Step Guide in horizontal */
.horizontalStep{margin:10px auto; overflow:hidden;}
.horizontalStep > .title{margin-bottom:10px;}
.horizontalStep > .title > .circle{ display:block; width:65px; height:65px; text-align: center; line-height: 65px; margin-bottom:10px; float: left; background-color: #4e4e4e; color: #fff; border-radius: 100%; font-weight: 700; margin-right: 10px; }
.horizontalStep > .title > .desc{ color: #4e4e4e; display: table-cell; vertical-align: middle; height: 65px; }
.horizontalStep > img{padding:10px;}


/* Step by Step in slide show */
.stepsSliderWrapper {position: relative;}
.stepsSliderWrapper > .stepsSlider {margin: 10px 40px; background-repeat:no-repeat; background-position:bottom right;}
.stepsSliderWrapper > .stepsSlider .stepSlide {overflow: auto; display: flex !important; display: -webkit-box; display: -ms-flexbox; align-items: center; gap: 20px;}
/*.stepsSliderWrapper > .stepsSlider .stepSlide > .text {width: 60%; margin-right:20px; float: left; margin-top: 50px;} */
.stepsSliderWrapper > .stepsSlider .stepSlide > .text {width: 50%; float: left;}

.stepsSliderWrapper > .stepsSlider .stepSlide > .text > .title {margin-bottom: 10px;}
.stepsSliderWrapper > .stepsSlider .stepSlide > .text > .title > .circle {display: block; width: 65px; height: 65px; text-align: center; line-height: 65px; margin-bottom: 10px; float: left; background-color: #4e4e4e; color: #ffffff; border-radius: 100%; font-weight: 700; margin-right: 10px;}
.stepsSliderWrapper > .stepsSlider .stepSlide > .text > .title > .desc {color: #4e4e4e; display: table-cell; vertical-align: middle; height: 65px;}
.stepsSliderWrapper > .stepsSlider .stepSlide > .text > p {font-size: 0.95em;}
/* .stepsSliderWrapper > .stepsSlider .stepSlide > .screen {width: 35%;  float: left;} */
.stepsSliderWrapper > .stepsSlider .stepSlide > .screen {width: 50%;  float: left;}
/* .stepsSliderWrapper > .stepsSlider .stepSlide > .screen >img {padding: 0;} */
.stepsSliderWrapper > .stepsSlider .stepSlide > .screen >img {padding: 0; max-height:600px;}
/* .stepsSliderWrapper > .stepsSlider .stepSlide > .screen >img {padding: 10px;} */
.stepsSliderWrapper > .controls {position: unset;}
/* .stepsSliderWrapper > .controls > .prevBtn{color: #ee6d1f; left: 0; bottom: 240px;} */
.stepsSliderWrapper > .controls > .prevBtn{color: #c54600; left: 0; bottom: 40%;}
.stepsSliderWrapper > .controls > .nextBtn{color: #c54600; right: 0; bottom: 40%;}
.stepsSliderWrapper > .controls > .numericControls {margin-left: 0; padding-left: 0;}
.stepsSliderWrapper > .controls > .numericControls > li{width:16px; height:16px; border-radius: 100%;}

.highlightText {color: #c54600;}
.largerText{font-size: 1.15em;}

/* flexRow */
.flexRow {display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; text-align: center; padding-left: 0 !important;}
.flexRow > li { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0px; width: 0; list-style-type: none !important;}
.flexRow > li > img { padding: 0; margin: 0 auto 10px auto !important; float: none;}


/* For new page survey */
.wrap2 {
	width:1180px;
	position:relative;
	margin:0 auto;
	padding:0 20px;
}
#header2 .wrap2:after{clear: both;display: block; content:""; }
#header2 .wrap2 .topNav .topNavMenu2 > li {border-left: none;}
#header2 .wrap2 .topNav .topNavMenu2 .othersNav2 > li:nth-child(2) {margin-right: 0;}

/* Common
----------------------------------------------------------------------------------------------------*/
#header2 { width:100%; padding: 20px 0 0 0; background-color: #fff; z-index: 101; position: relative;}

.logo2{width: 270px;	height: 49px; text-indent: -9999px;	display: block;	background: url(/common/images/logo.jpg) no-repeat left center;	float: left; background-size: contain; position: relative; top: -8px;}

.topNavMenu2{float: right;margin-top: 8px;}
.topNavMenu2 li{height: 20px; line-height: 20px; font-size: 16px;}
.topNavMenu2 > li.sectionMenuWrap{ border-left:none; }
.topNavMenu2 > li{ border-left:1px solid #d7d7d7;border-right:1px solid #f3f3f2;}
.topNavMenu2 > li:otherNavWrap2{ border-right:none }
.topNavMenu2 > li.carrerWrap{font-size: 16px; padding:0 25px;}
.topNavMenu2 li{	float: left;list-style:none;}


.topNavMenu2 li.othersNavWrap2{border-right: none;}
.othersNav2 {padding-left:25px;}
.othersNav2 > li:nth-child(1){margin-right: 43px;}
.othersNav2 > li:nth-child(2){margin-right: 35px;}
.othersNav2 a.btnSearch{position:absolute; left:0; top:0;  z-index:99; width: 20px; height: 19px; display:block; background:url(/common/images/iconSearch.png) no-repeat center center; text-indent: -99999px;}
.othersNav2 input.btnSearch{position:absolute; outline: none; cursor: pointer; right:15px; top:12px;  z-index:101; width: 20px; height: 19px; display:block; background:url(/common/images/iconSearch.png) no-repeat center center; text-indent: -99999px;}
.othersNav2 > li.fontsizeWrap2 a.fontsize-a{font-size: 14px;}
.othersNav2 > li.fontsizeWrap2 a.active{color: #000;}
.othersNav2 > li.fontsizeWrap2 a.fontsize-b{margin:0 7px; font-size: 16px;}
.othersNav2 > li.fontsizeWrap2 a.fontsize-c{font-size: 18px;}
.othersNav2 > li.fontsizeWrap2 a img { width: auto; vertical-align: inherit; opacity: 0.8; }
.othersNav2 > li.fontsizeWrap2 a.active img { opacity: 1; }

a.selectedLang2{position: relative;display: block; min-height: 11px; padding-right: 30px; font-size: 16px;}
a.selectedLang2:after, a.selectedLang2:before {width: 12px; height: 7px;border-left: 1px solid #bdbdbd;content: "";position: absolute;pointer-events: none;top: 7px;}
a.selectedLang2:after { transform: skew(-45deg); -webkit-transform: skew(-45deg); -ms-transform: skew(-45deg);	right:0px;}
a.selectedLang2:before { transform: skew(45deg); -webkit-transform: skew(45deg); -ms-transform: skew(45deg);   right: 6px;}

.langsListWrap2{position: relative; z-index: 99;}
.langsList2{padding:0 10px 0 10px; background:#fff; position: absolute; top: 25px; left:-10px; display: none; width: 66px;}
.langsList2 li{display: block;  font-size: 16px;}
.langsList2 li:last-child{margin-left: 8px;}
.langsList2 li a{font-size: 15px;}

.mobileMenu .topNavMenu2{background-color: #fff;}

/* For multiple yellow top banner */
.contentArea .showByDate > .yellowTopBanner2023 {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;gap: 0;background-color: #fff6d4;margin-bottom: 3px;}
.contentArea .showByDate > .yellowTopBanner2023 > .thumbnail {-webkit-box-flex: 1;-ms-flex: 1 0 33%;flex: 1 0 33%;max-width: 34%;}
.contentArea .showByDate > .yellowTopBanner2023 > .thumbnail img {margin: 0;padding: 0;}
.contentArea .showByDate > .yellowTopBanner2023 > .text {-webkit-box-flex: 3;-ms-flex: 3 1 auto;flex: 3 1 auto;margin: 0 20px;}
.contentArea .showByDate > .yellowTopBanner2023 > .text > .headline {font-size: 1.25rem;font-weight: bold;line-height: 1.6;margin: 0;padding: 0;}
.contentArea .showByDate > .yellowTopBanner2023 > .text > p {margin: 0;padding: 0;}
.contentArea .showByDate > .yellowTopBanner2023 > .text > .btn {margin: 20px 0 0 0;}
.contentArea .showByDate:nth-child(even) > .yellowTopBanner2023 > .thumbnail {-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2;}
.contentArea .showByDate:nth-child(even) > .yellowTopBanner2023 > .text {-webkit-box-ordinal-group: 2;-ms-flex-order: 1;order: 1;}


/* for MTRC notice */
ol.mtrc_flow {display: flex; gap: 30px; list-style-type: none; counter-reset: item; padding-left: 0; justify-content: center;}
ol.mtrc_flow li {flex: 1 1 0; text-align: center; list-style-position: inside; display:flex; align-items: start; gap: 20px; max-width: 23%;}
ol.mtrc_flow li.wide {flex: 2 1 0; max-width: 50%;}
ol.mtrc_flow li span > .num::before {counter-increment: item; content: counter(item, decimal); border: 1px solid #222222; border-radius: 50%; width:25px; height: 25px; text-align: center; vertical-align: middle; line-height:25px; display: inline-block; margin-right: 10px;}
ol.mtrc_flow li::after {content: ""; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 25px solid orange; display:inline-block; position: relative; top:30%; }
ol.mtrc_flow li:last-child::after {border-left: 25px solid transparent;}
ol.green_arrow li::after {border-left: 25px solid green;}
ol.blue_arrow li::after {border-left: 25px solid blue;}

.mtrc_slide .text {margin-left: 30px;}
.mtrc_slide .text .title {display: flex; align-items: flex-start;}
.mtrc_slide .text .title .circle {border: 1px solid #4e4e4e; color: #4e4e4e !important; background-color: transparent !important; width: 40px !important; height: 40px !important; line-height: 40px !important; font-size:26px;}
.mtrc_slide .text .title .desc {line-height: 40px !important;}
.mtrc_slide .screen {max-width:300px;}

.orange_slide_show > .controls > .nextBtn, .orange_slide_show > .controls > .prevBtn {color: transparent; font-size:0;} 
.orange_slide_show > .controls > .nextBtn::after {content: ""; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 25px solid orange; display:inline-block;} 
.orange_slide_show > .controls > .prevBtn::before {content: ""; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 25px solid orange; display:inline-block;} 
.orange_slide_show > .controls > .numericControls > li.current {background-color: orange;}
.orange_slide_show > .controls > .numericControls > li {border-color: orange;}
.blue_slide_show > .controls > .nextBtn, .blue_slide_show > .controls > .prevBtn {color: transparent; font-size:0;} 
.blue_slide_show > .controls > .nextBtn::after {content: ""; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 25px solid blue; display:inline-block;} 
.blue_slide_show > .controls > .prevBtn::before {content: ""; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 25px solid blue; display:inline-block;} 
.blue_slide_show > .controls > .numericControls > li.current {background-color: blue;}
.blue_slide_show > .controls > .numericControls > li {border-color: blue;}

.flex50 {display:flex; gap: 30px; flex-wrap: wrap;}
.flex50 > div {flex: 1 0 48%;}

/* table with same column width */
table.sameWidth {table-layout: fixed;}

/* list bullet style */
ol.upperRoman {list-style-type: upper-roman;}
ol.lowerRoman {list-style-type: lower-roman;}
ol.upperAlpha {list-style-type: upper-alpha;}
ol.lowerAlpha {list-style-type: lower-alpha;}
ol.numeric { list-style-type: decimal;}
ul.bullet {list-style-type: disc;}