/* ----------------------------------------------------------寬度 1920px 設定-------------------------------------------------*/

@media screen and (max-width: 1920px){	

.productsWrap_clothes_bg_luffy {    
    width: 1920px;
    left:50%;
    margin-left: -960px;
}
    
}

/* ----------------------------------------------------------寬度 1700px 設定-------------------------------------------------*/

@media screen and (max-width: 1700px){	

.index_logo {    
    width: 400px;    
    left: 20px;   
}
    
}
/* ----------------------------------------------------------寬度 1500px 設定-------------------------------------------------*/

@media screen and (max-width: 1500px){	

.select_show_btnArea {
    border-width: 265px 410px 265px 0;
}  
.products_topSunny_logo {   
    width: 700px;   
    margin-left: -360px;    
}
.productsWrap_middle {   
    margin: -700px auto 0;   
}
.productsWrap_middle_banner {   
    margin: -390px auto 0;   
}
.productsWrap_wearShow_line_1 span {   
    width: 300px;
    left: 25px;
    top: 70px;
}
.productsWrap_wearShow_line_3 span {   
    width: 350px;
    right: 20px;
    top: 85px;
}
.products_Character_luffy.products_Character_franky {
    width: 800px;
    margin: -680px 0 0 -700px;
}
.productsWrap_clothes_franky .clothes_model_luffy_b {
    width: 600px;
    margin: -570px 0 0 -700px;
    z-index: 5;
}
.index_character_Luffy {    
    width: 945px;
    height: 589px;   
    margin-left: -455px;
    bottom: -60px;    
}
.index_character_right {    
    width: 467px;    
    margin-right: 50px;
}
.index_character_left {    
    width: 810px;    
    bottom: 0px;    
    margin-left: 65px;
}
    
}

/* ----------------------------------------------------------寬度 1400px 設定-------------------------------------------------*/

@media screen and (max-width: 1400px){	

.video_select {    
    width: 270px;
    left: -175px;    
}
.select_Character_franky {    
    width: 555px;   
    margin-left: -585px;
    bottom: 75px;    
}
.select_Mark_franky {    
    top: 430px;
}
.select_Name_franky {    
    width: 500px;    
    top: 70px;
    margin-left: -65px;  
}
.select_Shoe_franky {
    height: 276px;
    width: 460px;
    margin: -50px 0 0 -125px;
}
.select_Name_brook {   
    width: 500px;    
    margin-left: -100px;   
}
.select_Shoe_brook {
    height: 290px;
    width: 470px;
    margin: -35px 0 0 -135px;
}
.select_Character_brook {   
    width: 550px;   
    margin-left: -560px;
    bottom: 50px;    
}
.select_Mark_brook {   
    top: 85px;
}
.productsWrap_clothes_bg_luffy {
    width: 1600px;
    left: 50%;
    margin-left: -800px;
}
.clothes_modelShow_1, .clothes_modelShow_2 {    
    width: 275px; 
    margin-left: -200px;
    top: 90px;
}
.clothes_modelShow_2 {
    margin-left: 80px;
}
.clothes_detail_1, .clothes_detail_2 {   
    width: 180px;   
    margin: -658px 0 0px 360px; 
}
.clothes_detail_2 {
    margin: -470px 0 0px 360px;
}
.clothes_detail_TIT {    
    margin: -270px 0 0px 430px;   
}
.clothes_detail_TIT span {   
    margin-left: -70px;
}
.clothes_contTIT_luffy_b {
    width: 700px;
    margin: -165px 0 0 -195px;
}  
.clothes_cont_luffy_b {
    width: 650px;
    margin: -95px 0 0 -185px;
}  
.clothes_model_luffy_b {   
    width: 500px;   
    margin: -565px 0 0 -625px;   
}
.productsWrap_photoShow {
    left: 55%;
}    
.clothes_modelShow_girl .clothes_model_luffy_b {
    width: 500px;
    margin: -666px 0 0 -680px;
}  
.clothes_aarow_1, .clothes_aarow_2 {
    margin-top: -175px;  
}    
.productsWrap_clothes_zoro .clothes_modelShow_girl .clothes_model_luffy_b {
    margin: -600px 0 0 -670px;
    width: 540px;
}  
.productsWrap_clothes_franky .clothes_model_luffy_b {
    width: 530px;
    margin: -620px 0 0 -613px;
    z-index: 5;
}
.productsWrap_clothes_brook .clothes_model_luffy_b {
    width: 500px;
    margin: -720px 0 0 -603px;    
}
    
    
}

