/* Common */
html {
    scroll-behavior: smooth;
}


@font-face {
    font-family: 'Noto Sans';
    font-weight: 300;
    src: url(/assets/webfonts/NotoSans-Light.ttf) format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-weight: 400;
    src: url(/assets/webfonts/NotoSans-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-weight: 500;
    src: url(/assets/webfonts/NotoSans-Medium.ttf) format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-weight: 600;
    src: url(/assets/webfonts/NotoSans-SemiBold.ttf) format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-weight: 700;
    src: url(/assets/webfonts/NotoSans-Bold.ttf) format('truetype');
}

#our-brand-page main * {
    box-sizing: border-box;
}

#our-brand-page main {
    font-family: var(--font-noto-sans);
}

:root {
    --font-antonio: "Antonio", sans-serif;
    --font-noto-sans: "Noto Sans", sans-serif;
}

.img-fluid {
    width: 100%;
    height: auto;
}

.mt-24 {
    margin-top: 24px;
}

.mt-48 {
    margin-top: 48px;
}

.overflow-hidden {
    overflow: hidden;
}


@media screen and (max-width: 768px) {
    .md-overflow-hidden {
        overflow: hidden;
    }

    .md-px-16 {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Default: Desktop */
.sp-only {
    display: none;
}

.pc-only {
    display: block;
}

/* Mobile: Max 768px */
@media screen and (max-width: 768px) {
    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }
}

.reveal-heading-line {
    display: block;
    overflow: hidden
}

.reveal-heading-text {
    will-change: transform;
    transition: transform .9s cubic-bezier(.22, 1, .36, 1);
    display: block;
    transform: translateY(110%)
}

.reveal-heading-line:nth-child(2) .reveal-heading-text {
    transition-delay: .12s
}

.reveal-heading-line:nth-child(3) .reveal-heading-text {
    transition-delay: .24s
}

.reveal-heading.is-visible .reveal-heading-text {
    transform: translateY(0)
}


.component-label {
    margin-bottom: 32px;
}

.component-label-text {
    font-family: var(--font-antonio);
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    color: #FF3D2F;
    line-height: 1;
    letter-spacing: 2%;
}

.component-label.type-white .component-label-text {
    color: #fff;
}

.component-heading-content {
    margin-bottom: 48px;
}

.component-title-text {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 2%;
}

.en-version .component-title-text {
    line-height: 1.5;
}


.component-desc-text {
    margin-top: 32px;
    font-size: 24px;
    font-weight: 500;
    line-height: 2.4;
    letter-spacing: 2%;
}

.en-version .component-desc-text {
    line-height: 1.8;
}


.component-desc-text:first-of-type {
    margin-top: 0;
}

@media screen and (max-width: 1279px) {
    .component-heading-content {
        margin-bottom: 32px;
    }

    .component-title-text {
        font-size: 32px;
    }

    .component-desc-text {
        font-size: 16px;
    }
}

.component-link-btn {
    max-width: 100%;
    width: max-content;
    cursor: pointer;
    color: #000000;
    align-items: center;
    gap: 24px;
    font-family: var(--font-noto-sans);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 2px;
    transition: color .25s ease-out;
    display: flex
}

.component-link-btn * {
    cursor: inherit
}

.component-link-btn .circle-arrow {
    background: 0 0;
    border: 1px solid #333;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    transition: background-color .25s ease-out, border-color .25s ease-out;
    display: flex;
    position: relative;
    overflow: hidden
}

.component-link-btn .circle-arrow img {
    width: 15.457px;
    height: 14.249px;
    transition: filter .25s ease-out, transform .4s ease-in-out;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.component-link-btn .circle-arrow .icon-type {
    transition: filter .25s ease-out, transform .4s ease-in-out;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.component-link-btn .circle-arrow .circle-arrow-next {
    transform: translate(-50%, -50%)translate(-40px)
}

.component-link-btn:hover {
    color: #ff3d2f;
    opacity: 1;
}

.component-link-btn:hover .circle-arrow {
    background-color: #ff3d2f;
    border-color: #ff3d2f
}

.component-link-btn:hover .circle-arrow img {
    filter: brightness(0)invert()
}

.component-link-btn:hover .circle-arrow .icon-type {
    color: #fff;
}

.component-link-btn:hover .circle-arrow-current {
    transform: translate(-50%, -50%)translate(40px)
}

.component-link-btn:hover .circle-arrow-next {
    transform: translate(-50%, -50%)translate(0)
}

.animation.fade-in {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity .8s ease-out,transform .8s ease-out;
    transform: translateY(30px)
}

.animation.action.fade-in {
    opacity: 1;
    transform: translateY(0)
}

/* Area Content */

/* MV Video Area */
.mv-banner-area {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 3;
}

.mv-banner-area-inner {
    width: 100%;
    height: 100%;
}

.mv-banner-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.scroll-indicator {
    z-index: 2;
    color: #fff;
    mix-blend-mode: difference;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 32px;
    animation: 2s ease-in-out infinite scroll-indicator-float;
    display: flex;
    position: absolute;
    bottom: -63px;
    right: max(50% - 660px, 96px)
}

@keyframes scroll-indicator-float {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(8px)
    }
}

.scroll-indicator .scroll-indicator-text {
    color: #fff;
    letter-spacing: 1px;
    width: 56px;
    margin-bottom: 12px;
    font-size: 20px;
    font-family: var(--font-antonio);
    font-weight: 600;
    letter-spacing: 5%;
    transform: rotate(90deg)
}

.scroll-arrow {
    width: 31.413px;
    height: 81.452px
}

.scroll-arrow-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1px;
    animation: 1.9s ease-in-out infinite scroll-arrow-draw;
}

@keyframes scroll-arrow-draw {
    0% {
        stroke-dashoffset: 1px
    }

    48%,
    to {
        stroke-dashoffset: 0
    }
}

@media screen and (max-width: 768px) {
    .scroll-indicator {
        right: 16px;
        bottom: -70px;
        gap: 10px;
    }

    .scroll-indicator .scroll-indicator-text {
        font-size: 14px;
        width: max-content;
    }

    .scroll-arrow {
        height: 48px;
        width: auto;
    }
}

/* End MV Video Area */


/* Introduction Area */
.introduction-area {
    padding: 120px 0 0;
    padding-top: 153px;
    background-color: #111111;
    color: #FFFFFF;
    position: relative;
    z-index: 2;
}

.introduction-area-inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 200px;
    max-width: 100%;
    margin: auto;
}



