@CHARSET "UTF-8";

@font-face {
  font-family: 'helvetica_ceregular';
  src: url("../fonts/hv-webfont.eot");
  src: url("../fonts/hv-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/hv-webfont.woff") format("woff"), url("../fonts/hv-webfont.ttf") format("truetype"), url("../fonts/hv-webfont.svg#helvetica_ceregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

/**default setting**/
.img-full{width:100%; margin:0 auto;}
.img-fluid{max-width:100%;}
.button{ display: inline-block; font-size:1.286em; padding:10px 16px; line-height: 1.33333; text-align:center; color: #666; background-color: #e1e5ec; margin-left:5px;}
.button:hover, .button:active{text-decoration:none;}
.button i{font-size:1em; margin-right:5px;}
.button i.right{margin-right:0; margin-left:5px;}
.button.theme1{background-color: #f68a33; color: #fff; -webkit-transition:color 0.4s ease-in-out, background-color 0.4s ease-in-out; -moz-transition:color 0.4s ease-in-out, background-color 0.4s ease-in-out; -o-transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out; transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out;}
.button.theme1:hover{color: #005288;}
.button.theme2{background: #ebf0f2; color: #005288;}
.button.theme3{background: #fff; border:1px solid #f68a33; padding:7px 15px; color: #f68a33; font-size:1em;}
.button.theme4{background: #0462aa; color:#fff;}
.button.theme5{background: #ebf0f2; color: #666666;}
.button.small-size{font-size:1em; padding: 6px 12px;}
.btn-circle {-webkit-transition: background-color 0.4s ease-in-out; -moz-transition: background-color 0.4s ease-in-out; -o-transition: background-color 0.4s ease-in-out;border-radius: 25px!important; color:#fff; border: 2px solid #fff;}
.btn-circle:hover{background: #e1e5ec;}
.btn-circle:hover > i{color: #666666;}
.font-blue, a{color: #005288;}
.font-orange{color: #f68a33;}
.font-grey-mint {color: #525e64;}
.font-darkgrey{color:444444;}
.font-black{color:#000;}
.font-small{font-size:0.853em;}
.border-orange{border-color:#f68a33 !important;}
.nav-tabs li a{border-radius:0; border:none;}
.bg-hkbn-blue{background-color: #0462aa;}
.bg-hkbn-blue2{background-color: #00508c}
.cssHide,.showMobile{display:none;}
.cssShow{display:block;}
.closeButton{color:#f68a33;display:none;}
.closeButton .icon{ display: block; background:url("../images/common/btn-close-orange.png") center center no-repeat;padding:17px 15px;}
.closeButton.cssShow{display:block;}
.aLink{font-size:0.929em; color:#5c5c5c;}
.aLink:hover{color: #f68a33;}
.aLink i{margin-right:5px; color:#6394b9;}
.panel-group .panel{border:none; border-radius:0;padding:10px 15px;}
.panel-group .panel .panel-heading {padding:0;}
.panel-group .panel .panel-heading h4{font-size:1.429em; border-bottom: 2px solid #eee; padding:10px 0; margin-bottom:20px;}
.panel-group .panel .panel-heading h4 a:hover{text-decoration:none;}
.panel-group .panel .panel-heading h4 i{margin-left:5px;}
.panel-group .panel .panel-heading.active i.fa-minus-square-o{display:inline-block !important;}
.panel-group .panel .panel-heading i.fa-plus-square-o{display:inline-block !important;}
.panel-group .panel .panel-heading.active i.fa-plus-square-o{display:none !important;}

.btn-group{margin:20px auto; display:block; text-align:center;}
.btn-group a, .btn-group button{font-size:1.143em!important;}
.btn-group button{border:none;}

.table-list{margin:10px 0;}
.table-list dt{font-weight:normal; clear:both;}
.table-list dt, .table-list dd{float:left; width:50%; line-height:1.6;}

.remark-box{background:#efefef; padding:20px 30px; border-left:5px solid #005288; color:#666;}
.remark-box .grid-1, .remark-box .grid-2{float:left;}
.remark-box .grid-1{width:10%;}
.remark-box .grid-2{width:90%;}

.banner-adv{margin:0 auto 30px auto;}

body {font-family:Helvetica, Arial, sans-serif, 'Microsoft JhengHei', "Microsoft Yahei",  Heiti TC, STXihei;color: #333; font-size: 14px; background:#ebf0f3;}

.masterFrame{position:relative;}

.fancybox-skin.theme2{border-radius: 4px; overflow:hidden;}
.theme2 .fancybox-inner{margin-bottom:6px;}
.bx-wrapper .bx-pager.bx-default-pager a{background:#fff;}
.bx-wrapper .bx-pager.bx-default-pager a:hover,.bx-wrapper .bx-pager.bx-default-pager a.active{background: #f68a33; border-color: #f68a33;}

/**stepBar**/
.steps>li>a.step>.number {background-color: #eee; text-align: center; padding: 11px 15px 13px; margin-right: 10px; height: 45px; width: 45px; -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.steps>li>a.step>.desc, .steps>li>a.step>.number { display: inline-block; font-size: 1.143em; font-weight: 300;}
.steps>li>a.step .desc { font-size:1.286em;}
.steps>li.active>a.step .desc {color: #333; }
.steps>li.active>a.step .number {background-color: #0462aa;   color: #fff;}
.steps>li.done>a.step .desc i {font-size:0.857em;font-weight: 400; color: #999; display: inline-block;}
.steps>li>a.step>.desc>i {display: none;}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus{background:transparent;}
.steps>li.done>a.step .number{background-color: #f68a33;color:#fff;}
.steps>li.done>a.step .desc i {font-size: 12px;font-weight: 400; color: #999; display: inline-block;}
.progress-bar-hkbn {background-color: #0462aa;}
.progress {margin:15px 0; border-radius: 0;height:20px; background-image: none; filter: none;-webkit-box-shadow: none;-moz-box-shadow: none; box-shadow: none;}


/**header**/
.headerbar{background:#fff;}
.navbar-logo {padding:15px 0 10px 0;}
.navbar-menu .topmenu {list-style-type:none; margin:0; padding: 0;}
.navbar-menu .topmenu li{float: left; display:inline-block;}
.navbar-menu .topmenu li .button.theme1:hover{color: #005288;}
.navbar-toggle{margin-right: 0; padding: 0; margin-top: 16px;}
.navbar-toggle .iconBar {padding: 9px 5px;}
.navbar-toggle .icon-bar {width: 30px;height: 3px; border-radius: 0;}

/**footer**/
footer{background-color: #003d6a; padding: 17px 0; margin-top:20px; color: #a2abb7; font-size:0.929em;}
footer a{color: #e6e6e6;}
footer.fixed{position: fixed; bottom:0; width:100%;}
footer .footer-nav{text-align:right;}

/**main menu**/
.menuBar {background-color: #00508c; text-align:right;}
.menuBar a{color: #BCC2CB; font-size:1.286em; padding: 16px 18px 15px 18px;}
.menuBar .navbar-nav{text-align:right;}
.menuBar .menu-dropdown:hover .dropdown-menu {display: block; margin-top: 0;}
.menuBar .navbar-nav a:hover{color: #f68a33;}
.menuBar .navbar-nav a:hover > i {color: #fff;}
.menuBar .navbar-nav .dropdown-menu {min-width: 230px;max-width: 300px; background: #0462aa; box-shadow: 5px 5px rgba(85, 97, 111, 0.2); left:0; right:inherit; border:none;}
.menuBar .navbar-nav .dropdown-menu a{color:#fff;}
.menuBar .navbar-nav .dropdown-menu a:hover {background:inherit; color: #f68a33;}
.menuBar .navbar-nav .dropdown-menu i{color: #6fa7d7;}
.menuBar .navbar-nav > li.menu-reg  > a{color:#fff; float:left; width:50%; margin:0; padding: 15px 16px; text-align:center;border:1px solid #e1e5ec;}
.menuBar .navbar-nav > li.menu-reg  > a:last-child{border-left:0;}
.menuBar .navbar-nav > li.lang > a{text-align:right;}

/**sub menu**/
.subMenu.fixed{width:100%; padding:0; position:fixed;z-index:1; background: #fff; top:0; left:0; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);}
.subMenu.fixed .option1{padding: 0; border:none; background: #00508c;}
.subMenu.fixed .option1 .nav-tabs li a{color:#fff;}
.subMenu.fixed .option3 {margin:0 !important;}
.subMenu.fixed .option3 .container{width:100%;padding:0;}
.subMenu.fixed .option3 .container .row{border:none;padding: 5px 0;}
.subMenu.fixed .option2{padding:10px 0;}
.content-wrapper.set2 .subMenu.fixed .option3{margin-top:0px;}
.option1{padding:5px 0 10px 0; /*border-bottom:5px solid #00508c;*/ background: #eaeef0 url("../images/common/menuBg.png") 0 0 repeat-x;}
.option1 .nav-tabs{text-align:center; margin:0 auto; font-size:1.286em; border:none;}
.option1 .nav-tabs li{display: inline-block; float:none; margin:0 auto; color:#00508c ; padding:0 15px;}
.option1 .nav-tabs li.active a{color:#f68831; border-bottom:5px solid #f68831;}
.option1 .nav-tabs li a{color:#00508c; padding:10px 5px;}
.option1 .nav-tabs i{margin:0 5px;}

.option2 {padding:20px 0 20px 0; background: url("../images/common/submenuBg.png") 0 0 repeat-x;}
.option2 .nav-tabs{text-align:center; margin:0 auto; font-size:1.286em; border:none;}
.option2 .nav-tabs li{display:inline-block; float:none; margin:0 auto; padding:0 10px; color:#00508c;}
.option2 .nav-tabs li.active a{color:#f68831; border-bottom:5px solid #f68831;}
.option2 .nav-tabs li:hover a{color:#f68831;}
/*.option2 .nav-tabs li.active a:before{content: "\f0da"; margin-right:2px; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased;}*/
.option2 .nav-tabs li a{line-height:1; color:#00508c; padding:5px 0;}

.option3{}
.retention .option3{overflow:hidden;}
.option3.marginT{margin-top:40px;}
.option3 .container {padding:0 15px;}
.retention .option3 .container{padding:0;}
.option3 .container .row{margin: 0; padding:11.5px 0; /*border-bottom:5px solid #00508c; */background: #eaeef0 url("../images/common/menuBg.png") 0 0 repeat-x;}
.option3 .nav-tabs{text-align:center; margin:0 auto; font-size:1.286em; border:none;}
.option3 .nav-tabs > li{float:none; display:inline-block; margin:0 auto; padding: 10px 0;}
.option3 .nav-tabs > li > a{color:#00508c; padding: 0px 15px;}
.option3 .nav-tabs > li:last-child > a{border:none;}
.option3 .nav-tabs > li.active > a{color:#f68831; border-bottom:5px solid #f68831;}
/*.option3 .nav-tabs > li.active > a:before{margin-right:5px; content: "\f078"; font-size: 1em; display: inline-block; font: normal normal normal 16px/1 FontAwesome; text-rendering: auto;-webkit-font-smoothing: antialiased;}
*/

#back-to-top.show { opacity: 1;}
#back-to-top {width: 40px;height: 40px; color: rgb(255, 255, 255) !important; background-color: rgb(153, 153, 153); position: fixed;bottom: 50px; right: 40px; z-index: 9999;text-align: center; color: #fff;cursor: pointer; border: 0; text-decoration: none; transition: opacity 0.2s ease-out; opacity: 0;}
#back-to-top i{font-size:3em; opacity: 0.7;} 

.fancybox-inner{margin-bottom:20px;}

#mobile-cta.sticky {margin-top:20px; position: fixed;bottom: 0px;z-index: 2;width: 100%; left: 0; border-top: 1px solid #ebf0f2;}
#mobile-cta a{display:inline-block;float:left; margin: 0;}
#mobile-cta a.btn-toggle{width:16%;height: 40px; padding-top: 10px; border: 0; }
#mobile-cta a.btn-sticky {height: 40px; padding-top: 10px; font-size: 1.143em; width: 42%; border: 0; }

@media only screen and (max-width: 767px) {
   .steps > li:not(.active) {display: none;}
   .steps > li > a{margin:0; padding:0 0 0 20px; text-align:left;}

   #back-to-top{display:none!important;}
   footer{font-size: 9px; }
   footer .footer-nav{text-align:left;}
   .headerbar{border-bottom:2px solid #00508c;z-index:2;position:relative;}
   .menuBar{background:#fff;position:relative;}
   .menuBar .menu-wrapper{background: #fff; position: absolute; padding: 0; border: none; width: 100%; z-index: 1;}
   .menuBar .navbar-nav{margin:0;}
   .menuBar .nav > li {border-bottom-width: 1px;border-bottom-style: solid; border-bottom-color: rgb(212, 216, 218);}
   .menuBar .navbar-nav > li > a {text-align: left; color:#005288; padding:12px 15px;}
   .menuBar .navbar-nav .dropdown-menu{position:relative;float:none; min-width:100%; max-width:100%; background:#fff;padding-left: 10px; box-shadow: none; padding-bottom: 10px;}
   .menuBar .navbar-nav .dropdown-menu a, .menuBar .navbar-nav .dropdown-menu i{color: #666;}
   .menuBar .navbar-nav .dropdown-menu a{padding: 8px 15px;}
   .menuBar .navbar-nav a:hover > i{color:#f68a33;}
   .navbar-logo{max-width:60%;}
   .showMobile{display:inline-block;}
   .option1{border:none;}
   .option1 .nav-tabs li{padding:0; font-size:15px; }
   .option2{padding:15px 0;}
   .option2 .container{padding:0;}
   .option2 .nav-tabs, .option3 .nav-tabs {font-size: 1em;}
   .option2 .nav-tabs li{padding:0 5px;}
   .option3 .nav-tabs > li.active > a{font-weight:normal;}
   .option3 .nav-tabs > li {padding:5px 0;}
   .menuBar .nav li > a > .arrow:after { position: absolute; display: inline-block; font-size: 30px; right: 20px;top: 11px;  font-family: FontAwesome; height: auto; content: "\f107"; font-weight: 300;}
   .grey-bg{top: 0; position:fixed; background-color: #d4d8da; width: 100%;height:100%; left:0; z-index: 1;}
   .remark-box .grid-1, .remark-box .grid-2{float:none; width:100%;}
}

@media only screen and (min-width: 768px){
  .navbar-toggle {display: none;}
}