@charset "utf-8";

/* feature container */
.feature2.container {
  color: #FFFFFF;
  padding: 4.5rem 0;
  background-color: rgba(9, 101, 238, 0.65);
  overflow: hidden;
}
  @media screen and (max-width: 767.98px) {
    .feature2.container {
      background-image: url('../img/feature/bg.png?revision=202106');
      background-position: left 30%;
      background-repeat: no-repeat;
    }
  }
  @media screen and (min-width: 768px) {
    .feature2.container {
      text-align: center;
      background: none;
    }
    .feature2.container::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 50%;
      background-color: rgba(9, 101, 238, 0.65);
      z-index: -1;
    }
  }

.feature2.container a {
  color: #FFFFFF;
  text-decoration: none;
}
.feature2.container h1 {
  margin: 0;
}
.feature2.container h2,
.feature2.container h3,
.feature2.container h1 .h2,
.feature2.container h1 .h3 {
  margin-top: 0;
  margin-bottom: 0.2em;
}
.feature2.container h3,
.feature2.container h1 .h3 {
  font-size: 1.6rem;
}
  @media screen and (min-width: 768px) {
    .feature2.container h3,
    .feature2.container h1 .h3 {
      font-size: 2.1rem;
    }
  }
.feature2.container .hd {
  padding-left: 3rem;
  padding-right: 3rem;
}

.feature2.container .cir {
  display: inline-block;
  position: relative;
  width: 20rem;
  height: auto;
  overflow: hidden;
  margin: 0 auto;
  background-color: rgba(255,255,255,0.75);
  border-radius: 9999px;
}
  @media screen and (min-width: 768px) and (max-width: 839.98px) {
    .feature2.container .cir {
      width: 15rem;
    }
  }
  @media screen and (min-width: 840px) and (max-width: 913.98px) {
    .feature2.container .cir {
      width: 17rem;
    }
  }
.aniicon_inner {
  display: none;
}
.feature2.container .main .item-list li {
  padding: 0 1.5rem;
  float: left;
  overflow: hidden;
}
.feature2.container .main .item-list a {
  width: 100%;
  height: 100%;
  padding-top: 8rem;
  padding-bottom: 1rem;
  overflow: hidden;
}
  .feature2.container .main .item-list>li:first-child a {
    padding-top: 6rem
  }
  @media screen and (min-width: 768px) {
    .feature2.container .main .item-list a {
      color: #0D144D;
      padding: 3rem 3rem 1rem 3rem!important;
      border-radius: 1.8rem;
      background-color: #F1F4FF;
    }
  }
  .feature2.container .main .item-list h4 {
    font-size: 2.4rem;
  }
    html[lang=en] .feature2.container .main .item-list h4 {
      font-size: 2.2rem;
    }
    @media screen and (min-width: 768px) {
      .feature2.container .main .item-list h4 {
        font-size: 2.6rem;
        margin-top: 0.8em;
        margin-left: -1rem;
        margin-right: -1rem;
      }
      html[lang=en] .feature2.container .main .item-list h4,
      .feature2.container .main .item-list h4 span {
        font-size: 2.2rem;
      }
    }
  .feature2.container .main .item-list p {
    /* min-height: 10.4rem; */
    margin-top: 1.2rem;
  }
    html[lang=en] .feature2.container .main .item-list p {
      font-size: 1.6rem;
      /* min-height: 13rem; */
      margin-top: 0.6em;
    }


