body{background: #f8f8f8;}

.content{background: #fff; padding: 13px 10px 20px; box-sizing: border-box;}

/* 游戏详情 */
.g-box{padding: 24px 30px; background: #f3fafd; position: relative; height: 160px;}
.g-box::before{content: ''; display: inline-block; width: 16px; height: 16px; border-top: 2px solid #00b0e8;border-left: 2px solid #00b0e8;position: absolute;left: 0; top: 0;}
.g-box::after{content: ''; display: inline-block; width: 16px; height: 16px; border-right: 2px solid #00b0e8;border-bottom: 2px solid #00b0e8;position: absolute;right: 0; bottom: 0;}
.g-box .g-img{width:160px; height: 160px; float: left; margin-right: 28px; border-radius: 18px;}
.g-box .g-img:hover{opacity: .8; filter: alpha(opacity=80);}
.g-box .g-mid{width: 83%; float: left;color: #999; }
.g-box .g-mid h1{font-size: 26px; font-weight: bold; color: #333; height: 30px; line-height:30px; overflow: hidden; padding-top: 13px;}
.g-box .g-mid .g-info{padding-top: 16px;}
.g-box .g-mid .g-info li{width: -1px; float: left; margin-right: 10px;height: 32px; line-height:32px;}
.g-box .g-mid .g-info li span{color: #666;}
.g-box .g-mid .g-label{height: 20px; margin-top: 10px; line-height:20px; padding-left: 24px; background: url(img/pc-icons.png) no-repeat; background-position: -8px -65px;}
.g-box .g-mid .g-label i{display: inline-block; padding:0 5px; margin-right: 6px; background: #f0f0f0; color: #666;}
.g-box .g-mid .g-label a{display: inline-block; padding:0 5px; margin-right: 6px; background: #fb5757; color: #fff;}

.g-box .g-right{width: 210px; float: right; padding-top: 20px;}
.g-box .g-right a{display: block; width: 100%; height: 52px; margin-bottom: 12px; overflow: hidden;zoom: 1; text-align: center; line-height:52px; font-size: 18px; color: #fff;border-radius: 2px;cursor: pointer}
.g-box .g-right a em{display: block; float: left; width: 54px; height: 52px;}
.g-box .g-right a:hover{opacity: .8; filter: alpha(opacity=80);}
.g-box .g-right a.nodown{background: #ddd;}
.g-box .g-right .android-btn{background: #25c88a;}
.g-box .g-right .android-btn em{background: #22b37c url(img/pc-icons.png) no-repeat; background-position:0 -217px;}

.g-box .g-right .android-btn.no{background: #ddd;}
.g-box .g-right .android-btn.no em{background: #ccc url(img/pc-icons.png) no-repeat; background-position:-47px -217px;}

.g-box .g-right .ios-btn{background: #5298ff;}
.g-box .g-right .ios-btn em{background: #4b87e0 url(img/pc-icons.png) no-repeat; background-position:0 -267px;}

.g-box .g-right .ios-btn.no{background: #ddd;}
.g-box .g-right .ios-btn.no em{background: #ccc url(img/pc-icons.png) no-repeat; background-position:-47px -267px;}

.g-box .g-right .yuyue-btn{background: #ff944f;display: none;}
.g-box .g-right .yuyue-btn em{background: #e47935 url(img/pc-icons.png) no-repeat; background-position:-45px -168px;}


.container-box{margin-top: 36px;}
/* 左侧 */
.left-side{width: 100%; float: left;}

.left-nav{height: 40px; border-bottom: 2px solid #ddd; }
.left-nav span{ font-size: 14px; color: #333; display: block; float: left; width: 113px; text-align: center; line-height: 40px; background: #f3f3f3; font-weight: bold; cursor: pointer; position: relative;margin-right: 28px;}
.left-nav span.s1{margin-left: 25px;}

.left-nav span::before{content: ''; display: inline-block; width: 25px; height: 40px; position: absolute;left: -25px; top: 0; background: url(img/s-icons.png) no-repeat; background-position: 0 -88px;}
.left-nav span::after{content: ''; display: inline-block; width: 25px; height: 40px; position: absolute;right: -25px; top: 0;background: url(img/s-icons.png) no-repeat; background-position: 0 -132px;}

.left-nav span.on{background: #01a0e2; color: #fff; font-size: 16px;}
.left-nav span.on::before{content: ''; display: inline-block; width: 25px; height: 40px; position: absolute;left: -25px; top: 0; background: url(img/s-icons.png) no-repeat; background-position: 0 0;}
.left-nav span.on::after{content: ''; display: inline-block; width: 25px; height: 40px; position: absolute;right: -25px; top: 0;background: url(img/s-icons.png) no-repeat; background-position: 0 -44px;}

.g-introduction{padding: 20px 0 25px; overflow: hidden;}
.g-intro-con{margin-bottom: 40px; width: 100%; float: left; transition: all .3s ease;}

.g-intro-con{font-size:16px;overflow: hidden;}
.g-intro-con img{max-width: 100%;display: block;margin:10px auto;}
.g-intro-con p{line-height: 36px;}
.g-intro-con h3,.g-intro-con h1,.g-intro-con h2,.g-intro-con h4,.g-intro-con h5{color:#01a0e2;font-weight: bold;height: 36px;line-height: 36px;margin-top: 12px;margin-bottom:12px;}
.more-btn{font-size: 15px; color: #01a0e2; float: right; padding-left: 20px; height: 33px; line-height: 33px; background: url(img/pc-icons.png) no-repeat; background-position:-51px 0; display: none;}
.more-btn.on{background-position:-51px -29px;}

/* 截图 */
.d-swiper .swiper-slide{text-align: center;height:300px;overflow: hidden;width: auto;}
.d-swiper .swiper-slide img{width: auto;display:  block;height:  100%;}
.d-swiper .swiper-button-next,.d-swiper .swiper-button-prev{ width: 34px; height:65px; background:url(img/pc-icons.png) no-repeat;}
.d-swiper .swiper-button-next{background-position: -45px bottom;right: 0;}
.d-swiper .swiper-button-prev{background-position: 0 bottom; left: 0;}
.d-swiper .swiper-button-next:hover,.d-swiper .swiper-button-prev:hover{opacity: .8;filter: alpha(opacity=80)}

/*弹出大图*/
#jquery-overlay{ height:500px; left:0; position:absolute; top:0; width:100%; z-index:1000}
#jquery-lightbox{ left:0; line-height:0; position:absolute; text-align:center; top:0; width:100%; z-index:1001}
#jquery-lightbox a img{ border:medium none}
#lightbox-container-image-box{ background-color:#fff; height:250px; margin:0 auto; position:relative; width:250px}
#lightbox-container-image{ padding:10px}
#lightbox-loading{ height:25%; left:0; line-height:0; position:absolute; text-align:center; top:40%; width:100%}
#lightbox-nav{ height:100%; left:0; position:absolute; top:0; width:100%; z-index:10}
#lightbox-container-image-box>#lightbox-nav{ left:0}
#lightbox-nav a{ outline:medium none}
#lightbox-nav-btnNext,#lightbox-nav-btnPrev{ display:block; height:100%; width:49%}
#lightbox-nav-btnPrev{ float:left; left:0}
#lightbox-nav-btnNext{ float:right; right:0}
#lightbox-container-image-data-box{ background-color:#fff; font:10px/1.4em Verdana,Helvetica,sans-serif; margin:0 auto; overflow:auto; padding:0 10px; width:100%}
#lightbox-container-image-data{ color:#666; padding:0 10px}
#lightbox-container-image-data #lightbox-image-details{ float:left; text-align:left; width:70%}
#lightbox-image-details-caption{ font-weight:700}
#lightbox-image-details-currentNumber{ clear:left; display:block; padding-bottom:1em}
#lightbox-secNav-btnClose{ float:right; padding-bottom:.7em; width:66px}

/*标题*/
.tab-title{border-bottom:2px solid #01a0e2;height: 42px; line-height: 42px;}
.tab-title h2{font-size:18px;float:left;color: #01a0e2; font-weight: normal; float: left;}
.tab-title ul{ float: right; overflow: hidden; height: 24px;padding-right: 12px;}
.tab-title li{ height: 24px; line-height: 24px; cursor: pointer; font-size: 14px; color: #333;float: right; padding: 0 15px; background: #f3f3f3; margin-left: 17px; position: relative;}

.tab-title li::before{content: ''; display: inline-block; width: 12px; height: 40px; position: absolute;left: -12px; top: 0; background: url(img/s-icons.png) no-repeat; background-position: -13px -254px;}
.tab-title li::after{content: ''; display: inline-block; width: 12px; height: 40px; position: absolute;right: -12px; top: 0;background: url(img/s-icons.png) no-repeat; background-position: 0 -228px;}

.tab-title li.hover{background: #01a0e2; color: #fff; }
.tab-title li.hover::before{content: ''; display: inline-block; width: 12px; height: 40px; position: absolute;left: -12px; top: 0; background: url(img/s-icons.png) no-repeat; background-position: -13px -202px;}
.tab-title li.hover::after{content: ''; display: inline-block; width: 12px; height: 40px; position: absolute;right: -12px; top: 0;background: url(img/s-icons.png) no-repeat; background-position: 0 -176px;}

/* 相关版本 */
.versions{margin-top: 30px;}
.ver-list ul{width:100%; overflow: hidden; zoom: 1; padding-top: 26px;}
.ver-list ul li{width: 564px; float: left; margin-right: 24px; height: 48px; border:1px solid #e6e6e6; margin-bottom: 10px;transition:background-color 1.2s ease,left 1.2s ease-in-out;}
.ver-list ul li a{display: block; padding-left: 14px; height: 48px; line-height: 48px; overflow: hidden; zoom: 1;}
.ver-list ul li img{width: 36px; height: 36px; border-radius: 5px; float: left; margin: 6px 20px 0 0; margin-left: -60px;transition:all 1s ease;}
.ver-list ul li p{width: 250px; float: left; color: #333;}
.ver-list ul li b{float: right; display: block; width: 30px; height: 30px; line-height: 30px; margin: 9px 25px 0 0; color: #01a0e2;}
.ver-list ul li span{display: block; width:80px; float: left; color: #999;}


.ver-list ul li:hover{border:1px solid #23b3ee; background: #23b3ee;}
.ver-list ul li:hover a img{transition: all 1s ease; margin-left: 0;}
.ver-list ul li:hover a p{color: #fff;}
.ver-list ul li:hover a span{display: none;}
.ver-list ul li:hover a b{text-indent: -9999em; background: url(img/pc-icons.png) no-repeat; background-position: -8px -183px;}

/* 同类推荐 */
.recommendations{margin-top: 20px;}
.rec-list{padding-top: 27px;}
.rec-list ul{width: 885px;}
.rec-list ul li{width: 90px; float: left; margin: 0 36px 15px 0; transition: all .4s ease;}
.rec-list ul li a{display: block; width: 100%;}
.rec-list ul li a img{width: 90px; height: 90px; border-radius: 12px;}
.rec-list ul li a p{font-size: 15px; height: 36px; line-height: 36px; color: #333; overflow: hidden; text-align: center;}
.rec-list ul li:hover a p{color: #01a0e2;}
.rec-list ul li:hover{margin-top: -11px; margin-bottom: 26px;}

/* 相关合集 */
.col-info { width: 100%;overflow: hidden; padding-top: 26px;}

.col-detail{padding-bottom: 20px; overflow: hidden; zoom: 1;}
.col-detail .col-img{ width: 260px; height: 130px; display: inline-block; float: left; margin-right: 24px;}
.col-detail .col-img img{ width: 100%; height: 100%;border-radius: 4px;}
.col-detail .col-txt{padding-top: 6px; width: 560px; float: right;}
.col-detail .col-txt a{ font-size:16px; color: #333; height: 32px; line-height: 32px; display: block; width:100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 6px; font-weight: bold;}
.col-detail .col-txt a:hover{color:#01a0e2 ;}
.col-detail .col-txt p{display: block;overflow: hidden;font-size: 14px;color: #666;line-height: 26px;max-height: 78px; overflow: hidden;}

.col-info ul {width: 104%;}
.col-info ul li {display: block;float: left;margin: 0 18px 16px 0;width: 268px;height: 105px; border:1px solid #e6e6e6; transition: all .4s ease;}
.col-info ul li .img {float: left;overflow: hidden;margin-right: 12px;padding-left: 10px;padding-top: 15px;width:70px; height:70px;}
.col-info ul li .img img { width:100%; height:100%; border-radius:8px; }
.col-info ul li .name {display: block;float: left;width: 150px;height: 30px;line-height: 30px;overflow: hidden;color: #333;font-size: 16px;white-space:nowrap;text-overflow:ellipsis;margin-top: 14px;}
.col-info ul li .type {color: #01a0e2;display: inline-block;float: left;height: 20px;line-height: 20px;font-size: 12px; background: #cdedfa; border-radius: 1px; padding: 0 5px;}
.col-info ul li .bq {color: #999;width: 150px;display: block;float: left;height: 26px;line-height: 26px;font-size: 12px;}
.col-info ul li .bq i{margin: 0 5px; font-style: italic;}
.col-info ul li:hover{margin-top: -10px; border: 1px solid #fff; box-shadow: 0 0 10px #e4e4e4; margin-bottom: 26px;}
.col-info ul li:hover .name{color: #01a0e2;}

/* 相关合集 */
.guess{width: 100%; position: relative;}
.guess .guess_box{padding-top: 26px;}

.gtab{position: absolute;top: 12px;right: 0; overflow: hidden; height: 24px;padding-right: 12px;}
.gtab a{ height: 24px; line-height: 24px; cursor: pointer; font-size: 14px; color: #333;float: right; padding: 0 15px; background: #f3f3f3; margin-left: 17px; position: relative;}
.gtab a::before{content: ''; display: inline-block; width: 12px; height: 40px; position: absolute;left: -12px; top: 0; background: url(img/s-icons.png) no-repeat; background-position: -13px -254px;}
.gtab a::after{content: ''; display: inline-block; width: 12px; height: 40px; position: absolute;right: -12px; top: 0;background: url(img/s-icons.png) no-repeat; background-position: 0 -228px;}

.gtab a.hover{background: #01a0e2; color: #fff; }
.gtab a.hover::before{content: ''; display: inline-block; width: 12px; height: 40px; position: absolute;left: -12px; top: 0; background: url(img/s-icons.png) no-repeat; background-position: -13px -202px;}
.gtab a.hover::after{content: ''; display: inline-block; width: 12px; height: 40px; position: absolute;right: -12px; top: 0;background: url(img/s-icons.png) no-repeat; background-position: 0 -176px;}

.g_intro{padding-bottom:20px; overflow: hidden; zoom: 1;}
.g_intro .intro_img{ width: 260px; height:130px; display: inline-block; float: left; margin-right: 24px;}
.g_intro .intro_img img{ width: 100%; height:100%;border-radius: 4px;}

.g_intro .zt_text .zt_title{ font-size: 16px; color: #333; height:32px; line-height:32px; display: inline-block; width: 380px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.g_intro .zt_text .more_zt{ font-size: 12px; color: #b4b4b4;float: right;}
.g_intro .zt_text .more_zt:hover{ color: #01a0e2;}
.g_intro .zt_text .zt_title:hover{color:#01a0e2 ;}
.g_intro .zt_text .zt_info{display: block;overflow: hidden;font-size: 14px;color: #666;max-height:78px;line-height: 26px;}

.label_game_info ul {width: 104%;}
.label_game_info ul li {display: block;float: left;margin: 0 18px 16px 0;width: 268px;height: 105px; border:1px solid #e6e6e6; transition: all .4s ease;}
.label_game_info ul li .img {float: left;overflow: hidden;margin-right: 12px;padding-left: 10px;padding-top: 15px;width:70px; height:70px;}
.label_game_info ul li .img:hover { opacity: 0.88; }
.label_game_info ul li .img img { width:100%; height:100%; border-radius:8px; }
.label_game_info ul li .name {display: block;float: left;width: 150px;height: 30px;line-height: 30px;overflow: hidden;color: #333;font-size: 16px;white-space:nowrap;text-overflow:ellipsis;margin-top: 14px;}

.label_game_info ul li .type {color: #01a0e2;display: inline-block;float: left;height: 20px;line-height: 20px;font-size: 12px; background: #cdedfa; border-radius: 1px; padding: 0 5px;}
.label_game_info ul li .bq {color: #999;width: 150px;display: block;float: left;height: 26px;line-height: 26px;font-size: 12px;}
.label_game_info ul li .bq i{margin: 0 5px; font-style: italic;}

.label_game_info ul li:hover{margin-top: -10px; border: 1px solid #fff; box-shadow: 0 0 10px #e4e4e4; margin-bottom: 26px;}
.label_game_info ul li:hover .name{color: #01a0e2;}


/* 右侧 */
.right-side{width: 298px; float: right;}

/* 热门推荐 */
.introuctions {margin-bottom: 26px;}
.introuctions ul{padding-top:12px;}
.introuctions ul li{padding:14px 0; height: 70px; border-bottom: 1px solid #ededed;}
.introuctions ul li a{display: block; width: 100%; height: 100%; overflow: hidden; zoom: 1;}
.introuctions ul li img{width: 70px; height: 70px; border-radius: 8px; margin-right: 8px; float: left;}
.introuctions ul li img:hover{opacity: .8; filter: alpha(opacity=80)}
.introuctions ul li .n{width: 160px; float: left;}
.introuctions ul li .n b{display: block; width: 100%; height: 26px; font-size: 16px; color: #333; line-height: 26px; overflow: hidden;}
.introuctions ul li .n .star{display: block; width: 80px; height: 15px; background: url(img/pc-icons.png) no-repeat; overflow: hidden; zoom: 1; background-position: 0 -112px;}
.introuctions ul li .n .star em{display: block; width: 80%; height: 15px; background: url(img/pc-icons.png) no-repeat; background-position: 0 -95px; float: left;}
.introuctions ul li .n .bq{font-size: 12px; color: #999; height: 20px; line-height: 20px; margin-top: 6px;}
.introuctions ul li .n .bq i{margin: 0 5px; font-style: italic;}
.introuctions ul li .btn{width: 46px; height: 46px; float: right;font-size: 12px; text-align: center; line-height: 20px;margin-top: 12px; border-radius: 2px;}
.introuctions ul li .btn em{display: block; width: 100%; height: 28px; background: url(img/pc-icons.png) no-repeat; background-position: -51px -141px;}
.introuctions ul li .n b:hover{color: #01a0e2;} 
.introuctions ul li .btn:hover{background: #01a0e2; color: #fff;} 
.introuctions ul li .btn:hover em{background-position: -2px -141px;}

/* 本类排行 */
.ranks {margin-bottom: 26px;}
.ranks ul{padding-top:12px;}
.ranks ul li{padding:14px 0; border-bottom: 1px solid #ededed;}
.ranks ul li a{display: block; width: 100%; overflow: hidden; zoom: 1;}
.ranks ul li a .num{width: 18px; height: 18px; float: left; display: block; line-height: 18px; color: #fff; font-style: italic; border-radius: 2px; background: #939393; margin-right:12px; text-align: center;}
.ranks ul li a .n{width: 190px; float: left; line-height: 20px; height: 20px; overflow: hidden; font-size: 15px; color: #333;}
.ranks ul li a .btn{width: 46px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; color: #999; float: right;}
.ranks ul li a .n:hover{color: #01a0e2;}
.ranks ul li a .btn:hover{color: #01a0e2;}

.ranks ul li.r .num{height: 40px; line-height: 40px; text-align: center;}
.ranks ul li.r1 a .num{background: #e01b3c;}
.ranks ul li.r2 a .num{background: #f7a934;}
.ranks ul li.r3 a .num{background: #7ec23b;}

.ranks ul li.r img{width: 65px; height: 65px; border-radius: 8px; margin-right: 8px; float: left;}
.ranks ul li.r img:hover{opacity: .8; filter: alpha(opacity=80);}
.ranks ul li.r .n{width: 140px; float: left; height: 65px;}
.ranks ul li.r .n b{display: block; width: 100%; height: 32px; font-size: 16px; color: #333; line-height: 32px; overflow: hidden;}
.ranks ul li.r .n .bq{font-size: 12px; color: #999; height: 20px; line-height: 20px; margin-top: 6px;}
.ranks ul li.r .n .bq em{color: #9dcc9d;}
.ranks ul li.r .n .bq i{margin: 0 5px; font-style: italic;}
.ranks ul li.r .btn{width: 46px; height: 46px; float: right;font-size: 12px; text-align: center; line-height: 20px;margin-top: 9px; border-radius: 2px;}
.ranks ul li.r .btn em{display: block; width: 100%; height: 28px; background: url(img/pc-icons.png) no-repeat; background-position: -51px -141px;}
.ranks ul li.r .n b:hover{color: #01a0e2;} 
.ranks ul li.r .btn:hover{background: #01a0e2; color: #fff;} 
.ranks ul li.r .btn:hover em{background-position: -2px -141px;}

/* 最新更新 */
.latests{margin-bottom: 26px;}
.latests ul{padding-top:18px;}
.latests ul li{padding:7px 0;}
.latests ul li a{display: block; width: 100%; height: 32px;overflow: hidden;zoom: 1;}
.latests ul li a img{width: 32px; height: 32px; border-radius: 3px; float: left; margin-right: 9px;}
.latests ul li a .n{width: 160px; float: left; line-height: 32px; height: 32px; overflow: hidden; font-size: 15px; color: #333;}
.latests ul li a .date{width: 90px; height: 32px; line-height: 32px; text-align: right; font-size: 14px; color: #999; float: right;}
.latests ul li a:hover .n{color: #01a0e2;}

/* 专题合集 */
.zt-collections{margin-bottom: 26px;}
.zt-collections ul{padding-top:24px;}
.zt-collections ul li{width: 100%; height: 149px; margin-bottom: 14px;}
.zt-collections ul li a{display: block; width: 100%; height:149px;position: relative; border-radius: 5px; overflow: hidden;}
.zt-collections ul li img{width: 100%; height: 100%; border-radius: 5px;}
.zt-collections ul li a div{display: block; width: 100%;height: 100%; position: absolute; left: 0;bottom: 0; background: rgba(0,0,0,.5); display: none;}
.zt-collections ul li a div p{font-size: 15px; color: #fff; font-weight: bold; text-align: center; line-height: 25px; height: 25px; padding-top: 40px; overflow: hidden;}
.zt-collections ul li a div span{font-size: 12px; color: #fff; text-align: center; line-height: 26px; height: 26px; display: block; width: 74px; border-radius: 2px; margin: 10px auto 0; text-align: center; background: #0c8bc0;}
.zt-collections ul li:hover a div{display: block;}


/*预约*/
.yAlert_bg{ display: none; background: rgba(0,0,0,.5); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9998; }
.yAlert{width: 500px;position: fixed;height:240px;padding-bottom:10px;left: 50%;z-index: 9999;background: #fff;border-radius: 10px;overflow:hidden;top: 230px;display: none;margin-left: -250px;}
.yAlert_t{background: #01a0e2;font:16px/45px microsoft yahei;color:#fff;padding:0 15px;}
.yAlert_t span{float: right;font-size: 18px;width: 50px;text-align: center;cursor: pointer;}
.yAlert input,.yAlert .yAlert_bs,.yAlert .yAlert_br{width:80%;padding:0 10px;font:14px/40px microsoft yahei;border-radius: 5px;}
.yAlert input{border:#ccc 1px solid;display: block;margin:20px auto;height: 40px;overflow: hidden}
.yAlert input:focus{border:#01a0e2 1px solid}
.yAlert_b{border-top:#ddd 1px solid}
.yAlert .yAlert_bs,.yAlert .yAlert_br{font-size:16px;margin:10px auto;text-align: center}
.yAlert .yAlert_bs{background: #01a0e2;color:#fff;cursor: pointer;}
.yAlert .yAlert_br{border: #01a0e2 1px solid;color: #01a0e2;cursor: pointer;}