body {
    height: 100%;
    width: 100%;
    min-width: 960px;
    background-color: #FFF;
    background-image: url(../images/bg.jpg);
}
.container-fluid {    
    padding-right: 0;
    padding-left: 0;   
}


/*------------------------------ index--------------------------------------*/

.index{
	width:960px;
	position: relative;
	height:100%;
	overflow: hidden;
	z-index: 3;
	margin:0 auto;	
	padding-top: 50px;
	min-height: 880px;
    background-color: #ffe6a6;
    padding-bottom: 80px;
}
.index_topWave{
    position: absolute;
    top:-270px;
    left:50%;
    margin-left: -960px;
    z-index: 0;
    width:1920px;    
}
.index_topWave span{
    display: block;
    width:100%;   
    position: relative;
    margin-top:0;
    animation: topWave  6s ease-in-out infinite;
	-moz-animation: topWave  6s ease-in-out infinite;
	-webkit-animation: topWave  6s ease-in-out infinite;	
}
@keyframes topWave{
0%  {   margin-top:0;}
30% {   margin-top:-100px;}
70% {   margin-top:0;}
100%{   margin-top:0;}
}
@-moz-keyframes topWave{
0%  {   margin-top:0;}
30% {   margin-top:-100px;}
70% {   margin-top:0;}
100%{   margin-top:0;}
}
@-webkit-keyframes topWave{
0%  {   margin-top:0;}
30% {   margin-top:-100px;}
70% {   margin-top:0;}
100%{   margin-top:0;}
}
.index_logo{
    position: relative;
    width:700px;
    margin:0 auto;    
}
.index_TIT {
    position: relative;
    width: 700px;
    margin: 20px auto 0;
    z-index: 3;
}
.index_photo {
    position: relative;
    width: 650px;
    margin: -110px auto 0;
    z-index: 1;
}
.index_photo_1{
    position:relative;
    width:100%;    
    z-index: 2; 
    opacity: 1;
    animation: indexPhoto1 10s linear infinite;
    -webkit-animation: indexPhoto1 10s linear infinite;
    -moz-animation: indexPhoto1 10s linear infinite;
}
@keyframes indexPhoto1 {
	  0%{ z-index: 0; opacity: 0; left:-200px; }
      5%{ z-index: 2; opacity: 1; left:0;}
     45%{ z-index: 2; opacity: 1; left:0;}
	 50%{ z-index: 0; opacity: 0; left:200px;}	  
	100%{ z-index: 0; opacity: 0; left:-200px;}	 			
}
@-moz-keyframes indexPhoto1 {
	  0%{ z-index: 0; opacity: 0; left:-200px;}
      5%{ z-index: 2; opacity: 1; left:0;}
     45%{ z-index: 2; opacity: 1; left:0;}
	 50%{ z-index: 0; opacity: 0; left:200px;}	  
	100%{ z-index: 0; opacity: 0; left:-200px;}	 				
}
@-webkit-keyframes indexPhoto1 {
	  0%{ z-index: 0; opacity: 0; left:-200px;}
      5%{ z-index: 2; opacity: 1; left:0;}
     45%{ z-index: 2; opacity: 1; left:0;}
	 50%{ z-index: 0; opacity: 0; left:200px;}	  
	100%{ z-index: 0; opacity: 0; left:-200px;}	 			 	
}
.index_photo_2{
    top:0;
    left:0;    
    position:absolute;
    width:100%;    
    z-index: 1;
    opacity: 0;
    animation: indexPhoto2 10s linear infinite;
    -webkit-animation: indexPhoto2 10s linear infinite;
    -moz-animation: indexPhoto2 10s linear infinite;
}
@keyframes indexPhoto2 {
	  0%{ z-index: 1; opacity: 0; left:-200px;}
     50%{ z-index: 1; opacity: 0; left:-200px;}
     55%{ z-index: 2; opacity: 1; left:0;}
	 95%{ z-index: 2; opacity: 1; left:0;}
	100%{ z-index: 1; opacity: 0; left:200px;}		
}
@-moz-keyframes indexPhoto2 {
	  0%{ z-index: 1; opacity: 0; left:-200px;}
     50%{ z-index: 1; opacity: 0; left:-200px;}
     55%{ z-index: 2; opacity: 1; left:0;}
	 95%{ z-index: 2; opacity: 1; left:0;}
	100%{ z-index: 1; opacity: 0; left:200px;}					
}
@-webkit-keyframes indexPhoto2 {
	  0%{ z-index: 1; opacity: 0; left:-200px;}
     50%{ z-index: 1; opacity: 0; left:-200px;}
     55%{ z-index: 2; opacity: 1; left:0;}
	 95%{ z-index: 2; opacity: 1; left:0;}
	100%{ z-index: 1; opacity: 0; left:200px;}				 	
}
.CoconutLeaves_L {
    position: absolute;
    width: 230px;
    left: -50px;
    top: 150px;
    z-index: 4;
    transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -webkit-transform-origin: left bottom;    
	animation: CoconutLeaves_L 7s 1.5s ease-in-out infinite;
	-moz-animation: CoconutLeaves_L 7s 1.5s ease-in-out infinite;
	-webkit-animation: CoconutLeaves_L 7s 1.5s ease-in-out infinite;
	transition:transform 1s 2s cubic-bezier(.74,1.4,1,1.57);
	-moz-transition:transform 1s 2s cubic-bezier(.74,1.4,1,1.57);
	-webkit-transition:transform 1s 2s cubic-bezier(.74,1.4,1,1.57);
}
@keyframes CoconutLeaves_L{
0%  {   transform: rotate(0deg);}
5%  {   transform: rotate(-9deg);}
10% {   transform: rotate(4deg);}
15% {   transform: rotate(-20deg);}
20% {   transform: rotate(4deg);}
23% {   transform: rotate(-3deg);}
26% {   transform: rotate(3deg);}
30% {   transform: rotate(0deg);}
100%{   transform: rotate(0deg);}
}
@-moz-keyframes CoconutLeaves_L{
0%  {   -moz-transform: rotate(0deg);}
5%  {   -moz-transform: rotate(-9deg);}
10% {   -moz-transform: rotate(4deg);}
15% {   -moz-transform: rotate(-20deg);}
20% {   -moz-transform: rotate(4deg);}
23% {   -moz-transform: rotate(-3deg);}
26% {   -moz-transform: rotate(3deg);}
30% {   -moz-transform: rotate(0deg);}
100%{   -moz-transform: rotate(0deg);}
}
@-webkit-keyframes CoconutLeaves_L{
0%  {   -webkit-transform: rotate(0deg);}
5%  {   -webkit-transform: rotate(-9deg);}
10% {   -webkit-transform: rotate(4deg);}
15% {   -webkit-transform: rotate(-20deg);}
20% {   -webkit-transform: rotate(4deg);}
23% {   -webkit-transform: rotate(-3deg);}
26% {   -webkit-transform: rotate(3deg);}
30% {   -webkit-transform: rotate(0deg);}
100%{   -webkit-transform: rotate(0deg);}
}

