/* BASIC css start */
/* =========================================================
   BIKEMART 로그인
========================================================= */

#loginWrap,
#loginWrap * {
    box-sizing:border-box;
}


/* =========================================================
   전체
========================================================= */

#loginWrap.bm-login-page {
    width:100%;
    max-width:500px;

    margin:0 auto;

    padding:75px 0 110px;

    color:#222;

    font-family:
        "Pretendard",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;
}


/* =========================================================
   제목
========================================================= */

#loginWrap .bm-login-header {
    margin-bottom:42px;

    text-align:center;
}

#loginWrap .bm-login-header h1 {
    margin:0;
    padding:0;

    color:#111;

    font-size:30px;
    font-weight:700;
    line-height:1.3;

    letter-spacing:-1.2px;
}

#loginWrap .bm-login-header p {
    margin:12px 0 0;

    color:#888;

    font-size:14px;
    font-weight:400;
    line-height:1.6;

    letter-spacing:-0.3px;
}


/* =========================================================
   본문
========================================================= */

#loginWrap .page-body {
    width:100%;
    margin:0;
}

#loginWrap .bm-login-box {
    width:100%;
}


/* =========================================================
   기존 좌우 로그인 구조 제거
========================================================= */

#loginWrap .mlog {
    width:100%;

    margin:0;
    padding:0;

    float:none;

    border:0;
}


/* =========================================================
   FIELDSET
========================================================= */

#loginWrap fieldset {
    margin:0;
    padding:0;

    border:0;
}

#loginWrap legend {
    position:absolute;

    overflow:hidden;

    width:1px;
    height:1px;

    margin:-1px;
    padding:0;

    clip:rect(0,0,0,0);

    border:0;
}


/* =========================================================
   입력 리스트
========================================================= */

#loginWrap .frm-list {
    width:100%;

    margin:0;
    padding:0;

    list-style:none;
}

#loginWrap .frm-list li {
    position:relative;

    width:100%;

    margin:0 0 12px;
    padding:0;

    list-style:none;
}


/* =========================================================
   INPUT
========================================================= */

#loginWrap .frm-list li label {
    position:absolute;

    left:15px;
    top:0;

    display:flex;
    align-items:center;

    width:auto;
    height:52px;

    padding:0;

    color:#aaa;

    font-size:13px;
    font-weight:400;

    line-height:52px;

    cursor:text;

    pointer-events:none;
}

#loginWrap .frm-list li input {
    display:block;

    width:100% !important;
    height:52px !important;

    margin:0;
    padding:0 15px !important;

    border:1px solid #d7d7d7;
    border-radius:4px;

    outline:0;

    background:#fff;

    color:#222;

    font-family:
        "Pretendard",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;

    font-size:14px;

    line-height:52px;

    transition:border-color .15s ease;
}

#loginWrap .frm-list li input:hover {
    border-color:#aaa;
}

#loginWrap .frm-list li input:focus {
    border-color:#222;
}


/* =========================================================
   보안접속
========================================================= */

#loginWrap .bm-login-option {
    display:flex;
    align-items:center;

    width:100%;

    min-height:36px;

    margin-top:1px;
}

#loginWrap .se-log {
    margin:0;
    padding:0;
}

#loginWrap .se-log label {
    display:inline-flex;
    align-items:center;

    color:#666;

    font-size:12px;

    cursor:pointer;
}

#loginWrap .se-log input {
    width:16px;
    height:16px;

    margin:0 7px 0 0;

    vertical-align:middle;

    accent-color:#111;
}


/* =========================================================
   로그인 버튼
========================================================= */

#loginWrap .btn-mlog {
    width:100%;

    margin-top:8px;
    padding:0;
}

#loginWrap .btn-mlog a,
#loginWrap .bm-login-button {
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:58px;

    padding:0;

    border:1px solid #111;
    border-radius:4px;

    background:#111;

    color:#fff;

    font-size:16px;
    font-weight:700;
    line-height:1;

    letter-spacing:-0.4px;

    text-decoration:none;

    transition:background .2s ease;
}

#loginWrap .btn-mlog a:hover {
    border-color:#333;

    background:#333;

    color:#fff;
}


/* =========================================================
   아이디찾기 / 회원가입
========================================================= */

#loginWrap .bm-member-links {
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    margin-top:20px;
}

#loginWrap .bm-member-links a {
    color:#666;

    font-size:12px;
    font-weight:400;

    text-decoration:none;
}

#loginWrap .bm-member-links a:hover {
    color:#111;
}

#loginWrap .bm-member-links span {
    width:1px;
    height:12px;

    margin:0 14px;

    background:#ddd;
}


/* =========================================================
   간편 로그인 제목
========================================================= */

#simpleLogin {
    width:100%;

    margin-top:38px;

    text-align:center;
}

#simpleLogin .bm-simple-title {
    display:flex;
    align-items:center;

    width:100%;

    margin-bottom:18px;

    color:#888;

    font-size:12px;
}

#simpleLogin .bm-simple-title:before,
#simpleLogin .bm-simple-title:after {
    content:"";

    flex:1;

    height:1px;

    background:#e5e5e5;
}

#simpleLogin .bm-simple-title span {
    padding:0 14px;
}


/* =========================================================
   SNS 로그인
========================================================= */

#simpleLogin .sns-login {
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;

    width:100%;

    margin:0;

    font-size:0;
}

#simpleLogin .sns-login a {
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    margin:0;

    padding:0;

    overflow:hidden;

    border:1px solid #e1e1e1;
    border-radius:4px;

    background:#fff;

    vertical-align:top;
}

#simpleLogin .sns-login a:hover {
    border-color:#aaa;
}

#simpleLogin .sns-login a img {
    display:block;

    width:100%;
    max-width:267px;

    height:auto;

    margin:0 auto;
}


/* =========================================================
   회원가입 하단 안내
========================================================= */

#loginWrap .bm-join-guide {
    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;

    margin-top:32px;
    padding:20px 0 0;

    border-top:1px solid #eee;
}

#loginWrap .bm-join-guide p {
    margin:0;

    color:#888;

    font-size:12px;
    line-height:1.5;
}

#loginWrap .bm-join-guide a {
    display:flex;
    align-items:center;
    justify-content:center;

    width:94px;
    height:36px;

    border:1px solid #ccc;
    border-radius:3px;

    background:#fff;

    color:#333;

    font-size:12px;
    font-weight:600;

    text-decoration:none;
}

#loginWrap .bm-join-guide a:hover {
    border-color:#222;
}


/* =========================================================
   모바일
   최종 모바일 정리 때 다시 점검
========================================================= */

@media screen and (max-width:768px) {

    #loginWrap.bm-login-page {
        width:100%;
        max-width:none;

        padding:45px 18px 70px;
    }

    #loginWrap .bm-login-header {
        margin-bottom:32px;
    }

    #loginWrap .bm-login-header h1 {
        font-size:25px;
    }

    #simpleLogin .sns-login {
        grid-template-columns:1fr;
    }

}
/* BASIC css end */