html, body{
height:100%;
width:100%;
background-color: #2ea7e0;
font-family:"Noto Sans CJK TC Bold", "微軟正黑體",Verdana, Geneva, sans-serif;
min-width: 900px;
}
.container-fluid {
padding-right: 0;
padding-left:0;
}
a{
text-decoration:none !important;
outline:none !important;
}
/*----------------indexWrap---------------------*/
.indexWrap{
z-index:1;
min-height: 850px;
height: 100%;
overflow: hidden;
}
.index_logo{
position: absolute;
width: 450px;
left: 40px;
top: 30px;
z-index: 3;
}
.index_center{
position: absolute;
width:660px;
height:600px;
left:50%;
top:50%;
transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
z-index:3;
}
.index_bgBall{
position: absolute;
width:100%;
left:0;
top:50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
z-index: 1;
}
.index_bgBall_ring1{
position: absolute;
width:100%;
height: 100%;
border-radius: 50%;
left:0;
top:0;
border:#6cceef 10px solid;
animation: bgBall1 8s 2s linear infinite;
-webkit-animation: bgBall1 8s 2s linear infinite;
-moz-animation: bgBall1 8s 2s linear infinite;
}
@keyframes bgBall1 {
0%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.3); opacity: 1; } 75%{ transform: scale(1.4); opacity: 0;} 100%{ transform: scale(1); opacity: 0;}
}
@-moz-keyframes bgBall1 {
0%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.3); opacity: 1; } 75%{ transform: scale(1.4); opacity: 0;} 100%{ transform: scale(1); opacity: 0;}
}
@-webkit-keyframes bgBall1 {
0%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.3); opacity: 1; } 75%{ transform: scale(1.4); opacity: 0;} 100%{ transform: scale(1); opacity: 0;}
}
.index_bgBall_ring2{
position: absolute;
width:100%;
height: 100%;
border-radius: 50%;
left:0;
top:0;
border:#6cceef 6px solid;
animation: bgBall2 5s 3s linear infinite;
-webkit-animation: bgBall2 5s 3s linear infinite;
-moz-animation: bgBall2 5s 3s linear infinite;
}
@keyframes bgBall2 {
0%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.15); opacity: 1; } 75%{ transform: scale(1.2); opacity: 0;} 100%{ transform: scale(1); opacity: 0;}
}
@-moz-keyframes bgBall2 {
0%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.15); opacity: 1; } 75%{ transform: scale(1.2); opacity: 0;} 100%{ transform: scale(1); opacity: 0;}
}
@-webkit-keyframes bgBall2 {
0%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.15); opacity: 1; } 75%{ transform: scale(1.2); opacity: 0;} 100%{ transform: scale(1); opacity: 0;}
}
.index_TIT{
position: absolute;
width:90%;
z-index: 3;
left:5%;
top:5%;
}
.index_TIT_1, .index_TIT_2{
position: relative;
width:100%;
left:0;
top:0;
z-index: 2;
}
.index_TIT_2{
bottom:0;
top:auto;
}
.index_btn{
width: 360px;
height: 90px;
left: 50%;
top: 50%;
margin: 250px 0 0 -180px;
z-index: 5;
background-color: #fff100;
border-radius: 50px;
}
.index_btn_txt{
display: block;
width:210px;
position: absolute;
left:50%;
top:50%;
margin: -27px 0 0 -105px;
animation: indexBtn 1s 2s linear infinite;
-webkit-animation: indexBtn 1s 2s linear infinite;
-moz-animation: indexBtn 1s 2s linear infinite;
}
@keyframes indexBtn {
0%{ transform: scale(1); } 50%{ transform: scale(1.1); } 100%{ transform: scale(1); }
}
@-moz-keyframes indexBtn {
0%{ -moz-transform: scale(1); } 50%{ -moz-transform: scale(1.1); } 100%{ -moz-transform: scale(1); }
}
@-webkit-keyframes indexBtn {
0%{ -webkit-transform: scale(1); } 50%{ -webkit-transform: scale(1.1); } 100%{ -webkit-transform: scale(1); }
}
.index_copy{
position: absolute;
width: 200px;
right: 20px;
bottom: 15px;
z-index: 0;
}
.index_Role_1{
position: absolute;
width:455px;
left:50%;
top:50%;
z-index: 4;
margin: -10px 0 0 -830px;
animation: indexRole1 7s linear infinite;
-webkit-animation: indexRole1 7s linear infinite;
-moz-animation: indexRole1 7s linear infinite;
}
@keyframes indexRole1 {
0%{ top:50%; } 50%{ top:47%; } 100%{ top:50%; }
}
@-moz-keyframes indexRole1 {
0%{ top:50%; } 50%{ top:47%; } 100%{ top:50%; }
}
@-webkit-keyframes indexRole1 {
0%{ top:50%; } 50%{ top:47%; } 100%{ top:50%; }
}
.index_Role_2{
position: absolute;
width:211px;
left:50%;
top:50%;
z-index: 4;
margin: -250px 0 0 550px;
animation: indexRole2 6s linear infinite;
-webkit-animation: indexRole2 6s linear infinite;
-moz-animation: indexRole2 6s linear infinite;
}
@keyframes indexRole2 {
0%{ top:50%; } 50%{ top:47%; } 100%{ top:50%; }
}
@-moz-keyframes indexRole2 {
0%{ top:50%; } 50%{ top:47%; } 100%{ top:50%; }
}
@-webkit-keyframes indexRole2 {
0%{ top:50%; } 50%{ top:47%; } 100%{ top:50%; }
}
.index_Role_3{
position: absolute;
width:194px;
left:50%;
top:50%;
z-index: 4;
margin: 100px 0 0 400px;
animation: indexRole3 7s linear infinite;
-webkit-animation: indexRole3 7s linear infinite;
-moz-animation: indexRole3 7s linear infinite;
}
@keyframes indexRole3 {
0%{ top:50%; } 50%{ top:52%; } 100%{ top:50%; }
}
@-moz-keyframes indexRole3 {
0%{ top:50%; } 50%{ top:52%; } 100%{ top:50%; }
}
@-webkit-keyframes indexRole3 {
0%{ top:50%; } 50%{ top:52%; } 100%{ top:50%; }
}
.index_Role_4{
position: absolute;
width:192px;
left:50%;
top:50%;
z-index: 4;
margin: -350px 0 0 -600px;
animation: indexRole4 7s linear infinite;
-webkit-animation: indexRole4 7s linear infinite;
-moz-animation: indexRole4 7s linear infinite;
}
@keyframes indexRole4 {
0%{ left:50%; } 50%{ left:49%; } 100%{ left:50%; }
}
@-moz-keyframes indexRole4 {
0%{ left:50%; } 50%{ left:49%; } 100%{ left:50%; }
}
@-webkit-keyframes indexRole4 {
0%{ left:50%; } 50%{ left:49%; } 100%{ left:50%; }
}
.index_Role_5{
position: absolute;
width:167px;
left:50%;
top:50%;
z-index: 4;
margin: -360px 0 0 270px;
animation: indexRole5 6s linear infinite;
-webkit-animation: indexRole5 6s linear infinite;
-moz-animation: indexRole5 6s linear infinite;
transform-origin: center bottom;
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
}
@keyframes indexRole5 {
0%{ transform: rotate(0deg); } 25%{ transform: rotate(-5deg); } 50%{ transform: rotate(0deg); } 75%{ transform: rotate(5deg); } 100%{ transform: rotate(0deg); }
}
@-moz-keyframes indexRole5 {
0%{ -moz-transform: rotate(0deg); } 25%{ -moz-transform: rotate(-5deg); } 50%{ -moz-transform: rotate(0deg); }
75%{ -moz-transform: rotate(5deg); } 100%{ -moz-transform: rotate(0deg); }
}
@-webkit-keyframes indexRole5 {
0%{ -webkit-transform: rotate(0deg); } 25%{ -webkit-transform: rotate(-5deg); } 50%{ -webkit-transform: rotate(0deg); }
75%{ -webkit-transform: rotate(5deg); } 100%{ -webkit-transform: rotate(0deg); }
}
/*----------------secondWrap---------------------*/
.secondWrap{
height: auto;
z-index:2;
padding-top: 80px;
overflow: hidden;
}
.video_bg{
position: relative;
width:100%;
left:0;
top:0;
z-index: 0;
}
.video_bg1{
position: relative;
opacity: 1;
width:100%;
left:0;
top:0;
animation: videoBg1 1s linear infinite;
-webkit-animation: videoBg1 1s linear infinite;
-moz-animation: videoBg1 1s linear infinite;
}
@keyframes videoBg1 {
0%{ position: relative; opacity: 1; z-index: 2; } 49%{ position: relative; opacity: 1; z-index: 2; }
50%{ position: absolute; opacity: 0; z-index: 1; } 99%{ position: absolute; opacity: 0; z-index: 1; } 100%{ position: relative; opacity: 1; z-index: 2; }
}
@-moz-keyframes videoBg1 {
0%{ position: relative; opacity: 1; z-index: 2; } 49%{ position: relative; opacity: 1; z-index: 2; }
50%{ position: absolute; opacity: 0; z-index: 1; } 99%{ position: absolute; opacity: 0; z-index: 1; } 100%{ position: relative; opacity: 1; z-index: 2; }
}
@-webkit-keyframes videoBg1 {
0%{ position: relative; opacity: 1; z-index: 2; } 49%{ position: relative; opacity: 1; z-index: 2; }
50%{ position: absolute; opacity: 0; z-index: 1; } 99%{ position: absolute; opacity: 0; z-index: 1; } 100%{ position: relative; opacity: 1; z-index: 2; }
}
.video_bg2{
position: absolute;
opacity: 0;
width:100%;
left:0;
top:0;
animation: videoBg2 1s linear infinite;
-webkit-animation: videoBg2 1s linear infinite;
-moz-animation: videoBg2 1s linear infinite;
}
@keyframes videoBg2 {
0%{ position: absolute; opacity: 0; z-index: 1; } 49%{ position: absolute; opacity: 0; z-index: 1; }
50%{ position: relative; opacity: 1; z-index: 2; } 99%{ position: relative; opacity: 1; z-index: 2; } 100%{ position: absolute; opacity: 0; z-index: 1; }
}
@-moz-keyframes videoBg2 {
0%{ position: absolute; opacity: 0; z-index: 1; } 49%{ position: absolute; opacity: 0; z-index: 1; }
50%{ position: relative; opacity: 1; z-index: 2; } 99%{ position: relative; opacity: 1; z-index: 2; } 100%{ position: absolute; opacity: 0; z-index: 1; }
}
@-webkit-keyframes videoBg2 {
0%{ position: absolute; opacity: 0; z-index: 1; } 49%{ position: absolute; opacity: 0; z-index: 1; }
50%{ position: relative; opacity: 1; z-index: 2; } 99%{ position: relative; opacity: 1; z-index: 2; } 100%{ position: absolute; opacity: 0; z-index: 1; }
}
.video_screen{
position: absolute;
width: 1000px;
height: 567px;
left: 50%;
top: 65%;
margin: -290px 0 0 -500px;
z-index: 2;
}
#videoShow{
border: #7de8fa 5px solid;
border-radius: 25px;
overflow: hidden;
}
.video_TIT{
display: block;
position: absolute;
width: 315px;
left: -125px;
top: -90px;
z-index: 3;
}
.video_TIT_ball{
position: absolute;
width: 60px;
left: 93px;
top: 70px;
z-index: 3;
animation: indexBtn .7s linear infinite;
-webkit-animation: indexBtn .7s linear infinite;
-moz-animation: indexBtn .7s linear infinite;
}
/*----------------thirdWrap---------------------*/
.thirdWrap{
height: 1100px;
z-index:2;
overflow: hidden;
background: url(../images/third_bgIcon.png)repeat;
}
.thirdWrap_Left, .thirdWrap_right{
position: absolute;
width:550px;
right:49%;
top:45%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
}
.thirdWrap_left_icon{
position: absolute;
width: 80px;
left: -35px;
top: -35px;
animation: thirdLeftIcon 1.5s linear infinite;
-webkit-animation: thirdLeftIcon 1.5s linear infinite;
-moz-animation: thirdLeftIcon 1.5s linear infinite;
}
@keyframes thirdLeftIcon {
0%{ margin-top: 0; } 50%{ margin-top: -20px; } 100%{ margin-top: 0; }
}
@-moz-keyframes thirdLeftIcon {
0%{ margin-top: 0; } 50%{ margin-top: -20px; } 100%{ margin-top: 0; }
}
@-webkit-keyframes thirdLeftIcon {
0%{ margin-top: 0; } 50%{ margin-top: -20px; } 100%{ margin-top: 0; }
}
.thirdWrap_left_TIT_main, .thirdWrap_right_TIT_main{
position: absolute;
width:96%;
background-color: rgba(0,0,0,.8);
height: 100px;
left:2%;
top:50%;
margin-top: 60px;
}
.thirdWrap_TIT{
position: absolute;
width:400px;
left:50%;
top:50%;
transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
display: block;
}
.thirdStar{
position: absolute;
width: 60px;
left: 50%;
top: -15px;
margin-left: 45px;
}
.thirdWrap_Left:hover .thirdWrap_TIT, .thirdWrap_right:hover .thirdWrap_TIT{
width:450px;
}
.thirdWrap_right{
right:auto;
left:49%;
margin-top: 100px;
}
.thirdWrap_right_icon{
position: absolute;
width: 105px;
right: -45px;
top: -50px;
animation: thirdLeftIcon 1.5s linear infinite;
-webkit-animation: thirdLeftIcon 1.5s linear infinite;
-moz-animation: thirdLeftIcon 1.5s linear infinite;
}
.thirdWrap_right_TIT_main{
background-color: rgba(0,0,0,.5);
margin-top: 80px;
}
.thirdWrap_Left.active{
z-index: 3;
}
/*----------------fourthWrap---------------------*/
.fourthWrap{
height: auto;
z-index:2;
overflow: hidden;
margin: -200px auto 0;
}
.fourthWrap_show_1{
position: relative;
width:100%;
z-index: 3;
margin:0 auto;
}
.fourthWrap_top, .fourthWrap_middle_Bg{
position:relative;
width:100%;
margin:0 auto;
}
.fourthWrap_show_1 main{
position: relative;
width:100%;
background-color:#ffe100;
height: auto;
margin:0 auto;
padding-top: 80px;
padding-bottom: 100px;
}
.fourthWrap_show_circleLeft{
position: absolute;
width:600px;
left:-400px;
top:0;
z-index: 0;
animation: fourthCircle 30s linear infinite;
-webkit-animation: fourthCircle 30s linear infinite;
-moz-animation: fourthCircle 30s linear infinite;
opacity: .5;
}
@keyframes fourthCircle {
0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); }
}
@-moz-keyframes fourthCircle {
0%{ -moz-transform: rotate(0deg); } 100%{ -moz-transform: rotate(360deg); }
}
@-webkit-keyframes fourthCircle {
0%{ -webkit-transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); }
}
.fourthWrap_show_centerIcon{
position: relative;
width:900px;
margin:0 auto 0;
z-index: 0;
}
.fourthWrap_show_flog{
position: absolute;
width: 1000px;
right: -500px;
top:0;
z-index: 0;
opacity: .5;
}
.fourthWrap_show_1_TIT{
position: absolute;
width: 500px;
left: 50%;
margin-left: -250px;
top: -105px;
}
.fourthWrap_show_shoe{
position: absolute;
width: 700px;
height: 500px;
left: 50%;
top: 50%;
margin: -280px 0 0 -350px;
/*border: #000 3px solid; */
}
.fourthWrap_show_shoe1, .fourthWrap_show_shoe2, .fourthWrap_show_shoe3, .fourthWrap_show_shoe4{
position: absolute;
width:100%;
height: 100%;
left:0;
top:0;
z-index: 1;
opacity: 0;
}
.fourthWrap_show_shoe1{
position: relative;
z-index: 2;
opacity: 1;
animation: shoeShow1 8s linear infinite;
-webkit-animation: shoeShow1 8s linear infinite;
-moz-animation: shoeShow1 8s linear infinite;
}
@keyframes shoeShow1 {
0%{ position: relative; opacity: 1; z-index: 2; } 22%{ position: relative; opacity: 1; z-index: 2; }
25%{ position: absolute; opacity: 0; z-index: 1; } 97%{ position: absolute; opacity: 0; z-index: 1; } 100%{ position: relative; opacity: 1; z-index: 2; }
}
@-moz-keyframes shoeShow1 {
0%{ position: relative; opacity: 1; z-index: 2; } 22%{ position: relative; opacity: 1; z-index: 2; }
25%{ position: absolute; opacity: 0; z-index: 1; } 97%{ position: absolute; opacity: 0; z-index: 1; } 100%{ position: relative; opacity: 1; z-index: 2; }
}
@-webkit-keyframes shoeShow1 {
0%{ position: relative; opacity: 1; z-index: 2; } 22%{ position: relative; opacity: 1; z-index: 2; }
25%{ position: absolute; opacity: 0; z-index: 1; } 97%{ position: absolute; opacity: 0; z-index: 1; } 100%{ position: relative; opacity: 1; z-index: 2; }
}
.fourthWrap_show_shoe2{
z-index: 1;
opacity: 0;
animation: shoeShow2 8s linear infinite;
-webkit-animation: shoeShow2 8s linear infinite;
-moz-animation: shoeShow2 8s linear infinite;
}
@keyframes shoeShow2 {
0%{ position: absolute; opacity: 0; z-index: 1; } 22%{ position: absolute; opacity: 0; z-index: 1; }
25%{ position: relative; opacity: 1; z-index: 2; } 47%{ position: relative; opacity: 1; z-index: 2; } 50%{ position: absolute; opacity: 0; z-index: 1; }
}
@-moz-keyframes shoeShow2 {
0%{ position: absolute; opacity: 0; z-index: 1; } 22%{ position: absolute; opacity: 0; z-index: 1; }
25%{ position: relative; opacity: 1; z-index: 2; } 47%{ position: relative; opacity: 1; z-index: 2; } 50%{ position: absolute; opacity: 0; z-index: 1; }
}
@-webkit-keyframes shoeShow2 {
0%{ position: absolute; opacity: 0; z-index: 1; } 22%{ position: absolute; opacity: 0; z-index: 1; }
25%{ position: relative; opacity: 1; z-index: 2; } 47%{ position: relative; opacity: 1; z-index: 2; } 50%{ position: absolute; opacity: 0; z-index: 1; }
}
.fourthWrap_show_shoe3{
z-index: 1;
opacity: 0;
animation: shoeShow3 8s linear infinite;
-webkit-animation: shoeShow3 8s linear infinite;
-moz-animation: shoeShow3 8s linear infinite;
}
@keyframes shoeShow3 {
0%{ position: absolute; opacity: 0; z-index: 1; } 47%{ position: absolute; opacity: 0; z-index: 1; }
50%{ position: relative; opacity: 1; z-index: 2; } 72%{ position: relative; opacity: 1; z-index: 2; } 75%{ position: absolute; opacity: 0; z-index: 1; }
}
@-moz-keyframes shoeShow3 {
0%{ position: absolute; opacity: 0; z-index: 1; } 47%{ position: absolute; opacity: 0; z-index: 1; }
50%{ position: relative; opacity: 1; z-index: 2; } 72%{ position: relative; opacity: 1; z-index: 2; } 75%{ position: absolute; opacity: 0; z-index: 1; }
}
@-webkit-keyframes shoeShow3 {
0%{ position: absolute; opacity: 0; z-index: 1; } 47%{ position: absolute; opacity: 0; z-index: 1; }
50%{ position: relative; opacity: 1; z-index: 2; } 72%{ position: relative; opacity: 1; z-index: 2; } 75%{ position: absolute; opacity: 0; z-index: 1; }
}
.fourthWrap_show_shoe4{
z-index: 1;
opacity: 0;
animation: shoeShow4 8s linear infinite;
-webkit-animation: shoeShow4 8s linear infinite;
-moz-animation: shoeShow4 8s linear infinite;
}
@keyframes shoeShow4 {
0%{ position: absolute; opacity: 0; z-index: 1; } 72%{ position: absolute; opacity: 0; z-index: 1; }
75%{ position: relative; opacity: 1; z-index: 2; } 97%{ position: relative; opacity: 1; z-index: 2; } 100%{ position: absolute; opacity: 0; z-index: 1; }
}
@-moz-keyframes shoeShow4 {
0%{ position: absolute; opacity: 0; z-index: 1; } 72%{ position: absolute; opacity: 0; z-index: 1; }
75%{ position: relative; opacity: 1; z-index: 2; } 97%{ position: relative; opacity: 1; z-index: 2; } 100%{ position: absolute; opacity: 0; z-index: 1; }
}
@-webkit-keyframes shoeShow4 {
0%{ position: absolute; opacity: 0; z-index: 1; } 72%{ position: absolute; opacity: 0; z-index: 1; }
75%{ position: relative; opacity: 1; z-index: 2; } 97%{ position: relative; opacity: 1; z-index: 2; } 100%{ position: absolute; opacity: 0; z-index: 1; }
}
.fourthWrap_show_detailLeft{
position: absolute;
width: 350px;
left: 50%;
top: 50%;
margin: -150px 0 0 -730px;
/*border: #000 3px solid;*/
}
.fourthWrap_show_detailRight{
position: absolute;
width: 350px;
left: 50%;
top: 50%;
margin: -300px 0 0 380px;
/*border: #000 3px solid;*/
}
.fourthWrap_show_detailLeft1, .fourthWrap_show_detailLeft2, .fourthWrap_show_detailLeft3,
.fourthWrap_show_detailRight1, .fourthWrap_show_detailRight2, .fourthWrap_show_detailRight3{
position: absolute;
width:100%;
height: 100%;
left:0;
top:0;
z-index: 1;
opacity: 0;
}
.fourthWrap_show_detailLeft1, .fourthWrap_show_detailRight1{
position: relative;
z-index: 2;
opacity: 1;
animation: shoeDetailLeft1 6s linear infinite;
-webkit-animation: shoeDetailLeft1 6s linear infinite;
-moz-animation: shoeDetailLeft1 6s linear infinite;
}
@keyframes shoeDetailLeft1 {
0%{ position: relative; opacity: 1; z-index: 2; } 30%{ position: relative; opacity: 1; z-index: 2; }
33%{ position: absolute; opacity: 0; z-index: 1; } 97%{ position: absolute; opacity: 0; z-index: 1; } 100%{ position: relative; opacity: 1; z-index: 2; }
}
@-moz-keyframes shoeDetailLeft1 {
0%{ position: relative; opacity: 1; z-index: 2; } 30%{ position: relative; opacity: 1; z-index: 2; }
33%{ position: absolute; opacity: 0; z-index: 1; } 97%{ position: absolute; opacity: 0; z-index: 1; } 100%{ position: relative; opacity: 1; z-index: 2; }
}
@-webkit-keyframes shoeDetailLeft1 {
0%{ position: relative; opacity: 1; z-index: 2; } 30%{ position: relative; opacity: 1; z-index: 2; }
33%{ position: absolute; opacity: 0; z-index: 1; } 97%{ position: absolute; opacity: 0; z-index: 1; } 100%{ position: relative; opacity: 1; z-index: 2; }
}
.fourthWrap_show_detailLeft2, .fourthWrap_show_detailRight2{
z-index: 1;
opacity: 0;
animation: shoeDetailLeft2 6s linear infinite;
-webkit-animation: shoeDetailLeft2 6s linear infinite;
-moz-animation: shoeDetailLeft2 6s linear infinite;
}
@keyframes shoeDetailLeft2 {
0%{ position: absolute; opacity: 0; z-index: 1; } 30%{ position: absolute; opacity: 0; z-index: 1; }
33%{ position: relative; opacity: 1; z-index: 2; } 64%{ position: relative; opacity: 1; z-index: 2; } 67%{ position: absolute; opacity: 0; z-index: 1; }
}
@-moz-keyframes shoeDetailLeft2 {
0%{ position: absolute; opacity: 0; z-index: 1; } 30%{ position: absolute; opacity: 0; z-index: 1; }
33%{ position: relative; opacity: 1; z-index: 2; } 64%{ position: relative; opacity: 1; z-index: 2; } 67%{ position: absolute; opacity: 0; z-index: 1; }
}
@-webkit-keyframes shoeDetailLeft2 {
0%{ position: absolute; opacity: 0; z-index: 1; } 30%{ position: absolute; opacity: 0; z-index: 1; }
33%{ position: relative; opacity: 1; z-index: 2; } 64%{ position: relative; opacity: 1; z-index: 2; } 67%{ position: absolute; opacity: 0; z-index: 1; }
}
.fourthWrap_show_detailLeft3, .fourthWrap_show_detailRight3{
z-index: 1;
opacity: 0;
animation: shoeDetailLeft3 6s linear infinite;
-webkit-animation: shoeDetailLeft3 6s linear infinite;
-moz-animation: shoeDetailLeft3 6s linear infinite;
}
@keyframes shoeDetailLeft3 {
0%{ position: absolute; opacity: 0; z-index: 1; } 64%{ position: absolute; opacity: 0; z-index: 1; }
67%{ position: relative; opacity: 1; z-index: 2; } 97%{ position: relative; opacity: 1; z-index: 2; } 100%{ position: absolute; opacity: 0; z-index: 1; }
}
@-moz-keyframes shoeDetailLeft3 {
0%{ position: absolute; opacity: 0; z-index: 1; } 64%{ position: absolute; opacity: 0; z-index: 1; }
67%{ position: relative; opacity: 1; z-index: 2; } 97%{ position: relative; opacity: 1; z-index: 2; } 100%{ position: absolute; opacity: 0; z-index: 1; }
}
@-webkit-keyframes shoeDetailLeft3 {
0%{ position: absolute; opacity: 0; z-index: 1; } 64%{ position: absolute; opacity: 0; z-index: 1; }
67%{ position: relative; opacity: 1; z-index: 2; } 97%{ position: relative; opacity: 1; z-index: 2; } 100%{ position: absolute; opacity: 0; z-index: 1; }
}
.fourthWrap_show_detailLeft_icon{
position: absolute;
width: 180px;
left: -26px;
top: -205px;
z-index: 3;
animation: shoeDetailLefIcon 1.2s linear infinite;
-webkit-animation: shoeDetailLefIcon 1.2s linear infinite;
-moz-animation: shoeDetailLefIcon 1.2s linear infinite;
}
@keyframes shoeDetailLefIcon {
0%{ margin-top: 0; } 50%{ margin-top: -20px; } 100%{ margin-top: 0px; }
}
@-moz-keyframes shoeDetailLefIcon {
0%{ margin-top: 0; } 50%{ margin-top: -20px; } 100%{ margin-top: 0px; }
}
@-webkit-keyframes shoeDetailLefIcon {
0%{ margin-top: 0; } 50%{ margin-top: -20px; } 100%{ margin-top: 0px; }
}
.fourthWrap_show_nameCard{
position: absolute;
width: 200px;
bottom: -50px;
left: -170px;
z-index: 2;
}
.fourthWrap_show_cloudModel{
position: absolute;
width:450px;
left:50%;
top:50%;
margin: 50px 0 0 280px;
z-index: 2;
animation: cloudModel 10s linear infinite;
-webkit-animation: cloudModel 10s linear infinite;
-moz-animation: cloudModel 10s linear infinite;
}
@keyframes cloudModel {
0%{ top:50%; } 50%{ top:55%; } 100%{ top:50%; }
}
@-moz-keyframes cloudModel {
0%{ top:50%; } 50%{ top:55%; } 100%{ top:50%; }
}
@-webkit-keyframes cloudModel {
0%{ top:50%; } 50%{ top:55%; } 100%{ top:50%; }
}
.fourthWrap_show_TIT{
position: absolute;
width:650px;
top:70px;
left:50%;
margin-left: -325px;
z-index: 2;
}
.fourthWrap_clothesShow_TIT_icon{
position: absolute;
width: 200px;
top: -110px;
left: -115px;
animation: clothesShowTITIcon 12s linear infinite;
-webkit-animation: clothesShowTITIcon 12s linear infinite;
-moz-animation: clothesShowTITIcon 12s linear infinite;
}
@keyframes clothesShowTITIcon {
0%{ margin:40px 0 0 -35px } 50%{ margin:0 0 0 0; } 100%{ margin:40px 0 0 -35px }
}
@-moz-keyframes clothesShowTITIcon {
0%{ margin:40px 0 0 -35px } 50%{ margin:0 0 0 0; } 100%{ margin:40px 0 0 -35px }
}
@-webkit-keyframes clothesShowTITIcon {
0%{ margin:40px 0 0 -35px } 50%{ margin:0 0 0 0; } 100%{ margin:40px 0 0 -35px }
}
.fourthWrap_clothesShow_TIT_ball{
position: absolute;
width: 60px;
top: -15px;
right: 6px;
animation: clothesShowTITBall 1s linear infinite;
-webkit-animation: clothesShowTITBall 1s linear infinite;
-moz-animation: clothesShowTITBall 1s linear infinite;
}
@keyframes clothesShowTITBall {
0%{ margin-top: 0; } 50%{ margin-top: -10px; } 100%{ margin-top: 0px; }
}
@-moz-keyframes clothesShowTITBall {
0%{ margin-top: 0; } 50%{ margin-top: -10px; } 100%{ margin-top: 0px; }
}
@-webkit-keyframes clothesShowTITBall {
0%{ margin-top: 0; } 50%{ margin-top: -10px; } 100%{ margin-top: 0px; }
}
.fourthWrap_show_nav{
position: absolute;
width: 450px;
height: 40px;
top: 285px;
left: 50%;
z-index: 9;
margin-left: 330px;
}
.fourthWrap_show_nav_1{
position: absolute;
display: block;
width:32%;
left:0;
top:0;
}
.fourthWrap_show_nav_2{
position: absolute;
display: block;
width:32%;
left:34%;
top:0;
}
.fourthWrap_show_nav_3{
position: absolute;
display: block;
width:32%;
right:0;
top:0;
}
.fourthWrap_show_navShoe{
position: absolute;
width:100%;
left: 2px;
top: -73px;
}
.fourthWrap_show_nav_1:hover>div, .fourthWrap_show_nav_2:hover>div, .fourthWrap_show_nav_3:hover>div{
top: -88px;
}
.fourthWrap_clothShow{
position: relative;
width:100%;
height: 630px;
margin:-22px auto 0;
background-color: #FFF;
z-index: 2;
}
.fourthWrap_clothShow_top{
position: absolute;
width:100%;
height: 35%;
left:0;
top:0;
background-color: #ffe62e;
}
.fourthWrap_clothShow_bottom{
position: absolute;
width:100%;
height: 45%;
left:0;
bottom:0;
background-color: #2c2c2c;
}
.fourthWrap_clothesShow_rightPoints{
position: absolute;
width:200px;
right:20px;
top: -247px;
z-index: 0;
}
.fourthWrap_clothShow_main{
position: absolute;
width:1000px;
height: 90%;
left:50%;
margin-left: -500px;
top:5%;
/*border:#000 3px solid;*/
}
.fourthWrap_clothShow_main_1, .fourthWrap_clothShow_main_2{
position: absolute;
width:100%;
height: 100%;
left:0;
top:0;
}
.fourthWrap_clothShow_main_1{
z-index: 2;
opacity: 1;
animation: clothesShow1 6s linear infinite;
-webkit-animation: clothesShow1 6s linear infinite;
-moz-animation: clothesShow1 6s linear infinite;
}
@keyframes clothesShow1 {
0%{ left: 0; opacity: 1; z-index: 2; } 45%{ left: 0; opacity: 1; z-index: 2; } 50%{ left: 50px; opacity: 0; z-index: 1; }
95%{ left:-50px; opacity: 0; z-index: 1; } 100%{ left:0; opacity: 1; z-index: 2; }
}
@-moz-keyframes clothesShow1 {
0%{ left: 0; opacity: 1; z-index: 2; } 45%{ left: 0; opacity: 1; z-index: 2; } 50%{ left: 50px; opacity: 0; z-index: 1; }
95%{ left:-50px; opacity: 0; z-index: 1; } 100%{ left:0; opacity: 1; z-index: 2; }
}
@-webkit-keyframes clothesShow1 {
0%{ left: 0; opacity: 1; z-index: 2; } 45%{ left: 0; opacity: 1; z-index: 2; } 50%{ left: 50px; opacity: 0; z-index: 1; }
95%{ left:-50px; opacity: 0; z-index: 1; } 100%{ left:0; opacity: 1; z-index: 2; }
}
.fourthWrap_clothShow_main_2{
z-index: 1;
opacity: 0;
animation: clothesShow2 6s linear infinite;
-webkit-animation: clothesShow2 6s linear infinite;
-moz-animation: clothesShow2 6s linear infinite;
}
@keyframes clothesShow2 {
0%{ left: 0; opacity: 0; z-index: 1; } 45%{ left:-50px; opacity: 0; z-index: 1; } 50%{ left: 0; opacity: 1; z-index: 2; }
95%{ left: 0; opacity: 1; z-index: 2; } 100%{ left: 50px; opacity: 0; z-index: 1; }
}
@-moz-keyframes clothesShow2 {
0%{ left: 0; opacity: 0; z-index: 1; } 45%{ left:-50px; opacity: 0; z-index: 1; } 50%{ left: 0; opacity: 1; z-index: 2; }
95%{ left: 0; opacity: 1; z-index: 2; } 100%{ left: 50px; opacity: 0; z-index: 1; }
}
@-webkit-keyframes clothesShow2 {
0%{ left: 0; opacity: 0; z-index: 1; } 45%{ left:-50px; opacity: 0; z-index: 1; } 50%{ left: 0; opacity: 1; z-index: 2; }
95%{ left: 0; opacity: 1; z-index: 2; } 100%{ left: 50px; opacity: 0; z-index: 1; }
}
.fourthWrap_clothesShow1_model1_1{
position: absolute;
width:350px;
left:50%;
top:50%;
margin: -210px 0 0 -400px;
z-index: 1;
}
.fourthWrap_clothesShow1_model1_2{
position: absolute;
width: 430px;
left: 50%;
top: 50%;
margin: -300px 0 0 0;
z-index: 2;
}
.fourthWrap_clothesShow1_AI1{
position: absolute;
width: 205px;
left: 50%;
top: 50%;
margin: -300px 0 0 -570px;
z-index: 1;
animation: indexRole3 4s linear infinite;
-webkit-animation: indexRole3 4s linear infinite;
-moz-animation: indexRole3 4s linear infinite;
}
.fourthWrap_clothesShow1_AI2{
position: absolute;
width: 248px;
left: 50%;
top: 50%;
margin: -210px 0 0 315px;
z-index: 1;
animation: indexRole3 3s linear infinite;
-webkit-animation: indexRole3 3s linear infinite;
-moz-animation: indexRole3 3s linear infinite;
}
.fourthWrap_clothesShow_airBall{
position: absolute;
width: 130px;
left: -93px;
top: 90px;
transform-origin:right bottom;
-webkit-transform-origin:right bottom;
-moz-transform-origin:right bottom;
animation: airBall 4s linear infinite;
-webkit-animation: airBall 4s linear infinite;
-moz-animation: airBall 4s linear infinite;
}
@keyframes airBall {
0%{ transform: rotate(0deg); } 25%{ transform: rotate(-10deg); } 50%{ transform: rotate(0deg); } 75%{ transform: rotate(10deg); } 100%{ transform: rotate(0deg); }
}
@-moz-keyframes airBall {
0%{ -moz-transform: rotate(0deg); } 25%{ -moz-transform: rotate(-10deg); } 50%{ -moz-transform: rotate(0deg); }
75%{ -moz-transform: rotate(10deg); } 100%{ -moz-transform: rotate(0deg); }
}
@-webkit-keyframes airBall {
0%{ -webkit-transform: rotate(0deg); } 25%{ -webkit-transform: rotate(-10deg); } 50%{ -webkit-transform: rotate(0deg); }
75%{ -webkit-transform: rotate(10deg); } 100%{ -webkit-transform: rotate(0deg); }
}
.fourthWrap_clothesShow1_model2_1{
position: absolute;
width: 390px;
left: 50%;
top: 50%;
margin: -315px 0 0 -505px;
z-index: 1;
animation: indexRole3 6s linear infinite;
-webkit-animation: indexRole3 6s linear infinite;
-moz-animation: indexRole3 6s linear infinite;
}
.fourthWrap_clothesShow1_model2_2{
position: absolute;
width: 230px;
left: 50%;
top: 50%;
margin: -335px 0 0 -100px;
z-index: 2;
}
.fourthWrap_clothesShow1_model2_3{
position: absolute;
width: 220px;
left: 50%;
top: 50%;
margin: -300px 0 0 130px;
z-index: 2;
}
.fourthWrap_clothesShow1_AI3{
position: absolute;
width: 170px;
left: 50%;
top: 50%;
margin: -140px 0 0 380px;
z-index: 1;
animation: indexRole3 4s linear infinite;
-webkit-animation: indexRole3 4s linear infinite;
-moz-animation: indexRole3 4s linear infinite;
}
.fourthWrap_clothShow_main_2 .fourthWrap_clothesShow_airBall{
left: -97px;
top: -6px;
}
.fourthWrap_clothesShow1_sp{
position: absolute;
width: 250px;
left: 20px;
bottom: 20px;
z-index: 8;
}
.fourthWrap_clothesShow1_spTIT{
position: absolute;
display: block;
width: 210px;
left: 0;
top: -25px;
animation: indexBtn 1.2s linear infinite;
-webkit-animation: indexBtn 1.2s linear infinite;
-moz-animation: indexBtn 1.2s linear infinite;
}
/*----------------fourthWrap_show_2---------------------*/
.fourthWrap_show_2 main{
position: relative;
width:100%;
background-color:#f3b859;
height: auto;
margin:0 auto;
padding-top: 80px;
padding-bottom: 100px;
}
.fourthWrap_show_2 main .fourthWrap_show_detailLeft_icon{
top: -190px;
}
.fourthWrap_show_2 .fourthWrap_clothShow_top {
background-color: #f3b859;
}
.fourthWrap_show_2 .fourthWrap_clothShow_bottom {
background-color: #f3ce91;
}
.fourthWrap_show_2 .fourthWrap_clothShow_main_1{
animation: none;
-webkit-animation:none;
-moz-animation: none;
}
.fourthWrap_clothesShow2_model1{
position: absolute;
width: 425px;
left: 50%;
top: 50%;
margin: -315px 0 0 -545px;
z-index: 1;
animation: indexRole3 6s linear infinite;
-webkit-animation: indexRole3 6s linear infinite;
-moz-animation: indexRole3 6s linear infinite;
}
.fourthWrap_clothesShow2_model2{
position: absolute;
width: 320px;
left: 50%;
top: 50%;
margin: -335px 0 0 -160px;
z-index: 2;
}
.fourthWrap_clothesShow2_model3{
position: absolute;
width: 275px;
left: 50%;
top: 50%;
margin: -385px 0 0 95px;
z-index: 2;
}
.fourthWrap_clothesShow2_AI1{
position: absolute;
width: 236px;
left: 50%;
top: 50%;
margin: -190px 0 0 400px;
z-index: 1;
animation: indexRole3 4s linear infinite;
-webkit-animation: indexRole3 4s linear infinite;
-moz-animation: indexRole3 4s linear infinite;
}
.fourthWrap_clothesShow2_AI2{
position: absolute;
width: 210px;
left: 50%;
top: 50%;
margin: 70px 0 0 -585px;
z-index: 1;
animation: indexRole3 4s linear infinite;
-webkit-animation: indexRole3 4s linear infinite;
-moz-animation: indexRole3 4s linear infinite;
}
.fourthWrap_show_2 .fourthWrap_clothesShow_airBall{
left: -111px;
top: 52px;
}
/*----------------fourthWrap_show_3---------------------*/
.fourthWrap_show_3 main{
position: relative;
width:100%;
background-color:#e98c3b;
height: auto;
margin:0 auto;
padding-top: 80px;
padding-bottom: 100px;
}
.fourthWrap_show_3 main .fourthWrap_show_detailLeft_icon{
top: -175px;
width: 270px;
}
.fourthWrap_show_3 .fourthWrap_clothShow_top {
background-color: #f5e17b;
}
.fourthWrap_show_3 .fourthWrap_clothShow_bottom {
background-color: #e98c3b;
}
.fourthWrap_show_3 .fourthWrap_clothesShow_TIT_icon {
width: 255px;
}
.fourthWrap_show_3 .fourthWrap_show_cloudModel {
width: 400px;
margin: 50px 0 0 320px;
}
.fourthWrap_clothesShow3_model1_1{
position: absolute;
width: 460px;
left: 50%;
top: 50%;
margin: -340px 0 0 -525px;
z-index: 1;
animation: indexRole3 6s linear infinite;
-webkit-animation: indexRole3 6s linear infinite;
-moz-animation: indexRole3 6s linear infinite;
}
.fourthWrap_clothesShow3_model1_2{
position: absolute;
width: 315px;
left: 50%;
top: 50%;
margin: -280px 0 0 -215px;
z-index: 2;
}
.fourthWrap_clothesShow3_model1_3{
position: absolute;
width:395px;
left: 50%;
top: 50%;
margin: -300px 0 0 55px;
z-index: 1;
}
.fourthWrap_clothesShow3_model2_1{
position: absolute;
width: 290px;
left: 50%;
top: 50%;
margin: -300px 0 0 -305px;
z-index: 2;
}
.fourthWrap_clothesShow3_model2_2{
position: absolute;
width: 231px;
left: 50%;
top: 50%;
margin: -288px 0 0 -7px;
z-index: 2;
}
.fourthWrap_clothesShow3_AI1{
position: absolute;
width: 280px;
left: 50%;
top: 50%;
margin: -110px 0 0 360px;
z-index: 1;
animation: indexRole3 4s linear infinite;
-webkit-animation: indexRole3 4s linear infinite;
-moz-animation: indexRole3 4s linear infinite;
}
.fourthWrap_clothesShow3_AI2{
position: absolute;
width: 270px;
left: 50%;
top: 50%;
margin: -53px 0 0 230px;
z-index: 1;
animation: indexRole3 4s linear infinite;
-webkit-animation: indexRole3 4s linear infinite;
-moz-animation: indexRole3 4s linear infinite;
}
.fourthWrap_show_3 .fourthWrap_clothShow_main_1 .fourthWrap_clothesShow_airBall{
left: 30px;
top: 160px;
}
.fourthWrap_show_3 .fourthWrap_clothShow_main_2 .fourthWrap_clothesShow_airBall{
left: -39px;
top: 105px;
}
/*----------------fourthWrap_show_4---------------------*/
.fourthWrap_show_4 main{
position: relative;
width:100%;
background-color:#9ededd;
height: auto;
margin:0 auto;
padding-top: 80px;
padding-bottom: 100px;
}
.fourthWrap_show_4 main .fourthWrap_show_detailLeft_icon{
top: -175px;
width: 270px;
}
.fourthWrap_show_4 .fourthWrap_clothShow_top {
background-color: #f97e8b;
}
.fourthWrap_show_4 .fourthWrap_clothShow_bottom {
background-color: #9ededd;
}
.fourthWrap_show_4 .fourthWrap_clothesShow_TIT_icon {
width: 230px;
top: -110px;
left: -145px;
}
.fourthWrap_show_4 .fourthWrap_show_cloudModel {
width: 400px;
margin: 50px 0 0 320px;
}
.fourthWrap_show_4 .fourthWrap_clothShow_main_1{
animation: none;
-webkit-animation:none;
-moz-animation: none;
}
.fourthWrap_clothesShow4_model1{
position: absolute;
width: 353px;
left: 50%;
top: 50%;
margin: -310px 0 0 -515px;
z-index: 1;
}
.fourthWrap_clothesShow4_model2{
position: absolute;
width: 400px;
left: 50%;
top: 50%;
margin: -305px 0 0 -230px;
z-index: 2;
animation: indexRole3 6s linear infinite;
-webkit-animation: indexRole3 6s linear infinite;
-moz-animation: indexRole3 6s linear infinite;
}
.fourthWrap_clothesShow4_model3{
position: absolute;
width: 240px;
left: 50%;
top: 50%;
margin: -315px 0 0 150px;
z-index: 2;
}
.fourthWrap_clothesShow4_AI1{
position: absolute;
width: 140px;
left: 50%;
top: 50%;
margin: -85px 0 0 375px;
z-index: 1;
animation: indexRole3 4s linear infinite;
-webkit-animation: indexRole3 4s linear infinite;
-moz-animation: indexRole3 4s linear infinite;
}
.fourthWrap_show_4 .fourthWrap_clothesShow_airBall{
left: 54px;
top: 160px;
}
/*----------------bottomWrap---------------------*/
.bottomWrap{
height: 100px;
overflow: hidden;
margin: 0 auto 0;
}
.bottomWrap_sk{
position: absolute;
width: 400px;
left: 50%;
margin-left: -200px;
top: 20px;
}
/*---------------------------popupWrap---------------------------*/
.popupWrap{
width:100%;
height:100%;
position:fixed;
z-index:10100;
top:0;
left:0;
overflow:hidden;
background-color:rgba(0,0,0);
display: none;
min-height: 850px;
}
.PopupMain {
width: 1200px;
height: 80%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
background-color: #1dacd7;
border-radius: 15px;
}
.popupShow_close {
width: 80px;
top: -20px;
right: -40px;
z-index: 9;
position: absolute;
display: block;
animation: thirdLeftIcon 4s linear infinite;
-webkit-animation: thirdLeftIcon 4s linear infinite;
-moz-animation: thirdLeftIcon 4s linear infinite;
}
.popupShow_bg {
width: 900px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.popupShow1_coner{
position: absolute;
width: 270px;
left: -16px;
top: -51px;
z-index: 9;
}
.popupShow1_TIT{
position: absolute;
width: 190px;
left: -90px;
bottom: -8px;
display: block;
}
.popupShow1_TIT{
position: absolute;
width: 190px;
left: -90px;
bottom: -8px;
display: block;
}
.popupShow1_cont_Bg{
position: absolute;
width: 400px;
height: 170px;
border-radius: 5px;
background-color: rgba(199,110,41,.8);
right:0;
top:0;
}
.popupShow1_cont{
position: absolute;
width: 85%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.popupShow1_sp{
position: absolute;
width: 230px;
right: -120px;
bottom: -40px;
z-index: 9;
}
.popupShow1_model1, .popupShow1_model2, .popupShow1_model3{
position: absolute;
left:50%;
top:50%;
}
.popupShow1_model1{
width: 340px;
margin: -320px 0 0 -400px;
z-index: 2;
opacity: 1;
animation: popupTurn1 6s linear infinite;
-webkit-animation: popupTurn1 6s linear infinite;
-moz-animation: popupTurn1 6s linear infinite;
}
@keyframes popupTurn1 {
0%{ left: 50%; opacity: 1; z-index: 2; } 45%{ left: 50%; opacity: 1; z-index: 2; } 50%{ left: 53%; opacity: 0; z-index: 1; }
95%{ left: 47%; opacity: 0; z-index: 1; } 100%{ left: 50%; opacity: 1; z-index: 2; }
}
@-moz-keyframes popupTurn1 {
0%{ left: 50%; opacity: 1; z-index: 2; } 45%{ left: 50%; opacity: 1; z-index: 2; } 50%{ left: 53%; opacity: 0; z-index: 1; }
95%{ left: 47%; opacity: 0; z-index: 1; } 100%{ left: 50%; opacity: 1; z-index: 2; }
}
@-webkit-keyframes popupTurn1 {
0%{ left: 50%; opacity: 1; z-index: 2; } 45%{ left: 50%; opacity: 1; z-index: 2; } 50%{ left: 53%; opacity: 0; z-index: 1; }
95%{ left: 47%; opacity: 0; z-index: 1; } 100%{ left: 50%; opacity: 1; z-index: 2; }
}
.popupShow1_model2{
width: 410px;
margin: -350px 0 0 -450px;
z-index: 1;
opacity: 0;
animation: popupTurn2 6s linear infinite;
-webkit-animation: popupTurn2 6s linear infinite;
-moz-animation: popupTurn2 6s linear infinite;
}
@keyframes popupTurn2 {
0%{ left: 50%; opacity: 0; z-index: 1; } 45%{ left: 47%; opacity: 0; z-index: 1; } 50%{ left: 50%; opacity: 1; z-index: 2; }
95%{ left: 50%; opacity: 1; z-index: 2; } 100%{ left: 53%; opacity: 0; z-index: 1; }
}
@-moz-keyframes popupTurn2 {
0%{ left: 50%; opacity: 0; z-index: 1; } 45%{ left: 47%; opacity: 0; z-index: 1; } 50%{ left: 50%; opacity: 1; z-index: 2; }
95%{ left: 50%; opacity: 1; z-index: 2; } 100%{ left: 53%; opacity: 0; z-index: 1; }
}
@-webkit-keyframes popupTurn2 {
0%{ left: 50%; opacity: 0; z-index: 1; } 45%{ left: 47%; opacity: 0; z-index: 1; } 50%{ left: 50%; opacity: 1; z-index: 2; }
95%{ left: 50%; opacity: 1; z-index: 2; } 100%{ left: 53%; opacity: 0; z-index: 1; }
}
.popupShow1_model3{
width: 620px;
margin: -150px 0 0 -90px;
z-index: 3;
}
.popupWrap_2 .popupShow1_coner {
width: 299px;
left: -73px;
top: -51px;
}
.popupWrap_2 .popupShow1_cont_Bg{
background-color: rgba(236,114,28,0.80);
}
.popupWrap_2 .popupShow1_cont {
width: 90%;
}
.popupWrap_2 .popupShow1_model3 {
width: 430px;
margin: -360px 0 0 -390px;
}
.popupWrap_2 .popupShow1_model1 {
width: 320px;
margin: -190px 0 0 50px;
}
.popupWrap_2 .popupShow1_model2 {
width: 320px;
margin: -190px 0 0 50px;
}
.popupShow3_model1{
position: absolute;
width: 400px;
left: -15px;
top: 280px;
z-index: 1;
}
.popupShow3_model2{
position: absolute;
width: 230px;
left: 55%;
top: 60px;
z-index: 1;
margin-left: -60px;
animation: popupTurn1 6s linear infinite;
-webkit-animation: popupTurn1 6s linear infinite;
-moz-animation: popupTurn1 6s linear infinite;
z-index: 2;
opacity: 1;
}
.popupShow3_model3 {
position: absolute;
width: 260px;
left: 55%;
top: 65px;
z-index: 1;
margin-left: -75px;
animation: popupTurn2 6s linear infinite;
-webkit-animation: popupTurn2 6s linear infinite;
-moz-animation: popupTurn2 6s linear infinite;
z-index: 1;
opacity: 0;
}
.popupShow3_model4, .popupShow3_model5 {
position: absolute;
width: 250px;
left: 50%;
top: 30px;
margin-left: 180px;
}
.popupShow3_model4{
animation: popupTurn1 6s linear infinite;
-webkit-animation: popupTurn1 6s linear infinite;
-moz-animation: popupTurn1 6s linear infinite;
z-index: 2;
opacity: 1;
}
.popupShow3_model5 {
animation: popupTurn2 6s linear infinite;
-webkit-animation: popupTurn2 6s linear infinite;
-moz-animation: popupTurn2 6s linear infinite;
z-index: 1;
opacity: 0;
}
.popupWrap_3 .fourthWrap_clothesShow1_sp {
position: absolute;
width: 250px;
left:auto;
bottom: -20px;
z-index: 8;
right: -120px;
}
.popupWrap_3 .fourthWrap_clothesShow1_spTIT {
top: 120px;
}
/*------------------------------ kids 1008--------------------------------------*/
.fourthWrap_showKids_1, .fourthWrap_showKids_2, .fourthWrap_showKids_3, .fourthWrap_showKids_4, .fourthWrap_showKids_5, .fourthWrap_showKids_6, .fourthWrap_showKids_7{
position: relative;
width:100%;
z-index: 3;
margin:0 auto;
}
.fourthWrap_showKids_1 main, .fourthWrap_showKids_2 main, .fourthWrap_showKids_3 main, .fourthWrap_showKids_4 main, .fourthWrap_showKids_5 main,
.fourthWrap_showKids_6 main, .fourthWrap_showKids_7 main{
position: relative;
width:100%;
background-color:#ffe100;
height: auto;
margin: -1px auto 0;
padding-top: 80px;
padding-bottom: 100px;
}
.fourthWrap_showKids_3 main{
background-color:#f4b183;
}
.fourthWrap_showKids_5 main, .fourthWrap_showKids_6 main, .fourthWrap_showKids_7 main{
background-color:#ffe6a6;
}
.fourthWrapKids .fourthWrap_showKids_1 .fourthWrap_show_detailLeft1, .fourthWrapKids .fourthWrap_showKids_1 .fourthWrap_show_detailRight1,
.fourthWrapKids .fourthWrap_showKids_5 .fourthWrap_show_detailLeft1, .fourthWrapKids .fourthWrap_showKids_5 .fourthWrap_show_detailRight1,
.fourthWrapKids .fourthWrap_showKids_6 .fourthWrap_show_detailLeft1, .fourthWrapKids .fourthWrap_showKids_6 .fourthWrap_show_detailRight1,
.fourthWrapKids .fourthWrap_showKids_7 .fourthWrap_show_detailLeft1, .fourthWrapKids .fourthWrap_showKids_7 .fourthWrap_show_detailRight1{
position: relative;
z-index: 2;
opacity: 1;
animation: shoeDetailLeftKids1 4s linear infinite;
-webkit-animation: shoeDetailLeftKids1 4s linear infinite;
-moz-animation: shoeDetailLeftKids1 4s linear infinite;
}
@keyframes shoeDetailLeftKids1 {
0%{ position: relative; opacity: 1; z-index: 2; } 45%{ position: relative; opacity: 1; z-index: 2; }
50%{ position: absolute; opacity: 0; z-index: 1; } 95%{ position: absolute; opacity: 0; z-index: 1; } 100%{ position: relative; opacity: 1; z-index: 2; }
}
@-moz-keyframes shoeDetailLeftKids1 {
0%{ position: relative; opacity: 1; z-index: 2; } 45%{ position: relative; opacity: 1; z-index: 2; }
50%{ position: absolute; opacity: 0; z-index: 1; } 95%{ position: absolute; opacity: 0; z-index: 1; } 100%{ position: relative; opacity: 1; z-index: 2; }
}
@-webkit-keyframes shoeDetailLeftKids1 {
0%{ position: relative; opacity: 1; z-index: 2; } 45%{ position: relative; opacity: 1; z-index: 2; }
50%{ position: absolute; opacity: 0; z-index: 1; } 95%{ position: absolute; opacity: 0; z-index: 1; } 100%{ position: relative; opacity: 1; z-index: 2; }
}
.fourthWrapKids .fourthWrap_showKids_1 .fourthWrap_show_detailLeft2, .fourthWrapKids .fourthWrap_showKids_1 .fourthWrap_show_detailRight2,
.fourthWrapKids .fourthWrap_showKids_5 .fourthWrap_show_detailLeft2, .fourthWrapKids .fourthWrap_showKids_5 .fourthWrap_show_detailRight2,
.fourthWrapKids .fourthWrap_showKids_6 .fourthWrap_show_detailLeft2, .fourthWrapKids .fourthWrap_showKids_6 .fourthWrap_show_detailRight2,
.fourthWrapKids .fourthWrap_showKids_7 .fourthWrap_show_detailLeft2, .fourthWrapKids .fourthWrap_showKids_7 .fourthWrap_show_detailRight2{
z-index: 1;
opacity: 0;
animation: shoeDetailLeftKids2 4s linear infinite;
-webkit-animation: shoeDetailLeftKids2 4s linear infinite;
-moz-animation: shoeDetailLeftKids2 4s linear infinite;
}
@keyframes shoeDetailLeftKids2 {
0%{ position: absolute; opacity: 0; z-index: 1; } 45%{ position: absolute; opacity: 0; z-index: 1; }
50%{ position: relative; opacity: 1; z-index: 2; } 95%{ position: relative; opacity: 1; z-index: 2; } 100%{ position: absolute; opacity: 0; z-index: 1; }
}
@-moz-keyframes shoeDetailLeftKids2 {
0%{ position: absolute; opacity: 0; z-index: 1; } 45%{ position: absolute; opacity: 0; z-index: 1; }
50%{ position: relative; opacity: 1; z-index: 2; } 95%{ position: relative; opacity: 1; z-index: 2; } 100%{ position: absolute; opacity: 0; z-index: 1; }
}
@-webkit-keyframes shoeDetailLeftKids2 {
0%{ position: absolute; opacity: 0; z-index: 1; } 45%{ position: absolute; opacity: 0; z-index: 1; }
50%{ position: relative; opacity: 1; z-index: 2; } 95%{ position: relative; opacity: 1; z-index: 2; } 100%{ position: absolute; opacity: 0; z-index: 1; }
}
.fourthWrapKids .fourthWrap_showKids_1 .fourthWrap_show_detailLeft_icon,
.fourthWrapKids .fourthWrap_showKids_2 .fourthWrap_show_detailLeft_icon{
top: -255px;
}
.fourthWrap_showKids_nav{
position: absolute;
width: 450px;
height: 40px;
top: 285px;
left: 50%;
z-index: 9;
margin-left: 330px;
}
.fourthWrap_showKids_nav_1{
position: absolute;
display: block;
width:32%;
left:0;
top:0;
}
.fourthWrap_showKids_nav_2{
position: absolute;
display: block;
width:32%;
left:34%;
top:0;
}
.fourthWrap_showKids_nav_3{
position: absolute;
display: block;
width:32%;
right:0;
top:0;
}
.fourthWrap_showKids_navShoes{
position: absolute;
width:100%;
left: 2px;
top: -55px;
}
.fourthWrap_showKids_nav_1:hover>div, .fourthWrap_showKids_nav_2:hover>div, .fourthWrap_showKids_nav_3:hover>div{
top: -65px;
}
.fourthWrapKids .fourthWrap_showKids_1 .fourthWrap_show_cloudModel {
width: 385px;
margin: -50px 0 0 280px;
}
.fourthWrapKids .fourthWrap_clothShow_main_1{
animation: none;
-webkit-animation: none;
-moz-animation: none;
}
.fourthWrapKids .fourthWrap_showKids_4 .fourthWrap_clothShow_main_1{
animation: clothesShow1 6s linear infinite;
-webkit-animation: clothesShow1 6s linear infinite;
-moz-animation: clothesShow1 6s linear infinite;
}
.fourthWrapKids .fourthWrap_showKids_4 .fourthWrap_clothShow_main_2{
animation: clothesShow2 6s linear infinite;
-webkit-animation: clothesShow2 6s linear infinite;
-moz-animation: clothesShow2 6s linear infinite;
}
.fourthWrap_clothesShowKids1_model1{
position: absolute;
width:180px;
left: 50%;
top: 50%;
margin: -280px 0 0 -395px;
z-index: 1;
}
.fourthWrap_clothesShowKids1_model2{
position: absolute;
width:380px;
left: 50%;
top: 50%;
margin: -280px 0 0 -230px;
z-index: 1;
animation: indexRole3 6s linear infinite;
-webkit-animation: indexRole3 6s linear infinite;
-moz-animation: indexRole3 6s linear infinite;
}
.fourthWrap_clothesShowKids1_model3{
position: absolute;
width:300px;
left: 50%;
top: 50%;
margin: -260px 0 0 95px;
z-index: 1;
}
.fourthWrapKids .fourthWrap_showKids_1 .fourthWrap_clothShow_main_1 .fourthWrap_clothesShow1_AI1,
.fourthWrapKids .fourthWrap_showKids_2 .fourthWrap_clothShow_main_1 .fourthWrap_clothesShow1_AI1,
.fourthWrapKids .fourthWrap_showKids_4 .fourthWrap_clothShow_main_1 .fourthWrap_clothesShow1_AI1{
margin: -170px 0 0 -650px;
width:260px;
}
.fourthWrapKids .fourthWrap_showKids_1 .fourthWrap_clothShow_main_1 .fourthWrap_clothesShow1_AI2,
.fourthWrapKids .fourthWrap_showKids_2 .fourthWrap_clothShow_main_1 .fourthWrap_clothesShow1_AI2,
.fourthWrapKids .fourthWrap_showKids_4 .fourthWrap_clothShow_main_1 .fourthWrap_clothesShow1_AI2{
margin: -300px 0 0 380px;
width: 160px;
}
.fourthWrapKids .fourthWrap_showKids_1 .fourthWrap_clothesShow1_sp,
.fourthWrapKids .fourthWrap_showKids_2 .fourthWrap_clothesShow1_sp,
.fourthWrapKids .fourthWrap_showKids_3 .fourthWrap_clothesShow1_sp,
.fourthWrapKids .fourthWrap_showKids_4 .fourthWrap_clothesShow1_sp,
.fourthWrapKids .fourthWrap_showKids_5 .fourthWrap_clothesShow1_sp,
.fourthWrapKids .fourthWrap_showKids_6 .fourthWrap_clothesShow1_sp,
.fourthWrapKids .fourthWrap_showKids_7 .fourthWrap_clothesShow1_sp{
width: 233px;
left: auto;
right: 50px;
bottom: 10px;
}
.fourthWrapKids .fourthWrap_showKids_1 .fourthWrap_clothesShow1_sp .fourthWrap_clothesShow1_spTIT,
.fourthWrapKids .fourthWrap_showKids_2 .fourthWrap_clothesShow1_sp .fourthWrap_clothesShow1_spTIT,
.fourthWrapKids .fourthWrap_showKids_3 .fourthWrap_clothesShow1_sp .fourthWrap_clothesShow1_spTIT,
.fourthWrapKids .fourthWrap_showKids_4 .fourthWrap_clothesShow1_sp .fourthWrap_clothesShow1_spTIT,
.fourthWrapKids .fourthWrap_showKids_5 .fourthWrap_clothesShow1_sp .fourthWrap_clothesShow1_spTIT,
.fourthWrapKids .fourthWrap_showKids_6 .fourthWrap_clothesShow1_sp .fourthWrap_clothesShow1_spTIT,
.fourthWrapKids .fourthWrap_showKids_7 .fourthWrap_clothesShow1_sp .fourthWrap_clothesShow1_spTIT{
top: 155px;
}
.fourthWrap_show_nameSelect1, .fourthWrap_show_nameSelect2 {
display: block;
position: absolute;
width: 200px;
bottom: -50px;
left: -130px;
z-index: 5;
}
.fourthWrap_show_nameSelect2 {
left: -340px;
}
.fourthWrap_show_nameSelect_1, .fourthWrap_show_nameSelect_2{
position: absolute;
width:100%;
left:0;
top:0;
z-index: 1;
opacity: 0;
}
.fourthWrap_show_nameSelect_1.active, .fourthWrap_show_nameSelect_2.active{
z-index: 2;
opacity: 1;
position: relative;
}
.fourthWrap_show_nameSelect_2 span{
display: block;
position: absolute;
width: 32px;
left: -10px;
top: -10px;
animation: indexBtn .8s linear infinite;
-webkit-animation: indexBtn .8s linear infinite;
-moz-animation: indexBtn .8s linear infinite;
}
.fourthWrap_showKids_5 .fourthWrap_show_nameSelect1, .fourthWrap_showKids_5 .fourthWrap_show_nameSelect2 {
display: block;
position: absolute;
width: 158px;
bottom: -50px;
left: -50px;
z-index: 5;
}
.fourthWrap_showKids_5 .fourthWrap_show_nameSelect2 {
left: -200px;
width: 130px;
}
.fourthWrap_showKids_5 .fourthWrap_show_nameSelect3{
display: block;
position: absolute;
width: 130px;
bottom: -50px;
left: -350px;
z-index: 5;
}
.fourthWrap_showKids_6 .fourthWrap_show_nameSelect2, .fourthWrap_showKids_6 .fourthWrap_show_nameSelect3,
.fourthWrap_showKids_7 .fourthWrap_show_nameSelect2, .fourthWrap_showKids_7 .fourthWrap_show_nameSelect3{
display: block;
position: absolute;
width: 158px;
bottom: -50px;
left: -380px;
z-index: 5;
}
.fourthWrap_showKids_6 .fourthWrap_show_nameSelect2, .fourthWrap_showKids_7 .fourthWrap_show_nameSelect2 {
left: -200px;
width: 130px;
}
.fourthWrap_showKids_6 .fourthWrap_show_nameSelect1, .fourthWrap_showKids_7 .fourthWrap_show_nameSelect1{
display: block;
position: absolute;
width: 130px;
bottom: -50px;
left: -50px;
z-index: 5;
}
.fourthWrapKids .fourthWrap_showKids_3 .fourthWrap_show_detailLeft_icon{
top: -185px;
}
.fourthWrapKids .fourthWrap_showKids_3 .fourthWrap_show_cloudModel {
width: 270px;
margin: -45px 0 0 375px;
}
.fourthWrapKids .fourthWrap_showKids_3 .fourthWrap_clothesShow_TIT_icon {
width: 285px;
top: -60px;
left: -145px;
}
.fourthWrapKids .fourthWrap_showKids_3 .fourthWrap_clothShow_top {
background-color: #d3b89b;
}
.fourthWrapKids .fourthWrap_showKids_3 .fourthWrap_clothShow_bottom {
background-color: #ff7345;
}
.fourthWrapKids .fourthWrap_showKids_3 .fourthWrap_clothShow_main_1 .fourthWrap_clothesShow1_AI1{
margin: -170px 0 0 -570px;
width: 200px;
}
.fourthWrapKids .fourthWrap_showKids_3 .fourthWrap_clothShow_main_1 .fourthWrap_clothesShow1_AI2{
margin: -300px 0 0 380px;
width: 160px;
}
.fourthWrap_clothesShowKids3_model1{
position: absolute;
width:320px;
left: 50%;
top: 50%;
margin: -330px 0 0 -365px;
z-index: 1;
animation: indexRole3 6s linear infinite;
-webkit-animation: indexRole3 6s linear infinite;
-moz-animation: indexRole3 6s linear infinite;
}
.fourthWrap_clothesShowKids3_model2{
position: absolute;
width: 315px;
left: 50%;
top: 50%;
margin: -210px 0 0 0px;
z-index: 1;
}
.fourthWrapKids .fourthWrap_showKids_4 .fourthWrap_show_cloudModel {
width: 270px;
margin: -45px 0 0 375px;
}
.fourthWrapKids .fourthWrap_showKids_4 .fourthWrap_show_detailLeft_icon{
top: -190px;
}
.fourthWrap_clothesShowKids4_model1_1{
position: absolute;
width:300px;
left: 50%;
top: 50%;
margin: -280px 0 0 -430px;
z-index: 1;
animation: indexRole3 6s linear infinite;
-webkit-animation: indexRole3 6s linear infinite;
-moz-animation: indexRole3 6s linear infinite;
}
.fourthWrap_clothesShowKids4_model1_2{
position: absolute;
width: 350px;
left: 50%;
top: 50%;
margin: -295px 0 0 -40px;
z-index: 1;
}
.fourthWrap_clothesShowKids4_model1_3{
position: absolute;
width: 480px;
left: 50%;
top: 50%;
margin: 10px 0 0 -95px;
z-index: 1;
}
.fourthWrap_clothesShowKids4_model2_1{
position: absolute;
width: 220px;
left: 50%;
top: 50%;
margin: -280px 0 0 -355px;
z-index: 1;
}
.fourthWrap_clothesShowKids4_model2_2{
position: absolute;
width: 400px;
left: 50%;
top: 50%;
margin: -85px 0 0 -40px;
z-index: 2;
}
.fourthWrap_clothesShowKids4_model2_3{
position: absolute;
width: 260px;
left: 50%;
top: 50%;
margin: -310px 0 0 -90px;
z-index: 1;
}
.fourthWrap_showKids_5 .fourthWrap_show_detailLeft_icon {
width: 180px;
left: 35px;
top: -190px;
}
.fourthWrap_showKids_5 .fourthWrap_show_cloudModel {
width: 380px;
margin: 50px 0 0 280px;
}
.fourthWrap_showKids_5 .fourthWrap_show_TIT, .fourthWrap_showKids_6 .fourthWrap_show_TIT, .fourthWrap_showKids_7 .fourthWrap_show_TIT {
width: 750px;
margin-left: -360px;
top: 100px;
}
.fourthWrap_showKids_5 .fourthWrap_clothesShow_TIT_ball, .fourthWrap_showKids_6 .fourthWrap_clothesShow_TIT_ball, .fourthWrap_showKids_7 .fourthWrap_clothesShow_TIT_ball {
top: 25px;
right: 30px;
}
.fourthWrap_clothesShowKids5_model1 {
position: absolute;
width: 300px;
left: 50%;
top: 50%;
margin: -40px 0 0 -600px;
z-index: 1;
}
.fourthWrap_clothesShowKids5_model2 {
position: absolute;
width: 405px;
left: 50%;
top: 50%;
margin: -165px 0 0 -310px;
z-index: 1;
}
.fourthWrap_clothesShowKids5_model3 {
position: absolute;
width: 325px;
left: 50%;
top: 50%;
margin: -50px 0 0 55px;
z-index: 1;
}
.fourthWrap_clothesShowKids5_model4 {
position: absolute;
width: 270px;
left: 50%;
top: 50%;
margin: -120px 0 0 330px;
z-index: 1;
}
.fourthWrap_showKids_6 .fourthWrap_show_cloudModel {
width: 300px;
margin: -20px 0 0 280px;
}
.fourthWrap_showKids_6 .fourthWrap_show_detailLeft_icon {
width: 155px;
left: 5px;
top: -140px;
}
.fourthWrap_showKids_7 .fourthWrap_show_detailLeft_icon {
width: 155px;
left: 5px;
top: -140px;
}
/*----------------pd_sidebar---------------------*/
.pd_sidebar{
position:fixed;
width:400px;
height: 100%;
top:0;
right:-400px;
background-color: rgba(0,0,0,.85);
z-index: 900;
}
.pd_sidebar.open{
right:0;
}
.pd_sidebar ul {
position: absolute;
width: 70%;
height: auto;
top: 10%;
left: 15%;
border: #E62328 2px solid;
/*overflow: scroll;*/
padding: 20px 0 0 10px;
border-width: 3px 0 0 0;
}
.pd_sidebar ul li{
position: relative;
width:100%;
height: 20px;
top:0;
left:0;
margin-bottom: 15px;
}
.pd_sidebar ul li a{
color:#FFF;
font-size:20px;
display: block;
}
.pd_sidebar_close {
position: absolute;
width: 35px;
left: 35%;
top: 33px;
margin-left: -17px;
z-index: 9;
}
.pd_sidebar_close span{
color: #FFF;
width: 100px;
display: block;
left: 50px;
position: absolute;
top: 4px;
}
.pd_sidebar ul li:hover a{
color:#FF0;
}
.pd_sidebar ul li.pd_sidebar_1{
margin-bottom: 25px;
}
.pd_sidebar ul li.pd_sidebar_6{
margin-top: 80px;
margin-bottom: 25px;
}
.pd_sidebar ul li.pd_sidebar_1 a, .pd_sidebar ul li.pd_sidebar_6 a{
font-size:22px;
color:#FF0;
}
.pd_sidebar ul li.pd_sidebar_1:hover a, .pd_sidebar ul li.pd_sidebar_6:hover a{
color:#FF0;
}
.pd_sidebar ul li.pd_sidebar_1 span, .pd_sidebar ul li.pd_sidebar_6 span {
position: absolute;
left: 0px;
top: 44px;
color: #80E7FF;
font-size: 20px;
}
.navBtn{
display: block;
position: fixed;
width: 110px;
top: 30%;
right: -40px;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
z-index: 99;
}
.navBtn.open{
right: -150px;
}
.navBtn:hover {
right: -20px;
}
/*------------------------------ selct_pointfourthWrap_showKids_navShoes--------------------------------------*/
.selct_point{
position: absolute;
width:20px;
height: 20px;
left:0;
top:200px;
z-index: 9;
}
/*------------------------------ loadingWrap--------------------------------------*/
.loadingWrap{
background: #43460a; /* Old browsers */
background: -moz-linear-gradient(top, #43460a 17%, #0e480a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #43460a 17%,#0e480a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #43460a 17%,#0e480a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
position: fixed;
width:100%;
height: 100%;
left:0;
top:0;
z-index: 9999;
display: none;
}
.loading_bg{
position: absolute;
width:100%;
left:0;
bottom:0;
z-index: 0;
}
.loading_logo{
position: absolute;
width:600px;
left:50%;
top:40%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
z-index: 3;
}
/*------------------------------ btn_goTop--------------------------------------*/
.btn_goTop {
position: fixed;
width: 55px;
height: 55px;
border-radius: 50%;
background-color: rgb(0, 138, 255);
bottom: 25px;
right:40px;
z-index: 999;
display: none;
}
.btn_goTop span {
display: block;
position: absolute;
width: 34px;
height: 21px;
left: 50%;
top: 50%;
margin: -10px 0 0 -17px;
background-image: url(../images/goTop.png);
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
.btn_goTop:hover{
background-color:rgb(12, 12, 12);
}
.btn_goTop:hover.btn_goTop span{
margin: -15px 0 0 -17px;
}
/*------------------------------ transition--------------------------------------*/
.thirdWrap_TIT, .fourthWrap_show_navShoe, .fourthWrap_showKids_navShoes, .fourthWrap_show_nameSelect1, .fourthWrap_show_nameSelect2, .pd_sidebar ul li a, .pd_sidebar, .navBtn{
transition:all .5s;
-moz-transition:all .5s;
-webkit-transition:all .5s;
}