body{background-color: #eee;}
.logo{margin: 50px auto 0; display: block; width: 200px; height: 35px;
    background: url(../../common/images/logo.png) left no-repeat; text-indent: -999px ; overflow: hidden;
}
#content{width: 750px; margin: 50px auto; background: #fff; border-radius: 10px;
     padding: 70px; font-family: 'Noto Sans KR', sans-serif;}  


    .member_tab{padding: 30px 0;border-top: 1px solid #333;}
    .member_tab a{font-size: 24px;padding: 10px;margin: 0 10px;color: #aaa;}
    .member_tab a.on{color: #fff;border-bottom: 2px solid #333;font-weight: bold}
    .member_tab span{font-size: 24px;padding: 10px;margin: 0 10px;color: #fff;font-weight: bold}

    .join{text-align: left; position: relative;}
    .join h4{font-size: 20px;margin: 30px 0 -7px; color: #333;}
    .join h3{font-size: 28px; color: #333; margin-left: 42%; position: relative;}
    
   
    .join .policy{padding: 10px; overflow-y: scroll; height: 80px; margin: 20px 0 10px ;border: 1px solid #ddd;
        background: #fff; font-size: 14px; line-height: 1.5em;}
    .join .check{color: #333; margin: 0 0 60px; }
    /* .join .check p{display: inline-block; } */
    

    .join .button{text-align: center;margin-top: 30px}
    .join .button .ok,.join .button button,.join .allcheck{display: inline-block;
        width: 300px;line-height: 50px; height: 50px; padding: 8px 0;border: none;
        background: var(--font-color-main);color: #fff;font-size: 1.1em;cursor: pointer;
        margin: 0 5px;}
    .join .button .cancel{display: inline-block;width: 200px;line-height: 24px;padding: 8px 0;border: none;background: #999;color: #fff;font-size: 14px;cursor: pointer}
    .join .allcheck{background: transparent; border: 1px solid #046f9e; color: var(--font-color-main);} 


    /* 체크박스 UI변경 */
    input[type=checkbox] + label::before {           /* + => 친구라는 의미 */
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: transparent;
        border: 1px solid #999;
        content: '';
        margin: 0px 15px -3px 0px;
    }
    input[type=checkbox] {
        display: none;
    }
    input[type=checkbox] + label {
        cursor: pointer;
    }
    /* 체크박스타입의 인풋이 :checked  => 체크되면 + 라벨의 비포*/
    input[type=checkbox]:checked + label::before {
        background: #fff url(../images/checked_bg.png) center center no-repeat;
        border: 1px solid #e3e9fe;
    }