@charset "UTF-8";
/* *************************************
//
//   KGIB-Component -- cookie-banner
//   -> 凱基銀行 - cookie-banner
//
//   00.Global
//   01.cookie-banner
//   02.Button
//   03.BackgroundColor
//
//
// ************************************/
/* -------------------------------------
//   0.Global
// -----------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap");
/* -------------------------------------
//   01.cookie-banner
// -----------------------------------*/
.cookie-wrapperBox {
    width: 100%;
    background-color: #ffffff;
}

.kgib-cookie-container {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1041;
}

    .kgib-cookie-container.is-docked {
        position: relative;
        transition: all 0.5s ease;
        z-index: 1041;
    }

.kgib-cookie-containerBox {
    min-height: 91px;
    background-color: #ffffff;
}

@media (max-width: 1199.98px) {
    .kgib-cookie-containerBox {
        min-height: 100px;
    }
}

@media (max-width: 767px) {
    .kgib-cookie-containerBox {
        min-height: 218px;
    }
}

.kgib-cookie-wrapper {
    align-items: center;
    display: flex;
    justify-content: center;
    height: auto;
}

@media (max-width: 767.98px) {
    .kgib-cookie-wrapper-fixed {
        min-height: 220px;
        align-items: start;
    }
}

/* 連結字顏色 */
.text--primary {
    color: #04327a;
}

    .text--primary:hover {
        color: #041c43;
    }

.kgib-cookie-wrapper .container {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .kgib-cookie-wrapper .container {
        padding-left: 2%;
        padding-right: 2%;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .kgib-cookie-wrapper .container {
        padding-left: 4%;
        padding-right: 4%;
    }
}

@media (min-width: 1200px) {
    .kgib-cookie-wrapper .container {
        padding-left: 2%;
        padding-right: 2%;
        max-width: 1174px;
    }
}

@media (min-width: 1366px) {
    .kgib-cookie-wrapper .container {
        padding-left: 96px;
        padding-right: 96px;
        max-width: 1366px;
    }
}

.kgib-cookie-banner {
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    line-height: 1.6;
}

    .kgib-cookie-banner .cookie-content {
        height: auto;
        display: flex;
        align-self: stretch;
        flex-grow: 1;
    }

    .kgib-cookie-banner span {
        text-align: left;
    }

    .kgib-cookie-banner .cookie-text {
        height: 100%;
    }

.kgib-cookie-banner {
    /* icon：桌機要跟整段文字同高 */
}

    .kgib-cookie-banner .cookie-icon {
        flex-shrink: 0;
        height: 0;
        margin-right: 1rem;
        width: auto;
        -o-object-fit: contain;
        object-fit: contain;
    }

@media (min-width: 1199.98px) {
    .kgib-cookie-banner .cookie-icon {
        min-height: 100%;
    }
}

.kgib-cookie-banner {
    /* 按鈕區：桌機在右側 */
}

    .kgib-cookie-banner .btn-wapper {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        margin-left: 1.5rem;
        gap: 1rem;
    }

.kgib-cookie-banner {
    /*手機版 */
}

@media (max-width: 1199.98px) {
    .kgib-cookie-banner {
        font-size: 0.75rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        position: relative;
    }

        .kgib-cookie-banner .cookie-icon {
            position: absolute;
            top: 0.15em;
            height: 1.5em;
            width: auto;
            margin-right: 0;
        }

    .kgib-cookie-banner {
        /* 只有有 icon（img 存在）時才縮排第一行 */
    }

        .kgib-cookie-banner .cookie-icon + .cookie-text {
            text-indent: calc(1.5em + 0.5rem); /* icon 寬 + 間距 */
        }

        .kgib-cookie-banner .btn-wapper {
            margin-left: 0;
            justify-content: center;
        }
}

/* -------------------------------------
//   02.Button
// -----------------------------------*/
.zh-hant .kgib-cookie-banner .btn {
    padding: 10px 16px;
    border-width: 1px;
}

@media (max-width: 1199.98px) {
    .zh-hant .kgib-cookie-banner .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 767px) {
    .zh-hant .kgib-cookie-banner .btn {
        max-height: 29px !important;
    }
}

.kgib-cookie-banner .btn {
    width: 100%;
    margin-left: auto;
    display: inline-flex;
    flex-grow: 0;
    flex-direction: row;
    justify-content: center;
    vertical-align: middle;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.5;
    text-decoration: none;
    padding: 10px 12px;
    max-height: 41px;
    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;
}

@media (max-width: 1199.98px) {
    .kgib-cookie-banner .btn {
        padding: 10px 12px;
        font-size: 0.875rem;
    }
}

@media (max-width: 767.98px) {
    .kgib-cookie-banner .btn {
        max-height: 29px !important;
    }
}

.kgib-cookie-banner .btn--fixed {
    width: 142px;
    padding: 10px 16px;
    word-break: break-word !important;
    height: auto !important;
    min-height: 41px;
    text-align: center;
    align-self: flex-start;
    flex-shrink: 0;
}

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

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

    .kgib-cookie-banner .btn--primary:hover {
        background-color: #041c43;
        border-color: #041c43;
    }

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

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

    .kgib-cookie-banner .btn--outline-primary:hover {
        color: #fff;
        background-color: #04327a;
        border-color: #04327a;
    }

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

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

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

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

.kgib-cookie-banner .btn--light-blue,
.kgib-cookie-banner .btn--light-blue:focus {
    color: #041c43;
    background-color: #ffffff;
    border-color: #041c43;
}

    .kgib-cookie-banner .btn--light-blue:hover {
        background-color: #ebf7fe;
        border-color: #041c43;
        color: #041c43;
        border-radius: 0;
    }

@media (max-width: 1024px) {
    .kgib-cookie-banner .btn--light-blue:hover {
        color: #041c43;
        background-color: #ffffff;
        border-color: #041c43;
    }
}

.kgib-cookie-banner .btn--orange,
.kgib-cookie-banner .btn--orange:focus {
    color: white;
    background-color: #ff623e;
    border-color: #ff623e;
}

    .kgib-cookie-banner .btn--orange:hover {
        background-color: #f7972e;
        border-color: #f7972e;
        color: white;
        border-radius: 0;
    }

@media (max-width: 1024px) {
    .kgib-cookie-banner .btn--orange:hover {
        color: white;
        background-color: #ff623e;
        border-color: #ff623e;
    }
}

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

    .kgib-cookie-banner .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-cookie-banner .btn--transparent-white:hover {
        color: #fff;
        background-color: transparent;
        border-color: #fff;
    }
}

