@charset "utf-8";





@font-face {
    font-family: 'SUIT';
    font-weight: 400;
    src: url('../font/suit/SUIT-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'SUIT';
    font-weight: 600;
    src: url('../font/suit/SUIT-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'SUIT';
    font-weight: 700;
    src: url('../font/suit/SUIT-Bold.woff2') format('woff2');
}

* {
	letter-spacing: -0.5px;
}
:root{
	--sub-color: #01A5BD;
	--reward-color: #4949B0;

    --main-color: #0ABFAB;
	--gray-color: #6E7178;
	--unable-color: #B4B4B4;
	--black-color: #1A1F2C;
    --white-color: #FFFFFF;
	--border-color: #E7E7E7;
	--btn-border-color: #BDBDBD;
	--background-color: #FFF;
	--caution-color: #e34630;
	--box-bg-color: #F9F9F9;
	--divide-color: #F6F6F6;
	--placeholder: #AEAEBB;
    --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.12);
    --btn-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);

    --design-width: 375;
    --common-radius: calc(100vw * (12 / var(--design-width)));
	--out-radius: calc(100vw * (30 / var(--design-width)));


}

body.on {
    touch-action: none;
    overflow: hidden !important;
    -webkit-user-select: none;
    user-select: none;
}

html.on {
    touch-action: none;
    overflow: hidden !important;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
}

#load {
    display: none;
	z-index:999999999;
}

input[type=search] {
    padding-right: 15px;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    width: calc(100vw * (10/375));
    height: calc(100vw * (10/375));
    background-color: transparent;
    background: url(../image/sub/up_x_btn.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
    cursor: pointer;
}

.loading-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .6);
    z-index: 99999999999;
    display: flex;
    align-items: center;
    justify-content: center
}

.loading-container .loading {
    width: calc(100vw * (100/640));
    height: calc(100vw * (100/640));
    border-radius: 50%;
    border: 2px solid transparent;
    border-color: transparent #fff transparent #FFF;
    -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
    -moz-transform-origin: 50% 50%;
    -o-animation: rotate-loading 1.5s linear 0s infinite normal;
    -o-transform-origin: 50% 50%;
    -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
    -webkit-transform-origin: 50% 50%;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%
}

.loading-container #loading-text {
    -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
    -o-animation: loading-text-opacity 2s linear 0s infinite normal;
    -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
    animation: loading-text-opacity 2s linear 0s infinite normal;
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(100vw * (10/640));
    font-weight: bold;
    opacity: 0;
    text-align: center;
    text-transform: uppercase;
    width: calc(100vw * (100/640))
}

@keyframes rotate-loading {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -moz-transform: rotate(360deg)
    }
}

@-moz-keyframes rotate-loading {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -moz-transform: rotate(360deg)
    }
}

@-webkit-keyframes rotate-loading {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -moz-transform: rotate(360deg)
    }
}

@-o-keyframes rotate-loading {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -moz-transform: rotate(360deg)
    }
}

