﻿@charset "utf-8";body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,p,th,td{margin:0;padding:0}
img{border:0;vertical-align:top}
ol,ul{list-style:none}
a,area{blr:expression(this.onFocus=this.blur())}
body{font:normal 12px/20px "微软雅黑","宋体",Tahoma,Geneva,sans-serif;background:url(../images/bg_body.jpg) repeat-y center;overflow-x:hidden; color:#000}
a{color:#a9764d;text-decoration:none;outline:none}
a:hover{color:#e0cfaa;text-decoration:none}

.ml10{margin-left:10px;}
ul,ol,li{list-style:none;}
.fl{float:left}
.fr{float:right}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*zoom:1}

/*---mp3--*/
.musicbox{width:47px;height:47px;position:absolute;z-index:50000;top:10px;left:20%;cursor:pointer;}
.musicplay{background:url(../images/musicplay.png) no-repeat}
.musicstop{background:url(../images/musicstop.png) no-repeat}

.disb{display:block;}
.hid{display:none;}
.disib{display:inline-block;*display:inline;*zoom:1;}
.mt12{margin-top:12px;}
.mt10 { margin-top:10px;}
.ml10 { margin-left:10px;}
.ti{text-indent:-999em;}
.pt100{padding-top:100px;}
.pt250{padding-top:250px;}

.bgyan01 { background:#4e483a}

.k3{width:1160px;height:auto; overflow:hidden;margin:0 auto;margin-top:10px;position:relative;z-index:56;padding-top:00px;z-index:10; }

.m1{width:100%;height:auto;overflow:hidden;margin:0 auto;position:relative;margin-top:-1900px;overflow-x: hidden; }
.m1_div { width:217px; height:450px; }
.m1_buut { width:273px; height:450px;  overflow:hidden; background:url(../images/buut.jpg) no-repeat}
.m1_buut01 { float:left; width:273px; height:170px; background:url(../images/buut.jpg) no-repeat 0px 0px;}
.m1_buut01:hover { background-position:-273px 0px;}
.m1_buut02 { float:left; width:273px; height:122px; background:url(../images/buut.jpg) no-repeat 0px -170px;}
.m1_buut02:hover { background-position:-273px -170px;}
.m1_buut03 { float:left; width:273px; height:162px; background:url(../images/buut.jpg) no-repeat 0px -292px;}
.m1_buut03:hover { background-position:-273px -292px;}


.m2{width:100%;height:auto;overflow:hidden;margin:0 auto;position:relative;z-index:140; padding-top:0px;}

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,pre,form,p,blockquote,input,abbr,article,aside,figcaption,figure,footer,header,mark,meter,menu,nav,output,progress,section,summary,time{margin:0;padding:0;vertical-align:baseline;}
ul,ol{list-style:none;}
iframe,a,img,button{border:0;}
table{border-collapse:collapse;border-spacing:0;}
article,aside,footer,header,hgroup,nav,section,figure,figcaption{display:block;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
.clear{clear:both;}
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;overflow:hidden;}
.clearfix{zoom:1;}
.hidden{display:none;}
img{vertical-align:middle;}
body{
	font:12px/1.5 Arial,STHeiti,simsun,Helvetica,"Microsoft YaHei",sans-serif;
}


/*zhuangbei*/

 .pop_chr { z-index: 1999; font-family:Arial, 微软雅黑, "Microsoft yahei", sans-serif; }
        .pop_christmas { width: 350px; height: 245px; position: absolute; right: 0; top: 780px; left: 50%; margin-left: 410px;}
        .chr_content {width: 350px; height: 245px; background: url(../images/christmas.png);animation:animationRun .6s steps(4) infinite;-webkit-animation:animationRun .6s steps(4) infinite;-moz-animation:animationRun .6s steps(4) infinite;-ms-animation:animationRun .6s steps(4) infinite;-o-animation:animationRun .6s steps(4) infinite;}
        .btn_closeChr { display: block; position: absolute; width: 31px; height: 31px; right: 0px; top:0px;}
        .btn_openChr {display: block; position: absolute; width: 134px; height: 45px; left: 107px; bottom:4px;}
        @keyframes animationRun{0%{background-position:0px 0px;}100%{background-position:-400% 0px; }}
        @-webkit-keyframes animationRun{0%{background-position:0px 0px;}100%{background-position:-400% 0px; }}
        @-moz-keyframes animationRun{0%{background-position:0px 0px;}100%{background-position:-400% 0px; }}
        @-ms-keyframes animationRun{0%{background-position:0px 0px;}100%{background-position:-400% 0px; }}
        @-o-keyframes animationRun{0%{background-position:0px 0px;}100%{background-position:-400% 0px; }}


.bottombtn{width:318px;height:86px;background:url(../images/btn_2999456.png) no-repeat;position:relative;left:50%;margin-left:-159px;top:50px;overflow:hidden}
.bottombtn:hover{background:url(../images/btn-h_5a96c8d.png) no-repeat}
.bottombtn .wen{position:absolute;width:276px;height:23px}
.bottombtn .t-wen{top:-4px;right:-80px;background:url(../images/t-wen_6d2a315.png) no-repeat center;-webkit-animation:top-ani 4s linear infinite;-moz-animation:top-ani 4s linear infinite;-ms-animation:top-ani 4s linear infinite;animation:top-ani 4s linear infinite}
@-webkit-keyframes top-ani{0%{right:-80px}
50%{right:130px}
100%{right:-80px}}@-moz-keyframes top-ani{0%{right:-80px}
50%{right:130px}
100%{right:-80px}}@-o-keyframes top-ani{0%{right:-80px}
50%{right:130px}
100%{right:-80px}}@-ms-keyframes top-ani{0%{right:-80px}
50%{right:130px}
100%{right:-80px}}@keyframes top-ani{0%{right:-80px}
50%{right:130px}
100%{right:-80px}}
.bottombtn .b-wen{bottom:-4px;left:-80px;background:url(../images/b-wen_cd28ac4.png) no-repeat center;-webkit-animation:bottom-ani 4s linear infinite;-moz-animation:bottom-ani 4s linear infinite;-ms-animation:bottom-ani 4s linear infinite;animation:bottom-ani 4s linear infinite}
@-webkit-keyframes bottom-ani{0%{left:-80px}
50%{left:130px}
100%{left:-80px}}@-moz-keyframes bottom-ani{0%{left:-80px}
50%{left:130px}
100%{left:-80px}}@-o-keyframes bottom-ani{0%{left:-80px}
50%{left:130px}
100%{left:-80px}}@-ms-keyframes bottom-ani{0%{left:-80px}
50%{left:130px}
100%{left:-80px}}@keyframes bottom-ani{0%{left:-80px}
50%{left:130px}
100%{left:-80px}}


.topwen{position:absolute;width:164px;height:123px;top:50%;margin-top:-70px;margin-left:70px}
.l-wen{left:-140px;background:url(../images/l-wen_c5b51b5.png) no-repeat center;-webkit-animation:left-ani 2s linear infinite;-moz-animation:left-ani 2s linear infinite;-ms-animation:left-ani 2s linear infinite;animation:left-ani 2s linear infinite}
@-webkit-keyframes left-ani{0%{left:-152px}
50%{left:-162px}
100%{left:-152px}}@-moz-keyframes left-ani{0%{left:-152px}
50%{left:-162px}
100%{left:-152px}}@-o-keyframes left-ani{0%{left:-152px}
50%{left:-162px}
100%{left:-152px}}@-ms-keyframes left-ani{0%{left:-152px}
50%{left:-162px}
100%{left:-152px}}@keyframes left-ani{0%{left:-152px}
50%{left:-162px}
100%{left:-152px}}
.r-wen{left:167px;background:url(../images/r-wen_0b8783f.png) no-repeat center;-webkit-animation:right-ani 2s linear infinite;-moz-animation:right-ani 2s linear infinite;-ms-animation:right-ani 2s linear infinite;animation:right-ani 2s linear infinite}
@-webkit-keyframes right-ani{0%{left:167px}
50%{left:176px}
100%{left:167px}}@-moz-keyframes right-ani{0%{left:167px}
50%{left:176px}
100%{left:167px}}@-o-keyframes right-ani{0%{left:167px}
50%{left:176px}
100%{left:167px}}@-ms-keyframes right-ani{0%{left:167px}
50%{left:176px}
100%{left:167px}}@keyframes right-ani{0%{left:167px}
50%{left:176px}
100%{left:167px}}

.index_bg3{width:1060px;height:420px;background:url(../images/index-3bg.png) no-repeat center top;margin:0 auto;overflow:hidden;padding-left:65px;padding-top:40px}
.data li{float:left;position:relative;overflow:hidden;width:130px;height:330px;background:url(../images/t01917cb036be41fd95.jpg) no-repeat right top ;margin-top:10px;z-index:1000; }

.d1,.d2,.d3,.d4,.d5,.d6,.d7{float:left;;position:relative;width:130px;height:330px;background:url(../images/t0181edfded0b02b64e.jpg) no-repeat;text-indent:-9999p;z-index:1000;x}
.d1{background-position:0 0}
.d2{background-position:-131px 0}
.d3{background-position:-260px 0}
.d4{background-position:-390px 0}
.d5{background-position:-520px 0}
.d6{background-position:-650px 0}
.d7{background-position:-780px 0}

.data li.cur .d1{background-position:0 -330px}
.data li.cur .d2{background-position:-131px -330px}
.data li.cur .d3{background-position:-260px -330px}
.data li.cur .d4{background-position:-390px -330px}
.data li.cur .d5{background-position:-520px -330px}
.data li.cur .d6{background-position:-650px -330px}
.data li.cur .d7{background-position:-780px -330px}

.index_bg2{width:1060px;height:780px;background:url(../images/index-2bg.png) no-repeat center top;margin:0 auto;overflow:hidden;padding-left:8px;padding-top:43px}
.index_bg5{width:1060px;height:auto;margin:0 auto;overflow:hidden;}
.slider_box{margin:0px auto;height:700px;overflow:hidden;position:relative;width:990px;} 
.mask{height:100px;overflow:hidden;background:#000;opacity:0.8;filter:alpha(opacity:80);width:100%;position:absolute;left:0;bottom:0;z-index:1;border-top:solid 2px #ddd;}
.silder_con{overflow:hidden;position:absolute;}
.silder_panel{width:990px;height:700px;overflow:hidden;float:left;position:relative;}
.silder_panel img{width:990px;height:670px;display:block;overflow:hidden;overflow:hidden}
.silder_nav li{ float:left;padding:0px;margin:2px;display:inline;position:relative;}
.silder_nav li.current{border:3px solid #1b1b37;margin:0 4px;}
.silder_nav li,.silder_nav img{display:block;width:46px;height:48px;overflow:hidden;}
.slider_box a.prev,.slider_box a.next{display:block;width:45px;height:100px;line-height:999em;overflow:hidden;z-indent:9;position:absolute;cursor:pointer;margin:85px 0 0 0;background:url(../images/silder_btn.gif) no-repeat;}
.slider_box a.prev{left:0;background-position:left 0;}
.slider_box a.next{right:0;background-position:right 0;} 
.silder_intro{position:absolute;left:0;bottom:0;z-index:9;width:1000px;height:100px;overflow:hidden;color:#fff;padding-left:20px;top:10px;}
.silder_intro h4{font-size:20px;font-weight:bold;margin:0px 5px 5px 5px;height:22px;line-height:24px;}
.silder_intro p{font-size:12px;line-height:24px;}
.dec{float:left;margin-left:350px;height:100px;bottom:-50px;overflow:hidden;z-index:9;position:absolute;}
.dec li{float:right;display:inline;}

.index_bg4{width:1060px;height:500px;background:url(../images/index-4bg.png) no-repeat center top;margin:0px auto 0;overflow:hidden;padding-left:65px;padding-top:50px}

.card{
	width: 323px;
	height: 400px;
	float: left;
}

.slogan-link{
  width: 500px;
  height: 400px;
  display: block;
  position: absolute;
  top: 110px;
  left:50%;
  margin-left: -420px;
}
.card .font{
 border:#70494b 2px solid;
  transition: transform 400ms;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -o-backface-visibility:hidden;
	backface-visibility: hidden;
	position: absolute;

  -webkit-transform: rotateY( 0deg );
  -moz-transform: rotateY( 0deg );
  -o-transform: rotateY( 0deg );
  transform: rotateY( 0deg );
}

.card .back{
 border:#70494b 2px solid;
  transition: transform 400ms;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -o-backface-visibility:hidden;
  backface-visibility: hidden;

	position: absolute;
	-webkit-transform: rotateY( -180deg );
  -moz-transform: rotateY( -180deg );
  -o-transform: rotateY( -180deg );
  transform: rotateY( -180deg );
}


.card:hover .font{
	-webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );

}

.card:hover .back{
  -webkit-transform: rotateY( 0deg );
  -moz-transform: rotateY( 0deg );
  -o-transform: rotateY( 0deg );
  transform: rotateY( 0deg );
}

.card:hover .ie{
  z-index: 100
}
.tab-detail.hide #card1{
	-webkit-animation-name: hide;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:0s;

	animation-name: hide;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:0s;
}
.tab-detail.hide #card2{
	-webkit-animation-name: hide;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:45ms;

	animation-name: hide;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:45ms;
}
.tab-detail.hide #card3{
	-webkit-animation-name: hide;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:90ms;

	animation-name: hide;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:90ms;
}
.tab-detail.hide #card4{
	-webkit-animation-name: hide;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:135ms;

	animation-name: hide;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:135ms;
}
.tab-detail.hide #card5{
	-webkit-animation-name: hide;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:180ms;

	animation-name: hide;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:180ms;
}

