.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;
}
}
} |