#member-base{
    display: flex;
}

body{
    background:#E2EFF7;
}

#member{
     padding: 90px 0px;
}

.login-left{
    width: 537px; max-width: 40vw;
}

.login-left img{
    display: block;
}

.member-right{
    flex: 1; padding: 35px 15px;  padding-right: 100px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}

.user-boxs{
    width: 1380px; max-width: 100%; padding: 0px 90px; margin:0 auto;
}

.user-base{
    width: 100%; background: white; border-radius: 33px;  display: flex;
}




.base-right{
    flex: 1; display: flex; flex-direction: column; padding-bottom: 20px; padding-top: 12px;
}

.member-title{
    height: 45px;  border-bottom: 1px solid #DCDEE2; padding: 10px 15px; line-height: 30px; padding-bottom: 15px;
}

.member-title span{
    display: block; position: relative; font-size: 18px; line-height: 22px; padding-left: 12px; font-weight: bold; color: #333333;
}

.member-title span::after{
    position: absolute; width:4px ; height:20px ; top: 1px; left: 1px; background-color: #4B83F4; content: " ";
}

.member-title a{
    display: none;
}

.member-mains{
    padding: 22px 48px;
}

.person-box{
    display: flex; flex-direction: column;
}

.person-box .item-form{
    display: flex; margin-bottom: 22px; align-items: center;
}

.person-box .item-form label{
    width: 120px;  line-height: 50px; text-align: left;
}

.person-box .item-form label span{
    color: red;
}

.person-box .item-form .input-boxs{
    position: relative; flex: 1;
}

.person-box .item-form .input-boxs input.input-txt{
    height: 46px; line-height: 36px; padding: 5px 11px; background: #F6F6F6; outline: none; border: none;
    width: 100%;
}

.item-form.item-s1{
    display: flex; align-items: center; font-size: 16px;
}

.item-form.item-s1 span{
    margin-left:6px;
}

.item-form.item-s1 input{
    width: 20px; height: 20px;
}

.items-center{
    text-align: center;
}

.items-center button{
    display: inline-block; background-color: #4B83F4; height: 52px; line-height: 52px; font-size: 18px; color: #FFFFFF; padding: 0px 38px; outline: none; border: none;
    border-radius: 26px;
}

@media screen and (min-width: 768px) {
    .base-left{
        width: 320px; max-width: 42%; display: flex; padding-top: 50px ; flex-direction: column; align-items: center;
        padding-bottom: 60px; border-right:solid 1px #EFEFEF;
    }

    .base-left .logo-box{
        width: 100%; max-width: 200px; text-align: center;
    }

    .base-left .logo-box a.email{
        text-align: center; display: block; text-decoration: none; line-height: 36px; margin-top: 10px;
        font-size: 16px;
    }

    .left-links{
        display: flex; flex-direction: column; margin-top: 32px; width: 100%;
    }

    .left-links a{
        display:block;  text-align: center; height: 55px; line-height: 55px; color: #333333;
        font-size: 16px; width: 100%;
    }

    .left-links a.cur,.left-links a:hover{
        background: #4B83F4; color: white;
    }

    .base-left{
        width: 320px; max-width: 42%; display: flex; padding-top: 50px ; flex-direction: column; align-items: center;
        padding-bottom: 60px; border-right:solid 1px #EFEFEF;
    }

    .base-left .logo-box{
        width: 100%; max-width: 200px; text-align: center;
    }

    .base-left .logo-box .close-btn{
        display: none;
    }

    .base-left .logo-box a.email{
        text-align: center; display: block; text-decoration: none; line-height: 36px; margin-top: 10px;
        font-size: 16px;
    }

    .left-links{
        display: flex; flex-direction: column; margin-top: 32px; width: 100%;
    }

    .left-links a{
        display:block;  text-align: center; height: 55px; line-height: 55px; color: #333333;
        font-size: 16px; width: 100%;
    }

    .left-links a.cur,.left-links a:hover{
        background: #4B83F4; color: white;
    }




}


@media screen and (max-width: 767px) {
    #member-base{
        flex-direction: column;
    }

    .user-boxs {
        width: 100%;
        padding: 0px 10px;
    }

    .login-left{
        display: none;
    }

    .member-right{
        padding-right: 0;
    }

    .user-base{
        flex-direction: column;
    }



    .base-right{
        flex: none; width: 100%;
    }

    .member-mains {
        padding: 22px 16px;
    }

    .person-box .item-form label {
        width: 100%;
    }

    .items-center button {
        height: 44px;
        line-height:44px;
        font-size: 15px;
        padding: 0px 30px;
        border-radius: 22px;
    }

    #member.person-form{
        padding: 0px 0px;
    }

    #member.person-form .user-boxs {
        width: 100%;
        padding: 0px 5px;
        background-color: white;
    }

    .person-box .item-form{
        flex-direction: column;
    }

    .person-box .item-form .input-boxs{
        width: 100%;
    }

    .person-box .item-form label{
        line-height: 30px;
    }

    .item-form.item-s1{
        flex-direction: row; font-size: 13px;
    }

    .member-title{
        display: flex; justify-content: space-between;
    }

    .member-title a{
        display: inline-block;
    }

    /*左邊--開始*/
    .base-left{
        width:270px;  display: flex;  flex-direction: column; align-items: center;
        padding-bottom: 60px; border-right:solid 1px #EFEFEF;
        height: 100%; position: fixed; left: -271px; top: 0; transition: all 0.6s;
        z-index: 1000; background-color: white; opacity: 0;
    }

    .base-left.opened{
        left: 0; opacity: 1;
    }

    .base-left .logo-box{
        padding: 0px 55px; padding-top: 50px ;
        position: relative;
    }

    .base-left .logo-box .close-btn{
        position: absolute; right: 5px; top: 5px; width: 36px; height: 36px;
    }

    .base-left .logo-box a{
        display: none;
    }

    .left-links{
        display: flex; flex-direction: column; margin-top: 32px; width: 100%;
    }

    .left-links a{
        display:block;  text-align: center; height: 55px; line-height: 55px; color: #333333;
        font-size: 16px; width: 100%;
    }

    .left-links a.cur,.left-links a:hover{
        background: #4B83F4; color: white;
    }




    /*左邊--結束*/

    .mobile-footer{
        margin-bottom: 0px !important;
    }


}