/* 회원관련 */
#member { background: linear-gradient(139deg, #E9F0FF 0%, #EAE6FF 20%, #F7ECF0 40%, #F7ECF0 50%, #F7ECF0 60%, #E9EBFF 80%, #E9F0FF 100%); min-height: 100svh; }
#member .content { min-height: 100svh; display: flex; align-items: center; justify-content: center; }
#member .content .container { flex: 1; }
#member .content .box .logo { text-align: center; margin: 0 0 30px; }
#member .content .box .logo a img { width: 238px; }
#member .content .box .form { border-radius: 15px; background: #FFF; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15); padding: 30px; }
#member .content .box .form .back { display: inline-block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' fill='none'%3E%3Cpath d='M11.1429 5.4375H1M1 5.4375L5.4375 1M1 5.4375L5.4375 9.875' stroke='%23AAAAAA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 13px; background-position: left center; padding-left: 22px; color: #888; font-family: 'Pretendard'; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.15px; margin: 0 0 20px; }

@media screen and (max-width:1600px) {
    #member .content .box .logo { margin: 0 0 28px; }
    #member .content .box .logo a img { width: 233px; }
    #member .content .box .form { border-radius: 14px; box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.15); padding: 28px; }
    #member .content .box .form .back { background-size: 12.5px; padding-left: 22px; font-size: 14.5px; margin: 0 0 20px; }
}
@media screen and (max-width:1280px) {
    #member .content .box .logo { margin: 0 0 26px; }
    #member .content .box .logo a img { width: 228px; }
    #member .content .box .form { border-radius: 13px; box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.15); padding: 26px; }
    #member .content .box .form .back { background-size: 12px; padding-left: 22px; font-size: 14px; margin: 0 0 20px; }
}
@media screen and (max-width:1024px) {
    #member .content .box .logo { margin: 0 0 24px; }
    #member .content .box .logo a img { width: 223px; }
    #member .content .box .form { border-radius: 12px; box-shadow: 0 0 21px 0 rgba(0, 0, 0, 0.15); padding: 24px; }
    #member .content .box .form .back { background-size: 11.5px; padding-left: 22px; font-size: 13.5px; margin: 0 0 20px; }
}
@media screen and (max-width:768px) {
    #member .content .box .logo { margin: 0 0 22px; }
    #member .content .box .logo a img { width: 218px; }
    #member .content .box .form { border-radius: 11px; box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.15); padding: 22px; }
    #member .content .box .form .back { background-size: 11px; padding-left: 22px; font-size: 13px; margin: 0 0 20px; }
}
@media screen and (max-width:640px) {
    #member .content .box .logo { margin: 0 0 20px; }
    #member .content .box .logo a img { width: 213px; }
    #member .content .box .form { border-radius: 10px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15); padding: 20px; }
    #member .content .box .form .back { background-size: 10.5px; padding-left: 22px; font-size: 12.5px; margin: 0 0 20px; }
}



#member .content .box .form .radio { font-size: 0; border-radius: 15px; border: 1px solid #d6d6d6; position: relative; margin: 0 0 30px; }
#member .content .box .form .radio input[type="radio"] { position: absolute; opacity: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#member .content .box .form .radio label { display: inline-block; width: 50%; color: #565656; text-align: center; font-family: 'Pretendard'; font-size: 17px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.17px; padding: 12px 0; border-radius: 15px; cursor: pointer; }
#member .content .box .form .radio input[type="radio"]:checked + label { background: #d6d6d6; font-weight: 600; color: #000; }
#member .content .box .form .head { margin: 0 0 30px; }
#member .content .box .form .head p { color: #000; text-align: center; font-family: 'Pretendard'; font-size: 30px; font-style: normal; font-weight: 800; line-height: normal; letter-spacing: 0.3px; }
#member .content .box .form .head span { display: block; color: #333; text-align: center; font-family: 'Pretendard'; font-size: 15px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: 0.15px; margin: 10px 0 0; }

