h1 {text-align: center; margin: 50px auto 30px;}
h1 a {}
h1 a img{width: 200px;}

/* margin:0 auto 가운데로 */
main {width: 500px; margin: 0 auto;}

/* 로그인과 회원가입사이에 선을 만들기 위함.  */
main #loginFrm {border-bottom: 1px solid #ccc; margin-bottom: 20px;padding-bottom: 20px;}

main #loginFrm fieldset {}
main #loginFrm fieldset ul {}
main #loginFrm fieldset ul li {
    border: 1px solid #ccc; background: #fff;
    display: flex; flex-flow: row nowrap;
    margin-bottom: 10px;
    /* .pw_show_hide를 위해 position: ; */
    position: relative;
}
main #loginFrm fieldset ul .error {
    color: #e7223d; padding: 10px; display: none;
}
main #loginFrm fieldset ul .id_error {border:0; font-size: 15px;}
main #loginFrm fieldset ul .pw_error {border:0;font-size: 15px;}
main #loginFrm fieldset ul li span {}
main #loginFrm fieldset ul li .id_bg {
    border-right: 1px solid #ccc;
    padding: 20px;
    background-color: #f5f5f5;
    position: relative;

}
main #loginFrm fieldset ul li .id_bg::after {
    content: ' '; display: block;
    background-image: url(../img/icon.svg);
    background-position: 0 0;
    width: 21px; height: 21px;
    position: absolute; left: 10px; top: 11px;
}
main #loginFrm fieldset ul li .pw_bg {
    border-right: 1px solid #ccc;
    padding: 20px;
    background-color: #f5f5f5;
    position: relative;
}
main #loginFrm fieldset ul li .pw_bg:after {
    content: ' '; display: block;
    background-image: url(../img/icon.svg);
    background-position: 106px 0;
    width: 21px; height: 21px;
    position: absolute; left: 10px; top: 11px;
}
main #loginFrm fieldset ul li span input {width: 400px;height: 40px;border: 0;padding-left: 10px;}
main #loginFrm fieldset ul li span input::placeholder {font-size: 0.95rem;color: #aaa;}
main #loginFrm fieldset ul li span input[type=text] {}
main #loginFrm fieldset ul li span input[type=password] {}
main #loginFrm fieldset ul li .pw_show_hide {

    background-image: url(../img/icon.svg);
    background-position: 42px 0;
    width: 21px;height: 21px;
    /* li에 position relative를 해줘야한다. */
    position: absolute; right: 8px  ; top: 11px;

}
main #loginFrm fieldset .btm {
    display: flex; flex-flow: row nowrap;
    padding: 15px 0;justify-content: space-between;
}
main #loginFrm fieldset .btm p {}
main #loginFrm fieldset .btm p label {}
main #loginFrm fieldset .btm p label input[name=login_y] {appearance: none;}
main #loginFrm fieldset .btm p label input[name=login_y] + span::before {
    background-color: #fff;
    border: 1px solid #ccc;
    content: ' '; display: inline-block;
    width: 17px; height: 17px;
    background-image: url(../img/icon.svg);
    background-position: -65px -22px;
    margin-right: 5px;

}

main #loginFrm fieldset .btm p label input[name=login_y]:checked + span::before {
    background-position: -84px -21px;
}

main #loginFrm fieldset .btm p label span {}
/* main #loginFrm fieldset .btm .idpw_search {color: #00478f;} */
main #loginFrm fieldset .btm .idpw_search{color: #00478f;}
main #loginFrm fieldset .btm .idpw_search::after {
    content: ' '; display: inline-block;
    width: 8px; height: 15px;
    background-image: url(../img/icon.svg);
    background-position: -104px -21px;
    margin-left: 5px;
}
/* 글자는 흰색 ,배경은 파랑과 그림자가 있으므로 그림자 색상은 어둡게*/
main #loginFrm fieldset #login_btn {
    background: #0074e9;
    width: 100%; color: #fff; padding: 20px 0;
    box-shadow: 0 2px 0 #00478f;
}
/* a link이기 때문에 css가 먹지 않는다 그래서 display를 block으로 두고 가운데 정렬로 text-align을 center로 둔다 */
main .join_link {
    border: 1px solid #ccc;color: #0074e9;
    display: block; text-align: center ;background: #fff; padding: 20px 0; width: 100%;
    box-shadow: 0 2px 0 #eee;
}

footer {text-align: center; font-size: 0.85rem; margin-top: 20px;}