@keyframes loading-text-opacity {
    0% {
        opacity: 0
    }

    20% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-moz-keyframes loading-text-opacity {
    0% {
        opacity: 0
    }

    20% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes loading-text-opacity {
    0% {
        opacity: 0
    }

    20% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-o-keyframes loading-text-opacity {
    0% {
        opacity: 0
    }

    20% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

/* header */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.header_inner {
    align-items: stretch;
    justify-content: space-between;
    background-color: var(--black-color);
    height: calc(100vw * (68/375));
    padding: 0 calc(100vw * (12/375)) 0 calc(100vw * (16/375));
    position: relative;
    display: flex;
    align-items: center;
}

.profile_info {
	display:flex;
    align-items: center;
    font-size: calc(100vw * (18/375));
	gap:calc(100vw * (10/375));
    color: var(--white-color);
    font-weight: 600;
}

.profile_info .info_bottom {
	display:flex;
	align-items:center;
	gap:calc(100vw * (6/375));
}
.profile_info .info_bottom .profile_img {
	width: calc(100vw * (20/375));
	height: calc(100vw * (20/375));
}
.profile_info .info_bottom .row2 {
	font-size:calc(100vw * (14/375));
	color:var(--gray-color);
	font-weight:400;
}
.profile_info .info_bottom .profile_img .header_profile{
	margin-right:0;
}

.header_profile {
    width: calc(100vw * (40/375));
    height: calc(100vw * (40/375));
    margin-right: calc(100vw * (25/375));
}

.h_bell {
    margin-left: auto;
    width: calc(100vw * (46/375));
    height: calc(100vw * (46/375));
}


.profile_text .row {
    margin-bottom: calc(100vw * (0/375));
    font-weight: 600;
	gap: calc(100vw * (4/375));
    font-size: calc(100vw * (14/375));
	display:flex;
	flex-direction:column;
	align-items:flex-start;
}

.profile_text .row1 .user_nation {
	font-size:calc(100vw * (12/375));
	color:#a1a7b0;
	font-weight:500;
	text-transform:uppercase;
}

.profile_text .row2 {
    font-weight: 600;
    font-size: calc(100vw * (12/375));
    color: #464646;
	line-height:calc(100vw * (20/375));
}


.ham_btn {
    width: calc(100vw * (46/375));
    height: calc(100vw * (46/375));
}
.ham_btn span{
	display: inline-block;
    width: calc(100vw * (28/375));
    height: calc(100vw * (28/375));
	background: var(--white-color);
    mask: url('../image/common/icon_menu.svg') no-repeat center / contain;
    -webkit-mask: url('../image/common/icon_menu.svg') no-repeat center / contain;
}

.h_menu .icon {
    width: calc(100vw * (17/375));
    height: calc(100vw * (17/375));
    background: url('../image/common/menu.svg') no-repeat center / contain;
}

/* END header */


/* gnb */
.gnb_wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: transparent;
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    overflow: auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: rgba(244, 244, 249, 0.4);
    backdrop-filter: blur(5px);
	overflow:hidden;
}

.gnb_big_wrap.on .gnb_wrap {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -o-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}

.gnb_big_wrap.close .gnb_wrap {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: 0;
    -moz-transition: 0;
    -ms-transition: 0;
    -o-transition: 0;
    transition: 0;
}

.gnb_box {
	display: flex;
	flex-direction: column;
    width: 100%;
    height: 100vh;
	overflow: hidden;
    margin-left: auto;
    background: var(--background-color);
    border-radius: 0 0 0 0;
    color: var(--black-color);
}

.g_logo {
	flex-shrink: 0;
	height: calc(100vw * (68/375));
    display: flex;
    align-items: center;
    justify-content: space-between;
	background: var(--black-color);
	padding-right: calc(100vw * (12/375)); 
}

.g_logo .logo {
    margin-left: calc(100vw * (20/375));
}
.g_logo .logo img {
    height: calc(100vw * (16/375));
}

.g_logo .g_logout {
	display: flex;
	align-items: center;
	justify-content: center;
    height: calc(100vw * (32/375));
	padding: 0 calc(100vw * (14/375));
    margin-left: auto;
	background: rgba(255,255,255,0.1);
	border-radius: var(--out-radius);
	font-size: calc(100vw * (13/375));
	color: rgba(255,255,255,0.6);
}
.g_logo .g_home {
	display: flex;
	align-items: center;
	justify-content: center;
    width: calc(100vw * (42/375));
    height: calc(100vw * (50/375));
}
.g_logo .g_home span {
	display: inline-block;
    width: calc(100vw * (32/375));
    height: calc(100vw * (32/375));
	background: var(--white-color);
	mask: url('../image/common/icon_home.svg') no-repeat center / contain;
	-webkit-mask: url('../image/common/icon_home.svg') no-repeat center / contain;
}
.g_logo .g_xbtn {
	display: flex;
	align-items: center;
	justify-content: center;
    width: calc(100vw * (42/375));
    height: calc(100vw * (50/375));
}
.g_logo .g_xbtn span {
	display: inline-block;
    width: calc(100vw * (32/375));
    height: calc(100vw * (32/375));
	background: var(--white-color);
	mask: url('../image/common/icon_xbtn.svg') no-repeat center / contain;
	-webkit-mask: url('../image/common/icon_xbtn.svg') no-repeat center / contain;
}


.g_menu {
	flex: 1;
    overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--black-color);
	display: flex;
	flex-direction: column;
}
.g_cash {
    margin: 0 calc(100vw * (16/375)) calc(100vw * (10/375));
    display: flex;
    align-items: center;
	height: calc(100vw * (98/375));
    justify-content: space-between;
    padding: 0 calc(100vw * (20/375));
    border-radius: var(--common-radius);
	background: #FFF;
	box-shadow: var(--box-shadow);
}

.g_cash .left .row1 {
    font-weight: 600;
    font-size: calc(100vw * (14/375));
    line-height: 1.4em;
}

.g_cash .left .row2 {
    font-weight: 600;
    font-size: calc(100vw * (28/375));
    line-height: 1.4em;
	letter-spacing: calc(100vw * (-1.44 / 375));
	display:flex;
	align-items:center;
	gap:calc(100vw * (4/375));
}

.g_cash .left .row3 {
    font-weight: 400;
    font-size: calc(100vw * (12/375));
    line-height: 1.3em;
    width: calc(100vw * (79/375));
    height: calc(100vw * (23/375));
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(249, 249, 249, 0.2);
    border-radius: var(--common-radius);
    margin-top: calc(100vw * (13/375));
}

.g_cash .g_QR {
    display: block;
    width: calc(100vw * (52/375));
    height: calc(100vw * (52/375));
}
.g_cash .g_QR img{
    width: calc(100vw * (30/375));
    height: calc(100vw * (30/375));
}

.g_plus {
    height: calc(100vw * (60/375));
    padding: 0 calc(100vw * (20/375));
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F1FBFB;
	border-radius:calc(100vw * (6/375));
	margin:0 calc(100vw * (20/375));
	color:var(--sub-color);
}

.g_plus .left {
    font-weight: 400;
    font-size: calc(100vw * (16/375));
    line-height: 1.35em;
}

.g_plus .right {
    display: flex;
    align-items: center;
    gap: calc(100vw * (10/375));
    font-size: calc(100vw * (18/375));
    font-weight: 600;
}
.g_plus .right:after{
	content:"";
	width: calc(100vw * (6/375));
    height: calc(100vw * (12/375));
	background-image:url('../image/common/gnb_arw_renew.png');
	background-size:100% 100%;
}

.g_plus .right img {
    width: calc(100vw * (6/375));
    height: calc(100vw * (12/375));
	display:none;
}

.g_list {
	flex: 1;
	background: var(--white-color);
	border-radius: calc(100vw * (20 / 375)) calc(100vw * (20 / 375)) 0 0;
	margin-top: calc(100vw * (20 / 375));
	padding: calc(100vw * (20 / 375)) 0 0;
}


.g_list .service_list{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(100vw * (18 / var(--design-width)));
    margin-top: 0;
}
.service_list button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(100vw * (10 / var(--design-width)));
    min-width: 0;
    color: var(--black-color);
    text-align: center;
    font-size: calc(100vw * (13 / var(--design-width)));
    font-weight: 600;
    word-break: keep-all;
}
.service_list button span{
    display: flex;
    width: calc(100vw * (66 / var(--design-width)));
    height: calc(100vw * (66 / var(--design-width)));
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--box-bg-color);
}
.service_list button span img{
    width: calc(100vw * (33 / var(--design-width)));
    height: auto;
    object-fit: contain;
}
.g_link {
	padding: calc(100vw * (22 / 375)) calc(100vw * (20 / 375));
	border-top: 1px solid var(--border-color);
	margin-top: calc(100vw * (20 / 375));
}


