body{	
	height:100%;	
	width:100%;		
	min-width: 960px; 
    overflow-x: hidden;   
    background-color: #FFF;
}
.productsBody{
    background:#fff url(../images/productsWrap_map_bg.jpg);    
}
.container-fluid {    
    padding-right: 0;
    padding-left: 0;   
}
*{
    outline: none;    
}

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

.indexWrap{ 
	position:fixed; 
	width:100%; 
	height:100%; 
	overflow:hidden;	
}
.indexBg{	
	background-size:cover;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	z-index:1;		
}
.indexBg1, .indexBg2, .indexBg_mobile{
    position: absolute;
    width:100%;
    height: 100%;
    background-position: center bottom;
}
.indexBg1{
    z-index:1;    
}
.indexBg2{
    z-index:5;   
}
.indexBg_mobile{
    display: none;   
}
.index_sunny {
    position: absolute;
    width: auto;
    height: 70%;
    right: -650px;
    top: 0;
    z-index: 3;
    -webkit-animation:sunny 30s linear infinite;
	-moz-animation:sunny 30s linear infinite;	
	animation: sunny 30s linear infinite;	
}
@-webkit-keyframes hubarrow {
0%{right: -650px;} 30%{right: -100px;} 60%{right: -100px;} 90%{right: -650px;}
}
@-moz-keyframes hubarrow {
0%{right: -650px;} 30%{right: -100px;} 60%{right: -100px;} 90%{right: -650px;}
}
@keyframes  sunny {
0%{right: -650px;} 30%{right: -100px;} 60%{right: -100px;} 90%{right: -650px;}
}
.index_logo {
    position: absolute;
    width: 600px;
    left: 15px;
    top: 25px;
    z-index: 1;
}
.index_logo_topCover{
    position: absolute;
    width:100%;
    height: 100px;
    left:0;
    top:0;
    z-index: 1;
    background-color: rgba(0,0,0,.7);
    display: none;
}
.copyRights_left {
    position: absolute;
    width: 209px;
    left: 15px;
    bottom: 15px;
    z-index: 99;
}
.copyRights_right {
    position: absolute;
    width: 75px;
    right: 15px;
    bottom: 10px;
    z-index: 99;
}
.indexWrap h1 {
    position: absolute;
    width: 1350px;
    left: 50%;
    margin-left: -660px;
    height: 180px;
    bottom: 50px;
    /*border: 3px #FF0 solid;*/
    z-index: 9;
    display: block;
}
.index_TIT_left, .index_TIT_right{
    position: absolute;
    width:45%;
    top:0;
    z-index: 1;
}
.index_TIT_left{
    left:0;
}
.index_TIT_right{
    right:0;
}
.index_TIT_Rudder {
    position: absolute;
    width: 220px;
    left: 50%;
    top: 50%;
    margin: -120px 0 0 -113px;
    z-index: 2;
    transform-origin: center center;
    -moz-transform-origin: center center;
    -webkit-transform-origin: center center;
    -webkit-animation:indexRudder 10s linear infinite;
	-moz-animation:indexRudder 10s linear infinite;	
	animation: indexRudder 10s linear infinite;	
}
@-webkit-keyframes indexRudder {
0%{ -webkit-transform:rotate(0deg);}  33%{ -webkit-transform:rotate(360deg);} 66%{ -webkit-transform:rotate(-360deg);} 100%{ -webkit-transform:rotate(0deg);}
}
@-moz-keyframes indexRudder {
0%{ -moz-transform:rotate(0deg);}  33%{ -moz-transform:rotate(360deg);} 66%{ -moz-transform:rotate(-360deg);} 100%{ -moz-transform:rotate(0deg);}
}
@keyframes  indexRudder {
0%{ transform:rotate(0deg);}  33%{ transform:rotate(360deg);} 66%{ transform:rotate(-360deg);} 100%{ transform:rotate(0deg);}
}
.runnder_bk {
    position: absolute;
    width: 90%;
    height: 130px;
    left: 5%;
    bottom: 0;
    margin: auto;
    background-color: #000;
    border-radius: 100px;
    z-index: 0;
    filter: blur(6px);
}
.index_btn {
    position: absolute;
    width: 250px;
    left: 50%;
    margin-left: -125px;
    bottom: -20px;
    z-index: 3;
    -webkit-animation:indexBtn 1.5s linear infinite;
	-moz-animation:indexBtn 1.5s linear infinite;	
	animation: indexBtn 1.5s linear infinite;	
}
@-webkit-keyframes indexBtn {
0%{ -webkit-transform: scale(1);}  50%{ -webkit-transform: scale(1.1);} 100%{ -webkit-transform: scale(1);}
}
@-moz-keyframes indexBtn {
0%{ -moz-transform: scale(1);}  50%{ -moz-transform: scale(1.1);} 100%{ -moz-transform: scale(1);}
}
@keyframes  indexBtn {
0%{ transform: scale(1);}  50%{ transform: scale(1.1);} 100%{ transform: scale(1);}
}
.index_TIT_left span{
    display: block;
    position: absolute;
    width:100%;
    top:0;
    left:0;   
    -webkit-animation:indexTITL 5s ease-in-out infinite;
	-moz-animation:indexTITL 5s ease-in-out infinite;	
	animation: indexTITL 5s ease-in-out infinite;	
}
@-webkit-keyframes indexTITL {
20%{ left:0; } 22%{ left:-50px;} 24%{ left:40px;} 26%{ left:0;}
}
@-moz-keyframes indexTITL {
20%{ left:0; } 22%{ left:-50px;} 24%{ left:40px;} 26%{ left:0;}
}
@keyframes  indexTITL {
20%{ left:0; } 22%{ left:-50px;} 24%{ left:40px;} 26%{ left:0;}
}
.index_TIT_right span{
    display: block;
    position: absolute;
    width:100%;
    top:0;
    right:0;   
    -webkit-animation:indexTITR 5s ease-in-out infinite;
	-moz-animation:indexTITR 5s ease-in-out infinite;	
	animation: indexTITR 5s ease-in-out infinite;	
}
@-webkit-keyframes indexTITR {
35%{ right:0; } 37%{ right:-50px;} 39%{ right:40px;} 41%{ right:0;}
}
@-moz-keyframes indexTITR {
35%{ right:0; } 37%{ right:-50px;} 39%{ right:40px;} 41%{ right:0;}
}
@keyframes  indexTITR {
35%{ right:0; } 37%{ right:-50px;} 39%{ right:40px;} 41%{ right:0;}
}
.index_character {
    position: absolute;
    width: 1100px;
    height: 600px;
    left: 50%;
    top: 50%;
    margin: -300px 0 0 -550px;
    z-index: 3;
    /*border: #FF0 3px solid;*/
}
.index_character_left {
    position: absolute;
    width: 900px;
    left: 0;
    bottom: -20px;
    z-index: 1;
    opacity: 0;
}
.index_character_right{
    position: absolute;
    width:519px;
    right:-65px;
    bottom:-20px;
    z-index: 2; 
    opacity: 0;
}
.index_character_left.indexGo{   
    -webkit-animation:indexLeft .5s 2s ease-out 1 forwards ;
	-moz-animation:indexLeft .5s 2s ease-out 1 forwards ;
	animation: indexLeft .5s 2s ease-out 1 forwards ;
}
@-webkit-keyframes indexLeft {
0%{ opacity: 0; left: -50%;} 100%{ opacity:1; left: 0;} 
}
@-moz-keyframes indexLeft {
0%{ opacity: 0; left: -50%;} 100%{ opacity:1; left: 0;} 
}
@keyframes  indexLeft {
0%{ opacity: 0; left: -50%;} 100%{ opacity:1; left: 0;} 
}
.index_character_right.indexGo{   
    -webkit-animation:indexRight .5s 3s ease-out 1 forwards ;
	-moz-animation:indexRight .5s 3s ease-out 1 forwards ;
	animation: indexRight .5s 3s ease-out 1 forwards ;
}
@-webkit-keyframes indexRight {
0%{ opacity: 0; right: -70%;} 100%{ opacity:1; right: -65px;} 
}
@-moz-keyframes indexRight {
0%{ opacity: 0; right: -70%;} 100%{ opacity:1; right: -65px;} 
}
@keyframes  indexRight {
0%{ opacity: 0; right: -70%;} 100%{ opacity:1; right: -65px;} 
}
.index_character_Luffy {
    position: absolute;
    width: 1050px;
    height: 670px;
    left: 50%;
    margin-left: -515px;
    bottom: -90px;
    z-index: 3;
}
.index_character_Luffy_1, .index_character_Luffy_2, .index_character_Luffy_3{
    position: absolute;
    width:100%;    
    left:0;    
}
.index_character_Luffy_1{
    top:-150%;
    z-index: 1;
    opacity: 0;
}
.index_character_Luffy_2{
    z-index: 2; 
    opacity: 0;
    top: -40px;
}
.index_character_Luffy_3{
    z-index: 3; 
    opacity: 0;
    top:0;
}
.index_character_Luffy_1.indexGo{   
    -webkit-animation:indexLuffy1 5s 4s ease-in 1 forwards ;
	-moz-animation:indexLuffy1 5s 4s ease-in 1 forwards ;
	animation: indexLuffy1 5s 4s ease-in 1 forwards ;
}
@-webkit-keyframes indexLuffy1 {
0%{ opacity: 0; top:-150%;} 5%{ opacity:1; top:0;} 30%{ opacity:1; top:0;} 32%{ opacity:0; top:0;}
}
@-moz-keyframes indexLuffy1 {
0%{ opacity: 0; top:-150%;} 5%{ opacity:1; top:0;} 30%{ opacity:1; top:0;} 32%{ opacity:0; top:0;}
}
@keyframes  indexLuffy1 {
0%{ opacity: 0; top:-150%;} 5%{ opacity:1; top:0;} 30%{ opacity:1; top:0;} 32%{ opacity:0; top:0;}
}
.index_character_Luffy_2.indexGo{   
   -webkit-animation:indexLuffy2 5s 4s ease-in 1 forwards ;
	-moz-animation:indexLuffy2 5s 4s ease-in 1 forwards ;
	animation: indexLuffy2 5s 4s ease-in 1 forwards ;
}
@-webkit-keyframes indexLuffy2 {
4%{ opacity: 0; } 5%{ opacity:1; -webkit-transform: scale(1);} 30%{ opacity:1; -webkit-transform: scale(1.1); top: -60px;} 100%{ opacity:0; -webkit-transform: scale(1.2); top: -80px;}
}
@-moz-keyframes indexLuffy2 {
4%{ opacity: 0; } 5%{ opacity:1; -moz-transform: scale(1);} 30%{ opacity:1; -moz-transform: scale(1.1); top: -60px;} 100%{ opacity:0; -moz-transform: scale(1.2); top: -80px;}
}
@keyframes  indexLuffy2 {
4%{ opacity: 0; } 5%{ opacity:1; transform: scale(1);} 30%{ opacity:1; transform: scale(1.1); top: -60px;} 100%{ opacity:0; transform: scale(1.2); top: -80px;}
}
.index_character_Luffy_3.indexGo{     
    -webkit-animation:indexLuffy3 5s 4s ease-in 1 forwards ;
	-moz-animation:indexLuffy3 5s 4s ease-in 1 forwards ;
	animation: indexLuffy3 5s 4s ease-in 1 forwards ;
}
@-webkit-keyframes indexLuffy3 {
30%{ opacity: 0;} 33%{ opacity:1;} 100%{ opacity:1;} 
}
@-moz-keyframes indexLuffy3 {
30%{ opacity: 0;} 33%{ opacity:1;} 100%{ opacity:1;} 
}
@keyframes  indexLuffy3 {
30%{ opacity: 0;} 33%{ opacity:1;} 100%{ opacity:1;} 
}


