﻿/*背景*/
.slideshow {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}

.slideshow-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background: no-repeat 50% 50%;
    background-size: cover;
    -webkit-animation-name: kenburns;
    animation-name: kenburns;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 28s;
    animation-duration: 28s;
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

    .slideshow-image:nth-child(1) {
        -webkit-animation-name: kenburns-1;
        animation-name: kenburns-1;
        z-index: 3;
    }

    .slideshow-image:nth-child(2) {
        -webkit-animation-name: kenburns-2;
        animation-name: kenburns-2;
        z-index: 2;
    }

    .slideshow-image:nth-child(3) {
        -webkit-animation-name: kenburns-3;
        animation-name: kenburns-3;
        z-index: 1;
    }

    .slideshow-image:nth-child(4) {
        -webkit-animation-name: kenburns-4;
        animation-name: kenburns-4;
        z-index: 0;
    }

@-webkit-keyframes kenburns-1 {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    1.5625% {
        opacity: 1;
    }

    23.4375% {
        opacity: 1;
    }

    26.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    98.4375% {
        opacity: 0;
        -webkit-transform: scale(1.21176);
        transform: scale(1.21176);
    }

    100% {
        opacity: 1;
    }
}

@keyframes kenburns-1 {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    1.5625% {
        opacity: 1;
    }

    23.4375% {
        opacity: 1;
    }

    26.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    98.4375% {
        opacity: 0;
        -webkit-transform: scale(1.21176);
        transform: scale(1.21176);
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes kenburns-2 {
    23.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    26.5625% {
        opacity: 1;
    }

    48.4375% {
        opacity: 1;
    }

    51.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes kenburns-2 {
    23.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    26.5625% {
        opacity: 1;
    }

    48.4375% {
        opacity: 1;
    }

    51.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@-webkit-keyframes kenburns-3 {
    48.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    51.5625% {
        opacity: 1;
    }

    73.4375% {
        opacity: 1;
    }

    76.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes kenburns-3 {
    48.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    51.5625% {
        opacity: 1;
    }

    73.4375% {
        opacity: 1;
    }

    76.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@-webkit-keyframes kenburns-4 {
    73.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    76.5625% {
        opacity: 1;
    }

    98.4375% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes kenburns-4 {
    73.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    76.5625% {
        opacity: 1;
    }

    98.4375% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.IE_style > .slideshow-image:nth-child(1) {
    -webkit-animation-name: bgimg-1;
    animation-name: bgimg-1;
}

.IE_style > .slideshow-image:nth-child(2) {
    -webkit-animation-name: bgimg-2;
    animation-name: bgimg-2;
}

.IE_style > .slideshow-image:nth-child(3) {
    -webkit-animation-name: bgimg-3;
    animation-name: bgimg-3;
}

.IE_style > .slideshow-image:nth-child(4) {
    -webkit-animation-name: bgimg-4;
    animation-name: bgimg-4;
}

.IE_style > .slideshow-image:nth-child(5) {
    -webkit-animation-name: bgimg-5;
    animation-name: bgimg-5;
}

@-webkit-keyframes bgimg-1 {
    0% {
        opacity: 1;
    }

    23% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    98% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bgimg-1 {
    0% {
        opacity: 1;
    }

    23% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    98% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes bgimg-2 {
    0% {
        opacity: 0;
    }

    23% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    48% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes bgimg-2 {
    0% {
        opacity: 0;
    }

    23% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    48% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes bgimg-3 {
    0% {
        opacity: 0;
    }

    48% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    73% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes bgimg-3 {
    0% {
        opacity: 0;
    }

    48% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    73% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes bgimg-4 {
    0% {
        opacity: 0;
    }

    73% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    98% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes bgimg-4 {
    0% {
        opacity: 0;
    }

    73% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    98% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
