@charset "utf-8";

/* TQPAY : 2022.10.01 : NBR */

/* 색상 변수 설정 */
:root {
  --main: #2a6f2b;
  --main_sub: #a9d8b2;
  --dark: #89949c;
  --darkgray: #7e7e7e;
  --black: #000000;
  --white: #ffffff;
  --gray: #bec8cf;
  --lightgray: #fbfbfb;
  --line_gray: #e9e9e9;
  --line: #f1f1f1;
  --inactive: #eff3f5;
  --bg: #f4f4f4;
  --fran: #000a80;
  --fran_inactive: #b1b1b1;
  --red: #ff2c51;
  --border_sub: #f1f1f1;
  --blue: #1162f8;
  --green: #00db33;
}

/* 웹폰트 */
/* MONTSERRAT(영문) */
@font-face {
  font-family: "montserrat-italic";
  src: url("./font/Montserrat-LightItalic.ttf") format("truetype");
  font-weight: 200;
}
@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;
}
/* 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;
}

.header_title.eng {
  font-family: "montserrat";
}

.eng {
  font-family: "montserrat";
}
.kor {
  font-family: "noto_sans";
}
.eng_bold {
  font-family: "montserrat";
  font-weight: 700;
}
.semibold {
  font-weight: 600;
}
.bold_line_txt {
  text-decoration: underline;
  font-weight: 700;
  color: var(--main);
}
.bold {
  font-weight: 700;
}
.regular {
  font-weight: 400;
}

.under_line {
  text-decoration: underline;
}
img {
  display: block;
}
.fw_500 {
  font-weight: 500;
}

/* font */
.font_12 {
  font-size: 1.2rem;
}
.font_14 {
  font-size: 1.4rem;
}
.font_16 {
  font-size: 1.6rem;
}
.font_18 {
  font-size: 1.8rem;
}
.font_20 {
  font-size: 2rem;
}
.font_26 {
  font-size: 2.6rem;
}
.font_28 {
  font-size: 2.8rem;
}

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

.border_top {
  border-top: 1px solid var(--line);
}
.border_top_5 {
  border-top: 5px solid var(--line);
}
.border_top_8 {
  border-top: 8px solid var(--line);
}

/* 배경색상 */
.bg_fran_gray {
  background: var(--gray);
}
.bg_sub {
  background: var(--main_sub);
}
/* .bg_referral { background: linear-gradient(0deg, rgba(168,193,255,1) 0%, rgba(255,255,255,1) 100%); } */
.bg_referral {
  background: #c5d6f4;
}
.bg_referral_new {
  background: #ffe4b7;
}
.bg_fran {
  background: var(--fran);
}
.bg_none {
  background: rgba(0, 0, 0, 0);
}
.bg_bg {
  background: var(--bg);
}
.bg_black {
  background: var(--black);
}
.bg_sub_50 {
  background: rgba(230, 240, 254, 0.5);
}

/*display*/
.d_none {
  display: none !important;
}
.d_block {
  display: block;
}
.col_red {
  color: var(--red);
}
/* 텍스트 정렬 */
.txt_center {
  text-align: center;
}
.txt_right {
  text-align: right !important;
}
.txt_whitespace_nowrap {
  white-space: nowrap;
}
.txt_left {
  text-align: left;
}

.text_red {
  color: var(--red) !important;
}
.text_main {
  color: var(--main);
}
.text_black {
  color: var(--black);
}
.text_green {
  color: var(--green);
}
.text_blue {
  color: var(--blue);
}
.text_pink {
  color: #ff7474;
}
.text_gray {
  color: var(--fran_inactive);
}
.text_fran {
  color: var(--fran);
}
.color_white {
  color: var(--white);
}
.text_dark {
  color: var(--dark);
}
.bold {
  font-weight: 700 !important;
}
.medium {
  font-weight: 500 !important;
}
.regular {
  font-weight: 400 !important;
}
/* background */
.lightgray_bg {
  background: var(--lightgray);
}

