.fn-ma {
    float: none;
    margin: auto;
}
.system h1,
.system h2,
.system h3,
.system h4,
.system h5,
.system h6,
.system p,
.system a {
    margin: 0!important;
}
a {
    text-decoration: none;
}
/* Used on all text */
.font-inter {
    font-family: 'Inter';
}
.font-source {
    font-family: 'Source Sans Pro', sans-serif;
}
.font-nunito {
    font-family: 'Nunito', sans-serif;
}
.font-center {
    text-align: center;
}
/* Used on H1 tag */
.font-header-one, .font-header-two, .font-header-three {
    font-weight: 700;
}
/* Black main color */
.font-black {
    color: #000;
}
.font-dark {
    color: #2C313A;
}
/* Black secondary color */
.font-black-secondary {
    color: #333333;
}
.font-green {
    color: #13939E;
}
.font-gray {
    color: #424242;
}
.font-dark-gray {
    color: #4F4F4F
}
.font-light-gray {
    color: #5E677B;
}
.font-bright-gray {
    color: #828282;
}
/* White color */
.font-white {
    color: #FFFFFF;
}
.font-washed-white {
  color: #FFFAED;
}
.font-red {
    color: #E52A34;
}
.font-blue {
    background: linear-gradient(299.69deg, #0A5AD1 7.23%, #3DB6FA 105.51%), #FFFFFF;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
/* Letter spacing */
.ls-1 {
    letter-spacing: -0.01em;
}
.ls-5 {
    letter-spacing: -0.005em;
}
/* Display */
.display-block {
    display: block;
}
.display-none {
    display: none;
}
.display-flex {
    display: flex;
}
.display-grid {
    display: grid;
}
/* Used on all button */
.button-basic-white {
    background: #FFFFFF;
    border-radius: 96px;
    text-decoration: none;
    border: none;
    font-family: Inter;
    color: #2C313A;
}
.button-basic-white:hover {
    filter: brightness(95%);
}
.button-basic-orange {
    background: #F26D0F;
    border-radius: 100px;
    text-decoration: none;
    border: none;
    font-family: Inter;
    color: #fff;
}
.button-basic-orange:hover {
    filter: brightness(95%);
}
/* List */
.ul-basic {
    list-style: none;
}
.ol-basic {
    list-style: none;
}
.font-subtitle {
    font-weight: 700
}

.font-purple {
    color: #9c3ab1
}

p.font-help {
    color: #2c313a !important
}

.slick-disabled {
    opacity: .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, .12);
    cursor: pointer !important;
    height: 2rem !important;
    top: 109% !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
}

.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: -12% !important;
    left: 0 !important;
    width: fit-content !important
}

.slick-dots li button:before {
    color: #cfd3db !important;
    font-size: 12px !important;
    opacity: 1 !important
}

.slick-dots li.slick-active button:before {
    color: #9c3ab1 !important;
    font-size: 16px !important
}

@media(max-width:767px) {
    .slick-prev {
        left: 78% !important
    }
}

@media(min-width:768px) and (max-width:1024px) {
    .slick-prev {
        left: 89% !important
    }
}

.font-title {
    font-weight: 700;
    letter-spacing: -.005em
}

.font-desc {
    font-weight: 400
}

@media (min-width:768px) {
    .font-title {
        font-size: 28px;
        line-height: 42px;
        max-width: 70%;
        padding: 1rem 0 .75rem
    }
    .font-desc {
        font-size: 18px;
        letter-spacing: .01em;
        line-height: 28px;
        max-width: 80%
    }
}
@media (max-width:767px) {
    .font-title {
        font-size: 20px;
        line-height: 30px
    }
    .font-desc {
        font-size: 14px;
        line-height: 22px
    }
}

