@charset "utf-8";
@import url('./reset.css');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ============== variables ==============  */
:root{

	/* coler */

	--white: #fff;
	--black: #000;
	--red: #e83d45;

    --text-default: #333333;
    --text-footer: #999999;
    --input-placeholder: #666666;
    --text-active: #969696;

	--bg-default: #f5f5f7;
	--bg-modal: #f3f3f3;
	--bg-checkbox: #e8e8e8;
	--bg-btn-disabled: #b0b0b0;
	--bg-btn: #262626;
	--bg-btn-02: #929292;
	--bg-isp: #cfcfcf;

	--border-tab: #d7d7d9;
	--border-input: #d3d3d4;
	--border-box: #a5a5a5;
	--border-btn-02: #747474;
	

    /* font */
    --font-family: 'Pretendard';

    /* font-size */
    --font-size-12: 0.75rem; /* 12px */
    --font-size-13: 0.813rem; /* 13px */
    --font-size-14: 0.875rem; /* 14px */
    --font-size-16: 1rem; /* 16px */
    --font-size-18: 1.125rem; /* 18px */
    --font-size-20: 1.25rem; /* 20px */
    --font-size-21: 1.313rem; /* 21px */
    --font-size-22: 1.375rem; /* 22px */
    --font-size-24: 1.5rem; /* 24px */
    --font-size-26: 1.625rem; /* 26px */
    --font-size-28: 1.75rem; /* 28px */
    --font-size-30: 1.875rem; /* 30px */
    --font-size-32: 2rem; /* 32px */
    --font-size-34: 2.125rem; /* 34px */
    --font-size-36: 2.25rem; /* 36px */
    --font-size-40: 2.5rem; /* 40px */
    --font-size-46: 2.875rem; /* 46px */
    --font-size-50: 3.125rem; /* 50px */

    /* font-size */
    --font-w-light: 300;
    --font-w-normal: 400;
    /* --font-w-medium: 500; */
    --font-w-semibold: 600;
    --font-w-bold: 700;
    --font-w-exbold: 800;

    /* padding */
    --main-p: 3.125rem;

    /* modal */
    --modal-color: #000000;
    --modal-bg-overlay: rgba(0, 0, 0, 0.7);
}

/* ============== common ============== */
html {
	/* height: calc(var(--vh, 1vh) * 100); */
}

