/* 热血传奇官网动态特效 */

.musicplay{
	-webkit-animation:fx-musicspin 6s linear infinite,fx-musicglow 2s ease-in-out infinite;
	animation:fx-musicspin 6s linear infinite,fx-musicglow 2s ease-in-out infinite;
}
.musicstop{
	-webkit-animation:none;
	animation:none;
}

#menu ul .logo img{
	-webkit-animation:fx-logoglow 2.8s ease-in-out infinite;
	animation:fx-logoglow 2.8s ease-in-out infinite;
}
#menu ul li a strong{
	transition:text-shadow .25s ease,color .25s ease;
}
#menu ul li:hover a strong{
	color:#ffe7a8;
	text-shadow:0 0 8px rgba(255,190,70,.9),0 0 16px rgba(255,120,20,.45);
}
#menu ul li:hover a span{
	color:#f3d9a0;
}
#menu{
	position:relative;
}
#menu:after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:2px;
	background:linear-gradient(90deg,transparent 0%,#8a5a18 15%,#f3e0a0 50%,#8a5a18 85%,transparent 100%);
	background-size:200% 100%;
	-webkit-animation:fx-goldline 4s linear infinite;
	animation:fx-goldline 4s linear infinite;
	pointer-events:none;
}
#menu ul li a strong{
	-webkit-transition:text-shadow .25s ease,color .25s ease,-webkit-transform .25s ease;
	transition:text-shadow .25s ease,color .25s ease,transform .25s ease;
}
#menu ul li:hover a strong{
	-webkit-transform:translateY(-1px);
	transform:translateY(-1px);
}

.fx-hero{
	position:absolute;
	left:0;
	top:0;
	width:1920px;
	height:1080px;
	z-index:6;
	pointer-events:none;
	overflow:hidden;
}
.fx-hero-mist{
	position:absolute;
	left:-12%;
	top:0;
	width:124%;
	height:100%;
	background:
		radial-gradient(ellipse 48% 32% at 20% 24%,rgba(255,228,170,.32),transparent 68%),
		radial-gradient(ellipse 40% 28% at 78% 36%,rgba(255,190,110,.22),transparent 70%),
		radial-gradient(ellipse 55% 22% at 50% 90%,rgba(80,20,0,.28),transparent 68%);
	-webkit-animation:fx-mist-drift 16s ease-in-out infinite alternate;
	animation:fx-mist-drift 16s ease-in-out infinite alternate;
}
.fx-hero-rays{
	position:absolute;
	left:6%;
	top:-6%;
	width:58%;
	height:72%;
	background:
		linear-gradient(118deg,transparent 38%,rgba(255,214,110,.28) 50%,transparent 62%),
		linear-gradient(102deg,transparent 44%,rgba(255,236,180,.2) 52%,transparent 60%);
	-webkit-animation:fx-rays 12s ease-in-out infinite alternate;
	animation:fx-rays 12s ease-in-out infinite alternate;
}
.fx-hero-title{
	position:absolute;
	left:28px;
	top:8px;
	width:740px;
	height:290px;
	overflow:visible;
	background:
		radial-gradient(ellipse 72% 58% at 40% 48%,rgba(255,186,50,.38),transparent 68%),
		radial-gradient(ellipse 38% 42% at 18% 38%,rgba(220,40,20,.22),transparent 70%),
		radial-gradient(ellipse 34% 40% at 66% 52%,rgba(255,230,140,.32),transparent 72%);
	-webkit-animation:fx-title-glow 2.6s ease-in-out infinite;
	animation:fx-title-glow 2.6s ease-in-out infinite;
}
.fx-hero-title:after{
	content:"";
	position:absolute;
	left:12%;
	top:16%;
	width:64%;
	height:62%;
	border-radius:50%;
	background:radial-gradient(ellipse at center,rgba(255,236,160,.5) 0%,rgba(255,170,50,.18) 42%,transparent 72%);
	box-shadow:0 0 36px 8px rgba(255,190,70,.22);
	-webkit-animation:fx-title-core 2.6s ease-in-out infinite;
	animation:fx-title-core 2.6s ease-in-out infinite;
}
.fx-hero-title:before{
	content:"";
	position:absolute;
	left:22%;
	top:28%;
	width:8px;
	height:8px;
	border-radius:50%;
	background:#ffe7a0;
	box-shadow:
		0 0 10px 4px rgba(255,220,120,.85),
		160px 18px 0 0 #ffd978,
		160px 18px 12px 3px rgba(255,200,80,.7),
		320px 8px 0 1px #fff1c0,
		320px 8px 10px 3px rgba(255,230,150,.65),
		480px 22px 0 0 #ffcc66,
		480px 22px 12px 3px rgba(255,170,50,.6);
	-webkit-animation:fx-title-spark 2.2s ease-in-out infinite;
	animation:fx-title-spark 2.2s ease-in-out infinite;
}
.fx-hero-warrior{
	position:absolute;
	right:0;
	top:10px;
	width:900px;
	height:1000px;
	overflow:hidden;
}
.fx-hero-warrior:after{
	content:"";
	position:absolute;
	top:-20%;
	left:-40%;
	width:32%;
	height:140%;
	background:linear-gradient(108deg,transparent 0%,rgba(255,220,140,.12) 40%,rgba(255,236,170,.55) 50%,rgba(255,220,140,.12) 60%,transparent 100%);
	-webkit-animation:fx-hero-shine 6.8s ease-in-out 1.2s infinite;
	animation:fx-hero-shine 6.8s ease-in-out 1.2s infinite;
}
.fx-hero-stamp{
	position:absolute;
	right:180px;
	top:50px;
	width:180px;
	height:180px;
	border-radius:50%;
	background:radial-gradient(circle,rgba(220,30,18,.45) 0%,rgba(200,20,10,.18) 42%,transparent 70%);
	box-shadow:0 0 28px rgba(220,24,16,.35);
	-webkit-animation:fx-stamp-pulse 2.4s ease-in-out infinite;
	animation:fx-stamp-pulse 2.4s ease-in-out infinite;
}
.fx-hero-slogan{
	position:absolute;
	left:150px;
	top:600px;
	width:820px;
	height:110px;
	background:radial-gradient(ellipse at center,rgba(255,180,50,.38),rgba(255,140,20,.08) 58%,transparent 74%);
	-webkit-animation:fx-slogan-glow 2.8s ease-in-out infinite;
	animation:fx-slogan-glow 2.8s ease-in-out infinite;
}
.fx-hero-dust i{
	position:absolute;
	width:5px;
	height:5px;
	border-radius:50%;
	background:#f0d9a0;
	opacity:0;
	box-shadow:0 0 8px 2px rgba(255,210,130,.85);
	-webkit-animation:fx-dust-float 10s linear infinite;
	animation:fx-dust-float 10s linear infinite;
}
.fx-hero-dust i:nth-child(2n){-webkit-animation-delay:1.4s;animation-delay:1.4s;}
.fx-hero-dust i:nth-child(3n){-webkit-animation-delay:2.8s;animation-delay:2.8s;}
.fx-hero-dust i:nth-child(4n){-webkit-animation-delay:4.2s;animation-delay:4.2s;}
.fx-hero-dust i:nth-child(5n){width:7px;height:7px;-webkit-animation-duration:13s;animation-duration:13s;}

