@charset "utf-8";
/* CSS Document */
@import url("reset.min.1.2.css");
*{margin:0; padding:0;
  -webkit-box-sizing:border-box; /*Safari Chrome*/
  -moz-box-sizing:border-box; /*Firefox*/
  box-sizing:border-box;
  /* image-rendering:-moz-crisp-edges;          Firefox        */
  image-rendering:-o-crisp-edges;            /* Opera          */
  image-rendering:-webkit-optimize-contrast; /* Safari         */
  image-rendering:optimize-contrast;         /* CSS3 Proposed  */
  -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}
/**{outline: 1px solid red;}*/
html,body{ overflow-x: hidden;}
html{width:100%; font-size:14px;}
body{ width:100%; background:#000; color:#fff; overflow-x: hidden;
	font-family:'Microsoft JhengHei','微軟正黑體',Arial,Helvetica,sans-serif,'Maven Pro','Droid Sans','Myriad Pro','Helvetica','Verdana','Geneva';
}
/* div{ font-size:1rem; } */

.wrapper img,.wrapper2 img{ width:100%; height:auto; font-size: 0;}
p{ text-indent: 2rem; text-align: left; padding: .5rem 0; }
a{ width:100%; height:auto; display: block;  transition:all 0.3s ease-out; /*chrome*/-webkit-transition:all 0.3s ease-out; /*firefox*/-moz-transition:all 0.3s ease-out;}
a:hover{ cursor:pointer;}
#particles-js,#particles-purple{width:100vw; height:100vh; background-size:cover; position:fixed; left:0; top:0; z-index:0; pointer-events:none;}

/*.hold{animation-play-state: paused;}/*在影片播放時都先暫停入場動畫，直到按下關閉全螢幕按鈕才開始入場*/*/

/*span{display: inline-block;}*/
:focus { outline:none; }/*去除藍框
input,button,select,textarea{ outline:none }/*去除藍框*/
/*像素比例尺*/
.ruler{ height:18px;  background:url(../images/ruler.png) no-repeat left top; background-size: cover; position: fixed; top:0; right:0; bottom:0; left:0; z-index:9999; display:none;}
.clear{ height:0; clear:both; font-size:0em!important;}
/*---debug---*/
/**{outline: 1px solid red;}*/

html or element selector {
    -webkit-text-size-adjust: 100%;
}
/*背景設定*/
.wrapper img,.wrapper2 img{ width:100%; height:auto; font-size: 0;}

.wrapper{width: 100%; height: auto; margin: 0 auto; padding-top:1vh; /*min-width: 320px;*/
	background-image:url(../images/bg_l.png),url(../images/bg2.png);
	background-repeat: no-repeat,repeat-y;
	background-position: center top,center top;
	background-size: 100% auto,100% auto;
	 overflow: hidden; position: relative;
   }

.all{width:100%; max-width: 2000px; margin:0 auto; position: relative; z-index:2;}

/*top區塊*/
.top_box{ width: 100%; margin: 0 auto;}
.top_block{width: 100%; height: auto; margin: 0 auto; position:relative; z-index: 10;}
.top_menu_block{width:100%;}

/*top官網粉絲團按鈕*/
ul.top_menu {
	padding: .3rem .3rem;
	background-color: #2f0d00b3;
	border-radius: 45px;
	border: 1px solid #e9dea7;
	color: rgb(223, 187, 128);
	text-align: center;
	position:absolute;
	display: flex;
	justify-content: center;
	top: .6rem;
	right: 20%;
	z-index: 999; 
	transition:all 0.2s ease-out; /*chrome*/-webkit-transition:all 0.2s ease-out; /*firefox*/-moz-transition:all 0.2s ease-out;
}
ul.top_menu li{ margin:.3rem 0 .4rem 0; padding:0 .5rem 0 .5rem; border-right:1px solid #f5f2e4;;  
	   font-weight:400; line-height:1.1rem; font-size:1.2rem; 
	   text-shadow:0px 1px 1px #000;
	  }

ul.top_menu li:last-of-type{ border:0; }
ul.top_menu li a { color:#f5f2e4; display:inline-block; padding: 0 .4rem 0 .4rem;
}

/*----LOGO按鈕----*/
.btn_logo{width:20%; max-width:276px; margin: 0 auto; position: relative; top:.5rem; z-index:999; }
.btn_logo a{ z-index: 2; position: relative;}
.btn_logo img{ width:100%; height:auto; position:relative; top:0%;
	transition:all 0.2s ease-out; /*chrome*/-webkit-transition:all 0.2s ease-out; /*firefox*/-moz-transition:all 0.2s ease-out;}
