/* contents CSS */

/* wrap */
.wrap {
  width: 100%;
  max-width: 768px;
  margin: auto;
  background-color: #f4f8eb;
  min-height: 100vh;
  min-height: 100svh;
}

.wrap.full {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.wrap.full .header {
  flex: none;
}
.wrap.full .main {
  flex: 1;
}
.wrap.full .footer {
  flex: none;
}
.wrap.white {
  background-color: #fff;
}

.main.main_h {
  min-height: calc(100vh - 65px - 50px);
  height: 100%;
}

/* header */
.header {
  width: 100%;
}
.header_safe_area {
  width: 100%;
  height: 50px;
}
.header_common_layout {
  width: 100%;
  max-width: 768px;
  height: 50px;
  padding: 0 20px;

  background-color: #f4f8eb;
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header_common_layout::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    #f4f8eb 0%,
    #5e825f 25%,
    #5e825f 50%,
    #5e825f 75%,
    #f4f8eb 100%
  );
}
.header_left {
  margin-right: auto;
}
.header_center {
  margin-left: auto;
  margin-right: auto;
}
.header_right {
  margin-left: auto;
}
.header_logo {
  font-size: 18px;
  font-weight: 700;
}
.header_title {
  font-size: 20px;
  font-weight: 700;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header_menu_btn {
  display: block;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* bottom_tab */
.bottom_tab_safe_area {
  width: 100%;
  height: 68px;
}
.bottom_tab {
  width: 100%;
  max-width: 768px;
  padding: 6px 20px;
  background-color: #f4f8eb;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  z-index: 100;
}

.bottom_tab::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    #f4f8eb 0%,
    #5e825f 25%,
    #5e825f 50%,
    #5e825f 75%,
    #f4f8eb 100%
  );
}

.bottom_tab li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bottom_tab li a .icon {
  width: 32px;
  height: 32px;
}
.bottom_tab li a .icon img {
  width: 100%;
  height: 100%;
}
.bottom_tab li a .icon.on {
  display: none;
}
.bottom_tab li a .text {
  font-size: 14px;
  font-weight: 700;
  color: #949ea5;
}
.bottom_tab .active a .text {
  color: var(--sub);
}
.bottom_tab .active a .icon.on {
  display: block;
}
.bottom_tab .active a .icon.off {
  display: none;
}

.banner_swiper img {
  width: 100%;
}

