@charset "utf-8";
/* CSS Document */
@import url("reset.min.1.2.css");
html{ width:100%; margin:0; padding:0; background:#000; font-family:'微軟正黑體', "游ゴシック", "Hiragino Sans", "Helvetica Neue", "Meiryo" , sans-serif; font-size:15px; color:#fff;}
body{ width:100%; margin:0; padding:0; overflow-x:hidden; position:relative; }

*{ font-size:1em; /*chrome*/-webkit-box-sizing:border-box; /*firefox*/-moz-box-sizing:border-box; box-sizing:border-box;}
.clear{ height:0; clear:both; font-size:0em!important;}

img{ width:100%; height:auto;}
.l{ display:block;}
.m{ display:none;}
.s{ display:none;}
a{ -webkit-tap-highlight-color:rgba(0,0,0,0.2); }
#wrapper a{ width:100%; height:100%; display:block; }
a:hover{cursor:pointer;}


::selection{ background:#e5006c; color:#fff; text-shadow:none;}
::-moz-selection{ background:#e5006c; color:#fff; text-shadow:none;}

#lightarea{ width:100%; height:100%; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1;
			opacity:0;
			animation-name:fadeInblur; 
			animation-duration:.5s;
			animation-delay:1.8s; 
			animation-fill-mode:forwards;
			display:none;
		}

#wrapper{ width:100%; position: relative;}

/*============== TOP鈕 ==============*/
#btn_top{ width:10%; max-width:80px;
          background: url(../images/btn_top.png);
	      background-size:100% auto ;
		  background-position:0 0;
		  background-repeat:no-repeat;
		  opacity:0.65;
          position:fixed; right:1.8%; bottom:0; z-index:99;
		  }
#btn_top:hover{ cursor:pointer; 
				opacity:1;
				filter:brightness(120%); 
				transition:.5s filter,.5s opacity;
				-webkit-transition:.5s filter,.5s opacity; 
				}

#btn_top:hover{
	background: url(../images/btn_top_an.png);
	background-size:100% auto ;
	animation-name:btntop_m ,float;
	animation-duration:.8s, 1s;
	animation-timing-function:step-start,linear;
	animation-iteration-count: infinite;
}


@-webkit-keyframes btntop_m{
	0%{background-position:0 0;} 
	33.333333%{background-position:0 33.333333%;}
	66.666667%{background-position:0 66.666667%;}
	100%{background-position:0 100%;}
	}

@keyframes btntop_m{
	0%{background-position:0 0;} 
	33.333333%{background-position:0 33.333333%;}
	66.666667%{background-position:0 66.666667%;}
	100%{background-position:0 100%;}
	}


@keyframes float{
		0% { transform:translateY(2%); 
			-webkit-transform: translateY(2%);
			-ms-transform: translateY(2%);
			}
		
		50% { transform:translateY(-2%); 
			-webkit-transform: translateY(-2%);
			-ms-transform: translateY(-2%);
			} 
			
		100% { transform:translateY(2%); 
			-webkit-transform: translateY(2%);
			-ms-transform: translateY(2%);
			} 
	   
	}

/* 版權copyright *//*///////////////////////////////////////////////////////////////////////////////*/
footer{ width:100%; padding:0rem 0 1.3rem 0;
	    color:#b9c2c1; font-family:source-han-sans-japanese; font-weight:200;
	    background-color:#000;
	    border:1px #464646; border-top-style:solid;
	    position: relative; z-index:50;
		}

.link_con{ width:100%; margin:.4rem auto 0 auto; font-size:1rem; line-height:1.8rem; text-align:center; border:1px #282828; border-bottom-style:solid; }

.link_con > span{ display:inline-block; padding:0 7px; }
.link_con span{ border:1px #464646; margin-bottom:.4rem; border-right-style:solid; padding:0 12px 0 7px; }
.link_con span:last-of-type{ border:0; }

.link_con, .link_con a{ color:#fff;}
.link_con a:hover{ text-decoration:underline; }
.link_con a{ display:table-cell; }


.cr_bottom{ width:100%; max-width:1200px; margin:0 auto; padding:2.5rem .9rem 0rem .9rem;
	        display:flex; display:-ms-flexbox;
			flex-direction:column; -ms-flex-direction:column;
			justify-content:center; -ms-flex-pack:center;  
		}

.cr_top{ width:100%;  margin:0 auto;  padding:2.5rem 0 4.7rem 0;
	display:flex; display:-ms-flexbox;
	justify-content:center; -ms-flex-pack:center;  
	align-items:center; -ms-flex-align:center; 
}

.cr_con{width:100%;
		display:flex; display:-ms-flexbox; 
		flex-direction:row-reverse; -ms-flex-direction:row-reverse;
		justify-content:space-between; -ms-flex-pack:justify;
		align-items:flex-end; -ms-flex-align:end; 
	}

.cr_logo{ width:100%; max-width:280px; }
.cr_logo img{ vertical-align:bottom; padding-bottom:0rem; image-rendering:-webkit-optimize-contrast; }
.cr_txt p{ text-align:left; line-height:1.7rem; }
.cr_txt p img{ vertical-align:middle; image-rendering:-webkit-optimize-contrast; }
.cr_txt p:nth-of-type(1){ margin:0 .5rem .3rem .05rem; }
.cr_txt p:nth-of-type(1) img{ height:1.05rem; width:auto;  }
.cr_txt p:nth-of-type(2){ margin:0 0 -0.38rem 0; }
.cr_txt p:nth-of-type(2) img{ width:auto; }
.cr_br{ display:none;}

.game_con{ width:auto; margin-right:2.5rem; display:table;
		   text-align:center; vertical-align:middle;
		  }
.game_icon{width:100%; max-width:110px; margin:0 .1rem 0 1rem; vertical-align: middle; display:inline-block;}
.game_icon img{width:100%; max-width:110px; display: inline; image-rendering:-webkit-optimize-contrast;}

.game_con ul{ padding-left:.25rem;  margin-bottom:.2rem; display:inline-block;  text-align:left; vertical-align:middle;  font-size:.8rem; line-height:1.3rem; font-weight:100;}

.banner_con ul{ display:inline-block; text-align:left; }
.banner_con ul li{ display:inline-block; margin-right:.25rem; margin-top:.8rem; }
.banner_con ul li:nth-of-type(3){ margin-right:0; }
.banner_con ul li img{ max-width:200px; image-rendering:-webkit-optimize-contrast; }


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

		.cr_bottom{ padding:1rem .8rem 5rem .8rem;}

		.cr_top{ 
			flex-direction:column; -ms-flex-direction:column;
		}
		.game_con{ margin-right:0rem; margin-bottom:4rem;}

}	


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

		.cr_bottom{ 
			flex-direction:column; -ms-flex-direction:column;
		}

		.cr_txt p:nth-of-type(1), .cr_txt p:nth-of-type(2){ margin:0;}
		.cr_txt p:nth-of-type(2) .l{ display:none; }
		.cr_txt p:nth-of-type(2) .s{ display:block; }
		.cr_txt p:nth-of-type(2) img{ height:1.05rem; width:auto; }

		.banner_con{ width:90%; margin:0 auto;}
		.banner_con ul{ width:100%; margin:0 auto; text-align:center; }
        .banner_con ul li{ width:32.5%; max-width:200px; }


}	



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

		.cr_bottom{ padding:2rem 0 6.8rem 0;
					justify-content:center; -ms-flex-pack:center;
				}

		.link_con{ font-size:1.1rem; line-height:1.9rem; }	

		.cr_con{ width:95%; margin:0 auto 1.7rem auto; text-align:center; 
			flex-direction:column; -ms-flex-direction:column;
			align-items:center; -ms-flex-align:center; 
		}

		.cr_txt{ width:100%; 
			display:flex; display:-ms-flexbox; 
			flex-direction:column; -ms-flex-direction:column;
			align-items:center; -ms-flex-align:center;  
		}

		.cr_txt p{ text-align:center;  }
		.cr_txt p:nth-of-type(1){ margin:0 0 .3rem 0;}
		.cr_txt p:nth-of-type(1) img,
		.cr_txt p:nth-of-type(2) img{ height:1.1rem; }


		.cr_logo{ width:41%; max-width:449px; }

		.cr_logo img{ padding-bottom:0.95rem; }





}


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

		.link_con{ margin:.7rem auto .9rem auto; padding:0rem 1rem .5rem 1rem; }
		
		.link_con span{ margin-bottom:.5rem; }
		.link_con span:nth-last-of-type(1){ margin-bottom:0rem; }
		.link_con span:nth-last-of-type(2){ border:0; }

		.cr_logo{ width:50%; }

}

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

        .banner_con ul li{ width:48.5%; }

}	

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

		.cr_logo{ width:65%; }
		.link_con{ font-weight:300;}


}	


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

	    .game_con{ width:100%; margin-right:0; }
		.game_icon, .game_icon img{
			width:80%;
			max-width:11.8rem;
		}

		.game_icon{ margin:0 0 .9rem 0; }

		.game_con ul{ 
			width:100%;
			margin:0 auto; margin-bottom:0; 
			display:block; 
		}

		.game_con ul:nth-of-type(1){ padding-left:0; padding-right:0;}
		.game_con ul li{ width:100%; margin:0 auto; text-align:center; }

}	


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

		.link_con{ padding:0 1.25rem; }

		.link_con span{ margin-bottom:.5rem; }
		.link_con span:nth-last-of-type(1),
		.link_con span:nth-last-of-type(2){ margin-bottom:0rem; }
		.link_con span:nth-last-of-type(2){ border:1px #282828; border-right-style:solid; }
		.link_con span:nth-last-of-type(3){ border:0; }

}


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

		.cr_logo{ width:60%; }

		.link_con{ padding:0 1.72rem .5rem 1.72rem; font-size:1rem; line-height:1.8rem; }
		.cr_txt p{ line-height:2.1rem; }

}


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

		.link_con{ padding:0 1.2rem .5rem 1.2rem; }

}

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

		.link_con{ padding:0 0.15rem .5rem 0.15rem; }

}