.tab-detail.hide #card6{
  -webkit-animation-name: hide;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:0s;

  animation-name: hide;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:0s;
}
.tab-detail.hide #card7{
  -webkit-animation-name: hide;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:45ms;

  animation-name: hide;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:45ms;
}
.tab-detail.hide #card8{
  -webkit-animation-name: hide;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:90ms;

  animation-name: hide;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:90ms;
}
.tab-detail.hide #card9{
  -webkit-animation-name: hide;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:135ms;

  animation-name: hide;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:135ms;
}
.tab-detail.hide #card10{
  -webkit-animation-name: hide;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:180ms;

  animation-name: hide;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:180ms;
}

@-webkit-keyframes hide {
    from { -webkit-transform: translateY( 0px ); opacity: 1;}
    to { -webkit-transform: translateY( 40px );opacity: 0;}
}
@keyframes hide {
    from { transform: translateY( 0px ); opacity: 1;}
    to { transform: translateY( 40px );opacity: 0;}
}

.tab-detail.show #card1{
  -webkit-animation-name: show;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:0s;

  animation-name: show;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:0s;
}
.tab-detail.show #card2{
  -webkit-animation-name: show;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:45ms;

  animation-name: show;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:45ms;
}
.tab-detail.show #card3{
  -webkit-animation-name: show;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:90ms;

  animation-name: show;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:90ms;
}
.tab-detail.show #card4{
  -webkit-animation-name: show;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:135ms;

  animation-name: show;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:135ms;
}
.tab-detail.show #card5{
  -webkit-animation-name: show;
  -webkit-animation-duration: 125ms;
  -webkit-animation-fill-mode :forwards ;
  -webkit-animation-delay:180ms;

  animation-name: show;
    animation-duration: 125ms;
    animation-fill-mode :forwards ;
    animation-delay:180ms;
}


