@charset "UTF-8";

/*##################### RESET ####################*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "noto";
}
html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #efefef;
}
li {
  list-style: none;
}
a:link,
a:visited {
  text-decoration: none;
  color: var(--black);
}
input,
select,
textarea,
button {
  outline: none;
  border: none;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("../img/svg/icon_drop.svg") no-repeat 98% 50%/20px auto;
  background-size: 10px;
}
table {
  border-spacing: 0px;
  border-collapse: collapse;
}
button[type="button"] {
  cursor: pointer;
}
body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}

/*#################### CSS 변수 ####################*/
:root {
  /* color */
  --main: #00589b;
  --sub: #00589b;
  --black: #111111;
  --white: #ffffff;
  --green: #1f893b;
  --blue: #0000ff;
  --yellow: #ffc107;
  --red: #b50308;
  --dark_gray: #555555;
  --gray: #b1b1b1;
  --light_gray: #f2f2f2;

  /* border */
  --border: #c3c3c3;
  --border_sub: #efefef;

  /* label-input-button */
  --label-button-size: 70px;
  --label-button-gap: 10px;
  --label-button-total: 80px;
}

/* font-family */
@font-face {
  font-family: "noto";
  src: url("./font/NotoSansKR-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "noto";
  src: url("./font/NotoSansKR-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "noto";
  src: url("./font/NotoSansKR-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "noto";
  src: url("./font/NotoSansKR-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "open";
  src: url("./font/OpenSans-Light.ttf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "open";
  src: url("./font/OpenSans-Regular.ttf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "open";
  src: url("./font/OpenSans-Medium.ttf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "open";
  src: url("./font/OpenSans-SemiBold.ttf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "open";
  src: url("./font/OpenSans-Bold.ttf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

/*#################### Components ####################*/

/* input 자동완성 배경색상 변경 */
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;
}

input:autofill,
input:autofill:hover,
input:autofill:focus,
input: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;
}

/* wrap */
.wrap {
  width: 100%;
  max-width: 768px;
  min-height: 100%;
  margin: 0 auto;
  background-color: #fff;
}
.wrap.full {
  display: flex;
  flex-direction: column;
}
.wrap.full .content {
  flex: 1;
}
.wrap.full .header {
  flex: none;
}
.wrap.full .footer {
  flex: none;
}

/*header*/
.header {
  width: 100%;
}
.header_safe_area {
  width: 100%;
  height: 70px;
}
.header_common_layout {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 768px;
  height: 70px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border_sub);
  background-color: #fff;
  z-index: 9;
}
.header_title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: 700;
}
.header_left {
  margin-right: auto;
}
.header_right {
  margin-left: auto;
}
.header .close {
  width: 14px;
  cursor: pointer;
}
.header .close img {
  display: block;
}
.header .back {
  width: 10px;
  cursor: pointer;
}
.header .back img {
  display: block;
}

/* content */
.content {
  width: 100%;
  overflow: hidden;
}
.content_inner {
  padding: 0 20px;
}

/* footer */
.footer {
  width: 100%;
}
.footer .inner {
  width: 100%;
  max-width: 768px;
  margin: auto;
}

/* label */
.label {
  display: block;
}
.label .text {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.label .help {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}
.label input {
  width: 100%;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
}
.label input::placeholder {
  font-weight: 400;
  color: var(--dark_gray);
}
.label input[readonly] {
  background-color: var(--light_gray);
  font-size: 14px;
  font-weight: 400;
  border: none;
}
.label input[readonly].readonly {
  border: 1px solid var(--border);
  background-color: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}

.label_toggle {
  display: block;
  position: relative;
}
.label_toggle .text {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.label_toggle .help {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}
.label_toggle input {
  width: 100%;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
}
.label_toggle input::placeholder {
  font-weight: 400;
  color: var(--dark_gray);
}
.label_toggle img {
  position: absolute;
  right: 10px;
  top: 43px;
  cursor: pointer;
}

.label_search {
  display: block;
  position: relative;
}
.label_search .text {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.label_search .help {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}
.label_search input {
  width: 100%;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
}
.label_search input::placeholder {
  font-weight: 400;
  color: var(--dark_gray);
}
.label_search img {
  position: absolute;
  right: 10px;
  top: 46px;
  cursor: pointer;
}

.label_button {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.label_button .text {
  display: block;
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.label_button .help {
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}
.label_button input {
  width: calc(100% - var(--label-button-total));
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
}
.label_button input::placeholder {
  font-weight: 400;
  color: var(--dark_gray);
}
.label_button input[readonly] {
  background-color: var(--light_gray);
  font-size: 14px;
  font-weight: 400;
  border: none;
}
.label_button input[readonly].readonly {
  border: 1px solid var(--border);
  background-color: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}
.label_button .button {
  width: var(--label-button-size);
  padding: 8px 16px;
  margin-left: var(--label-button-gap);
  border-radius: 6px;
  border: none;
  text-align: center;
  background-color: var(--main);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
/* 2023.01.13 mypage 내 버튼 사이즈 안맞음 관련 수정 : NBR */
.label_button input.info {
  width: calc(100% - 100px);
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
}
.label_button .button_info {
  width: 90px;
  padding: 8px 16px;
  margin-left: var(--label-button-gap);
  border-radius: 6px;
  border: none;
  text-align: center;
  background-color: var(--main);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.label_toggle_button {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.label_toggle_button .text {
  flex: none;
  display: block;
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.label_toggle_button .help {
  flex: none;
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}
.label_toggle_button input {
  width: calc(100% - var(--label-button-total));
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 16px;
  font-weight: 500;
}
.label_toggle_button input::placeholder {
  font-weight: 400;
  color: var(--dark_gray);
}
.label_toggle_button .button {
  width: var(--label-button-size);
  padding: 8px 16px;
  margin-left: var(--label-button-gap);
  border-radius: 6px;
  border: none;
  text-align: center;
  background-color: var(--main);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.label_toggle_button img {
  position: absolute;
  right: calc(var(--label-button-total) + 10px);
  top: 43px;
  cursor: pointer;
}

.label_select {
  display: block;
}
.label_select .text {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.label_select .help {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}
.label_select select {
  width: 100%;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
  color: #000;
}

.label_textarea {
  display: block;
}
.label_textarea .text {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.label_textarea .help {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}
.label_textarea textarea {
  width: 100%;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
}

.label_checkbox {
  display: flex;
  align-items: center;
}
.label_checkbox .text {
  font-size: 16px;
  font-weight: 700;
  margin-left: 10px;
}
.label_checkbox input {
  -webkit-appearance: none;
  position: relative;
  width: 24px;
  height: 24px;
  cursor: pointer;
  outline: none;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.label_checkbox input::before {
  background-image: url("../img/svg/icon_chk.svg");
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.label_checkbox input:checked {
  background-color: var(--main);
  border: none;
}

.label_checkbox_inline {
  display: inline-flex;
  align-items: center;
}
.label_checkbox_inline .text {
  font-size: 16px;
  font-weight: 700;
  margin-left: 10px;
}
.label_checkbox_inline input {
  -webkit-appearance: none;
  position: relative;
  width: 24px;
  height: 24px;
  cursor: pointer;
  outline: none;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.label_checkbox_inline input::before {
  background-image: url("../img/svg/icon_chk.svg");
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.label_checkbox_inline input:checked {
  background-color: var(--main);
  border: none;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  position: relative;
  width: 24px;
  height: 24px;
  cursor: pointer;
  outline: none;
  border: 1px solid var(--border);
  border-radius: 4px;
}
input[type="checkbox"]::before {
  background-image: url("../img/svg/icon_chk.svg");
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
input[type="checkbox"]:checked {
  background-color: var(--main);
  border: none;
}

/* terms_box */
.terms_box {
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-line;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 400;
}

/* input */
.input_box {
  width: 100%;
}
.input_box .label {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.input_box .text {
  width: 100%;
  height: 100%;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}
.input_box .outer {
  display: flex;
  align-items: center;
}
.input_box .outer button {
  flex: none;
}
.input_box .outer .inner {
  width: 100%;
  height: 40px;
  position: relative;
}
.input_box .outer .inner input {
  width: 100%;
  height: 100%;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}
.input_box .outer .inner input[readonly] {
  background-color: var(--light_gray);
  font-size: 14px;
  font-weight: 400;
  border: none;
}
.input_box .outer .inner input[readonly].readonly {
  border: 1px solid var(--border);
  background-color: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}
.input_box .outer .inner input::placeholder {
  font-weight: 400;
  color: var(--dark_gray);
}
.input_box .outer .inner img {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* select */
.select_box {
  width: 100%;
}
.select_box .label {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.select_box select {
  width: 100%;
  height: 100%;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}

/* textarea */
.textarea_box {
  width: 100%;
}
.textarea_box .label {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.textarea_box textarea {
  width: 100%;
  min-height: 400px;
  resize: none;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}
.textarea_box textarea::placeholder {
  font-weight: 400;
  color: var(--dark_gray);
}

/* button */
.button_box {
  display: flex;
  align-items: center;
}
button[type="button"] {
  height: 52px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
}
button[type="button"].main {
  background-color: #1d1d1d;
  color: #fff;
}
button[type="button"].white {
  background-color: #fff;
  border: 1px solid #1d1d1d;
  color: #1d1d1d;
}
button[type="button"].confirm {
  background-color: var(--main);
  color: #fff;
}

button[type="button"].small {
  height: 30px;
}
button[type="button"].regular {
  height: 35px;
}
button[type="button"].medium {
  height: 40px;
}
button[type="button"].large {
  height: 45px;
}

button[type="button"].coin_list_button {
  width: 70px;
  height: 60px;
  background-color: var(--main);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
button[type="button"].exchange_list_button {
  width: 70px;
  height: 60px;
  background-color: var(--main);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
button[type="button"].payment {
  border: 1px solid var(--border);
  background-color: #fff;
  color: #555;
}
button[type="button"].payment.active {
  border: 1px solid var(--main);
  background-color: #fff;
  color: var(--main);
}
button[type="button"].minus {
  width: 28px;
  height: 28px;
  font-size: 18px;
  border-radius: 50%;
  padding: 0;
}
button[type="button"].plus {
  width: 28px;
  height: 28px;
  font-size: 18px;
  border-radius: 50%;
  padding: 0;
}
button[type="button"].minus.active {
  background-color: var(--main);
  color: var(--white);
}
button[type="button"].plus.active {
  background-color: var(--main);
  color: var(--white);
}

button[type="button"].cancel {
  color: #000;
}

input.shopping_amount {
  width: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

/* banner */
.banner_swiper .swiper-pagination {
  bottom: 30px;
}
.banner_swiper .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin-right: 4px;
  background-color: #fff;
  opacity: 1;
}
.banner_swiper .swiper-pagination-bullet-active {
  background-color: var(--sub);
}
.banner_slide {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background-color: #eee;
}
.banner_slide img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* marquee */
.marquee {
  position: relative;
  bottom: 20px;
  width: calc(100% - 40px);
  height: 40px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 1px 1px 2px rgba(226, 226, 226, 0.3);
  border: 1px solid #eee;
  z-index: 1;
  overflow: hidden;
}
.marquee_inner,
.marquee_inner_clone {
  position: absolute;
  left: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
.marquee a {
  flex: none;
  font-size: 16px;
  font-weight: 700;
}

/* member */
/* .member_card{width:100%; padding:16px; background-color:var(--sub); border-radius:6px;} */
.member_card {
  width: 100%;
  padding: 16px;
  background-image: linear-gradient(to right, #5a6164 10%, #2a333a 100%);
  border-radius: 6px;
}
.member_card .id {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.member_card .amount {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.member_list {
  width: 100%;
  padding: 16px;
  border-radius: 6px;
  background-color: var(--sub);
}
.member_id {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
}
.member_cash {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(242, 242, 242, 0.3);
  word-break: break-all;
}
.copy_btn {
  width: 112px;
  height: 40px;
  margin-top: 10px;
  border-radius: 4px;
  background-color: var(--main_color);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}

/* shopping */
.shopping_swiper .swiper-pagination {
  position: static;
  margin-top: 20px;
}
.shopping_swiper .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin-right: 4px;
  background-color: #eee;
  opacity: 1;
}
.shopping_swiper .swiper-pagination-bullet-active {
  background-color: var(--sub);
}

/* 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;
  font-family: "open";
  color: var(--gray);
}
.pagination .page.active {
  border-radius: 4px;
  background-color: var(--main);
}
.pagination .page.active a {
  color: #fff;
}

/* bottom_tab */
.bottom_tab_safe_area {
  width: 100%;
  height: 83px;
}
.bottom_tab {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 768px;
  padding: 16px 20px;
  border-top: 1px solid var(--border_sub);
  background-color: #fff;
  z-index: 9;
}
.bottom_tab li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}
.bottom_tab li a .img {
  display: block;
  width: 22px;
  height: 22px;
  margin-bottom: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.bottom_tab li a .text {
  font-size: 14px;
  font-weight: 500;
  color: #999;
}
.bottom_tab .active a .text {
  color: var(--black);
}

.bottom_tab li:nth-child(1) a .img {
  background-image: url("../img/svg/icon_menu_wallet.svg");
}
.bottom_tab li:nth-child(2) a .img {
  background-image: url("../img/svg/icon_menu_send.svg");
}
.bottom_tab li:nth-child(3) a .img {
  background-image: url("../img/svg/icon_menu_shopping.svg");
}
.bottom_tab li:nth-child(4) a .img {
  background-image: url("../img/svg/icon_menu_change.svg");
}
.bottom_tab li:nth-child(5) a .img {
  background-image: url("../img/svg/icon_menu_mypage.svg");
}

.bottom_tab .active:nth-child(1) a .img {
  background-image: url("../img/svg/icon_menu_wallet_on.svg");
}
.bottom_tab .active:nth-child(2) a .img {
  background-image: url("../img/svg/icon_menu_send_on.svg");
}
.bottom_tab .active:nth-child(3) a .img {
  background-image: url("../img/svg/icon_menu_shopping_on.svg");
}
.bottom_tab .active:nth-child(4) a .img {
  background-image: url("../img/svg/icon_menu_change_on.svg");
}
.bottom_tab .active:nth-child(5) a .img {
  background-image: url("../img/svg/icon_menu_mypage_on.svg");
}

/* 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 .text_area .price {
  font-size: 14px;
  font-weight: 400;
  color: var(--blue);
  text-align: right;
}

.coin_list_info.active {
  transform: translateX(-240px);
}

@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 */
.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:last-child {
  margin-right: 0;
}

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

/* exchange_list_button_box */
.exchange_list_button_box {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.exchange_list_button_box button {
  margin-right: 10px;
}
.exchange_list_button_box button:last-child {
  margin-right: 0;
}

/* news_list */
.news_list {
  width: 100%;
}
.news_list li {
  width: 100%;
  border-bottom: 1px solid var(--border_sub);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.news_list li:last-child {
  border-bottom: none;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.news_list li a {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.news_list li a span {
  display: block;
}
.news_list li a .text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 94px;
  margin-right: 20px;
}
.news_list li a .text .title {
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.news_list li a .text .desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark_gray);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.news_list li a .text .date {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray);
}
.news_list li a .img {
  flex: none;
  width: 94px;
  height: 94px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.news_list li a .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.news_view_content {
  width: 100%;
}
.news_view_content .img {
  width: 100%;
  margin: 10px 0;
}
.news_view_content .img img {
  width: 100%;
}
.news_view_content .pdf {
  width: 100%;
  margin: 10px 0;
}
.news_view_content .pdf a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
}
.news_view_content .video {
  width: 100%;
}
.news_view_content .video video {
  width: 100%;
}

/* notice_list */
.notice_list {
  width: 100%;
}
.notice_list li {
  border-bottom: 1px solid var(--border_sub);
}
.notice_list li:last-child {
  border-bottom: none;
}
.notice_list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 20px 0;
}
.notice_list li a .title {
  word-break: break-all;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-right: 20px;
}
.notice_list li a .date {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray);
}

/* text_card_list */
.text_card_list {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.text_card_list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border_sub);
}
.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: 500;
  color: var(--dark_gray);
}
.text_card_list .desc {
  font-size: 14px;
  font-weight: 700;
  word-break: break-all;
}

@media all and (min-width: 320px) and (max-width: 480px) {
  .text_card_list li {
    display: block;
  }
  .text_card_list .title {
    margin-bottom: 10px;
  }
}

/* text_list */
.text_list {
  width: 100%;
  padding: 16px;
  border-radius: 6px;
}
.text_list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.text_list li:last-child {
  padding-bottom: 0px;
  margin-bottom: 0px;
  border-bottom: none;
}
.text_list .title {
  flex: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark_gray);
}
.text_list .desc {
  font-size: 14px;
  font-weight: 700;
  word-break: break-all;
  text-align: right;
}

@media all and (min-width: 320px) and (max-width: 480px) {
  .text_list li {
    display: block;
  }
  .text_list .title {
    margin-bottom: 10px;
  }
  .text_list .desc {
    text-align: left;
  }
}

/* shopping_swiper_list */
.shopping_swiper_list li a {
  display: block;
  width: 100%;
  height: 100%;
}
.shopping_swiper_list li a span {
  display: block;
}
.shopping_swiper_list li a .img {
  position: relative;
  width: 100%;
  height: 0px;
  padding-top: 100%;
  border-radius: 6px;
  overflow: hidden;
  background-color: #eee;
  margin-bottom: 10px;
}
.shopping_swiper_list li a .img img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.shopping_swiper_list li a .title {
  word-break: break-all;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
}
.shopping_swiper_list li a .price {
  font-size: 18px;
  font-weight: 700;
}

/* shopping_list */
.shopping_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.shopping_list li a {
  display: block;
}
.shopping_list li a .img {
  width: 100%;
  height: 0;
  padding-top: 100%;
  margin-bottom: 10px;
  background-color: #eee;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.shopping_list li a .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  position: absolute;
  left: 0;
  top: 0;
}
.shopping_list li a .title {
  word-break: break-all;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
}
.shopping_list li a .price {
  font-size: 16px;
  font-weight: 700;
}
.shopping_list li a .price .discount {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray);
  text-decoration: line-through;
}

/* inquiry_list */
.inquiry_list {
  width: 100%;
}
.inquiry_list li {
  width: 100%;
  border-bottom: 1px solid var(--border_sub);
}
.inquiry_list li a {
  display: block;
  width: 100%;
  padding: 20px 0;
}
.inquiry_list li:first-child a {
  padding-top: 0px;
}
.inquiry_list li a .title {
  word-break: break-all;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.inquiry_list li a .state {
  font-size: 16px;
  font-weight: 700;
}
.inquiry_list li a .state.complete {
  color: var(--green);
}
.inquiry_list li a .state.wait {
  color: var(--red);
}
.inquiry_list li a .date {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray);
}

/* login */
/* .login_logo{width:300px; margin:auto;} */
.login_logo img {
  display: block;
  width: 100%;
  object-fit: contain;
  object-position: center;
}

/* mylist_profile */
.mylist_profile {
  width: 100%;
}
.mylist_profile .img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 12px;
}
.mylist_profile .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.mylist_profile .name {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark_gray);
  margin-bottom: 4px;
  text-align: center;
}
.mylist_profile .email {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.my_list {
  width: 100%;
}
.my_item {
  width: 100%;
  height: 62px;
  padding: 0 20px;
  border-top: 1px solid var(--light_gray);
  border-bottom: 1px solid var(--light_gray);
}
.my_link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: 700;
}
.my_link:after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url("../../assets/img/svg/icon_more.svg") no-repeat center;
}
.my_item:not(:first-child) {
  border-top: none;
}

/* send_main */
.send_main_card {
  width: 100%;
  border: 1px solid var(--border_sub);
  border-radius: 10px;
  box-shadow: 1px 1px 2px rgba(226, 226, 266, 0.3);
  overflow: hidden;
  transition: all 0.3s;
}
.send_main_card a {
  display: block;
  width: 100%;
  height: 100%;
}
.send_main_card a span {
  display: block;
}
.send_main_card a .img {
  height: 160px;
  border-bottom: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.send_main_card a .text {
  height: 52px;
  line-height: 52px;
  font-weight: 700;
  text-align: center;
  background-color: #131313;
  color: var(--white);
}

/* .send_main_card:hover {
  background-color: var(--main);
} */

/* wallet_address */
.qr_img_box {
  width: 160px;
  height: 160px;
  margin: auto;
  border: 2px solid var(--border);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.qr_img_box .qr {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  object-position: center;
}
.clipboard_guide_text.active {
  opacity: 1;
}
.clipboard_guide_text {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transition: all 0.3s;
}

/* qr_send_code */
.qr_img_area {
  width: 220px;
  height: 220px;
  border: 2px dashed #d4d4d4;
  border-radius: 20px;
  margin: auto;
}
.code_box {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: fit-content;
  margin: auto;
}

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

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

/* box */
.box_gray {
  padding: 14px 10px;
  border-radius: 6px;
  background-color: var(--light_gray);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  word-break: break-all;
}

/* hr */
hr {
  border: none;
  border-top: 1px solid var(--border);
}
hr.type1 {
  border-color: rgba(242, 242, 242, 0.3);
}
hr.type2 {
  border-top: 10px solid #f8f9fb;
}

/* loading */
.loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 9999;
}
.loading_circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid var(--main);
  border-top-color: rgba(255, 255, 255, 0);
  border-bottom-color: rgba(255, 255, 255, 0);
  animation: loading 3s infinite;
}
.loading_text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 700;
  color: var(--sub);
}
@keyframes loading {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

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

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

/* shopping_history_data */
.shopping_history_data {
  width: 100%;
  display: flex;
  align-items: center;
}
.shopping_history_data a {
  display: block;
  width: 100%;
  height: 100%;
}
.shopping_history_data a .state {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
.shopping_history_data a .info {
  display: flex;
  justify-content: center;
  align-items: center;
}
.shopping_history_data a .info .img {
  flex: none;
  width: 94px;
  height: 94px;
  margin-right: 20px;
}
.shopping_history_data a .info .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.shopping_history_data a .info .text {
  width: 100%;
}
.shopping_history_data a .info .text .title {
  word-break: break-all;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.shopping_history_data a .info .text .option {
  font-size: 14px;
  font-weight: 500;
  color: #b1b1b1;
  margin-bottom: 10px;
}
.shopping_history_data a .info .text .price {
  font-size: 18px;
  font-weight: 700;
}
.shopping_history_data a .info .text .price .discount {
  font-size: 12px;
  font-weight: 500;
  color: #b1b1b1;
  text-decoration: line-through;
  margin-left: 4px;
}

.shopping_history_data {
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px;
}
.shopping_history_data .state {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
.shopping_history_data .info {
  display: flex;
  justify-content: center;
  align-items: center;
}
.shopping_history_data .info .img {
  flex: none;
  width: 94px;
  height: 94px;
  margin-right: 20px;
}
.shopping_history_data .info .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.shopping_history_data .info .text {
  width: 100%;
}
.shopping_history_data .info .text .title {
  word-break: break-all;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.shopping_history_data .info .text .option {
  font-size: 14px;
  font-weight: 500;
  color: #b1b1b1;
  margin-bottom: 10px;
}
.shopping_history_data .info .text .price {
  font-size: 18px;
  font-weight: 700;
}
.shopping_history_data .info .text .price .discount {
  font-size: 12px;
  font-weight: 500;
  color: #b1b1b1;
  text-decoration: line-through;
  margin-left: 4px;
}

/* shopping_view */
.shopping_product_img {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  position: relative;
}
.shopping_product_img img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: contain;
  object-position: center;
}
.shopping_product_info .title {
  word-break: break-all;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
}
.shopping_product_info .price {
  font-size: 18px;
  font-weight: 700;
}
.shopping_product_info .price .discount {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray);
  text-decoration: line-through;
  margin-left: 6px;
}
.shopping_product_order .amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.shopping_product_order .amount .text {
  font-size: 14px;
  font-weight: 500;
}
.shopping_product_order .amount .button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.shopping_product_order .total_price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shopping_product_order .total_price .text {
  font-size: 14px;
  font-weight: 500;
}
.shopping_product_order .total_price .price {
  font-size: 18px;
  font-weight: 700;
}
.shopping_product_explain p {
  margin: 20px 0;
  font-size: 14px;
  font-weight: 500;
}
.shopping_product_explain p img {
  width: 100%;
  border: 1px solid #efefef;
}
.button_safe_area {
  width: 100%;
  height: 82px;
}
.bottom_button_box {
  width: 100%;
  max-width: 768px;
  padding: 0 20px 30px 20px;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.bottom_button_box button {
  display: block;
}

/* header */
.main_header {
  height: 56px;
  padding: 16px;
  border-bottom: 1px solid #e9e9e9;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
}
/*#################### Atomic CSS ####################*/

/*공통*/
.d_none {
  display: none;
}
.d_block {
  display: block;
}
.d_flex {
  display: flex;
}
.d_grid {
  display: grid;
}
.d_table {
  display: table;
}
.d_row {
  display: table-row;
}
.d_cell {
  display: table-cell;
}

/* grid */
.grid_2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid_3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid_4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid_5 {
  grid-template-columns: repeat(5, 1fr);
}
.grid_6 {
  grid-template-columns: repeat(6, 1fr);
}
.grid_7 {
  grid-template-columns: repeat(7, 1fr);
}
.grid_8 {
  grid-template-columns: repeat(8, 1fr);
}

.grid_gap_10 {
  grid-gap: 10px;
}
.grid_gap_20 {
  grid-gap: 20px;
}
.grid_gap_30 {
  grid-gap: 30px;
}
.grid_gap_40 {
  grid-gap: 40px;
}

.grid_col_1 {
  grid-column: span 1;
}
.grid_col_2 {
  grid-column: span 2;
}
.grid_col_3 {
  grid-column: span 3;
}
.grid_col_4 {
  grid-column: span 4;
}
.grid_col_5 {
  grid-column: span 5;
}
.grid_col_6 {
  grid-column: span 6;
}

/* font-size */
.font_10 {
  font-size: 10px;
}
.font_11 {
  font-size: 11px;
}
.font_12 {
  font-size: 12px;
}
.font_13 {
  font-size: 13px;
}
.font_14 {
  font-size: 14px;
}
.font_15 {
  font-size: 15px;
}
.font_16 {
  font-size: 16px;
}
.font_17 {
  font-size: 17px;
}
.font_18 {
  font-size: 18px;
}
.font_19 {
  font-size: 19px;
}
.font_20 {
  font-size: 20px;
}
.font_22 {
  font-size: 22px;
}
.font_34 {
  font-size: 34px;
}

/* font-family */
.eng {
  font-family: "open";
}

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

.word_break_all {
  word-break: break-all;
}

/* background-color */
.bg_main {
  background-color: var(--main);
}
.bg_sub {
  background-color: var(--sub);
}
.bg_red {
  background-color: var(--red);
}
.bg_blue {
  background-color: var(--blue);
}
.bg_green {
  background-color: var(--green);
}
.bg_yellow {
  background-color: var(--yellow);
}
.bg_gray {
  background-color: var(--gray);
}
.bg_white {
  background-color: var(--white);
}
.bg_black {
  background-color: var(--black);
}

/* color */
.color_main {
  color: var(--main);
}
.color_sub {
  color: var(--sub);
}
.color_red {
  color: var(--red);
}
.color_blue {
  color: var(--blue);
}
.color_green {
  color: var(--green);
}
.color_yellow {
  color: var(--yellow);
}
.color_gray {
  color: var(--gray);
}
.color_dark_gray {
  color: var(--dark_gray);
}
.color_white {
  color: var(--white);
}
.color_black {
  color: var(--black);
}

a.color_main {
  color: var(--main);
}
a.color_sub {
  color: var(--sub);
}
a.color_red {
  color: var(--red);
}
a.color_blue {
  color: var(--blue);
}
a.color_green {
  color: var(--green);
}
a.color_yellow {
  color: var(--yellow);
}
a.color_gray {
  color: var(--gray);
}
a.color_white {
  color: var(--white);
}
a.color_black {
  color: var(--black);
}

/* flex */
.flex {
  display: flex;
  align-items: center;
}
.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex_col_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.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_around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex_evenly {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

/* align-items */
.align_start {
  align-items: start;
}
.align_center {
  align-items: center;
}
.align_end {
  align-items: end;
}

/* position 공통 클래스 */
.position_center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* text 정렬 */
.text_center {
  text-align: center;
}
.text_left {
  text-align: left;
}
.text_right {
  text-align: right;
}

/* width */
.w_10 {
  width: 10%;
}
.w_24 {
  width: 24%;
}
.w_33 {
  width: 33%;
}
.w_49 {
  width: 49%;
}
.w_100 {
  width: 100%;
}

/* margin 값 */
.m_auto {
  margin: auto;
}

.m10 {
  margin: 10px;
}
.m20 {
  margin: 20px;
}
.m30 {
  margin: 30px;
}
.m40 {
  margin: 40px;
}
.m50 {
  margin: 50px;
}

.ml4 {
  margin-left: 4px;
}
.ml10 {
  margin-left: 10px;
}
.ml20 {
  margin-left: 20px;
}
.ml30 {
  margin-left: 30px;
}
.ml40 {
  margin-left: 40px;
}
.ml50 {
  margin-left: 50px;
}

.mr4 {
  margin-right: 10px;
}
.mr10 {
  margin-right: 10px;
}
.mr20 {
  margin-right: 20px;
}
.mr30 {
  margin-right: 30px;
}
.mr40 {
  margin-right: 40px;
}
.mr50 {
  margin-right: 50px;
}

.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
.mt40 {
  margin-top: 40px;
}
.mt50 {
  margin-top: 50px;
}
.mt60 {
  margin-top: 60px;
}
.mt70 {
  margin-top: 70px;
}

.mb10 {
  margin-bottom: 10px;
}
.mb16 {
  margin-bottom: 16px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb40 {
  margin-bottom: 40px;
}
.mb50 {
  margin-bottom: 50px;
}
.mb60 {
  margin-bottom: 60px;
}

.mx10 {
  margin-left: 10px;
  margin-right: 10px;
}
.mx20 {
  margin-left: 20px;
  margin-right: 20px;
}
.mx30 {
  margin-left: 30px;
  margin-right: 30px;
}
.mx40 {
  margin-left: 40px;
  margin-right: 40px;
}
.mx50 {
  margin-left: 50px;
  margin-right: 50px;
}

.my10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.my20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.my30 {
  margin-top: 30px;
  margin-bottom: 30px;
}
.my40 {
  margin-top: 40px;
  margin-bottom: 40px;
}
.my50 {
  margin-top: 50px;
  margin-bottom: 50px;
}

/* padding 값 */
.p10 {
  padding: 10px;
}
.p20 {
  padding: 20px;
}
.p30 {
  padding: 30px;
}
.p40 {
  padding: 40px;
}
.p50 {
  padding: 50px;
}

.pl10 {
  padding-left: 10px;
}
.pl20 {
  padding-left: 20px;
}
.pl30 {
  padding-left: 30px;
}
.pl40 {
  padding-left: 40px;
}
.pl50 {
  padding-left: 50px;
}

.pr10 {
  padding-right: 10px;
}
.pr20 {
  padding-right: 20px;
}
.pr30 {
  padding-right: 30px;
}
.pr40 {
  padding-right: 40px;
}
.pr50 {
  padding-right: 50px;
}

.pt10 {
  padding-top: 10px;
}
.pt20 {
  padding-top: 20px;
}
.pt30 {
  padding-top: 30px;
}
.pt40 {
  padding-top: 40px;
}
.pt46 {
  padding-top: 46px;
}
.pt50 {
  padding-top: 50px;
}
.pt60 {
  padding-top: 60px;
}

.pb10 {
  padding-bottom: 10px;
}
.pb20 {
  padding-bottom: 20px;
}
.pb30 {
  padding-bottom: 30px;
}
.pb40 {
  padding-bottom: 40px;
}
.pb50 {
  padding-bottom: 50px;
}

.px10 {
  padding-left: 10px;
  padding-right: 10px;
}
.px20 {
  padding-left: 20px;
  padding-right: 20px;
}
.px30 {
  padding-left: 30px;
  padding-right: 30px;
}
.px40 {
  padding-left: 40px;
  padding-right: 40px;
}
.px50 {
  padding-left: 50px;
  padding-right: 50px;
}

.py10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.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;
}

/* ellipsis */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ellipsis3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* border */
.border {
  border: 1px solid var(--border_sub);
}
.border-top {
  border-top: 1px solid var(--border_sub);
}
.border-bottom {
  border-bottom: 1px solid var(--border_sub);
}
.border-left {
  border-left: 1px solid var(--border_sub);
}
.border-right {
  border-right: 1px solid var(--border_sub);
}

/* white-space */
.ws_norwap {
  white-space: nowrap;
}

/* 2022-12-05 정지훈 display flex와 none 충돌 해결 */
.shopping_result .d_none {
  display: none !important;
}

/* 미정리 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.wrap_btn {
  width: 100%;
  max-width: 768px;
  min-height: calc(100vh - 230px);
  height: 100%;
  margin: 70px auto 30px;
}
.wrap_pagination {
  width: 100%;
  max-width: 768px;
  min-height: calc(100vh - 152px);
  height: 100%;
  margin: 70px auto 0px;
}

/* btn */
.btn_wrap {
  display: flex;
  padding: 30px 0;
}
.btn_wrap .btn {
  margin-right: 20px;
}
.btn_wrap .btn:last-child {
  margin-right: 0;
}
.btn {
  width: 100%;
  height: 52px;
  background-color: #eaecef;
  border-radius: 4px;
  font-size: 1.6rem;
  font-family: var(--font_B);
  color: var(--black);
}
.btn_red {
  background-color: var(--main_color);
  color: #fff;
}
.btn_border {
  background-color: transparent;
  border: 1px solid var(--main_color);
  color: var(--main_color);
}
.btn_small {
  flex: none;
  width: 98px;
  height: 40px;
  margin-left: 10px;
  background-color: var(--main_color);
  border-radius: 4px;
  font-size: 1.6rem;
  font-family: var(--font_B);
  color: var(--white);
}
.bottom_wrap {
  padding-top: 82px;
}
.bottom_fixed {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 768px;
  padding: 0 20px;
  background-color: var(--white);
  z-index: 999;
}
.bottom_fixed .btn_wrap {
  padding-top: 0;
}

/* gnb */
.gnb {
  padding-top: 83px;
}
.gnb_list {
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid #e2e2e2;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 768px;
  background-color: var(--white);
  z-index: 999;
}
.gnb_list li a {
  color: #999;
}
.gnb_list .selected a {
  color: #000;
}
.gnb_link {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.4rem;
  font-family: var(--font_M);
}
.gnb_img {
  width: 22px;
  height: 22px;
  margin-bottom: 8px;
}

/* pagination */
.pagination_wrap {
  width: 100%;
  max-width: 768px;
  padding: 28px 0;
  margin: 0 auto;
}
.pagination_list {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  margin: 28px auto;
}
.pagination_list li {
  width: 26px;
  height: 26px;
  margin-right: 4px;
}
.pagination_list li:last-child {
  margin-right: 0;
}
.pagination_list li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: "OpenSans-Regular";
  color: var(--gray);
}
.pagination_list .active {
  background-color: var(--main_color);
  border-radius: 4px;
  font-family: "OpenSans-Medium";
  color: var(--white);
}
.pagination_list .active a {
  color: var(--white);
}

/* 강조 텍스트 */
.text_red {
  color: var(--sub_color);
}
.text_green {
  color: var(--green);
}

/* input */
.input_basic {
  width: 100%;
  height: 40px;
  padding: 10px 16px;
  margin-top: 10px;
  border-radius: 6px;
  border: 1px solid var(--border_main);
  font-size: 1.4rem;
  font-family: var(--font_R);
}
.input_readonly {
  width: 100%;
  height: 40px;
  padding: 10px 16px;
  margin-top: 10px;
  border-radius: 6px;
  background-color: var(--light_gray);
  font-size: 1.4rem;
  font-family: var(--font_R);
}
.textarea_basic {
  width: 100%;
  height: 412px;
  padding: 10px 16px 10px;
  margin-top: 10px;
  border-radius: 6px;
  border: 1px solid var(--border_main);
  font-size: 1.4rem;
  font-family: var(--font_R);
  resize: none;
}

/* input radio 버튼 디자인변경 */
input[type="radio"] {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border_main);
  border-radius: 50%;
  flex: none;
}
input[type="radio"]:checked {
  -webkit-appearance: none;
  border: 2px solid #f00;
  border-radius: 50%;
}
input[type="radio"]:before {
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  margin: 25% auto;
  border-radius: 50%;
}
input[type="radio"]:checked:before {
  background: red;
}

/*placeholder 색상*/
input::placeholder {
  color: var(--dark_gray);
}
textarea::placeholder {
  color: var(--dark_gray);
}

/* 강조 텍스트 */
.text_red {
  color: var(--sub_color);
}
.text_green {
  color: var(--green);
}

.cursor {
  cursor: pointer;
}

/*input label 화살표 제거*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*input label 체크박스 디자인 변경 */

/*230620 로그인 페이지 CSS 추가 SJW */
.login_boxwrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  width: 100%;
}
.number_moneytxt {
  font-size: 27px;
  margin: 14px 0 22px;
}

.swal2-confirm {
  background-color: #131313 !important;
}
.swal2-styled.swal2-confirm:focus {
  box-shadow: none !important;
}
.swal2-title {
  font-size: 30px !important;
  padding: 0 !important;
}

.title_sweet {
  font-size: 20px;
  color: #212121;
}
.desc_sweet {
  font-size: 15px;
  color: #212121;
  font-weight: 400;
}
.swal2-styled {
  margin: 0 !important;
}
.swal2-actions:not(.swal2-loading) .swal2-styled:active {
  background-image: none !important;
}
.swal2-styled.swal2-default-outline:focus,
.swal2-styled.swal2-cancel:focus {
  box-shadow: none !important;
}
.swal2-actions:not(.swal2-loading) .swal2-styled:hover {
  background-image: none !important;
}
.swal2-actions .swal2-styled.swal2-cancel {
  margin-left: 10px !important;
  border: 1px solid var(--line);
}
.swal2-popup {
  width: 400px !important;
  padding: 20px !important;
}
.swal2-actions {
  margin-top: 10px !important;
}
.swal2-styled.swal2-confirm {
  font-size: 14px !important;
  height: 36px;
}
.swal2-styled.swal2-cancel {
  font-size: 14px !important;
}

.main_popup_wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.5);
}

.main_popup_wrap .pop_cont {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 320px;
  min-width: 200px;
  width: calc(100% - 40px);
  border-radius: 10px;
  z-index: 9920;
  overflow: hidden;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.4);
}

.pop_desc {
  padding: 20px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  min-height: 160px;
}
.link_move_btn {
  display: flex;
  align-items: center;
}
.link_move_btn button {
  background: #ededed;
  width: 100%;
}
.link_move_btn a {
  background: var(--main);
  color: #fff;
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.new_popup_title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  border-bottom: 1px solid #ededed;
  padding: 20px;
}

/*미디어쿼리*/
@media screen and (max-width: 767px) {
  select {
    background: url("../img/svg/icon_drop.svg") no-repeat 94% 50%/20px auto;
    background-size: 10px;
  }
}

@media screen and (max-width: 320px) {
  .btn_100 {
    font-size: 1.4rem;
  }
}