/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400; 500; 700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300; 400; 500; 600; 700&display=swap'); */
.loginwrap {
  padding-top: 0;
  width: 100%;
  max-width: 768px;
  height: 100%;
  margin: 0 auto;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login_bg {
  max-width: 768px;
  margin: 0 auto;
  height: 100%;
}
.login_bgbox {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-image: url(../img/bg.jpg);
  background-repeat: no-repeat;
}
.logo_img {
  width: 100%;
  text-align: center;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
.logo_img img {
  height: 80px;
}
.logo_img span {
  font-size: 40px;
  font-weight: 700;
  font-family: "Montserrat";
}
/* .title { background: -webkit-linear-gradient(#0dccfc, #074ed2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } */
.login_title {
  font-size: 3.8rem;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-align: center;
}
.login_stitle {
  font-size: 1.6rem;
  font-family: "Montserrat", sans-serif;
  color: #fff;
  text-align: center;
  padding: 40px 0;
}
.select_login button {
  height: 50px;
  border-radius: 10px;
  font-size: 1.6rem;
  font-weight: 700;
}
.not_id {
  font-size: 1.6rem;
  color: #171725;
  text-align: center;
  margin-top: 20px;
}
.go_signup {
  border: 1px solid var(--main);
  background: #fff;
  color: var(--main);
  font-size: 1.6rem;
  height: 50px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  cursor: pointer;
}
/* loading */
.loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 9999;
}
.loading_circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid var(--main);
  border-top-color: rgba(255, 255, 255, 0);
  border-bottom-color: rgba(255, 255, 255, 0);
  animation: loading 3s infinite;
}
.loading_text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 700;
  color: var(--sub);
}
@keyframes loading {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 구매 페이지 로딩 스타일 추가 */
.loading.daily-repurchase .loading_content {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.loading.daily-repurchase .loading_content .title {
  position: relative;
  width: 150px;
  height: 150px;
}

.loading.daily-repurchase .loading_desc {
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
  padding: 0 16px;
}

.loading.daily-repurchase .loading_desc .text-red {
  color: #dc3545;
}

/*회원가입*/
.recom_box {
  display: flex;
  align-items: flex-end;
}

.recom_box input {
  margin-right: 8px;
}
.recom_box button {
  background-color: var(--main);
  color: #fff;
  min-width: 60px;
  border-radius: 10px;
  height: 40px;
}
.recom_text {
  font-size: 1.6rem;
  font-weight: 500;
}
.recom_info {
  font-size: 1.4rem;
  color: #ff0000;
  font-weight: 700;
}
.regi_box {
  padding: 20px 20px 0;
}
.waring_txt {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ff0000;
}
.argree_box {
  height: 90px;
  border: 1px solid #ededed;
  font-size: 1.4rem;
  padding: 10px;
  font-weight: 500;
  overflow-y: auto;
}

/*로그인*/
.pass_info {
  font-size: 1.2rem;
  font-weight: 500;
  color: #5a607f;
  padding-top: 10px;
}

/*리스트 목록*/
.profile_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20px 0 10px;
}
.profile_name button {
  max-width: 130px;
  margin-top: 8px;
  padding: 0 10px;
}
.profile_img {
  width: 60px;
  height: 60px;
}
.profile_name {
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  width: 100%;
}
.my_list {
  width: 100%;
}
.my_item {
  width: 100%;
  height: 54px;
  padding: 0 20px;
  border-bottom: 1px solid #f2f2f2;
}
.my_item li:first-child {
  border-top: 1px solid #f2f2f2;
}
.my_link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
}
.my_link:after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url(../../assets/img/icon_more.png) no-repeat center;
}

/*구매 및 판매요약*/
.purtxt {
  font-size: 2.2rem;
  font-weight: 700;
  padding-top: 20px;
}
.buy_send {
  box-shadow: 0 3px 15px rgb(0 0 0 / 12%);
  border-radius: 10px;
}
.buy_send p {
  font-size: 1.6rem;
  font-weight: 500;
  background: #20505e;
  color: #fff;
  padding: 10px;
  border-radius: 10px 10px 0 0;
}
.buy_send table {
  font-size: 1.6rem;
  width: 100%;
  word-break: break-all;
}
.buy_send button {
  max-width: 120px;
}
.buy_send table th {
  width: 33%;
  border-right: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  padding: 10px;
}
.buy_send table td {
  text-align: center;
  border-right: 1px solid #ededed;
  padding: 10px;
}
.list_view {
  font-size: 1.6rem;
  font-weight: 500;
  border-top: 1px solid #ededed;
  padding: 10px;
}
.list_view a {
  color: #ff0000;
}

/*구매내역*/
.purchase_tab {
  display: flex;
  justify-content: space-between;
}