.CoconutLeaves_R {
    position: absolute;
    width: 300px;
    right: -50px;
    top: 50%;
    margin-top: -120px;
    z-index: 4;
    transform-origin: right bottom;
    -moz-transform-origin: right bottom;
    -webkit-transform-origin: right bottom;    
	animation: CoconutLeaves_R 8s 1.5s ease-in-out infinite;
	-webkit-animation: CoconutLeaves_R 8s 1.5s ease-in-out infinite;
	-moz-animation: CoconutLeaves_R 8s 1.5s ease-in-out infinite;
	transition:transform 1s 2s cubic-bezier(.74,1.4,1,1.57);
	-webkit-transition:transform 1s 2s cubic-bezier(.74,1.4,1,1.57);
	-moz-transition:transform 1s 2s cubic-bezier(.74,1.4,1,1.57);

}
@keyframes CoconutLeaves_R{
0%  {   transform: rotate(0deg);}
5%  {   transform: rotate(9deg);}
10% {   transform: rotate(-6deg);}
15% {   transform: rotate(20deg);}
20% {   transform: rotate(-5deg);}
23% {   transform: rotate(3deg);}
26% {   transform: rotate(-3deg);}
30% {   transform: rotate(0deg);}
100%{   transform: rotate(0deg);}
}
@-webkit-keyframes CoconutLeaves_R{
0%  {   -webkit-transform: rotate(0deg);}
5%  {   -webkit-transform: rotate(9deg);}
10% {   -webkit-transform: rotate(-6deg);}
15% {   -webkit-transform: rotate(20deg);}
20% {   -webkit-transform: rotate(-5deg);}
23% {   -webkit-transform: rotate(3deg);}
26% {   -webkit-transform: rotate(-3deg);}
30% {   -webkit-transform: rotate(0deg);}
100%{   -webkit-transform: rotate(0deg);}
}
@-moz-keyframes CoconutLeaves_R{
0%  {   -moz-transform: rotate(0deg);}
5%  {   -moz-transform: rotate(9deg);}
10% {   -moz-transform: rotate(-6deg);}
15% {   -moz-transform: rotate(20deg);}
20% {   -moz-transform: rotate(-5deg);}
23% {   -moz-transform: rotate(3deg);}
26% {   -moz-transform: rotate(-3deg);}
30% {   -moz-transform: rotate(0deg);}
100%{   -moz-transform: rotate(0deg);}
}
.index_cont {
    position: relative;
    width: 865px;
    margin: -110px auto 0;
    z-index: 2;
}
.index_cont_arrow{
    position: absolute;
    width:95px;
    top:135px;
    right:0;    
}
.index_cont_sk {
    position: absolute;
    width: 299px;
    top: 50%;
    left: 50%;
    margin: -42px 0 0 -197px;
    animation: indexContSK 2s ease-in-out infinite;
	-webkit-animation: indexContSK 2s ease-in-out infinite;
	-moz-animation: indexContSK 2s ease-in-out infinite;
}
@keyframes indexContSK{
0%  {   transform: scale(1) rotate(0deg);}
8%  {   transform: scale(1.2) rotate(-5deg);}
16% {   transform: scale(1) rotate(0deg);}
50%{   transform: scale(1) rotate(0deg);}
}
@-webkit-keyframes indexContSK{
0%  {   -webkit-transform: scale(1) rotate(0deg);}
8%  {   -webkit-transform: scale(1.2) rotate(-5deg);}
16% {   -webkit-transform: scale(1) rotate(0deg);}
50%{   -webkit-transform: scale(1) rotate(0deg);}
}
@-moz-keyframes indexContSK{
0%  {   -moz-transform: scale(1) rotate(0deg);}
8%  {   -moz-transform: scale(1.2) rotate(-5deg);}
16% {   -moz-transform: scale(1) rotate(0deg);}
50%{   -moz-transform: scale(1) rotate(0deg);}
}

.index_bottomGrass {
    position: absolute;
    width: 170px;
    left: 15px;
    bottom: 65px;
    z-index: 0;
}
.index_bottomGrass_R {
    left:auto;
    right:0;
    bottom:5px;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
}
.index_waterLeft {
    position: absolute;
    width: 330px;
    left: -55px;
    top: 20px;
    z-index: 3;
}
.index_waterRight {
    position: absolute;
    width: 330px;
    right: 0px;
    top: -60px;
    z-index: 3;
}
/*---------------------------secondWrap---------------------------*/

