.arpoten_event_2025_07 .pickup_wrap {
	top: 26.9%;
	left: 50%;
	width: 80%;
	height: 53.7%;
	transform: translateX(-50%);
	gap: 10px;
	filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.5));
}

.arpoten_event_2025_07 .pick_btn {
	position: relative;
	background-image: url("/content/images/event/2025/arpoten/07/img_sp_base.png");
	background-repeat: no-repeat;
	background-size: 200% auto;
}

.arpoten_event_2025_07 .pick_btn.on {
	background-image: url("/content/images/event/2025/arpoten/07/img_sp_check_empty.png");
}

.arpoten_event_2025_07 .pick_btn::before {
	display: none;
	content: "";
	position: absolute;
	top: 12.5%;
	left: 50%;
	width: 40%;
	height: 60%;
	transform: translateX(-50%);
}

.arpoten_event_2025_07 .pick_btn::before {
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	transform-origin: center;
}

.arpoten_event_2025_07 .pick_btn.on::before {
	display: block;
	animation: showBG 1s ease 1;
	transition: all 1s ease;
}

.arpoten_event_2025_07 .pick_01 {
	background-position: 0% 0%;
	color: #2be6ff;
}
.arpoten_event_2025_07 .pick_02 {
	background-position: 100% 0%;
	color: #f4ff40;
}
.arpoten_event_2025_07 .pick_03 {
	background-position: 0% 100%;
	color: #ff6300;
}
.arpoten_event_2025_07 .pick_04 {
	background-position: 100% 100%;
	color: #02cb3e;
}

.arpoten_event_2025_07 #btnVote {
	top: 83.3%;
	left: 50%;
	width: 55%;
	height: 6.6%;
	transform: translateX(-50%);
	background: url("/content/images/event/2025/arpoten/07/img_btn.png") no-repeat center / 100% auto;
}

.arpoten_event_2025_07 .pick_btn .result {
	position: absolute;
	display: none;
	font-family: "GmarketSansBold";
	font-weight: 700;
	line-height: 1;
	font-size: 40px;
}

.arpoten_event_2025_07 .pick_btn .result em {
	line-height: 1;
	font-size: 1.1em;
	font-weight: 700;
}

.arpoten_event_2025_07 .pick_btn.on .result {
	/* display: inline-block; */
}

.arpoten_event_2025_07 .pick_01 .result {
	bottom: 9.5%;
	left: 50%;
}
.arpoten_event_2025_07 .pick_02 .result {
	bottom: 9.5%;
	left: 68%;
}
.arpoten_event_2025_07 .pick_03 .result {
	left: 55%;
	bottom: 7.5%;
}
.arpoten_event_2025_07 .pick_04 .result {
	left: 55%;
	bottom: 7.5%;
}

