/* contents CSS */
/* 241112 */
.contry_phone {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
}
.phone_country {
  width: 100%;
}
.timer_num {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #900;
}
.email_form_btn {
  display: flex;
  align-items: center;
  gap: 10px;
}
.email_form_btn button {
  max-width: 70px;
}
.email_verti {
  display: flex;
  align-items: center;
  gap: 10px;
}
.unset_width {
  width: unset !important;
}
.unset_width_data {
  width: unset !important;
  color: #7d7d7d;
  margin-left: 30px !important;
}
.email_ver {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.mail_sendbox {
  width: 100%;
  margin: 0 auto;
  border-radius: 6px;
  border: 2px solid #f1f3f5;
  padding: 20px;
}
.resendbtn button {
  width: 100%;
  margin-top: 6px;
}
.complete_email {
  padding: 20px;
}
.comp_email {
  max-width: 100px;
}
.comp_email button {
  flex: none;
  width: max-content !important;
  min-width: 70px;
  max-width: 100px;
  padding: 0 12px;
}
.email_verti_re {
  position: relative;
}

/* 241115 패키지 구매 */
.my_point_view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #f1f3f5;
}
.my_point_view .title {
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
}
.my_point_view .amount {
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
}
.daller_flex {
  display: flex;
  align-items: center;
  gap: 4px;
}
.my_point_view.no_border {
  border-bottom: none;
}
.select_box.w_100 {
  width: 100%;
}
.dall_txt {
  font-size: 18px;
  font-weight: 700;
}

/* 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(--main);
}
@keyframes loading {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* wrap */
.wrap {
  width: 100%;
  max-width: 768px;
  margin: auto;
  background-color: var(--white);
  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;
}
.h100 {
  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;
  border-bottom: 1px solid var(--gray);
  background-color: #fff;
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 1px 5px -2px rgba(0, 0, 0, 0.2);
}
.header_left {
  margin-right: auto;
}
.header_center {
  margin-left: auto;
  margin-right: auto;
}
.header_right {
  margin-left: auto;
}
.header_logo {
  font-size: 24px;
  font-weight: 700;
  color: #000;
}
.header_title {
  font-size: 20px;
  font-weight: 700;
  color: #000;
  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: #fff;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  border: 1px solid var(--main);
  border-radius: 10px 10px 0px 0px;
}
.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(--main);
}
.bottom_tab .active a .icon.on {
  display: block;
}
.bottom_tab .active a .icon.off {
  display: none;
}

