@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap
}
.ck-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9990;display:flex;align-items:flex-end;justify-content:center;padding:0 0 32px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.ck-overlay.show{opacity:1;visibility:visible}
.ck-box{background:#fff;max-width:680px;width:calc(100% - 32px);padding:36px 36px 28px;box-shadow:0 24px 64px rgba(0,0,0,.18);transform:translateY(20px);transition:transform .3s}
.ck-overlay.show .ck-box{transform:translateY(0)}
.ck-box h2 {
    /*font-family: "Oswald",sans-serif;*/
    font-family: "Metropolis","Noto Sans TC", sans-serif;
    font-size: 20px;
    letter-spacing: .08em;
    font-weight: 600;
    color: #0f0f12;
    margin-bottom: 10px
}
.ck-box p{font-size:13.5px;color:#555;line-height:1.8;margin-bottom:0}
.ck-box p a{color:var(--accent,#c00);text-decoration:underline}
.ck-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
    .ck-btns button {
        padding: 11px 24px;
        /*font-family: "Oswald",sans-serif;*/
        font-family: "Metropolis","Noto Sans TC", sans-serif;
        font-size: 13px;
        letter-spacing: .12em;
        font-weight: 600;
        border: 1.5px solid #0f0f12;
        cursor: pointer;
        transition: all .25s
    }
.ck-btn-accept{background:#0f0f12;color:#fff}
.ck-btn-accept:hover{background:var(--accent,#c00);border-color:var(--accent,#c00)}
.ck-btn-basic{background:transparent;color:#0f0f12}
.ck-btn-basic:hover{background:#f4f2ee}
.ck-pref-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9995;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.ck-pref-overlay.show{opacity:1;visibility:visible}
.ck-pref-box{background:#fff;max-width:560px;width:100%;max-height:85vh;overflow-y:auto;padding:36px}
    .ck-pref-box h2 {
        font-family: "Oswald",sans-serif;
        font-family: "Metropolis","Noto Sans TC", sans-serif;
        font-size: 20px;
        letter-spacing: .08em;
        font-weight: 600;
        margin-bottom: 12px
    }
.ck-pref-box .ck-cat{border-top:1px solid #eee;padding:18px 0 8px}
.ck-pref-box .ck-cat h3{font-size:14px;font-weight:700;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.ck-pref-box .ck-cat p{font-size:13px;color:#666;line-height:1.7;margin-bottom:8px}
.ck-toggle{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.ck-toggle input{opacity:0;width:0;height:0}
.ck-slider{position:absolute;inset:0;background:#ccc;border-radius:24px;transition:.3s;cursor:pointer}
.ck-slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
input:checked+.ck-slider{background:var(--accent,#c00)}
input:checked+.ck-slider:before{transform:translateX(18px)}
input:disabled+.ck-slider{opacity:.6;cursor:not-allowed}
@media(max-width:560px){.ck-box{padding:28px 20px 22px}.ck-btns{flex-direction:column}.ck-btns button{width:100%}}