@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:#d9c9ae; color:#ffffff; overflow-x: hidden; background: url(../images/bg.jpg) repeat;
	font-family:'Microsoft JhengHei','微軟正黑體',Arial,Helvetica,sans-serif,'Maven Pro','Droid Sans','Myriad Pro','Helvetica','Verdana','Geneva';
	
}
/* div{ font-size:1rem; } */
/*-webkit-text-size-adjust: 100%;解決文字強制不斷行，但超過畫面寬度100%的情況，在ios會發生文字被強制放大爆版的狀況*/
.wrapper img,.wrapper2 img{ width:100%; height:auto; font-size: 0;}
p{ 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;mix-blend-mode: screen;}

/*.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);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 130% auto;
	overflow: hidden; position: relative;
   }

.all{width:100%; max-width: 2500px; margin:0 auto; position: relative; z-index:2;}
/*top_fixed_box區塊*/
.top_fixed_box{width: 100%; position: fixed; z-index: 999; height: 150px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,1+32,1+32,0+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,.8) 0%, rgba(255,255,255,.5) 32%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,.8) 0%,rgba(255,255,255,.5) 32%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,.8) 0%,rgba(255,255,255,.5) 32%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */	}

/*top區塊*/
.top_box{ width: 100%; margin: 0 auto;}
.top_block{width: 100%; max-width: 2500px; height: 147px; margin: 0 auto; z-index: 1000; background: url(../images/bg_fixed_menu.png) no-repeat center top;animation:showup .8s ease-in;}
	
.top_fixed_block{max-width: 1300px; margin: 0 auto; display: flex; justify-content:space-between;
	 opacity: 1;}

	@keyframes showup {
		from {
			transform: translateY(-8rem);
		}
		100% {
			transform: translateY(0rem);
		}
	}

.scolldown_btn_box{max-width:186px; width: 13.2rem; position: fixed; bottom: 0;
	transition:all 0.2s ease-out; /*chrome*/-webkit-transition:all 0.2s ease-out; /*firefox*/-moz-transition:all 0.2s ease-out;
	top:50%; left:50%; z-index: 999999; transform:  translate(-50%,70%);}

	


.hide{/*display:none;*/opacity: 0;}
.scolldown_btn_box img{ animation:scolldown 1s infinite ease-out;}
@keyframes scolldown {
	from {
		transform: translateY(0rem);
	}
    50% {
	transform: translateY(1rem);
    }
	100% {
		transform: translateY(0rem);
	}
}

/*top官網粉絲團按鈕*/
ul.top_menu {display: flex; justify-content: center; max-height: 94px;
	width:100%; max-width: 800px;position:relative;  z-index: 999;
	transition:all 0.3s ease-out; /*chrome*/-webkit-transition:all 0.3s ease-out; /*firefox*/-moz-transition:all 0.3s ease-out;
}

ul.top_menu li:nth-of-type(1){ background-image:url(../images/btn_fixed_l_01_o.png);}
ul.top_menu li:nth-of-type(2){ background-image:url(../images/btn_fixed_l_02_o.png);}
ul.top_menu li:nth-of-type(3){ background-image:url(../images/btn_fixed_l_03_o.png);}
ul.top_menu li:nth-of-type(4){ background-image:url(../images/btn_fixed_l_04_o.png);}

ul.top_menu li a,ul.top_menu li {background-size: 100% auto; background-repeat: no-repeat;}
ul.top_menu li:nth-of-type(1) a{ background-image:url(../images/btn_fixed_l_01.png);}
ul.top_menu li:nth-of-type(2) a{ background-image:url(../images/btn_fixed_l_02.png);}
ul.top_menu li:nth-of-type(3) a{ background-image:url(../images/btn_fixed_l_03.png);}
ul.top_menu li:nth-of-type(4) a{ background-image:url(../images/btn_fixed_l_04.png);}

ul.top_menu li a img:nth-of-type(2){display: none;}

