@charset "utf-8";
/* CSS Document */
@import url("reset.min.1.2.css");
html{width:100%; margin:0; padding:0; background:#000; font-family:Arial, Helvetica, sans-serif; color:#fff;}
body{ width:100%; margin:0; padding:0; overflow-x:hidden; position:relative; }
html,body{ font-size:15px; }
*{ -webkit-box-sizing:border-box; -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{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;}

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

/*============== TOP鈕 ==============*/
#btn_top{ width:10%; max-width:80px;
          background-image: 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:98;
		  }
#btn_top:hover{ cursor:pointer; 
				opacity:1;
				filter:brightness(120%); 
				transition:.5s filter,.5s opacity;
				}

#btn_top:hover{
	background-image: 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%); }
		
		50% { transform:translateY(-2%); } 
			
		100% { transform:translateY(2%); } 
	   
	}

/* 版權copyright *//*///////////////////////////////////////////////////////////////////////////////*/
footer{ width:100%; padding:0rem 0 1.3rem 0;
	    color:#b9c2c1; /*font-family:source-han-sans-traditional;*/ font-weight:200;
	    background-color:#000;
	    border:1px #282828; border-top-style:solid;
	    position:relative; z-index:50;
		}
/*for ie10 、 ie11*/
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
	footer{	font-family:Arial, Helvetica, sans-serif; }
}

.link_con{ width:100%; margin:.4rem 0 0 0; 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:nth-of-type(1),.link_con span:nth-of-type(2){ border:1px #282828; border-right-style:solid; padding:0 12px 0 7px;}

.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:1rem .9rem 3rem .9rem; }
.cr_con{ width:100%;
		display:flex; display:-ms-flexbox; 
		justify-content:center; -ms-flex-pack:center;  
		justify-content:space-between; -ms-flex-pack:justify;
		align-items: flex-end; -ms-flex-align:end; 
	}

.cr_logo{ width:100%; max-width:190px; margin:0 0rem -.5rem 0;}
.cr_logo img{ vertical-align:bottom; padding-bottom:.2rem; image-rendering:-webkit-optimize-contrast;}

.cr_txt p{  text-align:left; }
.cr_txt p img{vertical-align:middle; image-rendering:-webkit-optimize-contrast; height:1.06rem; width:auto;}
.cr_br{ display:none;}

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

			.cr_bottom{ width:67%; padding:1rem .8rem 5rem .8rem;}

}	

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

			.cr_con{ 
				justify-content:center; -ms-flex-pack:center;  
			}
			.cr_logo{
				margin: 0 1.4rem -.5rem 0;
			}

}	

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

			.cr_bottom{ padding:2rem 0 5rem 0; }

			.cr_con{ flex-direction:column; -ms-flex-direction:column;
					align-items:center; -ms-flex-align:center; 
					}

			.cr_logo{
				max-width: 200px;
				margin: 0 0rem 0.5rem 0;
			}

			.cr_txt p{ text-align:center;}

			.cr_txt p img{ width:auto; }
			.cr_txt p:nth-of-type(1) img{ margin-bottom:.5rem; }
			.cr_txt p,.cr_txt p img{ height:3.5vw; max-height:1.2rem; }
}

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

			.cr_bottom{ padding:2.5rem 0 29vw 0; }
			.cr_logo img{ image-rendering:auto; }
			.cr_txt p img{image-rendering:auto;}

}	

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

			.link_con{ font-size:1.1rem; line-height:1.9rem; }	
			.cr_con{width:100%; margin:0 auto 1.7rem auto; text-align:center; }

}

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

			.cr_con{width:100%; margin:0 auto; }

}

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

			footer{ 
				border:1px #424242; border-top-style:solid;
				}

	        .link_con{ border:1px #424242; border-bottom-style:solid; }
			.link_con span:nth-of-type(1){ border:1px #424242; border-right-style:solid; }

			.link_con{ margin: 0.6rem 0 0 0; font-size:1rem; line-height:1.8rem; }
			.link_con span:nth-of-type(2){	border-right-style:none; }
			.link_con > span:nth-of-type(3){ display:block; padding-bottom:.6rem; }
			.link_con > span:nth-of-type(3) a{ display:block;}

			.cr_txt p,.cr_txt p img{ height:3.6vw; }

}


/*內容區/////////////////////////////////////////////////////////////////////////////*/
section{ width:100%; 
	    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);
	   }
/*for ie10 、 ie11*/
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){

	section{ font-family:Arial, Helvetica, sans-serif;}

}
.bg_home_bt, .bg_sec01_bt, .bg_sec02_bt, .bg_sec03_bt, .bg_sec04_bt{width:100%; position:relative; z-index:3; }

section#home{ background:#000; overflow:hidden; position:relative; }

.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;}
.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; }
.bg_sec03_bt{ height:80px; background:url(../images/bg_sec03_bt.png) no-repeat center bottom; }

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

section#section5{  background:url(../images/bg_sec05.jpg) no-repeat center top; position: relative; }

section#section5::before{
				content:" ";
				width:100%; height:80px;
				background-position:center bottom;
				background-size:auto;
				background-repeat:no-repeat;
				background-image:url(../images/bg_sec05_bt.png);
				position:absolute; bottom:0; left:0;
				display:block;	z-index:1;
				pointer-events: none;
				}

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

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

/*============== home ==============*/
#home .content{ max-width:100%;}

/*背景Video*/
.bg_pvpattern{ width:100%; height:100%; position:absolute; left:0; bottom:0;}
.bg_pvmask{ width:100%; height:100%; position:absolute; left:0; bottom:0;  
			background:url(../images/bg_pvmask_home.png) no-repeat  center top; background-size:105% 100%; 
		   }

#video_block{ width:100%; height:100%;
			  display:flex;  display:-ms-flexbox;
			  justify-content:center; -ms-flex-pack:center;
			  align-items:flex-start; -ms-flex-align:start;
			  position:absolute; 
			  top:0; right:0;
			}

iframe#video_iframe{width:1920px; height:1080px; transform:scale(0.84)translateY(-2.5vw);  transform-origin:center top;  }
.bg_pvpattern{ background:url(../images/bg_pvpattern.png); }

.home_con_block{ width:.5px; height:.5px; margin:0 auto; position:relative; z-index:10; }
.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; 
					}

/*.btn_act*/
.btn_act_block{width:100%; max-width:1100px; height:0; margin:0 auto;  position:relative; z-index:9; }

.btn_act{ width:248px; 
	      image-rendering:-webkit-optimize-contrast;
		  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; 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) no-repeat left top; background-size:100% auto; 
		   position:absolute; bottom:0; left:0;
		   }

.btn_act_tt_ov{width:100%; height:100%; opacity:0.01; transition:opacity .5s; position:absolute; top:0; left:0;}
.btn_act:hover .btn_act_tt_ov{background:url(../images/btn_act_tt_ov.png) 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);
		}

	50% {
		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:47.5rem auto .0rem auto; text-align:center; position:relative; }