.fx-intro{
	position:absolute;
	left:50%;
	top:0;
	width:1920px;
	height:800px;
	margin-left:-960px;
	z-index:1200;
	pointer-events:none;
}
.fx-intro-frame{
	position:absolute;
	left:373px;
	top:142px;
	width:1234px;
	height:610px;
	box-sizing:border-box;
	border:2px solid rgba(255,228,160,.28);
	box-shadow:0 0 14px rgba(255,200,80,.22),inset 0 0 18px rgba(255,210,90,.16);
	-webkit-animation:fx-frame-pulse 2.4s ease-in-out infinite;
	animation:fx-frame-pulse 2.4s ease-in-out infinite;
}
.fx-intro-scan{
	position:absolute;
	left:405px;
	width:1170px;
	height:2px;
	background:linear-gradient(90deg,transparent,rgba(255,236,180,.7),transparent);
	box-shadow:0 0 10px rgba(255,220,140,.55);
	-webkit-animation:fx-scan-down 5.5s linear infinite;
	animation:fx-scan-down 5.5s linear infinite;
}
.fx-intro-sword{
	display:block;
	position:absolute;
	left:130px;
	top:210px;
	width:380px;
	height:430px;
	background:radial-gradient(circle at 42% 58%,rgba(255,140,20,.4) 0%,rgba(255,80,0,.12) 38%,transparent 68%);
	-webkit-animation:fx-intro-sword 2.2s ease-in-out infinite;
	animation:fx-intro-sword 2.2s ease-in-out infinite;
}
.fx-m2{
	position:absolute;
	left:50%;
	top:0;
	width:1920px;
	height:100%;
	margin-left:-960px;
	z-index:80;
	pointer-events:none;
}
.fx-m2-attr,.fx-m2-game{
	position:absolute;
	left:560px;
	width:800px;
	height:48px;
	background:radial-gradient(ellipse 70% 90% at 50% 50%,rgba(255,200,70,.4),transparent 72%);
	-webkit-animation:fx-intro-glow 2.2s ease-in-out infinite;
	animation:fx-intro-glow 2.2s ease-in-out infinite;
}
.fx-m2-attr{top:72px;}
.fx-m2-game{top:886px;-webkit-animation-delay:.8s;animation-delay:.8s;}