.g_list .g_link button {
	width:100%;
    font-weight: 400;
    font-size: calc(100vw * (18/375));
	height: calc(100vw * (52 / 375));
	display:flex;
	align-items: center;
}




.g_profile {
	display: flex;
	align-items: center;
	padding: 0 calc(100vw * (20/375));
	gap: calc(100vw * (10/375));
}
.g_info{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(100vw * (5/375));
	flex: 1;
}
.btn_name{
	display: flex;
	align-items: center;
	color: var(--white-color);
	font-size: calc(100vw * (21/375));
	font-weight: 600;
	gap: calc(100vw * (8/375));
}
.g_mail{
	color: #9EA2AD;
	font-size: calc(100vw * (14/375));
}
.btn_myqr{
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100vw * (44/375));
	height: calc(100vw * (44/375));
}
.btn_myqr span{
	display: inline-block;
	width: calc(100vw * (27/375));
	height: calc(100vw * (27/375));
	background: var(--white-color);
	mask: url('../image/common/icon_myqr.svg') no-repeat center / contain;
	-webkit-mask: url('../image/common/icon_myqr.svg') no-repeat center / contain;
}




.sub_list_link a svg {
	transition:0.5s;
	transform-origin:center center;
	transform:rotate(180deg);
	display:none;
}

