* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "noto_sans", sans-serif;
  color: var(--black);
}
body {
  margin: 0;
  padding: 0;
  background-color: var(--body_bg);
}
li {
  list-style: none;
}
a:link,
a:visited {
  text-decoration: none;
}
select,
input,
textarea,
button,
hr {
  border: none;
  outline: none;
}
select {
  appearance: none;
}
table {
  border-spacing: 0px;
  border-collapse: collapse;
  width: 100%;
  padding: 0;
  border: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #000;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* 색상 변수 설정 */
:root {
  --body_bg: #fff;
  --container_bg: #fff7cc;
  --header_bg: #fff;
  --card_bg: #fff;
  --bottom_tab_bg: #fff;
  --wrap_bg: #f9f9f9;
  --gradient: linear-gradient(-225deg, #2f9bcc, #50418c);
  --main_blue: #2f9bcc;
  --hr_bg: #ccc;

  /* color */
  --main: #ffdc00;
  --sub: #ffbc00;
  --black: #0a0b20;
  --white: #fff;
  --red: #f00;
  --red9: #900;
  --orange: #f80;
  --yellow: #ff0;
  --green: #0f0;
  --green9: #090;
  --blue: #00f;
  --blue9: #009;
  --blue8: #0e6f9c;
  --purple: #90f;
  --pink: #f0f;
  --graye: #eee;
  --grayd: #ddd;
  --grayc: #ccc;
  --grayb: #bbb;
  --graya: #aaa;
  --gray9: #999;
  --gray8: #888;
  --gray7: #777;
  --gray6: #666;
  --gray5: #555;
  --gray4: #444;
  --gray3: #333;

  /* item */
  --btn: #efefef;

  /* function */
  --warning: #bf0010;
  --confrim: #65f;
  --excel: #292;
  --active: #ff8800;
  --inactive: #ccc;
  --disabled: #999;

  /* bootstrap */

  /* background-color */
  --bg: #efefef;
  --bg2: #fafbfa;

  /* border color */
  --line: #f1f1f1;
  --line2: #fafafa;
  --line3: #fbfbfb;

  /* placeholder */
  --placeholder: rgba(34, 34, 34, 0.4);

  /* box-shadow */
  --shadow: 1px 2px 4px rgba(0, 0, 0, 0.08);
  --card-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
  --input-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
  --textarea-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
  --select-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);

  /* radius */
  --radius-box: 10px;
  --radius-card: 8px;
  --radius-btn: 8px;
  --radius-small-btn: 6px;
  --textarea-radius: 6px;
  --select-radius: 6px;

  /* border */
  --border: rgba(238, 192, 30, 0.5);
  --input-border: solid 1px #e6e6ea;
  --textarea-border: solid 1px #e6e6ea;
  --select-border: solid 1px #e6e6ea;
}

/*
  [z-index 정리]

  헤더 101
  하단탭 102

  팝업 1001

  로딩장 10001
*/

/* MONTSERRAT(영문) */
@font-face {
  font-family: "montserrat-italic";
  src: url("./font/Montserrat-LightItalic.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "montserrat";
  src: url("./font/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "montserrat";
  src: url("./font/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "montserrat";
  src: url("./font/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "montserrat";
  src: url("./font/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
}

/* NOTO SANS KR(한글) */
@font-face {
  font-family: "noto_sans";
  src: url("./font/NotoSansKR-Light.otf") format("opentype");
  font-weight: 300;
}
@font-face {
  font-family: "noto_sans";
  src: url("./font/NotoSansKR-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "noto_sans";
  src: url("./font/NotoSansKR-Medium.otf") format("opentype");
  font-weight: 500;
}
@font-face {
  font-family: "noto_sans";
  src: url("./font/NotoSansKR-Bold.otf") format("opentype");
  font-weight: 700;
}

/* wrap */
.wrap {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  background-color: var(--wrap_bg);
  position: relative;
}
.wrap.wide {
  max-width: 100%;
}

/* test */
#toggle {
  display: inline-flex;
  border-radius: 10px;
  padding: 2px;
  background-color: var(--main);
}
#toggle i {
  font-size: 18px;
  padding: 5px;
  background-color: var(--white);
  color: #fde675;
}
#light-mode {
  border-radius: 10px 0px 0px 10px;
}
#dark-mode {
  border-radius: 0px 10px 10px 0px;
}
#toggle input {
  display: none;
}
#toggle input[type="radio"]:checked + label > i {
  background-color: var(--main);
  color: var(--black);
  transition: all 0.3s ease-in-out;
}

/* header */
.header {
  width: 100%;
}
.header_common_safe_area {
  width: 100%;
  height: 50px;
}
.header_common_layout {
  width: 100%;
  max-width: 768px;
  height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background-color: var(--header_bg);
  z-index: 998;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header_logo {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header_logo img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  display: block;
  margin-right: 5px;
}
.header_title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header_title img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  display: block;
  margin-right: 5px;
}
.header_left {
  margin-right: auto;
}
.header_left img {
  display: block;
  width: 27px;
}
.hamburger .line {
  width: 25px;
  height: 2px;
  background-color: var(--sub);
  display: block;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hamburger:hover {
  cursor: pointer;
}

.header_left.back img {
  width: 12px;
}
.header_right {
  margin-left: auto;
}
.header_right img {
  display: block;
  width: 24px;
}
/* container */
.container {
  width: 100%;
  min-height: calc(100svh - 50px);
}
.container.no_footer {
  min-height: calc(100svh - 50px);
}
.container.footer {
  min-height: calc(100svh - 120px);
}
.container.no_header {
  min-height: calc(100svh - 70px);
}
.container.only_container {
  min-height: 100svh;
}

/* footer */
.footer {
  width: 100%;
}

/* Components CSS */

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

/* input */
input.design {
  width: 100%;
  padding: 12px 25px;
  box-shadow: var(--input-shadow);
  border: var(--input-border);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans KR", sans-serif;
}
input.design::placeholder {
  font-size: 16px;
  font-weight: 400;
  color: var(--placeholder);
}

input.design:read-only {
  background-color: var(--graye);
  color: var(--black) !important;
}
input.not_readonly:read-only {
  background-color: var(--white);
}

input.design:disabled {
  background-color: var(--graye);
}
input.not_disabled:disabled {
  background-color: var(--white);
}

/* 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: var(--line);
  cursor: pointer;
  position: relative;
}
label.checkbox .text {
  font-size: 14px;
  font-weight: 500;
}
label.checkbox input + .icon::after {
  content: "✓";
  display: block;
  font-size: 14px;
  font-weight: 700;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--grayc);
}
label.checkbox input:checked + .icon {
  background: var(--main);
}
label.checkbox input:checked + .icon::after {
  color: var(--black);
}
label.checkbox input:checked ~ .text {
  color: var(--black) !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;
  box-shadow: var(--select-shadow);
  border: var(--select-border);
  border-radius: var(--select-radius);
  background-color: var(--white);
  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: 50%;
  right: 10px;
  transform: translateY(-50%) rotate(45deg);
}

/* textarea */
textarea.design {
  width: 100%;
  padding: 12px 25px;
  box-shadow: var(--textarea-shadow);
  border: var(--textarea-border);
  border-radius: var(--select-radius);
  font-size: 16px;
  font-weight: 500;
  resize: none;
  font-family: "Noto Sans KR", sans-serif;
}
textarea.design::placeholder {
  font-size: 16px;
  font-weight: 400;
  color: var(--placeholder);
}

/* button */
button.design {
  width: 100%;
  height: 50px;
  background: var(--main);
  border-radius: var(--radius-btn);
  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: var(--warning);
  color: #fff;
}
button.design.gray {
  background-image: none;
  background-color: var(--gray9);
}
button.design.blue {
  background-image: none;
  background-color: var(--blue8);
}
button.design.white {
  background-image: none;
  background-color: var(--black);
}
button.design.black {
  background-image: none;
  background-color: var(--white);
}
button.design.small {
  width: auto;
  height: 50px;
  padding: 0 16px;
  font-size: 16px;
  border-radius: var(--radius-small-btn);
}
.link_btn {
  width: max-content;
  padding: 0 20px;
  height: 40px;
  background: var(--sub);
  border-radius: var(--radius-btn);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.btn {
  width: 100%;
  height: 50px;
  background: var(--main);
  border-radius: var(--radius-btn);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.btn.small {
  width: auto;
  height: 50px;
  padding: 0 16px;
  font-size: 16px;
  border-radius: var(--radius-small-btn);
}
.btn.disabled {
  border: solid 1px rgba(0, 0, 0, 0.05);
  background-color: #e6e6ea;
  color: #fff;
}
/* hr */
hr.design {
  border-top: 1px solid var(--hr_bg);
}

/* card */
.card {
  padding: 20px;
  background: var(--card_bg);
  border-radius: var(--radius-box);
}
.card.gradient {
  padding: 20px;
  background: var(--gradient);
  border-radius: var(--radius-box);
}

/* info_card */
.info_card {
  background: var(--card_bg);
  border-radius: var(--radius-box);
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
}
/* .info_card > div:first-child { padding:14px 20px;  } */
.responsive_330 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info_card .title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.info_card .title img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--grayc);
}
.info_card .amount {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 22px;
  font-weight: 700;
  font-family: "montserrat";
}
.info_card .desc {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.info_card.border_blue {
  background: var(--main);
}

.main_card_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background: rgba(255, 255, 255, 0.7);
  width: 100%;
  border-radius: 0 0 10px 10px;
}
.main_card_bottom li {
  width: 100%;
  height: 100%;
  border-right: 1px solid var(--main);
}
.main_card_bottom li:last-child {
  border: none;
}
.main_card_bottom li a {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: 500;
}

/* banner */
.coin_swiper,
.banner_swiper {
  width: 100%;
  height: 100%;
}
.banner_swiper li {
  width: 100%;
  height: 100%;
}
.banner_swiper li a {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.banner_swiper li a img {
  display: block;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 1;
  object-fit: contain;
}
.coin_swiper .swiper-pagination {
  bottom: 0px !important;
}
.coin_swiper .swiper-pagination-bullet {
  background: var(--grayc);
}
.coin_swiper .swiper-pagination-bullet-active {
  background: var(--sub);
}

/* 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 {
  position: relative;
  border-radius: var(--radius-box);
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
}
.direct_link_list .direct_txt {
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  color: var(--gray3);
}
.direct_link_list .direct_txt.color_white {
  color: var(--white);
}
.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;
  width: 50px;
  margin-left: auto;
}
.direct_link_list .direct_txt.font_14 {
  font-size: 14px;
}
/* page : qna */
.qna_tab {
  width: 100%;
  height: 62px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.qna_tab li {
  width: 100%;
  height: 100%;
  border-bottom: 2px solid var(--white);
}
.qna_tab li a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: 700;
  line-height: 60px;
  text-align: center;
}
.qna_tab .active {
  border-bottom-color: var(--main);
}
/* .qna_tab .active a{color:var(--main_blue);} */
.qna_list {
  width: 100%;
}
.qna_list li {
  background: var(--white);
  border-radius: var(--radius-box);
  margin-bottom: 10px;
}
.qna_list li:last-child {
  margin-bottom: 0;
}
.qna_list a {
  display: block;
  padding: 20px;
}
.qna_list .title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
}
.qna_list .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qna_list .info .state {
  font-size: 14px;
  font-weight: 500;
}
.qna_list .info .date {
  font-size: 14px;
  font-weight: 500;
}

.qna_view {
  width: 100%;
}
.qna_view li {
  background: var(--white);
  padding: 0 20px;
  border-radius: 10px 10px 0 0;
  margin-bottom: 10px;
}
.qna_view li:last-child {
  margin-bottom: 0;
}
.qna_view a {
  display: block;
  padding: 20px 0;
}
.qna_view .title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
}
.qna_view .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qna_view .info .state {
  font-size: 14px;
  font-weight: 500;
}
.qna_view .info .date {
  font-size: 14px;
  font-weight: 500;
}
.qna_view_top_txt {
  background: var(--white);
  padding: 20px;
  border-radius: 0 0 10px 10px;
  margin-bottom: 10px;
}
.qna_admin_answer {
  background: var(--white);
  padding: 20px;
  border-radius: 10px 10px 0 0;
}
/* send_card_list */
.send_card_list {
  width: 100%;
  padding: 16px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
  font-size: 14px;
  border-radius: var(--radius-box);
  background-color: var(--white);
}
.send_card_list .title {
  flex: none;
  font-weight: 700;
  color: var(--gray);
  word-break: break-all;
}
.send_card_list .desc {
  font-size: 14px;
  font-weight: 700;
  word-break: break-all;
}
.send_card_list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--grayd);
}
.send_card_list li:last-child {
  margin-bottom: 0;
  border: none;
  padding: 0;
}

