@charset "utf-8";

html.no_scroll_behavior{
  scroll-behavior: initial;
}

.thankyou .inner{
  text-align: center; padding-left: 2rem; padding-right: 2rem;
  padding-top: 6rem; padding-bottom: 6rem;
}
.thankyou .inner h1 {
  font-size: 3rem; line-height: 1.2; margin-bottom: 4.5rem; margin-top: 0;
}
.thankyou .inner .message{
  font-size: 1.6rem; line-height: 1.5; margin-bottom: 4.5rem;
}


.enquiry .section{
  padding-bottom: 2rem;
}

.enquiry form.main .remark{
	    margin-bottom: 0;
}

/* form inputs */
form.main * {
  outline: none;
}

form.main .top_section{
	padding-bottom: 1.5rem
}

form.main input,
form.main button,
form.main select,
form.main textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
      -ms-appearance: none;
          appearance: none;
  border: none;
  background-color: transparent;
  white-space: normal;
}
form.main input:focus,
form.main button:focus,
form.main select:focus,
form.main textarea:focus {
  outline: none;
}

form.main select::-ms-value {
  color: black; background: transparent;
}

form.main h1,
form.main h2 {
  font-size: 3.6rem;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 3rem; margin-top: 0;
}
form.main h3 {
  font-size: 2.1rem;
  line-height: 3.0rem;
  font-weight: 700;
  margin-top: 8rem;
  margin-bottom: 0;
}
form.main h3 span{
  display: block;
}
form.main h5 {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

form.main textarea{
  border: 1px solid #9DB1D9; border-radius: 10px; height: 24rem; width: 100%;
  padding: 1.5rem; color: #0A1D42; font-size: 1.6rem; resize: none; overflow:auto; white-space: pre-wrap;
}

form.main .right, form.main .left{
  background: transparent; color: #0A1D42;
}
form.main .remark{
  font-size: 1.2rem; line-height: 1.5; margin-bottom: 0;
}
form.main .must{
  color: #FA475C;
}
form.main .desc{
  font-size: 1.8rem; line-height: 1.8; color: #0D144D;
}
form.main .desc a{
  color: #3569FF; text-decoration: none;
}
form.main em,
form.main .em {
  font-style: normal;
  font-weight: inherit;
  font-family: inherit;
  color: #FA475C;
  background: -webkit-linear-gradient(270deg, #FA475C 2.31%, #FF7B5F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
form.main p {
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
}

form.main label {
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 700;
  display: block;
}
  @media screen and (min-width: 620px) {
    form.main label {
      font-size: 1.6rem; line-height: 1.5;
    }
  }
form.main input[type=text],
form.main input[type=number],
form.main input[type=date],
form.main input[type=month],
form.main input[type=email],
form.main input[type=tel],
form.main input[type=time],
form.main select {
  display: block;
  color: #0A1D42;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 400;
  width: 100%;
  padding: 1.5rem 0rem 1.5rem 0rem ;
  border: solid #7D97CD;
  border-width: 0px 0px 1px 0px;
  border-radius: 0px;
}

form.main input[type=text]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #7D97CD;
  opacity: 1; /* Firefox */
}

form.main input[type=text]:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #7D97CD;
}

form.main input[type=text]::-ms-input-placeholder { /* Microsoft Edge */
  color: #7D97CD;
}

form.main input[type=text]:focus,
form.main input[type=number]:focus,
form.main input[type=date]:focus,
form.main input[type=email]:focus,
form.main input[type=tel]:focus,
form.main input[type=time]:focus,
form.main select:focus,
form.main .compound.inner_container.focus {
  border-color: #3569FF;
  border-width: 0px 0px 2px 0px;
}
form.main select.empty {
  color: #7D97CD;
}
form.main.disabled,
form.main .btn.disabled,
form.main input.disabled,
form.main select.disabled,
form.main input[type=text]:read-only,
form.main .input-group.disabled {
  pointer-events: none;
  opacity: 0.3;
}
form.main .primary.btn.disabled {
  background-color: #A0A0A0;
  background-image: none;
}
form.main .input-group {
  position: relative;
  padding-top: 3.0rem;
  clear: both;
}
form.main .inner_container {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 0px;
}
form.main .input-group::after,
form.main .inner_container::after {
  content: "";
  display: block;
  clear: both;
}


form.main .inner_container.flex{
  display: flex; align-items: center;
}
form.main .inner_container.flex select{
  flex: 1;
}

/* compound input */
form.main .compound.inner_container {
  border: solid rgba(53,105,255,0.75);
  border-width: 0px 0px 1px 0px;
}
  form.main .compound.inner_container>* {
    vertical-align: middle;
  }
  form.main .compound.inner_container>input,
  form.main .compound.inner_container>select {
    border: none;
    display: inline-block;
    margin-bottom: 0px;
  }
  form.main .compound.inner_container>span {
    font-size: 1.8rem;
    font-weight: 400;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    display: inline-block;
    line-height: 1.4; padding-left: 0rem; padding-right: 0rem;
  }



/* hkid */
form.main .hkid.input-group .inner_container input.hkid_a {
  width:3rem;
}
form.main .hkid.input-group .inner_container input.hkid_n {
  width:8rem;
  letter-spacing: 0.15rem;
}
form.main .hkid.input-group .inner_container input.hkid_chk {
  width:3rem;
  text-align: center;
}
form.main .hkid.input-group #data-id-01-error{
  display: none !important;
}
form.main .hkid.input-group #data-id-02-error{
  display: none !important;
}
form.main .hkid.input-group #data-id-03-error{
  display: none !important;
}