.sub_list_link.on a svg {
	transform:rotate(0deg);
}
.sub_list_link a:after{
	content:"";
    width: calc(100vw * (14/375));
    height: calc(100vw * (9/375));
    background-image: url('../image/common/sub_list_link_renew.png');
    background-size:100% 100%;
    position: absolute;
    top: calc(100vw * (5/375));
	transform:rotate(180deg);
	transition:0.5s;
	transform-origin:center center;
    right: 0;
}
.sub_list_link.on a:after{
	transform:rotate(0deg);
	transition:0.5s;
}

.menu_footer {
    display: flex;
    align-items: center;
    justify-content: center;
	border-top: 1px solid var(--border-color);
    margin: 0 calc(100vw * (20 / 375));
    padding: calc(100vw * (20 / 375)) calc(100vw * (20 / 375)) calc(100vw * (40 / 375));
	gap: calc(100vw * (14/375));
}

.menu_etc{
    font-size: calc(100vw * (14/375));
	color:var(--gray-color);
	position: relative;
}
.menu_etc::after{
    content: "";
	display: inline-block;
	width: 1px;
	height: calc(100vw * (12/375));
	background: var(--border-color);
	margin-left: calc(100vw * (14/375));
}

.menu_etc:last-child::after{
    display: none;
}





.g_inlink_group {
	display:flex;
	background:transparent;
	border-radius:calc(100vw * (6/375));
	height:calc(100vw * (56/375));
	align-items:center;
	justify-content:space-between;
	margin-top:calc(100vw * (12/375));
	border:1px solid var(--border-color);
}
.g_inlink_group .g_inlink {
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 0 calc(100vw * (20/375));
	text-align:center;
	font-size:calc(100vw * (16/375));
}
.g_inlink_group .g_inline {
	width: 1px;
	height:calc(100vw * (12/375));
	background:var(--border-color);
}




.g_sns {
	display:flex;
	align-items:center;
	gap:calc(100vw * (10/375));
	padding: 0 calc(100vw * (16/375));
	margin-top: calc(100vw * (10/375));
}

.g_sns button{
	flex:1;
	display:flex;
	align-items:center;
	justify-content: center;
	font-size:calc(100vw * (17/375));
	font-weight:500;
	border-radius: var(--common-radius);
	height:calc(100vw * (62/375));
	gap:calc(100vw * (4/375));
	background:#FFF;
	box-shadow: var(--box-shadow);
}

.g_sns #shareKakao img {
	width:calc(100vw * (28/375));
}
.g_sns #shareLine img{
	width:calc(100vw * (25/375));
}


/* END gnb */

/* sub_header */
.sub_header {
    width: 100%;
    padding: 0 calc(100vw * (9/375)) 0 calc(100vw * (4/375));
    height: calc(100vw * (50/375));
	background-color: var(--black-color);
	position:fixed;
	top:0;
	left:0;
	z-index:49;
}





.sub_header_box {
    width: 100%;
    justify-content: space-between;
    display: flex;
    align-items: center;
}

.back_link {
    width: calc(100vw * (46/375));
    height: calc(100vw * (46/375));
    display: flex;
	align-items: center;
	justify-content: center;
}
.back_link span {
    width: calc(100vw * (10/375));
    height: calc(100vw * (18/375));
    display: block;
	background: var(--white-color);
	mask:url('../image/common/icon_back.svg') no-repeat center / contain;
	-webkit-mask:url('../image/common/icon_back.svg') no-repeat center / contain;
}

.sub_header .right {
    display: flex;
    align-items: center;
    gap: 0;
}

.sub_header .left {
    display: flex;
    gap: calc(100vw * (10/375));
    align-items: center;
}

.sub_header .name {
    font-weight: 600;
    font-size: calc(100vw * (17/375));
    color: var(--white-color);
}

.sub_header .h_menu {
    width: calc(100vw * (46/375));
    height: calc(100vw * (46/375));
	display: flex;
	align-items: center;
	justify-content: center;
}
.sub_header .h_menu span{
    width: calc(100vw * (28 / 375));
    height: calc(100vw * (28 / 375));
    display: block;
    background: var(--white-color);
    mask: url(../image/common/icon_menu.svg) no-repeat center / contain;
    -webkit-mask: url(../image/common/icon_menu.svg) no-repeat center / contain;
}


/* END sub_header */


