@charset "utf-8";
/* CSS Document wlo:Cflower */
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 { border:0 none; margin:0; padding:0;}
input, textarea { border-radius:0; outline:0 none; resize:none; /*去掉iOS下input的默认内阴影*/}
body{ margin:0 auto;border: 0;padding: 0;background-color: transparent;}
em{font-style: normal;}
.fl{float: left;}
.fr{float: right;}
a{ text-decoration:none; }
li{ list-style:none; }
img{ vertical-align:top; }
input,textarea,select{ outline:none; }
.clearFix:after{ content:''; display:block; clear:both; }
body{font-family: "微软雅黑"; max-width: 640px; padding-bottom: 80px; }

/*头部*/
.header{width:640px; height: 1320px; background: url(../img/header.jpg) no-repeat;overflow: hidden;position:relative;}
.bodyer{width: 640px; height: 3302px; background: url(../img/bodyer.jpg) no-repeat;overflow: hidden;position:relative;}
.footer{width:640px; height: 10rem; background: url(../img/footer.png) no-repeat;overflow: hidden;position:relative;}

.top-banner{position:absolute; left:0; top:0; width:640px; z-index:20;}
.top-banner-btn{display:block; width:640px; margin:0 auto; position:relative;}
.top-banner-bg{
	width:640px;
	height:100px;
	position:relative;
	background: url(../img/topbar-bg.png) no-repeat center top;
	box-sizing: border-box;
}
.top-banner-icon{
	position:absolute;
	left:25px;
	top:12px;
	width:109px;
	height:109px;
	background: url(../img/topbar-icon.png) no-repeat center center;
	background-size: cover;
	border-radius: 20px;
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
	box-sizing: border-box;
	overflow: hidden;
}
.top-banner-title{
	position:absolute;
	left:124px;
	top:27px;
	width:220px;
	height:40px;
	background: url(../img/topbar-title.png) no-repeat left center;
	background-size: contain;
}
.top-banner-cta{
	position:absolute;
	right:26px;
	top:20px;
	display:block;
	width:180px;
	height:58px;
	background: url(../img/topbar-btn.png) no-repeat center center;
	background-size: contain;
	animation: topbar-cta-pulse 2.2s ease-in-out infinite;
}
.hero-link-btn-wrap{
	display:block;
	position:relative;
	margin-top:68.5rem;
	width:640px;
	height:115px;
	cursor:pointer;
	background:url(../img/shequ.png) no-repeat center center;
	background-size:contain;
	animation: page-btn-float 2.4s ease-in-out infinite;
}