@media screen and (max-width:1600px) {
    #member .content .box .form .radio { border-radius: 14px; margin: 0 0 28px; }
    #member .content .box .form .radio label { font-size: 16.5px; padding: 11.5px 0; border-radius: 14px; }
    #member .content .box .form .head { margin: 0 0 28px; }
    #member .content .box .form .head p { font-size: 28px; }
    #member .content .box .form .head span { font-size: 14.5px; margin: 9.5px 0 0; }
}
@media screen and (max-width:1280px) {
    #member .content .box .form .radio { border-radius: 13px; margin: 0 0 26px; }
    #member .content .box .form .radio label { font-size: 16px; padding: 11px 0; border-radius: 13px; }
    #member .content .box .form .head { margin: 0 0 26px; }
    #member .content .box .form .head p { font-size: 26px; }
    #member .content .box .form .head span { font-size: 14px; margin: 9px 0 0; }
}
@media screen and (max-width:1024px) {
    #member .content .box .form .radio { border-radius: 12px; margin: 0 0 24px; }
    #member .content .box .form .radio label { font-size: 15.5px; padding: 10.5px 0; border-radius: 12px; }
    #member .content .box .form .head { margin: 0 0 24px; }
    #member .content .box .form .head p { font-size: 24px; }
    #member .content .box .form .head span { font-size: 13.5px; margin: 8.5px 0 0; }
}
@media screen and (max-width:768px) {
    #member .content .box .form .radio { border-radius: 11px; margin: 0 0 22px; }
    #member .content .box .form .radio label { font-size: 15px; padding: 10px 0; border-radius: 11px; }
    #member .content .box .form .head { margin: 0 0 22px; }
    #member .content .box .form .head p { font-size: 22px; }
    #member .content .box .form .head span { font-size: 13px; margin: 8px 0 0; }
}
@media screen and (max-width:640px) {
    #member .content .box .form .radio { border-radius: 10px; margin: 0 0 20px; }
    #member .content .box .form .radio label { font-size: 14.5px; padding: 9.5px 0; border-radius: 10px; }
    #member .content .box .form .head { margin: 0 0 20px; }
    #member .content .box .form .head p { font-size: 20px; }
    #member .content .box .form .head span { font-size: 12.5px; margin: 7.5px 0 0; }
}



#member .content .box .form .input { margin: 20px 0 0; }
#member .content .box .form .input#authInfo { display:none; }
#member .content .box .form .input .t { color: #000; font-family: 'Pretendard'; font-size: 17px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.17px; }
#member .content .box .form .input .i { margin: 5px 0 0; position:relative; }
#member .content .box .form .input .i select ,
#member .content .box .form .input .i input { width:100%; border-radius: 5px; border: 1px solid #DDD; background: #FFF; height: 40px; padding: 0 12px; color: #888; font-family: 'Pretendard'; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.15px; }
#member .content .box .form .input .i input::placeholder { color:#888888; }
#member .content .box .form .input .i.auth { font-size: 0; text-align: left; }
#member .content .box .form .input .i.auth input { width: calc(100% - 60px - 10px); }
#member .content .box .form .input .i.auth input:read-only{ background: #f5f5f5; cursor: not-allowed; }
#member .content .box .form .input .i.auth button { width: 60px; margin: 0 0 0 10px; display:inline-block; border-radius: 5px; background: #EEE; color: #666; text-align: center; font-family: 'Pretendard'; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.15px; height: 40px; line-height: 40px; }
#member .content .box .form .input .i.tel { font-size: 0; }
#member .content .box .form .input .i.tel input { width: 30%; }
#member .content .box .form .input .i.tel span { display: inline-block; text-align: center; color: #888; font-family: 'Pretendard'; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.15px; width: 5%; }

#member .content .box .form .input .i.tel_auth input { width: calc(30% - (60px / 3) - (10px / 3)); }
#member .content .box .form .input p.explan { opacity: 0; color: #555; font-family: 'Pretendard'; font-size: 13px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.13px; margin: 10px 0 0; transition: opacity 0.6s ease; }
#member .content .box .form .input p.explan .action { color: #000; }

