/************************************************************************************
3Q
*************************************************************************************/
/*.qqqpagebg1 { background-image: url(../reg_images/bg-pc.jpg);background-position: center top; background-size: 100%; background-repeat: no-repeat; }
*//*.qqqpagebg2 { background-image: url(../reg_images/bg-pc2.jpg);background-position: center top; background-size: 100%; background-repeat: no-repeat;background-attachment: fixed }
*/
.qqqkv { display: inline-block; /*display:none;*/ width: 33%; line-height: 0%; }
.qqqcontent { display: inline-block;  /*width: 50%; */ text-align: left; padding-left: 30px; vertical-align: top; }
.qqqhomecontenttop {width:10px; clear:both; height: 40px}
.qqqhomeformtop {width:10px; clear:both; height: 50px}
.qqqhomeheader { font-size: 34px; font-weight: bold; }
.qqqhomecontent { font-size: 34px; font-weight: bold; }
.qqqhomesubtitle { font-size: 26px; font-weight: bold;line-height: 160%; }
.qqqfaqtitle { font-size: 22px; font-weight: bold;line-height: 160%; }
.qqqfaqcontent { font-size: 22px; line-height: 160%; }

.qqqhomeheaderen { font-size: 34px; font-weight: bold; }
.qqqhomecontenten { font-size: 26px; font-weight: bold; }
.qqqhomesubtitleen { font-size: 26px; font-weight: bold;line-height: 160%; }
.qqqfaqtitleen { font-size: 18px; font-weight: bold;line-height: 160%; }
.qqqfaqcontenten { font-size: 18px; line-height: 160%; }

.qqqbuttext {
  font-size: 18px;
  clear: both;
  color: #000000;
  margin: 15px 30px 15px 30px;
  font-weight: bold;
  pointer-events: none;
  text-transform: uppercase;
}

.qqqbuttexthide {
  font-size: 18px;
  clear: both;
  color: #999999;
  margin: 15px 30px 15px 30px;
  font-weight: bold;
  pointer-events: none;
  text-transform: uppercase;
}

.qqqbuttexten {
  font-size: 18px;
  clear: both;
  color: #000000;
  margin: 15px 30px 15px 30px;
  font-weight: bold;
  pointer-events: none;
  text-transform: uppercase;
}

