﻿body {
    overflow: hidden;
}



.title {
    margin-top: 50px;
    text-align: center;
    font-size: 30px;
}


input[type="text"], input[type="password"] {
    width: 83%;
    padding: 0em 0em 0.5em 0em;
    color: blue;
    font-size: 15px;
    outline: none;
    background: none;
    font-weight: 500;
    border: none;
    border-bottom: 2px solid gray;
}

/**電腦**/
@media only screen and (min-width: 769px) {
    /**圖片**/
    #homeimg {
        opacity: 0.3;
        width: 100%;
    }

    .submit {
        text-align: center;
    }


        .submit input[type="submit"] {
            position: relative;
            font-size: 20px;
            font-weight: 250;
            color: #fff;
            cursor: pointer;
            outline: none;
            padding: 21px 20px;
            width: 85%;
            border-style: none;
            display: inline;
            overflow: hidden;
            border: none;
            transition: 0.1s all;
            -webkit-transition: 0.1s all;
            -moz-transition: 0.1s all;
            -o-transition: 0.1s all;
            background: #000000;
            border-bottom-right-radius: 0.44em;
            -webkit-border-bottom-right-radius: 0.4em;
            -o-border-bottom-right-radius: 0.4em;
            -moz-border-bottom-right-radius: 0.4em;
            border-bottom-left-radius: 0.4em;
            -webkit-border-bottom-left-radius: 0.4em;
            -o-border-bottom-left-radius: 0.4em;
            -moz-border-bottom-left-radius: 0.4em;
            border-top-right-radius: 0.44em;
            -webkit-border-top-right-radius: 0.4em;
            -o-border-top-right-radius: 0.4em;
            -moz-border-top-right-radius: 0.4em;
            border-top-left-radius: 0.4em;
            -webkit-border-top-left-radius: 0.4em;
            -o-border-top-left-radius: 0.4em;
            -moz-border-top-left-radius: 0.4em;
        }

            .submit input[type="submit"]:hover {
                background: #616364;
            }

    .register {
        text-align: center;
    }

        .register input[type="submit"] {
            position: relative;
            font-size: 20px;
            font-weight: 250;
            color: #000;
            cursor: pointer;
            outline: none;
            padding: 21px 20px;
            width: 85%;
            border-style: none;
            display: inline;
            overflow: hidden;
            border: 3px #43425D solid;
            transition: 0.1s all;
            -webkit-transition: 0.1s all;
            -moz-transition: 0.1s all;
            -o-transition: 0.1s all;
            background: #fff;
            border-bottom-right-radius: 0.44em;
            -webkit-border-bottom-right-radius: 0.4em;
            -o-border-bottom-right-radius: 0.4em;
            -moz-border-bottom-right-radius: 0.4em;
            border-bottom-left-radius: 0.4em;
            -webkit-border-bottom-left-radius: 0.4em;
            -o-border-bottom-left-radius: 0.4em;
            -moz-border-bottom-left-radius: 0.4em;
            border-top-right-radius: 0.44em;
            -webkit-border-top-right-radius: 0.4em;
            -o-border-top-right-radius: 0.4em;
            -moz-border-top-right-radius: 0.4em;
            border-top-left-radius: 0.4em;
            -webkit-border-top-left-radius: 0.4em;
            -o-border-top-left-radius: 0.4em;
            -moz-border-top-left-radius: 0.4em;
        }

            .register input[type="submit"]:hover {
                color: #fff;
                background: #43425D;
            }

    .login_sub {
        margin: 50px auto;
        text-align: center;
    }

        .login_sub div {
            display: inline-block;
            width: 300px;
            height: auto;
        }

    .Register_sub {
        margin: 20px auto;
        text-align: center;
    }

        .Register_sub div {
            display: inline-block;
            width: 300px;
            height: auto;
        }
}
/**平板**/
@media only screen and (min-width: 491px) and (max-width: 768px) {
    /**圖片**/
    #homeimg {
        opacity: 0.1;
        width: 100%;
    }
}
/**手機**/
@media only screen and (min-width: 0px) and (max-width: 490px) {
    /**圖片**/
    #homeimg {
        opacity: 0.1;
    }

    .submit input[type="submit"] {
        position: relative;
        font-size: 20px;
        font-weight: 250;
        color: #fff;
        cursor: pointer;
        outline: none;
        padding: 21px 20px;
        width: 50%;
        border-style: none;
        display: inline;
        overflow: hidden;
        border: none;
        transition: 0.1s all;
        -webkit-transition: 0.1s all;
        -moz-transition: 0.1s all;
        -o-transition: 0.1s all;
        background: #43425D;
        border-bottom-right-radius: 0.44em;
        -webkit-border-bottom-right-radius: 0.4em;
        -o-border-bottom-right-radius: 0.4em;
        -moz-border-bottom-right-radius: 0.4em;
        border-bottom-left-radius: 0.4em;
        -webkit-border-bottom-left-radius: 0.4em;
        -o-border-bottom-left-radius: 0.4em;
        -moz-border-bottom-left-radius: 0.4em;
        border-top-right-radius: 0.44em;
        -webkit-border-top-right-radius: 0.4em;
        -o-border-top-right-radius: 0.4em;
        -moz-border-top-right-radius: 0.4em;
        border-top-left-radius: 0.4em;
        -webkit-border-top-left-radius: 0.4em;
        -o-border-top-left-radius: 0.4em;
        -moz-border-top-left-radius: 0.4em;
    }


    .register input[type="submit"] {
        margin-bottom: 10px;
        position: relative;
        font-size: 20px;
        font-weight: 250;
        color: #000;
        cursor: pointer;
        outline: none;
        padding: 21px 20px;
        width: 50%;
        border-style: none;
        display: inline;
        overflow: hidden;
        border: 3px #43425D solid;
        transition: 0.1s all;
        -webkit-transition: 0.1s all;
        -moz-transition: 0.1s all;
        -o-transition: 0.1s all;
        background: #fff;
        border-bottom-right-radius: 0.44em;
        -webkit-border-bottom-right-radius: 0.4em;
        -o-border-bottom-right-radius: 0.4em;
        -moz-border-bottom-right-radius: 0.4em;
        border-bottom-left-radius: 0.4em;
        -webkit-border-bottom-left-radius: 0.4em;
        -o-border-bottom-left-radius: 0.4em;
        -moz-border-bottom-left-radius: 0.4em;
        border-top-right-radius: 0.44em;
        -webkit-border-top-right-radius: 0.4em;
        -o-border-top-right-radius: 0.4em;
        -moz-border-top-right-radius: 0.4em;
        border-top-left-radius: 0.4em;
        -webkit-border-top-left-radius: 0.4em;
        -o-border-top-left-radius: 0.4em;
        -moz-border-top-left-radius: 0.4em;
    }

    .Register_sub {
        text-align: center;
    }