ul.app_menu li img{ opacity:0.01; }
ul.app_menu li{ width:218px; margin-right:-.3rem; transition:transform .5s; }
ul.app_menu li:hover{ 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; }
ul.app_menu li a:hover{ cursor:pointer; opacity:1; image-rendering:-webkit-optimize-contrast;}


/*social_menu社群*/
ul.social_menu.l{ image-rendering:-webkit-optimize-contrast; position:fixed; right:1%; top:47%; z-index:99;}
ul.social_menu li{ width:65px; margin-bottom:-.5rem; }
ul.social_menu li:last-of-type{ margin-bottom:0; }

ul.social_menu li:nth-of-type(1){ background-image:url(../images/btn_social_fb.png); background-repeat:no-repeat; background-size:100% auto; }
ul.social_menu li:nth-of-type(2){ background-image:url(../images/btn_social_twitter.png); background-repeat:no-repeat; background-size:100% auto; } 
ul.social_menu li:nth-of-type(3){ background-image:url(../images/btn_social_reddit.png); background-repeat:no-repeat; background-size:100% auto; } 
ul.social_menu li:nth-of-type(4){ background-image:url(../images/btn_social_ig.png); background-repeat:no-repeat; background-size:100% auto; } 
ul.social_menu li:nth-of-type(5){ background-image:url(../images/btn_social_yt.png); background-repeat:no-repeat; background-size:100% auto;} 

ul.social_menu li:nth-of-type(1) a{ background-image:url(../images/btn_social_fb_ov.png); }
ul.social_menu li:nth-of-type(2) a{ background-image:url(../images/btn_social_twitter_ov.png); }
ul.social_menu li:nth-of-type(3) a{ background-image:url(../images/btn_social_reddit_ov.png); }
ul.social_menu li:nth-of-type(4) a{ background-image:url(../images/btn_social_ig_ov.png); }
ul.social_menu li:nth-of-type(5) a{ background-image:url(../images/btn_social_yt_ov.png); }

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 > img{ opacity:0; }	
#section1 .title::before{
		background-image:url(../images/title_01.png);
		top:.5rem; right:0px;
		}
#section2 .title > img{ opacity:0; }	
#section2 .title img.l{ margin-bottom:.2rem;  }	
#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; }	
#section5 .title{ z-index:1; }	

/*============== section1 NEWS ==============*/
#section1 .content{ max-width:1700px; padding:.8rem 0 1.5rem 0;}

/*banner活動*/
.banner_block{ width:1066px; height:420px; margin:0 auto; padding:1.9rem 0 0 0;
			  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(-.25rem); position:relative; z-index:5;}
.mainbanner div{ width:100%; height:auto; }

.mainbanner::after{ content:" ";
					width:100%; height:98.5%;
					border:1px solid #fff;
					top:0px;
					right: 0px;
					position:absolute;
					pointer-events: none;
					}

.banner_cha{ position:relative;}
.banner_cha::before{ content:" ";
					 width:192px; height:165px;
					 background:url(../images/banner_cha.png) no-repeat center top;
					 background-size:100% auto;
					 top:-122px;
					 right: 0px;
					 position:absolute;
					}

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


.news_block{ width:921px; margin:0 auto; padding-top:1.8rem; text-shadow:none; position:relative; z-index:3;}

.news_con{ width:100%; height:403px;  background:url(../images/bg_news.png) no-repeat center top; position:relative;}
.news_con .bg_pattern{	display:none; }

.news_cha{ position:relative; }
.news_cha::after, .news_cha::before{
					content:" ";
					background-position:center top; background-size:100% auto; background-repeat:no-repeat;
					position:absolute;
					}
.news_cha::before{  width:173px; height:203px;
					background:url(../images/news_cha.png) no-repeat center top;
					top:191px;
					left:-106px;
					}
/*閃*/
.news_cha::after{
				width:62px; height:105px;
				background:url(../images/news_shine.png) no-repeat center top;
				top:20px;
				right:-34px;
				}	

/*newstype_menu*/
ul.newstype_menu{ width:90%; margin:0 auto; padding:.62rem 0 0 0;  text-align:center; }
ul.newstype_menu li{ width:auto; height:4.4rem; 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:100% auto; }
ul.newstype_menu li:nth-of-type(2){ background-image:url(../images/btn_newstype02.png); background-repeat:no-repeat; background-size:100% auto; } 
ul.newstype_menu li:nth-of-type(3){ background-image:url(../images/btn_newstype03.png); background-repeat:no-repeat; background-size:100% auto; } 
ul.newstype_menu li:nth-of-type(4){ background-image:url(../images/btn_newstype04.png); background-repeat:no-repeat; background-size:100% auto; } 

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:100% auto; 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:211px; 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;
				font-size:1.3rem; line-height:3.3rem; font-weight:600;
				color:#000;
				display:flex;  display:-ms-flexbox; 
				overflow:hidden;
				}
ul.news_list li a{width:100%; display:block;}

/*列表_title*/
.news_title{ width:90%; padding:0 1rem 0 .4rem; }
.news_title a{ overflow:hidden; color:#000; text-decoration:none; text-overflow:ellipsis;/*過長溢出的字省略變...*/ white-space:nowrap;/*不換行*/ }
.news_title a:hover{text-decoration:underline;}

.news_type{ width:10%; height:3.3rem;  padding:0 0 0 .1rem; /*float:left;*/ display:table; }
.news_type > div{ width:100%; height:100%;  
				vertical-align:middle; text-align:left; display:table-cell; /*垂直置中*/
				}
.news_type img{ width:auto; height:30px; margin-bottom:.4rem; vertical-align:middle; image-rendering:-webkit-optimize-contrast;}

.more_block{ width:100%; position:absolute; left:0; bottom:2.95rem; }
.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;}

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

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

.sec02_slogan01 img{ margin-bottom:-.5rem;}

.sec02_cha01,.sec02_cha02{ position:absolute; z-index:-1; }
.sec02_cha01{ top:-2rem;  left:-25.5rem; }
.sec02_cha02{ top:1.3rem; right:-36rem; }
.sec02_cha01 img{width:718px;}
.sec02_cha02 img.l{width:842px; }

.sec02_txt{ margin:0 auto; 
			 text-align:center; 
			 font-size: 1.2rem;
			 line-height: 1.8rem;
			 font-weight:500; 
			 word-wrap:break-word; 
			 text-shadow:0 0 11px rgba(0,0,0, 0.6),0 0 10px rgba(0,0,0, 0.5), 0 0 9px rgba(0,0,0, 0.5), 0 0 8px rgb(0 0 0), 0 0 7px rgb(0, 0, 0), 0 0 5px rgb(0 0 0), 0 0 4px rgb(0 0 0);
			}
.sec02_txt p{ margin:1.1rem 0 1.1rem 0;}
.sec02_txt p span{ display:inline-block;}
.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 CASTS ==============*/
#section3 .content{ padding:1rem 0 2.5rem 0;}

