@charset: "utf-8";
/*-----------css3 动态效果----------------*/

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    /*初始状态 透明度为0*/
    40% {
        opacity: 0;
    }
    /*过渡状态 透明度为0*/
    100% {
        opacity: 1;
    }
    /*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {
    /*针对webkit内核*/
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes mymove {
    from {
        right: -100%;
    }
    to {
        right: -1%;
    }
}
@-webkit-keyframes mymove{
    from {
        right: -100%;
    }
    to {
        right: -1%;
    }
}
@keyframes mymoveFiv {
    from {
        top:-100%;
    }
    to {
        top:0;
    }
}
@-webkit-keyframes mymoveFiv{

    from {
        top:-100%;
    }
    to {
        top:0;
    }
}
/* ---屏幕小于1366时---- */
@keyframes mymove01 {
    from {
        left: 100%;
    }
    to {
        left: 45%;
    }
}
@-webkit-keyframes mymove01
/*Safari and Chrome*/

    {
    from {
        left: 100%;
    }
    to {
        left: 45%;
    }
}

@keyframes allMove {
    from {
        top: 100%;
    }
    to {
        top: 65%;
    }
}
@-webkit-keyframes allMove
/*Safari and Chrome*/

    {
    from {
        top: 100%;
    }
    to {
        top: 65%;
    }
}
/*-----第一页----*/

.active.one .h1 {
    opacity: 1;
    top: 20%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-delay: 0.5s;
}
.active.one .text {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-delay: 0.7s;
}
/*-----第二页----*/

.active.two .h1 {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-delay: 0.5s;
    text-align: center;
}
.active.two .text {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-delay: 0.7s;
    right: 0;
}
.active.two .nav_img {
    top: 55%;
    animation: fade-in 0.7s;
    /*动画名称*/
    -webkit-animation: fade-in 0.7s;
    /*针对webkit内核*/
}

/*-----第三页----*/

.active.three h1 {
    opacity: 1;
    top: 30%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-delay: 0.5s;
}
.active.three .text {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-delay: 0.7s;
    left:4%;
}
.active.three .p3_img {
    animation: mymove 0.7s linear;

}
/*-----第四页----*/

.active.four h1 {
    opacity: 1;
    top: 25%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-delay: 0.5s;
}
.active.four .text {
    opacity: 1;
    left: 0;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-delay: 0.7s;
}
.active.four .p4Nav_img {
    animation: allMove 1s linear;
}
/*-----第五页----*/

.active.five h1, .active.five .text {
    opacity: 1;
    left: 58%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-delay: 0.5s;
}
.active.five .circle{
    opacity: 1;
    animation: mymoveFiv 1s linear;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-delay: 0.5s;
}

/*-----第六页----*/

.active.six h1 {
    opacity: 1;
    top: 20%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-delay: 0.5s;
}
.active.six .text {
    opacity: 1;
    top: 34%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1) translateX(-50%);
    transition-delay: 0.7s;
}
.active.six .p6_pic {
    animation: fade-in 1s linear;
}
/*-----第七页----*/

.active.seven h1 {
    opacity: 1;
    top: 15%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-delay: 0.5s;
}
/*-----------------媒体查询------------------*/

/* -----屏幕尺寸 小于1366px时----- */

@media screen and (max-width: 1366px) {
    /*---头部----*/
    .top {
        height: 60px;
        line-height: 60px;
    }
    .logo{
        height: 36px;
        margin-top: -10px;
    }
    .logo-text {
        font-size: 24px;
        line-height: 60px;
    }
    .wrap .fr a {
        font-size: 16px;
        height: 60px;
        line-height: 60px;
    }
    /*----通用-----*/
    .inner {
        width: 960px;
    }
    .h1 {
        font-size: 30px;
    }
    .text {
        font-size: 22px;
    }
    .text span{
        margin-left:40px;
    }
    /*----第一页----*/
    .one .innerBg{
        height: 450px;
    }
    /*-----第二页------*/
    .nav_img {
        height: 200px;
    }
    .nav_img .pic {
        width: 100px;
        height: 100px;
        border-radius: 100px;
        margin-top:-65px;
        margin-top:-65px;
    }
    .nav_img li:nth-child(2n){
        background-position:center 75px;
    }
    /* ------第三页------ */
    .active.three h1{
        left:20%;
    }
    .three .text{
        width: 350px;
    }
    
    .three .p3_img{
        width: 640px;
        height: 312px;
        right: 80px;
    }
    .active.three .text{
        left:17%;
    }
    /* ------第四页------- 
    
    /* -----第五页------- */
    .circle{
        width: 451px;
        height: 596px;
    }
    /* ------第六张-------- */
    .p6_pic{
        width: 394px;
        height: 395px;
        -webkit-background-size: 80%;
        background-size: 80%;
        bottom:0px;
    }
    /* --------第七页--------- */
    .seven .p7Nav_img{
        top:25%;
    }
    .seven .p7Nav_img li{
        height: 260px;
    }
    .seven .more{
        top:58%;
    }
    .p7Nav_img li{
        width: 200px;
        margin-right: 48px;
    }
    .p7Nav_img li div{
        width: 99px;
        height: 99px;
        border-radius: 62px;
    }
    /* -----bottom-------- */
    .bottomInner{
        width: 960px;
    }
    
}