.ct--slider {
    .item--image {
        position: relative;
        overflow: hidden;
    }
    .image-animation-zoom {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .slick-slide.slick-active .image-animation-zoom { 
        animation: slider-image-zoom 9200ms ease-out;
        -webkit-animation: slider-image-zoom 9200ms ease-out;
    }
    .item--title {
        cite {
            color: $primary_color;
            font-style: normal;
        }
    }
    .ct-slider-time1 {
        animation-delay: 100ms;
    }
    .ct-slider-time2 {
        animation-delay: 200ms;
    }
    .ct-slider-time3 {
        animation-delay: 300ms;
    }
    .ct-slider-time4 {
        animation-delay: 400ms;
    }
    .ct-slider-time5 {
        animation-delay: 500ms;
    }
    .ct-slider-time6 {
        animation-delay: 600ms;
    }
    .ct-slider-time7 {
        animation-delay: 700ms;
    }
    .ct-slider-time8 {
        animation-delay: 800ms;
    }
    .ct-slider-time9 {
        animation-delay: 900ms;
    }
    .ct-slider-time10 {
        animation-delay: 1000ms;
    }
    .slick-slide.slick-active .ct-slider-fadeInRight {
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight;
      animation-duration: 1.2s;
    }
    .slick-slide.slick-active .ct-slider-fadeInUp {
      -webkit-animation-name: fadeInUp;
      animation-name: fadeInUp;
      animation-duration: 1.2s;
    }
}
.ct--slider1 {
    max-width: 1660px;
    margin: auto;
    padding: 0 0 0 15px;
    @media #{$max-xs} {
        padding: 0;
    }
    .item--meta {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 95px 30px 95px 0;
        position: relative;
        @media #{$max-xs} {
            padding: 60px 15px 90px;
            display: block;
        }
        &.img-active {
            width: 35%;
            @media #{$max-lg} {
                width: 50%;
            }
            @media #{$max-xs} {
                width: 100%;
            }
        }
    }
    .item--meta-inner {
        overflow: hidden;
    }
    .item--image {
        width: 65%;
        @media #{$max-lg} {
            width: 50%;
        }
        @media #{$max-xs} {
            width: 100%;
            min-height: 320px;
            .bg-image {
                min-height: 320px;
            }
        }
    }
    .item--title {
        font-size: 72px;
        line-height: 1;
        color: #000000;
        margin-bottom: 30px;
        @media #{$max-xxl}{
            font-size: 60px;
        }
        @media #{$max-lg} {
            font-size: 48px;
        }
        @media #{$max-sm} {
            font-size: 36px;
        }
    }
    .item--desc {
        font-size: 18px;
        line-height: 1.555555;
        color: #484848;
        margin-bottom: 33px;
        max-width: 480px;
    }
    .item--button {
        a {
            font-size: 16px;
            background-image: none;
            background-color: #000;
            @include box-shadow(none);
            @include border-radius(0px);
            padding: 0 40px;
            line-height: 50px;
            text-transform: uppercase;
            &:hover, &:focus {
                background-color: $primary_color;
            }
        }
    }
    .item--textoutline {
        margin-top: 14px;
        font-size: 130px;
        position: absolute;
        top: 0;
        right: -50%;
        font-weight: 700;
        z-index: 99;
        color: #fff;
        line-height: 1;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: $primary_color;
        -ms-text-stroke-color: $primary_color;
        -o-text-stroke-color: $primary_color;
        @media #{$max-xxl} {
            font-size: 110px;
        }
        @media #{$max-lg} {
            font-size: 80px;
            margin-top: 42px;
        }
        @media #{$max-xs} {
            position: static;
            font-size: 48px;
            margin-bottom: 22px;
        }
    }
    .ct-nav-carousel {
        position: absolute;
        top: 180px;
        right: -83px;
        @media #{$max-lg} {
            right: -67px;
        }
        @media #{$max-xs} {
            position: static;
            margin-top: 45px;
        }
        > div {
            border: none;
            width: 66px;
            height: 66px;
            min-width: 66px;
            background-color: $primary_color;
            overflow: hidden;
            @media #{$max-lg} {
                width: 50px;
                height: 50px;
                min-width: 50px;
            }
            i {
                font-size: 22px;
                color: #fff;
                @media #{$max-lg} {
                    font-size: 18px;
                }
            }
            &.nav-prev {
                i {
                    transform: translate(-50%, -50%) scaleX(-1);
                }
            }
            &.nav-next {
                @media #{$min-sm} {
                    background-color: #fff !important;
                }
                margin-left: 35px;
                @media #{$min-sm} {
                    i {
                        color: #000;
                    }
                }
            }
        }
    }
    .item--inner {
        min-height: 712px;
        display: flex;
        flex-wrap: wrap;
    }
    @media #{$min-sl} {
        .ct-carousel-inner {
            width: calc(100% + 190px);
        }
    }
}
.ct--slider-wrap1 {
    position: relative;
    .ct--slider-number {
        position: absolute;
        top: 50%;
        left: 0;
        @include transform(translate(0, -50%));
        .slick-slide {
            min-height: 100px;
        }
        @media #{$max-xxl2} {
            display: none;
        }
    }
    .count-number {
        line-height: 1;
        font-size: 14px;
        color: #666;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        width: 60px;
        justify-content: center;
        transform: rotate(-90deg);
        margin-top: 30px;
        span {
            font-size: 24px;
            color: #000;
            font-weight: 700;
            position: relative;
            top: 2px;
        }
    }
}

