@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css);
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");

:root {
    --color-brand : #0064FF;
    --color-boarder-basic : #D9D9D9;
    --color-balck-1 : #000;
    --color-white : #FFFFFF;
    --color-bg-gray-1 : #F7F7F7;
    --color-gray-2 :  #333;
    --color-gray-3 : #6F6F6F;
    --color-gray-4 : #999;
    --color-gray-5 : #E5E5E5;

    --color-neutral-01 : #FFFFFF;
    --color-neutral-04 : #F0F0F0;
    --color-neutral-07 : #8C8C8C;
    --color-neutral-08 : #595959;
    --color-neutral-09 : #434343;
    --color-neutral-11 : #1F1F1F;
    --color-neutral-13 : #000000;

    --color-red-30 : #8C1D18;
    --color-red-40 : #B3261E;
    --color-red-90 : #F9DEDC;
    --color-red-99: #FFFBF9;

    --color-primary : #6750A4;
    --color-primary-20 : #381E72;
    --color-primary-40 : #6750A4;

    --color-gray-1 : #A5A5A5;
    --color-gray-2 : #888888;
    --color-gray-3 : #6F6F6F;
    --color-light-gray-1 : #DFDFDF;
    --color-light-gray-2 : #C1C1C1;
    --color-dark-gray-1 : #3D3D3D;
    --color-dark-gray-2 : #242424;
    --color-blue : #449AFE;

    --sys-light-on-surface : #1C1B1F;
    --sys-light-primary : #6750A4;
    --sys-light-theme-primary : #0095F6;
    --sys-light-text-muted : rgba(0, 0, 0, 0.45);
    --sys-light-outline : #79747E;
    --sys-light-on-surface-variant : #49454F;
    --sys-light-background-bg-input : #FAFAFA;
    --sys-light-background-bg-input-border-default : #DBDBDB;
    --sys-light-background-bg-divider : #EDEDED;
    --sys-light-blue-background : #ECF4FE;

    --always-white-alpha-white-alpha-85 : rgba(255, 255, 255, 0.85);

    --color-star : #F2A207;

    --basic-margin : 8px;
    --basic-margin-2x : 16px;
    --basic-margin-3x : 24px;

}
* {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    height: -webkit-fill-available;
}
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: -webkit-fill-available;
    margin: 0 auto;
    max-width: 720px;

}

#loader { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 99999; background: var(--color-brand);
    display: flex; align-items: center; justify-content: center; }
#loader .loading-icon { width: 150px; height: auto;}

@keyframes loadingAnimation { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }


#nav-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
#nav-title span { font-size: 24px; color: white;}
#nav-title div.nav-title-logo { width: 118px; height: 24px; display: block; text-indent: -1000px; background: url(/skin/image/logo/bg_logos.svg) no-repeat -109px -16px; overflow: hidden; }
#aside-header-title div.nav-title-logo { width: 118px; height: 24px; display: block; text-indent: -1000px; background: url(/skin/image/logo/bg_logos.svg) no-repeat -109px -16px; overflow: hidden; }
#nav-left {position: absolute; left: 15px; top: 15px; max-width: 30px;}
#nav-back {position: absolute; left: 15px; top: 15px; max-width: 30px;}
#nav-right { position: absolute; right: 15px; top: 15px; max-width: 120px; }
#nav-right ul, #nav-right li { list-style: none; float: left;}
#nav-right li { width: 24px; margin-left: 16px;}
#nav-right .nav-right-item { width: 24px; height: 24px; display: inline-block; text-align: center; font-size: 20px;}
#nav-left .btn-aside { width: 24px; height: 24px; color: #fff;}

#frmSign > div.form-group.mb-3 {background-color: var(--info);}
main {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    flex-shrink: 0;
    height: auto;
    background-color: var(--color-bg-gray-1);
    padding-bottom: 40px;
}

main .wUI-topbar {
    background-color: var(--color-bg-gray-1) !important;
}

main section {
    height: auto;
}

main section.container {
    padding: 12px 16px !important;
}