.arpoten_event_2025_07 .pick_01::before {
	background-image: url("/content/images/event/2025/arpoten/07/img_blue.png");
	filter: drop-shadow(0 0 40px #2be6ff);
}

.arpoten_event_2025_07 .pick_02::before {
	background-image: url("/content/images/event/2025/arpoten/07/img_yellow.png");
	filter: drop-shadow(0 0 40px #f4ff40);
}
.arpoten_event_2025_07 .pick_03::before {
	background-image: url("/content/images/event/2025/arpoten/07/img_orange.png");
	filter: drop-shadow(0 0 40px #ff6300);
}
.arpoten_event_2025_07 .pick_04::before {
	background-image: url("/content/images/event/2025/arpoten/07/img_green.png");
	filter: drop-shadow(0 0 40px #02cb3e);
}

.arpoten_event_2025_07 .pick_01.on,
.arpoten_event_2025_07 .pick_01 .bolt_wrap {
	filter: drop-shadow(0 0 40px #2be6ff);
}
.arpoten_event_2025_07 .pick_02.on,
.arpoten_event_2025_07 .pick_02 .bolt_wrap {
	filter: drop-shadow(0 0 40px #f4ff40);
}

.arpoten_event_2025_07 .pick_03.on,
.arpoten_event_2025_07 .pick_03 .bolt_wrap {
	filter: drop-shadow(0 0 40px #ff6300);
}

.arpoten_event_2025_07 .pick_04.on,
.arpoten_event_2025_07 .pick_04 .bolt_wrap {
	filter: drop-shadow(0 0 40px #02cb3e);
}

.arpoten_event_2025_07 .on .bolt_wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	transform: translate(-50%, -50%);
}
.arpoten_event_2025_07 .on .bolt {
	position: absolute;
	display: inline-block;
	width: 1px;
	height: 1px;
	margin: -1px;
	border-style: solid;
	border-width: 24px;
	transform-origin: center;
	transition: opacity 1s ease;
}

.arpoten_event_2025_07 .on .bolt-01 {
	border-color: transparent;
	animation: transitionBolt01 1s ease 1;
	transform: rotateZ(19deg) skew(26deg, -75deg) translate(-52%, -220%) rotate(360deg);
}

.arpoten_event_2025_07 .on .bolt-02 {
	border-color: transparent;
	animation: transitionBolt02 1s ease 1;
	transform: rotate(5deg) skew(-20deg, 75deg) translate(-43%, 22%) scale(-0.6, 1.2);
}

.arpoten_event_2025_07 .on .bolt-03 {
	border-color: transparent;
	animation: transitionBolt03 1s ease 1;
	transform: rotateZ(19deg) skew(26deg, -75deg) rotate(185deg) translate(-29%, 80%);
}

@keyframes transitionBolt01 {
	0% {
		transform: rotateZ(19deg) skew(26deg, -75deg) translate(-52%, -220%) rotate(360deg) scale(1);
		border-color: transparent white white transparent;
	}
	10% {
		transform: translate(-52%, -220%);
		border-radius: 100%;
	}
	30% {
		transform: translate(-52%, 100%) scale(0.5);
	}
	35% {
		transform: translate(-52%, 90%) scale(0.5);
	}
	55% {
		transform: translate(-52%, -280%) scale(1);
	}
	74% {
		transform: translate(-52%, -75%) scale(0.75);
	}
	75% {
		transform: translate(-52%, -75%) scale(0.75);
	}
	85% {
		border-radius: 100%;
		transform: rotateZ(19deg) skew(26deg, -75deg) translate(-52%, -220%) rotate(360deg) scale(1);
		opacity: 1;
	}
	86% {
		border-color: transparent white white transparent;
		border-radius: 0;
	}
	90%,
	100% {
		border-color: transparent;
		opacity: 0;
	}
}
@keyframes transitionBolt02 {
	0% {
		transform: rotate(5deg) skew(-20deg, 75deg) translate(-43%, 22%) scale(-0.6, 1.2);
		border-color: white;
	}
	10% {
		transform: translate(-52%, -220%);
		border-radius: 100%;
	}
	30% {
		transform: translate(-52%, 100%) scale(0.5);
	}
	35% {
		transform: translate(-52%, 90%) scale(0.5);
	}
	55% {
		transform: translate(-52%, -280%) scale(1);
	}
	74% {
		transform: translate(-52%, -75%) scale(0.75);
	}
	75% {
		transform: translate(-52%, -75%) scale(0.75);
		border-radius: 100%;
	}
	85% {
		border-radius: 100%;
		transform: rotate(5deg) skew(-20deg, 75deg) translate(-43%, 22%) scale(-0.6, 1.2);
		opacity: 1;
	}
	86% {
		border-color: white;
		border-radius: 0;
	}
	90%,
	100% {
		border-color: transparent;
		opacity: 0;
	}
}
@keyframes transitionBolt03 {
	0% {
		transform: rotateZ(19deg) skew(26deg, -75deg) rotate(185deg) translate(-29%, 80%);
		border-color: white;
	}
	10% {
		transform: translate(-52%, -220%);
		border-radius: 100%;
	}
	30% {
		transform: translate(-52%, 100%) scale(0.5);
	}
	35% {
		transform: translate(-52%, 90%) scale(0.5);
	}
	55% {
		transform: translate(-52%, -280%) scale(1);
	}
	74% {
		transform: translate(-52%, -75%) scale(0.75);
	}
	75% {
		transform: translate(-52%, -75%) scale(0.75);
		border-radius: 100%;
	}
	85% {
		border-radius: 100%;
		transform: rotateZ(19deg) skew(26deg, -75deg) rotate(185deg) translate(-29%, 80%);
		opacity: 1;
	}
	86% {
		border-color: transparent white white transparent;
		border-radius: 0;
	}
	90%,
	100% {
		border-color: transparent;
		opacity: 0;
	}
}

@keyframes showBG {
	0%,
	82% {
		opacity: 0;
		transform: translateX(-50%) scale(1.4);
	}
	89%,
	100% {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}
}

@media (max-width: 1200px) {
	.arpoten_event_2025_07 .pick_btn .result {
		font-size: 32px;
	}
	.arpoten_event_2025_07 .on .bolt {
		border-width: 22px;
	}
}

@media (max-width: 991px) {
	.arpoten_event_2025_07 .pick_btn .result {
		font-size: 24px;
	}
	.arpoten_event_2025_07 .on .bolt {
		border-width: 18px;
	}
}

@media (max-width: 767px) {
	.arpoten_event_2025_07 .pick_btn .result {
		font-size: 18px;
	}
	.arpoten_event_2025_07 .on .bolt {
		border-width: 12px;
	}
}

@media (max-width: 480px) {
	.arpoten_event_2025_07 .pick_btn .result {
		font-size: 3dvw;
	}
	.arpoten_event_2025_07 .on .bolt {
		border-width: 2dvw;
	}

	.arpoten_event_2025_07 .pick_01.on,
	.arpoten_event_2025_07 .pick_01 .bolt_wrap {
		filter: drop-shadow(0 0 20px #2be6ff);
	}
	.arpoten_event_2025_07 .pick_02.on,
	.arpoten_event_2025_07 .pick_02 .bolt_wrap {
		filter: drop-shadow(0 0 20px #f4ff40);
	}

	.arpoten_event_2025_07 .pick_03.on,
	.arpoten_event_2025_07 .pick_03 .bolt_wrap {
		filter: drop-shadow(0 0 20px #ff6300);
	}

	.arpoten_event_2025_07 .pick_04.on,
	.arpoten_event_2025_07 .pick_04 .bolt_wrap {
		filter: drop-shadow(0 0 20px #02cb3e);
	}
}