body,html{ background: #f1f2f3;}
a{color: #333;}
a:hover{color: #333;}
a:visited{color: #333;}
.main{width: 1200px; position: relative; margin: 0 auto;}
.icon {  width: 30px;  height: 30px;display: inline-block;  vertical-align: top; background: url(../images/csp-index.png) no-repeat; }
.server {  width: 30px;  height: 30px;display: inline-block;  vertical-align: top; background: url(../images/kai-index.png) 0 0 no-repeat; }
.i-crown {  background-position: 0 -295px; }
.i-downl {  width: 14px;  height: 32px; background-position: 0 -741px;  }
.i-like { background-position: -2px -362px; }
.i-fire {  background-position: 0 -420px; }
.i-server {  background-position: -1px 4px; }
.i-sms {  background-position: 0 -564px; }
.i-rocket { background-position: 0 -625px; }
.i-gift { background-position: 4px -656px; }
.game-wrap{ display: inline-block; width: 100%; margin-bottom: 20px;}
.game-title{ height: 30px;  line-height: 30px;  color:#1e1e1e;  font-size: 22px;  position: relative;  margin: 20px 0;}
.btn-more{ float: right; font-size: 16px; margin-right: 10px;}
.btn-more:hover{ color:#03B4F5 }
/* banner  */
.banner{ width: 100%; height: 500px; background: #999; position: relative }
.banner .bd{ width:100% !important;}
.banner .bd li .m-width {width:100%;margin:0 auto;overflow:hidden;}
.banner .bd li{width:100% !important;height:500px;}
.banner .bd li a{display:block;background-size:auto;}
.banner .hd {position:absolute;top:280px;left:50%; margin-left: -60px; height: 25px; background: rgba(255,255,255,0.8); border-radius: 20px; }
.banner .hd ul{ padding: 6px 15px; }
.banner .hd ul li{width:12px;height:12px;border-radius :50%;text-indent:-9999px;margin-right:10px;background:#434343;float:left;cursor:pointer;}
.banner .hd ul li:last-child{ margin-right: 0;}
.banner .hd ul li.on{background:#03B4F5;}
.banner-btn{width:100%;position:absolute;top:170px;}
.banner-btn a{display:block;width:49px;height:104px;position:absolute;top:0;filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4;}
.banner-btn a.prev{left:0;background:url(../images/banner/foot.png) no-repeat 0 0;}
.banner-btn a.next{right:0;background:url(../images/banner/foot.png) no-repeat -49px 0;}

/* 游戏推荐 */
.game-recommend{ display: inline-block; width: 100%; position: relative}
.game-recommend .content{ position: relative;overflow: hidden;}
.game-recommend .content > ul > li{ width: 277px; margin:0 30px 0 0; padding-bottom: 20px; background: #fff; float: left; position: relative }
.game-recommend .content > ul > li:last-child{ margin-right: 0}
.game-recommend .content .game-pic{ height: 176px; overflow: hidden;}
.game-recommend .content .game-pic .list { position: absolute; width: 100%; height:176px; left: 0;  background: rgba(3,180,245,0.6);opacity: 0;  top: -176px;transition: all 0.3s ease-in; }
.game-recommend .content .game-pic .list li{ float: left; padding: 40px 0 0 14px;}
.game-recommend .content .game-pic .list .txt{ width:150px; }
.game-recommend .content .game-pic .list .txt p{ color: #fff; font-size: 14px; height: 35px; }
.game-recommend .content .game-pic .list .txt .start{ margin: 3px 0 0 3px; display: inline-block }
.game-recommend .content .game-pic .list .txt .i-downl{ margin-top: -6px;}
.game-recommend .content .game-pic .list .code{ width:calc(100% - 150px); }
.game-recommend .content .game-pic .list .code img{ width: 100px; height: 100px }
.game-recommend .content .game-pic:hover .list { opacity: 1;  top: 0; }
.game-recommend .content .game-info{ padding: 10px 20px; }
.game-recommend .content .game-info .name{ font-size: 22px; color: #666; padding: 10px 0;}
.game-recommend .content .game-info .tips{ font-size: 12px; color: #999; text-overflow: ellipsis;  white-space: nowrap; overflow: hidden;}
.game-recommend .content .game-info .other{ margin: 10px 0; }
.game-recommend .content .game-info .other .down{ font-size: 12px; color: #999; line-height: 30px; float: left;}
.game-recommend .content .game-info .other .down:hover{ color: #666;}
.game-recommend .content .game-info .other .i-like{ width: 28px; height: 28px;}
.game-recommend .content .game-info .other .down:hover .i-like{ background-position: -1px -390px; }
.game-recommend .content .game-info .other .btn{ float: right;}
.game-recommend .content .game-info .other .btn .g-btn{ display: inline-block;  vertical-align: top;  width: 110px;  min-width: 88px;  height: 32px;  line-height: 32px;  text-align: center;  color: #9f9f9f;  border: 1px solid #c7c7c7;  border-radius: 15px;  cursor: pointer;  background: #fff;  font-size: 12px;  box-sizing: content-box;}
.game-recommend .content .game-info .other .btn .g-btn:hover{background:#03B4F5; border: solid 1px #03B4F5; color: #fff;}

/* 热门游戏 */
.game-hot{ width: 790px;}
.game-hot .content > li{ width: 250px; float: left; margin:0 20px 20px 0; background: #fff; padding: 20px;}
.game-hot .content > li:hover {  box-shadow: rgb(3, 180, 245) 0 0 5px;  }
.game-hot .content > li:nth-child(3n+3){ margin-right: 0;}
.game-hot .content .item{ position: relative; height: 95px; }
.game-hot .content .item li{ float: left;}
.game-hot .content .item .icon{ width: 110px; background: none;}
.game-hot .content .item .icon img{ width: 95px; height: 95px; border-radius:20px;}
.game-hot .content .item .icon .img_code{ display: none}
.game-hot .content .item .info{ width:calc(100% - 110px)}
.game-hot .content .item .info p{ font-size: 12px; color: #999;margin-top: 5px;}
.game-hot .content .item .info .name{ font-size: 14px; color: #666;text-overflow: ellipsis;  white-space: nowrap; overflow: hidden; }
.game-hot .content .item .info .name:hover{ color: #03B4F5;}
.game-hot .content .item .info .down{ display: block; height: 26px; line-height: 24px; background: #fff;  border: 1px solid #c7c7c7; text-align: center; font-size: 12px; width: 90px; border-radius: 15px; color: #999; margin-top: 10px; }
.game-hot .content .item .info .down:hover{background:#03B4F5; border: solid 1px #03B4F5; color: #fff;}
.game-hot .content .item .info .downPoint{ display: none; margin-top: 20px;}

/* 游戏开服 */
.game-server{ width: 380px; }
.game-server .content{ background: #fff; padding: 20px; height: 445px; }
.game-server .content .rank-title{ height: 40px; line-height: 40px; font-size: 13px; color: #999; margin-top: -10px;}
.game-server .content .rank-title span{ display: block; float: left;}
.game-server .content .rank-list{ position: relative}
.game-server .content .rank-list ul{ display: inline-block; width: 100%; height: 37px; line-height: 37px; border-bottom: solid 1px #ddd}
.game-server .content .rank-list ul li{ float: left; font-size: 13px; color: #999; padding-right: 5px; overflow: hidden}
.game-server .content .rank-list ul li img{ height: 20px; vertical-align: middle;}
.game-server .content .rank-list ul li a{ display: block; width: 100%; overflow: hidden;white-space: nowrap; }
.game-server .content .rank-list ul li a:hover{ color: #03B4F5 }
.kf-tit-name{ width: 110px; }
.kf-tit-date{ width: 50px;}
.kf-tit-time{ width: 50px;}
.kf-tit-zone{ width: 92px;}
.kf-tit-down{ width: 28px; text-align: center}

/* 游戏资讯 */
.game-news{ width: 380px; }
.game-news .content{ background: #fff; padding: 20px; height: 445px; overflow: hidden }
.game-news .content .pic{ overflow: hidden; cursor: pointer}
.game-news .content .pic:hover img {transform: scale(1.1);}
.game-news .content .pic img{ width: 100%; transition: all 0.3s ease-in-out;}
.game-news .content .list{ width: 100%; display: inline-block; margin-top: 20px;}
.game-news .content .list ul{ width: 100%; margin-bottom: 10px; display: inline-block;}
.game-news .content .list li{ float: left; height: 24px; line-height: 24px; font-size: 12px; color: #666;}
.game-news .content .list .tag{ width: 35px; border-left: 2px solid #f36161; color: #999; text-align: center; background: rgb(247, 247, 247);}
.game-news .content .list .name{ width: calc(100% - 70px); padding: 0 10px;text-overflow: ellipsis;  white-space: nowrap; overflow: hidden;}
.game-news .content .list .name a{ color: #666;}
.game-news .content .list .name a:hover{ color: #03B4F5;}
.game-news .content .list .time{ width: 35px; text-align: right}
.game-news .content .more{ border: 1px solid #ddd;  line-height: 30px;  margin-top: 8px;  text-align: center;  font-size: 12px;  cursor: pointer;}
.game-news .content .more:hover{  border: solid 1px #03B4F5;}
.game-news .content .more:hover a{ color: #03B4F5; }

/* 热门礼包 */
.game-package{ width: 790px; margin-top: -20px;}
.game-package .content{ position: relative }
.game-package .content ul{width: 385px; height: 110px; float: left; background: #fff; margin-bottom: 20px; }
.game-package .content ul:nth-child(2n+2){ margin-left: 20px;}
.game-package .content ul:hover {  box-shadow: rgb(3, 180, 245) 0 0 5px;  }
.game-package .content li{ float: left;}
.game-package .content .icon{ width: 130px; background: none; }
.game-package .content .icon img{ width: 90px; height: 90px; border-radius:20px; margin: 10px 20px; }
.game-package .content .info{ width:calc(100% - 240px); }
.game-package .content .info p{ font-size: 12px; color: #999; line-height: 28px; }
.game-package .content .info .name{ font-size: 14px; color: #666; margin-top: 10px;text-overflow: ellipsis;  white-space: nowrap; overflow: hidden; }
.game-package .content .info .amount span{ color:#f36161 }
.game-package .content .btn{ width: 110px; }
.game-package .content .btn .g-btn{ display: block; height: 26px; line-height: 24px; background: #fff;  border: 1px solid #c7c7c7; text-align: center; font-size: 12px; width: 90px; border-radius: 15px; color: #999; margin-top: 45px; }
.game-package .content .btn .g-btn:hover{background:#03B4F5; border: solid 1px #03B4F5; color: #fff;}


/* 快速通道 */
.game-app{ width: 380px; margin-top: -20px; }
.game-app .desk{ background: #fff; width: 100%; display: inline-block}
.game-app .desk a{ display: block; width: 50%;  height: 60px; line-height: 60px;  text-align: center;  font-size: 14px; color: rgb(153, 153, 153);  float: left;  position: relative; border-right: 1px solid rgb(230, 230, 230);  border-bottom: 1px solid rgb(230, 230, 230); transition: color 0.4s ease; position: relative }
.game-app .desk a i {  background: url(../images/channel.jpg) no-repeat; display: inline-block;  width: 30px; height: 30px; margin-top: 15px; }
.game-app .desk a i.d1{ background-position: 4px 0;}
.game-app .desk a i.d2{ background-position: 0 -30px; }
.game-app .desk a i.d3{ background-position: 4px -60px; }
.game-app .desk a i.d4{ background-position: 0 -90px; margin-top: 20px; }
.game-app .desk a i.d5{ background-position: 0 -180px; }
.game-app .desk a i.d6{ background-position: 0 -240px; }
.game-app .desk a:hover .d1,.game-app .desk a:nth-child(1):hover span{ background-position: -26px 0; color:#C77FBE;  }
.game-app .desk a:hover .d2,.game-app .desk a:nth-child(2):hover span{ background-position: -30px -30px; color:#A4D442; }
.game-app .desk a:hover .d3,.game-app .desk a:nth-child(3):hover span{ background-position: -26px -60px; color:#56A3F1; }
.game-app .desk a:hover .d4,.game-app .desk a:nth-child(4):hover span{ background-position: -30px -90px; color:#F6AE48;}
.game-app .desk a:hover .d5,.game-app .desk a:nth-child(5):hover span{ background-position: -30px -180px; color:#FFA2CE; }
.game-app .desk a:hover .d6,.game-app .desk a:nth-child(6):hover span{ background-position: -30px -240px; color:#FB3AD1; }
.game-app .desk a div.line{ position:absolute; top: 0;  width: 100%; height: 2px; overflow: hidden;}
.game-app .desk a .line em{ display: block; width: 0; height: 100%; position: relative;  margin: 0 auto; transition: all 0.4s ease;}
.game-app .desk a:hover .line .line1{ background:#C77FBE; width: 100%; }
.game-app .desk a:hover .line .line2{ background:#A4D442; width: 100%; }
.game-app .desk a:hover .line .line3{ background:#56A3F1; width: 100%; }
.game-app .desk a:hover .line .line4{ background:#F6AE48;; width: 100%; }
.game-app .desk a:hover .line .line5{ background:#FFA2CE; width: 100%; }
.game-app .desk a:hover .line .line6{ background:#FB3AD1; width: 100%; }

.game-app .customer{ width: 100%; display: inline-block; margin: 20px 0; background: #fff;}
.game-app .customer .server-online{  width:50%;  height: 170px;  text-align: center;  color: #ef656c;  border-right: 1px solid #e6e6e6; }
.game-app .customer .server-online i { background: url(../images/channel.jpg) no-repeat;  display: inline-block; width: 67px;  height: 69px; margin: 22px 0 15px; background-position: 0 -270px; }
.game-app .customer  span{ font-size: 12px; font-family: Arial;}
.game-app .customer .other{ width: 50%;}
.game-app .customer .other .item{ height: 85px; font-size: 14px; color: #666; text-align: center; padding-top: 20px;}
.game-app .customer .other .item:first-child{ border-bottom: solid 1px #e6e6e6}
.game-app .customer .other .item em{ color: #03B4F5; }





/* 广告banner */
.game-ad{ display: inline-block; width: 100%; }
.game-ad img{ width: 100%}