@charset "utf-8";
/* CSS Document */

.bmOder .join_wrap {position: relative; padding: 30px 0 0;}
.bmOder .join_wrap div {display: block; padding: 0 16px;}
.bmOder .join_wrap h3 {padding: 0 0 0 10px; width: 100%; height: 46px; font-size: 14px; font-weight: 500; color: #fff; background: #101010; line-height: 46px;}
.bmOder .join_wrap .jo_checkbox a {position: absolute; right: 16px; color: #a5a5a5; font-size: 14px; line-height: 56px;}
.bmOder .join_wrap .all {display:inline-block; height: 54px; line-height: 54px;}
.bmOder .join_wrap button {display: block; margin: 13px 0 0 0; width: 100%; height: 50px; line-height: 50px; text-align: center; background: #7e7e7e; font-size: 13px; color: #fff;}
.jo_checkbox {height: 56px; line-height: 56px;}

.bmOder .join_wrap input[id*="agree"] { display: none;}
.bmOder .join_wrap input[id*="agree"] + label{position: relative; padding: 0 0 0 30px; font-size: 16px; display: inline-block; line-height: 22px;}
.bmOder .join_wrap input[id*="agree"] + label:before {content: ''; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); border: 1px solid #aaa;}
.bmOder .join_wrap input[id*="agree"]:checked + label:before {background: #fff;}
.bmOder .join_wrap input[id*="agree"] + label:after {content: ''; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); border: 1px solid #aaa;
background: url("../../images/userApp/common_check.png") no-repeat center center / 0 auto;}
.bmOder .join_wrap input[id*="agree"]:checked + label:after {background-size: 16px auto;}

.bmOder .join_wrap .jo_btn {width: 100%; height: 50px; line-height: 50px;  margin: 20px auto 0;}
.bmOder .join_wrap .jo_btn a { display: block; margin: 0 auto; font-size: 16px; color: #fff; text-align: center; background: #7e7e7e;}

.agreeNote{line-height:18px; font-size:.7rem;}


#termsArea {font-size:15px;}
#termsArea h1{text-align:center; font-size:20px; margin:26px 5px 10px; padding: 10px; background: #333; color: #fff;}
#termsArea h1:nth-child(1) {margin-top: 10px;}
#termsArea h2{font-size:16px; margin:10px 5px;}
#termsArea p{font-size: 14px; line-height:1.5;}
#termsArea .dep1{margin:0 5px 14px 24px;}
#termsArea .dep1 span{position:relative; margin-left:-20px;}
#termsArea .dep2{margin:0 5px 14px 36px;}
#termsArea .dep2 span{position:relative; margin-left:-20px;}
#termsArea .dep3{margin:0 5px 4px 54px;}
#termsArea .dep3 span{position:relative; margin-left:-20px;}
#termsArea .dep4{margin:0 5px 14px 70px;}
#termsArea .dep4 span{position:relative; margin-left:-20px;}

/*top_button*/
.scrollUp img {width: 36%; height: 22%;}
.scrollUp { display:-webkit-flex; display: flex; justify-content: center; align-items: center; font-size: 35px; color: #fff; text-decoration: none; opacity: 0; pointer-events: none; transition: .5s;
background: rgba(170,170,170,.8); position: fixed; bottom: 16px; right: 16px; height: 50px; width: 50px; border-radius: 50%;}

.scrollUp.active {bottom: -24px; pointer-events: auto; opacity: 1; transform:translateY(-55px); z-index: 1000;}

/*표*/
table {table-layout: auto; width: 100%; min-width: 320px; max-width: 100%; overflow: hidden; border: 0; border-collapse: collapse; background-color: #FAFAFA; margin: auto; margin-bottom: 20px; text-align: center; font-size: 0.9em;}
table tr {height: 40px;}
table th {border: 1px solid #333; padding: 8px; background: #796B9B; color: #fff; font-weight: 400;}
table th:nth-child(3) {}
table td {border: 1px solid #333; padding: 8px;}