.header h1{width:223px ; height: 78px; text-indent: -999em;margin-top:25px; margin-left: 20px;}
.header-slogan{width: 640px; height: 371px; margin: 0 auto; margin-top:40px ; }
.header-info-wrap{height: 120px; margin-top: 60px; margin-left:45px;}
.header-info{ float: left; padding-top: 10px; font-size: 30px; color: #fff;margin-left:30px; }
.header-info h3{color:#fff;}
.header-right{float: right; margin-top:30px; margin-right:10px; }
.luntan{width:133px; height: 42px; background: url(../img/luntan.png) no-repeat; margin-left: 120px; margin-top: 30px; }

.reserve-panel{
	width:640px;
	height:324px;
	background:url(../img/reserve-panel-bg.png) no-repeat center top;
	position:relative;
	overflow:visible;
}
.reserve-panel-inner{
	width:640px;
	height:324px;
	position:relative;
}
.reserve-platforms{
	position:absolute;
	top:85px;
	left:282px;
	height:19px;
	line-height:19px;
	font-size:0;
	white-space:nowrap;
}
.reserve-platform-toggle{
	display:inline-block;
	width:19px;
	height:19px;
	margin-right:96px;
	background:url(../img/radio-off.png) no-repeat center center;
	background-size:19px 19px;
	vertical-align:top;
}
.reserve-platform-toggle:last-child{
	margin-right:0;
}
.reserve-platform-toggle.is-active{
	background-image:url(../img/radio-on.png);
}
.reserve-phone-box{
	width:435px;
	height:67px;
	position:absolute;
	left:115px;
	top:118px;
	display:flex;
	align-items:center;
	padding:0 18px;
	box-sizing:border-box;
	background:url(../img/reserve-input-bg.png) no-repeat center center;
}
.reserve-phone-box:after{
	content:'';
	position:absolute;
	left:78px;
	top:28px;
	width:0;
	height:0;
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-top:10px solid #3c2771;
	pointer-events:none;
}
.reserve-region{
	position:absolute;
	left:-9999px;
	opacity:0;
	pointer-events:none;
}
.reserve-region-dropdown{
	position:relative;
	z-index:8;
	width:88px;
}
.reserve-region-trigger{
	display:block;
	height:36px;
	line-height:36px;
	padding-left:2px;
	color:#4a3693;
	font-size:24px;
	font-weight:bold;
	text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.reserve-region-label{
	display:block;
	white-space:nowrap;
}
.reserve-region-menu{
	display:none;
	position:absolute;
	left:-12px;
	top:44px;
	width:122px;
	padding:6px 0;
	border:3px solid #7a43dd;
	background:linear-gradient(180deg, rgba(255,245,255,.98) 0%, rgba(244,233,255,.98) 100%);
	box-shadow:0 10px 24px rgba(60,39,113,.28);
	border-radius:4px;
	overflow:hidden;
}
.reserve-region-dropdown.is-open .reserve-region-menu{
	display:block;
}
.reserve-region-option{
	display:block;
	height:46px;
	line-height:46px;
	padding:0 16px;
	color:#4a3693;
	font-size:22px;
	font-weight:bold;
	background:transparent;
}
.reserve-region-option + .reserve-region-option{
	border-top:1px solid rgba(122,67,221,.2);
}
.reserve-region-option.is-active,
.reserve-region-option:hover{
	background:linear-gradient(180deg, #ece0ff 0%, #fff9ff 100%);
	color:#6b3fd0;
}
.reserve-code{
	display:inline-block;
	margin-left:58px;
	font-size:24px;
	font-weight:bold;
	color:#4a3693;
}
.reserve-phone-input{
	flex:1;
	min-width:0;
	height:36px;
	border:0;
	background:transparent;
	margin-left:18px;
	font-size:24px;
	font-weight:bold;
	color:#4a3693;
}
.reserve-phone-input::placeholder{
	color:#7f6bb8;
}
/* 發送驗證碼按鈕 */
.send-code-btn{
	position:absolute;
	left:50%;
	top:225px;
	display:block;
	width:320px;
	height:84px;
	margin-left:-160px;
	background:url(../img/reserve-submit-btn.png) no-repeat center center;
	background-size:contain;
	cursor:pointer;
	animation: page-btn-float 2.5s ease-in-out infinite;
	font-size:0;
	color:transparent;
}
.send-code-btn.is-disabled{
	filter:grayscale(60%) brightness(1.1);
	cursor:default;
	animation:none;
}
/* 弹窗發送驗證碼按鈕位置 */
.send-code-btn-modal{
	left:50%;
	margin-left:-160px;
	top:388px;
	animation: modal-btn-shake 2.2s ease-in-out infinite;
}
/* 驗證碼輸入區（與手機號框共用同一行位置） */
.reserve-code-box{
	width:435px;
	height:67px;
	position:absolute;
	left:115px;
	top:118px;
	display:flex;
	align-items:center;
	padding:0 18px;
	box-sizing:border-box;
	background:url(../img/reserve-input-bg.png) no-repeat center center;
}
.reserve-code-input{
	flex:1;
	min-width:0;
	height:36px;
	border:0;
	background:transparent;
	margin-left:10px;
	font-size:24px;
	font-weight:bold;
	color:#4a3693;
}
.reserve-code-input::placeholder{
	color:#7f6bb8;
}
/* 弹窗驗證碼區位置 */
.reserve-code-box-modal{
	left:10px;
	top:288px;
}
/* 弹窗同意按鈕位置 */
.reserve-consent-toggle-modal{
	left:50%;
	margin-left:-218px;
	top:351px;
}
.reserve-consent-toggle{
	position:absolute;
	left:150px;
	top:193px;
	display:block;
	width:20px;
	height:20px;
	background:url(../img/check-off.png) no-repeat center center;
	background-size:20px 20px;
}
.reserve-consent-toggle.is-active{
	background-image:url(../img/check-on.png);
}
.reserve-submit-btn{
	position:absolute;
	left:50%;
	top:225px;
	display:block;
	width:320px;
	height:84px;
	margin-left:-160px;
	background:url(../img/reserve-submit-btn.png) no-repeat center center;
	animation: page-btn-float 2.5s ease-in-out infinite;
}
.reserve-submit-btn.is-verifying,
.reserve-submit-btn-modal.is-verifying{
	opacity:0.5;
	pointer-events:none;
	animation:none;
}
.reserve-modal-mask{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.6);
	z-index:999;
}
.reserve-modal{
	position:absolute;
	left:50%;
	top:50%;
	width:640px;
	height:488px;
	margin-left:-320px;
	margin-top:-244px;
	background:url(../img/reserve-modal-bg.png) no-repeat center top;
}
.reserve-modal-close{
	position:absolute;
	right:18px;
	top:22px;
	display:block;
	width:62px;
	height:62px;
	background:url(../img/reserve-modal-close.png) no-repeat center center;
	z-index:10;
}
.reserve-modal-inner{
	position:relative;
	width:640px;
	height:488px;
}
.reserve-modal-platforms{
	position:absolute;
	left:130px;
	top:245px;
	height:19px;
	font-size:0;
	white-space:nowrap;
}
.reserve-modal-platforms .reserve-platform-toggle{
	margin-right:96px;
}
.reserve-modal-platforms .reserve-platform-toggle:last-child{
	margin-right:0;
}
.reserve-phone-box-modal{
	left:10px;
	top:288px;
}
.reserve-submit-btn-modal{
	top:388px;
	animation: modal-btn-shake 2.2s ease-in-out infinite;
}
.intro-section{
	position:relative;
	width:640px;
}
.store-button-group{
	position:absolute;
	top:200px;
	right:45px;
	width:202px;
}
.store-side-btn{
	display:block;
	width:202px;
	background-repeat:no-repeat;
	background-position:center center;
	animation: store-btn-float 2.6s ease-in-out infinite;
}
.store-side-btn + .store-side-btn{
	margin-top:14px;
}
.appstore-btn{
	height:64px;
	background-image:url(../img/appstore-btn.png);
	animation-delay:0s;
}
.googleplay-btn{
	height:60px;
	background-image:url(../img/googleplay-btn.png);
	animation-delay:1.1s;
}
.fb-follow-section{
	position:relative;
	width:640px;
	height:420px;
}
.fb-follow-btn{
	position:absolute;
	right:32px;
	top:160px;
	display:block;
	width:293px;
	height:88px;
	background:url(../img/fb-follow-btn.png) no-repeat center center;
	animation: page-btn-float 2.3s ease-in-out infinite;
}
/*游戏介绍*/
.game-info{width:530px; height: 456px; background: url(../img/gameinfo.jpg) no-repeat; padding: 0 55px; color: #fff; font-size: 24px; overflow: hidden;position:relative;}
.game-info span{display: block;margin: 30px 0 15px; }


/*游戏福利*/
.game-welfare{width: 570px; height: 686px; background: url(../img/gamewelfare.jpg) no-repeat;padding: 0 35px; color: #fff; font-size: 24px; font-weight: bold;margin-top: -53px;
/*-webkit-text-stroke: 1.0px #3087ff;*/line-height:30px ; position: relative;}
.t1{margin: 0 auto; display: block; margin-bottom:18px ;}
.t2{margin: 20px auto; display: block;}
.game-welfare p{margin-bottom:10px ;}
.game-welfare span{display: block;}
.imgwel{display: block; margin: 25px 0;}
.welfare2{width: 553px; height:89px; background:url(../img/welfare2.png) no-repeat ; font-size: 20px; line-height: 28px; font-weight: normal; padding-top: 220px;}
.welfare2 p{background: url(../img/highball.png) no-repeat; text-indent: 1.5em; margin-left: 30px;}
.gelinbu{width: 69px; height: 79px; background: url(../img/gelinbu.png) no-repeat; position: absolute; bottom:158px; right:45px; z-index: 3;}


/*角色介绍*/
.game-dar{width: 640px; height: 781px; background: url(../img/gamedar.jpg) no-repeat;}
.darnav{width: 423px; height: 96px; overflow: hidden; margin-left: 128px;  margin-top:20px; }
.darnav ul{width: 423px; height: 96px;}
.darnav ul li{float: left; margin-right:44px;  width: 96px;position: relative;}
.darnav ul li i{ background: url(../img/dar_mh.png) no-repeat;width:96px;height:96px;position: absolute;left: 0;top: 0;}
.darnav ul li.on i{left: 0;top: -99px;}
.darbox{width: 559px; height: 389px; position: relative;}
.darbox li{position: relative; display: none; margin-left: 45px; }
.darbox li.on{display: block;}
.darbox li img{position: absolute;}
.darbox li .gif1{top: 60px;}
.darbox li .gif2{left:38px;top: 33px;}
.darbox li .gif3{left: -8px; top:40px;}


/*游戏高清图*/
.game-img{width: 640px; height: 800px; overflow: hidden;}

.feature-slider-wrap{
	position:relative;
	width:640px;
	height:826px;
}
.feature-slider-bg{
	position:absolute;
	left:50%;
	top:0;
	width:389px;
	height:826px;
	margin-left:-194.5px;
	background:url(../img/feature-slider-bg.png) no-repeat center top;
}
.pro-switch{
	position:absolute;
	left:50%;
	top:16px;
	width:365px;
	height:794px;
	margin-left:-182.5px;
	z-index:2;
}
.feature-slider-dots{
	position:absolute;
	left:0;
	right:0;
	bottom:-48px;
	height:27px;
}
.slider,
.flexslider,
.flexslider .flex-viewport{
	width:365px;
	height:794px;
}
.flexslider{
	position:relative;
	overflow:visible;
}
.flexslider .flex-viewport{
	overflow:hidden;
}
.slides li{
	width:365px;
	height:794px;
}
.feature-slide-image{
	display:block;
	width:365px;
	height:794px;
	background-repeat:no-repeat;
	background-position:center top;
	background-size:contain;
}
.slide-01{ background-image:url(../img/01.jpg); }
.slide-02{ background-image:url(../img/02.jpg); }
.slide-03{ background-image:url(../img/03.jpg); }
.slide-04{ background-image:url(../img/04.jpg); }
.slide-05{ background-image:url(../img/05.jpg); }
.slides li img{
	display:block;
	width:100%;
	height:auto;
}

.swiper-container{ width:640px;margin-top: -50px;   }
.swiper-slide{ width:640px; text-align:center;  }

.flex-direction-nav{
	width:100%;
	position:absolute;
	left:0;
	right:0;
	top:0;
	margin-top:381px;
	z-index:20;
}
.flex-prev{
	width:63px;
	height:63px;
	float:left;
	background: url(../img/prev.png) no-repeat;
	margin-left:-78px;
}
.flex-next{
	width:63px;
	height:63px;
	float:right;
	background: url(../img/next.png) no-repeat;
	margin-right:-78px;
}
.flex-control-nav{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	text-align:center;
	z-index:30;
}
.flex-control-nav li{
	display:inline-block;
	margin:0 8px;
	vertical-align:middle;
}
.flex-control-nav li a{
	display:block;
	width:14px;
	height:14px;
	background:url(../img/slider-dot-off.png) no-repeat center center;
	background-size:14px 14px;
	text-indent:-9999px;
	overflow:hidden;
}
.flex-control-nav li a.flex-active{
	width:27px;
	height:27px;
	margin:-6.5px 0;
	background:url(../img/slider-dot-on.png) no-repeat center center;
	background-size:27px 27px;
}


/*游戏最新动态*/
.game-news{width: 510px; height: 847px; background: url(../img/gamenews.jpg) no-repeat;padding: 0 65px;}
.game-news ul{margin-top: 10px;}
.game-news ul li{width:450px; height: 122px; margin: 0 auto;margin-bottom:10px ;}
.game-news ul li .fr{width: 290px; text-align: left;}
.game-news ul li a{color: #fff; font-size: 22px; line-height: 26px; display: block;width: 300px; height: 52px; overflow: hidden;}
.game-news ul li p{color: #fff; font-size: 18px;margin-top:15px ;}

@keyframes topbar-cta-pulse{
	0%, 100%{
		transform: translateY(0) scale(1);
	}
	20%{
		transform: translateY(-5px) scale(1.07);
	}
	40%{
		transform: translateY(0) scale(1);
	}
	60%{
		transform: translateY(-3px) scale(1.04);
	}
}

@keyframes page-btn-float{
	0%, 100%{
		transform: translateY(0) scale(1);
	}
	20%{
		transform: translateY(-4px) scale(1.04);
	}
	40%{
		transform: translateY(0) scale(1);
	}
	60%{
		transform: translateY(-2px) scale(1.02);
	}
}

@keyframes store-btn-float{
	0%, 100%{
		transform: translateY(0) scale(1);
	}
	18%{
		transform: translateY(-5px) scale(1.05);
	}
	36%{
		transform: translateY(0) scale(1);
	}
	54%{
		transform: translateY(-3px) scale(1.03);
	}
}

/* 弹窗左右位置：后续只改这里 */
.reserve-modal-position{
	left:50%;
	margin-left:-320px;
}

.reserve-modal-platforms-position{
	left:130px;
}

.reserve-phone-box-modal-position{
	left:10px;
}

.reserve-submit-btn-modal-position{
	left:50%;
	margin-left:-280px;
}

@keyframes modal-btn-shake{
	0%, 100%{
		transform: translateX(0);
	}
	8%{
		transform: translateX(-4px) rotate(-1deg);
	}
	16%{
		transform: translateX(4px) rotate(1deg);
	}
	24%{
		transform: translateX(-3px) rotate(-0.8deg);
	}
	32%{
		transform: translateX(3px) rotate(0.8deg);
	}
	40%{
		transform: translateX(0);
	}
}