@charset "utf-8";

html,
body {
  min-height: 100%;
  /* height: 100%; */
}
body {
  color: #0D144D; /* default color */
  font-family: 'Noto Sans TC','Microsoft JhengHei',微軟正黑體,sans-serif;
  /* font-family: 'Roboto','Microsoft JhengHei',微軟正黑體,sans-serif; */
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.5;
  background-color: #FFFFFF;
  overflow-x: hidden;
}

/* h1-6 */
h1,h2,h3,h4,h5,h6 {
  font-weight: 700; /* bold */
  line-height: 1.2;
  margin: 1.2em 0px 0.5em 0px;
}
h1,h2 {
  font-size: 3rem;
}
p {
  margin: 0.5em 0 0 0;
}
a {
  color: #1251D2;
  text-decoration: underline;
  outline: none!important;
}
ul {
  padding-left: 2rem;
}
sup {
  font-size: 60%;
}
iframe {
  padding: 0px;
  margin: 0px;
}

html.no-js * {
  -webkit-transition: none!important;
     -moz-transition: none!important;
      -ms-transition: none!important;
          transition: none!important;
}
/* layout */
header.main,
footer.main,
#main_content {
  position: relative;
  display: block;
}
  header.main::after,
  footer.main::after,
  #main_content::after,
  #main_content>.inner::after {
    content: "";
    display: block;
    clear: both;
  }

header.main {
  position: fixed!important;
  top: 0;
  left: 0;
  width: 100%;
  height: 5.5rem;
  overflow: hidden;
  z-index: 100;
}
  @media screen and (min-width: 768px) {
    header.main {
      height: 7.0rem;
    }
  }

footer.main {
  width: 100%;
}
  @media screen and (max-width: 767.98px) {
    footer.main {
      min-height: 36rem;
    }
    html[lang=en] footer.main {
      min-height: 40rem;
    }
  }

#main_content {
  width: 100%;
  min-height: 40rem;
}
  #main_content>.inner {
    max-width: 960px;
    margin: 0px auto;
  }

#form_iframe_container {
  border-radius: 1.2rem;
  min-height: 800px;
  height: 2000px;
  overflow: hidden;
}
  /* layout changes */
  @media screen and (min-width: 1024px) {
    html.no-js #form_iframe_container {
      height: 800px;
    }
    #main_content>.inner {
      min-height: 680px;
      height: 680px;
      overflow: hidden;
    }
    #main_content>.inner>.progress {
      float:left;
      width: 254px;
      height: 100%;
    }
    #form_iframe_container {
      border-radius: 0px;
      float:left;
      width: 706px;
      height: 100%;
    }
  }

/* general btn */

.btn {
  text-align: center;
  text-decoration: none;
  border: none;
}
a.tele {
  text-decoration: none;
}
.oqc {
  display: inline-block;
  text-indent: -0.5em;
}
/* tele link */
html.device__desktop a.tele,
html.device__desktop a.tele:hover,
html.device__desktop a.tele:active {
	color: inherit;
	text-decoration: none;
	cursor: default;
  pointer-events: none;
}

/* header */
header.main {
  text-align: right;
  background-color: #FFFFFF;
  box-shadow: 0px 0.2rem 1rem rgba(0,0,0,0.1);
}
  header.main>.inner {
    position: relative;
    max-width: 960px;
    height: 100%;
    padding: 0.6rem 1.5rem 0.8rem 1.5rem;
    margin: 0px auto;
  }

header.main a {
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 700;
}
header.main .btn {
  color: #1251D2;
  background-color: #EAF5FF;
  padding: 1rem 1.8rem;
  border-radius: 9999px;
}

header.main .site-logo {
  position: absolute;
  display: block;
  width: auto;
  height: 4rem;
  left: 1.5rem;
  top: 50%;
  -webkit-transform: translate(0px, -50%);
     -moz-transform: translate(0px, -50%);
      -ms-transform: translate(0px, -50%);
          transform: translate(0px, -50%);
  -webkit-transition: left 0.5s;
     -moz-transition: left 0.5s;
      -ms-transition: left 0.5s;
          transition: left 0.5s;
}
.entity__application header.main .site-logo .full-logo{
  display: none;
}
.entity__application header.main .site-logo{
  height: 3.5rem;
}
html[lang=en] .entity__application header.main .site-logo{
  height: 2.8rem;
}
@media screen and (min-width: 360px) {
  html[lang=en] .entity__application header.main .site-logo{
    height: 3.5rem;
  }
}
@media screen and (min-width: 430px) {
  .entity__application header.main .site-logo .full-logo{
    display: block;
  }
  .entity__application header.main .site-logo .mobile-logo{
    display: none;
  }
  .entity__application header.main .site-logo,
  html[lang=en] .entity__application header.main .site-logo{
    height: 2.8rem;
  }
}
  @media screen and (min-width: 768px) {
    header.main .site-logo,
    .entity__application header.main .site-logo,
    html[lang=en] .entity__application header.main .site-logo {
      height: 4.9rem;
    }
    .entity__application header.main .site-logo .full-logo{
      width: 33rem;
    }
  }
    html.no-js header.main .site-logo {
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
         -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
    }

  header.main .site-logo img {
    display: inline-block;
    width: auto;
    height: 100%;
  }

  header.main a.arrow {
    position: absolute;
    width: 4rem;
    height: 4rem;
    left: 1rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-transition: opacity 0.5s;
       -moz-transition: opacity 0.5s;
        -ms-transition: opacity 0.5s;
            transition: opacity 0.5s;
  }
    header.main a.arrow::before {
      content: "";
      position: absolute;
      left: 1.7rem;
      top: 1.3rem;
      width: 1.2rem;
      height: 1.2rem;
      border: solid #1251D2;
      border-width: 0px 0px 2px 2px;
      -webkit-transform: rotate(45deg);
         -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg);
    }

