html, body { min-width: 280px; height: 100vh; background-color: #f0f0f0; }
::-webkit-scrollbar { display: none; }
.all_wrap--join { position: relative; width: 100%; height: 100vh; min-width: 300px; margin: auto; clear: both; }
.join_wrap { position: relative; max-width: 460px; margin: auto; padding: 0 3%; }
.join_wrap .join_logo { margin-bottom: 10%; padding-top: 15%; text-align: center; }
.join_wrap .join_logo > a { display: inline-block; margin: auto; }
.join_wrap .join_logo > a > img { width: 200px; height: 51px; }
.join_wrap .join_sns { position: relative; padding-bottom: 20px; }
.join_wrap .join_sns .sns-line { position: absolute; bottom: 0; right: 0; left: 0; margin: auto; width: auto; height: 1px; background-color: #ddd; }
.join_content .join_input { position: relative; margin-top: 10px; }
.join_content .join_input input { width: 100%; height: 46px; margin: 0; padding: 0 10px; font-size: 14px; border: 1px solid #ddd; background-color: #fff; outline: none; caret-color: #107239; box-sizing: border-box; }
.join_content .join_input input:focus { border: 1px solid #b9b9b9; }
.join_content .join_input.input--fail input { border: 1px solid #e22523; }
.join_content .join_input.input--success input { border: 1px solid #188341; }
.join_content .join_input.input--success .icon_check { background-image: url('https://img.netpx.co.kr/images/netpx/common/icon_check_on.png'); }
.join_content .join_input .icon_check { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; background-position: 0 0; background-size: 100%; background-repeat: no-repeat; background-image: url('https://img.netpx.co.kr/images/netpx/common/icon_check_off.png'); }
.join_content .join_button { margin-top: 30px; width: 100%; height: 54px; font-size: 17px; font-weight: bold; color: #fff; background-color: #188341; border: none; }
.join_content .join_button:focus { outline: 0; }
.join_content .join_button:hover { background-color: #147338; }

/* 휴대폰인증 */
.join_input--certify { font-size: 0; }
.join_input--certify * { display: inline-block; height: 36px; border-top: 1px solid #ddd; border-bottom: 2px solid #ddd; border-right: 2px solid #ddd; border-left: none; font-size: 13px; background-color: #fff; color: #777; box-sizing: border-box; vertical-align: top; text-align: center; }
.join_input--certify a:first-child { border-left: 2px solid #ddd; }
.join_input--certify a { width: 33%; line-height: 32px; }
.join_input--certify input { width: 34%; background-color: #f8f8f8; }
.join_input--certify .certify_commit { width: 34%; }

.guide--error { color: #e22523; }
.guide--success { color: #188341; }
.guide--notice { color: #222; }

/* 이용약관 */
.join_agree { margin-top: 6%; padding-bottom: 10%; font-size: 14px; color: #555; text-align: center; }
.join_agree .fc_green { position: relative; display: inline-block; color: #188341; }
.join_agree .fc_green::after { content: ''; position: absolute; bottom: 0; right: 0; left: 0; margin: auto; width: auto; height: 1px; background-color: #188341; }
.join_agree_txt { height: 200px; font-size: 13px; line-height: 18px; color: #555; text-align: left; background-color: #fff; border: 1px solid #e0e0e0; padding: 15px 10px; box-sizing: border-box; overflow-y: scroll; }
.join_agree_txt::-webkit-scrollbar { display: block; }
.join_agree_txt::-webkit-scrollbar { width: 2px; }
.join_agree_txt::-webkit-scrollbar-thumb { background-color: #aaa; }
.join_agree_txt::-webkit-scrollbar-track { background-color: #eee; }
.join_agree_txt .txt_ttl { margin-bottom: 12px; font-size: 15px; font-weight: bold; color: #000; }
.join_agree_txt h3 { font-size: 18px; font-weight: 400; line-height: 22px; color: #05824b; }
.join_agree_txt h4 { font-weight: bold; }
.join_agree_txt ol { margin-left: 14px; }
.join_agree_txt ol li { margin-bottom: 5px; list-style: decimal; }
.join_agree_txt .table_ty03{width:100%; border-top:1px solid #222;}
.join_agree_txt .table_ty03 tr th, .join_agree_txt .table_ty03 tr td{border-bottom:1px solid #eee;}
.join_agree_txt .table_ty03 tr th{ padding: 8px 0px; color: #222; text-align: center; font-size: 13px; font-weight: 400; line-height: 20px; }
.join_agree_txt .table_ty03 tr td{ padding: 8px 0px; color: #666; text-align: center; font-size: 13px; font-weight: 400; line-height: 20px; }

.join_input_guide { display: none; margin: 5px 0 10px 10px; font-weight: bold; }

/* 회원가입 완료 */
.join_ok_txt { width: 100%; padding-top: 50px; font-size: 14px; color: #555; background-color: #fff; border: 1px solid #dddddd; box-sizing: border-box; text-align: center; -ms-word-break: keep-all; word-break: keep-all; }
.join_ok_txt img { width: 100%; max-width: 70px; }
.join_ok_txt dl { padding: 0 15px 30px; }
.join_ok_txt dl dt { margin: 30px 0 20px; font-size: 18px; font-weight: 600; color: #000; }
.join_ok_txt dl dd { margin-bottom: 10px; }
.join_ok_txt dl dd .fc_e22523 { color: #e22523; }
.join_ok_txt p { position: relative; padding: 15px 10px; border-top: 1px solid #ddd; }
.join_ok_txt p > a { font-weight: 600; text-decoration: underline; }
.join_ok_button { display: inline-block; margin-top: 30px; width: 100%; height: 54px; line-height: 54px; font-size: 17px; font-weight: bold; color: #fff; background-color: #188341; text-align: center; }
.join_content .join_button:hover { background-color: #147338; }

@media (max-width: 320px) {
    .all_wrap--join { min-width: 270px; }
    .join_wrap .join_logo > a > img { width: 170px; height: 44px; }
    .join_input--certify * { font-size: 12px; }
    .join_content .join_input input { font-size: 13px; }
    .join_content .join_button { height: 54px; font-size: 16px; }
    .join_agree { font-size: 12px; }
}