.secondWrap{
	width:960px;
	position: relative;
	height:auto;
	overflow: hidden;
	z-index:2;
	margin:0px auto 0;  
    background-color: #bae7c9;   
}
.second_top_point, .second_top_bg{
    position: relative;
    width:100%;
    margin:0 auto 0;
    z-index: 1;    
}
.second_top_photo {
    position: absolute;
    width: 990px;
    left: 50%;
    top: 50%;
    margin: -335px 0 0 -505px;
}
.second_top_photo_water {
    position: absolute;
    width: 260px;
    top: 8px;
    right: 32px;
    z-index: 2;
}
.secondWrap_part_1, .secondWrap_part_2, .secondWrap_part_3{
    position:relative;
    width:100%;
    margin:0 auto 0; 
    z-index: 1;
}
.secondWrap_part_1{   
    padding-bottom: 100px;
}
.second_TIT_cityWalker{
    position: relative;
    width:790px;
    margin:0 auto 0;
    left:-50px;
    z-index:2;
}
.luckyGrace{
    position: absolute;
    width:361px;
    height: 100%;
    left:-35px;
    top:0;
    z-index: 0;   
    overflow: hidden;
}
.luckyGrace span{
    display: block;
    width:361px;
    height: 100%;
    background-image: url(../images/luckyGrace.png);    
}
.circle_yellow {
    position: absolute;
    width: 280px;
    top: 40px;
    right: -55px;
    z-index: 1;
	animation: circleRotate 20s linear infinite;
    -webkit-animation: circleRotate 20s linear infinite;
    -moz-animation: circleRotate 20s linear infinite;
}
.circle_white {
    position: absolute;
    width: 220px;
    top: 345px;
    left: -60px;
    z-index: 1;
	animation: circleRotate 15s linear infinite;
    -webkit-animation: circleRotate 15s linear infinite;
    -moz-animation: circleRotate 15s linear infinite;
}
.secondWrap_part_2{   
    margin:0 auto 0;  
    z-index: 2;
    padding-bottom: 250px;
}
.secondWrap_part_2 .luckyGrace{
    left:auto;
    right:-60px;   
    top:100px;
}
.second_city_photo_TIT{
    position: relative;
    width:840px;
    height: 188px;
    margin:0 auto 0;
    z-index: 2;    
}
.second_city_photo_TIT_1, .second_city_photo_TIT_2, .second_city_photo_TIT_3{
    position: absolute;
    width:100%;
    top:0;
    left:0;    
}
.second_city_photo_TIT_1{
    z-index: 3;
    opacity: 1;
    animation: secondCityPhotoTIT1 3s linear infinite;
	-webkit-animation: secondCityPhotoTIT1 3s linear infinite;
	-moz-animation: secondCityPhotoTIT1 3s linear infinite;
}
@keyframes secondCityPhotoTIT1{
0%  {   z-index: 3; opacity: 1;}
33% {   z-index: 3; opacity: 1;}
34% {   z-index: 0; opacity: 0;}
100%{   z-index: 0; opacity: 0;}
}
@-webkit-keyframes secondCityPhotoTIT1{
0%  {   z-index: 3; opacity: 1;}
33% {   z-index: 3; opacity: 1;}
34% {   z-index: 0; opacity: 0;}
100%{   z-index: 0; opacity: 0;}
}
@-moz-keyframes secondCityPhotoTIT1{
0%  {   z-index: 3; opacity: 1;}
33% {   z-index: 3; opacity: 1;}
34% {   z-index: 0; opacity: 0;}
100%{   z-index: 0; opacity: 0;}
}
.second_city_photo_TIT_2{
    z-index: 2; 
    opacity: 0;
    animation: secondCityPhotoTIT2 3s linear infinite;
	-webkit-animation: secondCityPhotoTIT2 3s linear infinite;
	-moz-animation: secondCityPhotoTIT2 3s linear infinite;
}
@keyframes secondCityPhotoTIT2{
0%  {   z-index: 2; opacity: 0;}
33% {   z-index: 2; opacity: 1;}
34% {   z-index: 3; opacity: 1;}
66% {   z-index: 3; opacity: 1;}
67% {   z-index: 0; opacity: 0;}
100%{   z-index: 0; opacity: 0;}
}
@-webkit-keyframes secondCityPhotoTIT2{
0%  {   z-index: 2; opacity: 0;}
33% {   z-index: 2; opacity: 1;}
34% {   z-index: 3; opacity: 1;}
66% {   z-index: 3; opacity: 1;}
67% {   z-index: 0; opacity: 0;}
100%{   z-index: 0; opacity: 0;}
}
@-moz-keyframes secondCityPhotoTIT2{
0%  {   z-index: 2; opacity: 0;}
33% {   z-index: 2; opacity: 1;}
34% {   z-index: 3; opacity: 1;}
66% {   z-index: 3; opacity: 1;}
67% {   z-index: 0; opacity: 0;}
100%{   z-index: 0; opacity: 0;}
}
.second_city_photo_TIT_3{
    z-index: 1;  
    opacity: 0;
    animation: secondCityPhotoTIT3 3s linear infinite;
	-webkit-animation: secondCityPhotoTIT3 3s linear infinite;
	-moz-animation: secondCityPhotoTIT3 3s linear infinite;
}
@keyframes secondCityPhotoTIT3{
0%  {   z-index: 1; opacity: 0;}
66% {   z-index: 1; opacity: 1;}
67% {   z-index: 3; opacity: 1;}
100%{   z-index: 3; opacity: 1;}
}
@-webkit-keyframes secondCityPhotoTIT3{
0%  {   z-index: 1; opacity: 0;}
66% {   z-index: 1; opacity: 1;}
67% {   z-index: 3; opacity: 1;}
100%{   z-index: 3; opacity: 1;}
}
@-moz-keyframes secondCityPhotoTIT3{
0%  {   z-index: 1; opacity: 0;}
66% {   z-index: 1; opacity: 1;}
67% {   z-index: 3; opacity: 1;}
100%{   z-index: 3; opacity: 1;}
}
.second_city_photo_TIT_sun {
    position: absolute;
    width: 95px;
    left: 32px;
    top: 23px;
    z-index: 4;
	animation: cityTitSun 4s linear infinite;
    -webkit-animation: cityTitSun 4s linear infinite;
    -moz-animation: cityTitSun 4s linear infinite;
}
@keyframes cityTitSun {
	  0%{ transform: scale(1)}
     15%{ transform: scale(1.2);}
     30%{ transform: scale(1);}
	100%{ transform: scale(1);}
}
@-moz-keyframes cityTitSun {
	  0%{ -moz-transform: scale(1)}
     15%{ -moz-transform: scale(1.2);}
     30%{ -moz-transform: scale(1);}
	100%{ -moz-transform: scale(1);}	 				
}
@-webkit-keyframes cityTitSun {
	  0%{ -webkit-transform: scale(1)}
     15%{ -webkit-transform: scale(1.2);}
     30%{ -webkit-transform: scale(1);}
	100%{ -webkit-transform: scale(1);}			 	
}
.second_city_photo_TIT_sun span{
    display: block;
    width:100%;
}
.second_city_photo {
    position: relative;
    width: 1140px;
    margin: -115px auto 0;
    z-index: 1;
    left: -70px;
}
.second_city_photo_shoe {
    position: relative;
    width: 550px;
    margin-top: -220px;
    z-index: 2;
    margin-left: 400px;
}	
.second_city_photo_shoe span{
    display: block;
	width:100%;
	animation: bottomTriangleShow 1.5s linear infinite;
    -webkit-animation: bottomTriangleShow 1.5s linear infinite;
    -moz-animation: bottomTriangleShow 1.5s linear infinite;
}
.secondWrap_part2_cont{
    position: relative;
    width: 930px; 
    margin:30px auto 0;
}
.secondWrap_part2_cont span {
    display: block;
    width: 240px;
    right: 5px;
    bottom: 10px;
    position: absolute;
}
.secondWrap_part_2 .circle_yellow {
    top: auto;
    bottom: 50px;
    right: auto;
    left: -55px;
}
.secondWrap_part_2 .circle_white {   
    top: auto;
    left: auto;  
    bottom: -145px;
    right: -85px;
}
.secondWrap_part_3{   
    margin:-200px auto 0;  
    z-index: 2;    
}
.secondWrap_part3_photo{
    position: relative;
    width: 930px; 
    margin:0px auto 0;
}
.secondWrap_part_3 .luckyGrace{    
    top:270px;
}
.secondWrap_part3_shoes{
    position: relative;
    width: 550px;
    margin-top: -170px; 
	animation: bottomTriangleShow 1.5s linear infinite;
    -webkit-animation: bottomTriangleShow 1.5s linear infinite;
    -moz-animation: bottomTriangleShow 1.5s linear infinite;
}
.secondWrap_part3_cont{
    position: relative;
    width: 797px; 
    margin:-125px auto 0;
}
.circle_pink {
    position: absolute;
    width: 230px;
    top: 945px;
    right: -55px;
    z-index: 1;
	animation: circleRotate 15s linear infinite;
    -webkit-animation: circleRotate 15s linear infinite;
    -moz-animation: circleRotate 15s linear infinite;
}
.secondWrap_part3_photo2{
    position: relative;
    width: 623px;
    margin-top: 100px;
    margin-left: 20px;    
}
.secondWrap_part3_photo2_TIT{
    position: absolute;
    width:822px;
    top:50%;
    left:50px;
    margin-top: -200px; 
}
.secondWrap_part3_photo2_shoe {
    position: absolute;
    width: 400px;
    bottom: 75px;
    right: -250px;
	animation: bottomTriangleShow 1.5s linear infinite;
    -webkit-animation: bottomTriangleShow 1.5s linear infinite;
    -moz-animation: bottomTriangleShow 1.5s linear infinite;
}
.secondWrap_part_3 .circle_white {
    top: auto;
    left: auto;
    bottom: 10px;
    right: -50px;
    width: 150px;
}

