.agree_box::-webkit-scrollbar {
	background-color: transparent;
	width: 0px;
}


html {
	scroll-behavior: smooth;
}

body {
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	overflow: hidden;
}


.floating {
	display: flex;
	flex-direction: column;
	position: fixed;
	z-index: 99999999999999999999 !important;
	cursor: pointer;
	right: 19.5%;
	top: -5px;
	animation: floating ease-in-out 3s forwards;
	opacity: 0;
}
@keyframes floating {
	0% {
		transform: rotate(0) translate(0, 0);
		opacity: 0;
	}
	20% {
		transform: rotate(10deg) translate(-69px, 0);
		opacity: 1;
	}
	35% {
		transform: rotate(-5deg) translate(27px, 0);
		opacity: 1;
	}
	50% {
		transform: rotate(5deg) translate(-31px, 0);
		opacity: 1;
	}
	65% {
		transform: rotate(-2deg) translate(12px, 0);
		opacity: 1;
	}
	75% {
		transform: rotate(0) translate(0, 0);
		opacity: 1;
	}
	100% {
		transform: rotate(0) translate(0, 0);
		opacity: 1;
	}
}
.floating01 {
	position: relative;
	z-index: 99999999999999999999 !important;
	overflow: hidden;
	cursor: pointer;
}
.floating02 {
	position: relative;
	z-index: 99999999999999999999 !important;
	bottom: 17px;
}
.floating03 {
	position: relative;
	z-index: 99999999999999999999 !important;
	bottom: 34px;
}

@media screen and (max-width: 1600px) {
	.floating {
		right: 5%;
	}
}
.floating > img {
	position: fixed;
	top: 142px;
	bottom: 0;
}
.floating_item01 {
	position: fixed;
	top: 181px;
	margin-left: 29px;
	cursor: pointer;
	animation: floating_item01 1s ease-in-out infinite;
}
@keyframes floating_item01 {
	0% {
		transform: scale3d(1, 1, 1);
	}
	50% {
		transform: scale3d(1.05, 1.05, 1.05);
	}
	100% {
		transform: scale3d(1, 1, 1);
	}
}


.mfloating {
	display: none;
}


.f01 {
	position: absolute;
	top: 100px;
	left: calc(50% - 500px);
	animation: f_ani_01 linear 22s infinite;
	opacity: 0;
	z-index: 10;
}
.f02 {
	position: absolute;
	top: 0px;
	left: calc(50% - 300px);
	animation: f_ani_02 linear 24s infinite;
	opacity: 0;
	z-index: 10;
}
.f03 {
	position: absolute;
	top: -100px;
	left: calc(50% + 500px);
	animation: f_ani_01 linear 22s infinite;
	opacity: 0;
	z-index: 10;
}
.f04 {
	position: absolute;
	top: 250px;
	left: calc(50% + 200px);
	animation: f_ani_02 linear 30s infinite;
	opacity: 0;
	z-index: 10;
}
.f02 {
	position: absolute;
	top: 0px;
	left: calc(50% + 550px);
	animation: f_ani_02 linear 24s infinite;
	opacity: 0;
	z-index: 10;
}
.f05 {
	position: absolute;
	top: 500px;
	left: calc(50% + 55px);
	animation: f_ani_02 linear 23s 5s infinite;
	opacity: 0;
	z-index: 10;
}
.f06 {
	position: absolute;
	top: 200px;
	left: calc(50% + 500px);
	animation: f_ani_01 linear 20s infinite;
	opacity: 0;
	z-index: 10;
}
.f07 {
	position: absolute;
	top: 600px;
	left: calc(50% - 300px);
	animation: f_ani_02 linear 31s infinite;
	opacity: 0;
	z-index: 10;
}
.f08 {
	position: absolute;
	top: 0px;
	left: calc(50% - 750px);
	animation: f_ani_02 linear 25s infinite;
	opacity: 0;
	z-index: 10;
}
.f09 {
	position: absolute;
	top: 500px;
	left: calc(50% - 155px);
	animation: f_ani_01 linear 24s infinite;
	opacity: 0;
	z-index: 10;
}

.f10 {
	position: absolute;
	top: 500px;
	rotate: 45deg;
	left: calc(50% - 700px);
	animation: f_ani_01 linear 30s infinite;
	opacity: 0;
	z-index: 10;
}
.f11 {
	position: absolute;
	top: 0px;
	left: calc(50% - 600px);
	animation: f_ani_02 linear 24s 3s infinite;
	opacity: 0;
	z-index: 10;
}
.f12 {
	position: absolute;
	top: -100px;
	left: calc(50% + 0px);
	animation: f_ani_01 linear 26s infinite;
	opacity: 0;
	z-index: 10;
}
.f13 {
	position: absolute;
	top: 40px;
	left: calc(50% + 200px);
	animation: f_ani_02 linear 27s infinite;
	opacity: 0;
	z-index: 10;
}
.f14 {
	position: absolute;
	top: 0px;
	left: calc(50% + 700px);
	animation: f_ani_02 linear 22s infinite;
	opacity: 0;
	z-index: 10;
}

.f15 {
	position: absolute;
	top: 450px;    rotate: 45deg;

	left: calc(50% - 700px);
	animation: f_ani_02 linear 28s infinite;
	opacity: 0;
	z-index: 10;
}
.f16 {
	position: absolute;
	top: -200px;
	left: calc(50% - 650px);
	animation: f_ani_02 linear 26s infinite;
	opacity: 0;
	z-index: 10;
}
.f17 {
	position: absolute;
	top: 500px;
	left: calc(50% + 15px);
	animation: f_ani_01 linear 22s infinite;
	opacity: 0;
	z-index: 10;
}

