/* BASIC css start */
/* =========================================================
   BIKEMART 회원가입 약관
   join_terms.css
========================================================= */


/* 기본 */
#terms,
#terms * {
    box-sizing:border-box;
}

#terms fieldset {
    margin:0;
    padding:0;
    border:0;
}

#terms legend {
    position:absolute;
    overflow:hidden;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

#terms caption {
    display:none;
}


/* =========================================================
   전체 영역
========================================================= */

#terms.bm-join-terms {
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding:75px 0 110px;
    color:#222;
    font-family:
        "Pretendard",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;
}


/* =========================================================
   상단 타이틀
========================================================= */

#terms .bm-join-header {
    margin-bottom:52px;
    text-align:center;
}

#terms .bm-join-header h1 {
    margin:0;
    padding:0;

    color:#111;

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

#terms .bm-join-header > p {
    margin:12px 0 0;

    color:#777;

    font-size:14px;
    font-weight:400;
    line-height:1.6;
    letter-spacing:-0.3px;
}


/* =========================================================
   가입 단계
========================================================= */

#terms .bm-join-step {
    display:flex;

    width:100%;

    margin-top:38px;

    border-top:1px solid #e4e4e4;
    border-bottom:1px solid #e4e4e4;
}

#terms .bm-join-step span {
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    width:33.333%;
    height:58px;

    color:#999;

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

    background:#fff;
}

#terms .bm-join-step span + span:before {
    content:"";

    position:absolute;
    left:0;
    top:18px;

    width:1px;
    height:22px;

    background:#e8e8e8;
}

#terms .bm-join-step strong {
    color:#bbb;
    font-size:11px;
    font-weight:600;
}

#terms .bm-join-step span.active {
    color:#111;
    font-weight:700;
}

#terms .bm-join-step span.active strong {
    color:#111;
}


/* =========================================================
   약관 전체
========================================================= */

#terms .new-privercy-contract,
#terms .bm-terms-wrap {
    width:100%;
    margin:0;
}


/* =========================================================
   개별 약관
========================================================= */

#terms .bm-agree-section {
    width:100%;
    margin-top:38px;
}

#terms .bm-section-title {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    width:100%;

    margin-bottom:13px;
}

#terms .bm-section-title h2 {
    margin:0;

    color:#222;

    font-size:17px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:-0.6px;
}

#terms .bm-section-title p {
    margin:5px 0 0;

    color:#888;

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

#terms .bm-required {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:38px;
    height:22px;

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

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

    color:#222;

    font-size:11px;
    font-weight:600;
}


/* =========================================================
   이용약관 내용
========================================================= */

#terms .privercy-contract {
    width:100%;
    margin:0;
}

#terms .privercy-contract textarea {
    display:block;

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

    margin:0;
    padding:18px 20px;

    resize:none;

    border:1px solid #dedede;
    border-radius:4px;
    outline:0;

    background:#fafafa;

    color:#666;

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

    font-size:12px;
    font-weight:400;
    line-height:1.7;

    letter-spacing:-0.2px;
}

#terms .privercy-contract textarea:focus {
    border-color:#aaa;
}


/* =========================================================
   이용약관 체크박스
========================================================= */

#terms .privercy-chk,
#terms .privercy-agree {
    margin:0;
}

#terms .bm-agree-check,
#terms .privercy-chk {
    display:flex;
    justify-content:flex-end;
    align-items:center;

    min-height:48px;

    margin-top:0 !important;

    padding:0 3px;

    text-align:right;
}

#terms .bm-agree-check label,
#terms .privercy-chk label {
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#444;

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

    cursor:pointer;
}

#terms input[type="checkbox"] {
    width:18px !important;
    height:18px !important;

    margin:0;

    vertical-align:middle;

    accent-color:#111;
    cursor:pointer;
}


/* =========================================================
   메이크샵 자동 개인정보 약관 영역
========================================================= */

#terms .bm-privacy-area {
    width:100%;
    margin-top:35px;
}


/* 자동 생성되는 제목 */

#terms .bm-privacy-area h3,
#terms .new-privercy-contract > h3 {
    position:relative;

    margin:36px 0 12px;
    padding:0;

    color:#222;

    font-size:16px;
    font-weight:700;
    line-height:1.5;
    text-align:left;

    letter-spacing:-0.5px;
}

#terms .bm-privacy-area h3 span,
#terms .new-privercy-contract h3 span {
    color:#222;
}


