.front-section-intro {
    background: url(../img/front-intro-poster.png) center no-repeat;
    background-size: cover
}

.front-intro-video {
    display: none
}

.front-intro-side {
    position: relative;
    background: rgba(0, 0, 0, 0.6);
    height: 100vh;
    color: #fff;
    text-align: center
}

.front-intro-side-inner {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.front-intro-title {
    font-size: 2em;
    color: #fff;
    font-weight: 100;
    line-height: 1.125em
}

.front-intro-subtitle {
    margin: 2em 0;
    font-weight: 300
}

.front-intro-btn {
    opacity: 1;
    margin: 0 0.375em 1.25em 0
}

.front-intro-btn-group {
    position: relative;
    display: inline-block
}

.front-intro-btn-group:hover .from-intro-btn-trigger-drawer {
    visibility: visible
}

.front-intro-btn-group:hover .front-intro-btn-hero {
    background: #fff;
    color: #0c82b6;
    transition: background .2s, color .2s
}

.from-intro-btn-trigger-drawer {
    position: absolute;
    bottom: 100%;
    background: rgba(12, 130, 182, 0.9);
    left: 0;
    width: 100%
}

.from-intro-btn-trigger-drawer a {
    display: block;
    margin-bottom: -1px
}

.front-intro-labels {
    display: none
}


/* @media screen and (min-height: 820px) { */

@media screen and (min-height: 220px) {
    .from-intro-btn-trigger-drawer {
        top: 100%;
        bottom: auto;
        background: none
    }
    .from-intro-btn-trigger-drawer a {
        margin-top: -1px;
        margin-bottom: 0
    }
}

@media screen and (min-width: 1024px) {
    .front-section-intro {
        background-position: bottom right
    }
    .js .front-section-intro .title-section-simple,
    .js .front-section-intro .section-subtitle,
    .js .front-section-intro .btn-wrap {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        transition: opacity .5s, -webkit-transform .5s;
        transition: transform .5s, opacity .5s;
        transition: transform .5s, opacity .5s, -webkit-transform .5s
    }
    .js .front-section-intro .section-subtitle {
        transition-delay: .1s
    }
    .js .front-section-intro .btn-wrap {
        transition-delay: .2s
    }
    .front-intro-video {
        position: absolute;
        display: block;
        bottom: 0;
        right: 0;
        width: 100%
    }
    .front-intro-side {
        width: 50%;
        max-width: 720px;
        text-align: left;
        background: rgba(0, 0, 0, 0.75)
    }
    .front-intro-side-inner {
        padding: 2em
    }
    .front-intro-btn {
        display: inline-block
    }
    .front-intro-labels {
        display: block;
        position: absolute;
        top: 50%;
        right: 2em;
        opacity: 0;
        transition: opacity .5s
    }
    .front-intro-label-group {
        position: absolute;
        bottom: 0;
        right: 0;
        text-align: right
    }
    .front-intro-label {
        margin-top: 0.375em;
        font-size: 1em;
        transition: max-width 0.5s cubic-bezier(0.6, 0, 0.4, 1)
    }
    .front-intro-label>span {
        white-space: nowrap;
        background: #fff;
        color: #0c82b6
    }
    .front-intro-label>span::after {
        content: '';
        display: inline-block;
        width: 20px;
        height: 2px;
        background: #0c82b6;
        margin-left: 0.625em;
        vertical-align: 24%
    }
    @supports (-webkit-clip-path: inset(-1% -1% -1% -1%)) or (clip-path: inset(-1% -1% -1% -1%)) {
        .front-intro-label {
            -webkit-clip-path: inset(-1% -1% -1% 101%);
            clip-path: inset(-1% -1% -1% 101%);
            transition-property: -webkit-clip-path;
            transition-property: clip-path;
            transition-property: clip-path, -webkit-clip-path
        }
    }
    .front-intro-label-2 span {
        color: #05baca
    }
    .front-intro-label-2 span::after {
        background: #05baca
    }
    .front-intro-label-4 span {
        color: #5436a5
    }
    .front-intro-label-4 span::after {
        background: #5436a5
    }
    .front-section-intro.onview .front-intro-labels {
        opacity: 1
    }
    .front-section-intro.mile-1 .front-intro-label-1 {
        max-width: 150px
    }
    .front-section-intro.mile-2 .front-intro-label-2 {
        max-width: 200px
    }
    .front-section-intro.mile-2 .front-intro-label-3 {
        max-width: 200px
    }
    .front-section-intro.mile-2 .front-intro-label-4 {
        max-width: 200px
    }
    .front-section-intro.mile-3 .front-intro-label-5 {
        max-width: 300px
    }
    @supports (-webkit-clip-path: inset(-1% -1% -1% -1%)) or (clip-path: inset(-1% -1% -1% -1%)) {
        .front-section-intro.mile-1 .front-intro-label-1 {
            max-width: none;
            -webkit-clip-path: inset(-1% -1% -1% -1%);
            clip-path: inset(-1% -1% -1% -1%)
        }
        .front-section-intro.mile-2 .front-intro-label-2 {
            max-width: none;
            -webkit-clip-path: inset(-1% -1% -1% -1%);
            clip-path: inset(-1% -1% -1% -1%)
        }
        .front-section-intro.mile-2 .front-intro-label-3 {
            max-width: none;
            -webkit-clip-path: inset(-1% -1% -1% -1%);
            clip-path: inset(-1% -1% -1% -1%)
        }
        .front-section-intro.mile-2 .front-intro-label-4 {
            max-width: none;
            -webkit-clip-path: inset(-1% -1% -1% -1%);
            clip-path: inset(-1% -1% -1% -1%)
        }
        .front-section-intro.mile-3 .front-intro-label-5 {
            max-width: none;
            -webkit-clip-path: inset(-1% -1% -1% -1%);
            clip-path: inset(-1% -1% -1% -1%)
        }
    }
}

@-webkit-keyframes frontIntroLabel {
    0% {
        -webkit-clip-path: inset(-1% -1% -1% 101%);
        clip-path: inset(-1% -1% -1% 101%)
    }
    15% {
        -webkit-clip-path: inset(-1% -1% -1% -1%);
        clip-path: inset(-1% -1% -1% -1%)
    }
    85% {
        -webkit-clip-path: inset(-1% -1% -1% -1%);
        clip-path: inset(-1% -1% -1% -1%)
    }
    100% {
        -webkit-clip-path: inset(-1% -1% -1% 101%);
        clip-path: inset(-1% -1% -1% 101%)
    }
}

@keyframes frontIntroLabel {
    0% {
        -webkit-clip-path: inset(-1% -1% -1% 101%);
        clip-path: inset(-1% -1% -1% 101%)
    }
    15% {
        -webkit-clip-path: inset(-1% -1% -1% -1%);
        clip-path: inset(-1% -1% -1% -1%)
    }
    85% {
        -webkit-clip-path: inset(-1% -1% -1% -1%);
        clip-path: inset(-1% -1% -1% -1%)
    }
    100% {
        -webkit-clip-path: inset(-1% -1% -1% 101%);
        clip-path: inset(-1% -1% -1% 101%)
    }
}

@media screen and (min-width: 1200px) {
    .front-intro-side-inner {
        padding: 3.25em
    }
    .front-intro-title {
        font-size: 2.375em;
        font-weight: 300
    }
    .front-intro-subtitle {
        font-size: 1.125em
    }
    .front-intro-label {
        font-size: 1.125em
    }
}

@media screen and (min-width: 1520px) {
    .front-intro-side-inner {
        padding: 4.5em
    }
    .front-intro-title {
        font-size: 2.75em
    }
    .front-intro-subtitle {
        font-size: 1.25em
    }
}

@media screen and (max-aspect-ratio: 1280 / 710) {
    .front-intro-video {
        width: auto;
        height: 100%
    }
}

.front-section-range {
    background: #fff;
    /* height: auto, */
    height: 60vh
}

.front-range-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    opacity: 0;
    transition: opacity .5s
}