@media (hover) {
	ul.top_menu li a:hover{opacity: 0;}
	ul.top_menu li a:hover { filter:brightness(120%);transform: scale(1.08);}

}
/*----LOGO按鈕----*/
.btn_logo{width:25%; max-width:350px; position: relative; left: 0; 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: 1920px;margin: 0 auto; position: relative; z-index:3; transform: translateY(3rem);}
.role_box div{ position: absolute;}
.role_01{width: 43%; max-width:812px; transform: translate(101.4%,37%); z-index:8;}
.role_02{width: 46.3%; max-width:883px; transform: translate(33%,25%); z-index:7;}
.role_03{width: 31%; max-width:586px; transform: translate(207%,26%); z-index:6;}
.role_04{width: 35%; max-width:657px; transform: translate(7%,24%); z-index:5;}
.role_05{width: 31%; max-width:566px; transform: translate(201.5%,7%); z-index:4;}
.role_06{width: 39%; max-width:736px; transform: translate(23.2%,10%); z-index:3;}
.role_07{width: 28.5%; max-width:522px; transform: translate(198%,4%); z-index:2;}
.role_08{width: 28%; max-width:497px; transform: translate(30%,11.5%); z-index:1;}
.role_09{width: 100%; max-width:2125px; transform: translate(0%,115%); z-index:10;}


/*----大標題----*/
.headline_box{
	width:33%; max-width:552px; position: relative; margin:0 auto ; z-index:999;
	transform: translate(.5rem,3.5rem);
}
.headline01 { width: 100%; position: relative; animation:1s fadeintotop ease-out;}
.filter{width: 100%; /*left: 50%; transform: translateX(-50%);*/}
.headline01 .filter {z-index: 2; position: relative; background-image:url(../images/headline_01.png); background-size:100% auto;}
.headline01 .filter img { mix-blend-mode: screen;}
.headline02{ position: absolute; left:0; top: 0; z-index: 3; animation:1s fadeintobot ease-out;}
.headline_bot {
    width: 100%; max-width: 1006px; position: relative;
    display: flex; justify-content: space-around; flex-direction: row; flex-wrap: nowrap;
    margin: 0 auto; z-index: 999; margin-top:-1%;
}
.headline_bot div{position: relative;}
.headline_bot div:nth-of-type(1){width: 42%; max-width: 432px;}
.headline_bot div:nth-of-type(2){width: 14%; max-width: 142px; margin: 0 -12% 0 -13.5%;}
.headline_bot div:nth-of-type(3){width: 42%; max-width: 432px;}


