@charset "utf-8";
/*
*description:
*@author:pengguoyong
*update:2016-10-27
*ver:1.0.0
*/

/* base */
.w-900{ width: 900px; }
.w-730{ width: 730px; }
.w-450{ width: 450px; }
.aside{ width: 270px; }

/* border-shadow */
.game-table .pr:hover,.list-pt li:hover,.aside a:hover,.article:hover,.game-list ul li:hover,.news-list:hover,.game-pro:hover{-moz-box-shadow:0px 0px 15px #888; -webkit-box-shadow:0px 0px 15px #888; box-shadow:0px 0px 15px #888;}

/* module */
.module .m-hd{ height: 60px; background: #efefef; }
.module .m-hd .more{ display: inline-block; float: right; height: 60px; padding: 0 10px; font-size: 18px; line-height: 60px; }
.module .m-hd h4{ height: 60px; padding-left: 10px; font-size: 24px; font-weight: normal; line-height: 60px; color: #424242 }
.module .m-bd{ border: 1px solid #ebebeb; padding: 9px; margin-top: 20px }

/* p-banner */
.p-banner{ width: 100%; min-width: 1200px; height: 380px; position: relative; overflow: hidden; }
.p-banner img{ width: 1920px; height: 380px; position: absolute; top: 0; left: 50%; margin-left: -960px; }

/* slide */
.slide{ width: 100%; height: 500px; position: relative; overflow: hidden; max-width: 1920px; margin: 0 auto; }
.slide-list{ overflow: hidden; z-index: 2; }
.slide-list,.slide-list li{ display: block; width: 100%; height: 500px;}
.slide-list li{ position: absolute; overflow: hidden; z-index: 3; }
.slide-list li.hover{ z-index: 4; }
.slide-list li a{ display: block; width: 100%; height: 500px; position: relative; }
.slide-list li a img{ display: block; width: 1920px; height: 500px; position: absolute; top: 0; left: 50%; margin-left: -960px; }
.slide-list li.slide-left-prev{ z-index: 4;
-webkit-animation: slide-left-prev .4s 0s linear;
-moz-animation: slide-left-prev .4s 0s linear;
-ms-animation: slide-left-prev .4s 0s linear;
animation: slide-left-prev .4s 0s linear
}
.slide-list li.slide-left-hover{ z-index: 5;
-webkit-animation: slide-left-hover .4s 0s linear;
-moz-animation: slide-left-hover .4s 0s linear;
-ms-animation: slide-left-hover .4s 0s linear;
animation: slide-left-hover .4s 0s linear
}
.slide-list li.slide-left-next{ z-index: 4;
-webkit-animation: slide-left-next .4s 0s linear;
-moz-animation: slide-left-next .4s 0s linear;
-ms-animation: slide-left-next .4s 0s linear;
animation: slide-left-next .4s 0s linear
}
.slide-list li.slide-right-prev{ z-index: 4;
-webkit-animation: slide-right-prev .4s 0s linear;
-moz-animation: slide-right-prev .4s 0s linear;
-ms-animation: slide-right-prev .4s 0s linear;
animation: slide-right-prev .4s 0s linear
}
.slide-list li.slide-right-hover{ z-index: 5;
-webkit-animation: slide-right-hover .4s 0s linear;
-moz-animation: slide-right-hover .4s 0s linear;
-ms-animation: slide-right-hover .4s 0s linear;
animation: slide-right-hover .4s 0s linear
}
.slide-list li.slide-right-next{ z-index: 4;
-webkit-animation: slide-right-next .4s 0s linear;
-moz-animation: slide-right-next .4s 0s linear;
-ms-animation: slide-right-next .4s 0s linear;
animation: slide-right-next .4s 0s linear
}
.hover-list{ width: 500px; height: 66px; bottom: 30px; left: 50%; margin-left: -250px; text-align: center; position: absolute; z-index: 3; }
.hover-list span{ display: inline-block; width: 66px; height: 66px; margin: 0 7px; cursor: pointer; }
.hover-list span img{ display: block; width: 60px; height: 60px; border: 3px solid #999; border-radius: 50%; background: #999; opacity: .7; transition: all 0.3s ease 0s }
.hover-list span.hover img{ border-color: #ff8400; opacity: 1; -moz-box-shadow:0px 0px 20px #ff8400; -webkit-box-shadow:0px 0px 20px #ff8400; box-shadow:0px 0px 20px #ff8400; }

/* game-table */
.game-table{ width: 760px; }
.game-table .pr{ display: inline-block; float: left; width: 355px; height: 220px; margin: 20px 20px 0 0; position: relative; overflow: hidden; }
.game-table .pr img{ width: 355px; height: 220px }
.game-table .fi-bottom{ width:335px ; height: 220px; padding: 0 10px; position: absolute; top: 220px; left: 0; background: url(../img/bg_repeat_white.png) repeat; transition: all 0.6s ease 0s }
.game-table .fi-bottom .top{ height: 135px; padding: 20px 20px 0; }
.game-table .fi-bottom .top h4{ height: 32px; font-size: 18px; line-height: 32px; color: #ff8400; font-weight: normal; }
.game-table .fi-bottom .top p{ font-size: 12px; line-height: 22px }
.game-table .fi-bottom .bottom{ height: 65px; }
.game-table .fi-bottom .bottom a{ display: inline-block; float: left; width: 120px; height: 30px; margin: 0 22px; font-size: 14px; line-height: 28px; color: #fff; text-align: center; background: #ff8400; border-radius: 5px; }
.game-table .fi-bottom .bottom a:hover{ color: #000 }
.game-table .fo-bottom{ width: 335px; height: 60px; padding: 0 10px; position: absolute; left: 0; bottom: 0; background: url(../img/bg_repeat_white.png) repeat; transition: all 0.3s ease 0s }
.game-table .fo-bottom h5{ height: 32px; font-size: 18px; font-weight: bold; line-height: 32px; color: #ff8400 }
.game-table .fo-bottom p{ height: 24px; font-size: 14px; line-height: 22px }
.game-table .pr.hover .fi-bottom{ top: 0 }
.game-table .pr.hover .fo-bottom{ bottom: -60px }

/* news-list */
.news-list h3{ height: 53px; font-size: 20px; line-height: 60px; text-align: center; font-weight: bold; }
.news-list h3 a:hover{ text-decoration: underline; }
.news-list h6{ height: 24px; }
.news-list h6 a{ display: inline-block; float: left; height: 24px; width: 195px; padding: 0 10px; font-size: 12px; line-height: 24px; font-weight: lighter; text-align: center; color: #ff8400; }
.news-list ul{ border-top: 1px dashed #ebebeb; margin-top: 10px; padding-top: 10px }
.news-list ul li{ display: inline-block; float: left; width: 100%; height: 36px; line-height: 36px; }
.news-list ul li span{ display: inline-block; float: right; width: 60px; height: 36px; }
.news-list ul li a{ display: inline-block; float: left; width: 370px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.news-list ul li a i{ display: inline-block; float: left; width: 15px; text-align: center; }
.news-list ul li a em{ display: inline-block; float: left; width: 40px; }

/* game-pro */
.module .m-bd.game-pro{ position: relative; overflow: hidden; padding: 0 9px; }
.game-pro ul{ display: block; width: 1300px; padding-top: 20px; }
.game-pro ul li{ display: inline-block; float: left; width: 285px; height: 85px; padding-left: 10px; margin-bottom: 20px; }
.game-pro ul li .game-logo{ display: inline-block; float: left; width: 85px; height: 85px; }
.game-pro ul li .game-logo img{ width: 85px; height: 85px }
.game-pro ul li div{ height: 85px; margin-left: 95px; }
.game-pro ul li div h5{ height: 28px; font-size: 14px; line-height: 32px; color: #000 }
.game-pro ul li div p{ width: 190px; height: 22px; font-size: 12px; line-height: 16px; color: #aaa; }
.game-pro ul li div p em{ display: inline-block; width: 95px; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.game-pro ul li div .download{ display: inline-block; float: left; height: 23px; padding: 0 10px; border: 1px solid #999 }
.game-pro ul li div .download-and{ border-right: none; border-radius: 3px 0 0 3px }
.game-pro ul li div .download-ios{ border-radius: 0 3px 3px 0 }
.game-pro ul li div .download i{ display: inline-block; float: left; width: 15px; height: 23px; margin-right: 5px; transition: all 0.3s ease 0s }
.game-pro ul li div .download em{ display: inline-block; float: left; height: 23px; line-height: 23px; transition: all 0.3s ease 0s }
.game-pro ul li div .download-ios em{ color: #424242 }
.game-pro ul li div .download-and i{ background-position: -18px -52px }
.game-pro ul li div .download-ios i{ background-position: 0 -52px }
.game-pro ul li div .download-and:hover i{ background-position: -18px -29px }
.game-pro ul li div .download-ios:hover i{ background-position: 0 -29px }
.game-pro ul li div .download-and:hover em{ color: #52b529 }
.game-pro ul li div .download-ios:hover em{ color: #424242 }

/* related-matters */
.related-matters{ display: none; height: 104px; border-top: 2px solid #e1e1e1; border-bottom: 2px solid #e1e1e1; }
.related-matters a{ display: inline-block; float: left; width: 239px; height: 76px; padding: 20px 0 8px; border-left: 1px solid #e1e1e1; }
.related-matters a.link-5{ width: 238px; border-right: 1px solid #e1e1e1;}
.related-matters a .icons{ display: block; width: 40px; height: 40px; margin: 0 auto; position: relative; overflow: hidden; transition: all 0.3s ease 0s }
.related-matters a em{ display: block; width: 100%; height: 36px; font-size: 18px; line-height: 36px; text-align: center; }
.related-matters a.link-1 .icons{ background-position: 0 -223px }
.related-matters a.link-2 .icons{ background-position: -101px -119px }
.related-matters a.link-3 .icons{ background-position: -53px -119px }
.related-matters a.link-4 .icons{ background-position: 0 -119px }
.related-matters a.link-5 .icons{ background-position: -53px -223px }
.related-matters a.link-1:hover .icons{ background-position: 0 -183px }
.related-matters a.link-2:hover .icons{ background-position: -101px -79px }
.related-matters a.link-3:hover .icons{ background-position: -53px -79px }
.related-matters a.link-4:hover .icons{ background-position: 0 -79px }
.related-matters a.link-5:hover .icons{ background-position: -53px -183px }

/* friend-link */
.friend-link{ padding: 27px 0; background: #efefef }
.friend-link h6{ height: 42px; font-size: 18px; line-height: 42px; font-weight: normal; }
.friend-link a{ font-size: 12px; line-height: 30px; color: #888; padding-right: 20px }
.friend-link a:hover{ color: #ff8400 }

/* breadcrumbs */
.breadcrumbs{ height: 50px; font-size: 12px; line-height: 50px; }

/* list-pt */
.list-pt{ padding-top: 20px; }
.list-pt li{ display: inline-block; float: left; width: 900px; height: 190px; margin-bottom: 20px; position: relative; }
.list-pt li .txt-box{ display: block; width: 860px; height: 150px; padding: 19px; border: 1px solid #ebebeb }
.list-pt li .hover-img{ display: inline-block; float: left; width: 220px; height: 150px; }
.list-pt li .hover-img .thumbnail{ display: block; width: 220px; height: 150px; position: absolute; top: 0; left: 0; transition: all 1.5s ease 0s }
.list-pt li .txt-box:hover .thumbnail{ transform: scale(1.2); }
.list-pt li .txt{ height: 150px; margin-left: 240px; }
.list-pt li .txt h4{ height: 34px; padding-top: 10px; }
.list-pt li .txt h4 span{ display: inline-block; float: right; width: 90px; height: 34px; font-size: 12px; line-height: 34px; color: #888 }
.list-pt li .txt h4 em{ display: block; margin-right: 90px; font-size: 20px; line-height: 34px; font-weight: bold;}
.list-pt li .txt p{ font-size: 12px; line-height: 24px; color: #888 }
.list-pt li .txt-box:hover .txt p{ color: #ff9d20 }
.list-pt li .goto-gow{ display: block; width: 88px; height: 28px; border: 1px solid #999; border-radius: 5px; font-size: 14px; line-height: 28px; text-align: center; position: absolute; right: 20px; bottom: 20px; }
.list-pt li .goto-gow:hover{ background: #ff9d20; color: #fff; border-color: #ff9d20 }

/* aside */
.aside a{ display: block; width: 270px; height: 150px; margin-bottom: 20px; position: relative; overflow: hidden; }
.aside a img{ width: 270px; height: 150px; position: absolute; top: 0; left: 0; z-index: 3; transition: all 1.5s ease 0s }
.aside a:hover img{ transform: scale(1.2); }
.aside a span{ display: block; width: 270px; height: 40px; font-size: 16px; line-height: 40px; color: #fff; text-align: center; background: url(../img/bg_repeat_black.png) repeat; position: absolute; left: 0; bottom: 0; z-index: 4; transition: all 1.5s ease 0s }
.aside a:hover span{ color: #ff9d20 }

/*page-number*/
.page-number{width:100%;overflow:hidden; position:relative; font-size:12px;}
.page-number ul{float:left;width:auto;padding:15px 0px;position:relative;left:50%;}
.page-number ul li{float:left;position:relative;right:50%;font-family:Verdana;padding:2px;width:auto;background:none;border-bottom:none;}
.page-number ul li a{ padding:5px 10px;display:block;color:#333333;border:1px solid #d1d1d1; background:#e1e1e1;}
.page-number ul li a:hover,.page-number ul li.thisclass a{text-decoration:none; border:1px solid #ff9d20; background-color:#ff9d20; color:#fff!important;}
.page-number .pageinfo{color:#999;float:left;position:relative;left:-50%;line-height:17px;padding:2px 4px;}
.page-number .pageinfo strong{color:#666;font-weight:normal;margin:0px 2px;}

/*page*/
.article{ padding: 9px; border: 1px solid #ebebeb }
.article h1{ height: 46px; font-size: 20px; line-height: 46px; color: #ff9d20; text-align: center;}
.article address{ display: block; height: 24px; font-size: 12px; line-height: 24px; color: #777; text-align: center; }
.article address span{ padding:0 15px; }
#wrapper{ border: 1px dashed #ebebeb; border-width: 1px 0; padding: 10px 0;}
#wrapper p{ padding: 1em 0; font-size: 16px; line-height: 24px; color: #777; text-indent: 2em;}
#wrapper p img{ display: block; margin: 0 auto; }
#wrapper .editor{ text-align: right; }
.article-nav{ padding: 10px 0; }
.article-nav span{ width: 46%; font-size: 14px; line-height: 24px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }

/* game-center */
.game-list{ width: 1200px; position: relative; }
.game-list ul{ display: block; width: 1300px; padding-top: 20px }
.game-list ul li{ display: inline-block; float: left; width: 378px; height: 268px; border: 1px solid #ebebeb; margin: 0 30px 30px 0; position: relative; }
.game-list ul li .icons{ display: none; width: 57px; height: 57px; position: absolute; top: 0; left: 0; z-index: 4 }
.game-list ul li.new-game .icons{ display: block; background-position: 0 -277px }
.game-list ul li.hot-game .icons{ display: block; background-position: -80px -277px }
.game-list ul li .gl-t{ width: 378px; height: 200px; position: relative; overflow: hidden; z-index: 3 }
.game-list ul li .gl-t img{ position: absolute; width: 378px; height: 200px; top: 0; left: 0; transition: all 1.5s ease 0s }
.game-list ul li:hover .gl-t img{ transform: scale(1.5); }
.game-list ul li .gl-b{ width: 258px; height: 68px; padding-left: 10px }
.game-list ul li .gl-b h6{ height: 34px; font-size: 18px; line-height: 42px; font-weight: bold; color: #ff8400 }
.game-list ul li .gl-b p{ height: 24px; font-size: 14px; font-weight: normal; line-height: 24px }
.game-list ul li .goto-gow{ display: block; width: 88px; height: 28px; border: 1px solid #999; border-radius: 5px; font-size: 14px; line-height: 28px; text-align: center; position: absolute; right: 20px; bottom: 20px; }
.game-list ul li .goto-gow:hover{ background: #ff9d20; color: #fff; border-color: #ff9d20 }

/* fixed-right-nav */
#fixed-right-nav{ width: 60px; position: fixed; right: 100px; bottom: 180px; background: #000; border: 1px solid #e0e0e0; border-width: 1px 1px 0 1px; z-index: 999; }
#fixed-right-nav div.pr{ width: 60px; height: 66px; border-bottom: 1px solid #e0e0e0; }
#fixed-right-nav a{ display: block; width: 60px; height: 60px; padding-top: 6px; background: #fff; position: relative; }
#fixed-right-nav .go-top{ border-bottom: none; }
.frn-icons{ display: block; width: 34px; height: 34px; margin: 0 auto; background: url(../img/fixed_right_nav.png) no-repeat; }
#fixed-right-nav a em{ display: block; height: 18px; font-size: 12px; text-align: center; line-height: 18px; color: #999; }
#fixed-right-nav a:hover em{ color: #fff; }


#fixed-right-nav .frn-pop{ position: absolute; top: -1px; display: none; background: #fff; }
#fixed-right-nav div.hover .frn-pop{ display: block; }

/* app-pop */
#fixed-right-nav .app-pop{ width: 250px; height: 334px; top: 0px; left: -250px; }
/* wc-pop */
#fixed-right-nav .wc-pop{ padding: 20px 0; width: 250px; height: 294px; left: -252px; top: -68px; border: 1px solid #e0e0e0; }
#fixed-right-nav .wc-pop img{ display: block; width: 200px; height: 200px; margin: 0 auto; }
#fixed-right-nav .wc-pop span{ display: block; height: 40px; font-size: 16px; line-height: 40px; text-align: center; color: #333; }
#fixed-right-nav .wc-pop em{ display: block; height: 54px; font-size: 20px; line-height: 40px; text-align: center; color: #f6782a }

/* qq-pop */
#fixed-right-nav .qq-pop{ width: 135px; left: -135px; border: 1px solid #e0e0e0; border-right: none; }
#fixed-right-nav .qq-pop a{ display: inline-block; float: left; width: 66px; border-right: 1px solid #e0e0e0; }
#fixed-right-nav .qq-pop a:hover{ background: #4dc3f4; }
#fixed-right-nav .qq-pop .csc-icons{ background-position: -170px -32px; }
#fixed-right-nav .qq-pop a:hover .csc-icons{ background-position: -170px 0; }
#fixed-right-nav .qq-pop .qqg-icons{ background-position: -204px -32px; }
#fixed-right-nav .qq-pop a:hover .qqg-icons{ background-position: -204px 0; }

/* coop-pop */
#fixed-right-nav .coop-pop{ width: 200px; height: 165px; padding: 0 25px; left: -250px; background: url(../img/coop.png) no-repeat; }
#fixed-right-nav .coop-pop h6{ font-size: 20px; line-height: 42px; text-align: right; color: #fff; font-weight: normal; margin-bottom: 13px; }
#fixed-right-nav .coop-pop p{ font-size: 16px; color: #333; line-height: 30px; }

#fixed-right-nav .i-app:hover{ background: #f27b65; }
#fixed-right-nav .i-wechat:hover{ background: #90d658; }
#fixed-right-nav .i-qq:hover{ background: #4dc3f4; }
#fixed-right-nav .i-coop:hover{ background: #77e8d2; }
#fixed-right-nav .go-top:hover{ background: #f7a527; }
#fixed-right-nav .i-app .frn-icons{ background-position: 0 -32px; }
#fixed-right-nav .i-wechat .frn-icons{ background-position: -34px -32px; }
#fixed-right-nav .i-qq .frn-icons{ background-position: -68px -32px; }
#fixed-right-nav .i-coop .frn-icons{ background-position: -102px -32px; }
#fixed-right-nav .go-top .frn-icons{ background-position: -136px -32px; }
#fixed-right-nav .i-app:hover .frn-icons{ background-position: 0 0; }
#fixed-right-nav .i-wechat:hover .frn-icons{ background-position: -34px 0; }
#fixed-right-nav .i-qq:hover .frn-icons{ background-position: -68px 0; }
#fixed-right-nav .i-coop:hover .frn-icons{ background-position: -102px 0; }
#fixed-right-nav .go-top:hover .frn-icons{ background-position: -136px 0; }

/* 动画 */
/*slide-left-prev*/
@-webkit-keyframes slide-left-prev {
	0% { -webkit-transform: translateX(0) }
	100% { -webkit-transform: translateX(-100%) }
}

@-moz-keyframes slide-left-prev {
	0% { -moz-transform: translateX(0) }
	100% { -moz-transform: translateX(-100%) }
}

@-o-keyframes slide-left-prev {
	0% { -ms-transform: translateX(0) }
	100% { -ms-transform: translateX(-100%) }
}

@keyframes slide-left-prev {
	0% { transform: translateX(0) }
	100% { transform: translateX(-100%) }
}

/*slide-left-hover*/
@-webkit-keyframes slide-left-hover {
	0% { -webkit-transform: translateX(100%) }
	100% { -webkit-transform: translateX(0) }
}

@-moz-keyframes slide-left-hover {
	0% { -moz-transform: translateX(100%) }
	100% { -moz-transform: translateX(0) }
}

@-o-keyframes slide-left-hover {
	0% { -ms-transform: translateX(100%) }
	100% { -ms-transform: translateX(0) }
}

@keyframes slide-left-hover {
	0% { transform: translateX(100%) }
	100% { transform: translateX(0) }
}

/*slide-left-next*/
@-webkit-keyframes slide-left-next {
	0% { -webkit-transform: translateX(-200%) }
	100% { -webkit-transform: translateX(-100%) }
}

@-moz-keyframes slide-left-next {
	0% { -moz-transform: translateX(-200%) }
	100% { -moz-transform: translateX(-100%) }
}

@-o-keyframes slide-left-next {
	0% { -ms-transform: translateX(-200%) }
	100% { -ms-transform: translateX(-100%) }
}

@keyframes slide-left-next {
	0% { transform: translateX(-200%) }
	100% { transform: translateX(-100%) }
}


/*slide-right-prev*/
@-webkit-keyframes slide-right-prev {
	0% { -webkit-transform: translateX(-200%) }
	100% { -webkit-transform: translateX(-100%) }
}

@-moz-keyframes slide-right-prev {
	0% { -moz-transform: translateX(-200%) }
	100% { -moz-transform: translateX(-100%) }
}

@-o-keyframes slide-right-prev {
	0% { -ms-transform: translateX(-200%) }
	100% { -ms-transform: translateX(-100%) }
}

@keyframes slide-right-prev {
	0% { transform: translateX(-200%) }
	100% { transform: translateX(-100%) }
}

/*slide-right-hover*/
@-webkit-keyframes slide-right-hover {
	0% { -webkit-transform: translateX(-100%) }
	100% { -webkit-transform: translateX(0) }
}

@-moz-keyframes slide-right-hover {
	0% { -moz-transform: translateX(-100%) }
	100% { -moz-transform: translateX(0) }
}

@-o-keyframes slide-right-hover {
	0% { -ms-transform: translateX(-100%) }
	100% { -ms-transform: translateX(0) }
}

@keyframes slide-right-hover {
	0% { transform: translateX(-100%) }
	100% { transform: translateX(0) }
}

/*slide-right-next*/
@-webkit-keyframes slide-right-next {
	0% { -webkit-transform: translateX(0) }
	100% { -webkit-transform: translateX(100%) }
}

@-moz-keyframes slide-right-next {
	0% { -moz-transform: translateX(0) }
	100% { -moz-transform: translateX(100%) }
}

@-o-keyframes slide-right-next {
	0% { -ms-transform: translateX(0) }
	100% { -ms-transform: translateX(100%) }
}

@keyframes slide-right-next {
	0% { transform: translateX(0) }
	100% { transform: translateX(100%) }
}

/*border-ani*/
@-webkit-keyframes border-ani {
	0% { -webkit-transform: translateX(0) }
	100% { -webkit-transform: translateX(100%) }
}

@-moz-keyframes border-ani {
	0% { -moz-transform: translateX(0) }
	100% { -moz-transform: translateX(100%) }
}

@-o-keyframes border-ani {
	0% { -ms-transform: translateX(0) }
	100% { -ms-transform: translateX(100%) }
}

@keyframes border-ani {
	0% { transform: translateX(0) }
	100% { transform: translateX(100%) }
}