@charset "utf-8"; /* CSS Document *//*********** *@Description: 主css样式 *@Author:poqi *@Update: *@time:(2016-10-17)***********/ .scroll-box { position: absolute; top: 0; bottom: 60px; left: 0; right: 0; -webkit-overflow-scrolling: touch; max-width: 640px; margin: 0 auto; } /*首页*//*首页头部*/ .topnav { background: #fff; height: 69px; padding: 0 10px; overflow: hidden; position: relative; } .topnav .logo { padding-top: 9px; position: relative; z-index: 3; } .topnav .logo img { height: 51px } .topnav .rbtn { padding-top: 18px; position: relative; z-index: 3; } .topnav .rbtn a:first-child { margin-right: 8px; } @media screen and (max-width: 320px) { .topnav { padding: 0 6px; } .topnav .rbtn a:first-child { margin-right: 5px; } } .topnav .rbtn a img { height: 32px } .topnav .search-box-main { position: absolute; z-index: 2; padding: 22px 95px 0 120px; box-sizing: border-box; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .topnav .search-box-main input { display: block; text-indent: 0.6em; width: 100%; box-sizing: border-box; font-size: 12px; color: #999; border: 1px solid #ff9900; line-height: 24px; border-radius: 26px; margin: 0 auto; padding-right: 26px; } .topnav .search-box-main .search-btn { width: 26px; height: 26px; display: inline-block; position: absolute; right: 100px; top: 22px; background: url(../images/ic52_search.png) no-repeat; background-size: 100% 100%; } @media screen and (max-width: 320px) { .topnav .search-box-main { padding: 22px 83px 0 115px; } .topnav .search-box-main .search-btn { right: 88px; } } /* 轮播banner */ .swiper-container-banner .swiper-slide { width: 100%; } .swiper-container-banner .swiper-slide img { width: 100%; height: 100%; max-height: 175px; } .swiper-container-banner .swiper-pagination { line-height: 0; bottom: 8px; } .swiper-container-banner .swiper-pagination span { width: 12px; height: 12px; opacity: 1; background-color: #fff; transition: 0.3s; } .swiper-container-banner .swiper-pagination span.swiper-pagination-bullet-active { background-color: #03b4f5; } /*图标*/ .shortcut { width: 100%; background: #fff; padding: 10px 0 15px 0; border-bottom: 8px solid rgb(238, 238, 238); } .shortcut ul { width: 96%; margin: 8px auto 15px; } .shortcut ul.scroll1 { margin-top: 0; } .shortcut li { width: 20%; float: left; text-align: center; } .shortcut img { display: block; width: 70%; margin: 0 auto; } .shortcut span { padding-top: 10px; /*margin-top: 10px;*/ display: block; } /* 选项标题 */ .swiper-tab-box ul { background: #02b0ef; } .swiper-tab-box li { float: left; width: 33.33333%; font-size: 16px; line-height: 1em; padding: 13px 0 18px; color: #fff; text-align: center; position: relative; cursor: pointer; } .swiper-tab-box li:after { content: ''; width: 0; height: 2px; background-color: #fff; position: absolute; left: 0; right: 0; bottom: 7px; margin: auto; transition: 0.3s; } .swiper-tab-box li.on:after { width: 2.5em; } @media screen and (max-width: 320px) { .swiper-tab-box li { padding: 10px 0 15px; } } .swiper-container-news .swiper-slide { padding: 15px 10px 0; box-sizing: border-box; } @media screen and (max-width: 320px) { .swiper-container-news .swiper-slide { padding: 6px 6px 0; } } .swiper-container-news .swiper-slide ul { margin-bottom: 12px; } /* 热门游戏 */ .hot-game-box .swiper-container-hotGame { background-color: #fff; padding: 15px 10px; } @media screen and (max-width: 320px) { .hot-game-box .swiper-container-hotGame { padding: 15px 6px; } } .hot-game-box .swiper-container-hotGame .swiper-wrapper { height: 100%; } .hot-game-box .swiper-container-hotGame .swiper-slide { text-align: center; } .hot-game-box .swiper-container-hotGame .swiper-slide a { display: block; position: relative; width: 100%; height: 100%; height: 20rem; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 0; /* line-height: 0;*/ border: 1px solid #e5e5e5; border-radius: 5px; } .hot-game-box .swiper-container-hotGame .swiper-slide a .pic { padding: 0 10px; } .hot-game-box .swiper-container-hotGame .swiper-slide a .pic img { width: 100%; max-width: 160px; } .hot-game-box .swiper-container-hotGame .swiper-slide a .text { padding: 0 3px; } .hot-game-box .swiper-container-hotGame .swiper-slide a .name { font-size: 16px; line-height: 1.2em; color: #333; padding-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hot-game-box .swiper-container-hotGame .swiper-slide a .type { font-size: 14px; line-height: 16px; padding: 4px 0; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hot-game-box .swiper-container-hotGame .swiper-slide a .rank-num { position: absolute; left: -1px; top: -1px; width: 0; height: 0; border-style: solid; border-width: 16px 16px; border-color: #d2d2d2 transparent transparent #d2d2d2; border-top-left-radius: 6px;z-index: 2; } .hot-game-box .swiper-container-hotGame .swiper-slide:nth-of-type(1) a .rank-num { border-top-color: #ff4040; border-left-color: #ff4040; } .hot-game-box .swiper-container-hotGame .swiper-slide:nth-of-type(2) a .rank-num { border-top-color: #ff9900; border-left-color: #ff9900; } .hot-game-box .swiper-container-hotGame .swiper-slide:nth-of-type(3) a .rank-num { border-top-color: #4aadfe; border-left-color: #4aadfe; } .hot-game-box .swiper-container-hotGame .swiper-slide a .rank-num em { font-style: normal; font-size: 12px; position: absolute; top: -6px; left: -10px;top:-1rem;left:-1rem; color: #fff; } .hot-game-box .swiper-container-hotGame .swiper-slide:nth-of-type(1) .swiper-slide a .rank-num { border-top-color: #ff4040; border-left-color: #ff4040; } .hot-game-box .swiper-container-hotGame .swiper-slide:nth-of-type(2) .swiper-slide a .rank-num { border-top-color: #ff9900; border-left-color: #ff9900; } .hot-game-box .swiper-container-hotGame .swiper-slide:nth-of-type(3) .swiper-slide a .rank-num { border-top-color: #4aadfe; border-left-color: #4aadfe; } .hot-game-box .swiper-container-hotGame .swiper-slide .more span { font-size: 12px; color: #999; height: 20px; line-height: 20px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; vertical-align: middle; } .hot-game-box .swiper-container-hotGame .swiper-slide .more span i { content: ''; width: 20px; height: 20px; background: url(../images/ic_add.png) no-repeat; background-size: 100% 100%; display: inline-block; vertical-align: middle; position: relative; top: -1px; margin-right: 2px; } /* 豪华礼包 */ .gift-box { margin-bottom: 10px; background-color: #fff; } .gift-box .box-title { border: none; } .gift-box .gift-box-in ul { clear: both; } .gift-box .gift-box-in li { width: 50%; float: left; } .gift-box .gift-box-in li:nth-of-type(n+5) { display: none; } .gift-box .gift-box-in .gift-first-box { position: relative; overflow: hidden; } .gift-box .gift-box-in .gift-first-box a { display: inline-block; height: 62px; padding: 0 5px 0 54%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .gift-box .gift-box-in .gift-first-box img { width: 100%; height: 100%; max-height: 200px; } .gift-box .gift-box-in li a { display: block; padding: 10px; border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; } .gift-box .gift-box-in a:after { content: ''; clear: both; height: 0; display: block; } .gift-box .gift-box-in .pic { width: 62px; height: 62px; float: left; } .gift-box .gift-box-in li:nth-of-type(even) a { border-right: none; } .gift-box .gift-box-in li:nth-of-type(n+3) a { border-bottom: none; } .gift-box .gift-box-in li .pic img { width: 62px; height: 62px; } .gift-box .gift-box-in .text { padding-left: 70px; padding-top: 5px; } .gift-box .gift-box-in .text .name { font-size: 15px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gift-box .gift-box-in .text .type { font-size: 12px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gift-box .gift-box-in .text .number { font-size: 12px; color: #ff4040; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gift-box .gift-box-in .text .number span { color: #999; } @media screen and (max-width: 320px) { .gift-box .gift-box-in li a { padding: 10px 6px; } .gift-box .gift-box-in .text { padding-left: 68px; } } /* 游戏头条 */ .news-swiper-box { background-color: #fff; /*margin-bottom: 10px;*/ } .news-swiper-box .pic img { width: 100%; max-height: 268px; border-radius: 8px; } .news-swiper-box .news-list li { zoom: 1; margin-top: 15px; } .news-swiper-box .news-list li:nth-of-type(n+6) { display: none; } .news-swiper-box .news-list li:after { content: ''; clear: both; height: 0; display: block; } .news-swiper-box .news-list li span { font-size: 14px; line-height: 20px; float: left; } .news-swiper-box .news-list li a { font-size: 14px; line-height: 20px; color: #333; float: left; margin-left: 5px; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-swiper-box .news-list li .time { color: #333; float: right; } .news-swiper-box .news-list li .type { color: #fff; background: #ff9800; background: linear-gradient(to right, #ff9800, #ff7300); padding: 0 5px; border-radius: 3px; } /* 排行榜 */ .rank-swiper-box { background-color: #fff; /*margin-bottom:10px;*/ } .rank-swiper-box .swiper-tab-box li { width: 25%; } .rank-swiper-box .rank-list li { position: relative; padding: 15px 10px 15px 45px; border-top: 1px solid #f1f1f1; } .rank-swiper-box .rank-list li .game-con { display: block; max-width: 70%; } .rank-swiper-box .rank-list li .game-con .pic { float: left; width: 62px; height: 62px; } .rank-swiper-box .rank-list li .game-con .pic img { width: 100%; height: 100%; } .rank-swiper-box .rank-list li .game-con .text { padding-left: 75px; padding-top: 2px; } .rank-swiper-box .rank-list li .game-con .text .name { font-size: 15px; color: #333; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank-swiper-box .rank-list li .game-con .text .size, .rank-swiper-box .rank-list li .game-con .text .type { font-size: 12px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank-swiper-box .rank-list li .rank-num { position: absolute; top: 0; bottom: 0; left: 10px; margin: auto; font-size: 14px; color: #fff; background-color: #d2d2d2; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 100%; } .rank-swiper-box .rank-list li .download { position: absolute; top: 0; bottom: 0; right: 10px; font-size: 12px; margin: auto; height: 26px; line-height: 26px; padding: 0 10px; border: 1px solid #ff4040; border-radius: 5px; color: #ff4040; transition: 0.3s; } .rank-swiper-box .rank-list li .download:hover { background-color: #ff4040; color: #fff; } @media screen and (max-width: 320px) { .rank-swiper-box .rank-list li { padding: 15px 6px 15px 32px; } .rank-swiper-box .rank-list li:nth-of-type(n+5) { display: none; } .rank-swiper-box .rank-list li .rank-num { left: 6px; font-size: 12px; width: 20px; height: 20px; line-height: 20px; } .rank-swiper-box .rank-list li .download { right: 6px; } } .rank-swiper-box .rank-first-three { padding: 15px; } .rank-swiper-box .rank-first-three ul { min-height: 110px; } .rank-swiper-box .rank-first-three ul { text-align: center; position: relative; padding: 55px 10px 0; } .rank-swiper-box .rank-first-three li { display: inline-block; width: 28%; box-sizing: border-box; padding: 40px 0 30px; border-radius: 5px; position: relative; } .rank-swiper-box .rank-first-three li .pic { position: absolute; left: 0; top: -21px; right: 0; margin: auto; } .rank-swiper-box .rank-first-three li .pic img { width: 62px; height: 62px; width: 100%; height: 100%; box-sizing: border-box; border-radius: 12px; border: 2px solid #fff; } .rank-swiper-box .rank-first-three li .rank-num { position: absolute; left: 0; right: 0; top: -51px; margin: auto; width: 34px; height: 17px; padding-top: 17px; background-repeat: no-repeat; background-size: 100% 100%;; font-size: 12px; line-height: 1em; color: #fff; } .rank-swiper-box .rank-first-three li .name { font-size: 16px; color: #fff; padding: 10px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank-swiper-box .rank-first-three li .download { color: #333; display: block; font-size: 14px; line-height: 30px; position: absolute; width: 100%; bottom: 0; left: 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .rank-swiper-box .rank-first-three .li-1 { position: absolute; left: 0; right: 0; bottom: 10px; margin: auto; background-color: #ff4040 } .rank-swiper-box .rank-first-three .li-2 { float: left; background-color: #ff9900; } .rank-swiper-box .rank-first-three .li-3 { float: right; background-color: #4aadfe; } .rank-swiper-box .rank-first-three .li-1 .download { background-color: #ea2323; } .rank-swiper-box .rank-first-three .li-2 .download { background-color: #ff7a00; } .rank-swiper-box .rank-first-three .li-3 .download { background-color: #2f91fd; } .rank-swiper-box .rank-first-three .li-1 .rank-num { background-image: url(../images/ic53_rank_1.png); } .rank-swiper-box .rank-first-three .li-2 .rank-num { background-image: url(../images/ic53_rank_2.png); } .rank-swiper-box .rank-first-three .li-3 .rank-num { background-image: url(../images/ic53_rank_3.png); } @media screen and (max-width: 320px) { .rank-swiper-box .rank-first-three { padding: 15px 6px; } .rank-swiper-box .rank-first-three ul { padding: 55px 6px 0; } .rank-swiper-box .rank-first-three li .name { font-size: 14px; } } /* 友情链接 */ .friendship-box { background-color: #fff; margin-bottom: 10px; } .fridendship-list { padding: 10px 20px; } .fridendship-list li { width: 33.33333%; padding: 10px 0; float: left; } .fridendship-list li:after { content: ''; clear: both; height: 0; display: block; } .fridendship-list li a { display: inline-block; max-width: 94%; font-size: 14px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media screen and (max-width: 320px) { .fridendship-list { padding: 0 12px; } } /* 资讯中心 *//* 轮播 */ .info-banner { padding: 10px; background-color: #fff; } .info-banner .swiper-container-infoBanner .swiper-slide img { width: 100%; max-height: 220px; } .info-banner .swiper-container-infoBanner .swiper-pagination { line-height: 0; text-align: right; padding-right: 10px; box-sizing: border-box; } .info-banner .swiper-container-infoBanner .swiper-pagination span { width: 14px; height: 14px; background-color: #fff; opacity: 1; border-radius: 14px; transition: 0.3s; margin: 0 3px; } .info-banner .swiper-container-infoBanner .swiper-pagination .swiper-pagination-bullet-active { width: 30px; background-color: #ff9900; } /* 资讯列表 */ .info-box { margin-top: 10px; background-color: #fff; } .info-swiper-tab { background-color: #fff; border-bottom: 1px solid #e5e5e5; } .info-swiper-tab ul { padding: 0 10px; } .info-swiper-tab li { width: 20%; float: left; padding: 10px 0; font-size: 16px; color: #666; text-align: center; position: relative; transition: 0.3s; cursor: pointer; } .info-swiper-tab li:after { width: 0; height: 2px; background-color: #ffaf25; content: ''; position: absolute; bottom: -1px; left: 0; right: 0; margin: auto; transition: 0.3s; } .info-swiper-tab li.on { color: #ffaf25; } .info-swiper-tab li.on:after { width: 45px; } .info-list { padding: 10px; } .info-list li { margin: 10px 0; } .info-list li:after { content: ''; clear: both; height: 0; display: block; } .info-list a { display: block; } .info-list .pic { width: 100px; height: 60px; overflow: hidden; float: left; } .info-list .pic img { width: 100%; height: 100%; } .info-list .text { padding-left: 110px; } .info-list .text .title-box { position: relative; height: 20px; } .info-list .text .title-box:after { content: ''; clear: both; height: 0; display: block; } .info-list .text p.title { font-size: 15px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .info-list .text span.title { font-size: 15px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: left; max-width: 82%; } .info-list .text .type { padding: 3px 5px; font-size: 12px; line-height: 12px; height: 12px; border-radius: 3px; color: #fff; float: left; margin-left: 3px; } .info-list .text .type-1 { background-color: #ff6b6b; } .info-list .text .type-2 { background-color: #4badff; } .info-list .text .type-3 { background-color: #2bcc95; } .info-list .text .type-4 { background-color: #ff8eb3; } .info-list .text .intr { font-size: 12px; color: #999; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: left; width: 100%; } .info-list .text .time { font-size: 12px; color: #999; } @media screen and (max-width: 320px) { .info-banner { padding: 10px 6px; } .info-list { padding: 10px 6px; } .info-list .text span.title { max-width: 78%; } } /*内页*//*搜索*/ .search_box { background: #f1f1f1; padding: 15px 10px } @media screen and (max-width: 320px) { .search_box { padding: 10px 6px } } .search_box .search { background: #FFF; border-radius: 5px; height: 39px } .search_box .search .search_l { padding: 0 40px 0 10px } .search_box .search .search_r { float: right; width: 39px } .search_box .search .input_txt { background: none; border: none; width: 100%; font-size: 15px; font-family: "San Francisco", "Noto Sans CJK SC Thin", "Microsoft YaHei"; color: #c6c6c6; line-height: 20px; padding: 10px 0 9px; margin: 0; vertical-align: top } .search_box .search .btn { background: none; border: none; height: 39px; width: 100%; padding: 0; margin: 0; vertical-align: top; cursor: pointer } .search_box .search .ic60_zoom { display: inline-block; background: url(../images/ic_zoom.png); background-size: 39px; height: 39px; width: 39px; vertical-align: top } /*搜索结果提示*/ .result-box { background: #FFF; text-align: center; padding: 200px 0 100px } .result-box .sorry-word { font-size: 16px; color: #666; margin-bottom: 10px } .result-box .brief-word { font-size: 12px; color: #999 } /*活动中心*/ .activity_list { padding-top: 6px; min-height: 350px } .activity_list li { border-bottom: 1px solid #f1f1f1; line-height: 53px; height: 53px; padding: 0 22px } .activity_list .text { display: block; float: left; font-size: 15px; color: #373737; width: 70%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .activity_list .time { float: right; font-size: 15px; color: #626262 } /*文章详细*/ .list_detail_box { padding: 15px 10px; background-color: #fff; } .list_detail { border-bottom: 1px solid #f1f1f1; text-align: center } .list_detail h1 { font-size: 18px; color: #323131; line-height: 17px; padding-top: 16px; font-weight: normal; } .list_detail .title { font-size: 18px; color: #323131; line-height: 17px; padding-top: 16px; font-weight: normal; } .list_detail .text { display: block; font-size: 12px; color: #626262; line-height: 16px; padding: 10px 0 } /*上下页*/ .page_updown { border-top: 1px solid #f1f1f1; font-size: 14px; color: #595858; line-height: 16px; padding: 20px 0 10px } .page_updown p { width: 48%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .page_updown a { color: #666 } .page_updown a:hover { color: #ff9900 } .m_text { font-size: 14px; color: #595858; line-height: 25px; padding: 15px 0 } .m_text img { max-width: 100%; } .m_text video { max-width: 100%; margin: 10px auto; display: table; } /*开服列表*/ .zone_list { min-height: 350px } .zone_list dt { background: #f2f1f1; font-size: 16px; color: #626262; text-align: center; line-height: 48px; height: 48px } .zone_list dd { border-bottom: 1px solid #f1f1f1; font-size: 15px; color: #373737; text-align: center; line-height: 60px; height: 60px } .zone_list dd a { color: #373737 } .zone_list .name { display: block; float: left; width: 30% } .zone_list dd .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .zone_list .date_time { display: block; float: left; width: 26% } .zone_list .time { display: block; float: left; width: 13%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .zone_list .date { display: block; float: left; width: 13%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .zone_list .zone { display: block; float: left; width: 44%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } /*游戏中心*/ .game_list { background: #FFF; min-height: 350px } .game_list li { border-bottom: 1px solid #f1f1f1; padding: 15px 22px; position: relative } .game_list .games_con { float: left; width: 75% } .game_list .games_con .pic { float: left; width: 65px; height: 65px } .game_list .games_con .pic img { width: 100%; height: 100%; border-radius: 10px } .game_list .games_con .txt { padding-left: 75px } .game_list .games_con .name { display: block; font-size: 15px; color: #373737; line-height: 16px; padding-top: 3px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden } .game_list .games_con .text { font-size: 12px; color: #999; line-height: 12px; height: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden } .game_list .games_con .stars_box { line-height: 12px; padding: 8px 0 6px } .game_list .btn { display: inline-block; background: #108ee9; border-radius: 3px; font-size: 12px; color: #FFF; text-align: center; height: 32px; line-height: 32px; width: 72px; vertical-align: top; position: absolute; top: 26px; right: 15px } .game_list .btn:hover, .game_list .btn:visited { background: #0d77e5 } /*游戏介绍*/ .games_abous { padding: 15px 10px; } .games_abous .text { font-size: 14px; color: #666; line-height: 25px; padding-top: 5px } .game-detail { padding: 15px 10px; background-color: #fff; } .game-detail .pic { width: 68px; height: 68px; float: left; overflow: hidden; } .game-detail .pic img { width: 100%; height: 100%; } .game-detail .game-con { position: relative; } .game-detail .game-con:after { content: ''; clear: both; height: 0; display: block; } .game-detail .text { padding: 4px 100px 0 76px; } .game-detail .text .name { font-size: 16px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-detail .text .size { font-size: 14px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-detail .text .score { font-size: 14px; color: #999; vertical-align: middle; } .game-detail .text .score .stars { top: -2px; } .game-detail .btn-box { position: absolute; right: 0; top: 0; } .game-detail .btn-box a { display: block; font-size: 14px; color: #fff; background-color: #4aadfe; line-height: 1em; padding: 8px 12px; border-radius: 5px; } .game-detail .btn-box a i { width: 14px; height: 14px; background-repeat: no-repeat; background-size: 100% 100%; display: inline-block; vertical-align: middle; margin-right: 5px; } .game-detail .btn-box .download { background-color: #4aadfe; } .game-detail .btn-box .gift { background-color: #ff4040; margin-top: 10px; } .game-detail .btn-box .download i { background-image: url(../images/ic22_download.png); } .game-detail .btn-box .gift i { background-image: url(../images/ic22_gift.png); } .swiper-container-vestGame { padding: 15px 10px 40px; } .swiper-container-vestGame .swiper-slide img { width: 100%; } .swiper-container-vestGame .swiper-pagination { line-height: 0; } .swiper-container-vestGame .swiper-pagination span { width: 14px; height: 14px; background-color: #e0e0e0; opacity: 1; border-radius: 14px; transition: 0.3s; margin: 0 3px; } .swiper-container-vestGame .swiper-pagination .swiper-pagination-bullet-active { background-color: #ff9900; } .game-detail-2 { padding: 15px 10px; background-color: #fff; border-bottom: 10px solid #ebefed; } .game-detail-2 .game-con { height: 68px; background-color: #f3f3f3; padding: 10px 0 10px 32px; border-radius: 6px; position: relative; overflow: hidden; } .game-detail-2 .game-con:before { content: ''; width: 40px; height: 40px; background: url(../images/ic40_hot.png) no-repeat; background-size: cover; position: absolute; left: 0; top: 0; } .game-detail-2 .pic { width: 68px; height: 68px; float: left; overflow: hidden; } .game-detail-2 .pic img { width: 100%; height: 100%; } .game-detail-2 .text { padding: 10px 10px 0 76px; } .game-detail-2 .text .name { font-size: 16px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-detail-2 .text .system { font-size: 14px; color: #999; line-height: 22px; } .game-detail-2 .text .system i { width: 18px; height: 18px; background-repeat: no-repeat; background-size: cover; display: inline-block; vertical-align: middle; margin-top: -2px; } .game-detail-2 .text .system .android { background-image: url(../images/ic31_android.png); } .game-detail-2 .text .system .ios { background-image: url(../images/ic31_ios.png); } .game-detail-2 .btn-box { text-align: center; position: relative; margin-top: 10px; } @media screen and (min-width: 360px) { .game-detail-2 .btn-box { padding: 0 15px; } } .game-detail-2 .btn-box:after { content: ''; clear: both; display: block; height: 0; } .game-detail-2 .btn-box a { display: inline-block; font-size: 14px; color: #fff; background-color: #4aadfe; line-height: 1em; width: 75px; height: 1em; padding: 8px 10px; border-radius: 5px; } .game-detail-2 .btn-box a i { width: 14px; height: 14px; background-repeat: no-repeat; background-size: 100% 100%; display: inline-block; vertical-align: middle; margin-right: 5px; } .game-detail-2 .btn-box .index { background-color: #2bcc95; float: left; } .game-detail-2 .btn-box .download { background-color: #4aadfe; position: absolute; left: 0; right: 0; top: 0; margin: auto; } .game-detail-2 .btn-box .gift { background-color: #ff4040; float: right; } .game-detail-2 .btn-box .index i { background-image: url(../images/ic22_index.png); } .game-detail-2 .btn-box .download i { background-image: url(../images/ic22_download.png); } .game-detail-2 .btn-box .gift i { background-image: url(../images/ic22_gift.png); } .more-box { text-align: center; padding: 0 0 20px; } .more-box .more { display: inline-block; font-size: 16px; line-height: 1em; color: #fff; background-color: #ffaa19; padding: 10px 0; border-radius: 5px; width: 85%; text-align: center; } /*礼包中心*/ .gift_list { background: #FFF; min-height: 350px } .gift_list li { border-bottom: 1px solid #f1f1f1; padding: 15px 22px; position: relative } .gift_list .gift_con { float: left; width: 75% } .gift_list .gift_con .pic { float: left; width: 65px; height: 65px } .gift_list .gift_con .pic img { width: 100%; height: 100%; border-radius: 10px } .gift_list .gift_con .txt { padding-left: 75px } .gift_list .gift_con .name { display: block; font-size: 15px; color: #373737; line-height: 16px; padding-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .gift_list .gift_con .text { font-size: 12px; color: #999; line-height: 12px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .gift_list .gift_con .progre { height: 12px; line-height: 12px; padding: 8px 0 6px } .gift_list .gift_con .progre .surplus { font-size: 12px; color: #f15a4a; padding-left: 10px; vertical-align: top } .gift_list .btn { display: inline-block; background: #f15a4a; border-radius: 3px; font-size: 12px; color: #FFF; text-align: center; height: 32px; line-height: 32px; width: 72px; vertical-align: top; position: absolute; top: 26px; right: 15px } .gift_list .btn:hover, .gift_list .btn:visited { background: #ea2d25 } .gift_list .btn_no { display: inline-block; background: #dedede; border-radius: 3px; font-size: 12px; color: #FFF; text-align: center; height: 32px; line-height: 32px; width: 72px; vertical-align: top; cursor: context-menu; position: absolute; top: 26px; right: 15px } /*进度100%*/ .progre_slider { background: #F1F1F1; display: inline-block; border-radius: 2px; line-height: 3px; height: 3px; width: 80px; vertical-align: middle; overflow: hidden } .progre_slider .goso { background: #f15a4a; display: inline-block; border-radius: 2px; line-height: 3px; height: 3px; vertical-align: top } /*弹出礼包领取*/ .popup_gift_box { margin-top: -120px; top: 50% } .popup_gift { background: #FFF; border-radius: 5px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); padding: 15px; margin: 0 30px; } .popup_gift .t_list { font-size: 15px; color: #999; line-height: 180%; padding: 20px 0 } .popup_gift .t_list label { display: block; float: left; color: #5b5b5b; text-align: right; width: 70px } .popup_gift .t_list .r_box { padding-left: 80px } /*客服*/ .service_list { padding: 18px 22px } .service_list li { display: block; background: #FFF; border: 1px solid #ededed; border-radius: 5px; padding: 30px 0 30px 18px; margin-bottom: 6px } .service_list li a { display: block } .service_list i { float: left; display: block; border-radius: 5px; width: 50px; height: 50px } .service_list i img { width: 100%; height: 100% } .service_list .rbox { padding-left: 60px } .service_list .rbox .title { font-size: 20px; color: #000; padding-bottom: 5px } .service_list .rbox .text { font-size: 14px; color: #5d5d5d } .service_list .rbox .text a { display: inline-block } .service_list li:nth-child(1) i { background-color: #f5a22c } .service_list li:nth-child(2) i { background-color: #87c347 } .service_list li:nth-child(3) i { background-color: #59a1f3 } .service_list li:nth-child(4) i { background-color: #ec656b } .service_list li:nth-child(5) i { background-color: #df85d3 } /*客服二维码*/ .popup_wxcode_box { display: none; margin-top: -120px; top: 50% } .popup_wxcode { background: #FFF; border-radius: 5px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); text-align: center; padding: 20px 10px; margin: 0 30px; } .popup_wxcode img { height: 175px } /*登录注册填写*/ .login_logo { text-align: center; padding: 60px 0 40px } .login_logo img { height: 95px } .login_box li { background: #FFF; border: 1px solid #e6e6e6; line-height: 53px; height: 53px; overflow: hidden; margin-top: -1px; position: relative } .login_box .btlr { border-radius: 5px 5px 0 0 } .login_box .bblr { border-radius: 0 0 5px 5px } .login_box li label { display: block; float: left; width: 47px; height: 53px } .login_box li label img { width: 100%; height: 100%; vertical-align: top } .login_box li .rbox { display: block; padding-left: 62px } .login_box li .rbox .text { font-size: 14px; color: #999 } .login_box li .rbox .input_t { background: none; border: none; font-size: 16px; font-family: "San Francisco", "Noto Sans CJK SC Thin", "Microsoft YaHei"; color: #c6c6c6; line-height: 22px; width: 100%; padding: 15px 0; margin: 0; outline: none; vertical-align: top } .login_box li .btn_info { border: 1px solid #fdb188; border-radius: 3px; font-size: 12px; color: #ff6716; text-align: center; height: 23px; line-height: 23px; padding: 0 15px; position: absolute; top: 9px; right: 10px } .login_box .btn_verify { display: inline-block; background: #58a1f3; border-radius: 3px; font-size: 14px; color: #FFF; text-align: center; height: 33px; line-height: 33px; padding: 0 20px; position: absolute; top: 8px; right: 10px } .login_box .btn_verify_no { background: #cdcdcd; color: #FFF } .login_last a { font-size: 14px; color: #ee8f00; line-height: 16px; } /*切换*/ .login_tab { padding-bottom: 20px } .login_tab ul { width: 70%; margin: 0 auto } .login_tab li { float: left; width: 50% } .login_tab a { display: block; border: 1px solid #e6e6e6; font-size: 15px; color: #666; text-align: center; line-height: 16px; padding: 11px 0 } .login_tab .on { background: #ff9900; border-color: #ff9900; color: #FFF } .login_tab .brtb { border-radius: 0 5px 5px 0 } .login_tab .bltb { border-radius: 5px 0 0 5px } /* *底部悬浮条样式 @author zwm*/ .div_fixbottom { /* position: fixed; top: 0; left: 0; z-index: 10001;*/ width: 100%; } .zbgOpacity { background-color: rgba(255, 255, 255, 0.9); } /*.banner,.swiper-container {width:100%;}*//*媒体对象 begin!*/ .zmedia, .zmedia_body { overflow: hidden; zoom: 1; position: relative; } .zmedia_body { padding: 0.8rem 1.2rem 0.8rem 0.25rem; } .zmedia_body, .zmedia_left, .zmedia_right { display: table-cell; vertical-align: top; } .zmedia_middle { vertical-align: middle; } .zmedia_left { padding: 0.35vw 3.7vw 0.35vw 2.59vw; } .zmedia_heading, .zmedia_p { margin: 0.1rem 0; font-size: 1.6rem; } .zmedia_right { padding-left: 1rem; position: absolute; top: 0; right: 0; } /*end 媒体对象*/ .zclose_div { float: left; margin: 6.2vw 2.59vw 0; } .zclose_btn { background: url(../images/icon_close@2x.png) no-repeat center center; display: table-cell; width: 4.16vw; height: 4.16vw; text-align: center; vertical-align: middle; } .zmedia_a { position: relative; float: left; } .zspan_tab { display: table; position: absolute; top: 0; left: 0; background-color: #d1d1d1; height: 12.1vw; width: 12.1vw; z-index: 0; border-radius: 8px; } .zspan_tabcell { display: table-cell; vertical-align: middle; text-align: center; } .zspan_tab .zspan_tabcell div { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zmedia_img { display: block; height: 12.1vw; width: 12.1vw; position: relative; z-index: 2; border-radius: 8px; } .col_orag { color: #505050; } .col_white { color: #999; font-size: 1rem; } .zmedia_abtn { display: inline-block; width: 23.89vw; height: 59px; line-height: 60px; color: #fff; background-color: #19b1ea; text-align: center; vertical-align: middle; } .wh_65 { height: 6.5rem; width: 6.5rem; } @media screen and (min-width: 769px) { .wh_65 { height: 13.2rem; width: 13.2rem; } } .pic .za_icon { position: relative; display: inline-block; height: 100%; width: 100%; border-radius: 12px; background-color: #e2e2e2; overflow: hidden; } .pic img { height: 100%; position: relative; z-index: 2; } .dis_tab { position: absolute; z-index: 0; top: 0; left: 0; display: table; width: 100%; height: 100%; text-align: center; vertical-align: middle; font-size: 16px; color: #bababa; table-layout: fixed; background-color: #e2e2e2; } .dis_tabcell { display: table-cell; vertical-align: middle; } .dis_tabcell div { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .gift-first-box { height: 31.1vw; position: relative; } .news-swiper-box .swiper-slide .pic { width: 100%; height: 26vh; } .z_fuzhua { display: inline-block; position: relative; height: 100%; width: 100%; } .z_fuzhua .dis_tab { border-radius: 0.8rem; } .z_wh516 { width: 5.16rem; height: 5.16rem; margin: 0 auto; } .swiper-container-banner .swiper-slide img.zindex_img { height: 27vh; } @media screen and (min-width: 769px) { .zbgOpacity { display: none; } .swiper-container-banner .swiper-slide a.swiper-slide_a { max-height: 270px; height: 270px } .swiper-container-banner .swiper-slide img { max-height: 270px; height: 270px !important; } .gift-first-box { height: 200px; } .news-swiper-box .swiper-slide .pic { height: 260px; } } @media screen and (max-width: 450px) { .hot-game-box .swiper-container-hotGame .swiper-slide a { height: 12.6rem; } } @media screen and (max-width: 376px) { .hot-g8me-box .swiper-container-hotGame .swiper-slide a { height: 12.4rem; } .hot-game-box .swiper-container-hotGame .swiper-slide a .name { font-size: 12px; } } @media screen and (max-width: 321px) { .hot-game-box .swiper-container-hotGame .swiper-slide a { height: 11rem; } } .fixbottom_content { padding-left: 0; } .zmarg_btm59 { margin-bottom: 59px; } .img-font { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: table; text-align: center; } .img-font-cell { display: table-cell; height: 100%; width: 100%; vertical-align: middle; } .hot-game-box { border-bottom: 8px solid #ECEEED; }