.f18 {
	position: absolute;
	top: 800px;
	left: calc(50% - 100px);    rotate: 45deg;

	animation: f_ani_01 linear 34s infinite;
	opacity: 0;
	z-index: 10;
}
.f19 {
	position: absolute;
	top: 50px;
	left: calc(50% - 230px);
	animation: f_ani_02 linear 24s 3s infinite;
	opacity: 0;
	z-index: 10;
}

.f20 {
	position: absolute;
	top: 480px;
	left: calc(50% - 600px);
	rotate: 339deg;
	animation: f_ani_01 linear 27s infinite;
	opacity: 0;
	z-index: 10;
}
.f21 {
	position: absolute;
	top: -351px;
	left: calc(50% - 508px);
	animation: f_ani_02 linear 25s 3s infinite;
	opacity: 0;
	z-index: 10;
}
.f22 {
	position: absolute;
	top: 200px;
	left: calc(50% + 66px);
	animation: f_ani_01 linear 26s infinite;
	opacity: 0;
	z-index: 10;
}
.f23 {
	position: absolute;
	top: 0px;
	left: calc(50% + 350px);
	animation: f_ani_02 linear 27s infinite;
	opacity: 0;
	z-index: 10;
}
.f24 {
	position: absolute;
	top: -200px;
	rotate: 45deg;
	left: calc(50% - 600px);
	animation: f_ani_01 linear 22s infinite;
	opacity: 0;
	z-index: 10;
}

.f25 {
	position: absolute;
	top: 500px;
	rotate: 45deg;
	left: calc(50% - 700px);
	animation: f_ani_01 linear 30s 20s infinite;
	opacity: 0;
	z-index: 10;
}
.f26 {
	position: absolute;
	top: 0px;
	left: calc(50% - 600px);
	animation: f_ani_02 linear 24s 20s infinite;
	opacity: 0;
	z-index: 10;
}
.f27 {
	position: absolute;
	top: -100px;
	left: calc(50% + 0px);
	animation: f_ani_01 linear 26s 20s infinite;
	opacity: 0;
	z-index: 10;
}
.f28 {
	position: absolute;
	top: 40px;
	left: calc(50% + 200px);
	animation: f_ani_02 linear 27s 20s infinite;
	opacity: 0;
	z-index: 10;
}
.f29 {
	position: absolute;
	top: 0px;
	left: calc(50% + 700px);
	animation: f_ani_02 linear 22s 20s infinite;
	opacity: 0;
	z-index: 10;
}

@keyframes f_ani_01 {
	0% {
		transform: translateX(0px) translateY(0px) rotate(0deg);
		opacity: 0;
	}
	5% {
		opacity: 1;
	}

	30% {
		transform: translateX(120px) translateY(200px) rotate(-20deg);
	}
	60% {
		transform: translateX(20px) translateY(400px) rotate(0deg);
	}
	100% {
		transform: translateX(120px) translateY(650px) rotate(-15deg);
		opacity: 1;
	}
}
@keyframes f_ani_02 {
	0% {
		transform: translateX(0px) translateY(0px) rotate(0deg);
		opacity: 0;
	}
	5% {
		opacity: 1;
	}

	30% {
		transform: translateX(-210px) translateY(200px) rotate(25deg);
	}
	60% {
		transform: translateX(0px) translateY(400px) rotate(0deg);
	}
	100% {
		transform: translateX(-95px) translateY(650px) rotate(20deg);
		opacity: 1;
	}
}


.bg01 {
	background-image: url(../img/bg01_n.jpg);
	width: 1920px;
	height: 1410px;
	position: relative;
	margin: auto;
	background-position: top;
	background-repeat: no-repeat;
	align-items: center;
	text-align: center;
	max-width: 100%;
	z-index: 2;
	border-bottom: 2px solid #000;
	/*width: 100vw;*/
	/*background-position-y: bottom;*/
	/*background-size: cover;*/
}

.logo {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 50px;
	width: 172px;
}



.bg01_garand {
	position: absolute;
	left: 293px;
	top: 0;
	transform: translateX(-50%);
	transform-style: preserve-3d;
	perspective: 1400px;
	transform-origin: top center;
	animation: garlandFloatWind 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
	z-index: 5;
}

/* 깊이감 + 자연스러운 바람결 랜덤 흔들림 */
@keyframes garlandFloatWind {
	0% {
		transform: translateX(-50%) translateY(0px) rotateX(0deg) rotateY(0deg) skewY(0deg);
	}
	10% {
		transform: translateX(-50%) translateY(-3px) rotateX(-10deg) rotateY(4deg) skewY(1deg);
	}
	25% {
		transform: translateX(-50%) translateY(-10px) rotateX(-22deg) rotateY(7deg) skewY(2deg);
	}
	40% {
		transform: translateX(-50%) translateY(2px) rotateX(-14deg) rotateY(3deg) skewY(1deg);
	}
	55% {
		transform: translateX(-50%) translateY(6px) rotateX(12deg) rotateY(-5deg) skewY(-1.5deg);
	}
	70% {
		transform: translateX(-50%) translateY(3px) rotateX(6deg) rotateY(-2deg) skewY(-0.5deg);
	}
	85% {
		transform: translateX(-50%) translateY(-2px) rotateX(-8deg) rotateY(1deg) skewY(0.5deg);
	}
	100% {
		transform: translateX(-50%) translateY(0px) rotateX(0deg) rotateY(0deg) skewY(0deg);
	}
}

/* 이미지일 경우 */
.bg01_garand img {
	width: 100%;
	height: auto;
	transform-origin: top center;
	backface-visibility: hidden;

}


.bg01_cloud01 {
	position: relative;
	left: -600px;
	transform: translateX(-50%);
	top: 64px;
	animation: bg01_cloud01 45s
	linear infinite;
	z-index: 1;
}

@keyframes bg01_cloud01 {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateX(700px);
		opacity: 0;
	}
}

.bg01_subt {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 20px;
	z-index: 999999;
}