@media(min-width: 1025px) {
    .font-subtitle {
      font-size: 28px;
      line-height: 42px;
      letter-spacing: -0.005em;
    }
    .font-header-one {
        font-size: 32px;
        line-height: 48px;
    }
    .font-header-two {
        font-size: 18px;
        line-height: 28px;
    }
    .font-header-three {
        font-size: 20px;
        line-height: 30px;
    }
    .desktop {
        display: block!important;
    }
    .mobile {
        display: none!important;
    }
    .page-center-detail {
        width: 90%!important;
        max-width: 1200px!important;
    }
}
@media(max-width: 1024px) {
    .font-subtitle {
      font-size: 20px;
      line-height: 30px;
      text-align: center;
      letter-spacing: -0.005em;
    }
    .font-header-one {
        font-size: 20px;
        line-height: 22px;
    }
    .font-header-two, .font-header-three {
        font-size: 16px;
        line-height: 24px;
    }
    .desktop {
        display: none!important;
    }
    .mobile {
        display: block!important;
    }
    .page-center-content {
        width: 90%!important;
        max-width: 1200px!important;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .font-subtitle {
      font-size: 28px;
      line-height: 42px;
      letter-spacing: -0.005em;
    }
}
.system {
    background: #fff;
    padding: 1.5rem 0 0
}

.system-content {
    background: url(https://cdn-web-2.ruangguru.com/file-uploader/lp/c0466ca2-a184-49a0-b3f4-fdb21fdec106.svg), linear-gradient(235deg, #11194a -12.59%, #9c3ab1 112.59%);
    background-repeat: no-repeat;
    background-size: 100% 100%, cover;
    border-radius: 16px;
    box-shadow: 0 16px 20px 4px hsla(217, 5%, 53%, .16);
    padding: 1.5rem 1.5rem 2rem;
    position: relative;
    text-align: center
}

.font-subhead {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 12px 0
}

.system-content_img {
    float: none;
    margin: auto;
    padding: 0 0 1rem
}

.font-title-box {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 28px;
    position: relative
}

.font-desc-box {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    padding: .5rem 0
}

.system-box {
    background: rgba(0, 0, 0, .36);
    border-radius: 12px;
    padding: 12px 12px 12px 24px;
    position: relative;
    text-align: left
}

.box-red .system-box:before {
    background-image: url(https://cdn-web-2.ruangguru.com/file-uploader/lp/c289ef74-3415-4925-b080-c8453176887f.svg)
}

.box-orange .system-box:before {
    background-image: url(https://cdn-web-2.ruangguru.com/file-uploader/lp/f4b1f142-a771-40a6-a0f1-96cce693f1f7.svg)
}

.box-blue .system-box:before {
    background-image: url(https://cdn-web-2.ruangguru.com/file-uploader/lp/d380384d-8a59-46ae-a92a-1d0ebab957a5.svg)
}

.system-box:before {
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 1rem;
    z-index: 2
}

.font-title-box:before {
    align-items: center;
    align-self: center;
    border-radius: 50%;
    display: inline-flex;
    height: 1.75rem;
    justify-content: center;
    margin-right: .5rem;
    width: 1.75rem
}

.box-red .font-title-box:before {
    background: #e52a34;
    content: "1"
}

.box-orange .font-title-box:before {
    background: #f26d0f;
    content: "2"
}

.box-blue .font-title-box:before {
    background: #1480d8;
    content: "3"
}

@media (min-width:1025px) {
    .system-content {
        float: none;
        margin: auto;
        max-width: 95%
    }
    .system-content_img {
        max-width: 42%
    }
    .system-box:before {
        background-size: 100% 100%
    }
    .box-red {
        left: 3.5rem;
        top: 10rem
    }
    .box-orange {
        right: 3rem;
        top: 10rem
    }
    .box-red .system-box {
        width: 266px
    }
    .box-orange .system-box {
        width: 280px
    }
    .box-blue .system-box {
        width: 328px
    }
}

@media (min-width:768px) and (max-width:1024px) {
    .system-content_img {
        max-width: 44%;
        padding: .5rem 0 1rem
    }
    .system-box:before {
        background-size: auto 100%
    }
    .font-desc-box {
        max-width: 80%;
        padding: .75rem 0 2rem
    }
    .system-box-wrapper.box-red {
        left: .75rem;
        top: 9rem
    }
    .system-box-wrapper.box-orange {
        right: .75rem;
        top: 9rem
    }
    .box-orange .system-box,
    .box-red .system-box {
        width: 187px
    }
    .box-blue .system-box {
        width: 310px
    }
    .box-blue .system-box:before {
        background-size: 100% 100%
    }
    .box-blue .font-desc-box {
        max-width: 100%;
        padding: .5rem 0
    }
}

@media (min-width:768px) {
    .system-box-wrapper {
        position: absolute;
        width: fit-content
    }
    .box-blue {
        float: none;
        margin: auto;
        position: relative
    }
}

@media (max-width:767px) {
    .font-subhead {
        float: none;
        font-size: 14px;
        line-height: 22px;
        margin: 0 auto !important;
        max-width: 90%
    }
    .system-box:before {
        background-size: auto 100%
    }
    .font-desc-box {
        max-width: 98%
    }
    .system-content_box {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 1rem
    }
}