@charset "utf-8";

.join_wrap { margin:0 auto; max-width:500px; }

/* logo */
.join_wrap .logo { padding-top:70px; width:80%; margin:0px auto; cursor:pointer; text-align:center; }
.join_wrap .logo p { 
	font-family:"Slabo 27px", serif; font-weight:400;
	background:transparent; border:0px; margin:0px; padding-top:13px; text-align:center; font-size:60px; color:var(--black_19);
}
.join_wrap .logo p.small { font-size:32px; margin-top:-10px; letter-spacing:5px; }

/* form */
.join_wrap .form_wrap { margin-top:50px; display:flex; flex-direction:column; }

/* explain */
.join_wrap .form_wrap .explain_box { padding-bottom:40px; }
.join_wrap .form_wrap .explain_box h1 { color:var(--black_19); font-size:20px; line-height:150%; text-align:left; }
.join_wrap .form_wrap .explain_box h2 { padding-top:20px; color:var(--gray500); font-size:14px; line-height:150%; }

/* input */
.join_wrap .form_wrap .input_box { display:flex; flex-direction:column; text-align:left; gap:30px; padding-bottom:20px; }
.join_wrap .form_wrap .input_box dl dt { margin-bottom:4px; color:var(--gray400); font-size:14px; line-height:150%; }
.join_wrap .form_wrap .input_box dl dd { display:flex; justify-content:space-between; flex-direction:row; align-items:center; border-bottom:1px solid var(--black_19);  }

.join_wrap .form_wrap .input_box dl dd input[readonly] { margin-bottom:8px; }
.join_wrap .form_wrap .input_box dl dd input { padding:11px 0; width: 100%; height:48px; line-height: 26px; border:0; box-sizing: border-box; color:var(--black_19); font-size:22px; font-weight: 600;}
.join_wrap .form_wrap .input_box dl dd input:focus{ outline: 0; }
.join_wrap .form_wrap .input_box dl dd input::placeholder{ color:var(--gray600); font-weight:400; font-size:14px; }

.join_wrap .form_wrap .input_box dl dd button.btn_type_2 { padding: 10px 0; width:60px; line-height: 19px; color:var(--black_19); font-weight: 600;cursor: pointer; text-align: center;}

.join_wrap .form_wrap .input_box dl dd.-noline{ border-bottom:0; } /* resend */
.join_wrap .form_wrap .input_box dl dd.-noline button{ margin:14px 0px 20px 0px; background:#fff; padding:10px 0px 20px 0px; height:17px; line-height:17px; color:var(--gray400); font-size:14px; font-weight:600; border-bottom:1px solid #fff; }
.join_wrap .form_wrap .input_box dl dd.-noline button:hover{ border-bottom:1px solid var(--gray400); }

.join_wrap .form_wrap .input_box dl dd.err_txt{ display:none; margin-top:10px; color:var(--point_red); font-size:14px; border:0; }
.join_wrap .form_wrap .input_box dl dd .timer{ margin-left:-48px; margin-right:10px; color:var(--black_19); font-size:14px; }

/* input - error */
.join_wrap .form_wrap .input_box dl.-err dd{ border-color:var(--point_red); }
.join_wrap .form_wrap .input_box dl.-err dd.err_txt{ display:block; }

/* input - cert */
.join_wrap .form_wrap .input_box dl.cert dd.-noline { margin-bottom:-20px; } /* display:none; */

/* term */
.join_wrap .form_wrap .check_box { padding:0px 0px 40px 0px; }
.join_wrap .form_wrap .check_box p { color:var(--gray400); font-size:14px; }
.join_wrap .form_wrap .check_box .chk_list { margin-top: 15px; }
.join_wrap .form_wrap .check_box .chk_list input[type="checkbox"] { display:none; }
.join_wrap .form_wrap .check_box .chk_list label { display:block; color:var(--black_19); font-size:16px; line-height:30px; cursor:pointer; padding:5px 0px 5px 0px; margin-bottom:2px; }
.join_wrap .form_wrap .check_box .chk_list input + label:before { content:''; width:20px; margin-right:7px; height:20px; display:inline-block; background: url(/images/comm/check_off.svg) no-repeat center center; background-size:cover; vertical-align:middle; margin-top:-2px; }
.join_wrap .form_wrap .check_box .chk_list input:checked + label:before { background-image:url(/images/comm/check_on_black.svg); }
.join_wrap .form_wrap .check_box .chk_list label .agree_go { width:50px; height:30px; background:url(/images/comm/arr_right_black.svg) no-repeat 30px center; float:right; }

/* link */
.join_wrap .form_wrap .link_box ul { display:flex; justify-content:left; padding-top:30px; gap:15px; }
.join_wrap .form_wrap .link_box ul li a{ font-size:16px; color:var(--gray400); }
.join_wrap .form_wrap .link_box ul li a:hover{ color:var(--gray200); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--gray200); }
.join_wrap .form_wrap .link_box ul li span{ font-size:16px; color:var(--gray400); }

.locked + label { pointer-events: none; opacity: 0.5; }

@media (max-width: 799px) {
	.join_wrap .logo { padding-top:50px; }
	.join_wrap .logo p { font-weight:500; }
	
	.join_wrap .form_wrap { margin:50px 30px; }
	
	.join_wrap .form_wrap .input_box dl dd .timer{margin-left: -80px;}
	.join_wrap .form_wrap .stage_box p{color:var(--black_19);font-size:16px;}
}

@media (max-width: 359px) {
}