@charset "utf-8";
/* CSS Document */
body {
    margin: 0px;
    padding: 0px;
    font-family: Ubuntu,'Heiti TC','microsoft jhenghei';
    -webkit-text-size-adjust: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    min-height: 100vh;
    position: relative;
}

.bg-content {
    position: fixed;
    width: 50%;
    height: 100vh;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: auto;
    background: #0c2751;
    z-index: 0;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}

    .bg-content .logo {
        width: 60%;
        font-size: 0px;
        line-height: 0px;
    }

* {
    font-family: Ubuntu,'Heiti TC','microsoft jhenghei';
}

img {
    max-width: 100%;
    width: 100%\0;
    height: auto;
}

a {
    font-size: inherit;
    cursor: pointer;
    color: inherit;
    line-height: inherit;
    text-decoration: none;
    transition: all ease .5s;
}

input[type="text"], input[type="password"], textarea, button {
    font-family: Ubuntu,'Heiti TC','microsoft jhenghei';
    -webkit-appearance: none;
    font-size: 1rem;
    outline: none;
}

select {
    font-family: Ubuntu,'Heiti TC','microsoft jhenghei';
    font-size: 1rem;
}

a:hover {
    text-decoration: underline;
}

section {
    display: block;
    clear: both;
}

header {
    position: relative;
    z-index: 1;
    padding: 10px 5% 10px 15%;
}