header.main nav.lang.selector,
header.main .login.btn {
  display: block;
  position: absolute;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: opacity 0.5s;
     -moz-transition: opacity 0.5s;
      -ms-transition: opacity 0.5s;
          transition: opacity 0.5s;
}
  header.main .login.btn {
    right: 2rem;
    top: 50%;
  }
  html[lang=en] header.main .login.btn {
    right: 1.5rem;
  }
  header.main nav.lang.selector {
    right: 12rem;
    top: 50%;
  }
    html[lang=en] header.main nav.lang.selector {
      right: 15.5rem;
    }
    @media screen and (min-width: 430px) {
      html[lang=en] header.main nav.lang.selector {
        right: 16rem;
      }
    }
    @media screen and (min-width: 768px) {
      html[lang=en] header.main .login.btn {
        right: 2rem;
      }
      html[lang=en] header.main nav.lang.selector {
        right: 17rem;
      }
    }
    header.main nav.lang.selector li {
      border: solid #DDDDDD;
      border-width: 0px 0px 0px 0.2rem;
      margin: 0px;
    }
    header.main nav.lang.selector li:first-of-type {
      border-left-width: 0px;
    }
    header.main nav.lang.selector a {
      color: #DDDDDD;
      font-size: 1.4rem;
      line-height: 1.2;
      font-weight: 500;
      text-decoration: none;
      text-transform: uppercase;
      padding: 0.2rem 0.7rem;
    }

  html[lang=zh-Hant] header.main nav.lang.selector li[lang=zh-Hant] a,
  html[lang=en] header.main nav.lang.selector li[lang=en] a,
  header.main nav.lang.selector .active a {
    color: #1251D2;
    font-weight: 700;
    cursor: default;
    pointer-events: none;
  }


