@charset "utf-8";
/* CSS Document */

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp { border: 0; margin: 0; padding: 0; font-size: 100%;}
html,body {height: 100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block;}
b,strong {font-weight: bold;}
img {color: transparent; font-size: 0; vertical-align: middle;-ms-interpolation-mode: bicubic;}
ol,ul { list-style: none;}
li { display: list-item;}
table {border-collapse: collapse; border-spacing: 0;}
th,td,caption {font-weight: normal; vertical-align: top; text-align: left;}
q {quotes: none;}
q:before,q:after {content: ''; content: none;}
sub,sup,small {font-size: 75%;}
sub,sup {line-height: 0; position: relative; vertical-align: baseline;}
sub { bottom: -0.25em;}
sup {top: -0.5em;}
svg { overflow: hidden;}

/*pageLoad*/
body,html{ width:100%; height:100%;}

.page-load-container{ width:100%; min-height:100%; overflow:hidden; position:relative; top:0px; bottom:0px; right:0px; left:0px;}
.page-load-page{ width:100%; min-height:100%; overflow:hidden; }

.page-load-mask{ position:fixed; z-index:9999; left:0px; top:0px; width:100%; height:100%; text-align:center;filter: alpha(opacity=100);-moz-opacity:1;opacity: 1;}
.page-load-mask-img{background: url("loading.gif") no-repeat center center;display: inline-block;width: 60px;height: 9px;}
.page-load-mask-text{ line-height:30px; color:#ffffff; font-size:1.2em;}

/*手机端 不显示 A标签阴影*/
body, div, a, span, ul, li, img, div:after, div:before, a:after, a:before, span:after, span:before, ul:after, ul:before, li:after, li:before, img:after, img:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-touch-callout: none;-webkit-user-drag: none;-webkit-user-select: none;-ms-user-select: none;-ms-touch-action: none;-moz-user-select: -moz-none;-webkit-overflow-scrolling: touch;}

/*全局设置*/
body{ font-size:0.625em; font-family:Microsoft YaHei, Arial; opacity:1; -webkit-transition:opacity .3s ease;}
.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }
.ellipsis{white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('ellipsis.xml#ellipsis'); overflow:hidden;}
span[id*="cnzz_stat"]{ display:none;}
div[class*="-body"]{ -webkit-transform:translateZ(0);}

