@font-face {
    font-family: Noto Sans TC;
    src: url('/fonts/EUDC.woff');
    src: url('/fonts/EUDC.woff') format('woff'), url('/fonts/EUDC.ttf') format('truetype');
}

body {
    min-width: 320px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.border-radius-2px {
    border-radius: 2px;
}

.custom-checkbox .custom-control-label::before {
    border-radius: 0.25rem;
    margin-left: 4px;
}

.border-none {
    border: 1px solid #fff;
}

.border-none:disabled, .border-none:read-only {
    border: 1px solid #E9ECEF;
}

input:disabled {
    cursor: not-allowed;
    pointer-events: all !important;
}

.clearboth {
    clear: both;
}

.custom-input {
    box-sizing: border-box;
    padding: 8px 10px;
}

.custom-placeholder::placeholder {
    color: #B9B8B9;
}

.custom-placeholder::-webkit-input-placeholder {
    color: #B9B8B9;
}

.custom-placeholder:-ms-input-placeholder {
    color: #B9B8B9;
}

.custom-placeholder::-moz-placeholder {
    color: #B9B8B9;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.form-control:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #52B24E !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #52B24E !important;
    border-color: #52B24E !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none !important;
    border-color: #52B24E !important;
}

.form-control.is-valid, .was-validated .form-control:valid,
.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: none;
    padding-right: 0.75rem !important;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: #ff5e5e;
}

div.error {
    color: #ff5e5e;
}

input.error, textarea.error, select.error {
    border: 1px solid #ff5e5e !important;
}

input.error ~ .custom-control-label::before {
    border: 1px solid #ff5e5e !important;
}

.custom-control-input.is-valid ~ .custom-control-label, .was-validated .custom-control-input:valid ~ .custom-control-label {
    color: #000;
}

    .custom-control-input.is-valid ~ .custom-control-label::before, .was-validated .custom-control-input:valid ~ .custom-control-label::before {
        border-color: #B9B8B9;
    }

.custom-control-input.is-valid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before {
    border-color: #61E1A2;
    background-color: #61E1A2;
}

.border-line {
    width: 100%;
    height: 1px;
    background: #E7E5E6;
}

.header {
    max-width: 972px;
    width: 90%;
    padding-right: 0;
    padding-left: 0;
}

.header .header-logo {
    margin: 5px 0;
}

.header-text {
    font-family: Noto Sans TC;
    font-size: 28px;
    font-weight: 700;
    line-height: 41px;
    letter-spacing: 0em;
    text-align: center;
    margin-top: 42px;
}

.body {
    margin: 50px 0;
}

.footer {
    height: 39px;
    margin-top: auto;
    border-top: 1px solid #E7E5E6;
}

    .footer .footer-text {
        display: block;
        margin: 0 auto;
        font-family: PingFang TC;
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: 0em;
        text-align: left;
        padding-top: 10px;
        width: 136px;
    }

.progressbar {
    margin: 40px 0;
    padding-left: 0;
}

    .progressbar li {
        display: block;
        float: left;
        width: 33.33333%;
        position: relative;
        text-align: center;
        color: #B9B8B9;
    }

        .progressbar li .mb-prog-section {
            display: none !important;
        }

        .progressbar li .pc-prog-section {
            display: block !important;
        }

            .progressbar li .pc-prog-section .pc-prog-ball, .progressbar li .mb-prog-section .mb-prog-ball {
                width: 30px;
                height: 30px;
                line-height: 29px;
                border: 1px solid #B9B8B9;
                border-radius: 100%;
                display: block;
                text-align: center;
                margin: 0 auto 10px auto;
                background-color: #B9B8B9;
                font-family: Noto Sans TC;
                font-size: 14px;
                font-weight: 700;
                color: #FFF;
            }

        .progressbar li .mb-prog-section .mb-prog-title {
            height: 31px;
            width: 96px;
            border-radius: 14px;
            line-height: 30px;
            border: 2px solid #ddd;
            display: block;
            text-align: center;
            margin: 0 auto 10px auto;
            background-color: #B9B8B9;
            font-family: Noto Sans TC;
            font-size: 14px;
            font-weight: 700;
            color: #61E1A2;
        }


        .progressbar li .prog-section-line {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #ddd;
            top: 15px;
            left: -50%;
            z-index: -1;
        }

        .progressbar li:first-child:after {
            content: none;
        }

        .progressbar li.active {
            color: #61E1A2;
        }

            .progressbar li.active .pc-prog-section .pc-prog-ball, .progressbar li.active .mb-prog-section .mb-prog-ball {
                border-color: #61E1A2;
                background-color: #61E1A2;
                color: #FFF;
            }

        .progressbar li.active-2 .pc-prog-section .pc-prog-ball {
            border: 2px solid #61E1A2;
            background-color: #FFF;
            color: #61E1A2;
        }

        .progressbar li.active .mb-prog-section .mb-prog-title {
            border-color: #61E1A2;
            color: #61E1A2;
            background-color: #FFF;
        }

        .progressbar li.active-3 .mb-prog-section .mb-prog-title {
            color: #FFF;
            background-color: #61E1A2;
        }

    .progressbar .prog-section-line.active {
        background-color: #61E1A2;
    }

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #61E1A2;
    background-color: #61E1A2;
}

@media (max-width: 390px) {

    .progressbar li .mb-prog-section {
        display: block !important;
    }

    .progressbar li .pc-prog-section {
        display: none !important;
    }

    /* .progressbar li {
        width: 32.4%;
    } */

}