/*---------------------------thirdWrap---------------------------*/

.thirdWrap{
	width:960px;
	position: relative;
	height:auto;
	overflow: hidden;
	z-index:3;
	margin:-20px auto 0;    
    padding-bottom: 50px;   
    background-color: #68bdff;
    padding-top: 15px;
}
.thirdWrap:before{
    content:"";
    width:100%;
    height: 15px;
    background-color:#bae7c9;
    z-index: 0;
    position: absolute;
    top:0;
    left:0;
}
.thirdWrap_topBg{
    position: relative;
    width:986px;
    height: 458px;
    margin:0 auto 0;
    left:-13px;
    background-image: url(../images/thirdWrap_topBg.png);   
    z-index: 2;
}
.thirdWrap_top_TIT {
    position: absolute;
    width: 960px;
    left: 50%;
    top: -10px;
    margin-left: -480px;
}
.waterPattern{
    width:1080px;
    left:50%;
    top:100px;
    margin-left: -540px;
    z-index: 0;
    position: absolute;    
}
.classic_TV_screen {
    position: relative;
    width: 960px;
    height: 500px;    
    overflow: hidden;
 /*   margin:30px auto 0;*/
	margin: 60px auto 0;
    z-index: 2;
}
.waterPattern2{  
    top:953px;   
}
/*.thirdWrap_cont_1{
    position: relative;
    width: 600px;
    margin:20px auto 0;
    z-index: 3;
}*/
.thirdWrap_cont_1 {
    position: relative;
    width: 600px;
    margin: -15px auto 0;
    z-index: 3;
}
.thirdWrap_cont1_shoe1 {
    position: absolute;
    width: 255px;
    left: -160px;
    bottom: -115px;
}
.thirdWrap_cont1_shoe2 {
    position: absolute;
    width: 250px;
    right: -180px;
    top: -30px;
}
.thirdWrap_cont1_shoe1 span, .thirdWrap_cont1_shoe2 span{
	animation: bottomTriangleShow 1.5s linear infinite;
    -webkit-animation: bottomTriangleShow 1.5s linear infinite;
    -moz-animation: bottomTriangleShow 1.5s linear infinite;
	display: block;
	width:100%;
}
.thirdWrap_photo_1{
    position: relative;
    width: 989px;
    margin:-20px auto 0; 
    left:-15px;
    z-index: 1;
}
.thirdWrap_part_1{
    position: relative;
    width: 100%;
    margin:-40px auto 0;
    z-index: 2;
}
.thirdWrap_photo1_TIT{
    position: relative;
    width: 588px;
    margin:0 auto 0; 
}
.thirdWrap_photo1_cont {
    position: relative;
    width: 728px;
    margin: -30px auto 0;
}
.thirdWrap_waterLeft {
    position: absolute;
    width: 480px;
    left: -55px;
    top: -95px;
    z-index: 0;
}
/*.thirdWrap_waterLeft span{
    width:100;
    display: block;
    animation: thirdWater 3s 1.5s ease-in infinite;
    -webkit-animation: thirdWater 3s 1.5s ease-in infinite;
    -moz-animation: thirdWater 3s 1.5s ease-in infinite;    
}*/
.thirdWrap_waterRight {
    position: absolute;
    width: 200px;
    right: 90px;
    top: -115px;
    z-index: 0;
}
/*.thirdWrap_waterRight span{
    width:100;
    display: block;
    animation: thirdWater 3.3s 1.5s ease-in infinite;
    -webkit-animation: thirdWater 3.3s 1.5s ease-in infinite;
    -moz-animation: thirdWater 3.3s 1.5s ease-in infinite;    
}*/
@keyframes thirdWater {
	  0%{ transform: scale(.8)}
      8%{ transform: scale(1.3);}
     12%{ transform: scale(.8);}
	100%{ transform: scale(.8);}
}
@-moz-keyframes thirdWater {
	  0%{ -moz-transform: scale(.81)}
      8%{ -moz-transform: scale(1.3);}
     12%{ -moz-transform: scale(.8);}
	100%{ -moz-transform: scale(.8);}	 				
}
@-webkit-keyframes thirdWater {
	  0%{ -webkit-transform: scale(.8)}
      8%{ -webkit-transform: scale(1.3);}
     12%{ -webkit-transform: scale(.8);}
	100%{ -webkit-transform: scale(.8);}			 	
}
.doubleTriangle_bg {
    width: 941px;
    margin-left: 19px;
    position: relative;
    margin-top: -70px;
}
.doubleTriangle_shoe1 {
    position: absolute;
    width: 338px;
    left: 50%;
    top: 70px;
    margin-left: -220px;
}
.doubleTriangle_shoe2 {
    position: absolute;
    width: 365px;
    left: 50%;
    top: 55px;
    margin-left: 95px;
}
.doubleTriangle_shoe1 span, .doubleTriangle_shoe2 span{
	animation: bottomTriangleShow 1.5s linear infinite;
    -webkit-animation: bottomTriangleShow 1.5s linear infinite;
    -moz-animation: bottomTriangleShow 1.5s linear infinite;
	display: block;
	width:100%;
}
.thirdWrap_part_2{
    position: relative;
    width: 100%;
    margin:-65px auto 0;
    z-index: 2;
}
.thirdWrap_photo_2{
    position: relative;
    width:520px;
    margin-left: 20px;
    z-index: 1;
}
.thirdWrap_photo2_TIT {
    position: absolute;
    width: 492px;
    right: 25px;
    top: 160px;
    z-index: 2;
}
.thirdWrap_photo2_TIT span{
    display: block;
    width:100%;
 }   