/*------------------------------ index_loading--------------------------------------*/

.index_loading, .second_loading{ 
	position:fixed; 
	width:100vw; 
	height:100vh; 
	overflow:hidden;
    z-index: 999;
    background-color: #FFF;
}
.second_loading{ 
	background:#fff url(../images/loading_bg2.gif) center center;
    background-size:cover;
	-webkit-background-size:cover;
	-moz-background-size:cover;
}
.loading_bg1{	
	background-size:cover;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	z-index:1;
    background: #ffffed url(../images/loading_bg1.jpg) center center;
}
.loading_logo{
    position: absolute;
    width:500px;
    top:50%;
    left:50%;
    margin:-50px 0 0 -250px;
    z-index: 2;    
    -webkit-animation:loadingLogo1 .5s linear infinite;
	-moz-animation:loadingLogo1 .5s linear infinite;
	animation: loadingLogo1 .5s linear infinite;
}
@-webkit-keyframes loadingLogo1 {
0%{ -webkit-transform: scale(1);} 15%{ -webkit-transform: scale(1.1);} 30%{ -webkit-transform: scale(1);} 
}
@-moz-keyframes loadingLogo1 {
0%{ -moz-transform: scale(1);} 15%{ -moz-transform: scale(1.1);} 30%{ -moz-transform: scale(1);} 
}
@keyframes  loadingLogo1 {
0%{ transform: scale(1);} 15%{ transform: scale(1.1);} 30%{ transform: scale(1);} 
}
.loading_logo.indexGo{   
    -webkit-animation:loadingLogo2 2s .8s 1 forwards;
	-moz-animation:loadingLogo2 2s .8s 1 forwards;
	animation: loadingLogo2 2s .8s 1 forwards;
}
@-webkit-keyframes loadingLogo2 {
0%{ -webkit-transform: scale(1);} 100%{ -webkit-transform: scale(122);top: 103%;left: 118%;} 
}
@-moz-keyframes loadingLogo2 {
0%{ -moz-transform: scale(1);} 100%{ -moz-transform: scale(122);top: 103%;left: 118%;} 
}
@keyframes  loadingLogo2 {
0%{ transform: scale(1);} 100%{ transform: scale(122);top: 103%;left: 118%;} 
}
@-webkit-keyframes loadingLogo960 {
0%{ -webkit-transform: scale(1);} 100%{ -webkit-transform: scale(100); top: 100%; left: -425%;} 
}
@-moz-keyframes loadingLogo960 {
0%{ -moz-transform: scale(1);} 100%{ -moz-transform: scale(100); top: 100%; left: -425%;} 
}
@keyframes  loadingLogo960 {
0%{ transform: scale(1);} 100%{ transform: scale(100); top: 100%; left: -425%;} 
}

/*------------------------------ videoWrap--------------------------------------*/

.videoWrap{ 
	position:relative; 
	width:100%; 
	height:100vh; 
	overflow:hidden;
    margin:0 auto;
    z-index: 1;
}
.video_bg2{
    position: absolute;
    width:100%;
    height: 100%;
    left:0;
    bottom:0;
    z-index:1;    
}
.video_bg1{
    position: absolute;
    width:100%;
    height: 100%;
    left:0;
    top:0;
    z-index:2;  
}
.video_bg1.indexGo{     
    -webkit-animation:videoBg1 6s .5s 1 forwards;
	-moz-animation:videoBg1 6s .5s 1 forwards;
	animation: videoBg1 6s .5s 1 forwards;
}
@-webkit-keyframes videoBg1 {
0%{ top:0; opacity: 1;}  70%{ top:-90vh; opacity:1;} 99%{ top:-100vh; opacity:0;} 100%{ display: none; opacity:0;} 
}
@-moz-keyframes videoBg1 {
0%{ top:0; opacity: 1;}  70%{ top:-90vh; opacity:1;} 99%{ top:-100vh; opacity:0;} 100%{ display: none; opacity:0;} 
}
@keyframes  videoBg1 {
0%{ top:0; opacity: 1;}  70%{ top:-90vh; opacity:1;} 99%{ top:-100vh; opacity:0;} 100%{ display: none; opacity:0;} 
}
.video_main {
    position: absolute;
    width: 1000px;
    left: 50%;
    top: 65%;
    margin: -385px 0 0 -500px;
    z-index: 5;
    opacity: 0;
    transform: scale(.2);
    -webkit-transform: scale(.2);
    -moz-transform: scale(.2);
}
.video_main.indexGo {
    -webkit-animation:videoMain .6s 3s ease-out 1 forwards;
	-moz-animation:videoMain .6s 3s ease-out 1 forwards;
	animation: videoMain .6s 3s ease-out 1 forwards;
}
@-webkit-keyframes videoMain {
0%{opacity:0; top:80%; -webkit-transform:scale(.2);}70%{opacity:.6; -webkit-transform:scale(.6); top:25%;}100%{opacity: 1; top:50%; -webkit-transform: scale(1);}     
}
@-moz-keyframes videoMain {
0%{opacity:0; top:80%; -moz-transform:scale(.2);}70%{opacity:.6; -moz-transform:scale(.6); top:25%;}100%{opacity: 1; top:50%; -moz-transform: scale(1);} 
}
@keyframes  videoMain {
0%{opacity:0; top:80%; transform:scale(.2);}70%{opacity:.6; transform:scale(.6); top:25%;}100%{opacity: 1; top:50%; transform: scale(1);} 
}
.video_main_fix1{
    position: absolute;
    width:14%;
    left:0;
    top:0;
    z-index: 5;    
}
.video_main_fix2{
    position: absolute;
    width:15%;
    right:0;
    top:0;
    z-index: 5;     
}
.video_screen {
    position: absolute;
    width: 836px;
    height: 544px;
    left: 50%;
    top: 50%;    
    margin: -265px 0 0 -410px;
    z-index: 2;
}
.video_select {
    position: absolute;
    width: 300px;
    left: -230px;
    top: 80px;
    z-index: 7;
    opacity: 0;
}
.video_select.indexGo {
    -webkit-animation:videoSelect 1s 4s linear 1 forwards;
	-moz-animation:videoSelect 1s 4s linear 1 forwards;
	animation: videoSelect 1s 4s linear 1 forwards;
}
@-webkit-keyframes videoSelect {
0%{opacity:0; top:150px;} 100%{opacity:1; top:80px;}     
}
@-moz-keyframes videoSelect {
0%{opacity:0; top:150px;} 100%{opacity:1; top:80px;} 
}
@keyframes  videoSelect {
0%{opacity:0; top:150px;} 100%{opacity:1; top:80px;} 
}
@-webkit-keyframes videoSelectMobile {
0%{opacity:0; top: auto; bottom:-45px;} 100%{opacity:1; top:auto; bottom:-115px;}     
}
@-moz-keyframes videoSelectMobile {
0%{opacity:0; top: auto; bottom:-45px;} 100%{opacity:1; top:auto; bottom:-115px;} 
}
@keyframes  videoSelectMobile {
0%{opacity:0; top: auto; bottom:-45px;} 100%{opacity:1; top:auto; bottom:-115px;} 
}
.video_select_1, .video_select_2{
    position: absolute;
    width:100%;
    top:0;
    left:0; 
    opacity: 0;
    z-index: 1;
}
.video_select_1.show, .video_select_2.show{
    opacity: 1;
    z-index: 3;
}
.video1, .video2{   
    position: absolute;
    left:0;
    top:0;
    display: none;
}
.video1.show, .video2.show{   
    display: block;
}

/*------------------------------ selectWrap--------------------------------------*/

.selectWrap{ 
	position:relative; 
	width:100%; 
	height:auto; 
	overflow:hidden;
    margin: 0 auto 0;
    z-index: 2;
}
.selectWrap_top{
    position: relative;
    width:100%;
    height: 150px;
    margin:0 auto 0;
    z-index: 1;    
}
.select_nav{
    position: absolute;
    width:530px;
    height: 150px;    
    right:0;
    top:0;
    z-index: 2;
    /*border:#F00 2px solid;*/
}
.select_nav li{
    position: absolute;
    width:100px;
    height: 100%;
    bottom:0; 
}
.select_nav li:nth-child(1){
    left:30px;
    z-index: 1;
}
.select_nav li:nth-child(2){
    left:170px;
    z-index: 2;
}
.select_nav li:nth-child(3){
    left:290px;
    z-index: 2;
}
.select_nav li:nth-child(4){
    left:410px;
    z-index: 1;
}
.select_nav.select_nav_2 li:nth-child(2){    
    z-index: 3;
}
.select_nav_name{
    position: absolute;
    width:100%;
    left:0;
    bottom:0;
    z-index: 1;    
}
.select_nav_1 li:nth-child(1) .select_nav_Character {
    position: absolute;
    width: 119px;
    left: -45px;
    bottom: -30px;
    z-index: 2;
}
.select_nav_1 li:nth-child(2) .select_nav_Character {
    position: absolute;
    width: 86px;
    left: -30px;
    bottom: -45px;
    z-index: 2;
}
.select_nav_1 li:nth-child(3) .select_nav_Character {
    position: absolute;
    width: 88px;
    left: -32px;
    bottom: -42px;
    z-index: 2;
}
.select_nav_1 li:nth-child(4) .select_nav_Character {
    position: absolute;
    width: 116px;
    left: -45px;
    bottom: -35px;
    z-index: 2;
}
.select_nav_2 li:nth-child(1) .select_nav_Character {
    position: absolute;
    width: 186px;
    left: -85px;
    bottom: -54px;
    z-index: 0;
}
.select_nav_2 li:nth-child(2) .select_nav_Character {
    position: absolute;
    width: 100px;
    left: -39px;
    bottom: -59px;
    z-index: 2;
}
.select_nav_2 li:nth-child(3) .select_nav_Character {
    position: absolute;
    width: 88px;
    left: -28px;
    bottom: -44px;
    z-index: 2;
}
.select_nav_2 li:nth-child(4) .select_nav_Character {
    position: absolute;
    width: 76px;
    left: -20px;
    bottom: -70px;
    z-index: 2;
}
.select_nav_2 li:nth-child(4):before{
    content:"";
    position: absolute;
    width: 100%;
    height: 27px;
    left: -5px;
    bottom: 0;
    z-index: 3;
    background-image: url(../images/select_nav_8_2.png);
}
.select_nav li .select_nav_Character{    
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
}
.select_nav li:hover .select_nav_Character{
    margin-bottom: 10px;  
}
.selectWrap main{
    position: relative;
    width:100%;
    height: 601px;
    margin:-1px auto 0;
    z-index: 3;
    background-color: aqua;
}    
.select_show{
    position: absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;    
}

/*------- selectShow_luffy--------*/