/* =========================================================
   전체동의 / 개인정보 동의 박스
========================================================= */

#terms #chkwrap {
    overflow:hidden;

    width:100%;

    margin-top:10px;

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

    background:#fff;
}


/* 전체 동의 */

#terms #chkwrap .all-chk {
    display:flex;
    align-items:center;

    height:62px;

    padding:0 20px;

    border-bottom:1px solid #e8e8e8;

    background:#fafafa;

    color:#111;

    font-size:15px;
    font-weight:700;
    line-height:normal;
}

#terms #chkwrap .all-chk .input-cbox {
    width:19px !important;
    height:19px !important;

    margin:0 9px 0 0 !important;

    accent-color:#111;
}


/* 개별 동의 */

#terms #chkwrap .cont {
    padding:5px 20px 12px;
}

#terms #chkwrap .cont ul {
    display:flex;
    flex-wrap:wrap;

    margin:0;
    padding:10px 0;

    list-style:none;
}

#terms #chkwrap .cont ul:after {
    display:none;
}

#terms #chkwrap .cont ul li {
    float:none;

    width:50%;

    margin:0;
    padding:9px 0;

    color:#444;

    font-size:13px;
    line-height:1.5;

    list-style:none;
}

#terms #chkwrap .cont label {
    font-weight:500;
    cursor:pointer;
}

#terms #chkwrap .cont strong {
    color:#111;
    font-weight:700;
}


/* 상세보기 버튼 */

#terms #chkwrap .cont ul li a {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:auto;
    height:24px;

    margin:0 0 0 7px;
    padding:0 8px;

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

    background:#fff;

    color:#777;

    font-size:11px;
    font-weight:400;
    line-height:22px !important;

    text-decoration:none;
}

#terms #chkwrap .cont ul li a:hover {
    border-color:#aaa;

    color:#222;

    background:#fff;
}


/* 마케팅 선택동의 */

#terms #chkwrap .cont .marketing {
    margin-top:4px;
    padding:15px 0 4px;

    border-top:1px solid #eee;

    line-height:1.6;
}

#terms #chkwrap .cont .marketing .mk-wrap {
    display:flex;
    align-items:center;

    min-height:34px;
    height:auto;

    line-height:normal;
}

#terms #chkwrap .cont .marketing .mk-wrap input {
    margin-right:7px;
}


/* =========================================================
   개인정보 표
========================================================= */

#terms .tbl,
#terms .contract-tbl {
    width:100%;

    margin:10px 0 0;
    padding:0;

    border-collapse:collapse;
    border-spacing:0;

    border-top:1px solid #ddd;
    border-left:0;
}

#terms .tbl caption,
#terms .contract-tbl caption {
    display:none;
}

#terms .tbl th,
#terms .tbl td,
#terms .contract-tbl th,
#terms .contract-tbl td {
    height:auto;

    padding:14px 12px;

    border-left:0;
    border-right:1px solid #e3e3e3;
    border-bottom:1px solid #e3e3e3;

    color:#444;

    font-size:12px;
    font-weight:400;
    line-height:1.55;

    letter-spacing:-0.2px;

    text-align:center;

    word-break:keep-all;
}

#terms .tbl th:first-child,
#terms .tbl td:first-child,
#terms .contract-tbl th:first-child,
#terms .contract-tbl td:first-child {
    border-left:1px solid #e3e3e3;
}

#terms .tbl th,
#terms .contract-tbl th {
    background:#fafafa;

    color:#333;

    font-weight:600;
}

#terms .new-privercy-contract .tbl td {
    background:#fff;
}

#terms .contract-tbl th div {
    height:auto;
    line-height:1.5;
}

#terms .contract-tbl tbody th {
    font-weight:500;
}

#terms .tbl td ul,
#terms .tbl td ul li {
    margin:0;
    padding:0;

    list-style:none;
}

#terms .tbl td ul {
    width:auto;
}

#terms .tbl td .txt-l {
    padding:0;
    text-align:left;
}


/* =========================================================
   자동 출력 안내 문구
========================================================= */

#terms .privacy-noti,
#terms .btm-msg {
    margin:9px 0 0;
    padding:0;

    color:#888;

    font-size:11px;
    font-weight:400;
    line-height:1.6;
}


/* =========================================================
   기존 제목 제거/정돈
========================================================= */

/* =========================================================
   개인정보 자동생성 영역 제목
========================================================= */