@media screen and (max-width:1600px) {
    #member .content .box .form .input { margin: 20px 0 0; }
    #member .content .box .form .input .t { font-size: 16.5px; }
    #member .content .box .form .input .i { margin: 5px 0 0; }
    #member .content .box .form .input .i select ,
    #member .content .box .form .input .i input { border-radius: 5px; height: 39px; padding: 0 12px; font-size: 14.5px; }
    #member .content .box .form .input .i.auth input { width: calc(100% - 60px - 9px); }
    #member .content .box .form .input .i.auth button { margin: 0 0 0 9px; border-radius: 5px; font-size: 14.5px; height: 39px; line-height: 39px; }
    #member .content .box .form .input .i.tel span { font-size: 14.5px; }
    #member .content .box .form .input .i.tel_auth input { width: calc(30% - (60px / 3) - (9px / 3)); }
    #member .content .box .form .input p.explan { font-size: 13px; margin: 9.5px 0 0; }
}
@media screen and (max-width:1280px) {
    #member .content .box .form .input { margin: 20px 0 0; }
    #member .content .box .form .input .t { font-size: 16px; }
    #member .content .box .form .input .i { margin: 4.5px 0 0; }
    #member .content .box .form .input .i select ,
    #member .content .box .form .input .i input { border-radius: 4.5px; height: 38px; padding: 0 12px; font-size: 14px; }
    #member .content .box .form .input .i.auth input { width: calc(100% - 60px - 8px); }
    #member .content .box .form .input .i.auth button { margin: 0 0 0 8px; border-radius: 4.5px; font-size: 14px; height: 38px; line-height: 38px; }
    #member .content .box .form .input .i.tel span { font-size: 14px; }
    #member .content .box .form .input .i.tel_auth input { width: calc(30% - (60px / 3) - (8px / 3)); }
    #member .content .box .form .input p.explan { font-size: 12.5px; margin: 9px 0 0; }
}
@media screen and (max-width:1024px) {
    #member .content .box .form .input { margin: 20px 0 0; }
    #member .content .box .form .input .t { font-size: 15.5px; }
    #member .content .box .form .input .i { margin: 4.5px 0 0; }
    #member .content .box .form .input .i select ,
    #member .content .box .form .input .i input { border-radius: 4.5px; height: 37px; padding: 0 12px; font-size: 13.5px; }
    #member .content .box .form .input .i.auth input { width: calc(100% - 60px - 7px); }
    #member .content .box .form .input .i.auth button { margin: 0 0 0 7px; border-radius: 4.5px; font-size: 13.5px; height: 37px; line-height: 37px; }
    #member .content .box .form .input .i.tel span { font-size: 13.5px; }
    #member .content .box .form .input .i.tel_auth input { width: calc(30% - (60px / 3) - (7px / 3)); }
    #member .content .box .form .input p.explan { font-size: 12.5px; margin: 8.5px 0 0; }
}
@media screen and (max-width:768px) {
    #member .content .box .form .input { margin: 20px 0 0; }
    #member .content .box .form .input .t { font-size: 15px; }
    #member .content .box .form .input .i { margin: 4px 0 0; }
    #member .content .box .form .input .i select ,
    #member .content .box .form .input .i input { border-radius: 4px; height: 36px; padding: 0 12px; font-size: 13px; }
    #member .content .box .form .input .i.auth input { width: calc(100% - 60px - 6px); }
    #member .content .box .form .input .i.auth button { margin: 0 0 0 6px; border-radius: 4px; font-size: 13px; height: 36px; line-height: 36px; }
    #member .content .box .form .input .i.tel span { font-size: 13px; }
    #member .content .box .form .input .i.tel_auth input { width: calc(30% - (60px / 3) - (6px / 3)); }
    #member .content .box .form .input p.explan { font-size: 12px; margin: 8px 0 0; }
}
@media screen and (max-width:640px) {
    #member .content .box .form .input { margin: 20px 0 0; }
    #member .content .box .form .input .t { font-size: 14.5px; }
    #member .content .box .form .input .i { margin: 4px 0 0; }
    #member .content .box .form .input .i select ,
    #member .content .box .form .input .i input { border-radius: 4px; height: 35px; padding: 0 12px; font-size: 12.5px; }
    #member .content .box .form .input .i.auth input { width: calc(100% - 60px - 5px); }
    #member .content .box .form .input .i.auth button { margin: 0 0 0 5px; border-radius: 4px; font-size: 12.5px; height: 35px; line-height: 35px; }
    #member .content .box .form .input .i.tel span { font-size: 12.5px; }
    #member .content .box .form .input .i.tel_auth input { width: calc(30% - (60px / 3) - (5px / 3)); }
    #member .content .box .form .input p.explan { font-size: 12px; margin: 7.5px 0 0; }
}



#member .content .box .form .navi { margin: 15px 0 0; overflow: hidden; }
#member .content .box .form .navi li { float: right; }
#member .content .box .form .navi li a { color: #888; font-family: 'Pretendard'; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.15px; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; }