.purchase_tab li {
  width: 100%;
  text-align: center;
  background-color: #eef3ff;
  border-radius: 12px;
  padding: 8px;
  margin-left: 12px;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.purchase_tab li:first-child {
  margin-left: 0;
}
.purchase_tab .purchase_active {
  background-color: #121330;
  color: #fff;
}
.profit_txt {
  color: #ff0000;
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 10px;
}
.table_wrap {
  overflow-x: auto;
  font-size: 1.4rem;
  text-align: center;
  padding: 14px 0;
}
.table_wrap table th {
  border-bottom: 1px solid #ededed;
  padding: 10px;
  white-space: nowrap;
}
.table_wrap table td {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #ededed;
  white-space: nowrap;
  font-weight: 400;
}
/* .service_tab li { width:24%; } */

/* .schedule li { width:33% !important; } */

.service_chargetab {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.service_chargetab .profit_txt {
  font-size: 1.6rem;
}

/*공지사항*/
.no_data h3 {
  font-size: 1.8rem;
  text-align: center;
  padding: 30px 0;
}
.notice_item {
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
}
.notice_item a {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 20px 0;
}
.notice_title {
  display: flex;
  flex-direction: column;
  font-size: 1.6rem;
  font-weight: 500;
}
.notice_title span {
  word-break: break-all;
}
.notice_date {
  margin-left: 30px;
  font-size: 1.4rem;
  color: #b1b1b1;
  flex: none;
}
.article_box {
  width: 100%;
  font-weight: 500;
}
.article_title {
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid #f2f2f2;
  font-size: 1.6rem;
  word-break: break-all;
}
.article_date {
  margin-left: 30px;
  font-size: 1.4rem;
}
.article_content {
  width: 100%;
  padding: 30px 0;
  font-size: 1.4rem;
  word-break: break-all;
}

/*구매승인*/
.level_agree,
.level_agree02,
.level_agree03,
.level_agree04,
.saler_box,
.saler_box02,
.saler_box03 {
  width: 100%;
  border: 1px solid #ededed;
  margin-top: 12px;
}
.level_agree p,
.level_agree02 p,
.level_agree03 p,
.level_agree04 p {
  padding: 10px;
}
.level_agree p:nth-child(1) {
  background: var(--main);
  color: #fff;
  font-size: 1.6rem;
}
.level_agree02 p:nth-child(1) {
  background: #154d59;
  color: #fff;
  font-size: 1.6rem;
}
/* .level_agree03 p:nth-child(1) { background:linear-gradient(165deg, var(--main) 0%, var(--dark) 100%); color:#fff; font-size:1.6rem; } */
.level_agree03 p:nth-child(1) {
  background: #143346;
  color: #fff;
  font-size: 1.6rem;
}
.level_agree04 p:nth-child(1) {
  background: #fc454f;
  color: #fff;
  font-size: 1.6rem;
}
.level_agree p:nth-child(2) {
  color: #ff0000;
}
.level_agree p:nth-child(3),
.level_agree02 p:nth-child(3),
.level_agree03 p:nth-child(3),
.level_agree04 p:nth-child(3) {
  background: #121330;
  font-size: 2.2rem;
  text-align: center;
  color: #fff;
}
.level_agree p:nth-child(4),
.level_agree02 p:nth-child(4),
.level_agree03 p:nth-child(4),
.level_agree04 p:nth-child(4) {
  font-size: 1.4rem;
  font-weight: 500;
}
.level_agree.border_radius,
.level_agree02.border_radius,
.level_agree03.border_radius {
  border-radius: 10px;
  overflow: hidden;
}
.default_agree {
  color: #ff0000;
  text-align: left;
  font-size: 1.4rem;
}
.purstxt {
  font-size: 1.6rem;
  font-weight: 500;
  color: #074ed2;
}
.level_tab,
.saler_tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.level_tab li,
.saler_tab li {
  width: 100%;
  background-color: #eef3ff;
  border-radius: 12px;
  padding: 8px;
  font-size: 1.4rem;
  cursor: pointer;
  text-align: center;
  font-weight: 500;
  margin-right: 10px;
}
.level_tab li:last-child,
.saler_tab li:last-child {
  margin-right: 0;
}
.level_tab .level_active,
.saler_tab .saler_active {
  background-color: #121330;
  color: #fff;
}
.buy_view {
  font-size: 1.4rem;
  color: #074ed2;
  text-decoration: underline;
  cursor: pointer;
  width: max-content;
  padding: 10px 0;
}

.saler_box,
.saler_box02,
.saler_box03 {
  font-size: 1.6rem;
  font-weight: 500;
  padding: 10px;
}
.saler_box p,
.saler_box02 p,
.saler_box03 p {
  padding-bottom: 6px;
}

/*구매신청*/
.macting_services {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.macting_user {
  font-size: 1.6rem;
  font-weight: 500;
  color: #c68a12;
}
.amount_service_charge {
  font-size: 1.4rem;
  color: #ff0000;
  font-weight: 500;
}
.card_macting {
  background: #eef3ff;
  color: #212121;
  border-radius: 10px;
  padding: 10px 10px 10px 30px;
  font-size: 1.4rem;
  font-weight: 500;
}
.point_macting {
  background: #eef3ff;
  color: #212121;
  border-radius: 10px;
  padding: 10px;
  font-size: 1.4rem;
  font-weight: 500;
  margin-top: 6px;
}
.card_macting li {
  list-style: decimal;
  padding-bottom: 6px;
}
.card_macting p {
  padding-bottom: 6px;
}
.time_remaining {
  color: #b50308;
}
.saler_timer {
  display: flex;
  align-items: flex-end;
  font-size: 1.4rem;
}
.nameuser {
  font-size: 1.6rem;
  font-weight: 700;
  color: #596475;
}
.nametitle {
  margin-top: 6px;
  font-size: 1.6rem;
  color: #596475;
}
.pay_buy_form li {
  border-bottom: 1px solid #ededed;
  padding-bottom: 10px;
  margin-bottom: 5px;
}
.pay_buy_form li:last-child {
  border-bottom: none;
}
.saler_buywrap {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 500;
  margin-top: 10px;
}
.pop_number {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.namebutton button {
  padding: 0 10px;
}
.saler_timer p:nth-child(2) {
  font-size: 1.4rem;
  margin-left: 6px;
}
.jump {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
}
.jump span:nth-child(1) {
  border-radius: 50%;
  display: inline-block;
  background: #ff0000;
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin-right: 4px;
}
.fin_chk {
  font-size: 1.6rem;
}
.oneday {
  font-size: 1.6rem;
  color: #ff0000;
  font-weight: 500;
}
.onedaybox {
  font-size: 1.6rem;
  color: #212121;
  font-weight: 400;
  margin-top: 10px;
}
.more_num {
  color: #ff0000;
}
.total_num {
  color: #074ed2;
  font-weight: 700;
}
.saler_flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.level_agreeready li {
  padding: 10px;
  box-shadow: 0 3px 15px rgb(0 0 0 / 12%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.6rem;
  border-radius: 10px;
  font-weight: 500;
  text-align: center;
}
.level_agreeready li div {
  width: 49%;
}
.level_agreeready li div:nth-child(2) {
  text-align: center;
  border-left: 1px solid #ededed;
}
.level_agreeready li div button {
  background: #20505e;
  max-width: 100px;
}
.minus_payment {
  color: #ff0000;
  font-size: 2.2rem;
  font-weight: 500;
}
.pay_buy_form .none_mp {
  padding-bottom: 8px;
  margin-bottom: 0;
}

.spurtxt {
  font-size: 1.6rem;
  font-weight: 500;
}
.buy_bank {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid #01ddac;
}
.buy_bank p {
  font-size: 1.4rem;
}
.buy_bank > div > p:first-child {
  font-weight: 700;
}

/*회원문의*/
.qna_tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
}
.tab_item.selected {
  border-color: var(--main);
}
.tab_item {
  width: 100%;
  height: 62px;
  border-bottom: 2px solid #f2f2f2;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
}
.tab_item a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #b1b1b1;
}
.tab_item.selected a {
  color: var(--main);
  font-weight: 700;
}
.qna_title {
  width: 100%;
  font-size: 1.6rem;
  font-weight: 500;
  word-break: break-all;
}
.qna_list {
  width: 100%;
  padding: 20px;
}
.qna_date {
  margin-top: 6px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 1.4rem;
  font-weight: 500;
  color: #b1b1b1;
}
.qna_content {
  margin-top: 30px;
  width: 100%;
  font-size: 1.4rem;
  font-weight: 500;
  word-break: break-all;
}
.qna_btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.qna_btn div {
  width: 49%;
}
.qna_btn div:nth-child(1) button {
  background: #20505e;
}

/*2220913 SJW */
.label_txt {
  font-size: 1.5rem;
  font-weight: 500;
}
.point_macting p {
  padding-bottom: 10px;
  font-size: 1.5rem;
}
.sales_tab li {
  width: 19%;
}
.servicech_tab li {
  width: 49%;
}
.change_pwd {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
}
.change_pwd p:nth-child(1) {
  flex: none;
}
.change_pwd button {
  width: 60px;
  margin-left: 10px;
  height: 34px;
}
.view_agree {
  display: flex;
  justify-content: space-between;
}
.view_agree div {
  width: 49%;
}
.view_agree div:nth-child(2) button {
  background-color: #fc454f;
}

/*220919 SJW */
/*220921 SJW */
.verfi_title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-top: 50px;
  text-align: center;
}
.verfi_stitle {
  font-size: 1.6rem;
  margin: 30px 0;
  text-align: center;
}
.purstotal {
  font-size: 1.8rem;
  font-weight: 700;
  padding-top: 10px;
  text-align: right;
}
.purstotal span {
  color: #fc454f;
  font-family: "montserrat";
  font-weight: 700;
}

/*221012 SJW*/
.withdraw_tab {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.withdraw_tab li {
  width: 100%;
  text-align: center;
  background-color: #eef3ff;
  border-radius: 12px;
  padding: 8px;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.withdraw_tab .withdraw_active {
  background: var(--main_sub);
  color: #fff;
}

/*230329 신규 클래스 작업*/
/* .buy_view_j { font-size:1.4rem; color:#074ed2; text-decoration: underline; cursor:pointer; width:max-content; } */
.buy_view_j {
  font-size: 1.4rem;
  color: #fff; /* text-decoration: dashed; */
  cursor: pointer;
  width: max-content;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--main_sub);
}
.buysell_list {
  border: 1px solid #ededed;
  margin-bottom: 20px;
  border-radius: 6px;
}
.buysell_list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f3f5;
  font-size: 1.6rem;
  word-break: break-all;
  padding: 10px 20px;
  min-height: 53px;
}
.btn_j {
  width: 100%;
  height: 32px;
  border-radius: 6px;
  font-size: 1.6rem;
  color: #fff;
  font-weight: 500;
  padding: 2px 14px;
}
/* .buysell_list li:first-child { padding-top:0; } */
.buysell_list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.level_j {
  background: #121330;
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
  padding: 6px 14px;
  border-radius: 10px;
}
.level_01 {
  background: var(--main);
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
  padding: 6px 14px;
  border-radius: 10px;
}
.level_02 {
  background: #154d59;
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
  padding: 6px 14px;
  border-radius: 10px;
}
.level_03 {
  background: #143346;
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
  padding: 6px 14px;
  border-radius: 10px;
}
.buysell_txtj {
  font-size: 2.1rem;
  font-weight: 700;
}
.line_j {
  border: 1px solid #ededed;
  margin: 16px 0;
}

.p_20 {
  padding: 20px;
}
.m_B20 {
  margin-bottom: 20px;
}

.margin_B10 {
  margin-bottom: 10px;
}

/*230330 신규 클래스 작업 신정운*/
.temporary_txt {
  font-family: "montserrat";
  font-weight: 700;
  font-size: 3.8rem;
  text-align: center;
}

.wrap_pj {
  padding: 80px 20px;
}

/*tree*/
.seearch_img {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}
.search_inputbox {
  position: relative;
}
.container_tree {
  position: relative;
  overflow: auto;
}
.tree1 ul {
  padding-top: 15px;
  position: relative;
  display: flex;
}
.tree1 li {
  text-align: center;
  position: relative;
  padding: 18px 5px 0 5px;
}
.tree_wrap {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 10px;
  overflow: auto;
}
.user_infom {
  word-break: break-all;
  border: 2px solid #c3c3c3;
  display: inline-block;
  width: 120px;
  border-radius: 6px;
}
.tree_idbox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px 4px 0 0;
  color: #fff;
  background-color: #c3c3c3;
  min-height: 30px;
  font-weight: 600;
  height: auto;
  font-size: 12px;
}
.set1 {
  width: 100%;
  height: 1px;
  margin: 0 auto;
}
.tree_imgbox img {
  width: 30px;
  margin: 0 auto;
  display: block;
}
.tree_imgbox,
.tree_datebox {
  padding: 4px 0;
  font-size: 12px;
  font-weight: 400;
}
.tree_namebox {
  font-size: 12px;
  font-weight: 600;
  padding-top: 4px;
  word-break: break-all;
}
.tree_search {
  padding: 0 20px;
}
.tree_imgbox {
  border-bottom: 1px solid #ddd;
}
.container_tree {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.container_tree::-webkit-scrollbar {
  display: none;
}
/*li 단독속성 (ul의 지정요소가 그 부모의 유일한 자식요소인 경우) */
.tree1 li:only-child {
  padding-top: 0;
  margin: auto;
}
/* after, before 이벤트 */
.tree1 li::before,
.tree1 li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 2px solid #c3c3c3;
  width: 50%;
  height: 18px;
}
.tree1 li::after {
  right: auto;
  left: 50%;
  border-left: 2px solid #c3c3c3;
}
.tree1 li:only-child::after,
.tree1 li:only-child::before {
  display: none;
}
.tree1 li:first-child::before,
.tree1 li:last-child::after {
  border: none;
}
.tree1 li:last-child::before {
  border-right: 2px solid #c3c3c3;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}
.tree1 li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}
.tree1 ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid #c3c3c3;
  width: 0;
  height: 15px;
}

