@font-face {
    font-family : 'GmarketSans M';
    font-style: normal;
    src : url(../fonts/GmarketSansTTFMedium.ttf) format("truetype");
}

@font-face {
    font-family : 'GmarketSans B';
    font-style: normal;
    src : url(../fonts/GmarketSansTTFBold.ttf) format("truetype");
}

html {font-size: 10px !important;}
body {background-color: #70af9f;}
.wrap {position: relative; display: flex; flex-direction: column; width: 100%; min-width: 1920px; min-height: calc(100vh - 0px); background-image: url(../images/main_img.png); background-repeat: no-repeat; background-position: right 224px bottom 170px;}
.wrap::before {content: url(../images/circle01.png); position: absolute; bottom: 0;}
.wrap::after {content: url(../images/circle02.png); position: absolute; top: 0; right: 0;}

.login-form {padding: 20rem 0 18rem 50rem;}
.login-wrap {display: flex; width: 34%;}
.login-box-wrap{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 476px;
}
.logo-wrap {font-size: 4.5rem; color: #fff;}
.logo-wrap div {font-size: 4rem; font-family: 'GmarketSans B'; line-height: 1.3;}
.login-box-wrap span, .login-box-wrap p {color: #fff;}
.login-box-wrap span {font-size: 3rem; font-weight: 600; margin-top: 6rem;}
.login-box-wrap p {font-size: 1.6rem;}

.login-id, .login-pw {position: relative; width: 100%;}
.login-id {margin-top: 0.6rem;}
.login-id::before {content: "\f007";}
.login-pw::before {content: "\f023";}
.login-id::before, .login-pw::before {
    position: absolute;
    top: 2.4rem;
    left: 2rem;
    z-index: 1000;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.6rem;
    color: #199586;
}
.login-id input, .login-pw input{
    position: relative;
    width: 100%;
    height: 5.4rem;
    margin-top: 1rem;
    padding: 0 4.6rem;
    font-size: 1.4rem;
    color: #424242;
    border-radius: 10rem;
}
.login-id input::placeholder, .login-pw input::placeholder {color: #424242;}

.login-btn {margin-top: 3rem; width: 100%;}
.login-btn #btnLogin{
    font-family: 'GmarketSans B';
    display: block;
    width: 100%;
    height: 5.4rem;
    outline: none;
    background-color: #199586;
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
    line-height: 5.8rem;
    border-radius: 10rem;
}
.login-btn #btnLogin:hover {box-shadow: 0 0.2rem 1rem 0.2rem #1995864d;}

.login_footer {z-index: 10; display: flex; align-items: center; justify-content: center; min-height: 7rem; font-size: 1.3rem; color: #fff; margin-top: auto; background-color: #456C63;}
.login_footer span {margin-right: 1rem;}

.error-member-id, .error-password, .submit-error-message {display: none; margin: 0.8rem 0 0 2rem !important; color: #d9fbff;}

@media screen and (min-width: 0px) and (max-width: 1280px){
    .wrap {min-width: 1080px; background-size: 46%; background-position: right 20px bottom 20px;}
    .login-form {padding: 10rem 0 0 10rem;}
    .login-id, .login-pw, .login-btn {width: 100%;}
    .login-box-wrap p {white-space: nowrap;}
}

@media screen and (min-width: 0px) and (max-width: 800px){
    .wrap {min-width: 800px; background-size: 75%; background-position: right 2rem bottom 6rem; height: 1225px;}
    .wrap::before {content: url(../images/circle01_c.png); position: absolute; bottom: 0; z-index: -1;}
    .wrap::after {content: url(../images/circle02_c.png); position: absolute; top: initial; right: 0; bottom: 0; z-index: -1;}

    .login-form {height: 890px; display: flex; justify-content: center; align-items: center; padding: 0;}
    .login-wrap {width: initial;}
    .login-box-wrap {
        z-index: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        text-align: center;
        width: 500px;
    }
    .logo-wrap {font-size: 4.5rem; color: #fff;}
    .logo-wrap div {font-size: 4.6rem; font-family: 'GmarketSans B'; line-height: 1.3;}
    .login-box-wrap p {color: #fff; font-size: 2rem; font-weight: 300; margin: 1.6rem 0 4rem 0; white-space: nowrap;}
    .login-box-wrap span {display: none;}

    .login-id::before, .login-pw::before {
        top: 2.8rem;
        left: 3rem;
        z-index: 1000;
        font-size: 2.2rem;
    }
    .login-id input, .login-pw input{
        height: 7.2rem;
        margin-top: 1rem;
        padding: 0 6.8rem;
        font-size: 2rem;
    }
    .login-btn #btnLogin, .main-btn button {
        font-family: 'GmarketSans M';
        height: 7.2rem;
        font-size: 2rem;
        line-height: 7.6rem;
    }

    .login_footer {min-height: 6.6rem; font-size: 1.3rem; margin-top: auto;}
    .login_footer span {font-size: 1.5rem; font-weight: 200;}
    .error-member-id, .error-password, .submit-error-message {font-size: 1.6rem; text-align: left; margin: 0.8rem 0 0 3rem !important;}
}