.qqqbutton1 {
  background: url(../reg_images/bg_button01.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  margin: 5px 0px 5px 0px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  text-align: center;
  width: 300px;
}

.qqqbutton1:hover {
  background: url(../reg_images/bg_button01.jpg) no-repeat;
  background-size: 300%;
}

.qqqbuttonhide {
  background-color: #d7d7d7;
  margin: 5px 0px 5px 0px;
  padding: 0px 0px 0px 0px;
  float: none;
  display: inline-block;
  text-align: center;
  width: 300px;
}

.qqqbuttonhide:hover {
  background-color: #d7d7d7;
}

.qqqbutton2 {
  background-color: #ffffff;
  border: #000000 solid 2px;
  margin: 5px 0px 5px 0px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  text-align: center;
  width: 300px;
}

.qqqbutton2:hover {
  background-color: #f8f8f8;
}


.qqqtopbuttext {
  font-size: 20px;
  clear: both;
  color: #000000;
  margin: 5px 30px 5px 30px;
  font-weight: bold;
  pointer-events: none;
  text-transform: uppercase;
}

.qqqtopbutton {
  background-color: #ffffff;
  border: #000000 solid 2px;
  margin: 15px 5px 0px 5px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: none;
  display: inline-block;
  text-align: center;
  height: 40px;
}

.qqqtopbutton:hover {
  background-color: #f8f8f8;
}

.qqq_big_banner {
  padding:0px 10px;
}

.menu_shadow{
  box-shadow: 0px -3px 8px 6px #2121271a;
}

.qqq_big_banner img{
  display: block;
  width: 100%;
  max-width: 682px;
  margin:0px auto;
}

.formtable { width: 650px; background-color: rgba(255, 255, 255, 0.6) }
.formsteptxt { font-size: 24px; color: #b4b4b4; font-weight: bold; }
.formsteptxten { font-size: 20px; color: #b4b4b4; font-weight: bold; }
.formsteptxtover { font-size: inherit; color: #000000; }
.formliketxt { font-size: 22px; }

.formfinishtxt { font-size: 30px; font-weight: bold; line-height: 300% }
.formfinishtxtnumber { font-size: 30px; font-weight: bold; color: #6f3ab1 }
.formfinishtxtregnumber { font-size: 50px; font-weight: bold; color: #6f3ab1; line-height: 100% }
.formfinishtxtremark { font-size: 20px; color: #666666; line-height: 300% }

input[type=text], select { font-size: 18px; width: 100%; padding: 5px 10px 5px 10px; margin: 5px 0px 5px 0px; display: inline-block; border: 1px solid #000000; box-sizing: border-box; }
input[type=password], select { font-size: 18px; width: 100%; padding: 5px 10px 5px 10px; margin: 5px 0px 5px 0px; display: inline-block; border: 1px solid #000000; box-sizing: border-box; }
.qqqotpinput { width: 50px !important; text-align: center; height: 50px; }
.qqqinputerr { border-color: #FF0000 !important; }


input[type=submit] { font-size: 18px; width: 330px; background-color: #ffffff; color: #000000; padding: 10px; border: none; cursor: pointer; border: #000000 solid 2px; }

input[type=submit]:hover { background-color: #f8f8f8; }

.qqqotptxt { font-size: 20px; color: #858585 }
.qqqotptxten { font-size: 20px; color: #858585 }
.qqqerrortxt { color: #FF0004;display: inline-block }

.qqqtd { padding:10px }
.qqqremark { font-size: 14px }
.qqqol { font-size: 16px;line-height: 160%; }
.qqqolen { font-size: 14px;line-height: 160%; }


/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-top: 13px;
    margin-bottom: 13px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	font-weight: bold;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: -5px;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #ffffff;   
	border: #000000 solid 2px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #ffffff;
	border: #000000 solid 2px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #000000;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hsbclogo { width: 90px;  }
.hsbcinput { width: 92% !important; }
.hsbcicon {width: 18px; margin-left: 10px; }
#hsbc_title{
	color:rgb(203, 17, 156);
	font-weight:bold;
}

/* ==========================================================================
plan
   ========================================================================== */

.tmptable { border-collapse: collapse; border: 1px solid #D1D1D1; padding: 10px 5px; text-align: center; height: 20px; font-size:16px; }
.tmptableadd { border-collapse: collapse; border: 1px solid #D1D1D1; padding: 10px 5px; text-align: left; height: 20px; font-size:16px; }
.tablewidth { width: 1100px }
.tablewidthplan { width: 1100px }

.tmptrheader { background-color: #8c3d98; font-weight:bold; height: 40px; color:#FFFFFF; }
.stepframe { width: 33%; display: inline-block;vertical-align: top;padding-bottom: 50px; font-size: 16px; }

.plantablescroll {  }

/* ==========================================================================
   Start of CSS
   ========================================================================== */
body {
  color: #333;
  font-size: 18px;
  line-height: 20px;
}

h1 {
  margin-top: 0px;
  margin-bottom: 10px;
  font-family: Noto Sans TC, Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
}

h3 {
  margin-top: 0px;
  margin-bottom: 10px;
  font-family: Noto Sans TC, Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
}

h4 {
  margin-top: 0px;
  margin-bottom: 10px;
  font-family: Noto Sans TC, Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif;
  font-size: 30px;
  line-height: 32px;
  font-weight: 700;
}

.banner {
  height: 650px;
  background-color: #ffffff;
  background-image: url(".jpg");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner.with-slider {
  height: 700px;
  background-image: none;
  background-size: auto;
  background-repeat: repeat;
}

.banner.style-3 {
  height: 600px;
  background-image: url(".jpg");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.navbar {
  padding: 10px 10px;
  border-bottom: 1px solid hsla(0, 0%, 100%, .3);
  background-color: transparent;
}

.navbar.style-2 {
  border-bottom-color: #e1e1e1;
  background-color: #fff;
}

.nav-link {
  margin-left: 5px;
  padding: 12px 25px 8px 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

.nav-link:hover {
  border-color: hsla(0, 0%, 100%, .38);
  text-decoration: none;
}

.nav-link.no-drop {
  padding-right: 10px;
}

.nav-link.no-drop.w--current {
  /*border-color: hsla(0, 0%, 100%, .38); */
  color: #fff;
}

.nav-link.no-drop.dark.w--current {
  /* border-color: #ffffff; */
  color: #313131;
	
}

.nav-link.dark {
  color: #313131;
  font-weight: 700;
}

.nav-link.dark:hover {
  background-color: #f0f0f0;
}

.arrow-drop {
  margin-top: 14px;
  margin-right: 8px;
  font-size: 12px;
}

.section {
  position: relative;
  padding: 50px 10px;
}

.section.gray {
  background-color: #f3f5f7;
}

.section.no-bottom-margin {
  padding-bottom: 0px;
}

.section.with-line {
  border-top: 1px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
}

.section.with-line.more {
  padding-bottom: 60px;
}

.section.with-color {
  background-color: #0f4473;
}

.section.with-color.with-map {
  background-image: url("../reg_images/bg-5g.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.section.with-color.less-space {
  padding-top: 40px;
  padding-bottom: 40px;
}

.section.with-image {
  padding-top: 120px;
  padding-bottom: 120px;
  background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(".jpg");
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(".jpg");
  background-position: 0px 0px, 50% 100%;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
}

.container-fluid {
  display: block;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

.container-fluid.center {
  position: relative;
  top: 35%;
  -webkit-transform: translate(0px, -30%);
  -ms-transform: translate(0px, -30%);
  transform: translate(0px, -30%);
}

.container-fluid.center.more {
  top: 46%;
}

.lang_btn {
  display: inline-block;
  text-align: center;
  width: 76px;
  line-height: 33px;
  border: 2px solid black;
  color: black;
  vertical-align: -13px;
  font-weight: bold;
  cursor: pointer;
}

.heading-1 {
  font-size: 46px; 
}

.headingland {
  font-size: 50px;
  line-height: 80px;
}

.headinglandsub {
  font-size: 36px;
}

.heading-1.smaller {
  color: #0f2367;
  font-size: 20px;
  line-height: 30px;
}

.heading-1.small {
  font-size: 28px;
}

.heading-1.with-color {
  color: #0f2367;
  font-size: 18px;
  line-height: 30px;
}

.heading-1.pricing-title {
  font-size: 45px;
  line-height: 50px;
}

.heading-1.white {
  color: #fff;
}

.heading-1.white.biger {
  margin-bottom: 20px;
  font-size: 38px;
}

.color {
  color: #0f2367;
  font-size: 34px;
  font-weight: 400;
}

.color.smaller {
  color: #0f2367;
  font-size: 22px;
}

.color.white {
  color: #fff;
}

.top-margin {
  margin-top: 20px;
}

.top-margin.more {
  margin-top: 60px;
}

.top-margin.more.add {
  margin-top: 80px;
}

.titledes {
  color: #464646;
  font-size: 20px;
  line-height: 24px;
}

.paragraph {
  color: #464646;
  font-size: 18px;
  line-height: 30px;
}

.paragraph.white {
  color: #fff;
}

.paragraph.lighter {
  color: #969696;
}

.paragraph.more-gray {
  color: #969696;
  font-style: italic;
}

.paragraph.not-block {
  display: inline-block;
  padding-right: 15px;
  border-right: 1px solid #e1e1e1;
}

.paragraph.not-block.margin {
  margin-left: 15px;
}

.paragraph.not-block.margin.no {
  padding-right: 0px;
  border-right-style: none;
}

.paragraph.copy {
  margin-bottom: 0px;
  color: #464646;
  font-size: 12px;
}

.left-padding {
  padding-right: 30px;
}

.line-divider {
  width: 100%;
  height: 1px;
  margin-top: 35px;
  margin-bottom: 35px;
  background-color: #e1e1e1;
}

.div-block {
  margin-right: 10px;
  margin-left: 10px;
  padding: 5px;
  border: 1px solid #d6d6d6;
}

.div-block.full {
  margin-right: 0px;
  margin-left: 0px;
}

.light-wrapper:hover {
  opacity: 0.8;
}

.heading-2 {
  color: #363636;
  font-size: 19px;
  line-height: 29px;
}

.heading-2.white {
  color: #fff;
}

.logo-slider {
  top: 19px;
  height: auto;
  background-color: transparent;
}

.slide-nav {
  position: relative;
  padding-top: 20px;
  opacity: 0.7;
  font-size: 10px;
}

.slide-nav.white {
  opacity: 1;
}

.logo-wrapper {
  width: 100%;
  opacity: 0.8;
  text-align: center;
}

.logo-wrapper:hover {
  opacity: 1;
}

.service-wrapper {
  padding: 30px 20px 20px;
  border: 1px solid #d6d6d6;
  background-color: #fff;
}

.service-wrapper.add-margin {
  margin-bottom: 20px;
}

.service-icon {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  float: left;
  background-image: url(".svg");
  background-position: 50% 0px;
  background-size: 45px;
  background-repeat: no-repeat;
}

.service-icon.icon-2 {
  background-image: url(".svg");
  background-size: 45px;
}

.service-icon.icon-3 {
  background-image: url(".svg");
  background-size: 45px;
}

.service-icon.icon-4 {
  background-image: url(".svg");
  background-size: 45px;
}

.service-icon.icon-5 {
  background-image: url(".svg");
  background-size: 45px;
}

.service-icon.icon-6 {
  background-image: url(".svg");
  background-size: 45px;
}

.service-content {
  position: relative;
  overflow: hidden;
	line-height: 160%;
}

.heading-4 {
  font-weight: 700;
}

.heading-4.biger {
  font-size: 28px;
  line-height: 30px;
}

.heading-4.move {
  position: relative;
  top: 4px;
}

.heading-4.toggle {
  display: inline-block;
}

.top-title {
  margin-bottom: 20px;
}

.top-title.center {
  color: #fff;
  text-align: center;
}

.top-title.more {
  margin-bottom: 80px;
}

.tab-testi {
  top: 40px;
  z-index: 3;
  display: inline-block;
  background-color: #fff;
}

.testi-photo {
  width: 85px;
  height: 85px;
  margin-right: 5px;
  margin-left: 5px;
  border-radius: 100%;
  background-image: url(".jpg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
}

.testi-photo:hover {
  opacity: 0.8;
}

.testi-photo.w--current {
  opacity: 1;
}

.testi-photo.photo-2 {
  background-image: url(".jpeg");
  background-size: contain;
}

.testi-photo.photo-3 {
  background-image: url(".jpeg");
  background-size: contain;
}

.testi-photo.photo-3.w--current {
  opacity: 1;
}

.testi-wrapper {
  display: block;
  width: 100%;
  margin-right: auto;
  font-family: Noto Sans TC, Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif;
  color: #464646;
  font-size: 18px;
  line-height: 30px;
  text-align: left;
}

.fund-wrapper {
  padding-top: 20px;
  padding-bottom: 20px;
  border-right: 1px solid #d6d6d6;
  text-align: center;
}

.fund-wrapper.no-line {
  border-right-style: none;
}

.smaller {
  color: #767676;
  font-size: 16px;
  font-weight: 400;
}

.normal {
  color: #0f2367;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
}

.footer {
  padding-top: 50px;
  padding-bottom: 50px;
  border-top: 1px solid #e1e1e1;
  background-color: #fff;
}

.subscribe-wrapper {
  display: block;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}

.sub-field {
  width: 70%;
  height: 50px;
  padding-left: 20px;
  float: left;
  border-style: none;
}

.button {
  padding: 12px 20px;
  border-radius: 10px;
  background-color: #0f2367;
}

.button:hover {
  background-color: #212127;
}

.submit-button {
  width: 30%;
  height: 50px;
  float: left;
  background-color: #212127;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  font-family: Noto Sans TC, Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif;
}

.submit-button:hover {
  background-color: #3a3a42;
}

.expert-wrapper {
  padding: 10px;
  border: 1px solid #ffffff;
  background-color: #fff;
  border-radius: 10px;
}

.expert-photo {
  width: 110px;
  height: 110px;
  margin-right: 20px;
  float: left;
  border-radius: 100%;
  background-color: #212127;
  background-image: url("../reg_images/company-gobee.jpg");
  background-position: 50% 0px;
  background-size: auto;
  background-repeat: no-repeat;
}

.expert-photo._2 {
  background-image: url("../reg_images/company-beeinventor.jpg");
  background-position: 50% 0px;
  background-size: auto;
}

.expert-photo._3 {
  background-image: url("../reg_images/company-greensafety.jpg");
  background-size: auto;
}

.expert-photo._4 {
  background-image: url("../reg_images/company-tfs.jpg");
  background-size: auto;
}

.expert-photo._5 {
  background-image: url("../reg_images/company-opticalsensing.jpg");
  background-size: auto;
}

.expert-content {
  position: relative;
  overflow: hidden;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  float: left;
  background-image: url(".png");
  background-position: 50% 50%;
  background-size: 16px;
  background-repeat: no-repeat;
  opacity: 0.8;
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
}

.social-icon:hover {
  opacity: 1;
}

.social-icon.twitter {
  background-image: url(".png");
}

.social-icon.google {
  background-image: url(".png");
  background-size: 20px;
}

.services-style-2 {
  margin-bottom: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 50px;
  background-image: url(".svg");
  background-position: 0px 50%;
  background-size: 35px;
  background-repeat: no-repeat;
}

.services-style-2.icon-2 {
  background-image: url(".svg");
  background-size: 35px;
}

.services-style-2.icon-3 {
  background-image: url(".svg");
  background-size: 35px;
}

.services-style-2.icon-4 {
  background-image: url(".svg");
  background-size: 35px;
}

.services-style-2.icon-5 {
  background-image: url(".svg");
  background-size: 35px;
}

.services-style-2.icon-6 {
  background-image: url(".svg");
  background-size: 35px;
}

.text-field {
  height: 50px;
}

.text-field.quote {
  width: 95%;
}

.text-field.biger {
  height: auto;
  padding-bottom: 170px;
}

.text-field.add-big {
  height: auto;
  padding-bottom: 140px;
}

.toggle-header {
  position: relative;
  width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 10px;
  border-bottom: 1px solid #e1e1e1;
  color: #333;
  text-decoration: none;
}

.toggle-header:hover {
  color: #265796;
}

.toggle-content {
  position: relative;
  overflow: hidden;
}

.toggle-space {
  padding: 20px 20px 10px 10px;
}

.toggle-icon-plus {
  position: absolute;
  top: 10px;
  right: 0px;
  width: 30px;
  height: 30px;
  background-image: url("../reg_images/play.png");
  background-position: 50% 50%;
  background-size: 16px;
  background-repeat: no-repeat;
}

.toggle-icon-minus {
  position: absolute;
  top: 10px;
  right: 0px;
  width: 30px;
  height: 30px;
  background-image: url("../reg_images/play.png");
  background-position: 50% 50%;
  background-size: 16px;
  background-repeat: no-repeat;
}

.pricing-wrapper {
  border: 1px solid #e1e1e1;
  text-align: center;
}

.top-pricing {
  padding: 30px 10px 20px;
}

.top-pricing.fixed {
  padding-top: 20px;
}

.option-pricing {
  margin-top: -1px;
  padding-top: 10px;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}

.service-style-4 {
  position: relative;
  padding: 120px 20px 20px;
  background-color: #fff;
  text-align: center;
  border-radius: 5px;
  height: 450px;
}

.center-icon {
  position: absolute;
  left: 50%;
  top: -50px;
  display: block;
  width: 150px;
  height: 150px;
  border: 1px solid #e1e1e1;
  border-radius: 100%;
  background-color: #fff;
  background-image: url("../reg_images/smeicon01.jpg");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transform: translate(-50%, 0px);
  -ms-transform: translate(-50%, 0px);
  transform: translate(-50%, 0px);
}

.center-icon.ico-2 {
  background-image: url("../reg_images/smeicon02.jpg");
}

.center-icon.ico-3 {
  background-image: url("../reg_images/smeicon03.jpg");
}

.center-icon.ico-4 {
  background-image: url("../reg_images/icon04.png");
}

.center-icon.ico-5 {
  background-image: url("../reg_images/icon05.png");
}

.center-icon.ico-6 {
  background-image: url("../reg_images/icon06.png");
}

.quote-wrapper {
  padding-right: 150px;
  padding-left: 60px;
  background-image: url(".svg");
  background-position: 0px 0px;
  background-size: 40px;
  background-repeat: no-repeat;
  font-family: Noto Sans TC, Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif;
  color: #464646;
  font-size: 19px;
  line-height: 30px;
}

.lightbox-link {
  position: relative;
}

.play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.blog-wrapper {
  width: 100%;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  color: #333;
  text-decoration: none;
}

.blog-wrapper:hover {
  color: #0f2367;
}

.blog-wrapper.add-margin {
  margin-bottom: 50px;
}

.blog-image {
  width: 50%;
  margin-right: 20px;
  float: left;
  border: 1px solid #e1e1e1;
}

.blog-content {
  position: relative;
  overflow: hidden;
}

.align-center {
  text-align: center;
}

.brand {
  top: 5px;
}

.line-divider-footer {
  width: 100%;
  height: 1px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #e1e1e1;
}

.copyright {
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: 1px solid #e1e1e1;
	position: fixed;
	bottom: 0;
	width: 100%;
}

.link-copy {
  display: inline-block;
  color: #464646;
  text-decoration: none;
}

.link-copy:hover {
  text-decoration: underline;
}

.link {
  display: block;
}

.link-2 {
  display: inline-block;
  margin-bottom: 10px;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  font-family: Noto Sans TC, Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif;
  color: #464646;
  font-size: 16px;
  text-decoration: none;
}

.link-2:hover {
  color: #0f2367;
}

.sub-banner {
  height: 350px;
  background-color: #0f2367;
}

.div-block-2 {
  position: relative;
  display: inline-block;
}

.utility-page-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  height: 70vh;
  max-height: 100%;
  max-width: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #0f2367;
}

.utility-page-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 400px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
}

.utility-page-form {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.dropdown-list {
  border: 1px solid #e1e1e1;
}

.dropdown-list.w--open {
  border-radius: 5px;
  background-color: #fff;
}

.drop-link {
  font-family: Noto Sans TC, Microsoft JhengHei, 微軟正黑體, Helvetica, Arial, sans-serif;
  color: #969696;
  font-size: 15px;
}

.drop-link:hover {
  color: #0f2367;
}

.drop-link.w--current {
  color: #313131;
}

.dropdown-link {
  font-size: 13px;
}

.image {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.slider-banner {
  height: 100%;
  background-color: transparent;
}

.slide-1 {
  background-image: url("../reg_images/mainslider.jpg");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.arrow-slider {
  width: 60px;
  height: 60px;
  background-color: #212127;
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
  font-size: 20px;
}

.arrow-slider:hover {
  background-color: #0f2367;
}

.biger {
  font-size: 60px;
  line-height: 70px;
}

.biger.more {
  font-size: 60px;
  line-height: 60px;
}

.slide-2 {
  background-image: url(".jpg");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.move-down {
  margin-top: 50px;
}

.success-message {
  background-color: #086940;
  color: #fff;
}

.scroll-navigation {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  z-index: 9999;
  display: none;
  padding-top: 10px;
  padding-bottom: 12px;
  background-color: #fff;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .15);
}

html.w-mod-js *[data-ix="toggle-content-initial-appear"] {
  height: 0px;
}

html.w-mod-js *[data-ix="display-none-nav-scroll-first-appear"] {
  display: none;
}

/************************************************************************************
smaller than 1024
*************************************************************************************/
@media screen and (max-width: 1024px) {


.displaypc { display: none }
.displayipad { display: inline }
.displaymob { display: none }
.tablewidth { width: 980px }
.tablewidthplan {width: 980px; }
	
/************************************************************************************
3Q
*************************************************************************************/
.qqqhomecontenttop {width:10px; clear:both; height: 0px}
.qqqhomeheader { font-size: 50px; line-height: 100%; }
.qqqhomecontent { font-size: 24px; }
.qqqhomesubtitle { font-size: 30px; }
	
.qqqhomeheaderen { font-size: 50px; line-height: 120%; }
.qqqhomecontenten { font-size: 24px; }
.qqqhomesubtitleen { font-size: 28px; }
	
.formtable { width: 600px; }
	
.hsbcinput { width: 86% !important; }
								 
}

@media (max-width: 991px) {
	
.formtable { width: 450px; }
	
#topheight { clear: both; height: 75px }
.photocol3frame { width: 49%; }
	
.tablewidth {width: 96%}
.tablewidthplan {width: 96%}
	
.awplanbutover { width: 32%; margin: 0px 0px 10px 0px }
.awplanbut { width: 32%; margin: 0px 0px 10px 0px }
	
.awplanbuttxt { font-size: 12px; margin: 10px 15px 10px 15px; }
.awplanbuttxt1 { font-size: 12px; margin: 20px 15px 20px 15px; }
	
	.stepframe {width: 32%}
	
  .navbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar.style-2 {
    padding-top: 0px;
    padding-bottom: 4px;
  }
  .navbar.color {
    background-color: #0f2367;
  }
  .heading-1.white.biger {
    font-size: 35px;
  }
  .service-wrapper {
    margin-bottom: 20px;
    padding-left: 10px;
  }
  .service-icon {
    width: 60px;
    height: 60px;
  }
  .subscribe-wrapper {
    width: 70%;
  }
  .expert-wrapper {
    margin-bottom: 20px;
  }
  .brand {
    top: 11px;
  }
  .move-down {
    margin-top: 0px;
  }
  .menu-button.w--open {
    background-color: #ffffff;
  }
  .nav-menu {
    padding: 0px;
    background-color: #f1f1f7;
    background-color: white;
  }
  .nav-menu.color {
    background-color: rgba(0, 0, 0, .9);
  }
  .div-block-3 {
    margin-bottom: 20px;
  }
  .div-block-4 {
    margin-bottom: 20px;
  }
  .white-icon {
    color: #fff;
  }
  .white-icon.w--open {
    background-color: #0f2367;
  }
  .lang_btn_ctn{
    display: block;
    margin: 16px 33px;
  }
  .lang_btn{
    width: 100%;
  }

  .nav-link {
    margin-left: 23px;
    border-radius: 0;
    border-bottom: 1px solid #d0d0d0;
    padding: 13px 0px 13px 0px; 
  }
}

@media (max-width: 767px) {

/************************************************************************************
3Q
*************************************************************************************/
.qqqcontent {  width: 80%; }
.qqqhomecontenttop {width:10px; clear:both; height: 40px}
.qqqhomeformtop {width:10px; clear:both; height: 20px}
.qqqhomeheader { font-size: 38px; line-height: 100%; }
.qqqhomecontent { font-size: 18px; }
.qqqhomesubtitle { font-size: 22px; }
	
.qqqhomeheaderen { font-size: 35px; line-height: 100%; }
.qqqhomecontenten { font-size: 17px; }
.qqqhomesubtitleen { font-size: 20px; }
	
.formsteptxt { font-size: 16px; }
.formsteptxten { font-size: 16px; }
.formliketxt { font-size: 16px; }

input[type=text], select { font-size: 22px; }
	
	
	
  .banner {
    height: 800px;
  }
  .left-padding {
    margin-bottom: 20px;
    padding-right: 0px;
  }
  .div-block.full {
    margin-bottom: 20px;
  }
  .logo-wrapper {
    margin-bottom: 20px;
  }
  .fund-wrapper {
    border-right-style: none;
  }
  .subscribe-wrapper {
    width: 90%;
  }
  .text-field.quote {
    width: 100%;
  }
  .pricing-wrapper {
    margin-bottom: 20px;
  }
  .service-style-4 {
    margin-bottom: 70px;
  }
  .quote-wrapper {
    padding-right: 0px;
  }
  .blog-wrapper {
    margin-bottom: 20px;
  }
  .move-down {
    margin-bottom: 50px;
  }
  .div-block-5 {
    margin-bottom: 20px;
  }
}

@media (max-width: 479px) {
	
ul, ol {font-size: 14px;line-height: 140%;}
.container { font-size: 14px }
	
.copyright { padding-top: 5px; padding-bottom: 5px; }
	
/************************************************************************************
3Q
*************************************************************************************/
/*.qqqpagebg1 { background-image: none; }
*//*.qqqpagebg2 { background-image: url(../reg_images/bg-mob.jpg);background-position: center top; background-size: cover; background-repeat: no-repeat; }
*/	
.qqqkv { display:none; width: 100%; float: none; }
.qqqcontent { width: 90%; float: none; padding-left: 0px; }
.qqqhomecontenttop {width:10px; clear:both; height: 0px}
.qqqhomeformtop {width:10px; clear:both; height: 0px}
.qqqhomeheader { font-size: 28px; line-height: 100%; }
.qqqhomecontent { font-size: 18px; }
.qqqhomesubtitle { font-size: 22px; }
.qqqfaqtitle { font-size: 16px; line-height: 120%; }
.qqqfaqcontent { font-size: 16px; line-height: 120%; }
	
.qqqhomeheaderen { font-size: 28px; line-height: 100%; }
.qqqhomecontenten { font-size: 18px; }
.qqqhomesubtitleen { font-size: 22px; }
.qqqfaqtitleen { font-size: 16px; line-height: 120%; }
.qqqfaqcontenten { font-size: 16px; line-height: 120%; }
	
	
.qqqbutton1 { width: 100%; }
.qqqbuttonhide { width: 100%; }
.qqqbutton2 { width: 100%; }
	
.qqqtopbuttext {
  font-size: 16px;
  margin: 5px 30px 5px 30px;
}

.qqqtopbutton {
  margin: 8px 5px 0px 5px;
  height: 32px;
}
	
.qqqbuttext { font-size: 18px;}
	
.formtable { width: 100%; }
.formsteptxt { font-size: 14px; }
.formsteptxten { font-size: 14px; }
.formliketxt { font-size: 15px; }
	
input[type=text], select { font-size: 18px; margin: 8px 0px 8px 0px; }
input[type=submit] { font-size: 18px; width: 100%; }

.formfinishtxt { font-size: 20px; line-height: 300% }
.formfinishtxtnumber { font-size: 22px; }
.formfinishtxtregnumber { font-size: 36px;line-height: 100% }
.formfinishtxtremark { font-size: 12px; line-height: 300% }
	
.qqqotptxt { font-size: 16px; }
.qqqotptxten { font-size: 14px; }

.qqqol { font-size: 14px;line-height: 140%; }
.qqqolen { font-size: 14px;line-height: 140%; }
	
.hsbclogo { width: 85px; }
.hsbcinput { width: 85% !important; }
.hsbcicon {width: 20px; margin-left: 5px; }
/************************************************************************************

*************************************************************************************/
	
	

.plantablescroll { width:100%; overflow:scroll; }

.tablewidth { width: 100% }
.tablewidthplan { width: 580px }
	
.tmptable { font-size:14px; }
.tmptableadd { font-size:14px; }
.stepframe { width: 49%; padding-bottom: 30px; font-size: 12px; }

.awplanbutover { width: 96%; margin: 0px 0px 10px 0px }
.awplanbut { width: 96%; margin: 0px 0px 10px 0px }
	
	
.photocol1frame { width: 100%; height: 260px; border: 0px solid #fff; margin-top: 0px;  }
.photocol1 { font-size: 30px; line-height: 85%; width: 100%; height: 260px; padding-top: 20px; background-size: cover; background-position: -770px 0px; }

.photocol2frame { width: 100%; height: 380px; border: 0px solid #fff;  }
.photocol2 { font-size: 30px; line-height: 85%; width: 100%; height: 380px; padding-top: 20px; }

.photocol3frame { width: 100%; height: 100px; border: 0px solid #fff; }
.photocol3 { font-size: 26px; line-height: 85%; width: 100%; height: 100px; padding-top: 40px; }
	
.photodes { font-size: 15px; line-height: 16px; text-transform: none;}
	
.contactuspopup { bottom: 10px; padding-right: 10px; }
.contactuspopupicon { padding-top: 12px; padding-right: 18px; width: 50px; height: 50px;  }
	
	
.top-margin.more.add { margin-top: 10px; }
.biger { font-size: 34px; line-height: 45px; }
.anametop { top: -90px; }
	
.awaboutimg { width: 100% }

.pageheader { padding: 30px 10px 60px 10px; }
	
	
.bgaboutus { background-size: cover; background-position: center top; }
.abpart1photoarea { width: 100%; text-align: center; padding-top: 20px; }
.abpart1txtarea { width: 100%; }
.abpart1photo { width: 100% }

.bgsme { background-size: cover; background-position: center top; }
	
.bgsolution { background-size: cover; background-position: center top; }
	
.bgworld { background-size: cover; background-position: center top; }
.part1txtarea { width: 100%; padding-bottom: 0px; }
.part1photoarea { width: 100%; text-align: center; padding-bottom: 80px; }
.part1photosize { width: 100%; }

.bgpns { background-size: cover; background-position: center top; }
.meetrm { width: 100%; }
	
.bgevent { background-size: cover; background-position: center top; }
	
.bgcontactus { background-size: cover; background-position: center top; }
.contactusframe { width: 100%; padding-bottom: 70px }
	
.titlekeyf { font-size: 16px; }
.keypoint { font-size: 16px; }	
.bgsection2 { background-size: cover; }
.bgsection3 { background-size: cover; }

.videotitle { font-size: 18px; }
.videotitletxt { font-size: 14px; }

.displaypc { display: none }
.displayipad { display: none }
.displaymob { display: inline }

.headingland { font-size: 30px;  line-height: 40px; }
.headinglandsub { font-size: 26px; }

.logo { width: auto; height: 50px; padding-bottom: 5px }

#topheight {clear: both;height: 70px}

	
.bgsectionsme { background-image: url(../reg_images/sme-offerbg-mob.jpg); background-position: center top; background-size: cover; }
.smesubtitle { font-size: 30px; line-height: 40px; }
.smesubtitlequ { font-size: 24px; line-height: 40px; }
	
.paragraph { font-size: 16px; line-height: 24px; }

	
	.heading-1 {
  font-size: 32px;
}	
.titledes {
  color: #464646;
  font-size: 16px;
  line-height: 30px;
}
	
	
.slide-1 {
  background-image: url("../reg_images/mainslider-mob.jpg");
  background-size: cover;
}

	
	.banner.with-slider {
    height: 500px;
  }
  .banner.style-3 {
    height: 400px;
  }
  .section.no-bottom-margin {
    padding-bottom: 80px;
  }
  .heading-1.white.biger {
    font-size: 30px;
  }
  .div-block {
    margin-bottom: 20px;
  }
  .tab-testi {
    top: auto;
  }
  .testi-photo {
    display: inline-block;
  }
  .testi-wrapper {
    width: 100%;
  }
  .subscribe-wrapper {
    width: 100%;
  }
  .sub-field {
    width: 60%;
  }
  .submit-button {
    width: 40%;
  }
  .blog-image {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 20px;
    float: none;
  }
  .biger.more {
    font-size: 40px;
    line-height: 50px;
  }
}

.less_bottom_padding{
	padding-top:0;
	padding-bottom:0;
}


#loading{
	position: fixed;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 9999;	
}


/* Reminder */
.reminder-container{
	position: fixed;
	top:0; 
	left: 0; 
	z-index: 300; 
	width: 100%; 
	height: 100%;
}
.reminder-container .reminder-box{
	background: #FFF; 
	width: 600px; 
	height: 480px; 
	margin: 220px auto; 
	position: relative; 
	overflow: hidden;
	background-image: linear-gradient(to bottom, #570c8b, #294a97);
	font-size: 20px;
}
.reminder-container .reminder-box .btn-close{
	width: 34px;
	height: 34px; 
	background: url(../reg_images/close.png) no-repeat; 
	position: absolute; 
	top:15px; 
	right: 15px; 
	cursor: pointer;
}
.reminder-container .reminder-box .reminder-inner{
	color: white;
	text-shadow:none;
	height: 480px;
	margin: 24px;
	overflow: auto;
	padding: 0px;
}
.reminder-container .reminder-box .reminder-inner p.title{
	font-size: 18px;
}	

#otp_container{
	width: 330px;
	margin: 0 auto;	
}
#hsbc_menu_item{
	margin-top:-15px;
	text-align:center;
}
#hsbc_menu_label{
	margin-top:15px;
	color:rgb(215, 14, 156);
}
#hsbc_icon{
	margin-top:10px;
	float:left;
}
#menuItem7{
	    margin-top: -10px;
}

@media (max-width: 479px) {
	.qqqkv { display: inline-block; /*display:none;*/ width: 33%; line-height: 0%; }
	
	#otp_container{
		width: 300px;
		margin: 0 auto;	
	}
	 .qqqotpinput { width: 45px !important; text-align: center; height: 45px; }
	 
	.reminder-container{
		position: fixed; 
		top:0; 
		left: 0; 
		z-index: 300; 
		width: 100%; 
		height: 100%;
	}
	.reminder-container .reminder-box{
		background: #FFF; 
		width: 100%; 
		height: 480px; 
		margin: 100px auto ; 
		position: relative; 
		overflow: hidden;
		background-image: linear-gradient(to bottom, #570c8b, #294a97);
		font-size: 20px;
		}
	.reminder-container .reminder-box .btn-close{
		width: 34px; 
		height: 34px; 
		background: url(../reg_images/close.png) no-repeat; 
		position: absolute; 
		top:15px; 
		right: 15px; 
		cursor: pointer;
		}
	.reminder-container .reminder-box .reminder-inner{
		color: white;
		text-shadow:none;
		height: 480px;
		margin: 24px;
		overflow: auto;
		padding: 0px;
	}
	.reminder-container .reminder-box .reminder-inner p.title{font-size: 18px;}	
	

}
#center_image{
	margin: 40px 0 40px 0;
}

#center_image_1{
	margin: 40px 0 40px 0;  /* Added by Keith for iphone img on the left */
  max-width: 76%;
}

.pbutton{
	color:black !important;
}
.formErrLabel{
	color:red;
}
#hsbc_menu_break{
	display:none;
}

@media (max-width: 991px) {
	.qqqkv{
		display:none;
	}
	
	#hsbc_menu_item{
		margin-top:0px;
		text-align:left;
	}
	#hsbc_menu_break{
		display:block;
	}

  #center_image{
    margin: 0px;
  }

  #center_image_1{
    display:none;
  }
}


@media(max-width: 1078px){
  .nav-link{
    font-size: 12px;
  }
}