.tab-detail.show #card6{
	-webkit-animation-name: show;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:0s;

	animation-name: show;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:0s;
}
.tab-detail.show #card7{
	-webkit-animation-name: show;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:45ms;

	animation-name: show;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:45ms;
}
.tab-detail.show #card8{
	-webkit-animation-name: show;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:90ms;

	animation-name: show;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:90ms;
}
.tab-detail.show #card9{
	-webkit-animation-name: show;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:135ms;

	animation-name: show;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:135ms;
}
.tab-detail.show #card10{
	-webkit-animation-name: show;
	-webkit-animation-duration: 125ms;
	-webkit-animation-fill-mode :forwards ;
	-webkit-animation-delay:180ms;

	animation-name: show;
  	animation-duration: 125ms;
  	animation-fill-mode :forwards ;
  	animation-delay:180ms;
}

@-webkit-keyframes show {
    from { -webkit-transform: translateY( -40px ); opacity: 0;}
    to { -webkit-transform: translateY( 0px );opacity: 1;}
}
@keyframes show {
    from { transform: translateY( -40px ); opacity: 0;}
    to { transform: translateY( 0px );opacity: 1;}
}
.tab-item1.selected{background: url(../images/page3-tabbg.png) no-repeat center bottom;}
.page3-detail{width: 1200px;height: 844px;margin: 0 auto;display: none;}
.page3-btns{width: 1040px;height: 100px;margin: 0 auto;}
.page3-btn1{background: url(../images/download-game.png) no-repeat;width: 260px;height: 100px;display: block;float: left;margin-right: 10px;}
.page3-btn2{background: url(../images/quick-signin.png) no-repeat;width: 260px;height: 100px;display: block;float: left;}
.page3-big{width: 1200px;height: 688px;float: left;}
.small-pics{width: 1200px;height: 230px;margin-top: -144px;float: left;}
.small-pics li{float: left;margin: 0 5px;width: 140px;height: 230px;}