/* left */
.introduction-left {
    position: relative;
    max-width: 100%;
    width: max-content;
}

.one-gradient {
    width: 1707px;
    height: 1015px;
    display: block;
    position: absolute;
    top: 35px;
    left: calc(100% - 1280px);
    /* left: -100%; */
}

.drawing-line-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1px;
    will-change: stroke-dashoffset
}

.is-drawing .drawing-line-path {
    animation: 1.8s cubic-bezier(.45, 0, .2, 1) forwards draw-red-gradient
}

@keyframes draw-red-gradient {
    to {
        stroke-dashoffset: 0
    }
}

.introduction-inner {
    position: relative;
    z-index: 2;
}

.introduction-brand-name {
    text-align: center;
}

.brand-name-big-text {
    display: block;
    font-family: var(--font-antonio);
    font-weight: 600;
    font-size: 424px;
    line-height: 1;
    letter-spacing: -7%;
}

.brand-name-small-text {
    display: block;
    font-family: var(--font-antonio);
    font-weight: 600;
    font-size: 150px;
    line-height: 1;
    letter-spacing: 0%;
    padding-left: 32px;
}


.introduction-statement {
    margin-top: 90px;
    padding-left: 32px;
}

.stetment-text {
    font-family: var(--font-antonio);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.6;
}



/* Right */
.introduction-right {
    padding-top: 375px;
    max-width: 665px;
}

@media screen and (max-width: 1365px) {
    .introduction-area {
        overflow: hidden;
    }

    .introduction-area-inner {
        gap: 90px;
    }
}

@media screen and (max-width: 1279px) {
    .introduction-area-inner {
        gap: 60px;
        padding: 0 16px;
    }

    .brand-name-big-text {
        font-size: 320px;
    }

    .brand-name-small-text {
        font-size: 110px;
        padding-left: 24px;
    }

    .introduction-right {
        flex: 1;
    }

}

