@charset "utf-8";
@import url(/css/daterangepicker.css);

/* webfont */
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'),
        url('/fonts/noto-sans-kr-v7-latin_korean-regular.woff2') format('woff2'),
        url('/fonts/noto-sans-kr-v7-latin_korean-regular.woff') format('woff')
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: local('Noto Sans KR Medium'), local('NotoSansKR-Medium'),
        url('/fonts/noto-sans-kr-v7-latin_korean-500.woff2') format('woff2'),
        url('/fonts/noto-sans-kr-v7-latin_korean-500.woff') format('woff')
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 600;
    src: local('Noto Sans KR Medium'), local('NotoSansKR-Medium'),
        url('/fonts/noto-sans-kr-v7-latin_korean-500.woff2') format('woff2'),
        url('/fonts/noto-sans-kr-v7-latin_korean-500.woff') format('woff')
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans KR Bold'), local('NotoSansKR-Bold'),
        url('/fonts/noto-sans-kr-v7-latin_korean-700.woff2') format('woff2'),
        url('/fonts/noto-sans-kr-v7-latin_korean-700.woff') format('woff')
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 800;
    src: local('Noto Sans KR Bold'), local('NotoSansKR-Bold'),
        url('/fonts/noto-sans-kr-v7-latin_korean-700.woff2') format('woff2'),
        url('/fonts/noto-sans-kr-v7-latin_korean-700.woff') format('woff')
}

:root {
    --safeAreaInsetBottom: env(safe-area-inset-bottom);
    --mainFont : rgba(0, 60, 136, 1);
    --fontMain : #10192D;
    --fontMiddle : #64748B;
    --fontLight : #8E9BAE;
    --fontActive : #2873FF;
    --colorWarning : #FACC15;
    --colorError : #F65556;
    --colorSuccess : #289E5D;
    --colorNavy : #1A294F;
    --colorGrayScale : #F1F5F9;
    --fontMin : -0.6px;
    --fontNor : -0.3px;
}

/* Reset  */
* {
    box-sizing: border-box;
}


html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

table caption {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
}

a {
    color: #10192D;
    text-decoration: none;
}

label,
img {
    vertical-align: middle;
}

