@charset "utf-8";

/* Common */
.icon-minus:before {
  content: "\6b"; }
.icon-plus:before {
content: "\6a"; }
/***********/
.calculator #calculator .content #range-slider-container #range-slider .irs-slider,
.calculator #calculator .content #apply-btn{
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    border-radius: 50px;
    box-shadow: 0 1px 2px #fff, 0 1px 1px #666, inset 0 -1px 1px rgba(0, 0, 0, 0.5), inset 0 4px 1px rgba(255, 255, 255, 0.2);
    -moz-box-shadow: 0 1px 2px #fff, 0 1px 1px #666, inset 0 -1px 1px rgba(0, 0, 0, 0.5), inset 0 4px 1px rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: 0 1px 2px #fff, 0 1px 1px #666, inset 0 -1px 1px rgba(0, 0, 0, 0.5), inset 0 4px 1px rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: 0 1px 2px #fff, 0 1px 1px #666, inset 0 0px 1px rgba(0, 0, 0, 0.5), inset 0 4px 1px rgba(255, 255, 255, 0.2);
    color: #ffffff;
    width: 100%;
    line-height: 20px;
    padding: 10px 30px;
    text-align: center; }
.calculator #calculator .content #range-slider-container #range-slider .irs-slider span,
.calculator #calculator .content #apply-btn span{
    width: 100%;
    display: block;
    height: 20px; }
