.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 .pwdShow {display: none;}
.no_user_order .input_box .secret .pwdHide {display: block; position: relative; top:1px;}
.no_user_order .input_box .secret.active .pwdHide {display: none;}
.no_user_order .input_box .secret.active .pwdShow {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:100px 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:after {content:''; clear:both; display: table}
.join .input_box span b {font-weight:300; color:#FF6262; display: inline-block; margin-left:3px;}
.join .input_box span strong {display: inline-block; font-weight:300; font-size:13px; margin-left:5px; color:#999;float:right; }
.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% - 40px) / 2); position: relative; z-index: 1;}
.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 .pwdShow {display: none;}
.join .input_box .secret .pwdHide {display: block; position: relative; top:1px;}
.join .input_box .secret.active .pwdHide {display: none;}
.join .input_box .secret.active .pwdShow {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% - 40px) / 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:auto; 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;}

.join .terms_box .t_box1 a {float:right; font-size:13px; color:#111; border-bottom:1px solid #111; }

@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:100px 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.open_spon {width:100%; }



@media screen and (max-width:1200px) {
	.join_result{padding:110px 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:100px 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;}
}









.spon_pop {position: fixed; left:0; top:0 ;width:100%; height:100%; background:rgba(0,0,0,.7); display: none; z-index: 100}
.spon_pop.on {display: block;}
.spon_pop .view {position: absolute; left:50%; top:50%; background:#fff; transform: translate(-50%,-50%); width:90%; max-width:800px; max-height:90vh; height:auto; padding:30px 35px; border-radius:25px;}
.spon_pop .view h2 {font-size:18px; color:#222;}
.spon_pop .view .spon_pop_close {position: absolute; right:20px; top:20px; border:none; background:none;}
.spon_pop .view .list {margin-top:25px; height:calc(100vh - 295px); overflow-y: scroll; margin-left:-35px; width:calc(100% + 70px); padding:0 35px;}
.spon_pop .view .list::-webkit-scrollbar {display: none;}
.spon_pop .view .list:after {content:''; clear:both; display: table}
.spon_pop .view .list ul {float:left; min-height: 290px; width:calc((100% - 30px) / 3); margin-bottom:15px; margin-right:15px; background:#fff; padding:10px; border-radius:10px; position: relative; box-shadow: 2px 2px 20px rgba(0,0,0,.1)}
.spon_pop .view .list ul:nth-child(3n) {margin-right:0;}
.spon_pop .view .list ul li.ck_box {position: absolute; left:7px; top:7px;}
.spon_pop .view .list ul li.ck_box input[type="checkbox"] {display: none;}
.spon_pop .view .list ul li.ck_box input[type="checkbox"] + label {display:inline-block;width:20px; height:20px; border-radius:5px; background:#fff; border:1px solid #e4e4e4; cursor: pointer;}
.spon_pop .view .list ul li.ck_box input[type="checkbox"]:checked + label {background:url('../img/check_icon.svg')no-repeat center #222; border:1px solid #222;}

.spon_pop .view .list ul li.img {width:100%; padding-top:80%; background:#eee; border-radius:10px; border:1px solid #eee;}
.spon_pop .view .list ul li.img button {position: absolute; right:20px; top:20px ;border:none; background:none;}
.spon_pop .view .list ul li.txt {width:100%; margin-top:15px; padding:0 5px;}
.spon_pop .view .list ul li.txt p {font-size:15px; color:#222; font-weight:600; width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.spon_pop .view .list ul li.txt span {display: inline-block; width:100%; margin-top:4px; font-size:12.5px; color:#999;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.spon_pop .view .list ul li.pay1 {margin-top:13px;}
.spon_pop .view .list ul li.pay1 span {display: inline-block; font-size:12px;font-weight:500; padding:5px 10px; border-radius:25px; color:#777; background:#f0f0f0; width:auto !important;}
.spon_pop .view .list ul li.pay2 {display: none;}
.spon_pop .view .list ul li.col1 {position: absolute; right:0px; top:0px; font-size:13px; padding:4px 12px; background:#EAEAEA; color:#939393; border-radius:0 13px; font-weight:500;}
.spon_pop .view .list ul li.col2 {position: absolute; right:0px; top:0px; font-size:13px; padding:4px 12px; background:#FFE3E3; color:#F05050; border-radius:0 13px; font-weight:500;}
.spon_pop .view .list ul li.col3 {position: absolute; right:0px; top:0px; font-size:13px; padding:4px 12px; background:#DFECFF; color:#518CE8; border-radius:0 13px; font-weight:500;}
.spon_pop .view .list ul li.day p {display:none;}
.spon_pop .view .list ul li.day {position: absolute; right:15px; bottom:58px; font-size:12px; color:#bbb; font-weight:300;}
.spon_pop .view .list ul li:last-child:after {content:''; clear:both; display: table;}
.spon_pop .view .list ul li:last-child {margin-top:18px;}
.spon_pop .view .list ul li:last-child button {float:left; width:calc((100% - 5px) / 2); height:30px; font-size:13px; color:#999; border:1px solid #bbb; border-radius:8px; background:#fff; padding-bottom:1px;}
.spon_pop .view .list ul li:last-child button.del_open {float:right; background:#ccc; border:none; color:#fff; font-weight:500;}

.spon_pop .view .search { margin-top:20px;}
.spon_pop .view .search:after {content:''; clear:both; display: table}
.spon_pop .view .search .select {cursor: pointer; width:112px; height:42px;  position: relative; z-index: 10; float:left;}
.spon_pop .view .search .select .label {width:100%; text-align:left; border:none; height:42px; 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:6px;font-weight:400; border:1px solid #e4e4e4;}
.spon_pop .view .search .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; border:1px solid rgba(255,255,255,0)}
.spon_pop .view .search .select.active .optionList {max-height: 170px;overflow:auto; background:#fff; border:1px solid #e4e4e4;}
.spon_pop .view .search .select .optionItem { padding:13px 17px 0 15px; font-size:14.5px; color:#888; font-weight:400;}
.spon_pop .view .search .select .optionItem:last-child {padding-bottom:16px;}
.spon_pop .view .search .select .optionList::-webkit-scrollbar {width: 6px;}
.spon_pop .view .search .select .optionList::-webkit-scrollbar-thumb {background:  none; border-radius: 45px;}

.spon_pop .view .search input[type="text"] {height:42px; float:left; width:calc(100% - 194px); margin:0 6px; border-radius:6px; border:1px solid #e4e4e4; font-size:14px; padding:0 13px;}
.spon_pop .view .search .search_bt {height:42px; border-radius:6px; background:#111; color:#fff; font-size:15px; font-weight:500; width:70px; border:none;}

.spon_pop .view .more_bt {display: block; margin:10px auto 0 auto; background:none; font-size:13px; color:#999; font-weight:500; padding:10px 18px; border-radius:50px; border:1px solid #ccc;}
.spon_pop .view .more_bt img {margin:0px 0 0 7px; width:10px;}


@media screen and (max-width:767px) {
	.spon_pop .view .search .select {width:100%; margin-bottom:5px;}
	.spon_pop .view .search input[type="text"] {margin-left:0; width:Calc(100% - 76px);}
	.spon_pop .view {width:100%; max-height:100svh; padding:22px 25px; border-radius:0; height:100svh;}
	.spon_pop .view .spon_pop_close {top:10px; right:10px;}
	.spon_pop .view .list {margin:20px 0 0 -25px; width:calc(100% + 50px); padding:0 25px 10px 25px; max-height:calc(100svh - 232px);}
	.spon_pop .view .list ul {width:calc((100% - 10px) / 2);  margin-right:10px;}
	.spon_pop .view .list ul:nth-child(3n) {margin-right:10px;}
	.spon_pop .view .list ul:nth-child(2n) {margin-right:0;}
	.spon_pop .view .list ul li.img button {right:15px; top:15px;}
	.spon_pop .view .list ul li.img button img {width:25px; height:25px;}
	.spon_pop .view .list ul {padding:8px;}

	.spon_pop .view .more_bt {width:100%;}
}