/* BASIC css start */
.join{padding-bottom:80px;}
.join .tableBox{padding-top:32px; margin-bottom:32px;}
.join .tableBox .info-detail{padding-bottom:32px}
.join .tableBox .info-detail li{padding-bottom:24px;}
.join .tableBox .info-detail li:last-child{padding-bottom:0;}
.join .tableBox .info-detail li:not(.sns) > span{font-size:14px; font-weight:500; line-height:17px; color:#1F1F1F; padding-bottom:8px; display:inline-block;}
.join .tableBox .info-detail li > span.point::after{content:'*'; font-size:14px; font-weight:500; line-height:17px; color:#F06D48;}
.join .tableBox .info-detail li .input{}
.join .tableBox .info-detail li .input input[disabled]{font-size:16px; font-weight:500; line-height:19px; color:#000; padding:12px 16px; background:#F2F2F2; display:inline-block; border:0;}
.join .tableBox .info-detail li .input input[type=checkbox][disabled]{padding:0;}
.join .tableBox .info-detail li .input.birthday dl{display:flex; justify-content:space-between; flex-wrap: wrap; font-size:0; line-height:0;}
.join .tableBox .info-detail li .input.birthday dl dd{width:calc((100% - 16px)/3); text-align:center; margin-left:8px;}
.join .tableBox .info-detail li .input.birthday dl dd:first-child{margin-left:0;}
.join .tableBox .info-detail li .input.birthday .birth-txt{font-size:0; line-height:0;}
.join .tableBox .info-detail li .input.gender dl{display:flex; justify-content:space-between; flex-wrap: wrap;}
.join .tableBox .info-detail li .input.gender dl dd{width:calc((100% - 16px)/3); text-align:center; margin-left:8px;}
.join .tableBox .info-detail li .input.gender dl dd:first-child{margin-left:0;}
.join .tableBox .info-detail li .input.gender dl dd label{border:solid 1px #000; padding:12px 0; width:100%; display:block;}
.join .tableBox .info-detail li .input.gender dl dd label:has(> input:checked) {background:#000; color:#fff;}
.join .tableBox .info-detail li .input.gender dl:has(input:disabled) dd label{border:solid 1px #D9D9D9;}
.join .tableBox .info-detail li .input.gender dl:has(input:disabled) dd label:has(> input:checked) {background:#F2F2F2; color:#000; border:solid 1px #F2F2F2;}
.join .tableBox .info-detail li .input.gender dl dd label input{display:none;}
.join .tableBox .info-detail li .input.email input[type=email]{width:100% !important;}
.join .tableBox .info-detail li .input.phone{display:flex;}
.join .tableBox .info-detail li .input.phone input{width:calc(100% - ((100% - 16px)/3));}
.join .tableBox .info-detail li .input.phone #sms_btn{width:calc((100% - 16px)/3); margin-left:8px; border:solid 1px #D9D9D9;}
.join .tableBox .info-detail li .input.phone #sms_btn a{display:block; text-align:center; height:42px; line-height:42px; font-size:16px; font-weight:500; color:#999;}
.join .tableBox .info-detail li .input.phone #sms_btn.active{border:solid 1px #000; background:#000}
.join .tableBox .info-detail li .input.phone #sms_btn.active a{color:#fff;}
.join .tableBox .info-detail li .input.phone #resms_btn{width:calc((100% - 16px)/3); margin-left:8px; border:solid 1px #000; background:#000;}
.join .tableBox .info-detail li .input.phone #resms_btn a{display:block; text-align:center; height:42px; line-height:42px; font-size:16px; font-weight:500; color:#fff;}
.join .tableBox .info-detail li.sms_auth{display:none;}
.join .tableBox .info-detail li .input .sms_num{width:calc((100% - 16px)/3); margin-left:8px; border:solid 1px #000000; background:#000000;}
.join .tableBox .info-detail li .input .sms_num a{display:block; text-align:center; height:45px; line-height:45px; font-size:16px; font-weight:500; color:#fff;}



.join .tableBox .info-detail li .input > p{width:100%; padding-top:4px;}
.join .tableBox .info-detail li .input > p span{font-size:12px; font-weight:500; line-height:14px; color:#999; }

.join .user_age_wrap{margin-bottom:8px;}
.join .user_age_wrap label{font-size:14px; font-weight:500; line-height:17px; color:#242424; display:block; margin-bottom:8px;}
.join .user_age_wrap label input{margin-right:8px;}
.join .user_age_wrap + span{font-size:12px; font-weight:500; line-height:14px; color:#999; display:block; margin-bottom:32px;}
.join .user_age_wrap + span + label{font-size:14px; font-weight:500; line-height:17px; color:#242424; display:block; padding-bottom:16px;}
.join .user_age_wrap + span + label input{margin-right:8px;}

.join .form-terms{padding:16px 0; border-top:solid 1px #000000; border-bottom:solid 1px #000000;}
.join .form-terms > div.form-wrap{margin:0; padding:0; padding-bottom:12px; border:none;}
.join .form-terms .form-wrap h4.form-title{padding-left:28px; font-size:14px; font-weight:500; line-height:17px; color:#242424;}
.join .form-terms .form-wrap h4.form-title .btn-toggle{position:absolute; right:0; top:50%; transform:translateY(-50%); background-image:url(/design/justmysize/ECHO/icon/ico_20_arrow_down%201.svg); width:20px; height:20px; padding:0; background-repeat:no-repeat; background-position:center; background-size:contain;}
.join .form-terms .form-wrap h4.form-title.on .btn-toggle{transform:translateY(-50%) rotate(180deg)}
.join .form-terms .form-wrap h4.form-title .btn-toggle img{display:none;}
.join .form-terms .form-wrap .title-wrap .checkbox{right:auto; left:0; top:50%; transform:translateY(-50%);}
.join .form-terms .form-wrap .title-wrap .checkbox label{font-size:0;}
.join .form-terms .form-wrap .title-wrap + .inner{padding:0; padding-top:12px;}
.join .form-terms .form-wrap .title-wrap + .inner .privercy-contract textarea{width:100%; padding:12px 16px; font-size:10px; font-weight:400; line-height:12px; color:#666; background:none; border:solid 1px #D9D9D9; border-radius:0; height:224px;}
.join .form-terms .form-wrap .title-wrap + .inner table tr th{border:solid 1px #D9D9D9; background:#F7F7F7; font-size:12px; font-weight:500; line-height:14px; color:#666; padding:15px 16px;}
.join .form-terms .form-wrap .title-wrap + .inner table tr th *{font-size:12px; font-weight:500; line-height:14px; color:#666;}
.join .form-terms .form-wrap .title-wrap + .inner table tr td{font-size:12px; font-weight:400; line-height:14px; color:#666; padding:15px 16px; border:solid 1px #D9D9D9}
.join .form-terms .form-wrap .title-wrap + .inner table tr td *{font-size:12px; font-weight:400; line-height:14px; color:#666; }
.join .form-terms .form-wrap .title-wrap + .inner table tr td:nth-child(3){width:52px;}
.join .form-terms .form-wrap .title-wrap + .inner .privacy-noti{font-size:14px; font-weight:500; line-height:17px; color:#999; margin-top:8px;}

.join .joinBtn{display:block; width;100%; background:#000; color:#fff; padding:12px 0; font-size:16px; font-weight:500; line-height:19px; text-align:center;}
/* BASIC css end */