/* 버튼 공통 */
button[type='button'] {
	text-align: center;
	border: none;
	height: 42px;
	border-radius: 27px;
	font-weight: 500;
	font-size: 14px;
}

button[type='button'].blackBtn {
	background-color: #222222;
	color: #ffffff;
}

.blackBtn {
	text-align: center;
	border: none;
	height: 42px;
	border-radius: 27px;
	font-weight: 500;
	font-size: 14px;
	line-height: 42px;
	background-color: #222222;
	color: #ffffff;
}
.whitebtn {
	text-align: center;
	border: none;
	height: 42px;
	border-radius: 27px;
	font-weight: 500;
	font-size: 14px;
	line-height: 42px;
	background-color: transparent;
	border: 1px solid #dddddd;
	color: #222222;
}

button[type='button'].whitebtn {
	background-color: transparent;
	border: 1px solid #dddddd;
	color: #222222;
}

button[type='button'].w-100 {
	width: 100%;
}

button[type='button'].w-162 {
	width: 162px;
}

button[type='button'].w-88 {
	width: 88px;
}

.popup img {
	width: 100%;
}

/* input 공통 */
.popup {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	top: 0;
	left: 0;
	color: #222222;
	z-index: 99999999;
	font-family: Spoqa Han Sans Neo;
	/* display: none; */
	overflow-y: auto;
}
.popup::-webkit-scrollbar {
	display: none;
}

.my-popup {
	display: none;
}
.popup.on {
	display: block;
}