/*角色*/
.role_box{width:100%; height: auto; max-width: 1980px;;margin: 0 auto; position: relative; z-index:3;}
.role_box div{ position: absolute;}
.role_01{width: 75%; max-width:1491px; transform: translate(-1%,-5%); z-index:3;}
.role_02{width: 72%; max-width:1439px; transform: translate(65%,5%); z-index:2;}
.role_03{width: 49%; max-width:983px; transform: translate(85%,-27%); z-index:1;}

/*----大標題----*/
.headline_box{
	width:100%; max-width:1989px; position: relative;
	 margin:10% auto 0; z-index:999;
	 transition-delay:0.4s; 
	 animation:1s bigfadein ease-out; 
}
	@keyframes bigfadein {
		from {
			opacity: 0;
			transform: scale(1.5);
		}
	
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
	
.headline_l,.headline_s{
	width: 100%;
	transition-delay:5s; 
	animation:3s updown infinite ease-out; 
}
.headline_s{display: none;}

@keyframes updown{
	0%,100% {transform: translateY(0px);
		transform-origin: center bottom;}			
	50% {transform: translateY(-5px);filter:brightness(125%)} 
}

.headline_l .filter {z-index: 2; position: relative; background-image:url(../images/headline_l.png); background-size:100% auto;}
.headline_s .filter {z-index: 2; position: relative; background-image:url(../images/headline_s.png); background-size:100% auto;}
.filter{width: 100%; position: relative; left: 50%; transform: translateX(-50%);}
.filter img { mix-blend-mode: screen;}
/*----活動主選單按鈕----*/
.main_menu_block{width:100%; max-width:1500px;  margin: -4% auto 0; position: relative; z-index: 999;}/*transform: translateX(-50%)*/
.main_menu_block ul{ display: -webkit-flex; display: -moz-flex; display: flex; flex-wrap: wrap; justify-content: center; position:relative;}
.main_menu_block ul li{width:25%;position: relative; z-index:1; max-width:357px; background: url("../images/btn_menu_n.png") no-repeat center top;
	transition:all 0.3s ease-out; background-size: 100% auto;
	/*chrome*/-webkit-transition:all 0.3s ease-out; 
	/*firefox*/-moz-transition:all 0.3s ease-out;}
.main_menu_block ul li a img{transition:all 0.3s ease-out; 
	/*chrome*/-webkit-transition:all 0.3s ease-out; 
	/*firefox*/-moz-transition:all 0.3s ease-out;}

.main_menu_block ul li a{background-repeat: no-repeat; background-position: center center; background-size: 100% auto; position: relative; z-index: 2;}

/*內頁主選單標記顯示*/
.p1 .main_menu_block .tag a{ background-image:url("../images/btn_menu_01_o.png") ; }
.p2 .main_menu_block .tag a{ background-image:url("../images/btn_menu_02_o.png") ; }
.p3 .main_menu_block .tag a{ background-image:url("../images/btn_menu_03_o.png") ; }
.p4 .main_menu_block .tag a{ background-image:url("../images/btn_menu_04_o.png") ; }

.main_menu_block .tag img{opacity:0;}/*標記為tag的選單，隱藏一般狀態的白色字，透出hover狀態的黃色字*/
.main_menu_block .fire_box{ position: absolute; left:50%; top:75%; z-index: 1; 
	transform: translateX(-50%) scale(1.5,1.3); display: none; mix-blend-mode:overlay; opacity: .8;}
.main_menu_block .tag .fire_box{ display: block;}
/*-----------app_menu---------*/
.app_menu{ margin: 0 auto; width:47%; height: auto; position: relative;padding: 2rem 0; z-index: 5;}
.app_menu ul{ width: 100%; display: flex; display:-ms-flexbox; flex-direction:row; -ms-flex-direction:row ; flex-wrap: wrap; -ms-flex-wrap: wrap; justify-content: center; -ms-justify-content: center;}

.app_menu li{width:33.3%; max-width:245px; margin-right:-.1rem;
	 background-size:100% auto;background-position: center top; background-repeat: no-repeat;
	 transition:all 0.3s ease-out; 
	/*chrome*/-webkit-transition:all 0.3s ease-out; 
	/*firefox*/-moz-transition:all 0.3s ease-out;
	 }
.app_menu li:nth-of-type(1){ background-image:url("../images/btn_app_apple.png"); }
.app_menu li:nth-of-type(2){ background-image:url("../images/btn_app_google.png"); }
.app_menu li:nth-of-type(3){ background-image:url("../images/btn_app_apk.png"); }

/*top按鈕*/
/*置頂按鈕*/
.btn_top_block{width:95px; height:auto; position:fixed; top:50%; left:50%; 
	z-index: 999999; max-width: 1500px; display:none; justify-content: right; 
	transform: translateX(-70%); filter: drop-shadow(2px 4px 6px black);
}
#btn_top img { filter:grayscale(100%);}
@media (hover) {
	#btn_top a:hover img { filter:grayscale(0%); transform: scale(1.05);}
	}

/*mobile_mode當載具為手機，顯示如同桌機版的hover狀態*/
#btn_top.mobile_mode a img { filter:grayscale(0%);}
.main_menu_block.mobile_mode ul .tag{ background: url("../images/btn_menu_o.png") no-repeat center top;background-size: 100% auto;}
.main_menu_block.mobile_mode .fire_box{ display: none;}


/*----支援hover裝置環境才會讀取----*/

@media (hover) {

    ul.top_menu:hover{	background-color: #000;}

	ul.top_menu li a:hover {color:#fdf36b;}

	.main_menu_block ul li:hover{filter:brightness(130%) drop-shadow(0px 0px 5px rgb(252, 238, 93));transform: scale(1.05);}
	.main_menu_block ul li a img:hover{ opacity: 0; transform: scale(1.3);}
	.main_menu_block ul li:nth-child(1) a:hover{ background-image:url("../images/btn_menu_01_o.png") ; }
	.main_menu_block ul li:nth-child(2) a:hover{ background-image:url("../images/btn_menu_02_o.png") ; }
	.main_menu_block ul li:nth-child(3) a:hover{ background-image:url("../images/btn_menu_03_o.png") ; }
	.main_menu_block ul li:nth-child(4) a:hover{ background-image:url("../images/btn_menu_04_o.png") ; }

	.main_menu_block ul li:hover, 
	/*在tag狀態下的按鈕，背景切換為hover亮起來的效果*/
	.main_menu_block ul .tag{ background: url("../images/btn_menu_o.png") no-repeat center top;background-size: 100% auto;}
	.btn_logo img:hover{ filter: hue-rotate(-20deg) saturate(1.3) brightness(120%);transform: scale(1.08);}
	.app_menu li:hover{filter:brightness(150%) drop-shadow(0px 0px 2px rgb(255, 255, 255));transform: scale(1.05);}

	.main_menu_block ul li:hover .fire_box{ display: block;}

}

/* ======根據bg底圖決定最適寬度，不會裁切到角色的位置====== */
@media screen and (max-width: 1250px) {
	.wrapper{ background-image:url(../images/bg_m.png); background-size:100% auto;}
	.main_menu_block{width:95%; }
	.role_01{width: 85%;transform: translate(-15%,-3%);}
    .role_02{width: 83%;transform: translate(60%,3%);}
    .role_03{width: 56%;transform: translate(78%,-26%);}
	.headline_l .filter{width: 130%;}
	.main_menu_block .fire_box{
		transform: translateX(-50%) scale(1.1,1);}
}

@media screen and (max-width: 1200px) {
	ul.top_menu {right: 10%;}
}
@media screen and (max-width: 1150px) {
	.app_menu{ width:55%; }
}
@media screen and (max-width: 1100px) {
	.btn_logo{width:25%; }
}
@media screen and (max-width: 900px) {
	.app_menu{ width:60%; }
}
@media screen and (max-width: 750px) {
	ul.top_menu {right: 5%;}
	.main_menu_block ul li {width: 33%;}
	.btn_top_block{width:80px;transform: translateX(-80%);}
	}
@media screen and (max-width: 640px) {			
	.wrapper{background-image:url(../images/bg_s.png); background-size:100% auto;  padding-top:0}
    .btn_logo{width:42%; max-width:276px; position: relative; top:2.7rem; left: 1%; z-index:999;padding: 0.5rem 0 ;}
	.btn_ytblock {width: 20%;top: 3rem;left: 0;}
	ul.top_menu {
		top: .4rem;
		left: .5rem;
		max-width: 200px;
		margin: 0.3rem 0 0 0;
		padding: 0.3rem;
	}	
	ul.top_menu li a {padding: 0 .5rem 0 .5rem;}
	.main_menu_block{margin-top:.5%;}
	.main_menu_block ul{width: 100%; }
    .main_menu_block ul li{width:50%;}
	.btn_act0box{width:50%;top:0; right: 1%;}
	.app_menu{ width:90%; }
	.headline_box{margin-top: 35%;}
	.filter{width: 90%;}
	.headline_s{display: block;}
	.headline_l{display: none;}
	.role_01{width: 150%;transform: translate(-20%,20%);}
    .role_02{width: 135%;transform: translate(20%,10%);}
    .role_03{width: 86%;transform: translate(45%,-26%);}
}

@media screen and (max-width: 350px) {
	ul.top_menu { width: 52%; }
	ul.top_menu li a {padding: 0 .2rem 0 .2rem;}
	.btn_logo{top:4rem;}
}