.thirdWrap_photo2_cont {
    position: absolute;
    width: 355px;
    right: 48px;
    top: 372px;
    z-index: 2;
}
.thirdWrap_photo2_shoe1 {
    position: absolute;
    width: 300px;
    right: 176px;
    bottom: 18px;
    z-index: 2;
}
.thirdWrap_photo2_shoe2 {
    position: absolute;
    width: 255px;
    right: 20px;
    bottom: 73px;
    z-index: 2;
}
.thirdWrap_photo2_shoe1 span, .thirdWrap_photo2_shoe2 span{
	animation: bottomTriangleShow 1.5s linear infinite;
    -webkit-animation: bottomTriangleShow 1.5s linear infinite;
    -moz-animation: bottomTriangleShow 1.5s linear infinite;
	display: block;
	width:100%;
}
.waterPattern3{
    position: absolute;
    width:960px;
    left:0;
    bottom:0;
    z-index: 0;    
}

/*---------------------------.bottomWrap---------------------------*/

.bottomWrap{
	width:960px;
	position: relative;
	height:auto;
	overflow: hidden;
	z-index:3;
	margin:0 auto 0; 
	/*padding-top: 30px;*/
	padding-bottom: 45px;
}
/*.bottomWrap:before{
    content:"";
    width:100%;
    height:30px;
    background-color:#f8e6f5;
    z-index: 1;
    position: absolute;
    top:0;
    left:0;
}*/
.bottomWrap_bg{
	position: absolute;
	width:960px;
	left:0;
	top:190px;
	z-index: 0;	
}
.bottomWrap_bg2{
	position: absolute;
	width:960px;
	left:0;
	bottom:0;
	z-index: 1;
}
.bottomWrap_topPhoto{
	width:968px;
	position: relative;
	margin:0 auto 0; 
	z-index:1;
	left:-4px;
}
.bottomWrap_TIT{
	width:800px;
	position: relative;
	margin:50px auto 0;
}
.bottomWrap_favor{
	width:773px;
	position: relative;
	margin:-55px auto 0;	
}
.bottomWrap_favor span{
	position: absolute;
	width:88px;
	display: block;	
}
.bottomWrap_favor span.bottomWrap_favor_arrowLeft {
    left: 2px;
    bottom: 3px;
}
.bottomWrap_favor span.bottomWrap_favor_arrowRight {
    right: 4px;
    top: 2px;
}
.bottomWrap_Triangle {
    position: relative;
    width: 850px;
    z-index: 1;
    margin-left: 190px;
    margin-top: -90px;
}
.bottomWrap_Triangle_show {
    position: absolute;
    width: 500px;
    left: 197px;
    top: 67px;
    animation: bottomTriangleShow 1.5s linear infinite;
    -webkit-animation: bottomTriangleShow 1.5s linear infinite;
    -moz-animation: bottomTriangleShow 1.5s linear infinite;
}
@keyframes bottomTriangleShow {
	  0%{ transform: rotate(0deg) ;}
     10%{ transform: rotate(15deg);}
     20%{ transform: rotate(0deg) ;}
	100%{ transform: rotate(0deg) ;}		
}
@-moz-keyframes bottomTriangleShow {
	  0%{ -moz-transform: rotate(0deg) ;}
     10%{ -moz-transform: rotate(15deg);}
     20%{ -moz-transform: rotate(0deg) ;}
	100%{ -moz-transform: rotate(0deg) ;}	 				
}
@-webkit-keyframes bottomTriangleShow {
	  0%{ -webkit-transform: rotate(0deg) ;}
     10%{ -webkit-transform: rotate(15deg);}
     20%{ -webkit-transform: rotate(0deg) ;}
	100%{ -webkit-transform: rotate(0deg) ;} 			 	
}
.bottomWrap .thirdWrap_waterLeft {    
    left: 0;
    top: 525px;    
}
.bottomWrap .thirdWrap_waterRight {    
    width: 190px;
    right: 195px;
    top: 470px;
    z-index: 5;
}
.bottomWrap_Photo {
    position: relative;
    width: 715px;
    margin-left: 15px;
    margin-top: -160px;
    z-index: 2;
}
.bottomWrap_Photo_cont {
    position: absolute;
    width: 420px;
    right: -130px;
    bottom: 180px;
}
.bottomWrap_shoe {
    position: absolute;
    width: 330px;
    right: -190px;
    bottom: -10px;
}
.bottomWrap_shoe span{
	width:100%;
	display: block;
	animation: bottomTriangleShow 1.5s linear infinite;
    -webkit-animation: bottomTriangleShow 1.5s linear infinite;
    -moz-animation: bottomTriangleShow 1.5s linear infinite;
}
.bottomWrap .circle_yellow {   
    width: 255px;
    top: 40px;
    right: auto;   
    left: -45px;
    animation: circleRotate 20s linear infinite;
    -webkit-animation: circleRotate 20s linear infinite;
    -moz-animation: circleRotate 20s linear infinite;
}
@keyframes circleRotate {
	  0%{ transform: rotate(0deg)  ;}     
	100%{ transform: rotate(360deg);}		
}
@-moz-keyframes circleRotate {
	  0%{ -moz-transform: rotate(0deg)  ;}     
	100%{ -moz-transform: rotate(360deg);}					
}
@-webkit-keyframes circleRotate {
	  0%{ -webkit-transform: rotate(0deg)  ;}     
	100%{ -webkit-transform: rotate(360deg);}				 	
}
.bottomWrap .circle_white {   
    width: 179px;
    top: 295px;
    left: auto;   
    right: -270px;
	animation: circleRotate 15s linear infinite;
    -webkit-animation: circleRotate 15s linear infinite;
    -moz-animation: circleRotate 15s linear infinite;
}
.bottomWrap_a{
	position: relative;
	width:100%;
	height: 150px;
	margin:20px auto 0;
	z-index: 5;	
}
.bottomWrap_a1{
	position: absolute;
	width:421px;
	top:0;
	left:40px;	
}
.bottomWrap_a2{
	position: absolute;
	width:421px;
	top:0;
	right:40px;	
}
.bottomWrap_a1_1, .bottomWrap_a2_1, .bottomWrap_a1_2, .bottomWrap_a2_2{
	position: absolute;
	width:100%;
	top:0;
	left:0;
	z-index: 2;
	opacity: 1;
}
.bottomWrap_a1_2, .bottomWrap_a2_2{	
	z-index: 1;
	opacity: 0;
}
.bottomWrap_a1:hover .bottomWrap_a1_1{
	z-index: 1;
	opacity: 0;	
}
.bottomWrap_a1:hover .bottomWrap_a1_2{
	z-index: 2;
	opacity: 1;	
}
.bottomWrap_a2:hover .bottomWrap_a2_1{
	z-index: 1;
	opacity: 0;	
}
.bottomWrap_a2:hover .bottomWrap_a2_2{
	z-index: 2;
	opacity: 1;	
}

