/* BASIC css start */
#join { max-width: 560px; margin: 40px auto }
#join .join_tt { font-size: 32px; line-height: 1.25; letter-spacing: 0.5px; text-align: center; }
#personInfo { margin-top: 50px; padding: 15px 0; border-top: 1px solid #e0e0e0; }
.join_list li {  margin-bottom: 15px; }
.join_list li:last-child { margin-bottom: 0; }
.join_list li .input_box { height: 50px; position: relative; }
.join_list li .input_box input { margin-right: 0 }
.join_list li .input_box .label { position: absolute; left: 20px; top: 14px; font-size: 15px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.67; opacity: 0.5; letter-spacing: normal; color: #000; z-index: 1; -webkit-transition: font-size 150ms ease-out, -webkit-transform 150ms ease-out; transition: font-size 150ms ease-out, -webkit-transform 150ms ease-out; -o-transition: transform 150ms ease-out, font-size 150ms ease-out; transition: transform 150ms ease-out, font-size 150ms ease-out; transition: transform 150ms ease-out, font-size 150ms ease-out, -webkit-transform 150ms ease-out;}
.join_list li select {box-sizing:border-box; padding-left:20px; background-position:center right 16px; }

.join_list li .input_box.focused .label, .join_list li .input_box.filled .label { -webkit-transform: translateY(-70%); -ms-transform: translateY(-70%); transform: translateY(-70%); font-size: .75em; }
.join_list li .input_box .label~input[type="text"],.join_list li .input_box .label~input[type="password"] {text-indent: 20px;position: relative;padding: 12px 0px 5px 0;outline: 0;border: 0;-webkit-transition: -webkit-box-shadow 150ms ease-out;transition: -webkit-box-shadow 150ms ease-out;-o-transition: box-shadow 150ms ease-out;transition: box-shadow 150ms ease-out;transition: box-shadow 150ms ease-out, -webkit-box-shadow 150ms ease-out;overflow: hidden;width: 100%;height: 100%;background-color: #fff;border: none;float: left;display: block;line-height: 1;font-size: 14px;box-sizing: border-box;border: 1px solid #dedede;}
.join_list li .input_box .cbtn { position: absolute; top: 16px; right: 10px; }
.join_list li .idpw-info { text-align: right; margin-top: 4px; font-size: 12px; } 

.join_list li.bg .label {display:none; }

.join_list li.id .input_box {background-color: #fff;}

.join_list li.birth .birth_box { color:#000; font-size:14px; }
.join_list li.birth .birth_box select:nth-child(1) {margin-left:0 }
.join_list li.birth .birth_box select {width:calc(33.33% - 46px);position:relative;background-color: #fff;border: none;margin:0 10px 0 30px;height: 50px;color:#000;border: 1px solid #dedede;}

.join_list li.gender .gender_box {font-size:0;box-sizing: border-box;letter-spacing: 0;border: none;}
.join_list li.gender .gender_box label {font-size:14px;text-align:center;width:33.33%;display:inline-block;height: 49px;line-height: 49px;border: 1px solid #dedede;border-left:0;box-sizing:border-box;cursor: pointer;background:#fff;margin: 0;}
.join_list li.gender .gender_box label.on {background:#000; color:#fff}
.join_list li.gender .gender_box label input {display:none; }
.join_list li.gender .gender_box label:nth-child(1) {border-left:1px solid #dedede; }
.join_list li.gender .gender_box label:last-child {border-right:1px solid #dedede; }

.join_list li.tel .tel_box { display: flex; align-items: center; justify-content: flex-start; }
.join_list li.tel .tel_box select {width: calc(33.33% - 46px);position: relative;background-color: #fff;border: none;margin: 0 10px 0 0px;height: 50px;color: #000;border: 1px solid #dedede;}
.join_list li.tel .tel_box input[type="text"]{padding:0 10px;height: 50px;background-color: #fff;border: none;margin:0 10px;box-sizing:border-box;border: 1px solid #dedede;}
.join_list li.tel .tel_box input[type="text"]:last-child {margin-right:0; }
.join_list li.tel .tel_box select, .join_list li.tel .tel_box input[type="text"] { width: calc(33.33% - 11px)}


.join_list li.email .input_box {display: flex; align-items: center; justify-content: flex-start; } 
.join_list li.email .input_box input[type="text"]{height: 50px;background-color: #fff;border: none;box-sizing:border-box;border: 1px solid #dedede;}
.join_list li.email .input_box #email1 {width:160px; margin-right:10px;  }
.join_list li.email .input_box #direct_email { width: calc(100% - 193px); margin-left: 10px; margin-top: 0 !important; box-sizing:border-box; }
.join_list li.email .input_box #email3 { width: 100%; box-sizing:border-box; padding-right: 100px;  padding:0 20px; }
.join_list li.email .input_box select { display: none; }

#personInfo.on .join_list li.id .input_box  {padding-top:20px; padding-left:20px; box-sizing:border-box;   border:1px solid #dedede  }



#agreeBox label {cursor: pointer;position:relative;display:inline-block;color:#000}
#agreeBox label input[type="checkbox"] {width: 16px;position:relative;height: 16px;margin:0 6px 0 0px !important;  -moz-appearance:none; -webkit-appearance:none; appearance:none;}
#agreeBox label input[type="checkbox"]:after {content:"";display:inline-block;width: 20px;height: 20px;border: 1px solid #dedede;border-radius: 100%;box-sizing:border-box;background:#fff;position: absolute;left: -2px;top: 10px;}
#agreeBox label input[type="checkbox"]:checked:after {background: #fff url(/design/jsmbeauty/img/icon_chk_on2.png) no-repeat center/72%;}
#agreeBox #every_agree:after {top:8px}


#agreeBox #chkwrap .p10 {padding:10px 20px !important;  }
#agreeBox #chkwrap .cont ul {width:100% !important;padding: 0  0  20px 0!important;}
#agreeBox #chkwrap .cont ul li {float: none !important;width: 100% !important;margin:0;position:relative;margin-bottom: 4px;}
#agreeBox #chkwrap .cont ul li:last-child {margin-bottom:0}
#agreeBox #chkwrap .cont ul li a {position:absolute;top: 13px;right:0;height: 8px !important;width: 13px !important;line-height: 1px !important;margin-top: 0 !important;margin-left: 5px;text-indent: -9999px;background: url(/images/common/ico_arrow_down.png)no-repeat center;border: none;}
#agreeBox #chkwrap .cont ul li.on a {background-image:url(/images/common/ico_arrow_up.png)};
#agreeBox #chkwrap .cont ul li label  {font-weight:400}
#agreeBox #chkwrap .cont ul li label input {margin-top: -5px !important;}
#agreeBox #chkwrap .all-chk {padding-left:16px !important;}
#agreeBox #chkwrap .cont .marketing {width:100% !important;padding: 0  0  20px 0!important;}
#agreeBox #chkwrap .cont .marketing .mk-wrap {height:auto !important; line-height:1.5 !important; margin:16px 0}
#agreeBox #chkwrap .cont .marketing .mk-wrap label {font-weight:400}
#agreeBox #chk_cont1 { /*border-top:1px solid #000; padding-top:40px */}
#agreeBox h4.tit {margin-top:24px; margin-bottom:10px; padding-left:0; }
#agreeBox #chkwrap .cont ul li label input, #agreeBox #chkwrap .cont .marketing .mk-wrap label input {margin-top: -5px !important;}

#agreeBox .privacy_area {display:none;padding-bottom: 40px;}

#agreeBox  #chkwrap  p {padding:0 !important}


#agreeBox .new-btn-area {border:none; }
#agreeBox .new-btn-area a { height:50px; line-height:50px; font-size:16px; width:100%; background:#000; border-color:#000}


/* 이용 약관 */
#join .privercy-contract textarea {width:97%;height:165px;font-size: 12px;word-wrap: break-word;word-break:keep-all;}
/* 개인정보 수집이용, 제3제공, 취급위탁 테이블 */
#join .contract-tbl { width:100%; border-spacing:0; border-collapse:collapse; }
#join .contract-tbl th,
#join .contract-tbl td {border:1px solid #e0e0e0;text-align:center;font-size: 11px;}
#join .contract-tbl th { background: #fcfcfc; }
#join .contract-tbl th div { height:41px; line-height:43px; font-size:12px }
#join .contract-tbl tbody th { font-weight:normal; }

#snsConnect {margin-top: 32px;}
#snsConnect li {margin-bottom: 10px;}
#snsConnect li .btn {display:inline-block;width:100%;text-align:center;border:1px solid #9E9E9E;height: 52px;line-height: 52px;box-sizing:border-box;border-radius:0;}
#snsConnect li .btn span {display:inline-block;padding-left:32px;background-repeat:no-repeat;background-position:center left;font-size: 16px;}
#snsConnect li.facebook .btn span {background-image:url(/design/jsmbeauty/img/ico_mo_facebook.png); background-size:29px; }
#snsConnect li.naver .btn span {background-image:url(/design/jsmbeauty/img/ico_mo_naver.png);background-size: 29px;}
#snsConnect li.kakaotalk .btn span {background-image:url(/design/jsmbeauty/img/ico_mo_kakao.png);background-size: 29px;}
#snsConnect li.apple .btn span {background-image:url(/design/jsmbeauty/img/ico_mo_apple.png);background-size: 29px;}

.privacy_list {margin-top:40px; }
.privacy_list li {display:flex; margin-bottom:24px; }
.privacy_list li:last-child {margin-bottom:0; }
.privacy_list li .name {width:120px; }
.privacy_list li .txt label {margin-right:20px; }

#join .btnArea {margin-top:72px; }
#join .btnArea .cbtn {display:inline-block;width:100%;text-align:center;background:#000;color:#fff;height:52px;line-height:52px;font-size: 18px;}

#join .btnArea.on {margin-top:10px; }
#join .withdrawArea {text-align:right; margin-top:10px; }
#join .withdraw {text-align:right; display:inline-block; }






/* BASIC css end */