.header {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}

    .header .logo {
        width: 50%;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

        .header .logo .pic {
            display: inline-block;
            width: 150px;
            line-height: 0px;
            font-size: 0px;
        }

        .header .logo .text {
            display: inline-block;
            font-size: 1rem;
            color: #0c2751;
            padding: 0px 0px 0px 5px;
        }

    .header .Country {
        display: table-cell;
        text-align: right;
        vertical-align: middle;
    }

        .header .Country .Title {
            color: #FFFFFF;
            font-size: .85rem;
            letter-spacing: -0.03em;
            display: inline-block;
            vertical-align: middle;
            font-weight: 400;
        }

        .header .Country .Content {
            color: #0c2751;
            font-size: 1rem;
            letter-spacing: -0.03em;
            display: inline-block;
            vertical-align: middle;
        }

            .header .Country .Content .ChooseLanguage {
                border: none;
                background: rgba(255,255,255,.85);
                border-radius: 100px;
                padding: 5px 5px 5px 20px;
                color: #0c2751;
                font-size: .85rem;
                line-height: 100%;
            }

.container {
    position: relative;
    z-index: 1;
    margin: 0px 15%;
    padding: 0px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    min-height: calc( 100vh - 107px - 73px );
}

    .container .signin-container {
        display: table-cell;
        text-align: left;
        vertical-align: middle;
        padding: 0px;
    }

        .container .signin-container .title {
            color: #000000;
            font-size: 1.25rem;
        }

            .container .signin-container .title:before {
                content: "";
                display: inline-block;
                vertical-align: middle;
                margin: 0px 5px 0px 0px;
                background: #0c2751;
                width: 20px;
                height: 5px;
                border-radius: 10px;
            }

        .container .signin-container .content {
            margin: 20px 0px 0px 0px;
        }

            .container .signin-container .content form input {
                border-radius: 500px;
                border: 2px solid #b2b2b2;
                background-color: transparent;
                padding: 5px 10px;
                color: #808080;
                font-size: .875rem;
                margin: 5px 0px;
            }

            .container .signin-container .content form .warning-text {
                color: #d52b1e;
                font-size: .7rem;
                line-height: 150%;
                margin: 5px 10px;
            }

                .container .signin-container .content form .warning-text.field-validation-valid {
                    display: none;
                }

                .container .signin-container .content form .warning-text.field-validation-valid-error {
                    display: block;
                }

            .container .signin-container .content .btn {
                cursor: pointer;
                background-color: #0c2751;
                font-size: .875rem;
                color: #FFFFFF;
                letter-spacing: 0px;
                text-align: center;
                padding: 10px 0px;
                border-radius: 500px;
                width: 100%;
                border: none;
                margin: 5px 0px 0px 0px;
            }

            .container .signin-container .content form input::placeholder {
                color: #d9d9d9;
            }

            .container .signin-container .content form .fa-icon {
                font-family: 'FontAwesome';
            }

footer {
    position: absolute;
    width: 70%;
    padding: 10px 15%;
    bottom: 0px;
    left: 0px;
}

    footer .footer {
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: flex-start;
    }

        footer .footer .icon {
            margin: 0px;
            font-size: 0px;
            line-height: 0px;
        }

            footer .footer .icon a {
                display: inline-block;
            }

                footer .footer .icon a img {
                    width: 40px;
                }

        footer .footer .content {
            margin: 0px 0px 0px 10px;
            font-size: 12px;
            color: #000000;
            line-height: 120%;
            letter-spacing: .25px;
        }

        footer .footer ul {
            margin: 0px;
            padding: 0px;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            align-content: center;
            justify-content: flex-start;
            width: 100%;
        }

            footer .footer ul li {
                display: flex;
                align-content: center;
                align-items: center;
                justify-content: flex-start;
                margin: 0px;
            }

                footer .footer ul li:after {
                    display: block;
                    content: "";
                    width: 1px;
                    height: 8px;
                    background: #0085ca;
                    margin: 0px 5px;
                }

                footer .footer ul li:last-child:after {
                    display: none;
                }

                footer .footer ul li a {
                    color: #0085ca;
                    text-decoration: underline;
                }

                footer .footer ul li ch {
                    display: block;
                }

                footer .footer ul li en {
                    font-size: 12px;
                }

        footer .footer .copyrights {
            margin: 5px 0px 0px 0px;
        }

@media screen and ( max-width:600px ) {

    .bg-content {
        width: 100%;
    }

        .bg-content .logo {
            display: none;
        }

    header {
        padding: 20px;
    }

    .header .logo {
        margin: 0px 0px 0px 0px;
        align-items: flex-end;
        width: 100%;
    }

        .header .logo .pic {
            width: 120px;
        }

            .header .logo .pic img {
                filter: invert(1);
            }

        .header .logo .text {
            color: #ffffff;
            font-size: .85rem;
            line-height: 100%;
            margin: 0px 0px 1% 0px;
            font-weight: 300;
        }

    .header .Country {
        margin: 15px 0px 0px 0px;
        display: block;
        text-align: center;
    }

        .header .Country .Title {
            display: none;
        }

    .container {
        margin: 0px 10px;
        justify-content: center;
        min-height: calc( 100vh - 200px );
    }

        .container .signin-container {
            vertical-align: top;
            padding: 40px 10px 0px 10px;
            width: calc( 100% - 20px);
        }

            .container .signin-container .content form input {
                width: calc( 100% - 24px );
                background-color: #F0F0F0;
            }

            .container .signin-container .title {
                color: #ffffff;
            }

                .container .signin-container .title:before {
                    background: #ffffff;
                    width: 30px;
                    height: 8px;
                    margin: 0px 5px;
                }

            .container .signin-container .content .btn {
                background: #ffffff;
                color: #0c2751;
                margin: 20px 0px 0px 0px;
                font-size: 1rem;
                font-weight: 600;
            }

            .container .signin-container .content form .warning-text {
                color: #cbcdff;
            }

    footer {
        padding: 10px;
        width: calc( 100% - 20px );
        background: rgba(255,255,255, .65);
        backdrop-filter: blur(3px)brightness(1)invert(70%);
    }

        footer .footer ul {
            display: block;
            text-align: left;
        }

            footer .footer ul li.icon {
                display: inline-block;
                width: 40px;
                border-radius: 500px;
                padding: 0px;
                margin: 0px 10px 20px 0px;
                background-color: #F0F0F0;
                line-height: 0px;
            }

            footer .footer ul li en {
                text-shadow: 2px 2px 2px #f0f0f0,-2px -2px 2px #f0f0f0,0px 0px 2px #f0f0f0,0px 0px 2px #f0f0f0,0px 0px 2px #f0f0f0;
            }
}