@charset "utf-8";

/* TQPAY : 2022.10.01 : NBR */

/* 색상 변수 설정 */
:root {
  --main :#1162F8;
  --main_sub :#E6F0FE;
  --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: 2.0rem; }
.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.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: 2.0rem; 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: #3974EB;  letter-spacing: normal;}

.main_tab_box li.active p {color: #e53254;}
.main_tab_box li.tq_home p {background-image: url(../img/icon/icon_home.svg);}
.main_tab_box li.tq_pay p {background-image: url(../img/icon/icon_QR.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_tab_gift.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_tab_location.svg); }
.main_tab_box li.tq_my p {background-image: url(../img/icon/icon_more.svg);}
.main_tab_box li.tq_home.active p {background-image: url(../img/icon/icon_home_h.svg);}
.main_tab_box li.tq_pay.active p {background-image: url(../img/icon/icon_QR_h.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_tab_gift_a.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_tab_location_a.svg); }
.main_tab_box li.tq_my.active p {background-image: url(../img/icon/icon_more_h.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";}
.btn.active { background: #003495; 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:1.0rem; }
}

@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;}