.popup input[type='text'] {
	width: 100%;
	height: 47px;
	padding-left: 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.popup .popup-box .popup-cont {
	padding: 30px;
}

/* 팝업 내 콘텐츠 영역 가운데 정렬일 때 */
.popup .popup-cont.center {
	text-align: center;
}

/* 팝업 콘텐츠 영역 */
.popup .popup-box {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #ffffff;
	width: 320px;
	border-radius: 15px;
}

/* 팝업 사이즈 360일때 */
.popup .popup-box.w-360 {
	width: 360px;
}

.popup .popup-box.w-360 .popup-cont {
	padding: 46px 30px 40px;
}

.popup .popup-box.bottom .popup-cont.pd-30 {
	padding: 30px;
	padding-bottom: 40px;
}

.popup .popup-box.w-360 .popup-cont.pd-30 .button-wrap {
	margin-top: 0;
}

.popup .popup-box.w-360 .popup-cont.pd-30 .popup-tit {
	margin-bottom: 26px;
}
.popup .popup-box .popup-cont .popup-icon {
	margin-bottom: 20px;
}

.popup .popup-box .popup-cont.center .popup-icon {
	height: 42px;
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.popup .popup-box .popup-icon .icon-box {
	width: 42px;
}

.popup .popup-box .popup-icon img {
	width: 100%;
}

/* 팝업 타이틀 */
.popup-tit {
	font-weight: 700;
	font-size: 15px;
	line-height: 22.5px;
}

/* 팝업 타이틀 폰트 사이즈 */
.popup-tit.fs-18 {
	font-size: 18px;
}

.popup-tit.fs-20 {
	font-size: 20px;
}

/* 팝업 타이틀 + 텍스트 */
.popup .popup-box .popup-txt {
	margin-top: 8px;
	color: #999999;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
}
.popup .popup-box .fs-14 {
	font-size: 14px;
}
/* 팝업 타이틀 + 텍스트 (모바일에서 바텀 시트 아닐 경우) */
.popup .popup-box .popup-txt.fs-13 {
	font-size: 13px;
}
.popup .popup-box .popup-noti {
	border-radius: 4px;
	background: #fafafb;
	padding: 16px;
}
.popup .popup-box .popup-noti h2 {
	color: #222;
	font-family: 'Spoqa Han Sans Neo';
	font-size: 13px;
	font-weight: 700;
	line-height: 150%;
	letter-spacing: -0.26px;
	margin-bottom: 14px;
}
.popup .popup-box .popup-noti .popup-line {
	border-top: 1px solid red;
	margin: 12px 0;
}

/* 팝업 질문 */
.popup .popup-box .popup-quest {
	font-size: 13px;
	margin-top: 8px;
}

/* 팝업 텍스트 + 붙임말 */
.popup .popup-box .popup-post {
	font-size: 12px;
	font-weight: 400;
	color: #999999;
	margin-top: 12px;
}

/* 팝업 라인 */
.popup .popup-box .line {
	width: 100%;
	height: 1px;
	background-color: #eeeeee;
	margin-top: 22px;
}

/* 팝업 리스트 */
.popup .popup-box .popup-list {
	margin-top: 18px;
	font-size: 14px;
	font-weight: 500;
	color: #999999;
}

/* 팝업 주문번호 */
.popup .popup-box .order-num {
	border: 1px solid #ddd;
	border-radius: 50px;
	font-size: 12px;
	font-weight: 400;
	margin-top: 16px;
	color: #666;
	display: inline-block;
	padding: 7px 20px;
}

.popup .popup-box .order-num span {
	margin-left: 6px;
}
.popup .popup-box .popup-list ul li {
	padding-left: 21px;
	position: relative;
	margin-bottom: 8px;
}

.popup .popup-box .popup-list ul li:before {
	position: absolute;
	content: '';
	top: 50%;
	left: 8px;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #999999;
}

.popup .popup-box .popup-list ul li:last-child {
	margin-bottom: 0;
}

/* 팝업 계좌 */
.popup .popup-box .popup-gray {
	background-color: #f8f8f8;
	height: 52px;
	border-radius: 6px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 15px 0 16px;
	font-size: 12px;
	font-weight: 500;
	color: #333;
	margin-top: 12px;
}

.popup .popup-box .popup-gray span {
	text-decoration: underline;
	cursor: pointer;
}

.popup .popup-box .popup-gray button.copy {
	font-size: 10px;
	font-weight: 400;
	color: #555;
	width: 55px;
	height: 22px;
	border: 1px solid #555;
	border-radius: 11px;
}
/* 공유하기 팝업 */
.popup .popup-box .popup-share {
	margin-top: 24px;
	margin-bottom: 18px;
}

.popup .popup-box .popup-share .share-type {
	display: flex;
	justify-content: space-between;
}
.popup .popup-box .popup-share .share-type li {
	width: 41px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.popup .popup-box .popup-share .share-type li .type-icon {
	width: 40px;
}
.popup .popup-box .popup-share .share-type li .type-icon img {
	width: 100%;
}

.popup .popup-box .popup-share .share-type li span.type-tit {
	font-size: 9px;
	font-weight: 400;
	color: #444444;
	width: 100%;
	display: block;
	text-align: center;
	letter-spacing: -1px;
}

.popup .popup-box .popup-share + .popup-url input[type='text'] {
	width: 100%;
	height: 42px;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding-left: 14px;
	font-size: 13px;
	font-weight: 400;
}

/* 토스트 박스 있는 경우 */
.popup .popup-box .toast-box {
	position: absolute;
	top: calc(100% + 24px);
	left: 50%;
	transform: translateX(-50%);
	padding: 8px 20px;
	height: 34px;
	background-color: rgba(34, 34, 34, 0.76);
	border-radius: 50px;
}
.popup .popup-box .toast-box .toast-txt {
	line-height: 18px;
	color: #ffffff;
}

/* 팝업 버튼 */
.popup .popup-box .button-wrap {
	margin-top: 26px;
	display: flex;
	justify-content: space-between;
}

/* 버튼 width:100% 위 아래 정렬일 때 */
.popup .popup-box .button-wrap.column {
	flex-direction: column;
	row-gap: 10px;
}

/* 팝업 사이즈 440일 때 (쿠폰 형식) */
.popup .popup-box.w-440 {
	width: 440px;
}
.popup .popup-box.h-780 {
	height: 780px;
}

.popup .popup-box.w-440 .popup-cont {
	padding: 0;
}

.popup .popup-box.w-440 .coupon-top {
	position: sticky;
	width: 100%;
	height: 74px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #eeeeee;
	background-color: #fff;
	border-radius: 15px 15px 0 0;
}

.popup .popup-box.w-440 .coupon-top .close-btn {
	position: absolute;
	left: 20px;
	max-width: 30px;
	cursor: pointer;
}

.popup .popup-box.w-440 .coupon-top .close-btn img {
	width: 100%;
}

.popup .popup-box.w-440 .coupon-top .coupon-title {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: 18px;
	font-weight: 500;
	min-width: 252px;
	text-align: center;
}

.popup .popup-box.w-440 .coupon-cont {
	padding: 20px 20px 28px 20px;
	height: 540px;
	overflow-y: auto;
}
.popup .popup-box.w-440 .coupon-cont .accoun-list {
	overflow-y: auto;
	height: 343px;
}
.popup .popup-box.w-440 .coupon-cont::-webkit-scrollbar {
	display: none;
}
.popup .popup-box.w-440 .coupon-cont .accoun-list::-webkit-scrollbar {
	display: none;
}

.popup .popup-box.w-440 .coupon-cont::-webkit-scrollbar {
	display: none;
}

/* 적립금 내역 */
.popup .popup-box.w-440 .popup-cont.save .coupon-top {
	border-bottom: none;
}

.popup .popup-box.w-440 .popup-cont.save .coupon-top .coupon-title {
	font-weight: 500;
}

.popup .popup-box.w-440 .popup-cont.save .coupon-cont {
	padding-top: 11px;
}

.popup .popup-box.w-440 .popup-cont.save .coupon-cont .total-account {
	background-color: #f9f9f9;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 20px 20px 19px;
	border-radius: 16px;
	margin-bottom: 26px;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.total-account
	.total-left {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
	color: #444;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.total-account
	.total-left
	.img-box {
	width: 16px;
	height: 16px;
	margin-right: 5px;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.total-account
	.total-left
	.img-box
	img {
	width: 100%;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.total-account
	.total-right {
	color: #000;
	font-size: 13px;
	font-weight: 700;
}

.popup .popup-box.w-440 .popup-cont.save .coupon-cont .accoun-list ul li {
	border-bottom: 1px solid #eee;
	padding: 18px 0;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.accoun-list
	ul
	li:first-of-type {
	padding-top: 0;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.accoun-list
	ul
	li:last-of-type {
	padding-bottom: 0;
	border-bottom: none;
}

.popup .popup-box.w-440 .popup-cont.save .coupon-cont .accoun-list ul li div {
	display: flex;
	justify-content: space-between;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.accoun-list
	ul
	li
	div:first-child {
	margin-bottom: 5px;
	font-size: 14px;
}
.popup .popup-box.w-440 .popup-cont.save .coupon-cont .accoun-list ul li div p {
	font-weight: 500;
	color: #555;
}
.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.accoun-list
	ul
	li
	div
	p.minus {
	color: #f33f3f;
	font-weight: 700;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.accoun-list
	ul
	li
	div
	p.plus {
	color: #000;
	font-weight: 700;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.accoun-list
	ul
	li
	div
	.date {
	font-size: 12px;
	font-weight: 400;
	color: #999;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.accoun-list
	ul
	li
	div
	.change {
	font-size: 12px;
	font-weight: 400;
	color: #999;
}

.popup .popup-box.w-440 .popup-cont.save .coupon-cont .more-btn {
	margin: 40px 0 20px 0;
	text-align: center;
}

.popup .popup-box.w-440 .popup-cont.save .coupon-cont .more-btn button {
	height: 30px;
	font-size: 12px;
	font-weight: 400;
	width: 108px;
	border: 1px solid #bbb;
	border-radius: 4px;
	color: #666;
}

/* 인원수 선택 */
.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.volume-box
	input[type='number']::-webkit-outer-spin-button,
.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.volume-box
	input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.popup .popup-box.w-440 .popup-cont.save .coupon-cont.padding-30 {
	padding-left: 30px;
	padding-right: 30px;
	margin-bottom: 20px;
}

.popup .popup-box.w-440 .popup-cont.save .coupon-cont .volume-box {
	margin-bottom: 19px;
}

.popup .popup-box.w-440 .popup-cont.save .coupon-cont .volume-box .volume-list {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.volume-box
	.volume-list
	p {
	font-size: 16px;
	font-weight: 500;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.volume-box
	.volume-list:first-of-type {
	margin-bottom: 16px;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.volume-box
	.volume-list
	.input-group {
	display: flex;
	border: 1px solid #ddd;
	border-radius: 4px;
	width: 92px;
	justify-content: center;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.volume-box
	.volume-list
	.input-group
	input {
	border: none;
	padding: 0;
	text-align: center;
	background-color: transparent;
	height: 28px;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.volume-box
	.volume-list
	.input-group
	.button-minus,
.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.volume-box
	.volume-list
	.input-group
	.kids-button-minus {
	background: url(/images/popup/ic_minus.png) no-repeat center center;
	background-size: 16px;
	cursor: pointer;
	width: 16px;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.volume-box
	.volume-list
	.input-group
	.button-plus,
.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.volume-box
	.volume-list
	.input-group
	.kids-button-plus {
	background: url(/images/popup/ic_plus.png) no-repeat center center;
	background-size: 16px;
	cursor: pointer;
	width: 16px;
}

.popup
	.popup-box.w-440
	.popup-cont.save
	.coupon-cont
	.volume-box
	.volume-list
	.input-group
	input.quantity-field {
	font-size: 14px;
	font-weight: 500;
	width: 40px;
}

.popup .popup-box.w-440 .popup-cont.save .coupon-cont .post-txt {
	font-size: 13px;
	font-weight: 500;
	color: #999;
	line-height: 19.5px;
}

/* 중복쿠폰 */
.popup .popup-box.w-440 .coupon-cont.pd-30 {
	padding: 0;
	margin-top: 30px;
	height: unset;
}

.popup .popup-box.w-440 .coupon-cont .cont-title {
	margin-bottom: 20px;
	font-size: 15px;
	font-weight: 700;
}

.popup .popup-box.w-440 .coupon-cont .cont-list .list-wrap {
	margin-bottom: 20px;
}

.popup .popup-box.w-440 .coupon-cont .cont-list .list-wrap:last-of-type {
	margin-bottom: 0;
}

.popup .popup-box.w-440 .coupon-cont .cont-list .list-wrap .coupon-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

.popup
	.popup-box.w-440
	.coupon-cont
	.cont-list
	.list-wrap
	.coupon-box
	.coupon-left {
	padding: 30px 20px 22px 20px;
	width: calc(100% - 42px);
	border-right: 1px dashed #dddddd;
}

.popup
	.popup-box.w-440
	.coupon-cont
	.cont-list
	.list-wrap
	.coupon-box
	.coupon-left
	.big-tit {
	font-size: 22px;
	font-weight: 700;
}

.popup
	.popup-box.w-440
	.coupon-cont
	.cont-list
	.list-wrap
	.coupon-box
	.coupon-left
	.coupon-desc {
	margin: 10px 0;
	font-weight: 500;
}

.popup
	.popup-box.w-440
	.coupon-cont
	.cont-list
	.list-wrap
	.coupon-box
	.coupon-left
	.coupon-desc
	p {
	font-size: 14px;
	margin-bottom: 10px;
}

.popup
	.popup-box.w-440
	.coupon-cont
	.cont-list
	.list-wrap
	.coupon-box
	.coupon-left
	.coupon-desc
	span {
	font-size: 12px;
	color: #aaaaaa;
}
.popup
	.popup-box.w-440
	.coupon-cont
	.cont-list
	.list-wrap
	.coupon-box
	.coupon-left
	.gray-background {
	background-color: #f8f8f8;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 36px;
	padding: 10px;
	font-size: 12px;
	font-weight: 500;
	color: #666666;
}

.popup
	.popup-box.w-440
	.coupon-cont
	.cont-list
	.list-wrap
	.coupon-box
	.coupon-right {
	width: 42px;
	display: flex;
	justify-content: center;
}

.popup
	.popup-box.w-440
	.coupon-cont
	.cont-list
	.list-wrap
	input[type='checkbox'] {
	appearance: none;
	-webkit-appearance: none;
	width: unset;
	height: unset;
	border-radius: unset;
	color: unset;
	border: none;
	padding-left: unset;
	display: none;
}

.popup
	.popup-box.w-440
	.coupon-cont
	.cont-list
	.list-wrap
	input[type='checkbox']
	+ label {
	border: 1px solid #dddddd;
	border-radius: 10px;
	display: block;
}

.popup
	.popup-box.w-440
	.coupon-cont
	.cont-list
	.list-wrap
	input[type='checkbox']:checked
	+ label {
	border: 1px solid #000;
}

.popup
	.popup-box.w-440
	.coupon-cont
	.cont-list
	.list-wrap
	input[type='checkbox']
	+ label
	.custom-btn {
	width: 22px;
	height: 22px;
	border: 2px solid #ddd;
	border-radius: 50%;
	position: relative;
}

.popup
	.popup-box.w-440
	.coupon-cont
	.cont-list
	.list-wrap
	input[type='checkbox']
	+ label
	.custom-btn:after {
	position: absolute;
	content: '';
	width: 10px;
	height: 10px;
	background-color: #eeeeee;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
}

.popup
	.popup-box.w-440
	.coupon-cont
	.cont-list
	.list-wrap
	input[type='checkbox']:checked
	+ label
	.custom-btn {
	border: 2px solid #f8b62d;
}

.popup
	.popup-box.w-440
	.coupon-cont
	.cont-list
	.list-wrap
	input[type='checkbox']:checked
	+ label
	.custom-btn:after {
	background-color: #f8b62d;
}

/* .popup .popup-box.w-440 .coupon-cont .cont-list .list-wrap .coupon-box input[type='radio']:after {
}

.popup .popup-box.w-440 .coupon-cont .cont-list .list-wrap .coupon-box input[type='radio']:checked {
    border-color: #F8B62D;
}

.popup .popup-box.w-440 .coupon-cont .cont-list .list-wrap .coupon-box input[type='radio']:checked:after {
    background-color: #F8B62D;
} */

.popup .popup-box.w-440 .coupon-line {
	/* width: 100vw; */
	height: 8px;
	background-color: #eee;
	margin-top: 30px;
	margin: 30px -20px 0 -20px;
	/* transform: translateX(-20px); */
}

/* 환불계좌 */
.popup .popup-box.w-440 .coupon-cont.pd-28 {
	padding: 28px 20px 50px 20px;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .tit {
	font-size: 18px;
	font-weight: 700;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .cont-form {
	padding-top: 6px;
}
.popup .popup-box.w-440 .coupon-cont.pd-28 .cont-form .form-box {
	margin-bottom: 20px;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .cont-form .form-box:last-child {
	margin-bottom: 0;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 select {
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 4px;
	height: 47px;
	padding-left: 14px;
	appearance: none;
	background: url('/images/popup/ic_arrow01.png') no-repeat center right 14px /
		14px 14px;
	font-size: 15px;
	font-weight: 400;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .cont-form .form-box .input-tit {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 8px;
}

.popup
	.popup-box.w-440
	.coupon-cont.pd-28
	.cont-form
	.form-box
	.input-tit
	+ input {
	color: #222;
	font-size: 15px;
	font-weight: 400;
}

.popup
	.popup-box.w-440
	.coupon-cont.pd-28
	.cont-form
	.form-box
	.input-tit
	+ input::placeholder {
	color: #cacaca;
	font-size: 15px;
}

.popup .popup-box.w-440 .coupon-bottom {
	height: 66px;
	background-color: #cacaca;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	text-align: center;
	padding: 24px 0;
	line-height: 18px;
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	position: sticky;
	width: 100%;
}

/* 쿠폰 하단 버튼 활성화 시 */
.popup .popup-box .coupon-bottom.active {
	background-color: #f8b62d;
}

/* 현금영수증 (개인) */
.popup .popup-box.w-440 .coupon-cont.pd-28 .cont-chk {
	margin-bottom: 20px;
}
.popup .popup-box.w-440 .coupon-cont.pd-28 .cont-chk .chk-tit {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 20px;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .cont-chk .chk-list {
	display: flex;
	margin-bottom: 30px;
}

.popup
	.popup-box.w-440
	.coupon-cont.pd-28
	.cont-chk
	.chk-list
	.list-box:first-of-type {
	margin-right: 31px;
}
.popup .popup-box.w-440 .coupon-cont.pd-28 .cont-chk .chk-list label {
	/* display: flex;
	align-items: center; */
}

.popup
	.popup-box.w-440
	.coupon-cont.pd-28
	.cont-chk
	.chk-list
	input[type='radio'] {
	appearance: none;
	width: 22px;
	height: 22px;
	border: 2px solid #ddd;
	border-radius: 50%;
	position: relative;
	top: 6px;
}

.popup
	.popup-box.w-440
	.coupon-cont.pd-28
	.cont-chk
	.chk-list
	input[type='radio']:after {
	position: absolute;
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #eee;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.popup
	.popup-box.w-440
	.coupon-cont.pd-28
	.cont-chk
	.chk-list
	input[type='radio']:checked {
	border-color: #f8b62d;
}

.popup
	.popup-box.w-440
	.coupon-cont.pd-28
	.cont-chk
	.chk-list
	input[type='radio']:checked:after {
	background-color: #f8b62d;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .cont-chk .chk-list label span {
	margin-left: 6px;
	font-size: 14px;
	font-weight: 500;
}
.popup .popup-box.w-440 .coupon-cont.pd-28 .cont-chk .chk-list label p {
	color: #999;
	font-family: 'Spoqa Han Sans Neo';
	font-size: 12px;
	padding-left: 28px;
	font-weight: 400;
	line-height: 20px;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .cont-chk .input-info p {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 8px;
}
.popup
	.popup-box.w-440
	.coupon-cont.pd-28
	.cont-chk
	.input-info
	input[type='text'] {
	font-size: 15px;
	font-weight: 400;
	height: 47px;
	width: 100%;
	padding: 0 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
}
.popup
	.popup-box.w-440
	.coupon-cont.pd-28
	.cont-chk
	.input-info
	input[type='text']::placeholder {
	color: #cacaca;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .note {
	background-color: #f8f8f8;
	padding: 16px 14px;
	margin-bottom: 20px;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .note .note-tit {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .note .note-tit span {
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	margin-left: 4px;
}
.popup .popup-box.w-440 .coupon-cont.pd-28 .note .icon-box {
	max-width: 14px;
	height: 14px;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .note .info-list li {
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	color: #444;
	position: relative;
	letter-spacing: -0.2px;
	padding-left: 11px;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .note .info-list li:before {
	position: absolute;
	content: '';
	width: 3px;
	height: 3px;
	left: 0px;
	top: 9px;
	border-radius: 50%;
	background-color: #444;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .note .info-list li a {
	color: #0855ec;
	text-decoration: underline;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .agree-chk label {
	display: flex;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .agree-chk input[type='checkbox'] {
	width: 22px;
	height: 22px;
	background: url('/images/popup/btn_checkbox.png') center no-repeat;
	background-size: contain;
	display: inline-block;
	border-radius: 50%;
	appearance: none;
}

.popup
	.popup-box.w-440
	.coupon-cont.pd-28
	.agree-chk
	input[type='checkbox']:checked {
	background: url('/images/popup/btn_checkbox_active.png') center no-repeat;
	background-size: contain;
}

.popup .popup-box.w-440 .coupon-cont.pd-28 .agree-chk label span {
	padding-left: 14px;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
}

/* 현금영수증(사업자) */
.popup .popup-box.w-440 .coupon-cont.pd-28 .cont-chk .input-info select {
	margin-bottom: 8px;
}

/* 동의서 형식 */
.popup .popup-box.w-440 .popup-cont.agreement .coupon-title {
	font-weight: 500;
}

.popup .popup-box.w-440 .popup-cont.agreement .coupon-cont {
	padding: 14px 10px 0 20px;
}

.popup .popup-box.w-440 .popup-cont.agreement .coupon-cont .version-date {
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	color: #666;
	margin-bottom: 30px;
	padding-right: 10px;
}

.popup .popup-box.w-440 .popup-cont.agreement .coupon-cont .cont-title {
	margin-bottom: 24px;
}

.popup .popup-box.w-440 .popup-cont.agreement .coupon-cont .cont-desc {
	height: 551px;
	padding: 0 0 20px 0;
	overflow-y: scroll;
	color: #444;
	padding-right: 10px;
}

.popup
	.popup-box.w-440
	.popup-cont.agreement
	.coupon-cont
	.cont-desc::-webkit-scrollbar {
	width: 2px;
}

.popup
	.popup-box.w-440
	.popup-cont.agreement
	.coupon-cont
	.cont-desc::-webkit-scrollbar-track {
	background: rgb(217, 217, 217, 0.5);
	border-radius: 50px;
}
.popup
	.popup-box.w-440
	.popup-cont.agreement
	.coupon-cont
	.cont-desc::-webkit-scrollbar-thumb {
	background: rgb(34, 34, 34, 0.5);
	border-radius: 50px;
	height: 10%;
}

.popup
	.popup-box.w-440
	.popup-cont.agreement
	.coupon-cont
	.cont-desc
	.desc-mass {
	margin-bottom: 20px;
}

.popup
	.popup-box.w-440
	.popup-cont.agreement
	.coupon-cont
	.cont-desc
	.desc-mass:last-child {
	margin-bottom: 0;
}

.popup
	.popup-box.w-440
	.popup-cont.agreement
	.coupon-cont
	.cont-desc
	.desc-mass
	.number {
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 8px;
}

.popup
	.popup-box.w-440
	.popup-cont.agreement
	.coupon-cont
	.cont-desc
	.desc-mass
	.number
	+ div {
	font-size: 12px;
	font-weight: 400;
	line-height: 19.2px;
}

.popup
	.popup-box.w-440
	.popup-cont.agreement
	.coupon-cont
	.cont-desc
	.desc-mass
	.number
	+ div
	ul
	li {
	position: relative;
	padding-left: 18px;
}

.popup
	.popup-box.w-440
	.popup-cont.agreement
	.coupon-cont
	.cont-desc
	.desc-mass
	.number
	+ div
	ul
	li::before {
	position: absolute;
	content: '';
	top: 7px;
	left: 7.5px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #444;
}

.popup .popup-box.w-440 .popup-cont.agreement .prev-version {
	height: 60px;
	padding-left: 20px;
	font-size: 12px;
	font-weight: 500;
	color: #666;
	text-decoration: underline;
	line-height: 60px;
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: #fff;
	border-radius: 0 0 15px 15px;
}

/* 팝업 슬라이더(가로형) */
.popup .swiper-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 768px;
	height: 462px;
	overflow-x: hidden;
}

.popup .swiper-box .swiper-wrapper {
	width: 768px;
	height: 462px;
}

.popup .swiper-box .swiper-slide {
	background-image: url('/images/popup/slider_img.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	max-width: 768px;
	height: 462px;
}
.swiper-button-prev,
.swiper-button-next {
	width: 52px;
	height: 52px;
	background-size: contain;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
	background-image: url('/images/popup/btn_arrow.png');
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
	background-image: url('/images/popup/btn_arrow_prev.png');
}

/* 팝업 슬라이더(세로형) */
.popup .swiper-box.vertical {
	height: 826px;
}

.popup .swiper-box.vertical .swiper-wrapper {
	height: 826px;
}

.popup .swiper-box.vertical .swiper-wrapper .swiper-slide {
	height: 826px;
	background-size: cover;
	background-position: center center;
}
@media screen and (max-width: 1440px) {
	.popup .popup-box {
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		width: 320px;
		border-radius: 15px;
		max-height: calc(100% - 80px);
		overflow-y: auto;
	}
	.popup .popup-box2 {
		overflow-y: unset;
	}
	.withdraw-wrap .inner-top {
		position: sticky;
		top: 0;
		background-color: #fff;
		height: 74px;
	}
}

/* 미디어쿼리 시작 */
@media screen and (max-width: 768px) {
	/* 반응형 바텀시트 일 때 */
	.popup .popup-box {
		max-height: 100%;
	}
	.popup .popup-box.w-440 .popup-cont.agreement .coupon-cont .cont-desc {
		height: unset;
	}
	.popup .popup-box.w-440 .coupon-cont.pd-28 .cont-chk .chk-list label p {
		font-size: 11px;
	}
	.popup .popup-box.bottom {
		transform: unset;
		top: unset;
		bottom: 0;
		left: 0;
		width: 100%;
		border-radius: 20px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		position: absolute;
	}
	.popup
		.popup-box.w-440
		.popup-cont.agreement
		.coupon-cont
		.cont-desc
		.desc-mass:last-child {
		margin-bottom: 20px;
	}
	.popup .popup-box.bottom .popup-cont {
		max-width: 360px;
		margin: 0 auto;
	}

	.popup .popup-box .toast-box {
		/* top: unset;
		bottom: 90px; */
	}

	.popup .popup-box.w-440 .popup-cont.save .coupon-cont.padding-30 {
		padding-left: 20px;
		padding-right: 20px;
		margin-bottom: 20px;
	}
	.popup
		.popup-box.w-440
		.popup-cont.save
		.coupon-cont
		.volume-box
		.volume-list
		p {
		font-size: 14px;
	}

	.popup .popup-box.w-440 .popup-cont.save .coupon-cont .post-txt {
		font-size: 12px;
	}

	/* 반응형 풀 페이지 일 때 */
	.popup .popup-box.full {
		width: 100%;
		height: 100%;
		border-radius: 0;
		position: unset;
		transform: unset;
	}

	.popup .popup-box.full .coupon-bottom {
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}

	/* 하단 버튼 고정형일때 */
	.popup .popup-box .coupon-bottom.mo-fixed {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	/* 팝업 슬라이더(가로형) */
	.popup .swiper-box {
		width: 100%;
		height: 250px;
	}

	/* 팝업 슬라이더(세로형) */
	.popup .swiper-box.vertical {
		height: 430px;
	}

	.popup .swiper-box.vertical .swiper-wrapper {
		height: 430px;
	}

	.popup .swiper-box.vertical .swiper-wrapper .swiper-slide {
		height: 430px;
		background-size: cover;
		background-position: center center;
	}

	.popup .popup-box.w-440 .coupon-top {
		border-bottom: none;
		height: 60px;
	}

	.popup .popup-box.w-440 .coupon-top.has_line {
		border-bottom: 1px solid #eee;
	}

	.popup .popup-box.w-440 .coupon-top .coupon-title {
		font-size: 16px;
		font-weight: 500;
	}

	.popup .popup-box.w-440 .coupon-cont {
		padding-top: 13px;
		margin-bottom: 8px;
		height: unset;
	}

	.popup .popup-box.w-440 .coupon-cont.pd-set {
		padding-bottom: 102px;
		height: unset;
	}

	.popup .popup-box.w-440 .coupon-cont.refund {
		padding-top: 20px;
	}

	.popup .popup-box.w-440 .coupon-cont .cont-title {
		font-size: 14px;
	}

	.popup .popup-box.w-440 .coupon-cont .cont-title .area-tit {
		font-size: 14px;
		font-weight: 500;
	}

	.popup .popup-box.w-440 .coupon-cont .cont-title .area-tit span {
		font-weight: 700;
	}
	.popup .popup-box.w-440 .coupon-top .close-btn {
		max-width: 20px;
	}
	.popup .popup-box.w-440 .coupon-cont .cont-list {
		padding-bottom: 100px;
	}
	.popup .popup-box.w-440 .coupon-cont .cont-list .list-wrap {
		margin-bottom: 20px;
	}
	.popup
		.popup-box.w-440
		.coupon-cont
		.cont-list
		.list-wrap
		.coupon-box
		.coupon-left
		.big-tit {
		line-height: 1;
	}

	.popup .popup-box.full .coupon-bottom {
		margin-top: 18px;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.popup .popup-box.w-440 .coupon-cont.pd-30 {
		margin-bottom: 8px;
		padding-top: 27px;
	}

	.popup .popup-box.bottom .popup-tit {
		font-size: 18px;
	}

	.popup .popup-box.bottom .popup-tit.fs-15 {
		font-size: 15px;
	}

	.popup .popup-box.bottom .popup-tit.fs-20 {
		font-size: 20px;
	}
	.popup .popup-box .popup-txt {
		margin-top: 8px;
	}

	.popup .popup-box .line {
		margin-top: 22px;
	}

	.popup .popup-box .popup-list {
		margin-top: 18px;
	}

	.popup .popup-box .popup-list ul li {
		margin-bottom: 11px;
		line-height: 21px;
	}

	.popup .popup-box .popup-post {
		margin-top: 11px;
	}

	.popup .popup-box.w-360 .popup-cont.pd-30 {
		padding-bottom: 40px;
	}

	.popup .popup-box.w-440 .coupon-cont.pd-28.cash {
		padding-top: 10px;
		padding-bottom: 0;
	}

	.popup .popup-box.w-440 .coupon-cont.pd-28.cash .cont-title {
		margin-bottom: 25px;
	}

	.popup .popup-box.w-440 .coupon-cont.pd-28 .note {
		padding-right: 9px;
	}

	/* 팝업 페이지 모바일에서 전체화면으로 전환 될 때 */
	.popup.page-chg {
		position: unset;
		background-color: inherit;
	}

	.popup.page-chg .popup-box {
		position: unset;
		transform: unset;
		border-radius: 0;
		width: 100%;
	}

	.popup .swiper-box .swiper-wrapper {
		height: 250px;
	}
}

/* 플로팅 티켓 */
.popup.hidden {
	overflow: hidden;
}
.popup .floating {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
}

.popup .floating.on {
	display: block;
}

.popup .floating .button-wrap {
	display: flex;
	justify-content: flex-end;
	max-width: 320px;
	margin: 0 auto;
}

.popup .floating .close-btn {
	width: 26px;
	height: 26px;
	margin-top: 20px;
	margin-bottom: 10px;
	cursor: pointer;
}

.popup .floating .swiper-slide {
	width: 320px !important;
}

.popup .floating .swiper-slide .wrapper-box {
	position: relative;
}
.popup .floating .swiper-slide .wrapper-box::-webkit-scrollbar {
	display: none;
}

.popup .floating .swiper-slide .my-ticket {
	background-image: url('/images/popup/floating_ticket.png');
	width: 320px !important;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	color: #fff;
	height: 450px;
	position: relative;
	z-index: 100;
	border-radius: 20px;
	/* overflow-y: auto; */
}

.popup .floating .swiper-slide .my-ticket::-webkit-scrollbar {
	display: none;
}
.popup .floating .swiper-slide .my-ticket .ticket-pd {
	padding: 26px 22px 20px 22px;
}

.popup .floating .swiper-slide .my-ticket .ticket-pd.artpass {
	padding: 31px 22px 26px 22px;
	height: 100%;
	overflow-y: auto;
}
.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-pd.artpass::-webkit-scrollbar {
	display: none;
}

.popup .floating .swiper-slide .my-ticket .ticket-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 30px;
	margin-bottom: 15px;
}

.popup .floating .swiper-slide .my-ticket .ticket-top .title {
	font-size: 16px;
	font-weight: 700;
}

/* 플로팅 티켓 탭 선택 세개 */
.popup .floating .swiper-slide .my-ticket .ticket-top .tab-menu {
	width: 148px;
	height: 30px;
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	border-radius: 500px;
	align-items: center;
	padding: 2px;
}
.popup .floating .swiper-slide .my-ticket .ticket-top .tab-menu li {
	width: 48px;
	height: 26px;
	background-repeat: no-repeat;
	background-size: 22px;
	background-position: center center;
	cursor: pointer;
}

.popup .floating .swiper-slide .my-ticket .ticket-top .tab-menu li img {
	height: 100%;
}
.popup .floating .swiper-slide .my-ticket .ticket-top .tab-menu li.ticket {
	background-image: url('/images/popup/ic_ticket.svg');
	position: relative;
}

.popup .floating .swiper-slide .my-ticket .ticket-top .tab-menu li.ticket.on {
	background-image: url('/images/popup/ic_ticket_active.svg');
}

.popup .floating .swiper-slide .my-ticket .ticket-top .tab-menu li.qr {
	background-image: url('/images/popup/ic_QR.svg');
	position: relative;
}
.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-top
	.tab-menu
	li.ticket:after {
	position: absolute;
	content: '';
	width: 1px;
	height: 8px;
	background-color: #f8b62d;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.popup .floating .swiper-slide .my-ticket .ticket-top .tab-menu li.qr:after {
	position: absolute;
	content: '';
	width: 1px;
	height: 8px;
	background-color: #f8b62d;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.popup .floating .swiper-slide .my-ticket .ticket-top .tab-menu li.qr.on {
	background-image: url('/images/popup/ic_QR_active.svg');
}
.popup .floating .swiper-slide .my-ticket .ticket-top .tab-menu li.barcode {
	background-image: url('/images/popup/ic_barcode.svg');
}
.popup .floating .swiper-slide .my-ticket .ticket-top .tab-menu li.barcode.on {
	background-image: url('/images/popup/ic_barcode_active.svg');
}

.popup .floating .swiper-slide .my-ticket .ticket-top .tab-menu li.on {
	background-color: #f8b62d;
	border-radius: 500px;
}
.popup .floating .swiper-slide .my-ticket .ticket-cont2 {
	padding-bottom: 28px;
}

.popup .floating .swiper-slide .my-ticket .ticket-cont .img-box {
	height: 188px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.popup .floating .swiper-slide .my-ticket .ticket-cont .img-box.image {
	background-image: url('/images/popup/ticket_img.png');
	border-radius: 10px;
}

.popup .floating .swiper-slide .my-ticket .ticket-cont .img-box.qr {
	background-image: url('/images/popup/ticket_qr.png');
}

.popup .floating .swiper-slide .my-ticket .ticket-cont .img-box.barcode {
	background-image: url('/images/popup/ticket_barcode.png');
}

.popup .floating .swiper-slide .my-ticket .ticket-cont .img-box.card {
	background-image: url('/images/popup/floating_card.png');
	border-radius: 10px;
}

.popup .floating .swiper-slide .my-ticket .ticket-cont .tabconts-wrap {
	margin-bottom: 10px;
}

.popup .floating .swiper-slide .my-ticket .ticket-cont .tabconts-wrap .tabCont {
	display: none;
}
.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.tabconts-wrap
	.tabCont.on {
	display: block;
}
.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.tabconts-wrap
	.tabCont_sec {
	display: none;
}
.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.tabconts-wrap
	.tabCont_sec.on {
	display: block;
}
.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.tabconts-wrap
	.tabCont_thi {
	display: none;
}
.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.tabconts-wrap
	.tabCont_thi.on {
	display: block;
}
.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.tabconts-wrap
	.tabCont_four {
	display: none;
}
.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.tabconts-wrap
	.tabCont_four.on {
	display: block;
}
.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.tabconts-wrap
	.tabCont_fif {
	display: none;
}
.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.tabconts-wrap
	.tabCont_fif.on {
	display: block;
}
.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.tabconts-wrap
	.tabCont_six {
	display: none;
}
.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.tabconts-wrap
	.tabCont_six.on {
	display: block;
}

.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.ticket-detail
	.detail-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}

.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.ticket-detail
	.detail-top
	p {
	color: #feffc8;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.ticket-detail
	.detail-top
	.numbering
	p {
	background-color: #ffc959;
	border-radius: 50px;
	width: 43px;
	height: 22px;
	text-align: center;
	line-height: 22px;
	font-size: 12px;
	font-weight: 500;
}

.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.ticket-detail
	.detail-title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 33px;
	word-break: break-all;
}

.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.ticket-detail
	.detail-title
	span {
	font-size: 20px;
}

.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.ticket-detail
	.detail-title
	+ .detail-desc {
	margin-top: 12px;
	line-height: 12px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.8);
}

.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.ticket-detail
	.detail-line {
	width: 100%;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.24);
	margin: 12px 0 10px 0;
}

.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.ticket-detail
	.detail-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	letter-spacing: -0.02em;
	line-height: 23px;
}

.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.ticket-detail
	.detail-bottom
	.date {
	font-weight: 500;
}

.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.ticket-detail
	.detail-bottom
	.date
	span {
	margin-left: 5px;
	font-weight: 400;
}

.popup
	.floating
	.swiper-slide
	.my-ticket
	.ticket-cont
	.ticket-detail
	.detail-bottom
	.tip {
	width: 66px;
	height: 23px;
	background-color: #fff;
	color: #f6ac10;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	border-radius: 4px;
}
.popup .floating .rihgt-box {
	width: 8%;
}

.popup .floating .bg img {
	width: 72px;
	position: absolute;
	left: 50%;
	top: -1px;
	transform: translateX(-50%);
	z-index: 999;
	background-color: transparent;
}

.popup .floating .swiper-slide .my-artpass {
	background-color: #fff;
	width: 300px;
	height: 72px;
	border-radius: 20px;
	margin: 0 auto;
	z-index: 0;
	margin-top: -20px;
	padding: 36px 32px 16px 22px;
	cursor: pointer;
}
.popup .floating .swiper-slide .my-artpass .flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.popup .floating .swiper-slide .my-artpass img {
	width: 72px;
	position: absolute;
	left: 50%;
	top: 52px;
	transform: translateX(-50%);
	z-index: 999;
	background-color: transparent;
}
.popup .floating .swiper-slide .my-artpass .artpass-tit {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.popup .floating .swiper-slide .my-artpass .artpass-num {
	font-size: 16px;
	font-weight: 500;
}

.popup .floating .swiper-slide .my-artpass .artpass-num span {
	font-weight: 700;
	color: #f6ac10;
}

/* 플로팅 티켓 탭 선택 두개 */
.popup .floating .swiper-slide .my-ticket .ticket-top .tab-menu.two-step {
	width: 99px;
}

/* 플로팅 티켓 높이 504px (나의 쿠폰) */
.popup .floating .swiper-slide .my-ticket.h-504 {
	height: 524px;
	background-image: url('/images/popup/floating_coupon.png');
	background-size: cover;
	overflow-y: auto;
}
.popup .floating .swiper-slide .my-ticket.h-504::-webkit-scrollbar {
	display: none;
}

.popup .floating .swiper-slide .my-ticket.h-504 .ticket-pd {
	height: 100%;
}

.popup
	.floating
	.swiper-slide
	.my-ticket.h-504
	.ticket-cont
	.ticket-detail
	.detail-title
	span {
	font-size: 16px;
}

.popup
	.floating
	.swiper-slide
	.my-ticket.h-504
	.ticket-cont
	.ticket-detail
	.button-redo {
	height: 27px;
	margin-top: 24px;
	display: flex;
	justify-content: center;
}

.popup
	.floating
	.swiper-slide
	.my-ticket.h-504
	.ticket-cont
	.ticket-detail
	.button-redo
	button {
	height: 100%;
	color: #fff;
	width: 95px;
	border: 1px solid #fff;
	border-radius: 500px;
	padding-left: 18px;
	font-size: 12px;
	font-weight: 500px;
	background-image: url('/images/popup/iconoir_redo.svg');
	background-repeat: no-repeat;
	background-position: center left 15px;
}

.popup .floating .swiper-slide .my-ticket.h-427 {
	height: 427px;
	background-image: url('/images/popup/floating_427.png');
}

/* 나의 아트패스 */
.popup .floating.artpass .my-artpass {
	margin-top: 0;
	padding: 16px 22px 47px 22px;
	height: 83px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.popup .floating.artpass .global-ticket {
	display: none;
}

.popup .floating.artpass .swiper-slide .my-ticket {
	margin-top: -30px;
	height: calc(100vh - 130px);
	/* background-image: url('/images/popup/floating_ticket_artpass.png'); */
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background-size: 320px 483px;
	background-position: center top;
	overflow-y: scroll;
}
.popup .floating.artpass .swiper-slide .my-ticket2 {
	margin-top: 0;
}
.popup .floating.artpass .swiper-slide .my-ticket.on {
	/* background-image: url('/images/popup/floating_ticket.png'); */
	/* background-size: 320px 439px; */
}

.popup .floating.artpass .swiper-slide .my-ticket .scroll {
	overflow-y: scroll;
}

.popup .floating.artpass .swiper-slide .my-ticket::-webkit-scrollbar {
	display: none;
}

.popup .floating.artpass .swiper-slide .my-ticket .ticket-pd {
	padding-bottom: 10px;
	overflow-y: auto;
}
.popup
	.floating.artpass
	.swiper-slide
	.my-ticket
	.ticket-pd::-webkit-scrollbar {
	display: none;
}
.popup .floating.artpass .swiper-slide .my-ticket .ticket-pd .inner {
	padding: 31px 22px 0 22px;
}
.popup .floating.artpass .swiper-slide .my-ticket .ticket-cont .img-box.image {
	background-image: url('/images/popup/artpass_img.png');
}

.popup .floating.artpass .swiper-slide .course-info {
	background-color: #fafafa;
	border-radius: 20px;
	padding: 22px 22px 20px 19px;
}

.popup .floating.artpass .swiper-slide .course-info .course-title {
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #222;
	margin-bottom: 20px;
}

.popup .floating.artpass .swiper-slide .course-info .course-title .img-box {
	display: flex;
	align-items: center;
	margin-right: 7px;
}

.popup .floating.artpass .swiper-slide .course-info .course-cont {
	display: flex;
}
.popup .floating.artpass .swiper-slide .course-info .course-cont .line-bg {
	width: 16px;
	height: auto;
	margin-right: 7px;
	position: relative;
}

.popup .floating.artpass .swiper-slide .course-info .course-cont .line-bg span {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	height: calc(100% - 60px);
	margin: 30px 0;
	width: 6px;
	background: #eee;
	background-image: url('/images/popup/bg-dot.svg');
	background-repeat: no-repeat;
	background-repeat-y: repeat;
	background-position: center top;
}
.popup .floating.artpass .swiper-slide .course-info .list-wrap{
	width: 100%;
}
.popup .floating.artpass .swiper-slide .course-info .select-list-wrap{
	display: grid;
	gap: 8px;
	width: 100%;
}
.popup .floating.artpass .swiper-slide .course-info .select-use-process {
	display: flex;
	background-color: #f6ac10;
	border-radius: 6px;
	padding: 6px;
	font-size: 12px;
}
.popup .floating.artpass .swiper-slide .course-info .list
,.popup .floating.artpass .swiper-slide .course-info .select-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	padding: 12px 12px 13px 12px;
	border-radius: 6px;
	width: 100%;
	position: relative;
}

.popup .floating.artpass .swiper-slide .course-info .select-list.used{
	background-color: rgba(246, 172, 16, 0.05);
	opacity: 0.7;
}

.popup .floating.artpass .swiper-slide .course-info .list::before {
	position: absolute;
	content: '';
	background-image: url('/images/popup/list-dot.svg');
	background-repeat: no-repeat;
	background-position: center;
	width: 10px;
	height: 10px;
	background-size: cover;
	top: 50%;
	left: -20px;
	transform: translateY(-50%);
}

.popup .floating.artpass .swiper-slide .course-info .list:not(:last-of-type) {
	margin-bottom: 12px;
}
.popup .floating.artpass .swiper-slide .course-info .list .left-box
,.popup .floating.artpass .swiper-slide .course-info .select-list .left-box {
	width: auto;
}
.popup .floating.artpass .swiper-slide .course-info .list .left-box .tit,
.popup .floating.artpass .swiper-slide .course-info .select-list .left-box .tit {
	font-size: 13px;
	font-weight: 700;
	color: #333;
	margin-bottom: 11px;
}

.popup .floating.artpass .swiper-slide .course-info .list .left-box .tit span
.popup .floating.artpass .swiper-slide .course-info .select-list .left-box .tit span {
	margin-left: 6px;
	color: #777;
	font-weight: 400;
}

.popup .floating.artpass .swiper-slide .course-info .list .left-box .desc,
.popup .floating.artpass .swiper-slide .course-info .select-list .left-box .desc {
	font-size: 11px;
	font-weight: 400;
	color: #333;
	letter-spacing: -0.02em;
	max-width: 204px;
	line-height: 16.5px;
}

.popup
	.floating.artpass
	.swiper-slide
	.course-info
	.list
	.left-box
	.desc
	.arrow-box {
	display: inline-flex;
	margin: 0 5px;
}
/* 티켓 디테일 영역 */
.popup .floating.artpass .swiper-slide .course-info .has-detail .list {
	margin-bottom: 10px;
}

.popup .floating.artpass .swiper-slide .course-info .has-detail .detail-box {
	height: 300px;
	background-color: rgba(0, 0, 0, 0.4);
	margin-bottom: 19px;
	display: none;
}

/* 마이페이지 - 나의 아트패스 */
.popup .floating.artpass.mypage_art .swiper-slide .my-ticket {
	margin-top: 0;
}

.popup .floating.artpass.mypage_art .swiper-slide .my-ticket .use-place {
	background: #fafafa;
	border-radius: 20px;
	padding: 22px 22px 25px 22px;
	color: #222;
}

.popup .floating.artpass.mypage_art .swiper-slide .my-ticket .use-place .title {
	font-size: 14px;
	font-weight: 700;
	line-height: 17.53px;
	letter-spacing: -0.02em;
	margin-bottom: 20px;
}

.popup
	.floating.artpass.mypage_art
	.swiper-slide
	.my-ticket
	.use-place
	.place-list {
	background: #fff;
	border-radius: 6px;
	padding: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.popup
	.floating.artpass.mypage_art
	.swiper-slide
	.my-ticket
	.use-place
	.place-list:last-child {
	margin-bottom: 0;
}

.popup
	.floating.artpass.mypage_art
	.swiper-slide
	.my-ticket
	.use-place
	.place-list
	.left-box {
	display: flex;
	column-gap: 10px;
}

.popup
	.floating.artpass.mypage_art
	.swiper-slide
	.my-ticket
	.use-place
	.place-list
	.left-box
	.img-box {
	width: 36px;
	height: 36px;
	border-radius: 4px;
}

.popup
	.floating.artpass.mypage_art
	.swiper-slide
	.my-ticket
	.use-place
	.place-list:nth-child(1)
	.img-box {
	background: url('/images/popup/place_list01.png') center/cover no-repeat;
}
.popup
	.floating.artpass.mypage_art
	.swiper-slide
	.my-ticket
	.use-place
	.place-list:nth-child(2)
	.img-box {
	background: url('/images/popup/place_list02.png') center/cover no-repeat;
}
.popup
	.floating.artpass.mypage_art
	.swiper-slide
	.my-ticket
	.use-place
	.place-list:nth-child(3)
	.img-box {
	background: url('/images/popup/place_list03.png') center/cover no-repeat;
}
.popup
	.floating.artpass.mypage_art
	.swiper-slide
	.my-ticket
	.use-place
	.place-list:nth-child(4)
	.img-box {
	background: url('/images/popup/place_list04.png') center/cover no-repeat;
}
.popup
	.floating.artpass.mypage_art
	.swiper-slide
	.my-ticket
	.use-place
	.place-list:nth-child(5)
	.img-box {
	background: url('/images/popup/place_list05.png') center/cover no-repeat;
}
.popup
	.floating.artpass.mypage_art
	.swiper-slide
	.my-ticket
	.use-place
	.place-list:nth-child(6)
	.img-box {
	background: url('/images/popup/place_list06.png') center/cover no-repeat;
}
.popup
	.floating.artpass.mypage_art
	.swiper-slide
	.my-ticket
	.use-place
	.place-list:nth-child(7)
	.img-box {
	background: url('/images/popup/place_list07.png') center/cover no-repeat;
}

.popup
	.floating.artpass.mypage_art
	.swiper-slide
	.my-ticket
	.use-place
	.place-list
	.left-box
	.place-info {
	max-width: 178px;
}
.popup
	.floating.artpass.mypage_art
	.swiper-slide
	.my-ticket
	.use-place
	.place-list
	.left-box
	.place-info
	.name {
	font-size: 13px;
	font-weight: 700;
	line-height: 13px;
	letter-spacing: -0.02em;
	color: #000;
	margin-bottom: 8px;
}

.popup
	.floating.artpass.mypage_art
	.swiper-slide
	.my-ticket
	.use-place
	.place-list
	.left-box
	.place-info
	.position {
	font-size: 11px;
	font-weight: 400;
	line-height: 15.4px;
	letter-spacing: -0.02em;
	color: #333;
	word-break: keep-all;
}

.popup .withdraw-wrap img {
	width: unset;
}

.popup .withdraw-wrap .contents {
	padding: 0 20px;
	padding-bottom: 86px;
}

.popup .popup-box.withdraw-wrap .button-wrap {
	position: fixed;
	bottom: 0;
	width: 100%;
	left: 0;
}
.popup .withdraw-wrap .contents2 {
	padding: 0 20px;
	padding-bottom: 21px;
}
.popup .popup-box.withdraw-wrap .my-button-wrap button {
	width: 100%;
	height: 66px;
	background-color: #f8b62d;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	border-radius: 0 0 15px 15px;
}

.popup-box.withdraw-wrap .button-wrap button {
	margin-top: 0;
	border-radius: 0 0 15px 15px;
}
/* 캘린더 영역 */
.datepicker-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 0;
}

#ui-datepicker-div {
	position: absolute !important;
	top: 0 !important;
	left: 50% !important;
	transform: translateX(-50%);
	max-width: 440px;
	width: 100%;
	height: 100%;
	padding: 0;
}

.ui-widget.ui-widget-content {
	border: none;
	border-radius: 10px;
}

.ui-widget-header {
	border: none;
	background: none;
}

.ui-datepicker .ui-datepicker-header {
	margin-bottom: 24px;
	padding-top: 0;
}

.ui-datepicker-header .close-btn {
	position: absolute;
	top: 22px;
	left: 20px;
	cursor: pointer;
}
.datapicker-layer-top,
.datapicker-layer-bottom {
	z-index: 999;
	position: fixed;
	max-width: 440px;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
}
.datapicker-layer-top {
	top: 0px;
}
.datapicker-layer-bottom {
	bottom: 0px;
}
.datapicker-layer-top .title-area {
	background: #fff;
	height: 60px;
}
.ui-datepicker .ui-datepicker-title {
	padding-top: 74px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	top: 89% !important;
}
.datapicker-layer-top .title-area img {
	position: absolute;
	top: 17px;
	left: 20px;
	cursor: pointer;
}

.datapicker-layer-top .title-area .title {
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 18px;
	font-weight: 500;
	color: #222;
	font-family: Spoqa Han Sans Neo;
}

.datapicker-layer-bottom .bottom-button {
	height: 66px;
	width: 100%;
	line-height: 66px;
	background: #cacaca;
	border-radius: 0 0 10px 10px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
	border: none;
}

.datapicker-layer-bottom .bottom-button.active {
	background: #f8b62d;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: none;
	background: none;
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	color: #222;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
	border-radius: 40px;
	background: #f6ac10;
	color: #fff;
}

.ui-datepicker td {
	padding: 0;
	height: 46px;
	line-height: 46px;
	position: relative;
}
.ui-datepicker td.active a {
	color: #fff;
}

.ui-datepicker td.active:after {
	position: absolute;
	content: '';
	width: 46px;
	height: 46px;
	background: #f6ac10;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.ui-datepicker-calendar thead {
	font-size: 14px;
	color: #999;
	padding-bottom: 10px;
	padding-top: 10px;
	height: 36px;
	border-bottom: 1px solid #eee;
}

.ui-datepicker-calendar thead span {
	font-weight: 500;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	top: 50%;
	transform: translateY(-50%);
	margin-top: -2px;
}

.ui-datepicker .ui-datepicker-prev {
	background: url('/images/popup/calendar_left.svg') left center no-repeat;
	left: 153px;
}

.ui-datepicker .ui-datepicker-next {
	background: url('/images/popup/calendar_right.svg') center right no-repeat;
	right: 153px;
}

.ui-datepicker .ui-datepicker-title {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ui-datepicker-year {
	font-size: 14px;
	font-weight: 500;
	line-height: 16.8px;
	color: #222;
}

.ui-datepicker-month {
	font-size: 18px;
	font-weight: 700;
	line-height: 21.6px;
	color: #222;
	margin-left: 4px;
	margin-top: 2px;
}

.ui-datepicker th {
	padding: 0;
}

.ui-datepicker-calendar tbody tr td.ui-datepicker-week-end:first-of-type a {
	color: #f33f3f;
}

.ui-datepicker-calendar tbody tr td.ui-datepicker-week-end:last-of-type a {
	color: #0a3fda;
}

.text-truncate {
	white-space: nowrap;        /* 줄바꿈 방지 */
    overflow: hidden;           /* 넘치는 텍스트는 숨김 */
	text-overflow: ellipsis;    /* 넘치는 텍스트를 ...으로 표시 */
}
.use-process {
	display: none;
	flex-direction: row;
	margin-top: 12px;
}
.use-process input{
	height: 40px !important;
	padding: 0px 12px !important;
	border-radius: 10px !important;
	/* background-color: #FFE6B4; */
	border: none !important;
	flex: 1;
}
.use-process input::placeholder{
	font-weight: 500;
	font-size: 12px;
	color: #868686;
	opacity: 0.5;
}
.ticket-detail .on {
	display: flex !important;
	align-items: center;
	justify-content: space-around;
}
.process-button {
	background-color: white;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-left: 8px;
	border-radius: 8px !important;
	padding: 0px 20px;
	color: black;
	white-space: nowrap;
	height: 40px !important;
	opacity: 0.9;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}
.use-process .active {
	color: #111111;
	opacity: 1;
}
.swal2-container {
	z-index: 100000000 !important;
}
.swal2-toast {
	width: auto !important;
	max-width: 70vw !important;
	background: #000000CC !important;
	opacity: 0.8 !important;
	border-radius: 10px;
}
.swal2-title {
	margin: 0 !important;
	text-align: center !important;
	font-weight: 400;
	color: white;
}
.swal2-show {
	animation: fadeIn 300ms;
}
.swal2-hide {
	animation: fadeOut 300ms;
}
.swal2-popup {
	width: auto;
	min-width: 250px;
	padding: 20px 0px 0px;
	border-radius: 13px;
}
.swal2-cancel, .swal2-confirm {
	border-radius: 0px !important;
	flex: 1 !important;
	margin: 0 !important;
	min-width: 100px;
}
.swal2-cancel{
	border-bottom-left-radius: 13px !important;
}
.swal2-confirm {
	background-color:#F8B62D;
	border-bottom-right-radius: 13px !important;
}
.swal2-html-container {
	padding: 15px !important;
}
.popup-text {
	font-size: 14px;
	font-weight: 500;
	margin: 5px;
}
div:where(.swal2-container) div:where(.swal2-actions) {
	margin: 0px !important;
	margin-top: 15px !important;
}
.swal2-popup.swal2-toast.swal2-show {
    animation: fadeIn 5s ease-in forwards !important;
}
@keyframes fadeIn {
	0% { opacity: 0; }   /* 시작할 때 투명 */
	100% { opacity: 1; } /* 끝날 때 불투명 */
}
@keyframes fadeOut {
	0% { opacity: 1; }   /* 시작할 때 불투명 */
	100% { opacity: 0; } /* 끝날 때 투명 */
}


@media screen and (max-width: 768px) {
	.ui-widget.ui-widget-content {
		border-radius: 0px;
	}

	.datapicker-layer-bottom .bottom-button {
		border-radius: 0;
		letter-spacing: 0;
		position: fixed;
		bottom: 0;
	}

	.ui-state-default,
	.ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default,
	.ui-button,
	html .ui-button.ui-state-disabled:hover,
	html .ui-button.ui-state-disabled:active {
		font-size: 14px;
	}

	.ui-datepicker td {
		padding: 0;
		height: 46px;
		line-height: 46px;
	}

	.ui-datepicker td.active:after {
		position: absolute;
		content: '';
		width: 40px;
		height: 40px;
		background: #f6ac10;
		border-radius: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: -1;
	}

	.ui-datepicker-calendar thead {
		font-size: 12px;
		height: 32px;
	}

	.ui-datepicker .ui-datepicker-prev {
		background: url('/images/popup/calendar_left.svg') left center no-repeat;
		left: calc(50% - 62px);
	}

	.ui-datepicker .ui-datepicker-next {
		background: url('/images/popup/calendar_right.svg') center right no-repeat;
		right: calc(50% - 62px);
	}

	.ui-datepicker .ui-datepicker-title {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ui-datepicker-year {
		font-size: 12px;
		line-height: 14.4px;
	}

	.ui-datepicker-month {
		font-size: 16px;
		line-height: 19.2px;
	}

	.popup .withdraw-wrap img {
		width: unset;
	}

	.popup-box.withdraw-wrap .button-wrap button {
		border-radius: 0 0 0 0;
	}
}

@media screen and (max-width: 359px) {
	.popup .floating {
		width: 100%;
		padding: 0 20px;
	}

	.popup .floating .swiper-slide {
		width: calc(100vw - 40px) !important;
	}

	.popup .floating .swiper-slide .my-ticket {
		width: 100% !important;
		background-size: cover;
		background-position: center;
	}

	.popup .floating .swiper-slide .my-artpass {
		width: calc(100% - 20px);
	}

	.popup .floating.artpass .swiper-slide .course-info .list,
	.popup .floating.artpass .swiper-slide .course-info .select-list {
		width: 100%;
	}
}

/* Background overlay */
/* Background overlay */
.modal {
	display: none; /* Initially hidden */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5); /* Dark background */
	justify-content: center;
	align-items: center;
	z-index: 100000000; /* Higher z-index */
  }
  
  /* Alert Box */
  .modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* Perfectly centers */

	background: white;
	padding: 15px;
	border-radius: 15px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	text-align: center;
	width: 300px;
	position: relative;
	z-index: 10000; /* Higher than overlay */
  }
  .comment{
	font-size: 15px;
	line-height: 1.4;
  }
  
  /* Buttons */
  .buttons {
	margin-top: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
  }
  
  button {
	/* padding: 10px 15px; */
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
  }
  
  #confirmBtn {
	background-color: #F8B62D;
	color: white;
	padding: 10px 30px;
	border-radius: 10px;
	width: 100%;
  }
  #confirmBtn:disabled {
	opacity: 0.5;
  }
  
  #cancelBtn {
	background-color: #dbdbdb;
	color: #2a2a2a;
	padding: 10px 30px;
	border-radius: 10px;
	width: 100%;
  }

  #useInput {
	width: auto;
	height: 30px;
	text-align: center;
	margin: 0px 30px;
  }

  [hidden] {
	display: none !important; 
  }

  .pin-wrapper {
  	position: relative;
	display: flex;
	justify-content: center;
  }

  .hidden-input {
  	position: absolute;
  	opacity: 0;
  	pointer-events: none;
  }

  .pin-boxes {
  	display: flex;
  	justify-content: space-between;
  	gap: 10px;
  }

  .pin-box {
  	width: 40px;
  	height: 40px;
  	border: 2px solid #ccc;
  	text-align: center;
  	font-size: 24px;
  	line-height: 40px;
  	border-radius: 8px;
  	background-color: #f9f9f9;
  }

  .caution {
	color: #d34141;
  }

  .modal-content-wrap {
	display: grid;
	gap: 6px;
	padding: 15px 0px;
  }