/* modal */
.modal {
    position: fixed;
    z-index: 1001000000;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

.modal_con {
    position: fixed;
    left: 0;
    right: 0;
    display: none;
    bottom: 0;
    max-height: 95%;
    overflow: auto;
    z-index: 1002;
    background: #fff;
    border-radius: var(--out-radius) var(--out-radius) 0 0;
}

.modal_head {
    padding: 0 calc(100vw * (20/375));
    height: calc(100vw * (60/375));
    justify-content: space-between;
    border-radius: var(--out-radius) var(--out-radius) 0 0;
    background-color: #fff;
}

.modal_head .modal_tit {
    font-weight: 600;
    color: #111;
    font-size: calc(100vw * (16/375));
}

.modal_head .modal_close {
    width: calc(100vw * (25/375));
    height: calc(100vw * (25/375));
    justify-content: center;
}

.modal_head .modal_close .img_icon {
    width: calc(100vw * (13/375));
    height: calc(100vw * (13/375));
}

/* END modal */

/* pop */

.pop {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    max-width: 95%;
    max-height: 95%;
    /* overflow: auto; */
    background-color: #fff;
    z-index: 1001000001;
    border-radius: var(--out-radius);
    display: none;
}

.pw_pop .pop {
    width: 95%;
}

.pop_close_btn {
    position: absolute;
    width: calc(100vw * (10/375));
    right: calc(100vw * (15/375));
    top: calc(100vw * (15/375));
    z-index: 2;
}

.pop_close_btn img {
    filter: invert(1);
    width: 100%;
}

.common_pop .pop {
    width: calc(100vw - (100vw * (80 / 375)));
    padding: calc(100vw * (30/375)) calc(100vw * (20/375)) calc(100vw * (20/375));
}



.id_btn {
	display:flex;
	justify-content: center;
	align-items: center;
	gap: calc(100vw * (6/375));
}

.id_btn button {
	flex:1;
    height: calc(100vw * (52/375));
	padding : 0 calc(100vw * (20/375));
    border-radius: var(--common-radius);
    font-size: calc(100vw * (16/375));
    background: #FFF;
	color: var(--black-color);
	border: 1px solid var(--btn-border-color);
	font-weight:600;
}
.id_btn button.chk {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--black-color);
}

/* END pop */


.g_home_btn {
    width: calc(100vw * (24/375));
    justify-content: center;
    margin-right: calc(100vw * (10/375));
}

.g_home_btn .icon {
    width: calc(100vw * (24/375));
    height: calc(100vw * (24/375));
}

a {
    -webkit-tap-highlight-color: transparent;
}