.front-range-inner::after {
    color: rgba(12, 130, 182, 0.5)
}

.front-range-graphics {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    order: 1
}

.front-range-graphics::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* box-shadow: inset 0 0 120px #fff; */
    z-index: 1
}

.front-range-graphics-inner-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%;
    opacity: 1
}

.front-range-graphics-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.front-range-graphics-inner svg {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.front-range-labels {
    position: absolute;
    top: 5%;
    left: 5%;
    z-index: 1
}

.front-range-label {
    margin-bottom: 0.125em
}

.front-range-label span {
    background: #05baca
}

.front-range-content {
    width: 100%;
    margin-bottom: 1em
}

.front-range-content-inner {
    max-width: 620px;
    margin: 0 auto
}

.front-range-graphics-inner-wrap {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.front-range-graphic-long,
.front-range-graphic-short {
    opacity: 0;
    -webkit-clip-path: circle(0% at 50% 50%);
    clip-path: circle(0% at 50% 50%)
}

.front-range-label-base,
.front-range-label-long,
.front-range-label-short {
    -webkit-clip-path: inset(-1% 101% -1% -1%);
    clip-path: inset(-1% 101% -1% -1%);
    transition: none
}

#range-color-high-short {
    opacity: 0;
    visibility: hidden
}

#front-range-b-car-1,
#front-range-l-car-1,
#front-range-s-car-1,
#front-range-b-car-2,
#front-range-l-car-2,
#front-range-s-car-2,
#front-range-b-car-3,
#front-range-l-car-3,
#front-range-s-car-3 {
    display: none
}

