@charset "utf-8";
html, body {margin:0; padding:0; border:0; width:100%; height:100%; font:400 16px/1.8 'Lato', Arial, sans-serif, Verdana, Helvetica; color:#333; -webkit-text-size-adjust:none;}
#form {height:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0; outline:0;}
html.sizeS, body.sizeS {font-size:16px;}
html.sizeM, body.sizeM {font-size:18px;}
html.sizeL, body.sizeL {font-size:20px;}
body:before {content: "desktop"; display: none;}	
a {outline: 0; text-decoration:none; cursor:pointer;}
table, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; vertical-align:top; }
table { border-collapse:collapse; border-spacing:0;}
fieldset,img { border:0; }
address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; }
.pageWrapper ol,.pageWrapper ul {list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;}
q:before,q:after { content:''; }
abbr,acronym { border:0; }
input, select, textarea, button {font-family:'Lato', 'MHei', STXihei, \5FAE\8EDF\6B63\9ED1\9AD4, Arial, sans-serif, Verdana, Helvetica; font-size:1rem; color:#666; -webkit-appearance:none; -webkit-border-radius:0px;}
*,*:before,*:after{box-sizing:border-box;}
img {max-width:100%;}
.clearfix {display: inline-block;}
.clearfix:after {content: " "; display: block; height: 0; clear: both; font-size: 0; visibility: hidden;}
.clearfix {display: block;}
.verMidOut {display: block; display: table; height: 100%; position: relative; width: 100%;}
.verMidMid {display: block; display: table-cell; top: 50%; vertical-align: middle; width: 100%;}
.verMidIn {display: block; position: relative; top: -50%; width: 100%;}
p {margin:0; padding:0 0 20px 0; line-height:1.8;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
.valign { display: inline-block; vertical-align: middle; height: 100%;}
.valign:after { display: inline-block; content: ' '; width: 1px; height: 100%; vertical-align: middle; visibility: hidden; }
.valign-item { display: inline-block; vertical-align: middle;}
.hiddenContent { display:none; }

.mobileElem {display:none;}
.clear{ clear: both; }
.color_blue{ color: rgb(26,163,207); }
.color_green{ color: #7BB52D; }


text.actvie{ fille: 'green'; }

/** ICON **/
.btn_playVideo{ width: 30px; height: 30px; position: relative; border-radius: 30px; }
.btn_playVideo.blue{ border: 2px solid rgb(26,163,207); cursor: pointer; -webkit-transition: all 300ms ease; transition: all 300ms ease;}
.btn_playVideo i{ width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; display: block; position: absolute; top: 0; right: -4px; left: 0; bottom: 0; margin: auto; }
.btn_playVideo.blue i{ border-left: 10px solid rgb(26,163,207); }
.btn_playVideo.blue i:before{ content: ''; }
.btn_playVideo.blue i:after{ content: ''; opacity: 0; }
.btn_playVideo.blue:hover{  border: 2px solid #2489AA; }
.btn_playVideo.blue:hover i{  border-left: 10px solid #2489AA; }
    
.icon.icon_switch_chart{ background: url(../images/icon_switch_chart.png) no-repeat center; width: 27px; height: 27px; background-size: 27px auto;  background-position: 0 0px; color: #D6D6D6; }
.icon.icon_switch_list{ background: url(../images/icon_switch_list.png) no-repeat center;  width: 27px; height: 27px; background-size: 27px auto;  background-position: 0 0px; color: #D6D6D6;  }
/** END ICON **/


/* VIDEO */
.videoOverlay {background-color:rgba(0,0,0,.5); top: 0; left: 0; width:100%; height:100%; position:fixed; width: 100%; height: 100%; z-index:1001; display:none;}
.videoContainer {border-radius: 4px; background-color:#FFF; width:80%; max-width: 55%; margin:100px auto 0 auto; padding:10px; z-index:1002; position:relative;}
.videoContainer .btnClose {position: absolute; right: -15px; top: -15px; width: 30px; height: 30px; margin-left: 0; background: url(../../images/BannerVideo/LayerCloseIcon.png) 0px no-repeat; z-index: inherit;}
.videoContainer .btnClose:hover {position: absolute; right: -15px; top: -15px; width: 30px; height: 30px; margin-left: 0; background: url(../../images/BannerVideo/LayerCloseIcon.png) -31px no-repeat; z-index: inherit;}
.videoContainer .videoPlayer {width:100%; padding-top:56.25%; position:relative;}
.videoContainer .videoPlayer iframe {width:100%; height:100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;}
.videoContainer .videoContent {position:relative; border-top:#E4E4E4 1px solid; margin-top:1px; min-height:70px; display:-webkit-flex; display:-ms-flexbox; display:flex;}
.videoContainer .videoContent .title {font-weight:bold; padding:0 0 0 20px; line-height:1.3; color:#555; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center;}
.videoContainer .videoContent .videoShare {position:absolute; top:21px; right:15px;}
.videoContainer .videoContent .videoShare span, .videoContainer .videoContent .videoShare a {display:inline-block; font-size:.875rem; margin-left:10px;}
.videoContainer .videoContent .videoShare a.iconFb {background-position:0 0;}
.videoContainer .videoContent .videoShare a.iconTwitter {background-position:0 -50px;}
.videoContainer .videoContent .videoShare a.iconWeibo {background-position:0 -100px;}
.videoContainer .videoContent .videoShare a.iconGooglePlus {background-position:0 -150px;}
.videoContainer .videoContent .videoShare a.iconEmail {background-position:0 -200px;}

@media (max-width:767px) {
	.videoContainer {border-radius: 4px; background-color:#FFF; width:95%; max-width: 95%; margin:100px auto 0 auto; padding:10px; z-index:1002; position:relative;}
}
/* END VIDEO */

/* MAIN STRUCTURE */
.pageWrapper {max-width:1920px; /*height:100%;*/ position:relative; margin:0 auto; padding:0 40px;}

.quickLinks {padding:20px 0 65px 0;}
.quickLinks .item {text-align:center;}
.quickLinks .item a {display:block; color:#545454; text-decoration:none; -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.quickLinks .item a .thumb {display:block; margin-bottom:20px;}
/* END MAIN STRUCTURE */

/* NAV */

.header {position: relative; }
.header ul,
.header ol { padding: 0; margin: 0; list-style: none;}
.header .logo { position: absolute; left: 0; top:32px; width: 185px; z-index: 200; -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.header .logo:after { display: inline-block; content: ' '; vertical-align: middle; width: 1px; height: 100%; visibility: hidden; }
.header .logo a { display: inline-block; position: relative; }
.header header {position:fixed; width:100%; left:0; top:0; z-index:999; -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.header header .topNav { height: 55px;}
.header header .topNav .links,
.header header .topNav .links ul,
.header header .topNav .tools,
.header header .topNav .tools ul {height: 100%;display: inline-block;}
.header header .topNav .links ul li { display: inline-block; height: 100%; text-align: center; float: left; }
.header header .topNav .links ul li a { display: inline-block; vertical-align: middle; height: 100%; min-width: 200px; padding-left:20px; padding-right:20px; font-weight: bold; color: #ADADAD; -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.header header .topNav .links ul li a:hover { text-decoration: none;}
.header header .topNav .links ul li a:after { display: inline-block; content: ' '; vertical-align: middle; width: 1px; height: 100%; visibility: hidden;}
.no-touch .header header .topNav .links ul li.household a:hover, .header header .topNav .links ul li.household a.active { background: #E27A2C;}
.no-touch .header header .topNav .links ul li.business a:hover, .header header .topNav .links ul li.business a.active { background: #114B86;}
.no-touch .header header .topNav .links ul li a:hover, .header header .topNav .links ul li a.active {  color: #FFFFFF;}
.header header .topNav .links ul li { border-color: #CCCCCC; border-style: solid; border-width: 0;}
.header header .topNav .links ul li:first-child { border-left-width: 1px;}
.header header .topNav .links ul li:first-child a.active { border-left-width: 0;}
.header header .topNav .links ul li:last-child { border-right-width: 1px;}
.header header .topNav .links ul li:last-child a.active { border-right-width: 0;}
.header header .topNav .tools { display: inline-block; float: right;}
.header header .topNav .tools ul:after { display: inline-block; content: ' '; vertical-align: middle; height: 100%; width: 1px; visibility: hidden; }
.header header .topNav .tools ul li {display: inline-block;text-align: center;margin: 0 5px;position: relative;height: 100%;float: left;vertical-align: middle;}
.header header .topNav .tools ul li a { text-decoration: none; font-weight: bold; -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.header header .topNav .tools ul li a:hover,
.header header .topNav .tools ul li a.active { border-bottom: #1AA3CF 4px solid;}
.header header .topNav .tools ul li a.echat { color: #E27A2C; background: none; width: auto;}

.header header .topNav .tools ul li.border-right { padding-right: 16px; margin-right: 16px;}
.header header .topNav .tools ul li.border-right:before {content: ' ';display: block;width: 1px;height: 12px;background: #CCC;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.header header .topNav .tools ul li:after { display: inline-block; content: ' '; width: 1px; height: 100%; vertical-align: middle; visibility: hidden; }

.header header .topNav .tools li > a { display: inline-block; width: 25px; height: 30px; background: url(../images/nav_sprite.png) no-repeat 0 0; background-size: 50px auto; -webkit-transition: all 300ms ease; transition: all 300ms ease; vertical-align: middle;}
.header header .topNav .tools li > a.toolFont { background-position: 0 -300px;}
.header header .topNav .tools li > a.toolFont:hover,
.header header .topNav .tools li > a.toolFont.active { background-position: right -300px;}
.header header .topNav .tools li > a.toolLang { background-position: 0 -400px;}
.header header .topNav .tools li > a.toolLang:hover,
.header header .topNav .tools li > a.toolLang.active { background-position: right -400px;}
.header header .topNav .tools li > a.toolSearch { background-position: 0 -500px;}
.header header .topNav .tools li > a.toolSearch:hover,
.header header .topNav .tools li > a.toolSearch.active { background-position: right -500px;}

nav { background: rgba(255,255,255,1); height: 118px; position: relative; }
.header .navs { padding-left: 270px; }

.header.short .logo { top: 57px; height: auto;}

.toolDropdown {display:none; overflow:hidden; position:absolute; top:43px; right:1px; background:#FFF; border-radius:4px; -webkit-box-shadow: 1px 1px 3px 1px rgba(0,0,0,.25); box-shadow: 1px 1px 3px 1px rgba(0,0,0,.25); z-index: 1000;}
.toolDropdown > div {display:inline-block; padding:10px;}
.toolDropdown > div:after {content: " "; display: block; height: 0; clear: both; font-size: 0; visibility: hidden;}
.toolDropdown > div {display: block;}
.toolDropdown a {float:left; width:32px; height:32px; line-height:32px; border-radius:100%; position:relative; display:inline-block; margin:0 2px; background-repeat:no-repeat; background-color:#E3E3E3; background-size:100% auto; color:#777; text-align:center; text-decoration:none;}
.no-touch .toolDropdown a:hover,
.toolDropdown a.active {background-color:#1AA3CF; color:#FFF; -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.fontSizeDropdown {width:128px;}
.fontSizeDropdown a.sizeS {font-size:13px;}
.fontSizeDropdown a.sizeM {font-size:18px;}
.fontSizeDropdown a.sizeL {font-size:24px;}
.langDropdown {width:95px;}
.toolLanguageContainer a {font-size:16px;}
.toolLanguageContainer a.tc,
.toolLanguageContainer a.sc {font-family:'MHei', STXihei, \5FAE\8EDF\6B63\9ED1\9AD4, Arial, PMingLiU, Helvetica, sans-serif;}

.header header .mainNav { border-top: #D6D6D6 1px solid; height: 63px;}
.header header .mainNav ul { height: 100%;}
.header header .mainNav ul li { display: inline-block; position: relative; width:25%; height: 100%; float: left;}
.loginSuccess .header header .mainNav ul li {width: 25%;}
.header header .mainNav ul li:first-child:after,
.header header .mainNav ul li:before {content: ' ';display: block;width: 1px;height: 12px;background: #CCC;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.header header .mainNav ul li:first-child:after { right: auto; left: 0;}
.header header .mainNav ul li > a { display: block; height: 100%; line-height: 28px; text-align: center; color: #666666; font-weight: bold; -webkit-transition:all 300ms ease; transition:all 300ms ease; border-bottom: 4px solid rgba(255,255,255,0);}
.header header .mainNav ul li.mainItem > a {display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; padding-left:15px; padding-right:15px;}
.header header .mainNav ul li > a:hover { text-decoration: none;}
.header header .mainNav ul li > a:hover,
.header header .mainNav ul li > a.active { color: #E27A2C; border-bottom: 4px solid #E27A2C;}
.header header .mainNav ul li.accountNav { display: none;}

.header header .mainNav ul li .subnav {position:absolute; width:100%; background-color:#FFF; padding:10px 20px; -webkit-box-shadow:0px 0px 10px -3px rgba(0,0,0,.25); box-shadow:0px 0px 10px -3px rgba(0,0,0,.25); display:none;}
.header header .mainNav ul li .subnav li {display:block; width:100%; float:none; height:auto;}
.header header .mainNav ul li .subnav li:after, .header header .mainNav ul li .subnav li:before {display:none;}
.header header .mainNav ul li .subnav li a {display:block; padding:10px 0 10px 20px; height:auto; line-height:1.3; text-align:left; border-bottom:none; position:relative;}
.header header .mainNav ul li .subnav li a:before {content:''; width:7px; height:7px; border:2px solid #E27A2C; margin-left:-5px; position:absolute; top:17px; left:4px; content:''; border-top:none; border-left:none; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transition:all 300ms ease; transition:all 300ms ease;}

/* Login Success */
.loginSuccess .header header .mainNav ul li { width: 20%; }
.loginSuccess .header header .mainNav ul li.accountNav { display: block; background: #6FAE17; color: #FFFFFF; position:relative;}
.loginSuccess .header header .mainNav ul li:nth-last-of-type(2):before,
.loginSuccess .header header .mainNav ul li.accountNav:before { display: none;}
.loginSuccess .header header .mainNav ul li.accountNav > a { color: #FFFFFF; position: relative; text-align:left; font-size:15px; border-bottom:none;}
.no-touch .loginSuccess .header header .mainNav ul li.accountNav > a:hover { border: 0; }
.loginSuccess .header header .mainNav ul li.accountNav i.icon { background: url(../images/icon_account.png) right center no-repeat; background-size:200% auto; margin:0 8px 0 20px; position:absolute; height:100%;}
.loginSuccess .header header .mainNav ul li.accountNav > a .username {line-height:1.1; padding-left:55px; padding-right:45px; line-height:18px; height:100%; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; text-align:left;}
.loginSuccess .header header .mainNav ul li.accountNav i.arrow  { position: absolute; right: 30px; top: 18px; /*transform: translateY(-50%) rotate(90deg);*/ width: 16px; height: 16px; display: inline-block; -webkit-transition:all 300ms ease;transition:all 300ms ease; transform-origin: center top;}
.loginSuccess .header header .mainNav ul li.accountNav i.arrow:after {content:''; width:10px; height:10px; border:2px solid #fff; margin-top:-10px; margin-left:14px; display:inline-block; border-top:none; border-left:none; vertical-align:middle; -webkit-transform:rotate(45deg); transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transition:all 300ms ease;transition:all 300ms ease; }
.loginSuccess .header header .mainNav ul li.accountNav.active a i.arrow {top:24px;}
.loginSuccess .header header .mainNav ul li.accountNav.active a i.arrow:after {-webkit-transform:rotate(225deg); transform:rotate(225deg); -ms-transform:rotate(225deg);}
.myAccountPulldown {display:none; position:absolute; top:62px; right:0; background:#6FAE17; overflow:hidden; width:100%; z-index:1;}
.myAccountPulldown .myAccountInner {padding:10px 5px 20px 5px; overflow:hidden;}
.myAccountPulldown div.icon {float:left; background:url(../images/icon_account.png) right center no-repeat; background-size:auto 80%; width:40px; height:40px;}
.myAccountPulldown .btnContainer {float:left; width:calc(100% - 40px); padding:0 0 0 5px; text-align:center;}
.myAccountPulldown .btnContainer a.button {color:#FFF; line-height:1.3; display:block;}
.myAccountPulldown .btnContainer a.btntxt {color:#FFF; font-size:.8125rem;}
.myAccountPulldown a.btnReminder {display:none; font-size:1rem; margin-top:20px;}

/*.loginSuccess .header header .mainNav ul li.accountNav i.arrow:before,
.loginSuccess .header header .mainNav ul li.accountNav i.arrow:after { content: ''; position: absolute; height: 3px; width: 12px; top: 50%; left: 0; margin-top: -1px; background: #FFFFFF; }
.loginSuccess .header header .mainNav ul li.accountNav i.arrow:before { transform: rotate(45deg); margin-top: -6px; margin-left: 3px;}
.loginSuccess .header header .mainNav ul li.accountNav i.arrow:after { transform: rotate(-45deg); margin-top: 1px; margin-left: 3px;}
.loginSuccess .header header .mainNav ul li.accountNav a:hover i.arrow { transform: rotate(-90deg); right: 6px; }*/

.loginSuccess h1.pageTitle {color:#7BB52D;}

/* SUB NAV */
.subnavContainer .orange {background-color:rgba(226,122,44,.9);}

.subnavContainer {position:relative; height:0; overflow:hidden; transition:200ms ease-out; -ms-transition:200ms ease-out; -webkit-transition:200ms ease-out;}
.subnavContainer .subnav {display:none; position:absolute; width:100%; padding-left:1%; padding-right:1%;}
.subnavContainer .subnav.eService {padding-left:0; padding-right:0;}
.subnavContainer .subnav a {color:#FFF;}
.subnavContainer .subnav .nav-col-single, .subnavContainer .subnav .nav-col-double, .subnavContainer .subnav .nav-col-banner {float:left; position:relative; min-height:1px; padding-left:2%; padding-right:2%;}
.subnavContainer .subnav .nav-col-single {width:17.5%;}
.subnavContainer .subnav .nav-col-double {width:20%;}
.subnavContainer .subnav .nav-col-banner {width:30%; float:right;}
.subnavContainer .row {margin:0; color:#FFF; line-height:1.3;}
.subnavContainer.desktopElem .row h2 {display:none;}
.subnavContainer .eService .row {display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden;}
.subnavContainer .eService .row .subnavContent {-webkit-flex:1; -ms-flex:1; flex:1;}
.subnavContainer .social {background-color:rgba(111,174,23,.9);}
.subnavContainer .household {background-color:rgba(226,122,44,.9);}
.subnavContainer .business {background-color:rgba(0,107,174,.9);}
.subnavContainer .subnav.social .promoBanner a .promoTitle {color:#509E30;}
.subnavContainer .subnav.household .promoBanner a .promoTitle {color:#E58741;}
.subnavContainer .subnav.business .promoBanner a .promoTitle {color:#19A3CE;}
.subnavContainer .subnavContent {padding-top:40px; padding-bottom:20px ;padding-right:3%; padding-left:3%;}
.subnavContainer .subnavContent h3 {font-size:1.375rem; line-height:1.1; margin-bottom:18px; position:relative;}
.subnavContainer .subnavContent .loginForm h3 {padding-left:36px;}
.subnavContainer .subnavContent .loginForm h3:before {content:''; display:block; left:0; top:1px; position:absolute; width:26px; height:26px; background:url(../images/icon_login.png) no-repeat 0 50%; background-size:auto 100%;}
.subnavContainer .subnavContent .textField {padding-bottom:10px;}
.subnavContainer .subnavContent .textField input[type=text] {width:100%; border:rgba(255,255,255,.6) 1px solid; background-color:transparent;  border-radius:4px; height:42px; line-height:42px; color:#FFF; padding-left:18px;}
.subnavContainer .subnavContent .btnContainer {display:inline-block; padding:0 0 20px 0;}
.subnavContainer .subnavContent .btnContainer:after {content: " "; display: block; height: 0; clear: both; font-size: 0; visibility: hidden;}
.subnavContainer .subnavContent .btnContainer {display: block;}

.subnavContainer .subnavContent.listBlock ul li {font-size:0.875rem; position:relative; padding:0 0 15px 20px;}
.subnavContainer .subnavContent.listBlock ul li:before {content:''; border:1px #FFF solid; border-radius:100%; background-color:transparent; width:6px; height:6px; display:block; position:absolute; top:7px; left:2px;}
.subnavContainer .subnav .navList {padding-top:30px; padding-bottom: 30px;}
.subnavContainer .subnav .navList ul li {position:relative;}
.subnavContainer .subnav .navList ul li:before {content:''; border-radius:100%; display:block; position:absolute;}
.subnavContainer .subnav .navList > ul > li:before {border:1px #FFF solid; background-color:transparent; width:6px; height:6px; top:7px; left:2px;}
.subnavContainer .subnav .navList ul li a {display:inline-block; padding-left:20px; padding-bottom:15px;}
.subnavContainer .subnav .navList > ul > li > a {font-weight:bold;}
.subnavContainer .subnav .navList > ul > li > ul > li:before {width:5px; height:5px; top:8px; left:3px;}
.subnavContainer .subnav.orange .navList > ul > li > ul > li:before {background-color:#B15918;}
.subnavContainer .subnav.blue .navList > ul > li > ul > li:before {background-color:#104B70;}
.subnavContainer .subnav.green .navList > ul > li > ul > li:before {background-color:#32621E;}
.subnavContainer .subnav .navList > ul > li > ul {display:inline-block;}
.subnavContainer .subnav .navList > ul > li > ul:after {content: " "; display: block; height: 0; clear: both; font-size: 0; visibility: hidden;}
.subnavContainer .subnav .navList > ul > li > ul {display: block;}
.subnavContainer .subnav .navList > ul > li {padding-right:3%;}
.subnavContainer .subnav .navList.nav-col-single > ul > li {}
.subnavContainer .subnav .navList.nav-col-double > ul > li {float:left; width:50%;}
.subnavContainer .subnav .navList > ul > li a {font-size:0.875rem;}
.subnavContainer .subnav .promoBanner a {display:block; max-width:300px; margin:45px auto 45px auto;}
.subnavContainer .subnav .promoBanner a span {display:block;}
.subnavContainer .subnav .promoBanner a img {border-top-left-radius:4px; border-top-right-radius:4px;}
.subnavContainer .subnav .promoBanner a .promoContent {background-color:#FFF; border-bottom-left-radius:4px; border-bottom-right-radius:4px; text-align:center; padding:10px 5% 20px 5%;}
.subnavContainer .subnav .promoBanner a .promoTitle {font-size:1.25rem; line-height:1.1; padding-bottom:5px;}
.subnavContainer .subnav .promoBanner a .promoOffer {color:#666; font-size:0.875rem;}

.subnavContainer .subnav.orange .navList > ul.solid li:before { background-color: #B15918; border: 0;}
.subnavContainer .subnav .navList > ul.solid li a { font-weight: normal;}
.subnavContainer .subnav ul li { display: inline-block; float: left; width: 20%;}
.subnavContainer .subnav ul:after { display: inline-block; content: ' '; clear: both; min-height: 1px;}
.subnavContainer .subnav.openCloseAccount ul li {width:33.3333%;}
.subnavContainer .subnav.selfService ul li {width:20%;}
.subnavContainer .subnav.helpSupport ul li {width:25%;}

/* END SUB NAV */
/* END NAV */

/* HIDDEN */
body.active {width:100%; height:100%; position:fixed;}
.bodyOverlay {display:none; background:rgba(0,0,0,.5); width:100%; height:100%; position:fixed; z-index:10001;}
.overlayContainer {display:none;background:#FFF;width:550px;height:100%;max-height:100%;position:fixed;z-index:10001;right:-100%;top:0;padding:30px 10px 10px 40px;-webkit-transition:right 300ms ease;transition:right 300ms ease;}
.overlayContainer a.btnClose {position:absolute; top:34px; right:47px; width:25px; height:25px; display:block;}
.overlayContainer .btnClose:before, .overlayContainer .btnClose:after {content:''; border-top:#1AA3CF 2px solid; width:33px; height:1px; position:absolute; top:11px; left:-4px;}
.overlayContainer .btnClose:before {-moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.overlayContainer .btnClose:after {-moz-transform:rotate(135deg); -ms-transform:rotate(135deg); -webkit-transform:rotate(135deg); transform:rotate(135deg);}
.overlayContainer h2 {font-size:2rem; font-weight:bold; color:#1AA3CF; padding:0 15px 18px 0; margin-right:30px; border-bottom:1px #DCDCDC solid;}
/* END HIDDEN */

/* SEARCH */
/* Search starts */
.searchForm {display:inline-block; margin:30px 30px 30px 0; position:relative;}
.searchForm:after {content: " "; display: block; height: 0; clear: both; font-size: 0; visibility: hidden;}
.searchForm {display: block;}
.searchForm .cate, .searchResultsContainer .cate {float:left; width:155px;}
.searchForm .cate a, .searchResultsContainer .cate a {display:block; background-color:#1AA3CF; border-top-left-radius:4px; border-bottom-left-radius:4px; height:62px; line-height:62px; color:#FFF; padding-left:15px; text-decoration:none;}
.searchForm .cate a:after, .searchResultsContainer .cate a:after {content:''; width:12px; height:12px; border:2px solid #fff; margin-top:-10px; margin-left:14px; display:inline-block; border-top:none; border-left:none; vertical-align:middle; -webkit-transform:rotate(45deg); transform:rotate(45deg); -ms-transform:rotate(45deg);}
.keywords {float:left; width:calc(100% - 155px); position:relative;}
.keywords input[type=text] {width:100%; height:62px; line-height:62px; padding-left:20px; border:#CCC 1px solid; border-left:none; border-top-right-radius:4px; border-bottom-right-radius:4px;}
.keywords input[type=text]::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color:#;}
.keywords input[type=text]::-moz-placeholder { /* Firefox 19+ */ color:rgba(153,153,153,.8);}
.keywords input[type=text]:-ms-input-placeholder { /* IE 10+ */ color:rgba(153,153,153,.8);}
.keywords input[type=text]:-moz-placeholder { /* Firefox 18- */ color:rgba(153,153,153,.8);}
.keywords .submitSearch {position:absolute; top:1px; right:1px; width:60px; height:60px; border:none; background:url(../images/icon_search.png) no-repeat 50% 50%; background-size:18px auto;}
.searchForm .cateDropdown, .searchResultsContainer .cateDropdown {display:none; position:absolute; top:60px; left:0; background-color:#1AA3CF; width:100%; color:#FFF; border-bottom-left-radius:4px; border-bottom-right-radius:4px; padding:0 25px;}
.searchForm .cateDropdown ul, .searchResultsContainer .cateDropdown ul {padding:15px 0 15px 0;}
.searchForm .cateDropdown ul li, .searchResultsContainer .cateDropdown ul li {padding-bottom:6px;}

input[type=checkbox].custCheck {opacity:0; position:absolute; float: left; width:21px;}
input[type=checkbox].custCheck + label {margin:0; clear:none; display:inline-block; padding:0 0 0 40px; cursor:pointer; background-repeat:no-repeat; background-position:0 3px; background-size:21px auto;}
input[type=checkbox].custCheck + label {background-image:url(../images/icon_checkbox.png);}
input[type=checkbox].custCheck:checked + label {background-position:0 -47px;}
input[type=checkbox].custCheck + label + .argeeTxt {display:inline-block; min-height:31px; padding-top:2px; vertical-align:top; }
/*.fieldItem.sub .argeeTxt{ max-width: 224px;  }*/
.searchContainer .quickLinks {margin:0 30px 30px 0;}
.searchContainer .quickLinks h3 {font-size:1.125rem; font-weight:bold; line-height:1.3; color:#666; padding:0 10px 15px 10px; border-bottom:#DCDCDC 1px solid;}
.searchContainer .quickLinks .links {padding:15px 10px 0 0;}
.searchContainer .quickLinks .links li {display:inline-block;}
.searchContainer .quickLinks .links a {display:inline-block; color:#19A3CE; margin-left:10px; margin-right:10px; padding-bottom:2px;}
/* END SEARCH */

/* ECHAT */
/*.eChat { position: absolute; bottom: 0; right: 40px; width: 300px; height: 380px; box-shadow: 0 0 5px 0 rgba(0,0,0,.25);}
.eChat .panel .header { display: block; height: 50px; line-height: 50px; font-weight: bold; font-size: 1.250rem; color: #FFFFFF; padding: 15px;}
.eChat .panel .header i.eChat { height: 20px; width: 20px;}
.eChat .panel .content { background: #EEEEEE; padding: 15px;}*/
/* END ECHAT */

/* FOOTER */
#footer { display: block; height: 254px; vertical-align: middle; position: relative; }
#footer .row { margin: 0;}
#footer .row + .row { margin-top: 20px;}
#footer .sectionContainer { padding: 55px 0; background: #19A3CE; height: 100%;}
#footer .section { text-align: center; position: relative; height: 110px;}
#footer .section .content { display: inline-block; vertical-align: middle;}
/*#footer .section .content:after { display: inline-block; content: ' '; width: 1px; height: 100%; vertical-align: middle; visibility: hidden; }*/
#footer .section .sectionTitle { font-size: 0.875rem; font-weight: bold; color: #1A3862; }
#footer .section .sectionContent { color: #FFFFFF;}
#footer .section:after { display: inline-block; content: ' '; width: 1px; height: 68px; position: absolute; right: 0; top: 50%; background: rgba(255,255,255,.5); transform: translateY(-50%);}
#footer .section:nth-last-of-type(1):after { display: none; }
#footer .section .sectionContent .large { font-size: 2.625rem; font-weight: bold; line-height: normal;}
#footer .section .sectionContent .large a {color:#FFF;}
#footer .section.eChat .sectionContent .large { font-size: 1.750rem;}
#footer .section.eChat .sectionContent i.icon { background: url(../images/echat.png) 0 0 no-repeat; width: 38px; height: 38px; margin-right: 10px;}
#footer .section.eChat .sectionContent a { color: #FFFFFF;}
.no-touch #footer .section.eChat .sectionContent a:hover { text-decoration: none;}

.appContainer {padding-top:3px;}
.appContainer a {display:inline-block; vertical-align:middle; line-height:normal; margin:0; width:82px; height:82px; position:relative; font-size:0; line-height:0;}
.appContainer a:before {content:''; display:block; width:60px; height:60px; border-radius:10px; margin:11px auto 0 auto; background-size:auto 100%; background-repeat:no-repeat; background-position:0 0;}
.appContainer a:after {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; margin:0 auto; background-size:auto 100%; background-repeat:no-repeat; background-position:-100px 0; -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.appContainer a.appApple:before {background-image:url(../images/icon_apple.png);}
.appContainer a.appApple:after {background-image:url(../images/icon_apple.png);}
.appContainer a.appTowngas:before {background-image:url(../images/icon_googleplay.png);}
.appContainer a.appTowngas:after {background-image:url(../images/icon_googleplay.png);}
.appContainer a.appHuawei:before {background-image:url(../images/icon_Huawei.png);}
.appContainer a.appHuawei:after {background-image:url(../images/icon_Huawei.png);}
.appContainer a.active:after {opacity:1;}

.appContainer {padding-top:3px;}
.appContainer a {display:inline-block; vertical-align:middle; line-height:normal; margin:0; width:82px; height:82px; position:relative; font-size:0; line-height:0;}
.appContainer a:before {content:''; display:block; width:60px; height:60px; border-radius:10px; margin:11px auto 0 auto; background-size:auto 100%; background-repeat:no-repeat; background-position:0 0;}
.appContainer a:after {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; margin:0 auto; background-size:auto 100%; background-repeat:no-repeat; background-position:-100px 0; -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.appContainer a.appApple:before {background-image:url(../images/icon_apple.png);}
.appContainer a.appApple:after {background-image:url(../images/icon_apple.png);}
.appContainer a.appTowngas:before {background-image:url(../images/icon_googleplay.png);}
.appContainer a.appTowngas:after {background-image:url(../images/icon_googleplay.png);}
.appContainer a.appHuawei:before {background-image:url(../images/icon_Huawei.png);}
.appContainer a.appHuawei:after {background-image:url(../images/icon_Huawei.png);}
.appContainer a.active:after {opacity:1;}
.spaneServicePhone {
	display: inline-block;
	width: 60px;
	height: 60px;
	background: #FFF url(../images/icon-phone-blue.png) no-repeat;
	background-size: 40%;
	background-position: center;
	border-radius: 50px;
}
.spaneServicePhone:hover {
		display: inline-block;
		width: 60px;
		height: 60px;
		background: #02648e url(../images/icon-phone-white.png) no-repeat;
		background-size: 40%;
		background-position: center;
		border-radius: 50px;
}
.spaneServiceInternet {
	display: inline-block;
	width: 60px;
	height: 60px;
	background: #FFF url(../images/icon-internet-blue.png) no-repeat;
	background-size: 40%;
	background-position: center;
	border-radius: 50px;
}

.spaneServiceInternet:hover {
		display: inline-block;
		width: 60px;
		height: 60px;
		background: #02648e url(../images/icon-internet-white.png) no-repeat;
		background-size: 40%;
		background-position: center;
		border-radius: 50px;
}
.spaneServiceGPS {
	display: inline-block;
	width: 60px;
	height: 60px;
	background: #FFF url(../images/towngas-gps-bluecolor.png) no-repeat;
	background-size: 40%;
	background-position: center;
	border-radius: 50px;
}

.spaneServiceGPS:hover {
		display: inline-block;
		width: 60px;
		height: 60px;
		background: #02648e url(../images/towngas-gps-whitecolor.png) no-repeat;
		background-size: 40%;
		background-position: center;
		border-radius: 50px;
}
.footerLinks { text-align: center;}
.footerLinks .copyright {font-size:13px; padding-right:27px;}
.footerLinks .copyright a {position:relative; margin:0 15px 0 15px; color: #FFFFFF; text-decoration:none;}
.footerLinks .copyright a:before {content:" "; display:block; width:1px; height:12px; background:#FFF; position:absolute; left:-15px; top:50%; margin-top:-6px;}
.footerLinks .copyright a:first-child:before {display:none;}
.footerLinks .copyright span {font-family:Arial, Helvetica, sans-serif; color: #FFFFFF;}
.footerLinks_copyright_aLink_adjustPosition {display:block;}
/* END FOOTER */

/* ICONS */
i.icon { display: inline-block; margin: 0 5px 0 0; background-position: 0 0; background-repeat: no-repeat; width: 25px; height: 25px;}

.mobileNav i.icon,
.header i.icon { background-image: url(../images/nav_sprite.png); display: inline-block; vertical-align: middle;}
.icon.household { background-position: 0 0;}
.no-touch a:hover .icon.household, a.active .icon.household { background-position: right 0;}
.icon.business { background-position: 0 -100px;}
.no-touch a:hover .icon.business, a.active .icon.business { background-position: right -100px;}
.icon.echat { background-position: 0 -200px;}
.no-touch a:hover .icon.echat, a.active .icon.echat { background-position: 0 -200px;}

.header .icon.member { background-image: url(../images/account_sprite.png); display: inline-block; vertical-align: middle;}

.icon.arrow { background-image: url(../images/arrow_sprite.png); display: inline-block; vertical-align: middle;}
.active > .icon.arrow { background-image: url(../images/arrow_sprite.png); display: inline-block; vertical-align: middle;}

#footer .icon.eChat { background-image: url(../images/account_sprite.png); display: inline-block; vertical-align: middle;}

.header i.login, .loginContainer.desktop i.login { background-image: url(../images/icon_login.png); background-size: 100%;}
#divMobile i.login, .loginContainer.desktop i.login { background-image: url(../images/icon_login.png); background-size: 100%;vertical-align:middle}
/* END ICONS */

/* MAIN CONTENT */
.row {margin-left:-10px; margin-right:-10px;}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {padding-right:10px; padding-left:10px;}
.contentContainer {background: #F4F4F4; margin-top:118px; padding: 45px 50px 35px 50px;}
h1.pageTitle {font-weight: bold; color: #E27A2C; font-size: 2em; line-height:1.3; padding-bottom:25px; font-weight:bold;}
.hozBox {display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; padding-bottom:20px;}
.hozBox > div {display:-webkit-flex; display:-ms-flexbox; display:flex;}
.hozBox > div > *, .meterChart .chart, .boxInner, .pageBox > div {width:100%; border-radius:4px; -webkit-box-shadow:0px 0px 10px -3px rgba(0,0,0,.25); box-shadow:0px 0px 10px -3px rgba(0,0,0,.25);}
.meterChart .chartMainTitle{ position: absolute; top: 20px; left: 0; z-index: 99; right: 0; margin: 0 auto; text-align: center; padding: 0 10px; font-size: 1.5rem; font-weight: 600; opacity: 0; }
.boxInner {background:#FFF; padding:30px 30px 50px 30px; margin-bottom:20px;}
.appointmentDetails .boxInner{ position: relative; }
.pageBox ul {background:#FFF; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; overflow:hidden;}
.pageBox ul li {-webkit-flex-direction:column; flex-direction:column; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:center; justify-content:center;}
.pageBox ul .image {width:50%; background-repeat:no-repeat; background-size:cover; background-position:center;}
.pageBox ul .phaseBox {width:50%; padding:20px 40px 20px 40px; line-height:1.3;}
.pageBox ul .phaseBox h2 {font-size:1.75rem; line-height:1.3; padding-bottom:12px;}
.pageBox ul .phaseBox h3 {font-size:1.125rem;}
.pageBox ul .phaseBox h3 a {font-weight:bold;}
.loginBox {background:#6FAE17;}
/* Step */
.stepsInner {padding-top:20px; padding-left:0; padding-right:0;}
.stepsContainer {margin-top:0;}
.stepsContainer .progressBar {height:10px; background:#E0E0E0;}
.progressBar span {font-size:0; line-height:0; height:100%; display:block; background-color:#19A3CE;}
.loginSuccess .progressBar span  {background-color:#E27A2C;}
.total3.step1 .progressBar span {width:17%;}
.total3.step2 .progressBar span {width:50%;}
.total3.step3 .progressBar span {width:83.5%;}
.total3.step4 .progressBar span {width:100%;}
.total4.step1 .progressBar span {width:12.5%;}
.total4.step2 .progressBar span {width:37.5%;}
.total4.step3 .progressBar span {width:62.5%;}
.total4.step4 .progressBar span {width:87.5%;}
.total4.step5 .progressBar span {width:100%;}

.total2.step1 .progressBar span {width: 31.33333%; }
.total2.step2 .progressBar span {width: 68%; }
.total2.step3 .progressBar span {width: 100%; }

.total5.step0 .progressBar span {width:16.6%;}
.total5.step1 .progressBar span {width:33.3%;}
.total5.step2 .progressBar span {width:49.8%;}
.total5.step3 .progressBar span {width:66.4%;}
.total5.step4 .progressBar span {width:83%;}
.total5.step5 .progressBar span {width:100%;}


.steps {display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; overflow:hidden;}
.steps:after {content:''; border-bottom:#D2D2D2 1px solid; clear:both; width:100%; display:block; margin:30px 30px 0 30px;}
.steps li {-webkit-flex-direction:column; flex-direction:column; text-align:center; padding:0 20px;}
.total2 .steps li {width: 26%; margin-left: 19%; }
.total2 .steps li:nth-child(2) { margin-left: 9.5%; }
.total3 .steps li {width:33.33333333%;}
.total4 .steps li {width:25%;}
.total5 .steps li {width: 20%;}
.steps .step {display:block; margin:0 auto; border-radius:50%; width:50px; height:50px; color:#FFF; font-size:1.25rem; line-height:50px; background-color:#CCC;}
.steps .done .step, .steps .current .step {background-color:#19A3CE ;-webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,.3);
box-shadow: 1px 1px 5px 0px rgba(0,0,0,.3);}
.steps .done .step {background-image:url(../images/icon_check.png); background-position:center; background-repeat:no-repeat; background-size:20px auto; text-indent:-9999px;}
.loginSuccess .steps .done .step, .loginSuccess .steps .current .step {background-color:#E27A2C;}
.steps .name {font-size:0.875rem; font-weight:bold; padding-top:10px; line-height:1.3;}
/* Forms */
.pageInner h2 {font-size:1.5rem; line-height:1.5; font-weight:bold;}
.pageInner .formsContainer h2 {padding-right:30px; padding-bottom:15px; font-weight:normal;}
.pageInner .intro {margin-bottom:20px;}
.pageInner .content.borderTop{ border-top: 1px #CCC solid; margin-top: 15px; padding-top: 20px; }
.formsContainer {padding:35px 55px 0 55px; position:relative;}
.formsContainer h3 {font-size:1.5rem; line-height:1.5; color:#79B71B; padding-bottom:15px;}
.formsContainer.noPadd{ padding: 0; }
.loginSuccess .formsContainer h3 {color:#19A3CD;}
.formsContainer .btnQuestion {position:absolute; width:36px; height:36px; top:25px; right:30px; display:block; border-radius:50%; background:url(../images/icon_question_mark.png) no-repeat center #E27A2C; background-size:10px auto; -webkit-transition: all 300ms ease; transition: all 300ms ease;}
.formsContainer .btnSwitchChartList { position:absolute; top: 6px; right:30px; display:block; -webkit-transition: all 300ms ease; transition: all 300ms ease; }
.formsContainer .btnSwitchToChart, .formsContainer .btnSwitchToList{ float: right; }
.formsContainer .btnSwitchToChart > i, .formsContainer .btnSwitchToList >i{ -webkit-transition: all 300ms ease; transition: all 300ms ease; }
.formsContainer .btnSwitchToChart{  }
.formsContainer .btnSwitchToList{  }
.formsContainer .btnSwitchToList:hover >i, .formsContainer .btnSwitchToList.active >i ,
.formsContainer .btnSwitchToChart:hover >i, .formsContainer .btnSwitchToChart.active >i { background-position: 0 -100px; }
.btnSwitchToChart.active >i, .btnSwitchToList.active >i { background-position: 0 -100px; }
.no-touch .formsContainer .btnQuestion:hover {background-color:#E15A00;}
.formsContainer .btnHelp {width:24px; height:24px; display:inline-block; border-radius:50%; background:url(../images/icon_exclamation_mark.png) no-repeat center #E27A2C; background-size:3px auto; vertical-align:middle; margin-left:5px; -webkit-transition: all 300ms ease; transition: all 300ms ease;}
.no-touch .formsContainer .btnHelp:hover, .formsContainer .btnHelp.active {background-color:#E15A00;}
.formsContainer .accountInfo dl dt {width:30%;}
.formsContainer .accountInfo dl dd {width:calc(100% - 30%);}
.loginSuccess .formsContainer .btnQuestion {background-color:#19A3CE;}
.formsContainer.appointmentDetails{ padding: 0; margin: 0; }
.formsContainer.appointmentDetails .boxInner h2{ float: left; }
.formsContainer.appointmentDetails .boxInner .row{ margin-left:0;  margin-right: 0; }
.formsContainer.appointmentDetails .btnFloatWrap{ width: auto; float: right; }
.formsContainer.appointmentDetails .btnFloatWrap a:nth-child(1){ margin-right:  10px; }
.fieldItem {display: inline-block; line-height:1.5; padding-bottom:30px;}
.fieldItem:after {content: " "; display: block; height: 0; clear: both; font-size: 0; visibility: hidden;}
.fieldItem {display:block; position:relative;}
.fieldItem.noPadd{ padding: 0; }
.fieldItem .argeeTxt.blue{ color: #00A2D1;  }
.fieldItem > .row{ margin: 0; }
.checkboxList .fieldItem{ padding-bottom: 12px;  }
.fieldItem.txtBySide {display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;}
.fieldItem.txtBySide > * {display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center;}
.fieldItem.txtBySide input[type=text], .fieldItem.txtBySide input[type=password] {width:290px;}
.fieldItem .mainTitle {font-weight:bold; padding-bottom:10px;}
.fieldItem .title {font-weight:bold; float:left; width:30%; padding-right:20px;}
.fieldItem .marginBot{ margin-bottom: 10px; }
.fieldItem .marginTop{ margin-top: 10px; }
.fieldItem .field {float:left; width:70%;}
.fieldItem .field .eBillMethod {margin-left:40px;}
.fieldItem .note.onField, .btnContainer.onField {margin-left:30%;}
.fieldItem .field li {float:left; color:#666; width:30%;}
.fieldItem.txtBySide input[type=text].hkidFirst {width:232px;}
.fieldItem.txtBySide input[type=text].hkidLast {width:40px;}
.fieldItem .field.address input[type=text] {margin-bottom:15px;}
.fieldItem .field.address.blockFlat input[type=text] {width:25%; margin-right:18px;}
.fieldItem .field.meter_reading input[type=text] { width: 10%; margin-right:14px; min-width: 80px; }
.fieldItem .field.address.blockFlat .selectMenu {width:25%; margin-right:18px; display:inline-block;}
.fieldItem .field.address.blockFlat .customSelect {min-width:0;}
.fieldItem .field.address .streetNum input[type=text] {width:37%;}
.fieldItem .field.address .streetNum span {display:inline-block; width:6%; margin:0 -3px; text-align:center;}
.subInputboxWrap{ display: inline-block; vertical-align: top; max-width: 87.2%; }
.subInputboxWrap .argeeTxt{ margin: 0 6px 30px 0; display: inline-block;  }
input[type=radio].custRadio {opacity:0; position:absolute; float: left; width:22px; height:22px;}
input[type=radio].custRadio + label {margin:0; clear:none; display:block; padding:0 0 0 35px; cursor:pointer; background-repeat:no-repeat; background-position:0 2px; background-size:22px auto; min-height:24px; font-weight:bold;}
input[type=radio].custRadio + label {background-image:url(../images/icon_radio.png);}
input[type=radio].custRadio:checked + label {background-position:0 -48px;}
.inputSubTitle {font-weight:bold; padding:10px 0 0 0;}

input[type=radio].custRadio.lrg {width:32px; height:32px;}
input[type=radio].custRadio.lrg + label {padding-left:50px; background-position:0 0; background-size:32px auto; min-height:32px;}
input[type=radio].custRadio.lrg.green + label {background-image:url(../images/icon_radio_green.png);}
input[type=radio].custRadio.lrg:checked + label {background-position:0 -94px;}

.fieldItem input[type=checkbox].custCheck {width:31px;}
.fieldItem input[type=checkbox].custCheck + label {padding:2px 0 0 54px; min-height:31px; background-position:0 0; background-size:31px auto;}
.fieldItem input[type=checkbox].custCheck + label {background-image:url(../images/icon_checkbox_form.png);}
.fieldItem input[type=checkbox].custCheck:checked + label {background-position:0 -150px;}

	/** sub fieldItem**/
	.subFieldItem{ padding-left: 56px; padding-bottom: 20px; }
	.subFieldItem .fieldItem.sub{ padding-bottom: 4px; }
	/*.subFieldItem .fieldItem.sub .checkbox,
	.subFieldItem .fieldItem.sub .subInputboxWrap,
	.subFieldItem .fieldItem.sub .subInputboxWrap .argeeTxt,
	.subFieldItem .fieldItem.sub .subInputboxWrap .sub_inputbox{ vertical-align: middle;  }*/

.fieldItem .note {clear:both; color:#666; padding-top:5px;}
.fieldItem .note p:last-child {padding-bottom:0;}
.fieldItem .note .blue {color:#00A2D1;}
.fieldItem.vert .title {float:none; width:100%; padding-bottom:5px;}
.fieldItem.vert .field {float:none; width:100%;}
.fieldItem .selectMenu {vertical-align:top;}
.fieldItem.vert .selectMenu {display:block; width:80%;}
.fieldItem.vert .address .selectMenu {margin-bottom:15px;}
.fieldItem.vert .selectMenu:last-child {margin-bottom:0;}
.fieldItem .customSelect {color:#666;}
.fieldItem select.custSelect {min-width:100%;}
.fieldItem select.selectStyle {width: 100%;}
.fieldItem.vert .customSelect {width:100%;}
.accountInfo dl dd .customSelect { width: 100%;}
.accountInfo dl dd select.custSelect {width: 100%;}
.fieldItem .field.nameWIthTitle .selectMenu {width:25%; margin-right:18px; display:inline-block;}
.fieldItem .field.nameWIthTitle .customSelect {min-width:0;}
.fieldItem .field.nameWIthTitle input[type=text] {width:calc(55% - 21px);}
.fieldItem .field.radioAndTxt > div {padding-bottom:20px;}
.fieldItem .field.radioAndTxt > div:last-child {padding-bottom:0;}
.fieldItem .field.radioAndTxt > div input[type=text] {margin-top:10px;}
.fieldItem .field.btnBySide .button {padding-top:18px; padding-bottom:18px;}
.fieldItem.vert .field.btnBySide input[type=text] {width:60%;}
.fieldItem .field.btnBySide .button, .captcha {margin-left:15px;}
.fieldItem .field.splitHalf input[type=text] {width:39%; margin-right:1.6%;}
.fieldItem .field.splitHalf input[type=text]:last-child {margin-right:0;}
.fieldItem .field.selectDate .selectMenu {margin-right:15px;}
.fieldItem .field.selectDate .selectMenu .customSelect {min-width:100px;}
input[type=text].calendarField { background-image:url(../images/icon_calendar.png); background-position:95% center; background-repeat:no-repeat; background-size:28px auto;}
input[type=text].calendarField_enquiry { background-image:url(../images/icon_calendar.png); background-position:95% center; background-repeat:no-repeat; background-size:28px auto;}
.ui-datepicker {margin-top:15px; padding:0; background:#F9FBFD; padding:0 25px 15px 25px;}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {border-radius:0;}
.ui-widget.ui-widget-content {border:#DEE5EA 2px solid;}
.ui-datepicker .ui-datepicker-header {padding:0;}
.ui-widget-header {border:none; background:transparent;}
.ui-datepicker .ui-datepicker-title {font-size:2rem; margin:0; font-weight:normal; border-bottom:#00A2D0 1px solid; padding:10px 0;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {position:absolute; height:100%; display:block; border:none; top:0;}
.ui-datepicker .ui-datepicker-prev:before, .ui-datepicker .ui-datepicker-next:before {width:20px; height:20px; border:2px solid #333; margin-top:-10px; position:absolute; top:50%; left:50%; content:""; background-color:transparent; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.ui-datepicker .ui-datepicker-prev {left:20px;}
.ui-datepicker .ui-datepicker-next {right:20px;}
.ui-datepicker .ui-datepicker-prev:before {border-bottom:none; border-right:none; margin-left:-4px;}
.ui-datepicker .ui-datepicker-next:before {border-top:none; border-left:none; margin-left:-15px;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {display:none}
.ui-datepicker table {font-size:1rem;}
.ui-datepicker td {width:14.28%; padding:1px 12px;}
.ui-datepicker th {color:#19A3CE; font-weight:normal;}
.ui-datepicker td span, .ui-datepicker td a {padding:.6em .2em;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:active {border:none; background-color:transparent; color:#666; text-align:center;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active {color:#FFF; background-color:#7CB52D;}
/*.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {color:#FFF; background-color:#19A3CE;}*/


.formsContainer input[type=text], .formsContainer input[type=password], .formsContainer textarea {border:#DEE5EA 2px solid; background-color:#F9FBFD; height:56px; line-height:56px; width:80%; padding-left:20px;}
.formsContainer textarea {height:155px; line-height:1.5;}
.rquiredNote {padding-bottom:30px; font-weight:bold;}
.rquiredNote.noPadd{ padding: 0; }
.rquiredNote span, span.mandatory span {color:#009FD0;}
.formsContainer .btnContainer {overflow:hidden;}
.formsContainer .btnContainer.marginTop{ margin-top: 32px; }
.formsContainer .btnContainer.textCenter{ text-align: center; }
.formsContainer .btnContainer button {border-radius:4px; color:#FFF; text-align:center; border:none; padding:6px 20px; min-width:125px; margin-left:11px; font-size:1.125rem; outline:none; -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.formsContainer .btnContainer button:first-child {margin-left:0;}
.formsContainer .btnContainer button[type=reset] {background:#C2C2C2;}
.formsContainer .btnContainer button[type=reset]:hover {background:#AAA;}
.formsContainer .btnContainer button[type=button] {background:#19A3CE;}
.formsContainer .btnContainer button[type=button]:hover {background:#2489AA;}
.formsContainer .btnContainer button[type=submit] {background:#19A3CE;}
.formsContainer .btnContainer button[type=submit]:hover {background:#2489AA;}
.formsContainer .btnContainer button[type=submit].btnSubmit {background:#79B719;}
.formsContainer .btnContainer button[type=submit].btnChange {background:#79B719;}
.formsContainer .btnContainer button[type=submit].btnSubmit:hover {background:#3D9419;}
.formsContainer .btnContainer button[type=submit].btnChange:hover {background:#3D9419;}
.formsContainer .btnContainer button.btnCancel{ min-height: 44.21px; }
.stepInfo {padding-bottom:30px;}
.stepInfo:after {content:''; display:block; width:calc(100% + 50px); height:1px; background:#E5E5E5; margin-left:-25px;}
.formTerms, .formPrivacy {line-height:1.5; padding-bottom:30px;}
.formPrivacy {width:80%;}
.formTerms ol {list-style:decimal; margin:0 0 0 20px;}
.formTerms ol li {padding:0 0 15px 25px;}

input[type=text].sub_inputbox{  width: 290px; /*width: 37%; */vertical-align: top; margin-top: -12px; }

.noStepInner .formsContainer {padding:0 10px;}
.noStepInner .formsContainer h2 {padding-right:0;}
.noStepInner .formsContainer h2:after {content:''; display:block; width:calc(100% + 20px); height:1px; background:#E5E5E5; margin-left:-10px; margin-top:15px;}
h2.textCenter{ text-align: center; }
.noStepInner .formsContainer h2.noBorder:after{ height:0; }

.submittedSuccess {text-align:center;}
.submittedSuccess .title {color:#7BB42C; font-size:2rem; font-weight:bold; line-height:1.5; padding-bottom:20px;}
.submittedSuccess .refNo {color:#19a3ce; font-size:1.4rem; font-weight:bold; line-height:1.5; padding-bottom:20px;}
.submittedSuccess .iconSuccess {display:block; margin:20px auto 50px auto; width:213px; height:212px; background:url(../images/icon_success.png) no-repeat 0 0; background-size:100% auto;}
	.submittedSuccess .iconWarningNotice {
		display: block;
		margin: 20px auto 50px auto;
		width: 213px;
		height: 212px;
		background: url(../images/icon_warning_notice.png) no-repeat 0 0;
		background-size: 100% auto;
	}
.submittedSuccess .iconSuccess.email {background-image:url(../images/icon_success_email.png); }
.submittedSuccess .btnBackToHome {font-size:1.125rem; padding-left:30px; padding-right:30px;}
.submittedSuccess.cancelled .title{ color: #19A3CE; }
.submittedSuccess.cancelled .btnBackToHome{}
.submittedSuccess .iconSuccess.appoint_cancelled{ background-image:url(../images/icon_appoint_cancel.png); }

.commonPromptPage {text-align:center;}
.commonPromptPage .title {color:#7BB42C; font-size:2rem; font-weight:bold; line-height:1.5; padding-bottom:20px;}
.commonPromptPage .refNo {color:#19a3ce; font-size:1.4rem; font-weight:bold; line-height:1.5; padding-bottom:20px;}
.commonPromptPage .iconSuccess {display:block; margin:20px auto 50px auto; width:213px; height:212px; background:url(../images/icon_prompt.png) no-repeat 0 0; background-size:100% auto;}
.commonPromptPage .btnBackToHome {font-size:1.125rem; padding-left:30px; padding-right:30px;}
.commonPromptPage.cancelled .title{ color: #19A3CE; }
.commonPromptPage.cancelled .btnBackToHome{}

.iconFailure {display:block; margin:20px auto 50px auto; width:213px; height:212px; background:url(../images/icon_failure.png) no-repeat 0 0; background-size:100% auto;}

.helpContainer {display:none; position:absolute; width:500px; border:#E27A2C 1px solid; border-radius:4px; background-color:#FFF; padding:45px 20px 20px 20px; z-index:1; top:0; left:0; font-weight:normal; margin-top:10px;}
.helpContainer ul {list-style:disc; margin:0 0 15px 20px;}
.helpContainer ul li {padding:0 0 5px 0;}
.helpContainer p:last-child {padding-bottom:0;}
.helpContainer a.btnClose {position:absolute; top:16px; right:17px; width:25px; height:25px; display:block;}
.helpContainer .btnClose:before, .helpContainer .btnClose:after {content:''; border-top:#E27A2C 2px solid; width:25px; height:1px; position:absolute; top:10px; left:0;}
.helpContainer .btnClose:before {-moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.helpContainer .btnClose:after {-moz-transform:rotate(135deg); -ms-transform:rotate(135deg); -webkit-transform:rotate(135deg); transform:rotate(135deg);}

.fieldItem .field ul.subListingUL{  list-style-type: disc; padding-left: 20px; }
.fieldItem .field ul.subListingUL li{  width: 100%; }
/* END Forms */

.paraWithIcon {border-top:1px #CCC solid; margin-top:15px; padding-top:30px; overflow:hidden;}
.paraWithIcon .icon {width:144px; text-align:center; float:left;}
.paraWithIcon .icon span {display:inline-block;}
.paraWithIcon .icon span img {width:50%;}
.paraWithIcon .icon span img.payGasBillIcon{ width: 74px; height: 67px; margin-top: 10px; }
.paraWithIcon .content {width:calc(100% - 144px); float:left; overflow:hidden;}
.paraWithIcon .content .title {float:left; font-weight:bold; padding-right:20px; width:20%;}
.paraWithIcon .content .accInfo {float:left; width:80%;}
p.hightlight {font-weight:bold;}
p.hightlight.green {color:#7BB42C;}

.editable {position:relative;}
.editable .btnEdit {position:absolute; top:25px; right:30px; padding-top:5px; padding-bottom:5px; font-size:.875rem; z-index:1;}
.editable .btnCancel {position:absolute; top:25px; right:30px; padding-top:5px; padding-bottom:5px; font-size:.875rem; z-index:1;}
.editable h2 {padding-right:100px;}
.billLangRadio {padding-top:5px;}
.billLangRadio li {margin-right:50px;}
.billLangRadio li:last-child {margin-right:0;}

.qrCodeContainer {border-radius:4px; background-color:#FFF; max-width:580px; padding:10%; text-align:center;}
.qrCodeContainer p {line-height:1.3; font-size:1.25rem;}
.qrCodeContainer .qrCode {margin-top:20px; border:#7BB52D 2px solid; border-radius:4px; padding:25px; display:inline-block;}

.cancelContainer{ border-radius:4px; background-color:#FFF; max-width:580px; padding: 0; text-align:center; margin: 0 auto; }
.cancelContainer .MessageWrap, .cancelContainer .bottomWrap{ width: 100%; padding: 22.5px 50px; }
.cancelContainer .MessageWrap{ padding-top: 64px; }
.cancelContainer .MessageWrap .row , .cancelContainer .bottomWrap .row{ padding: 0px; margin:0; }
.cancelContainer .btnContainer .button{ float: none; }
.cancelContainer .btnContainer .button:hover{ text-decoration: none; }
.cancelContainer .btnContainer .button.btnYes, .cancelContainer .btnContainer .button.btnNo{ width: 116px; padding: 10px 15px;  cursor: pointer; }
.cancelContainer .btnContainer .button.btnYes{ margin-right: 0; }
.cancelContainer .btnContainer .button.btnNo{ margin-left: 44px; }
.cancelContainer .bg_grey{ background-color: #F4F4F4; }

/** Accordion video list **/
.accordionContainer.videoList{ margin-bottom: 32px; }
.accordionContainer.videoList .relatedSites{  }
.accordionContainer.videoList .relatedSites.active{ background-color: rgb(26,163,207); border-radius: 4px; color: white; }
.accordionContainer.videoList .relatedSites .btnAccordion{ color: rgb(26,163,207);  position: relative; font-weight: 600; padding: 20px; cursor: pointer; border-top: 1px solid #D2D2D2; border-bottom: 1px solid #D2D2D2;}
.accordionContainer.videoList .relatedSites .titleWrap{ margin-right: 18px; display: inline-block; }
.accordionContainer.videoList .relatedSites.active .btnAccordion{ color: white;  }

.accordionContainer.videoList .relatedSites .arrow{ width: 16px; height: 16px; display: inline-block; position: relative; -webkit-transition: all 300ms ease; transition: all 300ms ease; transform-origin: center top; }
.accordionContainer.videoList .relatedSites .arrow:after{ content: ''; position: absolute; top: 50%; right:3px; width: 10px; height: 10px; border: 2px solid rgb(26,163,207); margin-top: -4px; display: inline-block; border-top: none; border-left: none; vertical-align: middle; -webkit-transform: rotate(45deg); transform: rotate(45deg); -ms-transform: rotate(45deg); }
.accordionContainer.videoList .relatedSites.active .arrow:after{ transform: rotate(225deg); border; border-bottom: 2px solid white; border-right: 2px solid white; margin-top: 0px; }
/** END Accordion video list **/


	/** History chart **/
	#payment_linechart.chartContent{ width: 100%; height: 520px; }
	#consumption_barchart.chartContent{ width: 100%; height: 520px; }
	#dual_y_div.chartContent{ width: 100%; height: 480px; }
	/** END History chart **/

	
	/** Listing Wrap **/
	.accordionContainer.videoList .relatedSitesContent{ display: none; }
	.accordionContainer.videoList .relatedSitesContent, .beforeListingTableWrap{ overflow: hidden; background-color: white; padding: 32px; }
	.beforeListingTableWrap.noPadd{ padding: 0; }
	.listingWrap{ display: table; border: 1px solid rgb(26,163,207); padding: 24px; border-radius: 4px; width: 100%; }
	.listingWrap .row{ padding: 0; margin: 0; }
	.listingWrap .row.header{ border-bottom: 1px solid rgb(26,163,207); padding-bottom: 6px; }
	.listingWrap .row .colItem{ text-align: center; vertical-align: middle; }
	.listingWrap .row .colSpan3{ }
	.listingWrap .row.header .colItem{ color: rgb(26,163,207); font-weight: 600; }
	.listingWrap .row.content{}
	.listingWrap .row.content:nth-child(even){  background-color: #E4F6FA; }
	.listingWrap .row.content .btn_playVideo{ margin: 20px auto; }
	.listingWrap .itemChildWrap{ display: table; }

	.listingTableWrap{ padding: 16px 24px 24px 24px; border: 1px solid black; border-radius: 4px; }
	.listingTableWrap.border_blue{ border: 1px solid rgb(26,163,207); }
	.listingTableWrap.border_green{ border: 1px solid #7BB52D; }
	.listingTableWrap.border_orange{ border: 1px solid #E27A2C; }
	.listingTable{ width: 100%; table-layout: fixed;}
	.listingTable thead, .listingTable .listHeader{ border-bottom: 1px solid rgb(26,163,207);  }
	
	.listingTable .listHeader,
	.listingTable.appointment .itemChild ,
	.listingTable.ebilling .itemChild,
	.listingTable.paymentHistory .itemChild,
	.listingTable.downloadForm .itemChild.alignCenter{ text-align: center;  }

	.listingTable .itemHeader.alignLeft,
	.listingTable.appointment .itemChild.alignLeft ,
	.listingTable.ebilling .itemChild.alignLeft,
	.listingTable.paymentHistory .itemChild.alignLeft{ text-align: left; }

	.listingTable .column_1 .itemChild.alignLeft, .listingTable .column_1 .itemHeader.alignLeft{ padding: 0 28px; }

	.listingTable.appointment .listHeader > .row,
	.listingTable.appointment .listContent > .row ,
	.listingTable.ebilling .listContent > .row,
	.listingTable.payGas .listHeader > .row,
	.listingTable.payGas .listContent > .row,
	.listingTable.paymentHistory .listContent > .row,
	.listingTable.downloadForm .listHeader > .row,
	.listingTable.downloadForm .listContent > .row{ margin:0; }
	/*.listingTable.appointment .row > .itemChildWrap{  min-height: 100px; }*/
	.listingTable.appointment .row .itemChild:not(.autoMinHeight){ display: table; width: 100%; min-height: 100px;}
	.listingTable.ebilling .row .itemChild:not(.autoMinHeight), .listingTable.paymentHistory .row .itemChild:not(.autoMinHeight) { display: table; width: 100%;  }
	.listingTable.appointment .row .itemChild > div,
	.listingTable.ebilling .row .itemChild > div,
	.listingTable.paymentHistory .row .itemChild > div{ display: table-cell; vertical-align: middle; }
	.listingTable thead.color_green, .listingTable .listHeader.color_green{ border-bottom: 1px solid #7BB52D;  }
	.listingTable thead.color_orange, .listingTable .listHeader.color_orange{ border-bottom: 1px solid #E27A2C;  }

	.listingTable thead td, .listingTable tbody td{ vertical-align: middle; text-align: center; }
	.listingTable td.width{    }
	.listingTable .desktopShowValue{    }
	.listingTable .mobileShowValue{ display: none; }
	.listingTable thead td, .listingTable td.header, .listingTable .itemHeader{ font-weight: 500;  }
	.listingTable td .itemHeader, .listingTable .itemHeader{ padding-bottom: 6px; font-weight: 600; }
	/*.listingTable td:nth-child(1), .listingTable td:nth-child(2){ width: 25%;  }
	.listingTable td:nth-child(1){ }
	.listingTable td:nth-child(2){ }
	.listingTable td:nth-child(3){ width: 33.33333333%; }
	.listingTable td:nth-child(4){ width: 16.66666667%; }*/
	.listingTable td.col-1{ width: 25%;  }
	.listingTable td.col-3{ width: 75%;  }
	.listingTable td .btn_playVideo{ margin: 0 auto; }
	.listingTable tbody td .itemChildWrap , .listingTable .listContent .row > .itemChildWrap{ padding: 20px 10px; }
	.listingTable .itemChildWrap .itemChild .button.btnEdit{ margin-bottom: 10px; margin-top: 14px; }
	.listingTable .bg_blue{  background-color: #E4F6FA; }
	.listingTable .bg_green{  background-color: #E7EEDE; }
	.listingTable .bg_orange{  background-color: #FCF1E9; }
	.listingTable .color_blue{ color: rgb(26,163,207); }
	.listingTable .color_green{ color: #7BB52D; }
	.listingTable .color_orange{ color: #E27A2C; }
	.listingTable tbody tr.mobile{  display: none; }
	.listingTable .btnEdit, .listingTable .btnCancel{    width: 100%; max-width: 90px; padding: 5px 0; font-size: .875rem; z-index: 1; }
	.listingTable.appointment td.header:nth-child(1){ width: 20%; }
	.listingTable.appointment td.header:nth-child(2){ width: 20%; }
	.listingTable.appointment td.header:nth-child(3){ width: 20%; }
	.listingTable.appointment td.header:nth-child(4){ width: 20%; }
	.listingTable.appointment td.header:nth-child(5){ width: 20%; }
	.listingTable i.icon.ebill_file{ height: 27px ; margin:0 auto; background: url(../images/icon_ebill_file.png) no-repeat; background-size: 22px 27px; }
	.listingTable .last_border_line{ width: 100%; height: 1px; }
	.listingTable .last_border_line.bg_green{ background-color: #7BB52D; }
	.listingTable .last_border_line.bg_orange{ background-color: #E27A2C; }
	/** END Listing Wrap **/


	/** eBilling **/
	.noneMinWidth .customSelect { min-width: 228px; }
	.listingTable.ebilling .listContent .itemChildWrap:nth-child(1) .itemChild .mobileShowValue { display: none; }
	.pay-channels .listItme .title { height: 56px; line-height: 52px; margin-right: 10px; min-width: 190px; z-index: 3; }
	.pay-channels .listItme .title a { text-decoration: underline; text-decoration-color: #83bed2; color: #19a3ce; font-weight: bold; cursor: pointer; }
	.pay-channels .listItme .title:before { content: '•'; color: #333; font-weight: 300; margin-right: 5px; }
	.pay-channels .listItme .fieldItem { padding-bottom: 0px; }
	.pps-info .listItme .title { height: 56px;line-height: 52px; margin-right: 10px; min-width: 190px; font-weight: bold; }
	.pps-info .listItme .info-field { height: 56px; line-height: 52px; margin-right: 10px; min-width: 190px; }
	.pps-info .remark { font-weight: bold; }
	.pps-info .remark span:nth-child(1) { color: #19a3ce; }
	.pps-info .btnContainer button[type=submit] { background-color: #7BB52D; cursor: pointer; }
	.pps-info .btnContainer button[type=cancel] { background-color: #8e8e8e; cursor: pointer; }
	/** END eBilling **/


	/** barChart  **/
	.chart > h2{ padding: 20px 0 2px 0; }
	div.tooltip.barchart{
		background-color: #ffffca;
		color: #000023;
		padding: 0px;
		background-color: black;
		color: white;
	}
	.chartPointWrap{ padding-bottom: 20px; }
	.chartPointWrap .wrap{ width: 100%; text-align: center; padding: 10px 0;}
	ul.chartPointList{  }
	ul.chartPointList li{ display: inline-block;  margin-right: 20px; }
	ul.chartPointList li >div{ display: inline-block; vertical-align: middle; }
	ul.chartPointList li .circlePoint{ margin-top: -2px; }
	.circlePoint .icon.icon_point{ width: 24px; height: 24px; border: 1px solid transparent; border-radius: 24px; float: left; margin-top: 2px; }
	.circlePoint .icon.icon_point.green{ background-color: #79B71B; }
	.circlePoint .icon.icon_point.orange{ background-color: #E27A2C; }
	.circlePoint .icon.icon_point.blue{ background-color: #52BADA; }
	.circlePoint .icon.icon_point.grey{ background-color: #999999; }
	/** END barChart **/


	/** Listing with Paging **/
	.selectionWrap{ padding-bottom: 30px; }
	.selectionWrap .selectMenu:nth-child(1){ margin-right: 10px; }
	.selectionWrap .selectNoticesType .customSelect, .selectionWrap .selectNoticesYear .customSelect,
	.selectionWrap .selectNoticesType .customSelect *, .selectionWrap .selectNoticesYear .customSelect *{ min-width: 140px;  height: 38px; line-height: 34px; border-radius: 4px; }
	.selectionWrap .selectNoticesType .customSelect.custSelect:after, .selectionWrap .selectNoticesYear .customSelect.custSelect:after{ margin-top: -13px;  border: 2px solid #19A3CE; border-top: 0; border-left: 0; }
	.listing.notices{ padding-top: 12px; }
	.listing.notices li{ margin-bottom: 24px;  }
	.listing.notices li .left, .listing.notices li .right{ display: inline-block; vertical-align: middle; }
	.listing.notices li .left{  }
	.listing.notices li .right{  }
	.listing.notices li .date{ width: 16%; padding-left: 10px; margin-right: 2%; }
	.listing.notices li .content{ width: 80%; margin-left: -4px; }
	.listing.notices li:after{ content: ''; border-bottom: #D2D2D2 1px solid; clear: both; width: 100%; display: block; margin: 24px 0 0 0; }
	.listing.notices li a{  color: inherit; text-decoration: none; }
	.listing.notices li a:hover{ text-decoration: none; }
	.listing.notices .paging{ padding: 10px 0; }
	.listing.notices .paging .wrap{ text-align: center; }
	.listing.notices .paging .paging_num{ color: #7D7D7D; line-height: 15px;  margin: 0 2px; }
	.listing.notices .paging .paging_num.active{ background-color: #137C9F;  color: #ffffff; }
	.listing.notices .paging .paging_num.active:hover{ }
	.listing.notices .paging .button{ width: 40px; height: 40px;  border:1px solid #D2D2D2; display: inline-block; position: relative; -webkit-transition: all 300ms ease; transition: all 300ms ease; transform-origin: center top;  cursor: pointer; vertical-align: middle; }
	.listing.notices .paging .paging_arrow_left .arrow_left{ content: ''; position: absolute;top: 50%;right:6px;width: 10px;height: 10px;border: 2px solid #7D7D7D; margin-top: -4px;display: inline-block;border-top: none;border-left: none;vertical-align: middle;-webkit-transform: rotate(133deg);transform: rotate(133deg);-ms-transform: rotate(133deg); }
	.listing.notices .paging .paging_arrow_right .arrow_right{ content: ''; position: absolute;top: 50%;right:10px;width: 10px;height: 10px;border: 2px solid #7D7D7D; margin-top: -4px;display: inline-block;border-top: none;border-left: none;vertical-align: middle;-webkit-transform: rotate(314deg);transform: rotate(314deg);-ms-transform: rotate(314deg); }
	.listing.notices .paging .paging_arrow_left{ margin-right: 38px; }
	.listing.notices .paging .paging_arrow_right{ margin-left: 38px; }
	.listing.notices .paging .button:hover{ background-color: #137C9F; }
	.listing.notices .paging .button:hover.paging_num{ color: #ffffff;  text-decoration: none; }
	.listing.notices .paging .button:hover .arrow_right, .listing.notices .paging .button:hover .arrow_left{ border: 2px solid #ffffff; border-top: none; border-left: none; }
	/** END Listing with Paging **/


	/** Detail Container **/
	.detailsContainer.notices{ text-align: center; padding: 20px 12px 0 12px;}
	.detailsContainer.notices .title{ font-size: 2rem; font-weight: bold; line-height: 1.5; padding-bottom: 20px; }
	.detailsContainer.notices .detailsImageWrap img{ width: 100%; }
	.detailsContainer.notices .content{ padding: 20px 0; }
	/** END Detail Container **/


	/** e-Chat chat room **/
	.eChatWrap{ position: relative; }
	.chatRoomWrap{ width: 100%; height: auto ; position: fixed; bottom: 0;  }
	.chatRoomWrap .head{ height: 50px; position: relative; border-top-left-radius: 4px; border-top-right-radius: 4px; background-color: #19A3CE; color: #ffffff; }
	.chatRoomWrap .head > .echat{ position: absolute; left: 15px; top: 0; bottom: 0; line-height: 50px; font-size: 1.2rem; }
	.chatRoomWrap .head > .echat i{ background-image: url(../images/echat_white.png); display: inline-block; vertical-align: middle; background-position: 0 0; background-size: 25px 25px; }
	.chatRoomWrap .head .btnCloseChatRoom{ position: absolute; right: 15px; width: 18px; height: 18px; display: block; top: 0; bottom: 0; margin: auto; cursor: pointer; }
	.chatRoomWrap .head .btnCloseChatRoom:before, .chatRoomWrap .head .btnCloseChatRoom:after {content:''; border-top:#ffffff 2px solid; width:18px; height:1px; position:absolute; top: 8px; left: 0; }
	.chatRoomWrap .head .btnCloseChatRoom:before {-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);}
	.chatRoomWrap .head .btnCloseChatRoom:after {-moz-transform:rotate(135deg); -ms-transform:rotate(135deg); -webkit-transform:rotate(135deg); transform:rotate(135deg);}

	.chatRoomWrap .content{ position: relative; border: 1px solid #D2D2D2; border-top: 0; }
	.chatRoomWrap .messageDisplayWrap{  background-color: #eeeeee; }
	.chatRoomWrap .messageDisplayWrap .scrollbar{ max-height: 300px; overflow-x: hidden; overflow-y: auto; padding: 22px; }
	.chatRoomWrap .chatListing{ list-style: none; }
	.chatRoomWrap .chatListing > .row{ margin: 0 0 20px 0; }
	.chatRoomWrap .chatListing .message{ width: 83%; position: relative; padding:10px; }
	.chatRoomWrap .chatListing .message.receive{ float: left; background-color: #e0e0e0; }
	.chatRoomWrap .chatListing .message.receive:after{ content: ''; position: absolute; left: -9px; top: 0; width: 0; height: 0; border-top: 10px solid transparent; border-right: 10px solid #e0e0e0; border-bottom: 10px solid transparent; clear: both; bottom: 0; margin: auto; }
	.chatRoomWrap .chatListing .message.send{ float: right; background-color: #ffffff; }
	.chatRoomWrap .chatListing .message.send:after{ content: ''; position: absolute; right: -9px; top: 0; width: 0; height: 0; border-top: 10px solid transparent; border-left: 10px solid #ffffff; border-bottom: 10px solid transparent; clear: both; bottom: 0; margin: auto;  }
	.chatRoomWrap .messageInputWrap{ border-top: 1px solid #e7e7e7; }
	.chatRoomWrap .messageInputWrap input{ border: 0; text-indent: 10px; padding: 10px; width: 100%; }

    .chatRoomWrap .eChatMessageInputWrap{ border-top: 1px solid #e7e7e7; }
	.chatRoomWrap .eChatMessageInputWrap input{ border: 0; text-indent: 10px; padding: 10px; width:70%;  }
	.chatRoomWrap .eChatMessageInputWrap button{ border: 0; padding: 10px; background-color: #19A3CE;width:28%;color: #ffffff;}
    
    @media (max-width: 300px) {
        .chatRoomWrap .eChatMessageInputWrap input { border: 0; text-indent: 10px; padding: 10px; width: 100%; }
        .chatRoomWrap .eChatMessageInputWrap button { border: 0; padding: 10px; background-color: #19A3CE; width: 100%; color: #ffffff; }
    }
	/** END e-Chat chat room **/

/* END MAIN CONTENT */

/* BUTTON STYLE */
.button {display:inline-block; font-size:1rem; line-height:1.3; color:#FFF; border-radius:4px; padding:11px 15px; text-align:center; font-weight:normal; -webkit-transition:all 300ms ease; transition:all 300ms ease; text-decoration:none;}
.no-touch .button:hover {text-decoration:none; color:#FFF;}
.button.orange {background-color:#E27A2C;}
.no-touch .button.orange:hover {background-color:#E15A00;}
.button.blue {background-color:#19A3CE;}
.no-touch .button.blue:hover {background-color:#2489AA;}
.button.green {background-color:#7BB52D;}
.no-touch .button.green:hover {background-color:#3D9419;}
.button.grey {background-color:#666666;}
.no-touch .button.grey:hover {background-color:#444444;}

.button.white {background-color:#FFF;}
.button.txtGreen {color:#79B32C;}
.button.icon {vertical-align:middle;}
.button.icon:hover{ text-decoration: none; }
.button.icon:before {content:''; display:inline-block; background-repeat:no-repeat; vertical-align:middle; margin-right:10px;}

.button.icon.btnReminder:before {background-image:url(../images/icon_reminder.png); width:21px; height:25px; background-size:100% auto;}
.button.icon.btnQrCode:before {background-image:url(../images/icon_qr_code.png); width:23px; height:23px; background-size:100% auto;}
.button.icon.btnEdit:before {background-image:url(../images/icon_edit.png); width:15px; height:17px; background-size:100% auto;}
.button.icon.btnCancel:before {background-image:url(../images/icon_cancel.png); width:15px; height:17px; background-size:100% auto;}

.button.width50 {width:50%;}
.button.width100 {width:100%;}

.btntxt.arrow {display:inline-block;}
.btntxt.arrow span {display:inline-block; width:18px; height:18px; border-radius:50%; margin-left:6px; vertical-align:middle; position:relative; -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.btntxt.arrow span:after {width:6px; height:6px; border:1px solid #fff; margin-top:-3px; margin-left:-4px; position:absolute; top:50%; left:50%; content:''; border-top:none; border-left:none; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -ms-transform:rotate(-45deg);}
.btntxt.arrow.blue span {background-color:#1AA3CF;}
.no-touch .btntxt.arrow.blue:hover span {background-color:#2489AA;}

.btnAddMoreAcc {position:relative; padding-left:38px; padding-right:15px; text-align:left; font-size:.875rem;}
.btnAddMoreAcc.appointment{ margin: 0; padding-top: 18px; padding-bottom: 18px; }
.btnAddMoreAcc:before, .btnAddMoreAcc:after {content:''; border-top:#FFF 2px solid; width:16px; height:2px; position:absolute; top:24px; left:15px;}
.btnAddMoreAcc.appointment:before,.btnAddMoreAcc.appointment:after{ top:26px; }
.btnAddMoreAcc:before {-moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg);}
.btnAddMoreAcc:after {-moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg);}
.btnCenterWrap{ text-align: center; margin-top: 6px; }
.btnBackToNotices{ position: relative; padding-left: 24px; color: #7D7D7D; }
.btnBackToNotices:hover{ text-decoration: none; }
.btnBackToNotices i{ content: ''; position: absolute;top: 50%; left: 10px; width: 10px;height: 10px;border: 2px solid #7D7D7D; margin-top: -4px;display: inline-block;border-top: none;border-left: none;vertical-align: middle;-webkit-transform: rotate(135deg);transform: rotate(135deg);-ms-transform: rotate(135deg);  }
.buttonWrap{ margin: 0 0 35px 0; }
/* END BUTTON STYLE */

/* HOME BEFORE LOGIN */
.homeIconBoxes ul {width:calc(100% + 20px); display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; overflow:hidden; margin-left:-10px; margin-right:-10px; -webkit-box-shadow:0 0 0 0 rgba(0,0,0,.25); box-shadow:0 0 0 0 rgba(0,0,0,.25);}
.homeIconBoxes ul li {display:-webkit-flex; display:-ms-flexbox; display:flex; width:25%; border-radius:4px; padding-left:10px; padding-right:10px;margin-bottom: 10px;}
.homeIconBoxes ul li a, .homeIconBoxes ul li span {display:block;}
.homeIconBoxes ul li .icon > span {min-height:64px; padding-top:0;}
.homeIconBoxes ul li a.button {padding-left:5px; padding-right:5px;}
.homeIconBoxes ul li > a, .homeIconBoxes ul li > div {display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; flex-direction:column; padding:25px 15px 35px 15px; border-radius:4px; color:#FFF; text-align:center; width:100%;}
.no-touch .homeIconBoxes ul li > a:hover {text-decoration:none;}
.homeIconBoxes ul li.signUp > div {background-color:#7CB52D; padding-bottom:20px;}
.homeIconBoxes ul li.signUp > div .content .title {padding-bottom:10px;}
.homeIconBoxes ul li.signUp > div .content .btnReg {font-size:.875rem; font-style:italic; color:#FFF; margin-top:10px;}
.no-touch .homeIconBoxes ul li.signUp > div .content .btnReg:hover {text-decoration:none;}
.homeIconBoxes ul li .icon {width:100%;}
.homeIconBoxes ul li .content {font-size:1.125rem; line-height:1.3; padding-top:20px;}
.homeIconBoxes ul li .icon > span {display:inline-block; min-height:104px; padding-top:20px;}
.homeIconBoxes ul li .icon > span img {width:50%;}
.homeIconBoxes ul li.signUp .icon > span {min-height:64px; padding-top:0;}
.homeIconBoxesSpacing {padding-top: 10px;}
/* END HOME BEFORE LOGIN */

/* AFTER LOGIN */
.accountInfo {overflow:hidden; padding-bottom:20px;}
.accountInfo dl {display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;}
.accountInfo dl dt, .accountInfo dl dd {display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center;}
.accountInfo dl dt {clear:left; float:left; width:280px; padding:0 20px 0 0; font-weight:bold; margin-bottom:15px;}
.accountInfo dl dd {float:left; width:calc(100% - 280px); margin-bottom:15px;}
.selectMenu {position:relative; display:inline-block;}
.paymentContainer ul {background-color:#FFF; padding:30px 32px;}
.paymentContainer ul li {display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; overflow:hidden;}
.paymentContainer ul li.currentPayment {padding-bottom:25px;}
.paymentContainer ul li.lastPayment {border-top:#E5E5E5 1px solid; padding-top:25px;}
.paymentContainer ul li > div {}
.paymentContainer .icon {width:11%; text-align:center;}
.paymentContainer .icon img {width:53px;}
.paymentContainer .billBalance {width:33%;}
.paymentContainer .billDate {width:27%;}
.paymentContainer .billBtn {width:40%;}
.paymentContainer .billBtn .btnPayBill {line-height:26px;min-height:110px;padding-top:20px; padding-bottom:13px;}
.paymentContainer .billBtn .btnQrCode {line-height:20px;min-height:110px;padding-top:25px;padding-left:10px; padding-right:10px;}
.paymentContainer .billBtn .btnQrCode span {white-space:nowrap;}
.paymentContainer .title {font-weight:bold;}
.paymentContainer .balance, .paymentContainer .date {color:#7BB52D; font-size:1.5rem;}
.paymentContainer .currentPayment .balance {font-size:2rem; font-weight:bold;}
.paymentContainer .btnContainer .button {display:block;}
.paymentContainer .btnContainer .button.width50 {float:left; width:calc(50% - 5px); margin-bottom:10px;}
.paymentContainer .btnContainer .button.width50:first-child {margin-right:5px;}
.paymentContainer .btnContainer .button.width50:nth-child(2) {margin-left:5px;}
.paymentContainer .btnContainer .button.width100 {clear:both;}
/* END AFTER LOGIN */
/*validation*/
    div.error {
    color: #E3000C;
}
/* RIGHT HAND SIDE */
.promoBanner {background-color:#FFF; border-radius:4px; -webkit-box-shadow:0px 0px 10px -3px rgba(0,0,0,.25); box-shadow:0px 0px 10px -3px rgba(0,0,0,.25);}
.promoBanner a {display:block; text-decoration:none;}
.promoBanner.orange a {color:#19A3CE;}
.promoBanner.green a {color:#7BB52D;}
.no-touch .promoBanner a:hover {text-decoration:none;}
.promoBanner img {width:100%; border-top-left-radius:4px; border-top-right-radius:4px;}
.promoBanner span {display:block;}
.promoBanner .promoContent {background:#FFF; border-bottom-left-radius:4px; border-bottom-right-radius:4px; text-align:center; padding:10px 20px 20px 20px;}
.promoBanner .promoTitle {font-size:1.25rem; line-height:1.1; padding-bottom:5px;}
.promoBanner .promoOffer {color:#666; font-size:0.875rem; line-height:1.1;}
.importantNotices {background:#19A3CE; padding:20px 20px 30px 20px; color:#FFF; position:relative; width:100%; border-radius:4px;}
.importantNotices h2 {font-size:1.3125rem; line-height:1.3; vertical-align:middle; margin-bottom:5px;}
.importantNotices h2:before {content:''; display:inline-block; width:26px; height:26px; background:url(../images/icon_important_notice.png) no-repeat; background-size:100%; vertical-align:middle; margin-right:10px;}
.importantNotices .notice {font-size:.875rem;}
.importantNotices .date {font-weight:bold;}
.importantNotices .slick-prev, .importantNotices .slick-next {display:none !important;}
.importantNotices .slick-dots {position:absolute; bottom:15px; left:0;}
.rhsContainer > div {margin-bottom:20px;}
.rhsContainer > div:last-child {margin-bottom:0;}
.signUpContainer {border:#E27A2C 1px solid; border-radius:4px; background-color:#FFF; padding:15px 20px 20px 20px;}
.signUpContainer h2 {color:#E27A2C; font-size:1.25rem; padding-bottom:5px;}
.signUpContainer p {line-height:1.5; font-size:.875rem;}
/* END RIGHT HAND SIDE */

/* LOGIN */
.loginContainer {background:#6FAE17; border-radius:4px;}
.loginContainer input[type=text], .loginContainer input[type=password] { width: 100%; border: rgba(255, 255, 255, .6) 1px solid; background-color: #FFFFFF; border-radius: 4px; height: 30px; line-height: 30px; padding-left: 14px; color: #333333; font-size: 0.750rem; }
.loginContainer .loginForm { max-width: 286px; margin: 0 auto; padding: 20px 12px;}
.loginContainer .loginForm h3 { color: #FFFFFF; font-size: 0.875rem; text-align: center; font-weight: bold; padding-bottom: 10px;}
.loginContainer .loginForm .textField {padding-bottom: 10px; }
	.loginContainer .btnLogin {
		display: inline-block;
		font-size: 0.875rem;
		background-color: rgb(26,163,207);
		padding: 0 20px;
		color: #FFF;
		border-radius: 4px;
		text-decoration: none;
		-webkit-transition: all 300ms ease;
		transition: all 300ms ease;
		border: 0;
		min-width: 94px;
		height: 24px;
		line-height: 24px;
	}
	.loginContainer .btnLoginLock {
		display: inline-block;
		font-size: 0.875rem;
		background-color: #ff0000;
		padding: 0 20px;
		color: #FFF;
		border-radius: 4px;
		text-decoration: none;
		-webkit-transition: all 300ms ease;
		transition: all 300ms ease;
		border: 0;
		min-width: 94px;
		height: 24px;
		line-height: 24px;
	}
.loginContainer .dark {
        margin-top:10px;
        font-size: 0.875rem;
        background-color: #2b7367;
        border: none;
        border-radius: 1em;
        color: #FFFFFF;
        /*padding: 1em 1em 1em 1em;*/
        cursor: pointer;
        outline: none;
        border-radius: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Noto Sans SC', Arial, Helvetica, sans-serif;
        margin-bottom: 10px;
        height: 26px;
        line-height: 26px;
    }
    .loginContainer .dark .darkico{
        width:14px;
        height:20px;
    }
    .no-touch .loginContainer .btnLogin:hover {
        background-color: #2489AA;
    }
.no-touch .loginContainer .btnLoginLock:hover {
	background-color: #b31b1b;
}
.loginContainer .btnForgotPw { font-size: 0.875rem; font-style: italic; color: #FFFFFF; float: right;}
.loginContainer .btnContainer:after { display: inline-block; content: ' '; clear: both; min-height: 1px; visibility: hidden;}

.loginContainer.desktop i.login {/*display:block;*/ margin-left:auto; margin-right:auto; width:50px; height:50px; margin-bottom:5px;}
.loginContainer.desktop .loginForm h3 {font-size:1.25rem; padding-bottom:15px;}
.loginContainer.desktop .loginForm {padding-left:20px; padding-right:20px; max-width:none;}
.loginContainer.desktop input[type=text], .loginContainer.desktop input[type=password] {height:42px; line-height:42px; font-size:.875rem;}
.loginContainer.desktop .btnContainer {overflow:hidden;}
.loginContainer.desktop .btnLogin {
	font-size: 1.125rem;
	height: 35px;
	line-height: 35px;
	width: 100%
}
.loginContainer.desktop .btnLoginLock {font-size:1.125rem; height:35px; line-height:35px; width:100%}
.loginContainer.desktop .dark {
    margin-top: 10px;
    font-size: 18px;
    background-color: #2b7367;
    border: none;
    border-radius: 1em;
    color: #FFFFFF;
    /*padding: 1em 1em 1em 1em;*/
    cursor: pointer;
    outline: none;
    border-radius: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans SC', Arial, Helvetica, sans-serif;
    margin-bottom: 10px;
    height: 35px;
    line-height:35px;
}
.loginContainer.desktop .dark .darkico {
        width: 17px;
        height: 25px;
}
.loginContainer.desktop .btnForgotPw {
    padding-top: 3px;
}

.custSelect.error + span {border-color:#E3000C; background-image:url(../images/icon_error.png); background-repeat:no-repeat; background-position:95% 50%; background-size:23px auto;}
input[type=text].error, input[type=password].error {border-color:#E3000C; background-image:url(../images/icon_error.png); background-repeat:no-repeat; background-position:95% 50%; background-size:23px auto;}
input[type=text].error::-webkit-input-placeholder, input[type=password].error::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color:rgba(234,0,0,.8);}
input[type=text].error::-moz-placeholder, input[type=password].error::-moz-placeholder { /* Firefox 19+ */ color:rgba(234,0,0,.8);}
input[type=text].error:-ms-input-placeholder, input[type=password].error:-ms-input-placeholder { /* IE 10+ */ color:rgba(234,0,0,.8);}
input[type=text].error:-moz-placeholder, input[type=password].error:-moz-placeholder { /* Firefox 18- */ color:rgba(234,0,0,.8);}

/*.dark {
	font-size: 18px;
	background-color: #2b7367;
	border: none;
	border-radius: 1em;
	color: #FFFFFF;
	padding: 1em 1em 1em 1em;
	cursor: pointer;
	outline: none;
	border-radius: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Noto Sans SC', Arial, Helvetica, sans-serif;
	margin-bottom:10px;
}*/

.buttontext {
	padding-left: 1em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* END LOGIN */

/* CUSTOM SELECT */
.customSelect { min-width: 290px; /*min-width:290px; */height:56px; line-height:48px; text-align:left; border:#DEE5EA 2px solid; padding:0 40px 0 20px; background-color:#F9FBFD; font-weight:bold;}
.customSelect:after {content:''; position:absolute; top:50%; right:18px; width:10px; height:10px; border:2px solid #999; margin-top:-8px; display:inline-block; border-top:none; border-left:none; vertical-align:middle; -webkit-transform:rotate(45deg); transform:rotate(45deg); -ms-transform:rotate(45deg); pointer-events: none;}
.customSelectInner {width:100% !important; white-space:nowrap; overflow:hidden;}
.selectMenu.date {margin-right:10px;}
.selectMenu.date:last-child  {margin-right:0;}
.date .customSelect {min-width:90px;}
/* END CUSTOM SELECT */


/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.5; filter: alpha(opacity = 50); z-index: 10002; }
#colorbox{outline:0; z-index: 10003; }
    #cboxTopLeft{display:none;width:0; height:0;}
    #cboxTopRight{display:none;width:0; height:0;}
    #cboxBottomLeft{display:none;width:0; height:0;}
    #cboxBottomRight{display:none;width:0; height:0;}
    #cboxMiddleLeft{display:none;width:0;}
    #cboxMiddleRight{display:none;width:0;}
    #cboxTopCenter{display:none;height:0;}
    #cboxBottomCenter{display:none;height:0;}
    #cboxContent{overflow:hidden;}
        .cboxIframe{}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{}
        #cboxLoadingGraphic{}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{text-indent:-9999px; background-color:transparent; border:none; position:absolute; top:15px; right:15px; width:35px; height:35px; display:block; padding:0;}
				#cboxClose:before, #cboxClose:after {content:''; border-top:#666666 2px solid; width:23px; height:1px; position:absolute; top:17px; left:6px;}
				#cboxClose:before {-moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg);}
				#cboxClose:after {-moz-transform:rotate(135deg); -ms-transform:rotate(135deg); -webkit-transform:rotate(135deg); transform:rotate(135deg);}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*Update on 20170808 - virtual assistant button*/
/*.btnVirtualAssistant {background:url(../images/img-virtual-assistant.png) no-repeat 0 0; color: #FFF; font-size: 16px; width: 210px; height: 72px; display: block; position: fixed; top: 191px; right: -91px; z-index: 1000; padding: 19px 0 0 23px; box-sizing: border-box; -ms-transform: rotate(90deg);  -webkit-transform: rotate(90deg);  transform: rotate(90deg); font-size: 18px; font-weight: bold;}
.btnVirtualAssistant span {position: absolute; line-height: 240%;}
.tc .btnVirtualAssistant {background-image:url(../images/img-virtual-assistant-tc.png); width: 170px; right: -70px; top: 166px;}
.tc .btnVirtualAssistant span {-ms-transform: rotate(270deg);  -webkit-transform: rotate(270deg);  transform: rotate(270deg); position: absolute; width: 20px; top: -16px; left: 60px; line-height: 150%;}*/
/*Ebd of Update on 20170808 - virtual assistant button*/

/*Update on 20170808 - virtual assistant button*/
.btnVirtualAssistant {background:url(../images/img-virtual-assistant.png) no-repeat 0 0; color: #FFF; font-size: 16px; width: 216px; height: 56px; display: block; position: fixed; top: 310px; right: -85px; z-index: 1000; padding: 10px 0 0 23px; box-sizing: border-box; -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari */ transform: rotate(90deg); font-size: 18px; font-weight: bold;}
.btnVirtualAssistant span {position: absolute;left: 16px;top: 7px;}
.tc .btnVirtualAssistant {background-image:url(../images/img-virtual-assistant-tc.png);}
.tc .btnVirtualAssistant span {-ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Safari */ transform: rotate(270deg); position: absolute; width: 20px; top: -27px; left: 80px; line-height: 140%;}
/*End of Update on 20170808 - virtual assistant button*/

@media (min-width: 1024px){
	.listingTable .mobile_bgColor:not(.desktop_bgColor){ background-color: transparent; }
	.pull-left-md { float: left; }
}
@media (max-width: 1100px){
	.listingTable tbody td .itemChildWrap{
		padding: 10px 4px;
	}
	.listingTable .btnEdit, .listingTable .btnCancel{ font-size: .7rem; line-height: 1.5; }
}

@media (max-width:1023px){
	body:before {content: "tabletPort";}
	.pageWrapper { padding: 0 12px; }
	.navs.desktopElem { display: none;}
	input {font-size:.75rem;}
	
	/* Mobile Nav starts */
	.bodyOverlay.nav { margin-top: 45px;}
	.header header { z-index: 10002;}
	.fixed .header header { z-index: 10002;}
	.header .logo { padding: 0 12px; width: auto; top:1px}
	.header .logo a { max-height: 33px; max-width: 85px;}

	nav { height: 45px;}
	nav .mobileBtn { display: block; position: absolute; right: 0; top: 0; padding: 5px 0 0 0;}
	nav .mobileBtn a { display: inline-block; width: 40px; height: 40px; padding: 6px 0; text-align: center; }
	nav .mobileBtn a:before { display: inline-block; content: ' '; position: relative; background-position: 0 0; background-repeat: no-repeat; background-size: 200%; width: 24px; height: 24px;}
	nav .mobileBtn a.active:before {background-position: right 0; padding-bottom: 15px;}
	nav .mobileBtn .btneChat:before { background-image: url(../images/nav_sprite.png);background-position: 0 -192px;  }
	nav .mobileBtn .btnHome:before { background-image: url(../images/nav_home.png); }
	nav .mobileBtn .btnHome.active { background-color: #E27A2C; }
	nav .mobileBtn .btnLogin:before { background-image: url(../images/nav_login.png);}
	nav .mobileBtn .btnLogin.active { background-color: #6FAE17;}
		nav .mobileBtn .btnLoginLock:before {
			background-image: url(../images/nav_login.png);
		}

		nav .mobileBtn .btnLoginLock.active {
			background-color: #6FAE17;
		}
	nav .mobileBtn .btnAccount:before { background-image: url(../images/icon_account.png);}
	nav .mobileBtn .btnAccount.active { background-color: #6FAE17;}

	nav .mobileBtn .btnMenu { width:44px; height:24px; padding:3px 12px; display:inline-block;}
	nav .mobileBtn .btnMenu:hover:before,
	nav .mobileBtn .btnMenu.active:before { padding-bottom: 4px;}
	nav .mobileBtn .btnMenu:before, nav .btnMenu:after {content:''; display:block; border-top:#939393 3px solid; padding-bottom:4px; -webkit-transition:all 300ms ease; transition:all 300ms ease; height: auto; width: auto;}
	nav .mobileBtn .btnMenu:after {border-bottom:#939393 3px solid; }
	nav .mobileBtn .btnMenu.active:before,
	nav .mobileBtn .btnMenu.active:after {border-color:#1AA3CF;}

	nav .topNavContainer { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 10; margin-top: 45px; height: 0; }
	nav .topNavContainer .displayContent { display: none;}
	nav .topNavContainer .displayContent { /*top: 45px;*/ position: absolute; width: 100%;}
	nav .topNavContainer .homeContainer a { display: block; padding: 20px 24px; color: #FFFFFF; font-size: 0.875rem;}
	nav .topNavContainer .homeContainer a i.icon { width: 20px; height: 20px; background-size: 200%;}
	nav .topNavContainer .homeContainer a i.household { background-position: right 0;}
	nav .topNavContainer .homeContainer a i.business { background-position: right -80px;}
	nav .topNavContainer .homeContainer .household a { background: #E27A2C;}
	nav .topNavContainer .homeContainer .business a { background: #1AA3CF;}

	.mobileNav {position:fixed; top:45px; left:100%; width:100%; height: 100%; overflow:auto; z-index:10000; background-color:#EFEFEF; display:block; -webkit-overflow-scrolling:touch;}
	.mobileNav .searchForm {margin:20px 12px 15px 12px;}
	.mobileNav .searchForm .cate { display: none;}
	.mobileNav .keywords, .searchResultsContainer .keywords { width: 100%;}
	.mobileNav .keywords input[type=text] { border-left: 1px solid #CCC; border-radius: 4px; font-size: 0.875rem; padding-left: 15px; height: 45px;}
	.mobileNav .keywords .submitSearch { width: 45px; height: 45px;}
	.mobileNav .mainNav { padding-left: 12px; padding-right: 12px;}
	.mobileNav .mainNav .mainCate + .mainCate { padding-top: 10px;}
	.mobileNav .mainNav a { font-size: 0.875rem;}
	.mobileNav .mainNav > .mainCate > a { background: #E27A2C;}
	.mobileNav .mainNav > .mainCate.household > a i.icon { background-position: right 0;}
	.mobileNav .mainNav > .mainCate.business > a { background: #197AB6;}
	.mobileNav .mainNav > .mainCate.business > a i.icon { background-position: right -100px;}
	.mobileNav .mainNav > .mainCate ul.subCate { display: none;}
	.mobileNav .mainNav > .mainCate > a { display: block; padding: 9px 12px; border-radius: 4px; color: #FFFFFF; font-weight: bold; position: relative;}
	.mobileNav .mainNav > .mainCate > a:hover { text-decoration: none;}
	.mobileNav .mainNav > .mainCate > a i.arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; display: inline-block; }
	.mobileNav .mainNav > .mainCate > a i.arrow:before,
	.mobileNav .mainNav > .mainCate > a i.arrow:after { content: ''; position: absolute; height: 3px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #FFF; -webkit-transition:all 300ms ease;transition:all 300ms ease; transform-origin: center center;}
	.mobileNav .mainNav > .mainCate > a i.arrow:before { transform: rotate(0deg);}
	.mobileNav .mainNav > .mainCate > a i.arrow:after { transform: rotate(90deg);}
	.mobileNav .mainNav > .mainCate.active > a i.arrow:after { transform: rotate(0deg);}
	.mobileNav .mainNav > .mainCate.active > a { border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
	.mobileNav .mainNav .subCate li > a i.arrow { display: none; }
	.mobileNav .mainNav .subCate li.hasSub > a i.arrow { display: block; }
	.mobileNav .mainNav .subCate { border-top: 1px solid rgba(0,0,0,.15);}
	.mobileNav .mainNav .subCate > li { display: block; border-bottom: 1px solid #E1E1E1; }
	.mobileNav .mainNav .subCate li > a { display: block; font-weight: bold; padding: 12px; position: relative; }
	.mobileNav .mainNav .subCate li > a { color:#E27A2C; }
	.mobileNav .mainNav .business .subCate li > a { color:#197AB6; }
	.mobileNav .mainNav .subCate li > a:hover { text-decoration: none;}
	.mobileNav .mainNav .subCate li.hasSub > a i.arrow  { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; display: inline-block; -webkit-transition:all 300ms ease;transition:all 300ms ease; transform-origin: center top;}
	.mobileNav .mainNav .subCate li.hasSub > a i.arrow:before,
	.mobileNav .mainNav .subCate li.hasSub > a i.arrow:after { content: ''; position: absolute; height: 3px; width: 12px; top: 50%; left: 0; margin-top: -1px; background: #999999; }
	.mobileNav .mainNav .subCate li.hasSub > a i.arrow:before { transform: rotate(45deg); margin-top: -6px; margin-left: 3px;}
	.mobileNav .mainNav .subCate li.hasSub > a i.arrow:after { transform: rotate(-45deg); margin-top: 1px; margin-left: 3px;}
	.mobileNav .mainNav .subCate li.active > a i.arrow { transform: rotate(90deg); right: 6px; }
	.mobileNav .mainNav .subCate li.active > a i.arrow:before,
	.mobileNav .mainNav .subCate li.active > a i.arrow:after { background: #E27A2C;}
	.mobileNav .mainNav .business .subCate li.active > a i.arrow:before,
	.mobileNav .mainNav .business .subCate li.active > a i.arrow:after { background: #197AB6;}
	.mobileNav .mainNav .subCate li.active { background: #FFFFFF; -webkit-transition:all 300ms ease;transition:all 300ms ease;}
	.mobileNav .mainNav .subCate li.active > a {  border-bottom: 1px solid #E27A2C; color: #E27A2C; }
	.mobileNav .mainNav .business .subCate li.active > a {  border-bottom: 1px solid #197AB6; color: #197AB6; }
	.mobileNav .mainNav .subCate li.active > a:hover { text-decoration: none;}
	.mobileNav .mainNav .subCate li > a + ul.subList { display: none; overflow: hidden; padding: 12px;}
	.mobileNav .mainNav .subCate li > a + ul.subList li { padding: 6px;}
	.mobileNav .mainNav .subCate li > a + ul.subList li a { display: inline-block; border: 0; position: relative; padding: 0 0 0 15px; font-weight: normal;}
	.mobileNav .mainNav .subCate li > a + ul.subList li a:before { display: inline-block; content: ' '; border-radius: 50%; background: #E27A2C; width: 6px; height: 6px; position: absolute; top: 10px; left: 0;}
	.mobileNav .mainNav .business .subCate li > a + ul.subList li a:before {background: #197AB6;}

	.mobileNav .mobileTool {padding:15px 12px 0 12px; margin-left:12px; margin-right:12px; overflow:hidden;}
	.mobileNav .mobileTool .title {font-size:.75rem; float:left; padding-top:5px;}
	.mobileNav .mobileTool .toolIcons {float:right; padding:0; width:auto;}
	.mobileNav .mobileTool .toolIcons a {float:left; width:32px; height:32px; border-radius:100%; position:relative; display:inline-block; margin:0 4px; background-repeat:no-repeat; background-color:#FFF; background-size:100% auto; color:#999; text-align:center; line-height:32px; text-decoration:none;}
	.mobileNav .mobileTool .toolIcons a.active {background-color:#1AA3CF; color:#FFF;}
	.mobileNav .mobileTool .toolIcons a.sizeS {font-size:.8125rem;}
	.mobileNav .mobileTool .toolIcons a.sizeM {font-size:1.125rem;}
	.mobileNav .mobileTool .toolIcons a.sizeL {font-size:1.5rem;}
	.mobileNav .mobileTool .footerSmContainer a {background-image:url(../images/sm_icon_lrg_sprite_grey.png);}
	.mobileNav .mobileTool .toolLanguageContainer {font-size:.8125rem; font-weight:bold;}


	/* AFTER LOGIN */
	.eAccountContainer {background:#6FAE17; padding:15px 45px 25px 45px;}
	.eAccountContainer > a {border-bottom:#FFF 1px solid; display:block; color:#FFF; font-size:1rem; padding-bottom:10px;}
	.eAccountContainer .myAccountPulldown {display:block; position:static;}
	.eAccountContainer .myAccountPulldown .myAccountInner {border-bottom:#FFF 1px solid; padding:20px 10px 15px 10px;}
	.eAccountContainer i.icon, .eAccountContainer i.arrow {display:none;}
	.myAccountPulldown .btnContainer {text-align:center; color:#FFF;}
	.myAccountPulldown .btnContainer a.button {font-size:1rem; margin-bottom:10px;}
	.myAccountPulldown .btnContainer a.btntxt {font-size:1rem;}
	.myAccountPulldown .btnContainer span {margin:0 10px;}
	.myAccountPulldown a.btnReminder {display:block;}
	
	.accountInfo {padding-bottom:10px;}
	.accountInfo dl dt, .accountInfo dl dd {float:none; width:100%;}
	.accountInfo dl dt {margin-bottom:0;}
	.accountInfo dl dd {margin-bottom:10px;}
	.accountInfo dl dd .selectMenu {width:100%; margin-top:5px; margin-bottom:10px; display:block;}
	.accountInfo dl dd .customSelect {width:100%;}
	
	.paymentContainer {margin-bottom:10px;}
	.paymentContainer ul {padding:20px 15px;}
	.paymentContainer ul li {display:block;}
	.paymentContainer ul li.currentPayment {padding-bottom:10px;}
	.paymentContainer .icon {float:left; width:18%;}
	.paymentContainer .icon img {width:70%;}
	.paymentContainer .billBalance {float:left; width:41%; padding-bottom:5px;}
	.paymentContainer .billDate {float:left; width:41%; padding-bottom:5px;}
	.paymentContainer .billBtn {clear:left; width:82%; margin-left:18%;}
	.paymentContainer .billBtn .btnPayBill {padding-top:11px; padding-bottom:11px;}
	.paymentContainer .title {font-size:.75rem;}
	.paymentContainer .balance, .paymentContainer .date {font-size:.875rem;}
	.paymentContainer .currentPayment .balance {font-size:1.25rem;}
	/*.paymentContainer .btnContainer .button.btnQrCode {display:none;}*/
	/*.paymentContainer .btnContainer .button.btneBilling {float:left; clear:none; width:50%;}*/

    .qrCodeContainer {border-radius:4px; background-color:#FFF; max-width:300px; padding:10%; text-align:center;}
    .qrCodeContainer p {line-height:1.3; font-size:1.25rem;}
    .qrCodeContainer .qrCode {margin-top:20px; border:#7BB52D 2px solid; border-radius:4px; padding:25px; display:inline-block;}

	/* END AFTER LOGIN */

	/* FOOTER */
	#footer { height: auto;}
	#footer .sectionContainer { padding: 30px 0;}
	#footer .section {height:auto; margin-bottom:15px;}
	#footer .section .sectionTitle {font-size:.75rem;}
	#footer .section .sectionContent .large {font-size:1.25rem;}
	#footer .row + .row {margin-top:10px;}
	.footerLinks .copyright {padding-right:0;}
	.footerLinks .copyright span { display: block; padding-top: 8px; line-height: 1.3; text-align:center;}
	/* END FOOTER */
	
	/* MAIN CONTENT */
	.contentContainer {margin-top:45px; padding:20px 15px 0 15px;}
	h1.pageTitle {font-size:1.125rem; padding-bottom:15px;}
	.hozBox {padding-bottom:10px;}
	.hozBox:last-child {padding-bottom:50px;}
	.pageBox ul .phaseBox {padding:20px 10px 20px 10px;}
	.pageBox ul .phaseBox h2 {font-size:.875rem; font-weight:bold;}
	.pageBox ul .phaseBox h3 {font-size:.8125rem;}
	.boxInner {padding:15px 15px 15px 15px; margin-bottom:15px;}
	.loginContainer.desktop {display:none;}
	.pageInner {font-size:.75rem;}
	.pageInner h2  {font-size:1rem;}
	.pageInner .intro {margin-bottom:10px;}
	.pageInner .intro p {font-size:.8125rem;}
	/*.pageInner > div {margin-bottom:15px;}*/
	/* Step */
	.stepsContainer {margin-top:0;}
	.stepsContainer .progressBar {height:6px;}
	.stepsInner {padding-left:0; padding-right:0; padding-bottom:30px;}
	.steps:after {margin:15px 10px 0 10px;}
	.steps li {padding-left:5px; padding-right:5px;}
	.steps .step {width:33px; height:33px; line-height:33px; font-size:.8125rem;}
	.steps .done .step {background-size:14px auto;}
	.steps .name {font-size:.75rem; word-break: break-word; }
	.formsContainer {padding:15px 15px 0 15px;}
	.formsContainer h3 {font-size:1rem;}
	.formsContainer .btnQuestion {width:25px; height:25px; top:12px; right:15px; background-size:7px auto;}
	.formsContainer .accountInfo dl dt, .formsContainer .accountInfo dl dd {width:100%;}
	.fieldItem {padding-bottom:20px;}
	.checkboxList .fieldItem{ padding-bottom: 4px;  }
	.fieldItem .title {width:50%; padding-right:10px;}
	.fieldItem .field {width:50%;}
	.fieldItem .field.col_1, .fieldItem .field.col_2 { width: 100%; }

	.fieldItem .field li {width:50%;}
	.fieldItem .field.multiRadio.onethird li {width:33.33333333%;}
	input[type=radio].custRadio + label {padding-left:30px; padding-top:4px;}
	input[type=text].calendarField {background-size:18px auto;}
	.ui-datepicker {margin-top:5px; padding-left:10px; padding-right:10px; padding-bottom:5px;}
	.ui-widget.ui-widget-content {border-width:1px;}
	.ui-datepicker .ui-datepicker-title {font-size:1em; padding:5px 0;}
	.ui-datepicker .ui-datepicker-prev:before, .ui-datepicker .ui-datepicker-next:before{width:10px; height:10px; border-width:1px; margin-top:-5px;}
	.ui-datepicker .ui-datepicker-prev {left:0;}
	.ui-datepicker .ui-datepicker-next {right:0;}
	.ui-datepicker .ui-datepicker-prev:before {margin-left:-2px;}
	.ui-datepicker .ui-datepicker-next:before {margin-left:-8px;}
	.ui-datepicker table {font-size:.75rem;}
	.ui-datepicker td {padding-left:5px; padding-right:5px;}
	.ui-datepicker th {padding:.6em .2em;}
	.ui-datepicker td span, .ui-datepicker td a {padding:.2em .2em;}
	
	.formsContainer input[type=text], .formsContainer input[type=password], .formsContainer textarea {width:100%; height:33px; line-height:33px; border-width:1px; padding-left:10px;}
	.fieldItem.txtBySide input[type=text], .fieldItem.txtBySide input[type=password] {width:100%;}
	.formsContainer textarea {height:100px; line-height:1.5;}	
	.fieldItem input[type=checkbox].custCheck + label {padding-left:34px; padding-top:0; background-size:22px auto;}
	.fieldItem input[type=checkbox].custCheck:checked + label {background-position:0 -106px;}
	.fieldItem .field.btnBySide {display:block;}
	.fieldItem.txtBySide .title, .fieldItem.txtBySide .field {width:100%;}
	.fieldItem.txtBySide input[type=text] {width:100%;}
	.fieldItem .note.onField, .btnContainer.onField {margin-left:0;}
	.fieldItem .selectMenu, .fieldItem.vert .selectMenu {display:block; width:100%;}
	.fieldItem .selectMenu .customSelect {width:100%; border-width:1px; height:33px; line-height:32px; padding-left:10px;}
	.fieldItem.txtBySide input[type=text].hkidFirst {width:82%;}
	.fieldItem.txtBySide input[type=text].hkidLast {width:10%;}
	.fieldItem .field.address.blockFlat .selectMenu, .fieldItem .field.nameWIthTitle .selectMenu {margin-right:10px;}
	.fieldItem .field.nameWIthTitle .selectMenu {width:40%;}
	.fieldItem .field.nameWIthTitle input[type=text] {width: calc(60% - 16px);}
	.fieldItem .field.address.blockFlat .selectMenu {width:31%;}
	.fieldItem .field.splitHalf input[type=text] {width:48.5%; margin-right:2.2%;}
	.fieldItem.vert .address .selectMenu {margin-bottom:5px;}
	.formTerms, .formPrivacy {padding-bottom:20px;}
	.formPrivacy {width:100%;}
	.formTerms ol li {padding-left:10px; padding-bottom:10px;}
	.rquiredNote {padding-bottom:20px;}
	.formsContainer .btnContainer {display:-webkit-flex; display:-ms-flexbox; display:flex;}
	.formsContainer .btnContainer button {-webkit-flex:1 1 auto; -ms-flex:1 1 auto; flex:1 1 auto; font-size:.875rem; padding:3px 10px;}
	.stepInfo {padding-bottom:20px;}
	.stepInfo:after {width:calc(100% + 10px); margin-left:-5px;}
	.fieldItem .field.address input[type=text] {margin-bottom:10px;}
	.fieldItem .field.address.blockFlat input[type=text] {width:29%; margin-right:10px;}
	.fieldItem .field.address .streetNum input[type=text] {width:45%;}
	.fieldItem .field.address .streetNum span {width:10%;}
	.subFieldItem{ padding-left: 36px;  }
	input[type=text].sub_inputbox{ margin-top: 0;}
	.subInputboxWrap .argeeTxt{ margin-bottom: 0px;  }
	
	.submittedSuccess .title, .detailsContainer.notices .title {font-size:1.125rem; padding-bottom:15px;}
	.submittedSuccess .refNo {font-size:.8125rem; padding-bottom:15px;}
	.submittedSuccess .iconSuccess {margin-top:10px; margin-bottom:40px; width:150px; height:150px;}
	.submittedSuccess .btnBackToHome {font-size:.8125rem; padding-left:20px; padding-right:20px;}
	.submittedSuccess .btnBackToHome:hover{ text-decoration: none; }
	.detailsContainer.notices{ padding: 0; }
    	
	.commonPromptPage .title, .detailsContainer.notices .title {font-size:1.125rem; padding-bottom:15px;}
	.commonPromptPage .refNo {font-size:.8125rem; padding-bottom:15px;}
	.commonPromptPage .iconSuccess {margin-top:10px; margin-bottom:40px; width:150px; height:150px;}
	.commonPromptPage .btnBackToHome {font-size:.8125rem; padding-left:20px; padding-right:20px;}
	.commonPromptPage .btnBackToHome:hover{ text-decoration: none; }


	.noStepInner .formsContainer {padding-right:0; padding-left:0;}
	.noStepInner .formsContainer h2 {padding-right:0; padding-bottom:15px;}
	.noStepInner .formsContainer h2:after {margin-top:10px; width:calc(100% + 10px); margin-left:-5px;}
	
	.paraWithIcon {padding-top:20px;}
	.paraWithIcon .icon {width:100px;}
	.paraWithIcon .content {width:calc(100% - 100px);}
	.paraWithIcon .content .title, .paraWithIcon .content .accInfo {float:none; width:100%;}
	
	.btnBackToNotices i{ margin-top: -5px; }

	.editable .btnEdit {right:15px; font-size:.75rem; top:13px;}
	.editable .btnCancel {right:15px; font-size:.75rem; top:13px;}
	.editable h2 {padding-right:80px;}
	.billLangRadio li {margin-right:20px;}
	
	.helpContainer {width:100%; padding-left:15px; padding-right:15px;}
	.helpContainer ul {margin-bottom:10px;}

	.formsContainer.appointmentDetails .boxInner h2{ padding-top: 10px; }
	
	.formsContainer .btnSwitchChartList{ top: 0; }

	.fieldItem .sub_selectBox select.custSelect{ max-width: 228px;  }

	.btnAddMoreAcc.appointment{ padding-top: 8px; padding-bottom: 9px; }
	.btnCenterWrap{ margin: 10px 0 20px 0; }

	.paraWithIcon .icon span img.payGasBillIcon{ width: 52px; height: auto; margin: 0; }

		/** Listing Table **/
		.accordionContainer.videoList .relatedSites .arrow{ position: absolute; right: 12px; top: 28%; }
		.accordionContainer.videoList .relatedSites .titleWrap{ width: 94%; margin-right: 0; line-height: 1.5; }

		.listingTable{ table-layout: auto; table-layout: initial;  }
		.accordionContainer.videoList .relatedSitesContent, .beforeListingTableWrap { padding: 10px 6px;  }
/*		
		.listingTable tbody .mobileShowValue td.header:nth-child(1),
		.listingTable tbody .mobileShowValue td.header:nth-child(2){ width: 42%; }
		.listingTable tbody .mobileShowValue td.header:nth-child(3){ width: 16%;  }*/

		.listingTable.normal thead td:nth-child(2),
		.listingTable.normal tbody td:nth-child(2),
		.listingTable.normal thead td:nth-child(3),
		.listingTable.normal tbody td:nth-child(3){ width: 42%; }
		.listingTable.normal thead td:nth-child(4), .listingTable tbody td:nth-child(4){ width: 16%; }

		.listingTable.appointment td:nth-child(2),  .listingTable.appointment td:nth-child(3), .listingTable.appointment td:nth-child(4){ width: 10%; }
		.listingTable.appointment td:nth-child(5){}
		
		.listingTableWrap{ padding: 12px 14px;  }
		.listingTable td .itemHeader{ font-size: 1rem; font-weight: 500; text-align: left; padding-left: 10px; }
		.listingTable.appointment td .itemHeader{ font-size: 0.7rem; }
		.listingTable td:nth-child(3) .itemHeader{ text-align: center; }
		.listingTable tbody td .itemChildWrap { padding: 10px 10px; text-align: left; }
		.accordionContainer.videoList .relatedSites .btnAccordion{ padding: 12px;  }
		
		.listingTable.appointment .mobileShowValue:not(.hideTablet){ display: block; }
		.listingTable tr.mobileShowValue{ display: table-row; }
		.listingTable .desktopShowValue{ display: none !important; }
		.listingTable tr.desktop_bgColor:not(.mobile_bgColor){ background-color: transparent; }
		.listingTable tr.mobile_bgColor{  }
		.listingTable td.desktopShowValue, .listingTable thead.desktopShowValue{ display: none; }
		.listingTable td.header{ border-bottom: 1px solid; }

		.listingTable .itemChildWrap.listHeader .itemChild{ float: left; padding-bottom: 12px;  }
		.listingTable tbody td .itemChildWrap, .listingTable .listContent .row > .itemChildWrap{ padding: 12px 6px; }
		.listingTable .itemChild .label{ margin-right: 20px; }
		.listingTable .itemChild .content{ color: #000; }
		.listingTable .itemChild .label, .listingTable .itemChild .content{ float: left; font-weight: 600; }
		.listingTable .itemChild .label:after, .listingTable .itemChild .content:after{ height: 0; }
		.listingTable .border_line{ width: 100%; height: 2px; }
		.listingTable .border_line.marginTop{ margin-top: 20px;  }
		.listingTable .border_line.marginBot{ margin-bottom: 20px;  }
		/** END Listing Table **/


		/** e-Chat chart room **/
		.eChatWrap{     position: absolute; top: 0; width: 100%; height: 100%; }
		.chatRoomWrap{ width: 100%; right: 0; position: absolute; height: 100%; }
		.chatRoomWrap .head{ border-radius: 0; }
		/** END e-Chat chart room **/

	/* END MAIN CONTENT */
	
	/* HOME BEFORE LOGIN */
	.homeIconBoxes ul {width:calc(100% + 10px); margin-left:-5px; margin-right:-5px;}
	.homeIconBoxes ul li {width:50%; min-height:155px; padding-left:5px; padding-right:5px; margin-bottom:10px;}
	.homeIconBoxes ul li > a, .homeIconBoxes ul li > div {padding:10px 10px 10px 10px;}
	/*.homeIconBoxes ul li.signUp > div .content .btnReg {display:none;}*/
	.homeIconBoxes ul li .content {font-size:.875rem;}
	.hozBox > div.promo2 {display:-webkit-flex; display:-ms-flexbox; display:flex;}
    .homeIconBoxesSpacing {padding-top: 0px;}
	/* END HOME BEFORE LOGIN */

	/* BUTTON STYLE */
	.button {font-size:.8125rem;}
	.fieldItem .field.btnBySide .button {padding-top:8px; padding-bottom:9px; margin-left:5px;}
	.captcha {height:33px; margin-left:5px;}
	.fieldItem .field.btnBySide .button.btnAddMoreAcc {margin-left:0; margin-top:5px;}
	.btnAddMoreAcc:before, .btnAddMoreAcc:after {width:12px; top:15px; }
	.btnAddMoreAcc.appointment:before, .btnAddMoreAcc.appointment:after{top:15px;}
	/* END BUTTON STYLE */
	
	/* METER READING CHART */
	.meterChart .chart {margin-bottom:10px;}
	/* END METER READING CHART */
	
	/* RIGHT HAND SIDE */
	.promoBanner .promoContent {padding-bottom:10px;}
	.promoBanner .promoTitle {font-size:.8125rem;}
	.promoBanner .promoOffer {font-size:.75rem;}
	.rhsContainer  {display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;}
	.rhsContainer > div {margin-bottom:15px;}
	.rhsContainer .promoBanner {width:calc(50% - 5px); -webkit-flex-direction:column; flex-direction:column;}
	.rhsContainer .promoBanner {margin-right:5px;}
	.rhsContainer .promoBanner:last-child {margin-right:0; margin-left:5px; margin-bottom:15px;}
	.signUpContainer {padding:10px 15px 15px 15px;}
	.signUpContainer p {font-size:.75rem;}
	.signUpContainer .btnSignUp {width:100%;}
	/* END RIGHT HAND SIDE */
	
	.customSelect {padding-right:25px;}
	.customSelect:after {width:8px; height:8px; right:12px;}
       /*Update on 20170808 - virtual assistant button*/
  /*.btnVirtualAssistant {display: none;}*/
  .btnVA {background:url(../images/img-virtual-assistant_m.png) no-repeat center center; background-size: auto 25px; position: relative; top: -2px; right: 3px; float:left;}
  /*End of Update on 20170808 - virtual assistant button*/
	
}
/*@media (min-width: 992px) {
	.hozBox .col-md-9 {width:74.8%;}
}*/
@media (max-width: 1023px) {
	.hozBox .col-md-9 {width:100% !important}
    .col-md-9 {width:100% !important}
    .col-md-3 {width:100% !important}
    .virtualAssistant{visibility:hidden }
}
@media (min-width: 768px) {
	.listingTable .mobile_bgColor.notTablet{ background-color: transparent; }
}
@media (max-width:767px) {
	html, body {height:auto; overflow-x:hidden;}
	body:before {content: "mobile";}
	.fixed {overflow:hidden !important; position:fixed !important;}
	.row {margin-right:-5px; margin-left:-5px;}
	.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {padding-right:5px; padding-left:5px;}
	.desktopElem {display:none;}
	p {padding-bottom:15px;}
	
	.smContainer {width:calc(100% - 10px); left:5px;}

	.pageWrapper {padding-left:0; padding-right:0; height:auto;}

	.subFieldItem .fieldItem.sub .argeeTxt{ width: 82%; margin-bottom: 0px; }

	.subInputboxWrap{ max-width: 83.8%; }

	.customSelect{ min-width: 260px; }


	.formsContainer.appointmentDetails .btnFloatWrap{ float:  left; width: 100%; }
	.formsContainer.appointmentDetails .btnFloatWrap a{ width: 48%;  padding: 7px 15px;}
	.formsContainer.appointmentDetails .btnFloatWrap a:nth-child(1){ margin-right: 3%; }
	.formsContainer.appointmentDetails .fieldItem .title{}
	.formsContainer.appointmentDetails .fieldItem .field{}

	.fieldItem .field.meter_reading input[type=text]{ margin-bottom: 14px; }

	h2.textCenter{ text-align: left; }
	.chart.consumptionHistory.index > h2, .chart.consumptionHistory.index > .chartPointWrap{ padding-left: 15px; padding-right: 15px; }

	.formsContainer .btnSwitchChartList{ right: 0; }

	.fieldItem .selectMenu.date .customSelect{ min-width: 80px; }

	.listingTable .column_1 .itemChild.alignLeft, .listingTable .column_1 .itemHeader.alignLeft{ padding: 0 10px; }

	/** History chart **/
	.chart.paymentHistory, .chart.consumptionHistory { max-width: 768px; overflow-x: scroll; overflow-y: scroll; }
	.chart.paymentHistory .chartContent, .chart.consumptionHistory .chartContent{ width: 1024px !important; }
	.chartPointWrap .wrap{ text-align: left; }
	ul.chartPointList li{ width: 100%; margin: 10px 0; }
	/** History chart **/
	


	/** Listing Table **/
	.listingTable.appointment .row .itemChild:not(.autoMinHeight){ min-height: 42px; }
	.listingTable .mobileShowValue{ display: block; }
	.listingTable .desktopTabletShowValue,  .listingTable.appointment .listHeader:not(.mobileShowValue){ display: none ; }
    /*previous version*/
    /*.listingTable .desktopTabletShowValue,  .listingTable.appointment .listHeader:not(.mobileShowValue){ display: none !important; }*/
	.listingTable.appointment .row > .itemChildWrap{ padding-left: 9px; padding-right: 9px; }
	.listingTable.appointment .row > .itemChildWrap:last-child{ min-height: 0; padding-top: 0; }
	.listingTable .itemChildWrap .itemChild .button.btnEdit{ width: 48%; margin-bottom: 0; margin-right: 4%; margin-top: 0; }
	.listingTable .itemChildWrap .itemChild .button.btnCancel{ width: 48%; margin-left: -4px; }
	/** END Listing Table **/


	/** eBilling **/
	/*.listingTable.ebilling .listHeader { display: block; }*/
    /*Previous versions*/
    .listingTable.ebilling .listHeader { display: none; }
	.listingTable.ebilling .listHeader.mobileShowValue { display: block; }
	.listingTable.ebilling .listContent .itemChildWrap:nth-child(1) .itemChild { text-align: left; font-size: 16px; }
	.listingTable.ebilling .listContent .itemChildWrap:nth-child(1) .itemChild .mobileShowValue { color: #7BB52D; margin-right: 20px; display: inline-block; }
	.listingTable.ebilling .listContent .itemChildWrap:nth-child(1) .itemChild div { display: inline-block; }
	/** END eBilling **/




	/** colorbox **/
	.cancelContainer .MessageWrap, .cancelContainer .bottomWrap{ padding: 12px; }
	.cancelContainer .btnContainer .button.btnYes, .cancelContainer .btnContainer .button.btnNo{ width: 48%; }
	.cancelContainer .btnContainer .button.btnNo{ margin-left: 2%; }
	/** END colorbox **/


	/** Listing with Paging **/
	.selectionWrap{ padding-bottom: 15px; }
	.selectionWrap .selectMenu{ width: 100%; }
	.selectionWrap .selectMenu select{ min-width: 100%; }
	.selectionWrap .selectMenu .customSelect{ width: 100%; }
	.selectionWrap .selectNoticesType .customSelect.custSelect:after, .selectionWrap .selectNoticesYear .customSelect.custSelect:after{ margin-top:  -10px; }
	.listing.notices{ padding-top: 0; }
	.listing.notices li .date{ width: 100%; margin: 0 0 0 0;  padding-left: 0; }
	.listing.notices li .content{ width: 100%; margin: 0 0 0 0; }
	.listing.notices li{ margin-bottom: 12px; }
	.listing.notices li:after{ margin-top: 12px; }
	.listing.notices .paging .button{ margin: 0 4px; }
	/** END Listing with Paging **/
}


/* Error page starts */
.errorPage {padding:50px 0 100px 0; margin:0 auto; width:600px; text-align:center;}
.errorPage .icon {background-repeat:no-repeat;background-position:center 0;}
.errorPage .page404 .icon {height:210px;background-image:url(../images/icon_404.png);}
.errorPage .page500 .icon {height:219px; background-image:url(../images/icon_500.png);}
.errorPage h1 {font-size:3rem; line-height:1.2; font-weight:bold; padding:40px 0 20px 0;color: #19A3CE;}
.errorPage h2 {font-size:1.5rem; line-height:1.2; color:#666; padding-bottom:40px;}
.errorPage .btnBackToHome {display:inline-block; font-size:1.125rem; color:#FFF; background-color:#7BB52D; border-radius:4px; padding:5px 25px;}
/* Error page ends */



/** eBilling not login**/
.ebillingformTerms {line-height:1; padding-bottom:20px;}
.ebillingformTerms ul { margin:0 0 0 20px; list-style:disc;}
.ebillingformTerms ul li {padding:0 0 15px 25px;}
.ebillingformTerms{padding-bottom:20px;}
.ebillingformTerms ul li {padding-left:10px; padding-bottom:10px;}
/** END eBilling not login**/


#floatMess { font-family: Arial, 新細明體, Helvetica; position:fixed ; top:0px; left:0px; float:left; width:100%; border:0px solid #999; filter:Alpha(opacity=65); opacity:0.65; background-color:#456; color:#ffffff; padding:5px 0px 5px 0px; text-align:center; z-index:1000; font-size:8.3pt; }

.logoMobile {
    display: none
}

.logoLrg {
    display: block;
    max-width: none;
}

@media (max-width:1024px) {
    .logoLrg {
        display: block;
        max-width: 230%;
    }
}

@media (max-width:767px) {
    .logoLrg {
        display: none
    }

    .logoMobile {
        display: block;
        max-width: 220%;
    }
}

@media (max-width:1200px) {
    .loginSuccess .header header .mainNav ul li.accountNav i.arrow {
        right: 18px;
        top: 0px;
    }

    .loginSuccess .header header .mainNav ul li.accountNav.active a i.arrow {
        top: 6px;
    }
}

.chartBarAboveDiv {
    padding: 30px;
}

.chartBarAboveSpan {
    padding: 10px;
    border: 1px solid #000000;
    background: yellow;
}

.chartBarBelowTablePadding {
    padding: 30px;
}

.chartBarBelowTableBorder {
    padding: 24px;
    border: 1px solid #e27a2c;
    border-radius: 4px;
}

@media (max-width:767px) {
	.chartBarAboveSpan {
		padding: 0px;
		border: 0px solid #000000;
		background: yellow;
	}

	.chartBarAboveDiv {
		padding: 15px 0px 15px 0px;
		padding: 10px;
		border: 1px solid #000000;
		background: yellow;
	}

	.chartBarBelowTablePadding {
		padding: 15px 0px 0px 0px;
	}
}