.join-area {max-width: 1200px;width:calc(100% - 20px);margin:0 auto;padding:35px 0 150px;}
.join-area.off {display:none;}
.login-area {max-width: 450px;width:100%;margin:0 auto;padding:35px 0 150px;}
.error-area {max-width: 450px;width:100%;margin:0 auto;padding:35px 0 150px;display:none;}

.login-title {font-size:2.5rem;font-weight:700;padding-bottom:50px;text-align:center;word-break:keep-all;}
.login-title.no-pb {padding-bottom:0;}
.login-title .join_txt {color: #333;text-align: center;font-size:16px;font-weight:400;margin-top:1rem;}
.login-data-input {display: flex;justify-content: space-between;}
.login-data-input .login-input {width: calc(100% - 115px);}
.login-data-input .login-input .row {display: flex;justify-content: space-between;}
.login-data-input .login-input label {display:block;font-size:18px;font-weight:600;line-height: 40px;}
.login-data-input .login-input input {width:calc(100% - 80px);padding:10px;height:40px;box-sizing: border-box;border:1px solid #ccc;border-radius:5px;margin-bottom:20px;}
.login-data-input .login-button button {width: 100px; height: 100px;background: #85BDFF;color: #FFF;font-size: 1.1rem;font-weight: 600;border:none;border-radius:5px;}
.login-data-input .login-button button.long {height:160px;}
.login-sign {max-width:420px;width:100%;margin:40px auto;}

.login-register-bar {margin-top:20px;padding-top:20px;display: flex;justify-content: center;border-top:1px solid #666666;}
.login-id-save {overflow: hidden;}
.login-id-save input {display: none;}
.login-id-save input[type="checkbox"] + .login-id-save-chk{float: left; display: inline-block;width: 22px;height: 22px;border:1px solid #aaa;box-sizing: border-box; position: relative;}
.login-id-save input[id="check-remember-id"]:checked + .login-id-save-chk::after{content:'✔';font-size: 15px;width: 22px;height: 22px;text-align: center;position: absolute;left: 0;top:0;color:#FFFFFF;background-color:#222222;border-color:#222222;}
.login-id-save-txt {line-height: 23px; color: #444; margin-left: 5px;font-weight:400;}
.login-register-option {display:flex;margin:0;padding:0;list-style:none;justify-content:center;text-align: center; color: #222; line-height: 23px;}
.login-register-option .popup{display:none;}
.login-register-option li a{color: inherit;text-decoration:none;}
.login-register-option li {color:#666666;}
.login-register-option li:after {content: "|";margin:0px 5px;font-size:0.9em;}
.login-register-option li:last-child:after {content: unset;}
.login-register-option li.strong {margin-right: 30px;font-weight:600;}
.login-register-option li.strong:after {content:"";}

.error-icon {height:150px;background:url("../../images/jhorse/icon/error_icon.svg") center no-repeat;}
.login-error-option .login-register-option {justify-content: right;}
.login-error-option .login-register-option li:last-child {margin-right:0;}
.login_error_txt {color:#222222;text-align:center;line-height:30px;font-size:20px;font-weight:700;margin:35px 0 45px;}
.login_error_txt .login_error_ex {display:block;font-weight:500;font-size:16px;margin-top:10px;}

.login-sign .login-register-option{flex-direction: column;}
.login-sign .login-register-option li{width: 100%;height: 50px;border-radius: 100px;border: 1px solid #CCC; box-sizing: border-box; margin: 5px 0;display: flex;align-items: center;justify-content: center;}
.login-sign .login-register-option li[disabled="disabled"]{background-color: #e8e8e8;}
.login-sign .login-register-option li a{display: flex;align-items: center;}
.arrow-img{margin-left:13px;}

.oauth_login {display: flex;flex-wrap: nowrap;justify-content: space-between;padding: 20px 0;}
.easy_login_txt {color: #222;font-size: 18px;font-weight: 600;line-height: 34px;}
.easy_login_sns {overflow: hidden; display: flex;justify-content: right;}
.sns-icon {cursor: pointer;margin-left:10px;}
.no_member_join {display: flex;flex-wrap: nowrap;justify-content: space-between;}
.no_member_txt {color: #666;}
.no_member_join_txt {color: #965841;font-weight: 600;cursor: pointer;}

@media screen and (max-width:768px) {
	.login-data {padding-top:20px;padding-bottom:80px;}
	.login-sign {margin: 30px auto;}
	.login-title {font-size: 2.25rem;padding-bottom:20px;}
	.login-data-input .login-input label {font-size:16px;}
	.oauth_login {margin-top:20px;padding:10px 0;}
}

@media screen and (max-width:480px) {
	.login-title {font-size: 2rem;padding-bottom:10px;}
	.login-data {padding-top:10px;padding-bottom:50px;}
	.login-data-input {display: block;}
	.login-data-input .login-input label {width:80px;}
	.login-data-input .login-input {width: calc(100% - 20px);margin:0 auto;}
	.login-data-input .login-button {display:flex;justify-content: end;}
	.login-data-input .login-button button {width: calc(100% - 100px);height:40px;margin-right:10px;}
	.login-data-input .login-button button.long {height: 40px;}
}




.join-data {width:100%;margin:0 auto;padding:35px 0;}
.join-data .join-input-group {display:flex;justify-content: space-between;}
.join-data .join-input-group.right {justify-content: right;}
.join-data .join-input-group .join-link {color:inherit;text-decoration:none;margin-top:10px;}

.join-data .row {display: flex;justify-content: space-between;width: 100%;}
.join-data .row.double {width: calc(50% - 30px);}
.join-data .row.line {border-top:1px solid #d9d9d9;margin-top:40px;padding-top:40px;}
.join-data .row.newline {margin-top:20px;}
.join-data .input-label {width:120px;line-height:40px;font-size:1.1rem;font-weight:600;}
.join-data .input-info {width:calc(100% - 120px);}
.join-data .input-info .info-text {display:block;font-size:0.9em;margin-top:5px;color:#999999;padding-left:20px;background:url("/images/icon/info.svg") 0 50% /15px no-repeat;}
.validate-text {display:block;font-size:0.9em;margin-top:5px;}
.validate-text.is-invalid {color:#df3d31;}
.validate-text.is-valid {color:#2785F5;}


@media screen and (max-width:1024px) {
	.join-data .row.double {width: calc(100% - 20px);}
}

@media screen and (max-width:768px) {
	.join-data .row, .join-data .row.double {display: block;}
	.join-data .row.double {width: 100%;margin-bottom:10px;}
	.join-data .input-label, .join-data .input-info {display:inline-block;}
	.join-data .input-label {width:116px;vertical-align: top;}
	.join-data .row.newline {margin-top:10px;}
}

@media screen and (max-width:480px) {
	.join-data .input-label {width:91px;font-size: 1rem;}
	.join-data .input-info {width: calc(100% - 95px);}
	.join-data .row.line {margin-top:30px;padding-top:30px;}
	.inline-letter {width: 10px;}
}






.join-data .input-text {width:100%;padding:5px 10px;height:40px;box-sizing: border-box;border:1px solid #ccc;border-radius:5px;}
.join-data .input-text:read-only {background-color:#FAFAFA;}
.join-data .input-text.short {width:calc(100% - 120px);}
.join-data .input-text.is-invalid {border-color: #df3d31;}
.join-data .input-text.w50 {width:calc((100% - 30px) / 4);}
.join-data .input-text.w80 {width:calc((100% - 30px) / 3);}
.join-data .input-radio {border:1px solid #D9D9D9;border-radius:50%;width:18px;height:18px;margin:0 5px 0 0;vertical-align:text-top;}
.join-data .input-radio:checked {background-color:#222222;border-color:#222222;}
.join-data .radio-label {line-height:40px;margin-right:30px;}
.inline-letter {line-height:40px;display:inline-block;text-align:center;height:40px;width: 15px;}


.join-data .input-item {margin-bottom:20px;}
.join-data .input-item.no-margin {margin:0;}
.join-data .input-item .var {margin:0 5px;line-height:50px;font-weight:200;font-size:2rem;}
.join-data .input-item:first-child {margin-top:0;}
.join-data .input-item .input-item-label {display:block;font-weight:500;padding-bottom:10px;}
.join-data .input-item label {display:block;font-size:18px;font-weight:600;line-height: 30px;}
.join-data .input-item .join-label {display:inline-block;width:120px;height:50px;font-size:18px;font-weight:600;line-height:50px;}
.join-data .input-item .join-label.inline {width:90px;}
.join-data .input-item .input-with-label {display:inline-block;width:calc(100% - 124px);vertical-align:top;}
.join-data .input-item .join-input {width:100%;padding:10px;height:50px;box-sizing: border-box;border:1px solid #ccc;}
.join-data .input-item .join-input.age {width:calc(100% - 114px);}
.join-data .input-item .join-input:read-only {background-color:#FAFAFA;}
.join-data .input-item .join-input.is-invalid {border-color: #df3d31;}
.join-data .input-item .join-select {border:1px solid #ccc;height:50px;padding:10px 30px 10px 10px;width:100%;}
.join-data .input-item .join-select.mobile {width: 120px;}
.join-data .input-item .join-select.inline {display:inline-block;width: calc(100% - 104px);margin-left:10px;}
.join-data .result-text{text-align:center;font-size:1.5rem;font-weight:600;}
.join-data .result-text .find-user-result{font-weight:700;}
.join-data .result-item {width:100%;max-width:300px;margin: 50px auto;}
.join-data .result-item .btn {width:100%;background-color:transparent; height: 60px;border: 1px solid #AAA;box-sizing: border-box;color: #222;font-weight: 600;margin: 0 auto;font-size:16px;}
.join-data .result-item .btn:hover {cursor:pointer;background-color:#F8F8F8;}

.find-result {display: none;}
.find-result .result-text {text-align: center;font-size:1.5rem;}
.find-result .user-email{display:block; color: #965841; font-weight:600;}
.find-result .user-email:before {content: "`";margin-left:5px;color:var(--default-font-color);}
.find-result .user-email:after {content: "`";margin-right:5px;color:var(--default-font-color);}
.find-result .plaintext {font-size:1.25rem;font-weight: 500;}

.join-step-content {width: 100%;margin: 0 auto;border-top:1px solid #666;}
.join-step-content .terms-item {margin:20px 0;padding:20px 10px;background-color:#f4f4f4;}
.join-step-content .terms-item .agree-title {font-size:1.25em;font-weight:600;}
.join-step-content .terms-item .agree-title label {display:inline-block;}
.join-step-content .terms-item .agree-description {max-height:40vh;margin-top:15px;padding:15px 10px;border:1px solid #88939e;overflow-y: scroll;}
.join-step-content .join-agree-check {appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;top:3px;width:25px;height:25px;margin-right:10px;border:1px solid #D9D9D9;vertical-align:sub;}
.join-step-content .join-agree-check:checked:after {content:'✔';float:left;font-size:1.5em; width:25px;text-align:center;line-height:25px;}
.terms-agree-area {padding:20px 0;}
.join-step-control {display:flex;justify-content:center;padding:20px 0;}
.join-step-control .button {width:100px;height:30px;line-height:28px;border:1px solid #44474b;border-radius:5px;text-align:center;margin:10px;}
.join-step-control .button:hover {cursor:pointer;opacity:0.9;}
.join-step-control .button.agree {border-color: #0a58ca;background-color: #0a53be;color: #FFFFFF;}
.join-step-control .button.disagree {border-color: #c82333;background-color: #c82333;color: #FFFFFF;}

.login-guide {padding-bottom:21px;}
.join-border-top {border-top:1px solid #443B36;}




.address-mg_b {margin-bottom: 10px;}
.join-data .input-item .info-text {display:block;font-size:0.9em;margin-top:5px;color:#999999;padding-left:20px;background:url("/images/icon/info.svg") 0 50% /15px no-repeat;}
.join-data .input-item .validate-text {display:block;font-size:0.9em;margin-top:5px;}
.join-data .input-item .validate-text.is-invalid {color:#df3d31;}
.join-data .input-item .validate-text.is-valid {color:#2785F5;}
.join-data .input-item .join-input-radio {appearance:none;-webkit-appearance: none;-moz-appearance:none;border:1px solid #D9D9D9;border-radius:50%;width:14px;height:14px;margin:3px 3px 3px 0;}
.join-data .input-item .join-input-radio:checked {background-color:#ff8b78;border-color:#ff8b78;}
.join-data .input-item .radio-label {vertical-align:top;line-height:20px;margin-right: 20px;}
.join-data .input-item .radio-label:last-child {margin-right: 0;}
.join-data .input-item .join-attach-file {width:0;height:0;visibility: hidden;}
.join-data .input-item .attach-file {width:90px;height:40px;}

.join-hr-or {height:30px;margin:20px 0;}
.join-hr-or .half-line {display:inline-block; width: calc(50% - 42px); height: 15px; border-bottom:1px solid #AAAAAA;vertical-align:top;}
.join-hr-or .line-text {display:inline-block; width: 56px; height: 30px; margin:0 10px;text-align:center;line-height:30px;}

.join-extra {text-align:left;color:#443B36;font-weight:400;padding:50px 0;}
.join-extra .extra-title {font-size: 18px; font-weight:600;line-height:30px; border-bottom:1px solid #000000;margin-bottom:30px;}
.join-extra .join-input-group .input-item {width:calc(50% - 20px);}
.join-extra .input-item.extra-info {border-top:1px solid #cccccc;padding-top:10px;}

.join-agree {text-align:left;color:#443B36;font-weight:400;padding:35px 0;}
.join-agree .agree-title {display: flex;justify-content: space-between;font-size: 18px; font-weight:600;line-height:30px; border-bottom:1px solid #444444;}
.join-agree .agree-item {height:20px;overflow:hidden;margin-top:15px;display: flex;align-items: center;line-height:16px;}
.join-agree .agree-item:first-child {margin-top:0;}
.join-agree .agree-item.all {font-weight:500;margin-top:25px;}
.join-agree .agree-item .label {vertical-align: top;font-size:15px;}
.join-agree .agree-item .label.headline {font-weight:600;font-size:16px;}
.join-agree .agree-item .popup {text-decoration:underline;margin-left:10px;font-size: 0.9em;color:#999999;}
.join-agree .agree-item .popup:hover {cursor:pointer;opacity:0.8;}
.join-agree .agree-description {border: 1px solid #CCCCCC;margin: 20px auto 30px;padding: 20px 15px;height: 180px;overflow-y: auto;line-height: 1.5;}
.join-agree .agree-description h2 {margin-top:20px;}

.join-agree input[type=checkbox], .join-agree input[type=checkbox]:checked {appearance:none;-webkit-appearance:none;-moz-appearance:none;}
.join-agree input[type=checkbox] {height:16px;width:16px;margin:2px 5px 2px 0;border:1px solid #D9D9D9;border-radius:2px;}
.join-agree input[type=checkbox]:checked {background-color:#85BDFF;border-color:#85BDFF;}
.join-agree input[type=checkbox]:checked::after{font-size: 15px;text-align: center;position: relative;top: -3px;color: #FFFFFF;width: 16px;height: 16px;display: inline-block;}
.join-agree .checkbox-right {float: right;}

.join-submit {padding:40px 0;display: flex;justify-content: center;border-top: 1px solid #666;}
.join-button{width: 180px; height: 40px;background: #85BDFF;color: #FFF;font-size: 1.1rem;font-weight: 600;border:none;border-radius: 5px;}
.join-button.cancel{background-color: #222222;margin-left:15px;}
.join-button.logout{background-color: #222222;margin-bottom:20px;}
.join-button:hover {cursor:pointer;opacity:0.8;}
.join-button.id-check {width:100px;height:40px;float:right; border-radius: 0; background-color: #222; color: #fff; border: 1px solid #666;font-size:1rem;border-radius:5px;}
.join-button.email {background-color: transparent;color: #222;border:1px solid #AAAAAA;}
.join-button.email:hover {background-color: #222222;color: #FFFFFF;border-color: #222222;opacity:1;}
.join-button .join-text-icon {padding-left:45px;display:inline-block;line-height:40px;height:40px;font-size:16px;}
.join-button .join-text-icon.naver {background: url("../../images/jhorse/icon/easy_login_naver.svg") 0px 50% no-repeat;}
.join-button .join-text-icon.kakao {background: url("../../images/jhorse/icon/easy_login_kakao.svg") 0px 50% no-repeat;}
.join_common_btn {margin-bottom: 10px;}

.join-agree .terms-area {position:fixed;top:100vh;left:50%;height:calc(100vh - 170px);width:100%;max-width:540px;background-color: #FFFFFF;border-top-right-radius:20px;border-top-left-radius:20px;transform: translateX(-50%);padding:20px;border:1px solid #DDDDDD;box-sizing: border-box;}
.join-agree .terms-area .popup-control {height:0;float:right;text-align:right;background-color:#965841;position: absolute;right: 5px;top:-15px;}
.join-agree .terms-area .popup-close-button {width:20px;height:20px;border:none;background:url("/images/icons/menu-close.svg") center /18px no-repeat;margin:20px 0 0;}
.join-agree .terms-area .popup-close-button:hover {cursor:pointer;opacity:0.8;}
.join-agree .terms-item {display:none;height:100%;overflow-x: clip;overflow-y: auto;}
.join-agree .terms-item.on {display:block;}
.join-agree .terms-data {height:100%;width:100%;overflow:hidden;}
.join-agree .terms-data .login-title {text-align:center;padding:20px 0;border-bottom:2px solid #443b36;font-size:1.6em;}
.join-agree .terms-data .login-title .title-text:before {width:20px;height:20px;left:12px;top:-8px;z-index:-1;}
.join-agree .terms-data .terms-data-textarea {height:calc(100% - 90px);margin-top:18px;overflow-y: auto;}
.join-agree .terms-data .terms-data-textarea::-webkit-scrollbar {width:5px;background-color:rgba(0,0,0,0.1);border-radius:5px;}
.join-agree .terms-data .terms-data-textarea::-webkit-scrollbar-thumb {background-color:rgba(68, 59, 54, 0.5);border-radius:5px;}
.join-agree .terms-data .terms-data-textarea h3 {margin:0;padding:20px 0 10px;}
.join-agree .terms-data .terms-data-textarea h4 {margin:0;padding:15px 0 5px 10px;}
.join-agree .terms-data .terms-data-textarea ul {list-style:none;padding:0 0 0 10px;margin:10px auto;}
.join-agree .terms-data .terms-data-textarea ul li {margin-top:5px;}
.join-agree .terms-data .terms-data-textarea p {margin:0;padding:5px 0 5px 10px;text-indent: 5px;word-break: break-word;}
.join-agree .terms-data .terms-data-textarea hr {border-style: dashed;border-color:#D9D9D9;margin:20px 0 30px;}

@media screen and (max-width:768px) {
	.join-data .input-item label {line-height:25px;font-size:16px;}
	.join-data .input-item .var {line-height:40px;}
	.join-data .input-item .join-select, .join-data .input-item .join-input {height:40px;}
}

@media screen and (max-width:480px) {
	.join-extra .join-input-group {flex-wrap: wrap;}
	.join-extra .join-input-group .input-item {width:100%;}
}



.layer-popup-join {position:fixed;top:100vh;height:calc(100vh - 70px);width:calc(100% - 40px);padding:20px;overflow:hidden;background-color:#FFFFFF;z-index:1002;border-top-right-radius:10px;border-top-left-radius:10px;}
.layer-popup-join .layer-join {padding-top:0;height:100%;overflow-y:auto;}
.layer-popup-join .layer-join .login-title {font-size:1.25em;height:25px;overflow:hidden;}
.layer-popup-join .layer-join .popup-control {height:0;float:right;text-align:right;}
.layer-popup-join .layer-join .popup-close-button {width:15px;height:15px;border:none;background:url("../../images/waytrip/icon/close.svg") center /15px no-repeat;margin:5px 0 0;}
.layer-popup-join .layer-join .popup-close-button:hover {cursor:pointer;opacity:0.8;}
.layer-popup-join .layer-join .join-data {border-top:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:30px 0;}
.layer-popup-join .layer-join-terms .terms-area {height: calc(100vh - 130px);}



.btn-withdrawal {margin:10px 0;height:30px;background-color:#222222;color:#FFFFFF;width:100px;border:none;}
.btn-withdrawal:hover {cursor: pointer;opacity:0.9;}