.front-section-range.onview .front-range-inner {
    opacity: 1
}

.front-section-range.play .front-range-graphics-inner-wrap {
    -webkit-transform: scale(2.8);
    transform: scale(2.8);
    transition: 2.5s 4.7s cubic-bezier(0.6, 0, 0.4, 1)
}

.front-section-range.play .front-range-graphic-long,
.front-section-range.play .front-range-graphic-short {
    -webkit-animation: rangeBeamLongPolyfill 5.2s 2.1s cubic-bezier(0.6, 0, 0.4, 1) forwards;
    animation: rangeBeamLongPolyfill 5.2s 2.1s cubic-bezier(0.6, 0, 0.4, 1) forwards
}

.front-section-range.play .front-range-graphic-short {
    -webkit-animation-name: rangeBeamShortPolyfill;
    animation-name: rangeBeamShortPolyfill
}

.front-section-range.play .front-range-label-base,
.front-section-range.play .front-range-label-long,
.front-section-range.play .front-range-label-short {
    white-space: pre;
    max-width: 260px;
    -webkit-clip-path: inset(-1% -1% -1% -1%);
    clip-path: inset(-1% -1% -1% -1%);
    transition: max-width 1s 2.4s cubic-bezier(0.6, 0, 0.4, 1)
}

.front-section-range.play .front-range-label-long {
    transition-delay: 2.6s
}

.front-section-range.play .front-range-label-short {
    transition-delay: 6.8s
}

.front-section-range.play #range-color-high-short,
.front-section-range.play #range-color-high-long {
    transition: all 0s 5.2s
}

.front-section-range.play #range-color-high-short {
    opacity: 1;
    visibility: visible
}

.front-section-range.play #range-color-high-long {
    opacity: 0;
    visibility: hidden
}

.front-section-range.play #front-range-b-car-1,
.front-section-range.play #front-range-l-car-1,
.front-section-range.play #front-range-s-car-1 {
    -webkit-transform: translateY(21%);
    transform: translateY(21%);
    -webkit-animation: rangeCarOne 2s 0.4s cubic-bezier(0.3, 0.6, 0.5, 1) forwards;
    animation: rangeCarOne 2s 0.4s cubic-bezier(0.3, 0.6, 0.5, 1) forwards
}

.front-section-range.play #front-range-b-car-2,
.front-section-range.play #front-range-l-car-2,
.front-section-range.play #front-range-s-car-2 {
    -webkit-transform: translateY(19%);
    transform: translateY(19%);
    -webkit-animation: rangeCarTwo 6.5s .7s forwards;
    animation: rangeCarTwo 6.5s .7s forwards
}

.front-section-range.play #front-range-b-car-3,
.front-section-range.play #front-range-l-car-3,
.front-section-range.play #front-range-s-car-3 {
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
    -webkit-animation: rangeCarThree 6.8s .4s forwards;
    animation: rangeCarThree 6.8s .4s forwards
}