.selectShow_luffy{
    background-color:#e70012;    
}
.select_Character_luffy {
    position: absolute;
    width: 450px;
    left: 50%;
    margin-left: -550px;
    bottom: 20px;
    z-index: 3;
}
.select_Mark_luffy {
    position: absolute;
    width: 90px;
    left: -25px;
    top: 175px;
}
.select_Name_luffy {
    position: absolute;
    width: 550px;
    left: 50%;
    top: 50px;
    margin-left: -205px;
    z-index: 0;
}
.selectShow_shoes {
    position: absolute;
    width: 450px;
    height: 325px;
    left: 50%;
    top: 50%;
    margin: -60px 0 0 -170px;
    z-index: 5;
    /*border: #000 2px solid;*/
}
.select_logo_delite4 {
    position: absolute;
    width: 185px;
    left: 82px;
    bottom: 2px;
}
.select_TIT {
    position: absolute;
    width: 200px;
    left: 280px;
    bottom: 0;
}
.select_show_btnArea{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 265px 460px 265px 0;
    border-color: transparent #a1000d transparent transparent;
    position:absolute;
    right:0;
    top:50%;
    margin-top: -265px;
}
.select_show_btn1, .select_show_btn2{
    position: absolute;
    width:250px;    
}
.select_show_btn1 {
    left: 105px;
    top: -60px;
    -webkit-animation:selectBtn 1s linear infinite;
	-moz-animation:selectBtn 1s linear infinite;
	animation: selectBtn 1s linear infinite;
}
@-webkit-keyframes selectBtn {
0%{-webkit-transform:scale(1);} 50%{-webkit-transform:scale(1.05);} 100%{-webkit-transform:scale(1);}   
}
@-moz-keyframes selectBtn {
0%{-moz-transform:scale(1);} 50%{-moz-transform:scale(1.05);} 100%{-moz-transform:scale(1);}  
}
@keyframes  selectBtn {
0%{transform:scale(1);} 50%{transform:scale(1.05);} 100%{transform:scale(1);} 
}
.select_show_btn2 {
    left: 180px;
    top: 15px;
    -webkit-animation:selectBtn 1s .5s linear infinite;
	-moz-animation:selectBtn 1s .5s linear infinite;
	animation: selectBtn 1s .5s linear infinite;
}

/*-------- selectShow_zoro--------*/

.selectShow_zoro{
    background-color:#01a187;    
}
.select_Character_zoro {
    position: absolute;
    width: 560px;
    left: 50%;
    margin-left: -720px;
    bottom: 55px;
    z-index: 3;
}
.select_Mark_zoro {
    position: absolute;
    width: 90px;
    left: 60px;
    top: 85px;
}
.select_Name_zoro {
    position: absolute;
    width: 550px;
    left: 50%;
    top: 35px;
    margin-left: -170px;
    z-index: 0;
}
.select_Shoe_zoro {    
    width: 500px;
    height: 330px;   
    margin: -65px 0 0 -145px;   
}
.selectShow_zoro .select_show_btnArea{   
    border-color: transparent #085f51 transparent transparent;   
}

/*-------- selectShow_sanji--------*/

.selectShow_sanji{
    background-color:#113e79;    
}
.select_Character_sanji {
    position: absolute;
    width: 450px;
    left: 50%;
    margin-left: -580px;
    bottom: 20px;
    z-index: 3;
}
.select_Mark_sanji {
    position: absolute;
    width: 90px;
    left: 65px;
    top: 230px;
}
.select_Name_sanji {
    position: absolute;
    width: 550px;
    left: 50%;
    top: 50px;
    margin-left: -205px;
    z-index: 0;
}
.select_Shoe_sanji {    
    height: 310px;   
    margin: -40px 0 0 -195px;   
}
.select_Shoe_sanji .select_TIT{    
    bottom: 1px;
}
.selectShow_sanji .select_show_btnArea{   
    border-color: transparent #001a3b transparent transparent;   
}

/*-------- selectShow_usopp--------*/

.selectShow_usopp{
    background-color:#ffe171;    
}
.select_Character_usopp {
    position: absolute;
    width: 409px;
    left: 50%;
    margin-left: -475px;
    bottom: 20px;
    z-index: 3;
}
.select_Mark_usopp {
    position: absolute;
    width: 90px;
    left: -25px;
    top: 315px;
}
.select_Name_usopp {
    position: absolute;
    width: 550px;
    left: 50%;
    top: 75px;
    margin-left: -165px;
    z-index: 0;
}
.select_Shoe_usopp {
    height: 300px;
    width: 500px;
    margin: -55px 0 0 -120px;
}
.select_Shoe_usopp .select_TIT {    
    left: 315px;    
}
.selectShow_usopp .select_show_btnArea{   
    border-color: transparent #d9ab00 transparent transparent;   
}

/*-------- selectShow_franky--------*/

.selectShow_franky{
    background-color:#34c9e4;    
}
.select_Character_franky {
    position: absolute;
    width: 610px;
    left: 50%;
    margin-left: -660px;
    bottom: 20px;
    z-index: 3;
}
.select_Mark_franky {
    position: absolute;
    width: 90px;
    left: 120px;
    top: 490px;
}
.select_Name_franky {
    position: absolute;
    width: 590px;
    left: 50%;
    top: 85px;
    margin-left: -123px;
    z-index: 0;
}
.select_Shoe_franky {
    height: 300px;
    width: 500px;
    margin: -35px 0 0 -85px;
}
.select_Shoe_franky  .select_TIT {    
    left: 320px;    
}
.selectShow_franky .select_show_btnArea{   
    border-color: transparent #006c80 transparent transparent;   
}

/*-------- selectShow_brook--------*/

.selectShow_brook{
    background-color:#007fcc;    
}
.select_Character_brook {
    position: absolute;
    width: 610px;
    left: 50%;
    margin-left: -660px;
    bottom: 20px;
    z-index: 3;
}
.select_Mark_brook {
    position: absolute;
    width: 90px;
    left: 60px;
    top: 105px;
}
.select_Name_brook {
    position: absolute;
    width: 590px;
    left: 50%;
    top: 85px;
    margin-left: -123px;
    z-index: 0;
}
.select_Shoe_brook {
    height: 300px;
    width: 500px;
    margin: -35px 0 0 -85px;
}
.select_Shoe_brook  .select_TIT {    
    left: 320px;    
}
.selectShow_brook .select_show_btnArea{   
    border-color: transparent #39b4ff transparent transparent;   
}

/*-------- selectShow_nami--------*/

.selectShow_nami{
    background-color:#db7719;    
}
.select_Character_nami {
    position: absolute;
    width: 450px;
    left: 50%;
    margin-left: -500px;
    bottom: 20px;
    z-index: 3;
}
.select_Mark_nami {
    position: absolute;
    width: 90px;
    left: 45px;
    top: 140px;
}
.select_Name_nami {
    position: absolute;
    width: 490px;
    left: 50%;
    top: 85px;
    margin-left: -123px;
    z-index: 0;
}
.select_Shoe_nami {
    height: 300px;
    width: 500px;
    margin: -35px 0 0 -125px;
}
.select_Shoe_nami .select_TIT {    
    left: 320px;    
}
.selectShow_nami .select_show_btnArea{   
    border-color: transparent #6b3400 transparent transparent;   
}

/*-------- selectShow_robin--------*/

.selectShow_robin{
    background-color:#6b6ab0;    
}
.select_Character_robin {
    position: absolute;
    width: 310px;
    left: 50%;
    margin-left: -450px;
    bottom: 20px;
    z-index: 3;
}
.select_Mark_robin {
    position: absolute;
    width: 90px;
    left: 45px;
    top: 210px;
}
.select_Name_robin{
    position: absolute;
    width: 490px;
    left: 50%;
    top: 85px;
    margin-left: -123px;
    z-index: 0;
}
.select_Shoe_robin{
    height: 300px;
    width: 500px;
    margin: -35px 0 0 -125px;
}
.select_Shoe_robin .select_TIT {    
    left: 320px;    
}
.selectShow_robin .select_show_btnArea{   
    border-color: transparent #6c46b8 transparent transparent;   
}

/*-------------------------------------------------------------------*/