/*內容區/////////////////////////////////////////////////////////////////////////////*/
main{ width:100%; /*height:auto;*/overflow:hidden; }
section{width:100%; 
	font-family:source-han-sans-japanese; color: #fff;
	text-shadow: 0 0 6px rgba(0,0,0, 1), 0 0 5px rgba(0,0,0, 1), 0 0 4px rgb(161, 161, 161), 0 0 3px rgba(0,0,0, 1), 0 0 3px rgba(0,0,0, 1);
}
.bg_home_bt, .bg_sec01_bt, .bg_sec02_bt, .bg_sec03_bt{width:100%; position:relative; z-index:3; }

section#home{ background:url(../images/bg_home.jpg) no-repeat center top; position:relative; overflow:hidden;}
.bg_home_bt{ height:80px; background:url(../images/bg_home_bt.png) no-repeat center bottom; }

section#section1{ background:url(../images/bg_sec01.jpg) no-repeat center top; overflow:hidden; }
.bg_sec01_bt{height:80px; background:url(../images/bg_sec01_bt.png) no-repeat center bottom; }

section#section2{ background:url(../images/bg_sec02.jpg) no-repeat center top; overflow:hidden; }
.bg_sec02_bt{height:80px; background:url(../images/bg_sec02_bt.png) no-repeat center bottom; }

section#section3{ background:url(../images/bg_sec03.jpg) no-repeat center top; overflow:hidden; }
.bg_sec03_bt{height:80px; background:url(../images/bg_sec03_bt.png) no-repeat center bottom; }

section#section4{ padding-bottom:4.9rem; background:url(../images/bg_sec04.jpg) no-repeat center top; }

section#section5{  background:url(../images/bg_sec05.jpg) no-repeat center top; }
.bg_sec05_bt{height:80px; background:url(../images/bg_sec05_bt.png) no-repeat center bottom; }

section#section6{ padding-bottom:5.2rem; background:url(../images/bg_sec06.jpg) no-repeat center top; overflow:hidden; }


.content{ width:100%; max-width:1000px; margin:0 auto; position:relative; z-index:0;}

/*============== home ==============*/
#home .content{ max-width:100%;}
/*角色*/
.home_cha_block{ width:1px; height:1px; margin:0 auto; position:relative;}
.home_cha{ width:1071px; position:absolute; left:-502px; top:-37px; }
.home_cha li{ opacity:0; width:100%; position:absolute; left:0; top:0; }
.home_cha li:nth-of-type(1){ 
	                        animation-name:home_cha_fadeIn; 
							animation-duration:.8s;
							animation-delay:2s;  
							animation-timing-function:ease-in;
							animation-iteration-count:1;
							animation-fill-mode:forwards;
							image-rendering:-webkit-optimize-contrast; 
							}
					

.home_cha li:nth-of-type(2){ animation-name:home_cha_fadeIn;
							 animation-duration:.8s;
							 animation-delay:1.5s;  
							 animation-timing-function:ease-in;
							 animation-iteration-count:1;
							 animation-fill-mode:forwards;
							 image-rendering:-webkit-optimize-contrast; 
							 }
								
.home_cha li:nth-of-type(3){ width:755px; left:6.5rem; top:12.5rem; }

.home_cha li:nth-of-type(3){
	background: url(../images/home_cha_z1.png?=v20210525);
	background-size:100% auto ;
	animation-name:home_cha_fadeIn;
	animation-duration:.8s;
	animation-delay:1s;  
	animation-timing-function:ease-in;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}


@-webkit-keyframes home_cha_an{
	0%{ background-position: 0 0%;}
	11.111111% { background-position: 0 11.111111%;}
	22.222222% { background-position: 0 22.222222%;}
	33.333333% { background-position: 0 33.333333%;}
	44.444444% { background-position: 0 44.444444%;}
	55.555556% { background-position: 0 55.555556%;}
	66.666667% { background-position: 0 66.666667%;}
	77.777778% { background-position: 0 77.777778%;}
	88.888889% { background-position: 0 88.888889%;}
	100% { background-position: 0 100%;}
}

@keyframes home_cha_an{
	0%{ background-position: 0 0%;  }
	11.111111% { background-position: 0 11.111111%;}
	22.222222% { background-position: 0 22.222222%;}
	33.333333% { background-position: 0 33.333333%;}
	44.444444% { background-position: 0 44.444444%;}
	55.555556% { background-position: 0 55.555556%;}
	66.666667% { background-position: 0 66.666667%;}
	77.777778% { background-position: 0 77.777778%;}
	88.888889% { background-position: 0 88.888889%;}
	100% { background-position: 0 100%;}
}


@keyframes home_cha_float{
	0% { transform:translateY(-1.5rem); 
		-webkit-transform: translateY(-1.5rem);
		-ms-transform: translateY(-1.5rem);
		}
	
	50% { transform:translateY(-.5rem); 
		-webkit-transform: translateY(-.5rem);
		-ms-transform: translateY(-.5rem);
		} 
		
	100% { transform:translateY(-1.5rem); 
		-webkit-transform: translateY(-1.5rem);
		-ms-transform: translateY(-1.5rem);
		} 
	
}	

@keyframes home_cha_float2{
	0% { transform:translateY(-.4rem); 
		-webkit-transform: translateY(-.4rem);
		-ms-transform: translateY(-.4rem);
		}
	
	50% { transform:translateY(-.1rem); 
		-webkit-transform: translateY(-.1rem);
		-ms-transform: translateY(-.1rem);
		} 
		
	100% { transform:translateY(-.4rem); 
		-webkit-transform: translateY(-.4rem);
		-ms-transform: translateY(-.4rem);
		} 
	
}	

@keyframes home_cha_float3{
	0% { transform:translateY(-.2rem); 
		-webkit-transform: translateY(-.2rem);
		-ms-transform: translateY(-.2rem);
		}
	
	50% { transform:translateY(-.5rem); 
		-webkit-transform: translateY(-.5rem);
		-ms-transform: translateY(-.5rem);
		} 
		
	100% { transform:translateY(-.2rem); 
		-webkit-transform: translateY(-.2rem);
		-ms-transform: translateY(-.2rem);
		} 
	
}	

.yellowline01, .yellowline02, .yellowline03{ 
			opacity:0;
			animation-name:fadeInblur; 
			animation-duration:.8s;
			animation-timing-function:ease-in;
			animation-fill-mode:forwards;
		    }

.yellowline01{ width:100%; height:100%; background:url(../images/yellowline01.png) no-repeat center bottom;
				animation-delay:3.1s;  
				position:absolute; left:0px; bottom:-9rem; 
				}

.yellowline02{ width:100%; height:100%; background:url(../images/yellowline02.png) no-repeat center bottom;
				animation-delay:2.8s;  
				position:absolute; left:0px; bottom:-8rem;
				}	

.yellowline03{ width:100%; height:100%; background:url(../images/yellowline03.png) no-repeat center bottom;
	           animation-delay:2.5s;  
		       position:absolute; left:0px; bottom:-8rem;
		      }						

.home_con_block{ width:.5px; height:.5px; margin:0 auto; position:relative; z-index:10; }