body {
    width: 100%;
	/* height: calc(var(--vh, 1vh) * 100); */
	background-color: var(--white);
    font-family: var(--font-family), -apple-system, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif;
    font-size: var(--font-size-28);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
	word-wrap: break-word;
	/* overflow-y: auto; */
    overflow-x: hidden;
	color: var(--text-default);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	/* 241121수정 */
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.text-box {
	padding: 1.625rem 2.375rem;
	width: 100%;
	background-color: var(--bg-default);
	border-radius: 0.375rem;
	font-size: var(--font-size-26);
	line-height: 2.875rem;
	color: var(--bg-btn);
}

.text-red {
	color: var(--red);
}

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

.p-0 {
	padding: 0 !important;
}

/*  input_style  */
input[type=text],
input[type=password],
input[type=tel],
input[type=number],
input[type=email],
select { 
	padding: 0 1.875rem;
	width:100%;
	height:100%;
	border-radius: 0.375rem;
	background-color: transparent;
	border: 0;
	font-size: inherit;
	font-weight: inherit;
	color:var(--text-default);
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}

/* placeholder color */
input::-ms-input-placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
textarea::-ms-input-placeholder,
textarea::-webkit-input-placeholder,
textarea::-moz-placeholder { 
	color: var(--input-placeholder);
	opacity: 1;
}

.custom-input {
	position: relative;
	width: 100%;
	height: 5.625rem;
	border: 1px solid var(--border-input);
	border-radius: 0.375rem;
	font-size: var(--font-size-28);
	overflow: hidden;
}

.custom-input select {
	font-size: var(--font-size-28);
	color: var(--text-default);
}

.custom-input select option[value=""][disabled] {
	display: none;
}

.custom-input a {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* 240715 접근성 수정 */
.custom-input.custom-arrow {
	position: relative;
	overflow: visible;
}

.custom-input.custom-arrow::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: 1.875rem;
	margin-top: -0.438rem;
	width: 1.5rem;
	height: 0.875rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-image: url('../img/i-arrow.png');
}

.custom-input.custom-arrow.top::after {
	transform: rotate(180deg);
}

/* 240531 추가 */
.custom-input input[readonly] {
	background-color: var(--bg-modal);
	color: var(--input-placeholder);
}

/* checkbox */

.custom-checkbox {
	cursor: pointer;
    display: block;
    width: fit-content;
}

.custom-checkbox input + span {
	position: relative;
    display: inline-block;
    padding-left: 3.125rem;
	font-weight: var(--font-w-semibold);
	line-height: 2.25rem;
}

/* 240715 접근성 수정 */
.custom-checkbox input:focus + span,
.custom-checkbox input:focus-visible + span {
	outline: 5px auto -webkit-focus-ring-color;
}

.custom-checkbox input + span::before,
.custom-checkbox input + span::after {
    content: '';
    display: block;
    position: absolute;
}

.custom-checkbox input + span::before {
	top: 0;
    left: 0;
	width: 2.25rem;
	height: 2.25rem;
	background-color: var(--bg-checkbox);
	border-radius: 0.25rem;
}

.custom-checkbox input + span::after {
    top: 0.688rem;
    left: 0.563rem;
    width: 1.188rem;
    height: 0.813rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../img/i-checkbox.png');
}

.custom-checkbox input:checked + span::before {
	background-color: var(--bg-btn);
}

.custom-checkbox input:checked + span::after {
	background-image: url('../img/i-checkbox_act.png');
}

.custom-checkbox.round input + span::before {
	border-radius: 100%;
}

.custom-input .custom-checkbox {
	margin: 1.625rem 1.875rem;
    margin-right: 3.375rem;
}


/* ============== modal ==============  */

.modal{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    z-index: -1000;
}

.modal.show {
	z-index: 1050;
}

.modal .modal-overlay {
    width: 100%;
    height: 100%;
    background-color: var(--modal-bg-overlay);
}

.modal .modal-content {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	padding: var(--main-p);
    background-color: var(--white);
	border-radius: 1.875rem 1.875rem 0 0;
	transform: translateY(100%);
	transition: 0.3s 0.3s transform;
}

.modal .modal-content .btn-modal-close {
	width: 100%;
	height: 7.5rem;
	background-color: var(--bg-btn);
	border-radius: 0.375rem;
	font-size: var(--font-size-32);
	font-weight: var(--font-w-semibold);
	color: var(--white);
}

.modal .custom-checkbox input + span {
	padding-left: 4rem;
	line-height: 2.75rem;
}

.modal .custom-checkbox input + span::before {
	width: 2.75rem;
	height: 2.75rem;
}
.modal .custom-checkbox input + span::after {
	top: 0.875rem;
	left: 0.625rem;
	width: 1.5rem;
	height: 1rem;
}

/* ============== skipNav ============== */

#skipNav{
	position:relative;
	z-index:9999;
}
#skipNav a{
	position: absolute;
	top: -200px;
	left:0;
	width: 100%;
	background-color: var(--white);
	font-size: var(--font-size-12);
	font-weight: var(--font-w-semibold);
	line-height: 30px; 
	color: var(--text-default);
	text-align: center;
}
#skipNav a:focus, 
#skipNav a:active{ top: 0;}

/* ============== header ============== */

.header {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 var(--main-p);
	height: 7.188rem;
}
.header .header-inner {
	width: 100%;
}

.header .header-inner h1 {
	width: 100%;
	font-size: var(--font-size-36);
	font-weight: var(--font-w-bold);
}