.selectShow_shoes span{
    position: absolute;
    left:0;
    top:0;    
    -webkit-animation:selectShoeSpan 4s 1s linear infinite;
	-moz-animation:selectShoeSpan 4s 1s linear infinite;
	animation: selectShoeSpan 4s 1s linear infinite;
}
@-webkit-keyframes selectShoeSpan {
0%{left:0;} 5%{left:50px;} 10%{left:0;}   
}
@-moz-keyframes selectShoeSpan {
0%{left:0;} 5%{left:50px;} 10%{left:0;}  
}
@keyframes  selectShoeSpan {
0%{left:0;} 5%{left:50px;} 10%{left:0;}  
}
.select_Mark_luffy span, .select_Mark_zoro span, .select_Mark_sanji span, .select_Mark_usopp span,
.select_Mark_franky span, .select_Mark_brook span, .select_Mark_nami span, .select_Mark_robin span{
    position: absolute;
    left:0;
    top:0;    
    -webkit-animation:selectMarkSpan 10s linear infinite;
	-moz-animation:selectMarkSpan 10s linear infinite;
	animation: selectMarkSpan 10s linear infinite;
}
@-webkit-keyframes selectMarkSpan {
0%{-webkit-transform: rotate(0deg);} 100%{-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes selectMarkSpan {
0%{-moz-transform: rotate(0deg);} 100%{-moz-transform: rotate(-360deg);} 
}
@keyframes  selectMarkSpan {
0%{transform: rotate(0deg);} 100%{transform: rotate(-360deg);}  
}

/*------------------------------ products_luffy--------------------------------------*/

.productsWrap_top{
    position: relative;
    width:100%;
    z-index: 0;
    margin:0 auto;
	overflow:hidden;
}
.products_topSunny{
    position: absolute;
    width:100%;
    top:-500px;
    left:0;
    z-index: 1;     
}
.products_topSunny.indexGo{
    -webkit-animation:productSunny 4s 1.5s ease-out 1 forwards;
	-moz-animation:productSunny 4s 1.5s ease-out 1 forwards;
	animation: productSunny 4s 1.5s ease-out 1 forwards;   
}
@-webkit-keyframes productSunny {
0%{top:-500px;} 100%{top:0;}  
}
@-moz-keyframes productSunny {
0%{top:-500px;} 100%{top:0;}  
}
@keyframes  productSunny {
0%{top:-500px;} 100%{top:0;} 
}
.products_topSunny_logo {
    position: absolute;
    width: 900px;
    top: 47px;
    left: 50%;
    margin-left: -510px;
    opacity: 0;
}
.products_topSunny_logo.indexGo {
    -webkit-animation:productSunnyLogo 1s 4s linear 1 forwards;
	-moz-animation:productSunnyLogo 1s 4s linear 1 forwards;
	animation: productSunnyLogo 1s 4s linear 1 forwards;   
}
@-webkit-keyframes productSunnyLogo {
0%{top:-20px; opacity:0;} 100%{top:47px; opacity:1;}  
}
@-moz-keyframes productSunnyLogo {
0%{top:-20px; opacity:0;} 100%{top:47px; opacity:1;}  
}
@keyframes  productSunnyLogo {
0%{top:-20px; opacity:0;} 100%{top:47px; opacity:1;} 
}
.productsWrap_top h3{
    position: absolute;
    width:500px;
    left:50%;
    top:50%;
    margin: -20px 0 0 -250px;
    z-index: 3;    
}

/*---------------------------------鞋款介紹*/

.productsWrap_middle{
    position:relative;
    width:100%;
    height: 1592px;
    margin:-830px auto 0;
    z-index: 2;  
}
.productsWrap_middle main{
    position:absolute;
    width:100%;
    height: 100%;
    left:0;
    top:0;
    z-index: 1;
    overflow: hidden;  
}
.products_showBg{
    position: absolute;
    width:1920px;
    left:50%;
    margin-left: -960px;
    top:0;
    z-index: 0;
}
.products_Character_luffy {
    position: absolute;
    width: 750px;
    top: 50%;
    left: 50%;
    margin: -777px 0 0 -600px;
    z-index: 2;
    -webkit-animation:productsLuffy 10s linear infinite;
	-moz-animation:productsLuffy 10s linear infinite;
	animation: productsLuffy 10s linear infinite;   
}
@-webkit-keyframes productsLuffy {
0%{top:50%;} 50%{top:45%;} 100%{top:50%;}  
}
@-moz-keyframes productsLuffy {
0%{top:50%;} 50%{top:45%;} 100%{top:50%;}
}
@keyframes  productsLuffy {
0%{top:50%;} 50%{top:45%;} 100%{top:50%;}
}
.products_name_wood {
    position: absolute;
    width: 330px;
    left: 50%;
    top: 50%;
    margin: -670px 0 0 150px;
    z-index: 2;
}
.products_name {
    position: absolute;
    width: 185px;
    left: 50%;
    top: 50%;
    margin: -19px 0 0 -89px;
}
.products_cont{
    position: absolute;
    width:960px;
    left:50%;
    top:50%;
    margin:0 0 0 -480px;
    z-index: 2;
}
.products_shoes_show {
    position: absolute;
    width: 550px;
    height: 400px;
    /*border: #000 2px solid;*/
    left: 50%;
    top: 50%;
    margin: -240px 0 0 -135px;
    z-index: 5;
}
.products_shoes_show_1, .products_shoes_show_2, .products_shoes_show_3{
    position: absolute;
    width:100%;
    top:0;
    left:0;
}
.products_shoes_show_1{
    -webkit-animation:productsShoeShow1 6s linear infinite;
	-moz-animation:productsShoeShow1 6s linear infinite;
	animation: productsShoeShow1 6s linear infinite;
    opacity: 1;
    z-index: 3;
}
@-webkit-keyframes productsShoeShow1 {
0%{opacity:1; z-index:3; left:0;} 30%{opacity:1; z-index:3; left:0;} 33%{opacity:0; z-index:1; left:-80px;} 97%{opacity:0; z-index:1; left:80px;} 100%{opacity:1; z-index:3; left:0;}  
}
@-moz-keyframes productsShoeShow1 {
0%{opacity:1; z-index:3; left:0;} 30%{opacity:1; z-index:3; left:0;} 33%{opacity:0; z-index:1; left:-80px;} 97%{opacity:0; z-index:1; left:80px;} 100%{opacity:1; z-index:3; left:0;} 
}
@keyframes  productsShoeShow1 {
0%{opacity:1; z-index:3; left:0;} 30%{opacity:1; z-index:3; left:0;} 33%{opacity:0; z-index:1; left:-80px;} 97%{opacity:0; z-index:1; left:80px;} 100%{opacity:1; z-index:3; left:0;} 
}
.products_shoes_show_2{
    -webkit-animation:productsShoeShow2 6s linear infinite;
	-moz-animation:productsShoeShow2 6s linear infinite;
	animation: productsShoeShow2 6s linear infinite;
    opacity: 0;
    z-index: 2;
}
@-webkit-keyframes productsShoeShow2 {
0%{opacity:0; z-index:2; left:80px;} 30%{opacity:0; z-index:2; left:80px;} 33%{opacity:1; z-index:3; left:0;} 63%{opacity:1; z-index:3; left:0;} 66%{opacity:0; z-index:1; left:-80px;}  
}
@-moz-keyframes productsShoeShow2 {
0%{opacity:0; z-index:2; left:80px;} 30%{opacity:0; z-index:2; left:80px;} 33%{opacity:1; z-index:3; left:0;} 63%{opacity:1; z-index:3; left:0;} 66%{opacity:0; z-index:1; left:-80px;} 
}
@keyframes  productsShoeShow2 {
0%{opacity:0; z-index:2; left:80px;} 30%{opacity:0; z-index:2; left:80px;} 33%{opacity:1; z-index:3; left:0;} 63%{opacity:1; z-index:3; left:0;} 66%{opacity:0; z-index:1; left:-80px;}
}
.products_shoes_show_3{
    -webkit-animation:productsShoeShow3 6s linear infinite;
	-moz-animation:productsShoeShow3 6s linear infinite;
	animation: productsShoeShow3 6s linear infinite;
    opacity: 0;
    z-index: 1;
}
@-webkit-keyframes productsShoeShow3 {
0%{opacity:0; z-index:1; left:80px;} 63%{opacity:0; z-index:1; left:80px;} 66%{opacity:1; z-index:3; left:0;} 97%{opacity:1; z-index:3; left:0;} 100%{opacity:0; z-index:1; left:-80px;}  
}
@-moz-keyframes productsShoeShow3 {
0%{opacity:0; z-index:1; left:80px;} 63%{opacity:0; z-index:1; left:80px;} 66%{opacity:1; z-index:3; left:0;} 97%{opacity:1; z-index:3; left:0;} 100%{opacity:0; z-index:1; left:-80px;} 
}
@keyframes  productsShoeShow3 {
0%{opacity:0; z-index:1; left:80px;} 63%{opacity:0; z-index:1; left:80px;} 66%{opacity:1; z-index:3; left:0;} 97%{opacity:1; z-index:3; left:0;} 100%{opacity:0; z-index:1; left:-80px;}
}
.products_point_1 {
    position: absolute;
    width: 250px;
    left: 50%;
    top: 50%;
    margin: -490px 0 0 40px;
    z-index: 3;
}
.products_point_2 {
    position: absolute;
    width: 250px;
    left: 50%;
    top: 50%;
    margin: -433px 0 0 245px;
    z-index: 2;
}

/*---------------------------------中場BANNER*/

.productsWrap_middle_banner {
    position: relative;
    width: 100%;
    margin: -465px auto 0;
    z-index: 1;
    overflow:hidden;
}
.products_middle_banner_line{
    position: absolute;
    width:100%;
    left:0;
    bottom:0;
    z-index: 1;    
   -webkit-animation:middleBannerLine 1s linear infinite;
	-moz-animation:middleBannerLine 1s linear infinite;
	animation: middleBannerLine 1s linear infinite;   
}
@-webkit-keyframes middleBannerLine {
0%{-webkit-transform:scale(1);} 5%{-webkit-transform:scale(1.1);} 10%{-webkit-transform:scale(1);} 
15%{-webkit-transform:scale(1);} 20%{-webkit-transform:scale(1.1);} 25%{-webkit-transform:scale(1);} 100%{transform:scale(1);}
}
@-moz-keyframes middleBannerLine {
0%{-moz-transform:scale(1);} 5%{-moz-transform:scale(1.1);} 10%{-moz-transform:scale(1);} 
15%{-moz-transform:scale(1);} 20%{-moz-transform:scale(1.1);} 25%{-moz-transform:scale(1);} 100%{-moz-transform:scale(1);} 
}
@keyframes  middleBannerLine {
0%{transform:scale(1);} 5%{transform:scale(1.1);} 10%{transform:scale(1);} 15%{transform:scale(1);} 20%{transform:scale(1.1);} 25%{transform:scale(1);} 100%{transform:scale(1);}
}
.products_middle_banner_bubble {
    position: absolute;
    width: 450px;
    left: 50%;
    top: 50%;
    margin: 85px 0 0 -505px;
    z-index: 3;
}

/*---------------------------------服裝介紹*/

.productsWrap_clothes{
    position:relative;
    width:100%;
    margin:0 auto 0;
    z-index: 2;
    padding-top: 300px;
	overflow: hidden;
}
.productsWrap_clothes_bg_luffy{
    position:relative;
    width:100%;
    margin:0 auto 0;
    z-index: 1;
}
.productsWrap_clothes h3{
    position: absolute;
    width:500px;
    left:50%;
    top:70px;
    margin-left: -250px;    
    z-index: 3;    
}
.clothes_modelShow_boy, .clothes_modelShow_girl{
    position: absolute;
    width:100%;
    height: 1500px;
    left:0;
    top:300px; 
    z-index: 3;
}
.clothes_modelShow_1, .clothes_modelShow_2 {
    position: absolute;
    width: 330px;
    left: 50%;
    margin-left: -233px;
    top: 105px;
    z-index: 3;
}
.clothes_modelShow_2 {
    margin-left: 100px;
}
.clothes_modelShow_1>div, .clothes_modelShow_2>div, .clothes_detail_1>div, .clothes_detail_2>div{
    position: absolute;
    width:100%;
    left:0;
    top:0;
}
.clothes_modelShow_1_1, .clothes_modelShow_2_1{
    opacity: 1;
    z-index: 3;    
    -webkit-animation:clothes_modelShow1 6s linear infinite;
	-moz-animation:clothes_modelShow1 6s linear infinite;
	animation: clothes_modelShow1 6s linear infinite;   
}
@-webkit-keyframes clothes_modelShow1 {
0%{ opacity:1; z-index:3; left:0;} 30%{ opacity:1; z-index:3; left:0;} 33%{ opacity:0; z-index:1; left:80px;} 97%{ opacity:0; z-index:1; left:-80px;} 100%{ opacity:1; z-index:3; left:0;}
}
@-moz-keyframes clothes_modelShow1 {
0%{ opacity:1; z-index:3; left:0;} 30%{ opacity:1; z-index:3; left:0;} 33%{ opacity:0; z-index:1; left:80px;} 97%{ opacity:0; z-index:1; left:-80px;} 100%{ opacity:1; z-index:3; left:0;}
}
@keyframes  clothes_modelShow1 {
0%{ opacity:1; z-index:3; left:0;} 30%{ opacity:1; z-index:3; left:0;} 33%{ opacity:0; z-index:1; left:80px;} 97%{ opacity:0; z-index:1; left:-80px;} 100%{ opacity:1; z-index:3; left:0;}
}
.clothes_modelShow_1_2, .clothes_modelShow_2_2{
    opacity: 0;
    z-index: 2;    
   -webkit-animation:clothes_modelShow2 6s linear infinite;
	-moz-animation:clothes_modelShow2 6s linear infinite;
	animation: clothes_modelShow2 6s linear infinite;   
}
@-webkit-keyframes clothes_modelShow2 {
0%{ opacity:0; z-index:2; left:-80px;} 30%{ opacity:0; z-index:2; left:-80px;} 33%{ opacity:1; z-index:3; left:0;} 63%{ opacity:1; z-index:3; left:0px;} 66%{ opacity:0; z-index:1; left:80px;}
}
@-moz-keyframes clothes_modelShow2 {
0%{ opacity:0; z-index:2; left:-80px;} 30%{ opacity:0; z-index:2; left:-80px;} 33%{ opacity:1; z-index:3; left:0;} 63%{ opacity:1; z-index:3; left:0px;} 66%{ opacity:0; z-index:1; left:80px;}
}
@keyframes  clothes_modelShow2 {
0%{ opacity:0; z-index:2; left:-80px;} 30%{ opacity:0; z-index:2; left:-80px;} 33%{ opacity:1; z-index:3; left:0;} 63%{ opacity:1; z-index:3; left:0px;} 66%{ opacity:0; z-index:1; left:80px;}
}
.clothes_modelShow_1_3, .clothes_modelShow_2_3{
    opacity: 0;
    z-index: 1;    
    -webkit-animation:clothes_modelShow3 6s linear infinite;
	-moz-animation:clothes_modelShow3 6s linear infinite;
	animation: clothes_modelShow3 6s linear infinite;   
}
@-webkit-keyframes clothes_modelShow3 {
0%{ opacity:0; z-index:1; left:-80px;} 63%{ opacity:0; z-index:1; left:-80px;} 66%{ opacity:1; z-index:3; left:0;} 97%{ opacity:1; z-index:3; left:0px;} 100%{ opacity:0; z-index:1; left:80px;}
}
@-moz-keyframes clothes_modelShow3 {
0%{ opacity:0; z-index:1; left:-80px;} 63%{ opacity:0; z-index:1; left:-80px;} 66%{ opacity:1; z-index:3; left:0;} 97%{ opacity:1; z-index:3; left:0px;} 100%{ opacity:0; z-index:1; left:80px;}
}
@keyframes  clothes_modelShow3 {
0%{ opacity:0; z-index:1; left:-80px;} 63%{ opacity:0; z-index:1; left:-80px;} 66%{ opacity:1; z-index:3; left:0;} 97%{ opacity:1; z-index:3; left:0px;} 100%{ opacity:0; z-index:1; left:80px;}
}
.clothes_model_luffy_b {
    position: absolute;
    width: 590px;
    left: 50%;
    top: 50%;
    margin: -550px 0 0 -760px;
    z-index: 5;
}
.clothes_contTIT_luffy_b {
    position: absolute;
    width: 800px;
    top: 50%;
    left: 50%;
    margin: -45px 0 0 -230px;
    z-index: 9;
}
.clothes_cont_luffy_b {
    position: absolute;
    width: 730px;
    top: 50%;
    left: 50%;
    margin: 45px 0 0 -250px;
    z-index: 9;
}
.clothes_detail_TIT {
    position: absolute;
    width: 150px;
    left: 50%;
    top: 50%;
    margin: -165px 0 0px 430px;
    z-index: 5;
}
.clothes_detail_TIT span{
    position: relative;
    display: block;
    width:100%;    
    -webkit-animation:clothesDetailTIT 2s linear infinite;
	-moz-animation:clothesDetailTIT 2s linear infinite;
	animation: clothesDetailTIT 2s linear infinite;   
}
@-webkit-keyframes clothesDetailTIT {
0%{left: 0;} 50%{left: 40px;} 100%{left: 0;}
}
@-moz-keyframes clothesDetailTIT {
0%{left: 0;} 50%{left: 40px;} 100%{left: 0;}
}
@keyframes  clothesDetailTIT {
0%{left: 0;} 50%{left: 40px;} 100%{left: 0;}
}
.clothes_detail_1, .clothes_detail_2 {
    position: absolute;
    width: 230px;
    left: 50%;
    top: 50%;
    margin: -643px 0 0px 433px;
    z-index: 5;
}
.clothes_detail_2 {   
    margin: -410px 0 0px 433px;
}
.clothes_detail_1_1, .clothes_detail_2_1{
    opacity: 1;
    z-index: 2;    
    -webkit-animation:clothes_detail1 12s linear infinite;
	-moz-animation:clothes_detail1 12s linear infinite;
	animation: clothes_detail1 12s linear infinite;   
}
@-webkit-keyframes clothes_detail1 {
0%{opacity:1; z-index:2;} 14%{opacity:1; z-index:2;} 17%{opacity:0; z-index:1;} 98%{opacity:0; z-index:1;} 100%{opacity:1; z-index:2;}
}
@-moz-keyframes clothes_detail1 {
0%{opacity:1; z-index:2;} 14%{opacity:1; z-index:2;} 17%{opacity:0; z-index:1;} 98%{opacity:0; z-index:1;} 100%{opacity:1; z-index:2;}
}
@keyframes  clothes_detail1 {
0%{opacity:1; z-index:2;} 14%{opacity:1; z-index:2;} 17%{opacity:0; z-index:1;} 98%{opacity:0; z-index:1;} 100%{opacity:1; z-index:2;}
}
.clothes_detail_1_2, .clothes_detail_2_2{
    opacity: 0;
    z-index: 1;    
    -webkit-animation:clothes_detail2 12s linear infinite;
	-moz-animation:clothes_detail2 12s linear infinite;
	animation: clothes_detail2 12s linear infinite;   
}
@-webkit-keyframes clothes_detail2 {
0%{opacity:0; z-index:1;} 14%{opacity:0; z-index:1;} 17%{opacity:1; z-index:2;} 31%{opacity:1; z-index:2;} 34%{opacity:0; z-index:1;}
}
@-moz-keyframes clothes_detail2 {
0%{opacity:0; z-index:1;} 14%{opacity:0; z-index:1;} 17%{opacity:1; z-index:2;} 31%{opacity:1; z-index:2;} 34%{opacity:0; z-index:1;}
}
@keyframes  clothes_detail2 {
0%{opacity:0; z-index:1;} 14%{opacity:0; z-index:1;} 17%{opacity:1; z-index:2;} 31%{opacity:1; z-index:2;} 34%{opacity:0; z-index:1;}
}
.clothes_detail_1_3, .clothes_detail_2_3{
    opacity: 0;
    z-index: 1;    
    -webkit-animation:clothes_detail3 12s linear infinite;
	-moz-animation:clothes_detail3 12s linear infinite;
	animation: clothes_detail3 12s linear infinite;   
}
@-webkit-keyframes clothes_detail3 {
0%{opacity:0; z-index:1;} 31%{opacity:0; z-index:1;} 34%{opacity:1; z-index:2;} 48%{opacity:1; z-index:2;} 51%{opacity:0; z-index:1;}
}
@-moz-keyframes clothes_detail3 {
0%{opacity:0; z-index:1;} 31%{opacity:0; z-index:1;} 34%{opacity:1; z-index:2;} 48%{opacity:1; z-index:2;} 51%{opacity:0; z-index:1;}
}
@keyframes  clothes_detail3 {
0%{opacity:0; z-index:1;} 31%{opacity:0; z-index:1;} 34%{opacity:1; z-index:2;} 48%{opacity:1; z-index:2;} 51%{opacity:0; z-index:1;}
}
.clothes_detail_1_4, .clothes_detail_2_4{
    opacity: 0;
    z-index: 1;    
    -webkit-animation:clothes_detail4 12s linear infinite;
	-moz-animation:clothes_detail4 12s linear infinite;
	animation: clothes_detail4 12s linear infinite;   
}
@-webkit-keyframes clothes_detail4 {
0%{opacity:0; z-index:1;} 48%{opacity:0; z-index:1;} 51%{opacity:1; z-index:2;} 65%{opacity:1; z-index:2;} 68%{opacity:0; z-index:1;}
}
@-moz-keyframes clothes_detail4 {
0%{opacity:0; z-index:1;} 48%{opacity:0; z-index:1;} 51%{opacity:1; z-index:2;} 65%{opacity:1; z-index:2;} 68%{opacity:0; z-index:1;}
}
@keyframes  clothes_detail4 {
0%{opacity:0; z-index:1;} 48%{opacity:0; z-index:1;} 51%{opacity:1; z-index:2;} 65%{opacity:1; z-index:2;} 68%{opacity:0; z-index:1;}
}
.clothes_detail_1_5, .clothes_detail_2_5{
    opacity: 0;
    z-index: 1;    
    -webkit-animation:clothes_detail5 12s linear infinite;
	-moz-animation:clothes_detail5 12s linear infinite;
	animation: clothes_detail5 12s linear infinite;   
}
@-webkit-keyframes clothes_detail5 {
0%{opacity:0; z-index:1;} 65%{opacity:0; z-index:1;} 68%{opacity:1; z-index:2;} 82%{opacity:1; z-index:2;} 85%{opacity:0; z-index:1;}
}
@-moz-keyframes clothes_detail5 {
0%{opacity:0; z-index:1;} 65%{opacity:0; z-index:1;} 68%{opacity:1; z-index:2;} 82%{opacity:1; z-index:2;} 85%{opacity:0; z-index:1;}
}
@keyframes  clothes_detail5 {
0%{opacity:0; z-index:1;} 65%{opacity:0; z-index:1;} 68%{opacity:1; z-index:2;} 82%{opacity:1; z-index:2;} 85%{opacity:0; z-index:1;}
}
.clothes_detail_1_6, .clothes_detail_2_6{
    opacity: 0;
    z-index: 1;    
    -webkit-animation:clothes_detail6 12s linear infinite;
	-moz-animation:clothes_detail6 12s linear infinite;
	animation: clothes_detail6 12s linear infinite;   
}
@-webkit-keyframes clothes_detail6 {
0%{opacity:0; z-index:1;} 82%{opacity:0; z-index:1;} 85%{opacity:1; z-index:2;} 98%{opacity:1; z-index:2;} 100%{opacity:0; z-index:1;}
}
@-moz-keyframes clothes_detail6 {
0%{opacity:0; z-index:1;} 82%{opacity:0; z-index:1;} 85%{opacity:1; z-index:2;} 98%{opacity:1; z-index:2;} 100%{opacity:0; z-index:1;}
}
@keyframes  clothes_detail6 {
0%{opacity:0; z-index:1;} 82%{opacity:0; z-index:1;} 85%{opacity:1; z-index:2;} 98%{opacity:1; z-index:2;} 100%{opacity:0; z-index:1;}
}
.clothes_aarow_1{
    position: absolute;
    width:80px;
    right:40px;
    top:50%;
    margin-top: -40px;
    z-index: 10; 
    -webkit-animation:clothes_arrow 1s linear infinite;
	-moz-animation:clothes_arrow 1s linear infinite;
	animation: clothes_arrow 1s linear infinite;   
}
@-webkit-keyframes clothes_arrow {
0%{-webkit-transform: scale(1);} 50%{-webkit-transform: scale(1.1);} 100%{-webkit-transform: scale(1);} 
}
@-moz-keyframes clothes_arrow {
0%{-moz-transform: scale(1);} 50%{-moz-transform: scale(1.1);} 100%{-moz-transform: scale(1);} 
}
@keyframes  clothes_arrow {
0%{transform: scale(1);} 50%{transform: scale(1.1);} 100%{transform: scale(1);} 
}
.clothes_aarow_1:hover{   
    -webkit-animation:clothes_arrow .5s linear infinite;
	-moz-animation:clothes_arrow .5s linear infinite;
	animation: clothes_arrow .5s linear infinite;   
}
.clothes_topBtn {
    position: absolute;
    width: 400px;
    height: 77px;
    top: 245px;
    right: 0;
    z-index: 0;
}
.clothes_topBtn_1, .clothes_topBtn_2{
    position: absolute;
    width:200px;
    height: 77px;
    top:0;
    border-radius: 8px;
    transform:skewX(-15deg);
    -moz-transform:skewX(-15deg);
    -webkit-transform:skewX(-15deg);
}
.clothes_topBtn_1{
    left:0;
    background-color: #178ad2;
}
.clothes_topBtn_2{
    right:-20px; 
    width:220px;
    background-color: #1b1b1b;
}
.clothes_topBtn_1 span, .clothes_topBtn_2 span {
    position: absolute;
    width: 150px;
    top: 8px;
    left: 23px;
    transform: skewX(15deg);
    -moz-transform: skewX(15deg);
    -webkit-transform: skewX(15deg);
}
.clothes_modelShow_girl .clothes_modelShow_1>div, .clothes_modelShow_girl .clothes_modelShow_2>div{
    -webkit-animation:none;
	-moz-animation:none;
	animation: none;
}
.clothes_modelShow_girl .clothes_model_luffy_b {   
    margin: -666px 0 0 -840px;   
}
.clothes_aarow_2{
    position: absolute;
    width: 80px;
    left: 40px;
    top: 50%;
    margin-top: -40px;
    z-index: 10;
    -webkit-animation: clothes_arrow 1s linear infinite;
    -moz-animation: clothes_arrow 1s linear infinite;
    animation: clothes_arrow 1s linear infinite;
}
.clothes_aarow_2 span{
    display: block;
    width:100%;
    transform:scale(-1);
    -moz-transform: scale(-1);
    -webkit-transform: scale(-1);
}
.clothes_modelShow_girl{
    opacity: 0;
    z-index: -1;
}
.clothes_modelShow_boy.show{
    -webkit-animation: clothesShow1 .5s linear 1 forwards;
    -moz-animation: clothesShow1 .5s linear 1 forwards;
    animation: clothesShow1 .5s linear 1 forwards;
}
@-webkit-keyframes clothesShow1 {
0%{ opacity:0; left:-100px; z-index:-1;} 100%{ opacity:1; left:0; z-index:3;}
}
@-moz-keyframes clothesShow1 {
0%{ opacity:0; left:-100px; z-index:-1;} 100%{ opacity:1; left:0; z-index:3;}
}
@keyframes  clothesShow1 {
0%{ opacity:0; left:-100px; z-index:-1;} 100%{ opacity:1; left:0; z-index:3;}
}
.clothes_modelShow_boy.goOut{
    -webkit-animation: clothesOut1 .5s linear 1 forwards;
    -moz-animation: clothesOut1 .5s linear 1 forwards;
    animation: clothesOut1 .5s linear 1 forwards;
}
@-webkit-keyframes clothesOut1 {
0%{ opacity:1; left:0; z-index:3;} 100%{ opacity:0; left:-100px; z-index:-1;}
}
@-moz-keyframes clothesOut1 {
0%{ opacity:1; left:0; z-index:3;} 100%{ opacity:0; left:-100px; z-index:-1;}
}
@keyframes  clothesOut1 {
0%{ opacity:1; left:0; z-index:3;} 100%{ opacity:0; left:-100px; z-index:-1;}
}
.clothes_modelShow_girl.show{
    -webkit-animation: clothesShow2 .5s linear 1 forwards;
    -moz-animation: clothesShow2 .5s linear 1 forwards;
    animation: clothesShow2 .5s linear 1 forwards;
}
@-webkit-keyframes clothesShow2 {
0%{ opacity:0; left:100px; z-index:-1;} 100%{ opacity:1; left:0; z-index:3;}
}
@-moz-keyframes clothesShow2 {
0%{ opacity:0; left:100px; z-index:-1;} 100%{ opacity:1; left:0; z-index:3;}
}
@keyframes  clothesShow2 {
0%{ opacity:0; left:100px; z-index:-1;} 100%{ opacity:1; left:0; z-index:3;}
}
.clothes_modelShow_girl.goOut{
    -webkit-animation: clothesOut2 .5s linear 1 forwards;
    -moz-animation: clothesOut2 .5s linear 1 forwards;
    animation: clothesOut2 .5s linear 1 forwards;
}
@-webkit-keyframes clothesOut2 {
0%{ opacity:1; left:0; z-index:3;} 100%{ opacity:0; left:100px; z-index:-1;}
}
@-moz-keyframes clothesOut2 {
0%{ opacity:1; left:0; z-index:3;} 100%{ opacity:0; left:100px; z-index:-1;}
}
@keyframes  clothesOut2 {
0%{ opacity:1; left:0; z-index:3;} 100%{ opacity:0; left:100px; z-index:-1;}
}

/*---------------------------------穿搭SHOW*/

.productsWrap_wearShow{
    position: relative;
    width:100%;
    height:1300px;
    margin:0 auto 0;
    z-index: 1;
    overflow: hidden; 
    padding-top: 85px;
}
.productsWrap_wearShow h3{
    position: relative;
    width:500px;
    margin:0 auto 0;   
    z-index: 3;    
}
.productsWrap_wearShow_lineArea {
    position: absolute;
    width: 100%;
    height: 610px;
    /*border: #000 3px solid;*/
    z-index: 0;
    top: 50%;
    margin-top: -180px;
    left: 0;
}
.productsWrap_wearShow_line_1{
    position: absolute;
    width:100%;
    height: 260px;
    left:0;
    top:0;
    background-color: #b52122;    
    -webkit-animation: wearShowLine1 6s linear infinite;
    -moz-animation: wearShowLine1 6s linear infinite;
    animation: wearShowLine1 6s linear infinite;
}
@-webkit-keyframes wearShowLine1 {
0%{ width:100%;} 25%{ width:80%;} 50%{ width:100%;} 0%{ width:100%;}
}
@-moz-keyframes wearShowLine1 {
0%{ width:100%;} 25%{ width:80%;} 50%{ width:100%;} 0%{ width:100%;}
}
@keyframes  wearShowLine1 {
0%{ width:100%;} 25%{ width:80%;} 50%{ width:100%;} 0%{ width:100%;}
}
.productsWrap_wearShow_line_1 span {
    display: block;
    position: absolute;
    width: 350px;
    left: 50px;
    top: 70px;
}
.productsWrap_wearShow_line_2{
    position: absolute;
    width:100%;
    height: 60px;
    left:0;
    top:295px;
    background-color: #f4e037;    
    -webkit-animation: wearShowLine2 6s 2s linear infinite;
    -moz-animation: wearShowLine2 6s 2s linear infinite;
    animation: wearShowLine2 6s 2s linear infinite;
}
@-webkit-keyframes wearShowLine2 {
0%{ left:0; } 5%{ left:-100vw; } 6%{ left:-100vw; opacity:0; } 49%{ left:100vw; opacity:0; } 50%{ left:100vw; opacity:1; } 55%{ left:0; opacity:1; } 100%{ left:0; opacity:1; }
}
@-moz-keyframes wearShowLine2 {
0%{ left:0; } 5%{ left:-100vw; } 6%{ left:-100vw; opacity:0; } 49%{ left:100vw; opacity:0; } 50%{ left:100vw; opacity:1; } 55%{ left:0; opacity:1; } 100%{ left:0; opacity:1; }
}
@keyframes  wearShowLine2 {
0%{ left:0; } 5%{ left:-100vw; } 6%{ left:-100vw; opacity:0; } 49%{ left:100vw; opacity:0; } 50%{ left:100vw; opacity:1; } 55%{ left:0; opacity:1; } 100%{ left:0; opacity:1; }
}
.productsWrap_wearShow_line_3{
    position: absolute;
    width:100%;
    height: 130px;
    right:0;
    top:390px;
    background-color: #00a6ea;    
    -webkit-animation: wearShowLine3 6s 1s linear infinite;
    -moz-animation: wearShowLine3 6s 1s linear infinite;
    animation: wearShowLine3 6s 1s linear infinite;
}
@-webkit-keyframes wearShowLine3 {
0%{ width:100%;} 18%{ width:60%;} 36%{ width:100%;} 0%{ width:100%;}
}
@-moz-keyframes wearShowLine3 {
0%{ width:100%;} 18%{ width:60%;} 36%{ width:100%;} 0%{ width:100%;}
}
@keyframes  wearShowLine3 {
0%{ width:100%;} 18%{ width:60%;} 36%{ width:100%;} 0%{ width:100%;}
}
.productsWrap_wearShow_line_3 span {
    display: block;
    position: absolute;
    width: 430px;
    right: 30px;
    top: 65px;
}
.productsWrap_wearShow_line_4{
    position: absolute;
    width:100%;
    height: 50px;
    right:0;
    top:555px;
    background-color: #FFF;    
}
.productsWrap_photoShow{
    position: absolute;
    width:1000px;
    height: 900px;
    /*border: #000 3px solid;*/
    left:50%;
    top:55%;
    margin:-450px 0 0 -500px;
    z-index: 5;    
}
.productsWrap_photoShow>div{
    position: absolute;
    width:100%;
    left:0;
    top:0;    
}
.productsWrap_photoShow>div:nth-child(1){
    opacity: 1;
    z-index: 2;
    -webkit-animation:clothes_modelShow1 9s linear infinite;
	-moz-animation:clothes_modelShow1 9s linear infinite;
	animation: clothes_modelShow1 9s linear infinite; 
}
.productsWrap_photoShow>div:nth-child(2){
    opacity: 0;
    z-index: 0;
    -webkit-animation:clothes_modelShow2 9s linear infinite;
	-moz-animation:clothes_modelShow2 9s linear infinite;
	animation: clothes_modelShow2 9s linear infinite; 
}
.productsWrap_photoShow>div:nth-child(3){
    -webkit-animation:clothes_modelShow3 9s linear infinite;
	-moz-animation:clothes_modelShow3 9s linear infinite;
	animation: clothes_modelShow3 9s linear infinite; 
    opacity: 0;
    z-index: 0;
}

.productsWrap_photoShow.photoShow2>div:nth-child(1){
    opacity: 1;
    z-index: 2;
    -webkit-animation:clothes_modelShowA 6s linear infinite;
	-moz-animation:clothes_modelShowA 6s linear infinite;
	animation: clothes_modelShowA 6s linear infinite; 
}
.productsWrap_photoShow.photoShow2>div:nth-child(2){
    opacity: 0;
    z-index: 0;
    -webkit-animation:clothes_modelShowB 6s linear infinite;
	-moz-animation:clothes_modelShowB 6s linear infinite;
	animation: clothes_modelShowB 6s linear infinite; 
}
@-webkit-keyframes clothes_modelShowA {
0%{ opacity:1; z-index:3; left:0;} 47%{ opacity:1; z-index:3; left:0;} 50%{ opacity:0; z-index:1; left:80px;} 97%{ opacity:0; z-index:1; left:-80px;} 100%{ opacity:1; z-index:3; left:0;}
}
@-moz-keyframes clothes_modelShowA {
0%{ opacity:1; z-index:3; left:0;} 47%{ opacity:1; z-index:3; left:0;} 50%{ opacity:0; z-index:1; left:80px;} 97%{ opacity:0; z-index:1; left:-80px;} 100%{ opacity:1; z-index:3; left:0;}
}
@keyframes  clothes_modelShowA {
0%{ opacity:1; z-index:3; left:0;} 47%{ opacity:1; z-index:3; left:0;} 50%{ opacity:0; z-index:1; left:80px;} 97%{ opacity:0; z-index:1; left:-80px;} 100%{ opacity:1; z-index:3; left:0;}
}
@-webkit-keyframes clothes_modelShowB {
0%{ opacity:0; z-index:2; left:-80px;} 47%{ opacity:0; z-index:2; left:-80px;} 50%{ opacity:1; z-index:3; left:0;} 97%{ opacity:1; z-index:3; left:0px;} 100%{ opacity:0; z-index:1; left:80px;}
}
@-moz-keyframes clothes_modelShowB {
0%{ opacity:0; z-index:2; left:-80px;} 47%{ opacity:0; z-index:0; left:-80px;} 50%{ opacity:1; z-index:3; left:0;} 97%{ opacity:1; z-index:3; left:0px;} 100%{ opacity:0; z-index:1; left:80px;}
}
@keyframes  clothes_modelShowB {
0%{ opacity:0; z-index:0; left:-80px;} 47%{ opacity:0; z-index:0; left:-80px;} 50%{ opacity:1; z-index:3; left:0;} 97%{ opacity:1; z-index:3; left:0px;} 100%{ opacity:0; z-index:1; left:80px;}
}
.productsWrap_photoShow.photoShow1>div:nth-child(1){    
    -webkit-animation:none;
	-moz-animation:none;
	animation: none;
}

/*---------------------------------bottom banner*/

.productsWrap_bottom_banner{
    position: relative;
    width:100%;   
    margin:-50px auto 0;
    z-index: 2;
    overflow: hidden;     
}
.productsWrap_bottom_banner_bg{
    position: relative;
    width:100%;
}
.products_bottomBanner_main {
    position: absolute;
    width: 730px;
    left: 50%;
    top: 50%;
    margin: -130px 0 0 -330px;
    -webkit-animation: bottomBannerMain 8s ease-in infinite;
    -moz-animation: bottomBannerMain 8s ease-in infinite;
    animation: bottomBannerMain 8s ease-in infinite;
    transform: scale(2);
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    opacity:0; 
}
@-webkit-keyframes bottomBannerMain {
0%{-webkit-transform:scale(2); opacity:0;} 4%{-webkit-transform:scale(1); opacity:1;} 6%{-webkit-transform:scale(1.2); opacity:1;} 7%{-webkit-transform:scale(1); opacity:1;} 80%{-webkit-transform:scale(1); opacity:1;}  85%{-webkit-transform:scale(.6); opacity:0;}
}
@-moz-keyframes bottomBannerMain {
0%{-moz-transform:scale(2); opacity:0;} 4%{-moz-transform:scale(1); opacity:1;} 6%{-moz-transform:scale(1.2); opacity:1;} 7%{-moz-transform:scale(1); opacity:1;} 80%{-moz-transform:scale(1); opacity:1;}  85%{-moz-transform:scale(.6); opacity:0;}
}
@keyframes  bottomBannerMain {
0%{transform:scale(2); opacity:0;} 4%{transform:scale(1); opacity:1;} 6%{transform:scale(1.2); opacity:1;} 7%{transform:scale(1); opacity:1;} 80%{transform:scale(1); opacity:1;}  85%{transform:scale(.6); opacity:0;}
}
.products_bottomBanner_Knife {
    position: absolute;
    width: 90px;
    right: 10px;
    top: -200px;
    -webkit-animation: bottomBannerKnife 8s ease-in infinite;
    -moz-animation: bottomBannerKnife 8s ease-in infinite;
    animation: bottomBannerKnife 8s ease-in infinite;
    transform: scale(2);
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    opacity:0;
}
@-webkit-keyframes bottomBannerKnife {
10%{-webkit-transform:scale(2); opacity:0; top:-200px;} 12%{-webkit-transform:scale(1); opacity:1; top:-65px;} 100%{-webkit-transform:scale(1); opacity:1; top:-65px;}
}
@-moz-keyframes bottomBannerKnife {
10%{-moz-transform:scale(2); opacity:0; top:-200px;} 12%{-moz-transform:scale(1); opacity:1; top:-65px;} 100%{-moz-transform:scale(1); opacity:1; top:-65px;}
}
@keyframes  bottomBannerKnife {
10%{transform:scale(2); opacity:0; top:-200px;} 12%{transform:scale(1); opacity:1; top:-65px;} 100%{transform:scale(1); opacity:1; top:-65px;}
}

/*---------------------------------bottom */

.productsWrap_bottom{
    position: relative;
    width:100%; 
    height: 400px;
    margin:0 auto 0;
    z-index: 3;    
}
.bottom_logo{
    position: absolute;
    width:470px;
    left:50%;
    margin-left: -235px;
    bottom:20px;    
}
.bottom_btn{
    position: absolute;
    width:600px;
    left:50%;    
    top:50%;
    margin: -100px 0 0 -300px;    
}
.bottom_btn_1, .bottom_btn_2 {
    position: absolute;
    width:100%;
    left:0;    
    top:0;
}
.bottom_btn_1{
    z-index: 2;
    opacity: 1;
}
.bottom_btn_2{
    z-index: 0;
    opacity: 0;    
}
.bottom_btn:hover .bottom_btn_1{
    z-index: 0;
    opacity: 0;    
}
.bottom_btn:hover .bottom_btn_2{
    z-index: 2;
    opacity: 1;   
}
.bottom_box{
    position: absolute;
    width: 200px;
    right: -75px;
    top: -100px;
    z-index: 5;
}
.bottom_btn:hover .bottom_box{
    top: -120px;   
}

/*------------------------------ products_zoro--------------------------------------*/

.products_Character_luffy.products_Character_zoro {    
    width: 500px;   
    margin: -710px 0 0 -520px;   
}
.productsWrap_wearShow_zoro .productsWrap_wearShow_line_1{   
    background-color: #2c8567;    
}   
.productsWrap_wearShow_zoro .productsWrap_wearShow_line_2{
    background-color: #b04a69; 
}
.productsWrap_wearShow_zoro .productsWrap_wearShow_line_3{   
    background-color: #665c92;       
}
.productsWrap_clothes_brook .clothes_modelShow_boy .clothes_modelShow_1>div, .productsWrap_clothes_brook .clothes_modelShow_boy .clothes_modelShow_2>div,
.productsWrap_clothes_franky .clothes_modelShow_boy .clothes_modelShow_1>div, .productsWrap_clothes_franky .clothes_modelShow_boy .clothes_modelShow_2>div,
.productsWrap_clothes_zoro .clothes_modelShow_boy .clothes_modelShow_1>div, .productsWrap_clothes_zoro .clothes_modelShow_boy .clothes_modelShow_2>div{
    -webkit-animation:none;
	-moz-animation:none;
	animation: none;
}
.clothes_model_luffy_b.clothes_model_zoro_b {
    width: 600px;
    margin: -715px 0 0 -666px;
    z-index: 2;
}
.productsWrap_clothes.productsWrap_clothes_zoro .clothes_topBtn_1 {    
    background-color: #1f624c;
}
.productsWrap_clothes_zoro .clothes_modelShow_girl .clothes_model_luffy_b {
    margin: -600px 0 0 -790px;
    width: 600px;
}

/*------------------------------ products_sanji--------------------------------------*/

.productsWrap_wearShow_sanji .productsWrap_wearShow_line_1{   
    background-color: #2a2a2e;    
}   
.productsWrap_wearShow_sanji .productsWrap_wearShow_line_2{
    background-color: #757858; 
}
.productsWrap_wearShow_sanji .productsWrap_wearShow_line_3{   
    background-color: #ffef92;       
}
.products_cont.products_cont_sanji {    
    margin: 20px 0 0 -480px;    
}
.products_Character_luffy.products_Character_sanji {
    width: 400px;
    margin: -650px 0 0 -700px;
}

/*------------------------------ products_usopp--------------------------------------*/

.productsWrap_wearShow_usopp .productsWrap_wearShow_line_1{   
    background-color: #ffd77f;    
}   
.productsWrap_wearShow_usopp .productsWrap_wearShow_line_2{
    background-color: #a96c45; 
}
.productsWrap_wearShow_usopp .productsWrap_wearShow_line_3{   
    background-color: #ff7666;       
}
.productsWrap_wearShow_usopp .productsWrap_wearShow_line_4{   
    background-color: #6392d6;       
}
.products_Character_luffy.products_Character_usopp {
    width: 500px;
    margin: -666px 0 0 -555px;
}
.products_shoes_show.products_shoes_show_usopp {    
    margin: -240px 0 0 -100px;    
}

/*------------------------------ products_nami--------------------------------------*/

.productsWrap_wearShow_nami .productsWrap_wearShow_line_1{   
    background-color: #55b4ea;    
}   
.productsWrap_wearShow_nami .productsWrap_wearShow_line_2{
    background-color: #FFF; 
}
.productsWrap_wearShow_nami .productsWrap_wearShow_line_3{   
    background-color: #5deebd;       
}
.productsWrap_wearShow_nami .productsWrap_wearShow_line_4{   
    background-color: #ffb146;       
}
.products_Character_luffy.products_Character_nami {
    width: 280px;
    margin: -660px 0 0 -355px;
}

/*------------------------------ products_robin--------------------------------------*/

.productsWrap_wearShow_robin .productsWrap_wearShow_line_1{   
    background-color: #e7a6a9;    
}   
.productsWrap_wearShow_robin .productsWrap_wearShow_line_2{
    background-color: #7ede91; 
}
.productsWrap_wearShow_robin .productsWrap_wearShow_line_3{   
    background-color: #3f6cb9;       
}
.products_Character_luffy.products_Character_robin {
    width: 450px;
    margin: -712px 0 0 -480px;
}
.products_cont.products_cont_robin {    
    margin: 25px 0 0 -480px;    
}

/*------------------------------ products_franky--------------------------------------*/

.productsWrap_wearShow_franky .productsWrap_wearShow_line_1{   
    background-color: #6fceff;    
}   
.productsWrap_wearShow_franky .productsWrap_wearShow_line_2{
    background-color: #ea542b; 
}
.productsWrap_wearShow_franky .productsWrap_wearShow_line_3{   
    background-color: #FFF;       
}
.productsWrap_wearShow_franky .productsWrap_wearShow_line_4{   
    background-color: #cb363e;       
}
.products_Character_luffy.products_Character_franky {
    width: 800px;
    margin: -620px 0 0 -750px;
}
.products_cont.products_cont_franky {    
    margin: 25px 0 0 -480px;    
}
.productsWrap_clothes_franky .clothes_model_luffy_b {    
    width: 670px;   
    margin: -660px 0 0 -800px;
    z-index: 5;
}

/*------------------------------ products_brook--------------------------------------*/

.productsWrap_wearShow_brook .productsWrap_wearShow_line_1{   
    background-color: #24242d;    
}   
.productsWrap_wearShow_brook .productsWrap_wearShow_line_2{
    background-color: #FFF; 
}
.productsWrap_wearShow_brook .productsWrap_wearShow_line_3{   
    background-color: #db8b01;       
}
.productsWrap_wearShow_brook .productsWrap_wearShow_line_4{   
    background-color: #cb363e;       
}
.products_Character_luffy.products_Character_brook {
    width: 600px;
    margin: -755px 0 0 -690px;
}
.products_cont.products_cont_brook {    
    margin: 25px 0 0 -480px;    
}
.productsWrap_clothes_brook .clothes_model_luffy_b {
    width: 550px;
    margin: -660px 0 0 -701px;
    z-index: 5;
}

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

.btn_goTop {
    position: fixed !important;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: rgb(0, 92, 185);
    bottom: 15px;
    right: 20px;
    z-index: 333;
    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(255, 183, 70);
}
.btn_goTop:hover.btn_goTop span{	
	margin: -15px 0 0 -17px;
}

/*------------------------------ nav ----------------------------------*/

.artical_nav {
    position: fixed;
    right: 0;
    top: 180px;
    z-index: 99;
    width: 160px;
    cursor: pointer;
    overflow: hidden;
    height: 200px;
}
.artical_select{
    position: absolute;
    right:-140px;
    bottom:0;    
    width:120px;     
}
.artical_chopper {
    position: absolute;
    left: -20px;
    top: -45px;
    width: 140px;
}
.artical_select:hover .artical_chopper{
    top: -50px;
}
.artical_select.indexGo{   
    -webkit-animation:articalSelect 1.5s 1s linear 1 forwards ;
	-moz-animation:articalSelect 1.5s 1s linear 1 forwards ;
	animation: articalSelect 1.5s 1s linear 1 forwards ;
}
@-webkit-keyframes articalSelect {
0%{ opacity: 0; right:-140px;} 100%{ opacity:1; right:0;} 
}
@-moz-keyframes articalSelect {
0%{ opacity: 0; right:-140px;} 100%{ opacity:1; right:0;} 
}
@keyframes  articalSelect {
0%{ opacity: 0; right:-140px;} 100%{ opacity:1; right:0;} 
}
.nav_open{ 
	position:fixed; 
	width:100vw; 
	height:100vh; 
	overflow:hidden;
    z-index: 666;  
    display: none;
}
.nav_open .loading_bg1:before{
    content:"";
    width:100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0,0,0,.6);
    z-index: 1;
    left:0;
    top:0;
}
.nav_main{
    position: absolute;
    width:350px;
    height: 90%;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%); 
    /*border:#FF0 3px solid;*/
    z-index: 10;
}
.nav_main li{
    position: relative;
    margin:0 auto;
    width:100%;
    height: 50px;
    margin-bottom: 15px;     
    border-bottom: #FF0 1px dashed;
}
.nav_main li a{    
    display: block;
    width:100%;
    height:100%;    
}
.nav_main li a>div{ 
    position: absolute;
    display: block;
    width:175px;
    left:50%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    bottom: -2px;
}
.nav_new {
    position: absolute;
    width: 50px;
    top: -25px;
    left: -105px;
}
.nav_main li a > div span {
    position: absolute;
    display: block;
    width: 40px;
    top: 7px;
    left: -35px;
}
.nav_main li:nth-child(1):hover{
    background-color: rgba(0,0,0,.7);
}
.nav_main li:nth-child(2):hover{
    background-color: rgba(0,0,0,.7);
}
.nav_main li:nth-child(3):hover{
    background-color: rgba(255,143,146,.7);
}
.nav_main li:nth-child(4):hover{
    background-color: rgba(231,0,18,.7);
}
.nav_main li:nth-child(5):hover{
    background-color: rgba(50,141,110,.7);
}
.nav_main li:nth-child(6):hover{
    background-color: rgba(28,32,84,.7);
}
.nav_main li:nth-child(7):hover{
    background-color: rgba(232,173,32,.7);
}
.nav_main li:nth-child(8):hover{
    background-color: rgba(52,201,228,.7);
}
.nav_main li:nth-child(9):hover{
    background-color: rgba(0,127,204,.7);
}
.nav_main li:nth-child(10):hover{
    background-color: rgba(219,119,25,.7);
}
.nav_main li:nth-child(11):hover{
    background-color: rgba(107,106,176,.7);
}
.nav_main li:hover span {
    -webkit-animation:navWheel 2s  linear infinite ;
	-moz-animation:navWheel 2s  linear infinite ;
	animation: navWheel 2s  linear infinite ;
    left:-50px;
}
@-webkit-keyframes navWheel {
0%{ transform: rotate(0deg);} 100%{ transform: rotate(640deg);}
}
@-moz-keyframes navWheel {
0%{ transform: rotate(0deg);} 100%{ transform: rotate(640deg);}
}
@keyframes  navWheel {
0%{ transform: rotate(0deg);} 100%{ transform: rotate(640deg);}
}
.nav_close {
    position: absolute;
    width: 88px;
    height: 97px;
    background-position: top;
    background-image: url(../images/popup_close.png);
    top: 40px;
    right: -150px;
}
.nav_close:hover{    
    background-position: bottom;    
}




