@font-face {
	font-family: "GmarketSans";
	font-weight: 700;
	src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
}

.randomball_event .main_section {
	position: relative;
}

.randomball_event .machine {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 85%;
	background: url("/content/images/random_pickup/img_machine.png") no-repeat 0 0 / 100% auto;
}

.randomball_event .machine .ball_area {
	position: absolute;
	top: 2%;
	left: 18%;
	width: 65%;
	height: 52%;
}

.randomball_event .ball_area span[class^="ball_"] {
	position: absolute;
	width: 20%;
	height: auto;
	transform-origin: center;
	transition: all ease;
	animation-duration: 0.8s;
	animation-delay: 0.2s;
}

.randomball_event .on .ball_area span[class^="ball_"] {
	-moz-filter: blur(1px);
	-ms-filter: blur(1px);
	-o-filter: blur(1px);
	-webkit-filter: blur(1px);
	filter: blur(1px);
}

/* animation */

.prize_area {
	position: absolute;
	top: 83%;
	left: 50%;
	width: 20%;
	height: 30%;
	transform: translate(-50%, -50%) rotate(0deg);
}

.prize_area .ball {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg) scale(1);
	transform-origin: center;
	transition-delay: 2s;
	max-width: 50%;
	opacity: 0;
}
.on .prize_area .ball {
	top: 70%;
	transform: translate(-50%, -50%) rotate(720deg) scale(2);
	transition: all 0.7s ease-in-out;
	opacity: 1;
}

.lever {
	position: absolute;
	top: 63%;
	left: 50%;
	max-width: 13%;
	transform: translate(-50%, -50%) rotate(0deg);
	transform-origin: center;
	transition: rotate 1.2s ease-out;
	z-index: 11;
}

.on .lever {
	transform: translate(-50%, -50%) rotate(90deg);
}

.ball_01 {
	bottom: 21%;
	left: 5%;
}
.on .ball_01 {
	animation: ball01 infinite alternate linear;
}
.ball_02 {
	bottom: 20%;
	left: 22%;
}
.on .ball_02 {
	animation: ball02 infinite alternate linear;
}
.ball_03 {
	bottom: 23%;
	left: 68%;
}
.on .ball_03 {
	animation: ball03 infinite alternate linear;
}
.ball_04 {
	bottom: 2%;
	left: 23%;
}
.on .ball_04 {
	animation: ball04 infinite alternate linear;
}
.ball_05 {
	bottom: 25%;
	left: 35%;
}
.on .ball_05 {
	animation: ball05 infinite alternate linear;
}
.ball_06 {
	bottom: 22%;
	left: 50%;
}
.on .ball_06 {
	animation: ball06 infinite linear;
}
.ball_07 {
	bottom: 15%;
	left: 60%;
}
.on .ball_07 {
	animation: ball07 infinite linear;
}
.ball_08 {
	bottom: 13%;
	left: 37%;
}
.on .ball_08 {
	animation: ball08 infinite linear;
}
.ball_09 {
	bottom: 11%;
	left: 13%;
}
.on .ball_09 {
	animation: ball09 infinite linear;
}
.ball_10 {
	bottom: 1.5%;
	left: 35%;
}
.on .ball_10 {
	animation: ball10 infinite linear;
}
.ball_11 {
	bottom: 3%;
	left: 50%;
}
.on .ball_11 {
	animation: ball11 infinite linear;
}
.ball_12 {
	bottom: 6%;
	left: 65%;
}
.on .ball_12 {
	animation: ball12 infinite linear;
}
.ball_13 {
	bottom: 19%;
	left: 75%;
}
.on .ball_13 {
	animation: ball13 infinite linear;
}

@keyframes ball01 {
	0% {
		bottom: 21%;
		left: 5%;
		transform: rotate(0deg);
	}
	50% {
		bottom: 41%;
		left: 2%;
	}
	70% {
		bottom: 51%;
		left: 22%;
	}
	100% {
		bottom: 21%;
		left: 5%;
		transform: rotate(360deg);
	}
}

