<!doctype html>
<html lang="id" class="no-js">
<head>
<!-- Basic Meta Tags -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Language" content="id" />
<!-- Site Info -->
<title>Academy of Champions 2025: Final Match Watch Party</title>
<meta name="author" content="Ruangguru Tech Team" />
<meta name="publisher" content="PT Ruang Raya Indonesia" />
<meta
name="description"
content="Bergabunglah dalam Final Match Watch Party Academy of Champions 2025! Saksikan momen paling dinantikan, mainkan game eksklusif, dan dapatkan berbagai hal spesial di Ruangguru."
/>
<link rel="shortcut icon" href="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/favicon60x60-3.png" />
<link rel="canonical" href="https://www.ruangguru.com/champions/aoc/final" />
<!-- SEO Meta Tags -->
<meta name="robots" content="noindex, nofollow" />
<meta name="google-site-verification" content="VJAn1g6wmtTZPpTXh-B4xoSFEkUi5jcV74xQSr6jnOM" />
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Academy of Champions 2025: Final Match Watch Party" />
<meta
property="og:description"
content="Bergabunglah dalam Final Match Watch Party Academy of Champions 2025! Saksikan momen paling dinantikan, mainkan game eksklusif, dan dapatkan berbagai hal spesial di Ruangguru."
/>
<meta property="og:image" content="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20New%20Icon/rg.png#keepProtocol" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="350" />
<meta property="og:url" content="https://www.ruangguru.com/event/academy-of-champions-final/" />
<!-- Twitter Meta Tags -->
<meta name="twitter:title" content="Academy of Champions 2025: Final Match Watch Party" />
<meta
name="twitter:description"
content="Bergabunglah dalam Final Match Watch Party Academy of Champions 2025! Saksikan momen paling dinantikan, mainkan game eksklusif, dan dapatkan berbagai hal spesial di Ruangguru."
/>
<meta name="twitter:image" content="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20New%20Icon/rg.png#keepProtocol" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<!-- Styles -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&display=swap');
/* Utility Classes for Layout */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.flex {
display: flex;
}
.row-reverse {
flex-direction: row-reverse;
}
.hidden {
display: none !important;
}
.stack {
display: flex;
flex-direction: column;
}
.hstack {
display: flex;
flex-direction: row;
}
.w-full {
width: 100%;
}
.w-auto {
width: auto;
}
.flex-1 {
flex: 1;
}
.flex-2 {
flex: 2;
}
.justify-center {
justify-content: center;
}
.align-center {
align-items: center;
}
.self-start {
align-self: flex-start;
}
.self-center {
align-self: center;
}
.grid {
display: grid;
}
.gap-half {
gap: 0.25rem; /* 4px */
}
.gap-1 {
gap: 0.375rem; /* 6px */
}
.gap-2 {
gap: 0.625rem; /* 10px */
}
.gap-3 {
gap: 0.75rem; /* 12px */
}
.gap-4 {
gap: 1rem; /* 16px */
}
.gap-5 {
gap: 1.25rem; /* 20px */
}
.p-1 {
padding: 0.375rem; /* 6px */
}
.p-3 {
padding: 0.75rem; /* 12px */
}
.p-9 {
padding: 2.25rem; /* 36px */
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.text-center {
text-align: center;
}
.text-2xs {
font-size: 8px;
}
.text-xs {
font-size: 10px;
}
.text-sm {
font-size: 12px;
}
.text-md {
font-size: 14px;
}
.text-lg {
font-size: 16px;
}
.text-xl {
font-size: 18px;
}
.text-2xl {
font-size: 20px;
}
.text-3xl {
font-size: 24px;
}
.text-4xl {
font-size: 26px;
}
.text-white {
color: white;
}
.text-gray-200 {
color: #d9d9d9;
}
.text-gray-300 {
color: #959dac;
}
.text-gray-900 {
color: #2c313a;
}
.font-sans {
font-family: 'Space Grotesk', sans-serif;
}
.font-inter {
font-family: Inter, sans-serif;
}
.font-normal {
font-weight: 400;
}
.font-bold {
font-weight: 700;
}
.font-italic {
font-style: italic;
}
.rotate-180 {
transform: rotate(180deg);
}
.radius-8 {
border-radius: 8px;
}
.radius-full {
border-radius: 9999px;
}
.cursor-pointer {
cursor: pointer;
}
/* Responsiveness */
/* Extra Small screens (min-width: 475px) */
@media (min-width: 475px) {
.xs\:flex {
display: flex;
}
}
/* Medium screens (min-width: 768px) */
@media (min-width: 768px) {
.md\:w-auto {
width: auto;
}
.md\:block {
display: block;
}
.md\:flex {
display: flex;
}
.md\:hidden {
display: none;
}
.md\:stack {
display: flex;
flex-direction: column;
}
.md\:gap-3 {
gap: 0.75rem; /* 12px */
}
.md\:gap-4 {
gap: 1rem; /* 16px */
}
.md\:gap-5 {
gap: 1.25rem; /* 20px */
}
.md\:p-9 {
padding: 2.25rem;
}
.md\:hstack {
display: flex;
flex-direction: row;
}
.md\:hidden {
display: none;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.md\:text-xs {
font-size: 10px;
}
.md\:text-sm {
font-size: 12px;
}
.md\:text-lg {
font-size: 16px;
}
.md\:text-4xl {
font-size: 26px;
}
}
/* Large screens (min-width: 1024px) */
@media (min-width: 1024px) {
.lg\:p-9 {
padding: 2.25rem;
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, 1fr); /* 3 columns for desktops */
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, 1fr); /* 3 columns for desktops */
}
}
.desktop-view {
display: block;
}
.mobile-view {
display: none;
}
@media (max-width: 767px) {
.desktop-view {
display: none;
}
.mobile-view {
display: block;
}
}
body {
margin: 0;
-ms-overflow-style: none;
height: 100%;
background:
url('https://cdn-web-2.ruangguru.com/landing-pages/assets/7f1b6589-031e-45cf-85a8-ba985a019864.png?convert=webp') no-repeat,
black;
background-size: 100%;
background-attachment: fixed;
background-repeat: repeat;
--container-width: 1200px;
}
.body-container {
float: none;
margin: auto;
max-width: var(--container-width, 1000px);
}
.body-wrapper {
position: relative;
max-width: var(--container-width, 1000px);
overflow: hidden;
}
@media (max-width: 767px) {
body {
background: #e7dbc6;
}
.body-container {
max-width: 767px;
}
.body-wrapper {
max-width: 767px;
}
}
.page-center {
float: none !important;
margin: 0 auto !important;
max-width: 1200px !important;
width: 90% !important;
}
img {
max-width: 100%;
}
html {
scrollbar-width: none;
}
.web {
display: inherit !important;
}
a,
a:hover,
a:visited {
text-decoration: none !important;
color: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
span {
margin: 0;
}
.display-none {
display: none !important;
}
.cta {
border-radius: var(--size-radius-rad-full, 9999px);
background: var(--prop-action-primary-primary-default, #f26d0f);
color: var(--color-text-text-invert, #fff);
text-align: center;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
border: 1px solid #f26d0f;
padding: 0.75rem 2.5rem;
}
.secondary-cta {
display: flex;
height: 44px;
padding: 0.3rem 2.5rem;
justify-content: center;
align-items: center;
border-radius: 9999px;
border: 1px solid var(--prop-action-secondary-secondary-default-border, #cfd3db);
background: var(--prop-action-secondary-secondary-default, #fff);
color: var(--color-text-text-invert, #fff);
text-align: center;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
cursor: pointer;
color: var(--color-text-text-ink, #2c313a);
}
nav.ruangguru-header {
background: #0b0b08;
}
.navig-link-dropdown[aria-expanded='false']:after {
border-top: 0.3em solid #fff;
}
.body-wrapper {
font-family: 'Space Grotesk', 'Inter', sans-serif;
margin-top: 3.375rem;
}
@media (min-width: 321px) {
.body-wrapper {
margin-top: 4.625rem !important;
}
}
@media (min-width: 1025px) {
.body-wrapper {
margin-top: 5.625rem !important;
}
}
.text-countdown-hero {
align-items: center;
display: flex;
flex-direction: row;
gap: 0.25rem;
justify-content: center;
}
.text-countdown-hero div,
.text-countdown-hero span {
color: #fff;
letter-spacing: 0.01em;
margin: 0;
}
.text-countdown-hero div {
grid-gap: 0.25rem;
align-items: center;
display: grid;
grid-template-columns: auto auto;
}
.text-countdown-hero span {
color: #fff;
background: linear-gradient(0deg, #cd1924 0%, #cd1924 100%), linear-gradient(133deg, #ea4952 1.52%, #cd1924 50%, #9a0912 98.48%), rgba(0, 0, 0, 0.25);
border-radius: 8px;
width: 1.75rem;
height: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
}
.hero-timer-cta {
align-items: center;
display: flex;
justify-content: center;
padding: 0.1rem 0;
position: relative;
gap: 12px;
}
.hero-timer-cta p {
color: var(--color-text-text-ink, #2c313a);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}
@media (max-width: 767px) {
.hero-timer-cta p {
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 18px;
}
.hero-timer-cta {
justify-content: flex-start;
}
.text-countdown-hero span {
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 18px;
}
}
.slick-disabled {
opacity: 0.2 !important;
}
.slick-arrow:before {
content: none !important;
}
.slick-arrow {
background-size: 100% 100% !important;
border-radius: 50% !important;
box-shadow: 0 12px 16px rgba(26, 29, 34, 0.12);
cursor: pointer !important;
height: 2rem !important;
top: 105% !important;
width: 2rem !important;
z-index: 1 !important;
}
.slick-prev {
background-image: url(https://cdn-web-2.ruangguru.com/file-uploader/lp/c99d671c-12a9-44ea-ae09-e8a4b233ac2d.svg) !important;
right: 0 !important;
left: auto;
margin-right: 44px;
}
.slick-next {
background-image: url(https://cdn-web-2.ruangguru.com/file-uploader/lp/c2f137c4-6388-43d0-b6c1-920585b36f3b.svg) !important;
right: 0 !important;
}
.slick-dots {
bottom: -8% !important;
left: 0 !important;
width: fit-content !important;
}
.slick-dots li button:before {
color: #b29e82 !important;
font-size: 12px !important;
opacity: 1 !important;
}
.slick-dots li.slick-active button:before {
color: #ed3737 !important;
font-size: 16px !important;
}
.hero {
position: relative;
}
.hero-section {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
gap: 16rem;
}
.hero-logo {
width: auto;
height: 186px;
}
.hero-bg {
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: translate(-50%, 0);
z-index: -1;
}
@media (min-width: 767px) {
.hero-bg {
height: auto;
min-height: 100%;
}
.hero-desc {
padding: 1rem 5rem;
}
}
.date-location {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.location {
height: fit-content;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0.25rem;
}
.location-title {
color: white;
font-family: 'Space Grotesk';
font-size: 24px;
font-weight: 700;
line-height: 26.4px;
letter-spacing: -0.1600000113248825px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.location-desc {
color: white;
text-align: center;
font-family: 'Space Grotesk';
font-size: 16px;
font-weight: 400;
line-height: 18px;
text-decoration-line: underline;
text-underline-position: from-font;
}
@media (max-width: 767px) {
.hero-section {
gap: 8rem;
}
.location-desc {
font-size: 12px;
}
.location-desc-title {
margin-top: 1.75rem;
}
}
@media (max-width: 450px) {
.location-desc-title {
margin-top: 1.4rem !important;
}
}
@media (max-width: 375px) {
.location-desc {
font-size: 10px !important;
}
}
.location-desc-title {
font-family: 'Space Grotesk';
font-size: 20px;
font-weight: 700;
line-height: 25.52px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: white;
margin-top: 2.5rem;
margin-bottom: 0.5rem;
}
.location-desc-subtitle {
font-family: 'Space Grotesk';
font-size: 16px;
font-weight: 500;
line-height: 18px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: white;
}
@media (max-width: 375px) {
.location-desc-subtitle {
font-size: 14px;
}
}
@media (max-width: 320px) {
.location-desc-subtitle {
font-size: 12px;
}
}
.title-tag {
padding-bottom: 1rem;
}
.text-subtitle {
text-align: center;
font-family: 'Space Grotesk';
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 110%;
letter-spacing: -0.16px;
}
.text-title {
text-align: center;
font-family: 'Space Grotesk';
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 110%;
letter-spacing: -0.16px;
}
.text-subtitle.text-dark {
color: #575757;
}
.text-title.text-dark {
color: #2c313a;
}
.text-light {
color: #fff;
}
.venue {
padding: 3rem 0 40px;
background: #f1ebe6;
}
@media (max-width: 767px) {
.venue {
padding: 1.5rem 0 0;
}
}
.location-venue {
color: #000;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
max-width: 18rem;
}
.cta-default {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
width: 100%;
border: 1px solid var(--color-border-border-highlight, #cd1924);
background: #fff;
color: var(--color-text-text-highlight, #cd1924);
text-align: center;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 22px;
}
.cta-red {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
width: 100%;
border: none;
background: #ac2a2c;
color: #fff;
text-align: center;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 22px;
}
.ticket {
background: url(https://cdn-web-2.ruangguru.com/landing-pages/assets/bcc11298-6e92-4e13-8b75-c37d66579e7e.png?convert=webp), #000;
padding: 24px 0;
/* background-repeat: no-repeat;
background-size: 100%, cover;
background-position-y: top, center;
padding: 24px 0; */
}
.placeholder-map {
/* display: grid; */
justify-items: center;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
@media (max-width: 767px) {
.placeholder-map {
grid-template-columns: 1fr;
gap: 1rem;
}
}
.ticket-picks {
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
width: 100%;
max-width: 626px;
}
.ticket-price-box {
border-radius: 12px;
background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.15);
padding: 12px;
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.ticket-type {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
border-bottom: 1px dashed #bec8d0;
padding-bottom: 10px;
}
.ticket-name-tag {
display: flex;
gap: 8px;
align-items: center;
padding-bottom: 8px;
}
.ticket-tag {
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid #979797;
}
.ticket-name {
color: var(--Cloudy-Cloudy110, #333842);
font-family: 'Space Grotesk';
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 20px;
}
@media (max-width: 375px) {
.ticket-name {
font-size: 14px;
}
}
.cta-exclusive {
color: #ac2a2c;
font-family: Inter;
font-size: 12px;
font-weight: 600;
line-height: 18px;
display: flex;
align-items: flex-end;
gap: 4px;
}
.ticket-start,
.ticket-pax {
color: var(--CLOUDY-SHADOW-CLOUDY-110, #333842);
text-align: right;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}
.ticket-price {
display: flex;
align-items: center;
color: var(--color-text-text-ink, #2c313a);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 22px;
}
.purchase {
position: relative;
display: none;
}
.purchase-box {
display: flex;
flex-direction: column;
padding: 12px;
gap: 12px;
border-radius: var(--size-radius-rad-lg, 12px);
background: #fff;
}
.purchase-box-title {
display: flex;
align-items: center;
justify-content: space-between;
}
.purchase-title {
color: #2c313a;
font-family: 'Space Grotesk';
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 22px;
letter-spacing: -0.1px;
}
.purchase-desc {
color: #2c313a;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}
.purchase-box-tnc {
border-radius: 8px;
border: 1px solid var(--color-border-border-subtle, #dadfea);
background: var(--prop-pallete-subtle-subtle-blue, #e0eefa);
margin: 12px;
padding: 12px;
width: 100%;
}
.purchase-tnc-title {
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px dashed #bec8d0;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
}
.tnc-title,
.tnc-desc {
color: var(--color-text-text-ink, #2c313a);
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
.tnc-list {
padding: 0.5rem 1rem 0 1rem;
margin: 0;
}
.tnc-list li {
color: var(--CLOUDY-SHADOW-CLOUDY-110, #333842);
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
margin-bottom: 0.5rem;
}
.purchase-tnc-cta {
display: flex;
justify-content: flex-end;
}
.main-banner {
position: relative;
background: linear-gradient(2deg, rgba(0, 0, 0, 0) 5.09%, #000 100%), url(https://cdn-web-2.ruangguru.com/landing-pages/assets/0b2ccdd9-a006-4460-8990-6d67c10bed0e.jpg?convert=webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Space Grotesk', serif;
padding-block: 1.5rem;
}
.main-content {
position: relative;
overflow: hidden;
background-color: #c8b09d;
display: grid;
grid-template-columns: 3fr;
padding-top: 2.25rem;
padding-bottom: 15rem;
padding-inline: 0.375rem;
}
.main-content * {
z-index: 1;
}
.main-content-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.section-card {
overflow: hidden;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.4);
}
.creator-tag {
display: inline-flex;
padding: 4px 12px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: var(--size-radius-rad-full, 9999px);
border: 1px solid #0fb4bd;
}
.subtitle-section {
color: #fff;
font-family: 'Space Grotesk', serif;
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: 24px;
margin: 0;
}
.subtitle-section span {
font-weight: 600;
}
.container-content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1.5rem;
}
.content-left {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.info-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
}
.info-title {
color: var(--color-text-text-ink, #d9d9d9);
text-align: center;
font-family: 'Space Grotesk';
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
letter-spacing: -0.16px;
}
.main-banner-cta {
color: #fcc41b;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.store-buttons {
display: flex;
align-items: flex-start;
gap: 12px;
}
.store-button {
width: 112px;
}
.social-title {
color: #2c313a;
text-align: center;
font-family: 'Space Grotesk';
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-top: 16px;
}
.logo-hero {
margin-top: 1.5rem;
}
/*COUNTDOWN HEADER*/
.countdown-payment {
background: #e32c36;
padding: 4px 0 6px;
position: fixed;
width: 100%;
max-width: var(--container-width, 1000px);
z-index: 10;
}
.modal .countdown-payment {
position: relative;
}
.countdown-payment-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.countdown-title {
color: #fff;
font-family: Inter;
font-size: 12px;
font-weight: 600;
line-height: 18px;
}
.countdown {
display: flex;
border-radius: 9999px;
background: var(--color-background-bgsubtle-bgsubtle-highlight, #f8e1e2);
align-items: center;
padding: 4px 8px 4px 4px;
gap: 2px;
}
.countdown-timer {
color: var(--color-text-text-highlight, #cd1924);
text-align: center;
font-family: Inter;
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 16px;
}
.countdown-timer span {
color: var(--color-text-text-highlight, #cd1924);
text-align: center;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 16px;
}
/*COUNTDOWN HEADER*/
.container-floating-header {
position: fixed;
width: 100%;
z-index: 1000;
}
.breadcrumb {
background: #000;
padding: 1rem 0;
}
.breadcrumb a {
color: #20a4b0;
}
.breadcrumb a:hover {
color: #1c7680;
}
.breadcrumb a:active {
color: #185e66;
}
.breadcrumb .back-button {
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 9999px;
width: 32px;
height: 32px;
}
.breadcrumb .back-button:hover {
background-color: #f0f0f0;
}
.breadcrumb .back-button:active {
background-color: #e0e0e0;
}
.breadcrumb p {
color: var(--color-text-text-invert, #fff);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 20px;
}
.footer.dark {
background: #1a202c !important;
}
.img-section-bottom-wrapper {
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
overflow: hidden;
width: 100%;
height: auto;
margin-bottom: -1px;
}
.img-section-bottom {
width: 100%;
height: auto;
}
@media (max-width: 1024px) {
.img-section-bottom {
width: auto;
}
}
@media (max-width: 767px) {
.main-banner {
background: url(https://cdn-web-2.ruangguru.com/landing-pages/assets/0b2ccdd9-a006-4460-8990-6d67c10bed0e.jpg?convert=webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 0.75rem 0 2.5rem 0;
}
.container-content {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding-bottom: 2.5rem;
}
.info-card {
width: 100%;
}
.aoc-logo {
width: 208px;
height: auto;
}
.info-title {
font-size: 14px;
}
.social-title {
font-size: 10px;
}
.countdown-payment {
width: 100%;
}
}
/* Start - Tabs */
.tab-buttons {
position: absolute;
bottom: -1.5rem;
justify-content: center;
padding: 4px;
z-index: 1;
border-radius: 9999px;
background-color: #423d33;
}
.tab-button {
display: flex;
align-items: center;
padding: 10px 24px;
gap: 4px;
border-radius: 9999px;
border: none;
cursor: pointer;
background: transparent;
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
.tab-button:focus {
outline: none;
}
.tab-button.active {
background-color: #f1bb53;
color: #040c0e;
}
@media (max-width: 767px) {
.tab-pane {
display: none;
}
.tab-pane.active {
display: flex;
flex-direction: column;
}
}
/* End - Tabs */
/* Start - Leaderboard District */
.district-icon-img {
width: 64px;
height: 64px;
}
.district-starchamp-icon {
width: 1.125rem;
height: 1.125rem;
}
.district-starchamps-badge {
position: relative;
display: flex;
padding: 6px 34px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 4.352px;
}
.district-starchamps-badge .district-starchamp-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.district-starchamps-rank-badge {
position: absolute;
left: -1.6rem;
top: 50%;
transform: translateY(-50%) scale(0.4);
}
.district-card-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
border: 1px solid #524238;
background: #24160d;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.district-card-container.highlight {
border-radius: 8px;
background: rgba(36, 22, 13, 0.8);
}
.district-view-all-button {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
background: transparent;
padding: 0.5rem 1rem;
gap: 0.5rem;
border-radius: 0;
border: 1px solid #2c313a;
color: #2c313a;
text-align: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.875rem;
font-weight: 700;
transition:
background-color 0.3s ease,
color 0.3s ease;
}
.district-view-all-button:hover {
background-color: #24160d;
color: #ffffff;
}
.district-view-all-button:active,
.district-view-all-button:focus {
outline: 1px auto #24160d;
border-radius: 0;
background-color: #24160d;
color: #ffffff;
}
.district-view-all-button svg {
transition: color 0.3s ease;
}
.district-view-all-button:hover svg,
.district-view-all-button:active svg,
.district-view-all-button:focus svg {
color: #ffffff;
}
/* End - Leaderboard District */
/* Start - Leaderboard Individual */
.leaderboard-individual-card {
background: radial-gradient(46.78% 63.56% at 100% 89.37%, rgba(255, 144, 47, 0.5) 3.22%, rgba(58, 21, 28, 0.25) 100%),
radial-gradient(57.06% 50.84% at 0% 103.13%, rgba(255, 255, 255, 0.25) 0%, rgba(248, 195, 215, 0) 100%), linear-gradient(180deg, #140a0e 0%, #240f14 25%, #3a151c 50%, #551a23 100%);
}
.player-card-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: rgba(252, 247, 245, 0.1);
}
.player-view-all-button {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
background: transparent;
padding: 0.5rem 1rem;
gap: 0.5rem;
border-radius: 0;
border: 1px solid #ffffff;
color: #ffffff;
text-align: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.875rem;
font-weight: 700;
transition:
background-color 0.3s ease,
color 0.3s ease;
}
.player-view-all-button:hover {
background-color: #3e0a1c;
color: #ffffff;
}
.player-view-all-button:active,
.player-view-all-button:focus {
outline: 1px auto #3e0a1c;
border-radius: 0;
background-color: #3e0a1c;
color: #ffffff;
}
.player-view-all-button svg {
transition: color 0.3s ease;
}
.player-view-all-button:hover svg,
.player-view-all-button:active svg,
.player-view-all-button:focus svg {
color: #ffffff;
}
.rank-badge {
display: flex;
width: 32px;
height: 32px;
justify-content: center;
align-items: center;
border-radius: 100%;
background: rgba(255, 255, 255, 0.2);
text-align: center;
font-family: Inter, sans-serif;
font-size: 12px;
font-weight: 600;
}
.top-rank-badge {
height: 32px;
width: auto;
}
/* End - Leaderboard Individual */
/* Start - Modal */
.modal {
display: none;
position: fixed;
align-items: center;
justify-content: center;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: relative;
width: 100%;
height: 100%;
max-width: 500px;
display: flex;
align-items: flex-end;
justify-content: center;
}
.modal-background {
position: absolute;
left: 0;
top: 50%;
width: 100%;
z-index: -1;
transform: translate(0, -50%);
background: url('https://cdn-web-2.ruangguru.com/landing-pages/assets/e06ff3aa-d9bf-4382-a28b-7e4dcfa2198a.png?convert=webp') no-repeat center center;
background-size: cover;
}
.modal-body {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 3rem;
gap: 0.75rem;
font-family: 'Space Grotesk', sans-serif;
color: #333331;
border-radius: 16px 16px 0px 0px;
background: #fff;
}
.modal-body ol {
display: flex;
flex-direction: column;
text-align: center;
font-size: 0.875rem;
padding-left: 0;
margin: 0;
list-style-position: inside;
gap: 0.5rem;
}
.modal-icon {
width: 3.125rem;
height: auto;
}
.modal-button {
background: #ac2a2c;
border: 1px solid #fff;
color: #ffffff;
border: none;
padding: 0.75rem 2rem;
border-radius: 0;
font-family: Inter, sans-serif;
font-size: 0.75rem;
font-weight: 700;
text-align: center;
cursor: pointer;
transition:
background 0.3s ease,
transform 0.1s ease;
}
.modal-button:hover {
background: #8b2021;
}
.modal-button:active {
background: #751818;
transform: scale(0.95);
}
.modalt-tile {
color: var(--Cloudy-Cloudy110, #333842);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 20px;
text-align: center;
}
.modal-description {
color: var(--Cloudy-Cloudy110, #333842);
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 18px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.modal .purchase-box-tnc {
margin: 0;
}
@media (max-width: 425px) {
.modal-body {
padding: 1rem;
}
}
.toast {
visibility: hidden;
background-color: white;
color: black;
text-align: center;
border-radius: 9999px;
padding: 14px 24px;
position: fixed;
z-index: 1000;
left: 50%;
transform: translateX(-50%);
top: 30px;
font-family: Inter, sans-serif;
font-size: 14px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
transition:
visibility 0s,
opacity 0.3s ease-in-out;
opacity: 0;
}
.toast.show {
visibility: visible;
opacity: 1;
}
/* End - Modal */
@media (min-width: 1024px) {
.game-list {
grid-template-columns: repeat(2, 1fr);
}
.leaderboard-section {
min-width: 381px;
}
}
@media (min-width: 1157px) {
.game-list {
grid-template-columns: repeat(3, 1fr);
}
}
.custom-header.ruangguru-header #logout-btn {
position: absolute;
top: 100%;
right: 0;
gap: 0.5rem;
padding: 0.5rem 1rem;
min-width: 100px;
margin-top: 0.5rem;
}
.custom-header.ruangguru-header .navig-link {
font-size: 14px;
}
.custom-header.ruangguru-header .container-user_profile {
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
border-radius: 8px !important;
border: 1px solid #959dac !important;
padding: 4px 6px !important;
background: #010101 !important;
}
.custom-header.ruangguru-header .navigation__content {
display: none;
}
.custom-header.ruangguru-header .hamburger-icon {
display: block;
}
.custom-header.ruangguru-header .container-ruangguru-header {
display: block;
}
@media (min-width: 321px) {
.custom-header.ruangguru-header .navigation__right {
top: 12px;
}
}
@media (min-width: 1300px) {
.custom-header.ruangguru-header .container-ruangguru-header {
display: flex;
}
.custom-header.ruangguru-header .navigation__content {
display: grid;
}
.custom-header.ruangguru-header .navigation__right {
top: unset;
}
.custom-header.ruangguru-header .hamburger-icon {
display: none;
}
}
.countdown-label-container {
display: grid !important;
grid-template-columns: 1fr !important;
justify-items: center;
}
.countdown-label {
color: #2c313a;
/* font-family: 'Space Grotesk'; */
font-family: Inter !important;
font-size: 8px !important;
font-style: normal;
font-weight: 400;
line-height: 10px !important;
}
.countdown-colon {
color: #cd1924 !important;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
margin-bottom: 1rem;
}
.button-ticket-sold {
background-size: 100% auto;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
color: #ac2a2c;
background-image: url('https://cdn-web-2.ruangguru.com/landing-pages/assets/a7efca3b-cffd-4dde-a6b2-b33fe97ffd80.png');
}
@media (min-width: 767px) {
.event-slick {
margin-left: -2.5rem;
margin-right: -3.5rem;
}
.venue-slick {
margin-left: -1rem;
margin-right: -2rem;
}
.how-to-buy-slick {
margin-left: -1rem;
margin-right: -2rem;
}
}
.venue-slick .slick-slide {
margin-bottom: 1rem;
}
.event-slick .slick-next {
margin-right: 1rem !important;
}
@media (min-width: 767px) {
.event-slick .slick-slide {
margin-right: 1rem;
margin-bottom: 1rem;
}
.event-slick .slick-slide:last-child {
margin-right: 0;
}
.event-slick .slick-prev {
margin-left: 7rem;
}
.venue-slick .slick-slide {
margin-right: 1rem;
}
.venue-slick .slick-slide:last-child {
margin-right: 0;
}
.venue-slick .slick-prev {
margin-left: 7rem;
}
.purchase-box-header {
display: none;
}
}
.venue-map {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 626px;
height: fit-content;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding: 1rem;
background-color: #fdfcfa;
border-radius: 16px;
gap: 1rem;
}
@media (max-width: 767px) {
.venue-map {
display: grid;
grid-template-columns: 1fr;
}
}
.help {
background: #f1ebe6;
padding-bottom: 4rem;
}
.help p {
font-family: Inter;
font-size: 14px;
font-weight: 700;
line-height: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #333842;
}
.help span {
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #333842;
}
.help-container {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 626px;
display: flex;
margin-top: -4rem;
align-items: center;
background: white;
cursor: pointer;
justify-self: center;
border-radius: 12px;
padding: 0.75rem 1rem;
gap: 0.75rem;
}
@media (max-width: 767px) {
.help-container {
width: 95%;
max-width: 485px;
margin-top: -2rem;
}
}
.supported {
background: #f1ebe6;
}
.modal-seat-benefit {
width: 100%;
padding: 1.5rem;
}
.modal-seat-benefit ul {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
.modal-seat-benefit li {
margin: 10px 0;
padding-left: 30px;
background-image: url('https://cdn-web-2.ruangguru.com/landing-pages/assets/2db07c8a-6292-457c-aebc-4c1d00c29f68.png');
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
color: #333842;
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.modal-seat-benefit-header {
width: 100%;
display: flex;
align-items: baseline;
}
.modal-seat-benefit-header-title {
flex: 1;
display: grid;
gap: 0.75rem;
}
.modal-seat-benefit-header-title-container {
width: 100%;
display: flex;
align-items: center;
gap: 1rem;
}
.modal-seat-benefit-header-title-text {
color: #333842;
font-family: Inter;
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.modal-seat-benefit-header-subtitle-text {
color: #333842;
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.modal-seat-benefit-header-square {
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid #979797;
}
.modal-seat-benefit-exclusive {
width: 100%;
color: #333842;
font-family: Inter;
font-size: 12px;
font-weight: 600;
line-height: 16px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
margin-top: 1rem;
margin-bottom: -0.75rem;
}
.how-to-buy {
padding: 24px 0 40px;
background: #f1ebe6;
}
.how-to-buy-slick p {
font-family: Inter;
font-size: 14px;
font-weight: 400;
line-height: 22px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
@media (min-width: 767px) {
.how-to-buy-slick .slick-slide {
margin-right: 1rem;
margin-bottom: 1rem;
}
.how-to-buy-slick .slick-slide:last-child {
margin-right: 0;
}
}
.img-section-footer {
margin-top: -10rem;
}
@media (max-width: 767px) {
.img-section-footer {
margin-top: -7rem;
}
}
.faq {
background: #f1ebe6;
margin-top: -2rem;
}
@media (max-width: 767px) {
.faq {
margin-top: -0.5rem;
}
}
.accordion-subject {
align-items: center;
display: grid;
grid-template-columns: 1fr 0.1fr;
justify-content: center;
border-radius: 12px;
border: none;
background: white;
}
.accordion-img {
align-items: center;
display: flex;
justify-content: flex-end;
}
.accordion {
border: none;
cursor: pointer;
outline: none;
text-align: left;
transition: 0.4s;
width: 100%;
}
.container-acc2 {
background-color: transparent;
border: none;
border-radius: 8px;
margin-bottom: 1rem;
}
.panel2 {
max-height: 0;
overflow: hidden;
transition: max-height 0.1s ease-out;
}
.rotate-arrow {
justify-content: flex-start;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion-text p {
color: #2c313a;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 28px;
letter-spacing: -0.09px;
margin: 0;
}
.faq-content_accordion {
max-width: 626px;
width: 100%;
margin: 1.5rem auto auto;
}
.accordion.active .accordion-subject {
border-bottom: dashed 1px #cfd3db;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.panel-faq {
border-radius: 0 0 12px 12px;
background: white;
}
.panel-faq ul,
ol {
padding: 0 1.5rem;
}
.panel-faq li,
.panel-faq p {
color: black;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
opacity: 0.8;
margin: 0.5rem 0 0;
padding: 0;
}
.faq .section-subtitle {
margin: 0 0 2rem;
}
@media (min-width: 768px) {
.accordion-text p,
.panel-faq li,
.panel-faq p {
font-size: 16px;
line-height: 24px;
}
.font-desc-faq {
float: none;
font-size: 18px;
line-height: 22px;
margin: auto;
max-width: 45%;
padding: 2rem 0 0;
}
.faq {
padding: 3rem 0 4rem;
}
.faq-cta {
padding: 1rem 0;
width: 22%;
}
.accordion-subject {
padding: 1rem 1.5rem;
}
.accordion-img img {
height: 2rem;
width: 2rem;
}
.active .accordion-img img {
transform: rotate(180deg);
}
.panel-faq {
padding: 0.5rem 3rem 1.5rem 1.5rem;
}
.panel-faq p {
padding: 0;
}
}
@media (max-width: 767px) {
.faq {
padding: 2rem 0;
}
.faq-content_accordion {
width: 100%;
padding: 0 0.5rem;
}
.accordion-subject {
padding: 12px;
}
.panel-faq {
padding: 12px;
}
.accordion-text p {
font-size: 14px;
line-height: 22px;
}
.panel-faq li,
.panel-faq p {
font-size: 14px;
line-height: 22px;
}
.panel-faq span {
font-style: italic;
}
}
</style>
<!-- Third Party Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/analytics@0.8.1/dist/analytics.min.js"></script>
<script src="https://unpkg.com/analytics-plugin-trackable/dist/analytics-plugin-trackable.min.js"></script>
<script src="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/global-assets/js/cta.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- Application Scripts -->
<script type="module" crossorigin src="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/www.ruangguru.com/champions/aoc/final-reunion-7f55727f9f/assets/index-pRTj_a4Y.js"></script>
</head>
<body>
<div><style>/*!
* Bootstrap v4.5.0 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
padding: 0 !important;
}
*,
:after,
:before {
box-sizing: border-box;
}
header,
nav {
display: block;
}
p {
margin-top: 0;
}
a {
background-color: transparent;
color: #007bff;
text-decoration: none;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:not([href]),
a:not([href]):hover {
color: inherit;
text-decoration: none;
}
img {
border-style: none;
}
img,
svg {
vertical-align: middle;
}
svg {
overflow: hidden;
}
button {
border-radius: 0;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
margin: 0;
overflow: visible;
text-transform: none;
}
[type='button'],
button {
-webkit-appearance: button;
}
[type='button']:not(:disabled),
button:not(:disabled) {
cursor: pointer;
}
[type='button']::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
.nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
margin-bottom: 0;
padding-left: 0;
}
.navbar {
padding: 0.5rem 1rem;
position: relative;
-ms-flex-align: center;
-ms-flex-pack: justify;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
}
@-webkit-keyframes progress-bar-stripes {
0% {
background-position: 1rem 0;
}
to {
background-position: 0 0;
}
}
@keyframes progress-bar-stripes {
0% {
background-position: 1rem 0;
}
to {
background-position: 0 0;
}
}
@-webkit-keyframes spinner-border {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@keyframes spinner-border {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@-webkit-keyframes spinner-grow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes spinner-grow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@media print {
*,
:after,
:before {
box-shadow: none !important;
text-shadow: none !important;
}
a:not(.btn) {
text-decoration: underline;
}
img {
page-break-inside: avoid;
}
p {
orphans: 3;
widows: 3;
}
@page {
size: a3;
}
.navbar {
display: none;
}
}
.cta {
border-radius: 9999px;
background: var(--k-12-base-light-theme-action-primary-default, #f26d0f);
width: 100%;
border: none;
color: var(--k-12-base-light-theme-text-solid-invert, #fff);
text-align: center;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 22px;
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
}
.cta.dark,
.cta.dark-green,
.cta.blue-indigo,
.cta.violet,
.cta.roc {
color: #000;
background-color: #fff;
}
@media (max-width: 1024px) {
.navbar {
padding: 0 !important;
}
}
.navig-link a {
background-color: transparent;
color: #474747;
text-decoration: none !important;
}
.navig-link.dark a,
.navig-link.dark-green a,
.navig-link.roc a,
.navig-link.blue-indigo a,
.navig-link.violet a,
.navig-link.home a {
color: #fff !important;
}
.navig-dropdown-area a:hover,
.navig-link a:hover {
background: 0 !important;
color: #3cc4e5 !important;
cursor: pointer;
text-decoration: none !important;
}
.ruangguru-header {
background: #fff;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.13);
position: fixed;
top: 0;
width: 100%;
z-index: 100;
padding: 0 !important;
}
.ruangguru-header.dark {
background: #000;
}
.ruangguru-header.dark-green {
background: #022527;
}
.ruangguru-header.roc {
background-color: #1d1110;
}
.ruangguru-header.blue-indigo {
background: #444fb7;
}
.ruangguru-header.home {
background: linear-gradient(257.67deg, #21a5b1 46.16%, #0e9bdf 95.13%);
}
.ruangguru-header .navig-link {
color: #474747 !important;
font-family: Inter;
font-size: 16px;
font-weight: 500;
line-height: 24px;
}
.ruangguru-header.dark .navig-link,
.ruangguru-header.dark-green .navig-link,
.ruangguru-header.blue-indigo .navig-link,
.ruangguru-header.roc .navig-link {
color: #fff !important;
}
.navigation__left {
display: flex;
}
.logo-header {
padding: 5px 0;
}
.navig-link:hover {
background: 0 !important;
color: #3cc4e5 !important;
cursor: pointer;
}
.navig-link-dropdown {
white-space: nowrap;
}
.navig-link-dropdown:after {
border-bottom: 0;
border-left: 0.3em solid transparent;
border-right: 0.3em solid transparent;
border-top: 0.3em solid;
content: '';
display: inline-block;
margin-left: 0.255em;
transition: 0.7s;
vertical-align: 0.255em;
}
.navig-link-dropdown[aria-expanded='true']:after {
transform: scaleY(-1);
}
.navig-link-dropdown[aria-expanded='false']:after {
transform: scaleY(1);
}
.logo-product {
margin: 0 0 5px !important;
}
.logo-product img {
min-height: 3rem;
object-fit: scale-down;
object-position: left;
width: 100%;
}
#lp_ea {
display: flex;
}
.item-services a,
.item-center a,
.text-product {
font-family: Inter;
}
@keyframes animate {
0% {
opacity: 0;
transform: rotateX(-90deg);
}
50% {
transform: rotateX(20deg);
}
to {
opacity: 1;
transform: rotateX(0deg);
}
}
@media (min-width: 1025px) {
.spacer-rg {
height: 4.5rem;
}
.container-ruangguru-header {
align-items: center;
padding: 18px 10px;
position: relative;
}
.ruangguru-header.home .page-center {
width: 90% !important;
}
.logo-header {
margin-right: 16px;
}
.navigation__right {
position: absolute;
right: 0;
}
#produk_item {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
color: #212529;
display: none;
float: left;
font-size: 1rem;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
list-style: none;
padding: 0.5rem 10px;
position: absolute;
text-align: left;
top: 70%;
width: 1050px;
z-index: 1000;
left: 7%;
}
.item-product,
.item-services,
.item-center {
padding: 12px;
}
.item-services a,
.item-center a,
.text-product {
color: #0a2540 !important;
font-family: Inter;
font-size: 14px;
font-weight: 400;
line-height: 22px;
text-align: inherit;
text-decoration: none;
white-space: normal !important;
width: auto !important;
}
.item-product:hover,
.item-services:hover,
.item-center:hover {
background-color: #eaf8f9 !important;
cursor: pointer;
}
#services_item,
#center_item {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
color: #212529;
display: none;
flex-flow: column;
float: left;
font-size: 1rem;
list-style: none;
margin: 0;
min-width: 10rem;
padding: 0.5rem 0;
position: absolute;
text-align: left;
top: 70%;
z-index: 1000;
}
#services_item {
left: 44rem;
}
#center_item {
left: 14rem;
}
.container-ruangguru-header {
display: flex;
flex-direction: row;
}
.navigation__content {
align-items: center;
display: none;
flex-basis: 100%;
flex-grow: 1;
max-height: 500px;
overflow-y: scroll;
padding-bottom: 20px;
text-align: center;
}
}
@media (min-width: 1078px) {
.hamburger-icon {
display: none;
}
.navigation__content {
align-items: center;
display: none;
flex-basis: auto;
flex-grow: 0;
max-height: unset;
overflow-y: auto;
padding-bottom: 0;
text-align: center;
}
.navigation__content .navig-link {
margin: 0 14px;
padding: 8px 8px 8px 0;
}
.navigation__content {
display: grid;
grid-auto-flow: column;
}
}
@media (min-width: 321px) and (max-width: 767px) {
.spacer-rg {
height: 4rem;
}
.container-ruangguru-header {
align-items: center;
padding: 10px;
position: relative;
}
.navigation__content {
padding-bottom: 20px;
}
.item-services a,
.item-center a,
.text-product {
color: #0a2540 !important;
font-size: 14px;
font-weight: 400;
text-align: inherit;
text-decoration: none;
white-space: normal !important;
width: auto !important;
}
.hamburger-icon {
align-self: center;
transform: scale(0.8);
}
.navig-dropdown-area {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
color: #212529;
display: none;
font-size: 1rem;
left: 0;
list-style: none;
margin: 10px;
min-width: 10rem;
text-align: left;
top: 100%;
z-index: 1000;
}
#produk,
#program,
#services {
padding: 20px 0 0;
}
#produk_item,
#services_item,
#center_item {
padding: 1rem 20px;
}
.text-product {
margin-bottom: 0;
}
.navigation__right {
position: absolute;
right: 0;
top: 12px;
}
.navig-link {
padding: 28px 0 0;
text-align: center;
}
.item-product {
margin-bottom: 12px;
padding: 0.25rem 0.5rem 0.5rem;
}
.item-services,
.item-center {
margin-bottom: 0.35rem;
padding: 0.5rem 0;
}
.navigation__content {
align-items: center;
display: none;
flex-basis: 100%;
flex-grow: 1;
max-height: 500px;
overflow-y: scroll;
text-align: center;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.container-ruangguru-header {
align-items: center;
padding: 10px;
position: relative;
}
.hamburger-icon {
align-self: center;
transform: scale(0.8);
}
.logo-header {
margin-left: 20px;
}
.item-services a,
.item-center a,
.text-product {
color: #0a2540 !important;
font-size: 16px;
font-weight: 400;
text-align: inherit;
text-decoration: none;
white-space: normal !important;
width: auto !important;
}
.navig-dropdown-area {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
color: #212529;
display: none;
font-size: 1rem;
left: 0;
list-style: none;
margin: 0 10px;
min-width: 10rem;
text-align: left;
top: 100%;
z-index: 1000;
}
#produk_item,
#services_item,
#center_item {
padding: 1rem 20px;
}
.text-product {
margin-bottom: 0;
}
.navigation__right {
position: absolute;
right: 0;
top: 12px;
}
.navig-link {
padding: 28px 0 0;
text-align: center;
}
.item-product {
margin-bottom: 18px;
padding: 0.25rem 1.5rem;
}
.item-services,
.item-center {
margin-bottom: 18px;
padding: 2px 0;
}
.navigation__content {
display: none;
}
}
@media (max-width: 320px) {
.spacer-rg {
height: 3rem;
}
.container-ruangguru-header {
align-items: center;
position: relative;
}
.navigation__content {
padding-bottom: 20px;
}
.item-services a,
.item-center a,
.text-product {
color: #0a2540 !important;
font-size: 14px;
font-weight: 400;
text-align: inherit;
text-decoration: none;
white-space: normal !important;
width: auto !important;
}
.hamburger-icon {
align-self: center;
transform: scale(0.8);
}
.logo-header {
margin-left: 10px;
transform: scale(0.8);
}
.navig-dropdown-area {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
color: #212529;
display: none;
font-size: 1rem;
left: 0;
list-style: none;
margin: 10px;
min-width: 10rem;
text-align: left;
top: 100%;
z-index: 1000;
}
#produk,
#program,
#services {
padding: 20px 0 0;
}
#produk_item {
padding: 1rem 20px;
}
#services_item,
#center_item {
padding: 10px 20px;
}
.text-product {
margin-bottom: 0;
}
.navigation__right {
position: absolute;
right: 0;
top: 5px;
transform: scale(0.8);
}
.navig-link {
padding: 28px 0 0;
text-align: center;
}
.item-product {
margin-bottom: 18px;
padding: 0.25rem 1.5rem;
}
.item-services,
.item-center {
margin-bottom: 18px;
padding: 2px 0;
}
.navigation__content {
align-items: center;
display: none;
flex-basis: 100%;
flex-grow: 1;
max-height: 500px;
overflow-y: scroll;
text-align: center;
}
}
.wrapper-profile-login {
position: relative;
}
.container-login_details {
position: relative;
}
.container-user_profile {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: var(--size-radius-rad-full, 9999px);
border: 1px solid var(--K12-Base-Theme-Border-Default, #cfd3db);
background: var(--K12-Base-Theme-Action-Secondary-Default, #fff);
padding: 4px 8px;
cursor: pointer;
position: relative;
}
.profile-picture {
border-radius: 100%;
}
.display-none {
display: none !important;
}
.display-1 {
font-size: 6rem;
}
.display-1,
.display-2 {
font-weight: 300;
line-height: 1.2;
}
.display-2 {
font-size: 5.5rem;
}
.display-3 {
font-size: 4.5rem;
}
.display-3,
.display-4 {
font-weight: 300;
line-height: 1.2;
}
.display-4 {
font-size: 3.5rem;
}
/* Text utility classes */
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
.text-justify {
text-align: justify !important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-wrap {
white-space: normal !important;
}
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-lowercase {
text-transform: lowercase !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-capitalize {
text-transform: capitalize !important;
}
.text-white {
color: #fff !important;
}
.text-primary {
color: #007bff !important;
}
.text-secondary {
color: #6c757d !important;
}
/*FLOATING BANNER*/
.floating,
.floating > img {
width: 100%;
}
.hero-cta-wrapper {
align-items: center;
display: flex;
justify-content: center;
padding: 0.1rem 0 0.35rem;
position: relative;
}
.hero-timer-cta p {
color: #fff;
font-family: Inter;
font-size: 16px;
font-weight: 600;
line-height: 24px;
padding-right: 0.5rem;
margin: 0 !important;
}
.text-countdown-hero div,
.text-countdown-hero span {
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}
.text-countdown-hero {
align-items: center;
display: flex;
flex-direction: row;
gap: 0.25rem;
justify-content: center;
}
.text-countdown-hero div,
.text-countdown-hero span {
color: #fff;
letter-spacing: 0.01em;
margin: 0;
}
.text-countdown-hero div {
grid-gap: 0.25rem;
align-items: center;
display: grid;
grid-template-columns: auto auto;
}
.text-countdown-hero span {
color: #fff;
background: linear-gradient(0deg, #cd1924 0%, #cd1924 100%), linear-gradient(133deg, #ea4952 1.52%, #cd1924 50%, #9a0912 98.48%), rgb(0 0 0 / 0.25);
border-radius: 8px;
width: 1.75rem;
height: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
}
/* Floating banner positioning for countdown */
.container-floating-banner,
.floating {
position: relative;
}
/* Override existing hero-timer-cta to position at bottom center of floating banner */
.hero-timer-cta {
position: absolute !important;
bottom: 6% !important;
left: 50% !important;
transform: translateX(-50%) !important;
background: transparent !important;
color: white !important;
padding: 8px 16px !important;
border-radius: 8px !important;
text-align: center !important;
font-size: 14px !important;
z-index: 10 !important;
display: flex;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
}
.hero-timer-cta .countdown-hero {
margin-top: 0 !important;
}
.hero-timer-cta .text-countdown-hero {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 4px !important;
}
.hero-timer-cta .text-countdown-hero div {
display: flex !important;
align-items: center !important;
color: white !important;
}
.hero-cta {
background: #fff;
border: 8px solid #7ac9d0;
border-radius: 96px;
color: #2c313a;
display: inline-block;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 24px;
margin: 0;
padding: 0.5rem 1.75rem;
text-align: center;
text-decoration: none;
}
@media (max-width: 767px) {
.hero-cta {
border: 8px solid #7ac9d0;
font-size: 12px;
line-height: 18px;
padding: 0.5rem 1.75rem;
}
.hero-timer-cta p {
font-size: 12px;
line-height: 18px;
}
.text-countdown-hero div,
.text-countdown-hero span {
font-size: 10px;
line-height: 12px;
}
.text-countdown-hero span {
width: 1.25rem;
height: 1.25rem;
border-radius: 4px;
}
.hero-timer-cta {
width: 100% !important;
bottom: 4% !important;
justify-content: flex-start !important;
}
}
</style>
<style>
.header-guest-mark-layout {
position: absolute;
width: 100%;
display: none;
justify-content: flex-end;
}
.header-guest-mark-triangle {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 30px solid #f1bb53;
margin-right: 2.25rem;
margin-bottom: -0.5rem;
}
.header-guest-mark-container {
display: flex;
background-color: #f1bb53;
width: fit-content;
border-radius: 12px;
padding: 0.5rem 0.75rem;
gap: 1rem;
justify-items: center;
}
.header-guest-mark-container p {
font-family: Space Grotesk;
font-size: 12px;
font-weight: 700;
line-height: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
padding: 0;
}
@media (min-width: 1300px) {
.header-guest-mark-layout {
margin-top: 7rem;
}
}
@media (max-width: 1299px) {
.header-guest-mark-layout {
margin-top: 0;
}
}
@media (max-width: 767px) {
.header-guest-mark-triangle {
margin-right: 2.5rem;
}
}
</style>
<nav class="ruangguru-header dark custom-header">
<div class="page-center">
<div class="container-ruangguru-header">
<div class="navigation__left">
<div class="hamburger-icon">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/eed92e13-500e-4cc5-b049-77c60bb3e857.svg"
alt="Dropdown Navigation Icon" loading="lazy" />
</div>
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/","item_type": "image","item_name": "Logo ruangguru","item_category": "cta","item_position": 0,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/">
<div class="logo-header">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/3a49e762-3e03-410f-96bf-25d133e49eb1.svg"
alt="Logo ruangguru dark" loading="lazy" />
</div>
</a>
</div>
<div class="navigation__content">
<div class="navig-link navig-link-dropdown dark" id="produk" aria-expanded="false">
<a href="#">Produk</a>
</div>
<div class="navig-dropdown-area closed" id="produk_item">
<!-- ruangbelajar -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/ruangbelajar","item_type": "link","item_name": "ruangbelajar","item_category": "cta","item_position": 1,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/ruangbelajar">
<div class="item-product">
<div class="logo-product">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/OPTIMIZE/rb.svg"
alt="Logo ruangbelajar" loading="lazy" />
</div>
<p class="text-product">Belajar seru dengan video dan latihan soal, anti remed!</p>
</div>
</a>
<!-- BA -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.brainacademy.id","item_type": "link","item_name": "brainacademy","item_category": "cta","item_position": 1,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.brainacademy.id">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/03%20-%20Homepage%20Brainacademy%202022/Header%20to%20Live%20Teaching/logo_BA.svg"
alt="Logo Brain Academy" loading="lazy" />
</div>
<p class="text-product">Bimbel Tatap Muka & Live Interaktif bersama STAR Master Teacher</p>
</div>
</a>
<!-- mathchamps -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/mathchamps","item_type": "link","item_name": "mathchamps","item_category": "cta","item_position": 2,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.ruangguru.com/mathchamps">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/723d8e19-b594-49cf-a098-07f5379d5d5f.png?convert=webp&h=70"
alt="Logo math champs" loading="lazy" width="104" height="40" />
</div>
<p class="text-product">Kursus matematika dan logika untuk anak 5-14 tahun dengan kurikulum Singapura</p>
</div>
</a>
<!-- mathchamps sempoa -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/mathchamps/sempoa","item_type": "link","item_name": "mathchamps_sempoa","item_category": "cta","item_position": 3,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.ruangguru.com/mathchamps/sempoa">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/9aa7023e-2d40-4e19-9236-4907f5042a3e.png?convert=webp&h=70"
alt="Logo math champs" loading="lazy" width="104" height="40" />
</div>
<p class="text-product">Kursus hitung cepat aritmatika dengan sempoa untuk anak 4-12 tahun</p>
</div>
</a>
<!-- memory champs -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.memoryacademy.id/","item_type": "link","item_name": "memorychamps","item_category": "cta","item_position": 4,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.memoryacademy.id/">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/ac89298a-3fc9-4f35-862c-b027006929e0.png?convert=webp&h=70"
alt="Logo math champs" loading="lazy" width="104" height="40" />
</div>
<p class="text-product">Kursus latihan daya ingat, fokus, dan konsentrasi untuk mendukung prestasi
akademik</p>
</div>
</a>
<!-- EA -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.english-academy.id/","item_type": "link","item_name": "english-academy","item_category": "cta","item_position": 5,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.english-academy.id/">
<div class="item-product">
<div class="logo-product" id="lp_ea">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/English%20Academy/logo-ea-riddle.svg?convert=webp"
alt="Logo English Academy" loading="lazy" />
</div>
<p class="text-product">Kursus Bahasa Inggris dengan Pengajar internasional dan kurikulum berstandar
internasional</p>
</div>
</a>
<!-- ruanguji -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/ruanguji","item_type": "link","item_name": "ruanguji","item_category": "cta","item_position": 6,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/ruanguji">
<div class="item-product">
<div class="logo-product">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/OPTIMIZE/ruanguji.svg"
alt="Logo ruanguji" loading="lazy" />
</div>
<p class="text-product">Ikut tryout online dan lihat hasilnya di sini!</p>
</div>
</a>
<!-- schoters -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.schoters.com","item_type": "link","item_name": "schoters","item_category": "cta","item_position": 7,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.schoters.com">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/3ecc92be-4ee0-475f-bd4c-d1f5e733f012.png?convert=webp&h=120"
alt="Logo Schoters" loading="lazy" height="40" />
</div>
<p class="text-product">Bimbingan kuliah & kerja di luar negeri #1 di Indonesia, dengan kelas bahasa
terlengkap!</p>
</div>
</a>
<!-- rgprivat -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/privat","item_type": "link","item_name": "ruangles","item_category": "cta","item_position": 8,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/privat">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/LP%20Ruangguru%20Private/Logo%20Ruangguru%20Privat/logo-ruangguru-privat.png?convert=webp&width=112&name=logo-ruangguru-privat.png"
alt="Logo ruangles" width="112" loading="lazy" srcset="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/LP%20Ruangguru%20Private/Logo%20Ruangguru%20Privat/logo-ruangguru-privat.png?convert=webp&width=56&name=logo-ruangguru-privat.png 56w, https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/LP%20Ruangguru%20Private/Logo%20Ruangguru%20Privat/logo-ruangguru-privat.png?convert=webp&width=112&name=logo-ruangguru-privat.png 112w, https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/LP%20Ruangguru%20Private/Logo%20Ruangguru%20Privat/logo-ruangguru-privat.png?convert=webp&width=168&name=logo-ruangguru-privat.png 168w, https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/LP%20Ruangguru%20Private/Logo%20Ruangguru%20Privat/logo-ruangguru-privat.png?convert=webp&width=224&name=logo-ruangguru-privat.png 224w, https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/LP%20Ruangguru%20Private/Logo%20Ruangguru%20Privat/logo-ruangguru-privat.png?convert=webp&width=280&name=logo-ruangguru-privat.png 280w, https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/LP%20Ruangguru%20Private/Logo%20Ruangguru%20Privat/logo-ruangguru-privat.png?convert=webp&width=336&name=logo-ruangguru-privat.png 336w" sizes="(max-width: 112px) 100vw, 112px" />
</div>
<p class="text-product">Belajar privat dengan guru terbaik pilihan Ruangguru</p>
</div>
</a>
<!-- kalananti -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.kalananti.id/","item_type": "link","item_name": "kalananti","item_category": "cta","item_position": 9,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.kalananti.id/">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/kalananti%202022/Kalananti%20by%20Ruangguru.png"
alt="Logo kalananti" loading="lazy" height="40" />
</div>
<p class="text-product">Kursus coding dan robotic anak usia 5-15 tahun untuk mengasah logika dan
kreativitas</p>
</div>
</a>
<!-- ags -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.altaglobalschool.com/","item_type": "link","item_name": "kalananti","item_category": "cta","item_position": 10,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.altaglobalschool.com/">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/d56be6bf-3717-4da1-9763-438f02340246.png?convert=webp&h=120"
alt="Logo Schoters" loading="lazy" height="30" />
</div>
<p class="text-product">Sekolah blended learning untuk PAUD-SMA, siapkan siswa kuliah di universitas
terbaik, dalam & luar negeri</p>
</div>
</a>
<!-- SA -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://skillacademy.com/","item_type": "link","item_name": "skillacademy","item_category": "cta","item_position": 11,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://skillacademy.com/">
<div class="item-product">
<div class="logo-product">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/OPTIMIZE/skillacademy.svg"
alt="Logo Skill Academy" loading="lazy" />
</div>
<p class="text-product">Kursus online untuk meningkatkan technical & soft skill kamu</p>
</div>
</a>
<!-- rg for kids -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/for-kids","item_type": "link","item_name": "ruangguru for kids","item_category": "cta","item_position": 12,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/for-kids">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/00%20-%20Homepage%20Ruangguru%202022/Produk/logo_rgfk.svg?convert=webp"
alt="Logo For Kids" width="100" loading="lazy" />
</div>
<p class="text-product">Kursus online untuk anak 4-7 tahun dengan program calistung, bahasa Inggris, dan
sains</p>
</div>
</a>
<!-- dafalulu -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/dafa-lulu","item_type": "link","item_name": "dafalulu","item_category": "cta","item_position": 13,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/dafa-lulu">
<div class="item-product">
<div class="logo-product">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/00%20-%20Homepage%20Ruangguru%202022/logo-dafa-lulu.png?convert=webp&height=44&name=logo-dafa-lulu.png"
height="44" alt="Logo dafa lulu" loading="lazy" />
</div>
<p class="text-product">Belajar bersama Dafa, Lulu, dan teman petualang untuk siswa SD kelas 1 - 6</p>
</div>
</a>
<!-- roboguru -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://roboguru.ruangguru.com/","item_type": "link","item_name": "roboguru","item_category": "cta","item_position": 14,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://roboguru.ruangguru.com/">
<div class="item-product">
<div class="logo-product">
<img
src="https://roboguru-forum-cdn.ruangguru.com/image/20b7b17a-62ba-43ee-bea8-b71c10f5fb0c.png?convert=webp"
alt="Logo roboguru" width="125" loading="lazy" />
</div>
<p class="text-product">Foto dan upload soal susahmu dan dapatkan semua jawabannya di sini!</p>
</div>
</a>
<!-- roboguru plus -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/roboguruplus","item_type": "link","item_name": "roboguruplus","item_category": "cta","item_position": 16,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/roboguruplus">
<div class="item-product">
<div class="logo-product">
<img
src="https://roboguru-forum-cdn.ruangguru.com/image/ea267d76-9d20-45b0-9c2c-88e78c199f5d.png?convert=webp"
width="155" alt="Logo roboguru plus" loading="lazy" />
</div>
<p class="text-product">Konsultasikan soal tersulit kamu sebanyak-banyaknya dengan tutor online terbaik
</p>
</div>
</a>
<!-- ruangkerja -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangkerja.id/","item_type": "link","item_name": "ruangkerja","item_category": "cta","item_position": 17,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
target="_blank" href="https://www.ruangkerja.id/">
<div class="item-product">
<div class="logo-product">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/OPTIMIZE/ruangkerja.svg"
alt="Logo ruangkerja" loading="lazy" />
</div>
<p class="text-product">Aplikasi Pelatihan Online #1 untuk Perusahaan & Lembaga</p>
</div>
</a>
<!-- ruangkelas -->
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/ruangkelas","item_type": "link","item_name": "ruangkelas","item_category": "cta","item_position": 18,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/ruangkelas">
<div class="item-product">
<div class="logo-product">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/OPTIMIZE/ruangkelas.svg"
alt="Logo ruangkelas" loading="lazy" />
</div>
<p class="text-product">Sistem Kelola Pembelajaran Jarak Jauh GRATIS!</p>
</div>
</a>
</div>
<div class="navig-link navig-link-dropdown dark" id="center" aria-expanded="false">
<a href="#">Offline Centers</a>
</div>
<div class="navig-dropdown-area closed" id="center_item" aria-expanded="false">
<div class="item-center">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/mathchamps/branch","item_type": "link","item_name": "mathchamps branch","item_category": "cta","item_position": 7,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/mathchamps/branch">
Mathchamps
</a>
</div>
<div class="item-center">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.brainacademy.id/branch","item_type": "link","item_name": "brain academy branch","item_category": "cta","item_position": 7,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.brainacademy.id/branch/">
Brain Academy
</a>
</div>
<div class="item-center">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.english-academy.id/center","item_type": "link","item_name": "EA center","item_category": "cta","item_position": 7,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.english-academy.id/center/">
English Academy
</a>
</div>
</div>
<div class="navig-link dark" id="program">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/program","item_type": "link","item_name": "Program","item_category": "cta","item_position": 2,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/program">
Program
</a>
</div>
<div class="navig-link dark">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/promo","item_type": "link","item_name": "Promo","item_category": "promotion","item_position": 3,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/promo">
Promo
</a>
</div>
<div class="navig-link dark">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/event","item_type": "link","item_name": "Event","item_category": "cta","item_position": 4,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/event">
Event
</a>
</div>
<!-- <div class="navig-link dark">
<a
data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/beasiswa","item_type": "link","item_name": "Beasiswa","item_category": "cta","item_position": 5,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/beasiswa"
>
Beasiswa
</a>
</div> -->
<div class="navig-link dark">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/testimoni","item_type": "link","item_name": "Testimoni","item_category": "cta","item_position": 6,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/testimoni">
Testimoni
</a>
</div>
<!-- <div class="navig-link navig-link-dropdown dark" id="services" aria-expanded="false">
<a href="#">Layanan</a>
</div>
<div class="navig-dropdown-area closed" id="services_item" aria-expanded="false">
<div class="item-services">
<a
data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/ruangbelajar/perpanjang-paket","item_type": "link","item_name": "Cara Perpanjang Paket","item_category": "cta","item_position": 7,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/ruangbelajar/perpanjang-paket"
>
Cara Perpanjang Paket
</a>
</div>
<div class="item-services">
<a
data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/cara-bayar","item_type": "link","item_name": "Cara Bayar","item_category": "cta","item_position": 7,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/cara-bayar"
>
Cara Bayar
</a>
</div>
<div class="item-services">
<a
data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/cicilan","item_type": "link","item_name": "Cicilan","item_category": "cta","item_position": 7,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/cicilan"
>
Cicilan
</a>
</div>
</div> -->
<div class="navig-link dark">
<a data-tracking-event-type="landing_page__core__item_click"
data-tracking-context='{"product_name": "ruangguru","cta_action": "redirection","cta_action_detail": "https://www.ruangguru.com/blog","item_type": "link","item_name": "Ruangbaca","item_category": "cta","item_position": 8,"item_serial": null,"section_type": "navbar","section_position": "header","section_name": "header_navbar"}'
href="https://www.ruangguru.com/blog/">
Ruangbaca
</a>
</div>
</div>
<div class="navigation__right">
<div class="button-langganan-cta" id="btn-header">
<div class="wrapper-profile-login">
<button class="cta dark" id="login-btn">Login</button>
<div id="login-details" class="container-login_details display-none">
<div class="container-user_profile" id="user-profile"></div>
<button class="cta display-none dark" id="logout-btn">
<img width="18px" height="auto" class="logout-icon"
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/be30e3a3-7e6f-4a38-b235-eb1296d7e41c.svg" />
Logout
</button>
</div>
</div>
<script>
const loginLink = document.getElementById('login-btn');
const logoutLink = document.getElementById('logout-btn');
const loginDetails = document.getElementById('login-details');
document.addEventListener('DOMContentLoaded', function () {
let profileDetailsEl = document.getElementById('user-profile');
if (authLib.isUserLoggedIn()) {
loginLink.classList.add('display-none');
loginDetails.classList.remove('display-none');
let profileDetails = `<img class="profile-picture" width="32" height="32" src="${decodeURIComponent(getCookie('profpic'))}" />
<p class="profile-name">${decodeURIComponent(getCookie('name')).split('"').join('')}</p>
<img class="arrow-icon" width="20" height="20" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/02a69613-6573-48e8-bae6-b628ab20cd43.svg" />`;
profileDetailsEl.innerHTML = profileDetails;
profileDetailsEl.classList.remove('display-none');
} else {
loginLink.classList.remove('display-none');
loginDetails.classList.add('display-none');
}
loginLink.addEventListener('click', function (event) {
event.preventDefault();
authLib.doLogin();
});
logoutLink.addEventListener('click', function (event) {
event.preventDefault();
authLib.doLogout();
});
});
document.addEventListener('click', e => {
if (!loginDetails.contains(e.target)) {
logoutLink.classList.add('display-none');
}
});
</script>
</div>
</div>
<div id="idLibsHeaderGuestMarkLayout" class="header-guest-mark-layout">
<div style="display: grid; justify-items: flex-end">
<div class="header-guest-mark-triangle"></div>
<div class="header-guest-mark-container">
<p>Masuk / Daftar sekarang untuk membeli tiket</p>
<img id="idLibsHeaderGuestMarkButtonClose" style="cursor: pointer" width="20px" height="20px"
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/f42db25d-30da-4aed-aa22-34312da2b0ab.png"
alt="image close" loading="lazy" />
</div>
</div>
</div>
</div>
</div>
</nav></div>
<div id="idBodyContainer" class="body-container">
<!-- <div class="container-floating-header"> -->
<div class="body-wrapper">
<section class="hero">
<picture>
<source media="(max-width: 767px)" srcset="https://cdn-web-2.ruangguru.com/landing-pages/assets/372e9057-11f8-4ee4-b40e-35f7a1e98144.png?orig=1 " />
<source media="(min-width: 768px)" srcset="https://cdn-web-2.ruangguru.com/landing-pages/assets/275e0663-159e-4cf6-b211-ea1a7322509e.png?orig=1 " />
<img loading="eager" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/372e9057-11f8-4ee4-b40e-35f7a1e98144.png?orig=1" alt="" class="hero-bg" />
</picture>
<div class="page-center">
<div class="hero-section">
<div class="stack justify-center align-center gap-1">
<img loading="eager" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/492d9876-d222-4a9c-bcf0-8b6687692dc5.png" alt="" class="hero-logo" />
</div>
<div class="stack justify-center align-center gap-2">
<div class="hstack justify-center align-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14" viewBox="0 0 43 14" fill="none">
<path d="M12.5 6.99902L42.5 6.99902" stroke="#ffffff" />
<rect width="8.6027" height="8.6027" transform="matrix(0.716742 0.697339 0.716742 -0.697339 1.0498 7)" stroke="#ffffff" />
</svg>
<div class="date-location">
<!-- <img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/e26e9a9c-bea6-413f-a6eb-72142a03e370.svg"
loading="lazy"
/> -->
<p class="location-title">01.02.2025</p>
<div class="location">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="18" viewBox="0 0 19 18" fill="none">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.05077 16.3596C9.05077 16.3596 9.0512 16.3599 9.5 15.7243L9.05077 16.3596ZM9.9488 16.3599C9.67933 16.5469 9.32023 16.5466 9.05077 16.3596L9.04873 16.3582L9.04436 16.3551L9.03005 16.345C9.01808 16.3366 9.00128 16.3246 8.97997 16.3091C8.93737 16.2783 8.87671 16.2337 8.80058 16.1761C8.6484 16.0607 8.43394 15.8927 8.17793 15.677C7.667 15.2464 6.98488 14.6211 6.30074 13.8411C4.9516 12.303 3.5 10.0553 3.5 7.44834C3.5 5.87074 4.13214 4.35776 5.25736 3.24223C6.38258 2.1267 7.9087 1.5 9.5 1.5C11.0913 1.5 12.6174 2.1267 13.7426 3.24223C14.8679 4.35776 15.5 5.87074 15.5 7.44834C15.5 10.0553 14.0484 12.303 12.6993 13.8411C12.0151 14.6211 11.333 15.2464 10.8221 15.677C10.5661 15.8927 10.3516 16.0607 10.1994 16.1761C10.1233 16.2337 10.0626 16.2783 10.02 16.3091C9.99872 16.3246 9.98192 16.3366 9.96995 16.345L9.95564 16.3551L9.95127 16.3582L9.9488 16.3599ZM10.7755 5.52667C10.4201 5.2912 10.0021 5.16551 9.57462 5.16551C9.00133 5.16551 8.45153 5.39129 8.04615 5.79317C7.64078 6.19506 7.41304 6.74013 7.41304 7.30848C7.41304 7.73231 7.53982 8.14663 7.77733 8.49904C8.01485 8.85145 8.35244 9.12612 8.74742 9.28831C9.1424 9.45051 9.57702 9.49295 9.99632 9.41026C10.4156 9.32757 10.8008 9.12348 11.1031 8.82378C11.4054 8.52408 11.6113 8.14224 11.6947 7.72655C11.7781 7.31085 11.7353 6.87997 11.5717 6.4884C11.408 6.09682 11.131 5.76214 10.7755 5.52667Z"
fill="#ffffff"
/>
</svg>
</div>
<div>
<p class="location-desc">Studio 1 XXI Epicentrum</p>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14" viewBox="0 0 43 14" fill="none">
<path d="M30.5 6.99902L0.5 6.99902" stroke="#ffffff" />
<rect width="8.6027" height="8.6027" transform="matrix(-0.716742 0.697339 -0.716742 -0.697339 41.9502 7)" stroke="#ffffff" />
</svg>
</div>
</div>
</div>
</div>
</section>
<section class="ticket">
<div class="page-center">
<div class="placeholder-map">
<!-- <img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/9f8b9d39-5d6c-4a91-a886-ff1e316e5282.png?convert=webp"
alt="FEATURING THE TOP 3 DISTRICTS AND COACHES FROM ACADEMY OF CHAMPIONS"
loading="eager"
/> -->
<div class="ticket-picks">
<div class="stack gap-2">
<p class="location-desc-subtitle">
FINAL MATCH - WATCH PARTY
<br />
INSPIRATIONAL TALKS | AOC VS COC GAMES TALK SHOW | FUN GAMES
</p>
<p class="location-desc-subtitle" style="color: #f6d051">FEATURING TOP 3 DISTRICTS AND COACHES FROM ACADEMY OF CHAMPIONS</p>
</div>
<div class="hstack justify-center align-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="61" height="11" viewBox="0 0 61 11" fill="none">
<rect width="6.82687" height="6.82687" transform="matrix(0.711206 0.702983 0.711206 -0.702983 0.689453 5.5)" stroke="white" stroke-width="0.8" />
<path d="M10.4004 5.5L60.4004 5.5" stroke="white" stroke-width="0.8" />
</svg>
<div class="title-container">
<p class="text-subtitle text-light">BOOK</p>
<p class="text-title text-light">YOUR SEAT</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="61" height="11" viewBox="0 0 61 11" fill="none">
<rect width="6.82687" height="6.82687" transform="matrix(-0.711206 -0.702983 -0.711206 0.702983 60.3105 5.5)" stroke="white" stroke-width="0.8" />
<path d="M50.5996 5.5H0.599608" stroke="white" stroke-width="0.8" />
</svg>
</div>
<!-- NOTE: [subs-user-checker] uncomment if needed -->
<!-- <div
class="flex gap-2 p-3 radius-8 w-full"
style="background: #248cc7"
>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="21"
fill="none"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.016 2.674a1.275 1.275 0 0 0-2.032 0L7.84 4.184a.833.833 0 0 1-.777.322l-1.878-.258a1.275 1.275 0 0 0-1.437 1.436l.259 1.878a.833.833 0 0 1-.323.777l-1.51 1.145a1.275 1.275 0 0 0 0 2.032l1.51 1.145c.24.182.364.48.323.778l-.259 1.877c-.115.837.6 1.552 1.437 1.437l1.878-.258a.833.833 0 0 1 .777.322l1.145 1.51c.51.673 1.522.673 2.032 0l1.145-1.51a.833.833 0 0 1 .778-.322l1.877.258c.837.115 1.552-.6 1.437-1.437l-.258-1.877a.833.833 0 0 1 .322-.778l1.51-1.145a1.275 1.275 0 0 0 0-2.032l-1.51-1.145a.833.833 0 0 1-.322-.777l.258-1.878a1.275 1.275 0 0 0-1.437-1.436l-1.877.258a.833.833 0 0 1-.778-.322l-1.145-1.51Zm1.24 5.57a.833.833 0 0 0-1.178 0l-3.334 3.334a.833.833 0 1 0 1.179 1.178l3.333-3.333a.833.833 0 0 0 0-1.179ZM8.333 9.667a.833.833 0 1 1 0-1.667.833.833 0 0 1 0 1.667ZM11.667 13a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666Z"
fill="#fff"
/>
</svg>
</div>
<div class="stack gap-1">
<p class="font-inter text-white text-sm">
Dapatkan
<span class="font-bold">diskon spesial</span> untuk kamu
yang sedang berlangganan paket belajar Ruangguru
tertentu.
</p>
</div>
</div> -->
<div class="purchase" id="presale">
<div id="bottom-bar-target" style="position: absolute; height: 100%; width: 100%; visibility: hidden"></div>
<div class="purchase-box">
<!-- <div class="purchase-box-header">
<img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/7a9f1321-935c-4b74-bdda-a293d325e178.png"
loading="lazy"
/>
</div> -->
<div class="purchase-box-title">
<div class="purchase-name" style="display: grid; gap: 0.25rem">
<p id="idPurchaseTitle" class="purchase-title" style="display: none">Penjualan Tiket</p>
<p id="idPurchaseDesc" class="purchase-desc">Berakhir</p>
</div>
<div class="purchase-countdown hero-timer-cta" id="heroCountDown">
<div class="countdown-hero" id="hero-count-down" style="margin-left: 1rem; display: none">
<div class="text-countdown-hero" id="hero-count-down--hero">
<div class="countdown-days">
<div class="countdown-label-container">
<span class="hero-day days">00</span>
<p class="countdown-label">HARI</p>
</div>
<p class="countdown-colon">:</p>
</div>
<div>
<div class="countdown-label-container">
<span class="hero-hour hours">00</span>
<p class="countdown-label">JAM</p>
</div>
<p class="countdown-colon">:</p>
</div>
<div>
<div class="countdown-label-container">
<span class="hero-minute minutes">00</span>
<p class="countdown-label">MENIT</p>
</div>
<p class="countdown-colon">:</p>
</div>
<div>
<div class="countdown-label-container">
<span class="hero-second seconds">00</span>
<p class="countdown-label">DETIK</p>
</div>
</div>
</div>
</div>
</div>
</div>
<p id="purchase-price" class="text-sm font-inter text-gray-900">
<span id="purchase-price-text" class="text-md font-bold" style="color: #cd1924">Rp475.000</span>
/pax
</p>
<div class="purchase-box-cta">
<button class="purchase-cta cta-red" id="button_buy" style="display: none; padding: 0 2.5rem">PESAN TIKET</button>
<button id="button_buy_sold" style="display: none; padding: 0 3rem" class="cta-red button-ticket-sold" disabled>HABIS TERJUAL</button>
</div>
<p id="purchase-note" class="text-sm font-inter text-gray-900">*Harga belum termasuk pajak</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="venue">
<div class="page-center">
<div class="stack gap-4">
<div class="hstack justify-center align-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14" viewBox="0 0 43 14" fill="none">
<path d="M12.5 6.99902L42.5 6.99902" stroke="#212121" />
<rect width="8.6027" height="8.6027" transform="matrix(0.716742 0.697339 0.716742 -0.697339 1.0498 7)" stroke="#212121" />
</svg>
<div class="title-container">
<p class="text-subtitle text-dark">THE VENUE</p>
<p class="text-title text-dark">STUDIO 1 XXI EPICENTRUM</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14" viewBox="0 0 43 14" fill="none">
<path d="M30.5 6.99902L0.5 6.99902" stroke="#212121" />
<rect width="8.6027" height="8.6027" transform="matrix(-0.716742 0.697339 -0.716742 -0.697339 41.9502 7)" stroke="#212121" />
</svg>
</div>
<div class="venue-slick"></div>
<div class="venue-map">
<div class="location" style="align-items: center">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.401 21.8128C11.401 21.8128 11.4016 21.8132 12 20.9657L11.401 21.8128ZM12.5984 21.8132C12.2391 22.0625 11.7603 22.0621 11.401 21.8128L11.3983 21.8109L11.3925 21.8068L11.3734 21.7934C11.3574 21.7821 11.335 21.7661 11.3066 21.7455C11.2498 21.7044 11.169 21.645 11.0674 21.5681C10.8645 21.4143 10.5786 21.1903 10.2372 20.9026C9.556 20.3286 8.6465 19.4948 7.73432 18.4548C5.93546 16.404 4 13.4071 4 9.93111C4 7.82765 4.84285 5.81034 6.34315 4.32297C7.84344 2.8356 9.87827 2 12 2C14.1217 2 16.1566 2.8356 17.6569 4.32297C19.1571 5.81034 20 7.82765 20 9.93111C20 13.4071 18.0645 16.404 16.2657 18.4548C15.3535 19.4948 14.444 20.3286 13.7628 20.9026C13.4214 21.1903 13.1355 21.4143 12.9326 21.5681C12.831 21.645 12.7502 21.7044 12.6934 21.7455C12.665 21.7661 12.6426 21.7821 12.6266 21.7934L12.6075 21.8068L12.6017 21.8109L12.5984 21.8132ZM13.7007 7.36889C13.2267 7.05493 12.6695 6.88735 12.0995 6.88735C11.3351 6.88735 10.602 7.18839 10.0615 7.72423C9.52104 8.26008 9.21739 8.98684 9.21739 9.74463C9.21739 10.3098 9.38642 10.8622 9.70311 11.3321C10.0198 11.8019 10.4699 12.1682 10.9966 12.3844C11.5232 12.6007 12.1027 12.6573 12.6618 12.547C13.2208 12.4368 13.7344 12.1646 14.1374 11.765C14.5405 11.3654 14.815 10.8563 14.9262 10.3021C15.0374 9.7478 14.9803 9.1733 14.7622 8.6512C14.5441 8.1291 14.1747 7.68285 13.7007 7.36889Z"
fill="#2C313A"
/>
</svg>
</div>
<p class="location-venue">Rasuna Epicentrum, Jl. H.R. Rasuna Said, Kota Jakarta Selatan, DKI Jakarta</p>
</div>
<a href="https://maps.app.goo.gl/N7Lb3xFBTPaQBRdm8" target="_blank">
<button class="cta-default">LIHAT PETA</button>
</a>
</div>
</div>
</div>
</section>
<section class="how-to-buy">
<div class="page-center">
<div class="venue-content">
<div style="height: 1rem"></div>
<div class="hstack justify-center align-center gap-2 title-tag">
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14" viewBox="0 0 43 14" fill="none">
<path d="M12.5 6.99902L42.5 6.99902" stroke="#212121" />
<rect width="8.6027" height="8.6027" transform="matrix(0.716742 0.697339 0.716742 -0.697339 1.0498 7)" stroke="#212121" />
</svg>
<div class="title-container">
<p class="text-subtitle text-dark">CARA</p>
<p class="text-title text-dark">MEMBELI TIKET</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14" viewBox="0 0 43 14" fill="none">
<path d="M30.5 6.99902L0.5 6.99902" stroke="#212121" />
<rect width="8.6027" height="8.6027" transform="matrix(-0.716742 0.697339 -0.716742 -0.697339 41.9502 7)" stroke="#212121" />
</svg>
</div>
<div style="height: 1rem"></div>
<div class="how-to-buy-slick"></div>
</div>
</div>
</section>
<section class="faq">
<div class="page-center">
<div class="hstack justify-center align-center gap-2 title-tag">
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14" viewBox="0 0 43 14" fill="none">
<path d="M12.5 6.99902L42.5 6.99902" stroke="#212121" />
<rect width="8.6027" height="8.6027" transform="matrix(0.716742 0.697339 0.716742 -0.697339 1.0498 7)" stroke="#212121" />
</svg>
<div class="title-container">
<p class="text-subtitle text-dark">INFORMASI</p>
<p class="text-title text-dark">TAMBAHAN</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14" viewBox="0 0 43 14" fill="none">
<path d="M30.5 6.99902L0.5 6.99902" stroke="#212121" />
<rect width="8.6027" height="8.6027" transform="matrix(-0.716742 0.697339 -0.716742 -0.697339 41.9502 7)" stroke="#212121" />
</svg>
</div>
<div class="faq-content_accordion">
<!-- 1 -->
<div class="container-acc2">
<div class="accordion">
<div class="accordion-subject">
<div class="accordion-text">
<p>Syarat dan Ketentuan</p>
</div>
<div class="accordion-img">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/1bfaa763-0792-48a6-ba95-eed55c1d0bf3.png" alt="Aset" loading="lazy" />
</div>
</div>
</div>
<div class="panel2">
<div class="panel-faq">
<ol>
<li>Harga belum termasuk pajak hiburan senilai 10%</li>
<li>Tiket yang sudah dibeli tidak dapat dikembalikan (non-refundable)</li>
<li>Tiket yang sudah dibeli tidak dapat diganti jadwalnya</li>
<li>Pembeli wajib mengisi data diri pribadi saat melakukan pembelian tiket</li>
<li>Penjualan tiket sewaktu-waktu dapat dihentikan atau dimulai sesuai dengan kebijakan dari Ruangguru</li>
<li>Anak berusia di bawah 14 tahun wajib datang bersama pendamping. Pendamping wajib membeli tiket</li>
<li>Pengunjung wajib menjaga protokol kesehatan yang berlaku</li>
</ol>
</div>
</div>
</div>
<!-- 2 -->
<div class="container-acc2">
<div class="accordion">
<div class="accordion-subject">
<div class="accordion-text">
<p>Informasi Penting</p>
</div>
<div class="accordion-img">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/1bfaa763-0792-48a6-ba95-eed55c1d0bf3.png" alt="Aset" loading="lazy" />
</div>
</div>
</div>
<div class="panel2">
<div class="panel-faq">
<ol>
<li>Satu tiket berlaku untuk satu pengunjung.</li>
<li>1 akun hanya dapat membeli maksimal 4 tiket.</li>
<li>
Pembeli wajib mengisi data diri pribadi saat melakukan pembelian tiket. Pastikan informasi pembeli sesuai dengan kartu identitas (KTP/Paspor/SIM/Kartu Pelajar/Mahasiswa) serta
menggunakan email dan No. HP yang aktif.
</li>
<li>
Nomor kursi (numbered seating) akan dibagikan selambat-lambatnya 2 (dua) hari sebelum acara melalui email yang digunakan untuk membeli tiket. Pastikan email yang terdaftar
selalu aktif.
</li>
<li>
Tiket harus ditukarkan dengan wristband sebelum acara berlangsung. Penukaran dapat dilakukan pada tanggal 1 Februari 2025 langsung di venue. Detail penukaran tiket akan
diinformasikan lebih lanjut.
</li>
<li>Wajib menjaga protokol kesehatan yang berlaku.</li>
<li>
Transaksi tiket event Ruangguru Academy of Champions Final Match - Watch Party yang resmi hanya dapat dilakukan melalui website Ruangguru. Ruangguru tidak bertanggung jawab
atas transaksi yang terjadi diluar website Ruangguru
</li>
<li>Silakan follow Instagram @ruangguru untuk mengetahui syarat & ketentuan, FAQ, serta informasi terkini lainnya.</li>
</ol>
</div>
</div>
</div>
<!-- 3 -->
<div class="container-acc2">
<div class="accordion">
<div class="accordion-subject">
<div class="accordion-text">
<p>Cara Penukaran E-Ticket</p>
</div>
<div class="accordion-img">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/1bfaa763-0792-48a6-ba95-eed55c1d0bf3.png" alt="Aset" loading="lazy" />
</div>
</div>
</div>
<div class="panel2">
<div class="panel-faq">
<ol>
<li>Tunjukkan e-tiket yang berisi Tiket ID dan nomor kursi kepada petugas di venue.</li>
<li>Pengunjung wajib menunjukkan kartu identitas asli yang berlaku (KTP/Paspor/SIM/Kartu Pelaiar/Mahasiswa).</li>
<li>Setelah tiket sukses terverifikasi, customer akan mendapatkan wristband yang dapat digunakan untuk memasuki studio.</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="help">
<div class="page-center">
<a href="https://cta.ruangguru.com/wa-cx-ticket-champions" target="_blank">
<div class="help-container">
<img width="50px" height="auto" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/5cb2c1bf-5573-4968-b1af-8a06b5b332f8.png" alt="icon help" loading="lazy" />
<div style="flex: 1">
<p>Ada kendala?</p>
<span>Temukan solusinya di sini</span>
</div>
<img width="34px" height="auto" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/ebc8213b-a5cf-4db7-9c5c-02ea1a99eb81.png" alt="icon help" loading="lazy" />
</div>
</a>
</div>
</section>
<!-- <section class="supported">
<div class="page-center">
<div class="hstack justify-center align-center gap-2 title-tag">
<svg
xmlns="http://www.w3.org/2000/svg"
width="43"
height="14"
viewBox="0 0 43 14"
fill="none"
>
<path d="M12.5 6.99902L42.5 6.99902" stroke="#212121" />
<rect
width="8.6027"
height="8.6027"
transform="matrix(0.716742 0.697339 0.716742 -0.697339 1.0498 7)"
stroke="#212121"
/>
</svg>
<div class="title-container">
<p class="text-subtitle text-dark">DIDUKUNG</p>
<p class="text-title text-dark">OLEH</p>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="43"
height="14"
viewBox="0 0 43 14"
fill="none"
>
<path d="M30.5 6.99902L0.5 6.99902" stroke="#212121" />
<rect
width="8.6027"
height="8.6027"
transform="matrix(-0.716742 0.697339 -0.716742 -0.697339 41.9502 7)"
stroke="#212121"
/>
</svg>
</div>
<div class="hstack justify-center align-center gap-2 title-tag">
<img
style="margin-bottom: 3rem; margin-top: 1rem"
width="50%"
height="auto"
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/3fc4fb76-b427-45db-ae7c-cb35b68f1a6b.png"
alt="image sponsored"
/>
</div>
</div>
</section> -->
</div>
<style>.footer__year {
padding-top: 5rem;
}
.ic-new__img {
margin: auto 0;
display: flex;
}
.ic-new__img img {
width: fit-content;
}
.font-base-footer {
font-family: Inter, 'sans-serif';
font-weight: 400;
font-size: 14px !important;
font-style: normal;
letter-spacing: 0;
color: #0a2540;
margin-bottom: 0;
}
.font-bold {
font-weight: 700;
}
.font-white {
color: #fff !important;
}
.font-semi-bold {
font-weight: 600;
}
.center {
text-align: center;
}
.footer {
background: #0a2540;
overflow: hidden;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Helvetica Neue,
Arial,
Noto Sans,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji,
Segoe UI Symbol,
Noto Color Emoji;
}
.footer.roc {
background-color: #1d1110;
color: white;
}
.contact__container {
display: grid;
grid-template-columns: 2fr 11fr;
gap: 0.625rem;
word-break: break-all;
}
.contact__container--text {
margin: auto 0;
}
.group-contact {
display: grid;
row-gap: 0.5rem;
}
.sec-follow__content--socmed {
display: inline-flex;
}
.sec-follow__content--socmed a {
padding-right: 0.25rem;
}
.ic-new {
display: inline-flex;
width: max-content;
gap: 0.25rem;
}
@media (min-width: 1025px) {
.sec-address__detail {
margin: 1rem 0 2rem;
padding-right: 2rem;
}
.sec-follow {
margin-top: -10rem;
}
.title {
font-size: 48px;
line-height: 64px;
}
.subtitle {
font-size: 32px;
line-height: 48px;
text-align: center;
}
.desc-hero {
font-size: 24px;
line-height: 36px;
margin-top: 20px;
}
.desc {
font-size: 16px;
line-height: 24px;
}
.footer {
padding: 5rem 0 1.5rem;
}
.footer__title {
font-size: 1rem;
margin-bottom: 1rem;
min-height: 1.25rem;
}
.footer__title--hq {
font-size: 1rem;
}
.footer__content--top {
display: grid;
grid-template-columns: 3fr 9fr;
}
.sec-menu {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.sec-app__content {
display: grid;
gap: 0.75rem;
}
.footer__content--bottom {
display: grid;
grid-template-columns: 9.75fr 2.25fr;
}
}
@media (max-width: 1024px) {
.sec-address__detail {
margin: 1rem 0 2rem;
}
.sec-app {
margin-bottom: 2.625rem;
text-align: center;
}
.title {
font-size: 24px;
line-height: 36px;
}
.subtitle {
font-size: 20px;
line-height: 30px;
text-align: center;
}
.desc-hero {
font-size: 16px;
line-height: 24px;
margin-top: 1rem;
}
.desc {
font-size: 14px;
line-height: 27px;
}
.footer {
padding: 2rem 0;
}
.sec-app__content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-top: 1rem;
}
.sec-menu {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.sec-follow {
text-align: center;
}
.footer__title {
padding-bottom: 0.75rem;
}
}
ul.no-space {
padding: 0;
}
ul.no-space li {
margin-bottom: 0.25rem;
}
.contact__container--text a,
ul.no-space a {
text-decoration: none;
}
.contact__container--text a:hover,
ul.no-space a:hover {
color: #2eb5c0 !important;
}
div.sec-address__logo img,
div.ic-new__img img {
display: inline-block;
}
.sec-app__content img {
max-width: 100%;
}
</style>
<section class="footer dark" id="footer">
<div class="page-center">
<div class="footer__content">
<div class="footer__content--top">
<div class="sec-app">
<div class="sec-address">
<div class="sec-address__logo">
<a href="https://www.ruangguru.com/">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/OPTIMIZE/logo%20rg.svg" alt="Logo Ruangguru" loading="lazy" />
</a>
</div>
<div class="sec-address__detail">
<p class="font-base-footer font-white font-bold footer__title--hq">RUANGGURU HQ</p>
<p class="font-base-footer font-white footer-address">Gedung Sinarmas MSIG Tower Lt. 33. Jl. Jenderal Sudirman Kav. 21, Karet Kuningan, Setiabudi, Jakarta Selatan, Jakarta 12920</p>
</div>
</div>
<p class="font-base-footer font-white font-bold footer__title">Coba GRATIS Aplikasi Ruangguru</p>
<div class="sec-app__content">
<div class="sec-app__content--gplay">
<a target="_blank" rel="nofollow" href="https://play.google.com/store/apps/details?id=com.ruangguru.livestudents&hl=in">
<img
class="footer-socmed"
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/btn_googleplay%20(1).svg"
loading="lazy"
alt="Button Google Play Footer "
/>
</a>
</div>
<div class="sec-app__content--appstore">
<a target="_blank" rel="nofollow" href="https://apps.apple.com/id/app/ruangguru-solusi-belajar/id1099742206?l=id">
<img
class="footer-socmed"
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/btn_appstore%20(1).svg"
loading="lazy"
alt="Button App Store Footer "
/>
</a>
</div>
<div class="sec-app__content--huawei">
<a target="_blank" rel="nofollow" href="https://appgallery.huawei.com/#/app/C102352375">
<picture>
<source type="image/webp" srcset="https://roboguru-forum-cdn.ruangguru.com/image/e5df282a-3b96-4af4-8b3c-a4634b511680.png?convert=webp " />
<source type="image/png" srcset="https://roboguru-forum-cdn.ruangguru.com/image/e5df282a-3b96-4af4-8b3c-a4634b511680.png " />
<img class="footer-socmed" src="https://roboguru-forum-cdn.ruangguru.com/image/e5df282a-3b96-4af4-8b3c-a4634b511680.png" alt="Button AppGallery Footer" loading="lazy" width="156" />
</picture>
</a>
</div>
</div>
</div>
<div class="sec-menu">
<div class="sec-menu__rg">
<p class="font-base-footer font-white font-bold footer__title">Produk Ruangguru</p>
<ul type="none" class="no-space">
<li>
<a class="font-base-footer font-white" href="https://roboguru.ruangguru.com" target="_blank">Roboguru</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/roboguruplus">Roboguru Plus</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/dafa-lulu">Dafa dan Lulu</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/for-kids">Ruangguru for Kids</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/bisnis">Ruangguru for Business</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/ruanguji">Ruanguji</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/blog/">Ruangbaca</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/ruangkelas">Ruangkelas</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/ruangbelajar">Ruangbelajar</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://pengajar.ruangguru.com/">Ruangpengajar</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/privat">Ruangguru Privat</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangpeduli.org/" target="_blank">Ruangpeduli</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/airis">Airis</a>
</li>
</ul>
</div>
<div class="sec-menu__lainnya">
<p class="font-base-footer font-white font-bold footer__title">Produk Lainnya</p>
<ul type="none" class="no-space">
<li>
<a class="font-base-footer font-white" href="https://www.brainacademy.id/" target="_blank">Brain Academy</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.english-academy.id/" target="_blank">English Academy</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://skillacademy.com/" target="_blank">Skill Academy</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangkerja.id/" target="_blank">Ruangkerja</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.schoters.com/id/" target="_blank">Schoters</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.kalananti.id/" target="_blank">Kalananti</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/mathchamps" target="_blank">Math Champs</a>
</li>
</ul>
</div>
<div class="sec-menu__bantuan">
<p class="font-base-footer font-white font-bold footer__title">Bantuan & Panduan</p>
<ul type="none" class="no-space">
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/company-credentials">Company Credentials</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/beasiswa">Beasiswa Ruangguru</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/cicilan">Cicilan Ruangguru</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/promo">Promo Ruangguru</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://ticketing.ruangguru.com/help?request_type_id=459" target="_blank">Vulnerability Report</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/bantuan#layanan">Layanan Pengaduan</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/terms-conditions">Syarat & Ketentuan</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/privacy-policy">Kebijakan Privasi</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/about-us">Tentang Kami</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/contact-us">Kontak Kami</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/press">Press Kit</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://www.ruangguru.com/bantuan">Bantuan</a>
</li>
<li>
<a class="font-base-footer font-white" href="https://career.ruangguru.com/">Karier</a>
</li>
</ul>
</div>
<div class="sec-menu__contact">
<p class="font-base-footer font-white font-bold footer__title">Hubungi Kami</p>
<div class="group-contact">
<div class="contact__container">
<div class="contact__container--img">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/ic-mail.svg" loading="lazy" alt="Logo Email Footer" />
</div>
<div class="contact__container--text">
<a class="font-base-footer font-white" href="mailto:info@ruangguru.com">info@ruangguru.com</a>
</div>
</div>
<div class="contact__container">
<div class="contact__container--img">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/ic-phone.svg" loading="lazy" alt="Logo Phone Footer" />
</div>
<div class="contact__container--text">
<a class="font-base-footer font-white" href="tel:02130930000">02130930000</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer__content--bottom">
<div></div>
<div class="sec-follow">
<p class="font-base-footer font-white font-bold footer__title">Ikuti Kami</p>
<div class="sec-follow__content">
<div class="sec-follow__content--socmed">
<a target="_blank" href="https://www.instagram.com/ruangguru/">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/ic-ig.svg?convert=webp" loading="lazy" alt="Logo Instagram Footer" />
</a>
<a target="_blank" href="https://www.facebook.com/ruanggurucom/">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/ic-fb.svg?convert=webp" loading="lazy" alt="Logo Facebook Footer" />
</a>
<a target="_blank" href="https://twitter.com/ruangguru/">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/ic-twitter.svg?convert=webp" loading="lazy" alt="Logo Twitter Footer" />
</a>
<a target="_blank" href="https://www.youtube.com/ruangguru">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/ic-youtube.svg?convert=webp" loading="lazy" alt="Logo Youtube Footer" />
</a>
<a target="_blank" href="https://www.linkedin.com/company/ruangguru-com">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/ic-linkedin.svg?convert=webp" loading="lazy" alt="Logo LinkedIn Footer" />
</a>
<a target="_blank" href="https://www.tiktok.com/@ruangguru">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Homepage%20RG/Optimize%20V2/tiktok-ic-white-40.svg?convert=webp" loading="lazy" alt="Logo TikTok Footer" />
</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer__year">
<p class="font-base-footer font-white font-bold center">
©
<span id="full-year"></span>
Ruangguru. All Rights Reserved PT. Ruang Raya Indonesia
</p>
</div>
</div>
</section>
<div id="toast" class="toast">Link telah disalin</div>
<div id="limit-modal" class="modal">
<div class="modal-content">
<div class="modal-body">
<img width="55%" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/4e3353b2-ed92-4e54-abb0-da2609e56df9.png?convert=webp" loading="lazy" />
<p class="modalt-tile">Akun kamu sudah mencapai maksimal jumlah pembelian tiket</p>
<p class="modal-description">1 akun hanya dapat membeli maksimal 4 tiket</p>
<button id="close-modal-limit" class="purchase-cta cta-red">SAYA MENGERTI</button>
</div>
</div>
</div>
<div id="error-modal" class="modal">
<div class="modal-content">
<div class="modal-body">
<img width="55%" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/4e3353b2-ed92-4e54-abb0-da2609e56df9.png?convert=webp" loading="lazy" />
<p class="modalt-tile">Terjadi kesalahan</p>
<p class="modal-description">Silakan coba beberapa saat lagi.</p>
<button id="close-modal-error" class="purchase-cta cta-red">OK</button>
</div>
</div>
</div>
<div id="bundle-modal" class="modal">
<div class="modal-content">
<div class="modal-body">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/4e3353b2-ed92-4e54-abb0-da2609e56df9.png?convert=webp" width="264" height="148" loading="lazy" />
<p class="modalt-tile">Akun kamu belum termasuk dalam kriteria pembeli tiket Pre-sale</p>
<div class="purchase-box-tnc">
<div class="purchase-tnc-title">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.3334 9.78182C18.3334 14.2637 14.7001 17.897 10.2182 17.897C9.01257 17.897 7.86835 17.6341 6.83974 17.1625L3.37351 18.229C2.69876 18.4366 2.08768 17.7637 2.35921 17.112L3.51001 14.3501C2.62215 13.0488 2.10303 11.476 2.10303 9.78182C2.10303 5.29994 5.73631 1.66666 10.2182 1.66666C14.7001 1.66666 18.3334 5.29994 18.3334 9.78182ZM13.3335 8.03161C13.3335 9.26541 12.6632 10.3426 11.6668 10.919V11.6584C11.6668 12.1187 11.2937 12.4917 10.8335 12.4917H9.16683C8.70659 12.4917 8.3335 12.1187 8.3335 11.6584V10.919C7.33716 10.3426 6.66683 9.26541 6.66683 8.03161C6.66683 6.19066 8.15921 4.69827 10.0002 4.69827C11.8411 4.69827 13.3335 6.19066 13.3335 8.03161ZM9.16683 13.3602C8.70659 13.3602 8.3335 13.7333 8.3335 14.1936C8.3335 14.6538 8.70659 15.0269 9.16683 15.0269H10.8335C11.2937 15.0269 11.6668 14.6538 11.6668 14.1936C11.6668 13.7333 11.2937 13.3602 10.8335 13.3602H9.16683Z"
fill="#2196F3"
/>
</svg>
<p class="tnc-title">Syarat & Ketentuan Pre-sale</p>
</div>
<ol class="tnc-list">
<li>
Tiket pre-sale
<b>ekslusif hanya untuk pengguna aktif paket belajar Ruangguru</b>
tertentu
</li>
<li>
Apabila kamu belum berlangganan paket belajar aktif Ruangguru yang memenuhi syarat,
<b>kamu bisa mengikuti pre-sale dengan membeli kupon paket belajar Ruangguru saat pembelian tiket</b>
</li>
</ol>
<div class="purchase-tnc-cta">
<a href="#" class="tnc-cta" target="_blank">
<p class="cta-exclusive">
Lihat selengkapnya
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.72418 8L5.76462 11.9596C5.63445 12.0897 5.63445 12.3008 5.76462 12.431L6.23603 12.9024C6.3662 13.0325 6.57726 13.0325 6.70743 12.9024L11.3741 8.2357C11.5043 8.10553 11.5043 7.89447 11.3741 7.7643L6.70743 3.09763C6.57726 2.96746 6.3662 2.96746 6.23603 3.09763L5.76463 3.56903C5.63445 3.69921 5.63445 3.91026 5.76462 4.04044L9.72418 8Z"
fill="#AC2A2C"
/>
</svg>
</p>
</a>
</div>
</div>
<button id="close-modal-bundle" class="cta-red">BELI TIKET SEKARANG</button>
</div>
</div>
</div>
</div>
<style>@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400,700&display=swap');
.sticky-bottom {
z-index: 1;
position: sticky;
padding: 0;
bottom: 0;
width: 100%;
display: grid;
grid-template-columns: 1fr;
justify-items: center;
}
.sticky-rows {
width: 100%;
display: flex;
justify-content: center;
background-color: #801e1e;
}
.sticky-menu {
width: 100%;
max-width: 767px;
display: flex;
}
.sticky-menu a {
flex: 1;
cursor: pointer;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family: Inter;
font-size: 10px;
color: white;
opacity: 0.5;
gap: 4px;
padding: 0.5rem;
transition: opacity 0.3s ease;
}
.sticky-menu a:visited {
color: white;
}
.sticky-menu a:hover,
.sticky-menu a:active {
color: white;
opacity: 0.8;
}
.sticky-menu a.active {
font-weight: 700;
opacity: 1;
}
.sticky-menu img {
width: auto;
height: 50px;
margin: 0.25rem 0;
}
@media (max-width: 767px) {
.sticky-menu img {
width: auto;
height: 50px;
}
}
.sticky-price {
width: 100%;
max-width: 767px;
display: flex;
align-items: center;
padding: 0.3rem 1rem;
}
.sticky-price p {
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.sticky-price span {
font-family: Inter;
font-size: 14px;
font-weight: 700;
line-height: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #cd1924;
}
</style>
<section class="sticky-bottom">
<div id="id-element-sticky-price" class="sticky-rows" style="background-color: white">
<div class="sticky-price" id="sticky-price">
<div style="display: grid; grid-template-columns: 1fr; flex: 1">
<p>Harga Tiket</p>
<div style="display: flex; gap: 0.2rem">
<span id="id-element-sticky-price-start"></span>
<p>/pax</p>
</div>
</div>
<div>
<button id="button_buy_sticky_sold" style="display: none; padding: 0 46px" class="cta-red button-ticket-sold" disabled>HABIS TERJUAL</button>
<button id="button_buy_sticky" class="purchase-cta cta-red" style="display: none; padding: 0 2rem; font-size: 12px">PESAN TIKET</button>
</div>
</div>
</div>
<div class="sticky-rows" style="background-color: #801e1e">
<div class="sticky-menu">
<a class="active" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="#fff">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20.974 5.982c.35.609.526 1.281.526 2.018v10c0 .725-.175 1.398-.526 2.017A3.953 3.953 0 0 1 17.5 22h-10a4.027 4.027 0 0 1-2.018-.526 4.135 4.135 0 0 1-1.456-1.457A4.027 4.027 0 0 1 3.5 18V8a3.953 3.953 0 0 1 3-3.88V3c0-.28.1-.515.298-.702A.96.96 0 0 1 7.5 2c.28 0 .515.1.702.298A.924.924 0 0 1 8.5 3v1h8V3c0-.28.1-.515.298-.702A.96.96 0 0 1 17.5 2c.28 0 .515.1.702.298A.924.924 0 0 1 18.5 3v1.117c.357.088.696.224 1.017.41.62.35 1.106.836 1.457 1.455Zm-14.948.544C6.377 6.176 6.868 6 7.5 6h10c.632 0 1.123.175 1.474.526.35.351.526.842.526 1.474h-14c0-.632.175-1.123.526-1.474Zm11.315 6.39a1.111 1.111 0 1 0-1.534-1.609L11.14 15.76 9.194 13.9a1.111 1.111 0 1 0-1.536 1.607l2.713 2.593c.43.41 1.105.41 1.535 0l5.435-5.185Z"
fill="currentColor"
/>
</svg>
Event Detail
</a>
<a class="" href="https://www.ruangguru.com/champions/aoc/final-reunion-7f55727f9f/my-ticket">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="#fff">
<path
d="M9.22 2.19c-.078.361-.233.758-.46.986-.228.227-.625.382-.986.46.361.077.758.232.986.46.227.227.382.624.46.985.077-.361.232-.758.46-.986.227-.227.624-.382.985-.46-.361-.077-.758-.232-.986-.46-.227-.227-.382-.624-.46-.985Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M22.201 7.601a.593.593 0 0 1-.456.703 1.95 1.95 0 0 0-1.5 2.31 1.95 1.95 0 0 0 2.31 1.5.593.593 0 0 1 .703.456l.594 2.795a2.183 2.183 0 0 1-1.68 2.586l-15.527 3.3a2.183 2.183 0 0 1-2.586-1.679l-.594-2.795a.593.593 0 0 1 .456-.703 1.95 1.95 0 0 0 1.5-2.31 1.95 1.95 0 0 0-2.31-1.499.593.593 0 0 1-.702-.457l-.594-2.795a2.183 2.183 0 0 1 1.679-2.586l15.527-3.3a2.183 2.183 0 0 1 2.586 1.68l.595 2.794Zm-8.092 2.16L13.07 8.45c-.566-.71-1.206-.573-1.424.303l-.417 1.619a.912.912 0 0 1-.49.56l-1.27.497c-.81.324-.877.978-.144 1.457l1.247.815c.208.14.378.456.371.707l-.022 1.34c-.019 1.056.6 1.33 1.372.619l1.077-1a.891.891 0 0 1 .815-.173l1.39.475c.996.342 1.448-.167 1.002-1.124l-.565-1.214a.92.92 0 0 1 .051-.798l.808-1.25c.474-.742.147-1.312-.724-1.274l-1.362.062c-.23.006-.535-.13-.676-.312Z"
fill="currentColor"
/>
<path
d="M19.096 19.417c-.116.541-.349 1.137-.69 1.478-.34.34-.936.574-1.478.69.542.116 1.137.349 1.478.69.341.34.574.936.69 1.478.116-.542.35-1.137.69-1.478.34-.341.936-.574 1.478-.69-.541-.116-1.137-.35-1.478-.69-.34-.34-.574-.936-.69-1.478ZM3.99 1.18c-.154.722-.465 1.516-.92 1.971-.454.454-1.248.765-1.97.92.722.155 1.516.465 1.97.92.455.454.766 1.248.921 1.97.155-.722.465-1.516.92-1.97.454-.455 1.248-.766 1.97-.92-.722-.155-1.516-.466-1.97-.92-.455-.454-.766-1.249-.92-1.971Z"
fill="currentColor"
/>
</svg>
Tiket Saya
</a>
</div>
</div>
</section>
</body>
</html>