/**/ .hero-title { font-size: 2.2rem; font-weight: 500; color: #333; line-height: 1.3; } .hero-title span { font-size: 3.3rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); /**/ } .gorilla-img { position: absolute; right: 0px; transform: translateY(-100%); top: 19px; right: 20px; max-width: 80px; z-index: 2; pointer-events: none; } @media (max-width: 575.98px) { .gorilla-img { max-width: 75px; } } /**/ html[lang="ja"] .hero-title, html[lang="zh-CN"] .hero-title, html[lang="ko"] .hero-title { font-size: 1.67rem; } html[lang="ja"] .hero-title span, html[lang="zh-CN"] .hero-title span, html[lang="ko"] .hero-title span { font-size: 2.5rem; } html[lang="ja"] .display-4, html[lang="zh-CN"] .display-4, html[lang="ko"] .display-4 { font-size: 2.5rem; } @media (max-width: 767.98px) { .hero-title { font-size: 2rem; } .hero-title span { font-size: 3rem; } html[lang="ja"] .display-4, html[lang="zh-CN"] .display-4, html[lang="ko"] .display-4 { font-size: 1.9rem; } } .subtext { /**/ font-size: 1.17rem; font-weight: 500; line-height: 1.6; } .btn-brand { background-color: var(--sp88blue); color: #fff; border: none; } .btn-brand:hover { background-color: #17a2b8; color: #fff; } .verify_badge { max-width: 140px; } @media (max-width: 767.98px) { .verify_badge { max-width: 120px; } } /**/ /**/ .slick-prev, .slick-next { font-size: 0; /**/ z-index: 100; /**/ top: 40%; width: 60px; /**/ height: 60px; } .slick-prev:before, .slick-next:before { font-size: 2rem; /**/ color: #333; /**/ } @media (max-width: 767.98px) { .slick-prev { left: -22px; /**/ } .slick-next { right: -20px; } } .slick-dots { bottom: -10px; } /**/ .data-card { background-color: #fff; border-radius: .6rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); padding: 2rem; text-align: center; margin-bottom: 1.5rem; transition: transform 0.3s ease; } .data-card:hover { transform: translateY(-5px); } .data-card h3 { font-size: 3rem; color: var(--sp88blue); margin-bottom: .5rem; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-weight: 400; white-space: nowrap; } .data-card p { font-size: 1.2rem; color: #777; } /**/ .example-img { border-radius: .6rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); max-width: 100%; height: auto; } .equal-height { flex: 1; } /**/ .feature-card { background-color: #fff; border-radius: .6rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); padding: 2rem; text-align: left; /**/ transition: transform 0.3s ease; height: 100%; /**/ display: flex; flex-direction: column; /**/ } .feature-card:hover { transform: translateY(-5px); } .feature-card h5 { color: var(--sp88blue); font-weight: 700; margin-bottom: 1rem; } /**/ @media (max-width: 767.98px) { .example-img-wrapper { margin-bottom: 2rem; /**/ } } .about-section h2 { /**/ font-weight: 700; margin-bottom: 25px; text-align: center; } .about-section h2, .about-section h3, .about-section p { line-height: 1.4; } /**/ @media (max-width: 767.98px) { .desc-section, .desc-section p, .about-section, .about-section p { text-align: left !important; } } /**/ .desc-section { background: white !important; text-align: center; } .desc-section h2 { font-weight: 700; margin-bottom: 25px; text-align: center; } .desc-section p { font-size: 1.25rem; color: #555; line-height: 1.8; max-width: 800px; margin: 0 auto 10px auto; } /**/ .section-gradient { position: relative; z-index: 1; background: linear-gradient(180deg, #e0f7fa 0%, #ffffff 100%) !important; /**/ } .section-gradient-to-gray { position: relative; z-index: 1; background: linear-gradient(180deg, #e0f7fa 0%, #f5f5f5 100%) !important; /**/ } .section-gray-to-gradient { position: relative; z-index: 1; background: linear-gradient(180deg, #f5f5f5 0%, #e0f7fa 100%) !important; } .section-white-to-gradient { position: relative; z-index: 1; background: linear-gradient(180deg, #ffffff 0%, #e0f7fa 100%) !important; } .system-log { background-color: #f8f9fa; } .system-log h2 { text-align: left; font-weight: bold; margin-bottom: 30px; } .system-log .log-content { margin: 0 auto; color: #333; font-size: 1rem; padding-left: 10px } .system-log .log-content code { background-color: #eee; padding: 2px 6px; border-radius: 4px; font-family: monospace; } .system-log .more-link { display: block; text-align: left; margin-top: 20px; } .system-log .more-link a { color: var(--sp88blue); font-weight: bold; text-decoration: none; } .system-log .more-link a:hover { text-decoration: underline; } @media (max-width: 767.98px) { .system-log .log-content ol { padding-left: 1.25rem; /**/ margin-left: 0; } } .stat-box { position: relative; padding: 3rem 1rem 2rem; text-align: center; min-height: 150px; border-radius: 0.5rem; overflow: hidden; background-color: #fff; } .stat-box::before, .stat-box::after { content: ''; position: absolute; top: 50%; width: 60px; height: 60px; background-size: contain; background-repeat: no-repeat; background-position: center; transform: translateY(-50%); opacity: 0.2; } .stat-box::before { left: 10px; background-image: url('../images/laurel-left.png'); } .stat-box::after { right: 10px; background-image: url('../images/laurel-right.png'); } .stat-box h3 { font-weight: bold; margin-bottom: 0.25rem; color: #1c2237; } .stat-box p { margin: 0; font-size: 1rem; color: #6c757d; } .launch-badges-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: #8c96a3; margin-top: 2.5rem; margin-bottom: 0.25rem; font-weight: 600; text-align: center; } .launch-badges { display: flex; flex-wrap: wrap; align-items: left; justify-content: flex-start; gap: 20px 10px; /**/ width: fit-content; max-width: 100%; text-align: left; } .launch-badge-link { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: auto; height: 55px; padding: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; } .launch-badge-link img { display: block; /**/ width: auto !important; height: 55px !important; max-width: none; max-height: 55px; object-fit: contain; } @media (max-width: 767.98px) { .launch-badges { gap: 20px 10px; } .launch-badge-link, .launch-badge-link img { height: 55px !important; } } @media (max-width: 767.98px) { .stat-box { padding: 3rem 1rem 2.25rem; } .stat-box i { font-size: 3rem; } .stat-box h3 { font-size: 2rem; } .stat-box span { font-size: 1.6rem; } .stat-box::before, .stat-box::after { width: 60px; /**/ height: 60px; opacity: 0.2; top: 55%; /**/ /**/ } }