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

/* IOT 재활용품 회수 */
.bmOder .join_wrap {position: relative;}
.bmOder .join_wrap .join_top {
	padding: 24px 16px;
	border-bottom: 1px solid #ededef;
}
.bmOder .join_wrap .join_top h3 {
	margin-bottom: 2px;
	font-size: 20px;
	font-weight: 500;
	color: #FFC400;
}
.bmOder .join_wrap .join_top span {
	font-size: 12px;
	font-weight: 400;
	color: #737373;
}

.bmOder .join_wrap form {padding: 24px 0 42px;}
.bmOder .join_wrap form > div {padding: 0 16px;}
.bmOder .join_wrap .all {
	display:inline-block;
	padding: 0 16px;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
}
.agr01 {margin-top: 40px;}
.agr01, .agr02, .agr04 {margin-bottom: 30px;}
.bmOder .join_wrap .jo_checkbox a {
	position: absolute;
	right: 16px;
	color: #737373;
	font-size: 12px;
	text-decoration: underline;
}
.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;
}
.bmOder .join_wrap input[id="agree"] + label {
	position: relative;
	display: block;
	width: 100%;
	height: 40px;
	line-height: 37px;
	background: #F9F9F9;
	border: 1px solid #eee;
	transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
}
.bmOder .join_wrap input[id="agree"] + label span {
	padding-left: 32px;
	font-size: 14px;
	color: #202020;
}
.bmOder .join_wrap input[id*="agree"] + label::before {
	content: '';
	position: absolute;
	top: 50%;
	width: 24px;
	height: 24px;
	background: url(../../../images/userApp/common/join_chk_off24.png)no-repeat center/ 24px auto;
	vertical-align: top;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}
.bmOder .join_wrap input[id="agree"]:checked + label {
	border: 1px solid #FFC400;
	background: #FFC400;
}
.bmOder .join_wrap input[id="agree"]:checked + label span {color: #fff;}
.bmOder .join_wrap input[id="agree"]:checked + label::before {
	background: url(../../../images/userApp/common/join_chk_onw24.png)no-repeat center/ 24px auto;
}
.join_wrap input[id*="agree"] { display: none;}
.join_wrap .jo_checkbox:not(:nth-of-type(1)) input[id*="agree"] + label{
	position: relative;
	display: inline-block;
	padding-left: 32px;
	font-size: 14px;
	font-weight: 400;
	color: #202020;
} 
.jo_checkbox:not(:nth-of-type(1)) input[id*="agree"] + label::before {left: 0;}
.jo_checkbox:not(:nth-of-type(1)) input[id*="agree"]:checked + label::before {
	background: url(../../../images/userApp/common/join_chk_on24.png)no-repeat center/ 24px auto;
}
/* .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 {
	padding: 0 16px;
	width: 100%;
	height: 56px;
	line-height: 56px; 
}
.bmOder .join_wrap .jo_btn a {
	display: block;
	margin: 0 auto;
	font-size: 14px;
	color: #FFC400;
	text-align: center;
	border: 1px solid #FFC400;
}

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


.termsArea {padding: 16px; font-size:15px;}
.termsArea h1{
	margin:26px 5px 10px;
	padding: 10px;
	text-align:center;
	font-size:20px;
	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 14px;}
.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 54px;}
.termsArea .dep4 span{position:relative; margin-left:-20px;}
.termsArea table{}
.termsArea th{
	padding:5px;
	height:40px;
	background:#A0B4E6;
	border:1px solid #000000;
}
.termsArea td{
	padding:5px;
	text-align:left;
	border:1px solid #000000;
}

/* 휴대폰인증 */
.join_wrap .phon_con {padding: 75px 16px 40px!important;}
.join_wrap .phon_con img {
	display: block;
	margin: 0 auto 37px;
	height: 84px;
}
.join_wrap .phon_con span {
	display: block;
	padding: 16px;
	background: #F9F9F9;
	border: 1px solid #eee;
	color: #737373;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	word-break: break-all;
}

/* 정보입력 */
.bmOder .join_wrap div {display: block; padding: 0 16px;}
.bmOder .join_wrap .jointxt_item {padding: 16px 16px 0;}
.bmOder .join_wrap .jointxt_item span {
	display: block;
	margin: 0 0 6px 4px;
	font-size: 14px;
}
.bmOder .join_wrap .jointxt_item input {height: 40px; border-radius: 0;}

.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: 39px; line-height: 39px; text-align: center; background: #7e7e7e; font-size: 13px; color: #fff;}

.bmOder .join_wrap input[id*="agree"] { display: none;}
/* .bmOder .join_wrap input[id*="agree"] + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 15px;
	height: 15px;
	transform: translateY(-50%);
	border: 1px solid #aaa;
} */
.bmOder .join_wrap input::-webkit-input-placeholder {opacity: 1; transition: all 0.5s; font-size: 14px;}
.bmOder .join_wrap input:focus::-webkit-input-placeholder {text-indent:20px; opacity: 0; font-size: 14px;}

.bmOder .join_wrap .jo_btn {width: 100%; height: 50px; line-height: 50px;  margin: 13px auto 0;}


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

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