ul.chatype_menu{ width:auto; margin:0 auto; text-align:center;  position:relative;}
ul.chatype_menu li{ width:275px; max-width:275px; margin-right:.95rem; overflow:hidden; display:inline-block; position:relative;}
ul.chatype_menu li > img{ opacity:1;}
ul.chatype_menu li:last-of-type{ margin-right:0rem; }
ul.chatype_menu li a.s, ul.chatype_menu li a.l{ position:absolute; left:0; top:0;}
ul.chatype_menu .btn_out{ width:100%; height:100%; background-color:rgba(0,0,0, 0.3);
							position:absolute; left:0; top:0; 
							opacity:0; transition:opacity .5s;
						}
ul.chatype_menu.hover .btn_out{ opacity:1;}
ul.chatype_menu.hover li:hover .btn_out{ opacity:0;}

ul.chatype_menu .btn_chatype_tt > .btn_ov,
ul.chatype_menu .btn_chatype_cha > .btn_ov,
ul.chatype_menu .btn_chatype_bg > .btn_ov{ width:100%; height:100%; background-position:center top; background-size:100% auto; background-repeat:no-repeat; 
											position:absolute; left:0; top:0; 
											opacity:0; transition:opacity .5s;
										}
ul.chatype_menu li:hover .btn_chatype_tt > .btn_ov,
ul.chatype_menu li:hover .btn_chatype_cha > .btn_ov,
ul.chatype_menu li:hover .btn_chatype_bg > .btn_ov{ opacity:1; }										

ul.chatype_menu .btn_chatype_tt,
ul.chatype_menu .btn_chatype_cha,
ul.chatype_menu .btn_chatype_bg{ width:100%; height:100%; background-position:center top; background-size:100% auto; background-repeat:no-repeat; position:absolute; left:0; top:0; }

ul.chatype_menu li .btn_chatype_cha{ transition:transform .5s; }
ul.chatype_menu li:hover .btn_chatype_cha{ transform:scale(1.02, 1.02);}


ul.chatype_menu li:nth-of-type(1) .btn_chatype_tt{ background-image:url(../images/btn_chatype01_tt.png); }
ul.chatype_menu li:nth-of-type(1) .btn_chatype_cha{ background-image:url(../images/btn_chatype01_cha.png); }
ul.chatype_menu li:nth-of-type(1) .btn_chatype_bg{ background-image:url(../images/btn_chatype01_bg.jpg); }

ul.chatype_menu li:nth-of-type(1) .btn_chatype_tt > .btn_ov{ background-image:url(../images/btn_chatype01_tt_ov.png); }
ul.chatype_menu li:nth-of-type(1) .btn_chatype_cha > .btn_ov{ background-image:url(../images/btn_chatype01_cha_ov.png); }
ul.chatype_menu li:nth-of-type(1) .btn_chatype_bg > .btn_ov{ background-image:url(../images/btn_chatype01_bg_ov.jpg); }

ul.chatype_menu li:nth-of-type(2) .btn_chatype_tt{ background-image:url(../images/btn_chatype02_tt.png); }
ul.chatype_menu li:nth-of-type(2) .btn_chatype_cha{ background-image:url(../images/btn_chatype02_cha.png); }
ul.chatype_menu li:nth-of-type(2) .btn_chatype_bg{ background-image:url(../images/btn_chatype02_bg.jpg); }

ul.chatype_menu li:nth-of-type(2) .btn_chatype_tt > .btn_ov{ background-image:url(../images/btn_chatype02_tt_ov.png); }
ul.chatype_menu li:nth-of-type(2) .btn_chatype_cha > .btn_ov{ background-image:url(../images/btn_chatype02_cha_ov.png); }
ul.chatype_menu li:nth-of-type(2) .btn_chatype_bg > .btn_ov{ background-image:url(../images/btn_chatype02_bg_ov.jpg); }

ul.chatype_menu li:nth-of-type(3) .btn_chatype_tt{ background-image:url(../images/btn_chatype03_tt.png); }
ul.chatype_menu li:nth-of-type(3) .btn_chatype_cha{ background-image:url(../images/btn_chatype03_cha.png); }
ul.chatype_menu li:nth-of-type(3) .btn_chatype_bg{ background-image:url(../images/btn_chatype03_bg.jpg); }

ul.chatype_menu li:nth-of-type(3) .btn_chatype_tt > .btn_ov{ background-image:url(../images/btn_chatype03_tt_ov.png); }
ul.chatype_menu li:nth-of-type(3) .btn_chatype_cha > .btn_ov{ background-image:url(../images/btn_chatype03_cha_ov.png); }
ul.chatype_menu li:nth-of-type(3) .btn_chatype_bg > .btn_ov{ background-image:url(../images/btn_chatype03_bg_ov.jpg); }

.chalist_block{  width:100%; height:100%; opacity:0; position:fixed; left:0; top:0; z-index:0;
	             pointer-events:none;
				}
.chalist_block.show{ animation-name:fadeIn; 
					animation-duration:0.1s;
					animation-delay:0s;
					animation-fill-mode:forwards; 
					z-index:99;
					pointer-events:all;
                   }
.chalist_block .top_block{ width:30vw; max-width:536px; margin:0 auto;  padding-top:1.8vw; image-rendering:-webkit-optimize-contrast; position:relative; z-index:5;}
.cha_list01_block.show h1,
.cha_list02_block.show h1,
.cha_list03_block.show h1{ animation-name:cha_list_ttfadeIn; 
						   animation-duration:0.5s;
						   animation-delay:0.3s;
						   animation-fill-mode:forwards;
					      }

/*title*/
.chalist_block h1{ position:relative;
				   text-align:center;
				   opacity:0; 
				}
.chalist_block h1 .chagroup_icon{ width:5.97vw; max-width:107px; margin:0 auto; opacity:1;}
/*
.cha_list01_block.show h1 .chagroup_icon,
.cha_list02_block.show h1 .chagroup_icon,
.cha_list03_block.show h1 .chagroup_icon{
										animation-name:chagroup_icon_an; 
										animation-duration:1s;
										animation-delay:0s;
										animation-timing-function:ease-in;
										animation-fill-mode:forwards;
										}*/						

@keyframes chagroup_icon_an{

	0%{ opacity:0; transform: rotateY(180deg); }
	40%{ transform: rotateY(0deg); 	}
	70%{ transform: rotateY(180deg); }
	100%{  opacity:1; transform: rotateY(0deg); }

}

.chalist_block h1 .chagroup_tt{ margin:-1.45rem auto 0 auto;
								opacity:1; 
							}
/*							
.cha_list01_block.show h1 .chagroup_tt,
.cha_list02_block.show h1 .chagroup_tt,
.cha_list03_block.show h1 .chagroup_tt{ animation-name:cha_list_ttfadeIn; 
								        animation-duration:0.4s;
								        animation-delay:0.4s;
								        animation-fill-mode:forwards; 
								        }*/