/*------------------------------ transition---------------------------------*/

.btn_goTop, .btn_goTop span, .demo_show li a, .bottomWrap_a1_1, .bottomWrap_a2_1, .bottomWrap_a1_2, .bottomWrap_a2_2{	
	transition:all .4s;
	-webkit-transition:all .4s;
	-moz-transition:all .4s;
}

/*---------------------------btn_goTop---------------------------*/

.btn_goTop {
    position: fixed !important;
    width: 60px;
    height: 60px;
    border-radius: 20%;
    background-color: rgb(40, 167, 225);
    bottom: 10px;
    left: 50%;
    margin-left: 490px;
    z-index: 999;
    display: block;
}
.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);
}
.btn_goTop:hover{	
	background-color:rgb(140, 219, 213)
}
.btn_goTop:hover.btn_goTop span{	
	margin: -15px 0 0 -17px;
}

/*---------------------------demoWrap---------------------------*/

.demoWrap{
	width:960px;
	position: relative;
	height:auto;
	overflow: hidden;
	z-index:3;
	margin:0 auto 0;        
    background-color: #f8e6f5;  
	padding-bottom: 90px;
}
.demo_top{
    position: relative;
    width:100%;
    margin:0 auto 0;    
}
.demo_TIT {
    position: relative;
    width: 853px;    
    margin-left: 110px;
    margin-top: -15px;
}
.demo_TIT::before {
    content: "";
    width: 277px;
    height: 180px;
    position: absolute;
    right: -13px;
    top: -2px;
    background-image: url(../images/demo_TIT_shoe.gif);
}
.demoWrap_titSelect{
    position: relative;
    width:100%;
    height: 160px;
    margin:45px auto 0;    
}
.demo_titSelect_1, .demo_titSelect_2{
    position: absolute;
    width:420px;
    height: 160px;
    left:42px;
    top:0;    
}
.demo_titSelect_2{
    right:42px;
    left:auto;    
}
.demo_titSelect_1_1, .demo_titSelect_2_1, .demo_titSelect_2_1, .demo_titSelect_2_2{
    position: absolute;
    width:100%;
    left:0;
    top:0;
    z-index: 1;
    opacity: 0;
}
.demo_titSelect_1_2, .demo_titSelect_2_2{
    z-index: 2;  
    opacity: 1;
}
.demo_titSelect_1.active .demo_titSelect_1_1,
.demo_titSelect_2.active .demo_titSelect_2_1{
    z-index: 2;  
    opacity: 1;    
}
.demo_titSelect_1.active .demo_titSelect_1_2,
.demo_titSelect_2.active .demo_titSelect_2_2{
    z-index: 1;  
    opacity: 0;    
}
.demoWrap_cityWalker, .demoWrap_waterPlaying{
    position: relative;
    width:100%;
    height: 1450px;
    margin:0 auto;    
}
.demoWrap_bgPool{
	position: absolute;
	width:1103px;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	z-index: 0;
}
.demo_select {
    position: absolute;
    width: 834px;
    height: 66px;
    left: 45px;
    top: 57px;
    z-index: 3;
}
.demo_select li {
    float: left;
    width: 194px;
    height: 66px;   
    cursor: pointer;
    background-position: bottom;
}
.demo_select li.demo_select_lady, .demo_select li.demo_select_lady2{
    background-image: url(../images/demo_select_lady.png);
}
.demo_select li.demo_select_gentleman, .demo_select li.demo_select_gentleman2{
    background-image: url(../images/demo_select_gentleman.png);    
}
.demo_select li.demo_select_kids, .demo_select li.demo_select_kids2{
    background-image: url(../images/demo_select_kids.png);    
}
.demo_select li.demo_select_lady.select, .demo_select li.demo_select_gentleman.select, .demo_select li.demo_select_kids.select,
.demo_select li.demo_select_lady2.select, .demo_select li.demo_select_gentleman2.select, .demo_select li.demo_select_kids2.select{
    background-position: top;
    height: 66px;   
}