/* hover 이벤트 */
.tree1 li a:hover + ul li::after,
.tree1 li a:hover + ul li::before,
.tree1 li a:hover + ul::before,
.tree1 li a:hover + ul ul::before {
  border-color: var(--main);
}
.tree1 li a div:hover,
.tree1 li a:hover + ul li a div {
  border: 2px solid var(--main);
  cursor: pointer;
}
.tree1 li a div:hover > p:nth-child(1) {
  background: var(--main);
}
.tree1 li a:hover + ul li a div p:nth-child(1) {
  background: var(--main);
}
.input_box {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
}
.se_bu {
  white-space: nowrap;
}
.button_boxi {
  position: fixed;
  right: 30%;
  bottom: 2%;
  z-index: 100;
}
.button_boxi_admin {
  position: fixed;
  right: 20%;
  bottom: 2%;
  z-index: 100;
}
.max_unset {
  max-width: unset;
}

/* Before , After */
.topbox::before {
  visibility: hidden;
}

.tree li::before {
  content: "";
  display: block;
  background-color: #000;
  width: calc(50% + 10px);
  height: 1px;
  position: absolute;
  left: 50%;
  top: -27px;
}
.tree li::after {
  content: "";
  display: block;
  background-color: #000;
  width: calc(50% + 10px);
  height: 1px;
  position: absolute;
  right: 50%;
  top: -27px;
}