#chalist_block .cha_list01_block.hide h1 .chagroup_tt,
#chalist_block .cha_list02_block.hide h1 .chagroup_tt,
#chalist_block .cha_list03_block.hide h1 .chagroup_tt,								
#chalist_block .cha_list01_block.hide h1 .chagroup_icon,
#chalist_block .cha_list02_block.hide h1 .chagroup_icon,
#chalist_block .cha_list03_block.hide h1 .chagroup_icon{ opacity:1; 
														animation-name:cha_list_ttfadeOut; 
														animation-duration:.8s;
														animation-delay:0s;
														animation-fill-mode:forwards; 
                                                        }

.btn_backhome{ width:5vw; max-width:103px; 
				background-size:100% auto ;
				background-position:center center;
				background-repeat:no-repeat;
				background-image:url(../images/btn_backhome.png); 
				position:absolute; bottom:0.9vw; right:-20vw;
				opacity:0;
				transform:scale(1); transition:transform 0.5s;

			  }
.cha_list01_block.show .btn_backhome, .cha_list02_block.show .btn_backhome, .cha_list03_block.show .btn_backhome{ 
	        opacity:0;
			animation-name:fadeIn; 
			animation-duration:0.5s;
			animation-delay:1.2s;
			animation-fill-mode:forwards; 
             }
 #chalist_block .cha_list01_block.hide .btn_backhome,#chalist_block .cha_list02_block.hide .btn_backhome,#chalist_block .cha_list03_block.hide .btn_backhome{ 
	        opacity:1;
			animation-name:basicfadeOut; 
			animation-duration:0.5s;
			animation-delay:0.5s;
			animation-fill-mode:forwards; 
            }
.btn_backhome a{ width:100%; height:auto; display:block; opacity:0.01; transform:scale(1); transition:opacity 0.5s,transform 0.5s; }
.btn_backhome a:hover{ background-position:center center; background-size:100% auto; background-repeat:no-repeat; opacity:1; }
.btn_backhome img{ opacity:0.01;}
.btn_backhome:hover{ transform:scale(1.06);  }

.cha_list01_block .btn_backhome a:hover{ background-image:url(../images/btn_backhome01_ov.png); }
.cha_list02_block .btn_backhome a:hover{ background-image:url(../images/btn_backhome02_ov.png); }
.cha_list03_block .btn_backhome a:hover{ background-image:url(../images/btn_backhome03_ov.png); }

.cha_list01_block, .cha_list02_block, .cha_list03_block{  width:100%; height:100%;													
															position:absolute; left:0; top:0; 
															opacity:1;
															z-index:-5;
														}
													
.cha_list01_block.show, .cha_list02_block.show, .cha_list03_block.show{ 
	                                                                    opacity:0;
																		animation-name:fadeIn; 
																		animation-duration:1s;
																		animation-delay:0s;
																		animation-fill-mode:forwards; 
																		}


@keyframes cha_listfadeOut{

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

}

@keyframes cha_list_ttfadeIn{

		0%{ opacity:0;  transform:scale(1.25);}
		100%{ opacity:1; transform:scale(1);}

}

@keyframes cha_list_ttfadeOut{

				0%{ opacity:1;
					transform: rotateY(180deg); 
					}

				40%{ transform: rotateY(0deg); }

				70%{ transform: rotateY(180deg); }

				100%{ opacity:0;
					  transform: rotateY(0deg); 
					 }

}

@keyframes basicfadeOut{

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

}

.chalist_block .bg_chalist{  
				width:100%; height:100%;
				background-size:100% auto ;
				background-position:center top;
				background-repeat:no-repeat;
				background-color: #000;
				position:absolute; left:0; top:0;
				opacity:0;
}

.cha_list01_block .bg_chalist{ background-image:url(../images/bg_chalist01.jpg); }
.cha_list02_block .bg_chalist{ background-image:url(../images/bg_chalist02.jpg); }
.cha_list03_block .bg_chalist{ background-image:url(../images/bg_chalist03.jpg); }

.cha_list01_block.show .bg_chalist, .cha_list02_block.show .bg_chalist, .cha_list03_block.show .bg_chalist{ 
	                    opacity:0; 
						animation-name:fadeIn; 
						animation-duration:0.5s;
						animation-delay:0s;
						animation-fill-mode:forwards; 
}

#chalist_block .cha_list01_block.hide .bg_chalist,#chalist_block .cha_list02_block.hide .bg_chalist,#chalist_block .cha_list03_block.hide .bg_chalist{ 
				opacity:1; 
				animation-name:basicfadeOut; 
				animation-duration:.6s;
				animation-delay:0.7s;
				animation-fill-mode:forwards; 
}


ul.cha_list01 li,ul.cha_list02 li,ul.cha_list03 li{ transform:scale(1); transition:transform 0.8s; image-rendering:-webkit-optimize-contrast;}
ul.cha_list01 li:hover,ul.cha_list02 li:hover,ul.cha_list03 li:hover{ transform:scale(1.03); }

ul.cha_list01, ul.cha_list02, ul.cha_list03{ width:100%; margin:0 auto;  
											 text-align: center;
											 position:relative; 
											 opacity:0;
											}
ul.cha_list01{ margin-top:-3.2rem; }
ul.cha_list02{ margin-top:-.3rem; }
ul.cha_list03{ margin-top:-2rem; }											
.cha_list01_block.show ul.cha_list01,
.cha_list02_block.show ul.cha_list02,
.cha_list03_block.show ul.cha_list03{
	                                opacity:0; 
									animation-name:cha_listfadeIn; 
									animation-duration:.5s;
									animation-delay:0.55s;
									animation-fill-mode:forwards;  
                                    }
#chalist_block .cha_list01_block.hide ul.cha_list01,
#chalist_block .cha_list02_block.hide ul.cha_list02,
#chalist_block .cha_list03_block.hide ul.cha_list03{   
													opacity:1;
													animation-name:cha_listfadeOut; 
													animation-duration:0.5s;
													animation-delay:0.3s;
													animation-fill-mode:forwards; 
												}

@keyframes cha_listfadeIn{

	0%{ opacity:0;  transform:scale(1.25);}
	100%{ opacity:1; transform:scale(1);}

}

ul.cha_list01 li, ul.cha_list02 li, ul.cha_list03 li{ 
													background-size:100% auto ;
													background-position:center center;
													background-repeat:no-repeat;
													display:inline-block;
													position:relative; z-index:0;
												   }
ul.cha_list01 .btn_ov, ul.cha_list02 .btn_ov, ul.cha_list03 .btn_ov{ width:100%; height:100%; opacity:0.01; transition:opacity 0.6s;
																	background-size:100% auto ;
																	background-position:center top;
																	background-repeat:no-repeat;
																	position:absolute; top: 0; left:0; z-index:-1;
																	}

ul.cha_list01 img.l, ul.cha_list02 img.l, ul.cha_list03 img.l{ opacity:0.01; position:relative; z-index:-2;}

ul.cha_list01 li:hover .btn_ov, ul.cha_list01.hover .btn_ov,
ul.cha_list02 li:hover .btn_ov, ul.cha_list02.hover .btn_ov,
ul.cha_list03 li:hover .btn_ov, ul.cha_list03.hover .btn_ov{ opacity:1; }

