/* ========== header ========== */ #header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: 100%; padding: 20px 48px; transition: background 0.4s ease, padding 0.3s ease, border-color 0.4s ease; border-bottom: 1px solid transparent; } #header.scrolled { background: rgba(13, 13, 13, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 14px 48px; border-bottom-color: rgba(255, 255, 255, 0.08); } #header .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 1920px; margin: 0 auto; } /* 로고 */ #header .logo { margin: 0; flex-shrink: 0; } #header .logo a { display: block; } #header .logo img { display: block; height: 44px; width: auto; transition: height 0.3s ease; } #header.scrolled .logo img { height: 36px; } /* GNB */ #header .gnb { flex: 1; display: flex; justify-content: center; } #header .gnb ul { display: flex; gap: 40px; margin: 0; padding: 0; list-style: none; } #header .gnb a { position: relative; display: inline-block; padding: 8px 4px; font-size: 16px; font-weight: 500; color: #fff; letter-spacing: 0.02em; text-decoration: none; transition: color 0.3s ease; } #header .gnb a::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; background: #e60012; transform: translateX(-50%); transition: width 0.3s ease; } #header .gnb a:hover, #header .gnb a:focus { color: #ff3b4a; } #header .gnb a:hover::after, #header .gnb a:focus::after { width: 100%; } /* CTA 버튼 */ #header .header-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; background: #e60012; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; overflow: hidden; flex-shrink: 0; transition: background 0.3s ease, transform 0.3s ease; } #header .header-cta span, #header .header-cta { position: relative; } #header .header-cta:hover { background:#f82e33 ; } #header .header-cta:hover::before { transform: translateX(0); } /* 모바일 메뉴 버튼 (기본 숨김, 반응형용) */ #header .mobile-menu-btn { display: none; position: relative; width: 40px; height: 40px; padding: 0; background: none; border: 0; cursor: pointer; flex-shrink: 0; } #header .mobile-menu-btn span { position: absolute; left: 8px; width: 24px; height: 2px; background: #fff; transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease; } #header .mobile-menu-btn span:nth-child(1) { top: 13px; } #header .mobile-menu-btn span:nth-child(2) { top: 19px; } #header .mobile-menu-btn span:nth-child(3) { top: 25px; } #header .mobile-menu-btn.active span:nth-child(1) { top: 19px; transform: rotate(45deg); } #header .mobile-menu-btn.active span:nth-child(2) { opacity: 0; } #header .mobile-menu-btn.active span:nth-child(3) { top: 19px; transform: rotate(-45deg); } /* ========== footer ========== */ #footer { position: relative; width: 100%; padding: 64px 48px 48px; background: #0a0a0a; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); } #footer .footer-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 48px; align-items: start; max-width: 1920px; margin: 0 auto; } /* 로고 */ #footer .footer-logo { grid-row: span 2; } #footer .footer-logo img { display: block; height: 52px; width: auto; opacity: 0.9; } /* 회사 정보 */ #footer .footer-info { grid-column: 2; font-style: normal; font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, 0.6); } #footer .footer-info .footer-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 4px; } #footer .footer-info .footer-row:last-child { margin-bottom: 0; } #footer .footer-info span { position: relative; display: inline-flex; align-items: center; } #footer .footer-info span + span::before { content: '|'; margin-right: 24px; margin-left: -16px; color: rgba(255, 255, 255, 0.2); } #footer .footer-info a { color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: color 0.3s ease; } #footer .footer-info a:hover, #footer .footer-info a:focus { color: #fff; text-decoration: underline; } /* 정책 링크 */ #footer .footer-links { grid-column: 3; grid-row: 1; display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; } #footer .footer-links a { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: color 0.3s ease; } #footer .footer-links a:hover, #footer .footer-links a:focus { color: #e60012; } /* 카피라이트 */ #footer .footer-copy { grid-column: 2 / -1; margin: 24px 0 0; padding: 24px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.35); letter-spacing: 0.02em; border-top: 1px solid rgba(255, 255, 255, 0.06); } /* 플로팅 CTA */ #footer .floating-cta { position: fixed; right: 32px; bottom: 32px; z-index: 90; display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; padding: 12px; background: #e60012; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; border-radius: 50%; box-shadow: 0 12px 32px rgba(230, 0, 18, 0.4), 0 0 0 0 rgba(230, 0, 18, 0.5); animation: pulseCta 2s ease-out infinite; transition: transform 0.3s ease, box-shadow 0.3s ease; } #footer .floating-cta:hover, #footer .floating-cta:focus { transform: scale(1.08); box-shadow: 0 16px 40px rgba(230, 0, 18, 0.6); animation-play-state: paused; } #footer .floating-cta span { display: block; } @keyframes pulseCta { 0% { box-shadow: 0 12px 32px rgba(230, 0, 18, 0.4), 0 0 0 0 rgba(230, 0, 18, 0.5); } 70% { box-shadow: 0 12px 32px rgba(230, 0, 18, 0.4), 0 0 0 20px rgba(230, 0, 18, 0); } 100% { box-shadow: 0 12px 32px rgba(230, 0, 18, 0.4), 0 0 0 0 rgba(230, 0, 18, 0); } } /* main01 */ #main01 { position: relative; width: 100%; height: 100vh; min-height: 720px; overflow: hidden; background: #000; } #main01 .bg-video { position: absolute; inset: 0; z-index: 0; } #main01 .bg-video video { width: 100%; height: 100%; object-fit: cover; } #main01 .bg-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.75) 100%); } #main01::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 20% 80%, rgba(255, 120, 0, 0.2), transparent 40%), radial-gradient(circle at 80% 20%, rgba(255, 60, 0, 0.25), transparent 40%); pointer-events: none; animation: flicker01 4s ease-in-out infinite alternate; } @keyframes flicker01 { 0% { opacity: 0.7; } 100% { opacity: 1; } } #main01 .divider { position: absolute; top: 0; bottom: 72px; z-index: 3; width: 1px; background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.25) 20%, rgba(255,255,255,0.25) 80%, transparent 100%); pointer-events: none; } #main01 .divider.left { left: 33.333%; } #main01 .divider.right { left: 66.666%; } #main01 .title { position: absolute; top:22vh; left: 50%; transform: translateX(-50%); z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; width: 100%; max-width: 1920px; padding: 0 32px; } #main01 .title > div { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0 24px; opacity: 0; text-align: center; gap: 20px; } #main01 .title img { max-height: 180px; width: auto; height: auto; filter: drop-shadow(0 4px 24px rgba(230, 0, 18, 0.6)) drop-shadow(0 0 48px rgba(255, 60, 0, 0.4)); will-change: transform, filter; } #main01 .title .title01 img { animation: titleSmashFast01 0.7s 0.2s cubic-bezier(0.22, 1.2, 0.36, 1) forwards, sizzle01 0.12s 1s linear infinite; } #main01 .title .title02 img { animation: titleSmashFast01 0.7s 0.4s cubic-bezier(0.22, 1.2, 0.36, 1) forwards, sizzle01 0.13s 1.2s linear infinite; } #main01 .title .title03 img { animation: titleSmashFast01 0.7s 0.6s cubic-bezier(0.22, 1.2, 0.36, 1) forwards, sizzle01 0.11s 1.4s linear infinite; } #main01 .title .title01 { animation: blockIn01 0.7s 0.2s cubic-bezier(0.22, 1.2, 0.36, 1) forwards; } #main01 .title .title02 { animation: blockIn01 0.7s 0.4s cubic-bezier(0.22, 1.2, 0.36, 1) forwards; } #main01 .title .title03 { animation: blockIn01 0.7s 0.6s cubic-bezier(0.22, 1.2, 0.36, 1) forwards; } @keyframes blockIn01 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes titleSmashFast01 { 0% { opacity: 0; transform: translateY(-120px) scale(1.6) rotate(-5deg); filter: blur(16px); } 50% { opacity: 1; transform: translateY(16px) scale(0.92) rotate(2deg); filter: blur(0); } 75% { transform: translateY(-4px) scale(1.02) rotate(-0.5deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); } } @keyframes sizzle01 { 0% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(-0.8px, 0.6px) rotate(-0.15deg); } 40% { transform: translate(0.7px, -0.5px) rotate(0.15deg); } 60% { transform: translate(-0.5px, 0.7px) rotate(-0.1deg); } 80% { transform: translate(0.6px, -0.6px) rotate(0.1deg); } 100% { transform: translate(0, 0) rotate(0); } } #main01 .title-top { font-size: 22px; font-weight: 600; color: #fff; margin: 0; letter-spacing: 0.02em; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8); animation: fadeInUp01 0.6s 1s ease-out both; } #main01 .title-sub { font-size: 20px; font-weight: 500; color: #fff; margin: 0; line-height: 1.6; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8); animation: fadeInUp01 0.6s 1.1s ease-out both; } #main01 .title-sub strong { display: inline-block; margin-top: 4px; font-size: 32px; font-weight: 700; color: #fff; letter-spacing: 0.02em; } #main01 .title-stat { display: flex; gap: 64px; justify-content: center; margin: 0; animation: fadeInUp01 0.6s 1.2s ease-out both; } #main01 .title-stat > div { display: flex; flex-direction: column; align-items: center; gap: 8px; } #main01 .title-stat dt { font-size: 16px; font-weight: 500; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.8); } #main01 .title-stat dd { font-size: 44px; font-weight: 800; color: #fff; margin: 0; line-height: 1; letter-spacing: 0.02em; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); } @keyframes fadeInUp01 { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } #main01 .ctn { position: absolute; left: 0; right: 0; bottom: -8vh; z-index: 5; display: flex; justify-content: center; align-items: flex-end; height: 60vh; pointer-events: none; } #main01 .ctn > div { position: absolute; bottom: 0; opacity: 0; } #main01 .ctn img { width: 100%; height: auto; filter: drop-shadow(0 24px 48px rgba(0,0,0,0.8)); } #main01 .ctn .ctn02 { left: 50%; transform: translateX(-50%) scale(0.8); width: 52vw; max-width: 900px; min-width: 560px; z-index: 3; animation: centerPop01 0.9s 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } #main01 .ctn .ctn01 { left: 50%; transform: translateX(-50%) scale(0.6); width: 36vw; max-width: 620px; min-width: 380px; z-index: 2; animation: slideLeft01 1s 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; bottom: 100px;} #main01 .ctn .ctn03 { left: 50%; transform: translateX(-50%) scale(0.6); width: 36vw; max-width: 620px; min-width: 380px; z-index: 2; animation: slideRight01 1s 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;bottom: 40px; } @keyframes centerPop01 { 0% { opacity: 0; transform: translateX(-50%) scale(0.6) translateY(80px); } 60% { opacity: 1; transform: translateX(-50%) scale(1.05) translateY(-8px); } 100% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); } } @keyframes slideLeft01 { 0% { opacity: 0; transform: translateX(-50%) scale(0.6); } 100% { opacity: 1; transform: translateX(-135%) scale(1); } } @keyframes slideRight01 { 0% { opacity: 0; transform: translateX(-50%) scale(0.6); } 100% { opacity: 1; transform: translateX(35%) scale(1); } } #main01 .marquee { position: absolute; left: 0; bottom: 0; z-index: 5; width: 100%; padding: 18px 0; background: #e60012; overflow: hidden; box-shadow: 0 -8px 32px rgba(230, 0, 18, 0.3); } #main01 .marquee-track { display: flex; width: max-content; animation: marqueeScroll01 30s linear infinite; } #main01 .marquee-track ul { display: flex; gap: 64px; padding: 0 32px; margin: 0; list-style: none; flex-shrink: 0; } #main01 .marquee-track li { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: 0.02em; white-space: nowrap; } #main01 .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marqueeScroll01 { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } #main01 .light-sweep { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; mix-blend-mode: screen; } #main01 .light-sweep .beam { position: absolute; top: -50%; width: 200px; height: 200%; background: linear-gradient(to right, transparent 0%, rgba(255, 180, 80, 0.15) 40%, rgba(255, 220, 120, 0.35) 50%, rgba(255, 180, 80, 0.15) 60%, transparent 100%); transform: rotate(18deg); filter: blur(8px); } #main01 .light-sweep .beam1 { left: -30%; animation: sweepDiag 8s linear infinite; } #main01 .light-sweep .beam2 { left: -30%; animation: sweepDiag 11s 3s linear infinite; opacity: 0.6; } #main01 .light-sweep .beam3 { left: -30%; animation: sweepDiag 14s 6s linear infinite; opacity: 0.4; } @keyframes sweepDiag { 0% { transform: translateX(-40vw) rotate(18deg); } 100% { transform: translateX(140vw) rotate(18deg); } } #main01 .bg-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.5) 100%); } #main01 .sparks { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; } #main01 .sparks span { position: absolute; bottom: 0; width: 4px; height: 4px; background: #ffb347; border-radius: 50%; box-shadow: 0 0 8px 2px rgba(255, 180, 71, 0.8), 0 0 16px 4px rgba(255, 120, 0, 0.4); animation: sparkRise 6s linear infinite; opacity: 0; } #main01 .sparks span:nth-child(1) { left: 5%; animation-delay: 0s; animation-duration: 5s; } #main01 .sparks span:nth-child(2) { left: 12%; animation-delay: 1.2s; animation-duration: 7s; width: 3px; height: 3px; } #main01 .sparks span:nth-child(3) { left: 18%; animation-delay: 2.5s; animation-duration: 6s; } #main01 .sparks span:nth-child(4) { left: 24%; animation-delay: 0.8s; animation-duration: 8s; width: 5px; height: 5px; } #main01 .sparks span:nth-child(5) { left: 32%; animation-delay: 3.3s; animation-duration: 5.5s; } #main01 .sparks span:nth-child(6) { left: 38%; animation-delay: 4.1s; animation-duration: 7s; } #main01 .sparks span:nth-child(7) { left: 45%; animation-delay: 1.8s; animation-duration: 6.5s; width: 3px; height: 3px; } #main01 .sparks span:nth-child(8) { left: 52%; animation-delay: 0.3s; animation-duration: 8s; } #main01 .sparks span:nth-child(9) { left: 58%; animation-delay: 2.2s; animation-duration: 5s; width: 4px; height: 4px; } #main01 .sparks span:nth-child(10) { left: 64%; animation-delay: 3.7s; animation-duration: 7s; } #main01 .sparks span:nth-child(11) { left: 70%; animation-delay: 1.1s; animation-duration: 6s; width: 3px; height: 3px; } #main01 .sparks span:nth-child(12) { left: 76%; animation-delay: 4.5s; animation-duration: 5.5s; } #main01 .sparks span:nth-child(13) { left: 82%; animation-delay: 0.6s; animation-duration: 7.5s; } #main01 .sparks span:nth-child(14) { left: 88%; animation-delay: 2.9s; animation-duration: 6s; width: 5px; height: 5px; } #main01 .sparks span:nth-child(15) { left: 93%; animation-delay: 3.4s; animation-duration: 8s; } #main01 .sparks span:nth-child(16) { left: 8%; animation-delay: 5s; animation-duration: 6s; } #main01 .sparks span:nth-child(17) { left: 28%; animation-delay: 5.5s; animation-duration: 7s; } #main01 .sparks span:nth-child(18) { left: 48%; animation-delay: 6s; animation-duration: 5s; } #main01 .sparks span:nth-child(19) { left: 68%; animation-delay: 4.8s; animation-duration: 6.5s; } #main01 .sparks span:nth-child(20) { left: 86%; animation-delay: 5.2s; animation-duration: 7.5s; } @keyframes sparkRise { 0% { opacity: 0; transform: translateY(0) translateX(0) scale(1); } 10% { opacity: 1; } 50% { transform: translateY(-50vh) translateX(20px) scale(0.8); } 80% { opacity: 0.6; transform: translateY(-85vh) translateX(-10px) scale(0.5); } 100% { opacity: 0; transform: translateY(-100vh) translateX(30px) scale(0.2); } } #main01 .ctn02 { position: absolute; } #main01 .shock-ring { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 120px; height: 120px; border: 3px solid rgba(230, 0, 18, 0.9); border-radius: 50%; z-index: 1; pointer-events: none; opacity: 0; animation: shockWave 1.4s 1s ease-out forwards; box-shadow: 0 0 24px rgba(230, 0, 18, 0.6), inset 0 0 24px rgba(230, 0, 18, 0.4); } #main01 .shock-ring.delay { animation-delay: 1.3s; border-color: rgba(255, 50, 60, 0.8); border-width: 2px; box-shadow: 0 0 20px rgba(255, 50, 60, 0.5); } @keyframes shockWave { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); border-width: 4px; } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(12); border-width: 1px; } } /* 메인2 시작 */ #main02 { position: relative; width: 100%; overflow: hidden; background: #000; } #main02 .ctn { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } #main02 .left { position: relative; padding: 120px 0 0; background: #0a0a0a; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 64px; overflow: hidden; text-align: center; } #main02 .left .title { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 32px; } #main02 .left .title > img { display: block; max-width: 100%; height: auto; margin: 0 0 48px; } #main02 .title-stat { display: flex; align-items: flex-start; justify-content: center; gap: 0; margin: 0 auto; padding: 0; } #main02 .title-stat > div { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 32px; } #main02 .title-stat > div + div::before { content: ''; position: absolute; left: 0; top: 8px; width: 1px; height: calc(100% - 16px); background: rgba(255,255,255,0.2); } #main02 .title-stat dt { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; margin: 0; } #main02 .title-stat dd { font-size: 32px; font-weight: 800; color: #fff; margin: 0; line-height: 1; letter-spacing: 0.02em; } #main02 .left .visual { position: relative; z-index: 1; width: 100%; margin: 0 0 -12vh; } #main02 .left .visual img { display: block; width: 100%; max-width: none; height: auto; } #main02 .right { position: relative; padding: 120px 80px; background: #e60012; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; overflow: hidden; } #main02 .right::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(230,0,18,0.85) 0%, rgba(180,0,12,0.75) 100%); z-index: 0; } #main02 .right > * { position: relative; z-index: 1; } #main02 .history { position: relative; } #main02 .history-head { position: relative; display: block; margin: 0 0 32px; } #main02 .history-title { display: block; max-width: 100%; height: auto; margin: 0 0 24px; } #main02 .history-chicken { position: absolute; right: -80px; top: -120px; width: auto; max-width: none; height: auto; z-index: 2; transform-origin: top right; animation: chickenDrop 1s cubic-bezier(0.34, 1.56, 0.64, 1) both, chickenSwing 2.2s 1s ease-in-out infinite; } #main02 .history-desc { font-size: 18px; font-weight: 400; color: #fff; line-height: 1.9; margin: 0; letter-spacing: 0.01em; } @keyframes chickenDrop { 0% { opacity: 0; transform: translate(60px, -80px) rotate(-25deg) scale(1.2); } 60% { opacity: 1; transform: translate(-8px, 8px) rotate(4deg) scale(0.96); } 100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } } @keyframes chickenSwing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(4deg); } } #main02 .truck { margin: 0 -40px; overflow: hidden; } #main02 .truck img { display: block; width: 100%; height: auto; } #main02 .hq { position: relative; } #main02 .hq-label { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: 0.02em; margin: 0 0 16px; } #main02 .hq-title { display: block; max-width: 100%; height: auto; margin: 0 0 32px; } #main02 .hq-desc { font-size: 18px; font-weight: 400; color: #fff; line-height: 1.9; margin: 0; letter-spacing: 0.01em; } #main02 .banner { position: relative; width: 100%; padding: 120px 32px; background: #000 url('../image/main02_banner_bg.jpg') no-repeat center / cover; text-align: center; overflow: hidden; } #main02 .banner > * { position: relative; z-index: 2; } #main02 .banner-label { font-size: 16px; font-weight: 700; color: #e60012; letter-spacing: 0.08em; margin: 0 0 24px; text-transform: uppercase; } #main02 .banner-title { display: block; max-width: 100%; height: auto; margin: 0 auto 32px; } #main02 .banner-desc { font-size: 20px; font-weight: 400; color: rgba(255,255,255,0.85); line-height: 1.6; margin: 0; letter-spacing: 0.01em; } #main02 .left .title { animation: slamDown 0.9s cubic-bezier(0.22, 1.2, 0.36, 1) both; animation-play-state: paused; } #main02 .left .visual { animation: riseUp 1.1s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main02 .history { animation: slideInRight 0.8s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main02 .truck { animation: driveIn 1s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main02 .hq { animation: popUp 0.8s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-play-state: paused; } #main02 .banner-label { animation: fadeInUp 0.7s 0.2s ease-out both; animation-play-state: paused; } #main02 .banner-title { animation: slamDown 0.9s 0.4s cubic-bezier(0.22, 1.2, 0.36, 1) both; animation-play-state: paused; } #main02 .banner-desc { animation: fadeInUp 0.7s 0.8s ease-out both; animation-play-state: paused; } #main02.play .left .title, #main02.play .left .visual, #main02.play .history, #main02.play .truck, #main02.play .hq { animation-play-state: running; } #main02.play .truck img { animation: truckShake 1.8s 1.4s ease-in-out infinite; } #main02 .banner.is-on .banner-label, #main02 .banner.is-on .banner-title, #main02 .banner.is-on .banner-desc { animation-play-state: running; } @keyframes slamDown { 0% { opacity: 0; transform: translateY(-80px) scale(1.2) rotate(-3deg); filter: blur(6px); } 60% { opacity: 1; transform: translateY(12px) scale(0.95) rotate(1deg); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); } } @keyframes riseUp { 0% { opacity: 0; transform: translateY(120px); clip-path: inset(0 0 100% 0); } 100% { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); } } @keyframes slideInRight { 0% { opacity: 0; transform: translateX(80px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes driveIn { 0% { opacity: 0; transform: translateX(100%); } 70% { opacity: 1; transform: translateX(-4%); } 100% { opacity: 1; transform: translateX(0); } } @keyframes truckShake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-5px, -2px); } 50% { transform: translate(4px, 1px); } 75% { transform: translate(-3px, 2px); } } @keyframes popUp { 0% { opacity: 0; transform: translateY(60px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } #main03 { position: relative; width: 100%; padding: 2.5vh 2.5vw; margin:2.5% 0;background: #fff; overflow: hidden; } #main03 .ctn { position: relative; width: 100%; } #main03 .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; overflow: hidden;} #main03 .card { position: relative; height: 90vh; min-height: 640px; overflow: hidden; transition: filter 1s ease, transform 1s ease; filter: brightness(0.35); } #main03 .card.is-active { filter: brightness(1); transform: scale(1.01); z-index: 2; } #main03 .card-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 6s ease, filter 1s ease; transform: scale(1); filter: blur(6px); } #main03 .card.is-active .card-bg { transform: scale(1.05); filter: blur(0); } #main03 .card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%); z-index: 1; pointer-events: none; transform:scale(1.2)} #main03 .card-inner { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 2; padding: 0 48px; } #main03 .card-title { display: block; max-width: 100%; height: auto; margin: 0 0 16px; opacity: 0.4; transition: opacity 0.8s ease, transform 0.8s ease; transform: translateY(16px); } #main03 .card.is-active .card-title { opacity: 1; transform: translateY(0); } #main03 .card-desc { font-size: 17px; font-weight: 400; color: rgba(255,255,255,0.5); line-height: 1.7; margin: 0; letter-spacing: 0.01em; transition: color 0.8s ease, opacity 0.8s ease; } #main03 .card.is-active .card-desc { color: rgba(255,255,255,0.95); } #main03 .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; width: 100%; max-width: 900px; padding: 0 32px; text-align: center; pointer-events: none; } #main03 .center-label { font-size: 16px; font-weight: 700; color: #e60012; letter-spacing: 0.08em; margin: 0 0 20px; text-shadow: 0 2px 16px rgba(0,0,0,0.8); } #main03 .center-title { display: block; max-width: 100%; height: auto; margin: 0 auto 28px; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.8)); } #main03 .center-desc { font-size: 17px; font-weight: 400; color: rgba(255,255,255,0.9); line-height: 1.9; margin: 0; letter-spacing: 0.01em; text-shadow: 0 2px 12px rgba(0,0,0,0.8); } #main03 .center-desc strong { display: inline-block; margin-bottom: 8px; font-size: 19px; font-weight: 700; color: #fff; } #main03 .center-label { animation: fadeInUp 0.7s 0.2s ease-out both; animation-play-state: paused; } #main03 .center-title { animation: centerPop 0.9s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-play-state: paused; } #main03 .center-desc { animation: fadeInUp 0.7s 0.8s ease-out both; animation-play-state: paused; } #main03.play .center-label, #main03.play .center-title, #main03.play .center-desc { animation-play-state: running; } @keyframes centerPop { 0% { opacity: 0; transform: translateY(40px) scale(0.9); filter: blur(8px) drop-shadow(0 8px 24px rgba(0,0,0,0.8)); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) drop-shadow(0 8px 24px rgba(0,0,0,0.8)); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } /* main04 */ #main04 { position: relative; width: 100%; padding: 120px 48px 96px; background: #000; overflow: hidden; } #main04 .bg-video { position: absolute; inset: 0; z-index: 0; } #main04 .bg-video video { width: 100%; height: 100%; object-fit: cover; } #main04 .bg-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.6) 100%); } #main04::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 20%, rgba(255, 80, 0, 0.2), transparent 45%); pointer-events: none; animation: flicker04 4s ease-in-out infinite alternate; } @keyframes flicker04 { 0% { opacity: 0.7; } 100% { opacity: 1; } } #main04 .ctn { position: relative; z-index: 2; max-width: 1680px; margin: 0 auto; } #main04 .visual { position: relative; width: 100%; height: 680px; display: flex; justify-content: center; align-items: flex-start; } #main04 .visual-oven { position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 1400px; max-width: 110%; height: auto; z-index: 1; animation: ovenBlaze 2.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 40px rgba(255, 80, 0, 0.6)) drop-shadow(0 0 80px rgba(255, 40, 0, 0.4)); } #main04 .visual-chicken { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: 920px; max-width: 70%; height: auto; z-index: 2; filter: drop-shadow(0 40px 64px rgba(0,0,0,0.9)); } #main04 .visual-steam { position: absolute; top: -330px; left: 50%; transform: translateX(-50%); width: 720px; max-width: 60%; height: auto; z-index: 3; pointer-events: none; animation: steamBreathe 3.5s ease-in-out infinite; } @keyframes ovenBlaze { 0% { filter: drop-shadow(0 0 40px rgba(255, 80, 0, 0.6)) drop-shadow(0 0 80px rgba(255, 40, 0, 0.4)) brightness(1) saturate(1.05); transform: translateX(-50%) scale(1); } 25% { filter: drop-shadow(0 0 55px rgba(255, 100, 0, 0.75)) drop-shadow(0 0 100px rgba(255, 50, 0, 0.55)) brightness(1.08) saturate(1.15); transform: translateX(-50%) scale(1.005); } 50% { filter: drop-shadow(0 0 65px rgba(255, 120, 10, 0.85)) drop-shadow(0 0 125px rgba(255, 70, 0, 0.65)) brightness(1.13) saturate(1.22); transform: translateX(-50%) scale(1.01); } 75% { filter: drop-shadow(0 0 58px rgba(255, 110, 10, 0.8)) drop-shadow(0 0 115px rgba(255, 65, 0, 0.6)) brightness(1.1) saturate(1.18); transform: translateX(-50%) scale(1.008); } 100% { filter: drop-shadow(0 0 70px rgba(255, 130, 15, 0.9)) drop-shadow(0 0 140px rgba(255, 75, 0, 0.7)) brightness(1.15) saturate(1.25); transform: translateX(-50%) scale(1.012); } } @keyframes steamBreathe { 0% { transform: translateX(-50%) translateY(20px) scale(0.95); opacity: 0.7; } 30% { transform: translateX(-50%) translateY(0) scale(1.02); opacity: 0.9; } 55% { transform: translateX(-50%) translateY(-20px) scale(1.08); opacity: 0.6; } 80% { transform: translateX(-50%) translateY(-36px) scale(1.12); opacity: 0.85; } 100% { transform: translateX(-50%) translateY(-48px) scale(1.15); opacity: 0.8; } } #main04 .headline { position: absolute; top: 260px; left: 0; right: 0; z-index: 4; display: flex; justify-content: space-between; align-items: flex-start; padding: 0 24px; pointer-events: none; } #main04 .headline-left, #main04 .headline-right { max-width: 28%; text-align: center; display: flex; flex-direction: column; align-items: center; } #main04 .headline-title { display: block; max-width: 100%; height: auto; margin: 0 0 16px; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.9)) drop-shadow(0 0 40px rgba(230, 0, 18, 0.4)); } #main04 .headline-desc { font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.9); line-height: 1.7; margin: 0; letter-spacing: 0.01em; text-shadow: 0 2px 12px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.8); } #main04 .list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: -80px 0 0; padding: 0; list-style: none; position: relative; z-index: 5; } #main04 .list-item { position: relative; padding: 48px 40px 40px; background: rgba(15, 10, 10, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 0.4s ease, background 0.4s ease, border-color 0.4s ease; } #main04 .list-item::before { content: attr(data-num); position: absolute; top: 24px; right: 32px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.3); letter-spacing: 0.08em; } #main04 .list-item[data-icon]::before { content: attr(data-icon); font-size: 28px; top: 20px; } #main04 .list-item:hover { transform: translateY(-4px); background: rgba(30, 20, 20, 0.85); border-color: rgba(230, 0, 18, 0.4); } #main04 .list-item.is-red { background: #c8001e; border-color: #c8001e; } #main04 .list-item.is-red:hover { background: #e60012; border-color: #e60012; } #main04 .list-item.is-red::before { color: rgba(255,255,255,0.5); } #main04 .list-item.is-gold { background: #a0621a; border-color: #a0621a; } #main04 .list-item.is-gold:hover { background: #b5731f; border-color: #b5731f; } #main04 .list-item.is-gold::before { color: rgba(255,255,255,0.5); } #main04 .list-tag { display: block; font-size: 12px; font-weight: 700; color: #e60012; letter-spacing: 0.15em; margin: 0 0 20px; text-transform: uppercase; } #main04 .list-item.is-red .list-tag, #main04 .list-item.is-gold .list-tag { color: rgba(255,255,255,0.7); } #main04 .list-title { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.5; margin: 0 0 20px; letter-spacing: 0.01em; } #main04 .list-desc { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.6); line-height: 1.8; margin: 0; letter-spacing: 0.01em; } #main04 .list-item.is-red .list-desc, #main04 .list-item.is-gold .list-desc { color: rgba(255,255,255,0.85); } #main04 .visual-oven { animation: ovenGlow 1.2s cubic-bezier(0.22, 1, 0.36, 1) both, ovenBlaze 2.4s 1.2s ease-in-out infinite alternate; animation-play-state: paused, paused; } #main04 .visual-chicken { animation: chickenRise 1s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-play-state: paused; } #main04 .headline-left { animation: slideInLeft 0.9s 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main04 .headline-right { animation: slideInRight04 0.9s 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main04 .list-item:nth-child(1) { animation: cardUp 0.7s 1s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main04 .list-item:nth-child(2) { animation: cardUp 0.7s 1.15s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main04 .list-item:nth-child(3) { animation: cardUp 0.7s 1.3s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main04 .list-item:nth-child(4) { animation: cardUp 0.7s 1.45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main04 .list-item:nth-child(5) { animation: cardUp 0.7s 1.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main04 .list-item:nth-child(6) { animation: cardUp 0.7s 1.75s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main04.play .visual-oven, #main04.play .visual-chicken, #main04.play .headline-left, #main04.play .headline-right, #main04.play .list-item { animation-play-state: running; } @keyframes ovenGlow { 0% { opacity: 0; transform: translateX(-50%) translateY(-60px) scale(1.3); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } @keyframes chickenRise { 0% { opacity: 0; transform: translateX(-50%) translateY(100px) scale(0.8); } 60% { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.02); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } @keyframes slideInLeft { 0% { opacity: 0; transform: translateX(-80px) translateY(20px); } 100% { opacity: 1; transform: translateX(0) translateY(0); } } @keyframes slideInRight04 { 0% { opacity: 0; transform: translateX(80px) translateY(20px); } 100% { opacity: 1; transform: translateX(0) translateY(0); } } @keyframes cardUp { 0% { opacity: 0; transform: translateY(40px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* main05 */ #main05 { position: relative; width: 100%; padding: 120px 48px; background: #000 url('../image/bg_main05.jpg') no-repeat center / cover; overflow: hidden; } #main05 .ctn { position: relative; z-index: 1; max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px 32px; align-items: center; } #main05 .chart { position: relative; display: flex; justify-content: center; align-items: center; } #main05 .chart-inner { position: relative; width: 560px; height: 560px; max-width: 100%; } #main05 .chart-donut { width: 100%; height: 100%; transform: rotate(-90deg); } #main05 .chart-track { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 60; } #main05 .chart-seg { fill: none; stroke-width: 60; stroke-linecap: butt; transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: 120px 120px; } #main05 .seg-hall { stroke: #e60012; stroke-dasharray: 565.48; stroke-dashoffset: 565.48; transform: rotate(0deg); } #main05 .seg-pack { stroke: #b5731f; stroke-dasharray: 565.48; stroke-dashoffset: 565.48; transform: rotate(144deg); } #main05 .seg-deli { stroke: #c8001e; stroke-dasharray: 565.48; stroke-dashoffset: 565.48; transform: rotate(270deg); } #main05.play .seg-hall { stroke-dashoffset: 339.29; transition-delay: 0.2s; } #main05.play .seg-pack { stroke-dashoffset: 367.56; transition-delay: 1s; } #main05.play .seg-deli { stroke-dashoffset: 424.11; transition-delay: 1.7s; } #main05 .chart-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 240px; opacity: 0; } #main05.play .chart-center { animation: centerFadeIn 0.7s 0.2s ease-out forwards; } #main05 .chart-logo { display: block; width: 96px; height: auto; margin: 0 auto 12px; } #main05 .chart-title { font-size: 24px; font-weight: 800; color: #e60012; margin: 0 0 6px; letter-spacing: 0.02em; } #main05 .chart-sub { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.6); margin: 0; letter-spacing: 0.02em; } #main05 .chart-label { position: absolute; text-align: center; color: #fff; opacity: 0; z-index: 2; } #main05 .label-name { display: block; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.9); letter-spacing: 0.01em; margin-bottom: 4px; text-shadow: 0 2px 6px rgba(0,0,0,0.6); } #main05 .label-value { display: block; font-size: 28px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: 0.02em; text-shadow: 0 2px 6px rgba(0,0,0,0.6); } #main05 .label-hall { top: 50%; right: 40px; transform: translateY(-50%); } #main05 .label-pack { bottom: 95px; left: 117px; } #main05 .label-deli { top: 113px; left: 90px; } #main05.play .label-hall { animation: labelInHall 0.5s 0.6s ease-out forwards; } #main05.play .label-pack { animation: labelIn 0.5s 1.4s ease-out forwards; } #main05.play .label-deli { animation: labelIn 0.5s 2.1s ease-out forwards; } @keyframes labelIn { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes labelInHall { 0% { opacity: 0; transform: translateY(-50%) translateX(8px); } 100% { opacity: 1; transform: translateY(-50%) translateX(0); } } @keyframes centerFadeIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } #main05 .headline { position: relative; } #main05 .headline-label { font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.6); letter-spacing: 0.08em; margin: 0 0 24px; } #main05 .headline-title { display: block; max-width: 100%; height: auto; margin: 0 0 40px; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6)); } #main05 .headline-desc p { font-size: 21px; font-weight: 400; color: rgba(255,255,255,0.8); line-height: 1.8; margin: 0 0 24px; letter-spacing: 0.01em; } #main05 .headline-desc p:last-child { margin-bottom: 0; } #main05 .headline-desc p strong { color: #e60012; font-weight: 700; } #main05 .list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; } #main05 .list-item { padding: 56px 32px 48px; background: rgba(20, 10, 10, 0.75); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-align: center; transition: transform 0.4s ease, background 0.4s ease, border-color 0.4s ease; } #main05 .list-item:hover { transform: translateY(-4px); background: rgba(35, 15, 15, 0.85); border-color: rgba(230, 0, 18, 0.4); } #main05 .list-item:hover .list-icon img { transform: scale(1.1) rotate(-4deg); } #main05 .list-icon { display: flex; justify-content: center; align-items: center; height: 112px; margin: 0 0 28px; } #main05 .list-icon img { max-height: 100%; width: auto; height: auto; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); animation: iconFloat 3s ease-in-out infinite; } #main05 .list-item:nth-child(2) .list-icon img { animation-delay: 0.5s; } #main05 .list-item:nth-child(3) .list-icon img { animation-delay: 1s; } #main05 .list-item:nth-child(4) .list-icon img { animation-delay: 1.5s; } #main05 .list-title { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 14px; letter-spacing: 0.01em; } #main05 .list-desc { font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); line-height: 1.6; margin: 0; letter-spacing: 0.01em; } @keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } #main05 .headline-label { animation: fadeInUp05 0.6s 0.2s ease-out both; animation-play-state: paused; } #main05 .headline-title { animation: slamDown05 0.8s 0.4s cubic-bezier(0.22, 1.2, 0.36, 1) both; animation-play-state: paused; } #main05 .headline-desc p:nth-child(1) { animation: fadeInUp05 0.6s 0.7s ease-out both; animation-play-state: paused; } #main05 .headline-desc p:nth-child(2) { animation: fadeInUp05 0.6s 0.9s ease-out both; animation-play-state: paused; } #main05 .list-item:nth-child(1) { animation: cardUp05 0.6s 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main05 .list-item:nth-child(2) { animation: cardUp05 0.6s 1.22s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main05 .list-item:nth-child(3) { animation: cardUp05 0.6s 1.34s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main05 .list-item:nth-child(4) { animation: cardUp05 0.6s 1.46s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main05.play .headline-label, #main05.play .headline-title, #main05.play .headline-desc p, #main05.play .list-item { animation-play-state: running; } @keyframes fadeInUp05 { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slamDown05 { 0% { opacity: 0; transform: translateY(-60px) scale(1.1); filter: blur(6px) drop-shadow(0 8px 24px rgba(0,0,0,0.6)); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) drop-shadow(0 8px 24px rgba(0,0,0,0.6)); } } @keyframes cardUp05 { 0% { opacity: 0; transform: translateY(32px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } #main06 { position: relative; width: 100%; background: #000 url('../image/bg_main06.jpg') no-repeat center / cover; overflow: hidden; } #main06 .ctn { position: relative; z-index: 1; padding: 120px 80px 80px; } #main06 .headline { text-align: center; margin: 0 0 48px; } #main06 .headline-label { font-size: 14px; font-weight: 700; color: #ff3b4a; letter-spacing: 0.1em; margin: 0 0 20px; text-transform: uppercase; } #main06 .headline-title { display: block; max-width: 860px; height: auto; margin: 0 auto 24px; filter: drop-shadow(0 4px 24px rgba(0,0,0,0.6)); } #main06 .headline-desc { font-size: 18px; font-weight: 400; color: rgba(255,255,255,0.85); line-height: 1.8; margin: 0; letter-spacing: 0.01em; } #main06 .tabs { display: flex; justify-content: center; gap: 0; margin: 0 0 48px; border-bottom: 1px solid rgba(255,255,255,0.12); } #main06 .tab { position: relative; padding: 12px 40px; background: none; border: 0; font-size: 18px; font-weight: 500; color: rgba(255,255,255,0.5); cursor: pointer; letter-spacing: 0.02em; transition: color 0.3s ease; } #main06 .tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #ff3b4a; transform: scaleX(0); transform-origin: center; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); } #main06 .tab.is-active { color: #fff; font-weight: 700; } #main06 .tab.is-active::after { transform: scaleX(1); } #main06 .tab:hover { color: rgba(255,255,255,0.8); } #main06 .slider-panels { position: relative; } #main06 .slider-panel { display: none; } #main06 .slider-panel.is-active { display: block; animation: panelIn06 0.25s ease-out; } @keyframes panelIn06 { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } #main06 .slider-wrap { position: relative; display: flex; align-items: center; gap: 0; } #main06 .slider-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; z-index: 2; } #main06 .slider-btn:hover { background: rgba(255,255,255,0.3); transform: scale(1.08); } #main06 .slider-btn:active { background: rgba(255,255,255,0.4); } #main06 .slider-viewport { overflow: hidden; flex: 1; padding: 8px 24px; } #main06 .slider-track { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); will-change: transform; } #main06 .slide { flex: 0 0 calc(33.333% - 14px); } #main06 .slide-card {text-align: center; position: relative; overflow: hidden; padding-top:24px;border-radius: 16px; background: rgba(20,10,10,0.9); box-shadow: 0 8px 32px rgba(0,0,0,0.5); transition: transform 0.4s ease, box-shadow 0.4s ease; cursor: pointer; } #main06 .slide-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.7); } #main06 .slide-card img { display: block; width: 90%; pointer-events: none; transition: transform 0.6s ease; margin:0 auto; } #main06 .slide-card:hover img { transform: scale(1.04); } #main06 .slide-info { padding: 20px; } #main06 .slide-name-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin: 0 0 10px; } #main06 .slide-name { font-size: 18px; font-weight: 800; color: #fff; margin: 0; letter-spacing: 0.01em; line-height: 1.3; flex-shrink: 0; } #main06 .slide-desc { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.65); line-height: 1.7; margin: 0; text-align: left;} #main06 .slide-badge { display: inline-flex; align-items: center; padding: 3px 8px; background: #e60012; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; border-radius: 3px; flex-shrink: 0; line-height: 1.4; } #main06 .slide-badge--new { background: #ff8c00; } #main06 .slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; padding: 0; } #main06 .slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); border: 0; padding: 0; cursor: pointer; transition: background 0.3s ease, width 0.3s ease; } #main06 .slider-dot.is-active { background: #ff3b4a; width: 24px; border-radius: 4px; } #main06 .slider-dot:hover { background: rgba(255,255,255,0.6); } #main06 .headline-label { animation: fadeInUp06 0.6s 0.2s ease-out both; animation-play-state: paused; } #main06 .headline-title { animation: slamDown06 0.8s 0.3s cubic-bezier(0.22,1.2,0.36,1) both; animation-play-state: paused; } #main06 .headline-desc { animation: fadeInUp06 0.6s 0.7s ease-out both; animation-play-state: paused; } #main06 .tabs { animation: fadeInUp06 0.6s 0.9s ease-out both; animation-play-state: paused; } #main06.play .headline-label, #main06.play .headline-title, #main06.play .headline-desc, #main06.play .tabs { animation-play-state: running; } @keyframes fadeInUp06 { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slamDown06 { 0% { opacity: 0; transform: translateY(-40px) scale(1.08); filter: blur(4px); } 60% { opacity: 1; transform: translateY(4px) scale(0.97); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } #main06 .bubble { position: absolute; z-index: 2; width: 180px; padding: 20px 22px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; font-size: 14px; font-weight: 500; color: #fff; line-height: 1.7; letter-spacing: 0.01em; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.3); } #main06 .bubble p { margin: 0; } #main06 .bubble::before { content: ''; position: absolute; width: 0; height: 0; border-style: solid; } #main06 .bubble-left.bubble-top { top: 130px; left: 18vw; } #main06 .bubble-left.bubble-top::before { bottom: -14px; left: 68%; border-width: 14px 12px 0 0; border-color: rgba(255,255,255,0.12) transparent transparent transparent; } #main06 .bubble-left.bubble-bottom { top: 320px; left: 20.5vw; } #main06 .bubble-left.bubble-bottom::before { bottom: -14px; right: 22%; border-width: 14px 0 0 12px; border-color: rgba(255,255,255,0.12) transparent transparent transparent; } #main06 .bubble-right.bubble-top { top: 130px; right: 18vw; } #main06 .bubble-right.bubble-top::before { bottom: -14px; right: 68%; border-width: 14px 0 0 12px; border-color: rgba(255,255,255,0.12) transparent transparent transparent; } #main06 .bubble-right.bubble-bottom { top: 320px; right: 17.5vw; } #main06 .bubble-right.bubble-bottom::before { bottom: -14px; left: 22%; border-width: 14px 12px 0 0; border-color: rgba(255,255,255,0.12) transparent transparent transparent; } #main06 .bubble-left.bubble-top { animation: bubbleIn 0.8s 0.3s cubic-bezier(0.34,1.56,0.64,1) both, bubbleFloat 4s 1.1s ease-in-out infinite; animation-play-state: paused, paused; } #main06 .bubble-right.bubble-top { animation: bubbleIn 0.8s 0.5s cubic-bezier(0.34,1.56,0.64,1) both, bubbleFloat 4s 1.3s ease-in-out infinite; animation-play-state: paused, paused; } #main06 .bubble-left.bubble-bottom { animation: bubbleIn 0.8s 0.7s cubic-bezier(0.34,1.56,0.64,1) both, bubbleFloat 4.5s 1.5s ease-in-out infinite; animation-play-state: paused, paused; } #main06 .bubble-right.bubble-bottom { animation: bubbleIn 0.8s 0.9s cubic-bezier(0.34,1.56,0.64,1) both, bubbleFloat 4.5s 1.7s ease-in-out infinite; animation-play-state: paused, paused; } #main06.play .bubble { animation-play-state: running; } @keyframes bubbleIn { 0% { opacity: 0; transform: translateY(-20px) scale(0.85); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes bubbleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* main07 */ #main07 { position: relative; width: 100%; padding: 120px 48px; background: #f9e8e3; overflow: hidden; } #main07 .ctn { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; } #main07 .deco { position: absolute; z-index: 1; width: auto; height: auto; pointer-events: none; } #main07 .deco-tl { top: 120px; left: -160px; width: 620px; max-width: none; transform-origin: top left; } #main07 .deco-br { bottom: -100px; right: -180px; width: 640px; max-width: none; transform-origin: bottom right; } #main07 .headline { text-align: center; margin: 0 0 48px; } #main07 .headline-title { display: block; max-width: 100%; height: auto; margin: 0 auto; } #main07 .table-wrap { margin: 0 auto 64px; max-width: 900px; } #main07 .cost-table { width: 100%; border-collapse: collapse; background: transparent; } #main07 .cost-table thead th { padding: 14px 20px; background: #3d2a25; color: #fff; font-size: 15px; font-weight: 500; text-align: left; letter-spacing: 0.02em; } #main07 .cost-table tbody th, #main07 .cost-table tbody td { padding: 14px 20px; font-size: 15px; color: #3d2a25; text-align: left; letter-spacing: 0.01em; border-bottom: 1px solid rgba(61, 42, 37, 0.12); } #main07 .cost-table tbody th { font-weight: 700; } #main07 .cost-table tbody td { font-weight: 400; } #main07 .cost-table .price del { color: #999; font-weight: 400; margin-right: 4px; } #main07 .cost-table .price .arrow { color: #3d2a25; margin: 0 6px; font-weight: 400; } #main07 .cost-table .price strong { color: #e60012; font-weight: 800; font-size: 16px; } #main07 .cost-table tfoot .total { background: #e60012; } #main07 .cost-table tfoot .total th, #main07 .cost-table tfoot .total td { padding: 18px 20px; color: #fff; font-size: 16px; border: 0; } #main07 .cost-table tfoot .total th { font-weight: 700; text-align: center; } #main07 .cost-table tfoot .total td.price { text-align: center; } #main07 .cost-table tfoot .total .price strong { color: #fff; font-size: 20px; font-weight: 800; } #main07 .cost-table tfoot .total .total-sub { font-size: 15px; font-weight: 500; margin-left: 8px; color: rgba(255,255,255,0.9); } #main07 .table-note { margin: 12px 0 0; font-size: 13px; color: rgba(61, 42, 37, 0.65); letter-spacing: 0.01em; } #main07 .promo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; } #main07 .promo-item { overflow: hidden; border-radius: 8px; box-shadow: 0 8px 24px rgba(61, 42, 37, 0.15); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; } #main07 .promo-item:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(61, 42, 37, 0.3); } #main07 .promo-item img { display: block; width: 100%; height: auto; transition: transform 0.8s ease; } #main07 .promo-item:hover img { transform: scale(1.04); } #main07 .cost-table thead th, #main07 .cost-table tbody th, #main07 .cost-table tbody td, #main07 .cost-table tfoot th, #main07 .cost-table tfoot td { opacity: 0; } #main07 .deco-tl { animation: decoInTL 1.1s cubic-bezier(0.22, 1, 0.36, 1) both, decoFloatTL 4s 1.2s ease-in-out infinite alternate; animation-play-state: paused, paused; } #main07 .deco-br { animation: decoInBR 1.1s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both, decoFloatBR 4.5s 1.4s ease-in-out infinite alternate; animation-play-state: paused, paused; } #main07 .headline-title { animation: slamDown07 0.9s 0.4s cubic-bezier(0.22, 1.2, 0.36, 1) both; animation-play-state: paused; } #main07 .table-note { animation: fadeInUp07 0.6s 1.5s ease-out both; animation-play-state: paused; } #main07 .promo-item:nth-child(1) { animation: cardUp07 0.7s 1.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main07 .promo-item:nth-child(2) { animation: cardUp07 0.7s 1.75s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main07 .promo-item:nth-child(3) { animation: cardUp07 0.7s 1.9s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main07.play .cost-table thead th { animation: cellIn 0.6s 0.7s ease-out forwards; } #main07.play .cost-table tbody tr:nth-child(1) th, #main07.play .cost-table tbody tr:nth-child(1) td { animation: cellSlideIn 0.6s 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards; } #main07.play .cost-table tbody tr:nth-child(2) th, #main07.play .cost-table tbody tr:nth-child(2) td { animation: cellSlideIn 0.6s 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards; } #main07.play .cost-table tbody tr:nth-child(3) th, #main07.play .cost-table tbody tr:nth-child(3) td { animation: cellSlideIn 0.6s 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards; } #main07.play .cost-table tbody tr:nth-child(4) th, #main07.play .cost-table tbody tr:nth-child(4) td { animation: cellSlideIn 0.6s 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards; } #main07.play .cost-table tfoot th, #main07.play .cost-table tfoot td { animation: totalPop 0.7s 1.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } #main07.play .deco-tl, #main07.play .deco-br, #main07.play .headline-title, #main07.play .table-note, #main07.play .promo-item { animation-play-state: running; } @keyframes cellIn { 0% { opacity: 0; transform: translateY(-12px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes cellSlideIn { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes decoInTL { 0% { opacity: 0; transform: translate(-120px, 80px) rotate(-20deg) scale(0.8); } 100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } } @keyframes decoInBR { 0% { opacity: 0; transform: translate(120px, 120px) rotate(20deg) scale(0.8); } 100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } } @keyframes decoFloatTL { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(8px) rotate(-2deg); } } @keyframes decoFloatBR { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(-8px) rotate(2deg); } } @keyframes slamDown07 { 0% { opacity: 0; transform: translateY(-80px) scale(1.2) rotate(-2deg); filter: blur(6px); } 60% { opacity: 1; transform: translateY(10px) scale(0.96) rotate(1deg); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); } } @keyframes fadeInUp07 { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes totalPop { 0% { opacity: 0; transform: scale(0.85); } 60% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } } @keyframes cardUp07 { 0% { opacity: 0; transform: translateY(40px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* main08 */ #main08 { position: relative; width: 100%; background: #000; overflow: hidden; } #main08 .ctn { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } #main08 .process { position: relative; padding: 120px 80px; background: #1a1a1a url('../image/main08_bg.jpg') no-repeat center / cover; overflow: hidden; } #main08 .process::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(10,5,5,0.8) 100%); z-index: 0; } #main08 .process > * { position: relative; z-index: 1; } #main08 .process-head { margin: 0 0 56px; } #main08 .process-label { font-size: 14px; font-weight: 700; color: #e60012; letter-spacing: 0.15em; margin: 0 0 16px; text-transform: uppercase; } #main08 .process-title { font-size: 56px; font-weight: 900; color: #fff; margin: 0 0 32px; letter-spacing: -0.01em; line-height: 1; } #main08 .process-tags { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 0; padding: 0; list-style: none; } #main08 .process-tags li { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.7); letter-spacing: 0.01em; } #main08 .process-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); } #main08 .process-step { position: relative; padding: 32px 28px; background: rgba(15, 10, 10, 0.92); transition: background 0.3s ease, transform 0.3s ease; } #main08 .process-step:hover { background: rgba(35, 20, 20, 0.95); } #main08 .process-step.is-open { background: #e60012; } #main08 .process-step.is-open:hover { background: #c8001e; } #main08 .step-num { display: block; font-size: 13px; font-weight: 700; color: #e60012; letter-spacing: 0.12em; margin: 0 0 14px; text-transform: uppercase; } #main08 .process-step.is-open .step-num { color: #fff; } #main08 .step-title { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 14px; letter-spacing: -0.01em; } #main08 .step-title .emoji { font-size: 20px; } #main08 .step-desc { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.65); line-height: 1.7; margin: 0; letter-spacing: 0.01em; } #main08 .process-step.is-open .step-desc { color: rgba(255,255,255,0.9); } #main08 .cta { position: relative; padding: 120px 80px; background: #a30016; overflow: hidden; } #main08 .cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(230,0,18,0.3), transparent 50%), radial-gradient(circle at 20% 80%, rgba(180,0,10,0.4), transparent 50%); z-index: 0; } #main08 .cta > * { position: relative; z-index: 1; } #main08 .cta-head { margin: 0 0 48px; } #main08 .cta-label { font-size: 14px; font-weight: 700; color: #ff6a7a; letter-spacing: 0.15em; margin: 0 0 16px; } #main08 .cta-title { font-size: 44px; font-weight: 900; color: #fff; margin: 0 0 24px; letter-spacing: -0.01em; line-height: 1.2; } #main08 .cta-desc { font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.85); line-height: 1.8; margin: 0; letter-spacing: 0.01em; } #main08 .cta-form { display: flex; flex-direction: column; gap: 20px; } #main08 .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } #main08 .form-field { display: flex; flex-direction: column; gap: 10px; } #main08 .form-label { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 0.02em; } #main08 .form-label em { color: #ffd400; font-style: normal; font-weight: 700; margin-left: 2px; } #main08 .form-input { width: 100%; padding: 16px 20px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 15px; letter-spacing: 0.01em; transition: background 0.3s ease, border-color 0.3s ease; } #main08 .form-input::placeholder { color: #fff !important; opacity: 0.65; } #main08 .form-input::-webkit-input-placeholder { color: #fff; opacity: 0.65; } #main08 .form-input::-moz-placeholder { color: #fff; opacity: 0.65; } #main08 .form-input:-ms-input-placeholder { color: #fff; opacity: 0.65; } #main08 .form-input:focus { outline: none; background: rgba(255,255,255,0.15); border-color: #fff; } #main08 .form-input:focus::placeholder { opacity: 0.4; } #main08 .form-agree { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; } #main08 .agree-label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #fff; cursor: pointer; letter-spacing: 0.01em; } #main08 .agree-check { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } #main08 .agree-box { display: inline-block; width: 18px; height: 18px; border: 1.5px solid rgba(255,255,255,0.5); border-radius: 50%; background: transparent; transition: background 0.2s ease, border-color 0.2s ease; position: relative; } #main08 .agree-check:checked + .agree-box { background: #fff; border-color: #fff; } #main08 .agree-check:checked + .agree-box::after { content: ''; position: absolute; top: 4px; left: 7px; width: 4px; height: 8px; border: solid #a30016; border-width: 0 2px 2px 0; transform: rotate(45deg); } #main08 .agree-link { padding: 0; background: none; border: 0; font-size: 14px; color: rgba(255,255,255,0.7); cursor: pointer; letter-spacing: 0.01em; font-family: inherit; } #main08 .agree-link:hover { color: #fff; text-decoration: underline; } #main08 .form-submit { display: flex; align-items: center; justify-content: center; padding: 22px 32px; background: #e60012; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: 0.02em; border: 0; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } #main08 .form-submit:hover { background: #ff1a30; transform: translateY(-2px); } #main08 .form-submit:disabled { background: #333; color: rgba(255,255,255,0.5); cursor: default; transform: none; } #main08 .form-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0 0; } #main08 .contact-btn { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 24px; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; transition: transform 0.3s ease, background 0.3s ease; } #main08 .contact-btn:hover { transform: translateY(-2px); } #main08 .contact-tel { background: #fff; color: #1a1a1a; } #main08 .contact-tel:hover { background: rgba(255,255,255,0.9); } #main08 .contact-kakao { background: #ffd400; color: #1a1a1a; } #main08 .contact-kakao:hover { background: #ffea55; } #main08 .contact-icon { font-size: 18px; } #main08 .privacy-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 40px 20px; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0s 0.3s; } #main08 .privacy-modal.is-open { visibility: visible; opacity: 1; transition: opacity 0.3s ease; } #main08 .privacy-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer; } #main08 .privacy-panel { position: relative; width: 100%; max-width: 720px; max-height: 85vh; display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 24px 64px rgba(0,0,0,0.5); transform: translateY(20px) scale(0.96); transition: transform 0.4s cubic-bezier(0.22, 1.2, 0.36, 1); } #main08 .privacy-modal.is-open .privacy-panel { transform: translateY(0) scale(1); } #main08 .privacy-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; border-bottom: 1px solid rgba(0,0,0,0.08); flex-shrink: 0; } #main08 .privacy-title { font-size: 22px; font-weight: 800; color: #1a1a1a; margin: 0; letter-spacing: -0.01em; } #main08 .privacy-close { width: 40px; height: 40px; padding: 0; background: none; border: 0; font-size: 32px; font-weight: 300; color: #1a1a1a; cursor: pointer; line-height: 1; transition: transform 0.3s ease, color 0.3s ease; } #main08 .privacy-close:hover { color: #e60012; transform: rotate(90deg); } #main08 .privacy-body { padding: 32px; overflow-y: auto; flex: 1; } #main08 .privacy-body::-webkit-scrollbar { width: 8px; } #main08 .privacy-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); } #main08 .privacy-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border-radius: 4px; } #main08 .privacy-body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.4); } #main08 .privacy-intro { font-size: 14px; line-height: 1.7; color: #3a3a3a; margin: 0 0 24px; padding: 16px 20px; background: #f7f5f3; border-left: 3px solid #e60012; letter-spacing: 0.01em; } #main08 .privacy-body h4 { font-size: 16px; font-weight: 800; color: #1a1a1a; margin: 28px 0 12px; padding: 0 0 8px; border-bottom: 1px solid rgba(0,0,0,0.1); letter-spacing: -0.01em; } #main08 .privacy-body h4:first-of-type { margin-top: 0; } #main08 .privacy-body p { font-size: 14px; line-height: 1.8; color: #4a4a4a; margin: 0 0 10px; letter-spacing: 0.01em; } #main08 .privacy-body p strong { color: #1a1a1a; font-weight: 700; } #main08 .privacy-body ul, #main08 .privacy-body ol { margin: 0 0 12px; padding: 0 0 0 20px; } #main08 .privacy-body ul li, #main08 .privacy-body ol li { font-size: 14px; line-height: 1.8; color: #4a4a4a; margin: 0 0 4px; letter-spacing: 0.01em; } #main08 .process-label { animation: fadeInUp08 0.6s 0.2s ease-out both; animation-play-state: paused; } #main08 .process-title { animation: slamDown08 0.8s 0.3s cubic-bezier(0.22, 1.2, 0.36, 1) both; animation-play-state: paused; } #main08 .process-tags { animation: fadeInUp08 0.6s 0.6s ease-out both; animation-play-state: paused; } #main08 .process-step:nth-child(1) { animation: stepIn 0.6s 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main08 .process-step:nth-child(2) { animation: stepIn 0.6s 0.92s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main08 .process-step:nth-child(3) { animation: stepIn 0.6s 1.04s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main08 .process-step:nth-child(4) { animation: stepIn 0.6s 1.16s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main08 .process-step:nth-child(5) { animation: stepIn 0.6s 1.28s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } #main08 .process-step:nth-child(6) { animation: stepIn 0.7s 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-play-state: paused; } #main08 .cta-label { animation: fadeInUp08 0.6s 0.3s ease-out both; animation-play-state: paused; } #main08 .cta-title { animation: slamDown08 0.8s 0.4s cubic-bezier(0.22, 1.2, 0.36, 1) both; animation-play-state: paused; } #main08 .cta-desc { animation: fadeInUp08 0.6s 0.7s ease-out both; animation-play-state: paused; } #main08 .cta-form { animation: fadeInUp08 0.6s 0.9s ease-out both; animation-play-state: paused; } #main08 .cta .form-input, #main08 .cta .form-input::placeholder { color: #fff; } #main08 .cta .form-input::-webkit-input-placeholder { color: #fff; opacity: 1; } #main08 .cta .form-input::-moz-placeholder { color: #fff; opacity: 1; } #main08 .cta .form-input:-ms-input-placeholder { color: #fff; opacity: 1; } #main08 .cta .form-input::-ms-input-placeholder { color: #fff; opacity: 1; } #main08 .cta .form-input::placeholder { color: #fff; opacity: 1; } #main08 .agree-box { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1.5px solid rgba(255,255,255,0.5); border-radius: 50%; background: transparent; transition: background 0.2s ease, border-color 0.2s ease; position: relative; } #main08 .agree-check:checked + .agree-box { background: #fff; border-color: #fff; } #main08 .agree-check:checked + .agree-box::after { content: ''; display: block; width: 4px; height: 8px; border: solid #a30016; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); position: static; } #main08.play .process-label, #main08.play .process-title, #main08.play .process-tags, #main08.play .process-step, #main08.play .cta-label, #main08.play .cta-title, #main08.play .cta-desc, #main08.play .cta-form { animation-play-state: running; } @keyframes fadeInUp08 { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slamDown08 { 0% { opacity: 0; transform: translateY(-60px) scale(1.1); filter: blur(6px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes stepIn { 0% { opacity: 0; transform: translateY(32px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }