@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;}
*:focus { outline:none; }/*去除藍框*/
.clear{ height:0; clear:both; font-size:0em!important;}

img{ width:100%; height:auto;}
img.l, .l{ display:block;}
img.m, .m{ display:none;}
img.s, .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:#9e2313; color:#fff; text-shadow:none;}
::-moz-selection{ background:#9e2313; color:#fff; text-shadow:none;}

#wrapper{ width:100%; position:relative;}
.bg{  width:100%; height:100%; 
	  background:url(../images/bg.jpg) no-repeat center bottom; background-color:#51311a;
	   position:fixed; top:0; left:0;
	}

.btn_ov{ width:100%; height:100%; opacity:0.01; transition:opacity 0.1s; position:absolute; left:0; top:0; }

@keyframes float{

		0% { transform:translateY(2%); 	}
		50% { transform:translateY(-2%); } 
		100% { transform:translateY(2%); } 
   
	}

/*內容區/////////////////////////////////////////////////////////////////////////////*/
.main{ width:100%; height:auto;
	background:url(../images/bg_home.png) no-repeat center top; background-size:auto;
    position: relative;
   }
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);
	position:relative;
}

.bg_home_s{width:100%; height:auto; 
	 position:absolute; top:0; left:0;
	 pointer-events:none; z-index:0;
	}

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

/*============== home ==============*/
#home .content{ padding:0 0 3.5rem 0;}
/*角色*/
.home_cha_block{ width:1px; height:1px; margin:0 auto; pointer-events:none; position:relative;}
.home_cha{ width:1506px; position:absolute; left:-725px; top:-54px; }
.home_cha li{ opacity:0; width:100%; image-rendering:-webkit-optimize-contrast; position:absolute; left:0; top:0; }
/*z3*/
.home_cha li:nth-of-type(1){ 
	                        animation-name:home_cha_fadeIn_rt; 
							animation-duration:.65s;
							animation-delay:.4s;  
							animation-timing-function:ease;
							animation-fill-mode:forwards;
							}				
/*z2*/
.home_cha li:nth-of-type(2){ animation-name:home_cha_fadeIn_lt;
							 animation-duration:.65s;
							 animation-delay:.4s;  
							 animation-timing-function:ease;
							 animation-fill-mode:forwards;
							 }								
/*z1*/
.home_cha li:nth-of-type(3){
							animation-name:home_cha_fadeIn;
							animation-duration:.5s;
							animation-delay:0s;  
							animation-timing-function:ease;
							animation-fill-mode:forwards;
						   }

/*======= home_cha_fadeIn =======*/

.home_cha_fadeIn { animation-name:home_cha_fadeIn; }
  
@keyframes home_cha_fadeIn {
		  0% {
			opacity:.1;
			transform: scale(1.5, 1.5);
		  }
  
  
		  100% {
			opacity:1;
			transform: scale(1, 1);
		  }
  }
  
.home_cha_fadeIn_lt{ animation-name:home_cha_fadeIn_lt; }

@keyframes home_cha_fadeIn_lt{
		  0% {
			opacity:.1;
			transform: translateX(-150px);
		  }
   
		  100% {
			opacity:1;
			transform: translateX(0);
		  }
  }
  
  
.home_cha_fadeIn_rt{ animation-name:home_cha_fadeIn_rt; }

@keyframes home_cha_fadeIn_rt{
		  0% {
			opacity: .1;
			transform: translateX(150px);
		  }
  
  		  100% {
			opacity: 1;
			transform: translateX(0);
		  }
  }
  

.slogan_fadeIn{ animation-name:slogan_fadeIn; }
  
@keyframes slogan_fadeIn{
		  0% {
			opacity:.1;	transform:scale(0.9, 0.9);
		  }
  
  		  100% {
			opacity:1; transform:scale(1, 1);
		  }
  }
  
.btn_fadeIn{ animation-name:btn_fadeIn; }
  
@keyframes btn_fadeIn{

		  0% {	opacity:.1; }
    	  100% { opacity:1;  }
  }
  

.home_bottom_block{ width:100%; max-width:1100px; margin:0 auto; 
					position:relative;  z-index:9; 
					}
/*slogan*/
.slogan{ width:100%; max-width:913px; margin:30.1rem auto 0 auto; pointer-events:none; image-rendering:-webkit-optimize-contrast; 
     	 opacity:0;
		 animation-name:slogan_fadeIn;
		 animation-duration:.4s;
		 animation-delay:.8s;  
		 animation-timing-function:ease;
		 animation-fill-mode:forwards;
		 position:relative; 
	    }
