body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, table, tbody, tfoot, thead, 
th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
table { border-spacing:0; border-collapse:collapse; }
fieldset, img { border:0; vertical-align:top; }
address, caption, cite, code, dfn, em, strong, th, var { font-weight:normal; font-style:normal; }
ol, ul { list-style:none; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
abbr, acronym { border:0; }
body { font: 12px/1.5 "Microsoft YaHei","Simsun", Arial; }
a { color:#595959; text-decoration:none; cursor:pointer; }
a:hover { color:#C91313; }
/* display */
/*.hide { display:none !important; }*/
/* textarea */
textarea{resize: vertical; overflow-y:auto; outline: 0 none;}
/* clear */
.clearfix:before, .clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
*.clearfix {zoom:1;}
.clear { clear:both; overflow:hidden; height:0px; font-size:0;}
.ellipsis{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
body{ position: relative;}
.main{ width:1000px; margin:0 auto; position:relative;}
.c-element{ position: absolute; top: 50%; left: 50%;}

.banner-wrap{ width:100%;}
.banner-wrap .head .logo{ width:228px; height:68px; background:url(../Images/logo.png) no-repeat; display:block; float:left; margin-top:15px;}
.banner-wrap .head .wcj{ width:80px; height:28px; float: left; margin:40px 0 0 12px;}
.banner-wrap .head .head-nav{ color:#6c6c6c; float:right; font-size:16px; margin-top:40px;}
.banner-wrap .head .head-nav li{ float:left; margin-right:40px; cursor:pointer; position:relative;}
.banner-wrap .head .head-nav li a:hover{ color:#333;}
.banner-wrap .head .head-nav li .qqgroup{ position:absolute; top:32px; right:-165px; width:338px; display:none;}
.banner-wrap .title{ width:573px; height:46px; margin:100px auto 10px; display: block;}
.banner-wrap .text{ text-align:center; font-size:20px; color:#a3a3a3;}
.banner-wrap .box{ width:980px; height:450px; margin:20px auto 0; color:#fff; position:relative;}
.banner-wrap .box .gift{ width:96px; height:96px; margin:-345px 0 0 -410px;}
.banner-wrap .box .sch{ width:99px; height:99px; margin:-315px 0 0 300px;}
.banner-wrap .box .rolled{ width:120px; height:120px; margin-top:-223px; margin-left:-487px;}
.banner-wrap .box .assist{ width:140px; height:140px; margin-top:-206px; margin-left:347px;}
.banner-wrap .box .quickness{ width:95px; height:95px; margin-top:-47px; margin-left:-433px;}
.banner-wrap .box .zol{ width:86px; height:86px; margin-top:-8px; margin-left:352px;}
.banner-wrap .box .down{ width:241px; height:55px; background:url(../Images/btn.png) no-repeat; text-align:center; line-height:55px; font-size:30px; color:#FFF; margin-top:-205px; margin-left:-134px;}
.banner-wrap .box .aq{ width:246px; height:24px; display: block; margin:-143px 0 0 -135px;}
.banner-wrap .box .banner{ width:745px; height:295px; margin-top:-100px; margin-left:-376px;}
.banner-wrap .box .icon{ width:69px; height:24px; margin:215px 0 0 -40px; animation: drop_down 0.8s infinite; -webkit-animation: drop_down 0.8s infinite; -moz-animation: drop_down 0.8s infinite;}

.bg-wrap{ width:100%; min-width:1000px; height:709px; background:url(../Images/bg.jpg) no-repeat center top; margin:35px 0 80px 0;}
.bg-wrap .subNav{ width:960px; height:170px; position:absolute; top:175px; left:20px;}
.bg-wrap .subNav ul li{ width:170px; height:170px; margin-right:92px; float:left; display:inline-block;}
.bg-wrap .subNav ul li:hover{ cursor:pointer;}
.bg-wrap .subNav ul li.focus-1{ background:url(../Images/focus.png) no-repeat;}
.bg-wrap .subNav ul li.focus-1:hover{ background:url(../Images/focus-hover.png) no-repeat;}
.bg-wrap .subNav ul li.focus-2{ background:url(../Images/focus.png) no-repeat -172px 0;}
.bg-wrap .subNav ul li.focus-2:hover{ background:url(../Images/focus-hover.png) no-repeat -172px 0;}
.bg-wrap .subNav ul li.focus-3{ background:url(../Images/focus.png) no-repeat -344px 0;}
.bg-wrap .subNav ul li.focus-3:hover{ background:url(../Images/focus-hover.png) no-repeat -344px 0;}
.bg-wrap .subNav ul li.focus-4{ background:url(../Images/focus.png) no-repeat -516px 0; margin-right:0;}
.bg-wrap .subNav ul li.focus-4:hover{ background:url(../Images/focus-hover.png) no-repeat -516px 0;}
.bg-wrap .subNav ul li.focus-1-on{ background:url(../Images/focus-hover.png) no-repeat;}
.bg-wrap .subNav ul li.focus-2-on{ background:url(../Images/focus-hover.png) no-repeat -172px 0;}
.bg-wrap .subNav ul li.focus-3-on{ background:url(../Images/focus-hover.png) no-repeat -344px 0;}
.bg-wrap .subNav ul li.focus-4-on{ background:url(../Images/focus-hover.png) no-repeat -516px 0;}
.bg-wrap .slide { width:1000px; height:319px; float:left; display:inline; margin-top: 390px; color:#FFF; overflow:hidden;}
.bg-wrap .slide .container { width:100%;height:100%;}
.bg-wrap .slide .container .neirong{ width:1000px; float:left; height:100%;}
.bg-wrap .slide .container .neirong .nr-1{ width:547px; height:319px; float:left;}
.bg-wrap .slide .container .neirong .nr-box{ width:420px; height:309px; float:right; padding-left:20px; padding-top:10px;}
.bg-wrap .slide .container .neirong .nr-box h1{ font-size:36px; color:#FFF; font-weight:500;}
.bg-wrap .slide .container .neirong .nr-box ul{ margin-top:10px;}
.bg-wrap .slide .container .neirong .nr-box ul li{ font-size:14px; margin-bottom:10px;}

.boutique-wrap .title-1{ width:383px; height:47px; background:url(../Images/title-1.png) no-repeat; margin:0 auto;}
.boutique-wrap .boutique-box{ width:1000px; height:490px; margin:35px auto 0;}
.boutique-wrap .boutique-box li{ width:160px; height:160px; position:relative; float:left; margin:0 0 5px 6px;}
.boutique-wrap .boutique-box li .game-box{ position:absolute; top:0; left:0; width:160px; height:160px;}
.boutique-wrap .boutique-box li .game-box .game-pic{ margin:20px 38px 5px;}
.boutique-wrap .boutique-box li .game-box .game-text{ font-size:14px; color:#3c3939; text-align:center; width:111px; margin:0 auto}
.boutique-wrap .boutique-box li .hover{ position:absolute; top:0; left:0; width:160px; height:160px; display: none;}
.boutique-wrap .boutique-box li .hover .jieshao{ width:160px; height:160px; background-color:#14c76a; opacity:0.9; position:absolute; filter: alpha(opacity=90); background-color: rgba(20,199,106,0.9);}
.boutique-wrap .boutique-box li .hover .nr-box{ padding:20px 0 20px 15px; color:#fff; font-size:14px; position:absolute; z-index:999; width:145px; height:104px;}
.boutique-wrap .boutique-box li .hover .nr-box p{ margin-bottom:6px; width:140px; overflow:hidden; text-overflow: ellipsis; white-space:nowrap;}
.boutique-wrap .boutique-box li:hover .hover{ display:block;}
.boutique-wrap .game-js{ font-size:24px; color:#a3a3a3; text-align:center; padding-top:100px;}
.boutique-wrap .game-js .color{ color:#32da85;}
.boutique-wrap .downbtn{ width:241px; height:55px; background:url(../Images/btn.png) no-repeat; text-align:center; line-height:55px; font-size:30px; color:#FFF; display:block; margin:20px auto 60px;}

.footer{ width:100%; height:109px; background-color:#353535; text-align:center; color:#fff; padding-top:35px; line-height:30px;}
.footer-nav a{ color:#fff;}
.footer-nav a:hover{ color:#F00;}

.xfc{ width:167px; height:188px; display: block; position: absolute; top: 500px; right:50px;}

@keyframes title{
	0%{ transform: translateY(-80%); opacity: 0;}
	100%{ transform: translateY(0%); opacity: 1;}
}
@keyframes qiuleft{
    0%{transform: translate(200px, 0px);opacity: 0}
	100%{transform: translate(0, 0px); opacity: 1}  
}
@keyframes qiuright{
    0%{transform: translate(-200px, 0px);opacity: 0}
	100%{transform: translate(0, 0px); opacity: 1}  
}
@keyframes flash{
    0%{opacity: 0}
	100%{opacity: 1}  
}
@keyframes drop_down{
    0%{transform: translate(0, -5px);}
	50%{transform: translate(0, 0);}
    100%{transform: translate(0, -5px);}
}
@-webkit-keyframes drop_down{
    0%{-webkit-transform: translate(0, -5px);}
    50%{-webkit-transform: translate(0, 0);}
    100%{-webkit-transform: translate(0, -5px);}
}
@-moz-keyframes drop_down{
    0%{-moz-transform: translate(0, -5px);}
    50%{-moz-transform: translate(0, 0);}
    100%{-moz-transform: translate(0, -5px);}
}
.on .title{ animation: title 1s forwards;}
.on .text{ animation: title 1s forwards; animation-delay:0.2s; opacity: 0;}
.on .qiuleft,.on .qiuright{animation-duration: 1s; animation-fill-mode: forwards;}
.on .qiuleft{ animation-name: qiuleft}
.on .qiuright{ animation-name: qiuright;}

.on .flash{ animation: flash 2s forwards;}
.on .flash-1{ animation: flash 2s forwards; animation-delay:0.1s;}
.on .flash-2{ animation: flash 2s forwards; animation-delay:0.2s;}