@charset "utf-8";
html,body{margin:0;padding:0;width:100%;height:100%; overflow-x:hidden;height:auto}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0; vertical-align:middle; font:inherit; -webkit-text-size-adjust: none; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, th, var { font-weight:normal; font-style:normal;}
table { border-collapse:collapse; border-spacing:0; }
fieldset, img, abbr, acronym { border:0; }
input, textarea, select { font-family:"Segoe UI", Helvetica, Arial, "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size:0.14rem; }
caption, th { text-align:left; }
q:before, q:after { content: ''; }
ul, ol, dl { list-style:none; }
i{ font-style:normal;}
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac \*/
.clearfix { display:block; }
/* End hide from IE Mac */
a{ text-decoration:none; outline:none}
html{ font-size:100px;}
*,div,a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}
::-webkit-input-placeholder{color:#fff;} 
:-moz-placeholder {color:#fff;} 
::-moz-placeholder {color:#fff;} 
:-ms-input-placeholder {color:#fff;} 
::-webkit-scrollbar{width:0.06rem; height:0.06rem}
::-webkit-scrollbar-track-piece{background-color:#ccc;-webkit-border-radius:0.06rem}
::-webkit-scrollbar-thumb:vertical{height:0.06rem;background-color:#534024;-webkit-border-radius:0.06rem}
body { font: normal 13px/1.5 "Helvetica Neue", Helvetica, STHeiTi, Roboto, Arial,"MSゴシック", Helvetica, sans-serif; position:relative; background:#000;}
body.arb{direction:rtl}
.btn_close{font-size: 18px !important;}

#container{background:url(../images/video_bg.jpg) no-repeat 100% 100%;}
#container canvas{ position:absolute; top:0px; left:0px;}
.nav{ position:relative; z-index:2; height:70px; width:100%; position:absolute; top:0px; left:0px; background:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);}
.nav_warrper{ width:100%; max-width:1920px; height:70px; margin:0 auto; position: relative;}
.logo{ height:70px; width:220px; background:url(../images/logo.png) no-repeat center center; background-size:155px 48px; position: absolute; top: 0px; left: 0px; z-index: 2;}
.nav_list{position: relative; height:70px; text-align:right;}
.nav_list ul li{ display:inline-block; *display:inline; *zoom:1; height:70px; padding:0 12px;}
.nav_list ul li a{ color:#a8a8a8;  height:54px; line-height:54px; font-size:18px; display:block; margin:8px 0; padding:0 44px; border-radius:5px; transition: 0.2s; }
/*.nav_list ul li.on a,.nav_list ul li:hover a{ color:#fdd000;background:rgba(255,255,255,0.2);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);}*/

.nav_list ul li.on a{ color:#fdd000;}
.nav_list ul li:hover a{ color:#fdd000;}
.nav_btn{ position: absolute; top: 8px; border-radius:5px; left: 600px; height:54px; background:rgba(255,255,255,0.2);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);}


/*
.page1{ max-width:1920px; height:916px; position:relative; margin:0 auto;}
.page1_bd{width:1920px; height:916px;position:absolute; top:0px; left:50%; margin-left:-960px; }
.page1_bd ul li{ position:relative; width:1920px; height:916px; text-align:center;}
.page1_bd ul li video{ width:100%; }
.page1_bd ul li img{ width:1920px; height:916px; }
.page1_hd{ height:22px; width:500px; position:absolute; bottom:60px; left:50%; margin-left:-250px; cursor:pointer; text-align:center;}
.page1_hd ul li{ display:inline-block; margin:0 8px; width:22px; height:22px; background:#fff; border-radius:50%; font-size:0;}
.page1_hd ul li.on{ background:#fdd000;}
.page1 a.prev{ width:37px; height:78px; background:url(../images/prev.png) no-repeat center center; position:absolute; top:418px; left:32px; opacity:0.5; transition:0.2s;}
.page1 a.next{ width:37px; height:78px; background:url(../images/next.png) no-repeat center center; position:absolute; top:418px; right:32px; opacity:0.5;transition:0.2s;}
.page1 a.prev:hover,.page1 a.next:hover{ opacity:1;}
.page1 a.more{ transition:0.2s; width:193px; height:54px; border:2px solid #fff; bottom:124px; left:50%; margin-left:-96px; position:absolute; overflow:hidden;}
.page1 a.more i{transition:0.2s; font-style:normal; width:175px; height:54px; line-height:54px; position:absolute; top:0px; left:0px; padding-left:18px; color:#fff; background:url(../images/arrow1.png) no-repeat 148px center; font-size:16px; }
.page1 a.more span{transition:0.2s;width:193px; height:54px; display:block; position:absolute; top:54px; left:0px; background:url(../images/arrow11.png) no-repeat center center;}
.page1 a.more:hover i{ top:-54px;}
.page1 a.more:hover span{top:0px;}
.page1 a.more:hover{border:2px solid #fdd000;}
*/

.page1{ max-width:1920px; height:1080px; position:relative; margin:0 auto;}
.page1_bd{width:1920px; height:1080px;position:absolute; top:0px; left:50%; margin-left:-960px; }
.page1_bd ul li{ position:relative; width:1920px; height:1080px; text-align:center; background: url(../images/loading1.gif) no-repeat center center;}
.page1_bd ul li video{ height: 100% }
.page1_bd ul li img{ width:1920px; height:1080px; }
.page1_hd{ height:22px; width:500px; position:absolute; bottom:160px; left:50%; margin-left:-250px; cursor:pointer; text-align:center;}
.page1_hd ul li{ display:inline-block; margin:0 8px; width:22px; height:22px; background:#fff; border-radius:50%; font-size:0;}
.page1_hd ul li.on{ background:#fdd000;}
.page1 a.prev{ width:37px; height:78px; background:url(../images/prev.png) no-repeat center center; position:absolute; top:50%; margin-top: -39px; left:32px; opacity:0.5; transition:0.2s;}
.page1 a.next{ width:37px; height:78px; background:url(../images/next.png) no-repeat center center; position:absolute; top:50%; margin-top: -39px; right:32px; opacity:0.5;transition:0.2s;}
.page1 a.prev:hover,.page1 a.next:hover{ opacity:1;}
.page1 a.more{ transition:0.2s; width:193px; height:54px; border:2px solid #fff; bottom:224px; left:50%; margin-left:-96px; position:absolute; overflow:hidden;}
.page1 a.more i{transition:0.2s; font-style:normal; width:175px; height:54px; line-height:54px; position:absolute; top:0px; left:0px; padding-left:18px; color:#fff; background:url(../images/arrow1.png) no-repeat 148px center; font-size:16px; }
.page1 a.more span{transition:0.2s;width:193px; height:54px; display:block; position:absolute; top:54px; left:0px; background:url(../images/arrow11.png) no-repeat center center;}
.page1 a.more:hover i{ top:-54px;}
.page1 a.more:hover span{top:0px;}
.page1 a.more:hover{border:2px solid #fdd000; background:rgba(0,0,0,0.5)}


.page2{ display: none; height:667px; background-position: center center; background-repeat: no-repeat; margin-top:17px; position:relative;}
.page2.on{ background-image: url(../images/2.jpg);}
.page2_warpper{ width:1400px; height:667px; margin:0 auto;}
.page2_warpper .app_left{ width:893px; height:667px; float:left; }
.page2_warpper .app_right{ width:507px; height:667px; float:right; text-align:right;}
.page2_warpper .app_right img{ margin-top:10px;}
.page2_app_top{ height:187px;width:893px; border-bottom:1px solid #fff; margin-top:93px; position:relative;}
.app_pic{ width:128px; height:128px; position:absolute; top:0px; left:0px;}
.app_pic img{ width:100%; height:100%; }
.app_name{ padding:15px 0; color:#fff; font-size:16px; width:128px; text-align:center; position:absolute; left:0px; top:128px;}
.app_item{height:128px; width:710px; float:right; position:relative;}
.app_item ul li{ position:absolute; height:46px; color:#d6d6d6; width:180px; background:url(../images/app_bg.png) no-repeat center center; text-align:center; line-height:1.1;}
.app_item ul li i{ font-size:24px;}
.app_item ul li span{ font-size:16px;}
.app_item ul li.i1{ top:12px; left:0px;}
.app_item ul li.i2{ top:12px; left:222px;}
.app_item ul li.i3{ top:74px; left:0px;}
.app_item ul li.i4{ top:74px; left:222px;}
.page2_app_bottom{ padding-top:1px; width:893px; height:385px;}
.app_text{ margin-top:10px; color:#d6d6d6; font-size:14px; line-height:2;}
.app_shop{ height:55px; width:400px; margin-top:60px;}
.app_shop ul li{ cursor:pointer; float:left; margin-right:12px; width:58px; height:55px; background-position:0 0;transition:0.2s;}
.app_shop ul li a{ display:block; width:100%; height:100%;}
.app_shop ul li.apple{background:url(../images/apple.png);}
.app_shop ul li.android{background:url(../images/android.png);}
.app_shop ul li:hover{background-position:0 -55px; }
.page2 a.more{ transition:0.2s; width:193px; height:54px; border:2px solid #fff; bottom:93px; left:50%; margin-left:-96px; position:absolute; overflow:hidden;}
.page2 a.more i{transition:0.2s; font-style:normal; width:175px; height:54px; line-height:54px; position:absolute; top:0px; left:0px; padding-left:18px; color:#fff; background:url(../images/arrow1.png) no-repeat 148px center; font-size:16px; }
.page2 a.more span{transition:0.2s;width:193px; height:54px; display:block; position:absolute; top:54px; left:0px; background:url(../images/arrow11.png) no-repeat center center;}
.page2 a.more:hover i{ top:-54px;}
.page2 a.more:hover span{top:0px;}
.page2 a.more:hover{border:2px solid #fdd000;}


/*page3*/
.page3{height:582px; background-position: center center; background-repeat: no-repeat; margin-top:17px; position:relative; padding-top:1px;}
.page3.on{background-image: url(../images/3.jpg);}
.page3_warpper{ width:1400px;  width: 823px; height:420px; margin:85px auto 0; position:relative; background:rgba(40,43,45,0.8);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#c8282b2d,endColorstr=#c8282b2d);}
.game_list{ z-index:2; width:233px; height:420px; position:absolute; top:0px; left:0px;}
.game_list ul li{ transition:0.2s; cursor:pointer; border-left:5px solid transparent; position:relative; width:228px; height:46px; padding:16px 0;}
.game_list ul li:after { display:none; content:""; width:10px; height:20px; background:url(../images/arrow3.png) no-repeat center center; position:absolute; right:-10px; top:30px;}
.game_list ul li.on{ border-color:#fdd000; background:#000;}
.game_list ul li.on:after{ display:block;}
.game_list ul li .img{ width:72px;height:46px; float:left; text-align:center;}
.game_list ul li .img img{ width:46px; height:46px;}
.game_list ul li .info{ height:46px; width:156px; float:left;}
.game_list ul li .info em{ font-weight: bold;display:block; font-size:14px; color:#c1c3c4; margin-top:5px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.game_list ul li .info span{ display:block; font-size:12px; color:#5c6266;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.game_list ul li.on .info em{ color:#fff;}
.more_game{display:block; z-index:2; color:#5d6266; font-size:12px; text-align:center; width:233px; text-align:center; transition:0.2s; margin-top: 4px;display: none;}
.game_pic{ position:absolute; width:590px; height:420px; top:0px; left:233px; overflow:hidden;}
.game_pic ul{width:590px; position:absolute; top:0px; left:0px;}
.game_pic ul li{width:590px; height:420px;}
.game_pic ul li a img{width:590px; height:420px;}
.news{ width:530px; height:420px; position:absolute; top:0px; right:25px; display: none;}
.new_list{ width:530px; height:32px; padding:16px 0; border-bottom:1px solid #7b7e7f;}
.new_list ul li{ cursor:pointer; position:relative; display:inline-block; height:32px; line-height:32px; padding:0 10px; color:#c3c3c3; font-size:14px; margin-right:20px;}
.new_list ul li:after { display:none; content:""; width:12px; height:6px; background:url(../images/arrow4.png) no-repeat center center; position:absolute; bottom:-6px; left:50%; margin-left:-6px;}
.new_list ul li.on{ background:#000; color:#fff;}
.new_list ul li.on:after{ display:block;}
.new_content{ width:530px; height:336px; padding:10px 0 9px 0;}
.new_content ul li{width:530px; height:336px;}
.new_content ul li i{ transition: 0.2s; display:block; display:block; height:42px; line-height:42px;font-size:14px;}
.new_content ul li i a{ display:block; color:#c3c3c3; float:left; height:42px; width:420px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap; transition: 0.2s }
.new_content ul li i span{color:#c3c3c3; float:right;transition: 0.2s}
.new_content ul li i:hover a,.new_content ul li i:hover span{transform:translate(-5px,0px); color: #fff;}


/*page4*/
.page4{ height:589px; background-position: center center; background-repeat: no-repeat;padding-top:1px; position:relative; margin-top:17px;}
.page4.on{background-image:url(../images/4.jpg);}
.page4_title{ width:100%; font-size:32px; color:#fff; text-align:center; position:absolute; top:40px; left:0px;}
.page4_warpper{width:1400px; height:358px; margin:114px auto 0; position:relative;}
.page4_warpper .join_list{ width:700px; height:360px; float:left; background:url(../images/join_bg.jpg) no-repeat center center;}
.page4_warpper .join_list ul li{ transition:0.2s; background:rgba(0,0,0,0.95); float:left; height:120px; width:350px; line-height:120px; text-align:center; color:#d3d3d3; font-size:22px;}
.page4_warpper .join_list ul li a{ transition:0.2s; color:#d3d3d3; display:block; width:100%; height:100%;}
.page4_warpper .join_list ul li.i1{ background:rgba(26,26,26,0.8);}
.page4_warpper .join_list ul li.i4{ background:rgba(26,26,26,0.8);}
.page4_warpper .join_list ul li.i5{ background:rgba(26,26,26,0.8);}
.page4_warpper .join_list ul li:hover{background:rgba(0,0,0,0.9);}
.page4_warpper .join_list ul li.i1:hover{ background:rgba(26,26,26,0.7);}
.page4_warpper .join_list ul li.i4:hover{ background:rgba(26,26,26,0.7);}
.page4_warpper .join_list ul li.i5:hover{ background:rgba(26,26,26,0.7);}
.page4_warpper .join_list ul li:hover a{color:#fff;}
.page4_warpper .join_video{ width:662px; height:360px; float:right; position:relative; overflow:hidden; background:#000 url(../images/loading.gif) no-repeat center center;}
.page4_warpper .join_video i{ width:31px; height:35px; background:url(../images/video_a.png) no-repeat center center; position:absolute; top:158px; left:318px;}
.page4_warpper .join_video span{ cursor:pointer; width:97px; height:97px; background:url(../images/video_s.png) no-repeat center center; position:absolute; top:126px; left:282px;}
.page4_warpper .join_video video{ width:100%; position:absolute; bottom:0px; left:0px; }
.page4_warpper .join_video span{-webkit-animation: rotate 3s linear infinite;-moz-animation: rotate 3s linear infinite;-ms-animation: rotate 3s linear infinite;-o-animation: rotate 3s linear infinite;animation: rotate 3s linear infinite;}
@-webkit-keyframes rotate {0%{-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}
@-moz-keyframes rotate {0%{-moz-transform: rotate(0deg);}100% {-moz-transform: rotate(360deg);}}
@-ms-keyframes rotate {0%{-ms-transform: rotate(0deg);}100% {-ms-transform: rotate(360deg);}}
@-o-keyframes rotate {0%{-o-transform: rotate(0deg);}100% {-o-transform: rotate(360deg);}}
@keyframes rotate {0%{transform: rotate(0deg);}100% {transform: rotate(360deg);}}
.more_new{ transition:0.2s; color:#c3c3c3; font-size:14px; position:absolute; top:24px; right:26px; display: none}
.more_new:hover{ color:#fff; text-decoration:underline;}
.page4_warpper .join_list ul li:hover a{transform:translate(0px,-5px); color: #fff;}

/*footer*/
.footer{ margin-top:15px; background:#191919;}
.footer_warpper{ width:1400px; height:280px; margin:0 auto; color:#999; position:relative;}
.footer_logo{ width:155px; height:48px; background:url(../images/logo.png) no-repeat; position:absolute; top:75px; top:67px; left:0px;}
.footer_logo a{ width: 100%; height: 100%; display: block;}
.footer_copyright{ position:absolute; top:72px; left:170px; line-height:1.5;}
.footer_copyright a{color:#999;text-decoration:underline; transition: 0.2s}
.footer_copyright a:hover{color:#fff; }
.footer_icon{ width:480px; height:44px; position:absolute;top:75px; left:860px;}
.footer_icon dl{ float:left; width:160px; height:44px;}
.footer_icon dl dt{ float:left; width:34px; height:44px;}
.footer_icon dl dd{ float:left; margin-left:10px;transition: 0.2s;}
.footer_icon dl a{ display:block; width:100%; height:100%; color:#999; transition: 0.2s;}
.footer_icon dl:hover dd{ color:#fff; font-weight:normal;}
.footer_fzwj{ width:38px; height:45px; position:absolute; top:75px; right:0px;}
.footer_fzwj a{ display:block; width:100%; height:100%;}
.footer_advice{ line-height:2; text-align:center; width:100%; position:absolute; top:190px; left:0px;}

/*list*/
body.list{ background:#282b2d;}
.list_banner{ background:url(../images/list.jpg) no-repeat center center; height:368px;}
.list_s{ width:1080px; height:32px; padding:32px 0; border-bottom:2px solid #414445; margin:0 auto; }
.list_s ul li{ cursor:pointer; position:relative; display:inline-block; height:32px; line-height:32px; padding:0 10px; color:#c3c3c3; font-size:16px; margin-right:20px;}
.list_s ul li:after { display:none; content:""; width:12px; height:6px; background:url(../images/arrow4.png) no-repeat center center; position:absolute; bottom:-6px; left:50%; margin-left:-6px;}
.list_s ul li.on,.list_s ul li:hover{ background:#000; color:#fff;}
.list_s ul li.on:after,.list_s ul li:hover:after{ display:block;}
.list_t{width:1080px; min-height: 300px; margin:0 auto; padding:10px 0;}
.list_t ul li{width:1080px; height:55px; line-height:55px; color:#bcbcbc; font-size:14px; border-bottom:1px dashed #434652; }
.list_t ul li a{ display:block; color:#c3c3c3; float:left; height:55px; width:900px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap; transition: 0.2s; }
.list_t ul li span{color:#c3c3c3; float:right; transition: 0.2s;}
.list_t ul li:hover a,.list_t ul li:hover span{ color:#fff; transform: translate(-5px,0px);}
.fullpage{ height:28px; margin:0 auto; text-align:center; font-size:0; margin:50px 0;}
.fullpage a{ display:inline-block; padding:0 10px; border:1px solid #46484a; border-left:none; height:26px; text-align:center; line-height:26px; color:#bcbcbc; font-size:14px;} 
.fullpage a.on,.fullpage a:hover{ color:#fdd000;}
.fullpage a.prev{border-left:1px solid #46484a;}


/*content*/
body.list{ background:#282b2d; }
.content{width:1080px; min-height:800px; margin:70px auto 0;padding:40px 0 20px 0;}
.content_top{ border-bottom:1px solid #535557;}
.content_top h1{ color:#fff; font-size:24px; text-align:center;}
.content_top span{ color:#bcbcbc; font-size:12px; width:100%; display:block; text-align:center; padding:10px 0;}
.content_info{ padding:30px 0; color:#bcbcbc; font-size:14px; line-height:2;}


/*animeate*/
.page2 .app_left{transform:translate(-200px,0px);}
.page2 .app_right{transform:translate(200px,0px);}
.page2.on .app_left{animation:0.8s page2_1 forwards linear;opacity: 0;}
@keyframes page2_1{0%{transform:translate(-200px,0px);opacity: 0;}100%{transform:translate(0px,0px);opacity: 1;}}
.page2.on .app_right{animation:0.8s page2_2 forwards linear;opacity: 0;}
@keyframes page2_2{0%{transform:translate(200px,0px);opacity: 0;}100%{transform:translate(0px,0px);opacity: 1;}}
.page3 .page3_warpper{transform:translate(0px,50px); }
.page3.on .page3_warpper{animation:0.8s 0.2s page3 forwards linear;opacity: 0;}
@keyframes page3{0%{transform:translate(0px,50px);opacity: 0;}100%{transform:translate(0px,0px);opacity: 1;}}
.page4 .join_list{transform:translate(-200px,0px);}
.page4 .join_video{transform:translate(200px,0px);}
.page4.on .join_list{animation:0.8s 0.2s page4_1 forwards linear;opacity: 0;}
@keyframes page4_1{0%{transform:translate(-200px,0px);opacity: 0;}100%{transform:translate(0px,0px);opacity: 1;}}
.page4.on .join_video{animation:0.8s 0.2s page4_2 forwards linear;opacity: 0;}
@keyframes page4_2{0%{transform:translate(200px,0px);opacity: 0;}100%{transform:translate(0px,0px);opacity: 1;}}
.footer{ overflow: hidden;}
.footer .footer_logo,.footer .footer_copyright,.footer .footer_icon,.footer .footer_fzwj,.footer .footer_advice{transform:translate(0px,50px); }
.footer.on .footer_logo,.footer.on .footer_copyright,.footer.on .footer_icon,.footer.on .footer_fzwj,.footer.on .footer_advice{animation:0.8s 0.2s footer forwards linear;opacity: 0;}
@keyframes footer{0%{transform:translate(0px,50px);opacity: 0;}100%{transform:translate(0px,0px);opacity: 1;}}

/*chinajoy*/
.chinajoy{ width:247px; width:2.47rem; height:125px; height:1.25rem; position:fixed; top:200px; top: 2rem;  left:20px; left:0.2rem; z-index:10; }
.chinajoy span{ cursor:pointer; position:absolute; top:-19px; top:-0.19rem; right:-17px; right:-0.17rem; background:url(../images/cj-icon-close.png) no-repeat; width:21px; width:0.21rem; height:27px; height:0.27rem; background-size: cover;}
.chinajoy a{ display:block; background:url(../images/cj-icon.png) no-repeat center center; width:100%; height:100%; background-size: cover;}

/*go2 入口*/
.other_game{ width: 823px; height: 420px; margin:85px auto 0; position: relative; background-color: rgba(0,0,0,0.2);}
.go2_other_game{ width: 14px; height: 23px;background: url(../images/go2go2.png) no-repeat; position: absolute; right:-40px; top: 50%;margin-top: -11px; display: none;}
.page3:hover .go2_other_game{display: block;}
.back2games{ width: 33px; height: 54px; background: url(../images/back2games.png) no-repeat; position: absolute; left:35px; top:50%; margin-top: -27px;}
.other_game .logo_list{ padding: 10px;}
.other_game .logo_list a{ display: inline-block; height: 31px;}
.logo_go2{ width:109px; height: 31px; background: url(../images/logo_go2.png) no-repeat; display: inline-block;}