.kgib-cookie-banner .btn-secondary {
    font-size: 1em;
}

/* -------------------------------------
//   03.BackgroundColor
// -----------------------------------*/
.bg {
    background-color: rgba(var(--bg-rgb, 0, 0, 0), var(--bg-alpha, 1));
}

.bg-white {
    --bg-rgb: 255, 255, 255;
}

.bg-green {
    --bg-rgb: 104, 200, 158;
}

.bg-IceBlue {
    --bg-rgb: 242, 246, 255;
}

.bg-CreamWhite {
    --bg-rgb: 254, 248, 241;
}

.bg-GrayWhite {
    --bg-rgb: 246, 246, 246;
}

.bg-MintWhite {
    --bg-rgb: 243, 250, 246;
}

.bg-BeigeWhite {
    --bg-rgb: 255, 247, 225;
}

.bg-opacity-0 {
    --bg-alpha: 0;
}

.bg-opacity-5 {
    --bg-alpha: 0.05;
}

.bg-opacity-10 {
    --bg-alpha: 0.1;
}

.bg-opacity-15 {
    --bg-alpha: 0.15;
}

.bg-opacity-20 {
    --bg-alpha: 0.2;
}

.bg-opacity-25 {
    --bg-alpha: 0.25;
}

.bg-opacity-30 {
    --bg-alpha: 0.3;
}

.bg-opacity-35 {
    --bg-alpha: 0.35;
}

.bg-opacity-40 {
    --bg-alpha: 0.4;
}

.bg-opacity-45 {
    --bg-alpha: 0.45;
}

.bg-opacity-50 {
    --bg-alpha: 0.5;
}

.bg-opacity-55 {
    --bg-alpha: 0.55;
}

.bg-opacity-60 {
    --bg-alpha: 0.6;
}

.bg-opacity-65 {
    --bg-alpha: 0.65;
}

.bg-opacity-70 {
    --bg-alpha: 0.7;
}

.bg-opacity-75 {
    --bg-alpha: 0.75;
}

.bg-opacity-80 {
    --bg-alpha: 0.8;
}

.bg-opacity-87 {
    --bg-alpha: 0.87;
}

.bg-opacity-85 {
    --bg-alpha: 0.85;
}

.bg-opacity-90 {
    --bg-alpha: 0.9;
}

.bg-opacity-95 {
    --bg-alpha: 0.95;
}

.bg-opacity-100 {
    --bg-alpha: 1;
}

.kgib-cookie-container.is-embedded-mode {
    position: relative !important;
    bottom: auto !important;
}
/*# sourceMappingURL=kgib-cookie-banner.css.map */