.bg01_subt01 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 20px;
	margin-left: -20px;
	width: 425px;
}

.bg01_subt02 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 90px;
	margin-left: -120px;
	width: 455px;
}

.bg01_subt03 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 96px;
	margin-left: 205px;
	width: 233px;
}

.bg01_title01 {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 195px;
	z-index: 999999;
	width: 686px;
}

.bg01_title02 {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 230px;
	z-index: 999999;
	width: 588px;
}

.bg01_gbb02 {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 385px;
	margin-left: -752px;
	z-index: 999999;
}


/* === 달리기 모션 === */

/* 팔 움직임 */
@keyframes runArm {
	0%   { transform: translateX(-50%) rotate(13deg); }
	50%  { transform: translateX(-50%) rotate(-15deg); }
	100% { transform: translateX(-50%) rotate(13deg); }
}

/* 다리 움직임 */
@keyframes runLeg {
	0%   { transform: translateX(-50%) rotate(-5deg); }
	50%  { transform: translateX(-50%) rotate(15deg); }
	100% { transform: translateX(-50%) rotate(-5deg); }
}

/* === 캐릭터 제자리 달리기 (전후 바운스, 왼쪽방향) === */
@keyframes runForwardLeft {
	0% { transform: translateX(0) translateY(0); }
	8% { transform: translateX(-10px) translateY(2px); }
	15% { transform: translateX(-20px) translateY(-3px); }
	30% { transform: translateX(-40px) translateY(0); }
	38% { transform: translateX(-50px) translateY(2px); }
	45% { transform: translateX(-60px) translateY(-3px); }
	60% { transform: translateX(-80px) translateY(0); }
	68% { transform: translateX(-90px) translateY(2px); }
	75% { transform: translateX(-100px) translateY(-3px); }
	100% { transform: translateX(-100px) translateY(0); }
}

/* === 착지 진동 효과 === */
@keyframes landShake {
	0% { transform: translateY(0); }
	20% { transform: translateY(2px); }
	40% { transform: translateY(-1px); }
	60% { transform: translateY(1px); }
	80% { transform: translateY(-0.5px); }
	100% { transform: translateY(0); }
}

/* === 실제로 옆으로 이동하는 모션 (전체 전진) === */
@keyframes moveSideways {
	0% { transform: translateX(0); }
	100% { transform: translateX(-950px); } /* ← 이동 거리 조정 가능 */
}
.bg01_gbb02_set {
	margin-left: 480px;
	animation:
			runForwardLeft 0.8s cubic-bezier(.42,0,.58,1) infinite, /* 달리기 제자리 모션 */
			landShake 0.15s ease-in-out infinite,                   /* 착지 진동 효과 */
			moveSideways 8s linear infinite;                        /* 옆으로 이동 */
}

/* === sweat01 : 대각선 왼쪽 위↔아래 === */
@keyframes section01_sweat01 {
	0% {
		transform: translate(0px, 0px);
	}
	25% {
		transform: translate(-5px, 5px); /* 왼쪽 아래로 */
	}
	50% {
		transform: translate(0px, 0px); /* 제자리 복귀 */
	}
	75% {
		transform: translate(-5px, -5px); /* 왼쪽 위로 */
	}
	100% {
		transform: translate(0px, 0px); /* 제자리 복귀 */
	}
}

/* === sweat02 : 대각선 오른쪽 앞↔뒤 === */
@keyframes section01_sweat02 {
	0% {
		transform: translate(0px, 0px);
	}
	25% {
		transform: translate(5px, 5px); /* 오른쪽 뒤로 */
	}
	50% {
		transform: translate(0px, 0px); /* 제자리 복귀 */
	}
	75% {
		transform: translate(5px, -5px); /* 오른쪽 앞으로 */
	}
	100% {
		transform: translate(0px, 0px); /* 제자리 복귀 */
	}
}

/* === 공통 === */
.bg01_sweat01,
.bg01_sweat02 {
	position: absolute;
	left: 50%;
	z-index: 999999;
	animation-timing-function: linear;
	animation-duration: 0.6s; /* 빠르게 반복 */
	animation-iteration-count: infinite;
}

/* === sweat01 : 왼쪽 ↙↗ 이동 === */
.bg01_sweat01 {
	top: 394px;
	margin-left: -710px;
	animation-name: section01_sweat01;
}

/* === sweat02 : 오른쪽 ↘↖ 이동 === */
.bg01_sweat02 {
	top: 430px;
	margin-left: -703px;
	animation-name: section01_sweat02;
	animation-delay: 0.3s; /* 교대로 반복 */
}











/* === 팔 === */
.bg01_gbb02_arm01 {
	position: absolute;
	left: 50%;
	transform-origin: top center;
	top: 498px;
	margin-left: -811px;
	rotate: -26deg;
	z-index: 99999;
	animation: runArm 0.6s infinite
	ease-in-out;
}

.bg01_gbb02_arm02 {
	position: absolute;
	left: 50%;
	transform-origin: top center;
	top: 497px;
	margin-left: -708px;
	z-index: 999999;
	animation: runArm 0.6s infinite ease-in-out;
	animation-delay: -0.3s; /* 팔 교차 */
}

/* === 다리 === */
.bg01_gbb02_leg01 {
	position: absolute;
	left: 50%;
	transform-origin: top center;
	top: 542px;
	rotate: -20deg;
	margin-left: -768px;
	z-index: 99999;
	animation: runLeg 0.6s infinite
	ease-in-out;
}

.bg01_gbb02_leg02 {
	position: absolute;
	left: 50%;
	transform-origin: top center;
	top: 535px;
	margin-left: -722px;
	z-index: 999999;
	animation: runLeg 0.6s infinite ease-in-out;
	animation-delay: -0.3s; /* 다리 교차 */
}





.bg01_run {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 212px;
	margin-left: -470px;
	z-index: 999999;
	width: 150px;
}