#terms h4.tit {
    display:block;

    margin:38px 0 12px;
    padding:0;

    color:#222;

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

    letter-spacing:-0.5px;

    text-align:left;
}

/* 기존 이용약관용 제목만 숨김 */
#terms h4#chk_cont1 {
    display:none;
}


/* =========================================================
   탭형 구형 개인정보
========================================================= */

#terms .privercy-contract-tap {
    height:auto;
    margin-bottom:10px;
}

#terms .privercy-contract-tap ul {
    display:flex;

    width:100%;

    margin:0;
    padding:0;

    border:1px solid #ddd;

    list-style:none;
}

#terms .privercy-contract-tap li {
    flex:1;

    margin:0;
    padding:0;

    list-style:none;
}

#terms .privercy-contract-tap li + li {
    border-left:1px solid #ddd;
}

#terms .privercy-contract-tap a {
    display:flex;
    align-items:center;
    justify-content:center;

    height:44px;

    color:#777;

    font-size:12px;
    text-decoration:none;

    background:#fff;
}

#terms .privercy-contract-tap li.sel a {
    color:#111;
    font-weight:600;

    background:#f7f7f7;
}


/* =========================================================
   구형 라디오 선택
========================================================= */

#terms .bm-radio-agree {
    display:flex;
    justify-content:flex-end;
    gap:20px;

    margin-top:12px;
}

#terms .bm-radio-agree label {
    display:flex;
    align-items:center;
    gap:6px;

    color:#555;

    font-size:13px;
}

#terms input[type="radio"] {
    width:17px;
    height:17px;

    accent-color:#111;
}


/* =========================================================
   가입 버튼
========================================================= */

#terms .btn-agree,
#terms .bm-join-submit {
    width:100%;

    margin-top:42px;
}

#terms .btn-agree a,
#terms .bm-join-submit a {
    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;
}

#terms .btn-agree a:hover,
#terms .bm-join-submit a:hover {
    border-color:#333;

    background:#333;

    color:#fff;
}


/* 가입 버튼 아래 안내 */

#terms .bm-join-notice {
    margin:14px 0 0;

    color:#999;

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

    text-align:center;
}


/* =========================================================
   구형 동의/취소 버튼
========================================================= */

#terms .bm-old-buttons {
    display:flex;
    gap:8px;

    width:100%;

    margin-top:38px;

    font-size:14px;
    line-height:normal;
}

#terms .bm-old-buttons a {
    display:flex;
    align-items:center;
    justify-content:center;

    height:54px;

    margin:0;

    border-radius:4px;

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

    text-decoration:none;
}

#terms .bm-old-agree {
    flex:1;

    background:#111;

    color:#fff;
}

#terms .bm-old-cancel {
    width:120px;

    border:1px solid #ddd;

    background:#fff;

    color:#555;
}


/* =========================================================
   모바일
========================================================= */

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

    #terms.bm-join-terms {
        width:100%;
        max-width:none;

        padding:45px 18px 70px;
    }


    #terms .bm-join-header {
        margin-bottom:35px;
    }


    #terms .bm-join-header h1 {
        font-size:25px;
    }


    #terms .bm-join-header > p {
        padding:0 10px;

        font-size:13px;
    }


    #terms .bm-join-step {
        margin-top:28px;
    }


    #terms .bm-join-step span {
        gap:4px;

        height:52px;

        font-size:12px;
    }


    #terms .bm-agree-section {
        margin-top:30px;
    }


    #terms .privercy-contract textarea {
        height:150px !important;

        padding:15px;

        font-size:11px;
    }


    #terms #chkwrap .all-chk {
        height:56px;

        padding:0 14px;

        font-size:14px;
    }


    #terms #chkwrap .cont {
        padding:5px 14px 12px;
    }


    #terms #chkwrap .cont ul {
        display:block;
    }


    #terms #chkwrap .cont ul li {
        width:100%;
    }


    #terms .tbl,
    #terms .contract-tbl {
        table-layout:fixed;
    }


    #terms .tbl th,
    #terms .tbl td,
    #terms .contract-tbl th,
    #terms .contract-tbl td {
        padding:10px 5px;

        font-size:10px;

        word-break:break-all;
    }


    #terms .btn-agree a,
    #terms .bm-join-submit a {
        height:56px;

        font-size:15px;
    }


    #terms .bm-old-buttons {
        flex-direction:column;
    }


    #terms .bm-old-cancel {
        width:100%;
    }

}
/* BASIC css end */