.ct--slider2 {
    max-width: 1920px;
    padding-right: 142px;
    margin: auto;
    position: relative;
    z-index: 88;
    @media #{$max-xl} {
        padding-right: 80px;
    }
    @media #{$max-sm} {
        padding-right: 0;
    }
    &:after {
        content: '';
        width: 212px;
        height: 211px;
        background-image: url(../images/bg-dots1.png);
        position: absolute;
        bottom: -70px;
        right: 72px;
        z-index: -1;
    }
    .item--meta {
        position: absolute;
        top: 50%;
        left: 0;
        z-index: 99;
        transform: translate(0, -50%);
        max-width: 765px;
        width: 100%;
        background-color: #171fac;
        padding: 107px 40px 120px 140px;
        overflow: hidden;
        @media #{$max-xl} {
            padding-left: 60px;
            padding-right: 60px;
            max-width: 640px;
        }
        @media #{$max-lg} {
            max-width: 480px;
            padding: 95px 20px 100px 30px;
        }
        @media #{$max-sm} {
            max-width: 100%;
            position: static;
            transform: translate(0, 0%);
            padding-left: 15px;
        }
        .item--meta-inner {
            position: relative;
            z-index: 101;
        }
    }
    .item--image {
        width: 100%;
        margin-left: 464px;
        overflow: visible;
        @media #{$max-lg} {
            margin-left: 120px;
        }
        @media #{$max-sm} {
            margin-left: 0;
            min-height: 400px;
        }
        .item--image-inner {
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        &:before {
            content: '';
            width: 192px;
            height: 192px;
            position: absolute;
            top: -35px;
            left: -35px;
            background-color: #101276;
            z-index: -1;
            @media #{$max-sm} {
                display: none;
            }
        }
    }
    .item--title {
        font-size: 72px;
        line-height: 1;
        color: #ffffff;
        margin-bottom: 27px;
        @media #{$max-xl} {
            font-size: 68px;
        }
        @media #{$max-lg} {
            font-size: 48px;
        }
        @media #{$max-sm} {
            font-size: 36px;
        }
    }
    .item--desc {
        font-size: 18px;
        color: #ffffff;
        line-height: 1.55555;
        max-width: 440px;
        margin-bottom: 40px;
        @media #{$max-sm} {
            font-size: 17px;
        }
    }
    .item--button a {
        box-shadow: none;
        line-height: 55px;
        font-size: 15px;
        background: $primary_color;
        &:hover, &:focus {
            background: $primary_color;
        }
    }
    .item--textoutline {
        font-size: 212px;
        position: absolute;
        bottom: -24px;
        left: -24px;
        @media #{$max-xl} {
            font-size: 180px;
        }
    }
    .item--inner {
        min-height: 800px;
        display: flex;
        flex-wrap: wrap;
        margin-top: 35px;
        @media #{$max-sm} {
            margin-top: 0;
        }
    }
    .ct-carousel-inner {
        margin: 0;
        .slick-slide {
            padding: 0;
        }
    }
}

.ct--slider-wrap2 {
    position: relative;
    .ct--slider-number {
        position: absolute;
        top: 50%;
        right: 51px;
        font-size: 22px;
        color: #0e0e0e;
        font-weight: 700;
        font-family: 'Barlow', sans-serif;
        width: 40px;
        text-align: center;
        margin-top: 40px;
        @media #{$max-xl} {
            right: 20px;
        }
        @media #{$max-sm} {
            display: none;
        }
        .count-number {
            position: relative;
            width: 40px;
            height: 166px;
            &:before {
                content: '';
                width: 1px;
                height: 70px;
                position: absolute;
                top: 50%;
                left: 50%;
                @include transform(translate(-50%, -50%));
                background-color: #000;
            }
            span {
                width: 40px;
                height: 40px;
                position: absolute;
                line-height: 40px;
                left: 0;
                &:nth-child(1) {
                    top: 0;
                }
                &:nth-child(2) {
                    bottom: 0;
                }
            }
        }
    }
    .ct-nav-carousel {
        position: absolute;
        top: 50%;
        @include transform(translate(0, -50%));
        right: 55px;
        z-index: 102;
        width: 32px;
        margin-top: -120px;
        @media #{$max-xl} {
            right: 24px;
        }
        @media #{$max-sm} {
            margin-top: 0;
            top: auto;
            bottom: 0;
            transform: translate(0,0);
            right: 0;
            width: 50px;
        }
        .nav-prev, .nav-next {
            border: none;
            width: 32px;
            min-width: 32px;
            height: 32px;
            line-height: 32px;
            margin: 0;
            background: none;
            svg {
                height: 24px;
                width: 24px;
                position: absolute;
                top: 50%;
                left: 50%;
                @include transform(translate(-50%, -50%));
            }
            &:hover i {
                color: $primary_color;
            }
            @media #{$max-sm} {
                background-color: #fff;
                @include border-radius(0px);
                width: 50px;
                height: 50px;
                line-height: 50px;
                min-width: 50px;
                margin: 0 !important;
            }
        }
        .nav-prev svg {
            @include transform(translate(-50%, -50%) rotate(-180deg));
        }
        .nav-next {
            margin-top: 40px;
        }
    }
}