/* coin_list */
.coin_list {
  width: 100%;
  overflow: hidden;
}
.coin_list_no_data {
  height: 68px;
  text-align: center;
  border: 1px solid var(--border_sub);
  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 li {
  position: relative;
  margin-bottom: 14px;
}
.coin_list li:last-child {
  margin-bottom: 0px;
}
.coin_list_info {
  padding: 10px 16px;
  border: none;
  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 .img {
  flex: none;
  width: 46px;
  height: 46px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.coin_list_info .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 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_info.active {
  transform: translateX(-240px);
}
/* coin_list_button_box */
button[type="button"].coin_list_button {
  width: 70px;
  height: 60px;
  background-color: var(--main);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.coin_list_button_box {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.coin_list_button_box button {
  margin-right: 10px;
}
.coin_list_button_box button:first-child {
  letter-spacing: -0.8px;
}
.coin_list_button_box button:last-child {
  margin-right: 0;
}

.swiper-pagination-bullet-active {
  background: var(--main) !important;
}

.swiper-pagination-bullet {
  background: var(--white);
  opacity: 1;
}

/* main_card */
.main_card {
  width: 100%;
  padding: 5px 0;
  position: relative;
  overflow: hidden;
}
.main_card .top {
  /*padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.1);*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main_card .top .name {
  font-size: 20px;
  font-weight: 700;
  color: #111111;
}
.main_card .top .email {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.6;
  color: #5e825f;
}
.main_card .top .logout {
  display: block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  background-color: #abb3b6;
  border-radius: 4px;
  cursor: pointer;
}
.main_card .bottom {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main_card .bottom a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.main_card .bottom a .img {
  width: 50px;
  height: 50px;
}
.main_card .bottom a .img img {
  width: 100%;
  height: 100%;
}
.main_card .bottom a .text {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

/* sub_card */
.sub_card {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  background-color: #f7fbfd;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: center;
  align-items: center;
}
.sub_card li {
  width: 100%;
  padding: 0 6px;
  border-right: 1px solid #f1f1f1;
  font-size: 16px;
  font-weight: 700;
}
.sub_card li:last-child {
  border-right: none;
}
.sub_card li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* direct_link_list */
.direct_link_list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
}
.direct_link_list li {
  background: #fff;
  border-radius: 6px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
}
/* .direct_link_list li {background:linear-gradient(120deg, #75B0F6, #3E79EC); border-radius:6px; box-shadow:0 2px 10px rgba(0,0,0,.28);} */
.direct_link_list .important {
  background: #285e29;
  color: #fff;
}

.direct_link_list li .text {
  margin-bottom: 10px;
}
.direct_link_list li .text .pre {
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  height: 16px;
}
.direct_link_list li .text .title {
  font-size: 18px;
  font-weight: 700;
}
.direct_link_list li .img {
  width: 35px;
  height: 35px;
  margin-left: auto;
}
.direct_link_list li .img img {
  width: 100%;
  height: 100%;
}
.direct_link_list .direct_txt {
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  color: #000;
  position: relative;
}
.direct_link_list li a {
  width: 100%;
  height: 100%;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.direct_link_list li a > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.direct_link_list li a img {
  display: inline-block;
  margin-left: auto;
}

.direct_link_list li.event a .img {
  position: absolute;
  width: 92px;
  height: 68px;
  bottom: 4px;
  right: 8px;
}

/* point_card */
.point_card {
  width: 100%;
  border-radius: 6px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
  background-color: #ccc;
  overflow: hidden;
}
.point_card.blue {
  background: linear-gradient(120deg, #2d67af, #1c4579);
}
.point_card.green {
  background: linear-gradient(120deg, #4a934b, #2b872d);
}
.point_card.yellow {
  background: linear-gradient(120deg, #ffbe0a, #ffdc00);
}
.point_card.black {
  background: linear-gradient(120deg, #377cbd, #002f67);
}
.point_card.red {
  background: linear-gradient(120deg, #da5a59, #d25c5c);
}
.point_card.black .bottom {
  background-color: rgba(255, 255, 255, 0.1);
}
.point_card .top {
  padding: 30px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.point_card .top .title {
  font-size: 16px;
  font-weight: 600;
}
.point_card .top .amount {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.2px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.point_card .bottom {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.1);
}
.point_card .bottom a {
  display: block;
  width: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}
.point_card .bottom a:last-child {
  border-right: none;
}

/* title_card */
.title_card {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
}
.title_card .title {
  padding: 12px;
  background-color: #ccc;
  border-radius: 6px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  position: relative;
}
.title_card.blue .title {
  background-color: #007aff;
}
.title_card.green .title {
  background-color: #00ad55;
}
.title_card.black .title {
  background-color: #000;
}
.title_card .title:after {
  content: "";
  display: block;
  width: 20px;
  height: 0;
  border-top: 3px solid rgba(255, 255, 255, 0.3);
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
}
.title_card .content {
  padding: 12px;
  background-color: #f7fbfd;
  border-radius: 6px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
  grid-column: span 2;
}
.title_card .content .percent {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #000;
  text-align: center;
}
.title_card .content .amount {
  font-size: 14px;
  font-weight: 500;
  color: #000;
  opacity: 0.6;
  text-align: center;
}

/* circle_progress */
.circle_progress {
  padding: 10px;
  background-color: #f7fbfd;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.circle_progress .icon {
  position: relative;
}
.circle_progress .icon svg {
  display: block;
}
.circle_progress .icon svg .track {
  fill: none;
  stroke: #000;
  stroke-width: 5;
  opacity: 0.1;
}
.circle_progress .icon svg .runner {
  fill: none;
  stroke: var(--main);
  stroke-width: 5;
  stroke-dasharray: 251.2;
  stroke-dashoffset: calc(251.2 * (100 - var(--percent)) / 100);
  stroke-linecap: round;
  animation: circle_progress_motion 1.2s;
}
.circle_progress .icon .percent {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.circle_progress .text {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.circle_progress.red .icon svg .runner {
  stroke: red;
}
.circle_progress.blue .icon svg .runner {
  stroke: blue;
}

@keyframes circle_progress_motion {
  0% {
    stroke-dashoffset: 251.2;
  }
}

/* notice_list_card */
.notice_list_card {
  padding: 12px 20px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
}
.notice_list_card .card_title {
  font-size: 16px;
  font-weight: 700;
  color: #acacac;
}
.notice_list_card ul li {
  margin-bottom: 5px;
  border-bottom: 1px solid #f1f1f1;
}
.notice_list_card ul li:last-child {
  border-bottom: none;
}
.notice_list_card ul li a {
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.notice_list_card ul li a .title {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.notice_list_card ul li a .date {
  flex: none;
  font-size: 13px;
  font-weight: 500;
  color: #000;
  opacity: 0.5;
}

/* text_card_list */
.text_card_list {
  width: 100%;
  padding: 12px;
  background-color: transparent;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid var(--white);
}
.text_card_list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f1f1f1;
}
.text_card_list li:last-child {
  padding-bottom: 0px;
  margin-bottom: 0px;
  border-bottom: none;
}
.text_card_list .title {
  flex: none;
  font-size: 14px;
  font-weight: 400;
  word-break: break-all;
}
.text_card_list .desc {
  font-size: 14px;
  font-weight: 700;
  word-break: break-all;
}

/* 추천하기 */
.bg_referral {
  background: #fdeabf;
}
.referral_tit {
  padding: 20px 20px 0;
  text-align: center;
}
.referral_tit p:first-child {
  font-size: 38px;
  line-height: 1.2;
}
.referral_tit p:last-child {
  font-size: 16px;
}
.referral_box {
  position: relative;
  padding: 0 20px 20px;
}
.referral_bg {
  background: linear-gradient(to top, #ffa2a7 50%, transparent 50%);
}
.referral_box img {
  width: 100%;
  max-width: 620px;
  height: 100%;
  max-height: 430px;
  object-fit: contain;
  aspect-ratio: 6 / 5;
  margin: auto;
}
.referral_box_card {
  margin: 0 20px 0;
  padding: 14px 20px;
  background: #fff;
  border-radius: 10px;
}
.referral_info li {
  display: flex;
  align-items: stretch;
}
.referral_num {
  flex: none;
  display: block;
  width: 21px;
  height: 21px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #89949c;
  font-size: 12px;
  font-weight: 600;
  font-family: "montserrat";
  border-radius: 50%;
  color: #fff;
}
.referral_info li {
  font-size: 14px;
  font-weight: 500;
}
.referral_fri_card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #fff;
  border-radius: 10px;
  width: calc(100% - 40px);
  margin: 10px auto 0;
}
.referral_receive_section {
  background-color: #ebf3fe;
  padding: 42px 20px 50px;
}
.referral_receive_img img {
  width: 100%;
  max-width: 370px;
  margin: 0 auto;
}
.referral_receive_card {
  text-align: center;
  background-color: #f2f2f2;
  padding: 14px 20px 20px;
  border-radius: 10px;
}
.referral_receive_card p:last-child {
  line-height: 1.7;
}
.referral_receive_col {
  margin-top: 28px;
  display: flex;
  gap: 10px;
}
.referral_receive_col_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  background-color: #f2f2f2;
  border-radius: 10px;
  flex: 1;
  gap: 10px;
}
.referral_receive_col_card > span:first-child {
  background-color: #ebebeb;
  width: 80px;
  height: 80px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: block;
  overflow: hidden;
}
.referral_receive_col_card > span:first-child > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.referral_tq_btn {
  border-radius: 10px;
  background-color: var(--main);
  padding: 10px 12px;
}
footer.referral_receive_footer {
  padding-bottom: 120px;
  background-color: #f4f4f4;
}
.referral_receive_info {
  background-color: #f2f2f2;
  padding: 20px;
  font-size: 14px;
}
.referral_receive_info p:nth-of-type(1) {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* inquiry_tab */
.inquiry_tab {
  display: flex;
  justify-content: center;
  align-items: center;
}
.inquiry_tab li {
  width: 100%;
  height: 60px;
  border-bottom: 2px solid #e6e6ea;
}
.inquiry_tab li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: 700;
}
.inquiry_tab .active {
  border-color: var(--main);
}

/* inquiry_list */
.inquiry_list li {
  width: 100%;
}
.inquiry_list li a {
  display: block;
  padding: 20px;
  border-radius: 6px;
  background-color: var(--white);
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
  border: none;
}
.inquiry_list li a .title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  word-break: break-all;
  color: #212121;
}
.inquiry_list li a .state {
  font-size: 16px;
  font-weight: 700;
}
.inquiry_list li a .date {
  font-size: 14px;
  font-weight: 400;
  color: #b1b1b1;
}
.inquiry_list li a .state.wait {
  color: #f00;
}
.inquiry_list li a .state.complete {
  color: #090;
}

/* notice_list */
.notice_list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notice_list li {
  width: 100%;
}
.notice_list li a {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.notice_list li a .title {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
.notice_list li a .date {
  font-size: 14px;
  font-weight: 500;
  flex: none;
  color: #000;
}

/* pagination */
.pagination {
  display: flex;
  align-items: center;
}
.pagination li {
  width: 26px;
  height: 26px;
  margin-right: 4px;
}
.pagination li:last-child {
  margin-right: 0;
}
.pagination li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: 500;
  color: #b1b1b1;
}
.pagination .page.active {
  border-radius: 4px;
  background-color: var(--main);
}
.pagination .page.active a {
  color: #fff;
}

/* copyright */
.copyright {
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  color: #5e825f;
  font-family: "montserrat";
}

/* label */
label.design {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
}
label.design small {
  display: inline-block;
  width: 100%;
}
label.design .help {
  font-size: 14px;
}

/* input */
input {
  width: 100%;
  padding: 12px 25px;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  font-weight: 500;
  border: 1px solid #e6e6ea;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
}
input.design {
  width: 100%;
  padding: 12px 25px;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  font-weight: 500;
  border: 1px solid #e6e6ea;
}
input.design::placeholder,
input::placeholder {
  font-size: 14px;
  font-weight: 400;
  color: #8b8b8b;
}

input:read-only {
  background-color: #eee;
  border: none;
}
input.not_readonly:read-only {
  background-color: #fff;
}

input:disabled {
  background-color: #656565;
}
input.not_disabled:disabled {
  background-color: #fff;
}

/* checkbox */
label.checkbox {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
label.checkbox input {
  display: none;
}
label.checkbox .icon {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background-color: #a2acbd;
  cursor: pointer;
  position: relative;
}
label.checkbox .text {
  font-size: 14px;
  font-weight: 500;
  color: #a2acbd;
  cursor: pointer;
}
label.checkbox input + .icon::after {
  content: "V";
  display: block;
  font-size: 14px;
  font-weight: 700;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #eee;
}
label.checkbox input:checked + .icon {
  background: var(--main);
}
label.checkbox input:checked + .icon::after {
  color: #fff;
}
label.checkbox input:checked ~ .text {
  color: var(--black) !important;
}

label.checkbox.black .icon {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background-color: #f1f1f1;
  cursor: pointer;
  position: relative;
}
label.checkbox.black .text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
}
label.checkbox.black input + .icon::after {
  content: "V";
  display: block;
  font-size: 14px;
  font-weight: 700;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ccc;
}
label.checkbox.black input:checked + .icon {
  background: #000;
}
label.checkbox.black input:checked + .icon::after {
  color: #fff;
}
label.checkbox.black input:checked ~ .text {
  color: #000 !important;
}

/* select */
/* select.design{width:100%; padding:12px 25px; box-shadow:var(--select-shadow); border:var(--select-border); border-radius:var(--select-radius); background-color:var(--white); font-size:16px; font-weight:400; position:relative; }
select.design::before{content:""; display:block; width:14px; height:14px; border-top:1px solid var(--black); border-right:1px solid var(--black); position:absolute; top:50%; right:10px; transform:translateY(-50%);} */
label:has(select.design) {
  position: relative;
}
label:has(select.design) select.design {
  width: 100%;
  padding: 12px 25px;
  border-radius: 6px;
  border: 1px solid #a2acbd;
  background-color: #fff;
  font-size: 14px;
  font-weight: 400;
}
label:has(select.design)::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid var(--black);
  border-right: 2px solid var(--black);
  position: absolute;
  top: 44%;
  right: 20px;
  transform: translateY(-50%) rotate(45deg);
}

/* textarea */
textarea.design {
  width: 100%;
  padding: 12px 25px;
  background-color: #fff;
  border: 1px solid #e6e6ea;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  resize: none;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
}
textarea.design::placeholder {
  font-size: 14px;
  font-weight: 400;
  color: #8b8b8b;
}

/* button */
button.design {
  width: 100%;
  height: 50px;
  background: var(--main);
  color: #fff;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}
button.design:disabled {
  border: solid 1px rgba(0, 0, 0, 0.05);
  background-color: #e6e6ea;
  color: #fff;
}
button.design.red {
  background-image: none;
  background-color: red;
  color: #fff;
}
button.design.gray {
  background-image: none;
  background-color: #999;
}
button.design.blue {
  background-image: none;
  background-color: #008;
}
button.design.white {
  background-image: none;
  background-color: #000;
}
button.design.black {
  background-image: none;
  background-color: fff;
}
button.design.small {
  width: auto;
  height: 50px;
  padding: 0 16px;
  font-size: 16px;
  border-radius: 4px;
}
.link_btn {
  width: max-content;
  padding: 0 20px;
  height: 40px;
  background: var(--sub);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.btn {
  width: 100%;
  height: 50px;
  background: var(--main);
  color: #fff;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
.btn.small {
  width: auto;
  height: 50px;
  padding: 0 16px;
  font-size: 16px;
  border-radius: 4px;
}
.btn.disabled {
  border: solid 1px rgba(0, 0, 0, 0.05);
  background-color: #e6e6ea;
  color: #fff;
}

/* badge */
.badge {
  font-size: 16px;
  padding: 8px 16px;
  font-weight: 700;
  border-radius: 100vw;
  background-color: #ccc;
  color: #000;
}
.badge.red {
  background-color: red;
  color: #fff;
}
.badge.green {
  background-color: green;
  color: #fff;
}
.badge.blue {
  background-color: blue;
  color: #fff;
}
.badge.yellow {
  background-color: yellow;
  color: 000;
}
.badge.gold {
  background-color: gold;
  color: 000;
}
.badge.small {
  font-size: 10px;
  padding: 5px 10px;
}
.badge.regular {
  font-size: 11px;
  padding: 5px 10px;
}
.badge.medium {
  font-size: 12px;
  padding: 6px 12px;
}
.badge.large {
  font-size: 13px;
  padding: 6px 12px;
}

.header_right.btns {
  display: flex;
  gap: 8px;
}

/* login logout */
.login {
  display: block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  background-color: #f7fbfd;
  border-radius: 4px;
  cursor: pointer;
}
.logout {
  display: block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  background-color: #cad5c7;
  border-radius: 4px;
  cursor: pointer;
  color: #5e825f;
}

.btn_url {
  display: block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #cad5c7;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--sub);
}

/* help_text */
.help_text {
  font-size: 14px;
  font-weight: 500;
  color: red;
}

/* login_logo */
.login_logo {
  margin: 40px 0;
  font-size: 58px;
  font-weight: 700;
  text-align: center;
}
.login_logo img {
  height: 150px;
  margin: 0 auto;
}

/* terms_box */
.terms_box {
  background-color: #fff;
  border: 1px solid #a2acbd;
  border-radius: 6px;
  overflow: hidden;
}
.terms_box_inner {
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-line;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 400;
}

/*tree*/
.seearch_img {
  position: absolute;
  top: 50%;
  right: 30px;
  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 a {display:block; height:100%;} */
.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: 100px;
  border-radius: 4px;
  background-color: var(--sub);
}
.tree_idbox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px 4px 0 0;
  color: #fff;
  background-color: var(--main);
  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: 8px 0;
  font-size: 10px;
  font-weight: 400;
  color: #000;
  background-color: #fff;
}
.tree_namebox {
  font-size: 12px;
  font-weight: 600;
  padding-top: 4px;
  word-break: break-all;
  color: #000;
  background-color: #fff;
}
.tree_search {
  padding: 0 20px;
}
.tree_imgbox {
  border-bottom: 1px solid #ddd;
  background-color: #fff;
}
.tree_datebox {
  border-radius: 0 0 2px 2px;
}
.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: -2px;
  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);
  color: #fff;
  border-radius: 0;
}
.tree1 li a:hover + ul li a div p:nth-child(1) {
  background: var(--main);
  color: #fff;
  border-radius: 0;
}

/* popup */
.popup_bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
}
.popup_box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 334px;
  padding: 20px;
  border-radius: 6px;
  background-color: #fff;
}
.popup_title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
  word-break: break-all;
  color: #000;
  padding-bottom: 4px;
}
.popup_content {
  font-size: 16px;
  font-weight: 400;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
  overscroll-behavior: none;
  word-break: break-all;
  color: #000;
  padding-bottom: 4px;
}
.popup_button_box {
  display: flex;
  align-items: center;
}
.popup_button_box button {
  margin-right: 20px;
  font-size: 14px;
}
.popup_button_box button:last-child {
  margin-right: 0px;
}

/* sweet_alert */
.swal2-html-container {
  margin-top: 14px !important;
}
.title_sweet {
  font-size: 22px !important;
  color: #000 !important;
}
.desc_sweet {
  font-size: 16px !important;
  font-weight: 400;
  color: #000 !important;
}
.swal2-styled.swal2-confirm {
  width: 100% !important;
  height: 50px !important;
  background-color: var(--main) !important;
  font-size: 14px;
  font-weight: 500;
  color: #fff !important;
}
.swal2-styled.swal2-cancel {
  width: 100% !important;
  height: 50px !important;
  background-color: #999 !important;
  font-size: 14px;
  font-weight: 500;
}
.swal2-actions {
  width: 100% !important;
  padding: 0 20px !important;
  flex-wrap: unset !important;
}

/* recommender */
.reco_data {
  width: max-content;
  padding: 10px;
  text-align: center;
  margin-left: auto;
  background-color: var(--white);
  border-radius: 6px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
}
.card.recommender {
  padding: 0;
  overflow: hidden;
}
.card.recommender thead {
  background-color: #eee;
}
/* 230829 */
/*  로그인 페이지 */
.join_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background: #eee;
  color: #686868;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  border: 1px solid #f1f3f5;
}

/* 출금 신청 페이지 */
.refresh_btn {
  display: flex;
  padding: 5px 10px;
  background-color: #00e0ed;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
}
/* #46D2D0 */
.point_card.withdraw {
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
}
.point_card.withdraw .top {
  display: block;
}
.point_card.withdraw .top .amount {
  font-size: 24px;
}

/* main point img */
.main_point {
  position: relative;
}

.main_point .img {
  position: absolute;
  top: -80px;
  right: 0;
  width: 120px;
  height: 80px;
}

.main_point .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 230830*/
/* 공지사항 페이지  */
.card.notice {
  background-color: #fff;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
}

/* sweet alert 버튼 색상 변경 */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0) !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  background-color: var(--main) !important;
}

/* main - level mark */
.level_mark {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  padding: 4px 12px;
  border-radius: 20px;
  background-color: var(--main);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
/* height:30px;  */
.attend_btn {
  flex-direction: column;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  background-color: var(--main);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.attend_btn img {
  width: 50px;
  margin-right: 0;
}
.attend_btn.checked {
  background-color: #fff;
  color: var(--main);
  box-shadow: none;
  cursor: default;
}

/* 230831*/
/* main - logo */
.header_logo img {
  height: 32px;
}

/* login */
.main.login_main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.point_card .bottom a.point_card_link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #fff;
  font-weight: 400;
}

/* 공지사항 슬라이드 */
.marquee_box {
  display: flex;
  align-items: center;
  height: 42px;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 12px;
  background-size: 100% 100%;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
}

.marguee_noticeb {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  padding: 4px 6px;
  font-family: "lato";
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
}

.marguee_noticeb span {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 8px;
  width: max-content;
  background-color: rgb(240, 85, 85);
  border-radius: 16px;
  color: #fff;
  font-size: 12px;
}

.marquee_inner {
  width: 100%;
  height: 36px;
  margin: 0 20px;
  padding: 0 20px;
  background-color: transparent;
  color: #fff;
  overflow: hidden;
}

ul.marquee {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
  animation: 17s linear 0s infinite normal none running marquee;
}

ul.marquee > li {
  margin: 0 10px;
  padding: 0;
}

ul.marquee > li > a {
  font-size: 14px;
  line-height: 40px;
  font-family: "lato";
  white-space: nowrap;
}

@keyframes marquee {
  0% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

/* 23/09/04 */
/* 메인페이지 - 메뉴 버튼 색상 추가 */
.direct_link_list li.blue {
  background: linear-gradient(120deg, #00b2ff, #348cf8);
}
.direct_link_list li.red {
  background: linear-gradient(120deg, #da5a59, #d25c5c);
}
.direct_link_list li.green {
  background: linear-gradient(120deg, #00a6b0, #0096c6);
}
.direct_link_list li.purple {
  background: linear-gradient(120deg, #7b66c5, #516cc6);
}
.direct_link_list li.pink {
  background: linear-gradient(120deg, #ff88a8, #ff6891);
}
.direct_link_list li.navy {
  background: linear-gradient(120deg, #377cbd, #002f67);
}
.direct_link_list li.yellow {
  background: linear-gradient(120deg, #fee347, #fbd80f);
}
.direct_link_list li.apricot {
  background: linear-gradient(120deg, #ff88a8, #ff6891);
}
.direct_link_list li.orange {
  background: linear-gradient(120deg, #ff9777, #e37d8d);
}
.direct_link_list li.navy p {
  color: #fff;
}

/* 23/09/05 */
/* shopping_list */
.shopping_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 30px;
}
.shopping_list li a .img {
  width: 100%;
  height: 0;
  padding-top: 100%;
  margin-bottom: 10px;
  background-color: #fff;
  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 .discount {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray);
  text-decoration: line-through;
}
hr.type2 {
  border: 4px solid #fafafa;
}
hr.line2 {
  border: 4px solid #ededed;
}

/*상품 상세보기*/
.shopping_product_img {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  position: relative;
}
.shopping_product_detail {
  color: var(--white);
}
.shopping_product_img img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: contain;
  object-position: center;
}
.discount {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray);
  text-decoration: line-through;
  margin-left: 6px;
}
.shopping_product_explain {
  max-width: 768px;
  margin: 0 auto;
  color: var(--white);
}
.shopping_product_explain p {
  width: 100%;
  margin: 20px 0;
  font-size: 14px;
  font-weight: 500;
}
.shopping_product_explain p.font_22 {
  font-size: 22px;
  font-weight: bold;
}
.shopping_product_explain p img {
  max-width: 100%;
  margin: 30px auto;
  border: 1px solid #efefef;
}
button[type="button"].plus.active {
  background-color: var(--red);
  color: var(--white);
}
button[type="button"].minus {
  width: 29px;
  height: 29px;
  font-size: 18px;
  border-radius: 50%;
  padding: 0;
  border: 1px solid #a2acbd;
}
button[type="button"].minus.active {
  background-color: var(--red);
  color: var(--white);
  border: 1px solid #fff;
}
input.shopping_amount {
  width: 60px;
  padding: 2px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  background-color: #fff;
}
button[type="button"].plus {
  width: 28px;
  height: 28px;
  font-size: 18px;
  border-radius: 50%;
  padding: 0;
}
.buy_btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 767px;
  margin: 0 auto;
  width: 100%;
  background-color: transparent;
}
button[type="button"].payment.active {
  border: 1px solid var(--main);
  background-color: var(--main);
  color: #fff;
}
button[type="button"].payment {
  padding: 10px 20px;
  border: 1px solid var(--main);
  background-color: #fff;
  color: var(--main);
  border-radius: 8px;
}
.text_card_list.order {
  box-shadow: none;
  border: 1px solid #a2acbd;
}
/*상품 주문하기*/
.orderimg {
  flex: none;
  width: 94px;
  height: 94px;
  margin-right: 20px;
}
.orderimg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #a2acbd;
}
/*쇼핑내역 */
.shopcomplet_box {
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 20px;
  cursor: pointer;
  background-color: #fff;
}
.history_viewtxt {
  flex: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--dark_gray);
}
.addr_box {
  text-align: right;
}
.icon_actionimgbox {
  width: 56px;
  margin: 0 auto;
}
.fran_imgbox {
  width: 56px;
  height: 56px;
}
.shopping_order_product {
  color: var(--white);
}

/* product_info */
.withdrawal_history_details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f1f3f5;
}
.withdrawal_detailsbox div:first-child {
  padding-top: 0;
}
.withdrawal_detailsbox div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.withdrawl_info li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.withdrawal_detailsbox {
  border: 1px solid var(--white);
  padding: 20px;
  border-radius: 10px;
}

/* shopping_order */
.type3 {
  border: 4px solid #fff;
}
button.search {
  width: 80px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--main);
  background-color: var(--main);
  color: var(--white);
}
.btn.cancel {
  background-color: #fff;
  border: 1px solid var(--main);
  color: var(--main);
}

/* shopping_history_view */
.withdrawal_detailsbox.history_view {
  border: 1px solid var(--white);
  background-color: transparent;
  color: var(--white);
}

/* 23/09/06 */
/* shopping_order 상품 옵션 */
label:has(select.select_buyopt)::before {
  top: 45%;
}
.text_card_list li.d_none {
  display: none;
}

/* 23/09/13 */
/* 메인페이지 - 추천/후원 매출 슬라이드 추가 */
/* point_card */
.point_card.apricot {
  background: linear-gradient(120deg, var(--main), var(--sub));
}
.point_card.white {
  background: #ffffff;
}
.point_card.white .top .title {
  padding: 8px 14px;
  border-radius: 6px;
  background-color: #ffffff;
}
.point_card.white .top .title.red {
  background-color: #da5a59;
}
.point_card.white .top .title.blue {
  background-color: #348cf8;
}
.point_card.white .top .title.yellow {
  background-color: #ffc82f;
}
.point_card.white .top .title.green {
  background-color: #259839;
}

/* 23/09/27 */
/* alertModal 최소 너비 설정 */
.swal2-container.swal2-center > .swal2-popup {
  min-width: 300px !important;
  max-width: 400px !important;
}

/* 23/10/11 */
/* 재테크방으로 이동 페이지 > 이동할 포인트 하단 금액 버튼 추가 */
input.move_point {
  background-color: #fff;
}
.amount_btn_box li {
  width: calc(20% - 20px);
  height: 40px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  background-color: #ffffff;
  border: 1px solid #0170c1;
  cursor: pointer;
}
.amount_btn_box li.active {
  background-color: #0170c1;
  border: 1px solid #0170c1;
  color: #fff;
}
.amount_btn_box li:last-child {
  background-color: #ddd;
  border: 1px solid #a2acbd;
  color: #000;
}
.amount_btn_box li:last-child.active {
  background-color: #ddd;
  border: 1px solid #a2acbd;
  color: #000;
}

/* 23/10/18 */
/* 추천레그 > 테이블 구조로 변경 */
.title {
  font-size: 20px;
  font-weight: 700;
}

table {
  width: 100%;
}
tr {
  border-bottom: 1px solid var(--line);
}
th {
  padding: 20px 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
td {
  padding: 20px 10px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.coin_input {
  width: 160px;
  height: 36px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.coin_btn {
  padding: 10px 20px 10px;
  background-color: var(--button);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
}
.list_scroll {
  overflow-x: auto;
}
.list_scroll::-webkit-scrollbar {
  width: 8px;
}
.list_scroll::-webkit-scrollbar-thumb {
  width: 4px;
  background-color: var(--main);
  border-radius: 10px;
  border: 2px solid var(--line);
}
.list_scroll::-webkit-scrollbar-track {
  background-color: var(--line);
}
.search_btn_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
}
.card.table {
  box-shadow: none;
}

.amount_btn_box {
  display: flex;
  gap: 10px;
}
.amount_btn_box li {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  background-color: var(--card_bg);
  border: 1px solid #0170c1;
  cursor: pointer;
}
.amount_btn_box li:last-child {
  background-color: #ddd;
  border: none;
  color: #000;
}

/* 231121 */
.applicant {
  border: 1px solid #f1f3f5;
  box-shadow: 0px 1px 5px -2px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}
.applicant li div {
  border-bottom: 1px solid #ededed;
  padding: 12px;
}
.applicant li div:last-child {
  border-bottom: none;
}
button.notwidth {
  height: 50px;
  background: #0170c1;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  color: #fff;
  padding: 0 10px;
}
/* 신분증 입력 영역 */
.drag_drop_zone {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 100%;
  height: auto;
  min-height: 213px;
  border: 1px dashed var(--inactive);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 15px;
}
.drag_drop_zone p {
  font-size: 14px;
  font-weight: 400;
  line-height: 33px;
  color: var(--inactive);
}

.drag_drop_zone p.off {
  display: none;
}
.drop_upload,
.promotion_upload {
  display: none;
}
.drag_drop_zone > label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.represent_box > p {
  display: flex;
  align-items: flex-start;
  font-size: 12px;
  font-weight: 400;
  color: var(--red);
  margin-top: 10px;
}
.represent_box > p::before {
  content: "* ";
  display: block;
  width: 8px;
  height: auto;
  margin-right: 2px;
}
.drop_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* .off { display: none; } */

.select_design {
  width: 100%;
  padding: 12px 25px;
  background: url(../img/new_img/icon_drop.svg) no-repeat 98% 50%/20px auto;
  background-color: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  background-size: 10px;
}
.direct_link_list li .text .title.text_white {
  color: #fff;
}

.fran_apply {
  background: #007bc8;
  text-align: center;
  border-radius: 10px;
  margin: 10px 0 20px;
}
.fran_apply button {
  width: 100%;
  height: 100%;
  padding: 10px 20px;
  border-radius: 10px;
}
.fran_apply button span {
  color: var(--white);
  font-weight: 700;
  font-size: 20px;
}

.tree_level_0 {
  background-color: #a2acbd;
  border-radius: 0 !important;
}

.shopping_product_info {
  color: var(--white);
}

.shopping_history_data {
  margin-top: 10px;
}

.input_box {
  color: var(--white);
}
.btn_line {
  background: #fff !important;
  border: 1px solid #ededed;
  color: var(--sub) !important;
}
.point_card .top .amount.pack_flex_none {
  display: block;
}

.btn_cert {
  display: block;
  padding: 14px;
  border-radius: 8px;
  font-size: 15px;
  background: #0066ff;
  color: #fff;
  border: none;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
}
.btn_cert:hover {
  background: #0052cc;
}

.main_h .contents_wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - 65px - 50px);
  height: 100%;
}

.sm_only {
  display: none;
}

.pp_hint {
  display: inline-block;
  margin-top: 8px;
  color: white;
  font-weight: 500;
  font-size: 14px;
}

.badge_new {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 8px;
  width: max-content;
  background-color: rgb(240, 85, 85);
  border-radius: 12px;
  color: #fff;
  font-size: 12px;
}

.qr_imgbox img {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .select_design {
    background: url(../img/new_img/icon_drop.svg) no-repeat 94% 50%/20px auto;
    background-size: 10px;
    background-color: #fff;
  }

  .main_point .img {
    width: 90px;
    height: 60px;
    top: -60px;
  }

  .direct_link_list li.event a .img {
    width: 66px;
    height: 48px;
  }

  .header_common_layout {
    box-shadow: 0px 1px 5px -2px #00000033;
  }

  .header_common_layout::after {
    background: #5e825f80;
  }

  .bottom_tab::after {
    background: #5e825f80;
  }

  @media screen and (max-width: 400px) {
    .direct_link_list li .text .title {
      font-size: 16px;
    }
    .direct_link_list li .text .pre {
      font-size: 13px;
    }
  }

  /* 240213 메인 > 지갑 코인 목록 추가 */

  /* .swiper-pagination-bullet-active {background: var(--main) !important;} */

  @media all and (min-width: 320px) and (max-width: 480px) {
    .sm_only {
      display: inline-block;
    }
    .coin_list_info .text_area {
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }
    .coin_list_info .text_area .price {
      text-align: left;
    }
  }
}
@media screen and (max-width: 480px) {
  .copyright {
    font-size: 10px;
  }
}

@media screen and (max-width: 375px) {
  .copyright {
    font-size: 8.5px;
  }
}