@keyframes ball02 {
	0% {
		bottom: 20%;
		left: 22%;
		transform: rotate(0deg);
	}
	16% {
		bottom: 60%;
		left: 24%;
	}
	60% {
		bottom: 70%;
		left: 44%;
	}
	100% {
		bottom: 20%;
		left: 22%;
		transform: rotate(360deg);
	}
}

@keyframes ball03 {
	0% {
		bottom: 23%;
		left: 68%;
		transform: rotate(0deg);
	}
	20% {
		bottom: 53%;
		left: 74%;
	}
	45% {
		bottom: 73%;
		left: 49%;
	}
	100% {
		bottom: 23%;
		left: 68%;
		transform: rotate(360deg);
	}
}

@keyframes ball04 {
	0% {
		bottom: 2%;
		left: 23%;
		transform: rotate(0deg);
	}
	30% {
		bottom: 62%;
		left: 13%;
	}
	60% {
		bottom: 78%;
		left: 43%;
	}
	100% {
		bottom: 2%;
		left: 23%;
		transform: rotate(-360deg);
	}
}

@keyframes ball05 {
	0% {
		bottom: 25%;
		left: 35%;
		transform: rotate(0deg);
	}
	25% {
		bottom: 45%;
		left: 20%;
	}
	55% {
		bottom: 30%;
		left: 10%;
	}
	100% {
		bottom: 25%;
		left: 35%;
		transform: rotate(360deg);
	}
}

@keyframes ball06 {
	0% {
		bottom: 22%;
		left: 50%;
		transform: rotate(0deg);
	}
	30% {
		bottom: 58%;
		left: 73%;
	}
	60% {
		bottom: 30%;
		left: 70%;
	}
	100% {
		bottom: 22%;
		left: 50%;
		transform: rotate(-360deg);
	}
}

@keyframes ball07 {
	0% {
		bottom: 15%;
		left: 60%;
		transform: rotate(0deg);
	}
	20% {
		bottom: 45%;
		left: 50%;
	}
	100% {
		bottom: 15%;
		left: 60%;
		transform: rotate(360deg);
	}
}

@keyframes ball08 {
	0% {
		bottom: 13%;
		left: 37%;
		transform: rotate(0deg);
	}
	15% {
		bottom: 3%;
		left: 68%;
	}
	40% {
		bottom: 20%;
		left: 60%;
	}
	100% {
		bottom: 13%;
		left: 37%;
		transform: rotate(-360deg);
	}
}

@keyframes ball09 {
	0% {
		bottom: 11%;
		left: 13%;
		transform: rotate(0deg);
	}
	20% {
		bottom: 3%;
		left: 19%;
	}
	70% {
		bottom: 23%;
		left: 39%;
	}
	100% {
		bottom: 11%;
		left: 13%;
		transform: rotate(-360deg);
	}
}

@keyframes ball10 {
	0% {
		bottom: 1.5%;
		left: 35%;
		transform: rotate(0deg);
	}
	10% {
		bottom: 42%;
		left: 79%;
	}
	80% {
		bottom: 72%;
		left: 29%;
	}
	100% {
		bottom: 1.5%;
		left: 35%;
		transform: rotate(360deg);
	}
}

@keyframes ball11 {
	0% {
		bottom: 3%;
		left: 50%;
		transform: rotate(0deg);
	}
	20% {
		bottom: 3%;
		left: 23%;
	}
	50% {
		bottom: 43%;
		left: 2%;
	}
	100% {
		bottom: 3%;
		left: 50%;
		transform: rotate(360deg);
	}
}

@keyframes ball12 {
	0% {
		bottom: 6%;
		left: 65%;
		transform: rotate(0deg);
	}
	15% {
		bottom: 66%;
		left: 65%;
	}
	75% {
		bottom: 56%;
		left: 15%;
	}
	100% {
		bottom: 6%;
		left: 65%;
		transform: rotate(-360deg);
	}
}