@media screen and (max-width: 959px) {
    .introduction-right {
        padding-top: 250px;
    }

    .introduction-area-inner {
        gap: 45px;
    }

    .one-gradient {
        /* width: 100vw; */
        width: 853.2649536132812px;
        height: auto;
        left: -355px;
        top: 28px;
    }

    .brand-name-big-text {
        font-size: 240px;
    }

    .brand-name-small-text {
        font-size: 85px;
        padding-left: 16px;
    }

    .stetment-text {
        font-size: 16px;
    }

    .introduction-statement {
        margin-top: 40px;
        padding-left: 16px;
    }


}

@media screen and (max-width: 768px) {
    .introduction-area {
        padding: 80px 0 40px;
    }

    .introduction-area-inner {
        justify-content: stretch;
        gap: 0;
    }

    .introduction-brand-name {
        text-align: start;
    }

    .stetment-text {
        font-size: 13px;
    }

    .introduction-statement {
        margin-top: 40px;
        padding-left: 16px;
    }

    .introduction-right {
        padding-top: 80px;
        flex: auto;
        width: 100%;
    }
}

/* next-chapter-area */
.next-chapter-area {
    position: relative;
    background: linear-gradient(#111111, #212124);
    padding-top: 100px;
    color: #fff;
    z-index: 1;
}

.next-chapter-area-inner {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    max-width: 1920px;
    margin: 0 auto;
}

.next-chapter-left {
    margin-right: -20px;
    max-width: 550px;
    flex: 1;
}

.next-chapter-right {
    padding-top: 62px;
    max-width: 1000px;
    /* flex: 1; */
}

.next-chapter-bg {
    position: absolute;
    display: block;
    top: 299px;
    left: -502px;
    z-index: -1;
}

@media screen and (max-width: 1819px) {
    .next-chapter-area-inner {
        max-width: 1512px;
    }

    .next-chapter-left {
        margin-right: -90px;
        flex: unset;
    }

    .next-chapter-right {
        margin-right: -80px;
    }
}

@media screen and (max-width: 1365px) {
    .next-chapter-left {
        max-width: 360px;
    }

    .next-chapter-right {
        flex: 1;
    }

    .next-chapter-area-inner {
        padding: 0 20px;
    }
}


@media screen and (max-width: 768px) {
    .next-chapter-area-inner {
        padding: 0 0px;
        width: 100%;
        display: block;
    }

    .next-chapter-area {
        padding-top: 60px;
        padding-bottom: 80px;
        margin-top: -1px;
    }

    .next-chapter-left {
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }

    .next-chapter-right {
        flex: unset;
        padding: 0;
        margin: 0;
    }

    .next-chapter-area-img {
        margin-top: 48px;
        margin-bottom: 32px;
        margin-left: auto;
        padding-left: 16px;
    }

    .next-chapter-bg {
        width: 1113.958984375px;
        top: -147.5px;
        left: -322.02px;
    }


}

/* brand-identity-area */

.brand-identity-area {
    padding-top: 30px;
    padding-bottom: 180px;
    background: linear-gradient(#212124, #37363d);
    color: #fff;
}

.brand-identity-area-inner {
    position: relative;
    max-width: 1320px;
    margin: auto;
}

@media screen and (max-width: 1365px) and (min-width: 768px) {
    .brand-identity-area-inner {
        padding: 0 16px;
    }
}

.brand-identity-area-head,
.brand-identity-area-content {
    position: relative;
    z-index: 2;
}

.identity-gradient {
    width: 1699.5px;
    height: 1103.8px;
    display: block;
    position: absolute;
    top: 135px;
    left: -540px;
}


.brand-identity-area-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 48px;
}

.brand-identity-area-content .content-item {
    width: calc(50% - 20px);
}

.brand-identity-area-content .content-item:nth-child(even) {
    padding-top: 150px;
}

.content-item.animation.fade-in:nth-child(1) {
  transition-delay: 0s;
}

.content-item.animation.fade-in:nth-child(2) {
  transition-delay: 0.3s;
}

.content-item.animation.fade-in:nth-child(3) {
  transition-delay: 0.6s;
}

.content-item.animation.fade-in:nth-child(4) {
  transition-delay: 0.9s;
}

.content-legend {
    margin-top: 32px;
}

.content-legend-title {
    margin-bottom: 24px;
    font-size: 32px;
    line-height: 1.8;
    font-weight: 700;
    letter-spacing: 2%;
}


.content-legend-desc {
    font-size: 18px;
    line-height: 2;
    font-weight: 500;
    letter-spacing: 2%;
}

.en-version .content-legend-desc {
    line-height: 1.8;
}

@media screen and (max-width: 768px) {
    .brand-identity-area {
        padding-bottom: 80px;
        margin-top: -1px;
    }

    .brand-identity-area-content .content-item {
        width: 100%;
    }

    .brand-identity-area-content .content-item:nth-child(even) {
        padding-top: 0;
    }

    .content-legend {
        margin-top: 24px;
    }

    .content-legend-title {
        margin-bottom: 16px;
        font-size: 24px;
    }

    .content-legend-desc {
        font-size: 14px;
    }

    .identity-gradient {
        width: 849.75px;
        height: auto;
        top: 114px;
        left: -386px;
    }
}


/* Brand Movie Area */

.brand-movie-area {
    position: relative;
    isolation: isolate;
    padding: 130px 16px;
    color: #fff;
    overflow: hidden;
}

.brand-movie-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/our-brand/img/bg_brand_movie.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(1.2);
    z-index: -1;
}