.btn_video{ width:143px; height:auto; transition:transform .5s; -webkit-transition:transform .5s; position:absolute; top:29px; right:-32.5rem; z-index:10;}
.btn_video:hover{ transform:scale(1.04, 1.04); -webkit-transform:scale(1.04, 1.04);}
.btn_video a{ position:relative;}

.btn_video_ov,
.btn_videoarrow,
.btn_videoarrow div{width:100%; height:100%;}

.btn_video_ov,
.btn_videoarrow{position:absolute; top:0px; left:0px;}

.btn_video_ov{ background:url(../images/btn_video_ov.png) no-repeat center top; background-size:100% auto;
	           opacity:0.01; transition:opacity 0.6s; -webkit-transition:opacity 0.6s;
			  }
.btn_video:hover .btn_video_ov{ opacity:1;}

.btn_videoarrow{ background:url(../images/btn_videoarrow.png) no-repeat center top;  background-size:100% auto;
				 animation:videoarrow_big 1s infinite;
				}
.btn_videoarrow div:nth-of-type(1){
				background:url(../images/btn_videoarrow_ov.png) no-repeat center top;  background-size:100% auto;
				animation:videoarrow_an 1s infinite;
				}

.btn_videoarrow div:nth-of-type(2){
				background:url(../images/btn_videoarrow_ov.png) no-repeat center top;  background-size:100% auto;
				transform:scale(1, 1); opacity:0.01; transition:opacity 0.6s,transform  0.6s; -webkit-transition:opacity 0.6s,transform  0.6s;
				position:absolute; top:0px; left:0px;
				}

.btn_video:hover .btn_videoarrow { animation:none; }
.btn_video:hover .btn_videoarrow div:nth-of-type(1) {display:none;}
.btn_video:hover .btn_videoarrow div:nth-of-type(2) {transform:scale(1.1, 1.1); opacity:1;}

@keyframes videoarrow_big{
	0%,100%{
		transform:scale(0.9, 0.9);
		-webkit-transform: scale(0.9, 0.9);
		}

	50% {
		transform:scale(1.1, 1.1);
		-webkit-transform:scale(1.1, 1.1);
		}
}

@keyframes videoarrow_an{
	
	0%,100%{ opacity:0;} 
	50%{opacity:.7;}	

}



.home_bottom_block{ width:100%; max-width:1100px; margin:0 auto; 
			  display:flex; display:-ms-flexbox;
			  justify-content:space-between; -ms-flex-pack:justify; 
			  position:relative;  z-index:9; 
			}

.slogan{ width:268px; max-width:373px; height:auto; image-rendering:-webkit-optimize-contrast; position:absolute; left:-5.5rem; bottom:2.5rem; }
.slogan img{ transform:rotate(-2deg); }

/*.btn_act*/
.btn_act_block{width:100%; max-width:1100px; height:0; margin:0 auto; position:relative; z-index:9; }
.btn_act{width:248px; 
		transition:transform .5s; -webkit-transition:transform .5s; 
		position:fixed; right:.5%; bottom:5%; z-index:99;
		}
.btn_act a{position:relative;}
.btn_act:hover{	transform:translateY(-2%); -webkit-transform:translateY(-2%); }

.btn_act_ov{width:100%; height:100%; opacity:0.01; transition:opacity .5s; -webkit-transition:opacity .5s;  position:absolute; top:0; left:0;}
.btn_act:hover .btn_act_ov{background:url(../images/btn_act_ov.png) no-repeat left top; background-size:100% auto; opacity:1;}


.btn_act_tt{width:100%; height:auto; background:url(../images/btn_act_tt.png?=v20210326) no-repeat left top; background-size:100% auto; 
		   position:absolute; bottom:0; left:0;
		   }
.btn_act_tt > img{  opacity:0.01; }		   

.btn_act_tt_ov{width:100%; height:100%; opacity:0.01; transition:opacity .5s; -webkit-transition:opacity .5s;  position:absolute; top:0; left:0;}
.btn_act:hover .btn_act_tt_ov{background:url(../images/btn_act_tt_ov.png?=v20210326) no-repeat left top; background-size:100% auto; opacity:1;}


.btn_act_shine{width:100%; height:100%; background:url(../images/btn_act_shine.png) no-repeat left top; background-size:100% auto; 
				position:absolute; bottom:0; left:0;
				}

.btn_act_shine div:nth-of-type(1){width:100%; height:100%; background:url(../images/btn_act_shine01.png) no-repeat left top; background-size:100% auto; 
			animation:act_shine_an01 1s infinite;
			position:absolute; bottom:0; left:0;
			}

.btn_act_shine div:nth-of-type(2){width:100%; height:100%; background:url(../images/btn_act_shine02.png) no-repeat left top; background-size:100% auto; 
			animation:act_shine_an02 1s infinite;
			position:absolute; bottom:0; left:0;
			}

@keyframes act_tt_big{
	0%,100%{
		transform:scale(0.9, 0.9);
		-webkit-transform: scale(0.9, 0.9);
		}

	50% {
		transform:scale(1.05, 1.05);
		-webkit-transform:scale(1.05, 1.05);
		}
}

@keyframes act_shine_an01{
	
	0%,100%{ opacity:0;} 
	50%{opacity:.7;}	

}

@keyframes act_shine_an02{
	
	0%,100%{ opacity:.7;} 
	50%{opacity:0;}	

}

/*app_menu*/
ul.app_menu{width:auto;  margin:41.5rem auto .75rem auto;  text-align:center; position:relative; }
ul.app_menu li{width:218px; margin-right:-.3rem; transition:transform .5s; -webkit-transition:transform .5s; }
ul.app_menu li:hover{ transform:scale(1.04, 1.04); -webkit-transform:scale(1.04, 1.04);}

ul.app_menu li:nth-of-type(1){ background-image:url(../images/btn_app_apple.png); background-repeat:no-repeat; background-size:100% auto; display:inline-block; }
ul.app_menu li:nth-of-type(2){ background-image:url(../images/btn_app_google.png); background-repeat:no-repeat; background-size:100% auto; display:inline-block; margin-right:0;} 

ul.app_menu li:nth-of-type(1) a{ background-image:url(../images/btn_app_apple_ov.png); }
ul.app_menu li:nth-of-type(2) a{ background-image:url(../images/btn_app_google_ov.png); }

ul.app_menu li a{ background-repeat:no-repeat; background-size:100% auto; opacity:0.01; transition:opacity 0.5s; -webkit-transition:opacity 0.5s; -moz-transition:opacity 0.5s; -ms-transition:opacity 0.5s; -o-transition:opacity 0.5s; }
ul.app_menu li a:hover{ cursor:pointer; opacity:1; }
ul.app_menu li > img{  opacity:0.01; }

/*social_menu社群*/
ul.social_menu{ position:absolute; top:.2rem; right:16.5rem; 
				display:flex; display:-ms-flexbox; 
				z-index:20;
}
ul.social_menu li{ width:45px; background-repeat:no-repeat; background-size:100% auto; }

ul.social_menu li:nth-of-type(1){ background-image:url(../images/btn_social_wiki.png?=v20210329); }
ul.social_menu li:nth-of-type(2){ background-image:url(../images/btn_social_twitter.png?=v20210329); }
ul.social_menu li:nth-of-type(3){ background-image:url(../images/btn_social_yt.png?=v20210329); } 

ul.social_menu li:nth-of-type(1) a{ background-image:url(../images/btn_social_wiki_ov.png?=v20210329); }
ul.social_menu li:nth-of-type(2) a{ background-image:url(../images/btn_social_twitter_ov.png?=v20210329); }
ul.social_menu li:nth-of-type(3) a{ background-image:url(../images/btn_social_yt_ov.png?=v20210329); }

ul.social_menu li a{ background-repeat:no-repeat; background-size:100% auto; opacity:0.01; transition:opacity 0.5s;}
ul.social_menu li a:hover{ cursor:pointer; opacity:1; }
ul.social_menu img{ visibility:hidden; }


/*===================================*/
/*title*/
.title{ width:524px; margin:0 auto; opacity:0; position:relative;}

.title::before{
	content:" ";
	width:100%; height:100%;
	background-position:center top;
	background-size:contain;
	background-repeat:no-repeat;
	position:absolute;
	display:block;
	}

#section1 .title::before{
		background-image:url(../images/title_01.png?=v20210413);
		top:.5rem; right:0px;
		}

#section2 .title::before{
		background-image:url(../images/title_02.png);
		top:1rem; right:0px;
		}

#section3 .title{ margin:0 auto .9rem auto; }	 
#section4 .title{ margin:0 auto -.5rem auto; }	