.demo_show{
    position: absolute;
    width:100%;
    height: 100%;
    left:45px;   
    top:0;   
    overflow: hidden;
    z-index: 1;
}
.demo_show ul{
    height: 1431px;
    width: 8253px;
    position: absolute;
    top:120px;
    left:0;      
}
.demo_show.demo_show_2 ul{   
    width:2745px;    
}
.demo_show.demo_show_3 ul{   
    width:6405px;    
}
.demo_show.demo_show_4 ul{   
    width:1830px;    
}
.demo_show.demo_show_5 ul{   
    width:915px;    
}
.demo_show.demo_show_6 ul{   
    width:1830px;    
}
.demo_show li{
    position: relative;
    width:870px;
    height:1431px;
    float:left;
    margin-right: 45px;   
}
.demo_show li:nth-child(1){
    margin-left: 0 !important;   
}

.demo_show_1 li:nth-child(1){
    background-image: url(../images/demo_lady_1.png);
}
.demo_show_1 li:nth-child(2){
    background-image: url(../images/demo_lady_2.png);
}
.demo_show_1 li:nth-child(3){
    background-image: url(../images/demo_lady_3.png);
}
.demo_show_1 li:nth-child(4){
    background-image: url(../images/demo_lady_4.png);
}
.demo_show_1 li:nth-child(5){
    background-image: url(../images/demo_lady_5.png);
}
.demo_show_1 li:nth-child(6){
    background-image: url(../images/demo_lady_6.png);
}
.demo_show_1 li:nth-child(7){
    background-image: url(../images/demo_lady_7.png);
}
.demo_show_1 li:nth-child(8){
    background-image: url(../images/demo_lady_8.png);
}
.demo_show_1 li:nth-child(9){
    background-image: url(../images/demo_lady_9.png);
}
.demo_show_2 li:nth-child(1){
    background-image: url(../images/demo_man_1.png);
}
.demo_show_2 li:nth-child(2){
    background-image: url(../images/demo_man_2.png);
}
.demo_show_2 li:nth-child(3){
    background-image: url(../images/demo_man_3.png);
}
.demo_show_3 li:nth-child(1){
    background-image: url(../images/demo_children_1.png);
}
.demo_show_3 li:nth-child(2){
    background-image: url(../images/demo_children_2.png);
}
.demo_show_3 li:nth-child(3){
    background-image: url(../images/demo_children_3.png);
}
.demo_show_3 li:nth-child(4){
    background-image: url(../images/demo_children_4.png);
}
.demo_show_3 li:nth-child(5){
    background-image: url(../images/demo_children_5.png);
}
.demo_show_3 li:nth-child(6){
    background-image: url(../images/demo_children_6.png);
}
.demo_show_4 li:nth-child(1){
    background-image: url(../images/demo2_lady_1.png);
}
.demo_show_4 li:nth-child(2){
    background-image: url(../images/demo2_lady_2.png);
}
.demo_show_5 li:nth-child(1){
    background-image: url(../images/demo2_man_1.png);
}
.demo_show_6 li:nth-child(1){
    background-image: url(../images/demo2_children_1.png);
}
.demo_show_6 li:nth-child(2){
    background-image: url(../images/demo2_children_2.png);
}
.demo_show li a{
    display: block;
    width:220px;
    height: 219px;    
    position: absolute;
    overflow: hidden;
}

.demo_show_1 li a {
    border: #f5516f 4px solid;
}
.demo_show_1 li a:hover{   
    border:#ff8f00 4px solid;   
}
.demo_show_2 li a{   
    border:#002060 4px solid;   
}
.demo_show_2 li a:hover{   
    border:#0548cf 4px solid;   
}
.demo_show_3 li a{   
    border:#10544e 4px solid;   
}
.demo_show_3 li a:hover{   
    border:#20a397 4px solid;   
}
.demo_show li a:nth-child(1) {
    width: 500px;
    height: 435px;
    left: 50%;
    margin-left: -250px;
    top: 215px;
    border:none;
}
.demo_show li a:nth-child(2) {
    top: 752px;
    left: 43px;
}
.demo_show li a:nth-child(3) {
    top: 752px;
    left: 288px;
}
.demo_show li a:nth-child(4) {
    top: 752px;
    left: 533px;
}
.demo_show li a:nth-child(5) {
    top: 996px;
    left: 43px;
}
.demo_show li a:nth-child(6) {
    top: 996px;
    left: 288px;
}
.demo_show li a:nth-child(7) {
    top: 996px;
    left: 533px;
}

.demoShoe_next, .demoShoe_pre {
    position: absolute;
    width: 100px;
    height: 500px;
    /*background-color: rgba(0,0,0,.4);*/
    top: 50%;
    left: 0;
    z-index: 99;
    margin-top: -500px;
}
.demoShoe_next{
    right:95px;
    left:auto;    
}
.demo_top.demo_top2{
	position: absolute;
	width:100%;
	bottom:0;
	left:0;
	transform: scaleY(-1);
	-moz-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
}

/*---------------------------loading---------------------------*/

.loading{	
	position:fixed;
	width:100vw;
	height:100%;
	z-index:9999;  
    background-image: url(../images/bg.jpg);
}
.laodingKv {
    position: absolute;
    width: 300px;
    top: 50%;
    left: 50%;
    margin: -85px 0 0 -150px;
    animation: laodingKv 3s linear infinite;
    -webkit-animation: laodingKv 3s linear infinite;
    -moz-animation: laodingKv 3s linear infinite;
    z-index: 5;
}
@keyframes laodingKv {
	  0%{ transform: scale(1);}
      5%{ transform: scale(1.1);}
	 10%{ transform: scale(1); }
     55%{ transform: scale(1);}
	 60%{ transform: scale(1.1); }
     65%{ transform: scale(1); }
	100%{ transform: scale(1);} 	
}
@-moz-keyframes laodingKv {
	  0%{ -moz-transform: scale(1);}
      5%{ -moz-transform: scale(1.1);}
	 10%{ -moz-transform: scale(1); }
     55%{ -moz-transform: scale(1);}
     60%{ -moz-transform: scale(1.1);}
	 60%{ -moz-transform: scale(1); }
	100%{ -moz-transform: scale(1);} 				
}
@-webkit-keyframes laodingKv {
	  0%{ -webkit-transform: scale(1);}
      5%{ -webkit-transform: scale(1.1);}
	 10%{ -webkit-transform: scale(1); }
     55%{ -webkit-transform: scale(1);}
     60%{ -webkit-transform: scale(1.1);}
	 65%{ -webkit-transform: scale(1); }
	100%{ -webkit-transform: scale(1);} 		 	
}




