@charset "UTF-8";
/*===========================================
Member
===========================================*/

/*-------------------------------------------
登入
-------------------------------------------*/
.alertInfo + .login{
    margin-top:20px;
}
.login{
    display:flex;
    padding:0 50px;
}
    .login [name="loginForm"]{
        flex:0 0 40%;
        padding-right:10%;
    }
        .login .formCol{
            padding-top:5px; padding-bottom:5px;
        }
            .login [name="input_code"]{
                width:calc(100% - 110px);
            }
            .login .formCol::before{
                display:none;
            }
            .login .link__forgot{
                float:right;
            }
            #validate_image{
                display:inline-block;
                vertical-align:top;
                margin-left:5px;
            }
            .login [type="submit"]{
                font-size:1.125rem;
                margin-bottom:0;
            }
    .notice__member-type{
        list-style:none;
        margin:0;
        padding:0;
    }
        .notice__member-type li{
            margin-bottom:1em;
            padding-left:15px;
            position:relative;
        }
            .notice__member-type li::before{
                display:inline-block;
                content:"";
                background-color:var(--main-color);
                border-radius:50%;
                width:7px;
                height:7px;
                position:absolute; top:8px; left:0;
            }
@media screen and (max-width:1024px){
    .login{
        padding:0 30px;
    }
}
@media screen and (max-width:992px){
    .login [name="loginForm"]{
        flex-basis:50%;
    }
}
@media screen and (max-width:768px){
    .login{
        flex-wrap:wrap;
        padding:0 5%;
    }
        .login [name="loginForm"]{
            flex-basis:70%;
            margin:20px auto 0;
            padding-right:0;
            order:2;
        }
        .notice__member-type{
            border-bottom:1px solid #ddd;
            line-height:1.5;
            width:100%;
        }
}
@media screen and (max-width:576px){
    .login [name="loginForm"]{
        flex-basis:100%;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .login{
        padding:0 20px;
    }
        .notice__member-type{
            font-size:.875rem;
        }
}

/*-------------------------------------------
忘記密碼
-------------------------------------------*/
.forgot{
    margin:0 auto;
    width:400px;
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .forgot{
        padding:0 20px;
        width:100%;
    }
}

/*-------------------------------------------
會員首頁
-------------------------------------------*/
.member__index p{
    text-indent:2em;
}
.member__service{
    border-top:1px solid rgba(0,0,0,.1);
    border-bottom:1px solid rgba(0,0,0,.1);
    margin:20px 0;
    padding:20px 0;
}
    .member__service ul{
        list-style:none;
        margin:0 -10px;
        padding:0;
        display:flex;
        flex-wrap:wrap;
    }
        .member__service ul li{
            flex:0 0 20%;
            padding:5px 10px;
        }
            .member__service .btn{
                display:block;
                padding-left:5px; padding-right:5px;
                margin:0 auto;
                width:100%;
            }
.member__society-name{
    text-indent:0;
    text-align:right;
}
    .member__society-name .tw{
        font-size:1.125rem;
    }
@media screen and (max-width:992px){
    .member__service ul li{
        flex-basis:25%;
    }
}
@media screen and (max-width:768px){
    .member__service ul li{
        flex-basis:33.33333%;
    }
}
@media screen and (max-width:576px){
    .member__service ul li{
        flex-basis:50%;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .member__service ul{
        margin:0 -5px;
    }
        .member__service ul li{
            padding:5px;
        }
}
@media screen and (max-width:360px){/* i12 Mini, Xiaomi 2S */
    .member__service ul li{
        flex-basis:100%;
    }
}

/*-------------------------------------------
會員資料異動
-------------------------------------------*/
[name="userForm"]{
    margin-top:20px;
}
    .data .formContainer{
        padding-left:200px;
    }
        .data .formContainer .partTitle{
            position:absolute; left:0;
            margin-top:10px;
        }
        .formContainer .before{
            color:Purple;
            font-size:.875rem; font-weight:400;
            display:block;
        }
        .formContainer .after{
            color:var(--red);
            font-size:.875rem; font-weight:400;
            display:block;
        }
        .before__data{
            color:#111;
            font-size:1.125rem; font-weight:700;
            line-height:1.2;
            min-height:20px;
            margin-bottom:.5em;
        }
        [name*="email"]{
            display:inline-block;
            width:calc(100% - 125px);
        }
        [name="speciality"]{
            display:inline-block;
            width:155px;
        }
        [name="speciality_certificate"]{
            display:inline-block;
            width:155px;
        }
        [name="moe_certificate"]{
            display:inline-block;
            width:155px;
        }
        [name="url"]{
            width:calc(100% - 90px);
        }
@media screen and (max-width:992px){
    [name="userForm"]{
        margin-top:0;
    }
        .data .formContainer{
            padding-left:0;
        }
            .data .formContainer .partTitle{
                position:relative;
                margin-top:1em;
            }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .formContainer label[for]{
        display:block;
        margin-top:-3px;
    }
    [name="first_name_en"],
    [name="last_name_en"]{
        width:48%;
    }
    [name*="phone"],
    [name*="fax"],
    [name*="mobile"],
    [name*="email"],
    [name="speciality"],
    [name="speciality_certificate"],
    [name="moe_faculty"],
    [name="moe_certificate"]{
        width:100%;
    }
}