@charset "utf-8"; 

/*
 * 무인계산대
 **/
.boxRadius {border-radius:16px;background-color:#FFFFFF;box-shadow:3px 3px 4px #00000005;}

body:has(.offline) {background-color:#F4F5F7}
.offline {padding:0 0 40px 0;letter-spacing:-0.12px}
.offline:has(.offline_floating .floating_btn) {padding-bottom:120px}
.gap {margin-top:16px}
.oSwiper {margin-left:-16px;margin-right:-16px}
.box_tooltip {display:flex;align-items:center;position:absolute;top:-10px;left:-10px;height:24px;padding:0 8px;border-radius:12px;background-color:#FF8E1F;font-weight:700;font-size:12px;color:#FFFFFF}
.box_tooltip::after {content:'';display:block;position:absolute;bottom:-7px;left:10px;border-style:solid;border-width:7px 0 0 10px;border-color:#FF8E1F transparent transparent transparent}

/* 헤더 */
.offline_header {display:flex;align-items:center;column-gap:10px;position:sticky;top:0;left:0;width:100%;padding:18px 16px;background-color:#F4F5F7;box-sizing:border-box;z-index:2}
.offline_logo {width:115px;margin-right:auto}
.offline_logo:not(:has(img)) {width:auto;font-weight:700;font-size:16px;line-height:24px;text-align:center}
.offline_home {width:24px;margin-top:-2px}
.offline_prev {position:absolute;top:15px;left:16px;width:24px}
.offline_header:has(.offline_prev) .offline_logo,
.offline_logo:not(:has(+a)) {margin:0 auto}

.offline_conts {padding:0 16px}
/* 메인::비주얼 */
.offline_swiper {margin-bottom:20px}
.offline_anch {overflow:hidden;width:calc(100% - 44px);border-radius:20px}

/* 메인::보유 포인트 */
.offline_payment {display:flex;flex-wrap:wrap;gap:16px 16px}
.payment_item {position:relative;width:calc((100% - 16px) / 2);padding:21px 16px 24px 16px}
.payment_item::after {content:'';display:block;width:80px;height:80px;margin:19px auto 0 auto;border-radius:16px;background:no-repeat center/100% auto}
.payment_item-qr::after {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_offline_qr.gif)}
.payment_item-auto::after {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_offline_auto.png)}
.payment_name {display:flex;align-items:center;width:100%;font-weight:700;font-size:14px;line-height:18px}
.payment_name::after {content:'';width:9px;height:9px;margin-top:-1px;margin-left:auto;border:solid #777777;border-width:2px 2px 0 0;transform:rotate(45deg)}
.payment_desc {display:block;margin-top:6px;font-size:12px;color:#888888}

/* 메인::결제관련 */
.offline_box {}
.box_item {display:flex;align-items:flex-end;flex-wrap:wrap;position:relative;width:100%;padding:28px 20px 20px 20px}
.box_title {width:100%;margin-bottom:11px;font-weight:700;font-size:13px;line-height:16px}
.offline_box .box_title::before {content:'';display:inline-block;width:16px;height:16px;margin-right:3px;border-radius:50%;background:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_price_32.png) no-repeat center/100% auto;vertical-align:top}
.box_left {font-weight:500;font-size:17px}
.box_price {font-weight:700;font-size:20px}
.box_right {margin-left:auto;font-weight:500;font-size:12px;color:#6B6B6B}
.box_btn {display:flex;gap:8px;width:100%;margin-top:19px}
.box_btn a {flex:1;display:flex;align-items:center;justify-content:center;height:36px;border-radius:4px;font-weight:500;font-size:13px}
.box_btn a:nth-child(1) {background-color:#D7F8E7;color:#35644D}
.box_btn a:nth-child(2) {background-color:#13893D;color:#FFFFFF}

/* 메인::배너 */
.offline_banner {/* padding:0 16px */overflow:hidden;border-radius:16px}

/* 메인::메뉴 */
.offline_menu {display:flex;gap:16px 14px}
.menu_item {flex:1;display:flex;flex-wrap:wrap;justify-content:center;position:relative;/* padding:18px 10px; */padding:10px 10px;font-size:13px;line-height:17px;color:#6B6B6B}
.menu_item::before {content:'';display:block;/* width:100%;height:40px;margin:0 auto 7px auto; */width:80px;height:80px;margin:0 auto;background:no-repeat center/100% auto}
.menu_item-order::before {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_offline_order.png)}
.menu_item-refund::before {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_offline_refund.png)}
.menu_item-cancel::before {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_offline_cancel.png)}
.menu_item-cs::before {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_offline_cs.png)}

/* 탭 */
.offline_tab {display:flex;column-gap:12px}
.tab_item {flex:1;display:flex;align-items:center;justify-content:center;height:44px;border-radius:22px;background-color:#FFFFFF;font-size:14px;color:#6B6B6B}
.tab_item.active {background-color:#13893D;box-shadow:3px 3px 4px #00000005;font-weight:700;color:#FFFFFF}

/* 진행중인 결제::상품 */
.offline:has(.offline_product) {padding-bottom:10px}
.offline_conts:has(.offline_product) {display:flex;flex-direction:column;min-height:calc(100dvh - 60px - 10px)}
.offline_product {margin-bottom:auto}
.product_total {display:flex;align-items:center;padding:22px 0 12px 0}
.product_total_title {font-weight:500;font-size:13px;margin-right:auto}
.product_total_span {font-weight:500;font-size:13px}
.product_list {overflow-y:auto;display:flex;flex-direction:column;/* justify-content:flex-end; */row-gap:8px;height:calc(100dvh - 60px - 10px - 47px - 126px - 91px)} /* 100dvh - 헤더 - 하단여백 - (헤더)결제예정금액 - (하단)결제예정금액 - 사용가능 포인트 */
.product_item {display:flex;flex-wrap:wrap;align-items:center;padding:12px 16px 12px 12px;border-radius:10px;background-color:#FFFFFF}
.product_item:first-child {margin-top:auto}
.product_empty {justify-content:center;min-height:80px;border-radius:16px;font-size:12px;color:#888888}
.product_img {flex-shrink:0;width:56px;height:56px;margin-right:10px}
.product_img img {width:100%;height:100%;border-radius:50%;object-fit:cover}
.product_info {flex:1;padding-right:14px}
.product_title {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:ellipsis;overflow:hidden;margin-bottom:5px;font-size:12px;line-height:16px}
.product_count {font-size:13px;line-height:17px;color:#6B6B6B}
.product_price {font-weight:500;font-size:13px;line-height:17px;color:#333333}
.product_price::before {content:'';display:inline-block;width:1px;height:10px;margin:4px 8px 0 4px;background-color:#E0E0E0;vertical-align:top}
.product_btn {flex-shrink:0}
.product_btn button {height:26px;padding:0 9px;border-radius:4px;background-color:#6B6B6B;font-weight:500;font-size:12px;color:#FFFFFF}

/* 결제내역 리스트 */
.product_orderNone {padding:150px 15px;color:#888;font-size:12px;text-align: center;}
.product_orderList {margin-top:20px;padding-bottom:60px;}
.product_orderList >li+li {margin-top:12px}
.product_orderList a {display: block;padding:16px;border-radius:16px;overflow: hidden;background-color: #fff;}
.product_orderList_top {display:flex;height:24px;align-items: center;margin-bottom:12px}
.product_orderList_top strong {display:flex;align-items: center;color:#6B6B6B;font-weight: bold;font-size:12px;gap:0 4px}
.product_orderList_top strong em {font-size:13px;color:#333}
.product_orderList_top span {margin-left:auto;display:inline-flex;height:24px;padding:0 10px;border:1px solid #E0E0E0;align-items: center;font-size:11px;border-radius:12px}
.product_orderList_item {display:flex;align-items:center;}
.product_orderList_img {flex-shrink:0;width:42px;height:42px;margin-right:8px}
.product_orderList_img img {width:100%;height:100%;border-radius:50%;object-fit:cover}
.product_orderList_info {flex:1;padding-right:14px}
.product_orderList_info em {}
.product_orderList_info p {font-size:12px;color:#6B6B6B;margin-top:6px}
.product_orderList_btm {display:flex;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid #F4F4F4;font-size:14px;justify-content: space-between;}
.product_orderList_btm strong {font-weight: bold;}
.product_orderList_btm .orderList_pay_detail {width:100%;margin-top:10px}
.product_orderList_btm .orderList_pay_detail li {display:flex;align-items: center;font-size:12px;color:#888}
.product_orderList_btm .orderList_pay_detail li+li {margin-top:6px}
.product_orderList_btm .orderList_pay_detail li strong {margin-left:auto;font-weight: normal;}
.product_orderList .product_img {width:42px;height:42px;margin-right:8px}

/* 결제 상세내역 */
.product_detailTotal {display:flex;align-items:center;height:44px;padding:0 16px;background-color: #fff;border-radius:10px}
.product_detailTotal_title {font-weight:500;font-size:12px;margin-right:auto;color:#6B6B6B}
.product_detailTotal_title .state_txt {color:#333}
.product_detailTotal_title .state_txt::after {content:'/';display:inline-block;color:#6b6b6b;font-size:12px;margin:0 4px}
.product_detailTotal_span {font-weight:500;font-size:13px}
.product_detailList {display:flex;flex-direction:column;background-color: #fff;margin-top:12px;border-radius: 10px;padding:6px 0}
.product_detailList > li {padding:0 16px}
.product_detailList .product_item {border-radius:0;padding:10px 0}
.product_detailList > li+li .product_item {border-top:1px solid #F4F4F4}

/* 결제예정금액 */
.offline_total {margin-top:16px;padding:19px 16px;border-radius:10px;background-color:#13893D}
.total_dl {display:flex;flex-wrap:wrap;row-gap:8px}
:where(.total_dt,.total_dd) {width:50%;margin-left:auto;font-size:13px;color:rgba(255,255,255,0.8);line-height:17px}
.total_dd {text-align:right}
.total_dt b {display:block;margin-bottom:4px;font-weight:600;font-size:14px;line-height:18px;color:#FFFFFF}
.total_dd b {display:block;margin-bottom:4px;font-weight:600;font-size:15px;line-height:18px;color:#FFFFFF}

/* 자동 할인쿠폰 */
.offline_coupon_discount {margin-top:16px;padding:12px 16px;border-radius:10px;background-color:#fff;border:1px solid #F37021;display:flex; align-items: center;}
.offline_coupon_discount .coupon_discount_title {}
.offline_coupon_discount .coupon_discount_title span {display:inline-flex;align-items: center; justify-content: center; height:18px;font-size:11px; padding:0 3px;color:#F37021;border-radius:2px;background-color: #FFEADE;margin-left:5px;}
.offline_coupon_discount .coupon_discount_price {margin-left:auto;color:#F37021;}

/* 결제금액 */
.offline_product.detail {margin-bottom:16px}
.offline_pay_detail {background-color: #fff;border-radius:10px;padding:16px;line-height: 1.25;}
.offline_pay_detail+.offline_pay_detail {margin-top:16px}
.offline_pay_detail ul {}
.offline_pay_detail ul li {display:flex;flex-wrap: wrap;}
.offline_pay_detail ul li+li {margin-top:8px}
.offline_pay_detail ul li strong {margin-left:auto}
.offline_pay_detail ul li em {width:100%;}
.offline_pay_detail ul .total {width:100%; text-align: right}
.offline_pay_detail ul li+.total {margin-top:12px;padding-top:12px;border-top:1px solid #F4F4F4}
.offline_pay_detail ul .total .total_tit,
.offline_pay_detail ul .total .total_price {font-size:14px;font-weight: bold;}
.offline_pay_detail ul ul {width:100%;margin-top:11px}
.offline_pay_detail ul ul li {font-size:12px;color:#888}
.offline_pay_detail ul ul li+li {margin-top:6px}
.offline_pay_detail .btm_info_txt {margin-top:12px;padding-top:12px;border-top:1px solid #F4F4F4;color:#888;font-size:12px}

/* 사용가능 잔액 */
.offline_balance {margin-top:16px;padding:18px 16px 17px 16px;border-radius:10px;background-color:#FFFFFF}
.balance_header {display:flex;margin-bottom:20px;line-height:18px}
.balance_header:has(+.balance_body[style*='display:none']) {margin-bottom:10px}
.balance_header_title {font-weight:700;font-size:14px}
.balance_header_desc {margin-left:auto;font-weight:700;font-size:15px;color:#13893D}
.balance_body {display:flex;margin-bottom:8px;line-height:15px;font-size:12px}
.balance_body_desc {margin-left:auto}
.balance_text {font-size:12px}
.balance .sltBox:not([style*='display:none']) + .balance_text {margin-top:8px}

/* 카드 선택 셑렉트박스 */
.sltBox_current {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;width:100%;padding:12px 42px 11px 12px;border-radius:5px;background-color:#F4F4F4;font-size:12px;text-align:left;color:#6B6B6B}
.sltBox_current::after {content:'';display:block;position:absolute;top:50%;right:14px;width:9px;height:9px;margin-top:-7px;border:solid #333333;border-width:0 1px 1px 0;transform:rotate(45deg)}
.sltBox_current em {font-weight:500;color:#333333}

/* 포인트 충전 */
.offline_charging {margin-top:24px}
.charging_title {display:block;font-weight:700;font-size:15px;line-height:19px}
.charging_box {position:relative;margin-top:12px;padding:16px 60px 15px 18px;border:2px solid #13893D;border-radius:10px;background-color:#FFFFFF}
.charging_label {display:block;font-size:11px;line-height:14px;}
.charging_input {display:block;margin-top:6px;font-weight:700;font-size:16px;line-height:21px}
.charging_delete {display:none;position:absolute;top:50%;right:18px;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:#BABBBD url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_cross_w_19.png) no-repeat top 6px left 6px/9px auto}
.charging_radio {display:flex;gap:3px 3px;margin-top:18px}
.charging_item {flex:1;display:flex;align-items:center;justify-content:center;height:34px;border-radius:100px;background-color:#FFFFFF;font-size:12px;color:#6B6B6B}
.charging_item.active {background-color:#13893D;font-weight:500;color:#FFFFFF}
.charging_info {margin:32px -16px 0 -16px;border-top:1px solid #E0E0E0;padding:30px 16px 0 16px}
.charging_dl {display:flex;flex-wrap:wrap;row-gap:13px;font-size:12px;line-height:15px}
.charging_dt {flex-shrink:0;width:130px;padding-left:6px;padding-right:10px}
.charging_dl > .charging_dt::before {content:'';display:inline-block;width:2px;height:2px;margin:6px 4px 0 -6px;border-radius:50%;background-color:#333333;vertical-align:top}
.charging_dd {width:calc(100% - 130px);text-align:right}
.charging_dl_sub {display:flex;flex-wrap:wrap;row-gap:5px;width:100%;margin-top:-5px;color:#888888}
.charging_card {padding-right:1px;background-color:transparent}
.charging_card::after {content:'';display:inline-block;width:16px;height:16px;margin-left:4px;background:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_arr_down_32.png) no-repeat center/100% auto;vertical-align:top}

/* 이용내역::보유 포인트 */
.offline:has(.offline_point) {padding-bottom:0}
.offline_point {}
.offline_point_inner {padding:24px 20px 20px 20px;border-radius:10px;background-color:#FFFFFF;box-shadow:3px 3px 4px #00000005}
.point_dl {display:flex;flex-wrap:wrap;row-gap:6px}
.point_total {display:flex;flex-wrap:wrap;width:100%;margin-bottom:4px}
.point_total .point_dt {font-weight:700;font-size:14px;line-height:18px}
.point_total .point_dd {font-weight:500;font-size:17px;line-height:18px}
.point_dt {flex-shrink:0;width:130px}
.point_dd {width:calc(100% - 130px);text-align:right}
.point_dl > .point_dt {padding-left:6px;font-size:12px;line-height:15px;color:#888888}
.point_dl > .point_dt::before {content:'';display:inline-block;width:2px;height:2px;margin:6px 4px 0 -6px;border-radius:50%;background-color:#888888;vertical-align:top}
.point_dl > .point_dd {font-size:12px;line-height:15px;color:#888888}
.point .point_anch {display:block;width:100%;padding:18px 0 21px 0;font-weight:500;font-size:13px;color:#6B6B6B;text-align:center}
.point_anch::after {content:'';display:inline-block;width:10px;height:10px;margin:1px 0 0 4px;background:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_plus_20_2.png) no-repeat center/100% auto;vertical-align:top}

.point_group {min-height:calc(100dvh - 220px);margin:0 -16px;padding:27px 16px 32px 16px;border-top:1px solid #E0E0E0;background-color:#FFFFFF}

.point_sort {position:relative;margin-bottom:30px}
.point_period {font-size:12px}
.point_counting {font-weight:500;font-size:12px;color:#13893D}
.point_counting::before {content:'';display:inline-block;width:1px;height:12px;margin:0 6px 0 3px;background-color:#E0E0E0;vertical-align:top}
.point_filter {position:absolute;top:0;right:1px}
.point_filter_current {font-weight:500;font-size:13px}
.point_filter_current::after {content:'';display:inline-block;width:16px;height:16px;margin-left:4px;background:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_arr_down_32.png) no-repeat center/100% auto;vertical-align:top}
.point_filter_list {display:none;position:absolute;top:23px;right:0px;padding:6px 0;border:1px solid #E0E0E0;border-radius:10px;background-color:#FFFFFF}
.point_filter_item {width:100%;padding:6px 7px;font-size:13px;color:#6B6B6B;white-space:nowrap}
.point_filter.active .point_filter_current::after {background-image:url(https://oasisprodcom.edge.naverncp.com/mobile/ico/ico_arr_up_32.png)}
.point_filter.active .point_filter_list {display:block}

.point_list {display:flex;flex-direction:column;row-gap:30px}
.point_empty {padding:90px 0;font-size:12px;color:#888888;text-align:center}
.point_item {}
.point_date {display:block;margin-bottom:12px;font-weight:700;font-size:12px;line-height:15px}
.point_set {display:flex;font-size:13px;line-height:17px}
.point_info {flex:1;padding-right:20px}
.point_sub {display:block;margin-top:3px;font-weight:400;font-size:12px;line-height:15px;color:#6B6B6B}
.point_sum {flex-shrink:0;margin-left:auto;font-weight:500;text-align:right}
.point_set:not(.use) .point_sum {color:#13893D}
.point_set + .point_set {margin-top:9px;padding-top:10px;border-top:1px solid #EEEEEE}

/* 플로팅 영역 */
.offline_floating {position:fixed;bottom:0;left:0;width:100%;border-top:1px solid #EEEEEE;z-index:10}
.floating .floating_flex {display:flex;border-top:1px solid #F0F0F0}
.floating .floating_btn {flex:1;display:flex;align-items:center;justify-content:center;height:60px;background-color:#13893D;font-weight:700;font-size:16px;color:#FFFFFF}
.floating span.floating_btn {background-color:#E0E0E0;color:#6B6B6B}
.floating_dl {display:flex;align-items:center;padding:8px 16px 7px 16px;background-color:#FFFFFF;font-size:12px;line-height:15px}
.floating_dt {flex-shrink:0;width:120px;padding-right:20px;color:#6B6B6B}
.floating_dd {width:calc(100% - 120px);text-align:right}

/* 결제완료 */
.offline_complete {display:flex;align-items:center;min-height:calc(100dvh - 100px);padding:40px 0 60px 0}
.complete_box {width:100%;padding:60px 20px 58px 20px;border-radius:16px;background-color:#FFFFFF}
.complete_title {display:block;font-weight:700;font-size:17px;text-align:center}

.complete_total {display:flex;align-items:center;margin:53px 0 12px 0;padding-bottom:12px;border-bottom:1px solid #E0E0E0;line-height:18px}
.complete_total_title {margin-right:auto;font-weight:700;font-size:14px}
.complete_total_price {font-weight:700;font-size:15px}
.complete_item {display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;font-size:13px;line-height:17px;color:rgba(51,51,51,0.8)}
.complete_item_title {flex-shrink:0;width:120px;margin-right:auto}
.complete_item_price {width:calc(100% - 120px);margin-right:auto;text-align:right}

.complete_footer {display:flex;justify-content:center;column-gap:20px;margin-top:70px}
.complete_footer .complete_btn {display:flex;align-items:center;justify-content:center;width:158px;height:44px;border-radius:22px;background-color:#13893D;box-shadow:3px 3px 4px #00000005;font-weight:700;font-size:14px;color:#FFFFFF}

.complete_check {display:block;margin:0 auto 23px auto}
.complete_check .line {fill:transparent;stroke:#15893d;animation:.5s linear both}
.complete_check .line-1 {stroke-dasharray:253;animation-name:check-1}
.complete_check .line-2 {stroke-dasharray:88;animation-name:check-2;animation-delay:.3s;animation-duration:.4s}
@keyframes check-1 {0% {stroke-dashoffset:253} 100% {stroke-dashoffset:506}}
@keyframes check-2 {0% {stroke-dashoffset:88} 100% {stroke-dashoffset:176}}

/* 결제수단 */
.offline .odr_section:not(:first-child) {border-top:0}
.offline .odr_section {background-color: #fff;border-radius:16px;margin-top:12px}