.header .header-inner .btn-close {
	position: absolute;
	top: 50%;
    right: var(--main-p);
	width: 1.75rem;
	height: 1.688rem;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='30px' height='29px'%3E%3Cpath fill-rule='evenodd' fill='rgb(38, 38, 38)' d='M29.037,25.917 L26.959,28.080 L14.998,16.579 L3.037,28.080 L0.958,25.917 L12.834,14.499 L0.958,3.080 L3.037,0.917 L14.998,12.418 L26.959,0.917 L29.037,3.080 L17.162,14.499 L29.037,25.917 Z'/%3E%3C/svg%3E");
	transform: translateY(-50%);
}

/* ============== footer ============== */

/* 240531 수정 */
.footer {
	padding: 0 var(--main-p);
	padding-top: 1.875rem;
	text-align: center;
}

.footer .custom-arrow {
	margin-bottom: 1.875rem;
}

.footer .footer-txt {
	line-height: 1;
}

.footer .footer-btn {
	margin-top: 1.875rem;
	padding: 0 9.375rem;
	width: 100%;
	height: 11.875rem;
	border-radius: 2rem;
	background-color: var(--bg-btn);
	color: var(--white);
}

.footer .footer-btn:disabled {
	background-color: var(--bg-btn-disabled);
}

.footer .footer-btn > span {
	display: block;
	font-size: var(--font-size-24);
	line-height: 1.2;
}

.footer .footer-btn .footer-txt-name {
	width:100%;
	font-size: var(--font-size-30);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.footer .footer-btn .footer-txt-price {
	font-size: var(--font-size-40);
	font-weight: var(--font-w-light);
}
.footer .footer-btn .footer-txt-price b {
	font-size: var(--font-size-50);
}

.footer .footer-address {
	color: var(--text-footer);
	line-height: 4.25rem;
}

/* 약관 팝업 */

.all-checkbox {
	height: 6.25rem;
	background-color: var(--bg-modal);
	border-color: var(--bg-modal);
	border-radius: 1rem;
}

.all-checkbox .custom-checkbox {
	margin: 0;
	padding: 0 1.875rem;
	width: 100%;
	border-radius: 0.375rem;
	font-size: var(--font-size-32);
    line-height: 6.25rem;
}

.checkbox-list {
	margin: 2.875rem 0;
}

.checkbox-list li {
	position: relative;
	margin-bottom: 2.5rem;
	padding: 0 1.25rem;
}

.checkbox-list li:last-of-type {
	margin-bottom: 0;
}

.checkbox-list .custom-checkbox {
	position: relative;
	z-index: 1;
}

.checkbox-list .custom-checkbox input + span {
	font-weight: var(--font-w-normal);
}

.checkbox-list li a {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.checkbox-list li a::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	width: 0.75rem;
	height: 1.375rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url('../img/i-arrow-r.png');
	transform: translateY(-50%);
}


/* ============== main ============== */

#main {
	padding: 0 var(--main-p);
}

#main section {
	margin-bottom: 1.875rem;
}

#main section:last-child {
	margin-bottom: 0;
}

/* 아이콘 */
.i-point,
.i-interest {
	display: inline-block;
	width: 1.875rem;
	border-radius: 0.5rem;
	font-style: normal;
	font-size: var(--font-size-16);
	font-weight: var(--font-w-bold);
	line-height: 1.875rem;
	color: var(--white);
	text-align: center;
}

.i-point {
	background-color: #222a8f;
}

.i-interest {
	background-color: #f55914;
}

/* 리스트 */
/* 기본 레이아웃 (한줄 3개) */
.list-style-01 {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -0.5rem -1rem;
}

.list-style-01 li {
	flex: 0 0 33.3333%;
	margin-bottom: 1rem;
	padding: 0 0.5rem;
}

.list-style-01 li > * {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 5.625rem;
	border: 1px solid var(--border-input);
	border-radius: 0.375rem;
	font-size: var(--font-size-26);
	color: var(--input-placeholder);
	text-align: center;
}