/* text_card_list */
.text_card_list {
  width: 100%;
  padding: 16px;
  background-color: var(--white);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius-box);
}
.text_card_list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.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;
  color: #333;
  word-break: break-all;
}
.text_card_list .desc {
  font-size: 16px;
  font-weight: 700;
  word-break: break-all;
}

/* page : login */
.login_logo {
  padding: 10px 0 20px;
  font-size: 38px;
  font-weight: 700;
  text-align: center;
  font-family: "montserrat";
}

.login_bg {
  background: #fdeabf;
}
.login_title_img {
  width: 100px;
  height: 100px;
}
.login_title_txt {
  color: var(--sub);
  margin-bottom: 30px;
  font-size: 28px;
}
.design.login_join_btn {
  background: var(--white);
  border: 1px solid var(--sub);
  color: var(--sub);
}

/* page : register */
.argree_box {
  height: 90px;
  border: 1px solid var(--bg);
  background: var(--white);
  border-radius: var(--radius-box);
  font-size: 14px;
  padding: 10px;
  font-weight: 500;
  overflow-y: auto;
}

/* page : notice */
.notice_list {
  width: 100%;
  padding: 10px;
  background: var(--card_bg);
  border-radius: var(--radius-box);
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
}
.notice_list li {
  width: 100%;
  border-bottom: 1px solid var(--line);
}
.notice_list li:last-child {
  border: none;
}
.notice_list li a {
  width: 100%;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.notice_list li a .title {
  font-size: 16px;
  font-weight: 700;
}
.notice_list li a .date {
  font-size: 14px;
  font-weight: 500;
  flex: none;
}

/* exchange_list */
.exchange_list {
  width: 100%;
  overflow: hidden;
}
.exchange_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%);
}
.exchange_list li {
  position: relative;
  margin-bottom: 14px;
}
.exchange_list li:last-child {
  margin-bottom: 0px;
}
.exchange_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;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exchange_list_info .from {
  flex: none;
  width: calc(50% - 20px);
  padding: 0 10px;
}
.exchange_list_info .to {
  flex: none;
  width: calc(50% - 20px);
  padding: 0 10px;
}