.chalist_block a.s, .chalist_block a.l{ position:absolute; left:0; top:0;}

/*cha_list01 七大罪*/
ul.cha_list01 li:nth-of-type(1){ width:24vw; max-width:474px; margin:0rem -8vw -1vw -11vw; z-index:2;}
ul.cha_list01 li:nth-of-type(2){ width:21.5vw; max-width:424px; margin:0vw -11vw 2vw 0; z-index:1;}
ul.cha_list01 li:nth-of-type(3){ width:26vw; max-width:553px; margin:0rem -13vw 3vw 0; }
ul.cha_list01 li:nth-of-type(4){ width:17.5vw; max-width:351px;  margin: 0rem -10vw 3vw 0; z-index:5;}
ul.cha_list01 li:nth-of-type(5){ width:25vw; max-width:477px; margin:0 -14.5vw -4vw 0; z-index:2;}
ul.cha_list01 li:nth-of-type(6){ width:29vw; max-width:575px; margin: 0rem -10.5vw 4.5vw 0; z-index:1;}
ul.cha_list01 li:nth-of-type(7){ width:21vw; max-width:394px; margin:0rem -11vw -3vw 0; z-index:3;}

ul.cha_list01 li:nth-of-type(1){ background-image:url(../images/btn_chapink01.png);}
ul.cha_list01 li:nth-of-type(2){ background-image:url(../images/btn_chapink02.png);}
ul.cha_list01 li:nth-of-type(3){ background-image:url(../images/btn_chapink03.png);}
ul.cha_list01 li:nth-of-type(4){ background-image:url(../images/btn_chapink04.png);}
ul.cha_list01 li:nth-of-type(5){ background-image:url(../images/btn_chapink05.png);}
ul.cha_list01 li:nth-of-type(6){ background-image:url(../images/btn_chapink06.png);}
ul.cha_list01 li:nth-of-type(7){ background-image:url(../images/btn_chapink07.png);}

ul.cha_list01 li:nth-of-type(1) .btn_ov{ background-image:url(../images/btn_chapink01_ov.png);}
ul.cha_list01 li:nth-of-type(2) .btn_ov{ background-image:url(../images/btn_chapink02_ov.png);}
ul.cha_list01 li:nth-of-type(3) .btn_ov{ background-image:url(../images/btn_chapink03_ov.png);}
ul.cha_list01 li:nth-of-type(4) .btn_ov{ background-image:url(../images/btn_chapink04_ov.png);}
ul.cha_list01 li:nth-of-type(5) .btn_ov{ background-image:url(../images/btn_chapink05_ov.png);}
ul.cha_list01 li:nth-of-type(6) .btn_ov{ background-image:url(../images/btn_chapink06_ov.png);}
ul.cha_list01 li:nth-of-type(7) .btn_ov{ background-image:url(../images/btn_chapink07_ov.png);}

/*cha_list02 七美德*/
ul.cha_list02 li:nth-of-type(1){ width:28.0vw; max-width:564px; margin:0 -15.7vw 0vw -3.95vw; }
ul.cha_list02 li:nth-of-type(2){ width:17.2vw; max-width:343px; margin:0 -7.5vw 3vw 0; z-index:1;}
ul.cha_list02 li:nth-of-type(3){ width:23.5vw; max-width:465px; margin:0 -2.9vw 0vw 0; }
ul.cha_list02 li:nth-of-type(4){ width:16vw; max-width:326px; margin:0 -5.5vw .6vw 0; z-index:5;}
ul.cha_list02 li:nth-of-type(5){ width:19vw; max-width:383px; margin:0 -7.5vw 2vw 0; }
ul.cha_list02 li:nth-of-type(6){ width:17.6vw; max-width:337px; margin:0 -6.4vw 1.8vw 0; z-index:1;}
ul.cha_list02 li:nth-of-type(7){ width:21.2vw; max-width:408px; margin:0 -3.95vw 0.5vw 0; }

ul.cha_list02 li:nth-of-type(1){ background-image:url(../images/btn_chayellow01.png);}
ul.cha_list02 li:nth-of-type(2){ background-image:url(../images/btn_chayellow02.png);}
ul.cha_list02 li:nth-of-type(3){ background-image:url(../images/btn_chayellow03.png);}
ul.cha_list02 li:nth-of-type(4){ background-image:url(../images/btn_chayellow04.png);}
ul.cha_list02 li:nth-of-type(5){ background-image:url(../images/btn_chayellow05.png);}
ul.cha_list02 li:nth-of-type(6){ background-image:url(../images/btn_chayellow06.png);}
ul.cha_list02 li:nth-of-type(7){ background-image:url(../images/btn_chayellow07.png);}

ul.cha_list02 li:nth-of-type(1) .btn_ov{ background-image:url(../images/btn_chayellow01_ov.png);}
ul.cha_list02 li:nth-of-type(2) .btn_ov{ background-image:url(../images/btn_chayellow02_ov.png);}
ul.cha_list02 li:nth-of-type(3) .btn_ov{ background-image:url(../images/btn_chayellow03_ov.png);}
ul.cha_list02 li:nth-of-type(4) .btn_ov{ background-image:url(../images/btn_chayellow04_ov.png);}
ul.cha_list02 li:nth-of-type(5) .btn_ov{ background-image:url(../images/btn_chayellow05_ov.png);}
ul.cha_list02 li:nth-of-type(6) .btn_ov{ background-image:url(../images/btn_chayellow06_ov.png);}
ul.cha_list02 li:nth-of-type(7) .btn_ov{ background-image:url(../images/btn_chayellow07_ov.png);}

/*cha_list03 異端之罪*/
ul.cha_list03 li:nth-of-type(1){ width:24.0vw; max-width:467px; margin:0 -1.8vw 0vw -1.5vw; }
ul.cha_list03 li:nth-of-type(2){ width:20.7vw; max-width:399px; margin:0 0vw 3vw 0; z-index:1;}

ul.cha_list03 li:nth-of-type(1){ background-image:url(../images/btn_chapurple01.png);}
ul.cha_list03 li:nth-of-type(2){ background-image:url(../images/btn_chapurple02.png);}

ul.cha_list03 li:nth-of-type(1) .btn_ov{ background-image:url(../images/btn_chapurple01_ov.png);}
ul.cha_list03 li:nth-of-type(2) .btn_ov{ background-image:url(../images/btn_chapurple02_ov.png);}


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

/*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::after{ content:" ";
					width:100%; height:98.8%;
					border:1px solid #fff;
					top:0px;
					right: 0px;
					position:absolute;
					pointer-events: none;
                   }			
			  
.pic_carousel div{width:100%; height:auto;  image-rendering:-webkit-optimize-contrast; }

.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 VIDEO ==============*/
#section5 .content{ max-width:1500px; padding-top:1rem; padding-bottom:1rem; position:relative; z-index:0;}
#section5 .con_block{ width:100%; z-index:0;}

