@charset "utf-8";

/* Security Main Page */

.security-hero {
    width: 100%;
    height: 100dvh;
    min-height: 600rem;
    position: relative;
    background: linear-gradient(135deg, #9C2B32 0%, #BA2427 100%);
    overflow: hidden;
    border-radius: 0 0 200px 0;

    .security-hero-content {
        display: flex;
        align-items: center;
        height: 100%;
        z-index: 1;
    }

    .security-hero-content .title-wrap {
        color: #fff;
    }

    .security-hero-content .title-wrap .title p {
        font-family: var(--font-sans);
        font-size: var(--font-size-32);
        margin-bottom: 24px;
        color: #BA2427;
    }

    .security-hero-content .title-wrap .title h1 {
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
        line-height: 140%;
        color: #222;
    }

    .security-hero-content .title-wrap a {
        display: flex;
        width: 200px;
        height: 60px;
        padding: 18px 12px;
        justify-content: center;
        align-items: center;
        gap: 20px;
        border-radius: 50px;
        background: #B92427;
        color: #FFF;
        margin-top: 100px;
    }

    .car-main {
        position: absolute;
        bottom: 0%;
        right: 330rem;
        width: calc(var(--container-scale) * 100%);
        max-width: 450rem;
        z-index: 1;
    }

    .bg-main {
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: unset;
        clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
    }


    @media (max-width: 1280px) {
        .car-main {
            max-width: 350rem;
            right: 90rem;
        }
    }

    @media (max-width: 767px) {
        .car-main {
            max-width: 190rem;
            right: -20rem;
        }
    }
}

@media (max-width: 1024px) {
    .security-hero {
        border-radius: 0 0 100px 0;
    }
}

/* //// TEMP //// */

/* Sub05 - Statistic - 01 */

/* Sub05 - Statistic - 02 */

.statistic-sub02 {
    position: relative;

    .sub02-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .data-statistic {
        position: relative;
        padding-top: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem);
    }

    .data-statistic .tit-cont {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .data-statistic .tit-cont h4 {
        font-size: var(--font-size-36);
        margin-bottom: 24rem;
    }

    .data-statistic .tit-cont>p {
        font-size: var(--font-size-18);
        margin-top: 40rem;
    }

    .statistic-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 100px;
        padding-top: clamp(60rem, calc(100 / var(--container) * 100vw), 70rem);
    }

    .statistic-content>.title {
        display: flex;
        flex-direction: column;
        /* width: 100%; */
        color: #fff;
    }

    .statistic-content .title p {
        font-family: var(--font-sans);
        font-size: var(--font-size-32);
    }

    .statistic-content .title h1 {
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
    }

    .statistic-content>.title span {
        display: block;
        font-size: var(--font-size-22);
        margin-top: 24px;
    }

    .statistic-content .title .desc {
        display: flex;
        font-size: var(--font-size-22);
        margin-top: 54px;
    }

    .statistic-content .tab-chart {
        width: 100%;
        max-width: 925px;
    }

    .statistic-content .tab-chart .tab-wrap {
        display: flex;
        width: fit-content;
        overflow: hidden;
        border-radius: 14px 0 0 0;
    }

    .statistic-content .tab-chart .chart-wrap .chart .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 10px;
    }

    .statistic-content .tab-chart .chart-wrap .chart .title .text {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .statistic-content .tab-chart .chart-wrap .chart .title .text p {
        font-size: var(--font-size-28);
        font-weight: 700;
    }

    .statistic-content .tab-chart .chart-wrap .chart .title .text span {
        font-size: var(--font-size-22);
        color: #9C2B32;
    }

    .statistic-content .tab-chart .tab-wrap .tab {
        display: flex;
        align-items: end;
    }

    .statistic-content .tab-chart .tab-wrap .tab:not(:first-child) {
        margin-left: -40px;
    }

    .statistic-content .tab-chart .tab-wrap .tab>p {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 50px;
        height: 100%;
        color: #9C2B32;
        background-color: #F7E9E9;
    }

    .statistic-content .tab-chart .tab-wrap .tab>svg {
        fill: #F7E9E9;
    }

    .statistic-content .tab-chart .tab-wrap .tab>svg:first-child {
        margin-right: -1px;
    }

    .statistic-content .tab-chart .tab-wrap .tab>svg:last-child {
        margin-left: -1px;
    }

    .statistic-content .tab-chart .tab-wrap .tab.active>svg {
        fill: #fff;
    }

    .statistic-content .tab-chart .tab-wrap .tab.active {
        color: #000;
        font-weight: 800;
        z-index: 2;
    }

    .statistic-content .tab-chart .tab-wrap .tab.active>p {
        background-color: #fff;
    }

    .statistic-content .tab-chart .tab-wrap .tab[data-tab="tab1"] {
        border-radius: 28px 0 0 0;
        /* overflow: hidden; */
    }

    .statistic-content .tab-chart .chart-wrap .chart {
        display: none;
    }

    .statistic-content .tab-chart .chart-wrap .chart.active {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 54px;
        border-radius: 28px 28px 28px 28px;
        box-shadow: 0 4px 2px 0 rgba(60, 64, 67, 0.12), 0 0px 6px 2px rgba(60, 64, 67, 0.08);
    }

    .statistic-content .tab-chart .chart-wrap .chart .canvas-wrap {
        width: 100%;
        height: 415px;
    }

    .statistic-content .tab-chart .chart-wrap .chart .canvas-wrap canvas {
        width: 100%;
        height: 100%;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab1"] {
        background: url(/assets/images/components/bg-overlay-chart-1.png) no-repeat center / cover;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab2"] {
        background: url(/assets/images/components/bg-overlay-chart-2.png) no-repeat center / cover;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab3"] {
        background: url(/assets/images/components/bg-overlay-chart-3.png) no-repeat center / cover;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab4"] {
        background: url(/assets/images/components/bg-overlay-chart-4.png) no-repeat center / cover;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab3"] .title>img {
        width: 38px;
        height: 38px;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab4"] .title>img {
        width: 38px;
        height: 38px;
    }

    @media (max-width: 1280px) {
        .statistic-content {
            flex-direction: column;
        }

        .statistic-content>.title {
            width: 100%;
            align-items: center;
        }

        .statistic-content .title .desc {
            text-align: center;
        }

    }

    @media (max-width: 1024px) {
        .statistic-content .tab-chart .tab-wrap .tab {
            padding: 12px 24px;
        }

        .statistic-content .tab-chart .chart-wrap .chart .canvas-wrap {
            height: 265px;
        }

        .statistic-content .tab-chart .chart-wrap .chart.active {
            padding: 32px;
        }

    }
}