.slogan .slogan_main{ margin-bottom:-5.5rem; }

/*隱藏 slogan_sub*/
.home_bottom_block.hide .slogan{ margin:30.5rem auto 0 auto; }
.home_bottom_block.hide .slogan_main{ margin-bottom:-3.7rem; }
.home_bottom_block.hide .slogan_sub{ display:none; }

.slogan .slogan_main .effect,
.slogan .slogan_sub .effect{ 
			width:100%; 
			animation-name:slogan_effect;
			animation-duration:1s;
			animation-iteration-count:infinite;
			position:absolute; top:0; left:0; z-index:5;
	     	}

.slogan .slogan_sub{ width:100%; margin-top:-4rem;  position:relative; z-index:5;}

/*=======slogan_effect=======*/
.slogan_effect{	animation-name:slogan_effect;  }
  
@keyframes slogan_effect{
			0%,100% { opacity:0; }
			50% { opacity:.7; }
		}
ul.app_menu, ul.main_menu{ opacity:0;
						   animation-name:btn_fadeIn;
						   animation-duration:.6s;
						   animation-delay:1.2s;  
						   animation-timing-function:ease;
						   animation-fill-mode:forwards;
						   }

/*app_menu*/
ul.app_menu{ margin:1.7rem auto .2rem auto; image-rendering:-webkit-optimize-contrast; 
				display:flex; display:-ms-flexbox;
				justify-content:center; -ms-flex-pack:center;
			}
ul.app_menu li{ width:245px; max-width:293px; 
				background-repeat:no-repeat; background-size:100% auto;
			    }

ul.app_menu li:nth-of-type(1){ background-image:url(../images/btn_app_google.png); } 
ul.app_menu li:nth-of-type(2){ background-image:url(../images/btn_app_apple.png); }
ul.app_menu li:nth-of-type(3){ background-image:url(../images/btn_app_apk.png); }

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

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

/*main_menu*/
ul.main_menu{ margin:0 auto;  text-align:center; image-rendering:-webkit-optimize-contrast; }
ul.main_menu li{ width:351px; max-width:351px; margin-right:-.05rem;
				 background-repeat:no-repeat; background-size:100% auto; 
				 display:inline-block; 
				}
ul.main_menu li:last-of-type{ margin-right:0;}

ul.main_menu li:nth-of-type(1){ background-image:url(../images/btn_main_wiki.png?=v20210726); } 
ul.main_menu li:nth-of-type(2){ background-image:url(../images/btn_main_guide.png?=v20210726); }

ul.main_menu li:nth-of-type(1) a{ background-image:url(../images/btn_main_wiki_ov.png?=v20210726); }
ul.main_menu li:nth-of-type(2) a{ background-image:url(../images/btn_main_guide_ov.png?=v20210726); }

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


/*===================================*/
/*title*/
h2.title{ width:476px; margin:0 auto; position:relative; image-rendering:-webkit-optimize-contrast; }
h2.title img{ opacity:0.01; }

h2.title::before{
	content:" ";
	width:100%; height:100%;
	background-position:center top;
	background-size:100% auto;
	background-repeat:no-repeat;
	position:absolute; top:0rem; right:0px;
	}


#section1 h2.title{ margin:0 auto .35rem auto; }	
#section1 h2.title::before{
		background-image:url(../images/title_sec03.png);
		}

#section2 h2.title::before{
		background-image:url(../images/title_sec02.png);
		}

#section3 h2.title{ margin:0 auto -3.8rem auto; }
#section3 h2.title::before{
		background-image:url(../images/title_sec03.png);
		}
		

/*============== section1 ==============*/
#section1 .content{ padding:0 0 3.5rem 0; }

/*news_block + twitter_block*/
#section1 .con_block{ 
				width:100%;
				display:flex; display:-ms-flexbox; 
				justify-content:center; -ms-flex-pack:center;
				z-index:1;
			}
/*.left_block{ width:588px; }*/

/*banner活動*/
.banner_block{ width:588px; height:auto; margin:0 auto .7rem auto; 
			   position:relative;
			  }
.banner_top{ width:100%; height:224px; 
	         background-image:url(../images/banner_bg.png); 
			 background-position:center top;
			 background-repeat:no-repeat; background-size:100% auto;
			 position:relative;
			 }
