@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

main {
    display: block;
}

h1 {
    font-size: 2em;
    margin: .67em 0;
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

pre {
    font-family: monospace,monospace;
    font-size: 1em;
}

a {
    background-color: transparent;
}

abbr[title] {
    border-bottom: 0;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

b, strong {
    font-weight: bolder;
}

code, kbd, samp {
    font-family: monospace,monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

img {
    border-style: none;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button, input {
    overflow: visible;
}

button, select {
    text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}

    button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }

fieldset {
    padding: .35em .75em .625em;
}

legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type="checkbox"], [type="radio"] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

details {
    display: block;
}

summary {
    display: list-item;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

/*function & variables*/
/* design start */
body, input, button, textarea, select, optgroup {
    font-family: "PingFangTC-Regular", "Heiti TC", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 1;
}

body {
    line-height: 1.5;
}

input, button, textarea, select, optgroup {
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    display: inline-block;
}

input, select {
    height: 42px;
    padding: 0 10px;
    margin: 0 3px;
    color: black;
    font-size: 22px;
    line-height: 1;
    border: 1px solid #bdbdbd;
    background: #fff;
    vertical-align: middle;
    display: inline-block;
}

a {
    color: #ff8300;
}

input::-webkit-input-placeholder {
    line-height: auto;
}

input:-ms-input-placeholder {
    line-height: auto;
}

input::-ms-input-placeholder {
    line-height: auto;
}

input::placeholder {
    line-height: auto;
}

.btn {
    height: 42px;
    padding: 0 40px;
    margin: 0 3px;
    color: #FFFFFF;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    line-height: 42px;
    outline: 0;
    border: none;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #5c5c5c;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    vertical-align: middle;
    display: inline-block;
}

    .btn.get-code {
        width: 194px;
        height: 52px;
        padding: 0;
        line-height: 52px;
        background: url(img/btn.png) 50% 0%/100% 200% no-repeat;
    }

        .btn.get-code:hover {
            background-position: 50% 100%;
        }

        .btn.get-code.disabled {
            background-position: 50% 100%;
            cursor: default;
        }

.container {
    padding: 40px 0 280px 0;
    background: url(img/bg.png) 50% 100% no-repeat #fff;
}

h1 {
    height: 140px;
    padding: 0;
    margin: 0 0 40px 0;
    font-size: 0;
    background: url(img/title.png) 50% 50% no-repeat #f9f9f9;
    border: 3px solid #d2d3d8;
    border-left: none;
    border-right: none;
}

h2 {
    padding: 10px 0;
    margin: 0;
    font-size: 26px;
    font-weight: normal;
    color: #fff;
    background: #4f3232;
}

h3 {
    margin: 0 0 15px 0;
    font-size: 28px;
    text-align: left;
}

ol, ul {
    padding-left: 1.3em;
    margin: 0 0 20px 0;
    text-align: left;
}

.content {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
    /*display: none;*/
}

    .content .content-wrap {
        padding: 50px 0;
        margin-bottom: 25px;
        background: #f3f3f3;
    }

        .content .content-wrap .row {
            margin: 0 auto 16px auto;
            display: table;
        }

            .content .content-wrap .row.action {
                margin-bottom: 0;
                padding-top: 20px;
            }

        .content .content-wrap .error {
            padding: 8px 0 0 4px;
            font-size: 18px;
            color: red;
            text-align: left;
            /*display: none;*/
        }

    .content.verify-method .content-wrap {
        padding: 0;
        background: none;
        font-size: 0;
    }

        .content.verify-method .content-wrap a {
            width: 400px;
            height: 320px;
            margin: 0 20px;
            background: -webkit-gradient(linear, left top, left bottom, from(#bdbdbc), to(#828282));
            background: linear-gradient(to bottom, #bdbdbc, #828282);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#bdbdbc', EndColorStr='#828282');
            position: relative;
            display: inline-block;
        }

            .content.verify-method .content-wrap a:hover {
                background: -webkit-gradient(linear, left top, left bottom, from(#a5a5a5), to(#616161));
                background: linear-gradient(to bottom, #a5a5a5, #616161);
                filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#a5a5a5', EndColorStr='#616161');
            }

            .content.verify-method .content-wrap a:before {
                content: "";
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }

            .content.verify-method .content-wrap a.verify-phone:before {
                background: url(img/entry1_2.png) 50% 50% no-repeat;
            }

            .content.verify-method .content-wrap a.verify-bf:before {
                background: url(img/entry2_2.png) 50% 50% no-repeat;
            }

    .content.enter-code .content-wrap .input-code {
        width: 200px;
    }

    .content.reset-password .content-wrap label {
        width: 250px;
        text-align: right;
        vertical-align: middle;
        display: inline-block;
    }

    .content.reset-password .content-wrap .error {
        padding-left: 252px;
    }

    .content.confirm-info .content-wrap select, .content.confirm-info .content-wrap input {
        width: 300px;
    }

    .content.confirm-info .content-wrap select {
        background: url(img/arrow.png) top 50% right 10px/20px 14px no-repeat #fff;
    }

#gbox.qr .gbox-wrap {
    width: auto;
    max-width: none;
    margin: 60px 0;
    padding: 0;
    background: none;
}

    #gbox.qr .gbox-wrap .gbox-content {
        width: 591px;
        padding: 180px 60px 60px 60px;
        -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.8), 0 0 0 2px #fff inset, 0 0 0 4px #000 inset, 0 0 15px black inset, 0 0 0 18px #fff inset, 0 0 0 19px rgba(0, 0, 0, 0.5) inset;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.8), 0 0 0 2px #fff inset, 0 0 0 4px #000 inset, 0 0 15px black inset, 0 0 0 18px #fff inset, 0 0 0 19px rgba(0, 0, 0, 0.5) inset;
        border-radius: 4px;
        background: url(img/qr-code-title_2.png) 50% 60px no-repeat #fff;
        position: relative;
    }

        #gbox.qr .gbox-wrap .gbox-content:before, #gbox.qr .gbox-wrap .gbox-content:after {
            content: "";
            width: 753px;
            height: 47px;
            position: absolute;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        #gbox.qr .gbox-wrap .gbox-content:before {
            top: -22px;
            background: url(img/gbox-before.png) 50% 50% no-repeat;
        }

        #gbox.qr .gbox-wrap .gbox-content:after {
            bottom: -22px;
            background: url(img/gbox-after.png) 50% 50% no-repeat;
        }

    #gbox.qr .gbox-wrap .gbox-close {
        width: 44px;
        height: 44px;
        font-size: 0;
        background: url(img/close.png) 50% 50% no-repeat;
        top: 30px;
        right: 30px;
    }

    #gbox.qr .gbox-wrap .gbox-action .gbox-btn {
        margin: 0;
    }

@media screen and (max-width: 768px) {
    /*小於等於768px*/
    body {
        background: black;
    }

    body, input, button, textarea, select, optgroup {
        font-size: 3.90625vw;
    }

    input, select {
        height: 8.07292vw;
        padding: 0 1.95312vw;
        margin: 0 0.39062vw;
        font-size: 3.90625vw;
        border: 0.13021vw solid #bdbdbd;
    }

    .btn {
        height: 8.07292vw;
        padding: 0 5.20833vw;
        margin: 0 0.39062vw;
        font-size: 3.90625vw;
        line-height: 8.07292vw;
    }

        .btn.get-code {
            width: 35.15625vw;
            height: 9.50521vw;
            line-height: 9.50521vw;
        }

    .container {
        min-height: calc(100vh - 21.875vw);
        padding: 6.51042vw 0 26.04167vw 0;
        background-size: 93.09896vw 17.31771vw;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    h1 {
        height: 18.22917vw;
        margin: 0 0 6.51042vw 0;
        border: 0.39062vw solid #d2d3d8;
        background-size: 86.58854vw 6.11979vw;
    }

    h2 {
        padding: 1.30208vw 0;
        font-size: 4.6875vw;
    }

    h3 {
        margin: 0 0 1.95312vw 0;
        font-size: 4.6875vw;
    }

    ol, ul {
        padding-left: 1.3em;
        margin: 0 0 2.60417vw 0;
    }

    .content {
        width: 92%;
    }

        .content .content-wrap {
            padding: 6.51042vw 0;
            margin-bottom: 3.25521vw;
        }

            .content .content-wrap .row {
                margin: 0 auto 2.86458vw auto;
            }

                .content .content-wrap .row.action {
                    padding-top: 2.60417vw;
                }

            .content .content-wrap .error {
                padding: 1.04167vw 0 0 0.52083vw;
                font-size: 3.125vw;
            }

        .content.verify-method .content-wrap a {
            width: 67.70833vw;
            height: 41.66667vw;
            margin: 0 0 5.20833vw 0;
        }

            .content.verify-method .content-wrap a.verify-phone:before, .content.verify-method .content-wrap a.verify-bf:before {
                background-size: 37.10938vw 6.11979vw;
            }

        .content.enter-code .content-wrap .input-code {
            width: 32.55208vw;
        }

        .content.reset-password .content-wrap label {
            width: 44.27083vw;
        }

        .content.reset-password .content-wrap input {
            width: 36.45833vw;
            margin-right: 3.90625vw;
        }

        .content.reset-password .content-wrap .error {
            padding-left: 44.27083vw;
        }

        .content.confirm-info .content-wrap select, .content.confirm-info .content-wrap input {
            width: 65.10417vw;
        }

        .content.confirm-info .content-wrap select {
            background: url(img/arrow.png) top 50% right 2.34375vw/3.38542vw 2.21354vw no-repeat #fff;
        }
}