.none{ visibility:hidden;}
body{ background:#067700 url(bg-white-shine.jpg) top center; background-size:cover;}

.page-load-container{ opacity:0; -webkit-transition:opacity 300ms ease;}
.page-load-mask-img{ background: url("loadiiii.gif") no-repeat center center;width: 31px;height: 31px; }
.page-load-mask{background:rgba(0, 0, 0, 0.5);}
.page-load-mask-text{ line-height:30px; color:#ffffff; font-size:1.6em;}

.arrow{ width:0px; height:0px; overflow:hidden; border:6px solid #1e2c5b;}
.arrow.arrow-left{ border-left-color:transparent; border-top-color:transparent; border-bottom-color:transparent;}
.arrow.arrow-right{ border-right-color:transparent; border-top-color:transparent; border-bottom-color:transparent;}
.arrow.arrow-top{ border-left-color:transparent; border-top-color:transparent; border-right-color:transparent;}
.arrow.arrow-bottom{ border-bottom-color:transparent; border-left-color:transparent; border-right-color:transparent;}

.table{ display:table;}
.table .tr{ display:table-row;}
.table .tr .td{ display:table-cell;}

.body-blue{ }
.body-cyan{ background:#ddedfd url(bg-introduce.jpg); background-size:cover;}
.head-icon{ width:60px; height:60px; border-radius:60px; box-shadow:0px 0px 3px 0px #000000;}
.gather-icon{ display:inline-block; width:40px; height:40px; background:url(gather-icon.png) no-repeat center center; background-size:contain;}
.gather-icon-1{ display:inline-block; width:40px; height:40px; background:url(gather-icon-1.png) no-repeat center center; background-size:contain;}
.gather-icon.week{ display:inline-block; width:40px; height:40px; background:url(gather-icon-week.png) no-repeat center center; background-size:contain;}
.gather-icon-1.week{ display:inline-block; width:40px; height:40px; background:url(gather-icon-1-week.png) no-repeat center center; background-size:contain;}
.ranking-icon{ display:inline-block; width:40px; height:40px; background:url(world-ranking-icon.png) no-repeat center center; background-size:contain;}
.button-yellow{  width:145px; height:41px; margin:0 auto; color:#ffffff; line-height:41px; font-size:1.6em; font-weight:bold; text-align:center; background:url(bg-button.png) 0px 0px no-repeat; background-size:cover;}
.button-yellow:active{ background-position:0px -41px;}

.nav-type1{ padding-left:10px; position:fixed; z-index:1; top:0px; width:100%; height:45px; left:0px; background-color:#3a71ad; line-height:45px; font-size:1.8em; text-align:left; color:#b5d4f4;}
.nav-type2{background-image: -webkit-linear-gradient(top, #0b245a, #063667 5%, #014286 94%, #0553a5 99%);background-image: -moz-linear-gradient(top, #0b245a, #063667 5%, #014286 94%, #0553a5 99%);background-image: -o-linear-gradient(top, #0b245a, #063667 5%, #014286 94%, #0553a5 99%);background-image: linear-gradient(to bottom, #0b245a, #063667 5%, #014286 94%, #0553a5 99%); background-color:#014286;padding-left:5px; position:fixed; top:0px; width:100%; height:60px; left:0px;  line-height:60px;  z-index:1;}
i.icon{ margin-right:5px; margin-top:-2px; vertical-align:middle; display:inline-block; width:25px; height:25px; }
i.help-icon{ background:url(help-icon.png) center center no-repeat; background-size:contain;}
i.friend-icon{ background:url(friend-icon.png) center center no-repeat; background-size:contain;}
i.gift-icon-yellow{ background:url(gift-icon-yellow.png) center center no-repeat; background-size:contain;}
i.gift-icon-yellow-receive{ background:url(gift-icon-yellow-receive.png) center center no-repeat; background-size:contain;}
i.gift-icon-blue{ background:url(gift-icon-blue.png) center center no-repeat; background-size:contain;}
i.index-help-icon{ background:url(index-help-icon.png) center center no-repeat; background-size:contain;}
i.index-friend-icon{ background:url(index-friend-icon.png) center center no-repeat; background-size:contain;}
i.index-introduce-icon{ background:url(index-introduce-icon.png) center center no-repeat; background-size:contain;}

i.ranking-icon-week{ background:url(ranking-icon-week.png) center center no-repeat; background-size:contain; }
i.ranking-icon-world{ background:url(ranking-icon-world.png) center center no-repeat; background-size:contain; }
.active i.ranking-icon-week{ background:url(ranking-icon-week-active.png) center center no-repeat; background-size:contain; }
.active i.ranking-icon-world{background:url(ranking-icon-world-active.png) center center no-repeat; background-size:contain;  }

/*求助页面*/
.help-body{ padding-top:60px; padding-bottom:60px;}
.help-body .user-head{ width:40%; float:left; color:#eec902; line-height:1.6em; font-size:1.6em; text-align:center;}
.help-body .gather{ display:inline-block; color:#ffe60e; font-weight:bold; text-align:center; font-size:1.8em;}
.help-body .ranking{ margin-left:20px; display:inline-block; color:#ffe60e; font-weight:bold; text-align:center; font-size:1.8em;}
.help-body .icon-group{ width:60%; float:left; text-align:left; margin-top:15px;}

.help-body .help-cloud{ width:100%; position:relative;}
.help-body .help-cloud .bg-help-cloud{ width:100%; height:auto;}
.help-body .help-cloud .help-cloud-text{ position:relative; width:80%; margin:20px auto; background-color:#50bc37; border-radius:20px; padding:20px 10px; display:block; text-align:center; line-height:1.5em; color:#eff7ff; font-size:1.5em;}
.help-body .help-cloud .help-cloud-text .arrow{ border-width:16px; border-left-color:#50bc37; position:absolute; top:-16px; left:20px;}

.help-buttons{ height:45px; z-index:1; position:fixed; bottom:5px; left:0px; right:0px;}
.help-buttons .help-button{ text-decoration:none; position:absolute; height:45px; line-height:45px; background-color:#50bc37; font-size:1.8em; text-transform: uppercase;color: #113c75;}
.help-buttons .help-button-left .arrow{ border-right-color:#113c75;}
.help-buttons .help-button-right .arrow{ border-left-color:#113c75;}
.help-buttons .help-button:active{ opacity:0.8;}
.help-buttons .help-button.help-button-left{ left:0px; text-align:right; padding:0px 10px 0px 20px; border-top-right-radius:45px; border-bottom-right-radius:45px;}
.help-buttons .help-button.help-button-right{ right:0px; text-align:left; padding:0px 20px 0px 10px;border-top-left-radius:45px; border-bottom-left-radius:45px;}

.help-buttons .help-button .arrow-left{ position:absolute; left:0px; top:16px;}
.help-buttons .help-button .arrow-right{ position:absolute; right:0px; top:16px;}

.help-mask{ z-index:12; -webkit-transform: translateZ(0); position:fixed; left:0px; top:0px; bottom:0px; right:0px; background-color:rgba(0, 0, 0, 0.6);}
.help-mask-bubble{ position:absolute; left:0px; top:15%; right:0px; text-align:center;}
.help-mask-bubble img{ width:100%; height:auto;}
.help-mask-bubble .help-mask-text{text-align:center; display:block; position:absolute; left:0px; top:0px; right:0px; padding:24% 0px 0px 0px; line-height:1.6em; font-size:1.6em;color:#114479; }

/*世界排名*/
.ranking-body{ padding:60px 0px 10px 0px;}
.ranking-page .nav-type2{ text-align:left;}
.ranking-page .user-head .head-icon{ width:35px; height:35px; }
.ranking-page .user-head{ display:inline-block; text-align:left; vertical-align:middle; margin-top:-5px;}
.ranking-page .gather-ranking{margin-left:5px; margin-top:-2px; display:inline-block; vertical-align:middle; line-height:normal; max-width:260px;}
.ranking-page .gather-ranking .gr-c1{ float:left; max-width:55%;}
.ranking-page .gather-ranking .gr-c2{ float:left; max-width:45%;}
.ranking-page .gather{ line-height:normal; display:inline-block; margin-left:0px; margin-bottom:3px; min-width:100px; }
.ranking-page .ranking{line-height:normal; display:inline-block; margin-left:0px; margin-bottom:3px; min-width:100px;  position:relative;}
.ranking-page .gather .gather-icon1{ margin-right:5px; border-radius:2px; display:inline-block; font-size:1.4em; font-weight:bold; color:#1b5da5; background-color:#5793d1; padding:0px 2px;}
.ranking-page .ranking .ranking-icon1{ margin-right:5px; border-radius:2px; display:inline-block; font-size:1.4em; font-weight:bold; color:#FAFAFA; background-color:#50bc37; padding:0px 2px;}
.ranking-page .gather .gather-num{ color:#ffe60e; font-size:1.6em; font-weight:bold;}
.ranking-page .ranking .ranking-num{ color:#ffe60e; font-size:1.6em; font-weight:bold;}
.ranking-page .gather.week .gather-icon1{ background-color:#1667c0; color:#4ea7e3;}
.ranking-page .ranking.week .ranking-icon1{ background-color:#1667c0; color:#4ea7e3;}
.ranking-page .gather.week .gather-num{ color:#d2a73f;}
.ranking-page .ranking.week .ranking-num{ color:#d2a73f;}
.ranking-page .ranking-banner{ position:relative;}
.ranking-page .ranking-banner img{ width:100%; height:auto;}
.ranking-page .ranking-banner .ranking-banner-text{ font-size:2.6em; font-weight:bold; color:#e0effe; position:absolute; top:38%; left:48%;}
.ranking-page .ranking-banner .ranking-time{font-size:1em; color:#aad3ff; position:absolute; bottom:2px; left:5px;}

.ranking-list{ display:table; width:100%;}
.ranking-list .tr{ display:table-row;}
.ranking-list .th{ display:table-cell; line-height:24px; position:relative;}
.ranking-list .td{ display:table-cell; line-height:50px; height:5px; background-color:#1a3b12;}
.ranking-list .th .arrow{ position:absolute; left:45%; bottom:-12px; border-top-color:#50bc37;}
.ranking-list .th.th2 .arrow{border-top-color:#50bc37;}
.ranking-list .th.th1{ width:21%; min-width:60px; max-width:60px; color:#FAFAFA; background-color:#50bc37; font-weight:bold; font-size:1.4em; text-align:center;}
.ranking-list .th.th2{ width:45%; color:#FAFAFA; background-color:#1C8D02; font-weight:bold; font-size:1.4em; text-align:center;}
.ranking-list .th.th3{ width:34%; color:#FAFAFA; background-color:#32AF15; font-weight:bold; font-size:1.4em; text-align:center;}
.ranking-list .td.td1{ width:21%; min-width:60px; max-width:60px; background-color:#347c24;}
.ranking-list .td.td2{ width:45%; background-color:#347c24; padding:0 10px;}
.ranking-list .td.td3{ width:34%; background-color:#50bc37; text-align:center; color:#ffffff; font-weight:bold; font-size:1.8em;}
.ranking-list .td .user-head{ max-width:170px; color:#FAFAFA; font-size:1.6em;}
.ranking-list .td .user-head img{ margin:0px 5px;}

.ranking-list .td.r1{ background:#fffd4d url(r1.jpg) no-repeat center center; background-size:contain;}
.ranking-list .td.r2{ background:#ffcb4d url(r2.jpg) no-repeat center center; background-size:contain;}
.ranking-list .td.r3{ background:#ffa54d url(r3.jpg) no-repeat center center; background-size:contain;}
.ranking-list .td.r4{ background:#50bc37 url(r4.jpg) no-repeat center center; background-size:contain;}
.ranking-list .td.r5{ background:#50bc37 url(r5.jpg) no-repeat center center; background-size:contain;}
.ranking-list .td.r6{ background:#50bc37 url(r6.jpg) no-repeat center center; background-size:contain;}
.ranking-list .td.r7{ background:#50bc37 url(r7.jpg) no-repeat center center; background-size:contain;}
.ranking-list .td.r8{ background:#50bc37 url(r8.jpg) no-repeat center center; background-size:contain;}
.ranking-list .td.r9{ background:#50bc37 url(r9.jpg) no-repeat center center; background-size:contain;}
.ranking-list .td.r10{ background:#50bc37 url(r10.jpg) no-repeat center center; background-size:contain;}
.ranking-list .td.r0{ background:#50bc37 ;font-size:32px;color:#337820;text-align:right;}
.ranking-tab-group{ width:100%; height:45px; line-height:45px; text-align:center; color:#2474b3;background-color: #50bc37; font-size:1.6em; font-weight:bold;background-image: -webkit-linear-gradient(bottom, #063667, #004082 9%, #0553a5 99%);background-image: -moz-linear-gradient(bottom, #063667, #004082 9%, #0553a5 99%);background-image: -o-linear-gradient(bottom, #063667, #004082 9%, #0553a5 99%);background-image: linear-gradient(to top, #063667, #004082 9%, #0553a5 99%);}
.ranking-tab-group .ranking-tab{ width:50%; float:left; position:relative;}
.ranking-tab-group .ranking-tab.active{color:#ffffff;background-color: #50bc37;background-image: -webkit-linear-gradient(top, #0b245a, #063667 5%, #014286 96%, #0b245a 99%);background-image: -moz-linear-gradient(top, #0b245a, #063667 5%, #014286 96%, #0b245a 99%);background-image: -o-linear-gradient(top, #0b245a, #063667 5%, #014286 96%, #0b245a 99%);background-image: linear-gradient(to bottom, #0b245a, #063667 5%, #014286 96%, #0b245a 99%);}
.ranking-tab-group .ranking-tab .arrow{ display:inline-block; position:relative; top:3px;border-top-color:#2474b3;}
.ranking-tab-group .ranking-tab .more-button{ text-align:center; display:inline-block; width:30px; height:45px;}
.ranking-tab-group .ranking-tab.active .arrow{ border-top-color:#ffffff;}

.week-ranking-list{ display:none;}

.week-ranking-menu{ -webkit-transition:all .3s ease; opacity:0;  position:absolute; z-index:1; top:45px; left:100%; width:100%; background-color:#347c24; box-shadow:0px 0px 3px 1px #0b245a inset; border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
.week-ranking-menu li{ color:#FAFAFA; font-weight:normal; font-size:0.9em; line-height:35px; border-top:1px solid #0b245a;-webkit-transition:all .1s ease;}
.week-ranking-menu li:active{ background-color:#50bc37; color:#ffffff;}
.week-ranking-menu li.active{ background-color:#50bc37; color:#ffffff;}

.week-crown{ position:relative;}
.week-crown .icon-crown{ position:absolute; margin:0; right:0px; top:-15px;}

/*游戏主界面*/
.index-body{ position:absolute; top:80px; left:0px; right:0px; bottom:45px;background:url(index-bg.jpg) center center; background-size:cover;}
.index-body .index-body-bg{ width:100%; height:100%; background-size:cover !important; position:absolute; left:0px; top:0px; z-index:5;}
.index-page .nav-type2{ text-align:left; z-index:10;}
.index-page .nav-type2 .double-icon{ display:none;}

.index-page .nav-type2.double{-webkit-box-shadow: 1px 2px 5px #000;-moz-box-shadow: 1px 2px 5px #000;box-shadow: 1px 2px 5px #000;background-image: -webkit-linear-gradient(bottom, #d66d00, #d68600 4%, #b55d00 93%, #dc8a00);background-image: -moz-linear-gradient(bottom, #d66d00, #d68600 4%, #b55d00 93%, #dc8a00);background-image: -o-linear-gradient(bottom, #d66d00, #d68600 4%, #b55d00 93%, #dc8a00);background-image: linear-gradient(to top, #d66d00, #d68600 4%, #b55d00 93%, #dc8a00);}
.index-page .nav-type2.double .gather .gather-icon1{ background-color:#ffe60e; color:#b86000;}
.index-page .nav-type2.double .ranking .ranking-icon1{ background-color:#ffe60e; color:#b86000;}
.index-page .nav-type2.double .double-icon{ position:absolute; top:0px; right:0px; display:block; height:60px; width:25px; background:url(double-icon.png) no-repeat center center; background-size:cover;}

.index-page .nav-type2.double .gather.week .gather-icon1{ background-color:#ffd55e; color:#b86000;}
.index-page .nav-type2.double .ranking.week .ranking-icon1{ background-color:#ffd55e; color:#b86000;}

.index-page .nav-type2.double .gather.week .gather-num{ color:#ffd55e;}
.index-page .nav-type2.double .ranking.week .ranking-num{ color:#ffd55e;}

.index-page .ranking-time{ font-size:0.7em; color:#ffe60e; position:absolute; left:0px; bottom:-11px; width:90px;}

.index-page .user-head .head-icon{ width:35px; height:35px; }
.index-page .user-head{ display:inline-block; max-width:80px; text-align:left; vertical-align:middle; margin-top:-5px;font-size:16px;color:#fff;}
.index-page .gather-ranking{float:right; margin-top:2px; display:inline-block; vertical-align:middle; line-height:normal; max-width:220px;}
.index-page .gather-ranking .gr-c1{ float:left; max-width:33%;}
.index-page .gather-ranking .gr-c2{ float:left; max-width:33%;}
.index-page .gather-ranking .gr-c3{ float:left; max-width:33%;}
.index-page .gather{ line-height:normal; display:inline-block; margin-left:0px; margin-bottom:3px; min-width:80px; }
.index-page .ranking{line-height:normal; display:inline-block; margin-left:0px; margin-bottom:3px; min-width:80px;  position:relative;}
.index-page .gather .gather-icon1{ margin-right:5px; border-radius:2px; display:inline-block; font-size:1.4em; font-weight:bold; color: #FFFFFF;background-color: #5793d1; padding:3px 5px;}
.index-page .ranking .ranking-icon1{ margin-right:5px; border-radius:2px; display:inline-block; font-size:1.4em; font-weight:bold; color: #FFFFFF;background-color: #5793d1;padding:3px 5px;}
.index-page .gather .gather-num{ color:#ffe60e; font-size:1.6em; font-weight:bold;}
.index-page .ranking .ranking-num{ color:#ffe60e; font-size:1.6em; font-weight:bold;}

.index-page .gather.week .gather-icon1{ background-color:#1667c0; color:#4ea7e3;}
.index-page .ranking.week .ranking-icon1{ background-color:#1667c0; color:#4ea7e3;}
.index-page .gather.week .gather-num{ color:#d2a73f;}
.index-page .ranking.week .ranking-num{ color:#d2a73f;}

.index-buttons{ position:fixed; height:45px; width:100%; z-index:10; left:0px; bottom:0px;background-image: -webkit-linear-gradient(bottom, #062e57, #124d8a 8%, #0f58a3 95%, #3688dd 99%);background-image: -moz-linear-gradient(bottom, #062e57, #124d8a 8%, #0f58a3 95%, #3688dd 99%);background-image: -o-linear-gradient(bottom, #062e57, #124d8a 8%, #0f58a3 95%, #3688dd 99%);background-image: linear-gradient(to top, #062e57, #124d8a 8%, #0f58a3 95%, #3688dd 99%); background-color:#124d8a;}
.index-buttons .index-button{ text-decoration:none; -webkit-transition:all .1s ease; line-height:45px; text-align:center; font-size:1.6em;color: #2e85e0; font-weight:bold;}
.index-buttons .b1{ border-right:1px solid #0d3c6d;}
.index-buttons .b2{ border-right:1px solid #0d3c6d; border-left:1px solid #2a5a95;}
.index-buttons .b3{ border-left:1px solid #2a5a95;}
.index-buttons .index-button:active{background-image: -webkit-linear-gradient(bottom, #062e57, #124d8a 28%, #0f58a3 95%, #3688dd 99%);background-image: -moz-linear-gradient(bottom, #062e57, #124d8a 28%, #0f58a3 95%, #3688dd 99%);background-image: -o-linear-gradient(bottom, #062e57, #124d8a 28%, #0f58a3 95%, #3688dd 99%);background-image: linear-gradient(to top, #062e57, #124d8a 28%, #0f58a3 95%, #3688dd 99%);}
.power-num-container { width:100%; text-align:center; color:#ffffff; font-weight:bold; font-size:1.3em;-webkit-transform:translateZ(0); position:absolute; top:62px; z-index:11;}
.power-bar{-webkit-transform:translateZ(0); z-index:10; position:fixed; top:60px; left:0px; width:100%; height:20px; padding:2px 0px; -webkit-box-shadow: inset 0 0 13px rgba(0,0,0,0.75);-moz-box-shadow: inset 0 0 13px rgba(0,0,0,0.75);box-shadow: inset 0 0 13px rgba(0,0,0,0.75); background-color:#014081; }
.power-bar-percent{width:100%; text-align:center;-webkit-transform:translateZ(0);position:fixed; top:62px; left:0px; z-index:11;height:16px; -webkit-transition:all .3s ease;-webkit-border-radius: 11px 10px 10px 11px/0px 10px 11px 0px;-moz-border-radius: 11px 10px 10px 11px/0px 10px 11px 0px;border-radius: 11px 10px 10px 11px/0px 10px 11px 0px;background-color: #000;-webkit-box-shadow: inset -2px -5px 9px rgba(100,100,100,.75);-moz-box-shadow: inset -2px -5px 9px rgba(100,100,100,.75);box-shadow: inset -2px -5px 9px rgba(100,100,100,.75);background-image: -webkit-linear-gradient(right, #ff6e04, #ffe60e 80%, #abfbfe);background-image: -moz-linear-gradient(right, #ff6e04, #ffe60e 80%, #abfbfe);background-image: -o-linear-gradient(right, #ff6e04, #ffe60e 80%, #abfbfe);background-image: linear-gradient(to left, #ff6e04, #ffe60e 80%, #A07C7C);background-color: #ffe60e;}
.power-bar-percent .power-num{-webkit-transform:translateZ(0); display:inline-block; min-width:20px; text-align:center; padding-right:5px; line-height:16px;font-size:1.2em; }

.friend-page .power-bar{ top:45px;}
.friend-page .power-bar-percent, .friend-page .power-num-container{ top:47px;}
.friend-page .power-num-container{ position:fixed;}

.power-ball{ z-index:6; -webkit-transition:all 1s ease; position:absolute; top:0; width:100%; -webkit-transform:translateY(-50%) translateZ(0);}
.power-ball .power-ball-img{ width:100%; height:auto;}

.title-image{-webkit-transform:translateZ(0); z-index:7; width:100%; height:100%; background:url(title-image.png) top center; background-size:cover; position:absolute;}
.people-image{ -webkit-transition:all .5s ease; -webkit-transform:translateY(0px) scale(0.9) translateZ(0); z-index:7; width:100%; height:100%; background:url(people-image.png) top center; background-size:cover; position:absolute;}
.soya-image{-webkit-transform:scale(10) translateY(-100px) translateZ(0); -webkit-transition:all 0.5s ease; opacity:0; z-index:7; width:100%; height:100%; background:url(soya-image.png) top center; background-size:cover; position:absolute;}

.index-power-buttons{ z-index:8; position:absolute; width:100%; left:0px; bottom:10px; text-align:center; -webkit-transform:translateZ(0);}
.index-power-buttons .index-power-button .head-icon{ width:35px; height:35px; margin-right:3px; margin-top:-4px;}
.index-power-buttons .index-power-button {display:inline-block;width: 160px;height: 44px;margin: 0 auto;color: #ffffff;line-height: 44px;font-size: 1.6em;font-weight: bold;text-align: center;background: url(index-button.png) 0px 0px no-repeat;background-size: cover;}
.index-power-buttons .index-power-button:active{ background-position:0px -44px;}

.double-loop{position:absolute; right:10px; top:20px; z-index: 8; color:#ffe60e; text-align:center; line-height:32px; font-weight:bold;width:35px; height:35px;font-size:1.4em;-webkit-border-radius: 30px 29px 29px 30px/30px 30px 29px 29px;-moz-border-radius: 30px 29px 29px 30px/30px 30px 29px 29px;border-radius: 30px 29px 29px 30px/30px 30px 29px 29px;background-color: #c67208;border: solid 2px #ffe60e;-webkit-transition:all .3s ease;background-image: -webkit-linear-gradient(bottom, #d66d00, #f39800 5%, #f39800 6%, #c96700 93%, #dc8a00 100%);background-image: -moz-linear-gradient(bottom, #d66d00, #f39800 5%, #f39800 6%, #c96700 93%, #dc8a00 100%);background-image: -o-linear-gradient(bottom, #d66d00, #f39800 5%, #f39800 6%, #c96700 93%, #dc8a00 100%);background-image: linear-gradient(to top, #d66d00, #f39800 5%, #f39800 6%, #c96700 93%, #dc8a00 100%);}
.double-loop:active{ -webkit-transform:scale(1.2, 1.2)}
.double-loop .double-loop-line{ position:absolute; height:40px; top:-40px; left:15px; width:0px; border: solid 1px #ffe60e;}

.normal-strike{text-shadow:2px 1px #666666; z-index:11; -webkit-transition:all .2s ease; -webkit-transform:translateY(-60px) scale(0.5, 0.5) translateZ(0); position:absolute; opacity:0; top:-50px; left:36%; font-size:1.8em; color:#fff600; font-weight:bold; width:100px; height:40px; line-height:40px; text-align:center; background:url(normal-strike.png) no-repeat; background-size:contain;}
.double-strike{text-shadow:2px 1px #666666;z-index:11; -webkit-transition:all .2s ease; -webkit-transform:translateY(-60px) scale(0.5, 0.5) translateZ(0); position:absolute; opacity:0; top:-60px; left:35%; font-size:1.8em; color:#fff600; font-weight:bold; width:100px; height:40px; line-height:40px; text-align:center;background:url(normal-strike.png) no-repeat; background-size:contain;}
.critical-strike{text-shadow:2px 1px #666666;z-index:11; -webkit-transition:all .2s ease; -webkit-transform:translateY(-60px) scale(0.5, 0.5) translateZ(0); position:absolute; opacity:0; top:-70px; left:32%; font-size:2.4em;  color:#fff600; font-weight:bold; width:100px; height:60px; line-height:60px; text-align:center; background:url(critical-strike.png) no-repeat; background-size:contain;}

/*拉环动画*/
.animated1 {-webkit-animation: 1s ease;-moz-animation: 1s ease;-ms-animation: 1s ease;animation: 1s ease;}
.animated2 {-webkit-animation: 2s ease;-moz-animation: 2s ease;-ms-animation: 2s ease;animation: 2s ease;}
.upanddown {-webkit-animation-name: upanddown;-moz-animation-name: upanddown;-ms-animation-name: upanddown;animation-name: upanddown;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;-ms-animation-iteration-count: infinite;animation-iteration-count: infinite;}
@-webkit-keyframes upanddown {0% { -webkit-transform: translateY(0px);}50% { -webkit-transform: translateY(10px);}100% { -webkit-transform: translateY(0px);}}
.power-by{ font-size:1.2em; text-align:center; line-height:30px; color:#FAFAFA;}

/*声音开关*/
.switch-audio{ display:none; width:30px; height:30px; position:absolute; bottom:10px; right:10px; z-index:8;}
.switch-audio.on{ background:url(sound-on.png) no-repeat center center; background-size:contain;}
.switch-audio.off{ background:url(sound-off.png) no-repeat center center; background-size:contain;}

/*返回按钮*/
.to-index-button2{ text-decoration:none; display:inline-block; font-size:1.8em; color:#ffffff; text-align:center; width:50%; line-height:45px; background-color:#4993cf;}
.to-index-button3{text-decoration:none; display:inline-block; font-size:1em; color:#ffffff; text-align:center; width:40%; line-height:40px; background-color:#4993cf;}
.to-index-button{width:50px; height:45px; padding-top:4px; text-align:center; position:absolute; right:0px; top:0px; background-color:#50bc37; color:#023e7a; text-decoration:none; font-size:0.9em; line-height:1.2em;}
.ranking-banner .to-index-button{ top:0px; right:0px; font-size:1.6em;}