.bg01_mascot {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: -2px;
	margin-left: -226px;
	z-index: 999999;
	width: 234px;
}
.bg01_soccer {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: -199px;
	margin-left: 247px;
	z-index: 999999;
}


.bg01_mascots {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 450px;
	position: relative;
	top: -206px;
	z-index: 999999;
}





.gbb03 {
	animation: gbb03_move 3s ease-in-out infinite;
	position: relative;
	top: -600px;
	left: 44px;
	z-index: 999999;
}

/* 박스를 끌며 살짝 앞으로 → 복귀 → 더 뒤로 물러나는 모션 */
@keyframes gbb03_move {
	0%   { transform: translateX(0); }         /* 기본 위치 */
	20%  { transform: translateX(-30px); }     /* 팔이 앞으로 → 왼쪽으로 이동 (박스 끌기) */
	40%  { transform: translateX(-10px); }     /* 살짝 복귀 (긴장 풀림) */
	70%  { transform: translateX(15px); }      /* 살짝 더 뒤로 가며 몸 무게 빼기 */
	100% { transform: translateX(0); }         /* 다시 제자리 (다음 주기 준비) */
}


/* 전체를 한 덩어리로 이동시키는 래퍼 */
.gbb03_wrap {
	position: absolute;
	top: 200px;
	right: 0;
	/*animation: gbb03 10s linear infinite;*/
}

/* 개별 파츠는 wrap 기준으로 고정 */
.bg01_gbb03 {
	position: absolute;
	top: 0;
	right: 260px;
}




/* 과일 박스 애니 */
/* ===============================
   팔 (앞팔 + 뒷팔)
=============================== */
.bg01_gbb03_arm {
	position: absolute;
	top: 116px;
	right: 318px;
	z-index: 5;
	transform-origin: top right;
	animation: arm_pushpull 3s ease-in-out infinite;
}

.bg01_gbb03_arm2 {
	position: absolute;
	top: 116px;
	right: 247px;
	rotate: 26deg;
	z-index: -1;
	transform-origin: top right;
	animation: arm_pushpull2 3s
	ease-in-out infinite;
}

/* ===============================
   다리 (앞다리 + 뒷다리)
=============================== */
.bg01_gbb03_leg01 {
	position: absolute;
	top: 184px;
	right: 339px;
	z-index: 5;
	transform-origin: top center;
	animation: leg_move01 3s ease-in-out infinite;
}

.bg01_gbb03_leg02 {
	position: absolute;
	top: 185px;
	right: 321px;
	z-index: 4;
	transform-origin: top center;
	animation: leg_move02 3s ease-in-out infinite;
}

/* ===============================
   박스 (화면 밖에서 조금씩 안으로)
=============================== */
.bg01_box {
	position: absolute;
	/*top: 770px;*/
	right: 30px; /* 화면 밖으로 반쯤 나가 있는 위치 */
	z-index: 99;
	animation: box_pull 3s ease-in-out infinite;
}

/* ===============================
   Keyframes
=============================== */

/* 팔 앞쪽 */
@keyframes arm_pushpull {
	0%   { transform: translateX(0); }
	20%  { transform: translateX(5px); }    /* 앞으로 밀기 */
	40%  { transform: translateX(-3px); }   /* 뒤로 끌어당기기 */
	70%  { transform: translateX(-3px); }   /* 1초 멈춤 */
	100% { transform: translateX(0); }      /* 원위치 */
}

/* 팔 뒷쪽 (보조 팔, 약간 약하게) */
@keyframes arm_pushpull2 {
	0%   { transform: translateX(0); }
	20%  { transform: translateX(3px); }
	40%  { transform: translateX(-2px); }
	70%  { transform: translateX(-2px); }
	100% { transform: translateX(0); }
}

/* 다리1 (앞다리) */
@keyframes leg_move01 {
	0%   { transform: rotate(0deg); }
	20%  { transform: rotate(8deg); }
	40%  { transform: rotate(-5deg); }
	70%  { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}

/* 다리2 (뒷다리, 반대 움직임) */
@keyframes leg_move02 {
	0%   { transform: rotate(0deg); }
	20%  { transform: rotate(-8deg); }
	40%  { transform: rotate(5deg); }
	70%  { transform: rotate(5deg); }
	100% { transform: rotate(0deg); }
}

/* 박스가 팔 동작에 반응해서 “끌려 들어오는” 타이밍 */
@keyframes box_pull {
	0%   { transform: translateX(0); }          /* 기본 위치 (화면 밖 절반 상태) */
	20%  { transform: translateX(5px); }       /* 팔이 앞으로 → 박스 안으로 끌려옴 */
	40%  { transform: translateX(-2px); }       /* 팔이 뒤로 → 박스 살짝 밀려남 */
	70%  { transform: translateX(-2px); }       /* 잠시 멈춰 있음 */
	100% { transform: translateX(0); }          /* 다시 시작 위치로 복귀 */
}








.gbb_blink {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	/* top: -300px; */
	margin-top: -406px;
	z-index: 9999999;
	margin-left: 103px;
	animation: flash 1.2s steps(3, start) infinite;
}



.bg01_gbb01 {
	position: relative;
	/*left: 50%;*/
	/*transform: translateX(-50%);*/
	top: -520px;
	/*animation: section01_con_img*/
	/*ease-in-out 3s infinite;*/
	z-index: 999999;
}

@keyframes section01_con_img {
	0% {
		transform: translateY(0);
	}
	5% {
		transform: translateY(-30px);
	}
	10% {
		transform: translateY(0);
	}
	15% {
		transform: translateY(-30px);
	}
	20% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(-30px);
	}
	30% {
		transform: translateY(0);
	}
	36% {
		transform: translateY(-30px);
	}
	41% {
		transform: translateY(0px);
	}
	52% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(0);
	}
}