@keyframes ball13 {
	0% {
		bottom: 19%;
		left: 75%;
		transform: rotate(0deg);
	}
	20% {
		bottom: 27%;
		left: 77%;
	}
	60% {
		bottom: 2%;
		left: 37%;
	}
	100% {
		bottom: 19%;
		left: 75%;
		transform: rotate(360deg);
	}
}

.randomball_event .pickup_btn_area {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: -4%;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 27%;
}

.randomball_event .pickup_btn_area::after {
	content: "";
	position: absolute;
	top: -55%;
	left: 65%;
	width: 30%;
	height: 0;
	padding-bottom: 30%;
	background: url("/content/images/random_pickup/img_giftbox.png") no-repeat center / 100% auto;
	z-index: -1;
}

.randomball_event .random_btn {
	position: absolute;
	left: 50%;
	display: inline-block;
	width: 67%;
	height: 0;
	padding-bottom: 18%;
	font-size: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	transform: translateX(-50%);
}

.randomball_event .join_btn {
	top: 0%;
	background-image: url("/content/images/random_pickup/img_btn2.png");
}

.randomball_event .pickup_btn {
	top: 45%;
	background-image: url("/content/images/random_pickup/sk/btn_02.png");
}

/* modal */

.randomball_event_modal .modal-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 70px;
	height: 70px;
	background-color: #150432;
	background-image: url("/content//images/icon/ico_close_popup.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 80% auto;
	font-size: 0;
}

.randomball_event_modal.img_only_popup .modal-dialog-centered.modal-dialog-scrollable .modal-content {
	width: 100%;
	max-width: 640px;
}

.randomball_event_modal .modal-body {
	display: flex;
	flex-direction: column;
	padding: 12% 8% 8%;
	background-color: #310777 !important;
}

.randomball_event_modal .get_prize_content {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 20px;
	background-color: #ffffff;
	padding: 50px 20px 40px;
	margin: 28px 0;
	text-align: center;
}

.randomball_event_modal .get_prize_result {
	display: block;
	line-height: 1;
	margin: 20px 0 10px;
	font-size: 48px;
    font-family: "GmarketSansBold";
	color: #000;
	letter-spacing: -0.8px;
	word-spacing: -0.5px;
	word-break: keep-all;
}

.randomball_event_modal .close {
	display: block;
	width: 100%;
	line-height: 1;
	text-align: center;
	padding: 25px;
	border-radius: 10px;
	background-color: #ffed21;
	color: #310777;
	opacity: 1;
    font-family: "GmarketSansBold";
	font-size: 42px;
	font-weight: bold;
}

.randomball_event_modal .info {
	font-size: 20px;
}

.randomball_event_modal .modal-body .title {
	max-width: 100%;
	margin: 0 25px;
}

@media (max-width: 767px) {
	.randomball_event_modal .modal-body {
		padding: 12% 6% 8%;
		margin: 0 20px;
	}

	.randomball_event_modal .get_prize_result {
		font-size: 24px !important;
	}

	.randomball_event_modal .close {
		font-size: 24px;
		padding: 16px;
	}

	.randomball_event_modal .modal-body .title {
		margin: 0 10px;
	}

	.randomball_event_modal .get_prize_content {
		margin: 20px 0;
		padding: 16px 10px;
	}

	.randomball_event_modal .get_prize_img {
		max-width: 60%;
	}

	.randomball_event_modal .modal-close {
		width: 40px;
		height: 40px;
	}

	.randomball_event_modal .info {
		word-break: keep-all;
		font-size: 14px;
	}
}

.randomGiftPage {
	position: relative;
	overflow: auto !important;
}

/* 20240409 */

.relative {
	position: relative;
}

.reactive_link {
	position: absolute;
	display: block;
	font-size: 0;
	z-index: 1;
}

.featured_detail_contents .coupon .reactive_link {
	bottom: 19%;
	left: 24%;
	width: 52%;
	height: 14%;
}
.featured_detail_contents .joined .reactive_link {
	bottom: 3%;
	left: 25%;
	width: 50%;
	height: 7%;
}