/** * ------------------------------------------------------------- * Copyright (c) 2014 boyaa All rights reserved. * http://266.com/ * ------------------------------------------------------------- */ /*! * @overview:主样式 */html { color:#666; background-color:#F2F2F2; -webkit-text-size-adjust:100%; -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent } blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,html,img,input,legend,li,ol,p,pre,td,textarea,th,ul { margin:0; padding:0 } body,button,input,select,textarea { font:14px/1.5 "Helvetica neue",Helvetica,Tahoma,Arial,"\5FAE\8F6F\96C5\9ED1","\5B8B\4F53",sans-serif } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { margin:0; padding:0; display:block } audio,canvas,video { display:inline-block } img { border:0; max-width:100%; height:auto } table { border-collapse:collapse; border-spacing:0 } h1,h2,h3,h4,h5,h6 { font-size:100% } em,i { font-style:normal } ol,ul { list-style:none } button { cursor:pointer; border:0 } a,a:link,a:visited { color:#666; text-decoration:none; -webkit-tap-highlight-color:transparent } a:active,a:hover { text-decoration:none } .hide { display:none } .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0 } * html .clearfix { height:1% } .clearfix { display:block } #header { width:1000px; height:80px; position:absolute; top:0; left:50%; margin-left:-500px } #header #fenxiang { display:none } #header #logo { position: relative; left: 82px; display:block; width:130px; /*padding:5px 3px 4px;*/ background-color:#fff; border-bottom:1px solid #B5D0DC; border-radius:0 0 10px 10px } #header #logo img { width: 130px; } #banner { height:152px; width:100%; background:url(../index5/banner.png) center; background-size:100% 100%; } #guanzhu { height:65px; width:100%; } #content { width:1000px; margin:0 auto } #content .game { height:380px; width:222px; float:left; margin:14px; background-color:#fff; border-radius:10px } #content .game-logo { height:222px; width:222px; border-radius:10px 10px 0 0 } #content .game-logo img { border-radius:10px 10px 0 0 } #content .game-info { border:1px solid #E3E3E3; border-top:none; height:139px; padding:10px; border-radius:0 0 10px 10px } #content .game-info .title { font-size:18px; color:#000; padding-bottom:10px } #content .game-info .des { min-height:42px } #content .game-info footer { height:38px; margin-top:15px } #content .game-info .btn-play { height:36px; width:140px; border:1px solid #EB4949; background-color:#F55656; color:#fff; font-weight:16px; text-align:center; line-height:36px; display:inline-block; border-radius:5px; float:left; position:relative } #content .game-info .btn-play:hover { background-color:#F38080; border-color:#E76c6c } #content .game-info .qr-wrap { height:38px; width:38px; background:url(../index5/q.png); float:right; position:relative; cursor:pointer } #content .game-info .qr-wrap .game-qr { position:absolute; top:-145px; left:-50px; border-radius:10px; box-shadow:0 0 5px rgba(0,0,0,.5); width:120px; height:120px; padding:10px; background-color:#fff; display:none } #content .game-info .qr-wrap .game-qr img { display:block; max-width:100% } #content .game-info .qr-wrap:hover .game-qr { display:block } #content .game-info .btn-play:after { position:absolute; display:block; content:''; width:0; height:0; border-left:6px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent; top:12px; left:30px } #footer { text-align:center; border-top:1px solid #fff; padding:30px 0; margin-top:40px; position:relative; line-height:25px } #footer:after { display:block; content:''; width:100%; height:1px; overflow:hidden; background-color:#D8D8D8; position:absolute; top:-2px; left:0 } #footer a { color:#11A1DC } @media all and (max-width:1000px) { #content,#header { width:100% } #header { left:0; margin-left:0 } #header #logo { margin-left:10px } }@media all and (max-width:481px) { #header { height:25px; left:0; margin:0; width:100%; background-color:#EB4949; color:#FFFFFF; border-bottom:1px solid #B5D0DC; text-align:center; } #header #logo { /*position: relative;*/ /*left: 82px;*/ margin-left:10px; height:40px; padding:0; width:100px; border:none; background-color:transparent } #header #logo img { width:100px; height:35px; margin-top:3px; display:none } #header #fenxiang { display:block } #banner { height:183px; -webkit-background-size:960px 183px; background-size:960px 183px } #content { width:auto; padding:10px } #content .game { padding:10px 10px 10px 80px; border:1px solid #E3E3E3; margin:10px 0 0; min-height:77px; height:auto; position:relative; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box } #content .game .game-logo { height:57px; width:57px; position:absolute; left:10px; top:10px; border-radius:10px } #content .game .game-logo img { border-radius:10px } #content .game .game-info { margin:0 0 0 10px; height:auto; padding:0 70px 0 0; position:relative; font-size:12px; float:left; border:none; background-color:none; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box } #content .game .game-info .title { padding-bottom:5px; font-size:14px } #content .game-info .des { min-height:0 } #content .game .game-info footer { position:absolute; right:10px; top:0; height:30px; line-height:30px; width:60px } #content .game .game-info .btn-play { height:30px; line-height:30px; width:60px } #content .game .game-info .btn-play:after,#content .game .game-info .qr-wrap { display:none } #footer { font-size:12px; padding:5px 0; margin-top:20px } }