.front-section-range.play #front-range-bike-1,
.front-section-range.play #front-range-bike-2,
.front-section-range.play #front-range-bike-3,
.front-section-range.play #front-range-bike-4,
.front-section-range.play #front-range-bike-5 {
    -webkit-animation: rangeBicycle 6.8s .4s forwards;
    animation: rangeBicycle 6.8s .4s forwards
}

@supports (-webkit-clip-path: inset(-1% -1% -1% -1%)) or (clip-path: inset(-1% -1% -1% -1%)) {
    .front-range-graphic-long,
    .front-range-graphic-short {
        opacity: 1;
        -webkit-clip-path: circle(0% at 50% 50%);
        clip-path: circle(0% at 50% 50%)
    }
    .front-section-range.play .front-range-graphic-long {
        -webkit-animation-name: rangeBeamLong;
        animation-name: rangeBeamLong
    }
    .front-section-range.play .front-range-graphic-short {
        -webkit-animation-name: rangeBeamShort;
        animation-name: rangeBeamShort
    }
    .front-section-range.play .front-range-label-base,
    .front-section-range.play .front-range-label-long,
    .front-section-range.play .front-range-label-short {
        max-width: none;
        transition-property: -webkit-clip-path;
        transition-property: clip-path;
        transition-property: clip-path, -webkit-clip-path
    }
}

@supports (color: #000) {
    #front-range-b-car-1,
    #front-range-l-car-1,
    #front-range-s-car-1,
    #front-range-b-car-2,
    #front-range-l-car-2,
    #front-range-s-car-2,
    #front-range-b-car-3,
    #front-range-l-car-3,
    #front-range-s-car-3 {
        display: block
    }
    #front-range-b-car-1-ie,
    #front-range-l-car-1-ie,
    #front-range-s-car-1-ie,
    #front-range-b-car-2-ie,
    #front-range-l-car-2-ie,
    #front-range-s-car-2-ie,
    #front-range-b-car-3-ie,
    #front-range-l-car-3-ie,
    #front-range-s-car-3-ie {
        display: none
    }
}

@-webkit-keyframes rangeBeamLong {
    0% {
        -webkit-clip-path: circle(0% at 50% 50%);
        clip-path: circle(0% at 50% 50%);
        opacity: 1
    }
    12% {
        -webkit-clip-path: circle(46% at 50% 50%);
        clip-path: circle(46% at 50% 50%);
        opacity: 1
    }
    50% {
        opacity: 1
    }
    85% {
        opacity: .4
    }
    100% {
        -webkit-clip-path: circle(46% at 50% 50%);
        clip-path: circle(46% at 50% 50%);
        opacity: .5
    }
}

@keyframes rangeBeamLong {
    0% {
        -webkit-clip-path: circle(0% at 50% 50%);
        clip-path: circle(0% at 50% 50%);
        opacity: 1
    }
    12% {
        -webkit-clip-path: circle(46% at 50% 50%);
        clip-path: circle(46% at 50% 50%);
        opacity: 1
    }
    50% {
        opacity: 1
    }
    85% {
        opacity: .4
    }
    100% {
        -webkit-clip-path: circle(46% at 50% 50%);
        clip-path: circle(46% at 50% 50%);
        opacity: .5
    }
}

@-webkit-keyframes rangeBeamShort {
    0% {
        -webkit-clip-path: circle(0% at 50% 50%);
        clip-path: circle(0% at 50% 50%)
    }
    85% {
        -webkit-clip-path: circle(0% at 50% 50%);
        clip-path: circle(0% at 50% 50%)
    }
    100% {
        -webkit-clip-path: circle(13.5% at 50% 50%);
        clip-path: circle(13.5% at 50% 50%)
    }
}

@keyframes rangeBeamShort {
    0% {
        -webkit-clip-path: circle(0% at 50% 50%);
        clip-path: circle(0% at 50% 50%)
    }
    85% {
        -webkit-clip-path: circle(0% at 50% 50%);
        clip-path: circle(0% at 50% 50%)
    }
    100% {
        -webkit-clip-path: circle(13.5% at 50% 50%);
        clip-path: circle(13.5% at 50% 50%)
    }
}

@-webkit-keyframes rangeBeamLongPolyfill {
    0% {
        opacity: 0
    }
    12% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    85% {
        opacity: .4
    }
    100% {
        opacity: .4
    }
}

