@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
/* 스크롤은 되는데 스크롤바만 숨김 */
html, body {
	-ms-overflow-style: none;  /* IE/Edge */
	scrollbar-width: none;     /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;             /* Chrome/Safari */
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Isamanru';
}

ol, ul {
    list-style: none
}

blockquote,
q {
    quotes: '"' '"'
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

address {
    font-style: normal
}

textarea {
    width: 100%;
    resize: none;
}

button, img, input, select {
    vertical-align: middle
}

.ellipsis {
    display:inline-block;
    max-width:100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: normal;
    vertical-align:middle
}

table td a {
    overflow: hidden;
    height: auto;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

body, html {
    overflow-x:hidden;
}

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

img {
    max-width: 100%;
    -webkit-user-drag: none;
}

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

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

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

area {
    cursor: pointer;
}

.rel {
    position: relative;
}

button {
	background-color: transparent;
	border: none;
	outline: none;
	box-shadow: none;
}

.container {
    max-width: 1920px;
    margin: auto;
}

.section .inner {
    max-width: 750px;
    margin: auto;
    text-align: center;
}

.section_main {
	position: relative;
	height: 1730px;
	background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/main_bg.jpg?new');
	background-position: center 0;
	background-size: cover;
	padding-top: 40px;
}

.section_main .cha {
	position: absolute;
}

.section_main .cha.left {
	left: 50%;
}

.section_main .cha.right {
	right: 50%;
}

.section_main .cha.horse {
	position: absolute;
	top: 610px;
	margin-left: -344px;
	width: 106px;
	height: 132px;
}

.section_main .cha .shadow {
	position: absolute;
	left: 0;
	bottom: -8px;
}

.section_main .cha.horse .penguin {
	position: absolute;
	width: 100%;
	height: 100%;
	animation: ease-in-out horseBody 4.5s infinite;
}

.section_main .cha.horse .body {
	position: absolute;
	z-index: 2;
	bottom: 0;
}

.section_main .cha.horse .leg {
	position: absolute;
	bottom: 0;
	left: 0;
}

.section_main .cha.horse .leg.left {
	bottom: 16px;
	left: 4px;
	animation: ease-in-out horseLeftLeg 4.5s infinite;
}

.section_main .cha.horse .leg.right {
	left: 16px;
	bottom: 8px;
	z-index: 3;
	animation: ease-in-out horseRightLeg 4.5s infinite;
}

@keyframes horseBody {
	0% {
		transform: rotate(0) translate(0, 0);
	}
	10% {
		transform: rotate(30deg) translate(28px, -24px);
	}
	20% {
		transform: rotate(32deg) translate(32px, -28px);
	}
	30% {
		transform: rotate(0) translate(0, 0);
	}
	100% {
		transform: rotate(0) translate(0, 0);
	}
}

@keyframes horseRightLeg {
	0% {
		transform: rotate(0) translate(0, 0);
	}

	5% {
		transform: rotate(27deg) translate(-8px, -4px);
	}

	8% {
		transform: rotate(0) translate(0, 0);
	}

	13% {
		transform: rotate(27deg) translate(-8px, -4px);
	}

	18% {
		transform: rotate(0) translate(0, 0);
	}

	23% {
		transform: rotate(27deg) translate(-8px, -4px);
	}

	28% {
		transform: rotate(0) translate(0, 0);
	}

	100% {
		transform: rotate(0) translate(0, 0);
	}
}

@keyframes horseLeftLeg {
	0% {
		transform: rotate(0) translate(0, 0);
	}

	2% {
		transform: rotate(0) translate(0, 0);
	}

	7% {
		transform: rotate(27deg) translate(-8px, -4px);
	}

	10% {
		transform: rotate(0) translate(0, 0);
	}

	15% {
		transform: rotate(27deg) translate(-8px, -4px);
	}

	20% {
		transform: rotate(0) translate(0, 0);
	}

	25% {
		transform: rotate(27deg) translate(-8px, -4px);
	}

	30% {
		transform: rotate(0) translate(0, 0);
	}

	100% {
		transform: rotate(0) translate(0, 0);
	}
}

.section_main .cha.yanggoong {
	margin-left: -674px;
	top: 610px;
}

.section_main .cha.yanggoong .body img {
	width: 92px;
}

.section_main .cha.yanggoong .hwal {
	position: absolute;
	width: 32px;
	height: 120px;
	left: -8px;
	top: -40px;
	animation: hwal ease-in-out 4s infinite;
	background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/people_yanggoong_hwal01.png?new');
	background-size: 100% 100%;
}

.section_main .cha.yanggoong .hwasal {
	position: absolute;
	width: 80px;
	left: -16px;
	top: 8px;
	animation: hwasal ease-in-out 4s infinite;
}

.section_main .cha.yanggoong .hand_01  {
	position: absolute;
	left: -4px;
	top: 4px;
	width: 12px;
}

.section_main .cha.yanggoong .hand_02  {
	position: absolute;
	right: 22px;
	top:16px;
	width: 12px;
}

@keyframes hwal {
	0% {
		transform: rotate(0deg) translate(0px, 0px);
		width: 80px;
		left: -12px;
		background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/people_yanggoong_hwal02.png?new');
	}

	71% {
		transform: rotate(0deg) translate(0px, 0px);
		width: 80px;
		left: -12px;
		background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/people_yanggoong_hwal02.png?new');
	}
	
	76% {
		width: 80px;
		left: -12px;
		background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/people_yanggoong_hwal02.png?new');
	}
	
	77% {
		width: 36px;
		left: -8px;
		background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/people_yanggoong_hwal01.png?new');
	}

	82% {
		transform: rotate(-45deg) translate(3px, 10px);
		width: 36px;
		left: -8px;
		background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/people_yanggoong_hwal01.png?new');
	}

	98% {
		transform: rotate(-45deg) translate(3px, 10px);
		width: 36px;
		left: -8px;
		background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/people_yanggoong_hwal01.png?new');
	}

	99% {
		transform: rotate(-45deg) translate(3px, 10px);
		width: 36px;
		left: -8px;
		background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/people_yanggoong_hwal01.png?new');
	}

	100% {
		transform: rotate(0deg) translate(0px, 0px);
		left: -12px;
		width: 80px;
		background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/people_yanggoong_hwal02.png?new');
	}
}

@keyframes hwasal {
	0% {
		transform: translate(0, 0);
		opacity: 1;
	}

	70% {
		transform: translate(0, 0);
		opacity: 1;
	}

	85% {
		transform: translate(-440px, -40px);
		opacity: 1;
	}

	98% {
		transform: translate(-440px, -40px);
		opacity: 1;
	}

	99% {
		transform: translate(-440px, -40px);
		opacity: 0;
	}

	100% {
		transform: translate(0px, 0);
		opacity: 0;
	}
}

.section_main .cha.baegoo {
	margin-left: -840px;
	top: 620px;
	width: 120px;
	height: 180px;
}

.section_main .cha.baegoo .body {
	position: absolute;
	width: 92px;
}

.section_main .cha.baegoo .body img {
	width: 92px;
}

.section_main .cha.baegoo .arms img {
	width: 40px;
}

.section_main .cha.baegoo .arms.left {
	position: absolute;
	left: -8px;
	top: 64px;
}

.section_main .cha.baegoo .arms.right {
	position: absolute;
	left: 60px;
	top: 52px;
}

.section_main .cha.baegoo .ball {
	position: absolute;
	right: 0;
	top: -56px;
}

.section_main .cha.baegoo .ball img {
	width: 56px;
}

/* ===== 배구 싱크 버전 ===== */
.section_main .cha.baegoo{
  --dur: 3.5s;       /* 전부 같은 duration */
  --ballUp: 46px;    /* 공 높이 */
  --bodyUp: 12px;    /* 몸 점프 높이 */
  --armUp: 12px;     /* 팔 들어올림 높이 */
}

/* display 이슈 방지 */
.section_main .cha.baegoo .body,
.section_main .cha.baegoo .arms,
.section_main .cha.baegoo .ball{ display:block; }
.section_main .cha.baegoo img{ display:block; }

/* 공 */
.section_main .cha.baegoo .ball{
  transform-origin: 50% 90%;
  animation: baegooBall var(--dur) cubic-bezier(.2,.65,.2,1) infinite;
  will-change: transform;
}

/* 몸통 */
.section_main .cha.baegoo .body{
  transform-origin: 50% 100%;
  animation: baegooBody var(--dur) ease-in-out infinite;
  will-change: transform;
}
.section_main .cha.baegoo .body img{
  transform-origin: 50% 100%;
  animation: baegooBody var(--dur) ease-in-out infinite;
  will-change: transform;
}

/* 팔(회전+업다운) */
.section_main .cha.baegoo .arms{
  transform-origin: 60% 12%; /* 어깨 기준 */
  will-change: transform;
}
.section_main .cha.baegoo .arms.left{
  animation: baegooArmL var(--dur) ease-in-out infinite;
}
.section_main .cha.baegoo .arms.right{
  animation: baegooArmR var(--dur) ease-in-out infinite;
}

/* ===== Keyframes: "같은 타임라인" ===== */
/* 0~10%: 바닥 접지(공 눌림) -> 30~45%: 최고점 -> 100%: 착지 반복 */
@keyframes baegooBall{
  0%   { transform: translateY(0) scaleX(1.10) scaleY(0.90); }
  10%  { transform: translateY(0) scaleX(1.10) scaleY(0.90); }

  28%  { transform: translateY(calc(var(--ballUp) * -1)) scaleX(0.96) scaleY(1.05); }
  45%  { transform: translateY(calc(var(--ballUp) * -1.08)) scaleX(1.00) scaleY(1.00); }

  70%  { transform: translateY(calc(var(--ballUp) * -0.25)) scaleX(1.00) scaleY(1.00); }
  88%  { transform: translateY(0) scaleX(1.05) scaleY(0.95); }
  100% { transform: translateY(0) scaleX(1.10) scaleY(0.90); }
}

@keyframes baegooBody{
  0%   { transform: translateY(0) scaleX(1.02) scaleY(0.98); }
  10%  { transform: translateY(1px) scaleX(1.03) scaleY(0.97); } /* 눌림 */

  18%  { transform: translateY(calc(var(--armUp) * -0.7)); } /* 먼저 치켜듦 */
  30%  { transform: translateY(calc(var(--armUp) * -1.0)); }
  45%  { transform: translateY(calc(var(--armUp) * -1.3)); } /* 최대 */
  60%  { transform: translateY(calc(var(--armUp) * -0.8)); }

  85%  { transform: translateY(0); }
  100% { transform: translateY(0) scaleX(1.02) scaleY(0.98); }
}

/* 팔: 공보다 "살짝 먼저" 올라가서(18%) 최고점(45%)에서 회전 최대 */
@keyframes baegooArmL{
  0%   { transform: translateY(calc(var(--armUp) * 0.6)) rotate(0deg); }
  10%  { transform: translateY(calc(var(--armUp) * 0.6)) rotate(-2deg); }


  18%  { transform: translateY(calc(var(--armUp) * -1.1)); } /* 먼저 치켜듦 */
  30%  { transform: translateY(calc(var(--armUp) * -1.6)); }
  45%  { transform: translateY(calc(var(--armUp) * -2.2)); } /* 최대 */
  60%  { transform: translateY(calc(var(--armUp) * -1.1)); }
  

  85%  { transform: translateY(calc(var(--armUp) * 0.6)) rotate(-2deg); }
  100% { transform: translateY(calc(var(--armUp) * 0.6)) rotate(0deg); }
}

@keyframes baegooArmR{
  0%   { transform: translateY(0) rotate(0deg); }
  10%  { transform: translateY(0) rotate(2deg); }

  18%  { transform: translateY(calc(var(--armUp) * -0.7)) rotate(20deg); }
  30%  { transform: translateY(calc(var(--armUp) * -1.0)) rotate(24deg); }
  45%  { transform: translateY(calc(var(--armUp) * -1.1)) rotate(26deg); }
  60%  { transform: translateY(calc(var(--armUp) * -0.8)) rotate(20deg); }

  85%  { transform: translateY(0) rotate(2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.section_main .cha.yagoo {
	position: absolute;
	margin-left: -568px;
	top: 660px;
	width: 150px;
	height: 206px;
}

.section_main .cha.yagoo .ball {
	position: absolute;
	left: -20px;
	bottom: 52px;
}

/* ===== 야구공 왕복 ===== */
.section_main .cha.yagoo{
  --ballDur: 3s;   /* 전체 루프 길이(왕복+딜레이+왕복+딜레이) */
  --ballDX: 110px;
  --ballDY: 70px;
}

.section_main .cha.yagoo .ball{
  animation: yagooBallMove var(--ballDur) ease-in-out infinite;
  will-change: transform;
}

@keyframes yagooBallMove{
  /* 1회 왕복 */
  0%   { transform: translate(0, 0); }
  40%  { transform: translate(calc(var(--ballDX) * -1), calc(var(--ballDY) * 1)); } /* 도착 */
  60%  { transform: translate(0, 0); } /* 복귀 */

  /* 딜레이(정지) */
  100%  { transform: translate(0, 0); }
}

.section_main .cha.tagwondo {
	position: absolute;
	margin-left: -728px;
	top: 876px;
	width: 210px;
	height: 232px;
}

.section_main .cha.tagwondo .body {
	position: relative;
	z-index: 2;
}

.section_main .cha.tagwondo .leg {
	position: absolute;
	left: 110px;
	top: 44px;
	transform-origin: 0 100%;
}

.section_main .cha.tagwondo{
  --kickDur: 2.6s;
  --kickRot: -65deg;
  --kickLift: -10px;

  --bodyRot: -6deg;     /* 몸통 젖힘 각도(작게) */
  --bodyLift: -4px;     /* 몸통이 살짝 뜨는 느낌 */
}

/* 몸통도 같이 넘어감 */
.section_main .cha.tagwondo .body{
  transform-origin: 60% 85%; /* 허리/골반 근처 느낌 */
  animation: tkBodyLean var(--kickDur) ease-in-out infinite;
  will-change: transform;
}

/* 혹시 transform 덮어쓰면 img에도 걸기 */
.section_main .cha.tagwondo .body img{
  transform-origin: 60% 85%;
  animation: tkBodyLean var(--kickDur) ease-in-out infinite;
  will-change: transform;
}

/* leg는 네가 쓰던 그대로 */
.section_main .cha.tagwondo .leg{
  animation: tkKick var(--kickDur) cubic-bezier(.2,.8,.2,1) infinite;
  will-change: transform;
}

/* 발차기 타이밍이랑 맞춘 몸통 */
@keyframes tkBodyLean{
  0%   { transform: rotate(0deg) translate(0, 0); }
  10%  { transform: rotate(0deg) translate(0, 0); }

  /* 준비 동작: 살짝 반대로(균형 잡는 느낌) */
  18%  { transform: rotate(2deg) translate(0, 1px); }

  /* 차올릴 때 몸통도 같이 젖힘 */
  30%  { transform: rotate(var(--bodyRot)) translate(-1px, var(--bodyLift)); }

  /* 임팩트 멈칫 */
  42%  { transform: rotate(calc(var(--bodyRot) * 1.05)) translate(-1px, calc(var(--bodyLift) * 1.1)); }

  /* 회수 */
  55%  { transform: rotate(0deg) translate(0, 0); }

  /* 딜레이(정지) */
  100% { transform: rotate(0deg) translate(0, 0); }
}

/* 태권도 발차기 */
.section_main .cha.tagwondo{
  --kickDur: 2.6s;     /* 전체 루프(발차기 1회 + 딜레이) */
  --kickRot: -45deg;   /* 왼쪽으로 차올리는 각도(더 높게 = 더 큰 절대값) */
  --kickLift: -10px;   /* 차올릴 때 살짝 들어올림 */
}

.section_main .cha.tagwondo .leg{
  /* 너가 이미 잡아둔 origin 그대로 씀 */
  animation: tkKick var(--kickDur) cubic-bezier(.2,.8,.2,1) infinite;
  will-change: transform;
}

/* 0~55% 발차기, 55~100% 딜레이(정지) */
@keyframes tkKick{
  /* 대기 */
  0%   { transform: rotate(0deg) translateY(0); }
  10%  { transform: rotate(0deg) translateY(0); }

  /* 살짝 뒤로 당겼다가(준비 동작) */
  18%  { transform: rotate(4deg) translateY(2px); }

  /* 스냅! 높게 차올림 */
  30%  { transform: rotate(var(--kickRot)) translateY(var(--kickLift)); }

  /* 최고점에서 아주 잠깐 멈칫(임팩트) */
  36%  { transform: rotate(calc(var(--kickRot) * 1.05)) translateY(calc(var(--kickLift) * 1.1)); }
  42%  { transform: rotate(var(--kickRot)) translateY(var(--kickLift)); }

  /* 회수(되돌림) */
  60%  { transform: rotate(0deg) translateY(0); }

  /* 딜레이(정지) */
  100% { transform: rotate(0deg) translateY(0); }
}

.section_main .cha.bochia {
	position: absolute;
	margin-left: -888px;
	top: 1100px;
	width: 170px;
	height: 76px;
}

.section_main .cha.bochia .body img {
	width: 276px;
}

.section_main .cha.bochia .ball {
	position: absolute;
	right: 40px;
	top: 70px;
}

/* ===== 보치아 공 던지기(오른쪽 아래 하강) + 딜레이 ===== */
.section_main .cha.bochia{
  --dur: 2.8s;      /* 전체 루프(던지기 1회 + 딜레이) */
  --dx: 140px;      /* 오른쪽 이동 */
  --dy: 90px;       /* 아래 이동 */
}

.section_main .cha.bochia .ball{
  transform-origin: 50% 50%;
  animation: bochiaThrow var(--dur) cubic-bezier(.2,.75,.2,1) infinite;
  will-change: transform;
}

/* 이미지 베이스라인 흔들림 방지 */
.section_main .cha.bochia .ball img{ display:block; }

/* 0~55% 동작, 55~100% 홀드(딜레이) */
@keyframes bochiaThrow{
  /* 대기 */
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  12%  { transform: translate(0,0) scale(1) rotate(0deg); }

  /* 살짝 당겼다가(던지기 준비) */
  20%  { transform: translate(-10px, -6px) scale(1) rotate(-8deg); }

  /* 던짐: 오른쪽 아래로 가속 하강 */
  40%  { transform: translate(var(--dx), var(--dy)) scale(0.98) rotate(120deg); }

  /* 착지 느낌(조금 더 내려갔다가) */
  48%  { transform: translate(calc(var(--dx) * 1.05), calc(var(--dy) * 1.1)) scale(0.96) rotate(170deg); }

  /* 원위치 복귀 */
  55%  { transform: translate(0,0) scale(1) rotate(0deg); }

  /* 딜레이(정지) */
  100% { transform: translate(0,0) scale(1) rotate(0deg); }
}

.section_main .cha.bochia .ball img {
	width: 24px;
}

.section_main .cha.swimming {
	position: absolute;
	margin-right: -708px;
	top:660px;
	width: 276px;
	height: 302px;
}

.section_main .cha.swimming{
  --dur: 2.2s;
  --rot: -6deg;     /* 왼쪽(-)으로 기울기 */
  --dy: 4px;        /* 아래로 살짝 */
  transform-origin: 50% 60%;
  animation: swimTilt var(--dur) ease-in-out infinite;
  will-change: transform;
}

.section_main .cha.swimming img{ display:block; }

@keyframes swimTilt{
  0%   { transform: rotate(0deg) translate(0,0); }
  20%  { transform: rotate(var(--rot)) translate(0, var(--dy)); }
  35%  { transform: rotate(var(--rot)) translate(0, var(--dy)); } /* 멈칫(딜레이) */
  60%  { transform: rotate(0deg) translate(0,0); }
  100% { transform: rotate(0deg) translate(0,0); } /* 딜레이 */
}

.section_main .cha.yort {
	position: absolute;
	margin-right: -1058px;
	top: 880px;
	width: 276px;
	height: 302px;
}

/* 요트: 반원(반시계) + 복귀 + 딜레이, 부드럽게 */
.section_main .cha.yort{
  --dur: 3.4s;   /* 전체 루프 */
  --r: 28px;     /* 반원 크기 */
}

/* ✅ 최신 브라우저: 모션패스로 '진짜 반원' */
@supports (offset-path: path("M 0 0 L 1 1")) {
  .section_main .cha.yort{
    /* 6시(시작: 0,0) -> 반시계 반원 -> 12시(0, -2r)
       sweep-flag = 0  => 반시계 방향(기본 요청)
       만약 방향이 반대로 나오면 마지막 0을 1로만 바꿔 */
    offset-path: path("M 0 0 A 28 28 0 0 0 0 -56");
    /* ↑ 여기 28/56은 --r=28 기준 값.
       r 바꾸면 아래 두 숫자도 같이 바꿔야 함 (예: r=40이면 A 40 40 ... 0 -80) */

    offset-rotate: 0deg;      /* 경로 따라 자동 회전 X */
    offset-distance: 0%;
    animation: yortArcOnce var(--dur) linear infinite;
    will-change: offset-distance;
  }

  /* 파도에 떠밀리는 느낌: 몸은 살짝 흔들리기 */
  .section_main .cha.yort img{
    display:block;
    transform-origin: 50% 60%;
    animation: yortRock var(--dur) ease-in-out infinite;
    will-change: transform;
  }

  /* 0~18% 대기 -> 18~50% 반원 상승 -> 50~82% 반원 하강(복귀) -> 82~100% 대기 */
  @keyframes yortArcOnce{
    0%, 18%   { offset-distance: 0%; }
    50%       { offset-distance: 100%; }
    82%, 100% { offset-distance: 0%; }
  }

  @keyframes yortRock{
    0%, 18%, 82%, 100% { transform: rotate(0deg); }
    30%                { transform: rotate(4deg); }
    50%                { transform: rotate(0deg); }
    68%                { transform: rotate(3deg); }
  }
}

/* ✅ 구형 브라우저 fallback(끊김 줄이려고 포인트 촘촘히) */
@supports not (offset-path: path("M 0 0 L 1 1")) {
  .section_main .cha.yort{
    animation: yortArcFallback var(--dur) ease-in-out infinite;
    transform-origin: 50% 60%;
    will-change: transform;
  }

  @keyframes yortArcFallback{
    0%,18% { transform: translate(0,0) rotate(0deg); }

    /* 6시 -> 반시계 반원 -> 12시 (포인트 촘촘히) */
    24% { transform: translate(-10px, -4px) rotate(1deg); }
    30% { transform: translate(-20px, -14px) rotate(3deg); }
    36% { transform: translate(-28px, -28px) rotate(5deg); } /* 왼쪽 끝 */
    42% { transform: translate(-20px, -42px) rotate(3deg); }
    48% { transform: translate(-10px, -52px) rotate(1deg); }
    50% { transform: translate(0, -56px) rotate(0deg); }     /* 12시 */

    /* 12시 -> 원위치 복귀 */
    56% { transform: translate(-10px, -52px) rotate(1deg); }
    62% { transform: translate(-20px, -42px) rotate(3deg); }
    68% { transform: translate(-28px, -28px) rotate(5deg); }
    74% { transform: translate(-20px, -14px) rotate(3deg); }
    80% { transform: translate(-10px, -4px) rotate(1deg); }

    82%,100% { transform: translate(0,0) rotate(0deg); }
  }
}

.section_main .cha.yooksang {
	position: absolute;
	margin-right: -348px;
	top: 700px;
	width: 136px;
	height: 194px;
}

.section_main .cha.yooksang .body {
	position: relative;
	z-index: 2;
}

.section_main .cha.yooksang .body img {
	width: 136px;
}

.section_main .cha.yooksang .legs {
	position: absolute;
	left: 2px;
	bottom: 36px;
	transform-origin: 110% 55%;
}

/* ===== 육상: 캐릭터 이동(왼쪽 아래) + 다리 킥(오른쪽 위로 회전) ===== */
.section_main .cha.yooksang{
  --dur: 2.6s;      /* 전체 루프(동작 1회 + 딜레이) */
  --dx: -36px;      /* 왼쪽 이동(음수) */
  --dy: 18px;       /* 아래 이동(양수) */
  --legRot: 20deg;  /* 오른쪽 위로 차올리는 회전(+) */
}

/* 1) 캐릭터 전체 이동: 0~55%만 움직이고 나머지 홀드 */
.section_main .cha.yooksang{
  translate: 0 0;
  animation: yookMove var(--dur) cubic-bezier(.4,0,.2,1) infinite;
  will-change: translate;
}

@keyframes yookMove{
  0%, 12%   { translate: 0 0; }
  30%       { translate: calc(var(--dx) * -1) var(--dy); } /* 왼쪽 아래로 */
  55%       { translate: 0 0; }                 /* 원위치 복귀 */
  100%      { translate: 0 0; }                 /* 딜레이(정지) */
}

/* 2) 다리: 오른쪽 위로 차올리듯 회전 + 살짝 되돌림, 같은 타임라인 */
.section_main .cha.yooksang .legs{
  animation: yookLegKick var(--dur) ease-in-out infinite;
  will-change: transform;
}

@keyframes yookLegKick{
  /* 대기 */
  0%, 12% { transform: rotate(0deg) translateY(0); }

  /* 킥: 오른쪽 위로(회전 + 살짝 들림) */
  22% { transform: rotate(calc(var(--legRot) * 0.9)) translateY(4px) translateX(-3px); }
  30% { transform: rotate(var(--legRot)) translateY(8px) translateX(-6px); }  /* 최고점 */
  38% { transform: rotate(calc(var(--legRot) * 0.6)) translateY(4px) translateX(-3px); }

  /* 회수 */
  55% { transform: rotate(0deg) translateY(0); }

  /* 딜레이(정지) */
  100% { transform: rotate(0deg) translateY(0); }
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce){
  .section_main .cha.yooksang,
  .section_main .cha.yooksang .legs{
    animation: none !important;
  }
}

.section_main .cha.bike {
	position: absolute;
	margin-right: -608px;
	top: 916px;
	width: 152px;
	height: 238px;
}

.section_main .cha.bike .wind {
	position: absolute;
	left: -70px;
	top: 20px;
}

/* ===== 자전거: 오른쪽 아래로 내달림 + 딜레이(홀드) ===== */
.section_main .cha.bike{
  --dur: 2.9s;     /* 전체 루프(1회 동작 + 딜레이) */
  --dx: 44px;      /* 오른쪽 */
  --dy: 18px;      /* 아래 */
  --phase: -0.9s;  /* ✅ 육상이랑 시간차(위상) */
  
  translate: 0 0;
  animation: bikeMove var(--dur) cubic-bezier(.4,0,.2,1) infinite;
  animation-delay: var(--phase);
  will-change: translate;
}

/* 0~55% 움직이고, 55~100%는 멈춤(딜레이) */
@keyframes bikeMove{
  0%, 12%   { translate: 0 0; }
  30%       { translate: var(--dx) var(--dy); } /* 오른쪽 아래로 */
  55%       { translate: 0 0; }                 /* 복귀 */
  100%      { translate: 0 0; }                 /* 딜레이 */
}

/* ===== 바람: 반대로 오른쪽 위로 + 살짝 회전(흔들) ===== */
.section_main .cha.bike .wind{
  --wDur: 2.9s;      /* bike랑 맞춤(싱크 유지) */
  --wDX: 18px;       /* 오른쪽 */
  --wDY: -14px;      /* 위(음수) */
  --wRot: -10deg;    /* 반시계로 살짝 */

  transform-origin: 20% 80%;
  animation: bikeWind var(--wDur) ease-in-out infinite;
  animation-delay: var(--phase);
  will-change: transform, opacity;
}

.section_main .cha.bike .wind img{ display:block; }

/* 바람은 '동작 구간'에서만 살짝 움직이고, 나머지는 홀드 */
@keyframes bikeWind{
  0%, 12% {
    transform: translate(0,0) rotate(0deg);
    opacity: 1;
  }

  /* 자전거가 튀어나갈 때 바람도 반대로(오른쪽 위) 흐르는 느낌 */
  30%{
    transform: translate(var(--wDX), var(--wDY)) rotate(var(--wRot));
    opacity: 1;
  }

  /* 살짝 더 밀려나갔다가 */
  42%{
    transform: translate(calc(var(--wDX) * 1.25), calc(var(--wDY) * 1.2)) rotate(calc(var(--wRot) * 1.1));
    opacity: 0.95;
  }

  /* 복귀 */
  55%{
    transform: translate(0,0) rotate(0deg);
    opacity: 1;
  }

  /* 딜레이(정지) */
  100%{
    transform: translate(0,0) rotate(0deg);
    opacity: 1;
  }
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce){
  .section_main .cha.bike,
  .section_main .cha.bike .wind{
    animation: none !important;
  }
}

.section_main .cha.cycle {
	position: absolute;
	margin-right: -868px;
	top: 1026px;
	width: 242px;
	height: 226px;
}

/* ===== cycle: 오른쪽 아래로 계속 내달리기(늦게 시작) ===== */
.section_main .cha.cycle{
  --dur: 2.8s;        /* 이동 속도 */
  --dx: 220px;        /* 오른쪽 이동량 */
  --dy: 80px;         /* 아래 이동량 */
  --delay: 0.6s;      /* ✅ bike보다 늦게 시작 */

  animation: cycleRun var(--dur) linear infinite;
  animation-delay: var(--delay);
  will-change: transform;
}

@keyframes cycleRun{
  0%   { transform: translate(0, 0); }
  100% { transform: translate(var(--dx), var(--dy)); }
}

.section_main .cha.skate {
	position: absolute;
	margin-right: -668px;
	top: 1226px;
	width: 248px;
	height: 238px;
}

.section_main .cha.skate .body {
	position: relative;
	z-index: 2;
}

.section_main .cha.skate .body img {
	width: 248px;
}

.section_main .cha.skate .legs {
	position: absolute;
	bottom: 0;
	left: 0;
}

.section_main .cha.skate .legs img {
	width: 40px;
}

.section_main .cha.skate .legs.f {
	left: 100px;
	bottom: 20px;
}

.section_main .cha.skate .legs.b {
	left: 30px;
	bottom: 80px;
}

.section_main .cha.skate .legs.b img {
	width: 60px;
}

/* ===== 스케이트: 오른쪽 아래 이동 ===== */
.section_main .cha.skate{
  --dur: 2.6s;
  --dx: 180px;   /* 오른쪽 */
  --dy: 70px;    /* 아래 */
  --delay: 0.4s; /* 필요하면 시간차 */

  animation: skateRun var(--dur) linear infinite;
  animation-delay: var(--delay);
  will-change: transform;
}

@keyframes skateRun{
  0%   { transform: translate(0,0); }
  100% { transform: translate(var(--dx), var(--dy)); }
}

/* ===== 뒤다리: 오른쪽 위(100% 0) 기준으로 회전 ===== */
.section_main .cha.skate .legs.b{
  transform-origin: 100% 0; /* ✅ 요청대로 */
  animation: skateBackLeg var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
  will-change: transform;
}

/* 스케이팅 킥 느낌: 앞으로 차고 살짝 되돌림 */
@keyframes skateBackLeg{
  0%, 15%   { transform: rotate(0deg); }
  35%       { transform: rotate(-18deg); } /* 뒤로 밀어내는 킥 */
  55%       { transform: rotate(10deg); }  /* 되돌아오며 앞으로 */
  75%       { transform: rotate(0deg); }
  100%      { transform: rotate(0deg); }
}

.section_main .logo {
	margin-bottom: 48px;
}

.section_main .top_text {
	margin-bottom: 32px;	
}

.section_main .rolling_ul {
	position: relative;
	width: 538px;
	height: 608px;
	margin: auto;
	margin-top: -60px;
	overflow: hidden;

  /* JS에서 덮어씀 */
  --fade-ms: 280ms;

  /* 배경이 투명 PNG 가장자리랑 섞이면서 잔상 느낌 날 때 도움됨(원하면 지우셈) */
  background: transparent;
  z-index: 10;
}

.section_main .rolling_ul li {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity var(--fade-ms) linear;
	will-change: opacity;
	pointer-events: none;

	/* 페인트 범위 줄여서 덜 끊기게 */
	contain: paint;
}

.rolling_ul > li.is-active {
  opacity: 1;
  pointer-events: auto;
}

.rolling_ul img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;

  /* ✅ 프레임 위치 보정(잔상/뚝뚝 완화 핵심) */
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  will-change: transform;

  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .rolling_ul > li { transition: none; }
}

.section_main .bottom_img {
	position: relative;
	z-index: 12;
	margin-top: -40px;
}

.content_wrap {
	background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/content_bg.jpg?new');
	height: 3200px;
	background-position: center 0;
	background-size: cover;
}

.video_zone {
	width: 684px;
	height: 394px;
	margin: auto;
	margin-top: 24px;
	background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/video_wrap.png?new');
}

.video_area {
    position: absolute;
    width: 660px;
	left: 50%;
	transform: translateX(-50%);
	top: 12px;
}

.video_wrap {
  position: relative;
  width: 100%;
  padding-bottom: 55.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  background: #000;
}

.video_wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.section_02 .item {
	margin-top: -178px;
}

.quiz_con {
	position: relative;
	margin-top: 40px;
	margin-left: 40px;
}
#quizImage{
	display:block;
	max-width:100%;
	height:auto;
}

.quiz_image_zone {
	position: relative;
}

.quiz_con .quiz_ul {
	position: absolute;
	top: 335px;
	left: 154px;
	width: 452px;
}

.quiz_con li {
	width: 100%;
	height: 32px;
	background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/section03_quiz_bg_text_new.png');
	background-repeat: no-repeat;
	margin-bottom: 14px;
	opacity: 0.8;
	cursor: pointer;
}

.quiz_con li.answer01 {
	background-position: 0 0;
}

.quiz_con li.answer01.on {
	opacity: 1;
	background-position: 0 -168px;
}

.quiz_con li.answer02 {
	background-position: 0 -40px;
}

.quiz_con li.answer02.on {
	opacity: 1;
	background-position: 0 -208px;
}

.quiz_con li.answer03 {
	background-position: 0 -83px;
}

.quiz_con li.answer03.on {
	opacity: 1;
	background-position: 0 -251px;
}

.quiz_con li.answer04 {
	background-position: 0 -125px;
}

.quiz_con li.answer04.on {
	opacity: 1;
	background-position: 0 -293px;
}

.answer_overlay{
	position:absolute;
	left:0; top:0;
	width:0; height:0;
	display:none;
	background: rgba(255,0,0,.35); /* 빨간 필터 느낌 */
	border: 2px solid rgba(255,0,0,.9);
	box-sizing:border-box;
	pointer-events:none;
	z-index:10;
	border-radius:2px; /* 취향 */
}
.quiz_hint {
	position: absolute;
	bottom: -135px;
	left: -20px;
	cursor: pointer;
}
.quiz_click {
	position: absolute;
	top: -33px;
	left: 32px;
	animation: quiz_click ease-in-out 1.3s infinite;
}
@keyframes quiz_click {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-7px);
	}
	100% {
		transform: translateY(0);
	}
}
.quiz_btn {
	position: relative;
	bottom: -42px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}
.quiz_btn02 {
	cursor: pointer;
}

.info_title {
	margin-top: 110px;
	position: relative;
	z-index: 10;
}
.info_con {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	position: relative;
	top: -12px;
}
.info_con > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
}