@media screen and (max-width:1600px) {
    #member .content .box .form .navi { margin: 14.5px 0 0; }
    #member .content .box .form .navi li a { font-size: 14.5px; }
}
@media screen and (max-width:1280px) {
    #member .content .box .form .navi { margin: 14px 0 0; }
    #member .content .box .form .navi li a { font-size: 14px; }
}
@media screen and (max-width:1024px) {
    #member .content .box .form .navi { margin: 13.5px 0 0; }
    #member .content .box .form .navi li a { font-size: 13.5px; }
}
@media screen and (max-width:768px) {
    #member .content .box .form .navi { margin: 13px 0 0; }
    #member .content .box .form .navi li a { font-size: 13px; }
}
@media screen and (max-width:640px) {
    #member .content .box .form .navi { margin: 12.5px 0 0; }
    #member .content .box .form .navi li a { font-size: 12.5px; }
}



#member .content .box .form .agree { margin: 30px 0 0; border-radius: 15px; background: #F3F4F5; padding: 15px; }
#member .content .box .form .agree li { color: #555; font-family: 'Pretendard'; font-size: 15px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0.15px; margin: 12px 0 0; position: relative; }
#member .content .box .form .agree li:first-child { color: #333; font-size: 17px; letter-spacing: 0.17px; padding-bottom: 14px; margin: 0; border-bottom: 1px solid #DDD; }
#member .content .box .form .agree li label { position: relative; padding: 0 0 0 24px; }
#member .content .box .form .agree li label input[type=checkbox] { appearance: none; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); padding: 0; margin: 0; border-radius: 1px; width: 16px; height: 16px; border: 1px solid #1C1B1F; }
#member .content .box .form .agree li label input[type=checkbox]:checked { appearance: auto; accent-color: #7F40FF; }
#member .content .box .form .agree li label span { color: #7F40FF; }
#member .content .box .form .agree li button { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); color: #888; font-family: 'Pretendard'; font-size: 15px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0.15px; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; }

@media screen and (max-width:1600px) {
    #member .content .box .form .agree { margin: 28px 0 0; border-radius: 14px; padding: 14.5px; }
    #member .content .box .form .agree li { font-size: 14.5px; margin: 11.5px 0 0; }
    #member .content .box .form .agree li:first-child { font-size: 16.5px; padding-bottom: 13.5px; }
    #member .content .box .form .agree li label { padding: 0 0 0 23px; }
    #member .content .box .form .agree li label input[type=checkbox] { width: 15.5px; height: 15.5px; }
    #member .content .box .form .agree li button { font-size: 14.5px; }
}
@media screen and (max-width:1280px) {
    #member .content .box .form .agree { margin: 26px 0 0; border-radius: 13px; padding: 14px; }
    #member .content .box .form .agree li { font-size: 14px; margin: 11px 0 0; }
    #member .content .box .form .agree li:first-child { font-size: 16px; padding-bottom: 13px; }
    #member .content .box .form .agree li label { padding: 0 0 0 22px; }
    #member .content .box .form .agree li label input[type=checkbox] { width: 15px; height: 15px; }
    #member .content .box .form .agree li button { font-size: 14px; }
}
@media screen and (max-width:1024px) {
    #member .content .box .form .agree { margin: 24px 0 0; border-radius: 12px; padding: 13.5px; }
    #member .content .box .form .agree li { font-size: 13.5px; margin: 10.5px 0 0; }
    #member .content .box .form .agree li:first-child { font-size: 15.5px; padding-bottom: 12.5px; }
    #member .content .box .form .agree li label { padding: 0 0 0 21px; }
    #member .content .box .form .agree li label input[type=checkbox] { width: 14.5px; height: 14.5px; }
    #member .content .box .form .agree li button { font-size: 13.5px; }
}
@media screen and (max-width:768px) {
    #member .content .box .form .agree { margin: 22px 0 0; border-radius: 11px; padding: 13px; }
    #member .content .box .form .agree li { font-size: 13px; margin: 10px 0 0; }
    #member .content .box .form .agree li:first-child { font-size: 15px; padding-bottom: 12px; }
    #member .content .box .form .agree li label { padding: 0 0 0 20px; }
    #member .content .box .form .agree li label input[type=checkbox] { width: 14px; height: 14px; }
    #member .content .box .form .agree li button { font-size: 13px; }
}
@media screen and (max-width:640px) {
    #member .content .box .form .agree { margin: 20px 0 0; border-radius: 10px; padding: 12.5px; }
    #member .content .box .form .agree li { font-size: 12.5px; margin: 9.5px 0 0; }
    #member .content .box .form .agree li:first-child { font-size: 14.5px; padding-bottom: 11.5px; }
    #member .content .box .form .agree li label { padding: 0 0 0 19px; }
    #member .content .box .form .agree li label input[type=checkbox] { width: 13.5px; height: 13.5px; }
    #member .content .box .form .agree li button { font-size: 12.5px; }
}