.banner_frame{ width:100%; height:100%; 
				background-image:url(../images/banner_frame.png); 
				background-repeat:no-repeat; background-size:100% 100%;
				background-position:center top;
				position:absolute; top:0; left:0; z-index: 98;
				pointer-events:none;
			   }

.mainbanner{ width:100%; max-width:580px; height:auto; margin:0 auto; padding:.25rem 0 0 0 ; }
.mainbanner div{width:100%; height:auto; }

.banner_bt{ width:100%; 
			background-image:url(../images/banner_bt.png); 
			background-position:center top;
			background-repeat:no-repeat; background-size:100% auto;
			}
.banner_bt img{ opacity:0.01;}

/*news_block*/
.news_block{ width:100%; max-width:585px; margin:0 auto; text-shadow:none; position: relative; z-index:3;}
.news_con_top{ width:100%; }
.news_con_bt{ width:100%; }
.news_con_top img.l, .news_con_bt img.l{ display:inline; }
.news_con_bt img{ vertical-align:top; }
.news_con_top img{ vertical-align:bottom; }

.news_con_mid{ width:100%; min-height:248px; 
				background-repeat:no-repeat ,repeat-y;
				background-position:center bottom ,center top;
				background-size:100% auto;
				background-image:url(../images/news_con_midbt.png) ,url(../images/news_con_mid.png);  
				position:relative;
			}

.news_con_midbt{ width:100%; height:100%;
				background-image:url(../images/news_con_midbt.png); 
				background-repeat:no-repeat; background-size:100% auto;
				background-position: center bottom;
				image-rendering:-webkit-optimize-contrast;
				pointer-events:none;
				position:absolute; bottom:0; left:0; z-index:0;
				display:none;
				}

/*列表*/
ul.news_list{ width:93%; margin:0 auto; padding:0 0 2.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;
				color:#000;
				display:flex;  display:-ms-flexbox;
				overflow:hidden;
				}

/*列表_title*/
.news_title{ width:100%; font-size:1.25rem; line-height:3.4rem; font-weight:300; }
.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; }

