Selesaikan transaksi sebelum
© Ruangguru. All Rights Reserved PT. Ruang Raya Indonesia
Selesaikan transaksi sebelum
Tidak bisa refund · Kursi dipilih secara otomatis
Tiket sudah habis
Cek tiket yang masih tersedia di kategori lain
Tidak bisa refund · Kursi dipilih secara otomatis
Exclusive Benefits
<!doctype html>
<html lang="id">
<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="index, follow" />
<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;
}
}
.slider-wrapper {
display: flex;
justify-content: center;
min-height: 240px;
background-color: #191919;
overflow: hidden;
}
.slider-content {
width: 100%;
}
.slider-content .slick-dots.inner-dots {
bottom: 1rem;
}
.slider-content .slick-dotted.slick-slider {
margin-bottom: 0;
}
.slider-content .slick-dots li {
margin: 0;
}
.slider-content .slick-dots li button {
padding: 3px;
}
.slider-content .slick-dots li button:before {
font-size: 8px;
opacity: 1;
color: #b29e82;
}
.slider-content .slick-dots li.slick-active button:before {
opacity: 1;
color: #ed3737;
}
.slider-content .slick-arrow:before {
content: none !important;
}
.slider-content .slick-arrow {
z-index: 2;
top: 50% !important;
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;
width: 2rem !important;
}
.slider-content .slick-prev {
left: 0.625rem !important;
background-image: url(https://cdn-web-2.ruangguru.com/file-uploader/lp/c99d671c-12a9-44ea-ae09-e8a4b233ac2d.svg) !important;
}
.slider-content .slick-next {
right: 0.625rem !important;
background-image: url(https://cdn-web-2.ruangguru.com/file-uploader/lp/c2f137c4-6388-43d0-b6c1-920585b36f3b.svg) !important;
}
@media (max-width: 320px) {
.slider-wrapper {
min-height: auto;
}
}
@media (min-width: 480px) {
.slider-content .slick-slider .slick-track {
display: flex;
gap: 1rem;
}
}
.slider-wrapper {
margin-top: 34px;
}
.slider-content .slick-dots.inner-dots {
bottom: 1rem !important;
left: unset !important;
width: 100% !important;
}
.body-wrapper {
position: relative;
}
.hero {
margin-top: 34px;
min-height: 418px;
overflow: hidden;
}
.hero-logo {
height: 208px;
}
.ticket-list {
background: linear-gradient(180deg, #c7225e 0%, rgba(199, 133, 34, 0.4) 32%, rgba(199, 133, 34, 0.4) 70%, #c7225e 100%);
--ticket-content-width: 676px;
}
.ticket-list-content-wrapper {
width: 100%;
max-width: var(--ticket-content-width, 676px);
}
.ticket-container {
border-radius: 12px;
background: #fff;
box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.15);
padding: 12px 12px 16px 12px;
margin-bottom: 14px;
}
.ticket-header {
padding-bottom: 12px;
}
.ticket-note {
color: var(--CLOUDY-SHADOW-CLOUDY-110, #333842);
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}
.ticket-body {
padding: 12px 0;
border-top: 1px dashed #bec8d0;
}
.ticket-body ul {
list-style: none;
margin: 0;
overflow-y: auto;
padding: 0;
}
.ticket-body ul li {
align-items: flex-start;
background: url(https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/Rubel2022/ic-checklist.svg);
background-position: left 4%;
background-repeat: no-repeat;
background-size: 16px 16px;
display: flex;
padding-left: 20px;
word-break: break-word;
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 18px;
margin-bottom: 8px;
}
.ticket-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0 0;
border-top: 1px dashed #bec8d0;
}
.ticket-list .ticket-price {
display: block;
}
.ticket-price-final {
color: #c7245e;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 22px;
}
.ticket-price-final span {
color: #424242;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}
.ticket-price-note {
color: var(--CLOUDY-SHADOW-CLOUDY-110, #333842);
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}
.ticket-cta {
width: 25%;
}
.ticket-cta .cta-red {
height: 36px;
}
.see-detail {
cursor: pointer;
color: #2eb5c0;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 18px;
display: flex;
align-items: center;
gap: 2px;
}
.sold-out {
background-image: url('https://cdn-web-2.ruangguru.com/landing-pages/assets/b8f13828-a47c-4a40-9f9a-b6f248b0843e.svg');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.ticket-footer .sold-out {
text-align: center;
padding: 11px 0;
width: 100%;
}
.ticket-footer .sold-desc {
color: #ac2a2c;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 22px;
padding: 0;
}
.modal-body {
padding: 1rem 0;
display: block;
}
.modal-header {
padding: 0 12px 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-header p {
color: var(--color-text-ink, #2c313a);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}
.sold-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
}
.sold-title {
color: var(--Cloudy-Cloudy110, #333842);
text-align: center;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 20px;
padding-top: 1rem;
}
.sold-note {
color: var(--CLOUDY-SHADOW-CLOUDY-110, #333842);
text-align: center;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
padding: 12px 0 24px;
}
.ticket-info {
padding: 12px;
}
.quantity {
display: flex;
border-radius: 40px;
background: #ebeef3;
padding: 8px;
}
.quantity__minus,
.quantity__plus {
border: none;
background-color: #fff;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.quantity__minus:disabled,
.quantity__plus:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.quantity__input {
margin: 0 10px;
width: 40px;
text-align: center;
border: none;
background-color: #eee;
border-radius: 4px;
}
.ticket-subtitle {
color: var(--Cloudy-Cloudy110, #333842);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 18px;
padding-bottom: 12px;
}
.ticket-amount {
margin-bottom: 12px;
}
.ticket-amount-box {
border-radius: 8px;
border: 1px solid var(--color-border-border-subtle, #dadfea);
padding: 8px;
display: flex;
align-items: center;
justify-content: space-between;
}
.ticket-amount-box .ticket-price {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.ticket-rincian {
border-radius: 8px;
border: 1px solid var(--color-border-border-subtle, #dadfea);
padding: 12px;
margin-bottom: 12px;
}
.ticket-rincian-box {
border-top: 1px dashed #dadfea;
padding-top: 12px;
}
.ticket-rincian-price {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.ticket-rincian-price p {
color: var(--color-text-text-ink, #2c313a);
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
max-width: 14rem;
}
.ticket-total {
border-radius: 8px;
border: 1px solid var(--color-border-border-subtle, #dadfea);
padding: 12px;
display: flex;
justify-content: space-between;
}
.ticket-total p {
color: var(--Cloudy-Cloudy110, #333842);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 18px;
}
.cta-beli {
padding: 0 12px 12px;
}
.close-modal-ticket {
border: none;
background: transparent;
}
.ticket-list-title {
color: var(--color-text-text-invert, #fff);
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 22px;
letter-spacing: -0.1px;
width: 100%;
max-width: var(--ticket-content-width, 676px);
}
.modal-seat-benefit-header {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.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 {
width: 100%;
padding: 1rem;
}
.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 4%;
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-exclusive {
color: var(--CLOUDY-SHADOW-CLOUDY-110, #333842);
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 16px;
padding: 1rem 0 0.5rem;
}
.spinner-loading {
display: inline-block;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spinner-loading 0.75s linear infinite;
}
@keyframes spinner-loading {
to {
transform: rotate(360deg);
}
}
@media (max-width: 360px) {
.countdown-title span {
display: none;
}
}
@media (max-width: 767px) {
.hero {
min-height: 360px;
}
.hero-logo {
height: 168px;
}
}
@media (min-width: 768px) {
.hero-bg {
height: auto;
min-height: 100%;
transform: translate(-50%, -4%);
}
}
</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/event/aoc/final/ticket/assets/index-CyJAC6lI.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>
</div>
</nav></div>
<div class="body-container">
<div class="body-wrapper">
<div class="countdown-payment">
<div class="page-center">
<div class="countdown-payment-content">
<p class="countdown-title">
Selesaikan transaksi
<span>sebelum</span>
</p>
<div class="countdown">
<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="M6.18183 2.00004C6.18183 1.63185 6.45318 1.33337 6.7879 1.33337H9.21214C9.54686 1.33337 9.8182 1.63185 9.8182 2.00004C9.8182 2.36823 9.54686 2.66671 9.21214 2.66671H6.7879C6.45318 2.66671 6.18183 2.36823 6.18183 2.00004ZM2.54547 9.21216C2.54547 6.1997 4.98755 3.75762 8.00002 3.75762C11.0125 3.75762 13.4546 6.1997 13.4546 9.21216C13.4546 12.2246 11.0125 14.6667 8.00002 14.6667C4.98755 14.6667 2.54547 12.2246 2.54547 9.21216ZM10.5315 7.90113C10.7919 7.64078 10.7919 7.21867 10.5315 6.95832C10.2712 6.69797 9.84906 6.69797 9.58871 6.95832L7.70538 8.84166C7.44503 9.10201 7.44503 9.52412 7.70538 9.78447C7.96573 10.0448 8.38784 10.0448 8.64819 9.78447L10.5315 7.90113Z"
fill="#E52A34"
/>
</svg>
<p class="countdown-timer">
<span class="minute"></span>
menit :
<span class="second"></span>
detik
</p>
</div>
</div>
</div>
</div>
<!-- <section class="slider-wrapper">
<div class="slider-content">
<div class="waiting-slide-slick"></div>
</div>
</section> -->
<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?convert=webp " />
<source media="(min-width: 768px)" srcset="https://cdn-web-2.ruangguru.com/landing-pages/assets/275e0663-159e-4cf6-b211-ea1a7322509e.png?convert=webp " />
<img loading="eager" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/372e9057-11f8-4ee4-b40e-35f7a1e98144.png?convert=webp" 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>
</div>
</section>
<section class="ticket-list">
<div class="stack align-center px-3 py-4 gap-4">
<p class="ticket-list-title">Pilih Kursimu</p>
<!-- NOTE: [subs-user-checker] uncomment if needed -->
<!-- <div
id="subscribed-user-nudge"
class="ticket-list-content-wrapper flex gap-2 p-3 radius-8 w-full"
style="background: #9f1d4b; display: none"
>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="none"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.333 9.782a8.115 8.115 0 0 1-11.493 7.38L3.373 18.23a.833.833 0 0 1-1.014-1.117l1.15-2.762a8.115 8.115 0 1 1 14.823-4.568Zm-5-1.75c0 1.233-.67 2.31-1.666 2.887v.74c0 .46-.373.833-.834.833H9.167a.833.833 0 0 1-.834-.834v-.74a3.333 3.333 0 1 1 5-2.887ZM9.167 13.36a.833.833 0 1 0 0 1.667h1.666a.833.833 0 1 0 0-1.667H9.167Z"
fill="#fff"
/>
</svg>
</div>
<div class="stack gap-1 text-white text-sm">
<p class="font-bold">Kamu mendapatkan diskon spesial!</p>
<p>
Nikmati harga spesial karena kamu memiliki paket Ruangguru
yang memenuhi syarat
</p>
</div>
</div> -->
<div class="ticket-list-content-wrapper ticket-list-content"></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="ticket-modal" class="modal">
<div class="modal-content">
<div class="modal-body">
<div class="modal-header">
<p>Beli Tiket</p>
<button class="close-modal close-modal-ticket" id="close-modal-ticket">
<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="M18.6653 6.95098C19.1116 6.50467 19.1116 5.78105 18.6653 5.33474C18.219 4.88842 17.4953 4.88842 17.049 5.33474L12 10.3838L6.95098 5.33474C6.50467 4.88842 5.78105 4.88842 5.33474 5.33474C4.88842 5.78105 4.88842 6.50467 5.33474 6.95098L10.3838 12L5.33474 17.049C4.88842 17.4953 4.88842 18.219 5.33474 18.6653C5.78105 19.1116 6.50467 19.1116 6.95098 18.6653L12 13.6162L17.049 18.6653C17.4953 19.1116 18.219 19.1116 18.6653 18.6653C19.1116 18.219 19.1116 17.4953 18.6653 17.049L13.6162 12L18.6653 6.95098Z"
fill="#2C313A"
/>
</svg>
</button>
</div>
<div class="countdown-payment">
<div class="page-center">
<div class="countdown-payment-content">
<p class="countdown-title">
Selesaikan transaksi
<span>sebelum</span>
</p>
<div class="countdown">
<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="M6.18183 2.00004C6.18183 1.63185 6.45318 1.33337 6.7879 1.33337H9.21214C9.54686 1.33337 9.8182 1.63185 9.8182 2.00004C9.8182 2.36823 9.54686 2.66671 9.21214 2.66671H6.7879C6.45318 2.66671 6.18183 2.36823 6.18183 2.00004ZM2.54547 9.21216C2.54547 6.1997 4.98755 3.75762 8.00002 3.75762C11.0125 3.75762 13.4546 6.1997 13.4546 9.21216C13.4546 12.2246 11.0125 14.6667 8.00002 14.6667C4.98755 14.6667 2.54547 12.2246 2.54547 9.21216ZM10.5315 7.90113C10.7919 7.64078 10.7919 7.21867 10.5315 6.95832C10.2712 6.69797 9.84906 6.69797 9.58871 6.95832L7.70538 8.84166C7.44503 9.10201 7.44503 9.52412 7.70538 9.78447C7.96573 10.0448 8.38784 10.0448 8.64819 9.78447L10.5315 7.90113Z"
fill="#E52A34"
/>
</svg>
<p class="countdown-timer">
<span class="minute"></span>
menit :
<span class="second"></span>
detik
</p>
</div>
</div>
</div>
</div>
<div class="ticket-wrapper">
<div class="ticket-info">
<div class="ticket-header">
<div class="ticket-name-tag ticket-tag-rincian"></div>
<p class="ticket-note">Tidak bisa refund · Kursi dipilih secara otomatis</p>
</div>
<div class="ticket-amount">
<p class="ticket-subtitle">Jumlah Tiket</p>
<div class="ticket-amount-box">
<div class="ticket-price ticket-price-detail"></div>
<div class="quantity">
<button class="quantity__minus" disabled>-</button>
<input class="quantity__input" id="quantity__input" type="number" value="1" min="1" max="4" readonly />
<button class="quantity__plus">+</button>
</div>
</div>
</div>
<div class="ticket-bottom"></div>
</div>
<div class="cta-beli"></div>
</div>
</div>
</div>
</div>
<div id="sold-modal" class="modal">
<div class="modal-content">
<div class="modal-body">
<div class="sold-content">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/4f379bcd-5483-4d8f-aa63-dea7b368c167.png?convert=webp" loading="lazy" />
<p class="sold-title">
Tiket
<span id="type-ticket"></span>
sudah habis
</p>
<p class="sold-note">Cek tiket yang masih tersedia di kategori lain</p>
<button id="close-modal-bundle" class="cta-red close-modal">LIHAT TIKET LAINNYA</button>
</div>
</div>
</div>
</div>
<div id="benefit-modal" class="modal">
<div class="modal-content">
<div class="modal-body modal-seat-benefit">
<div class="modal-seat-benefit-header">
<div class="modal-seat-benefit-header-title">
<div class="ticket-name-tag">
<div class="ticket-tag" id="ticket-tag-benefit"></div>
<div>
<p id="ticket-name-benefit" class="ticket-name"></p>
<p id="ticket-subtitle-benefit" class="ticket-note"></p>
</div>
</div>
<p class="ticket-note">Tidak bisa refund · Kursi dipilih secara otomatis</p>
</div>
<button class="close-modal close-modal-ticket" id="close-modal-ticket">
<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="M18.6653 6.95098C19.1116 6.50467 19.1116 5.78105 18.6653 5.33474C18.219 4.88842 17.4953 4.88842 17.049 5.33474L12 10.3838L6.95098 5.33474C6.50467 4.88842 5.78105 4.88842 5.33474 5.33474C4.88842 5.78105 4.88842 6.50467 5.33474 6.95098L10.3838 12L5.33474 17.049C4.88842 17.4953 4.88842 18.219 5.33474 18.6653C5.78105 19.1116 6.50467 19.1116 6.95098 18.6653L12 13.6162L17.049 18.6653C17.4953 19.1116 18.219 19.1116 18.6653 18.6653C19.1116 18.219 19.1116 17.4953 18.6653 17.049L13.6162 12L18.6653 6.95098Z"
fill="#2C313A"
/>
</svg>
</button>
</div>
<p class="modal-seat-benefit-exclusive">Exclusive Benefits</p>
<div class="list-benefit" id="list-benefit"></div>
</div>
</div>
</div>
</div>
</body>
</html>