.feature2.container .main {
  width: 100%;
}
  @media screen and (max-width: 767.98px) {
    .feature2.container .main .item-list {
      width: 100%;
      /* height: 39rem;
      overflow: hidden;
      overflow-y: scroll;
      scroll-snap-type: y mandatory; */
    }
    /* html[lang=en] .feature2.container .main .item-list {
      height: 40rem;
    } */
    .feature2.container .main .item-list li {
      width: 100%;
      /* height: 39rem; */
      float: none;
      /* scroll-snap-align: start; */
    }
    /* html[lang=en] .feature2.container .main .item-list li {
      height: 40rem;
    } */
  }
  @media screen and (min-width: 768px) {
    .feature2.container .main {
      width: 100%;
      padding: 2.8rem 1.5rem 2rem 1.5rem;
    }
    .feature2.container .main .item-list {
      width: 100%;
    }
    .feature2.container .main .item-list li {
      width: 33.3%;
      height: 57rem;
    }
      html[lang=en] .feature2.container .main .item-list li {
        height: 64rem;
      }
  }
  @media screen and (min-width: 1000px) {
    .feature2.container .main {
      width: 97rem;
      margin: 2.8rem auto 2rem auto;
      padding: 0;
    }
    .feature2.container .main .item-list {
      width: 400%;
    }
    .feature2.container .main .item-list li {
      width: 8.32%;
      height: 51rem;
    }
    html[lang=en] .feature2.container .main .item-list li {
      height: 56rem;
    }

  }
  @media screen and (min-width: 1260px) {
    .feature2.container .main {
      width: 123rem;
    }
    .feature2.container .main .item-list li {
      height: 47rem;
    }
    html[lang=en] .feature2.container .main .item-list li {
      height: 48rem;
    }
    html[lang=en] body.page__self-employment-loan .feature2.container .main .item-list li {
      height: 51rem;
    }

  }

.feature2.container nav.selector {
  display: block;
}
  @media screen and (max-width: 767.98px) {
    .feature2.container nav.selector .item-list a::before {
      background-color: #FFFFFF;
    }
    .feature2.container nav.selector .item-list li.active a {
      border-color: #FFFFFF;
    }
  }