.tree li:first-of-type:after {
  display: none;
}
.tree li:last-of-type:before {
  display: none;
}

/* box >> Before , After */
.tree .box::before,
.box::after {
  pointer-events: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 1px;
  height: 27px;
  background-color: #000;
  display: block;
}
.tree .box::before {
  top: -27px;
}
.tree .box::after {
  top: 100%;
}

.tree .box:only-child::after {
  display: none;
}

.tree li:only-of-type .box:before {
  height: 28px;
  top: -28px;
}

/* Hover */
.tree .box:hover,
.tree .box:hover + ul li .box,
.tree .topbox:hover ul {
  border-color: orangered;
}

.tree .box:hover:after,
.tree .box:hover + ul li:before,
.tree .box:hover + ul li:after,
.tree .box:hover + ul li .box:after,
.tree .box:hover + ul li .box:before {
  background-color: orangered;
}

/* gift_beans & tq_send 추가 : 2023.04.04 NBR */
.gift_id_check {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.gift_id_check label {
  width: 100%;
}
.gift_id_check button {
  flex: none;
  height: 40px;
  padding: 6px 14px;
  background: #01ddac;
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
  border-radius: 6px;
}

/* Send 230412 KMS */
.send_select_box select {
  color: #000;
  width: 100%;
  height: 100%;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}
.content .label {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
/* .content>div:last-of-type ul {margin: 0;} */
/* send_card_list */
.send_card_list {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  font-size: 14px;
  border-radius: 6px;
}
.send_card_list .title {
  flex: none;
  font-weight: 700;
  color: var(--gray);
  word-break: break-all;
}
.send_card_list .desc {
  font-size: 14px;
  font-weight: 700;
  word-break: break-all;
}
.send_card_list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #ddd;
}
.send_card_list li:last-child {
  margin-bottom: 0;
  border: none;
  padding: 0;
}
/* send button 영역 */
.send_button button {
  height: 52px;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 16px;
  background: var(--main);
  color: #fff;
  width: 100%;
  font-weight: 700;
}
.send_button button.can {
  background: #eee;
  color: #000;
}
/* send input */
.send_input_p {
  position: relative;
} /* send input (input 내 btn 있는 경우) */
.send_input_box .send_input_p input {
  padding: 8px 40px 8px 16px;
}
.send_input input {
  width: 100%;
  height: 100%;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}
.send_input img {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
} /* */
.send_input input:read-only {
  background: #ededed;
  border: none;
  cursor: inherit;
}
.send_text_box .label {
  border-bottom: 1px solid var(--border);
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.keypad a {
  display: block;
  width: 100%;
  height: 78px;
  background-color: #fff;
  border-radius: unset;
  padding: 0;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
}

.pin_box span {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background-color: #eee;
  margin-right: 6px;
  position: relative;
  overflow: hidden;
}
.pin_box .active:before {
  content: "*";
  text-align: center;
  line-height: 46px;
  font-size: 20px;
  color: #fff;
  background-color: var(--main);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* 230412 KMS Send coin_list */
.coin_list {
  overflow: hidden;
} /*230704 SJW 코인목록 클릭시 숨김처리를 위한 CSS 추가작업*/
.coin_list li {
  position: relative;
  margin-bottom: 14px;
}
.coin_list_no_data {
  height: 68px;
  text-align: center;
  border: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 1px 1px 2px rgb(226 226 226 / 30%);
}

/* 코인 리스트 커버 */
.coin_list_info {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 1px 1px 2px rgb(226 226 226 / 30%);
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  background-color: #fff;
  transition: transform 0.3s;
}
.coin_list_info.active {
  transform: translateX(-240px);
}
.coin_list_info .img {
  flex: none;
  width: 46px;
  height: 46px;
  margin-right: 10px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 코인 리스트 내용 */
.coin_list_info .text_area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.coin_list_info .text_area .name {
  font-size: 16px;
  font-weight: 700;
}
.coin_list_info .text_area .amount {
  font-size: 16px;
  font-weight: 700;
}
.coin_list_info .text_area .price {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray);
  text-align: right;
}
/* 코인 리스트 하위버튼 */
.coin_list_button_box {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
button[type="button"].coin_list_button {
  width: 70px;
  height: 60px;
  background-color: var(--main);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  margin-right: 10px;
}
.coin_list_button_box button:last-child {
  margin-right: 0;
}

/* 230413 KMS NFT nft_list, nft_details */
.inventory_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  padding: 20px;
  background: #fff;
}
.inventory_list li {
  max-width: 356.5px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 4px rgba(21, 34, 50, 0.08);
  display: flex;
  flex-direction: column;
  outline: 1px solid #ddd;
  background: #fff;
}
/* width: calc(50vw - 27.5px); */
.booster_img {
  position: relative;
  width: 100%;
  height: calc(50vw - 27.5px);
  max-height: 356.5px;
  object-fit: contain;
}
.booster_img img,
.booster_img video {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}
.auto_btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 50;
}
.booster_txt {
  font-size: 16px;
  padding: 14px;
  border-top: 1px solid #ddd;
}
.nft_infotxt {
  font-size: 16px;
  color: #212121;
  word-break: break-all;
  font-weight: 700;
}
.nft_infonumber {
  font-size: 16px;
  margin-top: 5px;
  word-break: break-all;
}
.nft_infodate {
  margin-top: 4px;
  align-items: center;
  -webkit-align-items: center;
  min-height: 20px;
  font-size: 11px;
  color: #5a607f;
}
.nft_infodate img {
  display: block;
  margin-right: 6px;
}
.nft_infodate p:nth-child(2) {
  font-size: 16px;
  word-break: break-all;
}
.total_nftrepuer {
  font-size: 18px;
  font-weight: 700;
  color: var(--main);
  padding-top: 4px;
  display: block;
}

.not_listnft {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
.not_listnft button {
  text-align: center;
  margin: 10px auto 0;
}

/* .nft_createbtn { animation: gradient 6s ease infinite; }
.nft_createbtn:disabled { background: #E6E6EA; color: #5A607F; cursor:inherit; }  */
button.edit,
.nft_createbtn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  background: var(--main);
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
  color: var(--white);
}
button.btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
}

/* @keyframes gradient {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
 }*/

/* nft_details */
.repurchase_img_video {
  width: 100%;
  max-width: 450px;
  max-height: 450px;
  margin: 0 auto 20px;
  background-color: #eee;
}
.repurchase_img_video video,
.repurchase_img_video img {
  width: 100%;
  height: 100%;
  max-width: 450px;
  max-height: 450px;
  display: block;
  object-fit: cover;
}
.repuer_card {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #f1f3f5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* .repurchase_img_video {position: relative;  width: 450px;height: 450px; margin:0 auto 20px; background-color:#eee; }  */
/* .repurchase_img_video video, .repurchase_img_video img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; display: block; }  */
/* 체크박스 */
.checkbox_mockup {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #7e7e7e;
  cursor: pointer;
}
.checkbox_mockup.active {
  background: url(../img/svg/icon_checked.svg) center;
  border: 1px solid transparent;
}
.agreement_checkbox {
  position: relative;
  border-radius: 8px;
  margin: 0 auto;
  padding: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  word-break: break-all;
}
.chk_line {
  text-decoration: underline;
  font-weight: 700;
  padding-left: 10px;
  cursor: pointer;
}
.repurchase_checkbox {
  display: none;
}
/* 팝업 */
.popup_bg,
.nftpopup_bg {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 9999;
}
.popup_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  border-radius: 10px;
  background-color: #fff;
  overflow: hidden;
}
.popup_box.repurchase .popup_text {
  height: 300px;
  overflow: auto;
  display: block;
  overscroll-behavior: none;
  padding: 20px;
}
.popup_title {
  width: 100%;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 700;
  word-break: break-all;
}
.repurchase .popup_title {
  border-bottom: 1px solid #ededed;
  padding-bottom: 10px;
}
.popup_desc {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  word-break: break-all;
}
.repurchase button {
  border-radius: 0;
}
.popup_box.repurchase .popup_desc {
  text-align: left;
}

.popup_box.repurchase .popup_text::-webkit-scrollbar {
  display: none;
}

/*230420 신정운 메인페이지 수정작업*/
.tqlistbtn button {
  width: 100px;
}
.taraapp_bg {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
}

.cms_bankinfo {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #f1f3f5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  font-size: 16px;
  margin-bottom: 20px;
}
.cms_bankinfo li {
  padding: 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f1f3f5;
  font-weight: 500;
}
.cms_bankinfo li p:nth-child(1) {
  width: 70px;
}

.myshop_point {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 18px;
  font-weight: 700;
}
.myshop_point span:nth-child(2) {
  color: var(--main_sub);
}
.myshop_point_wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.shopping_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.shopping_list li a {
  display: block;
}
.shopping_list li a .img {
  width: 100%;
  height: 0;
  padding-top: 100%;
  margin-bottom: 10px;
  background-color: #eee;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.shopping_list li a .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  position: absolute;
  left: 0;
  top: 0;
}
.shopping_list li a .title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  word-break: break-all;
}
.shopping_list li a .price {
  font-size: 16px;
  font-weight: 700;
}
.shopping_list li a .price .discount {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray);
  text-decoration: line-through;
}
/* shopping_view */
.shopping_product_img {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  position: relative;
}
.shopping_product_img img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: contain;
  object-position: center;
}
.shopping_product_info .title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  word-break: break-all;
}
.shopping_product_info .price {
  font-size: 18px;
  font-weight: 700;
}
.shopping_product_info .price .discount {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray);
  text-decoration: line-through;
  margin-left: 6px;
}
.shopping_product_order .amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.shopping_product_order .amount .text {
  font-size: 14px;
  font-weight: 500;
}
.shopping_product_order .amount .button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.shopping_product_order .total_price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shopping_product_order .total_price .text {
  font-size: 14px;
  font-weight: 500;
}
.shopping_product_order .total_price .price {
  font-size: 18px;
  font-weight: 700;
}
.shopping_product_explain p {
  margin: 20px 0;
  font-size: 14px;
  font-weight: 500;
}
.shopping_product_explain p img {
  width: 100%;
  border: 1px solid #efefef;
}
.button_safe_area {
  width: 100%;
  height: 82px;
}
.bottom_button_box {
  width: 100%;
  max-width: 768px;
  padding: 0 20px 30px 20px;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.bottom_button_box button {
  display: block;
}
input.shopping_amount {
  width: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}
.minus_btn,
.plus_btn {
  width: 28px;
  height: 28px;
  font-size: 18px;
  border-radius: 50%;
  padding: 0;
  background: #eee;
}
.plus_active {
  background-color: var(--main);
  color: var(--white);
}
.text_list {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #babdbf;
}
.text_list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e1e1e1;
  padding: 10px 20px;
}
.text_list li:last-child {
  border-bottom: none;
}
.text_list .title {
  flex: none;
  font-size: 14px;
  font-weight: 500;
}
.text_list .desc {
  font-size: 14px;
  font-weight: 700;
  word-break: break-all;
  text-align: right;
}
.shopping_history_data {
  width: 100%;
  display: flex;
  align-items: center;
}
.shopping_history_data a {
  display: block;
  width: 100%;
  height: 100%;
}
.shopping_history_data a .state {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
.shopping_history_data a .info {
  display: flex;
  justify-content: center;
  align-items: center;
}
.shopping_history_data a .info .img {
  flex: none;
  width: 94px;
  height: 94px;
  margin-right: 20px;
}
.shopping_history_data a .info .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.shopping_history_data a .info .text {
  width: 100%;
}
.shopping_history_data a .info .text .title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  word-break: break-all;
}
.shopping_history_data a .info .text .option {
  font-size: 14px;
  font-weight: 500;
  color: #b1b1b1;
  margin-bottom: 10px;
}
.shopping_history_data a .info .text .price {
  font-size: 18px;
  font-weight: 700;
}
.shopping_history_data a .info .text .price .discount {
  font-size: 12px;
  font-weight: 500;
  color: #b1b1b1;
  text-decoration: line-through;
  margin-left: 4px;
}

