.main { position: relative; width: 100%; margin: 0px; padding: 0px; background-color: rgb(5, 5, 5); }
.main .intro-section { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.main .video-layer { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; }
.main .bg-video { width: 100%; height: 100%; object-fit: cover; }
.main .dark-overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgb(5, 5, 5); opacity: 0; z-index: 2; }
.main .bg-gra { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 400px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); z-index: 1; }
.main .slogan { position: absolute; left: 0px; bottom: 0px; 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%, rgb(192, 227, 251) 9.09%, rgb(239, 209, 232) 50.52%, rgb(183, 160, 223) 93.23%); background-size: 150%; background-clip: text; color: transparent; animation: 5s ease-in-out 0s infinite normal none running animated-gradient; 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 0px 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: rgb(255, 255, 255); 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: 1.5s ease 0s infinite normal none running scrollShine; }
.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 0px 15px; }
}
@media (max-width: 480px) {
  .main .flex-wrap { padding: 0px 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 0px 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: rgb(5, 5, 5); overflow: hidden; }
.main .hero .obj { position: absolute; top: 60%; left: 50%; width: 65%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; animation: 6s ease-in-out 0s infinite alternate none running floatButterfly; }
.main .hero .obj img { width: 100%; height: auto; display: block; filter: drop-shadow(rgba(255, 0, 85, 0.3) 0px 0px 40px); }
.main .hero-text-left { position: absolute; top: 150px; left: 70px; z-index: 1; color: rgb(255, 255, 255); text-align: left; }
.main .hero-title { font-size: 120px; font-weight: 500; line-height: 1; letter-spacing: 0px; 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: 0px; left: 0px; width: 100%; height: 20%; background: linear-gradient(transparent, rgb(5, 5, 5)); 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 { inset: auto 0px 0px auto; width: 70%; transform: none; }
  .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% { }
	}
}

@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: 0px; }
}
@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: 0px; }
}
@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%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 900; }
.main .about-txt { width: 100%; padding: 200px 0px 100px; font-size: 64px; color: rgb(255, 255, 255); font-weight: 700; }
.main .image-grid { width: 100%; padding: 80px 20px 0px; display: flex; gap: 0px 20px; }
.main .image-item { position: relative; flex: 1 1 0%; 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 { inset: auto 50px 50px 0px; text-align: right; }
.main .img-caption p { font-size: 30px; color: rgb(255, 255, 255); line-height: 1.5; margin: 0px; }
.main .img-caption span.content__title { font-size: 30px; color: rgb(255, 225, 105); display: block; font-weight: 700; }
.main .right .img-caption span.content__title { color: rgb(87, 126, 255); }
.main .img-caption .blank { display: block; height: 15px; }
.main .hx { background: none; color: rgb(255, 255, 255); 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: 0px 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: 0px; 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 0px; }
  .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 0px 50px; }
  .main .image-grid { padding: 0px; gap: 1px 0px; }
  .main .image-item { border-radius: 0px; }
  .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 0px 0px; background-color: rgb(5, 5, 5); text-align: center; color: rgb(255, 255, 255); display: flex; flex-direction: column; gap: 50px; z-index: 300; }
.main .message-section .type { font-size: 60px; color: rgb(255, 255, 255); font-weight: 700; line-height: 1.4; }
.main .message-section .type br.pc-hidden { display: none; }
.main .message-section p { font-size: 36px; color: rgb(255, 255, 255); font-weight: 300; line-height: 1.5; }
.main .type { grid-area: type; margin: 0px; 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: 0px 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: rgb(5, 5, 5); display: flex; justify-content: center; align-items: center; perspective: 1000px; }
.main .gallery-container .bg-gra { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 500px; background: linear-gradient(rgba(5, 5, 5, 0), rgb(5, 5, 5)); 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(2n) { margin-left: 0px; }
.main .gallery-container .row:nth-child(2n+1) { margin-left: 40vw; }
.main .gallery-container .img-wrap { width: 340px; height: 220px; background-size: cover; background-position: center center; flex-shrink: 0; box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 30px; opacity: 0.6; }

@media (max-width: 1800px) {
  .main .message-section p { font-size: 30px; }
}
@media (max-width: 1600px) {
  .main .message-section { padding: 150px 0px 0px; 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 0px; }
  .main .message-section p { font-size: 18px; }
}
@media (max-width: 480px) {
  .main .message-section { padding: 50px 20px 0px; }
  .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 0px; gap: 15px; }
  .main .type__expand--mini, .main .message-section p br { display: none; }
}

.main .why { position: relative; padding: 200px 0px; background: url("/assets/img/bg-why2.jpg") 50% 0px / cover no-repeat; color: rgb(255, 255, 255); z-index: 100; }
.main .why .bg-gra { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 300px; background: linear-gradient(rgba(5, 5, 5, 0), rgb(5, 5, 5)); }
.main .why .content-inner { padding: 0px 20px; }
.main .line-title { display: flex; justify-content: space-between; align-items: center; padding: 0px 100px; margin-bottom: 100px; flex-wrap: wrap; gap: 30px; color: rgb(255, 255, 255); }
.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: rgb(255, 255, 255); vertical-align: middle; top: -10px; }
.main .title-desc { font-size: 22px; color: rgb(201, 201, 218); 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: rgb(49, 48, 67); 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: rgb(183, 182, 205); font-weight: 300; margin-bottom: 20px; letter-spacing: 0px; }
.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: rgb(255, 255, 255); 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: rgb(67, 66, 83); 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; }
.main .blue-card { background: rgb(70, 70, 205); }
.main .wave-img { position: absolute; right: 0px; bottom: 0px; width: 80%; opacity: 0.8; mix-blend-mode: screen; }
.main .purple-card { background: rgb(118, 78, 200); 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(transparent, black 10%, black 90%, transparent); }
.main .scroll-track { display: flex; flex-direction: column; gap: 10px; animation: 20s linear 0s infinite normal none running scrollUp; }
.main .list-item { display: flex; align-items: center; gap: 15px; background: rgb(67, 66, 83); 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: rgb(170, 170, 170); margin-right: 5px; font-weight: 400; }

