/* Copyright © Chennan All rights reserved.
 * This source code is Written by Chennan in CE·Chengdu.
 * You can use it with permission from the author. */
.saf-cn-fullpage>.swiper-container
{
    width: 100%;
    height: 89vh;
    max-height: 1440px;
}
.saf-cn-fullpage>.swiper-container>.swiper-wrapper
{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.saf-cn-fullpage>.swiper-container>.swiper-wrapper>.swiper-slide
{
    background: #fff;
    position: relative;
    align-items: center;
    overflow: hidden;
    transform: translate(0,-10px) scale(.9);
    transition: all .5s;
    z-index: 1;
}
.saf-cn-fullpage>.swiper-container>.swiper-wrapper>.swiper-slide.swiper-slide-active
{
    transform: translate(0,0) scale(1);
    z-index: 3;
}
.saf-cn-fullpage>.swiper-container>.swiper-wrapper>.swiper-slide>div
{
    position: relative;
    z-index: 4;
}
.saf-cn-fullpage>.swiper-container>.swiper-wrapper>.swiper-slide:before
{
    transform: scale(1.3);
    transition: all 10s;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}
.saf-cn-fullpage>.swiper-container>.swiper-wrapper>.swiper-slide.swiper-slide-active:before
{
    transform: scale(1);
}
.cn_pagination
{
    position: fixed;
    right: 15px;
    top: 50%;
    z-index: 99;
    counter-reset: saf-cn-figure;
}
.cn_pagination span
{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 5px;
    background: #000;
    opacity: .4;
    transition: all .8s;
    margin: 10px 0;
    position: relative;
}
.cn_pagination span.swiper-pagination-bullet-active
{
    height: 30px;
    background: linear-gradient(to bottom,#69af33,#218ccc);
    opacity: 1;
}/*翻屏组件自动编号*/
.cn_pagination span:before
{
    counter-increment: saf-cn-figure;
    content: counter(saf-cn-figure,decimal-leading-zero);
    color: #218ccc;
    opacity: 0;
    font-size: 12px;
    position: absolute;
    right: 15px;
    top: 100%;
    transform: translate(0,-50%);
    transition: all .8s;
    width: max-content;
    display: none;
}
.cn_pagination span.swiper-pagination-bullet-active:before
{
    opacity: .8;
    top: 50%;
}/* 
* 此为翻屏组件动效样式库，里面含有一些常见的动画效果，
* 引用对应class类名即可实现翻屏页面元素的动画效果。
*/
.saf-ltr
{
    animation: fadeOutLeft 1s 1s both;
}
.swiper-slide-active .saf-ltr
{
    animation: fadeInLeft 1s 1s both;
}
.saf-rtl
{
    animation: fadeOutRight 1s 1s both;
}
.swiper-slide-active .saf-rtl
{
    animation: fadeInRight 1s 1s both;
}
.saf-ttd
{
    animation: fadeOutDown 1s 1s both;
}
.swiper-slide-active .saf-ttd
{
    animation: fadeInUp 1s 1s both;
}
.swiper-slide-active .saf-d-1
{
    animation-delay: 1.1s;
}
.swiper-slide-active .saf-d-2
{
    animation-delay: 1.2s;
}
.swiper-slide-active .saf-d-3
{
    animation-delay: 1.3s;
}
.swiper-slide-active .saf-d-4
{
    animation-delay: 1.4s;
}
.swiper-slide-active .saf-d-5
{
    animation-delay: 1.5s;
}
.swiper-slide-active .saf-d-6
{
    animation-delay: 1.6s;
}
.swiper-slide-active .saf-d-7
{
    animation-delay: 1.7s;
}
.swiper-slide-active .saf-d-8
{
    animation-delay: 1.8s;
}
.swiper-slide-active .saf-d-9
{
    animation-delay: 1.9s;
}
.swiper-slide-active .saf-d-10
{
    animation-delay: 2s;
}
.swiper-slide-active .saf-d-11
{
    animation-delay: 2.1s;
}
.swiper-slide-active .saf-d-12
{
    animation-delay: 2.2s;
}
.swiper-slide-active .saf-d-13
{
    animation-delay: 2.3s;
}
.swiper-slide-active .saf-d-14
{
    animation-delay: 2.4s;
}
.swiper-slide-active .saf-d-15
{
    animation-delay: 2.5s;
}
.cn-make .saf-ani
{
    animation: none!important;
}
@media(max-width: 798px)
{
    .saf-ani
    {
        animation: none!important;
    }
}