/* ============================
   🍎 팔 + 공 드리블 (2번 + 1초 쉬기)
============================ */
@keyframes arm_dribble_double {
	0%   { transform: translateX(-50%) rotate(0deg) translateY(0); }
	10%  { transform: translateX(-50%) rotate(8deg) translateY(7px); }
	20%  { transform: translateX(-50%) rotate(0deg) translateY(0); }
	30%  { transform: translateX(-50%) rotate(10deg) translateY(3px); }
	40%  { transform: translateX(-50%) rotate(0deg) translateY(0); }
	70%  { transform: translateX(-50%) rotate(0deg) translateY(0); } /* 1초 쉬기 */
	100% { transform: translateX(-50%) rotate(0deg) translateY(0); }
}

.bg01_gbb01_arm {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 1094px;
	margin-left: -121px;
	z-index: 9999999;
	transform-origin: top center;
	animation: arm_dribble_double 2.5s ease-in-out infinite;
}

/* ============================
   🏀 공 드리블 (2번 + 쉬기)
============================ */
@keyframes ball_dribble_double {
	0%   { transform: translateX(-50%) translateY(0) scaleY(1); }
	10%  { transform: translateX(-50%) translateY(45px) scaleY(1); }
	20%  { transform: translateX(-50%) translateY(0) scaleY(1); }
	30%  { transform: translateX(-50%) translateY(55px) scaleY(1); }
	40%  { transform: translateX(-50%) translateY(0) scaleY(1); }
	70%  { transform: translateX(-50%) translateY(0) scaleY(1); }   /* 쉬는 구간 */
	100% { transform: translateX(-50%) translateY(0) scaleY(1); }
}

/* ============================
   🍎 사과 + 🌰 대추 교대
============================ */
.bg01_ball01,
.bg01_ball02 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 1138px;
	margin-left: -149px;
	z-index: 999999;
	animation: ball_dribble_double 2.5s ease-in-out infinite;
}

/* 🍎 사과: 첫 사이클(2.5초) 동안만 보이고 이후 교대 */
@keyframes fruit_switch_apple {
	0%, 49.999% { opacity: 1; } /* 처음 2.5초 동안 보임 */
	50%, 100%   { opacity: 0; } /* 이후 대추로 전환 */
}

/* 🌰 대추: 사과의 반대 타이밍 (2.5초 뒤부터 보임) */
@keyframes fruit_switch_jujube {
	0%, 49.999% { opacity: 0; } /* 사과가 있을 때 숨김 */
	50%, 100%   { opacity: 1; } /* 다음 루프(2.5초 뒤)에 등장 */
}

/* ============================
   실제 애니 적용
============================ */
.bg01_ball01 img.apple {
	animation: fruit_switch_apple 5s linear infinite; /* 🍎 5초마다 한 번씩 등장 */
}

.bg01_ball02 img.jujube {
	animation: fruit_switch_jujube 5s linear infinite; /* 🌰 5초마다 한 번씩 등장 */
	animation-delay: 0s; /* 사과가 끝나면 바로 등장 */
}











.tab-buttons {
	display: flex;
	justify-content: center;
	position: relative;
	top: -484px;
}
@font-face {
	font-family: 'Juache';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff');
	font-weight: normal;
	font-display: swap;
}
@font-face {
	font-family: 'SDGothicNeoRound';
	src: url('/fonts/SDGothicNeoRound.woff2') format('woff2'),
	url('/fonts/SDGothicNeoRound.woff') format('woff'),
	url('/fonts/SDGothicNeoRound.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}
/* 공통 버튼 */
.tab-btn {
	font-family: 'Juache', sans-serif;
	width: 354px;
	height: 111px;
	border: 2px solid #000;
	font-size: 32px;
	line-height: 1.1;
	cursor: pointer;
	position: relative;
	transition: all 0.3s;
}

/* 탭1 */
.tab1 {
	background: #FFF0D1;
	color: #db5800;
	border-right: none;
}
.tab1.active {
	background: #db5800;
	color: #fff;
}
.tab1.active::before,
.tab1.active::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
}
/* 바깥 검정 테두리 */
.tab1.active::before {
	content: "";
	position: absolute;
	bottom: -17px; /* 바깥 검은 테두리 */
	left: 50%;
	transform: translateX(-50%);
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;
	border-top: 17px solid #000; /* 테두리 색 */
}

/* 안쪽 주황색 삼각형 */
.tab1.active::after {
	content: "";
	position: absolute;
	bottom: -15px; /* 안쪽 삼각형 (색상 동일) */
	left: 50%;
	transform: translateX(-50%);
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #db5800;
}

/* 탭2 */
.tab2 {
	background: #f8e2df;
	color: #9b1600;
}
.tab2.active {
	background: #9A1600;
	color: #fff;
}
.tab2.active::before,
.tab2.active::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
}


/* 바깥 검정 테두리 */
.tab2.active::before {
	content: "";
	position: absolute;
	bottom: -17px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;
	border-top: 17px solid #000; /* 검정 테두리 */
}

/* 안쪽 진한 붉은 삼각형 */
.tab2.active::after {
	content: "";
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #9A1600;
}




.bg02 {
	background-image: url(../img/bg02.jpg);
	width: 1920px;
	/*height: 1610px;*/
	position: relative;
	margin: auto;
	background-position: top;
	background-repeat: no-repeat;
	align-items: center;
	text-align: center;
	max-width: 100%;
	/*z-index: 2;*/
	/*width: 100vw;*/
	/*background-position-y: bottom;*/
	/*background-size: cover;*/
}

.section1 {
	background: #FFF0CF;
	padding-bottom: 160px;
}
.section2 {
	background: #F7E2DF;
	padding-bottom: 230px;
}


.tab-content {
	display: none;
	text-align: center;
	animation: fadeIn 0.5s ease;
	position: relative;
}