a{
    text-decoration: none;
}

/*footer style*/
footer {
    background-color: #fff;
    z-index: 999;
    padding-top: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

/*hr style*/
.bg-dot-wz { background-image: url('/skin/image/bg/bg_dot_wz.svg'); background-repeat: repeat-x; width: 100%; height: 4px; display: block; border: none !important; padding: 0px; margin-bottom: 1rem; margin-top: 0;}
.bg-dot-white { background-image: url('/skin/image/bg/bg_dot_white.svg'); background-repeat: repeat-x; width: 100%; height: 4px; display: block; border: none !important; padding: 0px; margin-bottom: 1rem; margin-top: 0;}

aside { height: 100%; position: fixed; left: 0; right: 0; transform: translateX(-100%); transition:transform 250ms ease-in-out; background-color: #fff; z-index: 2000; }
#aside-menu.on { transform: translateX(0); }
#aside-header { background-color: var(--info); width: 100%; height: 56px; position: absolute; left: 0; right: 0; top: 0;  }
#aside-header-title { position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); height: 24px;}
#aside-header-right { position: absolute; right: 15px; top: 15px;}
#aside-header-right a { width: 24px; height: 24px; display: block; }
#aside-body { position: absolute; left: 0; top: 56px; right: 0; bottom: 0; overflow-y: scroll;}


/*icons*/

/*background color*/
.bg-info-light { background-color: var(--info-light);}
.bg-basic { background-color: #30B5BC !important;}
.bg-brand { background: var(--color-brand);}

/*text color*/
.text-wz { color: #30B5BC !important;}
.badge-wz { background-color: var(--info); color: white;}
.border-wz { border-color: var(--info);}
.bg-white { background-color: var(--color-white) !important;}
.bg-wz { background-color: var(--info);}
.btn-wz-norad{ background-color: var(--info); color: white;}
.btn-wz{ background-color: var(--info); color: white; border-radius: 25px;}
.wz-rounded{ border-radius: 25px !important;}

.modal-title {color: white;}
.modal-header { background-color: var(--info);}
/* .btn-close {filter: invert(100%); vertical-align: middle; } */
.btn-point-time:hover {background-color: var(--info); color: white; border-color: transparent;}
.btn-point-add:hover {background-color: var(--info); color: white; border-color: transparent;}
.wz-list li::marker{color: var(--info) !important;}
.text-gray{color: #d3d3d3;}
.text-content {line-height: 20px; font-size: 14px; color: #333; background-color: #f2f2f2;}
.fix-footer {position: fixed; bottom: 0; left:0; width: 100%; padding: 15px 8px;}

.fas[data-count]{
    position:relative;
}

.fas[data-count]:after{
    position: absolute;
    right: -0.75em;
    top: -.75em;
    content: attr(data-count);
    padding: .5em;
    border-radius: 10em;
    line-height: .9em;
    color: white;
    background: rgba(255,0,0,.75);
    text-align: center;
    min-width: 2em;
    font: bold .4em sans-serif;
}

/* footer tabbar */
#main-tabbar { display: flex;
    width: 100%;
    height: 84px;
    max-width: 720px;
    padding-top: 16px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    border-radius: 8px 8px 0px 0px;
    background: var(--color-white);
    box-shadow: 0px -4px 10px 1px rgba(0, 0, 0, 0.07);
}

#footer-inner {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0px 16px 0 16px;
    align-items: center;
    gap: 0;
}
#footer-inner .nav-item {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--color-neutral-11, #292E35);
    cursor: pointer;
    opacity: 0.5;
}
#footer-inner .nav-item span {
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}

#footer-inner .nav-item.active { opacity: 1;}
#footer-inner .nav-item.active span { color: var(--color-brand);}

.goHome { cursor: pointer; }

/* wUI style */
.bg-wui-black { background-color: var(--color-neutral-13);}

/* wUI component */
.wUI-icon-item { display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
}

/* wUI tabbar */
.wUI-tabbar {
    display: flex;
    width: 100%;
    align-items: flex-start;
    background-color: var(--color-white);
}
.wUI-tabbar .wrap-body {
    display: flex;
    height: 56px;
    padding: 8px 16px;
    align-items: center;
    gap: 6px;
    flex: 1 0 0;
    align-self: stretch;
}
.wUI-tabbar .wrap-title {
    display: flex;
    height: 32px;
    padding: 0px 8px;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    margin: 0;
}
.wUI-tabbar .title-item {
    display: flex;
    max-width: 91px;
    height: 32px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
}
.wUI-tabbar .title-item span {
    color: var(--color-neutral-07);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 24px */
    letter-spacing: -0.2px;
}
.wUI-tabbar .title-item.active {
    border-bottom: 2px solid var(--color-neutral-13, #000);
}
.wUI-tabbar .title-item.active span {
    color: var(--color-neutral-13, #000);
}
.wUI-tabbar .wrap-icons {
    display: flex;
    padding-right: 0px;
    align-items: flex-start;
    gap: 16px;
}
.wUI-tabbar .wrap-icons .icon-item {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
}
.wUI-tabbar .wrap-icons .icon-item i {
    color: var(--color-neutral-09, #434343);
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 24px;
}

.wUI-tabbar-content {
    display: flex;
    padding: 0;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}



/* wUI component line style */
.wUI-line {
    display: flex;
    width: 100%;
    height: 6px;
    justify-content: center;
    align-items: center;
    background: var(--color-neutral-04);
}


/* wUI component btn style */
.wUI-btn-block {
    display: flex;
    height: 56px;
    padding: 0px 16px;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 8px;
}
.wUI-btn-block .wrap-body {
    display: flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 8px;
    background: var(--color-dark-gray-1, #3D3D3D);
}
.wUI-btn-block .wrap-body span {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px; /* 137.5% */
    letter-spacing: -0.096px;
}

.wUI-btn-block.wUI-btn-disable .wrap-body {
    background: var(--color-light-gray-1, #DFDFDF) !important;
}
.wUI-btn-block.wUI-btn-disable span {
    color: var(--color-light-gray-2, #C1C1C1);
}

.wUI-btn-block:hover .wrap-body {
    background-color: var(--color-brand) !important;
}
.wUI-btn-block.btn-member-out:hover .wrap-body {
    background-color: var(--color-red-30) !important;
}

.wUI-btn-round-md {
    display: flex;
    padding: 0px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    border: 1px solid var(--color-boarder-basic);
}
.wUI-btn-round-md span {
    color: var(--color-neutral-09);
    /* main/KR/txt-12 */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    letter-spacing: -0.12px;
}

.wUI-card-store {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    border: 1px solid var(--color-boarder-basic);
    background: var(--color-neutral-01);
    overflow: hidden;
}
.wUI-card-store .img {
    position: relative;
    display: block;
    height: 115px;
    align-self: stretch;
    width: 100%;
    background-position: center;
    background-size: cover;
}
.wUI-card-store .wrap-body {
    display: flex;
    padding: 0px 16px 16px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
}
.wUI-card-store .wrap-body .wrap-title {
    display: flex;
    align-items: center;
    align-self: stretch;
    flex-direction: row;
    justify-content: space-between;
}
.wUI-card-store .wrap-body .wrap-title h4 {
    color: var(--color-neutral-11, #1F1F1F);
    /* H5/black */
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 133.333% */
    letter-spacing: -0.18px;
    margin: 0;
}
.wUI-card-store .wrap-body .wrap-title-icon {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.wUI-card-store .wrap-body .wrap-title-icon i {
    color: var(--color-neutral-09);
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 24px; /* 120% */
    letter-spacing: -0.2px;
}
.wUI-card-store .wrap-body .wrap-area {
    display: flex;
    color: var(--color-neutral-08);
    /* H6/title-kr */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.14px;
    height: 20px;
}
.wUI-card-store .wrap-body .wrap-subtitle {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-direction: row;
    color: var(--color-neutral-08);
    /* main/txt-number-12 */
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.24px;
}
.wUI-card-store .wrap-body .wrap-star {
    display: flex;
    align-items: center;
    gap: 4px;
}
.wUI-card-store .wrap-body .wrap-star i {
    color: #F2A207;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.wUI-btn-text {
    display: flex;
    height: 24px;
    justify-content: center;
    align-items: center;
}

/* popup topbar */
.wUI-topbar-popup {
    display: flex;
    margin-bottom: 0px;
    padding-bottom: 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    align-self: stretch;
    background-color: var(--color-white);
}
.wUI-topbar-popup .wrap-topbar {
    display: flex;
    padding: 12px;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}
.wUI-topbar-popup .wrap-topbar .topbar-leading-icon {
    display: flex;
    width: auto;
    height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6px;
}
.wUI-topbar-popup .wrap-topbar .topbar-trailing-icon {
    display: flex;
    width: auto;
    height: auto;
    justify-content: flex-end;
    align-items: center;
}
.wUI-topbar-popup .wrap-topbar .topbar-trailing-icon a i {
    color: var(--color-neutral-13);
    /* icon/font awsome */
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 120% */
    letter-spacing: -0.2px;
}
.wUI-topbar-popup .head-line {
    display: flex;
    padding: 16px 24px;
    align-items: center;
    align-self: stretch;
}
.wUI-topbar-popup .head-line span {
    color: var(--color-dark-gray-2, #242424);
    /* Display */
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px; /* 141.667% */
    letter-spacing: -0.144px;
}

/* main topbar */
.wUI-topbar {
    display: flex;
    padding-bottom: 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    background-color: var(--color-white);
}
.wUI-topbar .wrap-topbar-main {
    display: flex;
    padding: 4px 12px;
    align-items: center;
    gap: 6px;
    align-self: stretch;
}
.wUI-topbar .wrap-topbar-main .topbar-trailing-icon {
    display: flex;
    width: auto;
    height: 48px;
    justify-content: flex-end;
    align-items: center;
}
.wUI-topbar .wrap-topbar-main .topbar-trailing-icon span {
    width: 24px;
    height: 24px;
    text-align: center;
}
.wUI-topbar .wrap-topbar-main .topbar-trailing-icon span i {
    font-size: 24px;
    line-height: 24px;
}
.wUI-topbar .wrap-topbar-main .head-line {
    display: flex;
    padding: 0px 8px 0px 12px;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
}
.wUI-topbar .wrap-topbar-main .head-line span {
    color: var(--color-balck-1, #000);
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 136.364% */
    letter-spacing: -0.132px;
}
.wUI-topbar .wrap-topbar-basic {
    display: flex;
    padding: 8px 12px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
}
.wUI-topbar .wrap-topbar-basic .topbar-leading-icon {
    display: flex;
    width: 48px;
    height: 48px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.wUI-topbar .wrap-topbar-basic .topbar-trailing-icon {
    display: flex;
    width: auto;
    min-width: 48px;
    height: 48px;
    justify-content: flex-end;
    align-items: center;
}
.wUI-topbar .wrap-topbar-basic .head-line {
    flex: 1 0 0;
    color: var(--sys-light-on-surface);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 150% */
    letter-spacing: -0.12px;
}

.topbar-trailing-icon {
    gap: 10px;
}
.topbar-trailing-icon img {
    display: flex;
    width: 24px;
    height: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.topbar-trailing-icon a {
    padding: 12px;
}

/*topbar*/
nav.header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 6px 6px;
    height: 56px;
}
nav.header-big {
    flex-direction: column;
    height: auto;
    justify-content: start;
    gap: 12px;
    margin-bottom: 16px;
}
nav.header-big .nav-title {
    padding-left: 12px;
    width: 100%;
    display: flex;
    font-size: 28px;
    font-weight: 600;
}
nav.header-big .nav-sub-title {
    padding-left: 12px;
    width: 100%;
    display: flex;
    font-size: 18px;
    font-weight: 400;
}
nav.header .nav-btn {
    padding: 6px;
}
nav.header .nav-btn img {
    width: 24px;
}

.nav-icon {
    display: flex;
    width: 24px;
    height: 24px;
    background: url(/skin/image/svg/icon_right.svg) no-repeat center;
}

/* switch */
.switch {
    width: 3.25em;
    height: 1.75em;
    appearance: none;
    position: relative;
    border-radius: 1.25em;
    background-color: var(--color-gray-4);
}
.switch::before {
    content: "";
    position: absolute;
    left: 0;
    width: 1.7em;
    height: 1.7em;
    border-radius: 50%;
    transform: scale(0.8);
    background-color: var(--color-white);
    transition: left 250ms linear;
}
.switch:checked {
    background: var(--sys-light-primary);
}
.switch:checked::before {
    background-color: var(--color-white);
    left: 1.5em;
}

/* offcanvas */
.offcanvas {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 34px;
}
.offcanvas .sheet-header {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}
.offcanvas .sheet-header .drag-handle {
    width: 32px;
    height: 4px;
    border-radius: 100px;
    opacity: 0.4000000059604645;
    background: var(--sys-light-outline);
}
.offcanvas .hr-line {
    height: 8px;
    align-self: stretch;
    background: var(--color-bg-gray-1);
}
.offcanvas .sheet-body {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}
.offcanvas .sheet-body h4 {
    color: var(--color-dark-gray-2, #242424);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px; /* 137.5% */
    letter-spacing: -0.096px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    padding: 0;
    margin: 0;
}
.offcanvas .sheet-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.offcanvas .sheet-body ul li {
    width: 100%;
    height: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}
.offcanvas .sheet-footer {
    padding: 8px 0px;
    display: flex;
    gap: 8px;
    flex-direction: column;
    height: auto;
    margin-top: auto;
}

/* point-card */
.point-card {
    display: flex;
    width: 100%;
    padding: 8px 0px;
    align-items: flex-start;
}
.point-card .wrap-label-date {
    display: flex;
    width: 54px;
    padding: 2px 8px 0px 0px;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
}
.point-card .wrap-label-date span {
    color: var(--color-neutral-13);
    /* main/KR/txt-14 */
    font-family: Noto Sans KR;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.14px;
}
.point-card .wrap-label-content {
    display: flex;
    padding: 0px 8px;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
}
.point-card .wrap-label-content .wrap-label-title {
    display: flex;
    align-items: flex-start;
}
.point-card .wrap-label-content .wrap-label-title span {
    color: var(--color-neutral-13);
    /* H6/title-kr */
    font-family: Spoqa Han Sans Neo;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    letter-spacing: -0.32px;
}
.point-card .wrap-label-content .wrap-label-subtitle {
    width: 80px;
    height: 20px;
}
.point-card .wrap-label-content .wrap-label-subtitle span {
    color: var(--color-gray-3);
    /* main/KR/txt-12 */
    font-family: Noto Sans KR;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    letter-spacing: -0.12px;
}
.point-card .wrap-label-point {
    display: flex;
    padding-left: 0px;
    flex-direction: column;
    align-items: flex-end;
}
.point-card .wrap-label-point .label-point {
    display: flex;
    align-items: flex-start;
    color: var(--color-balck-1);
    /* H6/title-kr */
    font-family: Spoqa Han Sans Neo;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    letter-spacing: -0.32px;
}
.point-card .wrap-label-point .label-point.red {
    color: var(--color-red-40);
}
.point-card .wrap-label-point .wrap-label-emoji {
    display: flex;
    align-items: flex-start;
}
.point-card .wrap-label-point .wrap-label-emoji i {
    color: var(--color-gray-3);
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px; /* 120% */
    letter-spacing: -0.2px;
}
.point-card .wrap-label-point .wrap-label-type {
    width: 42px;
    height: 20px;
}
.point-card .wrap-label-point .wrap-label-type span {
    color: var(--color-gray-3);
    /* main/KR/txt-12 */
    font-family: Noto Sans KR;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    letter-spacing: -0.12px;
}
.point-card .wrap-label-point .txt-point {
    display: flex;
    align-items: flex-start;
    color: var(--color-red-40);
    /* main/txt-number-14 */
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.24px;
}

.wrap-line {
    display: flex;
    width: 100vw;
    height: 6px;
    justify-content: center;
    align-items: center;
}
.wrap-line .wUI-line {
    width: 100vw;
    height: 6px;
    flex-shrink: 0;
    background: var(--color-neutral-04);
}

input[type=radio] {
    display: none;
}
input.radio-btn + label {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-repeat: no-repeat;
    background-image: url("/skin/image/icon/component/chk_normal.svg");
}
input.radio-btn:checked + label {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-repeat: no-repeat;
    background-image: url("/skin/image/icon/component/chk_selected.svg");
}

input[type=checkbox] {
    display: none;
}
input.icon-checkbox + label {
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    cursor: pointer;
    gap: 12px;
}
input.icon-checkbox + label::before {
    content: "";
    display: flex;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-image: url("/skin/image/icon/component/chk_normal.svg");
}

input.icon-checkbox:checked + label::before {
    background-repeat: no-repeat;
    background-image: url("/skin/image/icon/component/chk_selected.svg");
}

/*checkbox small design*/
input.icon-checkbox.small + label::before {
    content: "";
    background-image: url("/skin/image/icon/component/chk_sm_normal.svg");
}

input.icon-checkbox.small:checked + label::before {
    background-image: url("/skin/image/icon/component/chk_sm_selected.svg");
}

/* drop-down */
#dropdown-content {
    margin-top: 28px;
    position: absolute;
    display : none;
    align-items: center;
    align-self: stretch;
    flex-direction: column;
    width: 30vw;
    min-width: 110px;
    border: 1px solid var(--color-gray-3);
}

#dropdown-content.show {
    display : flex;
}

#dropdown-content a {
    position: relative;
    padding: 5px 10px;
    color: var(--color-neutral-13);
    margin: 0;
    /* H5/black */
    font-family: Spoqa Han Sans Neo;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 133.333% */
    letter-spacing: -0.18px;
    width: 100%;
    background: var(--color-white);
}

#storeSelect {
    display: flex;
    width: 100%;
    height: 50vh;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 24px 24px 0px 0px;
    background: var(--color-white);
  }

  #storeSelect .headline {
    display: flex;
    padding: 0px 16px;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    color: var(--sys-light-on-surface);

    /* H3/Title */
    font-family: Spoqa Han Sans Neo;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 133.333% */
    letter-spacing: -0.24px;
  }

  #storeSelect .service-main {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    align-self: stretch;
    overflow: auto;
  }

  #storeSelect .service-main .service-body {
    display: flex;
    height: 100%;
    padding-top: 16px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
    background: var(--color-bg-gray-1);
  }

  #storeSelect .service-main .service-body .service-body-content {
    display: flex;
    padding: 12px 16px 16px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    background: var(--color-white);
  }

  #storeSelect .service-main .service-body .service-body-content .section-service-list {
    display: flex;
    padding: 12px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
  }

  #storeSelect .service-main .service-body .service-body-content .section-service-list .wrap-service {
    display: flex;
    padding: 16px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    background: var(--color-bg-gray-1);
    flex: 1 0 0;
    color: var(--color-balck-1);

    /* H5/black */
    font-family: Spoqa Han Sans Neo;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 133.333% */
    letter-spacing: -0.18px;
  }

  .wrap_notice_box {
    display: flex;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
    height: auto;
    & h4 {
        color: var(--color-balck-1, #000);
        /* H4/bold */
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px; /* 150% */
        letter-spacing: -0.4px;
    }
    & .txt-14 {
        color: var(--color-gray-2, #333);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
        letter-spacing: -0.14px;
    }
  }

.txt-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 0px;
    margin: 0;
    color:var(--color-neutral-08, #505050);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;

    letter-spacing: -0.35px;
    background-image: url(/skin/image/bg/bg_under_line.svg);
    background-repeat: repeat-x;
    background-position: bottom;
}

.txt-link {
    display: flex;
    width: auto;
    padding: 0 4px;
    height: 20px;
    white-space: nowrap;
    align-items: center;
    color: var(--color-gray-1, #A5A5A5);

    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.072px;
    text-decoration-line: underline;
}

h3 { font-size: 20px; height: 24px; letter-spacing: -5%;}

  /* font style guide */
.f-display {

    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px; /* 141.667% */
    letter-spacing: -0.144px;
}
.f-headline {

    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 150% */
    letter-spacing: -0.12px;
}


.f-body-1 {
    /* Body 1 */

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: -0.096px;
}
.f-body-2 {
    color: var(--color-neutral-13, #000);
    /* Body 2 */

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
    letter-spacing: -0.084px;
}

.f-body-3 {

    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: -0.072px;
}

.f-subhead-1 {
    color: var(--color-gray-3, #6F6F6F);
    /* Subhead 1 */

    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px; /* 137.5% */
    letter-spacing: -0.096px;

}

.f-subhead-2 {

    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.084px;
}

.f-subhead-3 {

    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px; /* 150% */
    letter-spacing: -0.072px;
}

/** color style guide **/
.c-white {
    color: var(--color-white) !important;
}
.c-blue {
    color: var(--color-blue) !important;
}
.c-blue img {
    filter: invert(54%) sepia(70%) saturate(2821%) hue-rotate(193deg) brightness(102%) contrast(99%);
}
.c-red {
    color: var(--color-washnow-red) !important;
    border-color: var(--color-washnow-red);
}
.c-red img {
    filter: invert(43%) sepia(75%) saturate(4415%) hue-rotate(333deg) brightness(97%) contrast(115%);
}
.c-grey1 {
    color: var(--color-gray-1) !important;
}
.c-grey2 {
    color: var(--color-gray-2) !important;
}
.c-grey3 {
    color: var(--color-gray-3) !important;
}
.c-gray-dark1 {
    color: var(--color-dark-gray-1) !important;
}
.c-gray-dark2 {
    color: var(--color-dark-gray-2) !important;
}
.c-gray-dark3 {
    color: var(--color-dark-gray-3) !important;
}
.bg-blue { background-color: var(--color-blue) !important;}
/** color style end **/

/** shadow style **/
.shadow-basic-1 {
    border-radius: 8px;
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.10), 0px 2px 8px 0px rgba(0, 0, 0, 0.10);
}

/** label style **/
.label-basic-1 {
    display: flex;
    padding: 0px 6px;
    align-items: center;
    gap: 2px;
    border-radius: 12px;
    text-align: center;

    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 180% */
    letter-spacing: -0.06px;
    border: 1px solid;
}

.label-basic-2 {
    display: flex;
    padding: 0px 6px;
    align-items: center;
    gap: 2px;
    border-radius: 2px;
    text-align: center;
    background: var(--background-light-blue-background, #ECF4FE);
}

.popup-login-ment {
    background: var(--color-dark-gray-1, #3D3D3D);
    display: flex;
    width: 100%;
    padding: 12px 24px 14px 24px;
    width: 100%;
    position: fixed;
    bottom: 80px;
    z-index: 999;
}
.popup-login-ment a {
    color: var(--color-white);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.popup-barcode {
    display: flex;
    width: 100%;
    height: auto;
    padding: 16px 24px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 20px 20px 0px 0px;
    background: var(--color-blue, #449AFE);

    /* Icon Button */
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.20), 2px 2px 6px 0px rgba(0, 0, 0, 0.10);
    position: fixed;
    bottom: 80px;
    z-index: 999;
}

#main-content:has(+ .popup-login-ment) {
    padding-bottom: 140px;
}

/** form design **/
.form-select-lg {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
}

/** nav add css **/
.nav-btn {
    padding: 12px 12px;
    & img { width: 24px;}
}

.hr-line {
    height: 8px;
    align-self: stretch;
    background: var(--color-bg-gray-1);
}

@media only screen and (max-width: 430px) and (max-height:400px){

}


.form-control { padding: 14px 16px; font-size: 16px;}