/*============== section1 ==============*/
#section1 .content{ max-width:1700px;  padding:.8rem 0 1.5rem 0;/*padding:.8rem 0 .5rem 0;*/}
#section1 .content.ob{ padding:.8rem 0 .5rem 0;}
/*btn_download*/
.btn_download{ width:650px; margin:1.4rem auto 0 auto; 
		 transition:transform .5s; -webkit-transition:transform .5s; 
		 background:url(../images/btn_download.png?=v20210305) no-repeat left top; background-size:100% auto;
		 image-rendering:-webkit-optimize-contrast;
		 position:relative; z-index:5;
         }
.btn_download a{position:relative;}
.btn_download:hover{ transform:scale(1.03, 1.03);}

.btn_download_ov{width:100%; height:100%; opacity:0.01; transition:opacity .5s; -webkit-transition:opacity .5s;  position:absolute; top:0; left:0;}
.btn_download:hover .btn_download_ov{background:url(../images/btn_download_ov.png?=v20210305) no-repeat left top; background-size:100% auto; opacity:1;}


.btn_download_tt{width:80%; background:url(../images/btn_download_tt.png?=v20210326) no-repeat right bottom; background-size:100% auto;
	            position:absolute; bottom:2.08rem; right:10.5%; 
				}
.btn_download_tt img{ opacity:0.01; }	
.btn_download:hover .btn_download_tt{background:url(../images/btn_download_tt_ov.png?=v20210326) no-repeat right bottom; background-size:100% auto;}



@keyframes downloadtt_big{
	0%,100%{
		transform:scale(0, 0);
		-webkit-transform: scale(0, 0);
		}

	50% {
		transform:scale(1.01, 1.01);
		-webkit-transform:scale(1.01, 1.01);
		}
}				

@keyframes downloadtt_an{
	
	0%,100%{ opacity:0;} 
	50%{opacity:.9;}	

}



/*============== section2 ==============*/
#section2 .content{padding:0rem 0 1rem 0;}

.sec02_slogan01,.sec02_slogan02{width:100%; height:auto; margin:0 auto;}
.sec02_slogan01{ max-width:649px;}
.sec02_slogan02{ max-width:875px;}

.sec02_cha01,.sec02_cha02{ position:absolute; z-index:-1; }
.sec02_cha01{ width:560px; top:5rem; left:-19.5rem; }
.sec02_cha02{ width:684px; top:7.5rem; right:-24.5rem; }


.sec02_txt{ margin:0 auto; 
			 text-align:center; 
			 font-size: 1.2rem;
			 line-height: 2rem;
			 font-weight:500;		
			}
.sec02_txt p{ margin:1.1rem 0 1.1rem 0;}
.sec02_txt p:first-of-type{ margin:.8rem 0 1.1rem 0;}
.sec02_txt p:last-of-type{ margin:1.1rem 0 .8rem 0;}


/*============== section3 ==============*/
#section3 .content{ padding:1rem 0 2.5rem 0;}


.sec03_cha01{width:752px; position:absolute; top:5.5rem; left:-26.5rem; }
.sec03_cha02{width:733px; position:absolute; top:12.5rem; right:-25.2rem; }


.chamenu_title{width:756px; margin:0 auto; 
				background-image:url(../images/cha_title.jpg?=v20210304);
				position:relative;
			}
.chamenu_title.pink{ background-position:0 0;}
.chamenu_title.yellow{margin:1.5rem auto 0 auto; background-position:0 -100px;}
.chamenu_title.purple{margin:1.5rem auto 0 auto; background-position:0 -200px;}

.chamenu_title .click{display:none;}

.title_ov, .chamenu_more{width:100%; height:100%; position:absolute; top:0; left:0;}
.title_ov{
	background-size:100% auto;	background-repeat:no-repeat;
	-webkit-transition:opacity .5s;	transition:opacity .5s;
	opacity:0;
}

.chamenu_title:hover .title_ov{ background-image:url(../images/cha_title.jpg?=v20210304); opacity:1; }
.chamenu_title.pink:hover .title_ov{ background-position:0 0;}
.chamenu_title.yellow:hover .title_ov{ background-position:0 -100px;}
.chamenu_title.purple:hover .title_ov{ background-position:0 -200px;}

/*收合*/
.chamenu_more{
	background-image:url(../images/chamenu_more_ov.png);
	background-position:left center; background-size:auto 100%;	background-repeat:no-repeat;
}

.chamenu_title.yellow .chamenu_more{ background-position:right center;}

.chamenu_more.close{background-image:url(../images/chamenu_more.png);}
.chamenu_title.yellow .chamenu_more.close{background-image:url(../images/chamenu_more2.png);}

ul.cha_menu{width:756px; /*height:auto;*/margin:0 auto;  overflow:hidden; position:relative;}
ul.cha_menu li{width:108px; float:left; position:relative;}
ul.cha_menu.purple li{width:378px;}

ul.cha_menu.pink li{ background-image:url(../images/btn_chapink.jpg); }
ul.cha_menu.pink li:nth-of-type(1){ background-position:0 0;}
ul.cha_menu.pink li:nth-of-type(2){ background-position:-108px 0;}
ul.cha_menu.pink li:nth-of-type(3){ background-position:-216px 0;}
ul.cha_menu.pink li:nth-of-type(4){ background-position:-324px 0;}
ul.cha_menu.pink li:nth-of-type(5){ background-position:-432px 0;}
ul.cha_menu.pink li:nth-of-type(6){ background-position:-540px 0;}
ul.cha_menu.pink li:nth-of-type(7){ background-position:-648px 0;}

ul.cha_menu.yellow li{ background-image:url(../images/btn_chayellow.jpg?=v20210419); }
ul.cha_menu.yellow li:nth-of-type(1){ background-position:0 0;}
ul.cha_menu.yellow li:nth-of-type(2){ background-position:-108px 0;}
ul.cha_menu.yellow li:nth-of-type(3){ background-position:-216px 0;}
ul.cha_menu.yellow li:nth-of-type(4){ background-position:-324px 0;}
ul.cha_menu.yellow li:nth-of-type(5){ background-position:-432px 0;}
ul.cha_menu.yellow li:nth-of-type(6){ background-position:-540px 0;}
ul.cha_menu.yellow li:nth-of-type(7){ background-position:-648px 0;}

ul.cha_menu.purple li{ background-image:url(../images/btn_chapurple.jpg); }
ul.cha_menu.purple li:nth-of-type(1){ background-position:0 0;}
ul.cha_menu.purple li:nth-of-type(2){ background-position:-378px 0;}


.btn_cha_ov{
	width:100%;	height:100%;
	background-position:center top;	background-repeat:no-repeat;
	-webkit-transition:opacity .5s;	transition:opacity .5s;
	opacity:0;
	position:absolute; top:0; left:0;
}

ul.cha_menu li:hover .btn_cha_ov{opacity:1;}
ul.cha_menu.pink li:hover .btn_cha_ov{ background-image:url(../images/btn_chapink_ov.jpg); }
ul.cha_menu.pink li:nth-of-type(1):hover .btn_cha_ov{ background-position:0 0;}
ul.cha_menu.pink li:nth-of-type(2):hover .btn_cha_ov{ background-position:-108px 0;}
ul.cha_menu.pink li:nth-of-type(3):hover .btn_cha_ov{ background-position:-216px 0;}
ul.cha_menu.pink li:nth-of-type(4):hover .btn_cha_ov{ background-position:-324px 0;}
ul.cha_menu.pink li:nth-of-type(5):hover .btn_cha_ov{ background-position:-432px 0;}
ul.cha_menu.pink li:nth-of-type(6):hover .btn_cha_ov{ background-position:-540px 0;}
ul.cha_menu.pink li:nth-of-type(7):hover .btn_cha_ov{ background-position:-648px 0;}

ul.cha_menu.yellow li:hover .btn_cha_ov{ background-image:url(../images/btn_chayellow_ov.jpg?=v20210419); }
ul.cha_menu.yellow li:nth-of-type(1):hover .btn_cha_ov{ background-position:0 0; }
ul.cha_menu.yellow li:nth-of-type(2):hover .btn_cha_ov{ background-position:-108px 0;}
ul.cha_menu.yellow li:nth-of-type(3):hover .btn_cha_ov{ background-position:-216px 0;}
ul.cha_menu.yellow li:nth-of-type(4):hover .btn_cha_ov{ background-position:-324px 0;}
ul.cha_menu.yellow li:nth-of-type(5):hover .btn_cha_ov{ background-position:-432px 0;}
ul.cha_menu.yellow li:nth-of-type(6):hover .btn_cha_ov{ background-position:-540px 0;}
ul.cha_menu.yellow li:nth-of-type(7):hover .btn_cha_ov{ background-position:-648px 0;}