/*------------------------------ fix ----------------------------------*/

.productsWrap_bottom .copyRights_right {    
    right: 105px;   
}
#linkFix1{
    position: absolute;
    width:1px;
    height: 1px;
    left:0;
    top:80px;    
}
.select_show{
    position: relative;
}
.select_nav_1{
    -webkit-animation:selectNav1 4s  linear infinite ;
	-moz-animation:selectNav1 4s  linear infinite ;
	animation: selectNav1 4s  linear infinite ;
    opacity: 1;
    z-index: 2;
}
@-webkit-keyframes selectNav1 {
0%{ right:0; opacity:1; z-index: 2;}  45%{ right:0; opacity:1; z-index: 2;} 50%{ right:100px; opacity:0;z-index: 1;} 95%{ right:-100px; opacity:0;z-index: 1;} 100%{ right:0; opacity:1; z-index: 2;}
}
@-moz-keyframes selectNav1 {
0%{ right:0; opacity:1; z-index: 2;}  45%{ right:0; opacity:1; z-index: 2;} 50%{ right:100px; opacity:0;z-index: 1;} 95%{ right:-100px; opacity:0;z-index: 1;} 100%{ right:0; opacity:1; z-index: 2;}
}
@keyframes  selectNav1 {
0%{ right:0; opacity:1; z-index: 2;}  45%{ right:0; opacity:1; z-index: 2;} 50%{ right:100px; opacity:0;z-index: 1;} 95%{ right:-100px; opacity:0;z-index: 1;} 100%{ right:0; opacity:1; z-index: 2;}
}   
.select_nav_2{
    -webkit-animation:selectNav2 4s  linear infinite ;
	-moz-animation:selectNav2 4s  linear infinite ;
	animation: selectNav2 4s  linear infinite ;
    opacity: 0;
    z-index: 1;
}
@-webkit-keyframes selectNav2 {
0%{ right:-100px; opacity:0; z-index:1;}  45%{ right:-100px; opacity:0; z-index:1;} 50%{ right:0; opacity:1;z-index:2;} 95%{ right:0; opacity:1;z-index:2;} 100%{ right:100px; opacity:0; z-index:1;}
}
@-moz-keyframes selectNav2 {
0%{ right:-100px; opacity:0; z-index:1;}  45%{ right:-100px; opacity:0; z-index:1;} 50%{ right:0; opacity:1;z-index:2;} 95%{ right:0; opacity:1;z-index:2;} 100%{ right:100px; opacity:0; z-index:1;}
}
@keyframes  selectNav2 {
0%{ right:-100px; opacity:0; z-index:1;}  45%{ right:-100px; opacity:0; z-index:1;} 50%{ right:0; opacity:1;z-index:2;} 95%{ right:0; opacity:1;z-index:2;} 100%{ right:100px; opacity:0; z-index:1;}
}     
.select_nav_1.aniStop, .select_nav_2.aniStop{
    -webkit-animation:none  ;
	-moz-animation:none  ;
	animation: none  ;
	opacity: 0;
    z-index: 1;
}
.select_nav_1.aniStopBut, .select_nav_2.aniStopBut{
    opacity:1;
	z-index: 2;	
}
.video_middleSelect_children{
    position: relative;
    width:100%;
    height: 0;
    margin:0 auto 0;
    z-index: 9;   
}
.btn_childrenSelect {
    position: absolute;
    bottom: 0;
    width: 270px;
    height: 275px;
    /*right: -270px;*/
    right: 0px;
    z-index: 9;
    overflow: hidden;
}
/*.btn_childrenSelect.indexGo {
    -webkit-animation:btnChildrenSelect 1s 3s 1  forwards ;
	-moz-animation:btnChildrenSelect 1s 3s 1  forwards ;
	animation: btnChildrenSelect 1s 3s 1  forwards ;
}
@-webkit-keyframes btnChildrenSelect {
0%{ right: -270px; } 100%{ right: 0px;  } 
}
@-moz-keyframes btnChildrenSelect {
0%{ right: -270px; } 100%{ right: 0px;  } 
}
@keyframes  btnChildrenSelect {
0%{ right: -270px; } 100%{ right: 0px;  } 
}  */
.select_children_btn{
    position: absolute;
    width:100%;
    left:0;
    bottom:0;
    z-index: 2;    
}
.select_children_sunny{
    position: absolute;
    width:200px;
    left:50%;
    margin-left: -100px;
    bottom:30px;
    z-index: 1; 
    transform-origin: center bottom;
    -webkit-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -webkit-animation:selectSunny 6s  linear infinite ;
	-moz-animation:selectSunny 6s  linear infinite ;
	animation: selectSunny 6s  linear infinite ;   
}
@-webkit-keyframes selectSunny {
0%{ -webkit-transform: rotate(0deg); } 25%{ -webkit-transform: rotate(-6deg); } 75%{ -webkit-transform: rotate(6deg); } 100%{ -webkit-transform: rotate(0deg); } 
}
@-moz-keyframes selectSunny {
0%{ -moz-transform: rotate(0deg); } 25%{ -moz-transform: rotate(-6deg); } 75%{ -moz-transform: rotate(6deg); } 100%{ -moz-transform: rotate(0deg); } 
}
@keyframes  selectSunny {
0%{ transform: rotate(0deg); } 25%{ transform: rotate(-6deg); } 75%{ transform: rotate(6deg); } 100%{ transform: rotate(0deg); } 
}

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

.video_main, .video_screen, .video_select, .select_Mark_luffy, .selectShow_shoes, .select_Mark_zoro, .select_Character_zoro, .select_Character_sanji, .select_Name_sanji,
 .select_Shoe_usopp, .select_Name_usopp, .select_Character_usopp, .select_Character_franky, .select_Mark_franky, .select_Name_franky, .select_Shoe_franky, .select_Name_brook, .select_Shoe_brook,
 .select_Character_brook, .select_Mark_brook, .select_Shoe_nami, .select_Name_nami, .select_Shoe_robin, .select_Name_robin, .bottom_btn_1, .bottom_btn_2, .bottom_box, .clothes_model_luffy_b, .index_logo, .index_character_Luffy, .index_character_right, .index_character_left, .index_TIT_Rudder, .artical_chopper, .nav_main li span, .nav_main li{
    transition:all .5s; 
    -moz-transition:all .5s; 
    -webkit-transition:all .5s;    
}