.section_05 {
    padding: 72px 0;
    background-color: #282828;
}

.sec05_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 50px;
	margin-bottom: 70px;
}

.section_05 .center_item {
    display: inline-block;
    margin: auto;
}

.section_05 dl {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    color: #fff;
	font-family: unset;
}

.section_05 dt {
    padding-right: 3px;
}

.section_05 dd {
	text-align: left;
}

.footer {
    padding: 70px 20px;
    text-align: center;
}

.footer .info {
    margin-top: 30px;
    line-height: 180%;
	font-weight: 700;
}

.footer .copyright {
	color: #8b8b8b;
}

/* 오버레이 (팝업) */
.b_popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.7);
  overflow: auto;
  display: none; /* 기본 숨김 */
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
	flex-direction: column;
}
.popup_title {
	margin-bottom: 30px;
}
.b_popup.is-open { display: flex; } /* 열릴 때 flex */

.b_popup_inner {
  position: relative;
  width: min(680px, 100%);
  padding: 60px;
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
  max-height: calc(100svh - 48px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #ddf3ff;
	border: 2px solid #34393c;
}

.b_popup_title {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
    color: #0041a3;
    font-size: 36px;
    font-weight: 900;
	text-align: center;
}

.b_popup_title span {
    border-bottom: 2px solid #0041a3;
}

.b_popup_title .btn_close_popup {
    position: absolute;
    top: -10px;
    right: 0;
    font-size: 40px;
    color: #999;
    background: transparent;
    border: none;
    outline: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.b_popup_content  .form_group {
    display: flex;
    align-items: center;
    border: 2px solid #000;
    margin-bottom: 12px;
}

.b_popup_content  .form_group label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 166px;
    height: 60px;
    font-size: 24px;
    background-color: #0068ff;
    color: #fff;
}

.b_popup_content .form_group input {
    width: 394px;
    height: 60px;
    padding: 0 12px;
    font-size: 24px;
    border-radius: 0px;
    border: none;
    outline: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.b_popup_content .form_group input::placeholder {
	font-size: 20px;
}

.b_popup_content .pharases {
    padding: 0 12px 12px;
}

.b_popup_content  dl {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.b_popup_content  dl dt {
    padding-right: 3px;
}

.b_popup .term_zone .term {
    height: 180px;
    background-color: #fff;
	border: 2px solid #000;
    overflow-y: scroll;
    padding: 24px;
    font-size: 18px;
    margin-bottom: 12px;
}

.b_popup .term_zone .term .h5 {
	font-weight: 900;
	margin-bottom: 8px;
}

.b_popup .term_zone .term .h6 {
	margin-bottom: 4px;
}

.b_popup .term_zone .agree {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    gap: 8px;
}

.b_popup .term_zone .agree input + label {
    cursor: pointer;
}

.b_popup .term_zone .agree input {
    appearance: none;
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 50%;
}

.b_popup .term_zone .agree input::after {
    content:'';
    display: none;
    width: 12px;
    height: 12px;
    background-color: #0041a3;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.b_popup .term_zone .agree input:checked::after {
    display: inline-block;
}

.b_popup .btn_box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.b_popup .btn_box button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 230px;
    height: 70px;
    background-color: #a4a4a4;
    color: #fff;
    border: 2px solid #000;
    font-size: 25px;
	cursor: pointer;
}

.b_popup .btn_box button.confirm_btn {
    background-color: #0041a3;
}

.quick_btn {
	z-index: 50;
}

.quick_btn.pc {
    position: fixed;
	top: 0;
    margin: 0 0 0 1012px;
}

.quick_btn.mo {
    display: none;
    max-width: 750px;
    width: 100%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.pharases_box {
	font-size: 18px;
	margin-bottom: 12px;
}

.pharases_box .top {
	padding: 16px;
	background-color: #ffdbdb;
	text-align: center;
	border: 2px solid #000;
}

.pharases_box .bt {
	position: relative;
	margin-top: -2px;
	border: 2px solid #000;
	padding: 16px;
	background-color: #fff;
	text-align: center;
}

.pharases_box .bt span {
	position: absolute;
	left: -2px;
	top: 0;
	transform: translateY(-50%);
	padding: 4px;
	background-color: #ff9b42;
	border: 2px solid #000;
}

.floating01 {
	position: relative;
    width: 113px;
    height: 168px;
	margin-bottom: 10px;
}

.floating04 {
    position: absolute;
    top: 0;
    right: 0;
    animation: floating04 ease-in-out 5s infinite;
}

.floating02 {
    position: absolute;
    bottom: -21px;
    left: 25px;
    animation: floating02 ease-in-out 5s infinite;
}

.floating03 {
    position: absolute;
    top: 0;
    left: 0;
    animation: floating03 ease-in-out 5s infinite;
}

.floating02_eye01 {
    position: absolute;
    top: 29px;
    left: 19px;
    background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/floating02_eye01.png?new');
    width: 22px;
    height: 10px;
    background-size: cover;
    animation: floating02_eye01 ease-in-out 5s infinite;
}


@keyframes floating02 {
	0% {
		transform: rotate(0) translate(0, 0);
	}

	10% {
		transform: rotate(0) translate(0px, 0px);
	}

	20% {
		transform: rotate(50deg) translate(17px, 16px);
	}

	30% {
		transform: rotate(0) translate(0px, 0px);
	}

	40% {
		transform: rotate(50deg) translate(17px, 16px);
	}

	50% {
		transform: rotate(0) translate(0px, 0px);
	}

	100% {
		transform: rotate(0) translate(0px, 0px);
	}
}

@keyframes floating02_eye01 {
	0% {
    background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/floating02_eye01.png');
    width: 22px;
	}

	10% {
		background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/floating02_eye01.png');
		width: 22px;
	}

	11% {
		background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/floating02_eye02.png');
		width: 23px;
	}

	49% {
		background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/floating02_eye02.png');
		width: 23px;
	}

	50% {
		background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/floating02_eye01.png');
		width: 22px;
	}

	100% {
		background-image: url('/PROJECT_HTML/2026busan_sports_festival/img/floating02_eye01.png');
		width: 22px;
	}
}

@keyframes floating03 {
	0% {
		transform: rotate(0) translate(0, 0);
	}
	10% {
		transform: rotate(0) translate(0px, 0px);
	}
	20% {
		transform: rotate(3deg) translate(-4px, -2px);
	}
	30% {
		transform: rotate(0) translate(0px, 0px);
	}
	40% {
		transform: rotate(3deg) translate(-4px, -2px);
	}
	50% {
		transform: rotate(0) translate(0px, 0px);
	}
	100% {
		transform: rotate(0) translate(0px, 0px);
	}
}

@keyframes floating04 {
	0% {
		transform: rotate(0) translate(0, 0);
	}

	10% {
		transform: rotate(0) translate(0px, 0px);
	}

	20% {
		transform: rotate(-2deg) translate(3px, -2px);
	}

	30% {
		transform: rotate(0) translate(0px, 0px);
	}

	40% {
		transform: rotate(-2deg) translate(3px, -2px);
	}

	50% {
		transform: rotate(0) translate(0px, 0px);
	}

	100% {
		transform: rotate(0) translate(0px, 0px);
	}
}

/* 반응형 */
@media(max-width: 1600px) {
    .quick_btn.pc {
        margin-left: 750px;
    }
}

@media(max-width: 1359px) {
   
}

@media(max-width: 991px) {
    .quick_btn.pc {
        display: none;
    }
    
    .quick_btn.mo {
	  display: block;
	  position: fixed;
	  left: 50%;
	  transform: translateX(-50%);
	  bottom: 0;
	  z-index: 100;
	}

	.quick_btn.mo.is-absolute {
	  position: absolute;
	}
    
    .section_05 {
        padding-bottom: 160px;
    }
}

@media(max-width: 750px) {

	.section_main {
		height: 230.67vw;
		padding-top: 5.33vw;
	}

	.section_main .logo {
		margin-bottom: 6.4vw;
	}
	
	.section_main .logo img {
		width: 60vw;
	}
	
	.section_main .top_text {
		margin-bottom: 4.27vw;
	}
	
	.section_main .top_text img {
		width: 59.47vw;
	}
	
	.section_main .main_title img {
		width: 66.93vw;
	}
	
	.section_main .rolling_ul {
		width: 71.73vw;
		height: 81.07vw;
		margin-top: -8vw;
	}
	
	.section_main .bottom_img {
		margin-top: -5.33vw;
	}
	
	.section_main .bottom_img img {
		width: 73.33vw;
	}
	
	.content_wrap {
		height: 426.67vw;
	}
	
	.video_zone {
		width: 91.2vw;
		height: 52.53vw;
		margin-top: 3.2vw;
	}
	
	.video_area {
		width: 88vw;
		top: 1.6vw;
	}
	
	.section_02 .item {
		margin-top: -23.73vw;
		padding-left: 6vw;
	}
	
	.section_02 .item img {
		width: 90.87vw;
	}
	
	.quiz_image_zone > img {
		width: 86.93vw;
	}
	
	.quiz_con .quiz_ul {
		top: 44.67vw;
		left: 20.53vw;
		width: 60.27vw;
	}
	
	.quiz_con li {
		height: 4.27vw;
		background-size: 100% auto;
		margin-bottom: 1.87vw;
	}
	
	.quiz_con li.answer02 {
		background-position: 0 -5.33vw;
	}
	
	.quiz_con li.answer03 {
		background-position: 0 -11.07vw;
	}

	.quiz_con li.answer04 {
		background-position: 0 -16.67vw;
	}
	
	.quiz_con li.answer01.on {
		background-position: 0 -22.4vw;
	}
	
	.quiz_con li.answer02.on {
		background-position: 0 -27.73vw;
	}
	
	.quiz_con li.answer03.on {
		background-position: 0 -33.47vw;
	}
	
	.quiz_con li.answer04.on {
		background-position: 0 -39.07vw;
	}
	
	.quiz_hint {
		bottom: -18vw;
		left: -2.67vw
	}
	
	.quiz_hint > img {
		width: 20.8vw;
	}
	
	.quiz_click {
		top: -4.27vw;
		left: 4.27vw;
	}
	
	.quiz_click img {
		width: 11vw;
	}
	
	.quiz_btn {
		bottom: -5.6vw;
		gap: 2.67vw;
	}
	
	.quiz_btn  img {
		width: 38.13vw;
	}
	
	.info_title {
		margin-top: 14.67vw;
	}
	
	.info_con {
		gap: 2.13vw;
		top: -1.6vw;
	}
	
	.info_con > div {
		width: 45.87vw;
	}
	
	.sec05_btn {
		gap: 6.67vw;
		margin-bottom: 9.33vw;
	}
	
	.sec05_btn a {
		width: 40.8vw;
	}
	
	.section_05 {
		padding: 9.6vw 0 19.2vw;
	}
	
	.section_05 .center_item {
		padding: 0 2.4vw;
		font-size: 3.2vw;
	}
    
    .footer {
        padding: 9.33vw 2.67vw;
    }
    
    .footer .logo > img {
        width: 27.73vw;
    }
    
    .footer .info {
        margin-top: 4vw;
        font-size: 2.13vw;
    }
    
    .b_popup_inner {
        padding: 6vw;
    }
    
    .b_popup_title {
        margin-bottom: 5.33vw;
        font-size: 4.8vw;
    }
	
	.b_popup_title img {
		width: 47.07vw;
	}
    
    .b_popup_content .form_group label {
        width: 32.13vw;
        height: 40px;
        font-size: 3.2vw;
    }
    
    .b_popup_content .form_group input {
        width: 58.53vw;
        padding: 1.6vw;
        height: 40px;
        font-size: 16px;
    }
    
    .b_popup_content .form_group input::placeholder {
        font-size: 2.53vw;
    }
    
    .b_popup_content .form_group {
        margin-bottom: 1.6vw;
    }
    
    .b_popup_content .pharases {
        padding: 0 1.6vw 1.6vw;
        font-size: 2.4vw;
    }
    
    .b_popup .term_zone .term {
        height: 24vw;
        padding: 3.2vw;
        margin-bottom: 1.6vw;
        font-size: 2.4vw;
    }
	
	.b_popup .term_zone .term .h5 {
		margin-bottom: 8px;
	}

	.b_popup .term_zone .term .h6 {
		margin-bottom: 4px;
	}
    
    .b_popup .term_zone .agree {
        display: block;
        font-size: 3.2vw;
        gap: 1.07vw;
        text-align: center;
    }
    
    .b_popup .term_zone .agree > span:first-child {
        display: block;
        margin-bottom: 2vw;
        text-align: center;
    }
    
    .b_popup .term_zone .agree > span:nth-child(2) {
        margin-right: 1.6vw;
    }
    
    .b_popup .term_zone .agree input {
        width: 3.6vw;
        height: 3.6vw;
    }
    
    .b_popup .term_zone .agree input::after {
        width: 2vw;
        height: 2vw;
    }
    
    .b_popup .btn_box {
        gap: 3.33vw;
		margin-top: 20px;
    }
    
    .b_popup .btn_box button {
        width: 42.67vw;
        height: 12vw;
        margin-top: 1.6vw;
        font-size: 4.33vw;
    }

	.b_popup .btn_box button img {
		width: 50%;
	}
	.popup_title {
		width: 50%;
	}
	.pharases_box {
		font-size: 2.4vw;
		margin-bottom: 1.6vw;
	}

	.pharases_box .top {
		padding: 2.13vw;
	}

	.pharases_box .bt {
		padding: 2.13vw;
	}
	
	.pharases_box .bt > img {
		width: 60.8vw;
	}

	.pharases_box .bt span {
		padding: 0.53vw;
	}
}

/* =========================
   공통: 초기 숨김 (충돌 방지용 전용 클래스)
========================= */
.anim-load,
.anim-scroll {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: transform, opacity;
}

/* show 트리거 */
.anim-show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* =========================
   로딩: 기본 페이드
========================= */
.anim-fade.anim-show {
  transition: opacity .55s ease;
  transform: none;
}

.anim-fade-up.anim-show {
  transition: opacity .6s ease, transform .6s ease;
}

/* =========================
   로딩: 위에서 내려오기
========================= */
.anim-slide-down {
  transform: translate3d(0, -18px, 0);
}
.anim-slide-down.anim-show {
  transition: opacity .6s ease, transform .6s ease;
}

/* =========================
   메인 타이틀: 스탬프
========================= */
/* =========================
   메인 타이틀: 스탬프 (사라짐 방지 버전)
========================= */

/* 기본은 보이는 상태를 기준으로 둠(중요) */
.anim-stamp {
  opacity: 1;
  transform: scale(1);
}

/* show 되기 전엔 숨김 */
.anim-stamp:not(.anim-show) {
  opacity: 0;
  transform: scale(1.8);
}

/* show 되면 애니메이션 + 최종상태 확정 */
.anim-stamp.anim-show {
  opacity: 1;
  transform: scale(1);
  animation: stampIn .65s cubic-bezier(.25,1.6,.5,1) both; /* both = 시작/끝 상태 고정 */
}

@keyframes stampIn {
  0%   { opacity: 0; transform: scale(1.8); }
  60%  { opacity: 1; transform: scale(.92); }
  80%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}


/* =========================
   족자: 위에서 펼쳐짐
========================= */
.anim-unfold {
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
}
.anim-unfold.anim-show {
  animation: unfold .7s ease-out forwards;
}

@keyframes unfold {
  0%   { opacity: 0; transform: scaleY(0); }
  100% { opacity: 1; transform: scaleY(1); }
}