:root{
    --primary_color:#177BA7;
    --primary_color_hober:#04658F;
    --secondary_color:#00448D;
    --tertiary_color:#0081B0;
    --border_color:#CDCDCD;
    --white:#fff;
    --BK:#6A6A6A;
}
body{
    margin: 0px;
    padding: 0px;
    min-width: 375px;
    height: 100vh;
}
.banner{
    aspect-ratio: 1920/365;
    background: url('../../img/banner_img.webp');
    background-size:100%;
    margin-bottom: 90px;
}
@media screen and (max-width: 768px){
    .banner{
        margin-bottom: 40px;
    }
}
.form_title_box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}
.form_title_box h1{
    margin: 0px;
}
.form_title_ch{
    color: var(--secondary_color);
    font-weight: 500;
    font-size: 40px;
    margin-right: 15px;
}
.form_title_en{
    color: var(--tertiary_color);
    font-weight: 300;
    font-size: 24px;
}
@media screen and (max-width: 768px){
    .form_title_box{
        align-items: flex-end;
        margin-bottom: 40px;
    }
    .form_title_ch{
        font-size: 24px;
    }
    .form_title_en{
        font-size: 14px;
    }
}
.form_box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.input_box{
    display: flex;
    align-items: center;
    margin-bottom: 50px;
}
.input_box label{
    text-align: right;
    width: 50px;
    margin-right: 40px;
    font-weight: 700;
    font-size: 20px;
    color: var(--BK);
}
.input_box input{
    height: 40px;
    width: 280px;
    border: 1px solid var(--border_color);
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 4px;
    box-sizing: border-box;
}
.input_box #password{
    padding-right: 33px;
}
.input_box .eyeBox{
    position: absolute;
    width: 25px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 0;
    margin: 0;
    padding-right: 8px;
    cursor: pointer;
}
/* .reCAPTCHA_box{
    display: flex;
    justify-content: flex-end;
} */
.btn_box{
    width: 100%;
    margin-top: 100px;
    margin-bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 40px;
}
.btn_box .btn_sigIn{
    border: none;
    border-radius: 4px;
    background: var(--primary_color);
    color: var(--white);
    font-weight: 700;
    font-size: 28px;
    text-align: center;
    padding: 8px 36px;
    cursor: pointer;
}
.btn_box .btn_forget{
    text-decoration: none;
    font-weight: 500;
    font-size: 28px;
    color: var(--secondary_color);
}
.btn_box .btn_sigIn:hover{
    background: var(--primary_color_hober);
}
@media screen and (max-width: 768px){
    .input_box{
        flex-direction: column;
        margin-bottom: 8px;
    }
    .input_box label{
        text-align: left;
        align-self: flex-start;
        font-size: 14px;
    }
    .btn_box{
        margin-top: 50px;
        margin-bottom: 50px;
        flex-direction: column;
        row-gap: 15px;
    }
    .btn_box .btn_sigIn{
        font-size: 20px;
    }
    .btn_box .btn_forget{
        font-size: 12px;
    }
}