.shopping_history_data .state {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
.shopping_history_data .info {
  display: flex;
  justify-content: center;
  align-items: center;
}
.shopping_history_data .info .img {
  flex: none;
  width: 94px;
  height: 94px;
  margin-right: 20px;
}
.shopping_history_data .info .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.shopping_history_data .info .text {
  width: 100%;
}
.shopping_history_data .info .text .title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  word-break: break-all;
}
.shopping_history_data .info .text .option {
  font-size: 14px;
  font-weight: 500;
  color: #b1b1b1;
  margin-bottom: 10px;
}
.shopping_history_data .info .text .price {
  font-size: 18px;
  font-weight: 700;
}
.shopping_history_data .info .text .price .discount {
  font-size: 12px;
  font-weight: 500;
  color: #b1b1b1;
  text-decoration: line-through;
  margin-left: 4px;
}
.addr_box_flex {
  display: flex;
  align-items: center;
  gap: 10px;
}
.addr_box_flex input {
  margin-top: 0;
}
.label_title {
  font-size: 1.5rem;
  font-weight: 500;
}
.mb_6 {
  margin-bottom: 6px;
}
.not_cursor {
  cursor: inherit;
}
.addr_box_flex button {
  background: var(--main);
  outline: none;
  border: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  height: 40px;
  padding: 0 16px;
  flex: none;
  color: #fff;
}
.same_flex {
  display: flex;
  align-items: center;
  font-size: 14px;
  gap: 2px;
}
.same_flex input {
  top: 0;
}