.brand-movie-title {
    text-align: center;
    margin-bottom: 40px;
}

.brand-movie-title-text {
    font-size: 24px;
    line-height: 1;
    font-family: var(--font-antonio);
    text-transform: uppercase;
    letter-spacing: 2%;
}

.brand-movie-area-inner {
    max-width: 753px;
    margin: 0 auto;
}

.brand-movie-video {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
}

.brand-movie-player {
    display: block;
    width: 100%;
    height: auto;
}

.brand-movie-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.brand-movie-placeholder picture,
.brand-movie-placeholder img {
    display: block;
    width: 100%;
    height: 100%;
}

.brand-movie-placeholder img {
    object-fit: cover;
}

.icon-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    cursor: pointer;
}

/* Sembunyikan placeholder ketika video sudah mulai diputar */
.brand-movie-video.is-started .brand-movie-placeholder {
    display: none;
}

/* Sembunyikan ikon Play hanya saat video berjalan */
.brand-movie-video.is-playing .icon-play-button {
    display: none;
}

@media screen and (max-width: 768px) {
    .brand-movie-area {
        padding: 80px 16px;
    }

    .brand-movie-title {
        margin-bottom: 32px;
    }

    .brand-movie-area .icon-play-button {
        width: 48px;
        height: 48px;
    }
}

/* Global Network */
.global-network-area {
    background-color: #FAFAFA;
    padding-top: 120px;
    color: #333333;
}

.global-network-area-inner {
    max-width: 2000px;
    margin: 0 auto;
}

.global-network-area-head {
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 1365px) and (min-width: 768px) {
    .global-network-area-head {
        padding: 0 16px;
    }
}


.global-network-area-map {
    margin-top: -50px;
    position: relative;
    z-index: 0;
}

@media screen and (max-width: 768px) {
    .global-network-area {
        padding-top: 100px;
    }

    .global-network-area .component-heading-content {
        margin-bottom: 48px;
    }

    .global-network-area-map {
        margin-top: 20px;
    }

    .global-network-area .component-desc-text {
        font-size: 14px;
    }
}



/* feature-area */

.feature-area {
    padding: 120px 0;
    color: #333333;
    background-color: #EDEDED;
}

.feature-area-inner {
    max-width: 1320px;
    margin: auto;
}

@media screen and (max-width: 1365px) and (min-width: 768px) {
    .feature-area-inner {
        padding: 0 16px;
    }
}


.feature-area-swiper {
    overflow: hidden;
}

.feature-area-list {
    display: flex;
    gap: 0;
}

.feature-area-item {
    width: auto;
    height: auto;
    box-sizing: border-box;
}

/* Controls */
.feature-area-controls {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 40px;
}

.feature-area-scrollbar {
    position: relative;
    flex: 1;
    height: 2px;
    background-color: #D9DDE5;
}

.feature-area-scrollbar .swiper-scrollbar-drag {
    background-color: #222;
    border-radius: 0;
    cursor: grab;
}

.feature-area-navigation {
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-area-navigation .feature-area-prev,
.feature-area-navigation .feature-area-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0px solid #222;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    opacity: 1 !important;
}

