/* 인트로 */
.main { position: relative; width: 100%; margin: 0; padding: 0; background-color: #050505; }
.main .intro-section { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.main .video-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.main .bg-video { width: 100%; height: 100%; object-fit: cover; }
.main .dark-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background-color: #050505; opacity: 0; z-index: 2; }
.main .bg-gra { position: absolute; left: 0; bottom: 0; width: 100%; height: 400px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.6)); z-index: 1; }
.main .slogan { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; z-index: 55; font-size: 9.6vw; background-image: radial-gradient(34.73% 114.69% at 49.95% 16.67%,#c0e3fb 9.09%,#efd1e8 50.52%,#b7a0df 93.23%); background-size: 150%; -webkit-background-clip: text; color: transparent; animation: animated-gradient 5s ease-in-out infinite; opacity: 0; transform: translateY(50px); }
.main .flex-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.main .hole-mask-layer { margin: 40px 0 30px; width: 485px; height: 400px; z-index: 5; pointer-events: none; will-change: transform; }
.main .hole-mask-layer .hole-svg { width: 100%; height: 100%; overflow: visible; }
.main .intro-logo { z-index: 10; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.main .intro-logo h1 { margin-top: 10px; font-size: 30px; color: #fff; letter-spacing: 0.5px; }
.main .scroll-indicator { z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.main .scroll-indicator img { opacity: 0.4; animation: scrollShine 1.5s infinite; }
.main .scroll-indicator img:first-child { margin-bottom: 3px; animation-delay: 0s; }
.main .scroll-indicator img:nth-child(2) { animation-delay: 0.5s; }
.main .scroll-indicator img:nth-child(3) { animation-delay: 1s; }
@keyframes scrollShine { 0% { opacity: 0.4; } 33% { opacity: 1; } 66% { opacity: 0.4; } 100% { opacity: 0.4; } }
@media (max-width: 640px) {
	.main .hole-mask-layer { width: 480px; height: 340px; margin: 25px 0 15px; }
}
@media (max-width: 480px) {
	.main .flex-wrap { padding: 0 20px; }
	.main .intro-logo { gap: 5px; }
	.main .intro-logo img { height: 32px; }
	.main .intro-logo h1 { font-size: 24px; }
	.main .hole-mask-layer { width: 100%; height: 300px; margin: 25px 0 15px; }
}
@media (max-width: 360px) {
	.main .intro-logo img { height: 24px; }
	.main .hole-mask-layer { height: 260px; }
}

/* 비주얼 */
.main .hero { position: relative; width: 100%; height: auto; min-height: 1200px; padding: 180px 70px 200px; background-color: #050505; overflow: hidden; }
.main .hero .obj { position: absolute; top: 60%; left: 50%; width: 65%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; animation: floatButterfly 6s ease-in-out infinite alternate; }
.main .hero .obj img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 40px rgba(255, 0, 85, 0.3)); }
.main .hero-text-left { position: absolute; top: 150px; left: 70px; z-index: 1; color: #fff; text-align: left; }
.main .hero-title { font-size: 120px; font-weight: 500; line-height: 1; letter-spacing: 0; margin-bottom: 2rem; white-space: nowrap; }
.main .hero-title .title-line { position: relative; display: block; opacity: 0; will-change: transform, opacity; }
.main .hero-title .title-line + .title-line { margin-top: 5px; }
.main .hero-title .indent { margin-left: 150px; }
.main .hero-subtitle { margin-top: 30px; font-size: 24px; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.7); opacity: 0; }
.main .hero-text-right { position: absolute; bottom: 70px; right: 70px; z-index: 3; text-align: right; }
.main .hero-text-right p { font-size: 22px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); font-weight: 300; }
.main .hero-bottom-fade { position: absolute; bottom: 0; left: 0; width: 100%; height: 20%; background: linear-gradient(to bottom, transparent, #050505); z-index: 0; pointer-events: none; }
@keyframes floatButterfly { 0% { transform: translate(-50%, -50%) rotate(-2deg) scale(1); }	100% { transform: translate(-50%, -54%) rotate(2deg) scale(1.05); } }
@media (max-width: 1800px) {
	.main .hero { min-height: 1100px; }
	.main .hero-title { font-size: 100px; }
	.main .hero-subtitle { font-size: 22px; }
	.main .hero-text-right p { font-size: 20px; line-height: 1.5; }
}
@media (max-width: 1600px) {
	.main .hero { min-height: 1050px; }
	.main .hero-title .indent { margin-left: 70px; }
	.main .hero-text-left { left: 40px; }
	.main .hero-text-right { right: 40px; }
}
@media (max-width: 1400px) {
	.main .hero { height: auto; }
	.main .hero-text-left { top: 130px; }
	.main .hero-title { font-size: 80px; }
}
@media (max-width :1199px) {
	.main .hero { min-height: 900px; }
	.main .hero-title { font-size: 72px; }
	.main .hero-title .indent { margin-left: 40px; }
	.main .hero-subtitle, .main .hero-text-right p { font-size: 18px; }
}
@media (max-width: 991px) {
	.main .hero { padding: 130px 40px 240px; min-height: auto; }
	.main .hero .obj { left: auto; top: auto; bottom: 0; width: 70%; transform: none; right: 0; }
	.main .hero .obj img { max-width: 700px; }
	.main .hero-text-left { top: auto; left: auto; position: relative; }
	.main .hero-title { font-size: 48px; }
	.main .hero-subtitle { font-size: 20px; margin-top: 20px; }
	.main .hero-text-right { margin-top: 10px; right: auto; left: auto; bottom: auto; position: relative;  text-align: left; }
		@keyframes floatButterfly { 0% { transform: rotate(-2deg) scale(1); }	100% { rotate(2deg) scale(1.05); } }
}
@media (max-width: 767px) {
	.main .hero {padding: 100px 20px 240px;}
	.main .hero .obj { bottom: 5%; }
	.main .hero-title { font-size: 40px; }
	.main .hero-title .indent { margin-left: 0; }
}
@media (max-width: 640px) {
	.main .hero-title { font-size: 36px; }
	.main .hero-subtitle { font-size: 18px; line-height: 1.5; }
	.main .hero-text-right { margin-top: 0; }
}
@media (max-width: 480px) {
	.main .hero { padding: 100px 20px 200px; }
	.main .hero .obj { width: 90%; }
	.main .hero-title { font-size: 26px; }
	.main .hero-subtitle { font-size: 16px; margin-top: 15px; }
	.main .hero-text-right p { font-size: 16px; }
	.main .hero .obj { top: auto; bottom: 5%; }
}
@media (max-width: 360px) {
	.main .hero { padding: 100px 15px 200px; }
	.main .hero-title { font-size: 22px; }
	.main .hero-subtitle,	.main .hero-text-right p { font-size: 15px; } 
}

/* 제품배경 */
.main .main-content { position: relative; width: 100%; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 900;  }
.main .about-txt { width: 100%; padding: 200px 0 100px; font-size: 64px; color: #fff; font-weight: 700; }
.main .image-grid { width: 100%; padding: 80px 20px 0; display: flex; gap: 0 20px; }
.main .image-item { position: relative; flex: 1; height: 900px; border-radius: 30px; overflow: hidden; }
.main .image-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.main .image-item:hover img { transform: scale(1.05); }
.main .img-caption { position: absolute; left: 50px; top: 50px; text-align: left; z-index: 2; }
.main .right .img-caption { left: 0; right: 50px; top: auto; bottom: 50px; text-align: right; }
.main .img-caption p { font-size: 30px; color: #fff; line-height: 1.5; margin: 0; }
.main .img-caption span.content__title { font-size: 30px; color: #FFE169; display: block; font-weight: 700; }
.main .right .img-caption span.content__title { color: #577EFF; }
.main .img-caption .blank { display: block; height: 15px; }
.main .hx { background: none; color: #fff; display: inline-block; position: relative; white-space: nowrap; }
.main .hx-4 { --color-highlight-end: #F35E31; --color-highlight-end-alt: #FFE169; }
.main .right .hx-4 { --color-highlight-end: #A357FF; --color-highlight-end-alt: #577EFF; }
.main .word, .main .word > .char { display: inline-block; }
@media (max-width: 1800px) {
	.main .about-txt { font-size: 60px; }
}
@media (max-width: 1600px) {
	.main .about-txt { font-size: 48px; }
	.main .about-txt .cta-button { padding: 15px 40px; }
	.main .image-item { height: 750px; }
	.main .img-caption { left: 40px; top: 40px; }
	.main .right .img-caption { right: 40px; bottom: 40px; }
	.main .img-caption p, .main .img-caption span.content__title { font-size: 26px; }
}
@media (max-width: 1400px) {
	.main .about-txt { font-size: 44px; padding-bottom: 80px; }
	.main .about-txt .cta-button { padding: 15px 40px; }
	.main .about-txt .btn-icon { display: none; }
	.main .image-grid { gap: 0 10px; }
	.main .image-item { height: 600px; }
	.main .img-caption p, .main .img-caption span.content__title {font-size: 23px; }
}
@media (max-width: 1200px) {
	.main .about-txt { font-size: 40px; }
	.main .about-txt .cta-button { margin-top: 25px; padding: 15px 30px; }
	.main .image-item { height: 500px; }
	.main .img-caption { left: 30px; top: 30px; }
	.main .right .img-caption { right: 30px; bottom: 30px; }
}
@media (max-width: 991px) {
	.main .main-content { margin-top: 0; opacity: 1 !important; }
	.main .about-txt { padding-top: 120px; }
	.main .image-item { height: 400px; border-radius: 20px; }
	.main .img-caption { left: 20px; top: 20px; }
	.main .right .img-caption { right: 20px; bottom: 20px;}
	.main .img-caption p, .main .img-caption span.content__title { font-size: 18px; }
	.main .img-caption .blank { height: 10px; }
}
@media (max-width: 767px) {
	.main .about-txt { font-size: 36px; }
	.main .about-txt .cta-button { margin-top: 20px; font-size: 18px; }
	.main .image-grid { flex-direction: column; gap: 10px 0; }
	.main .img-caption { left: 30px; top: 30px; }
	.main .right .img-caption { right: 30px; bottom: 30px; }
	.main .img-caption p, .main .img-caption span.content__title { font-size: 20px; }
}
@media (max-width: 640px) {
	.main .about-txt { font-size: 30px; padding: 100px 0 50px; }
	.main .image-grid { padding: 0; gap: 1px 0; }
	.main .image-item { border-radius: 0; }
	.main .img-caption { left: 20px; }
	.main .right .img-caption { right: 20px; }
}
@media (max-width: 480px) {
	#gold-dust-canvas { display: none; }
	.main .about-txt { font-size: 24px; }
	.main .about-txt .cta-button { padding: 12px 25px; margin-top: 10px; font-size: 16px; }
	.main .img-caption p, .main .img-caption span.content__title { font-size: 16px; }
}
@media (max-width: 360px) {
	.main .about-txt { font-size: 22px; padding-bottom: 30px; }
	.main .about-txt .cta-button { margin-top: 15px; font-size: 14px; }
	.main .img-caption { left: 15px; }
	.main .right .img-caption { right: 15px; }
}

/* 소개 */
.main .message-section { position: relative; width: 100%; padding: 200px 0 0; background-color: #050505; text-align: center; color: #fff; display: flex; flex-direction: column; gap: 50px; z-index: 300; }
.main .message-section .type { font-size: 60px; color: #fff; font-weight: 700; line-height: 1.4; }
.main .message-section .type br.pc-hidden { display: none; }
.main .message-section p { font-size: 36px; color: #fff; font-weight: 300; line-height: 1.5; }
.main .type {	grid-area: type;	margin: 0; text-transform: none; line-height: 1.1;	font-weight: normal; }
.main .type__expand { vertical-align: top; display: inline-grid;	grid-template-columns: min-content; }
.main .type__expand--mini { vertical-align: middle; padding: 0 0.125em; }
.main .type__expand-img { display: block; position: relative; width: 0%; overflow: hidden; }
.main .type__expand-img-inner { display: block; width: 100%; height: 100%; background-size: 90%; background-repeat: no-repeat; }
.main .type__expand-img--tiny { aspect-ratio: 1.18/1; }
.main .type__expand-img--tiny.hor { aspect-ratio: 1.6/1; }
.main .type--open .type__expand-img--tiny { width: 2em; }
.main .gallery-container { margin-top: -30px; position: relative; width: 100%; overflow: hidden; background-color: #050505; display: flex; justify-content: center; align-items: center; perspective: 1000px; }
.main .gallery-container .bg-gra { position: absolute; left: 0; bottom: 0; width: 100%; height: 500px; background: linear-gradient(to bottom, rgba(5,5,5,0), rgba(5,5,5,1)); z-index: 999; }
.main .gallery-wrapper { display: flex; flex-direction: column; gap: 10px; transform: rotateX(57deg) rotateZ(-12deg) skewX(10deg) scale(1.3); transform-style: preserve-3d; transform-origin: center center; will-change: transform; }
.main .gallery-container .row { display: flex; gap: 10px; width: max-content; will-change: transform; margin-left: -100vw; flex-shrink: 0; justify-content: center; }
.main .gallery-container .row:nth-child(even) { margin-left: 0; }
.main .gallery-container .row:nth-child(odd) { margin-left: 40vw; }
.main .gallery-container .img-wrap { width: 340px; height: 220px; background-size: cover; background-position: center; flex-shrink: 0; box-shadow: 0 10px 30px rgba(0,0,0,0.5);	opacity: 0.6; }
@media (max-width: 1800px) {
	.main .message-section p {font-size: 30px;}
}
@media (max-width: 1600px) {
	.main .message-section { padding: 150px 0 0; gap: 30px; }
	.main .message-section .type { font-size: 48px; }
	.main .message-section p { font-size: 26px; }
}
@media (max-width: 1400px) {
	.main .message-section .type { font-size: 44px; }
	.main .gallery-wrapper { transform: rotateX(57deg) rotateZ(-12deg) skewX(10deg) scale(1); }
}
@media (max-width: 1200px) {
	.main .message-section p { font-size: 22px; }
	.main .message-section .type { font-size: 40px; }
	.main .gallery-container { margin-top: -150px; }
	.main .gallery-wrapper { transform: rotateX(57deg) rotateZ(-12deg) skewX(10deg) scale(0.8); }
}
@media (max-width: 767px) {
	.main .message-section .type { font-size: 30px; }
}
@media (max-width: 640px) {
	.main .message-section { padding: 100px 20px 0;}
	.main .message-section p { font-size: 18px; }
}
@media (max-width: 480px) {
	.main .message-section { padding: 50px 20px 0; }
	.main .message-section .type { font-size: 23px; font-weight: 600; }
	.main .message-section p { font-size: 16px; }
	.main .gallery-container { height: 600px; margin-top: -100px; }
	.main .gallery-wrapper { transform: rotateX(57deg) rotateZ(-12deg) skewX(10deg) scale(0.6); }
}
@media (max-width: 360px) {
	.main .message-section { padding: 50px 15px 0; gap: 15px; }
	.main .type__expand--mini, .main .message-section p br { display: none; }
}


/* why */
.main .why { position: relative; padding: 200px 0; background: url(/assets/img/bg-why2.jpg) no-repeat 50% 0; background-size: cover; color: #fff; z-index: 100; }
.main .why .bg-gra { position: absolute; left: 0; bottom: 0; width: 100%; height: 300px; background: linear-gradient(to bottom, rgba(5,5,5,0), rgba(5,5,5,1)); }
.main .why .content-inner { padding: 0 20px; }
.main .line-title { display: flex; justify-content: space-between; align-items: center; padding: 0 100px; margin-bottom: 100px; flex-wrap: wrap; gap: 30px; color: #fff; }
.main .line-title h2 { font-size: 80px; line-height: 1.2; font-weight: 700; letter-spacing: 5px; }
.main .line-title .line { position: relative; display: inline-block; width: 70px; height: 5px; background: #fff; vertical-align: middle; top: -10px; }
.main .title-desc { font-size: 22px; color: #C9C9DA; line-height: 1.6;}
.main .why-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; perspective: 1000px; }
.main .why-card:nth-child(1), .main .why-card:nth-child(4) { grid-column: span 7; }
.main .why-card:nth-child(2), .main .why-card:nth-child(3) { grid-column: span 5; }
.main .why-card { position: relative; height: 400px; border-radius: 20px; padding: 20px; overflow: hidden; background-color: #313043; will-change: transform, opacity; transform-style: preserve-3d; opacity: 0; transform: translateY(50px); display: flex; flex-direction: column; justify-content: space-between; }
.main .card-num { display: block; font-size: 24px; color: #B7B6CD; font-weight: 300; margin-bottom: 20px; letter-spacing: 0; }
.main .card-content { padding: 30px; }
.main .card-content h3 { font-size: 30px; margin-bottom: 30px; font-weight: 700; }
.main .card-content p { font-size: 20px; color: #fff; line-height: 1.5; font-weight: 300; }
.main .card-img-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: absolute; right: 20px; height: calc(100% - 40px); top: 50%; transform: translateY(-50%); }
.main .img-box { border-radius: 15px; overflow: hidden; aspect-ratio: 1/1.2; background: #434253; display: flex; justify-content: center; align-items: center;}
.main .img-box img { width: 100%; height: 100%; object-fit: cover; }
.main .img-box.file img { width: auto; height: auto; object-fit: content; }
.main .blue-card { background: #4646CD; }
.main .wave-img { position: absolute; right: 0; bottom: 0; width: 80%; opacity: 0.8; mix-blend-mode: screen; }
.main .purple-card { background: #764EC8; display: flex; flex-direction: column; justify-content: space-between; }
.main .purple-card .card-visual { text-align: center; margin-top: auto; }
.main .purple-card img { width: 80%; }
.main .list-card .left-side { max-width: 45%; display: flex; flex-direction: column; justify-content: space-between;}
.main .scrolling-list-mask { width: 35%; height: calc(100% - 40px); overflow: hidden; position: absolute; right: 20px; mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); }
.main .scroll-track { display: flex; flex-direction: column; gap: 10px; animation: scrollUp 20s linear infinite; }
.main .list-item { display: flex; align-items: center; gap: 15px; background: #434253; padding: 10px; border-radius: 10px; backdrop-filter: blur(5px); }
.main .list-item img { width: 60px; height: 60px; border-radius: 5px; object-fit: cover; }
.main .list-item .list-text { display: flex; flex-direction: column; gap: 3px; font-size: 18px; font-weight: 600; }
.main .list-item strong { color: #aaa; margin-right: 5px; font-weight: 400; }
@media (max-width: 1900px) {
	.main .card-content {padding: 10px;}
}
@media (max-width: 1800px) {
	.main .line-title { padding: 0 70px; }
	.main .line-title h2 { font-size: 80px; }
	.main .title-desc { font-size: 20px; }
	.main .card-content {padding: 10px 300px 10px 10px;}
	.main .card-content h3 {font-size: 26px;}
	.main .card-content p {font-size: 18px;}
	.main .why-card:nth-child(2) .card-content, .main .why-card:nth-child(3) .card-content {padding: 10px;}
}
@media (max-width: 1600px) {
	.main .why { padding: 120px 0; }
	.main .line-title { padding: 0 50px; margin-bottom: 70px; }
	.main .line-title h2 { font-size: 70px; }
	.main .why-grid { gap: 10px; }
	.main .card-content { padding: 10px 350px 10px 10px; }
	.main .card-content p { font-size: 17px; }
	.main .card-content p br { display: none; }
}
@media (max-width: 1400px) {
	.main .line-title { padding: 0; margin-bottom: 50px; }
	.main .line-title .line { width: 40px; height: 3px; }
	.main .line-title h2 { font-size: 60px; }
	.main .title-desc { font-size: 18px; }
	.main .why-card:nth-child(1), .main .why-card:nth-child(4) { grid-column: span 12; }
	.main .why-card:nth-child(2), .main .why-card:nth-child(3) { grid-column: span 6; }
	.main .card-content { padding: 10px 400px 10px 10px; }
}
@media (max-width: 1200px) {
	.main .line-title h2 { font-size: 48px; letter-spacing: 2px; }
	.main .title-desc { font-size: 16px; }
	.main .why-card { height: 320px; }
	.main .card-content h3 { font-size: 24px; margin-bottom: 20px; }
	.main .why-card:nth-child(2), .main .why-card:nth-child(3) { height: 270px; }
	.main .card-content p { font-size: 16px; }
}
@media (max-width: 991px) {
	.main .line-title { padding: 0 30px; flex-direction: column; align-content: space-between;}
	.main .line-title h2 { width: 100%; font-size: 40px; }
	.main .title-desc { width: 100%; display: flex; justify-content: end; }
	.main .card-content { padding: 10px 300px 10px 10px; }
	.main .list-item .list-text { font-size: 16px; }
}
@media (max-width: 767px) {
	.main .line-title { padding: 0 15px; }
	.main .title-desc { justify-content: start; }
	.main .card-content { padding: 10px 250px 10px 10px; }
	.main .card-content p { font-size: 15px; line-height: 1.4; }
	.main .scroll-track { gap: 5px; }
	.main .list-item { gap: 10px; padding: 7px; }
	.main .list-item img { width: 50px; height: 50px; }
	.main .list-item .list-text { font-size: 14px; }
}
@media (max-width: 640px) {
	.main .why { padding: 0 0 80px 0; }
	.main .why .content-inner { padding: 0; }
	.main .line-title { padding: 0 30px; margin-bottom: 30px; }
	.main .line-title h2 { font-size: 30px; }
	.main .line-title .line { width: 30px; height: 2px; top: -4px; }
	.main .why-grid { gap: 5px; padding: 0 20px; }
	.main .title-desc { line-height: 1.5; font-size: 16px; }
	.main .why-card { border-radius: 15px; padding: 15px; height: 280px; }
	.main .why-card:nth-child(2), .main .why-card:nth-child(3) { grid-column: span 12; height: auto; }
	.main .why-card:nth-child(4) { justify-content: flex-start; }
	.main .card-num { font-size: 18px; }
	.main .card-content { padding: 0; }
	.main .card-img-group { gap: 3px; right: 20px; height: 160px; top: 20px; transform: none; }
	.main .img-box.file img { width: 36px; height: auto; }
	.main .card-content h3 { font-size: 18px; margin-bottom: 10px; }
	.main .card-content p { font-size: 14px; }
	.main .why-card:nth-child(2) .card-content, .main .why-card:nth-child(3) .card-content { padding: 0; }
	.main .why-card:nth-child(4) { height: 250px; }
	.main .why-card:nth-child(4) .card-content { padding: 0 180px 0 0; }
	.main .why-card:nth-child(4) .card-content { padding: 0; }
	.main .why .bg-gra { height: 50px; }
	.main .list-item img { width: 40px; height: 40px; }
	.main .list-item .list-text { font-size: 13px; }
	.main .scrolling-list-mask { width: 100%; height: 60px; left: 20px; bottom: 20px; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
	.main .scroll-track { flex-direction: row; animation: scrollRight 40s linear infinite; width: 3200px; }
	.main .list-item .list-text { width: 100px; }
}
@media (max-width: 480px) {
	.main .why { padding: 0 0 80px; margin-top: 0; }
	.main .line-title { padding: 0 20px; }
	.main .title-desc { font-size: 14px; }
	.main .title-desc br { display: none; }
	.main .why-card { height: auto; }
	.main .why-card:nth-child(1) { height: 360px; justify-content: flex-start; }
	.main .why-card:nth-child(4) { height: 260px; } 
	.main .why-card:nth-child(4) .card-content { padding: 0; }
	.main .card-img-group { bottom: 20px; top: auto; height: 150px; }
	.main .img-box { aspect-ratio: 1 / 0.8; }
	.main .card-num { font-size: 14px; }
	.main .list-item .list-text { font-size: 13px; }
}
@media (max-width: 360px) {
	.main .why .content-inner { padding: 0 15px; }
	.main .line-title { gap: 15px; padding: 0; }
	.main .line-title h2 { font-size: 24px; }
	.main .line-title .line { width: 20px; height: 1px; top: -2px; }
	.main .why-grid { padding: 0; }
	.main .card-content h3 { font-size: 16px; }
	.main .card-content p { line-height: 1.3; }
}

/*리뷰 */
.main .review { padding: 100px; background-color: #050505; color: #fff; z-index: 100; position: relative; }
.main .review .line-title { padding: 0; }
.main .review .line-title h2 { text-align: right; }
.main .review-list { border-top: 1px solid rgba(255,255,255,0.2); width: 100%; }
.main .review-item { display: flex; align-items: center; gap: 80px; padding: 30px 50px; border-bottom: 1px solid rgba(255,255,255,0.2); transition: background 0.3s; opacity: 0; transform: translateY(50px); }
.main .review-item:hover { background: rgba(255,255,255,0.02); } 
.main .review-stars { position: relative; width: 105px; height: 17px; flex-shrink: 0; }
.main .review-stars::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/assets/img/star.png); background-repeat: repeat-x; background-size: 21px 17px; filter: grayscale(100%) opacity(0.3); }
.main .review-stars span { position: absolute; top: 0; left: 0; height: 100%; background-image: url(/assets/img/star.png); background-repeat: repeat-x; background-size: 21px 17px; overflow: hidden; }
.main .review-content { flex: 1; }
.main .review-head { display: flex; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 15px; }
.main .review-head h3 { font-size: 20px; font-weight: 600; color: #fff; margin: 0; line-height: 1.4; }
.main .review-head .divider { color: rgba(255,255,255,.5); font-size: 16px; margin-top: 2px; }
.main .review-head .reviewer { color: rgba(255,255,255,.5); font-size: 16px; font-weight: 400; }
.main .review-desc { font-size: 18px; color: #fff; line-height: 1.5; margin: 0; word-break: keep-all; }
@media (max-width: 1600px) {
	.main .review {padding: 80px 50px 100px;}
}
@media (max-width: 1400px) {
	.main .review { padding: 80px 50px 0; }
	.main .review-item { padding: 20px 40px; gap: 50px; }
	.main .review-head h3 { font-size: 18px; }
	.main .review-desc { font-size: 16px; }
}
@media (max-width: 991px) {
	.main .review { padding: 0 20px; }
	.main .review .line-title { flex-direction: column-reverse; padding: 0 30px; }
	.main .review .line-title h2 { text-align: left; }
	.main .review-item { padding: 15px 20px; gap: 30px; }
	.main .review-stars { width: 85px; height: 12px; }
	.main .review-stars::before { background-size: 17px 12px; }
	.main .review-stars span { background-size: 17px 12px; }
	.main .review-head h3 { font-size: 16px; }
	.main .review-desc { font-size: 14px; }
}
@media (max-width: 640px) {
	.main .review .line-title { padding: 0 10px; }
	.main .review-head { flex-direction: column; align-items: flex-start; gap: 5px; }
	.main .review-head .divider { display: none; }
	.main .review-head .reviewer { font-size: 14px; }
}
@media (max-width: 480px) {
	.main .review .line-title { padding: 0; }
	.main .review-item {flex-direction: column; align-items: flex-start; padding: 15px 0; gap: 10px; }
	.main .review-head { gap: 3px; }
}
@media (max-width: 360px) {
	.main .review { padding: 0 15px; }
	.main .review-head h3 { font-size: 15px; }
}

/* 샘플 */
.main .creation-section { position: relative; padding: 150px 0; overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: center; }
.main .creation-section .gra-black { position: absolute; left: 0; top: 0; width: 100%; height: 400px; background: linear-gradient(to bottom, rgba(5,5,5,1), rgba(5,5,5,0)); z-index: 555; }
.main .creation-section .gra-black.bt { top: auto; bottom: 0; transform: rotate(180deg); }
.main .creation-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.main .creation-bg .bg-video { width: 100%; height: 100%; object-fit: cover; }
.main .creation-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1; }
.main .creation-section .content-inner { position: relative; z-index: 10; width: 100%; max-width: 1200px; padding: 0 20px; display: flex; flex-direction: column; align-items: center; z-index: 600; }
.main .creation-header { text-align: center; margin-bottom: 60px; }
.main .creation-title { font-size: 30px; color: #A6ACFF; margin-bottom: 20px; font-weight: 600; text-shadow: 0 0 20px rgba(166, 142, 255, 0.5); letter-spacing: 3px; }
.main .creation-desc { font-size: 40px; color: #fff; font-weight: 300; }
.main .book-video-card { display: flex; width: 100%; max-width: 1000px; background: #fff; overflow: hidden; box-shadow: 0 0 50px rgb(166 142 255 / 47%); margin-bottom: 60px; opacity: 0; transform: translateY(50px); }
.main .book-video-card video { width: 100%; height: auto; object-fit: contain; display: block }
.main .btn-group { display: flex; gap: 15px; opacity: 0; transform: translateY(30px); }
.main .btn { padding: 18px 50px; border-radius: 50px; font-size: 18px; font-weight: 600; text-decoration: none; transition: transform 0.3s; }
.main .btn:hover { transform: scale(1.05); }
.main .btn-primary { background: linear-gradient(135deg, #4F54FF 0%, #8F44FF 100%); color: #fff; box-shadow: 0 10px 20px rgba(79, 84, 255, 0.4); }
.main .btn-secondary { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: #fff; backdrop-filter: blur(10px); }
@keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes scrollRight { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes animated-gradient { 0, 100% { background-position: -200% 0; } 50% { background-position: 160% 0; } }
@media (max-width :1800px) {
	.main .creation-title { font-size: 32px; }
	.main .creation-desc { font-size: 30px; }
}
@media (max-width: 1600px) {
	.main .creation-section { padding: 120px 0; }
	.main .creation-desc { font-size: 26px; }
	.main .btn { padding: 15px 40px; }
}
@media (max-width: 1200px) {
	.main .creation-desc { font-size: 22px; }
	.main .btn { padding: 15px 30px; }
}
@media (max-width: 991px) {
	.main .creation-title { font-size: 26px; }
	.main .btn-group { gap: 10px; }
}
@media (max-width: 640px) {
	.main .creation-section { padding: 80px 0; }
	.main .creation-section .gra-black { height: 200px; }
	.main .creation-title { font-size: 22px; letter-spacing: 2px; margin-bottom: 10px; }
	.main .creation-desc { font-size: 20px; line-height: 1.5; }
	.main .creation-header, .main .book-video-card { margin-bottom: 40px; }
	.main .btn { padding: 12px 30px; font-size: 16px; gap: 5px; }
}
@media (max-width: 480px) {
	.main .creation-section { padding: 50px 0; }
	.main .creation-title { font-size: 18px; letter-spacing: 1px; }
	.main .creation-desc { font-size: 18px; }
	.main .creation-header, .main .book-video-card { margin-bottom: 30px; }
	.main .btn-group { gap: 5px; }
	.main .btn { padding: 12px 20px; font-size: 14px; }
}
@media (max-width: 360px) {
	.main .creation-section .content-inner { padding: 0 15px; }
	.main .creation-title { font-size: 20px; }
	.main .creation-desc { font-size: 16px; }
}


/********** 버튼효과 ***********/
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}

@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

:root {
  --shiny-cta-bg: #050505;             
  --shiny-cta-bg-subtle: #1a0b2e;      
  --shiny-cta-fg: #ffffff;            
  
  /* ★ 핵심 색상 변경 ★ */
  --shiny-cta-highlight: #9b20da;      
  --shiny-cta-highlight-subtle: #ece0ff; 
}

.cta-button {
  --animation: gradient-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  
  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 1.25rem 2.5rem;
  
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  z-index: 600;
  border: 1px solid transparent;
  border-radius: 360px;
  
  color: var(--shiny-cta-fg);
  text-decoration: none; 

  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
              conic-gradient(
                  from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
                  transparent,
                  var(--shiny-cta-highlight) var(--gradient-percent),
                  var(--gradient-shine) calc(var(--gradient-percent) * 2),
                  var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
                  transparent calc(var(--gradient-percent) * 4)
              ) border-box;
              
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);

  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform var(--transition), box-shadow var(--transition);
  transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
}

.cta-button::before,
.cta-button::after,
.cta-button span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}

.cta-button:active {
  translate: 0 1px;
}

.cta-button::before {
  --size: calc(100% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  
  background: radial-gradient(
      circle at var(--position) var(--position),
      white calc(var(--position) / 4),
      transparent 0
    ) padding-box;
    
  background-size: var(--space) var(--space);
  background-repeat: space;
  
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
  
  border-radius: inherit;
  opacity: 0.4;
  z-index: -1;
}

.cta-button::after {
  --animation: shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(
    -50deg,
    transparent,
    var(--shiny-cta-highlight),
    transparent
  );
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
}

/* 7. 텍스트 뒤 후광 효과 */
.cta-button span {
  z-index: 1;
  position: relative;
  /* 글자 자체에 약간의 그림자를 줘서 가독성 높임 */
  text-shadow: 0 1px 2px rgba(0,0,0,0.5); 
}

/* ★ 중요: 글자 뒤에 생기던 사각형 배경(후광)을 아예 삭제 */
.cta-button span::before {
  content: none; /* display: none과 동일 */
  display: none;
}

/* 8. 애니메이션 실행 */
.cta-button,
.cta-button::before,
.cta-button::after {
  animation: var(--animation) var(--duration),
    var(--animation) calc(var(--duration) / 0.4) reverse paused;
  animation-composition: add;
}

/* 9. 호버 시 변화 (빛이 강해지고 빨라짐) */
.cta-button:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-cta-highlight-subtle);
  transform: translateY(-2px); 
  box-shadow: 0 10px 25px rgba(155, 32, 218, 0.4); 

  animation-play-state: running;
}

.cta-button:is(:hover, :focus-visible) span::before {
  opacity: 1;
}

/* 10. 내부 아이콘 스타일 보정 */
.cta-button .btn-icon img {
    height: 24px;
    width: auto;
    display: block;
}

/* 11. 키프레임 정의 */
@keyframes gradient-angle {
  to { --gradient-angle: 360deg; }
}

@keyframes shimmer {
  to { rotate: 360deg; }
}

@keyframes breathe {
  from, to { scale: 1; }
  50% { scale: 1.2; }
}