/* yearmonth compound ui */
form.main .yearmonth.inner_container select.year,
form.main .yearmonth.inner_container select.yyyy,
form.main .yearmonth.inner_container select.month,
form.main .yearmonth.inner_container select.mm {
  width:30%;
}
  @media screen and (min-width: 620px) {
    form.main .yearmonth.inner_container select.year,
    form.main .yearmonth.inner_container select.yyyy,
    form.main .yearmonth.inner_container select.month,
    form.main .yearmonth.inner_container select.mm {
      width:20%;
    }
  }
form.main .yearmonth.inner_container select.yy {
  width:14%;
}
form.main .yearmonth.inner_container>span {
  padding: 1rem 2.2rem 1rem 2.4rem;
}

/* custom radio btn */
form.main input[type=radio] {
  position: absolute;
  display: block;
  padding: 0px;
  margin: 0px;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
}
form.main .input-group>*:first-child {
  margin-top: 0px;
}

form.main label.for-radio {
  position: relative;
  display: block;
  height: 6.4rem;
  color: #888888;
  font-weight: 400;
  padding: 1.9rem 1rem 2rem 2.7rem;
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
  background-color: #FFFFFF;
  border: 2px solid #DDDDDD;
  border-radius: 1rem;
  cursor: pointer;
  -webkit-transition: border 0.4s;
     -moz-transition: border 0.4s;
      -ms-transition: border 0.4s;
          transition: border 0.4s;
}
html[lang=en] form.main label.for-radio {
  letter-spacing: 0.02rem;
}

  form.main label.for-radio>span {
    display: inline-block;
    position: absolute;
    top: 50%;
    font-size: 1.8rem;
    width: calc(100% - 2.7rem);
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  html[lang=en] form.main label.for-radio>span {
    top: 48%;
  }

form.main input[type=radio]:checked + label.for-radio {
  color: #0A1D42;
  font-weight: 700;
  border-color: #3569FF;
  background-color: #EAF5FF;
}
form.main input[type=radio] + label.radio_label {
  position: relative; cursor: pointer; height: 2.4rem; font-weight: 400;
  padding-left: 3.5rem; margin-top: 1.5rem; color: #7D97CD; font-size: 1.8rem; line-height: 1.4;
}
form.main input[type=radio] + label.radio_label > span{
  width: 20px; height: 20px; background-color: #DDDDDD; border-radius: 100px; position: absolute;
  left: 0; border: 2px solid #DDDDDD; left: 0; right: auto; top: 0; bottom: 0; margin: auto;
}
form.main input[type=radio] + label.radio_label > span::before{
  content: ""; width: 10px; height: 10px; background-color: #DDDDDD; border-radius: 100px; position: absolute;
  left: 0; right: 0; top: 0; bottom: 0; margin: auto;
}

form.main input[type=radio]:checked + label.radio_label > span{
  border-color: #09399D;
}
form.main input[type=radio]:checked + label.radio_label > span::before{
  background-color: #09399D;;
}

html[lang=en] form.main input[type=radio]:checked + label.for-radio {
  letter-spacing: -0.04rem;
}


/* effective date input */

.effective_date.input-group > .radio.inner_container{
  margin-left: 0; margin-right: 0;
}
.effective_date.input-group .left{
  float: left; width: 110px;
}
.effective_date.input-group .right{
  float: left; width: calc(100% - 110px); position: relative; padding-left: 3.5rem;
}
.effective_date.input-group .right .inner_container{
  margin-top: 0; max-width: 100%;
}
.effective_date.input-group .right select{
  padding-top: 0; padding-bottom: 0;
}

.effective_date.input-group .right label.radio_label{
  position: absolute; left: 0;
}
.effective_date.input-group .error{
  padding-left: 14.5rem;
}
.effective_date.input-group .right .error{
  padding-left: 0;
}
.effective_date.input-group .compound.inner_container>span{
  padding-left: 1rem; padding-right: 1rem;
}

.address.input-group > inner_container{
  margin-top: 5px;
}

.address.input-group .address_1{
  margin-bottom: 1.5rem;
}
form.main .pay_method h3{
  margin-top: 3rem; font-size: 1.8rem; margin-bottom: 0.7rem;
}
form.main .pay_method .input-group{
  padding-top: 0.7rem;
}

/* company tel input */
.company_tel.input-group .left{
  float: left; width: 65%; padding-right: 30px;
}
.company_tel.input-group .right{
  float: left; width: 35%;
}


/* hk tele number input */
.hk-phone.inner_container::before {
  content: "+852";
  position: absolute;
  display: block;
  color: #0D144D;
  font-size: 1.8rem;
  line-height: 1.4;
  left: 0px;
  top: 1.5rem;
}
.hk-phone.inner_container input {
  padding-left: 4.5rem!important;
}

/* hk dollar input */
.hk-dollar.inner_container::before {
  content: "HK$";
  position: absolute;
  display: block;
  color: #0D144D;
  font-size: 1.8rem;
  line-height: 1.4;
  left: 0px;
  top: 1.5rem;
}
.hk-dollar.inner_container input {
  padding-left: 4rem!important;
}

/* checkbox */
form.main .input-group input[type=checkbox],
form.main .input-group input.checkbox {
  position: absolute;
  display: block;
  left: 0px;
  top: 0px;
  width:2rem;
  height: 2rem;
  overflow: hidden;
  color: rgba(0,0,0,0);
  margin: 0px;
  padding: 0px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;
  border: 1px solid #BBD2FF;
  border-radius: 0.5rem;
  cursor: pointer;
}

form.main .input-group input[type=checkbox]+label,
form.main .input-group input.checkbox+label {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  margin-left: 3.8rem;
}
form.main .input-group input[type=checkbox]+label[for],
form.main .input-group input.checkbox+label[for] {
  cursor: pointer;
}

form.main .edit-btn {
  font-size: 1.3rem;
  line-height: 1.6;
  font-weight: 500;
  width: 4.8rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 32%;
}

form.main .edit-block {
  position: relative;
  padding: 1.4rem 1.2rem;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 0.8rem -0.4rem rgba(13, 20, 77, 0.3);
  border-radius: 0.5rem;
}
  form.main .edit-block .edit-btn {
    position: absolute;
    right: 1.2rem;
    top: 1.4rem;
  }

  form.main .edit-block>*:first-child {
    margin-top: 0px;
  }
  form.main .edit-block dl {
    padding: 0.4rem 0px;
    margin: 1rem 0px 0px 0px;
    border: solid rgba(125,151,205,0.2);
    border-width: 0px 0px 1px 0px;
  }
  form.main .edit-block dl::after {
    content: "";
    display: block;
    clear: both;
  }
  form.main .edit-block dl dt,
  form.main .edit-block dl dd {
    display: block;
  }
  form.main .edit-block dl dt {
    float: left;
  }
  form.main .edit-block dl dd {
    float: right;
  }


/* custom selector */
form.main select {
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px auto;
  background-image: url("../img/icon_arrow_down.svg?revision=202106");
}
form.main select.only{
  background-position: right 12px center;
}

/* user full name */
.nameset.input-group input[name=m3] {
  display: block;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clear: both;
}
@media screen and (min-width: 620px) {
  form.main .nameset.input-group {
    margin-bottom: 5rem;
  }
  form.main .nameset.input-group .group::after {
    content: "";
    display: block;
    clear: both;
  }
  form.main .nameset.input-group .group>* {
    display: block;
    float: left;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
    form.main .nameset.input-group .group>*:first-child {
      width: calc(40% - 0.5rem);
      margin-left: 0px;
    }
    form.main .nameset.input-group .group>*:nth-child(2) {
      width: calc(60% - 0.5rem);
      margin-right: 0px;
    }
  form.main .nameset.input-group .col-l {
    float: none;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
  }
  form.main .nameset.input-group .col-r {
    float: none;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
  }
}
/* confirmation */

form.main .confirmation.item-list li {
  padding: 0.6rem 0px;
  margin: 0.6rem 0px 0px 0px;
  border: solid rgba(125,151,205,0.2);
  border-width: 0px 0px 1px 0px;
}
form.main .confirmation.item-list a {
  position: relative;
  text-decoration: none;
  color: #0A1D42;
  min-height: 4rem;
  padding-right: 2rem;
}
form.main .confirmation.item-list a[href]::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 1rem;
  height: 4rem;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
form.main .confirmation.item-list a>span {
  display: block;
}
form.main .confirmation.item-list a .title {
  color: #888888;
  line-height: 1.4;
}
form.main .confirmation.item-list a .desc {
  word-break: break-all;
  margin-top: 0.2rem;
}

@media screen and (min-width: 651px) {
  form.main .confirmation.item-list {
    height: 500px;
    overflow-y: auto;
  }
}

/* otp */

form.main .tips-block {
  color: #0072BB;
  margin-top: 2.4rem;
  background-color: #F2FAFF;
  border: 1px dashed #0072BB;
  border-radius: 8px;
  padding: 2rem 1.2rem 2.2rem 1.2rem;
}
  form.main .tips-block>*:first-child {
    margin-top: 0px;
  }
  form.main .tips-block>*:last-child {
    margin-bottom: 0px;
  }
  form.main .tips-block .icon_tips {
    display: inline-block;
    width: 2.3rem;
    height: 2.3rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-color: #0072BB;
    border-radius: 999px;
    vertical-align: middle;
    margin-right: 1rem;
    margin-top: -0.3rem;
  }

form.main .otp.input-group {
  text-align: center;
}
form.main .otp.input-group>.inner_container {
  width: 32rem;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
form.main .otp.input-group>.inner_container input,
form.main .otp.input-group>.inner_container .phantom {
  color: #0D144D;
  font-size: 3.6rem;
  white-space: pre;
  font-family: "Courier New", monospace!important;
  font-weight: bold;
  letter-spacing: 2.8rem;
  display: block;
  padding: 3rem 0px 0.2rem 2.4rem;
  overflow: hidden;
}
  form.main .otp.input-group>.inner_container input,
  form.main .otp.input-group>.inner_container input:focus {
    border: none;
    margin: 0px;
  }
  form.main .otp.input-group>.inner_container .phantom {
    text-align: left;
    height: 1rem;
    padding-top: 0px;
    padding-left: 1.2rem;
    margin: 0px;
  }
    form.main .otp.input-group>.inner_container .phantom span {
      display: inline-block;
      position: relative;
      overflow: hidden;
      height: 2px;
      vertical-align: top;
    }
    form.main .otp.input-group>.inner_container .phantom span::before {
      content: "";
      position: absolute;
      left: 0px;
      top: 0px;
      width: 90%;
      height: 0px;
      border: solid rgba(53,105,255,0.75);
      border-width: 1px 0px 0px 0px;
    }
    form.main .otp.input-group>.inner_container .phantom.s1 span:nth-child(1)::before {
      border-width: 2px 0px 0px 0px;
    }
    form.main .otp.input-group>.inner_container .phantom.s2 span:nth-child(1)::before,
    form.main .otp.input-group>.inner_container .phantom.s2 span:nth-child(2)::before {
      border-width: 2px 0px 0px 0px;
    }
    form.main .otp.input-group>.inner_container .phantom.s3 span:nth-child(1)::before,
    form.main .otp.input-group>.inner_container .phantom.s3 span:nth-child(2)::before,
    form.main .otp.input-group>.inner_container .phantom.s3 span:nth-child(3)::before {
      border-width: 2px 0px 0px 0px;
    }
    form.main .otp.input-group>.inner_container .phantom.s4 span:nth-child(1)::before,
    form.main .otp.input-group>.inner_container .phantom.s4 span:nth-child(2)::before,
    form.main .otp.input-group>.inner_container .phantom.s4 span:nth-child(3)::before,
    form.main .otp.input-group>.inner_container .phantom.s4 span:nth-child(4)::before {
      border-width: 2px 0px 0px 0px;
    }
    form.main .otp.input-group>.inner_container .phantom.s5 span:nth-child(1)::before,
    form.main .otp.input-group>.inner_container .phantom.s5 span:nth-child(2)::before,
    form.main .otp.input-group>.inner_container .phantom.s5 span:nth-child(3)::before,
    form.main .otp.input-group>.inner_container .phantom.s5 span:nth-child(4)::before,
    form.main .otp.input-group>.inner_container .phantom.s5 span:nth-child(5)::before {
      border-width: 2px 0px 0px 0px;
    }
    form.main .otp.input-group>.inner_container .phantom.s6 span:nth-child(1)::before,
    form.main .otp.input-group>.inner_container .phantom.s6 span:nth-child(2)::before,
    form.main .otp.input-group>.inner_container .phantom.s6 span:nth-child(3)::before,
    form.main .otp.input-group>.inner_container .phantom.s6 span:nth-child(4)::before,
    form.main .otp.input-group>.inner_container .phantom.s6 span:nth-child(5)::before,
    form.main .otp.input-group>.inner_container .phantom.s6 span:nth-child(6)::before {
      border-width: 2px 0px 0px 0px;
    }

  @media screen and (min-width: 620px) {
    form.main .otp.input-group {
      text-align: left;
    }
    form.main .otp.input-group>.inner_container {
      width: 40rem;
      margin-left: -1.2rem;
    }
      form.main .otp.input-group>.inner_container .response {
        padding-left: 1.2rem;
      }
    form.main .otp.input-group input {
      padding: 3rem 0px 0.2rem 3.8rem;
    }
  }

form.main .footnote {
  display: block;
  color: rgba(153,153,153,0.75);
  line-height: 1.4;
  margin: 0.2rem 0px;
}
form.main span.footnote {
  font-size: 1.2rem;
}

form.main .error {
  color: #FF0000!important; font-size: 1.4rem;
}

form.main .input-group.action-bar {
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
  margin-top: 2rem;
  padding-top: 0; margin-bottom: 2rem;
}
  form.main .action-bar.input-group>a {
    display: inline-block;
    font-weight: 500;
    text-decoration: none;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }


form.main .btn {
  display: inline-block;
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.1rem;
  padding: 1.5rem;
  max-width: 35rem;
  margin: 0px auto;
  border-radius: 999px;
  border: none;
}
form.main .wide.btn {
  width: 100%;
}
  @media screen and (min-width: 620px) {
    form.main .wide.btn {
      width: 65%;
    }
  }

form.main .primary.btn {
  color: #FFFFFF;
  background-color: #FA475C;
  background: linear-gradient(270deg, #FA475C 2.31%, #FF7B5F 100%);
}
form.main .primary.btn:focus {
  animation-name: kf-heartbeat-glow-lp;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
form.main .secondary.btn, .return_home.btn {
  color: #FFFFFF;
  background-color: #3763FF;
  background: linear-gradient(267.68deg, #5C29EE 2.81%, #446DFF 50.44%, #4685FF 99.06%);
}
form.main .secondary2.btn {
  color: #3569FF;
  border: 2px solid #3569FF;
}

form.main .primary.btn.w2 {
  width: 50%;
}


form.main .not_required .required{
    display: none;
}

/* address search */
form.main .search.inner_container input[type=text] {
  padding-left: 2.6rem;
}
form.main .residential_addr.display {
  font-size: 1.6rem;
}

form.main .formsubmit_error, form.main .formsubmit_timeout{
  display: none; color: #FF0000!important; font-size: 1.4rem;
}
form.main .formsubmit_error.show, form.main .formsubmit_timeout.show{
  display: block;
}
form.main .residential_addr.display,
form.main .residential1_en_addr.display,
form.main .residential2_en_addr.display,
form.main .residential3_en_addr.display,
form.main .residential4_en_addr.display,
form.main .residential1_zh_addr.display,
form.main .residential2_zh_addr.display,
form.main .residential3_zh_addr.display,
form.main .residential4_zh_addr.display,
form.main .residential1_sys_addr.display,
form.main .residential2_sys_addr.display,
form.main .residential3_sys_addr.display,
form.main .residential4_sys_addr.display {
  text-transform: uppercase;
}
  form.main .residential_addr.display>div {
    margin-top: 1.4rem;
  }
  form.main .residential_addr.display p {
    margin: 0;
  }
form.main .residential_sys_addr .back-to-addr-search {
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  position: relative;
  padding-right: 2rem;
}
  form.main .residential_sys_addr .back-to-addr-search::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 0.5rem;
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
form.main .residential_sys_code.input-group {
  margin: 0px;
  padding: 0px;
}
form.main .suggestion-result {
  font-size: 1.6rem;
  display: none;
  position: absolute;
  z-index: 100;
  width: 100%;
  padding: 2.4rem 0rem 1.8rem 1.8rem;
  margin-top: 0.6rem;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 1rem -0.4rem rgba(13, 20, 77, 0.6);
  border-radius: 0.8rem;
}
.suggestion-result a {
  text-decoration: none;
}
form.main .suggestion-result ul.item-list {
  height: 4rem;
  overflow-y: auto;
  padding: 0rem 1.8rem 0.2rem 0px;
  margin: 0.6rem 0px 1.2rem 0px;
}
.suggestion-result ul.item-list a {
  position: relative;
  color: #0D144D;
  line-height: 1.4;
  padding: 1.2rem 0px 0.8rem 2rem;
  border: solid rgba(125,151,205,0.2);
  border-width: 0px 0px 1px 0px;
}
.suggestion-result ul.item-list a::before {
  content: "";
  position: absolute;
  display: block;
  left: 0px;
  top: 1.5rem;
  width: 1.1rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
  .suggestion-result ul.item-list a span {
    display: block;
  }
  .suggestion-result ul.item-list .pale {
    display: block;
    color: #808080;
    padding: 0.8rem 0.5rem 0.5rem 1rem;
  }


.suggestion-result .prompt,
.suggestion-result .not_found {
  font-weight: 700;
  padding-right: 1.4rem;
}
  .suggestion-result .not_found a {
    display: block;
    text-align: center;
    line-height: 1.2;
    text-decoration: none;
    padding: 1.6rem;
    background-color: #F2FAFF;
    border-radius: 1rem;
  }
/* overlay */
form.main .overlay {
  padding: 2rem;
  background-color: rgba(33,33,33,0.5);
  position: absolute;
  min-height: 100%;
  bottom: auto;
  overflow: hidden;
}
form.main .overlay>.bg,
form.main .modal_overlay>.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}
form.main .overlay .primary.btn.w2 {
  width: 80%;
}
form.main .overlay .assistant-board {
  position: relative;
  width: 100%;
  padding: 3.8rem 1.8rem;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 1rem -0.4rem rgba(13, 20, 77, 0.6);
  border-radius: 0.8rem;
}
form.main .overlay .assistant-board .backBtn {
  font-size: 1.4rem;
  font-weight: 700;
  position: relative;
  text-decoration: none;
  display: inline-block;
  padding: 0px 1.6rem;
  margin-bottom: 2rem;
}
  form.main .overlay .assistant-board .backBtn::before {
    content: "";
    position: absolute;
    left: 0rem;
    top: 0.7rem;
    width: 0.8rem;
    height: 0.8rem;
    border: solid #1251D2;
    border-width: 0px 0px 2px 2px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  form.main .assistant-board.input_floor_room {
    margin-top: 8rem;
  }
  @media screen and (min-width: 620px) {
    form.main .overlay {
      min-height: 100%;
      /* height: 100%; */
    }
    .assistant-board.input_floor_room .floor.input-group,
    .assistant-board.input_floor_room .floor_unit.input-group {
      width: calc(50% - 0.5rem);
    }
    form.main .overlay .assistant-board {
      padding: 5.2rem 4rem;
    }
  }
form.main .overlay .assistant-board .action-bar {
  clear: both;
}
/* upload */

form.main ul.item-list {
  margin: 2rem -0.5rem 3.2rem -0.5rem;
}
  ul.doc_type.item-list li {
    color: rgba(13, 20, 77, 0.6);
    padding: 0.4rem 0.5rem;
  }
  ul.doc_type.item-list li>a,
  ul.doc_type.item-list li>a>* {
    display: block;
  }
  ul.doc_type.item-list a {
    color: rgba(13, 20, 77, 0.6);
    text-decoration: none;
    padding: 1.3rem 0.6rem 1.1rem 6rem;
    background-color: #FFFFFF;
    border: 2px solid #9DB1D9;
    border-radius: 1rem;
    min-height: 6.8rem;
  }
    ul.doc_type.item-list li.active a {
      border-color: #1251D2;
      background-color: #F2F7FF;
    }
  ul.doc_type.item-list .tick {
    position: absolute;
    left: 1.8rem;
    top: calc(50% - 1.3rem);
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #9DB1D9;
    border-radius: 0.4rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size:contain;
  }
    ul.doc_type.item-list li.active .tick {
      background-color: #1F68F5;
      border: none;
    }
  ul.doc_type.item-list .title {
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 700;
  }
    ul.doc_type.item-list li.active .title {
      color: #000000;
    }
  ul.doc_type.item-list .edit-btn {
    display: none;
    position: absolute;
    right: 1.2rem;
    top: calc(50% - 1rem);
  }
  ul.doc_type.item-list li.active .edit-btn {
    display: block;
    color: #1251D2;
  }

  @media screen and (min-width: 620px) {
    ul.doc_type.item-list li {
      width: 50%;
      float: left;
    }
  }

  form.main .modal_overlay {
    display: none;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    min-height: 100%;
    padding: 2rem;
    margin: 0px;
    background-color: rgba(33,33,33,0.5);
    z-index: 1100;
  }
  form.main .modal_overlay.uploading,
  form.main .modal_overlay.cir_ok {
    background-color: rgba(255,255,255,0.9);
  }

  form.main .modal_overlay .panel {
    text-align: center;
    position: absolute;
    left: 5%;
    top: calc(25%);
    width: 90%;
    padding: 3rem 2rem;
    background-color: #FFFFFF;
    border-radius: 0.8rem;
  }
  form.main .modal_overlay .panel .action-bar.input-group .btn {
    margin-bottom: 1rem;
  }
  @media screen and (min-width: 620px) {
    form.main .modal_overlay .panel {
      left: calc(50% - 23rem);
      width: 46rem;
    }
    form.main .modal_overlay .panel .action-bar.input-group {
      text-align: center;
    }
    form.main .modal_overlay .panel .action-bar.input-group .btn {
      margin-left: auto;
    }
  }
  /* uploading */
  form.main .modal_overlay>.uploading {
    position: absolute;
    text-align: center;
    color: #7D97CD;
    font-size: 1.6rem;
    line-height: 19rem;
    width: 20rem;
    height: 20rem;
    left: calc(50% - 10rem);
    top: calc(50% - 10rem);
  }
  form.main .modal_overlay>.uploading .icon {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    animation-name: kf-rotate-lp;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  /* cir_ok */
  form.main .modal_overlay>.cir_ok {
    position: absolute;
    text-align: center;
    width: 20rem;
    height: 20rem;
    left: calc(50% - 10rem);
    top: calc(50% - 10rem);
  }
    form.main .modal_overlay>.cir_ok .cir {
      width: 100%;
      height: 100%;
      border: 1.2rem solid #7D97CD;
      border-radius: 9999px;
      -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-out;
         -moz-transition:    -moz-transform 0.3s ease-out, opacity 0.3s ease-out;
          -ms-transition:     -ms-transform 0.3s ease-out, opacity 0.3s ease-out;
              transition:         transform 0.3s ease-out, opacity 0.3s ease-out;

    }
      form.main .cir_ok.modal_overlay>.cir_ok .cir {
        opacity: 0;
        -webkit-transform: scale(0.5);
           -moz-transform: scale(0.5);
            -ms-transform: scale(0.5);
                transform: scale(0.5);
      }
      form.main .cir_ok.ani.modal_overlay>.cir_ok .cir {
        opacity: 1;
        -webkit-transform: scale(1);
           -moz-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);
      }
    form.main .modal_overlay>.cir_ok .icon_tick {
      position: absolute;
      left: 15%;
      top: 15%;
      width: 70%;
      height: 70%;
    }

    .icon_tick .p_tick {
      fill:none;
      stroke-width:4;
      stroke: #7D97CD;
      stroke-linejoin:round;
      stroke-linecap:round;
      stroke-miterlimit:10;
      stroke-dasharray: 50;
      stroke-dashoffset: 0; /* 0:show, 50:hide */
      -webkit-transition: stroke-dashoffset 0.1s linear 0.1s;
         -moz-transition: stroke-dashoffset 0.1s linear 0.1s;
          -ms-transition: stroke-dashoffset 0.1s linear 0.1s;
              transition: stroke-dashoffset 0.1s linear 0.1s;
    }
    form.main .cir_ok.modal_overlay>.cir_ok .icon_tick .p_tick {
      stroke-dashoffset: 50;
    }
    form.main .cir_ok.ani.modal_overlay>.cir_ok .icon_tick .p_tick {
      stroke-dashoffset: 0;
    }


  form.main .modal_overlay>.panel,
  form.main .modal_overlay>.uploading,
  form.main .modal_overlay>.upload_toolong,
  form.main .modal_overlay>.upload_timeout,
  form.main .modal_overlay>.cir_ok {
    display: none;
  }
  form.main .modal_overlay.reconfirm,
  form.main .modal_overlay.reconfirm>.reconfirm.panel,
  form.main .modal_overlay.notice_zero,
  form.main .modal_overlay.notice_zero>.notice_zero.panel,
  form.main .modal_overlay.notice_5m,
  form.main .modal_overlay.notice_5m>.notice_5m.panel,
  form.main .modal_overlay.notice_25m,
  form.main .modal_overlay.notice_25m>.notice_25m.panel,
  form.main .modal_overlay.notice_format,
  form.main .modal_overlay.notice_format>.notice_format.panel,
  form.main .modal_overlay.notice_filename,
  form.main .modal_overlay.notice_filename>.notice_filename.panel,
  form.main .modal_overlay.notice_platformunsupport,
  form.main .modal_overlay.notice_platformunsupport>.notice_platformunsupport.panel,
  form.main .modal_overlay.uploading,
  form.main .modal_overlay.uploading>.uploading,
  form.main .modal_overlay.upload_toolong,
  form.main .modal_overlay.upload_toolong>.upload_toolong,
  form.main .modal_overlay.upload_timeout,
  form.main .modal_overlay.upload_timeout>.upload_timeout,
  form.main .modal_overlay.cir_ok,
  form.main .modal_overlay.cir_ok>.cir_ok {
    display: block!important;
  }

form.main input[type=file] {
  position: absolute;
  display: block;
  left: 0px;
  top: 0px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-appearance: none;
     -moz-appearance: none;
      -ms-appearance: none;
          appearance: none;
}

/* promo */
form.main .promo.input-group .checkbox.inner_container {
  padding: 1.3rem 0.6rem 1.4rem 0.6rem;
  background-color: #FFFFFF;
  border: 2px solid #9DB1D9;
  border-radius: 1rem;
}
  form.main .promo.input-group .checkbox.inner_container label {
    color: rgba(13, 20, 77, 0.6);
    font-size: 1.6rem;
    font-weight: 500;
    margin-top: 0px;
  }
    form.main .promo.input-group input[type=checkbox],
    form.main .promo.input-group input.checkbox {
      left: 1.4rem;
      top: 1.5rem;
    }
    form.main .promo.input-group .checkbox.inner_container input[type=checkbox]:checked+label,
    form.main .promo.input-group .checkbox.inner_container input.checkbox:checked+label {
      color: rgba(13, 20, 77, 1);
      font-weight: 700;
    }
/* 356 - 393 normal 10px */

/* 411 - 429 */
/* @media screen and (min-width: 394px) and (max-width: 431px){
  html {font-size: 11px;}
}
@media screen and (min-width: 432px) and (max-width: 449px){
  html {font-size: 12px;}
} */
/* responsive column */
form.main .radio.inner_container {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  max-width: calc(100% + 1rem);
}
form.main .radio.inner_container .for-radio {
  float: left;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
form.main .radio.inner_container>select {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  width: calc(100% - 1rem);
}
@media screen and (max-width: 619.98px) {
  form.main .desc{
    font-size: 1.6rem; line-height: 1.5;
  }
  form.main .input-group{
    padding-top: 2.5rem;
  }
  form.main .inner_container{
    margin-top: 0;
  }
  form.main h3{
    margin-top: 7rem;
  }
  form.main h3 span{
    display: block;
  }
  .address.input-group .address_1{
    margin-bottom: 0.5rem;
  }
  .effective_date.input-group .left, .effective_date.input-group .right{
    float: none; width: 100%;
  }
  .effective_date.input-group .right{
    margin-top: 1rem;
  }
  .effective_date.input-group .error{
    padding-left: 3.5rem;
  }
  form.main .pay_method h3{
    margin-top: 2.5rem; font-size: 1.6rem;
  }
  form.main .radio.inner_container .for-radio {
    width: calc(50% - 1rem); height: 4.8rem; padding-left: 2rem; padding-right: 2rem;
  }
  form.main .secondary.btn, .return_home.btn{
    max-width: 250px;
  }
  form.main .enquiry label{
    margin-bottom: 1.5rem;
  }
  form.main .enquiry textarea{
    height: 20rem;
  }
  form.main label.for-radio>span{
    font-size: 1.6rem;
  }
  form.main .board .m1d2 {
    width: 100%;
  }
  form.main .top_section{
	padding-bottom: 3.5rem
}
}
@media screen and (min-width: 620px) {
  form.main .radio.inner_container .for-radio {
    width: calc(33.3% - 1rem);
  }
  form.main .col-l {
    position: relative;
    width: calc(50% - 0.5rem);
    float: left;
    margin-left: 0px;
    margin-right: 0.5rem;
    clear: none;
  }
  form.main .col-r {
    position: relative;
    width: calc(50% - 0.5rem);
    float: left;
    margin-left: 0.5rem;
    margin-right: 0px;
    clear: none;
  }
  form.main .gender.input-group .inner_container label.for-radio {
    width: 16.7rem;
  }
  form.main .action-bar.input-group {
    text-align: left;
  }
  form.main .action-bar.input-group.center {
    text-align: center;
  }
    form.main .action-bar.input-group>* {
      margin-left: 0px;
    }

}
@media screen and (max-width: 989.98px) {
  form.main .effective_date{
    width: 100%; margin-left: 0; margin-right: 0;
  }

}

@media screen and (max-width: 767.98px) {
  form.main .hkid, form.main .effective_date{
    width: 100%; margin-left: 0; margin-right: 0;
  }

}
#recaptcha_widget {
  display: none;
  margin: 2rem auto;
}