.banner_swiper img {
  width: 100%;
}
.date_input input {
  width: 100%;
  padding: 10px 20px;
  background-color: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #c3c3c3;
}
/* 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: #2e3b4b;
}
.main_card .top .email {
  font-size: 14px;
  font-weight: 700;
  color: #2e3b4b;
  opacity: 0.6;
}
.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;
}

/* main_card-info */
.point_card .main_card-info.top2 {
  justify-content: flex-start;
  align-items: baseline;
  font-weight: 600;
  color: #fff;
  gap: 8px;
  padding: 25px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.point_card .main_card-info.top2 .email {
  font-size: 12px;
}

/* main banner slide */
.main-banner_wrap {
  padding: 20px 20px 0 20px;
}

.main-banner-slide {
  padding-bottom: 28px;
  overflow: hidden;
}

.main-banner-slide .swiper-slide {
  aspect-ratio: 3 / 1;
  min-height: 80px;
  max-height: 150px;
}

.main-banner-slide .swiper-slide a {
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-banner-slide .swiper-slide img {
  width: 100%;
  object-fit: cover;
}

.main-banner-slide .swiper-pagination {
  bottom: 0;
}

.main-banner-slide .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0 3px !important;
}

/* sub_card */
.sub_card {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  background-color: #f7fbfd;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  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: 1px 1px 2px rgb(226 226 226 / 30%);
  border: 1px solid var(--border_sub);
}
/* .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: linear-gradient(120deg, var(--main), #b57c7c);
}
.direct_link_list .important .text {
  color: #fff;
}
.direct_link_list li .text {
  margin-bottom: 10px;
}
.direct_link_list li .text .pre {
  font-size: 14px;
  font-weight: 600;
}
.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;
}
.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;
}
.direct_link_list li a > div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.direct_link_list li a img {
  display: inline-block;
  margin-left: auto;
}

/* point_card */
.point_card {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  background-color: #ccc;
  overflow: hidden;
}
.point_card.blue {
  background: linear-gradient(120deg, #8199e7, #8f81d3);
}
.point_card.green {
  background: linear-gradient(120deg, #75b0f6, #3e79ec);
}
.point_card.black {
  background: linear-gradient(120deg, #377cbd, #002f67);
}
.point_card.red {
  background: linear-gradient(120deg, #56c1d5, #20a8ca);
}
.point_card.black .bottom {
  background-color: rgba(255, 255, 255, 0.1);
}
.point_card.main {
  background: linear-gradient(39deg, var(--main), #be4747);
}
.point_card.main2 {
  background: linear-gradient(39deg, var(--green), #be4747);
}
.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;
  color: #fff;
}
.point_card .top .amount {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  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;
  color: #fff;
}
.point_card .bottom a:last-child {
  border-right: none;
}

.point_card .top2 {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.point_card .top2 .title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.point_card .top2 .amount {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

/* 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: 0 2px 10px rgba(0, 0, 0, 0.28);
  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: 0 2px 10px rgba(0, 0, 0, 0.28);
  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: 0 2px 10px rgba(0, 0, 0, 0.28);
  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: 0 2px 10px rgba(0, 0, 0, 0.28);
}
.notice_list_card .card_title {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  opacity: 0.6;
}
.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: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  border-radius: 6px;
}
.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;
}

/* 추천하기 */
.share {
  background: var(--white) !important;
  color: var(--black) !important;
}
.bg_referral {
  background: var(--main);
}
.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, #5b5a58 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;
  color: #fff;
}
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;
  color: #000;
}
.inquiry_tab .active {
  border-color: var(--main);
}

/* inquiry_list */
.inquiry_list li {
  width: 100%;
  margin-bottom: 20px;
}
.inquiry_list li a {
  display: block;
  padding: 20px;
  border-radius: 6px;
  background-color: #f7fbfd;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
.inquiry_list li a .title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  word-break: break-all;
}
.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: 0 1px 3px rgba(0, 0, 0, 0.28);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.notice_list li a .title {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.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: #a2acbd;
  opacity: 0.4;
}

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

/* input */
input {
  width: 100%;
  padding: 12px 25px;
  background-color: #fff;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid var(--border_sub);
}
input.design {
  width: 100%;
  padding: 12px 25px;
  background-color: #fff;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid #c3c3c3;
}
input.design::placeholder,
input::placeholder {
  font-size: 16px;
  font-weight: 400;
  color: #a2acbd;
}

input:read-only {
  background-color: #ddd;
  color: #000 !important;
  cursor: inherit;
}
input.not_readonly:read-only {
  background-color: #fff;
}

input:disabled {
  background-color: #ddd;
}
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: #000 !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 var(--border_sub);
  background-color: #fff;
  font-size: 16px;
  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: 37%;
  right: 20px;
  transform: translateY(-50%) rotate(45deg);
}

/* textarea */
textarea.design {
  width: 100%;
  padding: 12px 25px;
  background-color: #fff;
  border: 1px solid #a2acbd;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  resize: none;
}
textarea.design::placeholder {
  font-size: 16px;
  font-weight: 400;
  color: rgba(34, 34, 34, 0.4);
}

/* button */
button.design {
  width: 100%;
  height: 50px;
  background: var(--main);
  border-radius: 6px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  color: #fff;
}
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);
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition: all 0.3s;
}
.btn.small {
  width: auto;
  height: 50px;
  padding: 0 16px;
  font-size: 16px;
  border-radius: 4px;
}
.btn.disabled {
  background-color: #e6e6ea;
  color: #fff;
  cursor: inherit;
}

/* 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;
}

/* 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: #e8eff1;
  border-radius: 4px;
  cursor: pointer;
  color: #949ea5;
}

/* 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;
  color: #1f6bf8;
}
.login_logo img {
  margin: 0 auto;
  max-width: 100%;
}

/* 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: 190px;
  border-radius: 4px;
  background-color: ##7d7d7d;
}
.tree_idbox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px 4px 0 0;
  color: #fff;
  background-color: #7d7d7d;
  min-height: 30px;
  font-weight: 600;
  height: auto;
  font-size: 12px;
}
.tree_idbox_package {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px 4px 0 0;
  color: #fff;
  background: var(--main);
  min-height: 30px;
  font-weight: 600;
  height: auto;
  font-size: 12px;
}
.tree_idbox_package2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px 4px 0 0;
  color: #fff;
  background: var(--green);
  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: 0 2px 10px rgba(0, 0, 0, 0.28);
}

/* 230829 */
/*  로그인 페이지 */
.join_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  border: 1px solid var(--main);
  border-radius: 6px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  color: var(--main);
  text-align: center;
}

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

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

/* 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: #7061e9;
  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: 0 2px 5px rgba(0, 0, 0, 0.28);
  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: 30px;
}

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

/* 23/09/04 */
/* 메인페이지 - 메뉴 버튼 색상 추가 */
.direct_link_list li.blue {
  background: linear-gradient(120deg, #75b0f6, #3e79ec);
}
.direct_link_list li.green {
  background: linear-gradient(120deg, #56c1d5, #20a8ca);
}
.direct_link_list li.purple {
  background: linear-gradient(120deg, #8199e7, #8f81d3);
}
.direct_link_list li.pink {
  background: linear-gradient(120deg, #fca6cd, #fa83b9);
}
.direct_link_list li.navy {
  background: linear-gradient(120deg, #377cbd, #002f67);
}
.direct_link_list li.yellow {
  background: linear-gradient(120deg, #f9f871, #ffdf73);
}
.direct_link_list li.apricot {
  background: linear-gradient(120deg, #ffc786, #ffb5a0);
}
.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 #f4f3f8;
}

/*상품 상세보기*/
.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;
}
.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;
}
.shopping_product_explain p {
  width: 100%;
  margin: 20px 0;
  font-size: 14px;
  font-weight: 500;
  word-break: break-all;
}
.shopping_product_explain p.font_22 {
  font-size: 22px;
  font-weight: bold;
}
.shopping_product_explain p img,
.popup_content p img {
  max-width: 100%;
  margin: 0 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: #fff;
}
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;
}

/* 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(--main);
  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: none;
  background-color: #fff;
}

/* 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.yellow {
  background: linear-gradient(120deg, #f9f871, #ffdf73);
}
.point_card.apricot {
  background: linear-gradient(120deg, #ffc786, #ffb5a0);
}
.point_card.yellow .top .title,
.point_card.apricot .top .title,
.point_card.yellow .top .amount,
.point_card.apricot .top .amount {
  color: #000;
}

/* 23/10/13 */
/* 메인페이지 - 한영 변환 버튼 */
.convert_lang_btn {
  font-size: 14px;
  color: #949ea5;
}

/* 23/10/23 메인 > 지갑 코인 목록 추가 */
/* 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: 1px solid var(--border_sub);
  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;
  border: 1px solid var(--border);
  border-radius: 50%;
  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);
}

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

/* 24.03.04 남보라 회원가입부분 수정 */
.register_sub_title {
  font-size: 22px;
  font-weight: 700;
  width: max-content;
  padding-bottom: 5px;
  border-bottom: 3px solid var(--main);
}
.web_select {
  display: flex;
  align-items: center;
  gap: 10px;
}
.web_select li {
  width: 100%;
}
.accor_cont table {
  width: 100%;
  margin: 20px 0;
  white-space: nowrap;
}
.accor_cont tr {
  border-bottom: 1px solid #f1f3f5;
}
.accor_cont td {
  padding: 20px 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.accor_tit .arrow {
  flex: none;
  margin-left: 20px;
}
.accor_tit {
  cursor: pointer;
  font-weight: 700;
  min-height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
}
.accor_tit > span {
  font-size: 16px;
  word-break: break-all;
}
.accor_cont {
  display: none;
  padding: 20px;
  border-bottom: 1px solid #f1f1f1;
  word-break: break-all;
  overflow-x: auto;
}
.accor_tit.active + .accor_cont {
  display: block;
}
.accor_txt {
  font-size: 16px;
  font-weight: 500;
  word-break: keep-all;
  line-height: 30px;
  word-break: break-all;
}
.accor_tit.active .arrow {
  transform: rotate(180deg);
}

@media all and (min-width: 320px) and (max-width: 480px) {
  .coin_list_info .text_area {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .coin_list_info .text_area .price {
    text-align: left;
  }
}

/* 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;
}

/* 23/10/16 */
/* 전환하기 페이지 */
.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: #024aa3;
}
.point_card.white .top .title.yellow {
  background-color: #ffc82f;
}
.point_card.white .top .title.turquoise {
  background-color: #3a7483;
}
.point_card.white .top .title.green {
  background-color: #259839;
}
.point_card.white .top .title.purple {
  background-color: #8f81d3;
}
.email_auth_box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  padding: 20px;
}

.id_comp {
  padding: 20px;
  font-size: 16px;
  font-weight: 500;
  margin-top: 30px;
}
.my_id_box {
  background: #f6f6f6;
  border-radius: 10px;
  padding: 32px;
  text-align: center;
  margin-top: 20px;
}
.my_id_box p {
  margin-bottom: 10px;
}
.my_id_box p:last-child {
  margin-bottom: 0;
}
.comp_idbox {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 20px;
}
.comp_idbox a {
  display: block;
  width: 100%;
  outline: none;
  padding: 0 16px;
  font-size: 16px;
  border-radius: 4px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.comp_idbox a:nth-child(1) {
  background: #900;
  color: var(--white);
  font-weight: 500;
}
.comp_idbox a:nth-child(2) {
  background: var(--main);
  color: var(--white);
}
.id_pw_link {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
}
.id_pw_link a:first-child::after {
  content: "|";
  padding-left: 10px;
  color: #768597;
}
.id_pw_link a {
  color: #768597;
}

.total_amount_b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 500;
}
.total_amount_b span:nth-child(2) {
  color: #900;
  font-weight: 700;
}
.chone_bar {
  border-bottom: 1px solid #e1e1e1;
  width: 100%;
  height: 1px;
  margin: 10px 0;
}

/* 크루즈 */
.cruise_title {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: #222;
}

.cruise_link {
  gap: 8px;
}

.cruise_link a {
  text-align: center;
  border-radius: 8px;
  padding: 8px 0;
  border: 1px solid var(--main);
  color: var(--main);
}

.cruise_link a.active {
  background-color: var(--main);
  color: var(--white);
}

.cruise_accept {
  margin-top: 40px;
}

.cruise_txt {
  padding: 8px;
  height: 200px;
  overflow-y: scroll;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 16px;
  margin-top: 4px;
}

.cruise_form .bank {
  display: flex;
  gap: 10px;
}

.cruise_form .bank_name {
  width: 40%;
}
.cruise_form .bank_num {
  width: 60%;
}

.cruise_accept .accept_title {
  font-weight: 500;
}

.cruise_radio {
  display: flex;
  gap: 12px;
}

.cruise_radio .radio {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.cruise_radio .text {
  flex-shrink: 0;
}

.cruise_radio input[type="radio"] {
  accent-color: var(--main);
}

.cruise_btm {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

.cruise_btm .user {
  width: 35%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cruise_btm .user .text {
  flex-shrink: 0;
}

.cruise_btm .btns {
  width: 100%;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.cruise_form .accept_btm {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cruise_btm .btns button {
  width: 25%;
  border-radius: 8px;
  border: 1px solid var(--main);
  color: var(--main);
  font-size: 18px;
  padding: 8px 0;
  cursor: pointer;
}

.cruise_btm .btns button.active {
  background-color: var(--main);
  color: var(--white);
}

@media screen and (max-width: 767px) {
  .mobile_padding {
    padding: 0 20px;
  }
  .web_select {
    flex-direction: column;
  }

  .cruise_form .bank {
    display: flex;
    flex-direction: column;
  }

  .cruise_form .bank_name {
    width: 100%;
  }
  .cruise_form .bank_num {
    width: 100%;
  }
}

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

  .main-banner-slide {
    padding-bottom: 24px;
    overflow: hidden;
  }

  .cruise_btm .btns button {
    width: 40%;
  }

  .cruise_title {
    font-size: 18px;
  }
}

@media screen and (max-width: 360px) {
  .date_input {
    flex-wrap: wrap;
    gap: 4px;
  }
  .total_amount_b {
    flex-direction: column;
    align-items: flex-start;
  }
  .direct_link_list {
    grid-template-columns: repeat(1, 1fr);
  }
}