@charset "UTF-8";

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.enabled {
    display: block;
}

.disabled {
    display: none;
}

.aniclr {
    -webkit-transform:none;
    transform:none;
}

#slider {
    width:916px;
    height: 317px;
    margin: 10px auto 0 auto;
    overflow: hidden;
}

.leftcase {
    width:536px;
}

.rightcase {
    float: right;
}

.slide-item {
    overflow: hidden;
    box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
    border:1px solid #3C261A;
}

.slide-item img {
    width: 170px;
}

.layer1 {
    width:536px;
    height:315px;
    margin: 0 20px 0 0;
    z-index: 1;
}

.layer1 img {
    -webkit-transform: scale(3.152941176, 2.1);
    transform: scale(3.152941176, 2.1);
    transform-origin: top left;
}

.rightcase div {
    width: 170px;
    height: 150px;
    float:left;
    text-align: center;
}

.layer5 {
    margin:0 15px 15px 0;
}

.layer4 {
    margin:0 0 15px 0;
}

.layer2 {
    clear: left;
    float: left;
    margin: 0 15px 0 0;
    overflow: hidden;
    z-index: 20;
}

.layer2 .slide-item {
    border:0.5px solid #3C261A !important;
}

@keyframes phase2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(-563px, -167px, 0) scale(3.152941176, 2.1);
        transform: translate3d(-563px, -167px, 0) scale(3.152941176, 2.1);
    }
}

.phase2 {
    -webkit-animation-name: phase2;
    animation-name: phase2;
    transform-origin: top left;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

@keyframes phase3 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(-187px, 0, 0);
        transform: translate3d(-187px, 0, 0);
    }
}

.phase3 {
    -webkit-animation-name: phase3;
    animation-name: phase3;
    transform-origin: top left;
    -webkit-animation-delay: 4.2s;
    animation-delay: 4.2s;
}

@keyframes phase4 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 167px, 0);
        transform: translate3d(0, 167px, 0);
    }
}

.phase4 {
    -webkit-animation-name: phase4;
    animation-name: phase4;
    transform-origin: top left;
    -webkit-animation-delay: 4.3s;
    animation-delay: 4.3s;
}

@keyframes phase5 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(187px, 0, 0);
        transform: translate3d(187px, 0, 0);
    }
}

.phase5 {
    -webkit-animation-name: phase5;
    animation-name: phase5;
    transform-origin: top left;
    -webkit-animation-delay: 4.4s;
    animation-delay: 4.4s;
}

@keyframes phase1 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(558px, 1px, 0) scale(.317164179, .476190476);
        transform: translate3d(558px, 1px, 0) scale(.317164179, .476190476);
    }
}

.phase1 {
    -webkit-animation-name: phase1;
    animation-name: phase1;
    transform-origin: top left;
    -webkit-animation-delay: 4.7s;
    animation-delay: 4.7s;
}