.tab01_content, .tab02_content {
	position: relative;
	z-index: 5;
}

.tab-content.active {
	display: block;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.tab01_gbb {
	position: relative;
	/*left: 50%;*/
	/*transform: translateX(-50%);*/
	top: 75px;
	z-index: 3;
}

.tab02_gbb {
	position: relative;
	/*left: 50%;*/
	/*transform: translateX(-50%);*/
	top: 75px;
	z-index: 3;
}
.tab02_content {
	position: relative;
	top: 20px;
}

.day-tabs {
	display: flex;
	justify-content: center;
	gap: 20px;
	/*margin: 20px 0;*/
	position: relative;
	z-index: 999999999999999;
}

.day-tabs {
	display: flex;
	gap: 20px;
	justify-content: center;
}



.day-btn {
	font-family: 'Juache', sans-serif;
	/* position: relative; */
	padding: 29px 111px;
	font-size: 37px;
	/* font-weight: 600; */
	color: #fff;
	background: #A6A6A6;
	border: 2px solid #000;
	border-radius: 45px;
	box-shadow: 0 6px 0 #777777, 0 6px 0 2px #000, inset 0 2px 3px rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: all 0.3s
	ease-in-out;
	min-width: 160px;
}

.day-btn:active {
	transform: translateY(4px);
	box-shadow:
			0 2px 0 #797979,
			0 2px 0 2px #000,
			inset 0 2px 3px rgba(0,0,0,0.4);
	background: #A6A6A6;
}

/* 활성 버튼 (주황색) */
.day-btn.active {
	background: #DB5800;
	box-shadow:
			0 6px 0 #A04101,
			0 6px 0 2px #000,
			inset 0 2px 3px rgba(255,255,255,0.3);
}

.day-btn.active:active {
	transform: translateY(4px);
	box-shadow:
			0 2px 0 #A04101,
			0 2px 0 2px #000,
			inset 0 2px 3px rgba(0,0,0,0.4);
	background: #A6A6A6;
}




/* 🔸 일차 콘텐츠 */
.day-content {
	display: none;
}
.day-content.active {
	display: block;
	position: relative;
	top: 100px;
}
.day-tabs {
	position: relative;
	top: 80px;
}


.homepage_btn {
	position: relative;
	top: 70px;
}

.homepage_btn2 {
	position: relative;
	top: 170px;
}





.bg03 {
	background-image: url(../img/bg03.png);
	width: 1920px;
	height: 2553px;
	position: relative;
	margin: auto;
	background-position: top;
	background-repeat: no-repeat;
	align-items: center;
	text-align: center;
	max-width: 100%;
	background-color: #FFF0CF;
	/*top: -20px;*/
	/*z-index: 2;*/
	/*width: 100vw;*/
	/*background-position-y: bottom;*/
	/*background-size: cover;*/
}

.bg03_game {
	position: relative;
	top: 230px;
	z-index: 4;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}


.bg03_con01 {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 155px;
	width: 704px;
}

.game_tips {
	position: relative;
	top: 55px;
}
.game_tip {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 155px;
	width: 690px;
}
.game_tip_txt {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 177px;
	margin-left: -246px;
	z-index: 9;
	width: 118px;
	animation: flash 1s steps(3, start) infinite;
}

.bg03_con02 {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 310px;
	z-index: 0;
}
.bg03_con02_wrap {
	position: relative;
	display: inline-block; /* 필요에 따라 block으로 변경 가능 */
}

.bg03_con02_heart {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: 505px;
	margin-left: -180px;
	pointer-events: none;
	width: 80px;
	height: 80px;
}

@keyframes heart-bounce {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-5px);
	}
}



/* 슈팅 게임 */
#game-container { position:relative; margin:20px auto; overflow:hidden; }

#game-board {
	width:100%; height:100%;
	background:url("../img/game_background.jpg") no-repeat center;
	background-size:auto;
}

#overlay {
	position:absolute; inset:0;
	background:rgba(0,0,0,0.7);
	display:flex; flex-direction:column; justify-content:center; align-items:center;
	z-index:10;
}
#game-title { margin-bottom:20px; }

#goal-wrap {
	position:absolute; bottom:243px; left:60%; transform:translateX(-50%);
	animation:moveGoal 0.6s infinite alternate linear;
	animation-play-state:paused;
	z-index:1;
}
#goaldae_n { display:block; width:auto; height:auto; }

@keyframes moveGoal {
	from { transform: translateX(-50%) translateX(-99%); }
	to   { transform: translateX(-50%) translateX(50%); }
}


#player-wrap { position:absolute; bottom:80px; left:50%; transform:translateX(-50%); z-index:4; }
#player { display:block; position:relative; z-index:4; }
#player-arms { position:absolute; top:160px; left:20px; z-index:3; transform:rotate(0deg); transition:all 0.2s ease; }
#hand-ball { position:absolute; top:173px; left:185px; z-index:2; rotate:41deg; width:auto; height:auto; }

#replay-btn {
	--btn-base: #af1900;
	/* --btn-shadow: #600e00; */
	margin-top: 20px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0px, rgba(255, 255, 255, 0) 5px), var(--btn-base);
	padding: 20px;
	width: 457px;
	border-radius: 50px;
	border: 3px solid black;
	font-size: 40px;
	font-weight: bold;
	color: white;
	box-shadow: 0 10px var(--btn-shadow);
	cursor: pointer;
	transition: all 0.2s;
}

#replay-btn {
	--btn-base: #9b1600;
}

.flying-ball { position:absolute; z-index:2; }



/* 자연스러운 성공 바운스 (Perfect!와 +1에 어울리는 느낌) */
@keyframes goalBounceSoft {
	0%   { transform: scaleY(1); filter: brightness(1); }
	25%  { transform: scaleY(0.96) translateY(2px); filter: brightness(1.1); }
	50%  { transform: scaleY(1.05) translateY(-3px); filter: brightness(1.15); }
	75%  { transform: scaleY(0.98) translateY(1px); filter: brightness(1.05); }
	100% { transform: scaleY(1) translateY(0); filter: brightness(1); }
}