/* ----------------------------------------------------------寬度 1300px 設定-------------------------------------------------*/

@media screen and (max-width: 1300px){	

.select_show_btnArea {   
    border-width: 265px 355px 265px 0;    
}
.select_show_btn1 {
    left: 70px;    
}
.select_show_btn2 {
    left: 120px;   
}
.select_Shoe_nami {
    height: 280px;
    width: 450px;
    margin: -35px 0 0 -165px;
}
.select_Name_nami {    
    width: 435px;   
}
.clothes_modelShow_girl .clothes_model_luffy_b {
    width: 445px;
    margin: -666px 0 0 -610px;
}
.clothes_model_luffy_b.clothes_model_zoro_b {
    width: 480px;
    margin: -680px 0 0 -540px;    
}
.products_Character_luffy.products_Character_sanji {
    width: 300px;
    margin: -640px 0 0 -320px;
}
.products_Character_luffy.products_Character_franky {
    width: 750px;
    margin: -759px 0 0 -587px;
}
.indexWrap h1 {    
    width: 95%;    
    height: 180px;
    bottom: 50px;  
    margin-left: auto;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.btn_childrenSelect {    
    bottom: -25px;
    width: 250px;   
}
    
}

/* ----------------------------------------------------------寬度 1200px 設定-------------------------------------------------*/

@media screen and (max-width: 1200px){	

.video_main {    
    width: 900px;    
    top: 50%;
    margin: -345px 0 0 -450px;    
}
.video_screen {    
    width: 752px;
    height: 489px;    
    margin: -238px 0 0 -369px;    
}
.select_show_btnArea {   
    border-width: 265px 290px 265px 0;    
}
.select_show_btn1 {
    left: 45px;
    top: -50px;   
    width: 200px;
}
.select_show_btn2 {
    left: 80px;
    top: 15px;   
}
.select_Mark_luffy { 
    left: 50px;
    top: 220px;
}
.select_Shoe_zoro {
    width: 470px;
    height: 315px;   
}
.select_Mark_zoro {
    left: 123px;
    top: 245px;
}
.select_Name_sanji {    
    width: 500px;    
}
.select_Character_sanji { 
    margin-left: -540px;  
}
.select_Shoe_usopp {   
    margin: -55px 0 0 -170px;
}
.select_Character_usopp {   
    width: 380px;   
    margin-left: -410px;  
}
.products_topSunny_logo {   
    width: 500px;    
    margin-left: -260px;   
    margin-top: -10px;
}
.clothes_model_luffy_b {   
    margin: -565px 0 0 -600px;
}
.productsWrap_middle {
    margin: -500px auto 0;
}
.productsWrap_middle_banner {
    margin: -360px auto 0;
}
.products_cont {   
    margin: 40px 0 0 -480px;   
}   
.clothes_modelShow_1, .clothes_modelShow_2 {
    width: 250px;
    margin-left: -180px;
    top: 140px;
}
.clothes_modelShow_2 {
    margin-left: 75px;
}
.clothes_detail_1, .clothes_detail_2 {
    width: 160px;
    margin: -610px 0 0px 330px;
}
.clothes_detail_2 {
    margin: -440px 0 0px 330px;
}
.clothes_detail_TIT {
    margin: -260px 0 0px 395px;
}
.clothes_contTIT_luffy_b {
    width: 650px;  
}
.clothes_model_luffy_b {
    margin: -500px 0 0 -525px;
    width: 450px;
}
.clothes_modelShow_girl .clothes_model_luffy_b {
    width: 420px;
    margin: -625px 0 0 -570px;
}
.products_Character_luffy {    
    width: 650px;    
    margin: -777px 0 0 -500px;   
} 
.products_middle_banner_bubble {   
    margin: 20px 0 0 -505px;   
}
.productsWrap_photoShow {
    left: 50%;
    width: 870px;
    height: 800px;
    margin: -450px 0 0 -340px;
}
.products_bottomBanner_main {   
    margin: -210px 0 0 -330px;    
}
.productsWrap_clothes_franky .clothes_model_luffy_b {
    width: 500px;
    margin: -620px 0 0 -566px;   
}
.productsWrap_clothes_brook .clothes_model_luffy_b {
    width: 470px;
    margin: -720px 0 0 -526px;   
}
.products_Character_luffy.products_Character_brook {
    width: 500px;
    margin: -610px 0 0 -568px;
}
.index_character_Luffy {
    width: 893px;
    height: 556px;
    margin-left: -445px;
    bottom: -25px;
}
.index_character_right {
    width: 415px;
    margin-right: 135px;
    bottom: 35px;
}
.index_character_left {
    width: 720px;
    margin-left: 100px;
    bottom: 45px;
}
.index_TIT_Rudder {    
    width: 170px;   
    margin: -105px 0 0 -85px;   
}
.indexWrap h1 {   
    height: 150px;   
}
.runnder_bk {    
    height: 160px;   
    bottom: -25px;   
}
    
}

/* ----------------------------------------------------------寬度 1100px 設定-------------------------------------------------*/

@media screen and (max-width: 1100px){	

.video_main {
    width: 800px;    
    margin: -273px 0 0 -400px;
}
.video_screen {    
    width: 752px;
    height: 489px;    
    margin: -238px 0 0 -369px;    
}
.video_select {
    width: 230px;
    left: -150px;
}
.select_show_btnArea {   
    border-width: 265px 255px 265px 0;    
}
.select_Name_luffy {   
    width: 500px;  
    top: 50px;
    margin-left: -160px;   
}
.select_Character_zoro {    
    width: 610px;   
    margin-left: -620px;   
}
.select_Mark_zoro {   
    left: 115px;
    top: 280px;
}
.select_Name_zoro {
    top: 45px;
    margin-left: -135px;
    width: 500px;
}
.select_Name_usopp {   
    width: 520px;    
    top: 60px;
    margin-left: -165px;    
}
.select_Shoe_usopp {
    height: 280px;
    width: 470px;    
}
.select_Name_franky {   
    margin-left: -105px;
}
.select_Shoe_robin {
    height: 275px;
    width: 435px;   
}
.select_Name_robin {   
    width: 450px;   
    top: 115px;
    margin-left: -145px;   
}
.clothes_model_luffy_b, .clothes_modelShow_girl .clothes_model_luffy_b {   
    display: none;
}
.clothes_contTIT_luffy_b {
    width: 700px;
    margin: -165px 0 0 -350px;
}
.clothes_cont_luffy_b {
    width: 650px;
    margin: -95px 0 0 -325px;
}
.clothes_modelShow_1, .clothes_modelShow_2 {
    width: 300px;
    margin-left: -380px;
    top: 60px;
}
.clothes_modelShow_2 {
    margin-left: -70px;
}
.clothes_detail_1, .clothes_detail_2 {
    width: 200px;
    margin: -687px 0 0px 240px;
}
.clothes_detail_2 {
    margin: -478px 0 0px 240px;
}
.clothes_detail_TIT {
    margin: -260px 0 0px 305px;
}
.products_Character_luffy.products_Character_zoro {
    width: 470px;
    margin: -700px 0 0 -490px;
}
.productsWrap_clothes_bg_luffy {   
    height: 1100px;
    overflow: hidden;
}    
.products_Character_luffy.products_Character_franky {
    width: 700px;
    margin: -790px 0 0 -493px;
}   
.index_logo {
    width: 350px;    
    top: 15px;
}
.btn_childrenSelect {   
    width: 200px;
}
    
}

/* ----------------------------------------------------------寬度 1050px 設定-------------------------------------------------*/

@media screen and (max-width: 1050px){	
    
.runnder_bk {    
    bottom: -40px;
}  
.indexWrap h1 {
    height: 130px;
}    
    
}

/* ----------------------------------------------------------寬度 960px 設定-------------------------------------------------*/

@media screen and (max-width: 960px){	

.videoWrap {   
    height: 1000px;    
}
.video_main {
    width: 920px;
    margin: -425px 0 0 -460px;
}
.video_screen {
    width: 769px;
    height: 497px;
    margin: -242px 0 0 -377px;
}
.video_select {    
    width: 759px;
    height: 145px;
    left: 50%;
    margin-left: -380px;
    bottom:-115px;
    top: auto;   
}
.video_select.indexGo {
    -webkit-animation:videoSelectMobile 1s 4s linear 1 forwards;
	-moz-animation:videoSelectMobile 1s 4s linear 1 forwards;
	animation: videoSelectMobile 1s 4s linear 1 forwards;
}
.video_select img, .video_bg1{
    display: none;
}
.video_select_1{
    height: 100%;
    background: url(../images/video_select_mobile_1.png) ;
}    
.video_select_2 {
    height: 100%;
    background: url(../images/video_select_mobile_2.png) ;
}     
.selectWrap main {    
    height: 800px;   
}    
.select_show_btnArea{
    border-width: 0 0 300px 960px;
    top:auto;
    margin-top: auto;
    bottom:0;
}       
.select_show_btn1 {
    right: 300px;
    top: auto;
    width: 300px;
    left: auto;
    bottom: -275px;
}
.select_show_btn2 {
    right: 0px;
    top: auto;
    width: 300px;
    left: auto;
    bottom: -280px;
}
.selectShow_shoes{
    height: 370px !important;
    width: 540px !important;
    margin: -150px 0 0 -125px !important;
}
.select_TIT {
    left: 265px !important;
    width: 265px !important;
} 
    
/*---- select robin ----*/
    
.select_Name_robin {
    width: 595px;
    top: 50px;   
}    
.select_Character_robin {    
    width: 390px;    
    margin-left: -505px;    
}    
.select_Mark_robin {   
    left: 75px;
    top: 270px;
}      
    
/*---- select nami ----*/
    
.select_Name_nami {
    width: 540px;
    top: 45px;
    margin-left: -95px;
}    
.select_Character_nami {   
    width: 550px;   
    margin-left: -570px;
    pointer-events: none;   
}    
.select_Mark_nami {    
    left: 110px;
    top: 190px;
}   
    
/*---- select brook ----*/
    
.select_Name_brook {
    width: 560px;    
    top: 50px;
}   
.select_Character_brook {
    width: 635px;
    margin-left: -560px;
    bottom: auto;
    top: -10px;
}
.select_Mark_brook {
    top: 120px;
    left: 95px;
}

/*---- select franky ----*/
    
.select_Name_franky {
    margin-left: -120px;
    width: 590px;
    top: 40px;
}
.select_Character_franky {
    width: 600px;
    margin-left: -598px;
    bottom: auto;
    top: -18px;
}
.select_Mark_franky {
    top: 470px;
    left: 133px;
}   
.select_Name_franky {
    margin-left: -49px;
    width: 530px;
    top: 77px;
}
    
/*---- select usopp ----*/

.select_Name_usopp {    
    top: 60px;
    margin-left: -85px;
}
.select_Character_usopp {
    width: 500px;
    margin-left: -480px;
}    
.select_Mark_usopp {   
    left: 12px;
    top: 380px;
}    
 
/*---- select sanji ----*/
    
.select_Name_sanji {
    width: 530px;
    margin-left: -105px;
    top: 20px;
}   
.selectShow_shoes.select_Shoe_sanji{
    height: 380px !important;   
}   
.select_Character_sanji {
    margin-left: -700px;
    width: 670px;
    bottom: auto;
    top: -35px;
}    
.select_Mark_sanji {   
    left: 245px;
    top: 70px;
}
    
/*---- select zoro ----*/    
    
.select_Name_zoro {
    top: 30px;
    margin-left: -100px;
    width: 550px;
}    
.select_Character_zoro img{
    display: none;    
}
.select_Character_zoro {
    background: url(../images/select_Character_zoro_mobile.png);
    width: 608px;
    height: 781px;
    left: -75px;
    top: -30px;
    margin-left: auto;
}   
.select_Character_zoro .select_Mark_zoro img{
    display: block;    
}    
.select_Mark_zoro {
    left: 110px;
    top: 230px;
}    
    
/*---- select luffy ----*/      
    
.select_Name_luffy {
    width: 565px;
    top: 35px;
    margin-left: -115px;
}    
.select_Character_luffy {    
    width: 535px;
    pointer-events: none;
}    
.select_Mark_luffy {
    left: 85px;
    top: 270px;
}       
    
 .selectShow_robin .select_show_btnArea {
    border-color: transparent transparent #6c46b8 transparent; 
}    
.selectShow_nami .select_show_btnArea {
    border-color: transparent transparent #6b3400 transparent;
}    
.selectShow_brook .select_show_btnArea {
    border-color: transparent transparent #39b4ff transparent;
}    
.selectShow_franky .select_show_btnArea {
    border-color: transparent transparent #006c80 transparent;
}    
.selectShow_usopp .select_show_btnArea {
    border-color: transparent transparent #d9ab00 transparent;
}    
.selectShow_sanji .select_show_btnArea {
    border-color: transparent transparent #001a3b transparent;
}    
.selectShow_zoro .select_show_btnArea {
    border-color: transparent transparent #085f51 transparent;
} 
.selectShow_luffy .select_show_btnArea {
    border-color: transparent transparent #a1000d transparent;
} 
.products_Character_luffy {
    width: 650px;
    margin: -777px 0 0 -460px;
}
.products_cont {
    margin: 40px 0 0 -465px !important;
}
.products_shoes_show {    
    width: 600px;     
    margin: -240px 0 0 -220px;   
}
.products_point_1 {    
    margin: -490px 0 0 -10px;   
}
.products_point_2 {   
    margin: -433px 0 0 195px;    
}
.products_Character_luffy {
    width: 608px;
    margin: -805px 0 0 -420px;
}
.productsWrap_middle {
    margin: -350px auto 0;
}
.productsWrap_middle_banner {
    margin: -330px auto 0;
}
.products_middle_banner_bubble {
    margin: 0 0 0 -400px;
    width: 400px;
}
.productsWrap_photoShow {
    left: 50%;
    width: 800px;
    height: 760px;
    margin: -350px 0 0 -370px;
}
.products_Character_luffy.products_Character_zoro {
    width: 400px;
    margin: -666px 0 0 -470px;
}
.products_Character_luffy.products_Character_sanji {
    width: 300px;
    margin: -725px 0 0 -450px;
}
.productsWrap_wearShow {   
    height: 1100px;    
} 
.products_Character_luffy.products_Character_usopp {
    width: 500px;
    margin: -608px 0 0 -525px;
}
.productsWrap_wearShow_usopp .productsWrap_photoShow > div {    
    left: -55px;    
}
.productsWrap_wearShow_usopp .productsWrap_wearShow_line_3 span {
    width: 200px;
    right: 15px;
    top: 95px;
}    
.products_Character_luffy.products_Character_nami {
    width: 320px;
    margin: -715px 0 0 -420px;
}
.products_Character_luffy.products_Character_robin {
    width: 435px;
    margin: -795px 0 0 -490px;
}
.products_Character_luffy.products_Character_franky {
    width: 650px;
    margin: -720px 0 0 -520px;
}    
.products_Character_luffy.products_Character_brook {
    width: 500px;
    margin: -868px 0 0 -530px;
}
.index_sunny, .indexBg1, .indexBg2, .index_character_Luffy, .index_character_right, .index_character_left {    
    display: none;
}    
.index_logo {
    width: 700px;
    top: 10px;
    left: 50%;
    margin-left: -350px;
}    
.loading_logo {    
    width: 900px;
    margin: -110px 0 0 -450px;   
}  
.loading_logo.indexGo{   
    -webkit-animation:loadingLogo960 2s .8s 1 forwards;
	-moz-animation:loadingLogo960 2s .8s 1 forwards;
	animation: loadingLogo960 2s .8s 1 forwards;
}   
.indexBg_mobile, .index_logo_topCover{
    display: block;
}
.indexWrap h1 {
    width: 100%;
    height: 320px;    
    bottom:0;    
}    
.index_TIT_left, .index_TIT_right {   
    width: 60%;    
} 
.index_TIT_left{  
    top: -80px;
} 
.index_TIT_right {
    top: 45px;   
} 
.index_TIT_Rudder {
    width: 200px;
    margin: -275px 0 0 80px;
}    
.runnder_bk {
    bottom: 0;   
    height: 100%;
    background-color: rgba(0,0,0,.9);
    width: 100%;    
    left: 0;    
    border-radius: 0;
    filter: blur(0);
}    
.index_btn {    
    width: 450px;    
    margin-left: -225px;
    bottom:50px;    
}    
.nav_main {    
    width: 600px;
    height: 80%;    
}
.nav_main li {   
    height: 8%;
    margin-bottom: 0;    
}    
.nav_main li a > div {    
    width: 260px;    
}   
.nav_main li a > div span {
    position: absolute;
    display: block;
    width: 60px;
    top: 10px;
    left: -65px;
}
.nav_close {   
    top: -105px;
    right: -88px;
}
    
}