.payment_method {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.payment {
  border: 1px solid var(--border);
  background-color: #fff;
  color: #555;
  padding: 10px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
}
.payment.active {
  border: 1px solid var(--main);
  background-color: var(--main);
  color: #fff;
}
.button_box {
  display: flex;
  align-items: center;
  gap: 20px;
}
.button_box button:nth-child(1) {
  background: #7d7a7a;
}
.border-bottom {
  border-bottom: 1px solid #efefef;
}
.admin_deposit {
  font-size: 18px;
  font-weight: 700;
}
.admin_bank_info {
  border: 2px solid var(--main);
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
}
.admin_bank_info li span:nth-child(1) {
  display: inline-block;
  width: 90px;
}
.admin_bank_info li:last-child {
  margin-bottom: 0;
}
.admin_bank_info li {
  margin-bottom: 6px;
}
.admin_bank_info li span {
  font-size: 16px;
  font-weight: 700;
}
.bank_warning {
  font-size: 16px;
  font-weight: 400;
  margin-top: 10px;
}
.bank_warning li {
  margin-bottom: 10px;
}
.tree_staking {
  font-weight: 700;
  color: var(--main_sub);
  font-size: 13px;
}

/* 240920 리브 nft-list 스테이킹 btn */
.staking_btn {
  padding: 6px 10px;
  background: var(--main);
  border-radius: 4px;
  color: #fff;
}
.renew_btn {
  padding: 6px 10px;
  background: var(--main_sub);
  border-radius: 4px;
  color: #fff;
}
.goldbar_wrap {
  margin-bottom: 20px;
}
.goldbar_wrap_pc {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0px 2px 10px 0px #0000001a;
  background-image: url("../img/new_img/png/liiv_icon.png"),
    url("../img/new_img/jpg/list.jpg");
  background-repeat: no-repeat;
  background-size: 244px, cover;
  background-position: -48px 120px, center;
}

.goldbar_wrap_details {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0px 2px 10px 0px #0000001a;
  background-image: url("../img/new_img/png/liiv_icon.png"),
    url("../img/new_img/jpg/details.jpg");
  background-repeat: no-repeat;
  background-size: 283px, cover;
  background-position: -54px 490px, center;
}

.goldbar_wrap_details::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  padding: 1px; /* 테두리 두께 */
  background: linear-gradient(
    136.52deg,
    #e5e1f6 0%,
    #c3b6f3 41.5%,
    #bcdef4 78.5%,
    #c3b6f3 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

.goldbar_wrap_pc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  padding: 1px; /* 테두리 두께 */
  background: linear-gradient(
    136.52deg,
    #e5e1f6 0%,
    #c3b6f3 41.5%,
    #bcdef4 78.5%,
    #c3b6f3 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

.top_title_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top_title_flex span {
  color: #222;
  font-size: 20px;
  font-weight: 700;
}
.top_title_flex02 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.goldbar_date span:nth-child(1) {
  font-size: 14px;
  font-weight: 400;
}
.goldbar_date span:nth-child(2) {
  font-size: 13px;
  font-weight: 400;
}
.number_goldbar {
  background: var(--white);
  border-radius: 11px;
  padding: 2px 8px;
  color: #7a5af8;
  font-size: 13px;
  font-weight: 500;
}
.goldbar_line {
  width: 100%;
  border-top: 1px solid #e2e2e2;
  margin: 12px 0;
}
.info_goldbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.info_goldbar:last-child {
  margin-bottom: 0;
}
.info_goldbar span:nth-child(1) {
  color: #717171;
  font-weight: 500;
  font-size: 14px;
  flex: none;
}
.info_goldbar span:nth-child(2) {
  font-size: 14px;
  font-weight: 400;
  color: #222;
  width: 100%;
  display: inline-block;
  text-align: right;
}

.goldbar_detilas_info {
  background: #7a5af8;
  border-radius: 16px;
  padding: 12px 20px;
  margin-bottom: 8px;
}
.goldbar_detilas_info span {
  font-size: 14px;
  font-weight: 400;
  color: var(--white);
}
.details_title {
  font-size: 13px;
  font-weight: 500;
  color: #7a5af8;
  display: inline-block;
  margin-bottom: 8px;
}
.contents_of_receipt {
  background: #f8f8f8;
  margin-bottom: 20px;
}
.contents_of_receipt_wrap {
  padding: 20px 40px 36px;
}
.contents_of_receipt_wrap p {
  color: #717171;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.contents_of_receipt_wrap li {
  color: #717171;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 20px;
}
.contents_of_receipt_wrap li:last-child {
  margin-bottom: 0;
}

.nodata_gold {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 140px);
  font-size: 16px;
  font-weight: 500;
}
.info_goldbar_state {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.info_goldbar_state {
  font-size: 14px;
  font-weight: 500;
}
.ready_gold {
  color: #01ddac;
}
.comp_gold {
  color: var(--main_sub);
}
.unpaid {
  background-color: var(--main_sub);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  padding: 10px 12px;
}
.unpaid_total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 18px;
  font-weight: 700;
}
.unpaid_total span:nth-child(2) {
  color: var(--main_sub);
}
.unpaid_btnbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 0;
}
.table_allownace {
  padding-top: 0;
}

/* 기부 내역 */
.user_date_box {
  display: flex;
  align-items: center;
}

.user_date_box input {
  padding: 10px 16px;
  width: 100%;
  font-weight: 900;
  border-radius: 10px;
  font-family: "NotoSansKR";
  border: 1px solid #e6ebf1;
  font-size: 14px;
}

.user_date_box span {
  display: block;
  height: 44px;
  line-height: 44px;
  margin: 0 10px;
}

.donate_total {
  padding-top: 20px;
  padding-right: 20px;
  font-size: 25px;
  font-weight: 900;
  display: flex;
  justify-content: end;
  gap: 8px;
}

.user_date_box .date_box_button {
  width: 24px;
  height: 24px;
  margin-left: 16px;
  cursor: pointer;
}

/* pay 페이지 */
.mainwrap.pay {
  background-color: var(--bg);
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  height: 100%;
  min-height: 100dvh;
  position: relative;
}

.pay__header {
  padding: 12px 0 12px 20px;
}

.pay__header .logo {
  background: url("/assets/img/svg/logo_text.svg") no-repeat center center /
    cover;
  width: 144px;
  height: 30px;
}

/* 공지사항 */
.pay-notice {
  padding: 8px 20px 0 20px;
}

.pay-notice .notice-slide {
  background-color: white;
  border-radius: 8px;
  height: 48px;
  position: relative;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
}

.pay-notice .notice-slide .swiper-slide {
  padding-left: 44px;
  font-size: 14px;
  font-weight: 500;
  line-height: 48px;
}

.pay-notice .notice-slide .swiper-slide a {
  font-family: "Pretendard" !important;
  width: 100%;
  display: inline-block;
}

.pay-notice .notice-slide .swiper-pagination {
  position: absolute;
  width: 60px;
  right: 0;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  background-color: white;
}

.pay-notice .notice-slide .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
  width: 40px;
  height: 20px;
  z-index: 10;
  padding-left: 16px;
  background-color: white;
}