#quicklinks a{
	-webkit-transition:-webkit-transform .18s ease;
	transition:transform .18s ease;
	-webkit-transform-origin:center center;
	transform-origin:center center;
}
#quicklinks a img{
	-webkit-transition:-webkit-filter .18s ease,filter .18s ease;
	transition:filter .18s ease;
	-webkit-animation:fx-btnidle 3.4s ease-in-out infinite;
	animation:fx-btnidle 3.4s ease-in-out infinite;
}
#quicklinks .down02_btn img{-webkit-animation-delay:.5s;animation-delay:.5s;}
#quicklinks .down03_btn img{-webkit-animation-delay:1s;animation-delay:1s;}
#quicklinks a:hover{
	-webkit-transform:translateY(-8px) scale(1.05);
	transform:translateY(-8px) scale(1.05);
	z-index:2;
}
#quicklinks a:hover img{
	-webkit-animation:none;
	animation:none;
	-webkit-filter:brightness(1.12) drop-shadow(0 10px 6px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(255,196,70,.7));
	filter:brightness(1.12) drop-shadow(0 10px 6px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(255,196,70,.7));
}
#quicklinks a:active{
	-webkit-transform:translateY(3px) scale(.97);
	transform:translateY(3px) scale(.97);
}
#quicklinks a:active img{
	-webkit-filter:brightness(.88) drop-shadow(0 1px 2px rgba(0,0,0,.4));
	filter:brightness(.88) drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

#PhotoShow .feature-frame{
	position:relative;
	transition:-webkit-transform .35s ease,transform .35s ease,box-shadow .35s ease;
}
#PhotoShow .feature-frame:hover{
	-webkit-transform:translateY(-4px);
	transform:translateY(-4px);
	box-shadow:0 0 0 1px #1a1006,0 0 0 2px #d7b25a,0 12px 28px rgba(0,0,0,.6),0 0 22px rgba(232,176,60,.4);
}
#PhotoShow .fx-shine{
	position:absolute;
	top:4px;
	right:4px;
	bottom:4px;
	left:4px;
	z-index:3;
	pointer-events:none;
	overflow:hidden;
}
#PhotoShow .fx-shine:after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	left:-18%;
	width:16%;
	background:linear-gradient(90deg,transparent,rgba(255,236,180,.28),transparent);
	-webkit-animation:fx-bladeshine 6.5s ease-in-out infinite;
	animation:fx-bladeshine 6.5s ease-in-out infinite;
}
#PhotoShow .feature-frame:nth-child(2) .fx-shine:after{-webkit-animation-delay:.9s;animation-delay:.9s;}
#PhotoShow .feature-frame:nth-child(3) .fx-shine:after{-webkit-animation-delay:1.8s;animation-delay:1.8s;}
#PhotoShow .feature-frame:nth-child(4) .fx-shine:after{-webkit-animation-delay:2.7s;animation-delay:2.7s;}
#PhotoShow .feature-frame:nth-child(5) .fx-shine:after{-webkit-animation-delay:3.6s;animation-delay:3.6s;}
#PhotoShow .feature-frame:nth-child(6) .fx-shine:after{-webkit-animation-delay:4.5s;animation-delay:4.5s;}

.fx-wait{
	opacity:0;
	-webkit-transform:translateY(36px);
	transform:translateY(36px);
}
.fx-in{
	opacity:1;
	-webkit-transform:none;
	transform:none;
	-webkit-transition:opacity .7s ease,transform .7s ease;
	transition:opacity .7s ease,transform .7s ease;
}

#PhotoShow .attr-panel .feature-img{
	-webkit-animation:fx-attrglow 3.2s ease-in-out infinite;
	animation:fx-attrglow 3.2s ease-in-out infinite;
}