.box-item > div {
  display: block;
}
@media screen and (max-width: 767.98px) {
  .box-item > div {
    position: relative;
    text-align: left;
    overflow: hidden;
    min-height: 17rem;
  }
  .box-item figure {
    position: absolute;
    text-align: center;
    left: 8rem;
    top: 50%;
    width: 11rem;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .box-item h5,
  .box-item p {
    margin-left: 16rem;
  }
  .box-item h5 {
    font-size: 2rem;
  }
  .box-item p {
    margin-top: 1rem;
  }
}
@media screen and (max-width: 549.98px) {
  .box-item figure {
    text-align: center;
    width: 20%;
    left: 18%;
  }
  .box-item h5,
  .box-item p {
    margin-left: 33%;
  }
  body.entity__product .tabControl {
    font-size: 1.4rem;
  }
}

.box-item .right figure:after{
  content: '';
  display: block;
  position: absolute;
  width: 3.9rem;
  height: 3.9rem;
  background: url('../img/product/icon_tiny_tick.png?revision=202106') no-repeat center, linear-gradient(90deg, #FFB55F 0%, #FA7247 100%);
  background-size: contain;
  border-radius: 999px;
  right: -1rem;
  bottom:-1rem;
}
@media screen and (max-width: 767.98px) {
  .box-item .right figure:after{
    width: 3rem;
    height: 3rem;
  }
}
@media screen and (max-width: 549.98px) {
  .box-item .right figure:after{
    width: 2.2rem;
    height: 2.2rem;
  }
}
.tabWrapper .boxWrapper .left,
.tabWrapper .boxWrapper .right {
  opacity: 0;
  transform: translateY(-50%);
  -webkit-animation: none;
          animation: none;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
         transition-timing-function: ease-in-out;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.tabWrapper.interact .boxWrapper .left {
  -webkit-animation-name: kf_fadeInymove;
          animation-name: kf_fadeInymove;
          animation-delay: 0.3s;
}
.tabWrapper.interact .boxWrapper .right {
  -webkit-animation-name: kf_fadeInymove;
          animation-name: kf_fadeInymove;
}
@-webkit-keyframes kf_fadeInymove {
  from {
    opacity: 0;
    -webkit-transform: translateY(-50%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes kf_fadeInymove {
  from {
    opacity: 0;
    transform: translateY(-50%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* casestudy container */
.casestudy2.container {
  text-align: center!important;
  padding-left: 5rem;
  padding-right: 5rem;
}
.casestudy2.container .hd>*:first-child,
.casestudy2.container .item-list li>a>*:first-child {
  margin-top: 0;
}
.casestudy2.container .hd {
  padding-top: 6rem;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url('../img/case-study/open_quot.png?revision=202106');
}
.casestudy2.container .main {
  width: 100%;
  max-width: 41rem;
  margin: 2.6rem auto 3rem auto;
}
@media screen and (min-width: 960px) {
  .casestudy2.container .slick-list {
    overflow: hidden;
  }
}
.casestudy2.container .main .item-list {
  width: 1000%;
  /* align-items: stretch;
  overflow: visible; */
}
/* .casestudy2.container .slick-track {
  display: flex;
  align-items: stretch;
} */
.casestudy2.container .main .item-list li {
  width: 10%;
  padding-left: 1rem;
  padding-right: 1rem;
  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
     -moz-transition:    -moz-transform 0.4s, opacity 0.4s;
      -ms-transition:     -ms-transform 0.4s, opacity 0.4s;
          transition:         transform 0.4s, opacity 0.4s;
}
.casestudy2.container .main .item-list li>a {
  color: #FFFFFF;
  text-decoration: none;
  width: 100%;
  height: 100%;
  padding: 3rem 2rem;
  background-color: #3569FF;
  border-radius: 1.2rem;
  /* display: block; */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}
.casestudy2.container .cir {
  text-align: left;
  display: inline-block;
  margin: 2rem auto 0 auto;
  width: 50%;
  max-width: 43.2rem;
  background-color: #1251D2;
  border-radius: 9999px;
  overflow: hidden;
}
.casestudy2.container .main .item-list p {
  position: relative;
  font-weight: 700;
  min-height: 8.2rem;
}
  html[lang=en] .casestudy2.container .main .item-list p {
    min-height: 11.2rem;
  }
.casestudy2.container .main .item-list h3,
.casestudy2.container .main .item-list h4 {
  font-weight: 400;
  margin-bottom: 0;
}
.casestudy2.container .main .item-list h3 {
  font-size: 1.8rem;
  margin-top: 2.5rem;
}
.casestudy2.container .main .item-list h4 {
  font-size: 1.4rem;
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .casestudy2.container .cir {
    width: 70%;
  }
}

@media screen and (min-width: 960px) {
  .casestudy2.container {
    padding-left: 0;
    padding-right: 0;
  }
  .casestudy2.container .main {
    width: 100%;
    max-width: 97rem;
    overflow: hidden;
  }
  .casestudy2.container .main .item-list {
    width: 300%;
  }
  .casestudy2.container .main .item-list li {
    width: 11.1%;
    height: 48rem;
  }
    html[lang=en] .casestudy2.container .main .item-list li {
      height: 52rem;
    }
  html[lang=en] .casestudy2.container .main .item-list p {
    min-height: 16.2rem;
  }
}
@media screen and (max-width: 959.98px) {
  .casestudy2.container .main .item-list {
    margin-left: -100%;
  }
  .casestudy2.container .main .item-list li {
    height: 48rem;
    opacity: 0.6;
    /* -webkit-transform: translateY(2rem);
       -moz-transform: translateY(2rem);
        -ms-transform: translateY(2rem);
            transform: translateY(2rem); */
  }
  .casestudy2.container .main .item-list li.active,
  .casestudy2.container .main .item-list .slick-current {
    opacity: 1;
    /* -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0); */
  }
}
  @media screen and (min-width: 768px) and (max-width: 959.98px) {
    html[lang=en] .casestudy2.container .main .item-list li {
      height: 54rem;
    }
  }
@media screen and (min-width: 1260px) {
  .casestudy2.container .main {
    width: 100%;
    max-width: 123rem;
  }
  .casestudy2.container .main .item-list li {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  html[lang=en] .casestudy2.container .main .item-list p {
    min-height: 10.8rem;
  }
}
@media screen and (max-width: 959.98px) {
  nav.slide.page.selector {
    display: none;
  }
}
@media screen and (min-width: 960px) {
  nav.slide.item.selector {
    display: none;
  }
}