@charset "UTF-8";

/* *************************************
//
//   KGIB-Component -- calculator
//   -> 凱基銀行 - 試算元件
//
//
//   01.
//   02.
//   03.
//
//
// ************************************/
/* -------------------------------------
//   0.Global
// -----------------------------------*/
/* -------------------------------------
//   02.kgib-loan-cal元件
// -----------------------------------*/
.kgib-loan-cal.py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.kgib-loan-cal.py-4 {
    padding-top: 4px;
    padding-bottom: 4px;
}

.kgib-loan-cal.py-8 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.kgib-loan-cal.py-12 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.kgib-loan-cal.py-16 {
    padding-top: 16px;
    padding-bottom: 16px;
}

.kgib-loan-cal.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.kgib-loan-cal.py-24 {
    padding-top: 24px;
    padding-bottom: 24px;
}

.kgib-loan-cal.py-28 {
    padding-top: 28px;
    padding-bottom: 28px;
}

.kgib-loan-cal.py-32 {
    padding-top: 32px;
    padding-bottom: 32px;
}

.kgib-loan-cal.py-36 {
    padding-top: 36px;
    padding-bottom: 36px;
}

.kgib-loan-cal.py-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.kgib-loan-cal.py-42 {
    padding-top: 42px;
    padding-bottom: 42px;
}

.kgib-loan-cal.py-44 {
    padding-top: 44px;
    padding-bottom: 44px;
}

.kgib-loan-cal.py-48 {
    padding-top: 48px;
    padding-bottom: 48px;
}

.kgib-loan-cal.py-52 {
    padding-top: 52px;
    padding-bottom: 52px;
}

.kgib-loan-cal.py-56 {
    padding-top: 56px;
    padding-bottom: 56px;
}

.kgib-loan-cal.py-60 {
    padding-top: 60px;
    padding-bottom: 60px;
}

.kgib-loan-cal.py-64 {
    padding-top: 64px;
    padding-bottom: 64px;
}

.kgib-loan-cal.py-66 {
    padding-top: 66px;
    padding-bottom: 66px;
}

.kgib-loan-cal.py-68 {
    padding-top: 68px;
    padding-bottom: 68px;
}

.kgib-loan-cal.py-72 {
    padding-top: 72px;
    padding-bottom: 72px;
}

.kgib-loan-cal.py-76 {
    padding-top: 76px;
    padding-bottom: 76px;
}

.kgib-loan-cal.py-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.kgib-loan-cal.py-84 {
    padding-top: 84px;
    padding-bottom: 84px;
}

.kgib-loan-cal.py-88 {
    padding-top: 88px;
    padding-bottom: 88px;
}

.kgib-loan-cal.py-92 {
    padding-top: 92px;
    padding-bottom: 92px;
}

.kgib-loan-cal.py-96 {
    padding-top: 96px;
    padding-bottom: 96px;
}

.kgib-loan-cal.py-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.kgib-loan-cal.py-106 {
    padding-top: 106px;
    padding-bottom: 106px;
}

.kgib-loan-cal.py-108 {
    padding-top: 108px;
    padding-bottom: 108px;
}

.kgib-loan-cal.py-112 {
    padding-top: 112px;
    padding-bottom: 112px;
}

.kgib-loan-cal.py-116 {
    padding-top: 116px;
    padding-bottom: 116px;
}

.kgib-loan-cal.py-120 {
    padding-top: 120px;
    padding-bottom: 120px;
}

.kgib-loan-cal.py-136 {
    padding-top: 136px;
    padding-bottom: 136px;
}

.kgib-loan-cal.py-143 {
    padding-top: 143px;
    padding-bottom: 143px;
}

.kgib-loan-cal.py-152 {
    padding-top: 152px;
    padding-bottom: 152px;
}

.kgib-loan-cal.py-160 {
    padding-top: 160px;
    padding-bottom: 160px;
}

.kgib-loan-cal .btn-secondary::after {
    display: none;
}

.kgib-loan-cal .popup-link-block .btn-secondary {
    font-size: 18px;
}

.kgib-loan-cal .popup-link-block .btn-secondary--underline {
    padding-bottom: 3px;
    border-bottom: 1px solid #04327a;
}

.kgib-loan-cal .hidden {
    visibility: hidden;
}

.kgib-loan-cal .kgibCus001 .slider-columns-tab input[name^=slider-columns-tab] {
    display: none;
}

    .kgib-loan-cal .kgibCus001 .slider-columns-tab input[name^=slider-columns-tab]:checked + label {
        color: #04327a;
        background-color: #f0f4f7;
    }