/* background - franchise */
.fran_bg {
  background: var(--fran) !important;
}
.fran_border {
  border: 1px solid var(--fran) !important;
}
.fran_font {
  color: var(--fran) !important;
}
/* flex 공통클래스 */
.flex {
  display: flex;
  align-items: center;
}
.flex_none {
  flex: none;
}
.flex_only {
  display: flex;
}
.flex_around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex_between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex_start {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.flex_end {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.flex_justify_end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.flex_end_end {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.flex_start_center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flex_start_start {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.flex_only_between {
  display: flex;
  justify-content: space-between;
}
.flex_col_flexend {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.flex_wrap {
  flex-wrap: wrap;
}

.gap_10 {
  grid-gap: 10px;
}
.gap_20 {
  grid-gap: 20px;
}
.gap_30 {
  grid-gap: 30px;
}

/* ellipsis */
.truncate_1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.truncate_2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.truncate_3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.truncate_4 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* 간격 공통클래스(padding/margin) */
.p_LR_10 {
  padding-left: 10px;
  padding-right: 10px;
}
.p_LR_20 {
  padding-left: 20px;
  padding-right: 20px;
}
.p_0 {
  padding: 0;
}
.p_10 {
  padding: 10px;
}
.p_20 {
  padding: 20px;
}
.p_TB_10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.p_TB_3 {
  padding-top: 3px;
  padding-bottom: 3px;
}
.p_TB_20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.p_TB_22 {
  padding-top: 22px;
  padding-bottom: 22px;
}
.p_TB_30 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.p_B5 {
  padding-bottom: 5px;
}
.p_B10 {
  padding-bottom: 10px;
}
.p_B20 {
  padding-bottom: 20px;
}
.p_B30 {
  padding-bottom: 30px;
}
.p_B60 {
  padding-bottom: 60px;
}
.p_B70 {
  padding-bottom: 70px;
}
.p_B80 {
  padding-bottom: 80px;
}
.p_B90 {
  padding-bottom: 90px;
}
.p_B100 {
  padding-bottom: 100px;
}
.p_B140 {
  padding-bottom: 140px;
}
.p_10_20 {
  padding: 10px 20px;
}
.pl10 {
  padding-left: 10px;
}
.p_T5 {
  padding-top: 5px;
}
.p_T6 {
  padding-top: 6px;
}
.p_T10 {
  padding-top: 10px;
}
.p_T14 {
  padding-top: 14px;
}
.p_T20 {
  padding-top: 20px;
}
.p_T30 {
  padding-top: 30px;
}
.p_T40 {
  padding-top: 40px;
}
.p_T50 {
  padding-top: 50px;
}
.p_T60 {
  padding-top: 60px;
}

.m_0 {
  margin: 0;
}
.m_LR_4 {
  margin-left: 4px;
  margin-right: 4px;
}
.m_LR_10 {
  margin-left: 10px;
  margin-right: 10px;
}
.m_LR_20 {
  margin-left: 20px;
  margin-right: 20px;
}
.m_TB_20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.m_TB_22 {
  margin-top: 22px;
  margin-bottom: 22px;
}
.m_R5 {
  margin-right: 5px;
}
.m_R10 {
  margin-right: 10px;
}
.m_R20 {
  margin-right: 20px;
}
.m_R30 {
  margin-right: 30px;
}
.m_L5 {
  margin-left: 5px;
}
.m_L10 {
  margin-left: 10px;
}
.m_L20 {
  margin-left: 20px;
}
.m_L30 {
  margin-left: 30px;
}
.m_T2 {
  margin-top: 2px;
}
.m_T5 {
  margin-top: 5px;
}
.m_T10 {
  margin-top: 10px;
}
.m_T20 {
  margin-top: 20px;
}
.m_T30 {
  margin-top: 30px;
}
.m_T60 {
  margin-top: 60px;
}
.m_T80 {
  margin-top: 80px;
}
.m_B5 {
  margin-bottom: 5px;
}
.m_B10 {
  margin-bottom: 10px;
}
.m_B20 {
  margin-bottom: 20px;
}
.m_B30 {
  margin-bottom: 30px;
}
.m_B40 {
  margin-bottom: 40px;
}
.m_B60 {
  margin-bottom: 60px;
}
.m_B80 {
  margin-bottom: 80px;
}
.m_B100 {
  margin-bottom: 100px;
}
.m_T100 {
  margin-top: 100px;
}
/*width*/
.w24 {
  width: 24%;
}
.w33 {
  width: 33%;
}
.w49 {
  width: 49%;
}
.w75 {
  width: 75%;
}
.w100 {
  width: 100%;
}
.width_100 {
  width: 100px;
}
.width_120 {
  width: 120px;
}
.width_170 {
  width: 170px;
}
/*//width*/

/* position */

.position_rel {
  position: relative;
}
.position_ab_left {
  position: absolute;
  left: 20px;
  top: 20px;
}
.position_ab_right {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 3;
}
select,
option {
  background: #fff;
}

/* 22.03.25 iOS, safari 브라우저 팝업창 배경 html, body 스크롤 방지 수정 */
* {
  touch-action: manipulation;
}
body {
  background: var(--line);
  font-family: "noto_sans";
}
body.ohidden {
  overflow: hidden;
}
html.h100,
body.h100 {
  height: 100%;
}
.height_100 {
  height: calc(var(--vh, 1vh) * 100) !important;
}

/* iOS / safari 브라우저일 경우 */
html.hidden_apple {
  position: static;
  height: 100vh;
}
body.hidden_apple {
  position: fixed;
  touch-action: none;
  -webkit-webkit-touch-action: none;
  -moz-webkit-touch-action: none;
  -ms-webkit-touch-action: none;
  -o-webkit-touch-action: none;
  -webkit-overflow-scrolling: none;
  overflow: hidden;
  /* 이외의 브라우저 */
  overscroll-behavior: none;
}

input[type="month"] {
  position: relative;
}
input[type="month"]::-webkit-clear-button,
input[type="month"]::-webkit-inner-spin-button {
  display: none;
}
input[type="month"]::-webkit-calendar-picker-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

body.hidden {
  overflow: hidden;
}
.over_auto {
  overflow: auto;
}

/* viewport 보다 콘텐츠 길이가 작을 경우 */
.viewport_main {
  height: calc(100vh - 60px);
}
/* wrapper 클래스 설정 */
/* 기본 양옆 padding값 22px */
.wrapper {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  background-color: #fff;
  font-family: "noto_sans";
  height: 100%;
  position: relative;
}

.viewport_web {
  height: calc(100vh - 80px);
}
.bg_white {
  background: var(--white);
}

/* header */
/* header 바꾸기전 */
/* header {position: fixed; top:0; left: 50%; width:100%; max-width:768px; transform: translateX(-50%); height: 60px; background-color: #fff; font-size: 2.0rem; font-weight: 800; z-index: 100; border-bottom:1px solid #F1F1F1; height:60px;} */
/* .header_list {display: flex; align-items: center; justify-content: space-between; width:100%; height:100%; padding:0 20px;  } */
/* header 변경 후 230316 */
header {
  margin: 0 auto;
  width: 100%;
  max-width: 768px;
  height: 50px;
  background-color: #fff;
  font-size: 2rem;
  font-weight: 800;
}
.header_title {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max-content;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  font-family: "noto_sans";
}
.header_img img {
  width: 100px;
  height: 50px;
  object-fit: contain;
}
.header_list {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 768px;
  height: 50px;
  border-bottom: 1px solid var(--border_sub);
  background-color: #fff;
  z-index: 100;
}
div.header {
  position: fixed;
  top: 0;
  left: 50%;
  padding: 0 20px;
  width: 100%;
  max-width: 768px;
  transform: translateX(-50%);
  height: 60px;
  font-size: 18px;
  font-weight: 800;
  z-index: 400;
}
/* 아래내용 추가 230316 */
header a {
  display: block;
  width: 100%;
  height: 100%;
}
.center_header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header_left {
  position: absolute;
  left: 0;
  width: 50px;
  height: 100%;
  cursor: pointer;
}
.header_left img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header_right {
  position: absolute;
  right: 0;
  width: 50px;
  height: 100%;
}
.header_right img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header_two_right {
  position: absolute;
  right: 0;
  width: 100px;
  height: 100%;
}
.header_two_right a {
  position: relative;
}
.header_two_rightt img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/*// 아래내용 추가 230316 */

/* 서브 페이지 header */
header h1 {
  font-size: 1.8rem;
  color: var(--black);
}
header.sub {
  justify-content: space-between;
  padding: 0 20px;
}
header.sub h1.mynft {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
header.sub a {
  display: block;
  line-height: 60px;
}
/* 22.02.23 화살표 버튼과 페이지 타이틀 2가지 요소만 있는 경우(users > creator_detail) NJH */
header.creator {
  justify-content: flex-start;
}
header.creator h1 {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
header.enter a {
  position: absolute;
  right: 20px;
}
header.enter_left a {
  position: absolute;
  left: 20px;
}
.btn_active {
  background-color: var(--inactive);
  color: var(--black);
}
.btn_vactive {
  background: var(--inactive);
  color: var(--gray);
}

.input_basic.focus_active {
  border: 1px solid var(--main);
}
/* input */
.input_basic {
  width: 100%;
  height: 40px;
  padding: 14px 45px 14px 20px;
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid var(--gray);
  font-size: 1.6rem;
  font-weight: 600;
}
.input_basic::placeholder {
  color: var(--gray);
  font-size: 1.4rem;
  font-weight: 400;
}
.input_basic.bg_white {
  background-color: #fff;
}
label {
  font-size: 1.4rem;
  font-weight: 500;
}
option {
  color: var(--black);
  font-family: "noto_sans";
  font-size: 1.4rem;
  padding: 10px 0;
}
.select_box {
  padding: 8px;
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--fran_inactive);
  outline: none;
  color: #212121;
  min-width: 100px;
  font-size: 1.4rem;
  font-weight: 400;
  font-family: "noto_sans";
}
.action {
  touch-action: none;
}
/* input */

/* *::-webkit-scrollbar {display: none; } */

/* 230425 header join complete : KMS */
.join_complete_header {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 33;
}

/* 하단 메인 탭 메뉴 main_tab_menu */
.tab_container {
  width: 100%;
  height: 70px;
  margin: 0 auto;
  background: var(--white);
}
.main_tab_container {
  width: 100%;
  height: 70px;
  margin: 0 auto;
  background: var(--bg);
}
/* .main_tab_box {position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 101%; max-width:768px; height: 70px; background-color: #fff; z-index: 200; border-top:1px solid #F1F1F1; } */
.main_tab_box {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 768px;
  height: 70px;
  background-color: #fff;
  z-index: 200;
  border-top: 1px solid #f1f1f1;
}
.main_tab_box li {
  width: 100%;
  height: 70px;
  cursor: pointer;
}
.main_tab_box li a {
  display: block;
  height: 100%;
}
.main_tab_box li p {
  padding: 40px 10px 0;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  color: #acacac;
  letter-spacing: normal;
}

.main_tab_box li.active p {
  color: var(--main);
}
.main_tab_box li.tq_home p {
  background-image: url(../img/icon/icon_home-default.svg);
}
.main_tab_box li.tq_pay p {
  background-image: url(../img/icon/icon_qr-default.svg);
}
.main_tab_box li.tq_wallet p {
  background-image: url(../img/icon/icon_send.svg);
}
.main_tab_box li.tq_atm p {
  background-image: url(../img/icon/icon_payset.svg);
}
.main_tab_box li.tq_gift p {
  background-image: url(../img/icon/icon_gift-default.svg);
}
.main_tab_box li.tq_fran p {
  background-image: url(../img/icon/fran_icon.svg);
}
.main_tab_box li.tq_fran_location p {
  background-image: url(../img/icon/icon_map-default.svg);
}
.main_tab_box li.tq_my p {
  background-image: url(../img/icon/icon_menu-default.svg);
}
.main_tab_box li.tq_home.active p {
  background-image: url(../img/icon/icon_home-active.svg);
}
.main_tab_box li.tq_pay.active p {
  background-image: url(../img/icon/icon_qr-active.svg);
}
.main_tab_box li.tq_wallet.active p {
  background-image: url(../img/icon/icon_send_h.svg);
}
.main_tab_box li.tq_atm.active p {
  background-image: url(../img/icon/icon_payset_h.svg);
}
.main_tab_box li.tq_gift.active p {
  background-image: url(../img/icon/icon_gift-active.svg);
}
.main_tab_box li.tq_fran.active p {
  background-image: url(../img/icon/fran_icon_h.svg);
}
.main_tab_box li.tq_fran_location.active p {
  background-image: url(../img/icon/icon_map-active.svg);
}
.main_tab_box li.tq_my.active p {
  background-image: url(../img/icon/icon_menu-active.svg);
}

/* TAB */
.basic_tab_box {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 33;
  background: var(--white);
}
.basic_tab {
  width: 100%;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--darkgray);
}
.basic_tab p {
  width: max-content;
  margin: 0 auto;
  height: calc(100% + 1px);
  font-size: 1.6rem;
  font-weight: 500;
}
.basic_tab .active {
  border-bottom: 2px solid var(--main);
  color: var(--main);
}

/*가맹점*/
.franch_tab_box {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 768px;
  height: 70px;
  background-color: #fff;
  z-index: 200;
  border-top: 1px solid #f1f1f1;
}
.franch_tab_box li {
  width: calc(100% / 4);
  height: 70px;
  cursor: pointer;
}
.franch_tab_box li a {
  display: block;
  height: 100%;
}
.franch_tab_box li p {
  padding: 44px 10px 0;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  color: var(--dark);
  letter-spacing: normal;
}
.franch_tab_box li.active p {
  color: var(--fran);
}
/* .franch_tab_box li:nth-child(1) p {background-image: url(../img/icon/icon_home.svg);}
.franch_tab_box li:nth-child(2) p {background-image: url(../img/icon/icon_QR.svg);}
.franch_tab_box li:nth-child(3) p {background-image: url(../img/icon/icon_payset.svg);}
.franch_tab_box li:nth-child(4) p {background-image: url(../img/icon/icon_payhistory.svg);}

.franch_tab_box li:nth-child(1).active p {background-image: url(../img/icon/icon_home_a.svg);}
.franch_tab_box li:nth-child(2).active p {background-image: url(../img/icon/icon_QR_a.svg);}
.franch_tab_box li:nth-child(3).active p {background-image: url(../img/icon/icon_payset_a.svg);}
.franch_tab_box li:nth-child(4).active p {background-image: url(../img/icon/icon_payhistory_a.svg);} */

.franch_tab_box li.tq_fran_home p {
  background-image: url(../img/icon/fran_icon.svg);
}
.franch_tab_box li.tq_fran_pay p {
  background-image: url(../img/icon/icon_QR.svg);
  letter-spacing: -1px;
}
.franch_tab_box li.tq_fran_wallet p {
  background-image: url(../img/icon/icon_payset.svg);
}
.franch_tab_box li.tq_fran_paylist p {
  background-image: url(../img/icon/icon_payhistory.svg);
}
.franch_tab_box li.tq_fran_user p {
  background-image: url(../img/icon/icon_home.svg);
}

.franch_tab_box li.tq_fran_home.active p {
  background-image: url(../img/icon/fran_icon_a.svg);
}
.franch_tab_box li.tq_fran_pay.active p {
  background-image: url(../img/icon/icon_QR_a.svg);
  letter-spacing: -1px;
}
.franch_tab_box li.tq_fran_wallet.active p {
  background-image: url(../img/icon/icon_payset_a.svg);
}
.franch_tab_box li.tq_fran_paylist.active p {
  background-image: url(../img/icon/icon_payhistory_a.svg);
}
.franch_tab_box li.tq_fran_user.active p {
  background-image: url(../img/icon/icon_home_a.svg);
}

/* //main_tab_menu */

/* button */
.btn_fixed_container {
  width: 100%;
  height: 90px;
}
.btn_fixed.btn_height_90 {
  padding: 0 20px 30px;
}
.btn_fixed_box {
  width: 100%;
  height: 120px;
}
.btn_fixed_box_txt {
  width: 100%;
  height: 170px;
}
.btn_fixed {
  position: fixed;
  max-width: 768px;
  width: 100%;
  bottom: 0;
  background-color: var(--white);
}
.btn_fixed_trans {
  position: fixed;
  max-width: 768px;
  width: 100%;
  bottom: 0;
  z-index: 44;
}
.btn {
  padding: 7px 17px;
  background: var(--bg);
  font-size: 1.4rem;
  font-weight: 500;
  border-radius: 10px;
  font-family: "noto_sans";
}

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


.btn.active {
  background: var(--main);
  color: var(--white);
}
.btn.main {
  background: var(--main);
  color: var(--white);
}
.p_btn {
  padding: 10px 20px;
  background: var(--bg);
  font-size: 1.4rem;
  font-weight: 500;
  border-radius: 10px;
  font-family: "noto_sans";
}
.p_btn.active {
  background: var(--main);
  color: var(--white);
}
/* 2022.03.28 cursor:pointer 속성 클래스 추가 : NJH */
.cursor_p {
  cursor: pointer;
}

.klay_logo_img {
  width: 110px;
}
.all_agree input[type="checkbox"] {
  position: relative;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  cursor: pointer;
  outline: none;
  border: 1px solid var(--gray);
  border-radius: 4px;
  top: 6px;
}
.all_agree input[type="checkbox"]::before {
  background-image: url("../img/icon/icon_chk.svg");
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: scale(0) translate(-50%, -50%);
  line-height: 1;
}
.all_agree input[type="checkbox"]:checked {
  background-color: var(--main);
  border: none;
}
.all_agree input[type="checkbox"]:checked::before {
  border-radius: 4px;
  transform: scale(1) translate(-50%, -50%);
}

/* loading */
.loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
}
.loading_circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 3px 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: 1.6rem;
  color: var(--dark);
  text-align: center;
  font-family: "noto_sans";
}
.not_cusor_p {
  cursor: inherit !important;
}
.word_txt {
  word-break: break-all;
}
.word_keep {
  word-break: keep-all;
}

/* CALENDER */

@keyframes loading {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (max-width: 567px) {
  .viewport_web {
    height: unset;
  }
  header.enter a {
    right: 10px;
  }
  header.enter_left a {
    left: 10px;
  }
  header.sub {
    padding: 0 10px;
  }
}

@media (max-width: 400px) {
  .main_tab_box li p,
  .franch_tab_box li p {
    padding: 44px 0 0;
  }
}

@media (max-width: 270px) {
  .main_tab_box li p,
  .franch_tab_box li p {
    font-size: 1rem;
  }
}

@media screen and (max-height: 668px) {
  header.keypad {
    background: transparent;
  }
}

/* 230502 TQ 충전(tq_charge) : KMS */
.tq_charge .tq_send_info_txt_red {
  padding-bottom: 0;
}