div,
label {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input {
    -webkit-border-radius: 0;
    -webkit-appearance: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=text],
input[type=number],
input[type=password],
input[type=search],
input[type=tel] {
    border: 1px solid #E2E8F0;
    height: 56px;
    line-height: 52px;
    border-radius: 16px;
    background: #fff;
    width: auto;
    box-sizing: border-box;
    padding: 0 18px;
    color: #10192D;
    vertical-align: middle;
    font-size: 16px;
    letter-spacing: -.3px;
    font-weight: 600;
    width: 100%;
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.3px;
    color: #10192D;
    caret-color : var(--mainFont);
}

select,
.select {
    border: 1px solid #E2E8F0;
    height: 56px;
    line-height: 52px;
    border-radius: 16px;
    background: url(/images/ic-select-arrow.svg) no-repeat calc(100% - 20px) 50% #fff;
    background-size: 16px 16px;
    width: auto;
    box-sizing: border-box;
    padding: 0 46px 0 18px;
    color: #10192D;
    vertical-align: middle;
    font-size: 16px;
    letter-spacing: -.3px;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

select::-ms-expand {
    display: none;
}

select.placeholder {
    color: #E2E8F0;
}

input[type=text]:not(.dateWeeklyInput):not(.dailyDateInput):focus,
input[type=text]:not(.dateWeeklyInput):not(.dailyDateInput):hover,
input[type=text]:not(.dateWeeklyInput):not(.dailyDateInput).active,
input[type=password]:focus,
input[type=password]:hover,
input[type=password].active,
input[type=search]:focus,
input[type=search]:hover,
input[type=search].active,
input[type=number]:focus,
input[type=number]:hover,
input[type=number].active,
input[type=tel]:focus,
input[type=tel]:hover,
input[type=tel].active,
select:focus,
select:hover,
.select:focus,
.select:hover {
    border: 1.5px solid #10192D;
    outline: none !important;
}

::placeholder {
    color: #E2E8F0;
    font-size: 1rem;
    font-weight: 400;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox]~label {
    font-size: 16px;
    color: #10192D;
    letter-spacing: -.3px;
    line-height: 1.2;
}

input[type=checkbox]:not(.filter)~label::before {
    display: inline-block;
    content: '';
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 8px;
    background: url(/images/ic-checkbox-off.svg) no-repeat center;
    background-size: 100% 100%;
}

input[type=checkbox]:not(.filter):checked~label::before {
    background-image: url(/images/ic-checkbox-on.svg);
}


input[type=checkbox]:not(.toggleCheck):not(.filter):not(.beared)~label {
    font-size: 16px;
    color: #10192D;
    letter-spacing: -.3px;
    line-height: 1.2;
}

input[type=checkbox]:not(.toggleCheck):not(.beared):not(.filter)~label::before {
    display: inline-block;
    content: '';
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 8px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
}

input[type=checkbox]:not(.toggleCheck):not(.beared):not(.filter):checked~label::before {
    background-image: url(/images/ic-checked.png);
    background-size: 100%;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background: url(/images/ic-searchclear.svg) no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 14px;
}

input[type="search"]:focus::-webkit-search-cancel-button {
    opacity: 1;
    pointer-events: all;
}

.toggleButton {
    width: 40px;
    height: 24px;
    display: block;
    position: relative;
    background: #E2E8F0;
    border-radius: 40px;
}

.toggleButton .toggleItem {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #FFFFFF;
}

.toggleCheck:checked~.toggleButton {
    background: #2873FF;
}

.toggleCheck:checked~.toggleButton .toggleItem {
    left: 18px;
    background: #fff;
}

.toggleButton,
.toggleItem {
    transition: all 0.2s ease-in;
}


.w100p {
    width: 100% !important;
}

.w90p {
    width: 90% !important;
}

.w80p {
    width: 80% !important;
}

.w70p {
    width: 70% !important;
}

.w60p {
    width: 60% !important;
}

.w50p {
    width: 50% !important;
}

.w40p {
    width: 40% !important;
}

.w30p {
    width: 30% !important;
}

.w20p {
    width: 20% !important;
}

.w10p {
    width: 10% !important;
}

.h100p {
    height: 100% !important;
}

.w20 {
    width: 20px !important;
}

.w24 {
    width: 24px !important;
}

.w32 {
    width: 32px !important;
}

.w40 {
    width: 40px !important;
}

.w48 {
    width: 48px !important;
}

.w56 {
    width: 56px !important;
}

.w88 {
    width: 88px !important;
}

.w100 {
    width: 100px !important;
}

.w160 {
    width: 160px !important;
}

.mt-8 {
    margin-top: -8px !important;
}

.mt-4 {
    margin-top: -4px !important;
}

.mt0 {
    margin-top: 0px !important;
}

.mt4 {
    margin-top: 4px !important;
}

.mt8 {
    margin-top: 8px !important;
}

.mt12 {
    margin-top: 12px !important;
}

.mt16 {
    margin-top: 16px !important;
}

.mt24 {
    margin-top: 24px !important;
}

.mt32 {
    margin-top: 32px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.mt46 {
    margin-top: 46px !important;
}

.mt48 {
    margin-top: 48px !important;
}

.mt56 {
    margin-top: 56px !important;
}

.mb0 {
    margin-bottom: 0px !important;
}

.mb4 {
    margin-bottom: 4px !important;
}

.mb8 {
    margin-bottom: 8px !important;
}

.mb12 {
    margin-bottom: 12px !important;
}

.mb14 {
    margin-bottom: 14px !important;
}

.mb16 {
    margin-bottom: 16px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb24 {
    margin-bottom: 24px !important;
}

.mb32 {
    margin-bottom: 32px !important;
}

.mb33 {
    margin-bottom: 33px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb48 {
    margin-bottom: 48px !important;
}

.mb56 {
    margin-bottom: 56px !important;
}

.mb68 {
    margin-bottom: 68px !important;
}

.ml0 {
    margin-left: 0px !important;
}

.ml4 {
    margin-left: 4px !important;
}

.ml6 {
    margin-left: 6px !important;
}

.ml8 {
    margin-left: 8px !important;
}

.ml16 {
    margin-left: 16px !important;
}

.ml24 {
    margin-left: 25px !important;
}

.ml32 {
    margin-left: 32px !important;
}

.ml40 {
    margin-left: 40px !important;
}

.ml48 {
    margin-left: 48px !important;
}

.ml56 {
    margin-left: 56px !important;
}

.mr0 {
    margin-right: 0 !important;
}

.mr4 {
    margin-right: 4px !important;
}

.mr6 {
    margin-right: 6px !important;
}

.mr8 {
    margin-right: 8px !important;
}

.mr16 {
    margin-right: 16px !important;
}

.mr24 {
    margin-right: 24px !important;
}

.mr32 {
    margin-right: 32px !important;
}

.mr40 {
    margin-right: 40px !important;
}

.mr48 {
    margin-right: 48px !important;
}

.mr56 {
    margin-right: 56px !important;
}

.p0 {
    padding: 0 !important;
}

.p8 {
    padding: 8px !important;
}

.p12 {
    padding: 12px !important;
}

.p16 {
    padding: 16px !important;
}

.p24 {
    padding: 24px !important;
}

.p32 {
    padding: 32px !important;
}

.p40 {
    padding: 40px !important;
}

.p48 {
    padding: 48px !important;
}

.p56 {
    padding: 56px !important;
}

.pt0 {
    padding-top: 0 !important;
}

.pt8 {
    padding-top: 8px !important;
}

.pt16 {
    padding-top: 16px !important;
}

.pt24 {
    padding-top: 24px !important;
}

.pt30 {
    padding-top: 30px !important;
}

.pt32 {
    padding-top: 32px !important;
}

.pt40 {
    padding-top: 40px !important;
}

.pt48 {
    padding-top: 48px !important;
}

.pt56 {
    padding-top: 56px !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

.pb8 {
    padding-bottom: 8px !important;
}

.pb16 {
    padding-bottom: 16px !important;
}

.pb24 {
    padding-bottom: 24px !important;
}

.pb30 {
    padding-bottom: 30px !important;
}

.pb32 {
    padding-bottom: 32px !important;
}

.pb40 {
    padding-bottom: 40px !important;
}

.pb48 {
    padding-bottom: 48px !important;
}

.pb56 {
    padding-bottom: 56px !important;
}

.pl0 {
    padding-left: 0 !important;
}

.pl8 {
    padding-left: 8px !important;
}

.pl16 {
    padding-left: 16px !important;
}

.pl24 {
    padding-left: 24px !important;
}

.pl32 {
    padding-left: 32px !important;
}

.pl40 {
    padding-left: 40px !important;
}

.pl48 {
    padding-left: 48px !important;
}

.pl56 {
    padding-left: 56px !important;
}

.pr0 {
    padding-right: 0 !important;
}

.pr8 {
    padding-right: 8px !important;
}

.pr16 {
    padding-right: 16px !important;
}

.pr24 {
    padding-right: 24px !important;
}

.pr32 {
    padding-right: 32px !important;
}

.pr40 {
    padding-right: 40px !important;
}

.pr48 {
    padding-right: 48px !important;
}

.pr56 {
    padding-right: 56px !important;
}

.plr {
    padding-right: 20px !important;
    padding-left: 20px !important;
}

/* typography */
.heading1 {
    font-size: 40px;
    line-height: 110%;
    letter-spacing: -.6px;
    font-weight: 800;
}

.heading2 {
    font-size: 32px;
    line-height: 110%;
    letter-spacing: -.6px;
    font-weight: 800;
}

.heading3 {
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -.6px;
    font-weight: 800;
}

.heading4 {
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -.6px;
    font-weight: 800;
}

.subtitle1 {
    font-size: 18px;
    line-height: 120%;
    letter-spacing: -.6px;
}

.subtitle2 {
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -.6px;
}

.body1 {
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -.3px;
    font-weight: 400;
}

.body2 {
    font-size: 14px !important;
    line-height: 140%;
    letter-spacing: -.3px;
    font-weight: 400;
}

.body3 {
    font-size: 12px;
    line-height: 140%;
    letter-spacing: -.3px;
    font-weight: 400;
}

.paragraph1 {
    font-size: 16px;
    line-height: 180%;
    letter-spacing: -.3px;
    font-weight: 400;
}

.paragraph2 {
    font-size: 14px !important;
    line-height: 160% !important;
    letter-spacing: -.3px !important;
    font-weight: 400 !important;
}

.extrabold {
    font-weight: 800 !important;
}

.bold {
    font-weight: 700 !important;
}

.semibold {
    font-weight: 600 !important;
}

.regular {
    font-weight: 400 !important;
}

.c-black {
    color: #10192D !important;
}

.c-blue {
    color: #2873FF !important;
}

.c-red {
    color: #F65556 !important;
}

.c-gray {
    color: #8E9BAE !important;
}

.t-center {
    text-align: center !important;
}

.t-right {
    text-align: right !important;
}

.t-left {
    text-align: left !important;
}

.lh12 {
    line-height: 1.2;
}

.lh14 {
    line-height: 1.4;
}

.lh15 {
    line-height: 1.5;
}

.lh18 {
    line-height: 1.8;
}

.v-middle {
    vertical-align: middle;
}

.v-top {
    vertical-align: top;
}

.fs14 {
    font-size: 14px !important;
}

.fs16 {
    font-size: 16px !important;
}

.fs24 {
    font-size: 24px !important;
}

.fs32 {
    font-size: 32px !important;
}

.fs40 {
    font-size: 40px !important;
}

.fs48 {
    font-size: 48px !important;
}

/* float */
.f-clear:after {
    content: '';
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}

* html .f-clear {
    height: 1%;
}

.f-clear {
    display: block;
    min-height: 1%;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.clear {
    clear: both;
}

/* button */
button {
    border: 0;
    background-color: transparent;
    letter-spacing: -.3px;
    padding: 0;
    cursor: pointer;
}

/* button:active {background-color: rgba(16, 25, 45, 0.08);} */
button[class^="btn-"],
a[class^="btn-"] {
    text-align: center;
    display: flex;
    cursor: pointer;
    /*transition: all .2s; */
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.3px;
}

button[class^="btn-"].loading,
a[class^="btn-"].loading {
    font-size: 0;
}

button[class^="btn-"].loading::before,
a[class^="btn-"].loading::before {
    content: '';
    width: 18px;
    height: 18px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: rotate .5s infinite linear;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border-radius: 15px;
    font-size: 16px;
}

.btn-radius {
    border-radius: 1rem;
}

.btn-radius.btn-medium {
    border-radius: 12px;
}

.btn-large {
    height: 3.5rem;
    line-height: 3.5rem;
}

.btn-medium {
    height: 3rem;
    line-height: 3rem;
}

.btn-primary {
    color: #fff;
    background-color: #2873FF;
    width: 100%;
}

.btn-black {
    color: #fff;
    background-color: #000;
    width: 100%;
}

.btn-primary:active {
    background-color: #165CDD;
}

.btn-primary:disabled,
.btn-primary.loading {
    background-color: #B9D1FF;
}

.btn-primary.loading::before {
    background-image: url(/images/ic-spinner-w.svg);
}

.btn-primary.shadow {
    box-shadow: 0px 2px 2px rgba(22, 92, 221, 0.25), 0px 6px 4px rgba(22, 92, 221, 0.15);
}

.btn-soft {
    color: #2873FF;
    background-color: #E9F1FF;
    width: 100%;
}

.btn-soft:active {
    background-color: #B9D1FF;
}

.btn-soft:disabled,
.btn-soft.loading {
    background-color: #F5F9FF;
}

.btn-soft.loading::before {
    background-image: url(/images/ic-spinner-b.svg);
}

.btn-primary-gradient {
    color: #fff;
    width: 100%;
    padding: 0 1rem;
    background: linear-gradient(90deg, #2873FF 0%, #42B8E5 100%);
    box-shadow: 0px 2px 2px rgba(22, 92, 221, 0.25), 0px 6px 4px rgba(22, 92, 221, 0.15);
}

.btn-primary-gradient:active {
    background: linear-gradient(90deg, #1961e9 0%, #28a2d1 100%);
}

.btn-attend-complete {
    width: 100%;
    padding: 0 1rem;
    background: #B9D1FF;
    color: #fff;
    cursor: default;
}

.box1 {
    color: #2873FF;
    background: #E9F1FF;
    font-size: 12px;
    height: 34px;
    line-height: 34px;
    border-radius: 8px;
    display: inline-block;
    padding: 0 16px;
    margin-bottom: 24px;
}

.box2 {
    color: #2873FF;
    background: #F5F9FF;
    font-size: 16px;
    min-height: 56px;
    line-height: 1.2;
    border-radius: 12px;
    display: inline-block;
    padding: 18px 24px;
    box-sizing: border-box;
    margin: 0 auto;
}

/* 메시지 팝업 */
.pop-message {
    position: fixed;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    background: rgba(6, 10, 29, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.pop-message~.pop-message {
    background: none;
    backdrop-filter: none;
}

.pop-message .message-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 24px 20px;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px rgba(13, 10, 25, 0.06);
    border-radius: 20px;
    width: 100%;
    max-width: 327px;
}

.pop-message .message-box h2 {
    font-weight: 800;
    font-size: 20px;
    line-height: 120%;
    margin-bottom: 8px;
    text-align: center;
    letter-spacing: -.6px;
}

.pop-message .message-box p {
    font-size: 16px;
    color: #8E9BAE;
    margin-bottom: 24px;
    text-align: center;
    letter-spacing: -.3px;
}

.pop-message .message-box p.c-black.bold {
    font-size: 18px !important;
}

.pop-loading {
    position: fixed;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    background: rgba(6, 10, 29, 0.6);
    backdrop-filter: blur(10px);
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pop-loading::before {
    content: '';
    width: 40px;
    height: 40px;
    display: inline-block;
    background: url(/images/ic-spinner-w.svg) no-repeat;
    background-size: 100% 100%;
    animation: rotate .5s infinite linear;
}

/* 스플래시 */
/*.splash {background: #1A294F;}*/
.splash {
    background: #2873FF;
}

.logo-splash {
    width: 80%;
    max-width: 180px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 본인인증 */
.input-wrap,
.select-wrap {
    margin-bottom: 24px;
}

.input-wrap label {
    margin: 0 0 8px 8px;
    display: block;
    font-size: 14px;
}

.select-wrap label {
    margin: 0 0 8px 8px;
    display: block;
    font-size: 14px;
}

.regnum-wrap {
    border: 1px solid #E2E8F0;
    height: 56px;
    line-height: 48px;
    border-radius: 16px;
    background: #fff;
    width: auto;
    box-sizing: border-box;
    padding: 0;
    color: #10192D;
    vertical-align: middle;
    font-size: 16px;
    letter-spacing: -.3px;
    font-weight: 600;
}
.regnum-wrap.active {
    border: 1.5px solid #10192D;
}

.regnum-wrap input[type="text"],
.regnum-wrap input[type="number"] {
    border: none;
    height: 52px;
    line-height: 52px;
    vertical-align: top;
}

.regnum-wrap #inp-regnum1 {
    width: 100px;
    letter-spacing: 1px;
    padding-right: 0;
}

.regnum-wrap #inp-regnum2 {
    width: 30px;
    letter-spacing: 1px;
    padding-right: 0;
}

.regnum-wrap .txt-secret {
    letter-spacing: 2px;
    font-size: 11px;
}

/* Bottom Sheet */
.bottomsheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0px -15px 20px rgba(13, 10, 25, 0.06);
    max-height: 0;
    box-sizing: border-box;
    z-index: 101;
    transition: max-height .5s ease;
}

.bottomsheet.show {
    max-height: 100%;
    transition: max-height .5s ease;
}

.bottomsheet .btn-close {
    position: absolute;
    top: 26px;
    right: 20px;
    width: 24px;
    height: 24px;
    background: url(/images/ic-bottom-close.svg) no-repeat center;
    background-size: 100% 100%;
    border: none;
    font-size: 0;
    padding: 0;
}

.bottomsheet .btn-close2 {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 44px;
    height: 10px;
    background: url(/images/ic-bottom-arrow.svg) no-repeat center;
    background-size: 100% 100%;
    border: none;
    font-size: 0;
    padding: 0;
    transform: translateX(-50%);
}

.bottomsheet h2 {
    margin: 26px 24px 18px;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.6px;
    font-weight: 800;
}

.bottomsheet .bottom-cont {
    padding: 0 24px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    /*max-height: 120vw;*/
}

.bottomsheet .list {
    max-height: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
}

.bottomSheet .list li {
    display: block;
    position: relative;
}

.bottomSheet .list li label {
    display: block;
    padding: 13px 0;
    text-align: left;
    line-height: 1.2;
    font-size: 16px;
    letter-spacing: -.3px;
}

.bottomSheet .list li label .txt-light {
    color: #8E9BAE;
}

.bottomSheet .list li input[type="radio"] {
    display: none;
}

.bottomSheet.show~.dim {
    opacity: 1;
    visibility: visible;
}

.bottomSheet .list li.allcheck {
    border-bottom: 1px solid #E2E8F0;
    margin: 5px 0 20px;
    padding: 5px 0;
}

.bottomSheet .list li.short label {
    padding: 6px 0;
}

.bottomSheet .list li.allcheck label {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.6px;
}

.bottomSheet .list li .btn-view {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    font-size: 0;
    padding: 0;
    background: url(/images/ic-view.svg) no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    right: 0;
    top: 16px;
    transform: translateY(-50%) rotate(90deg);
    letter-spacing: -.3px;
    transition: transform 200ms ease-in-out;
}

.bottomSheet .list li .btn-view2 {
    display: inline-block;
    width: auto;
    height: 24px;
    vertical-align: middle;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.3px;
    text-decoration-line: underline;
    color: #8E9BAE;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: -.3px;
}

.bottomSheet .list li .sublist {
    background: #F1F5F9;
    border-radius: 16px;
    display: block;
    max-height: 0;
    overflow: hidden;
}

.bottomSheet .list li .sublist ul {
    padding: 20px 32px;
}

.bottomSheet .list li .sublist li {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #64748B;
    margin-bottom: 14px;
}

.bottomSheet .list li .sublist li a {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    text-decoration-line: underline;
    color: #64748B;
}

.bottomSheet .list li .sublist li:last-child {
    margin-bottom: 0;
}

.bottomSheet .list li.opened {
    padding-bottom: 22px;
    padding-top: 10px;
}

.bottomSheet .list li.opened .sublist {
    max-height: 100%;
}

.bottomSheet .list li.opened .btn-view {
    transform: translateY(-20%) rotate(-90deg);
}

.bottomSheet .bottom-cont.fw {
    padding: 20px 0;
}

.bottomSheet .bottom-cont.fw .list li .bt {
    display: block;
    padding: 15.5px 24px;
    text-align: left;
    line-height: 1.2;
    font-size: 16px;
    letter-spacing: -.3px;
    margin: 0;
    box-sizing: border-box;
}

.bottomSheet .bottom-cont.fw .list li .bt:active {
    background: rgba(16, 25, 45, 0.08);
}

.input-certinum {
    position: relative;
}

.input-certinum .certinum {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #8E9BAE;
    font-size: 14px;
}

.text-wrap {
    text-align: center;
    padding-top: 8px;
}

.text-wrap p {
    font-size: 14px;
    letter-spacing: -.3px;
    line-height: 1.2;
    color: #10192D;
    display: inline-block;
}

.text-wrap .btn-text {
    display: inline-block;
    width: auto;
    color: #2873FF;
    font-weight: 600;
    letter-spacing: -.3px;
    font-size: 14px;
    padding: 0;
}

.card-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.card-list li .btn-card {
    text-align: center;
    display: block;
    background: #F8FAFC;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    padding: 10.5px;
}

.card-list li .btn-card img {
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
}

.card-list li .btn-card p {
    display: block;
    font-size: 14px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.3px;
    color: #10192D;
}

.bottomsheet .btn-close3 {
    width: 48px;
    height: 32px;
    background: url(/images/ic-close.svg) no-repeat center;
    background-size: cover transparent;
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0;
}

.bottomsheet .head {
    position: relative;
    margin-top: 8px;
}

.bottomsheet .head h2 {
    font-size: 20px !important;
}

.bottomsheet .head .btn-refresh {
    position: absolute;
    right: 24px;
    top: 24px;
    font-size: 16px;
}

.bottomsheet .head .btn-refresh img {
    vertical-align: middle;
    margin-right: 2px;
    width: 20px;
}

.qrpay-wrap {
    text-align: center;
}

.qrpay-wrap .qr {
    width: 167px;
}

.qrpay-wrap .time {
    color: #2873FF;
    font-size: 16px;
    font-weight: 700;
    margin-top: -12px;
    margin-bottom: 62px;
}

.card-slider {
    margin: 0 -24px 48px;
}

.card-slider li {
    padding: 0 7.5px;
    box-sizing: border-box;
}

.card-slider .card-item {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 0;
    padding-top: 58.3%;
    position: relative;
}

.card-slider .card-item.bg1 {
    background-image: url(/images/bg-card1.jpg);
}

.card-slider .card-item.bg2 {
    background-image: url(/images/bg-card2.jpg);
}

.card-slider .card-item h3 {
    position: absolute;
    top: 19px;
    left: 19px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.6px;
    color: #fff;
}

.card-slider .card-item .logo {
    color: #fff;
    position: absolute;
    top: 25px;
    right: 16px;
}

.card-slider .card-item .price {
    color: #fff;
    font-size: 20px;
    position: absolute;
    bottom: 23px;
    left: 23px;
}

.card-slider .card-item .price strong {
    margin-right: 7px;
    display: inline-block;
}

.card-slider .slick-dots {
    position: absolute;
    bottom: -24px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.btn-border {
    background: #FFFFFF;
    border: 1px solid #DBE0DE;
    box-sizing: border-box;
    border-radius: 12px;
    width: 100%;
    height: 56px;
    line-height: 54px;
    font-size: 16px;
    font-weight: 700;
    display: block;
}

.btn-border img {
    width: 35px;
    margin-right: 16px;
    vertical-align: middle;
}

.btn-border span {
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 2px;
}

/* Header Sheet */
.headersheet {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0px 15px 20px rgba(13, 10, 25, 0.06);
    max-height: 0;
    box-sizing: border-box;
    z-index: 9;
    transition: max-height .5s ease;
    overflow: hidden;
}

.headersheet.show {
    max-height: 100%;
    transition: max-height 1s ease;
}

.headersheet .inner {
    padding: 24px 20px 40px;
    overflow: auto;
    max-height: 120vw;
}

.dim2 {
    position: fixed;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    background: rgba(6, 10, 29, 0.6);
    backdrop-filter: blur(10px);
    z-index: 8;
    opacity: 0;
    transition: all .5s;
    visibility: hidden;
}

.headersheet.show~.dim2 {
    opacity: 1;
    visibility: visible;
}

.headersheet .inner .thumb-list {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 이용약관 */
.txt-date {
    color: #8E9BAE;
    font-size: 16px;
    letter-spacing: -.3px;
    line-height: 1.2;
    text-align: left;
}

.terms-item h4 {
    color: #333D4B;
    font-size: 16px;
    letter-spacing: -.3px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 16px;
}

.terms-item h4 strong {
    color: #2873FF;
    margin-right: 8px;
}

.terms-box {
    padding: 16px;
    background: #F1F5F9;
    border-radius: 10px;
    line-height: 24px;
    color: #10192D;
    margin-bottom: 32px;
}

.txt-para {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -.3px;
    color: #10192D;
}

.terms-bt {
    padding: 0 24px 8px;
}

/* 로그인 */
.wrap.login {
    background: #10192D;
}

.wrap.login header {
    background: transparent;
}

.wrap.login header .btn-prev {
    background-image: url(/images/ic-prev-arrow-w.svg);
}

.pinnum-wrap {
    text-align: center;
    position: relative;
    height: calc(100% - 272px);
}

.pinnum-wrap .inner {
    position: absolute;
    top: calc(50% - 100px);
    left: 0;
    width: 100%;
}

.pinnum-wrap h3 {
    color: #fff;
    margin-bottom: 8px;
}

.pinnum-wrap .txt1 {
    color: #8E9BAE;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -.3px;
    margin-bottom: 24px;
}

.pinnum-wrap .txt1.error {
    color: #F65556;
    border: none !important;
}

.pinnum-wrap .txt2 {
    position: absolute;
    bottom: 32px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 140%;
    color: #8E9BAE;
    text-decoration: underline;
    display: block;
}

.pinnum-wrap .pinnum {
    font-size: 0;
}

.pinnum-wrap .pinnum li {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 8px;
    border-radius: 15px;
    background: #64748B;
    opacity: .3;
}

.pinnum-wrap .pinnum li.active {
    background: #2873FF;
    opacity: 1;
}

.keypad-wrap {
    height: 272px;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.keypad-wrap button {
    font-size: 24px;
    font-weight: 500;
}

.keypad-wrap button:nth-last-of-type(2) {
    grid-column: 2 / 2;
    grid-row: 4 / 4;
}

.keypad-wrap button.btn-del {
    font-size: 0;
    background: url(/images/ic-key-del.svg) no-repeat center;
    background-size: 28px 28px;
    grid-column: 3 / 3;
    grid-row: 4 / 4;
}

/* 회원가입 */
.radio-wrap {
    display: block;
    font-size: 0;
}

.radio-wrap li {
    display: block;
    margin-bottom: 16px;
}

.radio-wrap li input[type=radio] {
    display: none;
}

.radio-wrap li input[type=radio]~label {
    display: block;
    border: 1px solid #E2E8F0;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 16px;
    text-align: left;
    min-height: 80px;
    position: relative;
    font-size: 0;
}

.radio-wrap li input[type=radio]~label i {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-right: 16px;
    border-radius: 12px;
    background: #F1F5F9;
    border: none;
    vertical-align: middle;
    overflow: hidden;
}

.radio-wrap li input[type=radio]~label dl {
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
}

.radio-wrap li input[type=radio]~label dt {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #10192D;
    letter-spacing: -.6px;
    line-height: 1.2;
}

.radio-wrap li input[type=radio]~label dd {
    display: block;
    font-size: 14px;
    color: #64748B;
    letter-spacing: -.3px;
    line-height: 1.2;
}

.radio-wrap li input[type=radio]~label::after {
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background: url(/images/ic-radio-off.svg) no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

.radio-wrap li input[type=radio]:checked~label {
    background: #E9F1FF;
    border-color: #E9F1FF;
}

.radio-wrap li input[type=radio]:checked~label::after {
    background-image: url(/images/ic-radio-on.svg);
}

.radio-wrap li input[type=radio]~label .tit {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: #10192D;
    letter-spacing: -.6px;
    line-height: 1.2;
}

.radio-wrap li input[type=radio]~label .info {
    height: 34px;
    padding: 8px 16px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 8px;
    background-color: #E9F1FF;
    font-size: 12px;
    line-height: 1.5;
    color: #2873ff;
    box-sizing: border-box;
    font-weight: 600;
    z-index: 2;
}

.joincomplete-wrap {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.joincomplete-wrap>div {
    flex: 0;
}

.joincomplete-wrap .img {
    background: url(/images/ic-joincomplete1.svg) no-repeat 50% 50% / contain;
    height: 40vh;
}

.joincomplete-wrap button {
    flex: 0;
}

/* 온보딩 */
.wrap.full.scroll {
    overflow: visible;
}

.wrap.full.scroll .flex-1 {
    padding-bottom: 40px;
}

.wrap.full.scroll .flex-0 {
    min-height: 72px;
}

.onboarding-wrap {
    text-align: center;
    width: 100%;
}

.onboarding-wrap .slickWrap {
    position: relative;
    padding-top: 70px;
}

.onboarding-wrap .slickWrap::before {
    content: '';
    width: 100%;
    height: 450px;
    position: absolute;
    top: 0;
    left: 0;
}

/* .onboarding-wrap .slick-list {overflow:visible} */
.onboarding-wrap .slickWrap .textArea {
    min-height: 118px;
    position: relative;
    z-index: 10;
    width: 100%;
    margin-bottom: 36px;
}

.onboarding-wrap .slickWrap.first::before {
    background: #F65556;
}

.onboarding-wrap .slickWrap.second::before {
    background: #2873FF
}

.onboarding-wrap .slickWrap.third::before {
    background: #22C36B
}

.onboarding-wrap .slickWrap.fourth::before {
    background: #FACC15
}

.onboarding-wrap .slickWrap .title {
    font-weight: 700;
    font-size: 30px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.6px;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.onboarding-wrap .slickWrap .introText {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    letter-spacing: -0.5px;
    color: #FFFFFF;
}

.onboarding-wrap .slickWrap .imgWrap {
    position: relative;
    z-index: 10;
    margin: 0 auto 0;
    max-width: 200px;
    max-height: 400px;
}

.onboarding-wrap .slickWrap .imgWrap img {
    width: 100%;
    height: 100%;
}

.slick-dots {
    position: fixed;
    bottom: 90px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 8px;
    height: 8px;
    cursor: pointer;
    border: 0;
    outline: none;
    background: #E2E8F0;
    border-radius: 8px;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}

.slick-dots li.slick-active button {
    background: #2873FF;
}

.flex-0.onboarding {
    position: sticky;
    bottom: 0;
}

.flex-0.onboarding .btn-primary {
    background-color: #10192D;
}

/* 로딩 스피너 */
.loadingWrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
}

.loadingWrap.show {
    display: block;
}

.loadingDim {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(6, 10, 29, 0.2);
    width: 100%;
    height: 100vh;
    z-index: 900;
}

.loadingWrap.show+.loadingDim {
    display: block;
}

.loadingWrap .imgWrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 35px;
}

.loadingWrap .imgWrap img {
    width: 100%;
    height: 100%;
    animation: loading 1000ms linear infinite
}

@media screen and (max-width:375px) {
    .onboarding-wrap .slickWrap::before {
        height: 350px;
    }

    .onboarding-wrap .slickWrap .imgWrap {
        width: 150px;
    }

}


@keyframes loading {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 리스트 */
.list-a-wrap {
    display: block;
}

.list-a-wrap li {
    display: block;
    position: relative;
    padding-left: 56px;
    height: 48px;
    margin-bottom: 24px;
}

.list-a-wrap li:last-child {
    magin-bottom: 0;
}

.list-a-wrap .ico {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
}

.list-a-wrap h4 {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.3px;
    color: #10192D;
    margin-bottom: 4px;
}

.list-a-wrap p {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -.3px;
    color: #8E9BAE;
}

.list-b-wrap {
    display: block;
}

.list-b-wrap li {
    display: block;
}

.list-b-wrap li a {
    display: block;
    position: relative;
    padding: 17px 20px 17px 82px;
}

.list-b-wrap li a:active {
    background: rgba(16, 25, 45, 0.08);
}

.list-b-wrap .ico {
    width: 46px;
    height: 46px;
    border: none;
    position: absolute;
    top: 17px;
    left: 20px;
    border-radius: 23px;
}

.list-b-wrap h4 {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.3px;
    color: #10192D;
    margin-bottom: 4px;
}

.list-b-wrap p {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -.3px;
    color: #8E9BAE;
}

.list-c-wrap {
    display: block;
    background: #FFFFFF;
    box-shadow: 0px 0px 2px rgba(43, 54, 70, 0.06), 0px 2px 8px rgba(43, 54, 70, 0.04);
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    margin-bottom: 34px;
}

.list-c-wrap li {
    display: block;
    border-bottom: 1px solid #F1F5F9;
}

.list-c-wrap.borderNone {
    border: none;
    box-shadow: 0px 4px 12px rgba(16, 25, 45, 0.08);
}

.list-c-wrap.borderNone li {
    border: none;
}

.list-c-wrap li:last-child {
    border-bottom: none;
}

.list-c-wrap li a {
    display: grid;
    position: relative;
    padding: 19px 37px 19px 20px;
    background: url(/images/ic-arrow-right-g.svg) no-repeat calc(100% - 13px) 50%;
    background-size: 24px 24px;
    grid-template-columns: 58px minmax(0, 100%) minmax(0, auto);
    align-items: center;
}

.list-c-wrap li a:active {
    background-color: rgba(16, 25, 45, 0.08);
}

.list-c-wrap .ico {
    width: 42px;
    height: 42px;
    border: none;
    padding-right: 16px;
}

.list-c-wrap.etc .tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-c-wrap .tit h4 {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.3px;
    color: #10192D;
    margin-bottom: 4px;
}

.list-c-wrap.borderNone .tit h4 {
    margin-bottom: 0;
}

.list-c-wrap .tit p {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -.3px;
    color: #8E9BAE;
}

.list-c-wrap .badge {
    font-size: 12px;
    line-height: 150%;
    letter-spacing: -0.3px;
    background: #E9F1FF;
    color: rgba(40, 115, 255, 1);
    box-sizing: border-box;
    border-radius: 50px;
    padding: 2px 6px;
    font-weight: 600;
    margin-left: 8px;
}

.list-c-wrap .badge.c1 {
    background: #E9F1FF;
    color: rgba(40, 115, 255, 1);
}

.list-c-wrap .badge.c2 {
    background: rgba(40, 115, 255, 1);
    color: #fff;
}

.list-d-wrap {
    display: block;
    margin: 0 -24px;
    border-bottom: 1px solid #F1F5F9;
}

.list-d-wrap li {
    display: block;
}

.list-d-wrap li:last-child {
    border-bottom: none;
}

.list-d-wrap li a {
    display: grid;
    position: relative;
    padding: 19px 20px;
    grid-template-columns: 58px minmax(0, 100%) minmax(0, auto);
    align-items: center;
}

.list-d-wrap li a:active {
    background-color: #E9F1FF;
}

.list-d-wrap .ico {
    width: 42px;
    height: 42px;
    border: none;
    padding-right: 16px;
}

.list-d-wrap .tit {}

.list-d-wrap .tit h4 {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.3px;
    color: #10192D;
    margin-bottom: 4px;
}

.list-d-wrap .tit p {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -.3px;
    color: #8E9BAE;
}

.list-d-wrap .badge {
    font-size: 12px;
    line-height: 150%;
    letter-spacing: -0.3px;
    background: #E9F1FF;
    color: rgba(40, 115, 255, 1);
    box-sizing: border-box;
    border-radius: 50px;
    padding: 2px 6px;
    font-weight: 600;
    margin-left: 8px;
}

.list-d-wrap .badge.c1 {
    background: #E9F1FF;
    color: rgba(40, 115, 255, 1);
}

.list-d-wrap .badge.c2 {
    background: rgba(40, 115, 255, 1);
    color: #fff;
}

.list-d-wrap li input[type=radio] {
    display: none;
}

.list-d-wrap li input[type=radio]~label {
    display: block;
    box-sizing: border-box;
    padding: 16px;
    text-align: left;
    min-height: 80px;
    position: relative;
    font-size: 0;
}

.list-d-wrap li input[type=radio]~label:active,
.payitem:active {
    background-color: rgba(16, 25, 45, 0.08);
}

.list-d-wrap li input[type=radio]~label i {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-right: 16px;
    border-radius: 12px;
    background: #F1F5F9;
    border: none;
    vertical-align: middle;
    overflow: hidden;
}

.list-d-wrap li input[type=radio]~label dl {
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
}

.list-d-wrap li input[type=radio]~label dt {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #10192D;
    letter-spacing: -.6px;
    line-height: 1.2;
}

.list-d-wrap li input[type=radio]~label dd {
    display: block;
    font-size: 14px;
    color: #64748B;
    letter-spacing: -.3px;
    line-height: 1.2;
}

.list-d-wrap li input[type=radio]~label::after {
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background: url('') no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

.list-d-wrap li input[type=radio]:checked~label {
    background: #E9F1FF;
}

.list-d-wrap li input[type=radio]:checked~label::after {
    background-image: url(/images/ic-radio-on2.svg);
}

.list-d-wrap li input[type=radio]~label .tit {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: #10192D;
    letter-spacing: -.6px;
    line-height: 1.2;
}

.list-d-wrap li input[type=radio]~label .info,
.payitem .info {
    height: 34px;
    padding: 8px 16px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 8px;
    background-color: #E9F1FF;
    font-size: 12px;
    line-height: 1.5;
    color: #2873ff;
    box-sizing: border-box;
    font-weight: 600;
    z-index: 2;
}

.list-d-wrap li input[type=radio]~label .info2,
.payitem .info2 {
    height: 23px;
    padding: 0 6px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 23px;
    background-color: #E9F1FF;
    font-size: 12px;
    line-height: 23px;
    color: #2873ff;
    box-sizing: border-box;
    font-weight: 600;
    z-index: 2;
}

.list-e-wrap {
    display: block;
    margin: 0 -24px;
    border-bottom: 1px solid #F1F5F9;
}

.list-e-wrap li {
    display: block;
}

.list-e-wrap li:last-child {
    border-bottom: none;
}

.list-e-wrap li input[type=radio] {
    display: none;
}

.list-e-wrap li input[type=radio]~label {
    display: block;
    box-sizing: border-box;
    padding: 16px 24px;
    text-align: left;
    min-height: 50px;
    position: relative;
    font-size: 16px;
    color: #10192D;
    letter-spacing: -.3px;
    line-height: 1.2;
}

.list-e-wrap li input[type=radio]~label:active {
    background-color: rgba(16, 25, 45, 0.08);
}

.list-e-wrap li input[type=radio]~label::after {
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background: url('') no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

.list-e-wrap li input[type=radio]:checked~label {
    background: #E9F1FF;
    color: #2873FF;
}

.list-e-wrap li input[type=radio]:checked~label::after {
    background-image: url(/images/ic-radio-on2.svg);
}

.list-e-wrap li input[type=radio]~label h4 {
    font-weight: 400;
}

.list-e-wrap li input[type=radio]:checked~label h4 {
    font-weight: 600;
}

.bo-bono {
    border-bottom: none !important;
}

.list-f-wrap {
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 8px;
}

.list-f-wrap li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-f-wrap li p {
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #8E9BAE;
}


.list-g-wrap {
    display: block;
}

.list-g-wrap li {
    display: block;
    border-radius: 16px;
    box-shadow: 0px 0px 2px rgba(43, 54, 70, 0.06), 0px 2px 8px rgba(43, 54, 70, 0.04);
    margin-bottom: 8px;
    border: 1px solid #E2E8F0;
}

.list-g-wrap li a {
    display: block;
    position: relative;
    padding: 17px 20px 17px 82px;
}

.list-g-wrap li a:active {
    background: rgba(16, 25, 45, 0.08);
}

.list-g-wrap .ico {
    width: 46px;
    height: 46px;
    border: none;
    position: absolute;
    top: 17px;
    left: 20px;
    border-radius: 23px;
}

.list-g-wrap h4 {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.3px;
    color: #10192D;
    margin-bottom: 4px;
}

.list-g-wrap p {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -.3px;
    color: #8E9BAE;
}



/* 메인 */
.main-wrap {
    padding: 0 20px 20px;
    height: 100%;
    overflow: auto;
    background: #ffffff;
}

.main-wrap .header {
    text-align: left;
    height: 74px;
    padding: 32px 0 8px;
    display: block;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.main-wrap .header h1 {
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.6px;
    margin-left: 4px;
    float: left;
}

.main-wrap .header .i-badge {
    float: right;
    width: 40px;
    height: 40px;
    background: url(/images/ic-notice.svg) no-repeat;
    background-size: 100% 100%;
    border-radius: 8px;
}

.main-wrap .header .i-badge.on {
    background-image: url(/images/ic-notice-on.svg);
}

.main-wrap .header .i-badge:active {
    background-color: rgba(16, 25, 45, 0.08);
}

.main-wrap .moneycard-wrap {
    background: linear-gradient(90deg, #3279FF 0%, #1253C9 100%);
    box-shadow: 0px 2px 2px rgba(22, 92, 221, 0.25), 0px 6px 4px rgba(22, 92, 221, 0.15);
    border-radius: 12px;
    height: 168px;
    box-sizing: border-box;
    color: #fff;
    padding: 22px 20px;
    position: relative;
    margin-bottom: 8px;
}

.main-wrap .moneycard-wrap h2 {
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 6px;
}

.main-wrap .moneycard-wrap p {
    font-weight: 700;
    font-size: 28px;
    line-height: 28px;
    letter-spacing: -0.6px;
    color: #fff;
    margin-bottom: 32px;
}

.main-wrap .moneycard-wrap p strong {
    margin-right: -4px;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -.6px;
    color: #fff;
}

.main-wrap .moneycard-wrap .btn-more {
    position: absolute;
    top: 20px;
    right: 18px;
    width: 24px;
    height: 24px;
    background: url(/images/ic-more.svg) no-repeat;
    background-size: 100% 100%;
}

.main-wrap .moneycard-wrap .moneycard-foot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 52px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 0 0 12px 12px;
}

.main-wrap .moneycard-wrap .moneycard-foot select,
.main-wrap .moneycard-wrap .moneycard-foot .select {
    min-width: 140px;
    width: auto;
    height: 100%;
    background: url(/images/ic-select-arrow-w.svg) no-repeat calc(100% - 17px) 50% transparent;
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.3px;
    float: left;
    white-space: nowrap;
}

.main-wrap .moneycard-wrap .moneycard-foot select:active,
.main-wrap .moneycard-wrap .moneycard-foot .select:active {
    background-color: rgba(16, 25, 45, 0.2);
}

.main-wrap .moneycard-wrap .moneycard-foot .btn-add {
    width: auto;
    height: 100%;
    background: url(/images/ic-add-w.svg) no-repeat 0 50% transparent;
    background-size: 16px 16px;
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.3px;
    float: left;
    white-space: nowrap;
    margin-left: 20px;
    padding-left: 20px;
}

.main-wrap .moneycard-wrap .moneycard-foot .btn-wrap {
    float: right;
    width: auto;
    padding-right: 8px;
    font-size: 0;
}

.main-wrap .moneycard-wrap .moneycard-foot .btn-wrap button {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: #fff;
    padding: 0 16px;
    cursor: pointer;
    height: 52px;
    line-height: 52px;
    position: relative;
    margin-right: -1px;
}

.main-wrap .moneycard-wrap .moneycard-foot .btn-wrap button:active {
    background-color: rgba(16, 25, 45, 0.2);
}

.main-wrap .moneycard-wrap .moneycard-foot .btn-wrap button::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    height: 14px;
    width: 1px;
    background: rgba(255, 255, 255, .4);
    transform: translateY(-50%);
}

.main-wrap .moneycard-wrap .moneycard-foot .btn-wrap button:nth-last-of-type(1)::after {
    display: none;
}

.main-wrap .quick-wrap {
    display: grid;
    height: 84px;
    margin-bottom: 8px;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 4px;
    align-items: stretch;
    justify-items: stretch;
}

.main-wrap .quick-wrap li {
    text-align: center;
    position: relative;
}

.main-wrap .quick-wrap li:not(:last-child)::after {
    content: '';
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: block;
    width: 1px;
    height: 32px;
    position: absolute;
    background: #E2E8F0;
}

.main-wrap .quick-wrap li a {
    display: block;
    font-size: 0;
    height: 100%;
    border-radius: 8px;
}

.main-wrap .quick-wrap li a:active {
    background: rgba(16, 25, 45, 0.08);
}

.main-wrap .quick-wrap li i {
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-bottom: 8px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 16px;
}

.main-wrap .quick-wrap li .i-history {
    background-image: url(/images/ic-quick-history.svg);
}

.main-wrap .quick-wrap li .i-coupon {
    background-image: url(/images/ic-quick-coupon.svg);
}

.main-wrap .quick-wrap li .i-cashback {
    background-image: url(/images/ic-quick-cashback.svg);
}

.main-wrap .quick-wrap li .i-benefit {
    background-image: url(/images/ic-quick-benefit.svg);
}

.main-wrap .quick-wrap li p {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -.5px;
}

.main-wrap .quick-wrap li p strong {
    font-weight: 700;
    margin-left: 3px;
}

.main-wrap .homeBanner {
    padding-bottom: 38px;
}

.main-wrap .homeBanner.alone {
    padding-bottom: 12px;
}

.main-wrap .banner-wrap {
    background-color: #E2E8F0;
    border-radius: 16px;
}

.main-wrap .homeBanner .banner-wrap {
    background-color: #ffffff;
}

.main-wrap .homeBanner .banner-wrap .slick-list {
    border-radius: 16px;
    isolation: isolate;
}

.main-wrap .banner-wrap .slideWrap .imgWrap {
    width: 100%;
    height: auto;
    border-radius: 16px;
    overflow: hidden;
}

.main-wrap .banner-wrap .slideWrap .imgWrap img {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
}

.main-wrap .banner-wrap .slick-dots {
    position: absolute;
    bottom: -22px;
}

.main-wrap .banner-wrap .slick-dots li.slick-active button[type="button"] {
    background: #64748B;
}

.main-wrap .banner-wrap .slick-dots li button[type="button"] {
    background: #E2E8F0;
    width: 6px;
    height: 6px;
}

.main-wrap .banner-wrap a:active {
    background-color: #cbd1dc;
}

.main-wrap .banner-wrap a h2 {
    margin-bottom: 4px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -.6px;
    padding-right: 70px;
    position: relative;
    z-index: 2;
}

.main-wrap .banner-wrap a p {
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: #64748B;
    padding-right: 70px;
    position: relative;
    z-index: 2;
}

/* .main-wrap .banner-wrap a img {position: absolute; top: 0; right: 0; height: 100%; z-index: 1;} */
.usage-wrap,
.affiliate-wrap {
    margin-bottom: 16px;
    background: #FFFFFF;
    box-shadow: 0px 4px 12px rgba(16, 25, 45, 0.08);
    border-radius: 12px;
    padding-bottom: 10px;
}

.main-wrap .head {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.main-wrap .head a:not(.payrokCard) {
    display: block;
    width: 100%;
    height: 100%;
    padding: 24px 20px 16px;
}

.main-wrap .head a:active {
    background: rgba(16, 25, 45, 0.08);
}

.main-wrap .head h2 {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -.6px;
}

.main-wrap .head .btn-all {
    position: absolute;
    top: 25px;
    right: 20px;
    font-size: 16px;
    line-height: 1.2;
    text-align: right;
    letter-spacing: -.3px;
    color: #64748B;
}

.bottomsheet .pop-content {
    background: #E2E8F0;
    border-radius: 20px 20px 0 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
}

.bottomsheet .pop-content .img-pop {
    width: 100%;
}

.bottomsheet .pop-btn-wrap {
    background: #fff;
    height: 60px;
    padding: 10px;
}

.bottomsheet .pop-btn-wrap2.flex {
    display: flex;
    justify-content: center;
}

.bottomsheet .pop-btn-wrap .btn-noagain {
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.3px;
    float: left;
}

.bottomsheet .pop-btn-wrap .btn-pop-close {
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.3px;
    font-weight: 600;
    float: right;
}

.bottomsheet .pop-btn-wrap2 {
    background: #fff;
    height: 56px;
    padding: 0;
    margin: 0 -24px -8px;
}

.bottomsheet .pop-btn-wrap2 .btn-l {
    height: 56px;
    padding: 0 20px;
    line-height: 56px;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.3px;
    float: left;
    color: #2873FF;
    width: 50%;
    vertical-align: top;
}

.bottomsheet .pop-btn-wrap2 .btn-l::after {
    content: '';
    height: 24px;
    width: 1px;
    background: #F1F5F9;
    position: absolute;
    left: 50%;
}

.bottomsheet .pop-btn-wrap2 .btn-r {
    height: 56px;
    padding: 0 20px;
    line-height: 56px;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.3px;
    float: right;
    color: #2873FF;
    width: 50%;
    vertical-align: top;
}

.bottomsheet .pop-btn-wrap2.flex .btn-r {
    float: initial;
}

.bottomsheet .pop-btn-wrap2 .btn-c {
    height: 56px;
    padding: 0 20px;
    line-height: 56px;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: #2873FF;
    width: 100%;
    vertical-align: top;
}

.bottomsheet .pop-btn-wrap2 button:active {
    background: rgba(16, 25, 45, 0.08);
}

.btn-autocharge {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    height: 56px;
    background: url(/images/ic-arrow-right-g.svg) no-repeat calc(100% - 13px) 50% #1A294F;
    background-size: 24px 24px;
    border-radius: 16px;
    width: 100%;
    margin-bottom: 20px;
    color: #fff;
    text-align: left;
    font-weight: 600;
    font-size: 16px !important;
    line-height: 120%;
    letter-spacing: -0.3px;
    text-align: left !important;
    padding: 0 20px;
}

.btn-autocharge:active {
    background: url(/images/ic-arrow-right-g.svg) no-repeat calc(100% - 13px) 50% linear-gradient(0deg, rgba(16, 25, 45, 0.2), rgba(16, 25, 45, 0.2)), #1A294F !important;
}

.btn-autocharge span {
    vertical-align: middle;
}

.btn-autocharge .badge {
    font-size: 12px;
    line-height: 150%;
    letter-spacing: -0.3px;
    background: #0EA5E9;
    color: #fff;
    box-sizing: border-box;
    border-radius: 50px;
    padding: 2px 6px;
    font-weight: 600;
    margin-left: 8px;
}

.scrnum {
    width: 24px;
    margin-right: 8px;
}

.subtitle-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    margin-bottom: 12px;
}

.subtitle-wrap .ico {
    flex: 0 0 20px;
    margin-right: 8px;
}

.subtitle-wrap h4 {
    flex: 1 1 auto;
    text-align: left;
}

.subtitle-wrap .btn-go {
    font-size: 12px;
    line-height: 120%;
    letter-spacing: -0.3px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    box-sizing: border-box;
    border-radius: 50px;
    padding: 9px 12px;
    color: #10192D;
}

.subtitle-wrap .btn-go:active {
    background: linear-gradient(0deg, rgba(16, 25, 45, 0.08), rgba(16, 25, 45, 0.08)), #F1F5F9;
    border: 1px solid #E2E8F0;
}

/* 충전 */
.chargeprice-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chargeprice-wrap .chgargeprice-box {
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #10192D;
    border-radius: 12px;
    font-size: 22px;
    margin-bottom: 16px;
    height: 94px;
    position: relative;
}

.chargeprice-wrap .chgargeprice-box label {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #64748B;
    margin: 0 0 8px;
    display: block;
}

.chargeprice-wrap .chgargeprice-box span {
    display: inline-block;
    height: 29px;
    line-height: 27px;
    font-size: 22px;
    vertical-align: middle;
    margin-left: 5px;
}

.chargeprice-wrap .chgargeprice-box .inp-price {
    height: 29px;
    line-height: 27px;
    display: inline-block;
    padding: 0;
    border: none;
    border-radius: 0;
    vertical-align: middle;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.6px;
    color: #10192D;
    width: auto;
    margin-left: 0;
    min-width: 13.55px;
    caret-color: #2873FF;
}

.chargeprice-wrap .chgargeprice-box input.inp-price {
    width: calc(100% - 50px);
}

.chargeprice-wrap .chgargeprice-box .inp-price:focus {
    outline: none !important;
}

.chargeprice-wrap .chgargeprice-box .inp-price[placeholder]:empty::before {
    content: attr(placeholder);
    color: #E2E8F0;
    font-size: 24px;
    font-weight: 600;
}

/* .chargeprice-wrap .chgargeprice-box .inp-price[placeholder]:empty:focus::before {content: '';} */
.chargeprice-wrap .chgargeprice-box .inp-price::placeholder {
    color: #E2E8F0;
    font-size: 24px;
    font-weight: 600;
}

.chargeprice-wrap .chgargeprice-box.error {
    border: 1px solid #F65556;
}

.chargeprice-wrap .chgargeprice-box.error label {
    color: #F65556;
}

.chargeprice-wrap .chgargeprice-box.error .inp-price {
    color: #F65556;
}

.chargeprice-wrap .chgargeprice-box.error span {
    color: #F65556;
}

.chargeprice-wrap .priceset {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: 40px;
    gap: 8px;
    margin-bottom: 20px;
}

.chargeprice-wrap .priceset .btn-price {
    background: #F1F5F9;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #64748B;
}

.charge-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 8px;
}

.charge-list dt {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #8E9BAE;
    height: 17px;
    margin-bottom: 10px;
}

.charge-list dd {
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    text-align: right;
    letter-spacing: -0.3px;
    color: #10192D;
    height: 17px;
    margin-bottom: 10px;
}

.charge-list dd .ico {
    width: 24px;
}

.charge-list dd select,
.charge-list dd .select {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    border: none;
    background-position: 100% 50%;
    width: auto;
    padding: 0 20px 0 0;
    border-radius: 0;
    vertical-align: middle;
}

.charge-list dd .select.bgNone {
    background: transparent;
    padding-right: 0;
    font-weight: 600;
}

.charge-list dd span {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    border: none;
    width: auto;
    padding: 0;
    border-radius: 0;
    vertical-align: middle;
}

.tooltip-wrap {
    text-align: right;
}

.tooltip-wrap .tooltip {
    padding: 0 12px;
    height: 28px;
    background: #1A294F;
    border-radius: 50px;
    display: inline-flex;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 27px;
    text-align: center;
    letter-spacing: -0.3px;
    color: #F8FAFC;
    position: relative;
    margin-bottom: 32px;
    align-items: center;
    box-shadow: 0px 0px 8px rgb(29 32 39 / 15%);
}

.tooltip-wrap .tooltip .ico {
    vertical-align: middle;
    margin-top: -2px;
    width: 14px;
    height: 17px;
    margin-right: 3px;
}

.tooltip-wrap .tooltip::before {
    content: '';
    width: 13px;
    height: 10px;
    position: absolute;
    top: -9px;
    right: 32px;
    background: url(/images/ic-select-arrow2.svg) no-repeat;
    transform: rotate(-180deg);
    background-size: 100% 100%;
}

.tooltip-wrap2 {
    text-align: center;
}

.tooltip-wrap2 .tooltip {
    padding: 0 16px;
    height: 38px;
    background: #1A294F;
    border-radius: 50px;
    display: inline-flex;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 38px;
    text-align: center;
    letter-spacing: -0.3px;
    color: #F8FAFC;
    position: relative;
    align-items: center;
    box-shadow: 0px 0px 8px rgb(29 32 39 / 15%);
}

.tooltip-wrap2 .tooltip>* {
    margin-top: -2px;
}

.tooltip-wrap2 .tooltip .ico {
    vertical-align: middle;
    margin-top: -2px;
    width: 14px;
    height: 17px;
    margin-right: 3px;
    display: inline-block;
}

.tooltip-wrap2 .tooltip::before {
    content: '';
    width: 13px;
    height: 10px;
    position: absolute;
    bottom: -9px;
    left: 50%;
    background: url(/images/ic-select-arrow2.svg) no-repeat;
    transform: translateX(-50%);
    background-size: 100% 100%;
}

.tooltip-wrap3 {
    text-align: center;
}

.tooltip-wrap3 .tooltip {
    padding: 4 16px;
    height: 38px;
    background: #1A294F;
    border-radius: 12px;
    display: flex;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 38px;
    text-align: center;
    letter-spacing: -0.3px;
    color: #F8FAFC;
    position: relative;
    justify-content: center;
    align-items: center;
}

.tooltip-wrap3 .tooltip .ico {
    vertical-align: middle;
    margin-top: -2px;
    width: 14px;
    height: 17px;
    margin-right: 3px;
}

.chargeprice-wrap .notice-wrap {
    position: relative;
    opacity: 1;
    transition: opacity .3s;
}

.hide {
    display: none;
}

.notice-box {
    background: #F8FAFC;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

.chargeprice-wrap .notice-box h3 {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
}

.chargeprice-wrap .notice-box .ico {
    vertical-align: middle;
    margin-right: 8px;
    margin-top: -1px;
}

.chargeprice-wrap .notice-box ul {}

.chargeprice-wrap .notice-box ul li {
    font-size: 14px;
    line-height: 170%;
    letter-spacing: -0.3px;
    color: #64748B;
}

.chargeprice-wrap .notice-box ul li strong {
    font-weight: 600;
}

.chargecomplete-wrap {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.chargecomplete-wrap .group1 {
    flex: 1 1 auto;
}

.chargecomplete-wrap .group1 .ico {
    width: 140px;
}

.chargecomplete-wrap .group1 .ico2 {
    width: 100px;
}

.chargecomplete-wrap .group2 {
    flex: 0 0 auto;
    width: 100%;
}

.infobox {
    height: 34px;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: #E9F1FF;
    font-size: 12px;
    line-height: 1.5;
    color: #2873ff;
    box-sizing: border-box;
    font-weight: 600;
    display: inline-block;
}

.btn-admin {
    font-size: 12px !important;
    color: #10192D;
    letter-spacing: -0.3px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    box-sizing: border-box;
    border-radius: 50px;
    padding: 0 12px;
    height: 32px;
    line-height: 1.2;
    display: inline-block !important;
    margin-left: 14px;
    vertical-align: middle;
}

.btn-admin .ico {
    vertical-align: middle;
    margin-right: 4px;
}

.btn-float {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-bottom: 0 !important;
    border-radius: 0;
}

.nonWayCase {
    padding: 8px 22px 28px;
}

.nonWayCase .nonWayTop {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.nonWayCase .nonWayTop .icon {
    width: 56px;
    height: 56px;
    margin-right: 16px;
}

.nonWayCase .nonWayTop .topText {}

.nonWayCase .nonWayTop p {
    margin-bottom: 4px;
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #8E9BAE;
}

.nonWayCase .nonWayTop span {
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.3px;
    color: #8E9BAE;
}

.nonWayCase .nonWayBottom {}

.nonWayCase .nonWayBottom .addMore {
    padding: 14.5px;
    background: #2873FF;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    letter-spacing: -0.3px;
    color: #FFFFFF;
}

.fw600 {
    font-weight: 600;
}

.chargeBadge.type-1 {
    min-width: 62px;
    min-height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 2px 6px;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    letter-spacing: -0.3px;
    color: #FFFFFF;
    background: #0EA5E9;
    border-radius: 50px;
    box-sizing: border-box;
    line-height: 1;
}

.chargeBadge.type-2 {
    min-width: 62px;
    min-height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 2px 6px;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    letter-spacing: -0.3px;
    color: #2873FF;
    background: #E9F1FF;
    border-radius: 50px;
    box-sizing: border-box;
    line-height: 1;
}

.list-c-wrap.borderNone {
    margin-bottom: 12px;
}

.list-c-wrap.borderNone .cardTitleWrap {
    display: flex;
    justify-content: space-between;
    padding: 24px 20px 16px;
}

.list-c-wrap.borderNone .cardTitleWrap .titleLeft {
    display: flex;
    align-items: center;
}

.list-c-wrap.borderNone .cardTitleWrap .titleLeft .chargeWaySubtitle {
    padding: 0;
}

.list-c-wrap.borderNone .cardTitleWrap .control {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.3px;
    color: #10192D;
}

.list-c-wrap.borderNone .cardTitleWrap .control::before {
    content: '';
    display: block;
    margin-right: 4px;
    width: 16px;
    height: 16px;
    background: url(/images/ic-cog.png) no-repeat center;
    background-size: 100%;
}

.chargeWaySubtitle {
    padding: 25px 20px 17px;
    font-weight: 700;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
}

/* 충전 수단 관리  */
.connectWayIcon {
    width: 42px;
    height: 42px;
    margin-right: 16px;
}

/* 표 */
.tbl-data {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    font-size: 14px;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
}

.tbl-data th,
.tbl-data td {
    border-bottom: 1px solid #F1F5F9;
    padding: 16px 0;
}

.tbl-data th {
    color: #8E9BAE;
    text-align: left;
    min-width: 80px;
}

.tbl-data td {
    color: #10192D;
    text-align: right;
    font-weight: 500;
}

.notice-box2 .tbl-data {
    margin: -8px 0;
}

.notice-box2 .tbl-data tr:last-child th,
.notice-box2 .tbl-data tr:last-child td {
    border-bottom: none !important;
}

/* */
.tab-st-wrap {
    display: flex;
    flex-wrap: nowrap;
    margin: -16px -24px 0;
}

.tab-st-wrap .tab-st-btn {
    font-size: 16px;
    color: #8E9BAE;
    height: 44px;
    line-height: 44px;
    text-align: center;
    flex: 1;
    border-bottom: 2px solid #F1F5F9;
}

.tab-st-wrap .tab-st-btn.active {
    color: #10192D;
    font-weight: 700;
    border-bottom: 2px solid #10192D;
}

.banner1,
.banner2 {
    height: 80px;
    background: #0EA5E9;
    margin: 0 -24px 28px;
    position: relative;
}

.banner1 {
    margin-bottom: 0;
}

.banner1 a {
    display: block;
    padding: 20px 28px 20px 36px;
    border: 0;
}

.banner1 h3 {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -.6px;
    margin-bottom: 4px;
}

.banner1 p {
    color: #fff;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -.3px;
}

.banner1 img {
    position: absolute;
    top: 0;
    right: 28px;
    width: 122px;
    height: 80px;
    border: 0;
}

.banner2 {
    height: 80px;
    background: #8B5CF6;
    margin: 0 -24px 28px;
    position: relative;
}

.banner2 a {
    display: block;
    padding: 20px 28px 20px 36px;
    border: 0;
}

.banner2 h3 {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -.6px;
    margin-bottom: 4px;
}

.banner2 p {
    color: #fff;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -.3px;
}

.banner2 img {
    position: absolute;
    top: 0;
    right: 28px;
    width: 122px;
    height: 80px;
    border: 0;
}

.stit-wrap {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.stit-wrap h2 {
    font-weight: 700;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: -0.6px;
}

.stit-wrap button.btn-here {
    color: #2873FF;
    font-size: 14px;
    letter-spacing: -.3px;
    background: url(/images/ic-gps.svg) no-repeat 0 50%;
    background-size: 18px 18px;
    padding-left: 22px;
    line-height: 24px;
}

.select-wrap2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 12px;
}

.select-gray {
    background: url(/images/ic-arrow-down.svg) no-repeat calc(100% - 16px) 50% / 16px 16px #F1F5F9;
    border: none !important;
    flex: 1;
    color: #64748B;
    font-size: 14px;
    height: 44px;
    line-height: 43px;
    border-radius: 12px;
}

.select-gray:active,
.select-gray:focus {
    border: none !important;
}

.filter-wrap {
    position: relative;
    padding-bottom: 24px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 16px;
}

.filter-wrap .btn-filterall {
    background: url(/images/ic-arrow-down.svg) no-repeat 50% 50% / 18px 18px;
    background-color: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);
    border: none;
    width: 32px;
    height: 32px;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 0;
    z-index: 3;
}

.filter-wrap .mask {
    position: absolute;
    top: 0;
    right: -24px;
    z-index: 2;
    width: 72px;
    height: 32px;
    background: url(/images/ic-mask.svg) no-repeat;
    background-size: 100% 100%;
}

.filter-wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px 8px;
    overflow: hidden;
    height: 32px;
}

.filter-wrap ul li.slick-slide {
    margin-right: 8px;
}

.filter-wrap ul li input[type=radio] {
    display: none;
}

.filter-wrap ul li input[type=radio]~label,
.filter-wrap ul li input[type=checkbox]~label {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #8E9BAE;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0 12px;
    height: 32px;
    line-height: 28px;
    display: block;
}

.filter-wrap ul li input[type=radio]:checked~label,
.filter-wrap ul li input[type=checkbox]:checked~label {
    color: #fff;
    background: #1B2537;
}

.filter-wrap.opened .btn-filterall {
    background-image: url(/images/ic-arrow-up.svg);
}

.filter-wrap.opened .mask {
    display: none;
}

.filter-wrap.opened ul {
    height: auto;
    width: calc(100% - 32px);
}

/* .filter-wrap.opened ul li:nth-child(3) {margin-right: 20px;} */

.list-b-wrap.exp {
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: 32px;
}

.detailimg-slider {
    height: 315px;
    background: #eee;
    margin: -16px -24px 24px;
    overflow: hidden;
    display: block;
    position: relative;
}

.detailimg-slider::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 124px;
    background: url(/images/top-shadow.png) no-repeat top;
    background-size: 100% 100%;
    z-index: 2;
    pointer-events: none;
}

.detailimg-slider li.slick-slide {
    display: block;
    width: 100%;
    height: 315px;
    background-size: cover;
    background-position: center;
}

.detailimg-slider .pagingInfo {
    height: 24px;
    padding: 0 12px;
    line-height: 22px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .4);
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 500;
    position: absolute;
}

.detailimg-slider .pagingInfo strong {
    color: #fff;
}

.detail-cate-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.detail-cate-wrap .txt-cate {
    color: #2873FF;
}

.detail-cate-wrap .txt-use {
    color: #10192D;
}

.detail-cate-wrap .txt-use img {
    vertical-align: middle;
    margin: -3px 4px 0 0;
    width: 20px;
    height: 20px;
}

.stit-wrap {
    margin: 28px 0 18px;
}

.stit-wrap h2 {
    font-weight: 800;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
}

.stit-wrap h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 120%;
    letter-spacint: -0.6px;
    color: #10192D;
}

.detail-store {
    padding: 0 0 4px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 24px;
}

.detail-store li {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #64748B;
    margin-bottom: 20px;
    text-indent: -24px;
    padding-left: 24px;
}

.detail-store li img {
    margin-right: 8px;
    vertical-align: middle;
}

.detail-body {
    background: #F8FAFC;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 24px;
}

.detail-body h3 {
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.3px;
    color: #1B2537;
    margin-bottom: 16px;
}

.detail-body h3 img {
    width: 16px;
    vertical-align: middle;
    margin-right: 8px;
}

.detail-body p {
    font-size: 14px;
    line-height: 170%;
    letter-spacing: -0.3px;
    color: #64748B;
}

.qr-wrap {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 32px 32px 40px;
    text-align: center;
    margin-bottom: 48px;
}

.qr-wrap h3 {
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.6px;
    color: #10192D;
    margin-bottom: 24px;
}

.qr-wrap .qr-img {
    width: 120px;
    height: 120px;
}

/* 송금 */
/* .chargeprice-wrap.sendmoney {grid-template-rows: 110px 60px auto minmax(174px, 100%) 60px;} */
.sendmessage-wrap {
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 100%;
}

.sendmessage-wrap .group1 {
    flex: 1 1 auto;
}

.sendmessage-wrap .group1 .ico {
    width: 88px;
}

.sendmessage-wrap .group2 {
    flex: 0 0 auto;
    width: 100%;
}

.infobox2 {
    height: 40px;
    padding: 11px 16px;
    border-radius: 8px;
    background-color: #E9F1FF;
    font-size: 14px;
    line-height: 1.5;
    color: #2873ff;
    box-sizing: border-box;
    display: inline-block;
}

.infobox2 strong {
    font-weight: 600;
    margin-left: 4px;
}

.infobox3 {
    height: 37px;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: #E9F1FF;
    font-size: 14px;
    line-height: 1.5;
    color: #2873ff;
    box-sizing: border-box;
    display: inline-block;
    letter-spacing: 0;
}

.infobox3 strong {
    font-weight: 600;
    margin-left: 4px;
}

input.inp-search {
    height: 48px;
    line-height: 48px;
    padding: 0 16px 0 46px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.3px;
    border-radius: 12px;
    background: url(/images/ic-search.svg) no-repeat 16px 50% #F1F5F9;
    border: 1px solid transparent !important;
}

input.inp-search::placeholder {
    color: #8E9BAE;
    opacity: .8;
}

.search-result {
    margin: 0 -24px;
    display: block;
}

.search-result li {
    min-height: 16px;
    padding: 14px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.search-result li .name {
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
}

.search-result li .tel {
    text-align: right;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #8E9BAE;
}

/* 쇼핑 */
.btn-coupon {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-sizing: border-box;
    border-radius: 6px;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 8px;
    vertical-align: top;
    font-weight: 600;
    font-size: 12px !important;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #64748B;
    margin: 4px 8px 0 0;
    display: inline-block !important;
    float: right;
}

.shopban-wrap {
    margin: 0 -20px;
    width: auto;
    overflow: hidden;
    padding-bottom: 46px;
}

.shopban-wrap .shopban-list .slick-list {
    margin: 0 -6px;
}

.shopban-wrap .slick-slide {
    box-sizing: border-box;
    margin: 0 6px;
}

.shopban-wrap .slick-slide img {
    width: 100%;
}

.shopban-wrap .slick-dots {
    bottom: auto;
}

.shopban-wrap .slick-dots {
    position: absolute;
    bottom: -24px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.shopban-wrap .slick-dots li {
    width: 6px;
    height: 6px;
    margin: 0 2px !important;
}

.shopban-wrap .slick-dots li button {
    width: 6px;
    height: 6px;
    margin: 0 !important;
}

.shopban-wrap .slick-dots li.slick-active button {
    background: #64748B;
}

.shopban-list {}

.shopban-list li {
    border-radius: 12px;
    padding: 0 !important;
    position: relative;
    height: auto;
}

.shopban-list li img {
    width: 1px;
    border-radius: 12px;
}

.shopban-list li .img {
    position: absolute;
    right: 0;
    top: 0;
    width: 124px;
}

.shopban-list li .text {
    width: calc(100% - 105px);
    display: block;
}

.shopban-list li .text p {
    color: #F1F5F9;
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -.3px;
    display: block;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shopban-list li .text h4 {
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.6px;
    height: 48px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.shopban-wrap .slick-dots li {
    padding: 0 !important;
}

.thumb-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 24px;
    margin-bottom: 24px;
    margin-left: -8px;
    margin-right: -8px;
}

.thumb-list li {
    text-align: center;
}

.thumb-list li a {
    padding: 8px 0;
    text-align: center;
    display: block;
}

.thumb-list li a img {
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
}

.thumb-list li a p {
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    letter-spacing: -1px;
    color: #10192D;
}

.sstit-wrap {
    padding-top: 8px;
    margin-bottom: 16px;
}

.sstit-wrap h3 {
    font-weight: 800;
    font-size: 20px;
    line-height: 120%;
    display: flex;
    align-items: center;
    letter-spacing: -0.6px;
}

.prd-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    gap: 40px 24.5px;
    margin-bottom: 30px;
}

.prd-list li {}

.prd-list li a {
    display: block;
    text-align: left;
}

.prd-list li a .imgWrap {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.prd-list li a .imgWrap::after {
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 100%;
}

.prd-list li .thumb {
    position: absolute;
    margin: 0 auto;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: contain;
}

.prd-list li .store {
    font-weight: 500;
    font-size: 12px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #8E9BAE;
    margin-bottom: 4px;
    margin-top: 8px;
}

.prd-list li h4 {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #10192D;
    min-height: 34px;
    margin-bottom: 12px;
}

.prd-list li .price1 {
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
    margin-right: 4px;
    display: inline-block;
}

.prd-list li .price1 strong {
    font-weight: 600;
    font-size: 18px;
}

.prd-list li .price2 {
    color: #8E9BAE;
    display: inline-block;
    text-decoration: line-through;
    line-height: 18px;
    font-size: 14px;
}

.top-cate-wrap {
    margin: 0 -24px 24px;
    display: block;
    overflow-y: hidden;
    overflow-x: auto;
    height: 78px;
    padding: 0 24px;
    white-space: nowrap;
    font-size: 0;
}

.top-cate-wrap li {
    margin-right: 20px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}

.top-cate-wrap li:last-child {
    margin-right: 0;
}

.top-cate-wrap li a {
    font-size: 12px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.3px;
    color: #10192D;
}

.top-cate-wrap li a.active {
    font-weight: 600;
}

.top-cate-wrap li img {
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
    border: 1px solid #F1F5F9;
    border-radius: 50px;
}

.top-cate-wrap li a.active img {
    border: 1px solid #10192D;
}

.sort-wrap {
    border-top: 1px solid #F1F5F9;
    border-bottom: 1px solid #F1F5F9;
    padding: 0 24px;
    margin: 0 -24px 24px;
    display: block;
    overflow-y: hidden;
    overflow-x: auto;
    font-size: 0;
    height: 45px;
}

.sort-wrap li {
    display: inline-block;
    vertical-align: top;
}

.sort-wrap li a {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #8E9BAE;
    padding: 14px 24px 14px 0;
    display: block;
}

.sort-wrap li a.active {
    color: #10192D;
    font-weight: 600;
}

.detailimg-wrap {
    height: 84vw;
    background: #eee;
    margin: -16px -24px 24px;
    overflow: hidden;
    display: block;
    position: relative;
    overflow: hidden;
}

.detailimg-wrap .img {
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
}

.prd-summary {
    padding: 8px 0 0;
}

.prd-summary .store {
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #8E9BAE;
    margin-bottom: 8px;
}

.prd-summary h2 {
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
    min-height: 34px;
    margin-bottom: 12px;
    font-weight: 800;
}

.prd-summary .price1 {
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
}

.prd-summary .price1 strong {
    font-weight: 600;
    margin-right: 2px;
}

.prd-summary .dsicount {
    display: inline-block;
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #2972FF;
    vertical-align: middle;
    margin-right: 8px;
    margin-left: 8px;
}

.prd-summary .price2 {
    color: #8E9BAE;
    display: inline-block;
    text-decoration: line-through;
    line-height: 18px;
    font-size: 14px;
    vertical-align: middle;
}

.prd-summary .event {
    padding: 16px 0;
    border-bottom: 1px solid #F1F5F9;
    border-top: 1px solid #F1F5F9;
    margin-top: 16px;
}

.prd-summary .event .badge {
    font-weight: 600;
    font-size: 12px;
    line-height: 150%;
    text-align: center;
    letter-spacing: -0.3px;
    color: #FFFFFF;
    background: #0EA5E9;
    border-radius: 50px;
    padding: 2px 6px;
    height: 22px !important;
    margin-right: 12px;
    vertical-align: middle;
}

.prd-summary .event .txt {
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #64748B;
    vertical-align: middle;
}

.prd-info {}

.prd-info h3 {
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.3px;
    color: #1B2537;
    position: relative;
    border-bottom: 1px solid #F1F5F9;
}

.prd-info h3 img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
    margin-top: -2px;
    padding: 24px 0;
}

.prd-info .cont {
    font-size: 16px;
    line-height: 170%;
    letter-spacing: -0.3px;
    color: #64748B;
    padding-bottom: 24px;
    border-bottom: 1px solid #F1F5F9;
}

.prd-info h3.toggle {
    cursor: pointer;
}

.prd-info h3.toggle~.cont {
    display: none;
}

.prd-info h3.toggle::after {
    content: '';
    width: 16px;
    height: 16px;
    background: url(/images/ic-select-arrow.svg) no-repeat center;
    background-size: 100% 100%;
    display: block;
    position: absolute;
    top: calc(50% - 8px);
    right: 0;
    transition: transform .3s;
}

.prd-info h3.toggle.show {
    border-bottom: none;
}

.prd-info h3.toggle.show::after {
    transform: rotate(180deg);
}

.prd-info h3.toggle.show~.cont {
    display: block;
}

.prd-info .cont dl {
    padding: 6px 0;
}

.prd-info .cont dl dt {
    font-size: 12px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #8E9BAE;
    margin-bottom: 12px;
}

.prd-info .cont dl dd {
    font-size: 14px;
    line-height: 170%;
    letter-spacing: -0.3px;
    color: #10192D;
    padding-bottom: 18px;
}

.prd-info .cont dl:last-of-type dd {
    padding-bottom: 0;
}

.btn-wrap.shadow {
    background: #FFFFFF;
    box-shadow: 0px 0px 10px rgba(16, 25, 45, 0.1);
    margin: 0 -24px;
    width: auto;
    padding: 8px 24px;
    width: 100%;
}

.paymoney-wrap {
    display: flex;
    margin: 24px 0 12px;
    padding: 24px 0 12px;
    border-bottom: 1px solid #F1F5F9;
    justify-content: space-between;
}

.paymoney-wrap dl {}

.paymoney-wrap dl dt {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #64748B;
    margin-bottom: 8px;
}

.paymoney-wrap dl dd {
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
}

.paymoney-wrap dl dd strong {
    font-weight: 800;
}

.inpnum-wrap {
    width: 144px;
    height: 48px;
    background: #F1F5F9;
    padding: 0;
    border-radius: 8px;
    display: block;
}

.inpnum-wrap .btn-minus {
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    float: left;
}

.inpnum-wrap .inp-number {
    background: transparent;
    border: 0;
    text-align: center;
    float: left;
    width: 48px;
    height: 48px;
    line-height: 48px;
    padding: 0;
    border: none !important;
}

.inpnum-wrap .btn-plus {
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    float: right;
}

.inpnum-wrap button:disabled {
    opacity: .2;
}

.certification-wrap {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    height: 100%;
}

.certification-wrap .group1 {
    flex: 1 1 auto;
    padding-bottom: 32px;
}

.certification-wrap .group1 p {
    color: #64748B;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: -0.6px;
}

.certification-wrap .group1 .ico {
    width: 100px;
}

.certification-wrap .group2 {
    flex: 0 0 auto;
    width: 100%;
    padding-bottom: 8px;
}

.certification-wrap .notice-wrap {
    position: relative;
    align-self: flex-end;
    opacity: 1;
    transition: opacity .3s;
    text-align: left;
}

.certification-wrap .notice-box {
    background: #F8FAFC;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

.certification-wrap .notice-box h3 {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
}

.certification-wrap .notice-box .ico {
    vertical-align: middle;
    margin-right: 8px;
    margin-top: -1px;
}

.certification-wrap .notice-box ul li {
    font-size: 14px;
    line-height: 170%;
    letter-spacing: -0.3px;
    color: #64748B;
}

.certification-wrap .notice-box ul li strong {
    font-weight: 600;
}

.depositorname-wrap {
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.depositorname-wrap>* {
    width: 100%;
}

.depositor-wrap {
    position: relative;
    opacity: 1;
    transition: opacity .3s;
    text-align: left;
    width: 100%;
}

.depositor-wrap .depositor-box {
    background: #F8FAFC;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

.depositor-wrap .depositor-box h3 {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 16px;
}

.depositor-wrap .depositor-box .ico {
    vertical-align: middle;
    margin-right: 8px;
    margin-top: -1px;
}

.depositor-wrap .depositor-box .nameprice {
    display: flex;
    margin-top: 16px;
    margin: 8px;
    justify-content: space-between;
}

.depositor-wrap .depositor-box .nameprice .name {}

.depositor-wrap .depositor-box .nameprice h4 {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #64748B;
    margin-bottom: 8px;
}

.depositor-wrap .depositor-box .nameprice .name img {
    width: 156px;
    vertical-align: bottom;
    margin-right: 4px;
}

.depositor-wrap .depositor-box .nameprice .name span {
    vertical-align: bottom;
    font-size: 14px;
}

.depositor-wrap .depositor-box .nameprice .price {}

.depositor-wrap .depositor-box .nameprice .price p {
    font-size: 24px;
    font-weight: 800;
    text-align: right;
    padding: 8px 0 0;
}

.graybox {
    background: #F1F5F9;
    border-radius: 16px;
    padding: 20px 32px;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.3px;
    color: #64748B;
}

.search-wrap {
    padding-top: 64px;
}

.search-wrap header {
    height: 64px;
    width: calc(100% + 24px);
    margin-left: -8px;
    padding-top: 16px;
}

.search-wrap header .inp-search {
    width: calc(100% - 60px);
    float: left;
}

.search-wrap header .btn-text {
    display: inline-block;
    width: 60px;
    height: 48px;
    color: #10192D;
    font-weight: 400;
    letter-spacing: -.3px;
    font-size: 16px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    float: left;
}

.search-wrap header::after {
    content: '';
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}

.srcresult-list {
    display: block;
    width: 100%;
}

.srcresult-list li {
    font-size: 16px;
    display: block;
    padding: 14.5px 0;
    line-height: 120%;
    letter-spacing: -.3px;
    color: #64748B;
}

.srcresult-list li .subject {
    color: #64748B;
    font-weight: 400;
    width: calc(100% - 80px);
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    float: left;
    margin-right: 10px;
}

.srcresult-list li .subject2 {
    color: #64748B;
    font-weight: 400;
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    float: left;
    margin-right: 10px;
}

.srcresult-list li .date {
    width: 46px;
    display: inline-block;
    float: left;
    margin-right: -4px;
}

.srcresult-list li em {
    color: #10192D;
    font-weight: 600;
}

.srcresult-list .nodata {
    text-align: center;
    margin-top: 114px;
}

.btn-del3 {
    display: inline-block !important;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    background: url(/images/ic-del.svg) no-repeat center;
    background-size: 100% 100%;
    overflow: hidden;
    font-size: 0 !important;
    text-indent: -24px;
    float: left;
    margin-top: -1px;
    margin-right: -3px;
    float: right;
}

.srcresult-list li::after {
    content: '';
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}

/* 결제 */
.payprice-wrap {
    display: block;
    height: 100%;
}

.payprice-wrap .payprice-box {
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #10192D;
    border-radius: 12px;
    font-size: 22px;
    margin-bottom: 16px;
    height: 94px;
    position: relative;
}

.payprice-wrap .payprice-box label {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #64748B;
    margin: 0 0 8px;
    display: block;
}

.payprice-wrap .payprice-box span {
    display: inline-block;
    height: 29px;
    line-height: 26px;
    font-size: 22px;
    vertical-align: middle;
    margin-left: 5px;
}

.payprice-wrap .payprice-box .inp-price {
    height: 29px;
    line-height: 27px;
    display: inline-block;
    padding: 0;
    border: none;
    border-radius: 0;
    vertical-align: middle;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.6px;
    color: #10192D;
    width: auto;
    margin-left: 0;
    min-width: 13.55px;
    caret-color: #2873FF;
}

.payprice-wrap .payprice-box input.inp-price {
    width: calc(100% - 50px);
}

.payprice-wrap .payprice-box .inp-price:focus {
    outline: none !important;
}

.payprice-wrap .payprice-box .inp-price[placeholder]:empty::before {
    content: attr(placeholder);
    color: #E2E8F0;
    font-size: 24px;
    font-weight: 600;
}

.btn-clear {
    width: 24px;
    height: 24px;
    background: url(/images/ic-close-circle2.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.payprice-wrap .payprice-box .inp-price::placeholder {
    color: #E2E8F0;
    font-size: 24px;
    font-weight: 600;
}

.payprice-wrap .payprice-box.error {
    border: 1px solid #F65556;
}

.payprice-wrap .payprice-box.error label {
    color: #F65556;
}

.payprice-wrap .payprice-box.error .inp-price {
    color: #F65556;
}

.payprice-wrap .payprice-box.error span {
    color: #F65556;
}

.payprice-wrap .store {
    margin-bottom: 25px;
}

.payprice-wrap .store .storeimg {
    width: 36px;
    height: 36px;
    margin-right: 12px;
}

.payprice-wrap .store p {
    font-weight: 800;
    font-size: 18px;
    color: #10192D;
    display: inline-block;
}

.payprice-wrap .price-info {
    display: block;
    margin-bottom: 48px;
}

.payprice-wrap .price-info dt {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    width: 80px;
}

.payprice-wrap .price-info dd {
    display: inline-block;
}

.qrshoot-wrap {
    text-align: center;
    height: 100vh;
    background: url(/images/bg-qrframe.svg) no-repeat center;
    background-size: 100% auto;
    position: fixed;
    width: 100vw;
}

.qrshoot-wrap h1 {
    font-size: 18px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-62vw);
}

.qrshoot-wrap .btn-close {
    width: 48px;
    height: 48px;
    background: url(/images/ic-photo-close.svg) no-repeat center;
    background-size: 100% 100%;
    font-size: 0;
    position: absolute;
    top: 84vh;
    left: 50%;
    transform: translateX(-50%);
}

.contentWrap .pop-content {
    width: 100%;
}

/* 더보기 */
.wrap.wholeScroll {
    overflow-y: scroll;
}

.wrap.wholeScroll .content {
    overflow: initial;
}

.more-header {
    padding: 0 24px 24px;
    position: relative;
    margin-top: -10px;
}

.more-header .heading3 {
    margin-bottom: 10px !important;
}

.more-header .heading3 span {
    font-weight: 200;
}

.more-header .btn-myinfo {
    font-size: 14px !important;
    color: #10192D;
    letter-spacing: -0.3px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    box-sizing: border-box;
    border-radius: 50px;
    padding: 0 12px;
    height: 32px;
    line-height: 1.2;
    display: inline-block !important;
    vertical-align: middle;
}

.btn-myinfo .ico {
    vertical-align: middle;
    margin-right: 4px;
}

.more-header .ico-profile {
    position: absolute;
    right: 24px;
    top: 0;
    width: 64px;
}

.more-content {
    height: initial;
    background: #F8FAFC;
}

.notice-link {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #10192D;
    border-bottom: 1px solid #E2E8F0;
    padding: 20px 30px 20px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    display: block;
    margin-top: -16px;
    margin-bottom: 32px;
    background: url(/images/ic-chevron-right.svg) no-repeat 100% 50%;
    background-size: 20px 20px;
}

.notice-link img {
    width: 24px;
    margin-right: 12px;
}

.link-list-wrap {
    margin-bottom: 36px;
}

.link-list-wrap h3 {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #8E9BAE;
    margin-bottom: 8px;
}

.link-list-wrap .link-list {
    display: block;
}

.link-list-wrap .link-list li {
    position: relative;
    background: url(/images/ic-chevron-right.svg) no-repeat 100% 50%;
    background-size: 20px 20px;
}

.link-list-wrap .link-list li a,
.link-list-wrap .link-list li label.switch {
    min-height: 48px;
    display: block;
    padding: 14.5px 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
    box-sizing: border-box;
}

.switch input[type="checkbox"] {
    display: none;
}

.switch input[type="checkbox"]~.ico-switch {
    width: 44px;
    height: 24px;
    background: url(/images/ic-switch-off.svg) no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 0;
    transition: all 100ms ease-in-out;
}

.switch input[type="checkbox"]:checked~.ico-switch {
    background-image: url(/images/ic-switch-on.svg);
}

.btn-wrap3 {
    width: 100%;
    border-top: 1px solid #E2E8F0;
    padding: 32px 0 48px;
    font-size: 0;
}

.btn-wrap3 div {
    display: inline-block;
    text-align: center;
    width: 50%;
    position: relative;
}

.btn-wrap3 button {
    letter-spacing: -0.3px;
    text-decoration-line: underline;
    color: #8E9BAE;
    font-size: 14px;
    line-height: 120%;
    text-align: center;
}

.notice-box2 {
    background: #F8FAFC;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

.notice-box2 h3 {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
}

.notice-box2 .ico {
    vertical-align: middle;
    margin-right: 8px;
    margin-top: -1px;
}

.notice-box2 ul {}

.notice-box2 ul li {
    font-size: 14px;
    line-height: 170%;
    letter-spacing: -0.3px;
    color: #64748B;
}

.notice-box2 ul li strong {
    font-weight: 600;
}

.notice-box2 p {
    font-size: 14px;
    line-height: 170%;
    letter-spacing: -0.3px;
    color: #64748B;
}

.nocharger-wrap {
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: space-between;
    align-items: center;
    height: calc(100% - 72px);
    width: 100%;
    text-align: center;
}

.nocharger-wrap>div:nth-of-type(1) {
    margin-top: 16vh;
}

.nocharger-wrap>div img {
    width: 100px;
    margin-bottom: 24px;
}

.nocharger-wrap>div h3 {
    font-weight: 800;
    font-size: 20px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.6px;
    color: #8E9BAE;
    margin-bottom: 8px;
}

.nocharger-wrap>div p {
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.3px;
    color: #8E9BAE;
}

.payitem {
    display: block;
    box-sizing: border-box;
    padding: 16px 24px;
    text-align: left;
    min-height: 80px;
    position: relative;
    font-size: 0;
    position: relative;
}

.payitem .tit {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: #10192D;
    letter-spacing: -.6px;
    line-height: 1.2;
}

.payitem .btn-del2 {
    display: inline-block !important;
    width: 24px;
    height: 24px;
    background: url(/images/ic-minus-cirlce.svg) no-repeat center;
    background-size: 100% 100%;
    vertical-align: middle;
    margin-right: 16px;
}

.payitem .info2 {
    float: right;
    position: static;
    transform: none;
    vertical-align: middle;
    margin-top: 16px;
}

.payitem .btn-hambg {
    display: inline-block !important;
    width: 24px;
    height: 24px;
    background: url(/images/ic-menu.svg) no-repeat center;
    background-size: 100% 100%;
    vertical-align: middle;
    margin-left: 16px;
    float: right;
    margin-top: 16px;
}

.payitem .i-arrow-down {
    width: 16px;
    height: 16px;
    background: url(/images/ic-select-arrow.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}

.ssstit {
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.3px;
    color: #10192D;
}

.select2 {
    height: 56px;
    line-height: 54px;
    font-size: 24px !important;
    background: url(/images/ic-select-arrow.svg) no-repeat calc(100% - 20px) 50% #fff;
    background-size: 16px 16px;
    width: auto !important;
    box-sizing: border-box;
    padding: 0 74px 0 0;
    color: #10192D;
    vertical-align: middle;
    font-size: 16px;
    letter-spacing: -.6px;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.select3 {
    height: 24px;
    line-height: 24px;
    font-size: 14px !important;
    background: url(/images/ic-select-arrow.svg) no-repeat 100% 50%;
    background-size: 16px 16px;
    width: auto !important;
    box-sizing: border-box;
    padding: 0 20px 0 0;
    color: #10192D;
    vertical-align: middle;
    letter-spacing: -.3px;
    font-weight: 400;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.graybox2 {
    background: #F1F5F9;
    border-radius: 16px;
    padding: 28px 24px;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.3px;
    color: #64748B;
}

.linklist li {
    margin-bottom: 20px;
    display: block;
}

.linklist li:last-child {
    margin-bottom: 0;
}

.u {
    text-decoration: underline;
}

.notice-list {
    padding-bottom: 32px;
    margin: 0 -24px;
    width: calc(100% + 48px) !important;
}

.notice-list li {
    position: relative;
}

.notice-list li a {
    padding: 28px 24px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notice-list li a:active {
    background-color: rgba(16, 25, 45, 0.08);
}

.notice-list li .date {
    font-size: 14px;
    line-height: 120%;
    text-align: right;
    letter-spacing: -0.3px;
    color: #8E9BAE;
    text-align: left;
    display: inline-block;
    margin-right: 10px;
}

.notice-list li .badge {
    color: #2873FF;
    padding: 2px 6px;
    height: 27px;
    background: #E9F1FF;
    border-radius: 12px;
    font-size: 12px;
    letter-spacing: -0.3px;
    margin-right: 4px;
    vertical-align: middle;
    display: inline-block;
    line-height: 23px;
    text-align: center;
    box-sizing: border-box;
}

.notice-list li .badge-w {
    color: #10192D;
    padding: 2px 6px;
    height: 27px;
    background: #E2E8F0;
    border-radius: 12px;
    font-size: 12px;
    letter-spacing: -0.3px;
    margin-right: 4px;
    vertical-align: middle;
    display: inline-block;
    line-height: 23px;
    text-align: center;
    box-sizing: border-box;
}

.notice-list li .subject {
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #10192D;
    display: inline;
}

.notice-list li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: #F1F5F9;
}

.notice-view {
    padding-bottom: 32px;
}

.notice-view h2 {
    font-weight: 800;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #212529;
    margin-bottom: 8px;
}

.notice-view .date {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #8E9BAE;
}

.notice-cont {
    margin-top: 24px;
    padding: 24px 0;
    font-size: 16px;
    line-height: 170%;
    letter-spacing: -0.3px;
    color: #64748B;
    border-top: 1px solid #F1F5F9;
}

.btn-down {
    border-radius: 16px;
    margin-bottom: 8px;
    padding: 20px 52px;
    text-indent: -32px;
    width: 100%;
    text-align: left !important;
    display: block !important;
    background: url(/images/ic-receive-square.svg) no-repeat calc(100% - 20px) 50% / 24px 24px #F1F5F9;
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #10192D;
}

.btn-down .ico {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #10192D;
}

.faq-list {
    padding-bottom: 32px;
    margin: 0 -24px;
}

.faq-list li {
    position: relative;
    display: inline-block;
    width: 100%;
}

.faq-list li a {
    display: flex;
    align-items: center;
    padding: 28px 50px 28px 24px;
    position: relative;
}

.faq-list li a::after {
    content: '';
    width: 16px;
    height: 16px;
    background: url(/images/ic-select-arrow.svg) no-repeat;
    background-size: 16px 16px;
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
}

.faq-list li a.active::after {
    transform: translateY(-50%) rotate(-180deg);
}

.faq-list li a:active {
    background-color: rgba(16, 25, 45, 0.08);
}

.faq-list li .date {
    font-size: 14px;
    line-height: 120%;
    text-align: right;
    letter-spacing: -0.3px;
    color: #8E9BAE;
    flex: 0 0 48px;
    text-align: left;
}

.faq-list li .badge {
    color: #2873FF;
    padding: 2px 6px;
    height: 23px;
    background: #E9F1FF;
    border-radius: 12px;
    font-size: 12px;
    letter-spacing: -0.3px;
    margin-right: 10px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    line-height: 23px;
    flex: 1 0 33px;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.faq-list li .subject {
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #10192D;
    flex: 1 1 100%;
}

.faq-list li .cont {
    padding: 0 0 16px;
    font-size: 14px;
    line-height: 170%;
    letter-spacing: -0.3px;
    color: #64748B;
    background: #F8FAFC;
    border-radius: 16px;
    padding: 16px;
    margin: -4px 24px 16px;
    display: none;
}

.faq-list li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: #F1F5F9;
}

.faq-list li a.active~.cont {
    display: block;
}

.textarea {
    border-radius: 16px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-sizing: border-box;
    width: 100%;
    height: 160px;
}

.graybox .btn-down {
    margin: 0 -32px;
    text-indent: 0;
    padding: 0 0 0 20px;
    margin-bottom: 20px;
    width: calc(100% + 64px);
    font-size: 14px;
}

.graybox .btn-wrap3 {
    padding: 20px 0 0;
    margin: 0 -12px;
    width: calc(100% + 24px);
}

.graybox .btn-wrap3 button {
    text-decoration: none;
    color: #10192D;
}

.qna-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.qna-view .group1 {
    flex: 1;
}

.qna-view .group2 {
    flex: 0;
}

.qna-cont {
    padding: 24px 0;
    font-size: 16px;
    line-height: 170%;
    letter-spacing: -0.3px;
    color: #64748B;
}

.qna-cate {
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #8E9BAE;
}

.memberout-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.memberout-wrap .group1 {
    flex: 1;
}

.memberout-wrap .group2 {
    flex: 0;
}

.flex-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flex-column .flex-0 {
    flex: 0;
    width: 100%;
}

.flex-column .flex-1 {
    flex: 1;
    width: 100%;
}

.flex-column2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.bottom-grayarea {
    background: #F8FAFC;
    box-shadow: inset 0px 1px 0px #E2E8F0;
    padding: 14px 24px 6px;
    margin: 0 -24px -8px;
    width: calc(100% + 48px) !important;
}

.pop-content {
    text-align: center;
    padding: 24px 20px;
}

.qr {
    width: 175px;
    height: 175px;
    position: relative;
    margin: 0px auto 0;
}

.qr.lock img,
.qr.timeout img {
    opacity: .15;
}

.qr.lock::after {
    content: '';
    width: 180px;
    height: 180px;
    background: url(..//images/ic-lock.svg) no-repeat center;
    background-size: 40px 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(3px);
}

.qr.timeout::after {
    content: '';
    width: 40px;
    height: 40px;
    background: url(/images/ic-refresh2.svg) no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bg-card {
    padding-top: 60%;
    background: linear-gradient(90deg, #2F4786 0%, #1B2C59 100%);
    box-shadow: 0px 2px 2px rgba(22, 92, 221, 0.25), 0px 6px 4px rgba(22, 92, 221, 0.15);
    border-radius: 12px;
    position: relative;
    color: #fff;
    line-height: 120%;
    letter-spacing: -0.3px;
    overflow: hidden;
}

.bg-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    height: 29.7%;
    background: rgba(0, 0, 0, 0.1);
}

.bg-card .logo {
    height: 7.43%;
    width: auto;
    position: absolute;
    top: 12.57%;
    left: 6.97%;
}

.bg-card .txt1 {
    font-weight: 600;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    position: absolute;
    left: 6.97%;
    top: 52%;
}

.bg-card .txt-price {
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.6px;
    position: absolute;
    right: 6.97%;
    top: 50.29%;
}

.bg-card .txt-price strong {
    font-weight: 800;
}

.bg-card .txt2 {
    font-weight: normal;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    position: absolute;
    left: 6.97%;
    bottom: 10.26%;
}

.bg-card .txt3 {
    font-weight: normal;
    font-size: 14px;
    position: absolute;
    right: 6.97%;
    bottom: 10.26%;
}

.pop-content .btn-wrap {
    padding: 24px 20px;
    border-top: 1px solid #F1F5F9;
    margin: 0 -20px;
    width: calc(100% + 40px);
}

.bo-bottom {
    border-bottom: 1px solid #F1F5F9;
}

.qr2 {
    border: 4px solid #89B2FF;
    margin: 0 auto;
    width: 190px;
    height: 190px;
    border-radius: 8px;
}

.qr2 img {
    width: 100%;
    height: 100%;
}


/* 퀵메뉴-이용내역 */
.test {
    background: #F1F5F9;
}

.select-history {
    position: relative;
    background: #F1F5F9;
    border-radius: 10px;
    padding: 14.5px 32px;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.3px;
    color: #10192D;
}

.select-history button {
    position: absolute;
    top: 12px;
    width: 24px;
    height: 24px;
}

.select-history button:disabled {
    opacity: .9;
}

.select-history .btn-month-prev {
    left: 8px;
}

.select-history .btn-month-next {
    right: 8px;
}

.select-history .month img {
    margin-left: 5px;
}

.select-history .month .inp-ympick {
    line-height: 0;
}

.filter-wrap3 {
    border-bottom: 0 !important;
    margin-top: 12px;
    margin-bottom: 0;
    padding-bottom: 0;
}

.filter-wrap3 ul {
    margin-bottom: 20px;
}

.history-wrap ul {
    text-align: left;
    margin: 0 -24px 48px;
}

.history-wrap.history-line ul.mb0 {
    padding: 0 24px;
}

.history-wrap.history-line .mb0 li:last-child {
    padding-bottom: 40px;
    border-bottom: 1px solid #F1F5F9;
}

.history-wrap.history-line ul.mb0 li a {
    padding: 16px 0;
}

.history-wrap ul li a {
    display: block;
    padding: 16px 24px;
}

.history-wrap ul ul {
    margin: 0;
}

.history-wrap ul li:last-child {
    margin-bottom: 0;
    text-align: left;
}

.history-wrap .ssstit2:first-child {
    margin-top: 40px;
}

.ssstit2 {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #8E9BAE;
    text-align: left;
    margin-bottom: 8px;
}

.history-list {
    width: calc(100% - 60px);
    display: inline-block;
    vertical-align: top;
}

.history-list dt {
    display: inline-block;
    width: calc(100% - 105px);
    text-align: left;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
    font-family: Apple SD Gothic Neo;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    margin-bottom: 4px;
}

.history-list dd {
    display: inline-block;
    width: 100px;
    text-align: right;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
    font-family: Apple SD Gothic Neo;
    vertical-align: top;
}

.history-list dd.charge {
    color: #2873FF;
}

.history-list dd b {
    font-weight: 600;
}

.history-list .comment {
    font-family: Apple SD Gothic Neo;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #8E9BAE;
}

.history-wrap .list-img {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin-right: 12px;
    vertical-align: top;
}

.history-list2 {
    width: calc(100% - 120px);
    margin-right: 15px;
}

.btn-receive {
    display: inline-block !important;
    align-items: center;
    padding: 0px;
    position: absolute;
    width: 48px;
    height: 32px;
    background: #E9F1FF;
    border-radius: 8px;
    color: #2873FF;
    font-weight: 600;
    font-size: 12px !important;
    line-height: 120%;
    letter-spacing: -0.3px;
}

.btn-receive:active {
    background-color: #B9D1FF;
}

.ic-cashback {
    background-image: url(/images/ic-add-square.svg);
    background-color: #2873FF;
}

.ic-payment {
    background-image: url(/images/ic-receipt.svg);
    background-color: #FBBF24;
}

.ic-send {
    background-image: url(/images/ic-send.svg);
    background-color: #F9791F;
}

.ic-withdraw {
    background-image: url(/images/ic-send-square.svg);
    background-color: #8B5CF6;
}

.ic-card-remove {
    background-image: url(/images/ic-card-remove.svg);
    background-color: #8E9BAE;
}

.ic-add-pay {
    background-image: url(/images/ic-wallet-add.svg);
    background-color: #0EA5E9;
}

.ic-recover {
    background-image: url(/images/ic-card-slash.svg);
    background-color: #EC4899;
}

.ic-receive {
    background-image: url(/images/ic-receive.svg);
    background-color: #2DD4BF;
}

/* .history-line {border-bottom: 1px solid #F1F5F9;} */
.history-list2 dt,
.history-list2 dd {
    display: block;
    width: 100%;
    text-align: left;
}

.history-list2 ul {
    margin-bottom: 0 !important;
}

.history-list2 .sender-list ul li {
    display: inline-block;
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #8E9BAE;
    font-family: Apple SD Gothic Neo;
    vertical-align: top;
    margin-bottom: 4px;
    padding-right: 10px;
    margin-right: 5px;
    position: relative;
}

.history-list2 .sender-list ul li::after {
    width: 1px;
    height: 12px;
    right: 0;
    top: 2px;
    background: #E2E8F0;
    position: absolute;
    content: '';
}

.history-list2 .sender-list ul li:last-child {
    padding-right: 0;
    margin-right: 0;
    padding-bottom: 0;
}

.history-wrap.history-line .history-list2 .sender-list ul li:last-child {
    padding-right: 0;
    margin-right: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.history-list2 .sender-list ul li:last-child::after {
    display: none;
}

/* 충전상세내역 */
.charge-bg,
.pay-bg,
.send-bg,
.wallet-bg,
.withdraw-bg,
.removal-bg,
.lapse-bg {
    position: relative;
}

.charge-bg::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: url(/images/ic-add-square.svg) 50% 50% no-repeat #2873FF;
    background-size: 20px 20px;
}

.pay-bg::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: url(/images/ic-receipt.svg) 50% 50% no-repeat #FBBF24;
    background-size: 20px 20px;
}

.send-bg::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: url(/images/ic-send.svg) 50% 50% no-repeat #F9791F;
    background-size: 20px 20px;
}

.wallet-bg::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: url(/images/ic-wallet-add.svg) 50% 50% no-repeat #0EA5E9;
    background-size: 20px 20px;
}

.withdraw-bg::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: url(/images/ic-send-square.svg) 50% 50% no-repeat #8B5CF6;
    background-size: 20px 20px;
}

.removal-bg::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: url(/images/ic-card-slash.svg) 50% 50% no-repeat #EC4899;
    background-size: 20px 20px;
}

.lapse-bg::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: url(/images/ic-card-remove.svg) 50% 50% no-repeat #8E9BAE;
    background-size: 20px 20px;
}

.coupon-history {
    margin: 0 -24px 25px;
}

.cancel-price {
    text-decoration-line: line-through;
}

.btn-cancel {
    text-align: center;
    color: #8E9BAE;
    font-size: 14px !important;
    font-weight: 400;
    text-decoration: underline;
    display: inline-block !important;
}

.coupon-slider {
    margin: 0 -12px 20px;
    width: calc(100% + 24px);
}

.coupon-slider .slick-dots {
    bottom: 15px;
    width: 90%;
}

.coupon-slider .slick-dots li.slick-active button {
    background: #64748B;
}

.coupon-box {
    position: relative;
    padding: 24px 28px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 0;
    background: #fff;
    box-shadow: 0px 0px 2px rgba(43, 54, 70, 0.06), 0px 2px 8px rgba(43, 54, 70, 0.04);
    display: inline-block;
    width: 100%;
}

.coupon-slider .coupon-box.coupon1 {
    width: 100%;
    margin: -5px 0 0;
}

.coupon-box .coupon-content {
    margin: 0;
    display: inline-block;
    width: calc(100% - 60px);
    vertical-align: middle;
    text-align: left;
    float: left;
    padding-left: 10px;
}

.coupon-box .coupon-content p {
    font-size: 12px;
    line-height: 120%;
    color: #64748B
}

.coupon-box .coupon-content h4 {
    font-size: 22px;
    line-height: 120%;
    font-weight: bold;
    color: #10192d;
    margin-top: 6px;
    letter-spacing: -0.6px
}

.coupon-box .coupon-content h4.charge-complete {
    font-size: 20px;
}

.coupon-box .coupon-content h4.charge-complete img {
    vertical-align: middle;
    margin: -4px 0 0 4px;
    width: 24px;
    height: 20px;
}

.coupon-box .badge {
    display: inline-block;
    border-radius: 50px;
    vertical-align: middle;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 500;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}

.coupon-box .date .badge {
    position: static;
    transform: none;
}

.coupon-box .badge.c1 {
    background: #F1F5F9;
    color: #64748B;
}

.coupon-box .badge.c2 {
    background: #E9F1FF;
    color: #2873FF;
}

.coupon-box .badge.c3 {
    background: #0EA5E9;
    color: #fff;
}

.coupon-box .badge.c4 {
    background: #E2E8F0;
    color: #64748B;
}

.coupon-box .badge.c5 {
    background: #FEF0E6;
    color: #F9791F;
}

.coupon-box .quantity {
    float: right;
    font-size: 12px;
    vertical-align: top;
}

.coupon-box .quantity b {
    color: #2873FF;
}

.coupon-box .img {
    width: 32px;
    height: 32px;
    margin-right: 20px;
    vertical-align: middle;
}

.coupon-box.pd {
    padding: 32px 26px 34px !important;
}

.coupon-box.pd2 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.coupon-box.pd2 h4 {
    margin-bottom: 24px;
}

.coupon-box.pd2 .badge {
    top: 45px;
}

.coupon-box.coupon1 {
    border: 0;
    box-shadow: none;
    position: relative;
    z-index: 1;
    padding: 36px 30px;
    background-image: url(/images/bg-coupon-top.png), url(/images/bg-coupon-bottom.png);
    background-position: top left, bottom center;
    background-size: auto, auto;
    background-repeat: repeat-x, repeat-x;
    margin: -5px -12px 0;
    width: calc(100% + 24px);
}

.coupon-box.coupon1::before {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 100%;
    content: '';
    background-image: url(/images/bg-coupon-left.png);
    background-position: top left;
    background-size: auto;
    background-repeat: repeat-y;
}

.coupon-box.coupon1::after {
    z-index: 2;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 100%;
    content: '';
    background-image: url(/images/bg-coupon-right.png);
    background-position: top right;
    background-size: auto;
    background-repeat: repeat-y;
}

.coupon-box.coupon2 {
    border: 0;
    box-shadow: none;
    position: relative;
    z-index: 1;
    padding: 32px 40px 28px;
    margin-bottom: 1px;
    background-image: url(/images/bg-coupon-top-2.png), url(/images/bg-coupon-bottom-2.png);
    background-position: top left, bottom center;
    background-size: auto, auto;
    background-repeat: repeat-x, repeat-x;
    display: inline-block;
    width: 100%;
}

.coupon-box.coupon2::before {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 100%;
    content: '';
    background-image: url(/images/bg-coupon-left-2.png);
    background-position: top left;
    background-size: auto;
    background-repeat: repeat-y;
}

.coupon-box.coupon2::after {
    z-index: 2;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 100%;
    content: '';
    background-image: url(/images/bg-coupon-right-2.png);
    background-position: top right;
    background-size: auto;
    background-repeat: repeat-y;
}

.lefttop {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
}

.righttop {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
}

.leftbottom {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
}

.rightbottom {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
}

.charge-con {
    padding: 20px 16px;
    font-size: 0;
    border-top: 1px solid #F1F5F9;
}

.charge-con dt,
.charge-con dd {
    width: 50%;
    display: inline-block;
    font-size: 16px;
    color: #64748B;
    font-weight: 400;
    line-height: 120%;
}

.charge-con dt:last-child,
.charge-con dd:last-child {
    margin-bottom: 0
}

.charge-con dt {
    text-align: left;
}

.charge-con dd {
    text-align: right;
}

.charge-con.total dt {
    color: #10192D;
}

.charge-con.total dd {
    color: #10192D;
    font-weight: 700;
}

/* 내쿠폰 */
.bg-skyblue,
.bg-skyblue header {
    background: #F1F5F9;
}

.coupon-list,
.coupon-history {
    margin: 18px -13px;
}

.coupon-expected {
    clear: both;
    padding: 0 16px;
    margin: 0 auto;
    height: 38px;
    background: #1A294F;
    border-radius: 50px;
    display: inline-flex;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 38px;
    text-align: center;
    letter-spacing: -0.3px;
    color: #F8FAFC;
    position: relative;
    justify-content: center;
    align-items: center;
}

.coupon-box .coupon-content.img-list {
    width: 100%;
}

.coupon-box .coupon-content.img-list .img {
    width: 70px;
    height: 70px;
    margin-right: 0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    border-radius: 12px;
}

.coupon-box .coupon-content.img-list .text {
    width: calc(100% - 94px);
    display: inline-block;
    vertical-align: middle;
    border-left: 1px solid #F1F5F9;
    margin-left: 10px;
    padding-left: 20px;
    box-sizing: border-box;
}

.coupon-box .coupon-content.img-list .text h4 {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16px;
    line-height: 140%;
}

.coupon-box .coupon-content.img-list .date {
    margin-top: 18px;
    color: #64748B;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.3px;
    position: relative;
}

.coupon-list2 {
    background: #fff;
    padding: 4px 0;
}

.coupon-list2 li {
    padding: 0;
}

.coupon3 {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding: 28px 24px 0;
    width: 100%;
}

.coupon-box.coupon3 .coupon-content {
    padding-left: 0;
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 28px;
}

.coupon-list2 li:last-child .coupon-box.coupon3 .coupon-content {
    border-bottom: none;
}

.coupon-box.coupon3 .coupon-content.img-list .img {
    float: left;
}

.coupon-box.coupon3 .coupon-content.img-list .text {
    width: calc(100% - 94px);
    border-left: none;
    margin-left: 24px;
    padding-left: 0;
}

.coupon-box.coupon3 .coupon-content.img-list .date {
    margin-top: 8px;
}

.coupon-box.coupon3 .quantity {
    margin-top: 5px;
}

.coupon-list2 li:last-child .coupon3 {
    border-bottom: 0;
}

.date-tt {
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    color: #8E9BAE;
    letter-spacing: -0.3px;
    margin: 0 0 12px 24px
}

.faq-coupon {
    margin: 0 24px;
}

.faq-coupon .img {
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
    display: inline-block;
}

.faq-coupon li {
    border-bottom: 1px solid #E2E8F0;
}

.faq-coupon li:last-child {
    border-bottom: 0;
}

.faq-coupon li .cont {
    background: none;
    padding: 17px 0;
    margin: -1px 0 6px;
    font-size: 16px;
}

.faq-coupon li a {
    padding: 25px 0
}

.faq-coupon li a::after {
    right: 0
}

.faq-coupon li .subject {
    font-weight: 600;
}

.content2 {
    padding: 0 0 8px;
}

.payment-wrap {
    background: #fff;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0px 4px 12px rgba(16, 25, 45, 0.08);
    text-align: center;
    padding: 0 40px 40px;
    box-sizing: border-box;
}

.payment-wrap .tts {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    color: #8E9BAE;
    letter-spacing: -0.3px;
}

.payment-wrap h4 {
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.6px;
    color: #10192D;
    margin: 8px -20px 0;
}

.payment-wrap .img {
    width: 150px;
    margin: 12px auto;
    display: block;
    border-radius: 12px;
}

.payment-wrap .barcode {
    width: 260px;
    display: block;
    margin: 10px auto;
    position: relative;
}

.payment-wrap .barcode img {
    width: 100%;
}

.payment-wrap .barcode.disabled1::before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .85);
    position: absolute;
    left: 0;
    top: 0;
}

.payment-wrap .barcode.disabled1::after {
    width: 90px;
    height: 30px;
    line-height: 28px;
    margin: 0 auto;
    position: absolute;
    left: calc(50% - 45px);
    top: calc(50% - 15px);
    background: rgba(16, 25, 45, 0.8);
    border-radius: 50px;
    color: #fff;
    content: '사용완료';
    font-size: 14px;
}

.payment-wrap .barcode.disabled2::before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .85);
    position: absolute;
    left: 0;
    top: 0;
}

.payment-wrap .barcode.disabled2::after {
    width: 114px;
    height: 30px;
    line-height: 28px;
    margin: 0 auto;
    position: absolute;
    left: calc(50% - 57px);
    top: calc(50% - 15px);
    background: rgba(16, 25, 45, 0.8);
    border-radius: 50px;
    color: #fff;
    content: '유효기간 만료';
    font-size: 14px;
}

.payment-wrap .qr {
    width: 160px;
    position: relative;
}

.payment-wrap .qr.disabled1::before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .85);
    position: absolute;
    left: 0;
    top: 0;
}

.payment-wrap .qr.disabled1::after {
    width: 90px;
    height: 30px;
    line-height: 28px;
    margin: 0 auto;
    position: absolute;
    left: calc(50% - 45px);
    top: calc(50% - 15px);
    background: rgba(16, 25, 45, 0.8);
    border-radius: 50px;
    color: #fff;
    content: '사용완료';
    font-size: 14px;
}

.payment-wrap .qr.disabled2::before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .85);
    position: absolute;
    left: 0;
    top: 0;
}

.payment-wrap .qr.disabled2::after {
    width: 114px;
    height: 30px;
    line-height: 28px;
    margin: 0 auto;
    position: absolute;
    left: calc(50% - 57px);
    top: calc(50% - 15px);
    background: rgba(16, 25, 45, 0.8);
    border-radius: 50px;
    color: #fff;
    content: '유효기간 만료';
    font-size: 14px;
}

.payment-wrap .barcode-number {
    margin: 20px 0 30px;
}

.payment-wrap .barcode-number li {
    display: inline-block;
    margin: 0 4px;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #10192D;
}

.payment-wrap .date {
    color: #64748B;
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.3px;
}

.payment-wrap .date span {
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    line-height: 150%;
    text-align: center;
    letter-spacing: -0.3px;
    padding: 2px 6px;
    background: #0EA5E9;
    border-radius: 50px;
}

/*.card-content {height: auto; width: 100%; padding: 20px 20px 50px; position: relative; color: #fff; text-align: left; background: linear-gradient(90deg, #2F4786 0%, #1B2C59 100%); box-shadow: 0px 2px 2px rgba(22, 92, 221, 0.25), 0px 6px 4px rgba(22, 92, 221, 0.15); border-radius: 12px; overflow: hidden;}
.card-content .subject {font-weight: bold; font-size: 18px; line-height: 120%; letter-spacing: -0.6px;}
.card-content .tbl-data {margin: 40px 0 0;}
.card-content .tbl-data th, .card-content .tbl-data td {border-bottom: 0;}
.card-content .tbl-data th {color: rgba(255,255,255, .8)}
.card-content .tbl-data td { color: #fff; font-weight: 600; font-size: 20px;}
.card-content .tbl-data td b {font-weight: 800;}
.card-content .period {display: block; padding: 15px 20px; background: rgba(0,0,0, .1); position: absolute; left: 0; bottom: 0;  height: 52px; width: 100%;  box-sizing: border-box; color: rgba(255,255,255,.8); font-size: 14px; }
.card-content .period span {display: inline-block;background: rgba(0,0,0,.12); color: rgba(255,255,255,.8);font-size: 12px; font-weight: 600; line-height: 14px; letter-spacing: -0.3px; padding: 5px 5px; border-radius: 4px; margin-right: 10px;}
*/
.bg-card .txt2 span {
    display: inline-block;
    background: rgba(0, 0, 0, .12);
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: -0.3px;
    padding: 5px 5px;
    border-radius: 4px;
    margin-right: 10px;
}

.bg-card .subject {
    height: 7.43%;
    width: auto;
    position: absolute;
    top: 12.57%;
    left: 6.97%;
    font-weight: bold;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: -0.6px;
}

.payment-list {}

.payment-list .payment-tt {
    font-weight: bold;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
    margin-top: 28px;
}

.payment-list ul {
    margin: 0;
}

.payment-list ul li {
    border-bottom: 1px solid #F1F5F9;
    padding: 28px 0;
}

.payment-list ul li:last-child {
    border-bottom: 0;
}

.payment-list ul li p {
    font-size: 12px;
    line-height: 120%;
    color: #64748B
}

.payment-list ul li h4 {
    font-weight: bold;
    color: #10192d;
    margin-top: 6px;
    letter-spacing: -0.6px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16px;
    line-height: 140%;
}

.payment-list div {
    position: relative;
    margin-top: 8px;
}

.payment-list div .badge {
    display: inline-block;
    border-radius: 50px;
    vertical-align: middle;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 500;
}

.payment-list div .badge.c1 {
    background: #E9F1FF;
    color: #2873FF;
}

.payment-list div .badge.c2 {
    background: #F1F5F9;
    color: #64748B;
}

.payment-list div .cancel {
    float: right;
    color: #8E9BAE;
    font-size: 12px;
    line-height: 120%;
    letter-spacing: -0.3px;
    text-decoration: underline;
    margin-top: 3px;
}

/*혜택*/
.benefits-wrap {
    padding: 24px 0;
    margin: 24px 0 0;
    border-top: 1px solid #F1F5F9;
}

.benefits-wrap .head {
    font-size: 18px;
    line-height: 120%;
    font-weight: bold;
    letter-spacing: -0.3px;
    color: #10192D;
    margin-bottom: 24px;
    border-radius: 0;
    overflow: visible;
}

.benefits-wrap .head span {
    color: #f9791f;
}

.benefits-wrap .head img {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin: -3px 8px 0 0;
}

.benefits-comment {
    font-size: 18px;
    line-height: 120%;
    font-weight: bold;
    letter-spacing: -0.3px;
    color: #10192D;
    margin-bottom: 24px;
    border-radius: 0;
    overflow: visible;
}

.benefits-comment img {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 8px 0 0;
}

.benefits-content {
    position: relative;
}

.benefits-content img {
    width: 46px;
    height: 46px;
    border: none;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 23px;
}

.benefits-content h4 {
    font-weight: 800;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
    width: calc(100% - 55px);
    display: block;
}

.benefits-content p {
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -.3px;
    color: #8E9BAE;
    margin-bottom: 5px;
    width: calc(100% - 55px);
    display: block;
}

.calendar-wrap {
    background: #F1F5F9;
    border-radius: 16px;
    padding: 20px 16px;
    margin-bottom: 16px;
}

.month-title {
    position: relative;
    height: 25px;
}

z .month-title .subject {
    font-weight: bold;
    font-size: 18px;
    line-height: 140%;
    color: #10192D;
}

.month-title .month {
    width: 56px;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}

.month-title .month a {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url(/images/ic-calendar-on.svg) 0 0 no-repeat;
}

.month-title .month .prev {
    transform: rotate(-180deg);
    margin-right: 16px;
}

.month-title .month .next {}

.month-title .month .prev.off {
    background: url(/images/ic-calendar-off.svg) 0 0 no-repeat;
    cursor: default;
}

.month-title .month .next.off {
    background: url(/images/ic-calendar-off.svg) 0 0 no-repeat;
    cursor: default;
}

.weekday {
    text-align: center;
}

.weekday>div {
    width: 14.285%;
    height: 40px;
    line-height: 40px;
    float: left;
    font-weight: 600;
    font-size: 12px;
    color: #10192D;
}

.day {
    text-align: center;
}

.day>div {
    width: 14.285%;
    height: 40px;
    line-height: 36px;
    float: left;
    font-weight: 400;
    font-size: 14px;
    color: #64748B;
    position: relative;
    z-index: 2;
}

.day>div.attend {
    font-size: 0;
}

.day>div.attend::after {
    content: '';
    width: 40px;
    height: 40px;
    left: calc(50% - 20px);
    top: 0;
    position: absolute;
    background: url(/images/ic-attend.svg) 0 0 no-repeat;
    background-size: cover;
}

.day>div.today {
    color: #fff;
    background: url(/images/bg-today.svg) 50% 50% no-repeat;
    background-size: 36px 36px;
}

/* 에러 */
.error {
    border: 1.5px solid #F65556 !important;
}

.error-text {
    color: #F65556;
    letter-spacing: -0.3px;
    margin-top: 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
}

/* datepicker 보정 */
.inp-ympick {
    background: url(/images/ic-select-arrow.svg) no-repeat 100% 50% transparent !important;
    border: none !important;
    width: 130px !important;
    height: 20px !important;
    color: #000 !important;
    font-size: 16px;
}

.rolldate-container .rolldate-panel {
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.rolldate-container .rolldate-btn.rolldate-cancel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    width: 24px;
    height: 24px;
    background: url(/images/ic-bottom-close.svg) no-repeat center;
    background-size: 100% 100%;
    border: none;
    font-size: 0;
    padding: 0;
    left: auto;
}

.rolldate-container header {
    display: flex;
    align-items: center;
    height: 64px;
    border-bottom: none !important;
    padding: 14px 24px;
    font-size: 20px !important;
    line-height: 1.2 !important;
    letter-spacing: -.6px;
    font-weight: 800;
    text-align: left;
}

.rolldate-container .rolldate-content {
    top: 0 !important;
}

.rolldate-container .rolldate-confirm {
    height: initial !important;
    display: flex;
    cursor: pointer !important;
    font-size: 1rem !important;
    transition: all .2s;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff !important;
    background-color: #2873FF;
    /* left: 1.5em !important;
    padding: 0 1rem !important;
    height: 3.5rem !important; */
    line-height: 3.5rem;
    border-radius: 1rem;
    /* bottom: 0; */
    position: static !important;
    margin: 20px 24px;
}

.rolldate-container .rolldate-panel {
    height: 360px !important;
}

.rolldate-container .rolldate-wrapper li {
    height: 40px !important;
    font-size: 18px;
    font-weight: 700;
    transform: none !important;
    color: #000 !important
}

.rolldate-container .rolldate-dim {
    background: #8e9bae !important;
    mix-blend-mode: screen;
    border: none !important;
}

.rolldate-container .mask-top {
    top: -1px !important;
    height: 93px !important;
}

.rolldate-container .mask-bottom {
    bottom: -20px !important;
    height: 98px !important;
}

.rolldate-container .rolldate-wrapper>div {
    height: 209px !important;
    position: relative;
    z-index: 2;
}

.rolldate-container .rolldate-wrapper ul {
    margin-top: 92px !important;
}

.rolldate-container .rolldate-wrapper > div::before {
    content: '';
    height: 40px;
    border-radius: 8px;
    background: #F1F5F9;
    display: block;
    left: 4px;
    top: calc(50% - 14px);
    width: calc(100% - 10px);
    position: absolute;
}

/* .rolldate-container .rolldate-wrapper::after {
    content: '';
    height: 40px;
    border-radius: 8px;
    background: #F1F5F9;
    display: block;
    right: 24px;
    top: calc(50% - 14px);
    width: calc(50% - 30px);
    position: absolute;
} */

.rolldate-container .rolldate-wrapper {
    width: calc(100% - 40px);
    margin-left: 20px;
}

.rolldate-container .rolldate-mask {
    background: rgba(6, 10, 29, 0.6) !important;
    backdrop-filter: blur(10px) !important;
}

hr {
    display: block;
    margin: 16px 0 24px;
    height: 1px;
    background: #F1F5F9;
    border: none;
}

/* 알림 */
.alarm-list {
    padding-bottom: 32px;
    margin: 0 -24px;
    width: calc(100% + 48px) !important;
    margin-top: 8px;
}

.alarm-list li {
    position: relative;
    padding: 20px 24px;
    display: block;
    font-size: 0;
}

.alarm-list li .ico {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #F1F5F9;
    text-align: center;
    line-height: 24px;
    vertical-align: top;
    display: inline-block;
    margin-right: 16px;
    padding: 0;
    font-size: 0;
}

.alarm-list li .ico img {
    margin: 0;
}

.alarm-list li .subject {
    width: calc(100% - 40px);
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #10192D;
    display: inline-block;
}

.alarm-list li .subject .s1 {
    color: #64748B;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 400;
}

.alarm-list li .subject .s2 {
    color: #10192D;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    /* display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; */
}

.alarm-list li .subject .s2.opened {
    height: auto;
    -webkit-line-clamp: inherit;
}

.alarm-list li .btn-view {
    margin-top: 12px;
    font-size: 12px;
    color: #10192D;
    font-weight: 400;
}

.alarm-list li .btn-more {
    margin-top: 12px;
    font-size: 12px;
    color: #10192D;
    font-weight: 400;
}

.alarm-list li .btn-more::before {
    content: "더보기";
    font-size: 12px;
}

.alarm-list li .btn-more.opened::before {
    content: "접기";
}

.alarm-list li .date {
    position: absolute;
    top: 21px;
    right: 24px;
    font-size: 14px;
    line-height: 120%;
    text-align: right;
    letter-spacing: -0.3px;
    color: #8E9BAE;
    text-align: left;
    display: inline-block;
}

.alarm-list li.new {
    background: #E9F1FF;
}

.alarm-list li.new .ico {
    background: #fff;
}

.empty-report-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.empty-report {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.empty-report img {
    margin-bottom: 24px;
}

.empty-report .empty-report-text {
    font-size: 20px;
}

/* 선물하기 */

.gift-content-header {
    display: flex;
    justify-content: space-between;
}

.gift-content-header .header-title {
    font-size: 16px;
    font-weight: 700;
}

.gift-content-header p {
    font-size: 12px;
    font-weight: 400;
}

.selected-list {
    margin-bottom: 150px;
}

.selected-item {
    display: flex;
}

.selected-item .item-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    margin-right: 20px;
    flex-shrink: 0;
}

.selected-item .item-image img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.selected-item .item-misc .item-shop {
    font-size: 12px;
    font-weight: 400;
}

.selected-item .item-misc .item-desc {
    font-size: 16px;
    font-weight: 700;
}

.gift-finish .gift-finish-title {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.gift-finish-title .imoji-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 4px;
}

.gift-finish-price {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0.06;
}

.gift-fail .ask-center {
    font-size: 16px;
    font-weight: 400;
    color: #8E9BAE;
}

.link-to-call {
    background-color: #E9F1FF;
    width: 183px;
    height: 37px;
    padding: 8px 16px;
    border-radius: 8px;
    margin: 0 auto;
    margin-top: 24px;
    margin-bottom: 125px;
}

.link-to-call a {
    font-size: 14px;
    color: #2873FF;
}

/* 출금 */
.account-info {
    position: relative;
}

.account-info.account-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.account-info .account-title {
    font-size: 18px;
    font-weight: 700;
}

.account-info .account-money {
    font-size: 26px;
    font-weight: 400;
    color: #2873FF;
}

.account-info .account-money span {
    font-size: 30px;
    font-weight: 800;
    color: #2873FF;
}

.account-info .account-info-misc {
    display: flex;
}

.account-info .check-button {
    font-family: Noto Sans KR;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    width: 72px;
    height: 36px;
    font-weight: 600;
    color: #64748B;
    padding: 9.5px 12px;
    background-color: #F1F5F9;
    border-radius: 8px;
    margin-top: -8px;
}

.account-info-misc div {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.account-info-misc div img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.account-info-misc p {
    font-size: 14px;
    font-weight: 400;
    color: #8E9BAE;
}

.withdraw-account {
    margin-bottom: 84px;
}

.account-list {
    font-family: Noto Sans KR;
    width: 100%;
    position: relative;
}

.account-list-title {
    font-size: 14px;
    font-weight: 500;
    color: #10192D;
    text-align: left;
}

.account-list .account-item {
    display: flex;
}

.account-item .item-logo {
    width: 42px;
    height: 42px;
    margin-right: 10px;
}

.account-item .item-logo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.account-item .item-info .info-bank {
    font-size: 16px;
    font-weight: 600;
    color: #10192D;
}

.account-item .item-info .info-card-number {
    font-size: 14px;
    color: #64748B;
}

.account-item .item-icon {
    position: absolute;
    top: 8px;
    right: 3px;
}


.charge-list {
    display: flex;
    flex-direction: column;
}

.charge-list .charge-items {
    display: flex;
    algin-items: center;
    justify-content: space-between;
}

.charge-list .charge-items input[type=checkbox] {
    display: none;
}

.charge-list .charge-items label {
    display: block;
    border: 1px solid #E2E8F0;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 16px;
    text-align: left;
    min-height: 80px;
    position: relative;
    width: 100%;
}

.charge-list .charge-items label .charge-money {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.charge-list .charge-items label .charge-date,
.charge-list .charge-items label .charge-bank {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    color: #64748B;
}

.charge-list .charge-items label .charge-date {
    margin-right: 16px;
}

.charge-date::after {
    content: '';
    display: block;
    border-right: 1px solid #64748B;
    height: 10px;
    position: absolute;
    top: 6px;
    right: -11px;
}

.charge-list .charge-items input:checked+label::before {
    content: '';
    background-image: url(/images/ic-radio-on.svg);
}

.charge-list .charge-items input:checked+label {
    background-color: #E9f1FF;
}

.charge-list .charge-items label::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    background: url(/images/ic-radio-off.svg) no-repeat center;
}

/* 프로모션 */
.notice-wrap.promotion-notice-wrap {
    position: absolute;
    bottom: 5%;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 24px;
}

.notice-wrap .notice-box .notice-title {
    font-size: 16px;
    font-weight: 700;
}

.notice-wrap .notice-box .promotion-notice li {
    font-size: 14px;
    color: #64748B;
    line-height: 1.7em;
}

/* 탭 */
.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.content.tab-pane {
    padding-right: 0;
    padding-left: 0;
}

/* 06/30 서현수정 */

.mb95 {
    margin-bottom: 95px !important;
}

.w150 {
    width: 150px !important;
}

.img-rotate {
    width: 100%;
    height: auto;
    position: relative;
    object-fit: contain;
}

.card-wrap {
    margin-bottom: 16px;
    background: #ffffff;
    background: #FFFFFF;
    box-shadow: 0px 4px 12px rgba(16, 25, 45, 0.08);
    border-radius: 12px;
}

.card-wrap .btn-wrap {
    padding: 0 20px 14px;
}

.main-wrap .card-wrap .head a {
    display: flex;
    position: relative;
    padding: 30px 29px 27px 28px;
    justify-content: space-between;
    align-items: center;
}

/* .main-wrap .card-wrap .head a::after{
  width: 42px;
  height: 42px;
  position: absolute;
  top: 24px;
  left: 28px;
  content: "";
  background: url(/images/0630/ic-cards.png)no-repeat center/cover;
} */

.main-wrap .card-wrap .head a .cardLeft {}

.main-wrap .card-wrap .head a .cardLeft .textImgWrap {
    width: 121px;
    margin-bottom: 10px;
}

.main-wrap .card-wrap .head a .cardLeft .textImgWrap img {
    width: 100%;
    height: 100%;
}

.main-wrap .card-wrap .head a .cardLeft p {
    font-weight: 400;
    font-size: 12px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #8E9BAE
}

.main-wrap .card-wrap .head a .cardLeft p strong {
    color: #10192D;
}

.main-wrap .card-wrap .head a .cardRight {
    width: 60px;
    height: 38px;
}

.main-wrap .card-wrap .head a .cardRight img {
    width: 100%;
    height: 100%;
}


.main-wrap .card-wrap .head h2 {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 4px;
    line-height: 26px;
}

.main-wrap .card-wrap .head p {
    color: #8E9BAE;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.card-wrap .btn-wrap .btn-primary {
    height: 60px;
    line-height: 60px;
}

h6.check-card {
    font-weight: 400;
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 28px;
    text-align: center;
}

.done-check {
    padding-right: 30px;
    position: relative;
}

.done-check::after {
    width: 24px;
    height: 24px;
    margin-left: 6px;
    position: absolute;
    content: "";
    background: url(/images/0630/ic-done-check.svg)no-repeat center/cover;
}

.sub-info {
    padding: 10px 16px 25px;
    display: block;
}

.delivery-badge {
    display: block;
    padding: 10px 12px;
    color: #2873FF;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    background: #E9F1FF;
    border-radius: 8px;
}

.delivery-text {
    float: right;
    right: 0;
    margin-top: -16px;
    color: #2873FF;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
}

.kona-card .affiliate-wrap {
    padding: 22px 0 22px 82px;
    text-align: left;
    position: relative;
}

.kona-card .affiliate-wrap.warn {
    padding: 22px 20px 22px 80px;
    display: flex;
    align-items: center;
    min-height: 84px;
}

.kona-card .affiliate-wrap.warn p {
    color: #64748B;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.3px;
    margin-bottom: 15px;
}

.kona-card .affiliate-wrap::before {
    content: "";
    position: absolute;
    display: block;
    top: 22px;
    left: 20px;
    width: 42px;
    height: 42px;
    background: url(/images/0630/ic-cards.png)no-repeat center/cover;
}

.kona-card .affiliate-wrap.warn::before {
    width: 40px;
    height: 40px;
    background: url(/images/0630/ic-warn.png)no-repeat center/cover;
}

.kona-card .affiliate-wrap h2 {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 4px;
}

span.arrow-right {
    font-weight: 400;
    font-size: 14px;
    color: #64748B;
    line-height: 18px;
    vertical-align: top;
    padding-right: 22px;
}

span.arrow-right::after {
    width: 18px;
    height: 18px;
    vertical-align: top;
    line-height: 20px;
    margin-left: 4px;
    display: inline-block;
    position: absolute;
    content: "";
    background: url(/images/0630/ic-right-arrow.svg)no-repeat center/cover;
}

span.arrow-right.blue {
    color: #2873FF;
}

span.arrow-right.blue::after {
    background: url(/images/0630/ic-right-blue.svg)no-repeat center/cover;
}

.card-info {
    width: 100%;
}

.card-info a {
    display: block;
    position: relative;
    text-align: left;
    padding: 0 16px 24px;
    border-bottom: 1px solid rgba(241, 245, 249, 1);
}

.card-info h2 {
    color: #10192D;
    font-weight: 800;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 6px;
}

.card-info p {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #8E9BAE;
}

.card-info .btn-all {
    position: absolute;
    bottom: 35px;
    right: 5px;
}


.kona-card .quick-wrap {
    border-radius: 16px;
    background: #F1F5F9;
    display: grid;
    width: 100%;
    height: 96px;
    margin-bottom: 20px;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 4px;
    align-items: stretch;
    justify-items: stretch;
}

.kona-card .quick-wrap li {
    text-align: center;
    position: relative;
}

.kona-card .quick-wrap li:not(:last-child)::after {
    position: absolute;
    width: 1px;
    height: 31px;
    background: #E2E8F0;
    content: "";
    right: -6px;
    top: 32px;
}

.kona-card .quick-wrap li a {
    display: block;
    font-size: 0;
    height: 100%;
    border-radius: 8px;
}

.kona-card .quick-wrap li a:active {
    background: rgba(16, 25, 45, 0.08);
}

.kona-card .quick-wrap li i {
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-bottom: 8px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 23px;
}

.kona-card .quick-wrap li .i-history {
    background-image: url(/images/ic-quick-history.svg);
}

.kona-card .quick-wrap li .i-benefit {
    background-image: url(/images/ic-quick-benefit.svg);
}

.kona-card .quick-wrap li .i-withdraw {
    background-image: url(/images/0630/ic-quick-download.svg);
}

.kona-card .quick-wrap li p {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -0.5px;
}

.lost-ing a::after {
    content: "분실 신고중";
    color: #2873FF;
    float: right;
    padding-right: 26px;
    font-size: 14px;
    font-weight: 400;
}

.radio-wrap.smaller li input[type='radio']~label {
    min-height: 72px;
}

.radio-wrap.smaller li input[type='radio']~label i {
    width: 40px;
    height: 40px;
}

.radio-wrap.smaller li p {
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
    vertical-align: middle;
}

.list-e-wrap.left-check {
    margin: 0;
}

.list-e-wrap.left-check li input[type='radio']~label:active {
    background-color: #fff;
}

.list-e-wrap.left-check li input[type='radio']~label::after {
    background: url(/images/0630/ic-radio-off2.svg) no-repeat center;
    top: 50%;
    left: 0;

}

.list-e-wrap.left-check li input[type='radio']:checked~label {
    background: #fff;
    color: inherit;
}

.list-e-wrap.left-check li input[type='radio']:checked~label::after {
    background-image: url(/images/ic-radio-on2.svg);
}

.list-e-wrap.left-check li input[type='radio']~label h4 {
    padding-left: 32px;
}

p.exclamation {
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: -0.3px;
    color: #8E9BAE;
    position: relative;
    padding-left: 22px;
}

p.exclamation::before {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    vertical-align: top;
    left: 0;
    background: url(/images/0630/ic-exclamation.svg)no-repeat center/cover;
}

.card-info .card-black {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    color: #1B2537;
    margin-bottom: 13px;
}

.px0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.po-bottom2.revise {
    width: 100% !important;
    left: initial;
}

.signInIcon {
    width: 48px;
    height: 48px;
    margin-right: 16px;
}

.bottom-cont.maxSize {
    padding-bottom: 16px;
}

.bottom-cont.maxSize .input-wrap {
    margin-top: 8px;
}

.bottom-cont.maxSize .input-wrap input[type=search] {
    width: 100%;
}

/* .bottom-cont.maxSize .bankSelectList {height:75vh; overflow-y:scroll;} */
.bottom-cont.maxSize .bankSelectItem {}

.bottom-cont.maxSize .bankSelectItem .itemWrap {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 0px;
    border-radius: 14px;
    overflow: hidden;
}

.bottom-cont.maxSize .bankSelectItem .imgWrap {
    width: 42px;
    height: 42px;
    margin-right: 16px;
}

.bottom-cont.maxSize .bankSelectItem .imgWrap img {
    width: 100%;
    height: 100%;
}

.bottom-cont.maxSize .bankSelectItem .bankTitle {
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #10192D;
}

a {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*     -webkit-user-select: none; */
    /*     -moz-user-select: none; */
    /*     -ms-user-select: none; */
    /*     user-select: none; */
}

#onboading .onboadingNecc {
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.3px;
    color: #F65556;
    margin-top: 4px;
}

#onboading .essential {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.3px;
    color: #F65556;
    vertical-align: bottom;
    margin-left: 4px;
}

/* 에러페이지 */
.error-wrap {
    text-align: center;
}

.error-wrap .imgWrap {
    margin: 100px auto 24px;
    width: 134px;
    height: 134px;
}

.error-wrap .imgWrap img {
    width: 100%;
    height: 100%;
}

.error-wrap .imgWrap+p {
    font-weight: 800;
    font-size: 44px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
}

.error-wrap .notice {
    margin: 8px 0 0;
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #64748B;
}


.error-wrap .btn {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 48px);
    height: 56px;
    background: #2873FF;
    border-radius: 16px;
    color: #fff;
}

/* 약관 */
#terms-frame {
    height: calc(100vh - 56px - 64px);
    margin-top: 21px;
}

.wrap.terms.ptNone,
.wrap.ptNone {
    padding-top: 0;
}

.wrap.terms.ptNone{min-height : 100vh;}

.term .contentTop {
    margin-bottom: 40px;
}

.term .contentTop .termsTitle {
    font-weight: 800;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
    margin-bottom: 8px;
}

.term .contentTop .date {
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #8E9BAE;
}

.term .contentBody {}

.term .contentBody .termSummary {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.3px;
    color: #10192D;
    margin-bottom: 32px;
}

.term .contentBody .termItems {
    margin-bottom: 32px;
}

.terms .contentBody .termItems:last-child {
    margin-bottom: 0;
}

.term .contentBody .termItems .itemHeader {
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.3px;
    color: #333D4B;
    margin-bottom: 16px;
}

.term .contentBody .termItems .itemHeader .numbering {
    color: #2873FF;
    margin-right: 8px;
}

.term .contentBody .termItems .itemHeader .text {}

.term .contentBody .termItems .itemContent {
    padding: 16px;
    background: #F1F5F9;
    border-radius: 10px;
}

.term .contentBody .termItems .itemContent .itemText {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.3px;
    color: #10192D;
}

.term .contentBody .termItems .itemContent .itemText .subTitle {
    display: inline-block;
    margin-bottom: 8px;
}

.tableWrap .termTable {
    text-align: center;
    font-size: 14px;
}

.tableWrap {
    margin-top: 24px;
}

.tableWrap .termTable thead {}

.tableWrap .termTable tr {}

.tableWrap .termTable th {
    border: 1px solid rgba(210, 213, 219, 0.94);
    background: rgba(210, 213, 219, 0.94);
    padding: 2px 6px;
    vertical-align: middle;
}

.tableWrap .termTable td {
    vertical-align: middle;
    padding: 2px 6px;
    border: 1px solid rgba(210, 213, 219, 0.94);
}

.term .buttonWrap .btn {
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.3px;
    color: #FFFFFF;
}

.termItems .sectionTitle {
    font-weight: 800;
    font-size: 19px;
}

/*현장결제 QR 코드 바텀시트 */
.qr_img_box {
    position: relative;
}

.qr_img_box .reload {
    text-indent: -9999px;
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background: url("/images/ic-qrRefresh.png") no-repeat center;
    background-size: 40px 40px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
}

.qr_img_box.refresh .reload {
    display: block;
}

#mmbrNm {
    margin-bottom: 70px;
}

.oneOnOne {
    font-family: 'Apple SD Gothic Neo', -apple-system, 'Noto Sans KR', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 27px;
    letter-spacing: 0.3px;
}

/* 페이락 끝 & 가맹점 커스팀 시작 */
html,
body {
    height: 100%;
    min-height: -webkit-fill-available;
    word-wrap: break-word;
    word-break: break-all;
}

body {
    color: #10192D;
    background: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    font-family: 'Apple SD Gothic Neo', -apple-system, 'Noto Sans KR', sans-serif;
}

body.is-hold {
    overflow: hidden;
}

.header {
    display: flex;
    position: relative;
    height: 56px;
    justify-content: center;
    align-items: center;
}

.header.fakeHeader {
    justify-content: space-between;
    height: 74px;
    padding: 32px 20px 6px 24px;
}

.header.fakeHeader .fakeTitle {
    font-weight: 800;
    font-size: 28px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
    margin-bottom: -3px;

}

.header.fakeHeader .goToAlarm {
    position: relative;
    text-indent: -9999px;
    width: 40px;
    height: 40px;
    background: url(/images/ic-alarm.png) no-repeat center;
    background-size: 28px;
}

.header.fakeHeader .goToAlarm:active {
    background-color: #ECEDEE;
    border-radius: 8px;
}

.header.fakeHeader .goToAlarm.new::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background: #F75555;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    right: 6px;
}

.header .mainTitle {
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.6px;
    color: #10192D;
}

.header .headerLeftBtn,
.header .headerRightBtn {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%)
}

.header .headerLeftBtn {
    left: 24px;
}

.header .headerLeftBtn.headerBack {
    background: url(/images/ic-arrowBack.png) no-repeat center;
    background-size: 100%;
}

.login .header .headerLeftBtn.headerBack {
    background: url(/images/ic-arrowBackWhite.png) no-repeat center;
    background-size: 100%;
}

.header .headerRightBtn {
    right: 24px;
}

.header .headerRightBtn.headerClose {
    background: url(/images/ic-headerClose.png) no-repeat center;
    background-size: 100%;
}

.contentWrap {
    position: relative;
    min-height: calc(100vh - 56px - var(--safeAreaInsetBottom));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.contentWrap.fakeHeader {
    min-height: calc(100vh - 74px - var(--safeAreaInsetBottom));
}

.content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    padding: 16px 24px calc(40px + var(--safeAreaInsetBottom));
}

.content.innerNavigator {
    padding: 16px 24px calc(26px + var(--safeAreaInsetBottom));
}

.contentWrap.withoutHeader {
    min-height: calc(100vh - var(--safeAreaInsetBottom));
}

.content.ptNone {
    padding-top: 0;
}

.content.pdNone {
    padding: 0;
}

.content.pt22 {
    padding-top: 22px;
}

.content.pd20 {
    padding: 20px;
}

.stickyButtonWrap {
    position: sticky;
    z-index: 110;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 24px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0px, white 10px);
}

.stickyButtonWrap::after {
    content: "";
    display: block;
    height: env(safe-area-inset-bottom);
    min-height: 16px;
    background: #fff;
}

.bottomSheet {}

.bottomSheet.is-open .dim,
.modal.is-open .dim {
    display: block;
}

.bottomSheet .dim,
.modal .dim {
    display: none;
    background: rgba(6, 10, 29, 0.6);
    backdrop-filter: blur(5px);
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1000;
}

.bottomSheet.is-open .bottomSheetContainer {
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.bottomSheet .bottomSheetContainer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 12px 0px 24px;
    background: #FFFFFF;
    box-shadow: 0px -15px 20px rgba(13, 10, 25, 0.06);
    border-radius: 20px 20px 0px 0px;
    z-index: 1100;
    transition: transform 300ms ease-in-out;
    -webkit-transition: -webkit-transform 300ms ease-in-out;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
}

.bottomSheet .bottomSheetContainer .bottomSheetHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 14px 24px;
    margin-bottom: 4px;
}

.bottomSheet .bottomSheetContainer .bottomSheetHeader .bottomSheetTitle {
    font-weight: 800;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.6px;
    color: #10192D;
}

.bottomSheet .bottomSheetContainer .bottomSheetHeader .bottomSheetClose {
    text-indent: -9999px;
    width: 24px;
    height: 24px;
    background: url(/images/ic-bottomSheetClose.png) no-repeat center;
    background-size: 24px 24px;
}

.bottomSheet .bottomSheetContainer .bottomSheetHeader .bottomSheetClose:active {
    background-color: rgba(16, 25, 45, 0.08);
    border-radius: 8px;
}

.bottomSheet .bottomSheetContainer .bottomSheetContent {
    padding: 0 20px;
}

.bottomSheet .bottomSheetContainer .bottomSheetContent::-webkit-scrollbar {
    display: none;
}

.bottomSheet .bottomSheetContainer .buttonRow {
    margin-top: 8px;
}

/* 모달 팝업  */
.modal {}


.modal.is-open .modalContent {
    display: block;
}

.modalContent {
    display: none;
    z-index: 2000;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 327px;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px rgba(13, 10, 25, 0.06);
    border-radius: 20px;
    padding: 24px 24px 20px;
}

.modalContent .modalHeader {
    font-weight: 700;
    font-size: 18px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.6px;
    color: #10192D;
}

.modalContent.grayBox .modalHeader {
    font-style: normal;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: #10192D;

}

.modalContent .modalText {
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.3px;
    color: #8E9BAE;
    margin-top: 20px;
}

.modalContent.grayBox .modalText {
    padding: 16px;
    background: #F1F5F9;
    border-radius: 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.3px;
    color: #10192D;
    text-align: left;
}

.modalContent .buttonRow {
    display: flex;
    width: 100%;
    margin-top: 24px;
}

.terms .terms-bt {
    display: flex;
    width: 100%;
    padding-top : 20px;
    background : #fff;
    position : sticky;
    bottom : 0;
}

.modalContent .buttonRow .btn.btn-primary,
.modalContent .buttonRow .btn.btn-soft {
    border-radius: 12px;
    height: 48px;
    flex: 1;
    flex-shrink: 0;
}

.modalContent .buttonRow .btn.btn-soft {
    margin-right: 8px;
}

.modal .modalContent .modalBtn {
    display: inline-block;
    padding: 8px 16px;
    background: #E9F1FF;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    line-height: 150%;
    color: #2873FF;

}

/* 배지  */
.badge {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 9px;
    line-height: 100%;
    text-align: center;
    letter-spacing: -0.3px;
    padding: 4px 6px;
    border-radius: 50px;
}

.badge.type-1 {
    background: #E9F1FF;
    color: #2873FF;
}

.badge.type-2 {
    font-weight: 500;
    font-size: 11px;
    background: #E2E8F0;
    color: #64748B;
    padding: 6px;
}


/* 제이쿼리 데이트피커 커스텀 */
.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content {
    /* 데이트피커 wrap */
    width: 100%;
    min-height: 313px;
    padding: 20px 16px;
    border: none;
}

.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all {
    /* 달력 헤더  */
    background: #fff;
    border: none;
    padding: 0;
    margin-bottom: 8px;
}

.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all .ui-datepicker-title {
    /* 헤더 타이틀  */
    margin: 0;
    text-align: left;
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
    color: #10192D;

}

.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all .ui-datepicker-prev.ui-corner-all {
    /* 이전 월 이동 버튼  */
    display: block;
    left: initial;
    right: 40px;
    width: 20px;
    height: 20px;
    background: url(/images/chevron-left-date.png) no-repeat center;
    background-size: 100%;
}


.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all .ui-datepicker-next.ui-corner-all {
    /* 다음 월 이동 버튼  */
    display: block;
    width: 20px;
    height: 20px;
    background: url(/images/chevron-left-date.png) no-repeat center;
    background-size: 100%;
    transform: rotate(180deg);
}

.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all .ui-datepicker-prev.ui-corner-all span,
.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all .ui-datepicker-next.ui-corner-all span {
    display: none;
}

.ui-datepicker-calendar thead th {
    /* 달력 요일들  */
    padding: 0;
    width: 40px;
    height: 40px;
    vertical-align: middle;
}

.ui-datepicker-calendar tbody td {
    /* 달력 날짜 감싸는 wrap  */
    width: 40px;
    height: 40px;
}

.ui-datepicker-calendar tbody td .ui-state-default {
    /* 달력 날짜 입력부분  */
    background: #fff;
    border: none;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 100%;
    font-weight: 400;
    color: #64748B;
}

.ui-datepicker-calendar tbody td .ui-state-default.ui-state-highlight {
    /* 오늘날짜 강조  */
    font-weight: 700;
}

.ui-datepicker-calendar tbody td .ui-state-default.ui-state-active {
    /* 날짜 클릭했을때  */
    background: #DBE8FF;
    font-weight: 700;
    color: #2873FF;
    border-radius: 20px;
}

/* 데이트 레인지 피커 daterangepicker 커스텀  */

.daterangepicker.ltr.show-calendar.openscenter {
    /* 피커 달력 wrap  */
    display: block !important;
    border: none;
    width: 100%;
    font-family: 'Apple SD Gothic Neo', -apple-system, 'Noto Sans KR', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 150%;
    color: #10192D;
    margin: 0 auto;
    max-width: 320px;
}

.daterangepicker.show-calendar .ranges {
    margin: 0;
}

.daterangepicker {
    position: static;
}

.daterangepicker .drp-calendar.left {
    width: 100%;
    max-width: initial;
    padding: 0;
    margin: 0;
}

.daterangepicker.show-calendar .drp-calendar.right {
    display: none;
}

.daterangepicker.show-calendar .drp-buttons {
    display: none;
}

.daterangepicker .calendar-table table.table-condensed {
    /* 레인지 피커 달력 테이블 */
    position: relative;
    width: auto;
    margin: 0 auto;
}

.daterangepicker .calendar-table table.table-condensed thead tr:first-child {
    position: relative;
}

.daterangepicker .calendar-table table.table-condensed thead th {
    width: 40px;
    height: 40px;
    font-weight: 600;
    font-size: 12px;
    line-height: 150%;
    color: #10192D;
    border: none;
}

.daterangepicker .calendar-table table.table-condensed thead .month {
    /* 달력 타이틀  */
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
    color: #10192D;
}

.daterangepicker .calendar-table table.table-condensed thead .prev {
    /* 이전 달력 버튼  */
    /* position: absolute;
    right: 40px; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: url(/images/chevron-left-date.png) no-repeat center;
    background-size: 20px;
}

.daterangepicker .calendar-table table.table-condensed thead .next {
    /* 다음 달력 버튼  */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: url(/images/chevron-left-date.png) no-repeat center;
    background-size: 20px;
    transform: rotate(180deg);
}

.daterangepicker .calendar-table table.table-condensed thead .prev span,
.daterangepicker .calendar-table table.table-condensed thead .next span {
    display: none;
}

.daterangepicker .calendar-table table.table-condensed tbody td {
    width: 40px;
    height: 40px;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    text-align: center;
    color: #64748B;
    border: none;
}

.daterangepicker .calendar-table table.table-condensed tbody td.start-date.end-date {
    background: #fff;
    font-weight: 700;
}

.daterangepicker .calendar-table table.table-condensed tbody td.in-range.available {
    background: #E9F1FF;
    border-radius: 50%;
    background: url(/images/img-rangeActive.png) no-repeat center;
    background-size: 90%;
}

.daterangepicker .calendar-table table.table-condensed tbody td.active.start-date,
.daterangepicker .calendar-table table.table-condensed tbody td.active.end-date,
.daterangepicker .calendar-table table.table-condensed tbody td.active:hover {
    /* background: #DBE8FF; */
    background: url(/images/img-dateActive.png) no-repeat center;
    background-size: 90%;
    border-radius: 50%;
    color: #2873FF;
    font-weight: 700;
}

.daterangepicker .calendar-table table.table-condensed tbody td.today {
    color: #64748B;
    font-weight: 700;
    background: #fff;
}

.daterangepicker.openscenter:after,
.daterangepicker.openscenter:before {
    content: initial;
}

.daterangepicker td.off {
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}

/* 스와이퍼  */
.swiperWrap {
    position: relative;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: initial;
}

/* 유저 선택 막기 */
body,
button[type=button],
ul li,
a {
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
}

/*가맹점 기프티업 시작*/
/*가맹점 기프티업 시작*/
/*가맹점 기프티업 시작*/

.intro_splash_wrap{height : calc(100vh - var(--safeAreaInsetBottom));}
.intro_splash{display : flex; flex-wrap : wrap; align-items : center; justify-content : center; position : relative;}
.intro_splash .logo_wrap{flex : 1 0 100%; transform : translateY(85%);}
.intro_splash .logo_wrap .img_wrap{display : flex; align-items : center; justify-content : center; max-width : 165px; margin : 0 auto 14.15px;}
.intro_splash .logo_wrap img{display : block; width : 100%;}
.intro_splash .logo_wrap .splash_title{font-size: 24px; font-weight: 300; line-height: 35px; letter-spacing: 0.006em; text-align: center; color : var(--mainFont);}
.intro_splash .splash_title .highlight_txt{font-weight : 700; display : block;}
.intro_splash .copyright_wrap{color : var(--mainFont); text-align : center; align-self : flex-end;}
.intro_splash .copyright_wrap .app_info_txt{ font-size: 16px; font-weight: 700; line-height: 19px; letter-spacing: -0.6000000238418579px; margin-bottom : 20px;}
.intro_splash .copyright_wrap .copyright_em{font-size: 10px; font-weight: 400; line-height: 14px; letter-spacing: 0em;}

.modal .dim_navy{background : #1A294F;}

.onboarding{height : calc(100vh - var(--safeAreaInsetBottom));}
.onboarding_whole{background : #003C88; padding : 70px 22px calc(40px + var(--safeAreaInsetBottom)); display : flex; flex-wrap : wrap;}
.onboarding_whole .top_info_wrap{text-align : center; margin-bottom : 56.46px;}
.onboarding_whole .top_info_wrap .logo_wrap{max-width : 30px; display : flex; align-items : center; justify-content : center; margin : 0 auto 25.23px;}
.onboarding_whole .top_info_wrap .info_txt{font-size : 17.5px; font-weight : 500; line-height : 40px; color : #fff; white-space : nowrap;}
.onboarding_whole .top_info_wrap .highlight_txt {font-weight : 700; font-size : 25px;}
.onboarding_whole .img_wrap{display : flex; align-items : center; justify-content : center; max-width : 218.51px; margin : 0 auto; padding-bottom : 15.5px;}
.onboarding_whole .img_wrap img{display : block; width : 100%;}
.onboarding_whole .stickyButtonWrap{padding : 0; background : transparent; align-self : flex-end; flex : 1;}
.onboarding_whole .stickyButtonWrap::after{content : unset;}
.onboarding_whole .flow_bg{display : flex; align-items : center; justify-content : flex-start; gap : 0 15px; width : 100%; height : 42.5px; white-space : nowrap; position : fixed; top : 53%; left : 3%; transform : translate(0, -50%); animation : flowText; animation-timing-function : cubic-bezier(0, 0, 1, 1); transition-property : all; animation-duration : 18s; animation-iteration-count :infinite;}
.onboarding_whole .flow_bg .inner_txt{width : 139.93px; height : 42.5px; background : url(/images/visual_onboarding_flow.png) no-repeat center center / contain; flex : 0 0 139.93px;}
@keyframes flowText{
    0%{
        transform : translateX(0);
    }
    100%{
        transform : translateX(-464.79px);
    }
}

.bottomSheet .space_agreement .bottomSheetHeader{padding-bottom : 32px;}
.bottomSheet .space_agreement .agree_list{display : flex; align-items : flex-start; justify-content : flex-start; gap : 0 16px; margin-bottom : 24px;}
.bottomSheet .space_agreement .ico_wrap{flex : 0 0 40px; height : 40px;}
.bottomSheet .space_agreement .ico_wrap img{ display : block;}
.bottomSheet .space_agreement .txt_title{font-size: 16px; font-weight: 600; line-height: 150%; letter-spacing: -0.3px; color : #10192D; margin-bottom : 4px;}
.bottomSheet .space_agreement .txt_sub{font-size: 14px; font-weight: 400; line-height: 140%; letter-spacing: -0.3px; color : #8e9bae;}
.bottomSheet .space_agreement .agree_list:nth-last-child(2){margin-bottom : 55px;}

.btn-soft.btn_onlyTxt{font-size : 12px; font-weight : 600; line-height : 150%; padding : 8px 16px; width : auto; height : auto; border-radius : 8px; margin : 4px 0 0;}

.check_wrap {display : flex; align-items : center; justify-content : space-between; margin-bottom : 3px;}
.terms_list .list_public:last-child{margin-bottom : 24px;}
.check_wrap .check_label{display : flex; align-items : center; justify-content : flex-start; gap : 0 8px; margin-bottom : 6px;}
.check_wrap .check_label input[type=checkbox]{display : inline-block; margin : 0;}
.check_wrap .check_label input[type=checkbox]::before{content : ""; width : 24px; height : 24px; flex-shrink : 0; display : inline-flex; background : url(/images/ic-checkbox-off.svg) no-repeat center center / auto;}
.check_wrap .check_label input[type=checkbox]:checked:before{background : url(/images/ic-checkbox-on.svg) no-repeat center center / auto;}
.check_wrap .check_txt{display : inline-block; font-size : 16px; font-weight : 400; line-height : 150%; color : var(--fontMain); letter-spacing : -0.3px;}
.check_b{border-bottom : 1px solid #E2E8F0; margin-bottom : 20px; padding : 20px 0;}
.check_b .check_txt{font-size : 18px; font-weight : 600; line-height : 140%; letter-spacing : -0.6px;}
.check_wrap .check_txt .option{font-size : 16px; font-weight : 400; line-height : 150%; color : #8e9bae;}
.check_wrap .btn_dropdown{background : url(/images/ico_dropdown_dark.svg) no-repeat center center / contain; width : 24px; height : 24px;}
.check_wrap .btn_dropdown.active{transform : rotate(180deg);}
.check_wrap .dropdown_txt{background : none; color : #8e9bae; border-bottom : 1px solid #8e9bae; width : auto; height : auto;}
.bottomSheet .terms_list .terms_inner_wrap{background : #F1F5F9; border-radius : 16px; padding : 0 32px; height : 0; overflow : hidden; transition : all 0.3s;}
.bottomSheet .terms_list .terms_inner_wrap.active{padding-top : 20px; padding-bottom : 20px; height : auto; margin-bottom : 16px;}
.bottomSheet .terms_list .btn_txt{display : block; font-size: 14px; font-weight: 400; line-height: 120%; letter-spacing : -0.3px; text-align: left; color : #64748B; border-bottom : 1px solid #64748B;}
.bottomSheet .terms_list .btn_txt:not(:last-child){margin-bottom : 14px;}

.whole_popup {position : fixed; top : 0; left : 0; width : 100%; height : calc(100% - var(--safeAreaInsetBottom)); background : #fff; transform : translate(0, 0); }
.whole_popup .header{justify-content : flex-start; padding : 16px 24px;}
.whole_popup .btn_whole_close{width : 24px; height : 24px; display : block; background : url(/images/ic-close-x.svg) no-repeat center center / contain;}
.whole_popup .modalContent{padding : 16px 24px 8px; width : 100%; height : calc(100% - 56px - var(--safeAreaInsetBottom)); transform : translate(0, 0); position : static; box-shadow : none; overflow-y : scroll;}
.whole_popup .modalContent .modalHeader{font-size : 24px; font-weight : 800; line-height : 120%; text-align : left; margin-bottom : 40px;}
.whole_popup .modalContent .header_sub{display : block; margin-top : 6px; font-size : 16px; font-weight : 400; line-height : 120%;color : #8e9bae;}
.whole_popup .list_public{margin-bottom : 32px;}
.whole_popup .info_list .list_title{font-size : 16px; font-weight : 700; line-height : 150%; letter-spacing : -0.3px; color : #333D4B; margin-bottom : 16px;}
.whole_popup .info_list .list_numbering{color : #2873FF; display : inline-block; margin-right : 8px;}
.whole_popup .info_list .info_txt_wrap{padding : 16px; background : #F1F5F9; border-radius : 10px;}
.whole_popup .info_list .info_txt{font-size : 16px; font-weight : 400; line-height : 150%; letter-spacing : -0.3px; color : #10192D;}
.whole_popup .not_bg .info_txt_wrap{padding : 0; background : none;}

.main .content{padding: 6px 20px calc(35px + var(--safeAreaInsetBottom));}
.main .contentTop .shopInfo .shopTitle{margin-bottom : 2px;}
.main .product_lookup_wrap{background: #FFFFFF; box-shadow: 0px 4px 12px rgba(16, 25, 45, 0.08); border-radius: 12px; padding : 24px 16px; margin-bottom : 16px;}
.main .product_lookup_wrap .title_wrap{display : flex; align-items : center; justify-content : space-between; margin : 0 auto 30px; width : calc(100% - 8px);}
.main .product_lookup_wrap .con_title{font-size: 20px; font-weight: 800; line-height: 24px; letter-spacing: -0.6px;}
.main .product_lookup_wrap .btn_onlyTxt{font-weight: 400; line-height: 120%; height : auto; color : var(--fontMiddle);}
.main .product_lookup_wrap .tab_controller_wrap{display : flex; align-items : center; justify-content : flex-start; gap : 0 6px; margin-bottom : 30px;}
.main .product_lookup_wrap .btn_tab{height : auto; font-size: 14px; font-weight: 500; line-height: 100%; color: #64748B; padding : 6px 8px; background : #F1F5F9; color : #64748B; opacity : 0.5;}
.main .product_lookup_wrap .btn_tab.active{opacity : 1;}
.main .tab_control_body{display : none;}
.main .tab_control_body.active{display : flex;}
.main .Lookup_list .list_public:not(:last-child){padding-bottom : 20px; border-bottom : 1px solid #F1F5F9;}
.main .Lookup_list .list_public:not(:first-child){margin-top : 20px;}
.main .Lookup_list .list_clickable{display : flex; align-items : flex-start; justify-content : flex-start; gap : 0 14px; }
.main .Lookup_list .img_wrap{flex : 0 0 50px; height : 50px; border-radius : 12px; overflow : hidden; display : inline-flex; align-items : center; justify-content : center;}
.main .Lookup_list .img_wrap img{display : block; width : 100%; height : 100%; object-fit : contain;}
.main .Lookup_list .txt_wrap{padding : 4px 0; width : calc(100% - 50px - 8px);}
.main .Lookup_list .product_company{font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.3px; color : var(--fontLight); margin-bottom : 8px;}
.main .Lookup_list .product_name{font-size : 14px; font-weight : 600; line-height : 140%; color : var(--fontMain); white-space : nowrap;}
.main .homeCard{margin-bottom : 0;}

.bgColor_grayscale{background-color : #F1F5F9;}
.content.not_padding{padding : 0 0 calc(47px + var(--safeAreaInsetBottom));}

input[type=text].search_input{background : url(/images/ic-search.svg) no-repeat #fff 14px center / 24px 24px; padding : 12px 10px 12px 44px; border : 1.5px solid #fff; height : 48px;}
input[type=text].search_input::placeholder{font-weight : 600; font-size : 16px; color : var(--fontLight);}

.tab_inner_controller{display : flex; align-items : flex-start; justify-content : flex-end; margin-top : 16px;}

.dropdown_controller_wrap{position : relative; min-height : 39px;}

.tab_bk_controller{display : flex; align-items : center; justify-content : flex-start; gap : 0 8px;}
.tab_bk_controller .tabBtn_bk{border : 1px solid var(--fontLight); color : vaR(--fontLight); border-radius : 8px; padding : 7.5px 12px; font-size : 14px; line-height : 120%;}
.tab_bk_controller .tabBtn_bk.active{background-color : #1B2537; color : #fff;}

/*dropdown 필터*/
.dropdown_controller{display : grid; grid-template-columns : 1fr; justify-items : end; padding : 7.5px 12px; position : relative; top : 0; right : 0; border : 1px solid #F1F5F9; z-index : 2;
    grid-template-areas : "choice"
    "listUp"
}
.dropdown_controller.active{border : 1px solid #000; border-radius : 8px; position : absolute; white-space : nowrap;}
.dropdown_controller .dropdown_btn{display : none; align-items : center; justify-content : flex-end; gap : 0 8px; font-size : 14px; line-height : 150%; letter-spacing : var(--fontMin); color : var(--fontMain); padding-right : 24px;}
.dropdown_controller .dropdown_btn:active{color : var(--fontActive);}
.dropdown_controller .dropdown_btn.choice:active{color : var(--fontMain);}
.dropdown_controller.active .dropdown_btn{display : flex;}
.dropdown_controller.active .dropdown_btn:not(:last-child){padding-bottom : 12px;}
.dropdown_controller .choice{grid-area : choice; padding-right : 0; display : flex;}
.choice::after{content : url(/images/arrow_down_black.svg); width : 16px; height : 16px; display : inline-block;}
/*dropdown 필터*/

.tab_controller_body{display : none;}
.tab_controller_body.active{display : block;}

.tab_box{display : none;}
.tab_box.active{display : block;}

.tab_controller_wrap{display : flex; align-items : center; justify-content: center;}
.tab_controller_wrap .tab_button{flex : 0 0 50%; display : inline-flex; align-items : center; justify-content: center; font-size : 16px; font-weight : 400; line-height : 150%; letter-spacing : var(--fontMin); color : var(--fontLight); position : relative; height : 46px;}

.border_controller .tab_button.active{color : var(--fontMain); font-weight : 700;}
.border_controller .tab_button.active::before{content : ""; width : 100%; height : 2px; position : absolute; bottom : 0; left : 0; background : var(--fontMain);}

.lookup .listup_wrapper{padding : 12px 25px 0 24px;}
.lookup .listup_wrapper .inputWrap{display : block; position : relative; overflow : hidden;}
.lookup .listup_wrapper.active{padding : 12px 16px 0 16px;}
.lookup .listup_wrapper.active .inputWrap{display : flex;}

.listup_wrapper .input_del_btn{display : none; align-items : center; justify-content : center; width : 24px; height : 24px; position : absolute; top : 24px; right : 70px; transform : translateY(-50%);}
.listup_wrapper .input_del_btn::before{content : url(/images/ico_close_input.svg); display : block; width : 100%; height : 100%;}
.listup_wrapper .btn_cancle{display : none; width : 60px; height : 48px; align-items : center; justify-content : center; padding : 16px; font-size : 16px; font-weight : 400; line-height : 100%; white-space : nowrap;}

.listup_wrapper .keyword_box{display : none; position : fixed; top : 0; left : 0; width : 100%; background-color : #F1F5F9; overflow : hidden; z-index : 10; padding-top : 16px;}


.listup_wrapper.active input[type=text].search_input{flex : 1 1 calc(100% - 60px);}
.listup_wrapper.active .btn_cancle{display : inline-flex;}
.listup_wrapper.active .keyword_box{display : flex;}
.listup_wrapper .input_del_btn.active{display : inline-flex;}

.keyword_box .search_list{flex : 1;}
.keyword_box .search_list .list_clickable{display : flex; width : 100%; padding : 14.5px 24px;}
.keyword_box .search_list .search_txt{font-size : 16px; font-weight : 400; line-height : 120%; max-width : 311px; overflow : hidden; white-space : nowrap; text-overflow : ellipsis;}
.keyword_box .search_list .auto_finish .search_txt{color : var(--fontLight); text-align : left;}
.keyword_box .search_list .auto_finish .list_clickable{justify-content : flex-start;}
.keyword_box .search_list .auto_finish .search_txt .search_high{color : var(--fontMain); font-weight : 600;}
.keyword_box .search_list .last_search{display : flex; align-items : center; justify-content : space-between;}
.keyword_box .search_list .last_search .list_clickable{display : inline-flex; align-items : center; justify-content : space-between; flex : 1; padding : 14.5px 0 14.5px 24px; margin-right : 8px;}
.keyword_box .search_list .last_search .search_txt{font-weight : 600; max-width : 285px; }
.keyword_box .search_list .last_search .search_date{font-size : 16px; font-weight: 400; line-height : 100%; color : #64748B; flex-shrink : 0;}
.keyword_box .search_list .last_search .btn_del{display : inline-flex; align-items : center; justify-content: center; flex : 0 0 24px; padding : 14.5px 20px 14.5px 0; max-height : 48px;}
.keyword_box .search_list .last_search .btn_del::before{content : url(/images/ico_del_keyword.svg); width : 24px; height : 24px; display : inline-block;}

.keyword_box .search_list .logNon{display : none; font-size : 16px; font-weight : 400; line-height : 120%; color : var(--fontMiddle); text-align: center; transform : translateY(144px);}

.keyword_box .search_list.search_none .list_public{display : none;}
.keyword_box .search_list.search_none .logNon{display : block;}

/* .tab_box{margin-top : 25px;} */
.date_print{font-size: 14px; font-weight: 600; line-height: 120%; color : var(--fontLight); padding : 0 24px 12px;}
.lookup .date_box_wrap:not(:last-child){margin-bottom : 24px;}
.lookup_detail_list .list_public:not(:last-child){border-bottom : 1px solid var(--colorGrayScale);}
.lookup_detail_list .list_clickable{padding : 20px 24.5px; display : flex; align-items : flex-start; justify-content : space-between; background : #fff; gap : 0 24px;}
.lookup_detail_list .img_wrap{flex : 0 0 60px; height : 60px; border-radius : 12px; overflow : hidden; display : inline-flex; align-items : center; justify-content : center;}
.lookup_detail_list .img_wrap img{display : block; width : 100%; height : 100%; object-fit :contain; }
.lookup_detail_list .lookup_info_wrap {flex : 1; overflow : hidden;}
.lookup_detail_list .lookup_info_wrap .product_company{font-size: 12px; line-height: 120%; margin-bottom : 2px; color : var(--fontLight); display : block;}
.lookup_detail_list .lookup_info_wrap .product_name{font-size : 16px; font-weight : 700; line-height : 140%; margin-bottom : 4px; white-space : nowrap; letter-spacing : var(--fontMin);}
.lookup_detail_list .lookup_info_wrap .cost_wrap{display : flex; align-items : center; justify-content : flex-end;}
.lookup_detail_list .lookup_info_wrap .product_condition{font-size : 12px; font-weight : 600; line-height : 150%; letter-spacing : var(--fontNor);}

.product_condition.onSale{color : var(--fontActive);}

.lookup_detail_list .lookup_info_wrap .product_cost{font-size : 14px; font-weight : 400; line-height : 120%;}
.lookup_detail_list .lookup_info_wrap .won{font-weight : 500; display : inline-flex; margin-left : 2px; color : var(--fontLight);}

.date_off .date_print{display : none;}

.ejected .tab_bk_controller{display : none;}
.ejected .tab_box{margin-top : 0;}
.ejected .tab_inner_controller{justify-content : flex-end;}
.ejected .lookup_info_wrap .cost_wrap{justify-content : flex-end;}

.onSale .product_condition{color : var(--fontActive);}
.offSale .product_condition{color : var(--colorError);}
.ejected .product_condition{display : none;}

.product_img_wrap{width : 100%; max-height : 250px; margin : 0 0 28px;}
.product_img_wrap .swiper-slide{width : 250px; height : 250px; border-radius : 12px; overflow : hidden; display : flex; align-items : center; justify-content : center; margin : 0 auto;}
.product_img_wrap .swiper-slide img{display : block; width : 100%;}
.product_img_wrap.img_none{display : none;}

.product_detail .product_info_wrap {display : flex; gap : 0 17px; margin-bottom : 32px;}
.product_detail .product_info_wrap .img_wrap{flex : 0 0 100px; height : 100px; display : inline-flex; align-items : center; justify-content : center; border-radius : 12px; overflow : hidden;}
.product_detail .product_info_wrap .img_wrap img{display : block; width : 100%;}
.product_detail .product_info_wrap .info_top{display : flex; align-items : center; justify-content : flex-start; gap : 4px;}
.product_detail .product_info_wrap .info_top .product_company{font-size : 14px; font-weight : 400; line-height : 120%; color : var(--fontMiddle); margin-right : 4px;}
.product_detail .product_info_wrap .approve_badge{display : inline-flex; align-items : center; justify-content : center; width : 33px; height : 23px; padding : 2px 6px; font-size : 12px; font-weight : 700; line-height : 100%; border-radius : 50px; white-space : nowrap;}
.product_detail .product_info_wrap .sale_badge{display : inline-flex; align-items : center; justify-content : center; width : 43px; height : 23px; padding : 2px 6px; font-size : 12px; font-weight : 600; line-height : 100%; border-radius : 50px; white-space : nowrap;}
.product_detail .product_info_wrap .product_name{font-size : 18px; font-weight : 700; line-height : 140%; letter-spacing : var(--fontMin); margin-top : 8px;}

.approve_badge.approve{background : #E9F1FF; color : var(--fontActive);}
.approve_badge.reject{background : #FFE9EA; color : var(--colorError);}

.sale_badge.saleOff{border : 1px solid var(--colorError); color : var(--colorError);}
.sale_badge.sale{border : 1px solid var(--fontActive); color : var(--fontActive);}

.infoList .infoItem.inner_box {display : block;}
.infoList .infoItem.inner_box .top_wrap{display : flex; align-items : center; justify-content : space-between;}
.infoList .infoItem.inner_box .info_more_box{height : 0; overflow : hidden;}
.infoList .infoItem.active .info_more_box{padding : 10px 0 0; height : auto;}
.infoList .infoItem.inner_box .info_more_box .inner_txt{font-size : 14px; font-weight : 500; line-height : 120%;}

.infoList .infoItem .infoContent.letter_light{font-weight : 500;}
.infoList .infoItem .dropdown_arrow{display : inline-flex; align-items : center; width : 16px; height : 16px; justify-content : center;}
.infoList .infoItem .dropdown_arrow::before{content : url(/images/arrow_down_light.svg);display : inline-flex; width : 100%; height : 100%;}
.infoList .infoItem.active .dropdown_arrow::before{transform : rotate(180deg);}

.product_detail .reject_info_wrap{margin-bottom : 28px;}
.product_detail .reject_info_wrap .reject_tit{font-size : 12px; font-weight : 600; line-height : 120%; color : var(--fontLight); margin-bottom : 12px;}
.product_detail .reject_info_wrap .reject_txt{font-size : 14px; font-weight : 400; line-height : 170%; word-break : keep-all;}

.sales{padding : 8px 24px 24px; }
.sales .dateInputWrap .dateWeeklyInput{background-position-x: calc(100% - 8px);}

.listUp_type_choice{padding : 4px 5px; border-radius : 12px; background : var(--colorGrayScale); margin-bottom : 12px; display : flex; align-items : center; justify-content : space-between;}
.listUp_type_choice .tab_picker{font-size : 14px; font-weight : 400; line-height : 120%; color : #BBB; flex : 1 0 50%; display : inline-flex; align-items : center; justify-content : center; height : 40px; background : var(--colorGrayScale); border-radius : 8px;}
.listUp_type_choice .tab_picker.active{color : var(--fontMain); background : #fff; box-shadow : 0px 0px 1px rgba(113, 128, 150, 0.04), 0px 4px 8px rgba(113, 128, 150, 0.08);}

.inner_tab_box{display : none; margin-top : 40px; padding-bottom : 142px;}
.inner_tab_box.active{display : block;}
.inner_tab_box .sales_list .list_public:not(:last-child){margin-bottom : 40px;}
.inner_tab_box .sales_list .list_clickable{display : flex; align-items : center; justify-content : flex-start; gap : 0 16px;}
.inner_tab_box .sales_list .ico_wrap{display : inline-flex; align-items : center; justify-content : center; flex : 0 0 40px; height : 40px;}
.inner_tab_box .sales_list .ico_wrap::before{display : inline-block; width : 100%; height : 100%;}
.inner_tab_box .sales_list .info_wrap{flex : 1;}
.inner_tab_box .sales_list .top_wrap{display : flex; align-items : center; justify-content : space-between; width : 100%; font-size : 16px; font-weight : 600; line-height : 120%; letter-spacing : var(--fontMin); margin-bottom : 3px;}
.inner_tab_box .product_cost .won{letter-spacing: var(--fontNor);}
.inner_tab_box .sales_list .bot_wrap{display : flex; align-items : center; justify-content : space-between; width : 100%; font-size : 14px; font-weight : 400; line-height : 120%; color : var(--fontLight);}

.inner_tab_box .type_voucher .ico_wrap::before{content : url(/images/ico_voucher_blue.svg);}
.inner_tab_box .type_moneycard .ico_wrap::before{content : url(/images/ico_moneycard_skyblue.svg);}

.inner_tab_box .sales_cancel .product_cost::before{content : "- ";}
.inner_tab_box .sales_cancel .sales_type::before{content : "결제취소";}

.inner_tab_box .sales_success .sales_type::before{content : "결제완료";}
.inner_tab_box .sales_success .product_cost{color : var(--fontActive);}
.inner_tab_box .sales_success .product_cost::before{content : "+ ";}

.week_box .sales_list{margin-top : 24px; display : none;}
.week_box .active .sales_list{display : block;}

.date_btn_wrap{display : flex; align-items : center; justify-content : space-between;}
.date_box_wrap:not(:last-child){margin-bottom : 40px;}
.date_btn_wrap .date_print{padding : 0;}
.date_btn_wrap .dropdown_arrow{display : inline-flex; align-items : center; width : 22px; height : 22px; justify-content : center;}
.date_box_wrap .dropdown_arrow::before{content : url(/images/ico_arrow_dropdown_light_thin.svg);display : inline-flex; width : 100%; height : 100%;}
.date_box_wrap.active .dropdown_arrow::before{transform : rotate(180deg);}

.border{display : block; width : 100%; height : 1px; background : var(--colorGrayScale); margin : 11px 0;}

.dealHistoryDetail .contentTop.complete{border-bottom : none;}

.voucher_detail .infoList .infoItem{margin-bottom : 12px;}
.voucher_detail .infoList .infoItem .infoContent{font-weight : 500;}
.voucher_detail.dealHistoryDetail .contentBottom .responsibiliyList .infoList{margin-top : 33px;}

.Qr .infoList .infoItem .infoTitle{flex-shrink : 0;}
.Qr .infoList .infoItem .infoContent{font-weight : 500;}

.Qr_input .infoList .infoItem{margin-bottom : 8px;}

.inherit_btn{font-family : inherit;}
.cancel_input{padding : 9px 24px 16px;}

.cancel_input .cont_tit_wrap{display : flex; align-items : center; justify-content : space-between; gap : 0 9px;  white-space : nowrap;}
.cancel_input .cont_tit{font-size : 17px; font-weight : 700; line-height : 120%; letter-spacing : var(--fontMin);}
.cancel_input .cont_tit_wrap .btn_selAll{font-size : 14px; font-weight : 600; line-height : 120%; color : var(--fontMiddle); display : inline-flex; align-items : center; justify-content : center; width : 72px; height : 36px; padding : 12px; border-radius : 8px; background : var(--colorGrayScale);}
.cancel_input .list_whole_wrap{margin-top : 17px;}
.cancel_input .cost_list .list_public:not(:last-child){margin-bottom : 8px;}
.cancel_input .cost_list .check_label{flex : 1 0 100%; justify-content : space-between; gap : 0 16px; border-radius : 16px; padding : 20px 16px 20px 24px; border : 1px solid var(--colorGrayScale);}
.cancel_input .txt_wrap{flex : 1; margin-bottom : 0;}
.cancel_input .cost_list .top_wrap{display : flex; align-items : center; justify-content : flex-start; font-size : 16px; font-weight : 700; line-height : 120%; letter-spacing : var(--fontMin); margin-bottom : 4px;}
.cancel_input .cost_list .bot_wrap{display : flex; align-items : baseline; justify-content : flex-start; font-size : 14px; font-weight : 400; line-height : 120%; color : var(--fontLight); gap : 0 12px;}

.blueCir input[type=checkbox]~.check_label::before{content : unset !important;}
.blueCir input[type=checkbox]~.check_label::after{content : ""; width : 24px; height : 24px; flex-shrink : 0; display : inline-flex; background : url(/images/ico_checkbox_blueCir_off.svg) no-repeat center center / auto;}
.blueCir input[type=checkbox]:checked~.check_label:after{background : url(/images/ico_checkbox_blueCir_on.svg) no-repeat center center / auto;}
.blueCir input[type=checkbox]:checked~.check_label{background : #E9F1FF; border : 1px solid #E9F1FF;}

.infoList .infoItem .infoContent.price.error{border-style : none !important;}

.calculate_voucher{padding : 12px 14px calc(40px + var(--safeAreaInsetBottom));}
.calculate_voucher .dataAdjust{margin-bottom : 14px;}
.calculate_voucher .filterWrap{padding : 0 10px;}
.calculate_voucher .sumMoneyWrap{margin : 0 10px 8px; min-height : 86px;}
.calculate_voucher .detailWrap .detailList{padding : 0 22px;}
.calculate_voucher .detailWrap .detailItem .itemRow:nth-child(3){margin-bottom : 10px;}
.calculate_voucher .detailWrap .detailItem .itemRow:nth-child(3) .itemLabel{display : inline-flex; align-items : center; gap : 0 4px;}
.calculate_voucher .detailWrap .detailItem{padding : 30px 0px 12px;}
.calculate_voucher .subLabel{display : inline-flex; align-items : center; justify-content : flex-start; gap : 4px;}
.calculate_voucher .subLabel.txt_custom{font-weight: 600;}
.detailItem .subItem .subRow.title .count_issue{color :var(--fontMain);}
.calculate_voucher .btn_info {width: 16px; height: 16px; background: url(/images/ic-tooltipBtn.png) no-repeat center/ contain; background-size: 100%;}

.calculate_voucher .detailItem .fees_divide{padding: 16px 0; border-bottom: 1px solid #F1F5F9; border-top: 1px solid #F1F5F9;}
.calculate_voucher .detailItem .fees_divide .subRow{align-items : flex-start; gap : 0 79px;}
.calculate_voucher .detailItem .fees_divide .subRow_divide{flex : 1 0 auto;}
.calculate_voucher .detailItem .fees_divide .fees_public{display : flex; align-items :flex-start; justify-content : space-between;}
.calculate_voucher .detailItem .fees_divide .fees_public:not(:last-child){margin-bottom : 16px;}
.calculate_voucher .detailItem .subItem:nth-child(3), .calculate_voucher .detailItem .subItem:nth-child(5){border-bottom : none; padding : 0;}
.calculate_voucher .detailItem .fees_divide{}

.sub_hide{width : 1px; height : 1px; opacity : 0; visibility: hidden; overflow : hidden;}

.bottomSheet .bottomSheetContainer .bottomSheetContent.Qr_sheet{padding : 0;}
.Qr_sheet .btn_onlyTxt{padding : 0 24px; width : 100%; justify-content : flex-start; height : 50px; border-radius : 0; line-height : 120%; color : var(--fontMain);}
.Qr_sheet .btn_onlyTxt:active{background : rgba(16, 25, 45, 0.08);}

.innerNavigator{position : fixed; z-index : 2001; bottom : 0; left : 0; width : 100%; height : 54px; background  : #fff; padding : 6px 28px;}
.innerNavigator .nav_list{display : flex; align-items : stretch; justify-content : space-between;}
.innerNavigator .nav_list .list_clickable{display : flex; align-items : center; justify-content : center; flex-direction : column; gap : 2px; font-size : 10px; font-weight : 400; line-height : 16px; color : var(--fontMiddle); padding : 0 4px;}
.innerNavigator .nav_list .ico_wrap{width : 24px; height : 24px; display : flex; align-items : center; justify-content : center;}
.innerNavigator .nav_list .ico_wrap::before{display : block; width : 100%; height : 100%;}

.innerNavigator .nav_list .home::before{content : url(/images/ico_nav_home.svg);}
.innerNavigator .list_public.active .home::before{content : url(/images/ico_nav_home_act.svg);}

.innerNavigator .nav_list .log::before{content : url(/images/ico_nav_log.svg);}
.innerNavigator .list_public.active .log::before{content : url(/images/ico_nav_log_act.svg);}

.innerNavigator .nav_list .qr_shot::before{content : url(/images/ico_nav_qr.svg);}
.innerNavigator .list_public.active .qr_shot::before{content : url(/images/ico_nav_qr_act.svg);}

.innerNavigator .nav_list .cal::before{content : url(/images/ico_nav_cal.svg);}
.innerNavigator .list_public.active .cal::before{content : url(/images/ico_nav_cal_act.svg);}

.innerNavigator .nav_list .more::before{content : url(/images/ico_nav_more.svg);}
.innerNavigator .list_public.active .more::before{content : url(/images/ico_nav_more_act.svg);}

.innerNavigator .list_public.active .list_clickable{color : var(--fontActive); font-weight : 700;}

.nav_add::after{content : ""; display : block; width : 100%; height : 54px; }

.myinfo_more{display : flex; flex-direction : column;}
.myinfo_more .moreList{flex : 1;}
.myinfo_more .link-list-wrap .link-list li:not(:last-child){margin-bottom : 4px;}
.myinfo_more .link-list-wrap{margin-bottom : 24px;}
.myinfo_more .moreList .buttonRow .logOut{width : 100%; padding : 4px 0; margin-top : 32px;}

.inner_header{padding : 16px 24px;}
.inner_header .inner_title{font-size: 24px; font-weight: 800; line-height: 29px; letter-spacing : var(--fontMin);}

.contract .tabPannel.tab_solo{padding : 0 24px;}
.contract .tab_solo .secondList .secondItem .itemWrap{padding-bottom : 16px;}

.alerm_voucher .alarm-list li .subject .s1{line-height : 120%;}
.alerm_voucher .alarm-list li .date{line-height : 120%;}

.alerm_voucher .alarm-list .emptyNotice{margin-top : 143px;}

.contract .tabPannel .secondList .secondItem .itemWrap{}

.wrap.terms.ptNone,
.wrap.ptNone{
	padding-top:0;
}

.wrap.terms{min-height : 100vh;}

.term .contentTop{
	margin-bottom:40px;
}

.term .contentTop .termsTitle{
	font-weight: 800;
	font-size: 24px;
	line-height: 120%;
	letter-spacing: -0.6px;
	color: #10192D;
	margin-bottom:8px;
}

.term .contentTop .date {
	font-weight: 400;
	font-size: 16px;
	line-height: 120%;
	letter-spacing: -0.3px;
	color: #8E9BAE;
}


.term .contentBody .termSummary {
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	letter-spacing: -0.3px;
	color: #10192D;
	margin-bottom:32px;
}

.term .contentBody .termItems {
	margin-bottom:32px;
}

.terms .contentBody .termItems:last-child{
	margin-bottom:0;
}

.term .contentBody .termItems .itemHeader {
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
	letter-spacing: -0.3px;
	color: #333D4B;
	margin-bottom:16px;
}

.term .contentBody .termItems .itemHeader .numbering {
	color:#2873FF;
	margin-right:8px;
}

.term .contentBody .termItems .itemContent{
	padding: 16px;
	background: #F1F5F9;
	border-radius: 10px;
}

.term .contentBody .termItems .itemContent .itemText{
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	letter-spacing: -0.3px;
	color: #10192D;
}

.term .contentBody .termItems .itemContent .itemText .subTitle{
	display:inline-block;
	margin-bottom:8px;
}

.tableWrap .termTable {
    text-align: center;
    font-size: 14px;
}

.tableWrap {
    margin-top: 24px;
}

.tableWrap .termTable th {
    border: 1px solid rgba(210, 213, 219, 0.94);
    background: rgba(210, 213, 219, 0.94);
    padding: 2px 6px;
    vertical-align: middle;
}

.tableWrap .termTable td {
    vertical-align: middle;
    padding: 2px 6px;
    border: 1px solid rgba(210, 213, 219, 0.94);
}

.term .buttonWrap .btn {
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.3px;
    color: #FFFFFF;
}

.termItems .sectionTitle {
    font-weight: 800;
    font-size: 19px;
}
/*정산내역 - 총 정산금액 강제 한줄 정렬*/
.sumMoneyWrap .infoRight .money{white-space : nowrap; font-size : 28px;}

/*결제 실패 - 텍스트 길이가 한 줄 이상일 시*/
.Qr .infoList .infoItem {gap : 0 40px;}
.Qr .infoList .infoItem .infoContent{word-break : keep-all;}

.modal .infobox{display : flex; align-items : center; justify-content : center; width : 161px; box-sizing : border-box; margin : 0 auto;}

.terms header{justify-content : flex-start; padding : 16px 24px;}
.terms .btn-close{width : 24px; height : 24px; display : block; background : url(/images/ic-close-x.svg) no-repeat center center / contain; text-indent : -8888px;}

.terms #terms-frame{height : calc(100vh - 56px - 93px);}

/* 메인 홈  */
/*20230207 추가 > 원 안에 이미지 맞추기*/
.header .logo {
    border-radius : 50%;
    overflow : hidden;
}