@charset "utf-8";

/* show hide on header elements in header */
/* site-logo : show on left when start, on center afterward */
body.s3050 header.main .site-logo, /* normal loan - otp */
body.s3060 header.main .site-logo, /* normal loan - otp */
body.s5030 header.main .site-logo, /* reupload - upload */
body.s7010 header.main .site-logo, /* normal loan - promo */
body.s8010 header.main .site-logo, /* normal loan/mini-loan - end */
body.s8020 header.main .site-logo, /* reupload - end */
body.s8030 header.main .site-logo, /* normal loan/mini-loan - end */
body.s9999 header.main .site-logo { /* error */
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/* arrow : hide when first board of each section  */
header.main a.arrow {
  opacity: 0;
  pointer-events: none;
}

/* lang-selector, login.btn : show at first, hide afterward */
header.main nav.lang.selector,
header.main .login.btn {
  opacity: 0;
  pointer-events: none;
}
body.s1010p010 header.main nav.lang.selector, /* normal loan first page */
body.s1010p010 header.main .login.btn,
body.s1510p010 header.main nav.lang.selector, /* mini-loan first page */
body.s1510p010 header.main .login.btn,
body.s2010p010 header.main nav.lang.selector, /* reupload first page */
body.s2010p010 header.main .login.btn {
  opacity: 1;
  pointer-events: auto;
}

/* progress sidebar */
.progress.sidebar {
  text-align: center;
  overflow: hidden;
  display: none;
}
.progress.sidebar img {
  width: 100%;
  height: auto;
}
.progress.sidebar p,
.progress.sidebar h4,
.progress.sidebar h6 {
  padding: 0px;
  margin: 0px;
}

@media screen and (max-width: 1023px) {
  .progress.sidebar .title.container,
  .progress.sidebar .g.container {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .progress.sidebar {
    color: #FFFFFF;
    display: block;
    text-align: left;
    font-size: 1.8rem;
    background-color: #1F2457;
    padding: 38px 16px 16px 32px;
  }
  .progress.sidebar>.inner {
    -webkit-transition: -webkit-transform 0.5s;
       -moz-transition:    -moz-transform 0.5s;
        -ms-transition:     -ms-transform 0.5s;
            transition:         transform 0.5s;
  }
  .progress.sidebar h4 {
    font-size: 30px;
    line-height: 1.1;
    margin-top: 2px;
    margin-bottom: 0px;
  }
  .progress.sidebar .item-list li {
    display: block;
    text-align: left;
  }
  .progress.sidebar .item-list li>*:first-child {
    margin-top: 0px;
  }
  /* .title.container */
  .progress.sidebar .title.container {
    width: 206px;
    height: 98px;
    border: solid rgba(53, 105, 255, 0.15);
    border-width: 0px 0px 2px 0px;
    overflow: hidden;
  }
    .progress.sidebar .title.container .item-list {
      width: 1000%;
      height: 100%;
      -webkit-transform: translateX(0);
         -moz-transform: translateX(0);
          -ms-transform: translateX(0);
              transform: translateX(0);
      -webkit-transition: -webkit-transform 0.5s;
         -moz-transition:    -moz-transform 0.5s;
          -ms-transition:     -ms-transform 0.5s;
              transition:         transform 0.5s;
    }
      .progress.sidebar .title.container .item-list li {
        float: left;
        width: 206px;
        height: 100%;
        padding-top: 16px;
        padding-bottom: 16px;
        opacity: 0;
        transition: opacity 1s;
      }
      /* otp */
      body.s3010 .progress.sidebar .title.container .item-list,
      body.s3020 .progress.sidebar .title.container .item-list,
      body.s3050 .progress.sidebar .title.container .item-list,
      body.s3060 .progress.sidebar .title.container .item-list {
        -webkit-transform: translateX(0%);
           -moz-transform: translateX(0%);
            -ms-transform: translateX(0%);
                transform: translateX(0%);
      }
      /* upload */
      body.s2010 .progress.sidebar .title.container .item-list,
      body.s5010 .progress.sidebar .title.container .item-list,
      body.s5020 .progress.sidebar .title.container .item-list,
      body.s5030 .progress.sidebar .title.container .item-list {
        -webkit-transform: translateX(-10%);
           -moz-transform: translateX(-10%);
            -ms-transform: translateX(-10%);
                transform: translateX(-10%);
      }
      /* finish_ok */
      body.s7010 .progress.sidebar .title.container .item-list,
      body.s8010 .progress.sidebar .title.container .item-list {
        -webkit-transform: translateX(-20%);
           -moz-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
                transform: translateX(-20%);
      }
      /* finish_thankyou */
      body.s8030 .progress.sidebar .title.container .item-list {
        -webkit-transform: translateX(-30%);
           -moz-transform: translateX(-30%);
            -ms-transform: translateX(-30%);
                transform: translateX(-30%);
      }
      /* finish_reupload */
      body.s8020 .progress.sidebar .title.container .item-list {
        -webkit-transform: translateX(-40%);
           -moz-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
                transform: translateX(-40%);
      }
      /* error */
      body.s9999 .progress.sidebar .title.container .item-list {
        -webkit-transform: translateX(-50%);
           -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
      }

      body.s3010 .progress.sidebar .title.container .item-list li.otp, /* 您現正進行 雙重認證 */
      body.s3020 .progress.sidebar .title.container .item-list li.otp, /* 您現正進行 雙重認證 */
      body.s3050 .progress.sidebar .title.container .item-list li.otp, /* 您現正進行 雙重認證 */
      body.s3060 .progress.sidebar .title.container .item-list li.otp, /* 您現正進行 雙重認證 */
      body.s2010 .progress.sidebar .title.container .item-list li.upload, /* 您正在遞交 申請文件 */
      body.s5010 .progress.sidebar .title.container .item-list li.upload,
      body.s5020 .progress.sidebar .title.container .item-list li.upload,
      body.s5030 .progress.sidebar .title.container .item-list li.upload,
      body.s7010 .progress.sidebar .title.container .item-list li.finish_ok, /* 您已經完成 貸款申請 */
      body.s8010 .progress.sidebar .title.container .item-list li.finish_ok, /* 您已經完成 貸款申請 */
      body.s8020 .progress.sidebar .title.container .item-list li.finish_reupload, /* 您已經成功 補交文件 */
      body.s8030 .progress.sidebar .title.container .item-list li.finish_thankyou, /* 多謝 */
      body.s9999 .progress.sidebar .title.container .item-list li.error { /* 您未能 使用此服務 */
        opacity: 1;
      }

      /* .g.container */
      .progress.sidebar .g.container {
        height: 0px;
        overflow: hidden;
        -webkit-transition: height 0.5s;
           -moz-transition: height 0.5s;
            -ms-transition: height 0.5s;
                transition: height 0.5s;
      }
      body.s1010 .progress.sidebar .g.container,
      body.s2010 .progress.sidebar .g.container,
      body.s3010 .progress.sidebar .g.container,
      body.s3020 .progress.sidebar .g.container,
      body.s3050 .progress.sidebar .g.container,
      body.s3060 .progress.sidebar .g.container,
      body.s4010 .progress.sidebar .g.container,
      body.s4020 .progress.sidebar .g.container,
      body.s4030 .progress.sidebar .g.container,
      body.s4040 .progress.sidebar .g.container,
      body.s5010 .progress.sidebar .g.container,
      body.s5020 .progress.sidebar .g.container,
      body.s5030 .progress.sidebar .g.container,
      body.s7010 .progress.sidebar .g.container,
      body.s8010 .progress.sidebar .g.container,
      body.s8020 .progress.sidebar .g.container,
      body.s8030 .progress.sidebar .g.container,
      body.s9999 .progress.sidebar .g.container {
        height: 202px;
      }
      .progress.sidebar .g.container .item-list {
        position: absolute;
        width: 100%;
        height: 202px;
        top:100%;
        -webkit-transform: translateY(-100%);
           -moz-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);
      }
      .progress.sidebar .g.container .item-list li {
        position: absolute;
        width: 100%;
        left: 0px;
        top: 0px;
        padding: 16px 26px 16px 10px;
        opacity: 0;
        -webkit-transition: opacity 0.5s;
           -moz-transition: opacity 0.5s;
            -ms-transition: opacity 0.5s;
                transition: opacity 0.5s;
      }
      body.s3010 .progress.sidebar .g.container .item-list li.otp, /* 您現正進行 雙重認證 */
      body.s3020 .progress.sidebar .g.container .item-list li.otp, /* 您現正進行 雙重認證 */
      body.s3050 .progress.sidebar .g.container .item-list li.otp, /* 您現正進行 雙重認證 */
      body.s3060 .progress.sidebar .g.container .item-list li.otp, /* 您現正進行 雙重認證 */
      body.s2010 .progress.sidebar .g.container .item-list li.upload, /* 您正在遞交 申請文件 */
      body.s5010 .progress.sidebar .g.container .item-list li.upload,
      body.s5020 .progress.sidebar .g.container .item-list li.upload,
      body.s5030 .progress.sidebar .g.container .item-list li.upload,
      body.s7010 .progress.sidebar .g.container .item-list li.ok, /* 您已經完成 貸款申請 */
      body.s8010 .progress.sidebar .g.container .item-list li.ok, /* 您已經完成 貸款申請 */
      body.s8020 .progress.sidebar .g.container .item-list li.ok, /* 您已經成功 補交文件 */
      body.s8030 .progress.sidebar .g.container .item-list li.ok, /* 多謝 */
      body.s9999 .progress.sidebar .g.container .item-list li.error { /* 您未能 使用此服務 */
        opacity: 1;
      }
}

.bottom_sticky.container .action-bar {
  display: none;
}

.confirmation.btn {
  color: #FFFFFF;
  width: 100%;
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.1rem;
  padding: 1.8rem 1rem;
  margin: 0px auto;
  background-color: #FA475C;
  background: linear-gradient(270deg, #FA475C 2.31%, #FF7B5F 100%);
  border-radius: 0px;
  border: none;
}

/* lang specific */
@media screen and (max-width: 1023px) {
  html[lang=en] .progress.sidebar .steps.container .item-list>li {
    padding: 0rem 0rem 1.8rem 0rem;
    width: 9.8rem;
    vertical-align: top;
  }
  html[lang=en] .progress.sidebar .steps.container .divider {
    width: 5.4rem;
  }
}
@media screen and (min-width: 1024px) {
  html[lang=en] .progress.sidebar .title.container {
    height: 128px;
  }
  html[lang=en] .progress.sidebar .title.container p {
    font-size: 14px;
    line-height: 1.2;
  }
  html[lang=en] .progress.sidebar .title.container h4 {
    font-size: 26px;
    line-height: 1.2;
  }
  html[lang=en] .progress.sidebar .steps.container h6 {
    font-size: 18px;
    line-height: 1.2;
  }
}