ul.cha_menu.purple li:hover .btn_cha_ov{ background-image:url(../images/btn_chapurple_ov.jpg); }

ul.cha_menu.purple li:nth-of-type(1):hover .btn_cha_ov{ background-position:0 0;}
ul.cha_menu.purple li:nth-of-type(2):hover .btn_cha_ov{ background-position:-378px 0;}


/*灰框*/
.border_lt, .border_rt, .border_bt{background-color:#777777; position:absolute; z-index:10;}
.border_lt, .border_rt{width:1px; height:100%; top:0;}

.border_lt{left:0;}
.border_rt{right:0;}
.border_bt{width:100%; height:1px; left:0; bottom:0;}

/*============== section4 ==============*/
#section4 .content{ padding-top:1.4rem;}


/*banner活動*/
.banner_block{width:1045px; height:440px; margin:0 auto; padding:2.4rem 0 0 0;/*padding:13% 7% 0% 7%;*/
			  background:url(../images/bg_banner.png) no-repeat center center; background-size:100% auto;
			  position:relative;
			  }

.mainbanner{width:900px; height:auto; margin:0 auto; transform:translateX(-.4rem); position:relative; z-index:5;}
.mainbanner div{width:100%; height:auto; position:relative; z-index:5;}

.slick-list{border:1px solid #fff;}
.banner_cha{position:relative;}
.banner_cha::before{
	content:" ";
	width:139px; height:137px;
	background:url(../images/banner_cha01.png) no-repeat center top;
	background-size:100% auto;
	top:-113px; left:107px;
	position:absolute;
    }

.banner_cha2{ width:100%; height:100%; position:absolute; top:0; left:0; }	
.banner_cha2::after, .banner_cha2::before{
		content:" ";
		background-position:center top; background-size:contain; background-repeat:no-repeat;
		position:absolute;
        }
.banner_cha2::before{
		width:194px; height:183px;
		background-image:url(../images/banner_cha02.png);
		top:219px; left:-93px;
		 }
.banner_cha2::after{
		width:149px; height:181px;
		background-image:url(../images/banner_cha03.png);
		top:145px; right:-71px;
		}
.banner_cha_s{ width:100%; height:100%; position:absolute; top:0; left:0; }	

/*pic_block遊戲特色*/
.pic_block{width:877px; height:553px; margin:0 auto; padding:2.2rem 0 0 0;  
	       background:url(../images/bg_gamepic.png) no-repeat center center; background-size:100% auto;
		   position:relative;
		  }

.pic_carousel{width:768px; height:auto;  margin:0 auto; transform:translateX(-.35rem);
			  position:relative; z-index:5;
			}
			  
.pic_carousel div{width:100%; height:auto; }

.pic_cha{ position:relative;}	
.pic_cha::after, .pic_cha::before{
	content:" ";
	background-position:center top; background-size:100% auto; background-repeat:no-repeat;
	position:absolute;
	}

.pic_cha::before{
	           width:165px; height:158px;
	           background-image:url(../images/gamepic_cha01.png);
			   top:-102px; right:21px;
			   }

.pic_cha::after{
	           width:151px; height:182px;
	           background-image:url(../images/gamepic_cha02.png);
			   top:316px; left:-105px;
			   }

.pic_cha_s{ width:100%; height:100%; position:absolute; top:0; left:0; }		


/*============== section5 ==============*/
#section5 .content{ max-width:1200px; padding-top:1rem; padding-bottom:1rem; position:relative; z-index:1;}

#section5 .con_block{ 
	width:100%;
	display:flex; display:-ms-flexbox; 
	justify-content: center; -ms-flex-pack: center;
	z-index:1;
}

.title_sub{ width:296px;  margin:.5rem auto 0 auto; }

.news_block{ width:559px; margin-right:.4rem; text-shadow:none; position: relative; z-index:3;}
.news_con{ width:100%; height:550px;  background:url(../images/bg_news.png) no-repeat center top; position:relative;}
.bg_pattern{
	width:100%; height:100% ;
	background-image:url(../images/bg_news_pattern.png);
	background-position:right bottom; 
	background-size:70% auto; 
	background-repeat:no-repeat;
	position:absolute;
	bottom: 1.8rem;
	right: 1.4rem;
	z-index:0;

}

/*newstype_menu*/
ul.newstype_menu{ width:110%; margin:0 auto; padding:0.85rem 0 .48rem 0;  text-align:center; transform: translateX(-4.7%); }
ul.newstype_menu li{ width:auto; height:3.48rem; margin:0 -.5rem; display:inline-block; transition:transform .5s; }
ul.newstype_menu li:nth-of-type(1){ background-image:url(../images/btn_newstype01.png); background-repeat:no-repeat; background-size:auto 100%; }
ul.newstype_menu li:nth-of-type(2){ background-image:url(../images/btn_newstype02.png); background-repeat:no-repeat; background-size:auto 100%; } 
ul.newstype_menu li:nth-of-type(3){ background-image:url(../images/btn_newstype03.png); background-repeat:no-repeat; background-size:auto 100%; } 
ul.newstype_menu li:nth-of-type(4){ background-image:url(../images/btn_newstype04.png); background-repeat:no-repeat; background-size:auto 100%; } 

ul.newstype_menu li:nth-of-type(1) a{ background-image:url(../images/btn_newstype01_ov.png); }
ul.newstype_menu li:nth-of-type(2) a{ background-image:url(../images/btn_newstype02_ov.png); }
ul.newstype_menu li:nth-of-type(3) a{ background-image:url(../images/btn_newstype03_ov.png); }
ul.newstype_menu li:nth-of-type(4) a{ background-image:url(../images/btn_newstype04_ov.png); }

ul.newstype_menu li a{ background-repeat:no-repeat; background-size:auto 100%; opacity:0.01; transition:opacity 0.5s;}
ul.newstype_menu li a:hover, ul.newstype_menu li.current a{ cursor:pointer; opacity:1; z-index:5; position: relative; }
ul.newstype_menu img{ opacity:0.01; width:auto; height:100%; }

/*列表*/
ul.news_list{ width:90%; min-height:358px; margin:0 auto; padding:0 0 .8rem 0;  position:relative; z-index:5;}
ul.news_list li{ width:100%; padding:0 .5rem 0 .5rem;
				background:url(../images/news_line.png) repeat-x bottom;
				display:flex;  display:-ms-flexbox;
				overflow:hidden;
				}

/*列表_title*/
.news_title{ width:100%; padding:0 0 0 .4rem; font-size:1.3rem; line-height:3.3rem; font-weight:500; }
.news_title{ overflow:hidden; color:#000; text-decoration:none; }
.news_title a{ color:#000; text-decoration:none; overflow:hidden; text-overflow:ellipsis;/*過長溢出的字省略變...*/ white-space:nowrap;/*不換行*/ }
.news_title:hover a{ text-decoration:underline; cursor:pointer; }

.news_type{ width:auto; height:3.3rem; padding:0 0 0 .1rem; display:table; }
.news_type > div{ width:100%; height:100%;  
	            vertical-align:middle; text-align:left; display:table-cell; /*垂直置中*/
				}
.news_type img{ width:auto;	height:28px; }


.btn_more{width:171px; height:auto; margin:0 auto;  
	background:url(../images/btn_more.png) no-repeat center top; background-size:100% auto;
	position:relative; z-index:5;
	
	}
.btn_more a{width:100%; height:auto; display:block; opacity:0.01; transition:opacity 0.5s; }
.btn_more a:hover{ background:url(../images/btn_more_ov.png) no-repeat center top; background-size:100% auto; opacity:1; }
.btn_more img{ opacity:0.01;}



.twitter_block{ width:336px; margin-left:1rem; }

.twitter_con{ width:100%; height:483px; 
    padding:1.15rem 0 0 .55rem;
	background:url(../images/bg_twitter.png) no-repeat center top;
	 }
.twitter_iframe_block{ width:90%; max-width:300px; height:440px; 
					margin:0 auto; padding:.7rem .25rem .7rem .3rem; overflow:auto; 
					background-color:#fff; 
					position:relative; z-index:50;
					}      	
					
.twitter_iframe_block a{ color:#d60064; text-shadow:none;}
.twitter_iframe_block a:hover{ color:#ff258b; text-decoration:underline; }

#twitter-widget-holder{ width:100%; height:100%;  }


.btn_twitter{width:270px; height:auto; margin:1rem auto 0 auto;  
	background:url(../images/btn_twitter.png) no-repeat center top; background-size:100% auto;
	
	}
.btn_twitter a{width:100%; height:auto; position:relative; display:block; }
.btn_twitter img{ opacity:0.01; }

.btn_twitter_tt{width:100%; height:100%; position:absolute; top:0; left:0;
	background:url(../images/btn_twitter_tt.png) no-repeat center top; background-size:100% auto;
	}
.btn_twitter:hover .btn_twitter_tt{ background:url(../images/btn_twitter_tt_ov.png) no-repeat center top; background-size:100% auto;}

.btn_twitter_ov{width:100%; height:100%; position:absolute; top:0; left:0;
	background:url(../images/btn_twitter_ov.png) no-repeat center top; background-size:100% auto;
	opacity:0.01; transition:opacity 0.5s; 
	}
.btn_twitter:hover .btn_twitter_ov{opacity:1;  }



/*============== section6 ==============*/

#section6 .con_block{ width:933px; margin:0 auto; position:relative;  z-index:5;}

.sec06_slogan{ width:100%; margin: 0 auto -.5rem auto; }

.sec06_txt {
	width:96.2%; 
    margin: 0 auto;
    padding-left:1.2rem;
    text-align: left;
    font-size: 1.25rem;
    line-height: 2.03rem;
    font-weight:500;
    
}

.tv_con{ position:relative; z-index:0; }

.tv_block{ margin:0 auto ; }
/**/
.btn_tv{ width:183px;  margin:18rem auto 12rem auto;
	background:url(../images/btn_tv.png) no-repeat center top; background-size:100% auto;
	position: relative;  
	}
.btn_tv a{width:100%; height:auto; position:relative; display:block; }
.btn_tv img{ opacity:0.01; }

.btn_tv_ov{width:100%; height:100%; position:absolute; top:0; left:0;
	background:url(../images/btn_tv_ov.png) no-repeat center top; background-size:100% auto;
	opacity:0.01; transition:opacity 0.5s; 
	}
.btn_tv a:hover .btn_tv_ov{opacity:1;}

.btn_tv::after{
	content:"";
	width:100%; max-width:1711px ; height:auto;
	top: -36.8rem;
    left: -51.5rem;
	position:absolute; z-index:-5;
	}

#btn_tv01 .btn_tv::after{

	content:url(../images/btn_tv01_pic.png);
}



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

		/*social_menu社群*/
		ul.social_menu{ right:7vw; }

}

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

		ul.social_menu{ right:2rem;}

}


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

	    ul.social_menu{ top:0; }
}

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

		/*.btn_act*/
		.btn_act{ width:230px; right:-.8rem; }
		#btn_top{ right:0vw; bottom:-.2rem; }  

		ul.social_menu { right:1rem; }
		ul.social_menu li {	width:55px;	}


}	

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

		ul.social_menu { right:.5rem; }
		ul.social_menu li {	width:55px;	}

}	


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


        .slogan{width:20%; left:-2vw;  bottom:3.8rem;  }
		.slogan img{ transform:rotate(0);}

		.sec03_cha01, .sec03_cha02{display:none;}

		/*banner活動*/
		.banner_block{width:100%; max-width:1045px; height:auto; padding:3.5vw 0 4.5vw 0; 
			          background:url(../images/bg_banner_m.png) no-repeat center center; background-size:100% 100%;}

		.mainbanner{width:85%; max-width:900px; height:auto; }
		.banner_cha2{ display:none;}

		.banner_cha::before{		
			width:15.5%; max-width:139px; height:137px;
			background:url(../images/banner_cha01.png) no-repeat center top; 
			background-size:100% auto ;
			top:-113px; left:auto; right:8vw;
			}

		
		/*pic_block遊戲特色*/
		.pic_block{ width:100%; max-width:877px; height:auto;  padding:2.7rem 0 3rem 0;  
					background:url(../images/bg_gamepic.png) no-repeat center center; background-size:100% 100%;
					}
		.pic_carousel{width:90%; max-width:768px; }	

		.pic_cha::after{display:none;}


		section#section4 {
			padding-bottom:4rem;
		}



 }


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


		ul.social_menu { top:.2rem; right:.15rem; }

		.btn_video {
			top: 46px;
			right: -33rem;
		}

}


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

		.slogan{width:22%; left:0vw;  bottom:0rem;  }

}

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

	    ul.social_menu { right:.1rem; }

}	


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


	  .home_con_block{ width:100%; max-width:1000px;}
	  .btn_video{ width:15%; top:42vw; right:1.5rem; }
	  

 }