.calculator #calculator .content #range-slider-container #range-slider .irs-slider:hover{
    background: #1d4be6;
    background: -webkit-linear-gradient(bottom, #1d4be6 0%, #204fc4 30%, #4474bd 60%, #5494f5 100%);
    background: linear-gradient(to top, #1d4be6 0%, #204fc4 30%, #4474bd 60%, #5494f5 100%); }

/***********/
.calculator {
    width: 100%;
    min-height: 485px;
    background: #0072BB;
  }
    .calculator #calculator {
      width: 100%;
      max-width:1000px;
      margin: 0 auto;
      padding: 5rem 3rem; }
      @media (max-width: 1023.98px) {
        .calculator #calculator {
          padding: 3rem 3rem 5rem 3rem; } }
      .calculator #calculator .content {
        width: 100%;
        color: #ffffff; }
        @media (max-width: 1023.98px) {
          .calculator #calculator .content {
            height: auto;
            min-height: 410px;
            margin: 0 auto; } }
        @media (max-width: 767.98px) {
          .calculator #calculator .content {
            width: 100%;
            min-height: 390px; } }
        .calculator #calculator .content .title {
          width: 100%;
          text-align: left;
          font-size: 36px;
          font-weight: 600;
          margin-top: 0; }
          @media (max-width: 767.98px) {
            .calculator #calculator .content .title {
              font-size: 30px;
              margin-top: 0;
              margin-bottom:0;
            }
          }

        .calculator #calculator .content .sub-title {
          width: 100%;
          text-align: left;
          font-size: 18px;
          margin: 10px 0px;
          margin-top: 3rem; }
        .calculator #calculator .content .sub-title:before {
          content: '';
          display: inline-block;
          width: 18px;
          height: 22px;
          background-size: contain;
          background: url('../img/calculator_icon.png?revision=202106') no-repeat;
          vertical-align: baseline;
          margin-right: 1.2rem;
          transform: translateY(3px);
        }
        .calculator #calculator .content #cal-wrapper {
          display: inline-block;
          width: 100%; }
          .calculator #calculator .content #cal-wrapper .irs-line {
            height: 4px;
            top: 22px !important; }
          .calculator #calculator .content #cal-wrapper .irs-line-left, .calculator #calculator .content #cal-wrapper .irs-line-mid, .calculator #calculator .content #cal-wrapper .irs-line-right {
            height: 4px; }
          .calculator #calculator .content #cal-wrapper .irs-line-mid {
            left: 9%;
            width: 82%; }

  /* .calculator #calculator .content #range-slider-container */
        .calculator #calculator .content #range-slider-container {
          width: 100%;
          position: relative;
          display: inline-block;
          margin-bottom: 0px;
        }
          @media (max-width: 767.98px) {
            .calculator #calculator .content #range-slider-container {
              width: 100%;
              margin: 0px;
            }
          }
          .calculator #calculator .content #range-slider-container .minus-btn,
          .calculator #calculator .content #range-slider-container .plus-btn {
            width: 30px;
            height: 50px;
            float: left;
            position: relative;
            cursor: pointer; }
            .calculator #calculator .content #range-slider-container .minus-btn::before,
            .calculator #calculator .content #range-slider-container .plus-btn::before {
              font-size: 24px;
              position: absolute;
              top: 10px;
              left: 0px; }
          .calculator #calculator .content #range-slider-container .plus-btn {
            float: right; }
          .calculator #calculator .content #range-slider-container #range-number {
            width: 100%;
            height: 50px;
            margin-left: 0px;
            display: inline-flex;
            border-bottom: 2px solid #ffffff; }
            .calculator #calculator .content #range-slider-container #range-number span {
              font-size: 30px;
              color: #ffffff;
              font-weight: 600;
              cursor: default;
              margin-right: 0.5rem;
              line-height: 165%;}
            .calculator #calculator .content #range-slider-container #range-number #m_range {
              min-width: 20px;
              max-width: 100%;
              width: 100%;
              height: 100%;
              background: transparent;
              border: none;
              outline: 0;
              text-align: left;
              font-size: 30px;
              color: #ffffff;
              font-weight: 600;
              font-family: "Microsoft JhengHei", "Apple LiSong", Helvetica, Arial, sans-serif, Verdana;
              position: relative;
              padding: 0px;
              vertical-align: baseline;
              cursor: pointer; }

  /* .calculator #calculator .content #range-slider-container #range-slider */
          .calculator #calculator .content #range-slider-container #range-slider {
            width: calc(100% - 80px);
            height: 50px;
            position: absolute;
            top: 0px;
            left: 50%;
            border: 0;
            margin-top: 46px;
            background: transparent;
          }
            @media (min-width: 1024px) {
              .calculator #calculator .content #range-slider-container #range-slider {
                transform: translateX(-50%);
              }
            }
            @media (max-width: 1023.98px) {
              .calculator #calculator .content #range-slider-container #range-slider {
                width: 340px;
                margin-left: -170px;
              }
            }
            @media (max-width: 767.98px) {
              .calculator #calculator .content #range-slider-container #range-slider {
                display: none;
              }
            }
            .calculator #calculator .content #range-slider-container #range-slider .irs-min,
            .calculator #calculator .content #range-slider-container #range-slider .irs-max,
            .calculator #calculator .content #range-slider-container #range-slider .irs-bar-edge,
            .calculator #calculator .content #range-slider-container #range-slider .irs-bar {
              display: none !important; }
            .calculator #calculator .content #range-slider-container #range-slider .irs-line,
            .calculator #calculator .content #range-slider-container #range-slider .irs-bar,
            .calculator #calculator .content #range-slider-container #range-slider .irs-bar-edge {
              top: 20px;
            }
            .calculator #calculator .content #range-slider-container #range-slider .irs-slider {
              top: 0px;
              width: 170px;
              height: 50px;
              padding: 4px;
              box-shadow: 0 1px 2px #444, 0 1px 1px #666, inset 0 -1px 1px rgba(0, 0, 0, 0.5), inset 0 4px 1px rgba(255, 255, 255, 0.2);
              -moz-box-shadow: 0 1px 2px #444, 0 1px 1px #666, inset 0 -1px 1px rgba(0, 0, 0, 0.5), inset 0 4px 1px rgba(255, 255, 255, 0.2);
              -webkit-box-shadow: 0 1px 2px #444, 0 1px 1px #666, inset 0 -1px 1px rgba(0, 0, 0, 0.5), inset 0 4px 1px rgba(255, 255, 255, 0.2);
              -webkit-box-shadow: 0 1px 2px #444, 0 1px 1px #666, inset 0 0px 1px rgba(0, 0, 0, 0.5), inset 0 4px 1px rgba(255, 255, 255, 0.2);
              background: #ed2138;
              background: -webkit-linear-gradient(bottom, #ed2138 0%, #f43c5f 30%, #f85e83 60%, #f85d82 100%);
              background: linear-gradient(to top, #ed2138 0%, #f43c5f 30%, #f85e83 60%, #f85d82 100%);
              box-shadow: 0 3px 3px #444, 0 2px 2px #666, inset 0 -1px 1px rgba(0, 0, 0, 0.5), inset 0 4px 1px rgba(255, 255, 255, 0.2);
              -moz-box-shadow: 0 3px 3px #444, 0 2px 2px #666, inset 0 -1px 1px rgba(0, 0, 0, 0.5), inset 0 4px 1px rgba(255, 255, 255, 0.2);
              -webkit-box-shadow: 0 3px 3px #444, 0 2px 2px #666, inset 0 -1px 1px rgba(0, 0, 0, 0.5), inset 0 4px 1px rgba(255, 255, 255, 0.2);
              -webkit-box-shadow: 0 3px 3px #444, 0 2px 2px #666, inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 4px 1px rgba(255, 255, 255, 0.2);
              background: #f54266;
            }
              .calculator #calculator .content #range-slider-container #range-slider .irs-slider:hover {
                background: #cc1b2f;
                background: -webkit-linear-gradient(bottom, #cc1b2f 0%, #b62c47 30%, #dd5275 60%, #f35d82 100%);
                background: linear-gradient(to top, #cc1b2f 0%, #b62c47 30%, #dd5275 60%, #f35d82 100%);
              }
            .calculator #calculator .content #range-slider-container #range-slider .irs-single {
              background: transparent;
              line-height: 45px;
              z-index: 3;
              font-size: 25px;
              color: #ffffff;
              pointer-events: none;
              font-weight: 900;
            }


          .calculator #calculator .content #range-slider-container .err-box {
            display: none;
            width: 100%;
            text-align: center;
            margin-top: 1rem;
            color: #FF0000;
            font-size: 1.6rem;
            padding: 0.5rem 2rem;
            line-height: 2rem; }


        .calculator #calculator .content #month-select-container {
          width: 100%;
          position: relative;
          display: inline-block;}
          @media (max-width: 767.98px) {
            .calculator #calculator .content #month-select-container {
              width: 100%; }
              .calculator #calculator .content #month-select-container p {
                padding-top: 0px; } }
          .calculator #calculator .content #month-select-container p {
            width: 100%;
            text-align: left;
            font-size: 18px;
            margin-top: 0px;
            margin-bottom:0px; }
          .calculator #calculator .content #month-select-container #month-selector {
            width: 350px;
            height: 50px;
            position: relative; }
            @media (max-width: 1023.98px) {
              .calculator #calculator .content #month-select-container #month-selector {
                width: 100%; } }
            .calculator #calculator .content #month-select-container #month-selector .month-picker {
              display: none; }
            .calculator #calculator .content #month-select-container #month-selector .items {
              line-height: 31px; }
              @media (max-width: 1023.98px) {
                .calculator #calculator .content #month-select-container #month-selector .items {
                  line-height: 35px; } }
              .calculator #calculator .content #month-select-container #month-selector .items .item {
                font-size: 24px; }
        .calculator #calculator .content #loan-container {
          width: 350px;
          height: auto;
          margin: 0 auto;
          padding: 3rem 0px;
          border-radius: 10px;
          /*
          background: linear-gradient(180deg, #FF9F8A 0%, #EF6373 100%);
          */
          border:solid 1px #FFFFFF;
          position: relative;
          z-index: 2;
          }
          .bkBg{
            max-width: 350px;
            height: auto;
            margin: 0 auto;
            display: block;
            position: relative;
            margin-top: 4rem;
          }
          .col .bkBg{
            margin-top: 4rem!important;
          }
          .bkBg:before{
            content: '';
            display: block;
            z-index: 1;
            border-radius: 10px;
            /*
            background: linear-gradient(180deg, #3569FF 0.24%, #7498FF 52.35%, rgba(63, 175, 255, 0.34) 98.43%);
            */
            position: absolute;
            width: 100%;
            height: 100%;
            transform: translate(0.5rem, 0.5rem);
          }
          .calculator #calculator .content #loan-container #result-number label{
            vertical-align: baseline;
          }
          .calculator #calculator .content #loan-container #result-number .label_dollar.hidden{
            display: none;
          }
          @media (max-width: 767.98px) {
            .calculator #calculator .content #loan-container {
              width: 100%; } }
          .calculator #calculator .content #loan-container p {
            width: 100%;
            text-align: center;
            font-size: 18px;
            margin: 0px;
            margin-top: 0px; }
          .calculator #calculator .content #loan-container #result-number {
            width: 100%;
            text-align: center;
            font-size: 3.2rem;
            font-weight: 700;
            line-height: 120%; }
        .calculator #calculator .content #apply-btn {
          -webkit-border-radius: 30px;
          -moz-border-radius: 30px;
          -ms-border-radius: 30px;
          border-radius: 30px;
          line-height: 32px;
          height: 55px;
          width: 350px;
          margin: 0 auto;
          display: block;
          margin-top: 3.8rem;
          cursor: pointer;
          box-shadow: none;
          }
          @media (max-width: 767.98px) {
            .calculator #calculator .content #apply-btn {
              width: 100%; } }
          .calculator #calculator .content #apply-btn span {
            width: 100%;
            display: block;
            height: 30px;
            text-align: center;
            font-size: 2rem; }
    .calculator .remarks {
      margin-top: 15px;
      font-size: 12px;
      text-align: center;
      width: 100%;
      display: block;
      color: #FFFFFF;
      line-height: 16px;
      margin-top: 4rem; }
      @media (max-width: 767.98px) {
        .calculator .remarks {
          padding-top: 0px;
          margin-bottom: 10px;
        }
      }
      .calculator .remarks .wrapCenter{
        display: inline-block;
        text-align: left;
      }
      .calculator .desc{
        margin-top:4rem;
        padding:2.5rem;
        color:#FFFFFF;
        background:rgba(242, 250, 255, 0.15);
        border-radius:12px;
        text-align:center;
      }
      .calculator .desc h2{
        margin-top:0;
        margin-bottom:0;
        font-size:2rem;
      }
      .calculator .desc h3{
        margin-top:1rem;
        font-size:1.6rem;
      }
      .calculator .desc p{
        margin-top:3rem;
        font-size:1.4rem;
        line-height:2.4rem;
      }
      @media (min-width: 768px) {
        .calculator .desc{
          padding:5rem;
        }
        .calculator .desc h3{
          font-size:2.2rem;
        }
        .calculator .desc h2{
          font-size:3rem;
        }
      }

