/* ----------------------------Root---------------------------- */
:root {
    /* primary color */
    --primary-950: #0C2545;
    --primary-900: #113B69;
    --primary-800: #133F7E;
    --primary-700: #0C5098;
    --primary-600: #0D65BC;
    --primary-500: #1A82DD;
    --primary-400: #2B92EB;
    --primary-300: #84BEF5;
    --primary-200: #B3D8F9;
    --primary-100: #E2EEFC;
    --primary-50: #F1F7FE;

    /* font color */
    --white-100: rgba(255, 255, 255, 1);
    --white-80: rgba(255, 255, 255, .8);
    --white-50: rgba(255, 255, 255, .5);
    --white-20: rgba(255, 255, 255, .2);

    --black-100: rgba(0, 0, 0, 1);
    --black-80: rgba(0, 0, 0, .8);
    --black-50: rgba(0, 0, 0, .5);
    --black-40: rgba(0, 0, 0, .4);
    --black-20: rgba(0, 0, 0, .2);

    /* 灰階 */
    --gray-BG: hsl(210, 17%, 98%);
    --gray-light: hsl(210, 17%, 80%);
    --gray-mid: hsl(210, 17%, 45%);
    --gray-dark:  hsl(210, 17%, 30%);
    --gray-black: hsl(210, 17%, 20%);
    --gray-exblack: hsl(180, 20%, 10%);

    /* 陰影 */
    --layer-1: 0px 1px 2px 0px rgba(17, 59, 105, .15);
    --layer-2: 0px 2px 4px 0px rgba(17, 59, 105, .15);
    --layer-3: 0px 4px 12px 0px rgba(17, 59, 105, .15);
    --layer-4: 0px 4px 20px 0px rgba(17, 59, 105, .15);
    --layer-5: 0px 4px 20px 0px rgba(17, 59, 105, .15);

}

/* --------------------------Gobal---------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans TC', 'Helvetica', sans-serif;
    box-sizing: border-box;
    background: var(--gray-BG);
}

.font-helvetica {
    font-family: Helvetica, sans-serif;
}

.item-layer-1 {
    box-shadow: var(--layer-1);
}
.item-layer-2 {
    box-shadow: var(--layer-2);
}

.item-layer-3 {
    box-shadow: var(--layer-3);
}

/* --------------------------Component---------------------------- */

.btn-primary__fill {
    padding: 15px 24px;
    border-radius: 50px;
    background-color: var(--primary-500);
    color: var(--white-100);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 130%;
    cursor: pointer;
}

.btn-primary__outline {
    box-sizing: border-box;
    padding: 12px 24px;
    border-radius: 50px;
    border: var(--primary-500) 1.5px solid;
    color: var(--primary-500);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 130%;
    cursor: pointer;
}