.exchange_list_info .arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.exchange_list_info .img {
  width: 46px;
  height: 46px;
  padding: 6px;
  margin: auto;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.exchange_list_info .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.exchange_list_info .text {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.exchange_list_info.active {
  transform: translateX(-170px);
}

/* page : marketplace */
/* 230419 장터페이지 추가 작업 : 신정운 */
.giftcard_tab {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  justify-content: center;
}
.market_ul,
.marketplace_view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
}
.market_ul li,
.marketplace_view li {
  width: 24%;
}
.market_table ul {
  width: 100%;
}
.marker_border {
  position: relative;
  z-index: 999;
  border-top: 1px solid var(--line);
}
.giftcard_active {
  outline: 2px solid var(--main);
}
.giftcard_tab img {
  max-width: 100%;
}

.market_tablewrap {
  border-radius: 10px;
  border: 2px solid var(--line);
  overflow: hidden;
}
.market_table {
  text-align: center;
  font-size: 15px;
  transition: transform 0.3s;
  position: relative;
  border-bottom: none;
  width: 100%;
  word-break: break-all;
  overflow: hidden;
  z-index: 990;
}
.market_nohistory {
  width: 100%;
  height: calc(100vh - 400px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.marketplace_view {
  transition: transform 0.3s;
  z-index: 999;
  background-color: var(--card_bg);
}
.marketplace_view.active {
  transform: translateX(-100%);
}
.market_hight {
  height: 100%;
}

.type2 {
  border: 1px solid var(--line);
  margin: 20px 0;
}
.viewbtn button {
  width: 70px;
  height: 30px;
  font-size: 15px;
}
.total_marketbox {
  display: flex;
  align-items: flex-end;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: -1;
}
.total_listview {
  font-size: 15px;
  border-radius: 8px;
  width: 100%;
  padding: 10px;
}
.total_listview li {
  display: flex;
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  padding: 10px 0;
}
.total_listview li:first-child {
  padding-top: 0;
}
.total_listview li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.total_listview li p:nth-child(1) {
  width: 25%;
}
.total_listview li p:nth-child(2) {
  width: 24%;
  margin-left: auto;
}

.total_list_txt {
  width: max-content;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
}

.market_ul {
  background-color: var(--card_bg);
}
.market_ul .link_viewli,
.marketplace_view .link_viewli {
  width: 10%;
}
.market_ul li:nth-child(1),
.marketplace_view li:nth-child(1) {
  width: 12%;
}
.market_ul li:nth-child(3),
.marketplace_view li:nth-child(3) {
  width: 10%;
}
.market_ul li:nth-child(2),
.marketplace_view li:nth-child(2) {
  width: 65%;
}
.market_ul .link_viewli,
.marketplace_view .link_viewli {
  width: 5%;
}

.card_80 {
  color: #d7b629;
  font-weight: 700;
}
.card_120 {
  color: #7595cb;
  font-weight: 700;
}
.card_160 {
  color: #ad667c;
  font-weight: 700;
}
.card_180 {
  color: #66ad86;
  font-weight: 700;
}

.info_market {
  width: 100%;
  text-align: right;
  font-size: 16px;
  color: #ff0000;
  font-weight: 500;
}
.view_linkimg img {
  width: 30px;
  height: 30px;
  display: block;
}
.view_linkimg {
  cursor: pointer;
}

.market_info_txt {
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}
.market_info_txt img {
  display: block;
}

.market_list_view > button {
  background: var(--grayc);
  font-size: 16px;
  color: var(--white);
}
.market_list_view > button.active {
  background: var(--sub);
  font-size: 16px;
  color: var(--black);
}
/* page : withdraw */
.withdraw_tab {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.withdraw_tab li {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-radius: 6px;
  text-align: center;
  background-color: var(--gray3);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.withdraw_tab .active {
  background: var(--gradient);
}

.withdraw_panel li {
  display: none;
}
.withdraw_panel .active {
  display: block;
}

.table_wrap {
  overflow-x: auto;
  font-size: 14px;
  text-align: center;
  background-color: var(--white);
  border-radius: 6px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
}
.table_wrap table th {
  border-bottom: 1px solid var(--bg);
  padding: 14px 10px;
  white-space: nowrap;
}
.table_wrap table td {
  text-align: center;
  padding: 14px 10px;
  border-bottom: 1px solid var(--bg);
  white-space: nowrap;
}
.table_wrap table tr:last-child td {
  border-bottom: none;
}

/* page : purchase */
.purchase_tab {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.purchase_tab li {
  width: 100%;
  height: 52px;
  border-radius: 6px;
  background: var(--grayc);
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.purchase_tab .active {
  background: var(--main);
  color: var(--black);
}

/* swal */
.swal2-title {
  padding: 30px 20px 0 !important;
}
.swal2-container.swal2-center > .swal2-popup {
  padding-bottom: 0 !important;
  width: calc(100% - 20px) !important;
  max-width: 400px !important;
  min-height: 150px !important;
  max-height: 582px !important;
  background-color: var(--card_bg) !important;
}
.swal2-styled {
  width: 100% !important;
  border-radius: var(--radius-btn) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
.swal2-actions {
  min-height: 90px !important;
  padding: 0 20px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}
.swal2-html-container {
  margin: 0 !important;
}
.swal2-title {
  font-size: 22px !important;
}
.swal2-styled.swal2-confirm {
  background: var(--sub) !important;
  color: var(--black) !important;
  outline: none !important;
  border-radius: var(--radius-btn) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
.swal2-popup .swal2-styled:focus {
  box-shadow: none !important;
}
.title_sweet {
  min-height: 40px !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  font-family: "Noto Sans KR" !important;
}
.desc_sweet {
  min-height: 30px !important;
  padding: 0 20px !important;
  word-break: break-all !important;
  font-family: "Noto Sans KR", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  max-height: 156px !important;
  overflow: auto !important;
}
.sweet_cancel_btn {
  background: var(--graya) !important;
}
/* loading */
.loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--body_bg);
  z-index: 10001;
}
.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(--black);
}
@keyframes loading {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* keypad */
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
}
.keypad button {
  display: block;
  width: 100%;
  height: 78px;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  cursor: pointer;
}
.keypad a {
  display: block;
  width: 100%;
  height: 78px;
  border-radius: unset;
  padding: 0;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

/* pagination */
.pagination_wrap {
  width: 100%;
  max-width: 768px;
  padding: 28px 0;
  margin: 0 auto;
}
.pagination_item a {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--black);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}
.pagination_item.active a {
  background: var(--main);
  border-radius: 4px;
  font-family: "Montserrat", sans-serif;
  color: var(--black);
}
.pagination_list {
  display: flex;
  justify-content: center;
  width: 170px;
  margin: 0 auto;
  gap: 4px;
}
.pagination_list li.pagination_item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  color: var(--black);
  user-select: none;
  cursor: pointer;
}
.pagination_item:first-child,
.pagination_item:last-child {
  color: var(--black);
}

/* popup */
.popup_wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.5);
}
.pop_bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 8000;
  transition: all 300ms ease-in;
}
.pop_cont {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
  max-width: 400px;
  min-height: 300px;
  max-height: 582px;
  padding: 30px 20px 100px;
  background-color: var(--card_bg);
  border-radius: 8px;
  z-index: 9920;
}
.pop_title {
  font-weight: 700;
  text-align: center;
  padding-bottom: 20px;
  font-size: 18px;
  font-family: "Noto Sans KR", sans-serif;
  line-height: normal;
}
.popup_txt {
  color: var(--black);
  word-break: break-all;
  font-family: "Noto Sans KR", sans-serif;
  line-height: normal;
  font-size: 16px;
  font-weight: 400;
  max-height: 156px;
  overflow: auto;
}
.pop_btn {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}
.pop_btn p {
  display: block;
  width: 48%;
  padding: 13px;
  text-align: center;
  color: var(--black);
  font-size: 16px;
  background-color: transparent;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}
.pop_btn p.allday_none_btn {
  background-color: var(--graya);
  color: var(--white);
}
.pop_btn p:nth-child(2) {
  background-color: var(--sub);
  color: var(--black);
}

/* bottom_tab */
.bottom_tab_safe_area {
  width: 100%;
  height: 70px;
}
.bottom_tab {
  width: 100%;
  max-width: 768px;
  height: 70px;
  border-top: 1px solid var(--border);
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  background-color: var(--bottom_tab_bg);
}
.bottom_tab ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom_tab ul li {
  width: 100%;
  height: 100%;
}
.bottom_tab ul li a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--gray8);
}
.bottom_tab ul li a img {
  width: 30px;
  height: 30px;
}
.bottom_tab ul .active a {
  color: var(--sub);
}