/* 240531 수정 */
.list-style-01 li.act > * {
	border-width: 1px;
	font-weight: var(--font-w-bold);
	border-color: var(--bg-btn);
	color: var(--text-default);
	z-index: 1;
}

.list-style-01 li.w-100 {
	flex: 0 0 100%;
}

/* 붙어있는 스타일 */

.list-style-01.list-style-02 {
	display: block;
	margin: 0;
	padding-left: 1px;
	width: calc(100% + 4px);
}

.list-style-01.list-style-02::after {
	content: "";
	display: block;
	clear: both;
}

.list-style-01.list-style-02 li {
	float: left;
	width: 25%;
	margin-top: -1px;
	margin-left: -1px;
	margin-bottom: 0;
	padding: 0;
}

.list-style-01.list-style-02 li > * { 
	border-radius: 0;
}

.list-style-01.list-style-02 > li:first-child > *{
	border-radius: 0.625rem 0 0 0;
}

.list-style-01.list-style-02 > li:nth-child(4) > * {
	border-radius: 0 0.625rem 0 0;
}

.list-style-01.list-style-02 > li:nth-last-child(4) > * {
	border-radius: 0 0 0 0.625rem;
}

.list-style-01.list-style-02 > li:last-child > * {
	border-radius: 0 0 0.625rem 0;
}

/* 결제 수단 리스트 */
.pay-list > li {
	overflow: hidden;
}

.pay-list > li button {
	background-position: center center;
	background-repeat: no-repeat;
}

.pay-list li.pay-item-01 button {
	background-size: 5.438rem 1.625rem;
	background-image: url('../img/img-kakaopay.png');
}

.pay-list li.pay-item-02 button {
	background-size: 6.438rem 1.438rem;
	background-image: url('../img/img-payco.png');
}

.pay-list li.pay-item-03 button {
	background-size: 10rem 1.438rem;
	background-image: url('../img/img-samsung.png');
}

.pay-list li.pay-item-04 button {
	background-size: 6.813rem 2.063rem;
	background-image: url('../img/img-toss.png');
}

/* 241017 수정 */
.pay-list li.pay-item-05 button {
	background-size: 6.375rem 2.25rem;
	background-image: url('../img/img-skpay.png');
}

.pay-list li.pay-item-06 button {
	background-size: 5.375rem 1.875rem;
	background-image: url('../img/img-lpay.png');
}

/* 240805 수정 */
.pay-list li.pay-item-07 button {
	background-size: 6.25rem 2.25rem;
	background-image: url('../img/img-npay.png');
}

/* 카드 종류 결재 리스트 */

/* 241128 수정 */
.list-style-01.visible-none li:nth-child(4n+9) > * {
	border-radius: 0 0 0 0.375rem;
}

.list-style-01 li.hidden-pay {
	display: none;
}

.list-style-01 li .btn-card-add i {
	display: inline-block;
	margin-left: 0.75rem;
	width: 0;
	height: 0;
	border-top: 0.438rem solid var(--input-placeholder);
	border-bottom: 0 solid transparent;
	border-left: 0.313rem solid transparent;
	border-right: 0.313rem solid transparent;
	vertical-align: middle;
	transition: transform 0.2s;
}

.list-style-01 li:hover .btn-card-add i,
.list-style-01 li:focus .btn-card-add i,
.list-style-01 li:active .btn-card-add i {
	border-top-color: var(--black);
}

.list-style-01 li .btn-card-add.act i {
	transform: rotate(180deg);
}

.list-style-01 .i-point,
.list-style-01 .i-interest {
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 0;
}

/* 카드 아이콘 리스트 */

.pay-icon-box {
	margin-bottom: 0.625rem;
	text-align: right;
}

.pay-icon-box p {
	display: inline-block;
	font-size: var(--font-size-22);
	line-height: 1.875rem;
	color: var(--input-placeholder);
}
.pay-icon-box > p + p {
	margin-left: 1.875rem;
}

.pay-icon-box p i {
	margin-right: 0.563rem;
}

/* 현금영수중 체크박스 */
.receipt-box {
	display: none;
}