@keyframes fadeintotop {
	from {
		opacity: 0;
		transform: translateY(10rem);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeintobot {
	from {
		opacity: 0;
		transform: translateY(-5rem);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}	
@keyframes updown{
	0%,100% {transform: translateY(0px);
		transform-origin: center bottom;}			
	50% {transform: translateY(-5px);filter:brightness(125%)} 
}
/*----活動主選單按鈕----*/
.main_menu_block{width:100%; max-width:1600px;  margin:0 auto ; position: relative; z-index: 999; padding: 0 3rem;}/*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:nth-of-type(7){max-width:430px; width: 26.8%;}
.main_menu_block ul li.index{width: 23.5%;}
.main_menu_block ul li{ 
	max-width: 377px;width: 30%; margin:0 .1rem; position: relative; z-index:1; background-size: 100% auto;
	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-image:url("../images/btn_menu_bg_01.png");}
.main_menu_block ul li:nth-of-type(6) a{ background-image:url("../images/btn_menu_bg_06.png");}
.main_menu_block ul li:nth-of-type(7) a{ background-image:url("../images/btn_menu_bg_07.png");}

.main_menu_block ul li a,.main_menu_block ul li a .text{
	background-repeat: no-repeat; background-position: center center; background-size: 100% auto; position: relative; z-index: 2;}
.main_menu_block ul li:nth-of-type(1) .text{ background-image:url("../images/btn_menu_01_o.png");}
.main_menu_block ul li:nth-of-type(2) .text{ background-image:url("../images/btn_menu_02_o.png");}
.main_menu_block ul li:nth-of-type(3) .text{ background-image:url("../images/btn_menu_03_o.png");}
.main_menu_block ul li:nth-of-type(4) .text{ background-image:url("../images/btn_menu_04_o.png");}
.main_menu_block ul li:nth-of-type(5) .text{ background-image:url("../images/btn_menu_05_o.png");}
.main_menu_block ul li:nth-of-type(6) .text{ background-image:url("../images/btn_menu_06_o.png");}
.main_menu_block ul li:nth-of-type(7) .text{ background-image:url("../images/btn_menu_07_o.png");}

.main_menu_block ul li a:hover .text img{opacity:0;}
.main_menu_block ul li a{position: relative;}
.main_menu_block ul li a.clouds{
	position: absolute;  left: 0; top:0; opacity: 0;}
.main_menu_block ul li a::before{
	transition:all 1s ease-in-out; /*chrome*/-webkit-transition:all 1s ease-in-out; /*firefox*/-moz-transition:all 1s ease-in-out;
	content: ""; opacity: 0; /*沒用到仍然要寫，雙引號內容留空*/
	width: 100%; /*設定長方形寬度*/
	height: 100px; /*設定長方形高度*/
	position: absolute;  /*設定與<div>區塊的相對位置*/
	left: -6%; /*從<div>區塊左上角起算，與左邊距離為0，即靠左的意思*/
	bottom: 0; /*從<div>區塊左上角起算，與上方距離為100%時才開始產生這個長方形，因此長方形會在整塊<div>區塊的下方*/
	background:url("../images/btn_cloud_l.png") no-repeat left bottom; background-size: 50% auto;
  }
  .main_menu_block ul li a::after{
	transition:all 1s ease-in-out; /*chrome*/-webkit-transition:all 1s ease-in-out; /*firefox*/-moz-transition:all 1s ease-in-out;
	content: "";  opacity: 0;/*沒用到仍然要寫，雙引號內容留空*/
	width: 100%; /*設定長方形寬度*/
	height: 100px; /*設定長方形高度*/
	position: absolute; /*設定與<div>區塊的相對位置*/
	right: -6%; /*從<div>區塊左上角起算，與左邊距離為0，即靠左的意思*/
	bottom: 0; /*從<div>區塊左上角起算，與上方距離為100%時才開始產生這個長方形，因此長方形會在整塊<div>區塊的下方*/
	background:url("../images/btn_cloud_r.png") no-repeat right bottom;background-size: 50% auto;
  }
@media (hover) {
	.main_menu_block ul li a:hover::before{ opacity: 1; left:-1%;}
	.main_menu_block ul li a:hover::after{ opacity: 1; right:-1%; }
}

/*內頁主選單標記顯示*/

.main_menu_block ul li.tag a::before{ opacity: 1; left:-1%;}
.main_menu_block ul li.tag a::after{ opacity: 1; right:-1%; }
.main_menu_block ul li.tag .text img{opacity: 0;}

/*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%);
}

@media (hover) {
	
.btn_top_block a:hover img{transform: scale(1.08); filter:brightness(120%);
	transition:all 0.2s ease-in-out; /*chrome*/-webkit-transition:all 0.2s ease-in-out; /*firefox*/-moz-transition:all 0.2s ease-in-out;} 
/*mobile_mode當載具為手機，顯示如同桌機版的hover狀態*/
.main_menu_block.mobile_mode ul li a:hover .text img{opacity:0;}
}

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

@media (hover) {
	
	.main_menu_block ul li:hover{filter:brightness(120%) drop-shadow(0px 0px 5px rgb(252, 238, 93));transform: scale(1.05);}
	
	/*在tag狀態下的按鈕，背景切換為hover亮起來的效果*/
	.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;}
	ul.top_menu {width: 70%;}
	.headline_bot { width: 70%;}
	}