.sec05_slogan{ width:100%; max-width:754px; margin:0 auto; position:relative; z-index:1; }

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

.tv_block{ width:100%; max-width:1711px; margin:0 auto; text-align:center;  }
.tv_block > img{ margin:-13.5vw -5vw -10.1vw -5vw; image-rendering:-webkit-optimize-contrast; position: relative; z-index:-1;}

#btn_tv01{ width:100%; position:absolute; left:0;  top:46%;	}
.btn_tv{ width:183px;  margin:0 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;}



/*============== section6  COMMUNITY ==============*/
#section6 .con_block{ width:933px; max-width:933px; margin:0 auto; padding-top:1rem;
						display:flex;  display:-ms-flexbox;
						justify-content:center; -ms-flex-pack:center;
						position:relative;  z-index:5;
					}

/*社群標題*/
.title_sub{ width:289px; margin:.5rem auto -.25rem auto; }
.instagram_block .title_sub{ margin-bottom:-.31rem; }

.fb_con,.twitter_con,.instagram_con{ width:100%; 
									background-position:center top;
									background-size: 100% auto;
									background-repeat: no-repeat;
									}
.fb_block{ width:532px; max-width:532px; margin-right:1.5rem; }

.fb_con{ height:902px; 
		padding:0.95rem 0 0 0rem;
		background-image:url(../images/bg_fb.png);
		}