.news_type{ width:auto; height:3.3rem; padding:0 .35rem 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:26px; margin-bottom:-.25rem; }

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

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{ color:#7c776b; background-repeat:no-repeat; background-size:auto 100%; opacity:0; 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%; }



/*按鈕區塊*/
.news_block .button_block{ width:100%; height:auto;
			text-align:center; vertical-align:bottom;
			position:absolute; bottom:-7.8%; left:0;  
		}
/*btn_more もっと見る*/
.btn_more{ width:55%; max-width:245px;
	        display:inline-block;
			background-image:url(../images/btn_more.png); background-repeat:no-repeat; background-size:100% auto;
			image-rendering:-webkit-optimize-contrast;
			position:relative; z-index:50;
			}
.btn_more a{ background-image:url(../images/btn_more_ov.png); 
			background-repeat:no-repeat; background-size:100% auto; opacity:0.01; transition:opacity 0.5s;
			}
.btn_more a:hover{ opacity:1; }
.btn_more img{ opacity:0.01; }	


/*twitter_block*/
.twitter_block{ width:307px; max-width:307px; margin-left:1rem; display:inline-block; }

.twitter_con_top{ width:100%; }
.twitter_con_bt{ width:100%; }
.twitter_con_top img.l, .twitter_con_bt img.l{ display:inline; }
.twitter_con_bt img{ vertical-align:top; }
.twitter_con_top img{ vertical-align:bottom; }

.twitter_con_midbt{ width:100%; height:100%;
					background-image:url(../images/twitter_con_midbt.png); background-repeat:no-repeat; background-size:100% auto;
					background-position: center bottom;
					image-rendering:-webkit-optimize-contrast;
					pointer-events:none;
					position:absolute; bottom:0; left:0; z-index:50;
					}
.twitter_con_midbt img{ opacity:0.01;}

.twitter_con_mid{ width:100%; 
				  background-position: center top;
				  background-size:100% auto;
				  background-repeat:repeat-y;
				  background-image:url(../images/twitter_con_mid.png); 
				  position: relative;
				}

.twitter_con_mid, .twitter_iframe_block{ height:544px;}		
.twitter_iframe_block{ width:93%; max-width:300px; 
						margin:0 auto; padding:.1rem .25rem .3rem .3rem; overflow:auto; 
						background-color:transparent;
						position:relative; z-index:10;
						}      	
					
.twitter_iframe_block a{ color:#bb3500; text-shadow:none; text-align:center;}
.twitter_iframe_block a:hover{ color:rgb(224, 71, 0); text-decoration:underline; }

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



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

/*game_block*/
.game_block{ width:100%; max-width:908px; margin:0 auto; image-rendering:-webkit-optimize-contrast;}

.game_con_top{ width:100%; vertical-align:bottom; }
.game_con_bt{ width:100%; vertical-align:top; }
.game_con_top img.l, .game_con_bt img.l{ display:inline; }

.game_con_midbt{ width:100%; height:100%;
				background-image:url(../images/twitter_con_midbt.png); background-repeat:no-repeat; 
				background-position: center bottom;  background-size:100% auto;
				pointer-events:none;
				position:absolute; bottom:0; left:0; z-index:50;
				}
.game_con_midbt img{ opacity:0.01;}

.game_con_mid{ width:100%; 
	            background-image:url(../images/game_con_mid.png); 
				background-repeat:repeat-y; 
				background-position:center top;
				background-size:100% auto;
				position:relative;
				}

.game_conframe{ width:100%; height:100%;
					background-image:url(../images/game_conframe_mid.png); 
					background-repeat:repeat-y; 
	                background-position:center top;
					background-size:100% auto;
					position:absolute; top:0; left:0; z-index:5;
					pointer-events:none;
					}

.game_con_mid article{ width:100%;
	                   background-repeat:no-repeat; background-size:100% 100%;
					   background-position:center center; 
					   display:flex; display:-ms-flexbox; 
					   flex-direction: row-reverse; -ms-flex-direction:row-reverse;
					   position:relative;
		             }
article.game01{ background-image:url(../images/game_bg01.png); }
article.game02{ background-image:url(../images/game_bg02.png); flex-direction:row; -ms-flex-direction:row;}
article.game03{ background-image:url(../images/game_bg03.png); }
article.game04{ background-image:url(../images/game_bg04.png); flex-direction:row; -ms-flex-direction:row;}

.game_cha{ position:absolute; z-index:1; }
.game_cha img{ width:auto; }
.game01 .game_cha{ top:0; left:0;}
.game02 .game_cha{ top:-1.1rem; right:0;}
.game03 .game_cha{ top:-.8rem; left:0;}
.game04 .game_cha{ bottom:0; right:0;}


.gamecon{ width:100%; max-width:502px; margin:0 3rem .5rem 3rem;  position:relative; z-index:5;}
/*h3 大標題*/
.gamecon h3{ margin:1.4rem auto .35rem auto; }
.gamecon .text{ width:96%; margin:.35rem auto .9rem auto; font-size:1.23rem; line-height:1.85rem; font-weight:300; }
.gamecon .text p{/* padding-left:.23rem;*/ text-align:justify; }
.gamepic{ width:97.8%; margin:0 auto; }




/*============== section3 ==============*/
#section3 .content{ max-width:1150px; padding:0 0 5.5rem 0;}

/*chacamp_block 職業紹介*/
.chacamp_block{ height:auto; margin:0 auto; position:relative;}
.chacamp_block article{ position:relative; overflow:visible;}

/*campcha_menu*/
ul.campcha_menu{ width:100%; max-width:328px; margin:-6.8rem auto 0 auto;  
				 display:flex; display:-ms-flexbox;
				 justify-content:center; -ms-flex-pack:center;
				 image-rendering:-webkit-optimize-contrast;
				}

ul.campcha_menu li{ /*width:25%;*/ margin:0 .31rem; position:relative; }
/*ul.campcha_menu li a > img{ max-width:100px; }*/
ul.campcha_menu li{ width:4.4rem; }
ul.campcha_menu li a > img{ width:4.4rem; }

ul.campcha_menu li a:hover .btn_ov, ul.campcha_menu li.slick-current .btn_ov{ opacity:1; }


/*btn_change*/
.btn_change{ width:110px; 
			background-image:url(../images/btn_change.png); background-repeat:no-repeat; background-size:100% auto;
			image-rendering:-webkit-optimize-contrast;
			position:absolute; left:25.5%; top:44%; 
			}
.btn_change a{ background-image:url(../images/btn_change_ov.png); background-repeat:no-repeat; background-size:100% auto;
				 opacity:0.01; transition:opacity 0.5s;
				}
.btn_change a:hover{ opacity:1; }
.btn_change img{ opacity:0.01; }	


.chapic{ position:relative;  } 
.chapic_effect{ width:100%; height:100%;
	            background-position:center top;
				background-size:100% auto;
				background-repeat:no-repeat;
				position:absolute; left:0; top:0; 
			}
.chapic_type{ width:191px; position:absolute; left:0; top:8.5%; z-index:-1; }
.chapic_data{ width:242px; position:absolute; left:0; top:58%; }

img.man{ opacity:1; transition:opacity 0.5s,transform .5s;  transform:scale(1, 1); }
img.woman{ opacity:0; transform:scale(0.9, 0.9); position:absolute; top:0; left:0;  }

img.woman.show{	opacity:1; transition:opacity 0.5s,transform .5s; transform:scale(1, 1); }
img.man.hide{ opacity:0; transition:opacity 0.5s,transform .5s;	transform:scale(0.9, 0.9); }


.chacon{ width:545px; position:absolute; right:0; top:14%; }

/*h3 大標題*/
.chacon h3:nth-of-type(1){ margin-bottom:.25rem; }
.chacon h3:nth-of-type(2){ margin-top:1.4rem; margin-bottom:.35rem; }
/*h4 小標題*/
h4.title_sub{ width:417px; }
.chacon h4:nth-of-type(2), .chacon h4:last-of-type{ margin-top:1rem; }
.chacon .text{ width:90%; margin:0 auto; font-size:1.23rem; line-height:1.85rem; font-weight:300; }
.chacon p{ padding:0 .48rem 0 .3rem;}

/*chacamp01*/
.chacamp01 .chapic{ width:1005px; } 


/*chacamp02*/
.chacamp02 .chapic{ width:944px; } 
.chacamp02 .chapic_main{ margin-left:1.1rem; margin-bottom:2rem; } 
.chacamp02 .chapic_data{ top:60%; }
.chacamp02 .chacon{ top:12%; }
.chacamp02 .btn_change{ left:34.5%; top:45%; }

/*chacamp03*/
.chacamp03 .chapic{ width:876px; } 
.chacamp03 .chapic_data{ top:55%; }
.chacamp03 .btn_change{ left:40%; top:48%; }

/*chacamp04*/
.chacamp04 .chapic{ width:865px; } 
.chacamp04 .chapic_main{ margin-left:2rem; } 
.chacamp04 .chacon{ top:18%; }
.chacamp04 .btn_change{ left:33.5%; top:43%; }


/*btn_youtube*/
.btn_youtube{ width:100%; max-width:893px; margin:3rem auto 0 auto; 
			  background-image:url(../images/1.png); background-repeat:no-repeat; background-size:100% auto;
			  image-rendering:-webkit-optimize-contrast;
			  }
.btn_youtube{ width:100%; max-width:893px; margin:3rem auto 1 auto; 
			  background-image:url(../images/2.png); background-repeat:no-repeat; background-size:100% auto;
			  image-rendering:-webkit-optimize-contrast;
			  }
.btn_youtube{ width:100%; max-width:893px; margin:3rem auto 2 auto; 
			  background-image:url(../images/3.png); background-repeat:no-repeat; background-size:100% auto;
			  image-rendering:-webkit-optimize-contrast;
			  }
.btn_youtube{ width:100%; max-width:893px; margin:3rem auto 3 auto; 
			  background-image:url(../images/4.png); background-repeat:no-repeat; background-size:100% auto;
			  image-rendering:-webkit-optimize-contrast;
			  }
.btn_youtube a{ background-image:url(../images/btn_main_youtube_ov.png); 
				background-repeat:no-repeat; background-size:100% auto; opacity:0.01; transition:opacity 0.5s;
				}
.btn_youtube a:hover{ opacity:1; }
.btn_youtube img{ opacity:0.01; }	



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

			/**======= home =======*/
			.home_cha{
				transform:scale(0.9, 0.9); transform-origin:center center;
				top:-42px;
			}

			/*slogan*/
			.slogan{
				width:1412px;
				margin:27.5rem auto 0 auto;
			}


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

		    /*chacamp_block 職業紹介*/
			.chapic{ margin-left:1.2rem; 
					transform:scale(0.94, 0.94); transform-origin:left top;
					} 

			/*app_menu*/
			ul.app_menu li{ width:234px;}

			/*main_menu*/
			ul.main_menu li{ width:300px;	}

}


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


				/*chacamp_block 職業紹介*/
				.chapic{ margin-left:1.2rem; 
						 transform:scale(0.92, 0.92); 
						} 

 }


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

				/**======= home =======*/
				.main{ 
					background-size:120rem auto;
				}

				.home_cha{
					transform:scale(0.81, 0.81); 
				}
				.slogan {
					width:850px;
					margin:24.5rem auto 0 auto;
				}

				/*app_menu*/
				ul.app_menu li{ width:223px;}

				/*main_menu*/
				ul.main_menu li { width:313px;	}


}	


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

	           /*chacamp_block 職業紹介*/
				.chapic{ 
					margin-left:1.4rem; 
					transform:scale(0.9, 0.9); 
				} 



}

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


				/*chacamp_block 職業紹介*/
				.chacamp_block{ cursor:grab; }

}

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

			/**======= home =======*/
			.main{ background-size:117rem auto; }

            /*角色*/
			.home_cha{
				width:84rem; max-width:1506px;
				left: -39rem;
				transform:scale(1, 1); 
			}


			#section3 h2.title{
				margin: 0 auto -1.1rem auto;
			}

			/*======= Section3 =======*/
			/*chacamp_block 職業紹介*/
			.chacamp_block{ width:100%; max-width:750px; }

			.chapic{ margin-left:0rem; 
				transform:scale(1, 1); transform-origin:center;
			} 
			
			.chapic img.s, .chacon img.s{ display:block; }
			.chapic img.l, .chacon img.l{ display:none }

			.chapic_type{ width:20%; left:auto;	right:5.55%; top:2%; z-index:1; }
			.chapic_data{ width:30%; left:1.5%; }
			.chacamp01 .chapic_data{ top:auto; bottom:10rem; }
			.chacamp02 .chapic_data{ top:auto; bottom:7rem; }
			.chacamp03 .chapic_data{ top:auto; bottom:5rem; }
			.chacamp04 .chapic_data{ top:auto; bottom:5rem; }

			/*btn_change*/
			.btn_change{ width:17%; left:36.5%;	top:38%; }

			.chacamp02 .btn_change{	left:39.5%; top:44%; }
			.chacamp03 .btn_change{	left:42%; top:45%; }
			.chacamp04 .btn_change{	left:36.5%; top:40%; }


			.chacon{ width:100%; max-width:680px; margin:0 auto; position:relative; right:auto; top:auto; }
			.chacon p{ padding:0 .1rem 0 0.3rem; }

			.chacamp01 .chacon{ /*margin-top:-21vw;*/ /*margin-top:-21%;*/ margin-top:-130px;}
			.chacamp02 .chacon{ margin-top:-60px; }
			.chacamp03 .chacon{ margin-top:-40px;}
			.chacamp04 .chacon{ margin-top:-40px; }

			.chacamp01 .chapic{ width:100%; } 
			.chacamp02 .chapic{ width:100%; } 
			.chacamp03 .chapic{ width:100%; } 
			.chacamp04 .chapic{ width:100%; } 


			.chacamp02 .chapic_main{ margin-left:0; margin-bottom:0; }
			.chacamp04 .chapic_main{ margin-left:0; } 

			/*h3 大標題*/
			.chacon h3{ width:100%; max-width:560px; }
			/*h4 小標題*/
			h4.title_sub{ width:100%; max-width:440px; }
		
			/*campcha_menu*/
			ul.campcha_menu{ max-width:350px; margin:1.75rem auto 0 auto; }

}




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


		#home .content{ padding:0 0 2.5rem 0; } 
		#section1 .content{ padding:0 0 2.5rem 0; } 
		#section2 .content{ padding:0 0 2.5rem 0; } 
		#section3 .content{ padding:0 0 4.5rem 0; } 

		/*title*/
		h2.title{ width:50%; max-width:355px; }

		h2.title .l{ display:none;}
		h2.title .s{ display:block; }
		h2.title::before{ background-size:auto 100%; }

		#section1 h2.title::before{ background-image: url(../images/title_sec03_s.png); }
		#section1 h2.title{ margin: 0 auto .05rem auto; }
		#section2 h2.title{ margin:0 auto -.5rem auto; }
		#section3 h2.title{ margin:0 auto -1rem auto; }

        /*font-size 字級*/
    	.gamecon .text{
			font-size:1.33rem;
			line-height: 2.2rem;
		}

		.chacon .text{
			font-size:1.33rem;
			line-height:2.2rem;
		}


		/*======= Section1 =======*/
		#section1 .con_block{ width:98.4%; max-width:600px; margin:0 auto; display:block; }

		.left_block{ width:100%; max-width:900px; margin-bottom:.7rem; }

		/*banner活動*/
		.banner_block{ width:100%; }
		.banner_top{ height:auto; background-image:url(../images/banner_bg_s.png); }
		.banner_frame{ background-image:url(../images/banner_frame_s.png); }

		.mainbanner{ width:97.4%; padding:.7rem 0 0 0; }

		.banner_bt{  background-image:url(../images/banner_bt_s.png); }
		.banner_bt img.l{ display:none; }
		.banner_bt img.s{ display:block; }


		/*news_block*/
		.news_block{ width:100%;}
		.news_con_top img.l{ display:none; }
		.news_con_bt img.l{ display:none;  }
		.news_con_top img.s, .news_con_bt img.s{ display:inline; }
		
		.news_con_mid{ min-height:auto; 
			background-image:url(../images/news_con_midbt_s.png) ,url(../images/news_con_mid_s.png);  
		}

		ul.news_list{ padding: 0 0 3.5rem 0; }

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

		.btn_more{margin: 0rem auto; }

		.news_block .button_block{	bottom:-3.8%; }



		/*twitter_block*/
		.twitter_block{ width:100%; max-width:900px; margin-left:0; }

		.twitter_con_top img.l, .twitter_con_bt img.l{ display:none; }
		.twitter_con_top img.s, .twitter_con_bt img.s{ display:inline; }

		.twitter_con_midbt{ 
			background-image:url(../images/twitter_con_midbt_s.png); 
			}

		.twitter_con_mid{ 
			            height:auto;
						background-image:url(../images/twitter_con_mid_s.png); 
						}	
		
		.twitter_iframe_block {
					width:95%;
					max-width:640px;
					height:40vh;
					max-height:40vh;
				}
						

		/*======= Section2 =======*/
		.game_block { width:100%; max-width:680px; }

		.game_con_top img.l{ display:none; }
		.game_con_bt img.l{ display:none;  }
		.game_con_top img.s, .game_con_bt img.s{ display:inline; }

		.game_con_mid{ 
			background-image:url(../images/game_con_mid_s.png); 
			}

		.game_conframe{ 
			            background-image:url(../images/game_conframe_mid_s.png); 
						}

		.game_con_mid article{ display:table;}
		article.game01{ background-image:url(../images/game_bg01_s.png); }
		article.game02{ background-image:url(../images/game_bg02_s.png); }
		article.game03{ background-image:url(../images/game_bg03_s.png); }
		article.game04{ background-image:url(../images/game_bg04_s.png); }

		.gamecon{ margin: 0 auto .5rem auto;}
		.gamecon .text p{/* padding-left:.23rem;*/ text-align:justify; }

		.game_cha{ display:none; }

		.gamecon{ width:92%; max-width:640px;}
		/*h3 大標題*/
		.gamecon h3{ width:90%; max-width:460px; }
		.gamecon h3 .l{ display:none; }
		.gamecon h3 .s{ display:block; }


}

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

			/*======= home =======*/
			.main{ background-size:100rem auto;}

			/*角色*/
			.home_cha{
					width: 76rem;
                    left: -35.85rem;
				}

			.slogan{
				width: 805px;
				margin: 23rem auto 0 auto;
			}	

}

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


			.bg{ background:url(../images/bg_s.jpg) no-repeat center center; background-size:100% auto; }

			.bg_home_s img.s{ margin:0; padding:0; display:block; position:relative; z-index:0;}

			.main{ background-image:none; }

			/*======= home =======*/
			/*角色*/
			.home_cha_block{ display:none; }

			.home_bottom_block{ padding-top:79.8vw;}
			/*slogan*/
			.slogan{ width:100%; margin:0 auto;
					 opacity:1;  animation-name:none;
				    } 
			.slogan .slogan_main{
				margin-bottom: -6.8vw;
			}

			/*隱藏 slogan_sub*/		
			.home_bottom_block.hide .slogan{ margin:0 auto; }
			.home_bottom_block.hide .slogan_main{ margin-bottom:-1.1rem; }

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

			.slogan .slogan_sub{ margin-top:1.7rem; }

				
			ul.app_menu, ul.main_menu{ opacity:1; animation-name:none; }	

			/*app_menu*/
			ul.app_menu{width:99.8%; margin:.85rem auto .2rem auto;
				         display:flex; display:-ms-flexbox;
						 justify-content:center; -ms-flex-pack:center;
			         }
			ul.app_menu li{ width:32.93%; max-width:280px; }

			/*main_menu*/
			ul.main_menu{ width:98.6%; }
			ul.main_menu li{ width:49.7%; max-width:333px; margin-right:-.4rem; }

			ul.main_menu .l{ display:none;}
			ul.main_menu .s{ display:block; }

			ul.main_menu li:nth-of-type(1){ background-image:url(../images/btn_main_wiki_s.png?=v20210726); } 
			ul.main_menu li:nth-of-type(2){ background-image:url(../images/btn_main_guide_s.png?=v20210726); }
			
			ul.main_menu li:nth-of-type(1) a{ background-image:url(../images/btn_main_wiki_s_ov.png?=v20210726); }
			ul.main_menu li:nth-of-type(2) a{ background-image:url(../images/btn_main_guide_s_ov.png?=v20210726); }


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

			.btn_youtube{ width:84.2%; max-width:500px; background-image:url(../images/btn_main_youtube_s.png); }
			.btn_youtube a{ background-image:url(../images/btn_main_youtube_s_ov.png); }


			/*campcha_menu*/
			ul.campcha_menu{ width:64%; max-width:400px; }
			ul.campcha_menu li{ width:4.6rem; }
			ul.campcha_menu li a > img{ width:4.6rem; }



}


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


		/*title*/
		h2.title{ width:65%; }


        /*======= Section2 =======*/
		.gamecon h3{ margin:0 auto .35rem auto; }

		article.game01{	padding-top:0rem; }



        /*======= Section3 =======*/
		.chacamp01 .chacon{ /*margin-top:-21vw;*/ /*margin-top:-21%;*/ margin-top:-110px;}

		.chapic_type{ width:20%; right:1.25%; top:3%; }
		.chapic_data{ width:35%;}

		/*btn_change*/
		.btn_change{ width:20%; }

		.chapic_main{ width:105vw; margin-left:-4vw; }
		.chacamp02 .chapic_main{ margin-left:-4vw; }
		.chacamp04 .chapic_main{ margin-left:-4vw; } 




}	

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

			.chacamp01 .chapic_data{ bottom:9rem; }
			.chacamp02 .chapic_data{ bottom:6rem; }
			.chacamp03 .chapic_data{ bottom:4rem; }
			.chacamp04 .chapic_data{ bottom:4rem; }

}	

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

          .mainbanner{ padding:.55rem 0 0 0; }

}	

