.banner{height:400px;border-top:solid 1px #fff;background: url("../images/introduction-of-production-process.png") no-repeat center / cover;position:relative;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/introduction-of-production-process.png', sizingMethod='crop')";}
.wrap .inner{width:1045px;margin: 30px auto;}
.wrap .inner .content{margin: 236px 0;position: relative; }
@-webkit-keyframes bubble0 {
    0%{top:-80px;left:90px;}
    100%{top:25px;left:25px;opacity: 0;}
}
@-webkit-keyframes bubble1 {
    0%{top:-230px;left:0;}
    100%{top:25px;left:25px;opacity: 0;}
}
@-webkit-keyframes bubble2 {
    0%{top:-180px;left:157px;}
    100%{top:15px;left:15px;opacity: 0;}
}
@-webkit-keyframes bubble3 {
    0%{top:-151px;left:-157px;}
    100%{top:15px;left:15px;opacity: 0;}
}
@-webkit-keyframes bubble4 {
    0%{top:0;left:0;}
    100%{top:0;left:0;opacity: 0;}
}
@-webkit-keyframes bubble5 {
    0%{top:70px;left:170px;}
    100%{top:25px;left:25px;opacity: 0;}
}
@-webkit-keyframes bubble6 {
    0%{top:90px;left:-150px;}
    100%{top:25px;left:25px;opacity: 0;}
}
@-webkit-keyframes bubble7 {
    0%{top:200px;left:75px;}
    100%{top:15px;left:15px;opacity: 0;}
}
@-webkit-keyframes bubble8 {
    0%{top:240px;left:-75px;}
    100%{top:25px;left:25px;opacity: 0;}
}
@-webkit-keyframes right-capsule {
    0%{right:-50px;}
    100%{right:240px;z-index:3}
}
@-webkit-keyframes left-capsule {
    0%{left:-50px;}
    100%{left:276px;z-index:3}
}
@-webkit-keyframes capsule-title {
    0%{top:0;}
    100%{top:-150px;opacity: 1}
}
@-webkit-keyframes lineshow {
    0%{opacity:0}
    100%{opacity: 1}
}
@-webkit-keyframes shakeX {
    0%{
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -ms-transform: translateX(5px);
        -o-transform: translateX(5px);
        transform: translateX(5px);}
    50%{
        -webkit-transform: translateX(-10px);
        -moz-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        -o-transform: translateX(-10px);
        transform: translateX(-10px);}
    100%{
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -ms-transform: translateX(5px);
        -o-transform: translateX(5px);
        transform: translateX(5px);}
}
@-o-keyframes shakeX {
    0%{
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -ms-transform: translateX(5px);
        -o-transform: translateX(5px);
        transform: translateX(5px);}
    50%{
        -webkit-transform: translateX(-10px);
        -moz-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        -o-transform: translateX(-10px);
        transform: translateX(-10px);}
    100%{
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -ms-transform: translateX(5px);
        -o-transform: translateX(5px);
        transform: translateX(5px);}
}
@-ms-keyframes shakeX {
    0%{
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -ms-transform: translateX(5px);
        -o-transform: translateX(5px);
        transform: translateX(5px);}
    50%{
        -webkit-transform: translateX(-10px);
        -moz-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        -o-transform: translateX(-10px);
        transform: translateX(-10px);}
    100%{
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -ms-transform: translateX(5px);
        -o-transform: translateX(5px);
        transform: translateX(5px);}
}
@-moz-keyframes shakeX {
    0%{
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -ms-transform: translateX(5px);
        -o-transform: translateX(5px);
        transform: translateX(5px);}
    50%{
        -webkit-transform: translateX(-10px);
        -moz-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        -o-transform: translateX(-10px);
        transform: translateX(-10px);}
    100%{
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -ms-transform: translateX(5px);
        -o-transform: translateX(5px);
        transform: translateX(5px);}
}
@-webkit-keyframes shakeY {
    0%{
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -ms-transform: translateY(5px);
        -o-transform: translateY(5px);
        transform: translateY(5px);}
    50%{
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transform: translateY(-10px);}
    100%{
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -ms-transform: translateY(5px);
        -o-transform: translateY(5px);
        transform: translateY(5px);}
}
@keyframes shakeY {
    0%{
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -ms-transform: translateY(5px);
        -o-transform: translateY(5px);
        transform: translateY(5px);}
    50%{
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transform: translateY(-10px);}
    100%{
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -ms-transform: translateY(5px);
        -o-transform: translateY(5px);
        transform: translateY(5px);}
}
.wrap .inner .content .bubble{position: relative;float: left;left:50%;margin-left: -50px;top:64px;}
.wrap .inner .content .bubble img:first-child{position: absolute;top:-80px;left:90px;-webkit-animation: shakeX 2s infinite linear;-moz-animation: shakeX 2s infinite linear;-o-animation: shakeX 2s infinite linear;-ms-animation: shakeX 2s infinite linear;animation: shakeX 2s infinite linear;}

.wrap .inner .content .bubble img:first-child+img{position: absolute;top:-230px;left: 0;-webkit-animation: shakeX 2s infinite linear;-moz-animation: shakeX 2s infinite linear;-o-animation: shakeX 2s infinite linear;-ms-animation: shakeX 2s infinite linear;animation: shakeX 2s infinite linear;
}
.wrap .inner .content .bubble img:first-child+img+img{position: absolute;top:-180px;left:157px;-webkit-animation: shakeY 2s infinite linear;-ms-animation: shakeY 2s infinite linear;-moz-animation: shakeY 2s infinite linear;-o-animation: shakeY 2s infinite linear;animation: shakeY 2s infinite linear;}

.wrap .inner .content .bubble img:first-child+img+img+img{position: absolute;top:-151px;left:-157px;-webkit-animation: shakeY 2s infinite linear;-ms-animation: shakeY 2s infinite linear;-moz-animation: shakeY 2s infinite linear;-o-animation: shakeY 2s infinite linear;animation: shakeY 2s infinite linear;}

.wrap .inner .content .bubble img:first-child+img+img+img+img{position: absolute;top:0;left: 0;z-index:2;-webkit-animation: shakeY 2s infinite linear;-ms-animation: shakeY 2s infinite linear;-moz-animation: shakeY 2s infinite linear;-o-animation: shakeY 2s infinite linear;animation: shakeY 2s infinite linear;}

.wrap .inner .content .bubble img:first-child+img+img+img+img+img{position: absolute;top:70px;left: 170px;-webkit-animation: shakeX 2s infinite linear;-moz-animation: shakeX 2s infinite linear;-o-animation: shakeX 2s infinite linear;-ms-animation: shakeX 2s infinite linear;animation: shakeX 2s infinite linear;}

.wrap .inner .content .bubble img:first-child+img+img+img+img+img+img{position: absolute;top:90px;left:-150px;-webkit-animation: shakeX 2s infinite linear;-moz-animation: shakeX 2s infinite linear;-o-animation: shakeX 2s infinite linear;-ms-animation: shakeX 2s infinite linear;animation: shakeX 2s infinite linear;}

.wrap .inner .content .bubble img:first-child+img+img+img+img+img+img+img{position: absolute;top:200px;left:75px;-webkit-animation: shakeY 2s infinite linear;-ms-animation: shakeY 2s infinite linear;-moz-animation: shakeY 2s infinite linear;-o-animation: shakeY 2s infinite linear;animation: shakeY 2s infinite linear;}

.wrap .inner .content .bubble img:first-child+img+img+img+img+img+img+img+img{position: absolute;top:240px;left:-75px;-webkit-animation: shakeY 2s infinite linear;-ms-animation: shakeY 2s infinite linear;-moz-animation: shakeY 2s infinite linear;-o-animation: shakeY 2s infinite linear;animation: shakeY 2s infinite linear;}
 .wrap .inner .content .right-capsule{position: absolute;right:-50px;}
.wrap .inner .content .left-capsule{position: absolute;left:-50px;}
.wrap .inner .content .capsule-titel{position: absolute;left:50%;margin-left:-200px; opacity: 0}
.wrap .inner .content .capsule-titel-line{position: relative;left:20px;top:-50px;height: 400px;opacity:0;z-index: 10}
.wrap .inner .content .capsule-titel-line span{color: #d7ad75;font-size: 16px;line-height: 30px;}
.wrap .inner .content .capsule-txt {float: left;height: 157px;width:100%;border-radius: 8px;background: #575757; display: none;padding: 20px 0 30px;}
.wrap .inner .content .capsule-txt p{color: #fff;font-size: 16px;line-height: 30px;width: 765px;margin: 0 auto; display: none; }
 .wrap .inner .content .capsule-titel-line span:first-child{position:absolute;left:0;top:-40px;}
.wrap .inner .content .capsule-titel-line .shuoming span:first-child+span{position:absolute;left:0;top:50px;}
.wrap .inner .content .capsule-titel-line .shuoming span:first-child+span+span{position:absolute;left:0;top:140px;}
.wrap .inner .content .capsule-titel-line .shuoming span:first-child+span+span+span{position:absolute;left:0;top:230px;}
.wrap .inner .content .capsule-titel-line .shuoming span:first-child+span+span+span+span{position:absolute;left:0;top:320px;}
.wrap .inner .content .capsule-titel-line .shuoming span:first-child+span+span+span+span+span{position:absolute;right:0;top:-40px;}
.wrap .inner .content .capsule-titel-line .shuoming span:first-child+span+span+span+span+span+span{position:absolute;right:0;top:50px;}
.wrap .inner .content .capsule-titel-line .shuoming span:first-child+span+span+span+span+span+span+span{position:absolute;right:0;top:140px;}
.wrap .inner .content .capsule-titel-line .shuoming span:first-child+span+span+span+span+span+span+span+span{position:absolute;right:0;top:230px;}
.wrap .inner .content .capsule-titel-line .shuoming span:first-child+span+span+span+span+span+span+span+span+span{position:absolute;right:0;top:320px;}