.receipt-box.show {
	display: block;
}

/* s :: 240531 수정 */
.receipt-box .toggle-list {
	margin-top: 1.25rem;
}

.receipt-box .toggle-list li {
	width: 33.3333%;
}

.receipt-box .toggle-list li {
	width: 33.3333%;
}

.receipt-box .toggle-list li:first-child > * {
	border-radius: 0.375rem 0 0 0.375rem;
}

.receipt-box .toggle-list li:last-child > * {
	border-radius: 0 0.375rem 0.375rem 0;
}

.receipt-box > div {
	margin-top: 1.25rem;
}

.receipt-box .custom-input.custom-arrow {
	margin-bottom: 1.25rem;
}

.receipt-box .inline-list {
	margin-bottom: 0;
}

.receipt-box .inline-list p {
	margin: 0 1.25rem;
	font-size: var(--font-size-28);
	color: var(--input-placeholder);
}

/* e :: 240531 수정 */


/* 에스크 입력 폼 */
.escrow-box {
	margin-bottom: 1.25rem;
}
.escrow-box h2 {
	margin-bottom: 1.25rem;
	font-size: var(--font-size-30);
	font-weight: var(--font-w-bold);
	line-height: 1;
}


/* 상단에 위치한 결제정보 */
.purchase-info {
	padding: 2.25rem 1.75rem;
	border: 1px solid var(--border-box);
	border-radius: 0.563rem;
	line-height: 1;
}

.purchase-info p + p {
	margin-top: 1.25rem;
}

.purchase-info .purchase-tit {
	font-size: var(--font-size-32);
	font-weight: var(--font-w-bold);
}

.purchase-info .purchase-txt {
	font-size: var(--font-size-22);
}

.purchase-info .purchase-price {
	font-size: var(--font-size-26);
	letter-spacing: -0.025em;
}
.purchase-info .purchase-price span {
	font-size: var(--font-size-40);
	font-weight: var(--font-w-bold);
}

/* 하이픈이 있는 input */

.input-form {
	display: flex;
	align-items: center;
	padding: 0 2.5rem;
}

.input-form > *:first-child {
	position: relative;
	flex: 0 0 auto;
	width: 8.5rem;
	margin-right: 2.5rem;
}

.input-form > *:first-child::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 1.875rem;
	background-color: var(--border-input);
	transform: translateY(-50%);
}

.input-form > *:first-child + .row input { 
	padding: 0;
	text-align: center;
}

.input-form > *:first-child + input {
	padding: 0;
}

.input-form .custom-input.custom-arrow {
	border: none;
	width: 33.3333%;
}

.input-form .row {
	display: flex;
	align-items: center;
}

.input-form .row.input-validity .col {
	flex: 0 0 auto;
	color: var(--input-placeholder);
}

.input-form .row.input-validity .col input {
	padding: 0;
	width: 2.875rem;
}

.inline-list {
	display: flex;
	align-items: center;
	margin-bottom: 1.875rem;
}

.inline-list li + li {
	margin-left: 3.125rem;
}

.inline-list .custom-checkbox input + span {
	font-weight: var(--font-w-normal);
}

/* isp 설치 */

.isp-box {
	padding-top: 2.75rem;
	font-size: var(--font-size-26);
	text-align: center;
	color: var(--bg-btn);
}

.isp-box h1 {
	margin-bottom: 6.875rem;
	font-size: var(--font-size-32);
	font-weight: var(--font-w-bold);
	line-height: 1;
}

.isp-box p {
	line-height: 2.25rem;
}

.isp-box p span {
	font-weight: var(--font-w-bold);
}

.isp-box .btn-isp {
	margin: 3.438rem 0;
	width: 31.25rem;
	height: 6.25rem;
	background-color: var(--red);
	border-radius: 0.625rem;
	font-size: var(--font-size-32);
	font-weight: var(--font-w-bold);
	color: var(--white);
}

