@charset "utf-8";
/* CSS Document */
@import url("reset.min.1.2.css");

html{font-size: 16px;	font-family:'微軟正黑體','Maven Pro', 'Droid Sans','Myriad Pro', Helvetica, Verdana, Geneva, sans-serif, noto-sans-cjk-kr; line-height:1.6;text-align: left; color:#FFFFFF; 
	font-weight: 400;
	font-style: normal;}
body{margin:0; padding:0;background-color: #1b0100;
	text-align: left; color:#e6c487; position: relative; }
	::-webkit-scrollbar {
		width: 12px;
	}
	 
	/* Track */
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}
	 
	/* Handle */
	::-webkit-scrollbar-thumb {
		-webkit-border-radius: 10px;
		border-radius: 10px;
		background: rgba(128, 104, 24, 0.8); 
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
	}
	::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(65, 3, 61, 0.4); 
	}

*{ font-size:1rem; /*chrome*/-webkit-box-sizing:border-box; /*firefox*/-moz-box-sizing:border-box; box-sizing:border-box;}
.clear{ height:0; clear:both; font-size:0rem!important;}
img{ width:100%; height:auto;font-size: 0;}
a{width:100%; height:100%;/* display: block;*/}
a:hover{cursor:pointer;}

/*像素比例尺*/
.ruler{height:18px; background:url(../images/ruler.png) no-repeat left top; position: fixed; top:0; right:0; bottom:0; left:0; z-index:9999; display:none;}

.bg_fixed{width:100%; height: 100%; background: url(../images/fixed.png) no-repeat center bottom / 100% auto; position:fixed; display: block; z-index:0;}
.all{width: 100%;background-color: #1b0100;background:url(../images/bg.png) no-repeat center top / 100% auto ; position: relative;overflow-x:hidden;overflow-y:auto; }
.content{width:64%;max-width: 1200px; margin: 0 auto;position: relative;}

#particles-js{
  width: 100%;
  background-size: 100% auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position:absolute;}

/*表頭*/
.hearder{width: 100%;position: relative;}
.top_bar{width: 12%;right: 1rem;top: 1rem; z-index: 9999;}
/* ---右上選單按鈕---*/
.btn_top_menu{ position: absolute; right:.5rem; top:.5rem; z-index:999; border: 1px solid rgb(189, 183,153); color:rgb(189, 183,153);
	/*chrome*/-webkit-border-radius: 36px; /*firefox*/-moz-border-radius: 36px; border-radius: 36px;background-color:rgba(74,38,6 ,0.7);z-index: 99999;}
