@charset "utf-8";

/*----修正粗體----*/
@font-face {
    font-family: '微軟正黑體';
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: bold;
    src: local(Yu Gothic), local(MS Gothic);
}
/*----一般粗細的時候改回微軟正黑----*/
@font-face {
    font-family: '新微軟正黑體';
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: normal;
    src: local(微軟正黑體);
}
.s,.app_menu{display: none;}
.article span{display: inline-block;}
/* -----內頁版型------ */
.page{ 
	width:93%; max-width:1320px; margin:0 auto; position: relative; z-index:0;
	animation: fadeInDown 1s 0.5s both;
	margin-top:2rem;
}

.bg_content_top,.bg_content_bot{ width:100%; height:auto; z-index: 10;}
.bg_content_top {position: relative;}
.bg_content_bot{ position: relative;}
.bg_content_mid{ width:100%; height:auto; padding:0; margin: 0; position: relative; z-index:0;
	background-image:url(../images/bg_content_cover.png),url(../images/watermark_content.png),url(../images/bg_content_mid.png);
	background-repeat:no-repeat,repeat-y,repeat-y;
	background-position:center bottom,center top,center top;
	background-size:95% auto,100% auto,100% auto;
}

.page_content{width:90%; margin:0 auto 0; text-align:left; position: relative; z-index:0; padding:1rem 2rem;}
.part{width:100%; margin:0 auto;}

.title{ width:100%; max-width:620px; margin:1rem auto 1.5rem;  z-index:9;}
.title_s{ display:none;width:100%; max-width:300px; margin:0 auto 1.5rem; z-index:9;}
.subtitle{width:100%; max-width:350px; margin:0 auto 1%;  z-index:9; left: 0;}

