.game-bg { width: 100%; height: 950px; text-align: center; position: absolute; top: 0px; left: 0px; overflow: hidden; } .game-bg img { position: absolute; top: 0; left: 50%; margin-left: -960px; } .game-container { padding-top: 452px; margin-bottom: 30px; position: relative; } .game-container .bd-top { height: 10px; border-radius: 5px 5px 0 0; } .game-container .game-wp { overflow: visible; } .game-left { width: 787px; padding-left: 45px; } .game-infomation .logo { height: 274px; text-align: center; } .game-infomation .img { width: 110px; height: 110px; border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 26px; margin-bottom: -36px; overflow: hidden; position: relative; top: -50px; /*left: -4px;*/ } .game-infomation .enterhome { color: #fff; border-color: #fb8472; background: #fb8472; } .game-infomation .enterhome:hover { color: #fff; border-color: #03b4f5; background: #03b4f5; } .game-infomation .info { height: 274px; line-height: 30px; padding: 10px 10px 0; font-size: 14px; } .game-infomation .name { font-size: 24px; color: #333; } .game-infomation .level { font-size: 20px; color: #ff7544; } .game-infomation .dl { width: 360px; height: 118px; padding: 16px 25px; margin-top: 48px; border: 1px solid #e6e6e6; border-radius: 5px; position: relative; } .game-infomation .dl .btn-dl { display: block; width: 188px; height: 50px; margin-bottom: 14px; background: url(../images/type2.jpg) no-repeat; } .game-infomation .dl .btn-dl:hover { opacity: 0.9; } .game-infomation .dl .btn-ios { background-position: 0 -50px; } .game-infomation .dl .qr { width: 61px; height: 53px; background: url(../images/cr.png) no-repeat; position: absolute; top: -3px; right: -3px; } .game-infomation .dl-qr { width: 120px; color: #999; line-height: 28px; text-align: center; position: absolute; top: 15px; right: 65px; } .gamedetail {} .gamedetail .tit { padding: 14px 0; border-bottom: 1px solid #eee; } .gamedetail .tit .in { height: 48px; border-left: 6px solid #75d7ff; padding-left: 10px; } .gamedetail .tit h3 { font-size: 30px; line-height: 30px; font-weight: normal; color: #717171; } .gamedetail .tit p { font-size: 14px; color: #aeaeae; letter-spacing: 1.6px; } .gamedetail .con { line-height: 30px; font-size: 14px; padding: 30px 0; } .gamepic .tit .in { border-left: 6px solid #7152ff; } .gamepic-box { width: 670px; height: 336px; padding: 40px 54px; overflow: hidden; position: relative; } .gamepic-box .slide-in { width: 670px; height: 336px; overflow: hidden; position: relative; } .gamepic-box .slide-bd { width: 2000px; position: relative; } .gamepic-box .slide-bd li { width: 216px; height: 336px; padding: 0 5px; float: left; } .slide-next, .slide-prev { width: 45px; height: 80px; line-height: 200; overflow: hidden; position: absolute; top: 168px; left: 0px; background: #000; opacity: 0.5; filter: alpha(opacity=50); } .slide-next { left: auto; right: 0px; background-position: -68px -434px; } .slide-next:hover, .slide-prev:hover { background: #03b4f5; opacity: 1; } .slide-next:before, .slide-prev:before { display: block; width: 14px; height: 25px; margin: 28px auto 0; content: ''; } .slide-prev:before { background-position: 0 -240px; } .slide-next:before { background-position: 0 -270px; } .game-right { width: 300px; padding-right: 45px; } .bdr-tit { height: 18px; line-height: 18px; font-size: 18px; padding-left: 15px; border-left: 4px solid #03b4f5; margin: 10px 0; } .mod-othergift { border: 1px solid #e6e6e6; border-radius: 5px; margin: 48px 0 25px 0; } .othergift-list { padding: 0 18px 20px } .othergift-list li { width: 262px; height: 68px; border-bottom: 1px dotted #cecece; padding: 15px 0; overflow: hidden; } .othergift-list .img { float: left; } .othergift-list .info { width: 102px; padding: 0 10px; float: left; } .othergift-list .name { font-size: 16px; padding: 10px 0 4px 0; color: #fd5253; } .othergift-list .type { color: #999; } .othergift-list .btn-getgift { width: 70px; height: 26px; line-height: 26px; text-align: center; color: #fff; border-radius: 5px; margin-top: 20px; background: #fb8472; float: left; } .othergift-list .btn-getgift:hover { background: #03b4f5; } .mod-pfqr { border: 1px solid #e6e6e6; border-radius: 5px; padding: 20px; } .mod-pfqr .t1 { font-size: 16px; color: #333; margin: 8px 0 10px 0; padding-left: 20px; } .mod-pfqr .t2 { font-size: 14px; color: #666; padding-left: 20px; } .global-qr { width: 110px; height: 110px; } .global-qr img { margin: -8px 0 0 -8px; } .clearfix:after { content: ""; display: block; clear: both; height: 0; } .official { background: #FFF; } .official .inner { width: 1200px; margin: 0px auto; padding-top: 35px; padding-bottom: 35px; } .official .inner .fl { width: 850px; margin-right: 25px; } .official .inner .fr { width: 325px; } .hd_title { line-height: 22px; position: relative; } .hd_title .title { display: inline-block; font-size: 22px; color: #525252; line-height: 34px; } .hd_title .line { display: inline-block; background: #03B4F5; width: 4px; height: 22px; vertical-align: middle; margin-right: 15px; } .game_wrap { border: 1px #e6e6e6 solid; padding: 30px; margin-top: 20px; } .game_wrap .game_pic { float: left; } .game_wrap .game_pic .pic { width: 120px; height: 120px; overflow: hidden; border-radius: 18px; position:relative; } .game_wrap .game_pic img { width: 100%; height: 100%; position:relative; z-index:2; } .game_wrap .game_pic .grade { margin-top: 5px; } .icon_stars { display: inline-block; background: url(../images/icon_staroff.png) repeat-x 0 0; text-align: left; width: 80px; height: 20px; line-height: 20px; vertical-align: middle; } .game_wrap .game_pic .grade .icon_stars { vertical-align: center; } .icon_stars i { display: inline-block; background: url(../images/icon_staron.png) repeat-x 0 0; width: 100%; height: 20px; line-height: 20px; } .game_wrap .game_text { padding-left: 20px; width: 430px; float: left; } .game_wrap .game_text .txt_box .name { font-size: 24px; font-weight: bold; color: #ffa229; color: #03B4F5; } .game_wrap .game_text dl div { width: 50%; float: left; font-size: 14px; color: #666666; padding-top: 10px;padding-top:5px; } .blue { color: #03B4F5; } .game_wrap .game_text dl .intro { width: 100%; height: 40px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .game_wrap .btn_box { float: right; vertical-align: top; width: 140px; } .game_wrap .btn_box a { width: 140px; height: 40px; line-height: 40px; background-color: #03B4F5; color: #fff; font-size: 18px; text-align: center; display: block; margin-top: 15px; border-radius: 5px; position: relative; } .game_wrap .btn_box a i { width: 24px; height: 30px; display: inline-block; vertical-align: middle; margin-right: 5px; background-image: url(../images/device_icon.png); background-repeat: no-repeat; } .game_wrap .btn_box a.off { background-color: #c7c7c7; } .game_wrap .btn_box a.apple { background-color: #ffa229; } .game_wrap .btn_box a .icon1 { background-position: 0px 0px; } .game_wrap .btn_box a .icon2 { background-position: -28px 0px; } .game_wrap .btn_box .sweep_code { display: ; opacity: 0; visibility: hidden; margin-left: -80px; position: absolute; top: 105px; left: 50%; z-index: 97; transition: all 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28) } .game_wrap .btn_box a:hover .sweep_code { opacity: 1; visibility: visible; top: 40px; } .game_wrap .btn_box .sweep_code .code_arrow { border-bottom: 15px solid #FFF; border-left: 15px solid transparent; border-right: 15px solid transparent; font-size: 0; height: 0; width: 0; line-height: 0; position: absolute; top: -15px; left: 65px } .game_wrap .btn_box .sweep_code .code { background: #FFF; text-align: center; padding: 20px 20px 15px; box-shadow: 0 0 7px rgba(0, 0, 0, 0.4) } .game_wrap .btn_box .sweep_code .code img { width: 120px; height: 120px } .game_wrap .btn_box .sweep_code .code p { font-size: 16px; color: #666; line-height: 30px } .mt35 { margin-top: 35px; } .m-detailintro-screenshot-box { margin-top: 0; } .m-screenshot-box { overflow: hidden; position: relative; height: 316px; } .m-screenshot-box .m-screenshot-list { position: absolute; height: 316px; white-space: nowrap; font-size: 0; left: 0; } .m-screenshot-box .m-screenshot-list .m-screenshot-item { cursor: pointer; overflow: hidden; position: relative; margin-right: 10px; display: inline-block; width: 190px; height: 316px; } .m-screenshot-item img{ position:relative; z-index:2; } .m-screenshot-box .m-screenshot-list .m-video-item { width: 650px; background-color: #000; } .m-screenshot-box .m-button { position: absolute; text-align: center; width: 20px; height: 60px; line-height: 60px; z-index: 99; top: 128px; } .m-screenshot-box .m-button .sprite { vertical-align: middle; cursor: pointer; } .m-screenshot-box .m-button .u-bg { background-color: #000; opacity: .5; filter: alpha(opacity=50); position: absolute; left: 0; right: 0; width: 100%; height: 100%; z-index: -1; } .m-screenshot-box .m-button-left { left: 8px; } .m-screenshot-box .m-button-right { right: 8px; } .m-detail-text-box {} .m-detail-text-box .m-detail-text-wrapper { line-height: 19px; font-size: 14px; color: #303030; overflow: hidden; } .m-detail-text-box .m-expand-wrapper { margin-top: 20px; overflow: hidden; } .m-detail-text-box .m-expand-wrapper .u-btn-expand { outline: none; float: right; display: block; width: 60px; height: 24px; line-height: 24px; background-color: #03B4F5; border-radius: 2px; font-size: 12px; color: #fff; text-align: center; } .m-detail-text-box .m-expand-wrapper .u-btn-expand .sprite { margin-left: 6px; vertical-align: middle; position: relative; top: -2px; } .sprite { background-image: url(../images/spritesheet.png); background-repeat: no-repeat; display: inline-block; } .sprite-ic-arrow-1 { width: 10px; height: 28px; background-position: -5px -35px; } .sprite-ic-arrow-2 { width: 10px; height: 28px; background-position: -499px -35px; } .sprite-ic-arrow-1-y { width: 10px; height: 28px; background-position: -25px -35px; } .sprite-ic-arrow-2-y { width: 10px; height: 28px; background-position: -519px -35px; } .sprite-ic-arrow-3 { width: 12px; height: 6px; background-position: -297px -73px; } .sprite-ic-arrow-4 { width: 12px; height: 6px; background-position: -367px -173px; } .hot_title { font-size: 22px; color: #525252; line-height: 34px; height: 34px; position: relative; } .hot_title .pq_icon { width: 28px; height: 12px; display: inline-block; vertical-align: middle; margin-right: 5px; background: url(../images/hotrank_icon.png) no-repeat; position: absolute; left: 100px; top: 2px; } .hot_list { border: 1px #e6e6e6 solid; padding: 0 10px; box-sizing: border-box; margin-top: 20px; } .hot_list ul li .change_two { padding: 10px 0; display: none; } .hot_list ul li .change_two .ranking { margin-top: 10px; } .hot_list ul li { padding: 5px 0 5px 10px; border-bottom: 1px #e6e6e6 solid; box-sizing: border-box; position: relative; overflow: hidden; } .hot_list ul li:last-of-type { border-bottom: none; } .hot_list .ranking { width: 20px; height: 42px; vertical-align: middle; background-image: url(../images/hotrank_icon.png); background-repeat: no-repeat; background-position: -72px -26px; float: left; margin-right: 10px; } .hot_list .ranking_1 { background-position: -0px -26px; } .hot_list .ranking_2 { background-position: -24px -26px; } .hot_list .ranking_3 { background-position: -48px -26px; } .hot_list .ranking span { color: #fff; padding-top: 12px; display: block; text-align: center; line-height: 22px; } .hot_list .pic { display: inline-block; margin-right: 10px; width: 60px; height: 60px; overflow: hidden; border-radius: 13px; position: relative; } /*占位符*/ .hot_list .pic .img-font { position: absolute; width: 60px; height: 60px; border-radius: 13px; margin: 0 auto; display: table; text-align: center; background: #e2e2e2; color: #bbbaba; overflow: visible; } .hot_list .pic .img-font-cell { display: table-cell; vertical-align: middle; } .hot_list .pic .img-font-text { width: 100%; font-size: 16px; } .hot_list .pic img { width: 60px; height: 60px; position: relative; } .hot_list .text { display: inline-block; vertical-align: middle; width: 170px; } .hot_list .al_t { display: inline-block; vertical-align: middle; width: 170px; margin-top: -70px; } .hot_list .text .name { font-size: 16px; color: #333; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; overflow: hidden; } .hot_list .text .name_title { font-size: 14px; color: #666; line-height: 42px; padding-left: 3px; } .hot_list .text p { margin-top: 5px; width: 100%; height: 15px; line-height: 15px; } .hot_list .text p span { height: 100%; display: block; /*float: left;*/ text-overflow: ellipsis; white-space: nowrap; max-width: 60px; overflow: hidden; } .hot_list .text .game-version { height: 16px; font-size: 14px; line-height: 16px; max-width: 100%; width: 100%; margin-top: 35px; } .hot_list .text .game-version span { max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .hot_list .text .game-version img { width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-top: -4px; } .hot_list .text .game-version i { font-style: normal; line-height: 16px; margin: 0 2px; } .hot_list .text .game-version .game-version-ios { margin-top: 5px; } /* .hot_list .text .type{border-right:1px #999 solid;} */ .hot_list .down_load { font-size: 12px; padding: 0 10px; line-height: 22px; margin-top: 9px; float: right; border-radius: 3px; vertical-align: top; border: 1px #4badff solid; color: #4badff; text-align: center; transition: all 0.3s linear; } .hot_list .down_load_position { position: absolute; top: 10px; right: 0; } .hot_list .down_load_on { color: #fff; background-color: #4badff; margin-top: 25px; } .hot_list .down_load:hover { color: #fff; background-color: #4badff; } .footerBox, .NewFootGroup { background: #f1f2f3; }