.goal-bounce-soft {
	animation: goalBounceSoft 0.7s ease-out;
	transform-origin: bottom center;
}





/* 게임 시작 후 (shoot 모드) */
#action-btn.active {
	--btn-shadow: #ff6700;
	background-color: var(--btn-shadow);
}


#action-btn {
	--btn-base: #af1900;
	--btn-shadow: #160300;
	/*margin-top:20px;*/
	background:
			linear-gradient(to bottom, rgba(255,255,255,0.7) 0px, rgba(255,255,255,0) 5px),
			var(--btn-base);
	padding:20px;
	width:713px;
	border:3px solid black;
	font-size:40px;
	font-weight:bold;
	color:white;
	box-shadow:0 10px var(--btn-shadow);
	cursor:pointer;
	transition:all 0.2s;
}
#action-btn.hidden { display:none; }
#action-btn:active, #replay-btn:active { transform:translateY(4px); box-shadow:0 6px var(--btn-shadow); }


@font-face {
	font-family: 'NeoDunggeunGothicPro';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/NeoDunggeunmoPro-Regular.woff2') format('woff2');
	font-weight: normal;
	font-display: swap;
}

#hearts { position:absolute; top:35px; left:35px; display:flex; gap:12px; z-index:9; }
.heart { position:relative; width:80px; height:72px; background:url('../img/heart_white.png') no-repeat center/contain; transition:all 0.3s ease; }
.heart span { position:absolute; top:4px; left:50%; transform:translateX(-50%); font-size:35px; font-weight:900; font-family:'Wanted Sans', sans-serif; color:#000; }
.heart.full { background:url('../img/heart_red.png') no-repeat center/contain; }
.heart.full span { color:#fff; }
.heart.broken { background:url('../img/heart_broken.png') no-repeat center/contain; filter:grayscale(1); opacity:0.9; }
.heart.broken span {
	color: #000 !important;
}
.perfect, .plusOne, .miss { position:absolute; font-family:'NeoDunggeunGothicPro', sans-serif; font-weight:normal; z-index:6; }
.perfect { font-size:50px; color:#ff2b2b; opacity:0; animation:perfectPop 1s ease-out forwards; }
.plusOne { font-size:45px; color:#ff2b2b; opacity:1; animation:plusOneAnim 1s ease-out forwards; }
.miss { font-size:50px; color:#555; opacity:0; animation:missAnim 1s ease-out forwards; }

@keyframes perfectPop { 0%{transform:scale(0.5);opacity:0;}50%{transform:scale(1.3);opacity:1;}100%{transform:scale(1);opacity:0;} }
@keyframes plusOneAnim { 0%{transform:scale(0.6);opacity:1;}50%{transform:scale(1.3);opacity:1;}100%{transform:translateY(-90px) scale(1);opacity:0;} }
@keyframes missAnim { 0%{transform:scale(0.5);opacity:0;}50%{transform:scale(1.3);opacity:1;}100%{transform:scale(1);opacity:0;} }

.fart { position:absolute; bottom:60px; left:50%; transform:translateX(-50%); font-size:28px; color:black; opacity:0; animation:fartAnim 0.6s ease-out forwards; z-index:6; font-weight:bold; }
@keyframes fartAnim { 0%{opacity:1; transform:translate(-50%,0) scaleY(1);}50%{opacity:0.8; transform:translate(-50%,10px) scaleY(1.5);}100%{opacity:0; transform:translate(-50%,20px) scaleY(0.5);} }

#popup { display:none; position:absolute; inset:0; background:rgba(0,0,0,0.6); color:white; text-align:center; z-index:99999999999; }


















.sns {
	background-color: #fff;
}

.sns_con {
	padding: 180px 0 60px 0;
	display: flex;
	justify-content: center;
}

.notice_con {
	background-color: #dddddd;
	border-top: 2px solid #121212;
	padding: 55px;
	display: flex;
	justify-content: center;
}



.foot {
	background-color: #121212 !important;
	padding: 60px;

}

.footer_con {
	display: flex;
	justify-content: center;
	padding: 0 !important;
}



@media screen and (max-width: 768px) {
	.mfloating {
		width: 100%;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		z-index: 999999999;
	}
	.floating {
		display: none;
	}
	.bg01_mascot, .bg01_run, .bg01_soccer, .gbb03 {
		opacity: 0;
	}
	.bg01_garand {
		left: 94px;
		rotate: -11deg;
		top: -69px;

	}
	.bg01_gbb02_set {
		margin-left: 1500px;
		margin-top: 30px;
	}
	.agree_box {
		font-size: 21px !important;
	}
	.agree_box .h5 {
		font-size: 22px !important;
	}
	.agree_radio label {
		font-size: 22px !important;
	}
	.agree_radio {
		font-size: 23px !important;
	}
	.foot {
		padding-bottom: 220px;
	}
}








/* 팝업 */
.answer_popup {
	width: 700px;
	display: none;
	/*background-color: #fff;*/
	letter-spacing: -1px;
	left: 50% !important;
	transform: translateX(-50%) !important;
}

.answer_popup .title {
	position:relative;
	padding: 40px;
	/*background-image:url('../img/pop_title.png');*/
	background-size:cover;
	background-position:center;
	text-align: center;
}

.answer_popup .content {
	padding: 30px 40px 5px 40px;
	background: #fff;
}

.pb_30 {
	padding-bottom: 30px;
}
p.notice2 {
	color: #000;
	padding-top: 15px;
	font-size: 15px;
}
.agree_wrap {
	padding-bottom: 13px;
	margin-bottom: 5px;
	text-align:left;
}
.popup_flash {
	display: flex;
	justify-content: center;
	margin-top: 40px;
	animation: flash 1s steps(1, start) infinite;
}

@keyframes flash {
	0%, 50% {
		opacity: 1;
	}
	50.0001%, 100% {
		opacity: 0;
	}
}

.youtube_btn {
	display: flex;
	justify-content: center;
	padding: 30px;
}
.agree_box {
	width: 100%;
	overflow-y: scroll;
	border: 1px solid #e6e6e6;
	padding: 16px;
	box-sizing: border-box;
	/*margin-top: 20px;*/
	margin-bottom: 20px;
	height: 195px;
	background: #f1f1f1;
	color: #333;
	/*border: 1px solid #333;*/
	font-size: 14px;
}

.agree_box p {
	margin-bottom: 20px;
}

.agree_box p:last-of-type {
	margin-bottom: 0;
}

.agree_box .h5 {
	display: inline-block;
	font-weight: 800;
	font-size: 19px;
}

.agree_box .h6 {
	display: inline-block;
	font-weight: 800;
}

.agree_radio {
	color: #000;
	font-size: 18px;
	text-align: center;
}

.agree_radio label {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	display:inline-block;
	/*margin-left: 10px;*/
	cursor:pointer;
	font-size: 17px;
}

.sub_title {
	text-align: center;
	font-size: 30px;
	font-weight: 800;
	color: #333;
	margin-bottom: 20px;
}
.sub_title.etc_quest {
	margin-top: 50px;
}
.sub_title p {
	color: #00df98;
	display: inline-block;
}

.board_write_form {
	width: 100%;
}


.board_write_form .form_field:first-child {
	border-top: 1px solid #c6c6c6;
}

.board_write_form .form_field {
	font-size: 15px;
	border-bottom: 1px solid #c6c6c6;
	border-right: 1px solid #d9d9d9;
}



.board_write_form .form_field th {
	border-bottom: 1px solid #c6c6c6;
	width: 160px;
	font-size: 18px;
	color: #fff;
	text-align: center;
	background-color: #5d300b;
	padding: 20px;
	vertical-align:middle;
}

.board_write_form.etc_quest .form_field th {
	background-color: #00df98;
	padding: 20px;
	vertical-align:middle;
}

.board_write_form td.field {
	font-size: 18px;
	padding: 20px;
	text-align:left;
	vertical-align:middle;
}

.board_write_form td.field.route span,
.board_write_form td.field.age span {
	display:inline-block;
	margin-right: 30px;
}


.button_box {
	margin-top: 0px;
	display: flex;
	justify-content: center;
}
.buttons {
	text-align: center;
}
.buttons a.confirm {
	display: inline-block;
	/*font-size: 22px;*/
	width: 316px;
	/*height: 70px;*/
	line-height:70px;
	cursor:pointer;
	/*user-select: none;*/
	/*-webkit-user-select: none;*/
	/*-moz-user-select: none;*/
	/*-ms-user-select: none;*/
}
.buttons a.cancel {
	display: inline-block;
	/*font-size: 22px;*/
	width: 316px;
	/*height: 70px;*/
	line-height:70px;
	cursor:pointer;
}
.btn_l {
	margin-left: 7px;
}
.btn_r {
	margin-right: 7px;
}


.board_write_form input[type='text'],
.board_write_form input[type='tel'],
.board_write_form select {
	height: 35px;
}

.w120 {
	width: 120px;
}

.w200 {
	width: 250px;
}

.w160 {
	width: 160px;
}

.strong {
	font-size:15px;
}

.lotto_popup {
	display:none;
	width: 1100px;
	background-image:url('../img/win_bg.jpg');
	background-position:center;
	background-size:cover;
	padding-bottom: 80px;
}

.lotto_popup .title {
	padding: 25px;
	margin-bottom: 40px;
}

.lotto_popup .content .scratch {
	width: 812px;
	margin: auto;
	height: 590px;
	background-image:url('../img/lotto_bg.png');
	background-position:center;
	position:relative;
	cursor: url('../img/coin_s_img.png'), url('../img/coin_s_img.cur'), auto;
}

.lotto_popup .content .scratch .coin {
	position:absolute;
	right: -10px;
	bottom: -10px;
}

.lotto_popup .content .scratch .canvas_wrap {
	width: 550px !important;
	height: 324px !important;
	position:absolute;
	left: 50%;
	top: 50%;
	transform:translate(-50%, -50%);
}

.lotto_popup .content .scratch .canvas_wrap .canvas {
	position:absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;

}

.lotto_popup .content .scratch .complete_item {
	width: 100%;
	height: 100%;
	position:absolute;
	left: 50%;
	top: 50%;
	transform:translate(-50%, -50%);
	background-position:center;
}

.lotto_popup .content .scratch .complete_item.n0 {
	background-image:url('../img/win_store_new.png');
}

.lotto_popup .content .scratch .complete_item.n1 {
	background-image:url('../img/win_br_new.png');
}

.lotto_popup .content .scratch .complete_item.n2 {
	background-image:url('../img/win_happy_new.png');
}

.lotto_popup .content .scratch .complete_item.n3 {
	background-image:url('../img/win_chicken_new.png');
}










/* style css */
body, html {
	overflow-x:hidden;
}

img {
	-webkit-user-drag: none;
}

::selection {
   background: #db5800;
   color: #fff
}

::-moz-selection {
   background: #db5800;
   color: #fff
}


::-webkit-selection {
    background: #db5800;
   color: #fff
}


body {
	-webkit-font-smoothing: antialiased;
	color:#333;
}



@media(min-width:992px) {
	.pc {
		display:block !important
	}

	.mobile {
		display:none !important
	}
}

@media(max-width:991px) {

	.pc {
		display:none !important
	}

	.mobile {
		display:block !important
	}

	

}

@media(max-width:575px) {

	


}