﻿
body {
    background: url('../../Images/brands/culture/culture-bg.jpg')no-repeat center;
    background-size:cover;
    background-attachment:fixed;
}
.banner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100vh;
}
.banner-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width:105%;
    position:absolute !important;
    top:0;
    left:-2.5% !important;
    height:100%;
}
.banner img{
    width:30%;
    margin-top:6em;
    position:relative !important
}
.cu-desc {
    padding: 10rem 0;
    font-size: 1.25rem;
    line-height: 1.75;
    text-align: center;
    color: #fff;
	background:#000000;
}
.cu-content{
    display:flex;
    justify-content:space-between;
}
.cu-image{
    width:61.5%;
}
.cu-image .swiper-slide{
    overflow: hidden;

}
.cu-image .slide-inner{
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    height:100%;
    /*transform: scale(0.9);
    transition:all 500ms ease 1s*/
}
/*.cu-image .swiper-slide-active{
    transform:scale(1) !important
}*/
.cu-text{
    width:38.5%;
}
.cu-text .swiper-slide{
    background:#282828;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: space-around;
    color: #fff;
    padding: 40% 0;
}
/*.leave-active {
    transition: opacity .5s cubic-bezier(.17,.17,.83,.83) .16s,-webkit-transform .66s cubic-bezier(.4,0,.2,1);
    transition: transform .66s cubic-bezier(.4,0,.2,1),opacity .5s cubic-bezier(.17,.17,.83,.83) .16s;
    transition: transform .66s cubic-bezier(.4,0,.2,1),opacity .5s cubic-bezier(.17,.17,.83,.83) .16s,-webkit-transform .66s cubic-bezier(.4,0,.2,1)
}
.enter-active {
    transition: opacity .36s cubic-bezier(.17,.17,.83,.83),-webkit-transform .58s cubic-bezier(.6,0,.4,1);
    transition: transform .58s cubic-bezier(.6,0,.4,1),opacity .36s cubic-bezier(.17,.17,.83,.83);
    transition: transform .58s cubic-bezier(.6,0,.4,1),opacity .36s cubic-bezier(.17,.17,.83,.83),-webkit-transform .58s cubic-bezier(.6,0,.4,1)
}
.item-title.leave-active {
    transition-delay: 66ms,66ms !important
}
.item-desc.leave-active {
    transition-delay: .132s,.132s !important 
}
.item-desc-s.leave-active {
    transition-delay: .198s,.198s !important
}
.item-data.leave-active {
    transition-delay: .264s,.264s !important
}
.item-title.enter-active {
    transition-delay: .264s,.264s !important 
}

.item-desc.enter-active {
    transition-delay: .198s,.198s !important 
}

.item-desc-s.enter-active {
    transition-delay: .132s,.132s !important
}

.item-data.enter-active {
    transition-delay: 66ms,66ms !important
}
.cu-text .swiper-slide > * {
    opacity: 0;
    -webkit-transform: translateY(16vh) translateZ(0);
    transform: translateY(16vh) translateZ(0)
}
.cu-text .swiper-slide .enter-to {
    opacity: 0;
    -webkit-transform: translateY(-16vh) translateZ(0);
    transform: translateY(-16vh) translateZ(0)
}
.cu-text .swiper-slide .leave-to {
    opacity: 0;
    -webkit-transform: translateY(16vh) translateZ(0);
    transform: translateY(16vh) translateZ(0)
}*/
.item-title {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}
.item-desc{
    font-size:1.5rem;
    text-align:center;
}
.item-desc-s{
    font-size:1.25rem;
    margin:3rem 0;
    text-align:center
}
.border-text{padding:.5rem 2rem;margin-bottom:.5rem;border:1px solid #fff;display:inline-block;border-radius:5px;letter-spacing:5px;}
.item-data {
    font-size: 1rem;
    text-align: center;
    line-height: 1.75;
    color:#616161
}
.ui-loop {
    position: absolute;
    right: 50%;
    transform:translateX(50%);
    bottom: 8.5%;
    z-index: 10;
}
.path-loop-bg {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 3px;
    opacity:0.3
}
.path-loop{
    fill:none;
    stroke:#fff;
    stroke-miterlimit:10;
    stroke-width:3px
}
.swiper-pagination {
    color: #fff;
    width: auto;
    left: 50%;
    top: 90%;
    transform:translateX(-50%)
}
.swiper-pagination ul li {
    position: absolute;
    left: 0;
    top: 0;
}
.swiper-pagination .total {
    margin-left:150px;
}
.swiper-button-next, .swiper-button-prev {
    top: 90%;
    width: 20px;
    height: 30px;
    margin-top: -10px;
    background-size: 20px 30px;
    opacity:.5
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
    right:15%
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
    left:15%
}