.feature-area-prev img,
.feature-area-next img {
    display: block;
    width: 100%;
    height: auto;
}

.feature-area-prev.swiper-button-disabled,
.feature-area-next.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

.feature-area-list.swiper-wrapper {
    display: flex;
}

.feature-area-item.swiper-slide {
    height: auto;
    box-sizing: border-box;
    flex-shrink: 0;
}

.feature-area-title {
    margin-top: 32px;
}

.feature-area-title-text {
    font-family: var(--font-antonio);
    font-size: 32px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 600;
}

.feature-area-desc {
    margin-top: 24px;
}

.feature-area-desc-text {
    font-size: 18px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 2%;
}

.en-version .feature-area-desc-text {
    line-height: 1.8;
}

.feature-area-link {
    margin-top: 24px;
}

/* Desktop: 3 items */
@media screen and (min-width: 769px) {
    .feature-area-item.swiper-slide {
        width: calc((100% - 64px) / 3) !important;
    }


}

/* Mobile: fixed width */
@media screen and (max-width: 768px) {
    .feature-area {
        padding: 80px 0;
    }

    .feature-area-item.swiper-slide {
        width: 265px !important;
    }

    .feature-area-controls {
        margin-top: 40px;
    }



    /* .feature-area-prev,
    .feature-area-next {
        width: 48px;
        height: 48px;
    } */

    .feature-area-title {
        margin-top: 24px;
    }
    .feature-area-title-text {
        font-size: 24px;
    }

    .feature-area-desc {
        margin-top: 16px;
    }

    .feature-area-desc-text {
        font-size: 14px;
    }
    .en-version .feature-area-desc-text {
        line-height: 2;
    }

    .en-version .feature-area-link {
        margin-top: 16px;
    }

}


/* philosophy-area */
.philosophy-area {
    position: relative;
    padding-top: 120px;
    padding-bottom: 200px;
    background: #111111;
    color: #fff;
}

.en-version .philosophy-area {
    padding-top: 150px;
    padding-bottom: 202px;
}



.philosophy-bg img {
    object-fit: cover;
    /* opacity: .5; */
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 2;
}

.red-gradient {
    width: 2227.92px;
    max-width: none;
    height: 418.012px;
    position: absolute;
    top: 363px;
    left: calc(50% - 1536px);
    z-index: 3;
}


.philosophy-area-inner {
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
    z-index: 4;
    text-align: center;
}

@media screen and (max-width: 1365px) and (min-width: 768px) {
    .philosophy-area-inner {
        padding: 0 16px;
    }
}


.philosophy-brand-text {
    font-family: var(--font-antonio);
    font-size: 50px;
    font-weight: 600;
    line-height: 1;
}

.en-version .philosophy-brand-text {
    font-size: 60px;
}

.en-version .philosophy-area .component-title-text {
    font-size: 64px;
    letter-spacing: 2%;
    line-height: 1.4;
}

.en-version .philosophy-area .component-desc-text {
    line-height: 2;
}

@media screen and (max-width: 1279px) {
     .red-gradient {
        width: 1600px;
        height: auto;
        top: 287px;
        left: -520px;
    }

     .en-version .red-gradient {
        width: 1600px;
        height: auto;
        top: 350px;
        left: -520px;
    }
}

@media screen and (max-width: 768px) {
    .philosophy-area {
        padding-bottom: 212px;
        padding-top: 120px;
    }

    .en-version .philosophy-area {
        padding-top: 120px;
        padding-bottom: 144px;
    }

    .philosophy-brand-text {
        font-size: 32px;
    }

    .red-gradient {
        width: 1113.958984375px;
        height: auto;
        top: 387px;
        left: -466px;
    }

    .en-version .red-gradient {
        width: 1113.958984375px;
        height: auto;
        top: 417px;
        left: -466px;
    }

    .philosophy-shade {
        background: linear-gradient(#0000, #00000080 76%);
        position: absolute;
        inset: 0;
        z-index: 1;
    }


    .en-version .philosophy-area .component-title-text {
        font-size: 40px;
        line-height: 1.5;
    }

    .en-version .philosophy-area .component-desc-text {
        font-size: 18px;
        line-height: 2;
    }

    .en-version .philosophy-brand-text {
        font-size: 32px;
    }
}