.btn_top_menu ul{padding:.5rem .5rem .4rem .5rem; }
.btn_top_menu ul li{padding:0 .3rem .1rem .3rem; font-size:1rem; line-height:.8rem; font-weight:500; border-right:1px dotted #b7962a;  float:left;}
.btn_top_menu ul li:nth-child(2){border-right:0px;}
.btn_top_menu ul li a{width:100%; height:100%; padding:0 .5rem; color:rgb(189, 183,153); display:block; transition: top 1s;}
.btn_top_menu ul li a:hover{color:#dfb05a; transform: scale(1.1);transition:0.1s;}

.logo{width:43%;margin: 0 auto; position: relative;padding-top: 2rem; z-index: 9999;}
.logo a{width:100%; height: 100%; display: block;}
.logo a:hover{width:100%; height: 100%; display: block; position:relative;transition: 1s;transform: translateY(-2px);  filter:brightness(130%);}

.pp {width: 100%; position: absolute;left: 0rem;top: 2rem;}
.p1{width: 90%;	position: absolute;	top:0rem; left: -30%;transition-delay: .5s; animation:3s up infinite ease-out;}
.p2{width: 70%;	position: absolute; left: 45%; top:0rem; transition-delay: .6s;animation:4s up infinite ease-out;}
.p1_s ,.p2_s {display: none;}
.gold{width:150%;position: absolute;left: -25%;top: 12rem;mix-blend-mode: lighten;}

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

.h1{width:100%;margin: 0 auto; position: relative;display:flex;display:-ms-flexbox;justify-content:space-around;-ms-flex-pack: distribute;margin-top:-2rem ;flex-wrap: wrap;-ms-flex-wrap: wrap;}
.tt1{width: 55%;position: relative; transition-delay: .8s;animation:1s light infinite ease-out;}
.tt2{width: 45%;position: relative; transition-delay: .7s;animation:.9s light infinite ease-out;}
.tt3{width: 62%;position: relative; transition-delay: .7s;margin-top:-2rem;}


@keyframes light{
	0%,100% {filter: brightness(100%);}			
	50% {filter: brightness(130%);} 
}
.app_icon{width: 48%;margin: 0 auto;position: relative;transition-delay: .9s;padding-top: 2rem;padding-top: 2rem; }
.app_icon ul{width: 100%;display:flex;display:-ms-flexbox;justify-content:space-between;-ms-flex-pack:justify;}
.app_icon ul li{width: 33%;}
.app_icon ul li a{width:100%; height: 100%; display: block;}
.app_icon ul li a:hover{transition:.5s; filter:brightness(130%); }
.btn00{width: 40%;margin: 0 auto;position: relative;transition-delay: 1s;}
.btn00 a{width:100%; height: 100%; display: block;}
.btn00 a:hover{transition:.5s; filter:brightness(130%); transform: translateY(-1px);}

.menu_btn{width:100%; margin: 0 auto;position: relative;transition-delay: 1s;}
.menu_btn ul{width: 100%;display:flex;display:-ms-flexbox;justify-content:center;-ms-flex-pack:center;flex-wrap: wrap;-ms-flex-wrap: wrap;}
.menu_btn ul li{width:33%;}
.menu_btn ul li a,.menu_btn_s ul li a{width:100%; height: 100%; display: block;}
.menu_btn ul a:hover,.menu_btn_s ul a:hover{transition:.5s; filter:brightness(130%); transform: translateY(-1px);}



.footer{width:100%;padding:2rem 0 2rem 0;margin-top: 1rem; position: relative; transition-delay: 3s;background-color: #000;}


.cr{width:100%;max-width: 1200px; margin: 0 auto;position: relative; }
.cr>ul{width: 100%;display:flex;display:-ms-flexbox;align-items: center;-ms-flex-align:center;justify-content:space-between;-ms-flex-pack:justify;}
.cr>ul>li:nth-of-type(1){width:30%;}
.cr>ul>li:nth-of-type(2){width: 35%;}
.cr>ul>li:nth-of-type(3){width: 33%;}
.cr_block{width: 100%;display:flex;display:-ms-flexbox;align-items: center;-ms-flex-align:center;justify-content:space-around;-ms-flex-pack: distribute;}
.cr_logo{width: 45%;display: inline-block;}
.cr_text,.cr_text a,.cr_text a:hover{font-size:.7rem; color:#fff;}


.rank_con{width:100%; display:flex;display:-ms-flexbox;align-items: center;-ms-flex-align:center;justify-content:space-between;-ms-flex-pack:justify;}
.rank_icon{width:100%; max-width:42px; margin:0 .1rem 0 1rem;  display:inline-block;}
.rank_icon img{width:100%; max-width:42px;vertical-align: baseline;}

.rank_con>ol{ display:inline-block;  text-align:left;color: #fff;  line-height:1.6;list-style: disc;margin-left: 1rem;}
.rank_con>ol>li{width:100%; font-size:.7rem; line-height:1.6;}


/*內容*/
.article{width: 100%;position: relative;padding-top:3rem;}
.page{width: 100%; max-width:1000px; height:auto; position:relative; z-index:1; overflow:hidden;margin: 0 auto;}
.title,.title_s{width:100%;margin: 0 auto; padding-bottom: 1rem;}
.title{display: block;}
.title_s{display: none;}
.page_top,.page_article,.page_bottom{width: 100%;}
.page_mid{width: 99.9%; background:url(../images/page_bg_min.png) repeat-y center;background-size: 100% auto;}

.info{width:95%;margin: 0 auto; position: relative;padding-bottom:2rem;color: #e6c487;}
.info>ol{ font-size: 1.2rem;  font-weight: 800; list-style: none; position: relative;padding-bottom: 1.5rem;padding-left: 2.5%;}
.info>ol>li{position: relative; padding-bottom: .5rem;padding-left: .5rem;}
.info>ol>li::after{
	content: " ";width: 15px;height: 15px;position: absolute;top: .35rem;left: -1rem;display: block;z-index: 1;
	background: url(../images/list.png);background-size: 100%;}
.info>ol>li img{width: 100%; border: 5px solid #493903; border-radius:10px;}
.info>ol>li a{color: #e6c487;}
.info>ol>li a:hover{color: #e6c487;}
.info_tt{ font-size: 1.2rem;  font-weight: 800;  color: rgb(71, 8, 8);}
.info>ol>li span{display:inline-block;}
.box_style{margin: 0 auto;margin-bottom: 1rem;color: #000;}
.box_style table{width: 100%;text-align: center;border: 4px solid #360707;}
.box_style table td,.box_style table th{text-align: center;padding:.5rem;border: 1px solid #360707;}
.box_style table th{background-color:rgb(240, 179, 82);}
.box_style table td{background-color:rgb(230, 209, 175);}
.box_style table td:nth-of-type(1){background-color:rgb(204, 180, 146);}
.yellow{color: rgb(247, 213, 20);}
/*第00頁*/
.tt_h1,.tt_h1 span{width: 100%; font-size: 2rem;font-weight: 700;line-height: 1.6; text-align: center;display: inline-block;}
.tt_h1 a,.tt_h1 span a{width:100%; height: 100%; display: block;color: #dfb05a;font-size: 2rem;font-weight: 700;line-height: 1.6; text-align: center;}
.tt_h1 a:hover,.tt_h1 span a:hover{transition:.5s; filter:brightness(130%); transform: translateY(-1px);color: #dfb05a;}
.tt_h2{font-size: 1.5rem;font-weight: 800;line-height: 1.6;text-align: center;}
.tt_info{font-size: 1.2rem;font-weight: 800;line-height: 1.6;text-align: center;}
.tt_left{ text-align:left;color: #493903;position: relative;left: -18px;}
.tt_red{color: rgb(241, 10, 10);}
.ie10 .cha{background-color: #4f3934;border:0.3rem solid #60360f;padding: 2rem; box-shadow:4px 4px 12px -2px rgba(71, 41, 36, 0.5); }
.cha{ width:100%; border:30px solid transparent ; position: relative; margin-bottom: 1rem;
    border-image:url(../images/cha_border.png) 60 60 fill round;
	display:flex;display:-ms-flexbox;flex-wrap: wrap;-ms-flex-wrap: wrap;align-items: center;-ms-flex-align:center;}
.cha_pic{width:65%;}
.cha_pic div:nth-of-type(1){width:100%;margin: 0 auto;}
.cha_pic div:nth-of-type(2){width:30%;margin: 0 auto;}
.cha_info{width:35%;}
.cha_info ol{ font-size: 1.2rem;  font-weight: 800;  list-style: circle; left: 5%;position: relative;}
.cha_info ol li{position: relative; padding-bottom: .5rem;}
.cha_info ol li img{width: 100%; border: 5px solid #493903; border-radius:10px;}
.cha_box{width: 100%;border: 2px solid #9c3e07; color: #000; background-color:rgb(247, 211, 9);text-align: center; }
.cha_box span{display: inline-block;}
.cha_name{width: 80%;padding-bottom: 1rem;}
.cha_tt{width:95%;}



/*第1頁*/
.p1_s_title{width: 60%;margin: 0 auto;}
.icon{width:.9em; height:.9em; background:#e6c48c; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari */ transform: rotate(45deg);  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 3px solid #000; box-shadow: 0 0 0 2px #e6c48c,0 0 0 2px #e6c48c;}

.ss_title{ max-width:100%; font-size: 1.7em; line-height:1em; font-weight: bold;padding-bottom: .5rem;padding-left: 2rem;}

.icon{ float:left;margin-left: .5rem;margin-top: .5rem;}

/*第4頁*/

.p4info{width: 95%;
	margin: 0 auto;
	position: relative;
	padding-bottom: 2rem;
	padding-top: 2rem;
	color: rgb(255, 174, 0);}
.p4info>ol{ font-size: 1.3rem;  font-weight: 800; list-style:cjk-ideographic;;padding-left:3rem;position: relative;padding-bottom: 1.5rem;}
.p4info>ol>li{font-size: 1.25rem;line-height: 1.6; position: relative; padding-bottom: .5rem;padding-left: .5rem;}
.p4info_tt>span{color:  #dfb05a;font-size: 1rem;}
.p4_pic_box{width: 100%; display:flex;display:-ms-flexbox;align-items: center;-ms-flex-align:center;
	justify-content:center;	-ms-flex-pack:center;flex-wrap: wrap;-ms-flex-wrap: wrap; }
.p4_pic{width: 30%;padding: 1rem;}


/*第6頁*/
.p6_pic{width: 100%;margin: 0 auto ;border: 3px solid rgb(158, 116, 17);margin: 1rem 0;}
/*置頂按鈕*/
#btn_top{ width:74px; position:fixed; right:0; bottom:7rem; cursor:pointer; z-index:999;}

/*back*/	
#btn_top::before{content:" ";width:74px;height:57px;position:absolute;top:1rem; left:0px;display:block;z-index:-1;}	
#btn_top:hover::before{
	content:" ";width:74px;height:57px;position:absolute;top:-.5rem; left:0px;display:block;z-index:-1;}	
#btn_top::before{ 	
	background:url(../images/back.png)no-repeat center top;	background-size: 80% auto;}

/*back_ov*/	
#btn_top:hover::before{ 		
	background:url(../images/back.png)no-repeat center bottom; background-size: 80% auto;	
	animation: 1s btntopfootmark_an;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in;
	transition:.8s filter; filter:brightness(105%);	
	}
	@keyframes btntopfootmark_an{
		0%,12%,100% { transform:translateY(0px) ; }
		50% {transform:translateY(5px) ; } 
		70% {transform:translateY(2px) ;} 		
	}

/*txt*/	
#btn_top::after,
#btn_top:hover::after{ 
	content:" ";width:74px;height:30px;	position:absolute;	top:3rem; left:0;display:block;z-index:-1;}

#btn_top::after{ 
	background:url(../images/back_txt.png)no-repeat center top;background-size: 100% auto;	}


/*txt_ov*/	
#btn_top:hover::after{ 
	transition:.8s btntopfootmark_an; filter:brightness(120%);
	}


@media screen and (max-width:1500px){
	.content {width: 76%;}
	.cr>ul>li:nth-of-type(2){width: 33%;}
	.cr>ul>li:nth-of-type(3){width: 38%;}
	.btn00{width: 30%;margin: 0 auto;position: relative;transition-delay: .1s;}
	.menu_btn{width:100%; margin: 0 auto;position: relative;transition-delay: .1s;}
}

@media screen and (max-width:1100px){
	.content {width: 100%;}


	
}
@media screen and (max-width:800px){
	.app_icon {	width: 70%;}
	.btn00{width: 45%;}
	.menu_btn ul li {width: 33%;}
	.cr_text,.cr_text a,.cr_text a:hover{font-size:.6rem;}
	.rank_con > ol > li {font-size: .6rem;}
	.icon {	margin-left: .25rem;}


	
}
@media screen and (max-width:680px){
	.all{width: 100%;background:url(../images/bg_s.jpg) no-repeat center top;background-size: 100% auto;}
	.content{width:100%;}
	.logo {	width: 65%;	padding-top: 1rem;}
	.pp{display: none;}
	.btn_top_menu ul {padding: .2rem .1rem;}
	.btn_top_menu ul li{ font-size:.8rem;}
	.btn_top_menu ul li a{ font-size:.8rem; padding: 0 .3rem;}
	.h1{flex-wrap: wrap;-ms-flex-wrap: wrap;margin-top:0rem;}
	.tt1{width:100%;}
	.tt2{width: 80%;margin-top: -2rem;}
	.tt3{width: 90%;margin-top: -1rem;}
	.app_icon {width:90%;}
	.btn00 {width: 80%;}
	.menu_btn ul li {width: 50%;}

	.cr>ul{width: 100%;display:flex;display:-ms-flexbox;flex-wrap: wrap;-ms-flex-wrap: wrap;justify-content:center;	-ms-flex-pack:center;}
	.cr>ul>li:nth-of-type(1){width:60%;padding-bottom: 1rem;}
	.cr>ul>li:nth-of-type(2){width:80%;padding-bottom: 1rem;text-align: center;}
	.cr>ul>li:nth-of-type(3){width:auto;}
	.cr_logo{width: 50%;}
	.cr_text,.cr_text a,.cr_text a:hover{font-size:.7rem; color:#fff;}
	.rank_icon {margin: 0 .1rem 0 1.5rem;}
	.rank_con>ol>li{width:100%; font-size:.5rem; line-height:1.6;}

	#btn_top {bottom: 13rem;}

	.icon {margin-left: -.3rem;}
	.title{display: none;}
	.title_s{display: block;}

	.info {width: 90%;}
	.tt_h1,.tt_h1 a,.tt_h1 span,.tt_h1 span a ,.tt_h1 span a:hover{font-size: 1.3rem;}
	.tt_h2 {font-size: 1.2rem;}
	.cha{ width:100%; border:30px solid transparent ; position: relative; margin-bottom: 1rem;
    border-image:url(../images/cha_border.png) 60 60 fill round;
	display:flex;display:-ms-flexbox;flex-wrap: wrap;-ms-flex-wrap: wrap;}
	.cha_pic{width:100%;}
	.cha_pic div:nth-of-type(2){width:50%;margin: 0 auto;}
	.cha_info{width:100%;margin-top: 1rem;}
	.cha_name{width: 60%;}

	.p1_s_title{width: 100%;}
	.ss_title {font-size: 1.4rem;line-height: 1.3;padding-left: 1rem;}

	.p4_pic{width: 100%;}
	.p4info > ol > li {font-size: 1.2rem;padding-left: 0rem;}

}