/* index-form */

.indlog-form, .indlog-form-inn {
    float: left;
    width: 100%;
    height: auto;
}

.indlog-form-inn {
    margin-bottom: 10px;
}

.indlog-form-box {
    width: 100%;
    height: auto;
    position: relative;
}

.indlog-form-box .indlog-form-list {
    width: 100%;
    height: auto;
    padding: 10px 0;
}

/* form */

.indlog-form label {
    float: left;
    max-width: 90px;
    width: 100%;
    font-weight: 400;
    margin-right: 10px;
    text-align: left;
    font-size: 18px;
    color: #3681c0;
    font-weight: 600;
}

.indlog-form .form-control, .indlog-form .form-control:focus, .verification .form-control2, .verification .form-control2:focus {
    display: block;
    width: calc( 100% - 100px);
    float: left;
    border: 1px solid #2b6da4;
    border-radius: 5px;
    background-color: #f5f5f5;
    padding: 16px 12px;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.verification .form-control2, .verification .form-control2:focus {
    width: calc(100% - 100px);
    margin: 15px 0 0 0;
    background-color: rgb(232, 240, 254)
}

.indlog-form .form-control:focus, .verification .form-control2:focus {
    border: 1px solid #00a2ff;
    border-radius: 10px;
    position: relative;
}

/* 首頁登入驗證碼 */

.indlog-form .indlog-form-list .login_code {
    position: absolute;
    top: 51%;
    left: 13.5%;
}

@media screen and (max-width: 768px) {
    .indlog-form .indlog-form-list .login_code {
        position: absolute;
        left: 16%;
    }
}

@media screen and (max-width: 500px) {
    .indlog-form .indlog-form-list .login_code {
        position: absolute;
        left: 46%;
        top: 55%;
    }
    .verification .form-control2, .verification .form-control2:focus {
        width: 100%;
        margin: 0 0 15px 0;
    }
}

@media screen and (max-width: 320px) {
    .indlog-form .indlog-form-list .login_code {
        position: absolute;
        left: 30%;
        top: 55%;
    }
   
}

/* 首頁登入驗證碼 */

.indlog-form .sub-btn {
    float: left;
    width: 100%;
    height: auto;
    position: relative;
}

.indlog-form .sub-btn01, .indlog-form .sub-btn01:focus {
    max-width: 172px;
    width: 100%;
    height: auto;
    padding: 12px 0;
    background: #3b679e;
    background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%);
    background: -webkit-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%);
    background: linear-gradient(to bottom, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8', GradientType=0);
    float: right;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    border: none;
    color: #ffffff;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

.indlog-form .sub-btn01:hover {
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -o-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

@media screen and (max-width: 767px) {
    .indlog-form {
        display: -ms-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;
        -o-justify-content: flex-start;
        -ms-justify-content: flex-start;
        -moz-justify-content: flex-start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -o-align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        align-items: flex-end;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .indlog-form-inn {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 0;
    }
    .indlog-form-box .indlog-form-list {
        padding: 10px 0 0;
    }
    .indlog-form .sub-btn {
        width: 100%;
    }
    .indlog-form label {
        max-width: none;
        font-size: 16px;
        margin-bottom: 5px;
    }
    .indlog-form .form-control, .indlog-form .form-control:focus {
        width: 100%;
        padding: 10px 7px;
    }
    .indlog-form .sub-btn01, .indlog-form .sub-btn01:focus {
        width: 100%;
        max-width: 100%;
        height: 40px;
        padding: 0px 5px;
        font-size: 14px;
    }
}