@media (max-width: 374px) {
    .kgib-loan-cal .col-xs-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
}

/* -------------------------------------
//   04.Button
// -----------------------------------*/
.zh-hant .kgib-cal-info .btn--group .btn {
    padding: 10px 16px;
}

@media (max-width: 1200px) {
    .kgib-cal-info .btn--fullwidth {
        width: 100%;
        padding: 10px 16px;
        word-break: break-word !important;
        height: auto !important;
        min-height: 49px;
        text-align: center;
        width: 100%;
    }

        .kgib-cal-info .btn--fullwidth span {
            display: inline-block;
            text-align: left;
        }
}

.kgib-cal-info .btn--fixed {
    width: 162px;
    padding: 10px 16px;
    word-break: break-word !important;
    height: auto !important;
    min-height: 49px;
    text-align: center;
    align-self: flex-start;
    flex-shrink: 0;
}

    .kgib-cal-info .btn--fixed span {
        display: inline-block;
        text-align: left;
    }

.kgib-cal-info .btn-lg--fixed {
    display: block !important;
}

@media (min-width: 1200px) {
    .kgib-cal-info .btn-lg--fixed {
        width: 162px;
        padding: 10px 16px;
        word-break: break-word !important;
        height: auto !important;
        min-height: 49px;
        text-align: center;
    }

        .kgib-cal-info .btn-lg--fixed span {
            display: inline-block;
            text-align: left;
        }
}

@media (min-width: 1200px) {
    .kgib-cal-info .btn-lg--group-column {
        display: flex;
        flex-direction: column;
    }

        .kgib-cal-info .btn-lg--group-column .btn + .btn {
            margin-top: 20px;
        }
}

@media (max-width: 1199.98px) {
    .kgib-cal-info .btn-lg--group-column {
        margin-bottom: auto;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
    }

        .kgib-cal-info .btn-lg--group-column .btn + .btn {
            margin-left: 20px;
        }

        .kgib-cal-info .btn-lg--group-column .btn-fixed {
            flex-shrink: 0;
        }
}

@media (max-width: 1199.98px) {
    .kgib-cal-info .btn--group-floating {
        position: fixed;
        background-color: white;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
        padding: 20px 6%;
        bottom: 0;
        left: 0;
        z-index: 2;
    }
}

@media (max-width: 767.98px) {
    .kgib-cal-info .btn--group-floating--bottom-up {
        bottom: 65px;
    }
}