@media screen and (max-width:600px) {	
               
		.twitter_iframe_block{
			width:95%;
			height:32vh;
			max-height:32vh;
		}

}	


@media screen and (max-width:580px) {
	
			/**title*/
			h2.title{ width:67%; }

			ul.newstype_menu{  width:90%; }
			ul.newstype_menu li .l{ display:none; }
			ul.newstype_menu li .s{ display:block; }
			ul.newstype_menu li{ width:48%; height:auto; 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 li a{ background-size:100% auto; }

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

}	


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

			.chacamp01 .chapic_data{ bottom:8rem; }
			.chacamp02 .chapic_data{ bottom:5rem; }
			.chacamp03 .chapic_data{ bottom:3rem; }
			.chacamp04 .chapic_data{ bottom:3rem; }

			ul.main_menu{ width:100%;}

}	


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

	        /*font-size 字級*/
			.news_title{
				font-size:1.25rem;
				line-height:3.0rem;
			}

			.gamecon .text{
				font-size:1.18rem;
				line-height:1.9rem;
				margin:.35rem auto .5rem auto;
			}

			.chacon .text{
				font-size:1.18rem;
				line-height:1.9rem;
			}

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


}	

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

		#home .content{ padding:0 0 5vw 0; } 
		#section1 .content{ padding:0 0 5vw 0; } 
		#section2 .content{ padding:0 0 5vw 0; } 
		#section3 .content{ padding:0 0 11vw 0; } 

		/*campcha_menu*/
		ul.campcha_menu li{ width:4.4rem; }
		ul.campcha_menu li a > img{ width:4.4rem; }

}	



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

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

			/*campcha_menu*/
			ul.campcha_menu li{ width:13.5vw; }
			ul.campcha_menu li a > img{ width:13.5vw; }

}