#member .content .box .form .button { margin: 30px 0 0; }
#member .content .box .form .button a ,
#member .content .box .form .button button { display: block; width: 100%; padding: 15px 0; border-radius: 15px; background: linear-gradient(180deg, #7F40FF 0%, #427BBF 100%); color: #FFF; text-align: center; font-family: 'Pretendard'; font-size: 17px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0.17px; }

#member .content .box .form .info { margin: 40px 0; }
#member .content .box .form .info p { color: #000; text-align: center; font-family: 'Pretendard'; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.15px; }
#member .content .box .form .info p strong { display:block; color: #7F40FF; text-align: center; font-family: 'Pretendard'; font-size: 25px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0.25px; margin: 10px 0 0; }

#member .content .box .form .join { margin: 30px 0 0; color: #888; text-align: center; font-family: 'Pretendard'; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.15px; } 
#member .content .box .form .join a { color: #7F40FF; letter-spacing: 0.15px; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; }
#member .content .box .form .join a.leave { color: #888; text-decoration-line: none; }

@media screen and (max-width:1600px) {
    #member .content .box .form .button { margin: 28px 0 0; }
    #member .content .box .form .button a ,
    #member .content .box .form .button button { padding: 14.5px 0; border-radius: 14px; font-size: 16.5px; }

    #member .content .box .form .info { margin: 37px 0; }
    #member .content .box .form .info p { font-size: 14.5px; }
    #member .content .box .form .info p strong { font-size: 25px; margin: 9.5px 0 0; }

    #member .content .box .form .join { margin: 28px 0 0; font-size: 14.5px; } 
}
@media screen and (max-width:1280px) {
    #member .content .box .form .button { margin: 26px 0 0; }
    #member .content .box .form .button a ,
    #member .content .box .form .button button { padding: 14px 0; border-radius: 13px; font-size: 16px; }

    #member .content .box .form .info { margin: 34px 0; }
    #member .content .box .form .info p { font-size: 14px; }
    #member .content .box .form .info p strong { font-size: 25px; margin: 9px 0 0; }

    #member .content .box .form .join { margin: 26px 0 0; font-size: 14px; } 
}
@media screen and (max-width:1024px) {
    #member .content .box .form .button { margin: 24px 0 0; }
    #member .content .box .form .button a ,
    #member .content .box .form .button button { padding: 13.5px 0; border-radius: 12px; font-size: 15.5px; }

    #member .content .box .form .info { margin: 31px 0; }
    #member .content .box .form .info p { font-size: 13.5px; }
    #member .content .box .form .info p strong { font-size: 25px; margin: 8.5px 0 0; }

    #member .content .box .form .join { margin: 24px 0 0; font-size: 13.5px; } 
}
@media screen and (max-width:768px) {
    #member .content .box .form .button { margin: 22px 0 0; }
    #member .content .box .form .button a ,
    #member .content .box .form .button button { padding: 13px 0; border-radius: 11px; font-size: 15px; }

    #member .content .box .form .info { margin: 28px 0; }
    #member .content .box .form .info p { font-size: 13px; }
    #member .content .box .form .info p strong { font-size: 25px; margin: 8px 0 0; }

    #member .content .box .form .join { margin: 22px 0 0; font-size: 13px; } 
}
@media screen and (max-width:640px) {
    #member .content .box .form .button { margin: 20px 0 0; }
    #member .content .box .form .button a ,
    #member .content .box .form .button button { padding: 12.5px 0; border-radius: 10px; font-size: 14.5px; }

    #member .content .box .form .info { margin: 25px 0; }
    #member .content .box .form .info p { font-size: 12.5px; }
    #member .content .box .form .info p strong { font-size: 25px; margin: 7.5px 0 0; }

    #member .content .box .form .join { margin: 20px 0 0; font-size: 12.5px; } 
}