@media screen and (max-width: 1000px) {
	.role_box{scale: 1.2; }
	.headline_box{scale: 1.1; }
	.main_menu_block ul li.index{ width: 30%;}
.role_05{transform: translate(201.5%,6%);}
.role_06{transform: translate(23.2%,9%);}
.role_07{transform: translate(198%,2%);}
.role_08{transform: translate(30%,8.5%);}

.headline_box {transform: translate(.5rem,4.5rem);}

.headline_bot { width: 80%;margin-top:3.5rem; }
.main_menu_block ul li:nth-of-type(7){ width: 37%;}

}
@media screen and (max-width: 900px) {
	.main_menu_block{ padding: 0 !important;}

	/*.main_menu_block ul li:nth-of-type(7){ width: 35%;}*/
	.main_menu_block ul li{ width: 30%;}
	}	

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

	.top_fixed_box{ height: 233px;
		background: -moz-linear-gradient(top,  rgba(255,255,255,.8) 0%, rgba(255,255,255,.75) 80%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(255,255,255,.8) 0%,rgba(255,255,255,.75) 80%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.75) 80%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */	}

	ul.top_menu li a img:nth-of-type(1){display: none;}
	ul.top_menu li a img:nth-of-type(2){display: block;}

	.wrapper{background-image:url(../images/bg_s.png); background-size:100% auto;  padding-top:0}
	.top_block{width: 100%; height:233px;  background: url(../images/bg_fixed_menu_s.png) no-repeat center top;}
	.main_menu_block ul li.index{width: 45%;}
	.top_fixed_block {justify-content: center; flex-wrap: wrap;}
    .btn_logo{width:70%; max-width:276px; position: relative; left: 1%; z-index:999;padding: 0.5rem 0 ;}
	ul.top_menu {width: 100%; margin-top: -2%;}
	.main_menu_block ul{width: 100%; }
    .main_menu_block ul li{width:48%;}
	.headline_box{width:60%; margin-top: 22%;}
	.headline_bot { width: 100%;margin-top:.5rem; }
	.main_menu_block ul li:nth-of-type(7){ width: 56%;}
	.role_box{scale: 1; transform: translateY(1rem); }
	.headline_box{scale: 1; }
	.role_01{width: 75%;transform: translate(54%,55%);}
    .role_02{width: 80%;transform: translate(-9%,42%);}
    .role_03{width: 55%; transform: translate(109%,24%);}
    .role_04{width: 60%;transform: translate(-22%,24%);}
    .role_05{width: 53%; transform: translate(82%,2%);}
    .role_06{opacity: 0;}
    .role_07{opacity: 0;}
    .role_08{width: 57%; transform: translate(-13%,3%);}
    .role_09{width: 70%; transform: translate(10%,115%);}
	.top_fixed_box{height: 170px;}
	.headline_box {transform: translate(.5rem,1rem);	margin-top: 32%;
	}

	ul.top_menu li:nth-of-type(1){ background-image:url(../images/btn_fixed_s_01_o.png);}
	ul.top_menu li:nth-of-type(2){ background-image:url(../images/btn_fixed_s_02_o.png);}
	ul.top_menu li:nth-of-type(3){ background-image:url(../images/btn_fixed_s_03_o.png);}
	ul.top_menu li:nth-of-type(4){ background-image:url(../images/btn_fixed_s_04_o.png);}
	
	ul.top_menu li a,ul.top_menu li {background-size: 100% auto;}
	ul.top_menu li:nth-of-type(1) a{ background-image:url(../images/btn_fixed_s_01.png);}
	ul.top_menu li:nth-of-type(2) a{ background-image:url(../images/btn_fixed_s_02.png);}
	ul.top_menu li:nth-of-type(3) a{ background-image:url(../images/btn_fixed_s_03.png);}
	ul.top_menu li:nth-of-type(4) a{ background-image:url(../images/btn_fixed_s_04.png);}
	
}
@media screen and (max-width: 550px) {
	.headline_box {
		width: 60%;
		margin-top: 35%;
	}
}
@media screen and (max-width: 500px) {
	.role_box{ margin-top: 30%; scale: 1.1; }
	.top_block{width: 100%; }
	.headline_box{width:60%; margin-top: 37%;}
}
@media screen and (max-width: 400px) {
	.btn_logo{width:60%;}
	.top_block {background: url(../images/bg_fixed_menu_s.png) no-repeat center -2rem;}
	.top_fixed_box {height: 130px;}
	.headline_box{width:65%;}
}

@media screen and (max-width: 350px) {
	.page {
		margin-top: 1rem !important;
	}
	.headline_bot {
		margin-top: 0rem;
	}
	.headline_box{width:68%;}
	.top_block {background: url(../images/bg_fixed_menu_s.png) no-repeat center -5rem;}
	.top_fixed_box {height: 120px;}
	.p1 .article section:nth-of-type(3) .pic_set:nth-of-type(2) .pic_description{margin-top:0 !important;}
	.p1 .article section:nth-of-type(3) .pic_set:nth-of-type(3) .pic_description{margin-top:-0.7rem !important;}
	html{font-size:12px;}

}