.isp-btn-box {
	display: flex;
	justify-content: space-between;
}
.isp-btn-box button {
	height: 6.25rem;
	border-radius: 0.625rem;
	font-size: var(--font-size-32);
}

.isp-btn-box .btn-cancle {
	width: 13.75rem;
	background-color: var(--bg-isp);
	color: var(--black);
}

.isp-btn-box .btn-payment {
	width: 25.625rem;
	background-color: var(--bg-btn);
	font-weight: var(--font-w-bold);
	color: var(--white);
}

.isp-btn-box + .footer-address {
	line-height: 5rem;
}

.resele-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.125rem;
}

.resele-box h2 {
	font-size: var(--font-size-30);
	font-weight: var(--font-w-bold);
}

.resele-box .btn {
	width: 9.375rem;
	height: 3.125rem;
	background-color: var(--bg-btn);
	border: 1px solid var(--border-btn-02);
	border-radius: 0.375rem;
	font-size: var(--font-size-24);
	color: var(--white);
}

/* 로딩 페이지 */

.loading {
	position:fixed;
	left:0px;
	top:0px;
	display: flex;
	justify-content: center;
	align-items: center;
	width:100vw;
	height: calc(var(--vh, 1vh) * 100);
	background: var(--modal-bg-overlay);
	text-align: center;
	color: #fff;
	z-index:1000;
}

.loading img {
	display: block;
	margin-bottom: 1rem;
	width: 10rem;
	height: 10rem;
}

/* 에러 페이지 */
/* 240416 추가 */

.error {
	display: flex;
	flex-direction: column;
}

.error .error-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 100%;
}

.error .error-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 100%;
	color: #262626;
}

.error .error-content h2 {
	font-size: var(--font-size-32);
	font-weight: var(--font-w-bold);
	text-align: center;
}

.error .error-content p {
	margin-top: 2rem;
	margin-bottom: 3.125rem;
	font-size: var(--font-size-28);
}

.error .error-content .btn {
	margin: 0 auto;
	min-width: 25.625rem;
	height: 6.25rem;
	background-color: #262626;
	border-radius: .625rem;
	color: var(--white);
}

/* 240531 추가 */

/* ============== tab ==============  */

.tab-content .tab-pane {
    display: none;
}
.tab-content .tab-pane.act {
    display: block;
}

.hide {
	display: none;
}

/* 240605 추가 */
h2.page-tit {
	position: relative;
	margin-bottom: 2.5rem;
	font-size: var(--font-size-34);
	font-weight: var(--font-w-bold);
	letter-spacing: -0.025em;
	line-height: 5.625rem;
}

h2.page-tit::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	height: 100%;
	background-color: #f6f6f6;
	z-index: -1;
	transform: translateX(-50%);
}

h2.page-tit::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	height: 1px;
	background-color: var(--border-input);
	transform: translateX(-50%);
}


/* 240805 수정 */
.npay-box h2 {
	margin-bottom: 1.25rem;
	font-weight: var(--font-w-bold);
	font-size: var(--font-size-28);
	color: var(--bg-btn);
}
.npay-box > .list-style-01 li {
	margin-bottom: 2.5rem;
	width: 50%;
}
.npay-box > .list-style-01 li:first-child button {
	border-radius: 0.625rem 0 0 0.625rem;
}
.npay-box > .list-style-01 li:last-child button {
	border-radius: 0 0.625rem 0.625rem 0;
}
.npay-box .receipt-box {
	display: block;
}
.npay-box .receipt-box p:first-child {
	margin-bottom: 1.5625rem;
	font-size: var(--font-size-28);
	font-weight: var(--font-w-semibold);
}

.keyboard--on body {
	position: fixed;
}
.keyboard--on .dim {
	opacity: 1;
	pointer-events: initial;
}


/* @media (max-width: 434px) {
	html {
		font-size: 0.5rem;
	}
} */


#make-scrollable {
	position: absolute;
	left: 0;
	width: 1px;
	height: calc(100% + 1px); 
	/* 100% 보다 1px 높게 하여 .wrap scroll 발생하도록 */
}