@media screen and (max-width:999px) {
	
		ul.social_menu {width:18%; top:.4rem; justify-content:flex-end; -ms-flex-pack:end;}
		ul.social_menu li {
			width:33%; max-width:99px;
		}

}

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

		#section5 .con_block {
			margin:0 auto ;

		}

		.news_block {
			margin-right:.2rem;
			margin-left:-.3rem;
		}

		.twitter_block {
			margin-left:-.5rem;
		}


}


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


	    #lightarea{ display:none; }
		#btn_top{ width:0; height:0; right:-.8vw; bottom:-.8vw; display:none !important; }  

		section#home{ background:url(../images/bg_home_s.jpg) no-repeat center top; background-size:100% auto;}
		section#section1{ background:url(../images/bg_sec01_s.jpg) no-repeat center top; background-size:100% auto;}
		section#section2{ background:url(../images/bg_sec02_s.jpg) no-repeat center top; background-size:100% auto;}
		section#section3{ background:url(../images/bg_sec03_s.jpg) no-repeat center top; background-size:100% auto;}
		section#section4{ overflow:hidden; background:none; position:relative;}
		section#section5{ overflow:hidden; background:none; }
		section#section6{ background:url(../images/bg_sec06_s.jpg) no-repeat center top; background-size:100% auto;}

		.bg_sec4{
			width:100%; 
			background-image:url(../images/bg_sec04_s.jpg);
			background-position:center top;
			background-size:100% auto;
			background-repeat:no-repeat;
			overflow:hidden;
			}


		.bg_home_bt ,.bg_sec01_bt ,.bg_sec02_bt ,.bg_sec03_bt ,.bg_sec05_bt{ height:auto; background:none; }
		.bg_home_bt .s,.bg_sec01_bt .s,.bg_sec02_bt .s,.bg_sec03_bt .s,.bg_sec05_bt .s{ display:block; }

		/*======= home =======*/
		.yellowline01, .yellowline02, .yellowline03{ display:none;}
		/*角色*/
		.home_cha_block{ display:none; }

		.slogan{ width:21.8vw; left:-0.5vw; bottom:14vw; } 
		.slogan img{ transform:rotate(0);}
		.slogan .l{ display:none;}
		.slogan .s{ display:block;}

		.home_con_block{ display:flex; display:-ms-flexbox; 
						 justify-content:center; -ms-flex-pack:center;
						 align-items:flex-end; -ms-flex-align:end; 
						 position:absolute; bottom:18vw; left:0;
					    }
						
		.btn_video{ width:25%; max-width:185px; position:relative; top:auto; right:auto; }

		/*.btn_act*/
		.btn_act{width:42.5%; max-width:248px; right:-.8rem; bottom:-.4rem; }

		/*app_menu*/
		 ul.app_menu{width:96%; margin:136vw auto 0rem auto; }
		 ul.app_menu li{ width:48%; max-width:280px; }


		 ul.social_menu {width:24.5%; top:.4rem; }
		 ul.social_menu li { width:33%; }



		/*title*/
		.title{ width:100%; max-width:524px; z-index:0;}
		.title .l{ display:none;}
		.title .s{ display:block; position:relative; z-index:-1;}

		#section4 .title .m{ display:block; }
		#section4 .title .s{ display:none; }

		.title::before{	display:none; }
		#section1 .title::before{
			background-image:url(../images/title_01_s.png?=v20210413);
			top:.6rem; right:0px;
			display:block;
			}
		#section2 .title::before{ 
			background-image:url(../images/title_02_s.png);
			top:0rem; right:0px;
			display:block; 
		}	

		#section3 .title{ margin:0 auto .6rem auto; }
		#section4 .title{ margin:0 auto -.4rem auto; }

		.content{ padding:1.8rem 0 1rem 0; }

		#home .content{ padding:0 0 1.5rem 0; } 
		#section1 .content{ padding:1.55rem 0 3.5rem 0;/*padding:1.55rem 0 .9rem 0;*/ }
		#section1 .content.ob{ padding:1.55rem 0 .9rem 0; }
		#section2 .content{ padding:1.7rem 0 0rem 0; }
		#section3 .content{ padding:1.7rem 0 2.7rem 0; }
		#section5 .content{ padding:1.5rem 0 1.6rem 0; }

		/*======= Section1 =======*/
		/*banner活動*/
		.banner_block{ width:100%; max-width:905px; height:auto;  padding: 5vw 0 5.6vw 0;
					   background:url(../images/bg_banner_s.png) no-repeat center top; background-size:100% 100%;
					   }

		.mainbanner{ width:90.8%; transform:translateX(-0rem); }
		.banner_cha{ width:20%; max-width:139px; height:auto; position:absolute; top:-5rem; right:-.6rem; }
		.banner_cha::before{ display:none; }

		.banner_cha_s{ width:26%; max-width:139px; height:auto; left:auto; top:-.1rem; right:5.1%; }


		/*btn_download*/
		.btn_download .l{  display:none;}
		.btn_download .s{  display:block;}

		.btn_download{ width:62%; max-width:650px; margin:2.5rem auto 1rem auto; 
						background:url(../images/btn_download_s.png?=v20210305) no-repeat left top; background-size:100% auto;
						}
		.btn_download img{ max-width:650px;}

		.btn_download:hover .btn_download_ov{background:url(../images/btn_download_s_ov.png?=v20210305) no-repeat left top; background-size:100% auto; opacity:1;}

		.btn_download_tt{ width:64%; background:url(../images/btn_download_tt_s.png?=v20210326) no-repeat right bottom; background-size:100% auto;
						  bottom:17%; right:7%;
						 }
			
		.btn_download:hover .btn_download_tt{ background:url(../images/btn_download_tt_s_ov.png?=v20210326) no-repeat right bottom; background-size:100% auto;} 
		

		/*======= Section2 =======*/
		#section2 .title .l,.sec02_slogan01 .l,.sec02_slogan02 .l{ display:none; }
		#section2 .title .s,.sec02_slogan01 .s,.sec02_slogan02 .s{ display:block; }

		.sec02_slogan01{ margin:-.3rem auto 0 auto; }

		.sec02_cha01{ display:none; }
		.sec02_cha02{ width:100%; max-width:965px; margin-bottom:-2.05rem ; height:auto; position:relative; top:auto; right:auto; }
		.sec02_cha02 .l{ display:none;}
		.sec02_cha02 .m{ display:block;}

		/*======= Section3 =======*/
		#section3 .content .l{ display:none; }
		#section3 .content .s{ display:block; }

		.chamenu_title .click{ width:100%; height:100%; position:absolute; top:0; left:0; display:block;}

		.chamenu_title{ width:74%; max-width:830px; cursor:pointer;}
		.chamenu_title.yellow{ margin:1.2rem auto 0 auto; }
		.chamenu_title.purple{ margin:1.2rem auto 0 auto; }

		.chamenu_title.pink:hover .title_ov{ background-image:url(../images/chapink_title_s_ov.jpg?=v20210304);}
		.chamenu_title.yellow:hover .title_ov{ background-image:url(../images/chayellow_title_s_ov.jpg?=v20210304); background-position: 0 0 ;}
		.chamenu_title.purple:hover .title_ov{ background-image:url(../images/chapurple_title_s_ov.jpg?=v20210304); background-position: 0 0 ;}

		/*收合*/
		.chamenu_more{ background-image:url(../images/chamenu_more_s_ov.png);}

		.chamenu_more.close{ background-image:url(../images/chamenu_more_s.png);}
		.chamenu_title.yellow .chamenu_more.close{ background-image:url(../images/chamenu_more2_s.png);}

		/*灰框*/
		.border_lt, .border_rt, .border_bt{ background-color:#535353; }

		ul.cha_menu{ width:74%; max-width:830px; }
		ul.cha_menu li, ul.cha_menu.purple li{width:100%;}

		ul.cha_menu.pink li{ background-image:url(../images/btn_chapink_s.jpg); background-size:100% auto; }
		ul.cha_menu.pink li:nth-of-type(1){ background-position: 0 0;}
		ul.cha_menu.pink li:nth-of-type(2){ background-position: 0 16.666667%;}
		ul.cha_menu.pink li:nth-of-type(3){ background-position: 0 33.333333%;}
		ul.cha_menu.pink li:nth-of-type(4){ background-position: 0 50%;}
		ul.cha_menu.pink li:nth-of-type(5){ background-position: 0 66.666667%;}
		ul.cha_menu.pink li:nth-of-type(6){ background-position: 0 83.333333%;}
		ul.cha_menu.pink li:nth-of-type(7){ background-position: 0 100%;}

		ul.cha_menu.yellow li{ background-image:url(../images/btn_chayellow_s.jpg?=v20210419); background-size:100% auto; }
		ul.cha_menu.yellow li:nth-of-type(1){ background-position: 0 0;}
		ul.cha_menu.yellow li:nth-of-type(2){ background-position: 0 16.666667%;}
		ul.cha_menu.yellow li:nth-of-type(3){ background-position: 0 33.333333%;}
		ul.cha_menu.yellow li:nth-of-type(4){ background-position: 0 50%;}
		ul.cha_menu.yellow li:nth-of-type(5){ background-position: 0 66.666667%;}
		ul.cha_menu.yellow li:nth-of-type(6){ background-position: 0 83.333333%;}
		ul.cha_menu.yellow li:nth-of-type(7){ background-position: 0 100%;}

		ul.cha_menu.purple li{ background-image:url(../images/btn_chapurple_s.jpg); background-size:100% auto; }
		ul.cha_menu.purple li:nth-of-type(1){ background-position: 0 0;}
		ul.cha_menu.purple li:nth-of-type(2){ background-position: 0 100%;}

		.btn_cha_ov{ background-size:100% auto;}

		ul.cha_menu.pink li:hover .btn_cha_ov{ background-image:url(../images/btn_chapink_s_ov.jpg); }
		ul.cha_menu.pink li:nth-of-type(1):hover .btn_cha_ov{ background-position: 0 0;}
		ul.cha_menu.pink li:nth-of-type(2):hover .btn_cha_ov{ background-position: 0 16.666667%;}
		ul.cha_menu.pink li:nth-of-type(3):hover .btn_cha_ov{ background-position: 0 33.333333%;}
		ul.cha_menu.pink li:nth-of-type(4):hover .btn_cha_ov{ background-position: 0 50%;}
		ul.cha_menu.pink li:nth-of-type(5):hover .btn_cha_ov{ background-position: 0 66.666667%;}
		ul.cha_menu.pink li:nth-of-type(6):hover .btn_cha_ov{ background-position: 0 83.333333%;}
		ul.cha_menu.pink li:nth-of-type(7):hover .btn_cha_ov{ background-position: 0 100%;}

		ul.cha_menu.yellow li:hover .btn_cha_ov{ background-image:url(../images/btn_chayellow_s_ov.jpg?=v20210419); }		
		ul.cha_menu.yellow li:nth-of-type(1):hover .btn_cha_ov{ background-position: 0 0;}
		ul.cha_menu.yellow li:nth-of-type(2):hover .btn_cha_ov{ background-position: 0 16.666667%;}
		ul.cha_menu.yellow li:nth-of-type(3):hover .btn_cha_ov{ background-position: 0 33.333333%;}
		ul.cha_menu.yellow li:nth-of-type(4):hover .btn_cha_ov{ background-position: 0 50%;}
		ul.cha_menu.yellow li:nth-of-type(5):hover .btn_cha_ov{ background-position: 0 66.666667%;}
		ul.cha_menu.yellow li:nth-of-type(6):hover .btn_cha_ov{ background-position: 0 83.333333%;}
		ul.cha_menu.yellow li:nth-of-type(7):hover .btn_cha_ov{ background-position: 0 100%;}
		
		ul.cha_menu.purple li:hover .btn_cha_ov{ background-image:url(../images/btn_chapurple_s_ov.jpg); }	
		ul.cha_menu.purple li:nth-of-type(1):hover .btn_cha_ov{ background-position: 0 0;}
		ul.cha_menu.purple li:nth-of-type(2):hover .btn_cha_ov{ background-position: 0 100%;}


        /*======= Section4 =======*/
		.pic_cha::before{
						width:26%; max-width:165px; 
						top:-102px; right:21px;
						}

		/*pic_block遊戲特色*/
		.pic_block{ padding:4.5vw 0 5vw 0;  }
		.pic_carousel{width:86%; }					


		/*============== section5 ==============*/
		#section5 .con_block{ display:block; }

		.title_sub {
			max-width:852px;
		}
		.news_block .title_sub {
			width:70%;
		}
		.twitter_block .title_sub {
			width:93%;
		}

		.title_sub .l{ display:none; }
		.title_sub .s{ display:block; }


		.news_block {
			margin:0 auto 1.8rem auto;
			width:88%; max-width:680px;
		}

		.news_con {
			width:100%;
			height:auto;
			background: url(../images/bg_news_s.png) no-repeat center top;
			background-size: 100% 100%;
			padding-bottom:3.5rem;
		}

		/*newstype_menu*/
		ul.newstype_menu{ width:60%; padding:2.1rem 0 .2rem 0; transform:translateX(0%); }

		ul.newstype_menu li { width:50%; max-width:273px; height:auto; }
		ul.newstype_menu li .l{ display:none; }
		ul.newstype_menu li .s{ display:block; }

		ul.newstype_menu li{ background-size:100% auto; }

		ul.newstype_menu li:nth-of-type(1){ background-image:url(../images/btn_newstype01_s.png); }
		ul.newstype_menu li:nth-of-type(2){ background-image:url(../images/btn_newstype02_s.png); } 
		ul.newstype_menu li:nth-of-type(3){ background-image:url(../images/btn_newstype03_s.png); } 
		ul.newstype_menu li:nth-of-type(4){ background-image:url(../images/btn_newstype04_s.png); } 
		
		ul.newstype_menu li:nth-of-type(1) a{ background-image:url(../images/btn_newstype01_s_ov.png); }
		ul.newstype_menu li:nth-of-type(2) a{ background-image:url(../images/btn_newstype02_s_ov.png); }
		ul.newstype_menu li:nth-of-type(3) a{ background-image:url(../images/btn_newstype03_s_ov.png); }
		ul.newstype_menu li:nth-of-type(4) a{ background-image:url(../images/btn_newstype04_s_ov.png); }

		ul.newstype_menu img{ width:100%; height:auto; }

		ul.news_list {
			padding: 0 0 1rem 0;
		}
		ul.news_list li {
			padding: 0 .5rem 0 .1rem;
		}

		.news_title {
			font-size: 1.4rem;
			line-height: 3.65rem;

		}

		.news_type {
			width: auto;
			height: 3.65rem;
			margin-right: 0;
		}

		.news_type img { height:2.1rem; }


		.btn_more .l{ display:none; }
		.btn_more .s{ display:block; }
		.btn_more{ width:28%;  max-width:340px; 
				   background:url(../images/btn_more_s.png) no-repeat center top; 
				   background-size: 100% auto;		
				  }

		.btn_more a:hover{ background:url(../images/btn_more_s_ov.png) no-repeat center top; background-size: 100% auto;}

		.bg_pattern {
			bottom: 4.8%;
			right: 2%;
		}


		.twitter_block {
			width:75%; max-width:530px;
			margin:0 auto;
		}

		.twitter_con {
			height:auto;
			padding: 1.15rem 0 1.8rem .55rem;
			background: url(../images/bg_twitter_m.png) no-repeat center top;
			background-size:100% 100% ;
		}



		.twitter_iframe_block {
			width: 90%;
			max-width: 500px;
			height: 570px;
			max-height: 570px;
		}


		.btn_twitter {
			width: 70%;
			max-width: 403px;
			background-size: 100% auto;
		}


		/*======= Section6 =======*/
		#section6 .con_block {	width:100%;	}

		.sec06_txt {
			width:90%;

		}

		.sec06_slogan { width:90%; max-width:889px; margin: 0 auto;}
		.sec06_slogan .l{ display:none;	}
		.sec06_slogan .s{ display:block; }

		.btn_tv {
			width:29.4%;
			max-width: 183px;
			margin: 15vw auto 15vw auto;
			background: url(../images/btn_tv.png) no-repeat center top;
			background-size: 100% auto;
		}

		.btn_tv::after {
			width: 155vw;
			height: 100vw;
			background-size: 100% auto;
			background-position: center center;
			background-repeat: no-repeat;
			top: -34vw;
			left:-68vw;
		}

		#btn_tv01 .btn_tv::after{
			content:" ";
			background-image: url(../images/btn_tv01_pic.png);
		}
		
		

}



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


	    .btn_video{ width:26%; }

 		/*======= Section1=======*/
		.btn_download{ width:67%;}

        /*======= Section2 =======*/
		.sec02_txt{ width:90%; font-size:1.15rem; line-height:1.95rem; }
		/*.sec02_txt br{display:none;}*/

		.sec02_txt p{ margin:1.2rem 0 1.2rem 0;}
		.sec02_txt p:first-of-type{ margin:0.6rem 0 1.2rem 0;}
		.sec02_txt p:last-of-type{ margin:1.2rem 0 0.6rem 0;}


		/*======= Section4 =======*/
		.pic_cha::before{ display:none;}
		.pic_cha_s{ width:29%; max-width:165px; height:auto;  left:auto; top:.35rem; right:1.3vw;}

		#section4 .title{ z-index:0;}
		#section4 .title .m{ display:none;}
		#section4 .title .s{ display:block;}


		/*======= Section5 =======*/
		/*newstype_menu*/
		ul.newstype_menu{ width:63%; }



		/*======= Section6 =======*/
		.sec06_txt {
			padding:.4rem 0 1rem 0 ;
		}



}	


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

		ul.social_menu { width:27%;	}

		.slogan{ left:-2.2vw; bottom:18vw; }
		.slogan img{ transform:rotate(1deg); }

		/*.btn_act*/
		.btn_act{width:40%; }

	    /*app_menu*/
		ul.app_menu{width:98%; }
		ul.app_menu li{ width:43.6%; }

		/*btn_download*/
		.btn_download{ width:70%; }

        /*======= Section2 =======*/
		.sec02_txt{ width:86%; font-size:1.1rem; line-height:1.9rem;}
		
		.sec02_cha02{ margin-bottom:-2.05rem; }
		.sec02_cha02 .m{ display:none; }
		.sec02_cha02 .s{ display:block; }


		.chamenu_title{width:80%; }
		ul.cha_menu{ width:80%; }


		/*======= Section6 =======*/
		section#section4{ padding-bottom:3rem; }

		.btn_twitter { width:63.5%;	}

		.news_block .title_sub{ margin:-0.7rem auto 0 auto; }
		.twitter_block .title_sub{ margin:-1.2rem auto 0 auto; }


}	


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


		.twitter_iframe_block {
			width: 95%;
			height: 56vh;
			max-height: 56vh;
		}

		/*======= Section6 =======*/

		.btn_more{ width:35%;}



}	


