@charset "utf-8";
/* CSS3过度及动画 */


/* 第一页 */
.active.section1 .ml-nav {
    top: 0;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.active.section1 .slide{
    transform:scale(1);
    opacity: 1;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.active.section1 .ring1{
    opacity: 1;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.active.section1 .ring2{
    opacity: 1;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.active.section1 .ring3{
    opacity: 1;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    transition-delay: 0.7s;
}




/* 第二页 */
.active.section2 .ml-nav {
    background-color: black;
    top: 0;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.active.section2 .headLine{
    width:100%;
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.active.section2 .deveBox .main .left{
    margin-left:0;
    opacity: 1;
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    -ms-transition-delay:1s;
    transition-delay: 1s;
}


.active.section2 .deveBox .main .right{
    margin-right:0;
    opacity: 1;
    -webkit-transition-delay: 1.2s;
    -moz-transition-delay: 1.2s;
    -o-transition-delay: 1.2s;
    -ms-transition-delay:1.2s;
    transition-delay: 1.2s;
}


/* 第三页 */
.active.section3 .ml-nav {
    background-color: black;
    top: 0;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.active.section3 .headLine{
    width:100%;
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.active.section3 .introduceBox .pic{
    width: 284px;
    opacity: 1;
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    -ms-transition-delay: 1s;
    transition-delay: 1s;
}

.active.section3 .introduceBox .pay{
    width: 284px;
    height: auto;
    opacity: 1;
    margin-left:0;
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    -ms-transition-delay: 1s;
    transition-delay: 1s;

}


.active.section3 .introduceBox .operating{
    width: 284px;
    opacity: 1;
    margin-right:0;
    -webkit-transition-delay: 1s;
    -moz-transition-delay:1s;
    -o-transition-delay: 1s;
    -ms-transition-delay:1s;
    transition-delay:1s;
}

/*.active.section3 .introduceBox .pay .icon1{*/
    /*opacity: 1;*/
    /*left:-150px;*/
    /*top:-50px;*/
    /*-webkit-transition-delay: 1.5s;*/
    /*-moz-transition-delay: 1.5s;*/
    /*-o-transition-delay: 1.5s;*/
    /*-ms-transition-delay: 1.5s;*/
    /*transition-delay: 1.5s;*/
    /*transform: scale(1);*/
/*}*/

/*.active.section3 .introduceBox .pay .icon2{*/
    /*opacity: 1;*/
    /*left:10px;*/
    /*top:-200px;*/
    /*-webkit-transition-delay: 1.7s;*/
    /*-moz-transition-delay: 1.7s;*/
    /*-o-transition-delay: 1.7s;*/
    /*-ms-transition-delay: 1.7s;*/
    /*transition-delay: 1.7s;*/
    /*transform: scale(1);*/
/*}*/

/*.active.section3 .introduceBox .pay .icon3{*/
    /*opacity: 1;*/
    /*transform: scale(1);*/
    /*right:-138px;*/
    /*top:-20%;*/

    /*-webkit-transition-delay: 1.9s;*/
    /*-moz-transition-delay: 1.9s;*/
    /*-o-transition-delay: 1.9s;*/
    /*-ms-transition-delay: 1.9s;*/
    /*transition-delay: 1.9s;*/

/*}*/

/*.active.section3 .introduceBox .operating .icon1{*/
    /*left:-150px;*/
    /*top:-100px;*/
    /*opacity: 1;*/
    /*transform: scale(1);*/
    /*-webkit-transition-delay: 1.5s;*/
    /*-moz-transition-delay: 1.5s;*/
    /*-o-transition-delay: 1.5s;*/
    /*-ms-transition-delay: 1.5s;*/
    /*transition-delay: 1.5s;*/
/*}*/

/*.active.section3 .introduceBox .operating .icon2{*/
    /*left:0;*/
    /*top:-200px;*/
    /*opacity: 1;*/
    /*transform: scale(1);*/
    /*-webkit-transition-delay: 1.6s;*/
    /*-moz-transition-delay: 1.6s;*/
    /*-o-transition-delay: 1.6s;*/
    /*-ms-transition-delay: 1.6s;*/
    /*transition-delay: 1.6s;*/
/*}*/

/*.active.section3 .introduceBox .operating .icon3{*/
    /*right:-150px;*/
    /*top:-150px;*/
    /*opacity: 1;*/
    /*transform: scale(1);*/
    /*-webkit-transition-delay: 1.7s;*/
    /*-moz-transition-delay:1.7s;*/
    /*-o-transition-delay: 1.7s;*/
    /*-ms-transition-delay: 1.7s;*/
    /*transition-delay: 1.7s;*/
/*}*/


/*.active.section3 .introduceBox .operating .icon4{*/
    /*right:-200px;*/
    /*top:30px;*/
    /*opacity: 1;*/
    /*transform: scale(1);*/
    /*-webkit-transition-delay: 1.8s;*/
    /*-moz-transition-delay: 1.8s;*/
    /*-o-transition-delay: 1.8s;*/
    /*-ms-transition-delay:1.8s;*/
    /*transition-delay: 1.8s;*/
/*}*/

/*.active.section3 .introduceBox .operating .icon5{*/
    /*right:-50px;*/
    /*top:150px;*/
    /*opacity: 1;*/
    /*transform: scale(1);*/
    /*-webkit-transition-delay:1.9s;*/
    /*-moz-transition-delay: 1.9s;*/
    /*-o-transition-delay: 1.9s;*/
    /*-ms-transition-delay: 1.9s;*/
    /*transition-delay: 1.9s;*/
/*}*/


/*.active.section3 .introduceBox .operating .icon6{*/
    /*left:-150px;*/
    /*top:100px;*/
    /*opacity: 1;*/
    /*transform: scale(1);*/
    /*-webkit-transition-delay: 2s;*/
    /*-moz-transition-delay: 2s;*/
    /*-o-transition-delay: 2s;*/
    /*-ms-transition-delay: 2s;*/
    /*transition-delay: 2s;*/
/*}*/



/* 第四页 */
.active.section4 .ml-nav {
    background-color: black;
    top: 0;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.active.section4 .headLine{
    width:100%;
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    transition-delay: 0.9s;
}


.active.section4 .newBox .main .left{
    opacity: 1;
    transform: scale(1);
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.active.section4 .newBox .main .right .item1{
    margin-right:0;
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.active.section4 .newBox .main .right .item2{
    margin-right:0;
    -webkit-transition-delay:1.2s;
    -moz-transition-delay: 1.2s;
    -o-transition-delay: 1.2s;
    -ms-transition-delay: 1.2s;
    transition-delay: 1.2s;
}

.active.section4 .newBox .main .right .item3{
    margin-right:0;
    -webkit-transition-delay:1.4s;
    -moz-transition-delay: 1.4s;
    -o-transition-delay: 1.4s;
    -ms-transition-delay: 1.4s;
    transition-delay: 1.4s;
}

.active.section4 .newBox .main .right .item4{
    margin-right:0;
    -webkit-transition-delay:1.6s;
    -moz-transition-delay: 1.6s;
    -o-transition-delay: 1.6s;
    -ms-transition-delay: 1.6s;
    transition-delay: 1.6s;
}

/* 第五页 */
.active.section5 .ml-nav {
    background-color: black;
    top: 0;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.active.section5 .headLine{
    width:100%;
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.active.section5 .caseBox .main .item1{
    opacity:1;
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.active.section5 .caseBox .main .item2{
    opacity:1;
    left:280px;
    top:0;
    -webkit-transition-delay: 1.5s;
    -moz-transition-delay: 1.5s;
    -o-transition-delay: 1.5s;
    -ms-transition-delay: 1.5s;
    transition-delay: 1.5s;
}

.active.section5 .caseBox .main .item3{
    left:560px;
    top:0;
    opacity:1;
    -webkit-transition-delay: 1.5s;
    -moz-transition-delay: 1.5s;
    -o-transition-delay: 1.5s;
    -ms-transition-delay: 1.5s;
    transition-delay: 1.5s;
}

.active.section5 .caseBox .main .item4{
    left:840px;
    top:0;
    opacity:1;
    -webkit-transition-delay: 1.5s;
    -moz-transition-delay: 1.5s;
    -o-transition-delay: 1.5s;
    -ms-transition-delay: 1.5s;
    transition-delay: 1.5s;
}



/* 第六页 */
.active.section6 .ml-nav {
    background-color: black;
    top: 0;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.active.section6 .headLine{
    width:100%;
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.active.section6 .usBox .main .left{
    opacity:1;
    transform: scale(1);
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.active.section6 .usBox .main .right .txt{
    top:120px;
    -webkit-transition-delay: 2s;
    -moz-transition-delay: 2s;
    -o-transition-delay: 2s;
    -ms-transition-delay: 2s;
    transition-delay: 2s;
}


.active.section6 .usBox .main .right .cyc1{
    opacity: 1;
    transform: scale(1);

    -webkit-transition:opacity 0.1s, transform 2.5s;
    -moz-transition: opacity 0.1s, transform 2.5s;
    -o-transition: opacity 0.1s, transform 2.5s;
    -ms-transition: opacity 0.1s, transform 2.5s;
    transition: opacity 0.1s, transform 2.5s;
}

.active.section6 .usBox .main .right .cyc2{
    opacity: 1;
    transform: scale(1)rotate(360deg);
    left:800px;
    top:20px;
    -webkit-transition:opacity 0.1s, transform 2.5s ,left 2.5s , top 2.5s;
    -moz-transition: opacity 0.1s, transform 2.5s ,left 2.5s , top 2.5s;
    -o-transition: opacity 0.1s, transform 2.5s ,left 2.5s , top 2.5s;
    -ms-transition: opacity 0.1s, transform 2.5s ,left 2.5s , top 2.5s;
    transition:opacity 0.1s, transform 2.5s ,left 2.5s , top 2.5s;
}

.active.section6 .usBox .main .right .cyc3{
    opacity: 1;
    transform: scale(1)rotate(360deg);
    left:950px;
    top:20px;
    -webkit-transition:opacity 0.1s, transform 2.5s ,left 2.5s , top 2.5s;
    -moz-transition: opacity 0.1s, transform 2.5s ,left 2.5s , top 2.5s;
    -o-transition: opacity 0.1s, transform 2.5s ,left 2.5s , top 2.5s;
    -ms-transition: opacity 0.1s, transform 2.5s ,left 2.5s , top 2.5s;
    transition:opacity 0.1s, transform 2.5s ,left 2.5s , top 2.5s;
}
.active.section6 .introduceBox .pay{
    width: 100%;
    height: auto;
    opacity: 1;
    margin-left:0;
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    -ms-transition-delay: 1s;
    transition-delay: 1s;

}
.section6 .bg1{
    background:#ffffff url(../case_files/us1.png) center center  no-repeat ;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg1.jpg',sizingMethod='scale');
    -webkit-background-size:70%;;
    background-size:70%;;
}



.section6 .bg2{
    background:#ffffff url(../case_files/us2.png)center center  no-repeat ;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg1.jpg',sizingMethod='scale');
    -webkit-background-size:70%;
    background-size:70%;
}

.section6 .bg3{
    background:#ffffff url(../case_files/us3.png)center center  no-repeat ;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg1.jpg',sizingMethod='scale');
    -webkit-background-size:70%;
    background-size:70%;
}


/* 第七页 */
.active.section7 .ml-nav {
    background-color: black;
    top: 0;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.active.section7 .headLine{
    width:100%;
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.active.section7 .silder-box{
    opacity: 1;
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.active.section7 .footer{
    opacity: 1;
    bottom:0;
    -webkit-transition-delay: 1s;
    -moz-transition-delay:1s;
    -o-transition-delay:  1s;
    -ms-transition-delay:  1s;
    transition-delay:  1s;
}
.active.section7 .introduceBox .pic{
    width: 100%;
    height: auto;
    opacity: 1;
    margin-left:0;
    margin-top: -325px;
    margin-bottom: 50px;
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    -ms-transition-delay: 1s;
    transition-delay: 1s;

}
/* 头部 */
.ml-nav{ opacity:0;}
.ml-nav{
    -webkit-animation:twinkling .8s 1 2s ease-in-out forwards;
    -moz-animation:twinkling .8s 1 2s ease-in-out forwards;
    -ms-animation:twinkling .8s 1 2s ease-in-out forwards;
    -o-animation:twinkling .8s 1 2s ease-in-out forwards;
    animation:twinkling .8s 1 2s ease-in-out forwards;
}
@-webkit-keyframes twinkling{
    0%{   opacity:0; }
    100%{ opacity:1; }
}
@-moz-keyframes twinkling{
    0%{   opacity:0; }
    100%{ opacity:1; }
}
@-ms-keyframes twinkling{
    0%{   opacity:0; }
    100%{ opacity:1; }
}
@-o-keyframes twinkling{
    0%{   opacity:0; }
    100%{ opacity:1; }
}
@keyframes twinkling{
    0%{   opacity:0; }
    100%{ opacity:1; }
}