body {font-family: 'Pretendard', sans-serif; letter-spacing: -0.05em; line-height: 1.4; background: #000;}
#wrap {position: relative; width: 100%; min-height: 100vh; padding: 3.75rem 0; background: url(/assets/img/bg-login.jpg) no-repeat 50% 100% #000; background-size: cover; display: flex; align-items: center; justify-content: center;}

/******* 로그인 *******/
.logo {text-align: center;}
.login {display: flex; flex-direction: column; gap: 50px; align-items: center; justify-content: center;}
.formWrap form {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;}
.member .formWrap {width: 400px;}
.member .formWrap .form-group {width: 100%;}
.member .formWrap .form-group input {width: 100%; height: 50px; border-radius: 7px; border: 0; background-color: #202020; padding: 0 1rem; color: rgba(255,255,255,.7);} 
.member .login-btn {width: 100%; height: 50px; border-radius: 7px; background-color: #FF6C3E; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; color: #fff; font-weight: 600;}
.member .link-wrap {margin-top: 50px; display: flex; gap: 0 30px;}
.member .link-wrap a {font-size: 1.125rem; color: rgba(255,255,255,.7); cursor: pointer;}
.member .link-wrap a:hover {font-weight: 500; color: #fff;}
.sr-only {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
@media (max-width: 480px) {
	.login {width: 100%;}
	.member .formWrap {width: calc(100% - 3rem);}
	.member .link-wrap {gap: 0 15px;}
}

/******* 회원가입 *******/
/* 약관 */
.join {width: 100%;}
.join .formWrap {width: calc(100% - 3rem); max-width: 800px; margin: 0 auto;}
.join .sWrap {position: relative; padding-top: 40px;}
.join .sWrap.mypage {padding-top:0;}
.join .sWrap:first-child {padding-top: 0;}
.join .radioWrap li {float: left; width: 32%; margin-left: 2%;}
.join .radioWrap li:first-child {margin-left: 0;}
.join .radioWrap li input[type="radio"] {display: none;}
.join .radioWrap li input[type="radio"] + label {display: table; position: relative; border: 2px solid #b5bfd9; width: 100%; height: 100px; border-radius: 10px; box-shadow: 0 5px 10px rgba(0,0,0,.1); transition: 0.15s ease; cursor: pointer;}
.join .radioWrap li input[type="radio"] + label span {display: block; color: #000; font-weight: 500; font-size: 18px; text-align: center;}
.join .radioWrap li input[type="radio"] + label div:before {display: none; content: ''; position: absolute; left: 5px; top: 5px; width: 22px; height: 22px; border-radius: 50%; background: url(/assets/img/checkW.png) no-repeat 50% #6e55bf; background-size: 12px;}
.join .radioWrap li input:checked + label {border: 2px solid #6e55bf;}
.join .radioWrap li input:checked + label span {color: #6e55bf;}
.join .radioWrap li input:checked + label div:before {display: block;}
.join .sWrap .agreeBox {margin: 0 0 15px; padding: 20px; height: 210px; border: 1px solid rgba(255,255,255,.2); overflow-y: auto;}
.join .sWrap button {position: relative; text-align: center; width: 100%; height: 60px; margin-top: 30px; background:#ff8b4f; border-radius: 10px; color: #fff; font-size: 16px; cursor: pointer; transition: all .3s;}
.join .sWrap button:hover {background: #272727; transition: all .3s;}
.join .sWrap .privacy {text-align: left; padding: 0; margin-top: -40px;}
.join .checkWrap {text-align: left; margin:15px 0;}
.join .checkWrap input[type="checkbox"] {display: none;}
.join .checkWrap input[type="checkbox"] + label {display: block; position: relative; padding-left: 35px; margin-bottom: 20px; font-size: 16px; color: rgba(255,255,255,.6); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
.join .checkWrap input[type="checkbox"] + label:last-child {margin-bottom: 0;}
.join .checkWrap input[type="checkbox"] + label:before {content: ''; display: block; width: 20px; height: 20px; border: 2px solid #ff8b4f; position: absolute; left: 0; top: 3px; opacity: .6; -webkit-transition: all .12s, border-color .08s; transition: all .12s, border-color .08s;}
.join .checkWrap input[type="checkbox"]:checked + label:before {width: 10px; top: -2px; left: 5px; border-radius: 0; opacity: 1; border-top-color: transparent; border-left-color: transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.join .agreeBox {color: rgba(255,255,255,.6);}
.join .agreeBox .sTit {margin-top: 2rem; font-size: 1.5rem; color: #fff; font-weight: 700;+}
.join .agreeBox h4 {text-align:left; font-size: 1.1rem; color: #fff; font-weight: 600; margin: 20px 0 10px;}
.join .agreeBox ul {list-style: none;}
.join .agreeBox ul li {font-size: 1rem; color: rgba(255,255,255,.7); line-height: 1.8; margin: 2px 0;}
.join .agreeBox ul > li > ul > li {font-weight: 300; line-height: 1.5; margin: 5px 0;}
.join .joinNextBtn {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 400px; height: 50px; margin: 30px auto 0; border-radius: 7px; background-color: #FF6C3E; color: #fff; font-weight: 600;}

/*회원가입 */
.join .formBox {position: relative; margin: 0 auto; width: calc(100% - 6rem); max-width: 1600px; padding: 4rem 0; border-radius: 2.5rem; background-color: rgba(12,12,12,.6); backdrop-filter: blur(30px);}
.join .formBox:before {content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: linear-gradient(350deg, #F96D35 0%, #371407 15%, #0D0D0D 50%, #371407 85%,
#972B00 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1;}
.join .form-in {position: relative; width: 100%; height: 100%; display: flex;}
.join .form-in:after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1px; height: 100%; background-color: rgba(255,255,255,.2);}
.join .form-in .left, .join .form-in .right {width: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 4rem;}
.join .form-in .left {gap: 50px;}
.join strong {display: block; font-size: 1.8rem; color: #fff; margin-bottom: 2rem;}
.join .info-box ul {display: flex; flex-direction: column; gap: 5px;}
.join .info-box ul li {font-size: 1.3rem; color: rgba(255,255,255,.6);}
.join .info-box ul li .num {margin-right: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 20px; border-radius: 50%; background-color: rgba(255,255,255,.3); }
.join .form-box {width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 10px 0;}
.join .form-box .psForm {display: flex; gap: 0 7px; align-items: center;}
.join .form-box .psForm input {width: 70%; height: 50px; border-radius: 7px; border: 0; background-color: #313131; padding: 0 1rem; color: rgba(255,255,255,.7);}
.join .form-box .psForm button {width: 30%; height: 50px; border-radius: 7px; border: 1px solid rgba(255,255,255,.4); padding: 0 1rem; color: rgba(255,255,255,.8); font-size: 1rem; cursor: pointer;}
.join .form-box .psForm button:hover {background-color: rgba(0,0,0,.7); border: 0;}
.join .joinForm {display: flex; flex-direction: column; gap: 10px 0; width: 100%; max-width: 500px;}
.join .joinForm input {width: 100%; height: 50px; border-radius: 7px; border: 0; background-color: #313131; padding: 0 1rem; color: rgba(255,255,255,.7);}
.join .joinForm .joinBtn {width: 100%; height: 50px; border-radius: 7px; background-color: #FF6C3E; font-size: 1.2rem; color: #fff; font-weight: 500;}

/* 완료 */
.join.end {margin-top: -3rem; padding: 0 3rem;}
.join.end .in {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 50px;}
.join.end .in img {height: 280px; width: auto;}
.join.end .txt {text-align: center; color: #fff;}
.join.end .txt b {font-size: 1.875rem; font-weight: 700;}
.join.end .txt p {margin-top: 5px; font-size: 1.25rem;}
.join.end .btns {display: flex; align-items: center; gap: 0 10px; justify-content: center;}
.join.end .btns button {width: 220px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 600; color: #fff; background-color: #202020; border-radius: 
7px;}
.join.end .btns button.bg-primary {background-color: var(--bg-primary);}
@media (max-width: 1400px) {
	.join .form-in .left {gap: 30px;}
	.join strong {font-size: 1.6rem;}
	.join .info-box ul li {font-size: 1.1rem;}
}
@media (max-width: 1200px) {
	.join .form-in .left, .join .form-in .right {padding: 0 3rem;}
	.join strong {font-size: 1.4rem;}
}
@media (max-width: 991px) {
	.join .formBox {width: calc(100% - 3rem);}
	.join .form-in {flex-direction: row;}
	.join .form-in .left, .join .form-in .right {padding: 0 1.5rem;}
	.join strong {font-size: 1.3rem;}
	.join .form-box .psForm button {padding: 0; font-size: 0.9rem;}
}
@media (max-width: 767px) {
	.join .form-in:after {display: none;}
	.join .form-in {flex-direction: column; gap: 30px;}
	.join .form-in .left, .join .form-in .right {width: 100%;}
}
@media (max-width: 480px) {
	.join .formBox {background-color: rgba(0,0,0,0); backdrop-filter: none;}
	.join .form-in .left, .join .form-in .right {padding: 0;}
	.join .form-box .psForm input, .join .form-box .psForm button, .join .joinForm input, .join .joinForm .joinBtn {height: 40px;}
	.join.end .in {gap: 30px;}
	.join.end .in img {height: 200px; width: auto;}
	.join.end .txt b {font-size: 1.8rem;}
	.join.end .btns {gap: 0 5px;}
	.join.end .btns button {width: 130px; height: 40px;}
}
@media (max-width: 360px) {
	.join.end .txt b {font-size: 1.5rem;}
}

/******* 마이페이지 *******/
.mypage {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1200px;}
.mypage .in {display: flex; flex-direction: column; gap: 50px; width: 100%;}
.mypage .in .myInfo {position: relative; display: flex; flex-direction: column; gap: 35px; padding: 1.875rem 3.125rem; width: 100%;}
.mypage .in .myInfo:before {content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: linear-gradient(350deg, #F96D35 0%, #371407 15%, #0D0D0D 50%, #371407 85%,
#972B00 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.mypage .in .top {position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 3.125rem 0; z-index: 500;}
.mypage .in .user {display: flex; align-items: center; gap: 0 60px;}
.mypage .in .user b a {padding: 5px 15px; font-size: 14px; border-radius: 7px; background-color: #fff; color: #000;}
.mypage .top i {display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; background-color: #969696;}
.mypage .top b {display: flex; flex-direction: column; gap: 10px 0; align-items: flex-start; font-size: 1.5rem; font-weight: 600; color: #fff;}
.mypage .top button {display: flex; align-items: center; gap: 0 15px; color: #5E5E5E; font-size: 1.25rem; font-weight: 600;}
.mypage .grid {position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; z-index: 500;}
.mypage .grid .box {display: flex; align-items: center; padding: 0 3.125rem; background-color: #202020; border-radius: 7px; height: 50px;}
.mypage .grid .box span {font-size: 1.125rem; color: #fff; font-weight: 600; width: 140px;}
.mypage .grid .box:nth-of-type(1) span, .mypage .grid .box:nth-of-type(3) span {width: 100px;}
.mypage .grid .box p {font-size: 1.125rem; color: #fff; font-weight: 400;}
.mypage .grid .box button {font-size: 1rem; color: #fff; font-weight: 500; padding: 5px 25px; border-radius: 5px; background-color: var(--bg-primary); cursor: pointer;}
.mypage .priceInfo {width: 100%; background-color: rgba(13,13,13,.6); border: 1px solid #373737; backdrop-filter: blur(4px); display: flex;}
.mypage .priceInfo .box {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 33.3333%; padding: 3.125rem 0; border-left: 1px solid #373737;}
.mypage .priceInfo .box:nth-of-type(1) {border-left: 0;}
.mypage .priceInfo .box b {display: flex; align-items: center; justify-content: center; gap: 0 1rem; font-size: 2.5rem; color: #fff; font-weight: 700; margin: 0 0 1.6875rem;}
.mypage .priceInfo .box b span {font-size: 1.5rem; font-weight: 500; color: var(--color-primary);}
.mypage .priceInfo .box .highlight {display: flex; align-items: center; justify-content: center; gap: 0 10px; color: var(--color-primary); font-size: 1.5rem; font-weight: 600;}
.mypage .priceInfo .box .highlight span {font-size: 1rem; color: #D38A74;}
.mypage .priceInfo .box .select-btn {margin-top: 16px; width: 300px; padding: 15px 0; border: 2px solid var(--color-primary); border-radius: 10px; color: var(--color-primary); font-size: 1.25rem; font-weight: 600;}
.mypage .priceInfo .box .select-btn.active {background-color: var(--bg-primary); color: #fff;}
.mypage .btnWrap {text-align: center;}
.mypage .btnWrap button {padding: 1.2rem 5rem; background: none; color: #fff; border: 2px solid #fff; cursor: pointer;}
.mypage .wave-effect div {display: flex; overflow: hidden; text-shadow: 0 30px 0 #fff; align-items: center; justify-content: center;}
.mypage .wave-effect span {display: block; -webkit-backface-visibility : hidden; backface-visibility: hidden; transition: transform .44s ease; letter-spacing: 1.5px; font-size: 1.5rem;}
.mypage .wave-effect span:nth-child(1) {transition-delay: 0.05s;}
.mypage .wave-effect span:nth-child(2) {transition-delay: 0.1s;}
.mypage .wave-effect span:nth-child(3) {transition-delay: 0.15s;}
.mypage .wave-effect span:nth-child(4) {transition-delay: 0.2s;}
.mypage .wave-effect:hover span {transform: translateY(calc(30px * -1)) translateZ(0);}
@media (max-width: 1400px) {
		.mypage {width: calc(100% - 6rem);}
}
@media (max-width: 1200px) {
		.mypage {width: calc(100% - 6rem);}
		.mypage .priceInfo .box b {font-size: 2.2rem;}
		.mypage .priceInfo .box .select-btn {width: 90%;}
		.mypage .btnWrap button {padding: 1rem 3.5rem;}
}
@media (max-width: 991px) {
	.mypage {width: calc(100% - 4rem);}
	.mypage .in .myInfo {padding: 1.875rem; gap: 20px;}
	.mypage .in .top {padding: 0;}
	.mypage .top i {width: 4rem; height: 4rem;}
	.mypage .top i img {height: 24px; width: auto;}
	.mypage .in .user {gap: 0 30px;}
	.mypage .grid .box {padding: 0 2rem;}
	.mypage .grid .box span {width: 110px;}
	.mypage .grid .box:nth-of-type(1) span, .mypage .grid .box:nth-of-type(3) span {width: 70px;}
	.mypage .priceInfo .box b {font-size: 1.8rem;}
	.mypage .priceInfo .box .select-btn {padding: 12px 0; border-radius: 7px; font-size: 1.1rem;}
}
@media (max-width: 640px) {
	.mypage .in {gap: 30px;}
	.mypage .priceInfo .box {padding: 2rem 0.5rem;}
	.mypage .priceInfo .box b {font-size: 1.4rem; margin: 0;}
	.mypage .priceInfo .box b span {font-size: 1rem;}
	.mypage .priceInfo .box .highlight {padding: 1rem 0 0.6rem;}
	.mypage .priceInfo .box .highlight span {display: none;}
	.mypage .priceInfo .box .select-btn {margin-top: 0; padding: 8px 0; border-radius: 0; border: 1px solid var(--color-primary);}
}
@media (max-width: 480px) {
	.mypage {width: calc(100% - 3rem);}
	.mypage .in .myInfo {padding: 1.3rem;}
	.mypage .in .user {gap: 0 20px;}
	.mypage .top i {width: 3.6rem; height: 3.6rem;}
	.mypage .top i img {height: 20px;}
	.mypage .top button img {display: none;}
	.mypage .grid .box {padding: 0 1.5rem;}
	.mypage .grid .box button {padding: 5px 15px;}
	.mypage .grid .box span {width: 110px !important;}
	.mypage .grid {grid-template-columns: 1fr; gap: 5px;}
	.mypage .priceInfo {flex-direction: column;}
	.mypage .priceInfo .box {width: 100%; padding: 1.2rem 0.5rem; border-left: 0; border-top: 1px solid #373737;}
	.mypage .priceInfo .box:nth-of-type(1) {border-top: 0;}
	.mypage .priceInfo .box b {font-size: 1.2rem; gap: 0 0.5rem;}			
	.mypage .priceInfo .box .select-btn {padding: 5px 0; width: 50%;}
}