body {background: #fff !important;}

.borderbox {width: 25%; min-width: 375px; background: #FFFFFF; border: 1px solid #D4C4F5; border-radius: 20px; padding: 80px 0; margin: 180px auto 80px; position: relative;}
.borderbox .btn_back {width: 40px; height: 40px; background: url(../images/btn_back.png) center no-repeat; background-size: contain; position: absolute; top: 20px; left: 2%; display: none;}
.borderbox .tab_area {display: flex; justify-content: space-between; margin-bottom: 36px;}
.borderbox .tab_area li {width: 50%;}
.borderbox .tab_area li .tab {display: block; color: #C8C8C8; text-align: center; font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: -0.02em; 
    padding: 13px 0; white-space: nowrap; border-bottom: 1px solid #C8C8C8; transition: all .1s;}
.borderbox .tab_area li .tab:active, .borderbox .tab_area li .tab.on {color: #8556E3; border-color: #8556E3;}
/* hover */
@media (hover:hover) {
    .borderbox .tab_area li .tab:hover {color: #8556E3; border-color: #8556E3;}
}

.borderbox form {padding: 0 5%;}
.borderbox .warning {color: #FF334B; font-weight: 300; font-size: 13px; line-height: 18px; margin-top: 8px; display: none;}
.borderbox label, .borderbox a {font-weight: 300; font-size: 16px; line-height: 20px; letter-spacing: -0.02em; color: #949494; 
    vertical-align: middle; white-space: nowrap; position: relative; cursor: pointer;}
.borderbox input[type="checkbox"] {display: none;}
.borderbox input[type="checkbox"] + label {display: inline-block; width: 20px; height: 20px; border: 1px solid #C8C8C8; border-radius: 4px; 
    vertical-align: middle; cursor: pointer;}
.borderbox input[class="agree"] + label::after {content:''; width: 16px; height: 16px; 
    background: url(../images/icon_check.png) center no-repeat; background-size: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.borderbox input.agree.on + label, .borderbox input.agree:checked + label {border-color: #8556E3; background: #8556E3;}
.borderbox input.agree.on + label::after, .borderbox input.agree:checked + label::after {content:''; width: 16px; height: 16px; 
    background: url(../images/icon_check_on.png) center no-repeat;  background-size: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.borderbox label span {display: inline-block; padding-left: 30px;}
.borderbox .wide_btn {display: block; cursor: pointer; width: 100%; border: none; text-align: center; font-weight: 700; font-size: 16px; line-height: 22px; letter-spacing: -0.02em; border-radius: 8px; transition: all .1s;}


/* login page */
.borderbox .login .info li:not(:last-child) {margin-bottom: 20px;}
.borderbox .login .info li > div {position: relative; border-bottom: 1px solid #C8C8C8;}
.borderbox .login .info li > div::before {content: ''; display: block; width: 24px; height: 24px ;
    background-position: center; background-size: contain; background-size: contain; position: absolute; bottom: 24px; left: 0;}
.borderbox .login .info li:nth-child(1) > div::before {background-image: url(../images/icon_user.png);}
.borderbox .login .info li:nth-child(2) > div::before {background-image: url(../images/icon_key.png);}
.borderbox .login .info li > div label {display: block; color: #111; font-weight: 500; font-size: 12px; line-height: 18px;}
.borderbox .login .info li > div input {width: 100%; display: block; box-sizing: border-box; padding: 20px 0 20px 10%; caret-color: #8556E3;
    border: none; font-family: 'Spoqa Han Sans Neo'; font-weight: 300; font-size: 20px; line-height: 28px; letter-spacing: -0.02em;}
.borderbox .login .info li > div input:focus {outline: none;}
.borderbox .login .info li > div input::placeholder {color: #C8C8C8;}

.borderbox .login .find {display: flex; justify-content: space-between; margin: 30px 0;}
      
.borderbox .login .btn_area p {color: #949494; text-align: center; font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: -0.02em; margin: 20px 0;}  
.borderbox .login .btn_area .btn_login, .borderbox .login .btn_area .btn_naver {color: #fff;}  
.borderbox .login .btn_area .btn_kakao, .borderbox .login .btn_area .btn_naver {padding: 10px 0;}  
.borderbox .login .btn_area .btn_login {background: #D4C4F5; padding: 20px 0;} 
.borderbox .login .btn_area .btn_login:active {background: #8556E3;} 
.borderbox .login .btn_area .btn_kakao {color: #000; margin-bottom: 8px; background: #FFE500; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);}  
.borderbox .login .btn_area .btn_naver {color: #fff; background: #4CC353; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);}  
.borderbox .login .btn_area .btn_kakao span, .borderbox .login .btn_area .btn_naver span {position: relative;} 
.borderbox .login .btn_area .btn_kakao span::before, .borderbox .login .btn_area .btn_naver span::before {content: ''; display: inline-block; width: 42px; height: 42px; 
    background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; vertical-align: middle;} 
.borderbox .login .btn_area .btn_kakao span::before {background-image: url(../images/icon_kakao.png);} 
.borderbox .login .btn_area .btn_naver span::before {background-image: url(../images/icon_naver.png);} 
/* hover */
@media (hover:hover) {
    .borderbox .login .btn_area .btn_login:hover {background: #8556E3;}
}


/* join page */
.borderbox .join .info li:not(:last-child) {margin-bottom: 20px;}
.borderbox .join .info li > div {position: relative; border-bottom: 1px solid #C8C8C8;}
.borderbox .join .info li > div::before {content: ''; display: block; width: 24px; height: 24px ;
    background-position: center; background-size: contain; background-size: contain; position: absolute; bottom: 24px; left: 0;}
.borderbox .join .info li:nth-child(1) > div::before {background-image: url(../images/icon_user.png);}
.borderbox .join .info li:nth-child(2) > div::before {background-image: url(../images/icon_key.png);}
.borderbox .join .info li:nth-child(3) > div::before {background-image: url(../images/icon_key.png);}
.borderbox .join .info li > div label {display: block; color: #111; font-weight: 500; font-size: 12px; line-height: 18px;}
.borderbox .join .info li > div input {width: 100%; display: block; box-sizing: border-box; padding: 20px 0 20px 10%; caret-color: #8556E3;
    border: none; font-family: 'Spoqa Han Sans Neo'; font-weight: 300; font-size: 20px; line-height: 28px; letter-spacing: -0.02em;}
.borderbox .join .info li > div input:focus {outline: none;}
.borderbox .join .info li > div input::placeholder {color: #C8C8C8;}
.borderbox .join .agree_box ul li:first-child {padding: 20px 0;}
.borderbox .join .agree_box ul li:first-child input[type="checkbox"] + label {width: 26px; height: 26px;}
.borderbox .join .agree_box ul li:first-child label span {padding-left: 35px;}
.borderbox .join .agree_box ul li:not(:first-child, :last-child) {margin-bottom: 8px;}
.borderbox .join .agree_box ul li #allcheck + label {font-size: 18px; line-height: 26px;}
.borderbox .join .agree_box ul li:not(:first-child) label span {display: inline-block; position: relative;}
.borderbox .join .agree_box ul li:not(:first-child) label span::after {content: ''; display: inline-block; width: 20px; height: 20px; transition: all .1s;
    background: url(../images/icon_arrow_down.png) center no-repeat; background-size: contain; position: absolute; top: 0; right: -20px; transform: rotate(0);}
.borderbox .join .agree_box ul li:not(:first-child) label span.age_agree::after {content:'';background: none;}

.borderbox .join .agree_box ul li:not(:first-child) label span.on::after {transform: rotate(180deg);}
.borderbox .join .agree_box .terms {width: 100%; height: 100px; padding: 12px 5%; margin-top: 8px; box-sizing: border-box; background: #FFFFFF; 
    border: 1px solid #E0E0E0; border-radius: 8px; color: #6C6C6C; font-weight: 300; font-size: 12px; line-height: 15px; overflow-y: scroll;} 
.borderbox .join .agree_box .terms strong {font-weight: 500;} 
.borderbox .join .wide_btn {background: #D4C4F5; padding: 20px 0; color: #fff; margin-top: 52px;} 
.borderbox .join .wide_btn:active {background: #8556E3;} 
/* hover */
@media (hover:hover) {
    .borderbox .join .wide_btn:hover {background: #8556E3;}
}


.congratulation {padding: 0 5%;} /*KJS*/
.congratulation strong, .congratulation img {display: block;}
.congratulation strong {font-size: 28px; line-height: 36px; letter-spacing: -0.02em; color: #111; margin-bottom: 12px;}
.congratulation p {font-weight: 300; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #949494;}
.congratulation .img_box {width: 148px; padding-top: calc(148/148*50%); background: url(../images/icon_handshake.png) center no-repeat; background-size: contain; margin: 0 auto;}
.congratulation .wide_btn {background: #8556E3; color: #fff; padding: 20px 0;}


/* find password */
.borderbox h2 {text-align: center; color: #000; font-size: 16px; line-height: 22px; letter-spacing: -0.02em;}
.borderbox .find .info li {margin: 40px 0;}
.borderbox .find .info li > div {position: relative; border-bottom: 1px solid #C8C8C8;}
.borderbox .find .info li > div::before {content: ''; display: block; width: 24px; height: 24px ; background-image: url(../images/icon_user.png);
    background-position: center; background-size: contain; background-size: contain; position: absolute; bottom: 24px; left: 0; }
.borderbox .find .info li > div label {display: block; color: #111; font-weight: 500; font-size: 12px; line-height: 18px;}
.borderbox .find .info li > div input {width: 100%; display: block; box-sizing: border-box; padding: 20px 0 20px 10%; caret-color: #8556E3;
    border: none; font-family: 'Spoqa Han Sans Neo'; font-weight: 300; font-size: 20px; line-height: 28px; letter-spacing: -0.02em;}
.borderbox .find .info li > div input:focus {outline: none;}
.borderbox .find .info li > div input::placeholder {color: #C8C8C8;}
.borderbox .find .wide_btn {background: #8556E3; color: #fff; padding: 20px 0;}

.send {padding: 40px 5% 0; display: none;}
.send strong, .congratulation img {display: block;}
.send strong {font-size: 28px; line-height: 36px; letter-spacing: -0.02em; color: #111; margin-bottom: 12px;}
.send p {font-weight: 300; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #949494;}
.send .img_box {width: 148px; padding-top: calc(148/148*50%); background: url(../images/icon_mail.png) center no-repeat; background-size: contain; margin: 0 auto;}
.send .wide_btn {background: #8556E3; color: #fff; padding: 20px 0;}


/* withdraw */
.label_text {color: #111; font-weight: 500; font-size: 12px; line-height: 18px; margin-bottom: 4px;}
.find textarea {width: 100%; height: 150px; box-sizing: border-box; padding: 20px 5%; border: 1px solid #C8C8C8; border-radius: 8px; resize: none; caret-color: #8556E3;
    font-family: 'Spoqa Han Sans Neo'; font-weight: 300; font-size: 20px; line-height: 28px; letter-spacing: -0.02em; color: #111;
    overflow-y: scroll;}
.find textarea:focus {outline: none; border-color: #8556E3;}
.find textarea::placeholder {color: #C8C8C8;}
.counting {text-align: right; color: #949494; font-weight: 300; font-size: 13px; line-height: 18px;}
.borderbox .find .info li > div::before {background-image: url(../images/icon_key.png);}

.withdraw {padding: 40px 5% 0; display: none;}
.withdraw strong, .congratulation img {display: block;}
.withdraw strong {font-size: 28px; line-height: 36px; letter-spacing: -0.02em; color: #111; margin-bottom: 12px;}
.withdraw p {font-weight: 300; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #949494;}
.withdraw .img_box {width: 148px; padding-top: calc(148/148*50%); background: url(../images/icon_mail.png) center no-repeat; background-size: contain; margin: 0 auto;}
.withdraw ul {display: flex; justify-content: space-between;}
.withdraw ul li {width: 49%;}
.withdraw ul li .wide_btn {padding: 20px 0;}
.withdraw ul li .cancle_btn {border: 1px solid #8556E3; color: #8556E3;}
.withdraw ul li .withdraw_btn {background: #8556E3; color: #fff;}


/* modify */
.user_email {font-weight: 300; font-size: 20px; line-height: 28px; color: #111;}


/* member_confirm */
.borderbox h2 {margin-bottom: 53px;}
.borderbox form .main_text {font-weight: 700; font-size: 28px; line-height: 36px; letter-spacing: -0.02em; color: #29203B; margin-bottom: 12px;}
.borderbox form .sub_text {font-weight: 300; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #29203B;}
.borderbox form .sub_text .purple {display: inline;}
.borderbox form .info li:nth-child(1) > div::before {background-image: url(../images/icon_user.png);}
.borderbox form .info li:nth-child(2) > div::before {background-image: url(../images/icon_key.png);}
.borderbox label {cursor: default;}


/* sns_login */
.borderbox > h2 {font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: -0.02em; color: #8556E3; text-align: left; 
    padding: 12px 5%; border-bottom: 1px solid #8556E3; margin-bottom: 36px;}
.borderbox .login .sns_login li:not(:last-child) {margin-bottom: 20px;}
.borderbox .login .sns_login li > div {position: relative; border-bottom: 1px solid #C8C8C8;}
.borderbox .login .sns_login li > div::before {content: ''; display: block; width: 24px; height: 24px ;
    background-position: center; background-size: contain; background-size: contain; position: absolute; bottom: 24px; left: 0;}
.borderbox .login .sns_login li:nth-child(1) > div::before {background-image: url(../images/icon_user.png);}
.borderbox .login .sns_login li:nth-child(2) > div::before {background-image: url(../images/icon_smile.png);}
.borderbox .login .sns_login li > div label {display: block; color: #111; font-weight: 500; font-size: 12px; line-height: 18px;}
.borderbox .login .sns_login li > div label span {font-weight: 400; padding-left: 0;}
.borderbox .login .sns_login li > div input {width: 100%; display: block; box-sizing: border-box; padding: 20px 0 20px 10%; caret-color: #8556E3;
    border: none; font-family: 'Spoqa Han Sans Neo'; font-weight: 300; font-size: 20px; line-height: 28px; letter-spacing: -0.02em;}
.borderbox .login .sns_login li > div input:focus {outline: none;}
.borderbox .login .sns_login li > div input::placeholder {color: #C8C8C8;}
.borderbox .login .membership {background: #FAFAFA; border-radius: 16px; border-radius: 16px; margin: 36px 0 12px;}
.borderbox .login .membership .inner {padding: 20px 0; text-align: center;}
.borderbox .login .membership .inner p {font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: -0.02em; color: #8556E3; margin-bottom: 12px;}
.borderbox .login .membership .inner a {display: inline-block; font-weight: 500; font-size: 12px; line-height: 18px; color: #8556E3; background: #FFFFFF;
    border: 2px solid #E4D7FF; border-radius: 100px; padding: 12px 20px;}
.borderbox .login .membership .inner a span {display: inline-block; width: 12px;}
.borderbox .login .agree_box ul li:first-child {padding: 20px 0;}
.borderbox .login .agree_box ul li:first-child input[type="checkbox"] + label {width: 26px; height: 26px;}
.borderbox .login .agree_box ul li:first-child label span {padding-left: 35px;}
.borderbox .login .agree_box ul li:not(:first-child, :last-child) {margin-bottom: 8px;}
.borderbox .login .agree_box ul li #allcheck + label {font-size: 18px; line-height: 26px;}
.borderbox .login .agree_box ul li:not(:first-child) label span {display: inline-block; position: relative;}
.borderbox .login .agree_box ul li:not(:first-child) label span::after {content: ''; display: inline-block; width: 20px; height: 20px; transition: all .1s;
    background: url(../images/icon_arrow_down.png) center no-repeat; background-size: contain; position: absolute; top: 0; right: -20px; transform: rotate(0);}
.borderbox .login .agree_box ul li:not(:first-child) label span.on::after {transform: rotate(180deg);}
.borderbox .login .agree_box .terms {width: 100%; height: 100px; padding: 12px 5%; margin-top: 8px; box-sizing: border-box; background: #FFFFFF; 
    border: 1px solid #E0E0E0; border-radius: 8px; color: #6C6C6C; font-weight: 300; font-size: 12px; line-height: 15px; overflow-y: scroll;} 
.borderbox .login .agree_box .terms strong {font-weight: 500;} 
.borderbox .login .agree_box .wide_btn {background: #D4C4F5; padding: 20px 0; color: #fff; margin-top: 20px; font-family: 'SpoqaHanSansNeo', "맑은 고딕", sans-serif;} 
.borderbox .login .agree_box .wide_btn:active {background: #8556E3;} 
/* hover */
@media (hover:hover) {
    .borderbox .login .agree_box .wide_btn:hover {background: #8556E3;}
}
.popup_bg {width: 100%; height: calc(100% - 102px); background: rgba(0,0,0,0.7); position: fixed; top: 102px; left: 0;}
.popup_con {width: 50%; background: rgba(0,0,0,0.7); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 32px;}
.popup_con .inner {padding: 32px 5%;}
.popup_con .inner h2 {font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: -0.02em; color: #8556E3; text-align: left; 
    padding: 12px 0; border-bottom: 1px solid #8556E3; margin-bottom: 36px;}
.popup_con .inner p {font-weight: 300; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #29203B;}
.popup_con .inner .warning {color: #FF334B; font-weight: 300; font-size: 13px; line-height: 18px; margin-top: 8px;}
.popup_con .inner form {margin: 32px 0;}
.popup_con .inner form .login li {margin-bottom: 20px;}
.popup_con .inner form .login li > div {position: relative; border-bottom: 1px solid #C8C8C8;}
.popup_con .inner form .login li > div::before {content: ''; display: block; width: 24px; height: 24px ;
    background-position: center; background-size: contain; background-size: contain; position: absolute; bottom: 24px; left: 0;}
.popup_con .inner form .login li:nth-child(1) > div::before {background-image: url(../images/icon_user.png);}
.popup_con .inner form .login li:nth-child(2) > div::before {background-image: url(../images/icon_key.png);}
.popup_con .inner form .login li > div label {display: block; color: #111; font-weight: 500; font-size: 12px; line-height: 18px;}
.popup_con .inner form .login li > div label span {font-weight: 400; padding-left: 0;}
.popup_con .inner form .login li > div input {width: 100%; display: block; box-sizing: border-box; padding: 20px 0 20px 10%; caret-color: #8556E3;
    border: none; font-family: 'Spoqa Han Sans Neo'; font-weight: 300; font-size: 20px; line-height: 28px; letter-spacing: -0.02em;}
.popup_con .inner form .login li > div input:focus {outline: none;}
.popup_con .inner form .login li > div input::placeholder {color: #C8C8C8;}
.popup_con .inner form .btn_area {display: flex; gap: 16px;}
.popup_con .inner form .btn_area .wide_btn {display: block; cursor: pointer; width: 50%; border: none; text-align: center; background: #D4C4F5; padding: 20px 0; color: #fff;
    font-family: 'SpoqaHanSansNeo', "맑은 고딕", sans-serif; font-weight: 700; font-size: 16px; line-height: 22px; letter-spacing: -0.02em; border-radius: 8px; transition: all .1s;}
/* hover */
@media (hover:hover) {
    .popup_con .inner form .btn_area .wide_btn:hover {background: #8556E3;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    .borderbox {width: 50%; padding: 57px 0 60px; margin: 140px auto 126px;}
    .borderbox .btn_back {display: block;}

    /* sns_login */
    .popup_con {border-radius: 16px;}
    .popup_con .inner {padding: 32px 5%;}
    .popup_con .inner h2 {font-size: 18px; padding: 12px 0; margin-bottom: 16px;}
    .popup_con .inner p i {display: block;}
    .popup_con .inner .warning {font-size: 11px;}
    .popup_con .inner form {margin: 16px 0;}
    .popup_con .inner form .login li {margin-bottom: 20px;}
    .popup_con .inner form .login li > div::before {bottom: 18px;}
    .popup_con .inner form .login li > div label {font-size: 12px;}
    .popup_con .inner form .login li > div input {padding: 16px 0 16px 10%; font-size: 16px;}
    .popup_con .inner form .btn_area {gap: 10px;}
    .popup_con .inner form .btn_area .wide_btn {background: #8556E3; padding: 16px 0;}
    }

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    #headerAreaMobile {display: none !important;}
    .header_inner {display: none;}
    #content {margin-top: 44px !important;}
    .borderbox {width: 100%; min-width: auto; border: none; border-radius: 0; padding: 0 0 106px; margin: 0 0 80px;}
    .borderbox .btn_back {top: -40px;}


    /* sns_login */
    .popup_bg {height: 100%; top: 0;}
    .popup_con {width: 80%; border-radius: 8px;}
    .popup_con .inner form .btn_area {flex-direction: column; gap: 12px;}
    .popup_con .inner form .btn_area .wide_btn {width: 100%;}
}