body{background-color: var(--font-color1); }
.logo{margin: 50px auto; display: block; 
    background: url(../../images/common/lotte_Logox2.svg) center no-repeat;
    text-indent: -999px; overflow: hidden;
}
#content{
    margin: 50px auto; background: #fff;
    font-family: 'Noto Sans KR', sans-serif;
    padding: 20px;
}  


.member_tab{padding: 30px 0;border-top: 1px solid #333;}
.member_tab a{font-size: 1rem;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: 1rem;padding: 10px;margin: 0 10px;color: #fff;font-weight: bold}

.join{text-align: left; position: relative;}
.join h4{font-size: 1.2rem;margin: 30px 0 0;}
.join h3{font-size: 1.5rem; font-weight: 600;  text-align: center;}


.join .policy{
    padding: 10px; overflow-y: scroll; height: 80px; margin: 10px 0;border: 1px solid #ddd;
    background: #fff; font-size: .9rem; line-height: 1.3rem;
}
.join .check{margin: 20px 0 30px;}
.join .button{text-align: center;margin-top: 30px; display: flex;justify-content: center; gap: 10px;
}

.join .button .ok,
.join .button button,
.join .allcheck{
    display: inline-block;
    width:160px;height: 40px; padding: 8px 0; border: none;
    background: var(--font-color-point1);color: #fff;font-size: 1.15rem; cursor: pointer;
    border-radius: 5px;
    box-sizing: border-box;
}
.join .button .cancel{
    display: inline-block;
    width: 200px;
    line-height: 24px;
    padding: 8px 0;border: none;
    background: #999;color: #fff;
    font-size: 1rem;cursor: pointer;
}
.join .allcheck{
    background: transparent; 
    border: 1px solid var(--font-color-point1); 
    color:var(--font-color-point1);
} 


/* 체크박스 UI변경 */
input[type=checkbox] + label::before {           /* + => 친구라는 의미 */
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: transparent;
    border: 1px solid #999;
    content: '';
    margin: 0px 15px -5px 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;
}