.pay-notice .notice-slide .icon .img {
  background: url(/assets/img/svg/icon--sound.svg) no-repeat;
  width: 20px;
  height: 20px;
}

/* 카드 슬라이드 */
.point-card-wrap {
  margin-top: 24px;
  padding-left: 20px;
  height: 220px;
  position: relative;
}

.point-card-wrap.once {
  padding: 0 20px;
  height: 200px;
}

.point-card-wrap .swiper-slide {
  height: 200px;
  padding: 28px 16px 18px 16px;
  border-radius: 12px;
  position: relative;
}

.point-card-wrap .swiper-slide.blue {
  background: linear-gradient(135deg, #366ec8, #6ea4fd, #366ec8);
}

.point-card-wrap .swiper-slide.green {
  background: linear-gradient(135deg, #318a75, #67d7a6, #318a75);
}

.point-card-wrap .swiper-slide.orange {
  background: linear-gradient(135deg, #ed8932, #ffc593, #ed8932);
}

.point-card-wrap .point-wrap {
  display: flex;
  gap: 4px;
  align-items: center;
}

.point-wrap p {
  color: white;
  font-weight: 500;
  font-size: 16px;
  font-family: "Pretendard" !important;
}

.point-card-wrap .point {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("/assets/img/svg/icon--point.svg") no-repeat center center /
    cover;
}

.point-card-wrap .coin {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("/assets/img/svg/icon--coin.svg") no-repeat center center /
    cover;
}

.point-card-wrap .card-info {
  padding: 0 8px 12px 8px;
  border-bottom: 1px solid rgba(250, 250, 250, 0.4);
}

.point-card-wrap .card-info .num {
  font-size: 32px;
  font-weight: 700;
  margin-top: 8px;
  color: white;
  font-family: "Pretendard" !important;
}

.card-info .num span {
  font-size: 14px;
  font-weight: 500;
  font-family: "Pretendard" !important;
}

.point-card-wrap .card-info .txt {
  font-size: 14px;
  font-weight: 500;
  color: white;
  margin-top: 29px;
  font-family: "Pretendard" !important;
}

.point-card-wrap .card-btns {
  margin-top: 12px;
  display: flex;
}

.point-card-wrap .card-btns .card-btn {
  color: white;
  font-size: 14px;
  font-weight: 500;
  width: 50%;
  text-align: center;
  font-family: "Pretendard" !important;
}

.point-card-wrap .card-bg {
  position: absolute;
  top: 0;
  right: 0;
}

.point-card-wrap .swiper-pagination {
  position: absolute;
  bottom: 0;
}

.pay-menu__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 40px 20px 0 20px;
  gap: 24px;
}

.pay-menu__item {
  border-radius: 12px;
  background-color: white;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  height: 100px;
  position: relative;
}

.pay-menu__item a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.pay-menu__item .title {
  color: #222;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  font-family: "Pretendard";
}

.pay-menu__item .sub {
  color: #adadad;
  font-size: 14px;
  font-weight: 500;
  font-family: "Pretendard";
}

.pay-menu__item .item__bg {
  width: 64px;
  height: 64px;
}

.pay-menu__item .item__bg.item01 {
  background: url("/assets/img/svg/icon--coin.svg") no-repeat center center /
    cover;
}
.pay-menu__item .item__bg.item02 {
  background: url("/assets/img/svg/icon--send.svg") no-repeat center center /
    cover;
}
.pay-menu__item .item__bg.item03 {
  background: url("/assets/img/svg/icon--deposit.svg") no-repeat center center /
    cover;
}
.pay-menu__item .item__bg.item04 {
  background: url("/assets/img/svg/icon--withdrawal.svg") no-repeat center
    center / cover;
}
.pay-menu__item .item__bg.item05 {
  background: url("/assets/img/svg/icon--history.svg") no-repeat center center /
    cover;
}
.pay-menu__item .item__bg.item06 {
  background: url("/assets/img/svg/icon--sort.svg") no-repeat center center /
    cover;
}

/* footer */

.pay-footer {
  background-color: white;
  max-width: 768px;
  margin: 0 auto;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.1);
}

.pay-footer__nav {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 10px 60px;
}

.pay-footer__nav > div {
  width: 25%;
}

.pay-footer .item a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pay-footer .item .icon {
  width: 24px;
  height: 24px;
}

.pay-footer .item.home .icon {
  background: url("/assets/img/svg/icon--home.svg") no-repeat center center /
    cover;
}

.pay-footer .item.shopping .icon {
  background: url("/assets/img/svg/icon--shopping.svg") no-repeat center center /
    cover;
}
.pay-footer .item.list .icon {
  background: url("/assets/img/svg/icon--list.svg") no-repeat center center /
    cover;
}
.pay-footer .item.menu .icon {
  background: url("/assets/img/svg/icon--menu.svg") no-repeat center center /
    cover;
}

.pay-footer .item .name {
  margin-top: 6px;
  font-size: 14px;
  font-family: "Pretendard";
}

/* footer active */
.pay-footer .item.active .name {
  color: #5691f0;
  font-weight: 600;
}

.pay-footer .item.active.home .icon {
  background-image: url("/assets/img/svg/icon--home-active.svg");
}
.pay-footer .item.active.shopping .icon {
  background-image: url("/assets/img/svg/icon--shopping-active.svg");
}
.pay-footer .item.active.list .icon {
  background-image: url("/assets/img/svg/icon--list-active.svg");
}
.pay-footer .item.active.menu .icon {
  background-image: url("/assets/img/svg/icon--menu-active.svg");
}

/* 반응형 */
@media screen and (max-width: 767px) {
  .purchase_tab li {
    height: 56px;
    word-break: keep-all;
  }
  .pop_cont {
    width: 90%;
  }
  .mylist p {
    font-size: 1.4rem;
    word-break: keep-all;
  }
  .level_agree {
    width: 100%;
  }
  .verfi_stitle {
    word-break: keep-all;
  }
  .goldbar_wrap_pc {
    background-position: -48px 130px, center;
  }
  .contents_of_receipt_wrap {
    padding: 20px 20px 36px;
  }
  .info_goldbar span:nth-child(2) {
    max-width: 218px;
  }

  .pay__header .logo {
    width: 115px;
  }

  .pay-footer__nav {
    padding: 10px 16px;
  }

  .pay-footer .item .name {
    font-size: 11px;
  }

  .point-card-wrap {
    margin-top: 16px;
  }

  .pay-menu__list {
    gap: 12px;
  }

  .pay-menu__item {
    padding: 16px;
  }

  .pay-menu__item .title {
    font-size: 14px;
    margin-bottom: 2px;
  }

  .pay-menu__item .sub {
    font-size: 10px;
  }

  .pay-menu__item a {
    width: 100%;
    height: 100%;
    display: inline-block;
  }

  .pay-menu__item .item__bg {
    width: 48px;
    height: 48px;
    position: absolute;
    bottom: 8px;
    right: 12px;
  }
}

@media screen and (max-width: 500px) {
  /* .buysell_list li { flex-wrap:wrap; } */
  /* .buysell_list li p:nth-child(1) { width:100%; margin-bottom:6px; } */
  .send_card_list li {
    flex-direction: column;
    align-items: flex-start;
  }
  .coin_list_info .text_area {
    flex-direction: column;
    align-items: flex-start;
  }
  .coin_list_info .text_area .price {
    font-size: 14px;
    text-align: left;
  }
  .text_list li {
    display: block;
  }
  .text_list .title {
    margin-bottom: 10px;
  }
  .text_list .desc {
    text-align: left;
  }
  .unpaid_btnbox {
    flex-direction: column;
    align-items: flex-start;
  }

  /* .inventory_list {grid-template-columns:1fr}
 .inventory_list li {max-width: 100%; width: 100%;} */
}
@media screen and (max-width: 410px) {
  .level_tab li {
    word-break: keep-all;
  }
}

@media screen and (max-width: 375px) {
  .buysell_list li {
    flex-wrap: wrap;
  }
  .buysell_list li p:nth-child(1) {
    width: 100%;
    margin-bottom: 6px;
  }
  .mainheader_title {
    font-size: 1.4rem;
  }
  .link_moblie {
    flex-wrap: wrap;
  }
  .popup_bg {
    padding: 0 20px;
  }
}