@keyframes rangeBeamLongPolyfill {
    0% {
        opacity: 0
    }
    12% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    85% {
        opacity: .4
    }
    100% {
        opacity: .4
    }
}

@-webkit-keyframes rangeBeamShortPolyfill {
    0% {
        opacity: 0
    }
    85% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes rangeBeamShortPolyfill {
    0% {
        opacity: 0
    }
    85% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes rangeCarOne {
    0% {
        -webkit-transform: translateY(21%);
        transform: translateY(21%)
    }
    100% {
        -webkit-transform: translateY(-32%);
        transform: translateY(-32%)
    }
}

@keyframes rangeCarOne {
    0% {
        -webkit-transform: translateY(21%);
        transform: translateY(21%)
    }
    100% {
        -webkit-transform: translateY(-32%);
        transform: translateY(-32%)
    }
}

@-webkit-keyframes rangeCarTwo {
    0% {
        -webkit-transform: translateY(19%);
        transform: translateY(19%)
    }
    28% {
        -webkit-transform: translateY(-8%);
        transform: translateY(-8%)
    }
    75% {
        -webkit-transform: translateY(-8%);
        transform: translateY(-8%)
    }
    100% {
        -webkit-transform: translateY(-24%);
        transform: translateY(-24%)
    }
}

@keyframes rangeCarTwo {
    0% {
        -webkit-transform: translateY(19%);
        transform: translateY(19%)
    }
    28% {
        -webkit-transform: translateY(-8%);
        transform: translateY(-8%)
    }
    75% {
        -webkit-transform: translateY(-8%);
        transform: translateY(-8%)
    }
    100% {
        -webkit-transform: translateY(-24%);
        transform: translateY(-24%)
    }
}

@-webkit-keyframes rangeCarThree {
    0% {
        -webkit-transform: translateY(-25%);
        transform: translateY(-25%)
    }
    28% {
        -webkit-transform: translateY(-3%);
        transform: translateY(-3%)
    }
    75% {
        -webkit-transform: translateY(-3%);
        transform: translateY(-3%)
    }
    100% {
        -webkit-transform: translateY(14%);
        transform: translateY(14%)
    }
}

@keyframes rangeCarThree {
    0% {
        -webkit-transform: translateY(-25%);
        transform: translateY(-25%)
    }
    28% {
        -webkit-transform: translateY(-3%);
        transform: translateY(-3%)
    }
    75% {
        -webkit-transform: translateY(-3%);
        transform: translateY(-3%)
    }
    100% {
        -webkit-transform: translateY(14%);
        transform: translateY(14%)
    }
}

@-webkit-keyframes rangeBicycle {
    0% {
        -webkit-transform: translateX(40%);
        transform: translateX(40%)
    }
    28% {
        -webkit-transform: translateX(13%);
        transform: translateX(13%)
    }
    75% {
        -webkit-transform: translateX(13%);
        transform: translateX(13%)
    }
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

@keyframes rangeBicycle {
    0% {
        -webkit-transform: translateX(40%);
        transform: translateX(40%)
    }
    28% {
        -webkit-transform: translateX(13%);
        transform: translateX(13%)
    }
    75% {
        -webkit-transform: translateX(13%);
        transform: translateX(13%)
    }
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

@media screen and (min-width: 680px) {
    .front-range-content {
        margin-bottom: 2em
    }
}

@media screen and (min-width: 1024px) {
    .front-section-range {
        /* height: 100vh */
    }
    .front-range-inner {
        flex-wrap: nowrap
    }
    .front-range-content {
        margin: 0;
        width: 50%
    }
    .front-range-content .section-subtitle {
        color: #4d8294;
        font-size: 1.125em
    }
    .front-range-content-inner {
        max-width: 440px
    }
    .front-range-labels {
        top: 20%;
        /* left: 20% */
        left: 5%
    }
    .front-range-graphics {
        height: 100%;
        width: 50%;
        max-width: none;
        order: 0
    }
}

.front-security-inner {
    display: flex;
    flex-wrap: wrap
}

.front-security-background {
    position: relative;
    width: 100%;
    order: 1;
    opacity: 0;
    transition: opacity .5s
}

.front-security-background svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.front-security-background svg:nth-child(1) {
    z-index: -1
}

.front-security-background svg:nth-child(2) {
    z-index: 2
}

.front-security-video-wrap {
    /* -webkit-clip-path: circle(100% at 70% 50%);
    clip-path: circle(100% at 70% 50%) */
}

.front-security-video {
    width: 100%
}

.front-security-content {
    width: 100%;
    margin-bottom: 1em
}

.front-security-content-inner-wrap {
    margin: 0 auto;
    max-width: 620px
}

.front-security-background svg text {
    text-transform: uppercase;
    font-family: "Roboto Mono", monospace;
    letter-spacing: 0.04688em
}

#sec-g-1-corners,
#sec-g-2-corners,
#sec-g-3-corners,
#sec-g-4-corners,
#sec-g-5-corners {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    opacity: 0
}

#sec-g-1-corners {
    -webkit-transform-origin: 87% 47.5%;
    transform-origin: 87% 47.5%
}

#sec-g-2-corners {
    -webkit-transform-origin: 64.5% 48%;
    transform-origin: 64.5% 48%
}

#sec-g-3-corners {
    -webkit-transform-origin: 77.5% 69%;
    transform-origin: 77.5% 69%
}

