.banner{height:400px;border-top:solid 1px #fff;background: url("../images/detail-banner1.png") no-repeat center / cover;position:relative;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/detail-banner1.png', sizingMethod='crop')";}
.wrap .inner{width: 1045px;margin: 0 auto}
/*
.wrap .inner .content{padding-top: 30px;}
*/
.wrap .inner .content .shape-box{text-align: left;}
.wrap .inner .content .shape{float:left;width: 226px;padding: 0 10px;}
.wrap .inner .content .shape .shape-img{float: left;margin:53px 15px 58px 0;}
.shape1-img{width:65px;height:64px;background: url("../images/all-icon.png") no-repeat 0 -68px;position:relative;  }
.shape2-img{width:62px;height:65px;background: url("../images/all-icon.png") no-repeat -66px -68px;position:relative;}
.shape3-img{width:60px;height:66px;background: url("../images/all-icon.png") no-repeat -129px -68px;position:relative;}
.shape4-img{width:75px;height:63px;background: url("../images/all-icon.png") no-repeat -189px -68px;position:relative;}
.wrap .inner .content .shape .shape-txt{float: left;padding-top: 58px;}
.wrap .inner .content .shape .shape-txt h4{font-size: 24px;color:#3C3C3C;}
.wrap .inner .content .shape .shape-txt p{font-size: 16px;color:#818181;}
.wrap .inner .content .box{position: relative;}
.wrap .inner .content .box1{padding-top: 50px;}
.wrap .inner .content .box2{padding-top: 71px;}
.wrap .inner .content .box .txt{width: 522px;}
.wrap .inner .content .box2 .txt{padding-top: 16px;padding-bottom: 77px;}
.wrap .inner .content .box3 .txt{padding-top: 88px;padding-bottom: 107px;float: left;}
.wrap .inner .content .box .txt p{line-height:30px;font-size: 16px;color:#3C3C3C}
.wrap1{height:500px;background: url("../images/detail-banner2.png") no-repeat center / cover;position:relative;-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/detail-banner2.png', sizingMethod='crop')";}
.wrap3{background: url("../images/detail-banner3.png") no-repeat center / cover;position:relative;-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/detail-banner3.png', sizingMethod='crop')";}
.wrap4{background: url("../images/detail-banner4.png") no-repeat center / cover;position:relative;-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/detail-banner4.png', sizingMethod='crop')";}
 .wrap .inner .content .box1 .china-img {width: 530px;}
.wrap .inner .content .box1 .china-img img{float:left;padding-bottom: 23px;}
.wrap .inner .content .box1 .micro-img {width: 530px;}
.wrap .inner .content .box2 .micro-img img{float:right;}
.wrap .inner .content .box2 .txt,.wrap .inner .content .box4 .txt{float: right;}
.wrap .inner .content .box1 img,.wrap .inner .content .box3 img{float: right;}
.wrap .inner .content .box2 img,.wrap .inner .content .box4 img{float: left;}
@-webkit-keyframes china2{
    0% {transform:scale(0,0)}
    100% {transform:scale(0.8,0.8)}
 }
@-webkit-keyframes micro{
    0% {transform:translate(5px,0)}
    25% {transform:translate(-5px,0)}
    50% {transform:translate(5px,0)}
    75% {transform:translate(-5px,0)}
    100% {transform:translate(5px,0)}
}
@-webkit-keyframes company{
    0%{width:0;height:21px;}
    25%{width:144px;height:21px;}
    50%{width:287px;height:21px;}
    75%{width:144px;height:21px;}
    100%{width:0;height:21px;}
 }
@-webkit-keyframes company2{
    0%{width:0;height:21px;}
    25%{width:100px;height:21px;}
    50%{width:200px;height:21px;}
    75%{width:100px;height:21px;}
    100%{width:0;height:21px;}
}
@-webkit-keyframes company3{
    0%{width:0;height:21px;}
    25%{width:75px;height:21px;}
    50%{width:150px;height:21px;}
    75%{width:75px;height:21px;}
    100%{width:0;height:21px;}
}
@-webkit-keyframes company4{
    0%{transform: scale(1,1);}
    50%{transform: scale(1.1,1.1);}
    100%{transform: scale(1,1);}
}
.wrap .inner .content .box1 .china{padding-left: 200px;}
.wrap .inner .content .box1 .china img:first-child+img{position: absolute;top:100px;right:82px;width:15px;height: 15px;}
.wrap .inner .content .box1 .china img:first-child+img+img{position: absolute;top:20px;right:0px;transform: scale(0.5,0.5);-webkit-animation:china2 4s  infinite linear;}
.wrap .inner .content .box1 .china img:first-child{position: absolute;top:50px;left:556px;}

.wrap .inner .content .box2 .micro{padding-left: 200px;position: relative}
.wrap .inner .content .box2 .micro img:first-child{position: absolute;top:-70px;left:26px;transform:translate(5px,0);-webkit-animation:micro 5s infinite linear;}
.wrap .inner .content .box2 .micro img:first-child+img{position: absolute;top:-70px;left:216px;transform:translate(5px,0);}
@-webkit-keyframes trail_ {
    from {
        -webkit-transform: rotateZ(360deg);
    } to {
          -webkit-transform: rotateZ(0deg);
      }
}
@keyframes particle4 {
    0% {
        transform: rotateX(90deg) rotateY(-360deg);

    }
    25% {
        transform: rotateX(90deg) rotateY(-270deg);
        width: 10px;
        height: 10px;
        z-index: -2;
    }
    50% {
        transform: rotateX(90deg) rotateY(-180deg);

    }
    75% {
        transform: rotateX(90deg) rotateY(-90deg);
        width: 100px;
        height: 100px;

    }
    100% {
        transform: rotateX(90deg) rotateY(0deg);

    }
}
@keyframes particle3 {
    0% {
        transform: rotateX(90deg) rotateY(-360deg);

    }
    25% {
        transform: rotateX(90deg) rotateY(-270deg);
        width:100px;
        height: 100px;
    }
    50% {
        transform: rotateX(90deg) rotateY(-180deg);
    }
    75% {
        transform: rotateX(90deg) rotateY(-90deg);
        width: 10px;
        height: 10px;
        z-index: -2;
    }
    100% {
        transform: rotateX(90deg) rotateY(0deg);


    }
}
@keyframes particle2 {
    0% {
        transform: rotateX(90deg) rotateY(-360deg);

    }
    25% {
        transform: rotateX(90deg) rotateY(-270deg);


    }
    50% {
        transform: rotateX(90deg) rotateY(-180deg);
        width: 100px;
        height: 100px;
    }
    75% {
        transform: rotateX(90deg) rotateY(-90deg);


    }
    100% {
        transform: rotateX(90deg) rotateY(0deg);

    }
}
@keyframes particle1 {
    0% {
        transform: rotateX(90deg) rotateY(-360deg);

    }
    25% {
        transform: rotateX(90deg) rotateY(-270deg);



    }
    50% {
        transform: rotateX(90deg) rotateY(-180deg);
        width: 5px;
        height: 5px;
        z-index: -2;
    }
    75% {
        transform: rotateX(90deg) rotateY(-90deg);
    }
    100% {
        transform: rotateX(90deg) rotateY(0deg);

    }
}
.wrap .inner .content .box3 .circle-box .circle{
    position: absolute;
    top: -10%;
    left: 67%;
    margin-left: -103px;
    width: 450px;
    height: 437px;
    border-radius: 50%;
    z-index:5;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(50deg) rotateY(10deg);transform-style: preserve-3d;transform: rotateX(80deg) rotateY(170deg);
}
.wrap .inner .content .box3 .circle-box .circle > div{
    width: 450px;
    height: 437px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: trail_ 16s infinite linear;
    transform-style: preserve-3d;
    animation: trail_ 16s infinite linear;
}
.wrap .inner .content .box3 .circle-box .circle img:first-child {
    position: absolute;
    bottom:-5px;
    right: 50%;
    margin-left: -5px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    -webkit-animation: particle1 16s  infinite linear;
    animation: particle1 16s infinite linear;
}
.wrap .inner .content .box3 .circle-box .circle img:first-child+img+img {
    position: absolute;
    top: -5px;
    left: 50%;
    margin-left: -5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    -webkit-animation: particle2 16s  infinite linear;
    animation: particle2 16s infinite linear;
}
.wrap .inner .content .box3 .circle-box .circle img:first-child+img{
    position: absolute;
    bottom:50%;
    right:-5px ;
    margin-left: -5px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -webkit-animation: particle4 16s  infinite linear;
    animation: particle4 16s infinite linear;
}
.wrap .inner .content .box3 .circle-box .circle img:first-child+img+img+img{
    position: absolute;
    bottom:50%;
    left:0 ;
    margin-left: -5px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -webkit-animation: particle3 16s  infinite linear;
    animation: particle3 16s infinite linear;
}
.wrap .inner .content .box3 .circle-box{position: relative;top:40px;}
.wrap .inner .content .box3 .circle-box >img{position: absolute;right:110px;z-index: 2;top:60px;}
.wrap .inner .content .box3 .circle-box .zhe{position: absolute;right:110px;top:60px;z-index:22}
.wrap .inner .content .box3 .circle-box .oval{ padding-right:0;position: absolute;right:0px;top:160px;-webkit-transform-style: preserve-3d;-webkit-transform: rotateX(50deg) rotateY(10deg);transform-style: preserve-3d;transform: rotateX(50deg) rotateY(160deg);z-index: 2}
.wrap .inner .content .box4 .company{position: relative;width: 408px;height: 231px;padding-left: 60px;}
.wrap .inner .content .box4{padding: 70px 0 162px 0;}
 .wrap .inner .content .box4  .txt{padding-top:92px;}
.wrap .inner .content .box4 .company img:first-child+img{position: absolute;top:90px;left:80px;width:0;height:0;-webkit-animation:company 5s infinite linear;}
.wrap .inner .content .box4 .company img:first-child+img+img{position: absolute;top:130px;left:80px;width:0;height:0;-webkit-animation:company2 5s 1s infinite linear;}
.wrap .inner .content .box4 .company img:first-child+img+img+img{position: absolute;top:170px;left:80px;width:0;height:0;transform: scale(1,1);-webkit-animation:company3 5s 2s infinite linear;}
.wrap .inner .content .box4 .company img:first-child{position: absolute;bottom:-50px;right:60px;z-index: 1;-webkit-animation:company4 5s infinite linear;}
@keyframes leftmove {
    0%{transform:translateX(200px);}
    100%{transform:translateX(0); }
}
@keyframes rightmove {
    0%{transform:translateX(-200px);}
    100%{transform:translateX(0); }
}
 .wrap .inner .content .box2 .micro{display: none;transform: translateX(-200px)}
.wrap .inner .content .box3 .circle-box{display: none;transform: translateX(-200px)}
.wrap .inner .content .box4 .company{display: none;transform: translateX(-200px)}