.no_user_order{padding:0px 60px 0px 60px; min-height:100svh; display: flex; align-items: center;}
.no_user_order:after {content:''; clear:both; display: table;}

.no_user_order .wid {max-width:550px; width:100%; margin:0 auto;}
.no_user_order h1 {font-size:30px; color:#222; font-weight:300; text-align: center; margin:25px 0 40px 0;}
.no_user_order h1 b {font-weight:700;}

.no_user_order p {text-align: center; font-size:14px; color:#999;}
.no_user_order p b {color:#111; font-weight:500;}
.no_user_order p img {margin:-2px 3px 0 0;}
.no_user_order p span {display: inline-block; margin:0 10px 0 12px;}
.no_user_order p b img {filter:brightness(100) invert(1);}

.no_user_order .input_box {margin-top:25px; position: relative;}
.no_user_order .input_box:after {content:''; clear:both; display: table;}
.no_user_order .input_box span {display: inline-block; width:100%; font-size:15px; color:#444; margin-bottom:8px;}
.no_user_order .input_box span b {font-weight:300; color:#FF6262; display: inline-block; margin-left:3px;}
.no_user_order .input_box input[type="text"], .no_user_order .input_box input[type="password"] {width:100%; height:48px; border:1px solid #ddd; padding:0 20px; font-size:15px; color:#222;}
.no_user_order .input_box input[type="password"]::placeholder {font-size:20px; font-weight:900;}

.no_user_order .input_box .right_bt {float:right; height:48px; border:none; background:#111; color:#fff; font-size:15px; width:110px;}
.no_user_order .input_mix input[type="text"] {float:left; width:calc(100% - 117px); margin-bottom:7px;}

.no_user_order .input_box .secret {position: absolute; right:16px; bottom:16px; border:none; background:none; opacity: .5;}
.no_user_order .input_box .secret .show {display: none;}
.no_user_order .input_box .secret .hide {display: block; position: relative; top:1px;}
.no_user_order .input_box .secret.active .hide {display: none;}
.no_user_order .input_box .secret.active .show {display: block;}

.no_user_order .input_box .select {cursor: pointer; float:left; width:125px; height:40px;  position: relative; z-index: 10;}
.no_user_order .input_box .select:after {content:''; position: absolute; right:0; width:1px; top:7px; height:26px; background:#f0f0f0}
.no_user_order .input_box .select .label {width:100%; text-align:left; border:none; height:40px; padding-left: 15px; background: none; cursor: pointer; font-size:14px; padding-bottom:1px; color:#888; background:url('../img/down_arrow.svg')no-repeat center right 15px; border-radius:20px;font-weight:400;}
.no_user_order .input_box .select .optionList {position: absolute; top:45px; left: 0px; width: 100%;  max-height: 0; transition: .3s ease-in;   z-index: 1;   overflow:hidden; border-radius:8px; font-weight:400; }
.no_user_order .input_box .select.active .optionList {max-height: 170px;overflow:auto; background:#fff; box-shadow: 1px 1px 6px rgba(0,0,0,.1);}
.no_user_order .input_box .select .optionItem { padding:13px 17px 0 15px; font-size:14.5px; color:#888; font-weight:400;}
.no_user_order .input_box .select .optionItem:last-child {padding-bottom:16px;}
.no_user_order .input_box .select .optionList::-webkit-scrollbar {width: 6px;}
.no_user_order .input_box .select .optionList::-webkit-scrollbar-thumb {background:  none; border-radius: 45px;} 

.no_user_order .input_box .num {display: none;}
.no_user_order .input_box .num_txt {position: absolute; right:133px; bottom:24px; font-size:13px; color:#ff6161; font-weight:500;}

.no_user_order .bt_box {margin:40px auto 0 auto; max-width:315px;}
.no_user_order .bt_box:after {content:''; clear:both ;display: table;}
.no_user_order .bt_box button {height:50px; border:1px solid #111; background:none; font-size:16px; color:#111; margin-top:7px; float:left; width:calc((100% - 7px) / 2);}
.no_user_order .bt_box button:last-child {float:right; background:#111; color:#fff; font-weight:500;}



@media screen and (max-width:1200px) {
	.no_user_order{padding:150px 20px 80px 20px;}
	.no_user_order.box2 {display: none;}
	.no_user_order {width:100%;}
}

@media screen and (max-width:767px) {
	.no_user_order {display: inline-block; min-height:660px; height:100svh; max-height:900px;  position: relative;}
	.no_user_order{padding:140px 20px 50px 20px;}
	.no_user_order h1 {font-size:20px;text-align: center; margin:15px 0 30px 0;}
	.no_user_order p {font-size:12px;}
	.no_user_order p img {width:11px; margin-right:2px;}
	.no_user_order p span img {width:auto;}
	.no_user_order .social_bt {margin-top:25px;}
	.no_user_order .social_bt button {background:none; font-size:13px; height:auto;}
	.no_user_order .social_bt button br {display: block;}
	.no_user_order .social_bt button span {width:54px; height:54px; display: inline-block; background:#f6f6f6; border-radius:50%; text-align: center; padding:14px 0 0 6px; margin-bottom:8px;}
	.no_user_order .social_bt button:first-child span {padding:15px 0 0 7px;}
	.no_user_order .social_bt button span img {height:25px;}
	.no_user_order .or {margin:35px 0 5px 0;}

	.no_user_order .input_box {margin-top:22px;}
	.no_user_order .input_box span {font-size:13px;}
	.no_user_order .input_box input[type="text"], .no_user_order .input_box input[type="password"] {height:45px; padding:0 16px; font-size:14px; border-radius:8px;}

	.no_user_order .quick .ck_box input[type="checkbox"] + label span {width:15px; height:15px; top:3px;}
	.no_user_order .quick .ck_box input[type="checkbox"] + label {font-size:13px;}
	.no_user_order .quick .forgot {font-size:13px; margin-top:3px;}

	.no_user_order .input_box .num_txt {bottom:22px; right:111px;}

	.no_user_order .bt_box {margin-top:30px; max-width:100%; position: absolute; left:20px; width:calc(100% - 40px); bottom:90px;}
	.no_user_order .bt_box button {height:45px; font-size:15px; border-radius:8px;}


	.no_user_order .input_mix input[type="text"] {float:left; width:calc(100% - 96px);}
	.no_user_order .input_box .right_bt {border-radius:8px; height:45px; font-size:14px; width:90px;}
}



















.join{padding:150px 60px 80px 60px; }
.join:after {content:''; clear:both; display: table;}

.join .wid {max-width:700px; width:100%; margin:0 auto;}
.join h1 {font-size:30px; color:#222; font-weight:300; text-align: center; margin:25px 0 40px 0;}
.join h1 b {font-weight:700;}

.join p {text-align: center; font-size:14px; color:#999;}
.join p b {color:#111; font-weight:500;}
.join p img {margin:-2px 3px 0 0;}
.join p span {display: inline-block; margin:0 10px 0 12px;}

.step {text-align: center; margin-bottom:40px; transform: scale(0.95);}
.step:after {content:''; clear:both; display: table; }
.step li {display: inline-block; font-size:16px; color:#bbb; font-weight:500; position: relative;}
.step li:first-child {margin-right:105px;}
.step li:first-child:after {content:url('../img/step_img.svg'); position: absolute; right:-104px; top:3px;}
.step li span {display: inline-block; width:33px; height:33px; border-radius:50%; font-size:18px; color:#c3c3c3; background:#fff; border:1px solid #d4d4d4; line-height:32px; margin:0 auto 10px auto}
.step li.on {color:#111; font-weight:600;}
.step li.on span {color:#fff; border:1px solid #111; background:#111;}

.join .input_box {margin-top:25px; position: relative;}
.join .input_box:after {content:''; clear:both; display: table;}
.join .input_box span {display: inline-block; width:100%; font-size:15px; color:#444; margin-bottom:8px; font-weight:300;}
.join .input_box span b {font-weight:300; color:#FF6262; display: inline-block; margin-left:3px;}
.join .input_box input[type="text"], .join .input_box input[type="password"] {width:100%; height:48px; border:1px solid #ddd; padding:0 20px; font-size:15px; color:#222;}
.join .input_box input[type="password"]::placeholder {font-size:20px; font-weight:900;}

.join .input_box .select {cursor: pointer; float:left; width:calc((100% - 157px) / 2); position: relative; z-index: 10;}
.join .input_box .select .label {width:100%; text-align:left; border:1px solid #d4d4d4; height:48px; padding-left: 20px; background: none; cursor: pointer; font-size:15px; padding-bottom:1px; color:#111; background:url('../img/down_arrow.svg')no-repeat center right 15px; font-weight:400;}
.join .input_box .select .optionList {position: absolute; top:52px; left: 0px; width: 100%;  max-height: 0; transition: .3s ease-in;   z-index: 1;   overflow:hidden;  font-weight:400; }
.join .input_box .select.active .optionList {max-height: 170px;overflow:auto; background:#fff;  border:1px solid #ddd}
.join .input_box .select .optionItem { padding:6px 17px 6px 20px; font-size:15px; color:#111; font-weight:400;}
.join .input_box .select .optionItem:first-child {padding-top:13px;}
.join .input_box .select .optionItem:last-child {padding-bottom:16px;}
.join .input_box .select .optionList::-webkit-scrollbar {width: 6px;}
.join .input_box .select .optionList::-webkit-scrollbar-thumb {background:  none; border-radius: 45px;} 

.join .input_box .secret {position: absolute; right:16px; bottom:16px; border:none; background:none; opacity: .5;}
.join .input_box .secret .show {display: none;}
.join .input_box .secret .hide {display: block; position: relative; top:1px;}
.join .input_box .secret.active .hide {display: none;}
.join .input_box .secret.active .show {display: block;}

.join .input_box .select input[type="text"] {width:100%; margin-top:5px; display: none;}

.join .input_box .right_bt {float:right; height:48px; border:none; background:#111; color:#fff; font-size:15px; width:110px;}
.join .input_mix input[type="text"] {float:left; width:calc(100% - 117px);}

.join .input_mix2 input[type="text"] {float:left; width:calc((100% - 157px) / 2);}
.join .input_box3 {margin-top:7px;}
.join .input_box .num_txt {position: absolute; right:140px; bottom:17px; font-size:13px; color:#ff5a5a; width:auto; font-weight:500; margin-bottom:0;}
.join .input_mix2 p {float:left; width:40px; padding-top:15px;}

.join .bt_box {margin:40px auto 0 auto; max-width:255px;}
.join .bt_box button {height:50px; border:1px solid #111; background:none; font-size:16px; color:#111; margin-top:7px; width:100%;}
.join .bt_box button.submit {float:right; background:#111; color:#fff; font-weight:500;}
.join .bt_box button.back {border:none; background:none; margin-top:10px; font-size:14px; text-decoration: underline; text-underline-position: under; color:#999;}

.join .terms_box {margin-top:45px; background:#fafafa; padding:27px 30px;}
.join .terms_box:after {content:''; clear:both; display: table;} 
.join .terms_box .t_box1 {width:100%; position: relative; margin-top:29px;}
.join .terms_box .t_box1:first-child {margin-top:0;}
.join .terms_box .t_box1 input[type="checkbox"] {display: none;}
.join .terms_box .t_box1 input[type="checkbox"] + label {display:inline-block; width:100%; position: relative; padding-left:27px;  font-size:16px; color:#111; font-weight:400; cursor: pointer;}
.join .terms_box .t_box1 input[type="checkbox"] + label span {display: inline-block; width:19px; height:19px; border:1px solid #ddd; position: absolute; left:0; top:0; background:#fff;}
.join .terms_box .t_box1 input[type="checkbox"] + label img {float:right;}
.join .terms_box .t_box1 input[type="checkbox"]:checked + label span {background:url('../img/check.svg')no-repeat center #111; border:1px solid #111;} 
.join .terms_box .t_box1 .more {position: absolute; right:0; top:0;width:19px; height:19px; border:none; background:none; background:none; transition: .3s; transform: rotate(0deg);}
.join .terms_box .t_box1 .more.on {transform: rotate(180deg);}

.join .terms_box .t_box1 .txt {margin-left:27px; padding:10px 15px; font-size:13px; background:#fff; height:120px; overflow-y:scroll; line-height:1.45em; margin-top:13px; font-weight:400; color:#777; display: none;}
.join .terms_box .t_box1 .txt.on {display: block;}
.join .terms_box .t_box1 .txt::-webkit-scrollbar {display: none;}


@media screen and (max-width:1200px) {
	.join{padding:150px 20px 80px 20px;}
	.join.box2 {display: none;}
	.join {width:100%;}
}

@media screen and (max-width:767px) {
	.join {display: inline-block; position: relative;}
	.step {margin-bottom:30px; transform: scale(0.8); }
	.join{padding:140px 20px 50px 20px;}
	.join h1 {font-size:20px;text-align: center; margin:15px 0 30px 0;}
	.join p {font-size:12px;}
	.join p img {width:11px; margin-right:2px;}
	.join p span img {width:auto;}
	.join .social_bt {margin-top:25px;}
	.join .social_bt button {background:none; font-size:13px; height:auto;}
	.join .social_bt button br {display: block;}
	.join .social_bt button span {width:54px; height:54px; display: inline-block; background:#f6f6f6; border-radius:50%; text-align: center; padding:14px 0 0 6px; margin-bottom:8px;}
	.join .social_bt button:first-child span {padding:15px 0 0 7px;}
	.join .social_bt button span img {height:25px;}
	.join .or {margin:35px 0 5px 0;}

	.join .input_box {margin-top:22px;}
	.join .input_box span {font-size:13px;}
	.join .input_box input[type="text"], .join .input_box input[type="password"] {height:45px; padding:0 16px; font-size:14px; border-radius:8px;}

	.join .input_mix input[type="text"] {float:left; width:calc(100% - 96px);}
	.join .input_mix2 input[type="text"] {float:left; width:calc(100% - 40px); margin-bottom:5px;}

	.join .input_box .right_bt {border-radius:8px; height:45px; font-size:14px; width:90px;}
	.join .input_box .select {width:calc(100% - 96px);}
	.join .input_box .select .label {height:45px; border-radius:8px; padding:0 16px; font-size:14px;}
	.join .input_box .select .optionList {top:50px;}
	.join .input_box .select.active .optionList {border-radius:8px;}
	.join .input_box .select .optionItem {padding-left:16px;}
	.join .input_box .select input[type="text"] {width:calc(100% + 96px)}

	.join .quick .ck_box input[type="checkbox"] + label span {width:15px; height:15px; top:3px;}
	.join .quick .ck_box input[type="checkbox"] + label {font-size:13px;}
	.join .quick .forgot {font-size:13px; margin-top:3px;}

	.join .bt_box {margin-top:30px; max-width:100%; }
	.join .bt_box button {height:45px; font-size:15px; border-radius:8px;}


	.join .terms_box {margin-top:15px; padding:20px;}
	.join .terms_box .t_box1 input[type="checkbox"] + label {font-size:14px; padding-left:25px;}
	.join .terms_box .t_box1 input[type="checkbox"] + label span {width:18PX; height:18px;}
	.join .terms_box .t_box1 .txt {margin-left:0;}

	.join .input_box3 {margin-top:7px;}
	.join .input_box .num_txt {right:113px; bottom:16px;}

}















.join_result{padding:0px 60px 0px 60px; min-height:100vh; display: flex; align-items: center;}
.join_result:after {content:''; clear:both; display: table;}

.join_result .wid {max-width:550px; width:100%; margin:0 auto;}
.join_result h1 {font-size:30px; color:#222; font-weight:300; text-align: center; margin:25px 0 40px 0;}
.join_result h1 b {font-weight:700;}

.join_result p {text-align: center; font-size:14px; color:#999;}
.join_result p b {color:#111; font-weight:500;}
.join_result p img {margin:-2px 3px 0 0;}
.join_result p span {display: inline-block; margin:0 10px 0 12px;}

.join_result .bt_box2 {margin:40px auto 0 auto; max-width:440px;}
.join_result .bt_box2:after {content:''; clear:both ;display: table;}
.join_result .bt_box2 button {height:50px; border:1px solid #111; background:none; font-size:16px; color:#111; margin-top:7px; float:left; width:calc((100% - 7px) / 2);}
.join_result .bt_box2 button.login {background:#111; color:#fff; font-weight:500;}
.join_result .bt_box2 button.writer {float:right;}
.join_result .bt_box2 button:last-child {width:100%; }



@media screen and (max-width:1200px) {
	.join_result{padding:150px 20px 80px 20px;}
	.join_result.box2 {display: none;}
	.join_result {width:100%;}
}

@media screen and (max-width:767px) {
	.join_result {display: inline-block; min-height:auto; position: relative;}
	.join_result{padding:140px 20px 50px 20px;}
	.join_result h1 {font-size:20px;text-align: center; margin:15px 0 30px 0;}
	.join_result p {font-size:12px;}
	.join_result p img {width:11px; margin-right:2px;}
	.join_result p span img {width:auto;}
	.join_result .bt_box2 {margin-top:30px; max-width:100%; }
	.join_result .bt_box2 button {height:45px; font-size:15px; border-radius:8px;}
}