html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,menu,nav,output,ruby,section,summary,time,mark,audio,video,p{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,menu,nav,section{display:block;}
body{font-size:14px;line-height:normal;font-family:"微软雅黑","宋体",Verdana,Arial,Helvetica,sans-serif;margin:0 auto; background-color: #fff;}
ol,ul{list-style:none;}
a{text-decoration:none; color:#505050;}
a:hover{ color:#505050;}
img{border:none;display: block}
em{ font-style:normal;}
input,button,select,textarea{ margin:0; padding:0; outline:none;}



/*css3动画定义*/
.ts0_5 { -webkit-transition:600ms all cubic-bezier(0.165, 0.84, 0.44, 1); transition:600ms all cubic-bezier(0.165, 0.84, 0.44, 1);}
.ts1 { -webkit-transition:1s all ease; -moz-transition:1s all ease; -ms-transition:1s all ease; -o-transition:1s all ease; transition:1s all ease; }
.ts2 { -webkit-transition:2s all ease; -moz-transition:2s all ease; -ms-transition:2s all ease; -o-transition:2s all ease; transition:2s all ease; }

/*animate动画时间*/
.active>.delay100{ -webkit-animation-delay: 100ms; animation-delay: 100ms;}
.active>.delay300{ -webkit-animation-delay: 300ms; animation-delay: 300ms;}
.active>.delay500{ -webkit-animation-delay: 500ms; animation-delay: 500ms;}
.active>.delay700{ -webkit-animation-delay: 700ms; animation-delay: 700ms;}
.active>.delay800{ -webkit-animation-delay: 800ms; animation-delay: 800ms;}
.active>.delay1000{ -webkit-animation-delay: 1000ms; animation-delay: 1000ms;}
.active>.delay1100{ -webkit-animation-delay: 1100ms; animation-delay: 1100ms;}
.active>.delay1200{ -webkit-animation-delay: 1100ms; animation-delay: 1100ms;}
.active>.delay1300{ -webkit-animation-delay: 1300ms; animation-delay: 1300ms;}
.active>.delay1500{ -webkit-animation-delay: 1500ms; animation-delay: 1500ms;}
.active>.delay2000{ -webkit-animation-delay: 2000ms; animation-delay: 2000ms;}
.active>.delay2500{ -webkit-animation-delay: 2500ms; animation-delay: 2500ms;}
.active>.delay3000{ -webkit-animation-delay: 3000ms; animation-delay: 3000ms;}

.active>.duration300{ -webkit-animation-duration: 300ms; animation-duration: 300ms;}
.active>.duration500{ -webkit-animation-duration: 500ms; animation-duration: 500ms;}
.active>.duration1000{ -webkit-animation-duration: 1000ms; animation-duration: 1000ms;}
.active>.duration1500{ -webkit-animation-duration: 1500ms; animation-duration: 1500ms;}
.active>.duration2000{ -webkit-animation-duration: 2000ms; animation-duration: 2000ms;}
.active>.duration3000{ -webkit-animation-duration: 3000ms; animation-duration: 3000ms;}
.active>.duration4000{ -webkit-animation-duration: 4000ms; animation-duration: 4000ms;}
.active>.duration5000{ -webkit-animation-duration: 5000ms; animation-duration: 5000ms;}
.active>.duration6000{ -webkit-animation-duration: 6000ms; animation-duration: 6000ms;}
.active>.duration7000{ -webkit-animation-duration: 7000ms; animation-duration: 7000ms;}


/*loading*/
#loading{ width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999;}
#loading .bg{ width:100%; height:100%; position:absolute; top:0; left:0; background-color:#000;}
#loading .icon{ width: 100%; position:absolute; top:50%; left:0; margin-top:-40px;}
#loading .icon img{ display: block; margin: 0 auto;}
#loading p{ width:100%; position:absolute; top:50%; left:0; text-align:center; font-size:18px; margin-top:10px; color:#fff;}

/*右侧导航栏*/
/*#pointList{
    width: 60px;
    position: fixed;
    top: 350px;
    right: 0;
    z-index: 400;
}
#pointList li{
    display: block;
    height: 30px;
    background: url("../img/common/icon_04.png") center no-repeat;
    cursor: pointer;
    -webkit-transition: 0.7s all linear;
    transition: 0.7s all linear;
}
#pointList li.current{
    background-image: url("../img/common/icon_04_2.png");
    -webkit-transform: scale(1.2);
}*/


/*共同样式*/
.screen1,.screen2,.screen3,.screen4,.screen5,.screen6,.screen7{
    overflow: hidden;
}
.screen1con,.screen2con,.screen3con,.screen4con,.screen5con,.screen6con,.screen7con{
    width: 1200px;
    margin: 0 auto;
}
img{
    display: block;
}



/**********第*1*屏**********/
.screen1{

    background: url("../img/page1/bj.jpg") center bottom no-repeat;
    padding-top: 80px;
}
.screen1 .divx1{
    background: url("../img/page1/xian.png") center bottom no-repeat;
    width: 100%;
    height: 716px;

}
.screen1,.screen1con{
    height: 716px;
    position: relative;

}
.screen1 .screen1con img{
    display: block;
    position: absolute;
}
.screen1 .screen1con .logo{
    position: absolute;
    top:30px;
    left: -40px;
}
.screen1 .xian1{
    bottom: 10px;
    left: 0;
}
.screen1 .xian2{
    bottom: 12px;
    right: 0;
}
.screen1 .screen1con .shoes{
    top: 145px;
    right: 197px;
    width: 524px;
    z-index:10;
}
.screen1 .screen1con .shou{
    bottom: 20px;
    right: 130px;
    height: 545px;
}
.screen1 .screen1con .yin{
    bottom: 0px;
    right: 200px;
}
.screen1 .screen1con .zi1{
    top: 20px;
    left: 160px;
}
.screen1 .screen1con .zi2{
    bottom: 35px;
    left: 320px;
}
.screen1 .screen1con .zi3{
    bottom: 130px;
    right: 170px;
}

@-webkit-keyframes zoomIn1{
    0%{
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
        transform-origin: right 332px;
    }
    50%{opacity: 1;}
    100%{
        -webkit-transform: none;
        transform:none;
    }
}
@keyframes zoomIn1{
    0%{
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
        transform-origin: right 332px;
    }
    50%{opacity: 1;}
    100%{
        -webkit-transform: none;
        transform:none;
    }
}
.active>.zoomIn1{
    -webkit-animation-name: zoomIn1;
    animation-name: zoomIn1;
}
@-webkit-keyframes shoud{
    0%{
        bottom: 0px;
        right: 130px;
    }
    100%{
        bottom: 20px;
        right: 130px;
    }
}
@keyframes shoud{
    0%{
        bottom: -10px;
        right: 130px;
    }
    100%{
        bottom: 20px;
        right: 130px;
    }
}
.active>.shoud{
    -webkit-animation-name: shoud;
    animation-name: shoud;
}
@-webkit-keyframes zi1d{
    0%{
        top: 50px;
        left: 90px;
        opacity: 0;
    }
    100%{
        top: 20px;
        left: 160px;
        opacity: 1;
    }
}
@keyframes zi1d{
    0%{
        top: 50px;
        left: 90px;
        opacity: 0;
    }
    100%{
        top: 20px;
        left: 160px;
        opacity: 1;
    }
}
.active>.zi1d{
    -webkit-animation-name: zi1d;
    animation-name: zi1d;
}
@-webkit-keyframes zi2d{
    0%{
        bottom: -35px;
        left: 180px;
        opacity: 0;
    }
    100%{
        bottom: 35px;
        left: 320px;
        opacity: 1;
    }
}
@keyframes zi2d{
    0%{
        bottom: -35px;
        left: 180px;
        opacity: 0;
    }
    100%{
        bottom: 35px;
        left: 320px;
        opacity: 1;
    }
}
.active>.zi2d{
    -webkit-animation-name: zi2d;
    animation-name: zi2d;
}


.screen1 .screen1con .fengche2{
    position: absolute;
    top: 40px;
    left: 890px;
    animation: fengchemovie1 5s infinite linear ;
    -webkit-animation: fengchemovie1 5s infinite linear;
    width: 500px;
}
@keyframes fengchemovie1{
    0%{transform: rotate(0deg)}
    100%{transform: rotate(360deg)}
}
@-webkit-keyframes fengchemovie1 {
    0%{transform: rotate(0deg)}
    100%{transform: rotate(360deg)}
 }
.screen1 .screen1con .fengche1{
    position: absolute;
    top: 370px;
    left: 420px;
    animation: fengchemovie2 2s infinite linear ;
    -webkit-animation: fengchemovie2 2s infinite linear;
}

@keyframes fengchemovie2{
    0%{transform: rotate(0deg)}
    100%{transform: rotate(360deg)}
}
@-webkit-keyframes fengchemovie2 {
    0%{transform: rotate(0deg)}
    100%{transform: rotate(360deg)}
}

/**********第*2*屏**********/
.screen2,.screen2con{
    height: 706px;
    background: url("../img/page2/bj.jpg") center bottom no-repeat;
    background-color: #fff;
    position: relative;
}
.screen2 .screen2con .zi1{
    position: absolute;
    /*left: 20px;*/
    left: -129px;
    /*top: 316px;*/
    top: 365px;
    opacity: 0;
    z-index: 3;
}

.screen2 .screen2con .zi2{
    position: absolute;
    /*left: 880px;*/
    left: 1055px;
    /*top: 404px;*/
    top:355px;
    opacity: 0;
}
.screen2 .screen2con .btn{
    position: absolute;
    left: 855px;
    top: 478px;
    opacity: 0;
    cursor: pointer;
}

.screen2 .screen2con .yin{
    position: absolute;
    left: 342px;
    top: 70px;
    z-index: 1;
    opacity: 0;
}
.screen2 .screen2con .guang{
    position: absolute;
    left: 669px;
    top: 215px;
    z-index: 1;
    opacity:0;
}
.screen2 .screen2con .guang{
    animation:move 1s infinite linear;
    -webkit-animation:move 1s infinite linear;
}
@keyframes move{
    0%{opacity:1;}
    50%{opacity:0.5;}
    100%{opacity:1;}
}
@-webkit-keyframes move{
    0%{opacity:1;}
    50%{opacity:0.5;}
    100%{opacity:1;}
}

.baybtn:hover{
    animation: movebtn 2s infinite ease;
    -webkit-animation: movebtn 1s infinite ease;
}
@keyframes movebtn{
    0%{transform: scale(1)}
    50%{transform: scale(0.9)}
    100%{transform: scale(1)}
}
@-webkit-keyframes movebtn{
    0%{transform: scale(1)}
    50%{transform: scale(0.9)}
    100%{transform: scale(1)}
}


/**********第*3*屏**********/
.screen3,.screen3con{
    height: 748px;
    background: url("../img/page3/bj.jpg") center bottom no-repeat;
    background-color: #333D46;
    position: relative;
}
.screen3 .screen3con .zi1{
    position: absolute;
    /*left: 20px;*/
    /*top: 239px;*/
    left:-236px;
    top: 135px;
    z-index: 2;
    opacity: 0;
}
.screen3 .screen3con .zi2{
    position: absolute;
    /*left: 894px;*/
    /*top: 402px;*/
    left: 1152px;
    top: 436px;
    z-index: 2;
    opacity: 0;
}
.screen3 .screen3con .zi3{
    position: absolute;
    left: 752px;
    top: 0px;
    /*left: 852px;*/
    /*top: 142px;*/
    z-index: 2;
    opacity: 0;
}
.screen3 .screen3con .btn{
    position: absolute;
    left: 868px;
    top: 504px;
    z-index: 4;
    opacity: 0;
    cursor: pointer;
}

.screen3 .screen3con .shoes{
    position: absolute;
    left: 258px;
    top: 190px;
    z-index: 3;
    opacity: 0;
}
.screen3 .screen3con .qiqiu1{
    position: absolute;
    left: 986px;
    top: 37px;
    z-index: 1;
    animation: qiqiu1 1.8s infinite;
    -webkit-animation: qiqiu1 1.8s infinite;
}
@keyframes qiqiu1{
    0%{top:0px;}
    50%{top:5px;}
    100%{top:0px;}
}
@-webkit-keyframes qiqiu1{
    0%{top:0px;}
    50%{top:5px;}
    100%{top:0px;}
}
.screen3 .screen3con .qiqiu2{
    position: absolute;
    left: 442px;
    top: 170px;
    z-index: 1;
    animation: qiqiu2 1.7s 0.5s infinite;
    -webkit-animation: qiqiu2 1.7s 0.5s infinite;
}
@keyframes qiqiu2{
    0%{top:120px;}
    50%{top:110px;}
    100%{top:120px;}
}
@-webkit-keyframes qiqiu2{
    0%{top:120px;}
    50%{top:110px;}
    100%{top:120px;}
}
.screen3 .screen3con .qiqiu3{
     position: absolute;
     left: 38px;
     top: 528px;
     z-index: 1;
    animation: qiqiu3 1.5s 0.3s infinite;
    -webkit-animation: qiqiu3 1.5s 0.3s infinite;
}
@keyframes qiqiu3{
    0%{top:528px;}
    50%{top:522px;}
    100%{top:528px;}
}
@-webkit-keyframes qiqiu3{
    0%{top:528px;}
    50%{top:522px;}
    100%{top:528px;}
}
.screen3 .screen3con .qiqiu4{
    position: absolute;
    left: 1294px;
    top: 426px;
    z-index: 1;
    animation: qiqiu4 1s 0.5s infinite;
    -webkit-animation: qiqiu4 1s 0.5s infinite;
}
@keyframes qiqiu4{
    0%{top:426px;}
    50%{top:420px;}
    100%{top:426px;}
}
@-webkit-keyframes qiqiu4{
    0%{top:426px;}
    50%{top:420px;}
    100%{top:426px;}
}
/*鞋子抖动*/
.shoesmovie{
    animation: shoesmovie 0.5s infinite ease;
    -webkit-animation: shoesmovie 0.5s infinite ease;
}
@keyframes shoesmovie{
    0%{transform: rotate(0deg)}
    50%{transform: rotate(2deg)}
    100%{transform: rotate(0deg)}
}
@-webkit-keyframes shoesmovie{
    0%{transform: rotate(0deg)}
    50%{transform: rotate(2deg)}
    100%{transform: rotate(0deg)}
}

/**********第*4*屏**********/
.screen4,.screen4con{
    height: 664px;
    background: url("../img/page4/bj.jpg") center bottom no-repeat;
    background-color:#fff;
    position: relative;
}
/*.screen4 .screen4con .xian{*/
    /*position: absolute;*/
    /*top: 0;*/
    /*left: -600px;*/
    /*z-index: 1;*/

/*}*/
.screen4 .screen4con .zi1{
    position: absolute;
    /*top: 234px;*/
    /*left: 872px;*/
    top: 56px;
    left: 852px;
    z-index: 2;
    opacity: 0;
}
.screen4 .screen4con .zi2{
    position: absolute;
    /*top: 392px;*/
    /*left: 10px;*/
    top: 308px;
    left: -80px;
    z-index: 2;
    opacity: 0;
}
.screen4 .screen4con .zi3{
    position: absolute;
    top: 0px;
    left: 186px;
    z-index: 2;
    opacity: 0;
}
.screen4 .screen4con .shoes{
    position: absolute;
    top: 10px;
    left: 366px;
    z-index: 2;
    opacity: 0;
}
.screen4 .screen4con .btn{
    position: absolute;
    top: 448px;
    left: 842px;
    z-index: 3;
    cursor: pointer;
    opacity: 0;
}

/**********第*5*屏**********/
.screen5,.screen5con{
    height: 716px;
    background: url("../img/page5/bj.jpg") center bottom no-repeat;
    background-color: #333d45;
    position: relative;
}

.screen5 .screen5con .zi1{
    position: absolute;
    /*top:114px;*/
    /*left: 66px;*/
    top:58px;
    left: -116px;
    z-index: 2;
    opacity: 0;
}

.screen5 .screen5con .zi2{
    position: absolute;
    /*top:686px;*/
    /*left: 858px;*/
    top:496px;
    left: 1100px;
    z-index: 2;
    opacity: 0;
}

.screen5 .screen5con .zi3{
    position: absolute;
    top:48px;
    left: 492px;
    z-index: 2;
    opacity: 0;
}
/*.screen5 .screen5con .bg1{*/
    /*position: absolute;*/
    /*top:240px;*/
    /*left: 378px;*/
    /*z-index: 1;*/
/*}*/
.screen5 .screen5con .shoes1{
    position: absolute;
    top:138px;
    left: 92px;
    z-index: 3;
    opacity: 0;
}
.screen5 .screen5con .shoes2{
    position: absolute;
    top:122px;
    left: 634px;
    z-index: 3;
    opacity: 0;
}
/*鞋子抬起动画*/
.shoesmovie1{
    animation: shoesmovie1 2s,ease-in-out;
    -webkit-animation: shoesmovie1 2s,ease-in-out;

    -webkit-transform-origin: 115px 495px;
    transform-origin: 115px 495px;
}
@-webkit-keyframes shoesmovie1 {
    0% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes shoesmovie1 {
    0% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
.shoesmovie2{
    animation: shoesmovie2 1s 1s ease-in-out;
    -webkit-animation: shoesmovie2 1s 1s ease-in-out;

    -webkit-transform-origin: 481px 306px;
    transform-origin: 481px 306px;
}
@-webkit-keyframes shoesmovie2 {
    0% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes shoesmovie2 {
    0% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.screen5 .screen5con .btn{
    position: absolute;
    top:394px;
    left: 88px;
    z-index: 3;
    opacity: 0;
}
.screen5 .screen5con .hua1{
    position: absolute;
    top:300px;
    left: -142px;
    z-index: 1;
}
.screen5 .screen5con .hua2{
    position: absolute;
    top:56px;
    left: 350px;
    z-index: 1;
}
.screen5 .screen5con .hua3{
    position: absolute;
    top:226px;
    left: 1145px;
    z-index: 1;
}
.screen5 .screen5con .hua4{
    position: absolute;
    top:294px;
    left: 1175px;
    z-index: 1;
}
.screen5 .screen5con .hua5{
    position: absolute;
    top:120px;
    left: 1185px;
    z-index: 1;
}
.screen5 .screen5con .hua6{
    position: absolute;
    top:18px;
    left: 1444px;
    z-index: 1;
}


/**********第*6*屏**********/
.screen6,.screen6con{
    height: 694px;
    background: url("../img/page6/bj.jpg") center bottom no-repeat;
    /*background:#000;*/
    background-color: #fff;
    position: relative;
}
.screen6 .screen6con .shoes{
    position: absolute;
    top: 38px;
    left: 280px;
    z-index: 2;
    opacity: 0;
}
.shoes6movie{
    animation: shoes6movie 1.5s ease-in-out;
    -webkit-animation: shoes6movie 1.5s  ease-in-out;
}
@-webkit-keyframes shoes6movie {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes shoes6movie {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.screen6 .screen6con .zi1{
    position: absolute;
    /*top: 204px;*/
    /*left: 30px;*/
    top: 228px;
    left: -140px;
    z-index: 4;
    opacity: 0;
}
.screen6 .screen6con .zi2{
    position: absolute;
    top: 30px;
    left: 286px;
    z-index: 4;
    opacity: 0;
}
.screen6 .screen6con .btn{
    position: absolute;
    top: 28px;
    left: 882px;
    z-index: 4;
    opacity: 0;
}
.screen6 .screen6con .xuehua1{
    position: absolute;
    top: 100px;
    left: 34px;
    z-index: 1;
}
.screen6 .screen6con .xuehua2{
    position: absolute;
    top: 204px;
    left: 990px;
    z-index: 1;
}



/**********第*7*屏**********/
.screen7,.screen7con{
    height: 794px;
    background: url("../img/page7/bj.jpg") center bottom no-repeat;
    background-color: #333d45;
    position: relative;
}
.screen7 .screen7con .zi1{
    position: absolute;
    /*top: 20px;*/
    /*left: 304px;*/
    top: 24px;
    left: 450px;
    opacity: 0;
    z-index: 1;
}
.screen7 .screen7con .zi2{
    position: absolute;
    top: 40px;
    left: 570px;
    opacity: 0;
    z-index: 1;
}
.screen7 .screen7con .btn{
    position: absolute;
    top: 680px;
    left: 574px;
    opacity: 0;
    z-index: 2;
}
.screen7 .screen7con .shoescode{
    position: absolute;
    top: 702px;
    left: 394px;
    opacity: 0;
}
.screen7 .screen7con .shoes{
    position: absolute;
    top: 164px;
    left: 0;
    opacity: 0;
    z-index: 1;
}
.screen7 .screen7con ul{
    position: absolute;
    top: 180px;
    left:40px;
    display: block;
    height: 280px;
    width: 1200px;
    z-index: 10;
}
.screen7 .screen7con ul li{
    opacity:0;
    cursor: pointer;
}
.screen7 .screen7con ul li.li1{
    height: 180px;
    width: 320px;
    z-index: 1;
    background-color: red;
}
.screen7 .screen7con ul li.li2{
    height: 200px;
    width: 340px;
    z-index: 2;
    margin-top: 0px;
    margin-left: 70px;
    background-color: blue;
}
.screen7 .screen7con ul li.li3{
    height: 300px;
    width: 280px;
    z-index: 3;
    margin-top: -230px;
    margin-left: 420px;
    background-color: #abcdef;
}
.screen7 .screen7con ul li.li4{
    height: 250px;
    width: 320px;
    z-index: 4;
    margin-top: -330px;
    margin-left: 700px;
    background-color: red;
}
.screen7 .screen7con ul li.li5{
    height: 170px;
    width: 340px;
    z-index: 5;
    margin-top: -390px;
    margin-left: 750px;
    background-color: blue;
}