@keyframes warn {}
.mask-white {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .2);
    content: '';
    -webkit-transition: -webkit-transform .6s;


    transition: transform .6s;
    -webkit-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
    transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0)
}


.index-about .right:hover .mask-white,
.caseList li:hover .mask-white {
    -webkit-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
    transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0)
}


@keyframes preloader {

    0% {


        left: 0%;


    }


    25% {


        left: 25%
    }


    50% {


        left: 50%
    }


    75% {


        left: 75%
    }


    100% {


        left: 100%;


    }





}





.cd-transition-layer {


    position: fixed;


    top: 0;


    left: 0;


    z-index: 2;


    height: 100%;


    width: 100%;


    opacity: 0;


    visibility: visible;


    overflow: hidden;


    pointer-events: none;


}





.cd-transition-layer .bg-layer {


    position: absolute;


    left: 50%;


    top: 50%;


    -webkit-transform: translateY(-50%) translateX(-2%);


    -moz-transform: translateY(-50%) translateX(-2%);


    -ms-transform: translateY(-50%) translateX(-2%);


    -o-transform: translateY(-50%) translateX(-2%);


    transform: translateY(-50%) translateX(-2%);


    height: 100%;


    width: 2500%;


    background: url(../images/ink.png) no-repeat 0 0;


    background-size: 100% 100%;


}





.cd-transition-layer.visible {


    opacity: 1;


    visibility: visible;


}





.cd-transition-layer.opening .bg-layer {


    -webkit-animation: cd-sequence 1.0s steps(24);


    -moz-animation: cd-sequence 1.0s steps(24);


    animation: cd-sequence 1.0s steps(24);


    -webkit-animation-fill-mode: forwards;


    -moz-animation-fill-mode: forwards;


    animation-fill-mode: forwards;


}





.cd-transition-layer.closing .bg-layer {


    -webkit-animation: cd-sequence-reverse 1.0s steps(24);


    -moz-animation: cd-sequence-reverse 1.0s steps(24);


    animation: cd-sequence-reverse 1.0s steps(24);


    -webkit-animation-fill-mode: forwards;


    -moz-animation-fill-mode: forwards;


    animation-fill-mode: forwards;


}





.no-cssanimations .cd-transition-layer {


    display: none;


}





@-webkit-keyframes cd-sequence {


    0% {


        -webkit-transform: translateY(-50%) translateX(-2%);


    }


    100% {


        -webkit-transform: translateY(-50%) translateX(-98%);


    }


}





@-moz-keyframes cd-sequence {


    0% {


        -moz-transform: translateY(-50%) translateX(-2%);


    }


    100% {


        -moz-transform: translateY(-50%) translateX(-98%);


    }


}





@keyframes cd-sequence {


    0% {


        -webkit-transform: translateY(-50%) translateX(-2%);


        -moz-transform: translateY(-50%) translateX(-2%);


        -ms-transform: translateY(-50%) translateX(-2%);


        -o-transform: translateY(-50%) translateX(-2%);


        transform: translateY(-50%) translateX(-2%);


    }


    100% {


        -webkit-transform: translateY(-50%) translateX(-98%);


        -moz-transform: translateY(-50%) translateX(-98%);


        -ms-transform: translateY(-50%) translateX(-98%);


        -o-transform: translateY(-50%) translateX(-98%);


        transform: translateY(-50%) translateX(-98%);


    }


}





@-webkit-keyframes cd-sequence-reverse {


    0% {


        -webkit-transform: translateY(-50%) translateX(-98%);


    }


    100% {


        -webkit-transform: translateY(-50%) translateX(-2%);


    }


}





@-moz-keyframes cd-sequence-reverse {


    0% {


        -moz-transform: translateY(-50%) translateX(-98%);


    }


    100% {


        -moz-transform: translateY(-50%) translateX(-2%);


    }


}





@keyframes cd-sequence-reverse {


    0% {


        -webkit-transform: translateY(-50%) translateX(-98%);


        -moz-transform: translateY(-50%) translateX(-98%);


        -ms-transform: translateY(-50%) translateX(-98%);


        -o-transform: translateY(-50%) translateX(-98%);


        transform: translateY(-50%) translateX(-98%);


    }


    100% {


        -webkit-transform: translateY(-50%) translateX(-2%);


        -moz-transform: translateY(-50%) translateX(-2%);


        -ms-transform: translateY(-50%) translateX(-2%);


        -o-transform: translateY(-50%) translateX(-2%);


        transform: translateY(-50%) translateX(-2%);


    }


}











@keyframes serv_one_border {


    0% {


        opacity: 0
    }





    5% {


        opacity: 1
    }





    80% {


        opacity: 0
    }





    100% {


        opacity: 0;


        transform: scale(1.5);


        -ms-transform: scale(1.5);


        -o-transform: scale(1.5);


        -webkit-transform: scale(1.5);


        -moz-transform: scale(1.5)
    }


}





@keyframes scaleIn {





    from {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }





    to {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }





}





@keyframes jello {





    from,


    11.1%,


    to {


        -webkit-transform: none;


        -moz-transform: none;


        transform: none
    }





    22.2% {


        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);


        -moz-transform: skewX(-12.5deg) skewY(-12.5deg);


        transform: skewX(-12.5deg) skewY(-12.5deg)
    }





    33.3% {


        -webkit-transform: skewX(6.25deg) skewY(6.25deg);


        -moz-transform: skewX(6.25deg) skewY(6.25deg);


        transform: skewX(6.25deg) skewY(6.25deg)
    }





    44.4% {


        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);


        -moz-transform: skewX(-3.125deg) skewY(-3.125deg);


        transform: skewX(-3.125deg) skewY(-3.125deg)
    }





    55.5% {


        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);


        -moz-transform: skewX(1.5625deg) skewY(1.5625deg);


        transform: skewX(1.5625deg) skewY(1.5625deg)
    }





    66.6% {


        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);


        -moz-transform: skewX(-.78125deg) skewY(-.78125deg);


        transform: skewX(-.78125deg) skewY(-.78125deg)
    }





    77.7% {


        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);


        -moz-transform: skewX(0.390625deg) skewY(0.390625deg);


        transform: skewX(0.390625deg) skewY(0.390625deg)
    }





    88.8% {


        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);


        -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg);


        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }





}





@keyframes rotate {


    from {
        transform: rotate(0);
    }


    to {
        transform: rotate(1turn);
    }


}