@-webkit-keyframes fx-musicspin{
	from{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
	to{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes fx-musicspin{
	from{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
	to{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@-webkit-keyframes fx-musicglow{
	0%,100%{filter:drop-shadow(0 0 2px rgba(255,190,70,.4));}
	50%{filter:drop-shadow(0 0 10px rgba(255,160,40,.95));}
}
@keyframes fx-musicglow{
	0%,100%{filter:drop-shadow(0 0 2px rgba(255,190,70,.4));}
	50%{filter:drop-shadow(0 0 10px rgba(255,160,40,.95));}
}
@-webkit-keyframes fx-logoglow{
	0%,100%{filter:drop-shadow(0 0 2px rgba(255,200,80,.25));}
	50%{filter:drop-shadow(0 0 12px rgba(255,180,40,.8));}
}
@keyframes fx-logoglow{
	0%,100%{filter:drop-shadow(0 0 2px rgba(255,200,80,.25));}
	50%{filter:drop-shadow(0 0 12px rgba(255,180,40,.8));}
}
@-webkit-keyframes fx-btnshine{
	0%{left:-45%;opacity:0;}
	20%{opacity:1;}
	100%{left:120%;opacity:0;}
}
@keyframes fx-btnshine{
	0%{left:-45%;opacity:0;}
	20%{opacity:1;}
	100%{left:120%;opacity:0;}
}
@-webkit-keyframes fx-bladeshine{
	0%{left:-18%;opacity:0;}
	8%{opacity:1;}
	38%{left:110%;opacity:1;}
	46%,100%{left:110%;opacity:0;}
}
@keyframes fx-bladeshine{
	0%{left:-18%;opacity:0;}
	8%{opacity:1;}
	38%{left:110%;opacity:1;}
	46%,100%{left:110%;opacity:0;}
}
@-webkit-keyframes fx-attrglow{
	0%,100%{filter:drop-shadow(0 0 0 rgba(255,190,70,0));}
	50%{filter:drop-shadow(0 0 16px rgba(255,170,50,.35));}
}
@keyframes fx-attrglow{
	0%,100%{filter:drop-shadow(0 0 0 rgba(255,190,70,0));}
	50%{filter:drop-shadow(0 0 16px rgba(255,170,50,.35));}
}
@-webkit-keyframes fx-goldline{
	0%{background-position:0 0;}
	100%{background-position:200% 0;}
}
@keyframes fx-goldline{
	0%{background-position:0 0;}
	100%{background-position:200% 0;}
}
@-webkit-keyframes fx-mist-drift{
	0%{-webkit-transform:translateX(0);transform:translateX(0);}
	100%{-webkit-transform:translateX(-4%);transform:translateX(-4%);}
}
@keyframes fx-mist-drift{
	0%{-webkit-transform:translateX(0);transform:translateX(0);}
	100%{-webkit-transform:translateX(-4%);transform:translateX(-4%);}
}
@-webkit-keyframes fx-rays{
	0%{opacity:.45;-webkit-transform:translateX(0);transform:translateX(0);}
	100%{opacity:.9;-webkit-transform:translateX(3%);transform:translateX(3%);}
}
@keyframes fx-rays{
	0%{opacity:.45;-webkit-transform:translateX(0);transform:translateX(0);}
	100%{opacity:.9;-webkit-transform:translateX(3%);transform:translateX(3%);}
}
@-webkit-keyframes fx-hero-shine{
	0%{left:-40%;opacity:0;}
	12%{opacity:1;}
	42%{left:110%;opacity:.9;}
	50%,100%{left:110%;opacity:0;}
}
@keyframes fx-hero-shine{
	0%{left:-40%;opacity:0;}
	12%{opacity:1;}
	42%{left:110%;opacity:.9;}
	50%,100%{left:110%;opacity:0;}
}
@-webkit-keyframes fx-stamp-pulse{
	0%,100%{opacity:.55;-webkit-transform:scale(.92);transform:scale(.92);}
	50%{opacity:1;-webkit-transform:scale(1.08);transform:scale(1.08);}
}
@keyframes fx-stamp-pulse{
	0%,100%{opacity:.55;-webkit-transform:scale(.92);transform:scale(.92);}
	50%{opacity:1;-webkit-transform:scale(1.08);transform:scale(1.08);}
}
@-webkit-keyframes fx-slogan-glow{
	0%,100%{opacity:.4;}
	50%{opacity:1;}
}
@keyframes fx-slogan-glow{
	0%,100%{opacity:.4;}
	50%{opacity:1;}
}
@-webkit-keyframes fx-title-glow{
	0%,100%{opacity:.5;}
	50%{opacity:1;}
}
@keyframes fx-title-glow{
	0%,100%{opacity:.5;}
	50%{opacity:1;}
}
@-webkit-keyframes fx-title-core{
	0%,100%{-webkit-transform:scale(.92);transform:scale(.92);opacity:.55;}
	50%{-webkit-transform:scale(1.08);transform:scale(1.08);opacity:1;}
}
@keyframes fx-title-core{
	0%,100%{-webkit-transform:scale(.92);transform:scale(.92);opacity:.55;}
	50%{-webkit-transform:scale(1.08);transform:scale(1.08);opacity:1;}
}
@-webkit-keyframes fx-title-spark{
	0%,100%{opacity:.35;}
	50%{opacity:1;}
}
@keyframes fx-title-spark{
	0%,100%{opacity:.35;}
	50%{opacity:1;}
}
@-webkit-keyframes fx-dust-float{
	0%{opacity:0;-webkit-transform:translate(0,0);transform:translate(0,0);}
	12%{opacity:.55;}
	88%{opacity:.35;}
	100%{opacity:0;-webkit-transform:translate(40px,-160px);transform:translate(40px,-160px);}
}
@keyframes fx-dust-float{
	0%{opacity:0;-webkit-transform:translate(0,0);transform:translate(0,0);}
	12%{opacity:.55;}
	88%{opacity:.35;}
	100%{opacity:0;-webkit-transform:translate(40px,-160px);transform:translate(40px,-160px);}
}
@-webkit-keyframes fx-btnidle{
	0%,100%{-webkit-filter:drop-shadow(0 0 2px rgba(255,190,70,.15));filter:drop-shadow(0 0 2px rgba(255,190,70,.15));}
	50%{-webkit-filter:drop-shadow(0 0 10px rgba(255,180,50,.45));filter:drop-shadow(0 0 10px rgba(255,180,50,.45));}
}
@keyframes fx-btnidle{
	0%,100%{-webkit-filter:drop-shadow(0 0 2px rgba(255,190,70,.15));filter:drop-shadow(0 0 2px rgba(255,190,70,.15));}
	50%{-webkit-filter:drop-shadow(0 0 10px rgba(255,180,50,.45));filter:drop-shadow(0 0 10px rgba(255,180,50,.45));}
}
@-webkit-keyframes fx-intro-glow{
	0%,100%{opacity:.35;}
	50%{opacity:1;}
}
@keyframes fx-intro-glow{
	0%,100%{opacity:.35;}
	50%{opacity:1;}
}
@-webkit-keyframes fx-frame-pulse{
	0%,100%{
		border-color:rgba(255,228,160,.22);
		box-shadow:0 0 10px rgba(255,200,80,.14),inset 0 0 14px rgba(255,210,90,.1);
	}
	50%{
		border-color:rgba(255,236,180,.85);
		box-shadow:0 0 22px rgba(255,200,80,.45),inset 0 0 22px rgba(255,220,120,.28);
	}
}
@keyframes fx-frame-pulse{
	0%,100%{
		border-color:rgba(255,228,160,.22);
		box-shadow:0 0 10px rgba(255,200,80,.14),inset 0 0 14px rgba(255,210,90,.1);
	}
	50%{
		border-color:rgba(255,236,180,.85);
		box-shadow:0 0 22px rgba(255,200,80,.45),inset 0 0 22px rgba(255,220,120,.28);
	}
}
@-webkit-keyframes fx-scan-down{
	0%{top:176px;opacity:0;}
	8%{opacity:1;}
	90%{opacity:1;}
	100%{top:718px;opacity:0;}
}
@keyframes fx-scan-down{
	0%{top:176px;opacity:0;}
	8%{opacity:1;}
	90%{opacity:1;}
	100%{top:718px;opacity:0;}
}
@-webkit-keyframes fx-intro-sword{
	0%,100%{opacity:.4;-webkit-transform:scale(.94);transform:scale(.94);}
	50%{opacity:1;-webkit-transform:scale(1.06);transform:scale(1.06);}
}
@keyframes fx-intro-sword{
	0%,100%{opacity:.4;-webkit-transform:scale(.94);transform:scale(.94);}
	50%{opacity:1;-webkit-transform:scale(1.06);transform:scale(1.06);}
}

@media (prefers-reduced-motion:reduce){
	.fx-shine{display:none !important;}
	.musicplay,#menu ul .logo img,#PhotoShow .attr-panel .feature-img,#quicklinks a img,#menu:after{
		-webkit-animation:none !important;
		animation:none !important;
	}
	#quicklinks a:hover,#quicklinks a:active{
		-webkit-transform:none;
		transform:none;
	}
	.fx-wait{opacity:1;-webkit-transform:none;transform:none;}
}