@charset "UTF-8";

/**********************************************/
body{ width: 100vw; min-height: 100vh; overflow: hidden; 
    /* background: #FAF6EA;  */
}

form { 
    display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; 
    width: 100%; max-width: 950px; min-height: 100vh; height: 100%; margin: 0 auto; padding: 60px 0; background: #fff; 
}
h1{ margin-bottom: 60px;}
h1 img{ width: 142px;}

form input{ width: 304px; height: 50px; padding: 0 18px; }

form dt{ margin-top: 14px; font-weight: 500; font-size: 14px; color: rgba(26, 26, 26, 0.9);}
form dt:first-of-type{ margin: 0;}
form dd input, form dd img{ margin-top: 14px; }
form dd img{ width: 304px;}
form dd button, #btn_busiCard{ 
    width: 118px; height: 50px; margin-left: 20px; border-radius: 5px; 
    background: #232323; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
    line-height: 50px; text-align: center;
    color: #FFF; font-weight: 700; font-size: 14px;
    cursor: pointer;
}

form dd.validation{ display: none; margin-top: 16px; }
form dd.validation:before{ font-size: 12px; font-weight: 400; }
form dd.validation.red:before{ color: #FF0000;}
form dd.validation.blue:before{ color: #06B4FF;}

#vali_code.red:before{ content: 'Incorrect Code';}
#vali_code.blue:before{ content: 'Code verified';}
#vali_ps.red:before{ content: 'Password Unidentical';}
#vali_ps.blue:before{ content: 'Password Identical';}

#btn_submit{
    height: 50px; border-radius: 5px; 
    background: #FFDD63; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25); 
    font-weight: 600; font-size: 16px; color: #000; 
}
form dl + #btn_submit{ width: 442px; margin-top: 38px;}

/**********************************************/
/* === form_login === */
#form_login > input{ margin-bottom: 24px; }
/* #form_login #btn_submit{ width: 304px; margin: 10px 0 22px; } */
#form_login #btn_submit{ width: 248px; margin: 10px 0 22px; }
#form_login > a{font-weight: 400; font-size: 12px; text-decoration: underline;}
#form_login > p{ margin-top: 36px; color: rgba(26, 26, 26, 0.8); font-weight: 400; font-size: 13px;}
#form_login > p a{ color: #1359C1; font-weight: 400; font-size: 13px; }

/**********************************************/
/* === form_join1 === */
#form_join .wrap_fileName{ 
    display: inline-flex; align-items: center; width: 304px; height: 50px;     margin-top: 14px;
    border: 1px solid #C6C6C6; border-radius: 5px;
    box-shadow: 0px 2px 10px rgb(156 156 156 / 25%);
}
#form_join .wrap_fileName input{flex: 1; width: auto; margin: 0; border: none; background: none; box-shadow: none;}
#form_join .wrap_fileName p{
    display: none; margin-right: 18px;
    font-size: 14px; color: rgba(0, 0, 0, 0.4); cursor: pointer;
}

/**********************************************/
/* === form_join2 === */
#form_join2 label{ margin-right: 362px; font-weight: 500; font-size: 14px; color: rgba(26, 26, 26, 0.9); }
#form_join2 label input{ width: 100%; margin: 14px 0 24px;}
#form_join2 .label_busiCard{ position: relative; top: -318px; width: 290px; margin: 0 0 0 326px;  }
.label_busiCard img{ width: 100%; margin-top: 8px;}

/**********************************************/
/* ========================== responsive */
@media screen and (max-width: 768px){
    /* === form_join2 === */
    #form_join2 label{ margin-right: 0;}
    #form_join2 .label_busiCard{ position: initial; margin: 0;}
}
@media screen and (max-width: 560px){
    h1{ margin-bottom: 54px;}
    h1 img{ width: 114px;}

    form > input{ height: 44px; padding: 0 14px; }

    form dd{ display: flex; flex-flow: row wrap; }
    form dd input{ flex: 1; width: auto; height: 44px; }
    form dd button, #btn_busiCard{ width: 82px; height: 44px; margin: 14px 0 0 10px; }
    form dl, form dl + #btn_submit{ width: calc(100% - 44px);}
    /* form dd input{ width: calc(100% - 95px); margin-top: 16px;}
    form dt + dd input{ margin-top: 6px;}
    form dd button, #btn_busiCard{ width: 82px; height: 44px; margin-left: 10px;}
    form dd img{ width: 100%; margin-top: 6px;}  */

    /* form dl, form dl + #btn_submit{ width: calc(100% - 44px);} */

    /* === form_login === */
    #form_login > input{ width: 248px; margin-bottom: 16px; }
    #form_join .wrap_fileName{ flex: 1; width: auto; }
    /* #form_login #btn_submit{ width: 248px; margin: 12px 0 14px;} */
    #form_login > p{ margin-top: 26px;}

    /* === form_join2 === */
    #form_join2 label, #form_join2 .label_busiCard{ width: calc(100% - 40px);}

}
@media screen and (max-width: 375px){
    form dd input{ width: 100%;}
    /* form dd button, #btn_busiCard{ margin-left: calc(100% - 82px); margin-top: 6px;} */
    form dd button, #btn_busiCard{ width: 100%; margin: 6px 0 0;}
    form dd.validation{ position: relative; top: -40px; margin: 0;}  

}