.article{ margin: 0 auto; padding:0 2rem; text-shadow:1px 1px 8px #000; text-align:justify; letter-spacing: .02rem;}
.article section{ margin-bottom: 8rem;}
/*內文的圖片共用基本樣式。但原圖尺寸不一，所以要每頁分別設定寬度*/
.article .pic {
    height: auto; margin: 1rem;
    background: linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 6px) calc(100% - 6px) no-repeat,
	linear-gradient(45deg, rgba(227, 175, 50, 1) 4%, #f0d699 14%, rgba(207,154,28,1) 40%, rgba(242,214,147,1) 63%, #e1b345 100%);
    border-radius: 0px; padding: 3px; box-sizing: content-box; display: block; margin: 1.5rem auto; 
	filter: drop-shadow(2px 4px 6px black);
}
.article section>p{font-weight: 600; line-height: 4rem;}
.p1 .article .pic{width: 100%; max-width:800px;}
.p3 .article .pic{width: 70%;}
.p2 .article .pic{width: 100%; max-width:1000px;}
.article p{text-align: center; font-size: 1.6rem; }
.article .pic_description{ line-height: 1rem; padding: 0; margin-bottom:4rem;}
.article .pic_set{ margin-bottom: 3rem;}
.p1 .article section:nth-of-type(3) .pic_set:nth-of-type(2) .pic_description{margin-top: -2rem;}
.p1 .article section:nth-of-type(3) .pic_set:nth-of-type(3) .pic_description{margin-top: -4rem;}
.p1 .article section:nth-of-type(1) .pic_set:nth-of-type(2) .pic_description{margin-top: -1rem;}
.p1 .article section:nth-of-type(1) .pic_set:nth-of-type(3) .pic_description{margin-top: -2.5rem;}

.article ul{width: 100% ; font-size: 1.5rem; margin: 0 auto; border: #dcbc79 2px solid;
		list-style: decimal; padding: 3% 5% 3% 8%; list-style-position:outside;
		background: -moz-linear-gradient(top,  rgba(89, 61, 39, 0.8) 0%, rgba(97, 59, 32, 0.8) 100%);
background: -webkit-linear-gradient(top,  rgba(89, 61, 39, 0.8) 0%,rgba(97, 59, 32, 0.8) 100%);
background: linear-gradient(to bottom,  rgba(89, 61, 39, 0.8) 0%,rgbargba(97, 59, 32, 0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80301f15', endColorstr='#80541e1e',GradientType=0 );
filter: drop-shadow(1px 2px 5px black); margin-bottom: 4rem;margin-top:1.8rem;
}
.article ul{font-weight: 600; line-height: 2.3rem;}
.article ul li,.article ol li{padding: .6rem 0;}

.article table td, .article table th {font-size: 1.4rem; font-weight: 600; padding: 1rem 1.5rem;}
.article table{margin: 1rem auto 2.5rem; width: 100%;  box-shadow: 0px 0px 8px #000000; border: #dcbc79 2px solid;}
.article table td img{max-width:128px ; min-width: 60px;}
.article table thead td,.article table thead th {background-color: rgba(25,15,1,0.7);}
.article table tbody td {background-color: rgba(70, 36, 12, 0.8);}

.p2 .article table thead td:nth-of-type(1),.p3 table thead td:nth-of-type(2){text-align: center;}
.p2 .article table td:nth-of-type(1){width: 15%; padding: .5rem 1.8rem; text-align: center;}
.p2 .article table td:nth-of-type(2){width: 20%; text-align: center;}
.p2 .article table td:nth-of-type(3) { width: 60%; padding: 1rem 1.5rem; line-height: 2.5rem;}
.p2 .article table thead td:nth-of-type(3){text-align: center;}
.p2 .article table tbody tr:nth-of-type(2) td{border-top: #774c39 1px solid;}
.p3 .btn_page{width: 100%; max-width:320px; background: url(../images/page/btn_p3_o.png) no-repeat center top; margin: 1rem auto;}
.p3 .btn_page img{opacity: 1;transition:all 0.3s ease-out; /*chrome*/-webkit-transition:all 0.3s ease-out; /*firefox*/-moz-transition:all 0.3s ease-out;}
@media (hover) {
	.p3 .btn_page:hover img{opacity: 0;}	
	.p3 .btn_page:hover{ scale: 1.1; filter:brightness(110%);}
}
.p3 .article p{ line-height: 3.5rem; margin: 1.5rem auto;}
.ultitle { color: #ffe210; font-size: 1.9rem;}


.p4 .article >section:nth-of-type(1) >section:nth-of-type(2) ul:nth-of-type(1) li,
.p4 .article >section:nth-of-type(2) >section:nth-of-type(1) ul:nth-of-type(1) li,
.p4 .article >section:nth-of-type(7) >section:nth-of-type(1) ul:nth-of-type(1) li
{padding: .3rem 0;}

.p4 .article{padding: 0 5rem;}
.p4 .article p{text-align: center; line-height: 2.6rem; margin-bottom: 1rem; }
.p4 .subtitle {margin-bottom: 3%;}
.p4 .article h1{text-align: center;font-size: 2rem; font-weight: 600; color:#ffe210; text-indent:-1.2rem; margin-bottom: 2rem; }
.p4 .article h2, .p5 .article h2{text-align: center;font-size: 1.8rem; font-weight: 600;color: #ffe210; text-indent:-1.2rem;  }
.p4 .article>section >section:nth-of-type(1) p{ margin-bottom: 1.5rem;}
.p4 .article>section >section:nth-of-type(1)>h1>p{text-align: left;font-weight: 600; }
.p4 .article>section:nth-of-type(1) >section:nth-of-type(1) .start::after,
.p4 .article>section:nth-of-type(1) >section:nth-of-type(3) .start::after,
.p4 .article>section:nth-of-type(7) >section:nth-of-type(1) .start::after 
 {display: none;}
.p4 .article>section >section:nth-of-type(1)> h1{margin-bottom: 0rem;}
.p4 .article>section>section:nth-of-type(2) .ul_a{line-height: 2.8rem;}

.note{ color:#ffa51f; font-size: 1.3rem; font-weight: 600;}
.p4 .ul_a{list-style: none; padding:3% 3% 3% 5%;}
.p4 .article table thead td:nth-of-type(1),.p3 table thead td:nth-of-type(2){text-align: center;}
.p4 .article table td:nth-of-type(1){width: 32%; text-align: center;}
.p4 .article table td:nth-of-type(2){width: 40%; text-align: center;}
.p4 .article table thead td:nth-of-type(3){text-align: center;}
.p4 .article table tbody tr:nth-of-type(2) td{border-top: #774c39 1px solid;}
.p4 .article table tbody tr:nth-of-type(odd), .p5 .article table tbody tr:nth-of-type(odd){background-color:rgb(71 68 66);}
.p4 .article table tbody tr td, .p5 .article table tbody tr td  {border-top: #604233 1px solid !important;text-align:center}
.p4 h3 { font-size: 1.5rem; text-align: center; color: #ffe210; font-weight: 600; margin: 2.5rem auto 1rem;}

.p4 .article > section:nth-of-type(3) > section:nth-of-type(1) table:nth-of-type(1){ margin-bottom: 1rem;}
.p4 .article > section:nth-of-type(7) > section:nth-of-type(1) .note{ margin-left: -1.8rem;}

.p5 .title{ max-width:685px; }

.p5 .article thead th {text-align: center;}
.p5 .article td {text-align: center; line-height: 2.1rem;}
.p5 .article section:nth-of-type(3) table td:nth-of-type(1), .p5 .article section:nth-of-type(3) table th:nth-of-type(1), 
.p5 .article section:nth-of-type(5) table td:nth-of-type(1), .p5 .article section:nth-of-type(5) table th:nth-of-type(1) {border-right: #604233 1px solid ;}
.p5 .article > section:nth-of-type(8) table td:nth-of-type(1){width: 50%;}
.p5 .article > section:nth-of-type(8) table td:nth-of-type(2){width: 25%;}

.p5 .article section>p{line-height: 3rem;  margin: 2rem auto;}
.p5 .subtitle {
    margin: 0 auto 3%;
}
.p5 .note {
    line-height: 2rem; margin: 1rem 0; color:#ffe210;
}

/* -----活動時間 對象------ */
.page_info{width:100%; margin:0 auto; text-align:center;
	display: flex; display:-ms-flexbox;
	flex-direction: row; -ms-flex-direction:row;
	justify-content:center;	-ms-flex-pack:center;
	align-items:center; -ms-flex-align:center;
}

.date{width:100%; color:#ffa51f; font-size:2.3rem; font-weight:600;
	display:flex; flex-wrap:wrap; justify-content:center; margin:.5rem auto 2rem;}
.start,.start2,.end{ display:flex; flex-wrap:wrap; align-items: center; justify-content: center;}
.start>div:nth-of-type(1),.start2>div:nth-of-type(1),.end>div:nth-of-type(1){ line-height: 3.5rem;}
.start::after{ content:"";
	width:0; height:0; margin:0 0.5rem; /* position:absolute; top: -1.2rem; left:45% ; */
	border-style: solid; border-width:.75rem 0 .75rem  1.5rem;
	border-color: transparent transparent  transparent  #ffe210;}
.wk{ margin:0 0.25rem; padding: 0.45rem 0.4rem 0.3rem 0.4rem; font-size:1.3rem;  color: rgb(60, 43, 21);
	line-height: 1.3rem; border-radius:2rem; font-weight: bold;
	background-image: linear-gradient(to bottom,  #ffe210 0%, #ffa445 100%);
	text-shadow: none; filter: drop-shadow(0px 2px 3px (0, 0, 0, 0.7));}


/*p3的項目清單設定*/
.highlight1{ display: inline-block; color:#ffe210;}
.highlight2{ display: inline-block; color:#f39700;}


@media screen and (max-width: 1110px) {
	.title{ max-width:500px;}
	.p1 .article section:nth-of-type(3) .pic_set,.p1 .article section:nth-of-type(3) .pic_set{scale:1.11;}
	.p1 .article section:nth-of-type(3) .pic_set:nth-of-type(3) .pic_description {margin-top: -3rem;}
	.p1 .article section:nth-of-type(3) .pic_set:nth-of-type(2) .pic_description { margin-top: -2rem;}
	.p4 .article {padding: 0 0rem;}
}

@media screen and (max-width: 640px) {
.btn_top_block {transform: translateX(-90%);}
.page{width: 100%;}
.bg_content_top{transform:translate(0%,-10%)}
.title{ width:100%; max-width:450x;}
.p5 .title{ max-width:552px; }

.p1 .article .pic{width: 95%;}
.subtitle{max-width: 360px;}
.page_content{width: 100%;}
.article{padding: 0;}
.p1 .article p {font-size: 1.4rem; padding: 0 1rem;}
.article section{margin-bottom: 3rem;}
.p1 .article section:nth-of-type(2) .pic_set:nth-of-type(2) .pic_description{margin-top:.3rem}
.p1 .article section:nth-of-type(2) .pic_set:nth-of-type(3) .pic_description{margin-top: 0;}
.p1 .article section:nth-of-type(2) .pic_set,.p1 .article section:nth-of-type(3) .pic_set{scale:1;}
.page_content{ margin-top: -.4rem;}

/*小板表格改寫*/
/*.article table{border:0;}*/
.article table thead{display:none;}
.article table tbody tr, .article table tbody td{ display: block;}
.article table tbody td{
	width:100% !important; padding:0;
	display:flex; display:-ms-flexbox;	flex-direction: row; -ms-flex-direction:row; justify-content:center;-ms-flex-pack:center;}
.article table td{border-bottom:0; }
.article table tbody td>span{width:80%;  display:inline-block;}


.article table tbody td>span, .article table tbody td::before {
    padding: 1.2rem;
    vertical-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}
.article table tbody td::before,.present_content table tbody td::before
{ width:20%; background-color:rgba(25,15,1,0.7); color:white; display:inline-block; border-right:1px solid rgba(51,36,24,0.7);}

/*小版表格外框*/
/*.wrapper table td:nth-of-type(1), .wrapper2 table td:nth-of-type(1){border-top: #ac9d91 1px solid;}
.wrapper table td:last-of-type, .wrapper2 table td:last-of-type{border-bottom: #ac9d91 1px solid;}
.wrapper table td, .wrapper2 table td{border-right: #ac9d91 1px solid;}*/

.p2 .article table tbody>tr>td:nth-of-type(1)::before{ content:"圖示";}
.p2 .article table tbody>tr>td:nth-of-type(2)::before{ content:"技能名稱";}
.p2 .article table tbody>tr>td:nth-of-type(3)::before{ content:"說明"; text-align: center;}
.p2 .article table td:nth-of-type(1),.p3 .article table td:nth-of-type(3),.p4 .article table td:nth-of-type(1){padding: 0;}
.p2 .article table tbody tr:nth-of-type(2) td{border:none;}
.p2 .article table tr:nth-of-type(2) td:nth-of-type(1),.p4 .article table tr:nth-of-type(2) td:nth-of-type(1){border-top: #774c39 1px solid;}
.p2 .article table td:nth-of-type(3),.p4 .article table td:nth-of-type(3) { padding:0;}



/*p4表格共用*/
.p4 .article table tbody tr:nth-of-type(2) td{border:none;}
.p4 .article table tbody tr td:nth-of-type(odd){background-color:rgb(62 31 8);}
.p4 .article table tbody tr td:nth-of-type(even){background-color:rgb(82, 44, 16); border-bottom: #dcbc79 1px solid;}

/*表格p4-3-1*/
.p4 .article > section:nth-of-type(3) > section:nth-of-type(1) table:nth-of-type(1) tbody tr td:nth-of-type(1)::before{ content:"活動任務";}
.p4 .article > section:nth-of-type(3) > section:nth-of-type(1) table:nth-of-type(1) tbody tr td:nth-of-type(2)::before{ content:"獎勵內容";}

/*表格p4-4-1*/
.p4 .article > section:nth-of-type(4) > section:nth-of-type(1) table:nth-of-type(1) tbody tr td:nth-of-type(1)::before{ content:"儲值任意金額";}
.p4 .article > section:nth-of-type(4) > section:nth-of-type(1) table:nth-of-type(1) tbody tr td:nth-of-type(2)::before{ content:"獎勵";}

/*表格p4-5-1*/
.p4 .article > section:nth-of-type(5) > section:nth-of-type(1) table:nth-of-type(1) tbody tr td:nth-of-type(1)::before{ content:"累積儲值";}
.p4 .article > section:nth-of-type(5) > section:nth-of-type(1) table:nth-of-type(1) tbody tr td:nth-of-type(2)::before{ content:"獎勵物品";}
.p4 .article > section:nth-of-type(5) > section:nth-of-type(1) table:nth-of-type(1) tbody tr td:nth-of-type(3)::before{ content:"數量";}
.p4 .article > section:nth-of-type(5) > section:nth-of-type(1) table tbody tr td:nth-of-type(even){ border-bottom:none;}
.p4 .article > section:nth-of-type(5) > section:nth-of-type(1) table tbody tr td:nth-of-type(3n){ border-bottom: #dcbc79 1px solid;}

/*表格p5-1*/
.p5 .article > section:nth-of-type(1) table tbody tr td:nth-of-type(1)::before{ content:"日期";}
.p5 .article > section:nth-of-type(1) table tbody tr td:nth-of-type(2)::before{ content:"項目";}

/*表格p5-2*/
.p5 .article > section:nth-of-type(2) table tbody tr td:nth-of-type(1)::before{ content:"累積登入天數";}
.p5 .article > section:nth-of-type(2) table tbody tr td:nth-of-type(2)::before{ content:"虛寶內容";}

/*表格p5-3,p5-5*/
.p5 .article > section:nth-of-type(3) table tbody tr td:nth-of-type(1)::before,
.p5 .article > section:nth-of-type(5) table tbody tr td:nth-of-type(1)::before
{ content:"累積登入天數";}
.p5 .article > section:nth-of-type(3) table tbody tr td:nth-of-type(2)::before,
.p5 .article > section:nth-of-type(5) table tbody tr td:nth-of-type(2)::before
{ content:"虛寶內容";}
.p5 .article > section:nth-of-type(3) table tbody tr:nth-of-type(1) td:nth-of-type(3)::before,
.p5 .article > section:nth-of-type(3) table tbody tr:nth-of-type(3) td:nth-of-type(3)::before,
.p5 .article > section:nth-of-type(3) table tbody tr:nth-of-type(7) td:nth-of-type(3)::before,
.p5 .article > section:nth-of-type(3) table tbody tr:nth-of-type(10) td:nth-of-type(3)::before,
.p5 .article > section:nth-of-type(3) table tbody tr:nth-of-type(14) td:nth-of-type(3)::before,

.p5 .article > section:nth-of-type(5) table tbody tr:nth-of-type(1) td:nth-of-type(3)::before,
.p5 .article > section:nth-of-type(5) table tbody tr:nth-of-type(3) td:nth-of-type(3)::before,
.p5 .article > section:nth-of-type(5) table tbody tr:nth-of-type(7) td:nth-of-type(3)::before,
.p5 .article > section:nth-of-type(5) table tbody tr:nth-of-type(10) td:nth-of-type(3)::before,
.p5 .article > section:nth-of-type(5) table tbody tr:nth-of-type(14) td:nth-of-type(3)::before
{ content:"元寶數量";}

/*表格p5-4*/
.p5 .article > section:nth-of-type(4) table tbody tr td:nth-of-type(1)::before{ content:"登入時間";}
.p5 .article > section:nth-of-type(4) table tbody tr td:nth-of-type(2)::before{ content:"虛寶內容";}


/*表格p5-6*/
.p5 .article > section:nth-of-type(6) table tbody tr td:nth-of-type(1)::before{ content:"活動任務";}
.p5 .article > section:nth-of-type(6) table tbody tr td:nth-of-type(2)::before{ content:"獎勵內容";}

/*表格p5-7,p5-8*/
.p5 .article > section:nth-of-type(7) table tbody tr td:nth-of-type(1)::before,
.p5 .article > section:nth-of-type(8) table tbody tr td:nth-of-type(1)::before
{ content:"兌換消耗道具";}
.p5 .article > section:nth-of-type(7) table tbody tr td:nth-of-type(2)::before,
.p5 .article > section:nth-of-type(8) table tbody tr td:nth-of-type(2)::before
{ content:"兌換獲得道具";}
.p5 .article > section:nth-of-type(7) table tbody tr td:nth-of-type(3)::before,
.p5 .article > section:nth-of-type(8) table tbody tr td:nth-of-type(3)::before
{ content:"限換次數";}

/*表格p5-9*/
.p5 .article > section:nth-of-type(9) table tbody tr td:nth-of-type(1)::before{ content:"放入道具";}
.p5 .article > section:nth-of-type(9) table tbody tr td:nth-of-type(2)::before{ content:"能力值";}

/*表格p5-13*/
.p5 .article > section:nth-of-type(13) table tbody tr td:nth-of-type(1)::before{ content:"12:00";}
.p5 .article > section:nth-of-type(13) table tbody tr td:nth-of-type(2)::before{ content:"18:00";}

/*表格p5-14*/
.p5 .article > section:nth-of-type(14) table tbody tr td:nth-of-type(1)::before{ content:"天數";}
.p5 .article > section:nth-of-type(14) table tbody tr td:nth-of-type(2)::before{ content:"獎勵";}

/*表格p5-18*/
.p5 .article > section:nth-of-type(18) table tbody tr td:nth-of-type(1)::before{ content:"累積儲值";}
.p5 .article > section:nth-of-type(18) table tbody tr td:nth-of-type(2)::before{ content:"獎勵物品";}
.p5 .article > section:nth-of-type(18) table tbody tr td:nth-of-type(2)::before{ content:"數量";}

/*表格p5-19*/
.p5 .article > section:nth-of-type(19) table tbody tr td:nth-of-type(1)::before{ content:"天數";}
.p5 .article > section:nth-of-type(19) table tbody tr td:nth-of-type(2)::before{ content:"獎勵";}

}
@media screen and (max-width: 550px) {
	.subtitle{max-width: 320px;}
}
	

@media screen and (max-width: 460px) {
.p2 .article ul{padding: 3% 5% 3% 12%;}
}

@media screen and (max-width: 450px) {
	.article ul {
		font-size: 1.3rem; letter-spacing: 0;
		padding: 3% 4% 3% 9%;
	}
	.page_content {
		padding: 1rem 1rem;
	}
	.article h1 {
		font-size: 1.8rem;
	}
	.p4 .article>section >section:nth-of-type(1) p {
		margin-bottom: 1.4rem;
	}
	.date {
		font-size: 2.1rem;	
	}
}

@media screen and (max-width: 350px) {
.p1 .article p { font-size: 1.2rem; padding: 0 .5rem;}
.main_menu_block ul li{ width: 80%;}
}
@media screen and (max-width: 330px) {

	.page_content {
		width: 98%;
		padding: .5rem 1rem;
	}
	.article ul {
		font-size: 1.3rem;
		padding: 3% 4% 3% 13%;
		font-weight: 100;
	}
	.article table td, .article table th {
		font-weight: 100;
		padding: 0.5rem .5rem;
	}
}