@media screen and (max-width:580px) {
	
	
	   .home_con_block{ bottom:20vw; }

	    ul.social_menu{	width:33%; }

		/*======= Section5 =======*/
		.news_block .title_sub, .twitter_block .title_sub{
			width: 93%;
		}

		.news_block { width:96%;}
		.twitter_block {	width:96%;}

		/*newstype_menu*/
		ul.newstype_menu{ width:74%; }

		.sec06_txt {
			font-size:0.95rem;
			line-height:1.85rem;
		}




}	

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

	    .slogan{ bottom:16.5vw; }

		/*.btn_act*/
		.btn_act{width:42.5%; }

		/*======= Section1=======*/
		.btn_download{ width:85%;}

		/*======= Section2 =======*/
		.sec02_txt{ width:87.6%; font-size:.95rem; line-height:1.75rem; }

		/*newstype_menu*/
		ul.newstype_menu{ width:80%; }

		.news_con {
			background: url(../images/bg_news_s.png) no-repeat center top;
			background-size:100% 100% ;

		}


		.bg_pattern{

			background-image:url(../images/bg_news_pattern_s.png);
			background-position:right bottom; 
			background-size:90% auto; 
			bottom:4.8vw; right:3.35vw;


		}


		.twitter_con {
			background: url(../images/bg_twitter_s.png) no-repeat center top;
			background-size:100% 100% ;
		}

		.twitter_block { width:96%;}


		/*======= Section6 =======*/
		.sec06_slogan {	width:100%;	}


}	

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


		.sec02_txt {
			font-size: .9rem;
			line-height: 1.75rem;
		}

		.chamenu_title{width:90%; }
		ul.cha_menu{ width:90%; }


		/*列表*/
		ul.news_list{ width:90%; padding:0 0 .8rem 0; }
		ul.news_list li{width:100%; padding:.5rem .5rem .2rem .5rem; 
						display:block;  
						}

		/*列表_title*/
		.news_title{width:100%; padding:0;  font-size:1.1rem; line-height:2.4rem; }

		.news_type{ width:100%; height:1.7rem;  padding:0; }
		.news_type img{ height:1.6rem;	}


		.bg_pattern{
			bottom:7.9vw; right:3.35vw;
		}


}	

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

		.twitter_con{	
			padding:1rem 0 1.5rem .45rem;
		}

}