button.color_Yellow {background:#efd748; color: #000;}
button.color_Green {background:#13b163;}
button.color_Red {background:#d84343;}

.commonPopTitle {
	margin-bottom:calc(100vw * (12/375));
	font-size: calc(100vw * (18/375));
	color:var(--black-color);
	font-weight:600;
}

.commonPopText {
	font-size:calc(100vw * (15/375));
	line-height:1.4;
	color: var(--black-color);
}


button{
	-webkit-tap-highlight-color: transparent; 
    transition: background 0.1s ease;
}



.pw_find{
	text-align: center;
	padding: calc(100vw * (20 / 375)) 0;
	font-size: calc(100vw * (15 / 375));
	color: var(--gray-color);
	text-decoration: underline;
}


/* price */
.amount {
    font-weight: 700;
    letter-spacing: -0.04em;
}

.amount span {
    font-weight: 400;
    margin-left: 0.15em;
}

.per{
    color: var(--caution-color);
}
.origin{
    color: var(--placeholder);
    text-decoration: line-through;
}
.unit {
	font-weight: 400;
}
/* End price */






/* bottom navigation */
.bottom_nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100vw * (72 / var(--design-width)));
    background-color: var(--white-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    border-radius: var(--out-radius) var(--out-radius) 0 0;
    box-shadow: 0 0 calc(100vw * (8 / var(--design-width))) 0 rgba(0, 0, 0, 0.12);
    
    padding: 0 calc(100vw * (12 / var(--design-width)));
    z-index: 101;
}

/* 개별 메뉴 버튼 */
.bottom_nav .nav_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: calc(100vw * (72 / var(--design-width)));
    min-width: 0;
    color: var(--gray-color);
    gap: calc(100vw * (2 / var(--design-width)));
}

.bottom_nav .icon {
    flex-shrink: 0;
    display: block;
    width: calc(100vw * (30 / var(--design-width)));
    height: calc(100vw * (30 / var(--design-width)));
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.bottom_nav .text {
    font-size: calc(100vw * (12 / var(--design-width)));
    font-weight: 600;
}

.bottom_nav .nav_item.active {
    color: var(--main-color);
}


.bottom_nav .nav_item.active .icon_home { 
    background-image: url('../image/common/icon_nav_home_on.svg'); 
}
.bottom_nav .nav_item:not(.active) .icon_home { 
    background-image: url('../image/common/icon_nav_home_off.svg'); 
}
.bottom_nav .icon_card { 
    background-image: url('../image/common/icon_nav_card_on.svg'); 
}
.bottom_nav .nav_item:not(.active) .icon_card { 
    background-image: url('../image/common/icon_nav_card_off.svg'); 
}
.bottom_nav .icon_qr { 
    background-image: url('../image/common/icon_nav_qr_on.svg'); 
}
.bottom_nav .nav_item:not(.active) .icon_qr { 
    background-image: url('../image/common/icon_nav_qr_off.svg'); 
}
.bottom_nav .icon_topup { 
    background-image: url('../image/common/icon_nav_topup_on.svg'); 
}
.bottom_nav .nav_item:not(.active) .icon_topup { 
    background-image: url('../image/common/icon_nav_topup_off.svg'); 
}
.bottom_nav .icon_my { 
    background-image: url('../image/common/icon_nav_my_on.svg'); 
}
.bottom_nav .nav_item:not(.active) .icon_my { 
    background-image: url('../image/common/icon_nav_my_off.svg'); 
}

/* End bottom navigation */

.icon_quick{
    display: inline-block;
    width: calc(100vw * (7 / var(--design-width)));
    height: calc(100vw * (14 / var(--design-width)));
    background: var(--white-color);
    mask: url("../image/common/icon_quick.svg") no-repeat center / contain;
    -webkit-mask-: url("../image/common/icon_quick.svg") no-repeat center / contain;
    flex-shrink: 0;
}



/* qr scan popup */
/* qr scan popup */
.qr_pop {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.35s;
}
.qr_pop.open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
.qr_pop .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.35s;
}
.qr_pop.open .bg {
    opacity: 1;
}
.qr_pop_box {
	background: #FFFFFF;
	width: 100%;
	border-radius: var(--out-radius) var(--out-radius) 0 0;
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	max-height: 80vh;
    transform: translateY(100%);
    transition: transform 0.35s;
}
.qr_pop.open .qr_pop_box {
    transform: translateY(0);
}

.qr_pop_box .modal_xbtn {
	flex-shrink: 0;
	width: 100%;
	height: calc(100vw * (36 / var(--design-width)));
	position: unset;
	z-index: 3;
	background-image: url("../image/sub/up_x_btn_renew.png");
	background-size: calc(100vw * (40 / var(--design-width))) calc(100vw * (5 / var(--design-width)));
	background-position: center;
	background-repeat: no-repeat;
}

.qr_pop_box .modal_title {
	font-size: calc(100vw * (20 / var(--design-width)));
	font-weight: 600;
	padding: 0 calc(100vw * (20 / var(--design-width)));
	margin-bottom: calc(100vw * (20 / var(--design-width)));
	flex-shrink: 0;
}

.qr_pop_box .scroll_inner {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	flex: 1;
	overflow-x: hidden;
	margin: 0 calc(100vw * (20 / var(--design-width)));
	padding-bottom: calc(100vw * (100 / var(--design-width)));
}

.scan_btn_group{
	display: flex;
	align-items: center;
	gap: calc(100vw * (7 / var(--design-width)));
}
.scan_btn_group .btn_qr_scan{
	flex: 1;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(100vw * (7 / var(--design-width)));
	height: calc(100vw * (100 / var(--design-width)));
	font-size: calc(100vw * (16 / var(--design-width)));
	color: var(--black-color);
	border: 1px solid var(--border-color);
	border-radius: calc(100vw * (16 / var(--design-width)));
	background: var(--white-color);
}
.scan_btn_group .img{
	width: calc(100vw * (36 / var(--design-width)));
}
.scan_btn_group .label{
	font-size: calc(100vw * (16 / var(--design-width)));
	color: var(--black-color);
}

.scan_btn_group .btn_qr_scan:active{
	background-color: var(--box-bg-color);
}
/* End qr scan popup */