.thirdWrap_cont1_water_1{	
	position: absolute;
	top: 75px;
	right: -430px;
	width: 400px;
	z-index: -1;
	opacity: 1;
	animation: thirdWrapContWaterRight  2.5s .5s linear infinite both;
	-webkit-animation: thirdWrapContWaterRight  2.5s .5s linear infinite both;
	-moz-animation: thirdWrapContWaterRight  2.5s .5s linear infinite both;	
}
@keyframes thirdWrapContWaterRight {
0%  {right: -430px; opacity:1; transform-origin:right bottom; transform:scale(.1);}
15% {right: -300px; opacity:1; transform-origin:right bottom; transform:scale(1);}
40% {right: -250px; opacity:0; transform-origin:right bottom; transform:scale(1.2);}
100%{right: -430px; opacity:0; transform-origin:right bottom; transform:scale(1);}
}	
@-webkit-keyframes thirdWrapContWaterRight {
0%  {right: -430px; opacity:1; -webkit-transform-origin:right bottom; -webkit-transform:scale(.1);}
15% {right: -300px; opacity:1; -webkit-transform-origin:right bottom; -webkit-transform:scale(1);}
40% {right: -250px; opacity:0; -webkit-transform-origin:right bottom; -webkit-transform:scale(1.2);}
100%{right: -430px; opacity:0; -webkit-transform-origin:right bottom; -webkit-transform:scale(1);}
}	
@-moz-keyframes thirdWrapContWaterRight {
0%  {right: -430px; opacity:1; -moz-transform-origin:right bottom; -moz-transform:scale(.1);}
15% {right: -300px; opacity:1; -moz-transform-origin:right bottom; -moz-transform:scale(1);}
40% {right: -250px; opacity:0; -moz-transform-origin:right bottom; -moz-transform:scale(1.2);}
100%{right: -430px; opacity:0; -moz-transform-origin:right bottom; -moz-transform:scale(1);}
}	
.thirdWrap_cont1_water_1 span{	
	-moz-transform:scaleX(-1);
	-webkit-transform:scaleX(-1);	
	transform:scaleX(-1);
	display: block;
	position:absolute;
	width:100%;
}
.thirdWrap_cont1_water_2{	
	position: absolute;
	top: -106px;
	left: -705px;
	width: 700px;
	z-index: -1;
	opacity: 1;
	animation: thirdWrapContWaterLeft 2.5s linear infinite both;
	-webkit-animation: thirdWrapContWaterLeft 2.5s linear infinite both;
	-moz-animation: thirdWrapContWaterLeft 2.5s linear infinite both;	
}
@keyframes thirdWrapContWaterLeft {
0%  {left: -705px; opacity:1; transform-origin:left bottom; transform:scale(.1);}
15%  {left:-280px; opacity:1; transform-origin:left bottom; transform:scale(1);}
40% {left: -200px; opacity:.5; transform-origin:left bottom; transform:scale(1.2);}
45% {left: -200px; opacity:0; transform-origin:left bottom; transform:scale(1.2);}
100%{left: -705px; opacity:0; transform-origin:left bottom; transform:scale(1);}
}	
@-webkit-keyframes thirdWrapContWaterLeft {
0%  {left: -705px; opacity:1;  -webkit-transform-origin:left bottom; -webkit-transform:scale(.1);}
15%  {left:-280px; opacity:1;  -webkit-transform-origin:left bottom; -webkit-transform:scale(1);}
40% {left: -200px; opacity:.5; -webkit-transform-origin:left bottom; -webkit-transform:scale(1.2);}
45% {left: -200px; opacity:0;  -webkit-transform-origin:left bottom; -webkit-transform:scale(1.2);}
100%{left: -705px; opacity:0;  -webkit-transform-origin:left bottom; -webkit-transform:scale(1);}
}
@-moz-keyframes thirdWrapContWaterLeft {
0%  {left: -705px; opacity:1; -moz-transform-origin:left bottom; -moz-transform:scale(.1);}
15%  {left:-280px; opacity:1; -moz-transform-origin:left bottom; -moz-transform:scale(1);}
40% {left: -200px; opacity:.5;-moz-transform-origin:left bottom; -moz-transform:scale(1.2);}
45% {left: -200px; opacity:0; -moz-transform-origin:left bottom; -moz-transform:scale(1.2);}
100%{left: -705px; opacity:0; -moz-transform-origin:left bottom; -moz-transform:scale(1);}
}
.thirdWrap_part_2 .thirdWrap_cont1_water_1{	
	position: absolute;
	top: -20px;
	right: -100px;
	width: 440px;
	z-index: -1;
	opacity: 1;
	animation: none;
	animation: thirdWrapContWaterRight2  3s linear infinite both;
	-webkit-animation: thirdWrapContWaterRight2  3s linear infinite both;
	-moz-animation: thirdWrapContWaterRight2  3s linear infinite both;	
}
@keyframes thirdWrapContWaterRight2 {
0%  {right: -430px; opacity:1; transform-origin:right bottom; transform:scale(.1);}
15% {right: -100px; opacity:1; transform-origin:right bottom; transform:scale(1);}
40% {right:  -70px; opacity:0; transform-origin:right bottom; transform:scale(1.2);}
100%{right: -430px; opacity:0; transform-origin:right bottom; transform:scale(1);}
}

.thirdWrap_part_1 .thirdWrap_cont1_water_2{	
	position: absolute;
	top: -50px;
	left: -705px;
	width: 600px;
	z-index: -1;
	opacity: 1;
	animation: thirdWrapContWaterLeft 3s linear infinite both;
	-webkit-animation: thirdWrapContWaterLeft 3s linear infinite both;
	-moz-animation: thirdWrapContWaterLeft 3s linear infinite both;	
}