@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
	background:url("../images/bg.jpg") top center repeat;
}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 991px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }

/* m */
@media screen and ( max-width: 991px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
}

html {
	background: url("../images/bg.jpg") top center no-repeat fixed, #2b307a;
  }
   

/* -- 右側選單 -- */
.navstyle{background: #131645;padding:10px 5px;margin: auto;}
.navstyle ul{width: 1200px;margin: auto;display: flex;justify-content: space-around;}
.navstyle ul li a{color: #ffffff;padding: 15px 40px;display: block;font-size: 1.4rem;}
/* .navstyle ul li:hover,.navstyle ul li a:hover {background:#4e7dcf;color:#ffffff;} */
.nav li:nth-child(1) {background:url(../images/nav_blue.svg) top center no-repeat;}
.nav li:nth-child(2) {background:url(../images/nav_purple.svg) top center no-repeat;}
.nav li:nth-child(3) {background:url(../images/nav_red.svg) top center no-repeat;}
.nav li:nth-child(4) {background:url(../images/nav_brown.svg) top center no-repeat;}
.nav li:nth-child(5) {background:url(../images/nav_black.svg) top center no-repeat;}
.nav li:nth-child(6) {background:url(../images/nav_gold.svg) top center no-repeat;}
.nav li:nth-child(7) {background:url(../images/nav_tran.svg) top center no-repeat;}
.nav li:nth-child(8) {background:url(../images/nav_multiple.svg) top center no-repeat;}

.sticky {position: fixed;top: 0;width: 100%;z-index: 99;}

@media screen and ( max-width: 991px ){
	.navstyle {width: 100%;margin: 0;padding: 0;}
	.navstyle ul {width: 100%;display: flex;flex-wrap: wrap;padding: 0;}
	.navstyle ul li {display: flex;justify-content: center;align-items: center;box-sizing: border-box;width:25%;font-size:20px;margin: 0;padding: 0;border: 0.5px solid #131645;}
	.nav li:nth-child(1) {background:#548af1;}
	.nav li:nth-child(2) {background:#825dd2;}
	.nav li:nth-child(3) {background:#d23b2b;}
	.nav li:nth-child(4) {background:#a65722;}
	.nav li:nth-child(5) {background:#231815;}
	.nav li:nth-child(6) {background:#ca9a15;}
	.nav li:nth-child(7) {background:#b5b5b6;}
	.nav li:nth-child(8) {background:#33b1ba;}
	.navstyle ul li a{margin: 0;padding:3px;;display: inline-block;border: none;font-size: 1.1rem;}
}


/* ------------------ kv ------------------ */
.kv-red,.kv-yellow, .kv-blue, .kv-green{
	position: absolute;
	top: 20px;
	right:50px;
	opacity: 0;
}

.kv-red{
	animation: pop 10s 0s infinite ease-in-out;
}

.kv-yellow{
	animation: pop2 10s 0s infinite ease-in-out;
}

.kv-blue{
	animation: pop3 10s 0s infinite ease-in-out;
}

.kv-green{
	animation: pop4 10s 0s infinite ease-in-out;
}


@keyframes pop {
	0% {
		opacity: 0;
		transform: scale(.3);
	  }
	5% {
		opacity: 1;
		transform: scale(1);
	  }
	20% { 
		opacity: 1;
		transform: scale(.9); }

	24% { 
		opacity: 0;
		ransform: scale(1); }
	}

	@keyframes pop2 {
		
		25% {
			opacity: 0;
			transform: scale(.3);
		  }
		30% {
			opacity: 1;
			transform: scale(1);
		  }
		45% { 
			opacity: 1;
			transform: scale(.9); }

		49% { 
			opacity: 0;
			ransform: scale(1); }
		}


	@keyframes pop3 {
		
		50% {
			opacity: 0;
			transform: scale(.3);
		  }
		55% {
			opacity: 1;
			transform: scale(1);
		  }
		70% { 
			opacity: 1;
			transform: scale(.9); }
	
		74% { 
			opacity: 0;
			ransform: scale(1); }
		}

		@keyframes pop4 {
		
			75% {
				opacity: 0;
				transform: scale(.3);
			  }
			80% {
				opacity: 1;
				transform: scale(1);
			  }
			95% { 
				opacity: 1;
				transform: scale(.9); }
			
			100% { 
				opacity: 0;
				ransform: scale(1); }
			}

/* ------------------ 安全字 ------------------ */
.notice {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 10px 0;
	font-size: 1rem;
	line-height: 1.2rem;
	color: #ffffff;
	font-weight: 300;
	background: #1a1a1a;
}

/* ------------------  攻略  ------------------ */
.promotion_box ul{justify-content: space-evenly;margin-top: 30px;}
.promotion_box ul li img{width: 350px;}

@media screen and ( max-width: 991px ){
.promotion_box{width: 100vw;}
.promotion_box ul li{width: 95vw;}
.promotion_box ul li img{width: 95vw;}
}

/* ------------------ title ------------------ */

.titleC {margin: 0 auto;padding: 10px 0;text-align: center;}
  
.titleC h2 {position: relative;
	margin-top: 50px;
	padding: 20px;
	width: 1000px;
	font-size: 4.2rem;
	letter-spacing: 5px;
	font-weight: 500;
	color:#ffffff;
	font-family: Verdana, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
	border-bottom:2px dotted #fff;
	border-top:2px dotted #fff;
  }

  .titleC h3 {
	padding: 85px 0;
	width: 900px;
	font-size: 4rem;
	color:#ffffff;
	font-weight: 500;
	letter-spacing: 1px;
	font-family: Verdana, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
	z-index: 2;
	position: relative;
	top: 120px;
  }

 .titleC.title-blue h3{background: url(../images/title_bg_1.png) top center no-repeat;}
 .titleC.title-green h3{background: url(../images/title_bg_2.png) top center no-repeat;}
 .titleC.title-teal h3{background: url(../images/title_bg_3.png) top center no-repeat;}
 .titleC.title-purple h3{background: url(../images/title_bg_4.png) top center no-repeat;}
 .titleC.title-pink h3{background: url(../images/title_bg_5.png) top center no-repeat;}
 .titleC.title-red h3{background: url(../images/title_bg_6.png) top center no-repeat;}
 .titleC.title-orange h3{background: url(../images/title_bg_7.png) top center no-repeat;}
 .titleC.title-yellow h3{background: url(../images/title_bg_8.png) top center no-repeat;}
 .titleC.title-brown h3{background: url(../images/title_bg_15.png) top center no-repeat;}
 .titleC.title-black h3{background: url(../images/title_bg_9.png) top center no-repeat;}
 .titleC.title-white h3{background: url(../images/title_bg_10.png) top center no-repeat;color: #747474;}
 .titleC.title-gray h3{background: url(../images/title_bg_11.png) top center no-repeat;}
 .titleC.title-gold h3{background: url(../images/title_bg_12.png) top center no-repeat;}
 .titleC.title-sliver h3{background: url(../images/title_bg_13.png) top center no-repeat;color: #232323;}
 .titleC.title-two-color h3{background: url(../images/title_bg_16.png) top center no-repeat;}
 .titleC.title-all-color h3{background: url(../images/title_bg_17.png) top center no-repeat;}

.titleC.bottom-button a h2{
	background:url(../images/title_bg_18.png)top center no-repeat;
	border: none;
	padding-right:100px;
}


  @media screen and (max-width: 991px) {
	.titleC h2 {
	  font-size: 2.4rem;
	  padding: 10px;
	  width: 100vw;
	  margin-top: 25px;
	}
	.titleC h3 {
		font-size: 2rem;
		padding: 37px 0;
		width: 400px;
		top: 70px;
	  }
	  .titleC.title-blue h3{background: url(../images/title_bg_1m.png) top center no-repeat;}
	  .titleC.title-green h3{background: url(../images/title_bg_2m.png) top center no-repeat;}
	  .titleC.title-teal h3{background: url(../images/title_bg_3m.png) top center no-repeat;}
	  .titleC.title-purple h3{background: url(../images/title_bg_4m.png) top center no-repeat;}
	  .titleC.title-pink h3{background: url(../images/title_bg_5m.png) top center no-repeat;}
	  .titleC.title-red h3{background: url(../images/title_bg_6m.png) top center no-repeat;}
	  .titleC.title-orange h3{background: url(../images/title_bg_7m.png) top center no-repeat;}
	  .titleC.title-yellow h3{background: url(../images/title_bg_8m.png) top center no-repeat;}
	  .titleC.title-brown h3{background: url(../images/title_bg_15m.png) top center no-repeat;}
	  .titleC.title-black h3{background: url(../images/title_bg_9m.png) top center no-repeat;}
	  .titleC.title-white h3{background: url(../images/title_bg_10m.png) top center no-repeat;color: #747474;}
	  .titleC.title-gray h3{background: url(../images/title_bg_11m.png) top center no-repeat;}
	  .titleC.title-gold h3{background: url(../images/title_bg_12m.png) top center no-repeat;}
	  .titleC.title-sliver h3{background: url(../images/title_bg_13m.png) top center no-repeat;color:  #232323;}
	  .titleC.title-two-color h3{background: url(../images/title_bg_16m.png) top center no-repeat;}
	  .titleC.title-all-color h3{background: url(../images/title_bg_17m.png) top center no-repeat;}
	  .titleC.bottom-button a h2{
		background:url(../images/title_bg_18m.png)top center no-repeat;
		border: none;
		padding-right:40px;
		font-size: 2rem;
	}
	
}
/* ------------------ 區塊背景 ------------------ */
.bg_container{margin-top: -100px;}
.bg_1200{width: 1200px;margin: 0 auto;padding-top: 10px;border-radius:0 0 40px 40px;border:15px solid #eaeaeaa7;border-top:130px solid #eaeaeaa7;}
.bg_1200.title-blue{background: #548bf165;}
.bg_1200.title-green{background: #86ae19a6;}
.bg_1200.title-teal{background:#33b1baa6;}
.bg_1200.title-purple{background:#653fb7a6;}
.bg_1200.title-pink{background:#ffbcbce3;}
.bg_1200.title-red{background:#bf3f2893;}
.bg_1200.title-orange{background:#ce6000c9;}
.bg_1200.title-yellow{background:#f2b73fc9;}
.bg_1200.title-brown{background: #9a4d00bb;}
.bg_1200.title-black{background: #00000098;}
.bg_1200.title-white{background: #dfdfdfde;}
.bg_1200.title-gray{background: #656565de;}
.bg_1200.title-gold{background: #aa8115de;}
.bg_1200.title-sliver{background: #d2d2d2de;}
.bg_1200.title-tran{background: #9cb9d3de;}
#g .bg_container{margin-top: 20px;}
#g .bg_1200{border-top:15px solid #eaeaeaa7;}
.bg_1200.title-two-color{background: #f2b63fdc;}
.bg_1200.title-all-color{background: #afb73fdc;}


@media screen and ( max-width: 991px ){
	.bg_container{margin-top: -70px;}
	.bg_1200{width: 100vw; min-width: 100vw; border-radius:0 0 10px 10px;border:2px solid #eaeaeaa7;border-top:60px solid #eaeaeaa7;}          
	} 
  

/* ------------------ 改色 ------------------ */

.half ul {background: #666666;}
.scene .font p {color: #fff;}
  
.hightlight .font h4 {background: #4e7dcf;}

.alternate ul:nth-child(odd) li:first-child .font h4 {color: #ffffff;}
.alternate ul:nth-child(even) li:last-child .font h4 {color: #ffffff;}

.title-blue .alternate ul:nth-child(odd) li:first-child {background:  #57abe6;}
.title-blue .alternate ul:nth-child(even) li:last-child {background: #57abe6;}
.title-blue .alternate .font h4{color: #8998b3;}
.title-green .half ul {background: #9fb466;}
.title-green .hightlight .font h4 {background: #3b900a;}
.title-teal .hightlight .font h4{background: #01afbb;}
.title-purple .alternate ul:nth-child(odd) li:first-child {background:  #a17cf3;}
.title-purple .alternate ul:nth-child(even) li:last-child {background: #a17cf3;}
.title-purple .alternate .font h4{color: #5c14a0;}
.title-pink .collect_5x6 .s-row h4{background: #ff6d6d;}
.title-red .half ul {background: #c43c33;}
.title-red .hightlight .font h4 {background: #961a04;}
.title-orange .alternate ul:nth-child(odd) li:first-child {background:  #fd973e;}
.title-orange .alternate ul:nth-child(even) li:last-child {background: #fd973e;}
.title-orange .alternate .font h4{color: #e76c00;}
.bg_1200.title-yellow .alternate ul:nth-child(odd) li:first-child {background:  #f2b73f;}
.bg_1200.title-yellow .alternate ul:nth-child(even) li:last-child {background: #f2b73f;}
.bg_1200.title-yellow .alternate .font h4{color: #d19300;}
.title-brown .half ul {background: #a65722;}
.title-brown .hightlight .font h4 {background: #d89653;}
.title-black .collect_5x6 .s-row h4{background: #767676;}
.title-white .collect_5x6 .s-row h4{background: #9c9c9c;}
.title-gray .collect_5x6 .s-row h4{background: #3e3e3e;}
.title-gold .half ul {background: #ca9a15;}
.title-gold .hightlight .font h4 {background: rgb(125, 88, 7);}
.title-sliver .half ul {background: #a2a2a2;}
.title-sliver .hightlight .font h4 {background: rgb(104, 104, 104);}
.title-tran .alternate ul:nth-child(odd) li:first-child {background:  #f0added0;}
.title-tran .alternate ul:nth-child(even) li:last-child {background: #8acbf8d4;}
.title-tran .alternate .font h4{color: #b39789;}
.title-two-color .collect_5x6 .s-row h4{background: #66a1ed;}
.title-all-color .collect_5x6 .s-row h4{background: #2b307a;}	




 /*--goto top--*/          
 #gotop {display: inline-block;background-color: #000; width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}          
 #gotop::after {position: absolute;display: block;font-family: FontAwesome;content: '　';font-weight: normal;font-style: normal;font-size: 2em; line-height: 50px;color: #fff;opacity: 0.5;background: url("../images/top.png") center no-repeat;background-size: 50%;background-position: 85% 35%;}         
 #gotop:hover {cursor: pointer;background-color: #666;}          
 #gotop:active {background-color: #ccc;}          
 #gotop.show {opacity: 0.4;visibility: visible;}          
 @media screen and ( max-width: 991px ){          
 #gotop {bottom: 70px;right: 0;margin: 2vw;}
 }         
 /* share url */          
 #share{display: inline-block;background-color: #000;opacity:0.4;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 50px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;z-index: 1000;margin: 30px;}
 #share::after{position: absolute;display: block;font-family: FontAwesome;content: '　';font-weight: normal;font-style: normal;font-size: 2em; line-height: 50px;color: #fff;opacity: 0.5;background: url("../images/share.png") center no-repeat;background-size: 50%;background-position: 80% 35%;}
 #share:hover{cursor: pointer;background-color: #666;}
 #share:active{background-color: #666;}
 @media screen and ( max-width: 991px ){
 #share{bottom:115px;right: 0;margin: 2vw;}
 }                    
 @media screen and ( max-width: 991px ){          
 html{padding-bottom: 80px;}          
 }