.kgib-cal-info .btn--group .btn {
    display: inline-flex;
    flex-grow: 0;
    flex-direction: row;
    justify-content: center;
    vertical-align: middle;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.5;
    text-decoration: none;
    padding: 10px 16px;
    height: 49px;
    word-break: keep-all;
    border: 1px solid transparent;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.kgib-cal-info .btn--group-flex {
    display: flex;
}

    .kgib-cal-info .btn--group-flex .btn + .btn {
        margin-left: 20px;
    }

@media (max-width: 1199.98px) {
    .kgib-cal-info .btn--group-flex {
        justify-content: center;
        align-items: flex-start;
    }
}

.kgib-cal-info .btn--group-column {
    display: flex;
    flex-direction: column;
}

    .kgib-cal-info .btn--group-column .btn-fixed {
        flex-shrink: 0;
    }

    .kgib-cal-info .btn--group-column .btn + .btn {
        margin-top: 20px;
    }

@media (max-width: 1199.98px) {
    .kgib-cal-info .btn--group-column {
        width: 100%;
    }

        .kgib-cal-info .btn--group-column .btn-lg--fixed {
            width: 100%;
            word-break: break-word !important;
            height: auto !important;
            min-height: 49px;
            text-align: center;
            width: 100%;
        }

            .kgib-cal-info .btn--group-column .btn-lg--fixed span {
                display: inline-block;
                text-align: left;
            }
}

.kgib-cal-info .btn--group .btn--primary,
.kgib-cal-info .btn--group .btn--primary:focus {
    color: white;
    background-color: #04327a;
    border-color: #04327a;
    border-radius: 0;
    padding: 10px 16px;
}

    .kgib-cal-info .btn--group .btn--primary:hover {
        background-color: #041C43;
        border-color: #041C43;
    }

@media (max-width: 1024px) {
    .kgib-cal-info .btn--group .btn--primary:hover {
        background-color: #04327a;
        border-color: #04327a;
    }
}

.kgib-cal-info .btn--group .btn--outline-primary,
.kgib-cal-info .btn--group .btn--outline-primary:focus {
    color: #04327a;
    border-color: #04327a;
    background-color: transparent;
    border-radius: 0;
}

    .kgib-cal-info .btn--group .btn--outline-primary:hover {
        color: #fff;
        background-color: #04327a;
        border-color: #04327a;
    }

@media (max-width: 1024px) {
    .kgib-cal-info .btn--group .btn--outline-primary:hover {
        color: #04327a;
        border-color: #04327a;
        background-color: transparent;
    }
}

.kgib-cal-info .btn--group .btn--orange,
.kgib-cal-info .btn--group .btn--orange:focus {
    color: white;
    background-color: #FF623E;
    border-color: #FF623E;
}

    .kgib-cal-info .btn--group .btn--orange:hover {
        background-color: #F7972E;
        border-color: #F7972E;
    }

@media (max-width: 1024px) {
    .kgib-cal-info .btn--group .btn--orange:hover {
        background-color: #FF623E;
        border-color: #FF623E;
    }
}

.kgib-cal-info .btn--group .btn--white,
.kgib-cal-info .btn--group .btn--white:focus {
    background-color: white;
    color: #04327a;
    font-weight: 500;
    font-size: 1.125em;
    line-height: 1.5;
    letter-spacing: 0.12em;
    border-color: #04327a;
}

    .kgib-cal-info .btn--group .btn--white:hover {
        background-color: #04327a;
        border-color: #04327a;
        color: white;
        border-radius: 0;
    }

@media (max-width: 1024px) {
    .kgib-cal-info .btn--group .btn--white:hover {
        background-color: white;
        color: #04327a;
        border-color: #04327a;
    }
}

.kgib-cal-info .btn--group .btn--light-blue,
.kgib-cal-info .btn--group .btn--light-blue:focus {
    color: #041C43;
    background-color: #FFFFFF;
    border-color: #041C43;
}

    .kgib-cal-info .btn--group .btn--light-blue:hover {
        background-color: #EBF7FE;
        border-color: #041C43;
        color: #041C43;
        border-radius: 0;
    }

@media (max-width: 1024px) {
    .kgib-cal-info .btn--group .btn--light-blue:hover {
        color: #041C43;
        background-color: #FFFFFF;
        border-color: #041C43;
    }
}

.kgib-cal-info .btn--group .btn--orange,
.kgib-cal-info .btn--group .btn--orange:focus {
    color: white;
    background-color: #FF623E;
    border-color: #FF623E;
}

    .kgib-cal-info .btn--group .btn--orange:hover {
        background-color: #F7972E;
        border-color: #F7972E;
        color: white;
        border-radius: 0;
    }

@media (max-width: 1024px) {
    .kgib-cal-info .btn--group .btn--orange:hover {
        color: white;
        background-color: #FF623E;
        border-color: #FF623E;
    }
}

.kgib-cal-info .btn--group .btn--transparent-white,
.kgib-cal-info .btn--group .btn--transparent-white:focus {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

    .kgib-cal-info .btn--group .btn--transparent-white:hover {
        background-color: rgba(243, 244, 245, 0.6);
        border-color: #fff;
        color: #041C43;
        border-radius: 0;
    }

@media (max-width: 1024px) {
    .kgib-cal-info .btn--group .btn--transparent-white:hover {
        color: #fff;
        background-color: transparent;
        border-color: #fff;
    }
}

.kgib-cal-info .btn--white,
.kgib-cal-info .btn--white:focus {
    background-color: white;
    color: #04327a;
    font-weight: 500;
    font-size: 1.125em;
    line-height: 1.5;
    letter-spacing: 0.12em;
    border-color: #04327a;
}

    .kgib-cal-info .btn--white:hover {
        background-color: #04327a;
        border-color: #04327a;
        color: white;
        border-radius: 0;
    }

@media (max-width: 1024px) {
    .kgib-cal-info .btn--white:hover {
        background-color: white;
        color: #04327a;
        border-color: #04327a;
    }
}

.kgib-cal-info .btn--light-blue,
.kgib-cal-info .btn--light-blue:focus {
    color: #041C43;
    background-color: #FFFFFF;
    border-color: #041C43;
}

    .kgib-cal-info .btn--light-blue:hover {
        background-color: #EBF7FE;
        border-color: #041C43;
        color: #041C43;
        border-radius: 0;
    }

@media (max-width: 1024px) {
    .kgib-cal-info .btn--light-blue:hover {
        color: #041C43;
        background-color: #FFFFFF;
        border-color: #041C43;
    }
}

.kgib-cal-info .btn--orange,
.kgib-cal-info .btn--orange:focus {
    color: white;
    background-color: #FF623E;
    border-color: #FF623E;
}

    .kgib-cal-info .btn--orange:hover {
        background-color: #F7972E;
        border-color: #F7972E;
        color: white;
        border-radius: 0;
    }

@media (max-width: 1024px) {
    .kgib-cal-info .btn--orange:hover {
        color: white;
        background-color: #FF623E;
        border-color: #FF623E;
    }
}

.kgib-cal-info .btn--transparent-white,
.kgib-cal-info .btn--transparent-white:focus {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

    .kgib-cal-info .btn--transparent-white:hover {
        background-color: rgba(243, 244, 245, 0.6);
        border-color: #fff;
        color: #041C43;
        border-radius: 0;
    }

@media (max-width: 1024px) {
    .kgib-cal-info .btn--transparent-white:hover {
        color: #fff;
        background-color: transparent;
        border-color: #fff;
    }
}

.kgib-cal-info .fw-medium {
    font-weight: 500;
    line-height: 160%;
}

@media (min-width: 1200px) {
    .kgib-cal-info .fw-lg-medium {
        font-weight: 500;
        line-height: 160%;
    }
}

.kgib-cal-info.kgibCus009 .btn-currency-exchange {
    padding: 12px 28px;
}

.kgib-cal-info .btn-sm {
    height: 46px;
}

.kgib-cal-info .dropdown .btn-sm {
    height: 46px;
}

.kgib-cal-info .form-control {
    height: 46px;
    color: #041C43;
    font-size: 18px;
}

.kgib-cal-info .dropdown .dropdownToggle {
    color: #041C43;
    font-size: 18px;
}

    .kgib-cal-info .dropdown .dropdownToggle:hover {
        color: white;
    }

.kgib-cal-info .dropdown-menu {
    font-size: 18px;
}

.kgib-cal-info .kgibCus006__unit.h5 {
    line-height: 110%;
    font-size: 18px;
}

.kgib-cal-info .kgibCus006__unit {
    font-size: 18px;
    top: 10px;
}

.kgib-cal-info.kgibCus001 .input__unit {
    right: 12px;
}

.kgib-cal-info .form-control.form-control-box {
    font-weight: bold;
    padding: 0 12px;
}

.kgib-cal-info.kgibCus001 .slider-text {
    width: 150px;
}

@media (max-width: 1199.98px) {
    .kgib-cal-info.kgibCus001 .slider-text {
        width: 118px;
        flex-shrink: 0;
    }

        .kgib-cal-info.kgibCus001 .slider-text.w-140 {
            width: 140px;
        }
}

@media (min-width: 320px) and (max-width: 420px) {
    .kgib-cal-info.kgibCus001 .slider-text {
        width: 130px;
    }
}

.kgib-cal-info .fs-14 {
    font-size: 0.875rem;
}

.kgib-cal-info .fs-16 {
    font-size: 1rem;
}

.kgib-cal-info .fs-18 {
    font-size: 1.125rem;
}

.kgib-cal-info .fs-20 {
    font-size: 1.25rem;
}

.kgib-cal-info .fs-24 {
    font-size: 1.5rem;
}

.kgib-cal-info .fs-32 {
    font-size: 2rem;
}

.kgib-cal-info .my-6 {
    margin-top: 6px;
    margin-bottom: 6px;
}

@media (max-width: 1199.98px) {
    .kgib-cal-info .fs-lg-24 {
        font-size: 1.125rem;
    }
}

@media (min-width: 1200px) {
    .kgib-cal-info .fs-lg-24 {
        font-size: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .kgib-cal-info .fs-lg-18 {
        font-size: 1.125rem;
    }
}

.kgib-cal-info .my-n6 {
    margin-top: -6px;
    margin-bottom: -6px;
}

.kgib-cal-info .text-nowrap {
    white-space: nowrap;
}

@media (min-width: 420px) {
    .kgib-cal-info .text-sm-nowrap {
        white-space: nowrap;
    }
}

.kgib-cal-info.kgibCus001 .slider-text input {
    font-weight: bold;
}

.kgib-cal-info .currency-zh-name,
.kgib-cal-info .currency-en-name {
    font-size: 18px !important;
    font-weight: normal;
}

.kgib-cal-info.kgibCus009 .dropdown__currency .currency-en-name {
    font-size: 18px !important;
}

/*# sourceMappingURL=style-calculator.css.map */