@media (max-width: 1900px) {
  .main .card-content { padding: 10px; }
}
@media (max-width: 1800px) {
  .main .line-title { padding: 0px 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 0px; }
  .main .line-title { padding: 0px 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: 0px; 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: 0px 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: 0px 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: 0px 0px 80px; }
  .main .why .content-inner { padding: 0px; }
  .main .line-title { padding: 0px 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: 0px 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: 0px; }
  .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: 0px; }
  .main .why-card:nth-child(4) { height: 250px; }
  .main .why-card:nth-child(4) .card-content { padding: 0px 180px 0px 0px; }
  .main .why-card:nth-child(4) .card-content { padding: 0px; }
  .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); }
  .main .scroll-track { flex-direction: row; animation: 40s linear 0s infinite normal none running scrollRight; width: 3200px; }
  .main .list-item .list-text { width: 100px; }
}
@media (max-width: 480px) {
  .main .why { padding: 0px 0px 80px; margin-top: 0px; }
  .main .line-title { padding: 0px 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: 0px; }
  .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: 0px 15px; }
  .main .line-title { gap: 15px; padding: 0px; }
  .main .line-title h2 { font-size: 24px; }
  .main .line-title .line { width: 20px; height: 1px; top: -2px; }
  .main .why-grid { padding: 0px; }
  .main .card-content h3 { font-size: 16px; }
  .main .card-content p { line-height: 1.3; }
}

.main .review { padding: 100px; background-color: rgb(5, 5, 5); color: rgb(255, 255, 255); z-index: 100; position: relative; }
.main .review .line-title { padding: 0px; }
.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: 0px; left: 0px; 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: 0px; left: 0px; height: 100%; background-image: url("/assets/img/star.png"); background-repeat: repeat-x; background-size: 21px 17px; overflow: hidden; }
.main .review-content { flex: 1 1 0%; }
.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: rgb(255, 255, 255); margin: 0px; line-height: 1.4; }
.main .review-head .divider { color: rgba(255, 255, 255, 0.5); font-size: 16px; margin-top: 2px; }
.main .review-head .reviewer { color: rgba(255, 255, 255, 0.5); font-size: 16px; font-weight: 400; }
.main .review-desc { font-size: 18px; color: rgb(255, 255, 255); line-height: 1.5; margin: 0px; word-break: keep-all; }

@media (max-width: 1600px) {
  .main .review { padding: 80px 50px 100px; }
}
@media (max-width: 1400px) {
  .main .review { padding: 80px 50px 0px; }
  .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: 0px 20px; }
  .main .review .line-title { flex-direction: column-reverse; padding: 0px 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: 0px 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: 0px; }
  .main .review-item { flex-direction: column; align-items: flex-start; padding: 15px 0px; gap: 10px; }
  .main .review-head { gap: 3px; }
}
@media (max-width: 360px) {
  .main .review { padding: 0px 15px; }
  .main .review-head h3 { font-size: 15px; }
}

.main .creation-section { position: relative; padding: 150px 0px; overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: center; }
.main .creation-section .gra-black { position: absolute; left: 0px; top: 0px; width: 100%; height: 400px; background: linear-gradient(rgb(5, 5, 5), rgba(5, 5, 5, 0)); z-index: 555; }
.main .creation-section .gra-black.bt { top: auto; bottom: 0px; transform: rotate(180deg); }
.main .creation-bg { position: absolute; top: 0px; left: 0px; 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: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1; }
.main .creation-section .content-inner { position: relative; width: 100%; max-width: 1200px; padding: 0px 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: rgb(166, 172, 255); margin-bottom: 20px; font-weight: 600; text-shadow: rgba(166, 142, 255, 0.5) 0px 0px 20px; letter-spacing: 3px; }
.main .creation-desc { font-size: 40px; color: rgb(255, 255, 255); font-weight: 300; }
.main .book-video-card { display: flex; width: 100%; max-width: 1000px; background: rgb(255, 255, 255); overflow: hidden; box-shadow: rgba(166, 142, 255, 0.47) 0px 0px 50px; 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, rgb(79, 84, 255) 0%, rgb(143, 68, 255) 100%); color: rgb(255, 255, 255); box-shadow: rgba(79, 84, 255, 0.4) 0px 10px 20px; }
.main .btn-secondary { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: rgb(255, 255, 255); backdrop-filter: blur(10px); }

@keyframes scrollUp { 
  0% { transform: translateY(0px); }
  100% { transform: translateY(-50%); }
}
@keyframes scrollRight { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-100%); }
}
@keyframes animated-gradient { 
  50% { background-position: 160% 0px; }
}
@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 0px; }
  .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 0px; }
  .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 0px; }
  .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: 0px 15px; }
  .main .creation-title { font-size: 20px; }
  .main .creation-desc { font-size: 16px; }
}