/* footer */
footer.main {
  font-size: 1.6rem;
  text-align: center;
}
  footer.main a {
    text-decoration: none;
  }
  footer.main a:hover {
    text-decoration: underline;
  }
  footer.main .warning .inner,
  footer.main .copryright.inner {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  footer .footer_btm_remarks{
    color: #999999;
    font-size: 1.4rem;
    line-height: 2.4rem;
    margin-top: 2.2rem;
    margin-bottom: 2.4rem;
    max-width: 580px;
    margin: 2.2rem auto 2.4rem auto;
  }
  html[lang="en"] footer .footer_btm_remarks{
    max-width: 900px;
  }
  footer.main .inner>*:first-child {
    margin-top: 0!important;
  }
  footer.main .copryright.inner .loan_ex{
    margin-top: 1rem;
    font-size: 1.4rem;
    line-height: 1.6rem;
    color: #666666;
  }
  footer.main .copryright.inner .loan_ex ol{
    max-width: 50rem;
    padding-left: 2rem;
    display: inline-block;
    text-align: left;
  }
  html[lang=en] footer.main .copryright.inner .loan_ex ol{
    max-width: 70rem;
  }
  footer.main .copryright.inner .loan_ex ol ul{
    list-style-type: disc;
  }

.back_to_top {
  display: block;
  height: 0;
}
  .back_to_top a {
    position: absolute;
    display: block;
    right: 1rem;
    top: -5rem;
    width: 4rem;
    height: 4rem;
    background-color: rgba(13, 20, 77, 0.6);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50%;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQxJREFUeNrs2YsNwiAQBuDiBGxgR3AEN3EFN6ib2I3oBh1BN8BDbUKoPPWw1v+SS0gK9L4GEkiF1rpZQ2yalQQggAACCCCAAAIIIID8D6Qx95HULJh7R3nRj+g462ODUP+Dnkf3UxAPogjzNUgEMcV50RDztV8UbfaIKsVUh3gQI2VLKX0Y82wxkBDC6uPDqBCmGiQF4WD6HEwVSA7CGefDtNUhz/WdjYhgZuNZIR6ESkVY85wS9hYPJICQhUeQIIYF8mlEAkZyQUbnZf27iAhmywU52giGk7iNUTlLS+QcBoUQZtCemldqD0zXCrM35DR/an0C/0cAAQQQQAABBBBAAAEEEEAAucdNgAEAEZ5XyOpyoj0AAAAASUVORK5CYII=');
    border-radius: 9999px;
  }

footer.main .warning {
  font-size: 3rem;
  line-height: 1.2;
  font-weight: 700;
  background-color: #F2FAFF;
  border: solid #3569FF;
  border-width: 0 0 3px 0;
}
  footer.main .warning .inner {
    padding: 2.3rem 2rem 2.5rem 2rem;
  }
  footer.main .copryright.inner {
    padding-top: 3.4rem;
    padding-bottom: 3.4rem;
  }
    @media screen and (min-width: 768px) {
      footer.main .copryright.inner {
        padding-bottom: 5rem;
      }
      html[lang=en] footer.main .copryright.inner{
        padding-bottom: 10rem;
      }
    }
    @media screen and (min-width: 960px) {
      footer.main .copryright.inner,
      html[lang=en] footer.main .copryright.inner {
        padding-bottom: 4rem;
      }
    }
    footer.main .copryright p:nth-of-type(2){
      margin-top: 0;
    }
    @media screen and (min-width: 768px) {
      footer.main .warning br,
      footer.main .copryright br {
        display: none;
      }
    }

.bottom_sticky.container {
  margin: 0;
  padding: 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 115;
}

/* for testing pageshow / hide */
html.pageshow {
  opacity: 1;
}
html.pagehide {
  opacity: 0.1;
}

/* #main_content */
#main_content {
  padding: 7rem 1.5rem 1.5rem 1.5rem;
  background-color: #A3BAFF;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), linear-gradient(180deg, #5C80FF 0.13%, #A3BAFF 78.13%);
}
  @media screen and (min-width: 768px) {
    #main_content {
      padding-top: 85px;
    }
  }
  @media screen and (min-width: 1024px) {
    #main_content {
      padding-top: 125px;
      padding-bottom: 120px;
    }
  }
  @media screen and (min-width: 1024px) and (max-height: 599px) {
    #main_content {
      padding-top: 85px;
      padding-bottom: 60px;
    }
  }
    @media screen and (min-width: 1024px) {
      #main_content>.inner {
        border-radius: 25px;
        box-shadow: 0px 0px 30px -4px #0019FF;
        -webkit-transform: translateZ(0);
           -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
                transform: translateZ(0);
      }
    }
/* dp_bg */
#main_content .dp_bg {
  position: absolute;
  left: 0px;
  top: 0px;
}
@media screen and (max-width: 1024px) {
  #main_content .dp_bg {
    display: none;
  }
}
  #main_content .dp_bg g,
  #main_content .dp_bg path {
    -webkit-transition: -webkit-transform 0.8s;
       -moz-transition:    -moz-transform 0.8s;
        -ms-transition:     -ms-transform 0.8s;
            transition:         transform 0.8s;
  }

/* #form_iframe_container */

#form_iframe_container {
  background-color: #F9FAFF;
  -webkit-transform: translateZ(0);
     -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
          transform: translateZ(0);
}

/* notification container */
.notification.container {
  text-align: left;
  font-size: 1.6rem;
  padding: 1.8rem 2rem;
  background-color: #F2F7FF;
  border-bottom: 2px solid #7D97CD;
  display: none;
}
.notification.container h3 {
  font-size: 1.6rem;
  margin-top: 0;
}
  .notification.container p {
    margin-top: 0.8rem;
  }
  .notification.container .inner {
    padding-right: 5rem;
  }

.notification.container .notification_close {
  content: '';
  position: absolute;
  right: -0.2rem;
  top: -0.4rem;
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url('../img/icon_close.png?revision=202106');
  background-size: 85%;
}
@media screen and (min-width: 1000px) {
  .notification.container .notification_close {
    right: 1.8rem;
  }
  .notification.container .inner {
    padding-left: 2rem;
    padding-right: 5rem;
  }
}


/* platform specific */
/* [chrome] hide stepper for input[type=number]  */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* [firefox] hide stepper of input[type=number] */
input[type=number] {
  -moz-appearance:textfield!important;
}
/* [ie11] hide native down-arrow on <select> */
select::-ms-expand {
  display: none;
}
/* note that we don't have way to do it on common platform like chrome so     */
/* this is not a patch on IE/Firefox, it is only a partial feature            */
/* implementation. and we will make use of js keyup event to remove chinese   */
/* char after those char dropped into input field on other platform           */
html {
  scroll-behavior: smooth;
}

/* keyframes */
@keyframes kf-pop-scale {
  0% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
  15% {
    -webkit-transform: scale(0.8);
       -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
  }
  75% {
    -webkit-transform: scale(1.4);
       -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
            transform: scale(1.4);
  }
  100% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes kf-scale-fade-out {
  100% {
    -webkit-transform: scale(0.2);
       -moz-transform: scale(0.2);
        -ms-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0;
  }
}