@charset "utf-8";
/* CSS Document */
@import url("reset.min.1.2.css");
*{margin:0;
  padding:0;
  box-sizing: border-box;}

html{font-size:16px;}
html,body{width:100%;/* height:vh; */font-family: 'Microsoft JhengHei',monopin-j, sans-serif;
	font-weight: 400;font-style: normal;background-color:#000000 ;color: #FFFFFF;}

img{width:100%; height:auto;border:0px;}

a{width:100%; height:100%; color:#8f5720;text-decoration: underline;}
a:hover{cursor:pointer;}
ul{list-style-type:none;}

.ok{display:block;}
.no{display:none;}
.dk{filter:brightness(70%);}


.inline{display:inline-block;}
.txt_shadow{text-shadow:0 0 10px rgba(24, 13, 2, 1),0 0 8px rgba(24, 13, 2, 0.9),0 0 4px rgba(24, 13, 2, 1), 0 0 6px rgba(24, 13, 2, 0.9)}




.toplogo{width:20%;max-width:391px;position: absolute;left:3px;top:3px;z-index: 1140;}
.toplogo a{width:100%;}
.toplogo img{width:100%;transition:all 0.3s ease-out; }
.toplogo img:hover{filter:brightness(115%);transform:scale(1.05);}



.wrapper{width:100%;/*min-width: 480px;*/max-width:1920px;margin: 0 auto;position:relative;overflow: hidden;}


/*-----------封面---------*/

.cover_block{width:100%;max-width: 1920px;margin: 0 auto;position: relative; z-index:9;background:url("../images/cover_bg.webp") no-repeat center top;background-size:cover;animation:cover_bg 2s forwards ease-out;overflow: hidden;}
@keyframes cover_bg {
	0% {transform:scale(1.15);}
	100% {transform:scale(1);} 
	}	

.cover_sun{width:50%;max-width: 1000px;position:absolute;top:-15%;left:0;z-index: 99;animation:cover_sun 5s infinite ease-out;animation-delay: 4s;mix-blend-mode: color-dodge;opacity: 0;pointer-events: none;}
@keyframes cover_sun {
	0% {opacity:0;transform: rotate(-30deg); transform-origin: 20% 20%;}
	35% {opacity:1;}
	70% {opacity:0;transform: rotate(20deg);transform-origin: 20% 20%; }	  

	}

.cover_char_box{width: 100%; position: relative;}
.cover_char_1,.cover_char_2,.cover_char_3,.cover_char_4,.cover_char_l,.cover_char_r{position: absolute;pointer-events: none;opacity:0;}
.cover_char_1{width:47%;max-width: 790px;left: 5%;top:1%;animation:cover_r 1.8s forwards ease-out;animation-delay:1s;z-index: 4;}
.cover_char_2{width:57%;max-width: 1101px;left: 25%; top:0%;animation:cover_r 1.8s forwards ease-out;animation-delay: 1s;z-index: 6;}
.cover_char_3{width:35%;max-width: 907px;left: 59%; top:0%;transform: translateX(-50%);animation:cover_l 1.8s forwards ease-out;animation-delay: 1s;z-index: 5;}
.bg2{width: 100%;position: absolute;top: 0;left: 0;z-index: 10;}
@keyframes cover_r{
	0% {transform:translateX(-30%);opacity:0;}
	100% {transform:translateX(0);opacity:1;}
}

@keyframes cover_l{
	0% {transform:translateX(30%);opacity:0;}
	100% {transform:translateX(0);opacity:1;}
}

@keyframes weapon_r{
	0% {transform:translateX(20%) scale(1.35);opacity:0;}
	100% {transform:translateX(0) scale(1);opacity:1;}
}

@keyframes weapon_l{
	0% {transform:translateX(-20%) scale(1.35);opacity:0;}
	100% {transform:translateX(0) scale(1);opacity:1;}
}
@keyframes maintxt_fly {
	0% {transform:scale(.2) translateY(0);opacity:0;}
	50% {transform:scale(.2) translateY(100%);}
	100% {transform:scale(1) translateY(0);opacity:1;}
	}
@keyframes arrow_l {
	0% {transform: translateX(0);}
	50% {transform: translateX(15%);}	
	100% {transform: translateX(0);}	  
	}

.cover_main{width:100%;position: relative;margin:0 auto;padding-top: 20%; z-index: 12;animation-delay: 1s;/*padding-bottom: 12rem;*/ }
.maintxt_1box{margin: 0 auto; position: relative;animation:maintxt_fly 1.5s forwards ease-in;animation-delay:2.5s;opacity:0;}
.maintxt_1{width: 18.6%;max-width: 453px;margin: 0 auto; position: relative;animation:shiny 2s infinite linear;}
.maintxt_2{width:38%;max-width: 513px;margin: 0 auto; position: relative;top: 4rem;animation:shiny 1s infinite linear;}
.maintxt_3{width: 78%;max-width: 1248px;margin: 0 auto;top: 2rem;animation:maintxt_fly 1s linear;position: relative;}
@keyframes maintxt_2dec_l {
	0% {transform:skew(0deg, 0deg) rotate(0);transform-origin: 50% 5%;}
	23% {transform:skew(0deg, -4deg) rotate(13deg);transform-origin: 50% 5%;}
	48% {transform:skew(0deg, 3deg) rotate(-4deg);transform-origin: 50% 5%;}
	70% {transform:skew(0deg, -3deg) rotate(10deg);transform-origin: 50% 5%;}
	100% {transform:skew(0deg, 0deg) rotate(0);transform-origin: 50% 5%;}
	}
.maintxt_3_1{width:54%;max-width:680px;position: absolute;top:95%;left:0;z-index: 78;animation:maintxt_in 3s forwards ease-in;animation-delay: .5s;opacity:0;}
.maintxt_3_2{width:52%;max-width:660px;position: absolute;top:94%;right:0;z-index: 78;animation:maintxt_in2 1.6s forwards ease-in;animation-delay: 1.8s;opacity:0;}
@keyframes maintxt_in {
	0% {opacity:0;transform:translate(20%,-170%);}
	40% {opacity:1;}
	80% {transform:translate(20%,-170%);opacity:1;}
	100%{transform:translate(0,0);opacity:1;}
	}	

@keyframes maintxt_in2 {
	0% {opacity:0;transform:translate(-20%,-100%);}
	40% {opacity:1;}
	60% {transform:translate(-20%,-100%);opacity:1;}
	100%{transform:translate(0,0);opacity:1;}
	}	

.maintxt_3_m{position: absolute;top:0;z-index: 3;animation:shinya 2.5s infinite linear;}



.menu{width: 52%;max-width: 1000px;position: relative;margin:0 auto;z-index:80;}
.menu>ul{display:flex;flex-direction:row;justify-content:space-between;flex-wrap : wrap}
.menu>ul>li{width:25%;max-width: 288px; min-height: calc(100vw *111 / 1920);  position: relative; opacity:0;transition:all 0.5s;background-image:url("../images/menu_bg.png");}
.menu>ul>li,.menu>ul>li a{background-repeat:no-repeat; background-size:100% auto; transition:all 1s; display:block;}
.menu>ul>li a{opacity:1;}
.menu>ul>li .menu_bg{width:50%;top: 1.4vw;left: 50%;transform: translateX(-50%);position: relative;}
.menu_bg{filter: grayscale(100%);}
.menu_bg:hover{filter: grayscale(0%);}
.menu_txt{width: 60%;position: absolute;left: 50%;transform: translateX(-50%);top: 1.4vw;min-height: calc(100vw *40 / 1920);background-size: 100% auto;background-repeat: no-repeat;z-index: 999;}

.menu_txt1{background-image:url("../images/menu_txt1.png");}
.menu_txt1:hover{background-image:url("../images/menu_txt1_ov.png");}
.menu_txt2{background-image:url("../images/menu_txt2.png");}
.menu_txt2:hover{background-image:url("../images/menu_txt2_ov.png");}
.menu_txt3{background-image:url("../images/menu_txt3.png");}
.menu_txt3:hover{background-image:url("../images/menu_txt3_ov.png");}
.menu_txt4{background-image:url("../images/menu_txt4.png");}
.menu_txt4:hover{background-image:url("../images/menu_txt4_ov.png");}

.menu>ul>li:nth-child(1){animation:move_right 0.8s forwards ease-out;animation-delay: 3.5s;}
.menu>ul>li:nth-child(2){animation:move_right 0.8s forwards ease-out;animation-delay: 3s;}
.menu>ul>li:nth-child(3){animation:move_left 0.8s forwards ease-out;animation-delay: 3s;}
.menu>ul>li:nth-child(4){animation:move_left 0.8s forwards ease-out;animation-delay: 3.5s;}

.menu_n1{width:50%;max-width: 244px;position: absolute; top: -35%;left: 60%;z-index: 100;opacity: 0;}
.menu_n2{width: 70%;max-width: 218px;position: absolute; top:5%;right:10%;z-index: 4;}
.menu>ul>li:hover .menu_n1{animation:around_right 0.3s forwards linear;}
.menu>ul>li:hover .menu_n2{animation:around_left 0.3s forwards linear;}

@keyframes menu_txt {
	0% {transform:scale(1.3);filter:brightness(100%);}
	80% {transform:scale(1);filter:brightness(115%);}
	100% {transform:scale(1);filter:brightness(100%);}
	}

.menu>ul>li:hover .submenu{animation:move_up 0.7s forwards ease-out;}

.submenu{
	width:80%;
	max-width:245px;
	position: absolute;
	top:-21%;
	left:10%;
	z-index:-999;
	opacity:0;
	background:url("../images/submenu_bg.png") no-repeat center top;
	background-size: 100% auto;
	padding: 1vw 1.2vw 1vw 1vw;
}
.submenu ul{
	display:flex;
	flex-direction:column;
	justify-content:center;
	margin-top: 0.5vw;
	margin-bottom: -1vw;
	}
.submenu li{width:66%;max-width:134px;margin: 0 auto; position:relative;transition:all 0.5s;min-height: calc(100vw *35 / 1920) }
.submenu li a{display: block;}
.submenu li a:hover{filter:brightness(115%);}

.submenubg{width:100%;height:100%;position: absolute;top:0;left:0;z-index:-999;transform: scaleX(0.1); transform-origin: left; transition:0.4s ;background:url("../images/topmenu_ibg.png") no-repeat right center ;background-size:100% auto;opacity:0;}

.submenu li a:hover .submenubg{transform: scaleX(1);opacity:1; }

.floatmenu{width: 12.4%;
	max-width: 238px;
	position: absolute;
	top: 0;
	right: 3px;
	z-index: 78;
	background: url("../images/float_bg.png") no-repeat center top;
	background-size: auto;
	background-size: 100% auto;
	animation: float 1s forwards linear;animation-delay: 2s;opacity:0;transition:all 0.5s;}
.floatmenu ul{display:flex;flex-direction:column;justify-content:center;padding: 0vw 0 2vw 0;}
.floatmenu li{width: 65%;max-width: 175px;position:relative;margin: 0 auto;transition:all 0.5s;}
.floatmenu li:hover{filter:brightness(120%);transform: scale(1.05);}
.floatmenu li:nth-child(2){padding-top: .2vw;}
.menu_wait{width:42%;max-width:120px;position: absolute;top:0;left:50%;transform:translateX(-50%);z-index: 9;}
.menu_wait2{width:55%;max-width:150px;position: absolute;bottom:-25%;left:50%;transform:translateX(-50%);z-index: 9;}
.menu_wait3{width:70%;max-width:150px;position: absolute;bottom:-25%;left:50%;transform:translateX(-50%);z-index: 9;}

.line{width:90%;margin: 0 auto;}

/*-----------動態---------*/

@keyframes fadein {
	0% {opacity:0;}
	100% {opacity:1;}
	}	

@keyframes fadeout {
	0% {opacity:1;}
	100% {opacity:0;}
	}	

.move_left{animation:move_left .6s forwards ease-out;opacity:0;}
@keyframes move_left {
	0% {transform: translateX(75%);opacity:0;}
	100% {transform: translateX(0%);opacity:1;}	  
	}	

.move_right{animation:move_right .6s forwards ease-out;opacity:0;}
@keyframes move_right {
	0% {transform: translateX(-75%);opacity:0;}
	100% {transform: translateX(0%);opacity:1;}	  
	}



.move_up{animation:move_up 0.8s forwards ease-out;opacity:0;}
@keyframes move_up {
	0% {transform: translateY(0);opacity:0;}
	100% {transform: translateY(-60%);opacity:1;}	  
	}


@keyframes shiny {
	0% {filter:brightness(100%);}
	15% {filter:brightness(120%);}
	30% {filter:brightness(100%);}
	}	

@keyframes shinya {
	0% {opacity:0;}
	50% {opacity:1;}
	100% {opacity:0;}
	}	

@keyframes move_light {
	0% {opacity:0;}
	15% {opacity:0.4;}
	30% {opacity:0;}
	}

@keyframes around_left {
	0% {transform:rotate(0deg);}
	45% {transform:rotate(30deg);}
	55% {transform:rotate(30deg);}
	100% {transform:rotate(0deg);}
	}

@keyframes around_right {
	0% {transform:rotate(0deg);opacity:0;}
	45% {transform:rotate(-30deg);}
	55% {transform:rotate(-30deg);}
	100% {transform:rotate(0deg);opacity:1;}
	}

@keyframes float {
	0% {transform: translateY(-50%);opacity:0;}	
	90% {transform: translateY(1%);}
	100% {transform: translateY(0);opacity:1;}	  
	}


/*-----------COPYRIGHT---------*/

.footer{width:100%;max-width: 1280px; height: auto;position: relative;margin: 0 auto;display:flex;flex-direction: column;align-items: center ;flex-align: center; 
	padding: 1rem 0%;font-family:'微軟正黑體';font-weight: 600;z-index: 20;}

.footer li,.footer li span{ 
	font-size:.7rem;
	/*text-shadow:0 0 10px rgba(44, 78, 87, 1),0 0 8px rgba(44, 78, 87, 0.9),0 0 4px rgba(44, 78, 87, 1), 0 0 6px rgba(44, 78, 87, 0.9)*/}
.cr_con{ width:80%; margin: 0 auto; padding-bottom: 0.8rem; border-bottom: rgba(128, 161, 167, 0.8) 1px solid;}
.cr_con_black{border-bottom: rgba(159, 161, 137, 0.8) 1px solid;}
.cr_con_white{border-bottom: rgba(255, 255, 255, 0.8) 1px solid;}
.cr_con ul { display:flex; display:-ms-flexbox; justify-content:center;	-ms-flex-pack:center; align-items:center;-ms-flex-align:center;}
.cr_con ul li{transition:all 0.3s ease-out; /*chrome*/-webkit-transition:all 0.3s ease-out; /*firefox*/-moz-transition:all 0.3s ease-out;}
.cr_uj{width:180px;}
.cr_text{flex-grow:0;}
.cr_uj{ width: 100%; height: auto; max-width: 171px; }
.cr_txt{ text-align:left; line-height: 1.5; font-size: 0.7rem; padding: 1rem .5rem 0rem .8rem;}
.cr_black{color: #8b9282;}
.cr_white{color: #FFFFFF;}
.rank_con ul li img {margin:.3rem;}

.rank_con{ width:80%; }
.rank_con ul {display:flex; display:-ms-flexbox; flex-direction:row; -ms-flex-direction:row; justify-content:flex-start;-ms-flex-pack:start;flex-align: center;}
.rank_con ul li { text-align:left; font-size: .7rem; line-height: 1.5 ; padding: .5rem .5rem;
	transition:all 0.3s ease-out; /*chrome*/-webkit-transition:all 0.3s ease-out; /*firefox*/-moz-transition:all 0.3s ease-out;}
.rank_con ul li:nth-of-type(1) {width: 50%;}
.rank_con_black{width: 1%;border-left: rgba(151, 161, 138, 0.8) 1px solid;}
.rank_con_white{width: 1%;border-left: rgba(255, 255, 255, 0.8) 1px solid;}
.rank_con ul li:nth-of-type(3) {width: 48%;display:flex; align-items:center;flex-align:center;}
.rank_con ul li:nth-of-type(1){display:flex; align-items:center;flex-align:center;}
.icon img{ width:35px;; height: auto;}
.rank_con ul li:nth-of-type(1)>div:nth-of-type(2){padding-left:0.5rem; flex-grow:1;}





/*-----------RWD---------*/

@media (max-width:1700px){
	.silbox{top:50%;}

}

@media (max-width:1450px){
	.silbox{top:47%;}

}


@media screen and (max-width:1000px) {
	.silbox{top:45%;}
	.footer li, .footer li span,.rank_con ul li {font-size: .7rem;}
	.cr_txt {padding: 0 .5rem 0rem .8rem;}
	.rank_con ul {flex-direction: column;-ms-flex-direction: column;}
	.rank_con ul li:nth-of-type(1) {width: 100%;}
	.rank_con ul li:nth-of-type(2) {display: none;}
	.rank_con ul li:nth-of-type(3) {width: 100%;text-align: center; }
}



@media (max-width:800px){
	.cover_block{background:url("../images/cover_bg_800.webp") no-repeat center top;background-size:100% auto;animation:cover_bg 2s forwards ease-out;}
	.charbox,.cover_main,.silbox,.weapon_l,.weapon_r,.bg2{display: none;}
	.toplogo{width: 40%;}
	.menu{width: 80%; margin: 125% auto 0;}
	.menu>ul{display:flex;flex-direction:row;justify-content:center;flex-wrap : wrap}
	.menu>ul>li{width:50%;min-height: calc(100vw *111 / 800);}
	.menu_txt {top: 4.3vw;min-height: calc(100vw *47 / 800);}

	.menu>ul>li:nth-child(1){animation:move_right 0.8s forwards ease-out;animation-delay: 1.5s;}
	.menu>ul>li:nth-child(2){animation:move_left 0.8s forwards ease-out;animation-delay: 1.5s;}
	.menu>ul>li:nth-child(3){animation:move_right 0.8s forwards ease-out;animation-delay: 2s;}
	.menu>ul>li:nth-child(4){animation:move_left 0.8s forwards ease-out;animation-delay: 2s;}

	.submenu ul {padding-top: 3vw;}
	.submenu li {padding-bottom: 2vw;}

	.floatmenu{width:30%;right: -2vw;}
	.floatmenu ul{padding: 0vw 0 5vw 0;}
	}




@media (max-width:640px){
	.cr_uj {width: 70%;}
	.footer li, .footer li span, .rank_con ul li {display: inline-block;font-size: .6rem;}
	
}


@media screen and (max-width:430px) {
	.cover_sun{width:70%;top:-3%;left:0;z-index: 99;}
	.snowfall-flakes{display:none;}
	.cr_con ul{flex-direction: column;-ms-flex-direction: column;}
	.cr_uj {width: 40%;}
	.cr_con ul li {text-align: center;padding:2px 0;}
}