/***************/
#period-radio{
  list-style: none;
  padding-left: 0;
  margin-left: -0.2rem;

  border-top: 2px solid;
  border-bottom: 2px solid;
  border-image-slice: 1;
  border-width: 2px;
  border-image-source: linear-gradient(270deg, #6A86FF -4.32%, #45BEE8 105.76%);
  border-left:0;
  border-right:0;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top:0.5rem;
  margin-bottom:0;
}
#period-radio li{
  display: inline-block;
  margin:0.4rem;
}
#period-radio input[type=radio]{
  display: none;
}
#period-radio li label{
  padding:0.5rem 1rem;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  background: transparent;
  color: #FFFFFF;
  font-size: 1.8rem;
  position: relative;
}
#period-radio li label:before{
  content:'';
  display:block;
  width:100%;
  height:100%;
  position: absolute;
  z-index: 0;
  background: radial-gradient(48.86% 2758.49% at 50% 54.55%, rgba(0,133,255,1) 0%, rgba(0,114,187,1) 100%);
  top:0;
  bottom:0;
  left:0;
  right:0;
  border-radius:50%;
  opacity: 0;
  transition: all 0.4s;
  pointer-events:none;
}
#period-radio li label span{
  position: relative;
  z-index: 1;
}
#period-radio input[type=radio]:checked + label:before{
  opacity: 1;
}
#period-radio.unselect li label:before{
  opacity: 0!important;
}
#period-radio label span{
  transition: all 0.1s;
}
#period-radio input[type=radio]:checked + label span{
  transform: scale(1.1);
  display: inline-block;
  font-weight: 900;
}
/*
#period-radio.group1 li#col_18,
#period-radio.group1 li#col_24,
#period-radio.group1 li#col_30,
#period-radio.group1 li#col_36,
#period-radio.group1 li#col_48,
#period-radio.group1 li#col_60,
#period-radio.group1 li#col_72,
#period-radio.group2 li#col_24,
#period-radio.group2 li#col_30,
#period-radio.group2 li#col_36,
#period-radio.group2 li#col_48,
#period-radio.group2 li#col_60,
#period-radio.group2 li#col_72,
#period-radio.group3 li#col_03,
#period-radio.group3 li#col_09,
#period-radio.group3 li#col_48,
#period-radio.group3 li#col_60,
#period-radio.group3 li#col_72,
#period-radio.group4 li#col_03,
#period-radio.group4 li#col_09{
  display:none;
  cursor:auto;
  pointer-events: none;
  color: rgba(242, 250, 255, 0.5);
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
*/
#period-radio li.line-break{
  display: none;
  width: 100%;
  flex: 0 0 100%;
  margin: 0;
}
#period-radio.group4 .line-break.nth5n{
  display: block;
}
#period-radio.group4 li{
  width: calc(20% - 0.8rem);
  text-align:center;
}
#period-radio.group3 li{
  width: calc(20% - 0.8rem);
  text-align:center;
}
#period-radio.group3 .line-break.nth3n{
  display: block;
}
@media (min-width: 768px) {
  .row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .row .col:nth-child(1){
    flex:1;
  }
  .row .col:nth-child(2){
    flex:0 0 auto;
    padding-left: 3rem;
  }
  .calculator #calculator .content #loan-container{
    margin-top: 7.8rem;
    padding: 4.8rem 1.5rem;
  }
  .calculator #calculator .content #loan-container p{
    font-size: 1.8rem;
  }
  .calculator #calculator .content #loan-container #result-number{
    font-size: 3.2rem;
  }
}
@media (min-width: 875px) {
  #period-radio.group4 .line-break.nth5n,
  #period-radio.group3 .line-break.nth3n{
    display: none;
  }
  #period-radio.group3 li,
  #period-radio.group4 li{
    width: auto;
  }
}
@media (min-width: 950px) {
  #period-radio{
    justify-content: space-around;
  }
}
.select-headline{
  margin-top:3rem;
}
.select-headline:after{
  content: '';
  display: block;
  clear: both;
}
.calculator #calculator .content #month-select-container p{
  display: inline-block;
  width: auto;
}
.select-headline > p:first-child{
  float: left;
}
.select-headline > p:nth-child(2){
  float: right;
}
html[lang=en] .enBreak{
  display:none;
}
@media (max-width: 512.98px) {
  html[lang=zh-Hant] .quote{
    margin-left: -0.5rem;
    white-space: nowrap;
  }
  html[lang=en] .enBreak{
    display: block;
  }
}