.fb_iframe_block{ width:94%; max-width:495px; height:860px; margin:0 auto; border-width:1px; border-color:#fff; position:relative; z-index:50;}	 
.facebook_iframe{width:100%; border:none; border-width:1px; border-color:#fff; margin:0 auto;}					
.facebook_iframe2{width:100%; border:none; border-width:1px; border-color:#fff; margin:0 auto;}		
.fb-page{ width:100%; height:100%; }

.community_lt{ margin-left:0rem; }
.twitter_block,.instagram_block{ margin:0 auto; }

.twitter_block{ width:356px; max-width:356px; }
.twitter_con{ height:414px; 
			padding:0.9rem 0 0 .55rem;
			background-image:url(../images/bg_twitter.png);
			}
.twitter_iframe_block{ width:94%; max-width:320px; height:376px; 
						margin:0 auto; 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%;  }


.instagram_block{ width:352px; max-width:352px; padding-top:.2rem; }
.instagram_con{ height:415px; 
	            padding: 1.01rem 0 0 1.40rem;
				background-image:url(../images/bg_instagram.png);
				position: relative;
				}
.instagram_iframe{ width:75vw; max-width:320px; height:74vw; max-height:374px; margin:0 auto ;  }		
.instagram_pic{ display:none; }		


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

				iframe#video_iframe{ width:110vw; max-width:1920px; height:50vw; max-height:1080px; }
				.bg_pvmask{	background-size:125% 100%; }
				iframe#video_iframe{ width:130vw; transform:scale(1.1)translateY(-2.5vw); }
				ul.app_menu{ margin:43.5vw auto .0rem auto; }

}

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

				/*.btn_act*/
				.btn_act{ right:-.8rem; }
				#btn_top{ right:0vw; bottom:1%; } 

}	

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

				.bg_pvmask{ background-size:130% 100%;	}
				iframe#video_iframe{ transform: scale(1.25); }
				ul.app_menu{ margin:53vw auto .0rem auto;  }

}	

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


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

				.mainbanner{ width:96%; max-width:900px; height:auto; }

				.banner_cha::before{ width:17.5%; max-width:206px; height:222px;
									background:url(../images/banner_cha_s.png) no-repeat center top; 
									background-size:100% auto ;
									top: -124px;
									left: auto;
									right: 8vw;
									}
				.news_block{ width:90%; max-width:921px; padding-top:2.4rem;}

				.news_con{ margin:0 auto; background-size:100% 100%; }		

				.news_cha{	display:none; }

				/*============== section2 STORY ==============*/
				#section2 .title::before{ top:.6rem; }
				.sec02_slogan01 .l,.sec02_slogan02 .l{ display:none; }
				.sec02_slogan01 .s,.sec02_slogan02 .s{ display:block; }
				.sec02_slogan02{ width:64%; }
				.sec02_slogan01{ width:62%; }
				.sec02_slogan01{ max-width:884px;}
				.sec02_slogan02{ max-width:884px;}
				
				.sec02_txt br{ display:none;}
				.sec02_txt{ width:58%; }

				.sec02_cha01{
					top: -3.5rem;
					left: -20.5rem;
				}
				.sec02_cha01 img{
					transform: scale(.84);
				}

				.sec02_cha02{
					top: 0rem;
                    right: -30rem;
				}

				.sec02_cha02 img.l{
					transform: scale(.85);
				}


				/*============== section5 VIDEO ==============*/
				.tv_block > img{
					transform: scale(1.15);
					margin: -15vw auto -5vw auto; 
				}

}	



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

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

				ul.app_menu{
					margin: 52vw auto .0rem auto;
				}

				/*pic_block遊戲特色*/
				.pic_block{ width:93.6%; max-width:805px; height:auto; 
							padding:1.5vw 0 2.5vw 0.6vw;
							background:url(../images/bg_gamepic_s.png) no-repeat center center; background-size:100% 100%;
							}
				.pic_carousel{ width:95%; max-width:768px; }	

				.pic_cha::after{display:none;}
				.pic_cha::before{ right:3px; }
				.pic_carousel::after{ height:98.9%; }

 }


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

				ul.chatype_menu{ width:90%; }
				ul.chatype_menu li{	width:30%; }

                /*============== section6  COMMUNITY ==============*/
				#section6 .con_block{ transform:scale(0.95); transform-origin:top center; }

}


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

				/*背景Video*/
				.bg_pvpattern{display:none;}
				.bg_pvmask{display:none;}

				#video_block{ display:none;}
				section#home{ background:url(../images/bg_home_m.jpg) no-repeat center top; background-size:100% auto;}

				ul.app_menu{ margin:66vw auto .0rem auto;}

}	


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

				ul.social_menu.l{display:none;}

				ul.social_menu.s{ width:30%; top:-.2rem; right:.5rem; display:flex; display:-ms-flexbox; justify-content:flex-end; -ms-flex-pack:end; position:absolute;}
				ul.social_menu li{ width:25%; max-width:120px; margin-bottom:0; margin-right:-.25rem; }
				ul.social_menu li:last-of-type{ margin-right:0; }

 }

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

                /*============== section6  COMMUNITY ==============*/
				#section6 .con_block{ transform:scale(0.93); }

}

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

				/*============== section6  COMMUNITY ==============*/
				#section6 .con_block{ transform:scale(0.90)translateX(-2.2vw); }

}


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

				/*============== section5 VIDEO ==============*/
				#section5 .con_block{ margin:0 auto; }

}


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

				#btn_top{ width:0; background:none; right:-.8vw; bottom:-.8vw; }  
				.btn_act{ animation-name:basicfadeOut;
						  animation-duration:0.5s;
						  animation-delay:0s;
						  animation-fill-mode:forwards;
						  pointer-events:none;
						 }
				.btn_act.show{ animation-name:fadeIn; 
							   animation-duration:0.5s;
							   animation-delay:0s;
							   animation-fill-mode:forwards;
							   pointer-events:all;
				              }

				.main{ overflow:hidden; }
				section{ overflow:hidden; }
				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{ background:url(../images/bg_sec04_s.jpg) no-repeat center top; background-size:100% auto; position:relative;}
				section#section5{ background:url(../images/bg_sec05_s.jpg) no-repeat center top; background-size:100% auto;}
				section#section6{ background:url(../images/bg_sec06_s.jpg) no-repeat center top; background-size:100% auto;}

				#section4::after{
					content:" ";
					width:100%; height:500vh;
					background-image:url(../images/bg_sec04_s.jpg);
					background-position:center top;
					background-size:100% auto;
					background-repeat:no-repeat;
					top:0; left:0;
					position:absolute; z-index:-1;
					display:block;
					}

				.bg_home_bt, .bg_sec01_bt, .bg_sec02_bt, .bg_sec03_bt, .bg_sec04_bt{ height:auto; background:none; }
				.bg_home_bt .s,.bg_sec01_bt .s,.bg_sec02_bt .s,.bg_sec03_bt .s, .bg_sec04_bt .s{ display:block; }
				
				section#section5::before{ background-image:url(../images/bg_sec05_bt_s.png);
										background-size:100% auto;
										}

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

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

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

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

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

				/*======= home =======*/
				#home .content{ padding:0 0 1.2rem 0;}
				/*.btn_act*/
				.btn_act{ width:42.5%; max-width:248px; image-rendering:auto; right:-.8rem; bottom:-0.5rem; }

				/*app_menu*/
				ul.app_menu{width:96%; margin:110vw auto 0rem auto; }
				ul.app_menu li{ width:48%; max-width:280px; }
				ul.app_menu li a:hover{ image-rendering:auto; }

				ul.social_menu.s{ width:40%; }

				/*======= Section1 NEWS =======*/
				#section1 .content{ padding:.7rem 0 .5rem 0;}

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

				.mainbanner{ width:95.8%; transform:translateX(-.2vw); }
				.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:206px; height:auto; left:auto; top:-.1rem; right:3.9vw; }


				ul.news_list li a{ width:97%; }

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

				.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;
				         }

				ul.news_list{ padding: 0 0 5rem 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;
				}

				.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;}

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

				.news_con .bg_pattern{
					width:100%; height:100% ;
					background-image:url(../images/bg_news_pattern_s.png);
					background-position:right bottom; 
					background-size:97% auto; 
					background-repeat:no-repeat;
					position:absolute;
					bottom: 1.85vw;
					right: 1.38vw; z-index:0;
					display: block;
				}

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

				.sec02_txt{ width:78%; }

				.sec02_cha01{ display:none; }
				.sec02_cha02{ width:100%; max-width:965px; height:auto; position:relative; top:auto; right:auto; }
				.sec02_cha02 img{ margin-top:-7.5rem; margin-bottom:-2.5rem; position:relative; z-index:0;}
				.sec02_cha02 .l{ display:none;}
				.sec02_cha02 .s{ display:block; }

				/*======= Section3 CASTS =======*/
				#section3 .content{ padding:1.2rem 0 2.7rem 0; }

				.chalist_block .top_block{ display:none; }
				ul.cha_list01 .btn_ov, ul.cha_list02 .btn_ov, ul.cha_list03 .btn_ov{ display:none; }
				ul.cha_list01 img.l, ul.cha_list02 img.l, ul.cha_list03 img.l{ display:none; }
				.chalist_block a.l{ display:none; }
				.chalist_block a.s{ display:block; }
				#wrapper ul.cha_list01 li,#wrapper ul.cha_list02 li,#wrapper ul.cha_list03 li{ background-image:none;}
				.cha_list01_block{ background-image:none; }
				.cha_list02_block{ background-image:none; }
				.cha_list03_block{ background-image:none; }

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

				ul.chatype_menu{ width:82.4%; }
				ul.chatype_menu li{ width:100%; max-width:850px; margin-right:0rem; margin-bottom:.95rem;  display:block; }
				ul.chatype_menu li:last-of-type{ margin-bottom:0rem; }

				ul.chatype_menu li:nth-of-type(1) .btn_chatype_tt{ background-image:url(../images/btn_chatype01_tt_s.png); }
				ul.chatype_menu li:nth-of-type(1) .btn_chatype_cha{ background-image:url(../images/btn_chatype01_cha_s.png); }
				ul.chatype_menu li:nth-of-type(1) .btn_chatype_bg{ background-image:url(../images/btn_chatype01_bg_s.jpg); }

				ul.chatype_menu li:nth-of-type(1) .btn_chatype_tt > .btn_ov{ background-image:url(../images/btn_chatype01_tt_s_ov.png); }
				ul.chatype_menu li:nth-of-type(1) .btn_chatype_cha > .btn_ov{ background-image:url(../images/btn_chatype01_cha_s_ov.png); }
				ul.chatype_menu li:nth-of-type(1) .btn_chatype_bg > .btn_ov{ background-image:url(../images/btn_chatype01_bg_s_ov.jpg); }

				ul.chatype_menu li:nth-of-type(2) .btn_chatype_tt{ background-image:url(../images/btn_chatype02_tt_s.png); }
				ul.chatype_menu li:nth-of-type(2) .btn_chatype_cha{ background-image:url(../images/btn_chatype02_cha_s.png); }
				ul.chatype_menu li:nth-of-type(2) .btn_chatype_bg{ background-image:url(../images/btn_chatype02_bg_s.jpg); }

				ul.chatype_menu li:nth-of-type(2) .btn_chatype_tt > .btn_ov{ background-image:url(../images/btn_chatype02_tt_s_ov.png); }
				ul.chatype_menu li:nth-of-type(2) .btn_chatype_cha > .btn_ov{ background-image:url(../images/btn_chatype02_cha_s_ov.png); }
				ul.chatype_menu li:nth-of-type(2) .btn_chatype_bg > .btn_ov{ background-image:url(../images/btn_chatype02_bg_s_ov.jpg); }

				ul.chatype_menu li:nth-of-type(3) .btn_chatype_tt{ background-image:url(../images/btn_chatype03_tt_s.png); }
				ul.chatype_menu li:nth-of-type(3) .btn_chatype_cha{ background-image:url(../images/btn_chatype03_cha_s.png); }
				ul.chatype_menu li:nth-of-type(3) .btn_chatype_bg{ background-image:url(../images/btn_chatype03_bg_s.jpg); }

				ul.chatype_menu li:nth-of-type(3) .btn_chatype_tt > .btn_ov{ background-image:url(../images/btn_chatype03_tt_s_ov.png); }
				ul.chatype_menu li:nth-of-type(3) .btn_chatype_cha > .btn_ov{ background-image:url(../images/btn_chatype03_cha_s_ov.png); }
				ul.chatype_menu li:nth-of-type(3) .btn_chatype_bg > .btn_ov{ background-image:url(../images/btn_chatype03_bg_s_ov.jpg); }


				/*======= Section4 FEATURES =======*/
				.pic_cha::before{ display:none;	}

			    .pic_carousel div{ image-rendering:auto; }
				.pic_block{ padding:1.8vw 0 3.2vw 0.7vw; }


				/*============== section5 VIDEO ==============*/
				.sec05_slogan { width:90%; max-width:889px; margin:0 auto; }
				.sec05_slogan .l{ display:none;	}
				.sec05_slogan .s{ display:block; }

				.tv_block > img{
					transform:scale(1.31);
					margin: -7.8vw auto -3vw auto; 
					image-rendering:auto; 
				}
				#btn_tv01{ top:48%; }

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


				/*============== section6 COMMUNITY ==============*/
				#section6 .con_block{ width:100%; padding-top:1rem; transform:scale(1); display:block;	}

				.title_sub{	width:65%; max-width:655px;	}
				.title_sub .l{ display:none; }
				.title_sub .s{ display:block; }

				.fb_con{
					height:620px;  
					padding: 1.15rem 0 0rem .55rem;
				}

				.fb_iframe_block{
					width:95%;
					max-width:500px;
					height:574px;
					max-height:574px;
				}

				.fb_con{ background-image:url(../images/bg_fb_s.png);
						background-size:100% 100%;
						}

				.fb_block, .twitter_block, .instagram_block{ width:75%; max-width:510px; margin:0 auto; }
				.twitter_block{ padding-top:.5rem; }
				.instagram_block{ padding-top:.8rem; }

				.community_lt{ width:100%;}

				.twitter_con{ 
					        height:614px;  
							padding: 1.1rem 0 0 .55rem;
							background-image:url(../images/bg_twitter_s.png);
							background-size:100% 100%;
							}
				.instagram_con{ 
					        height: 36.5rem;
					        padding: 2.01vw 0vw 0.01vw 4vw;
							background-image:url(../images/bg_instagram_s.png);
							}

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

				.instagram_iframe{
							width: 97.6%;
							max-width: none;
							height: 97.6%;
							max-height: none;
							}	

}



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

			    .mainbanner::after{ height:97.5%;	}
		
				/*======= Section1 NEWS =======*/
				/*newstype_menu*/
				ul.newstype_menu { width:90%; }

				ul.newstype_menu li { height:10.7vw; max-height:5.6rem; }
				ul.newstype_menu li:nth-of-type(1),
				ul.newstype_menu li:nth-of-type(2){ margin-bottom:-.6rem; } 
				ul.newstype_menu li .l{ display:none; }
				ul.newstype_menu li .s{ display:block; }

				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); }


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

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


				/*======= Section4 FEATURES =======*/
				#section4 .title{ z-index:0; }

}	

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

	           /*============== section6 COMMUNITY ==============*/
			   .instagram_con{ height:80.5vw; padding: 2.01vw 0vw 2.05vw 4vw; background-size: 100% 100%; }

}

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

				ul.social_menu.s{ width:43%; }
				/*.btn_act*/
				.btn_act{width:40%; }

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

				/*======= Section1 NEWS =======*/
				/*newstype_menu*/
				ul.newstype_menu li{ height:11.7vw; }
				ul.news_list li a{ width:92.2%; }

				/*======= Section2 STORY =======*/
				.sec02_txt{ width:86%; font-size:1.1rem; line-height:1.9rem; font-weight:300;}
				
				.sec02_cha02 img{ margin-top:-4.5rem; margin-bottom:-2.06rem;}

}	

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

				/*======= Section1 NEWS =======*/
				.banner_cha_s{ right:5.9vw; }

				/*======= Section1 NEWS =======*/
				.btn_more{ width:35%;}


}	