#sec-g-4-corners {
    -webkit-transform-origin: 51.5% 64%;
    transform-origin: 51.5% 64%
}

#sec-g-5-corners {
    -webkit-transform-origin: 37% 85%;
    transform-origin: 37% 85%
}

#sec-suspect-back-1,
#sec-suspect-back-2,
#sec-suspect-back-3,
#sec-suspect-back-4,
#sec-suspect-back-5,
#sec-suspect-front-1,
#sec-suspect-front-2,
#sec-suspect-front-3,
#sec-suspect-front-4,
#sec-suspect-front-5 {
    opacity: 0
}

#sec-g-1 line,
#sec-g-2 line,
#sec-g-3 line,
#sec-g-4 line,
#sec-g-5 line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200
}

#sec-g-1-bg,
#sec-g-2-bg,
#sec-g-3-bg,
#sec-g-4-bg,
#sec-g-5-bg {
    opacity: 0
}

.sec-label {
    opacity: 0;
    -webkit-clip-path: inset(-1% 101% -1% -1%);
    clip-path: inset(-1% 101% -1% -1%)
}

.front-section-security.onview .front-security-background {
    opacity: 1
}

.front-section-security.step-1 .front-security-background::after {
    opacity: .95;
    transition: opacity .5s 2s
}

.front-section-security.step-1 .front-security-video-wrap {
    /* -webkit-clip-path: circle(24% at 70% 50%);
    clip-path: circle(24% at 70% 50%); */
    transition: -webkit-clip-path 1.5s 0s cubic-bezier(0.7, 0, 0.3, 1);
    transition: clip-path 1.5s 0s cubic-bezier(0.7, 0, 0.3, 1);
    transition: clip-path 1.5s 0s cubic-bezier(0.7, 0, 0.3, 1), -webkit-clip-path 1.5s 0s cubic-bezier(0.7, 0, 0.3, 1)
}

.front-section-security.step-1 #sec-g-1-corners,
.front-section-security.step-1 #sec-g-2-corners,
.front-section-security.step-1 #sec-g-3-corners,
.front-section-security.step-1 #sec-g-4-corners,
.front-section-security.step-1 #sec-g-5-corners {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: opacity .5s 1.2s, -webkit-transform .5s 1.2s ease-out;
    transition: opacity .5s 1.2s, transform .5s 1.2s ease-out;
    transition: opacity .5s 1.2s, transform .5s 1.2s ease-out, -webkit-transform .5s 1.2s ease-out
}

.front-section-security.step-1 #sec-g-1 line,
.front-section-security.step-1 #sec-g-2 line,
.front-section-security.step-1 #sec-g-3 line,
.front-section-security.step-1 #sec-g-4 line,
.front-section-security.step-1 #sec-g-5 line {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s 1.4s
}