/* withdrawal */
.point_box {
  padding: 30px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background-color: var(--sub);
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

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

/* market table 수정작업 : NBR */
.market_table_box {
  padding: 6px 20px;
  background-color: var(--card_bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.market_tablewrap > p {
  background: var(--card_bg);
}
.marketplace_view {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.marketplace_list.active > div:first-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.marketplace_view .first,
.market_table_box .first {
  min-width: 20px;
  text-align: center;
}
.marketplace_view .center,
.market_table_box .center {
  min-width: 100px;
  width: 100%;
  text-align: center;
}
.marketplace_view .last,
.market_table_box .last {
  max-width: 110px;
  width: 100%;
  text-align: center;
}
.market_tablewrap.bg {
  background-color: var(--black);
}
.marketplace_list {
  margin-bottom: 1px;
  position: relative;
  bottom: 0;
  border: none;
  box-shadow: none;
  width: 100%;
  height: 40px;
  line-height: 42px;
  -webkit-perspective: 230px;
  perspective: 230px;
}
.marketplace_list:last-child {
  margin: 0;
}
.marketplace_list > div {
  padding: 0 20px;
  background: var(--card_bg);
  position: absolute;
  width: 100%;
  height: 40px;
  margin: 0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.marketplace_list > div:nth-child(1) {
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.marketplace_list > div:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.marketplace_list.active > div:nth-child(1) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.marketplace_list.active > div:nth-child(2) {
  opacity: 0;
  color: transparent;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
/*
.marketplace_list > div { padding: 0 20px; background: rgb(0,172,238); background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); position: absolute; width: 100%; height: 40px; box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); border-radius: 5px; margin:0; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; }
.marketplace_list > div:nth-child(1) { box-shadow: -7px -7px 20px 0px var(--black)9, -4px -4px 5px 0px var(--black)9, 7px 7px 20px 0px var(--white)2, 4px 4px 5px 0px var(--white)1; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 50% -20px; -moz-transform-origin: 50% 50% -20px; transform-origin: 50% 50% -20px; }
.marketplace_list > div:nth-child(2) { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: 50% 50% -20px; -moz-transform-origin: 50% 50% -20px; transform-origin: 50% 50% -20px; }
.marketplace_list.active > div:nth-child(1) { box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); }
.marketplace_list.active > div:nth-child(2) { opacity: 0; box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); color: transparent; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); } */
.marketplace_list button {
  width: 70px;
  height: 30px;
  font-size: 15px;
}

/* 23.05.04 sidebar - NJH */
.dark_bg {
  display: none;
  position: fixed;
  width: 100%;
  max-width: 768px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.dark_bg.active {
  display: block;
  z-index: 1100;
}
.sidebar_cont {
  position: absolute;
  left: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 100% !important;
  max-height: 100%;
  background-color: var(--container_bg);
  color: var(--black);
  z-index: -1;
  opacity: 0;
  transition: 200ms ease;
  overflow-y: auto !important;
}
.sidebar_cont.active {
  left: 0;
  opacity: 1;
  z-index: 1200;
  transition: 200ms ease;
}
.sidebar_inner {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  padding: 20px;
}
.my_info {
  padding: 20px;
  border-radius: 10px;
  background-color: var(--blue8);
}
.home_btn {
  padding: 15px 20px;
}
.sidebar_menu > li {
  border-radius: 10px;
}
.sidebar_menu > li.active {
  background-color: var(--border);
}
.sidebar_menu_tit {
  padding: 15px 20px;
}
.sub_menu {
  display: none;
}
.sub_menu > li > a {
  padding: 10px 20px 12px 22px;
  color: var(--black);
}
.sidebar_cont {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sidebar_cont::-webkit-scrollbar {
  display: none;
}

/* 추천하기 */
.bg_referral {
  background: #fdeabf;
}
.referral_tit {
  padding: 30px 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_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: var(--white);
  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: var(--white);
}
.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: var(--white);
  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: var(--lightgray);
  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: var(--lightgray);
  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: var(--white);
}
footer.referral_receive_footer {
  padding-bottom: 120px;
  background-color: #f4f4f4;
}
.referral_receive_info {
  background-color: var(--lightgray);
  padding: 20px;
  font-size: 14px;
}
.referral_receive_info p:nth-of-type(1) {
  display: flex;
  align-items: center;
  gap: 5px;
}

/*#################### Atomic CSS ####################*/

/* display */
.d_none {
  display: none;
}
.d_block {
  display: block;
}
.d_inline {
  display: inline;
}
.d_flex {
  display: flex;
}
.d_grid {
  display: grid;
}
.d_table {
  display: table;
}
.d_contents {
  display: contents;
}
.d_flow_root {
  display: flow-root;
}
.d_inline_block {
  display: inline-block;
}
.d_inline_flex {
  display: inline-flex;
}
.d_inline_grid {
  display: inline-grid;
}
.d_inline_table {
  display: inline-table;
}
.d_list_item {
  display: list-item;
}

/* border */
.border_bottom {
  border-bottom: 1px solid var(--line);
}

/* flex */
.flex_none {
  flex: none;
}
.flex_1 {
  flex: 1;
}
.flex_start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flex_end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.flex_between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex_evenly {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex_center_col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flex_end_between {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.flex_end_center {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* flex-direction */
.flex_dir_col {
  flex-direction: column;
}

/* gap */
.gap10 {
  gap: 10px;
}
.gap20 {
  gap: 20px;
}
.gap30 {
  gap: 30px;
}

/* grid */

/* text truncation*/

/* stretched link */
.extend_link::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/* position */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.absolute_center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.absolute_right_center {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.absolute_left_center {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* cursor */
.pointer {
  cursor: pointer;
}

/* text-align */
.text_center {
  text-align: center;
}
.text_right {
  text-align: right;
}

/* text-highlight */
.text_highlight {
  background: linear-gradient(to top, #999 50%, transparent 50%);
  font-weight: 700;
}

/* color */
.color_red {
  color: var(--red);
}
.color_green {
  color: var(--green9);
}
.color_blue {
  color: var(--blue);
}
.color_white {
  color: #fff;
}

.text_red {
  color: var(--red);
}
.text_green {
  color: var(--green9);
}
.text_blue {
  color: var(--blue);
}
.text_gray {
  color: var(--gray5);
}
.color_main {
  color: var(--main);
}

/* background-color */
.bg_red {
  background-color: var(--red);
}
.bg_main {
  background-color: var(--main);
}
.bg_sub {
  background-color: var(--sub);
}
.bg_tq {
  background-color: #1162f8;
}
.bg_white {
  background-color: #fff;
}

/* border */
.border1 {
  border: 1px solid var(--border);
}
.border2 {
  border: 2px solid var(--border);
}
.border3 {
  border: 3px solid var(--border);
}
.border4 {
  border: 4px solid var(--border);
}
.border5 {
  border: 5px solid var(--border);
}
.border6 {
  border: 6px solid var(--border);
}
.border7 {
  border: 7px solid var(--border);
}
.border8 {
  border: 8px solid var(--border);
}
.border9 {
  border: 9px solid var(--border);
}
.border10 {
  border: 10px solid var(--border);
}

/* border-style */
.border_dash {
  border-style: dashed;
}
.border_dot {
  border-style: dotted;
}
.border_double {
  border-style: double;
}
.border_groove {
  border-style: groove;
}

/* border-radius */
.r50 {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.r1 {
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;
}
.r2 {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.r3 {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.r4 {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.r5 {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.r6 {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.r7 {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}
.r8 {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.r9 {
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}
.r10 {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* object-position */
.object_center {
  object-position: center;
}

/* object-fit */
.object_cover {
  object-fit: cover;
}
.object_contain {
  object-fit: contain;
}

/* width */
.w_100 {
  width: 100%;
}
.w_50 {
  width: 50%;
}
.w_49 {
  width: 49%;
}
.w_33 {
  width: 33%;
}
.w_25 {
  width: 25%;
}
.w_10 {
  width: 10%;
}

.w_30px {
  width: 30px;
}
.w_32px {
  width: 32px;
}
.w_34px {
  width: 34px;
}
.w_36px {
  width: 36px;
}

/* height */
.svh_100 {
  height: 100svh;
}
.m_svh_100 {
  min-height: 100svh;
}

/* aspect-ratio */
.ratio_1x1 {
  aspect-ratio: 1/1;
}
.ratio_4x3 {
  aspect-ratio: 4/3;
}
.ratio_3x4 {
  aspect-ratio: 3/4;
}
.ratio_16x9 {
  aspect-ratio: 16/9;
}
.ratio_16x10 {
  aspect-ratio: 16/10;
}
.ratio_golden {
  aspect-ratio: 1/1.618;
}
.ratio_golden2 {
  aspect-ratio: 1.618/1;
}

/* rotate */
.rotate45 {
  rotate: 45deg;
}
.rotate90 {
  rotate: 90deg;
}
.rotate180 {
  rotate: 180deg;
}
.rotate_45 {
  rotate: -45deg;
}
.rotate_90 {
  rotate: -90deg;
}
.rotate_180 {
  rotate: -180deg;
}

/* animation */

/* transition */
.transition_all {
  transition: all;
}

/* filter */
.blur1 {
  filter: blur(1px);
}
.blur2 {
  filter: blur(2px);
}
.blur3 {
  filter: blur(3px);
}
.blur4 {
  filter: blur(4px);
}
.blur5 {
  filter: blur(5px);
}
.blur6 {
  filter: blur(6px);
}
.blur7 {
  filter: blur(7px);
}
.blur8 {
  filter: blur(8px);
}
.blur9 {
  filter: blur(9px);
}
.blur10 {
  filter: blur(10px);
}

/* overflow */
.hidden {
  overflow: hidden;
}
.hidden_x {
  overflow-x: hidden;
}
.hidden_y {
  overflow-y: hidden;
}

/* opacity*/
.opcity0 {
  opacity: 0;
}
.opcity_1 {
  opacity: 0.1;
}
.opcity_2 {
  opacity: 0.2;
}
.opcity_3 {
  opacity: 0.3;
}
.opcity_4 {
  opacity: 0.4;
}
.opcity_5 {
  opacity: 0.5;
}
.opcity_6 {
  opacity: 0.6;
}
.opcity_7 {
  opacity: 0.7;
}
.opcity_8 {
  opacity: 0.8;
}
.opcity_9 {
  opacity: 0.9;
}
.opcity1 {
  opacity: 1;
}

/* user-select */
.user_select_none {
  user-select: none;
}
.user_select_all {
  user-select: all;
}
.user_select_text {
  user-select: text;
}
.user_select_contain {
  user-select: contain;
}

/* box-shadow */
.shadow {
  box-shadow: var(--shadow);
}

/* word-break */
.keep_all {
  word-break: keep-all;
}
.break_all {
  word-break: break-all;
}

/* text-transform */
.capitalize {
  text-transform: capitalize;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}

/* font-size */
.font10 {
  font-size: 10px;
}
.font11 {
  font-size: 11px;
}
.font12 {
  font-size: 12px;
}
.font13 {
  font-size: 13px;
}
.font14 {
  font-size: 14px;
}
.font15 {
  font-size: 15px;
}
.font16 {
  font-size: 16px;
}
.font17 {
  font-size: 17px;
}
.font18 {
  font-size: 18px;
}
.font19 {
  font-size: 19px;
}
.font20 {
  font-size: 20px;
}
.font21 {
  font-size: 21px;
}
.font22 {
  font-size: 22px;
}
.font23 {
  font-size: 23px;
}
.font24 {
  font-size: 24px;
}
.font25 {
  font-size: 25px;
}
.font26 {
  font-size: 26px;
}
.font27 {
  font-size: 27px;
}
.font28 {
  font-size: 28px;
}
.font29 {
  font-size: 29px;
}
.font30 {
  font-size: 30px;
}
.font31 {
  font-size: 31px;
}
.font32 {
  font-size: 32px;
}
.font33 {
  font-size: 33px;
}
.font34 {
  font-size: 34px;
}
.font35 {
  font-size: 35px;
}
.font36 {
  font-size: 36px;
}
.font37 {
  font-size: 37px;
}
.font38 {
  font-size: 38px;
}
.font39 {
  font-size: 39px;
}

/* font-weight */
.regular {
  font-weight: 400;
}
.medium {
  font-weight: 500;
}
.semi_bold {
  font-weight: 600;
}
.bold {
  font-weight: 700;
}

/* font-style */
.font_italic {
  font-style: italic;
}

/* font-family */
.kor {
  font-family: "noto_sans";
}
.eng {
  font-family: "montserrat";
}

/* text-decoration */
.text_underline {
  text-decoration: underline;
}

/* vertical-align */
.vertical_middle {
  vertical-align: middle;
}

/* z-index */

/* 1번대 일반적인 순서 자유롭게 사용 */
.z1 {
  z-index: 1;
}
.z2 {
  z-index: 2;
}
.z3 {
  z-index: 3;
}
.z4 {
  z-index: 4;
}
.z5 {
  z-index: 5;
}
.z6 {
  z-index: 6;
}
.z7 {
  z-index: 7;
}
.z8 {
  z-index: 8;
}
.z9 {
  z-index: 9;
}

/* 100번대 */
.z100 {
  z-index: 100;
} /* 헤더 */

/* 1000번대 */
.z1000 {
  z-index: 100;
} /* 팝업 */

/* 10000번대 */
.z10000 {
  z-index: 100;
} /* 로딩창 */

/* margin */
.m_auto {
  margin-left: auto;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
}
.ml_auto {
  margin-left: auto;
}
.mr_auto {
  margin-right: auto;
}
.mt_auto {
  margin-top: auto;
}
.mb_auto {
  margin-bottom: auto;
}

.m1 {
  margin-left: 1px;
  margin-top: 1px;
  margin-right: 1px;
  margin-bottom: 1px;
}
.m2 {
  margin-left: 2px;
  margin-top: 2px;
  margin-right: 2px;
  margin-bottom: 2px;
}
.m3 {
  margin-left: 3px;
  margin-top: 3px;
  margin-right: 3px;
  margin-bottom: 3px;
}
.m4 {
  margin-left: 4px;
  margin-top: 4px;
  margin-right: 4px;
  margin-bottom: 4px;
}
.m5 {
  margin-left: 5px;
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}
.m6 {
  margin-left: 6px;
  margin-top: 6px;
  margin-right: 6px;
  margin-bottom: 6px;
}
.m7 {
  margin-left: 7px;
  margin-top: 7px;
  margin-right: 7px;
  margin-bottom: 7px;
}
.m8 {
  margin-left: 8px;
  margin-top: 8px;
  margin-right: 8px;
  margin-bottom: 8px;
}
.m9 {
  margin-left: 9px;
  margin-top: 9px;
  margin-right: 9px;
  margin-bottom: 9px;
}
.m10 {
  margin-left: 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.m11 {
  margin-left: 11px;
  margin-top: 11px;
  margin-right: 11px;
  margin-bottom: 11px;
}
.m12 {
  margin-left: 12px;
  margin-top: 12px;
  margin-right: 12px;
  margin-bottom: 12px;
}
.m13 {
  margin-left: 13px;
  margin-top: 13px;
  margin-right: 13px;
  margin-bottom: 13px;
}
.m14 {
  margin-left: 14px;
  margin-top: 14px;
  margin-right: 14px;
  margin-bottom: 14px;
}
.m15 {
  margin-left: 15px;
  margin-top: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
}
.m16 {
  margin-left: 16px;
  margin-top: 16px;
  margin-right: 16px;
  margin-bottom: 16px;
}
.m17 {
  margin-left: 17px;
  margin-top: 17px;
  margin-right: 17px;
  margin-bottom: 17px;
}
.m18 {
  margin-left: 18px;
  margin-top: 18px;
  margin-right: 18px;
  margin-bottom: 18px;
}
.m19 {
  margin-left: 19px;
  margin-top: 19px;
  margin-right: 19px;
  margin-bottom: 19px;
}
.m20 {
  margin-left: 20px;
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.m21 {
  margin-left: 21px;
  margin-top: 21px;
  margin-right: 21px;
  margin-bottom: 21px;
}
.m22 {
  margin-left: 22px;
  margin-top: 22px;
  margin-right: 22px;
  margin-bottom: 22px;
}
.m23 {
  margin-left: 23px;
  margin-top: 23px;
  margin-right: 23px;
  margin-bottom: 23px;
}
.m24 {
  margin-left: 24px;
  margin-top: 24px;
  margin-right: 24px;
  margin-bottom: 24px;
}
.m25 {
  margin-left: 25px;
  margin-top: 25px;
  margin-right: 25px;
  margin-bottom: 25px;
}
.m26 {
  margin-left: 26px;
  margin-top: 26px;
  margin-right: 26px;
  margin-bottom: 26px;
}
.m27 {
  margin-left: 27px;
  margin-top: 27px;
  margin-right: 27px;
  margin-bottom: 27px;
}
.m28 {
  margin-left: 28px;
  margin-top: 28px;
  margin-right: 28px;
  margin-bottom: 28px;
}
.m29 {
  margin-left: 29px;
  margin-top: 29px;
  margin-right: 29px;
  margin-bottom: 29px;
}
.m30 {
  margin-left: 30px;
  margin-top: 30px;
  margin-right: 30px;
  margin-bottom: 30px;
}
.m31 {
  margin-left: 31px;
  margin-top: 31px;
  margin-right: 31px;
  margin-bottom: 31px;
}
.m32 {
  margin-left: 32px;
  margin-top: 32px;
  margin-right: 32px;
  margin-bottom: 32px;
}
.m33 {
  margin-left: 33px;
  margin-top: 33px;
  margin-right: 33px;
  margin-bottom: 33px;
}
.m34 {
  margin-left: 34px;
  margin-top: 34px;
  margin-right: 34px;
  margin-bottom: 34px;
}
.m35 {
  margin-left: 35px;
  margin-top: 35px;
  margin-right: 35px;
  margin-bottom: 35px;
}
.m36 {
  margin-left: 36px;
  margin-top: 36px;
  margin-right: 36px;
  margin-bottom: 36px;
}
.m37 {
  margin-left: 37px;
  margin-top: 37px;
  margin-right: 37px;
  margin-bottom: 37px;
}
.m38 {
  margin-left: 38px;
  margin-top: 38px;
  margin-right: 38px;
  margin-bottom: 38px;
}
.m39 {
  margin-left: 39px;
  margin-top: 39px;
  margin-right: 39px;
  margin-bottom: 39px;
}
.m40 {
  margin-left: 40px;
  margin-top: 40px;
  margin-right: 40px;
  margin-bottom: 40px;
}

.mx1 {
  margin-left: 1px;
  margin-right: 1px;
}
.mx2 {
  margin-left: 2px;
  margin-right: 2px;
}
.mx3 {
  margin-left: 3px;
  margin-right: 3px;
}
.mx4 {
  margin-left: 4px;
  margin-right: 4px;
}
.mx5 {
  margin-left: 5px;
  margin-right: 5px;
}
.mx6 {
  margin-left: 6px;
  margin-right: 6px;
}
.mx7 {
  margin-left: 7px;
  margin-right: 7px;
}
.mx8 {
  margin-left: 8px;
  margin-right: 8px;
}
.mx9 {
  margin-left: 9px;
  margin-right: 9px;
}
.mx10 {
  margin-left: 10px;
  margin-right: 10px;
}
.mx20 {
  margin-left: 20px;
  margin-right: 20px;
}
.mx30 {
  margin-left: 30px;
  margin-right: 30px;
}

.my1 {
  margin-top: 1px;
  margin-bottom: 1px;
}
.my2 {
  margin-top: 2px;
  margin-bottom: 2px;
}
.my3 {
  margin-top: 3px;
  margin-bottom: 3px;
}
.my4 {
  margin-top: 4px;
  margin-bottom: 4px;
}
.my5 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.my6 {
  margin-top: 6px;
  margin-bottom: 6px;
}
.my7 {
  margin-top: 7px;
  margin-bottom: 7px;
}
.my8 {
  margin-top: 8px;
  margin-bottom: 8px;
}
.my9 {
  margin-top: 9px;
  margin-bottom: 9px;
}
.my10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.my20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.my30 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.ml1 {
  margin-left: 1px;
}
.ml2 {
  margin-left: 2px;
}
.ml3 {
  margin-left: 3px;
}
.ml4 {
  margin-left: 4px;
}
.ml5 {
  margin-left: 5px;
}
.ml6 {
  margin-left: 6px;
}
.ml7 {
  margin-left: 7px;
}
.ml8 {
  margin-left: 8px;
}
.ml9 {
  margin-left: 9px;
}
.ml10 {
  margin-left: 10px;
}
.ml11 {
  margin-left: 11px;
}
.ml12 {
  margin-left: 12px;
}
.ml13 {
  margin-left: 13px;
}
.ml14 {
  margin-left: 14px;
}
.ml15 {
  margin-left: 15px;
}
.ml16 {
  margin-left: 16px;
}
.ml17 {
  margin-left: 17px;
}
.ml18 {
  margin-left: 18px;
}
.ml19 {
  margin-left: 19px;
}
.ml20 {
  margin-left: 20px;
}
.ml21 {
  margin-left: 21px;
}
.ml22 {
  margin-left: 22px;
}
.ml23 {
  margin-left: 23px;
}
.ml24 {
  margin-left: 24px;
}
.ml25 {
  margin-left: 25px;
}
.ml26 {
  margin-left: 26px;
}
.ml27 {
  margin-left: 27px;
}
.ml28 {
  margin-left: 28px;
}
.ml29 {
  margin-left: 29px;
}
.ml30 {
  margin-left: 30px;
}
.ml31 {
  margin-left: 31px;
}
.ml32 {
  margin-left: 32px;
}
.ml33 {
  margin-left: 33px;
}
.ml34 {
  margin-left: 34px;
}
.ml35 {
  margin-left: 35px;
}
.ml36 {
  margin-left: 36px;
}
.ml37 {
  margin-left: 37px;
}
.ml38 {
  margin-left: 38px;
}
.ml39 {
  margin-left: 39px;
}
.ml40 {
  margin-left: 40px;
}

.mr1 {
  margin-right: 1px;
}
.mr2 {
  margin-right: 2px;
}
.mr3 {
  margin-right: 3px;
}
.mr4 {
  margin-right: 4px;
}
.mr5 {
  margin-right: 5px;
}
.mr6 {
  margin-right: 6px;
}
.mr7 {
  margin-right: 7px;
}
.mr8 {
  margin-right: 8px;
}
.mr9 {
  margin-right: 9px;
}
.mr10 {
  margin-right: 10px;
}
.mr11 {
  margin-right: 11px;
}
.mr12 {
  margin-right: 12px;
}
.mr13 {
  margin-right: 13px;
}
.mr14 {
  margin-right: 14px;
}
.mr15 {
  margin-right: 15px;
}
.mr16 {
  margin-right: 16px;
}
.mr17 {
  margin-right: 17px;
}
.mr18 {
  margin-right: 18px;
}
.mr19 {
  margin-right: 19px;
}
.mr20 {
  margin-right: 20px;
}
.mr21 {
  margin-right: 21px;
}
.mr22 {
  margin-right: 22px;
}
.mr23 {
  margin-right: 23px;
}
.mr24 {
  margin-right: 24px;
}
.mr25 {
  margin-right: 25px;
}
.mr26 {
  margin-right: 26px;
}
.mr27 {
  margin-right: 27px;
}
.mr28 {
  margin-right: 28px;
}
.mr29 {
  margin-right: 29px;
}
.mr30 {
  margin-right: 30px;
}
.mr31 {
  margin-right: 31px;
}
.mr32 {
  margin-right: 32px;
}
.mr33 {
  margin-right: 33px;
}
.mr34 {
  margin-right: 34px;
}
.mr35 {
  margin-right: 35px;
}
.mr36 {
  margin-right: 36px;
}
.mr37 {
  margin-right: 37px;
}
.mr38 {
  margin-right: 38px;
}
.mr39 {
  margin-right: 39px;
}
.mr40 {
  margin-right: 40px;
}

.mt1 {
  margin-top: 1px;
}
.mt2 {
  margin-top: 2px;
}
.mt3 {
  margin-top: 3px;
}
.mt4 {
  margin-top: 4px;
}
.mt5 {
  margin-top: 5px;
}
.mt6 {
  margin-top: 6px;
}
.mt7 {
  margin-top: 7px;
}
.mt8 {
  margin-top: 8px;
}
.mt9 {
  margin-top: 9px;
}
.mt10 {
  margin-top: 10px;
}
.mt11 {
  margin-top: 11px;
}
.mt12 {
  margin-top: 12px;
}
.mt13 {
  margin-top: 13px;
}
.mt14 {
  margin-top: 14px;
}
.mt15 {
  margin-top: 15px;
}
.mt16 {
  margin-top: 16px;
}
.mt17 {
  margin-top: 17px;
}
.mt18 {
  margin-top: 18px;
}
.mt19 {
  margin-top: 19px;
}
.mt20 {
  margin-top: 20px;
}
.mt21 {
  margin-top: 21px;
}
.mt22 {
  margin-top: 22px;
}
.mt23 {
  margin-top: 23px;
}
.mt24 {
  margin-top: 24px;
}
.mt25 {
  margin-top: 25px;
}
.mt26 {
  margin-top: 26px;
}
.mt27 {
  margin-top: 27px;
}
.mt28 {
  margin-top: 28px;
}
.mt29 {
  margin-top: 29px;
}
.mt30 {
  margin-top: 30px;
}
.mt31 {
  margin-top: 31px;
}
.mt32 {
  margin-top: 32px;
}
.mt33 {
  margin-top: 33px;
}
.mt34 {
  margin-top: 34px;
}
.mt35 {
  margin-top: 35px;
}
.mt36 {
  margin-top: 36px;
}
.mt37 {
  margin-top: 37px;
}
.mt38 {
  margin-top: 38px;
}
.mt39 {
  margin-top: 39px;
}
.mt40 {
  margin-top: 40px;
}

.mb1 {
  margin-bottom: 1px;
}
.mb2 {
  margin-bottom: 2px;
}
.mb3 {
  margin-bottom: 3px;
}
.mb4 {
  margin-bottom: 4px;
}
.mb5 {
  margin-bottom: 5px;
}
.mb6 {
  margin-bottom: 6px;
}
.mb7 {
  margin-bottom: 7px;
}
.mb8 {
  margin-bottom: 8px;
}
.mb9 {
  margin-bottom: 9px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb11 {
  margin-bottom: 11px;
}
.mb12 {
  margin-bottom: 12px;
}
.mb13 {
  margin-bottom: 13px;
}
.mb14 {
  margin-bottom: 14px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb16 {
  margin-bottom: 16px;
}
.mb17 {
  margin-bottom: 17px;
}
.mb18 {
  margin-bottom: 18px;
}
.mb19 {
  margin-bottom: 19px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb21 {
  margin-bottom: 21px;
}
.mb22 {
  margin-bottom: 22px;
}
.mb23 {
  margin-bottom: 23px;
}
.mb24 {
  margin-bottom: 24px;
}
.mb25 {
  margin-bottom: 25px;
}
.mb26 {
  margin-bottom: 26px;
}
.mb27 {
  margin-bottom: 27px;
}
.mb28 {
  margin-bottom: 28px;
}
.mb29 {
  margin-bottom: 29px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb31 {
  margin-bottom: 31px;
}
.mb32 {
  margin-bottom: 32px;
}
.mb33 {
  margin-bottom: 33px;
}
.mb34 {
  margin-bottom: 34px;
}
.mb35 {
  margin-bottom: 35px;
}
.mb36 {
  margin-bottom: 36px;
}
.mb37 {
  margin-bottom: 37px;
}
.mb38 {
  margin-bottom: 38px;
}
.mb39 {
  margin-bottom: 39px;
}
.mb40 {
  margin-bottom: 40px;
}

/* padding */
.p1 {
  padding-left: 1px;
  padding-top: 1px;
  padding-right: 1px;
  padding-bottom: 1px;
}
.p2 {
  padding-left: 2px;
  padding-top: 2px;
  padding-right: 2px;
  padding-bottom: 2px;
}
.p3 {
  padding-left: 3px;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
}
.p4 {
  padding-left: 4px;
  padding-top: 4px;
  padding-right: 4px;
  padding-bottom: 4px;
}
.p5 {
  padding-left: 5px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
}
.p6 {
  padding-left: 6px;
  padding-top: 6px;
  padding-right: 6px;
  padding-bottom: 6px;
}
.p7 {
  padding-left: 7px;
  padding-top: 7px;
  padding-right: 7px;
  padding-bottom: 7px;
}
.p8 {
  padding-left: 8px;
  padding-top: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
}
.p9 {
  padding-left: 9px;
  padding-top: 9px;
  padding-right: 9px;
  padding-bottom: 9px;
}
.p10 {
  padding-left: 10px;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.p11 {
  padding-left: 11px;
  padding-top: 11px;
  padding-right: 11px;
  padding-bottom: 11px;
}
.p12 {
  padding-left: 12px;
  padding-top: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
}
.p13 {
  padding-left: 13px;
  padding-top: 13px;
  padding-right: 13px;
  padding-bottom: 13px;
}
.p14 {
  padding-left: 14px;
  padding-top: 14px;
  padding-right: 14px;
  padding-bottom: 14px;
}
.p15 {
  padding-left: 15px;
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
}
.p16 {
  padding-left: 16px;
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
}
.p17 {
  padding-left: 17px;
  padding-top: 17px;
  padding-right: 17px;
  padding-bottom: 17px;
}
.p18 {
  padding-left: 18px;
  padding-top: 18px;
  padding-right: 18px;
  padding-bottom: 18px;
}
.p19 {
  padding-left: 19px;
  padding-top: 19px;
  padding-right: 19px;
  padding-bottom: 19px;
}
.p20 {
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}
.p21 {
  padding-left: 21px;
  padding-top: 21px;
  padding-right: 21px;
  padding-bottom: 2px;
}
.p22 {
  padding-left: 22px;
  padding-top: 22px;
  padding-right: 22px;
  padding-bottom: 2px;
}
.p23 {
  padding-left: 23px;
  padding-top: 23px;
  padding-right: 23px;
  padding-bottom: 2px;
}
.p24 {
  padding-left: 24px;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 21px;
}
.p25 {
  padding-left: 25px;
  padding-top: 25px;
  padding-right: 25px;
  padding-bottom: 2px;
}
.p26 {
  padding-left: 26px;
  padding-top: 26px;
  padding-right: 26px;
  padding-bottom: 2px;
}
.p27 {
  padding-left: 27px;
  padding-top: 27px;
  padding-right: 27px;
  padding-bottom: 2px;
}
.p28 {
  padding-left: 28px;
  padding-top: 28px;
  padding-right: 28px;
  padding-bottom: 2px;
}
.p29 {
  padding-left: 29px;
  padding-top: 29px;
  padding-right: 29px;
  padding-bottom: 2px;
}
.p30 {
  padding-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
}
.p31 {
  padding-left: 31px;
  padding-top: 31px;
  padding-right: 31px;
  padding-bottom: 31px;
}
.p32 {
  padding-left: 32px;
  padding-top: 32px;
  padding-right: 32px;
  padding-bottom: 32px;
}
.p33 {
  padding-left: 33px;
  padding-top: 33px;
  padding-right: 33px;
  padding-bottom: 33px;
}
.p34 {
  padding-left: 34px;
  padding-top: 34px;
  padding-right: 34px;
  padding-bottom: 34px;
}
.p35 {
  padding-left: 35px;
  padding-top: 35px;
  padding-right: 35px;
  padding-bottom: 35px;
}
.p36 {
  padding-left: 36px;
  padding-top: 36px;
  padding-right: 36px;
  padding-bottom: 36px;
}
.p37 {
  padding-left: 37px;
  padding-top: 37px;
  padding-right: 37px;
  padding-bottom: 37px;
}
.p38 {
  padding-left: 38px;
  padding-top: 38px;
  padding-right: 38px;
  padding-bottom: 38px;
}
.p39 {
  padding-left: 39px;
  padding-top: 39px;
  padding-right: 39px;
  padding-bottom: 39px;
}
.p40 {
  padding-left: 40px;
  padding-top: 40px;
  padding-right: 40px;
  padding-bottom: 40px;
}

.px1 {
  padding-left: 1px;
  padding-right: 1px;
}
.px2 {
  padding-left: 2px;
  padding-right: 2px;
}
.px3 {
  padding-left: 3px;
  padding-right: 3px;
}
.px4 {
  padding-left: 4px;
  padding-right: 4px;
}
.px5 {
  padding-left: 5px;
  padding-right: 5px;
}
.px6 {
  padding-left: 6px;
  padding-right: 6px;
}
.px7 {
  padding-left: 7px;
  padding-right: 7px;
}
.px8 {
  padding-left: 8px;
  padding-right: 8px;
}
.px9 {
  padding-left: 9px;
  padding-right: 9px;
}
.px10 {
  padding-left: 10px;
  padding-right: 10px;
}
.px20 {
  padding-left: 20px;
  padding-right: 20px;
}
.px30 {
  padding-left: 30px;
  padding-right: 30px;
}

.py1 {
  padding-top: 1px;
  padding-bottom: 1px;
}
.py2 {
  padding-top: 2px;
  padding-bottom: 2px;
}
.py3 {
  padding-top: 3px;
  padding-bottom: 3px;
}
.py4 {
  padding-top: 4px;
  padding-bottom: 4px;
}
.py5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.py6 {
  padding-top: 6px;
  padding-bottom: 6px;
}
.py7 {
  padding-top: 7px;
  padding-bottom: 7px;
}
.py8 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.py9 {
  padding-top: 9px;
  padding-bottom: 9px;
}
.py10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.py14 {
  padding-top: 14px;
  padding-bottom: 14px;
}
.py20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.py30 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.py40 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.py50 {
  padding-top: 50px;
  padding-bottom: 50px;
}
.py100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pl1 {
  padding-left: 1px;
}
.pl2 {
  padding-left: 2px;
}
.pl3 {
  padding-left: 3px;
}
.pl4 {
  padding-left: 4px;
}
.pl5 {
  padding-left: 5px;
}
.pl6 {
  padding-left: 6px;
}
.pl7 {
  padding-left: 7px;
}
.pl8 {
  padding-left: 8px;
}
.pl9 {
  padding-left: 9px;
}
.pl10 {
  padding-left: 10px;
}
.pl11 {
  padding-left: 11px;
}
.pl12 {
  padding-left: 12px;
}
.pl13 {
  padding-left: 13px;
}
.pl14 {
  padding-left: 14px;
}
.pl15 {
  padding-left: 15px;
}
.pl16 {
  padding-left: 16px;
}
.pl17 {
  padding-left: 17px;
}
.pl18 {
  padding-left: 18px;
}
.pl19 {
  padding-left: 19px;
}
.pl20 {
  padding-left: 20px;
}
.pl21 {
  padding-left: 21px;
}
.pl22 {
  padding-left: 22px;
}
.pl23 {
  padding-left: 23px;
}
.pl24 {
  padding-left: 24px;
}
.pl25 {
  padding-left: 25px;
}
.pl26 {
  padding-left: 26px;
}
.pl27 {
  padding-left: 27px;
}
.pl28 {
  padding-left: 28px;
}
.pl29 {
  padding-left: 29px;
}
.pl30 {
  padding-left: 30px;
}
.pl50 {
  padding-left: 50px;
}
.pl31 {
  padding-left: 31px;
}
.pl32 {
  padding-left: 32px;
}
.pl33 {
  padding-left: 33px;
}
.pl34 {
  padding-left: 34px;
}
.pl35 {
  padding-left: 35px;
}
.pl36 {
  padding-left: 36px;
}
.pl37 {
  padding-left: 37px;
}
.pl38 {
  padding-left: 38px;
}
.pl39 {
  padding-left: 39px;
}
.pl40 {
  padding-left: 40px;
}

.pr1 {
  padding-right: 1px;
}
.pr2 {
  padding-right: 2px;
}
.pr3 {
  padding-right: 3px;
}
.pr4 {
  padding-right: 4px;
}
.pr5 {
  padding-right: 5px;
}
.pr6 {
  padding-right: 6px;
}
.pr7 {
  padding-right: 7px;
}
.pr8 {
  padding-right: 8px;
}
.pr9 {
  padding-right: 9px;
}
.pr10 {
  padding-right: 10px;
}
.pr11 {
  padding-right: 11px;
}
.pr12 {
  padding-right: 12px;
}
.pr13 {
  padding-right: 13px;
}
.pr14 {
  padding-right: 14px;
}
.pr15 {
  padding-right: 15px;
}
.pr16 {
  padding-right: 16px;
}
.pr17 {
  padding-right: 17px;
}
.pr18 {
  padding-right: 18px;
}
.pr19 {
  padding-right: 19px;
}
.pr20 {
  padding-right: 20px;
}
.pr21 {
  padding-right: 21px;
}
.pr22 {
  padding-right: 22px;
}
.pr23 {
  padding-right: 23px;
}
.pr24 {
  padding-right: 24px;
}
.pr25 {
  padding-right: 25px;
}
.pr26 {
  padding-right: 26px;
}
.pr27 {
  padding-right: 27px;
}
.pr28 {
  padding-right: 28px;
}
.pr29 {
  padding-right: 29px;
}
.pr30 {
  padding-right: 30px;
}
.pr31 {
  padding-right: 31px;
}
.pr32 {
  padding-right: 32px;
}
.pr33 {
  padding-right: 33px;
}
.pr34 {
  padding-right: 34px;
}
.pr35 {
  padding-right: 35px;
}
.pr36 {
  padding-right: 36px;
}
.pr37 {
  padding-right: 37px;
}
.pr38 {
  padding-right: 38px;
}
.pr39 {
  padding-right: 39px;
}
.pr40 {
  padding-right: 40px;
}

.pt1 {
  padding-top: 1px;
}
.pt2 {
  padding-top: 2px;
}
.pt3 {
  padding-top: 3px;
}
.pt4 {
  padding-top: 4px;
}
.pt5 {
  padding-top: 5px;
}
.pt6 {
  padding-top: 6px;
}
.pt7 {
  padding-top: 7px;
}
.pt8 {
  padding-top: 8px;
}
.pt9 {
  padding-top: 9px;
}
.pt10 {
  padding-top: 10px;
}
.pt11 {
  padding-top: 11px;
}
.pt12 {
  padding-top: 12px;
}
.pt13 {
  padding-top: 13px;
}
.pt14 {
  padding-top: 14px;
}
.pt15 {
  padding-top: 15px;
}
.pt16 {
  padding-top: 16px;
}
.pt17 {
  padding-top: 17px;
}
.pt18 {
  padding-top: 18px;
}
.pt19 {
  padding-top: 19px;
}
.pt20 {
  padding-top: 20px;
}
.pt21 {
  padding-top: 21px;
}
.pt22 {
  padding-top: 22px;
}
.pt23 {
  padding-top: 23px;
}
.pt24 {
  padding-top: 24px;
}
.pt25 {
  padding-top: 25px;
}
.pt26 {
  padding-top: 26px;
}
.pt27 {
  padding-top: 27px;
}
.pt28 {
  padding-top: 28px;
}
.pt29 {
  padding-top: 29px;
}
.pt30 {
  padding-top: 30px;
}
.pt31 {
  padding-top: 31px;
}
.pt32 {
  padding-top: 32px;
}
.pt33 {
  padding-top: 33px;
}
.pt34 {
  padding-top: 34px;
}
.pt35 {
  padding-top: 35px;
}
.pt36 {
  padding-top: 36px;
}
.pt37 {
  padding-top: 37px;
}
.pt38 {
  padding-top: 38px;
}
.pt39 {
  padding-top: 39px;
}
.pt40 {
  padding-top: 40px;
}

.pt100 {
  padding-top: 100px;
}
.pt150 {
  padding-top: 150px;
}

.pb1 {
  padding-bottom: 1px;
}
.pb2 {
  padding-bottom: 2px;
}
.pb3 {
  padding-bottom: 3px;
}
.pb4 {
  padding-bottom: 4px;
}
.pb5 {
  padding-bottom: 5px;
}
.pb6 {
  padding-bottom: 6px;
}
.pb7 {
  padding-bottom: 7px;
}
.pb8 {
  padding-bottom: 8px;
}
.pb9 {
  padding-bottom: 9px;
}
.pb10 {
  padding-bottom: 10px;
}
.pb11 {
  padding-bottom: 11px;
}
.pb12 {
  padding-bottom: 12px;
}
.pb13 {
  padding-bottom: 13px;
}
.pb14 {
  padding-bottom: 14px;
}
.pb15 {
  padding-bottom: 15px;
}
.pb16 {
  padding-bottom: 16px;
}
.pb17 {
  padding-bottom: 17px;
}
.pb18 {
  padding-bottom: 18px;
}
.pb19 {
  padding-bottom: 19px;
}
.pb20 {
  padding-bottom: 20px;
}
.pb21 {
  padding-bottom: 21px;
}
.pb22 {
  padding-bottom: 22px;
}
.pb23 {
  padding-bottom: 23px;
}
.pb24 {
  padding-bottom: 24px;
}
.pb25 {
  padding-bottom: 25px;
}
.pb26 {
  padding-bottom: 26px;
}
.pb27 {
  padding-bottom: 27px;
}
.pb28 {
  padding-bottom: 28px;
}
.pb29 {
  padding-bottom: 29px;
}
.pb30 {
  padding-bottom: 30px;
}
.pb31 {
  padding-bottom: 31px;
}
.pb32 {
  padding-bottom: 32px;
}
.pb33 {
  padding-bottom: 33px;
}
.pb34 {
  padding-bottom: 34px;
}
.pb35 {
  padding-bottom: 35px;
}
.pb36 {
  padding-bottom: 36px;
}
.pb37 {
  padding-bottom: 37px;
}
.pb38 {
  padding-bottom: 38px;
}
.pb39 {
  padding-bottom: 39px;
}
.pb40 {
  padding-bottom: 40px;
}

/* responsive */
.d_none_500 {
  display: none;
}
.d_none_480 {
  display: none;
}
.d_none_375 {
  display: none;
}
.d_none_360 {
  display: none;
}
.d_none_330 {
  display: none;
}
.d_none_320 {
  display: none;
}

/* 23.05.22 datepicker 추가 NBR */
.clearfix {
  display: flex;
  justify-content: center;
  align-items: center;
}
.clearfix input:read-only {
  width: 100%;
  padding: 12px 25px;
  box-shadow: var(--input-shadow);
  border: var(--input-border);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans KR", sans-serif;
  background: var(--white);
  text-align: center;
}
.clearfix .demi {
  margin: 0 10px;
}
.clearfix .dset {
  width: 100%;
}
.searchDate {
  width: 100%;
  display: flex;
  align-items: center;
}
.searchDate li {
  position: relative;
  width: 100%;
  height: 52px;
  margin-right: 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--black);
  background-color: var(--white);
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.searchDate li.active {
  background-color: var(--main);
  color: var(--white);
}
.searchDate li:last-child {
  margin: 0;
}
.searchDate input {
  display: none;
}
.searchDate label {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

/* media query */

/*@@@@@@@@@@@@@@@@@@@@@ 태블릿 @@@@@@@@@@@@@@@@@@@@@*/
@media all and (min-width: 768px) and (max-width: 1024px) {
}

/*@@@@@@@@@@@@@@@@@@@@@ 모바일 가로 @@@@@@@@@@@@@@@@@@@@@*/
@media all and (min-width: 481px) and (max-width: 767px) {
  .direct_link_list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
  }
  .direct_link_list li a img {
    display: inline-block;
    width: 34px;
    margin-left: auto;
  }

  /* 브라우저 최대로 줄였을 떄*/
  @media all and (max-width: 500px) {
    .direct_link_list {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 1fr;
      gap: 10px;
    }
    .direct_link_list li a img {
      display: inline-block;
      width: 34px;
      margin-left: auto;
    }
    .send_card_list li {
      flex-direction: column;
      align-items: flex-start;
    }
    .text_card_list li {
      display: block;
    }
    .text_card_list .title {
      margin-bottom: 10px;
    }

    .d_none_500 {
      display: block;
    }
  }
}

/*@@@@@@@@@@@@@@@@@@@@@ 모바일 @@@@@@@@@@@@@@@@@@@@@*/
@media all and (min-width: 320px) and (max-width: 480px) {
  .direct_link_list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
  }
  .direct_link_list li a img {
    display: inline-block;
    width: 34px;
    margin-left: auto;
  }
  .send_card_list li {
    flex-direction: column;
    align-items: flex-start;
  }
  .text_card_list li {
    display: block;
  }
  .text_card_list .title {
    margin-bottom: 10px;
  }
  .direct_link_list li {
    aspect-ratio: 1/1;
  }

  .d_none_500 {
    display: block;
  }
  .d_none_480 {
    display: block;
  }
  .d_none_375 {
    display: block;
  }
  .d_none_360 {
    display: block;
  }
  .d_none_330 {
    display: block;
  }
  .d_none_320 {
    display: block;
  }
}

@media all and (max-width: 340px) {
  .direct_link_list .direct_txt {
    font-size: 14px;
  }
  .direct_link_list li a img {
    display: inline-block;
    width: 34px;
    margin-left: auto;
  }
}

@media all and (max-width: 320px) {
  .direct_link_list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
  }
}