@media screen and (max-width:580px) {
	
				ul.social_menu.s{ width:54.5%; }

				/*======= Section1 NEWS =======*/
				.banner_block{	width:96%; }
				.news_block{ width:96%; padding-top:2.8rem;}
				/*newstype_menu*/
				ul.newstype_menu li{ height:12.7vw; }

                /*============== section3 CASTS ==============*/
				ul.chatype_menu{ width:92.2%; }

}	

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

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

				/*======= Section2 STORY =======*/
				.sec02_txt{ width:90.6%; font-size:.9rem;  line-height:1.5rem; font-weight:200;}
				.sec02_txt p{
					margin: .8rem 0 .8rem 0;
				}
				.sec02_txt p:first-of-type{
					margin: 1.05rem 0 .8rem 0;
				}
				.sec02_txt p:last-of-type{
					margin: .8rem 0 .8rem 0;
				}

				.sec02_cha02 img{ margin-top:-13.5vw; }

				/*======= Section1 NEWS =======*/
				ul.newstype_menu{ width:100%; }


				/*============== section5 VIDEO ==============*/
				.sec05_slogan{	width:100%;	}

				/*======= Section4 FEATURES =======*/
				.pic_block{ padding:1.85vw 0 2.55vw 2.5vw; }
				.pic_carousel{
					width: 96%;
				}
				.pic_carousel::after{
					height: 97.5%;
				}



				/*============== section6 COMMUNITY ==============*/
				section#section6{ padding-bottom:3.3rem; }

				.fb_con{ height: 100vw; max-height:500px; padding: 3vw 0 0.5vw .45rem; }

				.fb_block, .twitter_block, .instagram_block{ width:96%;}

				.fb_iframe_block{
					height:91.5vw;
					max-height: 470px;
				}

				.twitter_con{ height:100vw;  max-height:500px; padding:3vw 0 0 .55rem;  }

				.twitter_iframe_block{
					   height:91.8vw;
						max-height: 470px;
				}

				.instagram_con{ height:107vw; }

}	

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


				/*======= Section2 STORY =======*/
				.sec02_txt{	font-size:1rem; line-height:1.72rem; }

				section#section2{ 
					
					background-size:100% 100%;
					
					}

				/*======= Section1 NEWS =======*/
				ul.newstype_menu{ margin-bottom:-.75rem; }

				/*列表*/
				ul.news_list{ width:90%; padding:0 0 .8rem 0; }
				ul.news_list li{width:100%; margin-top:-.4rem;  padding:0rem .5rem .25rem .5rem; 
								display:block;  
								}

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

				.news_type{ width:100%; height:1.7rem; line-height:2.9rem; padding:0; }
				.news_type img{ margin-bottom:-.75rem; }
				.news_type img{ height:1.85rem; }

				.news_con .bg_pattern{ bottom:5.2vw; right:2.45vw; }
				.news_con{ padding-bottom:20.4vw; }

				.more_block{ bottom:8.35vw; }

				/*============== section6 COMMUNITY ==============*/
				.instagram_con{ height:108vw; }

}	


@media screen and (max-width:466px) {
	
				.mainbanner::after{
					height:96.5%;
				}


}