.calculator .placeholder{
  display: inline-block;
}
.calculator .placeholder select{
  background: none;
  border: none;
  outline: none;
  margin-top: -0.5rem;
  padding: 0.5rem;
  cursor: pointer;
  text-align-last: center;
}
.calculator .placeholder option{
  color: #0D144D;
}
.calculator .grid{
  display: flex;
}
.calculator .grid .item:first-child{
  flex: 1;
}

/* slider */
.rangeslider{
  margin-top: 1.5rem;
}
.rangeslider__labels{
  margin-top: 1rem;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
#month-select-container .rangeslider__labels{
  width: calc(100% - 2rem);
}
.rangeslider__labels__label{
  color: #FFFFFF;
  text-decoration: none;
}
#month-select-container .rangeslider__labels__label{
  transform: translateX(50%);
  width: 2rem;
}
#month-select-container .rangeslider__labels__label:first-child{
  transform: translateX(75%);
}
.calculator .rangeslider__fill{
  background-color: #FA475C;
  background: linear-gradient(270deg, #FA475C 2.31%, #FF7B5F 100%);
}
.calculator .rangeslider__labels__label[data-val="20"],
.calculator .rangeslider__labels__label[data-val="40"],
.calculator .rangeslider__labels__label[data-val="60"],
.calculator .rangeslider__labels__label[data-val="80"]{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.calculator output.period_val{
  position: absolute;
  top: 3rem;
  right: 5rem;
}
html[lang=en] .calculator output.period_val{
  right: 8rem;
}
#range-amount{
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  #range-slider-container .rangeslider__labels__label[data-val="600000"]{
    transform: translateX(0.7rem);
  }
}