/*svg*/
.scene {
    position: fixed;left:33%;top:29%;
    -webkit-perspective: 600px;
    perspective: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.scene svg {
    width: 240px;
    height: 240px;
}

.dc-logo {
    position: fixed;
    right: 10px;
    bottom: 10px;
}

.dc-logo:hover svg {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: arrow-spin 2.5s 0s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: arrow-spin 2.5s 0s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
.dc-logo:hover:hover:before {
    content: '\2764';
    padding: 6px;
    font: 10px/1 Monaco, sans-serif;
    font-size: 10px;
    color: #00fffe;
    text-transform: uppercase;
    position: absolute;
    left: -70px;
    top: -30px;
    white-space: nowrap;
    z-index: 20;
    box-shadow: 0px 0px 4px #222;
    background: rgba(0, 0, 0, 0.4);
}
.dc-logo:hover:hover:after {
    content: 'Digital Craft';
    padding: 6px;
    font: 10px/1 Monaco, sans-serif;
    font-size: 10px;
    color: #6E6F71;
    text-transform: uppercase;
    position: absolute;
    right: 0;
    top: -30px;
    white-space: nowrap;
    z-index: 20;
    box-shadow: 0px 0px 4px #222;
    background: rgba(0, 0, 0, 0.4);
    background-image: none;
}

@-webkit-keyframes arrow-spin {
    50% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

@keyframes arrow-spin {
    50% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}



/*从左到右 从右到左*/
.jianchu_fanhui{
    -webkit-animation: jianchu_fanhui 8s linear infinite;
}
@keyframes jianchu_fanhui {
    0%{
        background-position:left;
        left: 0px;
        opacity: 1;
        width:0px;
    }
    50%{
        background-position:left;
        left: 0px;
        right: 0px;
        opacity: 1;
        width: 750px;
    }
    51%{
        background-position:right;
        right: 0px;
        left: auto;
        opacity: 1;
        width: 750px;
    }

    100%{
        background-position:right;
        right: 0px;
        left: auto;
        opacity: 1;
        width: 0px;
    }
}
@keyframes biganniu {
    0%{
        opacity:0;
        transform: scale(0.7,0.7);
    }
    25%{
        opacity:1 ;
    }
    50%{
        opacity:1 ;
        transform: scale(1,1);
    }
    75%{
        opacity:1 ;
    }
    100%{
        opacity:0 ;
        transform: scale(1.3,1.3);
    }
}
/*飞鸟*/
.bird_fly{
    -webkit-animation: bird_fly 8s linear forwards;
}
@keyframes bird_fly {
    0% {
        opacity: 1;
        -webkit-transform:translateX(-220px) rotateX(0deg) rotateZ(0deg) rotateX(10deg);
    }
    50% {
        opacity:1;
        -webkit-transform: translateX(200px) rotateX(-120deg) rotateZ(0deg) rotateX(10deg);

    }
    100%{
        opacity: 1;
        -webkit-transform:none;
    }
}

/*水波*/

.shuibo{
    -webkit-animation: shuibo 8s linear infinite;
}

@-webkit-keyframes shuibo{
    0% {
        -webkit-transform:scale(.222);
        -ms-transform:scale(.222);
        -moz-transform:scale(.222);
        -o-transform:scale(.222);
        transform:scale(.222);
        opacity:1
    }
    50% {
        -webkit-transform:scale(.622);
        -ms-transform:scale(.622);
        -moz-transform:scale(.622);
        -o-transform:scale(.622);
        transform:scale(.622);
        opacity:.4
    }
    98% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        -moz-transform:scale(1);
        -o-transform:scale(1);
        transform:scale(1);
        opacity:.2
    }
    100% {
        opacity:0
    }

}


/*落叶左到右*/
.luoye_left{
    -webkit-animation:luoye_left 8s linear infinite;
}

@-webkit-keyframes luoye_left
{
    0%   { -webkit-transform:translate(-50px, -50px) scale(0.8, 0.8) rotate(50deg);opacity: 1; }
    80%{
        opacity: 1;
    }
    100% { -webkit-transform:translate(100px, 100px) scale(1.1, 1.1) rotate(-50deg);opacity: 0; }
}

/*落叶右向左*/
.luoye_right{
    -webkit-animation:luoye_right 8s infinite;
}
@-webkit-keyframes luoye_right
{
    0%   { -webkit-transform:translate(100px, -100px) scale(0.8, 0.8) rotate(50deg);opacity: 1; }
    80%{
        opacity: 1;
    }
    100% { -webkit-transform:translate(-100px, 100px) scale(1.1, 1.1) rotate(-50deg);opacity: 0; }
}


.xuanzhuan {
    -webkit-animation: xuanzhuan 2s linear infinite forwards;
}
@keyframes xuanzhuan {
    0%{
        opacity: 1;
        transform: rotate(0deg);
    }
    100%{
        opacity: 1;
        transform: rotate(359deg);
    }
}
/*呼吸效果*/
.big1{ -webkit-animation: big1 2s linear infinite;
}

@-webkit-keyframes big1{
    0%{
        opacity: 1;
        transform: scale(1,1);
    }
    50%{
        opacity: 1;
        transform: scale(1.1,1.1);
    }
    100%{
        opacity: 1;
        transform: scale(1,1);
    }
}



.arrow1{-webkit-animation-name:arrow1;animation-name:arrow1;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
}

@-webkit-keyframes arrow1{0%{opacity:1;-webkit-transform:translate3d(0,0,0)}
    50%{opacity:1}
    100%{opacity:1;-webkit-transform:translate3d(25px,0,0)}
}
@keyframes arrow1{0%{opacity:1;
    -webkit-transform:translate3d(0,0,0)}
    50%{opacity:1}
    100%{opacity:1;-webkit-transform:translate3d(0,0px,0)}
}
.aro1{
    -webkit-animation: aro1 2s linear infinite;
}

@-webkit-keyframes aro1{
    0%{
        opacity:1;
        transform:translate(5px)
    }
    25%{
        opacity:1;
        transform:translate(0px)
    }
    50%{
        opacity:1;
        transform:translate(-5px)
    }
    75%{
        opacity:1;
        transform:translate(0px)
    }
    100%{
        opacity:1;
        transform:translate(5px)
    }
}
.aro3{
    -webkit-animation: aro3 2s linear infinite;
}

@-webkit-keyframes aro3{
    0%{
        opacity:1;
        transform:translate(-5px)
    }
    25%{
        opacity:1;
        transform:translate(0px)
    }
    50%{
        opacity:1;
        transform:translate(5px)
    }
    75%{
        opacity:1;
        transform:translate(0px)
    }
    100%{
        opacity:1;
        transform:translate(-5px)
    }
}

/*由大到小*/
.big2{
    -webkit-animation: big2 2s linear forwards;
}

@-webkit-keyframes big2{
    0%{
        opacity:1;
        transform: scale(1.5,1.5);
    }

    100%{
        opacity:1;
        transform: scale(1,1);
    }
}

@charset "utf-8";

/*呼吸效果*/
.big1{ -webkit-animation: big1 2s linear infinite;
}

@-webkit-keyframes big1{
    0%{
        opacity: 1;
        transform: scale(1,1);
    }
    50%{
        opacity: 1;
        transform: scale(1.1,1.1);
    }
    100%{
        opacity: 1;
        transform: scale(1,1);
    }
}



.arrow1{-webkit-animation-name:arrow1;animation-name:arrow1;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
}

@-webkit-keyframes arrow1{0%{opacity:1;-webkit-transform:translate3d(0,0,0)}
    50%{opacity:1}
    100%{opacity:1;-webkit-transform:translate3d(25px,0,0)}
}
@keyframes arrow1{0%{opacity:1;
    -webkit-transform:translate3d(0,0,0)}
    50%{opacity:1}
    100%{opacity:1;-webkit-transform:translate3d(0,0px,0)}
}
.aro1{
  -webkit-animation: aro1 2s linear infinite;
}

@-webkit-keyframes aro1{
    0%{
        opacity:1;
        transform:translate(5px)
    }
    25%{
        opacity:1;
        transform:translate(0px)
    }
    50%{
        opacity:1;
        transform:translate(-5px)
    }
    75%{
        opacity:1;
        transform:translate(0px)
    }
    100%{
        opacity:1;
        transform:translate(5px)
    }
}
.aro3{
    -webkit-animation: aro3 2s linear infinite;
}

@-webkit-keyframes aro3{
    0%{
        opacity:1;
        transform:translate(-5px)
    }
    25%{
        opacity:1;
        transform:translate(0px)
    }
    50%{
        opacity:1;
        transform:translate(5px)
    }
    75%{
        opacity:1;
        transform:translate(0px)
    }
    100%{
        opacity:1;
        transform:translate(-5px)
    }
}

/*由大到小*/
.big2{
    -webkit-animation: big2 2s linear forwards;
}

@-webkit-keyframes big2{
    0%{
        opacity:1;
        transform: scale(1.5,1.5);
    }

    100%{
        opacity:1;
        transform: scale(1,1);
    }
}

/*闪烁*/
.flash{   -webkit-animation:flash 2s infinite;}
.xuanzhuan{
    -webkit-animation: xuanzhuan 2s linear infinite;
}
@keyframes xuanzhuan {
    0%{
        opacity: 1;
        transform: rotate(0deg);
    }
    100%{
        opacity: 1;
        transform: rotate(359deg);
    }
}
.xuanzhuan1{
    -webkit-animation: xuanzhuan1 2s linear infinite;
}
@keyframes xuanzhuan1 {
    0%{
        opacity: 1;
        transform: rotate(359deg);
    }
    100%{
        opacity: 1;
        transform: rotate(0deg);
    }
}
/*//左到右*/
@-webkit-keyframes counter6
{
    0%   { -webkit-transform:translate(-50px, -50px) scale(0.8, 0.8) rotate(50deg);opacity: 1; }
    80%{
        opacity: 1;
    }
    100% { -webkit-transform:translate(100px, 100px) scale(1.1, 1.1) rotate(-50deg);opacity: 0; }
}

/*//右向左*/
@-webkit-keyframes counter1
{
    0%   { -webkit-transform:translate(100px, -100px) scale(0.8, 0.8) rotate(50deg);opacity: 1; }
    80%{
        opacity: 1;
    }
    100% { -webkit-transform:translate(-100px, 100px) scale(1.1, 1.1) rotate(-50deg);opacity: 0; }
}
@keyframes fly {
    0% {
        opacity: 1;
        -webkit-transform:translateX(-220px) rotateX(0deg) rotateZ(0deg) rotateX(10deg);
    }
    50% {
        opacity:1;
        -webkit-transform: translateX(200px) rotateX(-120deg) rotateZ(0deg) rotateX(10deg);

    }
    100%{
        opacity: 1;
        -webkit-transform:none;
    }
}
@-webkit-keyframes big1shui{
    0% {
        -webkit-transform:scale(.222);
        -ms-transform:scale(.222);
        -moz-transform:scale(.222);
        -o-transform:scale(.222);
        transform:scale(.222);
        opacity:1
    }
    50% {
        -webkit-transform:scale(.622);
        -ms-transform:scale(.622);
        -moz-transform:scale(.622);
        -o-transform:scale(.622);
        transform:scale(.622);
        opacity:.4
    }
    98% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        -moz-transform:scale(1);
        -o-transform:scale(1);
        transform:scale(1);
        opacity:.2
    }
    100% {
        opacity:0
    }

}

/*落叶左到右*/
.luoye_left{
    -webkit-animation:luoye_left 8s linear infinite;
}

@-webkit-keyframes luoye_left
{
    0%   { -webkit-transform:translate(-50px, -50px) scale(0.8, 0.8) rotate(50deg);opacity: 1; }
    80%{
        opacity: 1;
    }
    100% { -webkit-transform:translate(100px, 100px) scale(1.1, 1.1) rotate(-50deg);opacity: 0; }
}

/*落叶右向左*/
.luoye_right{
    -webkit-animation:luoye_right 8s infinite;
}
@-webkit-keyframes luoye_right
{
    0%   { -webkit-transform:translate(100px, -100px) scale(0.8, 0.8) rotate(50deg);opacity: 1; }
    80%{
        opacity: 1;
    }
    100% { -webkit-transform:translate(-100px, 100px) scale(1.1, 1.1) rotate(-50deg);opacity: 0; }
}
.jianchu_fanhui{
    -webkit-animation: jianchu_fanhui 8s linear infinite;
}
@keyframes jianchu_fanhui {
    0%{
        background-position:left;
        left: 0px;
        opacity: 1;
        width:0px;
    }
    50%{
        background-position:left;
        left: 0px;
        right: 0px;
        opacity: 1;
        width: 750px;
    }
    51%{
        background-position:right;
        right: 0px;
        left: auto;
        opacity: 1;
        width: 750px;
    }

    100%{
        background-position:right;
        right: 0px;
        left: auto;
        opacity: 1;
        width: 0px;
    }
}
.yanhua{
    -webkit-animation: yanhua 2s linear infinite;
}
@keyframes yanhua{
    0%{
        opacity: 1;
        transform: translate(0px,400px) scale(0.1);
    }
    60%{
        opacity: 1;
        transform: translate(0px,0px) scale(0.1);
    }
    90%{
        opacity: 1;
        transform: translate(0px,0px) scale(1);;
    }
    100%{
        opacity: 0;
        transform: translate(0px,0px) scale(1.1);
    }
}