.front-section-security.step-1 #sec-suspect-back-1,
.front-section-security.step-1 #sec-suspect-back-2,
.front-section-security.step-1 #sec-suspect-back-3,
.front-section-security.step-1 #sec-suspect-back-4,
.front-section-security.step-1 #sec-suspect-back-5,
.front-section-security.step-1 #sec-suspect-front-1,
.front-section-security.step-1 #sec-suspect-front-2,
.front-section-security.step-1 #sec-suspect-front-3,
.front-section-security.step-1 #sec-suspect-front-4,
.front-section-security.step-1 #sec-suspect-front-5 {
    opacity: 1;
    transition: opacity .5s 1.6s
}

.front-section-security.step-1 #sec-g-1-bg,
.front-section-security.step-1 #sec-g-2-bg,
.front-section-security.step-1 #sec-g-3-bg,
.front-section-security.step-1 #sec-g-4-bg,
.front-section-security.step-1 #sec-g-5-bg {
    opacity: 0;
    transition: opacity .5s 1.6s
}

.front-section-security.step-1 .sec-label {
    opacity: 1;
    -webkit-clip-path: inset(-1% -1% -1% -1%);
    clip-path: inset(-1% -1% -1% -1%);
    transition: opacity 0.8s 1.8s cubic-bezier(0.6, 0, 0.4, 1)
}

@supports (-webkit-clip-path: inset(-1% -1% -1% -1%)) or (clip-path: inset(-1% -1% -1% -1%)) {
    .sec-label {
        opacity: 1
    }
    .front-section-security.step-1 .front-security-background::after {
        opacity: .7
    }
    .front-section-security.step-1 .sec-label {
        -webkit-clip-path: inset(-1% -1% -1% -1%);
        clip-path: inset(-1% -1% -1% -1%);
        transition-property: -webkit-clip-path;
        transition-property: clip-path;
        transition-property: clip-path, -webkit-clip-path
    }
}

@media screen and (min-width: 680px) {
    .front-security-content {
        margin: 1em 0 2em 0
    }
}

@media screen and (min-width: 1024px) {
    .front-section-security {
        height: 100vh;
        height: 56.25vw;
        opacity: 0;
        transition: opacity .5s
    }
    .front-section-security.onview {
        opacity: 1
    }
    .front-section-security.onview .anim-section-title,
    .front-section-security.onview .anim-section-subtitle,
    .front-section-security.onview .anim-section-btn {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    .front-section-security.step-1 .anim-section-title,
    .front-section-security.step-1 .anim-section-subtitle,
    .front-section-security.step-1 .anim-section-btn {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    .front-section-security.step-1 .front-security-title {
        transition-delay: 2.2s
    }
    .front-section-security.step-1 .front-security-subtitle {
        transition-delay: 2.3s
    }
    .front-section-security.step-1 .front-security-btn {
        transition-delay: 2.4s
    }
    .front-security-inner {
        height: 100vh;
        height: 56.25vw;
        overflow: hidden
    }
    .front-security-background {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        padding-top: 56.25%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }
    .front-security-background::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        bottom: 0;
        background: red;
        background: linear-gradient(90deg, white 50%, rgba(255, 255, 255, 0) 100%);
        opacity: 0
    }
    @supports (-webkit-clip-path: inset(-1% -1% -1% -1%)) or (clip-path: inset(-1% -1% -1% -1%)) {
        .front-security-background::after {
            width: 60%;
            background: linear-gradient(90deg, white 20%, rgba(255, 255, 255, 0) 100%)
        }
    }
    .front-security-video-wrap {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0
    }
    .front-security-background {
        opacity: 1
    }
    .front-security-background svg,
    .front-security-video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }
    .front-security-video {
        width: 100%
    }
    .front-security-content-inner-wrap {
        max-width: 440px
    }
    .front-security-content {
        position: absolute;
        display: flex;
        align-items: center;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0
    }
    .front-security-content-inner {
        width: 50%
    }
    .front-security-content-inner .section-subtitle {
        font-size: 1.125em;
        color: #4d8294
    }
    .front-security-content-inner-wrap {
        padding-right: 2em
    }
}

@media screen and (min-width: 1200px) {
    .front-security-content-inner-wrap {
        padding-right: 0
    }
}

@media screen and (min-width: 1024px) and (max-aspect-ratio: 16 / 9) {
    .front-security-background {
        height: 100%;
        padding-top: 0
    }
    .front-security-background svg,
    .front-security-video {
        width: auto;
        height: 100%
    }
}